@chaibuilder/sdk 3.1.31 → 3.2.0

package/dist/{index-B1r-gfxH.js → index-CAiYwkFz.js}

@@ -13,7 +13,7 @@ import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
 import * as React from "react";
 import React__default, { useEffect, useCallback, useState, useMemo, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-BwPhgnhk.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, D as DESIGN_TOKEN_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-CSWwWMjY.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
 import { isObject } from "@rjsf/utils";
 import { toast, Toaster } from "sonner";
@@ -22,7 +22,7 @@ import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useDebou
 import Fuse from "fuse.js";
 import UndoManager from "undo-manager";
 import { ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, at as Input$1, aW as Skeleton, d as Alert, e as AlertDescription, v as Button, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, a9 as DialogTitle, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, B as Badge, b6 as TooltipProvider, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, b1 as Textarea, z as CardFooter, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, b8 as cn$2, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, a6 as DialogHeader, aX as Slider, aL as Separator, aY as Switch, a4 as DialogDescription, a5 as DialogFooter, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./tooltip-DUosa-uC.js";
-import { PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, GearIcon, DragHandleDots2Icon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, CaretDownIcon, Cross1Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ValueIcon, TextAlignCenterIcon, TextAlignRightIcon, TextAlignLeftIcon, Link2Icon, LinkBreak2Icon, EnterFullScreenIcon, ExclamationTriangleIcon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, ChevronRightIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, FontStyleIcon, CircleIcon, MagnifyingGlassIcon, ReloadIcon, CaretRightIcon, FrameIcon, SquareIcon, EraserIcon, CheckIcon, DownloadIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, StackIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, StopIcon, ZoomInIcon, DotsHorizontalIcon, LightningBoltIcon, Pencil1Icon } from "@radix-ui/react-icons";
+import { PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, GearIcon, DragHandleDots2Icon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, CaretDownIcon, Cross1Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ValueIcon, TextAlignCenterIcon, TextAlignRightIcon, TextAlignLeftIcon, Link2Icon, LinkBreak2Icon, EnterFullScreenIcon, ExclamationTriangleIcon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, ChevronRightIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, FontStyleIcon, CircleIcon, MagnifyingGlassIcon, ReloadIcon, CaretRightIcon, FrameIcon, SquareIcon, EraserIcon, CheckIcon, DownloadIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, StackIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, StopIcon, ZoomInIcon, DotsHorizontalIcon, LightningBoltIcon, GlobeIcon, Pencil1Icon } from "@radix-ui/react-icons";
 import i18n, { t } from "i18next";
 import ReactDOM, { createPortal } from "react-dom";
 import { HexAlphaColorPicker } from "react-colorful";
@@ -1059,13 +1059,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   return {
     moveBlocks: (x, b, y) => {
-      const C = map(x, (w) => {
-        const B = n.find((E) => E._id === w)._parent || null, S = n.filter((E) => B ? E._parent === B : !E._parent).map((E) => E._id).indexOf(w);
-        return { _id: w, oldParent: B, oldPosition: S };
-      }), k = C.find(({ _id: w }) => w === x[0]);
+      const C = map(x, (v) => {
+        const B = n.find((E) => E._id === v)._parent || null, w = n.filter((E) => B ? E._parent === B : !E._parent).map((E) => E._id).indexOf(v);
+        return { _id: v, oldParent: B, oldPosition: w };
+      }), k = C.find(({ _id: v }) => v === x[0]);
       k && k.oldParent === b && k.oldPosition === y || (l(x, b, y), o({
-        undo: () => each(C, ({ _id: w, oldParent: A, oldPosition: B }) => {
-          l([w], A, B);
+        undo: () => each(C, ({ _id: v, oldParent: A, oldPosition: B }) => {
+          l([v], 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((w) => b ? w._parent === b : !w._parent).indexOf(first(x));
+      const b = (k = first(x)) == null ? void 0 : k._parent, C = n.filter((v) => b ? v._parent === b : !v._parent).indexOf(first(x));
       i(map(x, "_id")), o({
         undo: () => a(x, b, C),
         redo: () => i(map(x, "_id"))
@@ -1090,8 +1090,8 @@ const undoRedoStateAtom = atom({
         C = map(x, (k) => ({ _id: k, ...y }));
       else {
         const k = keys(b);
-        C = map(x, (w) => {
-          const A = n.find((_) => _._id === w), B = { _id: w };
+        C = map(x, (v) => {
+          const A = n.find((_) => _._id === v), B = { _id: v };
           return each(k, (_) => B[_] = A[_]), B;
         });
       }
@@ -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), w = {};
-        return each(C, (A) => w[A] = k[A]), w;
+        const C = keys(y), k = n.find((A) => A._id === y._id), v = {};
+        return each(C, (A) => v[A] = k[A]), v;
       }), 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)], w = await i(f, addLangToPrompt(x, g, f), k, y), { blocks: A, error: B } = w;
+            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;
             if (B) {
               a(B);
               return;
             }
             if (f === "styles") {
-              const _ = A.map((S) => {
-                for (const E in S)
-                  E !== "_id" && (S[E] = `${STYLES_KEY},${S[E]}`);
-                return S;
+              const _ = A.map((w) => {
+                for (const E in w)
+                  E !== "_id" && (w[E] = `${STYLES_KEY},${w[E]}`);
+                return w;
               });
               c(_);
             } else
               l(A);
-            b && b(w);
+            b && b(v);
           } catch (y) {
             a(y);
           } finally {
@@ -3527,25 +3527,25 @@ function calculateElementZone(o, n, r, a, i) {
   }
 }
 function detectDropZone(o, n, r, a, i) {
-  var w, A, B, _;
+  var v, A, B, _;
   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 = ((w = i.defaultView) == null ? void 0 : w.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 = ((v = i.defaultView) == null ? void 0 : v.scrollY) || 0, x = ((A = i.defaultView) == null ? void 0 : A.scrollX) || 0;
   if (l === "canvas" && hasChildBlocks(o)) {
-    const S = getChildBlocks(o), E = S[S.length - 1];
+    const w = getChildBlocks(o), E = w[w.length - 1];
     if (E) {
-      const v = E.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, R = j.width - I - D, P = j.left + x + I;
+      const S = E.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = j.width - I - D, R = j.left + x + I;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
         rect: {
-          top: v.bottom + h,
-          left: P,
-          width: R,
+          top: S.bottom + h,
+          left: R,
+          width: P,
           height: 4
         },
         targetElement: E,
@@ -3557,11 +3557,11 @@ function detectDropZone(o, n, r, a, i) {
     }
   }
   if (f && !m && hasChildBlocks(o)) {
-    const S = detectGapZone(o, n, r, g);
-    if (S) {
-      const E = S.before.getBoundingClientRect(), v = S.after.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, R = getChildBlocks(o), P = getSiblingsInSameRow(R, S.before, g);
+    const w = detectGapZone(o, n, r, g);
+    if (w) {
+      const E = w.before.getBoundingClientRect(), S = w.after.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = getChildBlocks(o), R = getSiblingsInSameRow(P, w.before, g);
       let $ = 0;
-      if (P.forEach((F) => {
+      if (R.forEach((F) => {
         const O = F.getBoundingClientRect();
         O.height > $ && ($ = O.height);
       }), g === "vertical") {
@@ -3575,15 +3575,15 @@ function detectDropZone(o, n, r, a, i) {
             width: F,
             height: 4
           },
-          targetElement: S.before,
-          targetBlockId: S.before.getAttribute("data-block-id"),
+          targetElement: w.before,
+          targetBlockId: w.before.getAttribute("data-block-id"),
           targetParentId: l,
           isGapZone: !0,
           confidence: 1
           // High confidence for gap zones
         };
       } else {
-        const F = E.top + h, O = $ > 0 ? $ : Math.max(E.height, v.height);
+        const F = E.top + h, O = $ > 0 ? $ : Math.max(E.height, S.height);
         return {
           position: "after",
           placeholderOrientation: "vertical",
@@ -3593,8 +3593,8 @@ function detectDropZone(o, n, r, a, i) {
             width: 4,
             height: O
           },
-          targetElement: S.before,
-          targetBlockId: S.before.getAttribute("data-block-id"),
+          targetElement: w.before,
+          targetBlockId: w.before.getAttribute("data-block-id"),
           targetParentId: l,
           isGapZone: !0,
           confidence: 1
@@ -3603,20 +3603,20 @@ function detectDropZone(o, n, r, a, i) {
     }
   }
   if (d && p) {
-    const S = detectParentEdgeProximity(d, n, r, u);
-    if (S) {
-      const E = d.getBoundingClientRect(), v = window.getComputedStyle(d), j = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, I = parseFloat(v.paddingTop) || 0, D = parseFloat(v.paddingBottom) || 0, R = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, P = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
-      if (S === "start") {
+    const w = detectParentEdgeProximity(d, n, r, u);
+    if (w) {
+      const E = d.getBoundingClientRect(), S = window.getComputedStyle(d), j = parseFloat(S.paddingLeft) || 0, N = parseFloat(S.paddingRight) || 0, I = parseFloat(S.paddingTop) || 0, D = parseFloat(S.paddingBottom) || 0, P = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
+      if (w === "start") {
         const O = getChildBlocks(d)[0];
         if (O) {
           const L = O.getBoundingClientRect();
           if (u === "vertical") {
-            const T = E.width - j - N, M = E.left + P + j;
+            const T = E.width - j - N, M = E.left + R + j;
             return {
               position: "before",
               placeholderOrientation: $,
               rect: {
-                top: L.top + R - 2,
+                top: L.top + P - 2,
                 left: M,
                 width: T,
                 height: 4
@@ -3627,13 +3627,13 @@ function detectDropZone(o, n, r, a, i) {
               confidence: 0.9
             };
           } else {
-            const T = E.top + R + I, M = F.maxHeight > 0 ? F.maxHeight : E.height - I - D;
+            const T = E.top + P + I, M = F.maxHeight > 0 ? F.maxHeight : E.height - I - D;
             return {
               position: "before",
               placeholderOrientation: $,
               rect: {
                 top: T,
-                left: L.left + P - 2,
+                left: L.left + R - 2,
                 width: 4,
                 height: M
               },
@@ -3649,12 +3649,12 @@ function detectDropZone(o, n, r, a, i) {
         if (L) {
           const T = L.getBoundingClientRect();
           if (u === "vertical") {
-            const M = E.width - j - N, H = E.left + P + j;
+            const M = E.width - j - N, H = E.left + R + j;
             return {
               position: "after",
               placeholderOrientation: $,
               rect: {
-                top: T.bottom + R - 2,
+                top: T.bottom + P - 2,
                 left: H,
                 width: M,
                 height: 4
@@ -3665,13 +3665,13 @@ function detectDropZone(o, n, r, a, i) {
               confidence: 0.9
             };
           } else {
-            const M = E.top + R + I, H = F.maxHeight > 0 ? F.maxHeight : E.height - I - D;
+            const M = E.top + P + I, H = F.maxHeight > 0 ? F.maxHeight : E.height - I - D;
             return {
               position: "after",
               placeholderOrientation: $,
               rect: {
                 top: M,
-                left: T.right + P - 2,
+                left: T.right + R - 2,
                 width: 4,
                 height: H
               },
@@ -3687,12 +3687,12 @@ function detectDropZone(o, n, r, a, i) {
   }
   let b = calculateElementZone(o, n, r, f, u);
   if (m && b.position === "inside") {
-    const S = o.getBoundingClientRect();
+    const w = o.getBoundingClientRect();
     u === "vertical" ? b = {
-      position: (r - S.top) / S.height < 0.5 ? "before" : "after",
+      position: (r - w.top) / w.height < 0.5 ? "before" : "after",
       confidence: b.confidence
     } : b = {
-      position: (n - S.left) / S.width < 0.5 ? "before" : "after",
+      position: (n - w.left) / w.width < 0.5 ? "before" : "after",
       confidence: b.confidence
     };
   }
@@ -3760,45 +3760,45 @@ 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, w = 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 }, S = n ? getOrientation(n) : "vertical", E = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(E, o, S);
+  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((D = i.defaultView) == null ? void 0 : D.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, v = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, _ = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", E = n ? getChildBlocks(n) : [], S = getSiblingsInSameRow(E, o, w);
   let j = 0, N = 0;
-  if (v.forEach((R) => {
-    const P = R.getBoundingClientRect();
-    P.height > j && (j = P.height), P.width > N && (N = P.width);
+  if (S.forEach((P) => {
+    const R = P.getBoundingClientRect();
+    R.height > j && (j = R.height), R.width > N && (N = R.width);
   }), r === "before")
     if (a === "horizontal") {
-      const R = C ? C.width - k - w : l.width, P = C ? C.left + p + k : l.left + p;
+      const P = C ? C.width - k - v : l.width, R = C ? C.left + p + k : l.left + p;
       return {
         top: l.top + d - u - 2,
-        left: P,
-        width: R,
+        left: R,
+        width: P,
         height: 4
       };
     } else {
-      const R = l.top + d, P = S === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const P = l.top + d, R = w === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
-        top: R,
+        top: P,
         left: l.left + p - m - 2,
         width: 4,
-        height: P
+        height: R
       };
     }
   else if (r === "after")
     if (a === "horizontal") {
-      const R = C ? C.width - k - w : l.width, P = C ? C.left + p + k : l.left + p;
+      const P = C ? C.width - k - v : l.width, R = C ? C.left + p + k : l.left + p;
       return {
         top: l.bottom + d + g - 2,
-        left: P,
-        width: R,
+        left: R,
+        width: P,
         height: 4
       };
     } else {
-      const R = l.top + d, P = S === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const P = l.top + d, R = w === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
-        top: R,
+        top: P,
         left: l.right + p + f - 2,
         width: 4,
-        height: P
+        height: R
       };
     }
   else
@@ -3873,23 +3873,23 @@ 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, w = null, A = 0;
-      if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && x > 0 ? (k = !0, w = "up", A = y) : C < AUTO_SCROLL_CONFIG.EDGE_ZONE && x + h < b && (k = !0, w = "down", A = C), !k && d.current !== null) {
+      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) {
         cancelAnimationFrame(d.current), d.current = null;
         return;
       }
-      if (k && w) {
-        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, S = () => {
+      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 (!isDragging || !f) {
             d.current = null;
             return;
           }
-          const E = w === "up" ? -_ : _;
+          const E = v === "up" ? -_ : _;
           f.scrollBy(0, E);
-          const v = f.scrollY, j = v > 0, N = v + h < b, I = p.current, D = h - p.current;
-          w === "up" && j && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || w === "down" && N && D < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(S) : d.current = null;
+          const S = f.scrollY, j = S > 0, N = S + h < b, I = p.current, D = h - p.current;
+          v === "up" && j && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || v === "down" && N && D < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
         };
-        d.current === null && (d.current = requestAnimationFrame(S));
+        d.current === null && (d.current = requestAnimationFrame(w));
       }
     },
     [c]
@@ -3913,23 +3913,23 @@ const LEAF_BLOCK_TYPES = [
       const C = o._type || o.type;
       if (!C)
         return;
-      const k = m.clientX, w = m.clientY;
-      u(w);
-      const A = detectDropZone(h, k, w, C, c);
+      const k = m.clientX, v = m.clientY;
+      u(v);
+      const A = detectDropZone(h, k, v, C, c);
       if (!A)
         return;
       const B = h.getAttribute("data-block-type") || "Box";
       let _ = !1;
-      const S = LEAF_BLOCK_TYPES.includes(B);
+      const w = LEAF_BLOCK_TYPES.includes(B);
       if (A.position === "inside") {
-        if (S || y && !canDropWithoutCircularReference(y, x, l))
+        if (w || y && !canDropWithoutCircularReference(y, x, l))
           return;
         _ = canAcceptChildBlock(B, C);
       } else {
-        let v = h.parentElement, j = "Box";
-        for (; v && !v.hasAttribute("data-block-id"); )
-          v = v.parentElement;
-        if (v && (j = v.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
+        let S = h.parentElement, j = "Box";
+        for (; S && !S.hasAttribute("data-block-id"); )
+          S = S.parentElement;
+        if (S && (j = S.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
           return;
         _ = canAcceptChildBlock(j, C);
       }
@@ -4085,14 +4085,14 @@ const useBlockDragStart = () => {
       const y = r.targetBlockId, C = r.targetParentId;
       if (!y)
         return;
-      const { parentId: k, index: w } = calculateInsertionIndex(
+      const { parentId: k, index: v } = calculateInsertionIndex(
         i,
         y,
         C,
         r.position
       );
       if (o._id !== void 0)
-        d([o._id], k === null ? void 0 : k, w), g(), u([]), p([o._id]);
+        d([o._id], k === null ? void 0 : k, v), 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;
         c(
@@ -4100,7 +4100,7 @@ const useBlockDragStart = () => {
             blocks: [{ _type: B, _id: "partial-block", partialBlockId: o.partialBlockId }]
           } : (_ == null ? void 0 : _.length) > 0 ? { blocks: [..._] } : { type: B },
           k,
-          w
+          v
         );
       }
       setTimeout(() => {
@@ -4387,9 +4387,9 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       }),
       size({
         boundary: g == null ? void 0 : g.body,
-        apply({ availableWidth: w, availableHeight: A, elements: B }) {
+        apply({ availableWidth: v, availableHeight: A, elements: B }) {
           Object.assign(B.floating.style, {
-            maxWidth: `${Math.max(200, w)}px`,
+            maxWidth: `${Math.max(200, v)}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 w = null;
-    return r ? (w = setTimeout(() => b(), 500), () => {
-      w && clearTimeout(w);
+    let v = null;
+    return r ? (v = setTimeout(() => b(), 500), () => {
+      v && clearTimeout(v);
     }) : (b(), () => {
-      w && clearTimeout(w);
+      v && clearTimeout(v);
     });
   }, [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: (w) => {
-        w.stopPropagation(), w.preventDefault();
+      onClick: (v) => {
+        v.stopPropagation(), v.preventDefault();
       },
-      onMouseEnter: (w) => {
-        w.stopPropagation(), c(null);
+      onMouseEnter: (v) => {
+        v.stopPropagation(), c(null);
       },
-      onKeyDown: (w) => w.stopPropagation(),
+      onKeyDown: (v) => v.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, w;
-  const a = (k = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : k.color, i = (w = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : w.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, 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) => {
     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 w = (u == null ? void 0 : u.getHTML()) || "";
-          r(w);
+          const v = (u == null ? void 0 : u.getHTML()) || "";
+          r(v);
         }
       },
       from: "canvas"
@@ -5529,26 +5529,26 @@ const RichTextEditor = memo(
   ({ block: o, children: n }) => {
     const r = "content", { document: a } = useFrame(), { editingBlockId: i, editingItemIndex: l, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), f = useUpdateBlocksProps(), { selectedLang: h } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = i, { blockContent: C, blockType: k } = useMemo(() => {
       var N;
-      const S = o._type;
+      const w = o._type;
       let E = o[r];
-      const v = getRegisteredChaiBlock(o._type);
-      return h && ((N = v == null ? void 0 : v.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (E = get(o, `${r}-${h}`)), { blockContent: E, blockType: S };
-    }, [o, h]), w = useCallback(
-      (S) => {
-        var v;
-        const E = S || ((v = g.current) == null ? void 0 : v.innerText);
+      const S = getRegisteredChaiBlock(o._type);
+      return h && ((N = S == null ? void 0 : S.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (E = get(o, `${r}-${h}`)), { blockContent: E, blockType: w };
+    }, [o, h]), v = useCallback(
+      (w) => {
+        var S;
+        const E = w || ((S = g.current) == null ? void 0 : S.innerText);
         f([y], { [r]: E }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
       [y, f, c, x, h]
     ), A = useDebouncedCallback(
-      (S) => {
-        f([y], { [r]: S });
+      (w) => {
+        f([y], { [r]: w });
       },
       [y, o, f, h],
       1e3
     ), B = useCallback(
-      (S) => {
-        S.preventDefault(), y && (b.current = y), w(), setTimeout(() => {
+      (w) => {
+        w.preventDefault(), y && (b.current = y), v(), setTimeout(() => {
           const E = b.current;
           b.current = null, x([E]);
         }, 100);
@@ -5558,8 +5558,8 @@ const RichTextEditor = memo(
     useEffect(() => {
       var j;
       if (!y) return;
-      const S = `[data-block-id="${y}"]`, E = l >= 0 ? `[data-block-index="${l}"]` : "", v = a.querySelector(`${S}${E}`);
-      v && ((j = v == null ? void 0 : v.classList) == null || j.add("sr-only"), u(v));
+      const w = `[data-block-id="${y}"]`, E = l >= 0 ? `[data-block-index="${l}"]` : "", S = a.querySelector(`${w}${E}`);
+      S && ((j = S == null ? void 0 : S.classList) == null || j.add("sr-only"), u(S));
     }, [y, k, a, l]);
     const _ = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
       RichTextEditor,
@@ -5567,7 +5567,7 @@ const RichTextEditor = memo(
         blockContent: C,
         editingElement: p,
         onChange: A,
-        onClose: w,
+        onClose: v,
         onEscape: B
       }
     ) : /* @__PURE__ */ jsx(
@@ -5576,11 +5576,11 @@ const RichTextEditor = memo(
         editorRef: g,
         blockContent: C,
         editingElement: p,
-        onClose: w,
+        onClose: v,
         onChange: A,
         onEscape: B
       }
-    )) : null, [p, y, k, C, w, h]);
+    )) : null, [p, y, k, C, v, h]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       _,
       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", w = 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", v = useDirectBlockDrag(), A = useMemo(
     () => m ? applyBindingToBlockProps(applyLanguage(l, d, c), g, {
       index: h,
       key: x
@@ -5627,7 +5627,7 @@ const RichTextEditor = memo(
   ), _ = useMemo(
     () => u(l._id, getBlockRuntimeProps(l._type)),
     [l._id, l._type, u, getBlockRuntimeProps]
-  ), S = useMemo(() => {
+  ), w = useMemo(() => {
     const D = {
       "data-block-id": l._id,
       "data-block-type": l._type,
@@ -5636,13 +5636,13 @@ const RichTextEditor = memo(
     return k && C ? {
       ...D,
       draggable: !0,
-      onMouseDown: w.onMouseDown,
-      onDragStart: w.onDragStart,
-      onDragEnd: w.onDragEnd
+      onMouseDown: v.onMouseDown,
+      onDragStart: v.onDragStart,
+      onDragEnd: v.onDragEnd
     } : D;
-  }, [l._id, l._type, h, k, C, w]), E = useMemo(
+  }, [l._id, l._type, h, k, C, v]), E = useMemo(
     () => ({
-      blockProps: S,
+      blockProps: w,
       inBuilder: b === "edit",
       lang: d || p,
       ...A,
@@ -5650,8 +5650,8 @@ const RichTextEditor = memo(
       ..._,
       ...o
     }),
-    [b, S, d, p, A, B, _, o]
-  ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), j = useMemo(() => get(l, "_show", !0), [l]);
+    [b, w, d, p, A, B, _, o]
+  ), S = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), j = useMemo(() => get(l, "_show", !0), [l]);
   if (isNull(f) || !j) return null;
   let N = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
     ...E,
@@ -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 v ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: I }) : I;
+  return S ? /* @__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-Bp42QCHq.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-BZMSNYkF.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -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 w = { ...c, [u]: o }, A = applyBindingToBlockProps(w, p, { index: -1, key: "" });
+    const v = { ...c, [u]: o }, A = applyBindingToBlockProps(v, p, { index: -1, key: "" });
     return get(A, u, o);
   }, [o, c, p, u]), x = !!f || h !== PLACEHOLDER_IMAGE, b = (k) => {
-    const w = isArray(k) ? first(k) : k;
-    if (w) {
-      n(w == null ? void 0 : w.url);
-      const A = w == null ? void 0 : w.width, B = w == null ? void 0 : w.height, _ = g.includes("mobile");
+    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");
       if (c != null && c._id) {
-        const S = {
+        const w = {
           ...A && { [_ ? "mobileWidth" : "width"]: A },
           ...B && { [_ ? "mobileHeight" : "height"]: B },
-          ...w.description && { alt: w.description }
+          ...v.description && { alt: v.description }
         };
-        if (set(S, g, w.id), isEmpty(S)) return;
-        d([c._id], S);
+        if (set(w, g, v.id), isEmpty(w)) return;
+        d([c._id], w);
       }
     }
   }, y = useCallback(() => {
     if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
-      const k = {}, w = g.includes("mobile");
-      set(k, g, ""), set(k, w ? "mobileWidth" : "width", ""), set(k, w ? "mobileHeight" : "height", ""), d([c._id], k);
+      const k = {}, v = g.includes("mobile");
+      set(k, g, ""), set(k, v ? "mobileWidth" : "width", ""), set(k, v ? "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, w) => {
+      const h = (C) => /[.,!?;:]/.test(C), x = (C, k, v) => {
         let A = "", B = "";
-        const _ = k > 0 ? C[k - 1] : "", S = k < C.length ? C[k] : "";
-        return k > 0 && (_ === "." || !h(_) && _ !== " ") && (A = " "), k < C.length && !h(S) && S !== " " && (B = " "), {
-          text: A + w + 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,
           prefixLength: A.length,
           suffixLength: B.length
         };
@@ -6178,27 +6178,27 @@ const DataBindingSelector = ({
         if (C) {
           const k = `{{${m}}}`;
           C.commands.focus();
-          const { from: w, to: A } = C.state.selection;
-          if (w !== A)
+          const { from: v, to: A } = C.state.selection;
+          if (v !== A)
             C.chain().deleteSelection().insertContent(k).run();
           else {
-            const { state: _ } = C, S = _.selection.from, E = _.doc.textBetween(Math.max(0, S - 1), S), v = _.doc.textBetween(S, Math.min(S + 1, _.doc.content.size));
+            const { state: _ } = C, w = _.selection.from, E = _.doc.textBetween(Math.max(0, w - 1), w), S = _.doc.textBetween(w, Math.min(w + 1, _.doc.content.size));
             let j = "";
-            S > 0 && E !== " " && !h(E) && (j = " ");
+            w > 0 && E !== " " && !h(E) && (j = " ");
             let N = "";
-            v && v !== " " && !h(v) && (N = " "), C.chain().insertContent(j + k + N).run();
+            S && S !== " " && !h(S) && (N = " "), C.chain().insertContent(j + k + N).run();
           }
           setTimeout(() => n(C.getHTML(), {}, r), 100);
           return;
         }
       } else {
-        const C = b, k = C.selectionStart || 0, w = C.value || "", A = C.selectionEnd || k;
+        const C = b, k = C.selectionStart || 0, v = C.value || "", A = C.selectionEnd || k;
         if (A > k) {
-          const v = `{{${m}}}`, { text: j } = x(w, k, v), N = w.slice(0, k) + j + w.slice(A);
+          const S = `{{${m}}}`, { text: j } = x(v, k, S), N = v.slice(0, k) + j + v.slice(A);
           n(N, {}, r);
           return;
         }
-        const _ = `{{${m}}}`, { text: S } = x(w, k, _), E = w.slice(0, k) + S + w.slice(k);
+        const _ = `{{${m}}}`, { text: w } = x(v, k, _), E = v.slice(0, k) + w + v.slice(k);
         n(E, {}, r);
       }
     },
@@ -6221,67 +6221,67 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var E;
-  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, j) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (E = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : E.name;
+  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (S, j) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (E = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : E.name;
   useEffect(() => {
     if (f(""), x([]), y(-1), p(!1), !o || l || !startsWith(o, "pageType:")) return;
-    const v = split(o, ":"), j = get(v, 1, "page") || "page";
+    const S = split(o, ":"), j = get(S, 1, "page") || "page";
     g(j), (async () => {
-      const N = await i(j, [get(v, 2, "page")]);
+      const N = await i(j, [get(S, 2, "page")]);
       N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
-  const w = useDebouncedCallback(
-    async (v) => {
-      if (isEmpty(v))
+  const v = useDebouncedCallback(
+    async (S) => {
+      if (isEmpty(S))
         x([]);
       else {
-        const j = await i(u, v);
+        const j = await i(u, S);
         x(j);
       }
       c(!1), y(-1);
     },
     [u],
     300
-  ), A = (v) => {
-    const j = ["pageType", u, v.id];
-    j[1] && (r(j.join(":")), f(v.name), p(!1), x([]), y(-1));
-  }, B = (v) => {
-    switch (v.key) {
+  ), A = (S) => {
+    const j = ["pageType", u, S.id];
+    j[1] && (r(j.join(":")), f(S.name), p(!1), x([]), y(-1));
+  }, B = (S) => {
+    switch (S.key) {
       case "ArrowDown":
-        v.preventDefault(), y((j) => j < h.length - 1 ? j + 1 : j);
+        S.preventDefault(), y((j) => j < h.length - 1 ? j + 1 : j);
         break;
       case "ArrowUp":
-        v.preventDefault(), y((j) => j > 0 ? j - 1 : j);
+        S.preventDefault(), y((j) => j > 0 ? j - 1 : j);
         break;
       case "Enter":
-        if (v.preventDefault(), h.length === 0) return;
+        if (S.preventDefault(), h.length === 0) return;
         b >= 0 && A(h[b]);
         break;
       case "Escape":
-        v.preventDefault(), _();
+        S.preventDefault(), _();
         break;
     }
   };
   useEffect(() => {
     if (b >= 0 && C.current) {
-      const v = C.current.children[b];
-      v == null || v.scrollIntoView({ block: "nearest" });
+      const S = C.current.children[b];
+      S == null || S.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
   const _ = () => {
     f(""), x([]), y(-1), p(!1), r("");
-  }, S = (v) => {
-    f(v), p(!isEmpty(v)), c(!0), w(v);
+  }, w = (S) => {
+    f(S), p(!isEmpty(S)), c(!0), v(S);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__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)) }),
+    /* @__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)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: m,
-          onChange: (v) => S(v.target.value),
+          onChange: (S) => w(S.target.value),
           onKeyDown: B,
           placeholder: a(`Search ${k ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
@@ -6297,22 +6297,22 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (v, j) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (S, j) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => A(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : j === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => A(S),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : j === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          v.name,
+          S.name,
           " ",
-          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            v.slug,
+            S.slug,
             " )"
           ] })
         ]
       },
-      v.id
+      S.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
@@ -6406,7 +6406,7 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-CzmTpyXP.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DwKI9icC.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
   const c = useRef(null), [d, p] = useState(!1), u = useRTEditor({
     blockId: o,
     value: a,
@@ -6655,9 +6655,9 @@ 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(), w = useRegisteredChaiBlocks(), A = useMemo(
-    () => get(w, [k == null ? void 0 : k._type, "i18nProps"], []),
-    [w, k == null ? void 0 : k._type]
+  ), 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);
   if (d)
     return null;
@@ -6699,7 +6699,7 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const v = n.replace("root.", ""), j = A.includes(v) && !isEmpty(f) && isEmpty(g);
+  const S = n.replace("root.", ""), j = A.includes(S) && !isEmpty(f) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
     u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -6857,11 +6857,11 @@ 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 }, _, S) => {
-    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(B, _) }, S);
+  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);
   }, x = useCallback(
-    debounce(({ formData: B }, _, S) => {
-      h({ formData: B }, _, S), d(B);
+    debounce(({ formData: B }, _, w) => {
+      h({ formData: B }, _, w), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), b = ({ formData: B }, _) => {
@@ -6873,20 +6873,20 @@ function BlockSettings() {
     if (!B)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: _, uiSchema: S } = getBlockFormSchemas(B);
+      const { schema: _, uiSchema: w } = getBlockFormSchemas(B);
       if (B === "Repeater") {
         const E = get(n, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(S, "filter", { "ui:widget": "collectionSelect" }), set(S, "sort", { "ui:widget": "collectionSelect" })) : (set(S, "filter", { "ui:widget": "hidden" }), set(S, "sort", { "ui:widget": "hidden" }));
+        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: _, uiSchema: S };
+      return { schema: _, uiSchema: w };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [n]), { wrapperSchema: w, wrapperUiSchema: A } = useMemo(() => {
+  }, [n]), { wrapperSchema: v, wrapperUiSchema: A } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const B = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: S = {} } = getBlockFormSchemas(B);
-    return { wrapperSchema: _, wrapperUiSchema: S };
+    const B = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
+    return { wrapperSchema: _, 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: w,
+          schema: v,
           uiSchema: A
         }
       ) })
@@ -7137,17 +7137,17 @@ 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), [w, 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), [v, A] = useState(!1);
   useEffect(() => {
-    const { value: v, unit: j } = getClassValueAndUnit(l);
+    const { value: S, unit: j } = getClassValueAndUnit(l);
     if (j === "") {
-      i(v), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      i(S), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    f(j), i(j === "class" || isEmpty(v) ? "" : v);
+    f(j), i(j === "class" || isEmpty(S) ? "" : S);
   }, [l, p, u]);
-  const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), _ = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), S = useCallback(
-    (v = !1) => {
+  const B = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), _ = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), w = useCallback(
+    (S = !1) => {
       const j = getUserInputValues(`${a}`, u);
       if (get(j, "error", !1)) {
         x(!0);
@@ -7161,23 +7161,23 @@ const BlockStylingProps = () => {
       if (get(j, "value") === "")
         return;
       const D = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      v ? _(D) : B(D);
+      S ? _(D) : B(D);
     },
     [B, _, a, m, d, u]
   ), E = useCallback(
-    (v) => {
+    (S) => {
       const j = getUserInputValues(`${a}`, u);
       if (get(j, "error", !1)) {
         x(!0);
         return;
       }
-      if (v === "auto" || v === "none") {
-        B(`${d}${v}`);
+      if (S === "auto" || S === "none") {
+        B(`${d}${S}`);
         return;
       }
       if (get(j, "value") === "")
         return;
-      const N = get(j, "unit") !== "" ? get(j, "unit") : v, D = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      const N = get(j, "unit") !== "" ? get(j, "unit") : S, D = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       B(D);
     },
     [B, a, d, u]
@@ -7201,29 +7201,29 @@ const BlockStylingProps = () => {
         "input",
         {
           readOnly: m === "class",
-          onKeyPress: (v) => {
-            v.key === "Enter" && S();
+          onKeyPress: (S) => {
+            S.key === "Enter" && w();
           },
-          onKeyDown: (v) => {
-            if (v.keyCode !== 38 && v.keyCode !== 40)
+          onKeyDown: (S) => {
+            if (S.keyCode !== 38 && S.keyCode !== 40)
               return;
-            v.preventDefault(), A(!0);
-            const j = parseInt$1(v.target.value);
+            S.preventDefault(), A(!0);
+            const j = parseInt$1(S.target.value);
             let N = isNaN$1(j) ? 0 : j;
-            v.keyCode === 38 && (N += 1), v.keyCode === 40 && (N -= 1);
-            const I = `${N}`, R = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            _(R);
+            S.keyCode === 38 && (N += 1), S.keyCode === 40 && (N -= 1);
+            const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+            _(P);
           },
-          onKeyUp: (v) => {
-            w && (v.preventDefault(), A(!1));
+          onKeyUp: (S) => {
+            v && (S.preventDefault(), A(!1));
           },
-          onBlur: () => S(),
-          onChange: (v) => {
-            x(!1), i(v.target.value);
+          onBlur: () => w(),
+          onChange: (S) => {
+            x(!1), i(S.target.value);
           },
-          onClick: (v) => {
+          onClick: (S) => {
             var j;
-            (j = v == null ? void 0 : v.target) == null || j.select(), r(!1);
+            (j = S == null ? void 0 : S.target) == null || j.select(), r(!1);
           },
           value: C ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
@@ -7250,8 +7250,8 @@ const BlockStylingProps = () => {
           {
             units: u,
             current: m,
-            onSelect: (v) => {
-              r(!1), f(v), E(v);
+            onSelect: (S) => {
+              r(!1), f(S), E(S);
             }
           }
         ) })
@@ -7261,17 +7261,17 @@ const BlockStylingProps = () => {
       DragStyleButton,
       {
         onDragStart: () => k(!0),
-        onDragEnd: (v) => {
-          if (y(() => ""), k(!1), isEmpty(v))
+        onDragEnd: (S) => {
+          if (y(() => ""), k(!1), isEmpty(S))
             return;
-          const j = `${v}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
+          const j = `${S}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
           B(I);
         },
-        onDrag: (v) => {
-          if (isEmpty(v))
+        onDrag: (S) => {
+          if (isEmpty(S))
             return;
-          y(v);
-          const j = `${v}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
+          y(S);
+          const j = `${S}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
           _(I);
         },
         currentValue: a,
@@ -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(
-    (_, S = !0) => {
+    (_, w = !0) => {
       const E = { dark: p, mq: g, mod: u, cls: _, property: i, fullCls: "" };
       (p || u !== "") && (E.mq = "xs");
-      const v = generateFullClsName(E);
-      f(x, [v], S);
+      const S = generateFullClsName(E);
+      f(x, [S], w);
     },
     [x, p, g, u, i, f]
   ), C = useCallback(() => {
@@ -7749,9 +7749,9 @@ const COLOR_PROP = {
   useEffect(() => {
     l(k, m);
   }, [k, l, m]);
-  const [, , w] = useScreenSizeWidth(), A = useCallback(
+  const [, , v] = useScreenSizeWidth(), A = useCallback(
     (_) => {
-      w({
+      v({
         xs: 400,
         sm: 640,
         md: 800,
@@ -7760,7 +7760,7 @@ const COLOR_PROP = {
         "2xl": 1920
       }[_]);
     },
-    [w]
+    [v]
   ), 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((w) => w !== k)) : f((w) => [...w, k]);
+    m.includes(k) ? m.length > 2 && f(m.filter((v) => v !== k)) : f((v) => [...v, 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: (w) => w.preventDefault(),
+            onSelect: (v) => v.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)), w = 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)), v = 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) => {
     const T = Object.entries(b).find(([M, H]) => H.name === L);
-    return T ? `dt-${T[0]}` : L;
-  }, S = () => {
+    return T ? `${T[0]}` : L;
+  }, w = () => {
     const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(_);
     g(f, L, !0), x("");
-  }, [E, v] = useState([]), j = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
+  }, [E, S] = useState([]), j = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
     const T = L.trim().toLowerCase(), M = T.match(/.+:/g);
     let H = [], W = [];
     if (j && (T === "" ? W = Object.entries(b).map(([V, U]) => ({
       name: U.name,
-      id: `dt-${V}`,
+      id: `${V}`,
       isDesignToken: !0
     })) : W = Object.entries(b).filter(([V, U]) => U.name.toLowerCase().includes(T)).map(([V, U]) => ({
       name: U.name,
-      id: `dt-${V}`,
+      id: `${V}`,
       isDesignToken: !0
     }))), M && M.length > 0) {
       const [V] = M, U = T.replace(V, "");
@@ -8114,13 +8114,13 @@ function ManualClasses() {
     } else
       H = c.search(T);
     const z = [...W, ...map(H, "item")];
-    return v(z);
+    return S(z);
   }, I = () => {
-    v([]);
-  }, D = (L) => L.name, R = (L) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
+    S([]);
+  }, 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 })
-  ] }), P = useMemo(
+  ] }), R = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -8135,12 +8135,12 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (L) => {
-        L.key === "Enter" && h.trim() !== "" && S();
+        L.key === "Enter" && h.trim() !== "" && E.length === 0 && w();
       },
       onChange: (L, { newValue: T }) => x(T),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [h, d, o]
+    [h, d, o, E.length]
   ), $ = (L) => {
     const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(_);
     m(f, [L]), g(f, T, !0), r(""), i(-1);
@@ -8170,8 +8170,13 @@ function ManualClasses() {
           onSuggestionsFetchRequested: N,
           onSuggestionsClearRequested: I,
           getSuggestionValue: D,
-          renderSuggestion: R,
-          inputProps: P,
+          renderSuggestion: P,
+          inputProps: R,
+          highlightFirstSuggestion: !0,
+          onSuggestionSelected: (L, { suggestionValue: T }) => {
+            const M = _(T);
+            g(f, [M], !0), x("");
+          },
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -8187,14 +8192,14 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: S,
+          onClick: w,
           disabled: h.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: w.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.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 w = typeof n == "function" ? await n() : n, A = getBlocksFromHTML(w);
+            const v = typeof n == "function" ? await n() : n, A = getBlocksFromHTML(v);
             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 w = typeof r == "function" ? await r() : r;
-            if (isEmpty(w)) return;
+            const v = typeof r == "function" ? await r() : r;
+            if (isEmpty(v)) return;
             k = {
               type: "Box",
-              blocks: w,
-              name: get(w, "0._type", "Block")
+              blocks: v,
+              name: get(v, "0._type", "Block")
             };
           } else if (o) {
-            const w = typeof o == "function" ? await o() : o;
-            k = typeof w == "object" ? omit(w, ["component", "icon"]) : w;
+            const v = typeof o == "function" ? await o() : o;
+            k = typeof v == "object" ? omit(v, ["component", "icon"]) : v;
           }
           if (!k) return;
           u(C, k, !0), setTimeout(() => {
@@ -8727,13 +8732,13 @@ const BlockCard = ({
       return;
     }
   }, [y, C]);
-  const w = get(y, C, []), A = useRef(null), { t: B } = useTranslation(), _ = useRef(null);
+  const v = get(y, C, []), A = useRef(null), { t: B } = useTranslation(), _ = useRef(null);
   useEffect(() => {
     var I;
     const N = (I = _.current) == null ? void 0 : I.querySelector("[data-radix-scroll-area-viewport]");
     N && N.scrollTo({ top: 0, behavior: "smooth" });
   }, [c, C]);
-  const S = (N) => {
+  const w = (N) => {
     A.current && (clearTimeout(A.current), A.current = null), A.current = setTimeout(() => {
       A.current && k(N);
     }, 400);
@@ -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 v = filter(w, (N, I) => I % 2 === 0), j = filter(w, (N, I) => I % 2 === 1);
+  const S = filter(v, (N, I) => I % 2 === 0), j = filter(v, (N, I) => I % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: g, setValue: m }),
     /* @__PURE__ */ jsx("div", { className: "relative flex h-full max-h-full flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: `flex h-full flex-1 pt-2 ${r ? "flex-col" : ""}`, children: [
@@ -8774,7 +8779,7 @@ const BlockCard = ({
                   ] }) : map(y, (N, I) => /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      onMouseEnter: () => S(I),
+                      onMouseEnter: () => w(I),
                       onMouseLeave: () => clearTimeout(A.current),
                       role: "button",
                       onClick: () => k(I),
@@ -8802,8 +8807,8 @@ const BlockCard = ({
           onMouseEnter: () => A.current ? clearTimeout(A.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(w) && !isEmpty(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(
+            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(
                 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", w = formatReadableName(k);
+          const C = y, k = C.type || "partial", v = formatReadableName(k);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(C.name || b),
             description: C.description || "",
             icon: FrameIcon,
-            group: w,
+            group: v,
             // Use formatted type as group
             category: "partial",
             partialBlockId: b,
@@ -8948,7 +8953,7 @@ const BlockCard = ({
   }, 500), () => {
     C.current && C.current.cancel();
   }), []);
-  const w = useCallback((I) => {
+  const v = useCallback((I) => {
     y(I), C.current && C.current(I);
   }, []), A = useCallback(() => {
     y(null), C.current && C.current.cancel();
@@ -8957,20 +8962,20 @@ const BlockCard = ({
   }, []), _ = useMemo(
     () => p ? values(n).filter(
       (I) => {
-        var D, R;
-        return (((D = I.label) == null ? void 0 : D.toLowerCase()) + " " + ((R = I.type) == null ? void 0 : R.toLowerCase())).includes(p.toLowerCase());
+        var D, P;
+        return (((D = I.label) == null ? void 0 : D.toLowerCase()) + " " + ((P = I.type) == null ? void 0 : P.toLowerCase())).includes(p.toLowerCase());
       }
     ) : n,
     [n, p]
-  ), S = useMemo(
+  ), w = useMemo(
     () => p ? o.filter(
       (I) => reject(filter(values(_), { group: I }), { hidden: !0 }).length > 0
     ) : o.filter((I) => reject(filter(values(n), { group: I }), { hidden: !0 }).length > 0),
     [n, _, o, p]
   ), E = useMemo(
-    () => sortBy(S, (I) => CORE_GROUPS.indexOf(I) === -1 ? 99 : CORE_GROUPS.indexOf(I)),
-    [S]
-  ), v = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), j = useMemo(() => h === "all" ? E : [h], [E, h]);
+    () => sortBy(w, (I) => CORE_GROUPS.indexOf(I) === -1 ? 99 : CORE_GROUPS.indexOf(I)),
+    [w]
+  ), S = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), j = useMemo(() => h === "all" ? E : [h], [E, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: p, setValue: u }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden pt-2", children: [
@@ -8979,7 +8984,7 @@ const BlockCard = ({
           "button",
           {
             onClick: () => B("all"),
-            onMouseEnter: () => w("all"),
+            onMouseEnter: () => v("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: () => w(I),
+            onMouseEnter: () => v(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()))
@@ -9002,7 +9007,7 @@ const BlockCard = ({
         "div",
         {
           className: `h-full flex-1 overflow-hidden ${!l && E.length > 0 ? "w-3/4" : "w-full"}`,
-          children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: S.length === 0 && p ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+          children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: w.length === 0 && p ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
             c("No blocks found matching"),
             ' "',
             p,
@@ -9010,7 +9015,7 @@ const BlockCard = ({
           ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: j.map((I) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(I.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + i, children: reject(
-              h === "all" ? filter(values(v), { group: I }) : values(v),
+              h === "all" ? filter(values(S), { group: I }) : values(S),
               { hidden: !0 }
             ).map((D) => /* @__PURE__ */ jsx(
               CoreBlock,
@@ -9497,13 +9502,13 @@ 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, w = useStructureValidation(), A = useMemo(() => w.getBlockErrors(f), [w, 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, v = useStructureValidation(), A = useMemo(() => v.getBlockErrors(f), [v, f]), B = get(h, "_show", !0), _ = (T) => {
     T.stopPropagation(), B && o.toggle();
-  }, S = (T) => {
+  }, w = (T) => {
     T.isInternal && (d = T.isOpen, T.isOpen && T.close());
   }, E = (T) => {
     T.isInternal && d !== null && (d ? T.open() : T.close(), d = null);
-  }, [v, j] = useAtom$1(currentAddSelection), N = () => {
+  }, [S, j] = useAtom$1(currentAddSelection), N = () => {
     var T;
     I(), o.parent.isSelected || j((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
   }, I = () => {
@@ -9517,12 +9522,12 @@ const useStructureValidation = () => {
     }, 500);
     return () => clearTimeout(T);
   }, [b, o, y]);
-  const R = (T, M) => {
+  const P = (T, M) => {
     const H = l.contentDocument || l.contentWindow.document, W = H.querySelector(`[data-block-id=${T}]`);
     W && W.setAttribute("data-drop", M);
     const z = W.getBoundingClientRect(), V = l.getBoundingClientRect();
     z.top >= V.top && z.left >= V.left && z.bottom <= V.bottom && z.right <= V.right || (H.documentElement.scrollTop = W.offsetTop - V.top);
-  }, P = (T) => {
+  }, R = (T) => {
     I();
     const M = get(o, "parent.id");
     M !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: M, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
@@ -9534,7 +9539,7 @@ const useStructureValidation = () => {
         "div",
         {
           role: "button",
-          onClick: () => P(-1),
+          onClick: () => R(-1),
           className: "h-1 rounded bg-primary opacity-0 duration-200 group-hover:opacity-100",
           children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-primary px-3 py-1 text-[9px] leading-tight text-white hover:bg-primary", children: [
             /* @__PURE__ */ jsx(PlusIcon, { className: "w-2.4 h-2.5 stroke-[5] text-white" }),
@@ -9555,23 +9560,23 @@ const useStructureValidation = () => {
       style: n,
       "data-node-id": f,
       ref: r,
-      onDragStart: () => S(o),
+      onDragStart: () => w(o),
       onDragEnd: () => E(o),
       onDragOver: (T) => {
-        T.preventDefault(), R(f, "yes");
+        T.preventDefault(), P(f, "yes");
       },
       onDragLeave: (T) => {
-        T.preventDefault(), R(f, "no");
+        T.preventDefault(), P(f, "no");
       },
       onDrop: (T) => {
-        T.preventDefault(), R(f, "no");
+        T.preventDefault(), P(f, "no");
       },
       children: [
         c(PERMISSIONS.ADD_BLOCK) && !m && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
             onClick: (T) => {
-              T.stopPropagation(), P(o.childIndex);
+              T.stopPropagation(), R(o.childIndex);
             },
             onMouseEnter: N,
             onMouseLeave: I,
@@ -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) === v ? "bg-primary/10" : "",
+              (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
               y && "opacity-20",
               B ? "" : "line-through opacity-50",
               F && x && "bg-primary/20 text-primary"
@@ -10097,24 +10102,20 @@ const useStructureValidation = () => {
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, i] = React.useState(""), [l, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0), f = useIncrementActionsCount();
-  if (d) {
-    const E = d.map((v) => Object.keys(v)[0]);
-    DEFAULT_THEME_PRESET.forEach((v) => {
-      const j = Object.keys(v)[0];
-      E.includes(j) || d.push(v);
-    });
-  }
+  (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((E) => {
+    d.push(E);
+  });
   const [h, x] = useTheme(), b = useThemeOptions(), { t: y } = useTranslation(), C = React.useCallback(
     (E) => {
-      const v = { ...h };
-      setPreviousTheme(v), x(E), f(), toast.success("Theme updated", {
+      const S = { ...h };
+      setPreviousTheme(S), x(E), f(), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
             " Undo"
           ] }),
           onClick: () => {
-            x(v), clearPreviousTheme(), toast.dismiss();
+            x(S), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
@@ -10123,21 +10124,21 @@ const useStructureValidation = () => {
     },
     [h, x, f]
   ), k = () => {
-    const E = d.find((v) => Object.keys(v)[0] === a);
+    const E = d.find((S) => Object.keys(S)[0] === a);
     if (E) {
-      const v = Object.values(E)[0];
-      v && typeof v == "object" && "fontFamily" in v && "borderRadius" in v && "colors" in v ? (C(v), i(""), f()) : console.error("Invalid preset structure:", v);
+      const S = Object.values(E)[0];
+      S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? (C(S), i(""), f()) : console.error("Invalid preset structure:", S);
     } else
       console.error("Preset not found:", a);
-  }, w = (E) => {
+  }, v = (E) => {
     C(E), i(""), f();
   }, A = useDebouncedCallback(
-    (E, v) => {
+    (E, S) => {
       x(() => ({
         ...h,
         fontFamily: {
           ...h.fontFamily,
-          [E.replace(/font-/g, "")]: v
+          [E.replace(/font-/g, "")]: S
         }
       })), f();
     },
@@ -10152,10 +10153,10 @@ const useStructureValidation = () => {
     },
     [h, f]
   ), _ = useDebouncedCallback(
-    (E, v) => {
+    (E, S) => {
       x(() => {
         const j = get(h, `colors.${E}`);
-        return n ? set(j, 1, v) : set(j, 0, v), f(), {
+        return n ? set(j, 1, S) : set(j, 0, S), f(), {
           ...h,
           colors: {
             ...h.colors,
@@ -10166,18 +10167,18 @@ const useStructureValidation = () => {
     },
     [h, f],
     200
-  ), S = (E) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(E.items).map(([v]) => {
-    const j = get(h, `colors.${v}.${n ? 1 : 0}`);
-    return j ? /* @__PURE__ */ jsxs("div", { id: `theme-${v}`, className: "mt-1 flex items-center gap-x-2", children: [
+  ), w = (E) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(E.items).map(([S]) => {
+    const j = get(h, `colors.${S}.${n ? 1 : 0}`);
+    return j ? /* @__PURE__ */ jsxs("div", { id: `theme-${S}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
           value: j,
-          onChange: (N) => _(v, N)
+          onChange: (N) => _(S, N)
         }
       ),
-      /* @__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;
+      /* @__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;
   }) });
   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: [
@@ -10193,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((E) => {
-              const v = Object.keys(E)[0], j = v.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(j) }, v);
+              const S = Object.keys(E)[0], j = S.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(j) }, S);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: y("Apply") }) })
@@ -10206,11 +10207,11 @@ 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(([E, v]) => /* @__PURE__ */ jsx(
+        (b == null ? void 0 : b.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(b.fontFamily).map(([E, S]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
             label: E,
-            value: h.fontFamily[E.replace(/font-/g, "")] || v[Object.keys(v)[0]],
+            value: h.fontFamily[E.replace(/font-/g, "")] || S[Object.keys(S)[0]],
             onChange: (j) => A(E, j)
           },
           E
@@ -10247,14 +10248,14 @@ const useStructureValidation = () => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: b.colors.map((E) => S(E)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: b.colors.map((E) => w(E)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: y("Loading...") }), children: l && g && /* @__PURE__ */ jsx(
           LazyCssImportModal,
           {
             open: l,
             onOpenChange: c,
-            onImport: w
+            onImport: v
           }
         ) })
       ] }),
@@ -11003,43 +11004,43 @@ const UndoRedo = () => {
       return;
     }
     if (l) {
-      const S = [...a, { key: l, value: d }];
-      r(S), i(a), c(""), p(""), f("");
+      const w = [...a, { key: l, value: d }];
+      r(w), i(a), c(""), p(""), f("");
     }
-  }, k = (S) => {
-    const E = a.filter((v, j) => j !== S);
+  }, k = (w) => {
+    const E = a.filter((S, j) => j !== w);
     r(E), i(E);
-  }, w = (S) => {
-    g(S), c(a[S].key), p(a[S].value);
+  }, v = (w) => {
+    g(w), c(a[w].key), p(a[w].value);
   }, A = () => {
     if (l.startsWith("@")) {
       f(y("Attribute keys cannot start with @"));
       return;
     }
     if (u !== null && l) {
-      const S = [...a];
-      S[u] = { key: l, value: d }, r(S), i(S), g(null), c(""), p(""), f("");
+      const w = [...a];
+      w[u] = { key: l, value: d }, r(w), i(w), g(null), c(""), p(""), f("");
     }
-  }, B = (S) => {
-    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? A() : C());
-  }, _ = useCallback((S) => {
-    const E = (N) => /[.,!?;:]/.test(N), v = (N, I, D) => {
-      let R = "", P = "";
+  }, B = (w) => {
+    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), u !== null ? A() : C());
+  }, _ = useCallback((w) => {
+    const E = (N) => /[.,!?;:]/.test(N), S = (N, I, D) => {
+      let P = "", R = "";
       const $ = I > 0 ? N[I - 1] : "", F = I < N.length ? N[I] : "";
-      return I > 0 && ($ === "." || !E($) && $ !== " ") && (R = " "), I < N.length && !E(F) && F !== " " && (P = " "), {
-        text: R + D + P,
-        prefixLength: R.length,
-        suffixLength: P.length
+      return I > 0 && ($ === "." || !E($) && $ !== " ") && (P = " "), I < N.length && !E(F) && F !== " " && (R = " "), {
+        text: P + D + R,
+        prefixLength: P.length,
+        suffixLength: R.length
       };
     }, j = x.current;
     if (j) {
       const N = j.selectionStart || 0, I = j.value || "", D = j.selectionEnd || N;
       if (D > N) {
-        const O = `{{${S}}}`, { text: L } = v(I, N, O), T = I.slice(0, N) + L + I.slice(D);
+        const O = `{{${w}}}`, { text: L } = S(I, N, O), T = I.slice(0, N) + L + I.slice(D);
         p(T);
         return;
       }
-      const P = `{{${S}}}`, { text: $ } = v(I, N, P), F = I.slice(0, N) + $ + I.slice(N);
+      const R = `{{${w}}}`, { text: $ } = S(I, N, R), F = I.slice(0, N) + $ + I.slice(N);
       p(F);
     }
   }, []);
@@ -11047,8 +11048,8 @@ const UndoRedo = () => {
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (S) => {
-          S.preventDefault(), u !== null ? A() : C();
+        onSubmit: (w) => {
+          w.preventDefault(), u !== null ? A() : C();
         },
         className: "space-y-3",
         children: [
@@ -11064,7 +11065,7 @@ const UndoRedo = () => {
                   id: "attrKey",
                   ref: h,
                   value: l,
-                  onChange: (S) => c(S.target.value),
+                  onChange: (w) => c(w.target.value),
                   placeholder: y("Enter key"),
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -11084,7 +11085,7 @@ const UndoRedo = () => {
                   id: "attrValue",
                   ref: x,
                   value: d,
-                  onChange: (S) => p(S.target.value),
+                  onChange: (w) => p(w.target.value),
                   onKeyDown: B,
                   placeholder: y("Enter value"),
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -11097,13 +11098,13 @@ const UndoRedo = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, E) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((w, E) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: S.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: w.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: w.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => w(E), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(E), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(E), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
     ] }, E)) })
@@ -11246,11 +11247,117 @@ const PartialWrapper = ({ partialBlockId: o }) => {
   component: DefaultTopBar
 }, registerChaiTopBar = (o) => {
   TOP_BAR.component = o;
-}, useTopBarComponent = () => useMemo(() => TOP_BAR.component, []), 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(""), [w, A] = useState(""), [B, _] = useState(""), S = useIncrementActionsCount(), E = (L) => {
+}, useTopBarComponent = () => useMemo(() => TOP_BAR.component, []), TokenUsageSection = ({ title: o, items: n, emptyLabel: r, onSelect: a, icon: i }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: o }),
+  n.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: n.map((l) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      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",
+        "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 })
+] }), STYLES_PREFIX = "#styles:", getBlockLabel = (o) => {
+  const r = [
+    typeof o._name == "string" ? o._name : void 0,
+    typeof o._type == "string" ? o._type : void 0
+  ].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 = `${DESIGN_TOKEN_PREFIX}${n}`;
+  return o.filter((a) => Object.values(a).some((i) => typeof i != "string" || !i.startsWith(STYLES_PREFIX) ? !1 : i.includes(r))).map((a) => ({
+    id: a._id,
+    label: getBlockLabel(a)
+  }));
+}, 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, i]
+  ), g = useMemo(() => d ? Object.entries(d).reduce(
+    (b, [y, C]) => (y === c || !(C != null && C.designTokens) || !Object.keys(C.designTokens).some((v) => typeof v != "string" ? !1 : v === o) || b.push({ id: y, name: C.name || y, isPartial: !!C.isPartial }), b),
+    []
+  ) : [], [d, n, o, c]), m = useMemo(
+    () => g.filter((b) => !b.isPartial).map((b) => ({
+      id: b.id,
+      label: b.name
+    })),
+    [g]
+  ), f = useMemo(
+    () => g.filter((b) => b.isPartial).map((b) => ({
+      id: b.id,
+      label: b.name
+    })),
+    [g]
+  ), h = useCallback(
+    (b) => {
+      l([b]);
+    },
+    [l]
+  ), x = (b) => {
+    if (!b) return;
+    const y = new URL(window.location.href);
+    y.searchParams.set("pageId", b), window.open(y.toString(), "_blank");
+  };
+  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" }) }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { side: "bottom", align: "end", className: "w-80 p-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 px-4 py-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold", children: n }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: r("Usage summary for this design token across your site.") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "no-scrollbar max-h-64 space-y-4 overflow-y-auto px-4 pb-4", children: [
+        /* @__PURE__ */ jsx(
+          TokenUsageSection,
+          {
+            title: r("Blocks affected on this page"),
+            items: u,
+            emptyLabel: r("None"),
+            onSelect: h,
+            icon: /* @__PURE__ */ jsx(BoxIcon, { fontSize: 8 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TokenUsageSection,
+          {
+            title: r("Blocks affected on other pages"),
+            items: m,
+            emptyLabel: r("None"),
+            onSelect: x,
+            icon: /* @__PURE__ */ jsx(FileIcon, { fontSize: 8 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TokenUsageSection,
+          {
+            title: r("Blocks affected on partial blocks"),
+            items: f,
+            emptyLabel: r("None"),
+            onSelect: x,
+            icon: /* @__PURE__ */ jsx(GlobeIcon, { fontSize: 8 })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, 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(), E = (L) => {
     const T = L.trim();
     return T.length === 0 || T.length > 25 ? !1 : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(T);
-  }, v = (L, T = !1, M) => {
+  }, S = (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)
@@ -11268,14 +11375,14 @@ 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(),
         value: h.trim()
       }
     };
-    r(M), f(""), x(""), i(!1), p(!1), S(), toast.success(o("Token added successfully"));
+    r(M), f(""), x(""), i(!1), p(!1), w(), toast.success(o("Token added successfully"));
   }, N = () => {
     if (!b.trim() || !C.trim()) {
       toast.error(o("Please fill in both token name and classes"));
@@ -11300,32 +11407,32 @@ const PartialWrapper = ({ partialBlockId: o }) => {
         value: C.trim()
       }
     };
-    r(T), c(null), y(""), k(""), g(!1), S(), toast.success(o("Token updated successfully"));
+    r(T), c(null), y(""), k(""), g(!1), w(), toast.success(o("Token updated successfully"));
   }, I = (L) => {
     const T = { ...n };
-    delete T[L], r(T), S(), toast.success(o("Token deleted successfully"));
+    delete T[L], r(T), w(), toast.success(o("Token deleted successfully"));
   }, D = (L) => {
     const T = n[L];
     T && (c(L), y(T.name), k(T.value), i(!1), g(!0));
-  }, R = () => {
-    i(!0), c(null), f(""), x(""), A(""), p(!0);
   }, P = () => {
+    i(!0), c(null), f(""), x(""), A(""), p(!0);
+  }, R = () => {
     c(null), y(""), k(""), _(""), g(!1);
   }, $ = () => {
     i(!1), f(""), x(""), A(""), p(!1);
   }, F = (L) => {
     const T = L.replace(/\s+/g, "-");
-    f(T), A(v(T));
+    f(T), A(S(T));
   }, O = (L) => {
     const T = L.replace(/\s+/g, "-");
-    y(T), _(v(T, !0, l || void 0));
+    y(T), _(S(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(
       Button,
       {
         variant: "outline",
-        onClick: R,
+        onClick: P,
         disabled: a || l !== null,
         size: "sm",
         className: "h-7 text-xs",
@@ -11345,6 +11452,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
         children: [
           /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("span", { className: "flex items-center break-all pl-1 text-xs font-semibold", children: T.name }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center opacity-0 group-hover:opacity-100", children: [
+            /* @__PURE__ */ jsx(TokenUsagePopover, { tokenId: L, tokenName: T.name }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -11412,7 +11520,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
               className: "text-sm"
             }
           ),
-          w ? /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: w }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: o("Button-Primary, Card-Header, Text-Large") })
+          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") })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "new-classes", className: "text-sm", children: o("Tailwind Classes") }),
@@ -11433,7 +11541,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
         /* @__PURE__ */ jsx(Button, { onClick: j, className: "h-8 text-sm", children: o("Add Token") })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: u, onOpenChange: P, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: u, onOpenChange: R, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: o("Edit Design Token") }),
         /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm", children: o("Update the design token name and classes.") })
@@ -11466,7 +11574,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
         ] })
       ] }),
       /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: P, className: "h-8 text-sm", children: o("Cancel") }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: R, className: "h-8 text-sm", children: o("Cancel") }),
         /* @__PURE__ */ jsx(Button, { onClick: N, className: "h-8 text-sm", children: o("Update Token") })
       ] })
     ] }) })
@@ -11497,24 +11605,24 @@ registerChaiSidebarPanel("outline", {
   panel: () => /* @__PURE__ */ jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsx(ListTree, {}) })
 });
 const RootLayout = () => {
-  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [i, l] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = reverse([...u ?? []]), m = useCallback((S) => {
-    S.preventDefault();
+  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [i, l] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = reverse([...u ?? []]), m = useCallback((w) => {
+    w.preventDefault();
   }, []), f = useMemo(() => [p].flat(), [p]), h = useCallback(
-    (S) => {
-      console.log("handleMenuItemClick", S, n), r(n === S ? null : S);
+    (w) => {
+      console.log("handleMenuItemClick", w, n), r(n === w ? null : w);
     },
     [n, r]
   ), { t: x } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), C = find(b, { id: n }) ?? first(b), k = get(C, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
-      const S = find(b, { id: n });
-      S && get(S, "view", "standard") === "standard" && (a.current = n, l(get(S, "width", DEFAULT_PANEL_WIDTH)));
+      const w = find(b, { id: n });
+      w && get(w, "view", "standard") === "standard" && (a.current = n, l(get(w, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, b]);
-  const w = useMemo(() => {
+  const v = useMemo(() => {
     if (n === null) return 0;
-    const S = find(b, { id: n });
-    return get(S, "view", "standard") === "standard" ? k : i;
+    const w = find(b, { id: n });
+    return get(w, "view", "standard") === "standard" ? k : i;
   }, [n, k, i, b]), A = useCallback(() => {
     r(a.current);
   }, [r, n]), B = useCallback(() => {
@@ -11524,8 +11632,8 @@ const RootLayout = () => {
     n !== null && !find(b, { id: n }) && r("outline");
   }, [n, b]);
   const _ = useCallback(
-    (S) => {
-      h(S);
+    (w) => {
+      h(w);
     },
     [h]
   );
@@ -11539,24 +11647,24 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: f.map((S, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: f.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "top",
-                  panelId: S.id,
-                  isActive: n === S.id,
-                  show: () => _(S.id)
+                  panelId: w.id,
+                  isActive: n === w.id,
+                  show: () => _(w.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(S.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-top-" + E)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((S, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: S.id,
-                  isActive: n === S.id,
-                  show: () => _(S.id)
+                  panelId: w.id,
+                  isActive: n === w.id,
+                  show: () => _(w.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(S.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-bottom-" + E)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -11564,8 +11672,8 @@ const RootLayout = () => {
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: w },
-                animate: { width: w },
+                initial: { width: v },
+                animate: { width: v },
                 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(
@@ -11759,8 +11867,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, w = C.offsetHeight, A = window.innerWidth - k, B = window.innerHeight - w, _ = Math.max(0, Math.min(b, A)), S = Math.max(0, Math.min(y, B));
-    r(_, S);
+    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);
   }, h = () => {
     d(!1);
   };
@@ -12002,10 +12110,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   var r;
   const a = getBuildingBlocks(o), i = a[1], l = a[2], c = a[3], d = a[6], p = a[7], u = a[11], g = a[12], m = a[13], f = a[14], h = a[16], x = a[17], b = u(o, n);
   if (isAtomStateInitialized(b) && (i.has(n) && l.get(n) !== b.n || Array.from(b.d).every(
-    ([S, E]) => (
+    ([w, E]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      f(o, S).n === E
+      f(o, w).n === E
     )
   )))
     return b;
@@ -12014,34 +12122,34 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   function C() {
     i.has(n) && (x(o, n), m(o), g(o));
   }
-  function k(S) {
+  function k(w) {
     var E;
-    if (isSelfAtom(n, S)) {
-      const j = u(o, S);
+    if (isSelfAtom(n, w)) {
+      const j = u(o, w);
       if (!isAtomStateInitialized(j))
-        if (hasInitialValue(S))
-          setAtomStateValueOrPromise(o, S, S.init);
+        if (hasInitialValue(w))
+          setAtomStateValueOrPromise(o, w, w.init);
         else
           throw new Error("no atom init");
       return returnAtomValue(j);
     }
-    const v = f(o, S);
+    const S = f(o, w);
     try {
-      return returnAtomValue(v);
+      return returnAtomValue(S);
     } finally {
-      b.d.set(S, v.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, v), (E = i.get(S)) == null || E.t.add(n), y || C();
+      b.d.set(w, S.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, S), (E = i.get(w)) == null || E.t.add(n), y || C();
     }
   }
-  let w, A;
+  let v, A;
   const B = {
     get signal() {
-      return w || (w = new AbortController()), w.signal;
+      return v || (v = new AbortController()), v.signal;
     },
     get setSelf() {
-      return !A && isActuallyWritableAtom(n) && (A = (...S) => {
+      return !A && isActuallyWritableAtom(n) && (A = (...w) => {
         if (!y)
           try {
-            return h(o, n, ...S);
+            return h(o, n, ...w);
           } finally {
             m(o), g(o);
           }
@@ -12049,10 +12157,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }
   }, _ = b.n;
   try {
-    const S = p(o, n, k, B);
-    return setAtomStateValueOrPromise(o, n, S), isPromiseLike$1(S) && (registerAbortHandler(S, () => w == null ? void 0 : w.abort()), S.then(C, C)), b;
-  } catch (S) {
-    return delete b.v, b.e = S, ++b.n, b;
+    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;
+  } 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));
   }
@@ -12070,13 +12178,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 w = d(o, y);
+    const v = d(o, y);
     try {
       if (isSelfAtom(n, y)) {
         if (!hasInitialValue(y))
           throw new Error("atom not writable");
-        const A = w.n, B = C[0];
-        setAtomStateValueOrPromise(o, y, B), f(o, y), A !== w.n && (i.add(y), (k = l.c) == null || k.call(l, y), m(o, y));
+        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));
         return;
       } else
         return writeAtomState(o, y, ...C);
@@ -12487,7 +12595,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, (w) => w[1].toUpperCase());
+              const k = y.replace(/-([a-z])/g, (v) => v[1].toUpperCase());
               x[k] = C.replace(/['"]/g, "");
             }
             return x;
@@ -12614,19 +12722,19 @@ ${i})
       u(!1);
       let k = l({ blockId: i == null ? void 0 : i._id, additionalCoreBlocks: ["Icon"] });
       k = k.replace(/\s*bid=["'][^"']*["']/g, "");
-      const w = o === "ts", {
+      const v = o === "ts", {
         jsx: A,
         html: B,
         componentName: _
       } = await getExportedCoded({
         selectedBlock: i,
         html: k,
-        isTypeScript: w
+        isTypeScript: v
       });
       a({ html: B, jsx: A }), d(_), u(!0);
     } catch {
-      const w = "<div>Export failed. Close the modal and try again.</div>";
-      a({ html: w, jsx: w }), toast.error(n("Failed to generate export HTML"));
+      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"));
     }
   }, [n, o, i, l]);
   useEffect(() => {
@@ -12642,17 +12750,17 @@ ${i})
     },
     [n]
   ), x = (k) => {
-    const w = new Blob([k], { type: "text/jsx" }), A = URL.createObjectURL(w), B = document.createElement("a");
+    const v = new Blob([k], { type: "text/jsx" }), A = URL.createObjectURL(v), 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() }, w = JSON.stringify(k, null, 2);
+    const k = { extend: shadcnTheme() }, v = JSON.stringify(k, null, 2);
     return `{
   // Your tailwind config ...
 
-  "theme": ${w == null ? void 0 : w.split(`
+  "theme": ${v == null ? void 0 : v.split(`
 `).join(`
   `)},
 }`;