@chaibuilder/sdk 2.2.27 → 2.2.29

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";
@@ -299,12 +299,12 @@ class PubSub {
   }
 }
 const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
-  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (h) => c ? get(h, "_parent") === c : !get(h, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(d, { _id: i }), g = (h) => {
-    if (h === "CHILD")
+  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (m) => c ? get(m, "_parent") === c : !get(m, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(d, { _id: i }), g = (m) => {
+    if (m === "CHILD")
       pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
     else {
-      const m = { _id: c || "", position: d == null ? void 0 : d.length };
-      h === "BEFORE" ? m.position = Math.max(u, 0) : h === "AFTER" && (m.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, m);
+      const h = { _id: c || "", position: d == null ? void 0 : d.length };
+      m === "BEFORE" ? h.position = Math.max(u, 0) : m === "AFTER" && (h.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, h);
     }
   };
   return l(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -339,16 +339,16 @@ function insertBlocksAtPosition(o, n, r, a) {
   let i = [...o];
   if (r) {
     const u = o.find((g) => g._id === r);
-    if (u && u.content !== void 0 && u.content !== "" && !o.some((h) => h._parent === r)) {
-      const m = {
+    if (u && u.content !== void 0 && u.content !== "" && !o.some((m) => m._parent === r)) {
+      const h = {
         _id: generateUUID(),
         _parent: r,
         _type: "Text",
         content: u.content
       };
       Object.keys(u).forEach((f) => {
-        f.startsWith("content-") && (m[f] = u[f]);
-      }), l.unshift(m), i = i.map((f) => {
+        f.startsWith("content-") && (h[f] = u[f]);
+      }), l.unshift(h), i = i.map((f) => {
         if (f._id === r) {
           const x = { ...f, content: "" };
           return Object.keys(x).forEach((y) => {
@@ -388,13 +388,13 @@ function moveNode(o, n, r, a) {
   const l = findNodeById(o, n), i = findNodeById(o, r);
   if (!l || !i) return !1;
   i.children || (i.model.children = []);
-  let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((h) => h.model._id === n);
+  let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((m) => m.model._id === n);
   l.drop(), c = Math.max(c, 0);
   const p = (((g = l == null ? void 0 : l.model) == null ? void 0 : g._parent) || "root") === r && c <= a ? a - 1 : a;
   try {
     i.addChildAtIndex(l, p);
-  } catch (h) {
-    return console.error("Error adding child to parent:", h), !1;
+  } catch (m) {
+    return console.error("Error adding child to parent:", m), !1;
   }
   return !0;
 }
@@ -435,8 +435,8 @@ function handleNewParentTextBlock(o, n, r) {
     const d = o.map((u) => {
       if (u._id === r) {
         const g = { ...u, content: "" };
-        return Object.keys(g).forEach((h) => {
-          h.startsWith("content-") && (g[h] = "");
+        return Object.keys(g).forEach((m) => {
+          m.startsWith("content-") && (g[m] = "");
         }), g;
       }
       return u;
@@ -453,7 +453,7 @@ function moveBlocksWithChildren(o, n, r, a) {
   const c = r || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
   if (moveNode(p, n, c, a)) {
     let u = flattenTree(p);
-    const g = u.find((h) => h._id === n);
+    const g = u.find((m) => m._id === n);
     return g && (g._parent = c === "root" ? null : c), u.shift(), r && (u = handleNewParentTextBlock(u, l, r)), u;
   }
   return i;
@@ -477,22 +477,22 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
 }, removeNestedBlocks = (o, n) => {
   let r = [...o], a = [];
   n.forEach((d) => {
-    const p = r.find((h) => h._id === d);
+    const p = r.find((m) => m._id === d);
     if (!p || !p._parent) return;
-    const u = p._parent, g = r.filter((h) => h._parent === u);
+    const u = p._parent, g = r.filter((m) => m._parent === u);
     if (g.length === 2) {
-      const h = g.find((m) => m._id !== d);
-      if (h && h._type === "Text") {
-        const m = r.find((f) => f._id === u);
-        m && "content" in m && (r = r.map((f) => {
+      const m = g.find((h) => h._id !== d);
+      if (m && m._type === "Text") {
+        const h = r.find((f) => f._id === u);
+        h && "content" in h && (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]);
+            const x = { ...f, content: m.content };
+            return Object.keys(m).forEach((y) => {
+              y.startsWith("content-") && (x[y] = m[y]);
             }), x;
           }
           return f;
-        }), a.push(h._id));
+        }), a.push(m._id));
       }
     }
   });
@@ -574,30 +574,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}`), m = (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 && !m || (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, m, a, n]), {
     $loading: get(l, "status") === "loading",
     ...o ? get(l, "props", {}) : {}
   };
@@ -862,7 +866,7 @@ const undoRedoStateAtom = atom({
 }, useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var m;
+      var h;
       for (let f = 0; f < i.length; f++) {
         const { _id: x } = i[f];
         i[f]._id = generateUUID();
@@ -872,7 +876,7 @@ const undoRedoStateAtom = atom({
       }
       const p = first(i);
       let u, g;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(m = first(i)) == null ? void 0 : m._id]), first(i);
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(h = first(i)) == null ? void 0 : h._id]), first(i);
     },
     [r, o, n]
   );
@@ -889,8 +893,8 @@ const undoRedoStateAtom = atom({
         ...has(i, "_name") && { _name: i._name },
         ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
-      let h, m;
-      return c && (h = find(o, { _id: c }), g._parent = c, m = c), !canAcceptChildBlock(h == null ? void 0 : h._type, g._type) && h && (g._parent = h._parent, m = h._parent), r([g], m, d), n([g._id]), g;
+      let m, h;
+      return c && (m = find(o, { _id: c }), g._parent = c, h = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, h = m._parent), r([g], h, d), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2330,8 +2334,8 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom(!1), 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));
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (h, f) => {
+    const x = cloneDeep(f.find((y) => y._id === h));
     for (const y in x) {
       const b = x[y];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
@@ -2344,16 +2348,16 @@ const getBlockWithChildren = (o, n) => {
   };
   return {
     askAi: useCallback(
-      async (m, f, x, y) => {
+      async (h, f, x, y) => {
         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;
+            const b = p === u ? "" : p, v = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], B = await l(h, addLangToPrompt(x, g, h), v, b), { blocks: w, error: E } = B;
             if (E) {
               a(E);
               return;
             }
-            if (m === "styles") {
+            if (h === "styles") {
               const _ = w.map((S) => {
                 for (const A in S)
                   A !== "_id" && (S[A] = `${STYLES_KEY},${S[A]}`);
@@ -2455,17 +2459,17 @@ const getBlockWithChildren = (o, n) => {
         r(d), a([]);
         const u = {
           _chai_copied_blocks: d.flatMap((g) => {
-            const h = getDuplicatedBlocks(o, g, null);
+            const m = getDuplicatedBlocks(o, g, null);
             if (!p)
-              return h;
-            let m = [];
-            for (const f of h)
+              return m;
+            let h = [];
+            for (const f of m)
               if (f._type === "PartialBlock" || f._type === "GlobalBlock") {
                 let x = l(f.partialBlockId);
-                f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((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((y) => (isEmpty(y._parent) && set(y, "_parent", f._parent), y))), h = [...h, ...x];
               } else
-                m.push(f);
-            return m;
+                h.push(f);
+            return h;
           })
         };
         if (!navigator.clipboard) {
@@ -2503,13 +2507,13 @@ const getBlockWithChildren = (o, n) => {
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const d = o.find((m) => m._id === c);
+        const d = o.find((h) => h._id === c);
         l ? l === "root" && (l = null) : l = d._parent;
         const g = filter(
           o,
-          (m) => isString(l) ? m._parent === l : !m._parent
-        ).indexOf(d) + 1, h = getDuplicatedBlocks(o, c, l);
-        r(h, l, g), i.push(get(h, "0._id", ""));
+          (h) => isString(l) ? h._parent === l : !h._parent
+        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
+        r(m, l, g), i.push(get(m, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -2646,13 +2650,13 @@ const getBlockWithChildren = (o, n) => {
   return map(i, (c) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
-    return each(p, (h) => {
-      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+    return each(p, (m) => {
+      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
       u = u.replace(f, " ").replace(/\s+/g, " ").trim();
-      const x = first(h.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(h.split(":").pop().trim());
-    }), each(p, (h) => {
-      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+      const x = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(m.split(":").pop().trim());
+    }), each(p, (m) => {
+      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
       g = g.replace(f, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
@@ -2756,11 +2760,11 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     return "VERTICAL";
   }
 }, isDisabledControl = (o, n, r) => !!(o && (r === "UP" || r === "LEFT") || n && (r === "DOWN" || r === "RIGHT")), useBlockController = (o, n) => {
-  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, h = u + 1 === (d == null ? void 0 : d.length), m = getParentBlockOrientation(c, i, a), f = useCallback(
+  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, m = u + 1 === (d == null ? void 0 : d.length), h = getParentBlockOrientation(c, i, a), f = useCallback(
     (x) => {
-      isDisabledControl(g, h, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), n());
+      isDisabledControl(g, m, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), n());
     },
-    [g, h, p, u, i, c, n]
+    [g, m, p, u, i, c, n]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
@@ -2770,7 +2774,7 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     },
     { document: a == null ? void 0 : a.contentDocument },
     [f]
-  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: h, moveBlock: f, orientation: m };
+  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: m, moveBlock: f, orientation: h };
 }, BlockController = ({ block: o, updateFloatingBar: n }) => {
   const { isOnlyChild: r, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
     o,
@@ -2905,19 +2909,19 @@ 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(), [p] = useAtom$1(inlineEditingActiveAtom), { document: u } = useFrame(), { floatingStyles: g, refs: m, update: h } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: { reference: n }
   });
-  useResizeObserver(n, () => m(), n !== null), useResizeObserver(u == null ? void 0 : u.body, () => m(), (u == null ? void 0 : u.body) !== null);
+  useResizeObserver(n, () => h(), n !== null), useResizeObserver(u == null ? void 0 : u.body, () => h(), (u == null ? void 0 : u.body) !== null);
   const f = get(o, "_parent", null), x = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
   return !n || !o || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      ref: h.setFloating,
+      ref: m.setFloating,
       style: g,
       onClick: (y) => {
         y.stopPropagation(), y.preventDefault();
@@ -2942,7 +2946,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
           /* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "hover:scale-105" }) }),
           canDuplicateBlock(get(o, "_type", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([o == null ? void 0 : o._id]) }) : null,
           canDeleteBlock(get(o, "_type", "")) && d(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(TrashIcon, { className: "hover:scale-105", onClick: () => r([o == null ? void 0 : o._id]) }) : null,
-          d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar: m })
+          d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar: h })
         ] })
       ]
     }
@@ -3075,15 +3079,15 @@ H(Frame, "defaultProps", {
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
 const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame, { ...o, forwardedRef: n })), useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks: h } = usePasteBlocks(), m = o ? { document: o } : {};
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), h = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      g(n[0]) && h(n);
+      g(n[0]) && m(n);
     },
-    { ...m, preventDefault: !0 },
-    [n, g, h]
-  ), useHotkeys("esc", () => r([]), m, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...m, preventDefault: !0 }, [
+    { ...h, preventDefault: !0 },
+    [n, g, m]
+  ), useHotkeys("esc", () => r([]), h, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...h, preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
@@ -3091,7 +3095,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     (f) => {
       f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
-    m,
+    h,
     [n, l]
   );
 }, KeyboardHandler = () => {
@@ -3382,7 +3386,7 @@ 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);
+          const m = g.relatedTarget, h = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = h == null ? void 0 : h.contains(m), y = f == null ? void 0 : f.contains(m);
           if (!x && !y) {
             const b = (u == null ? void 0 : u.getHTML()) || "";
             r(b);
@@ -3400,10 +3404,10 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       });
     }, [c]);
     const d = useMemo(() => {
-      var h;
+      var m;
       const u = "max-w-none shadow-none outline outline-[2px] outline-green-500 [&_*]:shadow-none";
       if (!n) return u;
-      const g = ((h = n == null ? void 0 : n.className) == null ? void 0 : h.replace("sr-only", "")) || "";
+      const g = ((m = n == null ? void 0 : n.className) == null ? void 0 : m.replace("sr-only", "")) || "";
       return `${u} ${g}`;
     }, [n]), p = useCallback(
       (u) => {
@@ -3438,28 +3442,28 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     useEffect(() => {
       if (a.current) {
         a.current.innerText = n, a.current.focus();
-        const m = c.createRange(), f = d.getSelection();
-        m.selectNodeContents(a.current), m.collapse(!1), f == null || f.removeAllRanges(), f == null || f.addRange(m), a.current.focus();
+        const h = c.createRange(), f = d.getSelection();
+        h.selectNodeContents(a.current), h.collapse(!1), f == null || f.removeAllRanges(), f == null || f.addRange(h), a.current.focus();
       } else
         r();
     }, [c, d]);
     const p = useMemo(() => {
       var f;
-      const m = ((f = o == null ? void 0 : o.tagName) == null ? void 0 : f.toLowerCase()) || "div";
-      return m === "button" ? "div" : m;
+      const h = ((f = o == null ? void 0 : o.tagName) == null ? void 0 : f.toLowerCase()) || "div";
+      return h === "button" ? "div" : h;
     }, [o]), u = useCallback(
-      (m) => {
-        (m.key === "Enter" || m.key === "Escape") && i(m);
+      (h) => {
+        (h.key === "Enter" || h.key === "Escape") && i(h);
       },
       [i]
     ), g = useCallback(() => {
       r();
-    }, [r]), h = useMemo(() => {
-      var m;
+    }, [r]), m = useMemo(() => {
+      var h;
       return {
         id: "active-inline-editing-element",
         contentEditable: !0,
-        className: `${((m = o == null ? void 0 : o.className) == null ? void 0 : m.replace("sr-only", "")) || ""} outline outline-[2px] outline-green-500 shadow-none empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 empty:before:absolute empty:before:pointer-events-none empty:before:select-none empty:before:inset-0 empty:before:z-0 relative min-h-[1em]`,
+        className: `${((h = o == null ? void 0 : o.className) == null ? void 0 : h.replace("sr-only", "")) || ""} outline outline-[2px] outline-green-500 shadow-none empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 empty:before:absolute empty:before:pointer-events-none empty:before:select-none empty:before:inset-0 empty:before:z-0 relative min-h-[1em]`,
         style: cloneDeep(o == null ? void 0 : o.style) || {},
         onInput: (f) => {
           const x = f.target;
@@ -3474,38 +3478,38 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       ref: a,
       onBlur: g,
       onKeyDown: u,
-      ...h
+      ...m
     }) });
   }
 ), 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(() => {
+    const r = "content", { document: a } = useFrame(), [l, i] = useAtom$1(inlineEditingActiveAtom), [c, d] = useState(null), p = useRef(null), { clearHighlight: u } = useBlockHighlight(), g = useUpdateBlocksProps(), { selectedLang: m } = useLanguages(), [, h] = useSelectedBlockIds(), f = useRef(null), x = l, { blockContent: y, blockType: b } = useMemo(() => {
       var C;
       const _ = o._type;
       let S = o[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(
+      return m && ((C = A == null ? void 0 : A.i18nProps) == null ? void 0 : C.includes(r)) && has(o, `${r}-${m}`) && (S = get(o, `${r}-${m}`)), { blockContent: S, blockType: _ };
+    }, [o, m]), v = useCallback(
       (_) => {
         var A;
         const S = _ || ((A = p.current) == null ? void 0 : A.innerText);
-        g([x], { [r]: S }), d(null), i(null), m([]);
+        g([x], { [r]: S }), d(null), i(null), h([]);
       },
-      [x, g, i, m, h]
+      [x, g, i, h, m]
     ), B = useDebouncedCallback(
       (_) => {
         g([x], { [r]: _ });
       },
-      [x, o, g, h],
+      [x, o, g, m],
       1e3
     ), w = useCallback(
       (_) => {
         _.preventDefault(), x && (f.current = x), v(), setTimeout(() => {
           const S = f.current;
-          f.current = null, m([S]);
+          f.current = null, h([S]);
         }, 100);
       },
-      [m, x, h]
+      [h, x, m]
     );
     useEffect(() => {
       var S;
@@ -3532,7 +3536,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         onChange: B,
         onEscape: w
       }
-    )) : null, [c, x, b, y, v, h]);
+    )) : null, [c, x, b, y, v, m]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       E,
       n
@@ -3567,12 +3571,12 @@ 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, {
+  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(), [m] = useAtom$1(dataBindingActiveAtom), h = get(i, "component", null), { index: f, key: x } = useContext(RepeaterContext), y = useMemo(
+    () => m ? applyBindingToBlockProps(applyLanguage(l, c, i), u, {
       index: f,
       key: x
     }) : applyLanguage(l, c, i),
-    [l, c, i, u, h, f, x]
+    [l, c, i, u, m, f, x]
   ), b = useMemo(() => getBlockTagAttributes(l), [l, getBlockTagAttributes]), v = useMemo(
     () => p(l._id, getBlockRuntimeProps(l._type)),
     [l._id, l._type, p, getBlockRuntimeProps]
@@ -3597,8 +3601,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       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, {
+  if (isNull(h) || g.includes(l._id)) return null;
+  let E = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
     ...B,
     children: r({
       _id: l._id,
@@ -3630,7 +3634,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: m, repeaterItems: h, $repeaterItemsKey: f }) => g === "Repeater" ? isArray(h) && h.map((x, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: f }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) }, `${u}-${y}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: m }) }) : i(u) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) : null }) }, c._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3644,11 +3648,11 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
       let g = {};
-      const h = p * u, m = d * u;
+      const m = p * u, h = d * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - h) / h * 100 + "%",
-        width: 100 + (d - m) / m * 100 + "%"
+        height: 100 + (p - m) / m * 100 + "%",
+        width: 100 + (d - h) / h * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3697,19 +3701,19 @@ const CanvasEventsWatcher = () => {
   }), null;
 }, StaticCanvas = () => {
   const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [l, i] = useState({ width: 0, height: 0 }), c = useCanvasScale(l), [, d] = useAtom$1(canvasIframeAtom), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), g = useCallback(
-    (m) => {
-      i((f) => ({ ...f, width: m }));
+    (h) => {
+      i((f) => ({ ...f, width: h }));
     },
     [i]
   );
   useEffect(() => {
     if (!a.current) return;
-    const { clientWidth: m, clientHeight: f } = a.current;
-    i({ width: m, height: f });
+    const { clientWidth: h, clientHeight: f } = a.current;
+    i({ width: h, height: f });
   }, [a, o]);
-  const h = useMemo(() => {
-    let m = IframeInitialContent;
-    return m = m.replace("__HTML_DIR__", u), m;
+  const m = useMemo(() => {
+    let h = IframeInitialContent;
+    return h = h.replace("__HTML_DIR__", u), h;
   }, [u]);
   return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: g, onResize: g, children: /* @__PURE__ */ jsx(
     "div",
@@ -3725,7 +3729,7 @@ const CanvasEventsWatcher = () => {
           id: "canvas-iframe",
           style: { ...c, ...isEmpty(c) ? { width: `${o}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: h,
+          initialContent: m,
           children: [
             /* @__PURE__ */ jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsx(BlockSelectionHighlighter, {}),
@@ -3820,7 +3824,7 @@ const CanvasEventsWatcher = () => {
     /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: a("Paste SVG code to use as an icon") })
   ] });
 }, DefaultMediaManager = ({ close: o, onSelect: n, mode: r = "image" }) => {
-  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), h = async (f) => {
+  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), m = async (f) => {
     if (!f.trim()) {
       p(!1), g("Please enter a URL");
       return;
@@ -3832,9 +3836,9 @@ const CanvasEventsWatcher = () => {
     } finally {
       c(!1);
     }
-  }, { t: m } = useTranslation();
+  }, { t: h } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "flex w-96 flex-col gap-4 p-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: m(`${r.charAt(0).toUpperCase() + r.slice(1)} Manager`) }),
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: h(`${r.charAt(0).toUpperCase() + r.slice(1)} Manager`) }),
     u && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
       /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx(AlertDescription, { children: u })
@@ -3843,20 +3847,20 @@ const CanvasEventsWatcher = () => {
       /* @__PURE__ */ jsx(
         Input$1,
         {
-          placeholder: m(`Enter ${r} URL`),
+          placeholder: h(`Enter ${r} URL`),
           value: a,
           onChange: (f) => l(f.target.value),
-          onKeyUp: () => h(a)
+          onKeyUp: () => m(a)
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: o, children: m("Cancel") }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: o, children: h("Cancel") }),
         /* @__PURE__ */ jsx(
           Button,
           {
             onClick: () => n({ id: "dam-id", url: a, width: 600, height: 400, description: "This is image description" }),
             disabled: !d || i,
-            children: m("Insert")
+            children: h("Insert")
           }
         )
       ] })
@@ -3883,16 +3887,16 @@ const CanvasEventsWatcher = () => {
 MediaManagerModal.displayName = "MediaManagerModal";
 const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   const { t: l } = useTranslation(), i = useSelectedBlock(), c = useUpdateBlocksProps(), d = (g) => {
-    const h = isArray(g) ? first(g) : g;
-    if (h) {
-      n(h == null ? void 0 : h.url);
-      const m = h == null ? void 0 : h.width, f = h == null ? void 0 : h.height;
+    const m = isArray(g) ? first(g) : g;
+    if (m) {
+      n(m == null ? void 0 : m.url);
+      const h = m == null ? void 0 : m.width, f = m == null ? void 0 : m.height;
       if (i != null && i._id) {
         const x = {
-          ...m && { width: m },
+          ...h && { width: h },
           ...f && { height: f },
-          ...h.description && { alt: h.description },
-          ...h.id && { assetId: h.id }
+          ...m.description && { alt: m.description },
+          ...m.id && { assetId: m.id }
         };
         if (isEmpty(x)) return;
         c([i._id], x);
@@ -3937,18 +3941,18 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     ] })
   ] });
 }, PathDropdown = ({ data: o, onSelect: n, dataType: r }) => {
-  const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", p = React__default.useCallback(
-    (h) => {
-      const m = (f) => r === "value" ? f === "value" || f === "object" : r === "array" ? f === "array" : f === r;
-      h.type === "object" ? (l((f) => [...f, h.key]), c(h.value)) : m(h.type) && n([...a, h.key].join("."), r);
+  const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", p = React__default.useCallback(
+    (m) => {
+      const h = (f) => r === "value" ? f === "value" || f === "object" : r === "array" ? f === "array" : f === r;
+      m.type === "object" ? (l((f) => [...f, m.key]), c(m.value)) : h(m.type) && n([...a, m.key].join("."), r);
     },
     [a, n, r]
   ), u = React__default.useCallback(() => {
     if (a.length > 0) {
-      const h = a.slice(0, -1);
-      l(h), c(h.reduce((m, f) => m[f], o));
+      const m = a.slice(0, -1);
+      l(m), c(m.reduce((h, f) => h[f], o));
     }
-  }, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([h, m]) => ({ key: h, value: m, type: d(m) })).filter((h) => !startsWith(h.key, REPEATER_PREFIX) && h.key.includes("/") ? !1 : r === "value" ? h.type === "value" || h.type === "object" : r === "array" ? h.type === "array" || h.type === "object" : r === "object" ? h.type === "object" : !0) : [], [i, r]);
+  }, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([m, h]) => ({ key: m, value: h, type: d(h) })).filter((m) => !startsWith(m.key, REPEATER_PREFIX) && m.key.includes("/") ? !1 : r === "value" ? m.type === "value" || m.type === "object" : r === "array" ? m.type === "array" || m.type === "object" : r === "object" ? m.type === "object" : !0) : [], [i, r]);
   return /* @__PURE__ */ jsxs(Command, { className: "fields-command", children: [
     /* @__PURE__ */ jsx(CommandInput, { className: "border-none", placeholder: "Search..." }),
     /* @__PURE__ */ jsxs(CommandList, { children: [
@@ -3958,36 +3962,36 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
           /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
           "Back"
         ] }),
-        g.map((h) => /* @__PURE__ */ jsxs(
+        g.map((m) => /* @__PURE__ */ jsxs(
           CommandItem,
           {
-            value: h.key,
+            value: m.key,
             disabled: !1,
-            onSelect: () => p(h),
+            onSelect: () => p(m),
             className: "flex items-center justify-between",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
-                startsWith(h.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(h.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(DatabaseIcon, {}) : null,
-                startsWith(h.key, REPEATER_PREFIX) ? "Repeater Data" : startsWith(h.key, COLLECTION_PREFIX) ? h.key.replace(COLLECTION_PREFIX, "") : h.key
+                startsWith(m.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(m.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(DatabaseIcon, {}) : null,
+                startsWith(m.key, REPEATER_PREFIX) ? "Repeater Data" : startsWith(m.key, COLLECTION_PREFIX) ? m.key.replace(COLLECTION_PREFIX, "") : m.key
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                r === "object" && h.type === "object" && /* @__PURE__ */ jsx(
+                r === "object" && m.type === "object" && /* @__PURE__ */ jsx(
                   Button,
                   {
                     size: "sm",
                     variant: "ghost",
                     className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
-                    onClick: (m) => {
-                      m.stopPropagation(), n([...a, h.key].join("."), r);
+                    onClick: (h) => {
+                      h.stopPropagation(), n([...a, m.key].join("."), r);
                     },
                     children: "Select"
                   }
                 ),
-                h.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
+                m.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
               ] })
             ]
           },
-          h.key
+          m.key
         ))
       ] })
     ] })
@@ -4039,18 +4043,18 @@ const DataBindingSelector = ({
 }) => {
   const l = usePageExternalData(), i = useSelectedBlockHierarchy(), c = useSelectedBlock(), d = useMemo(() => {
     if (i.length === 1) return "";
-    const g = i.find((f) => f._type === "Repeater"), m = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
-    return `${REPEATER_PREFIX}${startsWith(m, COLLECTION_PREFIX) ? `${m}/${g._id}` : m}`;
+    const g = i.find((f) => f._type === "Repeater"), h = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
+    return `${REPEATER_PREFIX}${startsWith(h, COLLECTION_PREFIX) ? `${h}/${g._id}` : h}`;
   }, [i]), p = useMemo(() => first(get(l, d.replace(REPEATER_PREFIX, ""), [])), [d, l]), u = useCallback(
-    (g, h) => {
-      if (g = isEmpty(d) ? g : g.replace(`${d}`, "$index"), h === "array" || h === "object") {
+    (g, m) => {
+      if (g = isEmpty(d) ? g : g.replace(`${d}`, "$index"), m === "array" || m === "object") {
         n(`{{${g}}}`, {}, r);
         return;
       }
-      const m = (b) => /[.,!?;:]/.test(b), f = (b, v, B) => {
+      const h = (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 = " "), {
+        return v > 0 && (_ === "." || !h(_) && _ !== " ") && (w = " "), v < b.length && !h(S) && S !== " " && (E = " "), {
           text: w + B + E,
           prefixLength: w.length,
           suffixLength: E.length
@@ -4069,9 +4073,9 @@ const DataBindingSelector = ({
           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 = " ");
+            S > 0 && A !== " " && !h(A) && (C = " ");
             let k = "";
-            N && N !== " " && !m(N) && (k = " "), b.chain().insertContent(C + v + k).run();
+            N && N !== " " && !h(N) && (k = " "), b.chain().insertContent(C + v + k).run();
           }
           setTimeout(() => n(b.getHTML(), {}, r), 100);
           return;
@@ -4106,13 +4110,13 @@ 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", (C, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : N.name;
   useEffect(() => {
-    if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (h(""), 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")]);
-      j && Array.isArray(j) && m(get(j, [0, "name"], ""));
+      j && Array.isArray(j) && h(get(j, [0, "name"], ""));
     })();
   }, [o]);
   const w = useDebouncedCallback(
@@ -4129,7 +4133,7 @@ const DataBindingSelector = ({
     300
   ), E = (C) => {
     const k = ["pageType", u, C.id];
-    k[1] && (r(k.join(":")), m(C.name), p(!1), x([]), b(-1));
+    k[1] && (r(k.join(":")), h(C.name), p(!1), x([]), b(-1));
   }, _ = (C) => {
     switch (C.key) {
       case "ArrowDown":
@@ -4154,9 +4158,9 @@ const DataBindingSelector = ({
     }
   }, [y]);
   const S = () => {
-    m(""), x([]), b(-1), p(!1), r("");
+    h(""), x([]), b(-1), p(!1), r("");
   }, A = (C) => {
-    m(C), p(!isEmpty(C)), c(!0), w(C);
+    h(C), p(!isEmpty(C)), c(!0), w(C);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (C) => g(C.target.value), children: map(n, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
@@ -4165,14 +4169,14 @@ const DataBindingSelector = ({
         "input",
         {
           type: "text",
-          value: h,
+          value: m,
           onChange: (C) => A(C.target.value),
           onKeyDown: _,
           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: m && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -4180,7 +4184,7 @@ const DataBindingSelector = ({
     ] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      h,
+      m,
       '"'
     ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(f == null ? void 0 : f.slice(0, 20), (C, k) => /* @__PURE__ */ jsxs(
       "li",
@@ -4438,16 +4442,16 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const c = useRef(null), d = useRef(a || ""), p = usePageExternalData();
   useEffect(() => {
     if (o) {
-      const h = document.createElement("style");
-      return h.id = "rte-modal-styles", h.innerHTML = `
+      const m = document.createElement("style");
+      return m.id = "rte-modal-styles", m.innerHTML = `
         /* Ensure the NestedPathSelector popover appears above the dialog */
         .rte-path-selector + [data-radix-popper-content-wrapper],
         [data-radix-popper-content-wrapper] {
           z-index: 9999 !important;
         }
-      `, document.head.appendChild(h), () => {
-        const m = document.getElementById("rte-modal-styles");
-        m && m.remove();
+      `, document.head.appendChild(m), () => {
+        const h = document.getElementById("rte-modal-styles");
+        h && h.remove();
       };
     }
   }, [o]);
@@ -4472,13 +4476,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       })
     ],
     content: a || "",
-    onUpdate: ({ editor: h }) => {
-      const m = h.getHTML();
-      l(m);
+    onUpdate: ({ editor: m }) => {
+      const h = m.getHTML();
+      l(h);
     },
-    onBlur: ({ editor: h }) => {
-      const m = h.getHTML();
-      i(r, m);
+    onBlur: ({ editor: m }) => {
+      const h = m.getHTML();
+      i(r, h);
     },
     editorProps: {
       attributes: {
@@ -4493,22 +4497,22 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [o, u]), useEffect(() => {
     c.current && u && (c.current.__chaiRTE = u);
   }, [u, o]);
-  const g = (h) => {
+  const g = (m) => {
     if (!u) return;
-    const m = `{{${h}}}`;
+    const h = `{{${m}}}`;
     u.commands.focus();
     const { from: f, to: x } = u.state.selection;
     if (f !== x)
-      u.chain().deleteSelection().insertContent(m).run();
+      u.chain().deleteSelection().insertContent(h).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();
+      w && w !== " " && !/[.,!?;:]/.test(w) && (_ = " "), u.chain().insertContent(E + h + _).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: [
+  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
     /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center justify-between pr-8", children: [
       /* @__PURE__ */ jsx("span", { children: "Rich Text Editor" }),
       Object.keys(p).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -4563,9 +4567,9 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [g]), useEffect(() => {
     u(r || "");
   }, [r]);
-  const h = (f) => {
+  const m = (f) => {
     a(f);
-  }, m = () => {
+  }, h = () => {
     d(!1), g && g.commands.setContent(p);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4577,10 +4581,10 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       RTEModal,
       {
         isOpen: c,
-        onClose: m,
+        onClose: h,
         id: o,
         value: p,
-        onChange: h,
+        onChange: m,
         onBlur: l
       }
     )
@@ -4596,14 +4600,14 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [a]), useEffect(() => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
-  const h = () => {
+  const m = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
       const y = (x + 1) % u.length, b = get(u, [y, "_id"]);
       if (!b) return;
       n({ ...o, currentSlide: b }), c([b]);
     }
-  }, m = () => {
+  }, h = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
       const y = (x - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
@@ -4619,7 +4623,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   };
   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: [
-      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
           " ",
@@ -4628,7 +4632,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsxs(
         "button",
         {
@@ -4706,7 +4710,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const r = get(o, "srcsets", []) || [], a = (c, d) => {
     const p = c.target.name, u = c.target.value;
     n({
-      srcsets: map(r, (g, h) => h === d ? { ...g, [p]: u } : g)
+      srcsets: map(r, (g, m) => m === d ? { ...g, [p]: u } : g)
     });
   }, l = () => {
     n({ srcsets: [...r, {}] });
@@ -4801,11 +4805,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   required: p,
   schema: u,
   formData: g,
-  onChange: h
+  onChange: m
 }) => {
-  const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), y = useMemo(
-    () => isEmpty(x) ? "" : isEmpty(m) ? f : m,
-    [x, m, f]
+  const { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), y = useMemo(
+    () => isEmpty(x) ? "" : isEmpty(h) ? f : h,
+    [x, h, f]
   ), b = useMemo(() => get(LANGUAGES, y, y), [y]), v = usePageExternalData(), B = useSelectedBlock(), w = useRegisteredChaiBlocks(), E = useMemo(
     () => get(w, [B == null ? void 0 : B._type, "i18nProps"], []),
     [w, B == null ? void 0 : B._type]
@@ -4856,7 +4860,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         {
           schema: u,
           onChange: (C) => {
-            h(C, g, o);
+            m(C, g, o);
           },
           id: o,
           formData: g
@@ -4903,8 +4907,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: n, uiSchema: r, formData: a, onChange: l }) => {
   const { selectedLang: i } = useLanguages(), c = useBlockSettingComponents("widget"), d = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), u = useThrottledCallback(
-    async ({ formData: g }, h) => {
-      l({ formData: g }, h);
+    async ({ formData: g }, m) => {
+      l({ formData: g }, m);
     },
     [l, i],
     400
@@ -4945,10 +4949,10 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       uiSchema: r,
       schema: n,
       formData: a,
-      onChange: ({ formData: g }, h) => {
-        if (!h || o !== (g == null ? void 0 : g._id)) return;
-        const m = take(h.split("."), 2).join(".").replace("root.", "");
-        u({ formData: g }, m);
+      onChange: ({ formData: g }, m) => {
+        if (!m || o !== (g == null ? void 0 : g._id)) return;
+        const h = take(m.split("."), 2).join(".").replace("root.", "");
+        u({ formData: g }, h);
       }
     },
     i
@@ -4960,7 +4964,7 @@ 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) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: _ }, S, A) => {
     S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(_, S) }, A);
   }, x = useCallback(
     debounce(({ formData: _ }, S, A) => {
@@ -5016,7 +5020,7 @@ function BlockSettings() {
         {
           blockId: g == null ? void 0 : g._id,
           onChange: b,
-          formData: m,
+          formData: h,
           schema: w,
           uiSchema: E
         }
@@ -5206,14 +5210,14 @@ 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, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [v, B] = useState(!1), [w, E] = useState(!1);
   useEffect(() => {
     const { value: C, unit: k } = getClassValueAndUnit(i);
     if (k === "") {
-      l(C), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      l(C), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    m(k), l(k === "class" || isEmpty(C) ? "" : C);
+    h(k), l(k === "class" || isEmpty(C) ? "" : C);
   }, [i, p, u]);
   const _ = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), S = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), A = useCallback(
     (C = !1) => {
@@ -5222,7 +5226,7 @@ const BlockStylingProps = () => {
         x(!0);
         return;
       }
-      const j = get(k, "unit") !== "" ? get(k, "unit") : h;
+      const j = get(k, "unit") !== "" ? get(k, "unit") : m;
       if (j === "auto" || j === "none") {
         _(`${d}${j}`);
         return;
@@ -5232,7 +5236,7 @@ const BlockStylingProps = () => {
       const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       C ? S(I) : _(I);
     },
-    [_, S, a, h, d, u]
+    [_, S, a, m, d, u]
   ), N = useCallback(
     (C) => {
       const k = getUserInputValues(`${a}`, u);
@@ -5251,7 +5255,7 @@ const BlockStylingProps = () => {
     },
     [_, 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: [
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -5266,10 +5270,10 @@ const BlockStylingProps = () => {
     ] })
   ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsx(
+      ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
-          readOnly: h === "class",
+          readOnly: m === "class",
           onKeyPress: (C) => {
             C.key === "Enter" && A();
           },
@@ -5280,8 +5284,8 @@ const BlockStylingProps = () => {
             const k = parseInt$1(C.target.value);
             let j = isNaN$1(k) ? 0 : k;
             C.keyCode === 38 && (j += 1), C.keyCode === 40 && (j -= 1);
-            const T = `${j}`, P = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${h === "-" ? "" : h}]`;
-            S(P);
+            const T = `${j}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${m === "-" ? "" : m}]`;
+            S(R);
           },
           onKeyUp: (C) => {
             w && (C.preventDefault(), E(!1));
@@ -5309,7 +5313,7 @@ const BlockStylingProps = () => {
             onClick: () => r(!n),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
+              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
               u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -5318,33 +5322,33 @@ const BlockStylingProps = () => {
           UnitSelection,
           {
             units: u,
-            current: h,
+            current: m,
             onSelect: (C) => {
-              r(!1), m(C), N(C);
+              r(!1), h(C), N(C);
             }
           }
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || v ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || v ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => B(!0),
         onDragEnd: (C) => {
           if (b(() => ""), B(!1), isEmpty(C))
             return;
-          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
+          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${m === "-" ? "" : m}]`;
           _(T);
         },
         onDrag: (C) => {
           if (isEmpty(C))
             return;
           b(C);
-          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
+          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${m === "-" ? "" : m}]`;
           S(T);
         },
         currentValue: a,
-        unit: h,
+        unit: m,
         negative: g,
         cssProperty: p
       }
@@ -5404,7 +5408,7 @@ const COLOR_PROP = {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, 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(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), h = 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" })));
@@ -5437,7 +5441,7 @@ const COLOR_PROP = {
         disabled: !l,
         rounded: !0,
         selected: g,
-        onChange: m,
+        onChange: h,
         options: [
           "current",
           "transparent",
@@ -5470,7 +5474,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: h, disabled: !g || !l, onChange: f, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: f, options: i }) })
   ] });
 }, EDITOR_ICONS = {
   "not-italic": () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
@@ -5804,20 +5808,20 @@ 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(
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
     (S, A = !0) => {
       const N = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (N.mq = "xs");
       const C = generateFullClsName(N);
-      m(x, [C], A);
+      h(x, [C], A);
     },
-    [x, p, g, u, l, m]
+    [x, p, g, u, l, h]
   ), v = useCallback(() => {
     f(x, [y], !0);
-  }, [x, y, f]), B = useMemo(() => canChangeClass(h, g), [h, g]);
+  }, [x, y, f]), B = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(B, h);
-  }, [B, i, h]);
+    i(B, m);
+  }, [B, i, m]);
   const [, , w] = useScreenSizeWidth(), E = useCallback(
     (S) => {
       w({
@@ -5830,15 +5834,15 @@ const COLOR_PROP = {
       }[S]);
     },
     [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) }) }),
