@chaibuilder/sdk 2.0.0-beta.102 → 2.0.0-beta.104

package/dist/core.js

@@ -4,16 +4,16 @@ var U = (o, n, r) => K(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useState, useRef, Suspense, createElement, memo, lazy } from "react";
-import { ag as useToast, S as Skeleton, B as Button, L as Label, D as Dialog, r as DialogTrigger, s as DialogContent, V as Popover, O as Tooltip, P as TooltipTrigger, W as PopoverTrigger, Q as TooltipContent, X as PopoverContent, aj as Command, al as CommandInput, am as CommandList, an as CommandEmpty, ao as CommandGroup, ap as CommandItem, g as Badge, T as Textarea, I as Input$1, U as TooltipPortal, d as AccordionItem, e as AccordionTrigger, f as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, C as Card, x as CardHeader, E as CardDescription, F as CardContent, y as CardFooter, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, as as ContextMenu, at as ContextMenuTrigger, au as ContextMenuContent, av as ContextMenuItem, i as AlertDialog, j as AlertDialogTrigger, k as AlertDialogContent, l as AlertDialogHeader, n as AlertDialogTitle, o as AlertDialogDescription, m as AlertDialogFooter, q as AlertDialogCancel, p as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, a as Switch, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-iqXuo9Yt.js";
-import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
-import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, each, set, first, isObject, memoize, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, forEach, unset, chunk, cloneDeep, pick, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, findIndex, take, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, toUpper, round } from "lodash-es";
+import { ag as useToast, S as Skeleton, B as Button, L as Label, D as Dialog, r as DialogTrigger, s as DialogContent, V as Popover, O as Tooltip, P as TooltipTrigger, W as PopoverTrigger, Q as TooltipContent, X as PopoverContent, aj as Command, al as CommandInput, am as CommandList, an as CommandEmpty, ao as CommandGroup, ap as CommandItem, g as Badge, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, T as Textarea, I as Input$1, U as TooltipPortal, d as AccordionItem, e as AccordionTrigger, f as AccordionContent, G as ScrollArea, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, C as Card, x as CardHeader, E as CardDescription, F as CardContent, y as CardFooter, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, as as ContextMenu, at as ContextMenuTrigger, au as ContextMenuContent, av as ContextMenuItem, i as AlertDialog, j as AlertDialogTrigger, k as AlertDialogContent, l as AlertDialogHeader, n as AlertDialogTitle, o as AlertDialogDescription, m as AlertDialogFooter, q as AlertDialogCancel, p as AlertDialogAction, a as Switch, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-iqXuo9Yt.js";
+import { atom as atom$1, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
+import { find, filter, flatten, map, omit, isString, has, each, set, first, get, isObject, memoize, compact, isEmpty, noop, includes, without, keys, range, values, flattenDeep, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, findIndex, take, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
 import { Provider as Provider$1 } from "react-wrap-balancer";
-import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { useTranslation, initReactI18next } from "react-i18next";
 import { useTranslation as De } from "react-i18next";
+import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, TextIcon, RowsIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, TextIcon, RowsIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { useThrottledCallback, useDebouncedCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
@@ -89,221 +89,221 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   for (const i of n.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (h, ...x) => h.read(...x), p = (h, ...x) => h.write(...x), u = (h, x) => {
-  var f;
-  return (f = h.unstable_onInit) == null ? void 0 : f.call(h, x);
-}, g = (h, x) => {
-  var f;
-  return (f = h.onMount) == null ? void 0 : f.call(h, x);
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (f, ...b) => f.read(...b), p = (f, ...b) => f.write(...b), u = (f, b) => {
+  var x;
+  return (x = f.unstable_onInit) == null ? void 0 : x.call(f, b);
+}, g = (f, b) => {
+  var x;
+  return (x = f.onMount) == null ? void 0 : x.call(f, b);
 }, ...m) => {
-  const h = m[0] || ((C) => {
-    let N = o.get(C);
-    return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(C, N), u == null || u(C, j)), N;
-  }), x = m[1] || (() => {
-    let C, N;
+  const f = m[0] || ((C) => {
+    let T = o.get(C);
+    return T || (T = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(C, T), u == null || u(C, _)), T;
+  }), b = m[1] || (() => {
+    let C, T;
     const k = (v) => {
       try {
         v();
-      } catch (I) {
-        C || (C = !0, N = I);
+      } catch (N) {
+        C || (C = !0, T = N);
       }
     };
     do {
       c.f && k(c.f);
-      const v = /* @__PURE__ */ new Set(), I = v.add.bind(v);
-      a.forEach((T) => {
-        var R;
-        return (R = n.get(T)) == null ? void 0 : R.l.forEach(I);
-      }), a.clear(), i.forEach(I), i.clear(), l.forEach(I), l.clear(), v.forEach(k), a.size && f();
+      const v = /* @__PURE__ */ new Set(), N = v.add.bind(v);
+      a.forEach((I) => {
+        var M;
+        return (M = n.get(I)) == null ? void 0 : M.l.forEach(N);
+      }), a.clear(), i.forEach(N), i.clear(), l.forEach(N), l.clear(), v.forEach(k), a.size && x();
     } while (a.size || i.size || l.size);
     if (C)
-      throw N;
-  }), f = m[2] || (() => {
-    const C = [], N = /* @__PURE__ */ new WeakSet(), k = /* @__PURE__ */ new WeakSet(), v = Array.from(a);
+      throw T;
+  }), x = m[2] || (() => {
+    const C = [], T = /* @__PURE__ */ new WeakSet(), k = /* @__PURE__ */ new WeakSet(), v = Array.from(a);
     for (; v.length; ) {
-      const I = v[v.length - 1], T = h(I);
-      if (k.has(I)) {
+      const N = v[v.length - 1], I = f(N);
+      if (k.has(N)) {
         v.pop();
         continue;
       }
-      if (N.has(I)) {
-        r.get(I) === T.n && C.push([I, T]), k.add(I), v.pop();
+      if (T.has(N)) {
+        r.get(N) === I.n && C.push([N, I]), k.add(N), v.pop();
         continue;
       }
-      N.add(I);
-      for (const R of getMountedOrPendingDependents(I, T, n))
-        N.has(R) || v.push(R);
+      T.add(N);
+      for (const M of getMountedOrPendingDependents(N, I, n))
+        T.has(M) || v.push(M);
     }
-    for (let I = C.length - 1; I >= 0; --I) {
-      const [T, R] = C[I];
-      let M = !1;
-      for (const _ of R.d.keys())
-        if (_ !== T && a.has(_)) {
-          M = !0;
+    for (let N = C.length - 1; N >= 0; --N) {
+      const [I, M] = C[N];
+      let P = !1;
+      for (const j of M.d.keys())
+        if (j !== I && a.has(j)) {
+          P = !0;
           break;
         }
-      M && (b(T), E(T)), r.delete(T);
+      P && (h(I), E(I)), r.delete(I);
     }
-  }), b = m[3] || ((C) => {
-    var N, k;
-    const v = h(C);
+  }), h = m[3] || ((C) => {
+    var T, k;
+    const v = f(C);
     if (isAtomStateInitialized(v) && (n.has(C) && r.get(C) !== v.n || Array.from(v.d).every(
       ([L, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        b(L).n === $
+        h(L).n === $
       )
     )))
       return v;
     v.d.clear();
-    let I = !0;
-    const T = () => {
-      n.has(C) && (E(C), f(), x());
-    }, R = (L) => {
+    let N = !0;
+    const I = () => {
+      n.has(C) && (E(C), x(), b());
+    }, M = (L) => {
       var $;
       if (isSelfAtom(C, L)) {
-        const H = h(L);
+        const H = f(L);
         if (!isAtomStateInitialized(H))
           if (hasInitialValue(L))
-            setAtomStateValueOrPromise(L, L.init, h);
+            setAtomStateValueOrPromise(L, L.init, f);
           else
             throw new Error("no atom init");
         return returnAtomValue(H);
       }
-      const O = b(L);
+      const O = h(L);
       try {
         return returnAtomValue(O);
       } finally {
-        v.d.set(L, O.n), isPendingPromise(v.v) && addPendingPromiseToDependency(C, v.v, O), ($ = n.get(L)) == null || $.t.add(C), I || T();
+        v.d.set(L, O.n), isPendingPromise(v.v) && addPendingPromiseToDependency(C, v.v, O), ($ = n.get(L)) == null || $.t.add(C), N || I();
       }
     };
-    let M, _;
-    const P = {
+    let P, j;
+    const R = {
       get signal() {
-        return M || (M = new AbortController()), M.signal;
+        return P || (P = new AbortController()), P.signal;
       },
       get setSelf() {
-        return !_ && isActuallyWritableAtom(C) && (_ = (...L) => {
-          if (!I)
+        return !j && isActuallyWritableAtom(C) && (j = (...L) => {
+          if (!N)
             try {
               return B(C, ...L);
             } finally {
-              f(), x();
+              x(), b();
             }
-        }), _;
+        }), j;
       }
     }, D = v.n;
     try {
-      const L = d(C, R, P);
-      return setAtomStateValueOrPromise(C, L, h), isPromiseLike$2(L) && ((N = L.onCancel) == null || N.call(L, () => M == null ? void 0 : M.abort()), L.then(
-        T,
-        T
+      const L = d(C, M, R);
+      return setAtomStateValueOrPromise(C, L, f), isPromiseLike$2(L) && ((T = L.onCancel) == null || T.call(L, () => P == null ? void 0 : P.abort()), L.then(
+        I,
+        I
       )), v;
     } catch (L) {
       return delete v.v, v.e = L, ++v.n, v;
     } finally {
-      I = !1, D !== v.n && r.get(C) === D && (r.set(C, v.n), a.add(C), (k = c.c) == null || k.call(c, C));
+      N = !1, D !== v.n && r.get(C) === D && (r.set(C, v.n), a.add(C), (k = c.c) == null || k.call(c, C));
     }
   }), y = m[4] || ((C) => {
-    const N = [C];
-    for (; N.length; ) {
-      const k = N.pop(), v = h(k);
-      for (const I of getMountedOrPendingDependents(k, v, n)) {
-        const T = h(I);
-        r.set(I, T.n), N.push(I);
+    const T = [C];
+    for (; T.length; ) {
+      const k = T.pop(), v = f(k);
+      for (const N of getMountedOrPendingDependents(k, v, n)) {
+        const I = f(N);
+        r.set(N, I.n), T.push(N);
       }
     }
-  }), B = m[5] || ((C, ...N) => {
+  }), B = m[5] || ((C, ...T) => {
     let k = !0;
-    const v = (T) => returnAtomValue(b(T)), I = (T, ...R) => {
-      var M;
-      const _ = h(T);
+    const v = (I) => returnAtomValue(h(I)), N = (I, ...M) => {
+      var P;
+      const j = f(I);
       try {
-        if (isSelfAtom(C, T)) {
-          if (!hasInitialValue(T))
+        if (isSelfAtom(C, I)) {
+          if (!hasInitialValue(I))
             throw new Error("atom not writable");
-          const P = _.n, D = R[0];
-          setAtomStateValueOrPromise(T, D, h), E(T), P !== _.n && (a.add(T), (M = c.c) == null || M.call(c, T), y(T));
+          const R = j.n, D = M[0];
+          setAtomStateValueOrPromise(I, D, f), E(I), R !== j.n && (a.add(I), (P = c.c) == null || P.call(c, I), y(I));
           return;
         } else
-          return B(T, ...R);
+          return B(I, ...M);
       } finally {
-        k || (f(), x());
+        k || (x(), b());
       }
     };
     try {
-      return p(C, v, I, ...N);
+      return p(C, v, N, ...T);
     } finally {
       k = !1;
     }
   }), E = m[6] || ((C) => {
-    var N;
-    const k = h(C), v = n.get(C);
+    var T;
+    const k = f(C), v = n.get(C);
     if (v && !isPendingPromise(k.v)) {
-      for (const [I, T] of k.d)
-        if (!v.d.has(I)) {
-          const R = h(I);
-          w(I).t.add(C), v.d.add(I), T !== R.n && (a.add(I), (N = c.c) == null || N.call(c, I), y(I));
+      for (const [N, I] of k.d)
+        if (!v.d.has(N)) {
+          const M = f(N);
+          w(N).t.add(C), v.d.add(N), I !== M.n && (a.add(N), (T = c.c) == null || T.call(c, N), y(N));
         }
-      for (const I of v.d || [])
-        if (!k.d.has(I)) {
-          v.d.delete(I);
-          const T = S(I);
-          T == null || T.t.delete(C);
+      for (const N of v.d || [])
+        if (!k.d.has(N)) {
+          v.d.delete(N);
+          const I = S(N);
+          I == null || I.t.delete(C);
         }
     }
   }), w = m[7] || ((C) => {
-    var N;
-    const k = h(C);
+    var T;
+    const k = f(C);
     let v = n.get(C);
     if (!v) {
-      b(C);
-      for (const I of k.d.keys())
-        w(I).t.add(C);
+      h(C);
+      for (const N of k.d.keys())
+        w(N).t.add(C);
       if (v = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(k.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, n.set(C, v), (N = c.m) == null || N.call(c, C), isActuallyWritableAtom(C)) {
-        const I = () => {
-          let T = !0;
-          const R = (...M) => {
+      }, n.set(C, v), (T = c.m) == null || T.call(c, C), isActuallyWritableAtom(C)) {
+        const N = () => {
+          let I = !0;
+          const M = (...P) => {
             try {
-              return B(C, ...M);
+              return B(C, ...P);
             } finally {
-              T || (f(), x());
+              I || (x(), b());
             }
           };
           try {
-            const M = g(C, R);
-            M && (v.u = () => {
-              T = !0;
+            const P = g(C, M);
+            P && (v.u = () => {
+              I = !0;
               try {
-                M();
+                P();
               } finally {
-                T = !1;
+                I = !1;
               }
             });
           } finally {
-            T = !1;
+            I = !1;
           }
         };
-        l.add(I);
+        l.add(N);
       }
     }
     return v;
   }), S = m[8] || ((C) => {
-    var N;
-    const k = h(C);
+    var T;
+    const k = f(C);
     let v = n.get(C);
-    if (v && !v.l.size && !Array.from(v.t).some((I) => {
-      var T;
-      return (T = n.get(I)) == null ? void 0 : T.d.has(C);
+    if (v && !v.l.size && !Array.from(v.t).some((N) => {
+      var I;
+      return (I = n.get(N)) == null ? void 0 : I.d.has(C);
     })) {
-      v.u && i.add(v.u), v = void 0, n.delete(C), (N = c.u) == null || N.call(c, C);
-      for (const I of k.d.keys()) {
-        const T = S(I);
-        T == null || T.t.delete(C);
+      v.u && i.add(v.u), v = void 0, n.delete(C), (T = c.u) == null || T.call(c, C);
+      for (const N of k.d.keys()) {
+        const I = S(N);
+        I == null || I.t.delete(C);
       }
       return;
     }
@@ -323,32 +323,32 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     u,
     g,
     // building-block functions
-    h,
-    x,
     f,
     b,
+    x,
+    h,
     y,
     B,
     E,
     w,
     S
-  ], j = {
-    get: (C) => returnAtomValue(b(C)),
-    set: (C, ...N) => {
+  ], _ = {
+    get: (C) => returnAtomValue(h(C)),
+    set: (C, ...T) => {
       try {
-        return B(C, ...N);
+        return B(C, ...T);
       } finally {
-        f(), x();
+        x(), b();
       }
     },
-    sub: (C, N) => {
+    sub: (C, T) => {
       const v = w(C).l;
-      return v.add(N), x(), () => {
-        v.delete(N), S(C), x();
+      return v.add(T), b(), () => {
+        v.delete(T), S(C), b();
       };
     }
   };
-  return Object.defineProperty(j, BUILDING_BLOCKS, { value: A }), j;
+  return Object.defineProperty(_, BUILDING_BLOCKS, { value: A }), _;
 }, INTERNAL_buildStoreRev1 = buildStore;
 let keyCount = 0;
 function atom(o, n) {
@@ -384,36 +384,36 @@ function splitAtom(o, n) {
         if (p)
           return p;
         const u = d && r.get(d), g = [], m = [];
-        return c.forEach((h, x) => {
-          const f = x;
-          m[x] = f;
-          const b = u && u.atomList[u.keyList.indexOf(f)];
-          if (b) {
-            g[x] = b;
+        return c.forEach((f, b) => {
+          const x = b;
+          m[b] = x;
+          const h = u && u.atomList[u.keyList.indexOf(x)];
+          if (h) {
+            g[b] = h;
             return;
           }
           const y = (E) => {
-            const w = E(l), S = E(o), j = a(S, w == null ? void 0 : w.arr).keyList.indexOf(f);
-            if (j < 0 || j >= S.length) {
-              const C = c[a(c).keyList.indexOf(f)];
+            const w = E(l), S = E(o), _ = a(S, w == null ? void 0 : w.arr).keyList.indexOf(x);
+            if (_ < 0 || _ >= S.length) {
+              const C = c[a(c).keyList.indexOf(x)];
               if (C)
                 return C;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return S[j];
+            return S[_];
           }, B = (E, w, S) => {
-            const A = E(l), j = E(o), N = a(j, A == null ? void 0 : A.arr).keyList.indexOf(f);
-            if (N < 0 || N >= j.length)
+            const A = E(l), _ = E(o), T = a(_, A == null ? void 0 : A.arr).keyList.indexOf(x);
+            if (T < 0 || T >= _.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const k = isFunction(S) ? S(j[N]) : S;
-            Object.is(j[N], k) || w(o, [
-              ...j.slice(0, N),
+            const k = isFunction(S) ? S(_[T]) : S;
+            Object.is(_[T], k) || w(o, [
+              ..._.slice(0, T),
               k,
-              ...j.slice(N + 1)
+              ..._.slice(T + 1)
             ]);
           };
-          g[x] = isWritable(o) ? atom(y, B) : atom(y);
-        }), u && u.keyList.length === m.length && u.keyList.every((h, x) => h === m[x]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
+          g[b] = isWritable(o) ? atom(y, B) : atom(y);
+        }), u && u.keyList.length === m.length && u.keyList.every((f, b) => f === m[b]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -486,18 +486,18 @@ function createJSONStorage(o = () => {
   const i = {
     getItem: (p, u) => {
       var g, m;
-      const h = (f) => {
-        if (f = f || "", a !== f) {
+      const f = (x) => {
+        if (x = x || "", a !== x) {
           try {
-            l = JSON.parse(f, n == null ? void 0 : n.reviver);
+            l = JSON.parse(x, n == null ? void 0 : n.reviver);
           } catch {
             return u;
           }
-          a = f;
+          a = x;
         }
         return l;
-      }, x = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
-      return isPromiseLike$1(x) ? x.then(h) : h(x);
+      }, b = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
+      return isPromiseLike$1(b) ? b.then(f) : f(b);
     },
     setItem: (p, u) => {
       var g;
@@ -510,14 +510,14 @@ function createJSONStorage(o = () => {
       var u;
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
-  }, c = (p) => (u, g, m) => p(u, (h) => {
-    let x;
+  }, c = (p) => (u, g, m) => p(u, (f) => {
+    let b;
     try {
-      x = JSON.parse(h || "");
+      b = JSON.parse(f || "");
     } catch {
-      x = m;
+      b = m;
     }
-    g(x);
+    g(b);
   });
   let d;
   try {
@@ -746,35 +746,7 @@ U(Frame, "defaultProps", {
   },
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
-const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame, { ...o, forwardedRef: n })), canAcceptChildBlock = (o, n) => {
-  if (!o) return !0;
-  const r = getRegisteredChaiBlock(o);
-  return r && has(r, "canAcceptBlock") ? r.canAcceptBlock(n) : !1;
-}, canAddChildBlock = (o) => {
-  const n = getRegisteredChaiBlock(o);
-  return n ? has(n, "canAcceptBlock") : !1;
-}, canBeNestedInside = (o, n) => {
-  const r = getRegisteredChaiBlock(n);
-  return r && has(r, "canBeNested") ? r.canBeNested(o) : !0;
-}, canDuplicateBlock = (o) => {
-  const n = getRegisteredChaiBlock(o);
-  return n && has(n, "canDuplicate") ? n.canDuplicate() : !0;
-}, canDeleteBlock = (o) => {
-  const n = getRegisteredChaiBlock(o);
-  return n && has(n, "canDelete") ? n.canDelete() : !0;
-}, canDropBlock = (o, { dragSource: n, dropTarget: r }) => {
-  const a = get(n, "data._type", ""), l = get(r, "data._type", "");
-  return canAcceptChildBlock(l, a);
-};
-import.meta.vitest && describe("canDropBlock Function", () => {
-  it('should return false if dragSourceType is "Slot"', () => {
-    const o = { data: { _type: "Slot" } }, n = { data: {} };
-    expect(canDropBlock({}, { dragSource: o, dropTarget: n })).toBe(!0);
-  }), it("should return true if dropTargetType is empty", () => {
-    const o = { data: { _type: "Box" } }, n = { data: {} };
-    expect(canDropBlock({}, { dragSource: o, dropTarget: n })).toBe(!0);
-  });
-});
+const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame, { ...o, forwardedRef: n }));
 function duplicateBlocks(o, n, r) {
   const a = filter(o, (i) => i._parent === n), l = [];
   for (let i = 0; i < a.length; i++) {
@@ -846,58 +818,6 @@ const globalBlocksAtom = atom$1((o) => {
   return filter(n, (r) => has(r, "blockId"));
 });
 globalBlocksAtom.debugLabel = "globalBlocksAtom";
-const selectedBlockIdsAtom = atom$1([]);
-selectedBlockIdsAtom.debugLabel = "selectedBlockIdsAtom";
-const selectedBlocksAtom = atom$1((o) => {
-  const n = o(presentBlocksAtom), r = o(selectedBlockIdsAtom);
-  return map(
-    filter(n, ({ _id: a }) => includes(r, a)),
-    (a) => ({ ...a })
-  );
-});
-selectedBlocksAtom.debugLabel = "selectedBlocksAtom";
-const selectedBlockAtom = atom$1((o) => {
-  const n = o(selectedBlocksAtom);
-  if (n.length === 0)
-    return null;
-  if (n.length === 1)
-    return n[0];
-});
-selectedBlockAtom.debugLabel = "selectedBlockAtom";
-const getParentId = (o) => get(o, "_parent", null), selectedBlocksParentsAtom = atom$1((o) => {
-  const n = o(selectedBlocksAtom), r = map(n, getParentId);
-  return filter(o(presentBlocksAtom), (a) => includes(r, a._id));
-});
-selectedBlocksParentsAtom.debugLabel = "selectedBlocksParentsAtom";
-const selectedBlockFlexChildAtom = atom$1(() => !1);
-selectedBlockFlexChildAtom.debugLabel = "selectedBlockFlexChildAtom";
-const selectedBlockGridChildAtom = atom$1(() => !1);
-selectedBlockGridChildAtom.debugLabel = "selectedBlockGridChildAtom";
-const styleStateAtom = atom$1("");
-styleStateAtom.debugLabel = "styleStateAtom";
-const styleBreakpointAtom = atomWithStorage("styleBreakpoint", "xs");
-styleBreakpointAtom.debugLabel = "styleBreakpointAtom";
-const useSelectedBlocksDisplayChild = () => ({
-  flexChild: useAtomValue$1(selectedBlockFlexChildAtom),
-  gridChild: useAtomValue$1(selectedBlockGridChildAtom)
-}), useSelectedBlock = () => useAtomValue$1(selectedBlockAtom), selectedBlockHierarchy = atom$1((o) => {
-  const n = o(selectedBlockAtom), r = o(presentBlocksAtom);
-  let a = n;
-  const l = [n];
-  do {
-    const i = r.find(({ _id: c }) => c === (a == null ? void 0 : a._parent));
-    a = i, i && l.push(i);
-  } while (a != null && a._parent);
-  return l;
-}), useSelectedBlockHierarchy = () => compact(useAtomValue$1(selectedBlockHierarchy)), useSelectedBlockIds = () => {
-  const [o, n] = useAtom$1(selectedBlockIdsAtom), r = useCallback(
-    (a) => {
-      n((l) => includes(l, a) ? without(l, a) : [...l, a]);
-    },
-    [n]
-  );
-  return [o, n, r];
-};
 var undomanager = { exports: {} }, hasRequiredUndomanager;
 function requireUndomanager() {
   return hasRequiredUndomanager || (hasRequiredUndomanager = 1, function(o) {
@@ -1223,6 +1143,57 @@ const useUndoManager = () => {
   }, () => {
     broadcastChannel.onmessage = null, broadcastChannel.onmessageerror = null;
   }), [o, n]);
+}, selectedBlockIdsAtom = atom$1([]);
+selectedBlockIdsAtom.debugLabel = "selectedBlockIdsAtom";
+const selectedBlocksAtom = atom$1((o) => {
+  const n = o(presentBlocksAtom), r = o(selectedBlockIdsAtom);
+  return map(
+    filter(n, ({ _id: a }) => includes(r, a)),
+    (a) => ({ ...a })
+  );
+});
+selectedBlocksAtom.debugLabel = "selectedBlocksAtom";
+const selectedBlockAtom = atom$1((o) => {
+  const n = o(selectedBlocksAtom);
+  if (n.length === 0)
+    return null;
+  if (n.length === 1)
+    return n[0];
+});
+selectedBlockAtom.debugLabel = "selectedBlockAtom";
+const getParentId = (o) => get(o, "_parent", null), selectedBlocksParentsAtom = atom$1((o) => {
+  const n = o(selectedBlocksAtom), r = map(n, getParentId);
+  return filter(o(presentBlocksAtom), (a) => includes(r, a._id));
+});
+selectedBlocksParentsAtom.debugLabel = "selectedBlocksParentsAtom";
+const selectedBlockFlexChildAtom = atom$1(() => !1);
+selectedBlockFlexChildAtom.debugLabel = "selectedBlockFlexChildAtom";
+const selectedBlockGridChildAtom = atom$1(() => !1);
+selectedBlockGridChildAtom.debugLabel = "selectedBlockGridChildAtom";
+const styleStateAtom = atom$1("");
+styleStateAtom.debugLabel = "styleStateAtom";
+const styleBreakpointAtom = atomWithStorage("styleBreakpoint", "xs");
+styleBreakpointAtom.debugLabel = "styleBreakpointAtom";
+const useSelectedBlocksDisplayChild = () => ({
+  flexChild: useAtomValue$1(selectedBlockFlexChildAtom),
+  gridChild: useAtomValue$1(selectedBlockGridChildAtom)
+}), useSelectedBlock = () => useAtomValue$1(selectedBlockAtom), selectedBlockHierarchy = atom$1((o) => {
+  const n = o(selectedBlockAtom), r = o(presentBlocksAtom);
+  let a = n;
+  const l = [n];
+  do {
+    const i = r.find(({ _id: c }) => c === (a == null ? void 0 : a._parent));
+    a = i, i && l.push(i);
+  } while (a != null && a._parent);
+  return l;
+}), useSelectedBlockHierarchy = () => compact(useAtomValue$1(selectedBlockHierarchy)), useSelectedBlockIds = () => {
+  const [o, n] = useAtom$1(selectedBlockIdsAtom), r = useCallback(
+    (a) => {
+      n((l) => includes(l, a) ? without(l, a) : [...l, a]);
+    },
+    [n]
+  );
+  return [o, n, r];
 }, removeNestedBlocks = (o, n) => {
   const r = [], a = filter(o, (l) => includes(n, l._id) || includes(n, l._parent) ? (r.push(l._id), !1) : !0);
   return isEmpty(r) ? a : removeNestedBlocks(a, r);
@@ -1368,98 +1339,127 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (f, b, y) => {
-      const B = map(f, (w) => {
-        const A = n.find((N) => N._id === w)._parent || null, C = n.filter((N) => A ? N._parent === A : !N._parent).map((N) => N._id).indexOf(w);
+    moveBlocks: (x, h, y) => {
+      const B = map(x, (w) => {
+        const A = n.find((T) => T._id === w)._parent || null, C = n.filter((T) => A ? T._parent === A : !T._parent).map((T) => T._id).indexOf(w);
         return { _id: w, oldParent: A, oldPosition: C };
-      }), E = B.find(({ _id: w }) => w === f[0]);
-      E && E.oldParent === b && E.oldPosition === y || (i(f, b, y), o({
+      }), E = B.find(({ _id: w }) => w === x[0]);
+      E && E.oldParent === h && E.oldPosition === y || (i(x, h, y), o({
         undo: () => each(B, ({ _id: w, oldParent: S, oldPosition: A }) => {
           i([w], S, A);
         }),
-        redo: () => i(f, b, y)
+        redo: () => i(x, h, y)
       }));
     },
-    addBlocks: (f, b, y) => {
-      a(f, b, y), o({
-        undo: () => l(map(f, "_id")),
-        redo: () => a(f, b, y)
+    addBlocks: (x, h, y) => {
+      a(x, h, y), o({
+        undo: () => l(map(x, "_id")),
+        redo: () => a(x, h, y)
       });
     },
-    removeBlocks: (f) => {
+    removeBlocks: (x) => {
       var E;
-      const b = (E = first(f)) == null ? void 0 : E._parent, B = n.filter((w) => b ? w._parent === b : !w._parent).indexOf(first(f));
-      l(map(f, "_id")), o({
-        undo: () => a(f, b, B),
-        redo: () => l(map(f, "_id"))
+      const h = (E = first(x)) == null ? void 0 : E._parent, B = n.filter((w) => h ? w._parent === h : !w._parent).indexOf(first(x));
+      l(map(x, "_id")), o({
+        undo: () => a(x, h, B),
+        redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (f, b, y) => {
+    updateBlocks: (x, h, y) => {
       let B = [];
       if (y)
-        B = map(f, (E) => ({ _id: E, ...y }));
+        B = map(x, (E) => ({ _id: E, ...y }));
       else {
-        const E = keys(b);
-        B = map(f, (w) => {
-          const S = n.find((j) => j._id === w), A = { _id: w };
-          return each(E, (j) => A[j] = S[j]), A;
+        const E = keys(h);
+        B = map(x, (w) => {
+          const S = n.find((_) => _._id === w), A = { _id: w };
+          return each(E, (_) => A[_] = S[_]), A;
         });
       }
-      c(map(f, (E) => ({ _id: E, ...b }))), o({
+      c(map(x, (E) => ({ _id: E, ...h }))), o({
         undo: () => c(B),
-        redo: () => c(map(f, (E) => ({ _id: E, ...b })))
+        redo: () => c(map(x, (E) => ({ _id: E, ...h })))
       });
     },
-    updateBlocksRuntime: (f, b) => {
-      c(map(f, (y) => ({ _id: y, ...b })));
+    updateBlocksRuntime: (x, h) => {
+      c(map(x, (y) => ({ _id: y, ...h })));
     },
-    setNewBlocks: (f) => {
-      r(f), o({
+    setNewBlocks: (x) => {
+      r(x), o({
         undo: () => r(n),
-        redo: () => r(f)
+        redo: () => r(x)
       });
     },
-    updateMultipleBlocksProps: (f) => {
-      let b = [];
-      b = map(f, (y) => {
+    updateMultipleBlocksProps: (x) => {
+      let h = [];
+      h = map(x, (y) => {
         const B = keys(y), E = n.find((S) => S._id === y._id), w = {};
         return each(B, (S) => w[S] = E[S]), w;
-      }), c(f), o({
-        undo: () => c(b),
-        redo: () => c(f)
+      }), c(x), o({
+        undo: () => c(h),
+        redo: () => c(x)
       });
     }
   };
-}, useAddBlock = () => {
+}, canAcceptChildBlock = (o, n) => {
+  if (!o) return !0;
+  const r = getRegisteredChaiBlock(o);
+  return r && has(r, "canAcceptBlock") ? r.canAcceptBlock(n) : !1;
+}, canAddChildBlock = (o) => {
+  const n = getRegisteredChaiBlock(o);
+  return n ? has(n, "canAcceptBlock") : !1;
+}, canBeNestedInside = (o, n) => {
+  const r = getRegisteredChaiBlock(n);
+  return r && has(r, "canBeNested") ? r.canBeNested(o) : !0;
+}, canDuplicateBlock = (o) => {
+  const n = getRegisteredChaiBlock(o);
+  return n && has(n, "canDuplicate") ? n.canDuplicate() : !0;
+}, canDeleteBlock = (o) => {
+  const n = getRegisteredChaiBlock(o);
+  return n && has(n, "canDelete") ? n.canDelete() : !0;
+}, canDropBlock = (o, { dragSource: n, dropTarget: r }) => {
+  const a = get(n, "data._type", ""), l = get(r, "data._type", "");
+  return canAcceptChildBlock(l, a);
+};
+import.meta.vitest && describe("canDropBlock Function", () => {
+  it('should return false if dragSourceType is "Slot"', () => {
+    const o = { data: { _type: "Slot" } }, n = { data: {} };
+    expect(canDropBlock({}, { dragSource: o, dropTarget: n })).toBe(!0);
+  }), it("should return true if dropTargetType is empty", () => {
+    const o = { data: { _type: "Box" } }, n = { data: {} };
+    expect(canDropBlock({}, { dragSource: o, dropTarget: n })).toBe(!0);
+  });
+});
+const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var h;
-      for (let x = 0; x < i.length; x++) {
-        const { _id: f } = i[x];
-        i[x]._id = generateUUID();
-        const b = filter(i, { _parent: f });
-        for (let y = 0; y < b.length; y++)
-          b[y]._parent = i[x]._id;
+      var f;
+      for (let b = 0; b < i.length; b++) {
+        const { _id: x } = i[b];
+        i[b]._id = generateUUID();
+        const h = filter(i, { _parent: x });
+        for (let y = 0; y < h.length; y++)
+          h[y]._parent = i[b]._id;
       }
       const p = first(i);
       let u, g;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(h = first(i)) == null ? void 0 : h._id]), first(i);
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(f = first(i)) == null ? void 0 : f._id]), first(i);
     },
     [r, o, n]
   );
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const b = i.blocks;
-        return a(b, c, d);
+        const h = i.blocks;
+        return a(h, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
         _id: p,
         ...u
       };
-      let m, h;
-      return c && (m = find(o, { _id: c }), g._parent = c, h = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, h = m._parent), r([g], h, d), n([g._id]), g;
+      let m, f;
+      return c && (m = find(o, { _id: c }), g._parent = c, f = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, f = m._parent), r([g], f, d), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2622,359 +2622,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
     },
     [o, n, r]
   );
-}, useStylingBreakpoint = () => useAtom$1(styleBreakpointAtom), canvasWidthAtom = atomWithStorage("canvasWidth", 800), canvasBreakpointAtom = atom$1((o) => {
-  const n = o(canvasWidthAtom);
-  return getBreakpointValue(n).toLowerCase();
-}), useCanvasWidth = () => {
-  const [o, n] = useAtom$1(canvasWidthAtom), r = useAtomValue$1(canvasBreakpointAtom), [a, l] = useStylingBreakpoint();
-  return useEffect(() => {
-    a !== "xs" && l(r);
-  }, [r, a, l]), [o, r, n];
-}, canvasZoomAtom = atomWithStorage("canvasZoom", 100), useCanvasZoom = () => useAtom$1(canvasZoomAtom), cutBlockIdsAtom = atom$1([]), useCutBlockIds = () => {
-  const [o, n] = useAtom$1(cutBlockIdsAtom), r = useSetAtom$1(copiedBlockIdsAtom), a = useCallback(
-    (l) => {
-      n(l), r([]);
-    },
-    [n, r]
-  );
-  return [o, a];
-}, copiedBlockIdsAtom = atom$1([]), useCopyBlockIds = () => {
-  const [o] = useBlocksStore(), [n, r] = useAtom$1(copiedBlockIdsAtom), a = useSetAtom$1(cutBlockIdsAtom), l = useCallback(
-    async (i) => {
-      try {
-        r(i), a([]);
-        const c = {
-          _chai_copied_blocks: i.flatMap((d) => getDuplicatedBlocks(o, d, null))
-        };
-        await navigator.clipboard.writeText(JSON.stringify(c));
-      } catch (c) {
-        console.error("Failed to copy blocks to clipboard:", c);
-      }
-    },
-    [r, a, o]
-  );
-  return [n, l];
-}, darkModeAtom = atomWithStorage("darkMode", !1), useDarkMode = () => {
-  const [o, n] = useAtom$1(darkModeAtom);
-  return [o, n];
-}, useDuplicateBlocks = () => {
-  const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions();
-  return useCallback(
-    (a, l = null) => {
-      const i = [];
-      each(a, (c) => {
-        const d = o.find((h) => h._id === c);
-        l ? l === "root" && (l = null) : l = d._parent;
-        const g = filter(
-          o,
-          (h) => isString(l) ? h._parent === l : !h._parent
-        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
-        r(m, l, g), i.push(get(m, "0._id", ""));
-      }), n(i);
-    },
-    [o, n]
-  );
-}, hiddenBlockIdsAtom = atom$1([]), useHiddenBlockIds = () => {
-  const [o, n] = useAtom$1(hiddenBlockIdsAtom), r = useCallback(
-    (a) => {
-      n((l) => includes(l, a) ? without(l, a) : [...l, a]);
-    },
-    [n]
-  );
-  return [o, n, r];
-}, highlightBlockIdAtom = atom$1(""), useHighlightBlockId = () => useAtom$1(highlightBlockIdAtom), useCanPaste = () => {
-  const [o] = useBlocksStore();
-  return (n, r) => {
-    var i;
-    const a = ((i = find(o, { _id: r })) == null ? void 0 : i._type) || null, l = first(n.map((c) => {
-      var d;
-      return (d = find(o, { _id: c })) == null ? void 0 : d._type;
-    }));
-    return canAcceptChildBlock(a, l);
-  };
-}, useMoveCutBlocks = () => {
-  const o = useAtomValue$1(presentBlocksAtom), { moveBlocks: n } = useBlocksStoreUndoableActions();
-  return useCallback(
-    (r, a) => {
-      const l = Array.isArray(a) ? a[0] : a;
-      if (a === "root") {
-        const i = o == null ? void 0 : o.filter((c) => !c._parent);
-        n(r, null, (i == null ? void 0 : i.length) || 0);
-      } else {
-        const i = o == null ? void 0 : o.filter((c) => c._parent === l);
-        n(r, l, (i == null ? void 0 : i.length) || 0);
-      }
-    },
-    [n, o]
-  );
-}, usePasteBlocks = () => {
-  const [o, n] = useCutBlockIds(), r = useMoveCutBlocks(), a = useCanPaste(), { toast: l } = useToast(), { addPredefinedBlock: i } = useAddBlock();
-  return {
-    canPaste: useCallback(
-      async (d) => {
-        if (o.length > 0)
-          return a(o, d);
-        try {
-          const p = await navigator.clipboard.readText();
-          if (p) {
-            const u = JSON.parse(p);
-            return has(u, "_chai_copied_blocks");
-          }
-        } catch {
-          return !1;
-        }
-        return !1;
-      },
-      [a, o]
-    ),
-    pasteBlocks: useCallback(
-      async (d) => {
-        const p = Array.isArray(d) ? d[0] : d;
-        if (!isEmpty(o)) {
-          r(o, d), n([]), await navigator.clipboard.writeText("");
-          return;
-        }
-        try {
-          const u = await navigator.clipboard.readText();
-          if (u) {
-            const g = JSON.parse(u);
-            has(g, "_chai_copied_blocks") ? i(g._chai_copied_blocks, p === "root" ? null : p) : l({ title: "Error", description: "Nothing to paste" });
-          } else
-            l({ title: "Error", description: "Nothing to paste" });
-        } catch {
-          l({ title: "Error", description: "Failed to paste blocks from clipboard" });
-        }
-      },
-      [o, i, r, n, l]
-    )
-  };
-}, previewModeAtom = atom$1(!1), usePreviewMode = () => {
-  const [o, n] = useAtom$1(previewModeAtom);
-  return [o, n];
-}, removeClassFromBlocksAtom = atom$1(null, (o, n, { blockIds: r, fullClasses: a }) => {
-  const l = first(o(selectedStylingBlocksAtom)), i = filter(
-    o(pageBlocksAtomsAtom),
-    (c) => (
-      // @ts-ignore
-      r.includes(o(c)._id)
-    )
-  );
-  return map(i, (c) => {
-    const d = o(c), p = a;
-    let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
-    return each(p, (m) => {
-      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
-      u = u.replace(x, " ").replace(/\s+/g, " ").trim();
-      const f = first(m.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], f) && p.push(m.split(":").pop().trim());
-    }), each(p, (m) => {
-      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
-      g = g.replace(x, " ").replace(/\s+/g, " ").trim();
-    }), {
-      ids: [d._id],
-      props: {
-        [l.prop]: `${STYLES_KEY}${g},${u}`
-      }
-    };
-  });
-}), useRemoveClassesFromBlocks = () => {
-  const { updateBlocks: o } = useBlocksStoreUndoableActions(), n = useSetAtom$1(removeClassFromBlocksAtom);
-  return useCallback(
-    (r, a) => {
-      const l = n({ blockIds: r, fullClasses: a });
-      o(r, l[0].props);
-    },
-    [n]
-  );
-}, selectedBlockAllClassesAtom = atom$1((o) => {
-  const n = first(o(selectedStylingBlocksAtom)), r = o(selectedBlockAtom);
-  if (!n || n.blockId !== get(r, "_id", null)) return [];
-  const a = get(r, n.prop, `${STYLES_KEY},`), { classes: l } = getSplitChaiClasses(a);
-  return console.log("classes", l), filter(map(l.trim().split(" "), constructClassObject), (i) => !isNull(i));
-}), useSelectedBlockAllClasses = () => useAtomValue$1(selectedBlockAllClassesAtom), MQ = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4, "2xl": 5 }, selectedBlockCurrentClassesAtom = atom$1((o) => {
-  const n = o(canvasBreakpointAtom), r = o(styleStateAtom), a = o(darkModeAtom), l = getQueries(n);
-  let i = filter(o(selectedBlockAllClassesAtom), { mod: r });
-  return startsWith(r, "_") || (i = filter(i, (c) => l.includes(c.mq))), i = i.sort((c, d) => MQ[c.mq] - MQ[d.mq]), a || (i = filter(i, { dark: !1 })), i;
-}), getQueries = (o) => {
-  let n = [];
-  switch (o) {
-    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), useStylingState = () => useAtom$1(styleStateAtom), languageAtom = atom$1("");
-languageAtom.debugLabel = "selectedLanguageAtom";
-const useLanguages = () => {
-  const o = useBuilderProp("languages", []), n = useBuilderProp("fallbackLang", "en"), [r, a] = useAtom$1(languageAtom), l = (i) => {
-    a(n === i ? "" : i);
-  };
-  return {
-    languages: o == null ? void 0 : o.filter((i) => i !== n),
-    fallbackLang: n,
-    selectedLang: r,
-    setSelectedLang: l
-  };
-}, updatePropsForLanguage = (o, n, r) => {
-  const a = getRegisteredChaiBlock(get(r, "_type"));
-  if (!a) return o;
-  const l = { ...o };
-  return forEach(keys(o), (i) => {
-    if (includes(get(a, "i18nProps", []), i) && !isEmpty(n)) {
-      const c = `${i}-${n}`;
-      set(l, c, o[i]), unset(l, i);
-    }
-  }), l;
-}, useUpdateBlocksProps = () => {
-  const { updateBlocks: o } = useBlocksStoreUndoableActions(), { selectedLang: n } = useLanguages(), r = useSelectedBlock();
-  return useCallback(
-    (a, l, i) => {
-      const c = updatePropsForLanguage(l, n, r);
-      o(a, c, i);
-    },
-    [n, r, o]
-  );
-}, useUpdateMultipleBlocksProps = () => {
-  const { updateMultipleBlocksProps: o } = useBlocksStoreUndoableActions();
-  return useCallback(
-    (n) => {
-      o(n);
-    },
-    [o]
-  );
-}, useFakeStreamEffect = () => {
-  const { updateBlocksRuntime: o } = useBlocksStoreUndoableActions();
-  return useCallback(
-    async (n, r, a = 30) => {
-      const l = keys(omit(r, ["_id"]));
-      for (const i of l) {
-        const c = r[i];
-        if (isString(c)) {
-          const d = chunk(c.split(""), 12);
-          let p = "";
-          o([n], { [i]: "" });
-          for (let u = 0; u < d.length; u++)
-            p += d[u].join(""), o([n], { [i]: p }), await new Promise((g) => setTimeout(g, a));
-        }
-      }
-    },
-    [o]
-  );
-}, useStreamMultipleBlocksProps = () => {
-  const { updateMultipleBlocksProps: o } = useBlocksStoreUndoableActions(), n = useFakeStreamEffect();
-  return useCallback(
-    async (r) => {
-      for (const a of r)
-        await n(a._id, a);
-      o(r);
-    },
-    [n, o]
-  );
-}, useUpdateBlocksPropsRealtime = () => {
-  const { updateBlocksRuntime: o } = useBlocksStoreUndoableActions(), { selectedLang: n } = useLanguages(), r = useSelectedBlock();
-  return useCallback(
-    (a, l) => {
-      const i = updatePropsForLanguage(l, n, r);
-      o(a, i);
-    },
-    [n, r, o]
-  );
-}, selectedBreakpointsAtom = atomWithStorage("selectedBreakpoints", ["XS", "MD", "XL"]), useSelectedBreakpoints = () => {
-  const [o, n] = useAtom$1(selectedBreakpointsAtom);
-  return [o, n];
-};
-let lastHighlighted = null;
-const useBlockHighlight = () => {
-  const [o] = useAtom$1(canvasIframeAtom), n = useMemo(() => {
-    var l;
-    return (o == null ? void 0 : o.contentDocument) || ((l = o == null ? void 0 : o.contentWindow) == null ? void 0 : l.document);
-  }, [o]);
-  return { highlightBlock: useCallback(
-    (l) => {
-      if (n)
-        if (lastHighlighted && lastHighlighted.removeAttribute("data-highlighted"), typeof l != "string")
-          l.setAttribute("data-highlighted", "true"), lastHighlighted = l;
-        else if (typeof l == "string") {
-          const i = n.querySelector(`[data-block-id="${l}"]`);
-          i && (i.setAttribute("data-highlighted", "true"), lastHighlighted = i);
-        } else
-          lastHighlighted = null;
-    },
-    [n]
-  ), clearHighlight: () => {
-    lastHighlighted && (lastHighlighted.removeAttribute("data-highlighted"), lastHighlighted = null);
-  }, lastHighlighted };
-}, globalBlocksStoreAtom = atom({}), globalBlocksLoadingStateAtom = atom({}), useGlobalBlocksStore = () => {
-  const [o, n] = useAtom(globalBlocksStoreAtom), r = useCallback((l) => get(o, l, []), [o]), a = useCallback(() => n({}), [n]);
-  return { getGlobalBlocks: r, reset: a };
-}, useWatchGlobalBlocks = () => {
-  const [o] = useBlocksStore(), [n, r] = useAtom(globalBlocksStoreAtom), [a, l] = useAtom(globalBlocksLoadingStateAtom), i = useBuilderProp("getGlobalBlockBlocks", async (d) => []), c = useMemo(() => o.filter((p) => p._type === "GlobalBlock").filter((p) => p._type === "GlobalBlock").map((p) => p.globalBlock), [o]);
-  useEffect(() => {
-    forEach(c, (d) => {
-      has(n, d) || get(a, `${d}.loading`, !1) || (l((p) => ({ ...p, [d]: { loading: !0, error: null } })), i(d).then((p) => {
-        r((u) => ({ ...u, [d]: p })), l((u) => ({
-          ...u,
-          [d]: { loading: !1, error: null }
-        }));
-      }).catch((p) => {
-        l((u) => ({
-          ...u,
-          [d]: { loading: !1, error: p.message }
-        }));
-      }));
-    });
-  }, [
-    i,
-    n,
-    c,
-    a,
-    r,
-    l
-  ]);
-}, globalBlocksListAtom = atom({}), useGlobalBlocksList = () => {
-  const [o, n] = useState(!1), [r, a] = useAtom(globalBlocksListAtom), l = useBuilderProp("getGlobalBlocks", async () => []), i = useCallback(async () => {
-    n(!0);
-    const c = await l();
-    a(c), n(!1);
-  }, [l, a]);
-  return useEffect(() => {
-    i();
-  }, []), { data: r, isLoading: o, refetch: i };
-}, useBuilderReset = () => {
-  const o = useSetAtom$1(historyStatesAtom), { clear: n } = useUndoManager(), [, r] = useSelectedBlockIds(), { clearHighlight: a } = useBlockHighlight(), [, l] = useSelectedStylingBlocks(), [, i] = useAtom(aiAssistantActiveAtom), { reset: c } = useGlobalBlocksStore();
-  return () => {
-    r([]), l([]), a(), n(), i(!1), o({ undoCount: 0, redoCount: 0 }), c();
-  };
-}, useUILibraryBlocks = () => ({ data: useBuilderProp("uiLibraries", []), isLoading: !1 }), useCopyToClipboard = () => {
-  const [o, n] = useState(null), r = useCallback(async (a) => {
-    if (!(navigator != null && navigator.clipboard))
-      return console.warn("Clipboard not supported"), !1;
-    try {
-      return await navigator.clipboard.writeText(a), n(a), !0;
-    } catch (l) {
-      return console.warn("Copy failed", l), n(null), !1;
-    }
-  }, []);
-  return [o, r];
-}, codeEditorAtom = atom$1(null), useCodeEditor = () => useAtom$1(codeEditorAtom), LANGUAGES = {
+}, LANGUAGES = {
   ab: "Abkhazian",
   aa: "Afar",
   af: "Afrikaans",
@@ -3162,6 +2810,82 @@ const useBlockHighlight = () => {
   yo: "Yoruba",
   za: "Zhuang, Chuang",
   zu: "Zulu"
+}, languageAtom = atom$1("");
+languageAtom.debugLabel = "selectedLanguageAtom";
+const useLanguages = () => {
+  const o = useBuilderProp("languages", []), n = useBuilderProp("fallbackLang", "en"), [r, a] = useAtom$1(languageAtom), l = (i) => {
+    a(n === i ? "" : i);
+  };
+  return {
+    languages: o == null ? void 0 : o.filter((i) => i !== n),
+    fallbackLang: n,
+    selectedLang: r,
+    setSelectedLang: l
+  };
+}, updatePropsForLanguage = (o, n, r) => {
+  const a = getRegisteredChaiBlock(get(r, "_type"));
+  if (!a) return o;
+  const l = { ...o };
+  return forEach(keys(o), (i) => {
+    if (includes(get(a, "i18nProps", []), i) && !isEmpty(n)) {
+      const c = `${i}-${n}`;
+      set(l, c, o[i]), unset(l, i);
+    }
+  }), l;
+}, useUpdateBlocksProps = () => {
+  const { updateBlocks: o } = useBlocksStoreUndoableActions(), { selectedLang: n } = useLanguages(), r = useSelectedBlock();
+  return useCallback(
+    (a, l, i) => {
+      const c = updatePropsForLanguage(l, n, r);
+      o(a, c, i);
+    },
+    [n, r, o]
+  );
+}, useUpdateMultipleBlocksProps = () => {
+  const { updateMultipleBlocksProps: o } = useBlocksStoreUndoableActions();
+  return useCallback(
+    (n) => {
+      o(n);
+    },
+    [o]
+  );
+}, useFakeStreamEffect = () => {
+  const { updateBlocksRuntime: o } = useBlocksStoreUndoableActions();
+  return useCallback(
+    async (n, r, a = 30) => {
+      const l = keys(omit(r, ["_id"]));
+      for (const i of l) {
+        const c = r[i];
+        if (isString(c)) {
+          const d = chunk(c.split(""), 12);
+          let p = "";
+          o([n], { [i]: "" });
+          for (let u = 0; u < d.length; u++)
+            p += d[u].join(""), o([n], { [i]: p }), await new Promise((g) => setTimeout(g, a));
+        }
+      }
+    },
+    [o]
+  );
+}, useStreamMultipleBlocksProps = () => {
+  const { updateMultipleBlocksProps: o } = useBlocksStoreUndoableActions(), n = useFakeStreamEffect();
+  return useCallback(
+    async (r) => {
+      for (const a of r)
+        await n(a._id, a);
+      o(r);
+    },
+    [n, o]
+  );
+}, useUpdateBlocksPropsRealtime = () => {
+  const { updateBlocksRuntime: o } = useBlocksStoreUndoableActions(), { selectedLang: n } = useLanguages(), r = useSelectedBlock();
+  return useCallback(
+    (a, l) => {
+      const i = updatePropsForLanguage(l, n, r);
+      o(a, i);
+    },
+    [n, r, o]
+  );
 };
 function getChildBlocks(o, n, r) {
   r.push(find(o, { _id: n }));
@@ -3181,69 +2905,348 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (h, x) => {
-    const f = cloneDeep(x.find((b) => b._id === h));
-    for (const b in f) {
-      const y = f[b];
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (f, b) => {
+    const x = cloneDeep(b.find((h) => h._id === f));
+    for (const h in x) {
+      const y = x[h];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
         const { baseClasses: B, classes: E } = getSplitChaiClasses(y);
-        f[b] = compact(flattenDeep([B, E])).join(" ");
+        x[h] = compact(flattenDeep([B, E])).join(" ");
       } else
-        b !== "_id" && delete f[b];
+        h !== "_id" && delete x[h];
+    }
+    return x;
+  };
+  return {
+    askAi: useCallback(
+      async (f, b, x, h) => {
+        if (l) {
+          n(!0), a(null);
+          try {
+            const y = p === u ? "" : p, B = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(b, d)), p) : [m(b, d)], E = await l(f, addLangToPrompt(x, g, f), B, y), { blocks: w, error: S } = E;
+            if (S) {
+              a(S);
+              return;
+            }
+            if (f === "styles") {
+              const A = w.map((_) => {
+                for (const C in _)
+                  C !== "_id" && (_[C] = `${STYLES_KEY},${_[C]}`);
+                return _;
+              });
+              c(A);
+            } else
+              i(w);
+            h && h(E);
+          } catch (y) {
+            a(y);
+          } finally {
+            n(!1), h && h();
+          }
+        }
+      },
+      [
+        l,
+        n,
+        p,
+        u,
+        d,
+        g,
+        c,
+        i
+      ]
+    ),
+    loading: o,
+    error: r
+  };
+}, useAiAssistant = () => {
+  const [, o] = useRightPanel();
+  return useCallback(
+    (n) => {
+      o(n ? "ai" : "block");
+    },
+    [o]
+  );
+};
+let lastHighlighted = null;
+const useBlockHighlight = () => {
+  const [o] = useAtom$1(canvasIframeAtom), n = useMemo(() => {
+    var l;
+    return (o == null ? void 0 : o.contentDocument) || ((l = o == null ? void 0 : o.contentWindow) == null ? void 0 : l.document);
+  }, [o]);
+  return { highlightBlock: useCallback(
+    (l) => {
+      if (n)
+        if (lastHighlighted && lastHighlighted.removeAttribute("data-highlighted"), typeof l != "string")
+          l.setAttribute("data-highlighted", "true"), lastHighlighted = l;
+        else if (typeof l == "string") {
+          const i = n.querySelector(`[data-block-id="${l}"]`);
+          i && (i.setAttribute("data-highlighted", "true"), lastHighlighted = i);
+        } else
+          lastHighlighted = null;
+    },
+    [n]
+  ), clearHighlight: () => {
+    lastHighlighted && (lastHighlighted.removeAttribute("data-highlighted"), lastHighlighted = null);
+  }, lastHighlighted };
+}, globalBlocksStoreAtom = atom({}), globalBlocksLoadingStateAtom = atom({}), useGlobalBlocksStore = () => {
+  const [o, n] = useAtom(globalBlocksStoreAtom), r = useCallback((l) => get(o, l, []), [o]), a = useCallback(() => n({}), [n]);
+  return { getGlobalBlocks: r, reset: a };
+}, useWatchGlobalBlocks = () => {
+  const [o] = useBlocksStore(), [n, r] = useAtom(globalBlocksStoreAtom), [a, l] = useAtom(globalBlocksLoadingStateAtom), i = useBuilderProp("getGlobalBlockBlocks", async (d) => []), c = useMemo(() => o.filter((p) => p._type === "GlobalBlock").filter((p) => p._type === "GlobalBlock").map((p) => p.globalBlock), [o]);
+  useEffect(() => {
+    forEach(c, (d) => {
+      has(n, d) || get(a, `${d}.loading`, !1) || (l((p) => ({ ...p, [d]: { loading: !0, error: null } })), i(d).then((p) => {
+        r((u) => ({ ...u, [d]: p })), l((u) => ({
+          ...u,
+          [d]: { loading: !1, error: null }
+        }));
+      }).catch((p) => {
+        l((u) => ({
+          ...u,
+          [d]: { loading: !1, error: p.message }
+        }));
+      }));
+    });
+  }, [
+    i,
+    n,
+    c,
+    a,
+    r,
+    l
+  ]);
+}, globalBlocksListAtom = atom({}), useGlobalBlocksList = () => {
+  const [o, n] = useState(!1), [r, a] = useAtom(globalBlocksListAtom), l = useBuilderProp("getGlobalBlocks", async () => []), i = useCallback(async () => {
+    n(!0);
+    const c = await l();
+    a(c), n(!1);
+  }, [l, a]);
+  return useEffect(() => {
+    i();
+  }, []), { data: r, isLoading: o, refetch: i };
+}, useBuilderReset = () => {
+  const o = useSetAtom$1(historyStatesAtom), { clear: n } = useUndoManager(), [, r] = useSelectedBlockIds(), { clearHighlight: a } = useBlockHighlight(), [, l] = useSelectedStylingBlocks(), [, i] = useAtom(aiAssistantActiveAtom), { reset: c } = useGlobalBlocksStore();
+  return () => {
+    r([]), l([]), a(), n(), i(!1), o({ undoCount: 0, redoCount: 0 }), c();
+  };
+}, canvasZoomAtom = atomWithStorage("canvasZoom", 100), useCanvasZoom = () => useAtom$1(canvasZoomAtom), codeEditorAtom = atom$1(null), useCodeEditor = () => useAtom$1(codeEditorAtom), cutBlockIdsAtom = atom$1([]), useCutBlockIds = () => {
+  const [o, n] = useAtom$1(cutBlockIdsAtom), r = useSetAtom$1(copiedBlockIdsAtom), a = useCallback(
+    (l) => {
+      n(l), r([]);
+    },
+    [n, r]
+  );
+  return [o, a];
+}, copiedBlockIdsAtom = atom$1([]), useCopyBlockIds = () => {
+  const [o] = useBlocksStore(), [n, r] = useAtom$1(copiedBlockIdsAtom), a = useSetAtom$1(cutBlockIdsAtom), l = useCallback(
+    async (i) => {
+      try {
+        r(i), a([]);
+        const c = {
+          _chai_copied_blocks: i.flatMap((d) => getDuplicatedBlocks(o, d, null))
+        };
+        await navigator.clipboard.writeText(JSON.stringify(c));
+      } catch (c) {
+        console.error("Failed to copy blocks to clipboard:", c);
+      }
+    },
+    [r, a, o]
+  );
+  return [n, l];
+}, useCopyToClipboard = () => {
+  const [o, n] = useState(null), r = useCallback(async (a) => {
+    if (!(navigator != null && navigator.clipboard))
+      return console.warn("Clipboard not supported"), !1;
+    try {
+      return await navigator.clipboard.writeText(a), n(a), !0;
+    } catch (l) {
+      return console.warn("Copy failed", l), n(null), !1;
     }
-    return f;
+  }, []);
+  return [o, r];
+}, darkModeAtom = atomWithStorage("darkMode", !1), useDarkMode = () => {
+  const [o, n] = useAtom$1(darkModeAtom);
+  return [o, n];
+}, useDuplicateBlocks = () => {
+  const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions();
+  return useCallback(
+    (a, l = null) => {
+      const i = [];
+      each(a, (c) => {
+        const d = o.find((f) => f._id === c);
+        l ? l === "root" && (l = null) : l = d._parent;
+        const g = filter(
+          o,
+          (f) => isString(l) ? f._parent === l : !f._parent
+        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
+        r(m, l, g), i.push(get(m, "0._id", ""));
+      }), n(i);
+    },
+    [o, n]
+  );
+}, hiddenBlockIdsAtom = atom$1([]), useHiddenBlockIds = () => {
+  const [o, n] = useAtom$1(hiddenBlockIdsAtom), r = useCallback(
+    (a) => {
+      n((l) => includes(l, a) ? without(l, a) : [...l, a]);
+    },
+    [n]
+  );
+  return [o, n, r];
+}, highlightBlockIdAtom = atom$1(""), useHighlightBlockId = () => useAtom$1(highlightBlockIdAtom), useCanPaste = () => {
+  const [o] = useBlocksStore();
+  return (n, r) => {
+    var i;
+    const a = ((i = find(o, { _id: r })) == null ? void 0 : i._type) || null, l = first(n.map((c) => {
+      var d;
+      return (d = find(o, { _id: c })) == null ? void 0 : d._type;
+    }));
+    return canAcceptChildBlock(a, l);
   };
+}, useMoveCutBlocks = () => {
+  const o = useAtomValue$1(presentBlocksAtom), { moveBlocks: n } = useBlocksStoreUndoableActions();
+  return useCallback(
+    (r, a) => {
+      const l = Array.isArray(a) ? a[0] : a;
+      if (a === "root") {
+        const i = o == null ? void 0 : o.filter((c) => !c._parent);
+        n(r, null, (i == null ? void 0 : i.length) || 0);
+      } else {
+        const i = o == null ? void 0 : o.filter((c) => c._parent === l);
+        n(r, l, (i == null ? void 0 : i.length) || 0);
+      }
+    },
+    [n, o]
+  );
+}, usePasteBlocks = () => {
+  const [o, n] = useCutBlockIds(), r = useMoveCutBlocks(), a = useCanPaste(), { toast: l } = useToast(), { addPredefinedBlock: i } = useAddBlock();
   return {
-    askAi: useCallback(
-      async (h, x, f, b) => {
-        if (l) {
-          n(!0), a(null);
-          try {
-            const y = p === u ? "" : p, B = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p) : [m(x, d)], E = await l(h, addLangToPrompt(f, g, h), B, y), { blocks: w, error: S } = E;
-            if (S) {
-              a(S);
-              return;
-            }
-            if (h === "styles") {
-              const A = w.map((j) => {
-                for (const C in j)
-                  C !== "_id" && (j[C] = `${STYLES_KEY},${j[C]}`);
-                return j;
-              });
-              c(A);
-            } else
-              i(w);
-            b && b(E);
-          } catch (y) {
-            a(y);
-          } finally {
-            n(!1), b && b();
+    canPaste: useCallback(
+      async (d) => {
+        if (o.length > 0)
+          return a(o, d);
+        try {
+          const p = await navigator.clipboard.readText();
+          if (p) {
+            const u = JSON.parse(p);
+            return has(u, "_chai_copied_blocks");
           }
+        } catch {
+          return !1;
         }
+        return !1;
       },
-      [
-        l,
-        n,
-        p,
-        u,
-        d,
-        g,
-        c,
-        i
-      ]
+      [a, o]
     ),
-    loading: o,
-    error: r
+    pasteBlocks: useCallback(
+      async (d) => {
+        const p = Array.isArray(d) ? d[0] : d;
+        if (!isEmpty(o)) {
+          r(o, d), n([]), await navigator.clipboard.writeText("");
+          return;
+        }
+        try {
+          const u = await navigator.clipboard.readText();
+          if (u) {
+            const g = JSON.parse(u);
+            has(g, "_chai_copied_blocks") ? i(g._chai_copied_blocks, p === "root" ? null : p) : l({ title: "Error", description: "Nothing to paste" });
+          } else
+            l({ title: "Error", description: "Nothing to paste" });
+        } catch {
+          l({ title: "Error", description: "Failed to paste blocks from clipboard" });
+        }
+      },
+      [o, i, r, n, l]
+    )
   };
-}, useAiAssistant = () => {
-  const [, o] = useRightPanel();
+}, previewModeAtom = atom$1(!1), usePreviewMode = () => {
+  const [o, n] = useAtom$1(previewModeAtom);
+  return [o, n];
+}, removeClassFromBlocksAtom = atom$1(null, (o, n, { blockIds: r, fullClasses: a }) => {
+  const l = first(o(selectedStylingBlocksAtom)), i = filter(
+    o(pageBlocksAtomsAtom),
+    (c) => (
+      // @ts-ignore
+      r.includes(o(c)._id)
+    )
+  );
+  return map(i, (c) => {
+    const d = o(c), p = a;
+    let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
+    return each(p, (m) => {
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      u = u.replace(b, " ").replace(/\s+/g, " ").trim();
+      const x = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(m.split(":").pop().trim());
+    }), each(p, (m) => {
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      g = g.replace(b, " ").replace(/\s+/g, " ").trim();
+    }), {
+      ids: [d._id],
+      props: {
+        [l.prop]: `${STYLES_KEY}${g},${u}`
+      }
+    };
+  });
+}), useRemoveClassesFromBlocks = () => {
+  const { updateBlocks: o, updateBlocksRuntime: n } = useBlocksStoreUndoableActions(), r = useSetAtom$1(removeClassFromBlocksAtom);
   return useCallback(
-    (n) => {
-      o(n ? "ai" : "block");
+    (a, l, i = !1) => {
+      const c = r({ blockIds: a, fullClasses: l });
+      i ? o(a, c[0].props) : n(a, c[0].props);
     },
-    [o]
+    [r]
   );
-}, wrapperBlockAtom = atom$1((o) => {
+}, useStylingBreakpoint = () => useAtom$1(styleBreakpointAtom), canvasWidthAtom = atomWithStorage("canvasWidth", 800), canvasDisplayWidthAtom = atomWithStorage("canvasDisplayWidth", 800), canvasBreakpointAtom = atom$1((o) => {
+  const n = o(canvasWidthAtom);
+  return getBreakpointValue(n).toLowerCase();
+}), useScreenSizeWidth = () => {
+  const [o, n] = useAtom$1(canvasWidthAtom), r = useAtomValue$1(canvasBreakpointAtom), [a, l] = useStylingBreakpoint();
+  return useEffect(() => {
+    a !== "xs" && l(r);
+  }, [r, a, l]), [o, r, n];
+}, useCanvasDisplayWidth = () => {
+  const [o, n] = useAtom$1(canvasDisplayWidthAtom);
+  return [o, n];
+}, selectedBlockAllClassesAtom = atom$1((o) => {
+  const n = first(o(selectedStylingBlocksAtom)), r = o(selectedBlockAtom);
+  if (!n || n.blockId !== get(r, "_id", null)) return [];
+  const a = get(r, n.prop, `${STYLES_KEY},`), { classes: l } = getSplitChaiClasses(a);
+  return console.log("classes", l), filter(map(l.trim().split(" "), constructClassObject), (i) => !isNull(i));
+}), useSelectedBlockAllClasses = () => useAtomValue$1(selectedBlockAllClassesAtom), MQ = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4, "2xl": 5 }, selectedBlockCurrentClassesAtom = atom$1((o) => {
+  const n = o(canvasBreakpointAtom), r = o(styleStateAtom), a = o(darkModeAtom), l = getQueries(n);
+  let i = filter(o(selectedBlockAllClassesAtom), { mod: r });
+  return startsWith(r, "_") || (i = filter(i, (c) => l.includes(c.mq))), i = i.sort((c, d) => MQ[c.mq] - MQ[d.mq]), a || (i = filter(i, { dark: !1 })), i;
+}), getQueries = (o) => {
+  let n = [];
+  switch (o) {
+    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 = () => {
+  const [o, n] = useAtom$1(selectedBreakpointsAtom);
+  return [o, n];
+}, useStylingState = () => useAtom$1(styleStateAtom), useUILibraryBlocks = () => ({ data: useBuilderProp("uiLibraries", []), isLoading: !1 }), wrapperBlockAtom = atom$1((o) => {
   var c;
   const n = o(presentBlocksAtom), r = o(selectedBlockIdsAtom), a = r.length === 1 ? r[0] : null;
   if (!a) return null;
@@ -3310,7 +3313,7 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     }
   });
   useResizeObserver(o, () => g(), o !== null);
-  const m = get(n, "_parent", null), h = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  const m = get(n, "_parent", null), f = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || d ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3318,13 +3321,13 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
       tabIndex: 0,
       ref: u.setFloating,
       style: p,
-      onClick: (x) => {
-        x.stopPropagation(), x.preventDefault();
+      onClick: (b) => {
+        b.stopPropagation(), b.preventDefault();
       },
-      onMouseEnter: (x) => {
-        x.stopPropagation(), i(null);
+      onMouseEnter: (b) => {
+        b.stopPropagation(), i(null);
       },
-      onKeyDown: (x) => x.stopPropagation(),
+      onKeyDown: (b) => b.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         m && /* @__PURE__ */ jsx(
@@ -3336,7 +3339,7 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
             }
           }
         ),
-        /* @__PURE__ */ jsx(BlockActionLabel, { label: h, block: n }),
+        /* @__PURE__ */ jsx(BlockActionLabel, { label: f, block: n }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-2 px-1", children: [
           canAddChildBlock(get(n, "_type", "")) && /* @__PURE__ */ jsx(
             PlusIcon,
@@ -3408,23 +3411,23 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
   </body>
 </html>`, useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), h = o ? { document: o } : {};
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), f = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
       g(n[0]) && m(n);
     },
-    { ...h, preventDefault: !0 },
+    { ...f, preventDefault: !0 },
     [n, g, m]
-  ), useHotkeys("esc", () => r([]), h, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...h, preventDefault: !0 }, [
+  ), useHotkeys("esc", () => r([]), f, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...f, preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
     "del, backspace",
-    (x) => {
-      x.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
+    (b) => {
+      b.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
-    h,
+    f,
     [n, l]
   );
 }, KeyboardHandler = () => {
@@ -3515,14 +3518,14 @@ const useDnd = () => {
   };
   return iframeDocument = o, {
     isDragging: n,
-    onDragOver: (h) => {
-      h.preventDefault(), h.stopPropagation(), throttledDragOver(h);
+    onDragOver: (f) => {
+      f.preventDefault(), f.stopPropagation(), throttledDragOver(f);
     },
-    onDrop: (h) => {
+    onDrop: (f) => {
       var S;
-      const x = dropTarget, b = getOrientation(x) === "vertical" ? h.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : h.clientX;
-      dropIndex = calculateDropIndex(b, possiblePositions);
-      const y = d, B = x.getAttribute("data-block-id"), E = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      const b = dropTarget, h = getOrientation(b) === "vertical" ? f.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : f.clientX;
+      dropIndex = calculateDropIndex(h, possiblePositions);
+      const y = d, B = b.getAttribute("data-block-id"), E = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
       if ((y == null ? void 0 : y._id) === B || !E) {
         m();
         return;
@@ -3531,17 +3534,17 @@ const useDnd = () => {
         a(y, B === "canvas" ? null : B, dropIndex), setTimeout(m, 300);
         return;
       }
-      let w = x.getAttribute("data-block-id");
-      w === null && (w = h.target.parentElement.getAttribute("data-block-id")), c([y._id], w === "canvas" ? null : w, dropIndex), m(), setTimeout(removePlaceholder, 300);
+      let w = b.getAttribute("data-block-id");
+      w === null && (w = f.target.parentElement.getAttribute("data-block-id")), c([y._id], w === "canvas" ? null : w, dropIndex), m(), setTimeout(removePlaceholder, 300);
     },
-    onDragEnter: (h) => {
-      const x = h, f = x.target;
-      dropTarget = f;
-      const b = f.getAttribute("data-block-id"), y = f.getAttribute("data-dnd-dragged") !== "yes";
-      u(b), x.stopPropagation(), x.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(f), r(!0), l(""), i([]);
+    onDragEnter: (f) => {
+      const b = f, x = b.target;
+      dropTarget = x;
+      const h = x.getAttribute("data-block-id"), y = x.getAttribute("data-dnd-dragged") !== "yes";
+      u(h), b.stopPropagation(), b.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(x), r(!0), l(""), i([]);
     },
-    onDragLeave: (h) => {
-      h.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (f) => {
+      f.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3562,25 +3565,25 @@ const useHandleCanvasDblClick = () => {
   const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight(), i = useGetBlockAtomValue(pageBlocksAtomsAtom);
   return useCallback(
     (c) => {
-      var f;
+      var x;
       if (r) return;
       const d = getTargetedBlock(c.target), p = d.getAttribute("data-block-type");
       if (!p || !o.includes(p))
         return;
       const u = d.getAttribute("data-block-id"), g = i(u).content, m = d.cloneNode(!0);
-      m.innerHTML = g, d.style.display = "none", Array.from(m.attributes).forEach((b) => {
-        b.name !== "class" && m.removeAttribute(b.name);
+      m.innerHTML = g, d.style.display = "none", Array.from(m.attributes).forEach((h) => {
+        h.name !== "class" && m.removeAttribute(h.name);
       }), p === "Text" && (m.style.display = "inline-block"), d.parentNode.insertBefore(m, d.nextSibling);
-      const h = new Quill(m, { placeholder: "Type here..." });
-      function x() {
-        const b = h.getText(0, h.getLength());
-        n([u], { content: b }), d.removeAttribute("style"), m.removeEventListener("blur", x, !0), destroyQuill(h), a(""), l(), m.remove();
+      const f = new Quill(m, { placeholder: "Type here..." });
+      function b() {
+        const h = f.getText(0, f.getLength());
+        n([u], { content: h }), d.removeAttribute("style"), m.removeEventListener("blur", b, !0), destroyQuill(f), a(""), l(), m.remove();
       }
-      m.addEventListener("blur", x, !0), m.addEventListener("click", (b) => {
-        b.stopPropagation();
-      }), m.addEventListener("keydown", (b) => {
-        (b.key === "Enter" || b.key === "Escape") && x();
-      }), h.focus(), (f = m.querySelector(".ql-clipboard")) == null || f.remove(), a(d.getAttribute("data-block-id"));
+      m.addEventListener("blur", b, !0), m.addEventListener("click", (h) => {
+        h.stopPropagation();
+      }), m.addEventListener("keydown", (h) => {
+        (h.key === "Enter" || h.key === "Escape") && b();
+      }), f.focus(), (x = m.querySelector(".ql-clipboard")) == null || x.remove(), a(d.getAttribute("data-block-id"));
     },
     [r, a, n, l]
   );
@@ -3621,10 +3624,10 @@ const useHandleCanvasDblClick = () => {
         return;
       const m = getElementByDataBlockId(n, first(r));
       if (m) {
-        const h = m.getAttribute("data-style-prop");
-        if (h) {
-          const x = m.getAttribute("data-style-id"), f = m.getAttribute("data-block-parent");
-          l([{ id: x, prop: h, blockId: f }]);
+        const f = m.getAttribute("data-style-prop");
+        if (f) {
+          const b = m.getAttribute("data-style-id"), x = m.getAttribute("data-block-parent");
+          l([{ id: b, prop: f, blockId: x }]);
         }
       }
     }, 100);
@@ -3649,7 +3652,7 @@ const useHandleCanvasDblClick = () => {
     d == null ? void 0 : d.getElementById("selected-block")
   ), [m] = useState(
     d == null ? void 0 : d.getElementById("selected-styling-block")
-  ), [h] = useState(
+  ), [f] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
   );
   useEffect(() => {
@@ -3674,8 +3677,8 @@ const useHandleCanvasDblClick = () => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: b, theme: y }) {
-          b({
+        plugin(function({ addBase: h, theme: y }) {
+          h({
             "h1,h2,h3,h4,h5,h6": {
               fontFamily: y("fontFamily.heading")
             },
@@ -3689,27 +3692,27 @@ const useHandleCanvasDblClick = () => {
       ]
     });
   }, [o, n, p]), useEffect(() => {
-    g && (g.textContent = `${map(r, (b) => `[data-block-id="${b}"]`).join(",")}{
+    g && (g.textContent = `${map(r, (h) => `[data-block-id="${h}"]`).join(",")}{
                 outline: 1px solid ${r.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [r, g]), useEffect(() => {
-    h.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [i, h]), useEffect(() => {
+    f.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [i, f]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    m && (m.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
+    m && (m.textContent = `${map(l, ({ id: h }) => `[data-style-id="${h}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
   }, [l, m]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
-  const x = useMemo(
+  const b = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
-  ), f = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
+  ), x = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: x }),
-    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: f } })
+    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: b }),
+    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: x } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
@@ -3786,10 +3789,10 @@ const getBlockRuntimeProps = memoize((o) => {
     [o]
   );
 }, BlockRenderer = ({ blockAtom: o, children: n }) => {
-  const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(inlineEditingActiveAtom), [g] = useAtom$1(dataBindingActiveAtom), m = get(a, "component", null), h = useMemo(
+  const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(inlineEditingActiveAtom), [g] = useAtom$1(dataBindingActiveAtom), m = get(a, "component", null), f = useMemo(
     () => g ? applyBinding(applyLanguage(r, l, a), d) : applyLanguage(r, l, a),
     [r, l, a, d, g]
-  ), x = useMemo(() => getBlockTagAttributes(r), [r]), f = useMemo(() => c(r._id, getBlockRuntimeProps(r._type)), [r]), b = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), y = useMemo(
+  ), b = useMemo(() => getBlockTagAttributes(r), [r]), x = useMemo(() => c(r._id, getBlockRuntimeProps(r._type)), [r]), h = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), y = useMemo(
     () => ({
       blockProps: {
         "data-block-id": r._id,
@@ -3797,12 +3800,12 @@ const getBlockRuntimeProps = memoize((o) => {
       },
       inBuilder: !0,
       lang: l || i,
-      ...h,
-      ...x,
       ...f,
-      ...b
+      ...b,
+      ...x,
+      ...h
     }),
-    [r, l, i, h, x, f, b]
+    [r, l, i, f, b, x, h]
   );
   return isNull(m) || p.includes(r._id) || u === r._id ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(m, { ...y, children: n }) });
 }, GlobalBlocksRenderer = ({ globalBlockId: o }) => {
@@ -3828,16 +3831,16 @@ const getBlockRuntimeProps = memoize((o) => {
   const [o] = useBlocksStore(), n = isEmpty(o) ? null : /* @__PURE__ */ jsx(PageBlocksRenderer, {});
   return /* @__PURE__ */ jsx(Fragment, { children: n });
 }, useCanvasScale = (o) => {
-  const [n] = useCanvasWidth(), [, r] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), c = useCallback(() => {
+  const [n] = useCanvasDisplayWidth(), [, r] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), c = useCallback(() => {
     const { width: d, height: p } = o;
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
       let g = {};
-      const m = p * u, h = d * u;
+      const m = p * u, f = d * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
         height: 100 + (p - m) / m * 100 + "%",
-        width: 100 + (d - h) / h * 100 + "%"
+        width: 100 + (d - f) / f * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3854,34 +3857,34 @@ const getBlockRuntimeProps = memoize((o) => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, h] = useState([]), [, x] = useAtom$1(canvasIframeAtom), [f, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), E = (A) => {
-    p((j) => ({ ...j, width: A }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, f] = useState([]), [, b] = useAtom$1(canvasIframeAtom), [x, h] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), E = (A) => {
+    p((_) => ({ ..._, width: A }));
   };
-  useEffect(() => {
+  console.log("width", n), useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: A, clientHeight: j } = c.current;
-    p({ width: A, height: j });
+    const { clientWidth: A, clientHeight: _ } = c.current;
+    p({ width: A, height: _ });
   }, [c, n]);
-  const w = (A, j = 0) => {
+  const w = (A, _ = 0) => {
     const { top: C } = A.getBoundingClientRect();
-    return C + j >= 0 && C - j <= window.innerHeight;
+    return C + _ >= 0 && C - _ <= window.innerHeight;
   };
   useEffect(() => {
-    var A, j;
+    var A, _;
     if (a && a.type !== "Multiple" && i.current) {
       const C = getElementByDataBlockId(i.current.contentDocument, a._id);
-      C && (w(C) || (j = (A = i.current) == null ? void 0 : A.contentWindow) == null || j.scrollTo({ top: C.offsetTop, behavior: "smooth" }), m([C]));
+      C && (w(C) || (_ = (A = i.current) == null ? void 0 : A.contentWindow) == null || _.scrollTo({ top: C.offsetTop, behavior: "smooth" }), m([C]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(f) && i.current) {
+    if (!isEmpty(x) && i.current) {
       const A = getElementByStyleId(
         i.current.contentDocument,
-        first(f).id
+        first(x).id
       );
-      h(A ? [A] : [null]);
+      f(A ? [A] : [null]);
     } else
-      h([null]);
-  }, [f]);
+      f([null]);
+  }, [x]);
   const S = useMemo(() => {
     let A = IframeInitialContent;
     return A = A.replace("__HTML_DIR__", B), o === "offline" && (A = A.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), A;
@@ -3890,7 +3893,7 @@ const getBlockRuntimeProps = memoize((o) => {
     "div",
     {
       onClick: () => {
-        r([]), b([]);
+        r([]), h([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3898,7 +3901,7 @@ const getBlockRuntimeProps = memoize((o) => {
       children: /* @__PURE__ */ jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => x(i.current),
+          contentDidMount: () => b(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
@@ -4163,7 +4166,7 @@ const getBlockRuntimeProps = memoize((o) => {
       B && typeof B == "object" && "fontFamily" in B && "borderRadius" in B && "colors" in B ? d(B) : console.error("Invalid preset structure:", B);
     } else
       console.error("Preset not found:", r);
-  }, h = useDebouncedCallback(
+  }, f = useDebouncedCallback(
     (y, B) => {
       d(() => ({
         ...c,
@@ -4175,7 +4178,7 @@ const getBlockRuntimeProps = memoize((o) => {
     },
     [c],
     200
-  ), x = useDebouncedCallback(
+  ), b = useDebouncedCallback(
     (y) => {
       d(() => ({
         ...c,
@@ -4184,7 +4187,7 @@ const getBlockRuntimeProps = memoize((o) => {
     },
     [c],
     200
-  ), f = useDebouncedCallback(
+  ), x = useDebouncedCallback(
     (y, B) => {
       d(() => {
         const E = get(c, `colors.${y}`);
@@ -4199,14 +4202,14 @@ const getBlockRuntimeProps = memoize((o) => {
     },
     [c],
     200
-  ), b = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([B]) => {
+  ), h = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([B]) => {
     const E = get(c, `colors.${B}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
           value: E,
-          onChange: (w) => f(B, w)
+          onChange: (w) => x(B, w)
         }
       ),
       /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
@@ -4247,20 +4250,20 @@ const getBlockRuntimeProps = memoize((o) => {
           {
             label: y,
             value: c.fontFamily[y.replace(/font-/g, "")] || B[Object.keys(B)[0]],
-            onChange: (E) => h(y, E)
+            onChange: (E) => f(y, E)
           },
           y
         )) }),
         (p == null ? void 0 : p.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Border Radius") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: x }),
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: b }),
             /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: c.borderRadius })
           ] })
         ] }),
         (p == null ? void 0 : p.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => b(y)) }, n ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => h(y)) }, n ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -4473,23 +4476,23 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   pageTypes: n,
   onChange: r
 }) => {
-  var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (k, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [b, y] = useState(-1), B = useRef(null), E = (N = n == null ? void 0 : n.find((k) => k.key === u)) == null ? void 0 : N.name;
+  var T;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (k, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [b, x] = useState([]), [h, y] = useState(-1), B = useRef(null), E = (T = n == null ? void 0 : n.find((k) => k.key === u)) == null ? void 0 : T.name;
   useEffect(() => {
-    if (h(""), f([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (f(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const k = split(o, ":"), v = get(k, 1, "page") || "page";
     g(v), (async () => {
-      const I = await l(v, [get(k, 2, "page")]);
-      I && Array.isArray(I) && h(get(I, [0, "name"], ""));
+      const N = await l(v, [get(k, 2, "page")]);
+      N && Array.isArray(N) && f(get(N, [0, "name"], ""));
     })();
   }, [o]);
   const w = useDebouncedCallback(
     async (k) => {
       if (isEmpty(k))
-        f([]);
+        x([]);
       else {
         const v = await l(u, k);
-        f(v);
+        x(v);
       }
       c(!1), y(-1);
     },
@@ -4497,34 +4500,34 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     300
   ), S = (k) => {
     const v = ["pageType", u, k.id];
-    v[1] && (r(v.join(":")), h(k.name), p(!1), f([]), y(-1));
+    v[1] && (r(v.join(":")), f(k.name), p(!1), x([]), y(-1));
   }, A = (k) => {
     switch (k.key) {
       case "ArrowDown":
-        k.preventDefault(), y((v) => v < x.length - 1 ? v + 1 : v);
+        k.preventDefault(), y((v) => v < b.length - 1 ? v + 1 : v);
         break;
       case "ArrowUp":
         k.preventDefault(), y((v) => v > 0 ? v - 1 : v);
         break;
       case "Enter":
-        if (k.preventDefault(), x.length === 0) return;
-        b >= 0 && S(x[b]);
+        if (k.preventDefault(), b.length === 0) return;
+        h >= 0 && S(b[h]);
         break;
       case "Escape":
-        k.preventDefault(), j();
+        k.preventDefault(), _();
         break;
     }
   };
   useEffect(() => {
-    if (b >= 0 && B.current) {
-      const k = B.current.children[b];
+    if (h >= 0 && B.current) {
+      const k = B.current.children[h];
       k == null || k.scrollIntoView({ block: "nearest" });
     }
-  }, [b]);
-  const j = () => {
-    h(""), f([]), y(-1), p(!1), r("");
+  }, [h]);
+  const _ = () => {
+    f(""), x([]), y(-1), p(!1), r("");
   }, C = (k) => {
-    h(k), p(!isEmpty(k)), c(!0), w(k);
+    f(k), p(!isEmpty(k)), c(!0), w(k);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (k) => g(k.target.value), children: map(n, (k) => /* @__PURE__ */ jsx("option", { value: k.key, children: k.name }, k.key)) }),
@@ -4540,21 +4543,21 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: j, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(x) || d && isEmpty(x)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(b) || d && isEmpty(b)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(x) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(b) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: B, children: map(x == null ? void 0 : x.slice(0, 20), (k, v) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: B, children: map(b == null ? void 0 : b.slice(0, 20), (k, v) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => S(k),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(k.id) ? "bg-blue-200" : v === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(k.id) ? "bg-blue-200" : v === h ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           k.name,
           " ",
@@ -4648,29 +4651,29 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
   const m = () => {
-    const f = findIndex(u, { _id: g });
-    if (f > -1) {
-      const b = (f + 1) % u.length, y = get(u, [b, "_id"]);
+    const x = findIndex(u, { _id: g });
+    if (x > -1) {
+      const h = (x + 1) % u.length, y = get(u, [h, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
-  }, h = () => {
-    const f = findIndex(u, { _id: g });
-    if (f > -1) {
-      const b = (f - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
+  }, f = () => {
+    const x = findIndex(u, { _id: g });
+    if (x > -1) {
+      const h = (x - 1 + u.length) % u.length, y = get(u, [h, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
-  }, x = () => {
-    const f = i(
+  }, b = () => {
+    const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), b = f == null ? void 0 : f._id;
-    b && (n({ ...o, currentSlide: b }), c([b]));
+    ), h = x == null ? void 0 : x._id;
+    h && (n({ ...o, currentSlide: h }), c([h]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
-      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: f, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
           " ",
@@ -4683,7 +4686,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: x,
+          onClick: b,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircle, { className: "h-3 w-3 stroke-[2]" }),
@@ -4744,9 +4747,9 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (f) => {
-              let b = f.target.value;
-              b.length && (b = b.replace("-", "")), n({ ...o, autoplayInterval: b });
+            onChange: (x) => {
+              let h = x.target.value;
+              h.length && (h = h.replace("-", "")), n({ ...o, autoplayInterval: h });
             }
           }
         )
@@ -4777,22 +4780,22 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
   useEffect(() => {
     a || c([]), p(o);
   }, [a, o]);
-  const u = (x) => Array.isArray(x) ? "array" : typeof x == "object" && x !== null ? "object" : "value", g = React.useCallback(
-    (x) => {
-      const f = (b) => r === "value" ? b === "value" || b === "object" : r === "array" ? b === "array" : b === r;
-      x.type === "object" ? (c((b) => [...b, x.key]), p(x.value)) : f(x.type) && (n([...i, x.key].join(".")), l(!1));
+  const u = (b) => Array.isArray(b) ? "array" : typeof b == "object" && b !== null ? "object" : "value", g = React.useCallback(
+    (b) => {
+      const x = (h) => r === "value" ? h === "value" || h === "object" : r === "array" ? h === "array" : h === r;
+      b.type === "object" ? (c((h) => [...h, b.key]), p(b.value)) : x(b.type) && (n([...i, b.key].join(".")), l(!1));
     },
     [i, n, r]
   ), m = React.useCallback(() => {
     if (i.length > 0) {
-      const x = i.slice(0, -1);
-      c(x), p(x.reduce((f, b) => f[b], o));
+      const b = i.slice(0, -1);
+      c(b), p(b.reduce((x, h) => x[h], o));
     }
-  }, [i, o]), h = React.useMemo(() => Object.entries(d).map(([x, f]) => ({
-    key: x,
-    value: f,
-    type: u(f)
-  })).filter((x) => r === "value" ? x.type === "value" || x.type === "object" : r === "array" ? x.type === "array" || x.type === "object" : r === "object" ? x.type === "object" : !0), [d, r]);
+  }, [i, o]), f = React.useMemo(() => Object.entries(d).map(([b, x]) => ({
+    key: b,
+    value: x,
+    type: u(x)
+  })).filter((b) => r === "value" ? b.type === "value" || b.type === "object" : r === "array" ? b.type === "array" || b.type === "object" : r === "object" ? b.type === "object" : !0), [d, r]);
   return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
     /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
@@ -4817,33 +4820,33 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
             /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
             "Back"
           ] }),
-          h.map((x) => /* @__PURE__ */ jsxs(
+          f.map((b) => /* @__PURE__ */ jsxs(
             CommandItem,
             {
-              value: x.key,
+              value: b.key,
               disabled: !1,
-              onSelect: () => g(x),
+              onSelect: () => g(b),
               className: "flex items-center justify-between",
               children: [
-                /* @__PURE__ */ jsx("span", { children: x.key }),
+                /* @__PURE__ */ jsx("span", { children: b.key }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  r === "object" && x.type === "object" && /* @__PURE__ */ jsx(
+                  r === "object" && b.type === "object" && /* @__PURE__ */ jsx(
                     Button,
                     {
                       size: "sm",
                       variant: "ghost",
                       className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
-                      onClick: (f) => {
-                        f.stopPropagation(), n([...i, x.key].join(".")), l(!1);
+                      onClick: (x) => {
+                        x.stopPropagation(), n([...i, b.key].join(".")), l(!1);
                       },
                       children: "Select"
                     }
                   ),
-                  (x.type === "object" || x.type === "array") && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
+                  (b.type === "object" || b.type === "array") && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
                 ] })
               ]
             },
-            x.key
+            b.key
           ))
         ] })
       ] })
@@ -4864,66 +4867,66 @@ const CustomFieldTemplate = ({
   formData: g,
   onChange: m
 }) => {
-  const { selectedLang: h, fallbackLang: x, languages: f } = useLanguages(), b = isEmpty(f) ? "" : isEmpty(h) ? x : h, y = get(LANGUAGES, b, b), B = usePageExternalData(), E = useSelectedBlock(), w = useRegisteredChaiBlocks(), S = get(w, [E == null ? void 0 : E._type, "i18nProps"], []) || [], [A, j] = useState(null), C = useCallback(
+  const { selectedLang: f, fallbackLang: b, languages: x } = useLanguages(), h = isEmpty(x) ? "" : isEmpty(f) ? b : f, y = get(LANGUAGES, h, h), B = usePageExternalData(), E = useSelectedBlock(), w = useRegisteredChaiBlocks(), S = get(w, [E == null ? void 0 : E._type, "i18nProps"], []) || [], [A, _] = useState(null), C = useCallback(
     (v) => {
-      const I = (_) => /[.,!?;:]/.test(_), T = (_, P, D) => {
+      const N = (j) => /[.,!?;:]/.test(j), I = (j, R, D) => {
         let L = "", $ = "";
-        const O = P > 0 ? _[P - 1] : "", H = P < _.length ? _[P] : "";
-        return P > 0 && (O === "." || !I(O) && O !== " ") && (L = " "), P < _.length && !I(H) && H !== " " && ($ = " "), {
+        const O = R > 0 ? j[R - 1] : "", H = R < j.length ? j[R] : "";
+        return R > 0 && (O === "." || !N(O) && O !== " ") && (L = " "), R < j.length && !N(H) && H !== " " && ($ = " "), {
           text: L + D + $,
           prefixLength: L.length,
           suffixLength: $.length
         };
-      }, R = document.getElementById(o);
-      if (!R) return;
-      const M = document.getElementById(`quill.${o}`);
-      if (M && "__quill" in M) {
-        const _ = M.__quill;
-        if (_) {
-          const P = `{{${v}}}`;
-          _.focus();
-          let D = _.getSelection();
-          if (D || (D = _.getSelection(!0)), D)
+      }, M = document.getElementById(o);
+      if (!M) return;
+      const P = document.getElementById(`quill.${o}`);
+      if (P && "__quill" in P) {
+        const j = P.__quill;
+        if (j) {
+          const R = `{{${v}}}`;
+          j.focus();
+          let D = j.getSelection();
+          if (D || (D = j.getSelection(!0)), D)
             if (D.length > 0) {
               const L = D.index;
-              _.deleteText(D.index, D.length), _.setSelection(L, 0);
-              const $ = _.getText(), {
+              j.deleteText(D.index, D.length), j.setSelection(L, 0);
+              const $ = j.getText(), {
                 text: O,
                 prefixLength: H,
                 suffixLength: V
-              } = T($, L, P);
-              _.insertText(L, O), _.setSelection(L + H + P.length + V, 0);
+              } = I($, L, R);
+              j.insertText(L, O), j.setSelection(L + H + R.length + V, 0);
             } else {
               const L = D.index;
-              _.setSelection(L, 0);
-              const $ = _.getText(), {
+              j.setSelection(L, 0);
+              const $ = j.getText(), {
                 text: O,
                 prefixLength: H,
                 suffixLength: V
-              } = T($, L, P);
-              _.insertText(L, O), _.setSelection(L + H + P.length + V, 0);
+              } = I($, L, R);
+              j.insertText(L, O), j.setSelection(L + H + R.length + V, 0);
             }
           else {
-            const L = _.getLength();
-            _.setSelection(L - 1, 0);
-            const $ = _.getText(), {
+            const L = j.getLength();
+            j.setSelection(L - 1, 0);
+            const $ = j.getText(), {
               text: O,
               prefixLength: H,
               suffixLength: V
-            } = T($, L - 1, P);
-            _.insertText(L - 1, O), _.setSelection(L - 1 + H + P.length + V, 0);
+            } = I($, L - 1, R);
+            j.insertText(L - 1, O), j.setSelection(L - 1 + H + R.length + V, 0);
           }
-          setTimeout(() => m(_.root.innerHTML, {}, o), 200);
+          setTimeout(() => m(j.root.innerHTML, {}, o), 200);
           return;
         }
       } else {
-        const _ = R, P = _.selectionStart || 0, D = _.value || "", L = _.selectionEnd || P;
-        if (L > P) {
-          const F = `{{${v}}}`, { text: z } = T(D, P, F), W = D.slice(0, P) + z + D.slice(L);
+        const j = M, R = j.selectionStart || 0, D = j.value || "", L = j.selectionEnd || R;
+        if (L > R) {
+          const F = `{{${v}}}`, { text: z } = I(D, R, F), W = D.slice(0, R) + z + D.slice(L);
           m(W, {}, o);
           return;
         }
-        const O = `{{${v}}}`, { text: H } = T(D, P, O), V = D.slice(0, P) + H + D.slice(P);
+        const O = `{{${v}}}`, { text: H } = I(D, R, O), V = D.slice(0, R) + H + D.slice(R);
         m(V, {}, o);
       }
     },
@@ -4940,7 +4943,7 @@ const CustomFieldTemplate = ({
         "label",
         {
           htmlFor: o,
-          onClick: () => j(v ? null : o),
+          onClick: () => _(v ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             v ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
@@ -5025,8 +5028,8 @@ const CustomFieldTemplate = ({
       formData: a,
       onChange: ({ formData: g }, m) => {
         if (console.log(g, m), !m || o !== (g == null ? void 0 : g._id)) return;
-        const h = take(m.split("."), 2).join(".").replace("root.", "");
-        u({ formData: g }, h);
+        const f = take(m.split("."), 2).join(".").replace("root.", "");
+        u({ formData: g }, f);
       }
     },
     i
@@ -5038,17 +5041,17 @@ const CustomFieldTemplate = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), x = ({ formData: A }, j, C) => {
-    j && (c == null ? void 0 : c._id) === n._id && a([n._id], { [j]: get(A, j) }, C);
-  }, f = useCallback(
-    debounce(({ formData: A }, j, C) => {
-      x({ formData: A }, j, C), d(A);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), b = ({ formData: A }, _, C) => {
+    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(A, _) }, C);
+  }, x = useCallback(
+    debounce(({ formData: A }, _, C) => {
+      b({ formData: A }, _, C), d(A);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: A }, j) => {
-    j && (r([n._id], { [j]: get(A, j) }), f({ formData: A }, j, { [j]: get(c, j) }));
-  }, y = ({ formData: A }, j) => {
-    j && (r([g._id], { [j]: get(A, j) }), f({ formData: A }, j, { [j]: get(c, j) }));
+  ), h = ({ formData: A }, _) => {
+    _ && (r([n._id], { [_]: get(A, _) }), x({ formData: A }, _, { [_]: get(c, _) }));
+  }, y = ({ formData: A }, _) => {
+    _ && (r([g._id], { [_]: get(A, _) }), x({ formData: A }, _, { [_]: get(c, _) }));
   };
   keys(get(i, "_bindings", {}));
   const { schema: B, uiSchema: E } = useMemo(() => {
@@ -5058,8 +5061,8 @@ function BlockSettings() {
   }, [n]), { wrapperSchema: w, wrapperUiSchema: S } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const A = g == null ? void 0 : g._type, { schema: j = {}, uiSchema: C = {} } = getBlockFormSchemas(A);
-    return { wrapperSchema: j, wrapperUiSchema: C };
+    const A = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: C = {} } = getBlockFormSchemas(A);
+    return { wrapperSchema: _, wrapperUiSchema: C };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -5084,25 +5087,171 @@ function BlockSettings() {
       /* @__PURE__ */ jsx("div", { className: p ? "h-auto" : "invisible h-0", children: /* @__PURE__ */ jsx(
         JSONForm,
         {
-          blockId: g == null ? void 0 : g._id,
-          onChange: y,
-          formData: h,
-          schema: w,
-          uiSchema: S
+          blockId: g == null ? void 0 : g._id,
+          onChange: y,
+          formData: f,
+          schema: w,
+          uiSchema: S
+        }
+      ) })
+    ] }),
+    isEmpty(B) ? null : /* @__PURE__ */ jsx(
+      JSONForm,
+      {
+        blockId: n == null ? void 0 : n._id,
+        onChange: h,
+        formData: i,
+        schema: B,
+        uiSchema: E
+      }
+    ),
+    (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsx(GlobalBlockSettings, {}) : null
+  ] });
+}
+const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: o ? "rotate-90" : "",
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    height: "14px",
+    width: "14px",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx("path", { d: "M400 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM224 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm176-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h328c6.6 0 12 5.4 12 12v312z" })
+  }
+), WEB_BREAKPOINTS = [
+  {
+    title: "Mobile (Base)",
+    content: "Styles set here are applied to all screen unless edited at higher breakpoint",
+    breakpoint: "xs",
+    icon: /* @__PURE__ */ jsx(MobileIcon, {}),
+    width: 400
+  },
+  {
+    title: "Mobile landscape (SM)",
+    content: "Styles set here are applied at 640px and up unless edited at higher breakpoint",
+    breakpoint: "sm",
+    icon: /* @__PURE__ */ jsx(MobileIcon, { className: "rotate-90" }),
+    width: 640
+  },
+  {
+    title: "Tablet (MD)",
+    content: "Styles set here are applied at 768px and up",
+    breakpoint: "md",
+    icon: /* @__PURE__ */ jsx(TabletIcon, {}),
+    width: 800
+  },
+  {
+    title: "Tablet Landscape (LG)",
+    content: "Styles set here are applied at 1024px and up unless edited at higher breakpoint",
+    breakpoint: "lg",
+    icon: /* @__PURE__ */ jsx(TabletIcon, { landscape: !0 }),
+    width: 1024
+  },
+  {
+    title: "Desktop (XL)",
+    content: "Styles set here are applied at 1280px and up unless edited at higher breakpoint",
+    breakpoint: "xl",
+    icon: /* @__PURE__ */ jsx(LaptopIcon, {}),
+    width: 1420
+  },
+  {
+    title: "Large Desktop (2XL)",
+    content: "Styles set here are applied at 1536px and up",
+    breakpoint: "2xl",
+    icon: /* @__PURE__ */ jsx(DesktopIcon, {}),
+    width: 1920
+  }
+], BreakpointCard = ({
+  canvas: o = !1,
+  openDelay: n = 400,
+  title: r,
+  content: a,
+  currentBreakpoint: l,
+  breakpoint: i,
+  width: c,
+  icon: d,
+  onClick: p
+}) => {
+  const { t: u } = useTranslation();
+  return /* @__PURE__ */ jsxs(HoverCard, { openDelay: n, children: [
+    /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => p(c),
+        size: "sm",
+        className: "h-7 w-7 rounded-md p-1",
+        variant: i === l ? "outline" : "ghost",
+        children: d
+      }
+    ) }),
+    /* @__PURE__ */ jsx(HoverCardContent, { className: "w-fit max-w-52 border-border", children: /* @__PURE__ */ jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: u(r) }),
+      o && /* @__PURE__ */ jsx("p", { className: "text-xs", children: u(a) })
+    ] }) }) })
+  ] });
+}, Breakpoints$1 = ({ openDelay: o = 400, canvas: n = !1 }) => {
+  const [r, , a] = useScreenSizeWidth(), [l, i] = useCanvasDisplayWidth(), [c, d] = useSelectedBreakpoints(), p = c, u = d, { t: g } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (h) => {
+    p.includes(h) ? p.length > 2 && u(p.filter((y) => y !== h)) : u((y) => [...y, h]);
+  }, b = (h) => {
+    n || a(h), i(h);
+  }, x = getBreakpointValue(n ? l : r).toLowerCase();
+  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (h) => /* @__PURE__ */ createElement(
+    BreakpointCard,
+    {
+      canvas: n,
+      ...h,
+      onClick: b,
+      key: h.breakpoint,
+      currentBreakpoint: x
+    }
+  )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
+      m.filter((h) => includes(p, toUpper(h.breakpoint))),
+      (h) => /* @__PURE__ */ createElement(
+        BreakpointCard,
+        {
+          canvas: n,
+          openDelay: o,
+          ...h,
+          onClick: b,
+          key: h.breakpoint,
+          currentBreakpoint: x
         }
-      ) })
+      )
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: g("Screen sizes") }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        map(m, (h) => /* @__PURE__ */ jsx(
+          DropdownMenuCheckboxItem,
+          {
+            disabled: h.breakpoint === "xs",
+            onCheckedChange: () => f(toUpper(h.breakpoint)),
+            checked: includes(p, toUpper(h.breakpoint)),
+            children: g(h.title)
+          },
+          h.breakpoint
+        ))
+      ] })
+    ] })
+  ] });
+};
+function BreakpointSelector() {
+  const [, o] = useScreenSizeWidth(), n = useMemo(() => {
+    const r = WEB_BREAKPOINTS.find((a) => a.breakpoint === o);
+    return r == null ? void 0 : r.content;
+  }, [o, WEB_BREAKPOINTS]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-start bg-muted px-2 py-1 shadow-sm", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Screen: " }),
+      /* @__PURE__ */ jsx(Breakpoints$1, { openDelay: 500 })
     ] }),
-    isEmpty(B) ? null : /* @__PURE__ */ jsx(
-      JSONForm,
-      {
-        blockId: n == null ? void 0 : n._id,
-        onChange: b,
-        formData: i,
-        schema: B,
-        uiSchema: E
-      }
-    ),
-    (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsx(GlobalBlockSettings, {}) : null
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-md rounded-t-none border border-border p-1", children: /* @__PURE__ */ jsx("p", { className: "flex-1 text-[10px] text-muted-foreground", children: n }) })
   ] });
 }
 function FaLanguage(o) {
@@ -5171,12 +5320,12 @@ function Countdown() {
 const AskAIStyles = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, g] = useState();
   useEffect(() => {
-    var h;
-    (h = d.current) == null || h.focus();
+    var f;
+    (f = d.current) == null || f.focus();
   }, []);
-  const m = (h) => {
-    const { usage: x } = h || {};
-    !l && x && g(x), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const m = (f) => {
+    const { usage: b } = f || {};
+    !l && b && g(b), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -5185,12 +5334,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (h) => c(h.target.value),
+        onChange: (f) => c(f.target.value),
         placeholder: n("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
-        onKeyDown: (h) => {
-          h.key === "Enter" && (h.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m));
+        onKeyDown: (f) => {
+          f.key === "Enter" && (f.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m));
         }
       }
     ),
@@ -5231,77 +5380,85 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var C;
-  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: g } = useToast(), m = (C = first(r)) == null ? void 0 : C.prop, { classes: h } = getSplitChaiClasses(get(a, m, "")), x = h.split(" ").filter((N) => !isEmpty(N)), f = () => {
-    const N = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l(c, N, !0), u("");
-  }, [b, y] = useState([]), B = ({ value: N }) => {
-    const k = N.trim().toLowerCase(), v = k.match(/.+:/g);
-    let I = [];
-    if (v && v.length > 0) {
-      const [T] = v, R = k.replace(T, "");
-      I = o.search(R).map((_) => ({
-        ..._,
-        item: { ..._.item, name: T + _.item.name }
+  var M;
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), f = useBuilderProp("askAiCallBack", null), [b, x] = useState(""), { toast: h } = useToast(), y = (M = first(d)) == null ? void 0 : M.prop, { classes: B } = getSplitChaiClasses(get(p, y, "")), E = B.split(" ").filter((P) => !isEmpty(P)), w = () => {
+    const P = b.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(m, P, !0), x("");
+  }, [S, A] = useState([]), _ = ({ value: P }) => {
+    const j = P.trim().toLowerCase(), R = j.match(/.+:/g);
+    let D = [];
+    if (R && R.length > 0) {
+      const [L] = R, $ = j.replace(L, "");
+      D = i.search($).map((H) => ({
+        ...H,
+        item: { ...H.item, name: L + H.item.name }
       }));
     } else
-      I = o.search(k);
-    return y(map(I, "item"));
-  }, E = () => {
-    y([]);
-  }, w = (N) => N.name, S = (N) => /* @__PURE__ */ jsx("div", { className: "p-1 rounded-md", children: N.name }), A = {
-    autoComplete: "off",
-    autoCorrect: "off",
-    autoCapitalize: "off",
-    spellCheck: !1,
-    placeholder: n("Enter classes separated by space"),
-    value: p,
-    onKeyDown: (N) => {
-      N.key === "Enter" && p.trim() !== "" && f();
-    },
-    onChange: (N, { newValue: k }) => u(k),
-    className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, j = () => {
+      D = i.search(j);
+    return A(map(D, "item"));
+  }, C = () => {
+    A([]);
+  }, T = (P) => P.name, k = (P) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: P.name }), v = useMemo(
+    () => ({
+      ref: o,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: !1,
+      placeholder: c("Enter classes separated by space"),
+      value: b,
+      onKeyDown: (P) => {
+        P.key === "Enter" && b.trim() !== "" && w();
+      },
+      onChange: (P, { newValue: j }) => x(j),
+      className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
+    }),
+    [b, c, o]
+  ), N = (P) => {
+    debugger;
+    const j = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    g(m, [P]), u(m, j, !0), r(""), l(-1);
+  }, I = () => {
     if (navigator.clipboard === void 0) {
-      g({
-        title: n("Clipboard not supported"),
-        description: n("Please use Chrome, Firefox or Safari"),
+      h({
+        title: c("Clipboard not supported"),
+        description: c("Please use Chrome, Firefox or Safari"),
         variant: "destructive"
       });
       return;
     }
-    navigator.clipboard.writeText(x.join(" ")), g({
-      title: n("Copied"),
-      description: n("Classes copied to clipboard")
+    navigator.clipboard.writeText(E.join(" ")), h({
+      title: c("Copied"),
+      description: c("Classes copied to clipboard")
     });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 pb-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("span", { children: n("Classes") }),
+        /* @__PURE__ */ jsx("span", { children: c("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: j, className: "cursor-pointer" }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: n("Copy classes to clipboard") }) })
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: I, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
-      d ? /* @__PURE__ */ jsxs(Popover, { children: [
+      f ? /* @__PURE__ */ jsxs(Popover, { children: [
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
-          /* @__PURE__ */ jsx(SparklesIcon, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx("span", { className: "ml-2", children: n("Ask AI") })
+          /* @__PURE__ */ jsx(SparklesIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "ml-2", children: c("Ask AI") })
         ] }) }),
-        /* @__PURE__ */ jsx(PopoverContent, { side: "left", className: "p-2", children: /* @__PURE__ */ jsx(AskAIStyles, { blockId: a == null ? void 0 : a._id }) })
+        /* @__PURE__ */ jsx(PopoverContent, { side: "left", className: "p-2", children: /* @__PURE__ */ jsx(AskAIStyles, { blockId: p == null ? void 0 : p._id }) })
       ] }) : null
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-x-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "relative flex items-center w-full gap-x-3", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: b,
-          onSuggestionsFetchRequested: B,
-          onSuggestionsClearRequested: E,
-          getSuggestionValue: w,
-          renderSuggestion: S,
-          inputProps: A,
+          suggestions: S,
+          onSuggestionsFetchRequested: _,
+          onSuggestionsClearRequested: C,
+          getSuggestionValue: T,
+          renderSuggestion: k,
+          inputProps: v,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -5317,30 +5474,47 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: f,
-          disabled: p.trim() === "",
+          onClick: w,
+          disabled: b.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap w-full gap-2 overflow-x-hidden", children: x.map((N) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        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 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
-        children: [
-          N,
-          /* @__PURE__ */ jsx(
-            Cross2Icon,
-            {
-              onClick: () => i(c, [N]),
-              className: "absolute invisible bg-red-400 rounded-full right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
-            }
-          )
-        ]
-      },
-      N
-    )) })
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: E.map(
+      (P, j) => a === j ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: o,
+          value: n,
+          onChange: (R) => r(R.target.value),
+          onBlur: () => {
+            N(P);
+          },
+          onKeyDown: (R) => {
+            R.key === "Enter" && N(P);
+          },
+          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"
+        },
+        P
+      ) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          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",
+          children: [
+            P,
+            n !== P && /* @__PURE__ */ jsx(
+              Cross2Icon,
+              {
+                onClick: () => g(m, [P], !0),
+                className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
+              }
+            )
+          ]
+        },
+        P
+      )
+    ) })
   ] });
 }
 const BASIC_UNITS = ["px", "%", "em", "rem", "ch", "vh", "vw"], FLEX_CHILD_SECTION = {
@@ -5368,6 +5542,7 @@ const BASIC_UNITS = ["px", "%", "em", "rem", "ch", "vh", "vw"], FLEX_CHILD_SECTI
     heading: "Styles",
     items: [
       { component: ManualClasses },
+      { component: BreakpointSelector },
       { type: "arbitrary", label: "layout.width", units: BASIC_UNITS.concat("auto"), property: "width" },
       { type: "arbitrary", label: "layout.height", units: BASIC_UNITS.concat("auto"), property: "height" },
       {
@@ -5664,57 +5839,7 @@ function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disab
     }
   );
 }
-const RangeChoices = ({ property: o, onChange: n }) => {
-  const { canReset: r, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), { getClasses: c } = useTailwindClassList(), d = c(o, [""]), p = d.indexOf(i) > -1 ? d.indexOf(i) : 0, u = /\[.*\]/g.test(i);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: u ? /* @__PURE__ */ jsx("div", { className: "px-2 py-[5px]", children: i }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "hover:bg-bg-gray-700 box-border w-2/12 rounded-bl rounded-tl bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!r || p - 1 < 0),
-        onClick: () => n(nth(d, p - 1), o),
-        children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
-          MinusIcon,
-          {
-            className: !a && (!r || p - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ jsx(DropDownChoices, { label: !1, property: o, onChange: n }) }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "hover:bg-bg-gray-700 w-2/12 rounded-br rounded-tr bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!r || p + 1 >= d.length),
-        onClick: () => n(nth(d, p + 1), o),
-        children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
-          PlusIcon,
-          {
-            className: !a && (!r || p + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
-          }
-        ) })
-      }
-    )
-  ] }) });
-}, IconChoices = ({ property: o, onChange: n }) => {
-  const { getClasses: r } = useTailwindClassList(), a = r(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
-  return /* @__PURE__ */ jsx("div", { className: "flex grow flex-wrap gap-1", children: map(a, (d) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        disabled: !l,
-        onClick: () => n(d, o),
-        className: `cursor-pointer rounded border border-border p-1 disabled:cursor-not-allowed ${c === d ? "bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: React__default.createElement(get(EDITOR_ICONS, d, BoxIcon))
-      }
-    ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(d)) })
-  ] })) });
-}, COLOR_PROP = {
+const COLOR_PROP = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -5727,10 +5852,10 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), h = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), f = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
+    (h) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(h) ? (c([]), p({ color: h })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: h, shade: y.shade ? y.shade : "500" })));
     },
     [c, p]
   );
@@ -5739,28 +5864,28 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const x = useCallback(
+  const b = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      p({ color: g, shade: b });
+    (h) => {
+      p({ color: g, shade: h });
     },
     [g]
   );
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [r]);
-  const { match: f } = useTailwindClassList();
+  const { match: x } = useTailwindClassList();
   return useEffect(() => {
     const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    f(o, y) && n(y, o);
-  }, [f, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    x(o, y) && n(y, o);
+  }, [x, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
       {
         disabled: !l,
         rounded: !0,
         selected: g,
-        onChange: h,
+        onChange: f,
         options: [
           "current",
           "transparent",
@@ -5793,8 +5918,58 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: x, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: b, options: i }) })
   ] });
+}, IconChoices = ({ property: o, onChange: n }) => {
+  const { getClasses: r } = useTailwindClassList(), a = r(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
+  return /* @__PURE__ */ jsx("div", { className: "flex grow flex-wrap gap-1", children: map(a, (d) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !l,
+        onClick: () => n(d, o),
+        className: `cursor-pointer rounded border border-border p-1 disabled:cursor-not-allowed ${c === d ? "bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: React__default.createElement(get(EDITOR_ICONS, d, BoxIcon))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(d)) })
+  ] })) });
+}, RangeChoices = ({ property: o, onChange: n }) => {
+  const { canReset: r, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), { getClasses: c } = useTailwindClassList(), d = c(o, [""]), p = d.indexOf(i) > -1 ? d.indexOf(i) : 0, u = /\[.*\]/g.test(i);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: u ? /* @__PURE__ */ jsx("div", { className: "px-2 py-[5px]", children: i }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "hover:bg-bg-gray-700 box-border w-2/12 rounded-bl rounded-tl bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
+        disabled: !a && (!r || p - 1 < 0),
+        onClick: () => n(nth(d, p - 1), o),
+        children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          MinusIcon,
+          {
+            className: !a && (!r || p - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ jsx(DropDownChoices, { label: !1, property: o, onChange: n }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "hover:bg-bg-gray-700 w-2/12 rounded-br rounded-tr bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
+        disabled: !a && (!r || p + 1 >= d.length),
+        onClick: () => n(nth(d, p + 1), o),
+        children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          PlusIcon,
+          {
+            className: !a && (!r || p + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+          }
+        ) })
+      }
+    )
+  ] }) });
 }, getUserInputValues = (o, n) => {
   o = o.toLowerCase();
   let r = o.trim().replace(/ |\+/g, "");
@@ -5940,38 +6115,38 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [b, y] = useState(""), [B, E] = useState(!1), [w, S] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [b, x] = useState(!1), [h, y] = useState(""), [B, E] = useState(!1), [w, S] = useState(!1);
   useEffect(() => {
     const { value: k, unit: v } = getClassValueAndUnit(i);
     if (v === "") {
-      l(k), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      l(k), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    h(v), l(v === "class" || isEmpty(k) ? "" : k);
+    f(v), l(v === "class" || isEmpty(k) ? "" : k);
   }, [i, p, u]);
-  const A = useThrottledCallback((k) => c(k), [c], THROTTLE_TIME), j = useThrottledCallback((k) => c(k, !1), [c], THROTTLE_TIME), C = useCallback(
+  const A = useThrottledCallback((k) => c(k), [c], THROTTLE_TIME), _ = useThrottledCallback((k) => c(k, !1), [c], THROTTLE_TIME), C = useCallback(
     (k = !1) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
-        f(!0);
+        x(!0);
         return;
       }
-      const I = get(v, "unit") !== "" ? get(v, "unit") : m;
-      if (I === "auto" || I === "none") {
-        A(`${d}${I}`);
+      const N = get(v, "unit") !== "" ? get(v, "unit") : m;
+      if (N === "auto" || N === "none") {
+        A(`${d}${N}`);
         return;
       }
       if (get(v, "value") === "")
         return;
-      const R = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
-      k ? j(R) : A(R);
+      const M = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      k ? _(M) : A(M);
     },
-    [A, j, a, m, d, u]
-  ), N = useCallback(
+    [A, _, a, m, d, u]
+  ), T = useCallback(
     (k) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
-        f(!0);
+        x(!0);
         return;
       }
       if (k === "auto" || k === "none") {
@@ -5980,8 +6155,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       }
       if (get(v, "value") === "")
         return;
-      const I = get(v, "unit") !== "" ? get(v, "unit") : k, R = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
-      A(R);
+      const N = get(v, "unit") !== "" ? get(v, "unit") : k, M = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      A(M);
     },
     [A, a, d, u]
   );
@@ -6012,26 +6187,26 @@ const RangeChoices = ({ property: o, onChange: n }) => {
               return;
             k.preventDefault(), S(!0);
             const v = parseInt$1(k.target.value);
-            let I = isNaN$1(v) ? 0 : v;
-            k.keyCode === 38 && (I += 1), k.keyCode === 40 && (I -= 1);
-            const T = `${I}`, M = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${m === "-" ? "" : m}]`;
-            j(M);
+            let N = isNaN$1(v) ? 0 : v;
+            k.keyCode === 38 && (N += 1), k.keyCode === 40 && (N -= 1);
+            const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+            _(P);
           },
           onKeyUp: (k) => {
             w && (k.preventDefault(), S(!1));
           },
           onBlur: () => C(),
           onChange: (k) => {
-            f(!1), l(k.target.value);
+            x(!1), l(k.target.value);
           },
           onClick: (k) => {
             var v;
             (v = k == null ? void 0 : k.target) == null || v.select(), r(!1);
           },
-          value: B ? b : a,
+          value: B ? h : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            x ? "border-red-500 text-red-500" : "border-foreground/20"
+            b ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6054,7 +6229,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             units: u,
             current: m,
             onSelect: (k) => {
-              r(!1), h(k), N(k);
+              r(!1), f(k), T(k);
             }
           }
         ) }) })
@@ -6067,15 +6242,15 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         onDragEnd: (k) => {
           if (y(() => ""), E(!1), isEmpty(k))
             return;
-          const v = `${k}`, T = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          A(T);
+          const v = `${k}`, I = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
+          A(I);
         },
         onDrag: (k) => {
           if (isEmpty(k))
             return;
           y(k);
-          const v = `${k}`, T = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          j(T);
+          const v = `${k}`, I = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
+          _(I);
         },
         currentValue: a,
         unit: m,
@@ -6172,22 +6347,22 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useCanvasWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
-    (j, C = !0) => {
-      const N = { dark: p, mq: g, mod: u, cls: j, property: l, fullCls: "" };
-      (p || u !== "") && (N.mq = "xs");
-      const k = generateFullClsName(N);
-      h(f, [k], C);
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), f = useAddClassesToBlocks(), b = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), h = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+    (_, C = !0) => {
+      const T = { dark: p, mq: g, mod: u, cls: _, property: l, fullCls: "" };
+      (p || u !== "") && (T.mq = "xs");
+      const k = generateFullClsName(T);
+      f(x, [k], C);
     },
-    [f, p, g, u, l, h]
+    [x, p, g, u, l, f]
   ), B = useCallback(() => {
-    x(f, [b]);
-  }, [f, b, x]), E = useMemo(() => canChangeClass(m, g), [m, g]);
+    b(x, [h], !0);
+  }, [x, h, b]), E = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
     i(E, m);
   }, [E, i, m]);
-  const [, , w] = useCanvasWidth(), S = useCallback(
-    (j) => {
+  const [, , w] = useScreenSizeWidth(), S = useCallback(
+    (_) => {
       w({
         xs: 400,
         sm: 640,
@@ -6195,7 +6370,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[j]);
+      }[_]);
     },
     [w]
   ), A = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
@@ -6219,7 +6394,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : E && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${h ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : E && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6260,7 +6435,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((h) => map(g, "property").includes(h), [g]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((f) => map(g, "property").includes(f), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6269,22 +6444,22 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: h, key: x }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            n.map(({ label: f, key: b }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(x),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => u(b),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${b === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: m(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: m(b) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, x, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, b, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(h)) })
+              /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(f)) })
             ] }) }))
           ) })
         ] }),
@@ -6424,12 +6599,12 @@ function BlockStyling() {
   }), d = useThrottledCallback(
     (u) => {
       const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
-      let h = parseFloat(i.dragStartValue);
-      h = isNaN(h) ? 0 : h;
-      let x = MAPPER[i.dragUnit];
-      (startsWith(m, "scale") || m === "opacity") && (x = 10);
-      let b = (i.dragStartY - u.pageY) / x + h;
-      g && b < 0 && (b = 0), m === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
+      let f = parseFloat(i.dragStartValue);
+      f = isNaN(f) ? 0 : f;
+      let b = MAPPER[i.dragUnit];
+      (startsWith(m, "scale") || m === "opacity") && (b = 10);
+      let h = (i.dragStartY - u.pageY) / b + f;
+      g && h < 0 && (h = 0), m === "opacity" && h > 1 && (h = 1), i.onDrag(`${h}`), l(`${h}`);
     },
     [i],
     50
@@ -6471,35 +6646,35 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), h = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), f = () => {
     if (has(o, "blocks")) {
-      const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(b), r || null, a);
+      const h = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(h), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, x = useFeature("dnd"), { t: f } = useTranslation();
+  }, b = useFeature("dnd"), { t: x } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
       {
         disabled: n,
-        onClick: h,
+        onClick: f,
         type: "button",
-        onDragStart: (b) => {
-          b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (h) => {
+          h.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), h.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             g([]), m();
           }, 200);
         },
-        draggable: x ? "true" : "false",
+        draggable: b ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(f(d || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: f(d || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -6684,7 +6859,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, h, x, f, b, y, B, E;
+  var m, f, b, x, h, y, B, E;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
@@ -6726,9 +6901,9 @@ const CoreBlock = ({
     a = {
       ...a,
       href: ((m = l.find((S) => S.key === "href")) == null ? void 0 : m.value) || "",
-      hrefType: ((h = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : h.value) || "video",
-      autoplay: ((x = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
-      maxWidth: ((b = (f = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : b.replace("px", "")) || "",
+      hrefType: ((f = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : f.value) || "video",
+      autoplay: ((b = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : b.value) === "true" ? "true" : "false",
+      maxWidth: ((h = (x = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : h.replace("px", "")) || "",
       backdropColor: ((y = l.find((S) => S.key === "data-overlay")) == null ? void 0 : y.value) || "",
       galleryName: ((B = l.find((S) => S.key === "data-gall")) == null ? void 0 : B.value) || ""
     }, forEach(w, (S) => {
@@ -6741,14 +6916,14 @@ const CoreBlock = ({
     a.content = getTextContent(w);
     const S = find(
       r.children || [],
-      (A) => (A == null ? void 0 : A.tagName) === "span" && some(A.children || [], (j) => (j == null ? void 0 : j.tagName) === "svg")
+      (A) => (A == null ? void 0 : A.tagName) === "span" && some(A.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg")
     );
     if (S) {
-      const A = find(S.children || [], (j) => (j == null ? void 0 : j.tagName) === "svg");
+      const A = find(S.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg");
       if (A) {
         a.icon = stringify([A]);
-        const { height: j, width: C } = getSvgDimensions(A, "16px", "16px");
-        a.iconHeight = j, a.iconWidth = C;
+        const { height: _, width: C } = getSvgDimensions(A, "16px", "16px");
+        a.iconHeight = _, a.iconWidth = C;
       }
     }
     return [a];
@@ -6760,8 +6935,8 @@ const CoreBlock = ({
     const w = stringify([r]);
     return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
   } else if (r.tagName === "svg") {
-    const w = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), A = get(w, "value") ? `[${get(w, "value")}px]` : "24px", j = get(S, "value") ? `[${get(S, "value")}px]` : "24px", C = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${j} h-${A}`, C)}`.trim(), r.attributes = filter(r.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([r]), [a];
+    const w = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), A = get(w, "value") ? `[${get(w, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", C = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${_} h-${A}`, C)}`.trim(), r.attributes = filter(r.attributes, (T) => !includes(["style", "width", "height", "class"], T.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((E = n.block) == null ? void 0 : E._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -6811,21 +6986,21 @@ const CoreBlock = ({
     /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "", onClick: () => c(), size: "sm", className: "w-fit", children: r("Import HTML") }) })
   ] });
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
-  var f;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (f = find(c, (b) => b._id === r)) == null ? void 0 : f._type;
+  var x;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (x = find(c, (h) => h._id === r)) == null ? void 0 : x._type;
   useEffect(() => {
-    const b = setTimeout(() => {
+    const h = setTimeout(() => {
       var y;
       (y = u.current) == null || y.focus();
     }, 0);
-    return () => clearTimeout(b);
+    return () => clearTimeout(h);
   }, [g]);
-  const h = d ? values(n).filter(
-    (b) => {
+  const f = d ? values(n).filter(
+    (h) => {
       var y, B;
-      return (((y = b.label) == null ? void 0 : y.toLowerCase()) + " " + ((B = b.type) == null ? void 0 : B.toLowerCase())).includes(d.toLowerCase());
+      return (((y = h.label) == null ? void 0 : y.toLowerCase()) + " " + ((B = h.type) == null ? void 0 : B.toLowerCase())).includes(d.toLowerCase());
     }
-  ) : n, x = d ? o.filter((b) => reject(filter(values(h), { group: b }), { hidden: !0 }).length > 0) : o.filter((b) => reject(filter(values(n), { group: b }), { hidden: !0 }).length > 0);
+  ) : n, b = d ? o.filter((h) => reject(filter(values(f), { group: h }), { hidden: !0 }).length > 0) : o.filter((h) => reject(filter(values(n), { group: h }), { hidden: !0 }).length > 0);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-2xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -6834,21 +7009,21 @@ const CoreBlock = ({
         type: "search",
         placeholder: i("Search blocks..."),
         value: d,
-        onChange: (b) => p(b.target.value)
+        onChange: (h) => p(h.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: x.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+    /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: b.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
       i("No blocks found matching"),
       ' "',
       d,
       '"'
     ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: sortBy(
-      x,
-      (b) => CORE_GROUPS.indexOf(b) === -1 ? 99 : CORE_GROUPS.indexOf(b)
-    ).map((b) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(b.toLowerCase())) }),
+      b,
+      (h) => CORE_GROUPS.indexOf(h) === -1 ? 99 : CORE_GROUPS.indexOf(h)
+    ).map((h) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(h.toLowerCase())) }),
       /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: React__default.Children.toArray(
-        reject(filter(values(h), { group: b }), { hidden: !0 }).map((y) => /* @__PURE__ */ jsx(
+        reject(filter(values(f), { group: h }), { hidden: !0 }).map((y) => /* @__PURE__ */ jsx(
           CoreBlock,
           {
             parentId: r,
@@ -6859,7 +7034,7 @@ const CoreBlock = ({
           y.type
         ))
       ) })
-    ] }, b)) }) })
+    ] }, h)) }) })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
   className: o,
@@ -6950,10 +7125,10 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), f = (B) => {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), f = useFeature("dnd"), [, b] = useAtom$1(draggedBlockAtom), x = (B) => {
     const E = has(B, "styles_attrs.data-page-section");
     return B._type === "Box" && E;
-  }, b = useCallback(
+  }, h = useCallback(
     async (B) => {
       if (B.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -6970,12 +7145,12 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : b,
-        draggable: h ? "true" : "false",
+        } : h,
+        draggable: f ? "true" : "false",
         onDragStart: async (B) => {
           const E = await c(n, o);
           let w = r;
-          if (f(first(E)) && (w = null), !isEmpty(E)) {
+          if (x(first(E)) && (w = null), !isEmpty(E)) {
             const S = { blocks: E, uiLibrary: !0, parent: w };
             if (B.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
               const A = new Image();
@@ -6984,7 +7159,7 @@ const BlockCard = ({
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(S), setTimeout(() => {
+            b(S), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7016,9 +7191,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((w) => w.category === "custom"), d = l.find((w) => w.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, h] = useState("Hero"), x = get(g, m, []), f = useRef(null), { t: b } = useTranslation(), y = (w) => {
-    f.current && (clearTimeout(f.current), f.current = null), f.current = setTimeout(() => {
-      f.current && h(w);
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((w) => w.category === "custom"), d = l.find((w) => w.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, f] = useState("Hero"), b = get(g, m, []), x = useRef(null), { t: h } = useTranslation(), y = (w) => {
+    x.current && (clearTimeout(x.current), x.current = null), x.current = setTimeout(() => {
+      x.current && f(w);
     }, 300);
   };
   if (u)
@@ -7026,26 +7201,26 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const B = filter(x, (w, S) => S % 2 === 0), E = filter(x, (w, S) => S % 2 === 1);
+  const B = filter(b, (w, S) => S % 2 === 0), E = filter(b, (w, S) => S % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
       /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: b("Groups") }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: h("Groups") }),
         /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
           map(g, (w, S) => /* @__PURE__ */ jsxs(
             "div",
             {
               onMouseEnter: () => y(S),
-              onMouseLeave: () => clearTimeout(f.current),
-              onClick: () => h(S),
+              onMouseLeave: () => clearTimeout(x.current),
+              onClick: () => f(S),
               className: cn(
                 "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",
                 S === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(b(S.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(h(S.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -7057,7 +7232,7 @@ const BlockCard = ({
     /* @__PURE__ */ jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => f.current ? clearTimeout(f.current) : null,
+        onMouseEnter: () => x.current ? clearTimeout(x.current) : null,
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
@@ -7285,53 +7460,53 @@ function BiExpandVertical(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "m12 19.24-4.95-4.95-1.41 1.42L12 22.07l6.36-6.36-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95 1.41-1.42L12 1.93 5.64 8.29z" }, child: [] }] })(o);
 }
 const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, dragHandle: r }) => {
-  var M;
+  var P;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: x, isSelected: f, willReceiveDrop: b, isDragging: y, isEditing: B, handleClick: E } = o, w = (_) => {
-    _.stopPropagation(), !i.includes(h) && o.toggle();
-  }, S = (_) => {
-    _.isInternal && (p = _.isOpen, _.isOpen && _.close());
-  }, A = (_) => {
-    _.isInternal && p !== null && (p ? _.open() : _.close(), p = null);
-  }, [j, C] = useAtom$1(currentAddSelection), N = () => {
-    var _;
-    k(), o.parent.isSelected || C((_ = o == null ? void 0 : o.parent) == null ? void 0 : _.id);
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: f, data: b, isSelected: x, willReceiveDrop: h, isDragging: y, isEditing: B, handleClick: E } = o, w = (j) => {
+    j.stopPropagation(), !i.includes(f) && o.toggle();
+  }, S = (j) => {
+    j.isInternal && (p = j.isOpen, j.isOpen && j.close());
+  }, A = (j) => {
+    j.isInternal && p !== null && (p ? j.open() : j.close(), p = null);
+  }, [_, C] = useAtom$1(currentAddSelection), T = () => {
+    var j;
+    k(), o.parent.isSelected || C((j = o == null ? void 0 : o.parent) == null ? void 0 : j.id);
   }, k = () => {
     C(null);
-  }, v = (_) => {
-    k(), _.stopPropagation(), !o.isOpen && !i.includes(h) && o.toggle(), E(_);
+  }, v = (j) => {
+    k(), j.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), E(j);
   };
   useEffect(() => {
-    const _ = setTimeout(() => {
-      b && !o.isOpen && !y && !i.includes(h) && o.toggle();
+    const j = setTimeout(() => {
+      h && !o.isOpen && !y && !i.includes(f) && o.toggle();
     }, 500);
-    return () => clearTimeout(_);
-  }, [b, o, y]);
-  const I = useMemo(() => {
-    const _ = Object.keys(x), P = [];
-    for (let D = 0; D < _.length; D++)
-      if (_[D].endsWith("_attrs")) {
-        const L = x[_[D]], $ = Object.keys(L).join("|");
-        $.match(/x-data/) && P.push("data"), $.match(/x-on/) && P.push("event"), $.match(/x-show|x-if/) && P.push("show");
+    return () => clearTimeout(j);
+  }, [h, o, y]);
+  const N = useMemo(() => {
+    const j = Object.keys(b), R = [];
+    for (let D = 0; D < j.length; D++)
+      if (j[D].endsWith("_attrs")) {
+        const L = b[j[D]], $ = Object.keys(L).join("|");
+        $.match(/x-data/) && R.push("data"), $.match(/x-on/) && R.push("event"), $.match(/x-show|x-if/) && R.push("show");
       }
-    return P;
-  }, [x]), T = (_, P) => {
-    const D = d.contentDocument || d.contentWindow.document, L = D.querySelector(`[data-block-id=${_}]`);
-    L && L.setAttribute("data-drop", P);
+    return R;
+  }, [b]), I = (j, R) => {
+    const D = d.contentDocument || d.contentWindow.document, L = D.querySelector(`[data-block-id=${j}]`);
+    L && L.setAttribute("data-drop", R);
     const $ = L.getBoundingClientRect(), O = d.getBoundingClientRect();
     $.top >= O.top && $.left >= O.left && $.bottom <= O.bottom && $.right <= O.right || (D.documentElement.scrollTop = L.offsetTop - O.top);
-  }, R = (_) => {
+  }, M = (j) => {
     k();
-    const P = get(o, "parent.id");
-    P !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: P, position: _ }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: _ });
+    const R = get(o, "parent.id");
+    R !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: R, position: j }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: j });
   };
-  return h === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
+  return f === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx(
       "div",
       {
-        onClick: () => R(-1),
+        onClick: () => M(-1),
         className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
           /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
@@ -7341,34 +7516,34 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
       }
     ),
     /* @__PURE__ */ jsx("br", {})
-  ] }) : /* @__PURE__ */ jsx(BlockContextMenu, { id: h, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+  ] }) : /* @__PURE__ */ jsx(BlockContextMenu, { id: f, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => g(h),
+      onMouseEnter: () => g(f),
       onMouseLeave: () => m(),
       onClick: v,
       style: n,
-      "data-node-id": h,
-      ref: i.includes(h) ? null : r,
+      "data-node-id": f,
+      ref: i.includes(f) ? null : r,
       onDragStart: () => S(o),
       onDragEnd: () => A(o),
-      onDragOver: (_) => {
-        _.preventDefault(), T(h, "yes");
+      onDragOver: (j) => {
+        j.preventDefault(), I(f, "yes");
       },
-      onDragLeave: (_) => {
-        _.preventDefault(), T(h, "no");
+      onDragLeave: (j) => {
+        j.preventDefault(), I(f, "no");
       },
-      onDrop: (_) => {
-        _.preventDefault(), T(h, "no");
+      onDrop: (j) => {
+        j.preventDefault(), I(f, "no");
       },
       children: [
-        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((M = o == null ? void 0 : o.parent) == null ? void 0 : M.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.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(), R(o.childIndex);
+            onClick: (j) => {
+              j.stopPropagation(), M(o.childIndex);
             },
-            onMouseEnter: N,
+            onMouseEnter: T,
             onMouseLeave: k,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
@@ -7379,11 +7554,11 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
           {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
-              f ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              b && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === j ? "bg-purple-100" : "",
+              x ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
+              h && canAcceptChildBlock(b._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === _ ? "bg-purple-100" : "",
               y && "opacity-20",
-              i.includes(h) ? "opacity-50" : ""
+              i.includes(f) ? "opacity-50" : ""
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7394,47 +7569,47 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     children: u && /* @__PURE__ */ jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsx(
                       ChevronRight,
                       {
-                        className: `h-3 w-3 stroke-[3] ${f ? "text-slate-200" : "text-slate-400"}`
+                        className: `h-3 w-3 stroke-[3] ${x ? "text-slate-200" : "text-slate-400"}`
                       }
                     ) })
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsx(TypeIcon, { type: x == null ? void 0 : x._type }),
+                  /* @__PURE__ */ jsx(TypeIcon, { type: b == null ? void 0 : b._type }),
                   B ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
                     "div",
                     {
                       className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                      onDoubleClick: (_) => {
-                        _.stopPropagation(), o.edit(), o.deselect();
+                      onDoubleClick: (j) => {
+                        j.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
-                        /* @__PURE__ */ jsx("span", { children: (x == null ? void 0 : x._name) || (x == null ? void 0 : x._type.split("/").pop()) }),
-                        I.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
-                        I.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
-                        I.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
+                        /* @__PURE__ */ jsx("span", { children: (b == null ? void 0 : b._name) || (b == null ? void 0 : b._type.split("/").pop()) }),
+                        N.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
+                        N.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
+                        N.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
                       ]
                     }
                   )
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !i.includes(h) && a.map((_) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                !i.includes(f) && a.map((j) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
                       className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                       asChild: !0,
-                      children: React__default.createElement(_.item, { blockId: h })
+                      children: React__default.createElement(j.item, { blockId: f })
                     }
                   ),
-                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: _.tooltip })
+                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: j.tooltip })
                 ] })),
-                canAddChildBlock(x == null ? void 0 : x._type) && !i.includes(h) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(b == null ? void 0 : b._type) && !i.includes(f) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: h }),
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: f }),
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
                       children: /* @__PURE__ */ jsx(PlusIcon$1, { size: "15" })
@@ -7446,8 +7621,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (_) => {
-                        _.stopPropagation(), c(h), o.isOpen && o.toggle();
+                      onClick: (j) => {
+                        j.stopPropagation(), c(f), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -7644,7 +7819,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
     ) }),
     /* @__PURE__ */ jsx(PasteAtRootContextMenu, { parentContext, setParentContext })
   ] });
-}, Core = "Core", Import = "Import", Breakpoints$1 = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
+}, Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
   "Add block": "Add Block",
   "Add blocks": "Add blocks",
   "Enter or paste TailwindCSS HTML snippet": "Enter or paste TailwindCSS HTML snippet",
@@ -7678,7 +7853,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
   "Styles set here are applied at 1280px and up unless edited at higher breakpoint": "Styles set here are applied at 1280px and up unless edited at higher breakpoint",
   "Large Desktop (2XL)": "Large Desktop (2XL)",
   "Styles set here are applied at 1536px and up": "Styles set here are applied at 1536px and up",
-  Breakpoints: Breakpoints$1,
+  Breakpoints,
   Clear,
   "Clear whole canvas?": "Clear whole canvas?",
   "Are you sure you want to clear the whole canvas?": "Are you sure you want to clear the whole canvas?",
@@ -8107,14 +8282,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), m = useRef(null), h = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), m = useRef(null), f = useRef(null);
   useEffect(() => {
-    var f;
-    (f = m.current) == null || f.focus();
+    var x;
+    (x = m.current) == null || x.focus();
   }, []);
