@chaibuilder/sdk 2.2.18 → 2.2.19

package/dist/core.js

@@ -3,30 +3,32 @@ var F = (o, r, n) => r in o ? V(o, r, { enumerable: !0, configurable: !0, writab
 var H = (o, r, n) => F(o, typeof r != "symbol" ? r + "" : r, n);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { BoxModelIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, LoopIcon, InfoCircledIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, Cross1Icon, BoxIcon, MinusIcon, CrossCircledIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, CaretRightIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, CheckIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
-import { get, find, filter, flatten, has, isString, map, includes, without, compact, reverse, findIndex, isEmpty, each, omit, isObject, memoize, noop, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, isArray, isFunction, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, uniq, flatMapDeep, some, sortBy, round } from "lodash-es";
+import { BoxModelIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, LoopIcon, InfoCircledIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, Cross1Icon, BoxIcon, MinusIcon, CrossCircledIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, CaretRightIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, CheckIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isArray, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, isFunction, groupBy, uniq, flatMapDeep, some, sortBy, round } from "lodash-es";
 import * as React from "react";
-import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, createContext, useContext, Suspense, createElement, memo, useReducer, useDebugValue } from "react";
-import { atom, useAtom as useAtom$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, useAtomValue as useAtomValue$1, Provider } from "jotai";
+import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, useReducer, useDebugValue } from "react";
+import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { atomWithStorage, splitAtom, useAtomCallback } from "jotai/utils";
-import { g as generateUUID, a as getBreakpointValue, c as cn$1 } from "./common-functions-BGzDsf1z.js";
-import { B as Button, Z as DropdownMenu, ab as DropdownMenuTrigger, $ as DropdownMenuContent, a1 as DropdownMenuItem, ay as Skeleton, e as Alert, f as AlertDescription, af as Input$1, P as Dialog, Y as DialogTrigger, R as DialogContent, ah as Popover, aG as Tooltip, aJ as TooltipTrigger, ak as PopoverTrigger, aH as TooltipContent, aj as PopoverContent, G as Command, I as CommandInput, J as CommandList, K as CommandEmpty, L as CommandGroup, M as CommandItem, U as DialogHeader, X as DialogTitle, v as Badge, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, a2 as DropdownMenuLabel, a6 as DropdownMenuSeparator, _ as DropdownMenuCheckboxItem, ac as HoverCard, ae as HoverCardTrigger, ad as HoverCardContent, aF as Textarea, A as Accordion, C as Card, E as CardHeader, z as CardDescription, y as CardContent, ag as Label, D as CardFooter, al as ScrollArea, aB as Tabs, aD as TabsList, aE as TabsTrigger, aC as TabsContent, h as AlertDialog, r as AlertDialogTrigger, k as AlertDialogContent, n as AlertDialogHeader, q as AlertDialogTitle, l as AlertDialogDescription, m as AlertDialogFooter, j as AlertDialogCancel, i as AlertDialogAction, aA as Switch, c as cn$2, s as Avatar, an as Separator, aI as TooltipProvider, ao as Sheet, aq as SheetContent, at as SheetHeader, aw as SheetTitle, az as Toaster } from "./sooner-H65duPYc.js";
-import { ChevronRight, PlusIcon as PlusIcon$1, AlertCircle, X, DatabaseIcon, ChevronLeft, Plus, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, PlusCircle, ChevronDown, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { g as generateUUID, a as getBreakpointValue, c as cn$2 } from "./common-functions-BGzDsf1z.js";
+import { B as Button, Z as DropdownMenu, ab as DropdownMenuTrigger, $ as DropdownMenuContent, a1 as DropdownMenuItem, c as cn$1, ay as Skeleton, e as Alert, f as AlertDescription, af as Input$1, P as Dialog, Y as DialogTrigger, R as DialogContent, ah as Popover, aG as Tooltip, aJ as TooltipTrigger, ak as PopoverTrigger, aH as TooltipContent, aj as PopoverContent, G as Command, I as CommandInput, J as CommandList, K as CommandEmpty, L as CommandGroup, M as CommandItem, U as DialogHeader, X as DialogTitle, v as Badge, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, a2 as DropdownMenuLabel, a6 as DropdownMenuSeparator, _ as DropdownMenuCheckboxItem, ac as HoverCard, ae as HoverCardTrigger, ad as HoverCardContent, aF as Textarea, A as Accordion, C as Card, E as CardHeader, z as CardDescription, y as CardContent, ag as Label, D as CardFooter, al as ScrollArea, aB as Tabs, aD as TabsList, aE as TabsTrigger, aC as TabsContent, h as AlertDialog, r as AlertDialogTrigger, k as AlertDialogContent, n as AlertDialogHeader, q as AlertDialogTitle, l as AlertDialogDescription, m as AlertDialogFooter, j as AlertDialogCancel, i as AlertDialogAction, aA as Switch, s as Avatar, an as Separator, aI as TooltipProvider, ao as Sheet, aq as SheetContent, at as SheetHeader, aw as SheetTitle, az as Toaster } from "./sooner-H65duPYc.js";
+import { ChevronRight, PlusIcon as PlusIcon$1, AlertCircle, X, ChevronLeft, DatabaseIcon, Plus, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, PlusCircle, ChevronDown, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
-import { S as STYLES_KEY, f as getSplitChaiClasses, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as ROOT_TEMP_KEY } from "./apply-binding-Z9D6RXG4.js";
-import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, e as getThemeFontsLinkMarkup, h as getThemeCustomFontFace } from "./plugin-fnBB3TCm.js";
-import Fuse from "fuse.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, f as getSplitChaiClasses, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, h as ROOT_TEMP_KEY } from "./apply-binding-CkrtJykq.js";
+import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
+import { isObject } from "@rjsf/utils";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { toast } from "sonner";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as Ue } from "react-i18next";
+import { useTranslation as Fe } from "react-i18next";
+import Fuse from "fuse.js";
 import UndoManager from "undo-manager";
 import Link from "@tiptap/extension-link";
 import TextAlign from "@tiptap/extension-text-align";
 import Underline from "@tiptap/extension-underline";
-import { useEditor, EditorContent } from "@tiptap/react";
+import Placeholder from "@tiptap/extension-placeholder";
+import { useEditor, BubbleMenu as BubbleMenu$1, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
@@ -35,7 +37,7 @@ import { useFeature, FlagsProvider } from "flagged";
 import { parse, stringify } from "himalaya";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
-import { default as Fe } from "i18next";
+import { default as We } from "i18next";
 import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
 import tailwindForms from "@tailwindcss/forms";
 import tailwindTypography from "@tailwindcss/typography";
@@ -167,44 +169,7 @@ const globalBlocksAtom = atom((o) => {
   return filter(r, (n) => has(n, "blockId"));
 });
 globalBlocksAtom.debugLabel = "globalBlocksAtom";
-const builderStore = getDefaultStore$1(), writeAtomValue = atom(
-  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);
-    return i ? r(i, { ...o(i), ...a }) : null;
-  }
-), useUpdateBlockAtom = () => useSetAtom$1(writeAtomValue), useGetBlockAtomValue = (o) => useAtomCallback(
-  useCallback(
-    (r, n, a) => {
-      const l = r(o);
-      if (!l || !l.length)
-        return null;
-      const i = find(
-        l,
-        (c) => r(c)._id === (isString(a) ? a : r(a)._id)
-      );
-      return i ? r(i) : null;
-    },
-    [o]
-  ),
-  { store: builderStore }
-), useGetBlockAtom = (o) => useAtomCallback(
-  useCallback(
-    (r, n, a) => {
-      const l = r(o);
-      if (!l || !l.length)
-        return console.warn("No blocks available in splitAtoms"), null;
-      const i = find(
-        l,
-        (c) => r(c)._id === (isString(a) ? a : r(a)._id)
-      );
-      return i || (console.warn(`Block with id ${a} not found`), null);
-    },
-    [o]
-  ),
-  { store: builderStore }
-), selectedBlockIdsAtom = atom([]);
+const selectedBlockIdsAtom = atom([]);
 selectedBlockIdsAtom.debugLabel = "selectedBlockIdsAtom";
 const selectedBlocksAtom = atom((o) => {
   const r = o(presentBlocksAtom), n = o(selectedBlockIdsAtom);
@@ -222,7 +187,7 @@ const selectedBlockAtom = atom((o) => {
     return r[0];
 });
 selectedBlockAtom.debugLabel = "selectedBlockAtom";
-const getParentId = (o) => get(o, "_parent", null), selectedBlocksParentsAtom = atom((o) => {
+const useSelectedBlock = () => useAtomValue$1(selectedBlockAtom), getParentId = (o) => get(o, "_parent", null), selectedBlocksParentsAtom = atom((o) => {
   const r = o(selectedBlocksAtom), n = map(r, getParentId);
   return filter(o(presentBlocksAtom), (a) => includes(n, a._id));
 });
@@ -238,10 +203,7 @@ styleBreakpointAtom.debugLabel = "styleBreakpointAtom";
 const useSelectedBlocksDisplayChild = () => ({
   flexChild: useAtomValue$1(selectedBlockFlexChildAtom),
   gridChild: useAtomValue$1(selectedBlockGridChildAtom)
-}), useSelectedBlock = () => {
-  const [o] = useSelectedBlockIds(), r = useGetBlockAtomValue(pageBlocksAtomsAtom);
-  return o.length > 0 ? r(o[0]) : null;
-}, selectedBlockHierarchy = atom((o) => {
+}), selectedBlockHierarchy = atom((o) => {
   const r = o(selectedBlockAtom), n = o(presentBlocksAtom);
   let a = r;
   const l = [r];
@@ -287,7 +249,11 @@ const useSelectedBlocksDisplayChild = () => ({
 }, CHAI_BUILDER_EVENTS = {
   OPEN_ADD_BLOCK: "OPEN_ADD_BLOCK",
   CLOSE_ADD_BLOCK: "CLOSE_ADD_BLOCK",
-  SHOW_BLOCK_SETTINGS: "SHOW_BLOCK_SETTINGS"
+  SHOW_BLOCK_SETTINGS: "SHOW_BLOCK_SETTINGS",
+  //CANVAS Events
+  CLEAR_CANVAS_SELECTION: "CLEAR_CANVAS_SELECTION",
+  CANVAS_BLOCK_SELECTED: "CANVAS_BLOCK_SELECTED",
+  CANVAS_BLOCK_STYLE_SELECTED: "CANVAS_BLOCK_STYLE_SELECTED"
 }, canAcceptChildBlock = (o, r) => {
   if (!o) return !0;
   const n = getRegisteredChaiBlock(o);
@@ -349,7 +315,8 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: r }) => {
       /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("AFTER"), children: n("Add after") })
     ] })
   ] }) : null;
-}, draggedBlockAtom = atom(null), dropTargetBlockIdAtom = atom(null);
+}, draggedBlockAtom = atom(null);
+atom(null);
 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") {
