@chaibuilder/sdk 3.0.29 → 3.1.0

package/dist/{index-CtXUapBz.js → index-0I-fi22L.js}

@@ -2,19 +2,19 @@ var U = Object.defineProperty;
 var W = (o, n, r) => n in o ? U(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
 var F = (o, n, r) => W(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, uniq, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, sortBy, round } from "lodash-es";
-import { SquareIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, 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, ReloadIcon, CircleIcon, MagnifyingGlassIcon, CaretRightIcon, FrameIcon, CheckIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, StopIcon, EraserIcon, LightningBoltIcon, ZoomInIcon, StackIcon } from "@radix-ui/react-icons";
+import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, syncBlocksWithDefaults, useRegisteredFonts, getBlockFormSchemas } from "@chaibuilder/runtime";
+import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, kebabCase, uniq, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, sortBy, round } from "lodash-es";
+import { SquareIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, 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, CheckIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, StopIcon, EraserIcon, LightningBoltIcon, ZoomInIcon, StackIcon } 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";
 import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { atomWithStorage, splitAtom, useAtomCallback } from "jotai/utils";
 import { g as generateUUID, a as getBreakpointValue, c as cn$1 } from "./common-functions-BGzDsf1z.js";
-import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, at as Input$1, aW as Skeleton, d as Alert, e as AlertDescription, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, a9 as DialogTitle, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, B as Badge, b6 as TooltipProvider, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, b1 as Textarea, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, z as CardFooter, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, a6 as DialogHeader, aX as Slider, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, aL as Separator, aY as Switch, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./tooltip-4-b9QGDK.js";
+import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, at as Input$1, aW as Skeleton, d as Alert, e as AlertDescription, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, a9 as DialogTitle, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, B as Badge, b6 as TooltipProvider, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, b1 as Textarea, z as CardFooter, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, a6 as DialogHeader, aX as Slider, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, aL as Separator, aY as Switch, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./tooltip-4-b9QGDK.js";
 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, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, h as getBlocksFromHTML, j as ROOT_TEMP_KEY } from "./apply-binding-YbVf4970.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-FoDMumPo.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";
@@ -38,7 +38,7 @@ import validator from "@rjsf/validator-ajv8";
 import Autosuggest from "react-autosuggest";
 import { useFeature } from "flagged";
 import { Tree } from "react-arborist";
-import "himalaya";
+import { parse, stringify } from "himalaya";
 import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
 import tailwindForms from "@tailwindcss/forms";
 import tailwindTypography from "@tailwindcss/typography";
@@ -48,6 +48,7 @@ import twContainer from "@tailwindcss/container-queries";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ErrorBoundary } from "react-error-boundary";
 import { motion } from "framer-motion";
+import { compact as compact$1, pick as pick$1 } from "lodash";
 import { limitShift, flip, size } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
 import { Provider as Provider$1 } from "react-wrap-balancer";
@@ -295,20 +296,20 @@ class PubSub {
   }
 }
 const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
-  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (g) => c ? get(g, "_parent") === c : !get(g, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(d, { _id: i }), m = (g) => {
-    if (g === "CHILD")
+  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: d == null ? void 0 : d.length };
-      g === "BEFORE" ? h.position = Math.max(u, 0) : g === "AFTER" && (h.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, h);
+      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: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: n }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "border border-blue-500 bg-primary text-white shadow-2xl", children: [
-      p && /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => m("CHILD"), children: r("Add inside") }),
-      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => m("BEFORE"), children: r("Add before") }),
-      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => m("AFTER"), children: r("Add after") })
+      p && /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("CHILD"), children: r("Add inside") }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("BEFORE"), children: r("Add before") }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("AFTER"), children: r("Add after") })
     ] })
   ] }) : null;
 }, draggedBlockAtom = atom(null);
