@chaibuilder/sdk 3.1.0 → 3.1.2

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

@@ -3,8 +3,8 @@ var W = (o, n, r) => n in o ? U(o, n, { enumerable: !0, configurable: !0, writab
 var F = (o, n, r) => W(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, syncBlocksWithDefaults, useRegisteredFonts, getBlockFormSchemas } from "@chaibuilder/runtime";
-import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, kebabCase, uniq, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, sortBy, round } from "lodash-es";
-import { SquareIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, CaretDownIcon, Cross1Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ValueIcon, TextAlignCenterIcon, TextAlignRightIcon, TextAlignLeftIcon, Link2Icon, LinkBreak2Icon, EnterFullScreenIcon, ExclamationTriangleIcon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, CircleIcon, MagnifyingGlassIcon, ReloadIcon, CaretRightIcon, FrameIcon, CheckIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, StopIcon, EraserIcon, LightningBoltIcon, ZoomInIcon, StackIcon } from "@radix-ui/react-icons";
+import { get, find, filter, flatten, has, map, includes, without, compact, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, kebabCase, round, reverse, findIndex, uniq, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, sortBy } from "lodash-es";
+import { SquareIcon, ZoomInIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, CaretDownIcon, Cross1Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ValueIcon, TextAlignCenterIcon, TextAlignRightIcon, TextAlignLeftIcon, Link2Icon, LinkBreak2Icon, EnterFullScreenIcon, ExclamationTriangleIcon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, CircleIcon, MagnifyingGlassIcon, ReloadIcon, CaretRightIcon, FrameIcon, CheckIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, StopIcon, EraserIcon, DotsHorizontalIcon, LightningBoltIcon, StackIcon, DragHandleDots2Icon } from "@radix-ui/react-icons";
 import * as React from "react";
 import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
 import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
@@ -14,14 +14,13 @@ import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as Dropd
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, i as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, j as ROOT_TEMP_KEY } from "./apply-binding-FoDMumPo.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, i as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, j as ROOT_TEMP_KEY } from "./apply-binding-w7OMcHcu.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
 import { isObject } from "@rjsf/utils";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useDebouncedState, useIntervalEffect } from "@react-hookz/web";
 import { toast, Toaster } from "sonner";
 import { useTranslation, initReactI18next } from "react-i18next";
 import Fuse from "fuse.js";
-import UndoManager from "undo-manager";
 import i18n, { t } from "i18next";
 import ReactDOM, { createPortal } from "react-dom";
 import { HexAlphaColorPicker } from "react-colorful";
@@ -38,6 +37,7 @@ import validator from "@rjsf/validator-ajv8";
 import Autosuggest from "react-autosuggest";
 import { useFeature } from "flagged";
 import { Tree } from "react-arborist";
+import { compact as compact$1, pick as pick$1, noop as noop$1 } from "lodash";
 import { parse, stringify } from "himalaya";
 import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
 import tailwindForms from "@tailwindcss/forms";
@@ -48,7 +48,7 @@ import twContainer from "@tailwindcss/container-queries";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ErrorBoundary } from "react-error-boundary";
 import { motion } from "framer-motion";
-import { compact as compact$1, pick as pick$1 } from "lodash";
+import UndoManager from "undo-manager";
 import { limitShift, flip, size } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
 import { Provider as Provider$1 } from "react-wrap-balancer";
@@ -217,120 +217,7 @@ const useSelectedBlocksDisplayChild = () => ({
     [n]
   );
   return [o, n, r];
-}, Breadcrumb = () => {
-  const o = useSelectedBlockHierarchy(), [, n] = useSelectedBlockIds(), { highlightBlock: r } = useBlockHighlight();
-  return /* @__PURE__ */ jsx("div", { className: "-mx-2 border-t border-border bg-background px-2 py-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center whitespace-nowrap", children: [
-    /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
-      /* @__PURE__ */ jsx(Button, { onClick: () => n([]), variant: "ghost", className: "h-fit p-1 text-xs font-normal", children: "Body" }),
-      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:rotate-180 h-4 w-4" })
-    ] }),
-    reverse(o).map((a, l) => /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          onMouseEnter: () => {
-            r(a == null ? void 0 : a._id);
-          },
-          onClick: () => n([a == null ? void 0 : a._id]),
-          variant: "ghost",
-          className: "h-fit gap-x-1 p-1 text-xs font-normal",
-          children: [
-            /* @__PURE__ */ jsx(TypeIcon, { type: a == null ? void 0 : a._type }),
-            a._name || a._type
-          ]
-        }
-      ),
-      l !== o.length - 1 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:rotate-180 h-4 w-4" })
-    ] }, l))
-  ] }) });
-}, CHAI_BUILDER_EVENTS = {
-  OPEN_ADD_BLOCK: "OPEN_ADD_BLOCK",
-  CLOSE_ADD_BLOCK: "CLOSE_ADD_BLOCK",
-  SHOW_BLOCK_SETTINGS: "SHOW_BLOCK_SETTINGS",
-  //CANVAS Events
-  CLEAR_CANVAS_SELECTION: "CLEAR_CANVAS_SELECTION",
-  CANVAS_BLOCK_SELECTED: "CANVAS_BLOCK_SELECTED",
-  CANVAS_BLOCK_STYLE_SELECTED: "CANVAS_BLOCK_STYLE_SELECTED"
-}, canAcceptChildBlock = (o, n) => {
-  if (!o) return !0;
-  const r = getRegisteredChaiBlock(o);
-  return r && has(r, "canAcceptBlock") ? r.canAcceptBlock(n) : !1;
-}, canAddChildBlock = (o) => {
-  const n = getRegisteredChaiBlock(o);
-  return n ? has(n, "canAcceptBlock") : !1;
-}, canBeNestedInside = (o, n) => {
-  const r = getRegisteredChaiBlock(n);
-  return r && has(r, "canBeNested") ? r.canBeNested(o) : !0;
-}, canDuplicateBlock = (o) => {
-  const n = getRegisteredChaiBlock(o);
-  return n && has(n, "canDuplicate") ? n.canDuplicate() : !0;
-}, canDeleteBlock = (o) => {
-  const n = getRegisteredChaiBlock(o);
-  return n && has(n, "canDelete") ? n.canDelete() : !0;
-}, canDropBlock = (o, { dragSource: n, dropTarget: r }) => {
-  const a = get(n, "data._type", ""), l = get(r, "data._type", "");
-  return canAcceptChildBlock(l, a);
 };
