@chaibuilder/sdk 3.1.32 → 3.2.1

package/dist/{index-x0hEzxrt.js → index-CXFBOH6M.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";
@@ -1059,13 +1059,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   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);
-        return { _id: v, oldParent: B, oldPosition: w };
-      }), k = C.find(({ _id: v }) => v === x[0]);
+      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);
+        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({
-        undo: () => each(C, ({ _id: v, oldParent: A, oldPosition: B }) => {
-          l([v], A, B);
+        undo: () => each(C, ({ _id: S, oldParent: A, oldPosition: B }) => {
+          l([S], A, B);
         }),
         redo: () => l(x, b, y)
       }));
@@ -1078,7 +1078,7 @@ const undoRedoStateAtom = atom({
     },
     removeBlocks: (x) => {
       var k;
-      const b = (k = first(x)) == null ? void 0 : k._parent, C = n.filter((v) => b ? v._parent === b : !v._parent).indexOf(first(x));
+      const b = (k = first(x)) == null ? void 0 : k._parent, C = n.filter((S) => b ? S._parent === b : !S._parent).indexOf(first(x));
       i(map(x, "_id")), o({
         undo: () => a(x, b, C),
         redo: () => i(map(x, "_id"))
@@ -1090,9 +1090,9 @@ const undoRedoStateAtom = atom({
         C = map(x, (k) => ({ _id: k, ...y }));
       else {
         const k = keys(b);
-        C = map(x, (v) => {
-          const A = n.find((_) => _._id === v), B = { _id: v };
-          return each(k, (_) => B[_] = A[_]), B;
+        C = map(x, (S) => {
+          const A = n.find((E) => E._id === S), B = { _id: S };
+          return each(k, (E) => B[E] = A[E]), B;
         });
       }
       c(map(x, (k) => ({ _id: k, ...b }))), o({
@@ -1112,8 +1112,8 @@ const undoRedoStateAtom = atom({
     updateMultipleBlocksProps: (x) => {
       let b = [];
       b = map(x, (y) => {
-        const C = keys(y), k = n.find((A) => A._id === y._id), v = {};
-        return each(C, (A) => v[A] = k[A]), v;
+        const C = keys(y), k = n.find((A) => A._id === y._id), S = {};
+        return each(C, (A) => S[A] = k[A]), S;
       }), c(x), o({
         undo: () => c(b),
         redo: () => c(x)
@@ -2602,21 +2602,21 @@ const getBlockWithChildren = (o, n) => {
         if (i) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, C = x.toLowerCase().includes("translate the content"), k = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p, C) : [m(h, d)], v = await i(f, addLangToPrompt(x, g, f), k, y), { blocks: A, error: B } = v;
+            const y = p === u ? "" : p, C = x.toLowerCase().includes("translate the content"), k = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p, C) : [m(h, d)], S = await i(f, addLangToPrompt(x, g, f), k, y), { blocks: A, error: B } = S;
             if (B) {
               a(B);
               return;
             }
             if (f === "styles") {
-              const _ = A.map((w) => {
+              const E = A.map((w) => {
                 for (const j in w)
                   j !== "_id" && (w[j] = `${STYLES_KEY},${w[j]}`);
                 return w;
               });
-              c(_);
+              c(E);
             } else
               l(A);
-            b && b(v);
+            b && b(S);
           } catch (y) {
             a(y);
           } finally {
@@ -3527,23 +3527,23 @@ function calculateElementZone(o, n, r, a, i) {
   }
 }
 function detectDropZone(o, n, r, a, i) {
-  var v, A, B, _;
+  var S, A, B, E;
   const l = o.getAttribute("data-block-id"), c = o.getAttribute("data-block-type") || "Box";
   if (!l)
     return null;
   let d = o.parentElement;
   for (; d && !d.hasAttribute("data-block-id"); )
     d = d.parentElement;
-  const p = l === "canvas" ? l : d == null ? void 0 : d.getAttribute("data-block-id"), u = d ? getOrientation(d) : "vertical", g = getOrientation(o), m = isLeafBlock(c), f = !m && canAcceptChildBlock(c, a), h = ((v = i.defaultView) == null ? void 0 : v.scrollY) || 0, x = ((A = i.defaultView) == null ? void 0 : A.scrollX) || 0;
+  const p = l === "canvas" ? l : d == null ? void 0 : d.getAttribute("data-block-id"), u = d ? getOrientation(d) : "vertical", g = getOrientation(o), m = isLeafBlock(c), f = !m && canAcceptChildBlock(c, a), h = ((S = i.defaultView) == null ? void 0 : S.scrollY) || 0, x = ((A = i.defaultView) == null ? void 0 : A.scrollX) || 0;
   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 v = j.getBoundingClientRect(), _ = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = _.width - I - D, R = _.left + x + I;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
         rect: {
-          top: S.bottom + h,
+          top: v.bottom + h,
           left: R,
           width: P,
           height: 4
@@ -3559,13 +3559,13 @@ function detectDropZone(o, n, r, a, i) {
   if (f && !m && hasChildBlocks(o)) {
     const w = detectGapZone(o, n, r, g);
     if (w) {
-      const j = w.before.getBoundingClientRect(), 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 j = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), _ = 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 = _.width - I - D, O = _.left + x + I;
         return {
           position: "after",
           placeholderOrientation: "horizontal",
@@ -3583,7 +3583,7 @@ 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 = j.top + h, O = $ > 0 ? $ : Math.max(j.height, v.height);
         return {
           position: "after",
           placeholderOrientation: "vertical",
@@ -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 j = d.getBoundingClientRect(), v = window.getComputedStyle(d), _ = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, D = parseFloat(v.paddingBottom) || 0, P = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((E = i.defaultView) == null ? void 0 : E.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
       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 = j.width - _ - N, M = j.left + R + _;
             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 = j.width - _ - N, H = j.left + R + _;
             return {
               position: "after",
               placeholderOrientation: $,
@@ -3760,14 +3760,14 @@ 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;
-  if (S.forEach((P) => {
+  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, S = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, E = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", j = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(j, o, w);
+  let _ = 0, N = 0;
+  if (v.forEach((P) => {
     const R = P.getBoundingClientRect();
-    R.height > E && (E = R.height), R.width > N && (N = R.width);
+    R.height > _ && (_ = 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;
+      const P = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
       return {
         top: l.top + d - u - 2,
         left: R,
@@ -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" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: P,
         left: l.left + p - m - 2,
@@ -3785,7 +3785,7 @@ function calculatePlaceholderRect(o, n, r, a, i) {
     }
   else if (r === "after")
     if (a === "horizontal") {
-      const P = C ? C.width - k - v : l.width, R = C ? C.left + p + k : l.left + p;
+      const P = C ? C.width - k - S : l.width, R = C ? C.left + p + k : l.left + p;
       return {
         top: l.bottom + d + g - 2,
         left: R,
@@ -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" && _ > 0 ? _ : E.maxHeight > 0 ? E.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: P,
         left: l.right + p + f - 2,
@@ -3873,21 +3873,21 @@ const LEAF_BLOCK_TYPES = [
       const f = c.defaultView, h = f.innerHeight, x = f.scrollY, b = c.documentElement.scrollHeight;
       p.current = m;
       const y = m, C = h - m;
-      let k = !1, v = null, A = 0;
-      if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && x > 0 ? (k = !0, v = "up", A = y) : C < AUTO_SCROLL_CONFIG.EDGE_ZONE && x + h < b && (k = !0, v = "down", A = C), !k && d.current !== null) {
+      let k = !1, S = null, A = 0;
+      if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && x > 0 ? (k = !0, S = "up", A = y) : C < AUTO_SCROLL_CONFIG.EDGE_ZONE && x + h < b && (k = !0, S = "down", A = C), !k && d.current !== null) {
         cancelAnimationFrame(d.current), d.current = null;
         return;
       }
-      if (k && v) {
-        const B = 1 - A / AUTO_SCROLL_CONFIG.EDGE_ZONE, _ = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * B, w = () => {
+      if (k && S) {
+        const B = 1 - A / AUTO_SCROLL_CONFIG.EDGE_ZONE, E = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * B, w = () => {
           if (!isDragging || !f) {
             d.current = null;
             return;
           }
-          const j = v === "up" ? -_ : _;
+          const j = S === "up" ? -E : E;
           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 v = f.scrollY, _ = v > 0, N = v + h < b, I = p.current, D = h - p.current;
+          S === "up" && _ && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || S === "down" && N && D < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
         };
         d.current === null && (d.current = requestAnimationFrame(w));
       }
@@ -3913,27 +3913,27 @@ const LEAF_BLOCK_TYPES = [
       const C = o._type || o.type;
       if (!C)
         return;
-      const k = m.clientX, v = m.clientY;
-      u(v);
-      const A = detectDropZone(h, k, v, C, c);
+      const k = m.clientX, S = m.clientY;
+      u(S);
+      const A = detectDropZone(h, k, S, C, c);
       if (!A)
         return;
       const B = h.getAttribute("data-block-type") || "Box";
-      let _ = !1;
+      let E = !1;
       const w = LEAF_BLOCK_TYPES.includes(B);
       if (A.position === "inside") {
         if (w || y && !canDropWithoutCircularReference(y, x, l))
           return;
-        _ = canAcceptChildBlock(B, C);
+        E = canAcceptChildBlock(B, C);
       } else {
-        let S = h.parentElement, E = "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))
+        let v = h.parentElement, _ = "Box";
+        for (; v && !v.hasAttribute("data-block-id"); )
+          v = v.parentElement;
+        if (v && (_ = v.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
           return;
-        _ = canAcceptChildBlock(E, C);
+        E = canAcceptChildBlock(_, C);
       }
-      if (!_)
+      if (!E)
         return;
       i(A.targetParentId);
       const j = A.targetParentId || b;
@@ -4085,22 +4085,22 @@ const useBlockDragStart = () => {
       const y = r.targetBlockId, C = r.targetParentId;
       if (!y)
         return;
-      const { parentId: k, index: v } = calculateInsertionIndex(
+      const { parentId: k, index: S } = calculateInsertionIndex(
         i,
         y,
         C,
         r.position
       );
       if (o._id !== void 0)
-        d([o._id], k === null ? void 0 : k, v), g(), u([]), p([o._id]);
+        d([o._id], k === null ? void 0 : k, S), g(), u([]), p([o._id]);
       else {
-        const B = o._type || o.type, _ = 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 B = o._type || o.type, E = o != null && o.blocks ? isFunction(o == null ? void 0 : o.blocks) ? syncBlocksWithDefaults(o == null ? void 0 : o.blocks()) : o == null ? void 0 : o.blocks : null;
         c(
           B === "PartialBlock" ? {
             blocks: [{ _type: B, _id: "partial-block", partialBlockId: o.partialBlockId }]
-          } : (_ == null ? void 0 : _.length) > 0 ? { blocks: [..._] } : { type: B },
+          } : (E == null ? void 0 : E.length) > 0 ? { blocks: [...E] } : { type: B },
           k,
-          v
+          S
         );
       }
       setTimeout(() => {
@@ -4387,9 +4387,9 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       }),
       size({
         boundary: g == null ? void 0 : g.body,
-        apply({ availableWidth: v, availableHeight: A, elements: B }) {
+        apply({ availableWidth: S, availableHeight: A, elements: B }) {
           Object.assign(B.floating.style, {
-            maxWidth: `${Math.max(200, v)}px`,
+            maxWidth: `${Math.max(200, S)}px`,
             maxHeight: `${Math.max(100, A)}px`
           });
         }
@@ -4400,11 +4400,11 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
   useResizeObserver(r, () => b(), r !== null), useResizeObserver(g == null ? void 0 : g.body, () => b(), (g == null ? void 0 : g.body) !== null);
   const y = get(o, "_parent", null), C = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
   useEffect(() => {
-    let v = null;
-    return r ? (v = setTimeout(() => b(), 500), () => {
-      v && clearTimeout(v);
+    let S = null;
+    return r ? (S = setTimeout(() => b(), 500), () => {
+      S && clearTimeout(S);
     }) : (b(), () => {
-      v && clearTimeout(v);
+      S && clearTimeout(S);
     });
   }, [r, o == null ? void 0 : o._id]);
   const [, k] = useSidebarActivePanel();
@@ -4415,13 +4415,13 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       tabIndex: 0,
       ref: x.setFloating,
       style: h,
-      onClick: (v) => {
-        v.stopPropagation(), v.preventDefault();
+      onClick: (S) => {
+        S.stopPropagation(), S.preventDefault();
       },
-      onMouseEnter: (v) => {
-        v.stopPropagation(), c(null);
+      onMouseEnter: (S) => {
+        S.stopPropagation(), c(null);
       },
-      onKeyDown: (v) => v.stopPropagation(),
+      onKeyDown: (S) => S.stopPropagation(),
       className: `isolate z-[999] flex h-6 items-center justify-between bg-blue-500 py-2 text-xs text-white ${n ? "opacity-0" : ""}`,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -5063,8 +5063,8 @@ const getActiveClasses$1 = (o, n, r) => {
     )
   ] });
 }, RteColorPicker = ({ editor: o, from: n, menuRef: r }) => {
-  var k, v;
-  const a = (k = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : k.color, i = (v = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : v.color, [l, c] = useState(a || "#000000F2"), [d, p] = useState(i || "#00000057"), [u, g] = useDebouncedState(l, 150), [m, f] = useDebouncedState(d, 150), h = (A, B) => {
+  var k, S;
+  const a = (k = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : k.color, i = (S = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : S.color, [l, c] = useState(a || "#000000F2"), [d, p] = useState(i || "#00000057"), [u, g] = useDebouncedState(l, 150), [m, f] = useDebouncedState(d, 150), h = (A, B) => {
     B ? (c(A), g(A)) : (o == null || o.chain().setColor(A).run(), c(A));
   }, x = (A, B) => {
     B ? (p(A), f(A)) : (o == null || o.chain().setHighlight({ color: A }).run(), p(A));
@@ -5426,8 +5426,8 @@ const RichTextEditor = memo(
       onBlur: ({ editor: u, event: g }) => {
         const m = g == null ? void 0 : g.relatedTarget, f = l.querySelector(".ProseMirror"), h = l.querySelector(".tippy-box"), x = l.querySelector("#chai-rich-text-menu-bar"), b = f == null ? void 0 : f.contains(m), y = h == null ? void 0 : h.contains(m), C = x == null ? void 0 : x.contains(m), k = window.document.getElementById("rte-widget-color-picker");
         if (!b && !y && !C && !k) {
-          const v = (u == null ? void 0 : u.getHTML()) || "";
-          r(v);
+          const S = (u == null ? void 0 : u.getHTML()) || "";
+          r(S);
         }
       },
       from: "canvas"
@@ -5531,12 +5531,12 @@ const RichTextEditor = memo(
       var N;
       const w = o._type;
       let j = 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 };
-    }, [o, h]), v = useCallback(
+      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 };
+    }, [o, h]), S = useCallback(
       (w) => {
-        var S;
-        const j = w || ((S = g.current) == null ? void 0 : S.innerText);
+        var v;
+        const j = w || ((v = g.current) == null ? void 0 : v.innerText);
         f([y], { [r]: j }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
       [y, f, c, x, h]
@@ -5548,7 +5548,7 @@ const RichTextEditor = memo(
       1e3
     ), B = useCallback(
       (w) => {
-        w.preventDefault(), y && (b.current = y), v(), setTimeout(() => {
+        w.preventDefault(), y && (b.current = y), S(), setTimeout(() => {
           const j = b.current;
           b.current = null, x([j]);
         }, 100);
@@ -5556,18 +5556,18 @@ const RichTextEditor = memo(
       [x, y, h]
     );
     useEffect(() => {
-      var E;
+      var _;
       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}"]`, j = l >= 0 ? `[data-block-index="${l}"]` : "", v = a.querySelector(`${w}${j}`);
+      v && ((_ = v == null ? void 0 : v.classList) == null || _.add("sr-only"), u(v));
     }, [y, k, a, l]);
-    const _ = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
+    const E = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
         blockContent: C,
         editingElement: p,
         onChange: A,
-        onClose: v,
+        onClose: S,
         onEscape: B
       }
     ) : /* @__PURE__ */ jsx(
@@ -5576,13 +5576,13 @@ const RichTextEditor = memo(
         editorRef: g,
         blockContent: C,
         editingElement: p,
-        onClose: v,
+        onClose: S,
         onChange: A,
         onEscape: B
       }
-    )) : null, [p, y, k, C, v, h]);
+    )) : null, [p, y, k, C, S, h]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      _,
+      E,
       n
     ] });
   },
@@ -5615,7 +5615,7 @@ const RichTextEditor = memo(
   blockAtom: n,
   children: r
 }) => {
-  const { editingBlockId: a, editingItemIndex: i } = useInlineEditing(), [l] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: h, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useAtomValue$1(chaiDesignTokensAtom), C = useIsDragAndDropEnabled(), k = b === "edit", v = useDirectBlockDrag(), A = useMemo(
+  const { editingBlockId: a, editingItemIndex: i } = useInlineEditing(), [l] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: h, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useAtomValue$1(chaiDesignTokensAtom), C = useIsDragAndDropEnabled(), k = b === "edit", S = useDirectBlockDrag(), A = useMemo(
     () => m ? applyBindingToBlockProps(applyLanguage(l, d, c), g, {
       index: h,
       key: x
@@ -5624,7 +5624,7 @@ const RichTextEditor = memo(
   ), B = useMemo(
     () => getBlockTagAttributes(l, !0, y),
     [l, getBlockTagAttributes, y]
-  ), _ = useMemo(
+  ), E = useMemo(
     () => u(l._id, getBlockRuntimeProps(l._type)),
     [l._id, l._type, u, getBlockRuntimeProps]
   ), w = useMemo(() => {
@@ -5636,23 +5636,23 @@ const RichTextEditor = memo(
     return k && C ? {
       ...D,
       draggable: !0,
-      onMouseDown: v.onMouseDown,
-      onDragStart: v.onDragStart,
-      onDragEnd: v.onDragEnd
+      onMouseDown: S.onMouseDown,
+      onDragStart: S.onDragStart,
+      onDragEnd: S.onDragEnd
     } : D;
-  }, [l._id, l._type, h, k, C, v]), j = useMemo(
+  }, [l._id, l._type, h, k, C, S]), j = useMemo(
     () => ({
       blockProps: w,
       inBuilder: b === "edit",
       lang: d || p,
       ...A,
       ...B,
-      ..._,
+      ...E,
       ...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;
+    [b, w, d, p, A, B, E, o]
+  ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), _ = useMemo(() => get(l, "_show", !0), [l]);
+  if (isNull(f) || !_) return null;
   let N = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
     ...j,
     children: r({
@@ -5667,7 +5667,7 @@ const RichTextEditor = memo(
     })
   }) });
   const I = a === l._id && (i === h || h < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: l, children: N }) : N;
-  return S ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: I }) : I;
+  return v ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: I }) : I;
 }, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: i, fallbackLang: l } = useLanguages(), c = useCallback(
     (d) => {
@@ -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-BNuPxnsb.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, {}) }) }),
@@ -5977,27 +5977,27 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
 }, ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   const { t: i } = useTranslation(), { selectedLang: l } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), p = usePageExternalData(), u = r.split(".").pop() || "", g = l ? `_${u}Id-${l}` : `_${u}Id`, m = isEmpty(l) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), f = get(c, g, m ? c == null ? void 0 : c.assetId : ""), h = useMemo(() => {
     if (!o || !c || !/\{\{.*?\}\}/.test(o)) return o;
-    const v = { ...c, [u]: o }, A = applyBindingToBlockProps(v, p, { index: -1, key: "" });
+    const S = { ...c, [u]: o }, A = applyBindingToBlockProps(S, p, { index: -1, key: "" });
     return get(A, u, o);
   }, [o, c, p, u]), x = !!f || h !== PLACEHOLDER_IMAGE, b = (k) => {
-    const v = isArray(k) ? first(k) : k;
-    if (v) {
-      n(v == null ? void 0 : v.url);
-      const A = v == null ? void 0 : v.width, B = v == null ? void 0 : v.height, _ = g.includes("mobile");
+    const S = isArray(k) ? first(k) : k;
+    if (S) {
+      n(S == null ? void 0 : S.url);
+      const A = S == null ? void 0 : S.width, B = S == null ? void 0 : S.height, E = g.includes("mobile");
       if (c != null && c._id) {
         const w = {
-          ...A && { [_ ? "mobileWidth" : "width"]: A },
-          ...B && { [_ ? "mobileHeight" : "height"]: B },
-          ...v.description && { alt: v.description }
+          ...A && { [E ? "mobileWidth" : "width"]: A },
+          ...B && { [E ? "mobileHeight" : "height"]: B },
+          ...S.description && { alt: S.description }
         };
-        if (set(w, g, v.id), isEmpty(w)) return;
+        if (set(w, g, S.id), isEmpty(w)) return;
         d([c._id], w);
       }
     }
   }, y = useCallback(() => {
     if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
-      const k = {}, v = g.includes("mobile");
-      set(k, g, ""), set(k, v ? "mobileWidth" : "width", ""), set(k, v ? "mobileHeight" : "height", ""), d([c._id], k);
+      const k = {}, S = g.includes("mobile");
+      set(k, g, ""), set(k, S ? "mobileWidth" : "width", ""), set(k, S ? "mobileHeight" : "height", ""), d([c._id], k);
     }
   }, [n, c == null ? void 0 : c._id, d, g]), C = getFileName(h);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-start gap-x-3", children: [
@@ -6162,11 +6162,11 @@ const DataBindingSelector = ({
         n(`{{${m}}}`, {}, r);
         return;
       }
-      const h = (C) => /[.,!?;:]/.test(C), x = (C, k, v) => {
+      const h = (C) => /[.,!?;:]/.test(C), x = (C, k, S) => {
         let A = "", B = "";
-        const _ = k > 0 ? C[k - 1] : "", w = k < C.length ? C[k] : "";
-        return k > 0 && (_ === "." || !h(_) && _ !== " ") && (A = " "), k < C.length && !h(w) && w !== " " && (B = " "), {
-          text: A + v + B,
+        const E = k > 0 ? C[k - 1] : "", w = k < C.length ? C[k] : "";
+        return k > 0 && (E === "." || !h(E) && E !== " ") && (A = " "), k < C.length && !h(w) && w !== " " && (B = " "), {
+          text: A + S + B,
           prefixLength: A.length,
           suffixLength: B.length
         };
@@ -6178,27 +6178,27 @@ const DataBindingSelector = ({
         if (C) {
           const k = `{{${m}}}`;
           C.commands.focus();
-          const { from: v, to: A } = C.state.selection;
-          if (v !== A)
+          const { from: S, to: A } = C.state.selection;
+          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), S = _.doc.textBetween(w, Math.min(w + 1, _.doc.content.size));
-            let E = "";
-            w > 0 && j !== " " && !h(j) && (E = " ");
+            const { state: E } = C, w = E.selection.from, j = E.doc.textBetween(Math.max(0, w - 1), w), v = E.doc.textBetween(w, Math.min(w + 1, E.doc.content.size));
+            let _ = "";
+            w > 0 && j !== " " && !h(j) && (_ = " ");
             let N = "";
-            S && S !== " " && !h(S) && (N = " "), C.chain().insertContent(E + k + N).run();
+            v && v !== " " && !h(v) && (N = " "), C.chain().insertContent(_ + k + N).run();
           }
           setTimeout(() => n(C.getHTML(), {}, r), 100);
           return;
         }
       } else {
-        const C = b, k = C.selectionStart || 0, v = C.value || "", A = C.selectionEnd || k;
+        const C = b, k = C.selectionStart || 0, S = 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 v = `{{${m}}}`, { text: _ } = x(S, k, v), N = S.slice(0, k) + _ + S.slice(A);
           n(N, {}, r);
           return;
         }
-        const _ = `{{${m}}}`, { text: w } = x(v, k, _), j = v.slice(0, k) + w + v.slice(k);
+        const E = `{{${m}}}`, { text: w } = x(S, k, E), j = S.slice(0, k) + w + S.slice(k);
         n(j, {}, r);
       }
     },
@@ -6221,73 +6221,73 @@ const DataBindingSelector = ({
   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;
+  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, _) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (j = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : j.name;
   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 v = split(o, ":"), _ = get(v, 1, "page") || "page";
+    g(_), (async () => {
+      const N = await i(_, [get(v, 2, "page")]);
       N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
-  const v = useDebouncedCallback(
-    async (S) => {
-      if (isEmpty(S))
+  const S = useDebouncedCallback(
+    async (v) => {
+      if (isEmpty(v))
         x([]);
       else {
-        const E = await i(u, S);
-        x(E);
+        const _ = await i(u, v);
+        x(_);
       }
       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));
-  }, B = (S) => {
-    switch (S.key) {
+  ), A = (v) => {
+    const _ = ["pageType", u, v.id];
+    _[1] && (r(_.join(":")), f(v.name), p(!1), x([]), y(-1));
+  }, B = (v) => {
+    switch (v.key) {
       case "ArrowDown":
-        S.preventDefault(), y((E) => E < h.length - 1 ? E + 1 : E);
+        v.preventDefault(), y((_) => _ < h.length - 1 ? _ + 1 : _);
         break;
       case "ArrowUp":
-        S.preventDefault(), y((E) => E > 0 ? E - 1 : E);
+        v.preventDefault(), y((_) => _ > 0 ? _ - 1 : _);
         break;
       case "Enter":
-        if (S.preventDefault(), h.length === 0) return;
+        if (v.preventDefault(), h.length === 0) return;
         b >= 0 && A(h[b]);
         break;
       case "Escape":
-        S.preventDefault(), _();
+        v.preventDefault(), E();
         break;
     }
   };
   useEffect(() => {
     if (b >= 0 && C.current) {
-      const S = C.current.children[b];
-      S == null || S.scrollIntoView({ block: "nearest" });
+      const v = C.current.children[b];
+      v == null || v.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const _ = () => {
+  const E = () => {
     f(""), x([]), y(-1), p(!1), r("");
-  }, w = (S) => {
-    f(S), p(!isEmpty(S)), c(!0), v(S);
+  }, w = (v) => {
+    f(v), p(!isEmpty(v)), c(!0), S(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: m,
-          onChange: (S) => w(S.target.value),
+          onChange: (v) => w(v.target.value),
           onKeyDown: B,
           placeholder: a(`Search ${k ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: E, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
     (l || !isEmpty(h) || d && isEmpty(h)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: l ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -6297,22 +6297,22 @@ 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), (v, _) => /* @__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"}`,
+        onClick: () => A(v),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : _ === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          S.name,
+          v.name,
           " ",
-          S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            S.slug,
+            v.slug,
             " )"
           ] })
         ]
       },
-      S.id
+      v.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
@@ -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-DuUAGYPy.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,
@@ -6655,10 +6655,10 @@ const DataBindingSelector = ({
   const { id: n, classNames: r, label: a, children: i, errors: l, help: c, hidden: d, required: p, schema: u, formData: g, onChange: m } = o, { selectedLang: f, fallbackLang: h, languages: x } = useLanguages(), b = useMemo(
     () => isEmpty(x) ? "" : isEmpty(f) ? h : f,
     [x, f, h]
-  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), C = usePageExternalData(), k = useSelectedBlock(), v = useRegisteredChaiBlocks(), A = useMemo(
-    () => get(v, [k == null ? void 0 : k._type, "i18nProps"], []),
-    [v, k == null ? void 0 : k._type]
-  ), [B, _] = useState(null);
+  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), C = usePageExternalData(), k = useSelectedBlock(), S = useRegisteredChaiBlocks(), A = useMemo(
+    () => get(S, [k == null ? void 0 : k._type, "i18nProps"], []),
+    [S, k == null ? void 0 : k._type]
+  ), [B, E] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: i });
@@ -6670,7 +6670,7 @@ const DataBindingSelector = ({
         "label",
         {
           htmlFor: n,
-          onClick: () => _(N ? null : n),
+          onClick: () => E(N ? null : n),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             N ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
@@ -6699,7 +6699,7 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const S = n.replace("root.", ""), E = A.includes(S) && !isEmpty(f) && isEmpty(g);
+  const v = n.replace("root.", ""), _ = A.includes(v) && !isEmpty(f) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
     u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -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: [
+        _ ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -6857,36 +6857,36 @@ const DataBindingSelector = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), i = getRegisteredChaiBlock(n == null ? void 0 : n._type), l = formDataWithSelectedLang(n, o, i), [c, d] = useState(l), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: B }, _, w) => {
-    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(B, _) }, w);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), i = getRegisteredChaiBlock(n == null ? void 0 : n._type), l = formDataWithSelectedLang(n, o, i), [c, d] = useState(l), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: B }, E, w) => {
+    E && (c == null ? void 0 : c._id) === n._id && a([n._id], { [E]: get(B, E) }, w);
   }, x = useCallback(
-    debounce(({ formData: B }, _, w) => {
-      h({ formData: B }, _, w), d(B);
+    debounce(({ formData: B }, E, w) => {
+      h({ formData: B }, E, w), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: B }, _) => {
-    _ && (r([n._id], { [_]: get(B, _) }), x({ formData: B }, _, { [_]: get(c, _) }));
-  }, y = ({ formData: B }, _) => {
-    _ && (r([g._id], { [_]: get(B, _) }), x({ formData: B }, _, { [_]: get(c, _) }));
+  ), b = ({ formData: B }, E) => {
+    E && (r([n._id], { [E]: get(B, E) }), x({ formData: B }, E, { [E]: get(c, E) }));
+  }, y = ({ formData: B }, E) => {
+    E && (r([g._id], { [E]: get(B, E) }), x({ formData: B }, E, { [E]: get(c, E) }));
   }, { schema: C, uiSchema: k } = useMemo(() => {
     const B = n == null ? void 0 : n._type;
     if (!B)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: _, uiSchema: w } = getBlockFormSchemas(B);
+      const { schema: E, uiSchema: w } = getBlockFormSchemas(B);
       if (B === "Repeater") {
         const j = get(n, "repeaterItems", "");
         startsWith(j, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: _, uiSchema: w };
+      return { schema: E, uiSchema: w };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [n]), { wrapperSchema: v, wrapperUiSchema: A } = useMemo(() => {
+  }, [n]), { wrapperSchema: S, wrapperUiSchema: A } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const B = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
-    return { wrapperSchema: _, wrapperUiSchema: w };
+    const B = g == null ? void 0 : g._type, { schema: E = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
+    return { wrapperSchema: E, wrapperUiSchema: w };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -6914,7 +6914,7 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: y,
           formData: f,
-          schema: v,
+          schema: S,
           uiSchema: A
         }
       ) })
@@ -7137,47 +7137,47 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [b, y] = useState(""), [C, k] = useState(!1), [v, A] = useState(!1);
+  const [n, r] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [b, y] = useState(""), [C, k] = useState(!1), [S, A] = useState(!1);
   useEffect(() => {
-    const { value: S, unit: E } = getClassValueAndUnit(l);
-    if (E === "") {
-      i(S), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: v, unit: _ } = getClassValueAndUnit(l);
+    if (_ === "") {
+      i(v), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    f(E), i(E === "class" || isEmpty(S) ? "" : S);
+    f(_), i(_ === "class" || isEmpty(v) ? "" : v);
   }, [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 B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), E = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
+    (v = !1) => {
+      const _ = getUserInputValues(`${a}`, u);
+      if (get(_, "error", !1)) {
         x(!0);
         return;
       }
-      const N = get(E, "unit") !== "" ? get(E, "unit") : m;
+      const N = get(_, "unit") !== "" ? get(_, "unit") : m;
       if (N === "auto" || N === "none") {
         B(`${d}${N}`);
         return;
       }
-      if (get(E, "value") === "")
+      if (get(_, "value") === "")
         return;
-      const D = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      S ? _(D) : B(D);
+      const D = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      v ? E(D) : B(D);
     },
-    [B, _, a, m, d, u]
+    [B, E, a, m, d, u]
   ), j = useCallback(
-    (S) => {
-      const E = getUserInputValues(`${a}`, u);
-      if (get(E, "error", !1)) {
+    (v) => {
+      const _ = getUserInputValues(`${a}`, u);
+      if (get(_, "error", !1)) {
         x(!0);
         return;
       }
-      if (S === "auto" || S === "none") {
-        B(`${d}${S}`);
+      if (v === "auto" || v === "none") {
+        B(`${d}${v}`);
         return;
       }
-      if (get(E, "value") === "")
+      if (get(_, "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(_, "unit") !== "" ? get(_, "unit") : v, D = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       B(D);
     },
     [B, a, d, u]
@@ -7201,29 +7201,29 @@ const BlockStylingProps = () => {
         "input",
         {
           readOnly: m === "class",
-          onKeyPress: (S) => {
-            S.key === "Enter" && w();
+          onKeyPress: (v) => {
+            v.key === "Enter" && w();
           },
-          onKeyDown: (S) => {
-            if (S.keyCode !== 38 && S.keyCode !== 40)
+          onKeyDown: (v) => {
+            if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
-            S.preventDefault(), A(!0);
-            const E = parseInt$1(S.target.value);
-            let N = isNaN$1(E) ? 0 : E;
-            S.keyCode === 38 && (N += 1), S.keyCode === 40 && (N -= 1);
+            v.preventDefault(), A(!0);
+            const _ = parseInt$1(v.target.value);
+            let N = isNaN$1(_) ? 0 : _;
+            v.keyCode === 38 && (N += 1), v.keyCode === 40 && (N -= 1);
             const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            _(P);
+            E(P);
           },
-          onKeyUp: (S) => {
-            v && (S.preventDefault(), A(!1));
+          onKeyUp: (v) => {
+            S && (v.preventDefault(), A(!1));
           },
           onBlur: () => w(),
-          onChange: (S) => {
-            x(!1), i(S.target.value);
+          onChange: (v) => {
+            x(!1), i(v.target.value);
           },
-          onClick: (S) => {
-            var E;
-            (E = S == null ? void 0 : S.target) == null || E.select(), r(!1);
+          onClick: (v) => {
+            var _;
+            (_ = v == null ? void 0 : v.target) == null || _.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(
@@ -7250,8 +7250,8 @@ const BlockStylingProps = () => {
           {
             units: u,
             current: m,
-            onSelect: (S) => {
-              r(!1), f(S), j(S);
+            onSelect: (v) => {
+              r(!1), f(v), j(v);
             }
           }
         ) })
@@ -7261,18 +7261,18 @@ const BlockStylingProps = () => {
       DragStyleButton,
       {
         onDragStart: () => k(!0),
-        onDragEnd: (S) => {
-          if (y(() => ""), k(!1), isEmpty(S))
+        onDragEnd: (v) => {
+          if (y(() => ""), k(!1), isEmpty(v))
             return;
-          const E = `${S}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
+          const _ = `${v}`, I = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${m === "-" ? "" : m}]`;
           B(I);
         },
-        onDrag: (S) => {
-          if (isEmpty(S))
+        onDrag: (v) => {
+          if (isEmpty(v))
             return;
-          y(S);
-          const E = `${S}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
-          _(I);
+          y(v);
+          const _ = `${v}`, I = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${m === "-" ? "" : m}]`;
+          E(I);
         },
         currentValue: a,
         unit: m,
@@ -7736,11 +7736,11 @@ const COLOR_PROP = {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: i, onEmitChange: l = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(i), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
-    (_, w = !0) => {
-      const j = { dark: p, mq: g, mod: u, cls: _, property: i, fullCls: "" };
+    (E, w = !0) => {
+      const j = { dark: p, mq: g, mod: u, cls: E, property: i, fullCls: "" };
       (p || u !== "") && (j.mq = "xs");
-      const S = generateFullClsName(j);
-      f(x, [S], w);
+      const v = generateFullClsName(j);
+      f(x, [v], w);
     },
     [x, p, g, u, i, f]
   ), C = useCallback(() => {
@@ -7749,18 +7749,18 @@ const COLOR_PROP = {
   useEffect(() => {
     l(k, m);
   }, [k, l, m]);
-  const [, , v] = useScreenSizeWidth(), A = useCallback(
-    (_) => {
-      v({
+  const [, , S] = useScreenSizeWidth(), A = useCallback(
+    (E) => {
+      S({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[_]);
+      }[E]);
     },
-    [v]
+    [S]
   ), B = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
   return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: k, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !B ? "text-foreground" : ""}`, children: n(a) }) }),
@@ -8005,7 +8005,7 @@ const COLOR_PROP = {
   activeButtonClass: i = ""
 }) => {
   const [l, , c] = useScreenSizeWidth(), [d, p] = useCanvasDisplayWidth(), [u, g] = useSelectedBreakpoints(), m = u, f = g, { t: h } = useTranslation(), x = useBuilderProp("breakpoints", WEB_BREAKPOINTS), b = (k) => {
-    m.includes(k) ? m.length > 2 && f(m.filter((v) => v !== k)) : f((v) => [...v, k]);
+    m.includes(k) ? m.length > 2 && f(m.filter((S) => S !== k)) : f((S) => [...S, k]);
   }, y = (k) => {
     n || c(k), p(k);
   }, C = getBreakpointValue(n ? d : l).toLowerCase();
@@ -8047,7 +8047,7 @@ const COLOR_PROP = {
             disabled: k.breakpoint === "xs",
             onCheckedChange: () => b(toUpper(k.breakpoint)),
             checked: includes(m, toUpper(k.breakpoint)),
-            onSelect: (v) => v.preventDefault(),
+            onSelect: (S) => S.preventDefault(),
             children: h(k.title)
           },
           k.breakpoint
@@ -8079,31 +8079,31 @@ function BreakpointSelector() {
 const DesignTokensIcon = ({ className: o = "" }) => /* @__PURE__ */ jsx(FontStyleIcon, { className: o });
 function ManualClasses() {
   var O;
-  const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [p] = useSelectedStylingBlocks(), u = useSelectedBlock(), g = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), [h, x] = useState(""), b = useAtomValue$1(chaiDesignTokensAtom), y = (O = first(p)) == null ? void 0 : O.prop, { classes: C } = getSplitChaiClasses(get(u, y, "")), k = C.split(" ").filter((L) => !isEmpty(L)), v = useMemo(() => [...k].sort((L, T) => {
-    const M = L.startsWith("dt-"), H = T.startsWith("dt-");
+  const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [p] = useSelectedStylingBlocks(), u = useSelectedBlock(), g = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), [h, x] = useState(""), b = useAtomValue$1(chaiDesignTokensAtom), y = (O = first(p)) == null ? void 0 : O.prop, { classes: C } = getSplitChaiClasses(get(u, y, "")), k = C.split(" ").filter((L) => !isEmpty(L)), S = useMemo(() => [...k].sort((L, T) => {
+    const 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) => {
+  }, E = (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(_);
+    const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(E);
     g(f, L, !0), x("");
-  }, [j, S] = useState([]), E = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
+  }, [j, v] = useState([]), _ = 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 (_ && (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, "");
@@ -8114,9 +8114,9 @@ function ManualClasses() {
     } else
       H = c.search(T);
     const z = [...W, ...map(H, "item")];
-    return S(z);
+    return v(z);
   }, I = () => {
-    S([]);
+    v([]);
   }, D = (L) => L.name, P = (L) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
     L.isDesignToken && /* @__PURE__ */ jsx(DesignTokensIcon, { className: "h-4 w-4 text-gray-600" }),
     /* @__PURE__ */ jsx("span", { children: L.name })
@@ -8135,14 +8135,14 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (L) => {
-        L.key === "Enter" && h.trim() !== "" && w();
+        L.key === "Enter" && h.trim() !== "" && j.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, j.length]
   ), $ = (L) => {
-    const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(_);
+    const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(E);
     m(f, [L]), g(f, T, !0), r(""), i(-1);
   }, F = () => {
     if (navigator.clipboard === void 0) {
@@ -8154,13 +8154,13 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1", children: [
-        /* @__PURE__ */ jsx("span", { children: d(E ? "Styles" : "Classes") }),
+        /* @__PURE__ */ jsx("span", { children: d(_ ? "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") })
+      _ && /* @__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(
@@ -8172,6 +8172,11 @@ function ManualClasses() {
           getSuggestionValue: D,
           renderSuggestion: P,
           inputProps: R,
+          highlightFirstSuggestion: !0,
+          onSuggestionSelected: (L, { suggestionValue: T }) => {
+            const M = E(T);
+            g(f, [M], !0), x("");
+          },
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -8194,7 +8199,7 @@ function ManualClasses() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: S.map(
       (L, T) => a === T ? /* @__PURE__ */ jsx(
         "input",
         {
@@ -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",
@@ -8590,7 +8595,7 @@ const registerChaiLibrary = (o, n) => {
               ]
             };
           } else if (n) {
-            const v = typeof n == "function" ? await n() : n, A = getBlocksFromHTML(v);
+            const S = typeof n == "function" ? await n() : n, A = getBlocksFromHTML(S);
             if (isEmpty(A)) return;
             k = {
               type: "Box",
@@ -8598,16 +8603,16 @@ const registerChaiLibrary = (o, n) => {
               name: get(A, "0._type", "Block")
             };
           } else if (r) {
-            const v = typeof r == "function" ? await r() : r;
-            if (isEmpty(v)) return;
+            const S = typeof r == "function" ? await r() : r;
+            if (isEmpty(S)) return;
             k = {
               type: "Box",
-              blocks: v,
-              name: get(v, "0._type", "Block")
+              blocks: S,
+              name: get(S, "0._type", "Block")
             };
           } else if (o) {
-            const v = typeof o == "function" ? await o() : o;
-            k = typeof v == "object" ? omit(v, ["component", "icon"]) : v;
+            const S = typeof o == "function" ? await o() : o;
+            k = typeof S == "object" ? omit(S, ["component", "icon"]) : S;
           }
           if (!k) return;
           u(C, k, !0), setTimeout(() => {
@@ -8727,10 +8732,10 @@ const BlockCard = ({
       return;
     }
   }, [y, C]);
-  const v = get(y, C, []), A = useRef(null), { t: B } = useTranslation(), _ = useRef(null);
+  const S = get(y, C, []), A = useRef(null), { t: B } = useTranslation(), E = useRef(null);
   useEffect(() => {
     var I;
-    const N = (I = _.current) == null ? void 0 : I.querySelector("[data-radix-scroll-area-viewport]");
+    const N = (I = E.current) == null ? void 0 : I.querySelector("[data-radix-scroll-area-viewport]");
     N && N.scrollTo({ top: 0, behavior: "smooth" });
   }, [c, C]);
   const w = (N) => {
@@ -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 v = filter(S, (N, I) => I % 2 === 0), _ = 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: [
@@ -8798,12 +8803,12 @@ const BlockCard = ({
       /* @__PURE__ */ jsx("div", { className: `flex h-full max-h-full w-full flex-col border-border ${r ? "" : "border-l"}`, children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
-          ref: _,
+          ref: E,
           onMouseEnter: () => A.current ? clearTimeout(A.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(v) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: `grid w-full gap-2 ${r ? "grid-cols-1 pb-20" : "grid-cols-2 px-2"}`, children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: S.map((N, I) => /* @__PURE__ */ jsx(
+            isEmpty(S) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: `grid w-full gap-2 ${r ? "grid-cols-1 pb-20" : "grid-cols-2 px-2"}`, children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: v.map((N, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -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: _.map((N, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -8863,14 +8868,14 @@ const BlockCard = ({
         }), m(!0);
       else if (!l && Object.keys(i || {}).length > 0) {
         const h = Object.entries(i).map(([b, y]) => {
-          const C = y, k = C.type || "partial", v = formatReadableName(k);
+          const C = y, k = C.type || "partial", S = formatReadableName(k);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(C.name || b),
             description: C.description || "",
             icon: FrameIcon,
-            group: v,
+            group: S,
             // Use formatted type as group
             category: "partial",
             partialBlockId: b,
@@ -8948,13 +8953,13 @@ const BlockCard = ({
   }, 500), () => {
     C.current && C.current.cancel();
   }), []);
-  const v = useCallback((I) => {
+  const S = useCallback((I) => {
     y(I), C.current && C.current(I);
   }, []), A = useCallback(() => {
     y(null), C.current && C.current.cancel();
   }, []), B = useCallback((I) => {
     C.current && C.current.cancel(), x(I), y(null);
-  }, []), _ = useMemo(
+  }, []), E = useMemo(
     () => p ? values(n).filter(
       (I) => {
         var D, P;
@@ -8964,13 +8969,13 @@ const BlockCard = ({
     [n, p]
   ), w = useMemo(
     () => p ? o.filter(
-      (I) => reject(filter(values(_), { group: I }), { hidden: !0 }).length > 0
+      (I) => reject(filter(values(E), { group: I }), { hidden: !0 }).length > 0
     ) : o.filter((I) => reject(filter(values(n), { group: I }), { hidden: !0 }).length > 0),
-    [n, _, o, p]
+    [n, E, o, p]
   ), j = 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]);
+  ), v = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), _ = useMemo(() => h === "all" ? j : [h], [j, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: p, setValue: u }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden pt-2", children: [
@@ -8979,7 +8984,7 @@ const BlockCard = ({
           "button",
           {
             onClick: () => B("all"),
-            onMouseEnter: () => v("all"),
+            onMouseEnter: () => S("all"),
             onMouseLeave: A,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || b === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: c("All")
@@ -8990,7 +8995,7 @@ const BlockCard = ({
           "button",
           {
             onClick: () => B(I),
-            onMouseEnter: () => v(I),
+            onMouseEnter: () => S(I),
             onMouseLeave: A,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === I || b === I ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(c(I.toLowerCase()))
@@ -9007,10 +9012,10 @@ const BlockCard = ({
             ' "',
             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: _.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),
+              h === "all" ? filter(values(v), { group: I }) : values(v),
               { hidden: !0 }
             ).map((D) => /* @__PURE__ */ jsx(
               CoreBlock,
@@ -9497,17 +9502,17 @@ const useStructureValidation = () => {
   var L;
   const { t: a } = useTranslation(), i = useUpdateBlocksProps(), [l] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let d = null;
-  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), m = useIsDragAndDropEnabled(), { id: f, data: h, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: C, handleClick: k } = o, v = useStructureValidation(), A = useMemo(() => v.getBlockErrors(f), [v, f]), B = get(h, "_show", !0), _ = (T) => {
+  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), m = useIsDragAndDropEnabled(), { id: f, data: h, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: C, handleClick: k } = o, S = useStructureValidation(), A = useMemo(() => S.getBlockErrors(f), [S, f]), B = get(h, "_show", !0), E = (T) => {
     T.stopPropagation(), B && o.toggle();
   }, w = (T) => {
     T.isInternal && (d = T.isOpen, T.isOpen && T.close());
   }, j = (T) => {
     T.isInternal && d !== null && (d ? T.open() : T.close(), d = null);
-  }, [S, E] = useAtom$1(currentAddSelection), N = () => {
+  }, [v, _] = 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 || _((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
   }, I = () => {
-    E(null);
+    _(null);
   }, D = (T) => {
     I(), T.stopPropagation(), !o.isOpen && B && o.toggle(), k(T);
   };
@@ -9586,7 +9591,7 @@ const useStructureValidation = () => {
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
               x ? "bg-primary/20" : "hover:bg-primary/10",
               b && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
+              (o == null ? void 0 : o.id) === v ? "bg-primary/10" : "",
               y && "opacity-20",
               B ? "" : "line-through opacity-50",
               F && x && "bg-primary/20 text-primary"
@@ -9597,7 +9602,7 @@ const useStructureValidation = () => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: p && /* @__PURE__ */ jsx("button", { onClick: _, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
+                    children: p && /* @__PURE__ */ jsx("button", { onClick: E, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -10102,15 +10107,15 @@ const useStructureValidation = () => {
   });
   const [h, x] = useTheme(), b = useThemeOptions(), { t: y } = useTranslation(), C = React.useCallback(
     (j) => {
-      const S = { ...h };
-      setPreviousTheme(S), x(j), f(), toast.success("Theme updated", {
+      const v = { ...h };
+      setPreviousTheme(v), x(j), 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" }),
             " Undo"
           ] }),
           onClick: () => {
-            x(S), clearPreviousTheme(), toast.dismiss();
+            x(v), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
@@ -10119,21 +10124,21 @@ const useStructureValidation = () => {
     },
     [h, x, f]
   ), k = () => {
-    const j = d.find((S) => Object.keys(S)[0] === a);
+    const j = d.find((v) => Object.keys(v)[0] === a);
     if (j) {
-      const S = Object.values(j)[0];
-      S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? (C(S), i(""), f()) : console.error("Invalid preset structure:", S);
+      const v = Object.values(j)[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);
-  }, v = (j) => {
+  }, S = (j) => {
     C(j), i(""), f();
   }, A = useDebouncedCallback(
-    (j, S) => {
+    (j, v) => {
       x(() => ({
         ...h,
         fontFamily: {
           ...h.fontFamily,
-          [j.replace(/font-/g, "")]: S
+          [j.replace(/font-/g, "")]: v
         }
       })), f();
     },
@@ -10147,33 +10152,33 @@ const useStructureValidation = () => {
       })), f();
     },
     [h, f]
-  ), _ = useDebouncedCallback(
-    (j, S) => {
+  ), E = useDebouncedCallback(
+    (j, v) => {
       x(() => {
-        const E = get(h, `colors.${j}`);
-        return n ? set(E, 1, S) : set(E, 0, S), f(), {
+        const _ = get(h, `colors.${j}`);
+        return n ? set(_, 1, v) : set(_, 0, v), f(), {
           ...h,
           colors: {
             ...h.colors,
-            [j]: 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 = (j) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(j.items).map(([v]) => {
+    const _ = get(h, `colors.${v}.${n ? 1 : 0}`);
+    return _ ? /* @__PURE__ */ jsxs("div", { id: `theme-${v}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: E,
-          onChange: (N) => _(S, N)
+          value: _,
+          onChange: (N) => E(v, N)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: S.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" ") + (!S.toLowerCase().includes("foreground") && !S.toLowerCase().includes("border") && !S.toLowerCase().includes("input") && !S.toLowerCase().includes("ring") && !S.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, S) : null;
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: v.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" ") + (!v.toLowerCase().includes("foreground") && !v.toLowerCase().includes("border") && !v.toLowerCase().includes("input") && !v.toLowerCase().includes("ring") && !v.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, v) : null;
   }) });
   return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
@@ -10189,8 +10194,8 @@ const useStructureValidation = () => {
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: i, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: y("Select preset") }) }),
             /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((j) => {
-              const S = Object.keys(j)[0], E = S.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(E) }, S);
+              const v = Object.keys(j)[0], _ = v.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(_) }, v);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: y("Apply") }) })
@@ -10202,12 +10207,12 @@ 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(([j, v]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
             label: j,
-            value: h.fontFamily[j.replace(/font-/g, "")] || S[Object.keys(S)[0]],
-            onChange: (E) => A(j, E)
+            value: h.fontFamily[j.replace(/font-/g, "")] || v[Object.keys(v)[0]],
+            onChange: (_) => A(j, _)
           },
           j
         )) }),
@@ -10250,7 +10255,7 @@ const useStructureValidation = () => {
           {
             open: l,
             onOpenChange: c,
-            onImport: v
+            onImport: S
           }
         ) })
       ] }),
@@ -11003,9 +11008,9 @@ const UndoRedo = () => {
       r(w), i(a), c(""), p(""), f("");
     }
   }, k = (w) => {
-    const j = a.filter((S, E) => E !== w);
+    const j = a.filter((v, _) => _ !== w);
     r(j), i(j);
-  }, v = (w) => {
+  }, S = (w) => {
     g(w), c(a[w].key), p(a[w].value);
   }, A = () => {
     if (l.startsWith("@")) {
@@ -11018,8 +11023,8 @@ 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) => {
+  }, E = useCallback((w) => {
+    const j = (N) => /[.,!?;:]/.test(N), v = (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 = " "), {
@@ -11027,15 +11032,15 @@ const UndoRedo = () => {
         prefixLength: P.length,
         suffixLength: R.length
       };
-    }, E = x.current;
-    if (E) {
-      const N = E.selectionStart || 0, I = E.value || "", D = E.selectionEnd || N;
+    }, _ = x.current;
+    if (_) {
+      const N = _.selectionStart || 0, I = _.value || "", D = _.selectionEnd || N;
       if (D > N) {
-        const O = `{{${w}}}`, { text: L } = S(I, N, O), T = I.slice(0, N) + L + I.slice(D);
+        const O = `{{${w}}}`, { text: L } = v(I, N, O), T = I.slice(0, N) + L + I.slice(D);
         p(T);
         return;
       }
-      const R = `{{${w}}}`, { text: $ } = S(I, N, R), F = I.slice(0, N) + $ + I.slice(N);
+      const R = `{{${w}}}`, { text: $ } = v(I, N, R), F = I.slice(0, N) + $ + I.slice(N);
       p(F);
     }
   }, []);
@@ -11069,7 +11074,7 @@ const UndoRedo = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: y("Value") }),
-                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: _ })
+                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: E })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -11099,7 +11104,7 @@ const UndoRedo = () => {
         /* @__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: () => 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" }) })
       ] })
     ] }, j)) })
@@ -11250,18 +11255,17 @@ const PartialWrapper = ({ partialBlockId: o }) => {
       type: "button",
       onClick: () => a(l.id),
       className: cn$2(
-        "group flex w-full items-center justify-between rounded-md border border-transparent bg-muted/40 px-3 py-2 text-left text-xs transition",
+        "group flex w-full items-center justify-between rounded-md border border-transparent bg-muted/40 px-3 py-1 text-left text-xs transition",
         "hover:border-muted-foreground/20 hover:bg-muted/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
         l.isSelected && "border-primary/40 bg-primary/10 text-primary"
       ),
       children: /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-2", children: [
         i && i,
-        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/50 group-hover:bg-primary/60" }),
         /* @__PURE__ */ jsx("span", { className: "truncate", children: l.label })
       ] })
     },
     l.id
-  )) }) : /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-muted px-3 py-2 text-xs text-muted-foreground", children: r })
+  )) }) : /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-muted px-3 py-1 text-xs text-muted-foreground", children: r })
 ] }), STYLES_PREFIX = "#styles:", getBlockLabel = (o) => {
   const r = [
     typeof o._name == "string" ? o._name : void 0,
@@ -11269,43 +11273,41 @@ 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 = `${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)
   }));
 }, TokenUsagePopover = ({ tokenId: o, tokenName: n }) => {
   const { t: r } = useTranslation(), [a] = useBlocksStore(), [i, l] = useSelectedBlockIds(), c = useBuilderProp("pageId"), d = useBuilderProp("siteWideUsage"), p = useMemo(() => collectTokenUsageOnPage(a, o), [a, o]), u = useMemo(
-    () => p.map((b) => ({
-      id: b.id,
-      label: b.label,
-      isSelected: i.includes(b.id)
+    () => p.map((S) => ({
+      id: S.id,
+      label: S.label,
+      isSelected: i.includes(S.id)
     })),
     [p, i]
-  ), g = useMemo(() => 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),
+  ), g = useMemo(() => d ? Object.entries(d).reduce(
+    (S, [A, B]) => (A === c || !(B != null && B.designTokens) || !Object.keys(B.designTokens).some((w) => typeof w != "string" ? !1 : w === o) || S.push({ id: A, name: B.name || A, isPartial: !!B.isPartial }), S),
     []
-  ), [d, n, o, c]), m = useMemo(
-    () => g.filter((b) => !b.isPartial).map((b) => ({
-      id: b.id,
-      label: b.name
+  ) : [], [d, n, o, c]), m = useMemo(
+    () => g.filter((S) => !S.isPartial).map((S) => ({
+      id: S.id,
+      label: S.name
     })),
     [g]
   ), f = useMemo(
-    () => g.filter((b) => b.isPartial).map((b) => ({
-      id: b.id,
-      label: b.name
+    () => g.filter((S) => S.isPartial).map((S) => ({
+      id: S.id,
+      label: S.name
     })),
     [g]
   ), h = useCallback(
-    (b) => {
-      l([b]);
+    (S) => {
+      l([S]);
     },
     [l]
-  ), x = (b) => {
-    if (!b) return;
-    const y = new URL(window.location.href);
-    y.searchParams.set("pageId", b), window.open(y.toString(), "_blank");
+  ), x = useBuilderProp("gotoPage", noop), { selectedLang: b, fallbackLang: y } = useLanguages(), { savePageAsync: C } = useSavePage(), k = async (S) => {
+    S && (await C(!0), x({ pageId: S, lang: b || y }));
   };
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-3 w-3" }) }) }),
@@ -11322,7 +11324,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
             items: u,
             emptyLabel: r("None"),
             onSelect: h,
-            icon: /* @__PURE__ */ jsx(BoxIcon, { fontSize: 8 })
+            icon: /* @__PURE__ */ jsx(ArrowRightIcon, { fontSize: 4 })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -11331,7 +11333,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
             title: r("Blocks affected on other pages"),
             items: m,
             emptyLabel: r("None"),
-            onSelect: x,
+            onSelect: k,
             icon: /* @__PURE__ */ jsx(FileIcon, { fontSize: 8 })
           }
         ),
@@ -11341,7 +11343,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
             title: r("Blocks affected on partial blocks"),
             items: f,
             emptyLabel: r("None"),
-            onSelect: x,
+            onSelect: k,
             icon: /* @__PURE__ */ jsx(GlobeIcon, { fontSize: 8 })
           }
         )
@@ -11349,15 +11351,15 @@ 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(""), [S, A] = useState(""), [B, E] = useState(""), w = useIncrementActionsCount(), j = (L) => {
     const T = L.trim();
     return T.length === 0 || T.length > 25 ? !1 : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(T);
-  }, S = (L, T = !1, M) => {
+  }, v = (L, T = !1, M) => {
     const H = L.trim();
     return H.length === 0 ? "" : H.length > 25 ? o("Token name must be 25 characters or less") : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(H) ? Object.entries(n).find(
       ([V, U]) => U.name === H && (!T || V !== M)
     ) ? o("Token name already exists") : "" : o("Only alphanumeric characters and hyphens allowed");
-  }, E = () => {
+  }, _ = () => {
     if (!m.trim() || !h.trim()) {
       toast.error(o("Please fill in both token name and classes"));
       return;
@@ -11370,7 +11372,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(),
@@ -11412,15 +11414,15 @@ const PartialWrapper = ({ partialBlockId: o }) => {
   }, P = () => {
     i(!0), c(null), f(""), x(""), A(""), p(!0);
   }, R = () => {
-    c(null), y(""), k(""), _(""), g(!1);
+    c(null), y(""), k(""), E(""), g(!1);
   }, $ = () => {
     i(!1), f(""), x(""), A(""), p(!1);
   }, F = (L) => {
     const T = L.replace(/\s+/g, "-");
-    f(T), A(S(T));
+    f(T), A(v(T));
   }, O = (L) => {
     const T = L.replace(/\s+/g, "-");
-    y(T), _(S(T, !0, l || void 0));
+    y(T), E(v(T, !0, l || void 0));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(
@@ -11515,7 +11517,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
               className: "text-sm"
             }
           ),
-          v ? /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: v }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: o("Button-Primary, Card-Header, Text-Large") })
+          S ? /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: S }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: o("Button-Primary, Card-Header, Text-Large") })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "new-classes", className: "text-sm", children: o("Tailwind Classes") }),
@@ -11533,7 +11535,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: _, 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: [
@@ -11614,7 +11616,7 @@ const RootLayout = () => {
       w && get(w, "view", "standard") === "standard" && (a.current = n, l(get(w, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, b]);
-  const v = useMemo(() => {
+  const S = useMemo(() => {
     if (n === null) return 0;
     const w = find(b, { id: n });
     return get(w, "view", "standard") === "standard" ? k : i;
@@ -11626,7 +11628,7 @@ const RootLayout = () => {
   useEffect(() => {
     n !== null && !find(b, { id: n }) && r("outline");
   }, [n, b]);
-  const _ = useCallback(
+  const E = useCallback(
     (w) => {
       h(w);
     },
@@ -11647,7 +11649,7 @@ const RootLayout = () => {
                   position: "top",
                   panelId: w.id,
                   isActive: n === w.id,
-                  show: () => _(w.id)
+                  show: () => E(w.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-top-" + j)) }),
@@ -11657,7 +11659,7 @@ const RootLayout = () => {
                   position: "bottom",
                   panelId: w.id,
                   isActive: n === w.id,
-                  show: () => _(w.id)
+                  show: () => E(w.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-bottom-" + j)) })
@@ -11667,8 +11669,8 @@ const RootLayout = () => {
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: v },
-                animate: { width: v },
+                initial: { width: S },
+                animate: { width: S },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: n !== null && get(C, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
@@ -11862,8 +11864,8 @@ const RootLayout = () => {
     });
   }, f = (x) => {
     if (!c) return;
-    const b = x.clientX - p.x, y = x.clientY - p.y, C = x.currentTarget, k = C.offsetWidth, v = C.offsetHeight, A = window.innerWidth - k, B = window.innerHeight - v, _ = Math.max(0, Math.min(b, A)), w = Math.max(0, Math.min(y, B));
-    r(_, w);
+    const b = x.clientX - p.x, y = x.clientY - p.y, C = x.currentTarget, k = C.offsetWidth, S = C.offsetHeight, A = window.innerWidth - k, B = window.innerHeight - S, E = Math.max(0, Math.min(b, A)), w = Math.max(0, Math.min(y, B));
+    r(E, w);
   }, h = () => {
     d(!1);
   };
@@ -12120,25 +12122,25 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   function k(w) {
     var j;
     if (isSelfAtom(n, w)) {
-      const E = u(o, w);
-      if (!isAtomStateInitialized(E))
+      const _ = u(o, w);
+      if (!isAtomStateInitialized(_))
         if (hasInitialValue(w))
           setAtomStateValueOrPromise(o, w, w.init);
         else
           throw new Error("no atom init");
-      return returnAtomValue(E);
+      return returnAtomValue(_);
     }
-    const S = f(o, w);
+    const v = f(o, w);
     try {
-      return returnAtomValue(S);
+      return returnAtomValue(v);
     } 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, v.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, v), (j = i.get(w)) == null || j.t.add(n), y || C();
     }
   }
-  let v, A;
+  let S, A;
   const B = {
     get signal() {
-      return v || (v = new AbortController()), v.signal;
+      return S || (S = new AbortController()), S.signal;
     },
     get setSelf() {
       return !A && isActuallyWritableAtom(n) && (A = (...w) => {
@@ -12150,14 +12152,14 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
           }
       }), A;
     }
-  }, _ = b.n;
+  }, E = b.n;
   try {
     const w = p(o, n, k, B);
-    return setAtomStateValueOrPromise(o, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => v == null ? void 0 : v.abort()), w.then(C, C)), b;
+    return setAtomStateValueOrPromise(o, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => S == null ? void 0 : S.abort()), w.then(C, C)), b;
   } catch (w) {
     return delete b.v, b.e = w, ++b.n, b;
   } finally {
-    y = !1, _ !== b.n && l.get(n) === _ && (l.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
+    y = !1, E !== b.n && l.get(n) === E && (l.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
   }
 }, invalidateDependents = (o, n) => {
   const r = getBuildingBlocks(o), a = r[1], i = r[2], l = r[11], c = [n];
@@ -12173,13 +12175,13 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   let h = !0;
   const x = (y) => returnAtomValue(g(o, y)), b = (y, ...C) => {
     var k;
-    const v = d(o, y);
+    const S = d(o, y);
     try {
       if (isSelfAtom(n, y)) {
         if (!hasInitialValue(y))
           throw new Error("atom not writable");
-        const A = v.n, B = C[0];
-        setAtomStateValueOrPromise(o, y, B), f(o, y), A !== v.n && (i.add(y), (k = l.c) == null || k.call(l, y), m(o, y));
+        const A = S.n, B = C[0];
+        setAtomStateValueOrPromise(o, y, B), f(o, y), A !== S.n && (i.add(y), (k = l.c) == null || k.call(l, y), m(o, y));
         return;
       } else
         return writeAtomState(o, y, ...C);
@@ -12590,7 +12592,7 @@ function domToJsx(o, n = 0) {
           (x, b) => {
             const [y, C] = b.split(":").map((k) => k.trim());
             if (y && C) {
-              const k = y.replace(/-([a-z])/g, (v) => v[1].toUpperCase());
+              const k = y.replace(/-([a-z])/g, (S) => S[1].toUpperCase());
               x[k] = C.replace(/['"]/g, "");
             }
             return x;
@@ -12717,19 +12719,19 @@ ${i})
       u(!1);
       let k = l({ blockId: i == null ? void 0 : i._id, additionalCoreBlocks: ["Icon"] });
       k = k.replace(/\s*bid=["'][^"']*["']/g, "");
-      const v = o === "ts", {
+      const S = o === "ts", {
         jsx: A,
         html: B,
-        componentName: _
+        componentName: E
       } = await getExportedCoded({
         selectedBlock: i,
         html: k,
-        isTypeScript: v
+        isTypeScript: S
       });
-      a({ html: B, jsx: A }), d(_), u(!0);
+      a({ html: B, jsx: A }), d(E), u(!0);
     } catch {
-      const v = "<div>Export failed. Close the modal and try again.</div>";
-      a({ html: v, jsx: v }), toast.error(n("Failed to generate export HTML"));
+      const S = "<div>Export failed. Close the modal and try again.</div>";
+      a({ html: S, jsx: S }), toast.error(n("Failed to generate export HTML"));
     }
   }, [n, o, i, l]);
   useEffect(() => {
@@ -12745,17 +12747,17 @@ ${i})
     },
     [n]
   ), x = (k) => {
-    const v = new Blob([k], { type: "text/jsx" }), A = URL.createObjectURL(v), B = document.createElement("a");
+    const S = new Blob([k], { type: "text/jsx" }), A = URL.createObjectURL(S), B = document.createElement("a");
     B.href = A, B.download = g(), document.body.appendChild(B), B.click(), URL.revokeObjectURL(A), document.body.removeChild(B), toast.success(n("Export code downloaded successfully!"));
   }, b = /* @__PURE__ */ jsxs("span", { children: [
     "Download ",
     /* @__PURE__ */ jsx("span", { className: "font-mono text-xs font-light text-gray-300", children: g() })
   ] }), y = useMemo(() => {
-    const k = { extend: shadcnTheme() }, v = JSON.stringify(k, null, 2);
+    const k = { extend: shadcnTheme() }, S = JSON.stringify(k, null, 2);
     return `{
   // Your tailwind config ...
 
-  "theme": ${v == null ? void 0 : v.split(`
+  "theme": ${S == null ? void 0 : S.split(`
 `).join(`
   `)},
 }`;