@@ -334,24 +335,24 @@ function insertBlocksAtPosition(o, n, r, a) {
   const l = [...n];
   let i = [...o];
   if (r) {
-    const u = o.find((m) => m._id === r);
-    if (u && u.content !== void 0 && u.content !== "" && !o.some((g) => g._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: u.content
       };
-      Object.keys(u).forEach((f) => {
-        f.startsWith("content-") && (h[f] = u[f]);
-      }), l.unshift(h), i = i.map((f) => {
-        if (f._id === r) {
-          const x = { ...f, content: "" };
-          return Object.keys(x).forEach((b) => {
-            b.startsWith("content-") && (x[b] = "");
-          }), x;
+      Object.keys(u).forEach((x) => {
+        x.startsWith("content-") && (h[x] = u[x]);
+      }), l.unshift(h), i = i.map((x) => {
+        if (x._id === r) {
+          const f = { ...x, content: "" };
+          return Object.keys(f).forEach((b) => {
+            b.startsWith("content-") && (f[b] = "");
+          }), f;
         }
-        return f;
+        return x;
       });
     }
   }
@@ -359,13 +360,13 @@ function insertBlocksAtPosition(o, n, r, a) {
   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 u = 0, m = 0; u < i.length; u++)
+  for (let u = 0, g = 0; u < i.length; u++)
     if (r !== void 0 ? i[u]._parent === r : !i[u]._parent) {
-      if (m === d) {
+      if (g === d) {
         p = u;
         break;
       }
-      m++;
+      g++;
     }
   return !r && a !== void 0 && a >= c.length && (p = i.length), [...i.slice(0, p), ...l, ...i.slice(p)];
 }
@@ -380,17 +381,17 @@ function findNodeById(o, n) {
   return o.first((r) => r.model._id === n) || null;
 }
 function moveNode(o, n, r, a) {
-  var u, m;
+  var u, g;
   const l = findNodeById(o, n), i = findNodeById(o, r);
   if (!l || !i) return !1;
   i.children || (i.model.children = []);
-  let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((g) => g.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 = (((m = l == null ? void 0 : l.model) == null ? void 0 : m._parent) || "root") === r && c <= a ? a - 1 : a;
+  const p = (((g = l == null ? void 0 : l.model) == null ? void 0 : g._parent) || "root") === r && c <= a ? a - 1 : a;
   try {
     i.addChildAtIndex(l, p);
-  } catch (g) {
-    return console.error("Error adding child to parent:", g), !1;
+  } catch (m) {
+    return console.error("Error adding child to parent:", m), !1;
   }
   return !0;
 }
@@ -430,10 +431,10 @@ function handleNewParentTextBlock(o, n, r) {
     });
     const d = o.map((u) => {
       if (u._id === r) {
-        const m = { ...u, content: "" };
-        return Object.keys(m).forEach((g) => {
-          g.startsWith("content-") && (m[g] = "");
-        }), m;
+        const g = { ...u, content: "" };
+        return Object.keys(g).forEach((m) => {
+          m.startsWith("content-") && (g[m] = "");
+        }), g;
       }
       return u;
     }), p = d.findIndex((u) => u._id === n._id);
@@ -449,8 +450,8 @@ function moveBlocksWithChildren(o, n, r, a) {
   const c = r || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
   if (moveNode(p, n, c, a)) {
     let u = flattenTree(p);
-    const m = u.find((g) => g._id === n);
-    return m && (m._parent = c === "root" ? null : c), u.shift(), r && (u = handleNewParentTextBlock(u, l, r)), u;
+    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;
 }
@@ -473,22 +474,22 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
 }, removeNestedBlocks = (o, n) => {
   let r = [...o], a = [];
   n.forEach((d) => {
-    const p = r.find((g) => g._id === d);
+    const p = r.find((m) => m._id === d);
     if (!p || !p._parent) return;
-    const u = p._parent, m = r.filter((g) => g._parent === u);
-    if (m.length === 2) {
-      const g = m.find((h) => h._id !== d);
-      if (g && g._type === "Text") {
-        const h = r.find((f) => f._id === u);
-        h && "content" in h && (r = r.map((f) => {
-          if (f._id === u) {
-            const x = { ...f, content: g.content };
-            return Object.keys(g).forEach((b) => {
-              b.startsWith("content-") && (x[b] = g[b]);
-            }), x;
+    const u = p._parent, g = r.filter((m) => m._parent === u);
+    if (g.length === 2) {
+      const m = g.find((h) => h._id !== d);
+      if (m && m._type === "Text") {
+        const h = r.find((x) => x._id === u);
+        h && "content" in h && (r = r.map((x) => {
+          if (x._id === u) {
+            const f = { ...x, content: m.content };
+            return Object.keys(m).forEach((b) => {
+              b.startsWith("content-") && (f[b] = m[b]);
+            }), f;
           }
-          return f;
-        }), a.push(g._id));
+          return x;
+        }), a.push(m._id));
       }
     }
   });
@@ -551,7 +552,7 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
         for (let p = 0; p < a.length; p++)
           d = moveBlocksWithChildren(d, a[p], l, i);
         return each(a, (p) => {
-          const u = find(d, (m) => m._id === p);
+          const u = find(d, (g) => g._id === p);
           u && r({ id: p, props: { _parent: u._parent || null } });
         }), n({ type: "blocks-updated", blocks: d }), d;
       });
@@ -570,34 +571,34 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
     status: "idle",
     props: {},
     error: void 0
-  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (f) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), m = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), g = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
+  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (x) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), m = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
   return useEffect(() => {
     if (n === "mock") {
       if (isFunction(a)) {
-        i((x) => ({ ...x, status: "loading", props: {} }));
-        const f = a({ block: o });
-        if (!isObject(f))
+        i((f) => ({ ...f, status: "loading", props: {} }));
+        const x = a({ block: o });
+        if (!isObject(x))
           throw new Error("mockDataProvider should return an object");
-        i((x) => ({ ...x, status: "loaded", props: f }));
+        i((f) => ({ ...f, status: "loaded", props: x }));
       }
       return;
     }
-    n === "live" && (!m && !g || (i((f) => ({ ...f, status: "loading", props: {} })), d({ block: o }).then((f = {}) => {
-      m ? (p((x) => ({
-        ...x,
+    n === "live" && (!g && !m || (i((x) => ({ ...x, status: "loading", props: {} })), d({ block: o }).then((x = {}) => {
+      g ? (p((f) => ({
+        ...f,
         [o._id]: {
           status: "loaded",
-          props: get(f, "items", []),
+          props: get(x, "items", []),
           repeaterItems: o.repeaterItems
         }
-      })), i((x) => ({ ...x, status: "loaded", props: { totalItems: get(f, "totalItems") } })), c([o._id], { totalItems: get(f, "totalItems") })) : i((x) => ({ ...x, status: "loaded", props: isObject(f) ? f : {} }));
-    }).catch((f) => {
-      m ? (p((x) => ({
-        ...x,
-        [o._id]: { status: "error", error: f, props: [] }
-      })), i((x) => ({ ...x, status: "error", error: f, props: {} }))) : i((x) => ({ ...x, status: "error", error: f, props: {} }));
+      })), i((f) => ({ ...f, status: "loaded", props: { totalItems: get(x, "totalItems") } })), c([o._id], { totalItems: get(x, "totalItems") })) : i((f) => ({ ...f, status: "loaded", props: isObject(x) ? x : {} }));
+    }).catch((x) => {
+      g ? (p((f) => ({
+        ...f,
+        [o._id]: { status: "error", error: x, props: [] }
+      })), i((f) => ({ ...f, status: "error", error: x, props: {} }))) : i((f) => ({ ...f, status: "error", error: x, props: {} }));
     })));
-  }, [o == null ? void 0 : o._id, u, m, g, a, n]), {
+  }, [o == null ? void 0 : o._id, u, g, m, a, n]), {
     $loading: get(l, "status") === "loading",
     ...o ? get(l, "props", {}) : {}
   };
@@ -750,22 +751,22 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
     return console.warn(`Failed to get block definition for type: ${r._type}`, a), !1;
   }
 }) : !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: d, fallbackLang: p } = useLanguages(), [u] = useIsPageLoaded(), m = () => {
-    const f = l();
-    return !d || d === p ? !1 : checkMissingTranslations(f.blocks || [], d);
+  const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (x) => {
+  }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: d, fallbackLang: p } = useLanguages(), [u] = useIsPageLoaded(), g = () => {
+    const x = l();
+    return !d || d === p ? !1 : checkMissingTranslations(x.blocks || [], d);
   };
   return { savePage: useThrottledCallback(
-    async (f = !1) => {
+    async (x = !1) => {
       if (!c("save_page") || !u)
         return;
       n("SAVING"), a("SAVING");
-      const x = l();
+      const f = l();
       return await r({
-        autoSave: f,
-        blocks: x.blocks,
+        autoSave: x,
+        blocks: f.blocks,
         theme: i,
-        needTranslations: m()
+        needTranslations: g()
       }), setTimeout(() => {
         n("SAVED"), a("SAVED");
       }, 100), !0;
@@ -777,16 +778,16 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
     if (!c("save_page") || !u)
       return;
     n("SAVING"), a("SAVING");
-    const f = l();
+    const x = l();
     return await r({
       autoSave: !0,
-      blocks: f.blocks,
+      blocks: x.blocks,
       theme: i,
-      needTranslations: m()
+      needTranslations: g()
     }), setTimeout(() => {
       n("SAVED"), a("SAVED");
     }, 100), !0;
-  }, saveState: o, setSaveState: n, needTranslations: m };
+  }, saveState: o, setSaveState: n, needTranslations: g };
 }, undoManager = new UndoManager();
 undoManager.setLimit(50);
 const undoRedoStateAtom = atom({
@@ -838,65 +839,65 @@ const undoRedoStateAtom = atom({
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, b, y) => {
-      const S = map(x, (B) => {
-        const j = n.find((I) => I._id === B)._parent || null, k = n.filter((I) => j ? I._parent === j : !I._parent).map((I) => I._id).indexOf(B);
-        return { _id: B, oldParent: j, oldPosition: k };
-      }), v = S.find(({ _id: B }) => B === x[0]);
-      v && v.oldParent === b && v.oldPosition === y || (i(x, b, y), o({
-        undo: () => each(S, ({ _id: B, oldParent: _, oldPosition: j }) => {
-          i([B], _, j);
+    moveBlocks: (f, b, y) => {
+      const C = map(f, (j) => {
+        const B = n.find((I) => I._id === j)._parent || null, k = n.filter((I) => B ? I._parent === B : !I._parent).map((I) => I._id).indexOf(j);
+        return { _id: j, oldParent: B, oldPosition: k };
+      }), v = C.find(({ _id: j }) => j === f[0]);
+      v && v.oldParent === b && v.oldPosition === y || (i(f, b, y), o({
+        undo: () => each(C, ({ _id: j, oldParent: _, oldPosition: B }) => {
+          i([j], _, B);
         }),
-        redo: () => i(x, b, y)
+        redo: () => i(f, b, y)
       }));
     },
-    addBlocks: (x, b, y) => {
-      a(x, b, y), o({
-        undo: () => l(map(x, "_id")),
-        redo: () => a(x, b, y)
+    addBlocks: (f, b, y) => {
+      a(f, b, y), o({
+        undo: () => l(map(f, "_id")),
+        redo: () => a(f, b, y)
       });
     },
-    removeBlocks: (x) => {
+    removeBlocks: (f) => {
       var v;
-      const b = (v = first(x)) == null ? void 0 : v._parent, S = n.filter((B) => b ? B._parent === b : !B._parent).indexOf(first(x));
-      l(map(x, "_id")), o({
-        undo: () => a(x, b, S),
-        redo: () => l(map(x, "_id"))
+      const b = (v = first(f)) == null ? void 0 : v._parent, C = n.filter((j) => b ? j._parent === b : !j._parent).indexOf(first(f));
+      l(map(f, "_id")), o({
+        undo: () => a(f, b, C),
+        redo: () => l(map(f, "_id"))
       });
     },
-    updateBlocks: (x, b, y) => {
-      let S = [];
+    updateBlocks: (f, b, y) => {
+      let C = [];
       if (y)
-        S = map(x, (v) => ({ _id: v, ...y }));
+        C = map(f, (v) => ({ _id: v, ...y }));
       else {
         const v = keys(b);
-        S = map(x, (B) => {
-          const _ = n.find((C) => C._id === B), j = { _id: B };
-          return each(v, (C) => j[C] = _[C]), j;
+        C = map(f, (j) => {
+          const _ = n.find((S) => S._id === j), B = { _id: j };
+          return each(v, (S) => B[S] = _[S]), B;
         });
       }
-      c(map(x, (v) => ({ _id: v, ...b }))), o({
-        undo: () => c(S),
-        redo: () => c(map(x, (v) => ({ _id: v, ...b })))
+      c(map(f, (v) => ({ _id: v, ...b }))), o({
+        undo: () => c(C),
+        redo: () => c(map(f, (v) => ({ _id: v, ...b })))
       });
     },
-    updateBlocksRuntime: (x, b) => {
-      c(map(x, (y) => ({ _id: y, ...b })));
+    updateBlocksRuntime: (f, b) => {
+      c(map(f, (y) => ({ _id: y, ...b })));
     },
-    setNewBlocks: (x) => {
-      r(x), o({
+    setNewBlocks: (f) => {
+      r(f), o({
         undo: () => r(n),
-        redo: () => r(x)
+        redo: () => r(f)
       });
     },
-    updateMultipleBlocksProps: (x) => {
+    updateMultipleBlocksProps: (f) => {
       let b = [];
-      b = map(x, (y) => {
-        const S = keys(y), v = n.find((_) => _._id === y._id), B = {};
-        return each(S, (_) => B[_] = v[_]), B;
-      }), c(x), o({
+      b = map(f, (y) => {
+        const C = keys(y), v = n.find((_) => _._id === y._id), j = {};
+        return each(C, (_) => j[_] = v[_]), j;
+      }), c(f), o({
         undo: () => c(b),
-        redo: () => c(x)
+        redo: () => c(f)
       });
     }
   };
@@ -904,16 +905,16 @@ const undoRedoStateAtom = atom({
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var h;
-      for (let f = 0; f < i.length; f++) {
-        const { _id: x } = i[f];
-        i[f]._id = generateUUID();
-        const b = filter(i, { _parent: x });
+      for (let x = 0; x < i.length; x++) {
+        const { _id: f } = i[x];
+        i[x]._id = generateUUID();
+        const b = filter(i, { _parent: f });
         for (let y = 0; y < b.length; y++)
-          b[y]._parent = i[f]._id;
+          b[y]._parent = i[x]._id;
       }
       const p = first(i);
-      let u, m;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, m = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, m = u._parent), r(i, m, d), 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]
   );
@@ -923,15 +924,15 @@ const undoRedoStateAtom = atom({
         const b = i.blocks;
         return a(b, c, d);
       }
-      const p = generateUUID(), u = getDefaultBlockProps(i.type), m = {
+      const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
         _id: p,
         ...u,
         ...has(i, "_name") && { _name: i._name },
         ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
-      let g, h;
-      return c && (g = find(o, { _id: c }), m._parent = c, h = c), !canAcceptChildBlock(g == null ? void 0 : g._type, m._type) && g && (m._parent = g._parent, h = g._parent), r([m], h, d), n([m._id]), m;
+      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, d), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2042,7 +2043,7 @@ function removeDuplicateClasses(o) {
   for (const l of r) {
     const i = l.property, c = n.indexOf(l.mq);
     for (let d = c + 1; d < n.length; d++) {
-      const p = n[d], u = r.find((m) => m.property === i && m.mq === p);
+      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)
@@ -2315,7 +2316,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
           let p = "";
           o([n], { [i]: "" });
           for (let u = 0; u < d.length; u++)
-            p += d[u].join(""), o([n], { [i]: p }), await new Promise((m) => setTimeout(m, a));
+            p += d[u].join(""), o([n], { [i]: p }), await new Promise((g) => setTimeout(g, a));
         }
       }
     },
@@ -2356,45 +2357,45 @@ const getBlockWithChildren = (o, n) => {
     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 m = get(a, `${u}-${n}`, ""), g = get(a, u, "");
-        d[u] = isString(m) && m.trim() || g, r && (d[u] = g);
+        const g = get(a, `${u}-${n}`, ""), m = get(a, u, "");
+        d[u] = isString(g) && g.trim() || m, r && (d[u] = m);
       }
     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(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), m = p.length ? p : u, g = (h, f) => {
-    const x = cloneDeep(f.find((b) => b._id === h));
-    for (const b in x) {
-      const y = x[b];
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (h, x) => {
+    const f = cloneDeep(x.find((b) => b._id === h));
+    for (const b in f) {
+      const y = f[b];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: S, classes: v } = getSplitChaiClasses(y);
-        x[b] = compact(flattenDeep([S, v])).join(" ");
+        const { baseClasses: C, classes: v } = getSplitChaiClasses(y);
+        f[b] = compact(flattenDeep([C, v])).join(" ");
       } else
-        b !== "_id" && delete x[b];
+        b !== "_id" && delete f[b];
     }
-    return x;
+    return f;
   };
   return {
     askAi: useCallback(
-      async (h, f, x, b) => {
+      async (h, x, f, b) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, S = x.toLowerCase().includes("translate the content"), v = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p, S) : [g(f, d)], B = await l(h, addLangToPrompt(x, m, h), v, y), { blocks: _, error: j } = B;
-            if (j) {
-              a(j);
+            const y = p === u ? "" : p, C = f.toLowerCase().includes("translate the content"), v = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p, C) : [m(x, d)], j = await l(h, addLangToPrompt(f, g, h), v, y), { blocks: _, error: B } = j;
+            if (B) {
+              a(B);
               return;
             }
             if (h === "styles") {
-              const C = _.map((k) => {
+              const S = _.map((k) => {
                 for (const I in k)
                   I !== "_id" && (k[I] = `${STYLES_KEY},${k[I]}`);
                 return k;
               });
-              c(C);
+              c(S);
             } else
               i(_);
-            b && b(B);
+            b && b(j);
           } catch (y) {
             a(y);
           } finally {
@@ -2408,7 +2409,7 @@ const getBlockWithChildren = (o, n) => {
         p,
         u,
         d,
-        m,
+        g,
         c,
         i
       ]
@@ -2470,55 +2471,59 @@ 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 = useCallback(
-    (d) => d.some((p) => getDuplicatedBlocks(o, p, null).some((m) => m._type === "PartialBlock" || m._type === "GlobalBlock")),
+  const [o] = useBlocksStore(), [n, r] = useAtom$1(copiedBlockIdsAtom), a = useSetAtom$1(cutBlockIdsAtom), { getPartailBlocks: l } = usePartialBlocksStore(), i = useBuilderProp("flags.useClipboard", !1), c = useCallback(
+    (p) => p.some((u) => getDuplicatedBlocks(o, u, null).some((m) => m._type === "PartialBlock" || m._type === "GlobalBlock")),
     [o]
-  ), c = useCallback(
-    async (d, p = !1) => {
+  ), d = useCallback(
+    async (p, u = !1) => {
       try {
-        if (isEmpty(d)) return;
-        r(d), a([]);
-        const u = {
-          _chai_copied_blocks: d.flatMap((m) => {
-            const g = getDuplicatedBlocks(o, m, null);
-            if (!p)
-              return g;
-            let h = [];
-            for (const f of g)
+        if (isEmpty(p)) return;
+        r(p), a([]);
+        const g = {
+          _chai_copied_blocks: p.flatMap((m) => {
+            const h = getDuplicatedBlocks(o, m, null);
+            if (!u)
+              return h;
+            let x = [];
+            for (const f of h)
               if (f._type === "PartialBlock" || f._type === "GlobalBlock") {
-                let x = l(f.partialBlockId);
-                f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((b) => (isEmpty(b._parent) && set(b, "_parent", f._parent), b))), h = [...h, ...x];
+                let b = l(f.partialBlockId);
+                f._parent && (b == null ? void 0 : b.length) > 0 && (b = b.map((y) => (isEmpty(y._parent) && set(y, "_parent", f._parent), y))), x = [...x, ...b];
               } else
-                h.push(f);
-            return h;
+                x.push(f);
+            return x;
           })
         };
+        if (!i)
+          return;
         if (!navigator.clipboard) {
           toast.error("Clipboard not available.");
           return;
         }
-        toast.promise(navigator.clipboard.writeText(JSON.stringify(u)), {
+        toast.promise(navigator.clipboard.writeText(JSON.stringify(g)), {
           success: "Blocks copied successfully",
           error: "Failed to copy blocks to clipboard"
         });
-      } catch (u) {
-        toast.error("Failed to copy blocks to clipboard"), console.error("Failed to copy blocks to clipboard:", u);
+      } catch (g) {
+        toast.error("Failed to copy blocks to clipboard"), console.error("Failed to copy blocks to clipboard:", g);
       }
     },
     [r, a, o]
   );
-  return [n, c, i];
+  return [n, d, c];
 }, useCopyToClipboard = () => {
-  const [o, n] = useState(null), r = useCallback(async (a) => {
+  const [o, n] = useState(null), r = useBuilderProp("flags.useClipboard", !1), a = useCallback(async (l) => {
+    if (!r)
+      return console.warn("Clipboard feature is disabled"), !1;
     if (!(navigator != null && navigator.clipboard))
       return console.warn("Clipboard not supported"), !1;
     try {
-      return await navigator.clipboard.writeText(a), n(a), !0;
-    } catch (l) {
-      return console.warn("Copy failed", l), n(null), !1;
+      return await navigator.clipboard.writeText(l), n(l), !0;
+    } catch (i) {
+      return console.warn("Copy failed", i), n(null), !1;
     }
   }, []);
-  return [o, r];
+  return [o, a];
 }, darkModeAtom = atomWithStorage("darkMode", !1), useDarkMode = () => {
   const [o, n] = useAtom$1(darkModeAtom);
   return [o, n];
@@ -2530,11 +2535,11 @@ const getBlockWithChildren = (o, n) => {
       each(a, (c) => {
         const d = o.find((h) => h._id === c);
         l ? l === "root" && (l = null) : l = d._parent;
-        const m = filter(
+        const g = filter(
           o,
           (h) => isString(l) ? h._parent === l : !h._parent
-        ).indexOf(d) + 1, g = getDuplicatedBlocks(o, c, l);
-        r(g, l, m), i.push(get(g, "0._id", ""));
+        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
+        r(m, l, g), i.push(get(m, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -2662,19 +2667,19 @@ const getBlockWithChildren = (o, n) => {
   );
   return map(i, (c) => {
     const d = o(c), p = a;
-    let { classes: u, baseClasses: m } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
-    return each(p, (g) => {
-      const h = g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
-      u = u.replace(f, " ").replace(/\s+/g, " ").trim();
-      const x = first(g.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(g.split(":").pop().trim());
-    }), each(p, (g) => {
-      const h = g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
-      m = m.replace(f, " ").replace(/\s+/g, " ").trim();
+    let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
+    return each(p, (m) => {
+      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
+      u = u.replace(x, " ").replace(/\s+/g, " ").trim();
+      const f = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], f) && p.push(m.split(":").pop().trim());
+    }), each(p, (m) => {
+      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
+      g = g.replace(x, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
-        [l.prop]: `${STYLES_KEY}${m},${u}`
+        [l.prop]: `${STYLES_KEY}${g},${u}`
       }
     };
   });
@@ -2787,7 +2792,136 @@ const getBlockWithChildren = (o, n) => {
   return null;
 });
 wrapperBlockAtom.debugLabel = "wrapperBlockAtom";
-const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), inlineEditingActiveAtom = atom("");
+const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe = () => useAtom$1(canvasIframeAtom), ATTRIBUTES_TO_REMOVE = ["data-block-index", "data-drop", "data-style-id", "data-block-parent", "data-style-prop"], CORE_BLOCKS$1 = [
+  "Box",
+  "Button",
+  "Checkbox",
+  "Divider",
+  "EmptyBox",
+  "Form",
+  "FormButton",
+  "Heading",
+  "Image",
+  "Input",
+  "Label",
+  "LineBreak",
+  "Link",
+  "List",
+  "ListItem",
+  "Paragraph",
+  "Radio",
+  "RichText",
+  "Select",
+  "Span",
+  "Text",
+  "TextArea",
+  "Video"
+], cleanNode = (o) => o.type === "element" && ["script", "style", "link"].includes(o.tagName || "") || o.type === "comment" ? null : o.type === "text" ? o : o.type === "element" && o.attributes && o.attributes.find((n) => n.key === "id" && n.value === "add-block-bottom") ? null : (o.type === "element" && o.attributes && (o.attributes = o.attributes.filter((n) => !ATTRIBUTES_TO_REMOVE.includes(n.key))), o.children && (o.children = o.children.map(cleanNode).filter((n) => n !== null)), o), transformNode = (o, n) => {
+  if (o.type !== "element" || !o.attributes)
+    return o;
+  o.tagName === "span" && o.attributes.find((i) => i.key === "role" && i.value === "link") && (o.tagName = "a", o.attributes = o.attributes.filter((i) => i.key !== "role"));
+  const r = o.attributes.find((l) => l.key === "data-block-type"), a = o.attributes.find((l) => l.key === "data-block-id");
+  if (r) {
+    const l = r.value;
+    if (CORE_BLOCKS$1.includes(l))
+      o.attributes = o.attributes.filter((i) => i.key !== "data-block-type"), o.children && (o.children = o.children.map((i) => transformNode(i, n)));
+    else {
+      const i = `chai-${kebabCase(l)}`;
+      o.tagName = i, a ? o.attributes = [{ key: "id", value: a.value }] : o.attributes = [], o.attributes.push({ key: "chai-type", value: l });
+      const c = getRegisteredChaiBlock(l), d = n.find((p) => p._id === (a == null ? void 0 : a.value));
+      if (d && o.attributes.push(
+        ...Object.entries(d).filter(([p]) => !["_id", "_type", "_parent", "_index", "_name"].includes(p)).map(([p, u]) => ({
+          key: p,
+          value: typeof u == "string" ? u : JSON.stringify(u)
+        }))
+      ), c && (c != null && c.description) && o.attributes.push({
+        key: "about-this-component",
+        value: c.description
+      }), c) {
+        if (c.canMove) {
+          const p = typeof c.canMove == "function" ? c.canMove() : c.canMove;
+          o.attributes.push({
+            key: "can-move",
+            value: String(p)
+          });
+        }
+        if (c.canDelete) {
+          const p = typeof c.canDelete == "function" ? c.canDelete() : c.canDelete;
+          o.attributes.push({
+            key: "can-delete",
+            value: String(p)
+          });
+        }
+      }
+      l === "Icon" && (o.attributes = o.attributes.filter((p) => p.key !== "icon")), c && c.canAcceptBlock ? o.children && (o.children = o.children.map((p) => transformNode(p, n))) : o.children = [];
+    }
+  } else
+    o.children && (o.children = o.children.map((l) => transformNode(l, n)));
+  return o.attributes = o.attributes.filter((l) => l.key !== "data-block-type" && l.key !== "data-block-id"), o;
+}, useBlocksHtmlForAi = () => {
+  const o = useSelectedBlock(), [n] = useBlocksStore(), [r] = useCanvasIframe();
+  return useCallback(() => {
+    var u, g;
+    if (!r) return "";
+    const a = o != null && o._id ? `[data-block-id="${o._id}"]` : "#canvas", l = (g = (u = r.contentDocument) == null ? void 0 : u.querySelector(a)) == null ? void 0 : g[a === "#canvas" ? "innerHTML" : "outerHTML"];
+    if (!l) return "";
+    const d = parse(l).map(cleanNode).filter((m) => m !== null).map((m) => transformNode(m, n));
+    let p = stringify(d);
+    return p = p.replace(/#styles:,/g, "#styles:"), p.replace(/\s+/g, " ").trim();
+  }, [o, r]);
+}, handlei18N = (o, n) => o.map((r) => {
+  const a = getRegisteredChaiBlock(r._type);
+  if (!a) return r;
+  const l = a.i18nProps;
+  if (!l) return r;
+  const i = filter(n, { _type: r._type }), c = pick(r, l);
+  return each(c, (d, p) => {
+    const u = find(i, (g) => {
+      var x;
+      const m = typeof g[p] == "string" ? (x = g[p]) == null ? void 0 : x.trim().toLowerCase() : JSON.stringify(g[p]), h = typeof d == "string" ? d.trim().toLowerCase() : JSON.stringify(d);
+      return m === h;
+    });
+    if (u) {
+      const g = filter(Object.keys(u), (h) => startsWith(h, `${p}-`)), m = pick(u, g);
+      r = { ...r, ...m };
+    }
+  }), r;
+}), useHtmlToBlocks = () => {
+  const [o] = useBlocksStore();
+  return useCallback(
+    (n) => {
+      const r = syncBlocksWithDefaults(getBlocksFromHTML(n)), a = mergeBlocksWithExisting(r, o);
+      return handlei18N(a, o);
+    },
+    [o]
+  );
+}, getAllDescendantBlocks = (o, n) => {
+  const r = o.filter((l) => l._parent === n), a = r.flatMap((l) => getAllDescendantBlocks(o, l._id));
+  return [...r, ...a];
+}, getBlockWithNestedChildren = (o, n) => {
+  const r = n.find((l) => l._id === o);
+  if (!r) return [];
+  const a = getAllDescendantBlocks(n, o);
+  return [r, ...a];
+}, useI18nBlocks = () => {
+  const o = useSelectedBlock(), [n] = useBlocksStore();
+  return useCallback(
+    (r = "") => {
+      const a = o != null && o._id ? getBlockWithNestedChildren(o._id, n) : n;
+      return a ? compact$1(
+        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 d = r === "ALL" ? Object.keys(l).filter((p) => c.find((u) => p.startsWith(u))) : c.map((p) => r ? `${p}-${r}` : p);
+          return pick$1(l, [...d, "_id"]);
+        })
+      ) : [];
+    },
+    [o == null ? void 0 : o._id, n]
+  );
+}, inlineEditingActiveAtom = atom("");
 inlineEditingActiveAtom.debugLabel = "inlineEditingActiveAtom";
 const inlineEditingItemIndexAtom = atom(0);
 inlineEditingItemIndexAtom.debugLabel = "inlineEditingItemIndexAtom";
@@ -2805,7 +2939,7 @@ const useInlineEditing = () => {
 }, replaceBlock = (o, n, r) => {
   const a = find(o, { _id: n });
   if (!a) return o;
-  const l = o.findIndex((g) => g._id === n), i = getAllDescendantIds(o, n), c = /* @__PURE__ */ new Set([n, ...i]), d = o.filter((g) => !c.has(g._id)), p = new Set(r.map((g) => g._id)), u = r.map((g) => !g._parent || !p.has(g._parent) ? { ...g, _parent: a._parent } : g);
+  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 [
     ...d.slice(0, l),
     ...u,
@@ -2816,7 +2950,7 @@ const useInlineEditing = () => {
   return useCallback(
     (l, i) => {
       if (!a(PERMISSIONS.EDIT_BLOCK)) return;
-      const c = replaceBlock(o, l, i);
+      const c = l ? replaceBlock(o, l, i) : i;
       r(c), i.length > 0 && setTimeout(() => n([i[0]._id]), 200);
     },
     [o, n, r, a]
@@ -2841,21 +2975,21 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     return "VERTICAL";
   }
 }, isDisabledControl = (o, n, r) => !!(o && (r === "UP" || r === "LEFT") || n && (r === "DOWN" || r === "RIGHT")), useBlockController = (o, n) => {
-  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), m = u <= 0, g = u + 1 === (d == null ? void 0 : d.length), h = getParentBlockOrientation(c, i, a), f = useCallback(
-    (x) => {
-      isDisabledControl(m, g, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), n());
+  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (f) => c ? get(f, "_parent") === c : !get(f, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, m = u + 1 === (d == null ? void 0 : d.length), h = getParentBlockOrientation(c, i, a), x = useCallback(
+    (f) => {
+      isDisabledControl(g, m, f) || p || (f === "UP" || f === "LEFT" ? l([i], c || null, u - 1) : (f === "DOWN" || f === "RIGHT") && l([i], c || null, u + 2), n());
     },
-    [m, g, p, u, i, c, n]
+    [g, m, p, u, i, c, n]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
-    ({ key: x }) => {
+    ({ key: f }) => {
       var b;
-      f((b = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : b.toUpperCase());
+      x((b = f == null ? void 0 : f.replace("Arrow", "")) == null ? void 0 : b.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
-    [f]
-  ), { isOnlyChild: p, isFirstBlock: m, isLastBlock: g, moveBlock: f, orientation: h };
+    [x]
+  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: m, moveBlock: x, orientation: h };
 }, BlockController = ({ block: o, updateFloatingBar: n }) => {
   const { isOnlyChild: r, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
     o,
@@ -2863,12 +2997,12 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
   );
   return r ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: d, dir: p, key: u }) => {
     if (c !== p) return null;
-    const m = isDisabledControl(a, l, u);
-    return m ? null : /* @__PURE__ */ jsx(
+    const g = isDisabledControl(a, l, u);
+    return g ? null : /* @__PURE__ */ jsx(
       d,
       {
         onClick: () => i(u),
-        className: `${m ? "pointer-events-none cursor-not-allowed opacity-50" : "duration-300 hover:scale-95 hover:opacity-80"}`
+        className: `${g ? "pointer-events-none cursor-not-allowed opacity-50" : "duration-300 hover:scale-95 hover:opacity-80"}`
       },
       u
     );
@@ -2995,7 +3129,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       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: d } = usePermissions(), { editingBlockId: p } = useInlineEditing(), { document: u } = useFrame(), { floatingStyles: m, refs: g, update: h } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), { editingBlockId: p } = useInlineEditing(), { document: u } = useFrame(), { floatingStyles: g, refs: m, update: h } = useFloating({
     placement: "top-start",
     middleware: [
       shift({
@@ -3012,8 +3146,8 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       }),
       size({
         boundary: u == null ? void 0 : u.body,
-        apply({ availableWidth: b, availableHeight: y, elements: S }) {
-          Object.assign(S.floating.style, {
+        apply({ availableWidth: b, availableHeight: y, elements: C }) {
+          Object.assign(C.floating.style, {
             maxWidth: `${Math.max(200, b)}px`,
             maxHeight: `${Math.max(100, y)}px`
           });
@@ -3023,7 +3157,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     elements: { reference: n }
   });
   useResizeObserver(n, () => h(), n !== null), useResizeObserver(u == null ? void 0 : u.body, () => h(), (u == null ? void 0 : u.body) !== null);
-  const f = get(o, "_parent", null), x = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
+  const x = get(o, "_parent", null), f = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
   return useEffect(() => {
     if (n) {
       const b = setTimeout(() => h(), 500);
@@ -3035,8 +3169,8 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     {
       role: "button",
       tabIndex: 0,
-      ref: g.setFloating,
-      style: m,
+      ref: m.setFloating,
+      style: g,
       onClick: (b) => {
         b.stopPropagation(), b.preventDefault();
       },
@@ -3046,16 +3180,16 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       onKeyDown: (b) => b.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        f && /* @__PURE__ */ jsx(
+        x && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([f]);
+              c([]), l([x]);
             }
           }
         ),
-        /* @__PURE__ */ jsx(BlockActionLabel, { label: x, block: o }),
+        /* @__PURE__ */ jsx(BlockActionLabel, { label: f, block: o }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-1 pr-1.5", children: [
           /* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "hover:scale-105" }) }),
           canDuplicateBlock(get(o, "_type", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([o == null ? void 0 : o._id]) }) : null,
@@ -3262,7 +3396,7 @@ F(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: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: m, pasteBlocks: g } = usePasteBlocks(), h = o ? { document: o } : {};
+  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",
     () => u(n),
@@ -3271,17 +3405,17 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   ), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      m(n[0]) && g(n);
+      g(n[0]) && m(n);
     },
     { ...h, enabled: !isEmpty(n), preventDefault: !0 },
-    [n, m, g]
+    [n, g, m]
   ), useHotkeys("esc", () => r([]), h, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...h, enabled: !isEmpty(n), preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
     "del, backspace",
-    (f) => {
-      f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
+    (x) => {
+      x.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
     h,
     [n, l]
@@ -3291,7 +3425,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   return useKeyEventWatcher(o), null;
 }, AddBlockAtBottom = () => {
   const { t: o } = useTranslation(), { hasPermission: n } = usePermissions();
-  return n(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer py-2", children: [
+  return n(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs("div", { id: "add-block-bottom", className: "group relative w-full cursor-pointer py-2", children: [
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx(
       "div",
@@ -3306,6 +3440,9 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         ] })
       }
     ),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx("br", {})
   ] }) : null;
 }, CssThemeVariables = ({ theme: o }) => {
@@ -3482,28 +3619,28 @@ const RteDropdownMenu = ({
   from: a,
   menuRef: l
 }) => {
-  const { document: i } = useFrame(), [c, d] = useState({ left: void 0, right: void 0, top: void 0, bottom: void 0 }), [p, u] = useState(!1), m = 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 S, v;
+    var C, v;
     if (!p) {
       d({ left: void 0, right: void 0, top: void 0, bottom: void 0 });
       return;
     }
-    const g = (S = m.current) == null ? void 0 : S.getBoundingClientRect(), h = (v = l.current) == null ? void 0 : v.getBoundingClientRect();
-    let f = g == null ? void 0 : g.left, x = (g == null ? void 0 : g.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 - (g == null ? void 0 : g.right)), x + 202 >= i.body.clientHeight && (x = null, y = i.body.clientHeight - (g == null ? void 0 : g.bottom) + (h == null ? void 0 : h.height)), d({ left: f, top: x, right: b, bottom: y });
+    const m = (C = g.current) == null ? void 0 : C.getBoundingClientRect(), h = (v = l.current) == null ? void 0 : v.getBoundingClientRect();
+    let x = m == null ? void 0 : m.left, f = (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 && (x = void 0, b = i.body.offsetWidth - (m == null ? void 0 : m.right)), f + 202 >= i.body.clientHeight && (f = null, y = i.body.clientHeight - (m == null ? void 0 : m.bottom) + (h == null ? void 0 : h.height)), d({ left: x, top: f, right: b, bottom: y });
   }, [p]), a === "canvas") {
-    const g = () => {
+    const m = () => {
       u(!1), o && (o == null || o.view.focus(), o == null || o.chain().focus().run());
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { ref: m, onClick: () => u((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",
           {
             id: "chaibuilder-rte-dropdown-menu-content",
-            onClick: g,
+            onClick: m,
             className: "fixed inset-0 left-0 top-0 z-[10001] h-full w-screen",
             children: /* @__PURE__ */ jsx(
               "div",
@@ -3514,7 +3651,7 @@ const RteDropdownMenu = ({
                   {},
                   { left: c.left, top: c.top, right: c.right, bottom: c.bottom }
                 ),
-                children: typeof r == "function" ? r(g) : r
+                children: typeof r == "function" ? r(m) : r
               }
             )
           }
@@ -3525,7 +3662,7 @@ const RteDropdownMenu = ({
     ] });
   }
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DropdownMenu, { open: p, onOpenChange: u, children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "relative outline-none", children: n }),
+    /* @__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(() => u(!1)) : r) })
   ] }) });
 };
@@ -3598,13 +3735,13 @@ const getActiveClasses$1 = (o, n, r) => {
   onRemoveHighlightColor: i,
   onClose: c
 }) => {
-  const [d] = useDarkMode(), [p] = useAtom$1(lsThemeAtom), u = (p == null ? void 0 : p.colors) || {}, m = Object.values(u).map((f) => get(f, d ? "1" : "0")), [g, h] = useState("TEXT");
+  const [d] = useDarkMode(), [p] = useAtom$1(lsThemeAtom), u = (p == null ? void 0 : p.colors) || {}, g = Object.values(u).map((x) => get(x, 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(
         "div",
         {
-          className: `w-full cursor-pointer rounded p-0.5 text-center ${g === "TEXT" ? "bg-blue-500 text-white" : "hover:bg-blue-100 hover:text-blue-500"}`,
+          className: `w-full cursor-pointer rounded p-0.5 text-center ${m === "TEXT" ? "bg-blue-500 text-white" : "hover:bg-blue-100 hover:text-blue-500"}`,
           onClick: () => h("TEXT"),
           children: "Text Color"
         }
@@ -3612,16 +3749,16 @@ const getActiveClasses$1 = (o, n, r) => {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `w-full cursor-pointer rounded p-0.5 text-center ${g === "HIGHLIGHT" ? "bg-blue-500 text-white" : "hover:bg-blue-100 hover:text-blue-500"}`,
+          className: `w-full cursor-pointer rounded p-0.5 text-center ${m === "HIGHLIGHT" ? "bg-blue-500 text-white" : "hover:bg-blue-100 hover:text-blue-500"}`,
           onClick: () => h("HIGHLIGHT"),
           children: "Highlight Color"
         }
       )
     ] }),
-    g === "TEXT" ? /* @__PURE__ */ jsx(
+    m === "TEXT" ? /* @__PURE__ */ jsx(
       Commons,
       {
-        themeColors: m,
+        themeColors: g,
         onClose: c,
         onChange: r,
         color: o,
@@ -3630,7 +3767,7 @@ const getActiveClasses$1 = (o, n, r) => {
     ) : /* @__PURE__ */ jsx(
       Commons,
       {
-        themeColors: m,
+        themeColors: g,
         onClose: c,
         onChange: a,
         color: n,
@@ -3639,11 +3776,11 @@ const getActiveClasses$1 = (o, n, r) => {
     )
   ] });
 }, RteColorPicker = ({ editor: o, from: n, menuRef: r }) => {
-  var v, B;
-  const a = (v = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : v.color, l = (B = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : B.color, [i, c] = useState(a || "#000000F2"), [d, p] = useState(l || "#00000057"), [u, m] = useDebouncedState(i, 150), [g, h] = useDebouncedState(d, 150), f = (_, j) => {
-    j ? (c(_), m(_)) : (o == null || o.chain().setColor(_).run(), c(_));
-  }, x = (_, j) => {
-    j ? (p(_), h(_)) : (o == null || o.chain().setHighlight({ color: _ }).run(), p(_));
+  var v, j;
+  const a = (v = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : v.color, l = (j = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : j.color, [i, c] = useState(a || "#000000F2"), [d, p] = useState(l || "#00000057"), [u, g] = useDebouncedState(i, 150), [m, h] = useDebouncedState(d, 150), x = (_, B) => {
+    B ? (c(_), g(_)) : (o == null || o.chain().setColor(_).run(), c(_));
+  }, f = (_, B) => {
+    B ? (p(_), h(_)) : (o == null || o.chain().setHighlight({ color: _ }).run(), p(_));
   }, b = () => {
     o == null || o.chain().unsetColor().run(), c("#000000F2");
   }, y = () => {
@@ -3652,8 +3789,8 @@ const getActiveClasses$1 = (o, n, r) => {
   return useEffect(() => {
     l && p(l);
   }, [l]), useEffect(() => {
-    g != null && g.includes("#") && (g == null ? void 0 : g.length) >= 3 && (o == null || o.chain().setHighlight({ color: g }).run());
-  }, [g]), useEffect(() => {
+    m != null && m.includes("#") && (m == null ? void 0 : m.length) >= 3 && (o == null || o.chain().setHighlight({ color: m }).run());
+  }, [m]), useEffect(() => {
     u != null && u.includes("#") && (u == null ? void 0 : u.length) >= 3 && (o == null || o.chain().setColor(u).run());
   }, [u]), /* @__PURE__ */ jsx(
     RteDropdownMenu,
@@ -3678,8 +3815,8 @@ const getActiveClasses$1 = (o, n, r) => {
         {
           textColor: i,
           highlightColor: d,
-          onChangeTextColor: f,
-          onChangeHighlightColor: x,
+          onChangeTextColor: x,
+          onChangeHighlightColor: f,
           onRemoveTextColor: b,
           onRemoveHighlightColor: y,
           onClose: _
@@ -3950,30 +4087,30 @@ const RichTextEditor = memo(
       blockId: "active-inline-editing-element",
       placeholder: "Enter text here",
       onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
-      onBlur: ({ editor: u, event: m }) => {
-        const g = m == null ? void 0 : m.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(g), y = f == null ? void 0 : f.contains(g), S = x == null ? void 0 : x.contains(g), v = window.document.getElementById("rte-widget-color-picker");
-        if (!b && !y && !S && !v) {
-          const B = (u == null ? void 0 : u.getHTML()) || "";
-          r(B);
+      onBlur: ({ editor: u, event: g }) => {
+        const m = g == null ? void 0 : g.relatedTarget, h = i.querySelector(".ProseMirror"), x = i.querySelector(".tippy-box"), f = i.querySelector("#chai-rich-text-menu-bar"), b = h == null ? void 0 : h.contains(m), y = x == null ? void 0 : x.contains(m), C = f == null ? void 0 : f.contains(m), v = window.document.getElementById("rte-widget-color-picker");
+        if (!b && !y && !C && !v) {
+          const j = (u == null ? void 0 : u.getHTML()) || "";
+          r(j);
         }
       },
       from: "canvas"
     });
     useEffect(() => {
-      var m, g;
+      var g, m;
       const u = getInitialTextAlign(n);
-      u && ((m = c == null ? void 0 : c.commands) == null || m.setTextAlign(u)), (g = c == null ? void 0 : c.commands) == null || g.focus(), c == null || c.emit("focus", {
+      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 d = useMemo(() => {
-      var g;
+      var m;
       const u = "max-w-none shadow-none outline outline-[2px] outline-green-500 [&_*]:shadow-none";
       if (!n) return u;
-      const m = ((g = n == null ? void 0 : n.className) == null ? void 0 : g.replace("sr-only", "")) || "";
-      return `${u} ${m}`;
+      const g = ((m = n == null ? void 0 : n.className) == null ? void 0 : m.replace("sr-only", "")) || "";
+      return `${u} ${g}`;
     }, [n]), p = (u) => {
       u.key === "Escape" && l(u);
     };
@@ -4004,74 +4141,74 @@ const RichTextEditor = memo(
     useEffect(() => {
       if (a.current) {
         a.current.innerHTML = n, a.current.focus();
-        const h = c.createRange(), f = d.getSelection();
-        h.selectNodeContents(a.current), h.collapse(!1), f == null || f.removeAllRanges(), f == null || f.addRange(h), a.current.focus();
+        const h = c.createRange(), x = d.getSelection();
+        h.selectNodeContents(a.current), h.collapse(!1), x == null || x.removeAllRanges(), x == null || x.addRange(h), a.current.focus();
       } else
         r();
     }, [c, d]);
     const p = useMemo(() => {
-      var f;
-      const h = ((f = o == null ? void 0 : o.tagName) == null ? void 0 : f.toLowerCase()) || "div";
+      var x;
+      const h = ((x = o == null ? void 0 : o.tagName) == null ? void 0 : x.toLowerCase()) || "div";
       return h === "button" ? "div" : h;
     }, [o]), u = useCallback(
       (h) => {
         (h.key === "Enter" || h.key === "Escape") && i(h);
       },
       [i]
-    ), m = useCallback(() => {
+    ), g = useCallback(() => {
       r();
-    }, [r]), g = useMemo(() => {
+    }, [r]), m = useMemo(() => {
       var h;
       return {
         id: "active-inline-editing-element",
         contentEditable: !0,
         className: `${((h = o == null ? void 0 : o.className) == null ? void 0 : h.replace("sr-only", "")) || ""} outline outline-[2px] outline-green-500 shadow-none empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 empty:before:absolute empty:before:pointer-events-none empty:before:select-none empty:before:inset-0 empty:before:z-0 relative min-h-[1em]`,
         style: cloneDeep(o == null ? void 0 : o.style) || {},
-        onInput: (f) => {
-          const x = f.target;
-          x && (x.innerText.trim() === "" ? (x.setAttribute("data-placeholder", "Enter text here"), x.children.length > 0 && x.children[0].remove()) : f.target.removeAttribute("data-placeholder"), l(f.target.innerText));
+        onInput: (x) => {
+          const f = x.target;
+          f && (f.innerText.trim() === "" ? (f.setAttribute("data-placeholder", "Enter text here"), f.children.length > 0 && f.children[0].remove()) : x.target.removeAttribute("data-placeholder"), l(x.target.innerText));
         },
-        onClick: (f) => {
-          f.stopPropagation(), f.preventDefault();
+        onClick: (x) => {
+          x.stopPropagation(), x.preventDefault();
         }
       };
     }, [o == null ? void 0 : o.className, o == null ? void 0 : o.style]);
     return /* @__PURE__ */ jsx(Fragment, { children: createElement(p, {
       ref: a,
-      onBlur: m,
+      onBlur: g,
       onKeyDown: u,
-      ...g
+      ...m
     }) });
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), m = useRef(null), { clearHighlight: g } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = l, { blockContent: S, blockType: v } = useMemo(() => {
+    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: x } = useLanguages(), [, f] = useSelectedBlockIds(), b = useRef(null), y = l, { blockContent: C, blockType: v } = useMemo(() => {
       var E;
       const k = o._type;
       let I = o[r];
       const A = getRegisteredChaiBlock(o._type);
-      return f && ((E = A == null ? void 0 : A.i18nProps) == null ? void 0 : E.includes(r)) && has(o, `${r}-${f}`) && (I = get(o, `${r}-${f}`)), { blockContent: I, blockType: k };
-    }, [o, f]), B = useCallback(
+      return x && ((E = A == null ? void 0 : A.i18nProps) == null ? void 0 : E.includes(r)) && has(o, `${r}-${x}`) && (I = get(o, `${r}-${x}`)), { blockContent: I, blockType: k };
+    }, [o, x]), j = useCallback(
       (k) => {
         var A;
-        const I = k || ((A = m.current) == null ? void 0 : A.innerText);
-        h([y], { [r]: I }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
+        const I = k || ((A = g.current) == null ? void 0 : A.innerText);
+        h([y], { [r]: I }), u(null), c(null), d(-1), f([]), y && setTimeout(() => f([y]), 100);
       },
-      [y, h, c, x, f]
+      [y, h, c, f, x]
     ), _ = useDebouncedCallback(
       (k) => {
         h([y], { [r]: k });
       },
-      [y, o, h, f],
+      [y, o, h, x],
       1e3
-    ), j = useCallback(
+    ), B = useCallback(
       (k) => {
-        k.preventDefault(), y && (b.current = y), B(), setTimeout(() => {
+        k.preventDefault(), y && (b.current = y), j(), setTimeout(() => {
           const I = b.current;
-          b.current = null, x([I]);
+          b.current = null, f([I]);
         }, 100);
       },
-      [x, y, f]
+      [f, y, x]
     );
     useEffect(() => {
       var w;
@@ -4079,28 +4216,28 @@ const RichTextEditor = memo(
       const k = `[data-block-id="${y}"]`, I = i >= 0 ? `[data-block-index="${i}"]` : "", A = a.querySelector(`${k}${I}`);
       A && ((w = A == null ? void 0 : A.classList) == null || w.add("sr-only"), u(A));
     }, [y, v, a, i]);
-    const C = useMemo(() => p ? (g(), ["RichText", "Paragraph"].includes(v) ? /* @__PURE__ */ jsx(
+    const S = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(v) ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
-        blockContent: S,
+        blockContent: C,
         editingElement: p,
         onChange: _,
-        onClose: B,
-        onEscape: j
+        onClose: j,
+        onEscape: B
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
       {
-        editorRef: m,
-        blockContent: S,
+        editorRef: g,
+        blockContent: C,
         editingElement: p,
-        onClose: B,
+        onClose: j,
         onChange: _,
-        onEscape: j
+        onEscape: B
       }
-    )) : null, [p, y, v, S, B, f]);
+    )) : null, [p, y, v, C, j, x]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      C,
+      S,
       n
     ] });
   },
@@ -4133,23 +4270,23 @@ 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: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), m = usePageExternalData(), [g] = useAtom$1(dataBindingActiveAtom), h = get(c, "component", null), { index: f, key: x } = useContext(RepeaterContext), b = useMemo(
-    () => g ? applyBindingToBlockProps(applyLanguage(i, d, c), m, {
-      index: f,
-      key: x
+  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: x, key: f } = useContext(RepeaterContext), b = useMemo(
+    () => m ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
+      index: x,
+      key: f
     }) : applyLanguage(i, d, c),
-    [i, d, c, m, g, f, x]
-  ), y = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), S = useMemo(
+    [i, d, c, g, m, x, f]
+  ), y = 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 },
+      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
       inBuilder: !0,
       lang: d || p,
       ...b,
       ...y,
-      ...S,
+      ...C,
       ...o
     }),
     [
@@ -4159,12 +4296,12 @@ const RichTextEditor = memo(
       p,
       b,
       y,
-      S,
+      C,
       o
     ]
-  ), B = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), _ = useMemo(() => get(i, "_show", !0), [i]);
+  ), j = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), _ = useMemo(() => get(i, "_show", !0), [i]);
   if (isNull(h) || !_) return null;
-  let j = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
+  let B = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
     ...v,
     children: r({
       _id: i._id,
@@ -4177,8 +4314,8 @@ const RichTextEditor = memo(
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const C = a === i._id && (l === f || f < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: j }) : j;
-  return B ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: C }) : C;
+  const S = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: B }) : B;
+  return j ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: S }) : S;
 }, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
     (d) => {
@@ -4221,7 +4358,7 @@ const RichTextEditor = memo(
   );
   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: m, _type: g, partialBlockId: h, repeaterItems: f, $repeaterItemsKey: x }) => g === "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: g }) }, `${m}-${y}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : c(m) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: g }) : null }) }, d._id) : null;
+    return p ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: d, children: (u) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: p, asyncProps: u, children: ({ _id: g, _type: m, partialBlockId: h, repeaterItems: x, $repeaterItemsKey: f }) => m === "Repeater" ? isArray(x) && x.map((b, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: f }, 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();
@@ -4234,18 +4371,18 @@ const RichTextEditor = memo(
     const { width: d, height: p } = o;
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
-      let m = {};
-      const g = p * u, h = d * u;
-      p && (m = {
+      let g = {};
+      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 - g) / g * 100 + "%",
+        height: 100 + (p - m) / m * 100 + "%",
         width: 100 + (d - h) / h * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
         transform: `scale(${u})`,
         transformOrigin: a === "rtl" ? "top right" : "top left",
-        ...m,
+        ...g,
         maxWidth: "none"
         // TODO: Add max-width to the wrapper
       }), r(u * 100);
@@ -4272,8 +4409,8 @@ const CanvasEventsWatcher = () => {
       if (d) {
         const p = d.getAttribute("data-style-prop");
         if (p) {
-          const u = d.getAttribute("data-style-id"), m = d.getAttribute("data-block-parent");
-          r([{ id: u, prop: p, blockId: m }]);
+          const u = d.getAttribute("data-style-id"), g = d.getAttribute("data-block-parent");
+          r([{ id: u, prop: p, blockId: g }]);
         }
       }
     }, 100);
@@ -4281,28 +4418,28 @@ const CanvasEventsWatcher = () => {
     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: m } = d;
-    p && (includes(i, p) || c == null || c.closeAll(), r([{ id: u, prop: m, blockId: p }]), o([p]));
+    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), [, d] = useAtom$1(canvasIframeAtom), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), m = 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 }));
+      i((x) => ({ ...x, width: h }));
     },
     [i]
   );
   useEffect(() => {
     if (!a.current) return;
-    const { clientWidth: h, clientHeight: f } = a.current;
-    i({ width: h, height: f });
+    const { clientWidth: h, clientHeight: x } = a.current;
+    i({ width: h, height: x });
   }, [a, o]);
-  const g = useMemo(() => {
+  const m = useMemo(() => {
     let h = IframeInitialContent;
     return h = h.replace("__HTML_DIR__", u), h;
   }, [u]);
-  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: m, onResize: m, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: g, onResize: g, children: /* @__PURE__ */ jsx(
     "div",
     {
       onMouseLeave: () => setTimeout(() => n(""), 300),
@@ -4316,7 +4453,7 @@ const CanvasEventsWatcher = () => {
           id: "canvas-iframe",
           style: { ...c, ...isEmpty(c) ? { width: `${o}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: g,
+          initialContent: m,
           children: [
             /* @__PURE__ */ jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsx(BlockSelectionHighlighter, {}),
@@ -4324,10 +4461,7 @@ const CanvasEventsWatcher = () => {
             /* @__PURE__ */ jsxs(Provider$1, { children: [
               /* @__PURE__ */ jsxs(Canvas, { children: [
                 p ? /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsx(StaticBlocksRenderer, {}),
-                /* @__PURE__ */ jsx(AddBlockAtBottom, {}),
-                /* @__PURE__ */ jsx("br", {}),
-                /* @__PURE__ */ jsx("br", {}),
-                /* @__PURE__ */ jsx("br", {})
+                /* @__PURE__ */ jsx(AddBlockAtBottom, {})
               ] }),
               /* @__PURE__ */ jsx(CanvasEventsWatcher, {})
             ] }),
@@ -4349,7 +4483,7 @@ const CanvasEventsWatcher = () => {
     /* @__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-DlWYye4v.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-DHjchara.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, {}) }) }),
@@ -4418,15 +4552,15 @@ const CanvasEventsWatcher = () => {
     ] })
   ] });
 }, DefaultMediaManager = ({ close: o, onSelect: n, mode: r = "image" }) => {
-  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, m] = useState(null), g = async (f) => {
-    if (!f.trim()) {
-      p(!1), m("Please enter a URL");
+  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), m = async (x) => {
+    if (!x.trim()) {
+      p(!1), g("Please enter a URL");
       return;
     }
     try {
-      c(!0), m(null), p(!0), m(null);
+      c(!0), g(null), p(!0), g(null);
     } catch {
-      p(!1), m("Error validating URL");
+      p(!1), g("Error validating URL");
     } finally {
       c(!1);
     }
@@ -4443,8 +4577,8 @@ const CanvasEventsWatcher = () => {
         {
           placeholder: h(`Enter ${r} URL`),
           value: a,
-          onChange: (f) => l(f.target.value),
-          onKeyUp: () => g(a)
+          onChange: (x) => l(x.target.value),
+          onKeyUp: () => m(a)
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -4488,42 +4622,42 @@ 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(), d = useUpdateBlocksProps(), p = usePageExternalData(), u = r.split(".").pop() || "", m = i ? `_${u}Id-${i}` : `_${u}Id`, g = isEmpty(i) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), h = get(c, m, g ? 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 : ""), x = useMemo(() => {
     if (!o || !c || !/\{\{.*?\}\}/.test(o)) return o;
-    const B = { ...c, [u]: o }, _ = applyBindingToBlockProps(B, p, { index: -1, key: "" });
+    const j = { ...c, [u]: o }, _ = applyBindingToBlockProps(j, p, { index: -1, key: "" });
     return get(_, u, o);
-  }, [o, c, p, u]), x = !!h || f !== PLACEHOLDER_IMAGE, b = (v) => {
-    const B = isArray(v) ? first(v) : v;
-    if (B) {
-      n(B == null ? void 0 : B.url);
-      const _ = B == null ? void 0 : B.width, j = B == null ? void 0 : B.height, C = m.includes("mobile");
+  }, [o, c, p, u]), f = !!h || x !== PLACEHOLDER_IMAGE, b = (v) => {
+    const j = isArray(v) ? first(v) : v;
+    if (j) {
+      n(j == null ? void 0 : j.url);
+      const _ = j == null ? void 0 : j.width, B = j == null ? void 0 : j.height, S = g.includes("mobile");
       if (c != null && c._id) {
         const k = {
-          ..._ && { [C ? "mobileWidth" : "width"]: _ },
-          ...j && { [C ? "mobileHeight" : "height"]: j },
-          ...B.description && { alt: B.description }
+          ..._ && { [S ? "mobileWidth" : "width"]: _ },
+          ...B && { [S ? "mobileHeight" : "height"]: B },
+          ...j.description && { alt: j.description }
         };
-        if (set(k, m, B.id), isEmpty(k)) return;
+        if (set(k, g, j.id), isEmpty(k)) return;
         d([c._id], k);
       }
     }
   }, y = useCallback(() => {
     if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
-      const v = {}, B = m.includes("mobile");
-      set(v, m, ""), set(v, B ? "mobileWidth" : "width", ""), set(v, B ? "mobileHeight" : "height", ""), d([c._id], v);
+      const v = {}, j = g.includes("mobile");
+      set(v, g, ""), set(v, j ? "mobileWidth" : "width", ""), set(v, j ? "mobileHeight" : "height", ""), d([c._id], v);
     }
-  }, [n, c == null ? void 0 : c._id, d, m]), S = getFileName(f);
+  }, [n, c == null ? void 0 : c._id, d, g]), C = getFileName(x);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-start gap-x-3", children: [
-    f ? /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+    x ? /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
       /* @__PURE__ */ jsx(
         "img",
         {
-          src: f,
+          src: x,
           className: "h-14 w-14 overflow-hidden rounded-md border border-border object-cover transition duration-200 " + (h && h !== "" ? "cursor-pointer group-hover:blur-sm" : ""),
           alt: ""
         }
       ),
-      x && /* @__PURE__ */ jsx(
+      f && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -4543,8 +4677,8 @@ 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: 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("p", { className: "max-w-[250px] truncate pr-2 text-xs text-gray-400", children: C }),
+        /* @__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(x) && x !== PLACEHOLDER_IMAGE ? l("Replace image") : l("Choose image") }) }),
         /* @__PURE__ */ jsx("div", { className: "text-center text-xs text-gray-400", children: "OR" })
       ] }),
       /* @__PURE__ */ jsx(
@@ -4565,18 +4699,18 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     ] })
   ] });
 }, PathDropdown = ({ data: o, onSelect: n, dataType: r }) => {
-  const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (g) => Array.isArray(g) ? "array" : typeof g == "object" && g !== null ? "object" : "value", p = React__default.useCallback(
-    (g) => {
-      const h = (f) => r === "value" ? f === "value" || f === "object" : r === "array" ? f === "array" : f === r;
-      g.type === "object" ? (l((f) => [...f, g.key]), c(g.value)) : h(g.type) && n([...a, g.key].join("."), r);
+  const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", p = React__default.useCallback(
+    (m) => {
+      const h = (x) => r === "value" ? x === "value" || x === "object" : r === "array" ? x === "array" : x === r;
+      m.type === "object" ? (l((x) => [...x, m.key]), c(m.value)) : h(m.type) && n([...a, m.key].join("."), r);
     },
     [a, n, r]
   ), u = React__default.useCallback(() => {
     if (a.length > 0) {
-      const g = a.slice(0, -1);
-      l(g), c(g.reduce((h, f) => h[f], o));
+      const m = a.slice(0, -1);
+      l(m), c(m.reduce((h, x) => h[x], o));
     }
-  }, [a, o]), m = React__default.useMemo(() => i ? Object.entries(i).map(([g, h]) => ({ key: g, value: h, type: d(h) })).filter((g) => !startsWith(g.key, REPEATER_PREFIX) && g.key.includes("/") ? !1 : r === "value" ? g.type === "value" || g.type === "object" : r === "array" ? g.type === "array" || g.type === "object" : r === "object" ? g.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: [
@@ -4586,36 +4720,36 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "mr-2 h-4 w-4" }),
           t("Back")
         ] }),
-        m.map((g) => /* @__PURE__ */ jsxs(
+        g.map((m) => /* @__PURE__ */ jsxs(
           CommandItem,
           {
-            value: g.key,
+            value: m.key,
             disabled: !1,
-            onSelect: () => p(g),
+            onSelect: () => p(m),
             className: "flex items-center justify-between",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
-                startsWith(g.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(g.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(IdCardIcon, {}) : null,
-                startsWith(g.key, REPEATER_PREFIX) ? t("Repeater Data") : startsWith(g.key, COLLECTION_PREFIX) ? g.key.replace(COLLECTION_PREFIX, "") : g.key
+                startsWith(m.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(m.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(IdCardIcon, {}) : null,
+                startsWith(m.key, REPEATER_PREFIX) ? t("Repeater Data") : startsWith(m.key, COLLECTION_PREFIX) ? m.key.replace(COLLECTION_PREFIX, "") : m.key
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                r === "object" && g.type === "object" && /* @__PURE__ */ jsx(
+                r === "object" && m.type === "object" && /* @__PURE__ */ jsx(
                   Button,
                   {
                     size: "sm",
                     variant: "ghost",
                     className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
                     onClick: (h) => {
-                      h.stopPropagation(), n([...a, g.key].join("."), r);
+                      h.stopPropagation(), n([...a, m.key].join("."), r);
                     },
                     children: t("Select")
                   }
                 ),
-                g.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 opacity-50" }) })
+                m.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 opacity-50" }) })
               ] })
             ]
           },
-          g.key
+          m.key
         ))
       ] })
     ] })
@@ -4667,51 +4801,51 @@ const DataBindingSelector = ({
 }) => {
   const l = usePageExternalData(), i = useSelectedBlockHierarchy(), c = useSelectedBlock(), d = useMemo(() => {
     if (i.length === 1) return "";
-    const m = i.find((f) => f._type === "Repeater"), h = get(m, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
-    return `${REPEATER_PREFIX}${startsWith(h, COLLECTION_PREFIX) ? `${h}/${m._id}` : h}`;
+    const g = i.find((x) => x._type === "Repeater"), h = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
+    return `${REPEATER_PREFIX}${startsWith(h, COLLECTION_PREFIX) ? `${h}/${g._id}` : h}`;
   }, [i]), p = useMemo(() => first(get(l, d.replace(REPEATER_PREFIX, ""), [])), [d, l]), u = useCallback(
-    (m, g) => {
-      if (m = isEmpty(d) ? m : m.replace(`${d}`, "$index"), g === "array" || g === "object") {
-        n(`{{${m}}}`, {}, r);
+    (g, m) => {
+      if (g = isEmpty(d) ? g : g.replace(`${d}`, "$index"), m === "array" || m === "object") {
+        n(`{{${g}}}`, {}, r);
         return;
       }
-      const h = (y) => /[.,!?;:]/.test(y), f = (y, S, v) => {
-        let B = "", _ = "";
-        const j = S > 0 ? y[S - 1] : "", C = S < y.length ? y[S] : "";
-        return S > 0 && (j === "." || !h(j) && j !== " ") && (B = " "), S < y.length && !h(C) && C !== " " && (_ = " "), {
-          text: B + v + _,
-          prefixLength: B.length,
+      const h = (y) => /[.,!?;:]/.test(y), x = (y, C, v) => {
+        let j = "", _ = "";
+        const B = C > 0 ? y[C - 1] : "", S = C < y.length ? y[C] : "";
+        return C > 0 && (B === "." || !h(B) && B !== " ") && (j = " "), C < y.length && !h(S) && S !== " " && (_ = " "), {
+          text: j + v + _,
+          prefixLength: j.length,
           suffixLength: _.length
         };
-      }, x = document.getElementById(r);
-      if (!x) return;
+      }, f = document.getElementById(r);
+      if (!f) return;
       const b = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
       if (b && (b.querySelector(".ProseMirror") || b.__chaiRTE)) {
         const y = b.__chaiRTE;
         if (y) {
-          const S = `{{${m}}}`;
+          const C = `{{${g}}}`;
           y.commands.focus();
-          const { from: v, to: B } = y.state.selection;
-          if (v !== B)
-            y.chain().deleteSelection().insertContent(S).run();
+          const { from: v, to: j } = y.state.selection;
+          if (v !== j)
+            y.chain().deleteSelection().insertContent(C).run();
           else {
-            const { state: j } = y, C = j.selection.from, k = j.doc.textBetween(Math.max(0, C - 1), C), I = j.doc.textBetween(C, Math.min(C + 1, j.doc.content.size));
+            const { state: B } = y, S = B.selection.from, k = B.doc.textBetween(Math.max(0, S - 1), S), I = B.doc.textBetween(S, Math.min(S + 1, B.doc.content.size));
             let A = "";
-            C > 0 && k !== " " && !h(k) && (A = " ");
+            S > 0 && k !== " " && !h(k) && (A = " ");
             let w = "";
-            I && I !== " " && !h(I) && (w = " "), y.chain().insertContent(A + S + w).run();
+            I && I !== " " && !h(I) && (w = " "), y.chain().insertContent(A + C + w).run();
           }
           setTimeout(() => n(y.getHTML(), {}, r), 100);
           return;
         }
       } else {
-        const y = x, S = y.selectionStart || 0, v = y.value || "", B = y.selectionEnd || S;
-        if (B > S) {
-          const I = `{{${m}}}`, { text: A } = f(v, S, I), w = v.slice(0, S) + A + v.slice(B);
+        const y = f, C = y.selectionStart || 0, v = y.value || "", j = y.selectionEnd || C;
+        if (j > C) {
+          const I = `{{${g}}}`, { text: A } = x(v, C, I), w = v.slice(0, C) + A + v.slice(j);
           n(w, {}, r);
           return;
         }
-        const j = `{{${m}}}`, { text: C } = f(v, S, j), k = v.slice(0, S) + C + v.slice(S);
+        const B = `{{${g}}}`, { text: S } = x(v, C, B), k = v.slice(0, C) + S + v.slice(C);
         n(k, {}, r);
       }
     },
@@ -4734,22 +4868,22 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var I;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (A, w) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, m] = useState("page"), [g, h] = useState(""), [f, x] = useState([]), [b, y] = useState(-1), S = useRef(null), v = (I = n == null ? void 0 : n.find((A) => A.key === u)) == null ? void 0 : I.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (A, w) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [b, y] = useState(-1), C = useRef(null), v = (I = n == null ? void 0 : n.find((A) => A.key === u)) == null ? void 0 : I.name;
   useEffect(() => {
-    if (h(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (h(""), f([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const A = split(o, ":"), w = get(A, 1, "page") || "page";
-    m(w), (async () => {
+    g(w), (async () => {
       const E = await l(w, [get(A, 2, "page")]);
       E && Array.isArray(E) && h(get(E, [0, "name"], ""));
     })();
   }, [o]);
-  const B = useDebouncedCallback(
+  const j = useDebouncedCallback(
     async (A) => {
       if (isEmpty(A))
-        x([]);
+        f([]);
       else {
         const w = await l(u, A);
-        x(w);
+        f(w);
       }
       c(!1), y(-1);
     },
@@ -4757,60 +4891,60 @@ const DataBindingSelector = ({
     300
   ), _ = (A) => {
     const w = ["pageType", u, A.id];
-    w[1] && (r(w.join(":")), h(A.name), p(!1), x([]), y(-1));
-  }, j = (A) => {
+    w[1] && (r(w.join(":")), h(A.name), p(!1), f([]), y(-1));
+  }, B = (A) => {
     switch (A.key) {
       case "ArrowDown":
-        A.preventDefault(), y((w) => w < f.length - 1 ? w + 1 : w);
+        A.preventDefault(), y((w) => w < x.length - 1 ? w + 1 : w);
         break;
       case "ArrowUp":
         A.preventDefault(), y((w) => w > 0 ? w - 1 : w);
         break;
       case "Enter":
-        if (A.preventDefault(), f.length === 0) return;
-        b >= 0 && _(f[b]);
+        if (A.preventDefault(), x.length === 0) return;
+        b >= 0 && _(x[b]);
         break;
       case "Escape":
-        A.preventDefault(), C();
+        A.preventDefault(), S();
         break;
     }
   };
   useEffect(() => {
-    if (b >= 0 && S.current) {
-      const A = S.current.children[b];
+    if (b >= 0 && C.current) {
+      const A = C.current.children[b];
       A == null || A.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const C = () => {
-    h(""), x([]), y(-1), p(!1), r("");
+  const S = () => {
+    h(""), f([]), y(-1), p(!1), r("");
   }, k = (A) => {
-    h(A), p(!isEmpty(A)), c(!0), B(A);
+    h(A), p(!isEmpty(A)), c(!0), j(A);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (A) => m(A.target.value), children: map(n, (A) => /* @__PURE__ */ jsx("option", { value: A.key, children: A.name }, A.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (A) => g(A.target.value), children: map(n, (A) => /* @__PURE__ */ jsx("option", { value: A.key, children: A.name }, A.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
-          value: g,
+          value: m,
           onChange: (A) => k(A.target.value),
-          onKeyDown: j,
+          onKeyDown: B,
           placeholder: a(`Search ${v ?? ""}`),
           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: g && /* @__PURE__ */ jsx("button", { onClick: C, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(x) || d && isEmpty(x)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(x) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      g,
+      m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: S, children: map(f == null ? void 0 : f.slice(0, 20), (A, w) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(x == null ? void 0 : x.slice(0, 20), (A, w) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => _(A),
@@ -4829,22 +4963,22 @@ const DataBindingSelector = ({
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
-  const { t: l } = useTranslation(), { type: i = "pageType", href: c = "", target: d = "self" } = n ?? {}, p = useBuilderProp("pageTypes", []), { selectedLang: u, fallbackLang: m, languages: g } = useLanguages(), h = useMemo(
-    () => isEmpty(g) ? "" : isEmpty(u) ? m : u,
-    [g, u, m]
-  ), f = useMemo(() => get(LANGUAGES, h, h), [h]), x = i === "pageType" && isEmpty(p) ? "url" : i;
+  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]
+  ), x = useMemo(() => get(LANGUAGES, h, h), [h]), f = 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: [
       /* @__PURE__ */ jsxs("span", { children: [
         (o == null ? void 0 : o.title) ?? "Link",
-        /* @__PURE__ */ jsx("span", { className: "pl-1 text-[9px] text-zinc-400", children: f })
+        /* @__PURE__ */ jsx("span", { className: "pl-1 text-[9px] text-zinc-400", children: x })
       ] }),
       /* @__PURE__ */ jsx(
         DataBindingSelector,
         {
           schema: o,
           onChange: (b) => {
-            r({ ...n, href: b, ...x === "pageType" ? { type: "url" } : {} });
+            r({ ...n, href: b, ...f === "pageType" ? { type: "url" } : {} });
           },
           id: `root.${a}.href`,
           formData: n
@@ -4862,7 +4996,7 @@ const DataBindingSelector = ({
         ],
         (b) => /* @__PURE__ */ jsx("option", { value: b.const, children: b.title }, b.const)
       ) }),
-      x === "pageType" && !isEmpty(p) ? /* @__PURE__ */ jsx(
+      f === "pageType" && !isEmpty(p) ? /* @__PURE__ */ jsx(
         PageTypeField,
         {
           href: c,
@@ -4879,13 +5013,13 @@ const DataBindingSelector = ({
           spellCheck: "false",
           name: "href",
           type: "text",
-          className: x === "pageType" ? "!hidden" : "",
+          className: f === "pageType" ? "!hidden" : "",
           value: c,
           onChange: (b) => r({ ...n, href: b.target.value }),
           placeholder: l(i === "url" ? "Enter URL" : i === "scroll" ? "#ElementID" : "Enter details")
         }
       ),
-      x === "url" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
+      f === "url" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -4919,26 +5053,26 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-CqBZ4WKt.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: l, onBlur: i }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DxyV3u6C.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,
     onBlur: ({ editor: h }) => {
-      const f = h == null ? void 0 : h.getHTML();
-      i(n, f);
+      const x = h == null ? void 0 : h.getHTML();
+      i(n, x);
     },
     onUpdate: ({ editor: h }) => {
-      const f = h == null ? void 0 : h.getHTML();
-      l(f);
+      const x = h == null ? void 0 : h.getHTML();
+      l(x);
     }
   });
   useEffect(() => {
     c.current && u && (c.current.__chaiRTE = u);
   }, [o, u]);
-  const m = () => {
+  const g = () => {
     p(!1);
-  }, g = /* @__PURE__ */ jsxs("div", { id: `chai-rte-${n}`, ref: c, className: "mt-1 rounded-md border border-input", children: [
+  }, m = /* @__PURE__ */ jsxs("div", { id: `chai-rte-${n}`, ref: c, className: "mt-1 rounded-md border border-input", children: [
     /* @__PURE__ */ jsx(RteMenubar, { editor: u, onExpand: () => p(!0) }),
     /* @__PURE__ */ jsx(
       EditorContent,
@@ -4952,8 +5086,8 @@ const DataBindingSelector = ({
     )
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    d && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(RTEModal, { isOpen: d, onClose: m, editor: u, rteElement: g }) }),
-    d ? /* @__PURE__ */ jsx("div", { children: "Open in modal" }) : /* @__PURE__ */ jsx("div", { className: "relative", children: g })
+    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;
@@ -4965,49 +5099,49 @@ const DataBindingSelector = ({
   if (!a && !l) return null;
   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 u = filter(r, { _parent: p == null ? void 0 : p._id, _type: "Slide" }), m = (o == null ? void 0 : o.currentSlide) || get(u, "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(() => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
-  const g = () => {
-    const x = findIndex(u, { _id: m });
-    if (x > -1) {
-      const b = (x + 1) % u.length, y = get(u, [b, "_id"]);
+  const m = () => {
+    const f = findIndex(u, { _id: g });
+    if (f > -1) {
+      const b = (f + 1) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, h = () => {
-    const x = findIndex(u, { _id: m });
-    if (x > -1) {
-      const b = (x - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
+    const f = findIndex(u, { _id: g });
+    if (f > -1) {
+      const b = (f - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
-  }, f = () => {
-    const x = i(
+  }, x = () => {
+    const f = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), b = x == null ? void 0 : x._id;
+    ), b = f == null ? void 0 : f._id;
     b && (n({ ...o, currentSlide: b }), c([b]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
       /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-3 w-3" }) }),
-      /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: m ? /* @__PURE__ */ jsxs("span", { className: "", children: [
+      /* @__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(u, { _id: m }) + 1
+          findIndex(u, { _id: g }) + 1
         ] }),
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsx("button", { onClick: g, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) }),
+      /* @__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(
         "button",
         {
-          onClick: f,
+          onClick: x,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircledIcon, { className: "h-3 w-3" }),
@@ -5068,8 +5202,8 @@ const DataBindingSelector = ({
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (x) => {
-              let b = x.target.value;
+            onChange: (f) => {
+              let b = f.target.value;
               b.length && (b = b.replace("-", "")), n({ ...o, autoplayInterval: b });
             }
           }
@@ -5081,7 +5215,7 @@ const DataBindingSelector = ({
   const r = get(o, "srcsets", []) || [], a = (c, d) => {
     const p = c.target.name, u = c.target.value;
     n({
-      srcsets: map(r, (m, g) => g === d ? { ...m, [p]: u } : m)
+      srcsets: map(r, (g, m) => m === d ? { ...g, [p]: u } : g)
     });
   }, l = () => {
     n({ srcsets: [...r, {}] });
@@ -5160,37 +5294,37 @@ const DataBindingSelector = ({
   ] });
 }, 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, ""), d = find(l, { id: c }), u = get(d, o === "root.filter" ? "filters" : "sorts", []);
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("select", { value: n, onChange: (m) => r(m.target.value), onBlur: (m) => a(o, m.target.value), children: [
+  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" }),
-    u.map((m) => /* @__PURE__ */ jsx("option", { value: m.id, children: m.name }, m.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: d, required: p, schema: u, formData: m, onChange: g } = 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]), S = usePageExternalData(), v = useSelectedBlock(), B = useRegisteredChaiBlocks(), _ = useMemo(
-    () => get(B, [v == null ? void 0 : v._type, "i18nProps"], []),
-    [B, v == null ? void 0 : v._type]
-  ), [j, C] = useState(null);
+  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: x, languages: f } = useLanguages(), b = useMemo(
+    () => isEmpty(f) ? "" : isEmpty(h) ? x : h,
+    [f, h, x]
+  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), C = usePageExternalData(), v = useSelectedBlock(), j = useRegisteredChaiBlocks(), _ = useMemo(
+    () => get(j, [v == null ? void 0 : v._type, "i18nProps"], []),
+    [j, v == null ? void 0 : v._type]
+  ), [B, S] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: l });
   const I = _ == null ? void 0 : _.includes(n.replace("root.", ""));
   if (u.type === "array") {
-    const E = j === n;
+    const E = B === n;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
       u.title && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1", children: /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: n,
-          onClick: () => C(E ? null : n),
+          onClick: () => S(E ? null : n),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             E ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(ListBulletIcon, { className: "h-3 w-3" }),
             /* @__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: m == null ? void 0 : m.length }) }),
+            /* @__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 }) }),
             u.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                 InfoCircledIcon,
@@ -5205,14 +5339,14 @@ const DataBindingSelector = ({
           ]
         }
       ) }),
-      (m == null ? void 0 : m.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: l }) : /* @__PURE__ */ jsxs("div", { className: `${E ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: l }) : /* @__PURE__ */ jsxs("div", { className: `${E ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         l,
         i,
         c
       ] })
     ] });
   }
-  const A = n.replace("root.", ""), w = _.includes(A) && !isEmpty(h) && isEmpty(m);
+  const A = n.replace("root.", ""), w = _.includes(A) && !isEmpty(h) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
     u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -5230,7 +5364,7 @@ const DataBindingSelector = ({
           /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
         ] }) })
       ] }),
-      !u.enum && !u.oneOf && S && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
+      !u.enum && !u.oneOf && C && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
         w ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
@@ -5263,10 +5397,10 @@ const DataBindingSelector = ({
           {
             schema: u,
             onChange: (E) => {
-              g(E, m, n);
+              m(E, g, n);
             },
             id: n,
-            formData: m
+            formData: g
           }
         )
       ] })
@@ -5313,8 +5447,8 @@ 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"), d = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), u = useThrottledCallback(
-    async ({ formData: m }, g) => {
-      get(m, g) === void 0 && set(m, g, ""), l({ formData: m }, g);
+    async ({ formData: g }, m) => {
+      get(g, m) === void 0 && set(g, m, ""), l({ formData: g }, m);
     },
     [l, i],
     400
@@ -5355,10 +5489,10 @@ const DataBindingSelector = ({
       uiSchema: r,
       schema: n,
       formData: a,
-      onChange: ({ formData: m }, g) => {
-        if (!g || o !== (m == null ? void 0 : m._id)) return;
-        const h = take(g.split("."), 2).join(".").replace("root.", "");
-        u({ formData: m }, h);
+      onChange: ({ formData: g }, m) => {
+        if (!m || o !== (g == null ? void 0 : g._id)) return;
+        const h = take(m.split("."), 2).join(".").replace("root.", "");
+        u({ formData: g }, h);
       }
     },
     i
@@ -5370,52 +5504,52 @@ 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, d] = useState(i), [p, u] = useState(!1), m = useWrapperBlock(), g = getRegisteredChaiBlock(m == null ? void 0 : m._type), h = formDataWithSelectedLang(m, o, g), f = ({ formData: j }, C, k) => {
-    C && (c == null ? void 0 : c._id) === n._id && a([n._id], { [C]: get(j, C) }, k);
-  }, x = useCallback(
-    debounce(({ formData: j }, C, k) => {
-      f({ formData: j }, C, k), d(j);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), x = ({ formData: B }, S, k) => {
+    S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(B, S) }, k);
+  }, f = useCallback(
+    debounce(({ formData: B }, S, k) => {
+      x({ formData: B }, S, k), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: j }, C) => {
-    C && (r([n._id], { [C]: get(j, C) }), x({ formData: j }, C, { [C]: get(c, C) }));
-  }, y = ({ formData: j }, C) => {
-    C && (r([m._id], { [C]: get(j, C) }), x({ formData: j }, C, { [C]: get(c, C) }));
-  }, { schema: S, uiSchema: v } = useMemo(() => {
-    const j = n == null ? void 0 : n._type;
-    if (!j)
+  ), b = ({ formData: B }, S) => {
+    S && (r([n._id], { [S]: get(B, S) }), f({ formData: B }, S, { [S]: get(c, S) }));
+  }, y = ({ formData: B }, S) => {
+    S && (r([g._id], { [S]: get(B, S) }), f({ formData: B }, S, { [S]: get(c, S) }));
+  }, { schema: C, uiSchema: v } = useMemo(() => {
+    const B = n == null ? void 0 : n._type;
+    if (!B)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: C, uiSchema: k } = getBlockFormSchemas(j);
-      if (j === "Repeater") {
+      const { schema: S, uiSchema: k } = getBlockFormSchemas(B);
+      if (B === "Repeater") {
         const I = get(n, "repeaterItems", "");
         startsWith(I, `{{${COLLECTION_PREFIX}`) ? (set(k, "filter", { "ui:widget": "collectionSelect" }), set(k, "sort", { "ui:widget": "collectionSelect" })) : (set(k, "filter", { "ui:widget": "hidden" }), set(k, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: C, uiSchema: k };
+      return { schema: S, uiSchema: k };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [n]), { wrapperSchema: B, wrapperUiSchema: _ } = useMemo(() => {
-    if (!m || !(m != null && m._type))
+  }, [n]), { wrapperSchema: j, wrapperUiSchema: _ } = useMemo(() => {
+    if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const j = m == null ? void 0 : m._type, { schema: C = {}, uiSchema: k = {} } = getBlockFormSchemas(j);
-    return { wrapperSchema: C, wrapperUiSchema: k };
-  }, [m]);
+    const B = g == null ? void 0 : g._type, { schema: S = {}, uiSchema: k = {} } = getBlockFormSchemas(B);
+    return { wrapperSchema: S, wrapperUiSchema: k };
+  }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
-    !isEmpty(m) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
+    !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((j) => !j),
+          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" }),
-            startCase(m._type),
+            startCase(g._type),
             " settings",
             " ",
-            m._name && /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-light text-slate-400", children: [
+            g._name && /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-light text-slate-400", children: [
               "(",
-              m._name,
+              g._name,
               ")"
             ] })
           ]
@@ -5424,48 +5558,48 @@ function BlockSettings() {
       /* @__PURE__ */ jsx("div", { className: p ? "h-auto" : "invisible h-0", children: /* @__PURE__ */ jsx(
         JSONForm,
         {
-          blockId: m == null ? void 0 : m._id,
+          blockId: g == null ? void 0 : g._id,
           onChange: y,
           formData: h,
-          schema: B,
+          schema: j,
           uiSchema: _
         }
       ) })
     ] }),
-    isEmpty(S) ? null : /* @__PURE__ */ jsx(
+    isEmpty(C) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
         onChange: b,
         formData: i,
-        schema: S,
+        schema: C,
         uiSchema: v
       }
     )
   ] });
 }
 const BlockStylingProps = () => {
-  var f;
+  var x;
   const o = useSelectedBlock(), [n, r] = useSelectedStylingBlocks(), a = useRemoveClassesFromBlocks(), [l] = useSelectedBlockIds(), { t: i } = useTranslation();
   if (!o) return null;
   const c = Object.keys(o).filter(
-    (x) => typeof o[x] == "string" && o[x].startsWith("#styles:")
-  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (f = n[0]) == null ? void 0 : f.prop, ""), { classes: m = "" } = getSplitChaiClasses(u) || {}, g = m ? m.split(" ").filter((x) => !isEmpty(x)) : [], h = (x) => find(n, (b) => b.prop === x);
+    (f) => typeof o[f] == "string" && o[f].startsWith("#styles:")
+  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (x = n[0]) == null ? void 0 : x.prop, ""), { classes: g = "" } = getSplitChaiClasses(u) || {}, m = g ? g.split(" ").filter((f) => !isEmpty(f)) : [], h = (f) => find(n, (b) => b.prop === f);
   return /* @__PURE__ */ jsx(Fragment, { children: p && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
       i("Style element"),
       ":"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: map(c, (x) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: map(c, (f) => /* @__PURE__ */ jsxs(
       Badge,
       {
         className: "flex cursor-pointer items-center gap-1 pr-1",
-        variant: h(x) ? "default" : "secondary",
+        variant: h(f) ? "default" : "secondary",
         onClick: () => {
-          r([{ id: `${x}-${o._id}`, blockId: o._id, prop: x }]);
+          r([{ id: `${f}-${o._id}`, blockId: o._id, prop: f }]);
         },
         children: [
-          startCase(x),
+          startCase(f),
           /* @__PURE__ */ jsxs(DropdownMenu, { children: [
             /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
               "button",
@@ -5482,7 +5616,7 @@ const BlockStylingProps = () => {
                 {
                   className: "text-xs",
                   onClick: () => {
-                    d(x);
+                    d(f);
                   },
                   children: i("Reset style")
                 }
@@ -5492,7 +5626,7 @@ const BlockStylingProps = () => {
                 {
                   className: "text-xs",
                   onClick: () => {
-                    a(l, g, !0);
+                    a(l, m, !0);
                   },
                   children: i("Clear styles")
                 }
@@ -5501,7 +5635,7 @@ const BlockStylingProps = () => {
           ] })
         ]
       },
-      x
+      f
     )) }),
     /* @__PURE__ */ jsx("div", { className: "my-2 h-[1px] w-full bg-border" })
   ] }) });
@@ -5650,7 +5784,7 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: m } = o, [g, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [b, y] = useState(""), [S, v] = useState(!1), [B, _] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [b, y] = useState(""), [C, v] = useState(!1), [j, _] = useState(!1);
   useEffect(() => {
     const { value: A, unit: w } = getClassValueAndUnit(i);
     if (w === "") {
@@ -5659,43 +5793,43 @@ const BlockStylingProps = () => {
     }
     h(w), l(w === "class" || isEmpty(A) ? "" : A);
   }, [i, p, u]);
-  const j = useThrottledCallback((A) => c(A), [c], THROTTLE_TIME), C = useThrottledCallback((A) => c(A, !1), [c], THROTTLE_TIME), k = useCallback(
+  const B = useThrottledCallback((A) => c(A), [c], THROTTLE_TIME), S = useThrottledCallback((A) => c(A, !1), [c], THROTTLE_TIME), k = useCallback(
     (A = !1) => {
       const w = getUserInputValues(`${a}`, u);
       if (get(w, "error", !1)) {
-        x(!0);
+        f(!0);
         return;
       }
-      const E = get(w, "unit") !== "" ? get(w, "unit") : g;
+      const E = get(w, "unit") !== "" ? get(w, "unit") : m;
       if (E === "auto" || E === "none") {
-        j(`${d}${E}`);
+        B(`${d}${E}`);
         return;
       }
       if (get(w, "value") === "")
         return;
       const T = `${get(w, "value", "").startsWith("-") ? "-" : ""}${d}[${get(w, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
-      A ? C(T) : j(T);
+      A ? S(T) : B(T);
     },
-    [j, C, a, g, d, u]
+    [B, S, a, m, d, u]
   ), I = useCallback(
     (A) => {
       const w = getUserInputValues(`${a}`, u);
       if (get(w, "error", !1)) {
-        x(!0);
+        f(!0);
         return;
       }
       if (A === "auto" || A === "none") {
-        j(`${d}${A}`);
+        B(`${d}${A}`);
         return;
       }
       if (get(w, "value") === "")
         return;
       const E = get(w, "unit") !== "" ? get(w, "unit") : A, T = `${get(w, "value", "").startsWith("-") ? "-" : ""}${d}[${get(w, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
-      j(T);
+      B(T);
     },
-    [j, a, d, u]
+    [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: g === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  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(
       "input",
       {
@@ -5708,12 +5842,12 @@ 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 ${S ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${C ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(g) !== -1 ? null : /* @__PURE__ */ jsx(
+      ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
-          readOnly: g === "class",
+          readOnly: m === "class",
           onKeyPress: (A) => {
             A.key === "Enter" && k();
           },
@@ -5724,24 +5858,24 @@ const BlockStylingProps = () => {
             const w = parseInt$1(A.target.value);
             let E = isNaN$1(w) ? 0 : w;
             A.keyCode === 38 && (E += 1), A.keyCode === 40 && (E -= 1);
-            const L = `${E}`, P = `${L.startsWith("-") ? "-" : ""}${d}[${L.replace("-", "")}${g === "-" ? "" : g}]`;
-            C(P);
+            const L = `${E}`, P = `${L.startsWith("-") ? "-" : ""}${d}[${L.replace("-", "")}${m === "-" ? "" : m}]`;
+            S(P);
           },
           onKeyUp: (A) => {
-            B && (A.preventDefault(), _(!1));
+            j && (A.preventDefault(), _(!1));
           },
           onBlur: () => k(),
           onChange: (A) => {
-            x(!1), l(A.target.value);
+            f(!1), l(A.target.value);
           },
           onClick: (A) => {
             var w;
             (w = A == null ? void 0 : A.target) == null || w.select(), r(!1);
           },
-          value: S ? b : a,
+          value: C ? 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"
+            x ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -5753,7 +5887,7 @@ 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 ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: g }),
+              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
               u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -5762,7 +5896,7 @@ const BlockStylingProps = () => {
           UnitSelection,
           {
             units: u,
-            current: g,
+            current: m,
             onSelect: (A) => {
               r(!1), h(A), I(A);
             }
@@ -5770,26 +5904,26 @@ const BlockStylingProps = () => {
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(g) !== -1 || S ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || C ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => v(!0),
         onDragEnd: (A) => {
           if (y(() => ""), v(!1), isEmpty(A))
             return;
-          const w = `${A}`, L = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${g === "-" ? "" : g}]`;
-          j(L);
+          const w = `${A}`, L = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${m === "-" ? "" : m}]`;
+          B(L);
         },
         onDrag: (A) => {
           if (isEmpty(A))
             return;
           y(A);
-          const w = `${A}`, L = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${g === "-" ? "" : g}]`;
-          C(L);
+          const w = `${A}`, L = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${m === "-" ? "" : m}]`;
+          S(L);
         },
         currentValue: a,
-        unit: g,
-        negative: m,
+        unit: m,
+        negative: g,
         cssProperty: p
       }
     )
@@ -5848,7 +5982,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([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), m = get(u, "1", ""), g = get(u, "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" })));
@@ -5856,31 +5990,31 @@ const COLOR_PROP = {
     [c, p]
   );
   useEffect(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(m))
+    if (["current", "inherit", "transparent", "black", "white"].includes(g))
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [m]);
-  const f = useCallback(
+  }, [g]);
+  const x = useCallback(
     // eslint-disable-next-line no-shadow
     (b) => {
-      p({ color: m, shade: b });
+      p({ color: g, shade: b });
     },
-    [m]
+    [g]
   );
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [r]);
-  const { match: x } = useTailwindClassList();
+  const { match: f } = useTailwindClassList();
   return useEffect(() => {
     const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    x(o, y) && n(y, o);
-  }, [x, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    f(o, y) && n(y, o);
+  }, [f, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
       {
         disabled: !l,
         rounded: !0,
-        selected: m,
+        selected: g,
         onChange: h,
         options: [
           "current",
@@ -5914,7 +6048,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: g, disabled: !m || !l, onChange: f, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: x, options: i }) })
   ] });
 }, EDITOR_ICONS = {
   "not-italic": () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
@@ -6248,41 +6382,41 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, m] = useScreenSizeWidth(), g = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(g, "fullCls", ""), [g]), y = useCallback(
-    (C, k = !0) => {
-      const I = { dark: p, mq: m, mod: u, cls: C, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+    (S, k = !0) => {
+      const I = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (I.mq = "xs");
       const A = generateFullClsName(I);
-      h(x, [A], k);
+      h(f, [A], k);
     },
-    [x, p, m, u, l, h]
-  ), S = useCallback(() => {
-    f(x, [b], !0);
-  }, [x, b, f]), v = useMemo(() => canChangeClass(g, m), [g, m]);
+    [f, p, g, u, l, h]
+  ), C = useCallback(() => {
+    x(f, [b], !0);
+  }, [f, b, x]), v = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(v, g);
-  }, [v, i, g]);
-  const [, , B] = useScreenSizeWidth(), _ = useCallback(
-    (C) => {
-      B({
+    i(v, m);
+  }, [v, i, m]);
+  const [, , j] = useScreenSizeWidth(), _ = useCallback(
+    (S) => {
+      j({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[C]);
+      }[S]);
     },
-    [B]
-  ), j = get(g, "dark", null) === p && get(g, "mod", null) === u && get(g, "mq", null) === m;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: v, canReset: g && j, 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] ${g && !j ? "text-foreground" : ""}`, children: n(a) }) }),
+    [j]
+  ), B = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: v, 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: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
           AdvanceChoices,
           {
-            currentClass: get(g, "cls", ""),
+            currentClass: get(m, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: y,
@@ -6295,7 +6429,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: j ? /* @__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" }) }) : v && g ? /* @__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: () => 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" }) }) : v && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6307,19 +6441,19 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(g, "mq")),
-            p && !g.dark ? "(Light mode)" : ""
+            getBreakpoint(get(m, "mq")),
+            p && !m.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => _(get(g, "mq")),
+              onClick: () => _(get(m, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(g, "mq").toUpperCase()
+                get(m, "mq").toUpperCase()
               ]
             }
           )
@@ -6336,7 +6470,7 @@ const COLOR_PROP = {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), m = useSelectedBlockCurrentClasses(), g = useCallback((h) => map(m, "property").includes(h), [m]);
+  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",
     {
@@ -6344,23 +6478,23 @@ const COLOR_PROP = {
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: h, key: f }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: h, key: x }, f) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
-                onClick: () => u(f),
-                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                onClick: () => u(x),
+                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                 children: [
                   React__default.createElement("div", {
-                    className: g(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    className: m(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                   }),
-                  React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
+                  React__default.createElement(get(EDITOR_ICONS, x, BoxIcon), { className: "text-inherit w-3 h-3" })
                 ]
               }
             ) }),
             /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(h)) })
-          ] }) }, `option-${x}`)) })
+          ] }) }, `option-${f}`)) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsx(
           BlockStyle,
@@ -6484,7 +6618,7 @@ const COLOR_PROP = {
   icon: p,
   onClick: u
 }) => {
-  const { t: m } = useTranslation();
+  const { t: g } = useTranslation();
   return r ? /* @__PURE__ */ jsxs(HoverCard, { openDelay: n, children: [
     /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
       Button,
@@ -6497,8 +6631,8 @@ const COLOR_PROP = {
       }
     ) }),
     /* @__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: m(a) }),
-      o && /* @__PURE__ */ jsx("p", { className: "text-xs", children: m(l) })
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: g(a) }),
+      o && /* @__PURE__ */ jsx("p", { className: "text-xs", children: g(l) })
     ] }) }) })
   ] }) : /* @__PURE__ */ jsx(
     Button,
@@ -6515,9 +6649,9 @@ const COLOR_PROP = {
   canvas: n = !1,
   tooltip: r = !0
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, m = p, { t: g } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (y) => {
-    u.includes(y) ? u.length > 2 && m(u.filter((S) => S !== y)) : m((S) => [...S, y]);
-  }, x = (y) => {
+  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), x = (y) => {
+    u.includes(y) ? u.length > 2 && g(u.filter((C) => C !== y)) : g((C) => [...C, y]);
+  }, f = (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(
@@ -6525,7 +6659,7 @@ const COLOR_PROP = {
     {
       canvas: n,
       ...y,
-      onClick: x,
+      onClick: f,
       key: y.breakpoint,
       currentBreakpoint: b
     }
@@ -6539,7 +6673,7 @@ const COLOR_PROP = {
           openDelay: o,
           tooltip: r,
           ...y,
-          onClick: x,
+          onClick: f,
           key: y.breakpoint,
           currentBreakpoint: b
         }
@@ -6548,15 +6682,15 @@ const COLOR_PROP = {
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: g("Screen sizes") }),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: m("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
         map(h, (y) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
             disabled: y.breakpoint === "xs",
-            onCheckedChange: () => f(toUpper(y.breakpoint)),
+            onCheckedChange: () => x(toUpper(y.breakpoint)),
             checked: includes(u, toUpper(y.breakpoint)),
-            children: g(y.title)
+            children: m(y.title)
           },
           y.breakpoint
         ))
@@ -6581,125 +6715,12 @@ function BreakpointSelector() {
     ] }) }) })
   ] });
 }
-const SECONDS = 10;
-function Countdown() {
-  const [o, n] = useState(SECONDS), [r, a] = useState(!1);
-  useEffect(() => {
-    if (r && o > 0) {
-      const p = setTimeout(() => {
-        n(o - 0.1);
-      }, 100);
-      return () => clearTimeout(p);
-    } else o <= 0 && (a(!1), n(SECONDS));
-  }, [r, o]);
-  const l = () => {
-    a(!0), n(SECONDS);
-  };
-  useEffect(() => {
-    o === SECONDS && l();
-  }, [o]);
-  const i = 18, c = 2 * Math.PI * i, d = c * (1 - (SECONDS - o) / SECONDS);
-  return /* @__PURE__ */ jsxs("div", { className: "relative h-4 w-4", children: [
-    /* @__PURE__ */ jsxs("svg", { className: "h-full w-full", viewBox: "0 0 40 40", children: [
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: "text-gray-300",
-          strokeWidth: "4",
-          stroke: "currentColor",
-          fill: "transparent",
-          r: i,
-          cx: "20",
-          cy: "20"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: "text-blue-600",
-          strokeWidth: "4",
-          strokeDasharray: c,
-          strokeDashoffset: d,
-          strokeLinecap: "round",
-          stroke: "currentColor",
-          fill: "transparent",
-          r: i,
-          cx: "20",
-          cy: "20"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: " " }) })
-  ] });
-}
-const AskAIStyles = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, m] = useState();
-  useEffect(() => {
-    var h;
-    (h = d.current) == null || h.focus();
-  }, []);
-  const g = (h) => {
-    const { usage: f } = h || {};
-    !l && f && m(f), p.current = setTimeout(() => m(void 0), 1e4), l || c("");
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "", children: [
-    /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        ref: d,
-        value: i,
-        onChange: (h) => c(h.target.value),
-        placeholder: n("Ask AI to edit styles"),
-        className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
-        rows: 4,
-        onKeyDown: (h) => {
-          h.key === "Enter" && (h.preventDefault(), p.current && clearTimeout(p.current), m(void 0), r("styles", o, i, g));
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "my-2 flex items-center gap-2", children: [
-      a ? null : /* @__PURE__ */ jsx(
-        Button,
-        {
-          disabled: i.trim().length < 5 || a,
-          onClick: () => {
-            p.current && clearTimeout(p.current), m(void 0), r("styles", o, i, g);
-          },
-          variant: "default",
-          className: "w-fit",
-          size: "sm",
-          children: a ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ReloadIcon, { className: "h-5 w-5 animate-spin" }),
-            n("Generating... Please wait...")
-          ] }) : n("Edit with AI")
-        }
-      ),
-      a ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxs(Skeleton, { className: "flex w-full items-center space-x-1 px-4 py-1 pl-2", children: [
-          /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4 animate-spin text-gray-500" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs", children: n("Generating... Please wait...") })
-        ] }),
-        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
-      ] }) : null
-    ] }),
-    u ? /* @__PURE__ */ jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        n("Total tokens used"),
-        ": ",
-        u.totalTokens
-      ] }),
-      /* @__PURE__ */ jsx(Countdown, {})
-    ] }) }) : null,
-    /* @__PURE__ */ jsx("div", { className: "max-w-full", children: l && /* @__PURE__ */ jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: l.message }) })
-  ] });
-}, AiIcon = ({ className: o = "h-full w-full" }) => /* @__PURE__ */ jsx("svg", { className: o, viewBox: "0 0 256 256", fill: "currentColor", 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" }) });
 function ManualClasses() {
   var L;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [g] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), b = (L = first(d)) == null ? void 0 : L.prop, { classes: y } = getSplitChaiClasses(get(p, b, "")), S = y.split(" ").filter((T) => !isEmpty(T)), v = () => {
-    const T = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(g, T, !0), x("");
-  }, [B, _] = useState([]), j = ({ value: T }) => {
+  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, x] = useState(""), f = (L = first(d)) == null ? void 0 : L.prop, { classes: b } = getSplitChaiClasses(get(p, f, "")), y = b.split(" ").filter((T) => !isEmpty(T)), C = useBuilderProp("flags.useClipboard", !1), v = () => {
+    const T = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(m, T, !0), x("");
+  }, [j, _] = useState([]), B = ({ value: T }) => {
     const P = T.trim().toLowerCase(), R = P.match(/.+:/g);
     let D = [];
     if (R && R.length > 0) {
@@ -6711,7 +6732,7 @@ function ManualClasses() {
     } else
       D = i.search(P);
     return _(map(D, "item"));
-  }, C = () => {
+  }, S = () => {
     _([]);
   }, k = (T) => T.name, I = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), A = useMemo(
     () => ({
@@ -6721,54 +6742,45 @@ function ManualClasses() {
       autoCapitalize: "off",
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
-      value: f,
+      value: h,
       onFocus: (T) => {
         setTimeout(() => {
           T.target && T.target.select();
         }, 0);
       },
       onKeyDown: (T) => {
-        T.key === "Enter" && f.trim() !== "" && v();
+        T.key === "Enter" && h.trim() !== "" && v();
       },
       onChange: (T, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [f, c, o]
+    [h, c, o]
   ), w = (T) => {
     debugger;
     const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    m(g, [T]), u(g, P, !0), r(""), l(-1);
+    g(m, [T]), u(m, P, !0), r(""), l(-1);
   }, E = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(S.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(y.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("span", { children: c("Classes") }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: E, className: "cursor-pointer" }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
-        ] })
-      ] }),
-      h ? /* @__PURE__ */ jsxs(Popover, { children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
-          /* @__PURE__ */ jsx(AiIcon, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "ml-2", children: c("Ask AI") })
-        ] }) }),
-        /* @__PURE__ */ jsx(PopoverContent, { side: "left", className: "p-2", children: /* @__PURE__ */ jsx(AskAIStyles, { blockId: p == null ? void 0 : p._id }) })
-      ] }) : null
-    ] }),
+    /* @__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: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: E, className: "cursor-pointer" }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-x-3", children: [
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: B,
-          onSuggestionsFetchRequested: j,
-          onSuggestionsClearRequested: C,
+          suggestions: j,
+          onSuggestionsFetchRequested: B,
+          onSuggestionsClearRequested: S,
           getSuggestionValue: k,
           renderSuggestion: I,
           inputProps: A,
@@ -6788,13 +6800,13 @@ function ManualClasses() {
           variant: "outline",
           className: "h-6 border-border",
           onClick: v,
-          disabled: f.trim() === "",
+          disabled: h.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: S.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: y.map(
       (T, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
@@ -6819,7 +6831,7 @@ function ManualClasses() {
         "button",
         {
           onDoubleClick: () => {
-            x(T), m(g, [T]), setTimeout(() => {
+            x(T), g(m, [T]), setTimeout(() => {
               o.current && o.current.focus();
             }, 10);
           },
@@ -6829,7 +6841,7 @@ function ManualClasses() {
               /* @__PURE__ */ jsx(
                 Cross2Icon,
                 {
-                  onClick: () => m(g, [T], !0),
+                  onClick: () => g(m, [T], !0),
                   className: "hidden h-max w-3.5 cursor-pointer rounded bg-gray-100 p-0.5 text-red-500 hover:bg-gray-50 group-hover:block"
                 }
               ),
@@ -6972,13 +6984,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const m = !get(i, "negative", !1), g = get(i, "cssProperty", "");
+      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(g, "scale") || g === "opacity") && (f = 10);
-      let b = (i.dragStartY - u.pageY) / f + h;
-      m && b < 0 && (b = 0), g === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
+      let x = MAPPER[i.dragUnit];
+      (startsWith(m, "scale") || m === "opacity") && (x = 10);
+      let b = (i.dragStartY - u.pageY) / x + h;
+      g && b < 0 && (b = 0), m === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -7019,14 +7031,14 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, m] = useSelectedBlockIds(), { clearHighlight: g } = 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;
       u(syncBlocksWithDefaults(b), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, f = useFeature("dnd"), { t: x } = useTranslation();
+  }, x = useFeature("dnd"), { t: f } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
@@ -7036,18 +7048,18 @@ const CoreBlock = ({
         type: "button",
         onDragStart: (b) => {
           b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            m([]), g();
+            g([]), m();
           }, 200);
         },
-        draggable: f ? "true" : "false",
+        draggable: x ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(d || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(f(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: f(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -7072,8 +7084,8 @@ const registerChaiPreImportHTMLHook = (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, d] = useState(!1), p = async () => {
     d(!0);
-    const u = await getPreImportHTML(a), m = getBlocksFromHTML(u);
-    i([...m], o, n), l(""), d(!1), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+    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") }) }),
@@ -7108,8 +7120,8 @@ const registerChaiPreImportHTMLHook = (o) => {
   height: i = ""
 }) => {
   const [c, d] = useState(o), p = (u) => {
-    const m = u.target.value;
-    d(m), n(m);
+    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",
@@ -7158,9 +7170,9 @@ const registerChaiLibrary = (o, n) => {
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), g = get(o, "name", get(o, "label")), h = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), b = (v) => {
-    const B = has(v, "styles_attrs.data-page-section");
-    return v._type === "Box" && B;
+  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), x = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), b = (v) => {
+    const j = has(v, "styles_attrs.data-page-section");
+    return v._type === "Box" && j;
   }, y = useCallback(
     async (v) => {
       if (v.stopPropagation(), has(o, "component")) {
@@ -7168,8 +7180,8 @@ const registerChaiLibrary = (o, n) => {
         return;
       }
       i(!0);
-      let B = await c({ library: n, block: o });
-      typeof B == "string" && (B = getBlocksFromHTML(B)), isEmpty(B) || p(syncBlocksWithDefaults(B), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      let j = await c({ library: n, block: o });
+      typeof j == "string" && (j = getBlocksFromHTML(j)), isEmpty(j) || p(syncBlocksWithDefaults(j), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, n, r, a]
   );
@@ -7179,21 +7191,21 @@ const registerChaiLibrary = (o, n) => {
       {
         onClick: l ? () => {
         } : y,
-        draggable: f ? "true" : "false",
+        draggable: x ? "true" : "false",
         onDragStart: async (v) => {
-          const B = await c({ library: n, block: o });
+          const j = await c({ library: n, block: o });
           let _ = r;
-          if (b(first(B)) && (_ = null), !isEmpty(B)) {
-            const j = { blocks: B, uiLibrary: !0, parent: _ };
-            if (v.dataTransfer.setData("text/plain", JSON.stringify(j)), o.preview) {
-              const C = new Image();
-              C.src = o.preview, C.onload = () => {
-                v.dataTransfer.setDragImage(C, 0, 0);
+          if (b(first(j)) && (_ = null), !isEmpty(j)) {
+            const B = { blocks: j, uiLibrary: !0, parent: _ };
+            if (v.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
+              const S = new Image();
+              S.src = o.preview, S.onload = () => {
+                v.dataTransfer.setDragImage(S, 0, 0);
               };
             } else
               v.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(j), setTimeout(() => {
-              u([]), m(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+            f(B), setTimeout(() => {
+              u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
         },
@@ -7205,50 +7217,50 @@ const registerChaiLibrary = (o, n) => {
             /* @__PURE__ */ jsx(ReloadIcon, { className: "animate-spin h-4 w-4 text-white" }),
             /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: g }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children: g }),
+          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: m }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children: m }),
             h && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: h })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { className: "font-medium", children: g }) }) })
+    /* @__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((w) => w.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, m] = useState(""), [g, h] = useState([]), f = useRef(null);
+  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((w) => w.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [m, h] = useState([]), x = useRef(null);
   useEffect(() => {
-    c && c.length > 0 && (f.current = new Fuse(c, {
+    c && c.length > 0 && (x.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
       threshold: 0.4,
       ignoreLocation: !0
     }));
   }, [c]), useEffect(() => {
-    if (!u.trim() || !f.current) {
+    if (!u.trim() || !x.current) {
       h([]);
       return;
     }
-    const w = f.current.search(u).map((E) => E.item);
+    const w = x.current.search(u).map((E) => E.item);
     h(w);
   }, [u]);
-  const x = u.trim() && !isEmpty(g) ? g : c, b = groupBy(x, "group"), [y, S] = useState(null);
+  const f = u.trim() && !isEmpty(m) ? m : c, b = groupBy(f, "group"), [y, C] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(b))) {
-      S(null);
+      C(null);
       return;
     }
     if (!y || !b[y]) {
-      S(first(keys(b)));
+      C(first(keys(b)));
       return;
     }
   }, [b, y]);
-  const v = get(b, y, []), B = useRef(null), { t: _ } = useTranslation(), j = (w) => {
-    B.current && (clearTimeout(B.current), B.current = null), B.current = setTimeout(() => {
-      B.current && S(w);
+  const v = get(b, y, []), j = useRef(null), { t: _ } = useTranslation(), B = (w) => {
+    j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
+      j.current && C(w);
     }, 400);
-  }, C = () => {
+  }, S = () => {
     i != null && i.id && p(i.id);
   }, k = () => {
-    m("");
+    g("");
   };
   if (d)
     return /* @__PURE__ */ jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
@@ -7264,7 +7276,7 @@ const registerChaiLibrary = (o, n) => {
         {
           placeholder: _("Search blocks..."),
           value: u,
-          onChange: (w) => m(w.target.value),
+          onChange: (w) => g(w.target.value),
           className: "w-full pl-8 pr-8"
         }
       ),
@@ -7285,17 +7297,17 @@ const registerChaiLibrary = (o, n) => {
           /* @__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: 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: C, variant: "outline", size: "sm", className: "gap-2", children: [
+            /* @__PURE__ */ jsxs(Button, { onClick: S, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
               _("Retry")
             ] })
           ] }) }) : map(b, (w, E) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => j(E),
-              onMouseLeave: () => clearTimeout(B.current),
+              onMouseEnter: () => B(E),
+              onMouseLeave: () => clearTimeout(j.current),
               role: "button",
-              onClick: () => S(E),
+              onClick: () => C(E),
               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",
                 E === y ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
@@ -7312,7 +7324,7 @@ 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: () => B.current ? clearTimeout(B.current) : null,
+          onMouseEnter: () => j.current ? clearTimeout(j.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
             isEmpty(v) && !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: [
@@ -7359,7 +7371,7 @@ const registerChaiLibrary = (o, n) => {
   position: n,
   gridCols: r = "grid-cols-2"
 }) => {
-  const { data: a, isLoading: l, refetch: i, error: c } = usePartialBlocksList(), [d, p] = useAtom$1(partialBlocksDataAtom), [u, m] = 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 (!u || Object.keys(d.blocks).length === 0)
       if (c)
@@ -7368,54 +7380,54 @@ const registerChaiLibrary = (o, n) => {
           groups: [],
           isLoading: !1,
           error: c
-        }), m(!0);
+        }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const h = Object.entries(a).map(([x, b]) => {
-          const y = b, S = y.type || "partial", v = formatReadableName(S);
+        const h = Object.entries(a).map(([f, b]) => {
+          const y = b, C = y.type || "partial", v = formatReadableName(C);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(y.name || x),
+            label: formatReadableName(y.name || f),
             description: y.description || "",
             icon: FrameIcon,
             group: v,
             // Use formatted type as group
             category: "partial",
-            partialBlockId: x,
+            partialBlockId: f,
             // Store the original ID as partialBlockId
             _name: y.name
           };
-        }), f = uniq(map(h, "group"));
+        }), x = uniq(map(h, "group"));
         p({
           blocks: h,
-          groups: f,
+          groups: x,
           isLoading: !1,
           error: null
-        }), m(!0);
+        }), g(!0);
       } else l ? p((h) => ({ ...h, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
         blocks: [],
         groups: [],
         isLoading: !1,
         error: "No partial blocks available"
-      }), m(!0));
+      }), g(!0));
   }, [
     l,
     a,
     u,
-    m,
+    g,
     p,
     d.blocks,
     c
   ]);