-import.meta.vitest && describe("canDropBlock Function", () => {
-  it('should return false if dragSourceType is "Slot"', () => {
-    const o = { data: { _type: "Slot" } }, n = { data: {} };
-    expect(canDropBlock({}, { dragSource: o, dropTarget: n })).toBe(!0);
-  }), it("should return true if dropTargetType is empty", () => {
-    const o = { data: { _type: "Box" } }, n = { data: {} };
-    expect(canDropBlock({}, { dragSource: o, dropTarget: n })).toBe(!0);
-  });
-});
-class PubSub {
-  constructor() {
-    F(this, "subscribers", /* @__PURE__ */ new Map());
-  }
-  subscribe(n, r) {
-    return this.subscribers.has(n) || this.subscribers.set(n, /* @__PURE__ */ new Set()), this.subscribers.get(n).add(r), () => {
-      const a = this.subscribers.get(n);
-      a && (a.delete(r), a.size === 0 && this.subscribers.delete(n));
-    };
-  }
-  publish(n, r) {
-    const a = this.subscribers.get(n);
-    a && a.forEach((l) => l(r));
-  }
-}
-const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
-  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (m) => c ? get(m, "_parent") === c : !get(m, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(d, { _id: i }), g = (m) => {
-    if (m === "CHILD")
-      pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
-    else {
-      const h = { _id: c || "", position: d == null ? void 0 : d.length };
-      m === "BEFORE" ? h.position = Math.max(u, 0) : m === "AFTER" && (h.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, h);
-    }
-  };
-  return l(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: n }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "border border-blue-500 bg-primary text-white shadow-2xl", children: [
-      p && /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("CHILD"), children: r("Add inside") }),
-      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("BEFORE"), children: r("Add before") }),
-      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("AFTER"), children: r("Add after") })
-    ] })
-  ] }) : null;
-}, draggedBlockAtom = atom(null);
-atom(null);
-function getOrientation(o, n = null) {
-  const r = window.getComputedStyle(o), a = n ? window.getComputedStyle(n) : null, l = r.display, i = a ? a.display : null;
-  if (l === "flex" || l === "inline-flex") {
-    const c = r.flexDirection;
-    return c === "column" || c === "column-reverse" ? "vertical" : "horizontal";
-  } else if (l === "grid") {
-    const c = r.gridAutoFlow, d = r.gridTemplateColumns;
-    return c.includes("column") || d && d !== "none" && d !== "" && !d.includes("calc") && // Handle calc expressions
-    d.split(" ").length <= 1 ? "vertical" : "horizontal";
-  } else if (i === "inline-block" || i === "inline")
-    return "horizontal";
-  return "vertical";
-}
-let doc, win;
-typeof document < "u" && (doc = document);
-typeof window < "u" && (win = window);
-const FrameContext = React__default.createContext({ document: doc, window: win }), useFrame = () => React__default.useContext(FrameContext), { Provider: FrameContextProvider, Consumer: FrameContextConsumer } = FrameContext;
 function insertBlocksAtPosition(o, n, r, a) {
   const l = [...n];
   let i = [...o];
@@ -843,8 +730,8 @@ const undoRedoStateAtom = atom({
       const C = map(f, (j) => {
         const B = n.find((I) => I._id === j)._parent || null, k = n.filter((I) => B ? I._parent === B : !I._parent).map((I) => I._id).indexOf(j);
         return { _id: j, oldParent: B, oldPosition: k };
-      }), v = C.find(({ _id: j }) => j === f[0]);
-      v && v.oldParent === b && v.oldPosition === y || (i(f, b, y), o({
+      }), S = C.find(({ _id: j }) => j === f[0]);
+      S && S.oldParent === b && S.oldPosition === y || (i(f, b, y), o({
         undo: () => each(C, ({ _id: j, oldParent: _, oldPosition: B }) => {
           i([j], _, B);
         }),
@@ -858,8 +745,8 @@ const undoRedoStateAtom = atom({
       });
     },
     removeBlocks: (f) => {
-      var v;
-      const b = (v = first(f)) == null ? void 0 : v._parent, C = n.filter((j) => b ? j._parent === b : !j._parent).indexOf(first(f));
+      var S;
+      const b = (S = first(f)) == null ? void 0 : S._parent, C = n.filter((j) => b ? j._parent === b : !j._parent).indexOf(first(f));
       l(map(f, "_id")), o({
         undo: () => a(f, b, C),
         redo: () => l(map(f, "_id"))
@@ -868,17 +755,17 @@ const undoRedoStateAtom = atom({
     updateBlocks: (f, b, y) => {
       let C = [];
       if (y)
-        C = map(f, (v) => ({ _id: v, ...y }));
+        C = map(f, (S) => ({ _id: S, ...y }));
       else {
-        const v = keys(b);
+        const S = keys(b);
         C = map(f, (j) => {
-          const _ = n.find((S) => S._id === j), B = { _id: j };
-          return each(v, (S) => B[S] = _[S]), B;
+          const _ = n.find((v) => v._id === j), B = { _id: j };
+          return each(S, (v) => B[v] = _[v]), B;
         });
       }
-      c(map(f, (v) => ({ _id: v, ...b }))), o({
+      c(map(f, (S) => ({ _id: S, ...b }))), o({
         undo: () => c(C),
-        redo: () => c(map(f, (v) => ({ _id: v, ...b })))
+        redo: () => c(map(f, (S) => ({ _id: S, ...b })))
       });
     },
     updateBlocksRuntime: (f, b) => {
@@ -893,15 +780,44 @@ const undoRedoStateAtom = atom({
     updateMultipleBlocksProps: (f) => {
       let b = [];
       b = map(f, (y) => {
-        const C = keys(y), v = n.find((_) => _._id === y._id), j = {};
-        return each(C, (_) => j[_] = v[_]), j;
+        const C = keys(y), S = n.find((_) => _._id === y._id), j = {};
+        return each(C, (_) => j[_] = S[_]), j;
       }), c(f), o({
         undo: () => c(b),
         redo: () => c(f)
       });
     }
   };
-}, useAddBlock = () => {
+}, canAcceptChildBlock = (o, n) => {
+  if (!o) return !0;
+  const r = getRegisteredChaiBlock(o);
+  return r && has(r, "canAcceptBlock") ? r.canAcceptBlock(n) : !1;
+}, canAddChildBlock = (o) => {
+  const n = getRegisteredChaiBlock(o);
+  return n ? has(n, "canAcceptBlock") : !1;
+}, canBeNestedInside = (o, n) => {
+  const r = getRegisteredChaiBlock(n);
+  return r && has(r, "canBeNested") ? r.canBeNested(o) : !0;
+}, canDuplicateBlock = (o) => {
+  const n = getRegisteredChaiBlock(o);
+  return n && has(n, "canDuplicate") ? n.canDuplicate() : !0;
+}, canDeleteBlock = (o) => {
+  const n = getRegisteredChaiBlock(o);
+  return n && has(n, "canDelete") ? n.canDelete() : !0;
+}, canDropBlock = (o, { dragSource: n, dropTarget: r }) => {
+  const a = get(n, "data._type", ""), l = get(r, "data._type", "");
+  return canAcceptChildBlock(l, a);
+};
+import.meta.vitest && describe("canDropBlock Function", () => {
+  it('should return false if dragSourceType is "Slot"', () => {
+    const o = { data: { _type: "Slot" } }, n = { data: {} };
+    expect(canDropBlock({}, { dragSource: o, dropTarget: n })).toBe(!0);
+  }), it("should return true if dropTargetType is empty", () => {
+    const o = { data: { _type: "Box" } }, n = { data: {} };
+    expect(canDropBlock({}, { dragSource: o, dropTarget: n })).toBe(!0);
+  });
+});
+const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var h;
@@ -2368,8 +2284,8 @@ const getBlockWithChildren = (o, n) => {
     for (const b in f) {
       const y = f[b];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: C, classes: v } = getSplitChaiClasses(y);
-        f[b] = compact(flattenDeep([C, v])).join(" ");
+        const { baseClasses: C, classes: S } = getSplitChaiClasses(y);
+        f[b] = compact(flattenDeep([C, S])).join(" ");
       } else
         b !== "_id" && delete f[b];
     }
@@ -2381,18 +2297,18 @@ const getBlockWithChildren = (o, n) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, C = f.toLowerCase().includes("translate the content"), v = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p, C) : [m(x, d)], j = await l(h, addLangToPrompt(f, g, h), v, y), { blocks: _, error: B } = j;
+            const y = p === u ? "" : p, C = f.toLowerCase().includes("translate the content"), S = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p, C) : [m(x, d)], j = await l(h, addLangToPrompt(f, g, h), S, y), { blocks: _, error: B } = j;
             if (B) {
               a(B);
               return;
             }
             if (h === "styles") {
-              const S = _.map((k) => {
+              const v = _.map((k) => {
                 for (const I in k)
                   I !== "_id" && (k[I] = `${STYLES_KEY},${k[I]}`);
                 return k;
               });
-              c(S);
+              c(v);
             } else
               i(_);
             b && b(j);
@@ -2957,7 +2873,105 @@ const useInlineEditing = () => {
   );
 }, useSelectedLibrary = () => useAtom$1(selectedLibraryAtom), sidebarActivePanelAtom = atom("outline");
 sidebarActivePanelAtom.debugLabel = "sidebarActivePanelAtom";
-const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS = [
+const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), ScalePercent = () => {
+  const [o] = useCanvasZoom();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-12 cursor-not-allowed items-center justify-center gap-x-1 space-x-0 font-medium text-gray-400", children: [
+    /* @__PURE__ */ jsx(ZoomInIcon, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+    " ",
+    /* @__PURE__ */ jsxs("div", { className: "text-xs leading-3", children: [
+      round(o, 0),
+      "%"
+    ] })
+  ] });
+}, Breadcrumb = () => {
+  const o = useSelectedBlockHierarchy(), [, n] = useSelectedBlockIds(), { highlightBlock: r } = useBlockHighlight();
+  return /* @__PURE__ */ jsxs("div", { className: "-mx-2 flex items-center justify-between border-t border-border bg-background px-2 py-1 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("ol", { className: "flex items-center whitespace-nowrap", children: [
+      /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
+        /* @__PURE__ */ jsx(Button, { onClick: () => n([]), variant: "ghost", className: "h-fit p-1 text-xs font-normal", children: "Body" }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 rtl:rotate-180" })
+      ] }),
+      reverse(o).map((a, l) => /* @__PURE__ */ jsxs("li", { className: "inline-flex items-center", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onMouseEnter: () => {
+              r(a == null ? void 0 : a._id);
+            },
+            onClick: () => n([a == null ? void 0 : a._id]),
+            variant: "ghost",
+            className: "h-fit gap-x-1 p-1 text-xs font-normal",
+            children: [
+              /* @__PURE__ */ jsx(TypeIcon, { type: a == null ? void 0 : a._type }),
+              a._name || a._type
+            ]
+          }
+        ),
+        l !== o.length - 1 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 rtl:rotate-180" })
+      ] }, l))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx(ScalePercent, {}) })
+  ] });
+}, CHAI_BUILDER_EVENTS = {
+  OPEN_ADD_BLOCK: "OPEN_ADD_BLOCK",
+  CLOSE_ADD_BLOCK: "CLOSE_ADD_BLOCK",
+  SHOW_BLOCK_SETTINGS: "SHOW_BLOCK_SETTINGS",
+  //CANVAS Events
+  CLEAR_CANVAS_SELECTION: "CLEAR_CANVAS_SELECTION",
+  CANVAS_BLOCK_SELECTED: "CANVAS_BLOCK_SELECTED",
+  CANVAS_BLOCK_STYLE_SELECTED: "CANVAS_BLOCK_STYLE_SELECTED"
+};
+class PubSub {
+  constructor() {
+    F(this, "subscribers", /* @__PURE__ */ new Map());
+  }
+  subscribe(n, r) {
+    return this.subscribers.has(n) || this.subscribers.set(n, /* @__PURE__ */ new Set()), this.subscribers.get(n).add(r), () => {
+      const a = this.subscribers.get(n);
+      a && (a.delete(r), a.size === 0 && this.subscribers.delete(n));
+    };
+  }
+  publish(n, r) {
+    const a = this.subscribers.get(n);
+    a && a.forEach((l) => l(r));
+  }
+}
+const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
+  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (m) => c ? get(m, "_parent") === c : !get(m, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(d, { _id: i }), g = (m) => {
+    if (m === "CHILD")
+      pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
+    else {
+      const h = { _id: c || "", position: d == null ? void 0 : d.length };
+      m === "BEFORE" ? h.position = Math.max(u, 0) : m === "AFTER" && (h.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, h);
+    }
+  };
+  return l(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: n }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "border border-blue-500 bg-primary text-white shadow-2xl", children: [
+      p && /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("CHILD"), children: r("Add inside") }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("BEFORE"), children: r("Add before") }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("AFTER"), children: r("Add after") })
+    ] })
+  ] }) : null;
+}, draggedBlockAtom = atom(null);
+atom(null);
+function getOrientation(o, n = null) {
+  const r = window.getComputedStyle(o), a = n ? window.getComputedStyle(n) : null, l = r.display, i = a ? a.display : null;
+  if (l === "flex" || l === "inline-flex") {
+    const c = r.flexDirection;
+    return c === "column" || c === "column-reverse" ? "vertical" : "horizontal";
+  } else if (l === "grid") {
+    const c = r.gridAutoFlow, d = r.gridTemplateColumns;
+    return c.includes("column") || d && d !== "none" && d !== "" && !d.includes("calc") && // Handle calc expressions
+    d.split(" ").length <= 1 ? "vertical" : "horizontal";
+  } else if (i === "inline-block" || i === "inline")
+    return "horizontal";
+  return "vertical";
+}
+let doc, win;
+typeof document < "u" && (doc = document);
+typeof window < "u" && (win = window);
+const FrameContext = React__default.createContext({ document: doc, window: win }), useFrame = () => React__default.useContext(FrameContext), { Provider: FrameContextProvider, Consumer: FrameContextConsumer } = FrameContext, CONTROLS = [
   { ControlIcon: PinTopIcon, dir: "VERTICAL", key: "UP" },
   { ControlIcon: PinBottomIcon, dir: "VERTICAL", key: "DOWN" },
   { ControlIcon: PinLeftIcon, dir: "HORIZONTAL", key: "LEFT" },
@@ -2995,19 +3009,18 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     o,
     n
   );
