@chaibuilder/sdk 2.0.0-beta.35 → 2.0.0-beta.37

package/dist/core.js

@@ -1,32 +1,32 @@
-var U = Object.defineProperty;
-var F = (o, r, n) => r in o ? U(o, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[r] = n;
-var H = (o, r, n) => (F(o, typeof r != "symbol" ? r + "" : r, n), n);
-import { j as jsxRuntimeExports } from "./jsx-runtime-Sp0orL4X.js";
+var V = Object.defineProperty;
+var U = (o, r, n) => r in o ? V(o, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[r] = n;
+var O = (o, r, n) => U(o, typeof r != "symbol" ? r + "" : r, n);
+import { j as jsxRuntimeExports } from "./jsx-runtime-DGlMoOmv.js";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, useState, Component, Children, Suspense, useRef, memo, createElement, lazy } from "react";
-import { ag as useToast, S as Skeleton, B as Button, L as Label, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, T as Textarea, y as CardFooter, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, b as Switch, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, j as AlertDialog, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, k as AlertDialogTrigger, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-EDKTnqIV.js";
-import { has, find, filter, flatten, map, omit, isString, includes, without, get, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, pick, sortBy, memoize, forEach, unset, chunk, cloneDeep, throttle, reverse, startCase, debounce, capitalize, flatMapDeep, split, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, toUpper, round } from "lodash-es";
+import { ag as useToast, S as Skeleton, B as Button, L as Label, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, T as Textarea, y as CardFooter, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, b as Switch, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, j as AlertDialog, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, k as AlertDialogTrigger, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-CxioWiWD.js";
+import { has, find, filter, flatten, map, omit, isString, includes, without, get, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, pick, sortBy, memoize, forEach, unset, chunk, cloneDeep, throttle, reverse, startCase, debounce, capitalize, flatMapDeep, some, split, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, toUpper, round } from "lodash-es";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
-import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-Ief2hJUZ.js";
+import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as Xe } from "react-i18next";
-import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, b as getChaiThemeCssVariables, a as getThemeFontsLinkMarkup } from "./ChaiThemeFn--DgGggh_.js";
-import { useThrottledCallback, useResizeObserver, useDebouncedCallback, useIntervalEffect } from "@react-hookz/web";
+import { useTranslation as Ie } from "react-i18next";
+import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, b as getChaiThemeCssVariables, a as getThemeFontsLinkMarkup } from "./ChaiThemeFn-BUgkaTMi.js";
+import { useThrottledCallback, useDebouncedCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import TreeModel from "tree-model";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { registerChaiBlock as Ze } from "@chaibuilder/runtime";
+import { registerChaiBlock as De } from "@chaibuilder/runtime";
 import ReactQuill, { Quill } from "react-quill";
 import { useFeature, FlagsProvider } from "flagged";
 import { useHotkeys } from "react-hotkeys-hook";
 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, CardStackPlusIcon, CardStackIcon, ScissorsIcon, 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, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+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, CardStackIcon, CardStackPlusIcon, ScissorsIcon, 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, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 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, R as ROOT_TEMP_KEY } from "./STRINGS-BnWT5XcX.js";
