@chaibuilder/sdk 3.2.2 → 3.2.4

package/dist/{index-CPvjpLmN.js → index-Dml6tJKh.js}

@@ -109,18 +109,18 @@ class PubSub {
   }
 }
 const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
-  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: i } = usePermissions(), l = 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: l }), g = (m) => {
+  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: i } = usePermissions(), l = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (m) => c ? get(m, "_parent") === c : !get(m, "_parent")), u = canAddChildBlock(get(o, "_type", "")), p = findIndex(d, { _id: l }), 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 };
-      m === "BEFORE" ? f.position = Math.max(u, 0) : m === "AFTER" && (f.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, f);
+      m === "BEFORE" ? f.position = Math.max(p, 0) : m === "AFTER" && (f.position = p + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, f);
     }
   };
   return i(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: n }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "border border-blue-500 bg-primary text-white shadow-2xl", children: [
-      p && /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("CHILD"), children: r("Add inside") }),
+      u && /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("CHILD"), children: r("Add inside") }),
       /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("BEFORE"), children: r("Add before") }),
       /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer text-xs", onClick: () => g("AFTER"), children: r("Add after") })
     ] })
@@ -203,16 +203,16 @@ function insertBlocksAtPosition(o, n, r, a) {
   const i = [...n];
   let l = [...o];
   if (r) {
-    const u = o.find((g) => g._id === r);
-    if (u && u.content !== void 0 && u.content !== "" && !o.some((m) => m._parent === r)) {
+    const p = o.find((g) => g._id === r);
+    if (p && p.content !== void 0 && p.content !== "" && !o.some((m) => m._parent === r)) {
       const f = {
         _id: generateUUID(),
         _parent: r,
         _type: "Text",
-        content: u.content
+        content: p.content
       };
-      Object.keys(u).forEach((h) => {
-        h.startsWith("content-") && (f[h] = u[h]);
+      Object.keys(p).forEach((h) => {
+        h.startsWith("content-") && (f[h] = p[h]);
       }), i.unshift(f), l = l.map((h) => {
         if (h._id === r) {
           const x = { ...h, content: "" };
@@ -224,22 +224,22 @@ function insertBlocksAtPosition(o, n, r, a) {
       });
     }
   }
-  let c = l.filter((u) => !u._parent);
-  r && (c = l.filter((u) => u._parent === r));
+  let c = l.filter((p) => !p._parent);
+  r && (c = l.filter((p) => p._parent === r));
   const d = !isNaN(a) || a > -1 ? Math.min(a, c.length) : c.length;
-  let p = l.length;
-  for (let u = 0, g = 0; u < l.length; u++)
-    if (r !== void 0 ? l[u]._parent === r : !l[u]._parent) {
+  let u = l.length;
+  for (let p = 0, g = 0; p < l.length; p++)
+    if (r !== void 0 ? l[p]._parent === r : !l[p]._parent) {
       if (g === d) {
-        p = u;
+        u = p;
         break;
       }
       g++;
     }
-  return !r && a !== void 0 && a >= c.length && (p = l.length), [
-    ...l.slice(0, p),
+  return !r && a !== void 0 && a >= c.length && (u = l.length), [
+    ...l.slice(0, u),
     ...i,
-    ...l.slice(p)
+    ...l.slice(u)
   ];
 }
 function getBlocksTree(o) {
@@ -253,15 +253,15 @@ function findNodeById(o, n) {
   return o.first((r) => r.model._id === n) || null;
 }
 function moveNode(o, n, r, a) {
-  var u, g;
+  var p, g;
   const i = findNodeById(o, n), l = findNodeById(o, r);
   if (!i || !l) return !1;
   l.children || (l.model.children = []);
-  let c = (u = l == null ? void 0 : l.children) == null ? void 0 : u.findIndex((m) => m.model._id === n);
+  let c = (p = l == null ? void 0 : l.children) == null ? void 0 : p.findIndex((m) => m.model._id === n);
   i.drop(), c = Math.max(c, 0);
-  const p = (((g = i == null ? void 0 : i.model) == null ? void 0 : g._parent) || "root") === r && c <= a ? a - 1 : a;
+  const u = (((g = i == null ? void 0 : i.model) == null ? void 0 : g._parent) || "root") === r && c <= a ? a - 1 : a;
   try {
-    l.addChildAtIndex(i, p);
+    l.addChildAtIndex(i, u);
   } catch (m) {
     return console.error("Error adding child to parent:", m), !1;
   }
@@ -277,10 +277,10 @@ function handleOldParentTextBlock(o, n) {
     if (l && l._type === "Text" && "content" in a)
       return o.map((d) => {
         if (d._id === r) {
-          const p = { ...d, content: l.content };
-          return Object.keys(l).forEach((u) => {
-            u.startsWith("content-") && (p[u] = l[u]);
-          }), p;
+          const u = { ...d, content: l.content };
+          return Object.keys(l).forEach((p) => {
+            p.startsWith("content-") && (u[p] = l[p]);
+          }), u;
         }
         return d;
       }).filter((d) => d._id !== l._id);
@@ -298,32 +298,32 @@ function handleNewParentTextBlock(o, n, r) {
       _type: "Text",
       content: a.content
     };
-    Object.keys(a).forEach((u) => {
-      u.startsWith("content-") && (c[u] = a[u]);
+    Object.keys(a).forEach((p) => {
+      p.startsWith("content-") && (c[p] = a[p]);
     });
-    const d = o.map((u) => {
-      if (u._id === r) {
-        const g = { ...u, content: "" };
+    const d = o.map((p) => {
+      if (p._id === r) {
+        const g = { ...p, content: "" };
         return Object.keys(g).forEach((m) => {
           m.startsWith("content-") && (g[m] = "");
         }), g;
       }
-      return u;
-    }), p = d.findIndex((u) => u._id === n._id);
-    return p !== -1 ? [...d.slice(0, p), c, ...d.slice(p)] : [c, ...d];
+      return p;
+    }), u = d.findIndex((p) => p._id === n._id);
+    return u !== -1 ? [...d.slice(0, u), c, ...d.slice(u)] : [c, ...d];
   }
   return o;
 }
 function moveBlocksWithChildren(o, n, r, a) {
   if (!n) return o;
-  const i = o.find((u) => u._id === n);
+  const i = o.find((p) => p._id === n);
   if (!i) return o;
   let l = handleOldParentTextBlock(o, i);
-  const c = r || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(l) });
-  if (moveNode(p, n, c, a)) {
-    let u = flattenTree(p);
-    const g = u.find((m) => m._id === n);
-    return g && (g._parent = c === "root" ? null : c), u.shift(), r && (u = handleNewParentTextBlock(u, i, r)), u;
+  const c = r || "root", u = new TreeModel().parse({ _id: "root", children: getBlocksTree(l) });
+  if (moveNode(u, n, c, a)) {
+    let p = flattenTree(u);
+    const g = p.find((m) => m._id === n);
+    return g && (g._parent = c === "root" ? null : c), p.shift(), r && (p = handleNewParentTextBlock(p, i, r)), p;
   }
   return l;
 }
@@ -397,15 +397,15 @@ const useSelectedBlocksDisplayChild = () => ({
 }, removeNestedBlocks = (o, n) => {
   let r = [...o], a = [];
   n.forEach((d) => {
-    const p = r.find((m) => m._id === d);
-    if (!p || !p._parent) return;
-    const u = p._parent, g = r.filter((m) => m._parent === u);
+    const u = r.find((m) => m._id === d);
+    if (!u || !u._parent) return;
+    const p = u._parent, g = r.filter((m) => m._parent === p);
     if (g.length === 2) {
       const m = g.find((f) => f._id !== d);
       if (m && m._type === "Text") {
-        const f = r.find((h) => h._id === u);
+        const f = r.find((h) => h._id === p);
         f && "content" in f && (r = r.map((h) => {
-          if (h._id === u) {
+          if (h._id === p) {
             const x = { ...h, content: m.content };
             return Object.keys(m).forEach((b) => {
               b.startsWith("content-") && (x[b] = m[b]);
@@ -485,25 +485,25 @@ const useSelectedBlocksDisplayChild = () => ({
     description: "Prevents interactive elements (links, buttons with href) from being nested inside other interactive elements",
     validate: (o, n) => {
       const r = [], a = (l, c = !1, d = []) => {
-        l.forEach((p) => {
-          const u = [...d, p._id], g = p._type === "Link", m = p._type === "Button" && p.link && p.link.href && p.link.href.trim() !== "", f = g || m;
+        l.forEach((u) => {
+          const p = [...d, u._id], g = u._type === "Link", m = u._type === "Button" && u.link && u.link.href && u.link.href.trim() !== "", f = g || m;
           if (f && c) {
             const h = g ? "Link" : "Button with href";
             r.push({
-              id: `nested-interactive-tree-${p._id}`,
+              id: `nested-interactive-tree-${u._id}`,
               message: `${h} cannot be nested inside another interactive element (link or button with href)`,
               severity: "error",
-              blockId: p._id
+              blockId: u._id
             });
           }
-          p.children && p.children.length > 0 && a(p.children, f, u);
+          u.children && u.children.length > 0 && a(u.children, f, p);
         });
       }, i = (l) => {
         l.filter((d) => d._type === "Link" || d._type === "Button" && d.link && d.link.href && d.link.href.trim() !== "").forEach((d) => {
           if (d._parent) {
-            const p = l.find((f) => f._id === d._parent), u = p && p._type === "Link", g = p && p._type === "Button" && p.link && p.link.href && p.link.href.trim() !== "";
-            if (u || g) {
-              const f = d._type === "Link" ? "Link" : "Button with href", h = u ? "Link" : "Button with href";
+            const u = l.find((f) => f._id === d._parent), p = u && u._type === "Link", g = u && u._type === "Button" && u.link && u.link.href && u.link.href.trim() !== "";
+            if (p || g) {
+              const f = d._type === "Link" ? "Link" : "Button with href", h = p ? "Link" : "Button with href";
               r.push({
                 id: `nested-interactive-parent-${d._id}`,
                 message: `${f} cannot be nested inside ${h}`,
@@ -511,7 +511,7 @@ const useSelectedBlocksDisplayChild = () => ({
                 blockId: d._id
               });
             }
-            let m = p;
+            let m = u;
             for (; m && m._parent; ) {
               const f = l.find((h) => h._id === m._parent);
               if (f) {
@@ -560,8 +560,8 @@ const useSelectedBlocksDisplayChild = () => ({
         i.forEach((c) => {
           const d = [...l, c._type];
           if (c._type === "TableCell") {
-            const p = d.includes("TableRow"), u = d.includes("TableHead") || d.includes("TableBody"), g = d.includes("Table");
-            (!p || !u || !g) && r.push({
+            const u = d.includes("TableRow"), p = d.includes("TableHead") || d.includes("TableBody"), g = d.includes("Table");
+            (!u || !p || !g) && r.push({
               id: `table-cell-structure-${c._id}`,
               message: "Table Cell must be inside a Table Row, which must be inside Table Head/Body, which must be inside a Table",
               severity: "error",
@@ -615,8 +615,8 @@ const useSelectedBlocksDisplayChild = () => ({
             severity: "error",
             blockId: c._id
           }), c.children && c.children.length > 0) {
-            const p = d ? [...l, c._id] : l;
-            a(c.children, p);
+            const u = d ? [...l, c._id] : l;
+            a(c.children, u);
           }
         });
       };
@@ -630,8 +630,8 @@ const useSelectedBlocksDisplayChild = () => ({
       const r = [], a = [], i = (l, c = []) => {
         l.forEach((d) => {
           if (d._type === "Heading") {
-            const p = d.tag || "h2", u = parseInt(p.replace("h", "")) || 2;
-            a.push({ level: u, blockId: d._id, path: [...c, d._id] });
+            const u = d.tag || "h2", p = parseInt(u.replace("h", "")) || 2;
+            a.push({ level: p, blockId: d._id, path: [...c, d._id] });
           }
           d.children && d.children.length > 0 && i(d.children, [...c, d._id]);
         });
@@ -710,13 +710,13 @@ const defaultRuleRegistry = new StructureRuleRegistry(), useCheckStructure = (o
   const n = useBuilderProp("flags.validateStructure", !0), r = useSetAtom$1(structureErrorsAtom), a = useSetAtom$1(structureValidationValidAtom), i = useSetAtom$1(hasStructureErrorsAtom), l = useSetAtom$1(hasStructureWarningsAtom);
   return useCallback(
     (d) => {
-      const p = d;
-      if (!n || p.length === 0) return;
-      const u = convertToBlocksTree(p), g = [];
+      const u = d;
+      if (!n || u.length === 0) return;
+      const p = convertToBlocksTree(u), g = [];
       let m = defaultRuleRegistry.getRules();
       o.enableAccessibilityRules && (defaultRuleRegistry.enableAccessibilityRules(), m = defaultRuleRegistry.getRules()), o.customRules && o.customRules.length > 0 && m.push(...o.customRules), m.forEach((b) => {
         try {
-          const y = b.validate(p, u);
+          const y = b.validate(u, p);
           g.push(...y);
         } catch (y) {
           console.error(`Error running structure rule "${b.name}":`, y);
@@ -741,9 +741,9 @@ const defaultRuleRegistry = new StructureRuleRegistry(), useCheckStructure = (o
       o(l), n({ type: "blocks-updated", blocks: l });
     },
     addBlocks: (l, c, d) => {
-      o((p) => {
-        const u = insertBlocksAtPosition(p, l, c, d);
-        return n({ type: "blocks-updated", blocks: u }), a(u), i(), u;
+      o((u) => {
+        const p = insertBlocksAtPosition(u, l, c, d);
+        return n({ type: "blocks-updated", blocks: p }), a(p), i(), p;
       });
     },
     removeBlocks: (l) => {
@@ -753,14 +753,14 @@ const defaultRuleRegistry = new StructureRuleRegistry(), useCheckStructure = (o
       });
     },
     moveBlocks: (l, c, d) => {
-      o((p) => {
-        let u = [...p];
+      o((u) => {
+        let p = [...u];
         for (let g = 0; g < l.length; g++)
-          u = moveBlocksWithChildren(u, l[g], c, d);
+          p = moveBlocksWithChildren(p, l[g], c, d);
         return each(l, (g) => {
-          const m = find(u, (f) => f._id === g);
+          const m = find(p, (f) => f._id === g);
           m && r({ id: g, props: { _parent: m._parent || null } });
-        }), n({ type: "blocks-updated", blocks: u }), a(u), i(), u;
+        }), n({ type: "blocks-updated", blocks: p }), a(p), i(), p;
       });
     },
     updateBlocksProps: (l) => {
@@ -777,7 +777,7 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
     status: "idle",
     props: {},
     error: void 0
-  }), 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";
+  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (h) => ({})), u = useSetAtom$1(blockRepeaterDataAtom), p = 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)) {
@@ -790,7 +790,7 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
       return;
     }
     n === "live" && (!g && !m || (l((h) => ({ ...h, status: "loading", props: {} })), d({ block: o }).then((h = {}) => {
-      g ? (p((x) => ({
+      g ? (u((x) => ({
         ...x,
         [o._id]: {
           status: "loaded",
@@ -799,12 +799,12 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
         }
       })), l((x) => ({ ...x, status: "loaded", props: { totalItems: get(h, "totalItems") } })), c([o._id], { totalItems: get(h, "totalItems") })) : l((x) => ({ ...x, status: "loaded", props: isObject(h) ? h : {} }));
     }).catch((h) => {
-      g ? (p((x) => ({
+      g ? (u((x) => ({
         ...x,
         [o._id]: { status: "error", error: h, props: [] }
       })), l((x) => ({ ...x, status: "error", error: h, props: {} }))) : l((x) => ({ ...x, status: "error", error: h, props: {} }));
     })));
-  }, [o == null ? void 0 : o._id, u, g, m, a, n]), {
+  }, [o == null ? void 0 : o._id, p, g, m, a, n]), {
     $loading: get(i, "status") === "loading",
     ...o ? get(i, "props", {}) : {}
   };
@@ -960,13 +960,13 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
   }
 }) : !1, useSavePage = () => {
   const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (y) => {
-  }), a = useBuilderProp("onSaveStateChange", noop), i = useGetPageData(), [l] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: d, fallbackLang: p } = useLanguages(), [u] = useIsPageLoaded(), g = useAtomValue$1(chaiDesignTokensAtom), m = useCheckStructure(), [, f] = useAtom$1(userActionsCountAtom), h = () => {
+  }), a = useBuilderProp("onSaveStateChange", noop), i = useGetPageData(), [l] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: d, fallbackLang: u } = useLanguages(), [p] = useIsPageLoaded(), g = useAtomValue$1(chaiDesignTokensAtom), m = useCheckStructure(), [, f] = useAtom$1(userActionsCountAtom), h = () => {
     const y = i();
-    return !d || d === p ? !1 : checkMissingTranslations(y.blocks || [], d);
+    return !d || d === u ? !1 : checkMissingTranslations(y.blocks || [], d);
   };
   return { savePage: useThrottledCallback(
     async (y = !1, C = !1) => {
-      if (!C && (!c("save_page") || !u))
+      if (!C && (!c("save_page") || !p))
         return;
       const k = i();
       return k != null && k.blocks && m(k.blocks), n("SAVING"), a("SAVING"), f(0), await r({
@@ -987,13 +987,13 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
       f,
       r,
       a,
-      u,
+      p,
       m
     ],
     3e3
     // save only every 5 seconds
   ), savePageAsync: async (y = !1) => {
-    if (!y && (!c("save_page") || !u))
+    if (!y && (!c("save_page") || !p))
       return;
     n("SAVING"), a("SAVING");
     const C = i();
@@ -1014,25 +1014,25 @@ const undoRedoStateAtom = atom({
   canRedo: !1
 }), useUndoManager = () => {
   const [, o] = useAtom$1(builderSaveStateAtom), [n, r] = useAtom$1(undoRedoStateAtom), a = useBuilderProp("onSaveStateChange", noop), i = useCallback(() => {
-    const u = {
+    const p = {
       canUndo: undoManager.hasUndo(),
       canRedo: undoManager.hasRedo()
     };
-    r(u), o("UNSAVED"), a("UNSAVED");
+    r(p), o("UNSAVED"), a("UNSAVED");
   }, [r, o, a]);
   useEffect(() => (undoManager.setCallback(i), () => {
     undoManager.setCallback(noop);
   }), [i]);
   const l = useCallback(
-    (u) => {
-      undoManager.add(u), i();
+    (p) => {
+      undoManager.add(p), i();
     },
     [i]
   ), c = useCallback(() => {
     undoManager.undo(), i();
   }, [i]), d = useCallback(() => {
     undoManager.redo(), i();
-  }, [i]), p = useCallback(() => {
+  }, [i]), u = useCallback(() => {
     undoManager.clear(), r({
       canUndo: !1,
       canRedo: !1
@@ -1045,9 +1045,9 @@ const undoRedoStateAtom = atom({
       redo: d,
       hasUndo: () => n.canUndo,
       hasRedo: () => n.canRedo,
-      clear: p
+      clear: u
     }),
-    [l, c, d, n.canUndo, n.canRedo, p]
+    [l, c, d, n.canUndo, n.canRedo, u]
   );
 }, useBlocksStore = () => useAtom$1(presentBlocksAtom), useBlocksStoreUndoableActions = () => {
   const { add: o } = useUndoManager(), [n] = useBlocksStore(), {
@@ -1091,8 +1091,8 @@ const undoRedoStateAtom = atom({
       else {
         const k = keys(b);
         C = map(x, (S) => {
-          const A = n.find((E) => E._id === S), B = { _id: S };
-          return each(k, (E) => B[E] = A[E]), B;
+          const A = n.find((_) => _._id === S), B = { _id: S };
+          return each(k, (_) => B[_] = A[_]), B;
         });
       }
       c(map(x, (k) => ({ _id: k, ...b }))), o({
@@ -1131,11 +1131,11 @@ const undoRedoStateAtom = atom({
         for (let y = 0; y < b.length; y++)
           b[y]._parent = l[h]._id;
       }
-      const p = first(l);
-      let u, g;
-      return c && (u = find(o, { _id: c }), l[0]._parent = c, forEach(l, (h) => {
+      const u = first(l);
+      let p, g;
+      return c && (p = find(o, { _id: c }), l[0]._parent = c, forEach(l, (h) => {
         h != null && h._parent || (h._parent = c);
-      }), g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (l[0]._parent = u._parent, g = u._parent), r(l, g, d), n([(f = first(l)) == null ? void 0 : f._id]), first(l);
+      }), g = c), !(p ? canAcceptChildBlock(p == null ? void 0 : p._type, u._type) : !0) && p && (l[0]._parent = p._parent, g = p._parent), r(l, g, d), n([(f = first(l)) == null ? void 0 : f._id]), first(l);
     },
     [r, o, n]
   );
@@ -1145,10 +1145,10 @@ const undoRedoStateAtom = atom({
         const b = l.blocks;
         return a(b, c, d);
       }
-      const p = generateUUID(), u = getDefaultBlockProps(l.type), g = {
+      const u = generateUUID(), p = getDefaultBlockProps(l.type), g = {
         _type: l.type,
-        _id: p,
-        ...u,
+        _id: u,
+        ...p,
         ...has(l, "_name") && { _name: l._name },
         ...has(l, "partialBlockId") && { partialBlockId: l.partialBlockId }
       };
@@ -2264,10 +2264,10 @@ function removeDuplicateClasses(o) {
   for (const i of r) {
     const l = i.property, c = n.indexOf(i.mq);
     for (let d = c + 1; d < n.length; d++) {
-      const p = n[d], u = r.find((g) => g.property === l && g.mq === p);
-      if (u && u.cls === i.cls)
-        a = a.replace(u.fullCls, "");
-      else if (u && u.cls !== i.cls)
+      const u = n[d], p = r.find((g) => g.property === l && g.mq === u);
+      if (p && p.cls === i.cls)
+        a = a.replace(p.fullCls, "");
+      else if (p && p.cls !== i.cls)
         break;
     }
   }
@@ -2287,12 +2287,12 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
     )
   ), l = first(o(selectedStylingBlocksAtom));
   return map(i, (c) => {
-    const d = o(c), p = get(d, l.prop, `${STYLES_KEY},`), { classes: u } = getSplitChaiClasses(p);
+    const d = o(c), u = get(d, l.prop, `${STYLES_KEY},`), { classes: p } = getSplitChaiClasses(u);
     return {
       ids: [d._id],
       props: {
         [l.prop]: `${STYLES_KEY},${orderClassesByBreakpoint(
-          removeDuplicateClasses(twMerge(u, a))
+          removeDuplicateClasses(twMerge(p, a))
         )}`
       }
     };
@@ -2534,10 +2534,10 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
         const c = r[l];
         if (isString(c)) {
           const d = chunk(c.split(""), 12);
-          let p = "";
+          let u = "";
           o([n], { [l]: "" });
-          for (let u = 0; u < d.length; u++)
-            p += d[u].join(""), o([n], { [l]: p }), await new Promise((g) => setTimeout(g, a));
+          for (let p = 0; p < d.length; p++)
+            u += d[p].join(""), o([n], { [l]: u }), await new Promise((g) => setTimeout(g, a));
         }
       }
     },
@@ -2575,16 +2575,16 @@ const getBlockWithChildren = (o, n) => {
   return r = flattenDeep([...r, ...getChildBlocks$1(n, o, r)]), r;
 }, pickOnlyAIProps = (o, n, r) => compact(
   o.map((a) => {
-    const i = ["_id", "_type", "_parent"], l = pick(a, i), c = getRegisteredChaiBlock(a._type), d = {}, p = get(c, "aiProps", []);
-    for (const u in a)
-      if (!i.includes(u) && p.includes(u)) {
-        const g = get(a, `${u}-${n}`, ""), m = get(a, u, "");
-        d[u] = isString(g) && g.trim() || m, r && (d[u] = m);
+    const i = ["_id", "_type", "_parent"], l = pick(a, i), c = getRegisteredChaiBlock(a._type), d = {}, u = get(c, "aiProps", []);
+    for (const p in a)
+      if (!i.includes(p) && u.includes(p)) {
+        const g = get(a, `${p}-${n}`, ""), m = get(a, p, "");
+        d[p] = isString(g) && g.trim() || m, r && (d[p] = m);
       }
     return isEmpty(d) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...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), i = useBuilderProp("askAiCallBack", null), l = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (f, h) => {
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), i = useBuilderProp("askAiCallBack", null), l = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: u, fallbackLang: p } = useLanguages(), g = u.length ? u : p, m = (f, h) => {
     const x = cloneDeep(h.find((b) => b._id === f));
     for (const b in x) {
       const y = x[b];
@@ -2602,18 +2602,18 @@ const getBlockWithChildren = (o, n) => {
         if (i) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, C = x.toLowerCase().includes("translate the content"), k = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p, C) : [m(h, d)], S = await i(f, addLangToPrompt(x, g, f), k, y), { blocks: A, error: B } = S;
+            const y = u === p ? "" : u, C = x.toLowerCase().includes("translate the content"), k = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), u, C) : [m(h, d)], S = await i(f, addLangToPrompt(x, g, f), k, y), { blocks: A, error: B } = S;
             if (B) {
               a(B);
               return;
             }
             if (f === "styles") {
-              const E = A.map((w) => {
+              const _ = A.map((w) => {
                 for (const j in w)
                   j !== "_id" && (w[j] = `${STYLES_KEY},${w[j]}`);
                 return w;
               });
-              c(E);
+              c(_);
             } else
               l(A);
             b && b(S);
@@ -2627,8 +2627,8 @@ const getBlockWithChildren = (o, n) => {
       [
         i,
         n,
-        p,
         u,
+        p,
         d,
         g,
         c,
@@ -2701,15 +2701,15 @@ const useBlockHighlight = () => {
   const [o] = useBlocksStore(), [n, r] = useAtom$1(partialBlocksStoreAtom), [a, i] = useAtom$1(partialBlocksLoadingStateAtom), l = useBuilderProp("getPartialBlockBlocks", async (d) => []), c = useMemo(() => o.filter((d) => d._type === "PartialBlock" || d._type === "GlobalBlock").map((d) => get(d, "partialBlockId", get(d, "globalBlock", ""))), [o]);
   useEffect(() => {
     forEach(c, (d) => {
-      has(n, d) || get(a, `${d}.loading`, !1) || (i((p) => ({ ...p, [d]: { loading: !0, error: null } })), l(d).then((p) => {
-        r((u) => ({ ...u, [d]: p })), i((u) => ({
-          ...u,
+      has(n, d) || get(a, `${d}.loading`, !1) || (i((u) => ({ ...u, [d]: { loading: !0, error: null } })), l(d).then((u) => {
+        r((p) => ({ ...p, [d]: u })), i((p) => ({
+          ...p,
           [d]: { loading: !1, error: null }
         }));
-      }).catch((p) => {
-        i((u) => ({
-          ...u,
-          [d]: { loading: !1, error: p.message }
+      }).catch((u) => {
+        i((p) => ({
+          ...p,
+          [d]: { loading: !1, error: u.message }
         }));
       }));
     });
@@ -2725,19 +2725,19 @@ const useBlockHighlight = () => {
   const [o, n] = useState(!1), [r, a] = useState(null), [i, l] = useAtom$1(partialBlocksListAtom), c = useBuilderProp("getPartialBlocks", async () => []), d = useCallback(async () => {
     n(!0), a(null);
     try {
-      const p = await c();
-      l(p), n(!1);
-    } catch (p) {
-      a(p instanceof Error ? p.message : "Failed to fetch partial blocks"), n(!1);
+      const u = await c();
+      l(u), n(!1);
+    } catch (u) {
+      a(u instanceof Error ? u.message : "Failed to fetch partial blocks"), n(!1);
     }
   }, [c, l]);
   return useEffect(() => {
     d();
   }, []), { data: i, isLoading: o, refetch: d, error: r };
 }, useBuilderReset = () => {
-  const { clear: o } = useUndoManager(), [, n] = useSelectedBlockIds(), { clearHighlight: r } = useBlockHighlight(), [, a] = useSelectedStylingBlocks(), [, i] = useAtom$1(aiAssistantActiveAtom), { reset: l } = usePartialBlocksStore(), { setSaveState: c } = useSavePage(), [, d] = useBlockRepeaterDataAtom(), [, p] = useAtom$1(userActionsCountAtom);
+  const { clear: o } = useUndoManager(), [, n] = useSelectedBlockIds(), { clearHighlight: r } = useBlockHighlight(), [, a] = useSelectedStylingBlocks(), [, i] = useAtom$1(aiAssistantActiveAtom), { reset: l } = usePartialBlocksStore(), { setSaveState: c } = useSavePage(), [, d] = useBlockRepeaterDataAtom(), [, u] = useAtom$1(userActionsCountAtom);
   return () => {
-    d({}), n([]), a([]), r(), o(), i(!1), l(), c("SAVED"), p(0);
+    d({}), n([]), a([]), r(), o(), i(!1), l(), c("SAVED"), u(0);
   };
 }, canvasZoomAtom = atomWithStorage("canvasZoom", 100), useCanvasZoom = () => useAtom$1(canvasZoomAtom), codeEditorAtom = atom(null), useCodeEditor = () => useAtom$1(codeEditorAtom), cutBlockIdsAtom = atom([]), useCutBlockIds = () => {
   const [o, n] = useAtom$1(cutBlockIdsAtom), r = useSetAtom$1(copiedBlockIdsAtom), a = useCallback(
@@ -2749,17 +2749,17 @@ const useBlockHighlight = () => {
   return [o, a];
 }, copiedBlockIdsAtom = atom([]), useCopyBlocks = () => {
   const [o] = useBlocksStore(), [n, r] = useAtom$1(copiedBlockIdsAtom), a = useSetAtom$1(cutBlockIdsAtom), { getPartailBlocks: i } = usePartialBlocksStore(), l = useBuilderProp("flags.copyPaste", !0), c = useCallback(
-    (p) => p.some((u) => getDuplicatedBlocks(o, u, null).some((m) => m._type === "PartialBlock" || m._type === "GlobalBlock")),
+    (u) => u.some((p) => getDuplicatedBlocks(o, p, null).some((m) => m._type === "PartialBlock" || m._type === "GlobalBlock")),
     [o]
   ), d = useCallback(
-    async (p, u = !1) => {
+    async (u, p = !1) => {
       try {
-        if (isEmpty(p)) return;
-        r(p), a([]);
+        if (isEmpty(u)) return;
+        r(u), a([]);
         const g = {
-          _chai_copied_blocks: p.flatMap((m) => {
+          _chai_copied_blocks: u.flatMap((m) => {
             const f = getDuplicatedBlocks(o, m, null);
-            if (!u)
+            if (!p)
               return f;
             let h = [];
             for (const x of f)
@@ -2828,19 +2828,19 @@ const useBlockHighlight = () => {
   useEffect(() => {
     (async () => {
       if (!(l === "complete" || c.current === "loading")) {
-        c.current = "loading", r((p) => ({ ...p, [o == null ? void 0 : o.id]: { loading: "loading", blocks: [] } }));
+        c.current = "loading", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "loading", blocks: [] } }));
         try {
-          const p = await a(o);
-          c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: p || [] } }));
+          const u = await a(o);
+          c.current = "idle", r((p) => ({ ...p, [o == null ? void 0 : o.id]: { loading: "complete", blocks: u || [] } }));
         } catch {
-          c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: [] } }));
+          c.current = "idle", r((p) => ({ ...p, [o == null ? void 0 : o.id]: { loading: "complete", blocks: [] } }));
         }
       }
     })();
   }, [o, i, l, c, r, a]);
   const d = useCallback(
-    (p) => {
-      r((u) => ({ ...u, [p]: { loading: "idle", blocks: [] } }));
+    (u) => {
+      r((p) => ({ ...p, [u]: { loading: "idle", blocks: [] } }));
     },
     [r]
   );
@@ -2880,8 +2880,8 @@ const useBlockHighlight = () => {
         try {
           const d = await navigator.clipboard.readText();
           if (d) {
-            const p = JSON.parse(d);
-            return has(p, "_chai_copied_blocks");
+            const u = JSON.parse(d);
+            return has(u, "_chai_copied_blocks");
           }
         } catch {
           return !1;
@@ -2912,11 +2912,11 @@ const useBlockHighlight = () => {
         }
         toast.promise(
           async () => {
-            const p = await navigator.clipboard.readText();
-            if (p) {
-              const u = JSON.parse(p);
-              if (has(u, "_chai_copied_blocks"))
-                a(u._chai_copied_blocks, d === "root" ? null : d);
+            const u = await navigator.clipboard.readText();
+            if (u) {
+              const p = JSON.parse(u);
+              if (has(p, "_chai_copied_blocks"))
+                a(p._chai_copied_blocks, d === "root" ? null : d);
               else
                 throw new Error("Nothing to paste");
             } else
@@ -2943,20 +2943,20 @@ const useBlockHighlight = () => {
     )
   );
   return map(l, (c) => {
-    const d = o(c), p = a;
-    let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, i.prop, `${STYLES_KEY},`));
-    return each(p, (m) => {
+    const d = o(c), u = a;
+    let { classes: p, baseClasses: g } = getSplitChaiClasses(get(d, i.prop, `${STYLES_KEY},`));
+    return each(u, (m) => {
       const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
-      u = u.replace(h, " ").replace(/\s+/g, " ").trim();
+      p = p.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) => {
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && u.push(m.split(":").pop().trim());
+    }), each(u, (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: {
-        [i.prop]: `${STYLES_KEY}${g},${u}`
+        [i.prop]: `${STYLES_KEY}${g},${p}`
       }
     };
   });
@@ -2991,8 +2991,8 @@ const useBlockHighlight = () => {
   ), []), i = useCallback(
     (c) => {
       if (!o) return;
-      const p = r(o._type)[c] ?? "#styles:,";
-      n([o._id], { [c]: p });
+      const u = r(o._type)[c] ?? "#styles:,";
+      n([o._id], { [c]: u });
     },
     [o, r, n]
   );
@@ -3000,8 +3000,8 @@ const useBlockHighlight = () => {
     if (!o) return;
     const c = a(o);
     if (c.length === 0) return;
-    const d = r(o._type), p = pick(d, c);
-    n([o._id], p);
+    const d = r(o._type), u = pick(d, c);
+    n([o._id], u);
   }, [o, a, r, n]), reset: i };
 }, useStylingBreakpoint = () => useAtom$1(styleBreakpointAtom), canvasWidthAtom = atomWithStorage("canvasWidth", 800), canvasDisplayWidthAtom = atomWithStorage("canvasDisplayWidth", 800), canvasBreakpointAtom = atom((o) => {
   const n = o(canvasWidthAtom);
@@ -3106,32 +3106,32 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
     else {
       const d = `chai-${kebabCase(c)}`;
       o.tagName = d, o.attributes = [], o.attributes.push({ key: "chai-type", value: c });
-      const p = getRegisteredChaiBlock(c), u = n.find((g) => g._id === (i == null ? void 0 : i.value));
-      if (u && o.attributes.push(
-        ...Object.entries(u).filter(([g]) => !["_id", "_type", "_parent", "_index", "_name"].includes(g)).map(([g, m]) => ({
+      const u = getRegisteredChaiBlock(c), p = n.find((g) => g._id === (i == null ? void 0 : i.value));
+      if (p && o.attributes.push(
+        ...Object.entries(p).filter(([g]) => !["_id", "_type", "_parent", "_index", "_name"].includes(g)).map(([g, m]) => ({
           key: g,
           value: typeof m == "string" ? m : JSON.stringify(m)
         }))
-      ), p && (p != null && p.description) && o.attributes.push({
+      ), u && (u != null && u.description) && o.attributes.push({
         key: "about-this-component",
-        value: p.description
-      }), p) {
-        if (p.canMove) {
-          const g = typeof p.canMove == "function" ? p.canMove() : p.canMove;
+        value: u.description
+      }), u) {
+        if (u.canMove) {
+          const g = typeof u.canMove == "function" ? u.canMove() : u.canMove;
           o.attributes.push({
             key: "can-move",
             value: String(g)
           });
         }
-        if (p.canDelete) {
-          const g = typeof p.canDelete == "function" ? p.canDelete() : p.canDelete;
+        if (u.canDelete) {
+          const g = typeof u.canDelete == "function" ? u.canDelete() : u.canDelete;
           o.attributes.push({
             key: "can-delete",
             value: String(g)
           });
         }
       }
-      c === "Icon" && (o.attributes = o.attributes.filter((g) => g.key !== "icon")), p && p.canAcceptBlock ? o.children && (o.children = o.children.map((g) => transformNode(g, n, r))) : o.children = [];
+      c === "Icon" && (o.attributes = o.attributes.filter((g) => g.key !== "icon")), u && u.canAcceptBlock ? o.children && (o.children = o.children.map((g) => transformNode(g, n, r))) : o.children = [];
     }
   } else
     o.children && (o.children = o.children.map((c) => transformNode(c, n, r)));
@@ -3140,13 +3140,13 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
   const [o] = useBlocksStore(), [n] = useCanvasIframe();
   return useCallback(
     (r) => {
-      var u, g;
+      var p, g;
       if (!n) return "";
-      const a = r != null && r.blockId ? `[data-block-id="${r.blockId}"]` : "#canvas", i = (g = (u = n.contentDocument) == null ? void 0 : u.querySelector(a)) == null ? void 0 : g[a === "#canvas" ? "innerHTML" : "outerHTML"];
+      const a = r != null && r.blockId ? `[data-block-id="${r.blockId}"]` : "#canvas", i = (g = (p = n.contentDocument) == null ? void 0 : p.querySelector(a)) == null ? void 0 : g[a === "#canvas" ? "innerHTML" : "outerHTML"];
       if (!i) return "";
       const d = parse(i).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();
+      let u = stringify(d);
+      return u = u.replace(/#styles:,/g, "#styles:"), u.replace(/\s+/g, " ").trim();
     },
     [n]
   );
@@ -3156,14 +3156,14 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
   const i = a.i18nProps;
   if (!i) return r;
   const l = filter(n, { _type: r._type }), c = pick(r, i);
-  return each(c, (d, p) => {
-    const u = find(l, (g) => {
+  return each(c, (d, u) => {
+    const p = find(l, (g) => {
       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);
+      const m = typeof g[u] == "string" ? (h = g[u]) == null ? void 0 : h.trim().toLowerCase() : JSON.stringify(g[u]), 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}-`)), m = pick(u, g);
+    if (p) {
+      const g = filter(Object.keys(p), (f) => startsWith(f, `${u}-`)), m = pick(p, g);
       r = { ...r, ...m };
     }
   }), r;
@@ -3195,10 +3195,10 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
           if (!l) return null;
           const c = (l == null ? void 0 : l.i18nProps) ?? [];
           if (c.length === 0) return null;
-          const d = r === "ALL" ? Object.keys(i).filter((u) => c.find((g) => u.startsWith(g))) : c.map((u) => r ? `${u}-${r}` : u), p = pick(i, ["_id"]);
-          return each(d, (u) => {
-            p[u] = get(i, u, get(i, u.replace(`-${r}`, "")));
-          }), p;
+          const d = r === "ALL" ? Object.keys(i).filter((p) => c.find((g) => p.startsWith(g))) : c.map((p) => r ? `${p}-${r}` : p), u = pick(i, ["_id"]);
+          return each(d, (p) => {
+            u[p] = get(i, p, get(i, p.replace(`-${r}`, "")));
+          }), u;
         })
       ) : [];
     },
@@ -3229,10 +3229,10 @@ const getAllDescendantIds = (o, n) => {
 }, replaceBlock = (o, n, r) => {
   const a = find(o, { _id: n });
   if (!a) return o;
-  const i = o.findIndex((m) => m._id === n), l = getAllDescendantIds(o, n), c = /* @__PURE__ */ new Set([n, ...l]), 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);
+  const i = o.findIndex((m) => m._id === n), l = getAllDescendantIds(o, n), c = /* @__PURE__ */ new Set([n, ...l]), d = o.filter((m) => !c.has(m._id)), u = new Set(r.map((m) => m._id)), p = r.map((m) => !m._parent || !u.has(m._parent) ? { ...m, _parent: a._parent } : m);
   return [
     ...d.slice(0, i),
-    ...u,
+    ...p,
     ...d.slice(i)
   ];
 }, useReplaceBlock = () => {
@@ -3334,8 +3334,8 @@ const useDragParentHighlight = () => {
       left: 0,
       width: 0,
       height: 0
-    }), removeDropTargetAttributes$2(c), a(), c && c.querySelectorAll("[data-dragging]").forEach((p) => {
-      p.removeAttribute("data-dragging");
+    }), removeDropTargetAttributes$2(c), a(), c && c.querySelectorAll("[data-dragging]").forEach((u) => {
+      u.removeAttribute("data-dragging");
     }), setIsDragging(!1), l(i + 1);
   }, [o, n, c, a, i, l]);
 };
@@ -3430,33 +3430,33 @@ function detectGapZone(o, n, r, a) {
     const l = findClosestSiblingInRow(i, n, r, a);
     if (l) {
       const c = getSiblingsInSameRow(i, l, a);
-      c.sort((d, p) => {
-        const u = d.getBoundingClientRect(), g = p.getBoundingClientRect();
-        return a === "vertical" ? u.top - g.top : u.left - g.left;
+      c.sort((d, u) => {
+        const p = d.getBoundingClientRect(), g = u.getBoundingClientRect();
+        return a === "vertical" ? p.top - g.top : p.left - g.left;
       });
       for (let d = 0; d < c.length - 1; d++) {
-        const p = c[d], u = c[d + 1], g = p.getBoundingClientRect(), m = u.getBoundingClientRect();
+        const u = c[d], p = c[d + 1], g = u.getBoundingClientRect(), m = p.getBoundingClientRect();
         if (a === "vertical") {
           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 };
+            return { before: u, after: p };
         } else {
           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 };
+            return { before: u, after: p };
         }
       }
     }
     for (let c = 0; c < i.length - 1; c++) {
-      const d = i[c], p = i[c + 1], u = d.getBoundingClientRect(), g = p.getBoundingClientRect();
+      const d = i[c], u = i[c + 1], p = d.getBoundingClientRect(), g = u.getBoundingClientRect();
       if (a === "vertical") {
-        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);
+        const m = p.bottom, f = g.top, h = f - m, x = r >= m && r <= f, b = n >= Math.min(p.left, g.left) && n <= Math.max(p.right, g.right);
         if (x && b && h >= ZONE_CONFIG.GAP_THRESHOLD)
-          return { before: d, after: p };
+          return { before: d, after: u };
       } else {
-        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);
+        const m = p.right, f = g.left, h = f - m, x = n >= m && n <= f, b = r >= Math.min(p.top, g.top) && r <= Math.max(p.bottom, g.bottom);
         if (x && b && h >= ZONE_CONFIG.GAP_THRESHOLD)
-          return { before: d, after: p };
+          return { before: d, after: u };
       }
     }
     return null;
@@ -3486,13 +3486,13 @@ function detectParentEdgeProximity(o, n, r, a) {
 function calculateElementZone(o, n, r, a, i) {
   const l = o.getBoundingClientRect();
   if (i === "vertical") {
-    const d = (r - l.top) / l.height, p = calculateEdgeZoneSize(l.height), u = p / l.height;
-    return a ? p > 0 && d < u ? {
+    const d = (r - l.top) / l.height, u = calculateEdgeZoneSize(l.height), p = u / l.height;
+    return a ? u > 0 && d < p ? {
       position: "before",
-      confidence: 1 - d / u
-    } : p > 0 && d > 1 - u ? {
+      confidence: 1 - d / p
+    } : u > 0 && d > 1 - p ? {
       position: "after",
-      confidence: (d - (1 - u)) / u
+      confidence: (d - (1 - p)) / p
     } : {
       position: "inside",
       confidence: 1 - Math.abs(d - 0.5) * 2
@@ -3507,13 +3507,13 @@ function calculateElementZone(o, n, r, a, i) {
       // Higher confidence closer to bottom
     };
   } else {
-    const d = (n - l.left) / l.width, p = calculateEdgeZoneSize(l.width), u = p / l.width;
-    return a ? p > 0 && d < u ? {
+    const d = (n - l.left) / l.width, u = calculateEdgeZoneSize(l.width), p = u / l.width;
+    return a ? u > 0 && d < p ? {
       position: "before",
-      confidence: 1 - d / u
-    } : p > 0 && d > 1 - u ? {
+      confidence: 1 - d / p
+    } : u > 0 && d > 1 - p ? {
       position: "after",
-      confidence: (d - (1 - u)) / u
+      confidence: (d - (1 - p)) / p
     } : {
       position: "inside",
       confidence: 1 - Math.abs(d - 0.5) * 2
@@ -3527,18 +3527,18 @@ function calculateElementZone(o, n, r, a, i) {
   }
 }
 function detectDropZone(o, n, r, a, i) {
-  var S, A, B, E;
+  var S, A, B, _;
   const l = o.getAttribute("data-block-id"), c = o.getAttribute("data-block-type") || "Box";
   if (!l)
     return null;
   let d = o.parentElement;
   for (; d && !d.hasAttribute("data-block-id"); )
     d = d.parentElement;
-  const p = l === "canvas" ? l : 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 = ((S = i.defaultView) == null ? void 0 : S.scrollY) || 0, x = ((A = i.defaultView) == null ? void 0 : A.scrollX) || 0;
+  const u = l === "canvas" ? l : d == null ? void 0 : d.getAttribute("data-block-id"), p = d ? getOrientation(d) : "vertical", g = getOrientation(o), m = isLeafBlock(c), f = !m && canAcceptChildBlock(c, a), h = ((S = i.defaultView) == null ? void 0 : S.scrollY) || 0, x = ((A = i.defaultView) == null ? void 0 : A.scrollX) || 0;
   if (l === "canvas" && hasChildBlocks(o)) {
     const w = getChildBlocks(o), j = w[w.length - 1];
     if (j) {
-      const v = j.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = _.width - I - P, R = _.left + x + I;
+      const v = j.getBoundingClientRect(), E = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = E.width - I - P, R = E.left + x + I;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
@@ -3559,13 +3559,13 @@ function detectDropZone(o, n, r, a, i) {
   if (f && !m && hasChildBlocks(o)) {
     const w = detectGapZone(o, n, r, g);
     if (w) {
-      const j = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = getChildBlocks(o), R = getSiblingsInSameRow(D, w.before, g);
+      const j = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), E = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = getChildBlocks(o), R = getSiblingsInSameRow(D, w.before, g);
       let $ = 0;
       if (R.forEach((F) => {
         const O = F.getBoundingClientRect();
         O.height > $ && ($ = O.height);
       }), g === "vertical") {
-        const F = _.width - I - P, O = _.left + x + I;
+        const F = E.width - I - P, O = E.left + x + I;
         return {
           position: "after",
           placeholderOrientation: "horizontal",
@@ -3602,16 +3602,16 @@ function detectDropZone(o, n, r, a, i) {
       }
     }
   }
-  if (d && p) {
-    const w = detectParentEdgeProximity(d, n, r, u);
+  if (d && u) {
+    const w = detectParentEdgeProximity(d, n, r, p);
     if (w) {
-      const j = d.getBoundingClientRect(), v = window.getComputedStyle(d), _ = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, P = parseFloat(v.paddingBottom) || 0, D = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((E = i.defaultView) == null ? void 0 : E.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
+      const j = d.getBoundingClientRect(), v = window.getComputedStyle(d), E = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, P = parseFloat(v.paddingBottom) || 0, D = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = p === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
       if (w === "start") {
         const O = getChildBlocks(d)[0];
         if (O) {
           const L = O.getBoundingClientRect();
-          if (u === "vertical") {
-            const T = j.width - _ - N, M = j.left + R + _;
+          if (p === "vertical") {
+            const T = j.width - E - N, M = j.left + R + E;
             return {
               position: "before",
               placeholderOrientation: $,
@@ -3623,7 +3623,7 @@ function detectDropZone(o, n, r, a, i) {
               },
               targetElement: O,
               targetBlockId: O.getAttribute("data-block-id"),
-              targetParentId: p,
+              targetParentId: u,
               confidence: 0.9
             };
           } else {
@@ -3639,7 +3639,7 @@ function detectDropZone(o, n, r, a, i) {
               },
               targetElement: O,
               targetBlockId: O.getAttribute("data-block-id"),
-              targetParentId: p,
+              targetParentId: u,
               confidence: 0.9
             };
           }
@@ -3648,8 +3648,8 @@ function detectDropZone(o, n, r, a, i) {
         const O = getChildBlocks(d), L = O[O.length - 1];
         if (L) {
           const T = L.getBoundingClientRect();
-          if (u === "vertical") {
-            const M = j.width - _ - N, H = j.left + R + _;
+          if (p === "vertical") {
+            const M = j.width - E - N, H = j.left + R + E;
             return {
               position: "after",
               placeholderOrientation: $,
@@ -3661,7 +3661,7 @@ function detectDropZone(o, n, r, a, i) {
               },
               targetElement: L,
               targetBlockId: L.getAttribute("data-block-id"),
-              targetParentId: p,
+              targetParentId: u,
               confidence: 0.9
             };
           } else {
@@ -3677,7 +3677,7 @@ function detectDropZone(o, n, r, a, i) {
               },
               targetElement: L,
               targetBlockId: L.getAttribute("data-block-id"),
-              targetParentId: p,
+              targetParentId: u,
               confidence: 0.9
             };
           }
@@ -3685,10 +3685,10 @@ function detectDropZone(o, n, r, a, i) {
       }
     }
   }
-  let b = calculateElementZone(o, n, r, f, u);
+  let b = calculateElementZone(o, n, r, f, p);
   if (m && b.position === "inside") {
     const w = o.getBoundingClientRect();
-    u === "vertical" ? b = {
+    p === "vertical" ? b = {
       position: (r - w.top) / w.height < 0.5 ? "before" : "after",
       confidence: b.confidence
     } : b = {
@@ -3697,14 +3697,14 @@ function detectDropZone(o, n, r, a, i) {
     };
   }
   let y;
-  b.position === "inside" ? y = g === "vertical" ? "horizontal" : "vertical" : y = u === "vertical" ? "horizontal" : "vertical";
+  b.position === "inside" ? y = g === "vertical" ? "horizontal" : "vertical" : y = p === "vertical" ? "horizontal" : "vertical";
   const C = calculatePlaceholderRect(
     o,
     d,
     b.position,
     y,
     i
-  ), k = b.position === "inside" ? l : p;
+  ), k = b.position === "inside" ? l : u;
   return {
     position: b.position,
     placeholderOrientation: y,
@@ -3719,8 +3719,8 @@ function detectDropZone(o, n, r, a, i) {
 function findClosestSiblingInRow(o, n, r, a) {
   if (o.length === 0) return null;
   const i = o.filter((d) => {
-    const p = d.getBoundingClientRect();
-    return a === "vertical" ? r >= p.top && r <= p.bottom : n >= p.left && n <= p.right;
+    const u = d.getBoundingClientRect();
+    return a === "vertical" ? r >= u.top && r <= u.bottom : n >= u.left && n <= u.right;
   });
   if (i.length === 0) {
     const d = /* @__PURE__ */ new Map();
@@ -3728,16 +3728,16 @@ function findClosestSiblingInRow(o, n, r, a) {
       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;
+    let u = null, p = 1 / 0;
     d.forEach((g, m) => {
       const f = Math.abs(a === "vertical" ? r - m : n - m);
-      f < u && (u = f, p = g);
-    }), p && p.length > 0 && i.push(...p);
+      f < p && (p = f, u = g);
+    }), u && u.length > 0 && i.push(...u);
   }
   if (i.length === 0) return null;
   let l = i[0], c = 1 / 0;
   return i.forEach((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));
+    const u = d.getBoundingClientRect(), p = u.left + u.width / 2, g = u.top + u.height / 2, m = Math.sqrt(Math.pow(n - p, 2) + Math.pow(r - g, 2));
     m < c && (c = m, l = d);
   }), l;
 }
@@ -3760,32 +3760,32 @@ function getSiblingsInSameRow(o, n, r) {
 }
 function calculatePlaceholderRect(o, n, r, a, i) {
   var I, P;
-  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((P = i.defaultView) == null ? void 0 : P.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, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, S = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, E = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", j = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(j, o, w);
-  let _ = 0, N = 0;
+  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, u = ((P = i.defaultView) == null ? void 0 : P.scrollX) || 0, p = 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, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, S = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, _ = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", j = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(j, o, w);
+  let E = 0, N = 0;
   if (v.forEach((D) => {
     const R = D.getBoundingClientRect();
-    R.height > _ && (_ = R.height), R.width > N && (N = R.width);
+    R.height > E && (E = R.height), R.width > N && (N = R.width);
   }), r === "before")
     if (a === "horizontal") {
-      const D = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
+      const D = C ? C.width - k - S : l.width, R = C ? C.left + u + k : l.left + u;
       return {
-        top: l.top + d - u - 2,
+        top: l.top + d - p - 2,
         left: R,
         width: D,
         height: 4
       };
     } else {
-      const D = l.top + d, R = w === "horizontal" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
+      const D = l.top + d, R = w === "horizontal" && E > 0 ? E : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: D,
-        left: l.left + p - m - 2,
+        left: l.left + u - m - 2,
         width: 4,
         height: R
       };
     }
   else if (r === "after")
     if (a === "horizontal") {
-      const D = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
+      const D = C ? C.width - k - S : l.width, R = C ? C.left + u + k : l.left + u;
       return {
         top: l.bottom + d + g - 2,
         left: R,
@@ -3793,10 +3793,10 @@ function calculatePlaceholderRect(o, n, r, a, i) {
         height: 4
       };
     } else {
-      const D = l.top + d, R = w === "horizontal" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
+      const D = l.top + d, R = w === "horizontal" && E > 0 ? E : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: D,
-        left: l.right + p + f - 2,
+        left: l.right + u + f - 2,
         width: 4,
         height: R
       };
@@ -3804,17 +3804,17 @@ function calculatePlaceholderRect(o, n, r, a, i) {
   else
     return hasChildBlocks(o) ? getOrientation(o) === "vertical" ? {
       top: l.bottom + d - x - 2,
-      left: l.left + p + b,
+      left: l.left + u + b,
       width: l.width - b - y,
       height: 4
     } : {
       top: l.top + d + h,
-      left: l.right + p - y - 2,
+      left: l.right + u - y - 2,
       width: 4,
       height: l.height - h - x
     } : {
       top: l.top + d + h,
-      left: l.left + p + b,
+      left: l.left + u + b,
       width: l.width - b - y,
       height: Math.max(l.height - h - x, 20)
     };
@@ -3844,6 +3844,140 @@ function canDropAsSiblingWithoutCircularReference(o, n, r) {
   const i = a._parent;
   return canDropWithoutCircularReference(o, i, r);
 }
+const useBlockDrop = () => {
+  const [o, n] = useAtom$1(dragAndDropAtom), [r, a] = useAtom$1(dropIndicatorAtom), [i] = useBlocksStore(), [l] = useCanvasIframe(), { addCoreBlock: c } = useAddBlock(), { moveBlocks: d } = useBlocksStoreUndoableActions(), [, u] = useSelectedBlockIds(), [, p] = useSelectedStylingBlocks(), { clearHighlight: g } = useBlockHighlight(), { clearParentHighlight: m } = useDragParentHighlight(), [f, h] = useAtom$1(canvasRenderKeyAtom), x = useUpdateBlocksProps(), b = l == null ? void 0 : l.contentDocument;
+  return useCallback(
+    (y) => {
+      if (y.preventDefault(), y.stopPropagation(), setIsDragging(!1), restoreDraggedElementStyles(b), removeDropTargetAttributes$1(b), m(), a({
+        isVisible: !1,
+        isValid: !1,
+        position: "inside",
+        placeholderOrientation: "horizontal",
+        isEmpty: !1,
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      }), setTimeout(() => {
+        m(), removeDropTargetAttributes$1(b), a({
+          isVisible: !1,
+          isValid: !1,
+          position: "inside",
+          placeholderOrientation: "horizontal",
+          isEmpty: !1,
+          top: 0,
+          left: 0,
+          width: 0,
+          height: 0
+        });
+      }, 50), !o)
+        return;
+      if (!r.isValid || !r.targetBlockId) {
+        m();
+        return;
+      }
+      n(null);
+      const C = r.targetBlockId, k = r.targetParentId;
+      if (!C)
+        return;
+      const { parentId: S, index: A, replaceImageUrl: B } = calculateInsertionIndex(
+        i,
+        C,
+        k,
+        r.position,
+        o
+      ), _ = o._id !== void 0;
+      if (B && isDraggingOnlyImageBlock(o)) {
+        x([C], { image: get(o, "blocks.0.image") }), setTimeout(() => {
+          h(f + 1);
+        }, 50);
+        return;
+      }
+      if (_)
+        d([o._id], S === null ? void 0 : S, A), g(), p([]), u([o._id]);
+      else {
+        const w = o._type || o.type, j = o != null && o.blocks ? isFunction(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
+        c(
+          w === "PartialBlock" ? {
+            blocks: [{ _type: w, _id: "partial-block", partialBlockId: o.partialBlockId }]
+          } : (j == null ? void 0 : j.length) > 0 ? { blocks: [...j] } : { type: w },
+          S,
+          A
+        );
+      }
+      setTimeout(() => {
+        h(f + 1);
+      }, 50);
+    },
+    [
+      o,
+      r,
+      i,
+      b,
+      c,
+      d,
+      n,
+      a,
+      m,
+      g,
+      u,
+      p,
+      f,
+      h,
+      x
+    ]
+  );
+}, isDraggingOnlyImageBlock = (o) => {
+  var l, c;
+  const n = has(o, "blocks"), r = o == null ? void 0 : o.blocks, a = (r == null ? void 0 : r.length) === 1 && ((l = r == null ? void 0 : r[0]) == null ? void 0 : l._type) === "Image", i = !((c = r == null ? void 0 : r[0]) != null && c._id);
+  return n && a && i;
+};
+function calculateInsertionIndex(o, n, r, a, i) {
+  var l, c;
+  try {
+    if (n === r && ((l = i == null ? void 0 : i.blocks) == null ? void 0 : l.length) === 1 && get(i, "blocks.0._type") === "Image" && ((c = find(o, { _id: n })) == null ? void 0 : c._type) === "Image")
+      return { parentId: "", index: -1, replaceImageUrl: !0 };
+    if (n === "canvas" || a === "inside" && n === "canvas")
+      return {
+        parentId: null,
+        // null for root/canvas
+        index: filter(o, (h) => !(h != null && h._parent)).length
+      };
+    if (a === "inside") {
+      const f = filter(o, { _parent: n });
+      return {
+        parentId: n,
+        index: f.length
+      };
+    }
+    const d = !r || r === "canvas", u = d ? void 0 : r, p = filter(o, (f) => d ? !(f != null && f._parent) : (f == null ? void 0 : f._parent) === u), g = p.findIndex((f) => f._id === n);
+    if (g === -1)
+      return {
+        parentId: d ? null : r,
+        index: p.length
+      };
+    const m = a === "before" ? g : g + 1;
+    return {
+      parentId: d ? null : r,
+      index: m
+    };
+  } catch {
+    return {
+      parentId: null,
+      index: filter(o, (p) => !(p != null && p._parent)).length
+    };
+  }
+}
+function removeDropTargetAttributes$1(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 LEAF_BLOCK_TYPES = [
   "Heading",
   "Text",
@@ -3867,11 +4001,11 @@ const LEAF_BLOCK_TYPES = [
   /** 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: i } = useDragParentHighlight(), [l] = useBlocksStore(), c = n == null ? void 0 : n.contentDocument, d = useRef(null), p = useRef(0), u = useCallback(
+  const [o] = useAtom$1(dragAndDropAtom), [n] = useCanvasIframe(), [, r] = useAtom$1(dropIndicatorAtom), { clearParentHighlight: a, highlightParent: i } = useDragParentHighlight(), [l] = useBlocksStore(), c = n == null ? void 0 : n.contentDocument, d = useRef(null), u = useRef(0), p = 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;
+      u.current = m;
       const y = m, C = h - m;
       let k = !1, S = null, A = 0;
       if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && x > 0 ? (k = !0, S = "up", A = y) : C < AUTO_SCROLL_CONFIG.EDGE_ZONE && x + h < b && (k = !0, S = "down", A = C), !k && d.current !== null) {
@@ -3879,15 +4013,15 @@ const LEAF_BLOCK_TYPES = [
         return;
       }
       if (k && S) {
-        const B = 1 - A / AUTO_SCROLL_CONFIG.EDGE_ZONE, E = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * B, w = () => {
+        const B = 1 - A / AUTO_SCROLL_CONFIG.EDGE_ZONE, _ = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * B, w = () => {
           if (!isDragging || !f) {
             d.current = null;
             return;
           }
-          const j = S === "up" ? -E : E;
+          const j = S === "up" ? -_ : _;
           f.scrollBy(0, j);
-          const v = f.scrollY, _ = v > 0, N = v + h < b, I = p.current, P = h - p.current;
-          S === "up" && _ && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || S === "down" && N && P < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
+          const v = f.scrollY, E = v > 0, N = v + h < b, I = u.current, P = h - u.current;
+          S === "up" && E && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || S === "down" && N && P < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
         };
         d.current === null && (d.current = requestAnimationFrame(w));
       }
@@ -3914,26 +4048,42 @@ const LEAF_BLOCK_TYPES = [
       if (!C)
         return;
       const k = m.clientX, S = m.clientY;
-      u(S);
+      p(S);
       const A = detectDropZone(h, k, S, C, c);
       if (!A)
         return;
       const B = h.getAttribute("data-block-type") || "Box";
-      let E = !1;
+      let _ = !1;
       const w = LEAF_BLOCK_TYPES.includes(B);
+      if (B === "Image" && C === "Image" && isDraggingOnlyImageBlock(o)) {
+        i(x), r({
+          isVisible: !0,
+          isValid: !0,
+          position: A.position,
+          placeholderOrientation: A.placeholderOrientation,
+          isEmpty: !0,
+          top: h.offsetTop,
+          left: A.rect.left,
+          width: h.clientWidth,
+          height: h.clientHeight,
+          targetBlockId: A.targetBlockId,
+          targetParentId: A.targetBlockId
+        });
+        return;
+      }
       if (A.position === "inside") {
         if (w || y && !canDropWithoutCircularReference(y, x, l))
           return;
-        E = canAcceptChildBlock(B, C);
+        _ = canAcceptChildBlock(B, C);
       } else {
-        let v = h.parentElement, _ = "Box";
+        let v = h.parentElement, E = "Box";
         for (; v && !v.hasAttribute("data-block-id"); )
           v = v.parentElement;
-        if (v && (_ = v.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
+        if (v && (E = v.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
           return;
-        E = canAcceptChildBlock(_, C);
+        _ = canAcceptChildBlock(E, C);
       }
-      if (!E)
+      if (!_)
         return;
       i(A.targetParentId);
       const j = A.targetParentId || b;
@@ -3949,9 +4099,9 @@ const LEAF_BLOCK_TYPES = [
         height: A.rect.height,
         targetBlockId: A.targetBlockId,
         targetParentId: j
-      }), removeDropTargetAttributes$1(c), A.targetElement.setAttribute("data-drop-target", "true");
+      }), removeDropTargetAttributes(c), A.targetElement.setAttribute("data-drop-target", "true");
     }, 300),
-    [c, o, r, a, i, l, u]
+    [c, o, r, a, i, l, p]
   );
   return useCallback(
     (m) => {
@@ -3987,7 +4137,7 @@ function getTargetDetail(o) {
     orientation: d
   };
 }
-function removeDropTargetAttributes$1(o) {
+function removeDropTargetAttributes(o) {
   if (!o) return;
   o.querySelectorAll("[data-drop-target]").forEach((r) => r.removeAttribute("data-drop-target"));
 }
@@ -4011,11 +4161,11 @@ function cleanupDragImage(o) {
 const useBlockDragStart = () => {
   const [, o] = useSelectedBlockIds(), [, n] = useSelectedStylingBlocks(), { clearHighlight: r } = useBlockHighlight(), [, a] = useAtom$1(dragAndDropAtom), [, i] = useAtom$1(dropIndicatorAtom), l = useRef(null);
   return useCallback(
-    (c, d, p = !0) => {
+    (c, d, u = !0) => {
       var g;
       l.current && (cleanupDragImage(l.current), l.current = null);
-      const u = p ? pick(d, ["type", "blocks", "partialBlockId"]) : d;
-      if (a(u), c.dataTransfer.setData("text/plain", JSON.stringify({ block: u })), c.dataTransfer.effectAllowed = "move", !p && d._id) {
+      const p = u ? pick(d, ["type", "blocks", "partialBlockId"]) : d;
+      if (a(p), c.dataTransfer.setData("text/plain", JSON.stringify({ block: p })), c.dataTransfer.effectAllowed = "move", !u && d._id) {
         const m = (g = document.getElementById("canvas-iframe")) == null ? void 0 : g.contentDocument;
         if (m) {
           const f = m.querySelector(`[data-block-id="${d._id}"]`);
@@ -4049,126 +4199,7 @@ const useBlockDragStart = () => {
     },
     [o, r, a, i]
   );
-}, useBlockDrop = () => {
-  const [o, n] = useAtom$1(dragAndDropAtom), [r, a] = useAtom$1(dropIndicatorAtom), [i] = useBlocksStore(), [l] = useCanvasIframe(), { addCoreBlock: c } = useAddBlock(), { moveBlocks: d } = useBlocksStoreUndoableActions(), [, p] = useSelectedBlockIds(), [, u] = useSelectedStylingBlocks(), { clearHighlight: g } = useBlockHighlight(), { clearParentHighlight: m } = useDragParentHighlight(), [f, h] = useAtom$1(canvasRenderKeyAtom), x = l == null ? void 0 : l.contentDocument;
-  return useCallback(
-    (b) => {
-      if (b.preventDefault(), b.stopPropagation(), setIsDragging(!1), restoreDraggedElementStyles(x), removeDropTargetAttributes(x), m(), a({
-        isVisible: !1,
-        isValid: !1,
-        position: "inside",
-        placeholderOrientation: "horizontal",
-        isEmpty: !1,
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0
-      }), setTimeout(() => {
-        m(), removeDropTargetAttributes(x), a({
-          isVisible: !1,
-          isValid: !1,
-          position: "inside",
-          placeholderOrientation: "horizontal",
-          isEmpty: !1,
-          top: 0,
-          left: 0,
-          width: 0,
-          height: 0
-        });
-      }, 50), !o)
-        return;
-      if (!r.isValid || !r.targetBlockId) {
-        m();
-        return;
-      }
-      n(null);
-      const y = r.targetBlockId, C = r.targetParentId;
-      if (!y)
-        return;
-      const { parentId: k, index: S } = calculateInsertionIndex(
-        i,
-        y,
-        C,
-        r.position
-      );
-      if (o._id !== void 0)
-        d([o._id], k === null ? void 0 : k, S), g(), u([]), p([o._id]);
-      else {
-        const B = o._type || o.type, E = o != null && o.blocks ? isFunction(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
-        c(
-          B === "PartialBlock" ? {
-            blocks: [{ _type: B, _id: "partial-block", partialBlockId: o.partialBlockId }]
-          } : (E == null ? void 0 : E.length) > 0 ? { blocks: [...E] } : { type: B },
-          k,
-          S
-        );
-      }
-      setTimeout(() => {
-        h(f + 1);
-      }, 50);
-    },
-    [
-      o,
-      r,
-      i,
-      x,
-      c,
-      d,
-      n,
-      a,
-      m,
-      g,
-      p,
-      u,
-      f,
-      h
-    ]
-  );
-};
-function calculateInsertionIndex(o, n, r, a) {
-  try {
-    if (n === "canvas" || a === "inside" && n === "canvas")
-      return {
-        parentId: null,
-        // null for root/canvas
-        index: filter(o, (g) => !(g != null && g._parent)).length
-      };
-    if (a === "inside") {
-      const u = filter(o, { _parent: n });
-      return {
-        parentId: n,
-        index: u.length
-      };
-    }
-    const i = !r || r === "canvas", l = i ? void 0 : r, c = filter(o, (u) => i ? !(u != null && u._parent) : (u == null ? void 0 : u._parent) === l), d = c.findIndex((u) => u._id === n);
-    if (d === -1)
-      return {
-        parentId: i ? null : r,
-        index: c.length
-      };
-    const p = a === "before" ? d : d + 1;
-    return {
-      parentId: i ? null : r,
-      index: p
-    };
-  } catch {
-    return {
-      parentId: null,
-      index: filter(o, (c) => !(c != null && c._parent)).length
-    };
-  }
-}
-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 = () => {
+}, useDragAndDrop = () => {
   const o = useBlockDragStart(), n = useBlockDragOver(), r = useBlockDrop(), a = useBlockDragEnd();
   return {
     onDragStart: o,
@@ -4205,11 +4236,11 @@ 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: i } = useBlocksStoreUndoableActions(), l = 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: l }), g = u <= 0, m = u + 1 === (d == null ? void 0 : d.length), f = getParentBlockOrientation(c, l, a), h = useCallback(
+  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: i } = useBlocksStoreUndoableActions(), l = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), u = (d == null ? void 0 : d.length) <= 1, p = findIndex(d, { _id: l }), g = p <= 0, m = p + 1 === (d == null ? void 0 : d.length), f = getParentBlockOrientation(c, l, a), h = useCallback(
     (x) => {
-      isDisabledControl(g, m, x) || p || (x === "UP" || x === "LEFT" ? i([l], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && i([l], c || null, u + 2), n());
+      isDisabledControl(g, m, x) || u || (x === "UP" || x === "LEFT" ? i([l], c || null, p - 1) : (x === "DOWN" || x === "RIGHT") && i([l], c || null, p + 2), n());
     },
-    [g, m, p, u, l, c, n]
+    [g, m, u, p, l, c, n]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
@@ -4219,19 +4250,19 @@ const FrameContext = React__default.createContext({ document: doc, window: win }
     },
     { document: a == null ? void 0 : a.contentDocument },
     [h]
-  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: m, moveBlock: h, orientation: f };
+  ), { isOnlyChild: u, isFirstBlock: g, isLastBlock: m, moveBlock: h, orientation: f };
 }, BlockController = ({ block: o, updateFloatingBar: n }) => {
   const { isOnlyChild: r, isFirstBlock: a, isLastBlock: i, moveBlock: l, orientation: c } = useBlockController(
     o,
     n
   );
-  return r ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: d, dir: p, key: u }) => c !== p || isDisabledControl(a, i, u) ? null : /* @__PURE__ */ jsx(
+  return r ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: d, dir: u, key: p }) => c !== u || isDisabledControl(a, i, p) ? null : /* @__PURE__ */ jsx(
     d,
     {
-      onClick: () => l(u),
+      onClick: () => l(p),
       className: "rounded p-px hover:bg-white hover:text-blue-500"
     },
-    u
+    p
   )) });
 }, AiIcon = ({
   className: o = "h-full w-full",
@@ -4269,8 +4300,8 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       const l = i.getAttribute("data-block-id");
       if (!l || !i) return;
       const c = i.closest('[data-block-type="Repeater"]');
-      c ? (d = c == null ? void 0 : c.childNodes) == null || d.forEach((p, u) => {
-        p.contains(i) && r(u);
+      c ? (d = c == null ? void 0 : c.childNodes) == null || d.forEach((u, p) => {
+        u.contains(i) && r(p);
       }) : r(-1), n(l);
     },
     [o, n, r]
@@ -4292,8 +4323,8 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
           return;
         }
         if (l != null && l.getAttribute("data-block-parent")) {
-          const c = l.getAttribute("data-style-prop"), d = l.getAttribute("data-style-id"), p = l.getAttribute("data-block-parent");
-          pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, { blockId: p, styleId: d, styleProp: c });
+          const c = l.getAttribute("data-style-prop"), d = l.getAttribute("data-style-id"), u = l.getAttribute("data-block-parent");
+          pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, { blockId: u, styleId: d, styleProp: c });
         } else if (l != null && l.getAttribute("data-block-id")) {
           const c = l.getAttribute("data-block-id");
           pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_SELECTED, c === "canvas" ? [] : [c]);
@@ -4333,7 +4364,7 @@ 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, i] = useState([]), [, l] = useState([]), { onDragStart: c, onDragEnd: d, isDragging: p } = useDragAndDrop(), [u, g] = useState(null), m = useIsDragAndDropEnabled(), f = (h, x = 0) => {
+  const o = useSelectedBlock(), { document: n } = useFrame(), [r] = useSelectedStylingBlocks(), [a, i] = useState([]), [, l] = useState([]), { onDragStart: c, onDragEnd: d, isDragging: u } = useDragAndDrop(), [p, g] = useState(null), m = useIsDragAndDropEnabled(), f = (h, x = 0) => {
     const { top: b } = h.getBoundingClientRect();
     return b + x >= 0 && b - x <= window.innerHeight;
   };
@@ -4363,14 +4394,14 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
         BlockFloatingSelector,
         {
           block: o,
-          isDragging: p && !!u,
-          selectedBlockElement: a[0] || (p ? u : null)
+          isDragging: u && !!p,
+          selectedBlockElement: a[0] || (u ? p : null)
         }
       )
     }
   );
 }, BlockFloatingSelector = ({ block: o, isDragging: n, selectedBlockElement: r }) => {
-  const a = useRemoveBlocks(), i = useDuplicateBlocks(), [, l] = 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({
+  const a = useRemoveBlocks(), i = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, c] = useHighlightBlockId(), [, d] = useSelectedStylingBlocks(), { hasPermission: u } = usePermissions(), { editingBlockId: p } = useInlineEditing(), { document: g } = useFrame(), m = useIsDragAndDropEnabled(), f = useBuilderProp("flags.gotoSettings", !1), { floatingStyles: h, refs: x, update: b } = useFloating({
     placement: "top-start",
     middleware: [
       shift({
@@ -4408,7 +4439,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     });
   }, [r, o == null ? void 0 : o._id]);
   const [, k] = useSidebarActivePanel();
-  return !n && (!r || !o || u) ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return !n && (!r || !o || p) ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     "div",
     {
       role: "button",
@@ -4438,7 +4469,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
         ] }),
         /* @__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: C }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pl-1 pr-1.5", children: [
-          p(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
+          u(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
             AiIcon,
             {
               className: "h-4 w-4 rounded hover:bg-white hover:text-blue-500",
@@ -4455,21 +4486,21 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
             }
           ),
           !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(
+          canDuplicateBlock(get(o, "_type", "")) && u(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(
             CopyIcon,
             {
               className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500",
               onClick: () => i([o == null ? void 0 : o._id])
             }
           ) : null,
-          canDeleteBlock(get(o, "_type", "")) && p(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(
+          canDeleteBlock(get(o, "_type", "")) && u(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(
             TrashIcon,
             {
               className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500",
               onClick: () => a([o == null ? void 0 : o._id])
             }
           ) : null,
-          p(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar: b })
+          u(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar: b })
         ] })
       ] })
     }
@@ -4672,7 +4703,7 @@ G(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(), i = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), f = o ? { document: o } : {};
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), i = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, u] = useCutBlockIds(), [, p] = useCopyBlocks(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), f = o ? { document: o } : {};
   useHotkeys(
     "ctrl+z,meta+z",
     (h) => {
@@ -4690,15 +4721,15 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   ), useHotkeys(
     "ctrl+x,meta+x",
     (h) => {
-      h.preventDefault(), isEmpty(n) || p(n);
+      h.preventDefault(), isEmpty(n) || u(n);
     },
     { ...f, enabled: !isEmpty(n), preventDefault: !0 },
-    [n, p]
+    [n, u]
   ), useHotkeys(
     "ctrl+c,meta+c",
-    () => u(n),
+    () => p(n),
     { ...f, enabled: !isEmpty(n), preventDefault: !0 },
-    [n, u]
+    [n, p]
   ), useHotkeys(
     "ctrl+v,meta+v",
     () => {
@@ -4822,15 +4853,15 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
   const [, a] = useSelectedBlockIds(), [, i] = useSelectedStylingBlocks(), l = useRef(null), c = useDebouncedCallback(
     () => {
-      const { clientWidth: p } = l.current;
-      r(p);
+      const { clientWidth: u } = l.current;
+      r(u);
     },
     [l.current],
     100
   );
   useResizeObserver(l.current, c, l.current !== null), useEffect(() => {
-    const { clientWidth: p } = l.current;
-    n(p);
+    const { clientWidth: u } = l.current;
+    n(u);
   }, []);
   const d = useCallback(() => {
     a([]), i([]);
@@ -4846,20 +4877,20 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     }
   );
 }, useDirectBlockDrag = () => {
-  const [, o] = useSelectedBlockIds(), { onDragStart: n, onDragEnd: r } = useDragAndDrop(), [a] = useBlocksStore(), i = useRef(null), [l, c] = useAtom$1(lastClickTimeAtom), [d, p] = useAtom$1(clickCountAtom), u = useCallback(
+  const [, o] = useSelectedBlockIds(), { onDragStart: n, onDragEnd: r } = useDragAndDrop(), [a] = useBlocksStore(), i = useRef(null), [l, c] = useAtom$1(lastClickTimeAtom), [d, u] = useAtom$1(clickCountAtom), p = useCallback(
     (f) => {
       var C;
       if (f.button !== 0) return;
       const h = Date.now(), x = h - l;
       if (x < 400 && x > 0) {
-        p(2);
+        u(2);
         return;
       }
       c(h);
       const y = (C = f.target.closest("[data-block-id]")) == null ? void 0 : C.getAttribute("data-block-id");
       y && (o([y]), i.current = y);
     },
-    [o, l, c, d, p]
+    [o, l, c, d, u]
   ), g = useCallback(
     (f) => {
       if (!i.current) return;
@@ -4871,7 +4902,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     r(), i.current = null;
   }, [r]);
   return {
-    onMouseDown: u,
+    onMouseDown: p,
     onDragStart: g,
     onDragEnd: m
   };
@@ -4889,8 +4920,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       let d = find(o, { _id: n });
       for (; d; )
         c.push(d), d = find(o, { _id: d._parent });
-      const p = find(c, { _type: l.block });
-      return p && (a[i] = get(p, get(l, "prop"), null)), a;
+      const u = find(c, { _type: l.block });
+      return u && (a[i] = get(u, get(l, "prop"), null)), a;
     }, {}),
     [o]
   );
@@ -4905,23 +4936,23 @@ const RteDropdownMenu = ({
   from: a,
   menuRef: i
 }) => {
-  const { document: l } = useFrame(), [c, d] = useState({ left: void 0, right: void 0, top: void 0, bottom: void 0 }), [p, u] = useState(!1), g = useRef(null);
+  const { document: l } = useFrame(), [c, d] = useState({ left: void 0, right: void 0, top: void 0, bottom: void 0 }), [u, p] = useState(!1), g = useRef(null);
   if (useEffect(() => {
     var C, k;
-    if (!p) {
+    if (!u) {
       d({ left: void 0, right: void 0, top: void 0, bottom: void 0 });
       return;
     }
     const m = (C = g.current) == null ? void 0 : C.getBoundingClientRect(), f = (k = i.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 >= l.body.offsetWidth && (h = void 0, b = l.body.offsetWidth - (m == null ? void 0 : m.right)), x + 202 >= l.body.clientHeight && (x = null, y = l.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") {
+  }, [u]), a === "canvas") {
     const m = () => {
-      u(!1), o && (o == null || o.view.focus(), o == null || o.chain().focus().run());
+      p(!1), o && (o == null || o.view.focus(), o == null || o.chain().focus().run());
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { ref: g, onClick: () => u((f) => !f), className: "cursor-pointer", children: n }),
-      p && (c.left !== void 0 || c.top !== void 0 || c.right !== void 0 || c.bottom !== void 0) && createPortal(
+      /* @__PURE__ */ jsx("div", { ref: g, onClick: () => p((f) => !f), className: "cursor-pointer", children: n }),
+      u && (c.left !== void 0 || c.top !== void 0 || c.right !== void 0 || c.bottom !== void 0) && createPortal(
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -4947,9 +4978,9 @@ const RteDropdownMenu = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DropdownMenu, { open: p, onOpenChange: u, children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DropdownMenu, { open: u, onOpenChange: p, children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "relative outline-none", asChild: !0, children: n }),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "z-50 rounded-md border bg-white p-1 text-xs shadow-xl", children: p && (typeof r == "function" ? r(() => u(!1)) : r) })
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "z-50 rounded-md border bg-white p-1 text-xs shadow-xl", children: u && (typeof r == "function" ? r(() => p(!1)) : r) })
   ] }) });
 };
 atomWithStorage("chai-builder-blocks", []);
@@ -5022,7 +5053,7 @@ const getActiveClasses$1 = (o, n, r) => {
   onRemoveHighlightColor: l,
   onClose: c
 }) => {
-  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");
+  const [d] = useDarkMode(), [u] = useAtom$1(lsThemeAtom), p = (u == null ? void 0 : u.colors) || {}, g = Object.values(p).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(
@@ -5064,22 +5095,22 @@ const getActiveClasses$1 = (o, n, r) => {
   ] });
 }, RteColorPicker = ({ editor: o, from: n, menuRef: r }) => {
   var k, S;
-  const a = (k = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : k.color, i = (S = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : S.color, [l, c] = useState(a || "#000000F2"), [d, p] = useState(i || "#00000057"), [u, g] = useDebouncedState(l, 150), [m, f] = useDebouncedState(d, 150), h = (A, B) => {
+  const a = (k = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : k.color, i = (S = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : S.color, [l, c] = useState(a || "#000000F2"), [d, u] = useState(i || "#00000057"), [p, g] = useDebouncedState(l, 150), [m, f] = useDebouncedState(d, 150), h = (A, B) => {
     B ? (c(A), g(A)) : (o == null || o.chain().setColor(A).run(), c(A));
   }, x = (A, B) => {
-    B ? (p(A), f(A)) : (o == null || o.chain().setHighlight({ color: A }).run(), p(A));
+    B ? (u(A), f(A)) : (o == null || o.chain().setHighlight({ color: A }).run(), u(A));
   }, b = () => {
     o == null || o.chain().unsetColor().run(), c("#000000F2");
   }, y = () => {
     o == null || o.chain().unsetHighlight().run();
   };
   return useEffect(() => {
-    i && p(i);
+    i && u(i);
   }, [i]), 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(
+    p != null && p.includes("#") && (p == null ? void 0 : p.length) >= 3 && (o == null || o.chain().setColor(p).run());
+  }, [p]), /* @__PURE__ */ jsx(
     RteDropdownMenu,
     {
       editor: o,
@@ -5422,11 +5453,11 @@ const RichTextEditor = memo(
       value: o,
       blockId: "active-inline-editing-element",
       placeholder: "Enter text here",
-      onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
-      onBlur: ({ editor: u, event: g }) => {
+      onUpdate: ({ editor: p }) => a((p == null ? void 0 : p.getHTML()) || ""),
+      onBlur: ({ editor: p, event: g }) => {
         const m = g == null ? void 0 : g.relatedTarget, f = l.querySelector(".ProseMirror"), h = l.querySelector(".tippy-box"), x = l.querySelector("#chai-rich-text-menu-bar"), b = f == null ? void 0 : f.contains(m), y = h == null ? void 0 : h.contains(m), C = x == null ? void 0 : x.contains(m), k = window.document.getElementById("rte-widget-color-picker");
         if (!b && !y && !C && !k) {
-          const S = (u == null ? void 0 : u.getHTML()) || "";
+          const S = (p == null ? void 0 : p.getHTML()) || "";
           r(S);
         }
       },
@@ -5434,8 +5465,8 @@ const RichTextEditor = memo(
     });
     useEffect(() => {
       var g, m;
-      const u = getInitialTextAlign(n);
-      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", {
+      const p = getInitialTextAlign(n);
+      p && ((g = c == null ? void 0 : c.commands) == null || g.setTextAlign(p)), (m = c == null ? void 0 : c.commands) == null || m.focus(), c == null || c.emit("focus", {
         editor: c,
         event: new FocusEvent("focus"),
         transaction: []
@@ -5443,14 +5474,14 @@ const RichTextEditor = memo(
     }, [c]);
     const d = useMemo(() => {
       var m;
-      const u = "max-w-none shadow-none outline outline-[2px] [&_*]:shadow-none";
-      if (!n) return u;
+      const p = "max-w-none shadow-none outline outline-[2px] [&_*]:shadow-none";
+      if (!n) return p;
       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" && i(u);
+      return `${p} ${g}`;
+    }, [n]), u = (p) => {
+      p.key === "Escape" && i(p);
     };
-    return c && /* @__PURE__ */ jsxs("div", { onKeyDown: p, onClick: (u) => u.stopPropagation(), className: "relative", children: [
+    return c && /* @__PURE__ */ jsxs("div", { onKeyDown: u, onClick: (p) => p.stopPropagation(), className: "relative", children: [
       /* @__PURE__ */ jsx(
         BubbleMenu,
         {
@@ -5465,7 +5496,7 @@ const RichTextEditor = memo(
         EditorContent,
         {
           id: "active-inline-editing-element",
-          onKeyDown: p,
+          onKeyDown: u,
           value: o,
           editor: c,
           className: d
@@ -5491,11 +5522,11 @@ const RichTextEditor = memo(
       } else
         r();
     }, [c, d]);
-    const p = useMemo(() => {
+    const u = useMemo(() => {
       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(
+    }, [o]), p = useCallback(
       (f) => {
         (f.key === "Enter" || f.key === "Escape") && l(f);
       },
@@ -5518,16 +5549,16 @@ const RichTextEditor = memo(
         }
       };
     }, [o == null ? void 0 : o.className, o == null ? void 0 : o.style]);
-    return /* @__PURE__ */ jsx(Fragment, { children: createElement(p, {
+    return /* @__PURE__ */ jsx(Fragment, { children: createElement(u, {
       ref: a,
       onBlur: g,
-      onKeyDown: u,
+      onKeyDown: p,
       ...m
     }) });
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), { editingBlockId: i, editingItemIndex: l, 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 = i, { blockContent: C, blockType: k } = useMemo(() => {
+    const r = "content", { document: a } = useFrame(), { editingBlockId: i, editingItemIndex: l, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [u, p] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), f = useUpdateBlocksProps(), { selectedLang: h } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = i, { blockContent: C, blockType: k } = useMemo(() => {
       var N;
       const w = o._type;
       let j = o[r];
@@ -5537,7 +5568,7 @@ const RichTextEditor = memo(
       (w) => {
         var v;
         const j = w || ((v = g.current) == null ? void 0 : v.innerText);
-        f([y], { [r]: j }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
+        f([y], { [r]: j }), p(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
       [y, f, c, x, h]
     ), A = useDebouncedCallback(
@@ -5556,16 +5587,16 @@ const RichTextEditor = memo(
       [x, y, h]
     );
     useEffect(() => {
-      var _;
+      var E;
       if (!y) return;
       const w = `[data-block-id="${y}"]`, j = l >= 0 ? `[data-block-index="${l}"]` : "", v = a.querySelector(`${w}${j}`);
-      v && ((_ = v == null ? void 0 : v.classList) == null || _.add("sr-only"), u(v));
+      v && ((E = v == null ? void 0 : v.classList) == null || E.add("sr-only"), p(v));
     }, [y, k, a, l]);
-    const E = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
+    const _ = useMemo(() => u ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
         blockContent: C,
-        editingElement: p,
+        editingElement: u,
         onChange: A,
         onClose: S,
         onEscape: B
@@ -5575,14 +5606,14 @@ const RichTextEditor = memo(
       {
         editorRef: g,
         blockContent: C,
-        editingElement: p,
+        editingElement: u,
         onClose: S,
         onChange: A,
         onEscape: B
       }
-    )) : null, [p, y, k, C, S, h]);
+    )) : null, [u, y, k, C, S, h]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      E,
+      _,
       n
     ] });
   },
@@ -5615,7 +5646,7 @@ const RichTextEditor = memo(
   blockAtom: n,
   children: r
 }) => {
-  const { editingBlockId: a, editingItemIndex: i } = useInlineEditing(), [l] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(l._type), [l._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 = useAtomValue$1(chaiDesignTokensAtom), C = useIsDragAndDropEnabled(), k = b === "edit", S = useDirectBlockDrag(), A = useMemo(
+  const { editingBlockId: a, editingItemIndex: i } = useInlineEditing(), [l] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: d, fallbackLang: u } = useLanguages(), p = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: h, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useAtomValue$1(chaiDesignTokensAtom), C = useIsDragAndDropEnabled(), k = b === "edit", S = useDirectBlockDrag(), A = useMemo(
     () => m ? applyBindingToBlockProps(applyLanguage(l, d, c), g, {
       index: h,
       key: x
@@ -5624,9 +5655,9 @@ const RichTextEditor = memo(
   ), B = useMemo(
     () => getBlockTagAttributes(l, !0, y),
     [l, getBlockTagAttributes, y]
-  ), E = useMemo(
-    () => u(l._id, getBlockRuntimeProps(l._type)),
-    [l._id, l._type, u, getBlockRuntimeProps]
+  ), _ = useMemo(
+    () => p(l._id, getBlockRuntimeProps(l._type)),
+    [l._id, l._type, p, getBlockRuntimeProps]
   ), w = useMemo(() => {
     const P = {
       "data-block-id": l._id,
@@ -5635,24 +5666,24 @@ const RichTextEditor = memo(
     };
     return k && C ? {
       ...P,
-      draggable: !0,
+      draggable: !a,
       onMouseDown: S.onMouseDown,
       onDragStart: S.onDragStart,
       onDragEnd: S.onDragEnd
     } : P;
-  }, [l._id, l._type, h, k, C, S]), j = useMemo(
+  }, [l._id, l._type, h, k, C, S, a]), j = useMemo(
     () => ({
       blockProps: w,
       inBuilder: b === "edit",
-      lang: d || p,
+      lang: d || u,
       ...A,
       ...B,
-      ...E,
+      ..._,
       ...o
     }),
-    [b, w, d, p, A, B, E, o]
-  ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), _ = useMemo(() => get(l, "_show", !0), [l]);
-  if (isNull(f) || !_) return null;
+    [b, w, d, u, A, B, _, o]
+  ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), E = useMemo(() => get(l, "_show", !0), [l]);
+  if (isNull(f) || !E) return null;
   let N = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
     ...j,
     children: r({
@@ -5705,12 +5736,12 @@ const RichTextEditor = memo(
     [o, n]
   );
   const c = useCallback(
-    (d) => filter(o, (p) => p._parent === d).length > 0,
+    (d) => filter(o, (u) => u._parent === d).length > 0,
     [o]
   );
   return c && (a === "Heading" || a === "Paragraph" || a === "Link") && (l = adjustSpacingInContentBlocks(l)), map(l, (d) => {
-    const p = i(d._id);
-    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;
+    const u = i(d._id);
+    return u ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: d, children: (p) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: u, asyncProps: p, 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();
@@ -5720,24 +5751,24 @@ const RichTextEditor = memo(
   return /* @__PURE__ */ jsx(Fragment, { children: r });
 }, useCanvasScale = (o) => {
   const [n] = useCanvasDisplayWidth(), [, r] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [i, l] = useState({}), c = useCallback(() => {
-    const { width: d, height: p } = o;
+    const { width: d, height: u } = o;
     if (d < n) {
-      const u = parseFloat((d / n).toFixed(2).toString());
+      const p = parseFloat((d / n).toFixed(2).toString());
       let g = {};
-      const m = p * u, f = d * u;
-      p && (g = {
+      const m = u * p, f = d * p;
+      u && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - m) / m * 100 + "%",
+        height: 100 + (u - m) / m * 100 + "%",
         width: 100 + (d - f) / f * 100 + "%"
       }), l({
         position: "relative",
         top: 0,
-        transform: `scale(${u})`,
+        transform: `scale(${p})`,
         transformOrigin: a === "rtl" ? "top right" : "top left",
         ...g,
         maxWidth: "none"
         // TODO: Add max-width to the wrapper
-      }), r(u * 100);
+      }), r(p * 100);
     } else
       l({}), r(100);
   }, [n, o, a, r]);
@@ -5752,10 +5783,10 @@ const RichTextEditor = memo(
         return;
       const d = getElementByDataBlockId(a, first(l));
       if (d) {
-        const p = d.getAttribute("data-style-prop");
-        if (p) {
-          const u = d.getAttribute("data-style-id"), g = d.getAttribute("data-block-parent");
-          r([{ id: u, prop: p, blockId: g }]);
+        const u = d.getAttribute("data-style-prop");
+        if (u) {
+          const p = d.getAttribute("data-style-id"), g = d.getAttribute("data-block-parent");
+          r([{ id: p, prop: u, blockId: g }]);
         }
       }
     }, 100);
@@ -5763,13 +5794,13 @@ const RichTextEditor = memo(
     d && (!isEmpty(d) && !includes(l, first(d)) && (c == null || c.closeAll()), o(d));
   }), usePubSub(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, (d) => {
     if (!d) return;
-    const { blockId: p, styleId: u, styleProp: g } = d;
-    p && (includes(l, p) || c == null || c.closeAll(), r([{ id: u, prop: g, blockId: p }]), o([p]));
+    const { blockId: u, styleId: p, styleProp: g } = d;
+    u && (includes(l, u) || c == null || c.closeAll(), r([{ id: p, prop: g, blockId: u }]), o([u]));
   }), usePubSub(CHAI_BUILDER_EVENTS.CLEAR_CANVAS_SELECTION, () => {
     i(), o([]), r([]);
   }), null;
 }, StaticCanvas = () => {
-  const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [i, l] = useState({ width: 0, height: 0 }), c = useCanvasScale(i), [, d] = useCanvasIframe(), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), { onDragOver: g, onDrop: m, onDragEnd: f } = useDragAndDrop(), h = useDropIndicator(), x = useCallback(
+  const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [i, l] = useState({ width: 0, height: 0 }), c = useCanvasScale(i), [, d] = useCanvasIframe(), u = useBuilderProp("loading", !1), p = useBuilderProp("htmlDir", "ltr"), { onDragOver: g, onDrop: m, onDragEnd: f } = useDragAndDrop(), h = useDropIndicator(), x = useCallback(
     (y) => {
       l((C) => ({ ...C, width: y }));
     },
@@ -5782,8 +5813,8 @@ const RichTextEditor = memo(
   }, [a, o]);
   const b = useMemo(() => {
     let y = IframeInitialContent;
-    return y = y.replace("__HTML_DIR__", u), y;
-  }, [u]);
+    return y = y.replace("__HTML_DIR__", p), y;
+  }, [p]);
   return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: x, onResize: x, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -5808,7 +5839,7 @@ const RichTextEditor = memo(
             /* @__PURE__ */ jsx(HeadTags, {}),
             /* @__PURE__ */ jsxs(Provider$1, { children: [
               /* @__PURE__ */ jsxs(Canvas, { children: [
-                p ? /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsx(StaticBlocksRenderer, {}),
+                u ? /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsx(StaticBlocksRenderer, {}),
                 /* @__PURE__ */ jsx(AddBlockAtBottom, {})
               ] }),
               /* @__PURE__ */ jsx(CanvasEventsWatcher, {})
@@ -5837,7 +5868,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-zas3OmxC.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-CelZf2Qf.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, {}) }) }),
@@ -5878,8 +5909,8 @@ const RichTextEditor = memo(
   }, [o]);
   const c = (d) => {
     l(d);
-    const p = sanitizeSvg(d);
-    n(p);
+    const u = sanitizeSvg(d);
+    n(u);
   };
   return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-2", id: "icon-picker-field", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
@@ -5905,24 +5936,24 @@ const RichTextEditor = memo(
     ] })
   ] });
 }, DefaultMediaManager = ({ close: o, onSelect: n, mode: r = "image" }) => {
-  const [a, i] = useState(""), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), m = async (h) => {
+  const [a, i] = useState(""), [l, c] = useState(!1), [d, u] = useState(!1), [p, g] = useState(null), m = async (h) => {
     if (!h.trim()) {
-      p(!1), g("Please enter a URL");
+      u(!1), g("Please enter a URL");
       return;
     }
     try {
-      c(!0), g(null), p(!0), g(null);
+      c(!0), g(null), u(!0), g(null);
     } catch {
-      p(!1), g("Error validating URL");
+      u(!1), g("Error validating URL");
     } finally {
       c(!1);
     }
   }, { t: f } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "flex w-96 flex-col gap-4 p-4", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: f(`${r.charAt(0).toUpperCase() + r.slice(1)} Manager`) }),
-    u && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+    p && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
       /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx(AlertDescription, { children: u })
+      /* @__PURE__ */ jsx(AlertDescription, { children: p })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsx(
@@ -5958,12 +5989,12 @@ const RichTextEditor = memo(
   mode: a = "image"
 }) => {
   const [i, l] = useState(!1), c = useMediaManagerComponent();
-  return /* @__PURE__ */ jsxs(Dialog, { open: i, onOpenChange: (p) => l(p), children: [
+  return /* @__PURE__ */ jsxs(Dialog, { open: i, onOpenChange: (u) => l(u), children: [
     /* @__PURE__ */ jsx(DialogTrigger, { asChild: !0, children: n }),
     /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[90vh] max-w-7xl border-border md:w-fit", children: [
       /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Media Manager" }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: c ? /* @__PURE__ */ jsx(c, { close: () => l(!1), onSelect: (...p) => {
-        r.call(void 0, ...p), l(!1);
+      /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: c ? /* @__PURE__ */ jsx(c, { close: () => l(!1), onSelect: (...u) => {
+        r.call(void 0, ...u), l(!1);
       }, mode: a, assetId: o }) : null })
     ] })
   ] });
@@ -5975,19 +6006,19 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
   const n = ((i = o.split("/").pop()) == null ? void 0 : i.split("?")[0]) || "";
   return [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp", ".ico", ".avif"].some((l) => n.toLowerCase().endsWith(l)) ? n : "";
 }, ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
-  const { t: i } = useTranslation(), { selectedLang: l } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), p = usePageExternalData(), u = r.split(".").pop() || "", g = l ? `_${u}Id-${l}` : `_${u}Id`, m = isEmpty(l) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), f = get(c, g, m ? c == null ? void 0 : c.assetId : ""), h = useMemo(() => {
+  const { t: i } = useTranslation(), { selectedLang: l } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), u = usePageExternalData(), p = r.split(".").pop() || "", g = l ? `_${p}Id-${l}` : `_${p}Id`, m = isEmpty(l) && (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 S = { ...c, [u]: o }, A = applyBindingToBlockProps(S, p, { index: -1, key: "" });
-    return get(A, u, o);
-  }, [o, c, p, u]), x = !!f || h !== PLACEHOLDER_IMAGE, b = (k) => {
+    const S = { ...c, [p]: o }, A = applyBindingToBlockProps(S, u, { index: -1, key: "" });
+    return get(A, p, o);
+  }, [o, c, u, p]), x = !!f || h !== PLACEHOLDER_IMAGE, b = (k) => {
     const S = isArray(k) ? first(k) : k;
     if (S) {
       n(S == null ? void 0 : S.url);
-      const A = S == null ? void 0 : S.width, B = S == null ? void 0 : S.height, E = g.includes("mobile");
+      const A = S == null ? void 0 : S.width, B = S == null ? void 0 : S.height, _ = g.includes("mobile");
       if (c != null && c._id) {
         const w = {
-          ...A && { [E ? "mobileWidth" : "width"]: A },
-          ...B && { [E ? "mobileHeight" : "height"]: B },
+          ...A && { [_ ? "mobileWidth" : "width"]: A },
+          ...B && { [_ ? "mobileHeight" : "height"]: B },
           ...S.description && { alt: S.description }
         };
         if (set(w, g, S.id), isEmpty(w)) return;
@@ -6052,13 +6083,13 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     ] })
   ] });
 }, PathDropdown = ({ data: o, onSelect: n, dataType: r }) => {
-  const [a, i] = React__default.useState([]), [l, c] = React__default.useState(o), d = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", p = React__default.useCallback(
+  const [a, i] = React__default.useState([]), [l, c] = React__default.useState(o), d = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", u = React__default.useCallback(
     (m) => {
       const f = (h) => r === "value" ? h === "value" || h === "object" : r === "array" ? h === "array" : h === r;
       m.type === "object" ? (i((h) => [...h, m.key]), c(m.value)) : f(m.type) && n([...a, m.key].join("."), r);
     },
     [a, n, r]
-  ), u = React__default.useCallback(() => {
+  ), p = React__default.useCallback(() => {
     if (a.length > 0) {
       const m = a.slice(0, -1);
       i(m), c(m.reduce((f, h) => f[h], o));
@@ -6069,7 +6100,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     /* @__PURE__ */ jsxs(CommandList, { children: [
       /* @__PURE__ */ jsx(CommandEmpty, { children: t("No option found.") }),
       /* @__PURE__ */ jsxs(CommandGroup, { children: [
-        a.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: u, className: "flex items-center text-sm", children: [
+        a.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: p, className: "flex items-center text-sm", children: [
           /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "mr-2 h-4 w-4" }),
           t("Back")
         ] }),
@@ -6078,7 +6109,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           {
             value: m.key,
             disabled: !1,
-            onSelect: () => p(m),
+            onSelect: () => u(m),
             className: "flex items-center justify-between",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
@@ -6109,7 +6140,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
   ] });
 };
 function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
-  const [a, i] = React__default.useState(!1), l = useBuilderProp("collections", []), c = React__default.useMemo(() => r === "array" ? { ...l.map((p) => p.id).reduce((p, u) => ({ ...p, [COLLECTION_PREFIX + u]: [] }), {}), ...o } : o, [o, l, r]);
+  const [a, i] = React__default.useState(!1), l = useBuilderProp("collections", []), c = React__default.useMemo(() => r === "array" ? { ...l.map((u) => u.id).reduce((u, p) => ({ ...u, [COLLECTION_PREFIX + p]: [] }), {}), ...o } : o, [o, l, r]);
   return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: i, children: [
     /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
@@ -6138,8 +6169,8 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
       PathDropdown,
       {
         data: c,
-        onSelect: (d, p) => {
-          n(d, p), i(!1);
+        onSelect: (d, u) => {
+          n(d, u), i(!1);
         },
         dataType: r
       }
@@ -6152,20 +6183,20 @@ const DataBindingSelector = ({
   id: r,
   formData: a
 }) => {
-  const i = usePageExternalData(), l = useBuilderProp("flags.dataBinding", !0), c = useSelectedBlockHierarchy(), d = useSelectedBlock(), p = useMemo(() => {
+  const i = usePageExternalData(), l = useBuilderProp("flags.dataBinding", !0), c = useSelectedBlockHierarchy(), d = useSelectedBlock(), u = useMemo(() => {
     if (c.length === 1) return "";
     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(i, p.replace(REPEATER_PREFIX, ""), [])), [p, i]), g = useCallback(
+  }, [c]), p = useMemo(() => first(get(i, u.replace(REPEATER_PREFIX, ""), [])), [u, i]), g = useCallback(
     (m, f) => {
-      if (m = isEmpty(p) ? m : m.replace(`${p}`, "$index"), f === "array" || f === "object") {
+      if (m = isEmpty(u) ? m : m.replace(`${u}`, "$index"), f === "array" || f === "object") {
         n(`{{${m}}}`, {}, r);
         return;
       }
       const h = (C) => /[.,!?;:]/.test(C), x = (C, k, S) => {
         let A = "", B = "";
-        const E = k > 0 ? C[k - 1] : "", w = k < C.length ? C[k] : "";
-        return k > 0 && (E === "." || !h(E) && E !== " ") && (A = " "), k < C.length && !h(w) && w !== " " && (B = " "), {
+        const _ = k > 0 ? C[k - 1] : "", w = k < C.length ? C[k] : "";
+        return k > 0 && (_ === "." || !h(_) && _ !== " ") && (A = " "), k < C.length && !h(w) && w !== " " && (B = " "), {
           text: A + S + B,
           prefixLength: A.length,
           suffixLength: B.length
@@ -6182,11 +6213,11 @@ const DataBindingSelector = ({
           if (S !== A)
             C.chain().deleteSelection().insertContent(k).run();
           else {
-            const { state: E } = C, w = E.selection.from, j = E.doc.textBetween(Math.max(0, w - 1), w), v = E.doc.textBetween(w, Math.min(w + 1, E.doc.content.size));
-            let _ = "";
-            w > 0 && j !== " " && !h(j) && (_ = " ");
+            const { state: _ } = C, w = _.selection.from, j = _.doc.textBetween(Math.max(0, w - 1), w), v = _.doc.textBetween(w, Math.min(w + 1, _.doc.content.size));
+            let E = "";
+            w > 0 && j !== " " && !h(j) && (E = " ");
             let N = "";
-            v && v !== " " && !h(v) && (N = " "), C.chain().insertContent(_ + k + N).run();
+            v && v !== " " && !h(v) && (N = " "), C.chain().insertContent(E + k + N).run();
           }
           setTimeout(() => n(C.getHTML(), {}, r), 100);
           return;
@@ -6194,21 +6225,21 @@ const DataBindingSelector = ({
       } else {
         const C = b, k = C.selectionStart || 0, S = C.value || "", A = C.selectionEnd || k;
         if (A > k) {
-          const v = `{{${m}}}`, { text: _ } = x(S, k, v), N = S.slice(0, k) + _ + S.slice(A);
+          const v = `{{${m}}}`, { text: E } = x(S, k, v), N = S.slice(0, k) + E + S.slice(A);
           n(N, {}, r);
           return;
         }
-        const E = `{{${m}}}`, { text: w } = x(S, k, E), j = S.slice(0, k) + w + S.slice(k);
+        const _ = `{{${m}}}`, { text: w } = x(S, k, _), j = S.slice(0, k) + w + S.slice(k);
         n(j, {}, r);
       }
     },
-    [r, n, a, d == null ? void 0 : d._id, p]
+    [r, n, a, d == null ? void 0 : d._id, u]
   );
   return l ? /* @__PURE__ */ jsx(
     NestedPathSelector,
     {
       data: {
-        ...u && { [p]: u },
+        ...p && { [u]: p },
         ...i
       },
       onSelect: g,
@@ -6221,12 +6252,12 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var j;
-  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, _) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (j = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : j.name;
+  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, E) => []), [l, c] = useState(!1), [d, u] = useState(!1), [p, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (j = n == null ? void 0 : n.find((v) => v.key === p)) == null ? void 0 : j.name;
   useEffect(() => {
-    if (f(""), x([]), y(-1), p(!1), !o || l || !startsWith(o, "pageType:")) return;
-    const v = split(o, ":"), _ = get(v, 1, "page") || "page";
-    g(_), (async () => {
-      const N = await i(_, [get(v, 2, "page")]);
+    if (f(""), x([]), y(-1), u(!1), !o || l || !startsWith(o, "pageType:")) return;
+    const v = split(o, ":"), E = get(v, 1, "page") || "page";
+    g(E), (async () => {
+      const N = await i(E, [get(v, 2, "page")]);
       N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
@@ -6235,30 +6266,30 @@ const DataBindingSelector = ({
       if (isEmpty(v))
         x([]);
       else {
-        const _ = await i(u, v);
-        x(_);
+        const E = await i(p, v);
+        x(E);
       }
       c(!1), y(-1);
     },
-    [u],
+    [p],
     300
   ), A = (v) => {
-    const _ = ["pageType", u, v.id];
-    _[1] && (r(_.join(":")), f(v.name), p(!1), x([]), y(-1));
+    const E = ["pageType", p, v.id];
+    E[1] && (r(E.join(":")), f(v.name), u(!1), x([]), y(-1));
   }, B = (v) => {
     switch (v.key) {
       case "ArrowDown":
-        v.preventDefault(), y((_) => _ < h.length - 1 ? _ + 1 : _);
+        v.preventDefault(), y((E) => E < h.length - 1 ? E + 1 : E);
         break;
       case "ArrowUp":
-        v.preventDefault(), y((_) => _ > 0 ? _ - 1 : _);
+        v.preventDefault(), y((E) => E > 0 ? E - 1 : E);
         break;
       case "Enter":
         if (v.preventDefault(), h.length === 0) return;
         b >= 0 && A(h[b]);
         break;
       case "Escape":
-        v.preventDefault(), E();
+        v.preventDefault(), _();
         break;
     }
   };
@@ -6268,14 +6299,14 @@ const DataBindingSelector = ({
       v == null || v.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const E = () => {
-    f(""), x([]), y(-1), p(!1), r("");
+  const _ = () => {
+    f(""), x([]), y(-1), u(!1), r("");
   }, w = (v) => {
-    f(v), p(!isEmpty(v)), c(!0), S(v);
+    f(v), u(!isEmpty(v)), c(!0), S(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
-    u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: p, onChange: (v) => g(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
+    p && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -6287,7 +6318,7 @@ const DataBindingSelector = ({
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: E, 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: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
     (l || !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: l ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -6297,11 +6328,11 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (v, _) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (v, E) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => A(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : _ === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : E === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           v.name,
           " ",
@@ -6316,10 +6347,10 @@ const DataBindingSelector = ({
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
-  const { t: i } = useTranslation(), { type: l = "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 = l === "pageType" && isEmpty(p) ? "url" : l;
+  const { t: i } = useTranslation(), { type: l = "pageType", href: c = "", target: d = "self" } = n ?? {}, u = useBuilderProp("pageTypes", []), { selectedLang: p, fallbackLang: g, languages: m } = useLanguages(), f = useMemo(
+    () => isEmpty(m) ? "" : isEmpty(p) ? g : p,
+    [m, p, g]
+  ), h = useMemo(() => get(LANGUAGES, f, f), [f]), x = l === "pageType" && isEmpty(u) ? "url" : l;
   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: [
@@ -6341,7 +6372,7 @@ const DataBindingSelector = ({
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
       /* @__PURE__ */ jsx("select", { name: "type", value: l, onChange: (b) => r({ ...n, type: b.target.value }), children: map(
         [
-          ...isEmpty(p) ? [] : [{ const: "pageType", title: i("Goto Page") }],
+          ...isEmpty(u) ? [] : [{ const: "pageType", title: i("Goto Page") }],
           { const: "url", title: i("Open URL") },
           { const: "email", title: i("Compose Email") },
           { const: "telephone", title: i("Call Phone") },
@@ -6349,11 +6380,11 @@ const DataBindingSelector = ({
         ],
         (b) => /* @__PURE__ */ jsx("option", { value: b.const, children: b.title }, b.const)
       ) }),
-      x === "pageType" && !isEmpty(p) ? /* @__PURE__ */ jsx(
+      x === "pageType" && !isEmpty(u) ? /* @__PURE__ */ jsx(
         PageTypeField,
         {
           href: c,
-          pageTypes: p,
+          pageTypes: u,
           onChange: (b) => r({ ...n, href: b })
         }
       ) : null,
@@ -6406,8 +6437,8 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-2S4dpCHF.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
-  const c = useRef(null), [d, p] = useState(!1), u = useRTEditor({
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-MLnVHEnQ.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
+  const c = useRef(null), [d, u] = useState(!1), p = useRTEditor({
     blockId: o,
     value: a,
     placeholder: r,
@@ -6421,16 +6452,16 @@ const DataBindingSelector = ({
     }
   });
   useEffect(() => {
-    c.current && u && (c.current.__chaiRTE = u);
-  }, [o, u]);
+    c.current && p && (c.current.__chaiRTE = p);
+  }, [o, p]);
   const g = () => {
-    p(!1);
+    u(!1);
   }, 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(RteMenubar, { editor: p, onExpand: () => u(!0) }),
     /* @__PURE__ */ jsx(
       EditorContent,
       {
-        editor: u,
+        editor: p,
         id: n,
         placeholder: r,
         className: `overflow-auto ${d ? "max-h-[500px] min-h-[400px]" : "max-h-[200px] min-h-[100px]"}`
@@ -6439,7 +6470,7 @@ 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: m }) }),
+    d && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(RTEModal, { isOpen: d, onClose: g, editor: p, rteElement: m }) }),
     d ? /* @__PURE__ */ jsx("div", { children: "Open in modal" }) : /* @__PURE__ */ jsx("div", { className: "relative", children: m })
   ] });
 }, RichTextEditorField = (o) => {
@@ -6450,32 +6481,32 @@ const DataBindingSelector = ({
 }, SliderField = ({ formData: o, onChange: n }) => {
   const [r] = useBlocksStore(), a = useSelectedBlock(), i = useWrapperBlock(), { addCoreBlock: l } = useAddBlock(), [, c] = useSelectedBlockIds();
   if (!a && !i) return null;
-  const d = (a == null ? void 0 : a._type) === "Slider" ? a : i, p = find(r, { _parent: d == null ? void 0 : d._id, _type: "Slides" });
-  if (!p) return null;
-  const u = filter(r, { _parent: p == null ? void 0 : p._id, _type: "Slide" }), g = (o == null ? void 0 : o.currentSlide) || get(u, "0._id");
+  const d = (a == null ? void 0 : a._type) === "Slider" ? a : i, u = find(r, { _parent: d == null ? void 0 : d._id, _type: "Slides" });
+  if (!u) return null;
+  const p = filter(r, { _parent: u == null ? void 0 : u._id, _type: "Slide" }), g = (o == null ? void 0 : o.currentSlide) || get(p, "0._id");
   useEffect(() => {
     (a == null ? void 0 : a._type) === "Slide" && (o == null ? void 0 : o.currentSlide) !== (a == null ? void 0 : a._id) && n({ ...o, currentSlide: a == null ? void 0 : a._id });
   }, [a]), useEffect(() => {
-    u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
-  }, [o, u]);
+    p != null && p.length && !find(p, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(p, "0._id") });
+  }, [o, p]);
   const m = () => {
-    const x = findIndex(u, { _id: g });
+    const x = findIndex(p, { _id: g });
     if (x > -1) {
-      const b = (x + 1) % u.length, y = get(u, [b, "_id"]);
+      const b = (x + 1) % p.length, y = get(p, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, f = () => {
-    const x = findIndex(u, { _id: g });
+    const x = findIndex(p, { _id: g });
     if (x > -1) {
-      const b = (x - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
+      const b = (x - 1 + p.length) % p.length, y = get(p, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, h = () => {
     const x = l(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
-      p == null ? void 0 : p._id
+      u == null ? void 0 : u._id
     ), b = x == null ? void 0 : x._id;
     b && (n({ ...o, currentSlide: b }), c([b]));
   };
@@ -6485,10 +6516,10 @@ const DataBindingSelector = ({
       /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
           " ",
-          findIndex(u, { _id: g }) + 1
+          findIndex(p, { _id: g }) + 1
         ] }),
         "/",
-        u.length
+        p.length
       ] }) : "-" }),
       /* @__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(
@@ -6566,14 +6597,14 @@ const DataBindingSelector = ({
   ] });
 }, SourcesField = ({ formData: o, onChange: n }) => {
   const r = get(o, "srcsets", []) || [], a = (c, d) => {
-    const p = c.target.name, u = c.target.value;
+    const u = c.target.name, p = c.target.value;
     n({
-      srcsets: map(r, (g, m) => m === d ? { ...g, [p]: u } : g)
+      srcsets: map(r, (g, m) => m === d ? { ...g, [u]: p } : g)
     });
   }, i = () => {
     n({ srcsets: [...r, {}] });
   }, l = (c) => {
-    n({ srcsets: reject(r, (d, p) => p === c) });
+    n({ srcsets: reject(r, (d, u) => u === c) });
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
@@ -6607,7 +6638,7 @@ const DataBindingSelector = ({
             placeholder: "Enter width (in px)",
             type: "number",
             value: get(c, "width"),
-            onChange: (p) => a(p, d),
+            onChange: (u) => a(u, d),
             className: "!placeholder:text-gray-100 !mt-0 !rounded-none !border-0 !p-0 !text-xs"
           }
         )
@@ -6621,7 +6652,7 @@ const DataBindingSelector = ({
             placeholder: "Enter url",
             className: "!mt-0 !rounded-none !border-0 !p-0 !text-xs !shadow-none",
             value: get(c, "url", ""),
-            onChange: (p) => a(p, d)
+            onChange: (u) => a(u, d)
           }
         )
       ] })
@@ -6631,8 +6662,8 @@ const DataBindingSelector = ({
   const { t: r } = useTranslation(), [, a] = useCodeEditor(), i = useSelectedBlock();
   if (typeof window > "u") return null;
   const l = o.replace("root.", ""), c = get(i, l, ""), d = () => {
-    const p = i == null ? void 0 : i._id;
-    a({ blockId: p, blockProp: l, placeholder: n, initialCode: get(i, l, c) });
+    const u = i == null ? void 0 : i._id;
+    a({ blockId: u, blockProp: l, placeholder: n, initialCode: get(i, l, c) });
   };
   return /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
     /* @__PURE__ */ jsx(
@@ -6646,31 +6677,31 @@ const DataBindingSelector = ({
     /* @__PURE__ */ jsx(Button, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: r("Open code editor") })
   ] });
 }, CollectionFilterSortField = ({ id: o, value: n, onChange: r, onBlur: a }) => {
-  const i = useBuilderProp("collections", []), l = useSelectedBlock(), c = get(l, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1").replace(COLLECTION_PREFIX, ""), d = find(i, { id: c }), u = get(d, o === "root.filter" ? "filters" : "sorts", []);
+  const i = useBuilderProp("collections", []), l = useSelectedBlock(), c = get(l, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1").replace(COLLECTION_PREFIX, ""), d = find(i, { id: c }), p = get(d, o === "root.filter" ? "filters" : "sorts", []);
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("select", { value: n, onChange: (g) => r(g.target.value), onBlur: (g) => a(o, g.target.value), children: [
     /* @__PURE__ */ jsx("option", { value: "", children: "Select" }),
-    u.map((g) => /* @__PURE__ */ jsx("option", { value: g.id, children: g.name }, g.id))
+    p.map((g) => /* @__PURE__ */ jsx("option", { value: g.id, children: g.name }, g.id))
   ] }) });
 }, JSONFormFieldTemplate = (o) => {
-  const { id: n, classNames: r, label: a, children: i, errors: l, help: c, hidden: d, required: p, schema: u, formData: g, onChange: m } = o, { selectedLang: f, fallbackLang: h, languages: x } = useLanguages(), b = useMemo(
+  const { id: n, classNames: r, label: a, children: i, errors: l, help: c, hidden: d, required: u, schema: p, 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]), C = usePageExternalData(), k = useSelectedBlock(), S = useRegisteredChaiBlocks(), A = useMemo(
     () => get(S, [k == null ? void 0 : k._type, "i18nProps"], []),
     [S, k == null ? void 0 : k._type]
-  ), [B, E] = useState(null);
+  ), [B, _] = useState(null);
   if (d)
     return null;
-  if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: i });
+  if (p.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: i });
   const j = A == null ? void 0 : A.includes(n.replace("root.", ""));
-  if (u.type === "array") {
+  if (p.type === "array") {
     const N = B === 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(
+      p.title && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1", children: /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: n,
-          onClick: () => E(N ? null : n),
+          onClick: () => _(N ? null : n),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             N ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
@@ -6678,7 +6709,7 @@ const DataBindingSelector = ({
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: a }),
             " ",
             /* @__PURE__ */ jsx(Badge, { className: "m-0 bg-gray-200 px-2 leading-tight text-gray-500 hover:bg-gray-200 hover:text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-slate-600", children: g == null ? void 0 : g.length }) }),
-            u.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            p.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                 InfoCircledIcon,
                 {
@@ -6687,7 +6718,7 @@ const DataBindingSelector = ({
                   onMouseDown: (I) => I.stopPropagation()
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
+              /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: p.description })
             ] }) })
           ]
         }
@@ -6699,26 +6730,26 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const v = n.replace("root.", ""), _ = A.includes(v) && !isEmpty(f) && isEmpty(g);
+  const v = n.replace("root.", ""), E = A.includes(v) && !isEmpty(f) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
-    u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    p.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("label", { htmlFor: n, className: u.type === "object" ? "pb-2" : "", children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: n, className: p.type === "object" ? "pb-2" : "", children: [
           a,
           " ",
           j && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
-          p && u.type !== "object" ? " *" : null
+          u && p.type !== "object" ? " *" : null
         ] }),
-        u.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        p.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(InfoCircledIcon, { className: "h-3 w-3 text-muted-foreground/70" }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
+          /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: p.description })
         ] }) })
       ] }),
-      !u.enum && !u.oneOf && C && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
-        _ ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      !p.enum && !p.oneOf && C && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
+        E ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -6748,7 +6779,7 @@ const DataBindingSelector = ({
         /* @__PURE__ */ jsx(
           DataBindingSelector,
           {
-            schema: u,
+            schema: p,
             onChange: (N) => {
               m(N, g, n);
             },
@@ -6799,7 +6830,7 @@ const DataBindingSelector = ({
   " ",
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: n, uiSchema: r, formData: a, onChange: i }) => {
-  const { selectedLang: l } = useLanguages(), c = useBlockSettingComponents("widget"), d = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), u = useThrottledCallback(
+  const { selectedLang: l } = useLanguages(), c = useBlockSettingComponents("widget"), d = useBlockSettingComponents("field"), u = useBlockSettingComponents("template"), p = useThrottledCallback(
     async ({ formData: g }, m) => {
       get(g, m) === void 0 && set(g, m, ""), i({ formData: g }, m);
     },
@@ -6831,7 +6862,7 @@ const DataBindingSelector = ({
         ButtonTemplates: {
           AddButton: CustomAddButton
         },
-        ...p
+        ...u
       },
       idSeparator: ".",
       autoComplete: "off",
@@ -6845,7 +6876,7 @@ const DataBindingSelector = ({
       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);
+        p({ formData: g }, f);
       }
     },
     l
@@ -6857,46 +6888,46 @@ const DataBindingSelector = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), i = getRegisteredChaiBlock(n == null ? void 0 : n._type), l = formDataWithSelectedLang(n, o, i), [c, d] = useState(l), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: B }, E, w) => {
-    E && (c == null ? void 0 : c._id) === n._id && a([n._id], { [E]: get(B, E) }, w);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), i = getRegisteredChaiBlock(n == null ? void 0 : n._type), l = formDataWithSelectedLang(n, o, i), [c, d] = useState(l), [u, p] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: B }, _, w) => {
+    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(B, _) }, w);
   }, x = useCallback(
-    debounce(({ formData: B }, E, w) => {
-      h({ formData: B }, E, w), d(B);
+    debounce(({ formData: B }, _, w) => {
+      h({ formData: B }, _, w), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: B }, E) => {
-    E && (r([n._id], { [E]: get(B, E) }), x({ formData: B }, E, { [E]: get(c, E) }));
-  }, y = ({ formData: B }, E) => {
-    E && (r([g._id], { [E]: get(B, E) }), x({ formData: B }, E, { [E]: get(c, E) }));
+  ), b = ({ formData: B }, _) => {
+    _ && (r([n._id], { [_]: get(B, _) }), x({ formData: B }, _, { [_]: get(c, _) }));
+  }, y = ({ formData: B }, _) => {
+    _ && (r([g._id], { [_]: get(B, _) }), x({ formData: B }, _, { [_]: get(c, _) }));
   }, { schema: C, uiSchema: k } = useMemo(() => {
     const B = n == null ? void 0 : n._type;
     if (!B)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: E, uiSchema: w } = getBlockFormSchemas(B);
+      const { schema: _, uiSchema: w } = getBlockFormSchemas(B);
       if (B === "Repeater") {
         const j = get(n, "repeaterItems", "");
         startsWith(j, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: E, uiSchema: w };
+      return { schema: _, uiSchema: w };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
   }, [n]), { wrapperSchema: S, wrapperUiSchema: A } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const B = g == null ? void 0 : g._type, { schema: E = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
-    return { wrapperSchema: E, wrapperUiSchema: w };
+    const B = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
+    return { wrapperSchema: _, wrapperUiSchema: w };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((B) => !B),
+          onClick: () => p((B) => !B),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
-            p ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-slate-400" }),
+            u ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-slate-400" }),
             startCase(g._type),
             " settings",
             " ",
@@ -6908,7 +6939,7 @@ function BlockSettings() {
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: p ? "h-auto" : "invisible h-0", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: u ? "h-auto" : "invisible h-0", children: /* @__PURE__ */ jsx(
         JSONForm,
         {
           blockId: g == null ? void 0 : g._id,
@@ -6937,8 +6968,8 @@ const BlockStylingProps = () => {
   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, (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: [
+  ), { reset: d } = useResetBlockStyles(), u = !isEmpty(c) && c.length > 1, p = get(o, (h = n[0]) == null ? void 0 : h.prop, ""), { classes: g = "" } = getSplitChaiClasses(p) || {}, m = g ? g.split(" ").filter((x) => !isEmpty(x)) : [], f = (x) => find(n, (b) => b.prop === x);
+  return /* @__PURE__ */ jsx(Fragment, { children: u && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
       l("Style element"),
       ":"
@@ -7106,18 +7137,18 @@ const BlockStylingProps = () => {
     "button",
     {
       type: "button",
-      onMouseDown: (p) => {
-        const u = {
+      onMouseDown: (u) => {
+        const p = {
           onDrag: r,
           onDragEnd: a,
           dragging: !0,
-          dragStartY: p.pageY,
+          dragStartY: u.pageY,
           dragStartValue: `${n}`,
           dragUnit: o,
           negative: l,
           cssProperty: c
         };
-        i(u), d(u);
+        i(p), d(p);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
@@ -7137,37 +7168,37 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, i] = useState(""), { currentClass: l, 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(""), [C, k] = useState(!1), [S, A] = useState(!1);
+  const [n, r] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: g } = o, [m, f] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [h, x] = useState(!1), [b, y] = useState(""), [C, k] = useState(!1), [S, A] = useState(!1);
   useEffect(() => {
-    const { value: v, unit: _ } = getClassValueAndUnit(l);
-    if (_ === "") {
-      i(v), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: v, unit: E } = getClassValueAndUnit(l);
+    if (E === "") {
+      i(v), f(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
       return;
     }
-    f(_), i(_ === "class" || isEmpty(v) ? "" : v);
-  }, [l, p, u]);
-  const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), E = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
+    f(E), i(E === "class" || isEmpty(v) ? "" : v);
+  }, [l, u, p]);
+  const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), _ = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
     (v = !1) => {
-      const _ = getUserInputValues(`${a}`, u);
-      if (get(_, "error", !1)) {
+      const E = getUserInputValues(`${a}`, p);
+      if (get(E, "error", !1)) {
         x(!0);
         return;
       }
-      const N = get(_, "unit") !== "" ? get(_, "unit") : m;
+      const N = get(E, "unit") !== "" ? get(E, "unit") : m;
       if (N === "auto" || N === "none") {
         B(`${d}${N}`);
         return;
       }
-      if (get(_, "value") === "")
+      if (get(E, "value") === "")
         return;
-      const P = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      v ? E(P) : B(P);
+      const P = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      v ? _(P) : B(P);
     },
-    [B, E, a, m, d, u]
+    [B, _, a, m, d, p]
   ), j = useCallback(
     (v) => {
-      const _ = getUserInputValues(`${a}`, u);
-      if (get(_, "error", !1)) {
+      const E = getUserInputValues(`${a}`, p);
+      if (get(E, "error", !1)) {
         x(!0);
         return;
       }
@@ -7175,12 +7206,12 @@ const BlockStylingProps = () => {
         B(`${d}${v}`);
         return;
       }
-      if (get(_, "value") === "")
+      if (get(E, "value") === "")
         return;
-      const N = get(_, "unit") !== "" ? get(_, "unit") : v, P = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      const N = get(E, "unit") !== "" ? get(E, "unit") : v, P = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       B(P);
     },
-    [B, a, d, u]
+    [B, a, d, p]
   );
   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(
@@ -7208,11 +7239,11 @@ const BlockStylingProps = () => {
             if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
             v.preventDefault(), A(!0);
-            const _ = parseInt$1(v.target.value);
-            let N = isNaN$1(_) ? 0 : _;
+            const E = parseInt$1(v.target.value);
+            let N = isNaN$1(E) ? 0 : E;
             v.keyCode === 38 && (N += 1), v.keyCode === 40 && (N -= 1);
             const I = `${N}`, D = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            E(D);
+            _(D);
           },
           onKeyUp: (v) => {
             S && (v.preventDefault(), A(!1));
@@ -7222,8 +7253,8 @@ const BlockStylingProps = () => {
             x(!1), i(v.target.value);
           },
           onClick: (v) => {
-            var _;
-            (_ = v == null ? void 0 : v.target) == null || _.select(), r(!1);
+            var E;
+            (E = v == null ? void 0 : v.target) == null || E.select(), r(!1);
           },
           value: C ? 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(
@@ -7240,15 +7271,15 @@ 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: m }),
-              u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
+              /* @__PURE__ */ jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
+              p.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
             ]
           }
         ) }),
         /* @__PURE__ */ jsx(TooltipContent, { className: "bg-background", children: /* @__PURE__ */ jsx(
           UnitSelection,
           {
-            units: u,
+            units: p,
             current: m,
             onSelect: (v) => {
               r(!1), f(v), j(v);
@@ -7264,20 +7295,20 @@ const BlockStylingProps = () => {
         onDragEnd: (v) => {
           if (y(() => ""), k(!1), isEmpty(v))
             return;
-          const _ = `${v}`, I = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${m === "-" ? "" : m}]`;
+          const E = `${v}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
           B(I);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
           y(v);
-          const _ = `${v}`, I = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${m === "-" ? "" : m}]`;
-          E(I);
+          const E = `${v}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
+          _(I);
         },
         currentValue: a,
         unit: m,
         negative: g,
-        cssProperty: p
+        cssProperty: u
       }
     )
   ] }) }) });
@@ -7285,8 +7316,8 @@ const BlockStylingProps = () => {
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ jsx(StyleContext.Provider, { value: { canReset: n, canChange: r }, children: o })
 ), DropDownChoices = ({ label: o, property: n, onChange: r }) => {
-  const { getClasses: a } = useTailwindClassList(), i = a(n), l = useCurrentClassByProperty(n), c = useMemo(() => get(l, "cls", ""), [l]), { canChange: d } = useContext(StyleContext), p = /\[.*\]/g.test(c);
-  return /* @__PURE__ */ jsx("div", { className: o ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+  const { getClasses: a } = useTailwindClassList(), i = a(n), l = useCurrentClassByProperty(n), c = useMemo(() => get(l, "cls", ""), [l]), { canChange: d } = useContext(StyleContext), u = /\[.*\]/g.test(c);
+  return /* @__PURE__ */ jsx("div", { className: o ? "w-full rounded" : "grow", children: u ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: c }),
     /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
       /* @__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, {}) }) }),
@@ -7296,7 +7327,7 @@ const BlockStylingProps = () => {
     DropDown,
     {
       rounded: o,
-      onChange: (u) => r(u, n),
+      onChange: (p) => r(p, n),
       selected: c,
       options: i,
       disabled: !d
@@ -7310,14 +7341,14 @@ function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disab
     {
       disabled: !a.length || i,
       className: `${r ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (p) => n(p.target.value),
-      onKeyDown: (p) => {
-        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
+      onChange: (u) => n(u.target.value),
+      onKeyDown: (u) => {
+        u.ctrlKey && (u.key === "z" && c(), u.key === "y" && d());
       },
       value: l,
       children: [
         /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: "" }),
-        a.map((p, u) => /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: p, children: p }, `option-${u}`))
+        a.map((u, p) => /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: u, children: u }, `option-${p}`))
       ]
     }
   );
@@ -7335,12 +7366,12 @@ const COLOR_PROP = {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: i } = useContext(StyleContext), [l, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), f = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: i } = useContext(StyleContext), [l, c] = useState([]), [d, u] = useState({ color: "", shade: "" }), p = a.split("-"), g = get(p, "1", ""), m = get(p, "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" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), u({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), u((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
     },
-    [c, p]
+    [c, u]
   );
   useEffect(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(g))
@@ -7350,12 +7381,12 @@ const COLOR_PROP = {
   const h = useCallback(
     // eslint-disable-next-line no-shadow
     (b) => {
-      p({ color: g, shade: b });
+      u({ color: g, shade: b });
     },
     [g]
   );
   useEffect(() => {
-    p({ color: "", shade: "" });
+    u({ color: "", shade: "" });
   }, [r]);
   const { match: x } = useTailwindClassList();
   return useEffect(() => {
@@ -7613,19 +7644,19 @@ const COLOR_PROP = {
     /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(d)) })
   ] })) });
 }, RangeChoices = ({ property: o, onChange: n }) => {
-  const { canReset: r, canChange: a } = useContext(StyleContext), i = useCurrentClassByProperty(o), l = useMemo(() => get(i, "cls", ""), [i]), { getClasses: c } = useTailwindClassList(), d = c(o, [""]), p = d.indexOf(l) > -1 ? d.indexOf(l) : 0, u = /\[.*\]/g.test(l);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: u ? /* @__PURE__ */ jsx("div", { className: "px-2 py-[5px]", children: l }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  const { canReset: r, canChange: a } = useContext(StyleContext), i = useCurrentClassByProperty(o), l = useMemo(() => get(i, "cls", ""), [i]), { getClasses: c } = useTailwindClassList(), d = c(o, [""]), u = d.indexOf(l) > -1 ? d.indexOf(l) : 0, p = /\[.*\]/g.test(l);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: p ? /* @__PURE__ */ jsx("div", { className: "px-2 py-[5px]", children: l }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         className: "hover:bg-bg-gray-700 box-border w-2/12 rounded-bl rounded-tl bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!r || p - 1 < 0),
-        onClick: () => n(nth(d, p - 1), o),
+        disabled: !a && (!r || u - 1 < 0),
+        onClick: () => n(nth(d, u - 1), o),
         children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
           MinusIcon,
           {
-            className: !a && (!r || p - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !a && (!r || u - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
@@ -7636,12 +7667,12 @@ const COLOR_PROP = {
       {
         type: "button",
         className: "hover:bg-bg-gray-700 w-2/12 rounded-br rounded-tr bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!r || p + 1 >= d.length),
-        onClick: () => n(nth(d, p + 1), o),
+        disabled: !a && (!r || u + 1 >= d.length),
+        onClick: () => n(nth(d, u + 1), o),
         children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
           PlusIcon,
           {
-            className: !a && (!r || p + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !a && (!r || u + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
@@ -7735,14 +7766,14 @@ 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: i, onEmitChange: l = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(i), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
-    (E, w = !0) => {
-      const j = { dark: p, mq: g, mod: u, cls: E, property: i, fullCls: "" };
-      (p || u !== "") && (j.mq = "xs");
+  }, units: c, negative: d = !1 } = o, [u] = useDarkMode(), [p] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(i), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+    (_, w = !0) => {
+      const j = { dark: u, mq: g, mod: p, cls: _, property: i, fullCls: "" };
+      (u || p !== "") && (j.mq = "xs");
       const v = generateFullClsName(j);
       f(x, [v], w);
     },
-    [x, p, g, u, i, f]
+    [x, u, g, p, i, f]
   ), C = useCallback(() => {
     h(x, [b], !0);
   }, [x, b, h]), k = useMemo(() => canChangeClass(m, g), [m, g]);
@@ -7750,7 +7781,7 @@ const COLOR_PROP = {
     l(k, m);
   }, [k, l, m]);
   const [, , S] = useScreenSizeWidth(), A = useCallback(
-    (E) => {
+    (_) => {
       S({
         xs: 400,
         sm: 640,
@@ -7758,10 +7789,10 @@ const COLOR_PROP = {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[E]);
+      }[_]);
     },
     [S]
-  ), B = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  ), B = get(m, "dark", null) === u && get(m, "mod", null) === p && get(m, "mq", null) === g;
   return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: k, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !B ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
@@ -7795,7 +7826,7 @@ const COLOR_PROP = {
           "Current style is set at  ",
           /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
             getBreakpoint(get(m, "mq")),
-            p && !m.dark ? "(Light mode)" : ""
+            u && !m.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsxs(
@@ -7823,7 +7854,7 @@ const COLOR_PROP = {
   units: l = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((f) => map(g, "property").includes(f), [g]);
+  const { t: d } = useTranslation(), [u, p] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((f) => map(g, "property").includes(f), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7836,8 +7867,8 @@ const COLOR_PROP = {
               "button",
               {
                 type: "button",
-                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"}`,
+                onClick: () => p(h),
+                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${h === u ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                 children: [
                   React__default.createElement("div", {
                     className: m(h) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
@@ -7855,7 +7886,7 @@ const COLOR_PROP = {
             type: i,
             units: [...l],
             label: "",
-            property: p,
+            property: u,
             negative: c
           }
         ) })
@@ -7864,10 +7895,10 @@ const COLOR_PROP = {
   );
 }, NestedOptions = ({ heading: o, items: n }) => {
   const { t: r } = useTranslation(), a = useSelectedBlockCurrentClasses(), i = useMemo(() => {
-    const l = (p) => flatten(
-      p.map((u) => u.styleType === "multiple" ? map(u.options, "key") : u.property)
+    const l = (u) => flatten(
+      u.map((p) => p.styleType === "multiple" ? map(p.options, "key") : p.property)
     ), c = flatten(
-      n.map((p) => p.styleType === "accordion" ? l(p.items) : p.styleType === "multiple" ? map(p.options, "key") : p.property)
+      n.map((u) => u.styleType === "accordion" ? l(u.items) : u.styleType === "multiple" ? map(u.options, "key") : u.property)
     ), d = map(a, "property");
     return intersection(c, d).length > 0;
   }, [a, n]);
@@ -7887,15 +7918,15 @@ const COLOR_PROP = {
   const { t: r } = useTranslation(), a = useSelectedBlockCurrentClasses(), i = useCallback(
     (c = []) => {
       const d = {};
-      for (let u = 0; u < a.length; u++)
-        d[a[u].property] = a[u].cls;
-      let p = !0;
-      for (const u in c)
-        if (!has(d, u) || d[u] !== c[u]) {
-          p = !1;
+      for (let p = 0; p < a.length; p++)
+        d[a[p].property] = a[p].cls;
+      let u = !0;
+      for (const p in c)
+        if (!has(d, p) || d[p] !== c[p]) {
+          u = !1;
           break;
         }
-      return p;
+      return u;
     },
     [a]
   ), l = useMemo(() => ({}), []);
@@ -7966,8 +7997,8 @@ const COLOR_PROP = {
   currentBreakpoint: l,
   breakpoint: c,
   width: d,
-  icon: p,
-  onClick: u,
+  icon: u,
+  onClick: p,
   buttonClass: g = "",
   activeButtonClass: m = ""
 }) => {
@@ -7976,11 +8007,11 @@ const COLOR_PROP = {
     /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
       Button,
       {
-        onClick: () => u(d),
+        onClick: () => p(d),
         size: "sm",
         className: cn$1("h-7 w-7 rounded-md p-1", c === l ? m : g),
         variant: c === l ? "outline" : "ghost",
-        children: p
+        children: u
       }
     ) }),
     /* @__PURE__ */ jsx(HoverCardContent, { className: "w-fit max-w-52 border-border", children: /* @__PURE__ */ jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -7990,11 +8021,11 @@ const COLOR_PROP = {
   ] }) : /* @__PURE__ */ jsx(
     Button,
     {
-      onClick: () => u(d),
+      onClick: () => p(d),
       size: "sm",
       className: "h-7 w-7 rounded-md p-1",
       variant: c === l ? "outline" : "ghost",
-      children: p
+      children: u
     }
   );
 }, Breakpoints$1 = ({
@@ -8004,10 +8035,10 @@ const COLOR_PROP = {
   buttonClass: a = "",
   activeButtonClass: i = ""
 }) => {
-  const [l, , c] = useScreenSizeWidth(), [d, p] = useCanvasDisplayWidth(), [u, g] = useSelectedBreakpoints(), m = u, f = g, { t: h } = useTranslation(), x = useBuilderProp("breakpoints", WEB_BREAKPOINTS), b = (k) => {
+  const [l, , c] = useScreenSizeWidth(), [d, u] = useCanvasDisplayWidth(), [p, g] = useSelectedBreakpoints(), m = p, f = g, { t: h } = useTranslation(), x = useBuilderProp("breakpoints", WEB_BREAKPOINTS), b = (k) => {
     m.includes(k) ? m.length > 2 && f(m.filter((S) => S !== k)) : f((S) => [...S, k]);
   }, y = (k) => {
-    n || c(k), p(k);
+    n || c(k), u(k);
   }, C = getBreakpointValue(n ? d : l).toLowerCase();
   return x.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(x, (k) => /* @__PURE__ */ createElement(
     BreakpointCard,
@@ -8079,7 +8110,7 @@ function BreakpointSelector() {
 const DesignTokensIcon = ({ className: o = "" }) => /* @__PURE__ */ jsx(FontStyleIcon, { className: o });
 function ManualClasses() {
   var O;
-  const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [p] = useSelectedStylingBlocks(), u = useSelectedBlock(), g = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), [h, x] = useState(""), b = useAtomValue$1(chaiDesignTokensAtom), y = (O = first(p)) == null ? void 0 : O.prop, { classes: C } = getSplitChaiClasses(get(u, y, "")), k = C.split(" ").filter((L) => !isEmpty(L)), S = useMemo(() => [...k].sort((L, T) => {
+  const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [u] = useSelectedStylingBlocks(), p = useSelectedBlock(), g = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), [h, x] = useState(""), b = useAtomValue$1(chaiDesignTokensAtom), y = (O = first(u)) == null ? void 0 : O.prop, { classes: C } = getSplitChaiClasses(get(p, y, "")), k = C.split(" ").filter((L) => !isEmpty(L)), S = useMemo(() => [...k].sort((L, T) => {
     const M = L.startsWith(DESIGN_TOKEN_PREFIX), H = T.startsWith(DESIGN_TOKEN_PREFIX);
     return M && !H ? -1 : !M && H ? 1 : 0;
   }), [k]), A = useBuilderProp("flags.copyPaste", !0), B = (L) => {
@@ -8088,16 +8119,16 @@ function ManualClasses() {
       return T ? T.name : L;
     }
     return L;
-  }, E = (L) => {
+  }, _ = (L) => {
     const T = Object.entries(b).find(([M, H]) => H.name === L);
     return T ? `${T[0]}` : L;
   }, w = () => {
-    const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(E);
+    const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(_);
     g(f, L, !0), x("");
-  }, [j, v] = useState([]), _ = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
+  }, [j, v] = useState([]), E = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
     const T = L.trim().toLowerCase(), M = T.match(/.+:/g);
     let H = [], W = [];
-    if (_ && (T === "" ? W = Object.entries(b).map(([V, U]) => ({
+    if (E && (T === "" ? W = Object.entries(b).map(([V, U]) => ({
       name: U.name,
       id: `${V}`,
       isDesignToken: !0
@@ -8142,7 +8173,7 @@ function ManualClasses() {
     }),
     [h, d, o, j.length]
   ), $ = (L) => {
-    const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(E);
+    const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(_);
     m(f, [L]), g(f, T, !0), r(""), i(-1);
   }, F = () => {
     if (navigator.clipboard === void 0) {
@@ -8154,13 +8185,13 @@ 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 w-full items-center justify-between gap-x-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1", children: [
-        /* @__PURE__ */ jsx("span", { children: d(_ ? "Styles" : "Classes") }),
+        /* @__PURE__ */ jsx("span", { children: d(E ? "Styles" : "Classes") }),
         A && /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: F, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: d("Copy classes to clipboard") }) })
         ] })
       ] }),
-      _ && /* @__PURE__ */ jsx(Button, { variant: "link", className: "underline", onClick: () => l("design-tokens"), children: d("Design Tokens") })
+      E && /* @__PURE__ */ jsx(Button, { variant: "link", className: "underline", onClick: () => l("design-tokens"), children: d("Design Tokens") })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-x-3", children: [
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
@@ -8174,7 +8205,7 @@ function ManualClasses() {
           inputProps: R,
           highlightFirstSuggestion: !0,
           onSuggestionSelected: (L, { suggestionValue: T }) => {
-            const M = E(T);
+            const M = _(T);
             g(f, [M], !0), x("");
           },
           containerProps: {
@@ -8367,8 +8398,8 @@ const MAPPER = {
 };
 function BlockStyling() {
   const { flexChild: o, gridChild: n } = useSelectedBlocksDisplayChild(), [r] = useSelectedStylingBlocks(), [a, i] = React__default.useState(""), [l, c] = React__default.useState({
-    onDrag: (u) => u,
-    onDragEnd: (u) => u,
+    onDrag: (p) => p,
+    onDragEnd: (p) => p,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -8376,21 +8407,21 @@ function BlockStyling() {
     negative: !1,
     cssProperty: ""
   }), d = useThrottledCallback(
-    (u) => {
+    (p) => {
       const g = !get(l, "negative", !1), m = get(l, "cssProperty", "");
       let f = parseFloat(l.dragStartValue);
       f = isNaN(f) ? 0 : f;
       let h = MAPPER[l.dragUnit];
       (startsWith(m, "scale") || m === "opacity") && (h = 10);
-      let b = (l.dragStartY - u.pageY) / h + f;
+      let b = (l.dragStartY - p.pageY) / h + f;
       g && b < 0 && (b = 0), m === "opacity" && b > 1 && (b = 1), l.onDrag(`${b}`), i(`${b}`);
     },
     [l],
     50
-  ), p = useCallback(() => {
+  ), u = useCallback(() => {
     setTimeout(() => l.onDragEnd(`${a}`), 100), c({
-      onDrag: (u) => u,
-      onDragEnd: (u) => u,
+      onDrag: (p) => p,
+      onDragEnd: (p) => p,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -8404,7 +8435,7 @@ function BlockStyling() {
       "div",
       {
         onMouseMove: d,
-        onMouseUp: () => p(),
+        onMouseUp: () => u(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
@@ -8413,7 +8444,7 @@ function BlockStyling() {
       /* @__PURE__ */ jsxs(Accordion, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
         o && /* @__PURE__ */ jsx(StylingGroup, { section: FLEX_CHILD_SECTION, showAccordian: o || n }),
         n && /* @__PURE__ */ jsx(StylingGroup, { section: GRID_CHILD_SECTION, showAccordian: o || n }),
-        SETTINGS_SECTIONS.map((u) => /* @__PURE__ */ jsx(StylingGroup, { section: u, showAccordian: o || n }, u.heading))
+        SETTINGS_SECTIONS.map((p) => /* @__PURE__ */ jsx(StylingGroup, { section: p, showAccordian: o || n }, p.heading))
       ] })
     ] })
   ] });
@@ -8424,10 +8455,10 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const { type: i, icon: l, label: c } = o, { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), u = () => {
+  const { type: i, icon: l, label: c } = o, { addCoreBlock: d, addPredefinedBlock: u } = useAddBlock(), p = () => {
     if (has(o, "blocks")) {
       const x = isFunction(o.blocks) ? o.blocks() : o.blocks;
-      p(syncBlocksWithDefaults(x), r || null, a);
+      u(syncBlocksWithDefaults(x), r || null, a);
     } else
       d(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -8437,7 +8468,7 @@ const CoreBlock = ({
       "button",
       {
         disabled: n,
-        onClick: u,
+        onClick: p,
         type: "button",
         onDragStart: (x) => f(x, { ...o, label: c, icon: l }),
         onDragEnd: h,
@@ -8478,10 +8509,10 @@ const registerChaiPreImportHTMLHook = (o) => {
   position: n,
   fromSidebar: r
 }) => {
-  const { t: a } = useTranslation(), [i, l] = useState(""), { addPredefinedBlock: c } = useAddBlock(), [d, p] = useState(!1), u = async () => {
-    p(!0);
+  const { t: a } = useTranslation(), [i, l] = useState(""), { addPredefinedBlock: c } = useAddBlock(), [d, u] = useState(!1), p = async () => {
+    u(!0);
     const g = await getPreImportHTML(i), m = getBlocksFromHTML(g);
-    c([...m], o, n), l(""), p(!1), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+    c([...m], o, n), l(""), u(!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") }) }),
@@ -8498,7 +8529,7 @@ const registerChaiPreImportHTMLHook = (o) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: i.trim() === "" || d, onClick: () => u(), size: "sm", className: "w-fit", children: d ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: i.trim() === "" || d, onClick: () => p(), size: "sm", className: "w-fit", children: d ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(CircleIcon, { className: "mr-2 h-4 w-4 animate-spin" }),
       " ",
       a("Importing...")
@@ -8512,8 +8543,8 @@ const registerChaiPreImportHTMLHook = (o) => {
   className: i = "",
   height: l = ""
 }) => {
-  const [c, d] = useState(o), p = (u) => {
-    const g = u.target.value;
+  const [c, d] = useState(o), u = (p) => {
+    const g = p.target.value;
     d(g), n(g);
   };
   return /* @__PURE__ */ jsx("div", { className: cn$1("relative inline-block w-full", i), children: /* @__PURE__ */ jsxs(
@@ -8524,10 +8555,10 @@ const registerChaiPreImportHTMLHook = (o) => {
         l
       ),
       value: c,
-      onChange: p,
+      onChange: u,
       children: [
         /* @__PURE__ */ jsx("option", { value: "", disabled: !0, children: a }),
-        r.map((u) => /* @__PURE__ */ jsx("option", { value: u.value, children: u.label }, u.value))
+        r.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: p.label }, p.value))
       ]
     }
   ) });
@@ -8566,9 +8597,9 @@ const registerChaiLibrary = (o, n) => {
   onDragEnd: l,
   draggable: c,
   className: d = "",
-  type: p = "Box"
+  type: u = "Box"
 }) => {
-  const { onDragStart: u, onDragEnd: g } = useDragAndDrop(), m = useIsDragAndDropEnabled(), [, f] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), x = c !== void 0 ? c : m;
+  const { onDragStart: p, onDragEnd: g } = useDragAndDrop(), m = useIsDragAndDropEnabled(), [, f] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), x = c !== void 0 ? c : m;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -8580,14 +8611,14 @@ const registerChaiLibrary = (o, n) => {
             return;
           }
           let k = null;
-          if (p === "Image") {
+          if (u === "Image") {
             if (!(o != null && o.image)) return;
             k = {
               type: "Image",
               blocks: [
                 {
                   _type: "Image",
-                  styles: "#styles:,w-full",
+                  styles: "#styles:,w-full h-full object-cover",
                   image: o == null ? void 0 : o.image,
                   alt: (o == null ? void 0 : o.alt) || "",
                   _name: (o == null ? void 0 : o.name) || "Image"
@@ -8615,7 +8646,7 @@ const registerChaiLibrary = (o, n) => {
             k = typeof S == "object" ? omit(S, ["component", "icon"]) : S;
           }
           if (!k) return;
-          u(C, k, !0), setTimeout(() => {
+          p(C, k, !0), setTimeout(() => {
             f([]), h();
           }, 200);
         } catch (k) {
@@ -8661,7 +8692,7 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [i, l] = 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(
+  const [i, l] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: u } = useAddBlock(), p = 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);
@@ -8669,15 +8700,15 @@ const BlockCard = ({
       }
       l(!0);
       let C = await c({ library: n, block: o });
-      typeof C == "string" && (C = getBlocksFromHTML(C)), isEmpty(C) || p(syncBlocksWithDefaults(C), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK), setTimeout(() => l(!1), 1e3);
+      typeof C == "string" && (C = getBlocksFromHTML(C)), isEmpty(C) || u(syncBlocksWithDefaults(C), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK), setTimeout(() => l(!1), 1e3);
     },
-    [d, p, o, c, n, r, a]
+    [d, u, o, c, n, r, a]
   );
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(ChaiDraggableBlock, { draggable: h, onDragStart: async (y) => {
       if (!h) return;
       let C = await c({ library: n, block: o });
-      typeof C == "string" && (C = getBlocksFromHTML(C)), m(y, { type: "Box", blocks: C, name: u }, !0);
+      typeof C == "string" && (C = getBlocksFromHTML(C)), m(y, { type: "Box", blocks: C, name: p }, !0);
     }, onDragEnd: f, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8692,21 +8723,21 @@ const BlockCard = ({
             /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4 animate-spin text-white" }),
             /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: u }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children: u }),
+          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: p }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children: p }),
             g && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: g })
           ] })
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { className: "font-medium", children: u }) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { className: "font-medium", children: p }) }) })
   ] });
 }, UILibrarySection = ({
   parentId: o,
   position: n,
   fromSidebar: r
 }) => {
-  const [a, i] = useSelectedLibrary(), l = useChaiLibraries(), c = l.find((N) => N.id === a) || first(l), { data: d, isLoading: p, resetLibrary: u } = useLibraryBlocks(c), [g, m] = useState(""), [f, h] = useState([]), x = useRef(null);
+  const [a, i] = useSelectedLibrary(), l = useChaiLibraries(), c = l.find((N) => N.id === a) || first(l), { data: d, isLoading: u, resetLibrary: p } = 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"],
@@ -8732,10 +8763,10 @@ const BlockCard = ({
       return;
     }
   }, [y, C]);
-  const S = get(y, C, []), A = useRef(null), { t: B } = useTranslation(), E = useRef(null);
+  const S = get(y, C, []), A = useRef(null), { t: B } = useTranslation(), _ = useRef(null);
   useEffect(() => {
     var I;
-    const N = (I = E.current) == null ? void 0 : I.querySelector("[data-radix-scroll-area-viewport]");
+    const N = (I = _.current) == null ? void 0 : I.querySelector("[data-radix-scroll-area-viewport]");
     N && N.scrollTo({ top: 0, behavior: "smooth" });
   }, [c, C]);
   const w = (N) => {
@@ -8743,14 +8774,14 @@ const BlockCard = ({
       A.current && k(N);
     }, 400);
   }, j = () => {
-    c != null && c.id && u(c.id);
+    c != null && c.id && p(c.id);
   };
-  if (p)
+  if (u)
     return /* @__PURE__ */ jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const v = filter(S, (N, I) => I % 2 === 0), _ = filter(S, (N, I) => I % 2 === 1);
+  const v = filter(S, (N, I) => I % 2 === 0), E = filter(S, (N, I) => I % 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: 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: [
@@ -8803,7 +8834,7 @@ 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,
         {
-          ref: E,
+          ref: _,
           onMouseEnter: () => A.current ? clearTimeout(A.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
@@ -8818,7 +8849,7 @@ const BlockCard = ({
                 },
                 `block-${I}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: _.map((N, I) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((N, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -8856,11 +8887,11 @@ const BlockCard = ({
   gridCols: r = "grid-cols-2",
   disableBlockGroupsSidebar: a = !1
 }) => {
-  const { data: i, isLoading: l, refetch: c, error: d } = usePartialBlocksList(), [p, u] = useAtom$1(partialBlocksDataAtom), [g, m] = useAtom$1(hasInitializedPartialBlocksAtom);
+  const { data: i, isLoading: l, refetch: c, error: d } = usePartialBlocksList(), [u, p] = useAtom$1(partialBlocksDataAtom), [g, m] = useAtom$1(hasInitializedPartialBlocksAtom);
   useEffect(() => {
-    if (!g || Object.keys(p.blocks).length === 0)
+    if (!g || Object.keys(u.blocks).length === 0)
       if (d)
-        u({
+        p({
           blocks: [],
           groups: [],
           isLoading: !1,
@@ -8883,13 +8914,13 @@ const BlockCard = ({
             _name: C.name
           };
         }), x = uniq(map(h, "group"));
-        u({
+        p({
           blocks: h,
           groups: x,
           isLoading: !1,
           error: null
         }), m(!0);
-      } else l ? u((h) => ({ ...h, isLoading: !0, error: null })) : !l && Object.keys(i || {}).length === 0 && (u({
+      } else l ? p((h) => ({ ...h, isLoading: !0, error: null })) : !l && Object.keys(i || {}).length === 0 && (p({
         blocks: [],
         groups: [],
         isLoading: !1,
@@ -8900,15 +8931,15 @@ const BlockCard = ({
     i,
     g,
     m,
-    u,
-    p.blocks,
+    p,
+    u.blocks,
     d
   ]);
   const f = () => {
-    u((h) => ({ ...h, isLoading: !0, error: null })), m(!1), c();
+    p((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" }),
+  return u.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : u.error || u.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: u.error || "No partial blocks available" }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -8923,8 +8954,8 @@ const BlockCard = ({
       gridCols: r,
       parentId: o,
       position: n,
-      groups: p.groups,
-      blocks: p.blocks,
+      groups: u.groups,
+      blocks: u.blocks,
       disableBlockGroupsSidebar: a
     }
   );
@@ -8939,7 +8970,7 @@ const BlockCard = ({
   disableBlockGroupsSidebar: l
 }) => {
   var N;
-  const { t: c } = useTranslation(), [d] = useBlocksStore(), [p, u] = useState(""), g = useRef(null), [m] = useAtom$1(addBlockTabAtom), f = (N = find(d, (I) => I._id === r)) == null ? void 0 : N._type, [h, x] = useState("all"), [b, y] = useState(null), C = useRef(null), k = useBuilderProp("flags.dragAndDrop", !1);
+  const { t: c } = useTranslation(), [d] = useBlocksStore(), [u, p] = useState(""), g = useRef(null), [m] = useAtom$1(addBlockTabAtom), f = (N = find(d, (I) => I._id === r)) == null ? void 0 : N._type, [h, x] = useState("all"), [b, y] = useState(null), C = useRef(null), k = useBuilderProp("flags.dragAndDrop", !1);
   useEffect(() => {
     const I = setTimeout(() => {
       var P;
@@ -8947,8 +8978,8 @@ const BlockCard = ({
     }, 0);
     return () => clearTimeout(I);
   }, [m]), useEffect(() => {
-    p && (x("all"), y(null));
-  }, [p]), useEffect(() => (C.current = debounce((I) => {
+    u && (x("all"), y(null));
+  }, [u]), useEffect(() => (C.current = debounce((I) => {
     x(I);
   }, 500), () => {
     C.current && C.current.cancel();
@@ -8959,25 +8990,25 @@ const BlockCard = ({
     y(null), C.current && C.current.cancel();
   }, []), B = useCallback((I) => {
     C.current && C.current.cancel(), x(I), y(null);
-  }, []), E = useMemo(
-    () => p ? values(n).filter(
+  }, []), _ = useMemo(
+    () => u ? values(n).filter(
       (I) => {
         var P, D;
-        return (((P = I.label) == null ? void 0 : P.toLowerCase()) + " " + ((D = I.type) == null ? void 0 : D.toLowerCase())).includes(p.toLowerCase());
+        return (((P = I.label) == null ? void 0 : P.toLowerCase()) + " " + ((D = I.type) == null ? void 0 : D.toLowerCase())).includes(u.toLowerCase());
       }
     ) : n,
-    [n, p]
+    [n, u]
   ), w = useMemo(
-    () => p ? o.filter(
-      (I) => reject(filter(values(E), { group: I }), { hidden: !0 }).length > 0
+    () => u ? o.filter(
+      (I) => reject(filter(values(_), { group: I }), { hidden: !0 }).length > 0
     ) : o.filter((I) => reject(filter(values(n), { group: I }), { hidden: !0 }).length > 0),
-    [n, E, o, p]
+    [n, _, o, u]
   ), j = useMemo(
     () => sortBy(w, (I) => CORE_GROUPS.indexOf(I) === -1 ? 99 : CORE_GROUPS.indexOf(I)),
     [w]
-  ), v = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), _ = useMemo(() => h === "all" ? j : [h], [j, h]);
+  ), v = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? j : [h], [j, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full flex-col", children: [
-    /* @__PURE__ */ jsx(SearchInput, { value: p, setValue: u }),
+    /* @__PURE__ */ jsx(SearchInput, { value: u, setValue: p }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden pt-2", children: [
       !l && j.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx(
@@ -9007,12 +9038,12 @@ const BlockCard = ({
         "div",
         {
           className: `h-full flex-1 overflow-hidden ${!l && j.length > 0 ? "w-3/4" : "w-full"}`,
-          children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: w.length === 0 && p ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+          children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: w.length === 0 && u ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
             c("No blocks found matching"),
             ' "',
-            p,
+            u,
             '"'
-          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: _.map((I, P) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: E.map((I, P) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(I.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + i, children: reject(
               h === "all" ? filter(values(v), { group: I }) : values(v),
@@ -9039,13 +9070,13 @@ const BlockCard = ({
   position: a = -1,
   fromSidebar: i = !1
 }) => {
-  const { t: l } = 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();
+  const { t: l } = useTranslation(), [c, d] = useAtom$1(addBlockTabAtom), [, u] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("flags.importHtml", !0), { data: g } = usePartialBlocksList(), m = Object.keys(g || {}).length > 0, { hasPermission: f } = usePermissions();
   useEffect(() => {
     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), C = useChaiLibraries().length > 0;
+  }, []), x = useChaiAddBlockTabs(), b = p && f(PERMISSIONS.IMPORT_HTML), C = useChaiLibraries().length > 0;
   return useEffect(() => {
     c === "library" && !C && d("core");
   }, [c, C, d]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
@@ -9057,7 +9088,7 @@ const BlockCard = ({
       Tabs,
       {
         onValueChange: (k) => {
-          p(""), d(k);
+          u(""), d(k);
         },
         value: c,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -9255,7 +9286,7 @@ const registerChaiSaveToLibrary = (o) => {
     }
   ) : null;
 }, CopyPasteBlocks = ({ isFromBody: o = !1 }) => {
-  const [n] = useBlocksStore(), [r] = useSelectedBlockIds(), { pasteBlocks: a } = usePasteBlocks(), [, i, l] = useCopyBlocks(), { t: c } = useTranslation(), d = useSelectedBlock(), p = useBuilderProp("flags.copyPaste", !0), u = useCallback(() => {
+  const [n] = useBlocksStore(), [r] = useSelectedBlockIds(), { pasteBlocks: a } = usePasteBlocks(), [, i, l] = useCopyBlocks(), { t: c } = useTranslation(), d = useSelectedBlock(), u = useBuilderProp("flags.copyPaste", !0), p = useCallback(() => {
     var f;
     const m = (o ? (f = n == null ? void 0 : n.filter((h) => !(h != null && h._parent))) == null ? void 0 : f.map((h) => h == null ? void 0 : h._id) : r).map((h) => {
       const x = n.find((b) => b._id === h);
@@ -9284,11 +9315,11 @@ const registerChaiSaveToLibrary = (o) => {
     }) : i(m.map((h) => h.id));
   }, [r, n, i, l]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    p && /* @__PURE__ */ jsxs(
+    u && /* @__PURE__ */ jsxs(
       DropdownMenuItem,
       {
         disabled: !canDuplicateBlock(d == null ? void 0 : d._type),
-        onClick: u,
+        onClick: p,
         className: "flex items-center gap-x-4 text-xs",
         children: [
           /* @__PURE__ */ jsx(CopyIcon, {}),
@@ -9297,7 +9328,7 @@ const registerChaiSaveToLibrary = (o) => {
         ]
       }
     ),
-    p && /* @__PURE__ */ jsxs(
+    u && /* @__PURE__ */ jsxs(
       DropdownMenuItem,
       {
         className: "flex items-center gap-x-4 text-xs",
@@ -9351,9 +9382,9 @@ const registerChaiSaveToLibrary = (o) => {
     }
   );
 }, BlockContextMenuContent = ({ node: o }) => {
-  const { t: n } = useTranslation(), [r] = useSelectedBlockIds(), a = useDuplicateBlocks(), i = useSelectedBlock(), { hasPermission: l } = usePermissions(), { librarySite: c } = useBuilderProp("flags", { librarySite: !1 }), d = useIsDragAndDropEnabled(), p = useCallback(() => {
+  const { t: n } = useTranslation(), [r] = useSelectedBlockIds(), a = useDuplicateBlocks(), i = useSelectedBlock(), { hasPermission: l } = usePermissions(), { librarySite: c } = useBuilderProp("flags", { librarySite: !1 }), d = useIsDragAndDropEnabled(), u = useCallback(() => {
     a(r);
-  }, [r, a]), u = useMemo(() => has(i, "_libBlockId") && !isEmpty(i._libBlockId), [i == null ? void 0 : i._libBlockId]);
+  }, [r, a]), p = useMemo(() => has(i, "_libBlockId") && !isEmpty(i._libBlockId), [i == null ? void 0 : i._libBlockId]);
   return o === "BODY" ? /* @__PURE__ */ jsx(DropdownMenuContent, { side: "bottom", className: "border-border text-xs", children: l(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       DropdownMenuItem,
@@ -9408,7 +9439,7 @@ const registerChaiSaveToLibrary = (o) => {
         {
           disabled: !canDuplicateBlock(i == null ? void 0 : i._type),
           className: "flex items-center gap-x-4 text-xs",
-          onClick: p,
+          onClick: u,
           children: [
             /* @__PURE__ */ jsx(CardStackPlusIcon, {}),
             " ",
@@ -9420,7 +9451,7 @@ const registerChaiSaveToLibrary = (o) => {
     /* @__PURE__ */ jsx(RenameBlock, { node: o }),
     l(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(CutBlocks, {}),
     l(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(CopyPasteBlocks, {}),
-    u && c && /* @__PURE__ */ jsx(UnlinkLibraryBlock, {}),
+    p && c && /* @__PURE__ */ jsx(UnlinkLibraryBlock, {}),
     l(PERMISSIONS.CREATE_LIBRARY_BLOCK) && c && /* @__PURE__ */ jsx(SaveToLibrary, {}),
     /* @__PURE__ */ jsx(ExportCode, {}),
     l(PERMISSIONS.DELETE_BLOCK) && /* @__PURE__ */ jsx(RemoveBlocks, {})
@@ -9467,9 +9498,9 @@ const useStructureValidation = () => {
     errorsByBlock: c,
     // Helper functions
     getBlockErrors: (d) => c[d] || [],
-    getErrorsBySeverity: (d) => o.filter((p) => p.severity === d),
+    getErrorsBySeverity: (d) => o.filter((u) => u.severity === d),
     getErrorMessages: () => o.map((d) => d.message),
-    getErrorMessagesBySeverity: (d) => o.filter((p) => p.severity === d).map((p) => p.message),
+    getErrorMessagesBySeverity: (d) => o.filter((u) => u.severity === d).map((u) => u.message),
     // Get all error messages for display
     getAllErrorMessages: () => ({
       errors: o.filter((d) => d.severity === "error").map((d) => d.message),
@@ -9502,17 +9533,17 @@ const useStructureValidation = () => {
   var L;
   const { t: a } = useTranslation(), i = useUpdateBlocksProps(), [l] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let 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: C, handleClick: k } = o, S = useStructureValidation(), A = useMemo(() => S.getBlockErrors(f), [S, f]), B = get(h, "_show", !0), E = (T) => {
+  const u = o.children.length > 0, { highlightBlock: p, clearHighlight: g } = useBlockHighlight(), m = useIsDragAndDropEnabled(), { id: f, data: h, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: C, handleClick: k } = o, S = useStructureValidation(), A = useMemo(() => S.getBlockErrors(f), [S, f]), B = get(h, "_show", !0), _ = (T) => {
     T.stopPropagation(), B && o.toggle();
   }, w = (T) => {
     T.isInternal && (d = T.isOpen, T.isOpen && T.close());
   }, j = (T) => {
     T.isInternal && d !== null && (d ? T.open() : T.close(), d = null);
-  }, [v, _] = useAtom$1(currentAddSelection), N = () => {
+  }, [v, E] = useAtom$1(currentAddSelection), N = () => {
     var T;
-    I(), o.parent.isSelected || _((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+    I(), o.parent.isSelected || E((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
   }, I = () => {
-    _(null);
+    E(null);
   }, P = (T) => {
     I(), T.stopPropagation(), !o.isOpen && B && o.toggle(), k(T);
   };
@@ -9554,7 +9585,7 @@ const useStructureValidation = () => {
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => u(f),
+      onMouseEnter: () => p(f),
       onMouseLeave: () => g(),
       onClick: P,
       style: n,
@@ -9602,7 +9633,7 @@ const useStructureValidation = () => {
                   "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: E, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: _, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -10101,7 +10132,7 @@ const useStructureValidation = () => {
       console.warn("Failed to clear previous theme from localStorage:", o);
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n, r] = useDarkMode(), [a, i] = React.useState(""), [l, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0), f = useIncrementActionsCount();
+  const [n, r] = useDarkMode(), [a, i] = React.useState(""), [l, c] = React.useState(!1), d = useBuilderProp("themePresets", []), u = useBuilderProp("themePanelComponent", null), { hasPermission: p } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0), f = useIncrementActionsCount();
   (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((j) => {
     d.push(j);
   });
@@ -10152,15 +10183,15 @@ const useStructureValidation = () => {
       })), f();
     },
     [h, f]
-  ), E = useDebouncedCallback(
+  ), _ = useDebouncedCallback(
     (j, v) => {
       x(() => {
-        const _ = get(h, `colors.${j}`);
-        return n ? set(_, 1, v) : set(_, 0, v), f(), {
+        const E = get(h, `colors.${j}`);
+        return n ? set(E, 1, v) : set(E, 0, v), f(), {
           ...h,
           colors: {
             ...h.colors,
-            [j]: _
+            [j]: E
           }
         };
       });
@@ -10168,19 +10199,19 @@ const useStructureValidation = () => {
     [h, f],
     200
   ), w = (j) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(j.items).map(([v]) => {
-    const _ = get(h, `colors.${v}.${n ? 1 : 0}`);
-    return _ ? /* @__PURE__ */ jsxs("div", { id: `theme-${v}`, className: "mt-1 flex items-center gap-x-2", children: [
+    const E = get(h, `colors.${v}.${n ? 1 : 0}`);
+    return E ? /* @__PURE__ */ jsxs("div", { id: `theme-${v}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: _,
-          onChange: (N) => E(v, N)
+          value: E,
+          onChange: (N) => _(v, N)
         }
       ),
       /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: v.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" ") + (!v.toLowerCase().includes("foreground") && !v.toLowerCase().includes("border") && !v.toLowerCase().includes("input") && !v.toLowerCase().includes("ring") && !v.toLowerCase().includes("background") ? " Background" : "") })
     ] }, v) : null;
   }) });
-  return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+  return p("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
       d.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-0 my-2 flex flex-col gap-1 py-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
@@ -10194,8 +10225,8 @@ const useStructureValidation = () => {
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: i, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: y("Select preset") }) }),
             /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((j) => {
-              const v = Object.keys(j)[0], _ = v.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(_) }, v);
+              const v = Object.keys(j)[0], E = v.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(E) }, v);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: y("Apply") }) })
@@ -10212,7 +10243,7 @@ const useStructureValidation = () => {
           {
             label: j,
             value: h.fontFamily[j.replace(/font-/g, "")] || v[Object.keys(v)[0]],
-            onChange: (_) => A(j, _)
+            onChange: (E) => A(j, E)
           },
           j
         )) }),
@@ -10264,7 +10295,7 @@ const useStructureValidation = () => {
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx("br", {})
     ] }),
-    p && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(p) })
+    u && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(u) })
   ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: y("You don't have permission to edit the theme. Please contact your administrator to get access.") }) }) }) });
 }), Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Style", SVG_code = "Enter SVG code here", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", URL$1 = "URL", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", Classes = "Classes", All = "All", Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", Apply = "Apply", Back = "Back", Insert = "Insert", Rename = "Rename", Partials = "Partials", Happy = "Happy", Sad = "Sad", Retry = "Retry", canvas_empty = "Canvas is empty", Presets = "Presets", No = "No", Saving = "Saving", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Add = "Add", Save = "Save", Screen = "Screen", lngEn = {
   "Add block": "Add Block",
@@ -10775,13 +10806,13 @@ function QuickPrompts({ onClick: o }) {
       lang: get(LANGUAGES, a, a)
     })
   }), /* @__PURE__ */ jsx("div", { className: n ? "pointer-events-none opacity-50" : "", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: c.map(
-    ({ name: d, icon: p, subMenus: u, prompt: g }) => u ? /* @__PURE__ */ jsxs(Popover, { children: [
+    ({ name: d, icon: u, subMenus: p, prompt: g }) => p ? /* @__PURE__ */ jsxs(Popover, { children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
         "li",
         {
           className: "flex cursor-pointer items-center space-x-2 rounded p-1 pl-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
           children: [
-            /* @__PURE__ */ jsx(p, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx(u, { className: "h-4 w-4" }),
             /* @__PURE__ */ jsx("span", { children: d })
           ]
         },
@@ -10794,7 +10825,7 @@ function QuickPrompts({ onClick: o }) {
         onClick: () => o(g),
         className: "flex cursor-pointer items-center space-x-2 rounded p-1 text-xs hover:bg-primary/10 hover:text-primary dark:hover:bg-gray-800",
         children: [
-          /* @__PURE__ */ jsx(p, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx(u, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsx("span", { children: r(d) })
         ]
       },
@@ -10803,7 +10834,7 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: i } = useAskAi(), [l, c] = useState(""), d = useRef(null), p = useRef(null), u = useSelectedBlock();
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: i } = useAskAi(), [l, c] = useState(""), d = useRef(null), u = useRef(null), p = useSelectedBlock();
   useEffect(() => {
     var m;
     (m = d.current) == null || m.focus();
@@ -10813,10 +10844,10 @@ const AIUserPrompt = ({ blockId: o }) => {
   };
   return /* @__PURE__ */ jsx("div", { className: "", children: o ? /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: n("Selected block") }),
-    u && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1 rounded border border-primary/20 bg-primary/10 p-1.5 text-xs text-primary", children: [
-      /* @__PURE__ */ jsx(TypeIcon, { type: u._type }),
+    p && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1 rounded border border-primary/20 bg-primary/10 p-1.5 text-xs text-primary", children: [
+      /* @__PURE__ */ jsx(TypeIcon, { type: p._type }),
       " ",
-      /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap leading-none", children: u._name || u._type })
+      /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap leading-none", children: p._name || p._type })
     ] }),
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: n("Quick actions") }),
@@ -10824,7 +10855,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       QuickPrompts,
       {
         onClick: (m) => {
-          p.current && clearTimeout(p.current), r("content", o, m, g);
+          u.current && clearTimeout(u.current), r("content", o, m, g);
         }
       }
     ) }),
@@ -10841,7 +10872,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           className: "w-full resize-none border-none p-0 text-xs shadow-none outline-none",
           rows: 3,
           onKeyDown: (m) => {
-            m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), r("content", o, l, g));
+            m.key === "Enter" && (m.preventDefault(), u.current && clearTimeout(u.current), r("content", o, l, g));
           }
         }
       ),
@@ -10851,7 +10882,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           Button,
           {
             onClick: () => {
-              p.current && clearTimeout(p.current), r("content", o, l, g);
+              u.current && clearTimeout(u.current), r("content", o, l, g);
             },
             variant: "default",
             className: "h-7 w-7",
@@ -10915,11 +10946,11 @@ const UndoRedo = () => {
   const { hasErrors: o, hasWarnings: n, errorCount: r, warningCount: a, errors: i } = useStructureValidation(), [, l] = useSelectedBlockIds(), { t: c } = useTranslation();
   if (!o && !n)
     return null;
-  const d = () => o ? "text-red-500" : n ? "text-orange-500" : "text-gray-500", p = () => o ? /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-4 w-4" }) : n ? /* @__PURE__ */ jsx(InfoCircledIcon, { className: "h-4 w-4" }) : null, u = () => o && n ? `${r} error${r > 1 ? "s" : ""}, ${a} warning${a > 1 ? "s" : ""}` : o ? `${r} error${r > 1 ? "s" : ""}` : n ? `${a} warning${a > 1 ? "s" : ""}` : "";
+  const d = () => o ? "text-red-500" : n ? "text-orange-500" : "text-gray-500", u = () => o ? /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-4 w-4" }) : n ? /* @__PURE__ */ jsx(InfoCircledIcon, { className: "h-4 w-4" }) : null, p = () => o && n ? `${r} error${r > 1 ? "s" : ""}, ${a} warning${a > 1 ? "s" : ""}` : o ? `${r} error${r > 1 ? "s" : ""}` : n ? `${a} warning${a > 1 ? "s" : ""}` : "";
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs("div", { className: `ml-2 flex cursor-pointer items-center gap-2 ${d()}`, children: [
-      p(),
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: u() })
+      u(),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: p() })
     ] }) }),
     /* @__PURE__ */ jsx(DropdownMenuContent, { side: "bottom", className: "max-w-xs p-2", align: "end", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: c("Invalid structure") }),
@@ -10971,9 +11002,9 @@ const UndoRedo = () => {
     ] })
   ] });
 }, AddBlocksDialog = () => {
-  const { t: o } = useTranslation(), [n, r] = useState(""), [a, i] = useState(-1), [l, c] = useState(!1), d = useIsDragAndDropEnabled(), [, p] = useSidebarActivePanel();
-  return usePubSub(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, (u) => {
-    d ? p("add-block") : (r(u ? u._id : null), i(isNaN(u == null ? void 0 : u.position) ? -1 : u == null ? void 0 : u.position), c(!0));
+  const { t: o } = useTranslation(), [n, r] = useState(""), [a, i] = useState(-1), [l, c] = useState(!1), d = useIsDragAndDropEnabled(), [, u] = useSidebarActivePanel();
+  return usePubSub(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, (p) => {
+    d ? u("add-block") : (r(p ? p._id : null), i(isNaN(p == null ? void 0 : p.position) ? -1 : p == null ? void 0 : p.position), c(!0));
   }), usePubSub(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK, () => {
     r(""), i(-1), c(!1);
   }), /* @__PURE__ */ jsx(AlertDialog, { open: l, onOpenChange: () => l ? c(!1) : "", children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "max-w-5xl overflow-hidden border-border", children: [
@@ -10994,7 +11025,7 @@ const UndoRedo = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, i] = useState([]), [l, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), h = useRef(null), x = useRef(null), b = usePageExternalData(), { t: y } = useTranslation();
+  const [a, i] = useState([]), [l, c] = useState(""), [d, u] = useState(""), [p, g] = useState(null), [m, f] = useState(""), h = useRef(null), x = useRef(null), b = usePageExternalData(), { t: y } = useTranslation();
   useEffect(() => {
     i(n);
   }, [n]);
@@ -11005,25 +11036,25 @@ const UndoRedo = () => {
     }
     if (l) {
       const w = [...a, { key: l, value: d }];
-      r(w), i(a), c(""), p(""), f("");
+      r(w), i(a), c(""), u(""), f("");
     }
   }, k = (w) => {
-    const j = a.filter((v, _) => _ !== w);
+    const j = a.filter((v, E) => E !== w);
     r(j), i(j);
   }, S = (w) => {
-    g(w), c(a[w].key), p(a[w].value);
+    g(w), c(a[w].key), u(a[w].value);
   }, A = () => {
     if (l.startsWith("@")) {
       f(y("Attribute keys cannot start with @"));
       return;
     }
-    if (u !== null && l) {
+    if (p !== null && l) {
       const w = [...a];
-      w[u] = { key: l, value: d }, r(w), i(w), g(null), c(""), p(""), f("");
+      w[p] = { key: l, value: d }, r(w), i(w), g(null), c(""), u(""), f("");
     }
   }, B = (w) => {
-    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), u !== null ? A() : C());
-  }, E = useCallback((w) => {
+    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), p !== null ? A() : C());
+  }, _ = useCallback((w) => {
     const j = (N) => /[.,!?;:]/.test(N), v = (N, I, P) => {
       let D = "", R = "";
       const $ = I > 0 ? N[I - 1] : "", F = I < N.length ? N[I] : "";
@@ -11032,16 +11063,16 @@ const UndoRedo = () => {
         prefixLength: D.length,
         suffixLength: R.length
       };
-    }, _ = x.current;
-    if (_) {
-      const N = _.selectionStart || 0, I = _.value || "", P = _.selectionEnd || N;
+    }, E = x.current;
+    if (E) {
+      const N = E.selectionStart || 0, I = E.value || "", P = E.selectionEnd || N;
       if (P > N) {
         const O = `{{${w}}}`, { text: L } = v(I, N, O), T = I.slice(0, N) + L + I.slice(P);
-        p(T);
+        u(T);
         return;
       }
       const R = `{{${w}}}`, { text: $ } = v(I, N, R), F = I.slice(0, N) + $ + I.slice(N);
-      p(F);
+      u(F);
     }
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
@@ -11049,7 +11080,7 @@ const UndoRedo = () => {
       "form",
       {
         onSubmit: (w) => {
-          w.preventDefault(), u !== null ? A() : C();
+          w.preventDefault(), p !== null ? A() : C();
         },
         className: "space-y-3",
         children: [
@@ -11074,7 +11105,7 @@ const UndoRedo = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: y("Value") }),
-                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: E })
+                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: _ })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -11085,7 +11116,7 @@ const UndoRedo = () => {
                   id: "attrValue",
                   ref: x,
                   value: d,
-                  onChange: (w) => p(w.target.value),
+                  onChange: (w) => u(w.target.value),
                   onKeyDown: B,
                   placeholder: y("Enter value"),
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -11093,7 +11124,7 @@ const UndoRedo = () => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !l.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: y(u !== null ? "Save" : "Add") }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !l.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: y(p !== null ? "Save" : "Add") }) }),
           m && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: m })
         ]
       }
@@ -11112,15 +11143,15 @@ const UndoRedo = () => {
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), i = useUpdateBlocksProps(), l = `${get(a, "0.prop")}_attrs`;
   React.useEffect(() => {
-    const d = map(get(o, l), (p, u) => ({ key: u, value: p }));
+    const d = map(get(o, l), (u, p) => ({ key: p, value: u }));
     isEmpty(d) ? r([]) : r(d);
   }, [get(o, l)]);
   const c = React.useCallback(
     (d = []) => {
-      const p = {};
-      forEach(d, (u) => {
-        isEmpty(u.key) || set(p, u.key, u.value);
-      }), i([get(o, "_id")], { [l]: p });
+      const u = {};
+      forEach(d, (p) => {
+        isEmpty(p.key) || set(u, p.key, p.value);
+      }), i([get(o, "_id")], { [l]: u });
     },
     [o, i, l]
   );
@@ -11279,13 +11310,13 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     label: getBlockLabel(a)
   }));
 }, TokenUsagePopover = ({ tokenId: o, tokenName: n }) => {
-  const { t: r } = useTranslation(), [a] = useBlocksStore(), [i, l] = useSelectedBlockIds(), c = useBuilderProp("pageId"), d = useBuilderProp("siteWideUsage"), p = useMemo(() => collectTokenUsageOnPage(a, o), [a, o]), u = useMemo(
-    () => p.map((S) => ({
+  const { t: r } = useTranslation(), [a] = useBlocksStore(), [i, l] = useSelectedBlockIds(), c = useBuilderProp("pageId"), d = useBuilderProp("siteWideUsage"), u = useMemo(() => collectTokenUsageOnPage(a, o), [a, o]), p = useMemo(
+    () => u.map((S) => ({
       id: S.id,
       label: S.label,
       isSelected: i.includes(S.id)
     })),
-    [p, i]
+    [u, i]
   ), g = useMemo(() => d ? Object.entries(d).reduce(
     (S, [A, B]) => (A === c || !(B != null && B.designTokens) || !Object.keys(B.designTokens).some((w) => typeof w != "string" ? !1 : w === o) || S.push({ id: A, name: B.name || A, isPartial: !!B.isPartial }), S),
     []
@@ -11321,7 +11352,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
           TokenUsageSection,
           {
             title: r("Blocks affected on this page"),
-            items: u,
+            items: p,
             emptyLabel: r("None"),
             onSelect: h,
             icon: /* @__PURE__ */ jsx(ArrowRightIcon, { fontSize: 4 })
@@ -11351,7 +11382,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     ] })
   ] });
 }, ManageDesignTokens = ({}) => {
-  const { t: o } = useTranslation(), [n, r] = useAtom$1(chaiDesignTokensAtom), [a, i] = useState(!1), [l, c] = useState(null), [d, p] = useState(!1), [u, g] = useState(!1), [m, f] = useState(""), [h, x] = useState(""), [b, y] = useState(""), [C, k] = useState(""), [S, A] = useState(""), [B, E] = useState(""), w = useIncrementActionsCount(), j = (L) => {
+  const { t: o } = useTranslation(), [n, r] = useAtom$1(chaiDesignTokensAtom), [a, i] = useState(!1), [l, c] = useState(null), [d, u] = useState(!1), [p, g] = useState(!1), [m, f] = useState(""), [h, x] = useState(""), [b, y] = useState(""), [C, k] = useState(""), [S, A] = useState(""), [B, _] = useState(""), w = useIncrementActionsCount(), j = (L) => {
     const T = L.trim();
     return T.length === 0 || T.length > 25 ? !1 : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(T);
   }, v = (L, T = !1, M) => {
@@ -11359,7 +11390,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     return H.length === 0 ? "" : H.length > 25 ? o("Token name must be 25 characters or less") : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(H) ? Object.entries(n).find(
       ([V, U]) => U.name === H && (!T || V !== M)
     ) ? o("Token name already exists") : "" : o("Only alphanumeric characters and hyphens allowed");
-  }, _ = () => {
+  }, E = () => {
     if (!m.trim() || !h.trim()) {
       toast.error(o("Please fill in both token name and classes"));
       return;
@@ -11379,7 +11410,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
         value: h.trim()
       }
     };
-    r(M), f(""), x(""), i(!1), p(!1), w(), toast.success(o("Token added successfully"));
+    r(M), f(""), x(""), i(!1), u(!1), w(), toast.success(o("Token added successfully"));
   }, N = () => {
     if (!b.trim() || !C.trim()) {
       toast.error(o("Please fill in both token name and classes"));
@@ -11412,17 +11443,17 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     const T = n[L];
     T && (c(L), y(T.name), k(T.value), i(!1), g(!0));
   }, D = () => {
-    i(!0), c(null), f(""), x(""), A(""), p(!0);
+    i(!0), c(null), f(""), x(""), A(""), u(!0);
   }, R = () => {
-    c(null), y(""), k(""), E(""), g(!1);
+    c(null), y(""), k(""), _(""), g(!1);
   }, $ = () => {
-    i(!1), f(""), x(""), A(""), p(!1);
+    i(!1), f(""), x(""), A(""), u(!1);
   }, F = (L) => {
     const T = L.replace(/\s+/g, "-");
     f(T), A(v(T));
   }, O = (L) => {
     const T = L.replace(/\s+/g, "-");
-    y(T), E(v(T, !0, l || void 0));
+    y(T), _(v(T, !0, l || void 0));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(
@@ -11535,10 +11566,10 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       ] }),
       /* @__PURE__ */ jsxs(DialogFooter, { children: [
         /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: $, className: "h-8 text-sm", children: o("Cancel") }),
-        /* @__PURE__ */ jsx(Button, { onClick: _, className: "h-8 text-sm", children: o("Add Token") })
+        /* @__PURE__ */ jsx(Button, { onClick: E, className: "h-8 text-sm", children: o("Add Token") })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: u, onOpenChange: R, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: p, onOpenChange: R, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: o("Edit Design Token") }),
         /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm", children: o("Update the design token name and classes.") })
@@ -11602,14 +11633,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"), [i, l] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = reverse([...u ?? []]), m = useCallback((w) => {
+  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [i, l] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), u = useChaiSidebarPanels("top"), p = useChaiSidebarPanels("bottom"), g = reverse([...p ?? []]), m = useCallback((w) => {
     w.preventDefault();
-  }, []), f = useMemo(() => [p].flat(), [p]), h = useCallback(
+  }, []), f = useMemo(() => [u].flat(), [u]), h = useCallback(
     (w) => {
       console.log("handleMenuItemClick", w, n), r(n === w ? null : w);
     },
     [n, r]
-  ), { t: x } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), C = find(b, { id: n }) ?? first(b), k = get(C, "width", DEFAULT_PANEL_WIDTH);
+  ), { t: x } = useTranslation(), b = useMemo(() => [...u, ...p], [u, p]), y = useBuilderProp("htmlDir", "ltr"), C = find(b, { id: n }) ?? first(b), k = get(C, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
       const w = find(b, { id: n });
@@ -11628,7 +11659,7 @@ const RootLayout = () => {
   useEffect(() => {
     n !== null && !find(b, { id: n }) && r("outline");
   }, [n, b]);
-  const E = useCallback(
+  const _ = useCallback(
     (w) => {
       h(w);
     },
@@ -11649,7 +11680,7 @@ const RootLayout = () => {
                   position: "top",
                   panelId: w.id,
                   isActive: n === w.id,
-                  show: () => E(w.id)
+                  show: () => _(w.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-top-" + j)) }),
@@ -11659,7 +11690,7 @@ const RootLayout = () => {
                   position: "bottom",
                   panelId: w.id,
                   isActive: n === w.id,
-                  show: () => E(w.id)
+                  show: () => _(w.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-bottom-" + j)) })
@@ -11848,7 +11879,7 @@ const RootLayout = () => {
   position: n,
   updatePosition: r
 }) => {
-  const a = useChaiFeatureFlags(), [i, l] = useState(""), [c, d] = useState(!1), [p, u] = useState({ x: 0, y: 0 }), g = useMemo(() => {
+  const a = useChaiFeatureFlags(), [i, l] = useState(""), [c, d] = useState(!1), [u, p] = useState({ x: 0, y: 0 }), g = useMemo(() => {
     if (!i.trim()) return a;
     const x = i.toLowerCase();
     return Object.fromEntries(
@@ -11858,14 +11889,14 @@ const RootLayout = () => {
       })
     );
   }, [a, i]), m = (x) => {
-    d(!0), u({
+    d(!0), p({
       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, C = x.currentTarget, k = C.offsetWidth, S = C.offsetHeight, A = window.innerWidth - k, B = window.innerHeight - S, E = Math.max(0, Math.min(b, A)), w = Math.max(0, Math.min(y, B));
-    r(E, w);
+    const b = x.clientX - u.x, y = x.clientY - u.y, C = x.currentTarget, k = C.offsetWidth, S = C.offsetHeight, A = window.innerWidth - k, B = window.innerHeight - S, _ = Math.max(0, Math.min(b, A)), w = Math.max(0, Math.min(y, B));
+    r(_, w);
   }, h = () => {
     d(!1);
   };
@@ -11963,36 +11994,39 @@ const RootLayout = () => {
     const i = first(o);
     isString(i) && (a = [i, ...getParentNodeIds(n, i)]), r(a);
   }, [o, n, r]);
-}, ScreenTooSmall = () => /* @__PURE__ */ jsx("section", { className: "fixed inset-0 z-50 flex h-screen w-screen items-center justify-center bg-white bg-[linear-gradient(to_right,#f3f4f6_1px,transparent_1px),linear-gradient(to_bottom,#f3f4f6_1px,transparent_1px)] bg-[size:10px_10px] py-12 sm:py-16 lg:py-20 xl:hidden", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-md space-y-6 text-center", children: [
-  /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: "https://ucarecdn.com/fbfc3b05-cb73-4e99-92a2-3a367b7c36cd/",
-      alt: "Chai Builder",
-      className: "mx-auto h-20 w-20 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
-    }
-  ),
-  /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-5xl font-bold tracking-tight text-gray-900", children: "Screen too small" }),
-    /* @__PURE__ */ jsxs("p", { className: "mx-auto max-w-sm text-sm leading-7 text-gray-600", children: [
-      "Please view this page on greater than ",
-      /* @__PURE__ */ jsx("strong", { className: "font-medium", children: "1280px" }),
-      " screen width for the best experience."
-    ] })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center rounded-full bg-gray-100 px-4 py-2 text-sm text-gray-700", children: [
-    /* @__PURE__ */ jsx("svg", { className: "mr-2 h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-      "path",
+}, ScreenTooSmall = () => {
+  const o = useBuilderProp("smallScreenComponent", null);
+  return /* @__PURE__ */ jsx("section", { className: "fixed inset-0 z-[99999] flex h-screen w-screen items-center justify-center bg-white xl:hidden", children: o ? React__default.createElement(o) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-[linear-gradient(to_right,#f3f4f6_1px,transparent_1px),linear-gradient(to_bottom,#f3f4f6_1px,transparent_1px)] bg-[size:10px_10px] py-12 sm:py-16 lg:py-20", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-md space-y-6 text-center", children: [
+    /* @__PURE__ */ jsx(
+      "img",
       {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "2",
-        d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        src: "https://ucarecdn.com/fbfc3b05-cb73-4e99-92a2-3a367b7c36cd/",
+        alt: "Chai Builder",
+        className: "mx-auto h-20 w-20 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
       }
-    ) }),
-    "Minimum width: 1280px"
-  ] }) })
-] }) }) });
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-5xl font-bold tracking-tight text-gray-900", children: "Screen too small" }),
+      /* @__PURE__ */ jsxs("p", { className: "mx-auto max-w-sm text-sm leading-7 text-gray-600", children: [
+        "Please view this page on greater than ",
+        /* @__PURE__ */ jsx("strong", { className: "font-medium", children: "1280px" }),
+        " screen width for the best experience."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center rounded-full bg-gray-100 px-4 py-2 text-sm text-gray-700", children: [
+      /* @__PURE__ */ jsx("svg", { className: "mr-2 h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "2",
+          d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        }
+      ) }),
+      "Minimum width: 1280px"
+    ] }) })
+  ] }) }) }) });
+};
 function isSelfAtom(o, n) {
   return o.unstable_is ? o.unstable_is(n) : n === o;
 }
@@ -12060,41 +12094,41 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   let l = a.get(n);
   return l || (l = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, a.set(n, l), i == null || i(o, n)), l;
 }, flushCallbacks = (o) => {
-  const n = getBuildingBlocks(o), r = n[1], a = n[3], i = n[4], l = n[5], c = n[6], d = n[13], p = [], u = (g) => {
+  const n = getBuildingBlocks(o), r = n[1], a = n[3], i = n[4], l = n[5], c = n[6], d = n[13], u = [], p = (g) => {
     try {
       g();
     } catch (m) {
-      p.push(m);
+      u.push(m);
     }
   };
   do {
-    c.f && u(c.f);
+    c.f && p(c.f);
     const g = /* @__PURE__ */ new Set(), m = g.add.bind(g);
     a.forEach((f) => {
       var h;
       return (h = r.get(f)) == null ? void 0 : h.l.forEach(m);
-    }), a.clear(), l.forEach(m), l.clear(), i.forEach(m), i.clear(), g.forEach(u), a.size && d(o);
+    }), a.clear(), l.forEach(m), l.clear(), i.forEach(m), i.clear(), g.forEach(p), a.size && d(o);
   } while (a.size || l.size || i.size);
-  if (p.length)
-    throw new AggregateError(p);
+  if (u.length)
+    throw new AggregateError(u);
 }, recomputeInvalidatedAtoms = (o) => {
-  const n = getBuildingBlocks(o), r = n[1], a = n[2], i = n[3], l = n[11], c = n[14], d = n[17], p = [], u = /* @__PURE__ */ new WeakSet(), g = /* @__PURE__ */ new WeakSet(), m = Array.from(i);
+  const n = getBuildingBlocks(o), r = n[1], a = n[2], i = n[3], l = n[11], c = n[14], d = n[17], u = [], p = /* @__PURE__ */ new WeakSet(), g = /* @__PURE__ */ new WeakSet(), m = Array.from(i);
   for (; m.length; ) {
     const f = m[m.length - 1], h = l(o, f);
     if (g.has(f)) {
       m.pop();
       continue;
     }
-    if (u.has(f)) {
-      a.get(f) === h.n && p.push([f, h]), g.add(f), m.pop();
+    if (p.has(f)) {
+      a.get(f) === h.n && u.push([f, h]), g.add(f), m.pop();
       continue;
     }
-    u.add(f);
+    p.add(f);
     for (const x of getMountedOrPendingDependents(f, h, r))
-      u.has(x) || m.push(x);
+      p.has(x) || m.push(x);
   }
-  for (let f = p.length - 1; f >= 0; --f) {
-    const [h, x] = p[f];
+  for (let f = u.length - 1; f >= 0; --f) {
+    const [h, x] = u[f];
     let b = !1;
     for (const y of x.d.keys())
       if (y !== h && i.has(y)) {
@@ -12105,7 +12139,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   }
 }, readAtomState = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), i = a[1], l = 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);
+  const a = getBuildingBlocks(o), i = a[1], l = a[2], c = a[3], d = a[6], u = a[7], p = a[11], g = a[12], m = a[13], f = a[14], h = a[16], x = a[17], b = p(o, n);
   if (isAtomStateInitialized(b) && (i.has(n) && l.get(n) !== b.n || Array.from(b.d).every(
     ([w, j]) => (
       // Recursively, read the atom state of the dependency, and
@@ -12122,13 +12156,13 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   function k(w) {
     var j;
     if (isSelfAtom(n, w)) {
-      const _ = u(o, w);
-      if (!isAtomStateInitialized(_))
+      const E = p(o, w);
+      if (!isAtomStateInitialized(E))
         if (hasInitialValue(w))
           setAtomStateValueOrPromise(o, w, w.init);
         else
           throw new Error("no atom init");
-      return returnAtomValue(_);
+      return returnAtomValue(E);
     }
     const v = f(o, w);
     try {
@@ -12152,26 +12186,26 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
           }
       }), A;
     }
-  }, E = b.n;
+  }, _ = b.n;
   try {
-    const w = p(o, n, k, B);
+    const w = u(o, n, k, B);
     return setAtomStateValueOrPromise(o, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => S == null ? void 0 : S.abort()), w.then(C, C)), b;
   } catch (w) {
     return delete b.v, b.e = w, ++b.n, b;
   } finally {
-    y = !1, E !== b.n && l.get(n) === E && (l.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
+    y = !1, _ !== b.n && l.get(n) === _ && (l.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
   }
 }, invalidateDependents = (o, n) => {
   const r = getBuildingBlocks(o), a = r[1], i = r[2], l = r[11], c = [n];
   for (; c.length; ) {
-    const d = c.pop(), p = l(o, d);
-    for (const u of getMountedOrPendingDependents(d, p, a)) {
-      const g = l(o, u);
-      i.set(u, g.n), c.push(u);
+    const d = c.pop(), u = l(o, d);
+    for (const p of getMountedOrPendingDependents(d, u, a)) {
+      const g = l(o, p);
+      i.set(p, g.n), c.push(p);
     }
   }
 }, writeAtomState = (o, n, ...r) => {
-  const a = getBuildingBlocks(o), i = a[3], l = a[6], c = a[8], d = a[11], p = a[12], u = a[13], g = a[14], m = a[15], f = a[17];
+  const a = getBuildingBlocks(o), i = a[3], l = a[6], c = a[8], d = a[11], u = a[12], p = a[13], g = a[14], m = a[15], f = a[17];
   let h = !0;
   const x = (y) => returnAtomValue(g(o, y)), b = (y, ...C) => {
     var k;
@@ -12186,7 +12220,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
       } else
         return writeAtomState(o, y, ...C);
     } finally {
-      h || (u(o), p(o));
+      h || (p(o), u(o));
     }
   };
   try {
@@ -12196,12 +12230,12 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   }
 }, mountDependencies = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), i = a[1], l = a[3], c = a[6], d = a[11], p = a[15], u = a[18], g = a[19], m = d(o, n), f = i.get(n);
+  const a = getBuildingBlocks(o), i = a[1], l = a[3], c = a[6], d = a[11], u = a[15], p = a[18], g = a[19], m = d(o, n), f = i.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 && (l.add(h), (r = c.c) == null || r.call(c, h), p(o, h));
+        p(o, h).t.add(n), f.d.add(h), x !== b.n && (l.add(h), (r = c.c) == null || r.call(c, h), u(o, h));
       }
     for (const h of f.d || [])
       if (!m.d.has(h)) {
@@ -12212,7 +12246,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   }
 }, mountAtom = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), i = a[1], l = 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);
+  const a = getBuildingBlocks(o), i = a[1], l = a[4], c = a[6], d = a[10], u = a[11], p = a[12], g = a[13], m = a[14], f = a[16], h = u(o, n);
   let x = i.get(n);
   if (!x) {
     m(o, n);
@@ -12229,7 +12263,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
           try {
             return f(o, n, ...k);
           } finally {
-            y || (g(o), u(o));
+            y || (g(o), p(o));
           }
         };
         try {
@@ -12252,15 +12286,15 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   return x;
 }, unmountAtom = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), i = a[1], l = a[5], c = a[6], d = a[11], p = a[19], u = d(o, n);
+  const a = getBuildingBlocks(o), i = a[1], l = a[5], c = a[6], d = a[11], u = a[19], p = d(o, n);
   let g = i.get(n);
   if (g && !g.l.size && !Array.from(g.t).some((m) => {
     var f;
     return (f = i.get(m)) == null ? void 0 : f.d.has(n);
   })) {
     g.u && l.add(g.u), g = void 0, i.delete(n), (r = c.u) == null || r.call(c, n);
-    for (const m of u.d.keys()) {
-      const f = p(o, m);
+    for (const m of p.d.keys()) {
+      const f = u(o, m);
       f == null || f.t.delete(n);
     }
     return;
@@ -12287,9 +12321,9 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     l(o), i(o);
   }
 }, storeSub = (o, n, r) => {
-  const a = getBuildingBlocks(o), i = a[12], l = a[18], c = a[19], p = l(o, n).l;
-  return p.add(r), i(o), () => {
-    p.delete(r), c(o, n), i(o);
+  const a = getBuildingBlocks(o), i = a[12], l = a[18], c = a[19], u = l(o, n).l;
+  return u.add(r), i(o), () => {
+    u.delete(r), c(o, n), i(o);
   };
 }, buildingBlockMap = /* @__PURE__ */ new WeakMap();
 function getBuildingBlocks(o) {
@@ -12380,23 +12414,23 @@ const isPromiseLike = (o) => typeof (o == null ? void 0 : o.then) == "function",
   let r = continuablePromiseMap.get(o);
   return r || (r = new Promise((a, i) => {
     let l = o;
-    const c = (u) => (g) => {
-      l === u && a(g);
-    }, d = (u) => (g) => {
-      l === u && i(g);
-    }, p = () => {
+    const c = (p) => (g) => {
+      l === p && a(g);
+    }, d = (p) => (g) => {
+      l === p && i(g);
+    }, u = () => {
       try {
-        const u = n();
-        isPromiseLike(u) ? (continuablePromiseMap.set(u, r), l = u, u.then(c(u), d(u)), registerAbortHandler(u, p)) : a(u);
-      } catch (u) {
-        i(u);
+        const p = n();
+        isPromiseLike(p) ? (continuablePromiseMap.set(p, r), l = p, p.then(c(p), d(p)), registerAbortHandler(p, u)) : a(p);
+      } catch (p) {
+        i(p);
       }
     };
-    o.then(c(o), d(o)), registerAbortHandler(o, p);
+    o.then(c(o), d(o)), registerAbortHandler(o, u);
   }), continuablePromiseMap.set(o, r)), r;
 };
 function useAtomValue(o, n) {
-  const { delay: r, unstable_promiseStatus: a = !React__default.use } = {}, i = useStore(), [[l, c, d], p] = useReducer(
+  const { delay: r, unstable_promiseStatus: a = !React__default.use } = {}, i = useStore(), [[l, c, d], u] = useReducer(
     (g) => {
       const m = i.get(o);
       return Object.is(g[0], m) && g[1] === i && g[2] === o ? g : [m, i, o];
@@ -12404,8 +12438,8 @@ function useAtomValue(o, n) {
     void 0,
     () => [i.get(o), i, o]
   );
-  let u = l;
-  if ((c !== i || d !== o) && (p(), u = i.get(o)), useEffect(() => {
+  let p = l;
+  if ((c !== i || d !== o) && (u(), p = i.get(o)), useEffect(() => {
     const g = i.sub(o, () => {
       if (a)
         try {
@@ -12416,17 +12450,17 @@ function useAtomValue(o, n) {
         } catch {
         }
       if (typeof r == "number") {
-        setTimeout(p, r);
+        setTimeout(u, r);
         return;
       }
-      p();
+      u();
     });
-    return p(), g;
-  }, [i, o, r, a]), useDebugValue(u), isPromiseLike(u)) {
-    const g = createContinuablePromise(u, () => i.get(o));
+    return u(), g;
+  }, [i, o, r, a]), useDebugValue(p), isPromiseLike(p)) {
+    const g = createContinuablePromise(p, () => i.get(o));
     return a && attachPromiseStatus(g), use(g);
   }
-  return u;
+  return p;
 }
 function useSetAtom(o, n) {
   const r = useStore();
@@ -12546,7 +12580,7 @@ function convertAttributeName(o) {
   return r[o] ? r[o] : o;
 }
 function domToJsx(o, n = 0) {
-  var u;
+  var p;
   if (Array.isArray(o)) {
     if (o.length === 0) return "";
     if (o.length === 1) return domToJsx(o[0], n);
@@ -12560,7 +12594,7 @@ function domToJsx(o, n = 0) {
   }
   const r = "  ".repeat(n);
   if (o.nodeType === Node.TEXT_NODE) {
-    const g = (u = o.textContent) == null ? void 0 : u.trim();
+    const g = (p = o.textContent) == null ? void 0 : p.trim();
     return g ? `${r}${g}
 ` : "";
   }
@@ -12679,7 +12713,7 @@ const getExportedCoded = async ({
   isTypeScript: r = !1
 }) => {
   let a = (o == null ? void 0 : o._name) || (o == null ? void 0 : o._type) || "Component";
-  a = camelCase(a).replace(/^./, (u) => u.toUpperCase());
+  a = camelCase(a).replace(/^./, (p) => p.toUpperCase());
   const i = "  ";
   let { jsx: l, html: c } = await convertHtmlToJsx(n);
   return l = l == null ? void 0 : l.split(`
@@ -12693,7 +12727,7 @@ ${i})
 }`, { jsx: l, html: formatHtml(c), componentName: a };
 }, ExportCodeModalContent = ({ tab: o }) => {
   var C;
-  const { t: n } = useTranslation(), [r, a] = useState({ html: "", jsx: "" }), i = useSelectedBlock(), l = useBlocksHtmlForAi(), [c, d] = useState(""), [p, u] = useState(!1), g = () => {
+  const { t: n } = useTranslation(), [r, a] = useState({ html: "", jsx: "" }), i = useSelectedBlock(), l = useBlocksHtmlForAi(), [c, d] = useState(""), [u, p] = useState(!1), g = () => {
     switch (o) {
       case "js":
         return `${c}.jsx`;
@@ -12716,19 +12750,19 @@ ${i})
     }
   }, f = useCallback(async () => {
     try {
-      u(!1);
+      p(!1);
       let k = l({ blockId: i == null ? void 0 : i._id, additionalCoreBlocks: ["Icon"] });
       k = k.replace(/\s*bid=["'][^"']*["']/g, "");
       const S = o === "ts", {
         jsx: A,
         html: B,
-        componentName: E
+        componentName: _
       } = await getExportedCoded({
         selectedBlock: i,
         html: k,
         isTypeScript: S
       });
-      a({ html: B, jsx: A }), d(E), u(!0);
+      a({ html: B, jsx: A }), d(_), p(!0);
     } catch {
       const S = "<div>Export failed. Close the modal and try again.</div>";
       a({ html: S, jsx: S }), toast.error(n("Failed to generate export HTML"));
@@ -12762,7 +12796,7 @@ ${i})
   `)},
 }`;
   }, []);
-  return ((C = r == null ? void 0 : r.jsx) == null ? void 0 : C.length) > 0 && p ? /* @__PURE__ */ jsx(
+  return ((C = r == null ? void 0 : r.jsx) == null ? void 0 : C.length) > 0 && u ? /* @__PURE__ */ jsx(
     CodeDisplay,
     {
       onCopy: h,
@@ -12778,7 +12812,7 @@ ${i})
     l("js"), a("view"), r(!0);
   }, [n]);
   return usePubSub(CHAI_BUILDER_EVENTS.OPEN_EXPORT_CODE, c), /* @__PURE__ */ jsx(Dialog, { open: n, onOpenChange: async () => {
-    a("edit"), await new Promise((p) => setTimeout(p, 300)), r(!1);
+    a("edit"), await new Promise((u) => setTimeout(u, 300)), r(!1);
   }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-5xl overflow-hidden border-border", children: [
     /* @__PURE__ */ jsxs(DialogHeader, { className: "flex flex-row items-center justify-between", children: [
       /* @__PURE__ */ jsx(DialogTitle, { className: "text-foreground", children: o("Export Code") }),
@@ -12822,8 +12856,8 @@ ${i})
   }, [o.locale]), useEffect(() => {
     setDebugLogs(o.debugLogs);
   }, [o.debugLogs]), useEffect(() => {
-    o.translations && each(o.translations, (d, p) => {
-      i18n.addResourceBundle(p, "translation", d, !0, !0);
+    o.translations && each(o.translations, (d, u) => {
+      i18n.addResourceBundle(u, "translation", d, !0, !0);
     });
   }, [o.translations]), useEffect(() => (a !== "SAVED" ? window.onbeforeunload = () => "" : window.onbeforeunload = null, () => {
     window.onbeforeunload = null;