-  return r ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: d, dir: p, key: u }) => {
-    if (c !== p) return null;
-    const g = isDisabledControl(a, l, u);
-    return g ? null : /* @__PURE__ */ jsx(
-      d,
-      {
-        onClick: () => i(u),
-        className: `${g ? "pointer-events-none cursor-not-allowed opacity-50" : "duration-300 hover:scale-95 hover:opacity-80"}`
-      },
-      u
-    );
-  }) });
-};
+  return r ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: d, dir: p, key: u }) => c !== p || isDisabledControl(a, l, u) ? null : /* @__PURE__ */ jsx(
+    d,
+    {
+      onClick: () => i(u),
+      className: "rounded p-px hover:bg-white hover:text-blue-500"
+    },
+    u
+  )) });
+}, AiIcon = ({
+  className: o = "h-full w-full",
+  onClick: n = noop$1
+}) => /* @__PURE__ */ jsx("svg", { className: o, viewBox: "0 0 256 256", fill: "currentColor", onClick: n, children: /* @__PURE__ */ jsx("path", { d: "m198.39 128.986-52.16-19.216-19.216-52.16a16 16 0 0 0-30.028 0L77.77 109.77l-52.16 19.216a16 16 0 0 0 0 30.028l52.16 19.216 19.216 52.16a16 16 0 0 0 30.028 0l19.216-52.16 52.16-19.216a16 16 0 0 0 0-30.028m-57.69 34.23a15.97 15.97 0 0 0-9.483 9.483l-19.22 52.152-19.214-52.15a15.97 15.97 0 0 0-9.482-9.484l-52.152-19.22 52.15-19.214a15.97 15.97 0 0 0 9.484-9.482l19.22-52.152 19.214 52.15a15.97 15.97 0 0 0 9.482 9.484l52.152 19.22ZM144 40a8 8 0 0 1 8-8h16V16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V48h-16a8 8 0 0 1-8-8m104 48a8 8 0 0 1-8 8h-8v8a8 8 0 0 1-16 0v-8h-8a8 8 0 0 1 0-16h8v-8a8 8 0 0 1 16 0v8h8a8 8 0 0 1 8 8" }) });
 function getTargetedBlock(o) {
   if (o.getAttribute("data-block-id") === "canvas")
     return null;
@@ -3093,21 +3106,18 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     }
   );
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), BlockActionLabel = ({ block: o, label: n }) => {
-  const [, r] = useSelectedBlockIds(), [, a] = useHighlightBlockId(), [, l] = useAtom$1(draggedBlockAtom), i = useFeature("dnd");
-  return /* @__PURE__ */ jsxs(
+  const [, r] = useSelectedBlockIds(), [, a] = useHighlightBlockId(), [, l] = useAtom$1(draggedBlockAtom);
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "mr-10 flex cursor-default items-center space-x-1 px-1",
-      draggable: i ? "true" : "false",
-      onDragStart: (c) => {
-        c.dataTransfer.setData("text/plain", JSON.stringify(pick(o, ["_id", "_type", "_name"]))), l(o), setTimeout(() => {
+      draggable: "false",
+      onDragStart: (i) => {
+        i.dataTransfer.setData("text/plain", JSON.stringify(pick(o, ["_id", "_type", "_name"]))), l(o), setTimeout(() => {
           r([]), a(null);
         }, 200);
       },
-      children: [
-        /* @__PURE__ */ jsx(DragHandleDots2Icon, {}),
-        n
-      ]
+      children: n
     }
   );
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), BlockSelectionHighlighter = () => {
@@ -3146,10 +3156,10 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       }),
       size({
         boundary: u == null ? void 0 : u.body,
-        apply({ availableWidth: b, availableHeight: y, elements: C }) {
-          Object.assign(C.floating.style, {
-            maxWidth: `${Math.max(200, b)}px`,
-            maxHeight: `${Math.max(100, y)}px`
+        apply({ availableWidth: y, availableHeight: C, elements: S }) {
+          Object.assign(S.floating.style, {
+            maxWidth: `${Math.max(200, y)}px`,
+            maxHeight: `${Math.max(100, C)}px`
           });
         }
       })
@@ -3158,42 +3168,63 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
   });
   useResizeObserver(n, () => h(), n !== null), useResizeObserver(u == null ? void 0 : u.body, () => h(), (u == null ? void 0 : u.body) !== null);
   const x = get(o, "_parent", null), f = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
-  return useEffect(() => {
+  useEffect(() => {
     if (n) {
-      const b = setTimeout(() => h(), 500);
-      return () => clearTimeout(b);
+      const y = setTimeout(() => h(), 500);
+      return () => clearTimeout(y);
     } else
       h();
-  }, [n]), !n || !o || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+  }, [n]);
+  const [, b] = useSidebarActivePanel();
+  return !n || !o || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: "button",
       tabIndex: 0,
       ref: m.setFloating,
       style: g,
-      onClick: (b) => {
-        b.stopPropagation(), b.preventDefault();
+      onClick: (y) => {
+        y.stopPropagation(), y.preventDefault();
       },
-      onMouseEnter: (b) => {
-        b.stopPropagation(), i(null);
+      onMouseEnter: (y) => {
+        y.stopPropagation(), i(null);
       },
-      onKeyDown: (b) => b.stopPropagation(),
+      onKeyDown: (y) => y.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         x && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
-            className: "hover:scale-105",
+            className: "rounded p-0.5 hover:bg-white/20",
             onClick: () => {
               c([]), l([x]);
             }
           }
         ),
         /* @__PURE__ */ jsx(BlockActionLabel, { label: f, block: o }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-1 pr-1.5", children: [
-          /* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "hover:scale-105" }) }),
-          canDuplicateBlock(get(o, "_type", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([o == null ? void 0 : o._id]) }) : null,
-          canDeleteBlock(get(o, "_type", "")) && d(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(TrashIcon, { className: "hover:scale-105", onClick: () => r([o == null ? void 0 : o._id]) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pl-1 pr-1.5", children: [
+          d(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
+            AiIcon,
+            {
+              className: "h-4 w-4 rounded hover:bg-white hover:text-blue-500",
+              onClick: () => b("chai-chat-panel")
+            }
+          ),
+          /* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500" }) }),
+          canDuplicateBlock(get(o, "_type", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(
+            CopyIcon,
+            {
+              className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500",
+              onClick: () => a([o == null ? void 0 : o._id])
+            }
+          ) : null,
+          canDeleteBlock(get(o, "_type", "")) && d(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(
+            TrashIcon,
+            {
+              className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500",
+              onClick: () => r([o == null ? void 0 : o._id])
+            }
+          ) : null,
           d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar: h })
         ] })
       ]
@@ -3433,7 +3464,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         role: "button",
         onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK),
         className: "block h-1 rounded bg-primary opacity-0 duration-200 group-hover:opacity-100",
-        children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-primary px-3 py-1 text-xs leading-tight text-white hover:bg-primary", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-primary px-3 py-1 text-xs leading-tight text-white hover:bg-primary", children: [
           /* @__PURE__ */ jsx(PlusIcon, { className: "size-2.5 stroke-[3]" }),
           " ",
           o("Add block")
@@ -3621,12 +3652,12 @@ const RteDropdownMenu = ({
 }) => {
   const { document: i } = useFrame(), [c, d] = useState({ left: void 0, right: void 0, top: void 0, bottom: void 0 }), [p, u] = useState(!1), g = useRef(null);
   if (useEffect(() => {
-    var C, v;
+    var C, S;
     if (!p) {
       d({ left: void 0, right: void 0, top: void 0, bottom: void 0 });
       return;
     }
-    const m = (C = g.current) == null ? void 0 : C.getBoundingClientRect(), h = (v = l.current) == null ? void 0 : v.getBoundingClientRect();
+    const m = (C = g.current) == null ? void 0 : C.getBoundingClientRect(), h = (S = l.current) == null ? void 0 : S.getBoundingClientRect();
     let x = m == null ? void 0 : m.left, f = (m == null ? void 0 : m.bottom) + 4, b, y;
     (h == null ? void 0 : h.left) + (h == null ? void 0 : h.width) + 50 >= i.body.offsetWidth && (x = void 0, b = i.body.offsetWidth - (m == null ? void 0 : m.right)), f + 202 >= i.body.clientHeight && (f = null, y = i.body.clientHeight - (m == null ? void 0 : m.bottom) + (h == null ? void 0 : h.height)), d({ left: x, top: f, right: b, bottom: y });
   }, [p]), a === "canvas") {
@@ -3776,8 +3807,8 @@ const getActiveClasses$1 = (o, n, r) => {
     )
   ] });
 }, RteColorPicker = ({ editor: o, from: n, menuRef: r }) => {
-  var v, j;
-  const a = (v = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : v.color, l = (j = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : j.color, [i, c] = useState(a || "#000000F2"), [d, p] = useState(l || "#00000057"), [u, g] = useDebouncedState(i, 150), [m, h] = useDebouncedState(d, 150), x = (_, B) => {
+  var S, j;
+  const a = (S = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : S.color, l = (j = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : j.color, [i, c] = useState(a || "#000000F2"), [d, p] = useState(l || "#00000057"), [u, g] = useDebouncedState(i, 150), [m, h] = useDebouncedState(d, 150), x = (_, B) => {
     B ? (c(_), g(_)) : (o == null || o.chain().setColor(_).run(), c(_));
   }, f = (_, B) => {
     B ? (p(_), h(_)) : (o == null || o.chain().setHighlight({ color: _ }).run(), p(_));
@@ -4088,8 +4119,8 @@ const RichTextEditor = memo(
       placeholder: "Enter text here",
       onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
       onBlur: ({ editor: u, event: g }) => {
-        const m = g == null ? void 0 : g.relatedTarget, h = i.querySelector(".ProseMirror"), x = i.querySelector(".tippy-box"), f = i.querySelector("#chai-rich-text-menu-bar"), b = h == null ? void 0 : h.contains(m), y = x == null ? void 0 : x.contains(m), C = f == null ? void 0 : f.contains(m), v = window.document.getElementById("rte-widget-color-picker");
-        if (!b && !y && !C && !v) {
+        const m = g == null ? void 0 : g.relatedTarget, h = i.querySelector(".ProseMirror"), x = i.querySelector(".tippy-box"), f = i.querySelector("#chai-rich-text-menu-bar"), b = h == null ? void 0 : h.contains(m), y = x == null ? void 0 : x.contains(m), C = f == null ? void 0 : f.contains(m), S = window.document.getElementById("rte-widget-color-picker");
+        if (!b && !y && !C && !S) {
           const j = (u == null ? void 0 : u.getHTML()) || "";
           r(j);
         }
@@ -4182,7 +4213,7 @@ const RichTextEditor = memo(
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: x } = useLanguages(), [, f] = useSelectedBlockIds(), b = useRef(null), y = l, { blockContent: C, blockType: v } = useMemo(() => {
+    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: x } = useLanguages(), [, f] = useSelectedBlockIds(), b = useRef(null), y = l, { blockContent: C, blockType: S } = useMemo(() => {
       var E;
       const k = o._type;
       let I = o[r];
@@ -4215,8 +4246,8 @@ const RichTextEditor = memo(
       if (!y) return;
       const k = `[data-block-id="${y}"]`, I = i >= 0 ? `[data-block-index="${i}"]` : "", A = a.querySelector(`${k}${I}`);
       A && ((w = A == null ? void 0 : A.classList) == null || w.add("sr-only"), u(A));
-    }, [y, v, a, i]);
-    const S = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(v) ? /* @__PURE__ */ jsx(
+    }, [y, S, a, i]);
+    const v = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(S) ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
         blockContent: C,
@@ -4235,9 +4266,9 @@ const RichTextEditor = memo(
         onChange: _,
         onEscape: B
       }
-    )) : null, [p, y, v, C, j, x]);
+    )) : null, [p, y, S, C, j, x]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      S,
+      v,
       n
     ] });
   },
@@ -4279,7 +4310,7 @@ const RichTextEditor = memo(
   ), y = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), C = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
-  ), v = useMemo(
+  ), S = useMemo(
     () => ({
       blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
       inBuilder: !0,
@@ -4302,7 +4333,7 @@ const RichTextEditor = memo(
   ), j = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), _ = useMemo(() => get(i, "_show", !0), [i]);
   if (isNull(h) || !_) return null;
   let B = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
-    ...v,
+    ...S,
     children: r({
       _id: i._id,
       _type: i._type,
@@ -4314,8 +4345,8 @@ const RichTextEditor = memo(
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const S = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: B }) : B;
-  return j ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: S }) : S;
+  const v = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: B }) : B;
+  return j ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: v }) : v;
 }, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
     (d) => {
@@ -4483,7 +4514,7 @@ const CanvasEventsWatcher = () => {
     /* @__PURE__ */ jsx("p", { className: "font-semibold", children: o("Oops! Something went wrong.") }),
     /* @__PURE__ */ jsx("p", { children: o("Please try again.") })
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-DHjchara.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-BwCdfuDZ.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -4626,15 +4657,15 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     if (!o || !c || !/\{\{.*?\}\}/.test(o)) return o;
     const j = { ...c, [u]: o }, _ = applyBindingToBlockProps(j, p, { index: -1, key: "" });
     return get(_, u, o);
-  }, [o, c, p, u]), f = !!h || x !== PLACEHOLDER_IMAGE, b = (v) => {
-    const j = isArray(v) ? first(v) : v;
+  }, [o, c, p, u]), f = !!h || x !== PLACEHOLDER_IMAGE, b = (S) => {
+    const j = isArray(S) ? first(S) : S;
     if (j) {
       n(j == null ? void 0 : j.url);
-      const _ = j == null ? void 0 : j.width, B = j == null ? void 0 : j.height, S = g.includes("mobile");
+      const _ = j == null ? void 0 : j.width, B = j == null ? void 0 : j.height, v = g.includes("mobile");
       if (c != null && c._id) {
         const k = {
-          ..._ && { [S ? "mobileWidth" : "width"]: _ },
-          ...B && { [S ? "mobileHeight" : "height"]: B },
+          ..._ && { [v ? "mobileWidth" : "width"]: _ },
+          ...B && { [v ? "mobileHeight" : "height"]: B },
           ...j.description && { alt: j.description }
         };
         if (set(k, g, j.id), isEmpty(k)) return;
@@ -4643,8 +4674,8 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     }
   }, y = useCallback(() => {
     if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
-      const v = {}, j = g.includes("mobile");
-      set(v, g, ""), set(v, j ? "mobileWidth" : "width", ""), set(v, j ? "mobileHeight" : "height", ""), d([c._id], v);
+      const S = {}, j = g.includes("mobile");
+      set(S, g, ""), set(S, j ? "mobileWidth" : "width", ""), set(S, j ? "mobileHeight" : "height", ""), d([c._id], S);
     }
   }, [n, c == null ? void 0 : c._id, d, g]), C = getFileName(x);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-start gap-x-3", children: [