+import { S as STYLES_KEY, R as ROOT_TEMP_KEY } from "./STRINGS-DtEft2kY.js";
 import { Provider } from "react-wrap-balancer";
 import { PlusIcon as PlusIcon$1, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, EyeOff, Eye, X, Plus, ChevronDown, List, Loader, SparklesIcon, SmileIcon, ShuffleIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import ReactDOM from "react-dom";
@@ -42,27 +42,10 @@ import Autosuggest from "react-autosuggest";
 import Fuse from "fuse.js";
 import clsx from "clsx";
 import i18n from "i18next";
-import { default as Qe } from "i18next";
+import { default as Me } from "i18next";
 import { motion } from "framer-motion";
-import "@radix-ui/react-switch";
-import "@radix-ui/react-accordion";
-import "class-variance-authority";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-slot";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-label";
-import "@radix-ui/react-scroll-area";
-import "@radix-ui/react-tabs";
-import "@radix-ui/react-tooltip";
-import "@radix-ui/react-popover";
-import "@radix-ui/react-hover-card";
-import "@radix-ui/react-dropdown-menu";
-import "@radix-ui/react-separator";
-import "@radix-ui/react-toast";
-import "@radix-ui/react-context-menu";
 const canAcceptChildBlock = (o, r) => {
-  if (!o)
-    return !0;
+  if (!o) return !0;
   const n = getRegisteredChaiBlock(o);
   return n && has(n, "canAcceptBlock") ? n.canAcceptBlock(r) : !1;
 }, canAddChildBlock = (o) => {
@@ -78,7 +61,6 @@ const canAcceptChildBlock = (o, r) => {
   const r = getRegisteredChaiBlock(o);
   return r && has(r, "canDelete") ? r.canDelete() : !0;
 };
-var define_import_meta_env_default$2 = { VITE_OPENAI_API_KEY: "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", VITE_UNSPASH_ACCESS_KEY: "XgYBCm-XCHecRMsbfhw6oZWGkltco1U5TYMEd0LXZeA", VITE_JOTAI_DEVTOOL_ENABLED: "true", BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0, SSR: !1 };
 let keyCount = 0;
 function atom(o, r) {
   const n = `atom${++keyCount}`, a = {
@@ -104,287 +86,246 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     throw o.e;
   return o.v;
 }, createStore = () => {
-  const o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new Map();
-  let a, l, i;
-  (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set());
-  const c = (m) => o.get(m), d = (m, E) => {
-    (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(E);
-    const R = o.get(m);
-    if (o.set(m, E), n.has(m) || n.set(m, R), R && hasPromiseAtomValue(R)) {
-      const C = "v" in E ? E.v instanceof Promise ? E.v : Promise.resolve(E.v) : Promise.reject(E.e);
-      cancelPromise(R.v, C);
+  const o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new Map(), a = (f) => o.get(f), l = (f, j) => {
+    const w = o.get(f);
+    if (o.set(f, j), n.has(f) || n.set(f, w), w && hasPromiseAtomValue(w)) {
+      const b = "v" in j ? j.v instanceof Promise ? j.v : Promise.resolve(j.v) : Promise.reject(j.e);
+      cancelPromise(w.v, b);
     }
-  }, p = (m, E, R) => {
-    const C = /* @__PURE__ */ new Map();
-    let N = !1;
-    R.forEach((I, w) => {
-      !I && w === m && (I = E), I ? (C.set(w, I), E.d.get(w) !== I && (N = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (N || E.d.size !== C.size) && (E.d = C);
-  }, u = (m, E, R) => {
-    const C = c(m), N = {
-      d: (C == null ? void 0 : C.d) || /* @__PURE__ */ new Map(),
-      v: E
+  }, i = (f, j, w) => {
+    const b = /* @__PURE__ */ new Map();
+    let C = !1;
+    w.forEach((B, N) => {
+      !B && N === f && (B = j), B && (b.set(N, B), j.d.get(N) !== B && (C = !0));
+    }), (C || j.d.size !== b.size) && (j.d = b);
+  }, c = (f, j, w) => {
+    const b = a(f), C = {
+      d: (b == null ? void 0 : b.d) || /* @__PURE__ */ new Map(),
+      v: j
     };
-    if (R && p(m, N, R), C && isEqualAtomValue(C, N) && C.d === N.d)
-      return C;
-    if (C && hasPromiseAtomValue(C) && hasPromiseAtomValue(N) && isEqualPromiseAtomValue(C, N)) {
-      if (C.d === N.d)
-        return C;
-      N.v = C.v;
+    if (w && i(f, C, w), b && isEqualAtomValue(b, C) && b.d === C.d)
+      return b;
+    if (b && hasPromiseAtomValue(b) && hasPromiseAtomValue(C) && isEqualPromiseAtomValue(b, C)) {
+      if (b.d === C.d)
+        return b;
+      C.v = b.v;
     }
-    return d(m, N), N;
-  }, x = (m, E, R, C) => {
-    if (isPromiseLike$2(E)) {
-      let N;
-      const I = new Promise((w, $) => {
-        let L = !1;
-        E.then(
-          (M) => {
-            if (!L) {
-              L = !0;
-              const D = c(m), O = u(
-                m,
-                I,
-                R
+    return l(f, C), C;
+  }, d = (f, j, w, b) => {
+    if (isPromiseLike$2(j)) {
+      let C;
+      const B = new Promise((N, D) => {
+        let I = !1;
+        j.then(
+          (T) => {
+            if (!I) {
+              I = !0;
+              const L = a(f), P = c(
+                f,
+                B,
+                w
               );
-              resolvePromise(I, M), w(M), (D == null ? void 0 : D.d) !== O.d && T(m, O, D == null ? void 0 : D.d);
+              resolvePromise(B, T), N(T), (L == null ? void 0 : L.d) !== P.d && S(f, P, L == null ? void 0 : L.d);
             }
           },
-          (M) => {
-            if (!L) {
-              L = !0;
-              const D = c(m), O = u(
-                m,
-                I,
-                R
+          (T) => {
+            if (!I) {
+              I = !0;
+              const L = a(f), P = c(
+                f,
+                B,
+                w
               );
-              rejectPromise(I, M), $(M), (D == null ? void 0 : D.d) !== O.d && T(m, O, D == null ? void 0 : D.d);
+              rejectPromise(B, T), D(T), (L == null ? void 0 : L.d) !== P.d && S(f, P, L == null ? void 0 : L.d);
             }
           }
-        ), N = (M) => {
-          L || (L = !0, M.then(
-            (D) => resolvePromise(I, D),
-            (D) => rejectPromise(I, D)
-          ), w(M));
+        ), C = (T) => {
+          I || (I = !0, T.then(
+            (L) => resolvePromise(B, L),
+            (L) => rejectPromise(B, L)
+          ), N(T));
         };
       });
-      return I.orig = E, I.status = "pending", registerCancelPromise(I, (w) => {
-        w && N(w), C == null || C();
-      }), u(m, I, R);
+      return B.orig = j, B.status = "pending", registerCancelPromise(B, (N) => {
+        N && C(N), b == null || b();
+      }), c(f, B, w);
     }
-    return u(m, E, R);
-  }, h = (m, E, R) => {
-    const C = c(m), N = {
-      d: (C == null ? void 0 : C.d) || /* @__PURE__ */ new Map(),
-      e: E
+    return c(f, j, w);
+  }, p = (f, j, w) => {
+    const b = a(f), C = {
+      d: (b == null ? void 0 : b.d) || /* @__PURE__ */ new Map(),
+      e: j
     };
-    return R && p(m, N, R), C && isEqualAtomError(C, N) && C.d === N.d ? C : (d(m, N), N);
-  }, g = (m) => {
-    const E = c(m);
-    if (E && (E.d.forEach((L, M) => {
-      M !== m && !r.has(M) && g(M);
-    }), Array.from(E.d).every(([L, M]) => {
-      const D = c(L);
-      return L === m || D === M || // TODO This is a hack, we should find a better solution.
-      D && !hasPromiseAtomValue(D) && isEqualAtomValue(D, M);
+    return w && i(f, C, w), b && isEqualAtomError(b, C) && b.d === C.d ? b : (l(f, C), C);
+  }, u = (f) => {
+    const j = a(f);
+    if (j && (j.d.forEach((I, T) => {
+      T !== f && !r.has(T) && u(T);
+    }), Array.from(j.d).every(([I, T]) => {
+      const L = a(I);
+      return I === f || L === T || // TODO This is a hack, we should find a better solution.
+      L && !hasPromiseAtomValue(L) && isEqualAtomValue(L, T);
     })))
-      return E;
-    const R = /* @__PURE__ */ new Map();
-    let C = !0;
-    const N = (L) => {
-      if (L === m) {
-        const D = c(L);
-        if (D)
-          return R.set(L, D), returnAtomValue(D);
-        if (hasInitialValue(L))
-          return R.set(L, void 0), L.init;
+      return j;
+    const w = /* @__PURE__ */ new Map();
+    let b = !0;
+    const C = (I) => {
+      if (I === f) {
+        const L = a(I);
+        if (L)
+          return w.set(I, L), returnAtomValue(L);
+        if (hasInitialValue(I))
+          return w.set(I, void 0), I.init;
         throw new Error("no atom init");
       }
-      const M = g(L);
-      return R.set(L, M), returnAtomValue(M);
+      const T = u(I);
+      return w.set(I, T), returnAtomValue(T);
     };
-    let I, w;
-    const $ = {
+    let B, N;
+    const D = {
       get signal() {
-        return I || (I = new AbortController()), I.signal;
+        return B || (B = new AbortController()), B.signal;
       },
       get setSelf() {
-        return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(m) && console.warn("setSelf function cannot be used with read-only atom"), !w && isActuallyWritableAtom(m) && (w = (...L) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && C && console.warn("setSelf function cannot be called in sync"), !C)
-            return A(m, ...L);
-        }), w;
+        return !N && isActuallyWritableAtom(f) && (N = (...I) => {
+          if (!b)
+            return k(f, ...I);
+        }), N;
       }
     };
     try {
-      const L = m.read(N, $);
-      return x(
-        m,
-        L,
-        R,
-        () => I == null ? void 0 : I.abort()
+      const I = f.read(C, D);
+      return d(
+        f,
+        I,
+        w,
+        () => B == null ? void 0 : B.abort()
       );
-    } catch (L) {
-      return h(m, L, R);
+    } catch (I) {
+      return p(f, I, w);
     } finally {
-      C = !1;
+      b = !1;
     }
-  }, j = (m) => returnAtomValue(g(m)), b = (m) => {
-    let E = r.get(m);
-    return E || (E = S(m)), E;
-  }, f = (m, E) => !E.l.size && (!E.t.size || E.t.size === 1 && E.t.has(m)), y = (m) => {
-    const E = r.get(m);
-    E && f(m, E) && k(m);
-  }, v = (m) => {
-    const E = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new WeakMap(), C = (I) => {
-      const w = r.get(I);
-      w == null || w.t.forEach(($) => {
-        $ !== I && (E.set(
-          $,
-          (E.get($) || /* @__PURE__ */ new Set()).add(I)
-        ), R.set($, (R.get($) || 0) + 1), C($));
+  }, x = (f) => returnAtomValue(u(f)), h = (f) => {
+    let j = r.get(f);
+    return j || (j = _(f)), j;
+  }, m = (f, j) => !j.l.size && (!j.t.size || j.t.size === 1 && j.t.has(f)), E = (f) => {
+    const j = r.get(f);
+    j && m(f, j) && A(f);
+  }, y = (f) => {
+    const j = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new WeakMap(), b = (B) => {
+      const N = r.get(B);
+      N == null || N.t.forEach((D) => {
+        D !== B && (j.set(
+          D,
+          (j.get(D) || /* @__PURE__ */ new Set()).add(B)
+        ), w.set(D, (w.get(D) || 0) + 1), b(D));
       });
     };
-    C(m);
-    const N = (I) => {
-      const w = r.get(I);
-      w == null || w.t.forEach(($) => {
-        var L;
-        if ($ !== I) {
-          let M = R.get($);
-          if (M && R.set($, --M), !M) {
-            let D = !!((L = E.get($)) != null && L.size);
-            if (D) {
-              const O = c($), V = g($);
-              D = !O || !isEqualAtomValue(O, V);
+    b(f);
+    const C = (B) => {
+      const N = r.get(B);
+      N == null || N.t.forEach((D) => {
+        var I;
+        if (D !== B) {
+          let T = w.get(D);
+          if (T && w.set(D, --T), !T) {
+            let L = !!((I = j.get(D)) != null && I.size);
+            if (L) {
+              const P = a(D), M = u(D);
+              L = !P || !isEqualAtomValue(P, M);
             }
-            D || E.forEach((O) => O.delete($));
+            L || j.forEach((P) => P.delete(D));
           }
-          N($);
+          C(D);
         }
       });
     };
-    N(m);
-  }, B = (m, ...E) => {
-    let R = !0;
-    const C = (w) => returnAtomValue(g(w)), N = (w, ...$) => {
-      let L;
-      if (w === m) {
-        if (!hasInitialValue(w))
+    C(f);
+  }, g = (f, ...j) => {
+    let w = !0;
+    const b = (N) => returnAtomValue(u(N)), C = (N, ...D) => {
+      let I;
+      if (N === f) {
+        if (!hasInitialValue(N))
           throw new Error("atom not writable");
-        const M = c(w), D = x(w, $[0]);
-        (!M || !isEqualAtomValue(M, D)) && v(w);
+        const T = a(N), L = d(N, D[0]);
+        (!T || !isEqualAtomValue(T, L)) && y(N);
       } else
-        L = B(w, ...$);
-      if (!R) {
-        const M = _();
-        (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-          (D) => D({ type: "async-write", flushed: M })
-        );
-      }
-      return L;
-    }, I = m.write(C, N, ...E);
-    return R = !1, I;
-  }, A = (m, ...E) => {
-    const R = B(m, ...E), C = _();
-    return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (N) => N({ type: "write", flushed: C })
-    ), R;
-  }, S = (m, E) => {
-    const R = {
-      t: new Set(E && [E]),
+        I = g(N, ...D);
+      return w || v(), I;
+    }, B = f.write(b, C, ...j);
+    return w = !1, B;
+  }, k = (f, ...j) => {
+    const w = g(f, ...j);
+    return v(), w;
+  }, _ = (f, j) => {
+    const w = {
+      t: new Set(j && [j]),
       l: /* @__PURE__ */ new Set()
     };
-    if (r.set(m, R), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(m), g(m).d.forEach((C, N) => {
-      const I = r.get(N);
-      I ? I.t.add(m) : N !== m && S(N, m);
-    }), g(m), isActuallyWritableAtom(m) && m.onMount) {
-      const C = m.onMount((...N) => A(m, ...N));
-      C && (R.u = C);
+    if (r.set(f, w), u(f).d.forEach((b, C) => {
+      const B = r.get(C);
+      B ? B.t.add(f) : C !== f && _(C, f);
+    }), u(f), isActuallyWritableAtom(f) && f.onMount) {
+      const b = f.onMount((...C) => k(f, ...C));
+      b && (w.u = b);
     }
-    return R;
-  }, k = (m) => {
-    var E;
-    const R = (E = r.get(m)) == null ? void 0 : E.u;
-    R && R(), r.delete(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(m);
-    const C = c(m);
-    C ? (hasPromiseAtomValue(C) && cancelPromise(C.v), C.d.forEach((N, I) => {
-      if (I !== m) {
-        const w = r.get(I);
-        w && (w.t.delete(m), f(I, w) && k(I));
+    return w;
+  }, A = (f) => {
+    var j;
+    const w = (j = r.get(f)) == null ? void 0 : j.u;
+    w && w(), r.delete(f);
+    const b = a(f);
+    b && (hasPromiseAtomValue(b) && cancelPromise(b.v), b.d.forEach((C, B) => {
+      if (B !== f) {
+        const N = r.get(B);
+        N && (N.t.delete(f), m(B, N) && A(B));
       }
-    })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", m);
-  }, T = (m, E, R) => {
-    const C = new Set(E.d.keys());
-    R == null || R.forEach((N, I) => {
-      if (C.has(I)) {
-        C.delete(I);
+    }));
+  }, S = (f, j, w) => {
+    const b = new Set(j.d.keys());
+    w == null || w.forEach((C, B) => {
+      if (b.has(B)) {
+        b.delete(B);
         return;
       }
-      const w = r.get(I);
-      w && (w.t.delete(m), f(I, w) && k(I));
-    }), C.forEach((N) => {
-      const I = r.get(N);
-      I ? I.t.add(m) : r.has(m) && S(N, m);
+      const N = r.get(B);
+      N && (N.t.delete(f), m(B, N) && A(B));
+    }), b.forEach((C) => {
+      const B = r.get(C);
+      B ? B.t.add(f) : r.has(f) && _(C, f);
     });
-  }, _ = () => {
-    let m;
-    for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (m = /* @__PURE__ */ new Set()); n.size; ) {
-      const E = Array.from(n);
-      n.clear(), E.forEach(([R, C]) => {
-        const N = c(R);
-        if (N) {
-          N.d !== (C == null ? void 0 : C.d) && T(R, N, C == null ? void 0 : C.d);
-          const I = r.get(R);
-          I && !// TODO This seems pretty hacky. Hope to fix it.
+  }, v = () => {
+    for (; n.size; ) {
+      const f = Array.from(n);
+      n.clear(), f.forEach(([j, w]) => {
+        const b = a(j);
+        if (b) {
+          b.d !== (w == null ? void 0 : w.d) && S(j, b, w == null ? void 0 : w.d);
+          const C = r.get(j);
+          C && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (C && !hasPromiseAtomValue(C) && (isEqualAtomValue(C, N) || isEqualAtomError(C, N))) && (I.l.forEach((w) => w()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && m.add(R));
-        } else
-          (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
+          (w && !hasPromiseAtomValue(w) && (isEqualAtomValue(w, b) || isEqualAtomError(w, b))) && C.l.forEach((B) => B());
+        }
       });
     }
-    if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
-      return a.forEach((E) => E("state")), m;
-  }, P = (m, E) => {
-    const R = b(m), C = _(), N = R.l;
-    return N.add(E), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((I) => I("sub")), l.forEach(
-      (I) => I({ type: "sub", flushed: C })
-    )), () => {
-      N.delete(E), y(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((I) => I("unsub")), l.forEach((I) => I({ type: "unsub" })));
-    };
   };
-  return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
-    get: j,
-    set: A,
-    sub: P,
-    // store dev methods (these are tentative and subject to change without notice)
-    dev_subscribe_store: (m, E) => E !== 2 ? (console.warn(
-      "The current StoreListener revision is 2. The older ones are deprecated."
-    ), a.add(m), () => {
-      a.delete(m);
-    }) : (l.add(m), () => {
-      l.delete(m);
-    }),
-    dev_get_mounted_atoms: () => i.values(),
-    dev_get_atom_state: (m) => o.get(m),
-    dev_get_mounted: (m) => r.get(m),
-    dev_restore_atoms: (m) => {
-      for (const [R, C] of m)
-        hasInitialValue(R) && (x(R, C), v(R));
-      const E = _();
-      l.forEach(
-        (R) => R({ type: "restore", flushed: E })
-      );
+  return {
+    get: x,
+    set: k,
+    sub: (f, j) => {
+      const w = h(f);
+      v();
+      const b = w.l;
+      return b.add(j), () => {
+        b.delete(j), E(f);
+      };
     }
-  } : {
-    get: j,
-    set: A,
-    sub: P
   };
 };
 let defaultStore;
-const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), defaultStore);
-var define_import_meta_env_default$1 = { VITE_OPENAI_API_KEY: "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", VITE_UNSPASH_ACCESS_KEY: "XgYBCm-XCHecRMsbfhw6oZWGkltco1U5TYMEd0LXZeA", VITE_JOTAI_DEVTOOL_ENABLED: "true", BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0, SSR: !1 };
-const RESET = Symbol(), getCached$1 = (o, r, n) => (r.has(n) ? r : r.set(n, o())).get(n), cache1$2 = /* @__PURE__ */ new WeakMap(), memo2$1 = (o, r, n) => {
+const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), defaultStore), RESET = Symbol(), getCached$1 = (o, r, n) => (r.has(n) ? r : r.set(n, o())).get(n), cache1$2 = /* @__PURE__ */ new WeakMap(), memo2$1 = (o, r, n) => {
   const a = getCached$1(() => /* @__PURE__ */ new WeakMap(), cache1$2, r);
   return getCached$1(o, a, n);
 }, cacheKeyForEmptyKeyExtractor = {}, isWritable = (o) => !!o.write, isFunction = (o) => typeof o == "function";
@@ -396,41 +337,41 @@ function splitAtom(o, r) {
         if (p)
           return p;
         const u = d && n.get(d), x = [], h = [];
-        return c.forEach((g, j) => {
-          const b = r ? r(g) : j;
-          h[j] = b;
-          const f = u && u.atomList[u.keyList.indexOf(b)];
-          if (f) {
-            x[j] = f;
+        return c.forEach((m, E) => {
+          const y = E;
+          h[E] = y;
+          const g = u && u.atomList[u.keyList.indexOf(y)];
+          if (g) {
+            x[E] = g;
             return;
           }
-          const y = (B) => {
-            const A = B(l), S = B(o), T = a(S, A == null ? void 0 : A.arr).keyList.indexOf(b);
-            if (T < 0 || T >= S.length) {
-              const _ = c[a(c).keyList.indexOf(b)];
-              if (_)
-                return _;
+          const k = (A) => {
+            const S = A(l), v = A(o), f = a(v, S == null ? void 0 : S.arr).keyList.indexOf(y);
+            if (f < 0 || f >= v.length) {
+              const j = c[a(c).keyList.indexOf(y)];
+              if (j)
+                return j;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return S[T];
-          }, v = (B, A, S) => {
-            const k = B(l), T = B(o), P = a(T, k == null ? void 0 : k.arr).keyList.indexOf(b);
-            if (P < 0 || P >= T.length)
+            return v[f];
+          }, _ = (A, S, v) => {
+            const R = A(l), f = A(o), w = a(f, R == null ? void 0 : R.arr).keyList.indexOf(y);
+            if (w < 0 || w >= f.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const m = isFunction(S) ? S(T[P]) : S;
-            A(o, [
-              ...T.slice(0, P),
-              m,
-              ...T.slice(P + 1)
+            const b = isFunction(v) ? v(f[w]) : v;
+            S(o, [
+              ...f.slice(0, w),
+              b,
+              ...f.slice(w + 1)
             ]);
           };
-          x[j] = isWritable(o) ? atom(y, v) : atom(y);
-        }), u && u.keyList.length === h.length && u.keyList.every((g, j) => g === h[j]) ? p = u : p = { arr: c, atomList: x, keyList: h }, n.set(c, p), p;
+          x[E] = isWritable(o) ? atom(k, _) : atom(k);
+        }), u && u.keyList.length === h.length && u.keyList.every((m, E) => m === h[E]) ? p = u : p = { arr: c, atomList: x, keyList: h }, n.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
       });
-      (define_import_meta_env_default$1 ? "production" : void 0) !== "production" && (l.debugPrivate = !0), l.init = void 0;
+      l.init = void 0;
       const i = isWritable(o) ? atom(
         (c) => c(l).atomList,
         (c, d, p) => {
@@ -482,7 +423,7 @@ function splitAtom(o, r) {
       return i;
     },
     o,
-    r || cacheKeyForEmptyKeyExtractor
+    cacheKeyForEmptyKeyExtractor
   );
 }
 const isPromiseLike$1 = (o) => typeof (o == null ? void 0 : o.then) == "function";
@@ -537,26 +478,22 @@ const defaultStorage = createJSONStorage(
   () => typeof window < "u" ? window.localStorage : void 0
 );
 function atomWithStorage(o, r, n = defaultStorage, a) {
-  const l = a == null ? void 0 : a.unstable_getOnInit, i = atom(
-    l ? n.getItem(o, r) : r
+  const l = atom(
+    r
   );
-  return (define_import_meta_env_default$1 ? "production" : void 0) !== "production" && (i.debugPrivate = !0), i.onMount = (d) => {
-    l || d(n.getItem(o, r));
-    let p;
-    return n.subscribe && (p = n.subscribe(o, d, r)), p;
+  return l.onMount = (c) => {
+    c(n.getItem(o, r));
+    let d;
+    return n.subscribe && (d = n.subscribe(o, c, r)), d;
   }, atom(
-    (d) => d(i),
-    (d, p, u) => {
-      const x = typeof u == "function" ? u(d(i)) : u;
-      return x === RESET ? (p(i, r), n.removeItem(o)) : x instanceof Promise ? x.then((h) => (p(i, h), n.setItem(o, h))) : (p(i, x), n.setItem(o, x));
+    (c) => c(l),
+    (c, d, p) => {
+      const u = typeof p == "function" ? p(c(l)) : p;
+      return u === RESET ? (d(l, r), n.removeItem(o)) : u instanceof Promise ? u.then((x) => (d(l, x), n.setItem(o, x))) : (d(l, u), n.setItem(o, u));
     }
   );
 }
-var define_import_meta_env_default = { VITE_OPENAI_API_KEY: "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", VITE_UNSPASH_ACCESS_KEY: "XgYBCm-XCHecRMsbfhw6oZWGkltco1U5TYMEd0LXZeA", VITE_JOTAI_DEVTOOL_ENABLED: "true", BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0, SSR: !1 };
-const StoreContext = createContext(void 0), useStore = (o) => {
-  const r = useContext(StoreContext);
-  return (o == null ? void 0 : o.store) || r || getDefaultStore();
-}, isPromiseLike = (o) => typeof (o == null ? void 0 : o.then) == "function", use = React__default.use || ((o) => {
+const StoreContext = createContext(void 0), useStore = (o) => useContext(StoreContext) || getDefaultStore(), isPromiseLike = (o) => typeof (o == null ? void 0 : o.then) == "function", use = React__default.use || ((o) => {
   if (o.status === "pending")
     throw o;
   if (o.status === "fulfilled")
@@ -571,7 +508,7 @@ const StoreContext = createContext(void 0), useStore = (o) => {
   ), o);
 });
 function useAtomValue(o, r) {
-  const n = useStore(r), [[a, l, i], c] = useReducer(
+  const n = useStore(), [[a, l, i], c] = useReducer(
     (u) => {
       const x = n.get(o);
       return Object.is(u[0], x) && u[1] === n && u[2] === o ? u : [x, n, o];
@@ -580,35 +517,25 @@ function useAtomValue(o, r) {
     () => [n.get(o), n, o]
   );
   let d = a;
-  (l !== n || i !== o) && (c(), d = n.get(o));
-  const p = r == null ? void 0 : r.delay;
-  return useEffect(() => {
+  return (l !== n || i !== o) && (c(), d = n.get(o)), useEffect(() => {
     const u = n.sub(o, () => {
-      if (typeof p == "number") {
-        setTimeout(c, p);
-        return;
-      }
       c();
     });
     return c(), u;
-  }, [n, o, p]), useDebugValue(d), isPromiseLike(d) ? use(d) : d;
+  }, [n, o, void 0]), useDebugValue(d), isPromiseLike(d) ? use(d) : d;
 }
 function useSetAtom(o, r) {
-  const n = useStore(r);
+  const n = useStore();
   return useCallback(
-    (...l) => {
-      if ((define_import_meta_env_default ? "production" : void 0) !== "production" && !("write" in o))
-        throw new Error("not writable atom");
-      return n.set(o, ...l);
-    },
+    (...l) => n.set(o, ...l),
     [n, o]
   );
 }
 function useAtom(o, r) {
   return [
-    useAtomValue(o, r),
+    useAtomValue(o),
     // We do wrong type assertion here, which results in throwing an error.
-    useSetAtom(o, r)
+    useSetAtom(o)
   ];
 }
 function duplicateBlocks(o, r, n) {
@@ -651,7 +578,7 @@ const getSlots = (o) => {
   }), r;
 }, getDuplicatedBlocks = (o, r, n = null) => {
   let a = find(o, { _id: r });
-  a = { ...a, oldId: a._id, _id: generateUUID() }, n && (a = { ...a, _parent: n });
+  a = { ...a, oldId: a._id, _id: generateUUID() }, n !== (a == null ? void 0 : a._parent) && (a = { ...a, _parent: n });
   const l = [a];
   filter(o, { _parent: r }).length > 0 && l.push(flatten(duplicateBlocks(o, r, a._id)));
   const i = flatten(l);
@@ -940,8 +867,7 @@ function getSingleBlock(o) {
 }
 function getPBlocks(o) {
   const r = find(FLAT_ARRAY, { _id: o._id });
-  if (!r)
-    return [];
+  if (!r) return [];
   const n = [r], a = filter(FLAT_ARRAY, { _parent: o._id });
   return a.length ? flatten([...n, ...flatten(map(a, getPBlocks))]) : flatten(n);
 }
@@ -1033,6 +959,22 @@ const useUndoManager = () => {
     hasUndo: undoManager.hasUndo,
     clear: undoManager.clear
   };
+}, broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChannel = () => {
+  const o = useBuilderProp("pageId", "chaibuilder_page");
+  return { postMessage: useDebouncedCallback(
+    (n) => broadcastChannel.postMessage({ ...n, pageId: o }),
+    [o],
+    200
+  ) };
+}, useUnmountBroadcastChannel = () => {
+  const [, o] = useBlocksStore(), r = useBuilderProp("pageId", "chaibuilder_page");
+  useEffect(() => (broadcastChannel.onmessageerror = (n) => {
+    console.log("error", n);
+  }, broadcastChannel.onmessage = (n) => {
+    n.data.type === "blocks-updated" && n.data.pageId === r && o(n.data.blocks);
+  }, () => {
+    broadcastChannel.onmessage = null, broadcastChannel.onmessageerror = null;
+  }), [o, r]);
 }, removeNestedBlocks = (o, r) => {
   const n = [], a = filter(o, (l) => includes(r, l._id) || includes(r, l._parent) ? (n.push(l._id), !1) : !0);
   return isEmpty(n) ? a : removeNestedBlocks(a, n);
@@ -1083,8 +1025,7 @@ function moveNode(o, r, n, a) {
   return !1;
 }
 function moveBlocksWithChildren(o, r, n, a) {
-  if (!r)
-    return o;
+  if (!r) return o;
   n = n || "root";
   const i = new TreeModel().parse({ _id: "root", children: getBlocksTree(o) });
   if (moveNode(i, r, n, a)) {
@@ -1094,35 +1035,41 @@ function moveBlocksWithChildren(o, r, n, a) {
   return o;
 }
 const useBlocksStoreManager = () => {
-  const [, o] = useBlocksStore();
+  const [, o] = useBlocksStore(), { postMessage: r } = useBroadcastChannel();
   return {
-    setNewBlocks: (r) => {
-      o(r);
+    setNewBlocks: (n) => {
+      o(n), r({ type: "blocks-updated", blocks: n });
     },
-    addBlocks: (r, n, a) => {
-      o((l) => insertBlocksAtPosition(l, r, n, a));
+    addBlocks: (n, a, l) => {
+      o((i) => {
+        const c = insertBlocksAtPosition(i, n, a, l);
+        return r({ type: "blocks-updated", blocks: c }), c;
+      });
     },
-    removeBlocks: (r) => {
-      o((n) => removeNestedBlocks(n, r));
+    removeBlocks: (n) => {
+      o((a) => {
+        const l = removeNestedBlocks(a, n);
+        return r({ type: "blocks-updated", blocks: l }), l;
+      });
     },
-    moveBlocks: (r, n, a) => {
-      o((l) => {
-        let i = l;
-        for (let c = 0; c < r.length; c++)
-          i = moveBlocksWithChildren(i, r[c], n, a);
-        return i;
+    moveBlocks: (n, a, l) => {
+      o((i) => {
+        let c = i;
+        for (let d = 0; d < n.length; d++)
+          c = moveBlocksWithChildren(c, n[d], a, l);
+        return r({ type: "blocks-updated", blocks: c }), c;
       });
     },
-    updateBlocksProps: (r) => {
-      o((n) => {
-        const a = r.map((l) => l._id);
-        return n.map((l) => {
-          if (a.includes(l._id)) {
-            const i = find(r, { _id: l._id });
-            return { ...l, ...omit(i, "_id") };
+    updateBlocksProps: (n) => {
+      o((a) => {
+        const l = n.map((c) => c._id), i = a.map((c) => {
+          if (l.includes(c._id)) {
+            const d = find(n, { _id: c._id });
+            return { ...c, ...omit(d, "_id") };
           }
-          return l;
+          return c;
         });
+        return r({ type: "blocks-updated", blocks: i }), i;
       });
     }
   };
@@ -1135,98 +1082,98 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (b, f, y) => {
-      const v = map(b, (A) => {
-        const k = r.find((P) => P._id === A)._parent || null, _ = r.filter((P) => k ? P._parent === k : !P._parent).map((P) => P._id).indexOf(A);
-        return { _id: A, oldParent: k, oldPosition: _ };
-      }), B = v.find(({ _id: A }) => A === b[0]);
-      B && B.oldParent === f && B.oldPosition === y || (i(b, f, y), o({
-        undo: () => each(v, ({ _id: A, oldParent: S, oldPosition: k }) => {
-          i([A], S, k);
+    moveBlocks: (y, g, k) => {
+      const _ = map(y, (S) => {
+        const R = r.find((w) => w._id === S)._parent || null, j = r.filter((w) => R ? w._parent === R : !w._parent).map((w) => w._id).indexOf(S);
+        return { _id: S, oldParent: R, oldPosition: j };
+      }), A = _.find(({ _id: S }) => S === y[0]);
+      A && A.oldParent === g && A.oldPosition === k || (i(y, g, k), o({
+        undo: () => each(_, ({ _id: S, oldParent: v, oldPosition: R }) => {
+          i([S], v, R);
         }),
-        redo: () => i(b, f, y)
+        redo: () => i(y, g, k)
       }));
     },
-    addBlocks: (b, f, y) => {
-      a(b, f, y), o({
-        undo: () => l(map(b, "_id")),
-        redo: () => a(b, f, y)
+    addBlocks: (y, g, k) => {
+      a(y, g, k), o({
+        undo: () => l(map(y, "_id")),
+        redo: () => a(y, g, k)
       });
     },
-    removeBlocks: (b) => {
-      var B;
-      const f = (B = first(b)) == null ? void 0 : B._parent, v = r.filter((A) => f ? A._parent === f : !A._parent).indexOf(first(b));
-      l(map(b, "_id")), o({
-        undo: () => a(b, f, v),
-        redo: () => l(map(b, "_id"))
+    removeBlocks: (y) => {
+      var A;
+      const g = (A = first(y)) == null ? void 0 : A._parent, _ = r.filter((S) => g ? S._parent === g : !S._parent).indexOf(first(y));
+      l(map(y, "_id")), o({
+        undo: () => a(y, g, _),
+        redo: () => l(map(y, "_id"))
       });
     },
-    updateBlocks: (b, f, y) => {
-      let v = [];
-      if (y)
-        v = map(b, (B) => ({ _id: B, ...y }));
+    updateBlocks: (y, g, k) => {
+      let _ = [];
+      if (k)
+        _ = map(y, (A) => ({ _id: A, ...k }));
       else {
-        const B = keys(f);
-        v = map(b, (A) => {
-          const S = r.find((T) => T._id === A), k = { _id: A };
-          return each(B, (T) => k[T] = S[T]), k;
+        const A = keys(g);
+        _ = map(y, (S) => {
+          const v = r.find((f) => f._id === S), R = { _id: S };
+          return each(A, (f) => R[f] = v[f]), R;
         });
       }
-      c(map(b, (B) => ({ _id: B, ...f }))), o({
-        undo: () => c(v),
-        redo: () => c(map(b, (B) => ({ _id: B, ...f })))
+      c(map(y, (A) => ({ _id: A, ...g }))), o({
+        undo: () => c(_),
+        redo: () => c(map(y, (A) => ({ _id: A, ...g })))
       });
     },
-    updateBlocksRuntime: (b, f) => {
-      c(map(b, (y) => ({ _id: y, ...f })));
+    updateBlocksRuntime: (y, g) => {
+      c(map(y, (k) => ({ _id: k, ...g })));
     },
-    setNewBlocks: (b) => {
-      n(b), o({
+    setNewBlocks: (y) => {
+      n(y), o({
         undo: () => n(r),
-        redo: () => n(b)
+        redo: () => n(y)
       });
     },
-    updateMultipleBlocksProps: (b) => {
-      let f = [];
-      f = map(b, (y) => {
-        const v = keys(y), B = r.find((S) => S._id === y._id), A = {};
-        return each(v, (S) => A[S] = B[S]), A;
-      }), c(b), o({
-        undo: () => c(f),
-        redo: () => c(b)
+    updateMultipleBlocksProps: (y) => {
+      let g = [];
+      g = map(y, (k) => {
+        const _ = keys(k), A = r.find((v) => v._id === k._id), S = {};
+        return each(_, (v) => S[v] = A[v]), S;
+      }), c(y), o({
+        undo: () => c(g),
+        redo: () => c(y)
       });
     }
   };
 }, useAddBlock = () => {
   const [o] = useBlocksStore(), [, r] = useSelectedBlockIds(), { addBlocks: n } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var g;
-      for (let j = 0; j < i.length; j++) {
-        const { _id: b } = i[j];
-        i[j]._id = generateUUID();
-        const f = filter(i, { _parent: b });
-        for (let y = 0; y < f.length; y++)
-          f[y]._parent = i[j]._id;
+      var m;
+      for (let E = 0; E < i.length; E++) {
+        const { _id: y } = i[E];
+        i[E]._id = generateUUID();
+        const g = filter(i, { _parent: y });
+        for (let k = 0; k < g.length; k++)
+          g[k]._parent = i[E]._id;
       }
       const p = first(i);
       let u, x;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, x = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, x = u._parent), n(i, x, d), r([(g = first(i)) == null ? void 0 : g._id]), first(i);
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, x = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, x = u._parent), n(i, x, d), r([(m = first(i)) == null ? void 0 : m._id]), first(i);
     },
     [n, o, r]
   );
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const f = i.blocks;
-        return a(f, c, d);
+        const g = i.blocks;
+        return a(g, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), x = {
         _type: i.type,
         _id: p,
         ...u
       };
-      let h, g;
-      return c && (h = find(o, { _id: c }), x._parent = c, g = c), !canAcceptChildBlock(h == null ? void 0 : h._type, x._type) && h && (x._parent = h._parent, g = h._parent), n([x], g, d), r([x._id]), x;
+      let h, m;
+      return c && (h = find(o, { _id: c }), x._parent = c, m = c), !canAcceptChildBlock(h == null ? void 0 : h._type, x._type) && h && (x._parent = h._parent, m = h._parent), n([x], m, d), r([x._id]), x;
     },
     [n, a, o, r]
   ), addPredefinedBlock: a };
@@ -2285,8 +2232,7 @@ const useBlocksStoreManager = () => {
   return { match: n, getClasses: a };
 };
 function getMqForCls(o) {
-  if (isEmpty(o.trim()))
-    return "";
+  if (isEmpty(o.trim())) return "";
   const r = o.match(/sm:|md:|lg:|xl:|2xl:/g);
   return get(r, 0, "xs").replace(":", "");
 }
@@ -2299,8 +2245,7 @@ function getPureClsName(o) {
 }
 const memoizedProps = {};
 function getPropertyForClass(o) {
-  if (isEmpty(o))
-    return "";
+  if (isEmpty(o)) return "";
   if (memoizedProps[o])
     return memoizedProps[o];
   let r = "";
@@ -2371,12 +2316,12 @@ function getNewClasses(o = "", r = "", n = []) {
     const x = constructClassObject(u), h = find(a, pick(x, ["dark", "mq", "mod", "property"]));
     if (h && (a = filter(
       a,
-      (g) => g.fullCls !== (h == null ? void 0 : h.fullCls)
-    )), i.push(x), x.mq === "xs" && !x.dark && x.mod === "" && (l = filter(l, (g) => g.property !== x.property)), getBelongsToForClass(a, x) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, x.property)) {
-      const g = find(l, pick(x, ["property"]));
+      (m) => m.fullCls !== (h == null ? void 0 : h.fullCls)
+    )), i.push(x), x.mq === "xs" && !x.dark && x.mod === "" && (l = filter(l, (m) => m.property !== x.property)), getBelongsToForClass(a, x) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, x.property)) {
+      const m = find(l, pick(x, ["property"]));
       h && (l = filter(
         l,
-        (j) => j.fullCls !== (g == null ? void 0 : g.fullCls)
+        (E) => E.fullCls !== (m == null ? void 0 : m.fullCls)
       )), c.push({
         ...x,
         fullCls: x.cls,
@@ -2424,7 +2369,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
       }
       r(a, c[0].props);
     },
-    [o]
+    [o, r, n]
   );
 }, useStylingBreakpoint = () => useAtom$1(styleBreakpointAtom), canvasWidthAtom = atomWithStorage("canvasWidth", 800), canvasBreakpointAtom = atom$1((o) => {
   const r = o(canvasWidthAtom);
@@ -2467,11 +2412,11 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const d = o.find((g) => g._id === c);
-        l || (l = d._parent);
+        const d = o.find((m) => m._id === c);
+        l ? l === "root" && (l = null) : l = d._parent;
         const x = filter(
           o,
-          (g) => isString(l) ? g._parent === l : !d._parent
+          (m) => isString(l) ? m._parent === l : !m._parent
         ).indexOf(d) + 1, h = getDuplicatedBlocks(o, c, l);
         n(h, l, x), i.push(get(h, "0._id", ""));
       }), r(i);
@@ -2490,7 +2435,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   const [o] = useBlocksStore();
   return (r, n) => {
     var i;
-    const a = (i = find(o, { _id: n })) == null ? void 0 : i._type, l = first(r.map((c) => {
+    const a = ((i = find(o, { _id: n })) == null ? void 0 : i._type) || null, l = first(r.map((c) => {
       var d;
       return (d = find(o, { _id: c })) == null ? void 0 : d._type;
     }));
@@ -2500,9 +2445,14 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   const o = useAtomValue$1(presentBlocksAtom), { moveBlocks: r } = useBlocksStoreUndoableActions();
   return useCallback(
     (n, a) => {
-      var d;
-      const l = Array.isArray(a) ? a[0] : a, i = o.find((p) => p._id === l), c = i && ((d = i.children) == null ? void 0 : d.length) || 0;
-      r(n, l, c);
+      const l = Array.isArray(a) ? a[0] : a;
+      if (a === "root") {
+        const i = o == null ? void 0 : o.filter((c) => !c._parent);
+        r(n, null, (i == null ? void 0 : i.length) || 0);
+      } else {
+        const i = o == null ? void 0 : o.filter((c) => c._parent === l);
+        r(n, l, (i == null ? void 0 : i.length) || 0);
+      }
     },
     [r, o]
   );
@@ -2537,7 +2487,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
           const u = await navigator.clipboard.readText();
           if (u) {
             const x = JSON.parse(u);
-            has(x, "_chai_copied_blocks") ? i(x._chai_copied_blocks, p) : l({ title: "Error", description: "Nothing to paste" });
+            has(x, "_chai_copied_blocks") ? i(x._chai_copied_blocks, p === "root" ? null : p) : l({ title: "Error", description: "Nothing to paste" });
           } else
             l({ title: "Error", description: "Nothing to paste" });
         } catch {
@@ -2565,13 +2515,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     const d = o(c), p = a;
     let { classes: u, baseClasses: x } = getSplitClasses(get(d, l.prop, "styles:,"));
     return each(p, (h) => {
-      const g = h.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), j = new RegExp(`(^| )${g}($| )`, "g");
-      u = u.replace(j, " ").replace(/  +/g, " ").trim();
-      const b = first(h.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], b) && p.push(h.split(":").pop().trim());
+      const m = h.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), E = new RegExp(`(^| )${m}($| )`, "g");
+      u = u.replace(E, " ").replace(/  +/g, " ").trim();
+      const y = first(h.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], y) && p.push(h.split(":").pop().trim());
     }), each(p, (h) => {
-      const g = new RegExp(`(^| )${h.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
-      x = x.replace(g, " ").replace(/  +/g, " ").trim();
+      const m = new RegExp(`(^| )${h.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
+      x = x.replace(m, " ").replace(/  +/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
@@ -2590,8 +2540,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   );
 }, selectedBlockAllClassesAtom = atom$1((o) => {
   const r = first(o(selectedStylingBlocksAtom)), n = o(selectedBlockAtom);
-  if (!r || r.blockId !== get(n, "_id", null))
-    return [];
+  if (!r || r.blockId !== get(n, "_id", null)) return [];
   const l = get(n, r.prop, `${STYLES_KEY},`).replace(STYLES_KEY, "").split(",").join(" ");
   return filter(map(l.trim().split(" "), constructClassObject), (i) => !isNull(i));
 }), useSelectedBlockAllClasses = () => useAtomValue$1(selectedBlockAllClassesAtom), MQ = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4, "2xl": 5 }, selectedBlockCurrentClassesAtom = atom$1((o) => {
@@ -2638,8 +2587,7 @@ const useLanguages = () => {
   };
 }, updatePropsForLanguage = memoize((o, r, n) => {
   const a = getRegisteredChaiBlock(get(n, "_type"));
-  if (!a)
-    return o;
+  if (!a) return o;
   const l = { ...o };
   return forEach(keys(o), (i) => {
     if (includes(get(a, "i18nProps", []), i) && !isEmpty(r)) {
@@ -3022,39 +2970,39 @@ const getBlockWithChildren = (o, r) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, r, n) => !r || n !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, r, r)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, h = (g, j) => {
-    const b = cloneDeep(j.find((f) => f._id === g));
-    for (const f in b) {
-      const y = b[f];
-      typeof y == "string" && startsWith(y, STYLES_KEY) ? b[f] = compact(flattenDeep(y.replace(STYLES_KEY, "").split(","))).join(" ") : f !== "_id" && delete b[f];
+  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, h = (m, E) => {
+    const y = cloneDeep(E.find((g) => g._id === m));
+    for (const g in y) {
+      const k = y[g];
+      typeof k == "string" && startsWith(k, STYLES_KEY) ? y[g] = compact(flattenDeep(k.replace(STYLES_KEY, "").split(","))).join(" ") : g !== "_id" && delete y[g];
     }
-    return b;
+    return y;
   };
   return {
     askAi: useCallback(
-      async (g, j, b, f) => {
+      async (m, E, y, g) => {
         if (l) {
           r(!0), a(null);
           try {
-            const y = p === u ? "" : p, v = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(j, d)), p) : [h(j, d)], B = await l(g, addLangToPrompt(b, x, g), v, y), { blocks: A, error: S } = B;
-            if (S) {
-              a(S);
+            const k = p === u ? "" : p, _ = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(E, d)), p) : [h(E, d)], A = await l(m, addLangToPrompt(y, x, m), _, k), { blocks: S, error: v } = A;
+            if (v) {
+              a(v);
               return;
             }
-            if (g === "styles") {
-              const k = A.map((T) => {
-                for (const _ in T)
-                  _ !== "_id" && (T[_] = `${STYLES_KEY},${T[_]}`);
-                return T;
+            if (m === "styles") {
+              const R = S.map((f) => {
+                for (const j in f)
+                  j !== "_id" && (f[j] = `${STYLES_KEY},${f[j]}`);
+                return f;
               });
-              c(k);
+              c(R);
             } else
-              i(A);
-            f && f(B);
-          } catch (y) {
-            a(y);
+              i(S);
+            g && g(A);
+          } catch (k) {
+            a(k);
           } finally {
-            r(!1), f && f();
+            r(!1), g && g();
           }
         }
       },
@@ -3083,16 +3031,13 @@ const getBlockWithChildren = (o, r) => {
 }, wrapperBlockAtom = atom$1((o) => {
   var c;
   const r = o(presentBlocksAtom), n = o(selectedBlockIdsAtom), a = n.length === 1 ? n[0] : null;
-  if (!a)
-    return null;
+  if (!a) return null;
   const l = find(r, { _id: a });
-  if (!l)
-    return null;
+  if (!l) return null;
   let i = l._parent;
   for (; i; ) {
     const d = find(r, { _id: i });
-    if (!d)
-      return null;
+    if (!d) return null;
     if ((c = getRegisteredChaiBlock(d._type)) != null && c.wrapper)
       return d;
     i = d._parent;
@@ -3165,11 +3110,11 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), layoutVariantAto
     if (d < r) {
       const u = parseFloat((d / r).toFixed(2).toString());
       let x = {};
-      const h = p * u, g = d * u;
+      const h = p * u, m = d * u;
       p && (x = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
         height: 100 + (p - h) / h * 100 + "%",
-        width: 100 + (d - g) / g * 100 + "%"
+        width: 100 + (d - m) / m * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3201,7 +3146,7 @@ class Content extends Component {
     return Children.only(this.props.children);
   }
 }
-H(Content, "propTypes", {
+O(Content, "propTypes", {
   children: PropTypes.element.isRequired,
   contentDidMount: PropTypes.func.isRequired,
   contentDidUpdate: PropTypes.func.isRequired
@@ -3209,17 +3154,17 @@ H(Content, "propTypes", {
 class Frame extends Component {
   constructor(n, a) {
     super(n, a);
-    H(this, "setRef", (n) => {
+    O(this, "setRef", (n) => {
       this.nodeRef.current = n;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(n) : a && (a.current = n);
     });
-    H(this, "handleLoad", () => {
+    O(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
     });
     // In certain situations on a cold cache DOMContentLoaded never gets called
     // fallback to an interval to check if that's the case
-    H(this, "loadCheck", () => setInterval(() => {
+    O(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -3260,7 +3205,7 @@ class Frame extends Component {
 // also inject into the body and can mess up React. For this reason
 // initialContent is expected to have a div inside of the body
 // element that we render react into.
-H(Frame, "propTypes", {
+O(Frame, "propTypes", {
   style: PropTypes.object,
   // eslint-disable-line
   head: PropTypes.node,
@@ -3270,7 +3215,7 @@ H(Frame, "propTypes", {
   contentDidMount: PropTypes.func,
   contentDidUpdate: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-}), H(Frame, "defaultProps", {
+}), O(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -3297,14 +3242,12 @@ function getOrientation(o) {
 const draggedBlockAtom = atom$1(null), dropTargetBlockIdAtom = atom$1(null);
 let iframeDocument = null, possiblePositions = [], dropTarget = null, dropIndex = null;
 const positionPlaceholder = (o, r, n) => {
-  if (!iframeDocument || !o)
-    return;
+  if (!iframeDocument || !o) return;
   const a = iframeDocument == null ? void 0 : iframeDocument.getElementById("placeholder"), l = possiblePositions.map(([p]) => p), i = l.reduce(
     (p, u) => Math.abs(u - n) < Math.abs(p - n) ? u : p,
     0
   ), c = l.indexOf(i);
-  if (!possiblePositions[c])
-    return;
+  if (!possiblePositions[c]) return;
   const d = possiblePositions[c];
   a.style.width = r === "vertical" ? d[2] + "px" : "2px", a.style.height = r === "vertical" ? "2px" : d[2] + "px", a.style.display = "block", r === "vertical" ? (a.style.top = d[0] + "px", a.style.left = d[1] + "px") : (a.style.top = d[1] + "px", a.style.left = d[0] + "px");
 };
@@ -3318,8 +3261,7 @@ function calculateDropIndex(o, r) {
 const calculatePossiblePositions = (o) => {
   const n = getOrientation(o) === "horizontal";
   possiblePositions = [], Array.from(o.children).forEach((a, l) => {
-    if (a.classList.contains("pointer-events-none"))
-      return;
+    if (a.classList.contains("pointer-events-none")) return;
     const i = n ? a.offsetLeft : a.offsetTop, c = n ? [a.offsetTop, a.clientHeight] : [a.offsetLeft, a.clientWidth];
     if (possiblePositions.push([i, c[0], c[1]]), l === o.children.length - 1) {
       const d = n ? a.offsetLeft + a.clientWidth : a.offsetTop + a.clientHeight;
@@ -3346,40 +3288,39 @@ function removeDataDrop() {
 }
 const useDnd = () => {
   const { document: o } = useFrame(), [r, n] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
-  if (!useFeature("dnd"))
-    return {};
+  if (!useFeature("dnd")) return {};
   const h = () => {
     removePlaceholder(), n(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
     isDragging: r,
-    onDragOver: (g) => {
-      g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
+    onDragOver: (m) => {
+      m.preventDefault(), m.stopPropagation(), throttledDragOver(m);
     },
-    onDrop: (g) => {
-      var S;
-      const j = dropTarget, f = getOrientation(j) === "vertical" ? g.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : g.clientX;
-      dropIndex = calculateDropIndex(f, possiblePositions);
-      const y = d, v = j.getAttribute("data-block-id"), B = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((y == null ? void 0 : y._id) === v || !B) {
+    onDrop: (m) => {
+      var v;
+      const E = dropTarget, g = getOrientation(E) === "vertical" ? m.clientY + ((v = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : v.scrollY) : m.clientX;
+      dropIndex = calculateDropIndex(g, possiblePositions);
+      const k = d, _ = E.getAttribute("data-block-id"), A = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((k == null ? void 0 : k._id) === _ || !A) {
         h();
         return;
       }
-      if (!has(y, "_id")) {
-        a(y, v === "canvas" ? null : v, dropIndex), setTimeout(h, 300);
+      if (!has(k, "_id")) {
+        a(k, _ === "canvas" ? null : _, dropIndex), setTimeout(h, 300);
         return;
       }
-      let A = j.getAttribute("data-block-id");
-      A === null && (A = g.target.parentElement.getAttribute("data-block-id")), c([y._id], A === "canvas" ? null : A, dropIndex), h(), setTimeout(removePlaceholder, 300);
+      let S = E.getAttribute("data-block-id");
+      S === null && (S = m.target.parentElement.getAttribute("data-block-id")), c([k._id], S === "canvas" ? null : S, dropIndex), h(), setTimeout(removePlaceholder, 300);
     },
-    onDragEnter: (g) => {
-      const j = g, b = j.target;
-      dropTarget = b;
-      const f = b.getAttribute("data-block-id"), y = b.getAttribute("data-dnd-dragged") !== "yes";
-      u(f), j.stopPropagation(), j.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(b), n(!0), l(""), i([]);
+    onDragEnter: (m) => {
+      const E = m, y = E.target;
+      dropTarget = y;
+      const g = y.getAttribute("data-block-id"), k = y.getAttribute("data-dnd-dragged") !== "yes";
+      u(g), E.stopPropagation(), E.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(y), n(!0), l(""), i([]);
     },
-    onDragLeave: (g) => {
-      g.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (m) => {
+      m.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3400,31 +3341,29 @@ const useHandleCanvasDblClick = () => {
   const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], r = useUpdateBlocksProps(), [n, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight();
   return (i) => {
     var h;
-    if (n)
-      return;
+    if (n) return;
     const c = getTargetedBlock(i.target), d = c.getAttribute("data-block-type");
     if (!d || !o.includes(d))
       return;
     const p = c.cloneNode(!0);
-    c.style.display = "none", Array.from(p.attributes).forEach((g) => {
-      g.name !== "class" && p.removeAttribute(g.name);
+    c.style.display = "none", Array.from(p.attributes).forEach((m) => {
+      m.name !== "class" && p.removeAttribute(m.name);
     }), d === "Text" && (p.style.display = "inline-block"), c.parentNode.insertBefore(p, c.nextSibling);
     const u = new Quill(p, { placeholder: "Type here..." });
     function x() {
-      const g = u.getText(0, u.getLength());
-      r([c.getAttribute("data-block-id")], { content: g }), c.removeAttribute("style"), p.removeEventListener("blur", x, !0), destroyQuill(u), a(""), l(), p.remove();
+      const m = u.getText(0, u.getLength());
+      r([c.getAttribute("data-block-id")], { content: m }), c.removeAttribute("style"), p.removeEventListener("blur", x, !0), destroyQuill(u), a(""), l(), p.remove();
     }
-    p.addEventListener("blur", x, !0), p.addEventListener("click", (g) => {
-      g.stopPropagation();
-    }), p.addEventListener("keydown", (g) => {
-      (g.key === "Enter" || g.key === "Escape") && x();
+    p.addEventListener("blur", x, !0), p.addEventListener("click", (m) => {
+      m.stopPropagation();
+    }), p.addEventListener("keydown", (m) => {
+      (m.key === "Enter" || m.key === "Escape") && x();
     }), u.focus(), (h = p.querySelector(".ql-clipboard")) == null || h.remove(), a(c.getAttribute("data-block-id"));
   };
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [r, n] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
   return (c) => {
-    if (a)
-      return;
+    if (a) return;
     c.stopPropagation();
     const d = getTargetedBlock(c.target);
     if (d != null && d.getAttribute("data-block-id") && (d == null ? void 0 : d.getAttribute("data-block-id")) === "container") {
@@ -3443,8 +3382,7 @@ const useHandleCanvasDblClick = () => {
 }, useHandleMouseMove = () => {
   const [o] = useAtom$1(inlineEditingActiveAtom), { highlightBlock: r } = useBlockHighlight();
   return throttle((n) => {
-    if (o)
-      return;
+    if (o) return;
     const a = getTargetedBlock(n.target);
     a && r(a);
   }, 20);
@@ -3459,10 +3397,10 @@ const useHandleCanvasDblClick = () => {
         return;
       const h = getElementByDataBlockId(r, first(n));
       if (h) {
-        const g = h.getAttribute("data-style-prop");
-        if (g) {
-          const j = h.getAttribute("data-style-id"), b = h.getAttribute("data-block-parent");
-          l([{ id: j, prop: g, blockId: b }]);
+        const m = h.getAttribute("data-style-prop");
+        if (m) {
+          const E = h.getAttribute("data-style-id"), y = h.getAttribute("data-block-parent");
+          l([{ id: E, prop: m, blockId: y }]);
         }
       }
     }, 100);
@@ -3483,23 +3421,23 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, getElementByDataBlockId = (o, r) => o.querySelector(`[data-block-id="${r}"]`), useKeyEventWatcher = (o) => {
-  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: h } = usePasteBlocks(), g = o ? { document: o } : {};
+  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: h } = usePasteBlocks(), m = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(r), {}, [r, p]), useHotkeys("ctrl+c,command+c", () => u(r), {}, [r, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
       x(r[0]) && h(r);
     },
-    { ...g, preventDefault: !0 },
+    { ...m, preventDefault: !0 },
     [r, x, h]
-  ), useHotkeys("esc", () => n([]), g, [n]), useHotkeys("ctrl+d,command+d", () => i(r), { ...g, preventDefault: !0 }, [
+  ), useHotkeys("esc", () => n([]), m, [n]), useHotkeys("ctrl+d,command+d", () => i(r), { ...m, preventDefault: !0 }, [
     r,
     i
   ]), useHotkeys(
     "del, backspace",
-    (j) => {
-      j.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
+    (E) => {
+      E.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
     },
-    g,
+    m,
     [r, l]
   );
 }, KeyboardHandler = () => {
@@ -3512,7 +3450,7 @@ const useHandleCanvasDblClick = () => {
 };
 class PubSub {
   constructor() {
-    H(this, "subscribers", /* @__PURE__ */ new Map());
+    O(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(r, n) {
     return this.subscribers.has(r) || this.subscribers.set(r, /* @__PURE__ */ new Set()), this.subscribers.get(r).add(n), () => {
@@ -3552,7 +3490,7 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
     }
   });
   useResizeObserver(o, () => x(), o !== null);
-  const h = get(r, "_parent", null), g = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
+  const h = get(r, "_parent", null), m = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
   return !o || !r || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -3560,13 +3498,13 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
       tabIndex: 0,
       ref: u.setFloating,
       style: p,
-      onClick: (j) => {
-        j.stopPropagation(), j.preventDefault();
+      onClick: (E) => {
+        E.stopPropagation(), E.preventDefault();
       },
-      onMouseEnter: (j) => {
-        j.stopPropagation(), i(null);
+      onMouseEnter: (E) => {
+        E.stopPropagation(), i(null);
       },
-      onKeyDown: (j) => j.stopPropagation(),
+      onKeyDown: (E) => E.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         h && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3578,7 +3516,7 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: g, block: r }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: m, block: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 px-1", children: [
           canAddChildBlock(get(r, "_type", "")) && /* @__PURE__ */ jsxRuntimeExports.jsx(
             PlusIcon,
@@ -3598,7 +3536,7 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
     d == null ? void 0 : d.getElementById("selected-block")
   ), [h] = useState(
     d == null ? void 0 : d.getElementById("selected-styling-block")
-  ), [g] = useState(
+  ), [m] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
   );
   useEffect(() => {
@@ -3623,42 +3561,42 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: f, theme: y }) {
-          f({
+        plugin(function({ addBase: g, theme: k }) {
+          g({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: y("fontFamily.heading")
+              fontFamily: k("fontFamily.heading")
             },
             body: {
-              fontFamily: y("fontFamily.body"),
-              color: y("colors.foreground"),
-              backgroundColor: y("colors.background")
+              fontFamily: k("fontFamily.body"),
+              color: k("colors.foreground"),
+              backgroundColor: k("colors.background")
             }
           });
         })
       ]
     });
   }, [o, r, p]), useEffect(() => {
-    x && (x.textContent = `${map(n, (f) => `[data-block-id="${f}"]`).join(",")}{
+    x && (x.textContent = `${map(n, (g) => `[data-block-id="${g}"]`).join(",")}{
                 outline: 1px solid ${n.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [n, x]), useEffect(() => {
-    g.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [i, g]), useEffect(() => {
+    m.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [i, m]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    h && (h.textContent = `${map(l, ({ id: f }) => `[data-style-id="${f}"]`).join(",")}{
+    h && (h.textContent = `${map(l, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
   }, [l, h]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
-  const j = useMemo(
+  const E = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
-  ), b = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
+  ), y = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { id: "chai-theme", children: j }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: b } })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { id: "chai-theme", children: E }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: y } })
   ] });
 }, useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), useCanvasSettings = () => useAtom$1(canvasSettingsAtom), isVisibleAtBreakpoint = (o, r) => {
   const n = ["xs", "sm", "md", "lg", "xl", "2xl"], a = n.indexOf(r), l = o.split(" ");
@@ -3670,11 +3608,11 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
     if (u <= a) {
       const x = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], h = ["hidden"];
       if (x.includes(p))
-        for (let g = u; g < n.length; g++)
-          i[g] = !0;
+        for (let m = u; m < n.length; m++)
+          i[m] = !0;
       else if (h.includes(p))
-        for (let g = u; g < n.length; g++)
-          i[g] = !1;
+        for (let m = u; m < n.length; m++)
+          i[m] = !1;
     }
   }
   return i[a];
@@ -3725,79 +3663,75 @@ const getRuntimeProps = memoize((o) => {
   return Object.fromEntries(Object.entries(n).filter(([, a]) => get(a, "runtime", !1)));
 });
 function isDescendant(o, r, n) {
-  if (!find(n, { _id: o }))
-    return !1;
+  if (!find(n, { _id: o })) return !1;
   const l = filter(n, { _parent: o });
   return l.some((i) => i._id === r) ? !0 : l.some((i) => isDescendant(i._id, r, n));
 }
 const RenderGlobalBlock = ({ blocks: o, allBlocks: r }) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: o });
 function applyLanguage(o, r, n) {
-  if (isEmpty(r))
-    return o;
+  if (isEmpty(r)) return o;
   const a = cloneDeep(o);
   return forEach(keys(a), (l) => {
     includes(get(n, "i18nProps", []), l) && !isEmpty(r) && (a[l] = get(a, `${l}-${r}`, a[l]));
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: r }) {
-  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: x } = useGlobalBlocksStore(), h = useCallback((f) => getStyleAttrs(f, d), [d]), [g] = useChaiExternalData(), [j] = useAtom$1(inlineEditingActiveAtom), b = useCallback(
-    (f) => f.reduce((y, v) => {
-      const B = get(p, v, {});
-      return { ...y, ...B };
+  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: x } = useGlobalBlocksStore(), h = useCallback((g) => getStyleAttrs(g, d), [d]), [m] = useChaiExternalData(), [E] = useAtom$1(inlineEditingActiveAtom), y = useCallback(
+    (g) => g.reduce((k, _) => {
+      const A = get(p, _, {});
+      return { ...k, ...A };
     }, {}),
     [p]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((f, y) => {
-      if (j === f._id || u.includes(f._id))
-        return null;
-      const v = {}, B = filter(r, { _parent: f._id });
-      if (v.children = B.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: B }) : null, f._type === "GlobalBlock") {
-        const C = x(f);
-        v.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(C, (N) => !N._parent), allBlocks: C });
+    o.map((g, k) => {
+      if (E === g._id || u.includes(g._id)) return null;
+      const _ = {}, A = filter(r, { _parent: g._id });
+      if (_.children = A.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: A }) : null, g._type === "GlobalBlock") {
+        const N = x(g);
+        _.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(N, (D) => !D._parent), allBlocks: N });
       }
-      const A = getRegisteredChaiBlock(f._type), S = get(A, "component", null);
-      if (isNull(S))
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${f == null ? void 0 : f._type} not registered -->` });
-      const k = has(A, "getBlockStateFrom") ? A == null ? void 0 : A.getBlockStateFrom(f, r) : [], T = b(k), _ = h(f);
-      if (get(_, "__isHidden", !1) && !includes(a, f._id))
+      const S = getRegisteredChaiBlock(g._type), v = get(S, "component", null);
+      if (isNull(v)) return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${g == null ? void 0 : g._type} not registered -->` });
+      const R = has(S, "getBlockStateFrom") ? S == null ? void 0 : S.getBlockStateFrom(g, r) : [], f = y(R), j = h(g);
+      if (get(j, "__isHidden", !1) && !includes(a, g._id))
         return null;
-      const P = i && isDescendant(i._id, f._id, r), E = {
+      const w = i && isDescendant(i._id, g._id, r), C = {
         blockProps: {
-          ...includes(a, f._id) ? { "force-show": "" } : {},
-          "data-block-id": f._id,
-          "data-block-type": f._type,
+          ...includes(a, g._id) ? { "force-show": "" } : {},
+          "data-block-id": g._id,
+          "data-block-type": g._type,
           ...i ? (
             // @ts-ignore
             {
-              "data-dnd": canAcceptChildBlock(f._type, i == null ? void 0 : i._type) ? "yes" : "no",
-              "data-dnd-dragged": i._id === f._id || P ? "yes" : "no"
+              "data-dnd": canAcceptChildBlock(g._type, i == null ? void 0 : i._type) ? "yes" : "no",
+              "data-dnd-dragged": i._id === g._id || w ? "yes" : "no"
             }
           ) : {},
-          ...c === f._id && !P ? { "data-drop": "yes" } : {},
-          ...includes(l, f._id) ? { "data-cut-block": "yes" } : {}
+          ...c === g._id && !w ? { "data-drop": "yes" } : {},
+          ...includes(l, g._id) ? { "data-cut-block": "yes" } : {}
         },
-        index: y,
-        ...applyBindings(applyLanguage(f, n, A), g),
-        ...omit(_, ["__isHidden"]),
-        ...v,
+        index: k,
+        ...applyBindings(applyLanguage(g, n, S), m),
+        ...omit(j, ["__isHidden"]),
+        ..._,
         inBuilder: !0,
-        blockState: T,
+        blockState: f,
         lang: n
       };
-      if (has(A, "dataProvider"))
+      if (has(S, "dataProvider"))
         return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           AsyncPropsBlock,
           {
             lang: n,
-            dataProvider: A.dataProvider,
-            block: f,
-            component: S,
-            props: E
+            dataProvider: S.dataProvider,
+            block: g,
+            component: v,
+            props: C
           }
         ) });
-      const R = getRuntimeProps(f._type);
-      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuntimePropsBlock, { runtimeProps: R, block: f, component: S, props: E }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(S, E) });
+      const B = getRuntimeProps(g._type);
+      return B ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuntimePropsBlock, { runtimeProps: B, block: g, component: v, props: C }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(v, C) });
     })
   ) });
 }
@@ -3857,47 +3791,46 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, h] = useState([]), [, g] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [b, f] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), B = (k) => {
-    p((T) => ({ ...T, width: k }));
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, h] = useState([]), [, m] = useState([]), [, E] = useAtom$1(canvasIframeAtom), [y, g] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), _ = useBuilderProp("htmlDir", "ltr"), A = (R) => {
+    p((f) => ({ ...f, width: R }));
   };
   useEffect(() => {
-    if (!c.current)
-      return;
-    const { clientWidth: k, clientHeight: T } = c.current;
-    p({ width: k, height: T });
+    if (!c.current) return;
+    const { clientWidth: R, clientHeight: f } = c.current;
+    p({ width: R, height: f });
   }, [c, r]);
-  const A = (k, T = 0) => {
-    const { top: _ } = k.getBoundingClientRect();
-    return _ + T >= 0 && _ - T <= window.innerHeight;
+  const S = (R, f = 0) => {
+    const { top: j } = R.getBoundingClientRect();
+    return j + f >= 0 && j - f <= window.innerHeight;
   };
   useEffect(() => {
-    var k, T;
+    var R, f;
     if (a && a.type !== "Multiple" && i.current) {
-      const _ = getElementByDataBlockId(i.current.contentDocument, a._id);
-      _ && (A(_) || (T = (k = i.current) == null ? void 0 : k.contentWindow) == null || T.scrollTo({ top: _.offsetTop, behavior: "smooth" }), h([_]));
+      const j = getElementByDataBlockId(i.current.contentDocument, a._id);
+      j && (S(j) || (f = (R = i.current) == null ? void 0 : R.contentWindow) == null || f.scrollTo({ top: j.offsetTop, behavior: "smooth" }), h([j]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(b) && i.current) {
-      const k = getElementByStyleId(
+    if (!isEmpty(y) && i.current) {
+      const R = getElementByStyleId(
         i.current.contentDocument,
-        first(b).id
+        first(y).id
       );
-      g(k ? [k] : [null]);
+      m(R ? [R] : [null]);
     } else
-      g([null]);
-  }, [b]);
-  const S = useMemo(() => {
-    let k = IframeInitialContent;
-    return k = k.replace("__HTML_DIR__", v), o === "offline" && (k = k.replace(
+      m([null]);
+  }, [y]);
+  const v = useMemo(() => {
+    let R = IframeInitialContent;
+    return R = R.replace("__HTML_DIR__", _), o === "offline" && (R = R.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
-    ), k = k.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), k = k.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), k;
-  }, [o, v]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: B, onResize: B, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ), R = R.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), R = R.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), R;
+  }, [o, _]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: A, onResize: A, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
-        n([]), f([]);
+        n([]), g([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3905,12 +3838,12 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => j(i.current),
+          contentDidMount: () => E(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${r}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: S,
+          initialContent: v,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3922,7 +3855,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(HeadTags, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Canvas, { children: [
-              y ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StaticBlocksRenderer, {}),
+              k ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StaticBlocksRenderer, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlockAtBottom, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -3940,7 +3873,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       )
     }
   ) });
-}, StaticCanvas$1 = StaticCanvas, FallbackError = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
+}, FallbackError = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Please try again." })
 ] }) }), TypeIcon = (o) => {
@@ -4040,14 +3973,14 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       l !== o.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-f8Ud0q2D.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-iLT-zqjH.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), r = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas, {}) }) }),
     o ? /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Resizable, { enable: { top: !0, bottom: !1 }, className: "max-h-[400px] min-h-[200px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CodeEditor$1, {}) }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb, {})
   ] }) });
-}, CanvasArea$1 = CanvasArea, FONTS = [
+}, FONTS = [
   { title: "Roboto", value: "Roboto" },
   { title: "Open Sans", value: "Open Sans" },
   { title: "Montserrat", value: "Montserrat" },
@@ -4114,7 +4047,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       children: FONTS.map((a) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: a.value, children: a.title }, a.value))
     }
   )
-] }), FontSelector$1 = FontSelector, ColorPickerInput = ({ value: o, onChange: r }) => {
+] }), ColorPickerInput = ({ value: o, onChange: r }) => {
   const n = debounce((a) => r(a), 200);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -4135,7 +4068,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       )
     }
   );
-}, ColorPickerInput$1 = ColorPickerInput, BorderRadiusInput = ({ value: o, onChange: r, disabled: n }) => {
+}, BorderRadiusInput = ({ value: o, onChange: r, disabled: n }) => {
   const a = debounce((l) => r(l), 200);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "input",
@@ -4150,64 +4083,64 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       className: "flex-1 cursor-pointer"
     }
   );
-}, BorderRadiusInput$1 = BorderRadiusInput, ThemeConfigPanel$1 = React.memo(({ className: o = "" }) => {
-  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), [i, c] = useTheme(), d = useThemeOptions(), { t: p } = useTranslation(), u = (f) => {
-    a(f);
+}, ThemeConfigPanel$1 = React.memo(({ className: o = "" }) => {
+  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), [i, c] = useTheme(), d = useThemeOptions(), { t: p } = useTranslation(), u = (g) => {
+    a(g);
   }, x = () => {
-    const f = l.find((y) => Object.keys(y)[0] === n);
-    if (f) {
-      const y = Object.values(f)[0];
-      y && typeof y == "object" && "fontFamily" in y && "borderRadius" in y && "colors" in y ? c(y) : console.error("Invalid preset structure:", y);
+    const g = l.find((k) => Object.keys(k)[0] === n);
+    if (g) {
+      const k = Object.values(g)[0];
+      k && typeof k == "object" && "fontFamily" in k && "borderRadius" in k && "colors" in k ? c(k) : console.error("Invalid preset structure:", k);
     } else
       console.error("Preset not found:", n);
   }, h = useDebouncedCallback(
-    (f, y) => {
+    (g, k) => {
       c(() => ({
         ...i,
         fontFamily: {
           ...i.fontFamily,
-          [f.replace(/font-/g, "")]: y
+          [g.replace(/font-/g, "")]: k
         }
       }));
     },
     [i],
     200
-  ), g = useDebouncedCallback(
-    (f) => {
+  ), m = useDebouncedCallback(
+    (g) => {
       c(() => ({
         ...i,
-        borderRadius: `${f}px`
+        borderRadius: `${g}px`
       }));
     },
     [i],
     200
-  ), j = useDebouncedCallback(
-    (f, y) => {
+  ), E = useDebouncedCallback(
+    (g, k) => {
       c(() => {
-        const v = get(i, `colors.${f}`);
-        return r ? set(v, 1, y) : set(v, 0, y), {
+        const _ = get(i, `colors.${g}`);
+        return r ? set(_, 1, k) : set(_, 0, k), {
           ...i,
           colors: {
             ...i.colors,
-            [f]: v
+            [g]: _
           }
         };
       });
     },
     [i],
     200
-  ), b = (f) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(f.items).map(([y]) => {
-    const v = get(i, `colors.${y}.${r ? 1 : 0}`);
+  ), y = (g) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(g.items).map(([k]) => {
+    const _ = get(i, `colors.${k}.${r ? 1 : 0}`);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ColorPickerInput$1,
+        ColorPickerInput,
         {
-          value: v,
-          onChange: (B) => j(y, B)
+          value: _,
+          onChange: (A) => E(k, A)
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: y.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((B) => B.charAt(0).toUpperCase() + B.slice(1)).join(" ") + (!y.toLowerCase().includes("foreground") && !y.toLowerCase().includes("border") && !y.toLowerCase().includes("input") && !y.toLowerCase().includes("ring") && !y.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, y);
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: k.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((A) => A.charAt(0).toUpperCase() + A.slice(1)).join(" ") + (!k.toLowerCase().includes("foreground") && !k.toLowerCase().includes("border") && !k.toLowerCase().includes("input") && !k.toLowerCase().includes("ring") && !k.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, k);
   }) });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("no-scrollbar h-full w-full overflow-y-auto", o), children: [
     l.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 py-2", children: [
@@ -4217,11 +4150,11 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
           "select",
           {
             value: n,
-            onChange: (f) => u(f.target.value),
+            onChange: (g) => u(g.target.value),
             className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select preset" }),
-              Array.isArray(l) && l.map((f) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: Object.keys(f)[0], children: capitalize(Object.keys(f)[0]) }, Object.keys(f)[0]))
+              Array.isArray(l) && l.map((g) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: Object.keys(g)[0], children: capitalize(Object.keys(g)[0]) }, Object.keys(g)[0]))
             ]
           }
         )
@@ -4229,25 +4162,25 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "w-full text-sm", disabled: n === "", variant: "default", onClick: x, children: p("Apply") }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("space-y-2", o), children: [
-      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([f, y]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        FontSelector$1,
+      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([g, k]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FontSelector,
         {
-          label: f,
-          value: i.fontFamily[f.replace(/font-/g, "")] || y[Object.keys(y)[0]],
-          onChange: (v) => h(f, v)
+          label: g,
+          value: i.fontFamily[g.replace(/font-/g, "")] || k[Object.keys(k)[0]],
+          onChange: (_) => h(g, _)
         },
-        f
+        g
       )) }),
       (d == null ? void 0 : d.borderRadius) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-0.5 py-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: p("Border Radius") }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(BorderRadiusInput$1, { value: i.borderRadius, onChange: g }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(BorderRadiusInput, { value: i.borderRadius, onChange: m }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-12 text-sm", children: i.borderRadius })
         ] })
       ] }),
       (d == null ? void 0 : d.colors) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-0.5", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: p("Colors") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full space-y-4 pt-2", children: d.colors.map((f) => b(f)) }, r ? "dark" : "light")
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full space-y-4 pt-2", children: d.colors.map((g) => y(g)) }, r ? "dark" : "light")
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -4255,9 +4188,9 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
   ] });
-}), ThemeConfigPanel$2 = ThemeConfigPanel$1, ThemeConfigPanel$3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), ThemeConfigPanel$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: ThemeConfigPanel$2
+  default: ThemeConfigPanel$1
 }, Symbol.toStringTag, { value: "Module" })), placeholderStyle = {
   display: "flex",
   alignItems: "center",
@@ -4291,7 +4224,33 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       ] })
     }
   ) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "hidden" });
-}), CopyPasteBlocks = () => {
+}), PasteAtRootContextMenu = ({ parentContext: o, setParentContext: r }) => {
+  const { t: n } = useTranslation(), { canPaste: a, pasteBlocks: l } = usePasteBlocks();
+  return useEffect(() => {
+    a("root") || r(null);
+  }, [a("root")]), o && a("root") && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      style: { position: "absolute", top: o.y - 75, left: o.x - 56 },
+      onMouseLeave: () => r(null),
+      className: "w-28 rounded-md border bg-white p-1 shadow-xl",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "flex cursor-pointer items-center gap-x-4 rounded px-2 py-1 text-xs hover:bg-blue-50",
+          onClick: () => {
+            l("root"), r(null);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CardStackIcon, {}),
+            " ",
+            n("Paste")
+          ]
+        }
+      )
+    }
+  );
+}, CopyPasteBlocks = () => {
   const [o] = useBlocksStore(), [r] = useSelectedBlockIds(), { pasteBlocks: n } = usePasteBlocks(), [, a] = useCopyBlockIds(), { t: l } = useTranslation(), i = useSelectedBlock(), c = useCallback(() => {
     const d = r.map((p) => {
       const u = o.find((x) => x._id === p);
@@ -4445,50 +4404,50 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
   var I;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: h } = useBlockHighlight(), { id: g, data: j, isSelected: b, willReceiveDrop: f, isDragging: y, isEditing: v, handleClick: B } = o, A = (w) => {
-    w.stopPropagation(), !i.includes(g) && o.toggle();
-  }, S = (w) => {
-    w.isInternal && (p = w.isOpen, w.isOpen && w.close());
-  }, k = (w) => {
-    w.isInternal && p !== null && (p ? w.open() : w.close(), p = null);
-  }, [T, _] = useAtom$1(currentAddSelection), P = () => {
-    var w;
-    m(), o.parent.isSelected || _((w = o == null ? void 0 : o.parent) == null ? void 0 : w.id);
-  }, m = () => {
-    _(null);
-  }, E = (w) => {
-    m(), w.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), B(w);
+  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: h } = useBlockHighlight(), { id: m, data: E, isSelected: y, willReceiveDrop: g, isDragging: k, isEditing: _, handleClick: A } = o, S = (T) => {
+    T.stopPropagation(), !i.includes(m) && o.toggle();
+  }, v = (T) => {
+    T.isInternal && (p = T.isOpen, T.isOpen && T.close());
+  }, R = (T) => {
+    T.isInternal && p !== null && (p ? T.open() : T.close(), p = null);
+  }, [f, j] = useAtom$1(currentAddSelection), w = () => {
+    var T;
+    b(), o.parent.isSelected || j((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+  }, b = () => {
+    j(null);
+  }, C = (T) => {
+    b(), T.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), A(T);
   };
   useEffect(() => {
-    const w = setTimeout(() => {
-      f && !o.isOpen && !y && !i.includes(g) && o.toggle();
+    const T = setTimeout(() => {
+      g && !o.isOpen && !k && !i.includes(m) && o.toggle();
     }, 500);
-    return () => clearTimeout(w);
-  }, [f, o, y]);
-  const R = useMemo(() => {
-    const w = Object.keys(j), $ = [];
-    for (let L = 0; L < w.length; L++)
-      if (w[L].endsWith("_attrs")) {
-        const M = j[w[L]], D = Object.keys(M).join("|");
-        D.match(/x-data/) && $.push("data"), D.match(/x-on/) && $.push("event"), D.match(/x-show|x-if/) && $.push("show");
+    return () => clearTimeout(T);
+  }, [g, o, k]);
+  const B = useMemo(() => {
+    const T = Object.keys(E), L = [];
+    for (let P = 0; P < T.length; P++)
+      if (T[P].endsWith("_attrs")) {
+        const M = E[T[P]], $ = Object.keys(M).join("|");
+        $.match(/x-data/) && L.push("data"), $.match(/x-on/) && L.push("event"), $.match(/x-show|x-if/) && L.push("show");
       }
-    return $;
-  }, [j]), C = (w, $) => {
-    const L = d.contentDocument || d.contentWindow.document, M = L.querySelector(`[data-block-id=${w}]`);
-    M && M.setAttribute("data-drop", $);
-    const D = M.getBoundingClientRect(), O = d.getBoundingClientRect();
-    D.top >= O.top && D.left >= O.left && D.bottom <= O.bottom && D.right <= O.right || (L.documentElement.scrollTop = M.offsetTop - O.top);
-  }, N = (w) => {
-    m();
-    const $ = get(o, "parent.id");
-    $ !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: $, position: w }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: w });
+    return L;
+  }, [E]), N = (T, L) => {
+    const P = d.contentDocument || d.contentWindow.document, M = P.querySelector(`[data-block-id=${T}]`);
+    M && M.setAttribute("data-drop", L);
+    const $ = M.getBoundingClientRect(), H = d.getBoundingClientRect();
+    $.top >= H.top && $.left >= H.left && $.bottom <= H.bottom && $.right <= H.right || (P.documentElement.scrollTop = M.offsetTop - H.top);
+  }, D = (T) => {
+    b();
+    const L = get(o, "parent.id");
+    L !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: L, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
   };
-  return g === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
+  return m === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        onClick: () => N(-1),
+        onClick: () => D(-1),
         className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
@@ -4498,35 +4457,35 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: g, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: m, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      onMouseEnter: () => x(g),
+      onMouseEnter: () => x(m),
       onMouseLeave: () => h(),
-      onClick: E,
+      onClick: C,
       style: r,
-      "data-node-id": g,
-      ref: i.includes(g) ? null : n,
-      onDragStart: () => S(o),
-      onDragEnd: () => k(o),
-      onDragOver: (w) => {
-        w.preventDefault(), C(g, "yes");
+      "data-node-id": m,
+      ref: i.includes(m) ? null : n,
+      onDragStart: () => v(o),
+      onDragEnd: () => R(o),
+      onDragOver: (T) => {
+        T.preventDefault(), N(m, "yes");
       },
-      onDragLeave: (w) => {
-        w.preventDefault(), C(g, "no");
+      onDragLeave: (T) => {
+        T.preventDefault(), N(m, "no");
       },
-      onDrop: (w) => {
-        w.preventDefault(), C(g, "no");
+      onDrop: (T) => {
+        T.preventDefault(), N(m, "no");
       },
       children: [
         (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((I = o == null ? void 0 : o.parent) == null ? void 0 : I.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            onClick: (w) => {
-              w.stopPropagation(), N(o.childIndex);
+            onClick: (T) => {
+              T.stopPropagation(), D(o.childIndex);
             },
-            onMouseEnter: P,
-            onMouseLeave: m,
+            onMouseEnter: w,
+            onMouseLeave: b,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -4536,11 +4495,11 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
           {
             className: cn(
               "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",
-              f && canAcceptChildBlock(j._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === T ? "bg-purple-100" : "",
-              y && "opacity-20",
-              i.includes(g) ? "opacity-50" : ""
+              y ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
+              g && canAcceptChildBlock(E._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === f ? "bg-purple-100" : "",
+              k && "opacity-20",
+              i.includes(m) ? "opacity-50" : ""
             ),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
@@ -4548,50 +4507,50 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, 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__ */ jsxRuntimeExports.jsx("button", { onClick: A, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    children: u && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: S, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                       ChevronRight,
                       {
-                        className: `h-3 w-3 stroke-[3] ${b ? "text-slate-200" : "text-slate-400"}`
+                        className: `h-3 w-3 stroke-[3] ${y ? "text-slate-200" : "text-slate-400"}`
                       }
                     ) })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: j == null ? void 0 : j._type }),
-                  v ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: E == null ? void 0 : E._type }),
+                  _ ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     "div",
                     {
                       className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                      onDoubleClick: (w) => {
-                        w.stopPropagation(), o.edit(), o.deselect();
+                      onDoubleClick: (T) => {
+                        T.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (j == null ? void 0 : j._name) || (j == null ? void 0 : j._type.split("/").pop()) }),
-                        R.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
-                        R.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
-                        R.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (E == null ? void 0 : E._name) || (E == null ? void 0 : E._type.split("/").pop()) }),
+                        B.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
+                        B.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
+                        B.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
                       ]
                     }
                   )
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !i.includes(g) && a.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                !i.includes(m) && a.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
                       className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                       asChild: !0,
-                      children: React__default.createElement(w.item, { blockId: g })
+                      children: React__default.createElement(T.item, { blockId: m })
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: w.tooltip })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: T.tooltip })
                 ] })),
-                canAddChildBlock(j == null ? void 0 : j._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                canAddChildBlock(E == null ? void 0 : E._type) && !i.includes(m) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: g }),
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
                       children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "15" })
@@ -4603,8 +4562,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
-                      onClick: (w) => {
-                        w.stopPropagation(), c(g), o.isOpen && o.toggle();
+                      onClick: (T) => {
+                        T.stopPropagation(), c(m), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -4650,7 +4609,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     return canAcceptChildBlock(a, l);
   };
 }, ListTree = () => {
-  const [treeData] = useAtom$1(treeDSBlocks), [ids, setIds] = useSelectedBlockIds(), [cutBlocksIds] = useCutBlockIds(), [, setHiddenBlocks] = useHiddenBlockIds(), updateBlockProps = useUpdateBlocksProps(), [, setStyleBlocks] = useSelectedStylingBlocks(), { moveBlocks } = useBlocksStoreUndoableActions(), canMove = useCanMove(), treeRef = useRef(null), [, setTreeRef] = useAtom$1(treeRefAtom), { t } = useTranslation(), clearSelection = () => {
+  const [treeData] = useAtom$1(treeDSBlocks), [ids, setIds] = useSelectedBlockIds(), [cutBlocksIds] = useCutBlockIds(), [, setHiddenBlocks] = useHiddenBlockIds(), updateBlockProps = useUpdateBlocksProps(), [, setStyleBlocks] = useSelectedStylingBlocks(), { moveBlocks } = useBlocksStoreUndoableActions(), canMove = useCanMove(), treeRef = useRef(null), [, setTreeRef] = useAtom$1(treeRefAtom), { t } = useTranslation(), [parentContext, setParentContext] = useState(null), clearSelection = () => {
     setIds([]), setStyleBlocks([]);
   }, filteredTreeData = useMemo(() => {
     const o = (n, a) => n.filter((l) => !a.includes(l._id)).map((l) => ({
@@ -4663,15 +4622,14 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
   }, onMove = ({ dragIds: o, parentId: r, index: n }) => {
     canMove(o, r) && moveBlocks(o, r, n);
   }, onSelect = (o) => {
-    if (o.length === 0)
-      return;
+    if (o.length === 0) return;
     const r = o[0] ? o[0].id : "";
     setStyleBlocks([]), setIds([r]);
   }, onContextMenu = (o) => {
     var a;
-    o.preventDefault();
+    o.preventDefault(), parentContext && setParentContext(null);
     const r = o.target, n = r.getAttribute("data-node-id") || ((a = r.closest("[data-node-id]")) == null ? void 0 : a.getAttribute("data-node-id"));
-    n && (setStyleBlocks([]), setIds([n]));
+    n ? (setStyleBlocks([]), setIds([n])) : (setStyleBlocks([]), setIds([]), setParentContext({ x: o.clientX, y: o.clientY }));
   }, debouncedDisableDrop = useDebouncedCallback(
     ({ parentNode: o, dragNodes: r }) => {
       var n;
@@ -4680,11 +4638,9 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     [],
     300
   ), handleKeyDown = (e) => {
-    if (!treeRef.current)
-      return;
+    if (!treeRef.current) return;
     const tree = treeRef.current, selectedNode = tree.selectedNodes[0];
-    if (!selectedNode)
-      return;
+    if (!selectedNode) return;
     setIds[selectedNode.id], setStyleBlocks([]);
     const isLeaf = !selectedNode.isInternal, isClosed = !selectedNode.isOpen, isOpen = selectedNode.isOpen, shortcut = defaultShortcuts.find((s) => s.key === e.key && (!s.when || eval(s.when)));
     if (shortcut)
@@ -4727,86 +4683,88 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
       "+ ",
       t("Add Block")
     ] })
-  ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      id: "outline-view",
-      className: "no-scrollbar h-full overflow-y-auto text-sm",
-      onKeyDown: (o) => {
-        treeRef.current.isEditing || handleKeyDown(o);
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-end gap-x-2 pb-2 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                onClick: () => setHiddenBlocks([]),
-                variant: "outline",
-                className: "h-fit p-1 disabled:cursor-not-allowed disabled:opacity-50",
-                size: "sm",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Show hidden blocks") })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "h-fit p-1", onClick: () => {
-              var o;
-              return (o = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : o.openAll();
-            }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiExpandVertical, { size: "14" }) }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Expand all") })
+  ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        id: "outline-view",
+        className: "no-scrollbar h-full overflow-y-auto text-sm",
+        onKeyDown: (o) => {
+          treeRef.current.isEditing || handleKeyDown(o);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-end gap-x-2 pb-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  onClick: () => setHiddenBlocks([]),
+                  variant: "outline",
+                  className: "h-fit p-1 disabled:cursor-not-allowed disabled:opacity-50",
+                  size: "sm",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Show hidden blocks") })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "h-fit p-1", onClick: () => {
+                var o;
+                return (o = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : o.openAll();
+              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiExpandVertical, { size: "14" }) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Expand all") })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "h-fit p-1", onClick: () => {
+                var o;
+                return (o = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : o.closeAll();
+              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiCollapseVertical, { size: "14" }) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Collapse all") })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "h-fit p-1", onClick: () => {
-              var o;
-              return (o = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : o.closeAll();
-            }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiCollapseVertical, { size: "14" }) }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Collapse all") })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative z-[9999] ml-5 w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: 0 }),
-            className: "h-1 w-[90%] rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-[45%] top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[3] text-white" }) })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Tree,
-          {
-            ref: treeRef,
-            height: window.innerHeight - 160,
-            className: "no-scrollbar !h-full max-w-full space-y-1 !overflow-y-auto !overflow-x-hidden",
-            rowClassName: "flex items-center h-full border-b border-transparent",
-            selection: ids[0] || "",
-            onRename,
-            openByDefault: !1,
-            onMove,
-            data: [...filteredTreeData],
-            renderCursor: DefaultCursor,
-            onSelect,
-            childrenAccessor: (o) => o.children,
-            width: "100%",
-            rowHeight: 28,
-            renderDragPreview: DefaultDragPreview,
-            indent: 10,
-            onContextMenu,
-            disableDrop: debouncedDisableDrop,
-            idAccessor: "_id",
-            children: Node
-          }
-        )
-      ]
-    }
-  ) });
-}, Outline$1 = ListTree, hasVideoEmbed = (o) => {
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative z-[9999] ml-5 w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: 0 }),
+              className: "h-1 w-[90%] rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-[45%] top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[3] text-white" }) })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Tree,
+            {
+              ref: treeRef,
+              height: window.innerHeight - 160,
+              className: "no-scrollbar !h-full max-w-full space-y-1 !overflow-y-auto !overflow-x-hidden",
+              rowClassName: "flex items-center h-full border-b border-transparent",
+              selection: ids[0] || "",
+              onRename,
+              openByDefault: !1,
+              onMove,
+              data: [...filteredTreeData],
+              renderCursor: DefaultCursor,
+              onSelect,
+              childrenAccessor: (o) => o.children,
+              width: "100%",
+              rowHeight: 28,
+              renderDragPreview: DefaultDragPreview,
+              indent: 10,
+              onContextMenu,
+              disableDrop: debouncedDisableDrop,
+              idAccessor: "_id",
+              children: Node
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PasteAtRootContextMenu, { parentContext, setParentContext })
+  ] });
+}, hasVideoEmbed = (o) => {
   const r = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, n = /(?:https?:\/\/)?(?:www\.)?(player)?.vimeo\.com/;
   return r.test(o) || n.test(o);
 }, getVideoURLFromHTML = (o) => {
-  if (isEmpty(o))
-    return o;
+  if (isEmpty(o)) return o;
   const r = /<video[^>]+src=['"]([^'">]+)['"]/, n = /<iframe[^>]+src=['"]([^'">]+)['"]/, a = o.match(r), l = o.match(n), i = a ? a[1] : l ? l[1] : null, c = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, d = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
   return i && (c.test(i) || d.test(i)) ? i : o;
 }, NAME_ATTRIBUTES = ["chai-name", "data-chai-name"], ATTRIBUTE_MAP = {
@@ -4846,8 +4804,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
   ["Heading", "Paragraph", "Span", "ListItem", "Button", "Label", "TableCell", "Link", "RichText"],
   r._type
 ), getTextContent = (o) => o.map((r) => r.type === "text" ? get(r, "content", "") : isEmpty(r.children) ? "" : getTextContent(r.children)).join(""), getSanitizedValue = (o) => o === null ? "" : o, getAttrs = (o) => {
-  if (o.tagName === "svg")
-    return {};
+  if (o.tagName === "svg") return {};
   const r = {}, n = ATTRIBUTE_MAP[o.tagName] || {}, a = o.attributes;
   return forEach(a, ({ key: l, value: i }) => {
     if (!includes(NAME_ATTRIBUTES, l))
@@ -4857,12 +4814,10 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
           c && d ? i = `https://via.placeholder.com/${c == null ? void 0 : c.value}x${d == null ? void 0 : d.value}` : i = "https://via.placeholder.com/150x150";
         }
         set(r, n[l], getSanitizedValue(i));
-      } else
-        includes(["style", "class", "srcset"], l) || (has(r, "styles_attrs") || (r.styles_attrs = {}), startsWith(l, "@") && (l = l.replace("@", "x-on:")), r.styles_attrs[`${l}`] = getSanitizedValue(i));
+      } else includes(["style", "class", "srcset"], l) || (has(r, "styles_attrs") || (r.styles_attrs = {}), startsWith(l, "@") && (l = l.replace("@", "x-on:")), r.styles_attrs[`${l}`] = getSanitizedValue(i));
   }), delete r.class, r;
 }, getStyles = (o, r = "styles") => {
-  if (!o.attributes)
-    return { [r]: `${STYLES_KEY},` };
+  if (!o.attributes) return { [r]: `${STYLES_KEY},` };
   const n = find(o.attributes, { key: "class" });
   if (n) {
     const a = n.value;
@@ -4870,7 +4825,17 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
   }
   return { [r]: `${STYLES_KEY},` };
 }, getBlockProps = (o) => {
-  const r = get(o, "attributes", []), n = r.find((l) => l.key === "data-chai-richtext" || l.key === "chai-richtext"), a = r.find((l) => l.key === "data-chai-lightbox" || l.key === "chai-lightbox");
+  const r = get(o, "attributes", []), n = r.find((d) => d.key === "data-chai-richtext" || d.key === "chai-richtext"), a = r.find((d) => d.key === "data-chai-lightbox" || d.key === "chai-lightbox"), l = r.find((d) => d.key === "data-chai-dropdown" || d.key === "chai-dropdown"), i = r.find(
+    (d) => d.key === "data-chai-dropdown-button" || d.key === "chai-dropdown-button"
+  ), c = r.find(
+    (d) => d.key === "data-chai-dropdown-content" || d.key === "chai-dropdown-content"
+  );
+  if (l)
+    return { _type: "Dropdown" };
+  if (i)
+    return { _type: "DropdownButton" };
+  if (c)
+    return { _type: "DropdownContent" };
   if (n)
     return { _type: "RichText" };
   if (a)
@@ -4947,25 +4912,31 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     case "tfoot":
       return { _type: "TableFooter" };
     default: {
-      const l = get(o, "children", []).length > 0 ? "Box" : "EmptyBox";
+      const d = get(o, "children", []).length > 0 ? "Box" : "EmptyBox";
       return {
-        _type: l,
+        _type: d,
         tag: o.tagName,
-        _name: l == "EmptyBox" || o.tagName === "div" ? l : capitalize(o.tagName)
+        _name: d == "EmptyBox" || o.tagName === "div" ? d : capitalize(o.tagName)
       };
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var p, u, x, h, g, j, b, f;
-  if (n.type === "comment")
-    return [];
+  var h, m, E, y, g, k, _, A;
+  if (n.type === "comment") return [];
+  console.log("node ===>", n);
   let a = { _id: generateUUID() };
   if (r && (a._parent = r.block._id), n.type === "text")
     return isEmpty(get(n, "content", "")) ? [] : r && shouldAddText(r.node, r.block) ? (set(r, "block.content", get(n, "content", "")), []) : { ...a, _type: "Text", content: get(n, "content", "") };
   const l = get(n, "attributes", []), i = l.find(
-    (y) => y.key === "data-chai-richtext" || y.key === "chai-richtext"
+    (S) => S.key === "data-chai-richtext" || S.key === "chai-richtext"
   ), c = l.find(
-    (y) => y.key === "data-chai-lightbox" || y.key === "chai-lightbox"
+    (S) => S.key === "data-chai-lightbox" || S.key === "chai-lightbox"
+  ), d = l.find(
+    (S) => S.key === "data-chai-dropdown" || S.key === "chai-dropdown"
+  ), p = l.find(
+    (S) => S.key === "data-chai-dropdown-button" || S.key === "chai-dropdown-button"
+  ), u = l.find(
+    (S) => S.key === "data-chai-dropdown-content" || S.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -4973,13 +4944,13 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ...getAttrs(n),
     ...getStyles(n)
   }, n.attributes) {
-    const y = n.attributes.find((v) => includes(NAME_ATTRIBUTES, v.key));
-    y && (a._name = y.value);
+    const S = n.attributes.find((v) => includes(NAME_ATTRIBUTES, v.key));
+    S && (a._name = S.value);
   }
   if (i)
     return a.content = stringify(n.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (c) {
-    const y = [
+    const S = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -4991,33 +4962,57 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ];
     a = {
       ...a,
-      href: ((p = l.find((v) => v.key === "href")) == null ? void 0 : p.value) || "",
-      hrefType: ((u = l.find((v) => v.key === "data-vbtype")) == null ? void 0 : u.value) || "video",
-      autoplay: ((x = l.find((v) => v.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
-      maxWidth: ((g = (h = l.find((v) => v.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : g.replace("px", "")) || "",
-      backdropColor: ((j = l.find((v) => v.key === "data-overlay")) == null ? void 0 : j.value) || "",
-      galleryName: ((b = l.find((v) => v.key === "data-gall")) == null ? void 0 : b.value) || ""
-    }, forEach(y, (v) => {
+      href: ((h = l.find((v) => v.key === "href")) == null ? void 0 : h.value) || "",
+      hrefType: ((m = l.find((v) => v.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
+      autoplay: ((E = l.find((v) => v.key === "data-autoplay")) == null ? void 0 : E.value) === "true" ? "true" : "false",
+      maxWidth: ((g = (y = l.find((v) => v.key === "data-maxwidth")) == null ? void 0 : y.value) == null ? void 0 : g.replace("px", "")) || "",
+      backdropColor: ((k = l.find((v) => v.key === "data-overlay")) == null ? void 0 : k.value) || "",
+      galleryName: ((_ = l.find((v) => v.key === "data-gall")) == null ? void 0 : _.value) || ""
+    }, forEach(S, (v) => {
       has(a, `styles_attrs.${v}`) && delete a.styles_attrs[v];
     });
   }
+  if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
+    delete a.styles_attrs;
+    const S = filter(n.children || [], (R) => (R == null ? void 0 : R.tagName) !== "span");
+    a.content = getTextContent(S);
+    const v = find(
+      n.children || [],
+      (R) => (R == null ? void 0 : R.tagName) === "span" && some(R.children || [], (f) => (f == null ? void 0 : f.tagName) === "svg")
+    );
+    if (v) {
+      const R = find(v.children || [], (f) => (f == null ? void 0 : f.tagName) === "svg");
+      if (R) {
+        a.icon = stringify([R]);
+        const { height: f, width: j } = getSvgDimensions(R, "16px", "16px");
+        a.iconHeight = f, a.iconWidth = j;
+      }
+    }
+    return [a];
+  }
   if (a._type === "Input") {
-    const y = a.inputType || "text";
-    y === "checkbox" ? set(a, "_type", "Checkbox") : y === "radio" && set(a, "_type", "Radio");
+    const S = a.inputType || "text";
+    S === "checkbox" ? set(a, "_type", "Checkbox") : S === "radio" && set(a, "_type", "Radio");
   } else if (n.tagName === "video" || n.tagName === "iframe") {
-    const y = stringify([n]);
-    return hasVideoEmbed(y) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(y)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = y, [a];
+    const S = stringify([n]);
+    return hasVideoEmbed(S) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(S)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = S, [a];
   } else if (n.tagName === "svg") {
-    const y = find(n.attributes, { key: "height" }), v = find(n.attributes, { key: "width" }), B = get(y, "value") ? `[${get(y, "value")}px]` : "24px", A = get(v, "value") ? `[${get(v, "value")}px]` : "24px", S = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${A} h-${B}`, S)}`.trim(), n.attributes = filter(n.attributes, (k) => !includes(["style", "width", "height", "class"], k.key)), a.icon = stringify([n]), [a];
-  } else if (n.tagName == "option" && r && ((f = r.block) == null ? void 0 : f._type) === "Select")
+    const S = find(n.attributes, { key: "height" }), v = find(n.attributes, { key: "width" }), R = get(S, "value") ? `[${get(S, "value")}px]` : "24px", f = get(v, "value") ? `[${get(v, "value")}px]` : "24px", j = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${f} h-${R}`, j)}`.trim(), n.attributes = filter(n.attributes, (w) => !includes(["style", "width", "height", "class"], w.key)), a.icon = stringify([n]), [a];
+  } else if (n.tagName == "option" && r && ((A = r.block) == null ? void 0 : A._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
       ...getAttrs(n)
     }), [];
-  const d = traverseNodes(n.children, { block: a, node: n });
-  return [a, ...d];
-}), getSanitizedHTML = (o) => {
+  const x = traverseNodes(n.children, { block: a, node: n });
+  return [a, ...x];
+}), getSvgDimensions = (o, r, n) => {
+  const a = get(o, "attributes", []), l = find(a, { key: "height" }), i = find(a, { key: "width" });
+  return {
+    height: get(l, "value") ? `[${get(l, "value")}px]` : n,
+    width: get(i, "value") ? `[${get(i, "value")}px]` : r
+  };
+}, getSanitizedHTML = (o) => {
   o = o.replace(/(\w+)=\\?"(.*?)\\?"/g, (a, l, i) => {
     let c = i.replace(/\\"/g, '"');
     return c = c.replace(/{([^}]+)}/g, (d) => d.replace(/"/g, '\\"')), `${l}="${c.replace(/\\"/g, '"')}"`;
@@ -5052,7 +5047,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: a.trim() === "", onClick: () => c(), size: "sm", className: "w-fit", children: n("Import HTML") }) })
   ] });
-}, ImportHTML$1 = ImportHTML, BindingWidget = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), getSvgMarkup = (o) => {
+}, BindingWidget = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), getSvgMarkup = (o) => {
   try {
     const r = document.getElementById("icon-picker-field"), n = document.createElement("div");
     ReactDOM.render(/* @__PURE__ */ jsxRuntimeExports.jsx(IconPickerItem, { value: o }), n), r.appendChild(n), n.hidden = !0;
@@ -5133,13 +5128,13 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
   ] });
 };
 MediaManagerModal.displayName = "MediaManagerModal";
-const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
+const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   const l = useBuilderProp("mediaManagerComponent", null), { t: i } = useTranslation(), c = l !== null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1.5 flex items-center gap-x-3", children: [
-    o ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o, className: "h-20 w-20 overflow-hidden rounded-md border border-border object-cover", alt: "" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(MediaManagerModal$1, { onSelect: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-20 w-20 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
+    o ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o, className: "h-20 w-20 overflow-hidden rounded-md border border-border object-cover", alt: "" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(MediaManagerModal, { onSelect: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-20 w-20 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-3/5 flex-col", children: [
       c && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(MediaManagerModal$1, { onSelect: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: "h-6 cursor-pointer rounded-md bg-primary px-2 py-1 text-center text-xs text-white hover:bg-gray-500 dark:bg-gray-700", children: o || !isEmpty(o) ? i("Replace image") : i("Choose image") }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MediaManagerModal, { onSelect: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: "h-6 cursor-pointer rounded-md bg-primary px-2 py-1 text-center text-xs text-white hover:bg-gray-500 dark:bg-gray-700", children: o || !isEmpty(o) ? i("Replace image") : i("Choose image") }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: "-pl-4 pt-2 text-center text-xs text-gray-600", children: "OR" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5199,101 +5194,99 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   pageTypes: r,
   onChange: n
 }) => {
-  var P;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (m, E) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [h, g] = useState(""), [j, b] = useState([]), [f, y] = useState(-1), v = useRef(null), B = (P = r == null ? void 0 : r.find((m) => m.key === u)) == null ? void 0 : P.name;
+  var w;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (b, C) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [h, m] = useState(""), [E, y] = useState([]), [g, k] = useState(-1), _ = useRef(null), A = (w = r == null ? void 0 : r.find((b) => b.key === u)) == null ? void 0 : w.name;
   useEffect(() => {
-    if (g(""), b([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:"))
-      return;
-    const m = split(o, ":"), E = get(m, 1, "page") || "page";
-    x(E), (async () => {
-      const R = await l(E, [get(m, 2, "page")]);
-      R && Array.isArray(R) && g(get(R, [0, "name"], ""));
+    if (m(""), y([]), k(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    const b = split(o, ":"), C = get(b, 1, "page") || "page";
+    x(C), (async () => {
+      const B = await l(C, [get(b, 2, "page")]);
+      B && Array.isArray(B) && m(get(B, [0, "name"], ""));
     })();
   }, [o]);
-  const A = useDebouncedCallback(
-    async (m) => {
-      if (isEmpty(m))
-        b([]);
+  const S = useDebouncedCallback(
+    async (b) => {
+      if (isEmpty(b))
+        y([]);
       else {
-        const E = await l(u, m);
-        b(E);
+        const C = await l(u, b);
+        y(C);
       }
-      c(!1), y(-1);
+      c(!1), k(-1);
     },
     [u],
     300
-  ), S = (m) => {
-    const E = ["pageType", u, m.id];
-    E[1] && (n(E.join(":")), g(m.name), p(!1), b([]), y(-1));
-  }, k = (m) => {
-    switch (m.key) {
+  ), v = (b) => {
+    const C = ["pageType", u, b.id];
+    C[1] && (n(C.join(":")), m(b.name), p(!1), y([]), k(-1));
+  }, R = (b) => {
+    switch (b.key) {
       case "ArrowDown":
-        m.preventDefault(), y((E) => E < j.length - 1 ? E + 1 : E);
+        b.preventDefault(), k((C) => C < E.length - 1 ? C + 1 : C);
         break;
       case "ArrowUp":
-        m.preventDefault(), y((E) => E > 0 ? E - 1 : E);
+        b.preventDefault(), k((C) => C > 0 ? C - 1 : C);
         break;
       case "Enter":
-        if (m.preventDefault(), j.length === 0)
-          return;
-        f >= 0 && S(j[f]);
+        if (b.preventDefault(), E.length === 0) return;
+        g >= 0 && v(E[g]);
         break;
       case "Escape":
-        m.preventDefault(), T();
+        b.preventDefault(), f();
         break;
     }
   };
   useEffect(() => {
-    if (f >= 0 && v.current) {
-      const m = v.current.children[f];
-      m == null || m.scrollIntoView({ block: "nearest" });
+    if (g >= 0 && _.current) {
+      const b = _.current.children[g];
+      b == null || b.scrollIntoView({ block: "nearest" });
     }
-  }, [f]);
-  const T = () => {
-    g(""), b([]), y(-1), p(!1), n("");
-  }, _ = (m) => {
-    g(m), p(!isEmpty(m)), c(!0), A(m);
+  }, [g]);
+  const f = () => {
+    m(""), y([]), k(-1), p(!1), n("");
+  }, j = (b) => {
+    m(b), p(!isEmpty(b)), c(!0), S(b);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "pageType", value: u, onChange: (m) => x(m.target.value), children: map(r, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: m.key, children: m.name }, m.key)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "pageType", value: u, onChange: (b) => x(b.target.value), children: map(r, (b) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: b.key, children: b.name }, b.key)) }),
     u && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
           type: "text",
           value: h,
-          onChange: (m) => _(m.target.value),
-          onKeyDown: k,
-          placeholder: a(`Search ${B ?? ""}`),
+          onChange: (b) => j(b.target.value),
+          onKeyDown: R,
+          placeholder: a(`Search ${A ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: T, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: f, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(j) || d && isEmpty(j)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(E) || d && isEmpty(E)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(j) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(E) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       h,
       '"'
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: v, children: map(j == null ? void 0 : j.slice(0, 20), (m, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: _, children: map(E == null ? void 0 : E.slice(0, 20), (b, C) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => S(m),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(m.id) ? "bg-blue-200" : E === f ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => v(b),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(b.id) ? "bg-blue-200" : C === g ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          m.name,
+          b.name,
           " ",
-          m.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "font-light text-gray-500", children: [
+          b.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            m.slug,
+            b.slug,
             " )"
           ] })
         ]
       },
-      m.id
+      b.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: r, onChange: n }) => {
@@ -5350,8 +5343,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   ] });
 }, RowColField = () => {
   const o = useSelectedBlock(), r = useWrapperBlock(), { addCoreBlock: n } = useAddBlock();
-  if (!o && !r)
-    return null;
+  if (!o && !r) return null;
   const a = (o == null ? void 0 : o._type) === "Row" ? o : r;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -5367,8 +5359,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   ) });
 }, CodeEditor = ({ id: o, placeholder: r }) => {
   const { t: n } = useTranslation(), [, a] = useCodeEditor(), l = useSelectedBlock();
-  if (typeof window > "u")
-    return null;
+  if (typeof window > "u") return null;
   const i = o.replace("root.", ""), c = get(l, i, ""), d = () => {
     const p = l == null ? void 0 : l._id;
     a({ blockId: p, blockProp: i, placeholder: r, initialCode: get(l, i, c) });
@@ -5397,23 +5388,22 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   schema: u,
   formData: x
 }) => {
-  const { selectedLang: h, fallbackLang: g, languages: j } = useLanguages(), b = isEmpty(j) ? "" : isEmpty(h) ? g : h, f = get(LANGUAGES, b, b), y = useSelectedBlock(), v = useRegisteredChaiBlocks(), B = get(v, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [A, S] = useState(null);
+  const { selectedLang: h, fallbackLang: m, languages: E } = useLanguages(), y = isEmpty(E) ? "" : isEmpty(h) ? m : h, g = get(LANGUAGES, y, y), k = useSelectedBlock(), _ = useRegisteredChaiBlocks(), A = get(_, [k == null ? void 0 : k._type, "i18nProps"], []) || [], [S, v] = useState(null);
   if (d)
     return null;
-  if (u.type === "boolean")
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: r, children: a });
-  const T = B == null ? void 0 : B.includes(o.replace("root.", ""));
+  if (u.type === "boolean") return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: r, children: a });
+  const f = A == null ? void 0 : A.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const _ = A === o;
+    const j = S === o;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${r} relative`, children: [
       u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => S(_ ? null : o),
+          onClick: () => v(j ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            _ ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
+            j ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "leading-tight", children: n }),
             " ",
@@ -5421,7 +5411,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
           ]
         }
       ),
-      (x == null ? void 0 : x.length) === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${_ ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (x == null ? void 0 : x.length) === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${j ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         c,
         a,
         l,
@@ -5433,9 +5423,9 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
       n,
       " ",
-      T && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+      f && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
         " ",
-        f
+        g
       ] }),
       p && u.type !== "object" ? " *" : null
     ] }),
@@ -5498,8 +5488,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   );
 }), CanvasSettings = () => {
   const [o, r] = useAtom$1(xShowBlocksAtom), n = useSelectedBlock(), [, a] = useSelectedBlockIds(), { t: l } = useTranslation(), i = useMemo(() => (n ? JSON.stringify(n) : "").includes('"x-show"'), [n]);
-  if (!n || !i)
-    return null;
+  if (!n || !i) return null;
   const c = o.includes(n._id);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2 text-xs hover:no-underline", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 border-b border-border bg-background py-2 font-normal text-muted-foreground", children: [
@@ -5562,50 +5551,50 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   return set(n, o, r), n;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), h = getRegisteredChaiBlock(x == null ? void 0 : x._type), g = formDataWithSelectedLang(x, o, h), j = ({ formData: k }, T, _) => {
-    if (T && (c == null ? void 0 : c._id) === r._id) {
-      const P = T.replace("root.", "");
-      a([r._id], { [P]: get(k, P) }, _);
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), h = getRegisteredChaiBlock(x == null ? void 0 : x._type), m = formDataWithSelectedLang(x, o, h), E = ({ formData: R }, f, j) => {
+    if (f && (c == null ? void 0 : c._id) === r._id) {
+      const w = f.replace("root.", "");
+      a([r._id], { [w]: get(R, w) }, j);
     }
-  }, b = useCallback(
-    debounce(({ formData: k }, T, _) => {
-      j({ formData: k }, T, _), d(k);
+  }, y = useCallback(
+    debounce(({ formData: R }, f, j) => {
+      E({ formData: R }, f, j), d(R);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), f = ({ formData: k }, T) => {
-    if (T) {
-      const _ = T.replace("root.", "");
+  ), g = ({ formData: R }, f) => {
+    if (f) {
+      const j = f.replace("root.", "");
       n(
         [r._id],
-        convertDotNotationToObject(_, get(k, _.split(".")))
-      ), b({ formData: k }, T, { [_]: get(c, _) });
+        convertDotNotationToObject(j, get(R, j.split(".")))
+      ), y({ formData: R }, f, { [j]: get(c, j) });
     }
-  }, y = ({ formData: k }, T) => {
-    if (T) {
-      const _ = T.replace("root.", "");
+  }, k = ({ formData: R }, f) => {
+    if (f) {
+      const j = f.replace("root.", "");
       n(
         [x._id],
-        convertDotNotationToObject(_, get(k, _.split(".")))
-      ), b({ formData: k }, T, { [_]: get(c, _) });
+        convertDotNotationToObject(j, get(R, j.split(".")))
+      ), y({ formData: R }, f, { [j]: get(c, j) });
     }
   };
   keys(get(i, "_bindings", {}));
-  const { schema: v, uiSchema: B } = useMemo(() => {
-    const k = r == null ? void 0 : r._type;
-    if (k)
-      return getBlockFormSchemas(k);
-  }, [r]), { wrapperSchema: A, wrapperUiSchema: S } = useMemo(() => {
+  const { schema: _, uiSchema: A } = useMemo(() => {
+    const R = r == null ? void 0 : r._type;
+    if (R)
+      return getBlockFormSchemas(R);
+  }, [r]), { wrapperSchema: S, wrapperUiSchema: v } = useMemo(() => {
     if (!x || !(x != null && x._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const k = x == null ? void 0 : x._type, { schema: T = {}, uiSchema: _ = {} } = getBlockFormSchemas(k);
-    return { wrapperSchema: T, wrapperUiSchema: _ };
+    const R = x == null ? void 0 : x._type, { schema: f = {}, uiSchema: j = {} } = getBlockFormSchemas(R);
+    return { wrapperSchema: f, wrapperUiSchema: j };
   }, [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(x) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          onClick: () => u((k) => !k),
+          onClick: () => u((R) => !R),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -5624,21 +5613,21 @@ function BlockSettings() {
         JSONForm,
         {
           id: x == null ? void 0 : x._id,
-          onChange: y,
-          formData: g,
-          schema: A,
-          uiSchema: S
+          onChange: k,
+          formData: m,
+          schema: S,
+          uiSchema: v
         }
       )
     ] }),
-    isEmpty(v) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    isEmpty(_) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       JSONForm,
       {
         id: r == null ? void 0 : r._id,
-        onChange: f,
+        onChange: g,
         formData: i,
-        schema: v,
-        uiSchema: B
+        schema: _,
+        uiSchema: A
       }
     ),
     (r == null ? void 0 : r._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null,
@@ -5666,8 +5655,7 @@ function Countdown() {
         r(o - 0.1);
       }, 100);
       return () => clearTimeout(p);
-    } else
-      o <= 0 && (a(!1), r(SECONDS));
+    } else o <= 0 && (a(!1), r(SECONDS));
   }, [n, o]);
   const l = () => {
     a(!0), r(SECONDS);
@@ -5712,12 +5700,12 @@ function Countdown() {
 const AskAIStyles = ({ blockId: o }) => {
   const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, x] = useState();
   useEffect(() => {
-    var g;
-    (g = d.current) == null || g.focus();
+    var m;
+    (m = d.current) == null || m.focus();
   }, []);
-  const h = (g) => {
-    const { usage: j } = g || {};
-    !l && j && x(j), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
+  const h = (m) => {
+    const { usage: E } = m || {};
+    !l && E && x(E), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: r("Ask AI") }),
@@ -5726,12 +5714,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (g) => c(g.target.value),
+        onChange: (m) => c(m.target.value),
         placeholder: r("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
-        onKeyDown: (g) => {
-          g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, h));
+        onKeyDown: (m) => {
+          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, h));
         }
       }
     ),
@@ -5772,37 +5760,37 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var T;
-  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), h = (T = first(n)) == null ? void 0 : T.prop, g = reject((get(a, h, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), j = () => {
-    const _ = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l(c, _, !0), u("");
-  }, [b, f] = useState([]), y = ({ value: _ }) => {
-    const P = _.trim().toLowerCase(), m = P.match(/.+:/g);
-    let E = [];
-    if (m && m.length > 0) {
-      const [R] = m, C = P.replace(R, "");
-      E = o.search(C).map((I) => ({
+  var f;
+  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), h = (f = first(n)) == null ? void 0 : f.prop, m = reject((get(a, h, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), E = () => {
+    const j = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l(c, j, !0), u("");
+  }, [y, g] = useState([]), k = ({ value: j }) => {
+    const w = j.trim().toLowerCase(), b = w.match(/.+:/g);
+    let C = [];
+    if (b && b.length > 0) {
+      const [B] = b, N = w.replace(B, "");
+      C = o.search(N).map((I) => ({
         ...I,
-        item: { ...I.item, name: R + I.item.name }
+        item: { ...I.item, name: B + I.item.name }
       }));
     } else
-      E = o.search(P);
-    return f(map(E, "item"));
-  }, v = () => {
-    f([]);
-  }, B = (_) => _.name, A = (_) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: _.name }), S = {
+      C = o.search(w);
+    return g(map(C, "item"));
+  }, _ = () => {
+    g([]);
+  }, A = (j) => j.name, S = (j) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: j.name }), v = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: r("Enter classes separated by space"),
     value: p,
-    onKeyDown: (_) => {
-      _.key === "Enter" && p.trim() !== "" && j();
+    onKeyDown: (j) => {
+      j.key === "Enter" && p.trim() !== "" && E();
     },
-    onChange: (_, { newValue: P }) => u(P),
+    onChange: (j, { newValue: w }) => u(w),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, k = () => {
+  }, R = () => {
     if (navigator.clipboard === void 0) {
       x({
         title: r("Clipboard not supported"),
@@ -5811,7 +5799,7 @@ function ManualClasses() {
       });
       return;
     }
-    navigator.clipboard.writeText(g.join(" ")), x({
+    navigator.clipboard.writeText(m.join(" ")), x({
       title: r("Copied"),
       description: r("Classes copied to clipboard")
     });
@@ -5819,13 +5807,13 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `flex ${b.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto pb-4`,
+      className: `flex ${y.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto pb-4`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: r("Classes") }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: k, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: R, className: "cursor-pointer" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: r("Copy classes to clipboard") }) })
             ] })
           ] }),
@@ -5841,12 +5829,12 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Autosuggest,
             {
-              suggestions: b,
-              onSuggestionsFetchRequested: y,
-              onSuggestionsClearRequested: v,
-              getSuggestionValue: B,
-              renderSuggestion: A,
-              inputProps: S,
+              suggestions: y,
+              onSuggestionsFetchRequested: k,
+              onSuggestionsClearRequested: _,
+              getSuggestionValue: A,
+              renderSuggestion: S,
+              inputProps: v,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
               },
@@ -5862,7 +5850,7 @@ function ManualClasses() {
             {
               variant: "outline",
               className: "h-6 border-border",
-              onClick: j,
+              onClick: E,
               disabled: p.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {})
@@ -5870,22 +5858,22 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          g.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          m.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-border bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
               children: [
-                _,
+                j,
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Cross2Icon,
                   {
-                    onClick: () => i(c, [_]),
+                    onClick: () => i(c, [j]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            _
+            j
           ))
         ) })
       ]
@@ -6276,10 +6264,10 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: r }) => {
-  const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), h = get(u, "2", ""), g = useCallback(
+  const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), h = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
-    (f) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(f) ? (c([]), p({ color: f })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: f, shade: y.shade ? y.shade : "500" })));
+    (g) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (c([]), p({ color: g })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((k) => ({ ...k, color: g, shade: k.shade ? k.shade : "500" })));
     },
     [c, p]
   );
@@ -6288,28 +6276,28 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [x]);
-  const j = useCallback(
+  const E = useCallback(
     // eslint-disable-next-line no-shadow
-    (f) => {
-      p({ color: x, shade: f });
+    (g) => {
+      p({ color: x, shade: g });
     },
     [x]
   );
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [n]);
-  const { match: b } = useTailwindClassList();
+  const { match: y } = useTailwindClassList();
   return useEffect(() => {
-    const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    b(o, y) && r(y, o);
-  }, [b, d, r, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    const k = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    y(o, k) && r(k, o);
+  }, [y, d, r, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DropDown,
       {
         disabled: !l,
         rounded: !0,
         selected: x,
-        onChange: g,
+        onChange: m,
         options: [
           "current",
           "transparent",
@@ -6342,7 +6330,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: h, disabled: !x || !l, onChange: j, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: h, disabled: !x || !l, onChange: E, options: i }) })
   ] });
 }, getUserInputValues = (o, r) => {
   o = o.toLowerCase();
@@ -6357,12 +6345,9 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   const r = o.startsWith("-") ? "-" : "", n = o.split("-").pop();
   if (["auto", "none"].includes(n))
     return { value: "", unit: n };
-  if (n === "px")
-    return { value: "1", unit: "px" };
-  if (n === "screen")
-    return { value: "100", unit: o.indexOf("w-") !== -1 ? "vw" : "vh" };
-  if (n === "full")
-    return { value: "100", unit: "%" };
+  if (n === "px") return { value: "1", unit: "px" };
+  if (n === "screen") return { value: "100", unit: o.indexOf("w-") !== -1 ? "vw" : "vh" };
+  if (n === "full") return { value: "100", unit: "%" };
   if (includes(o, "skew-"))
     return { value: `${r}${n}`, unit: "deg" };
   if (includes(o, "rotate-"))
@@ -6377,105 +6362,60 @@ const RangeChoices = ({ property: o, onChange: r }) => {
     return { value: `${r}${`${n / 100}`}`, unit: "-" };
   if (startsWith(o, "border")) {
     const a = o.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (a)
-      return { value: a[0].split("-").pop(), unit: "px" };
-    if (o.match(/border-?(x|y|t|r|b|l)?/g))
-      return { value: "1", unit: "px" };
+    if (a) return { value: a[0].split("-").pop(), unit: "px" };
+    if (o.match(/border-?(x|y|t|r|b|l)?/g)) return { value: "1", unit: "px" };
   }
   if (startsWith(o, "max-w-")) {
-    if (o === "max-w-screen-sm")
-      return { value: "640", unit: "px" };
-    if (o === "max-w-screen-md")
-      return { value: "768", unit: "px" };
-    if (o === "max-w-screen-lg")
-      return { value: "1024", unit: "px" };
-    if (o === "max-w-screen-xl")
-      return { value: "1280", unit: "px" };
-    if (o === "max-w-screen-2xl")
-      return { value: "1536", unit: "px" };
-    if (n === "xs")
-      return { value: "320", unit: "px" };
-    if (n === "sm")
-      return { value: "384", unit: "px" };
-    if (n === "md")
-      return { value: "448", unit: "px" };
-    if (n === "lg")
-      return { value: "512", unit: "px" };
-    if (n === "xl")
-      return { value: "576", unit: "px" };
-    if (n === "2xl")
-      return { value: "672", unit: "px" };
-    if (n === "3xl")
-      return { value: "768", unit: "px" };
-    if (n === "4xl")
-      return { value: "896", unit: "px" };
-    if (n === "5xl")
-      return { value: "1024", unit: "px" };
-    if (n === "6xl")
-      return { value: "1152", unit: "px" };
-    if (n === "7xl")
-      return { value: "1280", unit: "px" };
-    if (n === "prose")
-      return { value: "65", unit: "ch" };
+    if (o === "max-w-screen-sm") return { value: "640", unit: "px" };
+    if (o === "max-w-screen-md") return { value: "768", unit: "px" };
+    if (o === "max-w-screen-lg") return { value: "1024", unit: "px" };
+    if (o === "max-w-screen-xl") return { value: "1280", unit: "px" };
+    if (o === "max-w-screen-2xl") return { value: "1536", unit: "px" };
+    if (n === "xs") return { value: "320", unit: "px" };
+    if (n === "sm") return { value: "384", unit: "px" };
+    if (n === "md") return { value: "448", unit: "px" };
+    if (n === "lg") return { value: "512", unit: "px" };
+    if (n === "xl") return { value: "576", unit: "px" };
+    if (n === "2xl") return { value: "672", unit: "px" };
+    if (n === "3xl") return { value: "768", unit: "px" };
+    if (n === "4xl") return { value: "896", unit: "px" };
+    if (n === "5xl") return { value: "1024", unit: "px" };
+    if (n === "6xl") return { value: "1152", unit: "px" };
+    if (n === "7xl") return { value: "1280", unit: "px" };
+    if (n === "prose") return { value: "65", unit: "ch" };
   }
   if (startsWith(o, "text-")) {
-    if (n === "xs")
-      return { value: "12", unit: "px" };
-    if (n === "sm")
-      return { value: "14", unit: "px" };
-    if (n === "base")
-      return { value: "16", unit: "px" };
-    if (n === "lg")
-      return { value: "18", unit: "px" };
-    if (n === "xl")
-      return { value: "20", unit: "px" };
-    if (n === "2xl")
-      return { value: "24", unit: "px" };
-    if (n === "3xl")
-      return { value: "30", unit: "px" };
-    if (n === "4xl")
-      return { value: "36", unit: "px" };
-    if (n === "5xl")
-      return { value: "48", unit: "px" };
-    if (n === "6xl")
-      return { value: "60", unit: "px" };
-    if (n === "7xl")
-      return { value: "72", unit: "px" };
-    if (n === "8xl")
-      return { value: "96", unit: "px" };
-    if (n === "9xl")
-      return { value: "128", unit: "px" };
+    if (n === "xs") return { value: "12", unit: "px" };
+    if (n === "sm") return { value: "14", unit: "px" };
+    if (n === "base") return { value: "16", unit: "px" };
+    if (n === "lg") return { value: "18", unit: "px" };
+    if (n === "xl") return { value: "20", unit: "px" };
+    if (n === "2xl") return { value: "24", unit: "px" };
+    if (n === "3xl") return { value: "30", unit: "px" };
+    if (n === "4xl") return { value: "36", unit: "px" };
+    if (n === "5xl") return { value: "48", unit: "px" };
+    if (n === "6xl") return { value: "60", unit: "px" };
+    if (n === "7xl") return { value: "72", unit: "px" };
+    if (n === "8xl") return { value: "96", unit: "px" };
+    if (n === "9xl") return { value: "128", unit: "px" };
   }
   if (startsWith(o, "leading-")) {
-    if (n === "none")
-      return { value: "1", unit: "-" };
-    if (n === "tight")
-      return { value: "1.25", unit: "-" };
-    if (n === "snug")
-      return { value: "1.375", unit: "-" };
-    if (n === "normal")
-      return { value: "1.5", unit: "-" };
-    if (n === "relaxed")
-      return { value: "1.625", unit: "-" };
-    if (n === "loose")
-      return { value: "2", unit: "-" };
+    if (n === "none") return { value: "1", unit: "-" };
+    if (n === "tight") return { value: "1.25", unit: "-" };
+    if (n === "snug") return { value: "1.375", unit: "-" };
+    if (n === "normal") return { value: "1.5", unit: "-" };
+    if (n === "relaxed") return { value: "1.625", unit: "-" };
+    if (n === "loose") return { value: "2", unit: "-" };
   }
   if (startsWith(o, "tracking-")) {
-    if (n === "tighter")
-      return { value: "-0.05", unit: "em" };
-    if (n === "tight")
-      return { value: "-0.025", unit: "em" };
-    if (n === "normal")
-      return { value: "0", unit: "em" };
-    if (n === "wide")
-      return { value: "0.025", unit: "em" };
-    if (n === "wider")
-      return { value: "0.05", unit: "em" };
-    if (n === "widest")
-      return { value: "0.1", unit: "em" };
+    if (n === "tighter") return { value: "-0.05", unit: "em" };
+    if (n === "tight") return { value: "-0.025", unit: "em" };
+    if (n === "normal") return { value: "0", unit: "em" };
+    if (n === "wide") return { value: "0.025", unit: "em" };
+    if (n === "wider") return { value: "0.05", unit: "em" };
+    if (n === "widest") return { value: "0.1", unit: "em" };
   }
-  if (["max", "min", "fit"].includes(n))
-    return { value: o, unit: "class" };
+  if (["max", "min", "fit"].includes(n)) return { value: o, unit: "class" };
   if (n.includes("/")) {
     const [a, l] = map(n.split("/"), (i) => parseInt(i, 10));
     return { value: r + (a / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
@@ -6537,50 +6477,50 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [h, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [j, b] = useState(!1), [f, y] = useState(""), [v, B] = useState(!1), [A, S] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [E, y] = useState(!1), [g, k] = useState(""), [_, A] = useState(!1), [S, v] = useState(!1);
   useEffect(() => {
-    const { value: m, unit: E } = getClassValueAndUnit(i);
-    if (E === "") {
-      l(m), g(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: b, unit: C } = getClassValueAndUnit(i);
+    if (C === "") {
+      l(b), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    g(E), l(E === "class" || isEmpty(m) ? "" : m);
+    m(C), l(C === "class" || isEmpty(b) ? "" : b);
   }, [i, p, u]);
-  const k = useThrottledCallback((m) => c(m), [c], THROTTLE_TIME), T = useThrottledCallback((m) => c(m, !1), [c], THROTTLE_TIME), _ = useCallback(
-    (m = !1) => {
-      const E = getUserInputValues(`${a}`, u);
-      if (get(E, "error", !1)) {
-        b(!0);
+  const R = useThrottledCallback((b) => c(b), [c], THROTTLE_TIME), f = useThrottledCallback((b) => c(b, !1), [c], THROTTLE_TIME), j = useCallback(
+    (b = !1) => {
+      const C = getUserInputValues(`${a}`, u);
+      if (get(C, "error", !1)) {
+        y(!0);
         return;
       }
-      const R = get(E, "unit") !== "" ? get(E, "unit") : h;
-      if (R === "auto" || R === "none") {
-        k(`${d}${R}`);
+      const B = get(C, "unit") !== "" ? get(C, "unit") : h;
+      if (B === "auto" || B === "none") {
+        R(`${d}${B}`);
         return;
       }
-      if (get(E, "value") === "")
+      if (get(C, "value") === "")
         return;
-      const N = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
-      m ? T(N) : k(N);
+      const D = `${get(C, "value", "").startsWith("-") ? "-" : ""}${d}[${get(C, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
+      b ? f(D) : R(D);
     },
-    [k, T, a, h, d, u]
-  ), P = useCallback(
-    (m) => {
-      const E = getUserInputValues(`${a}`, u);
-      if (get(E, "error", !1)) {
-        b(!0);
+    [R, f, a, h, d, u]
+  ), w = useCallback(
+    (b) => {
+      const C = getUserInputValues(`${a}`, u);
+      if (get(C, "error", !1)) {
+        y(!0);
         return;
       }
-      if (m === "auto" || m === "none") {
-        k(`${d}${m}`);
+      if (b === "auto" || b === "none") {
+        R(`${d}${b}`);
         return;
       }
-      if (get(E, "value") === "")
+      if (get(C, "value") === "")
         return;
-      const R = get(E, "unit") !== "" ? get(E, "unit") : m, N = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
-      k(N);
+      const B = get(C, "unit") !== "" ? get(C, "unit") : b, D = `${get(C, "value", "").startsWith("-") ? "-" : ""}${d}[${get(C, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
+      R(D);
     },
-    [k, a, d, u]
+    [R, a, d, u]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6595,40 +6535,40 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${_ ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
           readOnly: h === "class",
-          onKeyPress: (m) => {
-            m.key === "Enter" && _();
+          onKeyPress: (b) => {
+            b.key === "Enter" && j();
           },
-          onKeyDown: (m) => {
-            if (m.keyCode !== 38 && m.keyCode !== 40)
+          onKeyDown: (b) => {
+            if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
-            m.preventDefault(), S(!0);
-            const E = parseInt$1(m.target.value);
-            let R = isNaN$1(E) ? 0 : E;
-            m.keyCode === 38 && (R += 1), m.keyCode === 40 && (R -= 1);
-            const C = `${R}`, I = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
-            T(I);
+            b.preventDefault(), v(!0);
+            const C = parseInt$1(b.target.value);
+            let B = isNaN$1(C) ? 0 : C;
+            b.keyCode === 38 && (B += 1), b.keyCode === 40 && (B -= 1);
+            const N = `${B}`, I = `${N.startsWith("-") ? "-" : ""}${d}[${N.replace("-", "")}${h === "-" ? "" : h}]`;
+            f(I);
           },
-          onKeyUp: (m) => {
-            A && (m.preventDefault(), S(!1));
+          onKeyUp: (b) => {
+            S && (b.preventDefault(), v(!1));
           },
-          onBlur: () => _(),
-          onChange: (m) => {
-            b(!1), l(m.target.value);
+          onBlur: () => j(),
+          onChange: (b) => {
+            y(!1), l(b.target.value);
           },
-          onClick: (m) => {
-            var E;
-            (E = m == null ? void 0 : m.target) == null || E.select(), n(!1);
+          onClick: (b) => {
+            var C;
+            (C = b == null ? void 0 : b.target) == null || C.select(), n(!1);
           },
-          value: v ? f : a,
+          value: _ ? g : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            j ? "border-red-500 text-red-500" : "border-foreground/20"
+            E ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6650,29 +6590,29 @@ const RangeChoices = ({ property: o, onChange: r }) => {
           {
             units: u,
             current: h,
-            onSelect: (m) => {
-              n(!1), g(m), P(m);
+            onSelect: (b) => {
+              n(!1), m(b), w(b);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || v ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(h) !== -1 || _ ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => B(!0),
-        onDragEnd: (m) => {
-          if (y(() => ""), B(!1), isEmpty(m))
+        onDragStart: () => A(!0),
+        onDragEnd: (b) => {
+          if (k(() => ""), A(!1), isEmpty(b))
             return;
-          const E = `${m}`, C = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${h === "-" ? "" : h}]`;
-          k(C);
+          const C = `${b}`, N = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
+          R(N);
         },
-        onDrag: (m) => {
-          if (isEmpty(m))
+        onDrag: (b) => {
+          if (isEmpty(b))
             return;
-          y(m);
-          const E = `${m}`, C = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${h === "-" ? "" : h}]`;
-          T(C);
+          k(b);
+          const C = `${b}`, N = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
+          f(N);
         },
         currentValue: a,
         unit: h,
@@ -6769,35 +6709,35 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), h = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), j = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), f = useMemo(() => get(h, "fullCls", ""), [h]), y = useCallback(
-    (T, _ = !0) => {
-      const P = { dark: p, mq: x, mod: u, cls: T, property: l, fullCls: "" };
-      (p || u !== "") && (P.mq = "xs");
-      const m = generateFullClsName(P);
-      g(b, [m], _);
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), E = useRemoveClassesFromBlocks(), [y] = useSelectedBlockIds(), g = useMemo(() => get(h, "fullCls", ""), [h]), k = useCallback(
+    (f, j = !0) => {
+      const w = { dark: p, mq: x, mod: u, cls: f, property: l, fullCls: "" };
+      (p || u !== "") && (w.mq = "xs");
+      const b = generateFullClsName(w);
+      m(y, [b], j);
     },
-    [b, p, x, u, l, g]
-  ), v = useCallback(() => {
-    j(b, [f]);
-  }, [b, f, j]), B = useMemo(() => canChangeClass(h, x), [h, x]);
+    [y, p, x, u, l, m]
+  ), _ = useCallback(() => {
+    E(y, [g]);
+  }, [y, g, E]), A = useMemo(() => canChangeClass(h, x), [h, x]);
   useEffect(() => {
-    i(B, h);
-  }, [B, i, h]);
-  const [, , A] = useCanvasWidth(), S = useCallback(
-    (T) => {
-      A({
+    i(A, h);
+  }, [A, i, h]);
+  const [, , S] = useCanvasWidth(), v = useCallback(
+    (f) => {
+      S({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[T]);
+      }[f]);
     },
-    [A]
-  ), k = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === x;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: B, canReset: h && k, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${h && !k ? "text-foreground" : ""}`, children: r(a) }) }),
+    [S]
+  ), R = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === x;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: A, canReset: h && R, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${h && !R ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         n === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6806,17 +6746,17 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             currentClass: get(h, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
-            onChange: y,
+            onChange: k,
             negative: d,
             cssProperty: l
           }
         ) : null,
-        n === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: l, onChange: y }),
-        n === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: l, onChange: y }),
-        n === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: y }),
-        n === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: y })
+        n === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: l, onChange: k }),
+        n === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: l, onChange: k }),
+        n === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: k }),
+        n === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: k })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: k ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: R ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => _(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : A && h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6836,7 +6776,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             "button",
             {
               type: "button",
-              onClick: () => S(get(h, "mq")),
+              onClick: () => v(get(h, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6857,7 +6797,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(r[0].key), x = useSelectedBlockCurrentClasses(), h = useCallback((g) => map(x, "property").includes(g), [x]);
+  const { t: d } = useTranslation(), [p, u] = useState(r[0].key), x = useSelectedBlockCurrentClasses(), h = useCallback((m) => map(x, "property").includes(m), [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6866,22 +6806,22 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            r.map(({ label: g, key: j }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            r.map(({ label: m, key: E }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(j),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${j === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => u(E),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${E === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: h(j) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: h(E) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, j, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, E, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(g)) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(m)) })
             ] }) }))
           ) })
         ] }),
@@ -6971,13 +6911,11 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   ] }) });
 }, BlockStylingProps = () => {
   const o = useSelectedBlock(), [r, n] = useSelectedStylingBlocks(), { t: a } = useTranslation();
-  if (!o)
-    return null;
+  if (!o) return null;
   const l = Object.keys(o).filter(
     (c) => typeof o[c] == "string" && o[c].startsWith("#styles:")
   );
-  if (isEmpty(l) || l.length <= 1)
-    return null;
+  if (isEmpty(l) || l.length <= 1) return null;
   const i = (c) => find(r, (d) => d.prop === c);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
@@ -7023,12 +6961,12 @@ function BlockStyling() {
   }), d = useThrottledCallback(
     (u) => {
       const x = !get(i, "negative", !1), h = get(i, "cssProperty", "");
-      let g = parseFloat(i.dragStartValue);
-      g = isNaN(g) ? 0 : g;
-      let j = MAPPER[i.dragUnit];
-      (startsWith(h, "scale") || h === "opacity") && (j = 10);
-      let f = (i.dragStartY - u.pageY) / j + g;
-      x && f < 0 && (f = 0), h === "opacity" && f > 1 && (f = 1), i.onDrag(`${f}`), l(`${f}`);
+      let m = parseFloat(i.dragStartValue);
+      m = isNaN(m) ? 0 : m;
+      let E = MAPPER[i.dragUnit];
+      (startsWith(h, "scale") || h === "opacity") && (E = 10);
+      let g = (i.dragStartY - u.pageY) / E + m;
+      x && g < 0 && (g = 0), h === "opacity" && g > 1 && (g = 1), i.onDrag(`${g}`), l(`${g}`);
     },
     [i],
     50
@@ -7087,7 +7025,7 @@ const ChaiSelect = ({
       ]
     }
   ) });
-}, ChaiSelect$1 = ChaiSelect;
+};
 function UILibrariesSelect({
   uiLibraries: o,
   library: r,
@@ -7097,7 +7035,7 @@ function UILibrariesSelect({
   return r ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-12", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-bold text-gray-500", children: a("Choose library") }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ChaiSelect$1,
+      ChaiSelect,
       {
         className: "mt-1",
         options: o.map((l) => ({
@@ -7116,33 +7054,33 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), h = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, j] = useAtom$1(draggedBlockAtom), b = (v) => {
-    const B = has(v, "styles_attrs.data-page-section");
-    return v._type === "Box" && B;
-  }, f = useCallback(
-    async (v) => {
-      if (v.stopPropagation(), has(o, "component")) {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, E] = useAtom$1(draggedBlockAtom), y = (_) => {
+    const A = has(_, "styles_attrs.data-page-section");
+    return _._type === "Box" && A;
+  }, g = useCallback(
+    async (_) => {
+      if (_.stopPropagation(), has(o, "component")) {
         d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const B = await c(r, o);
-      isEmpty(B) || p(syncBlocksWithDefaults(B), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const A = await c(r, o);
+      isEmpty(A) || p(syncBlocksWithDefaults(A), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, r, n, a]
-  ), y = async (v) => {
-    const B = await c(r, o);
-    let A = n;
-    if (b(first(B)) && (A = null), !isEmpty(B)) {
-      const S = { blocks: B, uiLibrary: !0, parent: A };
-      if (v.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
-        const k = new Image();
-        k.src = o.preview, k.onload = () => {
-          v.dataTransfer.setDragImage(k, 0, 0);
+  ), k = async (_) => {
+    const A = await c(r, o);
+    let S = n;
+    if (y(first(A)) && (S = null), !isEmpty(A)) {
+      const v = { blocks: A, uiLibrary: !0, parent: S };
+      if (_.dataTransfer.setData("text/plain", JSON.stringify(v)), o.preview) {
+        const R = new Image();
+        R.src = o.preview, R.onload = () => {
+          _.dataTransfer.setDragImage(R, 0, 0);
         };
       } else
-        v.dataTransfer.setDragImage(new Image(), 0, 0);
-      j(S), setTimeout(() => {
+        _.dataTransfer.setDragImage(new Image(), 0, 0);
+      E(v), setTimeout(() => {
         u([]), x(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
       }, 200);
     }
@@ -7152,9 +7090,9 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : f,
-        draggable: g ? "true" : "false",
-        onDragStart: y,
+        } : g,
+        draggable: m ? "true" : "false",
+        onDragStart: k,
         className: clsx(
           "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-border bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
         ),
@@ -7175,17 +7113,16 @@ const BlockCard = ({
   const [r, n] = useAtom$1(libraryBlocksAtom), a = useBuilderProp("getUILibraryBlocks", noop), l = get(r, `${o == null ? void 0 : o.uuid}.blocks`, null), i = get(r, `${o == null ? void 0 : o.uuid}.loading`, "idle"), c = useRef("idle");
   return useEffect(() => {
     (async () => {
-      if (i === "complete" || c.current === "loading")
-        return;
+      if (i === "complete" || c.current === "loading") return;
       c.current = "loading", n((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "loading", blocks: [] } }));
       const d = await a(o);
       c.current = "idle", n((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "complete", blocks: d || [] } }));
     })();
   }, [o, l, i, c, n, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: r }) => {
-  const [n, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((A) => A.category === "custom"), d = l.find((A) => A.uuid === n) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [h, g] = useState("Hero"), j = get(x, h, []), b = useRef(null), { t: f } = useTranslation(), y = (A) => {
-    b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
-      b.current && g(A);
+  const [n, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((S) => S.category === "custom"), d = l.find((S) => S.uuid === n) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [h, m] = useState("Hero"), E = get(x, h, []), y = useRef(null), { t: g } = useTranslation(), k = (S) => {
+    y.current && (clearTimeout(y.current), y.current = null), y.current = setTimeout(() => {
+      y.current && m(S);
     }, 300);
   };
   if (u)
@@ -7193,30 +7130,30 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const v = filter(j, (A, S) => S % 2 === 0), B = filter(j, (A, S) => S % 2 === 1);
+  const _ = filter(E, (S, v) => v % 2 === 0), A = filter(E, (S, v) => v % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: f("Groups") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: g("Groups") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsxRuntimeExports.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(x, (A, S) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(x, (S, v) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => y(S),
-              onMouseLeave: () => clearTimeout(b.current),
-              onClick: () => g(S),
+              onMouseEnter: () => k(v),
+              onMouseLeave: () => clearTimeout(y.current),
+              onClick: () => m(v),
               className: cn(
                 "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 === h ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                v === h ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(f(S.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(g(v.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            S
+            v
           ))
         ) })
       ] })
@@ -7224,15 +7161,15 @@ const BlockCard = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => b.current ? clearTimeout(b.current) : null,
+        onMouseEnter: () => y.current ? clearTimeout(y.current) : null,
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              v.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: A, library: d }))
+              _.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: S, library: d }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              B.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: A, library: d }))
+              A.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: S, library: d }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7242,7 +7179,7 @@ const BlockCard = ({
       }
     )
   ] }) }) });
-}, UILibrariesPanel = ({ parentId: o, position: r }) => /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrarySection, { parentId: o, position: r }), UILibraries = UILibrariesPanel, Core = "Core", Import = "Import", Breakpoints$1 = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = {
+}, UILibrariesPanel = ({ parentId: o, position: r }) => /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrarySection, { parentId: o, position: r }), Core = "Core", Import = "Import", Breakpoints$1 = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = {
   heading_font: "Heading Font",
   body_font: "Body Font",
   rounded_corner: "Rounded Corners",
@@ -7741,35 +7678,35 @@ const CoreBlock = ({
   parentId: n,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), g = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
     if (has(o, "blocks")) {
-      const f = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(f), n || null, a);
+      const g = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(g), n || null, a);
     } else
       p(o, n || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, j = useFeature("dnd"), { t: b } = useTranslation();
+  }, E = useFeature("dnd"), { t: y } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
         disabled: r,
-        onClick: g,
+        onClick: m,
         type: "button",
-        onDragStart: (f) => {
-          f.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), f.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (g) => {
+          g.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), g.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             x([]), h();
           }, 200);
         },
-        draggable: j ? "true" : "false",
+        draggable: E ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(b(d || i)) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(y(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: b(d || i) }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: y(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -7839,14 +7776,14 @@ const CoreBlock = ({
             map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: h.key, children: React__default.createElement(h.tab) }))
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: n, position: a }) }) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibraries, { parentId: n, position: a }) }),
-          p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML$1, { parentId: n, position: a }) }) : null,
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesPanel, { parentId: n, position: a }) }),
+          p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML, { parentId: n, position: a }) }) : null,
           map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: x, parentId: n, position: a }) }))
         ]
       }
     )
   ] });
