@chaibuilder/sdk 2.0.0-beta.105 → 2.0.0-beta.106

package/dist/core.js

@@ -1,48 +1,52 @@
 var G = Object.defineProperty;
 var K = (o, n, r) => n in o ? G(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var U = (o, n, r) => K(o, typeof n != "symbol" ? n + "" : n, r);
+var V = (o, n, r) => K(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useState, useRef, Suspense, createElement, memo, lazy } from "react";
-import { S as Skeleton, B as Button, al as Label, X as Dialog, Y as DialogTrigger, Z as DialogContent, am as Popover, az as Tooltip, aA as TooltipTrigger, an as PopoverTrigger, aB as TooltipContent, ao as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, n as Badge, a2 as DropdownMenu, a3 as DropdownMenuTrigger, a4 as DropdownMenuContent, a8 as DropdownMenuLabel, a9 as DropdownMenuSeparator, a6 as DropdownMenuCheckboxItem, ah as HoverCard, ai as HoverCardTrigger, aj as HoverCardContent, ay as Textarea, ak as Input$1, aD as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, ap as ScrollArea, ab as DropdownMenuGroup, a5 as DropdownMenuItem, aa as DropdownMenuShortcut, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, r as CardFooter, au as Tabs, av as TabsList, aw as TabsTrigger, ax as TabsContent, H as ContextMenu, I as ContextMenuTrigger, J as ContextMenuContent, K as ContextMenuItem, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, at as Switch, ar as Separator, aC as TooltipProvider, as as Toaster } from "./tooltip-CuxBhGWF.js";
+import { S as Skeleton, B as Button, al as Label, X as Dialog, Y as DialogTrigger, Z as DialogContent, am as Popover, az as Tooltip, aA as TooltipTrigger, an as PopoverTrigger, aB as TooltipContent, ao as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, _ as DialogHeader, a0 as DialogTitle, n as Badge, a2 as DropdownMenu, a3 as DropdownMenuTrigger, a4 as DropdownMenuContent, a8 as DropdownMenuLabel, a9 as DropdownMenuSeparator, a6 as DropdownMenuCheckboxItem, ah as HoverCard, ai as HoverCardTrigger, aj as HoverCardContent, ay as Textarea, ak as Input$1, aD as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, ap as ScrollArea, ab as DropdownMenuGroup, a5 as DropdownMenuItem, aa as DropdownMenuShortcut, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, r as CardFooter, au as Tabs, av as TabsList, aw as TabsTrigger, ax as TabsContent, H as ContextMenu, I as ContextMenuTrigger, J as ContextMenuContent, K as ContextMenuItem, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, at as Switch, ar as Separator, aC as TooltipProvider, as as Toaster } from "./tooltip-CuxBhGWF.js";
 import { atom as atom$1, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { find, filter, flatten, map, omit, isString, has, each, set, first, get, isObject, memoize, compact, isEmpty, noop, includes, without, keys, range, values, flattenDeep, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, findIndex, take, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
 import { Provider as Provider$1 } from "react-wrap-balancer";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as Me } from "react-i18next";
-import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
+import { useTranslation as Ve } from "react-i18next";
+import { g as generateUUID, a as getBreakpointValue, c as cn$1, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
 import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, TextIcon, RowsIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { useThrottledCallback, useDebouncedCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { registerChaiBlock as Oe } from "@chaibuilder/runtime";
+import { registerChaiBlock as Fe } from "@chaibuilder/runtime";
 import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, a as getChaiThemeCssVariables, c as getThemeFontsLinkMarkup } from "./ChaiThemeFn-Cort9tch.js";
 import TreeModel from "tree-model";
 import { useHotkeys } from "react-hotkeys-hook";
 import { toast } from "sonner";
-import { PlusIcon as PlusIcon$1, PanelRightClose, PanelRightOpen, AppWindowIcon, AlignHorizontalJustifyStart, UnfoldHorizontal, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, X, Plus, ChevronLeft, PlusCircle, ChevronDown, List, Loader, SparklesIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
-import ReactQuill, { Quill } from "react-quill";
+import { PlusIcon as PlusIcon$1, Bold, Italic, Strikethrough, PanelRightClose, PanelRightOpen, AppWindowIcon, AlignHorizontalJustifyStart, UnfoldHorizontal, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, ChevronLeft, Underline as Underline$1, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { BubbleMenu, EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import clsx$1, { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 import typography from "@tailwindcss/typography";
 import forms from "@tailwindcss/forms";
 import aspectRatio from "@tailwindcss/aspect-ratio";
 import containerQueries from "@tailwindcss/container-queries";
-import { twMerge } from "tailwind-merge";
 import { S as STYLES_KEY, g as getSplitChaiClasses, R as ROOT_TEMP_KEY } from "./getSplitClasses-DphwgQiE.js";
 import ReactDOM from "react-dom";
 import { ErrorBoundary } from "react-error-boundary";
 import { Resizable } from "re-resizable";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
+import Link from "@tiptap/extension-link";
+import TextAlign from "@tiptap/extension-text-align";
+import Underline from "@tiptap/extension-underline";
 import IconPicker, { IconPickerItem } from "react-icons-picker";
 import Autosuggest from "react-autosuggest";
 import Fuse from "fuse.js";
 import { parse, stringify } from "himalaya";
-import clsx from "clsx";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
-import { default as Ve } from "i18next";
+import { default as We } from "i18next";
 import { motion } from "framer-motion";
 const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.write, isAtomStateInitialized = (o) => "v" in o || "e" in o, returnAtomValue = (o) => {
   if ("e" in o)
@@ -90,37 +94,37 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   for (const i of n.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (f, ...x) => f.read(...x), p = (f, ...x) => f.write(...x), u = (f, x) => {
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (f, ...h) => f.read(...h), p = (f, ...h) => f.write(...h), u = (f, h) => {
   var b;
-  return (b = f.unstable_onInit) == null ? void 0 : b.call(f, x);
-}, g = (f, x) => {
+  return (b = f.unstable_onInit) == null ? void 0 : b.call(f, h);
+}, g = (f, h) => {
   var b;
-  return (b = f.onMount) == null ? void 0 : b.call(f, x);
+  return (b = f.onMount) == null ? void 0 : b.call(f, h);
 }, ...m) => {
-  const f = m[0] || ((C) => {
-    let T = o.get(C);
-    return T || (T = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(C, T), u == null || u(C, _)), T;
-  }), x = m[1] || (() => {
-    let C, T;
+  const f = m[0] || ((w) => {
+    let T = o.get(w);
+    return T || (T = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(w, T), u == null || u(w, _)), T;
+  }), h = m[1] || (() => {
+    let w, T;
     const k = (v) => {
       try {
         v();
       } catch (N) {
-        C || (C = !0, T = N);
+        w || (w = !0, T = N);
       }
     };
     do {
       c.f && k(c.f);
       const v = /* @__PURE__ */ new Set(), N = v.add.bind(v);
       a.forEach((I) => {
-        var P;
-        return (P = n.get(I)) == null ? void 0 : P.l.forEach(N);
+        var L;
+        return (L = n.get(I)) == null ? void 0 : L.l.forEach(N);
       }), a.clear(), i.forEach(N), i.clear(), l.forEach(N), l.clear(), v.forEach(k), a.size && b();
     } while (a.size || i.size || l.size);
-    if (C)
+    if (w)
       throw T;
   }), b = m[2] || (() => {
-    const C = [], T = /* @__PURE__ */ new WeakSet(), k = /* @__PURE__ */ new WeakSet(), v = Array.from(a);
+    const w = [], T = /* @__PURE__ */ new WeakSet(), k = /* @__PURE__ */ new WeakSet(), v = Array.from(a);
     for (; v.length; ) {
       const N = v[v.length - 1], I = f(N);
       if (k.has(N)) {
@@ -128,85 +132,85 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         continue;
       }
       if (T.has(N)) {
-        r.get(N) === I.n && C.push([N, I]), k.add(N), v.pop();
+        r.get(N) === I.n && w.push([N, I]), k.add(N), v.pop();
         continue;
       }
       T.add(N);
-      for (const P of getMountedOrPendingDependents(N, I, n))
-        T.has(P) || v.push(P);
+      for (const L of getMountedOrPendingDependents(N, I, n))
+        T.has(L) || v.push(L);
     }
-    for (let N = C.length - 1; N >= 0; --N) {
-      const [I, P] = C[N];
-      let D = !1;
-      for (const j of P.d.keys())
-        if (j !== I && a.has(j)) {
-          D = !0;
+    for (let N = w.length - 1; N >= 0; --N) {
+      const [I, L] = w[N];
+      let P = !1;
+      for (const E of L.d.keys())
+        if (E !== I && a.has(E)) {
+          P = !0;
           break;
         }
-      D && (h(I), E(I)), r.delete(I);
+      P && (x(I), j(I)), r.delete(I);
     }
-  }), h = m[3] || ((C) => {
+  }), x = m[3] || ((w) => {
     var T, k;
-    const v = f(C);
-    if (isAtomStateInitialized(v) && (n.has(C) && r.get(C) !== v.n || Array.from(v.d).every(
-      ([L, $]) => (
+    const v = f(w);
+    if (isAtomStateInitialized(v) && (n.has(w) && r.get(w) !== v.n || Array.from(v.d).every(
+      ([R, O]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        h(L).n === $
+        x(R).n === O
       )
     )))
       return v;
     v.d.clear();
     let N = !0;
     const I = () => {
-      n.has(C) && (E(C), b(), x());
-    }, P = (L) => {
-      var $;
-      if (isSelfAtom(C, L)) {
-        const H = f(L);
+      n.has(w) && (j(w), b(), h());
+    }, L = (R) => {
+      var O;
+      if (isSelfAtom(w, R)) {
+        const H = f(R);
         if (!isAtomStateInitialized(H))
-          if (hasInitialValue(L))
-            setAtomStateValueOrPromise(L, L.init, f);
+          if (hasInitialValue(R))
+            setAtomStateValueOrPromise(R, R.init, f);
           else
             throw new Error("no atom init");
         return returnAtomValue(H);
       }
-      const O = h(L);
+      const $ = x(R);
       try {
-        return returnAtomValue(O);
+        return returnAtomValue($);
       } finally {
-        v.d.set(L, O.n), isPendingPromise(v.v) && addPendingPromiseToDependency(C, v.v, O), ($ = n.get(L)) == null || $.t.add(C), N || I();
+        v.d.set(R, $.n), isPendingPromise(v.v) && addPendingPromiseToDependency(w, v.v, $), (O = n.get(R)) == null || O.t.add(w), N || I();
       }
     };
-    let D, j;
-    const R = {
+    let P, E;
+    const D = {
       get signal() {
-        return D || (D = new AbortController()), D.signal;
+        return P || (P = new AbortController()), P.signal;
       },
       get setSelf() {
-        return !j && isActuallyWritableAtom(C) && (j = (...L) => {
+        return !E && isActuallyWritableAtom(w) && (E = (...R) => {
           if (!N)
             try {
-              return B(C, ...L);
+              return A(w, ...R);
             } finally {
-              b(), x();
+              b(), h();
             }
-        }), j;
+        }), E;
       }
     }, M = v.n;
     try {
-      const L = d(C, P, R);
-      return setAtomStateValueOrPromise(C, L, f), isPromiseLike$2(L) && ((T = L.onCancel) == null || T.call(L, () => D == null ? void 0 : D.abort()), L.then(
+      const R = d(w, L, D);
+      return setAtomStateValueOrPromise(w, R, f), isPromiseLike$2(R) && ((T = R.onCancel) == null || T.call(R, () => P == null ? void 0 : P.abort()), R.then(
         I,
         I
       )), v;
-    } catch (L) {
-      return delete v.v, v.e = L, ++v.n, v;
+    } catch (R) {
+      return delete v.v, v.e = R, ++v.n, v;
     } finally {
-      N = !1, M !== v.n && r.get(C) === M && (r.set(C, v.n), a.add(C), (k = c.c) == null || k.call(c, C));
+      N = !1, M !== v.n && r.get(w) === M && (r.set(w, v.n), a.add(w), (k = c.c) == null || k.call(c, w));
     }
-  }), y = m[4] || ((C) => {
-    const T = [C];
+  }), y = m[4] || ((w) => {
+    const T = [w];
     for (; T.length; ) {
       const k = T.pop(), v = f(k);
       for (const N of getMountedOrPendingDependents(k, v, n)) {
@@ -214,73 +218,73 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         r.set(N, I.n), T.push(N);
       }
     }
-  }), B = m[5] || ((C, ...T) => {
+  }), A = m[5] || ((w, ...T) => {
     let k = !0;
-    const v = (I) => returnAtomValue(h(I)), N = (I, ...P) => {
-      var D;
-      const j = f(I);
+    const v = (I) => returnAtomValue(x(I)), N = (I, ...L) => {
+      var P;
+      const E = f(I);
       try {
-        if (isSelfAtom(C, I)) {
+        if (isSelfAtom(w, I)) {
           if (!hasInitialValue(I))
             throw new Error("atom not writable");
-          const R = j.n, M = P[0];
-          setAtomStateValueOrPromise(I, M, f), E(I), R !== j.n && (a.add(I), (D = c.c) == null || D.call(c, I), y(I));
+          const D = E.n, M = L[0];
+          setAtomStateValueOrPromise(I, M, f), j(I), D !== E.n && (a.add(I), (P = c.c) == null || P.call(c, I), y(I));
           return;
         } else
-          return B(I, ...P);
+          return A(I, ...L);
       } finally {
-        k || (b(), x());
+        k || (b(), h());
       }
     };
     try {
-      return p(C, v, N, ...T);
+      return p(w, v, N, ...T);
     } finally {
       k = !1;
     }
-  }), E = m[6] || ((C) => {
+  }), j = m[6] || ((w) => {
     var T;
-    const k = f(C), v = n.get(C);
+    const k = f(w), v = n.get(w);
     if (v && !isPendingPromise(k.v)) {
       for (const [N, I] of k.d)
         if (!v.d.has(N)) {
-          const P = f(N);
-          w(N).t.add(C), v.d.add(N), I !== P.n && (a.add(N), (T = c.c) == null || T.call(c, N), y(N));
+          const L = f(N);
+          C(N).t.add(w), v.d.add(N), I !== L.n && (a.add(N), (T = c.c) == null || T.call(c, N), y(N));
         }
       for (const N of v.d || [])
         if (!k.d.has(N)) {
           v.d.delete(N);
           const I = S(N);
-          I == null || I.t.delete(C);
+          I == null || I.t.delete(w);
         }
     }
-  }), w = m[7] || ((C) => {
+  }), C = m[7] || ((w) => {
     var T;
-    const k = f(C);
-    let v = n.get(C);
+    const k = f(w);
+    let v = n.get(w);
     if (!v) {
-      h(C);
+      x(w);
       for (const N of k.d.keys())
-        w(N).t.add(C);
+        C(N).t.add(w);
       if (v = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(k.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, n.set(C, v), (T = c.m) == null || T.call(c, C), isActuallyWritableAtom(C)) {
+      }, n.set(w, v), (T = c.m) == null || T.call(c, w), isActuallyWritableAtom(w)) {
         const N = () => {
           let I = !0;
-          const P = (...D) => {
+          const L = (...P) => {
             try {
-              return B(C, ...D);
+              return A(w, ...P);
             } finally {
-              I || (b(), x());
+              I || (b(), h());
             }
           };
           try {
-            const D = g(C, P);
-            D && (v.u = () => {
+            const P = g(w, L);
+            P && (v.u = () => {
               I = !0;
               try {
-                D();
+                P();
               } finally {
                 I = !1;
               }
@@ -293,23 +297,23 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       }
     }
     return v;
-  }), S = m[8] || ((C) => {
+  }), S = m[8] || ((w) => {
     var T;
-    const k = f(C);
-    let v = n.get(C);
+    const k = f(w);
+    let v = n.get(w);
     if (v && !v.l.size && !Array.from(v.t).some((N) => {
       var I;
-      return (I = n.get(N)) == null ? void 0 : I.d.has(C);
+      return (I = n.get(N)) == null ? void 0 : I.d.has(w);
     })) {
-      v.u && i.add(v.u), v = void 0, n.delete(C), (T = c.u) == null || T.call(c, C);
+      v.u && i.add(v.u), v = void 0, n.delete(w), (T = c.u) == null || T.call(c, w);
       for (const N of k.d.keys()) {
         const I = S(N);
-        I == null || I.t.delete(C);
+        I == null || I.t.delete(w);
       }
       return;
     }
     return v;
-  }), A = [
+  }), B = [
     // store state
     o,
     n,
@@ -325,31 +329,31 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     g,
     // building-block functions
     f,
-    x,
-    b,
     h,
+    b,
+    x,
     y,
-    B,
-    E,
-    w,
+    A,
+    j,
+    C,
     S
   ], _ = {
-    get: (C) => returnAtomValue(h(C)),
-    set: (C, ...T) => {
+    get: (w) => returnAtomValue(x(w)),
+    set: (w, ...T) => {
       try {
-        return B(C, ...T);
+        return A(w, ...T);
       } finally {
-        b(), x();
+        b(), h();
       }
     },
-    sub: (C, T) => {
-      const v = w(C).l;
-      return v.add(T), x(), () => {
-        v.delete(T), S(C), x();
+    sub: (w, T) => {
+      const v = C(w).l;
+      return v.add(T), h(), () => {
+        v.delete(T), S(w), h();
       };
     }
   };
-  return Object.defineProperty(_, BUILDING_BLOCKS, { value: A }), _;
+  return Object.defineProperty(_, BUILDING_BLOCKS, { value: B }), _;
 }, INTERNAL_buildStoreRev1 = buildStore;
 let keyCount = 0;
 function atom(o, n) {
@@ -385,36 +389,36 @@ function splitAtom(o, n) {
         if (p)
           return p;
         const u = d && r.get(d), g = [], m = [];
-        return c.forEach((f, x) => {
-          const b = x;
-          m[x] = b;
-          const h = u && u.atomList[u.keyList.indexOf(b)];
-          if (h) {
-            g[x] = h;
+        return c.forEach((f, h) => {
+          const b = h;
+          m[h] = b;
+          const x = u && u.atomList[u.keyList.indexOf(b)];
+          if (x) {
+            g[h] = x;
             return;
           }
-          const y = (E) => {
-            const w = E(l), S = E(o), _ = a(S, w == null ? void 0 : w.arr).keyList.indexOf(b);
+          const y = (j) => {
+            const C = j(l), S = j(o), _ = a(S, C == null ? void 0 : C.arr).keyList.indexOf(b);
             if (_ < 0 || _ >= S.length) {
-              const C = c[a(c).keyList.indexOf(b)];
-              if (C)
-                return C;
+              const w = c[a(c).keyList.indexOf(b)];
+              if (w)
+                return w;
               throw new Error("splitAtom: index out of bounds for read");
             }
             return S[_];
-          }, B = (E, w, S) => {
-            const A = E(l), _ = E(o), T = a(_, A == null ? void 0 : A.arr).keyList.indexOf(b);
+          }, A = (j, C, S) => {
+            const B = j(l), _ = j(o), T = a(_, B == null ? void 0 : B.arr).keyList.indexOf(b);
             if (T < 0 || T >= _.length)
               throw new Error("splitAtom: index out of bounds for write");
             const k = isFunction(S) ? S(_[T]) : S;
-            Object.is(_[T], k) || w(o, [
+            Object.is(_[T], k) || C(o, [
               ..._.slice(0, T),
               k,
               ..._.slice(T + 1)
             ]);
           };
-          g[x] = isWritable(o) ? atom(y, B) : atom(y);
-        }), u && u.keyList.length === m.length && u.keyList.every((f, x) => f === m[x]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
+          g[h] = isWritable(o) ? atom(y, A) : atom(y);
+        }), u && u.keyList.length === m.length && u.keyList.every((f, h) => f === m[h]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -497,8 +501,8 @@ function createJSONStorage(o = () => {
           a = b;
         }
         return l;
-      }, x = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
-      return isPromiseLike$1(x) ? x.then(f) : f(x);
+      }, h = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
+      return isPromiseLike$1(h) ? h.then(f) : f(h);
     },
     setItem: (p, u) => {
       var g;
@@ -512,13 +516,13 @@ function createJSONStorage(o = () => {
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
   }, c = (p) => (u, g, m) => p(u, (f) => {
-    let x;
+    let h;
     try {
-      x = JSON.parse(f || "");
+      h = JSON.parse(f || "");
     } catch {
-      x = m;
+      h = m;
     }
-    g(x);
+    g(h);
   });
   let d;
   try {
@@ -689,17 +693,17 @@ class Content extends Component {
 class Frame extends Component {
   constructor(r, a) {
     super(r, a);
-    U(this, "setRef", (r) => {
+    V(this, "setRef", (r) => {
       this.nodeRef.current = r;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(r) : a && (a.current = r);
     });
-    U(this, "handleLoad", () => {
+    V(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
     });
     // In certain situations on a cold cache DOMContentLoaded never gets called
     // fallback to an interval to check if that's the case
-    U(this, "loadCheck", () => setInterval(() => {
+    V(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -736,7 +740,7 @@ class Frame extends Component {
     return delete r.head, delete r.initialContent, delete r.mountTarget, delete r.contentDidMount, delete r.contentDidUpdate, delete r.forwardedRef, /* @__PURE__ */ jsx("iframe", { ...r, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
   }
 }
-U(Frame, "defaultProps", {
+V(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -1340,50 +1344,50 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (b, h, y) => {
-      const B = map(b, (w) => {
-        const A = n.find((T) => T._id === w)._parent || null, C = n.filter((T) => A ? T._parent === A : !T._parent).map((T) => T._id).indexOf(w);
-        return { _id: w, oldParent: A, oldPosition: C };
-      }), E = B.find(({ _id: w }) => w === b[0]);
-      E && E.oldParent === h && E.oldPosition === y || (i(b, h, y), o({
-        undo: () => each(B, ({ _id: w, oldParent: S, oldPosition: A }) => {
-          i([w], S, A);
+    moveBlocks: (b, x, y) => {
+      const A = map(b, (C) => {
+        const B = n.find((T) => T._id === C)._parent || null, w = n.filter((T) => B ? T._parent === B : !T._parent).map((T) => T._id).indexOf(C);
+        return { _id: C, oldParent: B, oldPosition: w };
+      }), j = A.find(({ _id: C }) => C === b[0]);
+      j && j.oldParent === x && j.oldPosition === y || (i(b, x, y), o({
+        undo: () => each(A, ({ _id: C, oldParent: S, oldPosition: B }) => {
+          i([C], S, B);
         }),
-        redo: () => i(b, h, y)
+        redo: () => i(b, x, y)
       }));
     },
-    addBlocks: (b, h, y) => {
-      a(b, h, y), o({
+    addBlocks: (b, x, y) => {
+      a(b, x, y), o({
         undo: () => l(map(b, "_id")),
-        redo: () => a(b, h, y)
+        redo: () => a(b, x, y)
       });
     },
     removeBlocks: (b) => {
-      var E;
-      const h = (E = first(b)) == null ? void 0 : E._parent, B = n.filter((w) => h ? w._parent === h : !w._parent).indexOf(first(b));
+      var j;
+      const x = (j = first(b)) == null ? void 0 : j._parent, A = n.filter((C) => x ? C._parent === x : !C._parent).indexOf(first(b));
       l(map(b, "_id")), o({
-        undo: () => a(b, h, B),
+        undo: () => a(b, x, A),
         redo: () => l(map(b, "_id"))
       });
     },
-    updateBlocks: (b, h, y) => {
-      let B = [];
+    updateBlocks: (b, x, y) => {
+      let A = [];
       if (y)
-        B = map(b, (E) => ({ _id: E, ...y }));
+        A = map(b, (j) => ({ _id: j, ...y }));
       else {
-        const E = keys(h);
-        B = map(b, (w) => {
-          const S = n.find((_) => _._id === w), A = { _id: w };
-          return each(E, (_) => A[_] = S[_]), A;
+        const j = keys(x);
+        A = map(b, (C) => {
+          const S = n.find((_) => _._id === C), B = { _id: C };
+          return each(j, (_) => B[_] = S[_]), B;
         });
       }
-      c(map(b, (E) => ({ _id: E, ...h }))), o({
-        undo: () => c(B),
-        redo: () => c(map(b, (E) => ({ _id: E, ...h })))
+      c(map(b, (j) => ({ _id: j, ...x }))), o({
+        undo: () => c(A),
+        redo: () => c(map(b, (j) => ({ _id: j, ...x })))
       });
     },
-    updateBlocksRuntime: (b, h) => {
-      c(map(b, (y) => ({ _id: y, ...h })));
+    updateBlocksRuntime: (b, x) => {
+      c(map(b, (y) => ({ _id: y, ...x })));
     },
     setNewBlocks: (b) => {
       r(b), o({
@@ -1392,12 +1396,12 @@ const useBlocksStoreManager = () => {
       });
     },
     updateMultipleBlocksProps: (b) => {
-      let h = [];
-      h = map(b, (y) => {
-        const B = keys(y), E = n.find((S) => S._id === y._id), w = {};
-        return each(B, (S) => w[S] = E[S]), w;
+      let x = [];
+      x = map(b, (y) => {
+        const A = keys(y), j = n.find((S) => S._id === y._id), C = {};
+        return each(A, (S) => C[S] = j[S]), C;
       }), c(b), o({
-        undo: () => c(h),
+        undo: () => c(x),
         redo: () => c(b)
       });
     }
@@ -1435,12 +1439,12 @@ const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var f;
-      for (let x = 0; x < i.length; x++) {
-        const { _id: b } = i[x];
-        i[x]._id = generateUUID();
-        const h = filter(i, { _parent: b });
-        for (let y = 0; y < h.length; y++)
-          h[y]._parent = i[x]._id;
+      for (let h = 0; h < i.length; h++) {
+        const { _id: b } = i[h];
+        i[h]._id = generateUUID();
+        const x = filter(i, { _parent: b });
+        for (let y = 0; y < x.length; y++)
+          x[y]._parent = i[h]._id;
       }
       const p = first(i);
       let u, g;
@@ -1451,8 +1455,8 @@ const useAddBlock = () => {
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const h = i.blocks;
-        return a(h, c, d);
+        const x = i.blocks;
+        return a(x, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -2906,43 +2910,43 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (f, x) => {
-    const b = cloneDeep(x.find((h) => h._id === f));
-    for (const h in b) {
-      const y = b[h];
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (f, h) => {
+    const b = cloneDeep(h.find((x) => x._id === f));
+    for (const x in b) {
+      const y = b[x];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: B, classes: E } = getSplitChaiClasses(y);
-        b[h] = compact(flattenDeep([B, E])).join(" ");
+        const { baseClasses: A, classes: j } = getSplitChaiClasses(y);
+        b[x] = compact(flattenDeep([A, j])).join(" ");
       } else
-        h !== "_id" && delete b[h];
+        x !== "_id" && delete b[x];
     }
     return b;
   };
   return {
     askAi: useCallback(
-      async (f, x, b, h) => {
+      async (f, h, b, x) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, B = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p) : [m(x, d)], E = await l(f, addLangToPrompt(b, g, f), B, y), { blocks: w, error: S } = E;
+            const y = p === u ? "" : p, A = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [m(h, d)], j = await l(f, addLangToPrompt(b, g, f), A, y), { blocks: C, error: S } = j;
             if (S) {
               a(S);
               return;
             }
             if (f === "styles") {
-              const A = w.map((_) => {
-                for (const C in _)
-                  C !== "_id" && (_[C] = `${STYLES_KEY},${_[C]}`);
+              const B = C.map((_) => {
+                for (const w in _)
+                  w !== "_id" && (_[w] = `${STYLES_KEY},${_[w]}`);
                 return _;
               });
-              c(A);
+              c(B);
             } else
-              i(w);
-            h && h(E);
+              i(C);
+            x && x(j);
           } catch (y) {
             a(y);
           } finally {
-            n(!1), h && h();
+            n(!1), x && x();
           }
         }
       },
@@ -3175,13 +3179,13 @@ const useBlockHighlight = () => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
     return each(p, (m) => {
-      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
-      u = u.replace(x, " ").replace(/\s+/g, " ").trim();
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      u = u.replace(h, " ").replace(/\s+/g, " ").trim();
       const b = first(m.split(":"));
       includes(["2xl", "xl", "lg", "md", "sm"], b) && p.push(m.split(":").pop().trim());
     }), each(p, (m) => {
-      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
-      g = g.replace(x, " ").replace(/\s+/g, " ").trim();
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      g = g.replace(h, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
@@ -3274,7 +3278,7 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), layoutVariantAto
 };
 class PubSub {
   constructor() {
-    U(this, "subscribers", /* @__PURE__ */ new Map());
+    V(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(n, r) {
     return this.subscribers.has(n) || this.subscribers.set(n, /* @__PURE__ */ new Set()), this.subscribers.get(n).add(r), () => {
@@ -3322,13 +3326,13 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
       tabIndex: 0,
       ref: u.setFloating,
       style: p,
-      onClick: (x) => {
-        x.stopPropagation(), x.preventDefault();
+      onClick: (h) => {
+        h.stopPropagation(), h.preventDefault();
       },
-      onMouseEnter: (x) => {
-        x.stopPropagation(), i(null);
+      onMouseEnter: (h) => {
+        h.stopPropagation(), i(null);
       },
-      onKeyDown: (x) => x.stopPropagation(),
+      onKeyDown: (h) => h.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         m && /* @__PURE__ */ jsx(
@@ -3409,7 +3413,6 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
   </head>
   <body class="font-body antialiased h-full">
     <div class="frame-root h-full"></div>
-    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
   </body>
 </html>`, useKeyEventWatcher = (o) => {
   const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), f = o ? { document: o } : {};
@@ -3425,8 +3428,8 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     i
   ]), useHotkeys(
     "del, backspace",
-    (x) => {
-      x.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
+    (h) => {
+      h.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
     f,
     [n, l]
@@ -3524,31 +3527,63 @@ const useDnd = () => {
     },
     onDrop: (f) => {
       var S;
-      const x = dropTarget, h = getOrientation(x) === "vertical" ? f.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : f.clientX;
-      dropIndex = calculateDropIndex(h, possiblePositions);
-      const y = d, B = x.getAttribute("data-block-id"), E = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((y == null ? void 0 : y._id) === B || !E) {
+      const h = dropTarget, x = getOrientation(h) === "vertical" ? f.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : f.clientX;
+      dropIndex = calculateDropIndex(x, possiblePositions);
+      const y = d, A = h.getAttribute("data-block-id"), j = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((y == null ? void 0 : y._id) === A || !j) {
         m();
         return;
       }
       if (!has(y, "_id")) {
-        a(y, B === "canvas" ? null : B, dropIndex), setTimeout(m, 300);
+        a(y, A === "canvas" ? null : A, dropIndex), setTimeout(m, 300);
         return;
       }
-      let w = x.getAttribute("data-block-id");
-      w === null && (w = f.target.parentElement.getAttribute("data-block-id")), c([y._id], w === "canvas" ? null : w, dropIndex), m(), setTimeout(removePlaceholder, 300);
+      let C = h.getAttribute("data-block-id");
+      C === null && (C = f.target.parentElement.getAttribute("data-block-id")), c([y._id], C === "canvas" ? null : C, dropIndex), m(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (f) => {
-      const x = f, b = x.target;
+      const h = f, b = h.target;
       dropTarget = b;
-      const h = b.getAttribute("data-block-id"), y = b.getAttribute("data-dnd-dragged") !== "yes";
-      u(h), x.stopPropagation(), x.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(b), r(!0), l(""), i([]);
+      const x = b.getAttribute("data-block-id"), y = b.getAttribute("data-dnd-dragged") !== "yes";
+      u(x), h.stopPropagation(), h.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(b), r(!0), l(""), i([]);
     },
     onDragLeave: (f) => {
       f.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
+function cn(...o) {
+  return twMerge(clsx(o));
+}
+const TiptapBubbleMenu = ({ editor: o }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(BubbleMenu, { editor: o, tippyOptions: { duration: 100 }, children: /* @__PURE__ */ jsxs("div", { className: "bubble-menu space-x-2", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => o.chain().focus().toggleBold().run(),
+        className: cn(o.isActive("bold") ? "bg-gray-100" : "", "h-3 w-3"),
+        children: /* @__PURE__ */ jsx(Bold, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => o.chain().focus().toggleItalic().run(),
+        className: cn(o.isActive("italic") ? "bg-gray-100" : "", "h-3 w-3"),
+        children: /* @__PURE__ */ jsx(Italic, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => o.chain().focus().toggleStrike().run(),
+        className: cn(o.isActive("strike") ? "bg-gray-100" : "", "h-3 w-3"),
+        children: /* @__PURE__ */ jsx(Strikethrough, {})
+      }
+    )
+  ] }) }),
+  /* @__PURE__ */ jsx(EditorContent, { editor: o })
+] });
 function getTargetedBlock(o) {
   if (o.getAttribute("data-block-id") === "canvas")
     return null;
@@ -3557,36 +3592,29 @@ function getTargetedBlock(o) {
   const n = o.closest("[data-block-id]");
   return (n == null ? void 0 : n.getAttribute("data-block-id")) === "canvas" ? null : n;
 }
-function destroyQuill(o) {
-  o.container.innerHTML = "", o.container.parentNode.removeChild(o.container);
-  const n = document.querySelector(".ql-toolbar");
-  n && n.parentNode.removeChild(n), o = null;
-}
-const useHandleCanvasDblClick = () => {
-  const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight(), i = useGetBlockAtomValue(pageBlocksAtomsAtom);
+const useHandleCanvasDblClick = (o, n) => {
+  const r = [], a = useUpdateBlocksProps(), [l, i] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: c } = useBlockHighlight(), d = useGetBlockAtomValue(pageBlocksAtomsAtom);
   return useCallback(
-    (c) => {
-      var b;
-      if (r) return;
-      const d = getTargetedBlock(c.target), p = d.getAttribute("data-block-type");
-      if (!p || !o.includes(p))
+    (p) => {
+      if (l) return;
+      const u = getTargetedBlock(p.target);
+      if (!u) return;
+      const g = u.getAttribute("data-block-type");
+      if (!g || !r.includes(g))
         return;
-      const u = d.getAttribute("data-block-id"), g = i(u).content, m = d.cloneNode(!0);
-      m.innerHTML = g, d.style.display = "none", Array.from(m.attributes).forEach((h) => {
-        h.name !== "class" && m.removeAttribute(h.name);
-      }), p === "Text" && (m.style.display = "inline-block"), d.parentNode.insertBefore(m, d.nextSibling);
-      const f = new Quill(m, { placeholder: "Type here..." });
-      function x() {
-        const h = f.getText(0, f.getLength());
-        n([u], { content: h }), d.removeAttribute("style"), m.removeEventListener("blur", x, !0), destroyQuill(f), a(""), l(), m.remove();
-      }
-      m.addEventListener("blur", x, !0), m.addEventListener("click", (h) => {
-        h.stopPropagation();
-      }), m.addEventListener("keydown", (h) => {
-        (h.key === "Enter" || h.key === "Escape") && x();
-      }), f.focus(), (b = m.querySelector(".ql-clipboard")) == null || b.remove(), a(d.getAttribute("data-block-id"));
+      const m = u.getAttribute("data-block-id");
+      if (!m) return;
+      o.on("update", ({ editor: h }) => {
+        console.log(h.getHTML());
+      }), o.on("blur", () => {
+        console.log("blur");
+        const h = o.getHTML();
+        a([m], { content: h }), n.style.display = "none", u.style.visibility = "visible";
+      }), i(m);
+      const f = d(m).content;
+      o.commands.setContent(f), n.style.display = "block", u.style.visibility = "hidden", n.style.position = "absolute", n.style.top = `${u.offsetTop}px`, n.style.left = `${u.offsetLeft}px`, n.style.width = `${u.offsetWidth}px`, n.style.height = `${u.offsetHeight}px`, n.classList.add(...u.classList);
     },
-    [r, a, n, l]
+    [l, c, d, i, a, o, n]
   );
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [n, r] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
@@ -3623,29 +3651,34 @@ const useHandleCanvasDblClick = () => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const m = getElementByDataBlockId(n, first(r));
-      if (m) {
-        const f = m.getAttribute("data-style-prop");
-        if (f) {
-          const x = m.getAttribute("data-style-id"), b = m.getAttribute("data-block-parent");
-          l([{ id: x, prop: f, blockId: b }]);
+      const h = getElementByDataBlockId(n, first(r));
+      if (h) {
+        const b = h.getAttribute("data-style-prop");
+        if (b) {
+          const x = h.getAttribute("data-style-id"), y = h.getAttribute("data-block-parent");
+          l([{ id: x, prop: b, blockId: y }]);
         }
       }
     }, 100);
   }, [n, r, l, a]);
-  const c = useHandleCanvasDblClick(), d = useHandleCanvasClick(), p = useHandleMouseMove(), u = useHandleMouseLeave(), g = useDnd();
-  return /* @__PURE__ */ jsx(
+  const c = useEditor({
+    extensions: [StarterKit]
+  }), d = useRef(null), p = useHandleCanvasDblClick(c, d.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), m = useHandleMouseLeave(), f = useDnd();
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-block-id": "canvas",
       id: "canvas",
-      onClick: d,
-      onDoubleClick: c,
-      onMouseMove: p,
-      onMouseLeave: u,
-      ...omit(g, "isDragging"),
-      className: "relative h-full max-w-full p-px " + (g.isDragging ? "dragging" : ""),
-      children: o
+      onClick: u,
+      onDoubleClick: p,
+      onMouseMove: g,
+      onMouseLeave: m,
+      ...omit(f, "isDragging"),
+      className: "relative h-full max-w-full p-px " + (f.isDragging ? "dragging" : ""),
+      children: [
+        o,
+        /* @__PURE__ */ jsx("div", { ref: d, style: { display: "none" }, children: /* @__PURE__ */ jsx(TiptapBubbleMenu, { editor: c }) })
+      ]
     }
   );
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), HeadTags = () => {
@@ -3678,8 +3711,8 @@ const useHandleCanvasDblClick = () => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: h, theme: y }) {
-          h({
+        plugin(function({ addBase: x, theme: y }) {
+          x({
             "h1,h2,h3,h4,h5,h6": {
               fontFamily: y("fontFamily.heading")
             },
@@ -3693,7 +3726,7 @@ const useHandleCanvasDblClick = () => {
       ]
     });
   }, [o, n, p]), useEffect(() => {
-    g && (g.textContent = `${map(r, (h) => `[data-block-id="${h}"]`).join(",")}{
+    g && (g.textContent = `${map(r, (x) => `[data-block-id="${x}"]`).join(",")}{
                 outline: 1px solid ${r.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [r, g]), useEffect(() => {
@@ -3701,18 +3734,18 @@ const useHandleCanvasDblClick = () => {
   }, [i, f]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    m && (m.textContent = `${map(l, ({ id: h }) => `[data-style-id="${h}"]`).join(",")}{
+    m && (m.textContent = `${map(l, ({ id: x }) => `[data-style-id="${x}"]`).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 h = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
   ), b = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: x }),
+    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: h }),
     /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: b } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
@@ -3790,10 +3823,10 @@ const getBlockRuntimeProps = memoize((o) => {
     [o]
   );
 }, BlockRenderer = ({ blockAtom: o, children: n }) => {
-  const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(inlineEditingActiveAtom), [g] = useAtom$1(dataBindingActiveAtom), m = get(a, "component", null), f = useMemo(
-    () => g ? applyBinding(applyLanguage(r, l, a), d) : applyLanguage(r, l, a),
-    [r, l, a, d, g]
-  ), x = useMemo(() => getBlockTagAttributes(r), [r]), b = useMemo(() => c(r._id, getBlockRuntimeProps(r._type)), [r]), h = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), y = useMemo(
+  const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), m = useMemo(
+    () => u ? applyBinding(applyLanguage(r, l, a), d) : applyLanguage(r, l, a),
+    [r, l, a, d, u]
+  ), f = useMemo(() => getBlockTagAttributes(r), [r]), h = useMemo(() => c(r._id, getBlockRuntimeProps(r._type)), [r]), b = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), x = useMemo(
     () => ({
       blockProps: {
         "data-block-id": r._id,
@@ -3801,14 +3834,14 @@ const getBlockRuntimeProps = memoize((o) => {
       },
       inBuilder: !0,
       lang: l || i,
+      ...m,
       ...f,
-      ...x,
-      ...b,
-      ...h
+      ...h,
+      ...b
     }),
-    [r, l, i, f, x, b, h]
+    [r, l, i, m, f, h, b]
   );
-  return isNull(m) || p.includes(r._id) || u === r._id ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(m, { ...y, children: n }) });
+  return isNull(g) || p.includes(r._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...x, children: n }) });
 }, GlobalBlocksRenderer = ({ globalBlockId: o }) => {
   const { getGlobalBlocks: n } = useGlobalBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom$1(r)), [r]);
   return isEmpty(r) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r });
@@ -3858,43 +3891,43 @@ const getBlockRuntimeProps = memoize((o) => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, f] = useState([]), [, x] = useAtom$1(canvasIframeAtom), [b, h] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), E = (A) => {
-    p((_) => ({ ..._, width: A }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, f] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [b, x] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), A = useBuilderProp("htmlDir", "ltr"), j = (B) => {
+    p((_) => ({ ..._, width: B }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: A, clientHeight: _ } = c.current;
-    p({ width: A, height: _ });
+    const { clientWidth: B, clientHeight: _ } = c.current;
+    p({ width: B, height: _ });
   }, [c, n]);
-  const w = (A, _ = 0) => {
-    const { top: C } = A.getBoundingClientRect();
-    return C + _ >= 0 && C - _ <= window.innerHeight;
+  const C = (B, _ = 0) => {
+    const { top: w } = B.getBoundingClientRect();
+    return w + _ >= 0 && w - _ <= window.innerHeight;
   };
   useEffect(() => {
-    var A, _;
+    var B, _;
     if (a && a.type !== "Multiple" && i.current) {
-      const C = getElementByDataBlockId(i.current.contentDocument, a._id);
-      C && (w(C) || (_ = (A = i.current) == null ? void 0 : A.contentWindow) == null || _.scrollTo({ top: C.offsetTop, behavior: "smooth" }), m([C]));
+      const w = getElementByDataBlockId(i.current.contentDocument, a._id);
+      w && (C(w) || (_ = (B = i.current) == null ? void 0 : B.contentWindow) == null || _.scrollTo({ top: w.offsetTop, behavior: "smooth" }), m([w]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(b) && i.current) {
-      const A = getElementByStyleId(
+      const B = getElementByStyleId(
         i.current.contentDocument,
         first(b).id
       );
-      f(A ? [A] : [null]);
+      f(B ? [B] : [null]);
     } else
       f([null]);
   }, [b]);
   const S = useMemo(() => {
-    let A = IframeInitialContent;
-    return A = A.replace("__HTML_DIR__", B), o === "offline" && (A = A.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), A;
-  }, [o, B]);
-  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: E, onResize: E, children: /* @__PURE__ */ jsx(
+    let B = IframeInitialContent;
+    return B = B.replace("__HTML_DIR__", A), o === "offline" && (B = B.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), B;
+  }, [o, A]);
+  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: j, onResize: j, children: /* @__PURE__ */ jsx(
     "div",
     {
       onClick: () => {
-        r([]), h([]);
+        r([]), x([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3902,7 +3935,7 @@ const getBlockRuntimeProps = memoize((o) => {
       children: /* @__PURE__ */ jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => x(i.current),
+          contentDidMount: () => h(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
@@ -4161,25 +4194,25 @@ const getBlockRuntimeProps = memoize((o) => {
   const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [c, d] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), g = (y) => {
     a(y);
   }, m = () => {
-    const y = l.find((B) => Object.keys(B)[0] === r);
+    const y = l.find((A) => Object.keys(A)[0] === r);
     if (y) {
-      const B = Object.values(y)[0];
-      B && typeof B == "object" && "fontFamily" in B && "borderRadius" in B && "colors" in B ? d(B) : console.error("Invalid preset structure:", B);
+      const A = Object.values(y)[0];
+      A && typeof A == "object" && "fontFamily" in A && "borderRadius" in A && "colors" in A ? d(A) : console.error("Invalid preset structure:", A);
     } else
       console.error("Preset not found:", r);
   }, f = useDebouncedCallback(
-    (y, B) => {
+    (y, A) => {
       d(() => ({
         ...c,
         fontFamily: {
           ...c.fontFamily,
-          [y.replace(/font-/g, "")]: B
+          [y.replace(/font-/g, "")]: A
         }
       }));
     },
     [c],
     200
-  ), x = useDebouncedCallback(
+  ), h = useDebouncedCallback(
     (y) => {
       d(() => ({
         ...c,
@@ -4189,35 +4222,35 @@ const getBlockRuntimeProps = memoize((o) => {
     [c],
     200
   ), b = useDebouncedCallback(
-    (y, B) => {
+    (y, A) => {
       d(() => {
-        const E = get(c, `colors.${y}`);
-        return n ? set(E, 1, B) : set(E, 0, B), {
+        const j = get(c, `colors.${y}`);
+        return n ? set(j, 1, A) : set(j, 0, A), {
           ...c,
           colors: {
             ...c.colors,
-            [y]: E
+            [y]: j
           }
         };
       });
     },
     [c],
     200
-  ), h = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([B]) => {
-    const E = get(c, `colors.${B}.${n ? 1 : 0}`);
+  ), x = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([A]) => {
+    const j = get(c, `colors.${A}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: E,
-          onChange: (w) => b(B, w)
+          value: j,
+          onChange: (C) => b(A, C)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, B);
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: A.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((C) => C.charAt(0).toUpperCase() + C.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 /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("no-scrollbar h-full w-full overflow-y-auto", o), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
       l.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 py-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Presets") }),
@@ -4245,26 +4278,26 @@ const getBlockRuntimeProps = memoize((o) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", o), children: [
-        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([y, B]) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
+        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([y, A]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
             label: y,
-            value: c.fontFamily[y.replace(/font-/g, "")] || B[Object.keys(B)[0]],
-            onChange: (E) => f(y, E)
+            value: c.fontFamily[y.replace(/font-/g, "")] || A[Object.keys(A)[0]],
+            onChange: (j) => f(y, j)
           },
           y
         )) }),
         (p == null ? void 0 : p.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Border Radius") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: x }),
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: h }),
             /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: c.borderRadius })
           ] })
         ] }),
         (p == null ? void 0 : p.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => h(y)) }, n ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => x(y)) }, n ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -4430,55 +4463,380 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       )
     ] })
   ] });
-}, RichTextEditorField = ({ id: o, placeholder: n, value: r, onChange: a, onBlur: l }) => {
-  const i = {
-    toolbar: [
-      ["bold", "italic", "underline", "strike", "blockquote"],
-      [{ list: "ordered" }, { list: "bullet" }],
-      [{ color: [] }, { background: [] }, { align: [] }],
-      ["link", "clean"]
-    ]
-  }, c = [
-    "header",
-    "font",
-    "list",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "blockquote",
-    "color",
-    "background",
-    "align",
-    "link",
-    "image"
-  ], d = useRef(null), p = useRef(null);
-  return useEffect(() => {
-    if (d.current) {
-      const u = d.current.getEditor();
-      p.current.__quill = u;
+};
+function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
+  const [a, l] = React.useState(!1), [i, c] = React.useState([]), [d, p] = React.useState(o);
+  useEffect(() => {
+    a || c([]), p(o);
+  }, [a, o]);
+  const u = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", g = React.useCallback(
+    (h) => {
+      const b = (x) => r === "value" ? x === "value" || x === "object" : r === "array" ? x === "array" : x === r;
+      h.type === "object" ? (c((x) => [...x, h.key]), p(h.value)) : b(h.type) && (n([...i, h.key].join(".")), l(!1));
+    },
+    [i, n, r]
+  ), m = React.useCallback(() => {
+    if (i.length > 0) {
+      const h = i.slice(0, -1);
+      c(h), p(h.reduce((b, x) => b[x], o));
     }
-  }, []), typeof window > "u" ? null : (console.log(r), /* @__PURE__ */ jsx("div", { id: `quill.${o}`, ref: p, children: /* @__PURE__ */ jsx(
-    ReactQuill,
-    {
-      ref: d,
-      id: o,
-      value: r,
-      onBlur: (u) => l(o, u),
-      onChange: (u) => a(u),
-      modules: i,
-      formats: c,
-      placeholder: n,
-      className: "mt-1 rounded-md"
+  }, [i, o]), f = React.useMemo(() => Object.entries(d).map(([h, b]) => ({
+    key: h,
+    value: b,
+    type: u(b)
+  })).filter((h) => r === "value" ? h.type === "value" || h.type === "object" : r === "array" ? h.type === "array" || h.type === "object" : r === "object" ? h.type === "object" : !0), [d, r]);
+  return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          className: "h-5 px-1 py-0 text-[9px] text-muted-foreground",
+          role: "combobox",
+          "aria-expanded": a,
+          children: /* @__PURE__ */ jsx(DatabaseIcon, { className: "h-3 w-3" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: "Add field" })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "z-[1000]! relative mr-3 w-[300px] p-0", children: /* @__PURE__ */ jsxs(Command, { className: "fields-command", children: [
+      /* @__PURE__ */ jsx(CommandInput, { className: "border-none", placeholder: "Search..." }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: "No option found." }),
+        /* @__PURE__ */ jsxs(CommandGroup, { children: [
+          i.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: m, className: "flex items-center text-sm", children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
+            "Back"
+          ] }),
+          f.map((h) => /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              value: h.key,
+              disabled: !1,
+              onSelect: () => g(h),
+              className: "flex items-center justify-between",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: h.key }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  r === "object" && h.type === "object" && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      variant: "ghost",
+                      className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
+                      onClick: (b) => {
+                        b.stopPropagation(), n([...i, h.key].join(".")), l(!1);
+                      },
+                      children: "Select"
+                    }
+                  ),
+                  (h.type === "object" || h.type === "array") && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
+                ] })
+              ]
+            },
+            h.key
+          ))
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+const MenuBar = ({ editor: o, onExpand: n }) => {
+  if (!o)
+    return null;
+  const r = () => {
+    const l = window.prompt("URL");
+    l && o.chain().focus().extendMarkRange("link").setLink({ href: l }).run();
+  }, a = () => {
+    o.chain().focus().unsetLink().run();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mb-1 flex flex-wrap gap-1 rounded-md border border-border p-1", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().toggleBold().run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("bold") }),
+        title: "Bold",
+        children: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().toggleItalic().run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("italic") }),
+        title: "Italic",
+        children: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().toggleUnderline().run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("underline") }),
+        title: "Underline",
+        children: /* @__PURE__ */ jsx(Underline$1, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().toggleStrike().run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("strike") }),
+        title: "Strike",
+        children: /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px self-center bg-border" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().toggleBulletList().run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("bulletList") }),
+        title: "Bullet List",
+        children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().toggleOrderedList().run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("orderedList") }),
+        title: "Ordered List",
+        children: /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px self-center bg-border" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().setTextAlign("left").run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive({ textAlign: "left" }) }),
+        title: "Align Left",
+        children: /* @__PURE__ */ jsx(AlignLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().setTextAlign("center").run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive({ textAlign: "center" }) }),
+        title: "Align Center",
+        children: /* @__PURE__ */ jsx(AlignCenter, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => o.chain().focus().setTextAlign("right").run(),
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive({ textAlign: "right" }) }),
+        title: "Align Right",
+        children: /* @__PURE__ */ jsx(AlignRight, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px self-center bg-border" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: r,
+        className: cn("rounded p-1 hover:bg-muted", { "bg-muted": o.isActive("link") }),
+        title: "Add Link",
+        children: /* @__PURE__ */ jsx(Link$1, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: a,
+        className: cn("rounded p-1 hover:bg-muted"),
+        title: "Remove Link",
+        disabled: !o.isActive("link"),
+        children: /* @__PURE__ */ jsx(Unlink, { className: "h-4 w-4" })
+      }
+    ),
+    n && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px self-center bg-border" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: n,
+          className: "rounded p-1 hover:bg-muted",
+          title: "Open in full screen mode",
+          children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}, RTEModal = ({
+  isOpen: o,
+  onClose: n,
+  id: r,
+  value: a,
+  onChange: l,
+  onBlur: i
+}) => {
+  const c = useRef(null), d = useRef(a || ""), p = usePageExternalData();
+  useEffect(() => {
+    if (o) {
+      const m = document.createElement("style");
+      return m.id = "rte-modal-styles", m.innerHTML = `
+        /* Ensure the NestedPathSelector popover appears above the dialog */
+        .rte-path-selector + [data-radix-popper-content-wrapper],
+        [data-radix-popper-content-wrapper] {
+          z-index: 9999 !important;
+        }
+      `, document.head.appendChild(m), () => {
+        const f = document.getElementById("rte-modal-styles");
+        f && f.remove();
+      };
+    }
+  }, [o]);
+  const u = useEditor({
+    extensions: [
+      StarterKit,
+      Link.configure({
+        openOnClick: !1,
+        HTMLAttributes: {
+          class: "text-primary underline"
+        }
+      }),
+      TextAlign.configure({
+        types: ["heading", "paragraph"],
+        alignments: ["left", "center", "right"],
+        defaultAlignment: "left"
+      }),
+      Underline
+    ],
+    content: a || "",
+    onUpdate: ({ editor: m }) => {
+      const f = m.getHTML();
+      l(f);
+    },
+    onBlur: ({ editor: m }) => {
+      const f = m.getHTML();
+      i(r, f);
+    },
+    editorProps: {
+      attributes: {
+        class: "prose prose-sm focus:outline-none min-h-[300px] p-2 dark:prose-invert prose-p:m-0 prose-blockquote:m-2 prose-blockquote:ml-4 prose-ul:m-0 prose-ol:m-0 prose-li:m-0"
+      }
+    }
+  });
+  useEffect(() => {
+    o && u && (d.current !== a && (d.current = a || "", u.commands.setContent(a || "")), setTimeout(() => {
+      u.commands.focus();
+    }, 100));
+  }, [o, u]), useEffect(() => {
+    c.current && u && (c.current.__chaiRTE = u);
+  }, [u, o]);
+  const g = (m) => {
+    if (!u) return;
+    const f = `{{${m}}}`;
+    u.commands.focus();
+    const { from: h, to: b } = u.state.selection;
+    if (h !== b)
+      u.chain().deleteSelection().insertContent(f).run();
+    else {
+      const { state: y } = u, A = y.selection.from, j = y.doc.textBetween(Math.max(0, A - 1), A), C = y.doc.textBetween(A, Math.min(A + 1, y.doc.content.size));
+      let S = "";
+      A > 0 && j !== " " && !/[.,!?;:]/.test(j) && (S = " ");
+      let B = "";
+      C && C !== " " && !/[.,!?;:]/.test(C) && (B = " "), u.chain().insertContent(S + f + B).run();
     }
-  ) }));
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && n(), 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: [
+        /* @__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 }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { id: `chai-rte-modal-${r}`, ref: c, className: "rounded-md border border-input", children: [
+      /* @__PURE__ */ jsx(MenuBar, { editor: u }),
+      /* @__PURE__ */ jsx(EditorContent, { editor: u, id: `modal-${r}`, className: "p-2" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(Button, { onClick: n, children: "Done" }) })
+  ] }) });
+}, RichTextEditorField = ({ id: o, placeholder: n, value: r, onChange: a, onBlur: l }) => {
+  const i = useRef(null), [c, d] = useState(!1), [p, u] = useState(""), g = useEditor({
+    extensions: [
+      StarterKit,
+      Link.configure({
+        openOnClick: !1,
+        HTMLAttributes: {
+          class: "text-primary underline"
+        }
+      }),
+      TextAlign.configure({
+        types: ["heading", "paragraph"],
+        alignments: ["left", "center", "right"],
+        defaultAlignment: "left"
+      }),
+      Underline
+    ],
+    content: r || "",
+    onUpdate: ({ editor: h }) => {
+      const b = h.getHTML();
+      a(b), c || u(b);
+    },
+    onBlur: ({ editor: h }) => {
+      const b = h.getHTML();
+      l(o, b);
+    },
+    editorProps: {
+      attributes: {
+        class: "prose prose-sm focus:outline-none min-h-[100px] p-1 dark:prose-invert prose-p:m-0 prose-blockquote:m-2 prose-blockquote:ml-4 prose-ul:m-0 prose-ol:m-0 prose-li:m-0"
+      }
+    }
+  });
+  useEffect(() => {
+    i.current.__chaiRTE = g;
+  }, [g]), useEffect(() => {
+    u(r || "");
+  }, [r]);
+  const m = (h) => {
+    a(h);
+  }, f = () => {
+    d(!1), g && g.commands.setContent(p);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { id: `chai-rte-${o}`, ref: i, className: "mt-1 rounded-md border border-input", children: [
+      /* @__PURE__ */ jsx(MenuBar, { editor: g, onExpand: () => d(!0) }),
+      /* @__PURE__ */ jsx(EditorContent, { editor: g, id: o, placeholder: n })
+    ] }) }),
+    c && /* @__PURE__ */ jsx(
+      RTEModal,
+      {
+        isOpen: c,
+        onClose: f,
+        id: o,
+        value: p,
+        onChange: m,
+        onBlur: l
+      }
+    )
+  ] });
 }, PageTypeField = ({
   href: o,
   pageTypes: n,
   onChange: r
 }) => {
   var T;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (k, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [x, b] = useState([]), [h, y] = useState(-1), B = useRef(null), E = (T = n == null ? void 0 : n.find((k) => k.key === u)) == null ? void 0 : T.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (k, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, b] = useState([]), [x, y] = useState(-1), A = useRef(null), j = (T = n == null ? void 0 : n.find((k) => k.key === u)) == null ? void 0 : T.name;
   useEffect(() => {
     if (f(""), b([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const k = split(o, ":"), v = get(k, 1, "page") || "page";
@@ -4487,7 +4845,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
-  const w = useDebouncedCallback(
+  const C = useDebouncedCallback(
     async (k) => {
       if (isEmpty(k))
         b([]);
@@ -4502,17 +4860,17 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   ), S = (k) => {
     const v = ["pageType", u, k.id];
     v[1] && (r(v.join(":")), f(k.name), p(!1), b([]), y(-1));
-  }, A = (k) => {
+  }, B = (k) => {
     switch (k.key) {
       case "ArrowDown":
-        k.preventDefault(), y((v) => v < x.length - 1 ? v + 1 : v);
+        k.preventDefault(), y((v) => v < h.length - 1 ? v + 1 : v);
         break;
       case "ArrowUp":
         k.preventDefault(), y((v) => v > 0 ? v - 1 : v);
         break;
       case "Enter":
-        if (k.preventDefault(), x.length === 0) return;
-        h >= 0 && S(x[h]);
+        if (k.preventDefault(), h.length === 0) return;
+        x >= 0 && S(h[x]);
         break;
       case "Escape":
         k.preventDefault(), _();
@@ -4520,15 +4878,15 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     }
   };
   useEffect(() => {
-    if (h >= 0 && B.current) {
-      const k = B.current.children[h];
+    if (x >= 0 && A.current) {
+      const k = A.current.children[x];
       k == null || k.scrollIntoView({ block: "nearest" });
     }
-  }, [h]);
+  }, [x]);
   const _ = () => {
     f(""), b([]), y(-1), p(!1), r("");
-  }, C = (k) => {
-    f(k), p(!isEmpty(k)), c(!0), w(k);
+  }, w = (k) => {
+    f(k), p(!isEmpty(k)), c(!0), C(k);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (k) => g(k.target.value), children: map(n, (k) => /* @__PURE__ */ jsx("option", { value: k.key, children: k.name }, k.key)) }),
@@ -4538,27 +4896,27 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         {
           type: "text",
           value: m,
-          onChange: (k) => C(k.target.value),
-          onKeyDown: A,
-          placeholder: a(`Search ${E ?? ""}`),
+          onChange: (k) => w(k.target.value),
+          onKeyDown: B,
+          placeholder: a(`Search ${j ?? ""}`),
           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: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(x) || d && isEmpty(x)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(h) || d && isEmpty(h)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(x) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(h) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: B, children: map(x == null ? void 0 : x.slice(0, 20), (k, v) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(h == null ? void 0 : h.slice(0, 20), (k, v) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => S(k),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(k.id) ? "bg-blue-200" : v === h ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(k.id) ? "bg-blue-200" : v === x ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           k.name,
           " ",
@@ -4654,23 +5012,23 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   const m = () => {
     const b = findIndex(u, { _id: g });
     if (b > -1) {
-      const h = (b + 1) % u.length, y = get(u, [h, "_id"]);
+      const x = (b + 1) % u.length, y = get(u, [x, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, f = () => {
     const b = findIndex(u, { _id: g });
     if (b > -1) {
-      const h = (b - 1 + u.length) % u.length, y = get(u, [h, "_id"]);
+      const x = (b - 1 + u.length) % u.length, y = get(u, [x, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
-  }, x = () => {
+  }, h = () => {
     const b = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), h = b == null ? void 0 : b._id;
-    h && (n({ ...o, currentSlide: h }), c([h]));
+    ), x = b == null ? void 0 : b._id;
+    x && (n({ ...o, currentSlide: x }), c([x]));
   };
   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: [
@@ -4687,7 +5045,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: x,
+          onClick: h,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircle, { className: "h-3 w-3 stroke-[2]" }),
@@ -4749,8 +5107,8 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
             className: "text-xs",
             pattern: "[0-9]*",
             onChange: (b) => {
-              let h = b.target.value;
-              h.length && (h = h.replace("-", "")), n({ ...o, autoplayInterval: h });
+              let x = b.target.value;
+              x.length && (x = x.replace("-", "")), n({ ...o, autoplayInterval: x });
             }
           }
         )
@@ -4775,86 +5133,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     ),
     /* @__PURE__ */ jsx(Button, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: r("Open code editor") })
   ] });
-};
-function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
-  const [a, l] = React.useState(!1), [i, c] = React.useState([]), [d, p] = React.useState(o);
-  useEffect(() => {
-    a || c([]), p(o);
-  }, [a, o]);
-  const u = (x) => Array.isArray(x) ? "array" : typeof x == "object" && x !== null ? "object" : "value", g = React.useCallback(
-    (x) => {
-      const b = (h) => r === "value" ? h === "value" || h === "object" : r === "array" ? h === "array" : h === r;
-      x.type === "object" ? (c((h) => [...h, x.key]), p(x.value)) : b(x.type) && (n([...i, x.key].join(".")), l(!1));
-    },
-    [i, n, r]
-  ), m = React.useCallback(() => {
-    if (i.length > 0) {
-      const x = i.slice(0, -1);
-      c(x), p(x.reduce((b, h) => b[h], o));
-    }
-  }, [i, o]), f = React.useMemo(() => Object.entries(d).map(([x, b]) => ({
-    key: x,
-    value: b,
-    type: u(b)
-  })).filter((x) => r === "value" ? x.type === "value" || x.type === "object" : r === "array" ? x.type === "array" || x.type === "object" : r === "object" ? x.type === "object" : !0), [d, r]);
-  return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "sm",
-          variant: "outline",
-          className: "h-5 px-1 py-0 text-[9px] text-muted-foreground",
-          role: "combobox",
-          "aria-expanded": a,
-          children: /* @__PURE__ */ jsx(DatabaseIcon, { className: "h-3 w-3" })
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: "Add field" })
-    ] }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "mr-3 w-[300px] p-0", children: /* @__PURE__ */ jsxs(Command, { className: "fields-command", children: [
-      /* @__PURE__ */ jsx(CommandInput, { className: "border-none", placeholder: "Search..." }),
-      /* @__PURE__ */ jsxs(CommandList, { children: [
-        /* @__PURE__ */ jsx(CommandEmpty, { children: "No option found." }),
-        /* @__PURE__ */ jsxs(CommandGroup, { children: [
-          i.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: m, className: "flex items-center text-sm", children: [
-            /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
-            "Back"
-          ] }),
-          f.map((x) => /* @__PURE__ */ jsxs(
-            CommandItem,
-            {
-              value: x.key,
-              disabled: !1,
-              onSelect: () => g(x),
-              className: "flex items-center justify-between",
-              children: [
-                /* @__PURE__ */ jsx("span", { children: x.key }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  r === "object" && x.type === "object" && /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "sm",
-                      variant: "ghost",
-                      className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
-                      onClick: (b) => {
-                        b.stopPropagation(), n([...i, x.key].join(".")), l(!1);
-                      },
-                      children: "Select"
-                    }
-                  ),
-                  (x.type === "object" || x.type === "array") && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
-                ] })
-              ]
-            },
-            x.key
-          ))
-        ] })
-      ] })
-    ] }) })
-  ] });
-}
-const CustomFieldTemplate = ({
+}, CustomFieldTemplate = ({
   id: o,
   classNames: n,
   label: r,
@@ -4868,77 +5147,56 @@ const CustomFieldTemplate = ({
   formData: g,
   onChange: m
 }) => {
-  const { selectedLang: f, fallbackLang: x, languages: b } = useLanguages(), h = isEmpty(b) ? "" : isEmpty(f) ? x : f, y = get(LANGUAGES, h, h), B = usePageExternalData(), E = useSelectedBlock(), w = useRegisteredChaiBlocks(), S = get(w, [E == null ? void 0 : E._type, "i18nProps"], []) || [], [A, _] = useState(null), C = useCallback(
+  const { selectedLang: f, fallbackLang: h, languages: b } = useLanguages(), x = isEmpty(b) ? "" : isEmpty(f) ? h : f, y = get(LANGUAGES, x, x), A = usePageExternalData(), j = useSelectedBlock(), C = useRegisteredChaiBlocks(), S = get(C, [j == null ? void 0 : j._type, "i18nProps"], []) || [], [B, _] = useState(null), w = useCallback(
     (v) => {
-      const N = (j) => /[.,!?;:]/.test(j), I = (j, R, M) => {
-        let L = "", $ = "";
-        const O = R > 0 ? j[R - 1] : "", H = R < j.length ? j[R] : "";
-        return R > 0 && (O === "." || !N(O) && O !== " ") && (L = " "), R < j.length && !N(H) && H !== " " && ($ = " "), {
-          text: L + M + $,
-          prefixLength: L.length,
-          suffixLength: $.length
+      const N = (E) => /[.,!?;:]/.test(E), I = (E, D, M) => {
+        let R = "", O = "";
+        const $ = D > 0 ? E[D - 1] : "", H = D < E.length ? E[D] : "";
+        return D > 0 && ($ === "." || !N($) && $ !== " ") && (R = " "), D < E.length && !N(H) && H !== " " && (O = " "), {
+          text: R + M + O,
+          prefixLength: R.length,
+          suffixLength: O.length
         };
-      }, P = document.getElementById(o);
-      if (!P) return;
-      const D = document.getElementById(`quill.${o}`);
-      if (D && "__quill" in D) {
-        const j = D.__quill;
-        if (j) {
-          const R = `{{${v}}}`;
-          j.focus();
-          let M = j.getSelection();
-          if (M || (M = j.getSelection(!0)), M)
-            if (M.length > 0) {
-              const L = M.index;
-              j.deleteText(M.index, M.length), j.setSelection(L, 0);
-              const $ = j.getText(), {
-                text: O,
-                prefixLength: H,
-                suffixLength: V
-              } = I($, L, R);
-              j.insertText(L, O), j.setSelection(L + H + R.length + V, 0);
-            } else {
-              const L = M.index;
-              j.setSelection(L, 0);
-              const $ = j.getText(), {
-                text: O,
-                prefixLength: H,
-                suffixLength: V
-              } = I($, L, R);
-              j.insertText(L, O), j.setSelection(L + H + R.length + V, 0);
-            }
+      }, L = document.getElementById(o);
+      if (!L) return;
+      const P = document.getElementById(`chai-rte-${o}`) || document.getElementById(`chai-rte-modal-${o}`);
+      if (P && (P.querySelector(".ProseMirror") || P.__chaiRTE)) {
+        const E = P.__chaiRTE;
+        if (E) {
+          const D = `{{${v}}}`;
+          E.commands.focus();
+          const { from: M, to: R } = E.state.selection;
+          if (M !== R)
+            E.chain().deleteSelection().insertContent(D).run();
           else {
-            const L = j.getLength();
-            j.setSelection(L - 1, 0);
-            const $ = j.getText(), {
-              text: O,
-              prefixLength: H,
-              suffixLength: V
-            } = I($, L - 1, R);
-            j.insertText(L - 1, O), j.setSelection(L - 1 + H + R.length + V, 0);
+            const { state: $ } = E, H = $.selection.from, F = $.doc.textBetween(Math.max(0, H - 1), H), U = $.doc.textBetween(H, Math.min(H + 1, $.doc.content.size));
+            let z = "";
+            H > 0 && F !== " " && !N(F) && (z = " ");
+            let W = "";
+            U && U !== " " && !N(U) && (W = " "), E.chain().insertContent(z + D + W).run();
           }
-          setTimeout(() => m(j.root.innerHTML, {}, o), 200);
+          setTimeout(() => m(E.getHTML(), {}, o), 100);
           return;
         }
       } else {
-        const j = P, R = j.selectionStart || 0, M = j.value || "", L = j.selectionEnd || R;
-        if (L > R) {
-          const F = `{{${v}}}`, { text: z } = I(M, R, F), W = M.slice(0, R) + z + M.slice(L);
+        const E = L, D = E.selectionStart || 0, M = E.value || "", R = E.selectionEnd || D;
+        if (R > D) {
+          const U = `{{${v}}}`, { text: z } = I(M, D, U), W = M.slice(0, D) + z + M.slice(R);
           m(W, {}, o);
           return;
         }
-        const O = `{{${v}}}`, { text: H } = I(M, R, O), V = M.slice(0, R) + H + M.slice(R);
-        m(V, {}, o);
+        const $ = `{{${v}}}`, { text: H } = I(M, D, $), F = M.slice(0, D) + H + M.slice(D);
+        m(F, {}, o);
       }
     },
-    [o, m, g, E == null ? void 0 : E._id]
+    [o, m, g, j == null ? void 0 : j._id]
   );
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
   const k = S == null ? void 0 : S.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const v = A === o;
+    const v = B === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
@@ -4974,7 +5232,7 @@ const CustomFieldTemplate = ({
         ] }),
         p && u.type !== "object" ? " *" : null
       ] }),
-      u.type === "string" && !u.enum && !u.oneOf && B && /* @__PURE__ */ jsx(NestedPathSelector, { data: B, onSelect: C, dataType: "value" })
+      u.type === "string" && !u.enum && !u.oneOf && A && /* @__PURE__ */ jsx(NestedPathSelector, { data: A, onSelect: w, dataType: "value" })
     ] }),
     c,
     a,
@@ -5042,35 +5300,35 @@ const CustomFieldTemplate = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), x = ({ formData: A }, _, C) => {
-    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(A, _) }, C);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: B }, _, w) => {
+    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(B, _) }, w);
   }, b = useCallback(
-    debounce(({ formData: A }, _, C) => {
-      x({ formData: A }, _, C), d(A);
+    debounce(({ formData: B }, _, w) => {
+      h({ formData: B }, _, w), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), h = ({ formData: A }, _) => {
-    _ && (r([n._id], { [_]: get(A, _) }), b({ formData: A }, _, { [_]: get(c, _) }));
-  }, y = ({ formData: A }, _) => {
-    _ && (r([g._id], { [_]: get(A, _) }), b({ formData: A }, _, { [_]: get(c, _) }));
+  ), x = ({ formData: B }, _) => {
+    _ && (r([n._id], { [_]: get(B, _) }), b({ formData: B }, _, { [_]: get(c, _) }));
+  }, y = ({ formData: B }, _) => {
+    _ && (r([g._id], { [_]: get(B, _) }), b({ formData: B }, _, { [_]: get(c, _) }));
   };
   keys(get(i, "_bindings", {}));
-  const { schema: B, uiSchema: E } = useMemo(() => {
-    const A = n == null ? void 0 : n._type;
-    if (A)
-      return getBlockFormSchemas(A);
-  }, [n]), { wrapperSchema: w, wrapperUiSchema: S } = useMemo(() => {
+  const { schema: A, uiSchema: j } = useMemo(() => {
+    const B = n == null ? void 0 : n._type;
+    if (B)
+      return getBlockFormSchemas(B);
+  }, [n]), { wrapperSchema: C, wrapperUiSchema: S } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const A = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: C = {} } = getBlockFormSchemas(A);
-    return { wrapperSchema: _, wrapperUiSchema: C };
+    const B = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
+    return { wrapperSchema: _, wrapperUiSchema: w };
   }, [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((A) => !A),
+          onClick: () => u((B) => !B),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -5091,19 +5349,19 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: y,
           formData: f,
-          schema: w,
+          schema: C,
           uiSchema: S
         }
       ) })
     ] }),
-    isEmpty(B) ? null : /* @__PURE__ */ jsx(
+    isEmpty(A) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
-        onChange: h,
+        onChange: x,
         formData: i,
-        schema: B,
-        uiSchema: E
+        schema: A,
+        uiSchema: j
       }
     ),
     (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsx(GlobalBlockSettings, {}) : null
@@ -5194,31 +5452,31 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
     ] }) }) })
   ] });
 }, Breakpoints$1 = ({ openDelay: o = 400, canvas: n = !1 }) => {
-  const [r, , a] = useScreenSizeWidth(), [l, i] = useCanvasDisplayWidth(), [c, d] = useSelectedBreakpoints(), p = c, u = d, { t: g } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (h) => {
-    p.includes(h) ? p.length > 2 && u(p.filter((y) => y !== h)) : u((y) => [...y, h]);
-  }, x = (h) => {
-    n || a(h), i(h);
+  const [r, , a] = useScreenSizeWidth(), [l, i] = useCanvasDisplayWidth(), [c, d] = useSelectedBreakpoints(), p = c, u = d, { t: g } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (x) => {
+    p.includes(x) ? p.length > 2 && u(p.filter((y) => y !== x)) : u((y) => [...y, x]);
+  }, h = (x) => {
+    n || a(x), i(x);
   }, b = getBreakpointValue(n ? l : r).toLowerCase();
-  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (h) => /* @__PURE__ */ createElement(
+  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (x) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
-      ...h,
-      onClick: x,
-      key: h.breakpoint,
+      ...x,
+      onClick: h,
+      key: x.breakpoint,
       currentBreakpoint: b
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
-      m.filter((h) => includes(p, toUpper(h.breakpoint))),
-      (h) => /* @__PURE__ */ createElement(
+      m.filter((x) => includes(p, toUpper(x.breakpoint))),
+      (x) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
           canvas: n,
           openDelay: o,
-          ...h,
-          onClick: x,
-          key: h.breakpoint,
+          ...x,
+          onClick: h,
+          key: x.breakpoint,
           currentBreakpoint: b
         }
       )
@@ -5228,15 +5486,15 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
         /* @__PURE__ */ jsx(DropdownMenuLabel, { children: g("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(m, (h) => /* @__PURE__ */ jsx(
+        map(m, (x) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
-            disabled: h.breakpoint === "xs",
-            onCheckedChange: () => f(toUpper(h.breakpoint)),
-            checked: includes(p, toUpper(h.breakpoint)),
-            children: g(h.title)
+            disabled: x.breakpoint === "xs",
+            onCheckedChange: () => f(toUpper(x.breakpoint)),
+            checked: includes(p, toUpper(x.breakpoint)),
+            children: g(x.title)
           },
-          h.breakpoint
+          x.breakpoint
         ))
       ] })
     ] })
@@ -5325,8 +5583,8 @@ const AskAIStyles = ({ blockId: o }) => {
     (f = d.current) == null || f.focus();
   }, []);
   const m = (f) => {
-    const { usage: x } = f || {};
-    !l && x && g(x), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: h } = f || {};
+    !l && h && g(h), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -5382,24 +5640,24 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var I;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), f = useBuilderProp("askAiCallBack", null), [x, b] = useState(""), h = (I = first(d)) == null ? void 0 : I.prop, { classes: y } = getSplitChaiClasses(get(p, h, "")), B = y.split(" ").filter((P) => !isEmpty(P)), E = () => {
-    const P = x.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(m, P, !0), b("");
-  }, [w, S] = useState([]), A = ({ value: P }) => {
-    const D = P.trim().toLowerCase(), j = D.match(/.+:/g);
-    let R = [];
-    if (j && j.length > 0) {
-      const [M] = j, L = D.replace(M, "");
-      R = i.search(L).map((O) => ({
-        ...O,
-        item: { ...O.item, name: M + O.item.name }
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), f = useBuilderProp("askAiCallBack", null), [h, b] = useState(""), x = (I = first(d)) == null ? void 0 : I.prop, { classes: y } = getSplitChaiClasses(get(p, x, "")), A = y.split(" ").filter((L) => !isEmpty(L)), j = () => {
+    const L = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(m, L, !0), b("");
+  }, [C, S] = useState([]), B = ({ value: L }) => {
+    const P = L.trim().toLowerCase(), E = P.match(/.+:/g);
+    let D = [];
+    if (E && E.length > 0) {
+      const [M] = E, R = P.replace(M, "");
+      D = i.search(R).map(($) => ({
+        ...$,
+        item: { ...$.item, name: M + $.item.name }
       }));
     } else
-      R = i.search(D);
-    return S(map(R, "item"));
+      D = i.search(P);
+    return S(map(D, "item"));
   }, _ = () => {
     S([]);
-  }, C = (P) => P.name, T = (P) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: P.name }), k = useMemo(
+  }, w = (L) => L.name, T = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), k = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -5407,24 +5665,24 @@ function ManualClasses() {
       autoCapitalize: "off",
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
-      value: x,
-      onKeyDown: (P) => {
-        P.key === "Enter" && x.trim() !== "" && E();
+      value: h,
+      onKeyDown: (L) => {
+        L.key === "Enter" && h.trim() !== "" && j();
       },
-      onChange: (P, { newValue: D }) => b(D),
+      onChange: (L, { newValue: P }) => b(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [x, c, o]
-  ), v = (P) => {
+    [h, c, o]
+  ), v = (L) => {
     debugger;
-    const D = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(m, [P]), u(m, D, !0), r(""), l(-1);
+    const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    g(m, [L]), u(m, P, !0), r(""), l(-1);
   }, N = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(B.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(A.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: [
@@ -5447,10 +5705,10 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: w,
-          onSuggestionsFetchRequested: A,
+          suggestions: C,
+          onSuggestionsFetchRequested: B,
           onSuggestionsClearRequested: _,
-          getSuggestionValue: C,
+          getSuggestionValue: w,
           renderSuggestion: T,
           inputProps: k,
           containerProps: {
@@ -5468,45 +5726,45 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: E,
-          disabled: x.trim() === "",
+          onClick: j,
+          disabled: h.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: B.map(
-      (P, D) => a === D ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: A.map(
+      (L, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: n,
-          onChange: (j) => r(j.target.value),
+          onChange: (E) => r(E.target.value),
           onBlur: () => {
-            v(P);
+            v(L);
           },
-          onKeyDown: (j) => {
-            j.key === "Enter" && v(P);
+          onKeyDown: (E) => {
+            E.key === "Enter" && v(L);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
         },
-        P
+        L
       ) : /* @__PURE__ */ jsxs(
         "button",
         {
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
           children: [
-            P,
-            n !== P && /* @__PURE__ */ jsx(
+            L,
+            n !== L && /* @__PURE__ */ jsx(
               Cross2Icon,
               {
-                onClick: () => g(m, [P], !0),
+                onClick: () => g(m, [L], !0),
                 className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
               }
             )
           ]
         },
-        P
+        L
       )
     ) })
   ] });
@@ -5848,8 +6106,8 @@ const COLOR_PROP = {
 }, ColorChoice = ({ property: o, onChange: n }) => {
   const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), f = useCallback(
     // eslint-disable-next-line no-shadow
-    (h) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(h) ? (c([]), p({ color: h })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: h, shade: y.shade ? y.shade : "500" })));
+    (x) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (c([]), p({ color: x })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: x, shade: y.shade ? y.shade : "500" })));
     },
     [c, p]
   );
@@ -5858,10 +6116,10 @@ const COLOR_PROP = {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const x = useCallback(
+  const h = useCallback(
     // eslint-disable-next-line no-shadow
-    (h) => {
-      p({ color: g, shade: h });
+    (x) => {
+      p({ color: g, shade: x });
     },
     [g]
   );
@@ -5912,7 +6170,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: x, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: h, options: i }) })
   ] });
 }, IconChoices = ({ property: o, onChange: n }) => {
   const { getClasses: r } = useTailwindClassList(), a = r(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
@@ -6109,7 +6367,7 @@ const COLOR_PROP = {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, b] = useState(!1), [h, y] = useState(""), [B, E] = useState(!1), [w, S] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, b] = useState(!1), [x, y] = useState(""), [A, j] = useState(!1), [C, S] = useState(!1);
   useEffect(() => {
     const { value: k, unit: v } = getClassValueAndUnit(i);
     if (v === "") {
@@ -6118,7 +6376,7 @@ const COLOR_PROP = {
     }
     f(v), l(v === "class" || isEmpty(k) ? "" : k);
   }, [i, p, u]);
-  const A = useThrottledCallback((k) => c(k), [c], THROTTLE_TIME), _ = useThrottledCallback((k) => c(k, !1), [c], THROTTLE_TIME), C = useCallback(
+  const B = useThrottledCallback((k) => c(k), [c], THROTTLE_TIME), _ = useThrottledCallback((k) => c(k, !1), [c], THROTTLE_TIME), w = useCallback(
     (k = !1) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
@@ -6127,15 +6385,15 @@ const COLOR_PROP = {
       }
       const N = get(v, "unit") !== "" ? get(v, "unit") : m;
       if (N === "auto" || N === "none") {
-        A(`${d}${N}`);
+        B(`${d}${N}`);
         return;
       }
       if (get(v, "value") === "")
         return;
-      const P = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      k ? _(P) : A(P);
+      const L = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      k ? _(L) : B(L);
     },
-    [A, _, a, m, d, u]
+    [B, _, a, m, d, u]
   ), T = useCallback(
     (k) => {
       const v = getUserInputValues(`${a}`, u);
@@ -6144,15 +6402,15 @@ const COLOR_PROP = {
         return;
       }
       if (k === "auto" || k === "none") {
-        A(`${d}${k}`);
+        B(`${d}${k}`);
         return;
       }
       if (get(v, "value") === "")
         return;
-      const N = get(v, "unit") !== "" ? get(v, "unit") : k, P = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      A(P);
+      const N = get(v, "unit") !== "" ? get(v, "unit") : k, L = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      B(L);
     },
-    [A, a, d, u]
+    [B, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -6167,14 +6425,14 @@ const COLOR_PROP = {
       /* @__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 ${B ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${A ? "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: (k) => {
-            k.key === "Enter" && C();
+            k.key === "Enter" && w();
           },
           onKeyDown: (k) => {
             if (k.keyCode !== 38 && k.keyCode !== 40)
@@ -6183,13 +6441,13 @@ const COLOR_PROP = {
             const v = parseInt$1(k.target.value);
             let N = isNaN$1(v) ? 0 : v;
             k.keyCode === 38 && (N += 1), k.keyCode === 40 && (N -= 1);
-            const I = `${N}`, D = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            _(D);
+            const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+            _(P);
           },
           onKeyUp: (k) => {
-            w && (k.preventDefault(), S(!1));
+            C && (k.preventDefault(), S(!1));
           },
-          onBlur: () => C(),
+          onBlur: () => w(),
           onChange: (k) => {
             b(!1), l(k.target.value);
           },
@@ -6197,10 +6455,10 @@ const COLOR_PROP = {
             var v;
             (v = k == null ? void 0 : k.target) == null || v.select(), r(!1);
           },
-          value: B ? h : a,
+          value: A ? x : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            x ? "border-red-500 text-red-500" : "border-foreground/20"
+            h ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6229,15 +6487,15 @@ const COLOR_PROP = {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || B ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || A ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => E(!0),
+        onDragStart: () => j(!0),
         onDragEnd: (k) => {
-          if (y(() => ""), E(!1), isEmpty(k))
+          if (y(() => ""), j(!1), isEmpty(k))
             return;
           const v = `${k}`, I = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          A(I);
+          B(I);
         },
         onDrag: (k) => {
           if (isEmpty(k))
@@ -6341,23 +6599,23 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), f = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), h = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
-    (_, C = !0) => {
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), x = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+    (_, w = !0) => {
       const T = { dark: p, mq: g, mod: u, cls: _, property: l, fullCls: "" };
       (p || u !== "") && (T.mq = "xs");
       const k = generateFullClsName(T);
-      f(b, [k], C);
+      f(b, [k], w);
     },
     [b, p, g, u, l, f]
-  ), B = useCallback(() => {
-    x(b, [h], !0);
-  }, [b, h, x]), E = useMemo(() => canChangeClass(m, g), [m, g]);
+  ), A = useCallback(() => {
+    h(b, [x], !0);
+  }, [b, x, h]), j = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(E, m);
-  }, [E, i, m]);
-  const [, , w] = useScreenSizeWidth(), S = useCallback(
+    i(j, m);
+  }, [j, i, m]);
+  const [, , C] = useScreenSizeWidth(), S = useCallback(
     (_) => {
-      w({
+      C({
         xs: 400,
         sm: 640,
         md: 800,
@@ -6366,10 +6624,10 @@ const COLOR_PROP = {
         "2xl": 1920
       }[_]);
     },
-    [w]
-  ), A = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: E, canReset: m && A, 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 && !A ? "text-foreground" : ""}`, children: n(a) }) }),
+    [C]
+  ), B = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: j, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !B ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -6388,7 +6646,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${h ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : E && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : j && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6438,18 +6696,18 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: f, key: x }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            n.map(({ label: f, key: h }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(x),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => u(h),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${h === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: m(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: m(h) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, x, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, h, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -6595,10 +6853,10 @@ function BlockStyling() {
       const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
       let f = parseFloat(i.dragStartValue);
       f = isNaN(f) ? 0 : f;
-      let x = MAPPER[i.dragUnit];
-      (startsWith(m, "scale") || m === "opacity") && (x = 10);
-      let h = (i.dragStartY - u.pageY) / x + f;
-      g && h < 0 && (h = 0), m === "opacity" && h > 1 && (h = 1), i.onDrag(`${h}`), l(`${h}`);
+      let h = MAPPER[i.dragUnit];
+      (startsWith(m, "scale") || m === "opacity") && (h = 10);
+      let x = (i.dragStartY - u.pageY) / h + f;
+      g && x < 0 && (x = 0), m === "opacity" && x > 1 && (x = 1), i.onDrag(`${x}`), l(`${x}`);
     },
     [i],
     50
@@ -6642,12 +6900,12 @@ const CoreBlock = ({
 }) => {
   const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), f = () => {
     if (has(o, "blocks")) {
-      const h = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(h), r || null, a);
+      const x = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(x), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, x = useFeature("dnd"), { t: b } = useTranslation();
+  }, h = useFeature("dnd"), { t: b } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
@@ -6655,12 +6913,12 @@ const CoreBlock = ({
         disabled: n,
         onClick: f,
         type: "button",
-        onDragStart: (h) => {
-          h.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), h.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (x) => {
+          x.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), x.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             g([]), m();
           }, 200);
         },
-        draggable: x ? "true" : "false",
+        draggable: h ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
@@ -6853,22 +7111,22 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, f, x, b, h, y, B, E;
+  var m, f, h, b, x, y, A, j;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
     return isEmpty(get(r, "content", "")) ? [] : n && shouldAddText(n.node, n.block) ? (set(n, "block.content", get(r, "content", "")), []) : { ...a, _type: "Text", content: get(r, "content", "") };
   const l = get(r, "attributes", []), i = l.find(
-    (w) => w.key === "data-chai-richtext" || w.key === "chai-richtext"
+    (C) => C.key === "data-chai-richtext" || C.key === "chai-richtext"
   ), c = l.find(
-    (w) => w.key === "data-chai-lightbox" || w.key === "chai-lightbox"
+    (C) => C.key === "data-chai-lightbox" || C.key === "chai-lightbox"
   ), d = l.find(
-    (w) => w.key === "data-chai-dropdown" || w.key === "chai-dropdown"
+    (C) => C.key === "data-chai-dropdown" || C.key === "chai-dropdown"
   ), p = l.find(
-    (w) => w.key === "data-chai-dropdown-button" || w.key === "chai-dropdown-button"
+    (C) => C.key === "data-chai-dropdown-button" || C.key === "chai-dropdown-button"
   ), u = l.find(
-    (w) => w.key === "data-chai-dropdown-content" || w.key === "chai-dropdown-content"
+    (C) => C.key === "data-chai-dropdown-content" || C.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -6876,13 +7134,13 @@ const CoreBlock = ({
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const w = r.attributes.find((S) => includes(NAME_ATTRIBUTES, S.key));
-    w && (a._name = w.value);
+    const C = r.attributes.find((S) => includes(NAME_ATTRIBUTES, S.key));
+    C && (a._name = C.value);
   }
   if (i)
     return a.content = stringify(r.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 w = [
+    const C = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -6896,42 +7154,42 @@ const CoreBlock = ({
       ...a,
       href: ((m = l.find((S) => S.key === "href")) == null ? void 0 : m.value) || "",
       hrefType: ((f = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : f.value) || "video",
-      autoplay: ((x = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
-      maxWidth: ((h = (b = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : b.value) == null ? void 0 : h.replace("px", "")) || "",
+      autoplay: ((h = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : h.value) === "true" ? "true" : "false",
+      maxWidth: ((x = (b = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : b.value) == null ? void 0 : x.replace("px", "")) || "",
       backdropColor: ((y = l.find((S) => S.key === "data-overlay")) == null ? void 0 : y.value) || "",
-      galleryName: ((B = l.find((S) => S.key === "data-gall")) == null ? void 0 : B.value) || ""
-    }, forEach(w, (S) => {
+      galleryName: ((A = l.find((S) => S.key === "data-gall")) == null ? void 0 : A.value) || ""
+    }, forEach(C, (S) => {
       has(a, `styles_attrs.${S}`) && delete a.styles_attrs[S];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const w = filter(r.children || [], (A) => (A == null ? void 0 : A.tagName) !== "span");
-    a.content = getTextContent(w);
+    const C = filter(r.children || [], (B) => (B == null ? void 0 : B.tagName) !== "span");
+    a.content = getTextContent(C);
     const S = find(
       r.children || [],
-      (A) => (A == null ? void 0 : A.tagName) === "span" && some(A.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg")
+      (B) => (B == null ? void 0 : B.tagName) === "span" && some(B.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg")
     );
     if (S) {
-      const A = find(S.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg");
-      if (A) {
-        a.icon = stringify([A]);
-        const { height: _, width: C } = getSvgDimensions(A, "16px", "16px");
-        a.iconHeight = _, a.iconWidth = C;
+      const B = find(S.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg");
+      if (B) {
+        a.icon = stringify([B]);
+        const { height: _, width: w } = getSvgDimensions(B, "16px", "16px");
+        a.iconHeight = _, a.iconWidth = w;
       }
     }
     return [a];
   }
   if (a._type === "Input") {
-    const w = a.inputType || "text";
-    w === "checkbox" ? set(a, "_type", "Checkbox") : w === "radio" && set(a, "_type", "Radio");
+    const C = a.inputType || "text";
+    C === "checkbox" ? set(a, "_type", "Checkbox") : C === "radio" && set(a, "_type", "Radio");
   } else if (r.tagName === "video" || r.tagName === "iframe") {
-    const w = stringify([r]);
-    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];
+    const C = stringify([r]);
+    return hasVideoEmbed(C) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(C)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = C, [a];
   } else if (r.tagName === "svg") {
-    const w = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), A = get(w, "value") ? `[${get(w, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", C = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${_} h-${A}`, C)}`.trim(), r.attributes = filter(r.attributes, (T) => !includes(["style", "width", "height", "class"], T.key)), a.icon = stringify([r]), [a];
-  } else if (r.tagName == "option" && n && ((E = n.block) == null ? void 0 : E._type) === "Select")
+    const C = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), B = get(C, "value") ? `[${get(C, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", w = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${_} h-${B}`, w)}`.trim(), r.attributes = filter(r.attributes, (T) => !includes(["style", "width", "height", "class"], T.key)), a.icon = stringify([r]), [a];
+  } else if (r.tagName == "option" && n && ((j = n.block) == null ? void 0 : j._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
       ...getAttrs(r)
@@ -6981,20 +7239,20 @@ const CoreBlock = ({
   ] });
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
   var b;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (b = find(c, (h) => h._id === r)) == null ? void 0 : b._type;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (b = find(c, (x) => x._id === r)) == null ? void 0 : b._type;
   useEffect(() => {
-    const h = setTimeout(() => {
+    const x = setTimeout(() => {
       var y;
       (y = u.current) == null || y.focus();
     }, 0);
-    return () => clearTimeout(h);
+    return () => clearTimeout(x);
   }, [g]);
   const f = d ? values(n).filter(
-    (h) => {
-      var y, B;
-      return (((y = h.label) == null ? void 0 : y.toLowerCase()) + " " + ((B = h.type) == null ? void 0 : B.toLowerCase())).includes(d.toLowerCase());
+    (x) => {
+      var y, A;
+      return (((y = x.label) == null ? void 0 : y.toLowerCase()) + " " + ((A = x.type) == null ? void 0 : A.toLowerCase())).includes(d.toLowerCase());
     }
-  ) : n, x = d ? o.filter((h) => reject(filter(values(f), { group: h }), { hidden: !0 }).length > 0) : o.filter((h) => reject(filter(values(n), { group: h }), { hidden: !0 }).length > 0);
+  ) : n, h = d ? o.filter((x) => reject(filter(values(f), { group: x }), { hidden: !0 }).length > 0) : o.filter((x) => reject(filter(values(n), { group: x }), { hidden: !0 }).length > 0);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-2xl 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,
@@ -7003,21 +7261,21 @@ const CoreBlock = ({
         type: "search",
         placeholder: i("Search blocks..."),
         value: d,
-        onChange: (h) => p(h.target.value)
+        onChange: (x) => p(x.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: x.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(ScrollArea, { className: "h-full", children: h.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: sortBy(
-      x,
-      (h) => CORE_GROUPS.indexOf(h) === -1 ? 99 : CORE_GROUPS.indexOf(h)
-    ).map((h) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(h.toLowerCase())) }),
+      h,
+      (x) => CORE_GROUPS.indexOf(x) === -1 ? 99 : CORE_GROUPS.indexOf(x)
+    ).map((x) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(x.toLowerCase())) }),
       /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: React__default.Children.toArray(
-        reject(filter(values(f), { group: h }), { hidden: !0 }).map((y) => /* @__PURE__ */ jsx(
+        reject(filter(values(f), { group: x }), { hidden: !0 }).map((y) => /* @__PURE__ */ jsx(
           CoreBlock,
           {
             parentId: r,
@@ -7028,7 +7286,7 @@ const CoreBlock = ({
           y.type
         ))
       ) })
-    ] }, h)) }) })
+    ] }, x)) }) })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
   className: o,
