@chaibuilder/sdk 2.1.8 → 2.2.0

package/dist/core.js

@@ -1,6 +1,6 @@
 var G = Object.defineProperty;
 var K = (o, r, n) => r in o ? G(o, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[r] = n;
-var U = (o, r, n) => K(o, typeof r != "symbol" ? r + "" : r, n);
+var V = (o, r, n) => K(o, typeof r != "symbol" ? r + "" : r, n);
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { Component, Children, useEffect, useCallback, useMemo, useRef, useState, Suspense, createElement, memo, createContext, useContext, useReducer, useDebugValue } from "react";
@@ -10,7 +10,7 @@ import { find, filter, flatten, map, omit, isString, has, includes, without, get
 import { Provider as Provider$1 } from "react-wrap-balancer";
 import { atomWithStorage, splitAtom, useAtomCallback } from "jotai/utils";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as Ve } from "react-i18next";
+import { useTranslation as Ue } from "react-i18next";
 import { g as generateUUID, a as getBreakpointValue, c as cn$1 } from "./Functions-BGzDsf1z.js";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
@@ -18,7 +18,7 @@ import { PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, Plus
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { PlusIcon as PlusIcon$1, ChevronRight, AlertCircle, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, Globe, SaveIcon, PencilIcon, EyeOffIcon, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { PlusIcon as PlusIcon$1, ChevronRight, AlertCircle, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, PencilIcon, EyeOffIcon, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import Link from "@tiptap/extension-link";
@@ -31,7 +31,7 @@ import { twMerge } from "tailwind-merge";
 import Autosuggest from "react-autosuggest";
 import { toast } from "sonner";
 import Fuse from "fuse.js";
-import { d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, a as getChaiThemeCssVariables, c as getThemeFontsLinkMarkup, e as getThemeCustomFontFace } from "./chai-theme-helpers-CVkLfKt7.js";
+import { d as defaultThemeOptions, h as hexToHSL, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, c as getThemeFontsLinkMarkup, e as getThemeCustomFontFace } from "./chai-theme-helpers-FO9vdd-R.js";
 import { S as STYLES_KEY, g as getSplitChaiClasses, R as ROOT_TEMP_KEY } from "./getSplitClasses-DphwgQiE.js";
 import UndoManager from "undo-manager";
 import { parse, stringify } from "himalaya";
@@ -42,10 +42,10 @@ import { ErrorBoundary } from "react-error-boundary";
 import { useHotkeys } from "react-hotkeys-hook";
 import { motion } from "framer-motion";
 import TreeModel from "tree-model";
-import aspectRatio from "@tailwindcss/aspect-ratio";
-import containerQueries from "@tailwindcss/container-queries";
-import forms from "@tailwindcss/forms";
-import typography from "@tailwindcss/typography";
+import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
+import twContainer from "@tailwindcss/container-queries";
+import tailwindForms from "@tailwindcss/forms";
+import tailwindTypography from "@tailwindcss/typography";
 import ReactDOM from "react-dom";
 import { Resizable } from "re-resizable";
 const readOnlyModeAtom = atom(!1);
@@ -103,17 +103,17 @@ const FrameContext = React__default.createContext({ document: doc, window: win }
 class Frame extends Component {
   constructor(n, a) {
     super(n, a);
-    U(this, "setRef", (n) => {
+    V(this, "setRef", (n) => {
       this.nodeRef.current = n;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(n) : a && (a.current = n);
     });
-    U(this, "handleLoad", () => {
+    V(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
     });
     // In certain situations on a cold cache DOMContentLoaded never gets called
     // fallback to an interval to check if that's the case
-    U(this, "loadCheck", () => setInterval(() => {
+    V(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -150,7 +150,7 @@ class Frame extends Component {
     return delete n.head, delete n.initialContent, delete n.mountTarget, delete n.contentDidMount, delete n.contentDidUpdate, delete n.forwardedRef, /* @__PURE__ */ jsx("iframe", { ...n, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
   }
 }
-U(Frame, "defaultProps", {
+V(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -313,8 +313,8 @@ const useSelectedBlocksDisplayChild = () => ({
         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]);
+            return Object.keys(f).forEach((k) => {
+              k.startsWith("content-") && (x[k] = f[k]);
             }), x;
           }
           return h;
@@ -394,8 +394,8 @@ function insertBlocksAtPosition(o, r, n, a) {
       }), l.unshift(m), i = i.map((h) => {
         if (h._id === n) {
           const x = { ...h, content: "" };
-          return Object.keys(x).forEach((y) => {
-            y.startsWith("content-") && (x[y] = "");
+          return Object.keys(x).forEach((k) => {
+            k.startsWith("content-") && (x[k] = "");
           }), x;
         }
         return h;
@@ -702,50 +702,50 @@ const useUndoManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, y, b) => {
-      const v = map(x, (j) => {
-        const w = r.find((I) => I._id === j)._parent || null, B = r.filter((I) => w ? I._parent === w : !I._parent).map((I) => I._id).indexOf(j);
-        return { _id: j, oldParent: w, oldPosition: B };
-      }), S = v.find(({ _id: j }) => j === x[0]);
-      S && S.oldParent === y && S.oldPosition === b || (i(x, y, b), o({
-        undo: () => each(v, ({ _id: j, oldParent: E, oldPosition: w }) => {
-          i([j], E, w);
+    moveBlocks: (x, k, b) => {
+      const S = map(x, (A) => {
+        const C = r.find((L) => L._id === A)._parent || null, _ = r.filter((L) => C ? L._parent === C : !L._parent).map((L) => L._id).indexOf(A);
+        return { _id: A, oldParent: C, oldPosition: _ };
+      }), w = S.find(({ _id: A }) => A === x[0]);
+      w && w.oldParent === k && w.oldPosition === b || (i(x, k, b), o({
+        undo: () => each(S, ({ _id: A, oldParent: E, oldPosition: C }) => {
+          i([A], E, C);
         }),
-        redo: () => i(x, y, b)
+        redo: () => i(x, k, b)
       }));
     },
-    addBlocks: (x, y, b) => {
-      a(x, y, b), o({
+    addBlocks: (x, k, b) => {
+      a(x, k, b), o({
         undo: () => l(map(x, "_id")),
-        redo: () => a(x, y, b)
+        redo: () => a(x, k, b)
       });
     },
     removeBlocks: (x) => {
-      var S;
-      const y = (S = first(x)) == null ? void 0 : S._parent, v = r.filter((j) => y ? j._parent === y : !j._parent).indexOf(first(x));
+      var w;
+      const k = (w = first(x)) == null ? void 0 : w._parent, S = r.filter((A) => k ? A._parent === k : !A._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, y, v),
+        undo: () => a(x, k, S),
         redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (x, y, b) => {
-      let v = [];
+    updateBlocks: (x, k, b) => {
+      let S = [];
       if (b)
-        v = map(x, (S) => ({ _id: S, ...b }));
+        S = map(x, (w) => ({ _id: w, ...b }));
       else {
-        const S = keys(y);
-        v = map(x, (j) => {
-          const E = r.find((A) => A._id === j), w = { _id: j };
-          return each(S, (A) => w[A] = E[A]), w;
+        const w = keys(k);
+        S = map(x, (A) => {
+          const E = r.find((B) => B._id === A), C = { _id: A };
+          return each(w, (B) => C[B] = E[B]), C;
         });
       }
-      c(map(x, (S) => ({ _id: S, ...y }))), o({
-        undo: () => c(v),
-        redo: () => c(map(x, (S) => ({ _id: S, ...y })))
+      c(map(x, (w) => ({ _id: w, ...k }))), o({
+        undo: () => c(S),
+        redo: () => c(map(x, (w) => ({ _id: w, ...k })))
       });
     },
-    updateBlocksRuntime: (x, y) => {
-      c(map(x, (b) => ({ _id: b, ...y })));
+    updateBlocksRuntime: (x, k) => {
+      c(map(x, (b) => ({ _id: b, ...k })));
     },
     setNewBlocks: (x) => {
       n(x), o({
@@ -754,12 +754,12 @@ const useUndoManager = () => {
       });
     },
     updateMultipleBlocksProps: (x) => {
-      let y = [];
-      y = map(x, (b) => {
-        const v = keys(b), S = r.find((E) => E._id === b._id), j = {};
-        return each(v, (E) => j[E] = S[E]), j;
+      let k = [];
+      k = map(x, (b) => {
+        const S = keys(b), w = r.find((E) => E._id === b._id), A = {};
+        return each(S, (E) => A[E] = w[E]), A;
       }), c(x), o({
-        undo: () => c(y),
+        undo: () => c(k),
         redo: () => c(x)
       });
     }
@@ -824,9 +824,9 @@ const useAddBlock = () => {
       for (let h = 0; h < i.length; h++) {
         const { _id: x } = i[h];
         i[h]._id = generateUUID();
-        const y = filter(i, { _parent: x });
-        for (let b = 0; b < y.length; b++)
-          y[b]._parent = i[h]._id;
+        const k = filter(i, { _parent: x });
+        for (let b = 0; b < k.length; b++)
+          k[b]._parent = i[h]._id;
       }
       const p = first(i);
       let u, g;
@@ -837,8 +837,8 @@ const useAddBlock = () => {
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const y = i.blocks;
-        return a(y, c, d);
+        const k = i.blocks;
+        return a(k, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -2295,42 +2295,42 @@ const getBlockWithChildren = (o, r) => {
   })
 ), 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(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, f = (m, h) => {
-    const x = cloneDeep(h.find((y) => y._id === m));
-    for (const y in x) {
-      const b = x[y];
+    const x = cloneDeep(h.find((k) => k._id === m));
+    for (const k in x) {
+      const b = x[k];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
-        const { baseClasses: v, classes: S } = getSplitChaiClasses(b);
-        x[y] = compact(flattenDeep([v, S])).join(" ");
+        const { baseClasses: S, classes: w } = getSplitChaiClasses(b);
+        x[k] = compact(flattenDeep([S, w])).join(" ");
       } else
-        y !== "_id" && delete x[y];
+        k !== "_id" && delete x[k];
     }
     return x;
   };
   return {
     askAi: useCallback(
-      async (m, h, x, y) => {
+      async (m, h, x, k) => {
         if (l) {
           r(!0), a(null);
           try {
-            const b = p === u ? "" : p, v = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [f(h, d)], S = await l(m, addLangToPrompt(x, g, m), v, b), { blocks: j, error: E } = S;
+            const b = p === u ? "" : p, S = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [f(h, d)], w = await l(m, addLangToPrompt(x, g, m), S, b), { blocks: A, error: E } = w;
             if (E) {
               a(E);
               return;
             }
             if (m === "styles") {
-              const w = j.map((A) => {
-                for (const B in A)
-                  B !== "_id" && (A[B] = `${STYLES_KEY},${A[B]}`);
-                return A;
+              const C = A.map((B) => {
+                for (const _ in B)
+                  _ !== "_id" && (B[_] = `${STYLES_KEY},${B[_]}`);
+                return B;
               });
-              c(w);
+              c(C);
             } else
-              i(j);
-            y && y(S);
+              i(A);
+            k && k(w);
           } catch (b) {
             a(b);
           } finally {
-            r(!1), y && y();
+            r(!1), k && k();
           }
         }
       },
@@ -2699,8 +2699,8 @@ const CONTROLS = [
   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());
+      var k;
+      h((k = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : k.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
     [h]
@@ -2729,7 +2729,7 @@ const CONTROLS = [
 };
 class PubSub {
   constructor() {
-    U(this, "subscribers", /* @__PURE__ */ new Map());
+    V(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(r, n) {
     return this.subscribers.has(r) || this.subscribers.set(r, /* @__PURE__ */ new Set()), this.subscribers.get(r).add(n), () => {
@@ -2794,13 +2794,13 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: r }) => {
       tabIndex: 0,
       ref: f.setFloating,
       style: g,
-      onClick: (y) => {
-        y.stopPropagation(), y.preventDefault();
+      onClick: (k) => {
+        k.stopPropagation(), k.preventDefault();
       },
-      onMouseEnter: (y) => {
-        y.stopPropagation(), i(null);
+      onMouseEnter: (k) => {
+        k.stopPropagation(), i(null);
       },
-      onKeyDown: (y) => y.stopPropagation(),
+      onKeyDown: (k) => k.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-primary py-2 text-xs text-white",
       children: [
         h && /* @__PURE__ */ jsx(
@@ -2979,25 +2979,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;
-      dropIndex = calculateDropIndex(y, possiblePositions);
-      const b = d, v = h.getAttribute("data-block-id"), S = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((b == null ? void 0 : b._id) === v || !S) {
+      const h = dropTarget, k = getOrientation(h) === "vertical" ? m.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : m.clientX;
+      dropIndex = calculateDropIndex(k, possiblePositions);
+      const b = d, S = h.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((b == null ? void 0 : b._id) === S || !w) {
         f();
         return;
       }
       if (!has(b, "_id")) {
-        a(b, v === "canvas" ? null : v, dropIndex), setTimeout(f, 300);
+        a(b, S === "canvas" ? null : S, dropIndex), setTimeout(f, 300);
         return;
       }
-      let j = h.getAttribute("data-block-id");
-      j === null && (j = m.target.parentElement.getAttribute("data-block-id")), c([b._id], j === "canvas" ? null : j, dropIndex), f(), setTimeout(removePlaceholder, 300);
+      let A = h.getAttribute("data-block-id");
+      A === null && (A = m.target.parentElement.getAttribute("data-block-id")), c([b._id], A === "canvas" ? null : A, dropIndex), f(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (m) => {
       const h = m, x = h.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([]);
+      const k = x.getAttribute("data-block-id"), b = x.getAttribute("data-dnd-dragged") !== "yes";
+      u(k), h.stopPropagation(), h.preventDefault(), possiblePositions = [], b && calculatePossiblePositions(x), n(!0), l(""), i([]);
     },
     onDragLeave: (m) => {
       m.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
@@ -3075,8 +3075,8 @@ const useHandleCanvasDblClick = (o, r) => {
       if (h) {
         const x = h.getAttribute("data-style-prop");
         if (x) {
-          const y = h.getAttribute("data-style-id"), b = h.getAttribute("data-block-parent");
-          l([{ id: y, prop: x, blockId: b }]);
+          const k = h.getAttribute("data-style-id"), b = h.getAttribute("data-block-parent");
+          l([{ id: k, prop: x, blockId: b }]);
         }
       }
     }, 100);
@@ -3098,7 +3098,21 @@ const useHandleCanvasDblClick = (o, r) => {
       children: o
     }
   );
-}, getElementByDataBlockId = (o, r) => o.querySelector(`[data-block-id="${r}"]`), HeadTags = () => {
+}, getElementByDataBlockId = (o, r) => o.querySelector(`[data-block-id="${r}"]`), CssThemeVariables = () => {
+  const [o] = useTheme(), r = useMemo(() => getChaiThemeCssVariables(o), [o]);
+  return /* @__PURE__ */ jsx("style", { id: "chai-theme", children: r });
+}, PrimaryColorCSSVariable = () => {
+  const [o] = useTheme(), r = get(o, "colors.primary", ["#2563EB", "#3B82F6"]), n = get(o, "colors.primary-foreground", ["#ffffff", "#ffffff"]);
+  return /* @__PURE__ */ jsx("style", { id: "chai-theme", children: `:root { 
+        --primary: ${hexToHSL(r[0])}; 
+        --primary-foreground: ${hexToHSL(n[0])}; 
+
+        .dark {
+        --primary: ${hexToHSL(r[1])}; 
+        --primary-foreground: ${hexToHSL(n[1])}; 
+        }
+    }` });
+}, HeadTags = () => {
   const [o] = useTheme(), r = useThemeOptions(), [n] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: p } = useFrame(), [u] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [g] = useState(
     d == null ? void 0 : d.getElementById("selected-block")
   ), [f] = useState(
@@ -3126,19 +3140,19 @@ const useHandleCanvasDblClick = (o, r) => {
         }
       },
       plugins: [
-        typography,
-        forms,
-        aspectRatio,
-        containerQueries,
-        plugin(function({ addBase: S, theme: j }) {
+        tailwindTypography,
+        tailwindForms,
+        tailwindAspectRatio,
+        twContainer,
+        plugin(function({ addBase: S, theme: w }) {
           S({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: j("fontFamily.heading")
+              fontFamily: w("fontFamily.heading")
             },
             body: {
-              fontFamily: j("fontFamily.body"),
-              color: j("colors.foreground"),
-              backgroundColor: j("colors.background")
+              fontFamily: w("fontFamily.body"),
+              color: w("colors.foreground"),
+              backgroundColor: w("colors.background")
             }
           });
         })
@@ -3159,20 +3173,20 @@ const useHandleCanvasDblClick = (o, r) => {
   }, [l, f]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
-  const x = useMemo(() => getChaiThemeCssVariables(o), [o]), y = useMemo(() => {
-    const { heading: S, body: j } = {
+  const x = useMemo(() => {
+    const { heading: S, body: w } = {
       heading: get(o, "fontFamily.heading"),
       body: get(o, "fontFamily.body")
     };
-    return h.filter((E) => E.family === S || E.family === j);
-  }, [o == null ? void 0 : o.fontFamily, h]), b = useMemo(() => getThemeFontsLinkMarkup(filter(y, (S) => has(S, "url"))), [y]), v = useMemo(
-    () => getThemeCustomFontFace(filter(y, (S) => has(S, "src"))),
-    [y]
+    return h.filter((A) => A.family === S || A.family === w);
+  }, [o == null ? void 0 : o.fontFamily, h]), k = useMemo(() => getThemeFontsLinkMarkup(filter(x, (S) => has(S, "url"))), [x]), b = useMemo(
+    () => getThemeCustomFontFace(filter(x, (S) => has(S, "src"))),
+    [x]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: x }),
-    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: b } }),
-    /* @__PURE__ */ jsx("style", { id: "chai-custom-fonts", dangerouslySetInnerHTML: { __html: v } })
+    /* @__PURE__ */ jsx(CssThemeVariables, {}),
+    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: k } }),
+    /* @__PURE__ */ jsx("style", { id: "chai-custom-fonts", dangerouslySetInnerHTML: { __html: b } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: r, onResize: n }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
@@ -3255,7 +3269,7 @@ const getBlockRuntimeProps = memoize((o) => {
   ), m = useMemo(() => getBlockTagAttributes(n), [n, getBlockTagAttributes]), h = useMemo(
     () => c(n._id, getBlockRuntimeProps(n._type)),
     [n._id, n._type, c, getBlockRuntimeProps]
-  ), x = useMemo(() => !has(a, "dataProvider") || !isFunction(a.dataProvider) ? {} : a.dataProvider(n, l), [n, l, a]), y = useMemo(
+  ), x = useMemo(() => !has(a, "dataProvider") || !isFunction(a.dataProvider) ? {} : a.dataProvider(n, l), [n, l, a]), k = useMemo(
     () => ({
       blockProps: {
         "data-block-id": n._id,
@@ -3279,7 +3293,7 @@ const getBlockRuntimeProps = memoize((o) => {
       x
     ]
   );
-  return isNull(g) || p.includes(n._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...y, children: r }) });
+  return isNull(g) || p.includes(n._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...k, children: r }) });
 }, PartialBlocksRenderer = ({ partialBlockId: o }) => {
   const { getPartailBlocks: r } = usePartailBlocksStore(), n = useMemo(() => r(o), [r, o]), a = useMemo(() => splitAtom(atom(n)), [n]);
   return isEmpty(n) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: n });
@@ -3329,43 +3343,43 @@ const getBlockRuntimeProps = memoize((o) => {
     c();
   }, [r, o, n, c]), 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), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, y] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), S = (w) => {
-    p((A) => ({ ...A, width: w }));
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasDisplayWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, k] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), w = (C) => {
+    p((B) => ({ ...B, width: C }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: w, clientHeight: A } = c.current;
-    p({ width: w, height: A });
+    const { clientWidth: C, clientHeight: B } = c.current;
+    p({ width: C, height: B });
   }, [c, r]);
-  const j = (w, A = 0) => {
-    const { top: B } = w.getBoundingClientRect();
-    return B + A >= 0 && B - A <= window.innerHeight;
+  const A = (C, B = 0) => {
+    const { top: _ } = C.getBoundingClientRect();
+    return _ + B >= 0 && _ - B <= window.innerHeight;
   };
   useEffect(() => {
-    var w, A;
+    var C, B;
     if (a && a.type !== "Multiple" && i.current) {
-      const B = getElementByDataBlockId(i.current.contentDocument, a._id);
-      B && (j(B) || (A = (w = i.current) == null ? void 0 : w.contentWindow) == null || A.scrollTo({ top: B.offsetTop, behavior: "smooth" }), f([B]));
+      const _ = getElementByDataBlockId(i.current.contentDocument, a._id);
+      _ && (A(_) || (B = (C = i.current) == null ? void 0 : C.contentWindow) == null || B.scrollTo({ top: _.offsetTop, behavior: "smooth" }), f([_]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(x) && i.current) {
-      const w = getElementByStyleId(
+      const C = getElementByStyleId(
         i.current.contentDocument,
         first(x).id
       );
-      m(w ? [w] : [null]);
+      m(C ? [C] : [null]);
     } else
       m([null]);
   }, [x]);
   const E = useMemo(() => {
-    let w = IframeInitialContent;
-    return w = w.replace("__HTML_DIR__", v), o === "offline" && (w = w.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), w;
-  }, [o, v]);
-  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: S, onResize: S, children: /* @__PURE__ */ jsx(
+    let C = IframeInitialContent;
+    return C = C.replace("__HTML_DIR__", S), o === "offline" && (C = C.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), C;
+  }, [o, S]);
+  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: w, onResize: w, children: /* @__PURE__ */ jsx(
     "div",
     {
       onClick: () => {
-        n([]), y([]);
+        n([]), k([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3517,8 +3531,8 @@ const getBlockRuntimeProps = memoize((o) => {
         p(!1), g("Invalid asset URL");
         return;
       }
-      const y = x.headers.get("content-type") || "";
-      n === "image" && y.startsWith("image/") || n === "video" && y.startsWith("video/") || n === "audio" && y.startsWith("audio/") ? (p(!0), g(null)) : (p(!1), g(`URL does not point to a valid ${n} file`));
+      const k = x.headers.get("content-type") || "";
+      n === "image" && k.startsWith("image/") || n === "video" && k.startsWith("video/") || n === "audio" && k.startsWith("audio/") ? (p(!0), g(null)) : (p(!1), g(`URL does not point to a valid ${n} file`));
     } catch {
       p(!1), g("Error validating URL");
     } finally {
@@ -3599,14 +3613,14 @@ function NestedPathSelector({ data: o, onSelect: r, dataType: n = "value" }) {
   }, [a, o]);
   const u = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", g = React.useCallback(
     (h) => {
-      const x = (y) => n === "value" ? y === "value" || y === "object" : n === "array" ? y === "array" : y === n;
-      h.type === "object" ? (c((y) => [...y, h.key]), p(h.value)) : x(h.type) && (r([...i, h.key].join(".")), l(!1));
+      const x = (k) => n === "value" ? k === "value" || k === "object" : n === "array" ? k === "array" : k === n;
+      h.type === "object" ? (c((k) => [...k, h.key]), p(h.value)) : x(h.type) && (r([...i, h.key].join(".")), l(!1));
     },
     [i, r, n]
   ), f = React.useCallback(() => {
     if (i.length > 0) {
       const h = i.slice(0, -1);
-      c(h), p(h.reduce((x, y) => x[y], o));
+      c(h), p(h.reduce((x, k) => x[k], o));
     }
   }, [i, o]), m = React.useMemo(() => Object.entries(d).map(([h, x]) => ({
     key: h,
@@ -3881,11 +3895,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     if (h !== x)
       u.chain().deleteSelection().insertContent(m).run();
     else {
-      const { state: b } = u, v = b.selection.from, S = b.doc.textBetween(Math.max(0, v - 1), v), j = b.doc.textBetween(v, Math.min(v + 1, b.doc.content.size));
+      const { state: b } = u, S = b.selection.from, w = b.doc.textBetween(Math.max(0, S - 1), S), A = b.doc.textBetween(S, Math.min(S + 1, b.doc.content.size));
       let E = "";
-      v > 0 && S !== " " && !/[.,!?;:]/.test(S) && (E = " ");
-      let w = "";
-      j && j !== " " && !/[.,!?;:]/.test(j) && (w = " "), u.chain().insertContent(E + m + w).run();
+      S > 0 && w !== " " && !/[.,!?;:]/.test(w) && (E = " ");
+      let C = "";
+      A && A !== " " && !/[.,!?;:]/.test(A) && (C = " "), u.chain().insertContent(E + m + C).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: [
@@ -3966,74 +3980,74 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   pageTypes: r,
   onChange: n
 }) => {
-  var I;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [y, b] = useState(-1), v = useRef(null), S = (I = r == null ? void 0 : r.find((C) => C.key === u)) == null ? void 0 : I.name;
+  var L;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [k, b] = useState(-1), S = useRef(null), w = (L = r == null ? void 0 : r.find((v) => v.key === u)) == null ? void 0 : L.name;
   useEffect(() => {
     if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const C = split(o, ":"), k = get(C, 1, "page") || "page";
-    g(k), (async () => {
-      const _ = await l(k, [get(C, 2, "page")]);
-      _ && Array.isArray(_) && m(get(_, [0, "name"], ""));
+    const v = split(o, ":"), y = get(v, 1, "page") || "page";
+    g(y), (async () => {
+      const j = await l(y, [get(v, 2, "page")]);
+      j && Array.isArray(j) && m(get(j, [0, "name"], ""));
     })();
   }, [o]);
-  const j = useDebouncedCallback(
-    async (C) => {
-      if (isEmpty(C))
+  const A = useDebouncedCallback(
+    async (v) => {
+      if (isEmpty(v))
         x([]);
       else {
-        const k = await l(u, C);
-        x(k);
+        const y = await l(u, v);
+        x(y);
       }
       c(!1), b(-1);
     },
     [u],
     300
-  ), E = (C) => {
-    const k = ["pageType", u, C.id];
-    k[1] && (n(k.join(":")), m(C.name), p(!1), x([]), b(-1));
-  }, w = (C) => {
-    switch (C.key) {
+  ), E = (v) => {
+    const y = ["pageType", u, v.id];
+    y[1] && (n(y.join(":")), m(v.name), p(!1), x([]), b(-1));
+  }, C = (v) => {
+    switch (v.key) {
       case "ArrowDown":
-        C.preventDefault(), b((k) => k < h.length - 1 ? k + 1 : k);
+        v.preventDefault(), b((y) => y < h.length - 1 ? y + 1 : y);
         break;
       case "ArrowUp":
-        C.preventDefault(), b((k) => k > 0 ? k - 1 : k);
+        v.preventDefault(), b((y) => y > 0 ? y - 1 : y);
         break;
       case "Enter":
-        if (C.preventDefault(), h.length === 0) return;
-        y >= 0 && E(h[y]);
+        if (v.preventDefault(), h.length === 0) return;
+        k >= 0 && E(h[k]);
         break;
       case "Escape":
-        C.preventDefault(), A();
+        v.preventDefault(), B();
         break;
     }
   };
   useEffect(() => {
-    if (y >= 0 && v.current) {
-      const C = v.current.children[y];
-      C == null || C.scrollIntoView({ block: "nearest" });
+    if (k >= 0 && S.current) {
+      const v = S.current.children[k];
+      v == null || v.scrollIntoView({ block: "nearest" });
     }
-  }, [y]);
-  const A = () => {
+  }, [k]);
+  const B = () => {
     m(""), x([]), b(-1), p(!1), n("");
-  }, B = (C) => {
-    m(C), p(!isEmpty(C)), c(!0), j(C);
+  }, _ = (v) => {
+    m(v), p(!isEmpty(v)), c(!0), A(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (C) => g(C.target.value), children: map(r, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(r, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: f,
-          onChange: (C) => B(C.target.value),
-          onKeyDown: w,
-          placeholder: a(`Search ${S ?? ""}`),
+          onChange: (v) => _(v.target.value),
+          onKeyDown: C,
+          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: A, 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: f && /* @__PURE__ */ jsx("button", { onClick: B, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(h) || d && isEmpty(h)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -4043,22 +4057,22 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       ' "',
       f,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(h == null ? void 0 : h.slice(0, 20), (C, k) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: S, children: map(h == null ? void 0 : h.slice(0, 20), (v, y) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => E(C),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : k === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => E(v),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : y === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          C.name,
+          v.name,
           " ",
-          C.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            C.slug,
+            v.slug,
             " )"
           ] })
         ]
       },
-      C.id
+      v.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: r, onChange: n }) => {
@@ -4143,14 +4157,14 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   const f = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const y = (x + 1) % u.length, b = get(u, [y, "_id"]);
+      const k = (x + 1) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
       r({ ...o, currentSlide: b }), c([b]);
     }
   }, m = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const y = (x - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
+      const k = (x - 1 + u.length) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
       r({ ...o, currentSlide: b }), c([b]);
     }
@@ -4158,8 +4172,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), y = x == null ? void 0 : x._id;
-    y && (r({ ...o, currentSlide: y }), c([y]));
+    ), k = x == null ? void 0 : x._id;
+    k && (r({ ...o, currentSlide: k }), c([k]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
@@ -4238,8 +4252,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
             className: "text-xs",
             pattern: "[0-9]*",
             onChange: (x) => {
-              let y = x.target.value;
-              y.length && (y = y.replace("-", "")), r({ ...o, autoplayInterval: y });
+              let k = x.target.value;
+              k.length && (k = k.replace("-", "")), r({ ...o, autoplayInterval: k });
             }
           }
         )
@@ -4341,65 +4355,65 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   formData: g,
   onChange: f
 }) => {
-  const { selectedLang: m, fallbackLang: h, languages: x } = useLanguages(), y = isEmpty(x) ? "" : isEmpty(m) ? h : m, b = get(LANGUAGES, y, y), v = usePageExternalData(), S = useSelectedBlock(), j = useRegisteredChaiBlocks(), E = get(j, [S == null ? void 0 : S._type, "i18nProps"], []) || [], [w, A] = useState(null), B = useCallback(
-    (k) => {
-      const _ = (N) => /[.,!?;:]/.test(N), T = (N, D, O) => {
+  const { selectedLang: m, fallbackLang: h, languages: x } = useLanguages(), k = isEmpty(x) ? "" : isEmpty(m) ? h : m, b = get(LANGUAGES, k, k), S = usePageExternalData(), w = useSelectedBlock(), A = useRegisteredChaiBlocks(), E = get(A, [w == null ? void 0 : w._type, "i18nProps"], []) || [], [C, B] = useState(null), _ = useCallback(
+    (y) => {
+      const j = (N) => /[.,!?;:]/.test(N), T = (N, D, O) => {
         let R = "", $ = "";
         const M = D > 0 ? N[D - 1] : "", H = D < N.length ? N[D] : "";
-        return D > 0 && (M === "." || !_(M) && M !== " ") && (R = " "), D < N.length && !_(H) && H !== " " && ($ = " "), {
+        return D > 0 && (M === "." || !j(M) && M !== " ") && (R = " "), D < N.length && !j(H) && H !== " " && ($ = " "), {
           text: R + O + $,
           prefixLength: R.length,
           suffixLength: $.length
         };
-      }, L = document.getElementById(o);
-      if (!L) return;
+      }, I = document.getElementById(o);
+      if (!I) return;
       const P = document.getElementById(`chai-rte-${o}`) || document.getElementById(`chai-rte-modal-${o}`);
       if (P && (P.querySelector(".ProseMirror") || P.__chaiRTE)) {
         const N = P.__chaiRTE;
         if (N) {
-          const D = `{{${k}}}`;
+          const D = `{{${y}}}`;
           N.commands.focus();
           const { from: O, to: R } = N.state.selection;
           if (O !== R)
             N.chain().deleteSelection().insertContent(D).run();
           else {
-            const { state: M } = N, H = M.selection.from, F = M.doc.textBetween(Math.max(0, H - 1), H), V = M.doc.textBetween(H, Math.min(H + 1, M.doc.content.size));
+            const { state: M } = N, H = M.selection.from, F = M.doc.textBetween(Math.max(0, H - 1), H), U = M.doc.textBetween(H, Math.min(H + 1, M.doc.content.size));
             let z = "";
-            H > 0 && F !== " " && !_(F) && (z = " ");
+            H > 0 && F !== " " && !j(F) && (z = " ");
             let W = "";
-            V && V !== " " && !_(V) && (W = " "), N.chain().insertContent(z + D + W).run();
+            U && U !== " " && !j(U) && (W = " "), N.chain().insertContent(z + D + W).run();
           }
           setTimeout(() => f(N.getHTML(), {}, o), 100);
           return;
         }
       } else {
-        const N = L, D = N.selectionStart || 0, O = N.value || "", R = N.selectionEnd || D;
+        const N = I, D = N.selectionStart || 0, O = N.value || "", R = N.selectionEnd || D;
         if (R > D) {
-          const V = `{{${k}}}`, { text: z } = T(O, D, V), W = O.slice(0, D) + z + O.slice(R);
+          const U = `{{${y}}}`, { text: z } = T(O, D, U), W = O.slice(0, D) + z + O.slice(R);
           f(W, {}, o);
           return;
         }
-        const M = `{{${k}}}`, { text: H } = T(O, D, M), F = O.slice(0, D) + H + O.slice(D);
+        const M = `{{${y}}}`, { text: H } = T(O, D, M), F = O.slice(0, D) + H + O.slice(D);
         f(F, {}, o);
       }
     },
-    [o, f, g, S == null ? void 0 : S._id]
+    [o, f, g, w == null ? void 0 : w._id]
   );
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: a });
-  const C = E == null ? void 0 : E.includes(o.replace("root.", ""));
+  const v = E == null ? void 0 : E.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const k = w === o;
+    const y = C === o;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => A(k ? null : o),
+          onClick: () => B(y ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            k ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+            y ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(List, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: n }),
             " ",
@@ -4407,7 +4421,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
           ]
         }
       ),
-      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${k ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${y ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         c,
         a,
         l,
@@ -4420,13 +4434,13 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       /* @__PURE__ */ jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
         n,
         " ",
-        C && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+        v && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
           " ",
           b
         ] }),
         p && u.type !== "object" ? " *" : null
       ] }),
-      u.type === "string" && !u.enum && !u.oneOf && v && /* @__PURE__ */ jsx(NestedPathSelector, { data: v, onSelect: B, dataType: "value" })
+      u.type === "string" && !u.enum && !u.oneOf && S && /* @__PURE__ */ jsx(NestedPathSelector, { data: S, onSelect: _, dataType: "value" })
     ] }),
     c,
     a,
@@ -4495,38 +4509,38 @@ 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), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: w }, A, B) => {
-    A && (c == null ? void 0 : c._id) === r._id && a([r._id], { [A]: get(w, A) }, B);
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: C }, B, _) => {
+    B && (c == null ? void 0 : c._id) === r._id && a([r._id], { [B]: get(C, B) }, _);
   }, x = useCallback(
-    debounce(({ formData: w }, A, B) => {
-      h({ formData: w }, A, B), d(w);
+    debounce(({ formData: C }, B, _) => {
+      h({ formData: C }, B, _), d(C);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), y = ({ formData: w }, A) => {
-    A && (n([r._id], { [A]: get(w, A) }), x({ formData: w }, A, { [A]: get(c, A) }));
-  }, b = ({ formData: w }, A) => {
-    A && (n([g._id], { [A]: get(w, A) }), x({ formData: w }, A, { [A]: get(c, A) }));
-  }, { schema: v, uiSchema: S } = useMemo(() => {
-    const w = r == null ? void 0 : r._type;
-    if (!w)
+  ), k = ({ formData: C }, B) => {
+    B && (n([r._id], { [B]: get(C, B) }), x({ formData: C }, B, { [B]: get(c, B) }));
+  }, b = ({ formData: C }, B) => {
+    B && (n([g._id], { [B]: get(C, B) }), x({ formData: C }, B, { [B]: get(c, B) }));
+  }, { schema: S, uiSchema: w } = useMemo(() => {
+    const C = r == null ? void 0 : r._type;
+    if (!C)
       return { schema: {}, uiSchema: {} };
     try {
-      return getBlockFormSchemas(w);
+      return getBlockFormSchemas(C);
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [r]), { wrapperSchema: j, wrapperUiSchema: E } = useMemo(() => {
+  }, [r]), { wrapperSchema: A, wrapperUiSchema: E } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const w = g == null ? void 0 : g._type, { schema: A = {}, uiSchema: B = {} } = getBlockFormSchemas(w);
-    return { wrapperSchema: A, wrapperUiSchema: B };
+    const C = g == null ? void 0 : g._type, { schema: B = {}, uiSchema: _ = {} } = getBlockFormSchemas(C);
+    return { wrapperSchema: B, wrapperUiSchema: _ };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((w) => !w),
+          onClick: () => u((C) => !C),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -4547,19 +4561,19 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: b,
           formData: m,
-          schema: j,
+          schema: A,
           uiSchema: E
         }
       ) })
     ] }),
-    isEmpty(v) ? null : /* @__PURE__ */ jsx(
+    isEmpty(S) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: r == null ? void 0 : r._id,
-        onChange: y,
+        onChange: k,
         formData: i,
-        schema: v,
-        uiSchema: S
+        schema: S,
+        uiSchema: w
       }
     )
   ] });
@@ -4664,10 +4678,10 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
   tooltip: n = !0
 }) => {
   const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: f } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), h = (b) => {
-    u.includes(b) ? u.length > 2 && g(u.filter((v) => v !== b)) : g((v) => [...v, b]);
+    u.includes(b) ? u.length > 2 && g(u.filter((S) => S !== b)) : g((S) => [...S, b]);
   }, x = (b) => {
     r || l(b), c(b);
-  }, y = getBreakpointValue(r ? i : a).toLowerCase();
+  }, k = getBreakpointValue(r ? i : a).toLowerCase();
   return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (b) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
@@ -4675,7 +4689,7 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
       ...b,
       onClick: x,
       key: b.breakpoint,
-      currentBreakpoint: y
+      currentBreakpoint: k
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
@@ -4689,7 +4703,7 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
           ...b,
           onClick: x,
           key: b.breakpoint,
-          currentBreakpoint: y
+          currentBreakpoint: k
         }
       )
     ) }),
@@ -4844,11 +4858,11 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var T;
-  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), y = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((L) => !isEmpty(L)), S = () => {
-    const L = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(f, L, !0), x("");
-  }, [j, E] = useState([]), w = ({ value: L }) => {
-    const P = L.trim().toLowerCase(), N = P.match(/.+:/g);
+  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), k = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), S = b.split(" ").filter((I) => !isEmpty(I)), w = () => {
+    const I = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(f, I, !0), x("");
+  }, [A, E] = useState([]), C = ({ value: I }) => {
+    const P = I.trim().toLowerCase(), N = P.match(/.+:/g);
     let D = [];
     if (N && N.length > 0) {
       const [O] = N, R = P.replace(O, "");
@@ -4859,9 +4873,9 @@ function ManualClasses() {
     } else
       D = i.search(P);
     return E(map(D, "item"));
-  }, A = () => {
+  }, B = () => {
     E([]);
-  }, B = (L) => L.name, I = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), C = useMemo(
+  }, _ = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), v = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -4870,30 +4884,30 @@ function ManualClasses() {
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
       value: h,
-      onKeyDown: (L) => {
-        L.key === "Enter" && h.trim() !== "" && S();
+      onKeyDown: (I) => {
+        I.key === "Enter" && h.trim() !== "" && w();
       },
-      onChange: (L, { newValue: P }) => x(P),
+      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, c, o]
-  ), k = (L) => {
+  ), y = (I) => {
     debugger;
     const P = r.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(f, [L]), u(f, P, !0), n(""), l(-1);
-  }, _ = () => {
+    g(f, [I]), u(f, P, !0), n(""), l(-1);
+  }, j = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(v.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(S.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: c("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: _, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: j, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
@@ -4909,12 +4923,12 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: j,
-          onSuggestionsFetchRequested: w,
-          onSuggestionsClearRequested: A,
-          getSuggestionValue: B,
-          renderSuggestion: I,
-          inputProps: C,
+          suggestions: A,
+          onSuggestionsFetchRequested: C,
+          onSuggestionsClearRequested: B,
+          getSuggestionValue: _,
+          renderSuggestion: L,
+          inputProps: v,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -4930,45 +4944,45 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: S,
+          onClick: w,
           disabled: h.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
-      (L, P) => a === P ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: S.map(
+      (I, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: r,
           onChange: (N) => n(N.target.value),
           onBlur: () => {
-            k(L);
+            y(I);
           },
           onKeyDown: (N) => {
-            N.key === "Enter" && k(L);
+            N.key === "Enter" && y(I);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
         },
-        L
+        I
       ) : /* @__PURE__ */ jsxs(
         "button",
         {
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
           children: [
-            L,
-            r !== L && /* @__PURE__ */ jsx(
+            I,
+            r !== I && /* @__PURE__ */ jsx(
               Cross2Icon,
               {
-                onClick: () => g(f, [L], !0),
+                onClick: () => g(f, [I], !0),
                 className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
               }
             )
           ]
         },
-        L
+        I
       )
     ) })
   ] });
@@ -5141,8 +5155,8 @@ const COLOR_PROP = {
 }, ColorChoice = ({ property: o, onChange: r }) => {
   const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), f = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
-    (y) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (c([]), p({ color: y })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: y, shade: b.shade ? b.shade : "500" })));
+    (k) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(k) ? (c([]), p({ color: k })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: k, shade: b.shade ? b.shade : "500" })));
     },
     [c, p]
   );
@@ -5153,8 +5167,8 @@ const COLOR_PROP = {
   }, [g]);
   const h = useCallback(
     // eslint-disable-next-line no-shadow
-    (y) => {
-      p({ color: g, shade: y });
+    (k) => {
+      p({ color: g, shade: k });
     },
     [g]
   );
@@ -5596,50 +5610,50 @@ const COLOR_PROP = {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, 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, S] = useState(!1), [j, E] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [f, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [k, b] = useState(""), [S, w] = useState(!1), [A, E] = useState(!1);
   useEffect(() => {
-    const { value: C, unit: k } = getClassValueAndUnit(i);
-    if (k === "") {
-      l(C), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: v, unit: y } = getClassValueAndUnit(i);
+    if (y === "") {
+      l(v), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    m(k), l(k === "class" || isEmpty(C) ? "" : C);
+    m(y), l(y === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const w = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), A = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), B = useCallback(
-    (C = !1) => {
-      const k = getUserInputValues(`${a}`, u);
-      if (get(k, "error", !1)) {
+  const C = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), B = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), _ = useCallback(
+    (v = !1) => {
+      const y = getUserInputValues(`${a}`, u);
+      if (get(y, "error", !1)) {
         x(!0);
         return;
       }
-      const _ = get(k, "unit") !== "" ? get(k, "unit") : f;
-      if (_ === "auto" || _ === "none") {
-        w(`${d}${_}`);
+      const j = get(y, "unit") !== "" ? get(y, "unit") : f;
+      if (j === "auto" || j === "none") {
+        C(`${d}${j}`);
         return;
       }
-      if (get(k, "value") === "")
+      if (get(y, "value") === "")
         return;
-      const L = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
-      C ? A(L) : w(L);
+      const I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      v ? B(I) : C(I);
     },
-    [w, A, a, f, d, u]
-  ), I = useCallback(
-    (C) => {
-      const k = getUserInputValues(`${a}`, u);
-      if (get(k, "error", !1)) {
+    [C, B, a, f, d, u]
+  ), L = useCallback(
+    (v) => {
+      const y = getUserInputValues(`${a}`, u);
+      if (get(y, "error", !1)) {
         x(!0);
         return;
       }
-      if (C === "auto" || C === "none") {
-        w(`${d}${C}`);
+      if (v === "auto" || v === "none") {
+        C(`${d}${v}`);
         return;
       }
-      if (get(k, "value") === "")
+      if (get(y, "value") === "")
         return;
-      const _ = get(k, "unit") !== "" ? get(k, "unit") : C, L = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
-      w(L);
+      const j = get(y, "unit") !== "" ? get(y, "unit") : v, I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      C(I);
     },
-    [w, a, d, u]
+    [C, a, d, 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: [
     /* @__PURE__ */ jsx(
@@ -5654,37 +5668,37 @@ const COLOR_PROP = {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(f) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: f === "class",
-          onKeyPress: (C) => {
-            C.key === "Enter" && B();
+          onKeyPress: (v) => {
+            v.key === "Enter" && _();
           },
-          onKeyDown: (C) => {
-            if (C.keyCode !== 38 && C.keyCode !== 40)
+          onKeyDown: (v) => {
+            if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
-            C.preventDefault(), E(!0);
-            const k = parseInt$1(C.target.value);
-            let _ = isNaN$1(k) ? 0 : k;
-            C.keyCode === 38 && (_ += 1), C.keyCode === 40 && (_ -= 1);
-            const T = `${_}`, P = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
-            A(P);
+            v.preventDefault(), E(!0);
+            const y = parseInt$1(v.target.value);
+            let j = isNaN$1(y) ? 0 : y;
+            v.keyCode === 38 && (j += 1), v.keyCode === 40 && (j -= 1);
+            const T = `${j}`, P = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
+            B(P);
           },
-          onKeyUp: (C) => {
-            j && (C.preventDefault(), E(!1));
+          onKeyUp: (v) => {
+            A && (v.preventDefault(), E(!1));
           },
-          onBlur: () => B(),
-          onChange: (C) => {
-            x(!1), l(C.target.value);
+          onBlur: () => _(),
+          onChange: (v) => {
+            x(!1), l(v.target.value);
           },
-          onClick: (C) => {
-            var k;
-            (k = C == null ? void 0 : C.target) == null || k.select(), n(!1);
+          onClick: (v) => {
+            var y;
+            (y = v == null ? void 0 : v.target) == null || y.select(), n(!1);
           },
-          value: v ? y : a,
+          value: S ? k : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             h ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -5709,29 +5723,29 @@ const COLOR_PROP = {
           {
             units: u,
             current: f,
-            onSelect: (C) => {
-              n(!1), m(C), I(C);
+            onSelect: (v) => {
+              n(!1), m(v), L(v);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(f) !== -1 || v ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(f) !== -1 || S ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => S(!0),
-        onDragEnd: (C) => {
-          if (b(() => ""), S(!1), isEmpty(C))
+        onDragStart: () => w(!0),
+        onDragEnd: (v) => {
+          if (b(() => ""), w(!1), isEmpty(v))
             return;
-          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
-          w(T);
+          const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${f === "-" ? "" : f}]`;
+          C(T);
         },
-        onDrag: (C) => {
-          if (isEmpty(C))
+        onDrag: (v) => {
+          if (isEmpty(v))
             return;
-          b(C);
-          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
-          A(T);
+          b(v);
+          const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${f === "-" ? "" : f}]`;
+          B(T);
         },
         currentValue: a,
         unit: f,
@@ -5828,35 +5842,35 @@ 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: c, negative: d = !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(
-    (A, B = !0) => {
-      const I = { dark: p, mq: g, mod: u, cls: A, property: l, fullCls: "" };
-      (p || u !== "") && (I.mq = "xs");
-      const C = generateFullClsName(I);
-      m(x, [C], B);
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), f = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), k = useMemo(() => get(f, "fullCls", ""), [f]), b = useCallback(
+    (B, _ = !0) => {
+      const L = { dark: p, mq: g, mod: u, cls: B, property: l, fullCls: "" };
+      (p || u !== "") && (L.mq = "xs");
+      const v = generateFullClsName(L);
+      m(x, [v], _);
     },
     [x, p, g, u, l, m]
-  ), v = useCallback(() => {
-    h(x, [y], !0);
-  }, [x, y, h]), S = useMemo(() => canChangeClass(f, g), [f, g]);
+  ), S = useCallback(() => {
+    h(x, [k], !0);
+  }, [x, k, h]), w = useMemo(() => canChangeClass(f, g), [f, g]);
   useEffect(() => {
-    i(S, f);
-  }, [S, i, f]);
-  const [, , j] = useScreenSizeWidth(), E = useCallback(
-    (A) => {
-      j({
+    i(w, f);
+  }, [w, i, f]);
+  const [, , A] = useScreenSizeWidth(), E = useCallback(
+    (B) => {
+      A({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[A]);
+      }[B]);
     },
-    [j]
-  ), w = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: S, canReset: f && w, 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 && !w ? "text-foreground" : ""}`, children: r(a) }) }),
+    [A]
+  ), C = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: w, canReset: f && C, 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 && !C ? "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(
@@ -5875,7 +5889,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: w ? /* @__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" }) }) : S && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${k ? "visible" : "invisible"}`, children: C ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6025,8 +6039,8 @@ function BlockStyling() {
       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 k = (i.dragStartY - u.pageY) / h + m;
+      g && k < 0 && (k = 0), f === "opacity" && k > 1 && (k = 1), i.onDrag(`${k}`), l(`${k}`);
     },
     [i],
     50
@@ -6071,8 +6085,8 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
 }) => {
   const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: f } = 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);
+      const k = isFunction(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(k), n || null, a);
     } else
       p(o, n || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -6084,8 +6098,8 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
         disabled: r,
         onClick: m,
         type: "button",
-        onDragStart: (y) => {
-          y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (k) => {
+          k.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), k.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             g([]), f();
           }, 200);
         },
@@ -6285,22 +6299,22 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var f, m, h, x, y, b, v, S;
+  var f, m, h, x, k, b, S, w;
   if (n.type === "comment") return [];
   console.log("node ===>", n);
   let a = { _id: generateUUID() };
   if (r && (a._parent = r.block._id), n.type === "text")
     return isEmpty(get(n, "content", "")) ? [] : r && shouldAddText(r.node, r.block) ? (set(r, "block.content", get(n, "content", "")), []) : { ...a, _type: "Text", content: get(n, "content", "") };
   const l = get(n, "attributes", []), i = l.find(
-    (j) => j.key === "data-chai-richtext" || j.key === "chai-richtext"
+    (A) => A.key === "data-chai-richtext" || A.key === "chai-richtext"
   ), c = l.find(
-    (j) => j.key === "data-chai-lightbox" || j.key === "chai-lightbox"
+    (A) => A.key === "data-chai-lightbox" || A.key === "chai-lightbox"
   ), d = l.find(
-    (j) => j.key === "data-chai-dropdown" || j.key === "chai-dropdown"
+    (A) => A.key === "data-chai-dropdown" || A.key === "chai-dropdown"
   ), p = l.find(
-    (j) => j.key === "data-chai-dropdown-button" || j.key === "chai-dropdown-button"
+    (A) => A.key === "data-chai-dropdown-button" || A.key === "chai-dropdown-button"
   ), u = l.find(
-    (j) => j.key === "data-chai-dropdown-content" || j.key === "chai-dropdown-content"
+    (A) => A.key === "data-chai-dropdown-content" || A.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -6308,13 +6322,13 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
     ...getAttrs(n),
     ...getStyles(n)
   }, n.attributes) {
-    const j = n.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
-    j && (a._name = j.value);
+    const A = n.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
+    A && (a._name = A.value);
   }
   if (i)
     return a.content = stringify(n.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (c) {
-    const j = [
+    const A = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -6329,41 +6343,41 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
       href: ((f = l.find((E) => E.key === "href")) == null ? void 0 : f.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",
-      maxWidth: ((y = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : y.replace("px", "")) || "",
+      maxWidth: ((k = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : k.replace("px", "")) || "",
       backdropColor: ((b = l.find((E) => E.key === "data-overlay")) == null ? void 0 : b.value) || "",
-      galleryName: ((v = l.find((E) => E.key === "data-gall")) == null ? void 0 : v.value) || ""
-    }, forEach(j, (E) => {
+      galleryName: ((S = l.find((E) => E.key === "data-gall")) == null ? void 0 : S.value) || ""
+    }, forEach(A, (E) => {
       has(a, `styles_attrs.${E}`) && delete a.styles_attrs[E];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const j = filter(n.children || [], (w) => (w == null ? void 0 : w.tagName) !== "span");
-    a.content = getTextContent(j);
+    const A = filter(n.children || [], (C) => (C == null ? void 0 : C.tagName) !== "span");
+    a.content = getTextContent(A);
     const E = find(
       n.children || [],
-      (w) => (w == null ? void 0 : w.tagName) === "span" && some(w.children || [], (A) => (A == null ? void 0 : A.tagName) === "svg")
+      (C) => (C == null ? void 0 : C.tagName) === "span" && some(C.children || [], (B) => (B == null ? void 0 : B.tagName) === "svg")
     );
     if (E) {
-      const w = find(E.children || [], (A) => (A == null ? void 0 : A.tagName) === "svg");
-      if (w) {
-        a.icon = stringify([w]);
-        const { height: A, width: B } = getSvgDimensions(w, "16px", "16px");
-        a.iconHeight = A, a.iconWidth = B;
+      const C = find(E.children || [], (B) => (B == null ? void 0 : B.tagName) === "svg");
+      if (C) {
+        a.icon = stringify([C]);
+        const { height: B, width: _ } = getSvgDimensions(C, "16px", "16px");
+        a.iconHeight = B, a.iconWidth = _;
       }
     }
     return [a];
   }
   if (a._type === "Input") {
-    const j = a.inputType || "text";
-    j === "checkbox" ? set(a, "_type", "Checkbox") : j === "radio" && set(a, "_type", "Radio");
+    const A = a.inputType || "text";
+    A === "checkbox" ? set(a, "_type", "Checkbox") : A === "radio" && set(a, "_type", "Radio");
   } else if (n.tagName === "video" || n.tagName === "iframe") {
-    const j = stringify([n]);
-    return hasVideoEmbed(j) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(j)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = j, [a];
+    const A = stringify([n]);
+    return hasVideoEmbed(A) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(A)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = A, [a];
   } else if (n.tagName === "svg") {
-    const j = find(n.attributes, { key: "height" }), E = find(n.attributes, { key: "width" }), w = get(j, "value") ? `[${get(j, "value")}px]` : "24px", A = get(E, "value") ? `[${get(E, "value")}px]` : "24px", B = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${A} h-${w}`, B)}`.trim(), n.attributes = filter(n.attributes, (I) => !includes(["style", "width", "height", "class"], I.key)), a.icon = stringify([n]), [a];
-  } else if (n.tagName == "option" && r && ((S = r.block) == null ? void 0 : S._type) === "Select")
+    const A = find(n.attributes, { key: "height" }), E = find(n.attributes, { key: "width" }), C = get(A, "value") ? `[${get(A, "value")}px]` : "24px", B = get(E, "value") ? `[${get(E, "value")}px]` : "24px", _ = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${B} h-${C}`, _)}`.trim(), n.attributes = filter(n.attributes, (L) => !includes(["style", "width", "height", "class"], L.key)), a.icon = stringify([n]), [a];
+  } else if (n.tagName == "option" && r && ((w = r.block) == null ? void 0 : w._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
       ...getAttrs(n)
@@ -6411,91 +6425,6 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
     ] }) }),
     /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "", onClick: () => c(), size: "sm", className: "w-fit", children: n("Import HTML") }) })
   ] });
-}, partialBlocksDataAtom = atom({
-  blocks: [],
-  groups: [],
-  isLoading: !0,
-  error: null
-}), hasInitializedPartialBlocksAtom = atom(!1), formatReadableName = (o) => {
-  if (!o) return "";
-  let r = o.replace(/[-_]/g, " ");
-  return r = r.replace(/([a-z])([A-Z])/g, "$1 $2"), r.split(" ").map((n) => n.charAt(0).toUpperCase() + n.slice(1).toLowerCase()).join(" ");
-}, PartialBlocks = ({
-  parentId: o,
-  position: r,
-  gridCols: n = "grid-cols-2"
-}) => {
-  const { data: a, isLoading: l, refetch: i, error: c } = usePartialBlocksList(), [d, p] = useAtom$1(partialBlocksDataAtom), [u, g] = useAtom$1(hasInitializedPartialBlocksAtom);
-  useEffect(() => {
-    if (!u || Object.keys(d.blocks).length === 0)
-      if (c)
-        p({
-          blocks: [],
-          groups: [],
-          isLoading: !1,
-          error: c
-        }), g(!0);
-      else if (!l && Object.keys(a || {}).length > 0) {
-        const m = Object.entries(a).map(([x, y]) => {
-          const b = y, v = b.type || "partial", S = formatReadableName(v);
-          return {
-            type: "PartialBlock",
-            // Set the type to PartialBlock
-            label: formatReadableName(b.name || x),
-            description: b.description || "",
-            icon: Globe,
-            group: S,
-            // Use formatted type as group
-            category: "partial",
-            partialBlockId: x,
-            // Store the original ID as partialBlockId
-            _name: b.name
-          };
-        }), h = uniq(map(m, "group"));
-        p({
-          blocks: m,
-          groups: h,
-          isLoading: !1,
-          error: null
-        }), g(!0);
-      } else l ? p((m) => ({ ...m, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
-        blocks: [],
-        groups: [],
-        isLoading: !1,
-        error: "No partial blocks available"
-      }), g(!0));
-  }, [
-    l,
-    a,
-    u,
-    g,
-    p,
-    d.blocks,
-    c
-  ]);
-  const f = () => {
-    p((m) => ({ ...m, isLoading: !0, error: null })), g(!1), i();
-  };
-  return d.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : d.error || d.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
-    /* @__PURE__ */ jsx("p", { children: d.error || "No partial blocks available" }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: f,
-        className: "rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90",
-        children: "Refresh"
-      }
-    )
-  ] }) : /* @__PURE__ */ jsx(
-    ChaiBuilderBlocks,
-    {
-      gridCols: n,
-      parentId: o,
-      position: r,
-      groups: d.groups,
-      blocks: d.blocks
-    }
-  );
 }, ChaiSelect = ({
   defaultValue: o = "",
   onValueChange: r,
@@ -6535,7 +6464,7 @@ function UILibrariesSelect({
     /* @__PURE__ */ jsx(
       ChaiSelect,
       {
-        className: "mt-1",
+        className: "mb-1",
         options: o.map((l) => ({
           value: l.id,
           label: l.name
@@ -6552,18 +6481,18 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), f = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, h] = useAtom$1(draggedBlockAtom), x = (v) => {
-    const S = has(v, "styles_attrs.data-page-section");
-    return v._type === "Box" && S;
-  }, y = useCallback(
-    async (v) => {
-      if (v.stopPropagation(), has(o, "component")) {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, 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), k = (w) => {
+    const A = has(w, "styles_attrs.data-page-section");
+    return w._type === "Box" && A;
+  }, b = useCallback(
+    async (w) => {
+      if (w.stopPropagation(), has(o, "component")) {
         d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const S = await c(r, o);
-      isEmpty(S) || p(syncBlocksWithDefaults(S), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const A = await c(r, o);
+      isEmpty(A) || p(syncBlocksWithDefaults(A), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, r, n, a]
   );
@@ -6572,21 +6501,21 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : y,
-        draggable: m ? "true" : "false",
-        onDragStart: async (v) => {
-          const S = await c(r, o);
-          let j = n;
-          if (x(first(S)) && (j = null), !isEmpty(S)) {
-            const E = { blocks: S, uiLibrary: !0, parent: j };
-            if (v.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
-              const w = new Image();
-              w.src = o.preview, w.onload = () => {
-                v.dataTransfer.setDragImage(w, 0, 0);
+        } : b,
+        draggable: h ? "true" : "false",
+        onDragStart: async (w) => {
+          const A = await c(r, o);
+          let E = n;
+          if (k(first(A)) && (E = null), !isEmpty(A)) {
+            const C = { blocks: A, uiLibrary: !0, parent: E };
+            if (w.dataTransfer.setData("text/plain", JSON.stringify(C)), o.preview) {
+              const B = new Image();
+              B.src = o.preview, B.onload = () => {
+                w.dataTransfer.setDragImage(B, 0, 0);
               };
             } else
-              v.dataTransfer.setDragImage(new Image(), 0, 0);
-            h(E), setTimeout(() => {
+              w.dataTransfer.setDragImage(new Image(), 0, 0);
+            x(C), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -6599,128 +6528,273 @@ 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__ */ jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: f }) })
+          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 }),
+            m && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: m })
+          ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: f }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: f }),
+      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((v) => v.id === n) || first(l), { data: c, isLoading: d } = useLibraryBlocks(i), p = groupBy([...c], "group"), [u, g] = useState(null);
+  const [n, a] = useSelectedLibrary(), l = useBuilderProp("uiLibraries", []), i = l.find((y) => y.id === n) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [f, m] = useState([]), h = useRef(null);
   useEffect(() => {
-    u || g(first(keys(p)));
-  }, [p, u]);
-  const f = get(p, u, []), m = useRef(null), { t: h } = useTranslation(), x = (v) => {
-    m.current && (clearTimeout(m.current), m.current = null), m.current = setTimeout(() => {
-      m.current && g(v);
-    }, 300);
+    c && c.length > 0 && (h.current = new Fuse(c, {
+      keys: ["name", "label", "description", "group"],
+      threshold: 0.4,
+      ignoreLocation: !0
+    }));
+  }, [c]), useEffect(() => {
+    if (!u.trim() || !h.current) {
+      m([]);
+      return;
+    }
+    const y = h.current.search(u).map((j) => j.item);
+    m(y);
+  }, [u]);
+  const x = u.trim() && !isEmpty(f) ? f : c, k = groupBy(x, "group"), [b, S] = useState(null);
+  useEffect(() => {
+    if (isEmpty(keys(k))) {
+      S(null);
+      return;
+    }
+    if (!b || !k[b]) {
+      S(first(keys(k)));
+      return;
+    }
+  }, [k, b]);
+  const w = get(k, b, []), A = useRef(null), { t: E } = useTranslation(), C = (y) => {
+    A.current && (clearTimeout(A.current), A.current = null), A.current = setTimeout(() => {
+      A.current && S(y);
+    }, 400);
+  }, B = () => {
+    i != null && i.id && p(i.id);
+  }, _ = () => {
+    g("");
   };
   if (d)
     return /* @__PURE__ */ jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const y = filter(f, (v, S) => S % 2 === 0), b = filter(f, (v, S) => S % 2 === 1);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-72 flex-col gap-1 px-1 pr-2", children: [
-      /* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, setLibrary: a, uiLibraries: l }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: h("Groups") }),
-        /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-        /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: map(p, (v, S) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            onMouseEnter: () => x(S),
-            onMouseLeave: () => clearTimeout(m.current),
-            role: "button",
-            onClick: () => g(S),
-            className: cn$1(
-              "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-              S === u ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
-            ),
-            children: [
-              /* @__PURE__ */ jsx("span", { children: capitalize(h(S.toLowerCase())) }),
-              /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
-            ]
-          },
-          S
-        )) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      ScrollArea,
+  const L = filter(w, (y, j) => j % 2 === 0), v = filter(w, (y, j) => j % 2 === 1);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          placeholder: E("Search blocks..."),
+          value: u,
+          onChange: (y) => g(y.target.value),
+          className: "w-full pl-8 pr-8"
+        }
+      ),
+      u && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: _,
+          className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "relative flex h-full max-h-full flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-1 pt-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 min-w-60 max-w-60 flex-col gap-1 px-1 pr-2", children: [
+        /* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, setLibrary: a, uiLibraries: l }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: E("Groups") }),
+          /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
+          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("Failed to load the UI library. Try again") }),
+            /* @__PURE__ */ jsxs(Button, { onClick: B, variant: "outline", size: "sm", className: "gap-2", children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+              E("Retry")
+            ] })
+          ] }) }) : map(k, (y, j) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onMouseEnter: () => C(j),
+              onMouseLeave: () => clearTimeout(A.current),
+              role: "button",
+              onClick: () => S(j),
+              className: cn$1(
+                "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
+                j === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: capitalize(E(j.toLowerCase())) }),
+                /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
+              ]
+            },
+            j
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-col border-l border-border", children: /* @__PURE__ */ jsxs(
+        ScrollArea,
+        {
+          onMouseEnter: () => A.current ? clearTimeout(A.current) : null,
+          className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
+          children: [
+            isEmpty(w) && !isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: L.map((y, j) => /* @__PURE__ */ jsx(
+                BlockCard,
+                {
+                  parentId: o,
+                  position: r,
+                  block: y,
+                  library: i
+                },
+                `block-${j}`
+              )) }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: v.map((y, j) => /* @__PURE__ */ jsx(
+                BlockCard,
+                {
+                  parentId: o,
+                  position: r,
+                  block: y,
+                  library: i
+                },
+                `block-second-${j}`
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx("br", {})
+          ]
+        }
+      ) })
+    ] }) })
+  ] }) });
+}, UILibrariesPanel = ({ parentId: o, position: r }) => /* @__PURE__ */ jsx(UILibrarySection, { parentId: o, position: r }), partialBlocksDataAtom = atom({
+  blocks: [],
+  groups: [],
+  isLoading: !0,
+  error: null
+}), hasInitializedPartialBlocksAtom = atom(!1), formatReadableName = (o) => {
+  if (!o) return "";
+  let r = o.replace(/[-_]/g, " ");
+  return r = r.replace(/([a-z])([A-Z])/g, "$1 $2"), r.split(" ").map((n) => n.charAt(0).toUpperCase() + n.slice(1).toLowerCase()).join(" ");
+}, PartialBlocks = ({
+  parentId: o,
+  position: r,
+  gridCols: n = "grid-cols-2"
+}) => {
+  const { data: a, isLoading: l, refetch: i, error: c } = usePartialBlocksList(), [d, p] = useAtom$1(partialBlocksDataAtom), [u, g] = useAtom$1(hasInitializedPartialBlocksAtom);
+  useEffect(() => {
+    if (!u || Object.keys(d.blocks).length === 0)
+      if (c)
+        p({
+          blocks: [],
+          groups: [],
+          isLoading: !1,
+          error: c
+        }), g(!0);
+      else if (!l && Object.keys(a || {}).length > 0) {
+        const m = Object.entries(a).map(([x, k]) => {
+          const b = k, S = b.type || "partial", w = formatReadableName(S);
+          return {
+            type: "PartialBlock",
+            // Set the type to PartialBlock
+            label: formatReadableName(b.name || x),
+            description: b.description || "",
+            icon: Globe,
+            group: w,
+            // Use formatted type as group
+            category: "partial",
+            partialBlockId: x,
+            // Store the original ID as partialBlockId
+            _name: b.name
+          };
+        }), h = uniq(map(m, "group"));
+        p({
+          blocks: m,
+          groups: h,
+          isLoading: !1,
+          error: null
+        }), g(!0);
+      } else l ? p((m) => ({ ...m, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
+        blocks: [],
+        groups: [],
+        isLoading: !1,
+        error: "No partial blocks available"
+      }), g(!0));
+  }, [
+    l,
+    a,
+    u,
+    g,
+    p,
+    d.blocks,
+    c
+  ]);
+  const f = () => {
+    p((m) => ({ ...m, isLoading: !0, error: null })), g(!1), i();
+  };
+  return d.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : d.error || d.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("p", { children: d.error || "No partial blocks available" }),
+    /* @__PURE__ */ jsx(
+      "button",
       {
-        onMouseEnter: () => m.current ? clearTimeout(m.current) : null,
-        className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: y.map((v, S) => /* @__PURE__ */ jsx(
-              BlockCard,
-              {
-                parentId: o,
-                position: r,
-                block: v,
-                library: i
-              },
-              `block-${S}`
-            )) }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: b.map((v, S) => /* @__PURE__ */ jsx(
-              BlockCard,
-              {
-                parentId: o,
-                position: r,
-                block: v,
-                library: i
-              },
-              `block-${S}`
-            )) })
-          ] }),
-          /* @__PURE__ */ jsx("br", {}),
-          /* @__PURE__ */ jsx("br", {}),
-          /* @__PURE__ */ jsx("br", {})
-        ]
+        onClick: f,
+        className: "rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90",
+        children: "Refresh"
       }
     )
-  ] }) }) });
-}, UILibrariesPanel = ({ parentId: o, position: r }) => /* @__PURE__ */ jsx(UILibrarySection, { parentId: o, position: r }), 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(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (C = find(c, (k) => k._id === n)) == null ? void 0 : C._type, [m, h] = useState("all"), [x, y] = useState(null), b = useRef(null);
+  ] }) : /* @__PURE__ */ jsx(
+    ChaiBuilderBlocks,
+    {
+      gridCols: n,
+      parentId: o,
+      position: r,
+      groups: d.groups,
+      blocks: d.blocks
+    }
+  );
+}, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: r, parentId: n, position: a, gridCols: l = "grid-cols-4" }) => {
+  var v;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (v = find(c, (y) => y._id === n)) == null ? void 0 : v._type, [m, h] = useState("all"), [x, k] = useState(null), b = useRef(null);
   useEffect(() => {
-    const k = setTimeout(() => {
-      var _;
-      (_ = u.current) == null || _.focus();
+    const y = setTimeout(() => {
+      var j;
+      (j = u.current) == null || j.focus();
     }, 0);
-    return () => clearTimeout(k);
+    return () => clearTimeout(y);
   }, [g]), useEffect(() => {
-    d && (h("all"), y(null));
-  }, [d]), useEffect(() => (b.current = debounce((k) => {
-    h(k);
+    d && (h("all"), k(null));
+  }, [d]), useEffect(() => (b.current = debounce((y) => {
+    h(y);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
-  const v = useCallback((k) => {
-    y(k), b.current && b.current(k);
-  }, []), S = useCallback(() => {
-    y(null), b.current && b.current.cancel();
-  }, []), j = useCallback((k) => {
-    b.current && b.current.cancel(), h(k), y(null);
+  const S = useCallback((y) => {
+    k(y), b.current && b.current(y);
+  }, []), w = useCallback(() => {
+    k(null), b.current && b.current.cancel();
+  }, []), A = useCallback((y) => {
+    b.current && b.current.cancel(), h(y), k(null);
   }, []), E = useMemo(
     () => d ? values(r).filter(
-      (k) => {
-        var _, T;
-        return (((_ = k.label) == null ? void 0 : _.toLowerCase()) + " " + ((T = k.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
+      (y) => {
+        var j, T;
+        return (((j = y.label) == null ? void 0 : j.toLowerCase()) + " " + ((T = y.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
       }
     ) : r,
     [r, d]
-  ), w = useMemo(
+  ), C = useMemo(
     () => d ? o.filter(
-      (k) => reject(filter(values(E), { group: k }), { hidden: !0 }).length > 0
-    ) : o.filter((k) => reject(filter(values(r), { group: k }), { hidden: !0 }).length > 0),
+      (y) => reject(filter(values(E), { group: y }), { hidden: !0 }).length > 0
+    ) : o.filter((y) => reject(filter(values(r), { group: y }), { hidden: !0 }).length > 0),
     [r, E, o, d]
-  ), A = useMemo(
-    () => sortBy(w, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
-    [w]
-  ), B = useMemo(() => m === "all" ? E : filter(values(E), { group: m }), [E, m]), I = useMemo(() => m === "all" ? A : [m], [A, m]);
+  ), B = useMemo(
+    () => sortBy(C, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
+    [C]
+  ), _ = useMemo(() => m === "all" ? E : filter(values(E), { group: m }), [E, m]), L = useMemo(() => m === "all" ? B : [m], [B, m]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -6730,55 +6804,55 @@ const BlockCard = ({
         placeholder: i("Search blocks..."),
         value: d,
         className: "-ml-2",
-        onChange: (k) => p(k.target.value)
+        onChange: (y) => p(y.target.value)
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      A.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      B.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => j("all"),
-            onMouseEnter: () => v("all"),
-            onMouseLeave: S,
+            onClick: () => A("all"),
+            onMouseEnter: () => S("all"),
+            onMouseLeave: w,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        A.map((k) => /* @__PURE__ */ jsx(
+        B.map((y) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => j(k),
-            onMouseEnter: () => v(k),
-            onMouseLeave: S,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === k || x === k ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
-            children: capitalize(i(k.toLowerCase()))
+            onClick: () => A(y),
+            onMouseEnter: () => S(y),
+            onMouseLeave: w,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === y || x === y ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            children: capitalize(i(y.toLowerCase()))
           },
-          `sidebar-${k}`
+          `sidebar-${y}`
         ))
       ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: w.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: C.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         i("No blocks found matching"),
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: I.map((k) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: L.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(y.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          m === "all" ? filter(values(B), { group: k }) : values(B),
+          m === "all" ? filter(values(_), { group: y }) : values(_),
           { hidden: !0 }
-        ).map((_) => /* @__PURE__ */ jsx(
+        ).map((j) => /* @__PURE__ */ jsx(
           CoreBlock,
           {
             parentId: n,
             position: a,
-            block: _,
-            disabled: !canAcceptChildBlock(f, _.type) || !canBeNestedInside(f, _.type)
+            block: j,
+            disabled: !canAcceptChildBlock(f, j.type) || !canBeNestedInside(f, j.type)
           },
-          _.type
+          j.type
         )) })
-      ] }, k)) }) }) })
+      ] }, y)) }) }) })
     ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -6804,8 +6878,8 @@ const BlockCard = ({
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (v) => {
-          d(""), c(v);
+        onValueChange: (S) => {
+          d(""), c(S);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -6815,13 +6889,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(h, (S) => /* @__PURE__ */ jsx(TabsTrigger, { value: S.id, children: React__default.createElement(S.tab) }, `tab-add-block-${S.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(h, (S) => /* @__PURE__ */ jsx(TabsContent, { value: S.id, children: React__default.createElement(S.tabContent, { close: m, parentId: n, position: a }) }, `panel-add-block-${S.id}`))
         ]
       }
     )
@@ -6839,7 +6913,6 @@ const BlockCard = ({
   CREATE_LIBRARY_BLOCK: "create_library_block",
   CREATE_LIBRARY_GROUP: "create_library_group",
   EDIT_LIBRARY_BLOCK: "edit_library_block",
-  EDIT_LIBRARY_GROUP: "edit_library_group",
   DELETE_LIBRARY_BLOCK: "delete_library_block"
 };
 Object.values(PERMISSIONS);
@@ -7120,33 +7193,33 @@ const selectParent = (o, r) => {
   var P;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: f } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: S } = o, j = (N) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: f } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: k, isDragging: b, isEditing: S, handleClick: w } = o, A = (N) => {
     N.stopPropagation(), !l.includes(m) && o.toggle();
   }, E = (N) => {
     N.isInternal && (p = N.isOpen, N.isOpen && N.close());
-  }, w = (N) => {
+  }, C = (N) => {
     N.isInternal && p !== null && (p ? N.open() : N.close(), p = null);
-  }, [A, B] = useAtom$1(currentAddSelection), I = () => {
+  }, [B, _] = useAtom$1(currentAddSelection), L = () => {
     var N;
-    C(), o.parent.isSelected || B((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
-  }, C = () => {
-    B(null);
-  }, k = (N) => {
-    C(), N.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), S(N);
+    v(), o.parent.isSelected || _((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
+  }, v = () => {
+    _(null);
+  }, y = (N) => {
+    v(), N.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), w(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      y && !o.isOpen && !b && !l.includes(m) && o.toggle();
+      k && !o.isOpen && !b && !l.includes(m) && o.toggle();
     }, 500);
     return () => clearTimeout(N);
-  }, [y, o, b]);
-  const _ = (N, D) => {
+  }, [k, o, b]);
+  const j = (N, D) => {
     const O = c.contentDocument || c.contentWindow.document, R = O.querySelector(`[data-block-id=${N}]`);
     R && R.setAttribute("data-drop", D);
     const $ = R.getBoundingClientRect(), M = c.getBoundingClientRect();
     $.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = R.offsetTop - M.top);
   }, T = (N) => {
-    C();
+    v();
     const D = get(o, "parent.id");
     D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: N }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: N });
   };
@@ -7168,26 +7241,26 @@ const selectParent = (o, r) => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const L = useMemo(() => has(h, "_libBlockId") && !isEmpty(h._libBlockId), [h]);
+  const I = useMemo(() => has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (d(PERMISSIONS.CREATE_LIBRARY_BLOCK) || d(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, d]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseEnter: () => g(m),
       onMouseLeave: () => f(),
-      onClick: k,
+      onClick: y,
       style: r,
       "data-node-id": m,
       ref: l.includes(m) ? null : n,
       onDragStart: () => E(o),
-      onDragEnd: () => w(o),
+      onDragEnd: () => C(o),
       onDragOver: (N) => {
-        N.preventDefault(), _(m, "yes");
+        N.preventDefault(), j(m, "yes");
       },
       onDragLeave: (N) => {
-        N.preventDefault(), _(m, "no");
+        N.preventDefault(), j(m, "no");
       },
       onDrop: (N) => {
-        N.preventDefault(), _(m, "no");
+        N.preventDefault(), j(m, "no");
       },
       children: [
         d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
@@ -7196,8 +7269,8 @@ const selectParent = (o, r) => {
             onClick: (N) => {
               N.stopPropagation(), T(o.childIndex);
             },
-            onMouseEnter: I,
-            onMouseLeave: C,
+            onMouseEnter: L,
+            onMouseLeave: v,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-primary opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -7208,11 +7281,11 @@ const selectParent = (o, r) => {
             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" : "",
-              (o == null ? void 0 : o.id) === A ? "bg-primary/10" : "",
+              k && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === B ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(m) ? "opacity-50" : "",
-              L && x && "bg-primary/20 text-primary"
+              I && x && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7220,7 +7293,7 @@ const selectParent = (o, r) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-primary" : "text-slate-400"}` }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: A, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-primary" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7228,12 +7301,12 @@ const selectParent = (o, r) => {
                   {
                     className: cn(
                       "leading-1 flex items-center",
-                      L && "text-primary/60",
-                      L && x && "text-primary/80"
+                      I && "text-primary/60",
+                      I && x && "text-primary/80"
                     ),
                     children: [
                       /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
-                      v ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
+                      S ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
@@ -7511,63 +7584,63 @@ const selectParent = (o, r) => {
     )
   ] });
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), f = (v) => {
-    a(v);
+  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), f = (S) => {
+    a(S);
   }, m = () => {
-    const v = l.find((S) => Object.keys(S)[0] === n);
-    if (v) {
-      const S = Object.values(v)[0];
-      S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? p(S) : console.error("Invalid preset structure:", S);
+    const S = l.find((w) => Object.keys(w)[0] === n);
+    if (S) {
+      const w = Object.values(S)[0];
+      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(
-    (v, S) => {
+    (S, w) => {
       p(() => ({
         ...d,
         fontFamily: {
           ...d.fontFamily,
-          [v.replace(/font-/g, "")]: S
+          [S.replace(/font-/g, "")]: w
         }
       }));
     },
     [d],
     200
   ), x = useDebouncedCallback(
-    (v) => {
+    (S) => {
       p(() => ({
         ...d,
-        borderRadius: `${v}px`
+        borderRadius: `${S}px`
       }));
     },
     [d],
     200
-  ), y = useDebouncedCallback(
-    (v, S) => {
+  ), k = useDebouncedCallback(
+    (S, w) => {
       p(() => {
-        const j = get(d, `colors.${v}`);
-        return r ? set(j, 1, S) : set(j, 0, S), {
+        const A = get(d, `colors.${S}`);
+        return r ? set(A, 1, w) : set(A, 0, w), {
           ...d,
           colors: {
             ...d.colors,
-            [v]: j
+            [S]: A
           }
         };
       });
     },
     [d],
     200
-  ), b = (v) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(v.items).map(([S]) => {
-    const j = get(d, `colors.${S}.${r ? 1 : 0}`);
+  ), b = (S) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(S.items).map(([w]) => {
+    const A = get(d, `colors.${w}.${r ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: j,
-          onChange: (E) => y(S, E)
+          value: A,
+          onChange: (E) => k(w, E)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: S.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!S.toLowerCase().includes("foreground") && !S.toLowerCase().includes("border") && !S.toLowerCase().includes("input") && !S.toLowerCase().includes("ring") && !S.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, S);
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: w.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!w.toLowerCase().includes("foreground") && !w.toLowerCase().includes("border") && !w.toLowerCase().includes("input") && !w.toLowerCase().includes("ring") && !w.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, w);
   }) });
   return c("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
@@ -7578,11 +7651,11 @@ const selectParent = (o, r) => {
             "select",
             {
               value: n,
-              onChange: (v) => f(v.target.value),
+              onChange: (S) => f(S.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" }),
-                Array.isArray(l) && l.map((v) => /* @__PURE__ */ jsx("option", { value: Object.keys(v)[0], children: capitalize(Object.keys(v)[0]) }, Object.keys(v)[0]))
+                Array.isArray(l) && l.map((S) => /* @__PURE__ */ jsx("option", { value: Object.keys(S)[0], children: capitalize(Object.keys(S)[0]) }, Object.keys(S)[0]))
               ]
             }
           )
@@ -7599,14 +7672,14 @@ const selectParent = (o, r) => {
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([v, S]) => /* @__PURE__ */ jsx(
+        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([S, w]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: v,
-            value: d.fontFamily[v.replace(/font-/g, "")] || S[Object.keys(S)[0]],
-            onChange: (j) => h(v, j)
+            label: S,
+            value: d.fontFamily[S.replace(/font-/g, "")] || w[Object.keys(w)[0]],
+            onChange: (A) => h(S, A)
           },
-          v
+          S
         )) }),
         (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm", children: g("Border Radius") }),
@@ -7617,7 +7690,7 @@ const selectParent = (o, r) => {
         ] }),
         (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm", children: g("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((v) => b(v)) }, r ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((S) => b(S)) }, r ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -8093,8 +8166,8 @@ const AIUserPrompt = ({ blockId: o }) => {
     (x = f.current) == null || x.focus();
   }, []);
   const h = (x) => {
-    const { usage: y } = x || {};
-    !l && y && g(y), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: k } = x || {};
+    !l && k && g(k), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8352,72 +8425,72 @@ const UndoRedo = () => {
   var x;
   return (x = m.onMount) == null ? void 0 : x.call(m, h);
 }, ...f) => {
-  const m = f[0] || ((B) => {
-    let I = o.get(B);
-    return I || (I = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(B, I), u == null || u(B, A)), I;
+  const m = f[0] || ((_) => {
+    let L = o.get(_);
+    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(_, L), u == null || u(_, B)), L;
   }), h = f[1] || (() => {
-    let B, I;
-    const C = (k) => {
+    let _, L;
+    const v = (y) => {
       try {
-        k();
-      } catch (_) {
-        B || (B = !0, I = _);
+        y();
+      } catch (j) {
+        _ || (_ = !0, L = j);
       }
     };
     do {
-      c.f && C(c.f);
-      const k = /* @__PURE__ */ new Set(), _ = k.add.bind(k);
+      c.f && v(c.f);
+      const y = /* @__PURE__ */ new Set(), j = y.add.bind(y);
       a.forEach((T) => {
-        var L;
-        return (L = r.get(T)) == null ? void 0 : L.l.forEach(_);
-      }), a.clear(), i.forEach(_), i.clear(), l.forEach(_), l.clear(), k.forEach(C), a.size && x();
+        var I;
+        return (I = r.get(T)) == null ? void 0 : I.l.forEach(j);
+      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(v), a.size && x();
     } while (a.size || i.size || l.size);
-    if (B)
-      throw I;
+    if (_)
+      throw L;
   }), x = f[2] || (() => {
-    const B = [], I = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
-    for (; k.length; ) {
-      const _ = k[k.length - 1], T = m(_);
-      if (C.has(_)) {
-        k.pop();
+    const _ = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
+    for (; y.length; ) {
+      const j = y[y.length - 1], T = m(j);
+      if (v.has(j)) {
+        y.pop();
         continue;
       }
-      if (I.has(_)) {
-        n.get(_) === T.n && B.push([_, T]), C.add(_), k.pop();
+      if (L.has(j)) {
+        n.get(j) === T.n && _.push([j, T]), v.add(j), y.pop();
         continue;
       }
-      I.add(_);
-      for (const L of getMountedOrPendingDependents(_, T, r))
-        I.has(L) || k.push(L);
+      L.add(j);
+      for (const I of getMountedOrPendingDependents(j, T, r))
+        L.has(I) || y.push(I);
     }
-    for (let _ = B.length - 1; _ >= 0; --_) {
-      const [T, L] = B[_];
+    for (let j = _.length - 1; j >= 0; --j) {
+      const [T, I] = _[j];
       let P = !1;
-      for (const N of L.d.keys())
+      for (const N of I.d.keys())
         if (N !== T && a.has(N)) {
           P = !0;
           break;
         }
-      P && (y(T), S(T)), n.delete(T);
+      P && (k(T), w(T)), n.delete(T);
     }
-  }), y = f[3] || ((B) => {
-    var I, C;
-    const k = m(B);
-    if (isAtomStateInitialized(k) && (r.has(B) && n.get(B) !== k.n || Array.from(k.d).every(
+  }), k = f[3] || ((_) => {
+    var L, v;
+    const y = m(_);
+    if (isAtomStateInitialized(y) && (r.has(_) && n.get(_) !== y.n || Array.from(y.d).every(
       ([R, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        y(R).n === $
+        k(R).n === $
       )
     )))
-      return k;
-    k.d.clear();
-    let _ = !0;
+      return y;
+    y.d.clear();
+    let j = !0;
     const T = () => {
-      r.has(B) && (S(B), x(), h());
-    }, L = (R) => {
+      r.has(_) && (w(_), x(), h());
+    }, I = (R) => {
       var $;
-      if (isSelfAtom(B, R)) {
+      if (isSelfAtom(_, R)) {
         const H = m(R);
         if (!isAtomStateInitialized(H))
           if (hasInitialValue(R))
@@ -8426,11 +8499,11 @@ const UndoRedo = () => {
             throw new Error("no atom init");
         return returnAtomValue(H);
       }
-      const M = y(R);
+      const M = k(R);
       try {
         return returnAtomValue(M);
       } finally {
-        k.d.set(R, M.n), isPendingPromise(k.v) && addPendingPromiseToDependency(B, k.v, M), ($ = r.get(R)) == null || $.t.add(B), _ || T();
+        y.d.set(R, M.n), isPendingPromise(y.v) && addPendingPromiseToDependency(_, y.v, M), ($ = r.get(R)) == null || $.t.add(_), j || T();
       }
     };
     let P, N;
@@ -8439,100 +8512,100 @@ const UndoRedo = () => {
         return P || (P = new AbortController()), P.signal;
       },
       get setSelf() {
-        return !N && isActuallyWritableAtom(B) && (N = (...R) => {
-          if (!_)
+        return !N && isActuallyWritableAtom(_) && (N = (...R) => {
+          if (!j)
             try {
-              return v(B, ...R);
+              return S(_, ...R);
             } finally {
               x(), h();
             }
         }), N;
       }
-    }, O = k.n;
+    }, O = y.n;
     try {
-      const R = d(B, L, D);
-      return setAtomStateValueOrPromise(B, R, m), isPromiseLike$1(R) && ((I = R.onCancel) == null || I.call(R, () => P == null ? void 0 : P.abort()), R.then(
+      const R = d(_, I, D);
+      return setAtomStateValueOrPromise(_, R, m), isPromiseLike$1(R) && ((L = R.onCancel) == null || L.call(R, () => P == null ? void 0 : P.abort()), R.then(
         T,
         T
-      )), k;
+      )), y;
     } catch (R) {
-      return delete k.v, k.e = R, ++k.n, k;
+      return delete y.v, y.e = R, ++y.n, y;
     } finally {
-      _ = !1, O !== k.n && n.get(B) === O && (n.set(B, k.n), a.add(B), (C = c.c) == null || C.call(c, B));
+      j = !1, O !== y.n && n.get(_) === O && (n.set(_, y.n), a.add(_), (v = c.c) == null || v.call(c, _));
     }
-  }), b = f[4] || ((B) => {
-    const I = [B];
-    for (; I.length; ) {
-      const C = I.pop(), k = m(C);
-      for (const _ of getMountedOrPendingDependents(C, k, r)) {
-        const T = m(_);
-        n.set(_, T.n), I.push(_);
+  }), b = f[4] || ((_) => {
+    const L = [_];
+    for (; L.length; ) {
+      const v = L.pop(), y = m(v);
+      for (const j of getMountedOrPendingDependents(v, y, r)) {
+        const T = m(j);
+        n.set(j, T.n), L.push(j);
       }
     }
-  }), v = f[5] || ((B, ...I) => {
-    let C = !0;
-    const k = (T) => returnAtomValue(y(T)), _ = (T, ...L) => {
+  }), S = f[5] || ((_, ...L) => {
+    let v = !0;
+    const y = (T) => returnAtomValue(k(T)), j = (T, ...I) => {
       var P;
       const N = m(T);
       try {
-        if (isSelfAtom(B, T)) {
+        if (isSelfAtom(_, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
-          const D = N.n, O = L[0];
-          setAtomStateValueOrPromise(T, O, m), S(T), D !== N.n && (a.add(T), (P = c.c) == null || P.call(c, T), b(T));
+          const D = N.n, O = I[0];
+          setAtomStateValueOrPromise(T, O, m), w(T), D !== N.n && (a.add(T), (P = c.c) == null || P.call(c, T), b(T));
           return;
         } else
-          return v(T, ...L);
+          return S(T, ...I);
       } finally {
-        C || (x(), h());
+        v || (x(), h());
       }
     };
     try {
-      return p(B, k, _, ...I);
+      return p(_, y, j, ...L);
     } finally {
-      C = !1;
+      v = !1;
     }
-  }), S = f[6] || ((B) => {
-    var I;
-    const C = m(B), k = r.get(B);
-    if (k && !isPendingPromise(C.v)) {
-      for (const [_, T] of C.d)
-        if (!k.d.has(_)) {
-          const L = m(_);
-          j(_).t.add(B), k.d.add(_), T !== L.n && (a.add(_), (I = c.c) == null || I.call(c, _), b(_));
+  }), w = f[6] || ((_) => {
+    var L;
+    const v = m(_), y = r.get(_);
+    if (y && !isPendingPromise(v.v)) {
+      for (const [j, T] of v.d)
+        if (!y.d.has(j)) {
+          const I = m(j);
+          A(j).t.add(_), y.d.add(j), T !== I.n && (a.add(j), (L = c.c) == null || L.call(c, j), b(j));
         }
-      for (const _ of k.d || [])
-        if (!C.d.has(_)) {
-          k.d.delete(_);
-          const T = E(_);
-          T == null || T.t.delete(B);
+      for (const j of y.d || [])
+        if (!v.d.has(j)) {
+          y.d.delete(j);
+          const T = E(j);
+          T == null || T.t.delete(_);
         }
     }
-  }), j = f[7] || ((B) => {
-    var I;
-    const C = m(B);
-    let k = r.get(B);
-    if (!k) {
-      y(B);
-      for (const _ of C.d.keys())
-        j(_).t.add(B);
-      if (k = {
+  }), A = f[7] || ((_) => {
+    var L;
+    const v = m(_);
+    let y = r.get(_);
+    if (!y) {
+      k(_);
+      for (const j of v.d.keys())
+        A(j).t.add(_);
+      if (y = {
         l: /* @__PURE__ */ new Set(),
-        d: new Set(C.d.keys()),
+        d: new Set(v.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, r.set(B, k), (I = c.m) == null || I.call(c, B), isActuallyWritableAtom(B)) {
-        const _ = () => {
+      }, r.set(_, y), (L = c.m) == null || L.call(c, _), isActuallyWritableAtom(_)) {
+        const j = () => {
           let T = !0;
-          const L = (...P) => {
+          const I = (...P) => {
             try {
-              return v(B, ...P);
+              return S(_, ...P);
             } finally {
               T || (x(), h());
             }
           };
           try {
-            const P = g(B, L);
-            P && (k.u = () => {
+            const P = g(_, I);
+            P && (y.u = () => {
               T = !0;
               try {
                 P();
@@ -8544,27 +8617,27 @@ const UndoRedo = () => {
             T = !1;
           }
         };
-        l.add(_);
+        l.add(j);
       }
     }
-    return k;
-  }), E = f[8] || ((B) => {
-    var I;
-    const C = m(B);
-    let k = r.get(B);
-    if (k && !k.l.size && !Array.from(k.t).some((_) => {
+    return y;
+  }), E = f[8] || ((_) => {
+    var L;
+    const v = m(_);
+    let y = r.get(_);
+    if (y && !y.l.size && !Array.from(y.t).some((j) => {
       var T;
-      return (T = r.get(_)) == null ? void 0 : T.d.has(B);
+      return (T = r.get(j)) == null ? void 0 : T.d.has(_);
     })) {
-      k.u && i.add(k.u), k = void 0, r.delete(B), (I = c.u) == null || I.call(c, B);
-      for (const _ of C.d.keys()) {
-        const T = E(_);
-        T == null || T.t.delete(B);
+      y.u && i.add(y.u), y = void 0, r.delete(_), (L = c.u) == null || L.call(c, _);
+      for (const j of v.d.keys()) {
+        const T = E(j);
+        T == null || T.t.delete(_);
       }
       return;
     }
-    return k;
-  }), w = [
+    return y;
+  }), C = [
     // store state
     o,
     r,
@@ -8582,29 +8655,29 @@ const UndoRedo = () => {
     m,
     h,
     x,
-    y,
+    k,
     b,
-    v,
     S,
-    j,
+    w,
+    A,
     E
-  ], A = {
-    get: (B) => returnAtomValue(y(B)),
-    set: (B, ...I) => {
+  ], B = {
+    get: (_) => returnAtomValue(k(_)),
+    set: (_, ...L) => {
       try {
-        return v(B, ...I);
+        return S(_, ...L);
       } finally {
         x(), h();
       }
     },
-    sub: (B, I) => {
-      const k = j(B).l;
-      return k.add(I), h(), () => {
-        k.delete(I), E(B), h();
+    sub: (_, L) => {
+      const y = A(_).l;
+      return y.add(L), h(), () => {
+        y.delete(L), E(_), h();
       };
     }
   };
-  return Object.defineProperty(A, BUILDING_BLOCKS, { value: w }), A;
+  return Object.defineProperty(B, BUILDING_BLOCKS, { value: C }), B;
 }, INTERNAL_buildStoreRev1 = buildStore, createStore = () => INTERNAL_buildStoreRev1();
 let defaultStore;
 const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), defaultStore), StoreContext = createContext(
@@ -8728,31 +8801,31 @@ function AIChatPanel() {
       content: n,
       timestamp: /* @__PURE__ */ new Date()
     };
-    r((v) => [...v, b]), a(""), i(!0), setTimeout(() => {
-      const v = {
+    r((S) => [...S, b]), a(""), i(!0), setTimeout(() => {
+      const S = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
         content: "This is a sample response from the AI assistant. In a real implementation, this would be replaced with an actual response from the AI model.",
         timestamp: /* @__PURE__ */ new Date()
       };
-      r((S) => [...S, v]), i(!1), d(null);
+      r((w) => [...w, S]), i(!1), d(null);
     }, 1500);
   }, m = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), f());
   }, h = (b) => {
-    var S;
-    const v = (S = b.target.files) == null ? void 0 : S[0];
-    if (v) {
-      const j = new FileReader();
-      j.onload = (E) => {
-        var w;
-        d((w = E.target) == null ? void 0 : w.result);
-      }, j.readAsDataURL(v);
+    var w;
+    const S = (w = b.target.files) == null ? void 0 : w[0];
+    if (S) {
+      const A = new FileReader();
+      A.onload = (E) => {
+        var C;
+        d((C = E.target) == null ? void 0 : C.result);
+      }, A.readAsDataURL(S);
     }
   }, x = () => {
     var b;
     (b = p.current) == null || b.click();
-  }, y = () => {
+  }, k = () => {
     d(null), p.current && (p.current.value = "");
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col rounded-lg bg-background shadow-sm", children: [
@@ -8798,7 +8871,7 @@ function AIChatPanel() {
           size: "icon",
           variant: "destructive",
           className: "absolute right-0 top-0 h-5 w-5 rounded-full p-0",
-          onClick: y,
+          onClick: k,
           children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
         }
       )
@@ -8941,7 +9014,7 @@ const AiAssistant = () => {
   preloadedAttributes: r = [],
   onAttributesChange: n
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [f, m] = useState(""), h = useRef(null), x = useRef(null), y = usePageExternalData();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [f, m] = useState(""), h = useRef(null), x = useRef(null), k = usePageExternalData();
   useEffect(() => {
     l(r);
   }, [r]);
@@ -8951,43 +9024,43 @@ const AiAssistant = () => {
       return;
     }
     if (i) {
-      const A = [...a, { key: i, value: d }];
-      n(A), l(a), c(""), p(""), m("");
+      const B = [...a, { key: i, value: d }];
+      n(B), l(a), c(""), p(""), m("");
     }
-  }, v = (A) => {
-    const B = a.filter((I, C) => C !== A);
-    n(B), l(B);
-  }, S = (A) => {
-    g(A), c(a[A].key), p(a[A].value);
-  }, j = () => {
+  }, S = (B) => {
+    const _ = a.filter((L, v) => v !== B);
+    n(_), l(_);
+  }, w = (B) => {
+    g(B), c(a[B].key), p(a[B].value);
+  }, A = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const A = [...a];
-      A[u] = { key: i, value: d }, n(A), l(A), g(null), c(""), p(""), m("");
+      const B = [...a];
+      B[u] = { key: i, value: d }, n(B), l(B), g(null), c(""), p(""), m("");
     }
-  }, E = (A) => {
-    A.key === "Enter" && !A.shiftKey && (A.preventDefault(), u !== null ? j() : b());
-  }, w = useCallback((A) => {
-    const B = (k) => /[.,!?;:]/.test(k), I = (k, _, T) => {
-      let L = "", P = "";
-      const N = _ > 0 ? k[_ - 1] : "", D = _ < k.length ? k[_] : "";
-      return _ > 0 && (N === "." || !B(N) && N !== " ") && (L = " "), _ < k.length && !B(D) && D !== " " && (P = " "), {
-        text: L + T + P,
-        prefixLength: L.length,
+  }, E = (B) => {
+    B.key === "Enter" && !B.shiftKey && (B.preventDefault(), u !== null ? A() : b());
+  }, C = useCallback((B) => {
+    const _ = (y) => /[.,!?;:]/.test(y), L = (y, j, T) => {
+      let I = "", P = "";
+      const N = j > 0 ? y[j - 1] : "", D = j < y.length ? y[j] : "";
+      return j > 0 && (N === "." || !_(N) && N !== " ") && (I = " "), j < y.length && !_(D) && D !== " " && (P = " "), {
+        text: I + T + P,
+        prefixLength: I.length,
         suffixLength: P.length
       };
-    }, C = x.current;
-    if (C) {
-      const k = C.selectionStart || 0, _ = C.value || "", T = C.selectionEnd || k;
-      if (T > k) {
-        const O = `{{${A}}}`, { text: R } = I(_, k, O), $ = _.slice(0, k) + R + _.slice(T);
+    }, v = x.current;
+    if (v) {
+      const y = v.selectionStart || 0, j = v.value || "", T = v.selectionEnd || y;
+      if (T > y) {
+        const O = `{{${B}}}`, { text: R } = L(j, y, O), $ = j.slice(0, y) + R + j.slice(T);
         p($);
         return;
       }
-      const P = `{{${A}}}`, { text: N } = I(_, k, P), D = _.slice(0, k) + N + _.slice(k);
+      const P = `{{${B}}}`, { text: N } = L(j, y, P), D = j.slice(0, y) + N + j.slice(y);
       p(D);
     }
   }, []);
@@ -8995,8 +9068,8 @@ const AiAssistant = () => {
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (A) => {
-          A.preventDefault(), u !== null ? j() : b();
+        onSubmit: (B) => {
+          B.preventDefault(), u !== null ? A() : b();
         },
         className: "space-y-3",
         children: [
@@ -9012,7 +9085,7 @@ const AiAssistant = () => {
                   id: "attrKey",
                   ref: h,
                   value: i,
-                  onChange: (A) => c(A.target.value),
+                  onChange: (B) => c(B.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9021,7 +9094,7 @@ const AiAssistant = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: w })
+                !isEmpty(k) && /* @__PURE__ */ jsx(NestedPathSelector, { data: k, onSelect: C })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9033,7 +9106,7 @@ const AiAssistant = () => {
                   rows: 2,
                   ref: x,
                   value: d,
-                  onChange: (A) => p(A.target.value),
+                  onChange: (B) => p(B.target.value),
                   onKeyDown: E,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -9046,16 +9119,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((A, B) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((B, _) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: A.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: A.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: B.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: B.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(B), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(B), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => w(_), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(_), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, B)) })
+    ] }, _)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [r, n] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9164,34 +9237,34 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n("outline");
   });
-  const p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = (w) => {
-    w.preventDefault();
-  }, f = (w) => {
-    n(r === w ? null : w);
-  }, 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);
+  const p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = (C) => {
+    C.preventDefault();
+  }, f = (C) => {
+    n(r === C ? null : C);
+  }, m = useSidebarMenuItems(), { t: h } = useTranslation(), x = useMemo(() => [...m, ...p], [m, p]), k = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: r }) ?? first(x), S = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (r !== null) {
-      const w = find(x, { id: r });
-      w && get(w, "view", "standard") === "standard" && (a.current = r, i(get(w, "width", DEFAULT_PANEL_WIDTH)));
+      const C = find(x, { id: r });
+      C && get(C, "view", "standard") === "standard" && (a.current = r, i(get(C, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [r, x]);
-  const S = useMemo(() => {
+  const w = useMemo(() => {
     if (r === null) return 0;
-    const w = find(x, { id: r });
-    return get(w, "view", "standard") === "standard" ? v : l;
-  }, [r, v, l, x]), j = () => {
+    const C = find(x, { id: r });
+    return get(C, "view", "standard") === "standard" ? S : l;
+  }, [r, S, l, x]), A = () => {
     n(a.current);
   };
   useEffect(() => {
     find(x, { id: r }) || n("outline");
   }, [r, x]);
   const E = useCallback(
-    (w) => {
-      f(w);
+    (C) => {
+      f(C);
     },
     [f]
   );
-  return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  return /* @__PURE__ */ jsx("div", { dir: k, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -9201,33 +9274,33 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: x.map((w, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: x.map((C, B) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
                   position: "top",
-                  panelId: w.id,
-                  isActive: r === w.id,
-                  show: () => E(w.id)
+                  panelId: C.id,
+                  isActive: r === C.id,
+                  show: () => E(C.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: h(w.label) }) })
-              ] }, "button-top-" + A)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: h(C.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((w, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: u == null ? void 0 : u.map((C, B) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: w.id,
-                  isActive: r === w.id,
-                  show: () => E(w.id)
+                  panelId: C.id,
+                  isActive: r === C.id,
+                  show: () => E(C.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: h(w.label) }) })
-              ] }, "button-bottom-" + A)) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: h(C.label) }) })
+              ] }, "button-bottom-" + B)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: S },
-                animate: { width: S },
+                initial: { width: w },
+                animate: { width: w },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: r !== null && get(b, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
@@ -9278,7 +9351,7 @@ const RootLayout = () => {
                 ] }) })
               }
             ),
-            r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => j(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${v}px` }, children: [
+            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: `${S}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", "")) })
@@ -9286,7 +9359,7 @@ const RootLayout = () => {
               /* @__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), {}) }) })
             ] }) }),
             " ",
-            r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => j(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${v}px` }, children: [
+            r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => A(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${S}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", "")) })
@@ -9315,7 +9388,7 @@ const RootLayout = () => {
                           /* @__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(Button, { onClick: () => j(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
+                        /* @__PURE__ */ jsx(Button, { onClick: () => A(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
                       ] }),
                       /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {}) }) })
                     ]
@@ -9382,7 +9455,10 @@ const RootLayout = () => {
     });
   }, [o.translations]), useEffect(() => (a !== "SAVED" ? window.onbeforeunload = () => "" : window.onbeforeunload = null, () => {
     window.onbeforeunload = null;
-  }), [a]), /* @__PURE__ */ jsx(l, {});
+  }), [a]), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PrimaryColorCSSVariable, {}),
+    /* @__PURE__ */ jsx(l, {})
+  ] });
 }, ChaiBuilderEditor = (o) => {
   const r = o.onError || noop;
   return /* @__PURE__ */ jsx("div", { className: "h-screen w-screen", children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxs(FlagsProvider, { features: { ...FEATURE_TOGGLES }, children: [
@@ -9472,7 +9548,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  Ve as useTranslation,
+  Ue as useTranslation,
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,