-  const x = (f) => {
-    const { usage: b } = f || {};
-    !l && b && g(b), h.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const b = (x) => {
+    const { usage: h } = x || {};
+    !l && h && g(h), f.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8134,12 +8309,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: m,
           value: i,
-          onChange: (f) => c(f.target.value),
+          onChange: (x) => c(x.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (f) => {
-            f.key === "Enter" && (f.preventDefault(), h.current && clearTimeout(h.current), g(void 0), r("content", o, i, x));
+          onKeyDown: (x) => {
+            x.key === "Enter" && (x.preventDefault(), f.current && clearTimeout(f.current), g(void 0), r("content", o, i, b));
           }
         }
       ),
@@ -8149,7 +8324,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              h.current && clearTimeout(h.current), g(void 0), r("content", o, i, x);
+              f.current && clearTimeout(f.current), g(void 0), r("content", o, i, b);
             },
             variant: "default",
             className: "w-fit",
@@ -8181,8 +8356,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         QuickPrompts,
         {
-          onClick: (f) => {
-            h.current && clearTimeout(h.current), g(void 0), r("content", o, f, x);
+          onClick: (x) => {
+            f.current && clearTimeout(f.current), g(void 0), r("content", o, x, b);
           }
         }
       )
@@ -8192,19 +8367,19 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), { toast: m } = useToast(), h = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), { toast: m } = useToast(), f = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
-  const x = async () => {
+  const b = async () => {
     try {
       d(!0), u(null), await i(r), m({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
-      }), h.current.click();
-    } catch (f) {
-      u(f);
+      }), f.current.click();
+    } catch (x) {
+      u(x);
     } finally {
       d(!1);
     }