+  ), _ = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && _, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !_ ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
           AdvanceChoices,
           {
-            currentClass: get(h, "cls", ""),
+            currentClass: get(m, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: b,
@@ -5851,7 +5855,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 ${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 && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -5863,19 +5867,19 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(h, "mq")),
-            p && !h.dark ? "(Light mode)" : ""
+            getBreakpoint(get(m, "mq")),
+            p && !m.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => E(get(h, "mq")),
+              onClick: () => E(get(m, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(h, "mq").toUpperCase()
+                get(m, "mq").toUpperCase()
               ]
             }
           )
@@ -5892,7 +5896,7 @@ const COLOR_PROP = {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), h = useCallback((m) => map(g, "property").includes(m), [g]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((h) => map(g, "property").includes(h), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5900,7 +5904,7 @@ const COLOR_PROP = {
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: m, key: f }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: h, key: f }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
               "button",
               {
@@ -5909,13 +5913,13 @@ const COLOR_PROP = {
                 className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                 children: [
                   React__default.createElement("div", {
-                    className: h(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    className: m(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                   }),
                   React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(m)) })
+            /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(h)) })
           ] }) }, `option-${x}`)) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsx(
@@ -6071,12 +6075,12 @@ const COLOR_PROP = {
   canvas: n = !1,
   tooltip: r = !0
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: h } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (b) => {
+  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (b) => {
     u.includes(b) ? u.length > 2 && g(u.filter((v) => v !== b)) : g((v) => [...v, b]);
   }, x = (b) => {
     n || l(b), c(b);
   }, y = getBreakpointValue(n ? i : a).toLowerCase();
-  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (b) => /* @__PURE__ */ createElement(
+  return h.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(h, (b) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
@@ -6087,7 +6091,7 @@ const COLOR_PROP = {
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
-      m.filter((b) => includes(u, toUpper(b.breakpoint))),
+      h.filter((b) => includes(u, toUpper(b.breakpoint))),
       (b) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
@@ -6104,15 +6108,15 @@ const COLOR_PROP = {
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: h("Screen sizes") }),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: m("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(m, (b) => /* @__PURE__ */ jsx(
+        map(h, (b) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
             disabled: b.breakpoint === "xs",
             onCheckedChange: () => f(toUpper(b.breakpoint)),
             checked: includes(u, toUpper(b.breakpoint)),
-            children: h(b.title)
+            children: m(b.title)
           },
           b.breakpoint
         ))
@@ -6191,11 +6195,11 @@ function Countdown() {
 const AskAIStyles = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, g] = useState();
   useEffect(() => {
-    var m;
-    (m = d.current) == null || m.focus();
+    var h;
+    (h = d.current) == null || h.focus();
   }, []);
-  const h = (m) => {
-    const { usage: f } = m || {};
+  const m = (h) => {
+    const { usage: f } = h || {};
     !l && f && g(f), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
@@ -6205,12 +6209,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (m) => c(m.target.value),
+        onChange: (h) => c(h.target.value),
         placeholder: n("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
-        onKeyDown: (m) => {
-          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, h));
+        onKeyDown: (h) => {
+          h.key === "Enter" && (h.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m));
         }
       }
     ),
@@ -6220,7 +6224,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, h);
+            p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m);
           },
           variant: "default",
           className: "w-fit",