-  const g = () => {
-    p((h) => ({ ...h, isLoading: !0, error: null })), m(!1), i();
+  const m = () => {
+    p((h) => ({ ...h, isLoading: !0, error: null })), g(!1), i();
   };
   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",
       {
-        onClick: g,
+        onClick: m,
         className: "rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90",
         children: "Refresh"
       }
@@ -7434,26 +7446,26 @@ const registerChaiLibrary = (o, n) => {
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...n });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
   var A;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [m] = useAtom$1(addBlockTabAtom), g = (A = find(c, (w) => w._id === r)) == null ? void 0 : A._type, [h, f] = useState("all"), [x, b] = useState(null), y = useRef(null);
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (A = find(c, (w) => w._id === r)) == null ? void 0 : A._type, [h, x] = useState("all"), [f, b] = useState(null), y = useRef(null);
   useEffect(() => {
     const w = setTimeout(() => {
       var E;
       (E = u.current) == null || E.focus();
     }, 0);
     return () => clearTimeout(w);
-  }, [m]), useEffect(() => {
-    d && (f("all"), b(null));
+  }, [g]), useEffect(() => {
+    d && (x("all"), b(null));
   }, [d]), useEffect(() => (y.current = debounce((w) => {
-    f(w);
+    x(w);
   }, 500), () => {
     y.current && y.current.cancel();
   }), []);