@@ -384,8 +351,8 @@ function insertBlocksAtPosition(o, r, n, a) {
       }), l.unshift(h), i = i.map((f) => {
         if (f._id === n) {
           const x = { ...f, content: "" };
-          return Object.keys(x).forEach((k) => {
-            k.startsWith("content-") && (x[k] = "");
+          return Object.keys(x).forEach((y) => {
+            y.startsWith("content-") && (x[y] = "");
           }), x;
         }
         return f;
@@ -520,8 +487,8 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
         h && "content" in h && (n = n.map((f) => {
           if (f._id === u) {
             const x = { ...f, content: m.content };
-            return Object.keys(m).forEach((k) => {
-              k.startsWith("content-") && (x[k] = m[k]);
+            return Object.keys(m).forEach((y) => {
+              y.startsWith("content-") && (x[y] = m[y]);
             }), x;
           }
           return f;
@@ -542,7 +509,29 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
     },
     [o, n, r, l]
   );
-}, useBlocksStoreManager = () => {
+}, builderStore = getDefaultStore$1(), writeAtomValue = atom(
+  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);
+    return i ? r(i, { ...o(i), ...a }) : null;
+  }
+), useUpdateBlockAtom = () => useSetAtom$1(writeAtomValue), useGetBlockAtom = (o) => useAtomCallback(
+  useCallback(
+    (r, n, a) => {
+      const l = r(o);
+      if (!l || !l.length)
+        return console.warn("No blocks available in splitAtoms"), null;
+      const i = find(
+        l,
+        (c) => r(c)._id === (isString(a) ? a : r(a)._id)
+      );
+      return i || (console.warn(`Block with id ${a} not found`), null);
+    },
+    [o]
+  ),
+  { store: builderStore }
+), useBlocksStoreManager = () => {
   const [, o] = useBlocksStore(), { postMessage: r } = useBroadcastChannel(), n = useUpdateBlockAtom();
   return {
     setNewBlocks: (a) => {
@@ -578,6 +567,30 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
       }), r({ type: "blocks-props-updated", blocks: a });
     }
   };
+}, blockRepeaterDataAtom = atom({});
+blockRepeaterDataAtom.debugLabel = "blockRepeaterDataAtom";
+const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyncProps = (o, r = []) => {
+  const [n, a] = useState({
+    status: "idle",
+    props: {},
+    error: void 0
+  }), l = useBuilderProp("getBlockAsyncProps", async (u) => ({})), i = useSetAtom$1(blockRepeaterDataAtom), c = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r))]), d = get(n, "status"), p = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`);
+  return useEffect(() => {
+    o && (a((u) => ({ ...u, status: "loading", props: {} })), l(o).then((u = {}) => {
+      p ? i((g) => ({
+        ...g,
+        [o._id]: { status: "loaded", props: isArray(u) ? u : {}, repeaterItems: o.repeaterItems }
+      })) : a((g) => ({ ...g, status: "loaded", props: isObject(u) ? u : {} }));
+    }).catch((u) => {
+      p ? i((g) => ({
+        ...g,
+        [o._id]: { status: "error", error: u, props: {} }
+      })) : a((g) => ({ ...g, status: "error", error: u, props: {} }));
+    }));
+  }, [o == null ? void 0 : o._id, c, p]), {
+    $loading: d === "loading",
+    ...o ? get(n, "props", {}) : {}
+  };
 }, chaiBuilderPropsAtom = atom(null);
 chaiBuilderPropsAtom.debugLabel = "chaiBuilderPropsAtom";
 const chaiExternalDataAtom = atom({});
@@ -590,7 +603,15 @@ const chaiRjsfTemplatesAtom = atom({});
 chaiRjsfTemplatesAtom.debugLabel = "chaiRjsfTemplatesAtom";
 const chaiPageExternalDataAtom = atom({});
 chaiPageExternalDataAtom.debugLabel = "chaiPageExternalDataAtom";
-const usePageExternalData = () => useAtomValue$1(chaiPageExternalDataAtom), useBuilderProp = (o, r = void 0) => {
+const usePageExternalData = () => {
+  const [o] = useBlockRepeaterDataAtom(), r = useMemo(() => {
+    const a = {};
+    return Object.entries(o).forEach(([l, i]) => {
+      i.status === "loaded" && (a[i.repeaterItems.replace("}}", `/${l}`).replace("{{", "")] = i.props);
+    }), a;
+  }, [o]);
+  return { ...useAtomValue$1(chaiPageExternalDataAtom), ...r };
+}, useBuilderProp = (o, r = void 0) => {
   const n = useAtomValue$1(chaiBuilderPropsAtom);
   return useMemo(() => get(n, o, r), [n, o, r]);
 }, MODIFIERS = [
@@ -649,7 +670,7 @@ atom(null);
 const useBrandingOptions = () => {
   const [o, r] = useAtom$1(brandingOptionsAtom);
   return [
-    isObject(o) ? { ...BRANDING_OPTIONS_DEFAULTS, ...o } : BRANDING_OPTIONS_DEFAULTS,
+    isObject$1(o) ? { ...BRANDING_OPTIONS_DEFAULTS, ...o } : BRANDING_OPTIONS_DEFAULTS,
     r
   ];
 }, currentPageAtom = atom(null), useCurrentPage = () => ({ currentPage: useAtomValue$1(currentPageAtom) }), getBlockBuilderProps = memoize((o) => {
@@ -717,20 +738,46 @@ const useSavePage = () => {
   ), saveState: o, setSaveState: r };
 }, undoManager = new UndoManager();
 undoManager.setLimit(50);
-const useUndoManager = () => {
-  const [, o] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSaveStateChange", noop);
-  return useEffect(() => (undoManager.setCallback(() => {
-    o("UNSAVED"), r("UNSAVED");
-  }), () => {
+const undoRedoStateAtom = atom({
+  canUndo: !1,
+  canRedo: !1
+}), useUndoManager = () => {
+  const [, o] = useAtom$1(builderSaveStateAtom), [r, n] = useAtom$1(undoRedoStateAtom), a = useBuilderProp("onSaveStateChange", noop), l = useCallback(() => {
+    const u = {
+      canUndo: undoManager.hasUndo(),
+      canRedo: undoManager.hasRedo()
+    };
+    n(u), o("UNSAVED"), a("UNSAVED");
+  }, [n, o, a]);
+  useEffect(() => (undoManager.setCallback(l), () => {
     undoManager.setCallback(noop);
-  }), []), {
-    add: undoManager.add,
-    undo: undoManager.undo,
-    redo: undoManager.redo,
-    hasRedo: undoManager.hasRedo,
-    hasUndo: undoManager.hasUndo,
-    clear: undoManager.clear
-  };
+  }), [l]);
+  const i = useCallback(
+    (u) => {
+      undoManager.add(u), l();
+    },
+    [l]
+  ), c = useCallback(() => {
+    undoManager.undo(), l();
+  }, [l]), d = useCallback(() => {
+    undoManager.redo(), l();
+  }, [l]), p = useCallback(() => {
+    undoManager.clear(), n({
+      canUndo: !1,
+      canRedo: !1
+    });
+  }, [n]);
+  return useMemo(
+    () => ({
+      add: i,
+      undo: c,
+      redo: d,
+      hasUndo: () => r.canUndo,
+      hasRedo: () => r.canRedo,
+      clear: p
+    }),
+    [i, c, d, r.canUndo, r.canRedo, p]
+  );
 }, useBlocksStore = () => useAtom$1(presentBlocksAtom), useBlocksStoreUndoableActions = () => {
   const { add: o } = useUndoManager(), [r] = useBlocksStore(), {
     setNewBlocks: n,
@@ -740,50 +787,50 @@ const useUndoManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, k, b) => {
-      const S = map(x, (B) => {
-        const E = r.find((N) => N._id === B)._parent || null, A = r.filter((N) => E ? N._parent === E : !N._parent).map((N) => N._id).indexOf(B);
-        return { _id: B, oldParent: E, oldPosition: A };
-      }), w = S.find(({ _id: B }) => B === x[0]);
-      w && w.oldParent === k && w.oldPosition === b || (i(x, k, b), o({
-        undo: () => each(S, ({ _id: B, oldParent: _, oldPosition: E }) => {
-          i([B], _, E);
+    moveBlocks: (x, y, b) => {
+      const v = map(x, (w) => {
+        const _ = r.find((N) => N._id === w)._parent || null, B = r.filter((N) => _ ? N._parent === _ : !N._parent).map((N) => N._id).indexOf(w);
+        return { _id: w, oldParent: _, oldPosition: B };
+      }), A = v.find(({ _id: w }) => w === x[0]);
+      A && A.oldParent === y && A.oldPosition === b || (i(x, y, b), o({
+        undo: () => each(v, ({ _id: w, oldParent: E, oldPosition: _ }) => {
+          i([w], E, _);
         }),
-        redo: () => i(x, k, b)
+        redo: () => i(x, y, b)
       }));
     },
-    addBlocks: (x, k, b) => {
-      a(x, k, b), o({
+    addBlocks: (x, y, b) => {
+      a(x, y, b), o({
         undo: () => l(map(x, "_id")),
-        redo: () => a(x, k, b)
+        redo: () => a(x, y, b)
       });
     },
     removeBlocks: (x) => {
-      var w;
-      const k = (w = first(x)) == null ? void 0 : w._parent, S = r.filter((B) => k ? B._parent === k : !B._parent).indexOf(first(x));
+      var A;
+      const y = (A = first(x)) == null ? void 0 : A._parent, v = r.filter((w) => y ? w._parent === y : !w._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, k, S),
+        undo: () => a(x, y, v),
         redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (x, k, b) => {
-      let S = [];
+    updateBlocks: (x, y, b) => {
+      let v = [];
       if (b)
-        S = map(x, (w) => ({ _id: w, ...b }));
+        v = map(x, (A) => ({ _id: A, ...b }));
       else {
-        const w = keys(k);
-        S = map(x, (B) => {
-          const _ = r.find((v) => v._id === B), E = { _id: B };
-          return each(w, (v) => E[v] = _[v]), E;
+        const A = keys(y);
+        v = map(x, (w) => {
+          const E = r.find((S) => S._id === w), _ = { _id: w };
+          return each(A, (S) => _[S] = E[S]), _;
         });
       }
-      c(map(x, (w) => ({ _id: w, ...k }))), o({
-        undo: () => c(S),
-        redo: () => c(map(x, (w) => ({ _id: w, ...k })))
+      c(map(x, (A) => ({ _id: A, ...y }))), o({
+        undo: () => c(v),
+        redo: () => c(map(x, (A) => ({ _id: A, ...y })))
       });
     },
-    updateBlocksRuntime: (x, k) => {
-      c(map(x, (b) => ({ _id: b, ...k })));
+    updateBlocksRuntime: (x, y) => {
+      c(map(x, (b) => ({ _id: b, ...y })));
     },
     setNewBlocks: (x) => {
       n(x), o({
@@ -792,12 +839,12 @@ const useUndoManager = () => {
       });
     },
     updateMultipleBlocksProps: (x) => {
-      let k = [];
-      k = map(x, (b) => {
-        const S = keys(b), w = r.find((_) => _._id === b._id), B = {};
-        return each(S, (_) => B[_] = w[_]), B;
+      let y = [];
+      y = map(x, (b) => {
+        const v = keys(b), A = r.find((E) => E._id === b._id), w = {};
+        return each(v, (E) => w[E] = A[E]), w;
       }), c(x), o({
-        undo: () => c(k),
+        undo: () => c(y),
         redo: () => c(x)
       });
     }
@@ -809,9 +856,9 @@ const useUndoManager = () => {
       for (let f = 0; f < i.length; f++) {
         const { _id: x } = i[f];
         i[f]._id = generateUUID();
-        const k = filter(i, { _parent: x });
-        for (let b = 0; b < k.length; b++)
-          k[b]._parent = i[f]._id;
+        const y = filter(i, { _parent: x });
+        for (let b = 0; b < y.length; b++)
+          y[b]._parent = i[f]._id;
       }
       const p = first(i);
       let u, g;
@@ -822,8 +869,8 @@ const useUndoManager = () => {
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const k = i.blocks;
-        return a(k, c, d);
+        const y = i.blocks;
+        return a(y, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -2280,42 +2327,42 @@ const getBlockWithChildren = (o, r) => {
   })
 ), 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, m = (h, f) => {
-    const x = cloneDeep(f.find((k) => k._id === h));
-    for (const k in x) {
-      const b = x[k];
+    const x = cloneDeep(f.find((y) => y._id === h));
+    for (const y in x) {
+      const b = x[y];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
-        const { baseClasses: S, classes: w } = getSplitChaiClasses(b);
-        x[k] = compact(flattenDeep([S, w])).join(" ");
+        const { baseClasses: v, classes: A } = getSplitChaiClasses(b);
+        x[y] = compact(flattenDeep([v, A])).join(" ");
       } else
-        k !== "_id" && delete x[k];
+        y !== "_id" && delete x[y];
     }
     return x;
   };
   return {
     askAi: useCallback(
-      async (h, f, x, k) => {
+      async (h, f, x, y) => {
         if (l) {
           r(!0), a(null);
           try {
-            const b = p === u ? "" : p, S = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], w = await l(h, addLangToPrompt(x, g, h), S, b), { blocks: B, error: _ } = w;
-            if (_) {
-              a(_);
+            const b = p === u ? "" : p, v = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], A = await l(h, addLangToPrompt(x, g, h), v, b), { blocks: w, error: E } = A;
+            if (E) {
+              a(E);
               return;
             }
             if (h === "styles") {
-              const E = B.map((v) => {
-                for (const A in v)
-                  A !== "_id" && (v[A] = `${STYLES_KEY},${v[A]}`);
-                return v;
+              const _ = w.map((S) => {
+                for (const B in S)
+                  B !== "_id" && (S[B] = `${STYLES_KEY},${S[B]}`);
+                return S;
               });
-              c(E);
+              c(_);
             } else
-              i(B);
-            k && k(w);
+              i(w);
+            y && y(A);
           } catch (b) {
             a(b);
           } finally {
-            r(!1), k && k();
+            r(!1), y && y();
           }
         }
       },
@@ -2382,9 +2429,9 @@ const getBlockWithChildren = (o, r) => {
     d();
   }, []), { data: l, isLoading: o, refetch: d, error: n };
 }, useBuilderReset = () => {
-  const { clear: o } = useUndoManager(), [, r] = useSelectedBlockIds(), { clearHighlight: n } = useBlockHighlight(), [, a] = useSelectedStylingBlocks(), [, l] = useAtom$1(aiAssistantActiveAtom), { reset: i } = usePartialBlocksStore(), { setSaveState: c } = useSavePage();
+  const { clear: o } = useUndoManager(), [, r] = useSelectedBlockIds(), { clearHighlight: n } = useBlockHighlight(), [, a] = useSelectedStylingBlocks(), [, l] = useAtom$1(aiAssistantActiveAtom), { reset: i } = usePartialBlocksStore(), { setSaveState: c } = useSavePage(), [, d] = useBlockRepeaterDataAtom();
   return () => {
-    r([]), a([]), n(), o(), l(!1), i(), c("SAVED");
+    d({}), r([]), a([]), n(), o(), l(!1), i(), c("SAVED");
   };
 }, canvasZoomAtom = atomWithStorage("canvasZoom", 100), useCanvasZoom = () => useAtom$1(canvasZoomAtom), codeEditorAtom = atom(null), useCodeEditor = () => useAtom$1(codeEditorAtom), cutBlockIdsAtom = atom([]), useCutBlockIds = () => {
   const [o, r] = useAtom$1(cutBlockIdsAtom), n = useSetAtom$1(copiedBlockIdsAtom), a = useCallback(
@@ -2411,7 +2458,7 @@ const getBlockWithChildren = (o, r) => {
             for (const f of m)
               if (f._type === "PartialBlock" || f._type === "GlobalBlock") {
                 let x = l(f.partialBlockId);
-                f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((k) => (isEmpty(k._parent) && set(k, "_parent", f._parent), k))), h = [...h, ...x];
+                f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((y) => (isEmpty(y._parent) && set(y, "_parent", f._parent), y))), h = [...h, ...x];
               } else
                 h.push(f);
             return h;
@@ -2714,8 +2761,8 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
     ({ key: x }) => {
-      var k;
-      f((k = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : k.toUpperCase());
+      var y;
+      f((y = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : y.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
     [f]
@@ -2738,79 +2785,6 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     );
   }) });
 };
-class Content extends Component {
-  componentDidMount() {
-    this.props.contentDidMount();
-  }
-  componentDidUpdate() {
-    this.props.contentDidUpdate();
-  }
-  render() {
-    return Children.only(this.props.children);
-  }
-}
-class Frame extends Component {
-  constructor(n, a) {
-    super(n, a);
-    H(this, "setRef", (n) => {
-      this.nodeRef.current = n;
-      const { forwardedRef: a } = this.props;
-      typeof a == "function" ? a(n) : a && (a.current = n);
-    });
-    H(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
-    H(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() });
-  }
-}
-H(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 getTargetedBlock(o) {
   if (o.getAttribute("data-block-id") === "canvas")
     return null;
@@ -2819,27 +2793,47 @@ function getTargetedBlock(o) {
   const r = o.closest("[data-block-id]");
   return (r == null ? void 0 : r.getAttribute("data-block-id")) === "canvas" ? null : r;
 }
-const useHandleCanvasClick = () => {
-  const [, o] = useSelectedStylingBlocks(), [r, n] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
+const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"], isRichTextParent = (o) => {
+  var r;
+  return (o == null ? void 0 : o.getAttribute("data-block-type")) === "RichText" || ((r = o == null ? void 0 : o.parentElement) == null ? void 0 : r.getAttribute("data-block-type")) === "RichText";
+}, isInlineEditable = (o, r) => {
+  if (isRichTextParent(o))
+    return !0;
+  const n = o == null ? void 0 : o.getAttribute("data-block-type");
+  return !n || o && o.children.length > 0 || n === "Button" ? !1 : INLINE_EDITABLE_BLOCKS.includes(n);
+}, useHandleCanvasDblClick = () => {
+  const [o, r] = useAtom$1(inlineEditingActiveAtom);
+  return useCallback(
+    (n) => {
+      if (n == null || n.preventDefault(), n == null || n.stopPropagation(), o) return;
+      const a = getTargetedBlock(n.target);
+      if (!isInlineEditable(a)) return;
+      const l = a.getAttribute("data-block-id");
+      l && r(l);
+    },
+    [o, r]
+  );
+}, useHandleCanvasClick = () => {
+  const [o] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: r } = useBlockHighlight(), n = useRef(0);
   return useCallback(
-    (c) => {
-      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") {
-        n([]), o([]), i();
+    (a) => {
+      const l = (/* @__PURE__ */ new Date()).getTime();
+      if (o || (a.stopPropagation(), l - n.current < 400)) return;
+      const c = getTargetedBlock(a.target);
+      if (c != null && c.getAttribute("data-block-id") && (c == null ? void 0 : c.getAttribute("data-block-id")) === "container") {
+        pubsub.publish(CHAI_BUILDER_EVENTS.CLEAR_CANVAS_SELECTION);
         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");
-        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");
-        r.includes(p) || l == null || l.closeAll(), o([]), n(p === "canvas" ? [] : [p]);
+      if (c != null && c.getAttribute("data-block-parent")) {
+        const d = c.getAttribute("data-style-prop"), p = c.getAttribute("data-style-id"), u = c.getAttribute("data-block-parent");
+        pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, { blockId: u, styleId: p, styleProp: d });
+      } else if (c != null && c.getAttribute("data-block-id")) {
+        const d = c.getAttribute("data-block-id");
+        pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_SELECTED, { blockId: d === "canvas" ? [] : [d] });
       }
-      i();
+      r(), n.current = (/* @__PURE__ */ new Date()).getTime();
     },
-    [r, l, n, o]
+    [o]
   );
 }, useHandleMouseMove = () => {
   const [o] = useAtom$1(inlineEditingActiveAtom), { highlightBlock: r } = useBlockHighlight();
@@ -2850,37 +2844,22 @@ const useHandleCanvasClick = () => {
       a && r(a);
     },
     [o, r],
-    20
+    100
   );
 }, useHandleMouseLeave = () => {
   const { clearHighlight: o } = useBlockHighlight();
   return useCallback(() => o(), [o]);
-}, StylingBlockSelectWatcher = () => {
-  const [o, r] = useSelectedStylingBlocks(), { document: n } = useFrame(), { clearHighlight: a } = useBlockHighlight(), [l] = useSelectedBlockIds();
-  return useEffect(() => {
-    setTimeout(() => {
-      if (!isEmpty(o))
-        return;
-      const i = getElementByDataBlockId(n, first(l));
-      if (i) {
-        const c = i.getAttribute("data-style-prop");
-        if (c) {
-          const d = i.getAttribute("data-style-id"), p = i.getAttribute("data-block-parent");
-          r([{ id: d, prop: c, blockId: p }]);
-        }
-      }
-    }, 100);
-  }, [n, l, r, o]), useEffect(() => () => a(), [a]), null;
 }, Canvas = ({ children: o }) => {
-  const r = useHandleCanvasClick(), n = useHandleMouseMove(), a = useHandleMouseLeave();
+  const r = useHandleCanvasDblClick(), n = useHandleCanvasClick(), a = useHandleMouseMove(), l = useHandleMouseLeave();
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-block-id": "canvas",
       id: "canvas",
-      onClick: r,
-      onMouseMove: n,
-      onMouseLeave: a,
+      onClick: n,
+      onDoubleClick: r,
+      onMouseMove: a,
+      onMouseLeave: l,
       className: "relative h-full max-w-full p-px",
       children: o
     }
@@ -2936,13 +2915,13 @@ const useHandleCanvasClick = () => {
       tabIndex: 0,
       ref: m.setFloating,
       style: g,
-      onClick: (k) => {
-        k.stopPropagation(), k.preventDefault();
+      onClick: (y) => {
+        y.stopPropagation(), y.preventDefault();
       },
-      onMouseEnter: (k) => {
-        k.stopPropagation(), i(null);
+      onMouseEnter: (y) => {
+        y.stopPropagation(), i(null);
       },
-      onKeyDown: (k) => k.stopPropagation(),
+      onKeyDown: (y) => y.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         f && /* @__PURE__ */ jsx(
@@ -3008,18 +2987,90 @@ const useHandleCanvasClick = () => {
     [force-show] { display: block !important; }
     [data-cut-block="yes"] { pointer-events: none !important; display: none !important; }
     </style>    
-    <style id="hidden-blocks"></style>
-    <style id="selected-styling-block"></style>
-    <style id="highlighted-block"></style>
-    <style id="dragged-block"></style>
-    <style id="drop-target-block"></style>
-    <style id="selected-block"></style>
+    <style id="highlighted-block">
+      [data-highlighted]{
+        outline: 1px solid #42a1fc !important; outline-offset: -1px;
+      }
+    </style>
 
   </head>
   <body class="font-body antialiased h-full">
     <div class="frame-root h-full"></div>
   </body>
-</html>`, useKeyEventWatcher = (o) => {
+</html>`;
+class Content extends Component {
+  componentDidMount() {
+    this.props.contentDidMount();
+  }
+  componentDidUpdate() {
+    this.props.contentDidUpdate();
+  }
+  render() {
+    return Children.only(this.props.children);
+  }
+}
+class Frame extends Component {
+  constructor(n, a) {
+    super(n, a);
+    H(this, "setRef", (n) => {
+      this.nodeRef.current = n;
+      const { forwardedRef: a } = this.props;
+      typeof a == "function" ? a(n) : a && (a.current = n);
+    });
+    H(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
+    H(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() });
+  }
+}
+H(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 })), useKeyEventWatcher = (o) => {
   const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), h = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(r), {}, [r, p]), useHotkeys("ctrl+c,command+c", () => u(r), {}, [r, u]), useHotkeys(
     "ctrl+v,command+v",
@@ -3065,19 +3116,11 @@ const useHandleCanvasClick = () => {
   const r = useMemo(() => getChaiThemeCssVariables(o), [o]);
   return /* @__PURE__ */ jsx("style", { id: "chai-theme", children: r });
 }, HeadTags = () => {
-  const [o] = useTheme(), r = useThemeOptions(), [n] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: p } = useFrame(), [u] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [g] = useState(
-    d == null ? void 0 : d.getElementById("selected-block")
-  ), [m] = useState(
-    d == null ? void 0 : d.getElementById("selected-styling-block")
-  ), [h] = useState(
-    d == null ? void 0 : d.getElementById("dragged-block")
-  );
-  useEffect(() => {
-    a ? d == null || d.documentElement.classList.add("dark") : d == null || d.documentElement.classList.remove("dark");
-  }, [a, d]);
-  const f = useRegisteredFonts();
-  useEffect(() => {
-    !p || !p.tailwind || (p.tailwind.config = {
+  const [o] = useTheme(), r = useThemeOptions(), [n] = useDarkMode(), { document: a, window: l } = useFrame();
+  return useEffect(() => {
+    n ? a == null || a.documentElement.classList.add("dark") : a == null || a.documentElement.classList.remove("dark");
+  }, [n, a]), useEffect(() => {
+    !l || !l.tailwind || (l.tailwind.config = {
       darkMode: "class",
       theme: {
         extend: {
@@ -3096,49 +3139,50 @@ const useHandleCanvasClick = () => {
         tailwindForms,
         tailwindAspectRatio,
         twContainer,
-        plugin(function({ addBase: S, theme: w }) {
-          S({
+        plugin(function({ addBase: i, theme: c }) {
+          i({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: w("fontFamily.heading")
+              fontFamily: c("fontFamily.heading")
             },
             body: {
-              fontFamily: w("fontFamily.body"),
-              color: w("colors.foreground"),
-              backgroundColor: w("colors.background")
+              fontFamily: c("fontFamily.body"),
+              color: c("colors.foreground"),
+              backgroundColor: c("colors.background")
             }
           });
         })
       ]
     });
-  }, [o, r, p]), useEffect(() => {
-    g && (g.textContent = `${map(n, (S) => `[data-block-id="${S}"]`).join(",")}{
-                outline: 1px solid ${n.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
-            }`);
-  }, [n, g]), useEffect(() => {
-    h.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [i, h]), useEffect(() => {
-    u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
-  }, [u]), useEffect(() => {
-    m && (m.textContent = `${map(l, ({ id: S }) => `[data-style-id="${S}"]`).join(",")}{
-                outline: 1px solid orange !important; outline-offset: -1px;
-            }`);
-  }, [l, m]), useEffect(() => {
-    d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
-  }, [c, d]);
-  const x = useMemo(() => {
-    const { heading: S, body: w } = {
+  }, [o, r, l]), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CssThemeVariables, { theme: o }),
+    /* @__PURE__ */ jsx(Fonts, {}),
+    /* @__PURE__ */ jsx(SelectedBlocks, {}),
+    /* @__PURE__ */ jsx(SelectedStylingBlocks, {})
+  ] });
+}, SelectedStylingBlocks = () => {
+  const [o] = useSelectedStylingBlocks(), [r] = useSelectedBlockIds(), n = useMemo(() => `${map(o, ({ id: a }) => `[data-style-id="${a}"]`).join(",")}{
+                outline: 1px solid ${r.length > 0 ? "#42a1fc" : "#de8f09"} !important; outline-offset: -1px;
+            }`, [o, r]);
+  return /* @__PURE__ */ jsx("style", { id: "selected-styling-blocks", dangerouslySetInnerHTML: { __html: n } });
+}, SelectedBlocks = () => {
+  const [o] = useSelectedBlockIds(), r = useMemo(() => `${map(o, (n) => `[data-block-id="${n}"]`).join(",")}{
+                outline: 1px solid #42a1fc !important; outline-offset: -1px;
+            }`, [o]);
+  return /* @__PURE__ */ jsx("style", { id: "selected-blocks", dangerouslySetInnerHTML: { __html: r } });
+}, Fonts = () => {
+  const [o] = useTheme(), r = useRegisteredFonts(), n = useMemo(() => {
+    const { heading: i, body: c } = {
       heading: get(o, "fontFamily.heading"),
       body: get(o, "fontFamily.body")
     };
-    return f.filter((B) => B.family === S || B.family === w);
-  }, [o == null ? void 0 : o.fontFamily, f]), k = useMemo(() => getThemeFontsLinkMarkup(filter(x, (S) => has(S, "url"))), [x]), b = useMemo(
-    () => getThemeCustomFontFace(filter(x, (S) => has(S, "src"))),
-    [x]
+    return r.filter((d) => d.family === i || d.family === c);
+  }, [o == null ? void 0 : o.fontFamily, r]), a = useMemo(() => getThemeFontsUrls(filter(n, (i) => has(i, "url"))), [n]), l = useMemo(
+    () => getThemeCustomFontFace(filter(n, (i) => has(i, "src"))),
+    [n]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(CssThemeVariables, { theme: o }),
-    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: k } }),
-    /* @__PURE__ */ jsx("style", { id: "chai-custom-fonts", dangerouslySetInnerHTML: { __html: b } })
+    a.map((i, c) => /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: i }, `google-font-${c}`)),
+    /* @__PURE__ */ jsx("style", { id: "chai-custom-fonts", dangerouslySetInnerHTML: { __html: l } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: r, onResize: n }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
@@ -3157,6 +3201,12 @@ const useHandleCanvasClick = () => {
     a([]), l([]);
   }, [a, l]);
   return /* @__PURE__ */ jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
+}, MayBeAsyncPropsWrapper = ({ children: o, block: r }) => {
+  const n = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), a = has(n, "asyncProps"), l = useAsyncProps(
+    a ? r : void 0,
+    get(n, "asyncProps", [])
+  );
+  return o(l);
 }, ErrorFallback = () => /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center bg-red-50 p-2 text-center text-red-500", children: "Something went wrong." }), useBlockRuntimeProps = () => {
   const [o] = useBlocksStore();
   return useCallback(
@@ -3170,7 +3220,325 @@ const useHandleCanvasClick = () => {
     }, {}),
     [o]
   );
-}, RepeaterContext = createContext({
+}, BUBBLE_MENU_ICONS = {
+  bold: FontBoldIcon,
+  italic: FontItalicIcon,
+  underline: UnderlineIcon,
+  strikethrough: StrikethroughIcon,
+  code: CodeIcon,
+  link: Link1Icon,
+  bulletList: ListBulletIcon,
+  orderedList: ListBulletIcon,
+  heading1: HeadingIcon,
+  heading2: HeadingIcon,
+  heading3: HeadingIcon,
+  quote: QuoteIcon,
+  alignLeft: TextAlignLeftIcon,
+  alignCenter: TextAlignCenterIcon,
+  alignRight: TextAlignRightIcon
+}, BubbleMenuButton = ({ icon: o, title: r, onClick: n, isActive: a }) => {
+  const l = BUBBLE_MENU_ICONS[o];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: n,
+      className: cn$1("rounded-md p-1.5 transition-colors duration-200", a ? "bg-white/20" : "hover:bg-white/10"),
+      title: r,
+      children: /* @__PURE__ */ jsx(l, { className: "h-4 w-4" })
+    }
+  );
+}, BubbleMenu = ({ editor: o }) => {
+  if (!o) return null;
+  const r = () => {
+    const n = window.prompt("Enter URL");
+    n && o.chain().focus().setLink({ href: n }).run();
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center overflow-hidden rounded-lg border border-blue-500/20 bg-blue-600 text-white shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center p-1", children: [
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "bold",
+        title: "Bold",
+        onClick: () => o.chain().focus().toggleBold().run(),
+        isActive: o.isActive("bold")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "italic",
+        title: "Italic",
+        onClick: () => o.chain().focus().toggleItalic().run(),
+        isActive: o.isActive("italic")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "underline",
+        title: "Underline",
+        onClick: () => o.chain().focus().toggleUnderline().run(),
+        isActive: o.isActive("underline")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "strikethrough",
+        title: "Strikethrough",
+        onClick: () => o.chain().focus().toggleStrike().run(),
+        isActive: o.isActive("strike")
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-[1px] bg-white/20" }),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "link",
+        title: o.isActive("link") ? "Remove link" : "Add link",
+        onClick: () => {
+          o.isActive("link") ? o.chain().focus().unsetLink().run() : r();
+        },
+        isActive: o.isActive("link")
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-[1px] bg-white/20" }),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "bulletList",
+        title: "Bullet list",
+        onClick: () => o.chain().focus().toggleBulletList().run(),
+        isActive: o.isActive("bulletList")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "orderedList",
+        title: "Numbered list",
+        onClick: () => o.chain().focus().toggleOrderedList().run(),
+        isActive: o.isActive("orderedList")
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-[1px] bg-white/20" }),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "alignLeft",
+        title: "Align left",
+        onClick: () => o.chain().focus().setTextAlign("left").run(),
+        isActive: o.isActive({ textAlign: "left" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "alignCenter",
+        title: "Align center",
+        onClick: () => o.chain().focus().setTextAlign("center").run(),
+        isActive: o.isActive({ textAlign: "center" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BubbleMenuButton,
+      {
+        icon: "alignRight",
+        title: "Align right",
+        onClick: () => o.chain().focus().setTextAlign("right").run(),
+        isActive: o.isActive({ textAlign: "right" })
+      }
+    )
+  ] }) });
+}, RichTextEditor = memo(
+  ({
+    blockContent: o,
+    editingElement: r,
+    onClose: n,
+    onChange: a,
+    onEscape: l
+  }) => {
+    const { document: i } = useFrame(), c = useEditor(
+      {
+        editable: !0,
+        content: o,
+        extensions: [
+          StarterKit,
+          Underline,
+          TextAlign.configure({
+            types: ["heading", "paragraph"]
+          }),
+          Link.configure({
+            openOnClick: !1,
+            HTMLAttributes: {
+              class: "text-blue-500 hover:text-blue-600 underline"
+            }
+          }),
+          Placeholder.configure({
+            placeholder: "Enter text here",
+            emptyEditorClass: "cursor-text before:content-[attr(data-placeholder)] before:absolute before:opacity-50 before:pointer-events-none"
+          })
+        ],
+        onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
+        onBlur: ({ editor: u, event: g }) => {
+          const m = g.relatedTarget, h = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = h == null ? void 0 : h.contains(m), y = f == null ? void 0 : f.contains(m);
+          if (!x && !y) {
+            const b = (u == null ? void 0 : u.getHTML()) || "";
+            n(b);
+          }
+        }
+      },
+      []
+    );
+    useEffect(() => {
+      var u;
+      (u = c == null ? void 0 : c.commands) == null || u.focus(), c == null || c.emit("focus", {
+        editor: c,
+        event: new FocusEvent("focus"),
+        transaction: []
+      });
+    }, [c]);
+    const d = useMemo(() => {
+      var m;
+      const u = "max-w-none shadow-none outline outline-[2px] outline-green-500 [&_*]:shadow-none";
+      if (!r) return u;
+      const g = ((m = r == null ? void 0 : r.className) == null ? void 0 : m.replace("sr-only", "")) || "";
+      return `${u} ${g}`;
+    }, [r]), p = useCallback(
+      (u) => {
+        u.key === "Escape" && l(u);
+      },
+      [l]
+    );
+    return /* @__PURE__ */ jsxs("div", { onKeyDown: p, onClick: (u) => u.stopPropagation(), children: [
+      c && /* @__PURE__ */ jsx(
+        BubbleMenu$1,
+        {
+          editor: c,
+          tippyOptions: {
+            duration: 100
+          },
+          children: /* @__PURE__ */ jsx(BubbleMenu, { editor: c })
+        }
+      ),
+      /* @__PURE__ */ jsx(EditorContent, { editor: c, className: d })
+    ] });
+  }
+), MemoizedEditor = memo(
+  ({
+    editingElement: o,
+    blockContent: r,
+    onClose: n,
+    editorRef: a,
+    onChange: l,
+    onEscape: i
+  }) => {
+    const { document: c, window: d } = useFrame();
+    useEffect(() => {
+      if (a.current) {
+        a.current.innerText = r, a.current.focus();
+        const h = c.createRange(), f = d.getSelection();
+        h.selectNodeContents(a.current), h.collapse(!1), f == null || f.removeAllRanges(), f == null || f.addRange(h), a.current.focus();
+      } else
+        n();
+    }, [c, d]);
+    const p = useMemo(() => {
+      var f;
+      const h = ((f = o == null ? void 0 : o.tagName) == null ? void 0 : f.toLowerCase()) || "div";
+      return h === "button" ? "div" : h;
+    }, [o]), u = useCallback(
+      (h) => {
+        (h.key === "Enter" || h.key === "Escape") && i(h);
+      },
+      [i]
+    ), g = useCallback(() => {
+      n();
+    }, [n]), m = useMemo(() => {
+      var h;
+      return {
+        id: "active-inline-editing-element",
+        contentEditable: !0,
+        className: `${((h = o == null ? void 0 : o.className) == null ? void 0 : h.replace("sr-only", "")) || ""} outline outline-[2px] outline-green-500 shadow-none empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 empty:before:absolute empty:before:pointer-events-none empty:before:select-none empty:before:inset-0 empty:before:z-0 relative min-h-[1em]`,
+        style: cloneDeep(o == null ? void 0 : o.style) || {},
+        onInput: (f) => {
+          const x = f.target;
+          x && (x.innerText.trim() === "" ? (x.setAttribute("data-placeholder", "Enter text here"), x.children.length > 0 && x.children[0].remove()) : f.target.removeAttribute("data-placeholder"), l(f.target.innerText));
+        },
+        onClick: (f) => {
+          f.stopPropagation(), f.preventDefault();
+        }
+      };
+    }, [o == null ? void 0 : o.className, o == null ? void 0 : o.style]);
+    return /* @__PURE__ */ jsx(Fragment, { children: createElement(p, {
+      ref: a,
+      onBlur: g,
+      onKeyDown: u,
+      ...m
+    }) });
+  }
+), WithBlockTextEditor = memo(
+  ({ block: o, children: r }) => {
+    const n = "content", { document: a } = useFrame(), [l, i] = useAtom$1(inlineEditingActiveAtom), [c, d] = useState(null), p = useRef(null), { clearHighlight: u } = useBlockHighlight(), g = useUpdateBlocksProps(), { selectedLang: m } = useLanguages(), [, h] = useSelectedBlockIds(), f = useRef(null), x = l, { blockContent: y, blockType: b } = useMemo(() => {
+      var C;
+      const _ = o._type;
+      let S = o[n];
+      const B = getRegisteredChaiBlock(o._type);
+      return m && ((C = B == null ? void 0 : B.i18nProps) == null ? void 0 : C.includes(n)) && has(o, `${n}-${m}`) && (S = get(o, `${n}-${m}`)), { blockContent: S, blockType: _ };
+    }, [o, m]), v = useCallback(
+      (_) => {
+        var B;
+        const S = _ || ((B = p.current) == null ? void 0 : B.innerText);
+        g([x], { [n]: S }), d(null), i(null), h([]);
+      },
+      [x, g, i, h, m]
+    ), A = useDebouncedCallback(
+      (_) => {
+        g([x], { [n]: _ });
+      },
+      [x, o, g, m],
+      1e3
+    ), w = useCallback(
+      (_) => {
+        _.preventDefault(), x && (f.current = x), v(), setTimeout(() => {
+          const S = f.current;
+          f.current = null, h([S]);
+        }, 100);
+      },
+      [h, x, m]
+    );
+    useEffect(() => {
+      var S;
+      if (!x) return;
+      const _ = getElementByDataBlockId(a, x);
+      (S = _ == null ? void 0 : _.classList) == null || S.add("sr-only"), d(_);
+    }, [x, b, a]);
+    const E = useMemo(() => c ? (u(), b === "RichText" ? /* @__PURE__ */ jsx(
+      RichTextEditor,
+      {
+        blockContent: y,
+        editingElement: c,
+        onChange: A,
+        onClose: v,
+        onEscape: w
+      }
+    ) : /* @__PURE__ */ jsx(
+      MemoizedEditor,
+      {
+        editorRef: p,
+        blockContent: y,
+        editingElement: c,
+        onClose: v,
+        onChange: A,
+        onEscape: w
+      }
+    )) : null, [c, x, b, y, v, m]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      E,
+      r
+    ] });
+  },
+  (o, r) => o.block._id === r.block._id && o.block.content === r.block.content
+), RepeaterContext = createContext({
   index: -1,
   key: ""
 }), CORE_BLOCKS = [
@@ -3194,63 +3562,56 @@ const useHandleCanvasClick = () => {
   "CustomScript",
   "CustomHTML"
 ], BlockRenderer = ({
-  blockAtom: o,
-  children: r
+  asyncProps: o,
+  blockAtom: r,
+  children: n
 }) => {
-  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), { index: m, key: h } = useContext(RepeaterContext), f = useMemo(
-    () => u ? applyBindingToBlockProps(applyLanguage(n, l, a), d, {
-      index: m,
-      key: h
-    }) : applyLanguage(n, l, a),
-    [n, l, a, d, u, m, h]
-  ), x = useMemo(() => getBlockTagAttributes(n), [n, getBlockTagAttributes]), k = useMemo(
-    () => c(n._id, getBlockRuntimeProps(n._type)),
-    [n._id, n._type, c, getBlockRuntimeProps]
-  ), b = useMemo(() => !has(a, "dataProvider") || !isFunction(a.dataProvider) ? {} : a.dataProvider({
-    block: n,
-    draft: !0,
-    inBuilder: !0,
-    lang: l || i,
-    pageProps: {}
-  }), [n, l, i, a, d]), S = useMemo(
+  const [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(r), i = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: c, fallbackLang: d } = useLanguages(), p = useBlockRuntimeProps(), u = usePageExternalData(), [g] = useHiddenBlockIds(), [m] = useAtom$1(dataBindingActiveAtom), h = get(i, "component", null), { index: f, key: x } = useContext(RepeaterContext), y = useMemo(
+    () => m ? applyBindingToBlockProps(applyLanguage(l, c, i), u, {
+      index: f,
+      key: x
+    }) : applyLanguage(l, c, i),
+    [l, c, i, u, m, f, x]
+  ), b = useMemo(() => getBlockTagAttributes(l), [l, getBlockTagAttributes]), v = useMemo(
+    () => p(l._id, getBlockRuntimeProps(l._type)),
+    [l._id, l._type, p, getBlockRuntimeProps]
+  ), A = useMemo(
     () => ({
-      blockProps: {
-        "data-block-id": n._id,
-        "data-block-type": n._type
-      },
+      blockProps: { "data-block-id": l._id, "data-block-type": l._type },
       inBuilder: !0,
-      lang: l || i,
-      ...f,
-      ...x,
-      ...k,
-      ...b
+      lang: c || d,
+      ...y,
+      ...b,
+      ...v,
+      ...o
     }),
     [
-      n._id,
-      n._type,
-      l,
-      i,
-      f,
-      x,
-      k,
-      b
+      l._id,
+      l._type,
+      c,
+      d,
+      y,
+      b,
+      v,
+      o
     ]
-  ), w = useMemo(() => !CORE_BLOCKS.includes(n._type), [n._type]);
-  if (isNull(g) || p.includes(n._id)) return null;
-  const B = /* @__PURE__ */ jsx(Suspense, { children: createElement(g, {
-    ...S,
-    children: r({
-      _id: n._id,
-      _type: n._type,
-      ...isArray(f.repeaterItems) ? {
-        repeaterItems: applyLimit(f.repeaterItems, n),
-        repeaterItemsBinding: f.repeaterItemsBinding
+  ), w = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]);
+  if (isNull(h) || g.includes(l._id)) return null;
+  let E = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
+    ...A,
+    children: n({
+      _id: l._id,
+      _type: l._type,
+      ...isArray(y.repeaterItems) ? {
+        repeaterItems: applyLimit(y.repeaterItems, l),
+        $repeaterItemsKey: y.$repeaterItemsKey
       } : {},
-      ...n.partialBlockId ? { partialBlockId: n.partialBlockId } : "",
-      ...n.globalBlock ? { partialBlockId: n.globalBlock } : ""
+      ...l.partialBlockId ? { partialBlockId: l.partialBlockId } : "",
+      ...l.globalBlock ? { partialBlockId: l.globalBlock } : ""
     })
   }) });
-  return w ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: B }) : B;
+  const _ = a === l._id ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: l, children: E }) : E;
+  return w ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: _ }) : _;
 }, PartialBlocksRenderer = ({ partialBlockId: o }) => {
   const { getPartailBlocks: r } = usePartialBlocksStore(), n = useMemo(() => r(o), [r, o]), a = useMemo(() => splitAtom(atom(n)), [n]);
   return isEmpty(n) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: n });
@@ -3268,7 +3629,7 @@ const useHandleCanvasClick = () => {
   );
   return map(l, (c) => {
     const d = a(c._id);
-    return d ? /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, children: ({ _id: p, _type: u, partialBlockId: g, repeaterItems: m, repeaterItemsBinding: h }) => u === "Repeater" ? isArray(m) && m.map((f, x) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: x, key: h }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: c._id }) }, `${p}-${x}`)) : u === "GlobalBlock" || u === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: g }) }) : i(p) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: c._id }) : null }, c._id) : null;
+    return d ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: c, children: (p) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, asyncProps: p, children: ({ _id: u, _type: g, partialBlockId: m, repeaterItems: h, $repeaterItemsKey: f }) => g === "Repeater" ? isArray(h) && h.map((x, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: f }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: c._id }) }, `${u}-${y}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: m }) }) : i(u) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: c._id }) : null }) }, c._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3302,6 +3663,39 @@ const useHandleCanvasClick = () => {
   return useEffect(() => {
     c();
   }, [r, o, n, c]), l;
+};
+function usePubSub(o, r) {
+  useEffect(() => {
+    const n = pubsub.subscribe(o, r);
+    return () => n();
+  }, [o, r]);
+}
+const CanvasEventsWatcher = () => {
+  const [, o] = useSelectedBlockIds(), [r, n] = useSelectedStylingBlocks(), { document: a } = useFrame(), { clearHighlight: l } = useBlockHighlight(), [i] = useSelectedBlockIds(), [c] = useAtom$1(treeRefAtom);
+  return useEffect(() => {
+    setTimeout(() => {
+      if (!isEmpty(r))
+        return;
+      const d = getElementByDataBlockId(a, first(i));
+      if (d) {
+        const p = d.getAttribute("data-style-prop");
+        if (p) {
+          const u = d.getAttribute("data-style-id"), g = d.getAttribute("data-block-parent");
+          n([{ id: u, prop: p, blockId: g }]);
+        }
+      }
+    }, 100);
+  }, [a, i, n, r]), useEffect(() => () => l(), [l]), usePubSub(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_SELECTED, (d) => {
+    if (!d) return;
+    const { blockId: p } = d;
+    i.includes(p) || c == null || c.closeAll(), o([p]);
+  }), usePubSub(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, (d) => {
+    if (!d) return;
+    const { blockId: p, styleId: u, styleProp: g } = d;
+    p && (i.includes(p) || c == null || c.closeAll(), n([{ id: u, prop: g, blockId: p }]), o([p]));
+  }), usePubSub(CHAI_BUILDER_EVENTS.CLEAR_CANVAS_SELECTION, () => {
+    l(), o([]), n([]);
+  }), null;
 }, StaticCanvas = () => {
   const [o] = useCanvasDisplayWidth(), [, r] = useHighlightBlockId(), n = useRef(null), a = useRef(null), [l, i] = useState({ width: 0, height: 0 }), c = useCanvasScale(l), [, d] = useAtom$1(canvasIframeAtom), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), g = useCallback(
     (h) => {
@@ -3345,7 +3739,7 @@ const useHandleCanvasClick = () => {
                 /* @__PURE__ */ jsx("br", {}),
                 /* @__PURE__ */ jsx("br", {})
               ] }),