@@ -4692,8 +4723,8 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           className: "h-6  text-xs",
           placeholder: l("Enter image URL"),
           value: o === PLACEHOLDER_IMAGE ? "" : o,
-          onBlur: ({ target: { value: v } }) => a(r, v),
-          onChange: (v) => n(v.target.value)
+          onBlur: ({ target: { value: S } }) => a(r, S),
+          onChange: (S) => n(S.target.value)
         }
       )
     ] })
@@ -4809,11 +4840,11 @@ const DataBindingSelector = ({
         n(`{{${g}}}`, {}, r);
         return;
       }
-      const h = (y) => /[.,!?;:]/.test(y), x = (y, C, v) => {
+      const h = (y) => /[.,!?;:]/.test(y), x = (y, C, S) => {
         let j = "", _ = "";
-        const B = C > 0 ? y[C - 1] : "", S = C < y.length ? y[C] : "";
-        return C > 0 && (B === "." || !h(B) && B !== " ") && (j = " "), C < y.length && !h(S) && S !== " " && (_ = " "), {
-          text: j + v + _,
+        const B = C > 0 ? y[C - 1] : "", v = C < y.length ? y[C] : "";
+        return C > 0 && (B === "." || !h(B) && B !== " ") && (j = " "), C < y.length && !h(v) && v !== " " && (_ = " "), {
+          text: j + S + _,
           prefixLength: j.length,
           suffixLength: _.length
         };
@@ -4825,13 +4856,13 @@ const DataBindingSelector = ({
         if (y) {
           const C = `{{${g}}}`;
           y.commands.focus();
-          const { from: v, to: j } = y.state.selection;
-          if (v !== j)
+          const { from: S, to: j } = y.state.selection;
+          if (S !== j)
             y.chain().deleteSelection().insertContent(C).run();
           else {
-            const { state: B } = y, S = B.selection.from, k = B.doc.textBetween(Math.max(0, S - 1), S), I = B.doc.textBetween(S, Math.min(S + 1, B.doc.content.size));
+            const { state: B } = y, v = B.selection.from, k = B.doc.textBetween(Math.max(0, v - 1), v), I = B.doc.textBetween(v, Math.min(v + 1, B.doc.content.size));
             let A = "";
-            S > 0 && k !== " " && !h(k) && (A = " ");
+            v > 0 && k !== " " && !h(k) && (A = " ");
             let w = "";
             I && I !== " " && !h(I) && (w = " "), y.chain().insertContent(A + C + w).run();
           }
@@ -4839,13 +4870,13 @@ const DataBindingSelector = ({
           return;
         }
       } else {
-        const y = f, C = y.selectionStart || 0, v = y.value || "", j = y.selectionEnd || C;
+        const y = f, C = y.selectionStart || 0, S = y.value || "", j = y.selectionEnd || C;
         if (j > C) {
-          const I = `{{${g}}}`, { text: A } = x(v, C, I), w = v.slice(0, C) + A + v.slice(j);
+          const I = `{{${g}}}`, { text: A } = x(S, C, I), w = S.slice(0, C) + A + S.slice(j);
           n(w, {}, r);
           return;
         }
-        const B = `{{${g}}}`, { text: S } = x(v, C, B), k = v.slice(0, C) + S + v.slice(C);
+        const B = `{{${g}}}`, { text: v } = x(S, C, B), k = S.slice(0, C) + v + S.slice(C);
         n(k, {}, r);
       }
     },
@@ -4868,7 +4899,7 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var I;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (A, w) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [b, y] = useState(-1), C = useRef(null), v = (I = n == null ? void 0 : n.find((A) => A.key === u)) == null ? void 0 : I.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (A, w) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [b, y] = useState(-1), C = useRef(null), S = (I = n == null ? void 0 : n.find((A) => A.key === u)) == null ? void 0 : I.name;
   useEffect(() => {
     if (h(""), f([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const A = split(o, ":"), w = get(A, 1, "page") || "page";
@@ -4905,7 +4936,7 @@ const DataBindingSelector = ({
         b >= 0 && _(x[b]);
         break;
       case "Escape":
-        A.preventDefault(), S();
+        A.preventDefault(), v();
         break;
     }
   };
@@ -4915,7 +4946,7 @@ const DataBindingSelector = ({
       A == null || A.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const S = () => {
+  const v = () => {
     h(""), f([]), y(-1), p(!1), r("");
   }, k = (A) => {
     h(A), p(!isEmpty(A)), c(!0), j(A);
@@ -4930,11 +4961,11 @@ const DataBindingSelector = ({
           value: m,
           onChange: (A) => k(A.target.value),
           onKeyDown: B,
-          placeholder: a(`Search ${v ?? ""}`),
+          placeholder: a(`Search ${S ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: v, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(x) || d && isEmpty(x)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -5053,7 +5084,7 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DxyV3u6C.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: l, onBlur: i }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DrMYNEN2.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: l, onBlur: i }) => {
   const c = useRef(null), [d, p] = useState(!1), u = useRTEditor({
     blockId: o,
     value: a,
@@ -5302,10 +5333,10 @@ const DataBindingSelector = ({
   const { id: n, classNames: r, label: a, children: l, errors: i, help: c, hidden: d, required: p, schema: u, formData: g, onChange: m } = o, { selectedLang: h, fallbackLang: x, languages: f } = useLanguages(), b = useMemo(
     () => isEmpty(f) ? "" : isEmpty(h) ? x : h,
     [f, h, x]
-  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), C = usePageExternalData(), v = useSelectedBlock(), j = useRegisteredChaiBlocks(), _ = useMemo(
-    () => get(j, [v == null ? void 0 : v._type, "i18nProps"], []),
-    [j, v == null ? void 0 : v._type]
-  ), [B, S] = useState(null);
+  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), C = usePageExternalData(), S = useSelectedBlock(), j = useRegisteredChaiBlocks(), _ = useMemo(
+    () => get(j, [S == null ? void 0 : S._type, "i18nProps"], []),
+    [j, S == null ? void 0 : S._type]
+  ), [B, v] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: l });
@@ -5317,7 +5348,7 @@ const DataBindingSelector = ({
         "label",
         {
           htmlFor: n,
-          onClick: () => S(E ? null : n),
+          onClick: () => v(E ? null : n),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             E ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
@@ -5504,36 +5535,36 @@ const DataBindingSelector = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), x = ({ formData: B }, S, k) => {
-    S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(B, S) }, k);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), x = ({ formData: B }, v, k) => {
+    v && (c == null ? void 0 : c._id) === n._id && a([n._id], { [v]: get(B, v) }, k);
   }, f = useCallback(
-    debounce(({ formData: B }, S, k) => {
-      x({ formData: B }, S, k), d(B);
+    debounce(({ formData: B }, v, k) => {
+      x({ formData: B }, v, k), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: B }, S) => {
-    S && (r([n._id], { [S]: get(B, S) }), f({ formData: B }, S, { [S]: get(c, S) }));
-  }, y = ({ formData: B }, S) => {
-    S && (r([g._id], { [S]: get(B, S) }), f({ formData: B }, S, { [S]: get(c, S) }));
-  }, { schema: C, uiSchema: v } = useMemo(() => {
+  ), b = ({ formData: B }, v) => {
+    v && (r([n._id], { [v]: get(B, v) }), f({ formData: B }, v, { [v]: get(c, v) }));
+  }, y = ({ formData: B }, v) => {
+    v && (r([g._id], { [v]: get(B, v) }), f({ formData: B }, v, { [v]: get(c, v) }));
+  }, { schema: C, uiSchema: S } = useMemo(() => {
     const B = n == null ? void 0 : n._type;
     if (!B)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: S, uiSchema: k } = getBlockFormSchemas(B);
+      const { schema: v, uiSchema: k } = getBlockFormSchemas(B);
       if (B === "Repeater") {
         const I = get(n, "repeaterItems", "");
         startsWith(I, `{{${COLLECTION_PREFIX}`) ? (set(k, "filter", { "ui:widget": "collectionSelect" }), set(k, "sort", { "ui:widget": "collectionSelect" })) : (set(k, "filter", { "ui:widget": "hidden" }), set(k, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: S, uiSchema: k };
+      return { schema: v, uiSchema: k };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
   }, [n]), { wrapperSchema: j, wrapperUiSchema: _ } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const B = g == null ? void 0 : g._type, { schema: S = {}, uiSchema: k = {} } = getBlockFormSchemas(B);
-    return { wrapperSchema: S, wrapperUiSchema: k };
+    const B = g == null ? void 0 : g._type, { schema: v = {}, uiSchema: k = {} } = getBlockFormSchemas(B);
+    return { wrapperSchema: v, wrapperUiSchema: k };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -5573,7 +5604,7 @@ function BlockSettings() {
         onChange: b,
         formData: i,
         schema: C,
-        uiSchema: v
+        uiSchema: S
       }
     )
   ] });
@@ -5784,7 +5815,7 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [b, y] = useState(""), [C, v] = useState(!1), [j, _] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [b, y] = useState(""), [C, S] = useState(!1), [j, _] = useState(!1);
   useEffect(() => {
     const { value: A, unit: w } = getClassValueAndUnit(i);
     if (w === "") {
@@ -5793,7 +5824,7 @@ const BlockStylingProps = () => {
     }
     h(w), l(w === "class" || isEmpty(A) ? "" : A);
   }, [i, p, u]);
-  const B = useThrottledCallback((A) => c(A), [c], THROTTLE_TIME), S = useThrottledCallback((A) => c(A, !1), [c], THROTTLE_TIME), k = useCallback(
+  const B = useThrottledCallback((A) => c(A), [c], THROTTLE_TIME), v = useThrottledCallback((A) => c(A, !1), [c], THROTTLE_TIME), k = useCallback(
     (A = !1) => {
       const w = getUserInputValues(`${a}`, u);
       if (get(w, "error", !1)) {
@@ -5808,9 +5839,9 @@ const BlockStylingProps = () => {
       if (get(w, "value") === "")
         return;
       const T = `${get(w, "value", "").startsWith("-") ? "-" : ""}${d}[${get(w, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
-      A ? S(T) : B(T);
+      A ? v(T) : B(T);
     },
-    [B, S, a, m, d, u]
+    [B, v, a, m, d, u]
   ), I = useCallback(
     (A) => {
       const w = getUserInputValues(`${a}`, u);
@@ -5859,7 +5890,7 @@ const BlockStylingProps = () => {
             let E = isNaN$1(w) ? 0 : w;
             A.keyCode === 38 && (E += 1), A.keyCode === 40 && (E -= 1);
             const L = `${E}`, P = `${L.startsWith("-") ? "-" : ""}${d}[${L.replace("-", "")}${m === "-" ? "" : m}]`;
-            S(P);
+            v(P);
           },
           onKeyUp: (A) => {
             j && (A.preventDefault(), _(!1));
@@ -5907,9 +5938,9 @@ const BlockStylingProps = () => {
     ["none", "auto"].indexOf(m) !== -1 || C ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => v(!0),
+        onDragStart: () => S(!0),
         onDragEnd: (A) => {
-          if (y(() => ""), v(!1), isEmpty(A))
+          if (y(() => ""), S(!1), isEmpty(A))
             return;
           const w = `${A}`, L = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${m === "-" ? "" : m}]`;
           B(L);
@@ -5919,7 +5950,7 @@ const BlockStylingProps = () => {
             return;
           y(A);
           const w = `${A}`, L = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${m === "-" ? "" : m}]`;
-          S(L);
+          v(L);
         },
         currentValue: a,
         unit: m,
@@ -6383,8 +6414,8 @@ const COLOR_PROP = {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
-    (S, k = !0) => {
-      const I = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
+    (v, k = !0) => {
+      const I = { dark: p, mq: g, mod: u, cls: v, property: l, fullCls: "" };
       (p || u !== "") && (I.mq = "xs");
       const A = generateFullClsName(I);
       h(f, [A], k);
@@ -6392,12 +6423,12 @@ const COLOR_PROP = {
     [f, p, g, u, l, h]
   ), C = useCallback(() => {
     x(f, [b], !0);
-  }, [f, b, x]), v = useMemo(() => canChangeClass(m, g), [m, g]);
+  }, [f, b, x]), S = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(v, m);
-  }, [v, i, m]);
+    i(S, m);
+  }, [S, i, m]);
   const [, , j] = useScreenSizeWidth(), _ = useCallback(
-    (S) => {
+    (v) => {
       j({
         xs: 400,
         sm: 640,
@@ -6405,11 +6436,11 @@ const COLOR_PROP = {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[S]);
+      }[v]);
     },
     [j]
   ), B = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: v, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: S, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !B ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
@@ -6429,7 +6460,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => C(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : v && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => C(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6550,16 +6581,14 @@ const COLOR_PROP = {
     /* @__PURE__ */ jsx(AccordionTrigger, { className: "border-slate-150 border-t py-2 text-xs", children: /* @__PURE__ */ jsx("div", { className: "flex items-center py-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2 text-xs font-medium", children: startCase(r(o.heading)) }) }) }),
     /* @__PURE__ */ jsx(AccordionContent, { className: "py-2", children: o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label + "multiple-choices") : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label + "nested-options") : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label + "block-style")) })
   ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: o.items.map((c, d) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label + "multiple-choices" + d) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label + "nested-options" + d) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label + "block-style" + d)) }) });
-}, TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
+}, TabletIcon = ({ landscape: o = !1, className: n = "" }) => /* @__PURE__ */ jsx(
   "svg",
   {
-    className: o ? "rotate-90" : "",
+    className: cn$1("h-3 w-3", o ? "rotate-90" : "", n),
     stroke: "currentColor",
     fill: "currentColor",
     strokeWidth: "0",
     viewBox: "0 0 448 512",
-    height: "14px",
-    width: "14px",
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsx("path", { d: "M400 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM224 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm176-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h328c6.6 0 12 5.4 12 12v312z" })
   }
@@ -6568,14 +6597,14 @@ const COLOR_PROP = {
     title: "Mobile (Base)",
     content: "Styles set here are applied to all screen unless edited at higher breakpoint",
     breakpoint: "xs",
-    icon: /* @__PURE__ */ jsx(MobileIcon, {}),
+    icon: /* @__PURE__ */ jsx(MobileIcon, { className: "h-4 w-4" }),
     width: 400
   },
   {
     title: "Mobile landscape (SM)",
     content: "Styles set here are applied at 640px and up unless edited at higher breakpoint",
     breakpoint: "sm",
-    icon: /* @__PURE__ */ jsx(MobileIcon, { className: "rotate-90" }),
+    icon: /* @__PURE__ */ jsx(MobileIcon, { className: "h-4 w-4 rotate-90" }),
     width: 640
   },
   {
@@ -6596,14 +6625,14 @@ const COLOR_PROP = {
     title: "Desktop (XL)",
     content: "Styles set here are applied at 1280px and up unless edited at higher breakpoint",
     breakpoint: "xl",
-    icon: /* @__PURE__ */ jsx(LaptopIcon, {}),
+    icon: /* @__PURE__ */ jsx(LaptopIcon, { className: "h-4 w-4" }),
     width: 1420
   },
   {
     title: "Large Desktop (2XL)",
     content: "Styles set here are applied at 1536px and up",
     breakpoint: "2xl",
-    icon: /* @__PURE__ */ jsx(DesktopIcon, {}),
+    icon: /* @__PURE__ */ jsx(DesktopIcon, { className: "h-4 w-4" }),
     width: 1920
   }
 ], BreakpointCard = ({
@@ -6680,7 +6709,7 @@ const COLOR_PROP = {
       )
     ) }),
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer rounded-md p-1 hover:bg-background", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
         /* @__PURE__ */ jsx(DropdownMenuLabel, { children: m("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
@@ -6690,6 +6719,7 @@ const COLOR_PROP = {
             disabled: y.breakpoint === "xs",
             onCheckedChange: () => x(toUpper(y.breakpoint)),
             checked: includes(u, toUpper(y.breakpoint)),
+            onSelect: (C) => C.preventDefault(),
             children: m(y.title)
           },
           y.breakpoint
@@ -6717,7 +6747,7 @@ function BreakpointSelector() {
 }
 function ManualClasses() {
   var L;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), [h, x] = useState(""), f = (L = first(d)) == null ? void 0 : L.prop, { classes: b } = getSplitChaiClasses(get(p, f, "")), y = b.split(" ").filter((T) => !isEmpty(T)), C = useBuilderProp("flags.useClipboard", !1), v = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), [h, x] = useState(""), f = (L = first(d)) == null ? void 0 : L.prop, { classes: b } = getSplitChaiClasses(get(p, f, "")), y = b.split(" ").filter((T) => !isEmpty(T)), C = useBuilderProp("flags.useClipboard", !1), S = () => {
     const T = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(m, T, !0), x("");
   }, [j, _] = useState([]), B = ({ value: T }) => {
@@ -6732,7 +6762,7 @@ function ManualClasses() {
     } else
       D = i.search(P);
     return _(map(D, "item"));
-  }, S = () => {
+  }, v = () => {
     _([]);
   }, k = (T) => T.name, I = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), A = useMemo(
     () => ({
@@ -6749,7 +6779,7 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (T) => {
-        T.key === "Enter" && h.trim() !== "" && v();
+        T.key === "Enter" && h.trim() !== "" && S();
       },
       onChange: (T, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -6780,7 +6810,7 @@ function ManualClasses() {
         {
           suggestions: j,
           onSuggestionsFetchRequested: B,
-          onSuggestionsClearRequested: S,
+          onSuggestionsClearRequested: v,
           getSuggestionValue: k,
           renderSuggestion: I,
           inputProps: A,
@@ -6799,7 +6829,7 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: v,
+          onClick: S,
           disabled: h.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
@@ -7170,12 +7200,12 @@ const registerChaiLibrary = (o, n) => {
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), x = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), b = (v) => {
-    const j = has(v, "styles_attrs.data-page-section");
-    return v._type === "Box" && j;
+  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), x = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), b = (S) => {
+    const j = has(S, "styles_attrs.data-page-section");
+    return S._type === "Box" && j;
   }, y = useCallback(
-    async (v) => {
-      if (v.stopPropagation(), has(o, "component")) {
+    async (S) => {
+      if (S.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
@@ -7192,18 +7222,18 @@ const registerChaiLibrary = (o, n) => {
         onClick: l ? () => {
         } : y,
         draggable: x ? "true" : "false",
-        onDragStart: async (v) => {
+        onDragStart: async (S) => {
           const j = await c({ library: n, block: o });
           let _ = r;
           if (b(first(j)) && (_ = null), !isEmpty(j)) {
             const B = { blocks: j, uiLibrary: !0, parent: _ };
-            if (v.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
-              const S = new Image();
-              S.src = o.preview, S.onload = () => {
-                v.dataTransfer.setDragImage(S, 0, 0);
+            if (S.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
+              const v = new Image();
+              v.src = o.preview, v.onload = () => {
+                S.dataTransfer.setDragImage(v, 0, 0);
               };
             } else
-              v.dataTransfer.setDragImage(new Image(), 0, 0);
+              S.dataTransfer.setDragImage(new Image(), 0, 0);
             f(B), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
@@ -7253,11 +7283,11 @@ const registerChaiLibrary = (o, n) => {
       return;
     }
   }, [b, y]);
-  const v = get(b, y, []), j = useRef(null), { t: _ } = useTranslation(), B = (w) => {
+  const S = get(b, y, []), j = useRef(null), { t: _ } = useTranslation(), B = (w) => {
     j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
       j.current && C(w);
     }, 400);
-  }, S = () => {
+  }, v = () => {
     i != null && i.id && p(i.id);
   }, k = () => {
     g("");
@@ -7267,7 +7297,7 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const I = filter(v, (w, E) => E % 2 === 0), A = filter(v, (w, E) => E % 2 === 1);
+  const I = filter(S, (w, E) => E % 2 === 0), A = filter(S, (w, E) => E % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
@@ -7297,7 +7327,7 @@ const registerChaiLibrary = (o, n) => {
           /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
           /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(b) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
-            /* @__PURE__ */ jsxs(Button, { onClick: S, variant: "outline", size: "sm", className: "gap-2", children: [
+            /* @__PURE__ */ jsxs(Button, { onClick: v, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
               _("Retry")
             ] })
@@ -7327,7 +7357,7 @@ const registerChaiLibrary = (o, n) => {
           onMouseEnter: () => j.current ? clearTimeout(j.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(v) && !isEmpty(b) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
+            isEmpty(S) && !isEmpty(b) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
               /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: I.map((w, E) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
@@ -7383,14 +7413,14 @@ const registerChaiLibrary = (o, n) => {
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
         const h = Object.entries(a).map(([f, b]) => {
-          const y = b, C = y.type || "partial", v = formatReadableName(C);
+          const y = b, C = y.type || "partial", S = formatReadableName(C);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(y.name || f),
             description: y.description || "",
             icon: FrameIcon,
-            group: v,
+            group: S,
             // Use formatted type as group
             category: "partial",
             partialBlockId: f,
@@ -7462,7 +7492,7 @@ const registerChaiLibrary = (o, n) => {
   }), []);
   const C = useCallback((w) => {
     b(w), y.current && y.current(w);
-  }, []), v = useCallback(() => {
+  }, []), S = useCallback(() => {
     b(null), y.current && y.current.cancel();
   }, []), j = useCallback((w) => {
     y.current && y.current.cancel(), x(w), b(null);
@@ -7479,10 +7509,10 @@ const registerChaiLibrary = (o, n) => {
       (w) => reject(filter(values(_), { group: w }), { hidden: !0 }).length > 0
     ) : o.filter((w) => reject(filter(values(n), { group: w }), { hidden: !0 }).length > 0),
     [n, _, o, d]
-  ), S = useMemo(
+  ), v = useMemo(
     () => sortBy(B, (w) => CORE_GROUPS.indexOf(w) === -1 ? 99 : CORE_GROUPS.indexOf(w)),
     [B]
-  ), k = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), I = useMemo(() => h === "all" ? S : [h], [S, h]);
+  ), k = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), I = useMemo(() => h === "all" ? v : [h], [v, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7496,24 +7526,24 @@ const registerChaiLibrary = (o, n) => {
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      S.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      v.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => j("all"),
             onMouseEnter: () => C("all"),
-            onMouseLeave: v,
+            onMouseLeave: S,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || f === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        S.map((w) => /* @__PURE__ */ jsx(
+        v.map((w) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => j(w),
             onMouseEnter: () => C(w),
-            onMouseLeave: v,
+            onMouseLeave: S,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === w || f === w ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(i(w.toLowerCase()))
           },
@@ -7893,23 +7923,23 @@ const Input = ({ node: o }) => {
   var D;
   const { t: a } = useTranslation(), l = useUpdateBlocksProps(), [i] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let d = null;
-  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: f, isDragging: b, isEditing: y, handleClick: C } = o, v = get(h, "_show", !0), j = (N) => {
-    N.stopPropagation(), v && o.toggle();
+  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: f, isDragging: b, isEditing: y, handleClick: C } = o, S = get(h, "_show", !0), j = (N) => {
+    N.stopPropagation(), S && o.toggle();
   }, _ = (N) => {
     N.isInternal && (d = N.isOpen, N.isOpen && N.close());
   }, B = (N) => {
     N.isInternal && d !== null && (d ? N.open() : N.close(), d = null);
-  }, [S, k] = useAtom$1(currentAddSelection), I = () => {
+  }, [v, k] = useAtom$1(currentAddSelection), I = () => {
     var N;
     A(), o.parent.isSelected || k((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
   }, A = () => {
     k(null);
   }, w = (N) => {
-    A(), N.stopPropagation(), !o.isOpen && v && o.toggle(), C(N);
+    A(), N.stopPropagation(), !o.isOpen && S && o.toggle(), C(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      f && !o.isOpen && !b && v && o.toggle();
+      f && !o.isOpen && !b && S && o.toggle();
     }, 500);
     return () => clearTimeout(N);
   }, [f, o, b]);
@@ -7982,9 +8012,9 @@ const Input = ({ node: o }) => {
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
               x ? "bg-primary/20" : "hover:bg-primary/10",
               f && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
+              (o == null ? void 0 : o.id) === v ? "bg-primary/10" : "",
               b && "opacity-20",
-              v ? "" : "line-through opacity-50",
+              S ? "" : "line-through opacity-50",
               P && x && "bg-primary/20 text-primary"
             ),
             children: [
@@ -8023,7 +8053,7 @@ const Input = ({ node: o }) => {
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-px group-hover:visible", children: [
-                canAddChildBlock(h == null ? void 0 : h._type) && v && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(h == null ? void 0 : h._type) && S && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -8040,14 +8070,14 @@ const Input = ({ node: o }) => {
                     TooltipTrigger,
                     {
                       onClick: (N) => {
-                        N.stopPropagation(), l([m], { _show: !v }), o.isOpen && o.toggle();
+                        N.stopPropagation(), l([m], { _show: !S }), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent p-0.5 hover:bg-primary/10",
                       asChild: !0,
-                      children: v ? /* @__PURE__ */ jsx(EyeClosedIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-4 w-4" })
+                      children: S ? /* @__PURE__ */ jsx(EyeClosedIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-4 w-4" })
                     }
                   ),
-                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999] text-xs", side: "bottom", children: a(v ? "Hide the block from page" : "Show the block on page") })
+                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999] text-xs", side: "bottom", children: a(S ? "Hide the block from page" : "Show the block on page") })
                 ] }),
                 /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: m, children: /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded bg-transparent p-px hover:bg-primary/10", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "h-3 w-3" }) }) })
               ] })
@@ -8216,6 +8246,30 @@ const Input = ({ node: o }) => {
               children: /* @__PURE__ */ 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-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[3] text-white" }) })
             }
           ) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "treeitem",
+              "aria-level": 0,
+              "aria-selected": !0,
+              "aria-expanded": !1,
+              onClick: () => setIds([]),
+              className: "flex h-full items-center border-b border-transparent",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn$1(
+                    "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
+                    ids.length === 0 ? "bg-primary/20" : ""
+                  ),
+                  children: /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
+                    /* @__PURE__ */ jsx(CardStackIcon, { className: "h-3 w-3 flex-shrink-0 rotate-180" }),
+                    /* @__PURE__ */ jsx("div", { className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]", children: "Body" })
+                  ] })
+                }
+              )
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             Tree,
             {
@@ -8467,23 +8521,23 @@ const Input = ({ node: o }) => {
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions();
   if (d) {
-    const B = d.map((S) => Object.keys(S)[0]);
-    DEFAULT_THEME_PRESET.forEach((S) => {
-      const k = Object.keys(S)[0];
-      B.includes(k) || d.push(S);
+    const B = d.map((v) => Object.keys(v)[0]);
+    DEFAULT_THEME_PRESET.forEach((v) => {
+      const k = Object.keys(v)[0];
+      B.includes(k) || d.push(v);
     });
   }
   const [g, m] = useTheme(), h = useThemeOptions(), { t: x } = useTranslation(), f = React.useCallback(
     (B) => {
-      const S = { ...g };
-      setPreviousTheme(S), m(B), toast.success("Theme updated", {
+      const v = { ...g };
+      setPreviousTheme(v), m(B), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
             " Undo"
           ] }),
           onClick: () => {
-            m(S), clearPreviousTheme(), toast.dismiss();
+            m(v), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
@@ -8492,27 +8546,27 @@ const Input = ({ node: o }) => {
     },
     [g, m]
   ), b = () => {
-    const B = d.find((S) => Object.keys(S)[0] === a);
+    const B = d.find((v) => Object.keys(v)[0] === a);
     if (B) {
-      const S = Object.values(B)[0];
-      S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? (f(S), l("")) : console.error("Invalid preset structure:", S);
+      const v = Object.values(B)[0];
+      v && typeof v == "object" && "fontFamily" in v && "borderRadius" in v && "colors" in v ? (f(v), l("")) : console.error("Invalid preset structure:", v);
     } else
       console.error("Preset not found:", a);
   }, y = (B) => {
     f(B), l("");
   }, C = useDebouncedCallback(
-    (B, S) => {
+    (B, v) => {
       m(() => ({
         ...g,
         fontFamily: {
           ...g.fontFamily,
-          [B.replace(/font-/g, "")]: S
+          [B.replace(/font-/g, "")]: v
         }
       }));
     },
     [g],
     200
-  ), v = React.useCallback(
+  ), S = React.useCallback(
     (B) => {
       m(() => ({
         ...g,
@@ -8521,10 +8575,10 @@ const Input = ({ node: o }) => {
     },
     [g]
   ), j = useDebouncedCallback(
-    (B, S) => {
+    (B, v) => {
       m(() => {
         const k = get(g, `colors.${B}`);
-        return n ? set(k, 1, S) : set(k, 0, S), {
+        return n ? set(k, 1, v) : set(k, 0, v), {
           ...g,
           colors: {
             ...g.colors,
@@ -8535,18 +8589,18 @@ const Input = ({ node: o }) => {
     },
     [g],
     200
-  ), _ = (B) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(B.items).map(([S]) => {
-    const k = get(g, `colors.${S}.${n ? 1 : 0}`);
+  ), _ = (B) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(B.items).map(([v]) => {
+    const k = get(g, `colors.${v}.${n ? 1 : 0}`);
     return k ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
           value: k,
-          onChange: (I) => j(S, I)
+          onChange: (I) => j(v, I)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: S.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((I) => I.charAt(0).toUpperCase() + I.slice(1)).join(" ") + (!S.toLowerCase().includes("foreground") && !S.toLowerCase().includes("border") && !S.toLowerCase().includes("input") && !S.toLowerCase().includes("ring") && !S.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, S) : null;
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: v.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((I) => I.charAt(0).toUpperCase() + I.slice(1)).join(" ") + (!v.toLowerCase().includes("foreground") && !v.toLowerCase().includes("border") && !v.toLowerCase().includes("input") && !v.toLowerCase().includes("ring") && !v.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, v) : null;
   }) });
   return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
@@ -8562,8 +8616,8 @@ const Input = ({ node: o }) => {
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: l, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select preset" }) }),
             /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((B) => {
-              const S = Object.keys(B)[0], k = S.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(k) }, S);
+              const v = Object.keys(B)[0], k = v.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(k) }, v);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: b, children: x("Apply") }) })
@@ -8575,11 +8629,11 @@ const Input = ({ node: o }) => {
           /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 text-gray-600" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Typography" })
         ] }),
-        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([B, S]) => /* @__PURE__ */ jsx(
+        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([B, v]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
             label: B,
-            value: g.fontFamily[B.replace(/font-/g, "")] || S[Object.keys(S)[0]],
+            value: g.fontFamily[B.replace(/font-/g, "")] || v[Object.keys(v)[0]],
             onChange: (k) => C(B, k)
           },
           B
@@ -8593,7 +8647,7 @@ const Input = ({ node: o }) => {
             ] }),
             /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: g.borderRadius })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: g.borderRadius, onChange: v }) })
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: g.borderRadius, onChange: S }) })
         ] }),
         /* @__PURE__ */ jsx(Separator, {}),
         (h == null ? void 0 : h.colors) && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -9157,7 +9211,7 @@ function QuickPrompts({ onClick: o }) {
     )
   ) }) });
 }
-const AiIcon = ({ className: o = "h-full w-full" }) => /* @__PURE__ */ jsx("svg", { className: o, viewBox: "0 0 256 256", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m198.39 128.986-52.16-19.216-19.216-52.16a16 16 0 0 0-30.028 0L77.77 109.77l-52.16 19.216a16 16 0 0 0 0 30.028l52.16 19.216 19.216 52.16a16 16 0 0 0 30.028 0l19.216-52.16 52.16-19.216a16 16 0 0 0 0-30.028m-57.69 34.23a15.97 15.97 0 0 0-9.483 9.483l-19.22 52.152-19.214-52.15a15.97 15.97 0 0 0-9.482-9.484l-52.152-19.22 52.15-19.214a15.97 15.97 0 0 0 9.484-9.482l19.22-52.152 19.214 52.15a15.97 15.97 0 0 0 9.482 9.484l52.152 19.22ZM144 40a8 8 0 0 1 8-8h16V16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V48h-16a8 8 0 0 1-8-8m104 48a8 8 0 0 1-8 8h-8v8a8 8 0 0 1-16 0v-8h-8a8 8 0 0 1 0-16h8v-8a8 8 0 0 1 16 0v8h8a8 8 0 0 1 8 8" }) }), AIUserPrompt = ({ blockId: o }) => {
+const AIUserPrompt = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), u = useSelectedBlock();
   useEffect(() => {
     var m;
@@ -9229,7 +9283,7 @@ const AiIcon = ({ className: o = "h-full w-full" }) => /* @__PURE__ */ jsx("svg"
 function DarkMode() {
   const [o, n] = useDarkMode();
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsx(SunIcon, { className: "size-4 shrink-0" }),
+    o ? /* @__PURE__ */ jsx(MoonIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx(SunIcon, { className: "size-4 shrink-0" }),
     /* @__PURE__ */ jsx(
       Switch,
       {
@@ -9247,8 +9301,7 @@ function DarkMode() {
           }
         )
       }
-    ),
-    /* @__PURE__ */ jsx(MoonIcon, { className: "ml-3 size-4 shrink-0" })
+    )
   ] });
 }
 const UndoRedo = () => {
@@ -9262,7 +9315,7 @@ const UndoRedo = () => {
     n([]), r([]), a([]);
   }, [n]);
   return /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(AlertDialog, { children: [
-    /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+    /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "ghost", className: "flex items-center", children: [
       /* @__PURE__ */ jsx(EraserIcon, {}),
       " ",
       o("Clear")
@@ -9278,35 +9331,26 @@ const UndoRedo = () => {
       ] })
     ] })
   ] }) });
-}, DataBinding = () => {
-  const o = usePageExternalData(), [n, r] = useAtom$1(dataBindingActiveAtom), { t: a } = useTranslation();
-  return isEmpty(o) ? null : /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "rounded-full", variant: "ghost", onClick: () => r(!n), children: /* @__PURE__ */ jsx(LightningBoltIcon, { className: cn$1("h-4 w-4", n ? "text-green-500" : "text-gray-500") }) }) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: a("Toggle Data Binding") }) })
-  ] }) });
 }, CanvasTopBar = () => {
-  const o = useBuilderProp("darkMode", !0), [n] = useCanvasZoom();
+  const o = useBuilderProp("darkMode", !0), [n, r] = useAtom$1(dataBindingActiveAtom), { t: a } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center justify-between border-b border-border bg-background/70 px-2 shadow-xl", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex h-full space-x-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-full space-x-2", children: o ? /* @__PURE__ */ jsx(DarkMode, {}) : null }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center space-x-2", children: [
       /* @__PURE__ */ jsx(Breakpoints$1, { canvas: !0, openDelay: 400 }),
       /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex w-12 cursor-not-allowed items-center justify-center gap-x-1 space-x-0 font-medium text-gray-400", children: [
