@chaibuilder/sdk 3.1.30 → 3.1.32

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

@@ -1,6 +1,6 @@
 var Y = Object.defineProperty;
 var X = (o, n, r) => n in o ? Y(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var z = (o, n, r) => X(o, typeof n != "symbol" ? n + "" : n, r);
+var G = (o, n, r) => X(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { getRegisteredChaiBlock, getDefaultBlockProps, syncBlocksWithDefaults, useRegisteredFonts, useRegisteredChaiBlocks, getBlockFormSchemas } from "@chaibuilder/runtime";
 import { has, get, filter, findIndex, find, flatten, map, includes, without, compact, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, forEach, range, flattenDeep, set, unset, chunk, cloneDeep, isNull, kebabCase, throttle, some, uniq, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, sortBy, round, reverse, camelCase } from "lodash-es";
@@ -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";
@@ -95,7 +95,7 @@ import.meta.vitest && describe("canDropBlock Function", () => {
 });
 class PubSub {
   constructor() {
-    z(this, "subscribers", /* @__PURE__ */ new Map());
+    G(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(n, r) {
     return this.subscribers.has(n) || this.subscribers.set(n, /* @__PURE__ */ new Set()), this.subscribers.get(n).add(r), () => {
@@ -687,7 +687,7 @@ const useSelectedBlocksDisplayChild = () => ({
 ];
 class StructureRuleRegistry {
   constructor() {
-    z(this, "rules", [...CORE_STRUCTURE_RULES]);
+    G(this, "rules", [...CORE_STRUCTURE_RULES]);
   }
   addRule(n) {
     this.rules.push(n);
@@ -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, v = n.filter((E) => B ? E._parent === B : !E._parent).map((E) => E._id).indexOf(w);
-        return { _id: w, oldParent: B, oldPosition: v };
-      }), k = C.find(({ _id: w }) => w === x[0]);
+      const C = map(x, (v) => {
+        const B = n.find((j) => j._id === v)._parent || null, w = n.filter((j) => B ? j._parent === B : !j._parent).map((j) => j._id).indexOf(v);
+        return { _id: v, oldParent: B, oldPosition: w };
+      }), k = C.find(({ _id: v }) => v === x[0]);
       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((v) => {
-                for (const E in v)
-                  E !== "_id" && (v[E] = `${STYLES_KEY},${v[E]}`);
-                return v;
+              const _ = A.map((w) => {
+                for (const j in w)
+                  j !== "_id" && (w[j] = `${STYLES_KEY},${w[j]}`);
+                return w;
               });
               c(_);
             } else
               l(A);
-            b && b(w);
+            b && b(v);
           } catch (y) {
             a(y);
           } finally {
@@ -3527,29 +3527,29 @@ 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 v = getChildBlocks(o), E = v[v.length - 1];
-    if (E) {
-      const S = E.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, R = parseFloat(N.paddingRight) || 0, P = j.width - I - R, M = j.left + x + I;
+    const w = getChildBlocks(o), j = w[w.length - 1];
+    if (j) {
+      const S = j.getBoundingClientRect(), E = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = E.width - I - D, R = E.left + x + I;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
         rect: {
           top: S.bottom + h,
-          left: M,
+          left: R,
           width: P,
           height: 4
         },
-        targetElement: E,
-        targetBlockId: E.getAttribute("data-block-id"),
+        targetElement: j,
+        targetBlockId: j.getAttribute("data-block-id"),
         targetParentId: "canvas",
         isEmpty: !1,
         confidence: 1
@@ -3557,44 +3557,44 @@ function detectDropZone(o, n, r, a, i) {
     }
   }
   if (f && !m && hasChildBlocks(o)) {
-    const v = detectGapZone(o, n, r, g);
-    if (v) {
-      const E = v.before.getBoundingClientRect(), S = v.after.getBoundingClientRect(), j = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, R = parseFloat(N.paddingRight) || 0, P = getChildBlocks(o), M = getSiblingsInSameRow(P, v.before, g);
-      let H = 0;
-      if (M.forEach(($) => {
-        const L = $.getBoundingClientRect();
-        L.height > H && (H = L.height);
+    const w = detectGapZone(o, n, r, g);
+    if (w) {
+      const j = w.before.getBoundingClientRect(), S = w.after.getBoundingClientRect(), E = o.getBoundingClientRect(), N = window.getComputedStyle(o), I = parseFloat(N.paddingLeft) || 0, D = parseFloat(N.paddingRight) || 0, P = getChildBlocks(o), R = getSiblingsInSameRow(P, w.before, g);
+      let $ = 0;
+      if (R.forEach((F) => {
+        const O = F.getBoundingClientRect();
+        O.height > $ && ($ = O.height);
       }), g === "vertical") {
-        const $ = j.width - I - R, L = j.left + x + I;
+        const F = E.width - I - D, O = E.left + x + I;
         return {
           position: "after",
           placeholderOrientation: "horizontal",
           rect: {
-            top: E.bottom + h,
-            left: L,
-            width: $,
+            top: j.bottom + h,
+            left: O,
+            width: F,
             height: 4
           },
-          targetElement: v.before,
-          targetBlockId: v.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 $ = E.top + h, L = H > 0 ? H : Math.max(E.height, S.height);
+        const F = j.top + h, O = $ > 0 ? $ : Math.max(j.height, S.height);
         return {
           position: "after",
           placeholderOrientation: "vertical",
           rect: {
-            top: $,
-            left: E.right + x,
+            top: F,
+            left: j.right + x,
             width: 4,
-            height: L
+            height: O
           },
-          targetElement: v.before,
-          targetBlockId: v.before.getAttribute("data-block-id"),
+          targetElement: w.before,
+          targetBlockId: w.before.getAttribute("data-block-id"),
           targetParentId: l,
           isGapZone: !0,
           confidence: 1
@@ -3603,80 +3603,80 @@ function detectDropZone(o, n, r, a, i) {
     }
   }
   if (d && p) {
-    const v = detectParentEdgeProximity(d, n, r, u);
-    if (v) {
-      const E = d.getBoundingClientRect(), S = window.getComputedStyle(d), j = parseFloat(S.paddingLeft) || 0, N = parseFloat(S.paddingRight) || 0, I = parseFloat(S.paddingTop) || 0, R = parseFloat(S.paddingBottom) || 0, P = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, M = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, H = u === "vertical" ? "horizontal" : "vertical", $ = getMaxSiblingDimensions(d);
-      if (v === "start") {
-        const L = getChildBlocks(d)[0];
-        if (L) {
-          const D = L.getBoundingClientRect();
+    const w = detectParentEdgeProximity(d, n, r, u);
+    if (w) {
+      const j = d.getBoundingClientRect(), S = window.getComputedStyle(d), E = parseFloat(S.paddingLeft) || 0, N = parseFloat(S.paddingRight) || 0, I = parseFloat(S.paddingTop) || 0, D = parseFloat(S.paddingBottom) || 0, P = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, R = ((_ = i.defaultView) == null ? void 0 : _.scrollX) || 0, $ = u === "vertical" ? "horizontal" : "vertical", F = getMaxSiblingDimensions(d);
+      if (w === "start") {
+        const O = getChildBlocks(d)[0];
+        if (O) {
+          const L = O.getBoundingClientRect();
           if (u === "vertical") {
-            const T = E.width - j - N, O = E.left + M + j;
+            const T = j.width - E - N, M = j.left + R + E;
             return {
               position: "before",
-              placeholderOrientation: H,
+              placeholderOrientation: $,
               rect: {
-                top: D.top + P - 2,
-                left: O,
+                top: L.top + P - 2,
+                left: M,
                 width: T,
                 height: 4
               },
-              targetElement: L,
-              targetBlockId: L.getAttribute("data-block-id"),
+              targetElement: O,
+              targetBlockId: O.getAttribute("data-block-id"),
               targetParentId: p,
               confidence: 0.9
             };
           } else {
-            const T = E.top + P + I, O = $.maxHeight > 0 ? $.maxHeight : E.height - I - R;
+            const T = j.top + P + I, M = F.maxHeight > 0 ? F.maxHeight : j.height - I - D;
             return {
               position: "before",
-              placeholderOrientation: H,
+              placeholderOrientation: $,
               rect: {
                 top: T,
-                left: D.left + M - 2,
+                left: L.left + R - 2,
                 width: 4,
-                height: O
+                height: M
               },
-              targetElement: L,
-              targetBlockId: L.getAttribute("data-block-id"),
+              targetElement: O,
+              targetBlockId: O.getAttribute("data-block-id"),
               targetParentId: p,
               confidence: 0.9
             };
           }
         }
       } else {
-        const L = getChildBlocks(d), D = L[L.length - 1];
-        if (D) {
-          const T = D.getBoundingClientRect();
+        const O = getChildBlocks(d), L = O[O.length - 1];
+        if (L) {
+          const T = L.getBoundingClientRect();
           if (u === "vertical") {
-            const O = E.width - j - N, F = E.left + M + j;
+            const M = j.width - E - N, H = j.left + R + E;
             return {
               position: "after",
-              placeholderOrientation: H,
+              placeholderOrientation: $,
               rect: {
                 top: T.bottom + P - 2,
-                left: F,
-                width: O,
+                left: H,
+                width: M,
                 height: 4
               },
-              targetElement: D,
-              targetBlockId: D.getAttribute("data-block-id"),
+              targetElement: L,
+              targetBlockId: L.getAttribute("data-block-id"),
               targetParentId: p,
               confidence: 0.9
             };
           } else {
-            const O = E.top + P + I, F = $.maxHeight > 0 ? $.maxHeight : E.height - I - R;
+            const M = j.top + P + I, H = F.maxHeight > 0 ? F.maxHeight : j.height - I - D;
             return {
               position: "after",
-              placeholderOrientation: H,
+              placeholderOrientation: $,
               rect: {
-                top: O,
-                left: T.right + M - 2,
+                top: M,
+                left: T.right + R - 2,
                 width: 4,
-                height: F
+                height: H
               },
-              targetElement: D,
-              targetBlockId: D.getAttribute("data-block-id"),
+              targetElement: L,
+              targetBlockId: L.getAttribute("data-block-id"),
               targetParentId: p,
               confidence: 0.9
             };
@@ -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 v = o.getBoundingClientRect();
+    const w = o.getBoundingClientRect();
     u === "vertical" ? b = {
-      position: (r - v.top) / v.height < 0.5 ? "before" : "after",
+      position: (r - w.top) / w.height < 0.5 ? "before" : "after",
       confidence: b.confidence
     } : b = {
-      position: (n - v.left) / v.width < 0.5 ? "before" : "after",
+      position: (n - w.left) / w.width < 0.5 ? "before" : "after",
       confidence: b.confidence
     };
   }
@@ -3759,46 +3759,46 @@ function getSiblingsInSameRow(o, n, r) {
   });
 }
 function calculatePlaceholderRect(o, n, r, a, i) {
-  var I, R;
-  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((R = i.defaultView) == null ? void 0 : R.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 }, v = n ? getOrientation(n) : "vertical", E = n ? getChildBlocks(n) : [], S = getSiblingsInSameRow(E, o, v);
-  let j = 0, N = 0;
+  var I, D;
+  const l = o.getBoundingClientRect(), c = window.getComputedStyle(o), d = ((I = i.defaultView) == null ? void 0 : I.scrollY) || 0, p = ((D = i.defaultView) == null ? void 0 : D.scrollX) || 0, u = parseFloat(c.marginTop) || 0, g = parseFloat(c.marginBottom) || 0, m = parseFloat(c.marginLeft) || 0, f = parseFloat(c.marginRight) || 0, h = parseFloat(c.paddingTop) || 0, x = parseFloat(c.paddingBottom) || 0, b = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, C = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, v = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, A = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, _ = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", j = n ? getChildBlocks(n) : [], S = getSiblingsInSameRow(j, o, w);
+  let E = 0, N = 0;
   if (S.forEach((P) => {
-    const M = P.getBoundingClientRect();
-    M.height > j && (j = M.height), M.width > N && (N = M.width);
+    const R = P.getBoundingClientRect();
+    R.height > E && (E = R.height), R.width > N && (N = R.width);
   }), r === "before")
     if (a === "horizontal") {
-      const P = C ? C.width - k - w : l.width, M = 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: M,
+        left: R,
         width: P,
         height: 4
       };
     } else {
-      const P = l.top + d, M = v === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const P = l.top + d, R = w === "horizontal" && E > 0 ? E : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: P,
         left: l.left + p - m - 2,
         width: 4,
-        height: M
+        height: R
       };
     }
   else if (r === "after")
     if (a === "horizontal") {
-      const P = C ? C.width - k - w : l.width, M = 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: M,
+        left: R,
         width: P,
         height: 4
       };
     } else {
-      const P = l.top + d, M = v === "horizontal" && j > 0 ? j : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
+      const P = l.top + d, R = w === "horizontal" && E > 0 ? E : _.maxHeight > 0 ? _.maxHeight : C ? C.height - A - B : l.height;
       return {
         top: P,
         left: l.right + p + f - 2,
         width: 4,
-        height: M
+        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, v = () => {
+      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" ? -_ : _;
-          f.scrollBy(0, E);
-          const S = f.scrollY, j = S > 0, N = S + h < b, I = p.current, R = h - p.current;
-          w === "up" && j && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || w === "down" && N && R < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(v) : d.current = null;
+          const j = v === "up" ? -_ : _;
+          f.scrollBy(0, j);
+          const S = f.scrollY, E = S > 0, N = S + h < b, I = p.current, D = h - p.current;
+          v === "up" && E && I < AUTO_SCROLL_CONFIG.EDGE_ZONE || v === "down" && N && D < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
         };
-        d.current === null && (d.current = requestAnimationFrame(v));
+        d.current === null && (d.current = requestAnimationFrame(w));
       }
     },
     [c]
@@ -3913,30 +3913,30 @@ 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 v = LEAF_BLOCK_TYPES.includes(B);
+      const w = LEAF_BLOCK_TYPES.includes(B);
       if (A.position === "inside") {
-        if (v || y && !canDropWithoutCircularReference(y, x, l))
+        if (w || y && !canDropWithoutCircularReference(y, x, l))
           return;
         _ = canAcceptChildBlock(B, C);
       } else {
-        let S = h.parentElement, j = "Box";
+        let S = h.parentElement, E = "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))
+        if (S && (E = S.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, x, l))
           return;
-        _ = canAcceptChildBlock(j, C);
+        _ = canAcceptChildBlock(E, C);
       }
       if (!_)
         return;
       i(A.targetParentId);
-      const E = A.targetParentId || b;
+      const j = A.targetParentId || b;
       r({
         isVisible: !0,
         isValid: !0,
@@ -3948,7 +3948,7 @@ const LEAF_BLOCK_TYPES = [
         width: A.rect.width,
         height: A.rect.height,
         targetBlockId: A.targetBlockId,
-        targetParentId: E
+        targetParentId: j
       }), removeDropTargetAttributes$1(c), A.targetElement.setAttribute("data-drop-target", "true");
     }, 300),
     [c, o, r, a, i, l, u]
@@ -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: [
@@ -4613,17 +4613,17 @@ class Content extends Component {
 class Frame extends Component {
   constructor(r, a) {
     super(r, a);
-    z(this, "setRef", (r) => {
+    G(this, "setRef", (r) => {
       this.nodeRef.current = r;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(r) : a && (a.current = r);
     });
-    z(this, "handleLoad", () => {
+    G(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
     });
     // In certain situations on a cold cache DOMContentLoaded never gets called
     // fallback to an interval to check if that's the case
-    z(this, "loadCheck", () => setInterval(() => {
+    G(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -4660,7 +4660,7 @@ class Frame extends Component {
     return delete r.head, delete r.initialContent, delete r.mountTarget, delete r.contentDidMount, delete r.contentDidUpdate, delete r.forwardedRef, /* @__PURE__ */ jsx("iframe", { ...r, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
   }
 }
-z(Frame, "defaultProps", {
+G(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -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,37 +5529,37 @@ 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 v = o._type;
-      let E = o[r];
+      const w = o._type;
+      let j = o[r];
       const S = getRegisteredChaiBlock(o._type);
-      return h && ((N = S == null ? void 0 : S.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (E = get(o, `${r}-${h}`)), { blockContent: E, blockType: v };
-    }, [o, h]), w = useCallback(
-      (v) => {
+      return h && ((N = S == null ? void 0 : S.i18nProps) == null ? void 0 : N.includes(r)) && has(o, `${r}-${h}`) && (j = get(o, `${r}-${h}`)), { blockContent: j, blockType: w };
+    }, [o, h]), v = useCallback(
+      (w) => {
         var S;
-        const E = v || ((S = g.current) == null ? void 0 : S.innerText);
-        f([y], { [r]: E }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
+        const j = w || ((S = g.current) == null ? void 0 : S.innerText);
+        f([y], { [r]: j }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
       [y, f, c, x, h]
     ), A = useDebouncedCallback(
-      (v) => {
-        f([y], { [r]: v });
+      (w) => {
+        f([y], { [r]: w });
       },
       [y, o, f, h],
       1e3
     ), B = useCallback(
-      (v) => {
-        v.preventDefault(), y && (b.current = y), w(), setTimeout(() => {
-          const E = b.current;
-          b.current = null, x([E]);
+      (w) => {
+        w.preventDefault(), y && (b.current = y), v(), setTimeout(() => {
+          const j = b.current;
+          b.current = null, x([j]);
         }, 100);
       },
       [x, y, h]
     );
     useEffect(() => {
-      var j;
+      var E;
       if (!y) return;
-      const v = `[data-block-id="${y}"]`, E = l >= 0 ? `[data-block-index="${l}"]` : "", S = a.querySelector(`${v}${E}`);
-      S && ((j = S == null ? void 0 : S.classList) == null || j.add("sr-only"), u(S));
+      const w = `[data-block-id="${y}"]`, j = l >= 0 ? `[data-block-index="${l}"]` : "", S = a.querySelector(`${w}${j}`);
+      S && ((E = S == null ? void 0 : S.classList) == null || E.add("sr-only"), u(S));
     }, [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,22 +5627,22 @@ const RichTextEditor = memo(
   ), _ = useMemo(
     () => u(l._id, getBlockRuntimeProps(l._type)),
     [l._id, l._type, u, getBlockRuntimeProps]
-  ), v = useMemo(() => {
-    const R = {
+  ), w = useMemo(() => {
+    const D = {
       "data-block-id": l._id,
       "data-block-type": l._type,
       "data-block-index": h
     };
     return k && C ? {
-      ...R,
+      ...D,
       draggable: !0,
-      onMouseDown: w.onMouseDown,
-      onDragStart: w.onDragStart,
-      onDragEnd: w.onDragEnd
-    } : R;
-  }, [l._id, l._type, h, k, C, w]), E = useMemo(
+      onMouseDown: v.onMouseDown,
+      onDragStart: v.onDragStart,
+      onDragEnd: v.onDragEnd
+    } : D;
+  }, [l._id, l._type, h, k, C, v]), j = useMemo(
     () => ({
-      blockProps: v,
+      blockProps: w,
       inBuilder: b === "edit",
       lang: d || p,
       ...A,
@@ -5650,11 +5650,11 @@ const RichTextEditor = memo(
       ..._,
       ...o
     }),
-    [b, v, 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;
+    [b, w, d, p, A, B, _, o]
+  ), S = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), E = useMemo(() => get(l, "_show", !0), [l]);
+  if (isNull(f) || !E) return null;
   let N = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
-    ...E,
+    ...j,
     children: r({
       _id: l._id,
       _type: l._type,
@@ -5837,7 +5837,7 @@ const RichTextEditor = memo(
     /* @__PURE__ */ jsx("p", { className: "font-semibold", children: o("Oops! Something went wrong.") }),
     /* @__PURE__ */ jsx("p", { children: o("Please try again.") })
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-C9OjZ4pO.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-tNvYQ21U.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 v = {
+        const w = {
           ...A && { [_ ? "mobileWidth" : "width"]: A },
           ...B && { [_ ? "mobileHeight" : "height"]: B },
-          ...w.description && { alt: w.description }
+          ...v.description && { alt: v.description }
         };
-        if (set(v, g, w.id), isEmpty(v)) return;
-        d([c._id], v);
+        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] : "", v = k < C.length ? C[k] : "";
-        return k > 0 && (_ === "." || !h(_) && _ !== " ") && (A = " "), k < C.length && !h(v) && v !== " " && (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,28 +6178,28 @@ 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, v = _.selection.from, E = _.doc.textBetween(Math.max(0, v - 1), v), S = _.doc.textBetween(v, Math.min(v + 1, _.doc.content.size));
-            let j = "";
-            v > 0 && E !== " " && !h(E) && (j = " ");
+            const { state: _ } = C, w = _.selection.from, j = _.doc.textBetween(Math.max(0, w - 1), w), S = _.doc.textBetween(w, Math.min(w + 1, _.doc.content.size));
+            let E = "";
+            w > 0 && j !== " " && !h(j) && (E = " ");
             let N = "";
-            S && S !== " " && !h(S) && (N = " "), C.chain().insertContent(j + k + N).run();
+            S && S !== " " && !h(S) && (N = " "), C.chain().insertContent(E + 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 S = `{{${m}}}`, { text: j } = x(w, k, S), N = w.slice(0, k) + j + w.slice(A);
+          const S = `{{${m}}}`, { text: E } = x(v, k, S), N = v.slice(0, k) + E + v.slice(A);
           n(N, {}, r);
           return;
         }
-        const _ = `{{${m}}}`, { text: v } = x(w, k, _), E = w.slice(0, k) + v + w.slice(k);
-        n(E, {}, r);
+        const _ = `{{${m}}}`, { text: w } = x(v, k, _), j = v.slice(0, k) + w + v.slice(k);
+        n(j, {}, r);
       }
     },
     [r, n, a, d == null ? void 0 : d._id, p]
@@ -6220,38 +6220,38 @@ const DataBindingSelector = ({
   pageTypes: n,
   onChange: r
 }) => {
-  var E;
-  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (S, j) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (E = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : E.name;
+  var j;
+  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (S, E) => []), [l, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), C = useRef(null), k = (j = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : j.name;
   useEffect(() => {
     if (f(""), x([]), y(-1), p(!1), !o || l || !startsWith(o, "pageType:")) return;
-    const S = split(o, ":"), j = get(S, 1, "page") || "page";
-    g(j), (async () => {
-      const N = await i(j, [get(S, 2, "page")]);
+    const S = split(o, ":"), E = get(S, 1, "page") || "page";
+    g(E), (async () => {
+      const N = await i(E, [get(S, 2, "page")]);
       N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
-  const w = useDebouncedCallback(
+  const v = useDebouncedCallback(
     async (S) => {
       if (isEmpty(S))
         x([]);
       else {
-        const j = await i(u, S);
-        x(j);
+        const E = await i(u, S);
+        x(E);
       }
       c(!1), y(-1);
     },
     [u],
     300
   ), A = (S) => {
-    const j = ["pageType", u, S.id];
-    j[1] && (r(j.join(":")), f(S.name), p(!1), x([]), y(-1));
+    const E = ["pageType", u, S.id];
+    E[1] && (r(E.join(":")), f(S.name), p(!1), x([]), y(-1));
   }, B = (S) => {
     switch (S.key) {
       case "ArrowDown":
-        S.preventDefault(), y((j) => j < h.length - 1 ? j + 1 : j);
+        S.preventDefault(), y((E) => E < h.length - 1 ? E + 1 : E);
         break;
       case "ArrowUp":
-        S.preventDefault(), y((j) => j > 0 ? j - 1 : j);
+        S.preventDefault(), y((E) => E > 0 ? E - 1 : E);
         break;
       case "Enter":
         if (S.preventDefault(), h.length === 0) return;
@@ -6270,8 +6270,8 @@ const DataBindingSelector = ({
   }, [b]);
   const _ = () => {
     f(""), x([]), y(-1), p(!1), r("");
-  }, v = (S) => {
-    f(S), p(!isEmpty(S)), c(!0), w(S);
+  }, w = (S) => {
+    f(S), p(!isEmpty(S)), c(!0), v(S);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
@@ -6281,7 +6281,7 @@ const DataBindingSelector = ({
         {
           type: "text",
           value: m,
-          onChange: (S) => v(S.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,11 +6297,11 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (S, j) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(h == null ? void 0 : h.slice(0, 20), (S, E) => /* @__PURE__ */ jsxs(
       "li",
       {
         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"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : E === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           S.name,
           " ",
@@ -6406,7 +6406,7 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-BtmZDq6x.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: i, onBlur: l }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-vV5HE2hd.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,14 +6655,14 @@ 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;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: i });
-  const E = A == null ? void 0 : A.includes(n.replace("root.", ""));
+  const j = A == null ? void 0 : A.includes(n.replace("root.", ""));
   if (u.type === "array") {
     const N = B === n;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
@@ -6699,14 +6699,14 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const S = n.replace("root.", ""), j = A.includes(S) && !isEmpty(f) && isEmpty(g);
+  const S = n.replace("root.", ""), E = A.includes(S) && !isEmpty(f) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
     u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs("label", { htmlFor: n, className: u.type === "object" ? "pb-2" : "", children: [
           a,
           " ",
-          E && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          j && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
@@ -6718,7 +6718,7 @@ const DataBindingSelector = ({
         ] }) })
       ] }),
       !u.enum && !u.oneOf && C && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
-        j ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+        E ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -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 }, _, v) => {
-    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(B, _) }, v);
+  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 }, _, v) => {
-      h({ formData: B }, _, v), 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: v } = getBlockFormSchemas(B);
+      const { schema: _, uiSchema: w } = getBlockFormSchemas(B);
       if (B === "Repeater") {
-        const E = get(n, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(v, "filter", { "ui:widget": "collectionSelect" }), set(v, "sort", { "ui:widget": "collectionSelect" })) : (set(v, "filter", { "ui:widget": "hidden" }), set(v, "sort", { "ui:widget": "hidden" }));
+        const j = get(n, "repeaterItems", "");
+        startsWith(j, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: _, uiSchema: v };
+      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: v = {} } = getBlockFormSchemas(B);
-    return { wrapperSchema: _, wrapperUiSchema: v };
+    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,37 +7137,37 @@ 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: S, unit: j } = getClassValueAndUnit(l);
-    if (j === "") {
+    const { value: S, unit: E } = getClassValueAndUnit(l);
+    if (E === "") {
       i(S), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    f(j), i(j === "class" || isEmpty(S) ? "" : S);
+    f(E), i(E === "class" || isEmpty(S) ? "" : S);
   }, [l, p, u]);
-  const B = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), _ = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), v = useCallback(
+  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)) {
+      const E = getUserInputValues(`${a}`, u);
+      if (get(E, "error", !1)) {
         x(!0);
         return;
       }
-      const N = get(j, "unit") !== "" ? get(j, "unit") : m;
+      const N = get(E, "unit") !== "" ? get(E, "unit") : m;
       if (N === "auto" || N === "none") {
         B(`${d}${N}`);
         return;
       }
-      if (get(j, "value") === "")
+      if (get(E, "value") === "")
         return;
-      const R = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      S ? _(R) : B(R);
+      const D = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      S ? _(D) : B(D);
     },
     [B, _, a, m, d, u]
-  ), E = useCallback(
+  ), j = useCallback(
     (S) => {
-      const j = getUserInputValues(`${a}`, u);
-      if (get(j, "error", !1)) {
+      const E = getUserInputValues(`${a}`, u);
+      if (get(E, "error", !1)) {
         x(!0);
         return;
       }
@@ -7175,10 +7175,10 @@ const BlockStylingProps = () => {
         B(`${d}${S}`);
         return;
       }
-      if (get(j, "value") === "")
+      if (get(E, "value") === "")
         return;
-      const N = get(j, "unit") !== "" ? get(j, "unit") : S, R = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      B(R);
+      const N = get(E, "unit") !== "" ? get(E, "unit") : S, D = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      B(D);
     },
     [B, a, d, u]
   );
@@ -7202,28 +7202,28 @@ const BlockStylingProps = () => {
         {
           readOnly: m === "class",
           onKeyPress: (S) => {
-            S.key === "Enter" && v();
+            S.key === "Enter" && w();
           },
           onKeyDown: (S) => {
             if (S.keyCode !== 38 && S.keyCode !== 40)
               return;
             S.preventDefault(), A(!0);
-            const j = parseInt$1(S.target.value);
-            let N = isNaN$1(j) ? 0 : j;
+            const E = parseInt$1(S.target.value);
+            let N = isNaN$1(E) ? 0 : E;
             S.keyCode === 38 && (N += 1), S.keyCode === 40 && (N -= 1);
             const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
             _(P);
           },
           onKeyUp: (S) => {
-            w && (S.preventDefault(), A(!1));
+            v && (S.preventDefault(), A(!1));
           },
-          onBlur: () => v(),
+          onBlur: () => w(),
           onChange: (S) => {
             x(!1), i(S.target.value);
           },
           onClick: (S) => {
-            var j;
-            (j = S == null ? void 0 : S.target) == null || j.select(), r(!1);
+            var E;
+            (E = S == null ? void 0 : S.target) == null || E.select(), r(!1);
           },
           value: C ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
@@ -7251,7 +7251,7 @@ const BlockStylingProps = () => {
             units: u,
             current: m,
             onSelect: (S) => {
-              r(!1), f(S), E(S);
+              r(!1), f(S), j(S);
             }
           }
         ) })
@@ -7264,14 +7264,14 @@ const BlockStylingProps = () => {
         onDragEnd: (S) => {
           if (y(() => ""), k(!1), isEmpty(S))
             return;
-          const j = `${S}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
+          const E = `${S}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
           B(I);
         },
         onDrag: (S) => {
           if (isEmpty(S))
             return;
           y(S);
-          const j = `${S}`, I = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
+          const E = `${S}`, I = `${E.startsWith("-") ? "-" : ""}${d}[${E.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(
-    (_, v = !0) => {
-      const E = { dark: p, mq: g, mod: u, cls: _, property: i, fullCls: "" };
-      (p || u !== "") && (E.mq = "xs");
-      const S = generateFullClsName(E);
-      f(x, [S], v);
+    (_, w = !0) => {
+      const j = { dark: p, mq: g, mod: u, cls: _, property: i, fullCls: "" };
+      (p || u !== "") && (j.mq = "xs");
+      const S = generateFullClsName(j);
+      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
@@ -8076,98 +8076,102 @@ function BreakpointSelector() {
     ] }) }) })
   ] });
 }
+const DesignTokensIcon = ({ className: o = "" }) => /* @__PURE__ */ jsx(FontStyleIcon, { className: o });
 function ManualClasses() {
-  var $;
-  const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), l = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), [f, h] = useState(""), x = useAtomValue$1(chaiDesignTokensAtom), b = ($ = first(d)) == null ? void 0 : $.prop, { classes: y } = getSplitChaiClasses(get(p, b, "")), C = y.split(" ").filter((L) => !isEmpty(L)), k = useMemo(() => [...C].sort((L, D) => {
-    const T = L.startsWith("dt-"), O = D.startsWith("dt-");
-    return T && !O ? -1 : !T && O ? 1 : 0;
-  }), [C]), w = useBuilderProp("flags.copyPaste", !0), A = (L) => {
+  var O;
+  const o = useRef(null), [n, r] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [p] = useSelectedStylingBlocks(), u = useSelectedBlock(), g = useAddClassesToBlocks(), m = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), [h, x] = useState(""), b = useAtomValue$1(chaiDesignTokensAtom), y = (O = first(p)) == null ? void 0 : O.prop, { classes: C } = getSplitChaiClasses(get(u, y, "")), k = C.split(" ").filter((L) => !isEmpty(L)), v = useMemo(() => [...k].sort((L, T) => {
+    const M = L.startsWith("dt-"), H = T.startsWith("dt-");
+    return M && !H ? -1 : !M && H ? 1 : 0;
+  }), [k]), A = useBuilderProp("flags.copyPaste", !0), B = (L) => {
     if (L.startsWith("dt-")) {
-      const D = L.substring(3), T = x[D];
-      return T ? T.name : L;
+      const T = L.substring(3), M = b[T];
+      return M ? M.name : L;
     }
     return L;
-  }, B = (L) => {
-    const D = Object.entries(x).find(([T, O]) => O.name === L);
-    return D ? `dt-${D[0]}` : L;
-  }, _ = () => {
-    const L = f.trim().replace(/ +(?= )/g, "").split(" ").map(B);
-    u(m, L, !0), h("");
-  }, [v, E] = useState([]), S = useBuilderProp("flags.designTokens", !1), j = ({ value: L }) => {
-    const D = L.trim().toLowerCase(), T = D.match(/.+:/g);
-    let O = [], F = [];
-    if (S && (D === "" ? F = Object.entries(x).map(([U, V]) => ({
-      name: V.name,
-      id: `dt-${U}`,
+  }, _ = (L) => {
+    const T = Object.entries(b).find(([M, H]) => H.name === L);
+    return T ? `dt-${T[0]}` : L;
+  }, w = () => {
+    const L = h.trim().replace(/ +(?= )/g, "").split(" ").map(_);
+    g(f, L, !0), x("");
+  }, [j, S] = useState([]), E = useBuilderProp("flags.designTokens", !1), N = ({ value: L }) => {
+    const T = L.trim().toLowerCase(), M = T.match(/.+:/g);
+    let H = [], W = [];
+    if (E && (T === "" ? W = Object.entries(b).map(([V, U]) => ({
+      name: U.name,
+      id: `dt-${V}`,
       isDesignToken: !0
-    })) : F = Object.entries(x).filter(([U, V]) => V.name.toLowerCase().includes(D)).map(([U, V]) => ({
-      name: V.name,
-      id: `dt-${U}`,
+    })) : W = Object.entries(b).filter(([V, U]) => U.name.toLowerCase().includes(T)).map(([V, U]) => ({
+      name: U.name,
+      id: `dt-${V}`,
       isDesignToken: !0
-    }))), T && T.length > 0) {
-      const [U] = T, V = D.replace(U, "");
-      O = l.search(V).map((K) => ({
+    }))), M && M.length > 0) {
+      const [V] = M, U = T.replace(V, "");
+      H = c.search(U).map((K) => ({
         ...K,
-        item: { ...K.item, name: U + K.item.name }
+        item: { ...K.item, name: V + K.item.name }
       }));
     } else
-      O = l.search(D);
-    const W = [...F, ...map(O, "item")];
-    return E(W);
-  }, N = () => {
-    E([]);
-  }, I = (L) => L.name, R = (L) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
-    L.isDesignToken && /* @__PURE__ */ jsx("span", { className: "rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-800 dark:bg-blue-900", children: "DT" }),
+      H = c.search(T);
+    const z = [...W, ...map(H, "item")];
+    return S(z);
+  }, I = () => {
+    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",
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: !1,
-      placeholder: c("Enter classes separated by space"),
-      value: f,
+      placeholder: d("Enter classes separated by space"),
+      value: h,
       onFocus: (L) => {
         setTimeout(() => {
           L.target && L.target.select();
         }, 0);
       },
       onKeyDown: (L) => {
-        L.key === "Enter" && f.trim() !== "" && _();
+        L.key === "Enter" && h.trim() !== "" && w();
       },
-      onChange: (L, { newValue: D }) => h(D),
+      onChange: (L, { newValue: T }) => x(T),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [f, c, o]
-  ), M = (L) => {
-    const D = n.trim().replace(/ +(?= )/g, "").split(" ").map(B);
-    g(m, [L]), u(m, D, !0), r(""), i(-1);
-  }, H = () => {
+    [h, d, o]
+  ), $ = (L) => {
+    const T = n.trim().replace(/ +(?= )/g, "").split(" ").map(_);
+    m(f, [L]), g(f, T, !0), r(""), i(-1);
+  }, F = () => {
     if (navigator.clipboard === void 0) {
-      toast.error(c("Clipboard not supported"));
+      toast.error(d("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(C.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(k.join(" ")), toast.success(d("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-x-2 text-muted-foreground", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1", children: [
-      /* @__PURE__ */ jsx("span", { children: c("Classes") }),
-      w && /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: H, className: "cursor-pointer" }) }),
-        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
-      ] })
-    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-2 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1", children: [
+        /* @__PURE__ */ jsx("span", { children: d(E ? "Styles" : "Classes") }),
+        A && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: F, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: d("Copy classes to clipboard") }) })
+        ] })
+      ] }),
+      E && /* @__PURE__ */ jsx(Button, { variant: "link", className: "underline", onClick: () => l("design-tokens"), children: d("Design Tokens") })
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-x-3", children: [
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: v,
-          onSuggestionsFetchRequested: j,
-          onSuggestionsClearRequested: N,
-          getSuggestionValue: I,
-          renderSuggestion: R,
-          inputProps: P,
+          suggestions: j,
+          onSuggestionsFetchRequested: N,
+          onSuggestionsClearRequested: I,
+          getSuggestionValue: D,
+          renderSuggestion: P,
+          inputProps: R,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -8183,29 +8187,29 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: _,
-          disabled: f.trim() === "",
+          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: k.map(
-      (L, D) => a === D ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
+      (L, T) => a === T ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: n,
-          onChange: (T) => r(T.target.value),
+          onChange: (M) => r(M.target.value),
           onBlur: () => {
-            M(L);
+            $(L);
           },
-          onKeyDown: (T) => {
-            T.key === "Enter" && M(L);
+          onKeyDown: (M) => {
+            M.key === "Enter" && $(L);
           },
-          onFocus: (T) => {
+          onFocus: (M) => {
             setTimeout(() => {
-              T.target.select();
+              M.target.select();
             }, 0);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
@@ -8215,7 +8219,7 @@ function ManualClasses() {
         "button",
         {
           onDoubleClick: () => {
-            h(A(L)), g(m, [L]), setTimeout(() => {
+            x(B(L)), m(f, [L]), setTimeout(() => {
               o.current && o.current.focus();
             }, 10);
           },
@@ -8225,11 +8229,11 @@ function ManualClasses() {
               /* @__PURE__ */ jsx(
                 Cross2Icon,
                 {
-                  onClick: () => g(m, [L], !0),
+                  onClick: () => m(f, [L], !0),
                   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(FontStyleIcon, { className: "text-[rgba(55, 65, 81, 0.4)] h-3.5 w-3.5 group-hover:hidden" }) : /* @__PURE__ */ jsxs(
+              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(
                 "svg",
                 {
                   className: "h-3.5 w-3.5 group-hover:hidden",
@@ -8252,7 +8256,7 @@ function ManualClasses() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { children: A(L) })
+            /* @__PURE__ */ jsx("div", { children: B(L) })
           ]
         }
       ) }, L)
@@ -8586,7 +8590,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",
@@ -8594,16 +8598,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(() => {
@@ -8723,17 +8727,17 @@ 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 v = (N) => {
+  const w = (N) => {
     A.current && (clearTimeout(A.current), A.current = null), A.current = setTimeout(() => {
       A.current && k(N);
     }, 400);
-  }, E = () => {
+  }, j = () => {
     c != null && c.id && u(c.id);
   };
   if (p)
@@ -8741,7 +8745,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const S = filter(w, (N, I) => I % 2 === 0), j = filter(w, (N, I) => I % 2 === 1);
+  const S = filter(v, (N, I) => I % 2 === 0), E = 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: [
@@ -8760,7 +8764,7 @@ const BlockCard = ({
                   className: `no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto ${r ? "" : "pb-20"}`,
                   children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: g ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("Failed to load the UI library. Try again") }),
-                    /* @__PURE__ */ jsxs(Button, { onClick: E, variant: "outline", size: "sm", className: "gap-2", children: [
+                    /* @__PURE__ */ jsxs(Button, { onClick: j, variant: "outline", size: "sm", className: "gap-2", children: [
                       /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
                       B("Retry")
                     ] })
@@ -8770,7 +8774,7 @@ const BlockCard = ({
                   ] }) : map(y, (N, I) => /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      onMouseEnter: () => v(I),
+                      onMouseEnter: () => w(I),
                       onMouseLeave: () => clearTimeout(A.current),
                       role: "button",
                       onClick: () => k(I),
@@ -8798,7 +8802,7 @@ 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: [
+            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,
                 {
@@ -8809,7 +8813,7 @@ const BlockCard = ({
                 },
                 `block-${I}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: j.map((N, I) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((N, I) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -8859,14 +8863,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,
@@ -8933,8 +8937,8 @@ const BlockCard = ({
   const { t: c } = useTranslation(), [d] = useBlocksStore(), [p, u] = useState(""), g = useRef(null), [m] = useAtom$1(addBlockTabAtom), f = (N = find(d, (I) => I._id === r)) == null ? void 0 : N._type, [h, x] = useState("all"), [b, y] = useState(null), C = useRef(null), k = useBuilderProp("flags.dragAndDrop", !1);
   useEffect(() => {
     const I = setTimeout(() => {
-      var R;
-      (R = g.current) == null || R.focus();
+      var D;
+      (D = g.current) == null || D.focus();
     }, 0);
     return () => clearTimeout(I);
   }, [m]), useEffect(() => {
@@ -8944,7 +8948,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();
@@ -8953,40 +8957,40 @@ const BlockCard = ({
   }, []), _ = useMemo(
     () => p ? values(n).filter(
       (I) => {
-        var R, P;
-        return (((R = I.label) == null ? void 0 : R.toLowerCase()) + " " + ((P = I.type) == null ? void 0 : P.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]
-  ), v = 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(v, (I) => CORE_GROUPS.indexOf(I) === -1 ? 99 : CORE_GROUPS.indexOf(I)),
-    [v]
-  ), S = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), j = useMemo(() => h === "all" ? E : [h], [E, h]);
+  ), j = useMemo(
+    () => sortBy(w, (I) => CORE_GROUPS.indexOf(I) === -1 ? 99 : CORE_GROUPS.indexOf(I)),
+    [w]
+  ), S = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? j : [h], [j, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: p, setValue: u }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden pt-2", children: [
-      !l && E.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      !l && j.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx(
           "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")
           },
           "sidebar-all"
         ),
-        E.map((I) => /* @__PURE__ */ jsx(
+        j.map((I) => /* @__PURE__ */ jsx(
           "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()))
@@ -8997,26 +9001,26 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(
         "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: v.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: [
+          className: `h-full flex-1 overflow-hidden ${!l && j.length > 0 ? "w-3/4" : "w-full"}`,
+          children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: w.length === 0 && p ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
             c("No blocks found matching"),
             ' "',
             p,
             '"'
-          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: j.map((I) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: E.map((I) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(I.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + i, children: reject(
               h === "all" ? filter(values(S), { group: I }) : values(S),
               { hidden: !0 }
-            ).map((R) => /* @__PURE__ */ jsx(
+            ).map((D) => /* @__PURE__ */ jsx(
               CoreBlock,
               {
                 parentId: r,
                 position: a,
-                block: R,
-                disabled: !k && (!canAcceptChildBlock(f, R.type) || !canBeNestedInside(f, R.type))
+                block: D,
+                disabled: !k && (!canAcceptChildBlock(f, D.type) || !canBeNestedInside(f, D.type))
               },
-              R.type
+              D.type
             )) })
           ] }, I)) }) })
         }
@@ -9490,21 +9494,21 @@ const useStructureValidation = () => {
   var n;
   return o != null && o._name ? o._name : (o == null ? void 0 : o._type) === "Box" && (o != null && o.tag) && (o == null ? void 0 : o.tag) !== "div" ? startCase(o.tag) : ((n = o == null ? void 0 : o._type) == null ? void 0 : n.split("/").pop()) || "";
 }, truncateText = (o, n) => o.length > n ? o.substring(0, n) + "..." : o, Node$1 = memo(({ node: o, style: n, dragHandle: r }) => {
-  var D;
+  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();
-  }, v = (T) => {
+  }, w = (T) => {
     T.isInternal && (d = T.isOpen, T.isOpen && T.close());
-  }, E = (T) => {
+  }, j = (T) => {
     T.isInternal && d !== null && (d ? T.open() : T.close(), d = null);
-  }, [S, j] = useAtom$1(currentAddSelection), N = () => {
+  }, [S, E] = useAtom$1(currentAddSelection), N = () => {
     var T;
-    I(), o.parent.isSelected || j((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+    I(), o.parent.isSelected || E((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
   }, I = () => {
-    j(null);
-  }, R = (T) => {
+    E(null);
+  }, D = (T) => {
     I(), T.stopPropagation(), !o.isOpen && B && o.toggle(), k(T);
   };
   useEffect(() => {
@@ -9513,15 +9517,15 @@ const useStructureValidation = () => {
     }, 500);
     return () => clearTimeout(T);
   }, [b, o, y]);
-  const P = (T, O) => {
-    const F = l.contentDocument || l.contentWindow.document, W = F.querySelector(`[data-block-id=${T}]`);
-    W && W.setAttribute("data-drop", O);
-    const U = W.getBoundingClientRect(), V = l.getBoundingClientRect();
-    U.top >= V.top && U.left >= V.left && U.bottom <= V.bottom && U.right <= V.right || (F.documentElement.scrollTop = W.offsetTop - V.top);
-  }, M = (T) => {
+  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);
+  }, R = (T) => {
     I();
-    const O = get(o, "parent.id");
-    O !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: O, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
+    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 });
   };
   if (f === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 w-full cursor-pointer", children: [
@@ -9530,7 +9534,7 @@ const useStructureValidation = () => {
         "div",
         {
           role: "button",
-          onClick: () => M(-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" }),
@@ -9541,18 +9545,18 @@ const useStructureValidation = () => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const { librarySite: H } = useBuilderProp("flags", { librarySite: !1 }), $ = useMemo(() => H && has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, c, H]), L = useMemo(() => (h == null ? void 0 : h._type) === "PartialBlock" || (h == null ? void 0 : h._type) === "GlobalBlock", [h]);
+  const { librarySite: $ } = useBuilderProp("flags", { librarySite: !1 }), F = useMemo(() => $ && has(h, "_libBlockId") && !isEmpty(h._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [h, c, $]), O = useMemo(() => (h == null ? void 0 : h._type) === "PartialBlock" || (h == null ? void 0 : h._type) === "GlobalBlock", [h]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseEnter: () => u(f),
       onMouseLeave: () => g(),
-      onClick: R,
+      onClick: D,
       style: n,
       "data-node-id": f,
       ref: r,
-      onDragStart: () => v(o),
-      onDragEnd: () => E(o),
+      onDragStart: () => w(o),
+      onDragEnd: () => j(o),
       onDragOver: (T) => {
         T.preventDefault(), P(f, "yes");
       },
@@ -9563,11 +9567,11 @@ const useStructureValidation = () => {
         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")) || ((D = o == null ? void 0 : o.parent) == null ? void 0 : D.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        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(), M(o.childIndex);
+              T.stopPropagation(), R(o.childIndex);
             },
             onMouseEnter: N,
             onMouseLeave: I,
@@ -9585,7 +9589,7 @@ const useStructureValidation = () => {
               (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
               y && "opacity-20",
               B ? "" : "line-through opacity-50",
-              $ && x && "bg-primary/20 text-primary"
+              F && x && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -9601,10 +9605,10 @@ const useStructureValidation = () => {
                   {
                     className: cn(
                       "leading-1 flex items-center",
-                      $ && "text-orange-600/90",
-                      $ && x && "text-orange-800",
-                      L && "text-purple-600/90",
-                      L && x && "text-purple-800"
+                      F && "text-orange-600/90",
+                      F && x && "text-orange-800",
+                      O && "text-purple-600/90",
+                      O && x && "text-purple-800"
                     ),
                     children: [
                       A.length > 0 ? /* @__PURE__ */ jsx("div", { className: "text-red-500", children: /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-3 w-3" }) }) : /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
@@ -10093,17 +10097,13 @@ const useStructureValidation = () => {
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, i] = React.useState(""), [l, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0), f = useIncrementActionsCount();
-  if (d) {
-    const E = d.map((S) => Object.keys(S)[0]);
-    DEFAULT_THEME_PRESET.forEach((S) => {
-      const j = Object.keys(S)[0];
-      E.includes(j) || d.push(S);
-    });
-  }
+  (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((j) => {
+    d.push(j);
+  });
   const [h, x] = useTheme(), b = useThemeOptions(), { t: y } = useTranslation(), C = React.useCallback(
-    (E) => {
+    (j) => {
       const S = { ...h };
-      setPreviousTheme(S), x(E), f(), toast.success("Theme updated", {
+      setPreviousTheme(S), x(j), f(), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
@@ -10119,56 +10119,56 @@ const useStructureValidation = () => {
     },
     [h, x, f]
   ), k = () => {
-    const E = d.find((S) => Object.keys(S)[0] === a);
-    if (E) {
-      const S = Object.values(E)[0];
+    const j = d.find((S) => Object.keys(S)[0] === a);
+    if (j) {
+      const S = Object.values(j)[0];
       S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? (C(S), i(""), f()) : console.error("Invalid preset structure:", S);
     } else
       console.error("Preset not found:", a);
-  }, w = (E) => {
-    C(E), i(""), f();
+  }, v = (j) => {
+    C(j), i(""), f();
   }, A = useDebouncedCallback(
-    (E, S) => {
+    (j, S) => {
       x(() => ({
         ...h,
         fontFamily: {
           ...h.fontFamily,
-          [E.replace(/font-/g, "")]: S
+          [j.replace(/font-/g, "")]: S
         }
       })), f();
     },
     [h, f],
     200
   ), B = React.useCallback(
-    (E) => {
+    (j) => {
       x(() => ({
         ...h,
-        borderRadius: `${E}px`
+        borderRadius: `${j}px`
       })), f();
     },
     [h, f]
   ), _ = useDebouncedCallback(
-    (E, S) => {
+    (j, S) => {
       x(() => {
-        const j = get(h, `colors.${E}`);
-        return n ? set(j, 1, S) : set(j, 0, S), f(), {
+        const E = get(h, `colors.${j}`);
+        return n ? set(E, 1, S) : set(E, 0, S), f(), {
           ...h,
           colors: {
             ...h.colors,
-            [E]: j
+            [j]: E
           }
         };
       });
     },
     [h, f],
     200
-  ), v = (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: [
+  ), w = (j) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(j.items).map(([S]) => {
+    const E = get(h, `colors.${S}.${n ? 1 : 0}`);
+    return E ? /* @__PURE__ */ jsxs("div", { id: `theme-${S}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: j,
+          value: E,
           onChange: (N) => _(S, N)
         }
       ),
@@ -10188,9 +10188,9 @@ const useStructureValidation = () => {
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: i, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: y("Select preset") }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((E) => {
-              const S = Object.keys(E)[0], j = S.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(j) }, S);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((j) => {
+              const S = Object.keys(j)[0], E = S.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: S, children: capitalize(E) }, S);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: y("Apply") }) })
@@ -10202,14 +10202,14 @@ const useStructureValidation = () => {
           /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 text-gray-600" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: y("Typography") })
         ] }),
-        (b == null ? void 0 : b.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(b.fontFamily).map(([E, S]) => /* @__PURE__ */ jsx(
+        (b == null ? void 0 : b.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(b.fontFamily).map(([j, S]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: E,
-            value: h.fontFamily[E.replace(/font-/g, "")] || S[Object.keys(S)[0]],
-            onChange: (j) => A(E, j)
+            label: j,
+            value: h.fontFamily[j.replace(/font-/g, "")] || S[Object.keys(S)[0]],
+            onChange: (E) => A(j, E)
           },
-          E
+          j
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (b == null ? void 0 : b.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -10235,7 +10235,7 @@ const useStructureValidation = () => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (E) => r(E),
+                  onCheckedChange: (j) => r(j),
                   "aria-label": y("Toggle dark mode"),
                   className: "mx-1"
                 }
@@ -10243,14 +10243,14 @@ const useStructureValidation = () => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: b.colors.map((E) => v(E)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: b.colors.map((j) => w(j)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: y("Loading...") }), children: l && g && /* @__PURE__ */ jsx(
           LazyCssImportModal,
           {
             open: l,
             onOpenChange: c,
-            onImport: w
+            onImport: v
           }
         ) })
       ] }),
@@ -10999,52 +10999,52 @@ const UndoRedo = () => {
       return;
     }
     if (l) {
-      const v = [...a, { key: l, value: d }];
-      r(v), i(a), c(""), p(""), f("");
+      const w = [...a, { key: l, value: d }];
+      r(w), i(a), c(""), p(""), f("");
     }
-  }, k = (v) => {
-    const E = a.filter((S, j) => j !== v);
-    r(E), i(E);
-  }, w = (v) => {
-    g(v), c(a[v].key), p(a[v].value);
+  }, k = (w) => {
+    const j = a.filter((S, E) => E !== w);
+    r(j), i(j);
+  }, 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 v = [...a];
-      v[u] = { key: l, value: d }, r(v), i(v), g(null), c(""), p(""), f("");
+      const w = [...a];
+      w[u] = { key: l, value: d }, r(w), i(w), g(null), c(""), p(""), f("");
     }
-  }, B = (v) => {
-    v.key === "Enter" && !v.shiftKey && (v.preventDefault(), u !== null ? A() : C());
-  }, _ = useCallback((v) => {
-    const E = (N) => /[.,!?;:]/.test(N), S = (N, I, R) => {
-      let P = "", M = "";
-      const H = I > 0 ? N[I - 1] : "", $ = I < N.length ? N[I] : "";
-      return I > 0 && (H === "." || !E(H) && H !== " ") && (P = " "), I < N.length && !E($) && $ !== " " && (M = " "), {
-        text: P + R + M,
+  }, B = (w) => {
+    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), u !== null ? A() : C());
+  }, _ = useCallback((w) => {
+    const j = (N) => /[.,!?;:]/.test(N), S = (N, I, D) => {
+      let P = "", R = "";
+      const $ = I > 0 ? N[I - 1] : "", F = I < N.length ? N[I] : "";
+      return I > 0 && ($ === "." || !j($) && $ !== " ") && (P = " "), I < N.length && !j(F) && F !== " " && (R = " "), {
+        text: P + D + R,
         prefixLength: P.length,
-        suffixLength: M.length
+        suffixLength: R.length
       };
-    }, j = x.current;
-    if (j) {
-      const N = j.selectionStart || 0, I = j.value || "", R = j.selectionEnd || N;
-      if (R > N) {
-        const L = `{{${v}}}`, { text: D } = S(I, N, L), T = I.slice(0, N) + D + I.slice(R);
+    }, E = x.current;
+    if (E) {
+      const N = E.selectionStart || 0, I = E.value || "", D = E.selectionEnd || N;
+      if (D > N) {
+        const O = `{{${w}}}`, { text: L } = S(I, N, O), T = I.slice(0, N) + L + I.slice(D);
         p(T);
         return;
       }
-      const M = `{{${v}}}`, { text: H } = S(I, N, M), $ = I.slice(0, N) + H + I.slice(N);
-      p($);
+      const R = `{{${w}}}`, { text: $ } = S(I, N, R), F = I.slice(0, N) + $ + I.slice(N);
+      p(F);
     }
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (v) => {
-          v.preventDefault(), u !== null ? A() : C();
+        onSubmit: (w) => {
+          w.preventDefault(), u !== null ? A() : C();
         },
         className: "space-y-3",
         children: [
@@ -11060,7 +11060,7 @@ const UndoRedo = () => {
                   id: "attrKey",
                   ref: h,
                   value: l,
-                  onChange: (v) => c(v.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"
                 }
@@ -11080,7 +11080,7 @@ const UndoRedo = () => {
                   id: "attrValue",
                   ref: x,
                   value: d,
-                  onChange: (v) => p(v.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"
@@ -11093,16 +11093,16 @@ const UndoRedo = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((v, 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, j) => /* @__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: v.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: v.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: () => k(E), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(j), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(j), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
-    ] }, E)) })
+    ] }, j)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), i = useUpdateBlocksProps(), l = `${get(a, "0.prop")}_attrs`;
@@ -11242,47 +11242,153 @@ 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(""), v = useIncrementActionsCount(), E = (D) => {
-    const T = D.trim();
+}, 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 = `dt-${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(() => 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(), j = (L) => {
+    const T = L.trim();
     return T.length === 0 || T.length > 25 ? !1 : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(T);
-  }, S = (D, T = !1, O) => {
-    const F = D.trim();
-    return F.length === 0 ? "" : F.length > 25 ? o("Token name must be 25 characters or less") : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(F) ? Object.entries(n).find(
-      ([V, G]) => G.name === F && (!T || V !== O)
+  }, 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)
     ) ? o("Token name already exists") : "" : o("Only alphanumeric characters and hyphens allowed");
-  }, j = () => {
+  }, E = () => {
     if (!m.trim() || !h.trim()) {
       toast.error(o("Please fill in both token name and classes"));
       return;
     }
-    if (!E(m)) {
+    if (!j(m)) {
       toast.error(o("Invalid design token name format"));
       return;
     }
-    if (Object.values(n).find((F) => F.name === m.trim())) {
+    if (Object.values(n).find((H) => H.name === m.trim())) {
       toast.error(o("Token already exists"));
       return;
     }
-    const T = `token_${nanoid(12)}`, O = {
+    const T = `token_${nanoid(12)}`, M = {
       ...n,
       [T]: {
         name: m.trim(),
         value: h.trim()
       }
     };
-    r(O), f(""), x(""), i(!1), p(!1), v(), 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"));
       return;
     }
-    if (!E(b)) {
+    if (!j(b)) {
       toast.error(o("Invalid design token name format"));
       return;
     }
     if (Object.entries(n).find(
-      ([O, F]) => F.name === b.trim() && O !== l
+      ([M, H]) => H.name === b.trim() && M !== l
     )) {
       toast.error(o("Token already exists"));
       return;
@@ -11296,27 +11402,27 @@ const PartialWrapper = ({ partialBlockId: o }) => {
         value: C.trim()
       }
     };
-    r(T), c(null), y(""), k(""), g(!1), v(), toast.success(o("Token updated successfully"));
-  }, I = (D) => {
+    r(T), c(null), y(""), k(""), g(!1), w(), toast.success(o("Token updated successfully"));
+  }, I = (L) => {
     const T = { ...n };
-    delete T[D], r(T), v(), toast.success(o("Token deleted successfully"));
-  }, R = (D) => {
-    const T = n[D];
-    T && (c(D), y(T.name), k(T.value), i(!1), g(!0));
+    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));
   }, P = () => {
     i(!0), c(null), f(""), x(""), A(""), p(!0);
-  }, M = () => {
+  }, R = () => {
     c(null), y(""), k(""), _(""), g(!1);
-  }, H = () => {
+  }, $ = () => {
     i(!1), f(""), x(""), A(""), p(!1);
-  }, $ = (D) => {
-    const T = D.replace(/\s+/g, "-");
+  }, F = (L) => {
+    const T = L.replace(/\s+/g, "-");
     f(T), A(S(T));
-  }, L = (D) => {
-    const T = D.replace(/\s+/g, "-");
+  }, O = (L) => {
+    const T = L.replace(/\s+/g, "-");
     y(T), _(S(T, !0, l || void 0));
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full max-w-[300px] flex-col", children: [
+  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,
       {
@@ -11334,19 +11440,20 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     /* @__PURE__ */ jsx("div", { className: "no-scrollbar flex flex-1 flex-col overflow-hidden pt-2", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full flex-1", children: /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(n).length === 0 ? /* @__PURE__ */ jsxs("div", { className: "py-6 text-center text-muted-foreground", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-1 text-2xl", children: "🎨" }),
       /* @__PURE__ */ jsx("p", { className: "text-xs", children: o("No design tokens defined") })
-    ] }) : Object.entries(n).map(([D, T]) => /* @__PURE__ */ jsxs(
+    ] }) : Object.entries(n).map(([L, T]) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `group flex items-center justify-between hover:bg-muted/90 ${l === D ? "bg-primary/10" : ""}`,
+        className: `group flex items-center justify-between hover:bg-muted/90 ${l === L ? "bg-primary/10" : ""}`,
         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,
               {
                 variant: "ghost",
                 size: "sm",
-                onClick: () => R(D),
+                onClick: () => D(L),
                 disabled: a || l !== null,
                 className: "h-6 w-6 p-0",
                 children: /* @__PURE__ */ jsx(Pencil1Icon, { className: "h-3 w-3" })
@@ -11377,7 +11484,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
                   /* @__PURE__ */ jsx(
                     AlertDialogAction,
                     {
-                      onClick: () => I(D),
+                      onClick: () => I(L),
                       className: "h-7 bg-destructive text-xs text-destructive-foreground hover:bg-destructive/90",
                       children: o("Delete")
                     }
@@ -11388,9 +11495,9 @@ const PartialWrapper = ({ partialBlockId: o }) => {
           ] })
         ]
       },
-      D
+      L
     )) }) }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: d, onOpenChange: p, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: d, onOpenChange: $, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: o("Add Design Token") }),
         /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm", children: o("Create a new reusable design token with Tailwind classes.") })
@@ -11404,11 +11511,11 @@ const PartialWrapper = ({ partialBlockId: o }) => {
               id: "new-selector",
               placeholder: "Button-Primary",
               value: m,
-              onChange: (D) => $(D.target.value),
+              onChange: (L) => F(L.target.value),
               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") }),
@@ -11418,18 +11525,18 @@ const PartialWrapper = ({ partialBlockId: o }) => {
               id: "new-classes",
               placeholder: "bg-blue-500 text-white px-4 py-2",
               value: h,
-              onChange: (D) => x(D.target.value),
+              onChange: (L) => x(L.target.value),
               className: "min-h-[80px] resize-none font-mono text-xs"
             }
           )
         ] })
       ] }),
       /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: H, className: "h-8 text-sm", children: o("Cancel") }),
-        /* @__PURE__ */ jsx(Button, { onClick: j, className: "h-8 text-sm", children: o("Add Token") })
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: $, className: "h-8 text-sm", children: o("Cancel") }),
+        /* @__PURE__ */ jsx(Button, { onClick: E, className: "h-8 text-sm", children: o("Add Token") })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: u, onOpenChange: g, 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.") })
@@ -11442,7 +11549,7 @@ const PartialWrapper = ({ partialBlockId: o }) => {
             {
               id: "edit-selector",
               value: b,
-              onChange: (D) => L(D.target.value),
+              onChange: (L) => O(L.target.value),
               className: "text-sm"
             }
           ),
@@ -11455,21 +11562,18 @@ const PartialWrapper = ({ partialBlockId: o }) => {
             {
               id: "edit-classes",
               value: C,
-              onChange: (D) => k(D.target.value),
+              onChange: (L) => k(L.target.value),
               className: "min-h-[80px] resize-none font-mono text-xs"
             }
           )
         ] })
       ] }),
       /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: M, 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") })
       ] })
     ] }) })
   ] });
-}, PanelButton = ({ show: o, isActive: n }) => {
-  const r = useBuilderProp("flags.designTokens", !1);
-  return r ? /* @__PURE__ */ jsx(Button, { variant: n ? "default" : "ghost", size: "icon", onClick: o, disabled: !r, children: /* @__PURE__ */ jsx(FontStyleIcon, {}) }) : null;
 }, DEFAULT_PANEL_WIDTH = 280, OutlineButton = ({ isActive: o, show: n }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(StackIcon, { className: "h-5 w-5" }) }), AddBlocksButton = ({ isActive: o, show: n }) => useIsDragAndDropEnabled() && /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(PlusCircledIcon, { className: "h-5 w-5" }) }), AskAiButton = ({ isActive: o, show: n }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(AiIcon, {}) });
 registerChaiSidebarPanel("add-block", {
   button: AddBlocksButton,
@@ -11495,31 +11599,25 @@ registerChaiSidebarPanel("outline", {
   width: DEFAULT_PANEL_WIDTH,
   panel: () => /* @__PURE__ */ jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsx(ListTree, {}) })
 });
-registerChaiSidebarPanel("desgin-tokens", {
-  label: "Design Tokens",
-  panel: ManageDesignTokens,
-  position: "top",
-  button: PanelButton
-});
 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((v) => {
-    v.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(
-    (v) => {
-      console.log("handleMenuItemClick", v, n), r(n === v ? null : v);
+    (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 v = find(b, { id: n });
-      v && get(v, "view", "standard") === "standard" && (a.current = n, l(get(v, "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 v = find(b, { id: n });
-    return get(v, "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(() => {
@@ -11529,8 +11627,8 @@ const RootLayout = () => {
     n !== null && !find(b, { id: n }) && r("outline");
   }, [n, b]);
   const _ = useCallback(
-    (v) => {
-      h(v);
+    (w) => {
+      h(w);
     },
     [h]
   );
@@ -11544,33 +11642,33 @@ 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((v, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(v, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: f.map((w, j) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "top",
-                  panelId: v.id,
-                  isActive: n === v.id,
-                  show: () => _(v.id)
+                  panelId: w.id,
+                  isActive: n === w.id,
+                  show: () => _(w.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(v.label) }) })
-              ] }, "button-top-" + E)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
+              ] }, "button-top-" + j)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((v, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(v, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((w, j) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: v.id,
-                  isActive: n === v.id,
-                  show: () => _(v.id)
+                  panelId: w.id,
+                  isActive: n === w.id,
+                  show: () => _(w.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(v.label) }) })
-              ] }, "button-bottom-" + E)) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
+              ] }, "button-bottom-" + j)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
               {
                 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(
@@ -11601,7 +11699,22 @@ const RootLayout = () => {
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
                     x("AI Assistant")
-                  ] }) }) : c === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
+                  ] }) }) : c === "design-tokens" ? /* @__PURE__ */ jsxs("div", { className: "mb-1 flex w-full items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(DesignTokensIcon, { className: "h-4 w-4 text-gray-600" }),
+                      x("Design Tokens")
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        onClick: () => d("block"),
+                        variant: "ghost",
+                        size: "icon",
+                        className: "text-xs",
+                        children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4 rtl:ml-2" })
+                      }
+                    )
+                  ] }) : c === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(MixerHorizontalIcon, { className: "h-4 w-4 text-gray-600" }),
                       x("Theme Settings")
@@ -11617,7 +11730,7 @@ const RootLayout = () => {
                       }
                     )
                   ] }) : null }) }) }),
-                  /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: c === "ai" ? /* @__PURE__ */ jsx(AskAI, {}) : c === "theme" ? /* @__PURE__ */ jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: c === "ai" ? /* @__PURE__ */ jsx(AskAI, {}) : c === "design-tokens" ? /* @__PURE__ */ jsx(ManageDesignTokens, {}) : c === "theme" ? /* @__PURE__ */ jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
                 ] }) })
               }
             )
@@ -11749,8 +11862,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)), v = Math.max(0, Math.min(y, B));
-    r(_, v);
+    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);
   };
@@ -11992,10 +12105,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(
-    ([v, E]) => (
+    ([w, j]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      f(o, v).n === E
+      f(o, w).n === j
     )
   )))
     return b;
@@ -12004,34 +12117,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(v) {
-    var E;
-    if (isSelfAtom(n, v)) {
-      const j = u(o, v);
-      if (!isAtomStateInitialized(j))
-        if (hasInitialValue(v))
-          setAtomStateValueOrPromise(o, v, v.init);
+  function k(w) {
+    var j;
+    if (isSelfAtom(n, w)) {
+      const E = u(o, w);
+      if (!isAtomStateInitialized(E))
+        if (hasInitialValue(w))
+          setAtomStateValueOrPromise(o, w, w.init);
         else
           throw new Error("no atom init");
-      return returnAtomValue(j);
+      return returnAtomValue(E);
     }
-    const S = f(o, v);
+    const S = f(o, w);
     try {
       return returnAtomValue(S);
     } finally {
-      b.d.set(v, S.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, S), (E = i.get(v)) == null || E.t.add(n), y || C();
+      b.d.set(w, S.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, S), (j = i.get(w)) == null || j.t.add(n), y || C();
     }
   }
-  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 = (...v) => {
+      return !A && isActuallyWritableAtom(n) && (A = (...w) => {
         if (!y)
           try {
-            return h(o, n, ...v);
+            return h(o, n, ...w);
           } finally {
             m(o), g(o);
           }
@@ -12039,10 +12152,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }
   }, _ = b.n;
   try {
-    const v = p(o, n, k, B);
-    return setAtomStateValueOrPromise(o, n, v), isPromiseLike$1(v) && (registerAbortHandler(v, () => w == null ? void 0 : w.abort()), v.then(C, C)), b;
-  } catch (v) {
-    return delete b.v, b.e = v, ++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));
   }
@@ -12060,13 +12173,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);
@@ -12477,7 +12590,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;
@@ -12604,19 +12717,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(() => {
@@ -12632,17 +12745,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(`
   `)},
 }`;