@chaibuilder/sdk 3.1.16 → 3.1.18

package/dist/{index-Ci2P5Z-L.js → index-D_FeLvM5.js}

@@ -223,23 +223,23 @@ 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)) {
+    if (u && u.content !== void 0 && u.content !== "" && !o.some((m) => m._parent === r)) {
       const f = {
         _id: generateUUID(),
         _parent: r,
         _type: "Text",
         content: u.content
       };
-      Object.keys(u).forEach((m) => {
-        m.startsWith("content-") && (f[m] = u[m]);
-      }), l.unshift(f), i = i.map((m) => {
-        if (m._id === r) {
-          const x = { ...m, content: "" };
+      Object.keys(u).forEach((h) => {
+        h.startsWith("content-") && (f[h] = u[h]);
+      }), l.unshift(f), i = i.map((h) => {
+        if (h._id === r) {
+          const x = { ...h, content: "" };
           return Object.keys(x).forEach((b) => {
             b.startsWith("content-") && (x[b] = "");
           }), x;
         }
-        return m;
+        return h;
       });
     }
   }
@@ -272,13 +272,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;
 }
@@ -319,8 +319,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;
@@ -337,7 +337,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;
@@ -361,22 +361,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((f) => f._id !== d);
-      if (h && h._type === "Text") {
-        const f = r.find((m) => m._id === u);
-        f && "content" in f && (r = r.map((m) => {
-          if (m._id === u) {
-            const x = { ...m, content: h.content };
-            return Object.keys(h).forEach((b) => {
-              b.startsWith("content-") && (x[b] = h[b]);
+      const m = g.find((f) => f._id !== d);
+      if (m && m._type === "Text") {
+        const f = r.find((h) => h._id === u);
+        f && "content" in f && (r = r.map((h) => {
+          if (h._id === u) {
+            const x = { ...h, content: m.content };
+            return Object.keys(m).forEach((b) => {
+              b.startsWith("content-") && (x[b] = m[b]);
             }), x;
           }
-          return m;
-        }), a.push(h._id));
+          return h;
+        }), a.push(m._id));
       }
     }
   });
@@ -458,34 +458,34 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
     status: "idle",
     props: {},
     error: void 0
-  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (m) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), h = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
+  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (h) => ({})), 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((x) => ({ ...x, status: "loading", props: {} }));
-        const m = a({ block: o });
-        if (!isObject(m))
+        const h = a({ block: o });
+        if (!isObject(h))
           throw new Error("mockDataProvider should return an object");
-        i((x) => ({ ...x, status: "loaded", props: m }));
+        i((x) => ({ ...x, status: "loaded", props: h }));
       }
       return;
     }
-    n === "live" && (!g && !h || (i((m) => ({ ...m, status: "loading", props: {} })), d({ block: o }).then((m = {}) => {
+    n === "live" && (!g && !m || (i((h) => ({ ...h, status: "loading", props: {} })), d({ block: o }).then((h = {}) => {
       g ? (p((x) => ({
         ...x,
         [o._id]: {
           status: "loaded",
-          props: get(m, "items", []),
+          props: get(h, "items", []),
           repeaterItems: o.repeaterItems
         }
-      })), i((x) => ({ ...x, status: "loaded", props: { totalItems: get(m, "totalItems") } })), c([o._id], { totalItems: get(m, "totalItems") })) : i((x) => ({ ...x, status: "loaded", props: isObject(m) ? m : {} }));
-    }).catch((m) => {
+      })), i((x) => ({ ...x, status: "loaded", props: { totalItems: get(h, "totalItems") } })), c([o._id], { totalItems: get(h, "totalItems") })) : i((x) => ({ ...x, status: "loaded", props: isObject(h) ? h : {} }));
+    }).catch((h) => {
       g ? (p((x) => ({
         ...x,
-        [o._id]: { status: "error", error: m, props: [] }
-      })), i((x) => ({ ...x, status: "error", error: m, props: {} }))) : i((x) => ({ ...x, status: "error", error: m, props: {} }));
+        [o._id]: { status: "error", error: h, props: [] }
+      })), i((x) => ({ ...x, status: "error", error: h, props: {} }))) : i((x) => ({ ...x, status: "error", error: h, props: {} }));
     })));
-  }, [o == null ? void 0 : o._id, u, g, h, a, n]), {
+  }, [o == null ? void 0 : o._id, u, g, m, a, n]), {
     $loading: get(l, "status") === "loading",
     ...o ? get(l, "props", {}) : {}
   };