@@ -6252,20 +6256,20 @@ 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((I) => !isEmpty(I)), B = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((I) => !isEmpty(I)), B = () => {
     const I = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(h, I, !0), x("");
+    u(m, I, !0), x("");
   }, [w, E] = useState([]), _ = ({ value: I }) => {
-    const P = I.trim().toLowerCase(), L = P.match(/.+:/g);
+    const R = I.trim().toLowerCase(), L = R.match(/.+:/g);
     let D = [];
     if (L && L.length > 0) {
-      const [O] = L, R = P.replace(O, "");
-      D = i.search(R).map((M) => ({
+      const [O] = L, P = R.replace(O, "");
+      D = i.search(P).map((M) => ({
         ...M,
         item: { ...M.item, name: O + M.item.name }
       }));
     } else
-      D = i.search(P);
+      D = i.search(R);
     return E(map(D, "item"));
   }, S = () => {
     E([]);
@@ -6286,14 +6290,14 @@ function ManualClasses() {
       onKeyDown: (I) => {
         I.key === "Enter" && f.trim() !== "" && B();
       },
-      onChange: (I, { newValue: P }) => x(P),
+      onChange: (I, { newValue: R }) => x(R),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [f, c, o]
   ), k = (I) => {
     debugger;
-    const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(h, [I]), u(h, P, !0), r(""), l(-1);
+    const R = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    g(m, [I]), u(m, R, !0), r(""), l(-1);
   }, j = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
@@ -6310,7 +6314,7 @@ function ManualClasses() {
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
-      m ? /* @__PURE__ */ jsxs(Popover, { children: [
+      h ? /* @__PURE__ */ jsxs(Popover, { children: [
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
           /* @__PURE__ */ jsx(SparklesIcon, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { className: "ml-2", children: c("Ask AI") })
@@ -6351,7 +6355,7 @@ function ManualClasses() {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
-      (I, P) => a === P ? /* @__PURE__ */ jsx(
+      (I, R) => a === R ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
@@ -6375,7 +6379,7 @@ function ManualClasses() {
         "button",
         {
           onDoubleClick: () => {
-            x(I), g(h, [I]), setTimeout(() => {
+            x(I), g(m, [I]), setTimeout(() => {
               o.current && o.current.focus();
             }, 10);
           },
@@ -6385,7 +6389,7 @@ function ManualClasses() {
             n !== I && /* @__PURE__ */ jsx(
               Cross2Icon,
               {
-                onClick: () => g(h, [I], !0),
+                onClick: () => g(m, [I], !0),
                 className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
               }
             )
@@ -6505,13 +6509,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const g = !get(i, "negative", !1), h = get(i, "cssProperty", "");
-      let m = parseFloat(i.dragStartValue);
-      m = isNaN(m) ? 0 : m;
+      const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
+      let h = parseFloat(i.dragStartValue);
+      h = isNaN(h) ? 0 : h;
       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}`);
+      (startsWith(m, "scale") || m === "opacity") && (f = 10);
+      let y = (i.dragStartY - u.pageY) / f + h;
+      g && y < 0 && (y = 0), m === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
     },
     [i],
     50
@@ -6552,7 +6556,7 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), h = () => {
     if (has(o, "blocks")) {
       const y = isFunction(o.blocks) ? o.blocks() : o.blocks;
       u(syncBlocksWithDefaults(y), r || null, a);
@@ -6565,11 +6569,11 @@ const CoreBlock = ({
       "button",
       {
         disabled: n,
-        onClick: m,
+        onClick: h,
         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(() => {
-            g([]), h();
+            g([]), m();
           }, 200);
         },
         draggable: f ? "true" : "false",
@@ -6768,9 +6772,8 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var h, m, f, x, y, b, v, B;
+  var m, h, f, x, y, b, v, B;
   if (r.type === "comment") return [];
-  console.log("node ===>", r);
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
     return isEmpty(get(r, "content", "")) ? [] : n && shouldAddText(n.node, n.block) ? (set(n, "block.content", get(r, "content", "")), []) : { ...a, _type: "Text", content: get(r, "content", "") };
@@ -6809,8 +6812,8 @@ 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",
+      href: ((m = l.find((E) => E.key === "href")) == null ? void 0 : m.value) || "",
+      hrefType: ((h = l.find((E) => E.key === "data-vbtype")) == null ? void 0 : h.value) || "video",
       autoplay: ((f = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
       maxWidth: ((y = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : y.replace("px", "")) || "",
       backdropColor: ((b = l.find((E) => E.key === "data-overlay")) == null ? void 0 : b.value) || "",
@@ -6944,16 +6947,16 @@ function UILibrariesSelect({
     )
   ] }) : null;
 }
-let LIBRARIES = {};
+let LIBRARIES_REGISTRY = {};
 const registerChaiLibrary = (o, n) => {
-  LIBRARIES[o] = { ...n, id: o };
-}, useChaiLibraries = () => values(LIBRARIES), BlockCard = ({
+  LIBRARIES_REGISTRY[o] = { ...n, id: o };
+}, useChaiLibraries = () => values(LIBRARIES_REGISTRY), BlockCard = ({
   block: o,
   library: 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(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (B) => {
     const w = has(B, "styles_attrs.data-page-section");
     return B._type === "Box" && w;
   }, b = useCallback(
@@ -6963,7 +6966,7 @@ const registerChaiLibrary = (o, n) => {
         return;
       }
       i(!0);
-      let w = await c(n, o);
+      let w = await c({ library: n, block: o });
       typeof w == "string" && (w = getBlocksFromHTML(w)), isEmpty(w) || p(syncBlocksWithDefaults(w), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, n, r, a]
@@ -6976,7 +6979,7 @@ const registerChaiLibrary = (o, n) => {
         } : b,
         draggable: f ? "true" : "false",
         onDragStart: async (B) => {
-          const w = await c(n, o);
+          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 };
@@ -7000,20 +7003,20 @@ const registerChaiLibrary = (o, n) => {
             /* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: h }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children: h }),
-            m && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: m })
+          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: m }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children: m }),
+            h && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: h })
           ] })
         ]
       }
     ) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
-      /* @__PURE__ */ jsx("p", { className: "font-medium", children: h }),
-      m && o.preview && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-primary-foreground", children: m })
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: m }),
+      h && o.preview && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-primary-foreground", children: h })
     ] }) })
   ] });
 }, 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((k) => k.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [m, h] = useState([]), f = useRef(null);
   useEffect(() => {
     c && c.length > 0 && (f.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
@@ -7022,13 +7025,13 @@ const registerChaiLibrary = (o, n) => {
     }));
   }, [c]), useEffect(() => {
     if (!u.trim() || !f.current) {
-      m([]);
+      h([]);
       return;
     }
     const k = f.current.search(u).map((j) => j.item);
-    m(k);
+    h(k);
   }, [u]);
-  const x = u.trim() && !isEmpty(h) ? h : c, y = groupBy(x, "group"), [b, v] = useState(null);
+  const x = u.trim() && !isEmpty(m) ? m : c, y = groupBy(x, "group"), [b, v] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(y))) {
       v(null);
@@ -7168,7 +7171,7 @@ 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 h = Object.entries(a).map(([x, y]) => {
           const b = y, v = b.type || "partial", B = formatReadableName(v);
           return {
             type: "PartialBlock",
@@ -7183,14 +7186,14 @@ const registerChaiLibrary = (o, n) => {
             // Store the original ID as partialBlockId
             _name: b.name
           };
-        }), f = uniq(map(m, "group"));
+        }), f = uniq(map(h, "group"));
         p({
-          blocks: m,
+          blocks: h,
           groups: f,
           isLoading: !1,
           error: null
         }), g(!0);
-      } else l ? p((m) => ({ ...m, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
+      } else l ? p((h) => ({ ...h, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
         blocks: [],
         groups: [],
         isLoading: !1,
@@ -7205,15 +7208,15 @@ const registerChaiLibrary = (o, n) => {
     d.blocks,
     c
   ]);
-  const h = () => {
-    p((m) => ({ ...m, isLoading: !0, error: null })), g(!1), i();
+  const m = () => {
+    p((h) => ({ ...h, isLoading: !0, error: null })), g(!1), i();
   };
   return d.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : d.error || d.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
     /* @__PURE__ */ jsx("p", { children: d.error || "No partial blocks available" }),
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: h,
+        onClick: m,
         className: "rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90",
         children: "Refresh"
       }
@@ -7232,7 +7235,7 @@ const registerChaiLibrary = (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);
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (C = find(c, (k) => k._id === r)) == null ? void 0 : C._type, [h, f] = useState("all"), [x, y] = useState(null), b = useRef(null);
   useEffect(() => {
     const k = setTimeout(() => {
       var j;
@@ -7268,7 +7271,7 @@ const registerChaiLibrary = (o, n) => {
   ), 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]);
+  ), A = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), N = useMemo(() => h === "all" ? S : [h], [S, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7289,7 +7292,7 @@ const registerChaiLibrary = (o, n) => {
             onClick: () => w("all"),
             onMouseEnter: () => v("all"),
             onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
@@ -7300,7 +7303,7 @@ const registerChaiLibrary = (o, n) => {
             onClick: () => w(k),
             onMouseEnter: () => v(k),
             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"}`,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === k || x === k ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(i(k.toLowerCase()))
           },
           `sidebar-${k}`
@@ -7314,7 +7317,7 @@ const registerChaiLibrary = (o, n) => {
       ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.map((k) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          m === "all" ? filter(values(A), { group: k }) : values(A),
+          h === "all" ? filter(values(A), { group: k }) : values(A),
           { hidden: !0 }
         ).map((j) => /* @__PURE__ */ jsx(
           CoreBlock,
@@ -7322,7 +7325,7 @@ const registerChaiLibrary = (o, n) => {
             parentId: r,
             position: a,
             block: j,
-            disabled: !canAcceptChildBlock(h, j.type) || !canBeNestedInside(h, j.type)
+            disabled: !canAcceptChildBlock(m, j.type) || !canBeNestedInside(m, j.type)
           },
           j.type
         )) })
@@ -7335,13 +7338,13 @@ const registerChaiLibrary = (o, n) => {
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission: h } = usePermissions();
+  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission: m } = usePermissions();
   useEffect(() => {
     i === "partials" && !g && c("library");
   }, [i, g, c]);
-  const m = useCallback(() => {
+  const h = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []), f = useChaiAddBlockTabs(), x = p && h(PERMISSIONS.IMPORT_HTML), b = useChaiLibraries().length > 0;
+  }, []), f = useChaiAddBlockTabs(), x = p && m(PERMISSIONS.IMPORT_HTML), b = useChaiLibraries().length > 0;
   return useEffect(() => {
     i === "library" && !b && c("core");
   }, [i, b, c]), /* @__PURE__ */ jsxs("div", { className: cn$2("flex h-full w-full flex-col overflow-hidden", o), children: [
@@ -7369,7 +7372,7 @@ const registerChaiLibrary = (o, n) => {
           b && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: r, position: a }) }),
           g && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           x ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(f, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close: m, parentId: r, position: a }) }, `panel-add-block-${v.id}`))
+          map(f, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${v.id}`))
         ]
       }
     )
@@ -7491,7 +7494,7 @@ const registerChaiSaveToLibrary = (o) => {
 }, CANNOT_COPY_BLOCKS = !navigator.clipboard, CopyPasteBlocks = () => {
   const [o] = useBlocksStore(), [n] = useSelectedBlockIds(), { pasteBlocks: r } = usePasteBlocks(), [, a, l] = useCopyBlocks(), { t: i } = useTranslation(), c = useSelectedBlock(), d = useCallback(() => {
     const p = n.map((u) => {
-      const g = o.find((h) => h._id === u);
+      const g = o.find((m) => m._id === u);
       return {
         id: u,
         data: g
@@ -7673,11 +7676,11 @@ const Input = ({ node: o }) => {
     }
   );
 }, currentAddSelection = atom(null), Node = memo(({ node: o, style: n, dragHandle: r }) => {
-  var P;
+  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 = (L) => {
-    L.stopPropagation(), !l.includes(m) && o.toggle();
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: B } = o, w = (L) => {
+    L.stopPropagation(), !l.includes(h) && o.toggle();
   }, E = (L) => {
     L.isInternal && (p = L.isOpen, L.isOpen && L.close());
   }, _ = (L) => {
@@ -7688,25 +7691,25 @@ const Input = ({ node: o }) => {
   }, C = () => {
     A(null);
   }, k = (L) => {
-    C(), L.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), B(L);
+    C(), L.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), B(L);
   };
   useEffect(() => {
     const L = setTimeout(() => {
-      y && !o.isOpen && !b && !l.includes(m) && o.toggle();
+      y && !o.isOpen && !b && !l.includes(h) && o.toggle();
     }, 500);
     return () => clearTimeout(L);
   }, [y, o, b]);
   const j = (L, D) => {
-    const O = c.contentDocument || c.contentWindow.document, R = O.querySelector(`[data-block-id=${L}]`);
-    R && R.setAttribute("data-drop", D);
-    const $ = R.getBoundingClientRect(), M = c.getBoundingClientRect();
-    $.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = R.offsetTop - M.top);
+    const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${L}]`);
+    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 = (L) => {
     C();
     const D = get(o, "parent.id");
     D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: L }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: L });
   };
-  if (m === ROOT_TEMP_KEY)
+  if (h === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
       /* @__PURE__ */ jsx("br", {}),
       d(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
@@ -7728,25 +7731,25 @@ const Input = ({ node: o }) => {
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => g(m),
-      onMouseLeave: () => h(),
+      onMouseEnter: () => g(h),
+      onMouseLeave: () => m(),
       onClick: k,
       style: n,
-      "data-node-id": m,
-      ref: l.includes(m) ? null : r,
+      "data-node-id": h,
+      ref: l.includes(h) ? null : r,
       onDragStart: () => E(o),
       onDragEnd: () => _(o),
       onDragOver: (L) => {
-        L.preventDefault(), j(m, "yes");
+        L.preventDefault(), j(h, "yes");
       },
       onDragLeave: (L) => {
-        L.preventDefault(), j(m, "no");
+        L.preventDefault(), j(h, "no");
       },
       onDrop: (L) => {
-        L.preventDefault(), j(m, "no");
+        L.preventDefault(), j(h, "no");
       },
       children: [
-        d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        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: (L) => {
@@ -7767,7 +7770,7 @@ const Input = ({ node: o }) => {
               y && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
               b && "opacity-20",
-              l.includes(m) ? "opacity-50" : "",
+              l.includes(h) ? "opacity-50" : "",
               I && x && "bg-primary/20 text-primary"
             ),
             children: [
@@ -7804,11 +7807,11 @@ const Input = ({ node: o }) => {
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                canAddChildBlock(f == null ? void 0 : f._type) && !l.includes(m) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(f == null ? void 0 : f._type) && !l.includes(h) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: h }),
                       className: "cursor-pointer rounded bg-transparent",
                       asChild: !0,
                       children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" })
@@ -7821,7 +7824,7 @@ const Input = ({ node: o }) => {
                     TooltipTrigger,
                     {
                       onClick: (L) => {
-                        L.stopPropagation(), i(m), o.isOpen && o.toggle();
+                        L.stopPropagation(), i(h), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent",
                       asChild: !0,
@@ -7830,7 +7833,7 @@ const Input = ({ node: o }) => {
                   ),
                   /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", side: "bottom", children: a("Hide block") })
                 ] }),
-                /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: m, children: /* @__PURE__ */ jsx(MoreVertical, { size: "15" }) })
+                /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: h, children: /* @__PURE__ */ jsx(MoreVertical, { size: "15" }) })
               ] })
             ]
           }
@@ -8095,9 +8098,9 @@ const Input = ({ node: o }) => {
     )
   ] });
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), h = (v) => {
+  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), m = (v) => {
     a(v);
-  }, m = () => {
+  }, h = () => {
     const v = l.find((B) => Object.keys(B)[0] === r);
     if (v) {
       const B = Object.values(v)[0];
@@ -8162,7 +8165,7 @@ const Input = ({ node: o }) => {
             "select",
             {
               value: r,
-              onChange: (v) => h(v.target.value),
+              onChange: (v) => m(v.target.value),
               className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
               children: [
                 /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
@@ -8177,7 +8180,7 @@ const Input = ({ node: o }) => {
             className: "w-full text-sm",
             disabled: r === "",
             variant: "default",
-            onClick: m,
+            onClick: h,
             children: g("Apply")
           }
         ) })
@@ -8671,14 +8674,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), h = useRef(null), m = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), m = useRef(null), h = useRef(null);
   useEffect(() => {
     var x;
-    (x = h.current) == null || x.focus();
+    (x = m.current) == null || x.focus();
   }, []);
   const f = (x) => {
     const { usage: y } = x || {};
-    !l && y && g(y), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    !l && y && g(y), h.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8696,14 +8699,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         Textarea,
         {
-          ref: h,
+          ref: m,
           value: i,
           onChange: (x) => c(x.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
           onKeyDown: (x) => {
-            x.key === "Enter" && (x.preventDefault(), m.current && clearTimeout(m.current), g(void 0), r("content", o, i, f));
+            x.key === "Enter" && (x.preventDefault(), h.current && clearTimeout(h.current), g(void 0), r("content", o, i, f));
           }
         }
       ),
@@ -8713,7 +8716,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              m.current && clearTimeout(m.current), g(void 0), r("content", o, i, f);
+              h.current && clearTimeout(h.current), g(void 0), r("content", o, i, f);
             },
             variant: "default",
             className: "w-fit",