-        /* @__PURE__ */ jsx(ZoomInIcon, { className: "h-3.5 w-3.5 flex-shrink-0" }),
-        " ",
-        /* @__PURE__ */ jsxs("div", { className: "text-xs leading-3", children: [
-          round(n, 0),
-          "%"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-      o ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DarkMode, {}),
-        /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })
-      ] }) : null,
-      /* @__PURE__ */ jsx(UndoRedo, {}),
-      /* @__PURE__ */ jsx(DataBinding, {})
+      /* @__PURE__ */ jsx(UndoRedo, {})
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex h-full items-center space-x-2", children: /* @__PURE__ */ jsx(ClearCanvas, {}) })
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center", children: [
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", className: "h-7 w-7 rounded-md p-1", children: /* @__PURE__ */ jsx(DotsHorizontalIcon, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx(DropdownMenuContent, { className: "w-56 border-border text-xs", children: /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "flex items-center gap-2", onSelect: (l) => l.preventDefault(), children: [
+          /* @__PURE__ */ jsx(LightningBoltIcon, { className: "h-4 w-4 text-gray-500" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: a("Data Binding") }),
+          /* @__PURE__ */ jsx(Switch, { checked: n, onCheckedChange: () => r(!n) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(ClearCanvas, {})
+    ] })
   ] });
 }, AddBlocksDialog = () => {
   const { t: o } = useTranslation(), [n, r] = useState(""), [a, l] = useState(-1), [i, c] = useState(!1);
@@ -9345,7 +9389,7 @@ const UndoRedo = () => {
       const k = [...a, { key: i, value: d }];
       r(k), l(a), c(""), p(""), h("");
     }
-  }, v = (k) => {
+  }, S = (k) => {
     const I = a.filter((A, w) => w !== k);
     r(I), l(I);
   }, j = (k) => {
@@ -9361,7 +9405,7 @@ const UndoRedo = () => {
     }
   }, B = (k) => {
     k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? _() : C());