-  const S = useCallback((w) => {
+  const C = useCallback((w) => {
     b(w), y.current && y.current(w);
   }, []), v = useCallback(() => {
     b(null), y.current && y.current.cancel();
-  }, []), B = useCallback((w) => {
-    y.current && y.current.cancel(), f(w), b(null);
+  }, []), j = useCallback((w) => {
+    y.current && y.current.cancel(), x(w), b(null);
   }, []), _ = useMemo(
     () => d ? values(n).filter(
       (w) => {
@@ -7462,15 +7474,15 @@ const registerChaiLibrary = (o, n) => {
       }
     ) : n,
     [n, d]
-  ), j = useMemo(
+  ), B = useMemo(
     () => d ? o.filter(
       (w) => reject(filter(values(_), { group: w }), { hidden: !0 }).length > 0
     ) : o.filter((w) => reject(filter(values(n), { group: w }), { hidden: !0 }).length > 0),
     [n, _, o, d]
-  ), C = useMemo(
-    () => sortBy(j, (w) => CORE_GROUPS.indexOf(w) === -1 ? 99 : CORE_GROUPS.indexOf(w)),
-    [j]
-  ), k = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), I = useMemo(() => h === "all" ? C : [h], [C, h]);
+  ), S = useMemo(
+    () => sortBy(B, (w) => CORE_GROUPS.indexOf(w) === -1 ? 99 : CORE_GROUPS.indexOf(w)),
+    [B]
+  ), k = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), I = useMemo(() => h === "all" ? S : [h], [S, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7484,31 +7496,31 @@ const registerChaiLibrary = (o, n) => {
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      C.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      S.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => B("all"),
-            onMouseEnter: () => S("all"),
+            onClick: () => j("all"),
+            onMouseEnter: () => C("all"),
             onMouseLeave: v,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || f === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        C.map((w) => /* @__PURE__ */ jsx(
+        S.map((w) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => B(w),
-            onMouseEnter: () => S(w),
+            onClick: () => j(w),
+            onMouseEnter: () => C(w),
             onMouseLeave: v,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === w || x === w ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === w || f === w ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(i(w.toLowerCase()))
           },
           `sidebar-${w}`
         ))
       ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: j.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: B.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         i("No blocks found matching"),
         ' "',
         d,
@@ -7524,7 +7536,7 @@ const registerChaiLibrary = (o, n) => {
             parentId: r,
             position: a,
             block: E,
-            disabled: !canAcceptChildBlock(g, E.type) || !canBeNestedInside(g, E.type)
+            disabled: !canAcceptChildBlock(m, E.type) || !canBeNestedInside(m, E.type)
           },
           E.type
         )) })