@@ -8746,7 +8749,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         QuickPrompts,
         {
           onClick: (x) => {
-            m.current && clearTimeout(m.current), g(void 0), r("content", o, x, f);
+            h.current && clearTimeout(h.current), g(void 0), r("content", o, x, f);
           }
         }
       )
@@ -8756,13 +8759,13 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), h = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), m = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
-  const m = async () => {
+  const h = async () => {
     try {
-      d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), h.current.click();
+      d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), m.current.click();
     } catch (f) {
       u(f);
     } finally {
@@ -8778,7 +8781,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { ref: h, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsx(AccordionTrigger, { ref: m, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsx(
             Textarea,
@@ -8790,7 +8793,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               className: "mt-1 w-full",
               rows: 10,
               onKeyDown: (f) => {
-                f.key === "Enter" && (f.preventDefault(), m());
+                f.key === "Enter" && (f.preventDefault(), h());
               }
             }
           ),
@@ -8802,7 +8805,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: r.trim().length < 5,
-                onClick: () => m(),
+                onClick: () => h(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8831,7 +8834,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), m();
+                        a(""), h();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8892,7 +8895,7 @@ function AIChatPanel() {
   }, [o]), useEffect(() => {
     g.current && (g.current.style.height = "auto", g.current.style.height = `${Math.min(g.current.scrollHeight, 120)}px`);
   }, [r]);
-  const h = async () => {
+  const m = async () => {
     if (!r.trim() && !c) return;
     const b = {
       id: Date.now().toString(),
@@ -8909,8 +8912,8 @@ function AIChatPanel() {
       };
       n((B) => [...B, v]), i(!1), d(null);
     }, 1500);
-  }, m = (b) => {
-    b.key === "Enter" && !b.shiftKey && (b.preventDefault(), h());
+  }, h = (b) => {
+    b.key === "Enter" && !b.shiftKey && (b.preventDefault(), m());
   }, f = (b) => {
     var B;
     const v = (B = b.target.files) == null ? void 0 : B[0];
@@ -8983,7 +8986,7 @@ function AIChatPanel() {
             ref: g,
             value: r,
             onChange: (b) => a(b.target.value),
-            onKeyDown: m,
+            onKeyDown: h,
             placeholder: "Ask something...",
             className: "max-h-[120px] min-h-[40px] resize-none border-0 bg-muted/50 py-2.5 pr-10 focus-visible:ring-1"
           }
@@ -9005,7 +9008,7 @@ function AIChatPanel() {
         {
           size: "sm",
           className: "h-10 px-3",
-          onClick: h,
+          onClick: m,
           disabled: l || !r.trim() && !c,
           children: [
             /* @__PURE__ */ jsx(Send, { className: "mr-1 h-4 w-4" }),
@@ -9113,18 +9116,18 @@ 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), [m, h] = useState(""), f = useRef(null), x = useRef(null), y = usePageExternalData();
   useEffect(() => {
     l(n);
   }, [n]);
   const b = () => {
     if (i.startsWith("@")) {
-      m("Attribute keys cannot start with '@'");
+      h("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
       const S = [...a, { key: i, value: d }];
-      r(S), l(a), c(""), p(""), m("");
+      r(S), l(a), c(""), p(""), h("");
     }
   }, v = (S) => {
     const A = a.filter((N, C) => C !== S);
@@ -9133,33 +9136,33 @@ const AiAssistant = () => {
     g(S), c(a[S].key), p(a[S].value);
   }, w = () => {
     if (i.startsWith("@")) {
-      m("Attribute keys cannot start with '@'");
+      h("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("");
+      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), h("");
     }
   }, E = (S) => {
     S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : b());
   }, _ = useCallback((S) => {
     const A = (k) => /[.,!?;:]/.test(k), N = (k, j, T) => {
-      let I = "", P = "";
+      let I = "", R = "";
       const L = j > 0 ? k[j - 1] : "", D = j < k.length ? k[j] : "";
-      return j > 0 && (L === "." || !A(L) && L !== " ") && (I = " "), j < k.length && !A(D) && D !== " " && (P = " "), {
-        text: I + T + P,
+      return j > 0 && (L === "." || !A(L) && L !== " ") && (I = " "), j < k.length && !A(D) && D !== " " && (R = " "), {
+        text: I + T + R,
         prefixLength: I.length,
-        suffixLength: P.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: R } = N(j, k, O), $ = j.slice(0, k) + R + j.slice(T);
+        const O = `{{${S}}}`, { text: P } = N(j, k, O), $ = j.slice(0, k) + P + j.slice(T);
         p($);
         return;
       }
-      const P = `{{${S}}}`, { text: L } = N(j, k, P), D = j.slice(0, k) + L + j.slice(k);
+      const R = `{{${S}}}`, { text: L } = N(j, k, R), D = j.slice(0, k) + L + j.slice(k);
       p(D);
     }
   }, []);
@@ -9214,7 +9217,7 @@ const AiAssistant = () => {
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
-          h && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: h })
+          m && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: m })
         ]
       }
     ),
