@chaibuilder/sdk 3.2.7 → 3.2.9

package/dist/{index-H6m-0wVZ.js → index-CIez6R-d.js}

@@ -1,6 +1,6 @@
-var J = Object.defineProperty;
-var X = (r, n, o) => n in r ? J(r, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[n] = o;
-var G = (r, n, o) => X(r, typeof n != "symbol" ? n + "" : n, o);
+var ne = Object.defineProperty;
+var se = (r, n, o) => n in r ? ne(r, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[n] = o;
+var X = (r, n, o) => se(r, typeof n != "symbol" ? n + "" : n, o);
 import { jsxs, jsx, Fragment as Fragment$1 } 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 as isFunction$1, isObject as isObject$1, memoize, noop, first as first$1, keys as keys$1, forEach as forEach$1, 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";
@@ -8,12 +8,12 @@ import { g as generateUUID, a as getBreakpointValue, c as cn$1 } from "./common-
 import { atom, getDefaultStore as getDefaultStore$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { splitAtom, atomWithStorage, useAtomCallback } from "jotai/utils";
 import clsx$1, { clsx } from "clsx";
-import { nanoid } from "nanoid";
+import "nanoid";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
 import * as React from "react";
 import React__default, { useEffect, useCallback, useState, useMemo, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, D as DESIGN_TOKEN_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-IFVE37dG.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, j as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, D as DESIGN_TOKEN_PREFIX, k as ROOT_TEMP_KEY } from "./apply-binding-DLaiD20q.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
 import { isObject } from "@rjsf/utils";
 import { toast, Toaster } from "sonner";
@@ -21,8 +21,8 @@ import { useTranslation, initReactI18next } from "react-i18next";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useDebouncedState } from "@react-hookz/web";
 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, GlobeIcon, Pencil1Icon } from "@radix-ui/react-icons";
+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, au as Label, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, 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, 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, TokensIcon, CheckIcon, CircleIcon, MagnifyingGlassIcon, ReloadIcon, CaretRightIcon, FrameIcon, SquareIcon, EraserIcon, DownloadIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, StackIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, StopIcon, ZoomInIcon, DotsHorizontalIcon, LightningBoltIcon } 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() {
-    G(this, "subscribers", /* @__PURE__ */ new Map());
+    X(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(n, o) {
     return this.subscribers.has(n) || this.subscribers.set(n, /* @__PURE__ */ new Set()), this.subscribers.get(n).add(o), () => {
@@ -688,7 +688,7 @@ const useSelectedBlocksDisplayChild = () => ({
 ];
 class StructureRuleRegistry {
   constructor() {
-    G(this, "rules", [...CORE_STRUCTURE_RULES]);
+    X(this, "rules", [...CORE_STRUCTURE_RULES]);
   }
   addRule(n) {
     this.rules.push(n);
@@ -1061,8 +1061,8 @@ const undoRedoStateAtom = atom({
   return {
     moveBlocks: (g, b, x) => {
       const y = builderStore.get(presentBlocksAtom), S = map(g, (C) => {
-        const B = y.find((A) => A._id === C)._parent || null, w = y.filter((A) => B ? A._parent === B : !A._parent).map((A) => A._id).indexOf(C);
-        return { _id: C, oldParent: B, oldPosition: w };
+        const B = y.find((w) => w._id === C)._parent || null, A = y.filter((w) => B ? w._parent === B : !w._parent).map((w) => w._id).indexOf(C);
+        return { _id: C, oldParent: B, oldPosition: A };
       }), k = S.find(({ _id: C }) => C === g[0]);
       k && k.oldParent === b && k.oldPosition === x || (i(g, b, x), r({
         undo: () => each(S, ({ _id: C, oldParent: E, oldPosition: B }) => {
@@ -2612,10 +2612,10 @@ const getBlockWithChildren = (r, n) => {
               return;
             }
             if (m === "styles") {
-              const I = E.map((w) => {
-                for (const A in w)
-                  A !== "_id" && (w[A] = `${STYLES_KEY},${w[A]}`);
-                return w;
+              const I = E.map((A) => {
+                for (const w in A)
+                  w !== "_id" && (A[w] = `${STYLES_KEY},${A[w]}`);
+                return A;
               });
               c(I);
             } else
@@ -3018,6 +3018,9 @@ const useBlockHighlight = () => {
 }, useCanvasDisplayWidth = () => {
   const [r, n] = useAtom$1(canvasDisplayWidthAtom);
   return [r, n];
+}, getQueries = (r) => {
+  const n = ["xs", "sm", "md", "lg", "xl", "2xl"], o = n.indexOf(r);
+  return o === -1 ? ["xs"] : n.slice(0, o + 1);
 }, selectedBlockAllClassesAtom = atom((r) => {
   const n = first$1(r(selectedStylingBlocksAtom)), o = r(selectedBlockAtom);
   if (!n || n.blockId !== get(o, "_id", null)) return [];
@@ -3027,33 +3030,7 @@ const useBlockHighlight = () => {
   const n = r(canvasBreakpointAtom), o = r(styleStateAtom), a = r(darkModeAtom), i = getQueries(n);
   let l = filter(r(selectedBlockAllClassesAtom), { mod: o });
   return startsWith(o, "_") || (l = filter(l, (c) => i.includes(c.mq))), l = l.sort((c, d) => MQ[c.mq] - MQ[d.mq]), a || (l = filter(l, { dark: !1 })), l;
-}), getQueries = (r) => {
-  let n = [];
-  switch (r) {
-    case "xs":
-      n = ["xs"];
-      break;
-    case "sm":
-      n = ["xs", "sm"];
-      break;
-    case "md":
-      n = ["xs", "sm", "md"];
-      break;
-    case "lg":
-      n = ["xs", "sm", "md", "lg"];
-      break;
-    case "xl":
-      n = ["xs", "sm", "md", "lg", "xl"];
-      break;
-    case "2xl":
-      n = ["xs", "sm", "md", "lg", "xl", "2xl"];
-      break;
-    default:
-      n = ["xs"];
-      break;
-  }
-  return n;
-}, useSelectedBlockCurrentClasses = () => useAtomValue$1(selectedBlockCurrentClassesAtom), selectedBreakpointsAtom = atomWithStorage("selectedBreakpoints", ["XS", "MD", "XL"]), useSelectedBreakpoints = () => {
+}), useSelectedBlockCurrentClasses = () => useAtomValue$1(selectedBlockCurrentClassesAtom), selectedBreakpointsAtom = atomWithStorage("selectedBreakpoints", ["XS", "MD", "XL"]), useSelectedBreakpoints = () => {
   const [r, n] = useAtom$1(selectedBreakpointsAtom);
   return [r, n];
 }, useStylingState = () => useAtom$1(styleStateAtom), wrapperBlockAtom = atom((r) => {
@@ -3555,9 +3532,9 @@ function detectDropZone(r, n, o, a, i) {
     d = d.parentElement;
   const u = l === "canvas" ? l : d == null ? void 0 : d.getAttribute("data-block-id"), p = d ? getOrientation(d) : "vertical", h = getOrientation(r), f = isLeafBlock(c), m = !f && canAcceptChildBlock(c, a), g = ((C = i.defaultView) == null ? void 0 : C.scrollY) || 0, b = ((E = i.defaultView) == null ? void 0 : E.scrollX) || 0;
   if (l === "canvas" && hasChildBlocks(r)) {
-    const w = getChildBlocks(r), A = w[w.length - 1];
-    if (A) {
-      const v = A.getBoundingClientRect(), T = r.getBoundingClientRect(), N = window.getComputedStyle(r), j = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, L = T.width - j - P, D = T.left + b + j;
+    const A = getChildBlocks(r), w = A[A.length - 1];
+    if (w) {
+      const v = w.getBoundingClientRect(), T = r.getBoundingClientRect(), N = window.getComputedStyle(r), j = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, L = T.width - j - P, D = T.left + b + j;
       return {
         position: "after",
         placeholderOrientation: "horizontal",
@@ -3567,8 +3544,8 @@ function detectDropZone(r, n, o, a, i) {
           width: L,
           height: 4
         },
-        targetElement: A,
-        targetBlockId: A.getAttribute("data-block-id"),
+        targetElement: w,
+        targetBlockId: w.getAttribute("data-block-id"),
         targetParentId: "canvas",
         isEmpty: !1,
         confidence: 1
@@ -3576,44 +3553,44 @@ function detectDropZone(r, n, o, a, i) {
     }
   }
   if (m && !f && hasChildBlocks(r)) {
-    const w = detectGapZone(r, n, o, h);
-    if (w) {
-      const A = w.before.getBoundingClientRect(), v = w.after.getBoundingClientRect(), T = r.getBoundingClientRect(), N = window.getComputedStyle(r), j = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, L = getChildBlocks(r), D = getSiblingsInSameRow(L, w.before, h);
-      let F = 0;
-      if (D.forEach((H) => {
-        const O = H.getBoundingClientRect();
-        O.height > F && (F = O.height);
+    const A = detectGapZone(r, n, o, h);
+    if (A) {
+      const w = A.before.getBoundingClientRect(), v = A.after.getBoundingClientRect(), T = r.getBoundingClientRect(), N = window.getComputedStyle(r), j = parseFloat(N.paddingLeft) || 0, P = parseFloat(N.paddingRight) || 0, L = getChildBlocks(r), D = getSiblingsInSameRow(L, A.before, h);
+      let $ = 0;
+      if (D.forEach((M) => {
+        const O = M.getBoundingClientRect();
+        O.height > $ && ($ = O.height);
       }), h === "vertical") {
-        const H = T.width - j - P, O = T.left + b + j;
+        const M = T.width - j - P, O = T.left + b + j;
         return {
           position: "after",
           placeholderOrientation: "horizontal",
           rect: {
-            top: A.bottom + g,
+            top: w.bottom + g,
             left: O,
-            width: H,
+            width: M,
             height: 4
           },
-          targetElement: w.before,
-          targetBlockId: w.before.getAttribute("data-block-id"),
+          targetElement: A.before,
+          targetBlockId: A.before.getAttribute("data-block-id"),
           targetParentId: l,
           isGapZone: !0,
           confidence: 1
           // High confidence for gap zones
         };
       } else {
-        const H = A.top + g, O = F > 0 ? F : Math.max(A.height, v.height);
+        const M = w.top + g, O = $ > 0 ? $ : Math.max(w.height, v.height);
         return {
           position: "after",
           placeholderOrientation: "vertical",
           rect: {
-            top: H,
-            left: A.right + b,
+            top: M,
+            left: w.right + b,
             width: 4,
             height: O
           },
-          targetElement: w.before,
-          targetBlockId: w.before.getAttribute("data-block-id"),
+          targetElement: A.before,
+          targetBlockId: A.before.getAttribute("data-block-id"),
           targetParentId: l,
           isGapZone: !0,
           confidence: 1
@@ -3622,22 +3599,22 @@ function detectDropZone(r, n, o, a, i) {
     }
   }
   if (d && u) {
-    const w = detectParentEdgeProximity(d, n, o, p);
-    if (w) {
-      const A = d.getBoundingClientRect(), v = window.getComputedStyle(d), T = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, j = parseFloat(v.paddingTop) || 0, P = parseFloat(v.paddingBottom) || 0, L = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, D = ((I = i.defaultView) == null ? void 0 : I.scrollX) || 0, F = p === "vertical" ? "horizontal" : "vertical", H = getMaxSiblingDimensions(d);
-      if (w === "start") {
+    const A = detectParentEdgeProximity(d, n, o, p);
+    if (A) {
+      const w = d.getBoundingClientRect(), v = window.getComputedStyle(d), T = parseFloat(v.paddingLeft) || 0, N = parseFloat(v.paddingRight) || 0, j = parseFloat(v.paddingTop) || 0, P = parseFloat(v.paddingBottom) || 0, L = ((B = i.defaultView) == null ? void 0 : B.scrollY) || 0, D = ((I = i.defaultView) == null ? void 0 : I.scrollX) || 0, $ = p === "vertical" ? "horizontal" : "vertical", M = getMaxSiblingDimensions(d);
+      if (A === "start") {
         const O = getChildBlocks(d)[0];
         if (O) {
-          const R = O.getBoundingClientRect();
+          const H = O.getBoundingClientRect();
           if (p === "vertical") {
-            const _ = A.width - T - N, M = A.left + D + T;
+            const R = w.width - T - N, V = w.left + D + T;
             return {
               position: "before",
-              placeholderOrientation: F,
+              placeholderOrientation: $,
               rect: {
-                top: R.top + L - 2,
-                left: M,
-                width: _,
+                top: H.top + L - 2,
+                left: V,
+                width: R,
                 height: 4
               },
               targetElement: O,
@@ -3646,15 +3623,15 @@ function detectDropZone(r, n, o, a, i) {
               confidence: 0.9
             };
           } else {
-            const _ = A.top + L + j, M = H.maxHeight > 0 ? H.maxHeight : A.height - j - P;
+            const R = w.top + L + j, V = M.maxHeight > 0 ? M.maxHeight : w.height - j - P;
             return {
               position: "before",
-              placeholderOrientation: F,
+              placeholderOrientation: $,
               rect: {
-                top: _,
-                left: R.left + D - 2,
+                top: R,
+                left: H.left + D - 2,
                 width: 4,
-                height: M
+                height: V
               },
               targetElement: O,
               targetBlockId: O.getAttribute("data-block-id"),
@@ -3664,38 +3641,38 @@ function detectDropZone(r, n, o, a, i) {
           }
         }
       } else {
-        const O = getChildBlocks(d), R = O[O.length - 1];
-        if (R) {
-          const _ = R.getBoundingClientRect();
+        const O = getChildBlocks(d), H = O[O.length - 1];
+        if (H) {
+          const R = H.getBoundingClientRect();
           if (p === "vertical") {
-            const M = A.width - T - N, $ = A.left + D + T;
+            const V = w.width - T - N, W = w.left + D + T;
             return {
               position: "after",
-              placeholderOrientation: F,
+              placeholderOrientation: $,
               rect: {
-                top: _.bottom + L - 2,
-                left: $,
-                width: M,
+                top: R.bottom + L - 2,
+                left: W,
+                width: V,
                 height: 4
               },
-              targetElement: R,
-              targetBlockId: R.getAttribute("data-block-id"),
+              targetElement: H,
+              targetBlockId: H.getAttribute("data-block-id"),
               targetParentId: u,
               confidence: 0.9
             };
           } else {
-            const M = A.top + L + j, $ = H.maxHeight > 0 ? H.maxHeight : A.height - j - P;
+            const V = w.top + L + j, W = M.maxHeight > 0 ? M.maxHeight : w.height - j - P;
             return {
               position: "after",
-              placeholderOrientation: F,
+              placeholderOrientation: $,
               rect: {
-                top: M,
-                left: _.right + D - 2,
+                top: V,
+                left: R.right + D - 2,
                 width: 4,
-                height: $
+                height: W
               },
-              targetElement: R,
-              targetBlockId: R.getAttribute("data-block-id"),
+              targetElement: H,
+              targetBlockId: H.getAttribute("data-block-id"),
               targetParentId: u,
               confidence: 0.9
             };
@@ -3706,12 +3683,12 @@ function detectDropZone(r, n, o, a, i) {
   }
   let x = calculateElementZone(r, n, o, m, p);
   if (f && x.position === "inside") {
-    const w = r.getBoundingClientRect();
+    const A = r.getBoundingClientRect();
     p === "vertical" ? x = {
-      position: (o - w.top) / w.height < 0.5 ? "before" : "after",
+      position: (o - A.top) / A.height < 0.5 ? "before" : "after",
       confidence: x.confidence
     } : x = {
-      position: (n - w.left) / w.width < 0.5 ? "before" : "after",
+      position: (n - A.left) / A.width < 0.5 ? "before" : "after",
       confidence: x.confidence
     };
   }
@@ -3779,7 +3756,7 @@ function getSiblingsInSameRow(r, n, o) {
 }
 function calculatePlaceholderRect(r, n, o, a, i) {
   var j, P;
-  const l = r.getBoundingClientRect(), c = window.getComputedStyle(r), d = ((j = i.defaultView) == null ? void 0 : j.scrollY) || 0, u = ((P = i.defaultView) == null ? void 0 : P.scrollX) || 0, p = parseFloat(c.marginTop) || 0, h = parseFloat(c.marginBottom) || 0, f = parseFloat(c.marginLeft) || 0, m = parseFloat(c.marginRight) || 0, g = parseFloat(c.paddingTop) || 0, b = parseFloat(c.paddingBottom) || 0, x = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, S = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, C = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, E = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, I = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, w = n ? getOrientation(n) : "vertical", A = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(A, r, w);
+  const l = r.getBoundingClientRect(), c = window.getComputedStyle(r), d = ((j = i.defaultView) == null ? void 0 : j.scrollY) || 0, u = ((P = i.defaultView) == null ? void 0 : P.scrollX) || 0, p = parseFloat(c.marginTop) || 0, h = parseFloat(c.marginBottom) || 0, f = parseFloat(c.marginLeft) || 0, m = parseFloat(c.marginRight) || 0, g = parseFloat(c.paddingTop) || 0, b = parseFloat(c.paddingBottom) || 0, x = parseFloat(c.paddingLeft) || 0, y = parseFloat(c.paddingRight) || 0, S = n == null ? void 0 : n.getBoundingClientRect(), k = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, C = n && parseFloat(window.getComputedStyle(n).paddingRight) || 0, E = n && parseFloat(window.getComputedStyle(n).paddingTop) || 0, B = n && parseFloat(window.getComputedStyle(n).paddingBottom) || 0, I = n ? getMaxSiblingDimensions(n) : { maxWidth: 0, maxHeight: 0 }, A = n ? getOrientation(n) : "vertical", w = n ? getChildBlocks(n) : [], v = getSiblingsInSameRow(w, r, A);
   let T = 0, N = 0;
   if (v.forEach((L) => {
     const D = L.getBoundingClientRect();
@@ -3794,7 +3771,7 @@ function calculatePlaceholderRect(r, n, o, a, i) {
         height: 4
       };
     } else {
-      const L = l.top + d, D = w === "horizontal" && T > 0 ? T : I.maxHeight > 0 ? I.maxHeight : S ? S.height - E - B : l.height;
+      const L = l.top + d, D = A === "horizontal" && T > 0 ? T : I.maxHeight > 0 ? I.maxHeight : S ? S.height - E - B : l.height;
       return {
         top: L,
         left: l.left + u - f - 2,
@@ -3812,7 +3789,7 @@ function calculatePlaceholderRect(r, n, o, a, i) {
         height: 4
       };
     } else {
-      const L = l.top + d, D = w === "horizontal" && T > 0 ? T : I.maxHeight > 0 ? I.maxHeight : S ? S.height - E - B : l.height;
+      const L = l.top + d, D = A === "horizontal" && T > 0 ? T : I.maxHeight > 0 ? I.maxHeight : S ? S.height - E - B : l.height;
       return {
         top: L,
         left: l.right + u + m - 2,
@@ -3915,11 +3892,11 @@ const useBlockDrop = () => {
       if (I)
         d([r._id], C === null ? void 0 : C, E), h(), p([]), u([r._id]);
       else {
-        const w = r._type || r.type, A = r != null && r.blocks ? isFunction$1(r == null ? void 0 : r.blocks) ? syncBlocksWithDefaults(r == null ? void 0 : r.blocks()) : r == null ? void 0 : r.blocks : null;
+        const A = r._type || r.type, w = r != null && r.blocks ? isFunction$1(r == null ? void 0 : r.blocks) ? syncBlocksWithDefaults(r == null ? void 0 : r.blocks()) : r == null ? void 0 : r.blocks : null;
         c(
-          w === "PartialBlock" ? {
-            blocks: [{ _type: w, _id: "partial-block", partialBlockId: r.partialBlockId }]
-          } : (A == null ? void 0 : A.length) > 0 ? { blocks: [...A] } : { type: w },
+          A === "PartialBlock" ? {
+            blocks: [{ _type: A, _id: "partial-block", partialBlockId: r.partialBlockId }]
+          } : (w == null ? void 0 : w.length) > 0 ? { blocks: [...w] } : { type: A },
           C,
           E
         );
@@ -4032,17 +4009,17 @@ const LEAF_BLOCK_TYPES = [
         return;
       }
       if (k && C) {
-        const B = 1 - E / AUTO_SCROLL_CONFIG.EDGE_ZONE, I = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * B, w = () => {
+        const B = 1 - E / AUTO_SCROLL_CONFIG.EDGE_ZONE, I = AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED + (AUTO_SCROLL_CONFIG.MAX_SCROLL_SPEED - AUTO_SCROLL_CONFIG.MIN_SCROLL_SPEED) * B, A = () => {
           if (!isDragging || !m) {
             d.current = null;
             return;
           }
-          const A = C === "up" ? -I : I;
-          m.scrollBy(0, A);
+          const w = C === "up" ? -I : I;
+          m.scrollBy(0, w);
           const v = m.scrollY, T = v > 0, N = v + g < x, j = u.current, P = g - u.current;
-          C === "up" && T && j < AUTO_SCROLL_CONFIG.EDGE_ZONE || C === "down" && N && P < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(w) : d.current = null;
+          C === "up" && T && j < AUTO_SCROLL_CONFIG.EDGE_ZONE || C === "down" && N && P < AUTO_SCROLL_CONFIG.EDGE_ZONE ? d.current = requestAnimationFrame(A) : d.current = null;
         };
-        d.current === null && (d.current = requestAnimationFrame(w));
+        d.current === null && (d.current = requestAnimationFrame(A));
       }
     },
     [c]
@@ -4073,7 +4050,7 @@ const LEAF_BLOCK_TYPES = [
         return;
       const B = g.getAttribute("data-block-type") || "Box";
       let I = !1;
-      const w = LEAF_BLOCK_TYPES.includes(B);
+      const A = LEAF_BLOCK_TYPES.includes(B);
       if (B === "Image" && S === "Image" && isDraggingOnlyImageBlock(r)) {
         i(b), o({
           isVisible: !0,
@@ -4091,7 +4068,7 @@ const LEAF_BLOCK_TYPES = [
         return;
       }
       if (E.position === "inside") {
-        if (w || y && !canDropWithoutCircularReference(y, b, l))
+        if (A || y && !canDropWithoutCircularReference(y, b, l))
           return;
         I = canAcceptChildBlock(B, S);
       } else {
@@ -4105,7 +4082,7 @@ const LEAF_BLOCK_TYPES = [
       if (!I)
         return;
       i(E.targetParentId);
-      const A = E.targetParentId || x;
+      const w = E.targetParentId || x;
       o({
         isVisible: !0,
         isValid: !0,
@@ -4117,7 +4094,7 @@ const LEAF_BLOCK_TYPES = [
         width: E.rect.width,
         height: E.rect.height,
         targetBlockId: E.targetBlockId,
-        targetParentId: A
+        targetParentId: w
       }), removeDropTargetAttributes(c), E.targetElement.setAttribute("data-drop-target", "true");
     }, 300),
     [c, r, o, a, i, l, p]
@@ -4663,17 +4640,17 @@ class Content extends Component {
 class Frame extends Component {
   constructor(o, a) {
     super(o, a);
-    G(this, "setRef", (o) => {
+    X(this, "setRef", (o) => {
       this.nodeRef.current = o;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(o) : a && (a.current = o);
     });
-    G(this, "handleLoad", () => {
+    X(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
-    G(this, "loadCheck", () => setInterval(() => {
+    X(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -4710,7 +4687,7 @@ class Frame extends Component {
     return delete o.head, delete o.initialContent, delete o.mountTarget, delete o.contentDidMount, delete o.contentDidUpdate, delete o.forwardedRef, /* @__PURE__ */ jsx("iframe", { ...o, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
   }
 }
-G(Frame, "defaultProps", {
+X(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -6395,7 +6372,7 @@ class NodeRange {
   }
 }
 const emptyAttrs = /* @__PURE__ */ Object.create(null);
-let Node$2 = class Y {
+let Node$2 = class ee {
   /**
   @internal
   */
@@ -6520,14 +6497,14 @@ let Node$2 = class Y {
   the given content (or empty, if no content is given).
   */
   copy(n = null) {
-    return n == this.content ? this : new Y(this.type, this.attrs, n, this.marks);
+    return n == this.content ? this : new ee(this.type, this.attrs, n, this.marks);
   }
   /**
   Create a copy of this node, with the given set of marks instead
   of the node's own marks.
   */
   mark(n) {
-    return n == this.marks ? this : new Y(this.type, this.attrs, this.content, n);
+    return n == this.marks ? this : new ee(this.type, this.attrs, this.content, n);
   }
   /**
   Create a copy of this node with only the content between the
@@ -10610,8 +10587,8 @@ const splitBlock = ({ keepMarks: r = !0 } = {}) => ({ tr: n, state: o, dispatch:
     if (i) {
       let S = Fragment.empty;
       const k = u.index(-1) ? 1 : u.index(-2) ? 2 : 3;
-      for (let A = u.depth - k; A >= u.depth - 3; A -= 1)
-        S = Fragment.from(u.node(A).copy(S));
+      for (let w = u.depth - k; w >= u.depth - 3; w -= 1)
+        S = Fragment.from(u.node(w).copy(S));
       const C = u.indexAfter(-1) < u.node(-2).childCount ? 1 : u.indexAfter(-2) < u.node(-3).childCount ? 2 : 3, E = {
         ...getSplittedAttributes(m, u.node().type.name, u.node().attrs),
         ...n
@@ -10619,12 +10596,12 @@ const splitBlock = ({ keepMarks: r = !0 } = {}) => ({ tr: n, state: o, dispatch:
       S = S.append(Fragment.from(d.createAndFill(null, B) || void 0));
       const I = u.before(u.depth - (k - 1));
       o.replace(I, u.after(-C), new Slice(S, 4 - k, 0));
-      let w = -1;
-      o.doc.nodesBetween(I, o.doc.content.size, (A, v) => {
-        if (w > -1)
+      let A = -1;
+      o.doc.nodesBetween(I, o.doc.content.size, (w, v) => {
+        if (A > -1)
           return !1;
-        A.isTextblock && A.content.size === 0 && (w = v + 1);
-      }), w > -1 && o.setSelection(TextSelection.near(o.doc.resolve(w))), o.scrollIntoView();
+        w.isTextblock && w.content.size === 0 && (A = v + 1);
+      }), A > -1 && o.setSelection(TextSelection.near(o.doc.resolve(A))), o.scrollIntoView();
     }
     return !0;
   }
@@ -10680,8 +10657,8 @@ const splitBlock = ({ keepMarks: r = !0 } = {}) => ({ tr: n, state: o, dispatch:
       return u().command(() => (l.setNodeMarkup(B.pos, g), !0)).command(() => joinListBackwards(l, g)).command(() => joinListForwards(l, g)).run();
   }
   return !o || !E || !d ? u().command(() => h().wrapInList(g, a) ? !0 : p.clearNodes()).wrapInList(g, a).command(() => joinListBackwards(l, g)).command(() => joinListForwards(l, g)).run() : u().command(() => {
-    const I = h().wrapInList(g, a), w = E.filter((A) => m.includes(A.type.name));
-    return l.ensureMarks(w), I ? !0 : p.clearNodes();
+    const I = h().wrapInList(g, a), A = E.filter((w) => m.includes(w.type.name));
+    return l.ensureMarks(A), I ? !0 : p.clearNodes();
   }).wrapInList(g, a).command(() => joinListBackwards(l, g)).command(() => joinListForwards(l, g)).run();
 }, toggleMark = (r, n = {}, o = {}) => ({ state: a, commands: i }) => {
   const { extendEmptyMarkRange: l = !1 } = o, c = getMarkType(r, a.schema);
@@ -11222,28 +11199,28 @@ const RichTextEditor = memo(
   ({ block: r, children: n }) => {
     const o = "content", { document: a } = useFrame(), { editingBlockId: i, editingItemIndex: l, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [u, p] = useState(null), h = useRef(null), { clearHighlight: f } = useBlockHighlight(), m = useUpdateBlocksProps(), { selectedLang: g } = useLanguages(), [, b] = useSelectedBlockIds(), x = useRef(null), y = i, { blockContent: S, blockType: k } = useMemo(() => {
       var N;
-      const w = r._type;
-      let A = r[o];
+      const A = r._type;
+      let w = r[o];
       const v = getRegisteredChaiBlock(r._type);
-      return g && ((N = v == null ? void 0 : v.i18nProps) == null ? void 0 : N.includes(o)) && has(r, `${o}-${g}`) && (A = get(r, `${o}-${g}`)), { blockContent: A, blockType: w };
+      return g && ((N = v == null ? void 0 : v.i18nProps) == null ? void 0 : N.includes(o)) && has(r, `${o}-${g}`) && (w = get(r, `${o}-${g}`)), { blockContent: w, blockType: A };
     }, [r, g]), C = useCallback(
-      (w) => {
+      (A) => {
         var v;
-        const A = w || ((v = h.current) == null ? void 0 : v.innerText);
-        m([y], { [o]: A }), p(null), c(null), d(-1), b([]), y && setTimeout(() => b([y]), 100);
+        const w = A || ((v = h.current) == null ? void 0 : v.innerText);
+        m([y], { [o]: w }), p(null), c(null), d(-1), b([]), y && setTimeout(() => b([y]), 100);
       },
       [y, m, c, b, g]
     ), E = useDebouncedCallback(
-      (w) => {
-        m([y], { [o]: w });
+      (A) => {
+        m([y], { [o]: A });
       },
       [y, r, m, g],
       1e3
     ), B = useCallback(
-      (w) => {
-        w.preventDefault(), y && (x.current = y), C(), setTimeout(() => {
-          const A = x.current;
-          x.current = null, b([A]);
+      (A) => {
+        A.preventDefault(), y && (x.current = y), C(), setTimeout(() => {
+          const w = x.current;
+          x.current = null, b([w]);
         }, 100);
       },
       [b, y, g]
@@ -11251,7 +11228,7 @@ const RichTextEditor = memo(
     useEffect(() => {
       var T;
       if (!y) return;
-      const w = `[data-block-id="${y}"]`, A = l >= 0 ? `[data-block-index="${l}"]` : "", v = a.querySelector(`${w}${A}`);
+      const A = `[data-block-id="${y}"]`, w = l >= 0 ? `[data-block-index="${l}"]` : "", v = a.querySelector(`${A}${w}`);
       v && ((T = v == null ? void 0 : v.classList) == null || T.add("sr-only"), p(v));
     }, [y, k, a, l]);
     const I = useMemo(() => u ? (f(), ["RichText", "Paragraph"].includes(k) ? /* @__PURE__ */ jsx(
@@ -11320,7 +11297,7 @@ const RichTextEditor = memo(
   ), I = useMemo(
     () => p(l._id, getBlockRuntimeProps(l._type)),
     [l._id, l._type, p, getBlockRuntimeProps]
-  ), w = useMemo(() => {
+  ), A = useMemo(() => {
     const P = {
       "data-block-id": l._id,
       "data-block-type": l._type,
@@ -11333,9 +11310,9 @@ const RichTextEditor = memo(
       onDragStart: C.onDragStart,
       onDragEnd: C.onDragEnd
     } : P;
-  }, [l._id, l._type, g, k, S, C, a]), A = useMemo(
+  }, [l._id, l._type, g, k, S, C, a]), w = useMemo(
     () => ({
-      blockProps: w,
+      blockProps: A,
       inBuilder: x === "edit",
       lang: d || u,
       pageData: h,
@@ -11344,11 +11321,11 @@ const RichTextEditor = memo(
       ...I,
       ...r
     }),
-    [x, w, d, u, E, B, I, r]
+    [x, A, d, u, E, B, I, r]
   ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), T = useMemo(() => get(l, "_show", !0), [l]);
   if (isNull(m) || !T) return null;
   let N = /* @__PURE__ */ jsx(Suspense, { children: createElement(m, {
-    ...A,
+    ...w,
     children: o({
       _id: l._id,
       _type: l._type,
@@ -11531,7 +11508,7 @@ const RichTextEditor = memo(
     /* @__PURE__ */ jsx("p", { className: "font-semibold", children: r("Oops! Something went wrong.") }),
     /* @__PURE__ */ jsx("p", { children: r("Please try again.") })
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-Bbeel8oa.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-DPr4HDOV.js")), CanvasArea = () => {
   const [r] = 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, {}) }) }),
@@ -11679,13 +11656,13 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
       n(C == null ? void 0 : C.url);
       const E = C == null ? void 0 : C.width, B = C == null ? void 0 : C.height, I = h.includes("mobile");
       if (c != null && c._id) {
-        const w = {
+        const A = {
           ...E && { [I ? "mobileWidth" : "width"]: E },
           ...B && { [I ? "mobileHeight" : "height"]: B },
           ...C.description && { alt: C.description }
         };
-        if (set(w, h, C.id), isEmpty(w)) return;
-        d([c._id], w);
+        if (set(A, h, C.id), isEmpty(A)) return;
+        d([c._id], A);
       }
     }
   }, y = useCallback(() => {
@@ -11858,8 +11835,8 @@ const DataBindingSelector = ({
       }
       const g = (S) => /[.,!?;:]/.test(S), b = (S, k, C) => {
         let E = "", B = "";
-        const I = k > 0 ? S[k - 1] : "", w = k < S.length ? S[k] : "";
-        return k > 0 && (I === "." || !g(I) && I !== " ") && (E = " "), k < S.length && !g(w) && w !== " " && (B = " "), {
+        const I = k > 0 ? S[k - 1] : "", A = k < S.length ? S[k] : "";
+        return k > 0 && (I === "." || !g(I) && I !== " ") && (E = " "), k < S.length && !g(A) && A !== " " && (B = " "), {
           text: E + C + B,
           prefixLength: E.length,
           suffixLength: B.length
@@ -11876,9 +11853,9 @@ const DataBindingSelector = ({
           if (C !== E)
             S.chain().deleteSelection().insertContent(k).run();
           else {
-            const { state: I } = S, w = I.selection.from, A = I.doc.textBetween(Math.max(0, w - 1), w), v = I.doc.textBetween(w, Math.min(w + 1, I.doc.content.size));
+            const { state: I } = S, A = I.selection.from, w = I.doc.textBetween(Math.max(0, A - 1), A), v = I.doc.textBetween(A, Math.min(A + 1, I.doc.content.size));
             let T = "";
-            w > 0 && A !== " " && !g(A) && (T = " ");
+            A > 0 && w !== " " && !g(w) && (T = " ");
             let N = "";
             v && v !== " " && !g(v) && (N = " "), S.chain().insertContent(T + k + N).run();
           }
@@ -11892,8 +11869,8 @@ const DataBindingSelector = ({
           n(N, {}, o);
           return;
         }
-        const I = `{{${f}}}`, { text: w } = b(C, k, I), A = C.slice(0, k) + w + C.slice(k);
-        n(A, {}, o);
+        const I = `{{${f}}}`, { text: A } = b(C, k, I), w = C.slice(0, k) + A + C.slice(k);
+        n(w, {}, o);
       }
     },
     [o, n, a, d == null ? void 0 : d._id, u]
@@ -11914,8 +11891,8 @@ const DataBindingSelector = ({
   pageTypes: n,
   onChange: o
 }) => {
-  var A;
-  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, T) => []), [l, c] = useState(!1), [d, u] = useState(!1), [p, h] = useState("page"), [f, m] = useState(""), [g, b] = useState([]), [x, y] = useState(-1), S = useRef(null), k = (A = n == null ? void 0 : n.find((v) => v.key === p)) == null ? void 0 : A.name;
+  var w;
+  const { t: a } = useTranslation(), i = useBuilderProp("searchPageTypeItems", (v, T) => []), [l, c] = useState(!1), [d, u] = useState(!1), [p, h] = useState("page"), [f, m] = useState(""), [g, b] = useState([]), [x, y] = useState(-1), S = useRef(null), k = (w = n == null ? void 0 : n.find((v) => v.key === p)) == null ? void 0 : w.name;
   useEffect(() => {
     if (m(""), b([]), y(-1), u(!1), !r || l || !startsWith(r, "pageType:")) return;
     const v = split(r, ":"), T = get(v, 1, "page") || "page";
@@ -11964,7 +11941,7 @@ const DataBindingSelector = ({
   }, [x]);
   const I = () => {
     m(""), b([]), y(-1), u(!1), o("");
-  }, w = (v) => {
+  }, A = (v) => {
     m(v), u(!isEmpty(v)), c(!0), C(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -11975,7 +11952,7 @@ const DataBindingSelector = ({
         {
           type: "text",
           value: f,
-          onChange: (v) => w(v.target.value),
+          onChange: (v) => A(v.target.value),
           onKeyDown: B,
           placeholder: a(`Search ${k ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
@@ -12100,7 +12077,7 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DbOJAIEv.js")), RichTextEditorFieldComp = ({ blockId: r, id: n, placeholder: o, value: a, onChange: i, onBlur: l }) => {
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-CsBCpJSY.js")), RichTextEditorFieldComp = ({ blockId: r, id: n, placeholder: o, value: a, onChange: i, onBlur: l }) => {
   const c = useRef(null), [d, u] = useState(!1), p = useRTEditor({
     blockId: r,
     value: a,
@@ -12356,7 +12333,7 @@ const DataBindingSelector = ({
   if (d)
     return null;
   if (p.type === "boolean") return /* @__PURE__ */ jsx("div", { className: o, children: i });
-  const A = E == null ? void 0 : E.includes(n.replace("root.", ""));
+  const w = E == null ? void 0 : E.includes(n.replace("root.", ""));
   if (p.type === "array") {
     const N = B === n;
     return /* @__PURE__ */ jsxs("div", { className: `${o} relative`, children: [
@@ -12400,7 +12377,7 @@ const DataBindingSelector = ({
         /* @__PURE__ */ jsxs("label", { htmlFor: n, className: p.type === "object" ? "pb-2" : "", children: [
           a,
           " ",
-          A && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          w && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
@@ -12551,11 +12528,11 @@ const DataBindingSelector = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: r } = useLanguages(), n = useSelectedBlock(), o = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), i = getRegisteredChaiBlock(n == null ? void 0 : n._type), l = formDataWithSelectedLang(n, r, i), [c, d] = useState(l), [u, p] = useState(!1), h = useWrapperBlock(), f = getRegisteredChaiBlock(h == null ? void 0 : h._type), m = formDataWithSelectedLang(h, r, f), g = ({ formData: B }, I, w) => {
-    I && (c == null ? void 0 : c._id) === n._id && a([n._id], { [I]: get(B, I) }, w);
+  const { selectedLang: r } = useLanguages(), n = useSelectedBlock(), o = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), i = getRegisteredChaiBlock(n == null ? void 0 : n._type), l = formDataWithSelectedLang(n, r, i), [c, d] = useState(l), [u, p] = useState(!1), h = useWrapperBlock(), f = getRegisteredChaiBlock(h == null ? void 0 : h._type), m = formDataWithSelectedLang(h, r, f), g = ({ formData: B }, I, A) => {
+    I && (c == null ? void 0 : c._id) === n._id && a([n._id], { [I]: get(B, I) }, A);
   }, b = useCallback(
-    debounce(({ formData: B }, I, w) => {
-      g({ formData: B }, I, w), d(B);
+    debounce(({ formData: B }, I, A) => {
+      g({ formData: B }, I, A), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, r]
   ), x = ({ formData: B }, I) => {
@@ -12567,20 +12544,20 @@ function BlockSettings() {
     if (!B)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: I, uiSchema: w } = getBlockFormSchemas(B);
+      const { schema: I, uiSchema: A } = getBlockFormSchemas(B);
       if (B === "Repeater") {
-        const A = get(n, "repeaterItems", "");
-        startsWith(A, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
+        const w = get(n, "repeaterItems", "");
+        startsWith(w, `{{${COLLECTION_PREFIX}`) ? (set(A, "filter", { "ui:widget": "collectionSelect" }), set(A, "sort", { "ui:widget": "collectionSelect" })) : (set(A, "filter", { "ui:widget": "hidden" }), set(A, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: I, uiSchema: w };
+      return { schema: I, uiSchema: A };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
   }, [n]), { wrapperSchema: C, wrapperUiSchema: E } = useMemo(() => {
     if (!h || !(h != null && h._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const B = h == null ? void 0 : h._type, { schema: I = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
-    return { wrapperSchema: I, wrapperUiSchema: w };
+    const B = h == null ? void 0 : h._type, { schema: I = {}, uiSchema: A = {} } = getBlockFormSchemas(B);
+    return { wrapperSchema: I, wrapperUiSchema: A };
   }, [h]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(h) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -12840,7 +12817,7 @@ const BlockStylingProps = () => {
     }
     m(T), i(T === "class" || isEmpty(v) ? "" : v);
   }, [l, u, p]);
-  const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), I = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
+  const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), I = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), A = useCallback(
     (v = !1) => {
       const T = getUserInputValues(`${a}`, p);
       if (get(T, "error", !1)) {
@@ -12858,7 +12835,7 @@ const BlockStylingProps = () => {
       v ? I(P) : B(P);
     },
     [B, I, a, f, d, p]
-  ), A = useCallback(
+  ), w = useCallback(
     (v) => {
       const T = getUserInputValues(`${a}`, p);
       if (get(T, "error", !1)) {
@@ -12896,7 +12873,7 @@ const BlockStylingProps = () => {
         {
           readOnly: f === "class",
           onKeyPress: (v) => {
-            v.key === "Enter" && w();
+            v.key === "Enter" && A();
           },
           onKeyDown: (v) => {
             if (v.keyCode !== 38 && v.keyCode !== 40)
@@ -12911,7 +12888,7 @@ const BlockStylingProps = () => {
           onKeyUp: (v) => {
             C && (v.preventDefault(), E(!1));
           },
-          onBlur: () => w(),
+          onBlur: () => A(),
           onChange: (v) => {
             b(!1), i(v.target.value);
           },
@@ -12945,7 +12922,7 @@ const BlockStylingProps = () => {
             units: p,
             current: f,
             onSelect: (v) => {
-              o(!1), m(v), A(v);
+              o(!1), m(v), w(v);
             }
           }
         ) })
@@ -13430,11 +13407,11 @@ const COLOR_PROP = {
 }, getBreakpoint = (r) => `${r.toUpperCase()} ${BREAKPOINTS[r] ? `(${BREAKPOINTS[r]} & up)` : ""}`, BlockStyle = (r) => {
   const { t: n } = useTranslation(), { type: o = "icons", label: a, property: i, onEmitChange: l = () => {
   }, units: c, negative: d = !1 } = r, [u] = useDarkMode(), [p] = useStylingState(), [, h] = useScreenSizeWidth(), f = useCurrentClassByProperty(i), m = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), x = useMemo(() => get(f, "fullCls", ""), [f]), y = useCallback(
-    (I, w = !0) => {
-      const A = { dark: u, mq: h, mod: p, cls: I, property: i, fullCls: "" };
-      (u || p !== "") && (A.mq = "xs");
-      const v = generateFullClsName(A);
-      m(b, [v], w);
+    (I, A = !0) => {
+      const w = { dark: u, mq: h, mod: p, cls: I, property: i, fullCls: "" };
+      (u || p !== "") && (w.mq = "xs");
+      const v = generateFullClsName(w);
+      m(b, [v], A);
     },
     [b, u, h, p, i, m]
   ), S = useCallback(() => {
@@ -13770,205 +13747,218 @@ function BreakpointSelector() {
     ] }) }) })
   ] });
 }
-const DesignTokensIcon = ({ className: r = "" }) => /* @__PURE__ */ jsx(FontStyleIcon, { className: r });
-function ManualClasses() {
-  var O;
-  const r = useRef(null), [n, o] = useState(""), [a, i] = useState(-1), [, l] = useRightPanel(), c = useFuseSearch(), { t: d } = useTranslation(), [u] = useSelectedStylingBlocks(), p = useSelectedBlock(), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), [g, b] = useState(""), x = useAtomValue$1(chaiDesignTokensAtom), y = (O = first$1(u)) == null ? void 0 : O.prop, { classes: S } = getSplitChaiClasses(get(p, y, "")), k = S.split(" ").filter((R) => !isEmpty(R)), C = useMemo(() => [...k].sort((R, _) => {
-    const M = R.startsWith(DESIGN_TOKEN_PREFIX), $ = _.startsWith(DESIGN_TOKEN_PREFIX);
-    return M && !$ ? -1 : !M && $ ? 1 : 0;
-  }), [k]), E = useBuilderProp("flags.copyPaste", !0), B = (R) => {
-    if (R.startsWith(DESIGN_TOKEN_PREFIX)) {
-      const _ = x[R];
-      return _ ? _.name : R;
+const DesignTokensIcon = ({ className: r = "" }) => /* @__PURE__ */ jsx(TokensIcon, { className: r });
+function ManualClasses({
+  from: r = "default",
+  classFromProps: n,
+  onAddNew: o,
+  onRemove: a
+}) {
+  var G;
+  const i = useRef(null), [l, c] = useState(""), [d, u] = useState(!1), [p, h] = useState(-1), [, f] = useRightPanel(), m = useFuseSearch(), { t: g } = useTranslation(), [b] = useSelectedStylingBlocks(), x = useSelectedBlock(), y = useAddClassesToBlocks(), S = useRemoveClassesFromBlocks(), [k] = useSelectedBlockIds(), [C, E] = useState(""), B = useAtomValue$1(chaiDesignTokensAtom), I = (G = first$1(b)) == null ? void 0 : G.prop, { classes: A } = getSplitChaiClasses(get(x, I, "")), v = (r === "default" ? A : n ?? "").split(" ").filter((_) => !isEmpty(_)), T = useMemo(() => [...v].sort((_, F) => {
+    const z = _.startsWith(DESIGN_TOKEN_PREFIX), U = F.startsWith(DESIGN_TOKEN_PREFIX);
+    return z && !U ? -1 : !z && U ? 1 : 0;
+  }), [v]), N = useBuilderProp("flags.copyPaste", !0), j = (_) => {
+    if (_.startsWith(DESIGN_TOKEN_PREFIX)) {
+      const F = B[_];
+      return F ? F.name : _;
     }
-    return R;
-  }, I = (R) => {
-    const _ = Object.entries(x).find(([M, $]) => $.name === R);
-    return _ ? `${_[0]}` : R;
-  }, w = () => {
-    const R = g.trim().replace(/ +(?= )/g, "").split(" ").map(I);
-    h(m, R, !0), b("");
-  }, [A, v] = useState([]), T = useBuilderProp("flags.designTokens", !1), N = ({ value: R }) => {
-    const _ = R.trim().toLowerCase(), M = _.match(/.+:/g);
-    let $ = [], U = [];
-    if (T && (_ === "" ? U = Object.entries(x).map(([V, z]) => ({
-      name: z.name,
-      id: `${V}`,
+    return _;
+  }, P = (_) => {
+    const F = Object.entries(B).find(([z, U]) => U.name === _);
+    return F ? `${F[0]}` : _;
+  }, L = () => {
+    const _ = C.trim().replace(/ +(?= )/g, "").split(" ").map(P);
+    r === "designToken" ? isFunction$1(o) && o(_) : y(k, _, !0), E("");
+  }, [D, $] = useState([]), M = useBuilderProp("flags.designTokens", !1), O = ({ value: _ }) => {
+    const F = _.trim().toLowerCase(), z = F.match(/.+:/g);
+    let U = [], q = [];
+    if (M && (F === "" ? q = Object.entries(B).map(([J, Y]) => ({
+      name: Y.name,
+      id: `${J}`,
       isDesignToken: !0
-    })) : U = Object.entries(x).filter(([V, z]) => z.name.toLowerCase().includes(_)).map(([V, z]) => ({
-      name: z.name,
-      id: `${V}`,
+    })) : q = Object.entries(B).filter(([J, Y]) => Y.name.toLowerCase().includes(F)).map(([J, Y]) => ({
+      name: Y.name,
+      id: `${J}`,
       isDesignToken: !0
-    }))), M && M.length > 0) {
-      const [V] = M, z = _.replace(V, "");
-      $ = c.search(z).map((K) => ({
-        ...K,
-        item: { ...K.item, name: V + K.item.name }
+    }))), z && z.length > 0) {
+      const [J] = z, Y = F.replace(J, "");
+      U = m.search(Y).map((Q) => ({
+        ...Q,
+        item: { ...Q.item, name: J + Q.item.name }
       }));
     } else
-      $ = c.search(_);
-    const W = [...U, ...map($, "item")];
-    return v(W);
-  }, j = () => {
-    v([]);
-  }, P = (R) => R.name, L = (R) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
-    R.isDesignToken && /* @__PURE__ */ jsx(DesignTokensIcon, { className: "h-4 w-4 text-gray-600" }),
-    /* @__PURE__ */ jsx("span", { children: R.name })
-  ] }), D = useMemo(
+      U = m.search(F);
+    const te = [...q, ...map(U, "item")];
+    return $(te);
+  }, H = () => {
+    $([]);
+  }, R = (_) => _.name, V = (_) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-1", children: [
+    _.isDesignToken && /* @__PURE__ */ jsx(DesignTokensIcon, { className: "h-4 w-4 text-gray-600" }),
+    /* @__PURE__ */ jsx("span", { children: _.name })
+  ] }), W = useMemo(
     () => ({
-      ref: r,
+      ref: i,
       autoComplete: "off",
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: !1,
-      placeholder: d("Enter classes separated by space"),
-      value: g,
-      onFocus: (R) => {
+      placeholder: g("Enter classes separated by space"),
+      value: C,
+      onFocus: (_) => {
         setTimeout(() => {
-          R.target && R.target.select();
+          _.target && _.target.select();
         }, 0);
       },
-      onKeyDown: (R) => {
-        if (R.key === "Enter" && g.trim() !== "" && (R.preventDefault(), w()), R.key === "Tab" && A.length > 0) {
-          R.preventDefault();
-          const _ = new KeyboardEvent("keydown", {
+      onKeyDown: (_) => {
+        if (_.key === "Enter" && C.trim() !== "" && (_.preventDefault(), L()), _.key === "Tab" && D.length > 0) {
+          _.preventDefault();
+          const F = new KeyboardEvent("keydown", {
             key: "ArrowDown",
             code: "ArrowDown",
             keyCode: 40,
             bubbles: !0
           });
-          R.target.dispatchEvent(_);
+          _.target.dispatchEvent(F);
         }
       },
-      onChange: (R, { newValue: _ }) => b(_),
-      className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
+      onChange: (_, { newValue: F }) => E(F),
+      className: `w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border ${r === "default" ? "py-1" : "py-1.5"}`
     }),
-    [g, d, r, A.length]
-  ), F = (R) => {
-    const _ = n.trim().replace(/ +(?= )/g, "").split(" ").map(I);
-    f(m, [R]), h(m, _, !0), o(""), i(-1);
-  }, H = () => {
+    [C, g, i, D.length]
+  ), K = (_) => {
+    const F = l.trim().replace(/ +(?= )/g, "").split(" ").map(P);
+    S(k, [_]), y(k, F, !0), c(""), h(-1);
+  }, Z = () => {
     if (navigator.clipboard === void 0) {
-      toast.error(d("Clipboard not supported"));
+      toast.error(g("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(k.join(" ")), toast.success(d("Classes copied to clipboard"));
+    navigator.clipboard.writeText(v.join(" ")), toast.success(g("Classes copied to clipboard")), u(!0), setTimeout(() => u(!1), 2e3);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-2 text-muted-foreground", children: [
-      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1", children: [
-        /* @__PURE__ */ jsx("span", { children: d(T ? "Styles" : "Classes") }),
-        E && /* @__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: d("Copy classes to clipboard") }) })
-        ] })
-      ] }),
-      T && /* @__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: A,
-          onSuggestionsFetchRequested: N,
-          onSuggestionsClearRequested: j,
-          getSuggestionValue: P,
-          renderSuggestion: L,
-          inputProps: D,
-          onSuggestionSelected: (R, { suggestionValue: _ }) => {
-            const M = I(_);
-            h(m, [M], !0), b("");
-          },
-          containerProps: {
-            className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
-          },
-          theme: {
-            suggestion: "bg-transparent",
-            suggestionHighlighted: "!bg-gray-300 dark:!bg-gray-800 cursor-pointer",
-            suggestionsContainerOpen: "absolute bg-background no-scrollbar z-50 max-h-[230px] overflow-y-auto w-full  border border-border rounded-md"
-          }
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outline",
-          className: "h-6 border-border",
-          onClick: w,
-          disabled: g.trim() === "",
-          size: "sm",
-          children: /* @__PURE__ */ jsx(PlusIcon, {})
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: C.map(
-      (R, _) => a === _ ? /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: r,
-          value: n,
-          onChange: (M) => o(M.target.value),
-          onBlur: () => {
-            F(R);
-          },
-          onKeyDown: (M) => {
-            M.key === "Enter" && F(R);
-          },
-          onFocus: (M) => {
-            setTimeout(() => {
-              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"
-        },
-        R
-      ) : /* @__PURE__ */ jsx("div", { className: "group relative flex max-w-[260px] items-center", children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onDoubleClick: () => {
-            b(B(R)), f(m, [R]), setTimeout(() => {
-              r.current && r.current.focus();
-            }, 10);
-          },
-          className: "flex h-max cursor-default items-center gap-x-1 truncate break-words rounded bg-gray-200 py-px pl-0.5 pr-1 text-[11px] text-gray-600 dark:bg-gray-800 dark:text-gray-300",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "z-10 flex h-full w-max items-center justify-center", children: [
-              /* @__PURE__ */ jsx(
-                Cross2Icon,
-                {
-                  onClick: () => f(m, [R], !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"
-                }
-              ),
-              R.startsWith(DESIGN_TOKEN_PREFIX) ? /* @__PURE__ */ jsx(DesignTokensIcon, { className: "text-[rgba(55, 65, 81, 0.4)] h-3.5 w-3.5 group-hover:hidden" }) : /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  className: "h-3.5 w-3.5 group-hover:hidden",
-                  fill: "rgba(55, 65, 81, 0.4)",
-                  viewBox: "0 0 24 24",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  xmlSpace: "preserve",
-                  children: [
-                    /* @__PURE__ */ jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
-                    /* @__PURE__ */ jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
-                    /* @__PURE__ */ jsx("g", { id: "SVGRepo_iconCarrier", children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        fillRule: "evenodd",
-                        clipRule: "evenodd",
-                        d: "M12 6.036c-2.667 0-4.333 1.325-5 3.976 1-1.325 2.167-1.822 3.5-1.491.761.189 1.305.738 1.906 1.345C13.387 10.855 14.522 12 17 12c2.667 0 4.333-1.325 5-3.976-1 1.325-2.166 1.822-3.5 1.491-.761-.189-1.305-.738-1.907-1.345-.98-.99-2.114-2.134-4.593-2.134zM7 12c-2.667 0-4.333 1.325-5 3.976 1-1.326 2.167-1.822 3.5-1.491.761.189 1.305.738 1.907 1.345.98.989 2.115 2.134 4.594 2.134 2.667 0 4.333-1.325 5-3.976-1 1.325-2.167 1.822-3.5 1.491-.761-.189-1.305-.738-1.906-1.345C10.613 13.145 9.478 12 7 12z"
-                      }
-                    ) })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { children: B(R) })
-          ]
-        }
-      ) }, R)
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex w-full flex-col gap-y-1.5 pb-4 ${r === "designToken" ? "border-none" : "border-b border-border"}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ jsx("span", { children: r === "designToken" ? /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium leading-tight text-gray-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: g("Token Classes") }) : g(M ? "Styles" : "Classes") }),
+            N && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: d ? /* @__PURE__ */ jsx(CheckIcon, { className: "rounded-full border border-green-500 bg-green-500/10 text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, { onClick: Z, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: g("Copy classes to clipboard") }) })
+            ] })
+          ] }),
+          M && r === "default" && /* @__PURE__ */ jsx(Button, { variant: "link", className: "underline", onClick: () => f("design-tokens"), children: g("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: D,
+              onSuggestionsFetchRequested: O,
+              onSuggestionsClearRequested: H,
+              getSuggestionValue: R,
+              renderSuggestion: V,
+              inputProps: W,
+              onSuggestionSelected: (_, { suggestionValue: F }) => {
+                const U = [P(F)];
+                r === "designToken" ? isFunction$1(o) && o(U) : y(k, U, !0), E("");
+              },
+              containerProps: {
+                className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
+              },
+              theme: {
+                suggestion: "bg-transparent",
+                suggestionHighlighted: "!bg-gray-300 dark:!bg-gray-800 cursor-pointer",
+                suggestionsContainerOpen: "absolute bg-background no-scrollbar z-50 max-h-[230px] overflow-y-auto w-full  border border-border rounded-md"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: `border-border ${r === "default" ? "h-6" : "mt-1 h-7"}`,
+              onClick: L,
+              disabled: C.trim() === "",
+              size: "sm",
+              children: /* @__PURE__ */ jsx(PlusIcon, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: T.map(
+          (_, F) => p === F ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: i,
+              value: l,
+              onChange: (z) => c(z.target.value),
+              onBlur: () => {
+                K(_);
+              },
+              onKeyDown: (z) => {
+                z.key === "Enter" && K(_);
+              },
+              onFocus: (z) => {
+                setTimeout(() => {
+                  z.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"
+            },
+            _
+          ) : /* @__PURE__ */ jsx("div", { className: "group relative flex max-w-[260px] items-center", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onDoubleClick: () => {
+                E(j(_)), r === "default" ? S(k, [_]) : (isFunction$1(a) && a(_), E(_)), setTimeout(() => {
+                  i.current && i.current.focus();
+                }, 10);
+              },
+              className: "flex h-max cursor-default items-center gap-x-1 truncate break-words rounded bg-gray-200 py-px pl-0.5 pr-1 text-[11px] text-gray-600 dark:bg-gray-800 dark:text-gray-300",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "z-10 flex h-full w-max items-center justify-center", children: [
+                  /* @__PURE__ */ jsx(
+                    Cross2Icon,
+                    {
+                      onClick: () => {
+                        r === "default" ? S(k, [_]) : isFunction$1(a) && a(_);
+                      },
+                      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"
+                    }
+                  ),
+                  _.startsWith(DESIGN_TOKEN_PREFIX) ? /* @__PURE__ */ jsx(DesignTokensIcon, { className: "text-[rgba(55, 65, 81, 0.4)] h-3.5 w-3.5 group-hover:hidden" }) : /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      className: "h-3.5 w-3.5 group-hover:hidden",
+                      fill: "rgba(55, 65, 81, 0.4)",
+                      viewBox: "0 0 24 24",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      xmlSpace: "preserve",
+                      children: [
+                        /* @__PURE__ */ jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
+                        /* @__PURE__ */ jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
+                        /* @__PURE__ */ jsx("g", { id: "SVGRepo_iconCarrier", children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            fillRule: "evenodd",
+                            clipRule: "evenodd",
+                            d: "M12 6.036c-2.667 0-4.333 1.325-5 3.976 1-1.325 2.167-1.822 3.5-1.491.761.189 1.305.738 1.906 1.345C13.387 10.855 14.522 12 17 12c2.667 0 4.333-1.325 5-3.976-1 1.325-2.166 1.822-3.5 1.491-.761-.189-1.305-.738-1.907-1.345-.98-.99-2.114-2.134-4.593-2.134zM7 12c-2.667 0-4.333 1.325-5 3.976 1-1.326 2.167-1.822 3.5-1.491.761.189 1.305.738 1.907 1.345.98.989 2.115 2.134 4.594 2.134 2.667 0 4.333-1.325 5-3.976-1 1.325-2.167 1.822-3.5 1.491-.761-.189-1.305-.738-1.906-1.345C10.613 13.145 9.478 12 7 12z"
+                          }
+                        ) })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: j(_) })
+              ]
+            }
+          ) }, _)
+        ) })
+      ]
+    }
+  );
 }
 const BASIC_UNITS = ["px", "%", "em", "rem", "ch", "vh", "vw"], FLEX_CHILD_SECTION = {
   heading: "flex.heading",
@@ -14440,11 +14430,11 @@ const BlockCard = ({
     const N = (j = I.current) == null ? void 0 : j.querySelector("[data-radix-scroll-area-viewport]");
     N && N.scrollTo({ top: 0, behavior: "smooth" });
   }, [c, S]);
-  const w = (N) => {
+  const A = (N) => {
     E.current && (clearTimeout(E.current), E.current = null), E.current = setTimeout(() => {
       E.current && k(N);
     }, 400);
-  }, A = () => {
+  }, w = () => {
     c != null && c.id && p(c.id);
   };
   if (u)
@@ -14471,7 +14461,7 @@ const BlockCard = ({
                   className: `no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto ${o ? "" : "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: h ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
                     /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("Failed to load the UI library. Try again") }),
-                    /* @__PURE__ */ jsxs(Button, { onClick: A, variant: "outline", size: "sm", className: "gap-2", children: [
+                    /* @__PURE__ */ jsxs(Button, { onClick: w, variant: "outline", size: "sm", className: "gap-2", children: [
                       /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
                       B("Retry")
                     ] })
@@ -14481,7 +14471,7 @@ const BlockCard = ({
                   ] }) : map(y, (N, j) => /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      onMouseEnter: () => w(j),
+                      onMouseEnter: () => A(j),
                       onMouseLeave: () => clearTimeout(E.current),
                       role: "button",
                       onClick: () => k(j),
@@ -14669,19 +14659,19 @@ const BlockCard = ({
       }
     ) : n,
     [n, u]
-  ), w = useMemo(
+  ), A = useMemo(
     () => u ? r.filter(
       (j) => reject(filter(values(I), { group: j }), { hidden: !0 }).length > 0
     ) : r.filter((j) => reject(filter(values(n), { group: j }), { hidden: !0 }).length > 0),
     [n, I, r, u]
-  ), A = useMemo(
-    () => sortBy(w, (j) => CORE_GROUPS.indexOf(j) === -1 ? 99 : CORE_GROUPS.indexOf(j)),
-    [w]
-  ), v = useMemo(() => g === "all" ? I : filter(values(I), { group: g }), [I, g]), T = useMemo(() => g === "all" ? A : [g], [A, g]);
+  ), w = useMemo(
+    () => sortBy(A, (j) => CORE_GROUPS.indexOf(j) === -1 ? 99 : CORE_GROUPS.indexOf(j)),
+    [A]
+  ), v = useMemo(() => g === "all" ? I : filter(values(I), { group: g }), [I, g]), T = useMemo(() => g === "all" ? w : [g], [w, g]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: u, setValue: p }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden pt-2", children: [
-      !l && A.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 && w.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",
           {
@@ -14693,7 +14683,7 @@ const BlockCard = ({
           },
           "sidebar-all"
         ),
-        A.map((j) => /* @__PURE__ */ jsx(
+        w.map((j) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => B(j),
@@ -14708,8 +14698,8 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `h-full flex-1 overflow-hidden ${!l && A.length > 0 ? "w-3/4" : "w-full"}`,
-          children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: w.length === 0 && u ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+          className: `h-full flex-1 overflow-hidden ${!l && w.length > 0 ? "w-3/4" : "w-full"}`,
+          children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar h-full", children: A.length === 0 && u ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
             c("No blocks found matching"),
             ' "',
             u,
@@ -15201,38 +15191,38 @@ const useStructureValidation = () => {
   var n;
   return r != null && r._name ? r._name : (r == null ? void 0 : r._type) === "Box" && (r != null && r.tag) && (r == null ? void 0 : r.tag) !== "div" ? startCase(r.tag) : ((n = r == null ? void 0 : r._type) == null ? void 0 : n.split("/").pop()) || "";
 }, truncateText = (r, n) => r.length > n ? r.substring(0, n) + "..." : r, Node$1 = memo(({ node: r, style: n, dragHandle: o }) => {
-  var R;
+  var H;
   const { t: a } = useTranslation(), i = useUpdateBlocksProps(), [l] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let d = null;
-  const u = r.children.length > 0, { highlightBlock: p, clearHighlight: h } = useBlockHighlight(), f = useIsDragAndDropEnabled(), { id: m, data: g, isSelected: b, willReceiveDrop: x, isDragging: y, isEditing: S, handleClick: k } = r, C = useStructureValidation(), E = useMemo(() => C.getBlockErrors(m), [C, m]), B = get(g, "_show", !0), I = (_) => {
-    _.stopPropagation(), B && r.toggle();
-  }, w = (_) => {
-    _.isInternal && (d = _.isOpen, _.isOpen && _.close());
-  }, A = (_) => {
-    _.isInternal && d !== null && (d ? _.open() : _.close(), d = null);
+  const u = r.children.length > 0, { highlightBlock: p, clearHighlight: h } = useBlockHighlight(), f = useIsDragAndDropEnabled(), { id: m, data: g, isSelected: b, willReceiveDrop: x, isDragging: y, isEditing: S, handleClick: k } = r, C = useStructureValidation(), E = useMemo(() => C.getBlockErrors(m), [C, m]), B = get(g, "_show", !0), I = (R) => {
+    R.stopPropagation(), B && r.toggle();
+  }, A = (R) => {
+    R.isInternal && (d = R.isOpen, R.isOpen && R.close());
+  }, w = (R) => {
+    R.isInternal && d !== null && (d ? R.open() : R.close(), d = null);
   }, [v, T] = useAtom$1(currentAddSelection), N = () => {
-    var _;
-    j(), r.parent.isSelected || T((_ = r == null ? void 0 : r.parent) == null ? void 0 : _.id);
+    var R;
+    j(), r.parent.isSelected || T((R = r == null ? void 0 : r.parent) == null ? void 0 : R.id);
   }, j = () => {
     T(null);
-  }, P = (_) => {
-    j(), _.stopPropagation(), !r.isOpen && B && r.toggle(), k(_);
+  }, P = (R) => {
+    j(), R.stopPropagation(), !r.isOpen && B && r.toggle(), k(R);
   };
   useEffect(() => {
-    const _ = setTimeout(() => {
+    const R = setTimeout(() => {
       x && !r.isOpen && !y && B && r.toggle();
     }, 500);
-    return () => clearTimeout(_);
+    return () => clearTimeout(R);
   }, [x, r, y]);
-  const L = (_, M) => {
-    const $ = l.contentDocument || l.contentWindow.document, U = $.querySelector(`[data-block-id=${_}]`);
-    U && U.setAttribute("data-drop", M);
-    const W = U.getBoundingClientRect(), V = l.getBoundingClientRect();
-    W.top >= V.top && W.left >= V.left && W.bottom <= V.bottom && W.right <= V.right || ($.documentElement.scrollTop = U.offsetTop - V.top);
-  }, D = (_) => {
+  const L = (R, V) => {
+    const W = l.contentDocument || l.contentWindow.document, K = W.querySelector(`[data-block-id=${R}]`);
+    K && K.setAttribute("data-drop", V);
+    const Z = K.getBoundingClientRect(), G = l.getBoundingClientRect();
+    Z.top >= G.top && Z.left >= G.left && Z.bottom <= G.bottom && Z.right <= G.right || (W.documentElement.scrollTop = K.offsetTop - G.top);
+  }, D = (R) => {
     j();
-    const M = get(r, "parent.id");
-    M !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: M, position: _ }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: _ });
+    const V = get(r, "parent.id");
+    V !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: V, position: R }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: R });
   };
   if (m === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 w-full cursor-pointer", children: [
@@ -15252,7 +15242,7 @@ const useStructureValidation = () => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const { librarySite: F } = useBuilderProp("flags", { librarySite: !1 }), H = useMemo(() => F && has(g, "_libBlockId") && !isEmpty(g._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [g, c, F]), O = useMemo(() => (g == null ? void 0 : g._type) === "PartialBlock" || (g == null ? void 0 : g._type) === "GlobalBlock", [g]);
+  const { librarySite: $ } = useBuilderProp("flags", { librarySite: !1 }), M = useMemo(() => $ && has(g, "_libBlockId") && !isEmpty(g._libBlockId) && (c(PERMISSIONS.CREATE_LIBRARY_BLOCK) || c(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [g, c, $]), O = useMemo(() => (g == null ? void 0 : g._type) === "PartialBlock" || (g == null ? void 0 : g._type) === "GlobalBlock", [g]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -15262,23 +15252,23 @@ const useStructureValidation = () => {
       style: n,
       "data-node-id": m,
       ref: o,
-      onDragStart: () => w(r),
-      onDragEnd: () => A(r),
-      onDragOver: (_) => {
-        _.preventDefault(), L(m, "yes");
+      onDragStart: () => A(r),
+      onDragEnd: () => w(r),
+      onDragOver: (R) => {
+        R.preventDefault(), L(m, "yes");
       },
-      onDragLeave: (_) => {
-        _.preventDefault(), L(m, "no");
+      onDragLeave: (R) => {
+        R.preventDefault(), L(m, "no");
       },
-      onDrop: (_) => {
-        _.preventDefault(), L(m, "no");
+      onDrop: (R) => {
+        R.preventDefault(), L(m, "no");
       },
       children: [
-        c(PERMISSIONS.ADD_BLOCK) && !f && (r == null ? void 0 : r.rowIndex) > 0 && (r.parent.isOpen && canAddChildBlock(get(r, "parent.data._type")) || ((R = r == null ? void 0 : r.parent) == null ? void 0 : R.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) && !f && (r == null ? void 0 : r.rowIndex) > 0 && (r.parent.isOpen && canAddChildBlock(get(r, "parent.data._type")) || ((H = r == null ? void 0 : r.parent) == null ? void 0 : H.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
-            onClick: (_) => {
-              _.stopPropagation(), D(r.childIndex);
+            onClick: (R) => {
+              R.stopPropagation(), D(r.childIndex);
             },
             onMouseEnter: N,
             onMouseLeave: j,
@@ -15296,7 +15286,7 @@ const useStructureValidation = () => {
               (r == null ? void 0 : r.id) === v ? "bg-primary/10" : "",
               y && "opacity-20",
               B ? "" : "line-through opacity-50",
-              H && b && "bg-primary/20 text-primary"
+              M && b && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -15312,8 +15302,8 @@ const useStructureValidation = () => {
                   {
                     className: cn(
                       "leading-1 flex items-center",
-                      H && "text-orange-600/90",
-                      H && b && "text-orange-800",
+                      M && "text-orange-600/90",
+                      M && b && "text-orange-800",
                       O && "text-purple-600/90",
                       O && b && "text-purple-800"
                     ),
@@ -15323,8 +15313,8 @@ const useStructureValidation = () => {
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                          onDoubleClick: (_) => {
-                            _.stopPropagation(), r.edit(), r.deselect();
+                          onDoubleClick: (R) => {
+                            R.stopPropagation(), r.edit(), r.deselect();
                           },
                           children: /* @__PURE__ */ jsx("span", { title: getBlockDisplayName(g).length > 17 ? getBlockDisplayName(g) : "", children: truncateText(getBlockDisplayName(g), 17) })
                         }
@@ -15350,8 +15340,8 @@ const useStructureValidation = () => {
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (_) => {
-                        _.stopPropagation(), i([m], { _show: !B }), r.isOpen && r.toggle();
+                      onClick: (R) => {
+                        R.stopPropagation(), i([m], { _show: !B }), r.isOpen && r.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent p-0.5 hover:bg-primary/10",
                       asChild: !0,
@@ -15804,13 +15794,13 @@ const useStructureValidation = () => {
     }
 }, ThemeConfigPanel = React.memo(({ className: r = "" }) => {
   const [n, o] = useDarkMode(), [a, i] = React.useState(""), [l, c] = React.useState(!1), d = useBuilderProp("themePresets", []), u = useBuilderProp("themePanelComponent", null), { hasPermission: p } = usePermissions(), h = useBuilderProp("flags.importTheme", !0), f = useBuilderProp("flags.darkMode", !0), m = useIncrementActionsCount();
-  (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((A) => {
-    d.push(A);
+  (!d || d.length === 0) && DEFAULT_THEME_PRESET.map((w) => {
+    d.push(w);
   });
   const [g, b] = useTheme(), x = useThemeOptions(), { t: y } = useTranslation(), S = React.useCallback(
-    (A) => {
+    (w) => {
       const v = { ...g };
-      setPreviousTheme(v), b(A), m(), toast.success("Theme updated", {
+      setPreviousTheme(v), b(w), m(), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
@@ -15826,50 +15816,50 @@ const useStructureValidation = () => {
     },
     [g, b, m]
   ), k = () => {
-    const A = d.find((v) => Object.keys(v)[0] === a);
-    if (A) {
-      const v = Object.values(A)[0];
+    const w = d.find((v) => Object.keys(v)[0] === a);
+    if (w) {
+      const v = Object.values(w)[0];
       v && typeof v == "object" && "fontFamily" in v && "borderRadius" in v && "colors" in v ? (S(v), i(""), m()) : console.error("Invalid preset structure:", v);
     } else
       console.error("Preset not found:", a);
-  }, C = (A) => {
-    S(A), i(""), m();
+  }, C = (w) => {
+    S(w), i(""), m();
   }, E = useDebouncedCallback(
-    (A, v) => {
+    (w, v) => {
       b(() => ({
         ...g,
         fontFamily: {
           ...g.fontFamily,
-          [A.replace(/font-/g, "")]: v
+          [w.replace(/font-/g, "")]: v
         }
       })), m();
     },
     [g, m],
     200
   ), B = React.useCallback(
-    (A) => {
+    (w) => {
       b(() => ({
         ...g,
-        borderRadius: `${A}px`
+        borderRadius: `${w}px`
       })), m();
     },
     [g, m]
   ), I = useDebouncedCallback(
-    (A, v) => {
+    (w, v) => {
       b(() => {
-        const T = get(g, `colors.${A}`);
+        const T = get(g, `colors.${w}`);
         return n ? set(T, 1, v) : set(T, 0, v), m(), {
           ...g,
           colors: {
             ...g.colors,
-            [A]: T
+            [w]: T
           }
         };
       });
     },
     [g, m],
     200
-  ), w = (A) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(A.items).map(([v]) => {
+  ), A = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([v]) => {
     const T = get(g, `colors.${v}.${n ? 1 : 0}`);
     return T ? /* @__PURE__ */ jsxs("div", { id: `theme-${v}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
@@ -15895,8 +15885,8 @@ 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((A) => {
-              const v = Object.keys(A)[0], T = v.replaceAll("_", " ");
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((w) => {
+              const v = Object.keys(w)[0], T = v.replaceAll("_", " ");
               return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(T) }, v);
             }) })
           ] }) }),
@@ -15909,14 +15899,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") })
         ] }),
-        (x == null ? void 0 : x.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(x.fontFamily).map(([A, v]) => /* @__PURE__ */ jsx(
+        (x == null ? void 0 : x.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(x.fontFamily).map(([w, v]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: A,
-            value: g.fontFamily[A.replace(/font-/g, "")] || v[Object.keys(v)[0]],
-            onChange: (T) => E(A, T)
+            label: w,
+            value: g.fontFamily[w.replace(/font-/g, "")] || v[Object.keys(v)[0]],
+            onChange: (T) => E(w, T)
           },
-          A
+          w
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (x == null ? void 0 : x.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -15942,7 +15932,7 @@ const useStructureValidation = () => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (A) => o(A),
+                  onCheckedChange: (w) => o(w),
                   "aria-label": y("Toggle dark mode"),
                   className: "mx-1"
                 }
@@ -15950,7 +15940,7 @@ const useStructureValidation = () => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: x.colors.map((A) => w(A)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: x.colors.map((w) => A(w)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: y("Loading...") }), children: l && h && /* @__PURE__ */ jsx(
           LazyCssImportModal,
@@ -16706,30 +16696,30 @@ const UndoRedo = () => {
       return;
     }
     if (l) {
-      const w = [...a, { key: l, value: d }];
-      o(w), i(a), c(""), u(""), m("");
+      const A = [...a, { key: l, value: d }];
+      o(A), i(a), c(""), u(""), m("");
     }
-  }, k = (w) => {
-    const A = a.filter((v, T) => T !== w);
-    o(A), i(A);
-  }, C = (w) => {
-    h(w), c(a[w].key), u(a[w].value);
+  }, k = (A) => {
+    const w = a.filter((v, T) => T !== A);
+    o(w), i(w);
+  }, C = (A) => {
+    h(A), c(a[A].key), u(a[A].value);
   }, E = () => {
     if (l.startsWith("@")) {
       m(y("Attribute keys cannot start with @"));
       return;
     }
     if (p !== null && l) {
-      const w = [...a];
-      w[p] = { key: l, value: d }, o(w), i(w), h(null), c(""), u(""), m("");
+      const A = [...a];
+      A[p] = { key: l, value: d }, o(A), i(A), h(null), c(""), u(""), m("");
     }
-  }, B = (w) => {
-    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), p !== null ? E() : S());
-  }, I = useCallback((w) => {
-    const A = (N) => /[.,!?;:]/.test(N), v = (N, j, P) => {
+  }, B = (A) => {
+    A.key === "Enter" && !A.shiftKey && (A.preventDefault(), p !== null ? E() : S());
+  }, I = useCallback((A) => {
+    const w = (N) => /[.,!?;:]/.test(N), v = (N, j, P) => {
       let L = "", D = "";
-      const F = j > 0 ? N[j - 1] : "", H = j < N.length ? N[j] : "";
-      return j > 0 && (F === "." || !A(F) && F !== " ") && (L = " "), j < N.length && !A(H) && H !== " " && (D = " "), {
+      const $ = j > 0 ? N[j - 1] : "", M = j < N.length ? N[j] : "";
+      return j > 0 && ($ === "." || !w($) && $ !== " ") && (L = " "), j < N.length && !w(M) && M !== " " && (D = " "), {
         text: L + P + D,
         prefixLength: L.length,
         suffixLength: D.length
@@ -16738,20 +16728,20 @@ const UndoRedo = () => {
     if (T) {
       const N = T.selectionStart || 0, j = T.value || "", P = T.selectionEnd || N;
       if (P > N) {
-        const O = `{{${w}}}`, { text: R } = v(j, N, O), _ = j.slice(0, N) + R + j.slice(P);
-        u(_);
+        const O = `{{${A}}}`, { text: H } = v(j, N, O), R = j.slice(0, N) + H + j.slice(P);
+        u(R);
         return;
       }
-      const D = `{{${w}}}`, { text: F } = v(j, N, D), H = j.slice(0, N) + F + j.slice(N);
-      u(H);
+      const D = `{{${A}}}`, { text: $ } = v(j, N, D), M = j.slice(0, N) + $ + j.slice(N);
+      u(M);
     }
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (w) => {
-          w.preventDefault(), p !== null ? E() : S();
+        onSubmit: (A) => {
+          A.preventDefault(), p !== null ? E() : S();
         },
         className: "space-y-3",
         children: [
@@ -16767,7 +16757,7 @@ const UndoRedo = () => {
                   id: "attrKey",
                   ref: g,
                   value: l,
-                  onChange: (w) => c(w.target.value),
+                  onChange: (A) => c(A.target.value),
                   placeholder: y("Enter key"),
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -16787,7 +16777,7 @@ const UndoRedo = () => {
                   id: "attrValue",
                   ref: b,
                   value: d,
-                  onChange: (w) => u(w.target.value),
+                  onChange: (A) => u(A.target.value),
                   onKeyDown: B,
                   placeholder: y("Enter value"),
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -16800,16 +16790,16 @@ const UndoRedo = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((w, A) => /* @__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((A, w) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: w.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: w.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: A.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: A.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: () => C(A), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(A), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => C(w), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(w), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
-    ] }, A)) })
+    ] }, w)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const r = useSelectedBlock(), [n, o] = useState([]), [a] = useSelectedStylingBlocks(), i = useUpdateBlocksProps(), l = `${get(a, "0.prop")}_attrs`;
@@ -16951,336 +16941,7 @@ const PartialWrapper = ({ partialBlockId: r }) => {
   component: DefaultTopBar
 }, registerChaiTopBar = (r) => {
   TOP_BAR.component = r;
-}, useTopBarComponent = () => useMemo(() => TOP_BAR.component, []), TokenUsageSection = ({ title: r, items: n, emptyLabel: o, 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: r }),
-  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-1 text-left text-xs transition",
-        "hover:border-muted-foreground/20 hover:bg-muted/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
-        l.isSelected && "border-primary/40 bg-primary/10 text-primary"
-      ),
-      children: /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-2", children: [
-        i && i,
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: l.label })
-      ] })
-    },
-    l.id
-  )) }) : /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-muted px-3 py-1 text-xs text-muted-foreground", children: o })
-] }), STYLES_PREFIX = "#styles:", getBlockLabel = (r) => {
-  const o = [
-    typeof r._name == "string" ? r._name : void 0,
-    typeof r._type == "string" ? r._type : void 0
-  ].filter(Boolean).find((a) => a.trim().length > 0);
-  return o ? o.length > 40 ? `${o.slice(0, 37)}...` : o : r._id;
-}, collectTokenUsageOnPage = (r, n) => {
-  const o = `${n}`;
-  return r.filter((a) => Object.values(a).some((i) => typeof i != "string" || !i.startsWith(STYLES_PREFIX) ? !1 : i.includes(o))).map((a) => ({
-    id: a._id,
-    label: getBlockLabel(a)
-  }));
-}, TokenUsagePopover = ({ tokenId: r, tokenName: n }) => {
-  const { t: o } = useTranslation(), [a] = useBlocksStore(), [i, l] = useSelectedBlockIds(), c = useBuilderProp("pageId"), d = useBuilderProp("siteWideUsage"), u = useMemo(() => collectTokenUsageOnPage(a, r), [a, r]), p = useMemo(
-    () => u.map((C) => ({
-      id: C.id,
-      label: C.label,
-      isSelected: i.includes(C.id)
-    })),
-    [u, i]
-  ), h = useMemo(() => d ? Object.entries(d).reduce(
-    (C, [E, B]) => (E === c || !(B != null && B.designTokens) || !Object.keys(B.designTokens).some((w) => typeof w != "string" ? !1 : w === r) || C.push({ id: E, name: B.name || E, isPartial: !!B.isPartial }), C),
-    []
-  ) : [], [d, n, r, c]), f = useMemo(
-    () => h.filter((C) => !C.isPartial).map((C) => ({
-      id: C.id,
-      label: C.name
-    })),
-    [h]
-  ), m = useMemo(
-    () => h.filter((C) => C.isPartial).map((C) => ({
-      id: C.id,
-      label: C.name
-    })),
-    [h]
-  ), g = useCallback(
-    (C) => {
-      l([C]);
-    },
-    [l]
-  ), b = useBuilderProp("gotoPage", noop), { selectedLang: x, fallbackLang: y } = useLanguages(), { savePageAsync: S } = useSavePage(), k = async (C) => {
-    C && (await S(!0), b({ pageId: C, lang: x || y }));
-  };
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-3 w-3" }) }) }),
-    /* @__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: o("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: o("Blocks affected on this page"),
-            items: p,
-            emptyLabel: o("None"),
-            onSelect: g,
-            icon: /* @__PURE__ */ jsx(ArrowRightIcon, { fontSize: 4 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TokenUsageSection,
-          {
-            title: o("Blocks affected on other pages"),
-            items: f,
-            emptyLabel: o("None"),
-            onSelect: k,
-            icon: /* @__PURE__ */ jsx(FileIcon, { fontSize: 8 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TokenUsageSection,
-          {
-            title: o("Blocks affected on partial blocks"),
-            items: m,
-            emptyLabel: o("None"),
-            onSelect: k,
-            icon: /* @__PURE__ */ jsx(GlobeIcon, { fontSize: 8 })
-          }
-        )
-      ] })
-    ] })
-  ] });
-}, ManageDesignTokens = ({}) => {
-  const { t: r } = useTranslation(), [n, o] = useAtom$1(chaiDesignTokensAtom), [a, i] = useState(!1), [l, c] = useState(null), [d, u] = useState(!1), [p, h] = useState(!1), [f, m] = useState(""), [g, b] = useState(""), [x, y] = useState(""), [S, k] = useState(""), [C, E] = useState(""), [B, I] = useState(""), w = useIncrementActionsCount(), A = (R) => {
-    const _ = R.trim();
-    return _.length === 0 || _.length > 25 ? !1 : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(_);
-  }, v = (R, _ = !1, M) => {
-    const $ = R.trim();
-    return $.length === 0 ? "" : $.length > 25 ? r("Token name must be 25 characters or less") : /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test($) ? Object.entries(n).find(
-      ([V, z]) => z.name === $ && (!_ || V !== M)
-    ) ? r("Token name already exists") : "" : r("Only alphanumeric characters and hyphens allowed");
-  }, T = () => {
-    if (!f.trim() || !g.trim()) {
-      toast.error(r("Please fill in both token name and classes"));
-      return;
-    }
-    if (!A(f)) {
-      toast.error(r("Invalid design token name format"));
-      return;
-    }
-    if (Object.values(n).find(($) => $.name === f.trim())) {
-      toast.error(r("Token already exists"));
-      return;
-    }
-    const _ = `${DESIGN_TOKEN_PREFIX}${nanoid(12)}`, M = {
-      ...n,
-      [_]: {
-        name: f.trim(),
-        value: g.trim()
-      }
-    };
-    o(M), m(""), b(""), i(!1), u(!1), w(), toast.success(r("Token added successfully"));
-  }, N = () => {
-    if (!x.trim() || !S.trim()) {
-      toast.error(r("Please fill in both token name and classes"));
-      return;
-    }
-    if (!A(x)) {
-      toast.error(r("Invalid design token name format"));
-      return;
-    }
-    if (Object.entries(n).find(
-      ([M, $]) => $.name === x.trim() && M !== l
-    )) {
-      toast.error(r("Token already exists"));
-      return;
-    }
-    if (!l)
-      return;
-    const _ = {
-      ...n,
-      [l]: {
-        name: x.trim(),
-        value: S.trim()
-      }
-    };
-    o(_), c(null), y(""), k(""), h(!1), w(), toast.success(r("Token updated successfully"));
-  }, j = (R) => {
-    const _ = { ...n };
-    delete _[R], o(_), w(), toast.success(r("Token deleted successfully"));
-  }, P = (R) => {
-    const _ = n[R];
-    _ && (c(R), y(_.name), k(_.value), i(!1), h(!0));
-  }, L = () => {
-    i(!0), c(null), m(""), b(""), E(""), u(!0);
-  }, D = () => {
-    c(null), y(""), k(""), I(""), h(!1);
-  }, F = () => {
-    i(!1), m(""), b(""), E(""), u(!1);
-  }, H = (R) => {
-    const _ = R.replace(/\s+/g, "-");
-    m(_), E(v(_));
-  }, O = (R) => {
-    const _ = R.replace(/\s+/g, "-");
-    y(_), I(v(_, !0, l || void 0));
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "outline",
-        onClick: L,
-        disabled: a || l !== null,
-        size: "sm",
-        className: "h-7 text-xs",
-        children: [
-          /* @__PURE__ */ jsx(PlusIcon, { className: "mr-1 h-3 w-3" }),
-          r("Add")
-        ]
-      }
-    ) }) }),
-    /* @__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: r("No design tokens defined") })
-    ] }) : Object.entries(n).map(([R, _]) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `group flex items-center justify-between hover:bg-muted/90 ${l === R ? "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: _.name }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center opacity-0 group-hover:opacity-100", children: [
-            /* @__PURE__ */ jsx(TokenUsagePopover, { tokenId: R, tokenName: _.name }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                onClick: () => P(R),
-                disabled: a || l !== null,
-                className: "h-6 w-6 p-0",
-                children: /* @__PURE__ */ jsx(Pencil1Icon, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ jsxs(AlertDialog, { children: [
-              /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  disabled: a || l !== null,
-                  className: "h-6 w-6 p-0",
-                  children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-3 w-3 text-destructive" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(AlertDialogContent, { className: "max-w-md", children: [
-                /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-                  /* @__PURE__ */ jsx(AlertDialogTitle, { className: "text-base", children: r("Delete Token") }),
-                  /* @__PURE__ */ jsxs(AlertDialogDescription, { className: "text-sm", children: [
-                    r("Delete this token?"),
-                    /* @__PURE__ */ jsx("br", {}),
-                    /* @__PURE__ */ jsx("code", { className: "mt-1 inline-block rounded bg-muted px-1 py-0.5 font-mono text-xs", children: _.name })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-                  /* @__PURE__ */ jsx(AlertDialogCancel, { className: "h-7 text-xs", children: r("Cancel") }),
-                  /* @__PURE__ */ jsx(
-                    AlertDialogAction,
-                    {
-                      onClick: () => j(R),
-                      className: "h-7 bg-destructive text-xs text-destructive-foreground hover:bg-destructive/90",
-                      children: r("Delete")
-                    }
-                  )
-                ] })
-              ] })
-            ] })
-          ] })
-        ]
-      },
-      R
-    )) }) }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: d, onOpenChange: F, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: r("Add Design Token") }),
-        /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm", children: r("Create a new reusable design token with Tailwind classes.") })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "new-selector", className: "text-sm", children: r("Token Name") }),
-          /* @__PURE__ */ jsx(
-            Input$1,
-            {
-              id: "new-selector",
-              placeholder: "Button-Primary",
-              value: f,
-              onChange: (R) => H(R.target.value),
-              className: "text-sm"
-            }
-          ),
-          C ? /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: C }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: r("Button-Primary, Card-Header, Text-Large") })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "new-classes", className: "text-sm", children: r("Tailwind Classes") }),
-          /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              id: "new-classes",
-              placeholder: "bg-blue-500 text-white px-4 py-2",
-              value: g,
-              onChange: (R) => b(R.target.value),
-              className: "min-h-[80px] resize-none font-mono text-xs"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: F, className: "h-8 text-sm", children: r("Cancel") }),
-        /* @__PURE__ */ jsx(Button, { onClick: T, className: "h-8 text-sm", children: r("Add Token") })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: p, onOpenChange: D, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: r("Edit Design Token") }),
-        /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm", children: r("Update the design token name and classes.") })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-selector", className: "text-sm", children: r("Token Name") }),
-          /* @__PURE__ */ jsx(
-            Input$1,
-            {
-              id: "edit-selector",
-              value: x,
-              onChange: (R) => O(R.target.value),
-              className: "text-sm"
-            }
-          ),
-          B && /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: B })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "edit-classes", className: "text-sm", children: r("Classes") }),
-          /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              id: "edit-classes",
-              value: S,
-              onChange: (R) => k(R.target.value),
-              className: "min-h-[80px] resize-none font-mono text-xs"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: D, className: "h-8 text-sm", children: r("Cancel") }),
-        /* @__PURE__ */ jsx(Button, { onClick: N, className: "h-8 text-sm", children: r("Update Token") })
-      ] })
-    ] }) })
-  ] });
-}, DEFAULT_PANEL_WIDTH = 280, OutlineButton = ({ isActive: r, show: n }) => /* @__PURE__ */ jsx(Button, { variant: r ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(StackIcon, { className: "h-5 w-5" }) }), AddBlocksButton = ({ isActive: r, show: n }) => useIsDragAndDropEnabled() && /* @__PURE__ */ jsx(Button, { variant: r ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(PlusCircledIcon, { className: "h-5 w-5" }) }), AskAiButton = ({ isActive: r, show: n }) => /* @__PURE__ */ jsx(Button, { variant: r ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(AiIcon, {}) });
+}, useTopBarComponent = () => useMemo(() => TOP_BAR.component, []), ManageDesignTokens = React__default.lazy(() => import("./manage-design-tokens-BHCCrWFS.js")), DEFAULT_PANEL_WIDTH = 280, OutlineButton = ({ isActive: r, show: n }) => /* @__PURE__ */ jsx(Button, { variant: r ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(StackIcon, { className: "h-5 w-5" }) }), AddBlocksButton = ({ isActive: r, show: n }) => useIsDragAndDropEnabled() && /* @__PURE__ */ jsx(Button, { variant: r ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(PlusCircledIcon, { className: "h-5 w-5" }) }), AskAiButton = ({ isActive: r, show: n }) => /* @__PURE__ */ jsx(Button, { variant: r ? "default" : "ghost", size: "icon", onClick: n, children: /* @__PURE__ */ jsx(AiIcon, {}) });
 registerChaiSidebarPanel("add-block", {
   button: AddBlocksButton,
   label: "Add Blocks",
@@ -17306,24 +16967,24 @@ registerChaiSidebarPanel("outline", {
   panel: () => /* @__PURE__ */ jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsx(ListTree, {}) })
 });
 const RootLayout = () => {
-  const r = useTopBarComponent(), [n, o] = useSidebarActivePanel(), a = useRef("outline"), [i, l] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), [, u] = useActiveSettingsTab(), p = useChaiSidebarPanels("top"), h = useChaiSidebarPanels("bottom"), f = reverse([...h ?? []]), m = useCallback((A) => {
-    A.preventDefault();
+  const r = useTopBarComponent(), [n, o] = useSidebarActivePanel(), a = useRef("outline"), [i, l] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), [, u] = useActiveSettingsTab(), p = useChaiSidebarPanels("top"), h = useChaiSidebarPanels("bottom"), f = reverse([...h ?? []]), m = useCallback((w) => {
+    w.preventDefault();
   }, []), g = useMemo(() => [p].flat(), [p]), b = useCallback(
-    (A) => {
-      console.log("handleMenuItemClick", A, n), o(n === A ? null : A);
+    (w) => {
+      console.log("handleMenuItemClick", w, n), o(n === w ? null : w);
     },
     [n, o]
   ), { t: x } = useTranslation(), y = useMemo(() => [...p, ...h], [p, h]), S = useBuilderProp("htmlDir", "ltr"), k = find(y, { id: n }) ?? first$1(y), C = get(k, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
-      const A = find(y, { id: n });
-      A && get(A, "view", "standard") === "standard" && (a.current = n, l(get(A, "width", DEFAULT_PANEL_WIDTH)));
+      const w = find(y, { id: n });
+      w && get(w, "view", "standard") === "standard" && (a.current = n, l(get(w, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, y]);
   const E = useMemo(() => {
     if (n === null) return 0;
-    const A = find(y, { id: n });
-    return get(A, "view", "standard") === "standard" ? C : i;
+    const w = find(y, { id: n });
+    return get(w, "view", "standard") === "standard" ? C : i;
   }, [n, C, i, y]), B = useCallback(() => {
     o(a.current);
   }, [o, n]), I = useCallback(() => {
@@ -17332,9 +16993,9 @@ const RootLayout = () => {
   useEffect(() => {
     n !== null && !find(y, { id: n }) && o("outline");
   }, [n, y]);
-  const w = useCallback(
-    (A) => {
-      b(A);
+  const A = useCallback(
+    (w) => {
+      b(w);
     },
     [b]
   );
@@ -17348,24 +17009,24 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(r, {}) }) }),
           /* @__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: g.map((A, v) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(A, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: g.map((w, v) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "top",
-                  panelId: A.id,
-                  isActive: n === A.id,
-                  show: () => w(A.id)
+                  panelId: w.id,
+                  isActive: n === w.id,
+                  show: () => A(w.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(A.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-top-" + v)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f == null ? void 0 : f.map((A, v) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(A, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f == null ? void 0 : f.map((w, v) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: A.id,
-                  isActive: n === A.id,
-                  show: () => w(A.id)
+                  panelId: w.id,
+                  isActive: n === w.id,
+                  show: () => A(w.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(A.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
               ] }, "button-bottom-" + v)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -17438,7 +17099,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 === "design-tokens" ? /* @__PURE__ */ jsx(ManageDesignTokens, {}) : 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(React__default.Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "h-1/2 w-full animate-pulse" }), children: /* @__PURE__ */ jsx(ManageDesignTokens, {}) }) : c === "theme" ? /* @__PURE__ */ jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
                 ] }) })
               }
             )
@@ -17570,8 +17231,8 @@ const RootLayout = () => {
     });
   }, m = (b) => {
     if (!c) return;
-    const x = b.clientX - u.x, y = b.clientY - u.y, S = b.currentTarget, k = S.offsetWidth, C = S.offsetHeight, E = window.innerWidth - k, B = window.innerHeight - C, I = Math.max(0, Math.min(x, E)), w = Math.max(0, Math.min(y, B));
-    o(I, w);
+    const x = b.clientX - u.x, y = b.clientY - u.y, S = b.currentTarget, k = S.offsetWidth, C = S.offsetHeight, E = window.innerWidth - k, B = window.innerHeight - C, I = Math.max(0, Math.min(x, E)), A = Math.max(0, Math.min(y, B));
+    o(I, A);
   }, g = () => {
     d(!1);
   };
@@ -17816,10 +17477,10 @@ const atomRead = (r, n, ...o) => n.read(...o), atomWrite = (r, n, ...o) => n.wri
   var o;
   const a = getBuildingBlocks(r), i = a[1], l = a[2], c = a[3], d = a[6], u = a[7], p = a[11], h = a[12], f = a[13], m = a[14], g = a[16], b = a[17], x = p(r, n);
   if (isAtomStateInitialized(x) && (i.has(n) && l.get(n) !== x.n || Array.from(x.d).every(
-    ([w, A]) => (
+    ([A, w]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      m(r, w).n === A
+      m(r, A).n === w
     )
   )))
     return x;
@@ -17828,22 +17489,22 @@ const atomRead = (r, n, ...o) => n.read(...o), atomWrite = (r, n, ...o) => n.wri
   function S() {
     i.has(n) && (b(r, n), f(r), h(r));
   }
-  function k(w) {
-    var A;
-    if (isSelfAtom(n, w)) {
-      const T = p(r, w);
+  function k(A) {
+    var w;
+    if (isSelfAtom(n, A)) {
+      const T = p(r, A);
       if (!isAtomStateInitialized(T))
-        if (hasInitialValue(w))
-          setAtomStateValueOrPromise(r, w, w.init);
+        if (hasInitialValue(A))
+          setAtomStateValueOrPromise(r, A, A.init);
         else
           throw new Error("no atom init");
       return returnAtomValue(T);
     }
-    const v = m(r, w);
+    const v = m(r, A);
     try {
       return returnAtomValue(v);
     } finally {
-      x.d.set(w, v.n), isPendingPromise(x.v) && addPendingPromiseToDependency(n, x.v, v), (A = i.get(w)) == null || A.t.add(n), y || S();
+      x.d.set(A, v.n), isPendingPromise(x.v) && addPendingPromiseToDependency(n, x.v, v), (w = i.get(A)) == null || w.t.add(n), y || S();
     }
   }
   let C, E;
@@ -17852,10 +17513,10 @@ const atomRead = (r, n, ...o) => n.read(...o), atomWrite = (r, n, ...o) => n.wri
       return C || (C = new AbortController()), C.signal;
     },
     get setSelf() {
-      return !E && isActuallyWritableAtom(n) && (E = (...w) => {
+      return !E && isActuallyWritableAtom(n) && (E = (...A) => {
         if (!y)
           try {
-            return g(r, n, ...w);
+            return g(r, n, ...A);
           } finally {
             f(r), h(r);
           }
@@ -17863,10 +17524,10 @@ const atomRead = (r, n, ...o) => n.read(...o), atomWrite = (r, n, ...o) => n.wri
     }
   }, I = x.n;
   try {
-    const w = u(r, n, k, B);
-    return setAtomStateValueOrPromise(r, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => C == null ? void 0 : C.abort()), w.then(S, S)), x;
-  } catch (w) {
-    return delete x.v, x.e = w, ++x.n, x;
+    const A = u(r, n, k, B);
+    return setAtomStateValueOrPromise(r, n, A), isPromiseLike$1(A) && (registerAbortHandler(A, () => C == null ? void 0 : C.abort()), A.then(S, S)), x;
+  } catch (A) {
+    return delete x.v, x.e = A, ++x.n, x;
   } finally {
     y = !1, I !== x.n && l.get(n) === I && (l.set(n, x.n), c.add(n), (o = d.c) == null || o.call(d, n));
   }
@@ -18559,103 +18220,108 @@ ${i})
 if (typeof window > "u")
   throw new Error("@chaibuilder/sdk is only supported in the browser. Avoid using it in the server side.");
 export {
-  useCanvasZoom as $,
+  useAddBlock as $,
   AddBlocksPanel as A,
   BlockSettings as B,
   CanvasArea as C,
   DarkMode as D,
   ExportCodeModal as E,
-  registerChaiFeatureFlag as F,
-  registerChaiFeatureFlags as G,
-  useChaiFeatureFlag as H,
+  registerBlockSettingWidget as F,
+  registerChaiPreImportHTMLHook as G,
+  registerChaiLibrary as H,
   ImportHTML as I,
-  useChaiFeatureFlags as J,
-  useToggleChaiFeatureFlag as K,
+  registerChaiMediaManager as J,
+  registerChaiSaveToLibrary as K,
   ListTree as L,
-  useMediaManagerComponent as M,
+  ManualClasses as M,
   NestedPathSelector as N,
-  useActiveSettingsTab as O,
-  PERMISSIONS as P,
-  useAddBlock as Q,
-  useAddClassesToBlocks as R,
-  useAskAi as S,
+  registerChaiSidebarPanel as O,
+  registerChaiTopBar as P,
+  IfChaiFeatureFlag as Q,
+  registerChaiFeatureFlag as R,
+  registerChaiFeatureFlags as S,
   ThemeConfigPanel as T,
   UILibrariesPanel as U,
-  useBlockHighlight as V,
-  useBlocksHtmlForAi as W,
-  useBlocksStore as X,
-  useBrandingOptions as Y,
-  useBuilderProp as Z,
-  useBuilderReset as _,
+  useChaiFeatureFlag as V,
+  useChaiFeatureFlags as W,
+  useToggleChaiFeatureFlag as X,
+  useMediaManagerComponent as Y,
+  PERMISSIONS as Z,
+  useActiveSettingsTab as _,
   useSelectedBlockIds as a,
-  useCopyBlocks as a0,
-  useCopyToClipboard as a1,
-  useCurrentPage as a2,
-  useCutBlockIds as a3,
-  useDarkMode as a4,
-  useDuplicateBlocks as a5,
-  useHighlightBlockId as a6,
-  useHtmlToBlocks as a7,
-  useI18nBlocks as a8,
-  useInlineEditing as a9,
-  useThemeOptions as aA,
-  useUndoManager as aB,
-  useWrapperBlock as aC,
-  useBlocksStoreUndoableActions as aD,
-  useCanvasWidth as aE,
-  useCanvasDisplayWidth as aF,
-  useScreenSizeWidth as aG,
-  useSelectedLibrary as aH,
-  useSidebarActivePanel as aI,
-  useIsPageLoaded as aa,
-  useLanguages as ab,
-  useLibraryBlocks as ac,
-  usePartialBlocksStore as ad,
-  usePartialBlocksList as ae,
-  usePasteBlocks as af,
-  usePermissions as ag,
-  usePreviewMode as ah,
-  usePubSub as ai,
-  useRemoveAllClassesForBlock as aj,
-  useRemoveBlocks as ak,
-  useRemoveClassesFromBlocks as al,
-  useReplaceBlock as am,
-  useResetBlockStyles as an,
-  useRightPanel as ao,
-  useSavePage as ap,
-  useSelectedBlock as aq,
-  useSelectedBlockAllClasses as ar,
-  useSelectedBlockCurrentClasses as as,
-  useSelectedBlocksDisplayChild as at,
-  useSelectedBreakpoints as au,
-  useSelectedStylingBlocks as av,
-  useStreamMultipleBlocksProps as aw,
-  useStylingBreakpoint as ax,
-  useStylingState as ay,
-  useTheme as az,
+  useAddClassesToBlocks as a0,
+  useAskAi as a1,
+  useBlockHighlight as a2,
+  useBlocksHtmlForAi as a3,
+  useBrandingOptions as a4,
+  useBuilderReset as a5,
+  useCanvasZoom as a6,
+  useCopyBlocks as a7,
+  useCopyToClipboard as a8,
+  useCurrentPage as a9,
+  useSelectedStylingBlocks as aA,
+  useStreamMultipleBlocksProps as aB,
+  useStylingBreakpoint as aC,
+  useStylingState as aD,
+  useTheme as aE,
+  useThemeOptions as aF,
+  useUndoManager as aG,
+  useWrapperBlock as aH,
+  useBlocksStoreUndoableActions as aI,
+  useCanvasWidth as aJ,
+  useCanvasDisplayWidth as aK,
+  useScreenSizeWidth as aL,
+  useSelectedLibrary as aM,
+  useSidebarActivePanel as aN,
+  useCutBlockIds as aa,
+  useDarkMode as ab,
+  useDuplicateBlocks as ac,
+  useHighlightBlockId as ad,
+  useHtmlToBlocks as ae,
+  useI18nBlocks as af,
+  useInlineEditing as ag,
+  useIsPageLoaded as ah,
+  useLibraryBlocks as ai,
+  usePartialBlocksStore as aj,
+  usePartialBlocksList as ak,
+  usePasteBlocks as al,
+  usePermissions as am,
+  usePreviewMode as an,
+  usePubSub as ao,
+  useRemoveAllClassesForBlock as ap,
+  useRemoveBlocks as aq,
+  useRemoveClassesFromBlocks as ar,
+  useReplaceBlock as as,
+  useResetBlockStyles as at,
+  useRightPanel as au,
+  useSelectedBlock as av,
+  useSelectedBlockAllClasses as aw,
+  useSelectedBlockCurrentClasses as ax,
+  useSelectedBlocksDisplayChild as ay,
+  useSelectedBreakpoints as az,
   useUpdateBlocksProps as b,
   useUpdateBlocksPropsRealtime as c,
   usePageExternalData as d,
-  BlockStyling as e,
-  AIUserPrompt as f,
-  Breakpoints$1 as g,
-  UndoRedo as h,
-  ChaiBuilderEditor as i,
-  AddBlocksDialog as j,
-  BlockAttributesEditor as k,
-  DefaultChaiBlocks as l,
-  ChaiDraggableBlock as m,
-  getClassValueAndUnit as n,
-  registerBlockSettingField as o,
-  registerBlockSettingTemplate as p,
-  registerBlockSettingWidget as q,
-  registerChaiAddBlockTab as r,
-  registerChaiPreImportHTMLHook as s,
-  registerChaiLibrary as t,
+  chaiDesignTokensAtom as e,
+  useIncrementActionsCount as f,
+  useBlocksStore as g,
+  useBuilderProp as h,
+  useLanguages as i,
+  useSavePage as j,
+  BlockStyling as k,
+  AIUserPrompt as l,
+  Breakpoints$1 as m,
+  UndoRedo as n,
+  orderClassesByBreakpoint as o,
+  ChaiBuilderEditor as p,
+  AddBlocksDialog as q,
+  removeDuplicateClasses as r,
+  BlockAttributesEditor as s,
+  DefaultChaiBlocks as t,
   useCodeEditor as u,
-  registerChaiMediaManager as v,
-  registerChaiSaveToLibrary as w,
-  registerChaiSidebarPanel as x,
-  registerChaiTopBar as y,
-  IfChaiFeatureFlag as z
+  ChaiDraggableBlock as v,
+  getClassValueAndUnit as w,
+  registerChaiAddBlockTab as x,
+  registerBlockSettingField as y,
+  registerBlockSettingTemplate as z
 };