@@ -7537,13 +7549,13 @@ const registerChaiLibrary = (o, n) => {
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), m = Object.keys(u || {}).length > 0, { hasPermission: g } = usePermissions();
+  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission: m } = usePermissions();
   useEffect(() => {
-    i === "partials" && !m && c("library");
-  }, [i, m, c]);
+    i === "partials" && !g && c("library");
+  }, [i, g, c]);
   const h = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []), f = useChaiAddBlockTabs(), x = p && g(PERMISSIONS.IMPORT_HTML), y = useChaiLibraries().length > 0;
+  }, []), x = useChaiAddBlockTabs(), f = p && m(PERMISSIONS.IMPORT_HTML), y = useChaiLibraries().length > 0;
   return useEffect(() => {
     i === "library" && !y && c("core");
   }, [i, y, c]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
@@ -7554,8 +7566,8 @@ const registerChaiLibrary = (o, n) => {
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (S) => {
-          d(""), c(S);
+        onValueChange: (C) => {
+          d(""), c(C);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7563,15 +7575,15 @@ const registerChaiLibrary = (o, n) => {
           /* @__PURE__ */ jsxs(TabsList, { className: "flex w-full items-center", children: [
             y && /* @__PURE__ */ jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
-            m && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
-            x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(f, (S) => /* @__PURE__ */ jsx(TabsTrigger, { value: S.id, children: React__default.createElement(S.tab) }, `tab-add-block-${S.id}`))
+            g && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
+            f ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
+            map(x, (C) => /* @__PURE__ */ jsx(TabsTrigger, { value: C.id, children: React__default.createElement(C.tab) }, `tab-add-block-${C.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 }) }),
-          m && /* @__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, (S) => /* @__PURE__ */ jsx(TabsContent, { value: S.id, children: React__default.createElement(S.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${S.id}`))
+          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 }) }) }) }),
+          f ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
+          map(x, (C) => /* @__PURE__ */ jsx(TabsContent, { value: C.id, children: React__default.createElement(C.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${C.id}`))
         ]
       }
     )
@@ -7690,40 +7702,40 @@ const registerChaiSaveToLibrary = (o) => {
     " ",
     o("Unlink from library")
   ] });
-}, CANNOT_COPY_BLOCKS = !navigator.clipboard, CopyPasteBlocks = () => {
-  const [o] = useBlocksStore(), [n] = useSelectedBlockIds(), { pasteBlocks: r } = usePasteBlocks(), [, a, l] = useCopyBlocks(), { t: i } = useTranslation(), c = useSelectedBlock(), d = useCallback(() => {
-    const p = n.map((u) => {
-      const m = o.find((g) => g._id === u);
+}, CopyPasteBlocks = () => {
+  const [o] = useBlocksStore(), [n] = useSelectedBlockIds(), { pasteBlocks: r } = usePasteBlocks(), [, a, l] = useCopyBlocks(), { t: i } = useTranslation(), c = useSelectedBlock(), d = useBuilderProp("flags.useClipboard", !1), p = useCallback(() => {
+    const u = n.map((g) => {
+      const m = o.find((h) => h._id === g);
       return {
-        id: u,
+        id: g,
         data: m
       };
     });
-    l(p.map((u) => u.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(p.map((u) => u.id)), toast.dismiss();
+          a(u.map((g) => g.id)), toast.dismiss();
         }
       },
       action: {
         label: i("Yes"),
         onClick: () => {
           a(
-            p.map((u) => u.id),
+            u.map((g) => g.id),
             !0
           ), toast.dismiss();
         }
       },
       position: "top-center"
-    }) : a(p.map((u) => u.id));
+    }) : a(u.map((g) => g.id));
   }, [n, o, a, l]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !CANNOT_COPY_BLOCKS && /* @__PURE__ */ jsxs(
+    d && /* @__PURE__ */ jsxs(
       DropdownMenuItem,
       {
         disabled: !canDuplicateBlock(c == null ? void 0 : c._type),
-        onClick: d,
+        onClick: p,
         className: "flex items-center gap-x-4 text-xs",
         children: [
           /* @__PURE__ */ jsx(CopyIcon, {}),
@@ -7732,7 +7744,7 @@ const registerChaiSaveToLibrary = (o) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
+    d && /* @__PURE__ */ jsxs(
       DropdownMenuItem,
       {
         className: "flex items-center gap-x-4 text-xs",
@@ -7748,12 +7760,12 @@ const registerChaiSaveToLibrary = (o) => {
     )
   ] });
 }, CutBlocks = () => {
-  const [o] = useSelectedBlockIds(), [, n] = useCutBlockIds(), { t: r } = useTranslation();
-  return /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "flex items-center gap-x-4 text-xs", onClick: () => n(o), children: [
+  const [o] = useSelectedBlockIds(), [, n] = useCutBlockIds(), { t: r } = useTranslation(), a = useBuilderProp("flags", { useClipboard: !1 }).useClipboard;
+  return /* @__PURE__ */ jsx(Fragment, { children: a && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "flex items-center gap-x-4 text-xs", onClick: () => n(o), children: [
     /* @__PURE__ */ jsx(ScissorsIcon, {}),
     " ",
     r("Cut")
-  ] });
+  ] }) });
 }, RemoveBlocks = () => {
   const [o] = useSelectedBlockIds(), n = useRemoveBlocks(), r = useSelectedBlock(), { t: a } = useTranslation();
   return /* @__PURE__ */ jsxs(
@@ -7786,7 +7798,7 @@ const registerChaiSaveToLibrary = (o) => {
     }
   );
 }, BlockContextMenuContent = ({ node: o }) => {
-  const { t: n } = useTranslation(), [r] = useSelectedBlockIds(), a = useDuplicateBlocks(), l = useSelectedBlock(), { hasPermission: i } = usePermissions(), { librarySite: c } = useBuilderProp("_tempProps", { librarySite: !1 }), d = 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 /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "bottom", className: "border-border text-xs", children: [
@@ -7881,26 +7893,26 @@ const Input = ({ node: o }) => {
   var D;
   const { t: a } = useTranslation(), l = useUpdateBlocksProps(), [i] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let d = null;
-  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: m } = useBlockHighlight(), { id: g, data: h, isSelected: f, willReceiveDrop: x, isDragging: b, isEditing: y, handleClick: S } = o, v = get(h, "_show", !0), B = (N) => {
+  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: f, isDragging: b, isEditing: y, handleClick: C } = o, v = get(h, "_show", !0), j = (N) => {
     N.stopPropagation(), v && o.toggle();
   }, _ = (N) => {
     N.isInternal && (d = N.isOpen, N.isOpen && N.close());
-  }, j = (N) => {
+  }, B = (N) => {
     N.isInternal && d !== null && (d ? N.open() : N.close(), d = null);
-  }, [C, k] = useAtom$1(currentAddSelection), I = () => {
+  }, [S, k] = useAtom$1(currentAddSelection), I = () => {
     var N;
     A(), o.parent.isSelected || k((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
   }, A = () => {
     k(null);
   }, w = (N) => {
-    A(), N.stopPropagation(), !o.isOpen && v && o.toggle(), S(N);
+    A(), N.stopPropagation(), !o.isOpen && v && o.toggle(), C(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      x && !o.isOpen && !b && v && o.toggle();
+      f && !o.isOpen && !b && v && o.toggle();
     }, 500);
     return () => clearTimeout(N);
-  }, [x, o, b]);
+  }, [f, o, b]);
   const E = (N, O) => {
     const $ = i.contentDocument || i.contentWindow.document, M = $.querySelector(`[data-block-id=${N}]`);
     M && M.setAttribute("data-drop", O);
@@ -7911,7 +7923,7 @@ const Input = ({ node: o }) => {
     const O = get(o, "parent.id");
     O !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: O, position: N }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: N });
   };
-  if (g === ROOT_TEMP_KEY)
+  if (m === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
       /* @__PURE__ */ jsx("br", {}),
       c(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
@@ -7929,26 +7941,26 @@ const Input = ({ node: o }) => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const { librarySite: T } = useBuilderProp("_tempProps", { librarySite: !1 }), P = useMemo(() => T && has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, c, T]), R = useMemo(() => (h == null ? void 0 : h._type) === "PartialBlock" || (h == null ? void 0 : h._type) === "GlobalBlock", [h]);
+  const { librarySite: T } = useBuilderProp("flags", { librarySite: !1 }), P = useMemo(() => T && has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, c, T]), R = useMemo(() => (h == null ? void 0 : h._type) === "PartialBlock" || (h == null ? void 0 : h._type) === "GlobalBlock", [h]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => u(g),
-      onMouseLeave: () => m(),
+      onMouseEnter: () => u(m),
+      onMouseLeave: () => g(),
       onClick: w,
       style: n,
-      "data-node-id": g,
+      "data-node-id": m,
       ref: r,
       onDragStart: () => _(o),
-      onDragEnd: () => j(o),
+      onDragEnd: () => B(o),
       onDragOver: (N) => {
-        N.preventDefault(), E(g, "yes");
+        N.preventDefault(), E(m, "yes");
       },
       onDragLeave: (N) => {
-        N.preventDefault(), E(g, "no");
+        N.preventDefault(), E(m, "no");
       },
       onDrop: (N) => {
-        N.preventDefault(), E(g, "no");
+        N.preventDefault(), E(m, "no");
       },
       children: [
         c(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((D = o == null ? void 0 : o.parent) == null ? void 0 : D.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
@@ -7968,12 +7980,12 @@ const Input = ({ node: o }) => {
           {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
-              f ? "bg-primary/20" : "hover:bg-primary/10",
-              x && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === C ? "bg-primary/10" : "",
+              x ? "bg-primary/20" : "hover:bg-primary/10",
+              f && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
               b && "opacity-20",
               v ? "" : "line-through opacity-50",
-              P && f && "bg-primary/20 text-primary"
+              P && x && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7981,7 +7993,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: B, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
+                    children: p && /* @__PURE__ */ jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7990,9 +8002,9 @@ const Input = ({ node: o }) => {
                     className: cn(
                       "leading-1 flex items-center",
                       P && "text-orange-600/90",
-                      P && f && "text-orange-800",
+                      P && x && "text-orange-800",
                       R && "text-purple-600/90",
-                      R && f && "text-purple-800"
+                      R && x && "text-purple-800"
                     ),
                     children: [
                       /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
@@ -8015,7 +8027,7 @@ const Input = ({ node: o }) => {
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: g }),
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
                       className: "cursor-pointer rounded bg-transparent p-px hover:bg-primary/10",
                       asChild: !0,
                       children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" })
@@ -8028,7 +8040,7 @@ const Input = ({ node: o }) => {
                     TooltipTrigger,
                     {
                       onClick: (N) => {
-                        N.stopPropagation(), l([g], { _show: !v }), o.isOpen && o.toggle();
+                        N.stopPropagation(), l([m], { _show: !v }), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent p-0.5 hover:bg-primary/10",
                       asChild: !0,
@@ -8037,7 +8049,7 @@ const Input = ({ node: o }) => {
                   ),
                   /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999] text-xs", side: "bottom", children: a(v ? "Hide the block from page" : "Show the block on page") })
                 ] }),
-                /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: g, 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" }) }) })
+                /* @__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" }) }) })
               ] })
             ]
           }
@@ -8046,10 +8058,10 @@ const Input = ({ node: o }) => {
     }
   ) });
 }), PasteAtRootContextMenu = ({ parentContext: o, setParentContext: n }) => {
-  const { t: r } = useTranslation(), { canPaste: a, pasteBlocks: l } = usePasteBlocks();
+  const { t: r } = useTranslation(), { canPaste: a, pasteBlocks: l } = usePasteBlocks(), i = useBuilderProp("flags.useClipboard", !1);
   return useEffect(() => {
     a("root") || n(null);
-  }, [a("root")]), !o || !a("root") ? null : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxs(DropdownMenu, { open: !0, onOpenChange: () => n(null), children: [
+  }, [a("root")]), !o || !a("root") || !i ? null : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxs(DropdownMenu, { open: !0, onOpenChange: () => n(null), children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "hidden" }),
     /* @__PURE__ */ jsx(
       DropdownMenuContent,
@@ -8455,106 +8467,106 @@ const Input = ({ node: o }) => {
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions();
   if (d) {
-    const j = d.map((C) => Object.keys(C)[0]);
-    DEFAULT_THEME_PRESET.forEach((C) => {
-      const k = Object.keys(C)[0];
-      j.includes(k) || d.push(C);
+    const B = d.map((S) => Object.keys(S)[0]);
+    DEFAULT_THEME_PRESET.forEach((S) => {
+      const k = Object.keys(S)[0];
+      B.includes(k) || d.push(S);
     });
   }
-  const [m, g] = useTheme(), h = useThemeOptions(), { t: f } = useTranslation(), x = React.useCallback(
-    (j) => {
-      const C = { ...m };
-      setPreviousTheme(C), g(j), toast.success("Theme updated", {
+  const [g, m] = useTheme(), h = useThemeOptions(), { t: x } = useTranslation(), f = React.useCallback(
+    (B) => {
+      const S = { ...g };
+      setPreviousTheme(S), m(B), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
             " Undo"
           ] }),
           onClick: () => {
-            g(C), clearPreviousTheme(), toast.dismiss();
+            m(S), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
         duration: 15e3
       });
     },
-    [m, g]
+    [g, m]
   ), b = () => {
-    const j = d.find((C) => Object.keys(C)[0] === a);
-    if (j) {
-      const C = Object.values(j)[0];
-      C && typeof C == "object" && "fontFamily" in C && "borderRadius" in C && "colors" in C ? (x(C), l("")) : console.error("Invalid preset structure:", C);
+    const B = d.find((S) => Object.keys(S)[0] === a);
+    if (B) {
+      const S = Object.values(B)[0];
+      S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? (f(S), l("")) : console.error("Invalid preset structure:", S);
     } else
       console.error("Preset not found:", a);
-  }, y = (j) => {
-    x(j), l("");
-  }, S = useDebouncedCallback(
-    (j, C) => {
-      g(() => ({
-        ...m,
+  }, y = (B) => {
+    f(B), l("");
+  }, C = useDebouncedCallback(
+    (B, S) => {
+      m(() => ({
+        ...g,
         fontFamily: {
-          ...m.fontFamily,
-          [j.replace(/font-/g, "")]: C
+          ...g.fontFamily,
+          [B.replace(/font-/g, "")]: S
         }
       }));
     },
-    [m],
+    [g],
     200
   ), v = React.useCallback(
-    (j) => {
-      g(() => ({
-        ...m,
-        borderRadius: `${j}px`
+    (B) => {
+      m(() => ({
+        ...g,
+        borderRadius: `${B}px`
       }));
     },
-    [m]
-  ), B = useDebouncedCallback(
-    (j, C) => {
-      g(() => {
-        const k = get(m, `colors.${j}`);
-        return n ? set(k, 1, C) : set(k, 0, C), {
-          ...m,
+    [g]
+  ), j = useDebouncedCallback(
+    (B, S) => {
+      m(() => {
+        const k = get(g, `colors.${B}`);
+        return n ? set(k, 1, S) : set(k, 0, S), {
+          ...g,
           colors: {
-            ...m.colors,
-            [j]: k
+            ...g.colors,
+            [B]: k
           }
         };
       });
     },
-    [m],
+    [g],
     200
-  ), _ = (j) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(j.items).map(([C]) => {
-    const k = get(m, `colors.${C}.${n ? 1 : 0}`);
+  ), _ = (B) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(B.items).map(([S]) => {
+    const k = get(g, `colors.${S}.${n ? 1 : 0}`);
     return k ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
           value: k,
-          onChange: (I) => B(C, I)
+          onChange: (I) => j(S, I)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: C.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((I) => I.charAt(0).toUpperCase() + I.slice(1)).join(" ") + (!C.toLowerCase().includes("foreground") && !C.toLowerCase().includes("border") && !C.toLowerCase().includes("input") && !C.toLowerCase().includes("ring") && !C.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, C) : null;
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: S.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((I) => I.charAt(0).toUpperCase() + I.slice(1)).join(" ") + (!S.toLowerCase().includes("foreground") && !S.toLowerCase().includes("border") && !S.toLowerCase().includes("input") && !S.toLowerCase().includes("ring") && !S.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, S) : null;
   }) });
   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: [
       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: f("Presets") }),
+          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: x("Presets") }),
           /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(Button, { className: "px-1", variant: "link", size: "sm", onClick: () => c(!0), children: [
             /* @__PURE__ */ jsx(UploadIcon, { className: "h-4 w-4" }),
-            f("Import theme")
+            x("Import theme")
           ] }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: l, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select preset" }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((j) => {
-              const C = Object.keys(j)[0], k = C.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: C, children: capitalize(k) }, C);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((B) => {
+              const S = Object.keys(B)[0], k = S.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(k) }, S);
             }) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: b, children: f("Apply") }) })
+          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: b, children: x("Apply") }) })
         ] })
       ] }),
       /* @__PURE__ */ jsx(Separator, {}),
@@ -8563,14 +8575,14 @@ const Input = ({ node: o }) => {
           /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 text-gray-600" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Typography" })
         ] }),
-        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([j, C]) => /* @__PURE__ */ jsx(
+        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([B, S]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: j,
-            value: m.fontFamily[j.replace(/font-/g, "")] || C[Object.keys(C)[0]],
-            onChange: (k) => S(j, k)
+            label: B,
+            value: g.fontFamily[B.replace(/font-/g, "")] || S[Object.keys(S)[0]],
+            onChange: (k) => C(B, k)
           },
-          j
+          B
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (h == null ? void 0 : h.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -8579,9 +8591,9 @@ const Input = ({ node: o }) => {
               /* @__PURE__ */ jsx(CornerTopRightIcon, { className: "h-3 w-3 text-gray-600" }),
               /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Border Radius" })
             ] }),
-            /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: m.borderRadius })
+            /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: g.borderRadius })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: m.borderRadius, onChange: v }) })
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: g.borderRadius, onChange: v }) })
         ] }),
         /* @__PURE__ */ jsx(Separator, {}),
         (h == null ? void 0 : h.colors) && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -8596,7 +8608,7 @@ const Input = ({ node: o }) => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (j) => r(j),
+                  onCheckedChange: (B) => r(B),
                   "aria-label": "Toggle dark mode",
                   className: "mx-1"
                 }
@@ -8604,7 +8616,7 @@ const Input = ({ node: o }) => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((j) => _(j)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((B) => _(B)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: i && /* @__PURE__ */ jsx(
           LazyCssImportModal,
@@ -9118,7 +9130,7 @@ 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: d, icon: p, subMenus: u, prompt: m }) => u ? /* @__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",
         {
@@ -9134,7 +9146,7 @@ function QuickPrompts({ onClick: o }) {
     ] }) : /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => o(m),
+        onClick: () => o(g),
         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" }),
@@ -9145,13 +9157,13 @@ function QuickPrompts({ onClick: o }) {
     )
   ) }) });
 }
-const AIUserPrompt = ({ blockId: o }) => {
+const AiIcon = ({ className: o = "h-full w-full" }) => /* @__PURE__ */ jsx("svg", { className: o, viewBox: "0 0 256 256", fill: "currentColor", 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" }) }), AIUserPrompt = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), u = useSelectedBlock();
   useEffect(() => {
-    var g;
-    (g = d.current) == null || g.focus();
+    var m;
+    (m = d.current) == null || m.focus();
   }, []);
-  const m = () => {
+  const g = () => {
     l || c("");
   };
   return /* @__PURE__ */ jsx("div", { className: "", children: o ? /* @__PURE__ */ jsxs("div", { className: "", children: [
@@ -9166,8 +9178,8 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsx("div", { className: "rounded border p-2 text-sm", children: /* @__PURE__ */ jsx(
       QuickPrompts,
       {
-        onClick: (g) => {
-          p.current && clearTimeout(p.current), r("content", o, g, m);
+        onClick: (m) => {
+          p.current && clearTimeout(p.current), r("content", o, m, g);
         }
       }
     ) }),
@@ -9179,12 +9191,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: d,
           value: i,
-          onChange: (g) => c(g.target.value),
+          onChange: (m) => c(m.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full resize-none border-none p-0 text-xs shadow-none outline-none",
           rows: 3,
-          onKeyDown: (g) => {
-            g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), r("content", o, i, m));
+          onKeyDown: (m) => {
+            m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), r("content", o, i, g));
           }
         }
       ),
@@ -9194,7 +9206,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           Button,
           {
             onClick: () => {
-              p.current && clearTimeout(p.current), r("content", o, i, m);
+              p.current && clearTimeout(p.current), r("content", o, i, g);
             },
             variant: "default",
             className: "h-7 w-7",
@@ -9320,11 +9332,11 @@ const UndoRedo = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, m] = useState(null), [g, 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(""), x = useRef(null), f = useRef(null), b = usePageExternalData(), { t: y } = useTranslation();
   useEffect(() => {
     l(n);
   }, [n]);
-  const S = () => {
+  const C = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
@@ -9336,8 +9348,8 @@ const UndoRedo = () => {
   }, v = (k) => {
     const I = a.filter((A, w) => w !== k);
     r(I), l(I);
-  }, B = (k) => {
-    m(k), c(a[k].key), p(a[k].value);
+  }, j = (k) => {
+    g(k), c(a[k].key), p(a[k].value);
   }, _ = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
@@ -9345,11 +9357,11 @@ const UndoRedo = () => {
     }
     if (u !== null && i) {
       const k = [...a];
-      k[u] = { key: i, value: d }, r(k), l(k), m(null), c(""), p(""), h("");
+      k[u] = { key: i, value: d }, r(k), l(k), g(null), c(""), p(""), h("");
     }
-  }, j = (k) => {
-    k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? _() : S());
-  }, C = useCallback((k) => {
+  }, B = (k) => {
+    k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? _() : C());
+  }, S = useCallback((k) => {
     const I = (E) => /[.,!?;:]/.test(E), A = (E, L, T) => {
       let P = "", R = "";
       const D = L > 0 ? E[L - 1] : "", N = L < E.length ? E[L] : "";
@@ -9358,7 +9370,7 @@ const UndoRedo = () => {
         prefixLength: P.length,
         suffixLength: R.length
       };
-    }, w = x.current;
+    }, w = f.current;
     if (w) {
       const E = w.selectionStart || 0, L = w.value || "", T = w.selectionEnd || E;
       if (T > E) {
@@ -9375,7 +9387,7 @@ const UndoRedo = () => {
       "form",
       {
         onSubmit: (k) => {
-          k.preventDefault(), u !== null ? _() : S();
+          k.preventDefault(), u !== null ? _() : C();
         },
         className: "space-y-3",
         children: [
@@ -9389,7 +9401,7 @@ const UndoRedo = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: f,
+                  ref: x,
                   value: i,
                   onChange: (k) => c(k.target.value),
                   placeholder: y("Enter Key"),
@@ -9400,7 +9412,7 @@ const UndoRedo = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: C })
+                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: S })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9410,10 +9422,10 @@ const UndoRedo = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: x,
+                  ref: f,
                   value: d,
                   onChange: (k) => p(k.target.value),
-                  onKeyDown: j,
+                  onKeyDown: B,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9421,7 +9433,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: u !== null ? "Save" : "Add" }) }),
-          g && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: g })
+          m && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: m })
         ]
       }
     ),
@@ -9431,7 +9443,7 @@ 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: () => B(I), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => j(I), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(I), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
     ] }, I)) })
@@ -9589,49 +9601,49 @@ registerChaiSidebarPanel("outline", {
   position: "top",
   isInternal: !0,
   width: DEFAULT_PANEL_WIDTH,
-  panel: () => /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(ListTree, {}) })
+  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, d] = useRightPanel(), p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), m = reverse([...u ?? []]), g = 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(), I = k.find((w) => w.id === "chai-chat-panel"), A = k.filter((w) => w.id !== "chai-chat-panel");
     return I ? [I, ...A] : k;
-  }, [p]), f = useCallback(
+  }, [p]), x = useCallback(
     (k) => {
       console.log("handleMenuItemClick", k, n), r(n === k ? null : k);
     },
     [n, r]
-  ), { t: x } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), S = find(b, { id: n }) ?? first(b), v = get(S, "width", DEFAULT_PANEL_WIDTH);
+  ), { t: f } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), C = find(b, { id: n }) ?? first(b), v = get(C, "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 B = useMemo(() => {
+  const j = useMemo(() => {
     if (n === null) return 0;
     const k = find(b, { id: n });
     return get(k, "view", "standard") === "standard" ? v : l;
   }, [n, v, l, b]), _ = useCallback(() => {
     r(a.current);
-  }, [r, n]), j = useCallback(() => {
+  }, [r, n]), B = useCallback(() => {
     r("outline");
   }, [r]);
   useEffect(() => {
     n !== null && !find(b, { id: n }) && r("outline");
   }, [n, b]);
-  const C = useCallback(
+  const S = useCallback(
     (k) => {
-      f(k);
+      x(k);
     },
-    [f]
+    [x]
   );
   return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        onContextMenu: g,
+        onContextMenu: m,
         className: "flex h-full max-h-full flex-col bg-background text-foreground",
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
@@ -9642,19 +9654,19 @@ const RootLayout = () => {
                   position: "top",
                   panelId: k.id,
                   isActive: n === k.id,
-                  show: () => C(k.id)
+                  show: () => S(k.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(k.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(k.label) }) })
               ] }, "button-top-" + I)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m == null ? void 0 : m.map((k, I) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((k, I) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(k, "button", NoopComponent), {
                   position: "bottom",
                   panelId: k.id,
                   isActive: n === k.id,
-                  show: () => C(k.id)
+                  show: () => S(k.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(k.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(k.label) }) })
               ] }, "button-bottom-" + I)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -9662,18 +9674,18 @@ const RootLayout = () => {
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: B },
-                animate: { width: B },
+                initial: { width: j },
+                animate: { width: j },
                 transition: { duration: 0.3, ease: "easeInOut" },
-                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: [
+                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: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      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", "")) })
+                      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: f(get(C, "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(S, "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(C, "panel", NoopComponent), {}) }) })
                 ] })
               }
             ),
@@ -9693,11 +9705,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-2", children: c === "ai" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    x("AI Assistant")
+                    f("AI Assistant")
                   ] }) }) : c === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(MixerHorizontalIcon, { className: "h-4 w-4 text-gray-600" }),
-                      x("Theme Settings")
+                      f("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
                       Button,
@@ -9719,7 +9731,7 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    n !== null && get(S, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
+    n !== null && get(C, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "left",
@@ -9727,26 +9739,26 @@ const RootLayout = () => {
         style: { width: `${v}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(S, "icon", null) }),
-            /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
+            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
+            /* @__PURE__ */ jsx("span", { children: f(get(C, "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(S, "panel", NoopComponent), {
-            close: j
+          /* @__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), {
+            close: B
           }) }) })
         ]
       }
     ) }),
     " ",
-    n !== null && get(S, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${v}px` }, children: [
+    n !== null && get(C, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${v}px` }, children: [
       /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border px-2 py-3.5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
-        /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
+        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
+        /* @__PURE__ */ jsx("span", { children: f(get(C, "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(S, "panel", NoopComponent), {
-        close: j
+      /* @__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), {
+        close: B
       }) }) })
     ] }) }),
-    n !== null && get(S, "view") === "overlay" && /* @__PURE__ */ jsx(
+    n !== null && get(C, "view") === "overlay" && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "absolute bottom-0 left-12 right-0 top-0 z-50",
@@ -9765,13 +9777,13 @@ 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(S, "icon", null) }),
-                  /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(C, "icon", null) }),
+                  /* @__PURE__ */ jsx("span", { children: f(get(C, "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(S, "panel", NoopComponent), {
-                close: j
+              /* @__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), {
+                close: B
               }) }) })
             ]
           }
@@ -9826,38 +9838,38 @@ const RootLayout = () => {
   position: n,
   updatePosition: r
 }) => {
-  const a = useChaiFeatureFlags(), [l, i] = useState(""), [c, d] = useState(!1), [p, u] = useState({ x: 0, y: 0 }), m = 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();
+    const f = l.toLowerCase();
     return Object.fromEntries(
       Object.entries(a).filter(([b, y]) => {
-        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));
+        var C;
+        return (b == null ? void 0 : b.toLowerCase().includes(f)) || ((C = y == null ? void 0 : y.description) == null ? void 0 : C.toLowerCase().includes(f));
       })
     );
-  }, [a, l]), g = (x) => {
+  }, [a, l]), m = (f) => {
     d(!0), u({
-      x: x.clientX - n.x,
-      y: x.clientY - n.y
+      x: f.clientX - n.x,
+      y: f.clientY - n.y
     });
-  }, h = (x) => {
+  }, h = (f) => {
     if (!c) return;
-    const b = x.clientX - p.x, y = x.clientY - p.y, S = x.currentTarget, v = S.offsetWidth, B = S.offsetHeight, _ = window.innerWidth - v, j = window.innerHeight - B, C = Math.max(0, Math.min(b, _)), k = Math.max(0, Math.min(y, j));
-    r(C, k);
-  }, f = () => {
+    const b = f.clientX - p.x, y = f.clientY - p.y, C = f.currentTarget, v = C.offsetWidth, j = C.offsetHeight, _ = window.innerWidth - v, B = window.innerHeight - j, S = Math.max(0, Math.min(b, _)), k = Math.max(0, Math.min(y, B));
+    r(S, k);
+  }, x = () => {
     d(!1);
   };
   return useEffect(() => {
-    const x = () => {
+    const f = () => {
       c && d(!1);
     };
-    return window.addEventListener("mouseup", x), () => window.removeEventListener("mouseup", x);
+    return window.addEventListener("mouseup", f), () => window.removeEventListener("mouseup", f);
   }, [c]), !n || n.x < 0 || n.y < 0 ? null : /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseDown: g,
+      onMouseDown: m,
       onMouseMove: h,
-      onMouseUp: f,
+      onMouseUp: x,
       className: "fixed z-[9999999] select-none rounded-md border border-gray-300 bg-white p-3 shadow-2xl",
       style: {
         left: n.x,
@@ -9899,13 +9911,13 @@ const RootLayout = () => {
                 placeholder: "Search features...",
                 className: "w-full pl-8",
                 value: l,
-                onChange: (x) => i(x.target.value),
+                onChange: (f) => i(f.target.value),
                 autoFocus: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto py-2", children: Object.keys(m).length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(m).map(([x, b]) => /* @__PURE__ */ jsx(FeatureToggle, { featureKey: x, options: b }, x)) }) : /* @__PURE__ */ jsx("div", { className: "py-8 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto py-2", children: Object.keys(g).length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(g).map(([f, b]) => /* @__PURE__ */ jsx(FeatureToggle, { featureKey: f, options: b }, f)) }) : /* @__PURE__ */ jsx("div", { className: "py-8 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
           'No features found matching "',
           l,
           '"'
@@ -10038,52 +10050,52 @@ 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], d = n[13], p = [], u = (m) => {
+  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 {
-      m();
-    } catch (g) {
-      p.push(g);
+      g();
+    } catch (m) {
+      p.push(m);
     }
   };
   do {
     c.f && u(c.f);
-    const m = /* @__PURE__ */ new Set(), g = m.add.bind(m);
+    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(g);
-    }), a.clear(), i.forEach(g), i.clear(), l.forEach(g), l.clear(), m.forEach(u), a.size && d(o);
+      var x;
+      return (x = r.get(h)) == null ? void 0 : x.l.forEach(m);
+    }), 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], d = n[17], p = [], u = /* @__PURE__ */ new WeakSet(), m = /* @__PURE__ */ new WeakSet(), g = Array.from(l);
-  for (; g.length; ) {
-    const h = g[g.length - 1], f = i(o, h);
-    if (m.has(h)) {
-      g.pop();
+  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], x = i(o, h);
+    if (g.has(h)) {
+      m.pop();
       continue;
     }
     if (u.has(h)) {
-      a.get(h) === f.n && p.push([h, f]), m.add(h), g.pop();
+      a.get(h) === x.n && p.push([h, x]), g.add(h), m.pop();
       continue;
     }
     u.add(h);
-    for (const x of getMountedOrPendingDependents(h, f, r))
-      u.has(x) || g.push(x);
+    for (const f of getMountedOrPendingDependents(h, x, r))
+      u.has(f) || m.push(f);
   }
   for (let h = p.length - 1; h >= 0; --h) {
-    const [f, x] = p[h];
+    const [x, f] = p[h];
     let b = !1;
-    for (const y of x.d.keys())
-      if (y !== f && l.has(y)) {
+    for (const y of f.d.keys())
+      if (y !== x && l.has(y)) {
         b = !0;
         break;
       }
-    b && (c(o, f), d(o, f)), a.delete(f);
+    b && (c(o, x), d(o, x)), a.delete(x);
   }
 }, readAtomState = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[2], c = a[3], d = a[6], p = a[7], u = a[11], m = a[12], g = a[13], h = a[14], f = a[16], x = a[17], b = u(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], x = a[16], f = a[17], b = u(o, n);
   if (isAtomStateInitialized(b) && (l.has(n) && i.get(n) !== b.n || Array.from(b.d).every(
     ([k, I]) => (
       // Recursively, read the atom state of the dependency, and
@@ -10094,8 +10106,8 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     return b;
   b.d.clear();
   let y = !0;
-  function S() {
-    l.has(n) && (x(o, n), g(o), m(o));
+  function C() {
+    l.has(n) && (f(o, n), m(o), g(o));
   }
   function v(k) {
     var I;
@@ -10112,107 +10124,107 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     try {
       return returnAtomValue(A);
     } finally {
-      b.d.set(k, A.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, A), (I = l.get(k)) == null || I.t.add(n), y || S();
+      b.d.set(k, A.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, A), (I = l.get(k)) == null || I.t.add(n), y || C();
     }
   }
-  let B, _;
-  const j = {
+  let j, _;
+  const B = {
     get signal() {
-      return B || (B = new AbortController()), B.signal;
+      return j || (j = new AbortController()), j.signal;
     },
     get setSelf() {
       return !_ && isActuallyWritableAtom(n) && (_ = (...k) => {
         if (!y)
           try {
-            return f(o, n, ...k);
+            return x(o, n, ...k);
           } finally {
-            g(o), m(o);
+            m(o), g(o);
           }
       }), _;
     }
-  }, C = b.n;
+  }, S = b.n;
   try {
-    const k = p(o, n, v, j);
-    return setAtomStateValueOrPromise(o, n, k), isPromiseLike$1(k) && (registerAbortHandler(k, () => B == null ? void 0 : B.abort()), k.then(S, S)), b;
+    const k = p(o, n, v, B);
+    return setAtomStateValueOrPromise(o, n, k), isPromiseLike$1(k) && (registerAbortHandler(k, () => j == null ? void 0 : j.abort()), k.then(C, C)), b;
   } catch (k) {
     return delete b.v, b.e = k, ++b.n, b;
   } finally {
-    y = !1, C !== b.n && i.get(n) === C && (i.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
+    y = !1, S !== b.n && i.get(n) === S && (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 d = c.pop(), p = i(o, d);
     for (const u of getMountedOrPendingDependents(d, p, a)) {
-      const m = i(o, u);
-      l.set(u, m.n), c.push(u);
+      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], d = a[11], p = a[12], u = a[13], m = a[14], g = a[15], h = a[17];
-  let f = !0;
-  const x = (y) => returnAtomValue(m(o, y)), b = (y, ...S) => {
+  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 x = !0;
+  const f = (y) => returnAtomValue(g(o, y)), b = (y, ...C) => {
     var v;
-    const B = d(o, y);
+    const j = d(o, y);
     try {
       if (isSelfAtom(n, y)) {
         if (!hasInitialValue(y))
           throw new Error("atom not writable");
-        const _ = B.n, j = S[0];
-        setAtomStateValueOrPromise(o, y, j), h(o, y), _ !== B.n && (l.add(y), (v = i.c) == null || v.call(i, y), g(o, y));
+        const _ = j.n, B = C[0];
+        setAtomStateValueOrPromise(o, y, B), h(o, y), _ !== j.n && (l.add(y), (v = i.c) == null || v.call(i, y), m(o, y));
         return;
       } else
-        return writeAtomState(o, y, ...S);
+        return writeAtomState(o, y, ...C);
     } finally {
-      f || (u(o), p(o));
+      x || (u(o), p(o));
     }
   };
   try {
-    return c(o, n, x, b, ...r);
+    return c(o, n, f, b, ...r);
   } finally {
-    f = !1;
+    x = !1;
   }
 }, mountDependencies = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[3], c = a[6], d = a[11], p = a[15], u = a[18], m = a[19], g = d(o, n), h = l.get(n);
-  if (h && !isPendingPromise(g.v)) {
-    for (const [f, x] of g.d)
-      if (!h.d.has(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));
+  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 [x, f] of m.d)
+      if (!h.d.has(x)) {
+        const b = d(o, x);
+        u(o, x).t.add(n), h.d.add(x), f !== b.n && (i.add(x), (r = c.c) == null || r.call(c, x), p(o, x));
       }
-    for (const f of h.d || [])
-      if (!g.d.has(f)) {
-        h.d.delete(f);
-        const x = m(o, f);
-        x == null || x.t.delete(n);
+    for (const x of h.d || [])
+      if (!m.d.has(x)) {
+        h.d.delete(x);
+        const f = g(o, x);
+        f == null || f.t.delete(n);
       }
   }
 }, mountAtom = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[4], c = a[6], d = a[10], p = a[11], u = a[12], m = a[13], g = a[14], h = a[16], f = p(o, n);
-  let x = l.get(n);
-  if (!x) {
-    g(o, n);
-    for (const b of f.d.keys())
+  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], x = p(o, n);
+  let f = l.get(n);
+  if (!f) {
+    m(o, n);
+    for (const b of x.d.keys())
       mountAtom(o, b).t.add(n);
-    if (x = {
+    if (f = {
       l: /* @__PURE__ */ new Set(),
-      d: new Set(f.d.keys()),
+      d: new Set(x.d.keys()),
       t: /* @__PURE__ */ new Set()
-    }, l.set(n, x), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
+    }, l.set(n, f), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
       const b = () => {
         let y = !0;
-        const S = (...v) => {
+        const C = (...v) => {
           try {
             return h(o, n, ...v);
           } finally {
-            y || (m(o), u(o));
+            y || (g(o), u(o));
           }
         };
         try {
-          const v = d(o, n, S);
-          v && (x.u = () => {
+          const v = d(o, n, C);
+          v && (f.u = () => {
             y = !0;
             try {
               v();
@@ -10227,23 +10239,23 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
       i.add(b);
     }
   }
-  return x;
+  return f;
 }, unmountAtom = (o, n) => {
   var r;
   const a = getBuildingBlocks(o), l = a[1], i = a[5], c = a[6], d = a[11], p = a[19], u = d(o, n);
-  let m = l.get(n);
-  if (m && !m.l.size && !Array.from(m.t).some((g) => {
+  let g = l.get(n);
+  if (g && !g.l.size && !Array.from(g.t).some((m) => {
     var h;
-    return (h = l.get(g)) == null ? void 0 : h.d.has(n);
+    return (h = l.get(m)) == null ? void 0 : h.d.has(n);
   })) {
-    m.u && i.add(m.u), m = void 0, l.delete(n), (r = c.u) == null || r.call(c, n);
-    for (const g of u.d.keys()) {
-      const h = p(o, g);
+    g.u && i.add(g.u), g = void 0, l.delete(n), (r = c.u) == null || r.call(c, n);
+    for (const m of u.d.keys()) {
+      const h = p(o, m);
       h == null || h.t.delete(n);
     }
     return;
   }
-  return m;
+  return g;
 }, setAtomStateValueOrPromise = (o, n, r) => {
   const a = getBuildingBlocks(o)[11], l = a(o, n), i = "v" in l, c = l.v;
   if (isPromiseLike$1(r))
@@ -10358,10 +10370,10 @@ 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 = (u) => (m) => {
-      i === u && a(m);
-    }, d = (u) => (m) => {
-      i === u && l(m);
+    const c = (u) => (g) => {
+      i === u && a(g);
+    }, d = (u) => (g) => {
+      i === u && l(g);
     }, p = () => {
       try {
         const u = n();
@@ -10375,21 +10387,21 @@ const isPromiseLike = (o) => typeof (o == null ? void 0 : o.then) == "function",
 };
 function useAtomValue(o, n) {
   const { delay: r, unstable_promiseStatus: a = !React__default.use } = {}, l = useStore(), [[i, c, d], p] = useReducer(
-    (m) => {
-      const g = l.get(o);
-      return Object.is(m[0], g) && m[1] === l && m[2] === o ? m : [g, l, o];
+    (g) => {
+      const m = l.get(o);
+      return Object.is(g[0], m) && g[1] === l && g[2] === o ? g : [m, l, o];
     },
     void 0,
     () => [l.get(o), l, o]
   );
   let u = i;
   if ((c !== l || d !== o) && (p(), u = l.get(o)), useEffect(() => {
-    const m = l.sub(o, () => {
+    const g = l.sub(o, () => {
       if (a)
         try {
-          const g = l.get(o);
-          isPromiseLike(g) && attachPromiseStatus(
-            createContinuablePromise(g, () => l.get(o))
+          const m = l.get(o);
+          isPromiseLike(m) && attachPromiseStatus(
+            createContinuablePromise(m, () => l.get(o))
           );
         } catch {
         }
@@ -10399,10 +10411,10 @@ function useAtomValue(o, n) {
       }
       p();
     });
-    return p(), m;
+    return p(), g;
   }, [l, o, r, a]), useDebugValue(u), isPromiseLike(u)) {
-    const m = createContinuablePromise(u, () => l.get(o));
-    return a && attachPromiseStatus(m), use(m);
+    const g = createContinuablePromise(u, () => l.get(o));
+    return a && attachPromiseStatus(g), use(g);
   }
   return u;
 }
@@ -10476,7 +10488,7 @@ const useAutoSave = () => {
 if (typeof window > "u")
   throw new Error("@chaibuilder/sdk is only supported in the browser. Avoid using it in the server side.");
 export {
-  useDarkMode as $,
+  useCutBlockIds as $,
   AddBlocksPanel as A,
   BlockSettings as B,
   CanvasArea as C,
@@ -10493,53 +10505,57 @@ export {
   NestedPathSelector as N,
   useBlockHighlight as O,
   PERMISSIONS as P,
-  useBlocksStore as Q,
-  useBrandingOptions as R,
-  useBuilderProp as S,
+  useBlocksHtmlForAi as Q,
+  useBlocksStore as R,
+  useBrandingOptions as S,
   ThemeConfigPanel as T,
   UILibrariesPanel as U,
-  useBuilderReset as V,
-  useCanvasZoom as W,
-  useCopyBlocks as X,
-  useCopyToClipboard as Y,
-  useCurrentPage as Z,
-  useCutBlockIds as _,
+  useBuilderProp as V,
+  useBuilderReset as W,
+  useCanvasZoom as X,
+  useCopyBlocks as Y,
+  useCopyToClipboard as Z,
+  useCurrentPage as _,
   useSelectedBlockIds as a,
-  useDuplicateBlocks as a0,
-  useHighlightBlockId as a1,
-  useInlineEditing as a2,
-  useIsPageLoaded as a3,
-  useLanguages as a4,
-  useLibraryBlocks as a5,
-  usePartialBlocksStore as a6,
-  usePartialBlocksList as a7,
-  usePasteBlocks as a8,
-  usePermissions as a9,
-  usePreviewMode as aa,
-  useRemoveAllClassesForBlock as ab,
-  useRemoveBlocks as ac,
-  useRemoveClassesFromBlocks as ad,
-  useReplaceBlock as ae,
-  useResetBlockStyles as af,
-  useRightPanel as ag,
-  useSavePage as ah,
-  useSelectedBlock as ai,
-  useSelectedBlockAllClasses as aj,
-  useSelectedBlockCurrentClasses as ak,
-  useSelectedBlocksDisplayChild as al,
-  useSelectedBreakpoints as am,
-  useSelectedStylingBlocks as an,
-  useStylingBreakpoint as ao,
-  useStylingState as ap,
-  useTheme as aq,
-  useThemeOptions as ar,
-  useUndoManager as as,
-  useWrapperBlock as at,
-  useBlocksStoreUndoableActions as au,
-  useCanvasDisplayWidth as av,
-  useScreenSizeWidth as aw,
-  useSelectedLibrary as ax,
-  useSidebarActivePanel as ay,
+  useDarkMode as a0,
+  useDuplicateBlocks as a1,
+  useHighlightBlockId as a2,
+  useHtmlToBlocks as a3,
+  useI18nBlocks as a4,
+  useInlineEditing as a5,
+  useIsPageLoaded as a6,
+  useLanguages as a7,
+  useLibraryBlocks as a8,
+  usePartialBlocksStore as a9,
+  useScreenSizeWidth as aA,
+  useSelectedLibrary as aB,
+  useSidebarActivePanel as aC,
+  usePartialBlocksList as aa,
+  usePasteBlocks as ab,
+  usePermissions as ac,
+  usePreviewMode as ad,
+  useRemoveAllClassesForBlock as ae,
+  useRemoveBlocks as af,
+  useRemoveClassesFromBlocks as ag,
+  useReplaceBlock as ah,
+  useResetBlockStyles as ai,
+  useRightPanel as aj,
+  useSavePage as ak,
+  useSelectedBlock as al,
+  useSelectedBlockAllClasses as am,
+  useSelectedBlockCurrentClasses as an,
+  useSelectedBlocksDisplayChild as ao,
+  useSelectedBreakpoints as ap,
+  useSelectedStylingBlocks as aq,
+  useStreamMultipleBlocksProps as ar,
+  useStylingBreakpoint as as,
+  useStylingState as at,
+  useTheme as au,
+  useThemeOptions as av,
+  useUndoManager as aw,
+  useWrapperBlock as ax,
+  useBlocksStoreUndoableActions as ay,
+  useCanvasDisplayWidth as az,
   useUpdateBlocksProps as b,
   useUpdateBlocksPropsRealtime as c,
   usePageExternalData as d,