-              /* @__PURE__ */ jsx(StylingBlockSelectWatcher, {})
+              /* @__PURE__ */ jsx(CanvasEventsWatcher, {})
             ] }),
             /* @__PURE__ */ jsx(
               "div",
@@ -3544,22 +3938,18 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
     ] })
   ] });
 }, PathDropdown = ({ data: o, onSelect: r, dataType: n }) => {
-  const [a, l] = React.useState([]), [i, c] = React.useState(o), d = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", p = React.useCallback(
+  const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", p = React__default.useCallback(
     (m) => {
       const h = (f) => n === "value" ? f === "value" || f === "object" : n === "array" ? f === "array" : f === n;
       m.type === "object" ? (l((f) => [...f, m.key]), c(m.value)) : h(m.type) && r([...a, m.key].join("."), n);
     },
     [a, r, n]
-  ), u = React.useCallback(() => {
+  ), u = React__default.useCallback(() => {
     if (a.length > 0) {
       const m = a.slice(0, -1);
       l(m), c(m.reduce((h, f) => h[f], o));
     }
-  }, [a, o]), g = React.useMemo(() => i ? Object.entries(i).map(([m, h]) => ({
-    key: m,
-    value: h,
-    type: d(h)
-  })).filter((m) => n === "value" ? m.type === "value" || m.type === "object" : n === "array" ? m.type === "array" || m.type === "object" : n === "object" ? m.type === "object" : !0) : [], [i, n]);
+  }, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([m, h]) => ({ key: m, value: h, type: d(h) })).filter((m) => !startsWith(m.key, REPEATER_PREFIX) && m.key.includes("/") ? !1 : n === "value" ? m.type === "value" || m.type === "object" : n === "array" ? m.type === "array" || m.type === "object" : n === "object" ? m.type === "object" : !0) : [], [i, n]);
   return /* @__PURE__ */ jsxs(Command, { className: "fields-command", children: [
     /* @__PURE__ */ jsx(CommandInput, { className: "border-none", placeholder: "Search..." }),
     /* @__PURE__ */ jsxs(CommandList, { children: [
@@ -3578,8 +3968,8 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
             className: "flex items-center justify-between",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
-                startsWith(m.key, "#") ? /* @__PURE__ */ jsx(LoopIcon, {}) : null,
-                startsWith(m.key, "#") ? "Repeater Data" : m.key
+                startsWith(m.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(m.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(DatabaseIcon, {}) : null,
+                startsWith(m.key, REPEATER_PREFIX) ? "Repeater Data" : startsWith(m.key, COLLECTION_PREFIX) ? m.key.replace(COLLECTION_PREFIX, "") : m.key
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 n === "object" && m.type === "object" && /* @__PURE__ */ jsx(
@@ -3605,7 +3995,7 @@ 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);
+  const [a, l] = React__default.useState(!1), i = useBuilderProp("collections", []), c = React__default.useMemo(() => n === "array" ? { ...i.map((p) => p.id).reduce((p, u) => ({ ...p, [COLLECTION_PREFIX + u]: [] }), {}), ...o } : o, [o, i, 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(
@@ -3616,7 +4006,16 @@ function NestedPathSelector({ data: o, onSelect: r, dataType: n = "value" }) {
           className: "h-5 rounded-sm px-1 py-0 text-[9px] text-muted-foreground",
           role: "combobox",
           "aria-expanded": a,
-          children: /* @__PURE__ */ jsx(DatabaseIcon, { className: "h-2.5 w-2.5" })
+          children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24px", height: "24px", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M9.5 5H9C7.89543 5 7 5.89543 7 7V9C7 10 6.4 12 4 12C5 12 7 12.6 7 15V17.0002C7 18.1048 7.89543 19 9 19H9.5M14.5 5H15C16.1046 5 17 5.89543 17 7V9C17 10 17.6 12 20 12C19 12 17 12.6 17 15V17.0002C17 18.1048 16.1046 19 15 19H14.5",
+              stroke: "#000000",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "2"
+            }
+          ) })
         }
       ) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Add field" })
@@ -3624,9 +4023,9 @@ function NestedPathSelector({ data: o, onSelect: r, dataType: n = "value" }) {
     /* @__PURE__ */ jsx(PopoverContent, { className: "z-[1000]! relative mr-3 w-[300px] p-0", children: /* @__PURE__ */ jsx(
       PathDropdown,
       {
-        data: o,
-        onSelect: (i, c) => {
-          r(i, c), l(!1);
+        data: c,
+        onSelect: (d, p) => {
+          r(d, p), l(!1);
         },
         dataType: n
       }
@@ -3639,54 +4038,54 @@ const DataBindingSelector = ({
   id: n,
   formData: a
 }) => {
-  const l = usePageExternalData(), i = useSelectedBlockHierarchy(), c = useSelectedBlock(), d = useMemo(() => i.length === 1 ? "" : `#${get(
-    i.find((h) => h._type === "Repeater"),
-    "repeaterItems",
-    ""
-  ).replace(/\{\{(.*)\}\}/g, "$1")}`, [i]), p = useMemo(() => first(get(l, d.replace("#", ""), [])), [d, l]), u = useCallback(
+  const l = usePageExternalData(), i = useSelectedBlockHierarchy(), c = useSelectedBlock(), d = useMemo(() => {
+    if (i.length === 1) return "";
+    const g = i.find((f) => f._type === "Repeater"), h = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
+    return `${REPEATER_PREFIX}${startsWith(h, COLLECTION_PREFIX) ? `${h}/${g._id}` : h}`;
+  }, [i]), p = useMemo(() => first(get(l, d.replace(REPEATER_PREFIX, ""), [])), [d, l]), u = useCallback(
     (g, m) => {
       if (g = isEmpty(d) ? g : g.replace(`${d}`, "$index"), m === "array" || m === "object") {
         r(`{{${g}}}`, {}, n);
         return;
       }
-      const h = (b) => /[.,!?;:]/.test(b), f = (b, S, w) => {
-        let B = "", _ = "";
-        const E = S > 0 ? b[S - 1] : "", v = S < b.length ? b[S] : "";
-        return S > 0 && (E === "." || !h(E) && E !== " ") && (B = " "), S < b.length && !h(v) && v !== " " && (_ = " "), {
-          text: B + w + _,
-          prefixLength: B.length,
-          suffixLength: _.length
+      const h = (b) => /[.,!?;:]/.test(b), f = (b, v, A) => {
+        let w = "", E = "";
+        const _ = v > 0 ? b[v - 1] : "", S = v < b.length ? b[v] : "";
+        return v > 0 && (_ === "." || !h(_) && _ !== " ") && (w = " "), v < b.length && !h(S) && S !== " " && (E = " "), {
+          text: w + A + E,
+          prefixLength: w.length,
+          suffixLength: E.length
         };
       }, x = document.getElementById(n);
       if (!x) return;
-      const k = document.getElementById(`chai-rte-${n}`) || document.getElementById(`chai-rte-modal-${n}`);
-      if (k && (k.querySelector(".ProseMirror") || k.__chaiRTE)) {
-        const b = k.__chaiRTE;
+      const y = document.getElementById(`chai-rte-${n}`) || document.getElementById(`chai-rte-modal-${n}`);
+      if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
+        const b = y.__chaiRTE;
         if (b) {
-          const S = `{{${g}}}`;
+          const v = `{{${g}}}`;
           b.commands.focus();
-          const { from: w, to: B } = b.state.selection;
-          if (w !== B)
-            b.chain().deleteSelection().insertContent(S).run();
+          const { from: A, to: w } = b.state.selection;
+          if (A !== w)
+            b.chain().deleteSelection().insertContent(v).run();
           else {
-            const { state: E } = b, v = E.selection.from, A = E.doc.textBetween(Math.max(0, v - 1), v), N = E.doc.textBetween(v, Math.min(v + 1, E.doc.content.size));
+            const { state: _ } = b, S = _.selection.from, B = _.doc.textBetween(Math.max(0, S - 1), S), N = _.doc.textBetween(S, Math.min(S + 1, _.doc.content.size));
             let C = "";
-            v > 0 && A !== " " && !h(A) && (C = " ");
-            let y = "";
-            N && N !== " " && !h(N) && (y = " "), b.chain().insertContent(C + S + y).run();
+            S > 0 && B !== " " && !h(B) && (C = " ");
+            let k = "";
+            N && N !== " " && !h(N) && (k = " "), b.chain().insertContent(C + v + k).run();
           }
           setTimeout(() => r(b.getHTML(), {}, n), 100);
           return;
         }
       } else {
-        const b = x, S = b.selectionStart || 0, w = b.value || "", B = b.selectionEnd || S;
-        if (B > S) {
-          const N = `{{${g}}}`, { text: C } = f(w, S, N), y = w.slice(0, S) + C + w.slice(B);
-          r(y, {}, n);
+        const b = x, v = b.selectionStart || 0, A = b.value || "", w = b.selectionEnd || v;
+        if (w > v) {
+          const N = `{{${g}}}`, { text: C } = f(A, v, N), k = A.slice(0, v) + C + A.slice(w);
+          r(k, {}, n);
           return;
         }
-        const E = `{{${g}}}`, { text: v } = f(w, S, E), A = w.slice(0, S) + v + w.slice(S);
-        r(A, {}, n);
+        const _ = `{{${g}}}`, { text: S } = f(A, v, _), B = A.slice(0, v) + S + A.slice(v);
+        r(B, {}, n);
       }
     },
     [n, r, a, c == null ? void 0 : c._id, d]
@@ -3708,57 +4107,57 @@ const DataBindingSelector = ({
   onChange: n
 }) => {
   var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [k, b] = useState(-1), S = useRef(null), w = (N = r == null ? void 0 : r.find((C) => C.key === u)) == null ? void 0 : N.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), v = useRef(null), A = (N = r == null ? void 0 : r.find((C) => C.key === u)) == null ? void 0 : N.name;
   useEffect(() => {
     if (h(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const C = split(o, ":"), y = get(C, 1, "page") || "page";
-    g(y), (async () => {
-      const j = await l(y, [get(C, 2, "page")]);
+    const C = split(o, ":"), k = get(C, 1, "page") || "page";
+    g(k), (async () => {
+      const j = await l(k, [get(C, 2, "page")]);
       j && Array.isArray(j) && h(get(j, [0, "name"], ""));
     })();
   }, [o]);
-  const B = useDebouncedCallback(
+  const w = useDebouncedCallback(
     async (C) => {
       if (isEmpty(C))
         x([]);
       else {
-        const y = await l(u, C);
-        x(y);
+        const k = await l(u, C);
+        x(k);
       }
       c(!1), b(-1);
     },
     [u],
     300
-  ), _ = (C) => {
-    const y = ["pageType", u, C.id];
-    y[1] && (n(y.join(":")), h(C.name), p(!1), x([]), b(-1));
-  }, E = (C) => {
+  ), E = (C) => {
+    const k = ["pageType", u, C.id];
+    k[1] && (n(k.join(":")), h(C.name), p(!1), x([]), b(-1));
+  }, _ = (C) => {
     switch (C.key) {
       case "ArrowDown":
-        C.preventDefault(), b((y) => y < f.length - 1 ? y + 1 : y);
+        C.preventDefault(), b((k) => k < f.length - 1 ? k + 1 : k);
         break;
       case "ArrowUp":
-        C.preventDefault(), b((y) => y > 0 ? y - 1 : y);
+        C.preventDefault(), b((k) => k > 0 ? k - 1 : k);
         break;
       case "Enter":
         if (C.preventDefault(), f.length === 0) return;
-        k >= 0 && _(f[k]);
+        y >= 0 && E(f[y]);
         break;
       case "Escape":
-        C.preventDefault(), v();
+        C.preventDefault(), S();
         break;
     }
   };
   useEffect(() => {
-    if (k >= 0 && S.current) {
-      const C = S.current.children[k];
+    if (y >= 0 && v.current) {
+      const C = v.current.children[y];
       C == null || C.scrollIntoView({ block: "nearest" });
     }
-  }, [k]);
-  const v = () => {
+  }, [y]);
+  const S = () => {
     h(""), x([]), b(-1), p(!1), n("");
-  }, A = (C) => {
-    h(C), p(!isEmpty(C)), c(!0), B(C);
+  }, B = (C) => {
+    h(C), p(!isEmpty(C)), c(!0), w(C);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (C) => g(C.target.value), children: map(r, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
@@ -3768,13 +4167,13 @@ const DataBindingSelector = ({
         {
           type: "text",
           value: m,
-          onChange: (C) => A(C.target.value),
-          onKeyDown: E,
-          placeholder: a(`Search ${w ?? ""}`),
+          onChange: (C) => B(C.target.value),
+          onKeyDown: _,
+          placeholder: a(`Search ${A ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: v, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -3784,11 +4183,11 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: S, children: map(f == null ? void 0 : f.slice(0, 20), (C, y) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(f == null ? void 0 : f.slice(0, 20), (C, k) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => _(C),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : y === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => E(C),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : k === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           C.name,
           " ",
@@ -4067,7 +4466,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         alignments: ["left", "center", "right"],
         defaultAlignment: "left"
       }),
-      Underline
+      Underline,
+      Placeholder.configure({
+        placeholder: "Enter text here",
+        emptyEditorClass: "cursor-text before:content-[attr(data-placeholder)] before:absolute before:opacity-50 before:pointer-events-none"
+      })
     ],
     content: a || "",
     onUpdate: ({ editor: m }) => {
@@ -4099,17 +4502,17 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     if (f !== x)
       u.chain().deleteSelection().insertContent(h).run();
     else {
-      const { state: b } = u, S = b.selection.from, w = b.doc.textBetween(Math.max(0, S - 1), S), B = b.doc.textBetween(S, Math.min(S + 1, b.doc.content.size));
-      let _ = "";
-      S > 0 && w !== " " && !/[.,!?;:]/.test(w) && (_ = " ");
+      const { state: b } = u, v = b.selection.from, A = b.doc.textBetween(Math.max(0, v - 1), v), w = b.doc.textBetween(v, Math.min(v + 1, b.doc.content.size));
       let E = "";
-      B && B !== " " && !/[.,!?;:]/.test(B) && (E = " "), u.chain().insertContent(_ + h + E).run();
+      v > 0 && A !== " " && !/[.,!?;:]/.test(A) && (E = " ");
+      let _ = "";
+      w && w !== " " && !/[.,!?;:]/.test(w) && (_ = " "), u.chain().insertContent(E + h + _).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && r(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
     /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center justify-between pr-8", children: [
       /* @__PURE__ */ jsx("span", { children: "Rich Text Editor" }),
-      p && Object.keys(p).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      Object.keys(p).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
         /* @__PURE__ */ jsx("span", { className: "mr-2 text-sm text-muted-foreground", children: "Add field:" }),
         /* @__PURE__ */ jsx("div", { className: "rte-path-selector", children: /* @__PURE__ */ jsx(NestedPathSelector, { data: p, onSelect: g }) })
       ] })
@@ -4135,7 +4538,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         alignments: ["left", "center", "right"],
         defaultAlignment: "left"
       }),
-      Underline
+      Underline,
+      Placeholder.configure({
+        placeholder: r || "Enter text here",
+        emptyEditorClass: "cursor-text before:content-[attr(data-placeholder)] before:absolute before:opacity-50 before:pointer-events-none"
+      })
     ],
     content: n || "",
     onUpdate: ({ editor: f }) => {
@@ -4193,14 +4600,14 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   const m = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const k = (x + 1) % u.length, b = get(u, [k, "_id"]);
+      const y = (x + 1) % u.length, b = get(u, [y, "_id"]);
       if (!b) return;
       r({ ...o, currentSlide: b }), c([b]);
     }
   }, h = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const k = (x - 1 + u.length) % u.length, b = get(u, [k, "_id"]);
+      const y = (x - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
       if (!b) return;
       r({ ...o, currentSlide: b }), c([b]);
     }
@@ -4208,8 +4615,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     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]));
+    ), y = x == null ? void 0 : x._id;
+    y && (r({ ...o, currentSlide: y }), c([y]));
   };
   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: [
@@ -4288,8 +4695,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
             className: "text-xs",
             pattern: "[0-9]*",
             onChange: (x) => {
-              let k = x.target.value;
-              k.length && (k = k.replace("-", "")), r({ ...o, autoplayInterval: k });
+              let y = x.target.value;
+              y.length && (y = y.replace("-", "")), r({ ...o, autoplayInterval: y });
             }
           }
         )
@@ -4377,6 +4784,12 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     ),
     /* @__PURE__ */ jsx(Button, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: n("Open code editor") })
   ] });
+}, CollectionFilterSortField = ({ id: o, value: r, onChange: n, onBlur: a }) => {
+  const l = useBuilderProp("collections", []), i = useSelectedBlock(), c = get(i, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1").replace(COLLECTION_PREFIX, ""), d = find(l, { id: c }), u = get(d, o === "root.filter" ? "filters" : "sorts", []);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("select", { value: r, onChange: (g) => n(g.target.value), onBlur: (g) => a(o, g.target.value), children: [
+    /* @__PURE__ */ jsx("option", { value: "", children: "Select" }),
+    u.map((g) => /* @__PURE__ */ jsx("option", { value: g.id, children: g.name }, g.id))
+  ] }) });
 }, JSONFormFieldTemplate = ({
   id: o,
   classNames: r,
@@ -4391,25 +4804,25 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   formData: g,
   onChange: m
 }) => {
-  const { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), k = useMemo(
+  const { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), y = useMemo(
     () => isEmpty(x) ? "" : isEmpty(h) ? f : h,
     [x, h, f]
-  ), b = useMemo(() => get(LANGUAGES, k, k), [k]), S = usePageExternalData(), w = useSelectedBlock(), B = useRegisteredChaiBlocks(), _ = useMemo(
-    () => get(B, [w == null ? void 0 : w._type, "i18nProps"], []),
-    [B, w == null ? void 0 : w._type]
-  ), [E, v] = useState(null);
+  ), b = useMemo(() => get(LANGUAGES, y, y), [y]), v = usePageExternalData(), A = useSelectedBlock(), w = useRegisteredChaiBlocks(), E = useMemo(
+    () => get(w, [A == null ? void 0 : A._type, "i18nProps"], []),
+    [w, A == null ? void 0 : A._type]
+  ), [_, S] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: a });
-  const N = _ == null ? void 0 : _.includes(o.replace("root.", ""));
+  const N = E == null ? void 0 : E.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const C = E === o;
+    const C = _ === o;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => v(C ? null : o),
+          onClick: () => S(C ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             C ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
@@ -4439,7 +4852,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         ] }),
         p && u.type !== "object" ? " *" : null
       ] }),
-      !u.enum && !u.oneOf && S && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      !u.enum && !u.oneOf && v && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
         DataBindingSelector,
         {
           schema: u,
@@ -4478,6 +4891,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         image: ImagePickerField,
         code: CodeEditor,
         colCount: RowColField,
+        collectionSelect: CollectionFilterSortField,
         ...c
       },
       fields: {
@@ -4517,38 +4931,38 @@ 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(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: E }, v, A) => {
-    v && (c == null ? void 0 : c._id) === r._id && a([r._id], { [v]: get(E, v) }, A);
+  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(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: _ }, S, B) => {
+    S && (c == null ? void 0 : c._id) === r._id && a([r._id], { [S]: get(_, S) }, B);
   }, x = useCallback(
-    debounce(({ formData: E }, v, A) => {
-      f({ formData: E }, v, A), d(E);
+    debounce(({ formData: _ }, S, B) => {
+      f({ formData: _ }, S, B), d(_);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), k = ({ formData: E }, v) => {
-    v && (n([r._id], { [v]: get(E, v) }), x({ formData: E }, v, { [v]: get(c, v) }));
-  }, b = ({ formData: E }, v) => {
-    v && (n([g._id], { [v]: get(E, v) }), x({ formData: E }, v, { [v]: get(c, v) }));
-  }, { schema: S, uiSchema: w } = useMemo(() => {
-    const E = r == null ? void 0 : r._type;
-    if (!E)
+  ), y = ({ formData: _ }, S) => {
+    S && (n([r._id], { [S]: get(_, S) }), x({ formData: _ }, S, { [S]: get(c, S) }));
+  }, b = ({ formData: _ }, S) => {
+    S && (n([g._id], { [S]: get(_, S) }), x({ formData: _ }, S, { [S]: get(c, S) }));
+  }, { schema: v, uiSchema: A } = useMemo(() => {
+    const _ = r == null ? void 0 : r._type;
+    if (!_)
       return { schema: {}, uiSchema: {} };
     try {
-      return getBlockFormSchemas(E);
+      return getBlockFormSchemas(_);
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [r]), { wrapperSchema: B, wrapperUiSchema: _ } = useMemo(() => {
+  }, [r]), { wrapperSchema: w, wrapperUiSchema: E } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const E = g == null ? void 0 : g._type, { schema: v = {}, uiSchema: A = {} } = getBlockFormSchemas(E);
-    return { wrapperSchema: v, wrapperUiSchema: A };
+    const _ = g == null ? void 0 : g._type, { schema: S = {}, uiSchema: B = {} } = getBlockFormSchemas(_);
+    return { wrapperSchema: S, wrapperUiSchema: B };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((E) => !E),
+          onClick: () => u((_) => !_),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -4569,19 +4983,19 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: b,
           formData: h,
-          schema: B,
-          uiSchema: _
+          schema: w,
+          uiSchema: E
         }
       ) })
     ] }),
-    isEmpty(S) ? null : /* @__PURE__ */ jsx(
+    isEmpty(v) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: r == null ? void 0 : r._id,
-        onChange: k,
+        onChange: y,
         formData: i,
-        schema: S,
-        uiSchema: w
+        schema: v,
+        uiSchema: A
       }
     )
   ] });
@@ -4758,50 +5172,50 @@ const BlockStylingProps = () => {
   },
   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, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [k, b] = useState(""), [S, w] = useState(!1), [B, _] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [v, A] = useState(!1), [w, E] = useState(!1);
   useEffect(() => {
-    const { value: C, unit: y } = getClassValueAndUnit(i);
-    if (y === "") {
+    const { value: C, unit: k } = getClassValueAndUnit(i);
+    if (k === "") {
       l(C), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    h(y), l(y === "class" || isEmpty(C) ? "" : C);
+    h(k), l(k === "class" || isEmpty(C) ? "" : C);
   }, [i, p, u]);
-  const E = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), v = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), A = useCallback(
+  const _ = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), S = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), B = useCallback(
     (C = !1) => {
-      const y = getUserInputValues(`${a}`, u);
-      if (get(y, "error", !1)) {
+      const k = getUserInputValues(`${a}`, u);
+      if (get(k, "error", !1)) {
         x(!0);
         return;
       }
-      const j = get(y, "unit") !== "" ? get(y, "unit") : m;
+      const j = get(k, "unit") !== "" ? get(k, "unit") : m;
       if (j === "auto" || j === "none") {
-        E(`${d}${j}`);
+        _(`${d}${j}`);
         return;
       }
-      if (get(y, "value") === "")
+      if (get(k, "value") === "")
         return;
-      const I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      C ? v(I) : E(I);
+      const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      C ? S(I) : _(I);
     },
-    [E, v, a, m, d, u]
+    [_, S, a, m, d, u]
   ), N = useCallback(
     (C) => {
-      const y = getUserInputValues(`${a}`, u);
-      if (get(y, "error", !1)) {
+      const k = getUserInputValues(`${a}`, u);
+      if (get(k, "error", !1)) {
         x(!0);
         return;
       }
       if (C === "auto" || C === "none") {
-        E(`${d}${C}`);
+        _(`${d}${C}`);
         return;
       }
-      if (get(y, "value") === "")
+      if (get(k, "value") === "")
         return;
-      const j = get(y, "unit") !== "" ? get(y, "unit") : C, I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      E(I);
+      const j = get(k, "unit") !== "" ? get(k, "unit") : C, I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      _(I);
     },
-    [E, a, d, u]
+    [_, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -4816,37 +5230,37 @@ const BlockStylingProps = () => {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: m === "class",
           onKeyPress: (C) => {
-            C.key === "Enter" && A();
+            C.key === "Enter" && B();
           },
           onKeyDown: (C) => {
             if (C.keyCode !== 38 && C.keyCode !== 40)
               return;
-            C.preventDefault(), _(!0);
-            const y = parseInt$1(C.target.value);
-            let j = isNaN$1(y) ? 0 : y;
+            C.preventDefault(), E(!0);
+            const k = parseInt$1(C.target.value);
+            let j = isNaN$1(k) ? 0 : k;
             C.keyCode === 38 && (j += 1), C.keyCode === 40 && (j -= 1);
             const T = `${j}`, P = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${m === "-" ? "" : m}]`;
-            v(P);
+            S(P);
           },
           onKeyUp: (C) => {
-            B && (C.preventDefault(), _(!1));
+            w && (C.preventDefault(), E(!1));
           },
-          onBlur: () => A(),
+          onBlur: () => B(),
           onChange: (C) => {
             x(!1), l(C.target.value);
           },
           onClick: (C) => {
-            var y;
-            (y = C == null ? void 0 : C.target) == null || y.select(), n(!1);
+            var k;
+            (k = C == null ? void 0 : C.target) == null || k.select(), n(!1);
           },
-          value: S ? k : a,
+          value: v ? y : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             f ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -4878,22 +5292,22 @@ const BlockStylingProps = () => {
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || S ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || v ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => w(!0),
+        onDragStart: () => A(!0),
         onDragEnd: (C) => {
-          if (b(() => ""), w(!1), isEmpty(C))
+          if (b(() => ""), A(!1), isEmpty(C))
             return;
-          const y = `${C}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
-          E(T);
+          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${m === "-" ? "" : m}]`;
+          _(T);
         },
         onDrag: (C) => {
           if (isEmpty(C))
             return;
           b(C);
-          const y = `${C}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
-          v(T);
+          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${m === "-" ? "" : m}]`;
+          S(T);
         },
         currentValue: a,
         unit: m,
@@ -4958,8 +5372,8 @@ const COLOR_PROP = {
 }, 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", ""), m = get(u, "2", ""), h = 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" })));
+    (y) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (c([]), p({ color: y })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: y, shade: b.shade ? b.shade : "500" })));
     },
     [c, p]
   );
@@ -4970,8 +5384,8 @@ const COLOR_PROP = {
   }, [g]);
   const f = useCallback(
     // eslint-disable-next-line no-shadow
-    (k) => {
-      p({ color: g, shade: k });
+    (y) => {
+      p({ color: g, shade: y });
     },
     [g]
   );
@@ -5356,35 +5770,35 @@ 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(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), k = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
-    (v, A = !0) => {
-      const N = { dark: p, mq: g, mod: u, cls: v, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
+    (S, B = !0) => {
+      const N = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (N.mq = "xs");
       const C = generateFullClsName(N);
-      h(x, [C], A);
+      h(x, [C], B);
     },
     [x, p, g, u, l, h]
-  ), S = useCallback(() => {
-    f(x, [k], !0);
-  }, [x, k, f]), w = useMemo(() => canChangeClass(m, g), [m, g]);
+  ), v = useCallback(() => {
+    f(x, [y], !0);
+  }, [x, y, f]), A = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(w, m);
-  }, [w, i, m]);
-  const [, , B] = useScreenSizeWidth(), _ = useCallback(
-    (v) => {
-      B({
+    i(A, m);
+  }, [A, i, m]);
+  const [, , w] = useScreenSizeWidth(), E = useCallback(
+    (S) => {
+      w({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[v]);
+      }[S]);
     },
-    [B]
-  ), E = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: w, canReset: m && E, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !E ? "text-foreground" : ""}`, children: r(a) }) }),
+    [w]
+  ), _ = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: A, canReset: m && _, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !_ ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         n === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -5403,7 +5817,7 @@ const COLOR_PROP = {
         n === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         n === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${k ? "visible" : "invisible"}`, children: E ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: _ ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : A && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -5423,7 +5837,7 @@ const COLOR_PROP = {
             "button",
             {
               type: "button",
-              onClick: () => _(get(m, "mq")),
+              onClick: () => E(get(m, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -5624,10 +6038,10 @@ const COLOR_PROP = {
   tooltip: n = !0
 }) => {
   const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (b) => {
-    u.includes(b) ? u.length > 2 && g(u.filter((S) => S !== b)) : g((S) => [...S, b]);
+    u.includes(b) ? u.length > 2 && g(u.filter((v) => v !== b)) : g((v) => [...v, b]);
   }, x = (b) => {
     r || l(b), c(b);
-  }, k = getBreakpointValue(r ? i : a).toLowerCase();
+  }, y = getBreakpointValue(r ? i : a).toLowerCase();
   return h.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(h, (b) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
@@ -5635,7 +6049,7 @@ const COLOR_PROP = {
       ...b,
       onClick: x,
       key: b.breakpoint,
-      currentBreakpoint: k
+      currentBreakpoint: y
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
@@ -5649,7 +6063,7 @@ const COLOR_PROP = {
           ...b,
           onClick: x,
           key: b.breakpoint,
-          currentBreakpoint: k
+          currentBreakpoint: y
         }
       )
     ) }),
@@ -5804,10 +6218,10 @@ 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(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, 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 o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((I) => !isEmpty(I)), A = () => {
     const I = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(m, I, !0), x("");
-  }, [B, _] = useState([]), E = ({ value: I }) => {
+  }, [w, E] = useState([]), _ = ({ value: I }) => {
     const P = I.trim().toLowerCase(), L = P.match(/.+:/g);
     let D = [];
     if (L && L.length > 0) {
@@ -5818,10 +6232,10 @@ function ManualClasses() {
       }));
     } else
       D = i.search(P);
-    return _(map(D, "item"));
-  }, v = () => {
-    _([]);
-  }, A = (I) => I.name, N = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), C = useMemo(
+    return E(map(D, "item"));
+  }, S = () => {
+    E([]);
+  }, B = (I) => I.name, N = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), C = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -5836,13 +6250,13 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (I) => {
-        I.key === "Enter" && f.trim() !== "" && w();
+        I.key === "Enter" && f.trim() !== "" && A();
       },
       onChange: (I, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [f, c, o]
-  ), y = (I) => {
+  ), k = (I) => {
     debugger;
     const P = r.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(m, [I]), u(m, P, !0), n(""), l(-1);
@@ -5851,7 +6265,7 @@ function ManualClasses() {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(S.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(v.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
@@ -5874,10 +6288,10 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: B,
-          onSuggestionsFetchRequested: E,
-          onSuggestionsClearRequested: v,
-          getSuggestionValue: A,
+          suggestions: w,
+          onSuggestionsFetchRequested: _,
+          onSuggestionsClearRequested: S,
+          getSuggestionValue: B,
           renderSuggestion: N,
           inputProps: C,
           containerProps: {
@@ -5895,14 +6309,14 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: w,
+          onClick: A,
           disabled: f.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: S.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
       (I, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
@@ -5910,10 +6324,10 @@ function ManualClasses() {
           value: r,
           onChange: (L) => n(L.target.value),
           onBlur: () => {
-            y(I);
+            k(I);
           },
           onKeyDown: (L) => {
-            L.key === "Enter" && y(I);
+            L.key === "Enter" && k(I);
           },
           onFocus: (L) => {
             setTimeout(() => {
@@ -6062,8 +6476,8 @@ function BlockStyling() {
       h = isNaN(h) ? 0 : h;
       let f = MAPPER[i.dragUnit];
       (startsWith(m, "scale") || m === "opacity") && (f = 10);
-      let k = (i.dragStartY - u.pageY) / f + h;
-      g && k < 0 && (k = 0), m === "opacity" && k > 1 && (k = 1), i.onDrag(`${k}`), l(`${k}`);
+      let y = (i.dragStartY - u.pageY) / f + h;
+      g && y < 0 && (y = 0), m === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
     },
     [i],
     50
@@ -6106,8 +6520,8 @@ const CoreBlock = ({
 }) => {
   const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), h = () => {
     if (has(o, "blocks")) {
-      const k = isFunction(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(k), n || null, a);
+      const y = isFunction(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(y), n || null, a);
     } else
       p(o, n || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -6119,8 +6533,8 @@ const CoreBlock = ({
         disabled: r,
         onClick: h,
         type: "button",
-        onDragStart: (k) => {
-          k.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), k.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (y) => {
+          y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             g([]), m();
           }, 200);
         },
@@ -6320,22 +6734,22 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var m, h, f, x, k, b, S, w;
+  var m, h, f, x, y, b, v, A;
   if (n.type === "comment") return [];
   console.log("node ===>", n);
   let a = { _id: generateUUID() };
   if (r && (a._parent = r.block._id), n.type === "text")
     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(
-    (B) => B.key === "data-chai-richtext" || B.key === "chai-richtext"
+    (w) => w.key === "data-chai-richtext" || w.key === "chai-richtext"
   ), c = l.find(
-    (B) => B.key === "data-chai-lightbox" || B.key === "chai-lightbox"
+    (w) => w.key === "data-chai-lightbox" || w.key === "chai-lightbox"
   ), d = l.find(
-    (B) => B.key === "data-chai-dropdown" || B.key === "chai-dropdown"
+    (w) => w.key === "data-chai-dropdown" || w.key === "chai-dropdown"
   ), p = l.find(
-    (B) => B.key === "data-chai-dropdown-button" || B.key === "chai-dropdown-button"
+    (w) => w.key === "data-chai-dropdown-button" || w.key === "chai-dropdown-button"
   ), u = l.find(
-    (B) => B.key === "data-chai-dropdown-content" || B.key === "chai-dropdown-content"
+    (w) => w.key === "data-chai-dropdown-content" || w.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -6343,13 +6757,13 @@ const CoreBlock = ({
     ...getAttrs(n),
     ...getStyles(n)
   }, n.attributes) {
-    const B = n.attributes.find((_) => includes(NAME_ATTRIBUTES, _.key));
-    B && (a._name = B.value);
+    const w = n.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
+    w && (a._name = w.value);
   }
   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) {
-    const B = [
+    const w = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -6361,44 +6775,44 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((m = l.find((_) => _.key === "href")) == null ? void 0 : m.value) || "",
-      hrefType: ((h = l.find((_) => _.key === "data-vbtype")) == null ? void 0 : h.value) || "video",
-      autoplay: ((f = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
-      maxWidth: ((k = (x = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : k.replace("px", "")) || "",
-      backdropColor: ((b = l.find((_) => _.key === "data-overlay")) == null ? void 0 : b.value) || "",
-      galleryName: ((S = l.find((_) => _.key === "data-gall")) == null ? void 0 : S.value) || ""
-    }, forEach(B, (_) => {
-      has(a, `styles_attrs.${_}`) && delete a.styles_attrs[_];
+      href: ((m = l.find((E) => E.key === "href")) == null ? void 0 : m.value) || "",
+      hrefType: ((h = l.find((E) => E.key === "data-vbtype")) == null ? void 0 : h.value) || "video",
+      autoplay: ((f = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
+      maxWidth: ((y = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : y.replace("px", "")) || "",
+      backdropColor: ((b = l.find((E) => E.key === "data-overlay")) == null ? void 0 : b.value) || "",
+      galleryName: ((v = l.find((E) => E.key === "data-gall")) == null ? void 0 : v.value) || ""
+    }, forEach(w, (E) => {
+      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) {
     delete a.styles_attrs;
-    const B = filter(n.children || [], (E) => (E == null ? void 0 : E.tagName) !== "span");
-    a.content = getTextContent(B);
-    const _ = find(
+    const w = filter(n.children || [], (_) => (_ == null ? void 0 : _.tagName) !== "span");
+    a.content = getTextContent(w);
+    const E = find(
       n.children || [],
-      (E) => (E == null ? void 0 : E.tagName) === "span" && some(E.children || [], (v) => (v == null ? void 0 : v.tagName) === "svg")
+      (_) => (_ == null ? void 0 : _.tagName) === "span" && some(_.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg")
     );
-    if (_) {
-      const E = find(_.children || [], (v) => (v == null ? void 0 : v.tagName) === "svg");
-      if (E) {
-        a.icon = stringify([E]);
-        const { height: v, width: A } = getSvgDimensions(E, "16px", "16px");
-        a.iconHeight = v, a.iconWidth = A;
+    if (E) {
+      const _ = find(E.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg");
+      if (_) {
+        a.icon = stringify([_]);
+        const { height: S, width: B } = getSvgDimensions(_, "16px", "16px");
+        a.iconHeight = S, a.iconWidth = B;
       }
     }
     return [a];
   }
   if (a._type === "Input") {
-    const B = a.inputType || "text";
-    B === "checkbox" ? set(a, "_type", "Checkbox") : B === "radio" && set(a, "_type", "Radio");
+    const w = a.inputType || "text";
+    w === "checkbox" ? set(a, "_type", "Checkbox") : w === "radio" && set(a, "_type", "Radio");
   } else if (n.tagName === "video" || n.tagName === "iframe") {
-    const B = stringify([n]);
-    return hasVideoEmbed(B) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(B)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = B, [a];
+    const w = stringify([n]);
+    return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
   } else if (n.tagName === "svg") {
-    const B = find(n.attributes, { key: "height" }), _ = find(n.attributes, { key: "width" }), E = get(B, "value") ? `[${get(B, "value")}px]` : "24px", v = get(_, "value") ? `[${get(_, "value")}px]` : "24px", A = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${v} h-${E}`, A)}`.trim(), n.attributes = filter(n.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([n]), [a];
-  } else if (n.tagName == "option" && r && ((w = r.block) == null ? void 0 : w._type) === "Select")
+    const w = find(n.attributes, { key: "height" }), E = find(n.attributes, { key: "width" }), _ = get(w, "value") ? `[${get(w, "value")}px]` : "24px", S = get(E, "value") ? `[${get(E, "value")}px]` : "24px", B = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$2(`w-${S} h-${_}`, B)}`.trim(), n.attributes = filter(n.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([n]), [a];
+  } else if (n.tagName == "option" && r && ((A = r.block) == null ? void 0 : A._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
       ...getAttrs(n)
@@ -6458,10 +6872,10 @@ const CoreBlock = ({
     const g = u.target.value;
     d(g), r(g);
   };
-  return /* @__PURE__ */ jsx("div", { className: cn$1("relative inline-block w-full", l), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: cn$2("relative inline-block w-full", l), children: /* @__PURE__ */ jsxs(
     "select",
     {
-      className: cn$1(
+      className: cn$2(
         "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
       ),
@@ -6502,18 +6916,18 @@ 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(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), k = (w) => {
-    const B = has(w, "styles_attrs.data-page-section");
-    return w._type === "Box" && B;
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (A) => {
+    const w = has(A, "styles_attrs.data-page-section");
+    return A._type === "Box" && w;
   }, b = useCallback(
-    async (w) => {
-      if (w.stopPropagation(), has(o, "component")) {
+    async (A) => {
+      if (A.stopPropagation(), has(o, "component")) {
         d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const B = await c(r, o);
-      isEmpty(B) || p(syncBlocksWithDefaults(B), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const w = await c(r, o);
+      isEmpty(w) || p(syncBlocksWithDefaults(w), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, r, n, a]
   );
@@ -6524,19 +6938,19 @@ const BlockCard = ({
         onClick: l ? () => {
         } : b,
         draggable: f ? "true" : "false",
-        onDragStart: async (w) => {
-          const B = await c(r, o);
-          let _ = n;
-          if (k(first(B)) && (_ = null), !isEmpty(B)) {
-            const E = { blocks: B, uiLibrary: !0, parent: _ };
-            if (w.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
-              const v = new Image();
-              v.src = o.preview, v.onload = () => {
-                w.dataTransfer.setDragImage(v, 0, 0);
+        onDragStart: async (A) => {
+          const w = await c(r, o);
+          let E = n;
+          if (y(first(w)) && (E = null), !isEmpty(w)) {
+            const _ = { blocks: w, uiLibrary: !0, parent: E };
+            if (A.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
+              const S = new Image();
+              S.src = o.preview, S.onload = () => {
+                A.dataTransfer.setDragImage(S, 0, 0);
               };
             } else
-              w.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(E), setTimeout(() => {
+              A.dataTransfer.setDragImage(new Image(), 0, 0);
+            x(_), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -6562,7 +6976,7 @@ 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(""), [m, h] = useState([]), f = useRef(null);
+  const [n, a] = useSelectedLibrary(), l = useBuilderProp("uiLibraries", []), i = l.find((k) => k.id === n) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [m, h] = useState([]), f = useRef(null);
   useEffect(() => {
     c && c.length > 0 && (f.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
@@ -6574,27 +6988,27 @@ const BlockCard = ({
       h([]);
       return;
     }
-    const y = f.current.search(u).map((j) => j.item);
-    h(y);
+    const k = f.current.search(u).map((j) => j.item);
+    h(k);
   }, [u]);
-  const x = u.trim() && !isEmpty(m) ? m : c, k = groupBy(x, "group"), [b, S] = useState(null);
+  const x = u.trim() && !isEmpty(m) ? m : c, y = groupBy(x, "group"), [b, v] = useState(null);
   useEffect(() => {
-    if (isEmpty(keys(k))) {
-      S(null);
+    if (isEmpty(keys(y))) {
+      v(null);
       return;
     }
-    if (!b || !k[b]) {
-      S(first(keys(k)));
+    if (!b || !y[b]) {
+      v(first(keys(y)));
       return;
     }
-  }, [k, b]);
-  const w = get(k, b, []), B = useRef(null), { t: _ } = useTranslation(), E = (y) => {
-    B.current && (clearTimeout(B.current), B.current = null), B.current = setTimeout(() => {
-      B.current && S(y);
+  }, [y, b]);
+  const A = get(y, b, []), w = useRef(null), { t: E } = useTranslation(), _ = (k) => {
+    w.current && (clearTimeout(w.current), w.current = null), w.current = setTimeout(() => {
+      w.current && v(k);
     }, 400);
-  }, v = () => {
+  }, S = () => {
     i != null && i.id && p(i.id);
-  }, A = () => {
+  }, B = () => {
     g("");
   };
   if (d)
@@ -6602,23 +7016,23 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const N = filter(w, (y, j) => j % 2 === 0), C = filter(w, (y, j) => j % 2 === 1);
+  const N = filter(A, (k, j) => j % 2 === 0), C = filter(A, (k, 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" }),
       /* @__PURE__ */ jsx(
         Input$1,
         {
-          placeholder: _("Search blocks..."),
+          placeholder: E("Search blocks..."),
           value: u,
-          onChange: (y) => g(y.target.value),
+          onChange: (k) => g(k.target.value),
           className: "w-full pl-8 pr-8"
         }
       ),
       u && /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: A,
+          onClick: B,
           className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
@@ -6628,27 +7042,27 @@ const BlockCard = ({
       /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 min-w-60 max-w-60 flex-col gap-1 px-1 pr-2", children: [
         /* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, setLibrary: a, uiLibraries: l }),
         /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: _("Groups") }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: E("Groups") }),
           /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
-            /* @__PURE__ */ jsxs(Button, { onClick: v, variant: "outline", size: "sm", className: "gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("Failed to load the UI library. Try again") }),
+            /* @__PURE__ */ jsxs(Button, { onClick: S, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
-              _("Retry")
+              E("Retry")
             ] })
-          ] }) }) : map(k, (y, j) => /* @__PURE__ */ jsxs(
+          ] }) }) : map(y, (k, j) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => E(j),
-              onMouseLeave: () => clearTimeout(B.current),
+              onMouseEnter: () => _(j),
+              onMouseLeave: () => clearTimeout(w.current),
               role: "button",
-              onClick: () => S(j),
-              className: cn$1(
+              onClick: () => v(j),
+              className: cn$2(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
                 j === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(_(j.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(E(j.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -6659,26 +7073,26 @@ const BlockCard = ({
       /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-col border-l border-border", children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
-          onMouseEnter: () => B.current ? clearTimeout(B.current) : null,
+          onMouseEnter: () => w.current ? clearTimeout(w.current) : null,
           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: _("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: N.map((y, j) => /* @__PURE__ */ jsx(
+            isEmpty(A) && !isEmpty(y) ? /* @__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: N.map((k, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: r,
-                  block: y,
+                  block: k,
                   library: i
                 },
                 `block-${j}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: C.map((y, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: C.map((k, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: r,
-                  block: y,
+                  block: k,
                   library: i
                 },
                 `block-second-${j}`
@@ -6717,15 +7131,15 @@ const BlockCard = ({
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const h = Object.entries(a).map(([x, k]) => {
-          const b = k, S = b.type || "partial", w = formatReadableName(S);
+        const h = Object.entries(a).map(([x, y]) => {
+          const b = y, v = b.type || "partial", A = formatReadableName(v);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(b.name || x),
             description: b.description || "",
             icon: Globe,
-            group: w,
+            group: A,
             // Use formatted type as group
             category: "partial",
             partialBlockId: x,
@@ -6781,43 +7195,43 @@ const BlockCard = ({
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...r });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: r, parentId: n, position: a, gridCols: l = "grid-cols-4" }) => {
   var C;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (C = find(c, (y) => y._id === n)) == null ? void 0 : C._type, [h, f] = useState("all"), [x, k] = useState(null), b = useRef(null);
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (C = find(c, (k) => k._id === n)) == null ? void 0 : C._type, [h, f] = useState("all"), [x, y] = useState(null), b = useRef(null);
   useEffect(() => {
-    const y = setTimeout(() => {
+    const k = setTimeout(() => {
       var j;
       (j = u.current) == null || j.focus();
     }, 0);
-    return () => clearTimeout(y);
+    return () => clearTimeout(k);
   }, [g]), useEffect(() => {
-    d && (f("all"), k(null));
-  }, [d]), useEffect(() => (b.current = debounce((y) => {
-    f(y);
+    d && (f("all"), y(null));
+  }, [d]), useEffect(() => (b.current = debounce((k) => {
+    f(k);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
-  const S = useCallback((y) => {
-    k(y), b.current && b.current(y);
-  }, []), w = useCallback(() => {
-    k(null), b.current && b.current.cancel();
-  }, []), B = useCallback((y) => {
-    b.current && b.current.cancel(), f(y), k(null);
-  }, []), _ = useMemo(
+  const v = useCallback((k) => {
+    y(k), b.current && b.current(k);
+  }, []), A = useCallback(() => {
+    y(null), b.current && b.current.cancel();
+  }, []), w = useCallback((k) => {
+    b.current && b.current.cancel(), f(k), y(null);
+  }, []), E = useMemo(
     () => d ? values(r).filter(
-      (y) => {
+      (k) => {
         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 = k.label) == null ? void 0 : j.toLowerCase()) + " " + ((T = k.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
       }
     ) : r,
     [r, d]
-  ), E = useMemo(
+  ), _ = useMemo(
     () => d ? o.filter(
-      (y) => reject(filter(values(_), { group: y }), { hidden: !0 }).length > 0
-    ) : o.filter((y) => reject(filter(values(r), { group: y }), { hidden: !0 }).length > 0),
-    [r, _, o, d]
-  ), v = useMemo(
-    () => sortBy(E, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
-    [E]
-  ), A = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), N = useMemo(() => h === "all" ? v : [h], [v, h]);
+      (k) => reject(filter(values(E), { group: k }), { hidden: !0 }).length > 0
+    ) : o.filter((k) => reject(filter(values(r), { group: k }), { hidden: !0 }).length > 0),
+    [r, E, o, d]
+  ), S = useMemo(
+    () => sortBy(_, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
+    [_]
+  ), B = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), N = useMemo(() => h === "all" ? S : [h], [S, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -6827,43 +7241,43 @@ const BlockCard = ({
         placeholder: i("Search blocks..."),
         value: d,
         className: "-ml-2",
-        onChange: (y) => p(y.target.value)
+        onChange: (k) => p(k.target.value)
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      v.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      S.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => B("all"),
-            onMouseEnter: () => S("all"),
-            onMouseLeave: w,
+            onClick: () => w("all"),
+            onMouseEnter: () => v("all"),
+            onMouseLeave: A,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        v.map((y) => /* @__PURE__ */ jsx(
+        S.map((k) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => B(y),
-            onMouseEnter: () => S(y),
-            onMouseLeave: w,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === y || x === y ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
-            children: capitalize(i(y.toLowerCase()))
+            onClick: () => w(k),
+            onMouseEnter: () => v(k),
+            onMouseLeave: A,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === k || x === k ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            children: capitalize(i(k.toLowerCase()))
           },
-          `sidebar-${y}`
+          `sidebar-${k}`
         ))
       ] }) }) }),
-      /* @__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: E.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: _.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         i("No blocks found matching"),
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.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: "space-y-6 p-4", children: N.map((k) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          h === "all" ? filter(values(A), { group: y }) : values(A),
+          h === "all" ? filter(values(B), { group: k }) : values(B),
           { hidden: !0 }
         ).map((j) => /* @__PURE__ */ jsx(
           CoreBlock,
@@ -6875,7 +7289,7 @@ const BlockCard = ({
           },
           j.type
         )) })
-      ] }, y)) }) }) })
+      ] }, k)) }) }) })
     ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -6893,7 +7307,7 @@ const BlockCard = ({
   }, []), f = useChaiAddBlockTabs(), x = p && m(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, b, c]), /* @__PURE__ */ jsxs("div", { className: cn$2("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") })
@@ -6901,8 +7315,8 @@ const BlockCard = ({
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (S) => {
-          d(""), c(S);
+        onValueChange: (v) => {
+          d(""), c(v);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -6912,13 +7326,13 @@ const BlockCard = ({
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             g && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
             x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(f, (S) => /* @__PURE__ */ jsx(TabsTrigger, { value: S.id, children: React__default.createElement(S.tab) }, `tab-add-block-${S.id}`))
+            map(f, (v) => /* @__PURE__ */ jsx(TabsTrigger, { value: v.id, children: React__default.createElement(v.tab) }, `tab-add-block-${v.id}`))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: n, position: a }) }) }) }),
           b && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: n, position: a }) }),
           g && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: n, position: a }) }) }) }),
           x ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: n, position: a }) }) : null,
-          map(f, (S) => /* @__PURE__ */ jsx(TabsContent, { value: S.id, children: React__default.createElement(S.tabContent, { close: h, parentId: n, position: a }) }, `panel-add-block-${S.id}`))
+          map(f, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close: h, parentId: n, position: a }) }, `panel-add-block-${v.id}`))
         ]
       }
     )
@@ -7225,26 +7639,26 @@ const Input = ({ node: o }) => {
   var P;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: f, isSelected: x, willReceiveDrop: k, isDragging: b, isEditing: S, handleClick: w } = o, B = (L) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: A } = o, w = (L) => {
     L.stopPropagation(), !l.includes(h) && o.toggle();
-  }, _ = (L) => {
-    L.isInternal && (p = L.isOpen, L.isOpen && L.close());
   }, E = (L) => {
+    L.isInternal && (p = L.isOpen, L.isOpen && L.close());
+  }, _ = (L) => {
     L.isInternal && p !== null && (p ? L.open() : L.close(), p = null);
-  }, [v, A] = useAtom$1(currentAddSelection), N = () => {
+  }, [S, B] = useAtom$1(currentAddSelection), N = () => {
     var L;
-    C(), o.parent.isSelected || A((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id);
+    C(), o.parent.isSelected || B((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id);
   }, C = () => {
-    A(null);
-  }, y = (L) => {
-    C(), L.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), w(L);
+    B(null);
+  }, k = (L) => {
+    C(), L.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), A(L);
   };
   useEffect(() => {
     const L = setTimeout(() => {
-      k && !o.isOpen && !b && !l.includes(h) && o.toggle();
+      y && !o.isOpen && !b && !l.includes(h) && o.toggle();
     }, 500);
     return () => clearTimeout(L);
-  }, [k, o, b]);
+  }, [y, o, b]);
   const j = (L, D) => {
     const O = c.contentDocument || c.contentWindow.document, R = O.querySelector(`[data-block-id=${L}]`);
     R && R.setAttribute("data-drop", D);
@@ -7279,12 +7693,12 @@ const Input = ({ node: o }) => {
     {
       onMouseEnter: () => g(h),
       onMouseLeave: () => m(),
-      onClick: y,
+      onClick: k,
       style: r,
       "data-node-id": h,
       ref: l.includes(h) ? null : n,
-      onDragStart: () => _(o),
-      onDragEnd: () => E(o),
+      onDragStart: () => E(o),
+      onDragEnd: () => _(o),
       onDragOver: (L) => {
         L.preventDefault(), j(h, "yes");
       },
@@ -7313,8 +7727,8 @@ const Input = ({ node: o }) => {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 outline-none",
               x ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
-              k && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === v ? "bg-primary/10" : "",
+              y && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(h) ? "opacity-50" : "",
               I && x && "bg-primary/20 text-primary"
@@ -7325,7 +7739,7 @@ const Input = ({ node: o }) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: B, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7338,7 +7752,7 @@ const Input = ({ node: o }) => {
                     ),
                     children: [
                       /* @__PURE__ */ jsx(TypeIcon, { type: f == null ? void 0 : f._type }),
-                      S ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
+                      v ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
@@ -7512,7 +7926,7 @@ const Input = ({ node: o }) => {
       }
     )
   ] }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cn$1("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: cn$2("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxs(
       "div",
       {
         id: "outline-view ",
@@ -7644,66 +8058,66 @@ const Input = ({ node: o }) => {
     )
   ] });
 }, 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(), m = (S) => {
-    a(S);
+  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(), m = (v) => {
+    a(v);
   }, h = () => {
-    const S = l.find((w) => Object.keys(w)[0] === n);
-    if (S) {
-      const w = Object.values(S)[0];
-      w && typeof w == "object" && "fontFamily" in w && "borderRadius" in w && "colors" in w ? p(w) : console.error("Invalid preset structure:", w);
+    const v = l.find((A) => Object.keys(A)[0] === n);
+    if (v) {
+      const A = Object.values(v)[0];
+      A && typeof A == "object" && "fontFamily" in A && "borderRadius" in A && "colors" in A ? p(A) : console.error("Invalid preset structure:", A);
     } else
       console.error("Preset not found:", n);
   }, f = useDebouncedCallback(
-    (S, w) => {
+    (v, A) => {
       p(() => ({
         ...d,
         fontFamily: {
           ...d.fontFamily,
-          [S.replace(/font-/g, "")]: w
+          [v.replace(/font-/g, "")]: A
         }
       }));
     },
     [d],
     200
   ), x = useDebouncedCallback(
-    (S) => {
+    (v) => {
       p(() => ({
         ...d,
-        borderRadius: `${S}px`
+        borderRadius: `${v}px`
       }));
     },
     [d],
     200
-  ), k = useDebouncedCallback(
-    (S, w) => {
+  ), y = useDebouncedCallback(
+    (v, A) => {
       p(() => {
-        const B = get(d, `colors.${S}`);
-        return r ? set(B, 1, w) : set(B, 0, w), {
+        const w = get(d, `colors.${v}`);
+        return r ? set(w, 1, A) : set(w, 0, A), {
           ...d,
           colors: {
             ...d.colors,
-            [S]: B
+            [v]: w
           }
         };
       });
     },
     [d],
     200
-  ), b = (S) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(S.items).map(([w]) => {
-    const B = get(d, `colors.${w}.${r ? 1 : 0}`);
+  ), b = (v) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(v.items).map(([A]) => {
+    const w = get(d, `colors.${A}.${r ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: B,
-          onChange: (_) => k(w, _)
+          value: w,
+          onChange: (E) => y(A, E)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: w.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((_) => _.charAt(0).toUpperCase() + _.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);
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: A.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!A.toLowerCase().includes("foreground") && !A.toLowerCase().includes("border") && !A.toLowerCase().includes("input") && !A.toLowerCase().includes("ring") && !A.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, A);
   }) });
   return c("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: [
+    /* @__PURE__ */ jsxs("div", { className: cn$2("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: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm", children: g("Presets") }),
@@ -7711,11 +8125,11 @@ const Input = ({ node: o }) => {
             "select",
             {
               value: n,
-              onChange: (S) => m(S.target.value),
+              onChange: (v) => m(v.target.value),
               className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
               children: [
                 /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
-                Array.isArray(l) && l.map((S) => /* @__PURE__ */ jsx("option", { value: Object.keys(S)[0], children: capitalize(Object.keys(S)[0]) }, Object.keys(S)[0]))
+                Array.isArray(l) && l.map((v) => /* @__PURE__ */ jsx("option", { value: Object.keys(v)[0], children: capitalize(Object.keys(v)[0]) }, Object.keys(v)[0]))
               ]
             }
           )
@@ -7731,15 +8145,15 @@ const Input = ({ node: o }) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([S, w]) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: cn$2("space-y-2", o), children: [
+        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([v, A]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: S,
-            value: d.fontFamily[S.replace(/font-/g, "")] || w[Object.keys(w)[0]],
-            onChange: (B) => f(S, B)
+            label: v,
+            value: d.fontFamily[v.replace(/font-/g, "")] || A[Object.keys(A)[0]],
+            onChange: (w) => f(v, w)
           },
-          S
+          v
         )) }),
         (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") }),
@@ -7750,7 +8164,7 @@ const Input = ({ node: o }) => {
         ] }),
         (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm", children: g("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((S) => b(S)) }, r ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((v) => b(v)) }, r ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -7759,7 +8173,7 @@ const Input = ({ node: o }) => {
       /* @__PURE__ */ jsx("br", {})
     ] }),
     i && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(i) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
+  ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$2("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
 }), Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
   "Add block": "Add Block",
   "Add blocks": "Add blocks",
@@ -8226,8 +8640,8 @@ const AIUserPrompt = ({ blockId: o }) => {
     (x = m.current) == null || x.focus();
   }, []);
   const f = (x) => {
-    const { usage: k } = x || {};
-    !l && k && g(k), h.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: y } = x || {};
+    !l && y && g(y), h.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8449,31 +8863,31 @@ function AIChatPanel() {
       content: n,
       timestamp: /* @__PURE__ */ new Date()
     };
-    r((S) => [...S, b]), a(""), i(!0), setTimeout(() => {
-      const S = {
+    r((v) => [...v, b]), a(""), i(!0), setTimeout(() => {
+      const v = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
         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((A) => [...A, v]), i(!1), d(null);
     }, 1500);
   }, h = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), m());
   }, f = (b) => {
-    var w;
-    const S = (w = b.target.files) == null ? void 0 : w[0];
-    if (S) {
-      const B = new FileReader();
-      B.onload = (_) => {
-        var E;
-        d((E = _.target) == null ? void 0 : E.result);
-      }, B.readAsDataURL(S);
+    var A;
+    const v = (A = b.target.files) == null ? void 0 : A[0];
+    if (v) {
+      const w = new FileReader();
+      w.onload = (E) => {
+        var _;
+        d((_ = E.target) == null ? void 0 : _.result);
+      }, w.readAsDataURL(v);
     }
   }, x = () => {
     var b;
     (b = p.current) == null || b.click();
-  }, k = () => {
+  }, y = () => {
     d(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: [
@@ -8484,7 +8898,7 @@ function AIChatPanel() {
       o.map((b) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn$2(
+          className: cn$1(
             "flex max-w-full gap-2",
             b.role === "assistant" ? "items-start" : "items-start justify-end"
           ),
@@ -8493,7 +8907,7 @@ function AIChatPanel() {
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: cn$2(
+                className: cn$1(
                   "rounded-lg px-3 py-2 text-sm",
                   b.role === "assistant" ? "bg-muted text-foreground" : "bg-primary text-primary-foreground"
                 ),
@@ -8519,7 +8933,7 @@ function AIChatPanel() {
           size: "icon",
           variant: "destructive",
           className: "absolute right-0 top-0 h-5 w-5 rounded-full p-0",
-          onClick: k,
+          onClick: y,
           children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
         }
       )
@@ -8608,7 +9022,7 @@ const AiAssistant = () => {
 }, DataBinding = () => {
   const o = usePageExternalData(), [r, n] = useAtom$1(dataBindingActiveAtom), { t: a } = useTranslation();
   return isEmpty(o) ? null : /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "rounded-full", variant: "ghost", onClick: () => n(!r), children: /* @__PURE__ */ jsx(DatabaseZapIcon, { className: cn$1("h-4 w-4", r ? "text-green-500" : "text-gray-500") }) }) }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "rounded-full", variant: "ghost", onClick: () => n(!r), children: /* @__PURE__ */ jsx(DatabaseZapIcon, { className: cn$2("h-4 w-4", r ? "text-green-500" : "text-gray-500") }) }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: a("Toggle Data Binding") }) })
   ] }) });
 }, CanvasTopBar = () => {
@@ -8638,14 +9052,7 @@ const AiAssistant = () => {
       r ? null : /* @__PURE__ */ jsx(AiAssistant, {})
     ] })
   ] });
-};
-function usePubSub(o, r) {
-  useEffect(() => {
-    const n = pubsub.subscribe(o, r);
-    return () => n();
-  }, [o, r]);
-}
-const AddBlocksDialog = () => {
+}, 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);
@@ -8669,7 +9076,7 @@ const AddBlocksDialog = () => {
   preloadedAttributes: r = [],
   onAttributesChange: n
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), f = useRef(null), x = useRef(null), k = usePageExternalData();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), f = useRef(null), x = useRef(null), y = usePageExternalData();
   useEffect(() => {
     l(r);
   }, [r]);
@@ -8679,43 +9086,43 @@ const AddBlocksDialog = () => {
       return;
     }
     if (i) {
-      const v = [...a, { key: i, value: d }];
-      n(v), l(a), c(""), p(""), h("");
+      const S = [...a, { key: i, value: d }];
+      n(S), l(a), c(""), p(""), h("");
     }
-  }, S = (v) => {
-    const A = a.filter((N, C) => C !== v);
-    n(A), l(A);
-  }, w = (v) => {
-    g(v), c(a[v].key), p(a[v].value);
-  }, B = () => {
+  }, v = (S) => {
+    const B = a.filter((N, C) => C !== S);
+    n(B), l(B);
+  }, A = (S) => {
+    g(S), c(a[S].key), p(a[S].value);
+  }, w = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const v = [...a];
-      v[u] = { key: i, value: d }, n(v), l(v), g(null), c(""), p(""), h("");
+      const S = [...a];
+      S[u] = { key: i, value: d }, n(S), l(S), g(null), c(""), p(""), h("");
     }
-  }, _ = (v) => {
-    v.key === "Enter" && !v.shiftKey && (v.preventDefault(), u !== null ? B() : b());
-  }, E = useCallback((v) => {
-    const A = (y) => /[.,!?;:]/.test(y), N = (y, j, T) => {
+  }, E = (S) => {
+    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : b());
+  }, _ = useCallback((S) => {
+    const B = (k) => /[.,!?;:]/.test(k), N = (k, j, T) => {
       let I = "", P = "";
-      const L = j > 0 ? y[j - 1] : "", D = j < y.length ? y[j] : "";
-      return j > 0 && (L === "." || !A(L) && L !== " ") && (I = " "), j < y.length && !A(D) && D !== " " && (P = " "), {
+      const L = j > 0 ? k[j - 1] : "", D = j < k.length ? k[j] : "";
+      return j > 0 && (L === "." || !B(L) && L !== " ") && (I = " "), j < k.length && !B(D) && D !== " " && (P = " "), {
         text: I + T + P,
         prefixLength: I.length,
         suffixLength: P.length
       };
     }, C = x.current;
     if (C) {
-      const y = C.selectionStart || 0, j = C.value || "", T = C.selectionEnd || y;
-      if (T > y) {
-        const O = `{{${v}}}`, { text: R } = N(j, y, O), $ = j.slice(0, y) + R + j.slice(T);
+      const k = C.selectionStart || 0, j = C.value || "", T = C.selectionEnd || k;
+      if (T > k) {
+        const O = `{{${S}}}`, { text: R } = N(j, k, O), $ = j.slice(0, k) + R + j.slice(T);
         p($);
         return;
       }
-      const P = `{{${v}}}`, { text: L } = N(j, y, P), D = j.slice(0, y) + L + j.slice(y);
+      const P = `{{${S}}}`, { text: L } = N(j, k, P), D = j.slice(0, k) + L + j.slice(k);
       p(D);
     }
   }, []);
@@ -8723,8 +9130,8 @@ const AddBlocksDialog = () => {
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (v) => {
-          v.preventDefault(), u !== null ? B() : b();
+        onSubmit: (S) => {
+          S.preventDefault(), u !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -8740,7 +9147,7 @@ const AddBlocksDialog = () => {
                   id: "attrKey",
                   ref: f,
                   value: i,
-                  onChange: (v) => c(v.target.value),
+                  onChange: (S) => c(S.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8749,7 +9156,7 @@ const AddBlocksDialog = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(k) && /* @__PURE__ */ jsx(NestedPathSelector, { data: k, onSelect: E })
+                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: _ })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -8761,8 +9168,8 @@ const AddBlocksDialog = () => {
                   rows: 2,
                   ref: x,
                   value: d,
-                  onChange: (v) => p(v.target.value),
-                  onKeyDown: _,
+                  onChange: (S) => p(S.target.value),
+                  onKeyDown: E,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8774,16 +9181,16 @@ const AddBlocksDialog = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((v, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, B) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: v.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: v.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: S.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => w(A), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(A), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(B), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(B), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, A)) })
+    ] }, B)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [r, n] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8901,36 +9308,36 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n("outline");
   });
-  const p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = useCallback((v) => {
-    v.preventDefault();
-  }, []), m = useCallback((v) => {
-    n(r === v ? null : v);
-  }, []), h = useSidebarMenuItems(), { t: f } = useTranslation(), x = useMemo(() => [...h, ...p], [h, p]), k = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: r }) ?? first(x), S = get(b, "width", DEFAULT_PANEL_WIDTH);
+  const p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = useCallback((S) => {
+    S.preventDefault();
+  }, []), m = useCallback((S) => {
+    n(r === S ? null : S);
+  }, []), h = useSidebarMenuItems(), { t: f } = useTranslation(), x = useMemo(() => [...h, ...p], [h, p]), y = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: r }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (r !== null) {
-      const v = find(x, { id: r });
-      v && get(v, "view", "standard") === "standard" && (a.current = r, i(get(v, "width", DEFAULT_PANEL_WIDTH)));
+      const S = find(x, { id: r });
+      S && get(S, "view", "standard") === "standard" && (a.current = r, i(get(S, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [r, x]);
-  const w = useMemo(() => {
+  const A = useMemo(() => {
     if (r === null) return 0;
-    const v = find(x, { id: r });
-    return get(v, "view", "standard") === "standard" ? S : l;
-  }, [r, S, l, x]), B = useCallback(() => {
+    const S = find(x, { id: r });
+    return get(S, "view", "standard") === "standard" ? v : l;
+  }, [r, v, l, x]), w = useCallback(() => {
     n(a.current);
-  }, [n]), _ = useCallback(() => {
+  }, [n]), E = useCallback(() => {
     n("outline");
   }, [n]);
   useEffect(() => {
     find(x, { id: r }) || n("outline");
   }, [r, x]);
-  const E = useCallback(
-    (v) => {
-      m(v);
+  const _ = useCallback(
+    (S) => {
+      m(S);
     },
     [m]
   );
-  return /* @__PURE__ */ jsx("div", { dir: k, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8940,33 +9347,33 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: x.map((v, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(v, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: x.map((S, B) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
                   position: "top",
-                  panelId: v.id,
-                  isActive: r === v.id,
-                  show: () => E(v.id)
+                  panelId: S.id,
+                  isActive: r === S.id,
+                  show: () => _(S.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(v.label) }) })
-              ] }, "button-top-" + A)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
+              ] }, "button-top-" + B)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: u == null ? void 0 : u.map((v, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(v, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: u == null ? void 0 : u.map((S, B) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: v.id,
-                  isActive: r === v.id,
-                  show: () => E(v.id)
+                  panelId: S.id,
+                  isActive: r === S.id,
+                  show: () => _(S.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(v.label) }) })
-              ] }, "button-bottom-" + A)) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
+              ] }, "button-bottom-" + B)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: w },
-                animate: { width: w },
+                initial: { width: A },
+                animate: { width: A },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: r !== null && get(b, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
@@ -9017,23 +9424,23 @@ const RootLayout = () => {
                 ] }) })
               }
             ),
-            r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${S}px` }, children: [
+            r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${v}px` }, children: [
               /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
                 /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
               ] }) }),
               /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-                close: _
+                close: E
               }) }) })
             ] }) }),
             " ",
-            r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${S}px` }, children: [
+            r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${v}px` }, children: [
               /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
                 /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
               ] }) }),
               /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-                close: _
+                close: E
               }) }) })
             ] }) }),
             r !== null && get(b, "view") === "overlay" && /* @__PURE__ */ jsx(
@@ -9058,10 +9465,10 @@ const RootLayout = () => {
                           /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
                           /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
                         ] }),
-                        /* @__PURE__ */ jsx(Button, { onClick: () => B(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
+                        /* @__PURE__ */ jsx(Button, { onClick: () => w(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
                       ] }),
                       /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-                        close: _
+                        close: E
                       }) }) })
                     ]
                   }
@@ -9076,7 +9483,7 @@ const RootLayout = () => {
   ] }) });
 }, PreviewScreen = () => {
   const [o, r] = usePreviewMode(), { t: n } = useTranslation(), a = useBuilderProp("previewComponent", null);
-  return o ? /* @__PURE__ */ jsxs("div", { className: cn$1("fixed inset-0 z-[999] bg-background", o ? "block" : "hidden"), children: [
+  return o ? /* @__PURE__ */ jsxs("div", { className: cn$2("fixed inset-0 z-[999] bg-background", o ? "block" : "hidden"), children: [
     /* @__PURE__ */ jsxs(Button, { size: "sm", className: "absolute right-0 top-0 m-4 space-x-2", onClick: () => r(!1), children: [
       /* @__PURE__ */ jsx(EyeClosedIcon, {}),
       /* @__PURE__ */ jsx("span", { children: n("Close Preview") })
@@ -9170,72 +9577,72 @@ const FEATURE_TOGGLES = {
   var x;
   return (x = h.onMount) == null ? void 0 : x.call(h, f);
 }, ...m) => {
-  const h = m[0] || ((A) => {
-    let N = o.get(A);
-    return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, v)), N;
+  const h = m[0] || ((B) => {
+    let N = o.get(B);
+    return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(B, N), u == null || u(B, S)), N;
   }), f = m[1] || (() => {
-    let A, N;
-    const C = (y) => {
+    let B, N;
+    const C = (k) => {
       try {
-        y();
+        k();
       } catch (j) {
-        A || (A = !0, N = j);
+        B || (B = !0, N = j);
       }
     };
     do {
       c.f && C(c.f);
-      const y = /* @__PURE__ */ new Set(), j = y.add.bind(y);
+      const k = /* @__PURE__ */ new Set(), j = k.add.bind(k);
       a.forEach((T) => {
         var I;
         return (I = r.get(T)) == null ? void 0 : I.l.forEach(j);
-      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(C), a.size && x();
+      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), k.forEach(C), a.size && x();
     } while (a.size || i.size || l.size);
-    if (A)
+    if (B)
       throw N;
   }), x = m[2] || (() => {
-    const A = [], N = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
-    for (; y.length; ) {
-      const j = y[y.length - 1], T = h(j);
+    const B = [], N = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
+    for (; k.length; ) {
+      const j = k[k.length - 1], T = h(j);
       if (C.has(j)) {
-        y.pop();
+        k.pop();
         continue;
       }
       if (N.has(j)) {
-        n.get(j) === T.n && A.push([j, T]), C.add(j), y.pop();
+        n.get(j) === T.n && B.push([j, T]), C.add(j), k.pop();
         continue;
       }
       N.add(j);
       for (const I of getMountedOrPendingDependents(j, T, r))
-        N.has(I) || y.push(I);
+        N.has(I) || k.push(I);
     }
-    for (let j = A.length - 1; j >= 0; --j) {
-      const [T, I] = A[j];
+    for (let j = B.length - 1; j >= 0; --j) {
+      const [T, I] = B[j];
       let P = !1;
       for (const L of I.d.keys())
         if (L !== T && a.has(L)) {
           P = !0;
           break;
         }
-      P && (k(T), w(T)), n.delete(T);
+      P && (y(T), A(T)), n.delete(T);
     }
-  }), k = m[3] || ((A) => {
+  }), y = m[3] || ((B) => {
     var N, C;
-    const y = h(A);
-    if (isAtomStateInitialized(y) && (r.has(A) && n.get(A) !== y.n || Array.from(y.d).every(
+    const k = h(B);
+    if (isAtomStateInitialized(k) && (r.has(B) && n.get(B) !== k.n || Array.from(k.d).every(
       ([R, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        k(R).n === $
+        y(R).n === $
       )
     )))
-      return y;
-    y.d.clear();
+      return k;
+    k.d.clear();
     let j = !0;
     const T = () => {
-      r.has(A) && (w(A), x(), f());
+      r.has(B) && (A(B), x(), f());
     }, I = (R) => {
       var $;
-      if (isSelfAtom(A, R)) {
+      if (isSelfAtom(B, R)) {
         const U = h(R);
         if (!isAtomStateInitialized(U))
           if (hasInitialValue(R))
@@ -9244,11 +9651,11 @@ const FEATURE_TOGGLES = {
             throw new Error("no atom init");
         return returnAtomValue(U);
       }
-      const M = k(R);
+      const M = y(R);
       try {
         return returnAtomValue(M);
       } finally {
-        y.d.set(R, M.n), isPendingPromise(y.v) && addPendingPromiseToDependency(A, y.v, M), ($ = r.get(R)) == null || $.t.add(A), j || T();
+        k.d.set(R, M.n), isPendingPromise(k.v) && addPendingPromiseToDependency(B, k.v, M), ($ = r.get(R)) == null || $.t.add(B), j || T();
       }
     };
     let P, L;
@@ -9257,100 +9664,100 @@ const FEATURE_TOGGLES = {
         return P || (P = new AbortController()), P.signal;
       },
       get setSelf() {
-        return !L && isActuallyWritableAtom(A) && (L = (...R) => {
+        return !L && isActuallyWritableAtom(B) && (L = (...R) => {
           if (!j)
             try {
-              return S(A, ...R);
+              return v(B, ...R);
             } finally {
               x(), f();
             }
         }), L;
       }
-    }, O = y.n;
+    }, O = k.n;
     try {
-      const R = d(A, I, D);
-      return setAtomStateValueOrPromise(A, R, h), isPromiseLike$1(R) && ((N = R.onCancel) == null || N.call(R, () => P == null ? void 0 : P.abort()), R.then(
+      const R = d(B, I, D);
+      return setAtomStateValueOrPromise(B, R, h), isPromiseLike$1(R) && ((N = R.onCancel) == null || N.call(R, () => P == null ? void 0 : P.abort()), R.then(
         T,
         T
-      )), y;
+      )), k;
     } catch (R) {
-      return delete y.v, y.e = R, ++y.n, y;
+      return delete k.v, k.e = R, ++k.n, k;
     } finally {
-      j = !1, O !== y.n && n.get(A) === O && (n.set(A, y.n), a.add(A), (C = c.c) == null || C.call(c, A));
+      j = !1, O !== k.n && n.get(B) === O && (n.set(B, k.n), a.add(B), (C = c.c) == null || C.call(c, B));
     }
-  }), b = m[4] || ((A) => {
-    const N = [A];
+  }), b = m[4] || ((B) => {
+    const N = [B];
     for (; N.length; ) {
-      const C = N.pop(), y = h(C);
-      for (const j of getMountedOrPendingDependents(C, y, r)) {
+      const C = N.pop(), k = h(C);
+      for (const j of getMountedOrPendingDependents(C, k, r)) {
         const T = h(j);
         n.set(j, T.n), N.push(j);
       }
     }
-  }), S = m[5] || ((A, ...N) => {
+  }), v = m[5] || ((B, ...N) => {
     let C = !0;
-    const y = (T) => returnAtomValue(k(T)), j = (T, ...I) => {
+    const k = (T) => returnAtomValue(y(T)), j = (T, ...I) => {
       var P;
       const L = h(T);
       try {
-        if (isSelfAtom(A, T)) {
+        if (isSelfAtom(B, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
           const D = L.n, O = I[0];
-          setAtomStateValueOrPromise(T, O, h), w(T), D !== L.n && (a.add(T), (P = c.c) == null || P.call(c, T), b(T));
+          setAtomStateValueOrPromise(T, O, h), A(T), D !== L.n && (a.add(T), (P = c.c) == null || P.call(c, T), b(T));
           return;
         } else
-          return S(T, ...I);
+          return v(T, ...I);
       } finally {
         C || (x(), f());
       }
     };
     try {
-      return p(A, y, j, ...N);
+      return p(B, k, j, ...N);
     } finally {
       C = !1;
     }
-  }), w = m[6] || ((A) => {
+  }), A = m[6] || ((B) => {
     var N;
-    const C = h(A), y = r.get(A);
-    if (y && !isPendingPromise(C.v)) {
+    const C = h(B), k = r.get(B);
+    if (k && !isPendingPromise(C.v)) {
       for (const [j, T] of C.d)
-        if (!y.d.has(j)) {
+        if (!k.d.has(j)) {
           const I = h(j);
-          B(j).t.add(A), y.d.add(j), T !== I.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
+          w(j).t.add(B), k.d.add(j), T !== I.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
         }
-      for (const j of y.d || [])
+      for (const j of k.d || [])
         if (!C.d.has(j)) {
-          y.d.delete(j);
-          const T = _(j);
-          T == null || T.t.delete(A);
+          k.d.delete(j);
+          const T = E(j);
+          T == null || T.t.delete(B);
         }
     }
-  }), B = m[7] || ((A) => {
+  }), w = m[7] || ((B) => {
     var N;
-    const C = h(A);
-    let y = r.get(A);
-    if (!y) {
-      k(A);
+    const C = h(B);
+    let k = r.get(B);
+    if (!k) {
+      y(B);
       for (const j of C.d.keys())
-        B(j).t.add(A);
-      if (y = {
+        w(j).t.add(B);
+      if (k = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(C.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, r.set(A, y), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
+      }, r.set(B, k), (N = c.m) == null || N.call(c, B), isActuallyWritableAtom(B)) {
         const j = () => {
           let T = !0;
           const I = (...P) => {
             try {
-              return S(A, ...P);
+              return v(B, ...P);
             } finally {
               T || (x(), f());
             }
           };
           try {
-            const P = g(A, I);
-            P && (y.u = () => {
+            const P = g(B, I);
+            P && (k.u = () => {
               T = !0;
               try {
                 P();
@@ -9365,24 +9772,24 @@ const FEATURE_TOGGLES = {
         l.add(j);
       }
     }
-    return y;
-  }), _ = m[8] || ((A) => {
+    return k;
+  }), E = m[8] || ((B) => {
     var N;
-    const C = h(A);
-    let y = r.get(A);
-    if (y && !y.l.size && !Array.from(y.t).some((j) => {
+    const C = h(B);
+    let k = r.get(B);
+    if (k && !k.l.size && !Array.from(k.t).some((j) => {
       var T;
-      return (T = r.get(j)) == null ? void 0 : T.d.has(A);
+      return (T = r.get(j)) == null ? void 0 : T.d.has(B);
     })) {
-      y.u && i.add(y.u), y = void 0, r.delete(A), (N = c.u) == null || N.call(c, A);
+      k.u && i.add(k.u), k = void 0, r.delete(B), (N = c.u) == null || N.call(c, B);
       for (const j of C.d.keys()) {
-        const T = _(j);
-        T == null || T.t.delete(A);
+        const T = E(j);
+        T == null || T.t.delete(B);
       }
       return;
     }
-    return y;
-  }), E = [
+    return k;
+  }), _ = [
     // store state
     o,
     r,
@@ -9400,29 +9807,29 @@ const FEATURE_TOGGLES = {
     h,
     f,
     x,
-    k,
+    y,
     b,
-    S,
+    v,
+    A,
     w,
-    B,
-    _
-  ], v = {
-    get: (A) => returnAtomValue(k(A)),
-    set: (A, ...N) => {
+    E
+  ], S = {
+    get: (B) => returnAtomValue(y(B)),
+    set: (B, ...N) => {
       try {
-        return S(A, ...N);
+        return v(B, ...N);
       } finally {
         x(), f();
       }
     },
-    sub: (A, N) => {
-      const y = B(A).l;
-      return y.add(N), f(), () => {
-        y.delete(N), _(A), f();
+    sub: (B, N) => {
+      const k = w(B).l;
+      return k.add(N), f(), () => {
+        k.delete(N), E(B), f();
       };
     }
   };
-  return Object.defineProperty(v, BUILDING_BLOCKS, { value: E }), v;
+  return Object.defineProperty(S, BUILDING_BLOCKS, { value: _ }), S;
 }, INTERNAL_buildStoreRev1 = buildStore, createStore = () => INTERNAL_buildStoreRev1();
 let defaultStore;
 const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), defaultStore), StoreContext = createContext(
@@ -9566,8 +9973,8 @@ export {
   getBlocksFromHTML as convertHTMLToChaiBlocks,
   generateUUID as generateBlockId,
   getBlocksFromHTML,
-  Fe as i18n,
-  cn$1 as mergeClasses,
+  We as i18n,
+  cn$2 as mergeClasses,
   registerBlockSettingField,
   registerBlockSettingTemplate,
   registerBlockSettingWidget,
@@ -9622,7 +10029,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  Ue as useTranslation,
+  Fe as useTranslation,
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,