@@ -638,19 +638,19 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
     return console.warn(`Failed to get block definition for type: ${r._type}`, a), !1;
   }
 }) : !1, useSavePage = () => {
-  const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (m) => {
+  const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (h) => {
   }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: d, fallbackLang: p } = useLanguages(), [u] = useIsPageLoaded(), g = () => {
-    const m = l();
-    return !d || d === p ? !1 : checkMissingTranslations(m.blocks || [], d);
+    const h = l();
+    return !d || d === p ? !1 : checkMissingTranslations(h.blocks || [], d);
   };
   return { savePage: useThrottledCallback(
-    async (m = !1, x = !1) => {
+    async (h = !1, x = !1) => {
       if (!x && (!c("save_page") || !u))
         return;
       n("SAVING"), a("SAVING");
       const b = l();
       return await r({
-        autoSave: m,
+        autoSave: h,
         blocks: b.blocks,
         theme: i,
         needTranslations: g()
@@ -661,8 +661,8 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
     [l, n, i, r, a, u],
     3e3
     // save only every 5 seconds
-  ), savePageAsync: async (m = !1) => {
-    if (!m && (!c("save_page") || !u))
+  ), savePageAsync: async (h = !1) => {
+    if (!h && (!c("save_page") || !u))
       return;
     n("SAVING"), a("SAVING");
     const x = l();
@@ -727,13 +727,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   return {
     moveBlocks: (x, b, y) => {
-      const k = map(x, (v) => {
+      const S = map(x, (v) => {
         const E = n.find((A) => A._id === v)._parent || null, C = n.filter((A) => E ? A._parent === E : !A._parent).map((A) => A._id).indexOf(v);
         return { _id: v, oldParent: E, oldPosition: C };
-      }), S = k.find(({ _id: v }) => v === x[0]);
-      S && S.oldParent === b && S.oldPosition === y || (i(x, b, y), o({
-        undo: () => each(k, ({ _id: v, oldParent: _, oldPosition: E }) => {
-          i([v], _, E);
+      }), k = S.find(({ _id: v }) => v === x[0]);
+      k && k.oldParent === b && k.oldPosition === y || (i(x, b, y), o({
+        undo: () => each(S, ({ _id: v, oldParent: B, oldPosition: E }) => {
+          i([v], B, E);
         }),
         redo: () => i(x, b, y)
       }));
@@ -745,27 +745,27 @@ const undoRedoStateAtom = atom({
       });
     },
     removeBlocks: (x) => {
-      var S;
-      const b = (S = first(x)) == null ? void 0 : S._parent, k = n.filter((v) => b ? v._parent === b : !v._parent).indexOf(first(x));
+      var k;
+      const b = (k = first(x)) == null ? void 0 : k._parent, S = n.filter((v) => b ? v._parent === b : !v._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, b, k),
+        undo: () => a(x, b, S),
         redo: () => l(map(x, "_id"))
       });
     },
     updateBlocks: (x, b, y) => {
-      let k = [];
+      let S = [];
       if (y)
-        k = map(x, (S) => ({ _id: S, ...y }));
+        S = map(x, (k) => ({ _id: k, ...y }));
       else {
-        const S = keys(b);
-        k = map(x, (v) => {
-          const _ = n.find((I) => I._id === v), E = { _id: v };
-          return each(S, (I) => E[I] = _[I]), E;
+        const k = keys(b);
+        S = map(x, (v) => {
+          const B = n.find((I) => I._id === v), E = { _id: v };
+          return each(k, (I) => E[I] = B[I]), E;
         });
       }
-      c(map(x, (S) => ({ _id: S, ...b }))), o({
-        undo: () => c(k),
-        redo: () => c(map(x, (S) => ({ _id: S, ...b })))
+      c(map(x, (k) => ({ _id: k, ...b }))), o({
+        undo: () => c(S),
+        redo: () => c(map(x, (k) => ({ _id: k, ...b })))
       });
     },
     updateBlocksRuntime: (x, b) => {
@@ -780,8 +780,8 @@ const undoRedoStateAtom = atom({
     updateMultipleBlocksProps: (x) => {
       let b = [];
       b = map(x, (y) => {
-        const k = keys(y), S = n.find((_) => _._id === y._id), v = {};
-        return each(k, (_) => v[_] = S[_]), v;
+        const S = keys(y), k = n.find((B) => B._id === y._id), v = {};
+        return each(S, (B) => v[B] = k[B]), v;
       }), c(x), o({
         undo: () => c(b),
         redo: () => c(x)
@@ -821,12 +821,12 @@ const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var f;
-      for (let m = 0; m < i.length; m++) {
-        const { _id: x } = i[m];
-        i[m]._id = generateUUID();
+      for (let h = 0; h < i.length; h++) {
+        const { _id: x } = i[h];
+        i[h]._id = generateUUID();
         const b = filter(i, { _parent: x });
         for (let y = 0; y < b.length; y++)
-          b[y]._parent = i[m]._id;
+          b[y]._parent = i[h]._id;
       }
       const p = first(i);
       let u, g;
@@ -847,8 +847,8 @@ const useAddBlock = () => {
         ...has(i, "_name") && { _name: i._name },
         ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
-      let h, f;
-      return c && (h = find(o, { _id: c }), g._parent = c, f = c), !canAcceptChildBlock(h == null ? void 0 : h._type, g._type) && h && (g._parent = h._parent, f = h._parent), r([g], f, d), n([g._id]), g;
+      let m, f;
+      return c && (m = find(o, { _id: c }), g._parent = c, f = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, f = m._parent), r([g], f, d), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2273,19 +2273,19 @@ const getBlockWithChildren = (o, n) => {
     const l = ["_id", "_type", "_parent"], i = pick(a, l), c = getRegisteredChaiBlock(a._type), d = {}, p = get(c, "aiProps", []);
     for (const u in a)
       if (!l.includes(u) && p.includes(u)) {
-        const g = get(a, `${u}-${n}`, ""), h = get(a, u, "");
-        d[u] = isString(g) && g.trim() || h, r && (d[u] = h);
+        const g = get(a, `${u}-${n}`, ""), m = get(a, u, "");
+        d[u] = isString(g) && g.trim() || m, r && (d[u] = m);
       }
     return isEmpty(d) ? !1 : (has(i, "_parent") && isEmpty(i._parent) && delete i._parent, { ...i, ...d });
   })
 ), 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 = (f, m) => {
-    const x = cloneDeep(m.find((b) => b._id === f));
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (f, h) => {
+    const x = cloneDeep(h.find((b) => b._id === f));
     for (const b in x) {
       const y = x[b];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: k, classes: S } = getSplitChaiClasses(y);
-        x[b] = compact(flattenDeep([k, S])).join(" ");
+        const { baseClasses: S, classes: k } = getSplitChaiClasses(y);
+        x[b] = compact(flattenDeep([S, k])).join(" ");
       } else
         b !== "_id" && delete x[b];
     }
@@ -2293,24 +2293,24 @@ const getBlockWithChildren = (o, n) => {
   };
   return {
     askAi: useCallback(
-      async (f, m, x, b) => {
+      async (f, h, x, b) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, k = x.toLowerCase().includes("translate the content"), S = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(m, d)), p, k) : [h(m, d)], v = await l(f, addLangToPrompt(x, g, f), S, y), { blocks: _, error: E } = v;
+            const y = p === u ? "" : p, S = x.toLowerCase().includes("translate the content"), k = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p, S) : [m(h, d)], v = await l(f, addLangToPrompt(x, g, f), k, y), { blocks: B, error: E } = v;
             if (E) {
               a(E);
               return;
             }
             if (f === "styles") {
-              const I = _.map((C) => {
+              const I = B.map((C) => {
                 for (const A in C)
                   A !== "_id" && (C[A] = `${STYLES_KEY},${C[A]}`);
                 return C;
               });
               c(I);
             } else
-              i(_);
+              i(B);
             b && b(v);
           } catch (y) {
             a(y);
@@ -2388,7 +2388,7 @@ const getBlockWithChildren = (o, n) => {
   return [o, a];
 }, copiedBlockIdsAtom = atom([]), useCopyBlocks = () => {
   const [o] = useBlocksStore(), [n, r] = useAtom$1(copiedBlockIdsAtom), a = useSetAtom$1(cutBlockIdsAtom), { getPartailBlocks: l } = usePartialBlocksStore(), i = useBuilderProp("flags.copyPaste", !0), c = useCallback(
-    (p) => p.some((u) => getDuplicatedBlocks(o, u, null).some((h) => h._type === "PartialBlock" || h._type === "GlobalBlock")),
+    (p) => p.some((u) => getDuplicatedBlocks(o, u, null).some((m) => m._type === "PartialBlock" || m._type === "GlobalBlock")),
     [o]
   ), d = useCallback(
     async (p, u = !1) => {
@@ -2396,18 +2396,18 @@ const getBlockWithChildren = (o, n) => {
         if (isEmpty(p)) return;
         r(p), a([]);
         const g = {
-          _chai_copied_blocks: p.flatMap((h) => {
-            const f = getDuplicatedBlocks(o, h, null);
+          _chai_copied_blocks: p.flatMap((m) => {
+            const f = getDuplicatedBlocks(o, m, null);
             if (!u)
               return f;
-            let m = [];
+            let h = [];
             for (const x of f)
               if (x._type === "PartialBlock" || x._type === "GlobalBlock") {
                 let b = l(x.partialBlockId);
-                x._parent && (b == null ? void 0 : b.length) > 0 && (b = b.map((y) => (isEmpty(y._parent) && set(y, "_parent", x._parent), y))), m = [...m, ...b];
+                x._parent && (b == null ? void 0 : b.length) > 0 && (b = b.map((y) => (isEmpty(y._parent) && set(y, "_parent", x._parent), y))), h = [...h, ...b];
               } else
-                m.push(x);
-            return m;
+                h.push(x);
+            return h;
           })
         };
         if (!i)
@@ -2454,8 +2454,8 @@ const getBlockWithChildren = (o, n) => {
         const g = filter(
           o,
           (f) => isString(l) ? f._parent === l : !f._parent
-        ).indexOf(d) + 1, h = getDuplicatedBlocks(o, c, l);
-        r(h, l, g), i.push(get(h, "0._id", ""));
+        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
+        r(m, l, g), i.push(get(m, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -2584,14 +2584,14 @@ 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 f = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), m = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
-      u = u.replace(m, " ").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 f = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), m = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
-      g = g.replace(m, " ").replace(/\s+/g, " ").trim();
+    return each(p, (m) => {
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      u = u.replace(h, " ").replace(/\s+/g, " ").trim();
+      const x = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(m.split(":").pop().trim());
+    }), each(p, (m) => {
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      g = g.replace(h, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
@@ -2747,9 +2747,9 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
       o.tagName = d, o.attributes = [], o.attributes.push({ key: "chai-type", value: c });
       const p = getRegisteredChaiBlock(c), u = n.find((g) => g._id === (l == null ? void 0 : l.value));
       if (u && o.attributes.push(
-        ...Object.entries(u).filter(([g]) => !["_id", "_type", "_parent", "_index", "_name"].includes(g)).map(([g, h]) => ({
+        ...Object.entries(u).filter(([g]) => !["_id", "_type", "_parent", "_index", "_name"].includes(g)).map(([g, m]) => ({
           key: g,
-          value: typeof h == "string" ? h : JSON.stringify(h)
+          value: typeof m == "string" ? m : JSON.stringify(m)
         }))
       ), p && (p != null && p.description) && o.attributes.push({
         key: "about-this-component",
@@ -2783,7 +2783,7 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
       if (!n) return "";
       const a = r != null && r.blockId ? `[data-block-id="${r.blockId}"]` : "#canvas", l = (g = (u = n.contentDocument) == null ? void 0 : u.querySelector(a)) == null ? void 0 : g[a === "#canvas" ? "innerHTML" : "outerHTML"];
       if (!l) return "";
-      const d = parse(l).map(cleanNode).filter((h) => h !== null).map((h) => transformNode(h, o, r));
+      const d = parse(l).map(cleanNode).filter((m) => m !== null).map((m) => transformNode(m, o, r));
       let p = stringify(d);
       return p = p.replace(/#styles:,/g, "#styles:"), p.replace(/\s+/g, " ").trim();
     },
@@ -2797,13 +2797,13 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
   const i = filter(n, { _type: r._type }), c = pick(r, l);
   return each(c, (d, p) => {
     const u = find(i, (g) => {
-      var m;
-      const h = typeof g[p] == "string" ? (m = g[p]) == null ? void 0 : m.trim().toLowerCase() : JSON.stringify(g[p]), f = typeof d == "string" ? d.trim().toLowerCase() : JSON.stringify(d);
-      return h === f;
+      var h;
+      const m = typeof g[p] == "string" ? (h = g[p]) == null ? void 0 : h.trim().toLowerCase() : JSON.stringify(g[p]), f = typeof d == "string" ? d.trim().toLowerCase() : JSON.stringify(d);
+      return m === f;
     });
     if (u) {
-      const g = filter(Object.keys(u), (f) => startsWith(f, `${p}-`)), h = pick(u, g);
-      r = { ...r, ...h };
+      const g = filter(Object.keys(u), (f) => startsWith(f, `${p}-`)), m = pick(u, g);
+      r = { ...r, ...m };
     }
   }), r;
 }), useHtmlToBlocks = () => {
@@ -2885,7 +2885,7 @@ const getAllDescendantIds = (o, n) => {
 }, replaceBlock = (o, n, r) => {
   const a = find(o, { _id: n });
   if (!a) return o;
-  const l = o.findIndex((h) => h._id === n), i = getAllDescendantIds(o, n), c = /* @__PURE__ */ new Set([n, ...i]), d = o.filter((h) => !c.has(h._id)), p = new Set(r.map((h) => h._id)), u = r.map((h) => !h._parent || !p.has(h._parent) ? { ...h, _parent: a._parent } : h);
+  const l = o.findIndex((m) => m._id === n), i = getAllDescendantIds(o, n), c = /* @__PURE__ */ new Set([n, ...i]), d = o.filter((m) => !c.has(m._id)), p = new Set(r.map((m) => m._id)), u = r.map((m) => !m._parent || !p.has(m._parent) ? { ...m, _parent: a._parent } : m);
   return [
     ...d.slice(0, l),
     ...u,
@@ -2980,12 +2980,12 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), ScalePerc
   // Export Code
   OPEN_EXPORT_CODE: "OPEN_EXPORT_CODE"
 }, 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 f = { _id: c || "", position: d == null ? void 0 : d.length };
-      h === "BEFORE" ? f.position = Math.max(u, 0) : h === "AFTER" && (f.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, f);
+      m === "BEFORE" ? f.position = Math.max(u, 0) : m === "AFTER" && (f.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, f);
     }
   };
   return l(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -3010,7 +3010,7 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), ScalePerc
 let isDragging = !1;
 const setIsDragging = (o) => {
   isDragging = o;
-};
+}, canvasRenderKeyAtom = atom(0);
 let lastDragHighlighted = null, floatingLabel = null;
 function createFloatingLabel(o, n) {
   const r = o.getAttribute("data-block-name"), a = o.getAttribute("data-block-type"), l = r || a || "Container", i = n.createElement("div");
@@ -3046,7 +3046,7 @@ const useDragParentHighlight = () => {
     lastDragHighlighted
   };
 }, useBlockDragEnd = () => {
-  const [, o] = useAtom$1(dragAndDropAtom), [, n] = useAtom$1(dropIndicatorAtom), [r] = useCanvasIframe(), { clearParentHighlight: a } = useDragParentHighlight(), l = r == null ? void 0 : r.contentDocument;
+  const [, o] = useAtom$1(dragAndDropAtom), [, n] = useAtom$1(dropIndicatorAtom), [r] = useCanvasIframe(), { clearParentHighlight: a } = useDragParentHighlight(), [l, i] = useAtom$1(canvasRenderKeyAtom), c = r == null ? void 0 : r.contentDocument;
   return useCallback(() => {
     o(null), n({
       isVisible: !1,
@@ -3058,10 +3058,10 @@ const useDragParentHighlight = () => {
       left: 0,
       width: 0,
       height: 0
-    }), removeDropTargetAttributes$2(l), a(), l && l.querySelectorAll("[data-dragging]").forEach((c) => {
-      c.style.opacity = "", c.removeAttribute("data-dragging");
-    }), setIsDragging(!1);
-  }, [o, n, l, a]);
+    }), removeDropTargetAttributes$2(c), a(), c && c.querySelectorAll("[data-dragging]").forEach((p) => {
+      p.removeAttribute("data-dragging");
+    }), setIsDragging(!1), i(l + 1);
+  }, [o, n, c, a, l, i]);
 };
 function removeDropTargetAttributes$2(o) {
   if (!o) return;
@@ -3159,13 +3159,13 @@ function detectGapZone(o, n, r, a) {
         return a === "vertical" ? u.top - g.top : u.left - g.left;
       });
       for (let d = 0; d < c.length - 1; d++) {
-        const p = c[d], u = c[d + 1], g = p.getBoundingClientRect(), h = u.getBoundingClientRect();
+        const p = c[d], u = c[d + 1], g = p.getBoundingClientRect(), m = u.getBoundingClientRect();
         if (a === "vertical") {
-          const f = g.bottom, m = h.top, x = m - f, b = r >= f && r <= m, y = n >= Math.min(g.left, h.left) && n <= Math.max(g.right, h.right);
+          const f = g.bottom, h = m.top, x = h - f, b = r >= f && r <= h, y = n >= Math.min(g.left, m.left) && n <= Math.max(g.right, m.right);
           if (b && y && x >= ZONE_CONFIG.GAP_THRESHOLD)
             return { before: p, after: u };
         } else {
-          const f = g.right, m = h.left, x = m - f, b = n >= f && n <= m, y = r >= Math.min(g.top, h.top) && r <= Math.max(g.bottom, h.bottom);
+          const f = g.right, h = m.left, x = h - f, b = n >= f && n <= h, y = r >= Math.min(g.top, m.top) && r <= Math.max(g.bottom, m.bottom);
           if (b && y && x >= ZONE_CONFIG.GAP_THRESHOLD)
             return { before: p, after: u };
         }
@@ -3174,12 +3174,12 @@ function detectGapZone(o, n, r, a) {
     for (let c = 0; c < l.length - 1; c++) {
       const d = l[c], p = l[c + 1], u = d.getBoundingClientRect(), g = p.getBoundingClientRect();
       if (a === "vertical") {
-        const h = u.bottom, f = g.top, m = f - h, x = r >= h && r <= f, b = n >= Math.min(u.left, g.left) && n <= Math.max(u.right, g.right);
-        if (x && b && m >= ZONE_CONFIG.GAP_THRESHOLD)
+        const m = u.bottom, f = g.top, h = f - m, x = r >= m && r <= f, b = n >= Math.min(u.left, g.left) && n <= Math.max(u.right, g.right);
+        if (x && b && h >= ZONE_CONFIG.GAP_THRESHOLD)
           return { before: d, after: p };
       } else {
-        const h = u.right, f = g.left, m = f - h, x = n >= h && n <= f, b = r >= Math.min(u.top, g.top) && r <= Math.max(u.bottom, g.bottom);
-        if (x && b && m >= ZONE_CONFIG.GAP_THRESHOLD)
+        const m = u.right, f = g.left, h = f - m, x = n >= m && n <= f, b = r >= Math.min(u.top, g.top) && r <= Math.max(u.bottom, g.bottom);
+        if (x && b && h >= ZONE_CONFIG.GAP_THRESHOLD)
           return { before: d, after: p };
       }
     }
@@ -3251,23 +3251,23 @@ function calculateElementZone(o, n, r, a, l) {
   }
 }
 function detectDropZone(o, n, r, a, l) {
-  var v, _, E, I;
+  var v, B, E, I;
   const i = o.getAttribute("data-block-id"), c = o.getAttribute("data-block-type") || "Box";
   if (!i)
     return null;
   let d = o.parentElement;
   for (; d && !d.hasAttribute("data-block-id"); )
     d = d.parentElement;
-  const p = i === "canvas" ? i : d == null ? void 0 : d.getAttribute("data-block-id"), u = d ? getOrientation(d) : "vertical", g = getOrientation(o), h = isLeafBlock(c), f = !h && canAcceptChildBlock(c, a), m = ((v = l.defaultView) == null ? void 0 : v.scrollY) || 0, x = ((_ = l.defaultView) == null ? void 0 : _.scrollX) || 0;
+  const p = i === "canvas" ? i : d == null ? void 0 : d.getAttribute("data-block-id"), u = d ? getOrientation(d) : "vertical", g = getOrientation(o), m = isLeafBlock(c), f = !m && canAcceptChildBlock(c, a), h = ((v = l.defaultView) == null ? void 0 : v.scrollY) || 0, x = ((B = l.defaultView) == null ? void 0 : B.scrollX) || 0;
   if (i === "canvas" && hasChildBlocks(o)) {
     const C = getChildBlocks(o), A = C[C.length - 1];
     if (A) {
-      const w = A.getBoundingClientRect(), B = o.getBoundingClientRect(), j = window.getComputedStyle(o), N = parseFloat(j.paddingLeft) || 0, L = parseFloat(j.paddingRight) || 0, D = B.width - N - L, P = B.left + x + N;
+      const w = A.getBoundingClientRect(), j = o.getBoundingClientRect(), _ = window.getComputedStyle(o), N = parseFloat(_.paddingLeft) || 0, T = parseFloat(_.paddingRight) || 0, D = j.width - N - T, P = j.left + x + N;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
         rect: {
-          top: w.bottom + m,
+          top: w.bottom + h,
           left: P,
           width: D,
           height: 4
@@ -3280,22 +3280,22 @@ function detectDropZone(o, n, r, a, l) {
       };
     }
   }
-  if (f && !h && hasChildBlocks(o)) {
+  if (f && !m && hasChildBlocks(o)) {
     const C = detectGapZone(o, n, r, g);
     if (C) {
-      const A = C.before.getBoundingClientRect(), w = C.after.getBoundingClientRect(), B = o.getBoundingClientRect(), j = window.getComputedStyle(o), N = parseFloat(j.paddingLeft) || 0, L = parseFloat(j.paddingRight) || 0, D = getChildBlocks(o), P = getSiblingsInSameRow(D, C.before, g);
+      const A = C.before.getBoundingClientRect(), w = C.after.getBoundingClientRect(), j = o.getBoundingClientRect(), _ = window.getComputedStyle(o), N = parseFloat(_.paddingLeft) || 0, T = parseFloat(_.paddingRight) || 0, D = getChildBlocks(o), P = getSiblingsInSameRow(D, C.before, g);
       let R = 0;
       if (P.forEach((M) => {
-        const T = M.getBoundingClientRect();
-        T.height > R && (R = T.height);
+        const L = M.getBoundingClientRect();
+        L.height > R && (R = L.height);
       }), g === "vertical") {
-        const M = B.width - N - L, T = B.left + x + N;
+        const M = j.width - N - T, L = j.left + x + N;
         return {
           position: "after",
           placeholderOrientation: "horizontal",
           rect: {
-            top: A.bottom + m,
-            left: T,
+            top: A.bottom + h,
+            left: L,
             width: M,
             height: 4
           },
@@ -3307,7 +3307,7 @@ function detectDropZone(o, n, r, a, l) {
           // High confidence for gap zones
         };
       } else {
-        const M = A.top + m, T = R > 0 ? R : Math.max(A.height, w.height);
+        const M = A.top + h, L = R > 0 ? R : Math.max(A.height, w.height);
         return {
           position: "after",
           placeholderOrientation: "vertical",
@@ -3315,7 +3315,7 @@ function detectDropZone(o, n, r, a, l) {
             top: M,
             left: A.right + x,
             width: 4,
-            height: T
+            height: L
           },
           targetElement: C.before,
           targetBlockId: C.before.getAttribute("data-block-id"),
@@ -3329,58 +3329,58 @@ function detectDropZone(o, n, r, a, l) {
   if (d && p) {
     const C = detectParentEdgeProximity(d, n, r, u);
     if (C) {
-      const A = d.getBoundingClientRect(), w = window.getComputedStyle(d), B = parseFloat(w.paddingLeft) || 0, j = parseFloat(w.paddingRight) || 0, N = parseFloat(w.paddingTop) || 0, L = parseFloat(w.paddingBottom) || 0, D = ((E = l.defaultView) == null ? void 0 : E.scrollY) || 0, P = ((I = l.defaultView) == null ? void 0 : I.scrollX) || 0, R = u === "vertical" ? "horizontal" : "vertical", M = getMaxSiblingDimensions(d);
+      const A = d.getBoundingClientRect(), w = window.getComputedStyle(d), j = parseFloat(w.paddingLeft) || 0, _ = parseFloat(w.paddingRight) || 0, N = parseFloat(w.paddingTop) || 0, T = parseFloat(w.paddingBottom) || 0, D = ((E = l.defaultView) == null ? void 0 : E.scrollY) || 0, P = ((I = l.defaultView) == null ? void 0 : I.scrollX) || 0, R = u === "vertical" ? "horizontal" : "vertical", M = getMaxSiblingDimensions(d);
       if (C === "start") {
-        const T = getChildBlocks(d)[0];
-        if (T) {
-          const O = T.getBoundingClientRect();
+        const L = getChildBlocks(d)[0];
+        if (L) {
+          const O = L.getBoundingClientRect();
           if (u === "vertical") {
-            const $ = A.width - B - j, H = A.left + P + B;
+            const H = A.width - j - _, $ = A.left + P + j;
             return {
               position: "before",
               placeholderOrientation: R,
               rect: {
                 top: O.top + D - 2,
-                left: H,
-                width: $,
+                left: $,
+                width: H,
                 height: 4
               },
-              targetElement: T,
-              targetBlockId: T.getAttribute("data-block-id"),
+              targetElement: L,
+              targetBlockId: L.getAttribute("data-block-id"),
               targetParentId: p,
               confidence: 0.9
             };
           } else {
-            const $ = A.top + D + N, H = M.maxHeight > 0 ? M.maxHeight : A.height - N - L;
+            const H = A.top + D + N, $ = M.maxHeight > 0 ? M.maxHeight : A.height - N - T;
             return {
               position: "before",
               placeholderOrientation: R,
               rect: {
-                top: $,
+                top: H,
                 left: O.left + P - 2,
                 width: 4,
-                height: H
+                height: $
               },
-              targetElement: T,
-              targetBlockId: T.getAttribute("data-block-id"),
+              targetElement: L,
+              targetBlockId: L.getAttribute("data-block-id"),
               targetParentId: p,
               confidence: 0.9
             };
           }
         }
       } else {
-        const T = getChildBlocks(d), O = T[T.length - 1];
+        const L = getChildBlocks(d), O = L[L.length - 1];
         if (O) {
-          const $ = O.getBoundingClientRect();
+          const H = O.getBoundingClientRect();
           if (u === "vertical") {
-            const H = A.width - B - j, F = A.left + P + B;
+            const $ = A.width - j - _, F = A.left + P + j;
             return {
               position: "after",
               placeholderOrientation: R,
               rect: {
-                top: $.bottom + D - 2,
+                top: H.bottom + D - 2,
                 left: F,
-                width: H,
+                width: $,
                 height: 4
               },
               targetElement: O,
@@ -3389,13 +3389,13 @@ function detectDropZone(o, n, r, a, l) {
               confidence: 0.9
             };
           } else {
-            const H = A.top + D + N, F = M.maxHeight > 0 ? M.maxHeight : A.height - N - L;
+            const $ = A.top + D + N, F = M.maxHeight > 0 ? M.maxHeight : A.height - N - T;
             return {
               position: "after",
               placeholderOrientation: R,
               rect: {
-                top: H,
-                left: $.right + P - 2,
+                top: $,
+                left: H.right + P - 2,
                 width: 4,
                 height: F
               },
@@ -3410,7 +3410,7 @@ function detectDropZone(o, n, r, a, l) {
     }
   }
   let b = calculateElementZone(o, n, r, f, u);
-  if (h && b.position === "inside") {
+  if (m && b.position === "inside") {
     const C = o.getBoundingClientRect();
     u === "vertical" ? b = {
       position: (r - C.top) / C.height < 0.5 ? "before" : "after",
@@ -3422,20 +3422,20 @@ function detectDropZone(o, n, r, a, l) {
   }
   let y;
   b.position === "inside" ? y = g === "vertical" ? "horizontal" : "vertical" : y = u === "vertical" ? "horizontal" : "vertical";
-  const k = calculatePlaceholderRect(
+  const S = calculatePlaceholderRect(
     o,
     d,
     b.position,
     y,
     l
-  ), S = b.position === "inside" ? i : p;
+  ), k = b.position === "inside" ? i : p;
   return {
     position: b.position,
     placeholderOrientation: y,
-    rect: k,
+    rect: S,
     targetElement: o,
     targetBlockId: i,
-    targetParentId: S,
+    targetParentId: k,
     isEmpty: b.position === "inside" && !hasChildBlocks(o),
     confidence: b.confidence
   };
@@ -3449,20 +3449,20 @@ function findClosestSiblingInRow(o, n, r, a) {
   if (l.length === 0) {
     const d = /* @__PURE__ */ new Map();
     o.forEach((g) => {
-      const h = g.getBoundingClientRect(), f = Math.round(a === "vertical" ? h.top : h.left);
+      const m = g.getBoundingClientRect(), f = Math.round(a === "vertical" ? m.top : m.left);
       d.has(f) || d.set(f, []), d.get(f).push(g);
     });
     let p = null, u = 1 / 0;
-    d.forEach((g, h) => {
-      const f = Math.abs(a === "vertical" ? r - h : n - h);
+    d.forEach((g, m) => {
+      const f = Math.abs(a === "vertical" ? r - m : n - m);
       f < u && (u = f, p = g);
     }), p && p.length > 0 && l.push(...p);
   }
   if (l.length === 0) return null;
   let i = l[0], c = 1 / 0;
   return l.forEach((d) => {
-    const p = d.getBoundingClientRect(), u = p.left + p.width / 2, g = p.top + p.height / 2, h = Math.sqrt(Math.pow(n - u, 2) + Math.pow(r - g, 2));
-    h < c && (c = h, i = d);
+    const p = d.getBoundingClientRect(), u = p.left + p.width / 2, g = p.top + p.height / 2, m = Math.sqrt(Math.pow(n - u, 2) + Math.pow(r - g, 2));
+    m < c && (c = m, i = d);
   }), i;
 }
 function getMaxSiblingDimensions(o) {
@@ -3483,15 +3483,15 @@ function getSiblingsInSameRow(o, n, r) {
   });
 }
 function calculatePlaceholderRect(o, n, r, a, l) {
-  var N, L;
-  const i = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((N = l.defaultView) == null ? void 0 : N.scrollY) || 0, p = ((L = l.defaultView) == null ? void 0 : L.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, h = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, m = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, k = n == null ? void 0 : n.getBoundingClientRect(), S = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, v = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, _ = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, E = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, I = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, C = n ? getOrientation(n) : "vertical", A = n ? getChildBlocks(n) : [], w = getSiblingsInSameRow(A, o, C);
-  let B = 0, j = 0;
+  var N, T;
+  const i = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((N = l.defaultView) == null ? void 0 : N.scrollY) || 0, p = ((T = l.defaultView) == null ? void 0 : T.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, S = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, v = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, E = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, I = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, C = n ? getOrientation(n) : "vertical", A = n ? getChildBlocks(n) : [], w = getSiblingsInSameRow(A, o, C);
+  let j = 0, _ = 0;
   if (w.forEach((D) => {
     const P = D.getBoundingClientRect();
-    P.height > B && (B = P.height), P.width > j && (j = P.width);
+    P.height > j && (j = P.height), P.width > _ && (_ = P.width);
   }), r === "before")
     if (a === "horizontal") {
-      const D = k ? k.width - S - v : i.width, P = k ? k.left + p + S : i.left + p;
+      const D = S ? S.width - k - v : i.width, P = S ? S.left + p + k : i.left + p;
       return {
         top: i.top + d - u - 2,
         left: P,
@@ -3499,17 +3499,17 @@ function calculatePlaceholderRect(o, n, r, a, l) {
         height: 4
       };
     } else {
-      const D = i.top + d, P = C === "horizontal" && B > 0 ? B : I.maxHeight > 0 ? I.maxHeight : k ? k.height - _ - E : i.height;
+      const D = i.top + d, P = C === "horizontal" && j > 0 ? j : I.maxHeight > 0 ? I.maxHeight : S ? S.height - B - E : i.height;
       return {
         top: D,
-        left: i.left + p - h - 2,
+        left: i.left + p - m - 2,
         width: 4,
         height: P
       };
     }
   else if (r === "after")
     if (a === "horizontal") {
-      const D = k ? k.width - S - v : i.width, P = k ? k.left + p + S : i.left + p;
+      const D = S ? S.width - k - v : i.width, P = S ? S.left + p + k : i.left + p;
       return {
         top: i.bottom + d + g - 2,
         left: P,
@@ -3517,7 +3517,7 @@ function calculatePlaceholderRect(o, n, r, a, l) {
         height: 4
       };
     } else {
-      const D = i.top + d, P = C === "horizontal" && B > 0 ? B : I.maxHeight > 0 ? I.maxHeight : k ? k.height - _ - E : i.height;
+      const D = i.top + d, P = C === "horizontal" && j > 0 ? j : I.maxHeight > 0 ? I.maxHeight : S ? S.height - B - E : i.height;
       return {
         top: D,
         left: i.right + p + f - 2,
@@ -3532,15 +3532,15 @@ function calculatePlaceholderRect(o, n, r, a, l) {
       width: i.width - b - y,
       height: 4
     } : {
-      top: i.top + d + m,
+      top: i.top + d + h,
       left: i.right + p - y - 2,
       width: 4,
-      height: i.height - m - x
+      height: i.height - h - x
     } : {
-      top: i.top + d + m,
+      top: i.top + d + h,
       left: i.left + p + b,
       width: i.width - b - y,
-      height: Math.max(i.height - m - x, 20)
+      height: Math.max(i.height - h - x, 20)
     };
 }
 function isDescendantOf(o, n, r) {
@@ -3583,64 +3583,105 @@ const LEAF_BLOCK_TYPES = [
   "Divider",
   "Repeater",
   "Video"
-], useBlockDragOver = () => {
-  const [o] = useAtom$1(dragAndDropAtom), [n] = useCanvasIframe(), [, r] = useAtom$1(dropIndicatorAtom), { clearParentHighlight: a, highlightParent: l } = useDragParentHighlight(), [i] = useBlocksStore(), c = n == null ? void 0 : n.contentDocument, d = useCallback(
-    throttle((p) => {
+], AUTO_SCROLL_CONFIG = {
+  /** Edge zone size in pixels where auto-scroll triggers */
+  EDGE_ZONE: 50,
+  /** Maximum scroll speed in pixels per frame */
+  MAX_SCROLL_SPEED: 10,
+  /** Minimum scroll speed in pixels per frame */
+  MIN_SCROLL_SPEED: 10
+}, useBlockDragOver = () => {
+  const [o] = useAtom$1(dragAndDropAtom), [n] = useCanvasIframe(), [, r] = useAtom$1(dropIndicatorAtom), { clearParentHighlight: a, highlightParent: l } = useDragParentHighlight(), [i] = useBlocksStore(), c = n == null ? void 0 : n.contentDocument, d = useRef(null), p = useRef(0), u = useCallback(
+    (m) => {
+      if (!(c != null && c.defaultView)) return;
+      const f = c.defaultView, h = f.innerHeight, x = f.scrollY, b = c.documentElement.scrollHeight;
+      p.current = m;
+      const y = m, S = h - m;
+      let k = !1, v = null, B = 0;
+      if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && x > 0 ? (k = !0, v = "up", B = y) : S < AUTO_SCROLL_CONFIG.EDGE_ZONE && x + h < b && (k = !0, v = "down", B = S), !k && d.current !== null) {
+        cancelAnimationFrame(d.current), d.current = null;
+        return;
+      }
+      if (k && v) {
+        const E = 1 - B / AUTO_SCROLL_CONFIG.EDGE_ZONE, I = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * E, C = () => {
+          if (!isDragging || !f) {
+            d.current = null;
+            return;
+          }
+          const A = v === "up" ? -I : I;
+          f.scrollBy(0, A);
+          const w = f.scrollY, j = w > 0, _ = w + h < b, N = p.current, T = h - p.current;
+          v === "up" && j && N < AUTO_SCROLL_CONFIG.EDGE_ZONE || v === "down" && _ && T < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(C) : d.current = null;
+        };
+        d.current === null && (d.current = requestAnimationFrame(C));
+      }
+    },
+    [c]
+  );
+  useEffect(() => () => {
+    d.current !== null && (cancelAnimationFrame(d.current), d.current = null);
+  }, []), useEffect(() => {
+    !isDragging && d.current !== null && (cancelAnimationFrame(d.current), d.current = null);
+  }, [isDragging]);
+  const g = useCallback(
+    throttle((m) => {
       if (!isDragging || !o)
         return;
       a();
-      const u = getTargetDetail(p), { element: g, targetBlockId: h, targetParentId: f } = u;
-      if (!g || !h)
+      const f = getTargetDetail(m), { element: h, targetBlockId: x, targetParentId: b } = f;
+      if (!h || !x)
         return;
-      const m = o._id;
-      if (m && (h === m || isDescendantOf(h, m, i)))
+      const y = o._id;
+      if (y && (x === y || isDescendantOf(x, y, i)))
         return;
-      const x = o._type || o.type;
-      if (!x)
+      const S = o._type || o.type;
+      if (!S)
         return;
-      const b = p.clientX, y = p.clientY, k = detectDropZone(g, b, y, x, c);
-      if (!k)
+      const k = m.clientX, v = m.clientY;
+      u(v);
+      const B = detectDropZone(h, k, v, S, c);
+      if (!B)
         return;
-      const S = g.getAttribute("data-block-type") || "Box";
-      let v = !1;
-      const _ = LEAF_BLOCK_TYPES.includes(S);
-      if (k.position === "inside") {
-        if (_ || m && !canDropWithoutCircularReference(m, h, i))
+      const E = h.getAttribute("data-block-type") || "Box";
+      let I = !1;
+      const C = LEAF_BLOCK_TYPES.includes(E);
+      if (B.position === "inside") {
+        if (C || y && !canDropWithoutCircularReference(y, x, i))
           return;
-        v = canAcceptChildBlock(S, x);
+        I = canAcceptChildBlock(E, S);
       } else {
-        let I = g.parentElement, C = "Box";
-        for (; I && !I.hasAttribute("data-block-id"); )
-          I = I.parentElement;
-        if (I && (C = I.getAttribute("data-block-type") || "Box"), m && !canDropAsSiblingWithoutCircularReference(m, h, i))
+        let w = h.parentElement, j = "Box";
+        for (; w && !w.hasAttribute("data-block-id"); )
+          w = w.parentElement;
+        if (w && (j = w.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, i))
           return;
-        v = canAcceptChildBlock(C, x);
+        I = canAcceptChildBlock(j, S);
       }
-      if (!v)
+      if (!I)
         return;
-      l(k.targetParentId);
-      const E = k.targetParentId || f;
+      l(B.targetParentId);
+      const A = B.targetParentId || b;
       r({
         isVisible: !0,
         isValid: !0,
-        position: k.position,
-        placeholderOrientation: k.placeholderOrientation,
-        isEmpty: k.isEmpty,
-        top: k.rect.top,
-        left: k.rect.left,
-        width: k.rect.width,
-        height: k.rect.height,
-        targetBlockId: k.targetBlockId,
-        targetParentId: E
-      }), removeDropTargetAttributes$1(c), k.targetElement.setAttribute("data-drop-target", "true");
+        position: B.position,
+        placeholderOrientation: B.placeholderOrientation,
+        isEmpty: B.isEmpty,
+        top: B.rect.top,
+        left: B.rect.left,
+        width: B.rect.width,
+        height: B.rect.height,
+        targetBlockId: B.targetBlockId,
+        targetParentId: A
+      }), removeDropTargetAttributes$1(c), B.targetElement.setAttribute("data-drop-target", "true");
     }, 300),
-    [c, o, r, a, l, i]
+    [c, o, r, a, l, i, u]
   );
   return useCallback(
-    (p) => {
-      p.preventDefault(), p.stopPropagation(), d(p);
+    (m) => {
+      m.preventDefault(), m.stopPropagation(), g(m);
     },
-    [d]
+    [g]
   );
 };
 function getTargetDetail(o) {
@@ -3699,15 +3740,20 @@ const useBlockDragStart = () => {
       i.current && (cleanupDragImage(i.current), i.current = null);
       const u = p ? pick$1(d, ["type", "blocks"]) : d;
       if (a(u), c.dataTransfer.setData("text/plain", JSON.stringify({ block: u })), c.dataTransfer.effectAllowed = "move", !p && d._id) {
-        const h = (g = document.getElementById("canvas-iframe")) == null ? void 0 : g.contentDocument;
-        if (h) {
-          const f = h.querySelector(`[data-block-id="${d._id}"]`);
-          f && (f.style.opacity = "0.4", f.setAttribute("data-dragging", "true"));
+        const m = (g = document.getElementById("canvas-iframe")) == null ? void 0 : g.contentDocument;
+        if (m) {
+          const f = m.querySelector(`[data-block-id="${d._id}"]`);
+          f && setTimeout(() => {
+            if (f) {
+              const x = f.getBoundingClientRect().height;
+              getOrientation(f == null ? void 0 : f.parentElement) === "vertical" && x > 200 && (f.style.height = "max-content", f.style.maxHeight = "max-content", f.style.minHeight = "0", f.style.overflow = "hidden", f.innerHTML = "<div class='flex items-center justify-center w-full h-full outline-[1px] outline-dashed font-medium outline-gray-500 bg-gray-500/10 py-4 text-transparent'>-</div>", f.style.opacity = "0.4"), f.style.opacity = "0.4", f.setAttribute("data-dragging", "true");
+            }
+          }, 0);
         }
       }
       if (d != null && d._type || d != null && d.type) {
-        const h = createCoreDragImage(d);
-        i.current = h, c.dataTransfer.setDragImage(h, 0, 0), setTimeout(() => {
+        const m = createCoreDragImage(d);
+        i.current = m, c.dataTransfer.setDragImage(m, 0, 0), setTimeout(() => {
           i.current && (cleanupDragImage(i.current), i.current = null);
         }, 50);
       }
@@ -3728,10 +3774,10 @@ const useBlockDragStart = () => {
     [o, r, a, l]
   );
 }, useBlockDrop = () => {
-  const [o, n] = useAtom$1(dragAndDropAtom), [r, a] = useAtom$1(dropIndicatorAtom), [l] = useBlocksStore(), [i] = useCanvasIframe(), { addCoreBlock: c } = useAddBlock(), { moveBlocks: d } = useBlocksStoreUndoableActions(), [, p] = useSelectedBlockIds(), [, u] = useSelectedStylingBlocks(), { clearHighlight: g } = useBlockHighlight(), { clearParentHighlight: h } = useDragParentHighlight(), f = i == null ? void 0 : i.contentDocument;
+  const [o, n] = useAtom$1(dragAndDropAtom), [r, a] = useAtom$1(dropIndicatorAtom), [l] = useBlocksStore(), [i] = useCanvasIframe(), { addCoreBlock: c } = useAddBlock(), { moveBlocks: d } = useBlocksStoreUndoableActions(), [, p] = useSelectedBlockIds(), [, u] = useSelectedStylingBlocks(), { clearHighlight: g } = useBlockHighlight(), { clearParentHighlight: m } = useDragParentHighlight(), [f, h] = useAtom$1(canvasRenderKeyAtom), x = i == null ? void 0 : i.contentDocument;
   return useCallback(
-    (m) => {
-      if (m.preventDefault(), m.stopPropagation(), setIsDragging(!1), removeDropTargetAttributes(f), h(), a({
+    (b) => {
+      if (b.preventDefault(), b.stopPropagation(), setIsDragging(!1), restoreDraggedElementStyles(x), removeDropTargetAttributes(x), m(), a({
         isVisible: !1,
         isValid: !1,
         position: "inside",
@@ -3742,7 +3788,7 @@ const useBlockDragStart = () => {
         width: 0,
         height: 0
       }), setTimeout(() => {
-        h(), removeDropTargetAttributes(f), a({
+        m(), removeDropTargetAttributes(x), a({
           isVisible: !1,
           isValid: !1,
           position: "inside",
@@ -3756,39 +3802,44 @@ const useBlockDragStart = () => {
       }, 50), !o)
         return;
       if (!r.isValid || !r.targetBlockId) {
-        h();
+        m();
         return;
       }
       n(null);
-      const x = r.targetBlockId, b = r.targetParentId;
-      if (!x)
+      const y = r.targetBlockId, S = r.targetParentId;
+      if (!y)
         return;
-      const { parentId: y, index: k } = calculateInsertionIndex(
+      const { parentId: k, index: v } = calculateInsertionIndex(
         l,
-        x,
-        b,
+        y,
+        S,
         r.position
       );
       if (o._id !== void 0)
-        d([o._id], y === null ? void 0 : y, k), g(), u([]), p([o._id]);
+        d([o._id], k === null ? void 0 : k, v), g(), u([]), p([o._id]);
       else {
-        const v = o._type || o.type, _ = o != null && o.blocks ? isFunction$1(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
-        c((_ == null ? void 0 : _.length) > 0 ? { blocks: [..._] } : { type: v }, y, k);
+        const E = o._type || o.type, I = o != null && o.blocks ? isFunction$1(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
+        c((I == null ? void 0 : I.length) > 0 ? { blocks: [...I] } : { type: E }, k, v);
       }
+      setTimeout(() => {
+        h(f + 1);
+      }, 50);
     },
     [
       o,
       r,
       l,
-      f,
+      x,
       c,
       d,
       n,
       a,
-      h,
+      m,
       g,
       p,
-      u
+      u,
+      f,
+      h
     ]
   );
 };
@@ -3829,6 +3880,12 @@ function removeDropTargetAttributes(o) {
   if (!o) return;
   o.querySelectorAll("[data-drop-target]").forEach((r) => r.removeAttribute("data-drop-target"));
 }
+function restoreDraggedElementStyles(o) {
+  if (!o) return;
+  o.querySelectorAll("[data-dragging]").forEach((r) => {
+    r.removeAttribute("data-dragging");
+  });
+}
 const useDragAndDrop = () => {
   const o = useBlockDragStart(), n = useBlockDragOver(), r = useBlockDrop(), a = useBlockDragEnd();
   return {
@@ -3866,21 +3923,21 @@ const FrameContext = React__default.createContext({ document: doc, window: win }
     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), f = getParentBlockOrientation(c, i, a), m = 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), f = getParentBlockOrientation(c, i, a), h = 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",
     ({ key: x }) => {
       var b;
-      m((b = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : b.toUpperCase());
+      h((b = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : b.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
-    [m]
-  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: h, moveBlock: m, orientation: f };
+    [h]
+  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: m, moveBlock: h, orientation: f };
 }, BlockController = ({ block: o, updateFloatingBar: n }) => {
   const { isOnlyChild: r, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
     o,
@@ -3985,20 +4042,20 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     }
   );
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), BlockSelectionHighlighter = () => {
-  const o = useSelectedBlock(), { document: n } = useFrame(), [r] = useSelectedStylingBlocks(), [a, l] = useState([]), [, i] = useState([]), { onDragStart: c, onDragEnd: d, isDragging: p } = useDragAndDrop(), [u, g] = useState(null), h = useIsDragAndDropEnabled(), f = (m, x = 0) => {
-    const { top: b } = m.getBoundingClientRect();
+  const o = useSelectedBlock(), { document: n } = useFrame(), [r] = useSelectedStylingBlocks(), [a, l] = useState([]), [, i] = useState([]), { onDragStart: c, onDragEnd: d, isDragging: p } = useDragAndDrop(), [u, g] = useState(null), m = useIsDragAndDropEnabled(), f = (h, x = 0) => {
+    const { top: b } = h.getBoundingClientRect();
     return b + x >= 0 && b - x <= window.innerHeight;
   };
   return useEffect(() => {
-    var m;
+    var h;
     if (o != null && o._id && o.type !== "Multiple" && n) {
       const x = getElementByDataBlockId(n, o._id);
-      x && (f(x) || (m = n.defaultView) == null || m.scrollTo({ top: x.offsetTop, behavior: "smooth" }), l([x]));
+      x && (f(x) || (h = n.defaultView) == null || h.scrollTo({ top: x.offsetTop, behavior: "smooth" }), l([x]));
     }
   }, [o == null ? void 0 : o._id, o == null ? void 0 : o.type, n]), useEffect(() => {
     if (!isEmpty(r) && n) {
-      const m = getElementByStyleId(n, first(r).id);
-      i(m ? [m] : [null]);
+      const h = getElementByStyleId(n, first(r).id);
+      i(h ? [h] : [null]);
     } else
       i([null]);
   }, [r, n]), /* @__PURE__ */ jsx(
@@ -4007,9 +4064,9 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       onDragEnd: () => {
         g(null), d();
       },
-      draggable: h && !!o,
-      onDragStart: (m) => {
-        g(a == null ? void 0 : a[0]), c(m, o, !1);
+      draggable: m && !!o,
+      onDragStart: (h) => {
+        g(a == null ? void 0 : a[0]), c(h, o, !1);
       },
       children: /* @__PURE__ */ jsx(
         BlockFloatingSelector,
@@ -4022,7 +4079,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     }
   );
 }, BlockFloatingSelector = ({ block: o, isDragging: n, selectedBlockElement: r }) => {
-  const a = useRemoveBlocks(), l = useDuplicateBlocks(), [, i] = useSelectedBlockIds(), [, c] = useHighlightBlockId(), [, d] = useSelectedStylingBlocks(), { hasPermission: p } = usePermissions(), { editingBlockId: u } = useInlineEditing(), { document: g } = useFrame(), h = useIsDragAndDropEnabled(), f = useBuilderProp("flags.gotoSettings", !1), { floatingStyles: m, refs: x, update: b } = useFloating({
+  const a = useRemoveBlocks(), l = useDuplicateBlocks(), [, i] = useSelectedBlockIds(), [, c] = useHighlightBlockId(), [, d] = useSelectedStylingBlocks(), { hasPermission: p } = usePermissions(), { editingBlockId: u } = useInlineEditing(), { document: g } = useFrame(), m = useIsDragAndDropEnabled(), f = useBuilderProp("flags.gotoSettings", !1), { floatingStyles: h, refs: x, update: b } = useFloating({
     placement: "top-start",
     middleware: [
       shift({
@@ -4039,10 +4096,10 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       }),
       size({
         boundary: g == null ? void 0 : g.body,
-        apply({ availableWidth: v, availableHeight: _, elements: E }) {
+        apply({ availableWidth: v, availableHeight: B, elements: E }) {
           Object.assign(E.floating.style, {
             maxWidth: `${Math.max(200, v)}px`,
-            maxHeight: `${Math.max(100, _)}px`
+            maxHeight: `${Math.max(100, B)}px`
           });
         }
       })
@@ -4050,7 +4107,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     elements: { reference: r }
   });
   useResizeObserver(r, () => b(), r !== null), useResizeObserver(g == null ? void 0 : g.body, () => b(), (g == null ? void 0 : g.body) !== null);
-  const y = get(o, "_parent", null), k = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
+  const y = get(o, "_parent", null), S = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
   useEffect(() => {
     if (r) {
       const v = setTimeout(() => b(), 500);
@@ -4058,14 +4115,14 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     } else
       b();
   }, [r]);
-  const [, S] = useSidebarActivePanel();
+  const [, k] = useSidebarActivePanel();
   return !n && (!r || !o || u) ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     "div",
     {
       role: "button",
       tabIndex: 0,
       ref: x.setFloating,
-      style: m,
+      style: h,
       onClick: (v) => {
         v.stopPropagation(), v.preventDefault();
       },
@@ -4076,7 +4133,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       className: `isolate z-[999] flex h-6 items-center justify-between bg-blue-500 py-2 text-xs text-white ${n ? "opacity-0" : ""}`,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-          h && /* @__PURE__ */ jsx(DragHandleDots2Icon, { className: "flex-shrink-0 cursor-grab rounded p-0.5 hover:bg-white/20 active:cursor-grabbing" }),
+          m && /* @__PURE__ */ jsx(DragHandleDots2Icon, { className: "flex-shrink-0 cursor-grab rounded p-0.5 hover:bg-white/20 active:cursor-grabbing" }),
           y && /* @__PURE__ */ jsx(
             ArrowUpIcon,
             {
@@ -4087,14 +4144,14 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: `w-full ${h ? "cursor-grab active:cursor-grabbing" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "mr-10 w-full items-center space-x-1 px-1 leading-tight", children: k }) }),
+        /* @__PURE__ */ jsx("div", { className: `w-full ${m ? "cursor-grab active:cursor-grabbing" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "mr-10 w-full items-center space-x-1 px-1 leading-tight", children: S }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pl-1 pr-1.5", children: [
           p(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
             AiIcon,
             {
               className: "h-4 w-4 rounded hover:bg-white hover:text-blue-500",
               onClick: () => {
-                S("chai-chat-panel"), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_AI_PANEL);
+                k("chai-chat-panel"), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_AI_PANEL);
               }
             }
           ),
@@ -4105,7 +4162,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
               className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500"
             }
           ),
-          !h && /* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500" }) }),
+          !m && /* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500" }) }),
           canDuplicateBlock(get(o, "_type", "")) && p(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(
             CopyIcon,
             {
@@ -4322,7 +4379,7 @@ V(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(), f = 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(), f = 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),
@@ -4331,17 +4388,17 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   ), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      g(n[0]) && h(n);
+      g(n[0]) && m(n);
     },
     { ...f, enabled: !isEmpty(n), preventDefault: !0 },
-    [n, g, h]
+    [n, g, m]
   ), useHotkeys("esc", () => r([]), f, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...f, enabled: !isEmpty(n), preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
     "del, backspace",
-    (m) => {
-      m.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
+    (h) => {
+      h.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
     f,
     [n, l]
@@ -4472,9 +4529,9 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
 }, useDirectBlockDrag = () => {
   const [, o] = useSelectedBlockIds(), { onDragStart: n, onDragEnd: r } = useDragAndDrop(), [a] = useBlocksStore(), l = useRef(null), i = useCallback(
     (p) => {
-      var h;
+      var m;
       if (p.button !== 0) return;
-      const g = (h = p.target.closest("[data-block-id]")) == null ? void 0 : h.getAttribute("data-block-id");
+      const g = (m = p.target.closest("[data-block-id]")) == null ? void 0 : m.getAttribute("data-block-id");
       g && (o([g]), l.current = g);
     },
     [o]
@@ -4525,16 +4582,16 @@ const RteDropdownMenu = ({
 }) => {
   const { document: i } = useFrame(), [c, d] = useState({ left: void 0, right: void 0, top: void 0, bottom: void 0 }), [p, u] = useState(!1), g = useRef(null);
   if (useEffect(() => {
-    var k, S;
+    var S, k;
     if (!p) {
       d({ left: void 0, right: void 0, top: void 0, bottom: void 0 });
       return;
     }
-    const h = (k = g.current) == null ? void 0 : k.getBoundingClientRect(), f = (S = l.current) == null ? void 0 : S.getBoundingClientRect();
-    let m = h == null ? void 0 : h.left, x = (h == null ? void 0 : h.bottom) + 4, b, y;
-    (f == null ? void 0 : f.left) + (f == null ? void 0 : f.width) + 50 >= i.body.offsetWidth && (m = void 0, b = i.body.offsetWidth - (h == null ? void 0 : h.right)), x + 202 >= i.body.clientHeight && (x = null, y = i.body.clientHeight - (h == null ? void 0 : h.bottom) + (f == null ? void 0 : f.height)), d({ left: m, top: x, right: b, bottom: y });
+    const m = (S = g.current) == null ? void 0 : S.getBoundingClientRect(), f = (k = l.current) == null ? void 0 : k.getBoundingClientRect();
+    let h = m == null ? void 0 : m.left, x = (m == null ? void 0 : m.bottom) + 4, b, y;
+    (f == null ? void 0 : f.left) + (f == null ? void 0 : f.width) + 50 >= i.body.offsetWidth && (h = void 0, b = i.body.offsetWidth - (m == null ? void 0 : m.right)), x + 202 >= i.body.clientHeight && (x = null, y = i.body.clientHeight - (m == null ? void 0 : m.bottom) + (f == null ? void 0 : f.height)), d({ left: h, top: x, right: b, bottom: y });
   }, [p]), a === "canvas") {
-    const h = () => {
+    const m = () => {
       u(!1), o && (o == null || o.view.focus(), o == null || o.chain().focus().run());
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4544,7 +4601,7 @@ const RteDropdownMenu = ({
           "div",
           {
             id: "chaibuilder-rte-dropdown-menu-content",
-            onClick: h,
+            onClick: m,
             className: "fixed inset-0 left-0 top-0 z-[10001] h-full w-screen",
             children: /* @__PURE__ */ jsx(
               "div",
@@ -4555,7 +4612,7 @@ const RteDropdownMenu = ({
                   {},
                   { left: c.left, top: c.top, right: c.right, bottom: c.bottom }
                 ),
-                children: typeof r == "function" ? r(h) : r
+                children: typeof r == "function" ? r(m) : r
               }
             )
           }
@@ -4639,13 +4696,13 @@ const getActiveClasses$1 = (o, n, r) => {
   onRemoveHighlightColor: i,
   onClose: c
 }) => {
-  const [d] = useDarkMode(), [p] = useAtom$1(lsThemeAtom), u = (p == null ? void 0 : p.colors) || {}, g = Object.values(u).map((m) => get(m, d ? "1" : "0")), [h, f] = useState("TEXT");
+  const [d] = useDarkMode(), [p] = useAtom$1(lsThemeAtom), u = (p == null ? void 0 : p.colors) || {}, g = Object.values(u).map((h) => get(h, d ? "1" : "0")), [m, f] = useState("TEXT");
   return /* @__PURE__ */ jsxs("div", { id: "rte-widget-color-picker", className: "px-1", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between rounded-md border bg-muted", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `w-full cursor-pointer rounded p-0.5 text-center ${h === "TEXT" ? "bg-blue-500 text-white" : "hover:bg-blue-100 hover:text-blue-500"}`,
+          className: `w-full cursor-pointer rounded p-0.5 text-center ${m === "TEXT" ? "bg-blue-500 text-white" : "hover:bg-blue-100 hover:text-blue-500"}`,
           onClick: () => f("TEXT"),
           children: "Text Color"
         }
@@ -4653,13 +4710,13 @@ const getActiveClasses$1 = (o, n, r) => {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `w-full cursor-pointer rounded p-0.5 text-center ${h === "HIGHLIGHT" ? "bg-blue-500 text-white" : "hover:bg-blue-100 hover:text-blue-500"}`,
+          className: `w-full cursor-pointer rounded p-0.5 text-center ${m === "HIGHLIGHT" ? "bg-blue-500 text-white" : "hover:bg-blue-100 hover:text-blue-500"}`,
           onClick: () => f("HIGHLIGHT"),
           children: "Highlight Color"
         }
       )
     ] }),
-    h === "TEXT" ? /* @__PURE__ */ jsx(
+    m === "TEXT" ? /* @__PURE__ */ jsx(
       Commons,
       {
         themeColors: g,
@@ -4680,11 +4737,11 @@ const getActiveClasses$1 = (o, n, r) => {
     )
   ] });
 }, RteColorPicker = ({ editor: o, from: n, menuRef: r }) => {
-  var S, v;
-  const a = (S = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : S.color, l = (v = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : v.color, [i, c] = useState(a || "#000000F2"), [d, p] = useState(l || "#00000057"), [u, g] = useDebouncedState(i, 150), [h, f] = useDebouncedState(d, 150), m = (_, E) => {
-    E ? (c(_), g(_)) : (o == null || o.chain().setColor(_).run(), c(_));
-  }, x = (_, E) => {
-    E ? (p(_), f(_)) : (o == null || o.chain().setHighlight({ color: _ }).run(), p(_));
+  var k, v;
+  const a = (k = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : k.color, l = (v = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : v.color, [i, c] = useState(a || "#000000F2"), [d, p] = useState(l || "#00000057"), [u, g] = useDebouncedState(i, 150), [m, f] = useDebouncedState(d, 150), h = (B, E) => {
+    E ? (c(B), g(B)) : (o == null || o.chain().setColor(B).run(), c(B));
+  }, x = (B, E) => {
+    E ? (p(B), f(B)) : (o == null || o.chain().setHighlight({ color: B }).run(), p(B));
   }, b = () => {
     o == null || o.chain().unsetColor().run(), c("#000000F2");
   }, y = () => {
@@ -4693,8 +4750,8 @@ const getActiveClasses$1 = (o, n, r) => {
   return useEffect(() => {
     l && p(l);
   }, [l]), useEffect(() => {
-    h != null && h.includes("#") && (h == null ? void 0 : h.length) >= 3 && (o == null || o.chain().setHighlight({ color: h }).run());
-  }, [h]), useEffect(() => {
+    m != null && m.includes("#") && (m == null ? void 0 : m.length) >= 3 && (o == null || o.chain().setHighlight({ color: m }).run());
+  }, [m]), useEffect(() => {
     u != null && u.includes("#") && (u == null ? void 0 : u.length) >= 3 && (o == null || o.chain().setColor(u).run());
   }, [u]), /* @__PURE__ */ jsx(
     RteDropdownMenu,
@@ -4714,16 +4771,16 @@ const getActiveClasses$1 = (o, n, r) => {
         ),
         /* @__PURE__ */ jsx(CaretDownIcon, { className: "h-3 w-3 opacity-50" })
       ] }),
-      content: (_) => /* @__PURE__ */ jsx(
+      content: (B) => /* @__PURE__ */ jsx(
         ColorPickerContent,
         {
           textColor: i,
           highlightColor: d,
-          onChangeTextColor: m,
+          onChangeTextColor: h,
           onChangeHighlightColor: x,
           onRemoveTextColor: b,
           onRemoveHighlightColor: y,
-          onClose: _
+          onClose: B
         }
       )
     }
@@ -5041,8 +5098,8 @@ const RichTextEditor = memo(
       placeholder: "Enter text here",
       onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
       onBlur: ({ editor: u, event: g }) => {
-        const h = g == null ? void 0 : g.relatedTarget, f = i.querySelector(".ProseMirror"), m = i.querySelector(".tippy-box"), x = i.querySelector("#chai-rich-text-menu-bar"), b = f == null ? void 0 : f.contains(h), y = m == null ? void 0 : m.contains(h), k = x == null ? void 0 : x.contains(h), S = window.document.getElementById("rte-widget-color-picker");
-        if (!b && !y && !k && !S) {
+        const m = g == null ? void 0 : g.relatedTarget, f = i.querySelector(".ProseMirror"), h = i.querySelector(".tippy-box"), x = i.querySelector("#chai-rich-text-menu-bar"), b = f == null ? void 0 : f.contains(m), y = h == null ? void 0 : h.contains(m), S = x == null ? void 0 : x.contains(m), k = window.document.getElementById("rte-widget-color-picker");
+        if (!b && !y && !S && !k) {
           const v = (u == null ? void 0 : u.getHTML()) || "";
           r(v);
         }
@@ -5050,19 +5107,19 @@ const RichTextEditor = memo(
       from: "canvas"
     });
     useEffect(() => {
-      var g, h;
+      var g, m;
       const u = getInitialTextAlign(n);
-      u && ((g = c == null ? void 0 : c.commands) == null || g.setTextAlign(u)), (h = c == null ? void 0 : c.commands) == null || h.focus(), c == null || c.emit("focus", {
+      u && ((g = c == null ? void 0 : c.commands) == null || g.setTextAlign(u)), (m = c == null ? void 0 : c.commands) == null || m.focus(), c == null || c.emit("focus", {
         editor: c,
         event: new FocusEvent("focus"),
         transaction: []
       });
     }, [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 = (u) => {
       u.key === "Escape" && l(u);
@@ -5094,14 +5151,14 @@ const RichTextEditor = memo(
     useEffect(() => {
       if (a.current) {
         a.current.innerHTML = n, a.current.focus();
-        const f = c.createRange(), m = d.getSelection();
-        f.selectNodeContents(a.current), f.collapse(!1), m == null || m.removeAllRanges(), m == null || m.addRange(f), a.current.focus();
+        const f = c.createRange(), h = d.getSelection();
+        f.selectNodeContents(a.current), f.collapse(!1), h == null || h.removeAllRanges(), h == null || h.addRange(f), a.current.focus();
       } else
         r();
     }, [c, d]);
     const p = useMemo(() => {
-      var m;
-      const f = ((m = o == null ? void 0 : o.tagName) == null ? void 0 : m.toLowerCase()) || "div";
+      var h;
+      const f = ((h = o == null ? void 0 : o.tagName) == null ? void 0 : h.toLowerCase()) || "div";
       return f === "button" ? "div" : f;
     }, [o]), u = useCallback(
       (f) => {
@@ -5110,19 +5167,19 @@ const RichTextEditor = memo(
       [i]
     ), g = useCallback(() => {
       r();
-    }, [r]), h = useMemo(() => {
+    }, [r]), m = useMemo(() => {
       var f;
       return {
         id: "active-inline-editing-element",
         contentEditable: !0,
         className: `${((f = o == null ? void 0 : o.className) == null ? void 0 : f.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: (m) => {
-          const x = m.target;
-          x && (x.innerText.trim() === "" ? (x.setAttribute("data-placeholder", "Enter text here"), x.children.length > 0 && x.children[0].remove()) : m.target.removeAttribute("data-placeholder"), l(m.target.innerText));
+        onInput: (h) => {
+          const x = h.target;
+          x && (x.innerText.trim() === "" ? (x.setAttribute("data-placeholder", "Enter text here"), x.children.length > 0 && x.children[0].remove()) : h.target.removeAttribute("data-placeholder"), l(h.target.innerText));
         },
-        onClick: (m) => {
-          m.stopPropagation(), m.preventDefault();
+        onClick: (h) => {
+          h.stopPropagation(), h.preventDefault();
         }
       };
     }, [o == null ? void 0 : o.className, o == null ? void 0 : o.style]);
@@ -5130,29 +5187,29 @@ const RichTextEditor = memo(
       ref: a,
       onBlur: g,
       onKeyDown: u,
-      ...h
+      ...m
     }) });
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: h } = useBlockHighlight(), f = useUpdateBlocksProps(), { selectedLang: m } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = l, { blockContent: k, blockType: S } = useMemo(() => {
-      var j;
+    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), f = useUpdateBlocksProps(), { selectedLang: h } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = l, { blockContent: S, blockType: k } = useMemo(() => {
+      var _;
       const C = o._type;
       let A = o[r];
       const w = getRegisteredChaiBlock(o._type);
-      return m && ((j = w == null ? void 0 : w.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${m}`) && (A = get(o, `${r}-${m}`)), { blockContent: A, blockType: C };
-    }, [o, m]), v = useCallback(
+      return h && ((_ = w == null ? void 0 : w.i18nProps) == null ? void 0 : _.includes(r)) && has(o, `${r}-${h}`) && (A = get(o, `${r}-${h}`)), { blockContent: A, blockType: C };
+    }, [o, h]), v = useCallback(
       (C) => {
         var w;
         const A = C || ((w = g.current) == null ? void 0 : w.innerText);
         f([y], { [r]: A }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
-      [y, f, c, x, m]
-    ), _ = useDebouncedCallback(
+      [y, f, c, x, h]
+    ), B = useDebouncedCallback(
       (C) => {
         f([y], { [r]: C });
       },
-      [y, o, f, m],
+      [y, o, f, h],
       1e3
     ), E = useCallback(
       (C) => {
@@ -5161,20 +5218,20 @@ const RichTextEditor = memo(
           b.current = null, x([A]);
         }, 100);
       },
-      [x, y, m]
+      [x, y, h]
     );
     useEffect(() => {
-      var B;
+      var j;
       if (!y) return;
       const C = `[data-block-id="${y}"]`, A = i >= 0 ? `[data-block-index="${i}"]` : "", w = a.querySelector(`${C}${A}`);
-      w && ((B = w == null ? void 0 : w.classList) == null || B.add("sr-only"), u(w));
-    }, [y, S, a, i]);
-    const I = useMemo(() => p ? (h(), ["RichText", "Paragraph"].includes(S) ? /* @__PURE__ */ jsx(
+      w && ((j = w == null ? void 0 : w.classList) == null || j.add("sr-only"), u(w));
+    }, [y, k, a, i]);
+    const I = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
-        blockContent: k,
+        blockContent: S,
         editingElement: p,
-        onChange: _,
+        onChange: B,
         onClose: v,
         onEscape: E
       }
@@ -5182,13 +5239,13 @@ const RichTextEditor = memo(
       MemoizedEditor,
       {
         editorRef: g,
-        blockContent: k,
+        blockContent: S,
         editingElement: p,
         onClose: v,
-        onChange: _,
+        onChange: B,
         onEscape: E
       }
-    )) : null, [p, y, S, k, v, m]);
+    )) : null, [p, y, k, S, v, h]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       I,
       n
@@ -5223,42 +5280,42 @@ const RichTextEditor = memo(
   blockAtom: n,
   children: r
 }) => {
-  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [h] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: m, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useIsDragAndDropEnabled(), k = b === "edit", S = useDirectBlockDrag(), v = useMemo(
-    () => h ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
-      index: m,
+  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: h, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useIsDragAndDropEnabled(), S = b === "edit", k = useDirectBlockDrag(), v = useMemo(
+    () => m ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
+      index: h,
       key: x
     }) : applyLanguage(i, d, c),
-    [i, d, c, g, h, m, x]
-  ), _ = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), E = useMemo(
+    [i, d, c, g, m, h, x]
+  ), B = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), E = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
   ), I = useMemo(() => {
     const N = {
       "data-block-id": i._id,
       "data-block-type": i._type,
-      "data-block-index": m
+      "data-block-index": h
     };
-    return k && y ? {
+    return S && y ? {
       ...N,
       draggable: !0,
-      onMouseDown: S.onMouseDown,
-      onDragStart: S.onDragStart,
-      onDragEnd: S.onDragEnd
+      onMouseDown: k.onMouseDown,
+      onDragStart: k.onDragStart,
+      onDragEnd: k.onDragEnd
     } : N;
-  }, [i._id, i._type, m, k, y, S]), C = useMemo(
+  }, [i._id, i._type, h, S, y, k]), C = useMemo(
     () => ({
       blockProps: I,
       inBuilder: b === "edit",
       lang: d || p,
       ...v,
-      ..._,
+      ...B,
       ...E,
       ...o
     }),
-    [b, I, d, p, v, _, E, o]
+    [b, I, d, p, v, B, E, o]
   ), A = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), w = useMemo(() => get(i, "_show", !0), [i]);
   if (isNull(f) || !w) return null;
-  let B = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
+  let j = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
     ...C,
     children: r({
       _id: i._id,
@@ -5271,8 +5328,8 @@ const RichTextEditor = memo(
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const j = a === i._id && (l === m || m < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: B }) : B;
-  return A ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: j }) : j;
+  const _ = a === i._id && (l === h || h < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: j }) : j;
+  return A ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: _ }) : _;
 }, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
     (d) => {
@@ -5315,24 +5372,24 @@ const RichTextEditor = memo(
   );
   return c && (a === "Heading" || a === "Paragraph" || a === "Link") && (i = adjustSpacingInContentBlocks(i)), map(i, (d) => {
     const p = l(d._id);
-    return p ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: d, children: (u) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: p, asyncProps: u, children: ({ _id: g, _type: h, partialBlockId: f, repeaterItems: m, $repeaterItemsKey: x }) => h === "Repeater" ? isArray(m) && m.map((b, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: x }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: h }) }, `${g}-${y}`)) : h === "GlobalBlock" || h === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: f }) }) : c(g) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: h }) : null }) }, d._id) : null;
+    return p ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: d, children: (u) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: p, asyncProps: u, children: ({ _id: g, _type: m, partialBlockId: f, repeaterItems: h, $repeaterItemsKey: x }) => m === "Repeater" ? isArray(h) && h.map((b, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: x }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: m }) }, `${g}-${y}`)) : m === "GlobalBlock" || m === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: f }) }) : c(g) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: m }) : null }) }, d._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
   return /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: pageBlocksAtomsAtom, blocks: o });
 }, StaticBlocksRenderer = () => {
-  const [o] = useBlocksStore(), n = isEmpty(o) ? null : /* @__PURE__ */ jsx(PageBlocksRenderer, {});
-  return /* @__PURE__ */ jsx(Fragment, { children: n });
+  const [o] = useBlocksStore(), [n] = useAtom$1(canvasRenderKeyAtom), r = isEmpty(o) ? null : /* @__PURE__ */ jsx(PageBlocksRenderer, {}, n);
+  return /* @__PURE__ */ jsx(Fragment, { children: r });
 }, useCanvasScale = (o) => {
   const [n] = useCanvasDisplayWidth(), [, r] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), c = useCallback(() => {
     const { width: d, height: p } = o;
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
       let g = {};
-      const h = p * u, f = d * u;
+      const m = p * u, f = 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 + "%",
+        height: 100 + (p - m) / m * 100 + "%",
         width: 100 + (d - f) / f * 100 + "%"
       }), i({
         position: "relative",
@@ -5374,16 +5431,16 @@ const RichTextEditor = memo(
     l(), o([]), r([]);
   }), null;
 }, StaticCanvas = () => {
-  const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [l, i] = useState({ width: 0, height: 0 }), c = useCanvasScale(l), [, d] = useCanvasIframe(), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), { onDragOver: g, onDrop: h, onDragEnd: f } = useDragAndDrop(), m = useDropIndicator(), x = useCallback(
+  const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [l, i] = useState({ width: 0, height: 0 }), c = useCanvasScale(l), [, d] = useCanvasIframe(), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), { onDragOver: g, onDrop: m, onDragEnd: f } = useDragAndDrop(), h = useDropIndicator(), x = useCallback(
     (y) => {
-      i((k) => ({ ...k, width: y }));
+      i((S) => ({ ...S, width: y }));
     },
     [i]
   );
   useEffect(() => {
     if (!a.current) return;
-    const { clientWidth: y, clientHeight: k } = a.current;
-    i({ width: y, height: k });
+    const { clientWidth: y, clientHeight: S } = a.current;
+    i({ width: y, height: S });
   }, [a, o]);
   const b = useMemo(() => {
     let y = IframeInitialContent;
@@ -5395,7 +5452,7 @@ const RichTextEditor = memo(
       onMouseLeave: () => setTimeout(() => n(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
       onDragOver: g,
-      onDrop: h,
+      onDrop: m,
       onDragEnd: f,
       ref: a,
       children: /* @__PURE__ */ jsxs(
@@ -5418,16 +5475,16 @@ const RichTextEditor = memo(
               ] }),
               /* @__PURE__ */ jsx(CanvasEventsWatcher, {})
             ] }),
-            m.isVisible && /* @__PURE__ */ jsx(
+            h.isVisible && /* @__PURE__ */ jsx(
               "div",
               {
                 id: "placeholder",
-                className: `pointer-events-none absolute z-[99999] max-w-full transition-all duration-150 ${m.isEmpty ? "bg-purple-500/10 outline-dashed outline-2 -outline-offset-2 outline-purple-500" : "rounded-full bg-green-500"}`,
+                className: `pointer-events-none absolute z-[99999] max-w-full transition-all duration-150 ${h.isEmpty ? "bg-purple-500/10 outline-dashed outline-2 -outline-offset-2 outline-purple-500" : "rounded-full bg-green-500"}`,
                 style: {
-                  top: m.top,
-                  left: m.left,
-                  width: m.width,
-                  height: m.height
+                  top: h.top,
+                  left: h.left,
+                  width: h.width,
+                  height: h.height
                 }
               }
             )
@@ -5442,7 +5499,7 @@ const RichTextEditor = memo(
     /* @__PURE__ */ jsx("p", { className: "font-semibold", children: o("Oops! Something went wrong.") }),
     /* @__PURE__ */ jsx("p", { children: o("Please try again.") })
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-SUsv-NS0.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-Ds3Sj2G3.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -5511,8 +5568,8 @@ const RichTextEditor = memo(
     ] })
   ] });
 }, 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 (m) => {
-    if (!m.trim()) {
+  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), m = async (h) => {
+    if (!h.trim()) {
       p(!1), g("Please enter a URL");
       return;
     }
@@ -5536,8 +5593,8 @@ const RichTextEditor = memo(
         {
           placeholder: f(`Enter ${r} URL`),
           value: a,
-          onChange: (m) => l(m.target.value),
-          onKeyUp: () => h(a)
+          onChange: (h) => l(h.target.value),
+          onKeyUp: () => m(a)
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -5581,18 +5638,18 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
   const n = ((l = o.split("/").pop()) == null ? void 0 : l.split("?")[0]) || "";
   return [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp", ".ico", ".avif"].some((i) => n.toLowerCase().endsWith(i)) ? n : "";
 }, ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
-  const { t: l } = useTranslation(), { selectedLang: i } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), p = usePageExternalData(), u = r.split(".").pop() || "", g = i ? `_${u}Id-${i}` : `_${u}Id`, h = isEmpty(i) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), f = get(c, g, h ? c == null ? void 0 : c.assetId : ""), m = useMemo(() => {
+  const { t: l } = useTranslation(), { selectedLang: i } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), p = usePageExternalData(), u = r.split(".").pop() || "", g = i ? `_${u}Id-${i}` : `_${u}Id`, m = isEmpty(i) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), f = get(c, g, m ? c == null ? void 0 : c.assetId : ""), h = useMemo(() => {
     if (!o || !c || !/\{\{.*?\}\}/.test(o)) return o;
-    const v = { ...c, [u]: o }, _ = applyBindingToBlockProps(v, p, { index: -1, key: "" });
-    return get(_, u, o);
-  }, [o, c, p, u]), x = !!f || m !== PLACEHOLDER_IMAGE, b = (S) => {
-    const v = isArray(S) ? first(S) : S;
+    const v = { ...c, [u]: o }, B = applyBindingToBlockProps(v, p, { index: -1, key: "" });
+    return get(B, u, o);
+  }, [o, c, p, u]), x = !!f || h !== PLACEHOLDER_IMAGE, b = (k) => {
+    const v = isArray(k) ? first(k) : k;
     if (v) {
       n(v == null ? void 0 : v.url);
-      const _ = v == null ? void 0 : v.width, E = v == null ? void 0 : v.height, I = g.includes("mobile");
+      const B = v == null ? void 0 : v.width, E = v == null ? void 0 : v.height, I = g.includes("mobile");
       if (c != null && c._id) {
         const C = {
-          ..._ && { [I ? "mobileWidth" : "width"]: _ },
+          ...B && { [I ? "mobileWidth" : "width"]: B },
           ...E && { [I ? "mobileHeight" : "height"]: E },
           ...v.description && { alt: v.description }
         };
@@ -5602,16 +5659,16 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     }
   }, y = useCallback(() => {
     if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
-      const S = {}, v = g.includes("mobile");
-      set(S, g, ""), set(S, v ? "mobileWidth" : "width", ""), set(S, v ? "mobileHeight" : "height", ""), d([c._id], S);
+      const k = {}, v = g.includes("mobile");
+      set(k, g, ""), set(k, v ? "mobileWidth" : "width", ""), set(k, v ? "mobileHeight" : "height", ""), d([c._id], k);
     }
-  }, [n, c == null ? void 0 : c._id, d, g]), k = getFileName(m);
+  }, [n, c == null ? void 0 : c._id, d, g]), S = getFileName(h);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-start gap-x-3", children: [
-    m ? /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+    h ? /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
       /* @__PURE__ */ jsx(
         "img",
         {
-          src: m,
+          src: h,
           className: "h-14 w-14 overflow-hidden rounded-md border border-border object-cover transition duration-200 " + (f && f !== "" ? "cursor-pointer group-hover:blur-sm" : ""),
           alt: ""
         }
@@ -5636,8 +5693,8 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: b, mode: "image", assetId: f, children: /* @__PURE__ */ jsx("div", { className: "h-14 w-14 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex w-3/5 flex-col", children: [
       /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { className: "max-w-[250px] truncate pr-2 text-xs text-gray-400", children: k }),
-        /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: b, assetId: "", children: /* @__PURE__ */ jsx("small", { className: "h-6 mb-1 w-full cursor-pointer rounded-md bg-secondary px-1 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: !isEmpty(m) && m !== PLACEHOLDER_IMAGE ? l("Replace image") : l("Choose image") }) }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-[250px] truncate pr-2 text-xs text-gray-400", children: S }),
+        /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: b, assetId: "", children: /* @__PURE__ */ jsx("small", { className: "h-6 mb-1 w-full cursor-pointer rounded-md bg-secondary px-1 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: !isEmpty(h) && h !== PLACEHOLDER_IMAGE ? l("Replace image") : l("Choose image") }) }),
         /* @__PURE__ */ jsx("div", { className: "text-center text-xs text-gray-400", children: "OR" })
       ] }),
       /* @__PURE__ */ jsx(
@@ -5651,25 +5708,25 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           className: "h-6  text-xs",
           placeholder: l("Enter image URL"),
           value: o === PLACEHOLDER_IMAGE ? "" : o,
-          onBlur: ({ target: { value: S } }) => a(r, S),
-          onChange: (S) => n(S.target.value)
+          onBlur: ({ target: { value: k } }) => a(r, k),
+          onChange: (k) => n(k.target.value)
         }
       )
     ] })
   ] });
 }, 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 f = (m) => r === "value" ? m === "value" || m === "object" : r === "array" ? m === "array" : m === r;
-      h.type === "object" ? (l((m) => [...m, h.key]), c(h.value)) : f(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 f = (h) => r === "value" ? h === "value" || h === "object" : r === "array" ? h === "array" : h === r;
+      m.type === "object" ? (l((h) => [...h, m.key]), c(m.value)) : f(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((f, m) => f[m], o));
+      const m = a.slice(0, -1);
+      l(m), c(m.reduce((f, h) => f[h], o));
     }
-  }, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([h, f]) => ({ key: h, value: f, type: d(f) })).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, f]) => ({ key: m, value: f, type: d(f) })).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: [
@@ -5679,36 +5736,36 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "mr-2 h-4 w-4" }),
           t("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(IdCardIcon, {}) : null,
-                startsWith(h.key, REPEATER_PREFIX) ? t("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(IdCardIcon, {}) : null,
+                startsWith(m.key, REPEATER_PREFIX) ? t("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: (f) => {
-                      f.stopPropagation(), n([...a, h.key].join("."), r);
+                      f.stopPropagation(), n([...a, m.key].join("."), r);
                     },
                     children: t("Select")
                   }
                 ),
-                h.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRightIcon, { 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(ChevronRightIcon, { className: "h-4 w-4 opacity-50" }) })
               ] })
             ]
           },
-          h.key
+          m.key
         ))
       ] })
     ] })
@@ -5760,51 +5817,51 @@ const DataBindingSelector = ({
 }) => {
   const l = usePageExternalData(), i = useBuilderProp("flags.dataBinding", !0), c = useSelectedBlockHierarchy(), d = useSelectedBlock(), p = useMemo(() => {
     if (c.length === 1) return "";
-    const h = c.find((x) => x._type === "Repeater"), m = get(h, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
-    return `${REPEATER_PREFIX}${startsWith(m, COLLECTION_PREFIX) ? `${m}/${h._id}` : m}`;
+    const m = c.find((x) => x._type === "Repeater"), h = get(m, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
+    return `${REPEATER_PREFIX}${startsWith(h, COLLECTION_PREFIX) ? `${h}/${m._id}` : h}`;
   }, [c]), u = useMemo(() => first(get(l, p.replace(REPEATER_PREFIX, ""), [])), [p, l]), g = useCallback(
-    (h, f) => {
-      if (h = isEmpty(p) ? h : h.replace(`${p}`, "$index"), f === "array" || f === "object") {
-        n(`{{${h}}}`, {}, r);
+    (m, f) => {
+      if (m = isEmpty(p) ? m : m.replace(`${p}`, "$index"), f === "array" || f === "object") {
+        n(`{{${m}}}`, {}, r);
         return;
       }
-      const m = (k) => /[.,!?;:]/.test(k), x = (k, S, v) => {
-        let _ = "", E = "";
-        const I = S > 0 ? k[S - 1] : "", C = S < k.length ? k[S] : "";
-        return S > 0 && (I === "." || !m(I) && I !== " ") && (_ = " "), S < k.length && !m(C) && C !== " " && (E = " "), {
-          text: _ + v + E,
-          prefixLength: _.length,
+      const h = (S) => /[.,!?;:]/.test(S), x = (S, k, v) => {
+        let B = "", E = "";
+        const I = k > 0 ? S[k - 1] : "", C = k < S.length ? S[k] : "";
+        return k > 0 && (I === "." || !h(I) && I !== " ") && (B = " "), k < S.length && !h(C) && C !== " " && (E = " "), {
+          text: B + v + E,
+          prefixLength: B.length,
           suffixLength: E.length
         };
       }, b = document.getElementById(r);
       if (!b) return;
       const y = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
       if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
-        const k = y.__chaiRTE;
-        if (k) {
-          const S = `{{${h}}}`;
-          k.commands.focus();
-          const { from: v, to: _ } = k.state.selection;
-          if (v !== _)
-            k.chain().deleteSelection().insertContent(S).run();
+        const S = y.__chaiRTE;
+        if (S) {
+          const k = `{{${m}}}`;
+          S.commands.focus();
+          const { from: v, to: B } = S.state.selection;
+          if (v !== B)
+            S.chain().deleteSelection().insertContent(k).run();
           else {
-            const { state: I } = k, C = I.selection.from, A = I.doc.textBetween(Math.max(0, C - 1), C), w = I.doc.textBetween(C, Math.min(C + 1, I.doc.content.size));
-            let B = "";
-            C > 0 && A !== " " && !m(A) && (B = " ");
+            const { state: I } = S, C = I.selection.from, A = I.doc.textBetween(Math.max(0, C - 1), C), w = I.doc.textBetween(C, Math.min(C + 1, I.doc.content.size));
             let j = "";
-            w && w !== " " && !m(w) && (j = " "), k.chain().insertContent(B + S + j).run();
+            C > 0 && A !== " " && !h(A) && (j = " ");
+            let _ = "";
+            w && w !== " " && !h(w) && (_ = " "), S.chain().insertContent(j + k + _).run();
           }
-          setTimeout(() => n(k.getHTML(), {}, r), 100);
+          setTimeout(() => n(S.getHTML(), {}, r), 100);
           return;
         }
       } else {
-        const k = b, S = k.selectionStart || 0, v = k.value || "", _ = k.selectionEnd || S;
-        if (_ > S) {
-          const w = `{{${h}}}`, { text: B } = x(v, S, w), j = v.slice(0, S) + B + v.slice(_);
-          n(j, {}, r);
+        const S = b, k = S.selectionStart || 0, v = S.value || "", B = S.selectionEnd || k;
+        if (B > k) {
+          const w = `{{${m}}}`, { text: j } = x(v, k, w), _ = v.slice(0, k) + j + v.slice(B);
+          n(_, {}, r);
           return;
         }
-        const I = `{{${h}}}`, { text: C } = x(v, S, I), A = v.slice(0, S) + C + v.slice(S);
+        const I = `{{${m}}}`, { text: C } = x(v, k, I), A = v.slice(0, k) + C + v.slice(k);
         n(A, {}, r);
       }
     },
@@ -5827,13 +5884,13 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var A;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (w, B) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, f] = useState(""), [m, x] = useState([]), [b, y] = useState(-1), k = useRef(null), S = (A = n == null ? void 0 : n.find((w) => w.key === u)) == null ? void 0 : A.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (w, j) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), S = useRef(null), k = (A = n == null ? void 0 : n.find((w) => w.key === u)) == null ? void 0 : A.name;
   useEffect(() => {
     if (f(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const w = split(o, ":"), B = get(w, 1, "page") || "page";
-    g(B), (async () => {
-      const j = await l(B, [get(w, 2, "page")]);
-      j && Array.isArray(j) && f(get(j, [0, "name"], ""));
+    const w = split(o, ":"), j = get(w, 1, "page") || "page";
+    g(j), (async () => {
+      const _ = await l(j, [get(w, 2, "page")]);
+      _ && Array.isArray(_) && f(get(_, [0, "name"], ""));
     })();
   }, [o]);
   const v = useDebouncedCallback(
@@ -5841,27 +5898,27 @@ const DataBindingSelector = ({
       if (isEmpty(w))
         x([]);
       else {
-        const B = await l(u, w);
-        x(B);
+        const j = await l(u, w);
+        x(j);
       }
       c(!1), y(-1);
     },
     [u],
     300
-  ), _ = (w) => {
-    const B = ["pageType", u, w.id];
-    B[1] && (r(B.join(":")), f(w.name), p(!1), x([]), y(-1));
+  ), B = (w) => {
+    const j = ["pageType", u, w.id];
+    j[1] && (r(j.join(":")), f(w.name), p(!1), x([]), y(-1));
   }, E = (w) => {
     switch (w.key) {
       case "ArrowDown":
-        w.preventDefault(), y((B) => B < m.length - 1 ? B + 1 : B);
+        w.preventDefault(), y((j) => j < h.length - 1 ? j + 1 : j);
         break;
       case "ArrowUp":
-        w.preventDefault(), y((B) => B > 0 ? B - 1 : B);
+        w.preventDefault(), y((j) => j > 0 ? j - 1 : j);
         break;
       case "Enter":
-        if (w.preventDefault(), m.length === 0) return;
-        b >= 0 && _(m[b]);
+        if (w.preventDefault(), h.length === 0) return;
+        b >= 0 && B(h[b]);
         break;
       case "Escape":
         w.preventDefault(), I();
@@ -5869,8 +5926,8 @@ const DataBindingSelector = ({
     }
   };
   useEffect(() => {
-    if (b >= 0 && k.current) {
-      const w = k.current.children[b];
+    if (b >= 0 && S.current) {
+      const w = S.current.children[b];
       w == null || w.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
@@ -5886,28 +5943,28 @@ const DataBindingSelector = ({
         "input",
         {
           type: "text",
-          value: h,
+          value: m,
           onChange: (w) => C(w.target.value),
           onKeyDown: E,
-          placeholder: a(`Search ${S ?? ""}`),
+          placeholder: a(`Search ${k ?? ""}`),
           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: I, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: I, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(m) || d && isEmpty(m)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(h) || d && isEmpty(h)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(m) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(h) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      h,
+      m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: k, children: map(m == null ? void 0 : m.slice(0, 20), (w, B) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: S, children: map(h == null ? void 0 : h.slice(0, 20), (w, j) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => _(w),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(w.id) ? "bg-blue-200" : B === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => B(w),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(w.id) ? "bg-blue-200" : j === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           w.name,
           " ",
@@ -5922,15 +5979,15 @@ const DataBindingSelector = ({
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
-  const { t: l } = useTranslation(), { type: i = "pageType", href: c = "", target: d = "self" } = n ?? {}, p = useBuilderProp("pageTypes", []), { selectedLang: u, fallbackLang: g, languages: h } = useLanguages(), f = useMemo(
-    () => isEmpty(h) ? "" : isEmpty(u) ? g : u,
-    [h, u, g]
-  ), m = useMemo(() => get(LANGUAGES, f, f), [f]), x = i === "pageType" && isEmpty(p) ? "url" : i;
+  const { t: l } = useTranslation(), { type: i = "pageType", href: c = "", target: d = "self" } = n ?? {}, p = useBuilderProp("pageTypes", []), { selectedLang: u, fallbackLang: g, languages: m } = useLanguages(), f = useMemo(
+    () => isEmpty(m) ? "" : isEmpty(u) ? g : u,
+    [m, u, g]
+  ), h = useMemo(() => get(LANGUAGES, f, f), [f]), x = i === "pageType" && isEmpty(p) ? "url" : i;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-x-2 text-xs font-medium", children: [
       /* @__PURE__ */ jsxs("span", { children: [
         (o == null ? void 0 : o.title) ?? "Link",
-        /* @__PURE__ */ jsx("span", { className: "pl-1 text-[9px] text-zinc-400", children: m })
+        /* @__PURE__ */ jsx("span", { className: "pl-1 text-[9px] text-zinc-400", children: h })
       ] }),
       /* @__PURE__ */ jsx(
         DataBindingSelector,
@@ -6012,18 +6069,18 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-BHGfvz4u.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: l, onBlur: i }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-ChFbdN-q.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: l, onBlur: i }) => {
   const c = useRef(null), [d, p] = useState(!1), u = useRTEditor({
     blockId: o,
     value: a,
     placeholder: r,
     onBlur: ({ editor: f }) => {
-      const m = f == null ? void 0 : f.getHTML();
-      i(n, m);
+      const h = f == null ? void 0 : f.getHTML();
+      i(n, h);
     },
     onUpdate: ({ editor: f }) => {
-      const m = f == null ? void 0 : f.getHTML();
-      l(m);
+      const h = f == null ? void 0 : f.getHTML();
+      l(h);
     }
   });
   useEffect(() => {
@@ -6031,7 +6088,7 @@ const DataBindingSelector = ({
   }, [o, u]);
   const g = () => {
     p(!1);
-  }, h = /* @__PURE__ */ jsxs("div", { id: `chai-rte-${n}`, ref: c, className: "mt-1 rounded-md border border-input", children: [
+  }, m = /* @__PURE__ */ jsxs("div", { id: `chai-rte-${n}`, ref: c, className: "mt-1 rounded-md border border-input", children: [
     /* @__PURE__ */ jsx(RteMenubar, { editor: u, onExpand: () => p(!0) }),
     /* @__PURE__ */ jsx(
       EditorContent,
@@ -6045,8 +6102,8 @@ const DataBindingSelector = ({
     )
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    d && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(RTEModal, { isOpen: d, onClose: g, editor: u, rteElement: h }) }),
-    d ? /* @__PURE__ */ jsx("div", { children: "Open in modal" }) : /* @__PURE__ */ jsx("div", { className: "relative", children: h })
+    d && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(RTEModal, { isOpen: d, onClose: g, editor: u, rteElement: m }) }),
+    d ? /* @__PURE__ */ jsx("div", { children: "Open in modal" }) : /* @__PURE__ */ jsx("div", { className: "relative", children: m })
   ] });
 }, RichTextEditorField = (o) => {
   const { editingBlockId: n } = useInlineEditing(), [r, a] = useState(null), l = useSelectedBlock(), i = l == null ? void 0 : l._id;
@@ -6064,7 +6121,7 @@ const DataBindingSelector = ({
   }, [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 b = (x + 1) % u.length, y = get(u, [b, "_id"]);
@@ -6078,7 +6135,7 @@ const DataBindingSelector = ({
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
-  }, m = () => {
+  }, h = () => {
     const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
@@ -6096,11 +6153,11 @@ const DataBindingSelector = ({
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) }),
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: m,
+          onClick: h,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircledIcon, { className: "h-3 w-3" }),
@@ -6174,7 +6231,7 @@ const DataBindingSelector = ({
   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, {}] });
@@ -6258,28 +6315,28 @@ const DataBindingSelector = ({
     u.map((g) => /* @__PURE__ */ jsx("option", { value: g.id, children: g.name }, g.id))
   ] }) });
 }, JSONFormFieldTemplate = (o) => {
-  const { id: n, classNames: r, label: a, children: l, errors: i, help: c, hidden: d, required: p, schema: u, formData: g, onChange: h } = o, { selectedLang: f, fallbackLang: m, languages: x } = useLanguages(), b = useMemo(
-    () => isEmpty(x) ? "" : isEmpty(f) ? m : f,
-    [x, f, m]
-  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), k = usePageExternalData(), S = useSelectedBlock(), v = useRegisteredChaiBlocks(), _ = useMemo(
-    () => get(v, [S == null ? void 0 : S._type, "i18nProps"], []),
-    [v, S == null ? void 0 : S._type]
+  const { id: n, classNames: r, label: a, children: l, errors: i, help: c, hidden: d, required: p, schema: u, formData: g, onChange: m } = o, { selectedLang: f, fallbackLang: h, languages: x } = useLanguages(), b = useMemo(
+    () => isEmpty(x) ? "" : isEmpty(f) ? h : f,
+    [x, f, h]
+  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), S = usePageExternalData(), k = useSelectedBlock(), v = useRegisteredChaiBlocks(), B = useMemo(
+    () => get(v, [k == null ? void 0 : k._type, "i18nProps"], []),
+    [v, k == null ? void 0 : k._type]
   ), [E, I] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: l });
-  const A = _ == null ? void 0 : _.includes(n.replace("root.", ""));
+  const A = B == null ? void 0 : B.includes(n.replace("root.", ""));
   if (u.type === "array") {
-    const j = E === n;
+    const _ = E === n;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
       u.title && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1", children: /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: n,
-          onClick: () => I(j ? null : n),
+          onClick: () => I(_ ? null : n),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            j ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
+            _ ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(ListBulletIcon, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: a }),
             " ",
@@ -6298,14 +6355,14 @@ const DataBindingSelector = ({
           ]
         }
       ) }),
-      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: l }) : /* @__PURE__ */ jsxs("div", { className: `${j ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: l }) : /* @__PURE__ */ jsxs("div", { className: `${_ ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         l,
         i,
         c
       ] })
     ] });
   }
-  const w = n.replace("root.", ""), B = _.includes(w) && !isEmpty(f) && isEmpty(g);
+  const w = n.replace("root.", ""), j = B.includes(w) && !isEmpty(f) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
     u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -6323,8 +6380,8 @@ const DataBindingSelector = ({
           /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
         ] }) })
       ] }),
-      !u.enum && !u.oneOf && k && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
-        B ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      !u.enum && !u.oneOf && S && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
+        j ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -6355,8 +6412,8 @@ const DataBindingSelector = ({
           DataBindingSelector,
           {
             schema: u,
-            onChange: (j) => {
-              h(j, g, n);
+            onChange: (_) => {
+              m(_, g, n);
             },
             id: n,
             formData: g
@@ -6406,8 +6463,8 @@ const DataBindingSelector = ({
   /* @__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) => {
-      get(g, h) === void 0 && set(g, h, ""), l({ formData: g }, h);
+    async ({ formData: g }, m) => {
+      get(g, m) === void 0 && set(g, m, ""), l({ formData: g }, m);
     },
     [l, i],
     400
@@ -6448,9 +6505,9 @@ const DataBindingSelector = ({
       uiSchema: r,
       schema: n,
       formData: a,
-      onChange: ({ formData: g }, h) => {
-        if (!h || o !== (g == null ? void 0 : g._id)) return;
-        const f = take(h.split("."), 2).join(".").replace("root.", "");
+      onChange: ({ formData: g }, m) => {
+        if (!m || o !== (g == null ? void 0 : g._id)) return;
+        const f = take(m.split("."), 2).join(".").replace("root.", "");
         u({ formData: g }, f);
       }
     },
@@ -6463,18 +6520,18 @@ const DataBindingSelector = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, h), m = ({ formData: E }, I, C) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: E }, I, C) => {
     I && (c == null ? void 0 : c._id) === n._id && a([n._id], { [I]: get(E, I) }, C);
   }, x = useCallback(
     debounce(({ formData: E }, I, C) => {
-      m({ formData: E }, I, C), d(E);
+      h({ formData: E }, I, C), d(E);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), b = ({ formData: E }, I) => {
     I && (r([n._id], { [I]: get(E, I) }), x({ formData: E }, I, { [I]: get(c, I) }));
   }, y = ({ formData: E }, I) => {
     I && (r([g._id], { [I]: get(E, I) }), x({ formData: E }, I, { [I]: get(c, I) }));
-  }, { schema: k, uiSchema: S } = useMemo(() => {
+  }, { schema: S, uiSchema: k } = useMemo(() => {
     const E = n == null ? void 0 : n._type;
     if (!E)
       return { schema: {}, uiSchema: {} };
@@ -6488,7 +6545,7 @@ function BlockSettings() {
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [n]), { wrapperSchema: v, wrapperUiSchema: _ } = useMemo(() => {
+  }, [n]), { wrapperSchema: v, wrapperUiSchema: B } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
     const E = g == null ? void 0 : g._type, { schema: I = {}, uiSchema: C = {} } = getBlockFormSchemas(E);
@@ -6521,29 +6578,29 @@ function BlockSettings() {
           onChange: y,
           formData: f,
           schema: v,
-          uiSchema: _
+          uiSchema: B
         }
       ) })
     ] }),
-    isEmpty(k) ? null : /* @__PURE__ */ jsx(
+    isEmpty(S) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
         onChange: b,
         formData: i,
-        schema: k,
-        uiSchema: S
+        schema: S,
+        uiSchema: k
       }
     )
   ] });
 }
 const BlockStylingProps = () => {
-  var m;
+  var h;
   const o = useSelectedBlock(), [n, r] = useSelectedStylingBlocks(), a = useRemoveClassesFromBlocks(), [l] = useSelectedBlockIds(), { t: i } = useTranslation();
   if (!o) return null;
   const c = Object.keys(o).filter(
     (x) => typeof o[x] == "string" && o[x].startsWith("#styles:")
-  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (m = n[0]) == null ? void 0 : m.prop, ""), { classes: g = "" } = getSplitChaiClasses(u) || {}, h = g ? g.split(" ").filter((x) => !isEmpty(x)) : [], f = (x) => find(n, (b) => b.prop === x);
+  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (h = n[0]) == null ? void 0 : h.prop, ""), { classes: g = "" } = getSplitChaiClasses(u) || {}, m = g ? g.split(" ").filter((x) => !isEmpty(x)) : [], f = (x) => find(n, (b) => b.prop === x);
   return /* @__PURE__ */ jsx(Fragment, { children: p && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
       i("Style element"),
@@ -6585,7 +6642,7 @@ const BlockStylingProps = () => {
                 {
                   className: "text-xs",
                   onClick: () => {
-                    a(l, h, !0);
+                    a(l, m, !0);
                   },
                   children: i("Clear styles")
                 }
@@ -6743,37 +6800,37 @@ 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, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [m, x] = useState(!1), [b, y] = useState(""), [k, S] = useState(!1), [v, _] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [b, y] = useState(""), [S, k] = useState(!1), [v, B] = useState(!1);
   useEffect(() => {
-    const { value: w, unit: B } = getClassValueAndUnit(i);
-    if (B === "") {
+    const { value: w, unit: j } = getClassValueAndUnit(i);
+    if (j === "") {
       l(w), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    f(B), l(B === "class" || isEmpty(w) ? "" : w);
+    f(j), l(j === "class" || isEmpty(w) ? "" : w);
   }, [i, p, u]);
   const E = useThrottledCallback((w) => c(w), [c], THROTTLE_TIME), I = useThrottledCallback((w) => c(w, !1), [c], THROTTLE_TIME), C = useCallback(
     (w = !1) => {
-      const B = getUserInputValues(`${a}`, u);
-      if (get(B, "error", !1)) {
+      const j = getUserInputValues(`${a}`, u);
+      if (get(j, "error", !1)) {
         x(!0);
         return;
       }
-      const j = get(B, "unit") !== "" ? get(B, "unit") : h;
-      if (j === "auto" || j === "none") {
-        E(`${d}${j}`);
+      const _ = get(j, "unit") !== "" ? get(j, "unit") : m;
+      if (_ === "auto" || _ === "none") {
+        E(`${d}${_}`);
         return;
       }
-      if (get(B, "value") === "")
+      if (get(j, "value") === "")
         return;
-      const L = `${get(B, "value", "").startsWith("-") ? "-" : ""}${d}[${get(B, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      w ? I(L) : E(L);
+      const T = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      w ? I(T) : E(T);
     },
-    [E, I, a, h, d, u]
+    [E, I, a, m, d, u]
   ), A = useCallback(
     (w) => {
-      const B = getUserInputValues(`${a}`, u);
-      if (get(B, "error", !1)) {
+      const j = getUserInputValues(`${a}`, u);
+      if (get(j, "error", !1)) {
         x(!0);
         return;
       }
@@ -6781,14 +6838,14 @@ const BlockStylingProps = () => {
         E(`${d}${w}`);
         return;
       }
-      if (get(B, "value") === "")
+      if (get(j, "value") === "")
         return;
-      const j = get(B, "unit") !== "" ? get(B, "unit") : w, L = `${get(B, "value", "").startsWith("-") ? "-" : ""}${d}[${get(B, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      E(L);
+      const _ = get(j, "unit") !== "" ? get(j, "unit") : w, T = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      E(T);
     },
     [E, a, d, u]
   );
-  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  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",
       {
@@ -6801,40 +6858,40 @@ const BlockStylingProps = () => {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${k ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${S ? "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: (w) => {
             w.key === "Enter" && C();
           },
           onKeyDown: (w) => {
             if (w.keyCode !== 38 && w.keyCode !== 40)
               return;
-            w.preventDefault(), _(!0);
-            const B = parseInt$1(w.target.value);
-            let j = isNaN$1(B) ? 0 : B;
-            w.keyCode === 38 && (j += 1), w.keyCode === 40 && (j -= 1);
-            const N = `${j}`, D = `${N.startsWith("-") ? "-" : ""}${d}[${N.replace("-", "")}${h === "-" ? "" : h}]`;
+            w.preventDefault(), B(!0);
+            const j = parseInt$1(w.target.value);
+            let _ = isNaN$1(j) ? 0 : j;
+            w.keyCode === 38 && (_ += 1), w.keyCode === 40 && (_ -= 1);
+            const N = `${_}`, D = `${N.startsWith("-") ? "-" : ""}${d}[${N.replace("-", "")}${m === "-" ? "" : m}]`;
             I(D);
           },
           onKeyUp: (w) => {
-            v && (w.preventDefault(), _(!1));
+            v && (w.preventDefault(), B(!1));
           },
           onBlur: () => C(),
           onChange: (w) => {
             x(!1), l(w.target.value);
           },
           onClick: (w) => {
-            var B;
-            (B = w == null ? void 0 : w.target) == null || B.select(), r(!1);
+            var j;
+            (j = w == null ? void 0 : w.target) == null || j.select(), r(!1);
           },
-          value: k ? b : a,
+          value: S ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            m ? "border-red-500 text-red-500" : "border-foreground/20"
+            h ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6846,7 +6903,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
             ]
           }
@@ -6855,7 +6912,7 @@ const BlockStylingProps = () => {
           UnitSelection,
           {
             units: u,
-            current: h,
+            current: m,
             onSelect: (w) => {
               r(!1), f(w), A(w);
             }
@@ -6863,25 +6920,25 @@ const BlockStylingProps = () => {
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || k ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || S ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => S(!0),
+        onDragStart: () => k(!0),
         onDragEnd: (w) => {
-          if (y(() => ""), S(!1), isEmpty(w))
+          if (y(() => ""), k(!1), isEmpty(w))
             return;
-          const B = `${w}`, N = `${B.startsWith("-") ? "-" : ""}${d}[${B.replace("-", "")}${h === "-" ? "" : h}]`;
+          const j = `${w}`, N = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
           E(N);
         },
         onDrag: (w) => {
           if (isEmpty(w))
             return;
           y(w);
-          const B = `${w}`, N = `${B.startsWith("-") ? "-" : ""}${d}[${B.replace("-", "")}${h === "-" ? "" : h}]`;
+          const j = `${w}`, N = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
           I(N);
         },
         currentValue: a,
-        unit: h,
+        unit: m,
         negative: g,
         cssProperty: p
       }
@@ -6941,7 +6998,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", ""), f = 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", ""), f = useCallback(
     // eslint-disable-next-line no-shadow
     (b) => {
       ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
@@ -6953,7 +7010,7 @@ const COLOR_PROP = {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const m = useCallback(
+  const h = useCallback(
     // eslint-disable-next-line no-shadow
     (b) => {
       p({ color: g, shade: b });
@@ -7007,7 +7064,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: m, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: h, options: i }) })
   ] });
 }, 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" }) }),
@@ -7341,7 +7398,7 @@ 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), f = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(h, "fullCls", ""), [h]), y = useCallback(
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
     (I, C = !0) => {
       const A = { dark: p, mq: g, mod: u, cls: I, property: l, fullCls: "" };
       (p || u !== "") && (A.mq = "xs");
@@ -7349,13 +7406,13 @@ const COLOR_PROP = {
       f(x, [w], C);
     },
     [x, p, g, u, l, f]
-  ), k = useCallback(() => {
-    m(x, [b], !0);
-  }, [x, b, m]), S = useMemo(() => canChangeClass(h, g), [h, g]);
+  ), S = useCallback(() => {
+    h(x, [b], !0);
+  }, [x, b, h]), k = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(S, h);
-  }, [S, i, h]);
-  const [, , v] = useScreenSizeWidth(), _ = useCallback(
+    i(k, m);
+  }, [k, i, m]);
+  const [, , v] = useScreenSizeWidth(), B = useCallback(
     (I) => {
       v({
         xs: 400,
@@ -7367,15 +7424,15 @@ const COLOR_PROP = {
       }[I]);
     },
     [v]
-  ), E = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: S, canReset: h && E, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${h && !E ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), E = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: k, canReset: m && E, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !E ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
           AdvanceChoices,
           {
-            currentClass: get(h, "cls", ""),
+            currentClass: get(m, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: y,
@@ -7388,7 +7445,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: E ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => k(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: E ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : k && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -7400,19 +7457,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: () => _(get(h, "mq")),
+              onClick: () => B(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()
               ]
             }
           )
@@ -7429,7 +7486,7 @@ const COLOR_PROP = {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), h = useCallback((f) => map(g, "property").includes(f), [g]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((f) => map(g, "property").includes(f), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7437,18 +7494,18 @@ 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: f, key: m }, 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: f, key: h }, 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",
               {
                 type: "button",
-                onClick: () => u(m),
-                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                onClick: () => u(h),
+                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${h === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                 children: [
                   React__default.createElement("div", {
-                    className: h(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    className: m(h) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                   }),
-                  React__default.createElement(get(EDITOR_ICONS, m, BoxIcon), { className: "text-inherit w-3 h-3" })
+                  React__default.createElement(get(EDITOR_ICONS, h, BoxIcon), { className: "text-inherit w-3 h-3" })
                 ]
               }
             ) }),
@@ -7575,7 +7632,7 @@ const COLOR_PROP = {
   icon: p,
   onClick: u,
   buttonClass: g = "",
-  activeButtonClass: h = ""
+  activeButtonClass: m = ""
 }) => {
   const { t: f } = useTranslation();
   return r ? /* @__PURE__ */ jsxs(HoverCard, { openDelay: n, children: [
@@ -7584,7 +7641,7 @@ const COLOR_PROP = {
       {
         onClick: () => u(d),
         size: "sm",
-        className: cn$1("h-7 w-7 rounded-md p-1", c === i ? h : g),
+        className: cn$1("h-7 w-7 rounded-md p-1", c === i ? m : g),
         variant: c === i ? "outline" : "ghost",
         children: p
       }
@@ -7610,33 +7667,33 @@ const COLOR_PROP = {
   buttonClass: a = "",
   activeButtonClass: l = ""
 }) => {
-  const [i, , c] = useScreenSizeWidth(), [d, p] = useCanvasDisplayWidth(), [u, g] = useSelectedBreakpoints(), h = u, f = g, { t: m } = useTranslation(), x = useBuilderProp("breakpoints", WEB_BREAKPOINTS), b = (S) => {
-    h.includes(S) ? h.length > 2 && f(h.filter((v) => v !== S)) : f((v) => [...v, S]);
-  }, y = (S) => {
-    n || c(S), p(S);
-  }, k = getBreakpointValue(n ? d : i).toLowerCase();
-  return x.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(x, (S) => /* @__PURE__ */ createElement(
+  const [i, , c] = useScreenSizeWidth(), [d, p] = useCanvasDisplayWidth(), [u, g] = useSelectedBreakpoints(), m = u, f = g, { t: h } = useTranslation(), x = useBuilderProp("breakpoints", WEB_BREAKPOINTS), b = (k) => {
+    m.includes(k) ? m.length > 2 && f(m.filter((v) => v !== k)) : f((v) => [...v, k]);
+  }, y = (k) => {
+    n || c(k), p(k);
+  }, S = getBreakpointValue(n ? d : i).toLowerCase();
+  return x.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(x, (k) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
-      ...S,
+      ...k,
       onClick: y,
-      key: S.breakpoint,
-      currentBreakpoint: k
+      key: k.breakpoint,
+      currentBreakpoint: S
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
-      x.filter((S) => includes(h, toUpper(S.breakpoint))),
-      (S) => /* @__PURE__ */ createElement(
+      x.filter((k) => includes(m, toUpper(k.breakpoint))),
+      (k) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
           canvas: n,
           openDelay: o,
           tooltip: r,
-          ...S,
+          ...k,
           onClick: y,
-          key: S.breakpoint,
-          currentBreakpoint: k,
+          key: k.breakpoint,
+          currentBreakpoint: S,
           buttonClass: a,
           activeButtonClass: l
         }
@@ -7645,18 +7702,18 @@ const COLOR_PROP = {
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer rounded-md p-1 hover:bg-background", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: m("Screen sizes") }),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: h("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(x, (S) => /* @__PURE__ */ jsx(
+        map(x, (k) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
-            disabled: S.breakpoint === "xs",
-            onCheckedChange: () => b(toUpper(S.breakpoint)),
-            checked: includes(h, toUpper(S.breakpoint)),
+            disabled: k.breakpoint === "xs",
+            onCheckedChange: () => b(toUpper(k.breakpoint)),
+            checked: includes(m, toUpper(k.breakpoint)),
             onSelect: (v) => v.preventDefault(),
-            children: m(S.title)
+            children: h(k.title)
           },
-          S.breakpoint
+          k.breakpoint
         ))
       ] })
     ] })
@@ -7681,24 +7738,24 @@ function BreakpointSelector() {
 }
 function ManualClasses() {
   var N;
-  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(), [f, m] = useState(""), x = (N = first(d)) == null ? void 0 : N.prop, { classes: b } = getSplitChaiClasses(get(p, x, "")), y = b.split(" ").filter((L) => !isEmpty(L)), k = useBuilderProp("flags.copyPaste", !0), S = () => {
-    const L = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(h, L, !0), m("");
-  }, [v, _] = useState([]), E = ({ value: L }) => {
-    const D = L.trim().toLowerCase(), P = D.match(/.+:/g);
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), [f, h] = useState(""), x = (N = first(d)) == null ? void 0 : N.prop, { classes: b } = getSplitChaiClasses(get(p, x, "")), y = b.split(" ").filter((T) => !isEmpty(T)), S = useBuilderProp("flags.copyPaste", !0), k = () => {
+    const T = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(m, T, !0), h("");
+  }, [v, B] = useState([]), E = ({ value: T }) => {
+    const D = T.trim().toLowerCase(), P = D.match(/.+:/g);
     let R = [];
     if (P && P.length > 0) {
-      const [M] = P, T = D.replace(M, "");
-      R = i.search(T).map(($) => ({
-        ...$,
-        item: { ...$.item, name: M + $.item.name }
+      const [M] = P, L = D.replace(M, "");
+      R = i.search(L).map((H) => ({
+        ...H,
+        item: { ...H.item, name: M + H.item.name }
       }));
     } else
       R = i.search(D);
-    return _(map(R, "item"));
+    return B(map(R, "item"));
   }, I = () => {
-    _([]);
-  }, C = (L) => L.name, A = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), w = useMemo(
+    B([]);
+  }, C = (T) => T.name, A = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), w = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -7707,23 +7764,23 @@ function ManualClasses() {
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
       value: f,
-      onFocus: (L) => {
+      onFocus: (T) => {
         setTimeout(() => {
-          L.target && L.target.select();
+          T.target && T.target.select();
         }, 0);
       },
-      onKeyDown: (L) => {
-        L.key === "Enter" && f.trim() !== "" && S();
+      onKeyDown: (T) => {
+        T.key === "Enter" && f.trim() !== "" && k();
       },
-      onChange: (L, { newValue: D }) => m(D),
+      onChange: (T, { newValue: D }) => h(D),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [f, c, o]
-  ), B = (L) => {
+  ), j = (T) => {
     debugger;
     const D = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(h, [L]), u(h, D, !0), r(""), l(-1);
-  }, j = () => {
+    g(m, [T]), u(m, D, !0), r(""), l(-1);
+  }, _ = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
@@ -7733,8 +7790,8 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: c("Classes") }),
-      k && /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: j, className: "cursor-pointer" }) }),
+      S && /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: _, className: "cursor-pointer" }) }),
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
       ] })
     ] }) }),
@@ -7763,7 +7820,7 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: S,
+          onClick: k,
           disabled: f.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
@@ -7771,17 +7828,17 @@ function ManualClasses() {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: y.map(
-      (L, D) => a === D ? /* @__PURE__ */ jsx(
+      (T, D) => a === D ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: n,
           onChange: (P) => r(P.target.value),
           onBlur: () => {
-            B(L);
+            j(T);
           },
           onKeyDown: (P) => {
-            P.key === "Enter" && B(L);
+            P.key === "Enter" && j(T);
           },
           onFocus: (P) => {
             setTimeout(() => {
@@ -7790,12 +7847,12 @@ function ManualClasses() {
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
         },
-        L
+        T
       ) : /* @__PURE__ */ jsx("div", { className: "group relative flex max-w-[260px] items-center", children: /* @__PURE__ */ jsxs(
         "button",
         {
           onDoubleClick: () => {
-            m(L), g(h, [L]), setTimeout(() => {
+            h(T), g(m, [T]), setTimeout(() => {
               o.current && o.current.focus();
             }, 10);
           },
@@ -7805,7 +7862,7 @@ function ManualClasses() {
               /* @__PURE__ */ jsx(
                 Cross2Icon,
                 {
-                  onClick: () => g(h, [L], !0),
+                  onClick: () => g(m, [T], !0),
                   className: "hidden h-max w-3.5 cursor-pointer rounded bg-gray-100 p-0.5 text-red-500 hover:bg-gray-50 group-hover:block"
                 }
               ),
@@ -7832,10 +7889,10 @@ function ManualClasses() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { children: L })
+            /* @__PURE__ */ jsx("div", { children: T })
           ]
         }
-      ) }, L)
+      ) }, T)
     ) })
   ] });
 }
@@ -7948,13 +8005,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const g = !get(i, "negative", !1), h = get(i, "cssProperty", "");
+      const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
       let f = parseFloat(i.dragStartValue);
       f = isNaN(f) ? 0 : f;
-      let m = MAPPER[i.dragUnit];
-      (startsWith(h, "scale") || h === "opacity") && (m = 10);
-      let b = (i.dragStartY - u.pageY) / m + f;
-      g && b < 0 && (b = 0), h === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
+      let h = MAPPER[i.dragUnit];
+      (startsWith(m, "scale") || m === "opacity") && (h = 10);
+      let b = (i.dragStartY - u.pageY) / h + f;
+      g && b < 0 && (b = 0), m === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -8002,7 +8059,7 @@ const CoreBlock = ({
     } else
       d(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, g = useIsDragAndDropEnabled(), { t: h } = useTranslation(), { onDragStart: f, onDragEnd: m } = useDragAndDrop();
+  }, g = useIsDragAndDropEnabled(), { t: m } = useTranslation(), { onDragStart: f, onDragEnd: h } = useDragAndDrop();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
@@ -8011,16 +8068,16 @@ const CoreBlock = ({
         onClick: u,
         type: "button",
         onDragStart: (x) => f(x, { ...o, label: c, icon: i }),
-        onDragEnd: m,
+        onDragEnd: h,
         draggable: g,
         className: `${kebabCase(`chai-block-${l}`)} ${g ? "cursor-grab active:cursor-grabbing" : "cursor-pointer"} space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground ${n ? "opacity-50" : ""}`,
         children: [
           createElement(i || BoxIcon, { className: "w-4 h-4 mx-auto", "data-add-core-block-icon": l }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(h(c || l)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(m(c || l)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: h(c || l) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: m(c || l) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -8051,8 +8108,8 @@ const registerChaiPreImportHTMLHook = (o) => {
 }) => {
   const { t: a } = useTranslation(), [l, i] = useState(""), { addPredefinedBlock: c } = useAddBlock(), [d, p] = useState(!1), u = async () => {
     p(!0);
-    const g = await getPreImportHTML(l), h = getBlocksFromHTML(g);
-    c([...h], o, n), i(""), p(!1), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+    const g = await getPreImportHTML(l), m = getBlocksFromHTML(g);
+    c([...m], o, n), i(""), p(!1), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
   };
   return /* @__PURE__ */ jsxs(Card, { className: `border-border/0 p-0 shadow-none ${r ? "w-full" : "max-w-full"}`, children: [
     /* @__PURE__ */ jsx(CardHeader, { className: r ? "p-0" : "p-3", children: /* @__PURE__ */ jsx(CardDescription, { className: r ? "text-xs" : "", children: a("Use HTML snippets from Tailwind CSS component libraries") }) }),
@@ -8141,50 +8198,50 @@ const registerChaiLibrary = (o, n) => {
   draggable: c,
   className: d = ""
 }) => {
-  const { onDragStart: p, onDragEnd: u } = useDragAndDrop(), g = useIsDragAndDropEnabled(), [, h] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), m = c !== void 0 ? c : g;
+  const { onDragStart: p, onDragEnd: u } = useDragAndDrop(), g = useIsDragAndDropEnabled(), [, m] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), h = c !== void 0 ? c : g;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      draggable: m,
+      draggable: h,
       onDragStart: async (y) => {
         try {
           if (l) {
             l(y);
             return;
           }
-          let k = null;
+          let S = null;
           if (n) {
-            const S = typeof n == "function" ? await n() : n, v = getBlocksFromHTML(S);
+            const k = typeof n == "function" ? await n() : n, v = getBlocksFromHTML(k);
             if (isEmpty(v)) return;
-            k = {
+            S = {
               type: "Box",
               blocks: v,
               name: get(v, "0._type", "Block")
             };
           } else if (r) {
-            const S = typeof r == "function" ? await r() : r;
-            if (isEmpty(S)) return;
-            k = {
+            const k = typeof r == "function" ? await r() : r;
+            if (isEmpty(k)) return;
+            S = {
               type: "Box",
-              blocks: S,
-              name: get(S, "0._type", "Block")
+              blocks: k,
+              name: get(k, "0._type", "Block")
             };
           } else if (o) {
-            const S = typeof o == "function" ? await o() : o;
-            k = typeof S == "object" ? omit(S, ["component", "icon"]) : S;
+            const k = typeof o == "function" ? await o() : o;
+            S = typeof k == "object" ? omit(k, ["component", "icon"]) : k;
           }
-          if (!k) return;
-          p(y, k, !0), setTimeout(() => {
-            h([]), f();
+          if (!S) return;
+          p(y, S, !0), setTimeout(() => {
+            m([]), f();
           }, 200);
-        } catch (k) {
-          console.error("Error in ChaiDraggableBlock drag start:", k);
+        } catch (S) {
+          console.error("Error in ChaiDraggableBlock drag start:", S);
         }
       },
       onDragEnd: (y) => {
         i ? i(y) : u();
       },
-      className: `${m ? "cursor-grab active:cursor-grabbing" : ""} ${d}`.trim(),
+      className: `${h ? "cursor-grab active:cursor-grabbing" : ""} ${d}`.trim(),
       children: a
     }
   );
@@ -8220,23 +8277,23 @@ const BlockCard = ({
   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 = get(o, "name", get(o, "label")), g = get(o, "description", ""), { onDragStart: h, onDragEnd: f } = useDragAndDrop(), m = useIsDragAndDropEnabled(), x = useCallback(
+  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), u = get(o, "name", get(o, "label")), g = get(o, "description", ""), { onDragStart: m, onDragEnd: f } = useDragAndDrop(), h = useIsDragAndDropEnabled(), x = useCallback(
     async (y) => {
       if (y.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      let k = await c({ library: n, block: o });
-      typeof k == "string" && (k = getBlocksFromHTML(k)), isEmpty(k) || p(syncBlocksWithDefaults(k), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK), setTimeout(() => i(!1), 1e3);
+      let S = await c({ library: n, block: o });
+      typeof S == "string" && (S = getBlocksFromHTML(S)), isEmpty(S) || p(syncBlocksWithDefaults(S), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK), setTimeout(() => i(!1), 1e3);
     },
     [d, p, o, c, n, r, a]
   );
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(ChaiDraggableBlock, { draggable: m, onDragStart: async (y) => {
-      if (!m) return;
-      let k = await c({ library: n, block: o });
-      typeof k == "string" && (k = getBlocksFromHTML(k)), h(y, { type: "Box", blocks: k, name: u }, !0);
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(ChaiDraggableBlock, { draggable: h, onDragStart: async (y) => {
+      if (!h) return;
+      let S = await c({ library: n, block: o });
+      typeof S == "string" && (S = getBlocksFromHTML(S)), m(y, { type: "Box", blocks: S, name: u }, !0);
     }, onDragEnd: f, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8244,7 +8301,7 @@ const BlockCard = ({
         } : x,
         className: clsx$1(
           "relative mt-2 overflow-hidden rounded-md border border-border duration-200 hover:border-blue-500 hover:shadow-xl",
-          m ? "" : "cursor-pointer"
+          h ? "" : "cursor-pointer"
         ),
         children: [
           l && /* @__PURE__ */ jsxs("div", { className: "absolute flex h-full w-full items-center justify-center bg-black/70", children: [
@@ -8265,7 +8322,7 @@ const BlockCard = ({
   position: n,
   fromSidebar: r
 }) => {
-  const [a, l] = useSelectedLibrary(), i = useChaiLibraries(), c = i.find((B) => B.id === a) || first(i), { data: d, isLoading: p, resetLibrary: u } = useLibraryBlocks(c), [g, h] = useState(""), [f, m] = useState([]), x = useRef(null);
+  const [a, l] = useSelectedLibrary(), i = useChaiLibraries(), c = i.find((j) => j.id === a) || first(i), { data: d, isLoading: p, resetLibrary: u } = useLibraryBlocks(c), [g, m] = useState(""), [f, h] = useState([]), x = useRef(null);
   useEffect(() => {
     d && d.length > 0 && (x.current = new Fuse(d, {
       keys: ["name", "label", "description", "group"],
@@ -8274,26 +8331,26 @@ const BlockCard = ({
     }));
   }, [d]), useEffect(() => {
     if (!g.trim() || !x.current) {
-      m([]);
+      h([]);
       return;
     }
-    const B = x.current.search(g).map((j) => j.item);
-    m(B);
+    const j = x.current.search(g).map((_) => _.item);
+    h(j);
   }, [g]);
-  const b = g.trim() && !isEmpty(f) ? f : d, y = groupBy(b, "group"), [k, S] = useState(null);
+  const b = g.trim() && !isEmpty(f) ? f : d, y = groupBy(b, "group"), [S, k] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(y))) {
-      S(null);
+      k(null);
       return;
     }
-    if (!k || !y[k]) {
-      S(first(keys(y)));
+    if (!S || !y[S]) {
+      k(first(keys(y)));
       return;
     }
-  }, [y, k]);
-  const v = get(y, k, []), _ = useRef(null), { t: E } = useTranslation(), I = (B) => {
-    _.current && (clearTimeout(_.current), _.current = null), _.current = setTimeout(() => {
-      _.current && S(B);
+  }, [y, S]);
+  const v = get(y, S, []), B = useRef(null), { t: E } = useTranslation(), I = (j) => {
+    B.current && (clearTimeout(B.current), B.current = null), B.current = setTimeout(() => {
+      B.current && k(j);
     }, 400);
   }, C = () => {
     c != null && c.id && u(c.id);
@@ -8303,9 +8360,9 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const A = filter(v, (B, j) => j % 2 === 0), w = filter(v, (B, j) => j % 2 === 1);
+  const A = filter(v, (j, _) => _ % 2 === 0), w = filter(v, (j, _) => _ % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
-    /* @__PURE__ */ jsx(SearchInput, { value: g, setValue: h }),
+    /* @__PURE__ */ jsx(SearchInput, { value: g, setValue: m }),
     /* @__PURE__ */ jsx("div", { className: "relative flex h-full max-h-full flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: `flex h-full flex-1 pt-2 ${r ? "flex-col" : ""}`, children: [
       /* @__PURE__ */ jsxs(
         "div",
@@ -8326,26 +8383,26 @@ const BlockCard = ({
                       /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
                       E("Retry")
                     ] })
-                  ] }) }) : r ? /* @__PURE__ */ jsxs(Select$1, { value: k, onValueChange: S, children: [
+                  ] }) }) : r ? /* @__PURE__ */ jsxs(Select$1, { value: S, onValueChange: k, children: [
                     /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: E("Select a group") }) }),
-                    /* @__PURE__ */ jsx(SelectContent, { children: map(y, (B, j) => /* @__PURE__ */ jsx(SelectItem, { value: j, children: capitalize(E(j.toLowerCase())) }, j)) })
-                  ] }) : map(y, (B, j) => /* @__PURE__ */ jsxs(
+                    /* @__PURE__ */ jsx(SelectContent, { children: map(y, (j, _) => /* @__PURE__ */ jsx(SelectItem, { value: _, children: capitalize(E(_.toLowerCase())) }, _)) })
+                  ] }) : map(y, (j, _) => /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      onMouseEnter: () => I(j),
-                      onMouseLeave: () => clearTimeout(_.current),
+                      onMouseEnter: () => I(_),
+                      onMouseLeave: () => clearTimeout(B.current),
                       role: "button",
-                      onClick: () => S(j),
+                      onClick: () => k(_),
                       className: cn$2(
                         "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                        j === k ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
+                        _ === S ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
                       ),
                       children: [
-                        /* @__PURE__ */ jsx("span", { children: capitalize(E(j.toLowerCase())) }),
+                        /* @__PURE__ */ jsx("span", { children: capitalize(E(_.toLowerCase())) }),
                         /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
                       ]
                     },
-                    j
+                    _
                   ))
                 }
               )
@@ -8356,29 +8413,29 @@ const BlockCard = ({
       /* @__PURE__ */ jsx("div", { className: `flex h-full max-h-full w-full flex-col border-border ${r ? "" : "border-l"}`, children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
-          onMouseEnter: () => _.current ? clearTimeout(_.current) : null,
+          onMouseEnter: () => B.current ? clearTimeout(B.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
             isEmpty(v) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: `grid w-full gap-2 ${r ? "grid-cols-1 pb-20" : "grid-cols-2 px-2"}`, children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: A.map((B, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: A.map((j, _) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: n,
-                  block: B,
+                  block: j,
                   library: c
                 },
-                `block-${j}`
+                `block-${_}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: w.map((B, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: w.map((j, _) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: n,
-                  block: B,
+                  block: j,
                   library: c
                 },
-                `block-second-${j}`
+                `block-second-${_}`
               )) })
             ] }),
             /* @__PURE__ */ jsx("br", {}),
@@ -8408,7 +8465,7 @@ const BlockCard = ({
   gridCols: r = "grid-cols-2",
   disableBlockGroupsSidebar: a = !1
 }) => {
-  const { data: l, isLoading: i, refetch: c, error: d } = usePartialBlocksList(), [p, u] = useAtom$1(partialBlocksDataAtom), [g, h] = useAtom$1(hasInitializedPartialBlocksAtom);
+  const { data: l, isLoading: i, refetch: c, error: d } = usePartialBlocksList(), [p, u] = useAtom$1(partialBlocksDataAtom), [g, m] = useAtom$1(hasInitializedPartialBlocksAtom);
   useEffect(() => {
     if (!g || Object.keys(p.blocks).length === 0)
       if (d)
@@ -8417,47 +8474,47 @@ const BlockCard = ({
           groups: [],
           isLoading: !1,
           error: d
-        }), h(!0);
+        }), m(!0);
       else if (!i && Object.keys(l || {}).length > 0) {
-        const m = Object.entries(l).map(([b, y]) => {
-          const k = y, S = k.type || "partial", v = formatReadableName(S);
+        const h = Object.entries(l).map(([b, y]) => {
+          const S = y, k = S.type || "partial", v = formatReadableName(k);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(k.name || b),
-            description: k.description || "",
+            label: formatReadableName(S.name || b),
+            description: S.description || "",
             icon: FrameIcon,
             group: v,
             // Use formatted type as group
             category: "partial",
             partialBlockId: b,
             // Store the original ID as partialBlockId
-            _name: k.name
+            _name: S.name
           };
-        }), x = uniq(map(m, "group"));
+        }), x = uniq(map(h, "group"));
         u({
-          blocks: m,
+          blocks: h,
           groups: x,
           isLoading: !1,
           error: null
-        }), h(!0);
-      } else i ? u((m) => ({ ...m, isLoading: !0, error: null })) : !i && Object.keys(l || {}).length === 0 && (u({
+        }), m(!0);
+      } else i ? u((h) => ({ ...h, isLoading: !0, error: null })) : !i && Object.keys(l || {}).length === 0 && (u({
         blocks: [],
         groups: [],
         isLoading: !1,
         error: "No partial blocks available"
-      }), h(!0));
+      }), m(!0));
   }, [
     i,
     l,
     g,
-    h,
+    m,
     u,
     p.blocks,
     d
   ]);
   const f = () => {
-    u((m) => ({ ...m, isLoading: !0, error: null })), h(!1), c();
+    u((h) => ({ ...h, isLoading: !0, error: null })), m(!1), c();
   };
   return p.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : p.error || p.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: p.error || "No partial blocks available" }),
@@ -8490,44 +8547,44 @@ const BlockCard = ({
   gridCols: l = "grid-cols-4",
   disableBlockGroupsSidebar: i
 }) => {
-  var B;
-  const { t: c } = useTranslation(), [d] = useBlocksStore(), [p, u] = useState(""), g = useRef(null), [h] = useAtom$1(addBlockTabAtom), f = (B = find(d, (j) => j._id === r)) == null ? void 0 : B._type, [m, x] = useState("all"), [b, y] = useState(null), k = useRef(null);
+  var j;
+  const { t: c } = useTranslation(), [d] = useBlocksStore(), [p, u] = useState(""), g = useRef(null), [m] = useAtom$1(addBlockTabAtom), f = (j = find(d, (_) => _._id === r)) == null ? void 0 : j._type, [h, x] = useState("all"), [b, y] = useState(null), S = useRef(null);
   useEffect(() => {
-    const j = setTimeout(() => {
+    const _ = setTimeout(() => {
       var N;
       (N = g.current) == null || N.focus();
     }, 0);
-    return () => clearTimeout(j);
-  }, [h]), useEffect(() => {
+    return () => clearTimeout(_);
+  }, [m]), useEffect(() => {
     p && (x("all"), y(null));
-  }, [p]), useEffect(() => (k.current = debounce((j) => {
-    x(j);
+  }, [p]), useEffect(() => (S.current = debounce((_) => {
+    x(_);
   }, 500), () => {
-    k.current && k.current.cancel();
+    S.current && S.current.cancel();
   }), []);
-  const S = useCallback((j) => {
-    y(j), k.current && k.current(j);
+  const k = useCallback((_) => {
+    y(_), S.current && S.current(_);
   }, []), v = useCallback(() => {
-    y(null), k.current && k.current.cancel();
-  }, []), _ = useCallback((j) => {
-    k.current && k.current.cancel(), x(j), y(null);
+    y(null), S.current && S.current.cancel();
+  }, []), B = useCallback((_) => {
+    S.current && S.current.cancel(), x(_), y(null);
   }, []), E = useMemo(
     () => p ? values(n).filter(
-      (j) => {
-        var N, L;
-        return (((N = j.label) == null ? void 0 : N.toLowerCase()) + " " + ((L = j.type) == null ? void 0 : L.toLowerCase())).includes(p.toLowerCase());
+      (_) => {
+        var N, T;
+        return (((N = _.label) == null ? void 0 : N.toLowerCase()) + " " + ((T = _.type) == null ? void 0 : T.toLowerCase())).includes(p.toLowerCase());
       }
     ) : n,
     [n, p]
   ), I = useMemo(
     () => p ? o.filter(
-      (j) => reject(filter(values(E), { group: j }), { hidden: !0 }).length > 0
-    ) : o.filter((j) => reject(filter(values(n), { group: j }), { hidden: !0 }).length > 0),
+      (_) => reject(filter(values(E), { group: _ }), { hidden: !0 }).length > 0
+    ) : o.filter((_) => reject(filter(values(n), { group: _ }), { hidden: !0 }).length > 0),
     [n, E, o, p]
   ), C = useMemo(
-    () => sortBy(I, (j) => CORE_GROUPS.indexOf(j) === -1 ? 99 : CORE_GROUPS.indexOf(j)),
+    () => sortBy(I, (_) => CORE_GROUPS.indexOf(_) === -1 ? 99 : CORE_GROUPS.indexOf(_)),
     [I]
-  ), A = useMemo(() => m === "all" ? E : filter(values(E), { group: m }), [E, m]), w = useMemo(() => m === "all" ? C : [m], [C, m]);
+  ), A = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), w = useMemo(() => h === "all" ? C : [h], [C, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: p, setValue: u }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden pt-2", children: [
@@ -8535,24 +8592,24 @@ const BlockCard = ({
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => _("all"),
-            onMouseEnter: () => S("all"),
+            onClick: () => B("all"),
+            onMouseEnter: () => k("all"),
             onMouseLeave: v,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || b === "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" || b === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: c("All")
           },
           "sidebar-all"
         ),
-        C.map((j) => /* @__PURE__ */ jsx(
+        C.map((_) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => _(j),
-            onMouseEnter: () => S(j),
+            onClick: () => B(_),
+            onMouseEnter: () => k(_),
             onMouseLeave: v,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === j || b === j ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
-            children: capitalize(c(j.toLowerCase()))
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === _ || b === _ ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            children: capitalize(c(_.toLowerCase()))
           },
-          `sidebar-${j}`
+          `sidebar-${_}`
         ))
       ] }) }) }),
       /* @__PURE__ */ jsx(
@@ -8564,10 +8621,10 @@ const BlockCard = ({
             ' "',
             p,
             '"'
-          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${i ? "p-0" : "p-4"} space-y-6`, children: w.map((j) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(j.toLowerCase())) }),
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${i ? "p-0" : "p-4"} space-y-6`, children: w.map((_) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(_.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-              m === "all" ? filter(values(A), { group: j }) : values(A),
+              h === "all" ? filter(values(A), { group: _ }) : values(A),
               { hidden: !0 }
             ).map((N) => /* @__PURE__ */ jsx(
               CoreBlock,
@@ -8579,7 +8636,7 @@ const BlockCard = ({
               },
               N.type
             )) })
-          ] }, j)) }) })
+          ] }, _)) }) })
         }
       )
     ] })
@@ -8591,16 +8648,16 @@ const BlockCard = ({
   position: a = -1,
   fromSidebar: l = !1
 }) => {
-  const { t: i } = useTranslation(), [c, d] = useAtom$1(addBlockTabAtom), [, p] = useAtom$1(showPredefinedBlockCategoryAtom), u = useBuilderProp("flags.importHtml", !0), { data: g } = usePartialBlocksList(), h = Object.keys(g || {}).length > 0, { hasPermission: f } = usePermissions();
+  const { t: i } = useTranslation(), [c, d] = useAtom$1(addBlockTabAtom), [, p] = useAtom$1(showPredefinedBlockCategoryAtom), u = useBuilderProp("flags.importHtml", !0), { data: g } = usePartialBlocksList(), m = Object.keys(g || {}).length > 0, { hasPermission: f } = usePermissions();
   useEffect(() => {
-    c === "partials" && !h && d("library");
-  }, [c, h, d]);
-  const m = useCallback(() => {
+    c === "partials" && !m && d("library");
+  }, [c, m, d]);
+  const h = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []), x = useChaiAddBlockTabs(), b = u && f(PERMISSIONS.IMPORT_HTML), k = useChaiLibraries().length > 0;
+  }, []), x = useChaiAddBlockTabs(), b = u && f(PERMISSIONS.IMPORT_HTML), S = useChaiLibraries().length > 0;
   return useEffect(() => {
-    c === "library" && !k && d("core");
-  }, [c, k, d]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
+    c === "library" && !S && d("core");
+  }, [c, S, d]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
     n ? /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
       /* @__PURE__ */ jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: i("Add block") }),
       /* @__PURE__ */ jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: i(c === "html" ? "Enter or paste TailwindCSS HTML snippet" : "Click to add block to page") })
@@ -8608,25 +8665,25 @@ const BlockCard = ({
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (S) => {
-          p(""), d(S);
+        onValueChange: (k) => {
+          p(""), d(k);
         },
         value: c,
         className: "flex h-full max-h-full flex-col overflow-hidden",
         children: [
           /* @__PURE__ */ jsxs(TabsList, { className: `flex items-center ${l ? "h-max w-max justify-start p-1" : "w-full"}`, children: [
-            k && /* @__PURE__ */ jsx(TabsTrigger, { value: "library", className: l ? "h-5 px-2 text-xs" : "", children: i("Library") }),
+            S && /* @__PURE__ */ jsx(TabsTrigger, { value: "library", className: l ? "h-5 px-2 text-xs" : "", children: i("Library") }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", className: l ? "h-5 px-2 text-xs" : "", children: i("Blocks") }),
-            h && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", className: l ? "h-5 px-2 text-xs" : "", children: i("Partials") }),
+            m && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", className: l ? "h-5 px-2 text-xs" : "", children: i("Partials") }),
             b ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", className: l ? "h-5 px-2 text-xs" : "", children: i("Import") }) : null,
-            map(x, (S) => /* @__PURE__ */ jsx(
+            map(x, (k) => /* @__PURE__ */ jsx(
               TabsTrigger,
               {
-                value: S.id,
+                value: k.id,
                 className: l ? "h-5 px-2 text-xs" : "",
-                children: React__default.createElement(S.tab)
+                children: React__default.createElement(k.tab)
               },
-              `tab-add-block-${S.id}`
+              `tab-add-block-${k.id}`
             ))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(
@@ -8638,8 +8695,8 @@ const BlockCard = ({
               disableBlockGroupsSidebar: l
             }
           ) }) }) }),
-          k && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { fromSidebar: l, parentId: r, position: a }) }),
-          h && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(
+          S && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { fromSidebar: l, parentId: r, position: a }) }),
+          m && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(
             PartialBlocks,
             {
               gridCols: l ? "grid-cols-2" : "grid-cols-4",
@@ -8649,7 +8706,7 @@ const BlockCard = ({
             }
           ) }) }) }),
           b ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20 ", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a, fromSidebar: l }) }) : null,
-          map(x, (S) => /* @__PURE__ */ jsx(TabsContent, { value: S.id, children: React__default.createElement(S.tabContent, { close: m, parentId: r, position: a }) }, `panel-add-block-${S.id}`))
+          map(x, (k) => /* @__PURE__ */ jsx(TabsContent, { value: k.id, children: React__default.createElement(k.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${k.id}`))
         ]
       }
     )
@@ -8806,10 +8863,10 @@ const registerChaiSaveToLibrary = (o) => {
 }, CopyPasteBlocks = () => {
   const [o] = useBlocksStore(), [n] = useSelectedBlockIds(), { pasteBlocks: r } = usePasteBlocks(), [, a, l] = useCopyBlocks(), { t: i } = useTranslation(), c = useSelectedBlock(), d = useBuilderProp("flags.copyPaste", !0), p = useCallback(() => {
     const u = n.map((g) => {
-      const h = o.find((f) => f._id === g);
+      const m = o.find((f) => f._id === g);
       return {
         id: g,
-        data: h
+        data: m
       };
     });
     l(u.map((g) => g.id)) ? toast.warning("Partial blocks detected. Clone partial blocks?", {
@@ -9028,35 +9085,35 @@ const Input = ({ node: o }) => {
   var M;
   const { t: a } = useTranslation(), l = useUpdateBlocksProps(), [i] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let d = null;
-  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), h = useIsDragAndDropEnabled(), { id: f, data: m, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: k, handleClick: S } = o, v = get(m, "_show", !0), _ = (T) => {
-    T.stopPropagation(), v && o.toggle();
-  }, E = (T) => {
-    T.isInternal && (d = T.isOpen, T.isOpen && T.close());
-  }, I = (T) => {
-    T.isInternal && d !== null && (d ? T.open() : T.close(), d = null);
+  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), m = useIsDragAndDropEnabled(), { id: f, data: h, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: S, handleClick: k } = o, v = get(h, "_show", !0), B = (L) => {
+    L.stopPropagation(), v && o.toggle();
+  }, E = (L) => {
+    L.isInternal && (d = L.isOpen, L.isOpen && L.close());
+  }, I = (L) => {
+    L.isInternal && d !== null && (d ? L.open() : L.close(), d = null);
   }, [C, A] = useAtom$1(currentAddSelection), w = () => {
-    var T;
-    B(), o.parent.isSelected || A((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
-  }, B = () => {
+    var L;
+    j(), o.parent.isSelected || A((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id);
+  }, j = () => {
     A(null);
-  }, j = (T) => {
-    B(), T.stopPropagation(), !o.isOpen && v && o.toggle(), S(T);
+  }, _ = (L) => {
+    j(), L.stopPropagation(), !o.isOpen && v && o.toggle(), k(L);
   };
   useEffect(() => {
-    const T = setTimeout(() => {
+    const L = setTimeout(() => {
       b && !o.isOpen && !y && v && o.toggle();
     }, 500);
-    return () => clearTimeout(T);
+    return () => clearTimeout(L);
   }, [b, o, y]);
-  const N = (T, O) => {
-    const $ = i.contentDocument || i.contentWindow.document, H = $.querySelector(`[data-block-id=${T}]`);
-    H && H.setAttribute("data-drop", O);
-    const F = H.getBoundingClientRect(), U = i.getBoundingClientRect();
-    F.top >= U.top && F.left >= U.left && F.bottom <= U.bottom && F.right <= U.right || ($.documentElement.scrollTop = H.offsetTop - U.top);
-  }, L = (T) => {
-    B();
+  const N = (L, O) => {
+    const H = i.contentDocument || i.contentWindow.document, $ = H.querySelector(`[data-block-id=${L}]`);
+    $ && $.setAttribute("data-drop", O);
+    const F = $.getBoundingClientRect(), U = i.getBoundingClientRect();
+    F.top >= U.top && F.left >= U.left && F.bottom <= U.bottom && F.right <= U.right || (H.documentElement.scrollTop = $.offsetTop - U.top);
+  }, T = (L) => {
+    j();
     const O = get(o, "parent.id");
-    O !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: O, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
+    O !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: O, position: L }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: L });
   };
   if (f === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 w-full cursor-pointer", children: [
@@ -9065,7 +9122,7 @@ const Input = ({ node: o }) => {
         "div",
         {
           role: "button",
-          onClick: () => L(-1),
+          onClick: () => T(-1),
           className: "h-1 rounded bg-primary opacity-0 duration-200 group-hover:opacity-100",
           children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-primary px-3 py-1 text-[9px] leading-tight text-white hover:bg-primary", children: [
             /* @__PURE__ */ jsx(PlusIcon, { className: "w-2.4 h-2.5 stroke-[5] text-white" }),
@@ -9076,36 +9133,36 @@ const Input = ({ node: o }) => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const { librarySite: D } = useBuilderProp("flags", { librarySite: !1 }), P = useMemo(() => D && has(m, "_libBlockId") && !isEmpty(m._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [m, c, D]), R = useMemo(() => (m == null ? void 0 : m._type) === "PartialBlock" || (m == null ? void 0 : m._type) === "GlobalBlock", [m]);
+  const { librarySite: D } = useBuilderProp("flags", { librarySite: !1 }), P = useMemo(() => D && has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, c, D]), R = useMemo(() => (h == null ? void 0 : h._type) === "PartialBlock" || (h == null ? void 0 : h._type) === "GlobalBlock", [h]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseEnter: () => u(f),
       onMouseLeave: () => g(),
-      onClick: j,
+      onClick: _,
       style: n,
       "data-node-id": f,
       ref: r,
       onDragStart: () => E(o),
       onDragEnd: () => I(o),
-      onDragOver: (T) => {
-        T.preventDefault(), N(f, "yes");
+      onDragOver: (L) => {
+        L.preventDefault(), N(f, "yes");
       },
-      onDragLeave: (T) => {
-        T.preventDefault(), N(f, "no");
+      onDragLeave: (L) => {
+        L.preventDefault(), N(f, "no");
       },
-      onDrop: (T) => {
-        T.preventDefault(), N(f, "no");
+      onDrop: (L) => {
+        L.preventDefault(), N(f, "no");
       },
       children: [
-        c(PERMISSIONS.ADD_BLOCK) && !h && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((M = o == null ? void 0 : o.parent) == null ? void 0 : M.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        c(PERMISSIONS.ADD_BLOCK) && !m && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((M = o == null ? void 0 : o.parent) == null ? void 0 : M.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
-            onClick: (T) => {
-              T.stopPropagation(), L(o.childIndex);
+            onClick: (L) => {
+              L.stopPropagation(), T(o.childIndex);
             },
             onMouseEnter: w,
-            onMouseLeave: B,
+            onMouseLeave: j,
             className: "absolute -top-0.5 h-0.5 w-[90%] rounded bg-primary/80 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary/80 p-1 outline outline-2 outline-white hover:bg-primary/80", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-2 w-2 stroke-[2] text-white" }) })
           }
@@ -9116,7 +9173,7 @@ const Input = ({ node: o }) => {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
               x ? "bg-primary/20" : "hover:bg-primary/10",
-              b && canAcceptChildBlock(m._type, "Icon") ? "bg-green-200" : "",
+              b && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === C ? "bg-primary/10" : "",
               y && "opacity-20",
               v ? "" : "line-through opacity-50",
@@ -9128,7 +9185,7 @@ const Input = ({ node: o }) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: p && /* @__PURE__ */ jsx("button", { onClick: _, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
+                    children: p && /* @__PURE__ */ jsx("button", { onClick: B, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -9142,15 +9199,15 @@ const Input = ({ node: o }) => {
                       R && x && "text-purple-800"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(TypeIcon, { type: m == null ? void 0 : m._type }),
-                      k ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
+                      S ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                          onDoubleClick: (T) => {
-                            T.stopPropagation(), o.edit(), o.deselect();
+                          onDoubleClick: (L) => {
+                            L.stopPropagation(), o.edit(), o.deselect();
                           },
-                          children: /* @__PURE__ */ jsx("span", { title: getBlockDisplayName(m).length > 17 ? getBlockDisplayName(m) : "", children: truncateText(getBlockDisplayName(m), 17) })
+                          children: /* @__PURE__ */ jsx("span", { title: getBlockDisplayName(h).length > 17 ? getBlockDisplayName(h) : "", children: truncateText(getBlockDisplayName(h), 17) })
                         }
                       )
                     ]
@@ -9158,7 +9215,7 @@ const Input = ({ node: o }) => {
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-px group-hover:visible", children: [
-                canAddChildBlock(m == null ? void 0 : m._type) && v && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(h == null ? void 0 : h._type) && v && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -9174,8 +9231,8 @@ const Input = ({ node: o }) => {
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (T) => {
-                        T.stopPropagation(), l([f], { _show: !v }), o.isOpen && o.toggle();
+                      onClick: (L) => {
+                        L.stopPropagation(), l([f], { _show: !v }), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent p-0.5 hover:bg-primary/10",
                       asChild: !0,
@@ -9627,7 +9684,7 @@ const Input = ({ node: o }) => {
       console.warn("Failed to clear previous theme from localStorage:", o);
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), h = useBuilderProp("flags.darkMode", !0);
+  const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0);
   if (d) {
     const C = d.map((A) => Object.keys(A)[0]);
     DEFAULT_THEME_PRESET.forEach((A) => {
@@ -9635,36 +9692,36 @@ const Input = ({ node: o }) => {
       C.includes(w) || d.push(A);
     });
   }
-  const [f, m] = useTheme(), x = useThemeOptions(), { t: b } = useTranslation(), y = React.useCallback(
+  const [f, h] = useTheme(), x = useThemeOptions(), { t: b } = useTranslation(), y = React.useCallback(
     (C) => {
       const A = { ...f };
-      setPreviousTheme(A), m(C), toast.success("Theme updated", {
+      setPreviousTheme(A), h(C), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
             " Undo"
           ] }),
           onClick: () => {
-            m(A), clearPreviousTheme(), toast.dismiss();
+            h(A), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
         duration: 15e3
       });
     },
-    [f, m]
-  ), k = () => {
+    [f, h]
+  ), S = () => {
     const C = d.find((A) => Object.keys(A)[0] === a);
     if (C) {
       const A = Object.values(C)[0];
       A && typeof A == "object" && "fontFamily" in A && "borderRadius" in A && "colors" in A ? (y(A), l("")) : console.error("Invalid preset structure:", A);
     } else
       console.error("Preset not found:", a);
-  }, S = (C) => {
+  }, k = (C) => {
     y(C), l("");
   }, v = useDebouncedCallback(
     (C, A) => {
-      m(() => ({
+      h(() => ({
         ...f,
         fontFamily: {
           ...f.fontFamily,
@@ -9674,9 +9731,9 @@ const Input = ({ node: o }) => {
     },
     [f],
     200
-  ), _ = React.useCallback(
+  ), B = React.useCallback(
     (C) => {
-      m(() => ({
+      h(() => ({
         ...f,
         borderRadius: `${C}px`
       }));
@@ -9684,7 +9741,7 @@ const Input = ({ node: o }) => {
     [f]
   ), E = useDebouncedCallback(
     (C, A) => {
-      m(() => {
+      h(() => {
         const w = get(f, `colors.${C}`);
         return n ? set(w, 1, A) : set(w, 0, A), {
           ...f,
@@ -9704,10 +9761,10 @@ const Input = ({ node: o }) => {
         ColorPickerInput,
         {
           value: w,
-          onChange: (B) => E(A, B)
+          onChange: (j) => E(A, j)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: A.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((B) => B.charAt(0).toUpperCase() + B.slice(1)).join(" ") + (!A.toLowerCase().includes("foreground") && !A.toLowerCase().includes("border") && !A.toLowerCase().includes("input") && !A.toLowerCase().includes("ring") && !A.toLowerCase().includes("background") ? " Background" : "") })
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: A.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((j) => j.charAt(0).toUpperCase() + j.slice(1)).join(" ") + (!A.toLowerCase().includes("foreground") && !A.toLowerCase().includes("border") && !A.toLowerCase().includes("input") && !A.toLowerCase().includes("ring") && !A.toLowerCase().includes("background") ? " Background" : "") })
     ] }, A) : null;
   }) });
   return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
@@ -9728,7 +9785,7 @@ const Input = ({ node: o }) => {
               return /* @__PURE__ */ jsx(SelectItem, { value: A, children: capitalize(w) }, A);
             }) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: b("Apply") }) })
+          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: S, children: b("Apply") }) })
         ] })
       ] }),
       /* @__PURE__ */ jsx(Separator, {}),
@@ -9755,7 +9812,7 @@ const Input = ({ node: o }) => {
             ] }),
             /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: f.borderRadius })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: f.borderRadius, onChange: _ }) })
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: f.borderRadius, onChange: B }) })
         ] }),
         /* @__PURE__ */ jsx(Separator, {}),
         (x == null ? void 0 : x.colors) && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -9764,7 +9821,7 @@ const Input = ({ node: o }) => {
               /* @__PURE__ */ jsx(MixerHorizontalIcon, { className: "h-3 w-3 text-gray-600" }),
               /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: b("Colors") })
             ] }),
-            h && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            m && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(SunIcon, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx(
                 Switch,
@@ -9785,7 +9842,7 @@ const Input = ({ node: o }) => {
           {
             open: i,
             onOpenChange: c,
-            onImport: S
+            onImport: k
           }
         ) })
       ] }),
@@ -10329,8 +10386,8 @@ function QuickPrompts({ onClick: o }) {
 const AIUserPrompt = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), u = useSelectedBlock();
   useEffect(() => {
-    var h;
-    (h = d.current) == null || h.focus();
+    var m;
+    (m = d.current) == null || m.focus();
   }, []);
   const g = () => {
     l || c("");
@@ -10347,8 +10404,8 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsx("div", { className: "rounded border p-2 text-sm", children: /* @__PURE__ */ jsx(
       QuickPrompts,
       {
-        onClick: (h) => {
-          p.current && clearTimeout(p.current), r("content", o, h, g);
+        onClick: (m) => {
+          p.current && clearTimeout(p.current), r("content", o, m, g);
         }
       }
     ) }),
@@ -10360,12 +10417,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: d,
           value: i,
-          onChange: (h) => c(h.target.value),
+          onChange: (m) => c(m.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full resize-none border-none p-0 text-xs shadow-none outline-none",
           rows: 3,
-          onKeyDown: (h) => {
-            h.key === "Enter" && (h.preventDefault(), p.current && clearTimeout(p.current), r("content", o, i, g));
+          onKeyDown: (m) => {
+            m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), r("content", o, i, g));
           }
         }
       ),
@@ -10470,11 +10527,11 @@ const UndoRedo = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [h, f] = useState(""), m = useRef(null), x = useRef(null), b = usePageExternalData(), { t: y } = useTranslation();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), h = useRef(null), x = useRef(null), b = usePageExternalData(), { t: y } = useTranslation();
   useEffect(() => {
     l(n);
   }, [n]);
-  const k = () => {
+  const S = () => {
     if (i.startsWith("@")) {
       f("Attribute keys cannot start with '@'");
       return;
@@ -10483,12 +10540,12 @@ const UndoRedo = () => {
       const C = [...a, { key: i, value: d }];
       r(C), l(a), c(""), p(""), f("");
     }
-  }, S = (C) => {
-    const A = a.filter((w, B) => B !== C);
+  }, k = (C) => {
+    const A = a.filter((w, j) => j !== C);
     r(A), l(A);
   }, v = (C) => {
     g(C), c(a[C].key), p(a[C].value);
-  }, _ = () => {
+  }, B = () => {
     if (i.startsWith("@")) {
       f("Attribute keys cannot start with '@'");
       return;
@@ -10498,25 +10555,25 @@ const UndoRedo = () => {
       C[u] = { key: i, value: d }, r(C), l(C), g(null), c(""), p(""), f("");
     }
   }, E = (C) => {
-    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? _() : k());
+    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? B() : S());
   }, I = useCallback((C) => {
-    const A = (j) => /[.,!?;:]/.test(j), w = (j, N, L) => {
+    const A = (_) => /[.,!?;:]/.test(_), w = (_, N, T) => {
       let D = "", P = "";
-      const R = N > 0 ? j[N - 1] : "", M = N < j.length ? j[N] : "";
-      return N > 0 && (R === "." || !A(R) && R !== " ") && (D = " "), N < j.length && !A(M) && M !== " " && (P = " "), {
-        text: D + L + P,
+      const R = N > 0 ? _[N - 1] : "", M = N < _.length ? _[N] : "";
+      return N > 0 && (R === "." || !A(R) && R !== " ") && (D = " "), N < _.length && !A(M) && M !== " " && (P = " "), {
+        text: D + T + P,
         prefixLength: D.length,
         suffixLength: P.length
       };
-    }, B = x.current;
-    if (B) {
-      const j = B.selectionStart || 0, N = B.value || "", L = B.selectionEnd || j;
-      if (L > j) {
-        const T = `{{${C}}}`, { text: O } = w(N, j, T), $ = N.slice(0, j) + O + N.slice(L);
-        p($);
+    }, j = x.current;
+    if (j) {
+      const _ = j.selectionStart || 0, N = j.value || "", T = j.selectionEnd || _;
+      if (T > _) {
+        const L = `{{${C}}}`, { text: O } = w(N, _, L), H = N.slice(0, _) + O + N.slice(T);
+        p(H);
         return;
       }
-      const P = `{{${C}}}`, { text: R } = w(N, j, P), M = N.slice(0, j) + R + N.slice(j);
+      const P = `{{${C}}}`, { text: R } = w(N, _, P), M = N.slice(0, _) + R + N.slice(_);
       p(M);
     }
   }, []);
@@ -10525,7 +10582,7 @@ const UndoRedo = () => {
       "form",
       {
         onSubmit: (C) => {
-          C.preventDefault(), u !== null ? _() : k();
+          C.preventDefault(), u !== null ? B() : S();
         },
         className: "space-y-3",
         children: [
@@ -10539,7 +10596,7 @@ const UndoRedo = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: m,
+                  ref: h,
                   value: i,
                   onChange: (C) => c(C.target.value),
                   placeholder: y("Enter Key"),
@@ -10571,7 +10628,7 @@ const UndoRedo = () => {
             ] })
           ] }),
           /* @__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 })
         ]
       }
     ),
@@ -10582,7 +10639,7 @@ const UndoRedo = () => {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(A), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(A), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(A), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
     ] }, A)) })
   ] });
@@ -10750,14 +10807,14 @@ registerChaiSidebarPanel("outline", {
   panel: () => /* @__PURE__ */ jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsx(ListTree, {}) })
 });
 const RootLayout = () => {
-  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = reverse([...u ?? []]), h = useCallback((C) => {
+  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = reverse([...u ?? []]), m = useCallback((C) => {
     C.preventDefault();
-  }, []), f = useMemo(() => [p].flat(), [p]), m = useCallback(
+  }, []), f = useMemo(() => [p].flat(), [p]), h = useCallback(
     (C) => {
       console.log("handleMenuItemClick", C, n), r(n === C ? null : C);
     },
     [n, r]
-  ), { t: x } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), k = find(b, { id: n }) ?? first(b), S = get(k, "width", DEFAULT_PANEL_WIDTH);
+  ), { t: x } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), S = find(b, { id: n }) ?? first(b), k = get(S, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
       const C = find(b, { id: n });
@@ -10767,8 +10824,8 @@ const RootLayout = () => {
   const v = useMemo(() => {
     if (n === null) return 0;
     const C = find(b, { id: n });
-    return get(C, "view", "standard") === "standard" ? S : l;
-  }, [n, S, l, b]), _ = useCallback(() => {
+    return get(C, "view", "standard") === "standard" ? k : l;
+  }, [n, k, l, b]), B = useCallback(() => {
     r(a.current);
   }, [r, n]), E = useCallback(() => {
     r("outline");
@@ -10778,15 +10835,15 @@ const RootLayout = () => {
   }, [n, b]);
   const I = useCallback(
     (C) => {
-      m(C);
+      h(C);
     },
-    [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-full 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, {}) }) }),
@@ -10820,15 +10877,15 @@ const RootLayout = () => {
                 initial: { width: v },
                 animate: { width: v },
                 transition: { duration: 0.3, ease: "easeInOut" },
-                children: n !== null && get(k, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
+                children: n !== null && get(S, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(k, "isInternal", !1) ? "" : "w-64"}`,
-                      children: /* @__PURE__ */ jsx("span", { children: x(get(k, "label", "")) })
+                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(S, "isInternal", !1) ? "" : "w-64"}`,
+                      children: /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(k, "panel", NoopComponent), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {}) }) })
                 ] })
               }
             ),
@@ -10874,34 +10931,34 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    n !== null && get(k, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
+    n !== null && get(S, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "left",
         className: "flex flex-col gap-0 p-0 sm:max-w-full",
-        style: { width: `${S}px` },
+        style: { width: `${k}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(k, "icon", null) }),
-            /* @__PURE__ */ jsx("span", { children: x(get(k, "label", "")) })
+            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
+            /* @__PURE__ */ jsx("span", { children: x(get(S, "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(k, "panel", NoopComponent), {
+          /* @__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(S, "panel", NoopComponent), {
             close: E
           }) }) })
         ]
       }
     ) }),
     " ",
-    n !== null && get(k, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${S}px` }, children: [
+    n !== null && get(S, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${k}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(k, "icon", null) }),
-        /* @__PURE__ */ jsx("span", { children: x(get(k, "label", "")) })
+        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
+        /* @__PURE__ */ jsx("span", { children: x(get(S, "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(k, "panel", NoopComponent), {
+      /* @__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(S, "panel", NoopComponent), {
         close: E
       }) }) })
     ] }) }),
-    n !== null && get(k, "view") === "overlay" && /* @__PURE__ */ jsx(
+    n !== null && get(S, "view") === "overlay" && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "absolute bottom-0 left-12 right-0 top-0 z-50",
@@ -10920,12 +10977,12 @@ const RootLayout = () => {
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex h-[50px] items-center justify-between border-b border-border p-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "-ml-2 flex items-center gap-2 text-lg font-bold", children: [
-                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(k, "icon", null) }),
-                  /* @__PURE__ */ jsx("span", { children: x(get(k, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(S, "icon", null) }),
+                  /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
                 ] }),
-                /* @__PURE__ */ jsx(Button, { onClick: () => _(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-5 w-5" }) })
+                /* @__PURE__ */ jsx(Button, { onClick: () => B(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-5 w-5" }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(k, "panel", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
                 close: E
               }) }) })
             ]
@@ -10986,20 +11043,20 @@ const RootLayout = () => {
     const x = l.toLowerCase();
     return Object.fromEntries(
       Object.entries(a).filter(([b, y]) => {
-        var k;
-        return (b == null ? void 0 : b.toLowerCase().includes(x)) || ((k = y == null ? void 0 : y.description) == null ? void 0 : k.toLowerCase().includes(x));
+        var S;
+        return (b == null ? void 0 : b.toLowerCase().includes(x)) || ((S = y == null ? void 0 : y.description) == null ? void 0 : S.toLowerCase().includes(x));
       })
     );
-  }, [a, l]), h = (x) => {
+  }, [a, l]), m = (x) => {
     d(!0), u({
       x: x.clientX - n.x,
       y: x.clientY - n.y
     });
   }, f = (x) => {
     if (!c) return;
-    const b = x.clientX - p.x, y = x.clientY - p.y, k = x.currentTarget, S = k.offsetWidth, v = k.offsetHeight, _ = window.innerWidth - S, E = window.innerHeight - v, I = Math.max(0, Math.min(b, _)), C = Math.max(0, Math.min(y, E));
+    const b = x.clientX - p.x, y = x.clientY - p.y, S = x.currentTarget, k = S.offsetWidth, v = S.offsetHeight, B = window.innerWidth - k, E = window.innerHeight - v, I = Math.max(0, Math.min(b, B)), C = Math.max(0, Math.min(y, E));
     r(I, C);
-  }, m = () => {
+  }, h = () => {
     d(!1);
   };
   return useEffect(() => {
@@ -11010,9 +11067,9 @@ const RootLayout = () => {
   }, [c]), !n || n.x < 0 || n.y < 0 ? null : /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseDown: h,
+      onMouseDown: m,
       onMouseMove: f,
-      onMouseUp: m,
+      onMouseUp: h,
       className: "fixed z-[9999999] select-none rounded-md border border-gray-300 bg-white p-3 shadow-2xl",
       style: {
         left: n.x,
@@ -11196,49 +11253,49 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   const n = getBuildingBlocks(o), r = n[1], a = n[3], l = n[4], i = n[5], c = n[6], d = n[13], p = [], u = (g) => {
     try {
       g();
-    } catch (h) {
-      p.push(h);
+    } catch (m) {
+      p.push(m);
     }
   };
   do {
     c.f && u(c.f);
-    const g = /* @__PURE__ */ new Set(), h = g.add.bind(g);
+    const g = /* @__PURE__ */ new Set(), m = g.add.bind(g);
     a.forEach((f) => {
-      var m;
-      return (m = r.get(f)) == null ? void 0 : m.l.forEach(h);
-    }), a.clear(), i.forEach(h), i.clear(), l.forEach(h), l.clear(), g.forEach(u), a.size && d(o);
+      var h;
+      return (h = r.get(f)) == null ? void 0 : h.l.forEach(m);
+    }), a.clear(), i.forEach(m), i.clear(), l.forEach(m), l.clear(), g.forEach(u), a.size && d(o);
   } while (a.size || i.size || l.size);
   if (p.length)
     throw new AggregateError(p);
 }, recomputeInvalidatedAtoms = (o) => {
-  const n = getBuildingBlocks(o), r = n[1], a = n[2], l = n[3], i = n[11], c = n[14], d = n[17], p = [], u = /* @__PURE__ */ new WeakSet(), g = /* @__PURE__ */ new WeakSet(), h = Array.from(l);
-  for (; h.length; ) {
-    const f = h[h.length - 1], m = i(o, f);
+  const n = getBuildingBlocks(o), r = n[1], a = n[2], l = n[3], i = n[11], c = n[14], d = n[17], p = [], u = /* @__PURE__ */ new WeakSet(), g = /* @__PURE__ */ new WeakSet(), m = Array.from(l);
+  for (; m.length; ) {
+    const f = m[m.length - 1], h = i(o, f);
     if (g.has(f)) {
-      h.pop();
+      m.pop();
       continue;
     }
     if (u.has(f)) {
-      a.get(f) === m.n && p.push([f, m]), g.add(f), h.pop();
+      a.get(f) === h.n && p.push([f, h]), g.add(f), m.pop();
       continue;
     }
     u.add(f);
-    for (const x of getMountedOrPendingDependents(f, m, r))
-      u.has(x) || h.push(x);
+    for (const x of getMountedOrPendingDependents(f, h, r))
+      u.has(x) || m.push(x);
   }
   for (let f = p.length - 1; f >= 0; --f) {
-    const [m, x] = p[f];
+    const [h, x] = p[f];
     let b = !1;
     for (const y of x.d.keys())
-      if (y !== m && l.has(y)) {
+      if (y !== h && l.has(y)) {
         b = !0;
         break;
       }
-    b && (c(o, m), d(o, m)), a.delete(m);
+    b && (c(o, h), d(o, h)), a.delete(h);
   }
 }, readAtomState = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[2], c = a[3], d = a[6], p = a[7], u = a[11], g = a[12], h = a[13], f = a[14], m = a[16], x = a[17], b = u(o, n);
+  const a = getBuildingBlocks(o), l = a[1], i = a[2], c = a[3], d = a[6], p = a[7], u = a[11], g = a[12], m = a[13], f = a[14], h = a[16], x = a[17], b = u(o, n);
   if (isAtomStateInitialized(b) && (l.has(n) && i.get(n) !== b.n || Array.from(b.d).every(
     ([C, A]) => (
       // Recursively, read the atom state of the dependency, and
@@ -11249,46 +11306,46 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     return b;
   b.d.clear();
   let y = !0;
-  function k() {
-    l.has(n) && (x(o, n), h(o), g(o));
+  function S() {
+    l.has(n) && (x(o, n), m(o), g(o));
   }
-  function S(C) {
+  function k(C) {
     var A;
     if (isSelfAtom(n, C)) {
-      const B = u(o, C);
-      if (!isAtomStateInitialized(B))
+      const j = u(o, C);
+      if (!isAtomStateInitialized(j))
         if (hasInitialValue(C))
           setAtomStateValueOrPromise(o, C, C.init);
         else
           throw new Error("no atom init");
-      return returnAtomValue(B);
+      return returnAtomValue(j);
     }
     const w = f(o, C);
     try {
       return returnAtomValue(w);
     } finally {
-      b.d.set(C, w.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, w), (A = l.get(C)) == null || A.t.add(n), y || k();
+      b.d.set(C, w.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, w), (A = l.get(C)) == null || A.t.add(n), y || S();
     }
   }
-  let v, _;
+  let v, B;
   const E = {
     get signal() {
       return v || (v = new AbortController()), v.signal;
     },
     get setSelf() {
-      return !_ && isActuallyWritableAtom(n) && (_ = (...C) => {
+      return !B && isActuallyWritableAtom(n) && (B = (...C) => {
         if (!y)
           try {
-            return m(o, n, ...C);
+            return h(o, n, ...C);
           } finally {
-            h(o), g(o);
+            m(o), g(o);
           }
-      }), _;
+      }), B;
     }
   }, I = b.n;
   try {
-    const C = p(o, n, S, E);
-    return setAtomStateValueOrPromise(o, n, C), isPromiseLike$1(C) && (registerAbortHandler(C, () => v == null ? void 0 : v.abort()), C.then(k, k)), b;
+    const C = p(o, n, k, E);
+    return setAtomStateValueOrPromise(o, n, C), isPromiseLike$1(C) && (registerAbortHandler(C, () => v == null ? void 0 : v.abort()), C.then(S, S)), b;
   } catch (C) {
     return delete b.v, b.e = C, ++b.n, b;
   } finally {
@@ -11304,73 +11361,73 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }
   }
 }, writeAtomState = (o, n, ...r) => {
-  const a = getBuildingBlocks(o), l = a[3], i = a[6], c = a[8], d = a[11], p = a[12], u = a[13], g = a[14], h = a[15], f = a[17];
-  let m = !0;
-  const x = (y) => returnAtomValue(g(o, y)), b = (y, ...k) => {
-    var S;
+  const a = getBuildingBlocks(o), l = a[3], i = a[6], c = a[8], d = a[11], p = a[12], u = a[13], g = a[14], m = a[15], f = a[17];
+  let h = !0;
+  const x = (y) => returnAtomValue(g(o, y)), b = (y, ...S) => {
+    var k;
     const v = d(o, y);
     try {
       if (isSelfAtom(n, y)) {
         if (!hasInitialValue(y))
           throw new Error("atom not writable");
-        const _ = v.n, E = k[0];
-        setAtomStateValueOrPromise(o, y, E), f(o, y), _ !== v.n && (l.add(y), (S = i.c) == null || S.call(i, y), h(o, y));
+        const B = v.n, E = S[0];
+        setAtomStateValueOrPromise(o, y, E), f(o, y), B !== v.n && (l.add(y), (k = i.c) == null || k.call(i, y), m(o, y));
         return;
       } else
-        return writeAtomState(o, y, ...k);
+        return writeAtomState(o, y, ...S);
     } finally {
-      m || (u(o), p(o));
+      h || (u(o), p(o));
     }
   };
   try {
     return c(o, n, x, b, ...r);
   } finally {
-    m = !1;
+    h = !1;
   }
 }, mountDependencies = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[3], c = a[6], d = a[11], p = a[15], u = a[18], g = a[19], h = d(o, n), f = l.get(n);
-  if (f && !isPendingPromise(h.v)) {
-    for (const [m, x] of h.d)
-      if (!f.d.has(m)) {
-        const b = d(o, m);
-        u(o, m).t.add(n), f.d.add(m), x !== b.n && (i.add(m), (r = c.c) == null || r.call(c, m), p(o, m));
+  const a = getBuildingBlocks(o), l = a[1], i = a[3], c = a[6], d = a[11], p = a[15], u = a[18], g = a[19], m = d(o, n), f = l.get(n);
+  if (f && !isPendingPromise(m.v)) {
+    for (const [h, x] of m.d)
+      if (!f.d.has(h)) {
+        const b = d(o, h);
+        u(o, h).t.add(n), f.d.add(h), x !== b.n && (i.add(h), (r = c.c) == null || r.call(c, h), p(o, h));
       }
-    for (const m of f.d || [])
-      if (!h.d.has(m)) {
-        f.d.delete(m);
-        const x = g(o, m);
+    for (const h of f.d || [])
+      if (!m.d.has(h)) {
+        f.d.delete(h);
+        const x = g(o, h);
         x == null || x.t.delete(n);
       }
   }
 }, mountAtom = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[4], c = a[6], d = a[10], p = a[11], u = a[12], g = a[13], h = a[14], f = a[16], m = p(o, n);
+  const a = getBuildingBlocks(o), l = a[1], i = a[4], c = a[6], d = a[10], p = a[11], u = a[12], g = a[13], m = a[14], f = a[16], h = p(o, n);
   let x = l.get(n);
   if (!x) {
-    h(o, n);
-    for (const b of m.d.keys())
+    m(o, n);
+    for (const b of h.d.keys())
       mountAtom(o, b).t.add(n);
     if (x = {
       l: /* @__PURE__ */ new Set(),
-      d: new Set(m.d.keys()),
+      d: new Set(h.d.keys()),
       t: /* @__PURE__ */ new Set()
     }, l.set(n, x), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
       const b = () => {
         let y = !0;
-        const k = (...S) => {
+        const S = (...k) => {
           try {
-            return f(o, n, ...S);
+            return f(o, n, ...k);
           } finally {
             y || (g(o), u(o));
           }
         };
         try {
-          const S = d(o, n, k);
-          S && (x.u = () => {
+          const k = d(o, n, S);
+          k && (x.u = () => {
             y = !0;
             try {
-              S();
+              k();
             } finally {
               y = !1;
             }
@@ -11387,13 +11444,13 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   var r;
   const a = getBuildingBlocks(o), l = a[1], i = a[5], c = a[6], d = a[11], p = a[19], u = d(o, n);
   let g = l.get(n);
-  if (g && !g.l.size && !Array.from(g.t).some((h) => {
+  if (g && !g.l.size && !Array.from(g.t).some((m) => {
     var f;
-    return (f = l.get(h)) == null ? void 0 : f.d.has(n);
+    return (f = l.get(m)) == null ? void 0 : f.d.has(n);
   })) {
     g.u && i.add(g.u), g = void 0, l.delete(n), (r = c.u) == null || r.call(c, n);
-    for (const h of u.d.keys()) {
-      const f = p(o, h);
+    for (const m of u.d.keys()) {
+      const f = p(o, m);
       f == null || f.t.delete(n);
     }
     return;
@@ -11531,8 +11588,8 @@ const isPromiseLike = (o) => typeof (o == null ? void 0 : o.then) == "function",
 function useAtomValue(o, n) {
   const { delay: r, unstable_promiseStatus: a = !React__default.use } = {}, l = useStore(), [[i, c, d], p] = useReducer(
     (g) => {
-      const h = l.get(o);
-      return Object.is(g[0], h) && g[1] === l && g[2] === o ? g : [h, l, o];
+      const m = l.get(o);
+      return Object.is(g[0], m) && g[1] === l && g[2] === o ? g : [m, l, o];
     },
     void 0,
     () => [l.get(o), l, o]
@@ -11542,9 +11599,9 @@ function useAtomValue(o, n) {
     const g = l.sub(o, () => {
       if (a)
         try {
-          const h = l.get(o);
-          isPromiseLike(h) && attachPromiseStatus(
-            createContinuablePromise(h, () => l.get(o))
+          const m = l.get(o);
+          isPromiseLike(m) && attachPromiseStatus(
+            createContinuablePromise(m, () => l.get(o))
           );
         } catch {
         }
@@ -11684,12 +11741,12 @@ function domToJsx(o, n = 0) {
     if (o.length === 0) return "";
     if (o.length === 1) return domToJsx(o[0], n);
     const g = "  ".repeat(n);
-    let h = `${g}<>
+    let m = `${g}<>
 `;
     for (const f of o)
-      h += domToJsx(f, n + 1);
-    return h += `${g}</>
-`, h;
+      m += domToJsx(f, n + 1);
+    return m += `${g}</>
+`, m;
   }
   const r = "  ".repeat(n);
   if (o.nodeType === Node.TEXT_NODE) {
@@ -11718,57 +11775,57 @@ function domToJsx(o, n = 0) {
     const g = [];
     for (const f of o.attributes)
       if (f.name.startsWith("on") && f.name !== "on") {
-        const m = f.name.toLowerCase().replace(/on(\w)/, (x, b) => "on" + b.toUpperCase());
-        g.push(`${m}={${f.value}}`);
+        const h = f.name.toLowerCase().replace(/on(\w)/, (x, b) => "on" + b.toUpperCase());
+        g.push(`${h}={${f.value}}`);
       } else if (f.name === "style" && f.value) {
-        const m = f.value.split(";").reduce(
+        const h = f.value.split(";").reduce(
           (x, b) => {
-            const [y, k] = b.split(":").map((S) => S.trim());
-            if (y && k) {
-              const S = y.replace(/-([a-z])/g, (v) => v[1].toUpperCase());
-              x[S] = k.replace(/['"]/g, "");
+            const [y, S] = b.split(":").map((k) => k.trim());
+            if (y && S) {
+              const k = y.replace(/-([a-z])/g, (v) => v[1].toUpperCase());
+              x[k] = S.replace(/['"]/g, "");
             }
             return x;
           },
           {}
         );
-        g.push(`style={${JSON.stringify(m)}}`);
+        g.push(`style={${JSON.stringify(h)}}`);
       } else {
-        const m = convertAttributeName(f.name);
-        g.push(`${m}="${f.value}"`);
+        const h = convertAttributeName(f.name);
+        g.push(`${h}="${f.value}"`);
       }
-    const h = g.length > 0 ? ` ${g.join(" ")}` : "";
-    return `${r}<${a}${h} />
+    const m = g.length > 0 ? ` ${g.join(" ")}` : "";
+    return `${r}<${a}${m} />
 `;
   }
   let i = `${r}<${a}`;
   const c = [];
   for (const g of o.attributes)
     if (g.name.startsWith("on") && g.name !== "on") {
-      const h = g.name.toLowerCase().replace(/on(\w)/, (f, m) => "on" + m.toUpperCase());
-      c.push(`${h}={${g.value}}`);
+      const m = g.name.toLowerCase().replace(/on(\w)/, (f, h) => "on" + h.toUpperCase());
+      c.push(`${m}={${g.value}}`);
     } else if (g.name === "style" && g.value) {
-      const h = g.value.split(";").reduce(
-        (f, m) => {
-          const [x, b] = m.split(":").map((y) => y.trim());
+      const m = g.value.split(";").reduce(
+        (f, h) => {
+          const [x, b] = h.split(":").map((y) => y.trim());
           if (x && b) {
-            const y = x.replace(/-([a-z])/g, (k) => k[1].toUpperCase());
+            const y = x.replace(/-([a-z])/g, (S) => S[1].toUpperCase());
             f[y] = b.replace(/['"]/g, "");
           }
           return f;
         },
         {}
       );
-      c.push(`style={${JSON.stringify(h)}}`);
+      c.push(`style={${JSON.stringify(m)}}`);
     } else {
-      const h = convertAttributeName(g.name);
-      c.push(`${h}="${g.value}"`);
+      const m = convertAttributeName(g.name);
+      c.push(`${m}="${g.value}"`);
     }
   c.length > 0 && (i += " " + c.join(" "));
   const d = Array.from(o.childNodes);
   if (!d.some((g) => {
-    var h;
-    return g.nodeType === Node.TEXT_NODE ? (h = g.textContent) == null ? void 0 : h.trim() : !0;
+    var m;
+    return g.nodeType === Node.TEXT_NODE ? (m = g.textContent) == null ? void 0 : m.trim() : !0;
   }))
     i += ` />
 `;
@@ -11825,7 +11882,7 @@ ${l}${l}${i == null ? void 0 : i.trimEnd()}
 ${l})
 }`, { jsx: i, html: formatHtml(c), componentName: a };
 }, ExportCodeModalContent = ({ tab: o }) => {
-  var k;
+  var S;
   const { t: n } = useTranslation(), [r, a] = useState({ html: "", jsx: "" }), l = useSelectedBlock(), i = useBlocksHtmlForAi(), [c, d] = useState(""), [p, u] = useState(!1), g = () => {
     switch (o) {
       case "js":
@@ -11837,7 +11894,7 @@ ${l})
       case "tailwind":
         return "tailwind.config.js";
     }
-  }, h = () => {
+  }, m = () => {
     switch (o) {
       case "js":
       case "ts":
@@ -11850,18 +11907,18 @@ ${l})
   }, f = useCallback(async () => {
     try {
       u(!1);
-      let S = i({ blockId: l == null ? void 0 : l._id, additionalCoreBlocks: ["Icon"] });
-      S = S.replace(/\s*bid=["'][^"']*["']/g, "");
+      let k = i({ blockId: l == null ? void 0 : l._id, additionalCoreBlocks: ["Icon"] });
+      k = k.replace(/\s*bid=["'][^"']*["']/g, "");
       const v = o === "ts", {
-        jsx: _,
+        jsx: B,
         html: E,
         componentName: I
       } = await getExportedCoded({
         selectedBlock: l,
-        html: S,
+        html: k,
         isTypeScript: v
       });
-      a({ html: E, jsx: _ }), d(I), u(!0);
+      a({ html: E, jsx: B }), d(I), u(!0);
     } catch {
       const v = "<div>Export failed. Close the modal and try again.</div>";
       a({ html: v, jsx: v }), toast.error(n("Failed to generate export HTML"));
@@ -11870,23 +11927,23 @@ ${l})
   useEffect(() => {
     f();
   }, [f, o]);
-  const m = useCallback(
-    async (S) => {
+  const h = useCallback(
+    async (k) => {
       try {
-        navigator.clipboard.writeText(S), toast.success(n("Export code copied!"));
+        navigator.clipboard.writeText(k), toast.success(n("Export code copied!"));
       } catch {
         toast.error(n("Failed to copy export code"));
       }
     },
     [n]
-  ), x = (S) => {
-    const v = new Blob([S], { type: "text/jsx" }), _ = URL.createObjectURL(v), E = document.createElement("a");
-    E.href = _, E.download = g(), document.body.appendChild(E), E.click(), URL.revokeObjectURL(_), document.body.removeChild(E), toast.success(n("Export code downloaded successfully!"));
+  ), x = (k) => {
+    const v = new Blob([k], { type: "text/jsx" }), B = URL.createObjectURL(v), E = document.createElement("a");
+    E.href = B, E.download = g(), document.body.appendChild(E), E.click(), URL.revokeObjectURL(B), document.body.removeChild(E), toast.success(n("Export code downloaded successfully!"));
   }, b = /* @__PURE__ */ jsxs("span", { children: [
     "Download ",
     /* @__PURE__ */ jsx("span", { className: "font-mono text-xs font-light text-gray-300", children: g() })
   ] }), y = useMemo(() => {
-    const S = { extend: shadcnTheme() }, v = JSON.stringify(S, null, 2);
+    const k = { extend: shadcnTheme() }, v = JSON.stringify(k, null, 2);
     return `{
   // Your tailwind config ...
 
@@ -11895,12 +11952,12 @@ ${l})
   `)},
 }`;
   }, []);
-  return ((k = r == null ? void 0 : r.jsx) == null ? void 0 : k.length) > 0 && p ? /* @__PURE__ */ jsx(
+  return ((S = r == null ? void 0 : r.jsx) == null ? void 0 : S.length) > 0 && p ? /* @__PURE__ */ jsx(
     CodeDisplay,
     {
-      onCopy: m,
+      onCopy: h,
       code: o === "tailwind" ? y : o === "html" ? r.html : r.jsx,
-      language: h(),
+      language: m(),
       downloadText: b,
       onDownload: x
     },