-}, AddBlocksPanel$1 = AddBlocksPanel;
+};
 function usePubSub(o, r) {
   useEffect(() => {
     const n = pubsub.subscribe(o, r);
@@ -7871,7 +7808,7 @@ const AddBlocksDialog = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar h-[500px] max-h-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlocksPanel$1, { parentId: r, position: a, showHeading: !1 }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar h-[500px] max-h-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlocksPanel, { parentId: r, position: a, showHeading: !1 }) })
   ] }) });
 };
 function FaFilePen(o) {
@@ -7956,14 +7893,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), h = useRef(null), g = useRef(null);
+  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), h = useRef(null), m = useRef(null);
   useEffect(() => {
-    var b;
-    (b = h.current) == null || b.focus();
+    var y;
+    (y = h.current) == null || y.focus();
   }, []);
-  const j = (b) => {
-    const { usage: f } = b || {};
-    !l && f && x(f), g.current = setTimeout(() => x(void 0), 1e4), l || c("");
+  const E = (y) => {
+    const { usage: g } = y || {};
+    !l && g && x(g), m.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7983,12 +7920,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: h,
           value: i,
-          onChange: (b) => c(b.target.value),
+          onChange: (y) => c(y.target.value),
           placeholder: r("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (b) => {
-            b.key === "Enter" && (b.preventDefault(), g.current && clearTimeout(g.current), x(void 0), n("content", o, i, j));
+          onKeyDown: (y) => {
+            y.key === "Enter" && (y.preventDefault(), m.current && clearTimeout(m.current), x(void 0), n("content", o, i, E));
           }
         }
       ),
@@ -7998,7 +7935,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              g.current && clearTimeout(g.current), x(void 0), n("content", o, i, j);
+              m.current && clearTimeout(m.current), x(void 0), n("content", o, i, E);
             },
             variant: "default",
             className: "w-fit",
