@chaibuilder/sdk 3.1.32 → 3.2.0

package/dist/{index-x0hEzxrt.js → index-CAiYwkFz.js}

@@ -13,7 +13,7 @@ import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
 import * as React from "react";
 import React__default, { useEffect, useCallback, useState, useMemo, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-BwPhgnhk.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, D as DESIGN_TOKEN_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-CSWwWMjY.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
 import { isObject } from "@rjsf/utils";
 import { toast, Toaster } from "sonner";
@@ -1060,7 +1060,7 @@ const undoRedoStateAtom = atom({
   return {
     moveBlocks: (x, b, y) => {
       const C = map(x, (v) => {
-        const B = n.find((j) => j._id === v)._parent || null, w = n.filter((j) => B ? j._parent === B : !j._parent).map((j) => j._id).indexOf(v);
+        const B = n.find((E) => E._id === v)._parent || null, w = n.filter((E) => B ? E._parent === B : !E._parent).map((E) => E._id).indexOf(v);
         return { _id: v, oldParent: B, oldPosition: w };
       }), k = C.find(({ _id: v }) => v === 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 p = l === "canvas" ? l : d == null ? void 0 : d.getAttribute("data-block-id"), u = d ? getOrientation(d) : "vertical", g = getOrientation(o), m = isLeafBlock(c), f = !m && canAcceptChildBlock(c, a), h = ((v = i.defaultView) == null ? void 0 : v.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 S = j.getBoundingClientRect(), E = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = E.width - I - D, R = E.left + x + I;
+    const w = getChildBlocks(o), E = w[w.length - 1];
+    if (E) {
+      const S = E.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = j.width - I - D, R = j.left + x + I;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
@@ -3548,8 +3548,8 @@ function detectDropZone(o, n, r, a, i) {
           width: P,
           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(), S = w.after.getBoundingClientRect(), E = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = getChildBlocks(o), R = getSiblingsInSameRow(P, w.before, g);
+      const E = w.before.getBoundingClientRect(), S = w.after.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = getChildBlocks(o), R = getSiblingsInSameRow(P, w.before, g);
       let $ = 0;
       if (R.forEach((F) => {
         const O = F.getBoundingClientRect();
         O.height > $ && ($ = O.height);
       }), g === "vertical") {
-        const F = E.width - I - D, O = E.left + x + I;
+        const F = j.width - I - D, 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, S.height);
+        const F = E.top + h, O = $ > 0 ? $ : Math.max(E.height, S.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 && p) {
     const w = detectParentEdgeProximity(d, n, r, u);
     if (w) {
-      const j = d.getBoundingClientRect(), S = window.getComputedStyle(d), E = parseFloat(S.paddingLeft) || 0, N = parseFloat(S.paddingRight) || 0, I = parseFloat(S.paddingTop) || 0, D = parseFloat(S.paddingBottom) || 0, P = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
+      const E = d.getBoundingClientRect(), S = window.getComputedStyle(d), j = parseFloat(S.paddingLeft) || 0, N = parseFloat(S.paddingRight) || 0, I = parseFloat(S.paddingTop) || 0, D = parseFloat(S.paddingBottom) || 0, P = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
       if (w === "start") {
         const O = getChildBlocks(d)[0];
         if (O) {
           const L = O.getBoundingClientRect();
           if (u === "vertical") {
-            const T = j.width - 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 + P + I, M = F.maxHeight > 0 ? F.maxHeight : j.height - I - D;
+            const T = E.top + P + I, M = F.maxHeight > 0 ? F.maxHeight : E.height - I - D;
             return {
               position: "before",
               placeholderOrientation: $,
@@ -3649,7 +3649,7 @@ function detectDropZone(o, n, r, a, i) {
         if (L) {
           const T = L.getBoundingClientRect();
           if (u === "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 + P + I, H = F.maxHeight > 0 ? F.maxHeight : j.height - I - D;
+            const M = E.top + P + I, H = F.maxHeight > 0 ? F.maxHeight : E.height - I - D;
             return {
               position: "after",
               placeholderOrientation: $,
@@ -3760,11 +3760,11 @@ function getSiblingsInSameRow(o, n, r) {
 }
 function calculatePlaceholderRect(o, n, r, a, i) {
   var I, D;
-  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((D = i.defaultView) == null ? void 0 : D.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, v = 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) : [], S = 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, p = ((D = i.defaultView) == null ? void 0 : D.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, v = 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) : [], S = getSiblingsInSameRow(E, o, w);
+  let j = 0, N = 0;
   if (S.forEach((P) => {
     const R = P.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 P = C ? C.width - k - v : l.width, R = C ? C.left + p + k : l.left + p;
@@ -3775,7 +3775,7 @@ function calculatePlaceholderRect(o, n, r, a, i) {
         height: 4
       };
     } else {
-      const P = l.top + d, R = w === "horizontal" && E > 0 ? E : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const P = l.top + d, R = w === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: P,
         left: l.left + p - m - 2,
@@ -3793,7 +3793,7 @@ function calculatePlaceholderRect(o, n, r, a, i) {
         height: 4
       };
     } else {
-      const P = l.top + d, R = w === "horizontal" && E > 0 ? E : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const P = l.top + d, R = w === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: P,
         left: l.right + p + f - 2,
@@ -3884,10 +3884,10 @@ const LEAF_BLOCK_TYPES = [
             d.current = null;
             return;
           }
-          const j = v === "up" ? -_ : _;
-          f.scrollBy(0, j);
-          const S = f.scrollY, E = S > 0, N = S + h < b, I = p.current, D = h - p.current;
-          v === "up" && E && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || v === "down" && N && D < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
+          const E = v === "up" ? -_ : _;
+          f.scrollBy(0, E);
+          const S = f.scrollY, j = S > 0, N = S + h < b, I = p.current, D = h - p.current;
+          v === "up" && j && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || v === "down" && N && D < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
         };
         d.current === null && (d.current = requestAnimationFrame(w));
       }
@@ -3926,17 +3926,17 @@ const LEAF_BLOCK_TYPES = [
           return;
         _ = canAcceptChildBlock(B, C);
       } else {
-        let S = h.parentElement, E = "Box";
+        let S = h.parentElement, j = "Box";
         for (; S && !S.hasAttribute("data-block-id"); )
           S = S.parentElement;
-        if (S && (E = S.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
+        if (S && (j = S.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,
@@ -3948,7 +3948,7 @@ const LEAF_BLOCK_TYPES = [
         width: A.rect.width,
         height: A.rect.height,
         targetBlockId: A.targetBlockId,
-        targetParentId: j
+        targetParentId: E
       }), removeDropTargetAttributes$1(c), A.targetElement.setAttribute("data-drop-target", "true");
     }, 300),
     [c, o, r, a, i, l, u]
@@ -5530,14 +5530,14 @@ const RichTextEditor = memo(
     const r = "content", { document: a } = useFrame(), { editingBlockId: i, editingItemIndex: l, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), f = useUpdateBlocksProps(), { selectedLang: h } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = i, { blockContent: C, blockType: k } = useMemo(() => {
       var N;
       const w = o._type;
-      let j = o[r];
+      let E = o[r];
       const S = getRegisteredChaiBlock(o._type);
-      return h && ((N = S == null ? void 0 : S.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (j = get(o, `${r}-${h}`)), { blockContent: j, blockType: w };
+      return h && ((N = S == null ? void 0 : S.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (E = get(o, `${r}-${h}`)), { blockContent: E, blockType: w };
     }, [o, h]), v = useCallback(
       (w) => {
         var S;
-        const j = w || ((S = g.current) == null ? void 0 : S.innerText);
-        f([y], { [r]: j }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
+        const E = w || ((S = g.current) == null ? void 0 : S.innerText);
+        f([y], { [r]: E }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
       [y, f, c, x, h]
     ), A = useDebouncedCallback(
@@ -5549,17 +5549,17 @@ const RichTextEditor = memo(
     ), B = useCallback(
       (w) => {
         w.preventDefault(), y && (b.current = y), v(), 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}"]` : "", S = a.querySelector(`${w}${j}`);
-      S && ((E = S == null ? void 0 : S.classList) == null || E.add("sr-only"), u(S));
+      const w = `[data-block-id="${y}"]`, E = l >= 0 ? `[data-block-index="${l}"]` : "", S = a.querySelector(`${w}${E}`);
+      S && ((j = S == null ? void 0 : S.classList) == null || j.add("sr-only"), u(S));
     }, [y, k, a, l]);
     const _ = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
       RichTextEditor,
@@ -5640,7 +5640,7 @@ const RichTextEditor = memo(
       onDragStart: v.onDragStart,
       onDragEnd: v.onDragEnd
     } : D;
-  }, [l._id, l._type, h, k, C, v]), j = useMemo(
+  }, [l._id, l._type, h, k, C, v]), E = useMemo(
     () => ({
       blockProps: w,
       inBuilder: b === "edit",
@@ -5651,10 +5651,10 @@ const RichTextEditor = memo(
       ...o
     }),
     [b, w, d, p, A, B, _, o]
-  ), S = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), E = useMemo(() => get(l, "_show", !0), [l]);
-  if (isNull(f) || !E) return null;
+  ), S = 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,
@@ -5837,7 +5837,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-tNvYQ21U.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-BZMSNYkF.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, {}) }) }),
@@ -6182,11 +6182,11 @@ const DataBindingSelector = ({
           if (v !== A)
             C.chain().deleteSelection().insertContent(k).run();
           else {
-            const { state: _ } = C, w = _.selection.from, j = _.doc.textBetween(Math.max(0, w - 1), w), S = _.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), S = _.doc.textBetween(w, Math.min(w + 1, _.doc.content.size));
+            let j = "";
+            w > 0 && E !== " " && !h(E) && (j = " ");
             let N = "";
-            S && S !== " " && !h(S) && (N = " "), C.chain().insertContent(E + k + N).run();
+            S && S !== " " && !h(S) && (N = " "), C.chain().insertContent(j + k + N).run();
           }
           setTimeout(() => n(C.getHTML(), {}, r), 100);
           return;
@@ -6194,12 +6194,12 @@ const DataBindingSelector = ({
       } else {
         const C = b, k = C.selectionStart || 0, v = C.value || "", A = C.selectionEnd || k;
         if (A > k) {
-          const S = `{{${m}}}`, { text: E } = x(v, k, S), N = v.slice(0, k) + E + v.slice(A);
+          const S = `{{${m}}}`, { text: j } = x(v, k, S), N = v.slice(0, k) + j + v.slice(A);
           n(N, {}, r);
           return;
         }
-        const _ = `{{${m}}}`, { text: w } = x(v, k, _), j = v.slice(0, k) + w + v.slice(k);
-        n(j, {}, r);
+        const _ = `{{${m}}}`, { text: w } = x(v, k, _), E = v.slice(0, k) + w + v.slice(k);
+        n(E, {}, r);
       }
     },
     [r, n, a, d == null ? void 0 : d._id, p]
@@ -6220,13 +6220,13 @@ const DataBindingSelector = ({
   pageTypes: n,
   onChange: r
 }) => {
-  var j;
-  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (S, E) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (j = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : j.name;
+  var E;
+  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (S, j) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (E = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : E.name;
   useEffect(() => {
     if (f(""), x([]), y(-1), p(!1), !o || l || !startsWith(o, "pageType:")) return;
-    const S = split(o, ":"), E = get(S, 1, "page") || "page";
-    g(E), (async () => {
-      const N = await i(E, [get(S, 2, "page")]);
+    const S = split(o, ":"), j = get(S, 1, "page") || "page";
+    g(j), (async () => {
+      const N = await i(j, [get(S, 2, "page")]);
       N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
@@ -6235,23 +6235,23 @@ const DataBindingSelector = ({
       if (isEmpty(S))
         x([]);
       else {
-        const E = await i(u, S);
-        x(E);
+        const j = await i(u, S);
+        x(j);
       }
       c(!1), y(-1);
     },
     [u],
     300
   ), A = (S) => {
-    const E = ["pageType", u, S.id];
-    E[1] && (r(E.join(":")), f(S.name), p(!1), x([]), y(-1));
+    const j = ["pageType", u, S.id];
+    j[1] && (r(j.join(":")), f(S.name), p(!1), x([]), y(-1));
   }, B = (S) => {
     switch (S.key) {
       case "ArrowDown":
-        S.preventDefault(), y((E) => E < h.length - 1 ? E + 1 : E);
+        S.preventDefault(), y((j) => j < h.length - 1 ? j + 1 : j);
         break;
       case "ArrowUp":
-        S.preventDefault(), y((E) => E > 0 ? E - 1 : E);
+        S.preventDefault(), y((j) => j > 0 ? j - 1 : j);
         break;
       case "Enter":
         if (S.preventDefault(), h.length === 0) return;
@@ -6297,11 +6297,11 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (S, E) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (S, j) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => A(S),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : E === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : j === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           S.name,
           " ",
@@ -6406,7 +6406,7 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-vV5HE2hd.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DwKI9icC.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
   const c = useRef(null), [d, p] = useState(!1), u = useRTEditor({
     blockId: o,
     value: a,
@@ -6662,7 +6662,7 @@ const DataBindingSelector = ({
   if (d)
     return null;
   if (u.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 (u.type === "array") {
     const N = B === n;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
@@ -6699,14 +6699,14 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const S = n.replace("root.", ""), E = A.includes(S) && !isEmpty(f) && isEmpty(g);
+  const S = n.replace("root.", ""), j = A.includes(S) && !isEmpty(f) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
     u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs("label", { htmlFor: n, className: u.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
           ] }),
@@ -6718,7 +6718,7 @@ const DataBindingSelector = ({
         ] }) })
       ] }),
       !u.enum && !u.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",
             {
@@ -6875,8 +6875,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 {
@@ -7139,35 +7139,35 @@ const BlockStylingProps = () => {
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
   const [n, r] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [b, y] = useState(""), [C, k] = useState(!1), [v, A] = useState(!1);
   useEffect(() => {
-    const { value: S, unit: E } = getClassValueAndUnit(l);
-    if (E === "") {
+    const { value: S, unit: j } = getClassValueAndUnit(l);
+    if (j === "") {
       i(S), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    f(E), i(E === "class" || isEmpty(S) ? "" : S);
+    f(j), i(j === "class" || isEmpty(S) ? "" : S);
   }, [l, p, u]);
   const B = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), _ = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), w = useCallback(
     (S = !1) => {
-      const E = getUserInputValues(`${a}`, u);
-      if (get(E, "error", !1)) {
+      const j = getUserInputValues(`${a}`, u);
+      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 D = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      const D = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       S ? _(D) : B(D);
     },
     [B, _, a, m, d, u]
-  ), j = useCallback(
+  ), E = useCallback(
     (S) => {
-      const E = getUserInputValues(`${a}`, u);
-      if (get(E, "error", !1)) {
+      const j = getUserInputValues(`${a}`, u);
+      if (get(j, "error", !1)) {
         x(!0);
         return;
       }
@@ -7175,9 +7175,9 @@ const BlockStylingProps = () => {
         B(`${d}${S}`);
         return;
       }
-      if (get(E, "value") === "")
+      if (get(j, "value") === "")
         return;
-      const N = get(E, "unit") !== "" ? get(E, "unit") : S, D = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      const N = get(j, "unit") !== "" ? get(j, "unit") : S, D = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       B(D);
     },
     [B, a, d, u]
@@ -7208,8 +7208,8 @@ const BlockStylingProps = () => {
             if (S.keyCode !== 38 && S.keyCode !== 40)
               return;
             S.preventDefault(), A(!0);
-            const E = parseInt$1(S.target.value);
-            let N = isNaN$1(E) ? 0 : E;
+            const j = parseInt$1(S.target.value);
+            let N = isNaN$1(j) ? 0 : j;
             S.keyCode === 38 && (N += 1), S.keyCode === 40 && (N -= 1);
             const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
             _(P);
@@ -7222,8 +7222,8 @@ const BlockStylingProps = () => {
             x(!1), i(S.target.value);
           },
           onClick: (S) => {
-            var E;
-            (E = S == null ? void 0 : S.target) == null || E.select(), r(!1);
+            var j;
+            (j = S == null ? void 0 : S.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(
@@ -7251,7 +7251,7 @@ const BlockStylingProps = () => {
             units: u,
             current: m,
             onSelect: (S) => {
-              r(!1), f(S), j(S);
+              r(!1), f(S), E(S);
             }
           }
         ) })
@@ -7264,14 +7264,14 @@ const BlockStylingProps = () => {
         onDragEnd: (S) => {
           if (y(() => ""), k(!1), isEmpty(S))
             return;
-          const E = `${S}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
+          const j = `${S}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
           B(I);
         },
         onDrag: (S) => {
           if (isEmpty(S))
             return;
           y(S);
-          const E = `${S}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
+          const j = `${S}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
           _(I);
         },
         currentValue: a,
@@ -7737,9 +7737,9 @@ const COLOR_PROP = {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: i, onEmitChange: l = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(i), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
     (_, w = !0) => {
-      const j = { dark: p, mq: g, mod: u, cls: _, property: i, fullCls: "" };
-      (p || u !== "") && (j.mq = "xs");
-      const S = generateFullClsName(j);
+      const E = { dark: p, mq: g, mod: u, cls: _, property: i, fullCls: "" };
+      (p || u !== "") && (E.mq = "xs");
+      const S = generateFullClsName(E);
       f(x, [S], w);
     },
     [x, p, g, u, i, f]
@@ -8080,30 +8080,30 @@ const DesignTokensIcon = ({ className: o = "" }) => /* @__PURE__ */ jsx(FontStyl
 function ManualClasses() {
   var O;
   const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [p] = useSelectedStylingBlocks(), u = useSelectedBlock(), g = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), [h, x] = useState(""), b = useAtomValue$1(chaiDesignTokensAtom), y = (O = first(p)) == null ? void 0 : O.prop, { classes: C } = getSplitChaiClasses(get(u, y, "")), k = C.split(" ").filter((L) => !isEmpty(L)), v = useMemo(() => [...k].sort((L, T) => {
-    const M = L.startsWith("dt-"), H = T.startsWith("dt-");
+    const M = L.startsWith(DESIGN_TOKEN_PREFIX), H = T.startsWith(DESIGN_TOKEN_PREFIX);
     return M && !H ? -1 : !M && H ? 1 : 0;
   }), [k]), A = useBuilderProp("flags.copyPaste", !0), B = (L) => {
-    if (L.startsWith("dt-")) {
-      const T = L.substring(3), M = b[T];
-      return M ? M.name : L;
+    if (L.startsWith(DESIGN_TOKEN_PREFIX)) {
+      const T = b[L];
+      return T ? T.name : L;
     }
     return L;
   }, _ = (L) => {
     const T = Object.entries(b).find(([M, H]) => H.name === L);
-    return T ? `dt-${T[0]}` : L;
+    return T ? `${T[0]}` : L;
   }, w = () => {
     const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(_);
     g(f, L, !0), x("");
-  }, [j, S] = useState([]), E = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
+  }, [E, S] = 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: `dt-${V}`,
+      id: `${V}`,
       isDesignToken: !0
     })) : W = Object.entries(b).filter(([V, U]) => U.name.toLowerCase().includes(T)).map(([V, U]) => ({
       name: U.name,
-      id: `dt-${V}`,
+      id: `${V}`,
       isDesignToken: !0
     }))), M && M.length > 0) {
       const [V] = M, U = T.replace(V, "");
@@ -8135,12 +8135,12 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (L) => {
-        L.key === "Enter" && h.trim() !== "" && w();
+        L.key === "Enter" && h.trim() !== "" && E.length === 0 && w();
       },
       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]
+    [h, d, o, E.length]
   ), $ = (L) => {
     const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(_);
     m(f, [L]), g(f, T, !0), r(""), i(-1);
@@ -8154,24 +8154,29 @@ 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: D,
           renderSuggestion: P,
           inputProps: R,
+          highlightFirstSuggestion: !0,
+          onSuggestionSelected: (L, { suggestionValue: T }) => {
+            const M = _(T);
+            g(f, [M], !0), x("");
+          },
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -8233,7 +8238,7 @@ function ManualClasses() {
                   className: "hidden h-max w-3.5 cursor-pointer rounded bg-gray-100 p-0.5 text-red-500 hover:bg-gray-50 group-hover:block"
                 }
               ),
-              L.startsWith("dt-") ? /* @__PURE__ */ jsx(DesignTokensIcon, { className: "text-[rgba(55, 65, 81, 0.4)] h-3.5 w-3.5 group-hover:hidden" }) : /* @__PURE__ */ jsxs(
+              L.startsWith(DESIGN_TOKEN_PREFIX) ? /* @__PURE__ */ jsx(DesignTokensIcon, { className: "text-[rgba(55, 65, 81, 0.4)] h-3.5 w-3.5 group-hover:hidden" }) : /* @__PURE__ */ jsxs(
                 "svg",
                 {
                   className: "h-3.5 w-3.5 group-hover:hidden",
@@ -8737,7 +8742,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 && u(c.id);
   };
   if (p)
@@ -8745,7 +8750,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const S = filter(v, (N, I) => I % 2 === 0), E = filter(v, (N, I) => I % 2 === 1);
+  const S = filter(v, (N, I) => I % 2 === 0), j = filter(v, (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: [
@@ -8764,7 +8769,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")
                     ] })
@@ -8813,7 +8818,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,
@@ -8967,14 +8972,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, p]
-  ), j = useMemo(
+  ), E = useMemo(
     () => sortBy(w, (I) => CORE_GROUPS.indexOf(I) === -1 ? 99 : CORE_GROUPS.indexOf(I)),
     [w]
-  ), S = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? j : [h], [j, h]);
+  ), S = 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: p, setValue: u }),
     /* @__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",
           {
@@ -8986,7 +8991,7 @@ const BlockCard = ({
           },
           "sidebar-all"
         ),
-        j.map((I) => /* @__PURE__ */ jsx(
+        E.map((I) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => B(I),
@@ -9001,13 +9006,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 && p ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
             c("No blocks found matching"),
             ' "',
             p,
             '"'
-          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: E.map((I) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: j.map((I) => /* @__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(S), { group: I }) : values(S),
@@ -9501,13 +9506,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);
-  }, [S, E] = useAtom$1(currentAddSelection), N = () => {
+  }, [S, 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);
   }, D = (T) => {
     I(), T.stopPropagation(), !o.isOpen && B && o.toggle(), k(T);
   };
@@ -9556,7 +9561,7 @@ const useStructureValidation = () => {
       "data-node-id": f,
       ref: r,
       onDragStart: () => w(o),
-      onDragEnd: () => j(o),
+      onDragEnd: () => E(o),
       onDragOver: (T) => {
         T.preventDefault(), P(f, "yes");
       },
@@ -10097,13 +10102,13 @@ const useStructureValidation = () => {
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, i] = React.useState(""), [l, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0), f = useIncrementActionsCount();
-  (!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 S = { ...h };
-      setPreviousTheme(S), x(j), f(), toast.success("Theme updated", {
+      setPreviousTheme(S), 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" }),
@@ -10119,56 +10124,56 @@ const useStructureValidation = () => {
     },
     [h, x, f]
   ), k = () => {
-    const j = d.find((S) => Object.keys(S)[0] === a);
-    if (j) {
-      const S = Object.values(j)[0];
+    const E = d.find((S) => Object.keys(S)[0] === a);
+    if (E) {
+      const S = Object.values(E)[0];
       S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? (C(S), i(""), f()) : console.error("Invalid preset structure:", S);
     } else
       console.error("Preset not found:", a);
-  }, v = (j) => {
-    C(j), i(""), f();
+  }, v = (E) => {
+    C(E), i(""), f();
   }, A = useDebouncedCallback(
-    (j, S) => {
+    (E, S) => {
       x(() => ({
         ...h,
         fontFamily: {
           ...h.fontFamily,
-          [j.replace(/font-/g, "")]: S
+          [E.replace(/font-/g, "")]: S
         }
       })), f();
     },
     [h, f],
     200
   ), B = React.useCallback(
-    (j) => {
+    (E) => {
       x(() => ({
         ...h,
-        borderRadius: `${j}px`
+        borderRadius: `${E}px`
       })), f();
     },
     [h, f]
   ), _ = useDebouncedCallback(
-    (j, S) => {
+    (E, S) => {
       x(() => {
-        const E = get(h, `colors.${j}`);
-        return n ? set(E, 1, S) : set(E, 0, S), f(), {
+        const j = get(h, `colors.${E}`);
+        return n ? set(j, 1, S) : set(j, 0, S), 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(([S]) => {
-    const E = get(h, `colors.${S}.${n ? 1 : 0}`);
-    return E ? /* @__PURE__ */ jsxs("div", { id: `theme-${S}`, 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(([S]) => {
+    const j = get(h, `colors.${S}.${n ? 1 : 0}`);
+    return j ? /* @__PURE__ */ jsxs("div", { id: `theme-${S}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: E,
+          value: j,
           onChange: (N) => _(S, N)
         }
       ),
@@ -10188,9 +10193,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 S = Object.keys(j)[0], E = S.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(E) }, S);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((E) => {
+              const S = Object.keys(E)[0], j = S.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(j) }, S);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: y("Apply") }) })
@@ -10202,14 +10207,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, S]) => /* @__PURE__ */ jsx(
+        (b == null ? void 0 : b.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(b.fontFamily).map(([E, S]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: j,
-            value: h.fontFamily[j.replace(/font-/g, "")] || S[Object.keys(S)[0]],
-            onChange: (E) => A(j, E)
+            label: E,
+            value: h.fontFamily[E.replace(/font-/g, "")] || S[Object.keys(S)[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: [
@@ -10235,7 +10240,7 @@ const useStructureValidation = () => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (j) => r(j),
+                  onCheckedChange: (E) => r(E),
                   "aria-label": y("Toggle dark mode"),
                   className: "mx-1"
                 }
@@ -10243,7 +10248,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,
@@ -11003,8 +11008,8 @@ const UndoRedo = () => {
       r(w), i(a), c(""), p(""), f("");
     }
   }, k = (w) => {
-    const j = a.filter((S, E) => E !== w);
-    r(j), i(j);
+    const E = a.filter((S, j) => j !== w);
+    r(E), i(E);
   }, v = (w) => {
     g(w), c(a[w].key), p(a[w].value);
   }, A = () => {
@@ -11019,17 +11024,17 @@ const UndoRedo = () => {
   }, B = (w) => {
     w.key === "Enter" && !w.shiftKey && (w.preventDefault(), u !== null ? A() : C());
   }, _ = useCallback((w) => {
-    const j = (N) => /[.,!?;:]/.test(N), S = (N, I, D) => {
+    const E = (N) => /[.,!?;:]/.test(N), S = (N, I, D) => {
       let P = "", R = "";
       const $ = I > 0 ? N[I - 1] : "", F = I < N.length ? N[I] : "";
-      return I > 0 && ($ === "." || !j($) && $ !== " ") && (P = " "), I < N.length && !j(F) && F !== " " && (R = " "), {
+      return I > 0 && ($ === "." || !E($) && $ !== " ") && (P = " "), I < N.length && !E(F) && F !== " " && (R = " "), {
         text: P + D + R,
         prefixLength: P.length,
         suffixLength: R.length
       };
-    }, E = x.current;
-    if (E) {
-      const N = E.selectionStart || 0, I = E.value || "", D = E.selectionEnd || N;
+    }, j = x.current;
+    if (j) {
+      const N = j.selectionStart || 0, I = j.value || "", D = j.selectionEnd || N;
       if (D > N) {
         const O = `{{${w}}}`, { text: L } = S(I, N, O), T = I.slice(0, N) + L + I.slice(D);
         p(T);
@@ -11093,16 +11098,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: () => v(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: () => v(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`;
@@ -11269,7 +11274,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
   ].filter(Boolean).find((a) => a.trim().length > 0);
   return r ? r.length > 40 ? `${r.slice(0, 37)}...` : r : o._id;
 }, collectTokenUsageOnPage = (o, n) => {
-  const r = `dt-${n}`;
+  const r = `${DESIGN_TOKEN_PREFIX}${n}`;
   return o.filter((a) => Object.values(a).some((i) => typeof i != "string" || !i.startsWith(STYLES_PREFIX) ? !1 : i.includes(r))).map((a) => ({
     id: a._id,
     label: getBlockLabel(a)
@@ -11282,10 +11287,10 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       isSelected: i.includes(b.id)
     })),
     [p, i]
-  ), g = useMemo(() => Object.entries(d).reduce(
+  ), g = useMemo(() => d ? Object.entries(d).reduce(
     (b, [y, C]) => (y === c || !(C != null && C.designTokens) || !Object.keys(C.designTokens).some((v) => typeof v != "string" ? !1 : v === o) || b.push({ id: y, name: C.name || y, isPartial: !!C.isPartial }), b),
     []
-  ), [d, n, o, c]), m = useMemo(
+  ) : [], [d, n, o, c]), m = useMemo(
     () => g.filter((b) => !b.isPartial).map((b) => ({
       id: b.id,
       label: b.name
@@ -11349,7 +11354,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     ] })
   ] });
 }, ManageDesignTokens = ({}) => {
-  const { t: o } = useTranslation(), [n, r] = useAtom$1(chaiDesignTokensAtom), [a, i] = useState(!1), [l, c] = useState(null), [d, p] = useState(!1), [u, g] = useState(!1), [m, f] = useState(""), [h, x] = useState(""), [b, y] = useState(""), [C, k] = useState(""), [v, 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, p] = useState(!1), [u, g] = useState(!1), [m, f] = useState(""), [h, x] = useState(""), [b, y] = useState(""), [C, k] = useState(""), [v, 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);
   }, S = (L, T = !1, M) => {
@@ -11357,12 +11362,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;
     }
@@ -11370,7 +11375,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       toast.error(o("Token already exists"));
       return;
     }
-    const T = `token_${nanoid(12)}`, M = {
+    const T = `${DESIGN_TOKEN_PREFIX}${nanoid(12)}`, M = {
       ...n,
       [T]: {
         name: m.trim(),
@@ -11383,7 +11388,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;
     }
@@ -11533,7 +11538,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: u, onOpenChange: R, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
@@ -11642,7 +11647,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,
@@ -11650,9 +11655,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,
@@ -11660,7 +11665,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,
@@ -12105,10 +12110,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], p = a[7], u = a[11], g = a[12], m = a[13], f = a[14], h = a[16], x = a[17], b = u(o, n);
   if (isAtomStateInitialized(b) && (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;
@@ -12118,21 +12123,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 = u(o, w);
-      if (!isAtomStateInitialized(E))
+      const j = u(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 S = f(o, w);
     try {
       return returnAtomValue(S);
     } finally {
-      b.d.set(w, S.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, S), (j = i.get(w)) == null || j.t.add(n), y || C();
+      b.d.set(w, S.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, S), (E = i.get(w)) == null || E.t.add(n), y || C();
     }
   }
   let v, A;