@chaibuilder/sdk 3.2.4 → 3.2.5

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

@@ -1060,7 +1060,7 @@ const undoRedoStateAtom = atom({
   return {
     moveBlocks: (x, b, y) => {
       const C = map(x, (S) => {
-        const B = n.find((j) => j._id === S)._parent || null, w = n.filter((j) => B ? j._parent === B : !j._parent).map((j) => j._id).indexOf(S);
+        const B = n.find((E) => E._id === S)._parent || null, w = n.filter((E) => B ? E._parent === B : !E._parent).map((E) => E._id).indexOf(S);
         return { _id: S, oldParent: B, oldPosition: w };
       }), k = C.find(({ _id: S }) => S === x[0]);
       k && k.oldParent === b && k.oldPosition === y || (l(x, b, y), o({
@@ -2609,8 +2609,8 @@ const getBlockWithChildren = (o, n) => {
             }
             if (f === "styles") {
               const _ = A.map((w) => {
-                for (const j in w)
-                  j !== "_id" && (w[j] = `${STYLES_KEY},${w[j]}`);
+                for (const E in w)
+                  E !== "_id" && (w[E] = `${STYLES_KEY},${w[E]}`);
                 return w;
               });
               c(_);
@@ -3536,9 +3536,9 @@ function detectDropZone(o, n, r, a, i) {
     d = d.parentElement;
   const u = l === "canvas" ? l : d == null ? void 0 : d.getAttribute("data-block-id"), p = d ? getOrientation(d) : "vertical", g = getOrientation(o), m = isLeafBlock(c), f = !m && canAcceptChildBlock(c, a), h = ((S = i.defaultView) == null ? void 0 : S.scrollY) || 0, x = ((A = i.defaultView) == null ? void 0 : A.scrollX) || 0;
   if (l === "canvas" && hasChildBlocks(o)) {
-    const w = getChildBlocks(o), j = w[w.length - 1];
-    if (j) {
-      const v = j.getBoundingClientRect(), E = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = E.width - I - P, R = E.left + x + I;
+    const w = getChildBlocks(o), E = w[w.length - 1];
+    if (E) {
+      const v = E.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = j.width - I - P, R = j.left + x + I;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
@@ -3548,8 +3548,8 @@ function detectDropZone(o, n, r, a, i) {
           width: D,
           height: 4
         },
-        targetElement: j,
-        targetBlockId: j.getAttribute("data-block-id"),
+        targetElement: E,
+        targetBlockId: E.getAttribute("data-block-id"),
         targetParentId: "canvas",
         isEmpty: !1,
         confidence: 1
@@ -3559,18 +3559,18 @@ function detectDropZone(o, n, r, a, i) {
   if (f && !m && hasChildBlocks(o)) {
     const w = detectGapZone(o, n, r, g);
     if (w) {
-      const j = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), E = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = getChildBlocks(o), R = getSiblingsInSameRow(D, w.before, g);
+      const E = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, D = getChildBlocks(o), R = getSiblingsInSameRow(D, w.before, g);
       let $ = 0;
       if (R.forEach((F) => {
         const O = F.getBoundingClientRect();
         O.height > $ && ($ = O.height);
       }), g === "vertical") {
-        const F = E.width - I - P, O = E.left + x + I;
+        const F = j.width - I - P, O = j.left + x + I;
         return {
           position: "after",
           placeholderOrientation: "horizontal",
           rect: {
-            top: j.bottom + h,
+            top: E.bottom + h,
             left: O,
             width: F,
             height: 4
@@ -3583,13 +3583,13 @@ function detectDropZone(o, n, r, a, i) {
           // High confidence for gap zones
         };
       } else {
-        const F = j.top + h, O = $ > 0 ? $ : Math.max(j.height, v.height);
+        const F = E.top + h, O = $ > 0 ? $ : Math.max(E.height, v.height);
         return {
           position: "after",
           placeholderOrientation: "vertical",
           rect: {
             top: F,
-            left: j.right + x,
+            left: E.right + x,
             width: 4,
             height: O
           },
@@ -3605,13 +3605,13 @@ function detectDropZone(o, n, r, a, i) {
   if (d && u) {
     const w = detectParentEdgeProximity(d, n, r, p);
     if (w) {
-      const j = d.getBoundingClientRect(), v = window.getComputedStyle(d), E = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, P = parseFloat(v.paddingBottom) || 0, D = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = p === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
+      const E = d.getBoundingClientRect(), v = window.getComputedStyle(d), j = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, P = parseFloat(v.paddingBottom) || 0, D = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = p === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
       if (w === "start") {
         const O = getChildBlocks(d)[0];
         if (O) {
           const L = O.getBoundingClientRect();
           if (p === "vertical") {
-            const T = j.width - E - N, M = j.left + R + E;
+            const T = E.width - j - N, M = E.left + R + j;
             return {
               position: "before",
               placeholderOrientation: $,
@@ -3627,7 +3627,7 @@ function detectDropZone(o, n, r, a, i) {
               confidence: 0.9
             };
           } else {
-            const T = j.top + D + I, M = F.maxHeight > 0 ? F.maxHeight : j.height - I - P;
+            const T = E.top + D + I, M = F.maxHeight > 0 ? F.maxHeight : E.height - I - P;
             return {
               position: "before",
               placeholderOrientation: $,
@@ -3649,7 +3649,7 @@ function detectDropZone(o, n, r, a, i) {
         if (L) {
           const T = L.getBoundingClientRect();
           if (p === "vertical") {
-            const M = j.width - E - N, H = j.left + R + E;
+            const M = E.width - j - N, H = E.left + R + j;
             return {
               position: "after",
               placeholderOrientation: $,
@@ -3665,7 +3665,7 @@ function detectDropZone(o, n, r, a, i) {
               confidence: 0.9
             };
           } else {
-            const M = j.top + D + I, H = F.maxHeight > 0 ? F.maxHeight : j.height - I - P;
+            const M = E.top + D + I, H = F.maxHeight > 0 ? F.maxHeight : E.height - I - P;
             return {
               position: "after",
               placeholderOrientation: $,
@@ -3760,11 +3760,11 @@ function getSiblingsInSameRow(o, n, r) {
 }
 function calculatePlaceholderRect(o, n, r, a, i) {
   var I, P;
-  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, u = ((P = i.defaultView) == null ? void 0 : P.scrollX) || 0, p = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, S = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, _ = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", j = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(j, o, w);
-  let E = 0, N = 0;
+  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, u = ((P = i.defaultView) == null ? void 0 : P.scrollX) || 0, p = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, S = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, _ = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", E = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(E, o, w);
+  let j = 0, N = 0;
   if (v.forEach((D) => {
     const R = D.getBoundingClientRect();
-    R.height > E && (E = R.height), R.width > N && (N = R.width);
+    R.height > j && (j = R.height), R.width > N && (N = R.width);
   }), r === "before")
     if (a === "horizontal") {
       const D = C ? C.width - k - S : l.width, R = C ? C.left + u + k : l.left + u;
@@ -3775,7 +3775,7 @@ function calculatePlaceholderRect(o, n, r, a, i) {
         height: 4
       };
     } else {
-      const D = l.top + d, R = w === "horizontal" && E > 0 ? E : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const D = l.top + d, R = w === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: D,
         left: l.left + u - m - 2,
@@ -3793,7 +3793,7 @@ function calculatePlaceholderRect(o, n, r, a, i) {
         height: 4
       };
     } else {
-      const D = l.top + d, R = w === "horizontal" && E > 0 ? E : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const D = l.top + d, R = w === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: D,
         left: l.right + u + f - 2,
@@ -3896,11 +3896,11 @@ const useBlockDrop = () => {
       if (_)
         d([o._id], S === null ? void 0 : S, A), g(), p([]), u([o._id]);
       else {
-        const w = o._type || o.type, j = o != null && o.blocks ? isFunction(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
+        const w = o._type || o.type, E = o != null && o.blocks ? isFunction(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
         c(
           w === "PartialBlock" ? {
             blocks: [{ _type: w, _id: "partial-block", partialBlockId: o.partialBlockId }]
-          } : (j == null ? void 0 : j.length) > 0 ? { blocks: [...j] } : { type: w },
+          } : (E == null ? void 0 : E.length) > 0 ? { blocks: [...E] } : { type: w },
           S,
           A
         );
@@ -4018,10 +4018,10 @@ const LEAF_BLOCK_TYPES = [
             d.current = null;
             return;
           }
-          const j = S === "up" ? -_ : _;
-          f.scrollBy(0, j);
-          const v = f.scrollY, E = v > 0, N = v + h < b, I = u.current, P = h - u.current;
-          S === "up" && E && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || S === "down" && N && P < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
+          const E = S === "up" ? -_ : _;
+          f.scrollBy(0, E);
+          const v = f.scrollY, j = v > 0, N = v + h < b, I = u.current, P = h - u.current;
+          S === "up" && j && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || S === "down" && N && P < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
         };
         d.current === null && (d.current = requestAnimationFrame(w));
       }
@@ -4076,17 +4076,17 @@ const LEAF_BLOCK_TYPES = [
           return;
         _ = canAcceptChildBlock(B, C);
       } else {
-        let v = h.parentElement, E = "Box";
+        let v = h.parentElement, j = "Box";
         for (; v && !v.hasAttribute("data-block-id"); )
           v = v.parentElement;
-        if (v && (E = v.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
+        if (v && (j = v.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
           return;
-        _ = canAcceptChildBlock(E, C);
+        _ = canAcceptChildBlock(j, C);
       }
       if (!_)
         return;
       i(A.targetParentId);
-      const j = A.targetParentId || b;
+      const E = A.targetParentId || b;
       r({
         isVisible: !0,
         isValid: !0,
@@ -4098,7 +4098,7 @@ const LEAF_BLOCK_TYPES = [
         width: A.rect.width,
         height: A.rect.height,
         targetBlockId: A.targetBlockId,
-        targetParentId: j
+        targetParentId: E
       }), removeDropTargetAttributes(c), A.targetElement.setAttribute("data-drop-target", "true");
     }, 300),
     [c, o, r, a, i, l, p]
@@ -5561,14 +5561,14 @@ const RichTextEditor = memo(
     const r = "content", { document: a } = useFrame(), { editingBlockId: i, editingItemIndex: l, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [u, p] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), f = useUpdateBlocksProps(), { selectedLang: h } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = i, { blockContent: C, blockType: k } = useMemo(() => {
       var N;
       const w = o._type;
-      let j = o[r];
+      let E = o[r];
       const v = getRegisteredChaiBlock(o._type);
-      return h && ((N = v == null ? void 0 : v.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (j = get(o, `${r}-${h}`)), { blockContent: j, blockType: w };
+      return h && ((N = v == null ? void 0 : v.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (E = get(o, `${r}-${h}`)), { blockContent: E, blockType: w };
     }, [o, h]), S = useCallback(
       (w) => {
         var v;
-        const j = w || ((v = g.current) == null ? void 0 : v.innerText);
-        f([y], { [r]: j }), p(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
+        const E = w || ((v = g.current) == null ? void 0 : v.innerText);
+        f([y], { [r]: E }), p(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
       [y, f, c, x, h]
     ), A = useDebouncedCallback(
@@ -5580,17 +5580,17 @@ const RichTextEditor = memo(
     ), B = useCallback(
       (w) => {
         w.preventDefault(), y && (b.current = y), S(), setTimeout(() => {
-          const j = b.current;
-          b.current = null, x([j]);
+          const E = b.current;
+          b.current = null, x([E]);
         }, 100);
       },
       [x, y, h]
     );
     useEffect(() => {
-      var E;
+      var j;
       if (!y) return;
-      const w = `[data-block-id="${y}"]`, j = l >= 0 ? `[data-block-index="${l}"]` : "", v = a.querySelector(`${w}${j}`);
-      v && ((E = v == null ? void 0 : v.classList) == null || E.add("sr-only"), p(v));
+      const w = `[data-block-id="${y}"]`, E = l >= 0 ? `[data-block-index="${l}"]` : "", v = a.querySelector(`${w}${E}`);
+      v && ((j = v == null ? void 0 : v.classList) == null || j.add("sr-only"), p(v));
     }, [y, k, a, l]);
     const _ = useMemo(() => u ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
       RichTextEditor,
@@ -5671,7 +5671,7 @@ const RichTextEditor = memo(
       onDragStart: S.onDragStart,
       onDragEnd: S.onDragEnd
     } : P;
-  }, [l._id, l._type, h, k, C, S, a]), j = useMemo(
+  }, [l._id, l._type, h, k, C, S, a]), E = useMemo(
     () => ({
       blockProps: w,
       inBuilder: b === "edit",
@@ -5682,10 +5682,10 @@ const RichTextEditor = memo(
       ...o
     }),
     [b, w, d, u, A, B, _, o]
-  ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), E = useMemo(() => get(l, "_show", !0), [l]);
-  if (isNull(f) || !E) return null;
+  ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), j = useMemo(() => get(l, "_show", !0), [l]);
+  if (isNull(f) || !j) return null;
   let N = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
-    ...j,
+    ...E,
     children: r({
       _id: l._id,
       _type: l._type,
@@ -5868,7 +5868,7 @@ const RichTextEditor = memo(
     /* @__PURE__ */ jsx("p", { className: "font-semibold", children: o("Oops! Something went wrong.") }),
     /* @__PURE__ */ jsx("p", { children: o("Please try again.") })
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-CelZf2Qf.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-Dnh6rQUv.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -6213,11 +6213,11 @@ const DataBindingSelector = ({
           if (S !== A)
             C.chain().deleteSelection().insertContent(k).run();
           else {
-            const { state: _ } = C, w = _.selection.from, j = _.doc.textBetween(Math.max(0, w - 1), w), v = _.doc.textBetween(w, Math.min(w + 1, _.doc.content.size));
-            let E = "";
-            w > 0 && j !== " " && !h(j) && (E = " ");
+            const { state: _ } = C, w = _.selection.from, E = _.doc.textBetween(Math.max(0, w - 1), w), v = _.doc.textBetween(w, Math.min(w + 1, _.doc.content.size));
+            let j = "";
+            w > 0 && E !== " " && !h(E) && (j = " ");
             let N = "";
-            v && v !== " " && !h(v) && (N = " "), C.chain().insertContent(E + k + N).run();
+            v && v !== " " && !h(v) && (N = " "), C.chain().insertContent(j + k + N).run();
           }
           setTimeout(() => n(C.getHTML(), {}, r), 100);
           return;
@@ -6225,12 +6225,12 @@ const DataBindingSelector = ({
       } else {
         const C = b, k = C.selectionStart || 0, S = C.value || "", A = C.selectionEnd || k;
         if (A > k) {
-          const v = `{{${m}}}`, { text: E } = x(S, k, v), N = S.slice(0, k) + E + S.slice(A);
+          const v = `{{${m}}}`, { text: j } = x(S, k, v), N = S.slice(0, k) + j + S.slice(A);
           n(N, {}, r);
           return;
         }
-        const _ = `{{${m}}}`, { text: w } = x(S, k, _), j = S.slice(0, k) + w + S.slice(k);
-        n(j, {}, r);
+        const _ = `{{${m}}}`, { text: w } = x(S, k, _), E = S.slice(0, k) + w + S.slice(k);
+        n(E, {}, r);
       }
     },
     [r, n, a, d == null ? void 0 : d._id, u]
@@ -6251,13 +6251,13 @@ const DataBindingSelector = ({
   pageTypes: n,
   onChange: r
 }) => {
-  var j;
-  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, E) => []), [l, c] = useState(!1), [d, u] = useState(!1), [p, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (j = n == null ? void 0 : n.find((v) => v.key === p)) == null ? void 0 : j.name;
+  var E;
+  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, j) => []), [l, c] = useState(!1), [d, u] = useState(!1), [p, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (E = n == null ? void 0 : n.find((v) => v.key === p)) == null ? void 0 : E.name;
   useEffect(() => {
     if (f(""), x([]), y(-1), u(!1), !o || l || !startsWith(o, "pageType:")) return;
-    const v = split(o, ":"), E = get(v, 1, "page") || "page";
-    g(E), (async () => {
-      const N = await i(E, [get(v, 2, "page")]);
+    const v = split(o, ":"), j = get(v, 1, "page") || "page";
+    g(j), (async () => {
+      const N = await i(j, [get(v, 2, "page")]);
       N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
@@ -6266,23 +6266,23 @@ const DataBindingSelector = ({
       if (isEmpty(v))
         x([]);
       else {
-        const E = await i(p, v);
-        x(E);
+        const j = await i(p, v);
+        x(j);
       }
       c(!1), y(-1);
     },
     [p],
     300
   ), A = (v) => {
-    const E = ["pageType", p, v.id];
-    E[1] && (r(E.join(":")), f(v.name), u(!1), x([]), y(-1));
+    const j = ["pageType", p, v.id];
+    j[1] && (r(j.join(":")), f(v.name), u(!1), x([]), y(-1));
   }, B = (v) => {
     switch (v.key) {
       case "ArrowDown":
-        v.preventDefault(), y((E) => E < h.length - 1 ? E + 1 : E);
+        v.preventDefault(), y((j) => j < h.length - 1 ? j + 1 : j);
         break;
       case "ArrowUp":
-        v.preventDefault(), y((E) => E > 0 ? E - 1 : E);
+        v.preventDefault(), y((j) => j > 0 ? j - 1 : j);
         break;
       case "Enter":
         if (v.preventDefault(), h.length === 0) return;
@@ -6328,11 +6328,11 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (v, E) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (v, j) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => A(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : E === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : j === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           v.name,
           " ",
@@ -6437,7 +6437,7 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-MLnVHEnQ.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-BGHSjMUE.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
   const c = useRef(null), [d, u] = useState(!1), p = useRTEditor({
     blockId: o,
     value: a,
@@ -6693,7 +6693,7 @@ const DataBindingSelector = ({
   if (d)
     return null;
   if (p.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: i });
-  const j = A == null ? void 0 : A.includes(n.replace("root.", ""));
+  const E = A == null ? void 0 : A.includes(n.replace("root.", ""));
   if (p.type === "array") {
     const N = B === n;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
@@ -6730,14 +6730,14 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const v = n.replace("root.", ""), E = A.includes(v) && !isEmpty(f) && isEmpty(g);
+  const v = n.replace("root.", ""), j = A.includes(v) && !isEmpty(f) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
     p.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs("label", { htmlFor: n, className: p.type === "object" ? "pb-2" : "", children: [
           a,
           " ",
-          j && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          E && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
@@ -6749,7 +6749,7 @@ const DataBindingSelector = ({
         ] }) })
       ] }),
       !p.enum && !p.oneOf && C && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
-        E ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+        j ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -6906,8 +6906,8 @@ function BlockSettings() {
     try {
       const { schema: _, uiSchema: w } = getBlockFormSchemas(B);
       if (B === "Repeater") {
-        const j = get(n, "repeaterItems", "");
-        startsWith(j, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
+        const E = get(n, "repeaterItems", "");
+        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
       }
       return { schema: _, uiSchema: w };
     } catch {
@@ -7170,35 +7170,35 @@ const BlockStylingProps = () => {
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
   const [n, r] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: g } = o, [m, f] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [h, x] = useState(!1), [b, y] = useState(""), [C, k] = useState(!1), [S, A] = useState(!1);
   useEffect(() => {
-    const { value: v, unit: E } = getClassValueAndUnit(l);
-    if (E === "") {
+    const { value: v, unit: j } = getClassValueAndUnit(l);
+    if (j === "") {
       i(v), f(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
       return;
     }
-    f(E), i(E === "class" || isEmpty(v) ? "" : v);
+    f(j), i(j === "class" || isEmpty(v) ? "" : v);
   }, [l, u, p]);
   const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), _ = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
     (v = !1) => {
-      const E = getUserInputValues(`${a}`, p);
-      if (get(E, "error", !1)) {
+      const j = getUserInputValues(`${a}`, p);
+      if (get(j, "error", !1)) {
         x(!0);
         return;
       }
-      const N = get(E, "unit") !== "" ? get(E, "unit") : m;
+      const N = get(j, "unit") !== "" ? get(j, "unit") : m;
       if (N === "auto" || N === "none") {
         B(`${d}${N}`);
         return;
       }
-      if (get(E, "value") === "")
+      if (get(j, "value") === "")
         return;
-      const P = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      const P = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       v ? _(P) : B(P);
     },
     [B, _, a, m, d, p]
-  ), j = useCallback(
+  ), E = useCallback(
     (v) => {
-      const E = getUserInputValues(`${a}`, p);
-      if (get(E, "error", !1)) {
+      const j = getUserInputValues(`${a}`, p);
+      if (get(j, "error", !1)) {
         x(!0);
         return;
       }
@@ -7206,9 +7206,9 @@ const BlockStylingProps = () => {
         B(`${d}${v}`);
         return;
       }
-      if (get(E, "value") === "")
+      if (get(j, "value") === "")
         return;
-      const N = get(E, "unit") !== "" ? get(E, "unit") : v, P = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      const N = get(j, "unit") !== "" ? get(j, "unit") : v, P = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       B(P);
     },
     [B, a, d, p]
@@ -7239,8 +7239,8 @@ const BlockStylingProps = () => {
             if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
             v.preventDefault(), A(!0);
-            const E = parseInt$1(v.target.value);
-            let N = isNaN$1(E) ? 0 : E;
+            const j = parseInt$1(v.target.value);
+            let N = isNaN$1(j) ? 0 : j;
             v.keyCode === 38 && (N += 1), v.keyCode === 40 && (N -= 1);
             const I = `${N}`, D = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
             _(D);
@@ -7253,8 +7253,8 @@ const BlockStylingProps = () => {
             x(!1), i(v.target.value);
           },
           onClick: (v) => {
-            var E;
-            (E = v == null ? void 0 : v.target) == null || E.select(), r(!1);
+            var j;
+            (j = v == null ? void 0 : v.target) == null || j.select(), r(!1);
           },
           value: C ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
@@ -7282,7 +7282,7 @@ const BlockStylingProps = () => {
             units: p,
             current: m,
             onSelect: (v) => {
-              r(!1), f(v), j(v);
+              r(!1), f(v), E(v);
             }
           }
         ) })
@@ -7295,14 +7295,14 @@ const BlockStylingProps = () => {
         onDragEnd: (v) => {
           if (y(() => ""), k(!1), isEmpty(v))
             return;
-          const E = `${v}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
+          const j = `${v}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
           B(I);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
           y(v);
-          const E = `${v}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
+          const j = `${v}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
           _(I);
         },
         currentValue: a,
@@ -7768,9 +7768,9 @@ const COLOR_PROP = {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: i, onEmitChange: l = () => {
   }, units: c, negative: d = !1 } = o, [u] = useDarkMode(), [p] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(i), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
     (_, w = !0) => {
-      const j = { dark: u, mq: g, mod: p, cls: _, property: i, fullCls: "" };
-      (u || p !== "") && (j.mq = "xs");
-      const v = generateFullClsName(j);
+      const E = { dark: u, mq: g, mod: p, cls: _, property: i, fullCls: "" };
+      (u || p !== "") && (E.mq = "xs");
+      const v = generateFullClsName(E);
       f(x, [v], w);
     },
     [x, u, g, p, i, f]
@@ -8125,10 +8125,10 @@ function ManualClasses() {
   }, w = () => {
     const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(_);
     g(f, L, !0), x("");
-  }, [j, v] = useState([]), E = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
+  }, [E, v] = useState([]), j = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
     const T = L.trim().toLowerCase(), M = T.match(/.+:/g);
     let H = [], W = [];
-    if (E && (T === "" ? W = Object.entries(b).map(([V, U]) => ({
+    if (j && (T === "" ? W = Object.entries(b).map(([V, U]) => ({
       name: U.name,
       id: `${V}`,
       isDesignToken: !0
@@ -8166,12 +8166,21 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (L) => {
-        L.key === "Enter" && h.trim() !== "" && j.length === 0 && w();
+        if (L.key === "Enter" && h.trim() !== "" && (L.preventDefault(), w()), L.key === "Tab" && E.length > 0) {
+          L.preventDefault();
+          const T = new KeyboardEvent("keydown", {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            bubbles: !0
+          });
+          L.target.dispatchEvent(T);
+        }
       },
       onChange: (L, { newValue: T }) => x(T),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [h, d, o, j.length]
+    [h, d, o, E.length]
   ), $ = (L) => {
     const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(_);
     m(f, [L]), g(f, T, !0), r(""), i(-1);
@@ -8185,25 +8194,24 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1", children: [
-        /* @__PURE__ */ jsx("span", { children: d(E ? "Styles" : "Classes") }),
+        /* @__PURE__ */ jsx("span", { children: d(j ? "Styles" : "Classes") }),
         A && /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: F, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: d("Copy classes to clipboard") }) })
         ] })
       ] }),
-      E && /* @__PURE__ */ jsx(Button, { variant: "link", className: "underline", onClick: () => l("design-tokens"), children: d("Design Tokens") })
+      j && /* @__PURE__ */ jsx(Button, { variant: "link", className: "underline", onClick: () => l("design-tokens"), children: d("Design Tokens") })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-x-3", children: [
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: j,
+          suggestions: E,
           onSuggestionsFetchRequested: N,
           onSuggestionsClearRequested: I,
           getSuggestionValue: P,
           renderSuggestion: D,
           inputProps: R,
-          highlightFirstSuggestion: !0,
           onSuggestionSelected: (L, { suggestionValue: T }) => {
             const M = _(T);
             g(f, [M], !0), x("");
@@ -8773,7 +8781,7 @@ const BlockCard = ({
     A.current && (clearTimeout(A.current), A.current = null), A.current = setTimeout(() => {
       A.current && k(N);
     }, 400);
-  }, j = () => {
+  }, E = () => {
     c != null && c.id && p(c.id);
   };
   if (u)
@@ -8781,7 +8789,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const v = filter(S, (N, I) => I % 2 === 0), E = filter(S, (N, I) => I % 2 === 1);
+  const v = filter(S, (N, I) => I % 2 === 0), j = filter(S, (N, I) => I % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: g, setValue: m }),
     /* @__PURE__ */ jsx("div", { className: "relative flex h-full max-h-full flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: `flex h-full flex-1 pt-2 ${r ? "flex-col" : ""}`, children: [
@@ -8800,7 +8808,7 @@ const BlockCard = ({
                   className: `no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto ${r ? "" : "pb-20"}`,
                   children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: g ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("Failed to load the UI library. Try again") }),
-                    /* @__PURE__ */ jsxs(Button, { onClick: j, variant: "outline", size: "sm", className: "gap-2", children: [
+                    /* @__PURE__ */ jsxs(Button, { onClick: E, variant: "outline", size: "sm", className: "gap-2", children: [
                       /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
                       B("Retry")
                     ] })
@@ -8849,7 +8857,7 @@ const BlockCard = ({
                 },
                 `block-${I}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((N, I) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: j.map((N, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -9003,14 +9011,14 @@ const BlockCard = ({
       (I) => reject(filter(values(_), { group: I }), { hidden: !0 }).length > 0
     ) : o.filter((I) => reject(filter(values(n), { group: I }), { hidden: !0 }).length > 0),
     [n, _, o, u]
-  ), j = useMemo(
+  ), E = useMemo(
     () => sortBy(w, (I) => CORE_GROUPS.indexOf(I) === -1 ? 99 : CORE_GROUPS.indexOf(I)),
     [w]
-  ), v = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? j : [h], [j, h]);
+  ), v = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), j = useMemo(() => h === "all" ? E : [h], [E, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: u, setValue: p }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden pt-2", children: [
-      !l && j.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      !l && E.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -9022,7 +9030,7 @@ const BlockCard = ({
           },
           "sidebar-all"
         ),
-        j.map((I) => /* @__PURE__ */ jsx(
+        E.map((I) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => B(I),
@@ -9037,13 +9045,13 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `h-full flex-1 overflow-hidden ${!l && j.length > 0 ? "w-3/4" : "w-full"}`,
+          className: `h-full flex-1 overflow-hidden ${!l && E.length > 0 ? "w-3/4" : "w-full"}`,
           children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: w.length === 0 && u ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
             c("No blocks found matching"),
             ' "',
             u,
             '"'
-          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: E.map((I, P) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: j.map((I, P) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(I.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + i, children: reject(
               h === "all" ? filter(values(v), { group: I }) : values(v),
@@ -9537,13 +9545,13 @@ const useStructureValidation = () => {
     T.stopPropagation(), B && o.toggle();
   }, w = (T) => {
     T.isInternal && (d = T.isOpen, T.isOpen && T.close());
-  }, j = (T) => {
+  }, E = (T) => {
     T.isInternal && d !== null && (d ? T.open() : T.close(), d = null);
-  }, [v, E] = useAtom$1(currentAddSelection), N = () => {
+  }, [v, j] = useAtom$1(currentAddSelection), N = () => {
     var T;
-    I(), o.parent.isSelected || E((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+    I(), o.parent.isSelected || j((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
   }, I = () => {
-    E(null);
+    j(null);
   }, P = (T) => {
     I(), T.stopPropagation(), !o.isOpen && B && o.toggle(), k(T);
   };
@@ -9592,7 +9600,7 @@ const useStructureValidation = () => {
       "data-node-id": f,
       ref: r,
       onDragStart: () => w(o),
-      onDragEnd: () => j(o),
+      onDragEnd: () => E(o),
       onDragOver: (T) => {
         T.preventDefault(), D(f, "yes");
       },
@@ -10133,13 +10141,13 @@ const useStructureValidation = () => {
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, i] = React.useState(""), [l, c] = React.useState(!1), d = useBuilderProp("themePresets", []), u = useBuilderProp("themePanelComponent", null), { hasPermission: p } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0), f = useIncrementActionsCount();
-  (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((j) => {
-    d.push(j);
+  (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((E) => {
+    d.push(E);
   });
   const [h, x] = useTheme(), b = useThemeOptions(), { t: y } = useTranslation(), C = React.useCallback(
-    (j) => {
+    (E) => {
       const v = { ...h };
-      setPreviousTheme(v), x(j), f(), toast.success("Theme updated", {
+      setPreviousTheme(v), x(E), f(), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
@@ -10155,56 +10163,56 @@ const useStructureValidation = () => {
     },
     [h, x, f]
   ), k = () => {
-    const j = d.find((v) => Object.keys(v)[0] === a);
-    if (j) {
-      const v = Object.values(j)[0];
+    const E = d.find((v) => Object.keys(v)[0] === a);
+    if (E) {
+      const v = Object.values(E)[0];
       v && typeof v == "object" && "fontFamily" in v && "borderRadius" in v && "colors" in v ? (C(v), i(""), f()) : console.error("Invalid preset structure:", v);
     } else
       console.error("Preset not found:", a);
-  }, S = (j) => {
-    C(j), i(""), f();
+  }, S = (E) => {
+    C(E), i(""), f();
   }, A = useDebouncedCallback(
-    (j, v) => {
+    (E, v) => {
       x(() => ({
         ...h,
         fontFamily: {
           ...h.fontFamily,
-          [j.replace(/font-/g, "")]: v
+          [E.replace(/font-/g, "")]: v
         }
       })), f();
     },
     [h, f],
     200
   ), B = React.useCallback(
-    (j) => {
+    (E) => {
       x(() => ({
         ...h,
-        borderRadius: `${j}px`
+        borderRadius: `${E}px`
       })), f();
     },
     [h, f]
   ), _ = useDebouncedCallback(
-    (j, v) => {
+    (E, v) => {
       x(() => {
-        const E = get(h, `colors.${j}`);
-        return n ? set(E, 1, v) : set(E, 0, v), f(), {
+        const j = get(h, `colors.${E}`);
+        return n ? set(j, 1, v) : set(j, 0, v), f(), {
           ...h,
           colors: {
             ...h.colors,
-            [j]: E
+            [E]: j
           }
         };
       });
     },
     [h, f],
     200
-  ), w = (j) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(j.items).map(([v]) => {
-    const E = get(h, `colors.${v}.${n ? 1 : 0}`);
-    return E ? /* @__PURE__ */ jsxs("div", { id: `theme-${v}`, className: "mt-1 flex items-center gap-x-2", children: [
+  ), w = (E) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(E.items).map(([v]) => {
+    const j = get(h, `colors.${v}.${n ? 1 : 0}`);
+    return j ? /* @__PURE__ */ jsxs("div", { id: `theme-${v}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: E,
+          value: j,
           onChange: (N) => _(v, N)
         }
       ),
@@ -10224,9 +10232,9 @@ const useStructureValidation = () => {
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: i, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: y("Select preset") }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((j) => {
-              const v = Object.keys(j)[0], E = v.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(E) }, v);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((E) => {
+              const v = Object.keys(E)[0], j = v.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(j) }, v);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: y("Apply") }) })
@@ -10238,14 +10246,14 @@ const useStructureValidation = () => {
           /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 text-gray-600" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: y("Typography") })
         ] }),
-        (b == null ? void 0 : b.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(b.fontFamily).map(([j, v]) => /* @__PURE__ */ jsx(
+        (b == null ? void 0 : b.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(b.fontFamily).map(([E, v]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: j,
-            value: h.fontFamily[j.replace(/font-/g, "")] || v[Object.keys(v)[0]],
-            onChange: (E) => A(j, E)
+            label: E,
+            value: h.fontFamily[E.replace(/font-/g, "")] || v[Object.keys(v)[0]],
+            onChange: (j) => A(E, j)
           },
-          j
+          E
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (b == null ? void 0 : b.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -10271,7 +10279,7 @@ const useStructureValidation = () => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (j) => r(j),
+                  onCheckedChange: (E) => r(E),
                   "aria-label": y("Toggle dark mode"),
                   className: "mx-1"
                 }
@@ -10279,7 +10287,7 @@ const useStructureValidation = () => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: b.colors.map((j) => w(j)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: b.colors.map((E) => w(E)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: y("Loading...") }), children: l && g && /* @__PURE__ */ jsx(
           LazyCssImportModal,
@@ -11039,8 +11047,8 @@ const UndoRedo = () => {
       r(w), i(a), c(""), u(""), f("");
     }
   }, k = (w) => {
-    const j = a.filter((v, E) => E !== w);
-    r(j), i(j);
+    const E = a.filter((v, j) => j !== w);
+    r(E), i(E);
   }, S = (w) => {
     g(w), c(a[w].key), u(a[w].value);
   }, A = () => {
@@ -11055,17 +11063,17 @@ const UndoRedo = () => {
   }, B = (w) => {
     w.key === "Enter" && !w.shiftKey && (w.preventDefault(), p !== null ? A() : C());
   }, _ = useCallback((w) => {
-    const j = (N) => /[.,!?;:]/.test(N), v = (N, I, P) => {
+    const E = (N) => /[.,!?;:]/.test(N), v = (N, I, P) => {
       let D = "", R = "";
       const $ = I > 0 ? N[I - 1] : "", F = I < N.length ? N[I] : "";
-      return I > 0 && ($ === "." || !j($) && $ !== " ") && (D = " "), I < N.length && !j(F) && F !== " " && (R = " "), {
+      return I > 0 && ($ === "." || !E($) && $ !== " ") && (D = " "), I < N.length && !E(F) && F !== " " && (R = " "), {
         text: D + P + R,
         prefixLength: D.length,
         suffixLength: R.length
       };
-    }, E = x.current;
-    if (E) {
-      const N = E.selectionStart || 0, I = E.value || "", P = E.selectionEnd || N;
+    }, j = x.current;
+    if (j) {
+      const N = j.selectionStart || 0, I = j.value || "", P = j.selectionEnd || N;
       if (P > N) {
         const O = `{{${w}}}`, { text: L } = v(I, N, O), T = I.slice(0, N) + L + I.slice(P);
         u(T);
@@ -11129,16 +11137,16 @@ const UndoRedo = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((w, j) => /* @__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((w, E) => /* @__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: w.key }),
         /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: w.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(j), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(j), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(E), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(E), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
-    ] }, j)) })
+    ] }, E)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), i = useUpdateBlocksProps(), l = `${get(a, "0.prop")}_attrs`;
@@ -11382,7 +11390,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     ] })
   ] });
 }, ManageDesignTokens = ({}) => {
-  const { t: o } = useTranslation(), [n, r] = useAtom$1(chaiDesignTokensAtom), [a, i] = useState(!1), [l, c] = useState(null), [d, u] = useState(!1), [p, g] = useState(!1), [m, f] = useState(""), [h, x] = useState(""), [b, y] = useState(""), [C, k] = useState(""), [S, A] = useState(""), [B, _] = useState(""), w = useIncrementActionsCount(), j = (L) => {
+  const { t: o } = useTranslation(), [n, r] = useAtom$1(chaiDesignTokensAtom), [a, i] = useState(!1), [l, c] = useState(null), [d, u] = useState(!1), [p, g] = useState(!1), [m, f] = useState(""), [h, x] = useState(""), [b, y] = useState(""), [C, k] = useState(""), [S, A] = useState(""), [B, _] = useState(""), w = useIncrementActionsCount(), E = (L) => {
     const T = L.trim();
     return T.length === 0 || T.length > 25 ? !1 : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(T);
   }, v = (L, T = !1, M) => {
@@ -11390,12 +11398,12 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     return H.length === 0 ? "" : H.length > 25 ? o("Token name must be 25 characters or less") : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(H) ? Object.entries(n).find(
       ([V, U]) => U.name === H && (!T || V !== M)
     ) ? o("Token name already exists") : "" : o("Only alphanumeric characters and hyphens allowed");
-  }, E = () => {
+  }, j = () => {
     if (!m.trim() || !h.trim()) {
       toast.error(o("Please fill in both token name and classes"));
       return;
     }
-    if (!j(m)) {
+    if (!E(m)) {
       toast.error(o("Invalid design token name format"));
       return;
     }
@@ -11416,7 +11424,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       toast.error(o("Please fill in both token name and classes"));
       return;
     }
-    if (!j(b)) {
+    if (!E(b)) {
       toast.error(o("Invalid design token name format"));
       return;
     }
@@ -11566,7 +11574,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       ] }),
       /* @__PURE__ */ jsxs(DialogFooter, { children: [
         /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: $, className: "h-8 text-sm", children: o("Cancel") }),
-        /* @__PURE__ */ jsx(Button, { onClick: E, className: "h-8 text-sm", children: o("Add Token") })
+        /* @__PURE__ */ jsx(Button, { onClick: j, className: "h-8 text-sm", children: o("Add Token") })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Dialog, { open: p, onOpenChange: R, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
@@ -11675,7 +11683,7 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center 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: f.map((w, j) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: f.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "top",
                   panelId: w.id,
@@ -11683,9 +11691,9 @@ const RootLayout = () => {
                   show: () => _(w.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
-              ] }, "button-top-" + j)) }),
+              ] }, "button-top-" + E)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((w, j) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "bottom",
                   panelId: w.id,
@@ -11693,7 +11701,7 @@ const RootLayout = () => {
                   show: () => _(w.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
-              ] }, "button-bottom-" + j)) })
+              ] }, "button-bottom-" + E)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -12141,10 +12149,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   var r;
   const a = getBuildingBlocks(o), i = a[1], l = a[2], c = a[3], d = a[6], u = a[7], p = a[11], g = a[12], m = a[13], f = a[14], h = a[16], x = a[17], b = p(o, n);
   if (isAtomStateInitialized(b) && (i.has(n) && l.get(n) !== b.n || Array.from(b.d).every(
-    ([w, j]) => (
+    ([w, E]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      f(o, w).n === j
+      f(o, w).n === E
     )
   )))
     return b;
@@ -12154,21 +12162,21 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     i.has(n) && (x(o, n), m(o), g(o));
   }
   function k(w) {
-    var j;
+    var E;
     if (isSelfAtom(n, w)) {
-      const E = p(o, w);
-      if (!isAtomStateInitialized(E))
+      const j = p(o, w);
+      if (!isAtomStateInitialized(j))
         if (hasInitialValue(w))
           setAtomStateValueOrPromise(o, w, w.init);
         else
           throw new Error("no atom init");
-      return returnAtomValue(E);
+      return returnAtomValue(j);
     }
     const v = f(o, w);
     try {
       return returnAtomValue(v);
     } finally {
-      b.d.set(w, v.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, v), (j = i.get(w)) == null || j.t.add(n), y || C();
+      b.d.set(w, v.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, v), (E = i.get(w)) == null || E.t.add(n), y || C();
     }
   }
   let S, A;