@@ -8030,8 +7967,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         QuickPrompts,
         {
-          onClick: (b) => {
-            g.current && clearTimeout(g.current), x(void 0), n("content", o, b, j);
+          onClick: (y) => {
+            m.current && clearTimeout(m.current), x(void 0), n("content", o, y, E);
           }
         }
       )
@@ -8041,19 +7978,19 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: h } = useToast(), g = useRef(null);
+  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: h } = useToast(), m = useRef(null);
   useEffect(() => {
     r && a(r);
   }, [r]);
-  const j = async () => {
+  const E = async () => {
     try {
       d(!0), u(null), await i(n), h({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
-      }), g.current.click();
-    } catch (b) {
-      u(b);
+      }), m.current.click();
+    } catch (y) {
+      u(y);
     } finally {
       d(!1);
     }
@@ -8061,25 +7998,25 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Accordion,
     {
-      onValueChange: (b) => {
-        x(b !== "");
+      onValueChange: (y) => {
+        x(y !== "");
       },
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: g, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: m, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Textarea,
             {
               ref: l,
               value: n,
-              onChange: (b) => a(b.target.value),
+              onChange: (y) => a(y.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (b) => {
-                b.key === "Enter" && (b.preventDefault(), j());
+              onKeyDown: (y) => {
+                y.key === "Enter" && (y.preventDefault(), E());
               }
             }
           ),
@@ -8091,7 +8028,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: n.trim().length < 5,
-                onClick: () => j(),
+                onClick: () => E(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8120,7 +8057,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), j();
+                        a(""), E();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8141,42 +8078,42 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(o) })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: r = [], onAttributesChange: n }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [h, g] = useState(""), j = useRef(null), b = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [h, m] = useState(""), E = useRef(null), y = useRef(null);
   useEffect(() => {
     l(r);
   }, [r]);
