@chaibuilder/sdk 2.2.8 → 2.2.9

package/dist/core.js

@@ -310,12 +310,12 @@ class PubSub {
   }
 }
 const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: r }) => {
-  const { t: n } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), d = get(o, "_parent"), c = filter(a, (f) => d ? get(f, "_parent") === d : !get(f, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(c, { _id: i }), g = (f) => {
-    if (f === "CHILD")
+  const { t: n } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), d = get(o, "_parent"), c = filter(a, (h) => d ? get(h, "_parent") === d : !get(h, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(c, { _id: i }), g = (h) => {
+    if (h === "CHILD")
       pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
     else {
       const m = { _id: d || "", position: c == null ? void 0 : c.length };
-      f === "BEFORE" ? m.position = Math.max(u, 0) : f === "AFTER" && (m.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, m);
+      h === "BEFORE" ? m.position = Math.max(u, 0) : h === "AFTER" && (m.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, m);
     }
   };
   return l(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -349,23 +349,23 @@ function insertBlocksAtPosition(o, r, n, a) {
   let i = [...o];
   if (n) {
     const u = o.find((g) => g._id === n);
-    if (u && u.content !== void 0 && u.content !== "" && !o.some((f) => f._parent === n)) {
+    if (u && u.content !== void 0 && u.content !== "" && !o.some((h) => h._parent === n)) {
       const m = {
         _id: generateUUID(),
         _parent: n,
         _type: "Text",
         content: u.content
       };
-      Object.keys(u).forEach((h) => {
-        h.startsWith("content-") && (m[h] = u[h]);
-      }), l.unshift(m), i = i.map((h) => {
-        if (h._id === n) {
-          const x = { ...h, content: "" };
+      Object.keys(u).forEach((f) => {
+        f.startsWith("content-") && (m[f] = u[f]);
+      }), l.unshift(m), i = i.map((f) => {
+        if (f._id === n) {
+          const x = { ...f, content: "" };
           return Object.keys(x).forEach((y) => {
             y.startsWith("content-") && (x[y] = "");
           }), x;
         }
-        return h;
+        return f;
       });
     }
   }
@@ -398,13 +398,13 @@ function moveNode(o, r, n, a) {
   const l = findNodeById(o, r), i = findNodeById(o, n);
   if (!l || !i) return !1;
   i.children || (i.model.children = []);
-  let d = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((f) => f.model._id === r);
+  let d = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((h) => h.model._id === r);
   l.drop(), d = Math.max(d, 0);
   const p = (((g = l == null ? void 0 : l.model) == null ? void 0 : g._parent) || "root") === n && d <= a ? a - 1 : a;
   try {
     i.addChildAtIndex(l, p);
-  } catch (f) {
-    return console.error("Error adding child to parent:", f), !1;
+  } catch (h) {
+    return console.error("Error adding child to parent:", h), !1;
   }
   return !0;
 }
@@ -445,8 +445,8 @@ function handleNewParentTextBlock(o, r, n) {
     const c = o.map((u) => {
       if (u._id === n) {
         const g = { ...u, content: "" };
-        return Object.keys(g).forEach((f) => {
-          f.startsWith("content-") && (g[f] = "");
+        return Object.keys(g).forEach((h) => {
+          h.startsWith("content-") && (g[h] = "");
         }), g;
       }
       return u;
@@ -463,7 +463,7 @@ function moveBlocksWithChildren(o, r, n, a) {
   const d = n || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
   if (moveNode(p, r, d, a)) {
     let u = flattenTree(p);
-    const g = u.find((f) => f._id === r);
+    const g = u.find((h) => h._id === r);
     return g && (g._parent = d === "root" ? null : d), u.shift(), n && (u = handleNewParentTextBlock(u, l, n)), u;
   }
   return i;
@@ -487,22 +487,22 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
 }, removeNestedBlocks = (o, r) => {
   let n = [...o], a = [];
   r.forEach((c) => {
-    const p = n.find((f) => f._id === c);
+    const p = n.find((h) => h._id === c);
     if (!p || !p._parent) return;
-    const u = p._parent, g = n.filter((f) => f._parent === u);
+    const u = p._parent, g = n.filter((h) => h._parent === u);
     if (g.length === 2) {
-      const f = g.find((m) => m._id !== c);
-      if (f && f._type === "Text") {
-        const m = n.find((h) => h._id === u);
-        m && "content" in m && (n = n.map((h) => {
-          if (h._id === u) {
-            const x = { ...h, content: f.content };
-            return Object.keys(f).forEach((y) => {
-              y.startsWith("content-") && (x[y] = f[y]);
+      const h = g.find((m) => m._id !== c);
+      if (h && h._type === "Text") {
+        const m = n.find((f) => f._id === u);
+        m && "content" in m && (n = n.map((f) => {
+          if (f._id === u) {
+            const x = { ...f, content: h.content };
+            return Object.keys(h).forEach((y) => {
+              y.startsWith("content-") && (x[y] = h[y]);
             }), x;
           }
-          return h;
-        }), a.push(f._id));
+          return f;
+        }), a.push(h._id));
       }
     }
   });
@@ -824,12 +824,12 @@ const useUndoManager = () => {
   const [o] = useBlocksStore(), [, r] = useSelectedBlockIds(), { addBlocks: n } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, d, c) => {
       var m;
-      for (let h = 0; h < i.length; h++) {
-        const { _id: x } = i[h];
-        i[h]._id = generateUUID();
+      for (let f = 0; f < i.length; f++) {
+        const { _id: x } = i[f];
+        i[f]._id = generateUUID();
         const y = filter(i, { _parent: x });
         for (let b = 0; b < y.length; b++)
-          y[b]._parent = i[h]._id;
+          y[b]._parent = i[f]._id;
       }
       const p = first(i);
       let u, g;
@@ -850,8 +850,8 @@ const useUndoManager = () => {
         ...has(i, "_name") && { _name: i._name },
         ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
-      let f, m;
-      return d && (f = find(o, { _id: d }), g._parent = d, m = d), !canAcceptChildBlock(f == null ? void 0 : f._type, g._type) && f && (g._parent = f._parent, m = f._parent), n([g], m, c), r([g._id]), g;
+      let h, m;
+      return d && (h = find(o, { _id: d }), g._parent = d, m = d), !canAcceptChildBlock(h == null ? void 0 : h._type, g._type) && h && (g._parent = h._parent, m = h._parent), n([g], m, c), r([g._id]), g;
     },
     [n, a, o, r]
   ), addPredefinedBlock: a };
@@ -2297,8 +2297,8 @@ const getBlockWithChildren = (o, r) => {
     return isEmpty(d) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...d });
   })
 ), addLangToPrompt = (o, r, n) => !r || n !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, r, r)} language.`, askAiProcessingAtom = atom(!1), useAskAi = () => {
-  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), d = useUpdateMultipleBlocksProps(), [c] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, f = (m, h) => {
-    const x = cloneDeep(h.find((y) => y._id === m));
+  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), d = useUpdateMultipleBlocksProps(), [c] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, h = (m, f) => {
+    const x = cloneDeep(f.find((y) => y._id === m));
     for (const y in x) {
       const b = x[y];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
@@ -2311,11 +2311,11 @@ const getBlockWithChildren = (o, r) => {
   };
   return {
     askAi: useCallback(
-      async (m, h, x, y) => {
+      async (m, f, x, y) => {
         if (l) {
           r(!0), a(null);
           try {
-            const b = p === u ? "" : p, v = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, c)), p) : [f(h, c)], w = await l(m, addLangToPrompt(x, g, m), v, b), { blocks: A, error: E } = w;
+            const b = p === u ? "" : p, v = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, c)), p) : [h(f, c)], w = await l(m, addLangToPrompt(x, g, m), v, b), { blocks: A, error: E } = w;
             if (E) {
               a(E);
               return;
@@ -2422,16 +2422,16 @@ const getBlockWithChildren = (o, r) => {
         n(c), a([]);
         const u = {
           _chai_copied_blocks: c.flatMap((g) => {
-            const f = getDuplicatedBlocks(o, g, null);
+            const h = getDuplicatedBlocks(o, g, null);
             if (!p)
-              return f;
+              return h;
             let m = [];
-            for (const h of f)
-              if (h._type === "PartialBlock" || h._type === "GlobalBlock") {
-                const x = l(h.partialBlockId);
-                set(x, "0._parent", h._parent), m = [...m, ...x];
+            for (const f of h)
+              if (f._type === "PartialBlock" || f._type === "GlobalBlock") {
+                const x = l(f.partialBlockId);
+                set(x, "0._parent", f._parent), m = [...m, ...x];
               } else
-                m.push(h);
+                m.push(f);
             return m;
           })
         };
@@ -2475,8 +2475,8 @@ const getBlockWithChildren = (o, r) => {
         const g = filter(
           o,
           (m) => isString(l) ? m._parent === l : !m._parent
-        ).indexOf(c) + 1, f = getDuplicatedBlocks(o, d, l);
-        n(f, l, g), i.push(get(f, "0._id", ""));
+        ).indexOf(c) + 1, h = getDuplicatedBlocks(o, d, l);
+        n(h, l, g), i.push(get(h, "0._id", ""));
       }), r(i);
     },
     [o, r]
@@ -2613,14 +2613,14 @@ const getBlockWithChildren = (o, r) => {
   return map(i, (d) => {
     const c = o(d), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(c, l.prop, `${STYLES_KEY},`));
-    return each(p, (f) => {
-      const m = f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
-      u = u.replace(h, " ").replace(/\s+/g, " ").trim();
-      const x = first(f.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(f.split(":").pop().trim());
-    }), each(p, (f) => {
-      const m = f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
-      g = g.replace(h, " ").replace(/\s+/g, " ").trim();
+    return each(p, (h) => {
+      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+      u = u.replace(f, " ").replace(/\s+/g, " ").trim();
+      const x = first(h.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(h.split(":").pop().trim());
+    }), each(p, (h) => {
+      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+      g = g.replace(f, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [c._id],
       props: {
@@ -2723,21 +2723,21 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     return "VERTICAL";
   }
 }, isDisabledControl = (o, r, n) => !!(o && (n === "UP" || n === "LEFT") || r && (n === "DOWN" || n === "RIGHT")), useBlockController = (o, r) => {
-  const [n] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), d = get(o, "_parent"), c = filter(n, (x) => d ? get(x, "_parent") === d : !get(x, "_parent")), p = (c == null ? void 0 : c.length) <= 1, u = findIndex(c, { _id: i }), g = u <= 0, f = u + 1 === (c == null ? void 0 : c.length), m = getParentBlockOrientation(d, i, a), h = useCallback(
+  const [n] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), d = get(o, "_parent"), c = filter(n, (x) => d ? get(x, "_parent") === d : !get(x, "_parent")), p = (c == null ? void 0 : c.length) <= 1, u = findIndex(c, { _id: i }), g = u <= 0, h = u + 1 === (c == null ? void 0 : c.length), m = getParentBlockOrientation(d, i, a), f = useCallback(
     (x) => {
-      isDisabledControl(g, f, x) || p || (x === "UP" || x === "LEFT" ? l([i], d || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], d || null, u + 2), r());
+      isDisabledControl(g, h, x) || p || (x === "UP" || x === "LEFT" ? l([i], d || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], d || null, u + 2), r());
     },
-    [g, f, p, u, i, d, r]
+    [g, h, p, u, i, d, r]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
     ({ key: x }) => {
       var y;
-      h((y = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : y.toUpperCase());
+      f((y = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : y.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
-    [h]
-  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: f, moveBlock: h, orientation: m };
+    [f]
+  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: h, moveBlock: f, orientation: m };
 }, BlockController = ({ block: o, updateFloatingBar: r }) => {
   const { isOnlyChild: n, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: d } = useBlockController(
     o,
@@ -2774,7 +2774,7 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     }
   );
 }, BlockFloatingSelector = ({ selectedBlockElement: o, block: r }) => {
-  const n = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, d] = useSelectedStylingBlocks(), { hasPermission: c } = usePermissions(), [p] = useAtom$1(inlineEditingActiveAtom), { document: u } = useFrame(), { floatingStyles: g, refs: f, update: m } = useFloating({
+  const n = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, d] = useSelectedStylingBlocks(), { hasPermission: c } = usePermissions(), [p] = useAtom$1(inlineEditingActiveAtom), { document: u } = useFrame(), { floatingStyles: g, refs: h, update: m } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: {
@@ -2782,13 +2782,13 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     }
   });
   useResizeObserver(o, () => m(), o !== null), useResizeObserver(u == null ? void 0 : u.body, () => m(), (u == null ? void 0 : u.body) !== null);
-  const h = get(r, "_parent", null), x = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
+  const f = get(r, "_parent", null), x = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
   return !o || !r || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      ref: f.setFloating,
+      ref: h.setFloating,
       style: g,
       onClick: (y) => {
         y.stopPropagation(), y.preventDefault();
@@ -2799,12 +2799,12 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
       onKeyDown: (y) => y.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        h && /* @__PURE__ */ jsx(
+        f && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              d([]), l([h]);
+              d([]), l([f]);
             }
           }
         ),
@@ -2947,21 +2947,21 @@ z(Frame, "defaultProps", {
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
 const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame, { ...o, forwardedRef: r })), useKeyEventWatcher = (o) => {
-  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: d, redo: c } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks: f } = usePasteBlocks(), m = o ? { document: o } : {};
+  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: d, redo: c } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks: h } = usePasteBlocks(), m = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => d(), {}, [d]), useHotkeys("ctrl+y,command+y", () => c(), {}, [c]), useHotkeys("ctrl+x,command+x", () => p(r), {}, [r, p]), useHotkeys("ctrl+c,command+c", () => u(r), {}, [r, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      g(r[0]) && f(r);
+      g(r[0]) && h(r);
     },
     { ...m, preventDefault: !0 },
-    [r, g, f]
+    [r, g, h]
   ), useHotkeys("esc", () => n([]), m, [n]), useHotkeys("ctrl+d,command+d", () => i(r), { ...m, preventDefault: !0 }, [
     r,
     i
   ]), useHotkeys(
     "del, backspace",
-    (h) => {
-      h.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
+    (f) => {
+      f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
     },
     m,
     [r, l]
@@ -3038,7 +3038,7 @@ function removeDataDrop() {
 const useDnd = () => {
   const { document: o } = useFrame(), [r, n] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: d } = useBlocksStoreUndoableActions(), [c, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd")) return {};
-  const f = () => {
+  const h = () => {
     removePlaceholder(), n(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
@@ -3048,25 +3048,25 @@ const useDnd = () => {
     },
     onDrop: (m) => {
       var E;
-      const h = dropTarget, y = getOrientation(h) === "vertical" ? m.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : m.clientX;
+      const f = dropTarget, y = getOrientation(f) === "vertical" ? m.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : m.clientX;
       dropIndex = calculateDropIndex(y, possiblePositions);
-      const b = c, v = h.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      const b = c, v = f.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
       if ((b == null ? void 0 : b._id) === v || !w) {
-        f();
+        h();
         return;
       }
       if (!has(b, "_id")) {
-        a(b, v === "canvas" ? null : v, dropIndex), setTimeout(f, 300);
+        a(b, v === "canvas" ? null : v, dropIndex), setTimeout(h, 300);
         return;
       }
-      let A = h.getAttribute("data-block-id");
-      A === null && (A = m.target.parentElement.getAttribute("data-block-id")), d([b._id], A === "canvas" ? null : A, dropIndex), f(), setTimeout(removePlaceholder, 300);
+      let A = f.getAttribute("data-block-id");
+      A === null && (A = m.target.parentElement.getAttribute("data-block-id")), d([b._id], A === "canvas" ? null : A, dropIndex), h(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (m) => {
-      const h = m, x = h.target;
+      const f = m, x = f.target;
       dropTarget = x;
       const y = x.getAttribute("data-block-id"), b = x.getAttribute("data-dnd-dragged") !== "yes";
-      u(y), h.stopPropagation(), h.preventDefault(), possiblePositions = [], b && calculatePossiblePositions(x), n(!0), l(""), i([]);
+      u(y), f.stopPropagation(), f.preventDefault(), possiblePositions = [], b && calculatePossiblePositions(x), n(!0), l(""), i([]);
     },
     onDragLeave: (m) => {
       m.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
@@ -3091,16 +3091,16 @@ const useHandleCanvasDblClick = (o, r) => {
       const g = u.getAttribute("data-block-type");
       if (!g || !n.includes(g))
         return;
-      const f = u.getAttribute("data-block-id");
-      if (!f) return;
-      o.on("update", ({ editor: h }) => {
-        console.log(h.getHTML());
+      const h = u.getAttribute("data-block-id");
+      if (!h) return;
+      o.on("update", ({ editor: f }) => {
+        console.log(f.getHTML());
       }), o.on("blur", () => {
         console.log("blur");
-        const h = o.getHTML();
-        a([f], { content: h }), r.style.display = "none", u.style.visibility = "visible";
-      }), i(f);
-      const m = c(f).content;
+        const f = o.getHTML();
+        a([h], { content: f }), r.style.display = "none", u.style.visibility = "visible";
+      }), i(h);
+      const m = c(h).content;
       o.commands.setContent(m), r.style.display = "block", u.style.visibility = "hidden", r.style.position = "absolute", r.style.top = `${u.offsetTop}px`, r.style.left = `${u.offsetLeft}px`, r.style.width = `${u.offsetWidth}px`, r.style.height = `${u.offsetHeight}px`, r.classList.add(...u.classList);
     },
     [l, d, c, i, a, o, r]
@@ -3140,11 +3140,11 @@ const useHandleCanvasDblClick = (o, r) => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const h = getElementByDataBlockId(r, first(n));
-      if (h) {
-        const x = h.getAttribute("data-style-prop");
+      const f = getElementByDataBlockId(r, first(n));
+      if (f) {
+        const x = f.getAttribute("data-style-prop");
         if (x) {
-          const y = h.getAttribute("data-style-id"), b = h.getAttribute("data-block-parent");
+          const y = f.getAttribute("data-style-id"), b = f.getAttribute("data-block-parent");
           l([{ id: y, prop: x, blockId: b }]);
         }
       }
@@ -3152,7 +3152,7 @@ const useHandleCanvasDblClick = (o, r) => {
   }, [r, n, l, a]);
   const d = useEditor({
     extensions: [StarterKit]
-  }), c = useRef(null), p = useHandleCanvasDblClick(d, c.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), f = useHandleMouseLeave(), m = useDnd();
+  }), c = useRef(null), p = useHandleCanvasDblClick(d, c.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), h = useHandleMouseLeave(), m = useDnd();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3161,7 +3161,7 @@ const useHandleCanvasDblClick = (o, r) => {
       onClick: u,
       onDoubleClick: p,
       onMouseMove: g,
-      onMouseLeave: f,
+      onMouseLeave: h,
       ...omit(m, "isDragging"),
       className: "relative h-full max-w-full p-px " + (m.isDragging ? "dragging" : ""),
       children: o
@@ -3173,7 +3173,7 @@ const useHandleCanvasDblClick = (o, r) => {
 }, HeadTags = () => {
   const [o] = useTheme(), r = useThemeOptions(), [n] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [d] = useAtom$1(dropTargetBlockIdAtom), { document: c, window: p } = useFrame(), [u] = useState(c == null ? void 0 : c.getElementById("highlighted-block")), [g] = useState(
     c == null ? void 0 : c.getElementById("selected-block")
-  ), [f] = useState(
+  ), [h] = useState(
     c == null ? void 0 : c.getElementById("selected-styling-block")
   ), [m] = useState(
     c == null ? void 0 : c.getElementById("dragged-block")
@@ -3181,7 +3181,7 @@ const useHandleCanvasDblClick = (o, r) => {
   useEffect(() => {
     a ? c == null || c.documentElement.classList.add("dark") : c == null || c.documentElement.classList.remove("dark");
   }, [a, c]);
-  const h = useRegisteredFonts();
+  const f = useRegisteredFonts();
   useEffect(() => {
     !p || !p.tailwind || (p.tailwind.config = {
       darkMode: "class",
@@ -3225,10 +3225,10 @@ const useHandleCanvasDblClick = (o, r) => {
   }, [i, m]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    f && (f.textContent = `${map(l, ({ id: v }) => `[data-style-id="${v}"]`).join(",")}{
+    h && (h.textContent = `${map(l, ({ id: v }) => `[data-style-id="${v}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
-  }, [l, f]), useEffect(() => {
+  }, [l, h]), useEffect(() => {
     c.querySelector("#drop-target-block").innerHTML = d ? `[data-block-id="${d}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [d, c]);
   const x = useMemo(() => {
@@ -3236,8 +3236,8 @@ const useHandleCanvasDblClick = (o, r) => {
       heading: get(o, "fontFamily.heading"),
       body: get(o, "fontFamily.body")
     };
-    return h.filter((A) => A.family === v || A.family === w);
-  }, [o == null ? void 0 : o.fontFamily, h]), y = useMemo(() => getThemeFontsLinkMarkup(filter(x, (v) => has(v, "url"))), [x]), b = useMemo(
+    return f.filter((A) => A.family === v || A.family === w);
+  }, [o == null ? void 0 : o.fontFamily, f]), y = useMemo(() => getThemeFontsLinkMarkup(filter(x, (v) => has(v, "url"))), [x]), b = useMemo(
     () => getThemeCustomFontFace(filter(x, (v) => has(v, "src"))),
     [x]
   );
@@ -3281,9 +3281,9 @@ const useHandleCanvasDblClick = (o, r) => {
   blockAtom: o,
   children: r
 }) => {
-  const [n] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(n._type), [n._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), d = useBlockRuntimeProps(), c = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), { index: f, key: m } = useContext(RepeaterContext), h = useMemo(
-    () => u ? applyBinding(applyLanguage(n, l, a), c, { index: f, key: m }) : applyLanguage(n, l, a),
-    [n, l, a, c, u, f, m]
+  const [n] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(n._type), [n._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), d = useBlockRuntimeProps(), c = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), { index: h, key: m } = useContext(RepeaterContext), f = useMemo(
+    () => u ? applyBinding(applyLanguage(n, l, a), c, { index: h, key: m }) : applyLanguage(n, l, a),
+    [n, l, a, c, u, h, m]
   ), x = useMemo(() => getBlockTagAttributes(n), [n, getBlockTagAttributes]), y = useMemo(
     () => d(n._id, getBlockRuntimeProps(n._type)),
     [n._id, n._type, d, getBlockRuntimeProps]
@@ -3295,7 +3295,7 @@ const useHandleCanvasDblClick = (o, r) => {
       },
       inBuilder: !0,
       lang: l || i,
-      ...h,
+      ...f,
       ...x,
       ...y,
       ...b
@@ -3305,7 +3305,7 @@ const useHandleCanvasDblClick = (o, r) => {
       n._type,
       l,
       i,
-      h,
+      f,
       x,
       y,
       b
@@ -3316,9 +3316,9 @@ const useHandleCanvasDblClick = (o, r) => {
     children: r({
       _id: n._id,
       _type: n._type,
-      ...isArray(h.repeaterItems) ? {
-        repeaterItems: applyLimit(h.repeaterItems, n),
-        repeaterItemsBinding: h.repeaterItemsBinding
+      ...isArray(f.repeaterItems) ? {
+        repeaterItems: applyLimit(f.repeaterItems, n),
+        repeaterItemsBinding: f.repeaterItemsBinding
       } : {},
       ...n.partialBlockId ? { partialBlockId: n.partialBlockId } : "",
       ...n.globalBlock ? { partialBlockId: n.globalBlock } : ""
@@ -3341,7 +3341,7 @@ const useHandleCanvasDblClick = (o, r) => {
   );
   return map(l, (d) => {
     const c = a(d._id);
-    return c ? /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: c, children: ({ _id: p, _type: u, partialBlockId: g, repeaterItems: f, repeaterItemsBinding: m }) => u === "Repeater" ? isArray(f) && f.map((h, x) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: x, key: m }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: d._id }) })) : u === "GlobalBlock" || u === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: g }) }) : i(p) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: d._id }) : null }, d._id) : null;
+    return c ? /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: c, children: ({ _id: p, _type: u, partialBlockId: g, repeaterItems: h, repeaterItemsBinding: m }) => u === "Repeater" ? isArray(h) && h.map((f, x) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: x, key: m }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: d._id }) })) : u === "GlobalBlock" || u === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: g }) }) : i(p) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: d._id }) : null }, d._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3355,10 +3355,10 @@ const useHandleCanvasDblClick = (o, r) => {
     if (c < r) {
       const u = parseFloat((c / r).toFixed(2).toString());
       let g = {};
-      const f = p * u, m = c * u;
+      const h = p * u, m = c * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - f) / f * 100 + "%",
+        height: 100 + (p - h) / h * 100 + "%",
         width: 100 + (c - m) / m * 100 + "%"
       }), i({
         position: "relative",
@@ -3376,7 +3376,7 @@ const useHandleCanvasDblClick = (o, r) => {
     d();
   }, [r, o, n, d]), l;
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasDisplayWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), d = useRef(null), [c, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [g, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, y] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), w = (_) => {
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasDisplayWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), d = useRef(null), [c, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [g, h] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [x, y] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), w = (_) => {
     p((S) => ({ ...S, width: _ }));
   };
   useEffect(() => {
@@ -3392,7 +3392,7 @@ const useHandleCanvasDblClick = (o, r) => {
     var _, S;
     if (a != null && a._id && a.type !== "Multiple" && i.current) {
       const B = getElementByDataBlockId(i.current.contentDocument, a._id);
-      B && (A(B) || (S = (_ = i.current) == null ? void 0 : _.contentWindow) == null || S.scrollTo({ top: B.offsetTop, behavior: "smooth" }), f([B]));
+      B && (A(B) || (S = (_ = i.current) == null ? void 0 : _.contentWindow) == null || S.scrollTo({ top: B.offsetTop, behavior: "smooth" }), h([B]));
     }
   }, [a == null ? void 0 : a._id, a == null ? void 0 : a.type]), useEffect(() => {
     if (!isEmpty(x) && i.current) {
@@ -3420,7 +3420,7 @@ const useHandleCanvasDblClick = (o, r) => {
       children: /* @__PURE__ */ jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => h(i.current),
+          contentDidMount: () => f(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${r}px` } : {} },
@@ -3471,22 +3471,22 @@ function NestedPathSelector({ data: o, onSelect: r, dataType: n = "value" }) {
   useEffect(() => {
     a || d([]), p(o);
   }, [a, o]);
-  const u = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", g = React.useCallback(
-    (h) => {
+  const u = (f) => Array.isArray(f) ? "array" : typeof f == "object" && f !== null ? "object" : "value", g = React.useCallback(
+    (f) => {
       const x = (y) => n === "value" ? y === "value" || y === "object" : n === "array" ? y === "array" : y === n;
-      h.type === "object" ? (d((y) => [...y, h.key]), p(h.value)) : x(h.type) && (r([...i, h.key].join("."), n), l(!1));
+      f.type === "object" ? (d((y) => [...y, f.key]), p(f.value)) : x(f.type) && (r([...i, f.key].join("."), n), l(!1));
     },
     [i, r, n]
-  ), f = React.useCallback(() => {
+  ), h = React.useCallback(() => {
     if (i.length > 0) {
-      const h = i.slice(0, -1);
-      d(h), p(h.reduce((x, y) => x[y], o));
+      const f = i.slice(0, -1);
+      d(f), p(f.reduce((x, y) => x[y], o));
     }
-  }, [i, o]), m = React.useMemo(() => Object.entries(c).map(([h, x]) => ({
-    key: h,
+  }, [i, o]), m = React.useMemo(() => Object.entries(c).map(([f, x]) => ({
+    key: f,
     value: x,
     type: u(x)
-  })).filter((h) => n === "value" ? h.type === "value" || h.type === "object" : n === "array" ? h.type === "array" || h.type === "object" : n === "object" ? h.type === "object" : !0), [c, n]);
+  })).filter((f) => n === "value" ? f.type === "value" || f.type === "object" : n === "array" ? f.type === "array" || f.type === "object" : n === "object" ? f.type === "object" : !0), [c, n]);
   return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
     /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
@@ -3507,40 +3507,40 @@ function NestedPathSelector({ data: o, onSelect: r, dataType: n = "value" }) {
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: "No option found." }),
         /* @__PURE__ */ jsxs(CommandGroup, { children: [
-          i.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: f, className: "flex items-center text-sm", children: [
+          i.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: h, className: "flex items-center text-sm", children: [
             /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
             "Back"
           ] }),
-          m.map((h) => /* @__PURE__ */ jsxs(
+          m.map((f) => /* @__PURE__ */ jsxs(
             CommandItem,
             {
-              value: h.key,
+              value: f.key,
               disabled: !1,
-              onSelect: () => g(h),
+              onSelect: () => g(f),
               className: "flex items-center justify-between",
               children: [
                 /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
-                  startsWith(h.key, "#") ? /* @__PURE__ */ jsx(LoopIcon, {}) : null,
-                  startsWith(h.key, "#") ? "Repeater Data" : h.key
+                  startsWith(f.key, "#") ? /* @__PURE__ */ jsx(LoopIcon, {}) : null,
+                  startsWith(f.key, "#") ? "Repeater Data" : f.key
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  n === "object" && h.type === "object" && /* @__PURE__ */ jsx(
+                  n === "object" && f.type === "object" && /* @__PURE__ */ jsx(
                     Button,
                     {
                       size: "sm",
                       variant: "ghost",
                       className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
                       onClick: (x) => {
-                        x.stopPropagation(), r([...i, h.key].join("."), n), l(!1);
+                        x.stopPropagation(), r([...i, f.key].join("."), n), l(!1);
                       },
                       children: "Select"
                     }
                   ),
-                  h.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
+                  f.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
                 ] })
               ]
             },
-            h.key
+            f.key
           ))
         ] })
       ] })
@@ -3559,16 +3559,16 @@ const JSONFormFieldTemplate = ({
   required: p,
   schema: u,
   formData: g,
-  onChange: f
+  onChange: h
 }) => {
-  const { selectedLang: m, fallbackLang: h, languages: x } = useLanguages(), y = isEmpty(x) ? "" : isEmpty(m) ? h : m, b = get(LANGUAGES, y, y), v = usePageExternalData(), w = useSelectedBlock(), A = useRegisteredChaiBlocks(), E = get(A, [w == null ? void 0 : w._type, "i18nProps"], []) || [], [_, S] = useState(null), B = useSelectedBlockHierarchy(), N = useMemo(() => B.length === 1 ? "" : `#${get(
+  const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), y = isEmpty(x) ? "" : isEmpty(m) ? f : m, b = get(LANGUAGES, y, y), v = usePageExternalData(), w = useSelectedBlock(), A = useRegisteredChaiBlocks(), E = get(A, [w == null ? void 0 : w._type, "i18nProps"], []) || [], [_, S] = useState(null), B = useSelectedBlockHierarchy(), N = useMemo(() => B.length === 1 ? "" : `#${get(
     B.find((L) => L._type === "Repeater"),
     "repeaterItems",
     ""
   ).replace(/\{\{(.*)\}\}/g, "$1")}`, [B]), C = useMemo(() => first(get(v, N.replace("#", ""), [])), [N, v]), k = useCallback(
     (I, P) => {
       if (I = isEmpty(N) ? I : I.replace(`${N}.`, "$index."), P === "array" || P === "object") {
-        f(`{{${I}}}`, {}, o);
+        h(`{{${I}}}`, {}, o);
         return;
       }
       const L = (D) => /[.,!?;:]/.test(D), O = (D, M, H) => {
@@ -3597,21 +3597,21 @@ const JSONFormFieldTemplate = ({
             let q = "";
             G && G !== " " && !L(G) && (q = " "), D.chain().insertContent(Y + M + q).run();
           }
-          setTimeout(() => f(D.getHTML(), {}, o), 100);
+          setTimeout(() => h(D.getHTML(), {}, o), 100);
           return;
         }
       } else {
         const D = $, M = D.selectionStart || 0, H = D.value || "", F = D.selectionEnd || M;
         if (F > M) {
           const G = `{{${I}}}`, { text: Y } = O(H, M, G), q = H.slice(0, M) + Y + H.slice(F);
-          f(q, {}, o);
+          h(q, {}, o);
           return;
         }
         const U = `{{${I}}}`, { text: V } = O(H, M, U), K = H.slice(0, M) + V + H.slice(M);
-        f(K, {}, o);
+        h(K, {}, o);
       }
     },
-    [o, f, g, w == null ? void 0 : w._id, N]
+    [o, h, g, w == null ? void 0 : w._id, N]
   );
   if (c)
     return null;
@@ -3729,8 +3729,8 @@ const JSONFormFieldTemplate = ({
     /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: a("Paste SVG code to use as an icon") })
   ] });
 }, DefaultMediaManager = ({ close: o, onSelect: r, mode: n = "image" }) => {
-  const [a, l] = useState(""), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState(null), f = async (h) => {
-    if (!h.trim()) {
+  const [a, l] = useState(""), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState(null), h = async (f) => {
+    if (!f.trim()) {
       p(!1), g("Please enter a URL");
       return;
     }
@@ -3754,8 +3754,8 @@ const JSONFormFieldTemplate = ({
         {
           placeholder: m(`Enter ${n} URL`),
           value: a,
-          onChange: (h) => l(h.target.value),
-          onBlur: () => f(a)
+          onChange: (f) => l(f.target.value),
+          onKeyUp: () => h(a)
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -3763,7 +3763,7 @@ const JSONFormFieldTemplate = ({
         /* @__PURE__ */ jsx(
           Button,
           {
-            onClick: () => r({ url: a, width: 600, height: 400, description: "This is image description" }),
+            onClick: () => r({ id: "dam-id", url: a, width: 600, height: 400, description: "This is image description" }),
             disabled: !c || i,
             children: m("Insert")
           }
@@ -3776,37 +3776,56 @@ const JSONFormFieldTemplate = ({
 }, registerChaiMediaManager = (o) => {
   MEDIA_MANAGER.component = o;
 }, useMediaManagerComponent = () => useMemo(() => MEDIA_MANAGER.component, []), MediaManagerModal = ({
-  children: o,
-  onSelect: r,
-  mode: n = "image"
+  assetId: o,
+  children: r,
+  onSelect: n,
+  mode: a = "image"
 }) => {
-  const [a, l] = useState(!1), i = useMediaManagerComponent();
-  return /* @__PURE__ */ jsxs(Dialog, { open: a, onOpenChange: (c) => l(c), children: [
-    /* @__PURE__ */ jsx(DialogTrigger, { asChild: !0, children: o }),
-    /* @__PURE__ */ jsx(DialogContent, { className: "flex max-h-[90vh] max-w-7xl border-border md:w-fit", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: i ? /* @__PURE__ */ jsx(i, { close: () => l(!1), onSelect: (...c) => {
-      r.call(void 0, ...c), l(!1);
-    }, mode: n }) : null }) })
+  const [l, i] = useState(!1), d = useMediaManagerComponent();
+  return /* @__PURE__ */ jsxs(Dialog, { open: l, onOpenChange: (p) => i(p), children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: !0, children: r }),
+    /* @__PURE__ */ jsx(DialogContent, { className: "flex max-h-[90vh] max-w-7xl border-border md:w-fit", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: d ? /* @__PURE__ */ jsx(d, { close: () => i(!1), onSelect: (...p) => {
+      n.call(void 0, ...p), i(!1);
+    }, mode: a, assetId: o }) : null }) })
   ] });
 };
 MediaManagerModal.displayName = "MediaManagerModal";
 const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
-  const { t: l } = useTranslation(), i = useSelectedBlock(), d = useUpdateBlocksProps(), c = (p) => {
-    const u = isArray(p) ? first(p) : p;
-    if (u) {
-      r(u == null ? void 0 : u.url);
-      const g = u == null ? void 0 : u.width, f = u == null ? void 0 : u.height;
-      g && f && (i != null && i._id) && d([i._id], {
-        width: g,
-        height: f,
-        ...u.description && { alt: u.description }
-      });
+  const { t: l } = useTranslation(), i = useSelectedBlock(), d = useUpdateBlocksProps(), c = (g) => {
+    const h = isArray(g) ? first(g) : g;
+    if (h) {
+      r(h == null ? void 0 : h.url);
+      const m = h == null ? void 0 : h.width, f = h == null ? void 0 : h.height;
+      if (i != null && i._id) {
+        const x = {
+          ...m && { width: m },
+          ...f && { height: f },
+          ...h.description && { alt: h.description },
+          ...h.id && { assetId: h.id }
+        };
+        if (isEmpty(x)) return;
+        d([i._id], x);
+      }
     }
-  };
+  }, p = useCallback(() => {
+    r("https://placehold.co/400"), i != null && i._id && d([i._id], { assetId: "" });
+  }, [r, i == null ? void 0 : i._id, d]), u = get(i, "assetId", "");
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-x-3", children: [
-    o ? /* @__PURE__ */ jsx("img", { src: o, className: "h-20 w-20 overflow-hidden rounded-md border border-border object-cover", alt: "" }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: c, mode: "image", children: /* @__PURE__ */ jsx("div", { className: "h-20 w-20 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
+    o ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("img", { src: o, className: "h-20 w-20 overflow-hidden rounded-md border border-border object-cover", alt: "" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: p,
+          className: "absolute -right-2 -top-2 rounded-full bg-destructive p-1 text-destructive-foreground hover:bg-destructive/90",
+          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: c, mode: "image", assetId: u, children: /* @__PURE__ */ jsx("div", { className: "h-20 w-20 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex w-3/5 flex-col", children: [
       /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: c, children: /* @__PURE__ */ jsx("small", { className: "h-6 cursor-pointer rounded-md bg-secondary px-2 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: o || !isEmpty(o) ? l("Replace image") : l("Choose image") }) }),
+        /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: c, assetId: u, children: /* @__PURE__ */ jsx("small", { className: "h-6 cursor-pointer rounded-md bg-secondary px-2 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: o || !isEmpty(o) ? l("Replace image") : l("Choose image") }) }),
         /* @__PURE__ */ jsx("small", { className: "-pl-4 pt-2 text-center text-xs text-secondary-foreground", children: "OR" })
       ] }),
       /* @__PURE__ */ jsx(
@@ -3820,8 +3839,8 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
           className: "text-xs",
           placeholder: l("Enter image URL"),
           value: o,
-          onBlur: ({ target: { value: p } }) => a(n, p),
-          onChange: (p) => r(p.target.value)
+          onBlur: ({ target: { value: g } }) => a(n, g),
+          onChange: (g) => r(g.target.value)
         }
       )
     ] })
@@ -3832,7 +3851,7 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   onChange: n
 }) => {
   var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [y, b] = useState(-1), v = useRef(null), w = (N = r == null ? void 0 : r.find((C) => C.key === u)) == null ? void 0 : N.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), v = useRef(null), w = (N = r == null ? void 0 : r.find((C) => C.key === u)) == null ? void 0 : N.name;
   useEffect(() => {
     if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const C = split(o, ":"), k = get(C, 1, "page") || "page";
@@ -3859,14 +3878,14 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   }, _ = (C) => {
     switch (C.key) {
       case "ArrowDown":
-        C.preventDefault(), b((k) => k < h.length - 1 ? k + 1 : k);
+        C.preventDefault(), b((k) => k < f.length - 1 ? k + 1 : k);
         break;
       case "ArrowUp":
         C.preventDefault(), b((k) => k > 0 ? k - 1 : k);
         break;
       case "Enter":
-        if (C.preventDefault(), h.length === 0) return;
-        y >= 0 && E(h[y]);
+        if (C.preventDefault(), f.length === 0) return;
+        y >= 0 && E(f[y]);
         break;
       case "Escape":
         C.preventDefault(), S();
@@ -3891,24 +3910,24 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
         "input",
         {
           type: "text",
-          value: f,
+          value: h,
           onChange: (C) => B(C.target.value),
           onKeyDown: _,
           placeholder: a(`Search ${w ?? ""}`),
           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: f && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(h) || c && isEmpty(h)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(f) || c && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : c && isEmpty(h) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : c && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      f,
+      h,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(h == null ? void 0 : h.slice(0, 20), (C, k) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(f == null ? void 0 : f.slice(0, 20), (C, k) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => E(C),
@@ -4147,14 +4166,14 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   const d = useRef(null), c = useRef(a || ""), p = usePageExternalData();
   useEffect(() => {
     if (o) {
-      const f = document.createElement("style");
-      return f.id = "rte-modal-styles", f.innerHTML = `
+      const h = document.createElement("style");
+      return h.id = "rte-modal-styles", h.innerHTML = `
         /* Ensure the NestedPathSelector popover appears above the dialog */
         .rte-path-selector + [data-radix-popper-content-wrapper],
         [data-radix-popper-content-wrapper] {
           z-index: 9999 !important;
         }
-      `, document.head.appendChild(f), () => {
+      `, document.head.appendChild(h), () => {
         const m = document.getElementById("rte-modal-styles");
         m && m.remove();
       };
@@ -4177,12 +4196,12 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       Underline
     ],
     content: a || "",
-    onUpdate: ({ editor: f }) => {
-      const m = f.getHTML();
+    onUpdate: ({ editor: h }) => {
+      const m = h.getHTML();
       l(m);
     },
-    onBlur: ({ editor: f }) => {
-      const m = f.getHTML();
+    onBlur: ({ editor: h }) => {
+      const m = h.getHTML();
       i(n, m);
     },
     editorProps: {
@@ -4198,12 +4217,12 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   }, [o, u]), useEffect(() => {
     d.current && u && (d.current.__chaiRTE = u);
   }, [u, o]);
-  const g = (f) => {
+  const g = (h) => {
     if (!u) return;
-    const m = `{{${f}}}`;
+    const m = `{{${h}}}`;
     u.commands.focus();
-    const { from: h, to: x } = u.state.selection;
-    if (h !== x)
+    const { from: f, to: x } = u.state.selection;
+    if (f !== x)
       u.chain().deleteSelection().insertContent(m).run();
     else {
       const { state: b } = u, v = b.selection.from, w = b.doc.textBetween(Math.max(0, v - 1), v), A = b.doc.textBetween(v, Math.min(v + 1, b.doc.content.size));
@@ -4213,7 +4232,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       A && A !== " " && !/[.,!?;:]/.test(A) && (_ = " "), u.chain().insertContent(E + m + _).run();
     }
   };
-  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (f) => !f && r(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (h) => !h && r(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
     /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center justify-between pr-8", children: [
       /* @__PURE__ */ jsx("span", { children: "Rich Text Editor" }),
       p && Object.keys(p).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -4245,12 +4264,12 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       Underline
     ],
     content: n || "",
-    onUpdate: ({ editor: h }) => {
-      const x = h.getHTML();
+    onUpdate: ({ editor: f }) => {
+      const x = f.getHTML();
       a(x), d || u(x);
     },
-    onBlur: ({ editor: h }) => {
-      const x = h.getHTML();
+    onBlur: ({ editor: f }) => {
+      const x = f.getHTML();
       l(o, x);
     },
     editorProps: {
@@ -4264,8 +4283,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   }, [g]), useEffect(() => {
     u(n || "");
   }, [n]);
-  const f = (h) => {
-    a(h);
+  const h = (f) => {
+    a(f);
   }, m = () => {
     c(!1), g && g.commands.setContent(p);
   };
@@ -4281,7 +4300,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         onClose: m,
         id: o,
         value: p,
-        onChange: f,
+        onChange: h,
         onBlur: l
       }
     )
@@ -4297,7 +4316,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   }, [a]), useEffect(() => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && r({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
-  const f = () => {
+  const h = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
       const y = (x + 1) % u.length, b = get(u, [y, "_id"]);
@@ -4311,7 +4330,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       if (!b) return;
       r({ ...o, currentSlide: b }), d([b]);
     }
-  }, h = () => {
+  }, f = () => {
     const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
@@ -4329,11 +4348,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsx("button", { onClick: f, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: h,
+          onClick: f,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircle, { className: "h-3 w-3 stroke-[2]" }),
@@ -4407,7 +4426,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   const n = get(o, "srcsets", []) || [], a = (d, c) => {
     const p = d.target.name, u = d.target.value;
     r({
-      srcsets: map(n, (g, f) => f === c ? { ...g, [p]: u } : g)
+      srcsets: map(n, (g, h) => h === c ? { ...g, [p]: u } : g)
     });
   }, l = () => {
     r({ srcsets: [...n, {}] });
@@ -4490,8 +4509,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: r, uiSchema: n, formData: a, onChange: l }) => {
   const { selectedLang: i } = useLanguages(), d = useBlockSettingComponents("widget"), c = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), u = useThrottledCallback(
-    async ({ formData: g }, f) => {
-      l({ formData: g }, f);
+    async ({ formData: g }, h) => {
+      l({ formData: g }, h);
     },
     [l, i],
     400
@@ -4531,9 +4550,9 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       uiSchema: n,
       schema: r,
       formData: a,
-      onChange: ({ formData: g }, f) => {
-        if (!f || o !== (g == null ? void 0 : g._id)) return;
-        const m = take(f.split("."), 2).join(".").replace("root.", "");
+      onChange: ({ formData: g }, h) => {
+        if (!h || o !== (g == null ? void 0 : g._id)) return;
+        const m = take(h.split("."), 2).join(".").replace("root.", "");
         u({ formData: g }, m);
       }
     },
@@ -4546,11 +4565,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [d, c] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: _ }, S, B) => {
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [d, c] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), f = ({ formData: _ }, S, B) => {
     S && (d == null ? void 0 : d._id) === r._id && a([r._id], { [S]: get(_, S) }, B);
   }, x = useCallback(
     debounce(({ formData: _ }, S, B) => {
-      h({ formData: _ }, S, B), c(_);
+      f({ formData: _ }, S, B), c(_);
     }, 1500),
     [r == null ? void 0 : r._id, o]
   ), y = ({ formData: _ }, S) => {
@@ -4787,7 +4806,7 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: d, classPrefix: c, cssProperty: p, units: u, negative: g } = o, [f, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [y, b] = useState(""), [v, w] = useState(!1), [A, E] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: d, classPrefix: c, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [v, w] = useState(!1), [A, E] = useState(!1);
   useEffect(() => {
     const { value: C, unit: k } = getClassValueAndUnit(i);
     if (k === "") {
@@ -4803,7 +4822,7 @@ const BlockStylingProps = () => {
         x(!0);
         return;
       }
-      const j = get(k, "unit") !== "" ? get(k, "unit") : f;
+      const j = get(k, "unit") !== "" ? get(k, "unit") : h;
       if (j === "auto" || j === "none") {
         _(`${c}${j}`);
         return;
@@ -4813,7 +4832,7 @@ const BlockStylingProps = () => {
       const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${c}[${get(k, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       C ? S(I) : _(I);
     },
-    [_, S, a, f, c, u]
+    [_, S, a, h, c, u]
   ), N = useCallback(
     (C) => {
       const k = getUserInputValues(`${a}`, u);
@@ -4832,7 +4851,7 @@ const BlockStylingProps = () => {
     },
     [_, a, c, u]
   );
-  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: f === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -4847,10 +4866,10 @@ const BlockStylingProps = () => {
     ] })
   ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(f) !== -1 ? null : /* @__PURE__ */ jsx(
+      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
-          readOnly: f === "class",
+          readOnly: h === "class",
           onKeyPress: (C) => {
             C.key === "Enter" && B();
           },
@@ -4861,7 +4880,7 @@ const BlockStylingProps = () => {
             const k = parseInt$1(C.target.value);
             let j = isNaN$1(k) ? 0 : k;
             C.keyCode === 38 && (j += 1), C.keyCode === 40 && (j -= 1);
-            const T = `${j}`, P = `${T.startsWith("-") ? "-" : ""}${c}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
+            const T = `${j}`, P = `${T.startsWith("-") ? "-" : ""}${c}[${T.replace("-", "")}${h === "-" ? "" : h}]`;
             S(P);
           },
           onKeyUp: (C) => {
@@ -4878,7 +4897,7 @@ const BlockStylingProps = () => {
           value: v ? y : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            h ? "border-red-500 text-red-500" : "border-foreground/20"
+            f ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -4890,7 +4909,7 @@ const BlockStylingProps = () => {
             onClick: () => n(!r),
             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: f }),
+              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
               u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -4899,7 +4918,7 @@ const BlockStylingProps = () => {
           UnitSelection,
           {
             units: u,
-            current: f,
+            current: h,
             onSelect: (C) => {
               n(!1), m(C), N(C);
             }
@@ -4907,25 +4926,25 @@ const BlockStylingProps = () => {
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(f) !== -1 || v ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(h) !== -1 || v ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => w(!0),
         onDragEnd: (C) => {
           if (b(() => ""), w(!1), isEmpty(C))
             return;
-          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${c}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
+          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${c}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
           _(T);
         },
         onDrag: (C) => {
           if (isEmpty(C))
             return;
           b(C);
-          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${c}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
+          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${c}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
           S(T);
         },
         currentValue: a,
-        unit: f,
+        unit: h,
         negative: g,
         cssProperty: p
       }
@@ -4985,7 +5004,7 @@ const COLOR_PROP = {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: r }) => {
-  const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, d] = useState([]), [c, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), f = get(u, "2", ""), m = useCallback(
+  const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, d] = useState([]), [c, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), h = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
     (y) => {
       ["current", "inherit", "transparent", "black", "white"].includes(y) ? (d([]), p({ color: y })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: y, shade: b.shade ? b.shade : "500" })));
@@ -4997,7 +5016,7 @@ const COLOR_PROP = {
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const h = useCallback(
+  const f = useCallback(
     // eslint-disable-next-line no-shadow
     (y) => {
       p({ color: g, shade: y });
@@ -5051,7 +5070,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: f, disabled: !g || !l, onChange: h, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: h, disabled: !g || !l, onChange: f, options: i }) })
   ] });
 }, EDITOR_ICONS = {
   "not-italic": () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
@@ -5385,7 +5404,7 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: d, negative: c = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), f = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(f, "fullCls", ""), [f]), b = useCallback(
+  }, units: d, negative: c = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
     (S, B = !0) => {
       const N = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (N.mq = "xs");
@@ -5394,11 +5413,11 @@ const COLOR_PROP = {
     },
     [x, p, g, u, l, m]
   ), v = useCallback(() => {
-    h(x, [y], !0);
-  }, [x, y, h]), w = useMemo(() => canChangeClass(f, g), [f, g]);
+    f(x, [y], !0);
+  }, [x, y, f]), w = useMemo(() => canChangeClass(h, g), [h, g]);
   useEffect(() => {
-    i(w, f);
-  }, [w, i, f]);
+    i(w, h);
+  }, [w, i, h]);
   const [, , A] = useScreenSizeWidth(), E = useCallback(
     (S) => {
       A({
@@ -5411,15 +5430,15 @@ const COLOR_PROP = {
       }[S]);
     },
     [A]
-  ), _ = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: w, canReset: f && _, 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] ${f && !_ ? "text-foreground" : ""}`, children: r(a) }) }),
+  ), _ = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: w, canReset: h && _, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${h && !_ ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         n === "arbitrary" ? /* @__PURE__ */ jsx(
           AdvanceChoices,
           {
-            currentClass: get(f, "cls", ""),
+            currentClass: get(h, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: d || [],
             onChange: b,
@@ -5432,7 +5451,7 @@ const COLOR_PROP = {
         n === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         n === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: _ ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: _ ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -5444,19 +5463,19 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(f, "mq")),
-            p && !f.dark ? "(Light mode)" : ""
+            getBreakpoint(get(h, "mq")),
+            p && !h.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => E(get(f, "mq")),
+              onClick: () => E(get(h, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(f, "mq").toUpperCase()
+                get(h, "mq").toUpperCase()
               ]
             }
           )
@@ -5473,7 +5492,7 @@ const COLOR_PROP = {
   units: i = basicUnits,
   negative: d = !1
 }) => {
-  const { t: c } = useTranslation(), [p, u] = useState(r[0].key), g = useSelectedBlockCurrentClasses(), f = useCallback((m) => map(g, "property").includes(m), [g]);
+  const { t: c } = useTranslation(), [p, u] = useState(r[0].key), g = useSelectedBlockCurrentClasses(), h = useCallback((m) => map(g, "property").includes(m), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5481,18 +5500,18 @@ const COLOR_PROP = {
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: c(o) }),
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: r.map(({ label: m, key: h }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: r.map(({ label: m, key: f }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
               "button",
               {
                 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: () => u(f),
+                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                 children: [
                   React__default.createElement("div", {
-                    className: f(h) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    className: h(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                   }),
-                  React__default.createElement(get(EDITOR_ICONS, h, BoxIcon), { className: "text-inherit w-3 h-3" })
+                  React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
                 ]
               }
             ) }),
@@ -5652,7 +5671,7 @@ const COLOR_PROP = {
   canvas: r = !1,
   tooltip: n = !0
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, d] = useCanvasDisplayWidth(), [c, p] = useSelectedBreakpoints(), u = c, g = p, { t: f } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), h = (b) => {
+  const [a, , l] = useScreenSizeWidth(), [i, d] = useCanvasDisplayWidth(), [c, p] = useSelectedBreakpoints(), u = c, g = p, { t: h } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (b) => {
     u.includes(b) ? u.length > 2 && g(u.filter((v) => v !== b)) : g((v) => [...v, b]);
   }, x = (b) => {
     r || l(b), d(b);
@@ -5685,15 +5704,15 @@ const COLOR_PROP = {
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: f("Screen sizes") }),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: h("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
         map(m, (b) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
             disabled: b.breakpoint === "xs",
-            onCheckedChange: () => h(toUpper(b.breakpoint)),
+            onCheckedChange: () => f(toUpper(b.breakpoint)),
             checked: includes(u, toUpper(b.breakpoint)),
-            children: f(b.title)
+            children: h(b.title)
           },
           b.breakpoint
         ))
@@ -5775,9 +5794,9 @@ const AskAIStyles = ({ blockId: o }) => {
     var m;
     (m = c.current) == null || m.focus();
   }, []);
-  const f = (m) => {
-    const { usage: h } = m || {};
-    !l && h && g(h), p.current = setTimeout(() => g(void 0), 1e4), l || d("");
+  const h = (m) => {
+    const { usage: f } = m || {};
+    !l && f && g(f), p.current = setTimeout(() => g(void 0), 1e4), l || d("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: r("Ask AI") }),
@@ -5791,7 +5810,7 @@ const AskAIStyles = ({ blockId: o }) => {
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
         onKeyDown: (m) => {
-          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), g(void 0), n("styles", o, i, f));
+          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), g(void 0), n("styles", o, i, h));
         }
       }
     ),
@@ -5801,7 +5820,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), g(void 0), n("styles", o, i, f);
+            p.current && clearTimeout(p.current), g(void 0), n("styles", o, i, h);
           },
           variant: "default",
           className: "w-fit",
@@ -5833,9 +5852,9 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var T;
-  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: d } = useTranslation(), [c] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), y = (T = first(c)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((I) => !isEmpty(I)), w = () => {
-    const I = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(f, I, !0), x("");
+  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: d } = useTranslation(), [c] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (T = first(c)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((I) => !isEmpty(I)), w = () => {
+    const I = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(h, I, !0), x("");
   }, [A, E] = useState([]), _ = ({ value: I }) => {
     const P = I.trim().toLowerCase(), L = P.match(/.+:/g);
     let O = [];
@@ -5858,18 +5877,18 @@ function ManualClasses() {
       autoCapitalize: "off",
       spellCheck: !1,
       placeholder: d("Enter classes separated by space"),
-      value: h,
+      value: f,
       onKeyDown: (I) => {
-        I.key === "Enter" && h.trim() !== "" && w();
+        I.key === "Enter" && f.trim() !== "" && w();
       },
       onChange: (I, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [h, d, o]
+    [f, d, o]
   ), k = (I) => {
     debugger;
     const P = r.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(f, [I]), u(f, P, !0), n(""), l(-1);
+    g(h, [I]), u(h, P, !0), n(""), l(-1);
   }, j = () => {
     if (navigator.clipboard === void 0) {
       toast.error(d("Clipboard not supported"));
@@ -5920,7 +5939,7 @@ function ManualClasses() {
           variant: "outline",
           className: "h-6 border-border",
           onClick: w,
-          disabled: h.trim() === "",
+          disabled: f.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
@@ -5951,7 +5970,7 @@ function ManualClasses() {
             r !== I && /* @__PURE__ */ jsx(
               Cross2Icon,
               {
-                onClick: () => g(f, [I], !0),
+                onClick: () => g(h, [I], !0),
                 className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
               }
             )
@@ -6071,13 +6090,13 @@ function BlockStyling() {
     cssProperty: ""
   }), c = useThrottledCallback(
     (u) => {
-      const g = !get(i, "negative", !1), f = get(i, "cssProperty", "");
+      const g = !get(i, "negative", !1), h = get(i, "cssProperty", "");
       let m = parseFloat(i.dragStartValue);
       m = isNaN(m) ? 0 : m;
-      let h = MAPPER[i.dragUnit];
-      (startsWith(f, "scale") || f === "opacity") && (h = 10);
-      let y = (i.dragStartY - u.pageY) / h + m;
-      g && y < 0 && (y = 0), f === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
+      let f = MAPPER[i.dragUnit];
+      (startsWith(h, "scale") || h === "opacity") && (f = 10);
+      let y = (i.dragStartY - u.pageY) / f + m;
+      g && y < 0 && (y = 0), h === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
     },
     [i],
     50
@@ -6118,14 +6137,14 @@ const CoreBlock = ({
   parentId: n,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: d, label: c } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), m = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: d, label: c } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
     if (console.log("addBlockToPage", o), has(o, "blocks")) {
       const y = isFunction(o.blocks) ? o.blocks() : o.blocks;
       u(syncBlocksWithDefaults(y), n || null, a);
     } else
       p(o, n || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, h = useFeature("dnd"), { t: x } = useTranslation();
+  }, f = useFeature("dnd"), { t: x } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
@@ -6135,10 +6154,10 @@ const CoreBlock = ({
         type: "button",
         onDragStart: (y) => {
           y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            g([]), f();
+            g([]), h();
           }, 200);
         },
-        draggable: h ? "true" : "false",
+        draggable: f ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(d || BoxIcon, { className: "w-4 h-4 mx-auto" }),
@@ -6334,7 +6353,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var f, m, h, x, y, b, v, w;
+  var h, m, f, x, y, b, v, w;
   if (n.type === "comment") return [];
   console.log("node ===>", n);
   let a = { _id: generateUUID() };
@@ -6375,9 +6394,9 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((f = l.find((E) => E.key === "href")) == null ? void 0 : f.value) || "",
+      href: ((h = l.find((E) => E.key === "href")) == null ? void 0 : h.value) || "",
       hrefType: ((m = l.find((E) => E.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
-      autoplay: ((h = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : h.value) === "true" ? "true" : "false",
+      autoplay: ((f = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
       maxWidth: ((y = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : y.replace("px", "")) || "",
       backdropColor: ((b = l.find((E) => E.key === "data-overlay")) == null ? void 0 : b.value) || "",
       galleryName: ((v = l.find((E) => E.key === "data-gall")) == null ? void 0 : v.value) || ""
@@ -6516,7 +6535,7 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), d = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), f = get(o, "name", get(o, "label")), m = get(o, "description", ""), h = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (w) => {
+  const [l, i] = useState(!1), d = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (w) => {
     const A = has(w, "styles_attrs.data-page-section");
     return w._type === "Box" && A;
   }, b = useCallback(
@@ -6537,7 +6556,7 @@ const BlockCard = ({
       {
         onClick: l ? () => {
         } : b,
-        draggable: h ? "true" : "false",
+        draggable: f ? "true" : "false",
         onDragStart: async (w) => {
           const A = await d(r, o);
           let E = n;
@@ -6563,35 +6582,35 @@ const BlockCard = ({
             /* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: f }) : /* @__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: f }),
+          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: h }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children: h }),
             m && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: m })
           ] })
         ]
       }
     ) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
-      /* @__PURE__ */ jsx("p", { className: "font-medium", children: f }),
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: h }),
       m && o.preview && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-primary-foreground", children: m })
     ] }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: r }) => {
-  const [n, a] = useSelectedLibrary(), l = useBuilderProp("uiLibraries", []), i = l.find((k) => k.id === n) || first(l), { data: d, isLoading: c, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [f, m] = useState([]), h = useRef(null);
+  const [n, a] = useSelectedLibrary(), l = useBuilderProp("uiLibraries", []), i = l.find((k) => k.id === n) || first(l), { data: d, isLoading: c, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [h, m] = useState([]), f = useRef(null);
   useEffect(() => {
-    d && d.length > 0 && (h.current = new Fuse(d, {
+    d && d.length > 0 && (f.current = new Fuse(d, {
       keys: ["name", "label", "description", "group"],
       threshold: 0.4,
       ignoreLocation: !0
     }));
   }, [d]), useEffect(() => {
-    if (!u.trim() || !h.current) {
+    if (!u.trim() || !f.current) {
       m([]);
       return;
     }
-    const k = h.current.search(u).map((j) => j.item);
+    const k = f.current.search(u).map((j) => j.item);
     m(k);
   }, [u]);
-  const x = u.trim() && !isEmpty(f) ? f : d, y = groupBy(x, "group"), [b, v] = useState(null);
+  const x = u.trim() && !isEmpty(h) ? h : d, y = groupBy(x, "group"), [b, v] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(y))) {
       v(null);
@@ -6746,10 +6765,10 @@ const BlockCard = ({
             // Store the original ID as partialBlockId
             _name: b.name
           };
-        }), h = uniq(map(m, "group"));
+        }), f = uniq(map(m, "group"));
         p({
           blocks: m,
-          groups: h,
+          groups: f,
           isLoading: !1,
           error: null
         }), g(!0);
@@ -6768,7 +6787,7 @@ const BlockCard = ({
     c.blocks,
     d
   ]);
-  const f = () => {
+  const h = () => {
     p((m) => ({ ...m, isLoading: !0, error: null })), g(!1), i();
   };
   return c.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : c.error || c.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
@@ -6776,7 +6795,7 @@ const BlockCard = ({
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: f,
+        onClick: h,
         className: "rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90",
         children: "Refresh"
       }
@@ -6795,7 +6814,7 @@ const BlockCard = ({
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...r });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: r, parentId: n, position: a, gridCols: l = "grid-cols-4" }) => {
   var C;
-  const { t: i } = useTranslation(), [d] = useBlocksStore(), [c, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (C = find(d, (k) => k._id === n)) == null ? void 0 : C._type, [m, h] = useState("all"), [x, y] = useState(null), b = useRef(null);
+  const { t: i } = useTranslation(), [d] = useBlocksStore(), [c, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (C = find(d, (k) => k._id === n)) == null ? void 0 : C._type, [m, f] = useState("all"), [x, y] = useState(null), b = useRef(null);
   useEffect(() => {
     const k = setTimeout(() => {
       var j;
@@ -6803,9 +6822,9 @@ const BlockCard = ({
     }, 0);
     return () => clearTimeout(k);
   }, [g]), useEffect(() => {
-    c && (h("all"), y(null));
+    c && (f("all"), y(null));
   }, [c]), useEffect(() => (b.current = debounce((k) => {
-    h(k);
+    f(k);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
@@ -6814,7 +6833,7 @@ const BlockCard = ({
   }, []), w = useCallback(() => {
     y(null), b.current && b.current.cancel();
   }, []), A = useCallback((k) => {
-    b.current && b.current.cancel(), h(k), y(null);
+    b.current && b.current.cancel(), f(k), y(null);
   }, []), E = useMemo(
     () => c ? values(r).filter(
       (k) => {
@@ -6885,7 +6904,7 @@ const BlockCard = ({
             parentId: n,
             position: a,
             block: j,
-            disabled: !canAcceptChildBlock(f, j.type) || !canBeNestedInside(f, j.type)
+            disabled: !canAcceptChildBlock(h, j.type) || !canBeNestedInside(h, j.type)
           },
           j.type
         )) })
@@ -6898,13 +6917,13 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const { t: l } = useTranslation(), [i, d] = useAtom$1(addBlockTabAtom), [, c] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission: f } = usePermissions();
+  const { t: l } = useTranslation(), [i, d] = useAtom$1(addBlockTabAtom), [, c] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission: h } = usePermissions();
   useEffect(() => {
     i === "partials" && !g && d("library");
   }, [i, g, d]);
   const m = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []), h = useChaiAddBlockTabs(), x = p && f(PERMISSIONS.IMPORT_HTML), b = useBuilderProp("uiLibraries", []).length > 0;
+  }, []), f = useChaiAddBlockTabs(), x = p && h(PERMISSIONS.IMPORT_HTML), b = useBuilderProp("uiLibraries", []).length > 0;
   return useEffect(() => {
     i === "library" && !b && d("core");
   }, [i, b, d]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
@@ -6926,13 +6945,13 @@ const BlockCard = ({
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             g && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
             x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(h, (v) => /* @__PURE__ */ jsx(TabsTrigger, { value: v.id, children: React__default.createElement(v.tab) }, `tab-add-block-${v.id}`))
+            map(f, (v) => /* @__PURE__ */ jsx(TabsTrigger, { value: v.id, children: React__default.createElement(v.tab) }, `tab-add-block-${v.id}`))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: n, position: a }) }) }) }),
           b && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: n, position: a }) }),
           g && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: n, position: a }) }) }) }),
           x ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: n, position: a }) }) : null,
-          map(h, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close: m, parentId: n, position: a }) }, `panel-add-block-${v.id}`))
+          map(f, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close: m, parentId: n, position: a }) }, `panel-add-block-${v.id}`))
         ]
       }
     )
@@ -7054,7 +7073,7 @@ const registerChaiSaveToLibrary = (o) => {
 }, CANNOT_COPY_BLOCKS = !navigator.clipboard, CopyPasteBlocks = () => {
   const [o] = useBlocksStore(), [r] = useSelectedBlockIds(), { pasteBlocks: n } = usePasteBlocks(), [, a, l] = useCopyBlocks(), { t: i } = useTranslation(), d = useSelectedBlock(), c = useCallback(() => {
     const p = r.map((u) => {
-      const g = o.find((f) => f._id === u);
+      const g = o.find((h) => h._id === u);
       return {
         id: u,
         data: g
@@ -7239,7 +7258,7 @@ const Input = ({ node: o }) => {
   var P;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: f } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: w } = o, A = (L) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: w } = o, A = (L) => {
     L.stopPropagation(), !l.includes(m) && o.toggle();
   }, E = (L) => {
     L.isInternal && (p = L.isOpen, L.isOpen && L.close());
@@ -7287,12 +7306,12 @@ const Input = ({ node: o }) => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const I = useMemo(() => has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, c]);
+  const I = useMemo(() => has(f, "_libBlockId") && !isEmpty(f._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [f, c]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseEnter: () => g(m),
-      onMouseLeave: () => f(),
+      onMouseLeave: () => h(),
       onClick: k,
       style: r,
       "data-node-id": m,
@@ -7327,7 +7346,7 @@ const Input = ({ node: o }) => {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 outline-none",
               x ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
-              y && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
+              y && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(m) ? "opacity-50" : "",
@@ -7351,7 +7370,7 @@ const Input = ({ node: o }) => {
                       I && x && "text-primary/80"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
+                      /* @__PURE__ */ jsx(TypeIcon, { type: f == null ? void 0 : f._type }),
                       v ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
                         "div",
                         {
@@ -7359,7 +7378,7 @@ const Input = ({ node: o }) => {
                           onDoubleClick: (L) => {
                             L.stopPropagation(), o.edit(), o.deselect();
                           },
-                          children: /* @__PURE__ */ jsx("span", { children: (h == null ? void 0 : h._name) || (h == null ? void 0 : h._type.split("/").pop()) })
+                          children: /* @__PURE__ */ jsx("span", { children: (f == null ? void 0 : f._name) || (f == null ? void 0 : f._type.split("/").pop()) })
                         }
                       )
                     ]
@@ -7367,7 +7386,7 @@ const Input = ({ node: o }) => {
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                canAddChildBlock(h == null ? void 0 : h._type) && !l.includes(m) && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(f == null ? void 0 : f._type) && !l.includes(m) && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -7658,7 +7677,7 @@ const Input = ({ node: o }) => {
     )
   ] });
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: d } = usePermissions(), [c, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), f = (v) => {
+  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: d } = usePermissions(), [c, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), h = (v) => {
     a(v);
   }, m = () => {
     const v = l.find((w) => Object.keys(w)[0] === n);
@@ -7667,7 +7686,7 @@ const Input = ({ node: o }) => {
       w && typeof w == "object" && "fontFamily" in w && "borderRadius" in w && "colors" in w ? p(w) : console.error("Invalid preset structure:", w);
     } else
       console.error("Preset not found:", n);
-  }, h = useDebouncedCallback(
+  }, f = useDebouncedCallback(
     (v, w) => {
       p(() => ({
         ...c,
@@ -7725,7 +7744,7 @@ const Input = ({ node: o }) => {
             "select",
             {
               value: n,
-              onChange: (v) => f(v.target.value),
+              onChange: (v) => h(v.target.value),
               className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
               children: [
                 /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
@@ -7751,7 +7770,7 @@ const Input = ({ node: o }) => {
           {
             label: v,
             value: c.fontFamily[v.replace(/font-/g, "")] || w[Object.keys(w)[0]],
-            onChange: (A) => h(v, A)
+            onChange: (A) => f(v, A)
           },
           v
         )) }),
@@ -8234,12 +8253,12 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, d] = useState(""), [c, p] = useState(!0), [u, g] = useState(), f = useRef(null), m = useRef(null);
+  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, d] = useState(""), [c, p] = useState(!0), [u, g] = useState(), h = useRef(null), m = useRef(null);
   useEffect(() => {
     var x;
-    (x = f.current) == null || x.focus();
+    (x = h.current) == null || x.focus();
   }, []);
-  const h = (x) => {
+  const f = (x) => {
     const { usage: y } = x || {};
     !l && y && g(y), m.current = setTimeout(() => g(void 0), 1e4), l || d("");
   };
@@ -8259,14 +8278,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         Textarea,
         {
-          ref: f,
+          ref: h,
           value: i,
           onChange: (x) => d(x.target.value),
           placeholder: r("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
           onKeyDown: (x) => {
-            x.key === "Enter" && (x.preventDefault(), m.current && clearTimeout(m.current), g(void 0), n("content", o, i, h));
+            x.key === "Enter" && (x.preventDefault(), m.current && clearTimeout(m.current), g(void 0), n("content", o, i, f));
           }
         }
       ),
@@ -8276,7 +8295,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              m.current && clearTimeout(m.current), g(void 0), n("content", o, i, h);
+              m.current && clearTimeout(m.current), g(void 0), n("content", o, i, f);
             },
             variant: "default",
             className: "w-fit",
@@ -8309,7 +8328,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         QuickPrompts,
         {
           onClick: (x) => {
-            m.current && clearTimeout(m.current), g(void 0), n("content", o, x, h);
+            m.current && clearTimeout(m.current), g(void 0), n("content", o, x, f);
           }
         }
       )
@@ -8319,15 +8338,15 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [d, c] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), f = useRef(null);
+  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [d, c] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), h = useRef(null);
   useEffect(() => {
     r && a(r);
   }, [r]);
   const m = async () => {
     try {
-      c(!0), u(null), await i(n), toast.success(o("Updated AI Context")), f.current.click();
-    } catch (h) {
-      u(h);
+      c(!0), u(null), await i(n), toast.success(o("Updated AI Context")), h.current.click();
+    } catch (f) {
+      u(f);
     } finally {
       c(!1);
     }
@@ -8335,25 +8354,25 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsx(
     Accordion,
     {
-      onValueChange: (h) => {
-        g(h !== "");
+      onValueChange: (f) => {
+        g(f !== "");
       },
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { ref: f, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsx(AccordionTrigger, { ref: h, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsx(
             Textarea,
             {
               ref: l,
               value: n,
-              onChange: (h) => a(h.target.value),
+              onChange: (f) => a(f.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (h) => {
-                h.key === "Enter" && (h.preventDefault(), m());
+              onKeyDown: (f) => {
+                f.key === "Enter" && (f.preventDefault(), m());
               }
             }
           ),
@@ -8455,7 +8474,7 @@ function AIChatPanel() {
   }, [o]), useEffect(() => {
     g.current && (g.current.style.height = "auto", g.current.style.height = `${Math.min(g.current.scrollHeight, 120)}px`);
   }, [n]);
-  const f = async () => {
+  const h = async () => {
     if (!n.trim() && !d) return;
     const b = {
       id: Date.now().toString(),
@@ -8473,8 +8492,8 @@ function AIChatPanel() {
       r((w) => [...w, v]), i(!1), c(null);
     }, 1500);
   }, m = (b) => {
-    b.key === "Enter" && !b.shiftKey && (b.preventDefault(), f());
-  }, h = (b) => {
+    b.key === "Enter" && !b.shiftKey && (b.preventDefault(), h());
+  }, f = (b) => {
     var w;
     const v = (w = b.target.files) == null ? void 0 : w[0];
     if (v) {
@@ -8551,7 +8570,7 @@ function AIChatPanel() {
             className: "max-h-[120px] min-h-[40px] resize-none border-0 bg-muted/50 py-2.5 pr-10 focus-visible:ring-1"
           }
         ),
-        /* @__PURE__ */ jsx("input", { type: "file", ref: p, onChange: h, accept: "image/*", className: "hidden" }),
+        /* @__PURE__ */ jsx("input", { type: "file", ref: p, onChange: f, accept: "image/*", className: "hidden" }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -8568,7 +8587,7 @@ function AIChatPanel() {
         {
           size: "sm",
           className: "h-10 px-3",
-          onClick: f,
+          onClick: h,
           disabled: l || !n.trim() && !d,
           children: [
             /* @__PURE__ */ jsx(Send, { className: "mr-1 h-4 w-4" }),
@@ -8683,7 +8702,7 @@ const AddBlocksDialog = () => {
   preloadedAttributes: r = [],
   onAttributesChange: n
 }) {
-  const [a, l] = useState([]), [i, d] = useState(""), [c, p] = useState(""), [u, g] = useState(null), [f, m] = useState(""), h = useRef(null), x = useRef(null), y = usePageExternalData();
+  const [a, l] = useState([]), [i, d] = useState(""), [c, p] = useState(""), [u, g] = useState(null), [h, m] = useState(""), f = useRef(null), x = useRef(null), y = usePageExternalData();
   useEffect(() => {
     l(r);
   }, [r]);
@@ -8752,7 +8771,7 @@ const AddBlocksDialog = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: h,
+                  ref: f,
                   value: i,
                   onChange: (S) => d(S.target.value),
                   placeholder: "Enter Key",
@@ -8784,7 +8803,7 @@ const AddBlocksDialog = () => {
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
-          f && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: f })
+          h && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: h })
         ]
       }
     ),
@@ -8917,9 +8936,9 @@ const RootLayout = () => {
   });
   const p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = (S) => {
     S.preventDefault();
-  }, f = (S) => {
+  }, h = (S) => {
     n(r === S ? null : S);
-  }, m = useSidebarMenuItems(), { t: h } = useTranslation(), x = useMemo(() => [...m, ...p], [m, p]), y = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: r }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
+  }, m = useSidebarMenuItems(), { t: f } = useTranslation(), x = useMemo(() => [...m, ...p], [m, p]), y = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: r }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (r !== null) {
       const S = find(x, { id: r });
@@ -8940,9 +8959,9 @@ const RootLayout = () => {
   }, [r, x]);
   const _ = useCallback(
     (S) => {
-      f(S);
+      h(S);
     },
-    [f]
+    [h]
   );
   return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
@@ -8961,7 +8980,7 @@ const RootLayout = () => {
                   isActive: r === S.id,
                   show: () => _(S.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: h(S.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
               ] }, "button-top-" + B)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: u == null ? void 0 : u.map((S, B) => /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -8971,7 +8990,7 @@ const RootLayout = () => {
                   isActive: r === S.id,
                   show: () => _(S.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: h(S.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
               ] }, "button-bottom-" + B)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -8987,7 +9006,7 @@ const RootLayout = () => {
                     "div",
                     {
                       className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(b, "isInternal", !1) ? "" : "w-64"}`,
-                      children: /* @__PURE__ */ jsx("span", { children: h(get(b, "label", "")) })
+                      children: /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {}) }) })
@@ -9010,11 +9029,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-2", children: d === "ai" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    h("AI Assistant")
+                    f("AI Assistant")
                   ] }) }) : d === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      h("Theme Settings")