-  }, S = useCallback((k) => {
+  }, v = useCallback((k) => {
     const I = (E) => /[.,!?;:]/.test(E), A = (E, L, T) => {
       let P = "", R = "";
       const D = L > 0 ? E[L - 1] : "", N = L < E.length ? E[L] : "";
@@ -9412,7 +9456,7 @@ const UndoRedo = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: S })
+                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: v })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9444,7 +9488,7 @@ const UndoRedo = () => {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => j(I), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(I), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(I), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
     ] }, I)) })
   ] });
@@ -9614,7 +9658,7 @@ const RootLayout = () => {
       console.log("handleMenuItemClick", k, n), r(n === k ? null : k);
     },
     [n, r]
-  ), { t: f } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), C = find(b, { id: n }) ?? first(b), v = get(C, "width", DEFAULT_PANEL_WIDTH);
+  ), { t: f } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), C = find(b, { id: n }) ?? first(b), S = get(C, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
       const k = find(b, { id: n });
@@ -9624,8 +9668,8 @@ const RootLayout = () => {
   const j = useMemo(() => {
     if (n === null) return 0;
     const k = find(b, { id: n });
-    return get(k, "view", "standard") === "standard" ? v : l;
-  }, [n, v, l, b]), _ = useCallback(() => {
+    return get(k, "view", "standard") === "standard" ? S : l;
+  }, [n, S, l, b]), _ = useCallback(() => {
     r(a.current);
   }, [r, n]), B = useCallback(() => {
     r("outline");
@@ -9633,7 +9677,7 @@ const RootLayout = () => {
   useEffect(() => {
     n !== null && !find(b, { id: n }) && r("outline");
   }, [n, b]);
-  const S = useCallback(
+  const v = useCallback(
     (k) => {
       x(k);
     },
@@ -9654,7 +9698,7 @@ const RootLayout = () => {
                   position: "top",
                   panelId: k.id,
                   isActive: n === k.id,
-                  show: () => S(k.id)
+                  show: () => v(k.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(k.label) }) })
               ] }, "button-top-" + I)) }),