-  const f = () => {
+  const g = () => {
     if (i.startsWith("@")) {
-      g("Attribute keys cannot start with '@'");
+      m("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const S = [...a, { key: i, value: d }];
-      n(S), l(a), c(""), p(""), g("");
+      const v = [...a, { key: i, value: d }];
+      n(v), l(a), c(""), p(""), m("");
     }
-  }, y = (S) => {
-    const k = a.filter((T, _) => _ !== S);
-    n(k), l(k);
-  }, v = (S) => {
-    x(S), c(a[S].key), p(a[S].value);
-  }, B = () => {
+  }, k = (v) => {
+    const R = a.filter((f, j) => j !== v);
+    n(R), l(R);
+  }, _ = (v) => {
+    x(v), c(a[v].key), p(a[v].value);
+  }, A = () => {
     if (i.startsWith("@")) {
-      g("Attribute keys cannot start with '@'");
+      m("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const S = [...a];
-      S[u] = { key: i, value: d }, n(S), l(S), x(null), c(""), p(""), g("");
+      const v = [...a];
+      v[u] = { key: i, value: d }, n(v), l(v), x(null), c(""), p(""), m("");
     }
-  }, A = (S) => {
-    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? B() : f());
+  }, S = (v) => {
+    v.key === "Enter" && !v.shiftKey && (v.preventDefault(), u !== null ? A() : g());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (S) => {
-          S.preventDefault(), u !== null ? B() : f();
+        onSubmit: (v) => {
+          v.preventDefault(), u !== null ? A() : g();
         },
         className: "space-y-3",
         children: [
@@ -8190,9 +8127,9 @@ const AIUserPrompt = ({ blockId: o }) => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: j,
+                  ref: E,
                   value: i,
-                  onChange: (S) => c(S.target.value),
+                  onChange: (v) => c(v.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8208,10 +8145,10 @@ const AIUserPrompt = ({ blockId: o }) => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: b,
+                  ref: y,
                   value: d,
-                  onChange: (S) => p(S.target.value),
-                  onKeyDown: A,
+                  onChange: (v) => p(v.target.value),
+                  onKeyDown: S,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8223,16 +8160,16 @@ const AIUserPrompt = ({ blockId: o }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: a.map((S, k) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: a.map((v, R) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: S.value.toString() })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: v.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: v.value.toString() })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(k), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(k), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => _(R), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(R), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, k)) })
+    ] }, R)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [r, n] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8256,6 +8193,20 @@ function getDNDSupport() {
 }
 const FEATURE_TOGGLES = {
   dnd: getDNDSupport()
+}, builderStore = getDefaultStore$1(), setDebugLogs = (o) => {
+}, getParentNodeIds = (o, r) => {
+  const n = [];
+  let a = find(o, { _id: r }), l = get(a, "_parent", "");
+  for (; isString(l) && !isEmpty(l); )
+    n.push(a == null ? void 0 : a._parent), a = find(o, { _id: l }), l = a == null ? void 0 : a._parent;
+  return flatten(n);
+}, expandedIdsAtom = atom$1([]), useExpandTree = () => {
+  const [o] = useSelectedBlockIds(), r = useAtomValue$1(presentBlocksAtom), [, n] = useAtom$1(expandedIdsAtom);
+  useEffect(() => {
+    let a = [];
+    const l = first(o);
+    isString(l) && (a = [l, ...getParentNodeIds(r, l)]), n(a);
+  }, [o, r, n]);
 }, UndoRedo = () => {
   const { hasUndo: o, hasRedo: r, undo: n, redo: a } = useUndoManager();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
@@ -8510,7 +8461,7 @@ const SettingsPanel = () => {
       }
     )
   ] }) });
