@chaibuilder/sdk 2.2.28 → 2.2.30

package/dist/core.js

@@ -4,7 +4,7 @@ var H = (o, n, r) => F(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
 import { BoxModelIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, LoopIcon, InfoCircledIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, Cross1Icon, BoxIcon, MinusIcon, CrossCircledIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, CaretRightIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, CheckIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
-import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isArray, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, uniq, flatMapDeep, some, sortBy, round } from "lodash-es";
+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, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, uniq, flatMapDeep, some, sortBy, round } from "lodash-es";
 import * as React from "react";
 import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, useReducer, useDebugValue } from "react";
 import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
@@ -73,8 +73,6 @@ const activePanelAtom = atom("outline");
 activePanelAtom.debugLabel = "activePanelAtom";
 const showPredefinedBlockCategoryAtom = atom("");
 showPredefinedBlockCategoryAtom.debugLabel = "showPredefinedBlockCategoryAtom";
-const inlineEditingActiveAtom = atom("");
-inlineEditingActiveAtom.debugLabel = "inlineEditingActiveAtom";
 const draggingFlagAtom = atom(!1);
 draggingFlagAtom.debugLabel = "draggingFlagAtom";
 const treeRefAtom = atom(null);
@@ -351,8 +349,8 @@ function insertBlocksAtPosition(o, n, r, a) {
       }), l.unshift(m), i = i.map((f) => {
         if (f._id === r) {
           const x = { ...f, content: "" };
-          return Object.keys(x).forEach((y) => {
-            y.startsWith("content-") && (x[y] = "");
+          return Object.keys(x).forEach((k) => {
+            k.startsWith("content-") && (x[k] = "");
           }), x;
         }
         return f;
@@ -487,8 +485,8 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
         m && "content" in m && (r = r.map((f) => {
           if (f._id === u) {
             const x = { ...f, content: h.content };
-            return Object.keys(h).forEach((y) => {
-              y.startsWith("content-") && (x[y] = h[y]);
+            return Object.keys(h).forEach((k) => {
+              k.startsWith("content-") && (x[k] = h[k]);
             }), x;
           }
           return f;
@@ -574,30 +572,34 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
     status: "idle",
     props: {},
     error: void 0
-  }), c = useBuilderProp("getBlockAsyncProps", async (m) => ({})), d = useSetAtom$1(blockRepeaterDataAtom), p = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), u = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), g = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
+  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (f) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), h = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
   return useEffect(() => {
     if (n === "mock") {
       if (isFunction(a)) {
-        i((f) => ({ ...f, status: "loading", props: {} }));
-        const m = a({ block: o });
-        if (!isObject(m))
+        i((x) => ({ ...x, status: "loading", props: {} }));
+        const f = a({ block: o });
+        if (!isObject(f))
           throw new Error("mockDataProvider should return an object");
-        i((f) => ({ ...f, status: "loaded", props: m }));
+        i((x) => ({ ...x, status: "loaded", props: f }));
       }
       return;
     }
-    n === "live" && (!u && !g || (i((m) => ({ ...m, status: "loading", props: {} })), c({ block: o }).then((m = {}) => {
-      u ? (d((f) => ({
-        ...f,
-        [o._id]: { status: "loaded", props: isArray(m) ? m : [], repeaterItems: o.repeaterItems }
-      })), i((f) => ({ ...f, status: "loaded" }))) : i((f) => ({ ...f, status: "loaded", props: isObject(m) ? m : {} }));
-    }).catch((m) => {
-      u ? (d((f) => ({
-        ...f,
-        [o._id]: { status: "error", error: m, props: [] }
-      })), i((f) => ({ ...f, status: "error", error: m }))) : i((f) => ({ ...f, status: "error", error: m, props: {} }));
+    n === "live" && (!g && !h || (i((f) => ({ ...f, status: "loading", props: {} })), d({ block: o }).then((f = {}) => {
+      g ? (p((x) => ({
+        ...x,
+        [o._id]: {
+          status: "loaded",
+          props: get(f, "items", []),
+          repeaterItems: o.repeaterItems
+        }
+      })), i((x) => ({ ...x, status: "loaded", props: { totalItems: get(f, "totalItems") } })), c([o._id], { totalItems: get(f, "totalItems") })) : i((x) => ({ ...x, status: "loaded", props: isObject(f) ? f : {} }));
+    }).catch((f) => {
+      g ? (p((x) => ({
+        ...x,
+        [o._id]: { status: "error", error: f, props: [] }
+      })), i((x) => ({ ...x, status: "error", error: f, props: {} }))) : i((x) => ({ ...x, status: "error", error: f, props: {} }));
     })));
-  }, [o == null ? void 0 : o._id, p, u, g, a, n]), {
+  }, [o == null ? void 0 : o._id, u, g, h, a, n]), {
     $loading: get(l, "status") === "loading",
     ...o ? get(l, "props", {}) : {}
   };
@@ -797,50 +799,50 @@ const undoRedoStateAtom = atom({
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, y, b) => {
+    moveBlocks: (x, k, b) => {
       const v = map(x, (w) => {
-        const _ = n.find((N) => N._id === w)._parent || null, A = n.filter((N) => _ ? N._parent === _ : !N._parent).map((N) => N._id).indexOf(w);
-        return { _id: w, oldParent: _, oldPosition: A };
+        const E = n.find((N) => N._id === w)._parent || null, A = n.filter((N) => E ? N._parent === E : !N._parent).map((N) => N._id).indexOf(w);
+        return { _id: w, oldParent: E, oldPosition: A };
       }), B = v.find(({ _id: w }) => w === x[0]);
-      B && B.oldParent === y && B.oldPosition === b || (i(x, y, b), o({
-        undo: () => each(v, ({ _id: w, oldParent: E, oldPosition: _ }) => {
-          i([w], E, _);
+      B && B.oldParent === k && B.oldPosition === b || (i(x, k, b), o({
+        undo: () => each(v, ({ _id: w, oldParent: _, oldPosition: E }) => {
+          i([w], _, E);
         }),
-        redo: () => i(x, y, b)
+        redo: () => i(x, k, b)
       }));
     },
-    addBlocks: (x, y, b) => {
-      a(x, y, b), o({
+    addBlocks: (x, k, b) => {
+      a(x, k, b), o({
         undo: () => l(map(x, "_id")),
-        redo: () => a(x, y, b)
+        redo: () => a(x, k, b)
       });
     },
     removeBlocks: (x) => {
       var B;
-      const y = (B = first(x)) == null ? void 0 : B._parent, v = n.filter((w) => y ? w._parent === y : !w._parent).indexOf(first(x));
+      const k = (B = first(x)) == null ? void 0 : B._parent, v = n.filter((w) => k ? w._parent === k : !w._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, y, v),
+        undo: () => a(x, k, v),
         redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (x, y, b) => {
+    updateBlocks: (x, k, b) => {
       let v = [];
       if (b)
         v = map(x, (B) => ({ _id: B, ...b }));
       else {
-        const B = keys(y);
+        const B = keys(k);
         v = map(x, (w) => {
-          const E = n.find((S) => S._id === w), _ = { _id: w };
-          return each(B, (S) => _[S] = E[S]), _;
+          const _ = n.find((C) => C._id === w), E = { _id: w };
+          return each(B, (C) => E[C] = _[C]), E;
         });
       }
-      c(map(x, (B) => ({ _id: B, ...y }))), o({
+      c(map(x, (B) => ({ _id: B, ...k }))), o({
         undo: () => c(v),
-        redo: () => c(map(x, (B) => ({ _id: B, ...y })))
+        redo: () => c(map(x, (B) => ({ _id: B, ...k })))
       });
     },
-    updateBlocksRuntime: (x, y) => {
-      c(map(x, (b) => ({ _id: b, ...y })));
+    updateBlocksRuntime: (x, k) => {
+      c(map(x, (b) => ({ _id: b, ...k })));
     },
     setNewBlocks: (x) => {
       r(x), o({
@@ -849,12 +851,12 @@ const undoRedoStateAtom = atom({
       });
     },
     updateMultipleBlocksProps: (x) => {
-      let y = [];
-      y = map(x, (b) => {
-        const v = keys(b), B = n.find((E) => E._id === b._id), w = {};
-        return each(v, (E) => w[E] = B[E]), w;
+      let k = [];
+      k = map(x, (b) => {
+        const v = keys(b), B = n.find((_) => _._id === b._id), w = {};
+        return each(v, (_) => w[_] = B[_]), w;
       }), c(x), o({
-        undo: () => c(y),
+        undo: () => c(k),
         redo: () => c(x)
       });
     }
@@ -866,9 +868,9 @@ const undoRedoStateAtom = atom({
       for (let f = 0; f < i.length; f++) {
         const { _id: x } = i[f];
         i[f]._id = generateUUID();
-        const y = filter(i, { _parent: x });
-        for (let b = 0; b < y.length; b++)
-          y[b]._parent = i[f]._id;
+        const k = filter(i, { _parent: x });
+        for (let b = 0; b < k.length; b++)
+          k[b]._parent = i[f]._id;
       }
       const p = first(i);
       let u, g;
@@ -879,8 +881,8 @@ const undoRedoStateAtom = atom({
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const y = i.blocks;
-        return a(y, c, d);
+        const k = i.blocks;
+        return a(k, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -2331,42 +2333,42 @@ const getBlockWithChildren = (o, n) => {
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom(!1), useAskAi = () => {
   const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, h = (m, f) => {
-    const x = cloneDeep(f.find((y) => y._id === m));
-    for (const y in x) {
-      const b = x[y];
+    const x = cloneDeep(f.find((k) => k._id === m));
+    for (const k in x) {
+      const b = x[k];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
         const { baseClasses: v, classes: B } = getSplitChaiClasses(b);
-        x[y] = compact(flattenDeep([v, B])).join(" ");
+        x[k] = compact(flattenDeep([v, B])).join(" ");
       } else
-        y !== "_id" && delete x[y];
+        k !== "_id" && delete x[k];
     }
     return x;
   };
   return {
     askAi: useCallback(
-      async (m, f, x, y) => {
+      async (m, f, x, k) => {
         if (l) {
           n(!0), a(null);
           try {
-            const b = p === u ? "" : p, v = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [h(f, d)], B = await l(m, addLangToPrompt(x, g, m), v, b), { blocks: w, error: E } = B;
-            if (E) {
-              a(E);
+            const b = p === u ? "" : p, v = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [h(f, d)], B = await l(m, addLangToPrompt(x, g, m), v, b), { blocks: w, error: _ } = B;
+            if (_) {
+              a(_);
               return;
             }
             if (m === "styles") {
-              const _ = w.map((S) => {
-                for (const A in S)
-                  A !== "_id" && (S[A] = `${STYLES_KEY},${S[A]}`);
-                return S;
+              const E = w.map((C) => {
+                for (const A in C)
+                  A !== "_id" && (C[A] = `${STYLES_KEY},${C[A]}`);
+                return C;
               });
-              c(_);
+              c(E);
             } else
               i(w);
-            y && y(B);
+            k && k(B);
           } catch (b) {
             a(b);
           } finally {
-            n(!1), y && y();
+            n(!1), k && k();
           }
         }
       },
@@ -2462,7 +2464,7 @@ const getBlockWithChildren = (o, n) => {
             for (const f of h)
               if (f._type === "PartialBlock" || f._type === "GlobalBlock") {
                 let x = l(f.partialBlockId);
-                f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((y) => (isEmpty(y._parent) && set(y, "_parent", f._parent), y))), m = [...m, ...x];
+                f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((k) => (isEmpty(k._parent) && set(k, "_parent", f._parent), k))), m = [...m, ...x];
               } else
                 m.push(f);
             return m;
@@ -2736,7 +2738,19 @@ const getBlockWithChildren = (o, n) => {
   return null;
 });
 wrapperBlockAtom.debugLabel = "wrapperBlockAtom";
-const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useSelectedLibrary = () => useAtom$1(selectedLibraryAtom), sidebarActivePanelAtom = atom("outline");
+const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), inlineEditingActiveAtom = atom("");
+inlineEditingActiveAtom.debugLabel = "inlineEditingActiveAtom";
+const inlineEditingItemIndexAtom = atom(0);
+inlineEditingItemIndexAtom.debugLabel = "inlineEditingItemIndexAtom";
+const useInlineEditing = () => {
+  const [o, n] = useAtom$1(inlineEditingActiveAtom), [r, a] = useAtom$1(inlineEditingItemIndexAtom);
+  return {
+    editingBlockId: o,
+    editingItemIndex: r,
+    setEditingBlockId: n,
+    setEditingItemIndex: a
+  };
+}, useSelectedLibrary = () => useAtom$1(selectedLibraryAtom), sidebarActivePanelAtom = atom("outline");
 sidebarActivePanelAtom.debugLabel = "sidebarActivePanelAtom";
 const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS = [
   { ControlIcon: PinTopIcon, dir: "VERTICAL", key: "UP" },
@@ -2765,8 +2779,8 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
     ({ key: x }) => {
-      var y;
-      f((y = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : y.toUpperCase());
+      var k;
+      f((k = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : k.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
     [f]
@@ -2806,19 +2820,24 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
   const r = o == null ? void 0 : o.getAttribute("data-block-type");
   return !r || o && o.children.length > 0 || r === "Button" ? !1 : INLINE_EDITABLE_BLOCKS.includes(r);
 }, useHandleCanvasDblClick = () => {
-  const [o, n] = useAtom$1(inlineEditingActiveAtom);
+  const { editingBlockId: o, setEditingBlockId: n, setEditingItemIndex: r } = useInlineEditing();
   return useCallback(
-    (r) => {
-      if (r == null || r.preventDefault(), r == null || r.stopPropagation(), o) return;
-      const a = getTargetedBlock(r.target);
-      if (!isInlineEditable(a)) return;
-      const l = a.getAttribute("data-block-id");
-      l && n(l);
+    (a) => {
+      var d;
+      if (a == null || a.preventDefault(), a == null || a.stopPropagation(), o) return;
+      const l = getTargetedBlock(a.target);
+      if (!isInlineEditable(l)) return;
+      const i = l.getAttribute("data-block-id");
+      if (!i || !l) return;
+      const c = l.closest('[data-block-type="Repeater"]');
+      c ? (d = c == null ? void 0 : c.childNodes) == null || d.forEach((p, u) => {
+        p.contains(l) && r(u);
+      }) : r(-1), n(i);
     },
-    [o, n]
+    [o, n, r]
   );
 }, useHandleCanvasClick = () => {
-  const [o] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: n } = useBlockHighlight(), r = useRef(0);
+  const { editingBlockId: o } = useInlineEditing(), { clearHighlight: n } = useBlockHighlight(), r = useRef(0);
   return useCallback(
     (a) => {
       const l = (/* @__PURE__ */ new Date()).getTime();
@@ -2840,7 +2859,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
     [o]
   );
 }, useHandleMouseMove = () => {
-  const [o] = useAtom$1(inlineEditingActiveAtom), { highlightBlock: n } = useBlockHighlight();
+  const { editingBlockId: o } = useInlineEditing(), { highlightBlock: n } = useBlockHighlight();
   return useThrottledCallback(
     (r) => {
       if (o) return;
@@ -2905,7 +2924,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
       i([null]);
   }, [r, n]), /* @__PURE__ */ jsx(BlockFloatingSelector, { block: o, selectedBlockElement: a[0] });
 }, BlockFloatingSelector = ({ block: o, selectedBlockElement: n }) => {
-  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), [p] = useAtom$1(inlineEditingActiveAtom), { document: u } = useFrame(), { floatingStyles: g, refs: h, update: m } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), { editingBlockId: p } = useInlineEditing(), { document: u } = useFrame(), { floatingStyles: g, refs: h, update: m } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: { reference: n }
@@ -2919,13 +2938,13 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
       tabIndex: 0,
       ref: h.setFloating,
       style: g,
-      onClick: (y) => {
-        y.stopPropagation(), y.preventDefault();
+      onClick: (k) => {
+        k.stopPropagation(), k.preventDefault();
       },
-      onMouseEnter: (y) => {
-        y.stopPropagation(), i(null);
+      onMouseEnter: (k) => {
+        k.stopPropagation(), i(null);
       },
-      onKeyDown: (y) => y.stopPropagation(),
+      onKeyDown: (k) => k.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         f && /* @__PURE__ */ jsx(
@@ -3382,8 +3401,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         ],
         onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
         onBlur: ({ editor: u, event: g }) => {
-          const h = g.relatedTarget, m = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = m == null ? void 0 : m.contains(h), y = f == null ? void 0 : f.contains(h);
-          if (!x && !y) {
+          const h = g.relatedTarget, m = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = m == null ? void 0 : m.contains(h), k = f == null ? void 0 : f.contains(h);
+          if (!x && !k) {
             const b = (u == null ? void 0 : u.getHTML()) || "";
             r(b);
           }
@@ -3479,62 +3498,62 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), [l, i] = useAtom$1(inlineEditingActiveAtom), [c, d] = useState(null), p = useRef(null), { clearHighlight: u } = useBlockHighlight(), g = useUpdateBlocksProps(), { selectedLang: h } = useLanguages(), [, m] = useSelectedBlockIds(), f = useRef(null), x = l, { blockContent: y, blockType: b } = useMemo(() => {
-      var C;
-      const _ = o._type;
-      let S = o[r];
-      const A = getRegisteredChaiBlock(o._type);
-      return h && ((C = A == null ? void 0 : A.i18nProps) == null ? void 0 : C.includes(r)) && has(o, `${r}-${h}`) && (S = get(o, `${r}-${h}`)), { blockContent: S, blockType: _ };
-    }, [o, h]), v = useCallback(
-      (_) => {
-        var A;
-        const S = _ || ((A = p.current) == null ? void 0 : A.innerText);
-        g([x], { [r]: S }), d(null), i(null), m([]);
+    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: h } = useBlockHighlight(), m = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), k = useRef(null), b = l, { blockContent: v, blockType: B } = useMemo(() => {
+      var j;
+      const A = o._type;
+      let N = o[r];
+      const S = getRegisteredChaiBlock(o._type);
+      return f && ((j = S == null ? void 0 : S.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${f}`) && (N = get(o, `${r}-${f}`)), { blockContent: N, blockType: A };
+    }, [o, f]), w = useCallback(
+      (A) => {
+        var S;
+        const N = A || ((S = g.current) == null ? void 0 : S.innerText);
+        m([b], { [r]: N }), u(null), c(null), d(-1), x([]);
       },
-      [x, g, i, m, h]
-    ), B = useDebouncedCallback(
-      (_) => {
-        g([x], { [r]: _ });
+      [b, m, c, x, f]
+    ), _ = useDebouncedCallback(
+      (A) => {
+        m([b], { [r]: A });
       },
-      [x, o, g, h],
+      [b, o, m, f],
       1e3
-    ), w = useCallback(
-      (_) => {
-        _.preventDefault(), x && (f.current = x), v(), setTimeout(() => {
-          const S = f.current;
-          f.current = null, m([S]);
+    ), E = useCallback(
+      (A) => {
+        A.preventDefault(), b && (k.current = b), w(), setTimeout(() => {
+          const N = k.current;
+          k.current = null, x([N]);
         }, 100);
       },
-      [m, x, h]
+      [x, b, f]
     );
     useEffect(() => {
-      var S;
-      if (!x) return;
-      const _ = getElementByDataBlockId(a, x);
-      (S = _ == null ? void 0 : _.classList) == null || S.add("sr-only"), d(_);
-    }, [x, b, a]);
-    const E = useMemo(() => c ? (u(), b === "RichText" ? /* @__PURE__ */ jsx(
+      var y;
+      if (!b) return;
+      const A = `[data-block-id="${b}"]`, N = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${A}${N}`);
+      S && ((y = S == null ? void 0 : S.classList) == null || y.add("sr-only"), u(S));
+    }, [b, B, a, i]);
+    const C = useMemo(() => p ? (h(), B === "RichText" ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
-        blockContent: y,
-        editingElement: c,
-        onChange: B,
-        onClose: v,
-        onEscape: w
+        blockContent: v,
+        editingElement: p,
+        onChange: _,
+        onClose: w,
+        onEscape: E
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
       {
-        editorRef: p,
-        blockContent: y,
-        editingElement: c,
-        onClose: v,
-        onChange: B,
-        onEscape: w
+        editorRef: g,
+        blockContent: v,
+        editingElement: p,
+        onClose: w,
+        onChange: _,
+        onEscape: E
       }
-    )) : null, [c, x, b, y, v, h]);
+    )) : null, [p, b, B, v, w, f]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      E,
+      C,
       n
     ] });
   },
@@ -3567,52 +3586,52 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   blockAtom: n,
   children: r
 }) => {
-  const [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(n), i = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: c, fallbackLang: d } = useLanguages(), p = useBlockRuntimeProps(), u = usePageExternalData(), [g] = useHiddenBlockIds(), [h] = useAtom$1(dataBindingActiveAtom), m = get(i, "component", null), { index: f, key: x } = useContext(RepeaterContext), y = useMemo(
-    () => h ? applyBindingToBlockProps(applyLanguage(l, c, i), u, {
-      index: f,
-      key: x
-    }) : applyLanguage(l, c, i),
-    [l, c, i, u, h, f, x]
-  ), b = useMemo(() => getBlockTagAttributes(l), [l, getBlockTagAttributes]), v = useMemo(
-    () => p(l._id, getBlockRuntimeProps(l._type)),
-    [l._id, l._type, p, getBlockRuntimeProps]
-  ), B = useMemo(
+  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [h] = useHiddenBlockIds(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: x, key: k } = useContext(RepeaterContext), b = useMemo(
+    () => m ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
+      index: x,
+      key: k
+    }) : applyLanguage(i, d, c),
+    [i, d, c, g, m, x, k]
+  ), v = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), B = useMemo(
+    () => u(i._id, getBlockRuntimeProps(i._type)),
+    [i._id, i._type, u, getBlockRuntimeProps]
+  ), w = useMemo(
     () => ({
-      blockProps: { "data-block-id": l._id, "data-block-type": l._type },
+      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
       inBuilder: !0,
-      lang: c || d,
-      ...y,
+      lang: d || p,
       ...b,
       ...v,
+      ...B,
       ...o
     }),
     [
-      l._id,
-      l._type,
-      c,
+      i._id,
+      i._type,
       d,
-      y,
+      p,
       b,
       v,
+      B,
       o
     ]
-  ), w = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]);
-  if (isNull(m) || g.includes(l._id)) return null;
-  let E = /* @__PURE__ */ jsx(Suspense, { children: createElement(m, {
-    ...B,
+  ), _ = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]);
+  if (isNull(f) || h.includes(i._id)) return null;
+  let E = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
+    ...w,
     children: r({
-      _id: l._id,
-      _type: l._type,
-      ...isArray(y.repeaterItems) ? {
-        repeaterItems: applyLimit(y.repeaterItems, l),
-        $repeaterItemsKey: y.$repeaterItemsKey
+      _id: i._id,
+      _type: i._type,
+      ...isArray(b.repeaterItems) ? {
+        repeaterItems: applyLimit(b.repeaterItems, i),
+        $repeaterItemsKey: b.$repeaterItemsKey
       } : {},
-      ...l.partialBlockId ? { partialBlockId: l.partialBlockId } : "",
-      ...l.globalBlock ? { partialBlockId: l.globalBlock } : ""
+      ...i.partialBlockId ? { partialBlockId: i.partialBlockId } : "",
+      ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const _ = a === l._id ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: l, children: E }) : E;
-  return w ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: _ }) : _;
+  const C = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: E }) : E;
+  return _ ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: C }) : C;
 }, PartialBlocksRenderer = ({ partialBlockId: o }) => {
   const { getPartailBlocks: n } = usePartialBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom(r)), [r]);
   return isEmpty(r) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r });
@@ -3630,7 +3649,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   );
   return map(l, (c) => {
     const d = a(c._id);
-    return d ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: c, children: (p) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, asyncProps: p, children: ({ _id: u, _type: g, partialBlockId: h, repeaterItems: m, $repeaterItemsKey: f }) => g === "Repeater" ? isArray(m) && m.map((x, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: f }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) }, `${u}-${y}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : i(u) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) : null }) }, c._id) : null;
+    return d ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: c, children: (p) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, asyncProps: p, children: ({ _id: u, _type: g, partialBlockId: h, repeaterItems: m, $repeaterItemsKey: f }) => g === "Repeater" ? isArray(m) && m.map((x, k) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: k, key: f }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) }, `${u}-${k}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : i(u) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) : null }) }, c._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -4048,18 +4067,18 @@ const DataBindingSelector = ({
         return;
       }
       const m = (b) => /[.,!?;:]/.test(b), f = (b, v, B) => {
-        let w = "", E = "";
-        const _ = v > 0 ? b[v - 1] : "", S = v < b.length ? b[v] : "";
-        return v > 0 && (_ === "." || !m(_) && _ !== " ") && (w = " "), v < b.length && !m(S) && S !== " " && (E = " "), {
-          text: w + B + E,
+        let w = "", _ = "";
+        const E = v > 0 ? b[v - 1] : "", C = v < b.length ? b[v] : "";
+        return v > 0 && (E === "." || !m(E) && E !== " ") && (w = " "), v < b.length && !m(C) && C !== " " && (_ = " "), {
+          text: w + B + _,
           prefixLength: w.length,
-          suffixLength: E.length
+          suffixLength: _.length
         };
       }, x = document.getElementById(r);
       if (!x) return;
-      const y = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
-      if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
-        const b = y.__chaiRTE;
+      const k = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
+      if (k && (k.querySelector(".ProseMirror") || k.__chaiRTE)) {
+        const b = k.__chaiRTE;
         if (b) {
           const v = `{{${g}}}`;
           b.commands.focus();
@@ -4067,11 +4086,11 @@ const DataBindingSelector = ({
           if (B !== w)
             b.chain().deleteSelection().insertContent(v).run();
           else {
-            const { state: _ } = b, S = _.selection.from, A = _.doc.textBetween(Math.max(0, S - 1), S), N = _.doc.textBetween(S, Math.min(S + 1, _.doc.content.size));
-            let C = "";
-            S > 0 && A !== " " && !m(A) && (C = " ");
-            let k = "";
-            N && N !== " " && !m(N) && (k = " "), b.chain().insertContent(C + v + k).run();
+            const { state: E } = b, C = E.selection.from, A = E.doc.textBetween(Math.max(0, C - 1), C), N = E.doc.textBetween(C, Math.min(C + 1, E.doc.content.size));
+            let S = "";
+            C > 0 && A !== " " && !m(A) && (S = " ");
+            let y = "";
+            N && N !== " " && !m(N) && (y = " "), b.chain().insertContent(S + v + y).run();
           }
           setTimeout(() => n(b.getHTML(), {}, r), 100);
           return;
@@ -4079,11 +4098,11 @@ const DataBindingSelector = ({
       } else {
         const b = x, v = b.selectionStart || 0, B = b.value || "", w = b.selectionEnd || v;
         if (w > v) {
-          const N = `{{${g}}}`, { text: C } = f(B, v, N), k = B.slice(0, v) + C + B.slice(w);
-          n(k, {}, r);
+          const N = `{{${g}}}`, { text: S } = f(B, v, N), y = B.slice(0, v) + S + B.slice(w);
+          n(y, {}, r);
           return;
         }
-        const _ = `{{${g}}}`, { text: S } = f(B, v, _), A = B.slice(0, v) + S + B.slice(v);
+        const E = `{{${g}}}`, { text: C } = f(B, v, E), A = B.slice(0, v) + C + B.slice(v);
         n(A, {}, r);
       }
     },
@@ -4106,73 +4125,73 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : N.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [k, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : N.name;
   useEffect(() => {
     if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const C = split(o, ":"), k = get(C, 1, "page") || "page";
-    g(k), (async () => {
-      const j = await l(k, [get(C, 2, "page")]);
+    const S = split(o, ":"), y = get(S, 1, "page") || "page";
+    g(y), (async () => {
+      const j = await l(y, [get(S, 2, "page")]);
       j && Array.isArray(j) && m(get(j, [0, "name"], ""));
     })();
   }, [o]);
   const w = useDebouncedCallback(
-    async (C) => {
-      if (isEmpty(C))
+    async (S) => {
+      if (isEmpty(S))
         x([]);
       else {
-        const k = await l(u, C);
-        x(k);
+        const y = await l(u, S);
+        x(y);
       }
       c(!1), b(-1);
     },
     [u],
     300
-  ), E = (C) => {
-    const k = ["pageType", u, C.id];
-    k[1] && (r(k.join(":")), m(C.name), p(!1), x([]), b(-1));
-  }, _ = (C) => {
-    switch (C.key) {
+  ), _ = (S) => {
+    const y = ["pageType", u, S.id];
+    y[1] && (r(y.join(":")), m(S.name), p(!1), x([]), b(-1));
+  }, E = (S) => {
+    switch (S.key) {
       case "ArrowDown":
-        C.preventDefault(), b((k) => k < f.length - 1 ? k + 1 : k);
+        S.preventDefault(), b((y) => y < f.length - 1 ? y + 1 : y);
         break;
       case "ArrowUp":
-        C.preventDefault(), b((k) => k > 0 ? k - 1 : k);
+        S.preventDefault(), b((y) => y > 0 ? y - 1 : y);
         break;
       case "Enter":
-        if (C.preventDefault(), f.length === 0) return;
-        y >= 0 && E(f[y]);
+        if (S.preventDefault(), f.length === 0) return;
+        k >= 0 && _(f[k]);
         break;
       case "Escape":
-        C.preventDefault(), S();
+        S.preventDefault(), C();
         break;
     }
   };
   useEffect(() => {
-    if (y >= 0 && v.current) {
-      const C = v.current.children[y];
-      C == null || C.scrollIntoView({ block: "nearest" });
+    if (k >= 0 && v.current) {
+      const S = v.current.children[k];
+      S == null || S.scrollIntoView({ block: "nearest" });
     }
-  }, [y]);
-  const S = () => {
+  }, [k]);
+  const C = () => {
     m(""), x([]), b(-1), p(!1), r("");
-  }, A = (C) => {
-    m(C), p(!isEmpty(C)), c(!0), w(C);
+  }, A = (S) => {
+    m(S), p(!isEmpty(S)), c(!0), w(S);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (C) => g(C.target.value), children: map(n, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: h,
-          onChange: (C) => A(C.target.value),
-          onKeyDown: _,
+          onChange: (S) => A(S.target.value),
+          onKeyDown: E,
           placeholder: a(`Search ${B ?? ""}`),
           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: h && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsx("button", { onClick: C, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -4182,22 +4201,22 @@ const DataBindingSelector = ({
       ' "',
       h,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(f == null ? void 0 : f.slice(0, 20), (C, k) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(f == null ? void 0 : f.slice(0, 20), (S, y) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => E(C),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : k === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => _(S),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : y === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          C.name,
+          S.name,
           " ",
-          C.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            C.slug,
+            S.slug,
             " )"
           ] })
         ]
       },
-      C.id
+      S.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
@@ -4502,10 +4521,10 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       u.chain().deleteSelection().insertContent(m).run();
     else {
       const { state: b } = u, v = b.selection.from, B = b.doc.textBetween(Math.max(0, v - 1), v), w = b.doc.textBetween(v, Math.min(v + 1, b.doc.content.size));
-      let E = "";
-      v > 0 && B !== " " && !/[.,!?;:]/.test(B) && (E = " ");
       let _ = "";
-      w && w !== " " && !/[.,!?;:]/.test(w) && (_ = " "), u.chain().insertContent(E + m + _).run();
+      v > 0 && B !== " " && !/[.,!?;:]/.test(B) && (_ = " ");
+      let E = "";
+      w && w !== " " && !/[.,!?;:]/.test(w) && (E = " "), u.chain().insertContent(_ + m + E).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (h) => !h && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4599,14 +4618,14 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const h = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const y = (x + 1) % u.length, b = get(u, [y, "_id"]);
+      const k = (x + 1) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
       n({ ...o, currentSlide: b }), c([b]);
     }
   }, m = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const y = (x - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
+      const k = (x - 1 + u.length) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
       n({ ...o, currentSlide: b }), c([b]);
     }
@@ -4614,8 +4633,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), y = x == null ? void 0 : x._id;
-    y && (n({ ...o, currentSlide: y }), c([y]));
+    ), k = x == null ? void 0 : x._id;
+    k && (n({ ...o, currentSlide: k }), c([k]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
@@ -4694,8 +4713,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
             className: "text-xs",
             pattern: "[0-9]*",
             onChange: (x) => {
-              let y = x.target.value;
-              y.length && (y = y.replace("-", "")), n({ ...o, autoplayInterval: y });
+              let k = x.target.value;
+              k.length && (k = k.replace("-", "")), n({ ...o, autoplayInterval: k });
             }
           }
         )
@@ -4803,28 +4822,28 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   formData: g,
   onChange: h
 }) => {
-  const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), y = useMemo(
+  const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), k = useMemo(
     () => isEmpty(x) ? "" : isEmpty(m) ? f : m,
     [x, m, f]
-  ), b = useMemo(() => get(LANGUAGES, y, y), [y]), v = usePageExternalData(), B = useSelectedBlock(), w = useRegisteredChaiBlocks(), E = useMemo(
+  ), b = useMemo(() => get(LANGUAGES, k, k), [k]), v = usePageExternalData(), B = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = useMemo(
     () => get(w, [B == null ? void 0 : B._type, "i18nProps"], []),
     [w, B == null ? void 0 : B._type]
-  ), [_, S] = useState(null);
+  ), [E, C] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const N = E == null ? void 0 : E.includes(o.replace("root.", ""));
+  const N = _ == null ? void 0 : _.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const C = _ === o;
+    const S = E === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => S(C ? null : o),
+          onClick: () => C(S ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            C ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+            S ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(List, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: r }),
             " ",
@@ -4832,7 +4851,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           ]
         }
       ),
-      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${C ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${S ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         c,
         a,
         l,
@@ -4855,8 +4874,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         DataBindingSelector,
         {
           schema: u,
-          onChange: (C) => {
-            h(C, g, o);
+          onChange: (S) => {
+            h(S, g, o);
           },
           id: o,
           formData: g
@@ -4960,43 +4979,43 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }), 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(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), f = ({ formData: _ }, S, A) => {
-    S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(_, S) }, A);
+  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(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), f = ({ formData: E }, C, A) => {
+    C && (c == null ? void 0 : c._id) === n._id && a([n._id], { [C]: get(E, C) }, A);
   }, x = useCallback(
-    debounce(({ formData: _ }, S, A) => {
-      f({ formData: _ }, S, A), d(_);
+    debounce(({ formData: E }, C, A) => {
+      f({ formData: E }, C, A), d(E);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), y = ({ formData: _ }, S) => {
-    S && (r([n._id], { [S]: get(_, S) }), x({ formData: _ }, S, { [S]: get(c, S) }));
-  }, b = ({ formData: _ }, S) => {
-    S && (r([g._id], { [S]: get(_, S) }), x({ formData: _ }, S, { [S]: get(c, S) }));
+  ), k = ({ formData: E }, C) => {
+    C && (r([n._id], { [C]: get(E, C) }), x({ formData: E }, C, { [C]: get(c, C) }));
+  }, b = ({ formData: E }, C) => {
+    C && (r([g._id], { [C]: get(E, C) }), x({ formData: E }, C, { [C]: get(c, C) }));
   }, { schema: v, uiSchema: B } = useMemo(() => {
-    const _ = n == null ? void 0 : n._type;
-    if (!_)
+    const E = n == null ? void 0 : n._type;
+    if (!E)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: S, uiSchema: A } = getBlockFormSchemas(_);
-      if (_ === "Repeater") {
+      const { schema: C, uiSchema: A } = getBlockFormSchemas(E);
+      if (E === "Repeater") {
         const N = get(n, "repeaterItems", "");
         startsWith(N, `{{${COLLECTION_PREFIX}`) ? (set(A, "filter", { "ui:widget": "collectionSelect" }), set(A, "sort", { "ui:widget": "collectionSelect" })) : (set(A, "filter", { "ui:widget": "hidden" }), set(A, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: S, uiSchema: A };
+      return { schema: C, uiSchema: A };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [n]), { wrapperSchema: w, wrapperUiSchema: E } = useMemo(() => {
+  }, [n]), { wrapperSchema: w, wrapperUiSchema: _ } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const _ = g == null ? void 0 : g._type, { schema: S = {}, uiSchema: A = {} } = getBlockFormSchemas(_);
-    return { wrapperSchema: S, wrapperUiSchema: A };
+    const E = g == null ? void 0 : g._type, { schema: C = {}, uiSchema: A = {} } = getBlockFormSchemas(E);
+    return { wrapperSchema: C, wrapperUiSchema: A };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((_) => !_),
+          onClick: () => u((E) => !E),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -5018,7 +5037,7 @@ function BlockSettings() {
           onChange: b,
           formData: m,
           schema: w,
-          uiSchema: E
+          uiSchema: _
         }
       ) })
     ] }),
@@ -5026,7 +5045,7 @@ function BlockSettings() {
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
-        onChange: y,
+        onChange: k,
         formData: i,
         schema: v,
         uiSchema: B
@@ -5206,50 +5225,50 @@ 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, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [v, B] = useState(!1), [w, E] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [k, b] = useState(""), [v, B] = useState(!1), [w, _] = useState(!1);
   useEffect(() => {
-    const { value: C, unit: k } = getClassValueAndUnit(i);
-    if (k === "") {
-      l(C), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: S, unit: y } = getClassValueAndUnit(i);
+    if (y === "") {
+      l(S), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    m(k), l(k === "class" || isEmpty(C) ? "" : C);
+    m(y), l(y === "class" || isEmpty(S) ? "" : S);
   }, [i, p, u]);
-  const _ = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), S = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), A = useCallback(
-    (C = !1) => {
-      const k = getUserInputValues(`${a}`, u);
-      if (get(k, "error", !1)) {
+  const E = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), C = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), A = useCallback(
+    (S = !1) => {
+      const y = getUserInputValues(`${a}`, u);
+      if (get(y, "error", !1)) {
         x(!0);
         return;
       }
-      const j = get(k, "unit") !== "" ? get(k, "unit") : h;
+      const j = get(y, "unit") !== "" ? get(y, "unit") : h;
       if (j === "auto" || j === "none") {
-        _(`${d}${j}`);
+        E(`${d}${j}`);
         return;
       }
-      if (get(k, "value") === "")
+      if (get(y, "value") === "")
         return;
-      const L = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      C ? S(L) : _(L);
+      const L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      S ? C(L) : E(L);
     },
-    [_, S, a, h, d, u]
+    [E, C, a, h, d, u]
   ), N = useCallback(
-    (C) => {
-      const k = getUserInputValues(`${a}`, u);
-      if (get(k, "error", !1)) {
+    (S) => {
+      const y = getUserInputValues(`${a}`, u);
+      if (get(y, "error", !1)) {
         x(!0);
         return;
       }
-      if (C === "auto" || C === "none") {
-        _(`${d}${C}`);
+      if (S === "auto" || S === "none") {
+        E(`${d}${S}`);
         return;
       }
-      if (get(k, "value") === "")
+      if (get(y, "value") === "")
         return;
-      const j = get(k, "unit") !== "" ? get(k, "unit") : C, L = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      _(L);
+      const j = get(y, "unit") !== "" ? get(y, "unit") : S, L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      E(L);
     },
-    [_, a, d, u]
+    [E, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -5270,31 +5289,31 @@ const BlockStylingProps = () => {
         "input",
         {
           readOnly: h === "class",
-          onKeyPress: (C) => {
-            C.key === "Enter" && A();
+          onKeyPress: (S) => {
+            S.key === "Enter" && A();
           },
-          onKeyDown: (C) => {
-            if (C.keyCode !== 38 && C.keyCode !== 40)
+          onKeyDown: (S) => {
+            if (S.keyCode !== 38 && S.keyCode !== 40)
               return;
-            C.preventDefault(), E(!0);
-            const k = parseInt$1(C.target.value);
-            let j = isNaN$1(k) ? 0 : k;
-            C.keyCode === 38 && (j += 1), C.keyCode === 40 && (j -= 1);
-            const T = `${j}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${h === "-" ? "" : h}]`;
-            S(R);
+            S.preventDefault(), _(!0);
+            const y = parseInt$1(S.target.value);
+            let j = isNaN$1(y) ? 0 : y;
+            S.keyCode === 38 && (j += 1), S.keyCode === 40 && (j -= 1);
+            const I = `${j}`, R = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${h === "-" ? "" : h}]`;
+            C(R);
           },
-          onKeyUp: (C) => {
-            w && (C.preventDefault(), E(!1));
+          onKeyUp: (S) => {
+            w && (S.preventDefault(), _(!1));
           },
           onBlur: () => A(),
-          onChange: (C) => {
-            x(!1), l(C.target.value);
+          onChange: (S) => {
+            x(!1), l(S.target.value);
           },
-          onClick: (C) => {
-            var k;
-            (k = C == null ? void 0 : C.target) == null || k.select(), r(!1);
+          onClick: (S) => {
+            var y;
+            (y = S == null ? void 0 : S.target) == null || y.select(), r(!1);
           },
-          value: v ? y : a,
+          value: v ? k : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             f ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -5319,8 +5338,8 @@ const BlockStylingProps = () => {
           {
             units: u,
             current: h,
-            onSelect: (C) => {
-              r(!1), m(C), N(C);
+            onSelect: (S) => {
+              r(!1), m(S), N(S);
             }
           }
         ) })
@@ -5330,18 +5349,18 @@ const BlockStylingProps = () => {
       DragStyleButton,
       {
         onDragStart: () => B(!0),
-        onDragEnd: (C) => {
-          if (b(() => ""), B(!1), isEmpty(C))
+        onDragEnd: (S) => {
+          if (b(() => ""), B(!1), isEmpty(S))
             return;
-          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
-          _(T);
+          const y = `${S}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${h === "-" ? "" : h}]`;
+          E(I);
         },
-        onDrag: (C) => {
-          if (isEmpty(C))
+        onDrag: (S) => {
+          if (isEmpty(S))
             return;
-          b(C);
-          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
-          S(T);
+          b(S);
+          const y = `${S}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${h === "-" ? "" : h}]`;
+          C(I);
         },
         currentValue: a,
         unit: h,
@@ -5406,8 +5425,8 @@ const COLOR_PROP = {
 }, ColorChoice = ({ property: o, onChange: n }) => {
   const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), h = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
-    (y) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (c([]), p({ color: y })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: y, shade: b.shade ? b.shade : "500" })));
+    (k) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(k) ? (c([]), p({ color: k })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: k, shade: b.shade ? b.shade : "500" })));
     },
     [c, p]
   );
@@ -5418,8 +5437,8 @@ const COLOR_PROP = {
   }, [g]);
   const f = useCallback(
     // eslint-disable-next-line no-shadow
-    (y) => {
-      p({ color: g, shade: y });
+    (k) => {
+      p({ color: g, shade: k });
     },
     [g]
   );
@@ -5804,22 +5823,22 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
-    (S, A = !0) => {
-      const N = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), k = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
+    (C, A = !0) => {
+      const N = { dark: p, mq: g, mod: u, cls: C, property: l, fullCls: "" };
       (p || u !== "") && (N.mq = "xs");
-      const C = generateFullClsName(N);
-      m(x, [C], A);
+      const S = generateFullClsName(N);
+      m(x, [S], A);
     },
     [x, p, g, u, l, m]
   ), v = useCallback(() => {
-    f(x, [y], !0);
-  }, [x, y, f]), B = useMemo(() => canChangeClass(h, g), [h, g]);
+    f(x, [k], !0);
+  }, [x, k, f]), B = useMemo(() => canChangeClass(h, g), [h, g]);
   useEffect(() => {
     i(B, h);
   }, [B, i, h]);
-  const [, , w] = useScreenSizeWidth(), E = useCallback(
-    (S) => {
+  const [, , w] = useScreenSizeWidth(), _ = useCallback(
+    (C) => {
       w({
         xs: 400,
         sm: 640,
@@ -5827,12 +5846,12 @@ const COLOR_PROP = {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[S]);
+      }[C]);
     },
     [w]
-  ), _ = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: h && _, 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] ${h && !_ ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), E = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: h && E, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${h && !E ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -5851,7 +5870,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: _ ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${k ? "visible" : "invisible"}`, children: E ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -5871,7 +5890,7 @@ const COLOR_PROP = {
             "button",
             {
               type: "button",
-              onClick: () => E(get(h, "mq")),
+              onClick: () => _(get(h, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6075,7 +6094,7 @@ const COLOR_PROP = {
     u.includes(b) ? u.length > 2 && g(u.filter((v) => v !== b)) : g((v) => [...v, b]);
   }, x = (b) => {
     n || l(b), c(b);
-  }, y = getBreakpointValue(n ? i : a).toLowerCase();
+  }, k = getBreakpointValue(n ? i : a).toLowerCase();
   return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (b) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
@@ -6083,7 +6102,7 @@ const COLOR_PROP = {
       ...b,
       onClick: x,
       key: b.breakpoint,
-      currentBreakpoint: y
+      currentBreakpoint: k
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
@@ -6097,7 +6116,7 @@ const COLOR_PROP = {
           ...b,
           onClick: x,
           key: b.breakpoint,
-          currentBreakpoint: y
+          currentBreakpoint: k
         }
       )
     ) }),
@@ -6251,25 +6270,25 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var T;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((L) => !isEmpty(L)), B = () => {
+  var I;
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), k = (I = first(d)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), v = b.split(" ").filter((L) => !isEmpty(L)), B = () => {
     const L = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(h, L, !0), x("");
-  }, [w, E] = useState([]), _ = ({ value: L }) => {
-    const R = L.trim().toLowerCase(), I = R.match(/.+:/g);
+  }, [w, _] = useState([]), E = ({ value: L }) => {
+    const R = L.trim().toLowerCase(), T = R.match(/.+:/g);
     let D = [];
-    if (I && I.length > 0) {
-      const [O] = I, P = R.replace(O, "");
+    if (T && T.length > 0) {
+      const [O] = T, P = R.replace(O, "");
       D = i.search(P).map((M) => ({
         ...M,
         item: { ...M.item, name: O + M.item.name }
       }));
     } else
       D = i.search(R);
-    return E(map(D, "item"));
-  }, S = () => {
-    E([]);
-  }, A = (L) => L.name, N = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), C = useMemo(
+    return _(map(D, "item"));
+  }, C = () => {
+    _([]);
+  }, A = (L) => L.name, N = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), S = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6290,7 +6309,7 @@ function ManualClasses() {
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [f, c, o]
-  ), k = (L) => {
+  ), y = (L) => {
     debugger;
     const R = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(h, [L]), u(h, R, !0), r(""), l(-1);
@@ -6323,11 +6342,11 @@ function ManualClasses() {
         Autosuggest,
         {
           suggestions: w,
-          onSuggestionsFetchRequested: _,
-          onSuggestionsClearRequested: S,
+          onSuggestionsFetchRequested: E,
+          onSuggestionsClearRequested: C,
           getSuggestionValue: A,
           renderSuggestion: N,
-          inputProps: C,
+          inputProps: S,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -6356,16 +6375,16 @@ function ManualClasses() {
         {
           ref: o,
           value: n,
-          onChange: (I) => r(I.target.value),
+          onChange: (T) => r(T.target.value),
           onBlur: () => {
-            k(L);
+            y(L);
           },
-          onKeyDown: (I) => {
-            I.key === "Enter" && k(L);
+          onKeyDown: (T) => {
+            T.key === "Enter" && y(L);
           },
-          onFocus: (I) => {
+          onFocus: (T) => {
             setTimeout(() => {
-              I.target.select();
+              T.target.select();
             }, 0);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
@@ -6510,8 +6529,8 @@ function BlockStyling() {
       m = isNaN(m) ? 0 : m;
       let f = MAPPER[i.dragUnit];
       (startsWith(h, "scale") || h === "opacity") && (f = 10);
-      let y = (i.dragStartY - u.pageY) / f + m;
-      g && y < 0 && (y = 0), h === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
+      let k = (i.dragStartY - u.pageY) / f + m;
+      g && k < 0 && (k = 0), h === "opacity" && k > 1 && (k = 1), i.onDrag(`${k}`), l(`${k}`);
     },
     [i],
     50
@@ -6554,8 +6573,8 @@ const CoreBlock = ({
 }) => {
   const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
     if (has(o, "blocks")) {
-      const y = isFunction(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(y), r || null, a);
+      const k = isFunction(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(k), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -6567,8 +6586,8 @@ const CoreBlock = ({
         disabled: n,
         onClick: m,
         type: "button",
-        onDragStart: (y) => {
-          y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (k) => {
+          k.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), k.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             g([]), h();
           }, 200);
         },
@@ -6768,7 +6787,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var h, m, f, x, y, b, v, B;
+  var h, m, f, x, k, b, v, B;
   if (r.type === "comment") return [];
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
@@ -6790,7 +6809,7 @@ const CoreBlock = ({
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const w = r.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
+    const w = r.attributes.find((_) => includes(NAME_ATTRIBUTES, _.key));
     w && (a._name = w.value);
   }
   if (i)
@@ -6808,30 +6827,30 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((h = l.find((E) => E.key === "href")) == null ? void 0 : h.value) || "",
-      hrefType: ((m = l.find((E) => E.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
-      autoplay: ((f = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
-      maxWidth: ((y = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : y.replace("px", "")) || "",
-      backdropColor: ((b = l.find((E) => E.key === "data-overlay")) == null ? void 0 : b.value) || "",
-      galleryName: ((v = l.find((E) => E.key === "data-gall")) == null ? void 0 : v.value) || ""
-    }, forEach(w, (E) => {
-      has(a, `styles_attrs.${E}`) && delete a.styles_attrs[E];
+      href: ((h = l.find((_) => _.key === "href")) == null ? void 0 : h.value) || "",
+      hrefType: ((m = l.find((_) => _.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
+      autoplay: ((f = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
+      maxWidth: ((k = (x = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : k.replace("px", "")) || "",
+      backdropColor: ((b = l.find((_) => _.key === "data-overlay")) == null ? void 0 : b.value) || "",
+      galleryName: ((v = l.find((_) => _.key === "data-gall")) == null ? void 0 : v.value) || ""
+    }, forEach(w, (_) => {
+      has(a, `styles_attrs.${_}`) && delete a.styles_attrs[_];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const w = filter(r.children || [], (_) => (_ == null ? void 0 : _.tagName) !== "span");
+    const w = filter(r.children || [], (E) => (E == null ? void 0 : E.tagName) !== "span");
     a.content = getTextContent(w);
-    const E = find(
+    const _ = find(
       r.children || [],
-      (_) => (_ == null ? void 0 : _.tagName) === "span" && some(_.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg")
+      (E) => (E == null ? void 0 : E.tagName) === "span" && some(E.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg")
     );
-    if (E) {
-      const _ = find(E.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg");
-      if (_) {
-        a.icon = stringify([_]);
-        const { height: S, width: A } = getSvgDimensions(_, "16px", "16px");
-        a.iconHeight = S, a.iconWidth = A;
+    if (_) {
+      const E = find(_.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
+      if (E) {
+        a.icon = stringify([E]);
+        const { height: C, width: A } = getSvgDimensions(E, "16px", "16px");
+        a.iconHeight = C, a.iconWidth = A;
       }
     }
     return [a];
@@ -6843,8 +6862,8 @@ const CoreBlock = ({
     const w = stringify([r]);
     return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
   } else if (r.tagName === "svg") {
-    const w = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), _ = get(w, "value") ? `[${get(w, "value")}px]` : "24px", S = get(E, "value") ? `[${get(E, "value")}px]` : "24px", A = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$2(`w-${S} h-${_}`, A)}`.trim(), r.attributes = filter(r.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([r]), [a];
+    const w = find(r.attributes, { key: "height" }), _ = find(r.attributes, { key: "width" }), E = get(w, "value") ? `[${get(w, "value")}px]` : "24px", C = get(_, "value") ? `[${get(_, "value")}px]` : "24px", A = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$2(`w-${C} h-${E}`, A)}`.trim(), r.attributes = filter(r.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((B = n.block) == null ? void 0 : B._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -6952,7 +6971,7 @@ 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(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (B) => {
+  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), k = (B) => {
     const w = has(B, "styles_attrs.data-page-section");
     return B._type === "Box" && w;
   }, b = useCallback(
@@ -6976,17 +6995,17 @@ const registerChaiLibrary = (o, n) => {
         draggable: f ? "true" : "false",
         onDragStart: async (B) => {
           const w = await c({ library: n, block: o });
-          let E = r;
-          if (y(first(w)) && (E = null), !isEmpty(w)) {
-            const _ = { blocks: w, uiLibrary: !0, parent: E };
-            if (B.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
-              const S = new Image();
-              S.src = o.preview, S.onload = () => {
-                B.dataTransfer.setDragImage(S, 0, 0);
+          let _ = r;
+          if (k(first(w)) && (_ = null), !isEmpty(w)) {
+            const E = { blocks: w, uiLibrary: !0, parent: _ };
+            if (B.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
+              const C = new Image();
+              C.src = o.preview, C.onload = () => {
+                B.dataTransfer.setDragImage(C, 0, 0);
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(_), setTimeout(() => {
+            x(E), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7012,7 +7031,7 @@ const registerChaiLibrary = (o, n) => {
     ] }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((k) => k.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [h, m] = useState([]), f = useRef(null);
+  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((y) => y.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [h, m] = useState([]), f = useRef(null);
   useEffect(() => {
     c && c.length > 0 && (f.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
@@ -7024,25 +7043,25 @@ const registerChaiLibrary = (o, n) => {
       m([]);
       return;
     }
-    const k = f.current.search(u).map((j) => j.item);
-    m(k);
+    const y = f.current.search(u).map((j) => j.item);
+    m(y);
   }, [u]);
-  const x = u.trim() && !isEmpty(h) ? h : c, y = groupBy(x, "group"), [b, v] = useState(null);
+  const x = u.trim() && !isEmpty(h) ? h : c, k = groupBy(x, "group"), [b, v] = useState(null);
   useEffect(() => {
-    if (isEmpty(keys(y))) {
+    if (isEmpty(keys(k))) {
       v(null);
       return;
     }
-    if (!b || !y[b]) {
-      v(first(keys(y)));
+    if (!b || !k[b]) {
+      v(first(keys(k)));
       return;
     }
-  }, [y, b]);
-  const B = get(y, b, []), w = useRef(null), { t: E } = useTranslation(), _ = (k) => {
+  }, [k, b]);
+  const B = get(k, b, []), w = useRef(null), { t: _ } = useTranslation(), E = (y) => {
     w.current && (clearTimeout(w.current), w.current = null), w.current = setTimeout(() => {
-      w.current && v(k);
+      w.current && v(y);
     }, 400);
-  }, S = () => {
+  }, C = () => {
     i != null && i.id && p(i.id);
   }, A = () => {
     g("");
@@ -7052,16 +7071,16 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const N = filter(B, (k, j) => j % 2 === 0), C = filter(B, (k, j) => j % 2 === 1);
+  const N = filter(B, (y, j) => j % 2 === 0), S = filter(B, (y, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
       /* @__PURE__ */ jsx(
         Input$1,
         {
-          placeholder: E("Search blocks..."),
+          placeholder: _("Search blocks..."),
           value: u,
-          onChange: (k) => g(k.target.value),
+          onChange: (y) => g(y.target.value),
           className: "w-full pl-8 pr-8"
         }
       ),
@@ -7078,18 +7097,18 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 min-w-60 max-w-60 flex-col gap-1 px-1 pr-2", children: [
         /* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, setLibrary: a, uiLibraries: l }),
         /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: E("Groups") }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: _("Groups") }),
           /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("Failed to load the UI library. Try again") }),
-            /* @__PURE__ */ jsxs(Button, { onClick: S, variant: "outline", size: "sm", className: "gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
+            /* @__PURE__ */ jsxs(Button, { onClick: C, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
-              E("Retry")
+              _("Retry")
             ] })
-          ] }) }) : map(y, (k, j) => /* @__PURE__ */ jsxs(
+          ] }) }) : map(k, (y, j) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => _(j),
+              onMouseEnter: () => E(j),
               onMouseLeave: () => clearTimeout(w.current),
               role: "button",
               onClick: () => v(j),
@@ -7098,7 +7117,7 @@ const registerChaiLibrary = (o, n) => {
                 j === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(E(j.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(_(j.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -7112,23 +7131,23 @@ const registerChaiLibrary = (o, n) => {
           onMouseEnter: () => w.current ? clearTimeout(w.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(B) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: N.map((k, j) => /* @__PURE__ */ jsx(
+            isEmpty(B) && !isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: N.map((y, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: n,
-                  block: k,
+                  block: y,
                   library: i
                 },
                 `block-${j}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: C.map((k, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: S.map((y, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: n,
-                  block: k,
+                  block: y,
                   library: i
                 },
                 `block-second-${j}`
@@ -7167,8 +7186,8 @@ const registerChaiLibrary = (o, n) => {
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const m = Object.entries(a).map(([x, y]) => {
-          const b = y, v = b.type || "partial", B = formatReadableName(v);
+        const m = Object.entries(a).map(([x, k]) => {
+          const b = k, v = b.type || "partial", B = formatReadableName(v);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
@@ -7230,44 +7249,44 @@ const registerChaiLibrary = (o, n) => {
 }, ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, n) => {
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...n });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
-  var C;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (C = find(c, (k) => k._id === r)) == null ? void 0 : C._type, [m, f] = useState("all"), [x, y] = useState(null), b = useRef(null);
+  var S;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (S = find(c, (y) => y._id === r)) == null ? void 0 : S._type, [m, f] = useState("all"), [x, k] = useState(null), b = useRef(null);
   useEffect(() => {
-    const k = setTimeout(() => {
+    const y = setTimeout(() => {
       var j;
       (j = u.current) == null || j.focus();
     }, 0);
-    return () => clearTimeout(k);
+    return () => clearTimeout(y);
   }, [g]), useEffect(() => {
-    d && (f("all"), y(null));
-  }, [d]), useEffect(() => (b.current = debounce((k) => {
-    f(k);
+    d && (f("all"), k(null));
+  }, [d]), useEffect(() => (b.current = debounce((y) => {
+    f(y);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
-  const v = useCallback((k) => {
-    y(k), b.current && b.current(k);
+  const v = useCallback((y) => {
+    k(y), b.current && b.current(y);
   }, []), B = useCallback(() => {
-    y(null), b.current && b.current.cancel();
-  }, []), w = useCallback((k) => {
-    b.current && b.current.cancel(), f(k), y(null);
-  }, []), E = useMemo(
+    k(null), b.current && b.current.cancel();
+  }, []), w = useCallback((y) => {
+    b.current && b.current.cancel(), f(y), k(null);
+  }, []), _ = useMemo(
     () => d ? values(n).filter(
-      (k) => {
-        var j, T;
-        return (((j = k.label) == null ? void 0 : j.toLowerCase()) + " " + ((T = k.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
+      (y) => {
+        var j, I;
+        return (((j = y.label) == null ? void 0 : j.toLowerCase()) + " " + ((I = y.type) == null ? void 0 : I.toLowerCase())).includes(d.toLowerCase());
       }
     ) : n,
     [n, d]
-  ), _ = useMemo(
+  ), E = useMemo(
     () => d ? o.filter(
-      (k) => reject(filter(values(E), { group: k }), { hidden: !0 }).length > 0
-    ) : o.filter((k) => reject(filter(values(n), { group: k }), { hidden: !0 }).length > 0),
-    [n, E, o, d]
-  ), S = useMemo(
-    () => sortBy(_, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
-    [_]
-  ), A = useMemo(() => m === "all" ? E : filter(values(E), { group: m }), [E, m]), N = useMemo(() => m === "all" ? S : [m], [S, m]);
+      (y) => reject(filter(values(_), { group: y }), { hidden: !0 }).length > 0
+    ) : o.filter((y) => reject(filter(values(n), { group: y }), { hidden: !0 }).length > 0),
+    [n, _, o, d]
+  ), C = useMemo(
+    () => sortBy(E, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
+    [E]
+  ), A = useMemo(() => m === "all" ? _ : filter(values(_), { group: m }), [_, m]), N = useMemo(() => m === "all" ? C : [m], [C, m]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7277,11 +7296,11 @@ const registerChaiLibrary = (o, n) => {
         placeholder: i("Search blocks..."),
         value: d,
         className: "-ml-2",
-        onChange: (k) => p(k.target.value)
+        onChange: (y) => p(y.target.value)
       }
     ) }),
     /* @__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: [
+      C.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",
           {
@@ -7293,27 +7312,27 @@ const registerChaiLibrary = (o, n) => {
           },
           "sidebar-all"
         ),
-        S.map((k) => /* @__PURE__ */ jsx(
+        C.map((y) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => w(k),
-            onMouseEnter: () => v(k),
+            onClick: () => w(y),
+            onMouseEnter: () => v(y),
             onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === k || x === k ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
-            children: capitalize(i(k.toLowerCase()))
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === y || x === y ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            children: capitalize(i(y.toLowerCase()))
           },
-          `sidebar-${k}`
+          `sidebar-${y}`
         ))
       ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: _.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: E.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         i("No blocks found matching"),
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.map((k) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(y.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          m === "all" ? filter(values(A), { group: k }) : values(A),
+          m === "all" ? filter(values(A), { group: y }) : values(A),
           { hidden: !0 }
         ).map((j) => /* @__PURE__ */ jsx(
           CoreBlock,
@@ -7325,7 +7344,7 @@ const registerChaiLibrary = (o, n) => {
           },
           j.type
         )) })
-      ] }, k)) }) }) })
+      ] }, y)) }) }) })
     ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -7675,35 +7694,35 @@ const Input = ({ node: o }) => {
   var R;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: B } = o, w = (I) => {
-    I.stopPropagation(), !l.includes(m) && o.toggle();
-  }, E = (I) => {
-    I.isInternal && (p = I.isOpen, I.isOpen && I.close());
-  }, _ = (I) => {
-    I.isInternal && p !== null && (p ? I.open() : I.close(), p = null);
-  }, [S, A] = useAtom$1(currentAddSelection), N = () => {
-    var I;
-    C(), o.parent.isSelected || A((I = o == null ? void 0 : o.parent) == null ? void 0 : I.id);
-  }, C = () => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: k, isDragging: b, isEditing: v, handleClick: B } = o, w = (T) => {
+    T.stopPropagation(), !l.includes(m) && o.toggle();
+  }, _ = (T) => {
+    T.isInternal && (p = T.isOpen, T.isOpen && T.close());
+  }, E = (T) => {
+    T.isInternal && p !== null && (p ? T.open() : T.close(), p = null);
+  }, [C, A] = useAtom$1(currentAddSelection), N = () => {
+    var T;
+    S(), o.parent.isSelected || A((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+  }, S = () => {
     A(null);
-  }, k = (I) => {
-    C(), I.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), B(I);
+  }, y = (T) => {
+    S(), T.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), B(T);
   };
   useEffect(() => {
-    const I = setTimeout(() => {
-      y && !o.isOpen && !b && !l.includes(m) && o.toggle();
+    const T = setTimeout(() => {
+      k && !o.isOpen && !b && !l.includes(m) && o.toggle();
     }, 500);
-    return () => clearTimeout(I);
-  }, [y, o, b]);
-  const j = (I, D) => {
-    const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${I}]`);
+    return () => clearTimeout(T);
+  }, [k, o, b]);
+  const j = (T, D) => {
+    const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${T}]`);
     P && P.setAttribute("data-drop", D);
     const $ = P.getBoundingClientRect(), M = c.getBoundingClientRect();
     $.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = P.offsetTop - M.top);
-  }, T = (I) => {
-    C();
+  }, I = (T) => {
+    S();
     const D = get(o, "parent.id");
-    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: I }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: I });
+    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
   };
   if (m === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
@@ -7712,7 +7731,7 @@ const Input = ({ node: o }) => {
         "div",
         {
           role: "button",
-          onClick: () => T(-1),
+          onClick: () => I(-1),
           className: "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-[9px] leading-tight text-white hover:bg-primary", children: [
             /* @__PURE__ */ jsx(PlusIcon, { className: "h-2 w-2 stroke-[3]" }),
@@ -7729,30 +7748,30 @@ const Input = ({ node: o }) => {
     {
       onMouseEnter: () => g(m),
       onMouseLeave: () => h(),
-      onClick: k,
+      onClick: y,
       style: n,
       "data-node-id": m,
       ref: l.includes(m) ? null : r,
-      onDragStart: () => E(o),
-      onDragEnd: () => _(o),
-      onDragOver: (I) => {
-        I.preventDefault(), j(m, "yes");
+      onDragStart: () => _(o),
+      onDragEnd: () => E(o),
+      onDragOver: (T) => {
+        T.preventDefault(), j(m, "yes");
       },
-      onDragLeave: (I) => {
-        I.preventDefault(), j(m, "no");
+      onDragLeave: (T) => {
+        T.preventDefault(), j(m, "no");
       },
-      onDrop: (I) => {
-        I.preventDefault(), j(m, "no");
+      onDrop: (T) => {
+        T.preventDefault(), j(m, "no");
       },
       children: [
         d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((R = o == null ? void 0 : o.parent) == null ? void 0 : R.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
-            onClick: (I) => {
-              I.stopPropagation(), T(o.childIndex);
+            onClick: (T) => {
+              T.stopPropagation(), I(o.childIndex);
             },
             onMouseEnter: N,
-            onMouseLeave: C,
+            onMouseLeave: S,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-primary opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -7763,8 +7782,8 @@ const Input = ({ node: o }) => {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 outline-none",
               x ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
-              y && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
+              k && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === C ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(m) ? "opacity-50" : "",
               L && x && "bg-primary/20 text-primary"
@@ -7792,8 +7811,8 @@ const Input = ({ node: o }) => {
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                          onDoubleClick: (I) => {
-                            I.stopPropagation(), o.edit(), o.deselect();
+                          onDoubleClick: (T) => {
+                            T.stopPropagation(), o.edit(), o.deselect();
                           },
                           children: /* @__PURE__ */ jsx("span", { children: (f == null ? void 0 : f._name) || (f == null ? void 0 : f._type.split("/").pop()) })
                         }
@@ -7819,8 +7838,8 @@ const Input = ({ node: o }) => {
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (I) => {
-                        I.stopPropagation(), i(m), o.isOpen && o.toggle();
+                      onClick: (T) => {
+                        T.stopPropagation(), i(m), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent",
                       asChild: !0,
@@ -8124,7 +8143,7 @@ const Input = ({ node: o }) => {
     },
     [d],
     200
-  ), y = useDebouncedCallback(
+  ), k = useDebouncedCallback(
     (v, B) => {
       p(() => {
         const w = get(d, `colors.${v}`);
@@ -8146,10 +8165,10 @@ const Input = ({ node: o }) => {
         ColorPickerInput,
         {
           value: w,
-          onChange: (E) => y(B, E)
+          onChange: (_) => k(B, _)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((_) => _.charAt(0).toUpperCase() + _.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
     ] }, B);
   }) });
   return c("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
@@ -8676,8 +8695,8 @@ const AIUserPrompt = ({ blockId: o }) => {
     (x = h.current) == null || x.focus();
   }, []);
   const f = (x) => {
-    const { usage: y } = x || {};
-    !l && y && g(y), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: k } = x || {};
+    !l && k && g(k), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8915,15 +8934,15 @@ function AIChatPanel() {
     const v = (B = b.target.files) == null ? void 0 : B[0];
     if (v) {
       const w = new FileReader();
-      w.onload = (E) => {
-        var _;
-        d((_ = E.target) == null ? void 0 : _.result);
+      w.onload = (_) => {
+        var E;
+        d((E = _.target) == null ? void 0 : E.result);
       }, w.readAsDataURL(v);
     }
   }, x = () => {
     var b;
     (b = p.current) == null || b.click();
-  }, y = () => {
+  }, k = () => {
     d(null), p.current && (p.current.value = "");
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col rounded-lg bg-background shadow-sm", children: [
@@ -8969,7 +8988,7 @@ function AIChatPanel() {
           size: "icon",
           variant: "destructive",
           className: "absolute right-0 top-0 h-5 w-5 rounded-full p-0",
-          onClick: y,
+          onClick: k,
           children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
         }
       )
@@ -9112,7 +9131,7 @@ const AiAssistant = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [h, m] = useState(""), f = useRef(null), x = useRef(null), y = usePageExternalData();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [h, m] = useState(""), f = useRef(null), x = useRef(null), k = usePageExternalData();
   useEffect(() => {
     l(n);
   }, [n]);
@@ -9122,43 +9141,43 @@ const AiAssistant = () => {
       return;
     }
     if (i) {
-      const S = [...a, { key: i, value: d }];
-      r(S), l(a), c(""), p(""), m("");
+      const C = [...a, { key: i, value: d }];
+      r(C), l(a), c(""), p(""), m("");
     }
-  }, v = (S) => {
-    const A = a.filter((N, C) => C !== S);
+  }, v = (C) => {
+    const A = a.filter((N, S) => S !== C);
     r(A), l(A);
-  }, B = (S) => {
-    g(S), c(a[S].key), p(a[S].value);
+  }, B = (C) => {
+    g(C), c(a[C].key), p(a[C].value);
   }, w = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const S = [...a];
-      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), m("");
+      const C = [...a];
+      C[u] = { key: i, value: d }, r(C), l(C), g(null), c(""), p(""), m("");
     }
-  }, E = (S) => {
-    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : b());
-  }, _ = useCallback((S) => {
-    const A = (k) => /[.,!?;:]/.test(k), N = (k, j, T) => {
+  }, _ = (C) => {
+    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? w() : b());
+  }, E = useCallback((C) => {
+    const A = (y) => /[.,!?;:]/.test(y), N = (y, j, I) => {
       let L = "", R = "";
-      const I = j > 0 ? k[j - 1] : "", D = j < k.length ? k[j] : "";
-      return j > 0 && (I === "." || !A(I) && I !== " ") && (L = " "), j < k.length && !A(D) && D !== " " && (R = " "), {
-        text: L + T + R,
+      const T = j > 0 ? y[j - 1] : "", D = j < y.length ? y[j] : "";
+      return j > 0 && (T === "." || !A(T) && T !== " ") && (L = " "), j < y.length && !A(D) && D !== " " && (R = " "), {
+        text: L + I + R,
         prefixLength: L.length,
         suffixLength: R.length
       };
-    }, C = x.current;
-    if (C) {
-      const k = C.selectionStart || 0, j = C.value || "", T = C.selectionEnd || k;
-      if (T > k) {
-        const O = `{{${S}}}`, { text: P } = N(j, k, O), $ = j.slice(0, k) + P + j.slice(T);
+    }, S = x.current;
+    if (S) {
+      const y = S.selectionStart || 0, j = S.value || "", I = S.selectionEnd || y;
+      if (I > y) {
+        const O = `{{${C}}}`, { text: P } = N(j, y, O), $ = j.slice(0, y) + P + j.slice(I);
         p($);
         return;
       }
-      const R = `{{${S}}}`, { text: I } = N(j, k, R), D = j.slice(0, k) + I + j.slice(k);
+      const R = `{{${C}}}`, { text: T } = N(j, y, R), D = j.slice(0, y) + T + j.slice(y);
       p(D);
     }
   }, []);
@@ -9166,8 +9185,8 @@ const AiAssistant = () => {
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (S) => {
-          S.preventDefault(), u !== null ? w() : b();
+        onSubmit: (C) => {
+          C.preventDefault(), u !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -9183,7 +9202,7 @@ const AiAssistant = () => {
                   id: "attrKey",
                   ref: f,
                   value: i,
-                  onChange: (S) => c(S.target.value),
+                  onChange: (C) => c(C.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9192,7 +9211,7 @@ const AiAssistant = () => {
             /* @__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(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: _ })
+                !isEmpty(k) && /* @__PURE__ */ jsx(NestedPathSelector, { data: k, onSelect: E })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9204,8 +9223,8 @@ const AiAssistant = () => {
                   rows: 2,
                   ref: x,
                   value: d,
-                  onChange: (S) => p(S.target.value),
-                  onKeyDown: E,
+                  onChange: (C) => p(C.target.value),
+                  onKeyDown: _,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9217,10 +9236,10 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((C, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: S.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: C.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: C.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(A), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
@@ -9344,42 +9363,42 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     r("outline");
   });
-  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), h = useCallback((S) => {
-    S.preventDefault();
+  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), h = useCallback((C) => {
+    C.preventDefault();
   }, []), m = useCallback(
-    (S) => {
-      r(n === S ? null : S);
+    (C) => {
+      r(n === C ? null : C);
     },
     [n]
   ), { t: f } = useTranslation(), x = useMemo(
     () => [...p, ...u, ...g],
     [p, u, g]
-  ), y = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: n }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
+  ), k = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: n }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
-      const S = find(x, { id: n });
-      S && get(S, "view", "standard") === "standard" && (a.current = n, i(get(S, "width", DEFAULT_PANEL_WIDTH)));
+      const C = find(x, { id: n });
+      C && get(C, "view", "standard") === "standard" && (a.current = n, i(get(C, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, x]);
   const B = useMemo(() => {
     if (n === null) return 0;
-    const S = find(x, { id: n });
-    return get(S, "view", "standard") === "standard" ? v : l;
+    const C = find(x, { id: n });
+    return get(C, "view", "standard") === "standard" ? v : l;
   }, [n, v, l, x]), w = useCallback(() => {
     r(a.current);
-  }, [r]), E = useCallback(() => {
+  }, [r]), _ = useCallback(() => {
     r("outline");
   }, [r]);
   useEffect(() => {
     find(x, { id: n }) || r("outline");
   }, [n, x]);
-  const _ = useCallback(
-    (S) => {
-      m(S);
+  const E = useCallback(
+    (C) => {
+      m(C);
     },
     [m]
   );
-  return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  return /* @__PURE__ */ jsx("div", { dir: k, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -9389,24 +9408,24 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((S, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((C, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
                   position: "top",
-                  panelId: S.id,
-                  isActive: n === S.id,
-                  show: () => _(S.id)
+                  panelId: C.id,
+                  isActive: n === C.id,
+                  show: () => E(C.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(C.label) }) })
               ] }, "button-top-" + A)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((S, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((C, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: S.id,
-                  isActive: n === S.id,
-                  show: () => _(S.id)
+                  panelId: C.id,
+                  isActive: n === C.id,
+                  show: () => E(C.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(C.label) }) })
               ] }, "button-bottom-" + A)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -9471,23 +9490,31 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    n !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${v}px` }, children: [
-      /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
-        /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-        close: E
-      }) }) })
-    ] }) }),
+    n !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        side: "left",
+        className: "flex flex-col gap-0 p-0 sm:max-w-full",
+        style: { width: `${v}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(b, "icon", null) }),
+            /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
+            close: _
+          }) }) })
+        ]
+      }
+    ) }),
     " ",
-    n !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${v}px` }, children: [
-      /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
+    n !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${v}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(b, "icon", null) }),
         /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-        close: E
+        close: _
       }) }) })
     ] }) }),
     n !== null && get(b, "view") === "overlay" && /* @__PURE__ */ jsx(
@@ -9515,7 +9542,7 @@ const RootLayout = () => {
                 /* @__PURE__ */ jsx(Button, { onClick: () => w(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-                close: E
+                close: _
               }) }) })
             ]
           }
@@ -9546,18 +9573,35 @@ const RootLayout = () => {
     const l = first(o);
     isString(l) && (a = [l, ...getParentNodeIds(n, l)]), r(a);
   }, [o, n, r]);
-}, ScreenTooSmall = () => /* @__PURE__ */ jsx("section", { className: "h-screen w-screen bg-gray-900 py-12 sm:py-16 lg:py-20 xl:hidden", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-md text-center", children: [
+}, ScreenTooSmall = () => /* @__PURE__ */ jsx("section", { className: "fixed inset-0 z-50 flex h-screen w-screen items-center justify-center bg-white bg-[linear-gradient(to_right,#f3f4f6_1px,transparent_1px),linear-gradient(to_bottom,#f3f4f6_1px,transparent_1px)] bg-[size:10px_10px] py-12 sm:py-16 lg:py-20 xl:hidden", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-md space-y-6 text-center", children: [
   /* @__PURE__ */ jsx(
     "img",
     {
-      src: "https://fldwljgzcktqnysdkxnn.supabase.co/storage/v1/object/public/chaibuilder-blob-storage/175ac8d8-37fe-4707-bb4a-3c0cd6a6db75/gVH7O-Ir_400x400.png",
+      src: "https://ucarecdn.com/fbfc3b05-cb73-4e99-92a2-3a367b7c36cd/",
       alt: "Chai Builder",
-      className: "mx-auto w-14 rounded-full"
+      className: "mx-auto h-20 w-20 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
     }
   ),
-  /* @__PURE__ */ jsx("br", {}),
-  /* @__PURE__ */ jsx("h2", { className: "text-4xl font-bold", children: "Screen too small" }),
-  /* @__PURE__ */ jsx("p", { className: "mt-6 text-sm font-medium leading-6 text-white text-opacity-70", children: "Please view this page on greater than 1280px screen width." })
+  /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-5xl font-bold tracking-tight text-gray-900", children: "Screen too small" }),
+    /* @__PURE__ */ jsxs("p", { className: "mx-auto max-w-sm text-sm leading-7 text-gray-600", children: [
+      "Please view this page on greater than ",
+      /* @__PURE__ */ jsx("strong", { className: "font-medium", children: "1280px" }),
+      " screen width for the best experience."
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center rounded-full bg-gray-100 px-4 py-2 text-sm text-gray-700", children: [
+    /* @__PURE__ */ jsx("svg", { className: "mr-2 h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+      }
+    ) }),
+    "Minimum width: 1280px"
+  ] }) })
 ] }) }) });
 function getFromQueryParams(o) {
   var r;
@@ -9621,66 +9665,66 @@ const FEATURE_TOGGLES = {
 }, ...h) => {
   const m = h[0] || ((A) => {
     let N = o.get(A);
-    return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, S)), N;
+    return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, C)), N;
   }), f = h[1] || (() => {
     let A, N;
-    const C = (k) => {
+    const S = (y) => {
       try {
-        k();
+        y();
       } catch (j) {
         A || (A = !0, N = j);
       }
     };
     do {
-      c.f && C(c.f);
-      const k = /* @__PURE__ */ new Set(), j = k.add.bind(k);
-      a.forEach((T) => {
+      c.f && S(c.f);
+      const y = /* @__PURE__ */ new Set(), j = y.add.bind(y);
+      a.forEach((I) => {
         var L;
-        return (L = n.get(T)) == null ? void 0 : L.l.forEach(j);
-      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), k.forEach(C), a.size && x();
+        return (L = n.get(I)) == null ? void 0 : L.l.forEach(j);
+      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(S), a.size && x();
     } while (a.size || i.size || l.size);
     if (A)
       throw N;
   }), x = h[2] || (() => {
-    const A = [], N = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
-    for (; k.length; ) {
-      const j = k[k.length - 1], T = m(j);
-      if (C.has(j)) {
-        k.pop();
+    const A = [], N = /* @__PURE__ */ new WeakSet(), S = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
+    for (; y.length; ) {
+      const j = y[y.length - 1], I = m(j);
+      if (S.has(j)) {
+        y.pop();
         continue;
       }
       if (N.has(j)) {
-        r.get(j) === T.n && A.push([j, T]), C.add(j), k.pop();
+        r.get(j) === I.n && A.push([j, I]), S.add(j), y.pop();
         continue;
       }
       N.add(j);
-      for (const L of getMountedOrPendingDependents(j, T, n))
-        N.has(L) || k.push(L);
+      for (const L of getMountedOrPendingDependents(j, I, n))
+        N.has(L) || y.push(L);
     }
     for (let j = A.length - 1; j >= 0; --j) {
-      const [T, L] = A[j];
+      const [I, L] = A[j];
       let R = !1;
-      for (const I of L.d.keys())
-        if (I !== T && a.has(I)) {
+      for (const T of L.d.keys())
+        if (T !== I && a.has(T)) {
           R = !0;
           break;
         }
-      R && (y(T), B(T)), r.delete(T);
+      R && (k(I), B(I)), r.delete(I);
     }
-  }), y = h[3] || ((A) => {
-    var N, C;
-    const k = m(A);
-    if (isAtomStateInitialized(k) && (n.has(A) && r.get(A) !== k.n || Array.from(k.d).every(
+  }), k = h[3] || ((A) => {
+    var N, S;
+    const y = m(A);
+    if (isAtomStateInitialized(y) && (n.has(A) && r.get(A) !== y.n || Array.from(y.d).every(
       ([P, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        y(P).n === $
+        k(P).n === $
       )
     )))
-      return k;
-    k.d.clear();
+      return y;
+    y.d.clear();
     let j = !0;
-    const T = () => {
+    const I = () => {
       n.has(A) && (B(A), x(), f());
     }, L = (P) => {
       var $;
@@ -9693,145 +9737,145 @@ const FEATURE_TOGGLES = {
             throw new Error("no atom init");
         return returnAtomValue(U);
       }
-      const M = y(P);
+      const M = k(P);
       try {
         return returnAtomValue(M);
       } finally {
-        k.d.set(P, M.n), isPendingPromise(k.v) && addPendingPromiseToDependency(A, k.v, M), ($ = n.get(P)) == null || $.t.add(A), j || T();
+        y.d.set(P, M.n), isPendingPromise(y.v) && addPendingPromiseToDependency(A, y.v, M), ($ = n.get(P)) == null || $.t.add(A), j || I();
       }
     };
-    let R, I;
+    let R, T;
     const D = {
       get signal() {
         return R || (R = new AbortController()), R.signal;
       },
       get setSelf() {
-        return !I && isActuallyWritableAtom(A) && (I = (...P) => {
+        return !T && isActuallyWritableAtom(A) && (T = (...P) => {
           if (!j)
             try {
               return v(A, ...P);
             } finally {
               x(), f();
             }
-        }), I;
+        }), T;
       }
-    }, O = k.n;
+    }, O = y.n;
     try {
       const P = d(A, L, D);
       return setAtomStateValueOrPromise(A, P, m), isPromiseLike$1(P) && ((N = P.onCancel) == null || N.call(P, () => R == null ? void 0 : R.abort()), P.then(
-        T,
-        T
-      )), k;
+        I,
+        I
+      )), y;
     } catch (P) {
-      return delete k.v, k.e = P, ++k.n, k;
+      return delete y.v, y.e = P, ++y.n, y;
     } finally {
-      j = !1, O !== k.n && r.get(A) === O && (r.set(A, k.n), a.add(A), (C = c.c) == null || C.call(c, A));
+      j = !1, O !== y.n && r.get(A) === O && (r.set(A, y.n), a.add(A), (S = c.c) == null || S.call(c, A));
     }
   }), b = h[4] || ((A) => {
     const N = [A];
     for (; N.length; ) {
-      const C = N.pop(), k = m(C);
-      for (const j of getMountedOrPendingDependents(C, k, n)) {
-        const T = m(j);
-        r.set(j, T.n), N.push(j);
+      const S = N.pop(), y = m(S);
+      for (const j of getMountedOrPendingDependents(S, y, n)) {
+        const I = m(j);
+        r.set(j, I.n), N.push(j);
       }
     }
   }), v = h[5] || ((A, ...N) => {
-    let C = !0;
-    const k = (T) => returnAtomValue(y(T)), j = (T, ...L) => {
+    let S = !0;
+    const y = (I) => returnAtomValue(k(I)), j = (I, ...L) => {
       var R;
-      const I = m(T);
+      const T = m(I);
       try {
-        if (isSelfAtom(A, T)) {
-          if (!hasInitialValue(T))
+        if (isSelfAtom(A, I)) {
+          if (!hasInitialValue(I))
             throw new Error("atom not writable");
-          const D = I.n, O = L[0];
-          setAtomStateValueOrPromise(T, O, m), B(T), D !== I.n && (a.add(T), (R = c.c) == null || R.call(c, T), b(T));
+          const D = T.n, O = L[0];
+          setAtomStateValueOrPromise(I, O, m), B(I), D !== T.n && (a.add(I), (R = c.c) == null || R.call(c, I), b(I));
           return;
         } else
-          return v(T, ...L);
+          return v(I, ...L);
       } finally {
-        C || (x(), f());
+        S || (x(), f());
       }
     };
     try {
-      return p(A, k, j, ...N);
+      return p(A, y, j, ...N);
     } finally {
-      C = !1;
+      S = !1;
     }
   }), B = h[6] || ((A) => {
     var N;
-    const C = m(A), k = n.get(A);
-    if (k && !isPendingPromise(C.v)) {
-      for (const [j, T] of C.d)
-        if (!k.d.has(j)) {
+    const S = m(A), y = n.get(A);
+    if (y && !isPendingPromise(S.v)) {
+      for (const [j, I] of S.d)
+        if (!y.d.has(j)) {
           const L = m(j);
-          w(j).t.add(A), k.d.add(j), T !== L.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
+          w(j).t.add(A), y.d.add(j), I !== L.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
         }
-      for (const j of k.d || [])
-        if (!C.d.has(j)) {
-          k.d.delete(j);
-          const T = E(j);
-          T == null || T.t.delete(A);
+      for (const j of y.d || [])
+        if (!S.d.has(j)) {
+          y.d.delete(j);
+          const I = _(j);
+          I == null || I.t.delete(A);
         }
     }
   }), w = h[7] || ((A) => {
     var N;
-    const C = m(A);
-    let k = n.get(A);
-    if (!k) {
-      y(A);
-      for (const j of C.d.keys())
+    const S = m(A);
+    let y = n.get(A);
+    if (!y) {
+      k(A);
+      for (const j of S.d.keys())
         w(j).t.add(A);
-      if (k = {
+      if (y = {
         l: /* @__PURE__ */ new Set(),
-        d: new Set(C.d.keys()),
+        d: new Set(S.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, n.set(A, k), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
+      }, n.set(A, y), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
         const j = () => {
-          let T = !0;
+          let I = !0;
           const L = (...R) => {
             try {
               return v(A, ...R);
             } finally {
-              T || (x(), f());
+              I || (x(), f());
             }
           };
           try {
             const R = g(A, L);
-            R && (k.u = () => {
-              T = !0;
+            R && (y.u = () => {
+              I = !0;
               try {
                 R();
               } finally {
-                T = !1;
+                I = !1;
               }
             });
           } finally {
-            T = !1;
+            I = !1;
           }
         };
         l.add(j);
       }
     }
-    return k;
-  }), E = h[8] || ((A) => {
+    return y;
+  }), _ = h[8] || ((A) => {
     var N;
-    const C = m(A);
-    let k = n.get(A);
-    if (k && !k.l.size && !Array.from(k.t).some((j) => {
-      var T;
-      return (T = n.get(j)) == null ? void 0 : T.d.has(A);
+    const S = m(A);
+    let y = n.get(A);
+    if (y && !y.l.size && !Array.from(y.t).some((j) => {
+      var I;
+      return (I = n.get(j)) == null ? void 0 : I.d.has(A);
     })) {
-      k.u && i.add(k.u), k = void 0, n.delete(A), (N = c.u) == null || N.call(c, A);
-      for (const j of C.d.keys()) {
-        const T = E(j);
-        T == null || T.t.delete(A);
+      y.u && i.add(y.u), y = void 0, n.delete(A), (N = c.u) == null || N.call(c, A);
+      for (const j of S.d.keys()) {
+        const I = _(j);
+        I == null || I.t.delete(A);
       }
       return;
     }
-    return k;
-  }), _ = [
+    return y;
+  }), E = [
     // store state
     o,
     n,
@@ -9849,14 +9893,14 @@ const FEATURE_TOGGLES = {
     m,
     f,
     x,
-    y,
+    k,
     b,
     v,
     B,
     w,
-    E
-  ], S = {
-    get: (A) => returnAtomValue(y(A)),
+    _
+  ], C = {
+    get: (A) => returnAtomValue(k(A)),
     set: (A, ...N) => {
       try {
         return v(A, ...N);
@@ -9865,13 +9909,13 @@ const FEATURE_TOGGLES = {
       }
     },
     sub: (A, N) => {
-      const k = w(A).l;
-      return k.add(N), f(), () => {
-        k.delete(N), E(A), f();
+      const y = w(A).l;
+      return y.add(N), f(), () => {
+        y.delete(N), _(A), f();
       };
     }
   };
-  return Object.defineProperty(S, BUILDING_BLOCKS, { value: _ }), S;
+  return Object.defineProperty(C, BUILDING_BLOCKS, { value: E }), C;
 }, INTERNAL_buildStoreRev1 = buildStore, createStore = () => INTERNAL_buildStoreRev1();
 let defaultStore;
 const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), defaultStore), StoreContext = createContext(
@@ -10046,6 +10090,7 @@ export {
   useDuplicateBlocks,
   useHiddenBlockIds,
   useHighlightBlockId,
+  useInlineEditing,
   useLanguages,
   useLibraryBlocks,
   useMediaManagerComponent,