@chaibuilder/sdk 3.2.7 → 3.2.8

package/dist/{index-H6m-0wVZ.js → index-DvdOXKUE.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,21 +8,21 @@ 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 { useDebouncedCallback, useThrottledCallback, useResizeObserver, useDebouncedState } from "@react-hookz/web";
 import { toast, Toaster } from "sonner";
 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);
@@ -708,23 +708,22 @@ class StructureRuleRegistry {
   }
 }
 const defaultRuleRegistry = new StructureRuleRegistry(), useCheckStructure = (r = {}) => {
-  const n = useBuilderProp("flags.validateStructure", !0), o = useSetAtom$1(structureErrorsAtom), a = useSetAtom$1(structureValidationValidAtom), i = useSetAtom$1(hasStructureErrorsAtom), l = useSetAtom$1(hasStructureWarningsAtom);
-  return useCallback(
-    (d) => {
-      const u = d;
-      if (!n || u.length === 0) return;
-      const p = convertToBlocksTree(u), h = [];
-      let f = defaultRuleRegistry.getRules();
-      r.enableAccessibilityRules && (defaultRuleRegistry.enableAccessibilityRules(), f = defaultRuleRegistry.getRules()), r.customRules && r.customRules.length > 0 && f.push(...r.customRules), f.forEach((x) => {
+  const n = useBuilderProp("flags.validateStructure", !0), o = useSetAtom$1(structureErrorsAtom), a = useSetAtom$1(structureValidationValidAtom), i = useSetAtom$1(hasStructureErrorsAtom), l = useSetAtom$1(hasStructureWarningsAtom), c = useCallback(
+    (u) => {
+      const p = u;
+      if (!n || !p || p.length === 0) return;
+      const h = convertToBlocksTree(p), f = [];
+      let m = defaultRuleRegistry.getRules();
+      r.enableAccessibilityRules && (defaultRuleRegistry.enableAccessibilityRules(), m = defaultRuleRegistry.getRules()), r.customRules && r.customRules.length > 0 && m.push(...r.customRules), m.forEach((y) => {
         try {
-          const y = x.validate(u, p);
-          h.push(...y);
-        } catch (y) {
-          console.error(`Error running structure rule "${x.name}":`, y);
+          const k = y.validate(p, h);
+          f.push(...k);
+        } catch (k) {
+          console.error(`Error running structure rule "${y.name}":`, k);
         }
       });
-      const m = h.filter((x) => x.severity === "error").length > 0, g = h.filter((x) => x.severity === "warning").length > 0, b = !m;
-      o(h), a(b), i(m), l(g);
+      const g = f.filter((y) => y.severity === "error").length > 0, b = f.filter((y) => y.severity === "warning").length > 0, x = !g;
+      o(f), a(x), i(g), l(b);
     },
     [
       n,
@@ -735,6 +734,18 @@ const defaultRuleRegistry = new StructureRuleRegistry(), useCheckStructure = (r
       l
     ]
   );
+  return useDebouncedCallback(
+    c,
+    [
+      n,
+      r,
+      o,
+      a,
+      i,
+      l
+    ],
+    1e3
+  );
 }, useBlocksStoreManager = () => {
   const [, r] = useBlocksStore(), { postMessage: n } = useBroadcastChannel(), o = useUpdateBlockAtom(), a = useCheckStructure(), i = useIncrementActionsCount();
   return {
@@ -768,7 +779,7 @@ const defaultRuleRegistry = new StructureRuleRegistry(), useCheckStructure = (r
       l.forEach((c) => {
         const d = omit(c, "_id");
         o({ id: c._id, props: d });
-      }), n({ type: "blocks-props-updated", blocks: l }), i();
+      }), n({ type: "blocks-props-updated", blocks: l }), r((c) => (a(c), c)), i();
     }
   };
 }, blockRepeaterDataAtom = atom({});
@@ -966,13 +977,13 @@ const checkMissingTranslations = (r, n) => n ? r.some((o) => {
     return !d || d === u ? !1 : checkMissingTranslations(y.blocks || [], d);
   };
   return { savePage: useThrottledCallback(
-    async (y = !1, S = !1) => {
-      if (!S && (!c("save_page") || !p))
+    async (y = !1, k = !1) => {
+      if (!k && (!c("save_page") || !p))
         return;
-      const k = i();
-      return k != null && k.blocks && f(k.blocks), n("SAVING"), a("SAVING"), m(0), await o({
+      const S = i();
+      return S != null && S.blocks && f(S.blocks), n("SAVING"), a("SAVING"), m(0), await o({
         autoSave: y,
-        blocks: k.blocks,
+        blocks: S.blocks,
         theme: l,
         needTranslations: g(),
         designTokens: h
@@ -997,10 +1008,10 @@ const checkMissingTranslations = (r, n) => n ? r.some((o) => {
     if (!y && (!c("save_page") || !p))
       return;
     n("SAVING"), a("SAVING");
-    const S = i();
+    const k = i();
     return m(0), await o({
       autoSave: !0,
-      blocks: S.blocks,
+      blocks: k.blocks,
       theme: l,
       needTranslations: g(),
       designTokens: h
@@ -1060,13 +1071,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   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 };
-      }), 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 }) => {
-          i([C], E, B);
+      const y = builderStore.get(presentBlocksAtom), k = map(g, (v) => {
+        const B = y.find((w) => w._id === v)._parent || null, A = y.filter((w) => B ? w._parent === B : !w._parent).map((w) => w._id).indexOf(v);
+        return { _id: v, oldParent: B, oldPosition: A };
+      }), S = k.find(({ _id: v }) => v === g[0]);
+      S && S.oldParent === b && S.oldPosition === x || (i(g, b, x), r({
+        undo: () => each(k, ({ _id: v, oldParent: E, oldPosition: B }) => {
+          i([v], E, B);
         }),
         redo: () => i(g, b, x)
       }));
@@ -1078,28 +1089,28 @@ const undoRedoStateAtom = atom({
       });
     },
     removeBlocks: (g) => {
-      var k;
-      const b = builderStore.get(presentBlocksAtom), x = (k = first$1(g)) == null ? void 0 : k._parent, S = b.filter((C) => x ? C._parent === x : !C._parent).indexOf(first$1(g));
+      var S;
+      const b = builderStore.get(presentBlocksAtom), x = (S = first$1(g)) == null ? void 0 : S._parent, k = b.filter((v) => x ? v._parent === x : !v._parent).indexOf(first$1(g));
       a(map(g, "_id")), r({
-        undo: () => o(g, x, S),
+        undo: () => o(g, x, k),
         redo: () => a(map(g, "_id"))
       });
     },
     updateBlocks: (g, b, x) => {
       const y = builderStore.get(presentBlocksAtom);
-      let S = [];
+      let k = [];
       if (x)
-        S = map(g, (k) => ({ _id: k, ...x }));
+        k = map(g, (S) => ({ _id: S, ...x }));
       else {
-        const k = keys$1(b);
-        S = map(g, (C) => {
-          const E = y.find((I) => I._id === C), B = { _id: C };
-          return each(k, (I) => B[I] = E[I]), B;
+        const S = keys$1(b);
+        k = map(g, (v) => {
+          const E = y.find((I) => I._id === v), B = { _id: v };
+          return each(S, (I) => B[I] = E[I]), B;
         });
       }
-      l(map(g, (k) => ({ _id: k, ...b }))), r({
-        undo: () => l(S),
-        redo: () => l(map(g, (k) => ({ _id: k, ...b })))
+      l(map(g, (S) => ({ _id: S, ...b }))), r({
+        undo: () => l(k),
+        redo: () => l(map(g, (S) => ({ _id: S, ...b })))
       });
     },
     updateBlocksRuntime: (g, b) => {
@@ -1116,8 +1127,8 @@ const undoRedoStateAtom = atom({
       const b = builderStore.get(presentBlocksAtom);
       let x = [];
       x = map(g, (y) => {
-        const S = keys$1(y), k = b.find((E) => E._id === y._id), C = {};
-        return each(S, (E) => C[E] = k[E]), C;
+        const k = keys$1(y), S = b.find((E) => E._id === y._id), v = {};
+        return each(k, (E) => v[E] = S[E]), v;
       }), l(g), r({
         undo: () => l(x),
         redo: () => l(g)
@@ -2593,8 +2604,8 @@ const getBlockWithChildren = (r, n) => {
     for (const x in b) {
       const y = b[x];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: S, classes: k } = getSplitChaiClasses(y);
-        b[x] = compact(flattenDeep([S, k])).join(" ");
+        const { baseClasses: k, classes: S } = getSplitChaiClasses(y);
+        b[x] = compact(flattenDeep([k, S])).join(" ");
       } else
         x !== "_id" && delete b[x];
     }
@@ -2606,21 +2617,21 @@ const getBlockWithChildren = (r, n) => {
         if (i) {
           n(!0), a(null);
           try {
-            const y = u === p ? "" : u, S = b.toLowerCase().includes("translate the content"), k = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(g, d)), u, S) : [f(g, d)], C = await i(m, addLangToPrompt(b, h, m), k, y), { blocks: E, error: B } = C;
+            const y = u === p ? "" : u, k = b.toLowerCase().includes("translate the content"), S = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(g, d)), u, k) : [f(g, d)], v = await i(m, addLangToPrompt(b, h, m), S, y), { blocks: E, error: B } = v;
             if (B) {
               a(B);
               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
               l(E);
-            x && x(C);
+            x && x(v);
           } catch (y) {
             a(y);
           } finally {
@@ -3018,6 +3029,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 +3041,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) => {
@@ -3190,7 +3178,7 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
   const [r] = useBlocksStore();
   return useCallback(
     (n) => {
-      const o = syncBlocksWithDefaults(getBlocksFromHTML(n)), a = mergeBlocksWithExisting(o, r);
+      const o = getBlocksFromHTML(n), a = mergeBlocksWithExisting(o, r);
       return handlei18N(a, r);
     },
     [r]
@@ -3546,29 +3534,29 @@ function calculateElementZone(r, n, o, a, i) {
   }
 }
 function detectDropZone(r, n, o, a, i) {
-  var C, E, B, I;
+  var v, E, B, I;
   const l = r.getAttribute("data-block-id"), c = r.getAttribute("data-block-type") || "Box";
   if (!l)
     return null;
   let d = r.parentElement;
   for (; d && !d.hasAttribute("data-block-id"); )
     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;
+  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 = ((v = i.defaultView) == null ? void 0 : v.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 C = 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",
         rect: {
-          top: v.bottom + g,
+          top: C.bottom + g,
           left: D,
           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 +3564,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(), C = 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, C.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 +3610,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(), C = window.getComputedStyle(d), T = parseFloat(C.paddingLeft) || 0, N = parseFloat(C.paddingRight) || 0, j = parseFloat(C.paddingTop) || 0, P = parseFloat(C.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 +3634,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 +3652,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,31 +3694,31 @@ 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
     };
   }
   let y;
   x.position === "inside" ? y = h === "vertical" ? "horizontal" : "vertical" : y = p === "vertical" ? "horizontal" : "vertical";
-  const S = calculatePlaceholderRect(
+  const k = calculatePlaceholderRect(
     r,
     d,
     x.position,
     y,
     i
-  ), k = x.position === "inside" ? l : u;
+  ), S = x.position === "inside" ? l : u;
   return {
     position: x.position,
     placeholderOrientation: y,
-    rect: S,
+    rect: k,
     targetElement: r,
     targetBlockId: l,
-    targetParentId: k,
+    targetParentId: S,
     isEmpty: x.position === "inside" && !hasChildBlocks(r),
     confidence: x.confidence
   };
@@ -3779,14 +3767,14 @@ 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, k = n == null ? void 0 : n.getBoundingClientRect(), S = n && parseFloat(window.getComputedStyle(n).paddingLeft) || 0, v = 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) : [], C = getSiblingsInSameRow(w, r, A);
   let T = 0, N = 0;
-  if (v.forEach((L) => {
+  if (C.forEach((L) => {
     const D = L.getBoundingClientRect();
     D.height > T && (T = D.height), D.width > N && (N = D.width);
   }), o === "before")
     if (a === "horizontal") {
-      const L = S ? S.width - k - C : l.width, D = S ? S.left + u + k : l.left + u;
+      const L = k ? k.width - S - v : l.width, D = k ? k.left + u + S : l.left + u;
       return {
         top: l.top + d - p - 2,
         left: D,
@@ -3794,7 +3782,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 : k ? k.height - E - B : l.height;
       return {
         top: L,
         left: l.left + u - f - 2,
@@ -3804,7 +3792,7 @@ function calculatePlaceholderRect(r, n, o, a, i) {
     }
   else if (o === "after")
     if (a === "horizontal") {
-      const L = S ? S.width - k - C : l.width, D = S ? S.left + u + k : l.left + u;
+      const L = k ? k.width - S - v : l.width, D = k ? k.left + u + S : l.left + u;
       return {
         top: l.bottom + d + h - 2,
         left: D,
@@ -3812,7 +3800,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 : k ? k.height - E - B : l.height;
       return {
         top: L,
         left: l.right + u + m - 2,
@@ -3896,31 +3884,31 @@ const useBlockDrop = () => {
         return;
       }
       n(null);
-      const S = o.targetBlockId, k = o.targetParentId;
-      if (!S)
+      const k = o.targetBlockId, S = o.targetParentId;
+      if (!k)
         return;
-      const { parentId: C, index: E, replaceImageUrl: B } = calculateInsertionIndex(
+      const { parentId: v, index: E, replaceImageUrl: B } = calculateInsertionIndex(
         i,
-        S,
         k,
+        S,
         o.position,
         r
       ), I = r._id !== void 0;
       if (B && isDraggingOnlyImageBlock(r)) {
-        b([S], { image: get(r, "blocks.0.image") }), setTimeout(() => {
+        b([k], { image: get(r, "blocks.0.image") }), setTimeout(() => {
           g(m + 1);
         }, 50);
         return;
       }
       if (I)
-        d([r._id], C === null ? void 0 : C, E), h(), p([]), u([r._id]);
+        d([r._id], v === null ? void 0 : v, 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 },
-          C,
+          A === "PartialBlock" ? {
+            blocks: [{ _type: A, _id: "partial-block", partialBlockId: r.partialBlockId }]
+          } : (w == null ? void 0 : w.length) > 0 ? { blocks: [...w] } : { type: A },
+          v,
           E
         );
       }
@@ -4025,24 +4013,24 @@ const LEAF_BLOCK_TYPES = [
       if (!(c != null && c.defaultView)) return;
       const m = c.defaultView, g = m.innerHeight, b = m.scrollY, x = c.documentElement.scrollHeight;
       u.current = f;
-      const y = f, S = g - f;
-      let k = !1, C = null, E = 0;
-      if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && b > 0 ? (k = !0, C = "up", E = y) : S < AUTO_SCROLL_CONFIG.EDGE_ZONE && b + g < x && (k = !0, C = "down", E = S), !k && d.current !== null) {
+      const y = f, k = g - f;
+      let S = !1, v = null, E = 0;
+      if (y < AUTO_SCROLL_CONFIG.EDGE_ZONE && b > 0 ? (S = !0, v = "up", E = y) : k < AUTO_SCROLL_CONFIG.EDGE_ZONE && b + g < x && (S = !0, v = "down", E = k), !S && d.current !== null) {
         cancelAnimationFrame(d.current), d.current = null;
         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 = () => {
+      if (S && v) {
+        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 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;
+          const w = v === "up" ? -I : I;
+          m.scrollBy(0, w);
+          const C = m.scrollY, T = C > 0, N = C + g < x, j = u.current, P = g - u.current;
+          v === "up" && T && j < AUTO_SCROLL_CONFIG.EDGE_ZONE || v === "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]
@@ -4063,18 +4051,18 @@ const LEAF_BLOCK_TYPES = [
       const y = r._id;
       if (y && (b === y || isDescendantOf(b, y, l)))
         return;
-      const S = r._type || r.type;
-      if (!S)
+      const k = r._type || r.type;
+      if (!k)
         return;
-      const k = f.clientX, C = f.clientY;
-      p(C);
-      const E = detectDropZone(g, k, C, S, c);
+      const S = f.clientX, v = f.clientY;
+      p(v);
+      const E = detectDropZone(g, S, v, k, c);
       if (!E)
         return;
       const B = g.getAttribute("data-block-type") || "Box";
       let I = !1;
-      const w = LEAF_BLOCK_TYPES.includes(B);
-      if (B === "Image" && S === "Image" && isDraggingOnlyImageBlock(r)) {
+      const A = LEAF_BLOCK_TYPES.includes(B);
+      if (B === "Image" && k === "Image" && isDraggingOnlyImageBlock(r)) {
         i(b), o({
           isVisible: !0,
           isValid: !0,
@@ -4091,21 +4079,21 @@ 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);
+        I = canAcceptChildBlock(B, k);
       } else {
-        let v = g.parentElement, T = "Box";
-        for (; v && !v.hasAttribute("data-block-id"); )
-          v = v.parentElement;
-        if (v && (T = v.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, b, l))
+        let C = g.parentElement, T = "Box";
+        for (; C && !C.hasAttribute("data-block-id"); )
+          C = C.parentElement;
+        if (C && (T = C.getAttribute("data-block-type") || "Box"), y && !canDropAsSiblingWithoutCircularReference(y, b, l))
           return;
-        I = canAcceptChildBlock(T, S);
+        I = canAcceptChildBlock(T, k);
       }
       if (!I)
         return;
       i(E.targetParentId);
-      const A = E.targetParentId || x;
+      const w = E.targetParentId || x;
       o({
         isVisible: !0,
         isValid: !0,
@@ -4117,7 +4105,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]
@@ -4437,9 +4425,9 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       }),
       size({
         boundary: h == null ? void 0 : h.body,
-        apply({ availableWidth: C, availableHeight: E, elements: B }) {
+        apply({ availableWidth: v, availableHeight: E, elements: B }) {
           Object.assign(B.floating.style, {
-            maxWidth: `${Math.max(200, C)}px`,
+            maxWidth: `${Math.max(200, v)}px`,
             maxHeight: `${Math.max(100, E)}px`
           });
         }
@@ -4448,16 +4436,16 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     elements: { reference: o }
   });
   useResizeObserver(o, () => x(), o !== null), useResizeObserver(h == null ? void 0 : h.body, () => x(), (h == null ? void 0 : h.body) !== null);
-  const y = get(r, "_parent", null), S = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
+  const y = get(r, "_parent", null), k = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
   useEffect(() => {
-    let C = null;
-    return o ? (C = setTimeout(() => x(), 500), () => {
-      C && clearTimeout(C);
+    let v = null;
+    return o ? (v = setTimeout(() => x(), 500), () => {
+      v && clearTimeout(v);
     }) : (x(), () => {
-      C && clearTimeout(C);
+      v && clearTimeout(v);
     });
   }, [o, r == null ? void 0 : r._id]);
-  const [, k] = useSidebarActivePanel();
+  const [, S] = useSidebarActivePanel();
   return !n && (!o || !r || p) ? null : /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -4465,13 +4453,13 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       tabIndex: 0,
       ref: b.setFloating,
       style: g,
-      onClick: (C) => {
-        C.stopPropagation(), C.preventDefault();
+      onClick: (v) => {
+        v.stopPropagation(), v.preventDefault();
       },
-      onMouseEnter: (C) => {
-        C.stopPropagation(), c(null);
+      onMouseEnter: (v) => {
+        v.stopPropagation(), c(null);
       },
-      onKeyDown: (C) => C.stopPropagation(),
+      onKeyDown: (v) => v.stopPropagation(),
       className: `isolate z-[999] flex h-6 items-center justify-between bg-blue-500 py-2 text-xs text-white ${n ? "opacity-0" : ""}`,
       children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -4486,14 +4474,14 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: `w-full ${f ? "cursor-grab active:cursor-grabbing" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "mr-10 w-full items-center space-x-1 px-1 leading-tight", children: S }) }),
+        /* @__PURE__ */ jsx("div", { className: `w-full ${f ? "cursor-grab active:cursor-grabbing" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "mr-10 w-full items-center space-x-1 px-1 leading-tight", children: k }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pl-1 pr-1.5", children: [
           u(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
             AiIcon,
             {
               className: "h-4 w-4 rounded hover:bg-white hover:text-blue-500",
               onClick: () => {
-                k("chai-chat-panel"), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_AI_PANEL);
+                S("chai-chat-panel"), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_AI_PANEL);
               }
             }
           ),
@@ -4663,17 +4651,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 +4698,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,
@@ -4898,7 +4886,7 @@ const ChaiFrame = React__default.forwardRef((r, n) => /* @__PURE__ */ jsx(Frame,
 }, useDirectBlockDrag = () => {
   const [, r] = useSelectedBlockIds(), { onDragStart: n, onDragEnd: o } = useDragAndDrop(), [a] = useBlocksStore(), i = useRef(null), [l, c] = useAtom$1(lastClickTimeAtom), [d, u] = useAtom$1(clickCountAtom), p = useCallback(
     (m) => {
-      var S;
+      var k;
       if (m.button !== 0) return;
       const g = Date.now(), b = g - l;
       if (b < 400 && b > 0) {
@@ -4906,7 +4894,7 @@ const ChaiFrame = React__default.forwardRef((r, n) => /* @__PURE__ */ jsx(Frame,
         return;
       }
       c(g);
-      const y = (S = m.target.closest("[data-block-id]")) == null ? void 0 : S.getAttribute("data-block-id");
+      const y = (k = m.target.closest("[data-block-id]")) == null ? void 0 : k.getAttribute("data-block-id");
       y && (r([y]), i.current = y);
     },
     [r, l, c, d, u]
@@ -4957,12 +4945,12 @@ const RteDropdownMenu = ({
 }) => {
   const { document: l } = useFrame(), [c, d] = useState({ left: void 0, right: void 0, top: void 0, bottom: void 0 }), [u, p] = useState(!1), h = useRef(null);
   if (useEffect(() => {
-    var S, k;
+    var k, S;
     if (!u) {
       d({ left: void 0, right: void 0, top: void 0, bottom: void 0 });
       return;
     }
-    const f = (S = h.current) == null ? void 0 : S.getBoundingClientRect(), m = (k = i.current) == null ? void 0 : k.getBoundingClientRect();
+    const f = (k = h.current) == null ? void 0 : k.getBoundingClientRect(), m = (S = i.current) == null ? void 0 : S.getBoundingClientRect();
     let g = f == null ? void 0 : f.left, b = (f == null ? void 0 : f.bottom) + 4, x, y;
     (m == null ? void 0 : m.left) + (m == null ? void 0 : m.width) + 50 >= l.body.offsetWidth && (g = void 0, x = l.body.offsetWidth - (f == null ? void 0 : f.right)), b + 202 >= l.body.clientHeight && (b = null, y = l.body.clientHeight - (f == null ? void 0 : f.bottom) + (m == null ? void 0 : m.height)), d({ left: g, top: b, right: x, bottom: y });
   }, [u]), a === "canvas") {
@@ -5113,8 +5101,8 @@ const getActiveClasses$1 = (r, n, o) => {
     )
   ] });
 }, RteColorPicker = ({ editor: r, from: n, menuRef: o }) => {
-  var k, C;
-  const a = (k = r == null ? void 0 : r.getAttributes("textStyle")) == null ? void 0 : k.color, i = (C = r == null ? void 0 : r.getAttributes("highlight")) == null ? void 0 : C.color, [l, c] = useState(a || "#000000F2"), [d, u] = useState(i || "#00000057"), [p, h] = useDebouncedState(l, 150), [f, m] = useDebouncedState(d, 150), g = (E, B) => {
+  var S, v;
+  const a = (S = r == null ? void 0 : r.getAttributes("textStyle")) == null ? void 0 : S.color, i = (v = r == null ? void 0 : r.getAttributes("highlight")) == null ? void 0 : v.color, [l, c] = useState(a || "#000000F2"), [d, u] = useState(i || "#00000057"), [p, h] = useDebouncedState(l, 150), [f, m] = useDebouncedState(d, 150), g = (E, B) => {
     B ? (c(E), h(E)) : (r == null || r.chain().setColor(E).run(), c(E));
   }, b = (E, B) => {
     B ? (u(E), m(E)) : (r == null || r.chain().setHighlight({ color: E }).run(), u(E));
@@ -6395,7 +6383,7 @@ class NodeRange {
   }
 }
 const emptyAttrs = /* @__PURE__ */ Object.create(null);
-let Node$2 = class Y {
+let Node$2 = class ee {
   /**
   @internal
   */
@@ -6520,14 +6508,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
@@ -8737,8 +8725,8 @@ class Fitter {
     let b = p == d.childCount;
     b || (g = -1), this.placed = addToFragment(this.placed, o, Fragment.from(h)), this.frontier[o].match = f, b && g < 0 && a && a.type == this.frontier[this.depth].type && this.frontier.length > 1 && this.closeFrontierNode();
     for (let x = 0, y = d; x < g; x++) {
-      let S = y.lastChild;
-      this.frontier.push({ type: S.type, match: S.contentMatchAt(S.childCount) }), y = S.content;
+      let k = y.lastChild;
+      this.frontier.push({ type: k.type, match: k.contentMatchAt(k.childCount) }), y = k.content;
     }
     this.unplaced = b ? n == 0 ? Slice.empty : new Slice(dropFromFragment(c.content, n - 1, 1), n - 1, g < 0 ? c.openEnd : n - 1) : new Slice(dropFromFragment(c.content, n, p), c.openStart, c.openEnd);
   }
@@ -9617,8 +9605,8 @@ function deleteBarrier(r, n, o, a) {
   if (p && (c = (d = i.contentMatchAt(i.childCount)).findWrapping(l.type)) && d.matchType(c[0] || l.type).validEnd) {
     if (o) {
       let g = n.pos + l.nodeSize, b = Fragment.empty;
-      for (let S = c.length - 1; S >= 0; S--)
-        b = Fragment.from(c[S].create(null, b));
+      for (let k = c.length - 1; k >= 0; k--)
+        b = Fragment.from(c[k].create(null, b));
       b = Fragment.from(i.copy(b));
       let x = r.tr.step(new ReplaceAroundStep(n.pos - 1, g, n.pos, g, new Slice(b, 1, 0), c.length, !0)), y = x.doc.resolve(g + 2 * c.length);
       y.nodeAfter && y.nodeAfter.type == i.type && canJoin(x.doc, y.pos) && x.join(y.pos), o(x.scrollIntoView());
@@ -9637,11 +9625,11 @@ function deleteBarrier(r, n, o, a) {
       y++;
     if (g.canReplace(g.childCount, g.childCount, x.content)) {
       if (o) {
-        let S = Fragment.empty;
-        for (let C = b.length - 1; C >= 0; C--)
-          S = Fragment.from(b[C].copy(S));
-        let k = r.tr.step(new ReplaceAroundStep(n.pos - b.length, n.pos + l.nodeSize, n.pos + y, n.pos + l.nodeSize - y, new Slice(S, b.length, 0), 0, !0));
-        o(k.scrollIntoView());
+        let k = Fragment.empty;
+        for (let v = b.length - 1; v >= 0; v--)
+          k = Fragment.from(b[v].copy(k));
+        let S = r.tr.step(new ReplaceAroundStep(n.pos - b.length, n.pos + l.nodeSize, n.pos + y, n.pos + l.nodeSize - y, new Slice(k, b.length, 0), 0, !0));
+        o(S.scrollIntoView());
       }
       return !0;
     }
@@ -9828,8 +9816,8 @@ class CommandManager {
   createChain(n, o = !0) {
     const { rawCommands: a, editor: i, state: l } = this, { view: c } = i, d = [], u = !!n, p = n || l.tr, h = () => (!u && o && !p.getMeta("preventDispatch") && !this.hasCustomState && c.dispatch(p), d.every((m) => m === !0)), f = {
       ...Object.fromEntries(Object.entries(a).map(([m, g]) => [m, (...x) => {
-        const y = this.buildProps(p, o), S = g(...x)(y);
-        return d.push(S), f;
+        const y = this.buildProps(p, o), k = g(...x)(y);
+        return d.push(k), f;
       }])),
       run: h
     };
@@ -10270,8 +10258,8 @@ const isFragment = (r) => !("type" in r), insertContentAt = (r, n, o) => ({ tr:
         x = n.map((y) => y.text || "").join("");
       else if (n instanceof Fragment) {
         let y = "";
-        n.forEach((S) => {
-          S.text && (y += S.text);
+        n.forEach((k) => {
+          k.text && (y += k.text);
         }), x = y;
       } else typeof n == "object" && n && n.text ? x = n.text : x = n;
       a.insertText(x, h, f);
@@ -10452,11 +10440,11 @@ function isMarkActive(r, n, o = {}) {
     r.doc.nodesBetween(g, b, (x, y) => {
       if (!x.isText && !x.marks.length)
         return;
-      const S = Math.max(g, y), k = Math.min(b, y + x.nodeSize), C = k - S;
-      c += C, d.push(...x.marks.map((E) => ({
+      const k = Math.max(g, y), S = Math.min(b, y + x.nodeSize), v = S - k;
+      c += v, d.push(...x.marks.map((E) => ({
         mark: E,
-        from: S,
-        to: k
+        from: k,
+        to: S
       })));
     });
   }), c === 0)
@@ -10533,9 +10521,9 @@ const setMark = (r, n = {}) => ({ tr: o, state: a, dispatch: i }) => {
         const h = p.$from.pos, f = p.$to.pos;
         a.doc.nodesBetween(h, f, (m, g) => {
           const b = Math.max(g, h), x = Math.min(g + m.nodeSize, f);
-          m.marks.find((S) => S.type === u) ? m.marks.forEach((S) => {
-            u === S.type && o.addMark(b, x, u.create({
-              ...S.attrs,
+          m.marks.find((k) => k.type === u) ? m.marks.forEach((k) => {
+            u === k.type && o.addMark(b, x, u.create({
+              ...k.attrs,
               ...n
             }));
           }) : o.addMark(b, x, u.create(n));
@@ -10608,23 +10596,23 @@ const splitBlock = ({ keepMarks: r = !0 } = {}) => ({ tr: n, state: o, dispatch:
     if (u.depth === 2 || u.node(-3).type !== d || u.index(-2) !== u.node(-2).childCount - 1)
       return !1;
     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));
-      const C = u.indexAfter(-1) < u.node(-2).childCount ? 1 : u.indexAfter(-2) < u.node(-3).childCount ? 2 : 3, E = {
+      let k = Fragment.empty;
+      const S = u.index(-1) ? 1 : u.index(-2) ? 2 : 3;
+      for (let w = u.depth - S; w >= u.depth - 3; w -= 1)
+        k = Fragment.from(u.node(w).copy(k));
+      const v = 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
       }, B = ((c = d.contentMatch.defaultType) === null || c === void 0 ? void 0 : c.createAndFill(E)) || void 0;
-      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)
+      k = k.append(Fragment.from(d.createAndFill(null, B) || void 0));
+      const I = u.before(u.depth - (S - 1));
+      o.replace(I, u.after(-v), new Slice(k, 4 - S, 0));
+      let A = -1;
+      o.doc.nodesBetween(I, o.doc.content.size, (w, C) => {
+        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 = C + 1);
+      }), A > -1 && o.setSelection(TextSelection.near(o.doc.resolve(A))), o.scrollIntoView();
     }
     return !0;
   }
@@ -10643,10 +10631,10 @@ const splitBlock = ({ keepMarks: r = !0 } = {}) => ({ tr: n, state: o, dispatch:
   if (!canSplit(o.doc, u.pos, 2))
     return !1;
   if (i) {
-    const { selection: S, storedMarks: k } = a, { splittableMarks: C } = l.extensionManager, E = k || S.$to.parentOffset && S.$from.marks();
+    const { selection: k, storedMarks: S } = a, { splittableMarks: v } = l.extensionManager, E = S || k.$to.parentOffset && k.$from.marks();
     if (o.split(u.pos, 2, y).scrollIntoView(), !E || !i)
       return !0;
-    const B = E.filter((I) => C.includes(I.type.name));
+    const B = E.filter((I) => v.includes(I.type.name));
     o.ensureMarks(B);
   }
   return !0;
@@ -10669,19 +10657,19 @@ const splitBlock = ({ keepMarks: r = !0 } = {}) => ({ tr: n, state: o, dispatch:
   const i = r.doc.nodeAt(a);
   return o.node.type === (i == null ? void 0 : i.type) && canJoin(r.doc, a) && r.join(a), !0;
 }, toggleList = (r, n, o, a = {}) => ({ editor: i, tr: l, state: c, dispatch: d, chain: u, commands: p, can: h }) => {
-  const { extensions: f, splittableMarks: m } = i.extensionManager, g = getNodeType(r, c.schema), b = getNodeType(n, c.schema), { selection: x, storedMarks: y } = c, { $from: S, $to: k } = x, C = S.blockRange(k), E = y || x.$to.parentOffset && x.$from.marks();
-  if (!C)
+  const { extensions: f, splittableMarks: m } = i.extensionManager, g = getNodeType(r, c.schema), b = getNodeType(n, c.schema), { selection: x, storedMarks: y } = c, { $from: k, $to: S } = x, v = k.blockRange(S), E = y || x.$to.parentOffset && x.$from.marks();
+  if (!v)
     return !1;
   const B = findParentNode((I) => isList(I.type.name, f))(x);
-  if (C.depth >= 1 && B && C.depth - B.depth <= 1) {
+  if (v.depth >= 1 && B && v.depth - B.depth <= 1) {
     if (B.node.type === g)
       return p.liftListItem(b);
     if (isList(B.node.type.name, f) && g.validContent(B.node.content) && d)
       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);
@@ -10744,11 +10732,11 @@ const splitBlock = ({ keepMarks: r = !0 } = {}) => ({ tr: n, state: o, dispatch:
       y < p && l && l === x.type && (g = Math.max(y, p), b = Math.min(y + x.nodeSize, h), f = y, m = x), y >= p && y <= h && (l && l === x.type && o.setNodeMarkup(y, void 0, {
         ...x.attrs,
         ...n
-      }), c && x.marks.length && x.marks.forEach((S) => {
-        if (c === S.type) {
-          const k = Math.max(y, p), C = Math.min(y + x.nodeSize, h);
-          o.addMark(k, C, c.create({
-            ...S.attrs,
+      }), c && x.marks.length && x.marks.forEach((k) => {
+        if (c === k.type) {
+          const S = Math.max(y, p), v = Math.min(y + x.nodeSize, h);
+          o.addMark(S, v, c.create({
+            ...k.attrs,
             ...n
           }));
         }
@@ -10905,8 +10893,8 @@ Extension.create({
       () => c.undoInputRule(),
       // maybe convert first text block node to default node
       () => c.command(({ tr: d }) => {
-        const { selection: u, doc: p } = d, { empty: h, $anchor: f } = u, { pos: m, parent: g } = f, b = f.parent.isTextblock && m > 0 ? d.doc.resolve(m - 1) : f, x = b.parent.type.spec.isolating, y = f.pos - f.parentOffset, S = x && b.parent.childCount === 1 ? y === f.pos : Selection.atStart(p).from === m;
-        return !h || !g.type.isTextblock || g.textContent.length || !S || S && f.parent.type.name === "paragraph" ? !1 : c.clearNodes();
+        const { selection: u, doc: p } = d, { empty: h, $anchor: f } = u, { pos: m, parent: g } = f, b = f.parent.isTextblock && m > 0 ? d.doc.resolve(m - 1) : f, x = b.parent.type.spec.isolating, y = f.pos - f.parentOffset, k = x && b.parent.childCount === 1 ? y === f.pos : Selection.atStart(p).from === m;
+        return !h || !g.type.isTextblock || g.textContent.length || !k || k && f.parent.type.name === "paragraph" ? !1 : c.clearNodes();
       }),
       () => c.deleteSelection(),
       () => c.joinBackward(),
@@ -11117,10 +11105,10 @@ const RichTextEditor = memo(
       placeholder: "Enter text here",
       onUpdate: ({ editor: p }) => a((p == null ? void 0 : p.getHTML()) || ""),
       onBlur: ({ editor: p, event: h }) => {
-        const f = h == null ? void 0 : h.relatedTarget, m = l.querySelector(".ProseMirror"), g = l.querySelector(".tippy-box"), b = l.querySelector("#chai-rich-text-menu-bar"), x = m == null ? void 0 : m.contains(f), y = g == null ? void 0 : g.contains(f), S = b == null ? void 0 : b.contains(f), k = window.document.getElementById("rte-widget-color-picker");
-        if (!x && !y && !S && !k) {
-          const C = (p == null ? void 0 : p.getHTML()) || "";
-          o(C);
+        const f = h == null ? void 0 : h.relatedTarget, m = l.querySelector(".ProseMirror"), g = l.querySelector(".tippy-box"), b = l.querySelector("#chai-rich-text-menu-bar"), x = m == null ? void 0 : m.contains(f), y = g == null ? void 0 : g.contains(f), k = b == null ? void 0 : b.contains(f), S = window.document.getElementById("rte-widget-color-picker");
+        if (!x && !y && !k && !S) {
+          const v = (p == null ? void 0 : p.getHTML()) || "";
+          o(v);
         }
       },
       from: "canvas"
@@ -11220,30 +11208,30 @@ const RichTextEditor = memo(
   }
 ), WithBlockTextEditor = 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(() => {
+    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: k, blockType: S } = useMemo(() => {
       var N;
-      const w = r._type;
-      let A = 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 };
-    }, [r, g]), C = useCallback(
-      (w) => {
-        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 A = r._type;
+      let w = r[o];
+      const C = getRegisteredChaiBlock(r._type);
+      return g && ((N = C == null ? void 0 : C.i18nProps) == null ? void 0 : N.includes(o)) && has(r, `${o}-${g}`) && (w = get(r, `${o}-${g}`)), { blockContent: w, blockType: A };
+    }, [r, g]), v = useCallback(
+      (A) => {
+        var C;
+        const w = A || ((C = h.current) == null ? void 0 : C.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), v(), setTimeout(() => {
+          const w = x.current;
+          x.current = null, b([w]);
         }, 100);
       },
       [b, y, g]
@@ -11251,29 +11239,29 @@ 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}`);
-      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(
+      const A = `[data-block-id="${y}"]`, w = l >= 0 ? `[data-block-index="${l}"]` : "", C = a.querySelector(`${A}${w}`);
+      C && ((T = C == null ? void 0 : C.classList) == null || T.add("sr-only"), p(C));
+    }, [y, S, a, l]);
+    const I = useMemo(() => u ? (f(), ["RichText", "Paragraph"].includes(S) ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
-        blockContent: S,
+        blockContent: k,
         editingElement: u,
         onChange: E,
-        onClose: C,
+        onClose: v,
         onEscape: B
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
       {
         editorRef: h,
-        blockContent: S,
+        blockContent: k,
         editingElement: u,
-        onClose: C,
+        onClose: v,
         onChange: E,
         onEscape: B
       }
-    )) : null, [u, y, k, S, C, g]);
+    )) : null, [u, y, S, k, v, g]);
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       I,
       n
@@ -11308,7 +11296,7 @@ const RichTextEditor = memo(
   blockAtom: n,
   children: o
 }) => {
-  const { editingBlockId: a, editingItemIndex: i } = useInlineEditing(), [l] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: d, fallbackLang: u } = useLanguages(), p = useBlockRuntimeProps(), h = usePageExternalData(), [f] = useAtom$1(dataBindingActiveAtom), m = get(c, "component", null), { index: g, key: b } = useContext(RepeaterContext), { mode: x } = useEditorMode(), y = useAtomValue$1(chaiDesignTokensAtom), S = useIsDragAndDropEnabled(), k = x === "edit", C = useDirectBlockDrag(), E = useMemo(
+  const { editingBlockId: a, editingItemIndex: i } = useInlineEditing(), [l] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(l._type), [l._type]), { selectedLang: d, fallbackLang: u } = useLanguages(), p = useBlockRuntimeProps(), h = usePageExternalData(), [f] = useAtom$1(dataBindingActiveAtom), m = get(c, "component", null), { index: g, key: b } = useContext(RepeaterContext), { mode: x } = useEditorMode(), y = useAtomValue$1(chaiDesignTokensAtom), k = useIsDragAndDropEnabled(), S = x === "edit", v = useDirectBlockDrag(), E = useMemo(
     () => f ? applyBindingToBlockProps(applyLanguage(l, d, c), h, {
       index: g,
       key: b
@@ -11320,22 +11308,22 @@ 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,
       "data-block-index": g
     };
-    return k && S ? {
+    return S && k ? {
       ...P,
       draggable: !a,
-      onMouseDown: C.onMouseDown,
-      onDragStart: C.onDragStart,
-      onDragEnd: C.onDragEnd
+      onMouseDown: v.onMouseDown,
+      onDragStart: v.onDragStart,
+      onDragEnd: v.onDragEnd
     } : P;
-  }, [l._id, l._type, g, k, S, C, a]), A = useMemo(
+  }, [l._id, l._type, g, S, k, v, a]), w = useMemo(
     () => ({
-      blockProps: w,
+      blockProps: A,
       inBuilder: x === "edit",
       lang: d || u,
       pageData: h,
@@ -11344,11 +11332,11 @@ const RichTextEditor = memo(
       ...I,
       ...r
     }),
-    [x, w, d, u, E, B, I, r]
-  ), v = useMemo(() => !CORE_BLOCKS.includes(l._type), [l._type]), T = useMemo(() => get(l, "_show", !0), [l]);
+    [x, A, d, u, E, B, I, r]
+  ), C = 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,
@@ -11361,7 +11349,7 @@ const RichTextEditor = memo(
     })
   }) });
   const j = a === l._id && (i === g || g < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: l, children: N }) : N;
-  return v ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: j }) : j;
+  return C ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: j }) : j;
 }, PartialWrapper$1 = ({ children: r, partialBlockId: n }) => {
   const o = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: i, fallbackLang: l } = useLanguages(), c = useCallback(
     (d) => {
@@ -11465,14 +11453,14 @@ const RichTextEditor = memo(
 }, StaticCanvas = () => {
   const [r] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), o = useRef(null), a = useRef(null), [i, l] = useState({ width: 0, height: 0 }), c = useCanvasScale(i), [, d] = useCanvasIframe(), u = useBuilderProp("loading", !1), p = useBuilderProp("htmlDir", "ltr"), { onDragOver: h, onDrop: f, onDragEnd: m } = useDragAndDrop(), g = useDropIndicator(), b = useCallback(
     (y) => {
-      l((S) => ({ ...S, width: y }));
+      l((k) => ({ ...k, width: y }));
     },
     [l]
   );
   useEffect(() => {
     if (!a.current) return;
-    const { clientWidth: y, clientHeight: S } = a.current;
-    l({ width: y, height: S });
+    const { clientWidth: y, clientHeight: k } = a.current;
+    l({ width: y, height: k });
   }, [a, r]);
   const x = useMemo(() => {
     let y = IframeInitialContent;
@@ -11531,7 +11519,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-vpbOSO05.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, {}) }) }),
@@ -11668,52 +11656,52 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
   if (!r || startsWith(r, "data")) return "";
   const n = ((i = r.split("/").pop()) == null ? void 0 : i.split("?")[0]) || "";
   return [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp", ".ico", ".avif"].some((l) => n.toLowerCase().endsWith(l)) ? n : "";
-}, ImagePickerField = ({ value: r, onChange: n, id: o, onBlur: a }) => {
-  const { t: i } = useTranslation(), { selectedLang: l } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), u = usePageExternalData(), p = o.split(".").pop() || "", h = l ? `_${p}Id-${l}` : `_${p}Id`, f = isEmpty(l) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), m = get(c, h, f ? c == null ? void 0 : c.assetId : ""), g = useMemo(() => {
-    if (!r || !c || !/\{\{.*?\}\}/.test(r)) return r;
-    const C = { ...c, [p]: r }, E = applyBindingToBlockProps(C, u, { index: -1, key: "" });
-    return get(E, p, r);
-  }, [r, c, u, p]), b = !!m || g !== PLACEHOLDER_IMAGE, x = (k) => {
-    const C = isArray(k) ? first$1(k) : k;
-    if (C) {
-      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 = {
-          ...E && { [I ? "mobileWidth" : "width"]: E },
-          ...B && { [I ? "mobileHeight" : "height"]: B },
-          ...C.description && { alt: C.description }
+}, ImagePickerField = ({ value: r, onChange: n, id: o, onBlur: a, uiSchema: i }) => {
+  const { t: l } = useTranslation(), { selectedLang: c } = useLanguages(), d = useSelectedBlock(), u = useUpdateBlocksProps(), p = usePageExternalData(), h = (i == null ? void 0 : i["ui:allowEmpty"]) === !0, f = o.split(".").pop() || "", m = c ? `_${f}Id-${c}` : `_${f}Id`, g = isEmpty(c) && (d == null ? void 0 : d._type) === "Image" && has(d, "assetId"), b = get(d, m, g ? d == null ? void 0 : d.assetId : ""), x = useMemo(() => {
+    if (!r || !d || !/\{\{.*?\}\}/.test(r)) return r;
+    const B = { ...d, [f]: r }, I = applyBindingToBlockProps(B, p, { index: -1, key: "" });
+    return get(I, f, r);
+  }, [r, d, p, f]), y = !!b || x !== PLACEHOLDER_IMAGE && x !== "", k = (E) => {
+    const B = isArray(E) ? first$1(E) : E;
+    if (B) {
+      n(B == null ? void 0 : B.url);
+      const I = B == null ? void 0 : B.width, A = B == null ? void 0 : B.height, w = m.includes("mobile");
+      if (d != null && d._id) {
+        const C = {
+          ...I && { [w ? "mobileWidth" : "width"]: I },
+          ...A && { [w ? "mobileHeight" : "height"]: A },
+          ...B.description && { alt: B.description }
         };
-        if (set(w, h, C.id), isEmpty(w)) return;
-        d([c._id], w);
+        if (set(C, m, B.id), isEmpty(C)) return;
+        u([d._id], C);
       }
     }
-  }, y = useCallback(() => {
-    if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
-      const k = {}, C = h.includes("mobile");
-      set(k, h, ""), set(k, C ? "mobileWidth" : "width", ""), set(k, C ? "mobileHeight" : "height", ""), d([c._id], k);
+  }, S = useCallback(() => {
+    if (n(h ? "" : PLACEHOLDER_IMAGE), d != null && d._id) {
+      const B = {}, I = m.includes("mobile");
+      set(B, m, ""), set(B, I ? "mobileWidth" : "width", ""), set(B, I ? "mobileHeight" : "height", ""), u([d._id], B);
     }
-  }, [n, c == null ? void 0 : c._id, d, h]), S = getFileName(g);
+  }, [n, d == null ? void 0 : d._id, u, m, h]), v = getFileName(x);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-start gap-x-3", children: [
-    g ? /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+    x ? /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
       /* @__PURE__ */ jsx(
         "img",
         {
-          src: g,
-          className: "h-14 w-14 overflow-hidden rounded-md border border-border object-cover transition duration-200 " + (m && m !== "" ? "cursor-pointer group-hover:blur-sm" : ""),
+          src: x,
+          className: "h-14 w-14 overflow-hidden rounded-md border border-border object-cover transition duration-200 " + (b && b !== "" ? "cursor-pointer group-hover:blur-sm" : ""),
           alt: ""
         }
       ),
-      b && /* @__PURE__ */ jsx(
+      y && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          onClick: y,
+          onClick: S,
           className: "absolute -right-2 -top-2 z-20 rounded-full bg-destructive p-1 text-destructive-foreground hover:bg-destructive/90",
           children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" })
         }
       ),
-      m && m !== "" && /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: x, assetId: m, children: /* @__PURE__ */ jsx(
+      b && b !== "" && /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: k, assetId: b, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -11721,11 +11709,11 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-4 w-4 text-white" })
         }
       ) })
-    ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: x, mode: "image", assetId: m, children: /* @__PURE__ */ jsx("div", { className: "h-14 w-14 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
+    ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: k, mode: "image", assetId: b, children: /* @__PURE__ */ jsx("div", { className: "h-14 w-14 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex w-3/5 flex-col", children: [
       /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx("p", { className: "max-w-[250px] truncate pr-2 text-xs text-gray-400", children: S }),
-        /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: x, assetId: "", children: /* @__PURE__ */ jsx("small", { className: "h-6 mb-1 w-full cursor-pointer rounded-md bg-secondary px-1 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: !isEmpty(g) && g !== PLACEHOLDER_IMAGE ? i("Replace image") : i("Choose image") }) }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-[250px] truncate pr-2 text-xs text-gray-400", children: v }),
+        /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: k, assetId: "", children: /* @__PURE__ */ jsx("small", { className: "h-6 mb-1 w-full cursor-pointer rounded-md bg-secondary px-1 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: !isEmpty(x) && x !== PLACEHOLDER_IMAGE ? l("Replace image") : l("Choose image") }) }),
         /* @__PURE__ */ jsx("div", { className: "text-center text-xs text-gray-400", children: "OR" })
       ] }),
       /* @__PURE__ */ jsx(
@@ -11737,10 +11725,10 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           spellCheck: "false",
           type: "url",
           className: "h-6  text-xs",
-          placeholder: i("Enter image URL"),
+          placeholder: l("Enter image URL"),
           value: r === PLACEHOLDER_IMAGE ? "" : r,
-          onBlur: ({ target: { value: k } }) => a(o, k),
-          onChange: (k) => n(k.target.value)
+          onBlur: ({ target: { value: E } }) => a(o, E),
+          onChange: (E) => n(E.target.value)
         }
       )
     ] })
@@ -11856,11 +11844,11 @@ const DataBindingSelector = ({
         n(`{{${f}}}`, {}, o);
         return;
       }
-      const g = (S) => /[.,!?;:]/.test(S), b = (S, k, C) => {
+      const g = (k) => /[.,!?;:]/.test(k), b = (k, S, v) => {
         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 = " "), {
-          text: E + C + B,
+        const I = S > 0 ? k[S - 1] : "", A = S < k.length ? k[S] : "";
+        return S > 0 && (I === "." || !g(I) && I !== " ") && (E = " "), S < k.length && !g(A) && A !== " " && (B = " "), {
+          text: E + v + B,
           prefixLength: E.length,
           suffixLength: B.length
         };
@@ -11868,32 +11856,32 @@ const DataBindingSelector = ({
       if (!x) return;
       const y = document.getElementById(`chai-rte-${o}`) || document.getElementById(`chai-rte-modal-${o}`);
       if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
-        const S = y.__chaiRTE;
-        if (S) {
-          const k = `{{${f}}}`;
-          S.commands.focus();
-          const { from: C, to: E } = S.state.selection;
-          if (C !== E)
-            S.chain().deleteSelection().insertContent(k).run();
+        const k = y.__chaiRTE;
+        if (k) {
+          const S = `{{${f}}}`;
+          k.commands.focus();
+          const { from: v, to: E } = k.state.selection;
+          if (v !== E)
+            k.chain().deleteSelection().insertContent(S).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 } = k, A = I.selection.from, w = I.doc.textBetween(Math.max(0, A - 1), A), C = 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();
+            C && C !== " " && !g(C) && (N = " "), k.chain().insertContent(T + S + N).run();
           }
-          setTimeout(() => n(S.getHTML(), {}, o), 100);
+          setTimeout(() => n(k.getHTML(), {}, o), 100);
           return;
         }
       } else {
-        const S = x, k = S.selectionStart || 0, C = S.value || "", E = S.selectionEnd || k;
-        if (E > k) {
-          const v = `{{${f}}}`, { text: T } = b(C, k, v), N = C.slice(0, k) + T + C.slice(E);
+        const k = x, S = k.selectionStart || 0, v = k.value || "", E = k.selectionEnd || S;
+        if (E > S) {
+          const C = `{{${f}}}`, { text: T } = b(v, S, C), N = v.slice(0, S) + T + v.slice(E);
           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(v, S, I), w = v.slice(0, S) + A + v.slice(S);
+        n(w, {}, o);
       }
     },
     [o, n, a, d == null ? void 0 : d._id, u]
@@ -11914,70 +11902,70 @@ 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", (C, T) => []), [l, c] = useState(!1), [d, u] = useState(!1), [p, h] = useState("page"), [f, m] = useState(""), [g, b] = useState([]), [x, y] = useState(-1), k = useRef(null), S = (w = n == null ? void 0 : n.find((C) => C.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";
+    const C = split(r, ":"), T = get(C, 1, "page") || "page";
     h(T), (async () => {
-      const N = await i(T, [get(v, 2, "page")]);
+      const N = await i(T, [get(C, 2, "page")]);
       N && Array.isArray(N) && m(get(N, [0, "name"], ""));
     })();
   }, [r]);
-  const C = useDebouncedCallback(
-    async (v) => {
-      if (isEmpty(v))
+  const v = useDebouncedCallback(
+    async (C) => {
+      if (isEmpty(C))
         b([]);
       else {
-        const T = await i(p, v);
+        const T = await i(p, C);
         b(T);
       }
       c(!1), y(-1);
     },
     [p],
     300
-  ), E = (v) => {
-    const T = ["pageType", p, v.id];
-    T[1] && (o(T.join(":")), m(v.name), u(!1), b([]), y(-1));
-  }, B = (v) => {
-    switch (v.key) {
+  ), E = (C) => {
+    const T = ["pageType", p, C.id];
+    T[1] && (o(T.join(":")), m(C.name), u(!1), b([]), y(-1));
+  }, B = (C) => {
+    switch (C.key) {
       case "ArrowDown":
-        v.preventDefault(), y((T) => T < g.length - 1 ? T + 1 : T);
+        C.preventDefault(), y((T) => T < g.length - 1 ? T + 1 : T);
         break;
       case "ArrowUp":
-        v.preventDefault(), y((T) => T > 0 ? T - 1 : T);
+        C.preventDefault(), y((T) => T > 0 ? T - 1 : T);
         break;
       case "Enter":
-        if (v.preventDefault(), g.length === 0) return;
+        if (C.preventDefault(), g.length === 0) return;
         x >= 0 && E(g[x]);
         break;
       case "Escape":
-        v.preventDefault(), I();
+        C.preventDefault(), I();
         break;
     }
   };
   useEffect(() => {
-    if (x >= 0 && S.current) {
-      const v = S.current.children[x];
-      v == null || v.scrollIntoView({ block: "nearest" });
+    if (x >= 0 && k.current) {
+      const C = k.current.children[x];
+      C == null || C.scrollIntoView({ block: "nearest" });
     }
   }, [x]);
   const I = () => {
     m(""), b([]), y(-1), u(!1), o("");
-  }, w = (v) => {
-    m(v), u(!isEmpty(v)), c(!0), C(v);
+  }, A = (C) => {
+    m(C), u(!isEmpty(C)), c(!0), v(C);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: p, onChange: (v) => h(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: p, onChange: (C) => h(C.target.value), children: map(n, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
     p && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: f,
-          onChange: (v) => w(v.target.value),
+          onChange: (C) => A(C.target.value),
           onKeyDown: B,
-          placeholder: a(`Search ${k ?? ""}`),
+          placeholder: a(`Search ${S ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
@@ -11991,22 +11979,22 @@ const DataBindingSelector = ({
       ' "',
       f,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: S, children: map(g == null ? void 0 : g.slice(0, 20), (v, T) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: k, children: map(g == null ? void 0 : g.slice(0, 20), (C, T) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => E(v),
-        className: `cursor-pointer p-2 text-xs ${r != null && r.includes(v.id) ? "bg-blue-200" : T === x ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => E(C),
+        className: `cursor-pointer p-2 text-xs ${r != null && r.includes(C.id) ? "bg-blue-200" : T === x ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          v.name,
+          C.name,
           " ",
-          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          C.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            v.slug,
+            C.slug,
             " )"
           ] })
         ]
       },
-      v.id
+      C.id
     )) }) })
   ] });
 }, LinkField = ({ schema: r, formData: n, onChange: o, name: a }) => {
@@ -12100,7 +12088,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-CXbmmhcb.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,
@@ -12349,14 +12337,14 @@ const DataBindingSelector = ({
   const { id: n, classNames: o, label: a, children: i, errors: l, help: c, hidden: d, required: u, schema: p, formData: h, onChange: f } = r, { selectedLang: m, fallbackLang: g, languages: b } = useLanguages(), x = useMemo(
     () => isEmpty(b) ? "" : isEmpty(m) ? g : m,
     [b, m, g]
-  ), y = useMemo(() => get(LANGUAGES, x, x), [x]), S = usePageExternalData(), k = useSelectedBlock(), C = useRegisteredChaiBlocks(), E = useMemo(
-    () => get(C, [k == null ? void 0 : k._type, "i18nProps"], []),
-    [C, k == null ? void 0 : k._type]
+  ), y = useMemo(() => get(LANGUAGES, x, x), [x]), k = usePageExternalData(), S = useSelectedBlock(), v = useRegisteredChaiBlocks(), E = useMemo(
+    () => get(v, [S == null ? void 0 : S._type, "i18nProps"], []),
+    [v, S == null ? void 0 : S._type]
   ), [B, I] = useState(null);
   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: [
@@ -12393,14 +12381,14 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const v = n.replace("root.", ""), T = E.includes(v) && !isEmpty(m) && isEmpty(h);
+  const C = n.replace("root.", ""), T = E.includes(C) && !isEmpty(m) && isEmpty(h);
   return /* @__PURE__ */ jsxs("div", { className: o, children: [
     p.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs("label", { htmlFor: n, className: 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
           ] }),
@@ -12411,7 +12399,7 @@ const DataBindingSelector = ({
           /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: p.description })
         ] }) })
       ] }),
-      !p.enum && !p.oneOf && S && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
+      !p.enum && !p.oneOf && k && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
         T ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
@@ -12551,36 +12539,36 @@ 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) => {
     I && (o([n._id], { [I]: get(B, I) }), b({ formData: B }, I, { [I]: get(c, I) }));
   }, y = ({ formData: B }, I) => {
     I && (o([h._id], { [I]: get(B, I) }), b({ formData: B }, I, { [I]: get(c, I) }));
-  }, { schema: S, uiSchema: k } = useMemo(() => {
+  }, { schema: k, uiSchema: S } = useMemo(() => {
     const B = n == null ? void 0 : n._type;
     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(() => {
+  }, [n]), { wrapperSchema: v, 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: [
@@ -12608,19 +12596,19 @@ function BlockSettings() {
           blockId: h == null ? void 0 : h._id,
           onChange: y,
           formData: m,
-          schema: C,
+          schema: v,
           uiSchema: E
         }
       ) })
     ] }),
-    isEmpty(S) ? null : /* @__PURE__ */ jsx(
+    isEmpty(k) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
         onChange: x,
         formData: l,
-        schema: S,
-        uiSchema: k
+        schema: k,
+        uiSchema: S
       }
     )
   ] });
@@ -12831,17 +12819,17 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (r) => {
-  const [n, o] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: h } = r, [f, m] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [g, b] = useState(!1), [x, y] = useState(""), [S, k] = useState(!1), [C, E] = useState(!1);
+  const [n, o] = useState(!1), [a, i] = useState(""), { currentClass: l, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: h } = r, [f, m] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [g, b] = useState(!1), [x, y] = useState(""), [k, S] = useState(!1), [v, E] = useState(!1);
   useEffect(() => {
-    const { value: v, unit: T } = getClassValueAndUnit(l);
+    const { value: C, unit: T } = getClassValueAndUnit(l);
     if (T === "") {
-      i(v), m(u != null && u.toLowerCase().includes("width") ? "%" : first$1(p));
+      i(C), m(u != null && u.toLowerCase().includes("width") ? "%" : first$1(p));
       return;
     }
-    m(T), i(T === "class" || isEmpty(v) ? "" : v);
+    m(T), i(T === "class" || isEmpty(C) ? "" : C);
   }, [l, u, p]);
-  const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), I = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
-    (v = !1) => {
+  const B = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), I = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), A = useCallback(
+    (C = !1) => {
       const T = getUserInputValues(`${a}`, p);
       if (get(T, "error", !1)) {
         b(!0);
@@ -12855,23 +12843,23 @@ const BlockStylingProps = () => {
       if (get(T, "value") === "")
         return;
       const P = `${get(T, "value", "").startsWith("-") ? "-" : ""}${d}[${get(T, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      v ? I(P) : B(P);
+      C ? I(P) : B(P);
     },
     [B, I, a, f, d, p]
-  ), A = useCallback(
-    (v) => {
+  ), w = useCallback(
+    (C) => {
       const T = getUserInputValues(`${a}`, p);
       if (get(T, "error", !1)) {
         b(!0);
         return;
       }
-      if (v === "auto" || v === "none") {
-        B(`${d}${v}`);
+      if (C === "auto" || C === "none") {
+        B(`${d}${C}`);
         return;
       }
       if (get(T, "value") === "")
         return;
-      const N = get(T, "unit") !== "" ? get(T, "unit") : v, P = `${get(T, "value", "").startsWith("-") ? "-" : ""}${d}[${get(T, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      const N = get(T, "unit") !== "" ? get(T, "unit") : C, P = `${get(T, "value", "").startsWith("-") ? "-" : ""}${d}[${get(T, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       B(P);
     },
     [B, a, d, p]
@@ -12889,37 +12877,37 @@ const BlockStylingProps = () => {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${k ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(f) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: f === "class",
-          onKeyPress: (v) => {
-            v.key === "Enter" && w();
+          onKeyPress: (C) => {
+            C.key === "Enter" && A();
           },
-          onKeyDown: (v) => {
-            if (v.keyCode !== 38 && v.keyCode !== 40)
+          onKeyDown: (C) => {
+            if (C.keyCode !== 38 && C.keyCode !== 40)
               return;
-            v.preventDefault(), E(!0);
-            const T = parseInt$1(v.target.value);
+            C.preventDefault(), E(!0);
+            const T = parseInt$1(C.target.value);
             let N = isNaN$1(T) ? 0 : T;
-            v.keyCode === 38 && (N += 1), v.keyCode === 40 && (N -= 1);
+            C.keyCode === 38 && (N += 1), C.keyCode === 40 && (N -= 1);
             const j = `${N}`, L = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${f === "-" ? "" : f}]`;
             I(L);
           },
-          onKeyUp: (v) => {
-            C && (v.preventDefault(), E(!1));
+          onKeyUp: (C) => {
+            v && (C.preventDefault(), E(!1));
           },
-          onBlur: () => w(),
-          onChange: (v) => {
-            b(!1), i(v.target.value);
+          onBlur: () => A(),
+          onChange: (C) => {
+            b(!1), i(C.target.value);
           },
-          onClick: (v) => {
+          onClick: (C) => {
             var T;
-            (T = v == null ? void 0 : v.target) == null || T.select(), o(!1);
+            (T = C == null ? void 0 : C.target) == null || T.select(), o(!1);
           },
-          value: S ? x : a,
+          value: k ? x : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             g ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -12944,28 +12932,28 @@ const BlockStylingProps = () => {
           {
             units: p,
             current: f,
-            onSelect: (v) => {
-              o(!1), m(v), A(v);
+            onSelect: (C) => {
+              o(!1), m(C), w(C);
             }
           }
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(f) !== -1 || S ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(f) !== -1 || k ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => k(!0),
-        onDragEnd: (v) => {
-          if (y(() => ""), k(!1), isEmpty(v))
+        onDragStart: () => S(!0),
+        onDragEnd: (C) => {
+          if (y(() => ""), S(!1), isEmpty(C))
             return;
-          const T = `${v}`, j = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
+          const T = `${C}`, j = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
           B(j);
         },
-        onDrag: (v) => {
-          if (isEmpty(v))
+        onDrag: (C) => {
+          if (isEmpty(C))
             return;
-          y(v);
-          const T = `${v}`, j = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
+          y(C);
+          const T = `${C}`, j = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
           I(j);
         },
         currentValue: a,
@@ -13430,22 +13418,22 @@ 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 C = generateFullClsName(w);
+      m(b, [C], A);
     },
     [b, u, h, p, i, m]
-  ), S = useCallback(() => {
+  ), k = useCallback(() => {
     g(b, [x], !0);
-  }, [b, x, g]), k = useMemo(() => canChangeClass(f, h), [f, h]);
+  }, [b, x, g]), S = useMemo(() => canChangeClass(f, h), [f, h]);
   useEffect(() => {
-    l(k, f);
-  }, [k, l, f]);
-  const [, , C] = useScreenSizeWidth(), E = useCallback(
+    l(S, f);
+  }, [S, l, f]);
+  const [, , v] = useScreenSizeWidth(), E = useCallback(
     (I) => {
-      C({
+      v({
         xs: 400,
         sm: 640,
         md: 800,
@@ -13454,9 +13442,9 @@ const COLOR_PROP = {
         "2xl": 1920
       }[I]);
     },
-    [C]
+    [v]
   ), B = get(f, "dark", null) === u && get(f, "mod", null) === p && get(f, "mq", null) === h;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: k, canReset: f && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: S, canReset: f && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${f && !B ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
@@ -13476,7 +13464,7 @@ const COLOR_PROP = {
         o === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: i, onChange: y }),
         o === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: i, onChange: y })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : k && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => k(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -13698,33 +13686,33 @@ const COLOR_PROP = {
   buttonClass: a = "",
   activeButtonClass: i = ""
 }) => {
-  const [l, , c] = useScreenSizeWidth(), [d, u] = useCanvasDisplayWidth(), [p, h] = useSelectedBreakpoints(), f = p, m = h, { t: g } = useTranslation(), b = useBuilderProp("breakpoints", WEB_BREAKPOINTS), x = (k) => {
-    f.includes(k) ? f.length > 2 && m(f.filter((C) => C !== k)) : m((C) => [...C, k]);
-  }, y = (k) => {
-    n || c(k), u(k);
-  }, S = getBreakpointValue(n ? d : l).toLowerCase();
-  return b.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(b, (k) => /* @__PURE__ */ createElement(
+  const [l, , c] = useScreenSizeWidth(), [d, u] = useCanvasDisplayWidth(), [p, h] = useSelectedBreakpoints(), f = p, m = h, { t: g } = useTranslation(), b = useBuilderProp("breakpoints", WEB_BREAKPOINTS), x = (S) => {
+    f.includes(S) ? f.length > 2 && m(f.filter((v) => v !== S)) : m((v) => [...v, S]);
+  }, y = (S) => {
+    n || c(S), u(S);
+  }, k = getBreakpointValue(n ? d : l).toLowerCase();
+  return b.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(b, (S) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
-      ...k,
+      ...S,
       onClick: y,
-      key: k.breakpoint,
-      currentBreakpoint: S
+      key: S.breakpoint,
+      currentBreakpoint: k
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
-      b.filter((k) => includes(f, toUpper(k.breakpoint))),
-      (k) => /* @__PURE__ */ createElement(
+      b.filter((S) => includes(f, toUpper(S.breakpoint))),
+      (S) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
           canvas: n,
           openDelay: r,
           tooltip: o,
-          ...k,
+          ...S,
           onClick: y,
-          key: k.breakpoint,
-          currentBreakpoint: S,
+          key: S.breakpoint,
+          currentBreakpoint: k,
           buttonClass: a,
           activeButtonClass: i
         }
@@ -13735,16 +13723,16 @@ const COLOR_PROP = {
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
         /* @__PURE__ */ jsx(DropdownMenuLabel, { children: g("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(b, (k) => /* @__PURE__ */ jsx(
+        map(b, (S) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
-            disabled: k.breakpoint === "xs",
-            onCheckedChange: () => x(toUpper(k.breakpoint)),
-            checked: includes(f, toUpper(k.breakpoint)),
-            onSelect: (C) => C.preventDefault(),
-            children: g(k.title)
+            disabled: S.breakpoint === "xs",
+            onCheckedChange: () => x(toUpper(S.breakpoint)),
+            checked: includes(f, toUpper(S.breakpoint)),
+            onSelect: (v) => v.preventDefault(),
+            children: g(S.title)
           },
-          k.breakpoint
+          S.breakpoint
         ))
       ] })
     ] })
@@ -13770,205 +13758,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(), k = useRemoveClassesFromBlocks(), [S] = useSelectedBlockIds(), [v, E] = useState(""), B = useAtomValue$1(chaiDesignTokensAtom), I = (G = first$1(b)) == null ? void 0 : G.prop, { classes: A } = getSplitChaiClasses(get(x, I, "")), C = (r === "default" ? A : n ?? "").split(" ").filter((_) => !isEmpty(_)), T = useMemo(() => [...C].sort((_, F) => {
+    const z = _.startsWith(DESIGN_TOKEN_PREFIX), U = F.startsWith(DESIGN_TOKEN_PREFIX);
+    return z && !U ? -1 : !z && U ? 1 : 0;
+  }), [C]), 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 _ = v.trim().replace(/ +(?= )/g, "").split(" ").map(P);
+    r === "designToken" ? isFunction$1(o) && o(_) : y(S, _, !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: v,
+      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" && v.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 = () => {
+    [v, g, i, D.length]
+  ), K = (_) => {
+    const F = l.trim().replace(/ +(?= )/g, "").split(" ").map(P);
+    k(S, [_]), y(S, 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(C.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(S, 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: v.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" ? k(S, [_]) : (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" ? k(S, [_]) : 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",
@@ -14275,16 +14276,16 @@ const registerChaiLibrary = (r, n) => {
     "div",
     {
       draggable: b,
-      onDragStart: async (S) => {
+      onDragStart: async (k) => {
         try {
           if (i) {
-            i(S);
+            i(k);
             return;
           }
-          let k = null;
+          let S = null;
           if (u === "Image") {
             if (!(r != null && r.image)) return;
-            k = {
+            S = {
               type: "Image",
               blocks: [
                 {
@@ -14297,35 +14298,35 @@ const registerChaiLibrary = (r, n) => {
               ]
             };
           } else if (n) {
-            const C = typeof n == "function" ? await n() : n, E = getBlocksFromHTML(C);
+            const v = typeof n == "function" ? await n() : n, E = getBlocksFromHTML(v);
             if (isEmpty(E)) return;
-            k = {
+            S = {
               type: "Box",
               blocks: E,
               name: get(E, "0._type", "Block")
             };
           } else if (o) {
-            const C = typeof o == "function" ? await o() : o;
-            if (isEmpty(C)) return;
-            k = {
+            const v = typeof o == "function" ? await o() : o;
+            if (isEmpty(v)) return;
+            S = {
               type: "Box",
-              blocks: C,
-              name: get(C, "0._type", "Block")
+              blocks: v,
+              name: get(v, "0._type", "Block")
             };
           } else if (r) {
-            const C = typeof r == "function" ? await r() : r;
-            k = typeof C == "object" ? omit(C, ["component", "icon"]) : C;
+            const v = typeof r == "function" ? await r() : r;
+            S = typeof v == "object" ? omit(v, ["component", "icon"]) : v;
           }
-          if (!k) return;
-          p(S, k, !0), setTimeout(() => {
+          if (!S) return;
+          p(k, S, !0), setTimeout(() => {
             m([]), g();
           }, 200);
-        } catch (k) {
-          console.error("Error in ChaiDraggableBlock drag start:", k);
+        } catch (S) {
+          console.error("Error in ChaiDraggableBlock drag start:", S);
         }
       },
-      onDragEnd: (S) => {
-        l ? l(S) : h();
+      onDragEnd: (k) => {
+        l ? l(k) : h();
       },
       className: `${b ? "cursor-grab active:cursor-grabbing" : ""} ${d}`.trim(),
       children: a
@@ -14370,16 +14371,16 @@ const BlockCard = ({
         return;
       }
       l(!0);
-      let S = await c({ library: n, block: r });
-      typeof S == "string" && (S = getBlocksFromHTML(S)), isEmpty(S) || u(syncBlocksWithDefaults(S), o, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK), setTimeout(() => l(!1), 1e3);
+      let k = await c({ library: n, block: r });
+      typeof k == "string" && (k = getBlocksFromHTML(k)), isEmpty(k) || u(syncBlocksWithDefaults(k), o, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK), setTimeout(() => l(!1), 1e3);
     },
     [d, u, r, c, n, o, a]
   );
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(ChaiDraggableBlock, { draggable: g, onDragStart: async (y) => {
       if (!g) return;
-      let S = await c({ library: n, block: r });
-      typeof S == "string" && (S = getBlocksFromHTML(S)), f(y, { type: "Box", blocks: S, name: p }, !0);
+      let k = await c({ library: n, block: r });
+      typeof k == "string" && (k = getBlocksFromHTML(k)), f(y, { type: "Box", blocks: k, name: p }, !0);
     }, onDragEnd: m, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -14423,28 +14424,28 @@ const BlockCard = ({
     const N = b.current.search(h).map((j) => j.item);
     g(N);
   }, [h]);
-  const x = h.trim() && !isEmpty(m) ? m : d, y = groupBy(x, "group"), [S, k] = useState(null);
+  const x = h.trim() && !isEmpty(m) ? m : d, y = groupBy(x, "group"), [k, S] = useState(null);
   useEffect(() => {
     if (isEmpty(keys$1(y))) {
-      k(null);
+      S(null);
       return;
     }
-    if (!S || !y[S]) {
-      k(first$1(keys$1(y)));
+    if (!k || !y[k]) {
+      S(first$1(keys$1(y)));
       return;
     }
-  }, [y, S]);
-  const C = get(y, S, []), E = useRef(null), { t: B } = useTranslation(), I = useRef(null);
+  }, [y, k]);
+  const v = get(y, k, []), E = useRef(null), { t: B } = useTranslation(), I = useRef(null);
   useEffect(() => {
     var j;
     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) => {
+  }, [c, k]);
+  const A = (N) => {
     E.current && (clearTimeout(E.current), E.current = null), E.current = setTimeout(() => {
-      E.current && k(N);
+      E.current && S(N);
     }, 400);
-  }, A = () => {
+  }, w = () => {
     c != null && c.id && p(c.id);
   };
   if (u)
@@ -14452,7 +14453,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const v = filter(C, (N, j) => j % 2 === 0), T = filter(C, (N, j) => j % 2 === 1);
+  const C = filter(v, (N, j) => j % 2 === 0), T = filter(v, (N, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx(SearchInput, { value: h, setValue: f }),
     /* @__PURE__ */ jsx("div", { className: "relative flex h-full max-h-full flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: `flex h-full flex-1 pt-2 ${o ? "flex-col" : ""}`, children: [
@@ -14471,23 +14472,23 @@ 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")
                     ] })
-                  ] }) }) : o ? /* @__PURE__ */ jsxs(Select$1, { value: S, onValueChange: k, children: [
+                  ] }) }) : o ? /* @__PURE__ */ jsxs(Select$1, { value: k, onValueChange: S, children: [
                     /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: B("Select a group") }) }),
                     /* @__PURE__ */ jsx(SelectContent, { children: map(y, (N, j) => /* @__PURE__ */ jsx(SelectItem, { value: j, children: capitalize(B(j.toLowerCase())) }, j)) })
                   ] }) : map(y, (N, j) => /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      onMouseEnter: () => w(j),
+                      onMouseEnter: () => A(j),
                       onMouseLeave: () => clearTimeout(E.current),
                       role: "button",
-                      onClick: () => k(j),
+                      onClick: () => S(j),
                       className: cn$2(
                         "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                        j === S ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
+                        j === k ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
                       ),
                       children: [
                         /* @__PURE__ */ jsx("span", { children: capitalize(B(j.toLowerCase())) }),
@@ -14509,8 +14510,8 @@ const BlockCard = ({
           onMouseEnter: () => E.current ? clearTimeout(E.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(C) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: `grid w-full gap-2 ${o ? "grid-cols-1 pb-20" : "grid-cols-2 px-2"}`, children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: v.map((N, j) => /* @__PURE__ */ jsx(
+            isEmpty(v) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: B("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: `grid w-full gap-2 ${o ? "grid-cols-1 pb-20" : "grid-cols-2 px-2"}`, children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: C.map((N, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: r,
@@ -14570,19 +14571,19 @@ const BlockCard = ({
         }), f(!0);
       else if (!l && Object.keys(i || {}).length > 0) {
         const g = Object.entries(i).map(([x, y]) => {
-          const S = y, k = S.type || "partial", C = formatReadableName(k);
+          const k = y, S = k.type || "partial", v = formatReadableName(S);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(S.name || x),
-            description: S.description || "",
+            label: formatReadableName(k.name || x),
+            description: k.description || "",
             icon: FrameIcon,
-            group: C,
+            group: v,
             // Use formatted type as group
             category: "partial",
             partialBlockId: x,
             // Store the original ID as partialBlockId
-            _name: S.name
+            _name: k.name
           };
         }), b = uniq(map(g, "group"));
         p({
@@ -14641,7 +14642,7 @@ const BlockCard = ({
   disableBlockGroupsSidebar: l
 }) => {
   var N;
-  const { t: c } = useTranslation(), [d] = useBlocksStore(), [u, p] = useState(""), h = useRef(null), [f] = useAtom$1(addBlockTabAtom), m = (N = find(d, (j) => j._id === o)) == null ? void 0 : N._type, [g, b] = useState("all"), [x, y] = useState(null), S = useRef(null), k = useBuilderProp("flags.dragAndDrop", !1);
+  const { t: c } = useTranslation(), [d] = useBlocksStore(), [u, p] = useState(""), h = useRef(null), [f] = useAtom$1(addBlockTabAtom), m = (N = find(d, (j) => j._id === o)) == null ? void 0 : N._type, [g, b] = useState("all"), [x, y] = useState(null), k = useRef(null), S = useBuilderProp("flags.dragAndDrop", !1);
   useEffect(() => {
     const j = setTimeout(() => {
       var P;
@@ -14650,17 +14651,17 @@ const BlockCard = ({
     return () => clearTimeout(j);
   }, [f]), useEffect(() => {
     u && (b("all"), y(null));
-  }, [u]), useEffect(() => (S.current = debounce((j) => {
+  }, [u]), useEffect(() => (k.current = debounce((j) => {
     b(j);
   }, 500), () => {
-    S.current && S.current.cancel();
+    k.current && k.current.cancel();
   }), []);
-  const C = useCallback((j) => {
-    y(j), S.current && S.current(j);
+  const v = useCallback((j) => {
+    y(j), k.current && k.current(j);
   }, []), E = useCallback(() => {
-    y(null), S.current && S.current.cancel();
+    y(null), k.current && k.current.cancel();
   }, []), B = useCallback((j) => {
-    S.current && S.current.cancel(), b(j), y(null);
+    k.current && k.current.cancel(), b(j), y(null);
   }, []), I = useMemo(
     () => u ? values(n).filter(
       (j) => {
@@ -14669,35 +14670,35 @@ 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]
+  ), C = 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",
           {
             onClick: () => B("all"),
-            onMouseEnter: () => C("all"),
+            onMouseEnter: () => v("all"),
             onMouseLeave: E,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${g === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: c("All")
           },
           "sidebar-all"
         ),
-        A.map((j) => /* @__PURE__ */ jsx(
+        w.map((j) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => B(j),
-            onMouseEnter: () => C(j),
+            onMouseEnter: () => v(j),
             onMouseLeave: E,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${g === j || x === j ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(c(j.toLowerCase()))
@@ -14708,8 +14709,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,
@@ -14717,7 +14718,7 @@ const BlockCard = ({
           ] }) }) : /* @__PURE__ */ jsx("div", { className: `${l ? "p-0" : "p-4"} space-y-6`, children: T.map((j, P) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(j.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + i, children: reject(
-              g === "all" ? filter(values(v), { group: j }) : values(v),
+              g === "all" ? filter(values(C), { group: j }) : values(C),
               { hidden: !0 }
             ).map((L, D) => /* @__PURE__ */ jsx(
               CoreBlock,
@@ -14725,7 +14726,7 @@ const BlockCard = ({
                 parentId: o,
                 position: a,
                 block: L,
-                disabled: !k && (!canAcceptChildBlock(m, L.type) || !canBeNestedInside(m, L.type))
+                disabled: !S && (!canAcceptChildBlock(m, L.type) || !canBeNestedInside(m, L.type))
               },
               L.type + "-" + P + "-" + D
             )) })
@@ -14747,10 +14748,10 @@ const BlockCard = ({
   }, [c, f, d]);
   const g = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []), b = useChaiAddBlockTabs(), x = p && m(PERMISSIONS.IMPORT_HTML), S = useChaiLibraries().length > 0;
+  }, []), b = useChaiAddBlockTabs(), x = p && m(PERMISSIONS.IMPORT_HTML), k = useChaiLibraries().length > 0;
   return useEffect(() => {
-    c === "library" && !S && d("core");
-  }, [c, S, d]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", r), children: [
+    c === "library" && !k && d("core");
+  }, [c, k, d]), /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", r), children: [
     n ? /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
       /* @__PURE__ */ jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: l("Add block") }),
       /* @__PURE__ */ jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: l(c === "html" ? "Enter or paste TailwindCSS HTML snippet" : "Click to add block to page") })
@@ -14758,25 +14759,25 @@ const BlockCard = ({
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (k) => {
-          u(""), d(k);
+        onValueChange: (S) => {
+          u(""), d(S);
         },
         value: c,
         className: "flex h-full max-h-full flex-col overflow-hidden",
         children: [
           /* @__PURE__ */ jsxs(TabsList, { className: `flex items-center ${i ? "h-max w-max justify-start p-1" : "w-full"}`, children: [
-            S && /* @__PURE__ */ jsx(TabsTrigger, { value: "library", className: i ? "h-5 px-2 text-xs" : "", children: l("Library") }),
+            k && /* @__PURE__ */ jsx(TabsTrigger, { value: "library", className: i ? "h-5 px-2 text-xs" : "", children: l("Library") }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", className: i ? "h-5 px-2 text-xs" : "", children: l("Blocks") }),
             f && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", className: i ? "h-5 px-2 text-xs" : "", children: l("Partials") }),
             x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", className: i ? "h-5 px-2 text-xs" : "", children: l("Import") }) : null,
-            map(b, (k) => /* @__PURE__ */ jsx(
+            map(b, (S) => /* @__PURE__ */ jsx(
               TabsTrigger,
               {
-                value: k.id,
+                value: S.id,
                 className: i ? "h-5 px-2 text-xs" : "",
-                children: React__default.createElement(k.tab)
+                children: React__default.createElement(S.tab)
               },
-              `tab-add-block-${k.id}`
+              `tab-add-block-${S.id}`
             ))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(
@@ -14788,7 +14789,7 @@ const BlockCard = ({
               disableBlockGroupsSidebar: i
             }
           ) }) }) }),
-          S && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { fromSidebar: i, parentId: o, position: a }) }),
+          k && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { fromSidebar: i, parentId: o, position: a }) }),
           f && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(
             PartialBlocks,
             {
@@ -14799,7 +14800,7 @@ const BlockCard = ({
             }
           ) }) }) }),
           x ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20 ", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: o, position: a, fromSidebar: i }) }) : null,
-          map(b, (k) => /* @__PURE__ */ jsx(TabsContent, { value: k.id, children: React__default.createElement(k.tabContent, { close: g, parentId: o, position: a }) }, `panel-add-block-${k.id}`))
+          map(b, (S) => /* @__PURE__ */ jsx(TabsContent, { value: S.id, children: React__default.createElement(S.tabContent, { close: g, parentId: o, position: a }) }, `panel-add-block-${S.id}`))
         ]
       }
     )
@@ -15201,38 +15202,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);
-  }, [v, T] = useAtom$1(currentAddSelection), N = () => {
-    var _;
-    j(), r.parent.isSelected || T((_ = r == null ? void 0 : r.parent) == null ? void 0 : _.id);
+  const u = r.children.length > 0, { highlightBlock: p, clearHighlight: h } = useBlockHighlight(), f = useIsDragAndDropEnabled(), { id: m, data: g, isSelected: b, willReceiveDrop: x, isDragging: y, isEditing: k, handleClick: S } = r, v = useStructureValidation(), E = useMemo(() => v.getBlockErrors(m), [v, 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);
+  }, [C, T] = useAtom$1(currentAddSelection), N = () => {
+    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(), S(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 +15253,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 +15263,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,
@@ -15293,10 +15294,10 @@ const useStructureValidation = () => {
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
               b ? "bg-primary/20" : "hover:bg-primary/10",
               x && canAcceptChildBlock(g._type, "Icon") ? "bg-green-200" : "",
-              (r == null ? void 0 : r.id) === v ? "bg-primary/10" : "",
+              (r == null ? void 0 : r.id) === C ? "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,19 +15313,19 @@ 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"
                     ),
                     children: [
                       E.length > 0 ? /* @__PURE__ */ jsx("div", { className: "text-red-500", children: /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-3 w-3" }) }) : /* @__PURE__ */ jsx(TypeIcon, { type: g == null ? void 0 : g._type }),
-                      S ? /* @__PURE__ */ jsx(Input, { node: r }) : /* @__PURE__ */ jsx(
+                      k ? /* @__PURE__ */ jsx(Input, { node: r }) : /* @__PURE__ */ jsx(
                         "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 +15351,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,20 +15805,20 @@ 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) => {
-      const v = { ...g };
-      setPreviousTheme(v), b(A), m(), toast.success("Theme updated", {
+  const [g, b] = useTheme(), x = useThemeOptions(), { t: y } = useTranslation(), k = React.useCallback(
+    (w) => {
+      const C = { ...g };
+      setPreviousTheme(C), 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" }),
             " Undo"
           ] }),
           onClick: () => {
-            b(v), clearPreviousTheme(), toast.dismiss();
+            b(C), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
@@ -15825,62 +15826,62 @@ const useStructureValidation = () => {
       });
     },
     [g, b, m]
-  ), k = () => {
-    const A = d.find((v) => Object.keys(v)[0] === a);
-    if (A) {
-      const v = Object.values(A)[0];
-      v && typeof v == "object" && "fontFamily" in v && "borderRadius" in v && "colors" in v ? (S(v), i(""), m()) : console.error("Invalid preset structure:", v);
+  ), S = () => {
+    const w = d.find((C) => Object.keys(C)[0] === a);
+    if (w) {
+      const C = Object.values(w)[0];
+      C && typeof C == "object" && "fontFamily" in C && "borderRadius" in C && "colors" in C ? (k(C), i(""), m()) : console.error("Invalid preset structure:", C);
     } else
       console.error("Preset not found:", a);
-  }, C = (A) => {
-    S(A), i(""), m();
+  }, v = (w) => {
+    k(w), i(""), m();
   }, E = useDebouncedCallback(
-    (A, v) => {
+    (w, C) => {
       b(() => ({
         ...g,
         fontFamily: {
           ...g.fontFamily,
-          [A.replace(/font-/g, "")]: v
+          [w.replace(/font-/g, "")]: C
         }
       })), 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, C) => {
       b(() => {
-        const T = get(g, `colors.${A}`);
-        return n ? set(T, 1, v) : set(T, 0, v), m(), {
+        const T = get(g, `colors.${w}`);
+        return n ? set(T, 1, C) : set(T, 0, C), 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]) => {
-    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: [
+  ), A = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([C]) => {
+    const T = get(g, `colors.${C}.${n ? 1 : 0}`);
+    return T ? /* @__PURE__ */ jsxs("div", { id: `theme-${C}`, className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
           value: T,
-          onChange: (N) => I(v, N)
+          onChange: (N) => I(C, N)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: v.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" ") + (!v.toLowerCase().includes("foreground") && !v.toLowerCase().includes("border") && !v.toLowerCase().includes("input") && !v.toLowerCase().includes("ring") && !v.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, v) : null;
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: C.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" ") + (!C.toLowerCase().includes("foreground") && !C.toLowerCase().includes("border") && !C.toLowerCase().includes("input") && !C.toLowerCase().includes("ring") && !C.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, C) : null;
   }) });
   return p("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", r), children: [
@@ -15895,12 +15896,12 @@ 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("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(T) }, v);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((w) => {
+              const C = Object.keys(w)[0], T = C.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: C, children: capitalize(T) }, C);
             }) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: y("Apply") }) })
+          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: S, children: y("Apply") }) })
         ] })
       ] }),
       /* @__PURE__ */ jsx(Separator, {}),
@@ -15909,14 +15910,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, C]) => /* @__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, "")] || C[Object.keys(C)[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 +15943,7 @@ const useStructureValidation = () => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (A) => o(A),
+                  onCheckedChange: (w) => o(w),
                   "aria-label": y("Toggle dark mode"),
                   className: "mx-1"
                 }
@@ -15950,14 +15951,14 @@ 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,
           {
             open: l,
             onOpenChange: c,
-            onImport: C
+            onImport: v
           }
         ) })
       ] }),
@@ -16700,36 +16701,36 @@ const UndoRedo = () => {
   useEffect(() => {
     i(n);
   }, [n]);
-  const S = () => {
+  const k = () => {
     if (l.startsWith("@")) {
       m(y("Attribute keys cannot start with @"));
       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);
+  }, S = (A) => {
+    const w = a.filter((C, T) => T !== A);
+    o(w), i(w);
+  }, v = (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() : k());
+  }, I = useCallback((A) => {
+    const w = (N) => /[.,!?;:]/.test(N), C = (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 +16739,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 } = C(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: $ } = C(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() : k();
         },
         className: "space-y-3",
         children: [
@@ -16767,7 +16768,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 +16788,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 +16801,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: () => v(w), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(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 +16952,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-DUoMdCBl.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,25 +16978,25 @@ 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);
+  ), { t: x } = useTranslation(), y = useMemo(() => [...p, ...h], [p, h]), k = useBuilderProp("htmlDir", "ltr"), S = find(y, { id: n }) ?? first$1(y), v = get(S, "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;
-  }, [n, C, i, y]), B = useCallback(() => {
+    const w = find(y, { id: n });
+    return get(w, "view", "standard") === "standard" ? v : i;
+  }, [n, v, i, y]), B = useCallback(() => {
     o(a.current);
   }, [o, n]), I = useCallback(() => {
     o("outline");
@@ -17332,13 +17004,13 @@ 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]
   );
-  return /* @__PURE__ */ jsx("div", { dir: S, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  return /* @__PURE__ */ jsx("div", { dir: k, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -17348,25 +17020,25 @@ 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, C) => /* @__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) }) })
-              ] }, "button-top-" + v)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
+              ] }, "button-top-" + C)) }),
               /* @__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, C) => /* @__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) }) })
-              ] }, "button-bottom-" + v)) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
+              ] }, "button-bottom-" + C)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -17376,15 +17048,15 @@ const RootLayout = () => {
                 initial: { width: E },
                 animate: { width: E },
                 transition: { duration: 0.3, ease: "easeInOut" },
-                children: n !== null && get(k, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
+                children: n !== null && get(S, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(k, "isInternal", !1) ? "" : "w-64"}`,
-                      children: /* @__PURE__ */ jsx("span", { children: x(get(k, "label", "")) })
+                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(S, "isInternal", !1) ? "" : "w-64"}`,
+                      children: /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(k, "panel", NoopComponent), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {}) }) })
                 ] })
               }
             ),
@@ -17438,7 +17110,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, {}) }) })
                 ] }) })
               }
             )
@@ -17447,34 +17119,34 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    n !== null && get(k, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(
+    n !== null && get(S, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "left",
         className: "flex flex-col gap-0 p-0 sm:max-w-full",
-        style: { width: `${C}px` },
+        style: { width: `${v}px` },
         children: [
           /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border px-2 py-2.5", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(k, "icon", null) }),
-            /* @__PURE__ */ jsx("span", { children: x(get(k, "label", "")) })
+            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
+            /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(k, "panel", NoopComponent), {
+          /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
             close: I
           }) }) })
         ]
       }
     ) }),
     " ",
-    n !== null && get(k, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${C}px` }, children: [
+    n !== null && get(S, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${v}px` }, children: [
       /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border px-2 py-3.5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(k, "icon", null) }),
-        /* @__PURE__ */ jsx("span", { children: x(get(k, "label", "")) })
+        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
+        /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(k, "panel", NoopComponent), {
+      /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
         close: I
       }) }) })
     ] }) }),
-    n !== null && get(k, "view") === "overlay" && /* @__PURE__ */ jsx(
+    n !== null && get(S, "view") === "overlay" && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "absolute bottom-0 left-12 right-0 top-0 z-50",
@@ -17493,12 +17165,12 @@ const RootLayout = () => {
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex h-[50px] items-center justify-between border-b border-border p-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "-ml-2 flex items-center gap-2 text-lg font-bold", children: [
-                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(k, "icon", null) }),
-                  /* @__PURE__ */ jsx("span", { children: x(get(k, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(S, "icon", null) }),
+                  /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
                 ] }),
                 /* @__PURE__ */ jsx(Button, { onClick: () => B(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-5 w-5" }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(k, "panel", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
                 close: I
               }) }) })
             ]
@@ -17559,8 +17231,8 @@ const RootLayout = () => {
     const b = i.toLowerCase();
     return Object.fromEntries(
       Object.entries(a).filter(([x, y]) => {
-        var S;
-        return (x == null ? void 0 : x.toLowerCase().includes(b)) || ((S = y == null ? void 0 : y.description) == null ? void 0 : S.toLowerCase().includes(b));
+        var k;
+        return (x == null ? void 0 : x.toLowerCase().includes(b)) || ((k = y == null ? void 0 : y.description) == null ? void 0 : k.toLowerCase().includes(b));
       })
     );
   }, [a, i]), f = (b) => {
@@ -17570,8 +17242,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, k = b.currentTarget, S = k.offsetWidth, v = k.offsetHeight, E = window.innerWidth - S, B = window.innerHeight - v, I = Math.max(0, Math.min(x, E)), A = Math.max(0, Math.min(y, B));
+    o(I, A);
   }, g = () => {
     d(!1);
   };
@@ -17816,46 +17488,46 @@ 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;
   x.d.clear();
   let y = !0;
-  function S() {
+  function k() {
     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 S(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 C = m(r, A);
     try {
-      return returnAtomValue(v);
+      return returnAtomValue(C);
     } 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, C.n), isPendingPromise(x.v) && addPendingPromiseToDependency(n, x.v, C), (w = i.get(A)) == null || w.t.add(n), y || k();
     }
   }
-  let C, E;
+  let v, E;
   const B = {
     get signal() {
-      return C || (C = new AbortController()), C.signal;
+      return v || (v = new AbortController()), v.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 +17535,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, S, B);
+    return setAtomStateValueOrPromise(r, n, A), isPromiseLike$1(A) && (registerAbortHandler(A, () => v == null ? void 0 : v.abort()), A.then(k, k)), 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));
   }
@@ -17882,18 +17554,18 @@ const atomRead = (r, n, ...o) => n.read(...o), atomWrite = (r, n, ...o) => n.wri
 }, writeAtomState = (r, n, ...o) => {
   const a = getBuildingBlocks(r), i = a[3], l = a[6], c = a[8], d = a[11], u = a[12], p = a[13], h = a[14], f = a[15], m = a[17];
   let g = !0;
-  const b = (y) => returnAtomValue(h(r, y)), x = (y, ...S) => {
-    var k;
-    const C = d(r, y);
+  const b = (y) => returnAtomValue(h(r, y)), x = (y, ...k) => {
+    var S;
+    const v = d(r, y);
     try {
       if (isSelfAtom(n, y)) {
         if (!hasInitialValue(y))
           throw new Error("atom not writable");
-        const E = C.n, B = S[0];
-        setAtomStateValueOrPromise(r, y, B), m(r, y), E !== C.n && (i.add(y), (k = l.c) == null || k.call(l, y), f(r, y));
+        const E = v.n, B = k[0];
+        setAtomStateValueOrPromise(r, y, B), m(r, y), E !== v.n && (i.add(y), (S = l.c) == null || S.call(l, y), f(r, y));
         return;
       } else
-        return writeAtomState(r, y, ...S);
+        return writeAtomState(r, y, ...k);
     } finally {
       g || (p(r), u(r));
     }
@@ -17934,19 +17606,19 @@ const atomRead = (r, n, ...o) => n.read(...o), atomWrite = (r, n, ...o) => n.wri
     }, i.set(n, b), (o = c.m) == null || o.call(c, n), isActuallyWritableAtom(n)) {
       const x = () => {
         let y = !0;
-        const S = (...k) => {
+        const k = (...S) => {
           try {
-            return m(r, n, ...k);
+            return m(r, n, ...S);
           } finally {
             y || (h(r), p(r));
           }
         };
         try {
-          const k = d(r, n, S);
-          k && (b.u = () => {
+          const S = d(r, n, k);
+          S && (b.u = () => {
             y = !0;
             try {
-              k();
+              S();
             } finally {
               y = !1;
             }
@@ -18299,10 +17971,10 @@ function domToJsx(r, n = 0) {
       } else if (m.name === "style" && m.value) {
         const g = m.value.split(";").reduce(
           (b, x) => {
-            const [y, S] = x.split(":").map((k) => k.trim());
-            if (y && S) {
-              const k = y.replace(/-([a-z])/g, (C) => C[1].toUpperCase());
-              b[k] = S.replace(/['"]/g, "");
+            const [y, k] = x.split(":").map((S) => S.trim());
+            if (y && k) {
+              const S = y.replace(/-([a-z])/g, (v) => v[1].toUpperCase());
+              b[S] = k.replace(/['"]/g, "");
             }
             return b;
           },
@@ -18328,7 +18000,7 @@ function domToJsx(r, n = 0) {
         (m, g) => {
           const [b, x] = g.split(":").map((y) => y.trim());
           if (b && x) {
-            const y = b.replace(/-([a-z])/g, (S) => S[1].toUpperCase());
+            const y = b.replace(/-([a-z])/g, (k) => k[1].toUpperCase());
             m[y] = x.replace(/['"]/g, "");
           }
           return m;
@@ -18401,7 +18073,7 @@ ${i}${i}${l == null ? void 0 : l.trimEnd()}
 ${i})
 }`, { jsx: l, html: formatHtml(c), componentName: a };
 }, ExportCodeModalContent = ({ tab: r }) => {
-  var S;
+  var k;
   const { t: n } = useTranslation(), [o, a] = useState({ html: "", jsx: "" }), i = useSelectedBlock(), l = useBlocksHtmlForAi(), [c, d] = useState(""), [u, p] = useState(!1), h = () => {
     switch (r) {
       case "js":
@@ -18426,52 +18098,52 @@ ${i})
   }, m = useCallback(async () => {
     try {
       p(!1);
-      let k = l({ blockId: i == null ? void 0 : i._id, additionalCoreBlocks: ["Icon"] });
-      k = k.replace(/\s*bid=["'][^"']*["']/g, "");
-      const C = r === "ts", {
+      let S = l({ blockId: i == null ? void 0 : i._id, additionalCoreBlocks: ["Icon"] });
+      S = S.replace(/\s*bid=["'][^"']*["']/g, "");
+      const v = r === "ts", {
         jsx: E,
         html: B,
         componentName: I
       } = await getExportedCoded({
         selectedBlock: i,
-        html: k,
-        isTypeScript: C
+        html: S,
+        isTypeScript: v
       });
       a({ html: B, jsx: E }), d(I), p(!0);
     } catch {
-      const C = "<div>Export failed. Close the modal and try again.</div>";
-      a({ html: C, jsx: C }), toast.error(n("Failed to generate export HTML"));
+      const v = "<div>Export failed. Close the modal and try again.</div>";
+      a({ html: v, jsx: v }), toast.error(n("Failed to generate export HTML"));
     }
   }, [n, r, i, l]);
   useEffect(() => {
     m();
   }, [m, r]);
   const g = useCallback(
-    async (k) => {
+    async (S) => {
       try {
-        navigator.clipboard.writeText(k), toast.success(n("Export code copied!"));
+        navigator.clipboard.writeText(S), toast.success(n("Export code copied!"));
       } catch {
         toast.error(n("Failed to copy export code"));
       }
     },
     [n]
-  ), b = (k) => {
-    const C = new Blob([k], { type: "text/jsx" }), E = URL.createObjectURL(C), B = document.createElement("a");
+  ), b = (S) => {
+    const v = new Blob([S], { type: "text/jsx" }), E = URL.createObjectURL(v), B = document.createElement("a");
     B.href = E, B.download = h(), document.body.appendChild(B), B.click(), URL.revokeObjectURL(E), document.body.removeChild(B), toast.success(n("Export code downloaded successfully!"));
   }, x = /* @__PURE__ */ jsxs("span", { children: [
     "Download ",
     /* @__PURE__ */ jsx("span", { className: "font-mono text-xs font-light text-gray-300", children: h() })
   ] }), y = useMemo(() => {
-    const k = { extend: shadcnTheme() }, C = JSON.stringify(k, null, 2);
+    const S = { extend: shadcnTheme() }, v = JSON.stringify(S, null, 2);
     return `{
   // Your tailwind config ...
 
-  "theme": ${C == null ? void 0 : C.split(`
+  "theme": ${v == null ? void 0 : v.split(`
 `).join(`
   `)},
 }`;
   }, []);
-  return ((S = o == null ? void 0 : o.jsx) == null ? void 0 : S.length) > 0 && u ? /* @__PURE__ */ jsx(
+  return ((k = o == null ? void 0 : o.jsx) == null ? void 0 : k.length) > 0 && u ? /* @__PURE__ */ jsx(
     CodeDisplay,
     {
       onCopy: g,
@@ -18559,103 +18231,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
 };