-}, SettingsPanel$1 = SettingsPanel;
+};
 function LayoutCard({ disabled: o = !1, description: r, title: n, selected: a, onSelect: l, children: i }) {
   const { t: c } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -8602,13 +8553,13 @@ const ChooseLayout = ({ open: o, close: r }) => {
       )
     ] }) })
   ] }) });
-}, TopBar = lazy(() => import("./Topbar-9IbTAO2f.js")), ThemeConfigPanel = lazy(() => Promise.resolve().then(() => ThemeConfigPanel$3));
+}, TopBar = lazy(() => import("./Topbar-DMCtQiUj.js")), ThemeConfigPanel = lazy(() => Promise.resolve().then(() => ThemeConfigPanel$2));
 function useSidebarMenuItems() {
   return useMemo(() => compact([
     {
       icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Layers, { size: 20 }),
       label: "Outline",
-      component: () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Outline$1, {}) })
+      component: () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, {}) })
     }
   ]), []);
 }
@@ -8617,35 +8568,36 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     r(1);
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = (j) => {
-    j.preventDefault();
-  }, p = (j) => {
-    r(o === j ? null : j);
-  }, u = useSidebarMenuItems(), { t: x } = useTranslation(), h = [...u, ...c], g = useBuilderProp("htmlDir", "ltr");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: g, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
+  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (y) => {
+    y.preventDefault();
+  }, u = (y) => {
+    r(o === y ? null : y);
+  }, x = useSidebarMenuItems(), { t: h } = useTranslation(), m = [...x, ...c], E = useBuilderProp("htmlDir", "ltr");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: E, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        onContextMenu: d,
+        onContextMenu: p,
         className: "flex h-screen max-h-full flex-col bg-background text-foreground",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: h.map((j, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: m.map((y, g) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
-                    variant: o === b ? "default" : "ghost",
+                    variant: o === g ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => p(b),
-                    children: get(j, "icon", null)
+                    onClick: () => u(g),
+                    children: get(y, "icon", null)
                   },
-                  b
+                  g
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: x(j.label) }) })
-              ] }, "button" + b)) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-1" })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: h(y.label) }) })
+              ] }, "button" + g)) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-1" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((y, g) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}), children: React__default.createElement(y, { key: g }) })) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               motion.div,
@@ -8656,16 +8608,16 @@ const RootLayout = () => {
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col p-3", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "-mt-1 flex h-10 items-center space-x-1 text-base font-bold", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(h, `${o}.icon`, null) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: x(h[o].label) })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(m, `${o}.icon`, null) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: h(m[o].label) })
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(h, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(m, `${o}.component`, null), {}) }) })
                 ] }) })
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full flex-1 flex-col bg-slate-800/20", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasTopBar, {}),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasArea$1, {}) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasArea, {}) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               motion.div,
@@ -8678,11 +8630,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    x("AI Assistant")
+                    h("AI Assistant")
                   ] }) }) : l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      x("Theme Settings")