@@ -9664,7 +9708,7 @@ const RootLayout = () => {
                   position: "bottom",
                   panelId: k.id,
                   isActive: n === k.id,
-                  show: () => S(k.id)
+                  show: () => v(k.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(k.label) }) })
               ] }, "button-bottom-" + I)) })
@@ -9736,7 +9780,7 @@ const RootLayout = () => {
       {
         side: "left",
         className: "flex flex-col gap-0 p-0 sm:max-w-full",
-        style: { width: `${v}px` },
+        style: { width: `${S}px` },
         children: [
           /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border px-2 py-2.5", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
@@ -9749,7 +9793,7 @@ const RootLayout = () => {
       }
     ) }),
     " ",
-    n !== null && get(C, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${v}px` }, children: [
+    n !== null && get(C, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${S}px` }, children: [
       /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border px-2 py-3.5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
         /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
@@ -9854,8 +9898,8 @@ const RootLayout = () => {
     });
   }, h = (f) => {
     if (!c) return;
-    const b = f.clientX - p.x, y = f.clientY - p.y, C = f.currentTarget, v = C.offsetWidth, j = C.offsetHeight, _ = window.innerWidth - v, B = window.innerHeight - j, S = Math.max(0, Math.min(b, _)), k = Math.max(0, Math.min(y, B));
-    r(S, k);
+    const b = f.clientX - p.x, y = f.clientY - p.y, C = f.currentTarget, S = C.offsetWidth, j = C.offsetHeight, _ = window.innerWidth - S, B = window.innerHeight - j, v = Math.max(0, Math.min(b, _)), k = Math.max(0, Math.min(y, B));
+    r(v, k);
   }, x = () => {
     d(!1);
   };