@@ -9345,9 +9348,9 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     r("outline");
   });
-  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), h = useCallback((S) => {
+  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = useCallback((S) => {
     S.preventDefault();
-  }, []), m = useCallback(
+  }, []), h = useCallback(
     (S) => {
       r(n === S ? null : S);
     },
@@ -9376,15 +9379,15 @@ const RootLayout = () => {
   }, [n, x]);
   const _ = useCallback(
     (S) => {
-      m(S);
+      h(S);
     },
-    [m]
+    [h]
   );
   return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        onContextMenu: h,
+        onContextMenu: m,
         className: "flex h-screen max-h-full flex-col bg-background text-foreground",
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
@@ -9472,19 +9475,27 @@ 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: E
+          }) }) })
+        ]
+      }
+    ) }),
     " ",
-    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), {
@@ -9547,18 +9558,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;
@@ -9613,17 +9641,17 @@ const FEATURE_TOGGLES = {
   for (const i of n.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (m, ...f) => m.read(...f), p = (m, ...f) => m.write(...f), u = (m, f) => {
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (h, ...f) => h.read(...f), p = (h, ...f) => h.write(...f), u = (h, f) => {
   var x;
-  return (x = m.unstable_onInit) == null ? void 0 : x.call(m, f);
-}, g = (m, f) => {
+  return (x = h.unstable_onInit) == null ? void 0 : x.call(h, f);
+}, g = (h, f) => {
   var x;
-  return (x = m.onMount) == null ? void 0 : x.call(m, f);
-}, ...h) => {
-  const m = h[0] || ((A) => {
+  return (x = h.onMount) == null ? void 0 : x.call(h, f);
+}, ...m) => {
+  const h = m[0] || ((A) => {
     let N = o.get(A);
     return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, S)), N;
-  }), f = h[1] || (() => {
+  }), f = m[1] || (() => {
     let A, N;
     const C = (k) => {
       try {
@@ -9642,10 +9670,10 @@ const FEATURE_TOGGLES = {
     } while (a.size || i.size || l.size);
     if (A)
       throw N;
-  }), x = h[2] || (() => {
+  }), x = m[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);
+      const j = k[k.length - 1], T = h(j);
       if (C.has(j)) {
         k.pop();
         continue;
@@ -9660,22 +9688,22 @@ const FEATURE_TOGGLES = {
     }
     for (let j = A.length - 1; j >= 0; --j) {
       const [T, I] = A[j];
-      let P = !1;
+      let R = !1;
       for (const L of I.d.keys())
         if (L !== T && a.has(L)) {
-          P = !0;
+          R = !0;
           break;
         }
-      P && (y(T), B(T)), r.delete(T);
+      R && (y(T), B(T)), r.delete(T);
     }
-  }), y = h[3] || ((A) => {
+  }), y = m[3] || ((A) => {
     var N, C;
-    const k = m(A);
+    const k = h(A);
     if (isAtomStateInitialized(k) && (n.has(A) && r.get(A) !== k.n || Array.from(k.d).every(
-      ([R, $]) => (
+      ([P, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        y(R).n === $
+        y(P).n === $
       )
     )))
       return k;
@@ -9683,34 +9711,34 @@ const FEATURE_TOGGLES = {
     let j = !0;
     const T = () => {
       n.has(A) && (B(A), x(), f());
-    }, I = (R) => {
+    }, I = (P) => {
       var $;
-      if (isSelfAtom(A, R)) {
-        const U = m(R);
+      if (isSelfAtom(A, P)) {
+        const U = h(P);
         if (!isAtomStateInitialized(U))
-          if (hasInitialValue(R))
-            setAtomStateValueOrPromise(R, R.init, m);
+          if (hasInitialValue(P))
+            setAtomStateValueOrPromise(P, P.init, h);
           else
             throw new Error("no atom init");
         return returnAtomValue(U);
       }
-      const M = y(R);
+      const M = y(P);
       try {
         return returnAtomValue(M);
       } finally {
-        k.d.set(R, M.n), isPendingPromise(k.v) && addPendingPromiseToDependency(A, k.v, M), ($ = n.get(R)) == null || $.t.add(A), j || T();
+        k.d.set(P, M.n), isPendingPromise(k.v) && addPendingPromiseToDependency(A, k.v, M), ($ = n.get(P)) == null || $.t.add(A), j || T();
       }
     };
-    let P, L;
+    let R, L;
     const D = {
       get signal() {
-        return P || (P = new AbortController()), P.signal;
+        return R || (R = new AbortController()), R.signal;
       },
       get setSelf() {
-        return !L && isActuallyWritableAtom(A) && (L = (...R) => {
+        return !L && isActuallyWritableAtom(A) && (L = (...P) => {
           if (!j)
             try {
-              return v(A, ...R);
+              return v(A, ...P);
             } finally {
               x(), f();
             }
@@ -9718,36 +9746,36 @@ const FEATURE_TOGGLES = {
       }
     }, O = k.n;
     try {
-      const R = d(A, I, D);
-      return setAtomStateValueOrPromise(A, R, m), isPromiseLike$1(R) && ((N = R.onCancel) == null || N.call(R, () => P == null ? void 0 : P.abort()), R.then(
+      const P = d(A, I, D);
+      return setAtomStateValueOrPromise(A, P, h), isPromiseLike$1(P) && ((N = P.onCancel) == null || N.call(P, () => R == null ? void 0 : R.abort()), P.then(
         T,
         T
       )), k;
-    } catch (R) {
-      return delete k.v, k.e = R, ++k.n, k;
+    } catch (P) {
+      return delete k.v, k.e = P, ++k.n, k;
     } 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));
     }
-  }), b = h[4] || ((A) => {
+  }), b = m[4] || ((A) => {
     const N = [A];
     for (; N.length; ) {
-      const C = N.pop(), k = m(C);
+      const C = N.pop(), k = h(C);
       for (const j of getMountedOrPendingDependents(C, k, n)) {
-        const T = m(j);
+        const T = h(j);
         r.set(j, T.n), N.push(j);
       }
     }
-  }), v = h[5] || ((A, ...N) => {
+  }), v = m[5] || ((A, ...N) => {
     let C = !0;
     const k = (T) => returnAtomValue(y(T)), j = (T, ...I) => {
-      var P;
-      const L = m(T);
+      var R;
+      const L = h(T);
       try {
         if (isSelfAtom(A, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
           const D = L.n, O = I[0];
-          setAtomStateValueOrPromise(T, O, m), B(T), D !== L.n && (a.add(T), (P = c.c) == null || P.call(c, T), b(T));
+          setAtomStateValueOrPromise(T, O, h), B(T), D !== L.n && (a.add(T), (R = c.c) == null || R.call(c, T), b(T));
           return;
         } else
           return v(T, ...I);
@@ -9760,13 +9788,13 @@ const FEATURE_TOGGLES = {
     } finally {
       C = !1;
     }
-  }), B = h[6] || ((A) => {
+  }), B = m[6] || ((A) => {
     var N;
-    const C = m(A), k = n.get(A);
+    const C = h(A), k = n.get(A);
     if (k && !isPendingPromise(C.v)) {
       for (const [j, T] of C.d)
         if (!k.d.has(j)) {
-          const I = m(j);
+          const I = h(j);
           w(j).t.add(A), k.d.add(j), T !== I.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
         }
       for (const j of k.d || [])
@@ -9776,9 +9804,9 @@ const FEATURE_TOGGLES = {
           T == null || T.t.delete(A);
         }
     }
-  }), w = h[7] || ((A) => {
+  }), w = m[7] || ((A) => {
     var N;
-    const C = m(A);
+    const C = h(A);
     let k = n.get(A);
     if (!k) {
       y(A);
@@ -9791,19 +9819,19 @@ const FEATURE_TOGGLES = {
       }, n.set(A, k), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
         const j = () => {
           let T = !0;
-          const I = (...P) => {
+          const I = (...R) => {
             try {
-              return v(A, ...P);
+              return v(A, ...R);
             } finally {
               T || (x(), f());
             }
           };
           try {
-            const P = g(A, I);
-            P && (k.u = () => {
+            const R = g(A, I);
+            R && (k.u = () => {
               T = !0;
               try {
-                P();
+                R();
               } finally {
                 T = !1;
               }
@@ -9816,9 +9844,9 @@ const FEATURE_TOGGLES = {
       }
     }
     return k;
-  }), E = h[8] || ((A) => {
+  }), E = m[8] || ((A) => {
     var N;
-    const C = m(A);
+    const C = h(A);
     let k = n.get(A);
     if (k && !k.l.size && !Array.from(k.t).some((j) => {
       var T;
@@ -9847,7 +9875,7 @@ const FEATURE_TOGGLES = {
     u,
     g,
     // building-block functions
-    m,
+    h,
     f,
     x,
     y,