+                      h("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
                       Button,
@@ -8695,7 +8647,7 @@ const RootLayout = () => {
                       }
                     )
                   ] }) : null }) }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex max-h-full w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(AskAI, {}) : l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel$1, {}) }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex max-h-full w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(AskAI, {}) : l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel, {}) }) })
                 ] }) })
               }
             )
@@ -8706,7 +8658,16 @@ const RootLayout = () => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlocksDialog, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ChooseLayout, { open: n, close: () => a(!1) })
   ] }) });
-}, builderStore = getDefaultStore$1(), SmallScreenMessage = () => /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "h-screen w-screen bg-gray-900 py-12 sm:py-16 lg:py-20 xl:hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-md text-center", children: [
+}, PreviewScreen = () => {
+  const [o, r] = usePreviewMode(), { t: n } = useTranslation(), a = useBuilderProp("previewComponent", null);
+  return o ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("fixed inset-0 z-[999] bg-background", o ? "block" : "hidden"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { size: "sm", className: "absolute right-0 top-0 m-4 space-x-2", onClick: () => r(!1), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EyeClosedIcon, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Close Preview") })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: a ? /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-96 w-full" }), children: React__default.createElement(a) }) : null })
+  ] }) : null;
+}, SmallScreenMessage = () => /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "h-screen w-screen bg-gray-900 py-12 sm:py-16 lg:py-20 xl:hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-md text-center", children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx(
     "img",
     {
@@ -8718,58 +8679,39 @@ const RootLayout = () => {
   /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
   /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-4xl font-bold text-white", children: "Screen too small" }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-6 text-sm font-medium leading-6 text-white text-opacity-70", children: "Please view this page on greater than 1280px screen width." })
-] }) }) }), setDebugLogs = (o) => {
-}, PreviewScreen = () => {
-  const [o, r] = usePreviewMode(), { t: n } = useTranslation(), a = useBuilderProp("previewComponent", null);
-  return o ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("fixed inset-0 z-[999] bg-background", o ? "block" : "hidden"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { size: "sm", className: "absolute right-0 top-0 m-4 space-x-2", onClick: () => r(!1), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(EyeClosedIcon, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Close Preview") })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: a ? /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-96 w-full" }), children: React__default.createElement(a) }) : null })
-  ] }) : null;
-}, getParentNodeIds = (o, r) => {
-  const n = [];
-  let a = find(o, { _id: r }), l = get(a, "_parent", "");
-  for (; isString(l) && !isEmpty(l); )
-    n.push(a == null ? void 0 : a._parent), a = find(o, { _id: l }), l = a == null ? void 0 : a._parent;
-  return flatten(n);
-}, expandedIdsAtom = atom$1([]), useExpandTree = () => {
-  const [o] = useSelectedBlockIds(), r = useAtomValue$1(presentBlocksAtom), [, n] = useAtom$1(expandedIdsAtom);
-  useEffect(() => {
-    let a = [];
-    const l = first(o);
-    isString(l) && (a = [l, ...getParentNodeIds(r, l)]), n(a);
-  }, [o, r, n]);
-}, useAutoSave = () => {
+] }) }) }), useAutoSave = () => {
   const { savePage: o } = useSavePage(), r = useBuilderProp("autoSaveSupport", !0), n = useBuilderProp("autoSaveInterval", 60);
   useIntervalEffect(() => {
     r && o(!0);
   }, n * 1e3);
 }, ChaiBuilderComponent = (o) => {
   const [, r] = useBlocksStore(), n = useBuilderReset(), [a] = useAtom(builderSaveStateAtom), l = useMemo(() => o.layout || RootLayout, [o.layout]);
-  return useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchGlobalBlocks(), useEffect(() => {
+  useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchGlobalBlocks(), useUnmountBroadcastChannel();
+  const { postMessage: i } = useBroadcastChannel();
+  return useEffect(() => {
     builderStore.set(
       // @ts-ignore
       chaiBuilderPropsAtom,
       omit(o, ["blocks", "subPages", "brandingOptions", "dataProviders", "customRootLayout", "translations"])
     );
   }, [o]), useEffect(() => {
-    r(o.blocks || []), n();
+    setTimeout(() => {
+      r(o.blocks || []), i({ type: "blocks-updated", blocks: o.blocks || [] }), n();
+    }, 400);
   }, [o.blocks]), useEffect(() => {
     i18n.changeLanguage(o.locale || "en");
   }, [o.locale]), useEffect(() => {
     setDebugLogs(o.showDebugLogs);
   }, [o.showDebugLogs]), useEffect(() => {
-    o.translations && each(o.translations, (i, c) => {
-      i18n.addResourceBundle(c, "translation", i, !0, !0);
+    o.translations && each(o.translations, (c, d) => {
+      i18n.addResourceBundle(d, "translation", c, !0, !0);
     });
   }, [o.translations]), useEffect(() => (a !== "SAVED" ? window.onbeforeunload = () => "" : window.onbeforeunload = null, () => {
     window.onbeforeunload = null;
   }), [a]), /* @__PURE__ */ jsxRuntimeExports.jsx(l, {});
 }, ChaiBuilderEditor = (o) => {
   const r = o._flags || {}, n = o.onError || noop;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-screen w-screen", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FlagsProvider, { features: { ...FEATURE_TOGGLES, ...r }, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-screen h-screen", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FlagsProvider, { features: { ...FEATURE_TOGGLES, ...r }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SmallScreenMessage, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ChaiBuilderComponent, { ...o }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(PreviewScreen, {}),
@@ -8780,27 +8722,27 @@ export {
   AISetContext,
   AIUserPrompt,
   AddBlocksDialog,
-  AddBlocksPanel$1 as AddBlocksPanel,
+  AddBlocksPanel,
   BlockAttributesEditor,
   BlockSettings as BlockPropsEditor,
   BlockStyling as BlockStyleEditor,
   CHAI_BUILDER_EVENTS,
-  CanvasArea$1 as ChaiBuilderCanvas,
+  CanvasArea as ChaiBuilderCanvas,
   ChaiBuilderEditor,
   DarkMode as DarkModeSwitcher,
   DefaultChaiBlocks,
-  ImportHTML$1 as ImportHTML,
-  Outline$1 as Outline,
+  ImportHTML,
+  ListTree as Outline,
   Breakpoints as ScreenSizes,
-  ThemeConfigPanel$2 as ThemeOptions,
-  UILibraries,
+  ThemeConfigPanel$1 as ThemeOptions,
+  UILibrariesPanel as UILibraries,
   UndoRedo,
   generateUUID as generateBlockId,
   getBlocksFromHTML,
   getClassValueAndUnit,
-  Qe as i18n,
+  Me as i18n,
   cn as mergeClasses,
-  Ze as registerChaiBlock,
+  De as registerChaiBlock,
   useAddBlock,
   useAddClassesToBlocks,
   useAskAi,
@@ -8842,7 +8784,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  Xe as useTranslation,
+  Ie as useTranslation,
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,