@@ -8212,25 +8387,25 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsx(
     Accordion,
     {
-      onValueChange: (f) => {
-        g(f !== "");
+      onValueChange: (x) => {
+        g(x !== "");
       },
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { ref: h, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsx(AccordionTrigger, { ref: f, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsx(
             Textarea,
             {
               ref: l,
               value: r,
-              onChange: (f) => a(f.target.value),
+              onChange: (x) => a(x.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (f) => {
-                f.key === "Enter" && (f.preventDefault(), x());
+              onKeyDown: (x) => {
+                x.key === "Enter" && (x.preventDefault(), b());
               }
             }
           ),
@@ -8242,7 +8417,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: r.trim().length < 5,
-                onClick: () => x(),
+                onClick: () => b(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8271,7 +8446,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), x();
+                        a(""), b();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8291,114 +8466,6 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsx(AISetContext, {}),
     /* @__PURE__ */ jsx(AIUserPrompt, { blockId: first(o) })
   ] });
-}, TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: o ? "rotate-90" : "",
-    stroke: "currentColor",
-    fill: "currentColor",
-    strokeWidth: "0",
-    viewBox: "0 0 448 512",
-    height: "14px",
-    width: "14px",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx("path", { d: "M400 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM224 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm176-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h328c6.6 0 12 5.4 12 12v312z" })
-  }
-), WEB_BREAKPOINTS = [
-  {
-    title: "Mobile (XS)",
-    content: "Styles set here are applied to all screen unless edited at higher breakpoint",
-    breakpoint: "xs",
-    icon: /* @__PURE__ */ jsx(MobileIcon, {}),
-    width: 400
-  },
-  {
-    title: "Mobile landscape (SM)",
-    content: "Styles set here are applied at 640px and up unless edited at higher breakpoint",
-    breakpoint: "sm",
-    icon: /* @__PURE__ */ jsx(MobileIcon, { className: "rotate-90" }),
-    width: 640
-  },
-  {
-    title: "Tablet (MD)",
-    content: "Styles set here are applied at 768px and up",
-    breakpoint: "md",
-    icon: /* @__PURE__ */ jsx(TabletIcon, {}),
-    width: 800
-  },
-  {
-    title: "Tablet Landscape (LG)",
-    content: "Styles set here are applied at 1024px and up unless edited at higher breakpoint",
-    breakpoint: "lg",
-    icon: /* @__PURE__ */ jsx(TabletIcon, { landscape: !0 }),
-    width: 1024
-  },
-  {
-    title: "Desktop (XL)",
-    content: "Styles set here are applied at 1280px and up unless edited at higher breakpoint",
-    breakpoint: "xl",
-    icon: /* @__PURE__ */ jsx(LaptopIcon, {}),
-    width: 1420
-  },
-  {
-    title: "Large Desktop (2XL)",
-    content: "Styles set here are applied at 1536px and up",
-    breakpoint: "2xl",
-    icon: /* @__PURE__ */ jsx(DesktopIcon, {}),
-    width: 1920
-  }
-], BreakpointCard = ({
-  title: o,
-  content: n,
-  currentBreakpoint: r,
-  breakpoint: a,
-  width: l,
-  icon: i,
-  onClick: c
-}) => {
-  const { t: d } = useTranslation();
-  return /* @__PURE__ */ jsxs(HoverCard, { children: [
-    /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: () => c(l),
-        size: "sm",
-        variant: a === r ? "secondary" : "ghost",
-        children: i
-      }
-    ) }),
-    /* @__PURE__ */ jsx(HoverCardContent, { className: "w-52 border-border", children: /* @__PURE__ */ jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: d(o) }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs", children: d(n) })
-    ] }) }) })
-  ] });
-}, Breakpoints = () => {
-  const [, o, n] = useCanvasWidth(), [r, a] = useSelectedBreakpoints(), { t: l } = useTranslation(), i = useBuilderProp("breakpoints", WEB_BREAKPOINTS), c = (d) => {
-    r.includes(d) ? r.length > 2 && a(r.filter((p) => p !== d)) : a((p) => [...p, d]);
-  };
-  return i.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(i, (d) => /* @__PURE__ */ createElement(BreakpointCard, { ...d, onClick: n, key: d.breakpoint, currentBreakpoint: o })) }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md", children: [
-    map(
-      i.filter((d) => includes(r, toUpper(d.breakpoint))),
-      (d) => /* @__PURE__ */ createElement(BreakpointCard, { ...d, onClick: n, key: d.breakpoint, currentBreakpoint: o })
-    ),
-    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
-      /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: l("Breakpoints") }),
-        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(i, (d) => /* @__PURE__ */ jsx(
-          DropdownMenuCheckboxItem,
-          {
-            disabled: d.breakpoint === "xs",
-            onCheckedChange: () => c(toUpper(d.breakpoint)),
-            checked: includes(r, toUpper(d.breakpoint)),
-            children: l(d.title)
-          },
-          d.breakpoint
-        ))
-      ] })
-    ] })
-  ] });
 };
 function DarkMode() {
   const [o, n] = useDarkMode();
@@ -8509,7 +8576,7 @@ const AiAssistant = () => {
   const o = useBuilderProp("darkMode", !0), [n] = useCanvasZoom();
   return /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center justify-between border-b border-border bg-background/70 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full space-x-2", children: [
-      /* @__PURE__ */ jsx(Breakpoints, {}),
+      /* @__PURE__ */ jsx(Breakpoints$1, { canvas: !0, openDelay: 400 }),
       /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
       o ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(DarkMode, {}),
@@ -8533,32 +8600,32 @@ const AiAssistant = () => {
     ] })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), x = useRef(null), f = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), b = useRef(null), x = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