+                      f("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
                       Button,
@@ -9034,7 +9053,7 @@ const RootLayout = () => {
             r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => A(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${v}px` }, children: [
               /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
-                /* @__PURE__ */ jsx("span", { children: h(get(b, "label", "")) })
+                /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
               ] }) }),
               /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
                 close: E
@@ -9044,7 +9063,7 @@ const RootLayout = () => {
             r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => A(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${v}px` }, children: [
               /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
-                /* @__PURE__ */ jsx("span", { children: h(get(b, "label", "")) })
+                /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
               ] }) }),
               /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
                 close: E
@@ -9070,7 +9089,7 @@ const RootLayout = () => {
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border p-4 py-2", children: [
                         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-lg font-bold", children: [
                           /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
-                          /* @__PURE__ */ jsx("span", { children: h(get(b, "label", "")) })
+                          /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
                         ] }),
                         /* @__PURE__ */ jsx(Button, { onClick: () => A(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
                       ] }),
@@ -9177,17 +9196,17 @@ const FEATURE_TOGGLES = {
   for (const i of r.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), d = {}, c = (m, ...h) => m.read(...h), p = (m, ...h) => m.write(...h), u = (m, h) => {
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), d = {}, c = (m, ...f) => m.read(...f), p = (m, ...f) => m.write(...f), u = (m, f) => {
   var x;
-  return (x = m.unstable_onInit) == null ? void 0 : x.call(m, h);
-}, g = (m, h) => {
+  return (x = m.unstable_onInit) == null ? void 0 : x.call(m, f);
+}, g = (m, f) => {
   var x;
-  return (x = m.onMount) == null ? void 0 : x.call(m, h);
-}, ...f) => {
-  const m = f[0] || ((B) => {
+  return (x = m.onMount) == null ? void 0 : x.call(m, f);
+}, ...h) => {
+  const m = h[0] || ((B) => {
     let N = o.get(B);
     return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(B, N), u == null || u(B, S)), N;
-  }), h = f[1] || (() => {
+  }), f = h[1] || (() => {
     let B, N;
     const C = (k) => {
       try {
@@ -9206,7 +9225,7 @@ const FEATURE_TOGGLES = {
     } while (a.size || i.size || l.size);
     if (B)
       throw N;
-  }), x = f[2] || (() => {
+  }), x = h[2] || (() => {
     const B = [], N = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
     for (; k.length; ) {
       const j = k[k.length - 1], T = m(j);
@@ -9232,7 +9251,7 @@ const FEATURE_TOGGLES = {
         }
       P && (y(T), w(T)), n.delete(T);
     }
-  }), y = f[3] || ((B) => {
+  }), y = h[3] || ((B) => {
     var N, C;
     const k = m(B);
     if (isAtomStateInitialized(k) && (r.has(B) && n.get(B) !== k.n || Array.from(k.d).every(
@@ -9246,7 +9265,7 @@ const FEATURE_TOGGLES = {
     k.d.clear();
     let j = !0;
     const T = () => {
-      r.has(B) && (w(B), x(), h());
+      r.has(B) && (w(B), x(), f());
     }, I = (R) => {
       var D;
       if (isSelfAtom(B, R)) {
@@ -9276,7 +9295,7 @@ const FEATURE_TOGGLES = {
             try {
               return v(B, ...R);
             } finally {
-              x(), h();
+              x(), f();
             }
         }), L;
       }
@@ -9292,7 +9311,7 @@ const FEATURE_TOGGLES = {
     } finally {
       j = !1, $ !== k.n && n.get(B) === $ && (n.set(B, k.n), a.add(B), (C = d.c) == null || C.call(d, B));
     }
-  }), b = f[4] || ((B) => {
+  }), b = h[4] || ((B) => {
     const N = [B];
     for (; N.length; ) {
       const C = N.pop(), k = m(C);
@@ -9301,7 +9320,7 @@ const FEATURE_TOGGLES = {
         n.set(j, T.n), N.push(j);
       }
     }
-  }), v = f[5] || ((B, ...N) => {
+  }), v = h[5] || ((B, ...N) => {
     let C = !0;
     const k = (T) => returnAtomValue(y(T)), j = (T, ...I) => {
       var P;
@@ -9316,7 +9335,7 @@ const FEATURE_TOGGLES = {
         } else
           return v(T, ...I);
       } finally {
-        C || (x(), h());
+        C || (x(), f());
       }
     };
     try {
@@ -9324,7 +9343,7 @@ const FEATURE_TOGGLES = {
     } finally {
       C = !1;
     }
-  }), w = f[6] || ((B) => {
+  }), w = h[6] || ((B) => {
     var N;
     const C = m(B), k = r.get(B);
     if (k && !isPendingPromise(C.v)) {
@@ -9340,7 +9359,7 @@ const FEATURE_TOGGLES = {
           T == null || T.t.delete(B);
         }
     }
-  }), A = f[7] || ((B) => {
+  }), A = h[7] || ((B) => {
     var N;
     const C = m(B);
     let k = r.get(B);
@@ -9359,7 +9378,7 @@ const FEATURE_TOGGLES = {
             try {
               return v(B, ...P);
             } finally {
-              T || (x(), h());
+              T || (x(), f());
             }
           };
           try {
@@ -9380,7 +9399,7 @@ const FEATURE_TOGGLES = {
       }
     }
     return k;
-  }), E = f[8] || ((B) => {
+  }), E = h[8] || ((B) => {
     var N;
     const C = m(B);
     let k = r.get(B);
@@ -9412,7 +9431,7 @@ const FEATURE_TOGGLES = {
     g,
     // building-block functions
     m,
-    h,
+    f,
     x,
     y,
     b,
@@ -9426,13 +9445,13 @@ const FEATURE_TOGGLES = {
       try {
         return v(B, ...N);
       } finally {
-        x(), h();
+        x(), f();
       }
     },
     sub: (B, N) => {
       const k = A(B).l;
-      return k.add(N), h(), () => {
-        k.delete(N), E(B), h();
+      return k.add(N), f(), () => {
+        k.delete(N), E(B), f();
       };
     }
   };