@chaibuilder/sdk 2.2.2 → 2.2.3

package/dist/core.js

@@ -1,24 +1,26 @@
 var G = Object.defineProperty;
 var K = (o, r, n) => r in o ? G(o, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[r] = n;
-var V = (o, r, n) => K(o, typeof r != "symbol" ? r + "" : r, n);
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+var U = (o, r, n) => K(o, typeof r != "symbol" ? r + "" : r, n);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { find, filter, flatten, map, omit, isString, has, includes, without, get, compact, isEmpty, each, isObject, memoize, noop, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, reverse, findIndex, throttle, isFunction, split, reject, take, debounce, startCase, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, capitalize, groupBy, uniq, flatMapDeep, some, sortBy, round } from "lodash-es";
+import { Resizable } from "re-resizable";
 import * as React from "react";
-import React__default, { Component, Children, useEffect, useCallback, useMemo, useRef, useState, Suspense, createElement, memo, createContext, useContext, useReducer, useDebugValue } from "react";
-import { U as DropdownMenu, V as DropdownMenuTrigger, W as DropdownMenuContent, X as DropdownMenuItem, aq as Skeleton, B as Button, e as Alert, g as AlertDescription, aa as Input$1, N as Dialog, O as DialogTrigger, P as DialogContent, ac as Popover, ay as Tooltip, az as TooltipTrigger, ad as PopoverTrigger, aA as TooltipContent, ae as PopoverContent, E as Command, G as CommandInput, H as CommandList, I as CommandEmpty, J as CommandGroup, K as CommandItem, Q as DialogHeader, S as DialogTitle, t as Badge, _ as DropdownMenuLabel, $ as DropdownMenuSeparator, Y as DropdownMenuCheckboxItem, a7 as HoverCard, a8 as HoverCardTrigger, a9 as HoverCardContent, ax as Textarea, aC as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, A as Accordion, C as Card, w as CardHeader, z as CardDescription, D as CardContent, ab as Label, x as CardFooter, af as ScrollArea, at as Tabs, au as TabsList, av as TabsTrigger, aw as TabsContent, h as AlertDialog, i as AlertDialogTrigger, j as AlertDialogContent, k as AlertDialogHeader, m as AlertDialogTitle, n as AlertDialogDescription, l as AlertDialogFooter, p as AlertDialogCancel, o as AlertDialogAction, as as Switch, q as Avatar, ah as Separator, aB as TooltipProvider, ai as Sheet, al as SheetContent, am as SheetHeader, ao as SheetTitle, ar as Toaster } from "./tooltip-DGVZAvLU.js";
-import { atom, useAtomValue as useAtomValue$1, useAtom as useAtom$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
-import { find, filter, flatten, map, omit, isString, has, includes, without, get, compact, isEmpty, each, isObject, memoize, noop, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, findIndex, throttle, isFunction, reverse, split, reject, take, debounce, startCase, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, capitalize, groupBy, uniq, flatMapDeep, some, sortBy, round } from "lodash-es";
-import { Provider as Provider$1 } from "react-wrap-balancer";
-import { atomWithStorage, splitAtom, useAtomCallback } from "jotai/utils";
+import React__default, { useEffect, useCallback, useMemo, useRef, useState, Component, Children, Suspense, createElement, memo, createContext, useContext, useReducer, useDebugValue } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { B as Button, U as DropdownMenu, V as DropdownMenuTrigger, W as DropdownMenuContent, X as DropdownMenuItem, aq as Skeleton, e as Alert, g as AlertDescription, aa as Input$1, N as Dialog, O as DialogTrigger, P as DialogContent, ac as Popover, ay as Tooltip, az as TooltipTrigger, ad as PopoverTrigger, aA as TooltipContent, ae as PopoverContent, E as Command, G as CommandInput, H as CommandList, I as CommandEmpty, J as CommandGroup, K as CommandItem, Q as DialogHeader, S as DialogTitle, t as Badge, _ as DropdownMenuLabel, $ as DropdownMenuSeparator, Y as DropdownMenuCheckboxItem, a7 as HoverCard, a8 as HoverCardTrigger, a9 as HoverCardContent, ax as Textarea, aC as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, A as Accordion, C as Card, w as CardHeader, z as CardDescription, D as CardContent, ab as Label, x as CardFooter, af as ScrollArea, at as Tabs, au as TabsList, av as TabsTrigger, aw as TabsContent, h as AlertDialog, i as AlertDialogTrigger, j as AlertDialogContent, k as AlertDialogHeader, m as AlertDialogTitle, n as AlertDialogDescription, l as AlertDialogFooter, p as AlertDialogCancel, o as AlertDialogAction, as as Switch, q as Avatar, ah as Separator, aB as TooltipProvider, ai as Sheet, al as SheetContent, am as SheetHeader, ao as SheetTitle, ar as Toaster } from "./tooltip-DGVZAvLU.js";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as Ue } from "react-i18next";
+import { useTranslation as Ve } from "react-i18next";
+import { atom, useAtomValue as useAtomValue$1, useAtom as useAtom$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
+import { ChevronRight, PlusIcon as PlusIcon$1, AlertCircle, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { splitAtom, atomWithStorage, useAtomCallback } from "jotai/utils";
 import { g as generateUUID, a as getBreakpointValue, c as cn$1 } from "./Functions-BGzDsf1z.js";
+import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, useRegisteredFonts, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
+import { BoxModelIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, InfoCircledIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, BoxIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { Provider as Provider$1 } from "react-wrap-balancer";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, InfoCircledIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, BoxIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
-import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { PlusIcon as PlusIcon$1, ChevronRight, AlertCircle, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, PencilIcon, EyeOffIcon, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import Link from "@tiptap/extension-link";
@@ -31,14 +33,13 @@ import { twMerge } from "tailwind-merge";
 import Autosuggest from "react-autosuggest";
 import { toast } from "sonner";
 import Fuse from "fuse.js";
-import { d as defaultThemeOptions, h as hexToHSL, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, c as getThemeFontsLinkMarkup, e as getThemeCustomFontFace } from "./chai-theme-helpers-FO9vdd-R.js";
+import { d as defaultThemeOptions, e as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, c as getThemeFontsLinkMarkup, f as getThemeCustomFontFace } from "./chai-theme-helpers-CfZwxV6S.js";
 import { S as STYLES_KEY, g as getSplitChaiClasses, R as ROOT_TEMP_KEY } from "./getSplitClasses-DphwgQiE.js";
 import UndoManager from "undo-manager";
 import { parse, stringify } from "himalaya";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
 import { default as ze } from "i18next";
-import { ErrorBoundary } from "react-error-boundary";
 import { useHotkeys } from "react-hotkeys-hook";
 import { motion } from "framer-motion";
 import TreeModel from "tree-model";
@@ -47,130 +48,15 @@ import twContainer from "@tailwindcss/container-queries";
 import tailwindForms from "@tailwindcss/forms";
 import tailwindTypography from "@tailwindcss/typography";
 import ReactDOM from "react-dom";
-import { Resizable } from "re-resizable";
-const readOnlyModeAtom = atom(!1);
-readOnlyModeAtom.debugLabel = "readOnlyModeAtom";
-const networkModeAtom = atom("online");
-networkModeAtom.debugLabel = "networkModeAtom";
-atom("");
-const editLayerNameAtom = atom(!1);
-editLayerNameAtom.debugLabel = "editLayerNameAtom";
-const activeLanguageAtom = atom("");
-activeLanguageAtom.debugLabel = "activeLanguageAtom";
-const primaryLanguageAtom = atom("");
-primaryLanguageAtom.debugLabel = "primaryLanguageAtom";
-const canvasIframeAtom = atom(null);
-canvasIframeAtom.debugLabel = "canvasIframeAtom";
-const activePanelAtom = atom("outline");
-activePanelAtom.debugLabel = "activePanelAtom";
-const showPredefinedBlockCategoryAtom = atom("");
-showPredefinedBlockCategoryAtom.debugLabel = "showPredefinedBlockCategoryAtom";
-const inlineEditingActiveAtom = atom("");
-inlineEditingActiveAtom.debugLabel = "inlineEditingActiveAtom";
-const draggingFlagAtom = atom(!1);
-draggingFlagAtom.debugLabel = "draggingFlagAtom";
-const treeRefAtom = atom(null);
-treeRefAtom.debugLabel = "treeRefAtom";
-const canvasSettingsAtom = atom({});
-canvasSettingsAtom.debugLabel = "canvasSettingsAtom";
-const aiAssistantActiveAtom = atom(!1);
-aiAssistantActiveAtom.debugLabel = "aiAssistantActiveAtom";
-const codeEditorOpenAtom = atom(!1);
-codeEditorOpenAtom.debugLabel = "codeEditorOpenAtom";
-const codeEditorHeightAtom = atomWithStorage("codeEditorHeight", 500);
-codeEditorHeightAtom.debugLabel = "codeEditorHeightAtom";
-const xShowBlocksAtom = atom([]);
-xShowBlocksAtom.debugLabel = "xShowBlocksAtom";
-const selectedLibraryAtom = atomWithStorage("_selectedLibrary", null);
-selectedLibraryAtom.debugLabel = "selectedLibraryAtom";
-const dataBindingActiveAtom = atom(!0);
-dataBindingActiveAtom.debugLabel = "dataBindingActiveAtom";
-class Content extends Component {
-  componentDidMount() {
-    this.props.contentDidMount();
-  }
-  componentDidUpdate() {
-    this.props.contentDidUpdate();
-  }
-  render() {
-    return Children.only(this.props.children);
-  }
-}
-let doc, win;
-typeof document < "u" && (doc = document);
-typeof window < "u" && (win = window);
-const FrameContext = React__default.createContext({ document: doc, window: win }), useFrame = () => React__default.useContext(FrameContext), { Provider: FrameContextProvider, Consumer: FrameContextConsumer } = FrameContext;
-class Frame extends Component {
-  constructor(n, a) {
-    super(n, a);
-    V(this, "setRef", (n) => {
-      this.nodeRef.current = n;
-      const { forwardedRef: a } = this.props;
-      typeof a == "function" ? a(n) : a && (a.current = n);
-    });
-    V(this, "handleLoad", () => {
-      clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
-    });
-    // In certain situations on a cold cache DOMContentLoaded never gets called
-    // fallback to an interval to check if that's the case
-    V(this, "loadCheck", () => setInterval(() => {
-      this.handleLoad();
-    }, 500));
-    this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
-  }
-  componentDidMount() {
-    this._isMounted = !0, this.getDoc() && this.nodeRef.current.contentWindow.addEventListener("DOMContentLoaded", this.handleLoad);
-  }
-  componentWillUnmount() {
-    this._isMounted = !1, this.nodeRef.current.removeEventListener("DOMContentLoaded", this.handleLoad);
-  }
-  getDoc() {
-    return this.nodeRef.current ? this.nodeRef.current.contentDocument : null;
-  }
-  getMountTarget() {
-    const n = this.getDoc();
-    return this.props.mountTarget ? n.querySelector(this.props.mountTarget) : n.body.children[0];
-  }
-  renderFrameContents() {
-    if (!this._isMounted)
-      return null;
-    const n = this.getDoc();
-    if (!n)
-      return null;
-    const a = this.props.contentDidMount, l = this.props.contentDidUpdate, i = n.defaultView || n.parentView, c = /* @__PURE__ */ jsx(Content, { contentDidMount: a, contentDidUpdate: l, children: /* @__PURE__ */ jsx(FrameContextProvider, { value: { document: n, window: i }, children: /* @__PURE__ */ jsx("div", { className: "frame-content", children: this.props.children }) }) }), d = this.getMountTarget();
-    return [ReactDOM.createPortal(this.props.head, this.getDoc().head), ReactDOM.createPortal(c, d)];
-  }
-  render() {
-    const n = {
-      ...this.props,
-      srcDoc: this.props.initialContent,
-      children: void 0
-      // The iframe isn't ready so we drop children from props here. #12, #17
-    };
-    return delete n.head, delete n.initialContent, delete n.mountTarget, delete n.contentDidMount, delete n.contentDidUpdate, delete n.forwardedRef, /* @__PURE__ */ jsx("iframe", { ...n, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
-  }
-}
-V(Frame, "defaultProps", {
-  style: {},
-  head: null,
-  children: void 0,
-  mountTarget: void 0,
-  contentDidMount: () => {
-  },
-  contentDidUpdate: () => {
-  },
-  initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
-});
-const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame, { ...o, forwardedRef: r }));
 function duplicateBlocks(o, r, n) {
   const a = filter(o, (i) => i._parent === r), l = [];
   for (let i = 0; i < a.length; i++) {
-    const c = getSlots(a[i]);
-    if (Object.keys(c).length > 0 && Object.keys(c).forEach((d) => {
-      a[i][d] = `slot:${generateUUID()}`;
+    const d = getSlots(a[i]);
+    if (Object.keys(d).length > 0 && Object.keys(d).forEach((c) => {
+      a[i][c] = `slot:${generateUUID()}`;
     }), filter(o, { _parent: a[i]._id }).length > 0) {
-      const d = generateUUID();
-      l.push({ ...a[i], oldId: a[i]._id, _id: d, _parent: n }), l.push(flatten(duplicateBlocks(o, a[i]._id, d)));
+      const c = generateUUID();
+      l.push({ ...a[i], oldId: a[i]._id, _id: c, _parent: n }), l.push(flatten(duplicateBlocks(o, a[i]._id, c)));
     } else
       l.push({
         ...a[i],
@@ -206,12 +92,12 @@ const getSlots = (o) => {
   const l = [a];
   filter(o, { _parent: r }).length > 0 && l.push(flatten(duplicateBlocks(o, r, a._id)));
   const i = flatten(l);
-  return map(i, (c) => {
-    const d = c, p = getSlots(d);
+  return map(i, (d) => {
+    const c = d, p = getSlots(c);
     return Object.keys(p).length > 0 && Object.keys(p).forEach((u) => {
       const g = find(i, { oldId: p[u].replace("slot:", "") });
-      d[u] = `slot:${g._id}`;
-    }), omit(d, ["global", "oldId"]);
+      c[u] = `slot:${g._id}`;
+    }), omit(c, ["global", "oldId"]);
   });
 }, presentBlocksAtom = atom([]);
 presentBlocksAtom.debugLabel = "presentBlocksAtom";
@@ -288,7 +174,7 @@ const useSelectedBlocksDisplayChild = () => ({
   let a = r;
   const l = [r];
   do {
-    const i = n.find(({ _id: c }) => c === (a == null ? void 0 : a._parent));
+    const i = n.find(({ _id: d }) => d === (a == null ? void 0 : a._parent));
     a = i, i && l.push(i);
   } while (a != null && a._parent);
   return l;
@@ -302,12 +188,12 @@ const useSelectedBlocksDisplayChild = () => ({
   return [o, r, n];
 }, removeNestedBlocks = (o, r) => {
   let n = [...o], a = [];
-  r.forEach((d) => {
-    const p = n.find((f) => f._id === d);
+  r.forEach((c) => {
+    const p = n.find((f) => f._id === c);
     if (!p || !p._parent) return;
     const u = p._parent, g = n.filter((f) => f._parent === u);
     if (g.length === 2) {
-      const f = g.find((m) => m._id !== d);
+      const f = g.find((m) => m._id !== c);
       if (f && f._type === "Text") {
         const m = n.find((h) => h._id === u);
         m && "content" in m && (n = n.map((h) => {
@@ -322,16 +208,16 @@ const useSelectedBlocksDisplayChild = () => ({
       }
     }
   });
-  const l = [...r, ...a], i = [], c = filter(n, (d) => includes(l, d._id) || includes(l, d._parent) ? (i.push(d._id), !1) : !0);
-  return isEmpty(i) ? c : removeNestedBlocks(c, i);
+  const l = [...r, ...a], i = [], d = filter(n, (c) => includes(l, c._id) || includes(l, c._parent) ? (i.push(c._id), !1) : !0);
+  return isEmpty(i) ? d : removeNestedBlocks(d, i);
 }, useRemoveBlocks = () => {
   const [o] = useBlocksStore(), [r, n] = useSelectedBlockIds(), { setNewBlocks: a } = useBlocksStoreUndoableActions(), { hasPermission: l } = usePermissions();
   return useCallback(
     (i) => {
-      var d;
+      var c;
       if (!l(PERMISSIONS.DELETE_BLOCK)) return;
-      const c = ((d = find(o, { _id: i[0] })) == null ? void 0 : d._parent) || null;
-      a(removeNestedBlocks(o, i)), setTimeout(() => n(c ? [c] : []), 200);
+      const d = ((c = find(o, { _id: i[0] })) == null ? void 0 : c._parent) || null;
+      a(removeNestedBlocks(o, i)), setTimeout(() => n(d ? [d] : []), 200);
     },
     [o, n, r, l]
   );
@@ -339,7 +225,7 @@ const useSelectedBlocksDisplayChild = () => ({
   null,
   // it's a convention to pass `null` for the first argument
   (o, r, { id: n, props: a }) => {
-    const l = o(pageBlocksAtomsAtom), i = find(l, (c) => o(c)._id === n);
+    const l = o(pageBlocksAtomsAtom), i = find(l, (d) => o(d)._id === n);
     if (!i)
       throw new Error(`Block with id ${n} not found`);
     return r(i, { ...o(i), ...a });
@@ -352,7 +238,7 @@ const useSelectedBlocksDisplayChild = () => ({
         throw new Error("No blocks available");
       const i = find(
         l,
-        (c) => r(c)._id === (isString(a) ? a : r(a)._id)
+        (d) => r(d)._id === (isString(a) ? a : r(a)._id)
       );
       if (!i)
         throw new Error(`Block with id ${a} not found`);
@@ -369,7 +255,7 @@ const useSelectedBlocksDisplayChild = () => ({
         return console.warn("No blocks available in splitAtoms"), null;
       const i = find(
         l,
-        (c) => r(c)._id === (isString(a) ? a : r(a)._id)
+        (d) => r(d)._id === (isString(a) ? a : r(a)._id)
       );
       return i || (console.warn(`Block with id ${a} not found`), null);
     },
@@ -402,19 +288,19 @@ function insertBlocksAtPosition(o, r, n, a) {
       });
     }
   }
-  let c = i.filter((u) => !u._parent);
-  n && (c = i.filter((u) => u._parent === n));
-  const d = !isNaN(a) || a > -1 ? Math.min(a, c.length) : c.length;
+  let d = i.filter((u) => !u._parent);
+  n && (d = i.filter((u) => u._parent === n));
+  const c = !isNaN(a) || a > -1 ? Math.min(a, d.length) : d.length;
   let p = i.length;
   for (let u = 0, g = 0; u < i.length; u++)
     if (n !== void 0 ? i[u]._parent === n : !i[u]._parent) {
-      if (g === d) {
+      if (g === c) {
         p = u;
         break;
       }
       g++;
     }
-  return !n && a !== void 0 && a >= c.length && (p = i.length), [...i.slice(0, p), ...l, ...i.slice(p)];
+  return !n && a !== void 0 && a >= d.length && (p = i.length), [...i.slice(0, p), ...l, ...i.slice(p)];
 }
 function getBlocksTree(o) {
   return convertToBlocksTree(o);
@@ -431,9 +317,9 @@ function moveNode(o, r, n, a) {
   const l = findNodeById(o, r), i = findNodeById(o, n);
   if (!l || !i) return !1;
   i.children || (i.model.children = []);
-  let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((f) => f.model._id === r);
-  l.drop(), c = Math.max(c, 0);
-  const p = (((g = l == null ? void 0 : l.model) == null ? void 0 : g._parent) || "root") === n && c <= a ? a - 1 : a;
+  let d = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((f) => f.model._id === r);
+  l.drop(), d = Math.max(d, 0);
+  const p = (((g = l == null ? void 0 : l.model) == null ? void 0 : g._parent) || "root") === n && d <= a ? a - 1 : a;
   try {
     i.addChildAtIndex(l, p);
   } catch (f) {
@@ -447,17 +333,17 @@ function handleOldParentTextBlock(o, r) {
   if (!a) return o;
   const l = o.filter((i) => i._parent === n);
   if (l.length === 2) {
-    const i = l.find((c) => c._id !== r._id);
+    const i = l.find((d) => d._id !== r._id);
     if (i && i._type === "Text" && "content" in a)
-      return o.map((d) => {
-        if (d._id === n) {
-          const p = { ...d, content: i.content };
+      return o.map((c) => {
+        if (c._id === n) {
+          const p = { ...c, content: i.content };
           return Object.keys(i).forEach((u) => {
             u.startsWith("content-") && (p[u] = i[u]);
           }), p;
         }
-        return d;
-      }).filter((d) => d._id !== i._id);
+        return c;
+      }).filter((c) => c._id !== i._id);
   }
   return o;
 }
@@ -466,16 +352,16 @@ function handleNewParentTextBlock(o, r, n) {
   const a = o.find((l) => l._id === n);
   if (!a) return o;
   if (a.content !== void 0 && a.content !== "" && !o.some((i) => i._parent === n && i._id !== r._id)) {
-    const c = {
+    const d = {
       _id: generateUUID(),
       _parent: n,
       _type: "Text",
       content: a.content
     };
     Object.keys(a).forEach((u) => {
-      u.startsWith("content-") && (c[u] = a[u]);
+      u.startsWith("content-") && (d[u] = a[u]);
     });
-    const d = o.map((u) => {
+    const c = o.map((u) => {
       if (u._id === n) {
         const g = { ...u, content: "" };
         return Object.keys(g).forEach((f) => {
@@ -483,8 +369,8 @@ function handleNewParentTextBlock(o, r, n) {
         }), g;
       }
       return u;
-    }), p = d.findIndex((u) => u._id === r._id);
-    return p !== -1 ? [...d.slice(0, p), c, ...d.slice(p)] : [c, ...d];
+    }), p = c.findIndex((u) => u._id === r._id);
+    return p !== -1 ? [...c.slice(0, p), d, ...c.slice(p)] : [d, ...c];
   }
   return o;
 }
@@ -493,11 +379,11 @@ function moveBlocksWithChildren(o, r, n, a) {
   const l = o.find((u) => u._id === r);
   if (!l) return o;
   let i = handleOldParentTextBlock(o, l);
-  const c = n || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
-  if (moveNode(p, r, c, a)) {
+  const d = n || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
+  if (moveNode(p, r, d, a)) {
     let u = flattenTree(p);
     const g = u.find((f) => f._id === r);
-    return g && (g._parent = c === "root" ? null : c), u.shift(), n && (u = handleNewParentTextBlock(u, l, n)), u;
+    return g && (g._parent = d === "root" ? null : d), u.shift(), n && (u = handleNewParentTextBlock(u, l, n)), u;
   }
   return i;
 }
@@ -508,9 +394,9 @@ const useBlocksStoreManager = () => {
       o(a), r({ type: "blocks-updated", blocks: a });
     },
     addBlocks: (a, l, i) => {
-      o((c) => {
-        const d = insertBlocksAtPosition(c, a, l, i);
-        return r({ type: "blocks-updated", blocks: d }), d;
+      o((d) => {
+        const c = insertBlocksAtPosition(d, a, l, i);
+        return r({ type: "blocks-updated", blocks: c }), c;
       });
     },
     removeBlocks: (a) => {
@@ -520,14 +406,14 @@ const useBlocksStoreManager = () => {
       });
     },
     moveBlocks: (a, l, i) => {
-      o((c) => {
-        let d = [...c];
+      o((d) => {
+        let c = [...d];
         for (let p = 0; p < a.length; p++)
-          d = moveBlocksWithChildren(d, a[p], l, i);
+          c = moveBlocksWithChildren(c, a[p], l, i);
         return each(a, (p) => {
-          const u = find(d, (g) => g._id === p);
+          const u = find(c, (g) => g._id === p);
           u && n({ id: p, props: { _parent: u._parent || null } });
-        }), r({ type: "blocks-updated", blocks: d }), d;
+        }), r({ type: "blocks-updated", blocks: c }), c;
       });
     },
     updateBlocksProps: (a) => {
@@ -632,19 +518,16 @@ const useBrandingOptions = () => {
     [o]
   ) };
 }, getDefaultThemeValues = (o = defaultThemeOptions) => {
-  const r = {};
+  const r = defaultThemeValues;
   return o.fontFamily && (r.fontFamily = Object.entries(o.fontFamily).reduce(
     (n, [a, l]) => ({
       ...n,
       [a.replace("font-", "")]: l
     }),
-    {}
-  )), r.borderRadius = o.borderRadius, o.colors && (r.colors = o.colors.reduce(
-    (n, a) => (Object.entries(a.items).forEach(([l, i]) => {
-      n[l] = i;
-    }), n),
-    {}
-  )), r;
+    r.fontFamily
+  )), r.borderRadius = o.borderRadius, o.colors && (r.colors = o.colors.reduce((n, a) => (Object.entries(a.items).forEach(([l, i]) => {
+    n[l] = i;
+  }), n), r.colors)), r;
 }, chaiThemeValuesAtom = atom({}), useTheme = () => {
   const o = useThemeOptions(), r = useMemo(() => getDefaultThemeValues(o), [o]), n = useBuilderProp("theme", {}), [a, l] = useAtom$1(chaiThemeValuesAtom);
   return [useMemo(
@@ -658,10 +541,10 @@ const useBrandingOptions = () => {
 builderSaveStateAtom.debugLabel = "builderSaveStateAtom";
 const useSavePage = () => {
   const [o, r] = useAtom$1(builderSaveStateAtom), n = useBuilderProp("onSave", async (p) => {
-  }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: c } = usePermissions();
+  }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: d } = usePermissions();
   return { savePage: useThrottledCallback(
     async (p = !1) => {
-      if (!c("save_page"))
+      if (!d("save_page"))
         return;
       r("SAVING"), a("SAVING");
       const u = l();
@@ -699,12 +582,12 @@ const useUndoManager = () => {
     addBlocks: a,
     removeBlocks: l,
     moveBlocks: i,
-    updateBlocksProps: c
+    updateBlocksProps: d
   } = useBlocksStoreManager();
   return {
     moveBlocks: (x, k, b) => {
       const S = map(x, (A) => {
-        const C = r.find((L) => L._id === A)._parent || null, _ = r.filter((L) => C ? L._parent === C : !L._parent).map((L) => L._id).indexOf(A);
+        const C = r.find((I) => I._id === A)._parent || null, _ = r.filter((I) => C ? I._parent === C : !I._parent).map((I) => I._id).indexOf(A);
         return { _id: A, oldParent: C, oldPosition: _ };
       }), w = S.find(({ _id: A }) => A === x[0]);
       w && w.oldParent === k && w.oldPosition === b || (i(x, k, b), o({
@@ -739,13 +622,13 @@ const useUndoManager = () => {
           return each(w, (B) => C[B] = E[B]), C;
         });
       }
-      c(map(x, (w) => ({ _id: w, ...k }))), o({
-        undo: () => c(S),
-        redo: () => c(map(x, (w) => ({ _id: w, ...k })))
+      d(map(x, (w) => ({ _id: w, ...k }))), o({
+        undo: () => d(S),
+        redo: () => d(map(x, (w) => ({ _id: w, ...k })))
       });
     },
     updateBlocksRuntime: (x, k) => {
-      c(map(x, (b) => ({ _id: b, ...k })));
+      d(map(x, (b) => ({ _id: b, ...k })));
     },
     setNewBlocks: (x) => {
       n(x), o({
@@ -758,36 +641,36 @@ const useUndoManager = () => {
       k = map(x, (b) => {
         const S = keys(b), w = r.find((E) => E._id === b._id), A = {};
         return each(S, (E) => A[E] = w[E]), A;
-      }), c(x), o({
-        undo: () => c(k),
-        redo: () => c(x)
+      }), d(x), o({
+        undo: () => d(k),
+        redo: () => d(x)
       });
     }
   };
 }, libraryBlocksAtom = atom(
   {}
 ), useLibraryBlocks = (o) => {
-  const [r, n] = useAtom$1(libraryBlocksAtom), a = useBuilderProp("getUILibraryBlocks", noop), l = get(r, `${o == null ? void 0 : o.id}.blocks`, null), i = get(r, `${o == null ? void 0 : o.id}.loading`, "idle"), c = useRef("idle");
+  const [r, n] = useAtom$1(libraryBlocksAtom), a = useBuilderProp("getUILibraryBlocks", noop), l = get(r, `${o == null ? void 0 : o.id}.blocks`, null), i = get(r, `${o == null ? void 0 : o.id}.loading`, "idle"), d = useRef("idle");
   useEffect(() => {
     (async () => {
-      if (!(i === "complete" || c.current === "loading")) {
-        c.current = "loading", n((p) => ({ ...p, [o == null ? void 0 : o.id]: { loading: "loading", blocks: [] } }));
+      if (!(i === "complete" || d.current === "loading")) {
+        d.current = "loading", n((p) => ({ ...p, [o == null ? void 0 : o.id]: { loading: "loading", blocks: [] } }));
         try {
           const p = await a(o);
-          c.current = "idle", n((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: p || [] } }));
+          d.current = "idle", n((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: p || [] } }));
         } catch {
-          c.current = "idle", n((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: [] } }));
+          d.current = "idle", n((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: [] } }));
         }
       }
     })();
-  }, [o, l, i, c, n, a]);
-  const d = useCallback(
+  }, [o, l, i, d, n, a]);
+  const c = useCallback(
     (p) => {
       n((u) => ({ ...u, [p]: { loading: "idle", blocks: [] } }));
     },
     [n]
   );
-  return { data: l || [], isLoading: i === "loading", resetLibrary: d };
+  return { data: l || [], isLoading: i === "loading", resetLibrary: c };
 }, canAcceptChildBlock = (o, r) => {
   if (!o) return !0;
   const n = getRegisteredChaiBlock(o);
@@ -819,7 +702,7 @@ import.meta.vitest && describe("canDropBlock Function", () => {
 });
 const useAddBlock = () => {
   const [o] = useBlocksStore(), [, r] = useSelectedBlockIds(), { addBlocks: n } = useBlocksStoreUndoableActions(), a = useCallback(
-    (i, c, d) => {
+    (i, d, c) => {
       var m;
       for (let h = 0; h < i.length; h++) {
         const { _id: x } = i[h];
@@ -830,15 +713,15 @@ const useAddBlock = () => {
       }
       const p = 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), n(i, g, d), r([(m = first(i)) == null ? void 0 : m._id]), first(i);
+      return d && (u = find(o, { _id: d }), i[0]._parent = d, g = d), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), n(i, g, c), r([(m = first(i)) == null ? void 0 : m._id]), first(i);
     },
     [n, o, r]
   );
   return { addCoreBlock: useCallback(
-    (i, c, d) => {
+    (i, d, c) => {
       if (has(i, "blocks")) {
         const k = i.blocks;
-        return a(k, c, d);
+        return a(k, d, c);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -848,7 +731,7 @@ const useAddBlock = () => {
         ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
       let f, m;
-      return c && (f = find(o, { _id: c }), g._parent = c, m = c), !canAcceptChildBlock(f == null ? void 0 : f._type, g._type) && f && (g._parent = f._parent, m = f._parent), n([g], m, d), r([g._id]), g;
+      return d && (f = find(o, { _id: d }), g._parent = d, m = d), !canAcceptChildBlock(f == null ? void 0 : f._type, g._type) && f && (g._parent = f._parent, m = f._parent), n([g], m, c), r([g._id]), g;
     },
     [n, a, o, r]
   ), addPredefinedBlock: a };
@@ -1889,15 +1772,15 @@ const useAddBlock = () => {
   const o = useThemeOptions(), r = useMemo(() => {
     if (o.colors) {
       const l = flattenDeep(map(o.colors, ({ items: i }) => keys(i)));
-      each(CLASSES_LIST, (i, c) => {
-        set(CLASSES_LIST, `${c}.regExp`, i.regExp.replace("__THEME_COLORS_REGEXP__", l.join("|")));
+      each(CLASSES_LIST, (i, d) => {
+        set(CLASSES_LIST, `${d}.regExp`, i.regExp.replace("__THEME_COLORS_REGEXP__", l.join("|")));
       });
     }
     return CLASSES_LIST;
   }, [o]), n = useCallback(
     (l, i) => {
-      const c = get(r, `${l}.regExp`, "");
-      return i.match(new RegExp(c));
+      const d = get(r, `${l}.regExp`, "");
+      return i.match(new RegExp(d));
     },
     [r]
   ), a = useCallback(
@@ -1963,9 +1846,9 @@ function removeDuplicateClasses(o) {
   let a = o;
   if (n.length === 1) return n[0].fullCls;
   for (const l of n) {
-    const i = l.property, c = r.indexOf(l.mq);
-    for (let d = c + 1; d < r.length; d++) {
-      const p = r[d], u = n.find((g) => g.property === i && g.mq === p);
+    const i = l.property, d = r.indexOf(l.mq);
+    for (let c = d + 1; c < r.length; c++) {
+      const p = r[c], u = n.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)
@@ -1982,15 +1865,15 @@ selectedStylingBlocksAtom.debugLabel = "selectedStylingBlocksAtom";
 const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), addClassesToBlocksAtom = atom(null, (o, r, { blockIds: n, newClasses: a }) => {
   const l = filter(
     o(pageBlocksAtomsAtom),
-    (c) => (
+    (d) => (
       // @ts-ignore
-      n.includes(o(c)._id)
+      n.includes(o(d)._id)
     )
   ), i = first(o(selectedStylingBlocksAtom));
-  return map(l, (c) => {
-    const d = o(c), p = get(d, i.prop, `${STYLES_KEY},`), { classes: u } = getSplitChaiClasses(p);
+  return map(l, (d) => {
+    const c = o(d), p = get(c, i.prop, `${STYLES_KEY},`), { classes: u } = getSplitChaiClasses(p);
     return {
-      ids: [d._id],
+      ids: [c._id],
       props: {
         [i.prop]: `${STYLES_KEY},${orderClassesByBreakpoint(
           removeDuplicateClasses(twMerge(u, a))
@@ -2002,12 +1885,12 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
   const o = useSetAtom$1(addClassesToBlocksAtom), { updateBlocks: r, updateBlocksRuntime: n } = useBlocksStoreUndoableActions();
   return useCallback(
     (a, l, i = !1) => {
-      const c = o({ blockIds: a, newClasses: l });
+      const d = o({ blockIds: a, newClasses: l });
       if (!i) {
-        n(a, c[0].props);
+        n(a, d[0].props);
         return;
       }
-      r(a, c[0].props);
+      r(a, d[0].props);
     },
     [o, r, n]
   );
@@ -2217,16 +2100,16 @@ const useLanguages = () => {
   const l = { ...o };
   return forEach(keys(o), (i) => {
     if (includes(get(a, "i18nProps", []), i) && !isEmpty(r)) {
-      const c = `${i}-${r}`;
-      set(l, c, o[i]), unset(l, i);
+      const d = `${i}-${r}`;
+      set(l, d, o[i]), unset(l, i);
     }
   }), l;
 }, useUpdateBlocksProps = () => {
   const { updateBlocks: o } = useBlocksStoreUndoableActions(), { selectedLang: r } = useLanguages(), n = useSelectedBlock();
   return useCallback(
     (a, l, i) => {
-      const c = updatePropsForLanguage(l, r, n);
-      o(a, c, i);
+      const d = updatePropsForLanguage(l, r, n);
+      o(a, d, i);
     },
     [r, n, o]
   );
@@ -2244,13 +2127,13 @@ const useLanguages = () => {
     async (r, n, a = 30) => {
       const l = keys(omit(n, ["_id"]));
       for (const i of l) {
-        const c = n[i];
-        if (isString(c)) {
-          const d = chunk(c.split(""), 12);
+        const d = n[i];
+        if (isString(d)) {
+          const c = chunk(d.split(""), 12);
           let p = "";
           o([r], { [i]: "" });
-          for (let u = 0; u < d.length; u++)
-            p += d[u].join(""), o([r], { [i]: p }), await new Promise((g) => setTimeout(g, a));
+          for (let u = 0; u < c.length; u++)
+            p += c[u].join(""), o([r], { [i]: p }), await new Promise((g) => setTimeout(g, a));
         }
       }
     },
@@ -2288,13 +2171,13 @@ const getBlockWithChildren = (o, r) => {
   return n = flattenDeep([...n, ...getChildBlocks(r, o, n)]), n;
 }, pickOnlyAIProps = (o, r) => compact(
   o.map((n) => {
-    const a = ["_id", "_type", "_parent"], l = pick(n, a), i = getRegisteredChaiBlock(n._type), c = {}, d = get(i, "aiProps", []);
+    const a = ["_id", "_type", "_parent"], l = pick(n, a), i = getRegisteredChaiBlock(n._type), d = {}, c = get(i, "aiProps", []);
     for (const p in n)
-      a.includes(p) || d.includes(p) && (c[p] = get(n, `${p}-${r}`, n[p]));
-    return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
+      a.includes(p) || c.includes(p) && (d[p] = get(n, `${p}-${r}`, n[p]));
+    return isEmpty(d) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...d });
   })
 ), addLangToPrompt = (o, r, n) => !r || n !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, r, r)} language.`, askAiProcessingAtom = atom(!1), useAskAi = () => {
-  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, f = (m, h) => {
+  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), d = useUpdateMultipleBlocksProps(), [c] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, f = (m, h) => {
     const x = cloneDeep(h.find((k) => k._id === m));
     for (const k in x) {
       const b = x[k];
@@ -2312,7 +2195,7 @@ const getBlockWithChildren = (o, r) => {
         if (l) {
           r(!0), a(null);
           try {
-            const b = p === u ? "" : p, S = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [f(h, d)], w = await l(m, addLangToPrompt(x, g, m), S, b), { blocks: A, error: E } = w;
+            const b = p === u ? "" : p, S = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, c)), p) : [f(h, c)], w = await l(m, addLangToPrompt(x, g, m), S, b), { blocks: A, error: E } = w;
             if (E) {
               a(E);
               return;
@@ -2323,7 +2206,7 @@ const getBlockWithChildren = (o, r) => {
                   _ !== "_id" && (B[_] = `${STYLES_KEY},${B[_]}`);
                 return B;
               });
-              c(C);
+              d(C);
             } else
               i(A);
             k && k(w);
@@ -2339,9 +2222,9 @@ const getBlockWithChildren = (o, r) => {
         r,
         p,
         u,
-        d,
-        g,
         c,
+        g,
+        d,
         i
       ]
     ),
@@ -2356,7 +2239,43 @@ const getBlockWithChildren = (o, r) => {
     },
     [o]
   );
-};
+}, readOnlyModeAtom = atom(!1);
+readOnlyModeAtom.debugLabel = "readOnlyModeAtom";
+const networkModeAtom = atom("online");
+networkModeAtom.debugLabel = "networkModeAtom";
+atom("");
+const editLayerNameAtom = atom(!1);
+editLayerNameAtom.debugLabel = "editLayerNameAtom";
+const activeLanguageAtom = atom("");
+activeLanguageAtom.debugLabel = "activeLanguageAtom";
+const primaryLanguageAtom = atom("");
+primaryLanguageAtom.debugLabel = "primaryLanguageAtom";
+const canvasIframeAtom = atom(null);
+canvasIframeAtom.debugLabel = "canvasIframeAtom";
+const activePanelAtom = atom("outline");
+activePanelAtom.debugLabel = "activePanelAtom";
+const showPredefinedBlockCategoryAtom = atom("");
+showPredefinedBlockCategoryAtom.debugLabel = "showPredefinedBlockCategoryAtom";
+const inlineEditingActiveAtom = atom("");
+inlineEditingActiveAtom.debugLabel = "inlineEditingActiveAtom";
+const draggingFlagAtom = atom(!1);
+draggingFlagAtom.debugLabel = "draggingFlagAtom";
+const treeRefAtom = atom(null);
+treeRefAtom.debugLabel = "treeRefAtom";
+const canvasSettingsAtom = atom({});
+canvasSettingsAtom.debugLabel = "canvasSettingsAtom";
+const aiAssistantActiveAtom = atom(!1);
+aiAssistantActiveAtom.debugLabel = "aiAssistantActiveAtom";
+const codeEditorOpenAtom = atom(!1);
+codeEditorOpenAtom.debugLabel = "codeEditorOpenAtom";
+const codeEditorHeightAtom = atomWithStorage("codeEditorHeight", 500);
+codeEditorHeightAtom.debugLabel = "codeEditorHeightAtom";
+const xShowBlocksAtom = atom([]);
+xShowBlocksAtom.debugLabel = "xShowBlocksAtom";
+const selectedLibraryAtom = atomWithStorage("_selectedLibrary", null);
+selectedLibraryAtom.debugLabel = "selectedLibraryAtom";
+const dataBindingActiveAtom = atom(!0);
+dataBindingActiveAtom.debugLabel = "dataBindingActiveAtom";
 let lastHighlighted = null;
 const useBlockHighlight = () => {
   const [o] = useAtom$1(canvasIframeAtom), r = useMemo(() => {
@@ -2382,18 +2301,18 @@ const useBlockHighlight = () => {
   const [o, r] = useAtom$1(partialBlocksStoreAtom), n = useCallback((l) => get(o, l, []), [o]), a = useCallback(() => r({}), [r]);
   return { getPartailBlocks: n, reset: a };
 }, useWatchPartailBlocks = () => {
-  const [o] = useBlocksStore(), [r, n] = useAtom$1(partialBlocksStoreAtom), [a, l] = useAtom$1(partialBlocksLoadingStateAtom), i = useBuilderProp("getPartialBlockBlocks", async (d) => []), c = useMemo(() => o.filter((d) => d._type === "PartialBlock" || d._type === "GlobalBlock").map((d) => get(d, "partialBlockId", get(d, "globalBlock", ""))), [o]);
+  const [o] = useBlocksStore(), [r, n] = useAtom$1(partialBlocksStoreAtom), [a, l] = useAtom$1(partialBlocksLoadingStateAtom), i = useBuilderProp("getPartialBlockBlocks", async (c) => []), d = useMemo(() => o.filter((c) => c._type === "PartialBlock" || c._type === "GlobalBlock").map((c) => get(c, "partialBlockId", get(c, "globalBlock", ""))), [o]);
   useEffect(() => {
-    forEach(c, (d) => {
-      has(r, d) || get(a, `${d}.loading`, !1) || (l((p) => ({ ...p, [d]: { loading: !0, error: null } })), i(d).then((p) => {
-        n((u) => ({ ...u, [d]: p })), l((u) => ({
+    forEach(d, (c) => {
+      has(r, c) || get(a, `${c}.loading`, !1) || (l((p) => ({ ...p, [c]: { loading: !0, error: null } })), i(c).then((p) => {
+        n((u) => ({ ...u, [c]: p })), l((u) => ({
           ...u,
-          [d]: { loading: !1, error: null }
+          [c]: { loading: !1, error: null }
         }));
       }).catch((p) => {
         l((u) => ({
           ...u,
-          [d]: { loading: !1, error: p.message }
+          [c]: { loading: !1, error: p.message }
         }));
       }));
     });
@@ -2403,25 +2322,25 @@ const useBlockHighlight = () => {
     a,
     n,
     l,
-    c
+    d
   ]);
 }, partialBlocksListAtom = atom({}), usePartialBlocksList = () => {
-  const [o, r] = useState(!1), [n, a] = useState(null), [l, i] = useAtom$1(partialBlocksListAtom), c = useBuilderProp("getPartialBlocks", async () => []), d = useCallback(async () => {
+  const [o, r] = useState(!1), [n, a] = useState(null), [l, i] = useAtom$1(partialBlocksListAtom), d = useBuilderProp("getPartialBlocks", async () => []), c = useCallback(async () => {
     r(!0), a(null);
     try {
-      const p = await c();
+      const p = await d();
       i(p), r(!1);
     } catch (p) {
       a(p instanceof Error ? p.message : "Failed to fetch partial blocks"), r(!1);
     }
-  }, [c, i]);
+  }, [d, i]);
   return useEffect(() => {
-    d();
-  }, []), { data: l, isLoading: o, refetch: d, error: n };
+    c();
+  }, []), { data: l, isLoading: o, refetch: c, error: n };
 }, useBuilderReset = () => {
-  const { clear: o } = useUndoManager(), [, r] = useSelectedBlockIds(), { clearHighlight: n } = useBlockHighlight(), [, a] = useSelectedStylingBlocks(), [, l] = useAtom$1(aiAssistantActiveAtom), { reset: i } = usePartailBlocksStore(), { setSaveState: c } = useSavePage();
+  const { clear: o } = useUndoManager(), [, r] = useSelectedBlockIds(), { clearHighlight: n } = useBlockHighlight(), [, a] = useSelectedStylingBlocks(), [, l] = useAtom$1(aiAssistantActiveAtom), { reset: i } = usePartailBlocksStore(), { setSaveState: d } = useSavePage();
   return () => {
-    r([]), a([]), n(), o(), l(!1), i(), c("SAVED");
+    r([]), a([]), n(), o(), l(!1), i(), d("SAVED");
   };
 }, canvasZoomAtom = atomWithStorage("canvasZoom", 100), useCanvasZoom = () => useAtom$1(canvasZoomAtom), codeEditorAtom = atom(null), useCodeEditor = () => useAtom$1(codeEditorAtom), cutBlockIdsAtom = atom([]), useCutBlockIds = () => {
   const [o, r] = useAtom$1(cutBlockIdsAtom), n = useSetAtom$1(copiedBlockIdsAtom), a = useCallback(
@@ -2436,12 +2355,12 @@ const useBlockHighlight = () => {
     async (i) => {
       try {
         n(i), a([]);
-        const c = {
-          _chai_copied_blocks: i.flatMap((d) => getDuplicatedBlocks(o, d, null))
+        const d = {
+          _chai_copied_blocks: i.flatMap((c) => getDuplicatedBlocks(o, c, null))
         };
-        await navigator.clipboard.writeText(JSON.stringify(c));
-      } catch (c) {
-        console.error("Failed to copy blocks to clipboard:", c);
+        await navigator.clipboard.writeText(JSON.stringify(d));
+      } catch (d) {
+        console.error("Failed to copy blocks to clipboard:", d);
       }
     },
     [n, a, o]
@@ -2466,13 +2385,13 @@ const useBlockHighlight = () => {
   return useCallback(
     (a, l = null) => {
       const i = [];
-      each(a, (c) => {
-        const d = o.find((m) => m._id === c);
-        l ? l === "root" && (l = null) : l = d._parent;
+      each(a, (d) => {
+        const c = o.find((m) => m._id === d);
+        l ? l === "root" && (l = null) : l = c._parent;
         const g = filter(
           o,
           (m) => isString(l) ? m._parent === l : !m._parent
-        ).indexOf(d) + 1, f = getDuplicatedBlocks(o, c, l);
+        ).indexOf(c) + 1, f = getDuplicatedBlocks(o, d, l);
         n(f, l, g), i.push(get(f, "0._id", ""));
       }), r(i);
     },
@@ -2490,9 +2409,9 @@ const useBlockHighlight = () => {
   const [o] = useBlocksStore();
   return (r, n) => {
     var i;
-    const a = ((i = find(o, { _id: n })) == null ? void 0 : i._type) || null, l = first(r.map((c) => {
-      var d;
-      return (d = find(o, { _id: c })) == null ? void 0 : d._type;
+    const a = ((i = find(o, { _id: n })) == null ? void 0 : i._type) || null, l = first(r.map((d) => {
+      var c;
+      return (c = find(o, { _id: d })) == null ? void 0 : c._type;
     }));
     return canAcceptChildBlock(a, l);
   };
@@ -2502,10 +2421,10 @@ const useBlockHighlight = () => {
     (n, a) => {
       const l = Array.isArray(a) ? a[0] : a;
       if (a === "root") {
-        const i = o == null ? void 0 : o.filter((c) => !c._parent);
+        const i = o == null ? void 0 : o.filter((d) => !d._parent);
         r(n, null, (i == null ? void 0 : i.length) || 0);
       } else {
-        const i = o == null ? void 0 : o.filter((c) => c._parent === l);
+        const i = o == null ? void 0 : o.filter((d) => d._parent === l);
         r(n, l, (i == null ? void 0 : i.length) || 0);
       }
     },
@@ -2515,13 +2434,13 @@ const useBlockHighlight = () => {
   const [o, r] = useCutBlockIds(), n = useMoveCutBlocks(), a = useCanPaste(), { addPredefinedBlock: l } = useAddBlock();
   return {
     canPaste: useCallback(
-      async (c) => {
+      async (d) => {
         if (o.length > 0)
-          return a(o, c);
+          return a(o, d);
         try {
-          const d = await navigator.clipboard.readText();
-          if (d) {
-            const p = JSON.parse(d);
+          const c = await navigator.clipboard.readText();
+          if (c) {
+            const p = JSON.parse(c);
             return has(p, "_chai_copied_blocks");
           }
         } catch {
@@ -2532,17 +2451,17 @@ const useBlockHighlight = () => {
       [a, o]
     ),
     pasteBlocks: useCallback(
-      async (c) => {
-        const d = Array.isArray(c) ? c[0] : c;
+      async (d) => {
+        const c = Array.isArray(d) ? d[0] : d;
         if (!isEmpty(o)) {
-          n(o, c), r([]), await navigator.clipboard.writeText("");
+          n(o, d), r([]), await navigator.clipboard.writeText("");
           return;
         }
         try {
           const p = await navigator.clipboard.readText();
           if (p) {
             const u = JSON.parse(p);
-            has(u, "_chai_copied_blocks") ? l(u._chai_copied_blocks, d === "root" ? null : d) : toast.error("Nothing to paste");
+            has(u, "_chai_copied_blocks") ? l(u._chai_copied_blocks, c === "root" ? null : c) : toast.error("Nothing to paste");
           } else
             toast.error("Nothing to paste");
         } catch {
@@ -2558,14 +2477,14 @@ const useBlockHighlight = () => {
 }, removeClassFromBlocksAtom = atom(null, (o, r, { blockIds: n, fullClasses: a }) => {
   const l = first(o(selectedStylingBlocksAtom)), i = filter(
     o(pageBlocksAtomsAtom),
-    (c) => (
+    (d) => (
       // @ts-ignore
-      n.includes(o(c)._id)
+      n.includes(o(d)._id)
     )
   );
-  return map(i, (c) => {
-    const d = o(c), p = a;
-    let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
+  return map(i, (d) => {
+    const c = o(d), p = a;
+    let { classes: u, baseClasses: g } = getSplitChaiClasses(get(c, l.prop, `${STYLES_KEY},`));
     return each(p, (f) => {
       const m = f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       u = u.replace(h, " ").replace(/\s+/g, " ").trim();
@@ -2575,7 +2494,7 @@ const useBlockHighlight = () => {
       const m = f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       g = g.replace(h, " ").replace(/\s+/g, " ").trim();
     }), {
-      ids: [d._id],
+      ids: [c._id],
       props: {
         [l.prop]: `${STYLES_KEY}${g},${u}`
       }
@@ -2585,8 +2504,8 @@ const useBlockHighlight = () => {
   const { updateBlocks: o, updateBlocksRuntime: r } = useBlocksStoreUndoableActions(), n = useSetAtom$1(removeClassFromBlocksAtom);
   return useCallback(
     (a, l, i = !1) => {
-      const c = n({ blockIds: a, fullClasses: l });
-      i ? o(a, c[0].props) : r(a, c[0].props);
+      const d = n({ blockIds: a, fullClasses: l });
+      i ? o(a, d[0].props) : r(a, d[0].props);
     },
     [n]
   );
@@ -2609,7 +2528,7 @@ const useBlockHighlight = () => {
 }), useSelectedBlockAllClasses = () => useAtomValue$1(selectedBlockAllClassesAtom), MQ = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4, "2xl": 5 }, selectedBlockCurrentClassesAtom = atom((o) => {
   const r = o(canvasBreakpointAtom), n = o(styleStateAtom), a = o(darkModeAtom), l = getQueries(r);
   let i = filter(o(selectedBlockAllClassesAtom), { mod: n });
-  return startsWith(n, "_") || (i = filter(i, (c) => l.includes(c.mq))), i = i.sort((c, d) => MQ[c.mq] - MQ[d.mq]), a || (i = filter(i, { dark: !1 })), i;
+  return startsWith(n, "_") || (i = filter(i, (d) => l.includes(d.mq))), i = i.sort((d, c) => MQ[d.mq] - MQ[c.mq]), a || (i = filter(i, { dark: !1 })), i;
 }), getQueries = (o) => {
   let r = [];
   switch (o) {
@@ -2640,34 +2559,143 @@ const useBlockHighlight = () => {
   const [o, r] = useAtom$1(selectedBreakpointsAtom);
   return [o, r];
 }, useStylingState = () => useAtom$1(styleStateAtom), useUILibraryBlocks = () => ({ data: useBuilderProp("uiLibraries", []), isLoading: !1 }), wrapperBlockAtom = atom((o) => {
-  var c;
+  var d;
   const r = o(presentBlocksAtom), n = o(selectedBlockIdsAtom), a = n.length === 1 ? n[0] : null;
   if (!a) return null;
   const l = find(r, { _id: a });
   if (!l) return null;
   let i = l._parent;
   for (; i; ) {
-    const d = find(r, { _id: i });
-    if (!d) return null;
-    if ((c = getRegisteredChaiBlock(d._type)) != null && c.wrapper)
-      return d;
-    i = d._parent;
+    const c = find(r, { _id: i });
+    if (!c) return null;
+    if ((d = getRegisteredChaiBlock(c._type)) != null && d.wrapper)
+      return c;
+    i = c._parent;
   }
   return null;
 });
 wrapperBlockAtom.debugLabel = "wrapperBlockAtom";
 const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useSelectedLibrary = () => useAtom$1(selectedLibraryAtom), sidebarActivePanelAtom = atom("outline");
 sidebarActivePanelAtom.debugLabel = "sidebarActivePanelAtom";
-const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom);
+const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), FallbackError = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
+  /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
+  /* @__PURE__ */ jsx("p", { children: "Please try again." })
+] }) }), ICON_CLASS = "h-3 w-3 stroke-[2]", TypeIcon = (o) => {
+  const r = useRegisteredChaiBlocks(), n = get(r, [o == null ? void 0 : o.type, "icon"]);
+  return n ? React__default.createElement(n, { className: ICON_CLASS }) : /* @__PURE__ */ jsx(BoxModelIcon, { className: ICON_CLASS });
+}, Breadcrumb = () => {
+  const o = useSelectedBlockHierarchy(), [, r] = useSelectedBlockIds(), { highlightBlock: n } = useBlockHighlight();
+  return /* @__PURE__ */ jsx("div", { className: "-mx-2 border-t border-border bg-background px-2 py-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => r([]), variant: "ghost", className: "h-fit p-1 text-xs font-normal", children: "Body" }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
+    ] }),
+    reverse(o).map((a, l) => /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onMouseEnter: () => {
+            n(a == null ? void 0 : a._id);
+          },
+          onClick: () => r([a == null ? void 0 : a._id]),
+          variant: "ghost",
+          className: "h-fit gap-x-1 p-1 text-xs font-normal",
+          children: [
+            /* @__PURE__ */ jsx(TypeIcon, { type: a == null ? void 0 : a._type }),
+            a._name || a._type
+          ]
+        }
+      ),
+      l !== o.length - 1 && /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
+    ] }, l))
+  ] }) });
+};
+class Content extends Component {
+  componentDidMount() {
+    this.props.contentDidMount();
+  }
+  componentDidUpdate() {
+    this.props.contentDidUpdate();
+  }
+  render() {
+    return Children.only(this.props.children);
+  }
+}
+let doc, win;
+typeof document < "u" && (doc = document);
+typeof window < "u" && (win = window);
+const FrameContext = React__default.createContext({ document: doc, window: win }), useFrame = () => React__default.useContext(FrameContext), { Provider: FrameContextProvider, Consumer: FrameContextConsumer } = FrameContext;
+class Frame extends Component {
+  constructor(n, a) {
+    super(n, a);
+    U(this, "setRef", (n) => {
+      this.nodeRef.current = n;
+      const { forwardedRef: a } = this.props;
+      typeof a == "function" ? a(n) : a && (a.current = n);
+    });
+    U(this, "handleLoad", () => {
+      clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
+    });
+    // In certain situations on a cold cache DOMContentLoaded never gets called
+    // fallback to an interval to check if that's the case
+    U(this, "loadCheck", () => setInterval(() => {
+      this.handleLoad();
+    }, 500));
+    this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
+  }
+  componentDidMount() {
+    this._isMounted = !0, this.getDoc() && this.nodeRef.current.contentWindow.addEventListener("DOMContentLoaded", this.handleLoad);
+  }
+  componentWillUnmount() {
+    this._isMounted = !1, this.nodeRef.current.removeEventListener("DOMContentLoaded", this.handleLoad);
+  }
+  getDoc() {
+    return this.nodeRef.current ? this.nodeRef.current.contentDocument : null;
+  }
+  getMountTarget() {
+    const n = this.getDoc();
+    return this.props.mountTarget ? n.querySelector(this.props.mountTarget) : n.body.children[0];
+  }
+  renderFrameContents() {
+    if (!this._isMounted)
+      return null;
+    const n = this.getDoc();
+    if (!n)
+      return null;
+    const a = this.props.contentDidMount, l = this.props.contentDidUpdate, i = n.defaultView || n.parentView, d = /* @__PURE__ */ jsx(Content, { contentDidMount: a, contentDidUpdate: l, children: /* @__PURE__ */ jsx(FrameContextProvider, { value: { document: n, window: i }, children: /* @__PURE__ */ jsx("div", { className: "frame-content", children: this.props.children }) }) }), c = this.getMountTarget();
+    return [ReactDOM.createPortal(this.props.head, this.getDoc().head), ReactDOM.createPortal(d, c)];
+  }
+  render() {
+    const n = {
+      ...this.props,
+      srcDoc: this.props.initialContent,
+      children: void 0
+      // The iframe isn't ready so we drop children from props here. #12, #17
+    };
+    return delete n.head, delete n.initialContent, delete n.mountTarget, delete n.contentDidMount, delete n.contentDidUpdate, delete n.forwardedRef, /* @__PURE__ */ jsx("iframe", { ...n, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
+  }
+}
+U(Frame, "defaultProps", {
+  style: {},
+  head: null,
+  children: void 0,
+  mountTarget: void 0,
+  contentDidMount: () => {
+  },
+  contentDidUpdate: () => {
+  },
+  initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
+});
+const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame, { ...o, forwardedRef: r }));
 function getOrientation(o, r = null) {
   const n = window.getComputedStyle(o), a = r ? window.getComputedStyle(r) : null, l = n.display, i = a ? a.display : null;
   if (l === "flex" || l === "inline-flex") {
-    const c = n.flexDirection;
-    return c === "column" || c === "column-reverse" ? "vertical" : "horizontal";
+    const d = n.flexDirection;
+    return d === "column" || d === "column-reverse" ? "vertical" : "horizontal";
   } else if (l === "grid") {
-    const c = n.gridAutoFlow, d = n.gridTemplateColumns;
-    return c.includes("column") || d && d !== "none" && d !== "" && !d.includes("calc") && // Handle calc expressions
-    d.split(" ").length <= 1 ? "vertical" : "horizontal";
+    const d = n.gridAutoFlow, c = n.gridTemplateColumns;
+    return d.includes("column") || c && c !== "none" && c !== "" && !c.includes("calc") && // Handle calc expressions
+    c.split(" ").length <= 1 ? "vertical" : "horizontal";
   } else if (i === "inline-block" || i === "inline")
     return "horizontal";
   return "vertical";
@@ -2690,11 +2718,11 @@ const CONTROLS = [
     return "VERTICAL";
   }
 }, isDisabledControl = (o, r, n) => !!(o && (n === "UP" || n === "LEFT") || r && (n === "DOWN" || n === "RIGHT")), useBlockController = (o, r) => {
-  const [n] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(n, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, f = u + 1 === (d == null ? void 0 : d.length), m = getParentBlockOrientation(c, i, a), h = useCallback(
+  const [n] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), d = get(o, "_parent"), c = filter(n, (x) => d ? get(x, "_parent") === d : !get(x, "_parent")), p = (c == null ? void 0 : c.length) <= 1, u = findIndex(c, { _id: i }), g = u <= 0, f = u + 1 === (c == null ? void 0 : c.length), m = getParentBlockOrientation(d, i, a), h = useCallback(
     (x) => {
-      isDisabledControl(g, f, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), r());
+      isDisabledControl(g, f, x) || p || (x === "UP" || x === "LEFT" ? l([i], d || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], d || null, u + 2), r());
     },
-    [g, f, p, u, i, c, r]
+    [g, f, p, u, i, d, r]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
@@ -2706,15 +2734,15 @@ const CONTROLS = [
     [h]
   ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: f, moveBlock: h, orientation: m };
 }, BlockController = ({ block: o, updateFloatingBar: r }) => {
-  const { isOnlyChild: n, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
+  const { isOnlyChild: n, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: d } = useBlockController(
     o,
     r
   );
-  return n ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: d, dir: p, key: u }) => {
-    if (c !== p) return null;
+  return n ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: c, dir: p, key: u }) => {
+    if (d !== p) return null;
     const g = isDisabledControl(a, l, u);
     return g ? null : /* @__PURE__ */ jsx(
-      d,
+      c,
       {
         onClick: () => i(u),
         className: `${g ? "pointer-events-none cursor-not-allowed opacity-50" : "duration-300 hover:scale-95 hover:opacity-80"}`
@@ -2729,7 +2757,7 @@ const CONTROLS = [
 };
 class PubSub {
   constructor() {
-    V(this, "subscribers", /* @__PURE__ */ new Map());
+    U(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(r, n) {
     return this.subscribers.has(r) || this.subscribers.set(r, /* @__PURE__ */ new Set()), this.subscribers.get(r).add(n), () => {
@@ -2743,11 +2771,11 @@ class PubSub {
   }
 }
 const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: r }) => {
-  const { t: n } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (f) => c ? get(f, "_parent") === c : !get(f, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(d, { _id: i }), g = (f) => {
+  const { t: n } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), d = get(o, "_parent"), c = filter(a, (f) => d ? get(f, "_parent") === d : !get(f, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(c, { _id: i }), g = (f) => {
     if (f === "CHILD")
       pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
     else {
-      const m = { _id: c || "", position: d == null ? void 0 : d.length };
+      const m = { _id: d || "", position: c == null ? void 0 : c.length };
       f === "BEFORE" ? m.position = Math.max(u, 0) : f === "AFTER" && (m.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, m);
     }
   };
@@ -2766,8 +2794,8 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: r }) => {
     {
       className: "mr-10 flex cursor-default items-center space-x-1 px-1",
       draggable: i ? "true" : "false",
-      onDragStart: (c) => {
-        c.dataTransfer.setData("text/plain", JSON.stringify(pick(o, ["_id", "_type", "_name"]))), l(o), setTimeout(() => {
+      onDragStart: (d) => {
+        d.dataTransfer.setData("text/plain", JSON.stringify(pick(o, ["_id", "_type", "_name"]))), l(o), setTimeout(() => {
           n([]), a(null);
         }, 200);
       },
@@ -2778,7 +2806,7 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: r }) => {
     }
   );
 }, BlockFloatingSelector = ({ selectedBlockElement: o, block: r }) => {
-  const n = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), [p] = useAtom$1(inlineEditingActiveAtom), { document: u } = useFrame(), { floatingStyles: g, refs: f, update: m } = useFloating({
+  const n = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, d] = useSelectedStylingBlocks(), { hasPermission: c } = usePermissions(), [p] = useAtom$1(inlineEditingActiveAtom), { document: u } = useFrame(), { floatingStyles: g, refs: f, update: m } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: {
@@ -2801,23 +2829,23 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: r }) => {
         k.stopPropagation(), i(null);
       },
       onKeyDown: (k) => k.stopPropagation(),
-      className: "isolate z-[999] flex h-6 items-center bg-primary py-2 text-xs text-white",
+      className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         h && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([h]);
+              d([]), l([h]);
             }
           }
         ),
         /* @__PURE__ */ jsx(BlockActionLabel, { label: x, block: r }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-1 pr-1.5", children: [
           /* @__PURE__ */ jsx(AddBlockDropdown, { block: r, children: /* @__PURE__ */ jsx(PlusIcon, { className: "hover:scale-105" }) }),
-          canDuplicateBlock(get(r, "_type", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([r == null ? void 0 : r._id]) }) : null,
-          canDeleteBlock(get(r, "_type", "")) && d(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(TrashIcon, { className: "hover:scale-105", onClick: () => n([r == null ? void 0 : r._id]) }) : null,
-          d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: r, updateFloatingBar: m })
+          canDuplicateBlock(get(r, "_type", "")) && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([r == null ? void 0 : r._id]) }) : null,
+          canDeleteBlock(get(r, "_type", "")) && c(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(TrashIcon, { className: "hover:scale-105", onClick: () => n([r == null ? void 0 : r._id]) }) : null,
+          c(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: r, updateFloatingBar: m })
         ] })
       ]
     }
@@ -2878,8 +2906,8 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: r }) => {
     <div class="frame-root h-full"></div>
   </body>
 </html>`, useKeyEventWatcher = (o) => {
-  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: f } = usePasteBlocks(), m = o ? { document: o } : {};
-  useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(r), {}, [r, p]), useHotkeys("ctrl+c,command+c", () => u(r), {}, [r, u]), useHotkeys(
+  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: d, redo: c } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: f } = usePasteBlocks(), m = o ? { document: o } : {};
+  useHotkeys("ctrl+z,command+z", () => d(), {}, [d]), useHotkeys("ctrl+y,command+y", () => c(), {}, [c]), useHotkeys("ctrl+x,command+x", () => p(r), {}, [r, p]), useHotkeys("ctrl+c,command+c", () => u(r), {}, [r, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
       g(r[0]) && f(r);
@@ -2926,26 +2954,26 @@ const positionPlaceholder = (o, r, n) => {
   const a = iframeDocument == null ? void 0 : iframeDocument.getElementById("placeholder"), l = possiblePositions.map(([p]) => p), i = l.reduce(
     (p, u) => Math.abs(u - n) < Math.abs(p - n) ? u : p,
     0
-  ), c = l.indexOf(i);
-  if (!possiblePositions[c]) return;
-  const d = possiblePositions[c];
-  a.style.width = r === "vertical" ? d[2] + "px" : "2px", a.style.height = r === "vertical" ? "2px" : d[2] + "px", a.style.display = "block", r === "vertical" ? (a.style.top = d[0] + "px", a.style.left = d[1] + "px") : (a.style.top = d[1] + "px", a.style.left = d[0] + "px");
+  ), d = l.indexOf(i);
+  if (!possiblePositions[d]) return;
+  const c = possiblePositions[d];
+  a.style.width = r === "vertical" ? c[2] + "px" : "2px", a.style.height = r === "vertical" ? "2px" : c[2] + "px", a.style.display = "block", r === "vertical" ? (a.style.top = c[0] + "px", a.style.left = c[1] + "px") : (a.style.top = c[1] + "px", a.style.left = c[0] + "px");
 };
 function calculateDropIndex(o, r) {
   let n = 0, a = 1 / 0;
   return r.forEach((l, i) => {
-    const c = Math.abs(l[0] - o);
-    c < a && (a = c, n = i);
+    const d = Math.abs(l[0] - o);
+    d < a && (a = d, n = i);
   }), n;
 }
 const calculatePossiblePositions = (o) => {
   const n = getOrientation(o) === "horizontal";
   possiblePositions = [], Array.from(o.children).forEach((a, l) => {
     if (a.classList.contains("pointer-events-none")) return;
-    const i = n ? a.offsetLeft : a.offsetTop, c = n ? [a.offsetTop, a.clientHeight] : [a.offsetLeft, a.clientWidth];
-    if (possiblePositions.push([i, c[0], c[1]]), l === o.children.length - 1) {
-      const d = n ? a.offsetLeft + a.clientWidth : a.offsetTop + a.clientHeight;
-      possiblePositions.push([d, c[0], c[1]]);
+    const i = n ? a.offsetLeft : a.offsetTop, d = n ? [a.offsetTop, a.clientHeight] : [a.offsetLeft, a.clientWidth];
+    if (possiblePositions.push([i, d[0], d[1]]), l === o.children.length - 1) {
+      const c = n ? a.offsetLeft + a.clientWidth : a.offsetTop + a.clientHeight;
+      possiblePositions.push([c, d[0], d[1]]);
     }
   });
 }, throttledDragOver = throttle((o) => {
@@ -2967,7 +2995,7 @@ function removeDataDrop() {
   o && o.removeAttribute("data-drop");
 }
 const useDnd = () => {
-  const { document: o } = useFrame(), [r, n] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
+  const { document: o } = useFrame(), [r, n] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: d } = useBlocksStoreUndoableActions(), [c, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd")) return {};
   const f = () => {
     removePlaceholder(), n(!1), p(null), u(null), possiblePositions = [];
@@ -2981,7 +3009,7 @@ const useDnd = () => {
       var E;
       const h = dropTarget, k = getOrientation(h) === "vertical" ? m.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : m.clientX;
       dropIndex = calculateDropIndex(k, possiblePositions);
-      const b = d, S = h.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      const b = c, S = h.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
       if ((b == null ? void 0 : b._id) === S || !w) {
         f();
         return;
@@ -2991,7 +3019,7 @@ const useDnd = () => {
         return;
       }
       let A = h.getAttribute("data-block-id");
-      A === null && (A = m.target.parentElement.getAttribute("data-block-id")), c([b._id], A === "canvas" ? null : A, dropIndex), f(), setTimeout(removePlaceholder, 300);
+      A === null && (A = m.target.parentElement.getAttribute("data-block-id")), d([b._id], A === "canvas" ? null : A, dropIndex), f(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (m) => {
       const h = m, x = h.target;
@@ -3013,7 +3041,7 @@ function getTargetedBlock(o) {
   return (r == null ? void 0 : r.getAttribute("data-block-id")) === "canvas" ? null : r;
 }
 const useHandleCanvasDblClick = (o, r) => {
-  const n = [], a = useUpdateBlocksProps(), [l, i] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: c } = useBlockHighlight(), d = useGetBlockAtomValue(pageBlocksAtomsAtom);
+  const n = [], a = useUpdateBlocksProps(), [l, i] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: d } = useBlockHighlight(), c = useGetBlockAtomValue(pageBlocksAtomsAtom);
   return useCallback(
     (p) => {
       if (l) return;
@@ -3031,26 +3059,26 @@ const useHandleCanvasDblClick = (o, r) => {
         const h = o.getHTML();
         a([f], { content: h }), r.style.display = "none", u.style.visibility = "visible";
       }), i(f);
-      const m = d(f).content;
+      const m = c(f).content;
       o.commands.setContent(m), r.style.display = "block", u.style.visibility = "hidden", r.style.position = "absolute", r.style.top = `${u.offsetTop}px`, r.style.left = `${u.offsetLeft}px`, r.style.width = `${u.offsetWidth}px`, r.style.height = `${u.offsetHeight}px`, r.classList.add(...u.classList);
     },
-    [l, c, d, i, a, o, r]
+    [l, d, c, i, a, o, r]
   );
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [r, n] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
-  return (c) => {
+  return (d) => {
     if (a) return;
-    c.stopPropagation();
-    const d = getTargetedBlock(c.target);
-    if (d != null && d.getAttribute("data-block-id") && (d == null ? void 0 : d.getAttribute("data-block-id")) === "container") {
+    d.stopPropagation();
+    const c = getTargetedBlock(d.target);
+    if (c != null && c.getAttribute("data-block-id") && (c == null ? void 0 : c.getAttribute("data-block-id")) === "container") {
       n([]), o([]), i();
       return;
     }
-    if (d != null && d.getAttribute("data-block-parent")) {
-      const p = d.getAttribute("data-style-prop"), u = d.getAttribute("data-style-id"), g = d.getAttribute("data-block-parent");
+    if (c != null && c.getAttribute("data-block-parent")) {
+      const p = c.getAttribute("data-style-prop"), u = c.getAttribute("data-style-id"), g = c.getAttribute("data-block-parent");
       r.includes(g) || l == null || l.closeAll(), o([{ id: u, prop: p, blockId: g }]), n([g]);
-    } else if (d != null && d.getAttribute("data-block-id")) {
-      const p = d.getAttribute("data-block-id");
+    } else if (c != null && c.getAttribute("data-block-id")) {
+      const p = c.getAttribute("data-block-id");
       r.includes(p) || l == null || l.closeAll(), o([]), n(p === "canvas" ? [] : [p]);
     }
     i();
@@ -3081,9 +3109,9 @@ const useHandleCanvasDblClick = (o, r) => {
       }
     }, 100);
   }, [r, n, l, a]);
-  const c = useEditor({
+  const d = useEditor({
     extensions: [StarterKit]
-  }), d = useRef(null), p = useHandleCanvasDblClick(c, d.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), f = useHandleMouseLeave(), m = useDnd();
+  }), c = useRef(null), p = useHandleCanvasDblClick(d, c.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), f = useHandleMouseLeave(), m = useDnd();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3098,31 +3126,20 @@ const useHandleCanvasDblClick = (o, r) => {
       children: o
     }
   );
-}, getElementByDataBlockId = (o, r) => o.querySelector(`[data-block-id="${r}"]`), CssThemeVariables = () => {
-  const [o] = useTheme(), r = useMemo(() => getChaiThemeCssVariables(o), [o]);
+}, getElementByDataBlockId = (o, r) => o.querySelector(`[data-block-id="${r}"]`), CssThemeVariables = ({ theme: o }) => {
+  const r = useMemo(() => getChaiThemeCssVariables(o), [o]);
   return /* @__PURE__ */ jsx("style", { id: "chai-theme", children: r });
-}, PrimaryColorCSSVariable = () => {
-  const [o] = useTheme(), r = get(o, "colors.primary", ["#2563EB", "#3B82F6"]), n = get(o, "colors.primary-foreground", ["#ffffff", "#ffffff"]);
-  return /* @__PURE__ */ jsx("style", { id: "chai-theme", children: `:root { 
-        --primary: ${hexToHSL(r[0])}; 
-        --primary-foreground: ${hexToHSL(n[0])}; 
-
-        .dark {
-        --primary: ${hexToHSL(r[1])}; 
-        --primary-foreground: ${hexToHSL(n[1])}; 
-        }
-    }` });
 }, HeadTags = () => {
-  const [o] = useTheme(), r = useThemeOptions(), [n] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: p } = useFrame(), [u] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [g] = useState(
-    d == null ? void 0 : d.getElementById("selected-block")
+  const [o] = useTheme(), r = useThemeOptions(), [n] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [d] = useAtom$1(dropTargetBlockIdAtom), { document: c, window: p } = useFrame(), [u] = useState(c == null ? void 0 : c.getElementById("highlighted-block")), [g] = useState(
+    c == null ? void 0 : c.getElementById("selected-block")
   ), [f] = useState(
-    d == null ? void 0 : d.getElementById("selected-styling-block")
+    c == null ? void 0 : c.getElementById("selected-styling-block")
   ), [m] = useState(
-    d == null ? void 0 : d.getElementById("dragged-block")
+    c == null ? void 0 : c.getElementById("dragged-block")
   );
   useEffect(() => {
-    a ? d == null || d.documentElement.classList.add("dark") : d == null || d.documentElement.classList.remove("dark");
-  }, [a, d]);
+    a ? c == null || c.documentElement.classList.add("dark") : c == null || c.documentElement.classList.remove("dark");
+  }, [a, c]);
   const h = useRegisteredFonts();
   useEffect(() => {
     !p || !p.tailwind || (p.tailwind.config = {
@@ -3171,8 +3188,8 @@ const useHandleCanvasDblClick = (o, r) => {
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
   }, [l, f]), useEffect(() => {
-    d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
-  }, [c, d]);
+    c.querySelector("#drop-target-block").innerHTML = d ? `[data-block-id="${d}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
+  }, [d, c]);
   const x = useMemo(() => {
     const { heading: S, body: w } = {
       heading: get(o, "fontFamily.heading"),
@@ -3184,12 +3201,12 @@ const useHandleCanvasDblClick = (o, r) => {
     [x]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(CssThemeVariables, {}),
+    /* @__PURE__ */ jsx(CssThemeVariables, { theme: o }),
     /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: k } }),
     /* @__PURE__ */ jsx("style", { id: "chai-custom-fonts", dangerouslySetInnerHTML: { __html: b } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: r, onResize: n }) => {
-  const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
+  const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), d = useDebouncedCallback(
     () => {
       const { clientWidth: p } = i.current;
       n(p);
@@ -3197,7 +3214,7 @@ const useHandleCanvasDblClick = (o, r) => {
     [i.current],
     100
   );
-  return useResizeObserver(i.current, c, i.current !== null), useEffect(() => {
+  return useResizeObserver(i.current, d, i.current !== null), useEffect(() => {
     const { clientWidth: p } = i.current;
     r(p);
   }, []), /* @__PURE__ */ jsx("div", { id: "main-content", onClick: () => {
@@ -3217,10 +3234,10 @@ const applyBinding = (o, r) => {
   return forEach(keys(n), (a) => {
     if (isString(n[a]) && !startsWith(a, "_")) {
       let l = n[a];
-      const i = /\{\{(.*?)\}\}/g, c = l.match(i);
-      c && c.forEach((d) => {
-        const p = d.slice(2, -2), u = get(r, p, d);
-        l = l.replace(d, u);
+      const i = /\{\{(.*?)\}\}/g, d = l.match(i);
+      d && d.forEach((c) => {
+        const p = c.slice(2, -2), u = get(r, p, c);
+        l = l.replace(c, u);
       }), n[a] = l;
     }
   }), n;
@@ -3253,22 +3270,22 @@ const getBlockRuntimeProps = memoize((o) => {
   const [o] = useBlocksStore();
   return useCallback(
     (r, n) => isEmpty(n) ? {} : Object.entries(n).reduce((a, [l, i]) => {
-      const c = [];
-      let d = find(o, { _id: r });
-      for (; d; )
-        c.push(d), d = find(o, { _id: d._parent });
-      const p = find(c, { _type: i.block });
+      const d = [];
+      let c = find(o, { _id: r });
+      for (; c; )
+        d.push(c), c = find(o, { _id: c._parent });
+      const p = find(d, { _type: i.block });
       return p && (a[l] = get(p, get(i, "prop"), null)), a;
     }, {}),
     [o]
   );
 }, BlockRenderer = ({ blockAtom: o, children: r }) => {
-  const [n] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(n._type), [n._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), f = useMemo(
-    () => u ? applyBinding(applyLanguage(n, l, a), d) : applyLanguage(n, l, a),
-    [n, l, a, d, u]
+  const [n] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(n._type), [n._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), d = useBlockRuntimeProps(), c = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), f = useMemo(
+    () => u ? applyBinding(applyLanguage(n, l, a), c) : applyLanguage(n, l, a),
+    [n, l, a, c, u]
   ), m = useMemo(() => getBlockTagAttributes(n), [n, getBlockTagAttributes]), h = useMemo(
-    () => c(n._id, getBlockRuntimeProps(n._type)),
-    [n._id, n._type, c, getBlockRuntimeProps]
+    () => d(n._id, getBlockRuntimeProps(n._type)),
+    [n._id, n._type, d, getBlockRuntimeProps]
   ), x = useMemo(() => !has(a, "dataProvider") || !isFunction(a.dataProvider) ? {} : a.dataProvider(n, l), [n, l, a]), k = useMemo(
     () => ({
       blockProps: {
@@ -3303,12 +3320,12 @@ const getBlockRuntimeProps = memoize((o) => {
   splitAtoms: n = void 0
 }) => {
   const a = useGetBlockAtom(n), l = useMemo(
-    () => filter(o, (c) => has(c, "_id") && (isEmpty(r) ? !c._parent : c._parent === r)),
+    () => filter(o, (d) => has(d, "_id") && (isEmpty(r) ? !d._parent : d._parent === r)),
     [o, r]
-  ), i = useCallback((c) => filter(o, (d) => d._parent === c._id).length > 0, [o]);
-  return map(l, (c) => {
-    const d = a(c._id);
-    return d ? /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, children: c._type === "GlobalBlock" || c._type === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: get(c, "partialBlockId", get(c, "globalBlock", "")) }) }) : i(c) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: c._id }) : null }, c._id) : null;
+  ), i = useCallback((d) => filter(o, (c) => c._parent === d._id).length > 0, [o]);
+  return map(l, (d) => {
+    const c = a(d._id);
+    return c ? /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: c, children: d._type === "GlobalBlock" || d._type === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: get(d, "partialBlockId", get(d, "globalBlock", "")) }) }) : i(d) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: d._id }) : null }, d._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3317,16 +3334,16 @@ const getBlockRuntimeProps = memoize((o) => {
   const [o] = useBlocksStore(), r = isEmpty(o) ? null : /* @__PURE__ */ jsx(PageBlocksRenderer, {});
   return /* @__PURE__ */ jsx(Fragment, { children: r });
 }, useCanvasScale = (o) => {
-  const [r] = useCanvasDisplayWidth(), [, n] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), c = useCallback(() => {
-    const { width: d, height: p } = o;
-    if (d < r) {
-      const u = parseFloat((d / r).toFixed(2).toString());
+  const [r] = useCanvasDisplayWidth(), [, n] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), d = useCallback(() => {
+    const { width: c, height: p } = o;
+    if (c < r) {
+      const u = parseFloat((c / r).toFixed(2).toString());
       let g = {};
-      const f = p * u, m = d * u;
+      const f = p * u, m = c * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
         height: 100 + (p - f) / f * 100 + "%",
-        width: 100 + (d - m) / m * 100 + "%"
+        width: 100 + (c - m) / m * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3340,17 +3357,17 @@ const getBlockRuntimeProps = memoize((o) => {
       i({}), n(100);
   }, [r, o, a, n]);
   return useEffect(() => {
-    c();
-  }, [r, o, n, c]), l;
+    d();
+  }, [r, o, n, d]), l;
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasDisplayWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, k] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), w = (C) => {
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasDisplayWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), d = useRef(null), [c, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [g, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, k] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), w = (C) => {
     p((B) => ({ ...B, width: C }));
   };
   useEffect(() => {
-    if (!c.current) return;
-    const { clientWidth: C, clientHeight: B } = c.current;
+    if (!d.current) return;
+    const { clientWidth: C, clientHeight: B } = d.current;
     p({ width: C, height: B });
-  }, [c, r]);
+  }, [d, r]);
   const A = (C, B = 0) => {
     const { top: _ } = C.getBoundingClientRect();
     return _ + B >= 0 && _ - B <= window.innerHeight;
@@ -3383,7 +3400,7 @@ const getBlockRuntimeProps = memoize((o) => {
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
-      ref: c,
+      ref: d,
       children: /* @__PURE__ */ jsxs(
         ChaiFrame,
         {
@@ -3422,38 +3439,6 @@ const getBlockRuntimeProps = memoize((o) => {
       )
     }
   ) });
-}, FallbackError = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
-  /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
-  /* @__PURE__ */ jsx("p", { children: "Please try again." })
-] }) }), ICON_CLASS = "h-3 w-3 stroke-[2]", TypeIcon = (o) => {
-  const r = useRegisteredChaiBlocks(), n = get(r, [o == null ? void 0 : o.type, "icon"]);
-  return n ? React__default.createElement(n, { className: ICON_CLASS }) : /* @__PURE__ */ jsx(BoxModelIcon, { className: ICON_CLASS });
-}, Breadcrumb = () => {
-  const o = useSelectedBlockHierarchy(), [, r] = useSelectedBlockIds(), { highlightBlock: n } = useBlockHighlight();
-  return /* @__PURE__ */ jsx("div", { className: "-mx-2 border-t border-border bg-background px-2 py-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center whitespace-nowrap", children: [
-    /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
-      /* @__PURE__ */ jsx(Button, { onClick: () => r([]), variant: "ghost", className: "h-fit p-1 text-xs font-normal", children: "Body" }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
-    ] }),
-    reverse(o).map((a, l) => /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          onMouseEnter: () => {
-            n(a == null ? void 0 : a._id);
-          },
-          onClick: () => r([a == null ? void 0 : a._id]),
-          variant: "ghost",
-          className: "h-fit gap-x-1 p-1 text-xs font-normal",
-          children: [
-            /* @__PURE__ */ jsx(TypeIcon, { type: a == null ? void 0 : a._type }),
-            a._name || a._type
-          ]
-        }
-      ),
-      l !== o.length - 1 && /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
-    ] }, l))
-  ] }) });
 }, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-CuhsobXe.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), r = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
@@ -3493,9 +3478,9 @@ const getBlockRuntimeProps = memoize((o) => {
   useEffect(() => {
     i(o || "");
   }, [o]);
-  const c = (d) => {
-    i(d);
-    const p = removeSizeAttributes(d);
+  const d = (c) => {
+    i(c);
+    const p = removeSizeAttributes(c);
     r(p);
   };
   return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-2", id: "icon-picker-field", children: [
@@ -3509,7 +3494,7 @@ const getBlockRuntimeProps = memoize((o) => {
           autoCorrect: "off",
           spellCheck: "false",
           value: l,
-          onChange: (d) => c(d.target.value),
+          onChange: (c) => d(c.target.value),
           placeholder: a("Enter SVG code here"),
           rows: 2,
           className: "no-scrollbar w-full rounded-md border border-border bg-background px-3 py-1.5 text-xs shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
@@ -3519,13 +3504,13 @@ const getBlockRuntimeProps = memoize((o) => {
     /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: a("Paste SVG code to use as an icon") })
   ] });
 }, DefaultMediaManager = ({ close: o, onSelect: r, mode: n = "image" }) => {
-  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), f = async (h) => {
+  const [a, l] = useState(""), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState(null), f = async (h) => {
     if (!h.trim()) {
       p(!1), g("Please enter a URL");
       return;
     }
     try {
-      c(!0), g(null);
+      d(!0), g(null);
       const x = await fetch(h, { method: "HEAD" });
       if (!x.ok) {
         p(!1), g("Invalid asset URL");
@@ -3536,7 +3521,7 @@ const getBlockRuntimeProps = memoize((o) => {
     } catch {
       p(!1), g("Error validating URL");
     } finally {
-      c(!1);
+      d(!1);
     }
   }, { t: m } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "flex w-96 flex-col gap-4 p-4", children: [
@@ -3557,7 +3542,7 @@ const getBlockRuntimeProps = memoize((o) => {
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: o, children: m("Cancel") }),
-        /* @__PURE__ */ jsx(Button, { onClick: () => r([a]), disabled: !d || i, children: m("Insert") })
+        /* @__PURE__ */ jsx(Button, { onClick: () => r([a]), disabled: !c || i, children: m("Insert") })
       ] })
     ] })
   ] });
@@ -3571,10 +3556,10 @@ const getBlockRuntimeProps = memoize((o) => {
   mode: n = "image"
 }) => {
   const [a, l] = useState(!1), i = useMediaManagerComponent();
-  return /* @__PURE__ */ jsxs(Dialog, { open: a, onOpenChange: (d) => l(d), children: [
+  return /* @__PURE__ */ jsxs(Dialog, { open: a, onOpenChange: (c) => l(c), children: [
     /* @__PURE__ */ jsx(DialogTrigger, { asChild: !0, children: o }),
-    /* @__PURE__ */ jsx(DialogContent, { className: "flex max-h-[90vh] max-w-7xl border-border md:w-fit", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: i ? /* @__PURE__ */ jsx(i, { close: () => l(!1), onSelect: (...d) => {
-      r.call(void 0, ...d), l(!1);
+    /* @__PURE__ */ jsx(DialogContent, { className: "flex max-h-[90vh] max-w-7xl border-border md:w-fit", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: i ? /* @__PURE__ */ jsx(i, { close: () => l(!1), onSelect: (...c) => {
+      r.call(void 0, ...c), l(!1);
     }, mode: n }) : null }) })
   ] });
 };
@@ -3607,26 +3592,26 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   ] });
 };
 function NestedPathSelector({ data: o, onSelect: r, dataType: n = "value" }) {
-  const [a, l] = React.useState(!1), [i, c] = React.useState([]), [d, p] = React.useState(o);
+  const [a, l] = React.useState(!1), [i, d] = React.useState([]), [c, p] = React.useState(o);
   useEffect(() => {
-    a || c([]), p(o);
+    a || d([]), p(o);
   }, [a, o]);
   const u = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", g = React.useCallback(
     (h) => {
       const x = (k) => n === "value" ? k === "value" || k === "object" : n === "array" ? k === "array" : k === n;
-      h.type === "object" ? (c((k) => [...k, h.key]), p(h.value)) : x(h.type) && (r([...i, h.key].join(".")), l(!1));
+      h.type === "object" ? (d((k) => [...k, h.key]), p(h.value)) : x(h.type) && (r([...i, h.key].join(".")), l(!1));
     },
     [i, r, n]
   ), f = React.useCallback(() => {
     if (i.length > 0) {
       const h = i.slice(0, -1);
-      c(h), p(h.reduce((x, k) => x[k], o));
+      d(h), p(h.reduce((x, k) => x[k], o));
     }
-  }, [i, o]), m = React.useMemo(() => Object.entries(d).map(([h, x]) => ({
+  }, [i, o]), m = React.useMemo(() => Object.entries(c).map(([h, x]) => ({
     key: h,
     value: x,
     type: u(x)
-  })).filter((h) => n === "value" ? h.type === "value" || h.type === "object" : n === "array" ? h.type === "array" || h.type === "object" : n === "object" ? h.type === "object" : !0), [d, n]);
+  })).filter((h) => n === "value" ? h.type === "value" || h.type === "object" : n === "array" ? h.type === "array" || h.type === "object" : n === "object" ? h.type === "object" : !0), [c, n]);
   return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
     /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
@@ -3833,7 +3818,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   onChange: l,
   onBlur: i
 }) => {
-  const c = useRef(null), d = useRef(a || ""), p = usePageExternalData();
+  const d = useRef(null), c = useRef(a || ""), p = usePageExternalData();
   useEffect(() => {
     if (o) {
       const f = document.createElement("style");
@@ -3881,11 +3866,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     }
   });
   useEffect(() => {
-    o && u && (d.current !== a && (d.current = a || "", u.commands.setContent(a || "")), setTimeout(() => {
+    o && u && (c.current !== a && (c.current = a || "", u.commands.setContent(a || "")), setTimeout(() => {
       u.commands.focus();
     }, 100));
   }, [o, u]), useEffect(() => {
-    c.current && u && (c.current.__chaiRTE = u);
+    d.current && u && (d.current.__chaiRTE = u);
   }, [u, o]);
   const g = (f) => {
     if (!u) return;
@@ -3910,14 +3895,14 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         /* @__PURE__ */ jsx("div", { className: "rte-path-selector", children: /* @__PURE__ */ jsx(NestedPathSelector, { data: p, onSelect: g }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { id: `chai-rte-modal-${n}`, ref: c, className: "rounded-md border border-input", children: [
+    /* @__PURE__ */ jsxs("div", { id: `chai-rte-modal-${n}`, ref: d, className: "rounded-md border border-input", children: [
       /* @__PURE__ */ jsx(MenuBar, { editor: u }),
       /* @__PURE__ */ jsx(EditorContent, { editor: u, id: `modal-${n}`, className: "p-2" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(Button, { onClick: r, children: "Done" }) })
   ] }) });
 }, RichTextEditorField = ({ id: o, placeholder: r, value: n, onChange: a, onBlur: l }) => {
-  const i = useRef(null), [c, d] = useState(!1), [p, u] = useState(""), g = useEditor({
+  const i = useRef(null), [d, c] = useState(!1), [p, u] = useState(""), g = useEditor({
     extensions: [
       StarterKit,
       Link.configure({
@@ -3936,7 +3921,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     content: n || "",
     onUpdate: ({ editor: h }) => {
       const x = h.getHTML();
-      a(x), c || u(x);
+      a(x), d || u(x);
     },
     onBlur: ({ editor: h }) => {
       const x = h.getHTML();
@@ -3956,17 +3941,17 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   const f = (h) => {
     a(h);
   }, m = () => {
-    d(!1), g && g.commands.setContent(p);
+    c(!1), g && g.commands.setContent(p);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { id: `chai-rte-${o}`, ref: i, className: "mt-1 rounded-md border border-input", children: [
-      /* @__PURE__ */ jsx(MenuBar, { editor: g, onExpand: () => d(!0) }),
+      /* @__PURE__ */ jsx(MenuBar, { editor: g, onExpand: () => c(!0) }),
       /* @__PURE__ */ jsx(EditorContent, { editor: g, id: o, placeholder: r })
     ] }) }),
-    c && /* @__PURE__ */ jsx(
+    d && /* @__PURE__ */ jsx(
       RTEModal,
       {
-        isOpen: c,
+        isOpen: d,
         onClose: m,
         id: o,
         value: p,
@@ -3980,8 +3965,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   pageTypes: r,
   onChange: n
 }) => {
-  var L;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [k, b] = useState(-1), S = useRef(null), w = (L = r == null ? void 0 : r.find((v) => v.key === u)) == null ? void 0 : L.name;
+  var I;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, y) => []), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [k, b] = useState(-1), S = useRef(null), w = (I = r == null ? void 0 : r.find((v) => v.key === u)) == null ? void 0 : I.name;
   useEffect(() => {
     if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const v = split(o, ":"), y = get(v, 1, "page") || "page";
@@ -3998,7 +3983,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         const y = await l(u, v);
         x(y);
       }
-      c(!1), b(-1);
+      d(!1), b(-1);
     },
     [u],
     300
@@ -4031,7 +4016,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   const B = () => {
     m(""), x([]), b(-1), p(!1), n("");
   }, _ = (v) => {
-    m(v), p(!isEmpty(v)), c(!0), A(v);
+    m(v), p(!isEmpty(v)), d(!0), A(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(r, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
@@ -4049,10 +4034,10 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       ),
       /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsx("button", { onClick: B, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(h) || d && isEmpty(h)) && /* @__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(h) || c && isEmpty(h)) && /* @__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(h) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : c && isEmpty(h) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       f,
@@ -4076,13 +4061,13 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: r, onChange: n }) => {
-  const { t: a } = useTranslation(), { type: l = "pageType", href: i = "", target: c = "self" } = r, d = useBuilderProp("pageTypes", []), p = l === "pageType" && isEmpty(d) ? "url" : l;
+  const { t: a } = useTranslation(), { type: l = "pageType", href: i = "", target: d = "self" } = r, c = useBuilderProp("pageTypes", []), p = l === "pageType" && isEmpty(c) ? "url" : l;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: (o == null ? void 0 : o.title) ?? "Link" }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
       /* @__PURE__ */ jsx("select", { name: "type", value: l, onChange: (u) => n({ ...r, type: u.target.value }), children: map(
         [
-          ...isEmpty(d) ? [] : [{ const: "pageType", title: a("Goto Page") }],
+          ...isEmpty(c) ? [] : [{ const: "pageType", title: a("Goto Page") }],
           { const: "url", title: a("Open URL") },
           { const: "email", title: a("Compose Email") },
           { const: "telephone", title: a("Call Phone") },
@@ -4090,11 +4075,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         ],
         (u) => /* @__PURE__ */ jsx("option", { value: u.const, children: u.title }, u.const)
       ) }),
-      p === "pageType" && !isEmpty(d) ? /* @__PURE__ */ jsx(
+      p === "pageType" && !isEmpty(c) ? /* @__PURE__ */ jsx(
         PageTypeField,
         {
           href: i,
-          pageTypes: d,
+          pageTypes: c,
           onChange: (u) => n({ ...r, href: u })
         }
       ) : /* @__PURE__ */ jsx(
@@ -4118,9 +4103,9 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
             autoCorrect: "off",
             spellCheck: "false",
             type: "checkbox",
-            defaultChecked: c === "_blank",
+            defaultChecked: d === "_blank",
             className: "!w-fit cursor-pointer rounded-md border border-border",
-            onChange: () => n({ ...r, target: c === "_blank" ? "_self" : "_blank" })
+            onChange: () => n({ ...r, target: d === "_blank" ? "_self" : "_blank" })
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "pt-1 text-xs", children: a("Open in new tab") })
@@ -4144,9 +4129,9 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     }
   ) });
 }, SliderField = ({ formData: o, onChange: r }) => {
-  const [n] = useBlocksStore(), a = useSelectedBlock(), l = useWrapperBlock(), { addCoreBlock: i } = useAddBlock(), [, c] = useSelectedBlockIds();
+  const [n] = useBlocksStore(), a = useSelectedBlock(), l = useWrapperBlock(), { addCoreBlock: i } = useAddBlock(), [, d] = useSelectedBlockIds();
   if (!a && !l) return null;
-  const d = (a == null ? void 0 : a._type) === "Slider" ? a : l, p = find(n, { _parent: d == null ? void 0 : d._id, _type: "Slides" });
+  const c = (a == null ? void 0 : a._type) === "Slider" ? a : l, p = find(n, { _parent: c == null ? void 0 : c._id, _type: "Slides" });
   if (!p) return null;
   const u = filter(n, { _parent: p == null ? void 0 : p._id, _type: "Slide" }), g = (o == null ? void 0 : o.currentSlide) || get(u, "0._id");
   useEffect(() => {
@@ -4159,21 +4144,21 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     if (x > -1) {
       const k = (x + 1) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
-      r({ ...o, currentSlide: b }), c([b]);
+      r({ ...o, currentSlide: b }), d([b]);
     }
   }, m = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
       const k = (x - 1 + u.length) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
-      r({ ...o, currentSlide: b }), c([b]);
+      r({ ...o, currentSlide: b }), d([b]);
     }
   }, h = () => {
     const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
     ), k = x == null ? void 0 : x._id;
-    k && (r({ ...o, currentSlide: k }), c([k]));
+    k && (r({ ...o, currentSlide: k }), d([k]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
@@ -4261,15 +4246,15 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     ] }) })
   ] });
 }, SourcesField = ({ formData: o, onChange: r }) => {
-  const n = get(o, "srcsets", []) || [], a = (c, d) => {
-    const p = c.target.name, u = c.target.value;
+  const n = get(o, "srcsets", []) || [], a = (d, c) => {
+    const p = d.target.name, u = d.target.value;
     r({
-      srcsets: map(n, (g, f) => f === d ? { ...g, [p]: u } : g)
+      srcsets: map(n, (g, f) => f === c ? { ...g, [p]: u } : g)
     });
   }, l = () => {
     r({ srcsets: [...n, {}] });
-  }, i = (c) => {
-    r({ srcsets: reject(n, (d, p) => p === c) });
+  }, i = (d) => {
+    r({ srcsets: reject(n, (c, p) => p === d) });
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
@@ -4284,12 +4269,12 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: n.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-gray-200 p-2 text-xs italic text-gray-500", children: "Add additional sources to create responsive videos" }) : map(n, (c, d) => /* @__PURE__ */ jsxs("div", { className: "group relative space-y-1.5 rounded border border-gray-200 px-2 pb-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: n.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-gray-200 p-2 text-xs italic text-gray-500", children: "Add additional sources to create responsive videos" }) : map(n, (d, c) => /* @__PURE__ */ jsxs("div", { className: "group relative space-y-1.5 rounded border border-gray-200 px-2 pb-1.5", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          onClick: () => i(d),
+          onClick: () => i(c),
           className: "absolute -right-px -top-0 -translate-y-1/2 rounded-full bg-red-100 p-1 opacity-0 hover:bg-red-200 group-hover:opacity-100",
           children: /* @__PURE__ */ jsx(X, { size: 10, className: "text-red-500" })
         }
@@ -4302,8 +4287,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
             name: "width",
             placeholder: "Enter width (in px)",
             type: "number",
-            value: get(c, "width"),
-            onChange: (p) => a(p, d),
+            value: get(d, "width"),
+            onChange: (p) => a(p, c),
             className: "!placeholder:text-gray-100 !mt-0 !rounded-none !border-0 !p-0 !text-xs"
           }
         )
@@ -4316,30 +4301,30 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
             name: "url",
             placeholder: "Enter url",
             className: "!mt-0 !rounded-none !border-0 !p-0 !text-xs !shadow-none",
-            value: get(c, "url", ""),
-            onChange: (p) => a(p, d)
+            value: get(d, "url", ""),
+            onChange: (p) => a(p, c)
           }
         )
       ] })
-    ] }, d)) })
+    ] }, c)) })
   ] });
 }, BindingWidget = () => /* @__PURE__ */ jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), CodeEditor = ({ id: o, placeholder: r }) => {
   const { t: n } = useTranslation(), [, a] = useCodeEditor(), l = useSelectedBlock();
   if (typeof window > "u") return null;
-  const i = o.replace("root.", ""), c = get(l, i, ""), d = () => {
+  const i = o.replace("root.", ""), d = get(l, i, ""), c = () => {
     const p = l == null ? void 0 : l._id;
-    a({ blockId: p, blockProp: i, placeholder: r, initialCode: get(l, i, c) });
+    a({ blockId: p, blockProp: i, placeholder: r, initialCode: get(l, i, d) });
   };
   return /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: d,
+        onClick: c,
         className: "w-[90%] max-w-full cursor-default truncate text-pretty rounded border border-border bg-background p-2 text-left text-[10px]",
-        children: c.trim().length > 0 ? c.substring(0, 46) : r || "Eg: <script>console.log('Hello, world!');<\/script>"
+        children: d.trim().length > 0 ? d.substring(0, 46) : r || "Eg: <script>console.log('Hello, world!');<\/script>"
       }
     ),
-    /* @__PURE__ */ jsx(Button, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: n("Open code editor") })
+    /* @__PURE__ */ jsx(Button, { onClick: c, size: "sm", variant: "outline", className: "w-fit", children: n("Open code editor") })
   ] });
 }, JSONFormFieldTemplate = ({
   id: o,
@@ -4348,8 +4333,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   children: a,
   errors: l,
   help: i,
-  description: c,
-  hidden: d,
+  description: d,
+  hidden: c,
   required: p,
   schema: u,
   formData: g,
@@ -4365,8 +4350,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
           prefixLength: R.length,
           suffixLength: $.length
         };
-      }, I = document.getElementById(o);
-      if (!I) return;
+      }, L = document.getElementById(o);
+      if (!L) return;
       const P = document.getElementById(`chai-rte-${o}`) || document.getElementById(`chai-rte-modal-${o}`);
       if (P && (P.querySelector(".ProseMirror") || P.__chaiRTE)) {
         const N = P.__chaiRTE;
@@ -4377,19 +4362,19 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
           if (O !== R)
             N.chain().deleteSelection().insertContent(D).run();
           else {
-            const { state: M } = N, H = M.selection.from, F = M.doc.textBetween(Math.max(0, H - 1), H), U = M.doc.textBetween(H, Math.min(H + 1, M.doc.content.size));
+            const { state: M } = N, H = M.selection.from, F = M.doc.textBetween(Math.max(0, H - 1), H), V = M.doc.textBetween(H, Math.min(H + 1, M.doc.content.size));
             let z = "";
             H > 0 && F !== " " && !j(F) && (z = " ");
             let W = "";
-            U && U !== " " && !j(U) && (W = " "), N.chain().insertContent(z + D + W).run();
+            V && V !== " " && !j(V) && (W = " "), N.chain().insertContent(z + D + W).run();
           }
           setTimeout(() => f(N.getHTML(), {}, o), 100);
           return;
         }
       } else {
-        const N = I, D = N.selectionStart || 0, O = N.value || "", R = N.selectionEnd || D;
+        const N = L, D = N.selectionStart || 0, O = N.value || "", R = N.selectionEnd || D;
         if (R > D) {
-          const U = `{{${y}}}`, { text: z } = T(O, D, U), W = O.slice(0, D) + z + O.slice(R);
+          const V = `{{${y}}}`, { text: z } = T(O, D, V), W = O.slice(0, D) + z + O.slice(R);
           f(W, {}, o);
           return;
         }
@@ -4399,7 +4384,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     },
     [o, f, g, w == null ? void 0 : w._id]
   );
-  if (d)
+  if (c)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: a });
   const v = E == null ? void 0 : E.includes(o.replace("root.", ""));
@@ -4422,7 +4407,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         }
       ),
       (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${y ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
-        c,
+        d,
         a,
         l,
         i
@@ -4442,7 +4427,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       ] }),
       u.type === "string" && !u.enum && !u.oneOf && S && /* @__PURE__ */ jsx(NestedPathSelector, { data: S, onSelect: _, dataType: "value" })
     ] }),
-    c,
+    d,
     a,
     l,
     i
@@ -4452,7 +4437,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   " ",
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: r, uiSchema: n, formData: a, onChange: l }) => {
-  const { selectedLang: i } = useLanguages(), c = useBlockSettingComponents("widget"), d = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), u = useThrottledCallback(
+  const { selectedLang: i } = useLanguages(), d = useBlockSettingComponents("widget"), c = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), u = useThrottledCallback(
     async ({ formData: g }, f) => {
       l({ formData: g }, f);
     },
@@ -4470,13 +4455,13 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         image: ImagePickerField,
         code: CodeEditor,
         colCount: RowColField,
-        ...c
+        ...d
       },
       fields: {
         link: LinkField,
         slider: SliderField,
         sources: SourcesField,
-        ...d
+        ...c
       },
       templates: {
         FieldTemplate: JSONFormFieldTemplate,
@@ -4509,17 +4494,17 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: C }, B, _) => {
-    B && (c == null ? void 0 : c._id) === r._id && a([r._id], { [B]: get(C, B) }, _);
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [d, c] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: C }, B, _) => {
+    B && (d == null ? void 0 : d._id) === r._id && a([r._id], { [B]: get(C, B) }, _);
   }, x = useCallback(
     debounce(({ formData: C }, B, _) => {
-      h({ formData: C }, B, _), d(C);
+      h({ formData: C }, B, _), c(C);
     }, 1500),
     [r == null ? void 0 : r._id, o]
   ), k = ({ formData: C }, B) => {
-    B && (n([r._id], { [B]: get(C, B) }), x({ formData: C }, B, { [B]: get(c, B) }));
+    B && (n([r._id], { [B]: get(C, B) }), x({ formData: C }, B, { [B]: get(d, B) }));
   }, b = ({ formData: C }, B) => {
-    B && (n([g._id], { [B]: get(C, B) }), x({ formData: C }, B, { [B]: get(c, B) }));
+    B && (n([g._id], { [B]: get(C, B) }), x({ formData: C }, B, { [B]: get(d, B) }));
   }, { schema: S, uiSchema: w } = useMemo(() => {
     const C = r == null ? void 0 : r._type;
     if (!C)
@@ -4641,8 +4626,8 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
   title: a,
   content: l,
   currentBreakpoint: i,
-  breakpoint: c,
-  width: d,
+  breakpoint: d,
+  width: c,
   icon: p,
   onClick: u
 }) => {
@@ -4651,10 +4636,10 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
     /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
       Button,
       {
-        onClick: () => u(d),
+        onClick: () => u(c),
         size: "sm",
         className: "h-7 w-7 rounded-md p-1",
-        variant: c === i ? "outline" : "ghost",
+        variant: d === i ? "outline" : "ghost",
         children: p
       }
     ) }),
@@ -4665,10 +4650,10 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
   ] }) : /* @__PURE__ */ jsx(
     Button,
     {
-      onClick: () => u(d),
+      onClick: () => u(c),
       size: "sm",
       className: "h-7 w-7 rounded-md p-1",
-      variant: c === i ? "outline" : "ghost",
+      variant: d === i ? "outline" : "ghost",
       children: p
     }
   );
@@ -4677,10 +4662,10 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
   canvas: r = !1,
   tooltip: n = !0
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: f } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), h = (b) => {
+  const [a, , l] = useScreenSizeWidth(), [i, d] = useCanvasDisplayWidth(), [c, p] = useSelectedBreakpoints(), u = c, g = p, { t: f } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), h = (b) => {
     u.includes(b) ? u.length > 2 && g(u.filter((S) => S !== b)) : g((S) => [...S, b]);
   }, x = (b) => {
-    r || l(b), c(b);
+    r || l(b), d(b);
   }, k = getBreakpointValue(r ? i : a).toLowerCase();
   return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (b) => /* @__PURE__ */ createElement(
     BreakpointCard,
@@ -4760,7 +4745,7 @@ function Countdown() {
   useEffect(() => {
     o === SECONDS && l();
   }, [o]);
-  const i = 18, c = 2 * Math.PI * i, d = c * (1 - (SECONDS - o) / SECONDS);
+  const i = 18, d = 2 * Math.PI * i, c = d * (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(
@@ -4780,8 +4765,8 @@ function Countdown() {
         {
           className: "text-blue-600",
           strokeWidth: "4",
-          strokeDasharray: c,
-          strokeDashoffset: d,
+          strokeDasharray: d,
+          strokeDashoffset: c,
           strokeLinecap: "round",
           stroke: "currentColor",
           fill: "transparent",
@@ -4795,23 +4780,23 @@ function Countdown() {
   ] });
 }
 const AskAIStyles = ({ blockId: o }) => {
-  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, g] = useState();
+  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, d] = useState(""), c = useRef(null), p = useRef(null), [u, g] = useState();
   useEffect(() => {
     var m;
-    (m = d.current) == null || m.focus();
+    (m = c.current) == null || m.focus();
   }, []);
   const f = (m) => {
     const { usage: h } = m || {};
-    !l && h && g(h), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    !l && h && g(h), p.current = setTimeout(() => g(void 0), 1e4), l || d("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: r("Ask AI") }),
     /* @__PURE__ */ jsx(
       Textarea,
       {
-        ref: d,
+        ref: c,
         value: i,
-        onChange: (m) => c(m.target.value),
+        onChange: (m) => d(m.target.value),
         placeholder: r("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
@@ -4858,11 +4843,11 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var T;
-  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), k = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), S = b.split(" ").filter((I) => !isEmpty(I)), w = () => {
-    const I = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(f, I, !0), x("");
-  }, [A, E] = useState([]), C = ({ value: I }) => {
-    const P = I.trim().toLowerCase(), N = P.match(/.+:/g);
+  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: d } = useTranslation(), [c] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), k = (T = first(c)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), S = b.split(" ").filter((L) => !isEmpty(L)), w = () => {
+    const L = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(f, L, !0), x("");
+  }, [A, E] = useState([]), C = ({ value: L }) => {
+    const P = L.trim().toLowerCase(), N = P.match(/.+:/g);
     let D = [];
     if (N && N.length > 0) {
       const [O] = N, R = P.replace(O, "");
@@ -4875,46 +4860,46 @@ function ManualClasses() {
     return E(map(D, "item"));
   }, B = () => {
     E([]);
-  }, _ = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), v = useMemo(
+  }, _ = (L) => L.name, I = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), v = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: !1,
-      placeholder: c("Enter classes separated by space"),
+      placeholder: d("Enter classes separated by space"),
       value: h,
-      onKeyDown: (I) => {
-        I.key === "Enter" && h.trim() !== "" && w();
+      onKeyDown: (L) => {
+        L.key === "Enter" && h.trim() !== "" && w();
       },
-      onChange: (I, { newValue: P }) => x(P),
+      onChange: (L, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [h, c, o]
-  ), y = (I) => {
+    [h, d, o]
+  ), y = (L) => {
     debugger;
     const P = r.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(f, [I]), u(f, P, !0), n(""), l(-1);
+    g(f, [L]), u(f, P, !0), n(""), l(-1);
   }, j = () => {
     if (navigator.clipboard === void 0) {
-      toast.error(c("Clipboard not supported"));
+      toast.error(d("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(S.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(S.join(" ")), toast.success(d("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__ */ jsx("span", { children: d("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: j, className: "cursor-pointer" }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: d("Copy classes to clipboard") }) })
         ] })
       ] }),
       m ? /* @__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(SparklesIcon, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "ml-2", children: c("Ask AI") })
+          /* @__PURE__ */ jsx("span", { className: "ml-2", children: d("Ask AI") })
         ] }) }),
         /* @__PURE__ */ jsx(PopoverContent, { side: "left", className: "p-2", children: /* @__PURE__ */ jsx(AskAIStyles, { blockId: p == null ? void 0 : p._id }) })
       ] }) : null
@@ -4927,7 +4912,7 @@ function ManualClasses() {
           onSuggestionsFetchRequested: C,
           onSuggestionsClearRequested: B,
           getSuggestionValue: _,
-          renderSuggestion: L,
+          renderSuggestion: I,
           inputProps: v,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
@@ -4952,37 +4937,37 @@ function ManualClasses() {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: S.map(
-      (I, P) => a === P ? /* @__PURE__ */ jsx(
+      (L, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: r,
           onChange: (N) => n(N.target.value),
           onBlur: () => {
-            y(I);
+            y(L);
           },
           onKeyDown: (N) => {
-            N.key === "Enter" && y(I);
+            N.key === "Enter" && y(L);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
         },
-        I
+        L
       ) : /* @__PURE__ */ jsxs(
         "button",
         {
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
           children: [
-            I,
-            r !== I && /* @__PURE__ */ jsx(
+            L,
+            r !== L && /* @__PURE__ */ jsx(
               Cross2Icon,
               {
-                onClick: () => g(f, [I], !0),
+                onClick: () => g(f, [L], !0),
                 className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
               }
             )
           ]
         },
-        I
+        L
       )
     ) })
   ] });
@@ -5076,26 +5061,26 @@ const BlockStylingProps = () => {
   const o = useSelectedBlock(), [r, n] = useSelectedStylingBlocks(), { t: a } = useTranslation();
   if (!o) return null;
   const l = Object.keys(o).filter(
-    (c) => typeof o[c] == "string" && o[c].startsWith("#styles:")
+    (d) => typeof o[d] == "string" && o[d].startsWith("#styles:")
   );
   if (isEmpty(l) || l.length <= 1) return null;
-  const i = (c) => find(r, (d) => d.prop === c);
+  const i = (d) => find(r, (c) => c.prop === d);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
       a("Style element"),
       ":"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: map(l, (c) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: map(l, (d) => /* @__PURE__ */ jsx(
       Badge,
       {
         className: "cursor-pointer",
         onClick: () => {
-          n([{ id: `${c}-${o._id}`, blockId: o._id, prop: c }]);
+          n([{ id: `${d}-${o._id}`, blockId: o._id, prop: d }]);
         },
-        variant: i(c) ? "default" : "secondary",
-        children: startCase(c)
+        variant: i(d) ? "default" : "secondary",
+        children: startCase(d)
       },
-      c
+      d
     )) }),
     /* @__PURE__ */ jsx("div", { className: "my-2 h-[1px] w-full bg-border" })
   ] });
@@ -5103,9 +5088,9 @@ const BlockStylingProps = () => {
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ jsx(StyleContext.Provider, { value: { canReset: r, canChange: n }, children: o })
 ), DropDownChoices = ({ label: o, property: r, onChange: n }) => {
-  const { getClasses: a } = useTailwindClassList(), l = a(r), i = useCurrentClassByProperty(r), c = useMemo(() => get(i, "cls", ""), [i]), { canChange: d } = useContext(StyleContext), p = /\[.*\]/g.test(c);
+  const { getClasses: a } = useTailwindClassList(), l = a(r), i = useCurrentClassByProperty(r), d = useMemo(() => get(i, "cls", ""), [i]), { canChange: c } = useContext(StyleContext), p = /\[.*\]/g.test(d);
   return /* @__PURE__ */ jsx("div", { className: o ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: c }),
+    /* @__PURE__ */ jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: d }),
     /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
       /* @__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 arbitrary value." })
@@ -5115,14 +5100,14 @@ const BlockStylingProps = () => {
     {
       rounded: o,
       onChange: (u) => n(u, r),
-      selected: c,
+      selected: d,
       options: l,
-      disabled: !d
+      disabled: !c
     }
   ) });
 };
 function DropDown({ selected: o, onChange: r, rounded: n = !1, options: a, disabled: l = !1 }) {
-  const i = o.replace(/.*:/g, "").trim(), { undo: c, redo: d } = useUndoManager();
+  const i = o.replace(/.*:/g, "").trim(), { undo: d, redo: c } = useUndoManager();
   return /* @__PURE__ */ jsxs(
     "select",
     {
@@ -5130,7 +5115,7 @@ function DropDown({ selected: o, onChange: r, rounded: n = !1, options: a, disab
       className: `${n ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
       onChange: (p) => r(p.target.value),
       onKeyDown: (p) => {
-        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
+        p.ctrlKey && (p.key === "z" && d(), p.key === "y" && c());
       },
       value: i,
       children: [
@@ -5153,17 +5138,17 @@ const COLOR_PROP = {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: r }) => {
-  const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), f = get(u, "2", ""), m = useCallback(
+  const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, d] = useState([]), [c, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), f = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
     (k) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(k) ? (c([]), p({ color: k })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: k, shade: b.shade ? b.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(k) ? (d([]), p({ color: k })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: k, shade: b.shade ? b.shade : "500" })));
     },
-    [c, p]
+    [d, p]
   );
   useEffect(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(g))
-      return c([]);
-    c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+      return d([]);
+    d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
   const h = useCallback(
     // eslint-disable-next-line no-shadow
@@ -5177,9 +5162,9 @@ const COLOR_PROP = {
   }, [n]);
   const { match: x } = useTailwindClassList();
   return useEffect(() => {
-    const b = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    const b = `${get(COLOR_PROP, o, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
     x(o, b) && r(b, o);
-  }, [x, d, r, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+  }, [x, c, r, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
       {
@@ -5416,22 +5401,22 @@ const COLOR_PROP = {
   ] }),
   static: Cross1Icon
 }, IconChoices = ({ property: o, onChange: r }) => {
-  const { getClasses: n } = useTailwindClassList(), a = n(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
-  return /* @__PURE__ */ jsx("div", { className: "flex grow flex-wrap gap-1", children: map(a, (d) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+  const { getClasses: n } = useTailwindClassList(), a = n(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), d = useMemo(() => get(i, "cls", ""), [i]);
+  return /* @__PURE__ */ jsx("div", { className: "flex grow flex-wrap gap-1", children: map(a, (c) => /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         disabled: !l,
-        onClick: () => r(d, o),
-        className: `cursor-pointer rounded border border-border p-1 disabled:cursor-not-allowed ${c === d ? "bg-primary text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: React__default.createElement(get(EDITOR_ICONS, d, BoxIcon))
+        onClick: () => r(c, o),
+        className: `cursor-pointer rounded border border-border p-1 disabled:cursor-not-allowed ${d === c ? "bg-primary text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: React__default.createElement(get(EDITOR_ICONS, c, BoxIcon))
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(d)) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(c)) })
   ] })) });
 }, RangeChoices = ({ property: o, onChange: r }) => {
-  const { canReset: n, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), { getClasses: c } = useTailwindClassList(), d = c(o, [""]), p = d.indexOf(i) > -1 ? d.indexOf(i) : 0, u = /\[.*\]/g.test(i);
+  const { canReset: n, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), { getClasses: d } = useTailwindClassList(), c = d(o, [""]), p = c.indexOf(i) > -1 ? c.indexOf(i) : 0, u = /\[.*\]/g.test(i);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: u ? /* @__PURE__ */ jsx("div", { className: "px-2 py-[5px]", children: i }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -5439,7 +5424,7 @@ const COLOR_PROP = {
         type: "button",
         className: "hover:bg-bg-gray-700 box-border w-2/12 rounded-bl rounded-tl bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
         disabled: !a && (!n || p - 1 < 0),
-        onClick: () => r(nth(d, p - 1), o),
+        onClick: () => r(nth(c, p - 1), o),
         children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
           MinusIcon,
           {
@@ -5454,12 +5439,12 @@ const COLOR_PROP = {
       {
         type: "button",
         className: "hover:bg-bg-gray-700 w-2/12 rounded-br rounded-tr bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!n || p + 1 >= d.length),
-        onClick: () => r(nth(d, p + 1), o),
+        disabled: !a && (!n || p + 1 >= c.length),
+        onClick: () => r(nth(c, p + 1), o),
         children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
           PlusIcon,
           {
-            className: !a && (!n || p + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !a && (!n || p + 1 >= c.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
@@ -5472,8 +5457,8 @@ const COLOR_PROP = {
     return { value: "", unit: n };
   const a = r.length ? new RegExp(r.join("|"), "g") : /XXXXXX/g;
   n = n.replace(a, "");
-  const l = o.match(a), i = l && l.length > 1, c = !isEmpty(n) && Number.isNaN(Number(n));
-  return i || c ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: n, unit: l ? l[0] : "" };
+  const l = o.match(a), i = l && l.length > 1, d = !isEmpty(n) && Number.isNaN(Number(n));
+  return i || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: n, unit: l ? l[0] : "" };
 }, getTwClassValue = (o) => {
   const r = o.startsWith("-") ? "-" : "", n = o.split("-").pop();
   if (["auto", "none"].includes(n))
@@ -5572,9 +5557,9 @@ const COLOR_PROP = {
   onDragEnd: a,
   onDragStart: l,
   negative: i,
-  cssProperty: c
+  cssProperty: d
 }) => {
-  const { setDragData: d } = useContext(BlockSettingsContext);
+  const { setDragData: c } = useContext(BlockSettingsContext);
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -5588,9 +5573,9 @@ const COLOR_PROP = {
           dragStartValue: `${r}`,
           dragUnit: o,
           negative: i,
-          cssProperty: c
+          cssProperty: d
         };
-        l(u), d(u);
+        l(u), c(u);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
@@ -5610,7 +5595,7 @@ const COLOR_PROP = {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [f, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [k, b] = useState(""), [S, w] = useState(!1), [A, E] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: d, classPrefix: c, cssProperty: p, units: u, negative: g } = o, [f, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [k, b] = useState(""), [S, w] = useState(!1), [A, E] = useState(!1);
   useEffect(() => {
     const { value: v, unit: y } = getClassValueAndUnit(i);
     if (y === "") {
@@ -5619,7 +5604,7 @@ const COLOR_PROP = {
     }
     m(y), l(y === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const C = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), B = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), _ = useCallback(
+  const C = useThrottledCallback((v) => d(v), [d], THROTTLE_TIME), B = useThrottledCallback((v) => d(v, !1), [d], THROTTLE_TIME), _ = useCallback(
     (v = !1) => {
       const y = getUserInputValues(`${a}`, u);
       if (get(y, "error", !1)) {
@@ -5628,16 +5613,16 @@ const COLOR_PROP = {
       }
       const j = get(y, "unit") !== "" ? get(y, "unit") : f;
       if (j === "auto" || j === "none") {
-        C(`${d}${j}`);
+        C(`${c}${j}`);
         return;
       }
       if (get(y, "value") === "")
         return;
-      const I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      v ? B(I) : C(I);
+      const L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${c}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      v ? B(L) : C(L);
     },
-    [C, B, a, f, d, u]
-  ), L = useCallback(
+    [C, B, a, f, c, u]
+  ), I = useCallback(
     (v) => {
       const y = getUserInputValues(`${a}`, u);
       if (get(y, "error", !1)) {
@@ -5645,15 +5630,15 @@ const COLOR_PROP = {
         return;
       }
       if (v === "auto" || v === "none") {
-        C(`${d}${v}`);
+        C(`${c}${v}`);
         return;
       }
       if (get(y, "value") === "")
         return;
-      const j = get(y, "unit") !== "" ? get(y, "unit") : v, I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      C(I);
+      const j = get(y, "unit") !== "" ? get(y, "unit") : v, L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${c}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      C(L);
     },
-    [C, a, d, u]
+    [C, a, c, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: f === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -5684,7 +5669,7 @@ const COLOR_PROP = {
             const y = parseInt$1(v.target.value);
             let j = isNaN$1(y) ? 0 : y;
             v.keyCode === 38 && (j += 1), v.keyCode === 40 && (j -= 1);
-            const T = `${j}`, P = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
+            const T = `${j}`, P = `${T.startsWith("-") ? "-" : ""}${c}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
             B(P);
           },
           onKeyUp: (v) => {
@@ -5724,7 +5709,7 @@ const COLOR_PROP = {
             units: u,
             current: f,
             onSelect: (v) => {
-              n(!1), m(v), L(v);
+              n(!1), m(v), I(v);
             }
           }
         ) }) })
@@ -5737,14 +5722,14 @@ const COLOR_PROP = {
         onDragEnd: (v) => {
           if (b(() => ""), w(!1), isEmpty(v))
             return;
-          const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${f === "-" ? "" : f}]`;
+          const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${c}[${y.replace("-", "")}${f === "-" ? "" : f}]`;
           C(T);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
           b(v);
-          const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${f === "-" ? "" : f}]`;
+          const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${c}[${y.replace("-", "")}${f === "-" ? "" : f}]`;
           B(T);
         },
         currentValue: a,
@@ -5842,11 +5827,11 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), f = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), k = useMemo(() => get(f, "fullCls", ""), [f]), b = useCallback(
+  }, units: d, negative: c = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), f = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), k = useMemo(() => get(f, "fullCls", ""), [f]), b = useCallback(
     (B, _ = !0) => {
-      const L = { dark: p, mq: g, mod: u, cls: B, property: l, fullCls: "" };
-      (p || u !== "") && (L.mq = "xs");
-      const v = generateFullClsName(L);
+      const I = { dark: p, mq: g, mod: u, cls: B, property: l, fullCls: "" };
+      (p || u !== "") && (I.mq = "xs");
+      const v = generateFullClsName(I);
       m(x, [v], _);
     },
     [x, p, g, u, l, m]
@@ -5878,9 +5863,9 @@ const COLOR_PROP = {
           {
             currentClass: get(f, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
-            units: c || [],
+            units: d || [],
             onChange: b,
-            negative: d,
+            negative: c,
             cssProperty: l
           }
         ) : null,
@@ -5928,16 +5913,16 @@ const COLOR_PROP = {
   borderT: a = !1,
   type: l = "arbitrary",
   units: i = basicUnits,
-  negative: c = !1
+  negative: d = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(r[0].key), g = useSelectedBlockCurrentClasses(), f = useCallback((m) => map(g, "property").includes(m), [g]);
+  const { t: c } = useTranslation(), [p, u] = useState(r[0].key), g = useSelectedBlockCurrentClasses(), f = useCallback((m) => map(g, "property").includes(m), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `mb-2 border-border py-2 first:pt-0 last:pb-0 ${n ? "border-b" : ""} ${a ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
-          o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
+          o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: c(o) }),
           /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: r.map(({ label: m, key: h }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
               "button",
@@ -5963,7 +5948,7 @@ const COLOR_PROP = {
             units: [...i],
             label: "",
             property: p,
-            negative: c
+            negative: d
           }
         ) })
       ]
@@ -5973,10 +5958,10 @@ const COLOR_PROP = {
   const { t: n } = useTranslation(), a = useSelectedBlockCurrentClasses(), l = useMemo(() => {
     const i = (p) => flatten(
       p.map((u) => u.styleType === "multiple" ? map(u.options, "key") : u.property)
-    ), c = flatten(
+    ), d = flatten(
       r.map((p) => p.styleType === "accordion" ? i(p.items) : p.styleType === "multiple" ? map(p.options, "key") : p.property)
-    ), d = map(a, "property");
-    return intersection(c, d).length > 0;
+    ), c = map(a, "property");
+    return intersection(d, c).length > 0;
   }, [a, r]);
   return /* @__PURE__ */ jsxs("details", { children: [
     /* @__PURE__ */ jsx("summary", { className: "my-px cursor-default rounded-md bg-gray-50 p-px px-2 text-[11px] text-foreground dark:bg-gray-800", children: /* @__PURE__ */ jsxs("div", { className: "inline", children: [
@@ -5992,13 +5977,13 @@ const COLOR_PROP = {
   ] });
 }, SectionContext = createContext({}), StylingGroup = ({ section: o, showAccordian: r }) => {
   const { t: n } = useTranslation(), a = useSelectedBlockCurrentClasses(), l = useCallback(
-    (c = []) => {
-      const d = {};
+    (d = []) => {
+      const c = {};
       for (let u = 0; u < a.length; u++)
-        d[a[u].property] = a[u].cls;
+        c[a[u].property] = a[u].cls;
       let p = !0;
-      for (const u in c)
-        if (!has(d, u) || d[u] !== c[u]) {
+      for (const u in d)
+        if (!has(c, u) || c[u] !== d[u]) {
           p = !1;
           break;
         }
@@ -6008,8 +5993,8 @@ const COLOR_PROP = {
   ), i = useMemo(() => ({}), []);
   return /* @__PURE__ */ jsx(SectionContext.Provider, { value: i, children: r ? /* @__PURE__ */ jsxs(AccordionItem, { value: o.heading, className: "border-none", children: [
     /* @__PURE__ */ jsx(AccordionTrigger, { className: "border-slate-150 border-t py-2 text-xs", children: /* @__PURE__ */ jsx("div", { className: "flex items-center py-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2 text-xs font-medium", children: startCase(n(o.heading)) }) }) }),
-    /* @__PURE__ */ jsx(AccordionContent, { className: "py-2", children: o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label + "multiple-choices") : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label + "nested-options") : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label + "block-style")) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: o.items.map((c, d) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label + "multiple-choices" + d) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label + "nested-options" + d) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label + "block-style" + d)) }) });
+    /* @__PURE__ */ jsx(AccordionContent, { className: "py-2", children: o.items.map((d) => has(d, "component") ? React__default.createElement(d.component, { key: d.label }) : has(d, "styleType") ? d.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...d }, d.label + "multiple-choices") : d.styleType === "accordion" && l(d == null ? void 0 : d.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...d }, d.label + "nested-options") : null : /* @__PURE__ */ jsx(BlockStyle, { ...d }, d.label + "block-style")) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: o.items.map((d, c) => has(d, "component") ? React__default.createElement(d.component, { key: d.label }) : has(d, "styleType") ? d.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...d }, d.label + "multiple-choices" + c) : d.styleType === "accordion" && l(d == null ? void 0 : d.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...d }, d.label + "nested-options" + c) : null : /* @__PURE__ */ jsx(BlockStyle, { ...d }, d.label + "block-style" + c)) }) });
 }, MAPPER = {
   px: 1,
   "%": 1,
@@ -6023,7 +6008,7 @@ const COLOR_PROP = {
   ms: 0.1
 };
 function BlockStyling() {
-  const { flexChild: o, gridChild: r } = useSelectedBlocksDisplayChild(), [n] = useSelectedStylingBlocks(), [a, l] = React__default.useState(""), [i, c] = React__default.useState({
+  const { flexChild: o, gridChild: r } = useSelectedBlocksDisplayChild(), [n] = useSelectedStylingBlocks(), [a, l] = React__default.useState(""), [i, d] = React__default.useState({
     onDrag: (u) => u,
     onDragEnd: (u) => u,
     dragStartY: 0,
@@ -6032,7 +6017,7 @@ function BlockStyling() {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), d = useThrottledCallback(
+  }), c = useThrottledCallback(
     (u) => {
       const g = !get(i, "negative", !1), f = get(i, "cssProperty", "");
       let m = parseFloat(i.dragStartValue);
@@ -6045,7 +6030,7 @@ function BlockStyling() {
     [i],
     50
   ), p = useCallback(() => {
-    setTimeout(() => i.onDragEnd(`${a}`), 100), c({
+    setTimeout(() => i.onDragEnd(`${a}`), 100), d({
       onDrag: (u) => u,
       onDragEnd: (u) => u,
       dragStartY: 0,
@@ -6055,12 +6040,12 @@ function BlockStyling() {
       negative: !1,
       cssProperty: ""
     });
-  }, [i, a, c]);
-  return isEmpty(n) ? null : /* @__PURE__ */ jsxs(BlockSettingsContext.Provider, { value: { setDragData: c }, children: [
+  }, [i, a, d]);
+  return isEmpty(n) ? null : /* @__PURE__ */ jsxs(BlockSettingsContext.Provider, { value: { setDragData: d }, children: [
     i.dragging ? /* @__PURE__ */ jsx(
       "div",
       {
-        onMouseMove: d,
+        onMouseMove: c,
         onMouseUp: () => p(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
@@ -6083,7 +6068,7 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
   parentId: n,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), m = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: d, label: c } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), m = () => {
     if (console.log("addBlockToPage", o), has(o, "blocks")) {
       const k = isFunction(o.blocks) ? o.blocks() : o.blocks;
       u(syncBlocksWithDefaults(k), n || null, a);
@@ -6106,12 +6091,12 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
         draggable: h ? "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)) })
+          createElement(d || BoxIcon, { className: "w-4 h-4 mx-auto" }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(c || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(c || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -6134,8 +6119,8 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
   return r.test(o) || n.test(o);
 }, getVideoURLFromHTML = (o) => {
   if (isEmpty(o)) return o;
-  const r = /<video[^>]+src=['"]([^'">]+)['"]/, n = /<iframe[^>]+src=['"]([^'">]+)['"]/, a = o.match(r), l = o.match(n), i = a ? a[1] : l ? l[1] : null, c = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, d = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
-  return i && (c.test(i) || d.test(i)) ? i : o;
+  const r = /<video[^>]+src=['"]([^'">]+)['"]/, n = /<iframe[^>]+src=['"]([^'">]+)['"]/, a = o.match(r), l = o.match(n), i = a ? a[1] : l ? l[1] : null, d = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, c = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
+  return i && (d.test(i) || c.test(i)) ? i : o;
 }, NAME_ATTRIBUTES = ["chai-name", "data-chai-name"], ATTRIBUTE_MAP = {
   img: { alt: "alt", width: "width", height: "height", src: "image" },
   video: {
@@ -6182,8 +6167,8 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
     if (!includes(NAME_ATTRIBUTES, l))
       if (n[l]) {
         if (o.tagName === "img" && l === "src" && !i.startsWith("http")) {
-          const c = find(o.attributes, { key: "width" }), d = find(o.attributes, { key: "height" });
-          c && d ? i = `https://via.placeholder.com/${c == null ? void 0 : c.value}x${d == null ? void 0 : d.value}` : i = "https://via.placeholder.com/150x150";
+          const d = find(o.attributes, { key: "width" }), c = find(o.attributes, { key: "height" });
+          d && c ? i = `https://via.placeholder.com/${d == null ? void 0 : d.value}x${c == null ? void 0 : c.value}` : i = "https://via.placeholder.com/150x150";
         }
         set(r, n[l], getSanitizedValue(i));
       } else includes(["style", "class", "srcset"], l) || (has(r, "styles_attrs") || (r.styles_attrs = {}), startsWith(l, "@") && (l = l.replace("@", "x-on:")), r.styles_attrs[`${l}`] = getSanitizedValue(i));
@@ -6197,16 +6182,16 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
   }
   return { [r]: `${STYLES_KEY},` };
 }, getBlockProps = (o) => {
-  const r = get(o, "attributes", []), n = r.find((d) => d.key === "data-chai-richtext" || d.key === "chai-richtext"), a = r.find((d) => d.key === "data-chai-lightbox" || d.key === "chai-lightbox"), l = r.find((d) => d.key === "data-chai-dropdown" || d.key === "chai-dropdown"), i = r.find(
-    (d) => d.key === "data-chai-dropdown-button" || d.key === "chai-dropdown-button"
-  ), c = r.find(
-    (d) => d.key === "data-chai-dropdown-content" || d.key === "chai-dropdown-content"
+  const r = get(o, "attributes", []), n = r.find((c) => c.key === "data-chai-richtext" || c.key === "chai-richtext"), a = r.find((c) => c.key === "data-chai-lightbox" || c.key === "chai-lightbox"), l = r.find((c) => c.key === "data-chai-dropdown" || c.key === "chai-dropdown"), i = r.find(
+    (c) => c.key === "data-chai-dropdown-button" || c.key === "chai-dropdown-button"
+  ), d = r.find(
+    (c) => c.key === "data-chai-dropdown-content" || c.key === "chai-dropdown-content"
   );
   if (l)
     return { _type: "Dropdown" };
   if (i)
     return { _type: "DropdownButton" };
-  if (c)
+  if (d)
     return { _type: "DropdownContent" };
   if (n)
     return { _type: "RichText" };
@@ -6290,11 +6275,11 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
     case "tfoot":
       return { _type: "TableFooter" };
     default: {
-      const d = get(o, "children", []).length > 0 ? "Box" : "EmptyBox";
+      const c = get(o, "children", []).length > 0 ? "Box" : "EmptyBox";
       return {
-        _type: d,
+        _type: c,
         tag: o.tagName,
-        _name: d == "EmptyBox" || o.tagName === "div" ? d : capitalize(o.tagName)
+        _name: c == "EmptyBox" || o.tagName === "div" ? c : capitalize(o.tagName)
       };
     }
   }
@@ -6307,9 +6292,9 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
     return isEmpty(get(n, "content", "")) ? [] : r && shouldAddText(r.node, r.block) ? (set(r, "block.content", get(n, "content", "")), []) : { ...a, _type: "Text", content: get(n, "content", "") };
   const l = get(n, "attributes", []), i = l.find(
     (A) => A.key === "data-chai-richtext" || A.key === "chai-richtext"
-  ), c = l.find(
-    (A) => A.key === "data-chai-lightbox" || A.key === "chai-lightbox"
   ), d = l.find(
+    (A) => A.key === "data-chai-lightbox" || A.key === "chai-lightbox"
+  ), c = l.find(
     (A) => A.key === "data-chai-dropdown" || A.key === "chai-dropdown"
   ), p = l.find(
     (A) => A.key === "data-chai-dropdown-button" || A.key === "chai-dropdown-button"
@@ -6327,7 +6312,7 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
   }
   if (i)
     return a.content = stringify(n.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
-  if (c) {
+  if (d) {
     const A = [
       "data-chai-lightbox",
       "chai-lightbox",
@@ -6350,7 +6335,7 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
       has(a, `styles_attrs.${E}`) && delete a.styles_attrs[E];
     });
   }
-  if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
+  if (c && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
     const A = filter(n.children || [], (C) => (C == null ? void 0 : C.tagName) !== "span");
     a.content = getTextContent(A);
@@ -6376,7 +6361,7 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
     return hasVideoEmbed(A) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(A)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = A, [a];
   } else if (n.tagName === "svg") {
     const A = find(n.attributes, { key: "height" }), E = find(n.attributes, { key: "width" }), C = get(A, "value") ? `[${get(A, "value")}px]` : "24px", B = get(E, "value") ? `[${get(E, "value")}px]` : "24px", _ = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${B} h-${C}`, _)}`.trim(), n.attributes = filter(n.attributes, (L) => !includes(["style", "width", "height", "class"], L.key)), a.icon = stringify([n]), [a];
+    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${B} h-${C}`, _)}`.trim(), n.attributes = filter(n.attributes, (I) => !includes(["style", "width", "height", "class"], I.key)), a.icon = stringify([n]), [a];
   } else if (n.tagName == "option" && r && ((w = r.block) == null ? void 0 : w._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
@@ -6392,8 +6377,8 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
   };
 }, getSanitizedHTML = (o) => {
   o = o.replace(/(\w+)=\\?"(.*?)\\?"/g, (a, l, i) => {
-    let c = i.replace(/\\"/g, '"');
-    return c = c.replace(/{([^}]+)}/g, (d) => d.replace(/"/g, '\\"')), `${l}="${c.replace(/\\"/g, '"')}"`;
+    let d = i.replace(/\\"/g, '"');
+    return d = d.replace(/{([^}]+)}/g, (c) => c.replace(/"/g, '\\"')), `${l}="${d.replace(/\\"/g, '"')}"`;
   }), o = o.replace(/\\n/g, "").replace(/\\\\/g, "").replace(/\\([/<>])/g, "$1").replace(/\\./g, "").replace(/[\n\r\t\f\v]/g, ""), o = o.replace(/\$name="[^"]*"/g, "");
   const r = o.match(/<body[^>]*>[\s\S]*?<\/body>/);
   return (r && r.length > 0 ? r[0].replace(/<body/, "<div").replace(/<\/body>/, "</div>") : o).replace(/\s+/g, " ").replaceAll("> <", "><").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").trim();
@@ -6401,9 +6386,9 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
   const r = parse(getSanitizedHTML(o));
   return isEmpty(o) ? [] : flatten(traverseNodes(r));
 }, ImportHTML = ({ parentId: o, position: r }) => {
-  const { t: n } = useTranslation(), [a, l] = useState(""), { addPredefinedBlock: i } = useAddBlock(), c = () => {
-    const d = getBlocksFromHTML(a);
-    i([...d], o, r), l(""), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+  const { t: n } = useTranslation(), [a, l] = useState(""), { addPredefinedBlock: i } = useAddBlock(), d = () => {
+    const c = getBlocksFromHTML(a);
+    i([...c], o, r), l(""), 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: n("Use HTML snippets from Tailwind CSS component libraries") }) }),
@@ -6414,8 +6399,8 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
         {
           autoFocus: !0,
           tabIndex: 1,
-          ref: (d) => d && d.focus(),
-          onChange: (d) => l(d.target.value),
+          ref: (c) => c && c.focus(),
+          onChange: (c) => l(c.target.value),
           rows: 12,
           value: a,
           placeholder: n("Enter your code snippet here"),
@@ -6423,7 +6408,7 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "", onClick: () => c(), size: "sm", className: "w-fit", children: n("Import HTML") }) })
+    /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "", onClick: () => d(), size: "sm", className: "w-fit", children: n("Import HTML") }) })
   ] });
 }, ChaiSelect = ({
   defaultValue: o = "",
@@ -6433,9 +6418,9 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
   className: l = "",
   height: i = ""
 }) => {
-  const [c, d] = useState(o), p = (u) => {
+  const [d, c] = useState(o), p = (u) => {
     const g = u.target.value;
-    d(g), r(g);
+    c(g), r(g);
   };
   return /* @__PURE__ */ jsx("div", { className: cn$1("relative inline-block w-full", l), children: /* @__PURE__ */ jsxs(
     "select",
@@ -6444,7 +6429,7 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
         "mt-1 flex w-full rounded-md border border-border bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         i
       ),
-      value: c,
+      value: d,
       onChange: p,
       children: [
         /* @__PURE__ */ jsx("option", { value: "", disabled: !0, children: a }),
@@ -6481,20 +6466,20 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), f = get(o, "name", get(o, "label")), m = get(o, "description", ""), h = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), k = (w) => {
+  const [l, i] = useState(!1), d = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), f = get(o, "name", get(o, "label")), m = get(o, "description", ""), h = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), k = (w) => {
     const A = has(w, "styles_attrs.data-page-section");
     return w._type === "Box" && A;
   }, b = useCallback(
     async (w) => {
       if (w.stopPropagation(), has(o, "component")) {
-        d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+        c(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const A = await c(r, o);
+      const A = await d(r, o);
       isEmpty(A) || p(syncBlocksWithDefaults(A), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
-    [d, p, o, c, r, n, a]
+    [c, p, o, d, r, n, a]
   );
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
@@ -6504,7 +6489,7 @@ const BlockCard = ({
         } : b,
         draggable: h ? "true" : "false",
         onDragStart: async (w) => {
-          const A = await c(r, o);
+          const A = await d(r, o);
           let E = n;
           if (k(first(A)) && (E = null), !isEmpty(A)) {
             const C = { blocks: A, uiLibrary: !0, parent: E };
@@ -6541,14 +6526,14 @@ const BlockCard = ({
     ] }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: r }) => {
-  const [n, a] = useSelectedLibrary(), l = useBuilderProp("uiLibraries", []), i = l.find((y) => y.id === n) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [f, m] = useState([]), h = useRef(null);
+  const [n, a] = useSelectedLibrary(), l = useBuilderProp("uiLibraries", []), i = l.find((y) => y.id === n) || first(l), { data: d, isLoading: c, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [f, m] = useState([]), h = useRef(null);
   useEffect(() => {
-    c && c.length > 0 && (h.current = new Fuse(c, {
+    d && d.length > 0 && (h.current = new Fuse(d, {
       keys: ["name", "label", "description", "group"],
       threshold: 0.4,
       ignoreLocation: !0
     }));
-  }, [c]), useEffect(() => {
+  }, [d]), useEffect(() => {
     if (!u.trim() || !h.current) {
       m([]);
       return;
@@ -6556,7 +6541,7 @@ const BlockCard = ({
     const y = h.current.search(u).map((j) => j.item);
     m(y);
   }, [u]);
-  const x = u.trim() && !isEmpty(f) ? f : c, k = groupBy(x, "group"), [b, S] = useState(null);
+  const x = u.trim() && !isEmpty(f) ? f : d, k = groupBy(x, "group"), [b, S] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(k))) {
       S(null);
@@ -6576,12 +6561,12 @@ const BlockCard = ({
   }, _ = () => {
     g("");
   };
-  if (d)
+  if (c)
     return /* @__PURE__ */ jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const L = filter(w, (y, j) => j % 2 === 0), v = filter(w, (y, j) => j % 2 === 1);
+  const I = filter(w, (y, j) => j % 2 === 0), v = filter(w, (y, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
@@ -6642,7 +6627,7 @@ const BlockCard = ({
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
             isEmpty(w) && !isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: L.map((y, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: I.map((y, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -6685,15 +6670,15 @@ const BlockCard = ({
   position: r,
   gridCols: n = "grid-cols-2"
 }) => {
-  const { data: a, isLoading: l, refetch: i, error: c } = usePartialBlocksList(), [d, p] = useAtom$1(partialBlocksDataAtom), [u, g] = useAtom$1(hasInitializedPartialBlocksAtom);
+  const { data: a, isLoading: l, refetch: i, error: d } = usePartialBlocksList(), [c, p] = useAtom$1(partialBlocksDataAtom), [u, g] = useAtom$1(hasInitializedPartialBlocksAtom);
   useEffect(() => {
-    if (!u || Object.keys(d.blocks).length === 0)
-      if (c)
+    if (!u || Object.keys(c.blocks).length === 0)
+      if (d)
         p({
           blocks: [],
           groups: [],
           isLoading: !1,
-          error: c
+          error: d
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
         const m = Object.entries(a).map(([x, k]) => {
@@ -6730,14 +6715,14 @@ const BlockCard = ({
     u,
     g,
     p,
-    d.blocks,
-    c
+    c.blocks,
+    d
   ]);
   const f = () => {
     p((m) => ({ ...m, 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" }),
+  return c.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : c.error || c.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: c.error || "No partial blocks available" }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -6752,13 +6737,13 @@ const BlockCard = ({
       gridCols: n,
       parentId: o,
       position: r,
-      groups: d.groups,
-      blocks: d.blocks
+      groups: c.groups,
+      blocks: c.blocks
     }
   );
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: r, parentId: n, position: a, gridCols: l = "grid-cols-4" }) => {
   var v;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (v = find(c, (y) => y._id === n)) == null ? void 0 : v._type, [m, h] = useState("all"), [x, k] = useState(null), b = useRef(null);
+  const { t: i } = useTranslation(), [d] = useBlocksStore(), [c, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (v = find(d, (y) => y._id === n)) == null ? void 0 : v._type, [m, h] = useState("all"), [x, k] = useState(null), b = useRef(null);
   useEffect(() => {
     const y = setTimeout(() => {
       var j;
@@ -6766,8 +6751,8 @@ const BlockCard = ({
     }, 0);
     return () => clearTimeout(y);
   }, [g]), useEffect(() => {
-    d && (h("all"), k(null));
-  }, [d]), useEffect(() => (b.current = debounce((y) => {
+    c && (h("all"), k(null));
+  }, [c]), useEffect(() => (b.current = debounce((y) => {
     h(y);
   }, 500), () => {
     b.current && b.current.cancel();
@@ -6779,22 +6764,22 @@ const BlockCard = ({
   }, []), A = useCallback((y) => {
     b.current && b.current.cancel(), h(y), k(null);
   }, []), E = useMemo(
-    () => d ? values(r).filter(
+    () => c ? values(r).filter(
       (y) => {
         var j, T;
-        return (((j = y.label) == null ? void 0 : j.toLowerCase()) + " " + ((T = y.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
+        return (((j = y.label) == null ? void 0 : j.toLowerCase()) + " " + ((T = y.type) == null ? void 0 : T.toLowerCase())).includes(c.toLowerCase());
       }
     ) : r,
-    [r, d]
+    [r, c]
   ), C = useMemo(
-    () => d ? o.filter(
+    () => c ? o.filter(
       (y) => reject(filter(values(E), { group: y }), { hidden: !0 }).length > 0
     ) : o.filter((y) => reject(filter(values(r), { group: y }), { hidden: !0 }).length > 0),
-    [r, E, o, d]
+    [r, E, o, c]
   ), B = useMemo(
     () => sortBy(C, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
     [C]
-  ), _ = useMemo(() => m === "all" ? E : filter(values(E), { group: m }), [E, m]), L = useMemo(() => m === "all" ? B : [m], [B, m]);
+  ), _ = useMemo(() => m === "all" ? E : filter(values(E), { group: m }), [E, m]), I = useMemo(() => m === "all" ? B : [m], [B, m]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -6802,7 +6787,7 @@ const BlockCard = ({
         ref: u,
         type: "search",
         placeholder: i("Search blocks..."),
-        value: d,
+        value: c,
         className: "-ml-2",
         onChange: (y) => p(y.target.value)
       }
@@ -6832,12 +6817,12 @@ const BlockCard = ({
           `sidebar-${y}`
         ))
       ] }) }) }),
-      /* @__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: C.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: C.length === 0 && c ? /* @__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,
+        c,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: L.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: I.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(y.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
           m === "all" ? filter(values(_), { group: y }) : values(_),
@@ -6861,16 +6846,16 @@ const BlockCard = ({
   parentId: n = 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(), g = Object.keys(u || {}).length > 0, { hasPermission: f } = usePermissions();
+  const { t: l } = useTranslation(), [i, d] = useAtom$1(addBlockTabAtom), [, c] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission: f } = usePermissions();
   useEffect(() => {
-    i === "partials" && !g && c("library");
-  }, [i, g, c]);
+    i === "partials" && !g && d("library");
+  }, [i, g, d]);
   const m = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
   }, []), h = useChaiAddBlockTabs(), x = p && f(PERMISSIONS.IMPORT_HTML), b = useBuilderProp("uiLibraries", []).length > 0;
   return useEffect(() => {
-    i === "library" && !b && c("core");
-  }, [i, b, c]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
+    i === "library" && !b && d("core");
+  }, [i, b, d]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
     r ? /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
       /* @__PURE__ */ jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: l("Add block") }),
       /* @__PURE__ */ jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: l(i === "html" ? "Enter or paste TailwindCSS HTML snippet" : "Click to add block to page") })
@@ -6879,7 +6864,7 @@ const BlockCard = ({
       Tabs,
       {
         onValueChange: (S) => {
-          d(""), c(S);
+          c(""), d(S);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -6930,14 +6915,14 @@ const registerChaiSaveToLibrary = (o) => {
     a.push(...getBlocks(o, l == null ? void 0 : l._id));
   }), a;
 }, SaveToLibraryModal = () => {
-  const [o, r] = useAtom$1(saveToLibraryModalAtom), { t: n } = useTranslation(), [a] = useBlocksStore(), l = () => r({ isOpen: !1, blockId: null }), i = useSaveToLibraryComponent(), c = useMemo(() => {
+  const [o, r] = useAtom$1(saveToLibraryModalAtom), { t: n } = useTranslation(), [a] = useBlocksStore(), l = () => r({ isOpen: !1, blockId: null }), i = useSaveToLibraryComponent(), d = useMemo(() => {
     if (!o.blockId) return [];
-    const d = find(a, { _id: o.blockId });
-    return d == null || delete d._parent, [d, ...getBlocks(a, d == null ? void 0 : d._id)];
+    const c = find(a, { _id: o.blockId });
+    return c == null || delete c._parent, [c, ...getBlocks(a, c == null ? void 0 : c._id)];
   }, [o.blockId, a]);
-  return /* @__PURE__ */ jsx(Dialog, { open: o.isOpen, onOpenChange: (d) => !d && l(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-4 sm:max-w-[450px]", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open: o.isOpen, onOpenChange: (c) => !c && l(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-4 sm:max-w-[450px]", children: [
     /* @__PURE__ */ jsx(DialogHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(DialogTitle, { children: n("Save to Library") }) }),
-    i && !isEmpty(o.blockId) && /* @__PURE__ */ jsx(i, { blockId: o.blockId, blocks: c, close: l })
+    i && !isEmpty(o.blockId) && /* @__PURE__ */ jsx(i, { blockId: o.blockId, blocks: d, close: l })
   ] }) });
 }, SaveToLibrary = () => {
   const o = useSelectedBlock(), { t: r } = useTranslation(), [, n] = useAtom$1(saveToLibraryModalAtom), a = useSaveToLibraryComponent(), l = () => {
@@ -6951,6 +6936,17 @@ const registerChaiSaveToLibrary = (o) => {
     " ",
     r(o != null && o._libBlockId ? "Update library block" : "Save to library")
   ] }) : null;
+}, UnlinkLibraryBlock = () => {
+  const { t: o } = useTranslation(), r = useSelectedBlock(), n = useUpdateBlocksProps();
+  return /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
+    n([r._id], {
+      _libBlockId: null
+    });
+  }, className: "flex items-center gap-x-4 text-xs", children: [
+    /* @__PURE__ */ jsx(UnlinkIcon, { className: "h-4 w-4" }),
+    " ",
+    o("Unlink from library")
+  ] });
 }, PasteAtRootContextMenu = ({ parentContext: o, setParentContext: r }) => {
   const { t: n } = useTranslation(), { canPaste: a, pasteBlocks: l } = usePasteBlocks();
   return useEffect(() => {
@@ -6973,22 +6969,22 @@ const registerChaiSaveToLibrary = (o) => {
     ) })
   ] }) });
 }, CopyPasteBlocks = () => {
-  const [o] = useBlocksStore(), [r] = useSelectedBlockIds(), { pasteBlocks: n } = usePasteBlocks(), [, a] = useCopyBlockIds(), { t: l } = useTranslation(), i = useSelectedBlock(), c = useCallback(() => {
-    const d = r.map((p) => {
+  const [o] = useBlocksStore(), [r] = useSelectedBlockIds(), { pasteBlocks: n } = usePasteBlocks(), [, a] = useCopyBlockIds(), { t: l } = useTranslation(), i = useSelectedBlock(), d = useCallback(() => {
+    const c = r.map((p) => {
       const u = o.find((g) => g._id === p);
       return {
         id: p,
         data: u
       };
     });
-    a(d.map((p) => p.id));
+    a(c.map((p) => p.id));
   }, [r, o, a]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       DropdownMenuItem,
       {
         disabled: !canDuplicateBlock(i == null ? void 0 : i._type),
-        onClick: c,
+        onClick: d,
         className: "flex items-center gap-x-4 text-xs",
         children: [
           /* @__PURE__ */ jsx(CopyIcon, {}),
@@ -7051,9 +7047,9 @@ const registerChaiSaveToLibrary = (o) => {
     }
   );
 }, BlockContextMenuContent = ({ node: o }) => {
-  const { t: r } = useTranslation(), [n] = useSelectedBlockIds(), a = useDuplicateBlocks(), l = useSelectedBlock(), { hasPermission: i } = usePermissions(), c = useCallback(() => {
+  const { t: r } = useTranslation(), [n] = useSelectedBlockIds(), a = useDuplicateBlocks(), l = useSelectedBlock(), { hasPermission: i } = usePermissions(), d = useCallback(() => {
     a(n);
-  }, [n, a]);
+  }, [n, a]), c = 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: [
     i(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
@@ -7074,7 +7070,7 @@ const registerChaiSaveToLibrary = (o) => {
         {
           disabled: !canDuplicateBlock(l == null ? void 0 : l._type),
           className: "flex items-center gap-x-4 text-xs",
-          onClick: c,
+          onClick: d,
           children: [
             /* @__PURE__ */ jsx(CardStackPlusIcon, {}),
             " ",
@@ -7086,6 +7082,7 @@ const registerChaiSaveToLibrary = (o) => {
     /* @__PURE__ */ jsx(RenameBlock, { node: o }),
     i(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(CutBlocks, {}),
     i(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(CopyPasteBlocks, {}),
+    c && /* @__PURE__ */ jsx(UnlinkLibraryBlock, {}),
     i(PERMISSIONS.CREATE_LIBRARY_BLOCK) && /* @__PURE__ */ jsx(SaveToLibrary, {}),
     i(PERMISSIONS.DELETE_BLOCK) && /* @__PURE__ */ jsx(RemoveBlocks, {})
   ] });
@@ -7119,7 +7116,7 @@ const registerChaiSaveToLibrary = (o) => {
 }), Overlay = memo(function({ children: r, isDragging: n }) {
   return n ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed left-0 top-0 z-[100] h-full w-full", children: r }) : null;
 }), DefaultDragPreview = memo(({ id: o, isDragging: r, mouse: n }) => {
-  const [a] = useBlocksStore(), l = useMemo(() => a.find((c) => c._id === o), [a, o]), i = useMemo(
+  const [a] = useBlocksStore(), l = useMemo(() => a.find((d) => d._id === o), [a, o]), i = useMemo(
     () => ({
       transform: `translate(${(n == null ? void 0 : n.x) - 10}px, ${(n == null ? void 0 : n.y) - 10}px)`
     }),
@@ -7191,7 +7188,7 @@ const selectParent = (o, r) => {
   );
 }, currentAddSelection = atom(null), Node = memo(({ node: o, style: r, dragHandle: n }) => {
   var P;
-  const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
+  const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let p = null;
   const u = o.children.length > 0, { highlightBlock: g, clearHighlight: f } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: k, isDragging: b, isEditing: S, handleClick: w } = o, A = (N) => {
     N.stopPropagation(), !l.includes(m) && o.toggle();
@@ -7199,7 +7196,7 @@ const selectParent = (o, r) => {
     N.isInternal && (p = N.isOpen, N.isOpen && N.close());
   }, C = (N) => {
     N.isInternal && p !== null && (p ? N.open() : N.close(), p = null);
-  }, [B, _] = useAtom$1(currentAddSelection), L = () => {
+  }, [B, _] = useAtom$1(currentAddSelection), I = () => {
     var N;
     v(), o.parent.isSelected || _((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
   }, v = () => {
@@ -7214,9 +7211,9 @@ const selectParent = (o, r) => {
     return () => clearTimeout(N);
   }, [k, o, b]);
   const j = (N, D) => {
-    const O = c.contentDocument || c.contentWindow.document, R = O.querySelector(`[data-block-id=${N}]`);
+    const O = d.contentDocument || d.contentWindow.document, R = O.querySelector(`[data-block-id=${N}]`);
     R && R.setAttribute("data-drop", D);
-    const $ = R.getBoundingClientRect(), M = c.getBoundingClientRect();
+    const $ = R.getBoundingClientRect(), M = d.getBoundingClientRect();
     $.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = R.offsetTop - M.top);
   }, T = (N) => {
     v();
@@ -7226,7 +7223,7 @@ const selectParent = (o, r) => {
   if (m === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
       /* @__PURE__ */ jsx("br", {}),
-      d(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
+      c(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
         "div",
         {
           role: "button",
@@ -7241,7 +7238,7 @@ const selectParent = (o, r) => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const I = useMemo(() => has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (d(PERMISSIONS.CREATE_LIBRARY_BLOCK) || d(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, d]);
+  const L = useMemo(() => has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, c]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7263,13 +7260,13 @@ const selectParent = (o, r) => {
         N.preventDefault(), j(m, "no");
       },
       children: [
-        d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        c(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
             onClick: (N) => {
               N.stopPropagation(), T(o.childIndex);
             },
-            onMouseEnter: L,
+            onMouseEnter: I,
             onMouseLeave: v,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-primary opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
@@ -7285,7 +7282,7 @@ const selectParent = (o, r) => {
               (o == null ? void 0 : o.id) === B ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(m) ? "opacity-50" : "",
-              I && x && "bg-primary/20 text-primary"
+              L && x && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7293,7 +7290,7 @@ const selectParent = (o, r) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: A, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-primary" : "text-slate-400"}` }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: A, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7301,8 +7298,8 @@ const selectParent = (o, r) => {
                   {
                     className: cn(
                       "leading-1 flex items-center",
-                      I && "text-primary/60",
-                      I && x && "text-primary/80"
+                      L && "text-primary/60",
+                      L && x && "text-primary/80"
                     ),
                     children: [
                       /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
@@ -7321,7 +7318,7 @@ const selectParent = (o, r) => {
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                canAddChildBlock(h == null ? void 0 : h._type) && !l.includes(m) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(h == null ? void 0 : h._type) && !l.includes(m) && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -7359,9 +7356,9 @@ const selectParent = (o, r) => {
   const [o] = useBlocksStore();
   return (r, n) => {
     var i;
-    const a = (i = find(o, { _id: n })) == null ? void 0 : i._type, l = first(r.map((c) => {
-      var d;
-      return (d = find(o, { _id: c })) == null ? void 0 : d._type;
+    const a = (i = find(o, { _id: n })) == null ? void 0 : i._type, l = first(r.map((d) => {
+      var c;
+      return (c = find(o, { _id: d })) == null ? void 0 : c._type;
     }));
     return canAcceptChildBlock(a, l);
   };
@@ -7584,7 +7581,7 @@ const selectParent = (o, r) => {
     )
   ] });
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), f = (S) => {
+  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: d } = usePermissions(), [c, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), f = (S) => {
     a(S);
   }, m = () => {
     const S = l.find((w) => Object.keys(w)[0] === n);
@@ -7596,41 +7593,41 @@ const selectParent = (o, r) => {
   }, h = useDebouncedCallback(
     (S, w) => {
       p(() => ({
-        ...d,
+        ...c,
         fontFamily: {
-          ...d.fontFamily,
+          ...c.fontFamily,
           [S.replace(/font-/g, "")]: w
         }
       }));
     },
-    [d],
+    [c],
     200
   ), x = useDebouncedCallback(
     (S) => {
       p(() => ({
-        ...d,
+        ...c,
         borderRadius: `${S}px`
       }));
     },
-    [d],
+    [c],
     200
   ), k = useDebouncedCallback(
     (S, w) => {
       p(() => {
-        const A = get(d, `colors.${S}`);
+        const A = get(c, `colors.${S}`);
         return r ? set(A, 1, w) : set(A, 0, w), {
-          ...d,
+          ...c,
           colors: {
-            ...d.colors,
+            ...c.colors,
             [S]: A
           }
         };
       });
     },
-    [d],
+    [c],
     200
   ), b = (S) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(S.items).map(([w]) => {
-    const A = get(d, `colors.${w}.${r ? 1 : 0}`);
+    const A = get(c, `colors.${w}.${r ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
@@ -7642,7 +7639,7 @@ const selectParent = (o, r) => {
       /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: w.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!w.toLowerCase().includes("foreground") && !w.toLowerCase().includes("border") && !w.toLowerCase().includes("input") && !w.toLowerCase().includes("ring") && !w.toLowerCase().includes("background") ? " Background" : "") })
     ] }, w);
   }) });
-  return c("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+  return d("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: [
       l.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 py-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
@@ -7676,7 +7673,7 @@ const selectParent = (o, r) => {
           FontSelector,
           {
             label: S,
-            value: d.fontFamily[S.replace(/font-/g, "")] || w[Object.keys(w)[0]],
+            value: c.fontFamily[S.replace(/font-/g, "")] || w[Object.keys(w)[0]],
             onChange: (A) => h(S, A)
           },
           S
@@ -7684,8 +7681,8 @@ const selectParent = (o, r) => {
         (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm", children: g("Border Radius") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: x }),
-            /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: d.borderRadius })
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: x }),
+            /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: c.borderRadius })
           ] })
         ] }),
         (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
@@ -8132,17 +8129,17 @@ function QuickPrompts({ onClick: o }) {
     icon: Languages,
     prompt: `Translate the content to ${get(LANGUAGES, a, a)}. Maintain same tone, style and length.`
   }), /* @__PURE__ */ jsx("div", { className: r ? "pointer-events-none opacity-50" : "", children: /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: i.map(
-    ({ name: c, icon: d, subMenus: p, prompt: u }) => p ? /* @__PURE__ */ jsxs(Popover, { children: [
+    ({ name: d, icon: c, subMenus: p, prompt: u }) => p ? /* @__PURE__ */ jsxs(Popover, { children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
         "li",
         {
           className: "flex cursor-pointer items-center space-x-2 rounded p-1 pl-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
           children: [
-            /* @__PURE__ */ jsx(d, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { children: c })
+            /* @__PURE__ */ jsx(c, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { children: d })
           ]
         },
-        c
+        d
       ) }),
       /* @__PURE__ */ jsx(PopoverContent, { side: "right", children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx("li", { children: "Happy" }) }) })
     ] }) : /* @__PURE__ */ jsxs(
@@ -8151,43 +8148,43 @@ function QuickPrompts({ onClick: o }) {
         onClick: () => o(u),
         className: "flex cursor-pointer items-center space-x-2 rounded p-1 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
         children: [
-          /* @__PURE__ */ jsx(d, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { children: n(c) })
+          /* @__PURE__ */ jsx(c, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: n(d) })
         ]
       },
-      c
+      d
     )
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), f = useRef(null), m = useRef(null);
+  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, d] = useState(""), [c, p] = useState(!0), [u, g] = useState(), f = useRef(null), m = useRef(null);
   useEffect(() => {
     var x;
     (x = f.current) == null || x.focus();
   }, []);
   const h = (x) => {
     const { usage: k } = x || {};
-    !l && k && g(k), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    !l && k && g(k), m.current = setTimeout(() => g(void 0), 1e4), l || d("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        onClick: () => p(!d),
+        onClick: () => p(!c),
         className: "flex cursor-pointer items-center justify-between border-t border-border py-2 text-sm font-medium hover:underline",
         children: [
           /* @__PURE__ */ jsx("span", { children: r("Ask AI") }),
-          /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 " + (d ? "rotate-180" : "") }) })
+          /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 " + (c ? "rotate-180" : "") }) })
         ]
       }
     ),
-    d && o ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+    c && o ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
       /* @__PURE__ */ jsx(
         Textarea,
         {
           ref: f,
           value: i,
-          onChange: (x) => c(x.target.value),
+          onChange: (x) => d(x.target.value),
           placeholder: r("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
@@ -8239,23 +8236,23 @@ const AIUserPrompt = ({ blockId: o }) => {
           }
         }
       )
-    ] }) : d ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-xl p-4 text-muted-foreground", children: [
+    ] }) : c ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-xl p-4 text-muted-foreground", children: [
       /* @__PURE__ */ jsx(SparklesIcon, { className: "mx-auto text-3xl text-muted-foreground" }),
       /* @__PURE__ */ jsx("h1", { children: r("Please select a block to Ask AI") })
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), f = useRef(null);
+  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [d, c] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), f = useRef(null);
   useEffect(() => {
     r && a(r);
   }, [r]);
   const m = async () => {
     try {
-      d(!0), u(null), await i(n), toast.success(o("Updated AI Context")), f.current.click();
+      c(!0), u(null), await i(n), toast.success(o("Updated AI Context")), f.current.click();
     } catch (h) {
       u(h);
     } finally {
-      d(!1);
+      c(!1);
     }
   };
   return /* @__PURE__ */ jsx(
@@ -8295,14 +8292,14 @@ const AIUserPrompt = ({ blockId: o }) => {
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
-                children: c ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                children: d ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(Loader, { className: "h-5 w-5 animate-spin" }),
                   o("Saving... Please wait...")
                 ] }) : o("Save")
               }
             ),
             r.trim().length > 0 ? /* @__PURE__ */ jsxs(AlertDialog, { children: [
-              /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { disabled: r.trim().length === 0, variant: "ghost", className: "w-fit", size: "sm", children: c ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { disabled: r.trim().length === 0, variant: "ghost", className: "w-fit", size: "sm", children: d ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(Loader, { className: "h-5 w-5 animate-spin" }),
                 o("Deleting... Please wait...")
               ] }) : o("Delete") }) }),
@@ -8403,13 +8400,13 @@ const UndoRedo = () => {
     }
   ));
 }, setAtomStateValueOrPromise = (o, r, n) => {
-  const a = n(o), l = "v" in a, i = a.v, c = isPendingPromise(a.v) ? a.v : null;
+  const a = n(o), l = "v" in a, i = a.v, d = isPendingPromise(a.v) ? a.v : null;
   if (isPromiseLike$1(r)) {
     patchPromiseForCancelability(r);
-    for (const d of a.d.keys())
-      addPendingPromiseToDependency(o, r, n(d));
+    for (const c of a.d.keys())
+      addPendingPromiseToDependency(o, r, n(c));
   }
-  a.v = r, delete a.e, (!l || !Object.is(i, a.v)) && (++a.n, c && cancelPromise(c, r));
+  a.v = r, delete a.e, (!l || !Object.is(i, a.v)) && (++a.n, d && cancelPromise(d, r));
 }, getMountedOrPendingDependents = (o, r, n) => {
   var a;
   const l = /* @__PURE__ */ new Set();
@@ -8418,7 +8415,7 @@ const UndoRedo = () => {
   for (const i of r.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (m, ...h) => m.read(...h), p = (m, ...h) => m.write(...h), u = (m, h) => {
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), d = {}, c = (m, ...h) => m.read(...h), p = (m, ...h) => m.write(...h), u = (m, h) => {
   var x;
   return (x = m.unstable_onInit) == null ? void 0 : x.call(m, h);
 }, g = (m, h) => {
@@ -8426,47 +8423,47 @@ const UndoRedo = () => {
   return (x = m.onMount) == null ? void 0 : x.call(m, h);
 }, ...f) => {
   const m = f[0] || ((_) => {
-    let L = o.get(_);
-    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(_, L), u == null || u(_, B)), L;
+    let I = o.get(_);
+    return I || (I = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(_, I), u == null || u(_, B)), I;
   }), h = f[1] || (() => {
-    let _, L;
+    let _, I;
     const v = (y) => {
       try {
         y();
       } catch (j) {
-        _ || (_ = !0, L = j);
+        _ || (_ = !0, I = j);
       }
     };
     do {
-      c.f && v(c.f);
+      d.f && v(d.f);
       const y = /* @__PURE__ */ new Set(), j = y.add.bind(y);
       a.forEach((T) => {
-        var I;
-        return (I = r.get(T)) == null ? void 0 : I.l.forEach(j);
+        var L;
+        return (L = r.get(T)) == null ? void 0 : L.l.forEach(j);
       }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(v), a.size && x();
     } while (a.size || i.size || l.size);
     if (_)
-      throw L;
+      throw I;
   }), x = f[2] || (() => {
-    const _ = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
+    const _ = [], I = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
     for (; y.length; ) {
       const j = y[y.length - 1], T = m(j);
       if (v.has(j)) {
         y.pop();
         continue;
       }
-      if (L.has(j)) {
+      if (I.has(j)) {
         n.get(j) === T.n && _.push([j, T]), v.add(j), y.pop();
         continue;
       }
-      L.add(j);
-      for (const I of getMountedOrPendingDependents(j, T, r))
-        L.has(I) || y.push(I);
+      I.add(j);
+      for (const L of getMountedOrPendingDependents(j, T, r))
+        I.has(L) || y.push(L);
     }
     for (let j = _.length - 1; j >= 0; --j) {
-      const [T, I] = _[j];
+      const [T, L] = _[j];
       let P = !1;
-      for (const N of I.d.keys())
+      for (const N of L.d.keys())
         if (N !== T && a.has(N)) {
           P = !0;
           break;
@@ -8474,7 +8471,7 @@ const UndoRedo = () => {
       P && (k(T), w(T)), n.delete(T);
     }
   }), k = f[3] || ((_) => {
-    var L, v;
+    var I, v;
     const y = m(_);
     if (isAtomStateInitialized(y) && (r.has(_) && n.get(_) !== y.n || Array.from(y.d).every(
       ([R, $]) => (
@@ -8488,7 +8485,7 @@ const UndoRedo = () => {
     let j = !0;
     const T = () => {
       r.has(_) && (w(_), x(), h());
-    }, I = (R) => {
+    }, L = (R) => {
       var $;
       if (isSelfAtom(_, R)) {
         const H = m(R);
@@ -8523,56 +8520,56 @@ const UndoRedo = () => {
       }
     }, O = y.n;
     try {
-      const R = d(_, I, D);
-      return setAtomStateValueOrPromise(_, R, m), isPromiseLike$1(R) && ((L = R.onCancel) == null || L.call(R, () => P == null ? void 0 : P.abort()), R.then(
+      const R = c(_, L, D);
+      return setAtomStateValueOrPromise(_, R, m), isPromiseLike$1(R) && ((I = R.onCancel) == null || I.call(R, () => P == null ? void 0 : P.abort()), R.then(
         T,
         T
       )), y;
     } catch (R) {
       return delete y.v, y.e = R, ++y.n, y;
     } finally {
-      j = !1, O !== y.n && n.get(_) === O && (n.set(_, y.n), a.add(_), (v = c.c) == null || v.call(c, _));
+      j = !1, O !== y.n && n.get(_) === O && (n.set(_, y.n), a.add(_), (v = d.c) == null || v.call(d, _));
     }
   }), b = f[4] || ((_) => {
-    const L = [_];
-    for (; L.length; ) {
-      const v = L.pop(), y = m(v);
+    const I = [_];
+    for (; I.length; ) {
+      const v = I.pop(), y = m(v);
       for (const j of getMountedOrPendingDependents(v, y, r)) {
         const T = m(j);
-        n.set(j, T.n), L.push(j);
+        n.set(j, T.n), I.push(j);
       }
     }
-  }), S = f[5] || ((_, ...L) => {
+  }), S = f[5] || ((_, ...I) => {
     let v = !0;
-    const y = (T) => returnAtomValue(k(T)), j = (T, ...I) => {
+    const y = (T) => returnAtomValue(k(T)), j = (T, ...L) => {
       var P;
       const N = m(T);
       try {
         if (isSelfAtom(_, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
-          const D = N.n, O = I[0];
-          setAtomStateValueOrPromise(T, O, m), w(T), D !== N.n && (a.add(T), (P = c.c) == null || P.call(c, T), b(T));
+          const D = N.n, O = L[0];
+          setAtomStateValueOrPromise(T, O, m), w(T), D !== N.n && (a.add(T), (P = d.c) == null || P.call(d, T), b(T));
           return;
         } else
-          return S(T, ...I);
+          return S(T, ...L);
       } finally {
         v || (x(), h());
       }
     };
     try {
-      return p(_, y, j, ...L);
+      return p(_, y, j, ...I);
     } finally {
       v = !1;
     }
   }), w = f[6] || ((_) => {
-    var L;
+    var I;
     const v = m(_), y = r.get(_);
     if (y && !isPendingPromise(v.v)) {
       for (const [j, T] of v.d)
         if (!y.d.has(j)) {
-          const I = m(j);
-          A(j).t.add(_), y.d.add(j), T !== I.n && (a.add(j), (L = c.c) == null || L.call(c, j), b(j));
+          const L = m(j);
+          A(j).t.add(_), y.d.add(j), T !== L.n && (a.add(j), (I = d.c) == null || I.call(d, j), b(j));
         }
       for (const j of y.d || [])
         if (!v.d.has(j)) {
@@ -8582,7 +8579,7 @@ const UndoRedo = () => {
         }
     }
   }), A = f[7] || ((_) => {
-    var L;
+    var I;
     const v = m(_);
     let y = r.get(_);
     if (!y) {
@@ -8593,10 +8590,10 @@ const UndoRedo = () => {
         l: /* @__PURE__ */ new Set(),
         d: new Set(v.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, r.set(_, y), (L = c.m) == null || L.call(c, _), isActuallyWritableAtom(_)) {
+      }, r.set(_, y), (I = d.m) == null || I.call(d, _), isActuallyWritableAtom(_)) {
         const j = () => {
           let T = !0;
-          const I = (...P) => {
+          const L = (...P) => {
             try {
               return S(_, ...P);
             } finally {
@@ -8604,7 +8601,7 @@ const UndoRedo = () => {
             }
           };
           try {
-            const P = g(_, I);
+            const P = g(_, L);
             P && (y.u = () => {
               T = !0;
               try {
@@ -8622,14 +8619,14 @@ const UndoRedo = () => {
     }
     return y;
   }), E = f[8] || ((_) => {
-    var L;
+    var I;
     const v = m(_);
     let y = r.get(_);
     if (y && !y.l.size && !Array.from(y.t).some((j) => {
       var T;
       return (T = r.get(j)) == null ? void 0 : T.d.has(_);
     })) {
-      y.u && i.add(y.u), y = void 0, r.delete(_), (L = c.u) == null || L.call(c, _);
+      y.u && i.add(y.u), y = void 0, r.delete(_), (I = d.u) == null || I.call(d, _);
       for (const j of v.d.keys()) {
         const T = E(j);
         T == null || T.t.delete(_);
@@ -8645,9 +8642,9 @@ const UndoRedo = () => {
     a,
     l,
     i,
-    c,
-    // atom intercepters
     d,
+    // atom intercepters
+    c,
     p,
     u,
     g,
@@ -8663,17 +8660,17 @@ const UndoRedo = () => {
     E
   ], B = {
     get: (_) => returnAtomValue(k(_)),
-    set: (_, ...L) => {
+    set: (_, ...I) => {
       try {
-        return S(_, ...L);
+        return S(_, ...I);
       } finally {
         x(), h();
       }
     },
-    sub: (_, L) => {
+    sub: (_, I) => {
       const y = A(_).l;
-      return y.add(L), h(), () => {
-        y.delete(L), E(_), h();
+      return y.add(I), h(), () => {
+        y.delete(I), E(_), h();
       };
     }
   };
@@ -8703,18 +8700,18 @@ const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), d
     let l = o;
     const i = (p) => (u) => {
       l === p && n(u);
-    }, c = (p) => (u) => {
+    }, d = (p) => (u) => {
       l === p && a(u);
-    }, d = (p) => {
+    }, c = (p) => {
       "onCancel" in p && typeof p.onCancel == "function" && p.onCancel((u) => {
-        isPromiseLike(u) ? (continuablePromiseMap.set(u, r), l = u, u.then(i(u), c(u)), d(u)) : n(u);
+        isPromiseLike(u) ? (continuablePromiseMap.set(u, r), l = u, u.then(i(u), d(u)), c(u)) : n(u);
       });
     };
-    o.then(i(o), c(o)), d(o);
+    o.then(i(o), d(o)), c(o);
   }), continuablePromiseMap.set(o, r)), r;
 };
 function useAtomValue(o, r) {
-  const n = useStore(), [[a, l, i], c] = useReducer(
+  const n = useStore(), [[a, l, i], d] = useReducer(
     (u) => {
       const g = n.get(o);
       return Object.is(u[0], g) && u[1] === n && u[2] === o ? u : [g, n, o];
@@ -8722,17 +8719,17 @@ function useAtomValue(o, r) {
     void 0,
     () => [n.get(o), n, o]
   );
-  let d = a;
-  if ((l !== n || i !== o) && (c(), d = n.get(o)), useEffect(() => {
+  let c = a;
+  if ((l !== n || i !== o) && (d(), c = n.get(o)), useEffect(() => {
     const u = n.sub(o, () => {
-      c();
+      d();
     });
-    return c(), u;
-  }, [n, o, void 0]), useDebugValue(d), isPromiseLike(d)) {
-    const u = createContinuablePromise(d);
+    return d(), u;
+  }, [n, o, void 0]), useDebugValue(c), isPromiseLike(c)) {
+    const u = createContinuablePromise(c);
     return use(u);
   }
-  return d;
+  return c;
 }
 function useSetAtom(o, r) {
   const n = useStore();
@@ -8786,7 +8783,7 @@ function usePubSub(o, r) {
   }, [o, r]);
 }
 function AIChatPanel() {
-  const [o, r] = useState([]), [n, a] = useState(""), [l, i] = useState(!1), [c, d] = useState(null), p = useRef(null), u = useRef(null), g = useRef(null);
+  const [o, r] = useState([]), [n, a] = useState(""), [l, i] = useState(!1), [d, c] = useState(null), p = useRef(null), u = useRef(null), g = useRef(null);
   useEffect(() => {
     var b;
     (b = u.current) == null || b.scrollIntoView({ behavior: "smooth" });
@@ -8794,7 +8791,7 @@ function AIChatPanel() {
     g.current && (g.current.style.height = "auto", g.current.style.height = `${Math.min(g.current.scrollHeight, 120)}px`);
   }, [n]);
   const f = async () => {
-    if (!n.trim() && !c) return;
+    if (!n.trim() && !d) return;
     const b = {
       id: Date.now().toString(),
       role: "user",
@@ -8808,7 +8805,7 @@ function AIChatPanel() {
         content: "This is a sample response from the AI assistant. In a real implementation, this would be replaced with an actual response from the AI model.",
         timestamp: /* @__PURE__ */ new Date()
       };
-      r((w) => [...w, S]), i(!1), d(null);
+      r((w) => [...w, S]), i(!1), c(null);
     }, 1500);
   }, m = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), f());
@@ -8819,14 +8816,14 @@ function AIChatPanel() {
       const A = new FileReader();
       A.onload = (E) => {
         var C;
-        d((C = E.target) == null ? void 0 : C.result);
+        c((C = E.target) == null ? void 0 : C.result);
       }, A.readAsDataURL(S);
     }
   }, x = () => {
     var b;
     (b = p.current) == null || b.click();
   }, k = () => {
-    d(null), p.current && (p.current.value = "");
+    c(null), p.current && (p.current.value = "");
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col rounded-lg bg-background shadow-sm", children: [
     /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 p-3", children: o.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-10 flex h-full flex-col items-center justify-center p-4 text-center text-muted-foreground", children: [
@@ -8863,8 +8860,8 @@ function AIChatPanel() {
       ] }),
       /* @__PURE__ */ jsx("div", { ref: u })
     ] }) }),
-    c && /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative h-20 w-20 overflow-hidden rounded-md", children: [
-      /* @__PURE__ */ jsx("img", { src: c || "/placeholder.svg", alt: "Attachment", className: "h-full w-full object-cover" }),
+    d && /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative h-20 w-20 overflow-hidden rounded-md", children: [
+      /* @__PURE__ */ jsx("img", { src: d || "/placeholder.svg", alt: "Attachment", className: "h-full w-full object-cover" }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -8907,7 +8904,7 @@ function AIChatPanel() {
           size: "sm",
           className: "h-10 px-3",
           onClick: f,
-          disabled: l || !n.trim() && !c,
+          disabled: l || !n.trim() && !d,
           children: [
             /* @__PURE__ */ jsx(Send, { className: "mr-1 h-4 w-4" }),
             "Send"
@@ -8991,18 +8988,18 @@ const AiAssistant = () => {
     ] })
   ] });
 }, AddBlocksDialog = () => {
-  const { t: o } = useTranslation(), [r, n] = useState(""), [a, l] = useState(-1), [i, c] = useState(!1);
-  return usePubSub(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, (d) => {
-    n(d ? d._id : null), l(isNaN(d == null ? void 0 : d.position) ? -1 : d == null ? void 0 : d.position), c(!0);
+  const { t: o } = useTranslation(), [r, n] = useState(""), [a, l] = useState(-1), [i, d] = useState(!1);
+  return usePubSub(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, (c) => {
+    n(c ? c._id : null), l(isNaN(c == null ? void 0 : c.position) ? -1 : c == null ? void 0 : c.position), d(!0);
   }), usePubSub(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK, () => {
-    n(""), l(-1), c(!1);
-  }), /* @__PURE__ */ jsx(AlertDialog, { open: i, onOpenChange: () => i ? c(!1) : "", children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "max-w-5xl overflow-hidden border-border", children: [
+    n(""), l(-1), d(!1);
+  }), /* @__PURE__ */ jsx(AlertDialog, { open: i, onOpenChange: () => i ? d(!1) : "", children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "max-w-5xl overflow-hidden border-border", children: [
     /* @__PURE__ */ jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between", children: [
       /* @__PURE__ */ jsx(AlertDialogTitle, { className: "text-foreground", children: o("Add blocks") }),
       /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => c(!1),
+          onClick: () => d(!1),
           className: "text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300",
           children: /* @__PURE__ */ jsx(Cross2Icon, { className: "h-6 w-6" })
         }
@@ -9014,7 +9011,7 @@ const AiAssistant = () => {
   preloadedAttributes: r = [],
   onAttributesChange: n
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [f, m] = useState(""), h = useRef(null), x = useRef(null), k = usePageExternalData();
+  const [a, l] = useState([]), [i, d] = useState(""), [c, p] = useState(""), [u, g] = useState(null), [f, m] = useState(""), h = useRef(null), x = useRef(null), k = usePageExternalData();
   useEffect(() => {
     l(r);
   }, [r]);
@@ -9024,14 +9021,14 @@ const AiAssistant = () => {
       return;
     }
     if (i) {
-      const B = [...a, { key: i, value: d }];
-      n(B), l(a), c(""), p(""), m("");
+      const B = [...a, { key: i, value: c }];
+      n(B), l(a), d(""), p(""), m("");
     }
   }, S = (B) => {
-    const _ = a.filter((L, v) => v !== B);
+    const _ = a.filter((I, v) => v !== B);
     n(_), l(_);
   }, w = (B) => {
-    g(B), c(a[B].key), p(a[B].value);
+    g(B), d(a[B].key), p(a[B].value);
   }, A = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
@@ -9039,28 +9036,28 @@ const AiAssistant = () => {
     }
     if (u !== null && i) {
       const B = [...a];
-      B[u] = { key: i, value: d }, n(B), l(B), g(null), c(""), p(""), m("");
+      B[u] = { key: i, value: c }, n(B), l(B), g(null), d(""), p(""), m("");
     }
   }, E = (B) => {
     B.key === "Enter" && !B.shiftKey && (B.preventDefault(), u !== null ? A() : b());
   }, C = useCallback((B) => {
-    const _ = (y) => /[.,!?;:]/.test(y), L = (y, j, T) => {
-      let I = "", P = "";
+    const _ = (y) => /[.,!?;:]/.test(y), I = (y, j, T) => {
+      let L = "", P = "";
       const N = j > 0 ? y[j - 1] : "", D = j < y.length ? y[j] : "";
-      return j > 0 && (N === "." || !_(N) && N !== " ") && (I = " "), j < y.length && !_(D) && D !== " " && (P = " "), {
-        text: I + T + P,
-        prefixLength: I.length,
+      return j > 0 && (N === "." || !_(N) && N !== " ") && (L = " "), j < y.length && !_(D) && D !== " " && (P = " "), {
+        text: L + T + P,
+        prefixLength: L.length,
         suffixLength: P.length
       };
     }, v = x.current;
     if (v) {
       const y = v.selectionStart || 0, j = v.value || "", T = v.selectionEnd || y;
       if (T > y) {
-        const O = `{{${B}}}`, { text: R } = L(j, y, O), $ = j.slice(0, y) + R + j.slice(T);
+        const O = `{{${B}}}`, { text: R } = I(j, y, O), $ = j.slice(0, y) + R + j.slice(T);
         p($);
         return;
       }
-      const P = `{{${B}}}`, { text: N } = L(j, y, P), D = j.slice(0, y) + N + j.slice(y);
+      const P = `{{${B}}}`, { text: N } = I(j, y, P), D = j.slice(0, y) + N + j.slice(y);
       p(D);
     }
   }, []);
@@ -9085,7 +9082,7 @@ const AiAssistant = () => {
                   id: "attrKey",
                   ref: h,
                   value: i,
-                  onChange: (B) => c(B.target.value),
+                  onChange: (B) => d(B.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9105,7 +9102,7 @@ const AiAssistant = () => {
                   id: "attrValue",
                   rows: 2,
                   ref: x,
-                  value: d,
+                  value: c,
                   onChange: (B) => p(B.target.value),
                   onKeyDown: E,
                   placeholder: "Enter Value",
@@ -9133,19 +9130,19 @@ const AiAssistant = () => {
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [r, n] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
   React.useEffect(() => {
-    const d = map(get(o, i), (p, u) => ({ key: u, value: p }));
-    isEmpty(d) ? n([]) : n(d);
+    const c = map(get(o, i), (p, u) => ({ key: u, value: p }));
+    isEmpty(c) ? n([]) : n(c);
   }, [get(o, i)]);
-  const c = React.useCallback(
-    (d = []) => {
+  const d = React.useCallback(
+    (c = []) => {
       const p = {};
-      forEach(d, (u) => {
+      forEach(c, (u) => {
         isEmpty(u.key) || set(p, u.key, u.value);
       }), l([get(o, "_id")], { [i]: p });
     },
     [o, l, i]
   );
-  return /* @__PURE__ */ jsx("div", { className: "flex-col gap-y-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AttrsEditor, { preloadedAttributes: r, onAttributesChange: c }) }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex-col gap-y-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AttrsEditor, { preloadedAttributes: r, onAttributesChange: d }) }) }) });
 }), NoopComponent = () => null;
 function BlockAttributesToggle() {
   const { t: o } = useTranslation(), [r, n] = useState(!0), [a] = useSelectedStylingBlocks();
@@ -9233,7 +9230,7 @@ function useSidebarMenuItems() {
   }, [o, r]);
 }
 const RootLayout = () => {
-  const o = useTopBarComponent(), [r, n] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel();
+  const o = useTopBarComponent(), [r, n] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [d, c] = useRightPanel();
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n("outline");
   });
@@ -9327,11 +9324,11 @@ const RootLayout = () => {
                 animate: { width: r === "ai" ? 0 : DEFAULT_PANEL_WIDTH },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: /* @__PURE__ */ jsx("div", { className: "no-scrollbar overflow h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col overflow-hidden p-3", children: [
-                  /* @__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("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: d === "ai" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
                     h("AI Assistant")
-                  ] }) }) : c === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
+                  ] }) }) : d === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
                       h("Theme Settings")
@@ -9339,7 +9336,7 @@ const RootLayout = () => {
                     /* @__PURE__ */ jsx(
                       Button,
                       {
-                        onClick: () => d("block"),
+                        onClick: () => c("block"),
                         variant: "ghost",
                         size: "icon",
                         className: "text-xs",
@@ -9347,7 +9344,7 @@ const RootLayout = () => {
                       }
                     )
                   ] }) : null }) }) }),
-                  /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: c === "ai" ? /* @__PURE__ */ jsx(AskAI, {}) : c === "theme" ? /* @__PURE__ */ jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: d === "ai" ? /* @__PURE__ */ jsx(AskAI, {}) : d === "theme" ? /* @__PURE__ */ jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
                 ] }) })
               }
             ),
@@ -9429,9 +9426,9 @@ const RootLayout = () => {
     r && o(!0);
   }, n * 1e3);
 }, ChaiBuilderComponent = (o) => {
-  const [, r] = useBlocksStore(), n = useBuilderReset(), [a] = useAtom(builderSaveStateAtom), l = useMemo(() => o.layout || RootLayout, [o.layout]);
+  const [, r] = useBlocksStore(), n = useBuilderProp("builderTheme", defaultThemeValues), a = useBuilderReset(), [l] = useAtom(builderSaveStateAtom), i = useMemo(() => o.layout || RootLayout, [o.layout]);
   useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchPartailBlocks(), useUnmountBroadcastChannel();
-  const { postMessage: i } = useBroadcastChannel();
+  const { postMessage: d } = useBroadcastChannel();
   return useEffect(() => {
     builderStore.set(
       // @ts-ignore
@@ -9443,21 +9440,21 @@ const RootLayout = () => {
   }, [o.pageExternalData]), useEffect(() => {
     setTimeout(() => {
       const c = syncBlocksWithDefaults(o.blocks || []);
-      r(c), c && c.length > 0 && i({ type: "blocks-updated", blocks: c }), n();
+      r(c), c && c.length > 0 && d({ type: "blocks-updated", blocks: c }), a();
     }, 400);
   }, [o.blocks]), useEffect(() => {
     i18n.changeLanguage(o.locale || "en");
   }, [o.locale]), useEffect(() => {
     setDebugLogs(o.debugLogs);
   }, [o.debugLogs]), useEffect(() => {
-    o.translations && each(o.translations, (c, d) => {
-      i18n.addResourceBundle(d, "translation", c, !0, !0);
+    o.translations && each(o.translations, (c, p) => {
+      i18n.addResourceBundle(p, "translation", c, !0, !0);
     });
-  }, [o.translations]), useEffect(() => (a !== "SAVED" ? window.onbeforeunload = () => "" : window.onbeforeunload = null, () => {
+  }, [o.translations]), useEffect(() => (l !== "SAVED" ? window.onbeforeunload = () => "" : window.onbeforeunload = null, () => {
     window.onbeforeunload = null;
-  }), [a]), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PrimaryColorCSSVariable, {}),
-    /* @__PURE__ */ jsx(l, {})
+  }), [l]), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CssThemeVariables, { theme: n }),
+    /* @__PURE__ */ jsx(i, {})
   ] });
 }, ChaiBuilderEditor = (o) => {
   const r = o.onError || noop;
@@ -9548,7 +9545,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  Ue as useTranslation,
+  Ve as useTranslation,
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,