-  const b = () => {
+  const h = () => {
     if (i.startsWith("@")) {
-      h("Attribute keys cannot start with '@'");
+      f("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
       const S = [...a, { key: i, value: d }];
-      r(S), l(a), c(""), p(""), h("");
+      r(S), l(a), c(""), p(""), f("");
     }
   }, y = (S) => {
-    const A = a.filter((j, C) => C !== S);
+    const A = a.filter((_, C) => C !== S);
     r(A), l(A);
   }, B = (S) => {
     g(S), c(a[S].key), p(a[S].value);
   }, E = () => {
     if (i.startsWith("@")) {
-      h("Attribute keys cannot start with '@'");
+      f("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
       const S = [...a];
-      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), h("");
+      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), f("");
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
@@ -8566,7 +8633,7 @@ const AiAssistant = () => {
       "form",
       {
         onSubmit: (S) => {
-          S.preventDefault(), u !== null ? E() : b();
+          S.preventDefault(), u !== null ? E() : h();
         },
         className: "space-y-3",
         children: [
@@ -8580,7 +8647,7 @@ const AiAssistant = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: x,
+                  ref: b,
                   value: i,
                   onChange: (S) => c(S.target.value),
                   placeholder: "Enter Key",
@@ -8598,11 +8665,11 @@ const AiAssistant = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: f,
+                  ref: x,
                   value: d,
                   onChange: (S) => p(S.target.value),
                   onKeyDown: (S) => {
-                    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? E() : b());
+                    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? E() : h());
                   },
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -8818,12 +8885,12 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n(1);
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (f) => {
-    f.preventDefault();
-  }, u = (f) => {
-    n(o === f ? null : f);
-  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), h = [...g, ...c], x = useBuilderProp("htmlDir", "ltr");
-  return /* @__PURE__ */ jsx("div", { dir: x, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (x) => {
+    x.preventDefault();
+  }, u = (x) => {
+    n(o === x ? null : x);
+  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), f = [...g, ...c], b = useBuilderProp("htmlDir", "ltr");
+  return /* @__PURE__ */ jsx("div", { dir: b, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8833,21 +8900,21 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: h.map((f, b) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f.map((x, h) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
-                    variant: o === b ? "default" : "ghost",
+                    variant: o === h ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => u(b),
-                    children: get(f, "icon", null)
+                    onClick: () => u(h),
+                    children: get(x, "icon", null)
                   },
-                  b
+                  h
                 ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(f.label) }) })
-              ] }, "button" + b)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(x.label) }) })
+              ] }, "button" + h)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((f, b) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(f, {}) }, `sidebar-component-${b}`)) })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((x, h) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(x, {}) }, `sidebar-component-${h}`)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -8860,14 +8927,14 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(h, `${o}.isInternal`, !1) ? "" : "w-64"}`,
+                      className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(f, `${o}.isInternal`, !1) ? "" : "w-64"}`,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(h, `${o}.icon`, null) }),
-                        /* @__PURE__ */ jsx("span", { children: m(h[o].label) })
+                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(f, `${o}.icon`, null) }),
+                        /* @__PURE__ */ jsx("span", { children: m(f[o].label) })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(h, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(f, `${o}.component`, null), {}) }) })
                 ] })
               }
             ),
@@ -9005,7 +9072,7 @@ export {
   DefaultChaiBlocks,
   ImportHTML,
   ListTree as Outline,
-  Breakpoints as ScreenSizes,
+  Breakpoints$1 as ScreenSizes,
   ThemeConfigPanel as ThemeOptions,
   UILibrariesPanel as UILibraries,
   UndoRedo,
@@ -9024,7 +9091,7 @@ export {
   useBrandingOptions,
   useBuilderProp,
   useBuilderReset,
-  useCanvasWidth,
+  useCanvasDisplayWidth,
   useCanvasZoom,
   useCodeEditor,
   useCopyBlockIds,
@@ -9045,6 +9112,7 @@ export {
   useRemoveClassesFromBlocks,
   useRightPanel,
   useSavePage,
+  useScreenSizeWidth,
   useSelectedBlock,
   useSelectedBlockAllClasses,
   useSelectedBlockCurrentClasses,