@@ -10109,7 +10153,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   function C() {
     l.has(n) && (f(o, n), m(o), g(o));
   }
-  function v(k) {
+  function S(k) {
     var I;
     if (isSelfAtom(n, k)) {
       const w = u(o, k);
@@ -10142,14 +10186,14 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
           }
       }), _;
     }
-  }, S = b.n;
+  }, v = b.n;
   try {
-    const k = p(o, n, v, B);
+    const k = p(o, n, S, B);
     return setAtomStateValueOrPromise(o, n, k), isPromiseLike$1(k) && (registerAbortHandler(k, () => j == null ? void 0 : j.abort()), k.then(C, C)), b;
   } catch (k) {
     return delete b.v, b.e = k, ++b.n, b;
   } finally {
-    y = !1, S !== b.n && i.get(n) === S && (i.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
+    y = !1, v !== b.n && i.get(n) === v && (i.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
   }
 }, invalidateDependents = (o, n) => {
   const r = getBuildingBlocks(o), a = r[1], l = r[2], i = r[11], c = [n];
@@ -10164,14 +10208,14 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   const a = getBuildingBlocks(o), l = a[3], i = a[6], c = a[8], d = a[11], p = a[12], u = a[13], g = a[14], m = a[15], h = a[17];
   let x = !0;
   const f = (y) => returnAtomValue(g(o, y)), b = (y, ...C) => {
-    var v;
+    var S;
     const j = d(o, y);
     try {
       if (isSelfAtom(n, y)) {
         if (!hasInitialValue(y))
           throw new Error("atom not writable");
         const _ = j.n, B = C[0];
-        setAtomStateValueOrPromise(o, y, B), h(o, y), _ !== j.n && (l.add(y), (v = i.c) == null || v.call(i, y), m(o, y));
+        setAtomStateValueOrPromise(o, y, B), h(o, y), _ !== j.n && (l.add(y), (S = i.c) == null || S.call(i, y), m(o, y));
         return;
       } else
         return writeAtomState(o, y, ...C);
@@ -10215,19 +10259,19 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }, l.set(n, f), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
       const b = () => {
         let y = !0;
-        const C = (...v) => {
+        const C = (...S) => {
           try {
-            return h(o, n, ...v);
+            return h(o, n, ...S);
           } finally {
             y || (g(o), u(o));
           }
         };
         try {
-          const v = d(o, n, C);
-          v && (f.u = () => {
+          const S = d(o, n, C);
+          S && (f.u = () => {
             y = !0;
             try {
-              v();
+              S();
             } finally {
               y = !1;
             }