@@ -7039,7 +7297,7 @@ const CoreBlock = ({
   const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), u = useBuilderProp("addBlocksDialogTabs", []), g = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full w-full flex-col overflow-hidden", o), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
     n ? /* @__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") })
@@ -7078,7 +7336,7 @@ const CoreBlock = ({
     const u = p.target.value;
     c(u), n(u);
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("relative inline-block w-full", l), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: cn$1("relative inline-block w-full", l), children: /* @__PURE__ */ jsxs(
     "select",
     {
       className: "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",
@@ -7119,18 +7377,18 @@ const BlockCard = ({
   parentId: r = 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")), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), b = (B) => {
-    const E = has(B, "styles_attrs.data-page-section");
-    return B._type === "Box" && E;
-  }, h = useCallback(
-    async (B) => {
-      if (B.stopPropagation(), has(o, "component")) {
+  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")), f = useFeature("dnd"), [, h] = useAtom$1(draggedBlockAtom), b = (A) => {
+    const j = has(A, "styles_attrs.data-page-section");
+    return A._type === "Box" && j;
+  }, x = useCallback(
+    async (A) => {
+      if (A.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const E = await c(n, o);
-      isEmpty(E) || p(syncBlocksWithDefaults(E), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const j = await c(n, o);
+      isEmpty(j) || p(syncBlocksWithDefaults(j), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, n, r, a]
   );
@@ -7139,26 +7397,26 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : h,
+        } : x,
         draggable: f ? "true" : "false",
-        onDragStart: async (B) => {
-          const E = await c(n, o);
-          let w = r;
-          if (b(first(E)) && (w = null), !isEmpty(E)) {
-            const S = { blocks: E, uiLibrary: !0, parent: w };
-            if (B.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
-              const A = new Image();
-              A.src = o.preview, A.onload = () => {
-                B.dataTransfer.setDragImage(A, 0, 0);
+        onDragStart: async (A) => {
+          const j = await c(n, o);
+          let C = r;
+          if (b(first(j)) && (C = null), !isEmpty(j)) {
+            const S = { blocks: j, uiLibrary: !0, parent: C };
+            if (A.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
+              const B = new Image();
+              B.src = o.preview, B.onload = () => {
+                A.dataTransfer.setDragImage(B, 0, 0);
               };
             } else
-              B.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(S), setTimeout(() => {
+              A.dataTransfer.setDragImage(new Image(), 0, 0);
+            h(S), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
         },
-        className: clsx(
+        className: clsx$1(
           "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-border bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
         ),
         children: [
@@ -7185,9 +7443,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((w) => w.category === "custom"), d = l.find((w) => w.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, f] = useState("Hero"), x = get(g, m, []), b = useRef(null), { t: h } = useTranslation(), y = (w) => {
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((C) => C.category === "custom"), d = l.find((C) => C.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, f] = useState("Hero"), h = get(g, m, []), b = useRef(null), { t: x } = useTranslation(), y = (C) => {
     b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
-      b.current && f(w);
+      b.current && f(C);
     }, 300);
   };
   if (u)
@@ -7195,26 +7453,26 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const B = filter(x, (w, S) => S % 2 === 0), E = filter(x, (w, S) => S % 2 === 1);
+  const A = filter(h, (C, S) => S % 2 === 0), j = filter(h, (C, S) => S % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, 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: h("Groups") }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: x("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: React__default.Children.toArray(
-          map(g, (w, S) => /* @__PURE__ */ jsxs(
+          map(g, (C, S) => /* @__PURE__ */ jsxs(
             "div",
             {
               onMouseEnter: () => y(S),
               onMouseLeave: () => clearTimeout(b.current),
               onClick: () => f(S),
-              className: cn(
+              className: cn$1(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
                 S === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(h(S.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(x(S.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -7231,10 +7489,10 @@ const BlockCard = ({
         children: [
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              B.map((w) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: w, library: d }))
+              A.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
             ) }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              E.map((w) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: w, library: d }))
+              j.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
             ) })
           ] }),
           /* @__PURE__ */ jsx("br", {}),
@@ -7454,53 +7712,53 @@ function BiExpandVertical(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "m12 19.24-4.95-4.95-1.41 1.42L12 22.07l6.36-6.36-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95 1.41-1.42L12 1.93 5.64 8.29z" }, child: [] }] })(o);
 }
 const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, dragHandle: r }) => {
-  var D;
+  var P;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: f, data: x, isSelected: b, willReceiveDrop: h, isDragging: y, isEditing: B, handleClick: E } = o, w = (j) => {
-    j.stopPropagation(), !i.includes(f) && o.toggle();
-  }, S = (j) => {
-    j.isInternal && (p = j.isOpen, j.isOpen && j.close());
-  }, A = (j) => {
-    j.isInternal && p !== null && (p ? j.open() : j.close(), p = null);
-  }, [_, C] = useAtom$1(currentAddSelection), T = () => {
-    var j;
-    k(), o.parent.isSelected || C((j = o == null ? void 0 : o.parent) == null ? void 0 : j.id);
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: f, data: h, isSelected: b, willReceiveDrop: x, isDragging: y, isEditing: A, handleClick: j } = o, C = (E) => {
+    E.stopPropagation(), !i.includes(f) && o.toggle();
+  }, S = (E) => {
+    E.isInternal && (p = E.isOpen, E.isOpen && E.close());
+  }, B = (E) => {
+    E.isInternal && p !== null && (p ? E.open() : E.close(), p = null);
+  }, [_, w] = useAtom$1(currentAddSelection), T = () => {
+    var E;
+    k(), o.parent.isSelected || w((E = o == null ? void 0 : o.parent) == null ? void 0 : E.id);
   }, k = () => {
-    C(null);
-  }, v = (j) => {
-    k(), j.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), E(j);
+    w(null);
+  }, v = (E) => {
+    k(), E.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), j(E);
   };
   useEffect(() => {
-    const j = setTimeout(() => {
-      h && !o.isOpen && !y && !i.includes(f) && o.toggle();
+    const E = setTimeout(() => {
+      x && !o.isOpen && !y && !i.includes(f) && o.toggle();
     }, 500);
-    return () => clearTimeout(j);
-  }, [h, o, y]);
+    return () => clearTimeout(E);
+  }, [x, o, y]);
   const N = useMemo(() => {
-    const j = Object.keys(x), R = [];
-    for (let M = 0; M < j.length; M++)
-      if (j[M].endsWith("_attrs")) {
-        const L = x[j[M]], $ = Object.keys(L).join("|");
-        $.match(/x-data/) && R.push("data"), $.match(/x-on/) && R.push("event"), $.match(/x-show|x-if/) && R.push("show");
+    const E = Object.keys(h), D = [];
+    for (let M = 0; M < E.length; M++)
+      if (E[M].endsWith("_attrs")) {
+        const R = h[E[M]], O = Object.keys(R).join("|");
+        O.match(/x-data/) && D.push("data"), O.match(/x-on/) && D.push("event"), O.match(/x-show|x-if/) && D.push("show");
       }
-    return R;
-  }, [x]), I = (j, R) => {
-    const M = d.contentDocument || d.contentWindow.document, L = M.querySelector(`[data-block-id=${j}]`);
-    L && L.setAttribute("data-drop", R);
-    const $ = L.getBoundingClientRect(), O = d.getBoundingClientRect();
-    $.top >= O.top && $.left >= O.left && $.bottom <= O.bottom && $.right <= O.right || (M.documentElement.scrollTop = L.offsetTop - O.top);
-  }, P = (j) => {
+    return D;
+  }, [h]), I = (E, D) => {
+    const M = d.contentDocument || d.contentWindow.document, R = M.querySelector(`[data-block-id=${E}]`);
+    R && R.setAttribute("data-drop", D);
+    const O = R.getBoundingClientRect(), $ = d.getBoundingClientRect();
+    O.top >= $.top && O.left >= $.left && O.bottom <= $.bottom && O.right <= $.right || (M.documentElement.scrollTop = R.offsetTop - $.top);
+  }, L = (E) => {
     k();
-    const R = get(o, "parent.id");
-    R !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: R, position: j }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: j });
+    const D = get(o, "parent.id");
+    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: E }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: E });
   };
   return f === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx(
       "div",
       {
-        onClick: () => P(-1),
+        onClick: () => L(-1),
         className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
           /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
@@ -7520,22 +7778,22 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
       "data-node-id": f,
       ref: i.includes(f) ? null : r,
       onDragStart: () => S(o),
-      onDragEnd: () => A(o),
-      onDragOver: (j) => {
-        j.preventDefault(), I(f, "yes");
+      onDragEnd: () => B(o),
+      onDragOver: (E) => {
+        E.preventDefault(), I(f, "yes");
       },
-      onDragLeave: (j) => {
-        j.preventDefault(), I(f, "no");
+      onDragLeave: (E) => {
+        E.preventDefault(), I(f, "no");
       },
-      onDrop: (j) => {
-        j.preventDefault(), I(f, "no");
+      onDrop: (E) => {
+        E.preventDefault(), I(f, "no");
       },
       children: [
-        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((D = o == null ? void 0 : o.parent) == null ? void 0 : D.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
-            onClick: (j) => {
-              j.stopPropagation(), P(o.childIndex);
+            onClick: (E) => {
+              E.stopPropagation(), L(o.childIndex);
             },
             onMouseEnter: T,
             onMouseLeave: k,
@@ -7546,10 +7804,10 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn(
+            className: cn$1(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
               b ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              h && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
+              x && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === _ ? "bg-purple-100" : "",
               y && "opacity-20",
               i.includes(f) ? "opacity-50" : ""
@@ -7560,7 +7818,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                   "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: w, type: "button", children: /* @__PURE__ */ jsx(
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: C, type: "button", children: /* @__PURE__ */ jsx(
                       ChevronRight,
                       {
                         className: `h-3 w-3 stroke-[3] ${b ? "text-slate-200" : "text-slate-400"}`
@@ -7569,16 +7827,16 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsx(TypeIcon, { type: x == null ? void 0 : x._type }),
-                  B ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
+                  A ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
                     "div",
                     {
                       className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                      onDoubleClick: (j) => {
-                        j.stopPropagation(), o.edit(), o.deselect();
+                      onDoubleClick: (E) => {
+                        E.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
-                        /* @__PURE__ */ jsx("span", { children: (x == null ? void 0 : x._name) || (x == null ? void 0 : x._type.split("/").pop()) }),
+                        /* @__PURE__ */ jsx("span", { children: (h == null ? void 0 : h._name) || (h == null ? void 0 : h._type.split("/").pop()) }),
                         N.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
                         N.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
                         N.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
@@ -7588,18 +7846,18 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !i.includes(f) && a.map((j) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                !i.includes(f) && a.map((E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
                       className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                       asChild: !0,
-                      children: React__default.createElement(j.item, { blockId: f })
+                      children: React__default.createElement(E.item, { blockId: f })
                     }
                   ),
-                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: j.tooltip })
+                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: E.tooltip })
                 ] })),
-                canAddChildBlock(x == null ? void 0 : x._type) && !i.includes(f) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(h == null ? void 0 : h._type) && !i.includes(f) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -7615,8 +7873,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (j) => {
-                        j.stopPropagation(), c(f), o.isOpen && o.toggle();
+                      onClick: (E) => {
+                        E.stopPropagation(), c(f), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -7638,7 +7896,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
     "input",
     {
       autoFocus: !0,
-      className: cn(
+      className: cn$1(
         "ml-2 !h-4 w-full rounded-sm border border-border bg-background px-1 text-[11px] leading-tight outline-none",
         o.isSelected ? "text-black dark:text-white" : ""
       ),
@@ -7737,7 +7995,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
       t("Add Block")
     ] })
   ] }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cn("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: cn$1("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxs(
       "div",
       {
         id: "outline-view",
@@ -8281,9 +8539,9 @@ const AIUserPrompt = ({ blockId: o }) => {
     var b;
     (b = m.current) == null || b.focus();
   }, []);
-  const x = (b) => {
-    const { usage: h } = b || {};
-    !l && h && g(h), f.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const h = (b) => {
+    const { usage: x } = b || {};
+    !l && x && g(x), f.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8308,7 +8566,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           className: "w-full",
           rows: 3,
           onKeyDown: (b) => {
-            b.key === "Enter" && (b.preventDefault(), f.current && clearTimeout(f.current), g(void 0), r("content", o, i, x));
+            b.key === "Enter" && (b.preventDefault(), f.current && clearTimeout(f.current), g(void 0), r("content", o, i, h));
           }
         }
       ),
@@ -8318,7 +8576,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              f.current && clearTimeout(f.current), g(void 0), r("content", o, i, x);
+              f.current && clearTimeout(f.current), g(void 0), r("content", o, i, h);
             },
             variant: "default",
             className: "w-fit",
@@ -8351,7 +8609,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         QuickPrompts,
         {
           onClick: (b) => {
-            f.current && clearTimeout(f.current), g(void 0), r("content", o, b, x);
+            f.current && clearTimeout(f.current), g(void 0), r("content", o, b, h);
           }
         }
       )
@@ -8368,8 +8626,8 @@ const AIUserPrompt = ({ blockId: o }) => {
   const f = async () => {
     try {
       d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), m.current.click();
-    } catch (x) {
-      u(x);
+    } catch (h) {
+      u(h);
     } finally {
       d(!1);
     }
@@ -8377,8 +8635,8 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsx(
     Accordion,
     {
-      onValueChange: (x) => {
-        g(x !== "");
+      onValueChange: (h) => {
+        g(h !== "");
       },
       type: "single",
       collapsible: !0,
@@ -8390,12 +8648,12 @@ const AIUserPrompt = ({ blockId: o }) => {
             {
               ref: l,
               value: r,
-              onChange: (x) => a(x.target.value),
+              onChange: (h) => a(h.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (x) => {
-                x.key === "Enter" && (x.preventDefault(), f());
+              onKeyDown: (h) => {
+                h.key === "Enter" && (h.preventDefault(), f());
               }
             }
           ),
@@ -8559,7 +8817,7 @@ const AiAssistant = () => {
 }, DataBinding = () => {
   const o = usePageExternalData(), [n, r] = 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: () => r(!n), children: /* @__PURE__ */ jsx(DatabaseZapIcon, { className: cn("h-4 w-4", n ? "text-green-500" : "text-gray-500") }) }) }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "rounded-full", variant: "ghost", onClick: () => r(!n), children: /* @__PURE__ */ jsx(DatabaseZapIcon, { className: cn$1("h-4 w-4", n ? "text-green-500" : "text-gray-500") }) }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: a("Toggle Data Binding") }) })
   ] }) });
 }, CanvasTopBar = () => {
@@ -8590,11 +8848,11 @@ const AiAssistant = () => {
     ] })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), x = useRef(null), b = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), h = useRef(null), b = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
-  const h = () => {
+  const x = () => {
     if (i.startsWith("@")) {
       f("Attribute keys cannot start with '@'");
       return;
@@ -8604,11 +8862,11 @@ const AiAssistant = () => {
       r(S), l(a), c(""), p(""), f("");
     }
   }, y = (S) => {
-    const A = a.filter((_, C) => C !== S);
-    r(A), l(A);
-  }, B = (S) => {
+    const B = a.filter((_, w) => w !== S);
+    r(B), l(B);
+  }, A = (S) => {
     g(S), c(a[S].key), p(a[S].value);
-  }, E = () => {
+  }, j = () => {
     if (i.startsWith("@")) {
       f("Attribute keys cannot start with '@'");
       return;
@@ -8623,7 +8881,7 @@ const AiAssistant = () => {
       "form",
       {
         onSubmit: (S) => {
-          S.preventDefault(), u !== null ? E() : h();
+          S.preventDefault(), u !== null ? j() : x();
         },
         className: "space-y-3",
         children: [
@@ -8637,7 +8895,7 @@ const AiAssistant = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: x,
+                  ref: h,
                   value: i,
                   onChange: (S) => c(S.target.value),
                   placeholder: "Enter Key",
@@ -8659,7 +8917,7 @@ const AiAssistant = () => {
                   value: d,
                   onChange: (S) => p(S.target.value),
                   onKeyDown: (S) => {
-                    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? E() : h());
+                    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? j() : x());
                   },
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -8672,16 +8930,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, 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: S.key }),
         /* @__PURE__ */ jsx("span", { className: "text-wrap max-w-[200px] 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: () => B(A), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(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: () => y(B), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, A)) })
+    ] }, B)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8879,8 +9137,8 @@ const RootLayout = () => {
     b.preventDefault();
   }, u = (b) => {
     n(o === b ? null : b);
-  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), f = [...g, ...c], x = useBuilderProp("htmlDir", "ltr");
-  return /* @__PURE__ */ jsx("div", { dir: x, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), f = [...g, ...c], h = useBuilderProp("htmlDir", "ltr");
+  return /* @__PURE__ */ jsx("div", { dir: h, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8890,21 +9148,21 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f.map((b, h) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f.map((b, x) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
-                    variant: o === h ? "default" : "ghost",
+                    variant: o === x ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => u(h),
+                    onClick: () => u(x),
                     children: get(b, "icon", null)
                   },
-                  h
+                  x
                 ) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(b.label) }) })
-              ] }, "button" + h)) }),
+              ] }, "button" + x)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((b, h) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(b, {}) }, `sidebar-component-${h}`)) })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((b, x) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(b, {}) }, `sidebar-component-${x}`)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -8973,7 +9231,7 @@ const RootLayout = () => {
   ] }) });
 }, PreviewScreen = () => {
   const [o, n] = usePreviewMode(), { t: r } = useTranslation(), a = useBuilderProp("previewComponent", null);
-  return o ? /* @__PURE__ */ jsxs("div", { className: cn("fixed inset-0 z-[999] bg-background", o ? "block" : "hidden"), children: [
+  return o ? /* @__PURE__ */ jsxs("div", { className: cn$1("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: () => n(!1), children: [
       /* @__PURE__ */ jsx(EyeClosedIcon, {}),
       /* @__PURE__ */ jsx("span", { children: r("Close Preview") })
@@ -9069,9 +9327,9 @@ export {
   generateUUID as generateBlockId,
   getBlocksFromHTML,
   getClassValueAndUnit,
-  Ve as i18n,
-  cn as mergeClasses,
-  Oe as registerChaiBlock,
+  We as i18n,
+  cn$1 as mergeClasses,
+  Fe as registerChaiBlock,
   useAddBlock,
   useAddClassesToBlocks,
   useAskAi,
@@ -9114,7 +9372,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  Me as useTranslation,
+  Ve as useTranslation,
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,