@chaibuilder/sdk 1.2.109 → 1.2.110-beta.1

package/dist/{index-OhF0-tfj.js → index-qV5P0VmO.js}

@@ -1,10 +1,10 @@
 var z = Object.defineProperty;
 var W = (o, n, r) => n in o ? z(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var U = (o, n, r) => (W(o, typeof n != "symbol" ? n + "" : n, r), r);
+var F = (o, n, r) => (W(o, typeof n != "symbol" ? n + "" : n, r), r);
 import { j as jsxRuntimeExports } from "./jsx-runtime-Sp0orL4X.js";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useState, useMemo, Component, Children, Suspense, useRef, memo, createElement, lazy } from "react";
-import { a as Skeleton, B as Button, aA as ContextMenu, aB as ContextMenuTrigger, aC as ContextMenuContent, aD as ContextMenuItem, P as Tooltip, Q as TooltipTrigger, R as TooltipContent, C as Card, z as CardHeader, G as CardDescription, H as CardContent, L as Label, T as Textarea, E as CardFooter, D as Dialog, t as DialogTrigger, u as DialogContent, v as DialogHeader, x as DialogTitle, y as DialogDescription, w as DialogFooter, W as Popover, X as PopoverTrigger, Y as PopoverContent, ar as Command, at as CommandInput, au as CommandList, av as CommandEmpty, aw as CommandGroup, ax as CommandItem, K as Tabs, M as TabsList, N as TabsTrigger, O as TabsContent, d as Switch, A as Accordion, f as AccordionItem, g as AccordionTrigger, h as AccordionContent, ao as useToast, I as Input$1, V as TooltipPortal, a8 as DropdownMenu, a9 as DropdownMenuTrigger, aa as DropdownMenuContent, S as ScrollArea, ae as DropdownMenuLabel, af as DropdownMenuSeparator, ah as DropdownMenuGroup, ab as DropdownMenuItem, ag as DropdownMenuShortcut, k as AlertDialog, m as AlertDialogContent, n as AlertDialogHeader, p as AlertDialogTitle, l as AlertDialogTrigger, q as AlertDialogDescription, o as AlertDialogFooter, s as AlertDialogCancel, r as AlertDialogAction, ac as DropdownMenuCheckboxItem, Z as HoverCard, _ as HoverCardTrigger, $ as HoverCardContent, b as Separator, i as Badge, a0 as Select, a3 as SelectTrigger, a2 as SelectValue, a4 as SelectContent, a6 as SelectItem, U as TooltipProvider, aq as Toaster } from "./context-menu-YGd09SE1.js";
+import { aq as Skeleton, B as Button, aA as ContextMenu, aB as ContextMenuTrigger, aC as ContextMenuContent, aD as ContextMenuItem, N as Tooltip, O as TooltipTrigger, P as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, L as Label, T as Textarea, y as CardFooter, D as Dialog, r as DialogTrigger, s as DialogContent, t as DialogHeader, v as DialogTitle, w as DialogDescription, u as DialogFooter, U as Popover, V as PopoverTrigger, W as PopoverContent, ar as Command, at as CommandInput, au as CommandList, av as CommandEmpty, aw as CommandGroup, ax as CommandItem, H as Tabs, J as TabsList, K as TabsTrigger, M as TabsContent, a as Switch, A as Accordion, d as AccordionItem, e as AccordionTrigger, f as AccordionContent, an as useToast, I as Input$1, R as TooltipPortal, a6 as DropdownMenu, a7 as DropdownMenuTrigger, a8 as DropdownMenuContent, S as ScrollArea, ac as DropdownMenuLabel, ad as DropdownMenuSeparator, af as DropdownMenuGroup, a9 as DropdownMenuItem, ae as DropdownMenuShortcut, i as AlertDialog, k as AlertDialogContent, l as AlertDialogHeader, n as AlertDialogTitle, j as AlertDialogTrigger, o as AlertDialogDescription, m as AlertDialogFooter, q as AlertDialogCancel, p as AlertDialogAction, aa as DropdownMenuCheckboxItem, X as HoverCard, Y as HoverCardTrigger, Z as HoverCardContent, al as Separator, g as Badge, _ as Select$1, a1 as SelectTrigger, a0 as SelectValue, a2 as SelectContent, a4 as SelectItem, Q as TooltipProvider, ap as Toaster } from "./context-menu-FPX89OKr.js";
 import { has, find, filter, flatten, map, omit, isString as isString$1, includes, without, get, compact, set, endsWith, isEmpty, forIn, isObject as isObject$1, each, first, noop, merge, keys, startsWith, range, values, flattenDeep, isNull, pick, sortBy, memoize, forEach, unset, chunk, throttle, cloneDeep, reverse, debounce, flatMapDeep, capitalize, last, startCase, truncate, isArray as isArray$1, split, toLower, reject, nth, isNumber as isNumber$1, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, toUpper, round } from "lodash-es";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-Ief2hJUZ.js";
@@ -19,9 +19,9 @@ import { useFeature, FlagsProvider } from "flagged";
 import { useHotkeys } from "react-hotkeys-hook";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { ArrowUpIcon, PlusIcon, CopyIcon, GearIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, DropdownMenuIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, RowsIcon, TextIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, TriangleRightIcon, EyeOpenIcon, Cross2Icon, 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, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ChevronDownIcon, ZoomInIcon, MixerHorizontalIcon, KeyboardIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { ArrowUpIcon, PlusIcon, CopyIcon, GearIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, DropdownMenuIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, RowsIcon, TextIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, TriangleRightIcon, EyeOpenIcon, Cross2Icon, 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, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, KeyboardIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { createEvent } from "react-event-hook";
-import typography$1 from "@tailwindcss/typography";
+import typography from "@tailwindcss/typography";
 import forms from "@tailwindcss/forms";
 import aspectRatio from "@tailwindcss/aspect-ratio";
 import { twMerge } from "tailwind-merge";
@@ -32,7 +32,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { Resizable } from "re-resizable";
 import { DatabaseIcon, GlobeIcon, ChevronRight, PlusIcon as PlusIcon$1, EyeOff, EditIcon, TrashIcon as TrashIcon$1, Check, Loader, SparklesIcon, SmileIcon, ShuffleIcon, ChevronDown, Edit2, X, LayoutTemplate, Layers, PaintBucketIcon } from "lucide-react";
 import validator from "@rjsf/validator-ajv8";
-import Form from "@rjsf/core";
+import Form$1 from "@rjsf/core";
 import { y, s as s$1, h } from "./controls-lEwMTdPQ.js";
 import { Tree } from "react-arborist";
 import { parse, stringify } from "himalaya";
@@ -91,235 +91,235 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set());
   const c = (f) => o.get(f), d = (f, v) => {
     (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(v);
-    const C = o.get(f);
-    if (o.set(f, v), r.has(f) || r.set(f, C), C && hasPromiseAtomValue(C)) {
-      const w = "v" in v ? v.v instanceof Promise ? v.v : Promise.resolve(v.v) : Promise.reject(v.e);
-      cancelPromise(C.v, w);
+    const w = o.get(f);
+    if (o.set(f, v), r.has(f) || r.set(f, w), w && hasPromiseAtomValue(w)) {
+      const A = "v" in v ? v.v instanceof Promise ? v.v : Promise.resolve(v.v) : Promise.reject(v.e);
+      cancelPromise(w.v, A);
     }
-  }, u = (f, v, C) => {
-    const w = /* @__PURE__ */ new Map();
+  }, u = (f, v, w) => {
+    const A = /* @__PURE__ */ new Map();
     let I = !1;
-    C.forEach((N, D) => {
-      !N && D === f && (N = v), N ? (w.set(D, N), v.d.get(D) !== N && (I = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (I || v.d.size !== w.size) && (v.d = w);
-  }, p = (f, v, C) => {
-    const w = c(f), I = {
-      d: (w == null ? void 0 : w.d) || /* @__PURE__ */ new Map(),
+    w.forEach((T, D) => {
+      !T && D === f && (T = v), T ? (A.set(D, T), v.d.get(D) !== T && (I = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (I || v.d.size !== A.size) && (v.d = A);
+  }, p = (f, v, w) => {
+    const A = c(f), I = {
+      d: (A == null ? void 0 : A.d) || /* @__PURE__ */ new Map(),
       v
     };
-    if (C && u(f, I, C), w && isEqualAtomValue(w, I) && w.d === I.d)
-      return w;
-    if (w && hasPromiseAtomValue(w) && hasPromiseAtomValue(I) && isEqualPromiseAtomValue(w, I)) {
-      if (w.d === I.d)
-        return w;
-      I.v = w.v;
+    if (w && u(f, I, w), A && isEqualAtomValue(A, I) && A.d === I.d)
+      return A;
+    if (A && hasPromiseAtomValue(A) && hasPromiseAtomValue(I) && isEqualPromiseAtomValue(A, I)) {
+      if (A.d === I.d)
+        return A;
+      I.v = A.v;
     }
     return d(f, I), I;
-  }, m = (f, v, C, w) => {
+  }, m = (f, v, w, A) => {
     if (isPromiseLike$2(v)) {
       let I;
-      const N = new Promise((D, V) => {
+      const T = new Promise((D, O) => {
         let M = !1;
         v.then(
-          (O) => {
+          (V) => {
             if (!M) {
               M = !0;
               const $ = c(f), H = p(
                 f,
-                N,
-                C
+                T,
+                w
               );
-              resolvePromise(N, O), D(O), ($ == null ? void 0 : $.d) !== H.d && T(f, H, $ == null ? void 0 : $.d);
+              resolvePromise(T, V), D(V), ($ == null ? void 0 : $.d) !== H.d && N(f, H, $ == null ? void 0 : $.d);
             }
           },
-          (O) => {
+          (V) => {
             if (!M) {
               M = !0;
               const $ = c(f), H = p(
                 f,
-                N,
-                C
+                T,
+                w
               );
-              rejectPromise(N, O), V(O), ($ == null ? void 0 : $.d) !== H.d && T(f, H, $ == null ? void 0 : $.d);
+              rejectPromise(T, V), O(V), ($ == null ? void 0 : $.d) !== H.d && N(f, H, $ == null ? void 0 : $.d);
             }
           }
-        ), I = (O) => {
-          M || (M = !0, O.then(
-            ($) => resolvePromise(N, $),
-            ($) => rejectPromise(N, $)
-          ), D(O));
+        ), I = (V) => {
+          M || (M = !0, V.then(
+            ($) => resolvePromise(T, $),
+            ($) => rejectPromise(T, $)
+          ), D(V));
         };
       });
-      return N.orig = v, N.status = "pending", registerCancelPromise(N, (D) => {
-        D && I(D), w == null || w();
-      }), p(f, N, C);
+      return T.orig = v, T.status = "pending", registerCancelPromise(T, (D) => {
+        D && I(D), A == null || A();
+      }), p(f, T, w);
     }
-    return p(f, v, C);
-  }, g = (f, v, C) => {
-    const w = c(f), I = {
-      d: (w == null ? void 0 : w.d) || /* @__PURE__ */ new Map(),
+    return p(f, v, w);
+  }, g = (f, v, w) => {
+    const A = c(f), I = {
+      d: (A == null ? void 0 : A.d) || /* @__PURE__ */ new Map(),
       e: v
     };
-    return C && u(f, I, C), w && isEqualAtomError(w, I) && w.d === I.d ? w : (d(f, I), I);
+    return w && u(f, I, w), A && isEqualAtomError(A, I) && A.d === I.d ? A : (d(f, I), I);
   }, x = (f) => {
     const v = c(f);
-    if (v && (v.d.forEach((M, O) => {
-      O !== f && !n.has(O) && x(O);
-    }), Array.from(v.d).every(([M, O]) => {
+    if (v && (v.d.forEach((M, V) => {
+      V !== f && !n.has(V) && x(V);
+    }), Array.from(v.d).every(([M, V]) => {
       const $ = c(M);
-      return M === f || $ === O || // TODO This is a hack, we should find a better solution.
-      $ && !hasPromiseAtomValue($) && isEqualAtomValue($, O);
+      return M === f || $ === V || // TODO This is a hack, we should find a better solution.
+      $ && !hasPromiseAtomValue($) && isEqualAtomValue($, V);
     })))
       return v;
-    const C = /* @__PURE__ */ new Map();
-    let w = !0;
+    const w = /* @__PURE__ */ new Map();
+    let A = !0;
     const I = (M) => {
       if (M === f) {
         const $ = c(M);
         if ($)
-          return C.set(M, $), returnAtomValue($);
+          return w.set(M, $), returnAtomValue($);
         if (hasInitialValue(M))
-          return C.set(M, void 0), M.init;
+          return w.set(M, void 0), M.init;
         throw new Error("no atom init");
       }
-      const O = x(M);
-      return C.set(M, O), returnAtomValue(O);
+      const V = x(M);
+      return w.set(M, V), returnAtomValue(V);
     };
-    let N, D;
-    const V = {
+    let T, D;
+    const O = {
       get signal() {
-        return N || (N = new AbortController()), N.signal;
+        return T || (T = new AbortController()), T.signal;
       },
       get setSelf() {
         return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(f) && console.warn("setSelf function cannot be used with read-only atom"), !D && isActuallyWritableAtom(f) && (D = (...M) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && w && console.warn("setSelf function cannot be called in sync"), !w)
-            return B(f, ...M);
+          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && A && console.warn("setSelf function cannot be called in sync"), !A)
+            return _(f, ...M);
         }), D;
       }
     };
     try {
-      const M = f.read(I, V);
+      const M = f.read(I, O);
       return m(
         f,
         M,
-        C,
-        () => N == null ? void 0 : N.abort()
+        w,
+        () => T == null ? void 0 : T.abort()
       );
     } catch (M) {
-      return g(f, M, C);
+      return g(f, M, w);
     } finally {
-      w = !1;
+      A = !1;
     }
   }, j = (f) => returnAtomValue(x(f)), E = (f) => {
     let v = n.get(f);
-    return v || (v = R(f)), v;
+    return v || (v = C(f)), v;
   }, b = (f, v) => !v.l.size && (!v.t.size || v.t.size === 1 && v.t.has(f)), k = (f) => {
     const v = n.get(f);
-    v && b(f, v) && A(f);
-  }, _ = (f) => {
-    const v = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new WeakMap(), w = (N) => {
-      const D = n.get(N);
-      D == null || D.t.forEach((V) => {
-        V !== N && (v.set(
-          V,
-          (v.get(V) || /* @__PURE__ */ new Set()).add(N)
-        ), C.set(V, (C.get(V) || 0) + 1), w(V));
+    v && b(f, v) && B(f);
+  }, S = (f) => {
+    const v = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new WeakMap(), A = (T) => {
+      const D = n.get(T);
+      D == null || D.t.forEach((O) => {
+        O !== T && (v.set(
+          O,
+          (v.get(O) || /* @__PURE__ */ new Set()).add(T)
+        ), w.set(O, (w.get(O) || 0) + 1), A(O));
       });
     };
-    w(f);
-    const I = (N) => {
-      const D = n.get(N);
-      D == null || D.t.forEach((V) => {
+    A(f);
+    const I = (T) => {
+      const D = n.get(T);
+      D == null || D.t.forEach((O) => {
         var M;
-        if (V !== N) {
-          let O = C.get(V);
-          if (O && C.set(V, --O), !O) {
-            let $ = !!((M = v.get(V)) != null && M.size);
+        if (O !== T) {
+          let V = w.get(O);
+          if (V && w.set(O, --V), !V) {
+            let $ = !!((M = v.get(O)) != null && M.size);
             if ($) {
-              const H = c(V), F = x(V);
-              $ = !H || !isEqualAtomValue(H, F);
+              const H = c(O), U = x(O);
+              $ = !H || !isEqualAtomValue(H, U);
             }
-            $ || v.forEach((H) => H.delete(V));
+            $ || v.forEach((H) => H.delete(O));
           }
-          I(V);
+          I(O);
         }
       });
     };
     I(f);
-  }, S = (f, ...v) => {
-    let C = !0;
-    const w = (D) => returnAtomValue(x(D)), I = (D, ...V) => {
+  }, R = (f, ...v) => {
+    let w = !0;
+    const A = (D) => returnAtomValue(x(D)), I = (D, ...O) => {
       let M;
       if (D === f) {
         if (!hasInitialValue(D))
           throw new Error("atom not writable");
-        const O = c(D), $ = m(D, V[0]);
-        (!O || !isEqualAtomValue(O, $)) && _(D);
+        const V = c(D), $ = m(D, O[0]);
+        (!V || !isEqualAtomValue(V, $)) && S(D);
       } else
-        M = S(D, ...V);
-      if (!C) {
-        const O = L();
+        M = R(D, ...O);
+      if (!w) {
+        const V = L();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-          ($) => $({ type: "async-write", flushed: O })
+          ($) => $({ type: "async-write", flushed: V })
         );
       }
       return M;
-    }, N = f.write(w, I, ...v);
-    return C = !1, N;
-  }, B = (f, ...v) => {
-    const C = S(f, ...v), w = L();
+    }, T = f.write(A, I, ...v);
+    return w = !1, T;
+  }, _ = (f, ...v) => {
+    const w = R(f, ...v), A = L();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (I) => I({ type: "write", flushed: w })
-    ), C;
-  }, R = (f, v) => {
-    const C = {
+      (I) => I({ type: "write", flushed: A })
+    ), w;
+  }, C = (f, v) => {
+    const w = {
       t: new Set(v && [v]),
       l: /* @__PURE__ */ new Set()
     };
-    if (n.set(f, C), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(f), x(f).d.forEach((w, I) => {
-      const N = n.get(I);
-      N ? N.t.add(f) : I !== f && R(I, f);
+    if (n.set(f, w), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(f), x(f).d.forEach((A, I) => {
+      const T = n.get(I);
+      T ? T.t.add(f) : I !== f && C(I, f);
     }), x(f), isActuallyWritableAtom(f) && f.onMount) {
-      const w = f.onMount((...I) => B(f, ...I));
-      w && (C.u = w);
+      const A = f.onMount((...I) => _(f, ...I));
+      A && (w.u = A);
     }
-    return C;
-  }, A = (f) => {
+    return w;
+  }, B = (f) => {
     var v;
-    const C = (v = n.get(f)) == null ? void 0 : v.u;
-    C && C(), n.delete(f), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(f);
-    const w = c(f);
-    w ? (hasPromiseAtomValue(w) && cancelPromise(w.v), w.d.forEach((I, N) => {
-      if (N !== f) {
-        const D = n.get(N);
-        D && (D.t.delete(f), b(N, D) && A(N));
+    const w = (v = n.get(f)) == null ? void 0 : v.u;
+    w && w(), n.delete(f), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(f);
+    const A = c(f);
+    A ? (hasPromiseAtomValue(A) && cancelPromise(A.v), A.d.forEach((I, T) => {
+      if (T !== f) {
+        const D = n.get(T);
+        D && (D.t.delete(f), b(T, D) && B(T));
       }
     })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", f);
-  }, T = (f, v, C) => {
-    const w = new Set(v.d.keys());
-    C == null || C.forEach((I, N) => {
-      if (w.has(N)) {
-        w.delete(N);
+  }, N = (f, v, w) => {
+    const A = new Set(v.d.keys());
+    w == null || w.forEach((I, T) => {
+      if (A.has(T)) {
+        A.delete(T);
         return;
       }
-      const D = n.get(N);
-      D && (D.t.delete(f), b(N, D) && A(N));
-    }), w.forEach((I) => {
-      const N = n.get(I);
-      N ? N.t.add(f) : n.has(f) && R(I, f);
+      const D = n.get(T);
+      D && (D.t.delete(f), b(T, D) && B(T));
+    }), A.forEach((I) => {
+      const T = n.get(I);
+      T ? T.t.add(f) : n.has(f) && C(I, f);
     });
   }, L = () => {
     let f;
     for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (f = /* @__PURE__ */ new Set()); r.size; ) {
       const v = Array.from(r);
-      r.clear(), v.forEach(([C, w]) => {
-        const I = c(C);
+      r.clear(), v.forEach(([w, A]) => {
+        const I = c(w);
         if (I) {
-          I.d !== (w == null ? void 0 : w.d) && T(C, I, w == null ? void 0 : w.d);
-          const N = n.get(C);
-          N && !// TODO This seems pretty hacky. Hope to fix it.
+          I.d !== (A == null ? void 0 : A.d) && N(w, I, A == null ? void 0 : A.d);
+          const T = n.get(w);
+          T && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (w && !hasPromiseAtomValue(w) && (isEqualAtomValue(w, I) || isEqualAtomError(w, I))) && (N.l.forEach((D) => D()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && f.add(C));
+          (A && !hasPromiseAtomValue(A) && (isEqualAtomValue(A, I) || isEqualAtomError(A, I))) && (T.l.forEach((D) => D()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && f.add(w));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
@@ -327,16 +327,16 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
       return a.forEach((v) => v("state")), f;
   }, P = (f, v) => {
-    const C = E(f), w = L(), I = C.l;
-    return I.add(v), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((N) => N("sub")), l.forEach(
-      (N) => N({ type: "sub", flushed: w })
+    const w = E(f), A = L(), I = w.l;
+    return I.add(v), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("sub")), l.forEach(
+      (T) => T({ type: "sub", flushed: A })
     )), () => {
-      I.delete(v), k(f), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((N) => N("unsub")), l.forEach((N) => N({ type: "unsub" })));
+      I.delete(v), k(f), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("unsub")), l.forEach((T) => T({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
     get: j,
-    set: B,
+    set: _,
     sub: P,
     // store dev methods (these are tentative and subject to change without notice)
     dev_subscribe_store: (f, v) => v !== 2 ? (console.warn(
@@ -350,16 +350,16 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     dev_get_atom_state: (f) => o.get(f),
     dev_get_mounted: (f) => n.get(f),
     dev_restore_atoms: (f) => {
-      for (const [C, w] of f)
-        hasInitialValue(C) && (m(C, w), _(C));
+      for (const [w, A] of f)
+        hasInitialValue(w) && (m(w, A), S(w));
       const v = L();
       l.forEach(
-        (C) => C({ type: "restore", flushed: v })
+        (w) => w({ type: "restore", flushed: v })
       );
     }
   } : {
     get: j,
-    set: B,
+    set: _,
     sub: P
   };
 };
@@ -386,27 +386,27 @@ function splitAtom(o, n) {
             m[j] = b;
             return;
           }
-          const k = (S) => {
-            const B = S(l), R = S(o), T = a(R, B == null ? void 0 : B.arr).keyList.indexOf(E);
-            if (T < 0 || T >= R.length) {
+          const k = (R) => {
+            const _ = R(l), C = R(o), N = a(C, _ == null ? void 0 : _.arr).keyList.indexOf(E);
+            if (N < 0 || N >= C.length) {
               const L = c[a(c).keyList.indexOf(E)];
               if (L)
                 return L;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return R[T];
-          }, _ = (S, B, R) => {
-            const A = S(l), T = S(o), P = a(T, A == null ? void 0 : A.arr).keyList.indexOf(E);
-            if (P < 0 || P >= T.length)
+            return C[N];
+          }, S = (R, _, C) => {
+            const B = R(l), N = R(o), P = a(N, B == null ? void 0 : B.arr).keyList.indexOf(E);
+            if (P < 0 || P >= N.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const f = isFunction(R) ? R(T[P]) : R;
-            B(o, [
-              ...T.slice(0, P),
+            const f = isFunction(C) ? C(N[P]) : C;
+            _(o, [
+              ...N.slice(0, P),
               f,
-              ...T.slice(P + 1)
+              ...N.slice(P + 1)
             ]);
           };
-          m[j] = isWritable(o) ? atom(k, _) : atom(k);
+          m[j] = isWritable(o) ? atom(k, S) : atom(k);
         }), p && p.keyList.length === g.length && p.keyList.every((x, j) => x === g[j]) ? u = p : u = { arr: c, atomList: m, keyList: g }, r.set(c, u), u;
       }, l = atom((c) => {
         const d = c(l), u = c(o);
@@ -1196,13 +1196,13 @@ const useBlocksStoreManager = () => {
   } = useBlocksStoreManager();
   return {
     moveBlocks: (E, b, k) => {
-      const _ = map(E, (B) => {
-        const A = n.find((P) => P._id === B)._parent || null, L = n.filter((P) => A ? P._parent === A : !P._parent).map((P) => P._id).indexOf(B);
-        return { _id: B, oldParent: A, oldPosition: L };
-      }), S = _.find(({ _id: B }) => B === E[0]);
-      S && S.oldParent === b && S.oldPosition === k || (i(E, b, k), o({
-        undo: () => each(_, ({ _id: B, oldParent: R, oldPosition: A }) => {
-          i([B], R, A);
+      const S = map(E, (_) => {
+        const B = n.find((P) => P._id === _)._parent || null, L = n.filter((P) => B ? P._parent === B : !P._parent).map((P) => P._id).indexOf(_);
+        return { _id: _, oldParent: B, oldPosition: L };
+      }), R = S.find(({ _id: _ }) => _ === E[0]);
+      R && R.oldParent === b && R.oldPosition === k || (i(E, b, k), o({
+        undo: () => each(S, ({ _id: _, oldParent: C, oldPosition: B }) => {
+          i([_], C, B);
         }),
         redo: () => i(E, b, k)
       }));
@@ -1214,27 +1214,27 @@ const useBlocksStoreManager = () => {
       });
     },
     removeBlocks: (E) => {
-      var S;
-      const b = (S = first(E)) == null ? void 0 : S._parent, _ = n.filter((B) => b ? B._parent === b : !B._parent).indexOf(first(E));
+      var R;
+      const b = (R = first(E)) == null ? void 0 : R._parent, S = n.filter((_) => b ? _._parent === b : !_._parent).indexOf(first(E));
       l(map(E, "_id")), o({
-        undo: () => a(E, b, _),
+        undo: () => a(E, b, S),
         redo: () => l(map(E, "_id"))
       });
     },
     updateBlocks: (E, b, k) => {
-      let _ = [];
+      let S = [];
       if (k)
-        _ = map(E, (S) => ({ _id: S, ...k }));
+        S = map(E, (R) => ({ _id: R, ...k }));
       else {
-        const S = keys(b);
-        _ = map(E, (B) => {
-          const R = n.find((T) => T._id === B), A = { _id: B };
-          return each(S, (T) => A[T] = R[T]), A;
+        const R = keys(b);
+        S = map(E, (_) => {
+          const C = n.find((N) => N._id === _), B = { _id: _ };
+          return each(R, (N) => B[N] = C[N]), B;
         });
       }
-      c(map(E, (S) => ({ _id: S, ...b }))), o({
-        undo: () => c(_),
-        redo: () => c(map(E, (S) => ({ _id: S, ...b })))
+      c(map(E, (R) => ({ _id: R, ...b }))), o({
+        undo: () => c(S),
+        redo: () => c(map(E, (R) => ({ _id: R, ...b })))
       });
     },
     updateBlocksRuntime: (E, b) => {
@@ -1249,8 +1249,8 @@ const useBlocksStoreManager = () => {
     updateMultipleBlocksProps: (E) => {
       let b = [];
       b = map(E, (k) => {
-        const _ = keys(k), S = n.find((R) => R._id === k._id), B = {};
-        return each(_, (R) => B[R] = S[R]), B;
+        const S = keys(k), R = n.find((C) => C._id === k._id), _ = {};
+        return each(S, (C) => _[C] = R[C]), _;
       }), c(E), o({
         undo: () => c(b),
         redo: () => c(E)
@@ -1281,16 +1281,16 @@ const useBlocksStoreManager = () => {
         return a(k, c, d);
       }
       const u = generateUUID(), p = getBlockDefaultProps(i.props), m = [];
-      forIn(p, (k, _) => {
+      forIn(p, (k, S) => {
         if (startsWith(k, SLOT_KEY)) {
-          const S = k.replace(SLOT_KEY, "");
+          const R = k.replace(SLOT_KEY, "");
           m.push({
-            _id: S,
+            _id: R,
             _type: "Slot",
             _parent: u,
-            _name: i.props[_].name,
-            _styles: i.props[_].styles,
-            _emptyStyles: i.props[_].emptyStyles
+            _name: i.props[S].name,
+            _styles: i.props[S].styles,
+            _emptyStyles: i.props[S].emptyStyles
           });
         }
       });
@@ -2918,7 +2918,7 @@ class Content extends Component {
     return Children.only(this.props.children);
   }
 }
-U(Content, "propTypes", {
+F(Content, "propTypes", {
   children: PropTypes.element.isRequired,
   contentDidMount: PropTypes.func.isRequired,
   contentDidUpdate: PropTypes.func.isRequired
@@ -2926,17 +2926,17 @@ U(Content, "propTypes", {
 class Frame extends Component {
   constructor(r, a) {
     super(r, a);
-    U(this, "setRef", (r) => {
+    F(this, "setRef", (r) => {
       this.nodeRef.current = r;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(r) : a && (a.current = r);
     });
-    U(this, "handleLoad", () => {
+    F(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
     });
     // In certain situations on a cold cache DOMContentLoaded never gets called
     // fallback to an interval to check if that's the case
-    U(this, "loadCheck", () => setInterval(() => {
+    F(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -2977,7 +2977,7 @@ class Frame extends Component {
 // also inject into the body and can mess up React. For this reason
 // initialContent is expected to have a div inside of the body
 // element that we render react into.
-U(Frame, "propTypes", {
+F(Frame, "propTypes", {
   style: PropTypes.object,
   // eslint-disable-line
   head: PropTypes.node,
@@ -2987,7 +2987,7 @@ U(Frame, "propTypes", {
   contentDidMount: PropTypes.func,
   contentDidUpdate: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-}), U(Frame, "defaultProps", {
+}), F(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -3074,20 +3074,20 @@ const useDnd = () => {
       x.preventDefault(), x.stopPropagation(), throttledDragOver(x);
     },
     onDrop: (x) => {
-      var R;
-      const j = dropTarget, b = getOrientation(j) === "vertical" ? x.clientY + ((R = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : R.scrollY) : x.clientX;
+      var C;
+      const j = dropTarget, b = getOrientation(j) === "vertical" ? x.clientY + ((C = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : C.scrollY) : x.clientX;
       dropIndex = calculateDropIndex(b, possiblePositions);
-      const k = d, _ = j.getAttribute("data-block-id"), S = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((k == null ? void 0 : k._id) === _ || !S) {
+      const k = d, S = j.getAttribute("data-block-id"), R = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((k == null ? void 0 : k._id) === S || !R) {
         g();
         return;
       }
       if (!has(k, "_id")) {
-        a(k, _ === "canvas" ? null : _, dropIndex), setTimeout(g, 300);
+        a(k, S === "canvas" ? null : S, dropIndex), setTimeout(g, 300);
         return;
       }
-      let B = j.getAttribute("data-block-id");
-      B === null && (B = x.target.parentElement.getAttribute("data-block-id")), c([k._id], B === "canvas" ? null : B, dropIndex), g(), setTimeout(removePlaceholder, 300);
+      let _ = j.getAttribute("data-block-id");
+      _ === null && (_ = x.target.parentElement.getAttribute("data-block-id")), c([k._id], _ === "canvas" ? null : _, dropIndex), g(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (x) => {
       const j = x, E = j.target;
@@ -3314,17 +3314,17 @@ const useHandleCanvasDblClick = () => {
   }, [r, c]);
   const x = get(o, "headingFont", "DM Sans"), j = get(o, "bodyFont", "DM Sans");
   return useEffect(() => {
-    const E = get(o, "primaryColor", "#000"), b = get(o, "secondaryColor", "#FFF"), k = get(o, "bodyBgLightColor", "#fff"), _ = get(o, "bodyBgDarkColor", "#000"), S = get(o, "bodyTextDarkColor", "#000"), B = get(o, "bodyTextLightColor", "#fff"), R = s({
+    const E = get(o, "primaryColor", "#000"), b = get(o, "secondaryColor", "#FFF"), k = get(o, "bodyBgLightColor", "#fff"), S = get(o, "bodyBgDarkColor", "#000"), R = get(o, "bodyTextDarkColor", "#000"), _ = get(o, "bodyTextLightColor", "#fff"), C = s({
       colors: [E, b],
       names: ["primary", "secondary"]
     });
-    set(R, "primary.DEFAULT", E), set(R, "secondary.DEFAULT", b);
-    const A = {
+    set(C, "primary.DEFAULT", E), set(C, "secondary.DEFAULT", b);
+    const B = {
       "bg-light": k,
-      "bg-dark": _,
-      "text-dark": S,
-      "text-light": B
-    }, T = get(o, "roundedCorners", "0");
+      "bg-dark": S,
+      "text-dark": R,
+      "text-light": _
+    }, N = get(o, "roundedCorners", "0");
     !d || !d.tailwind || (d.tailwind.config = {
       darkMode: "class",
       theme: {
@@ -3341,13 +3341,13 @@ const useHandleCanvasDblClick = () => {
             body: [j]
           },
           borderRadius: {
-            DEFAULT: `${T || "0"}px`
+            DEFAULT: `${N || "0"}px`
           },
-          colors: { ...A, ...R }
+          colors: { ...B, ...C }
         }
       },
       plugins: [
-        typography$1,
+        typography,
         forms,
         aspectRatio,
         plugin(function({ addBase: L, theme: P }) {
@@ -3505,9 +3505,9 @@ function applyLanguage(o, n, r) {
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
   const { selectedLang: r } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [u] = useCanvasSettings(), [p] = useHiddenBlockIds(), { getGlobalBlocks: m } = useGlobalBlocksStore(), g = useCallback((b) => getStyleAttrs(b, d), [d]), [x] = useChaiExternalData(), [j] = useAtom$1(inlineEditingActiveAtom), E = useCallback(
-    (b) => b.reduce((k, _) => {
-      const S = get(u, _, {});
-      return { ...k, ...S };
+    (b) => b.reduce((k, S) => {
+      const R = get(u, S, {});
+      return { ...k, ...R };
     }, {}),
     [u]
   );
@@ -3515,15 +3515,15 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
     o.map((b, k) => {
       if (j === b._id || p.includes(b._id))
         return null;
-      const _ = {}, S = filter(n, { _parent: b._id });
-      if (_.children = S.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: S }) : null, b._type === "GlobalBlock") {
-        const C = m(b);
-        _.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(C, (w) => !w._parent), allBlocks: C });
+      const S = {}, R = filter(n, { _parent: b._id });
+      if (S.children = R.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: R }) : null, b._type === "GlobalBlock") {
+        const w = m(b);
+        S.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(w, (A) => !A._parent), allBlocks: w });
       }
-      const B = getBlockComponent(b._type), R = get(B, "server", !1), A = R ? RSCBlock : get(B, "builderComponent", get(B, "component", null));
-      if (isNull(A))
+      const _ = getBlockComponent(b._type), C = get(_, "server", !1), B = C ? RSCBlock : get(_, "builderComponent", get(_, "component", null));
+      if (isNull(B))
         return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${b == null ? void 0 : b._type} not registered -->` });
-      const T = has(B, "getBlockStateFrom") ? B == null ? void 0 : B.getBlockStateFrom(b, n) : [], L = E(T), P = g(b);
+      const N = has(_, "getBlockStateFrom") ? _ == null ? void 0 : _.getBlockStateFrom(b, n) : [], L = E(N), P = g(b);
       if (get(P, "__isHidden", !1) && !includes(a, b._id))
         return null;
       const f = i && isDescendant(i._id, b._id, n), v = {
@@ -3540,12 +3540,12 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
         ...c === b._id && !f ? { "data-drop": "yes" } : {},
         ...includes(l, b._id) ? { "data-cut-block": "yes" } : {}
       };
-      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: v }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(A, {
+      return C ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: v }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(B, {
         blockProps: v,
         index: k,
-        ...applyBindings(applyLanguage(b, r, B), x),
+        ...applyBindings(applyLanguage(b, r, _), x),
         ...omit(P, ["__isHidden"]),
-        ..._,
+        ...S,
         inBuilder: !0,
         blockState: L
       }) });
@@ -3579,61 +3579,65 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       className: "mt-1 block w-full rounded-md bg-gray-100 p-2 text-black hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-700",
       children: [
         "+ ",
-        o("add_block")
+        o("Add block")
       ]
     }
   );
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
-  const a = useRef(null), l = useDebouncedCallback(
+  const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
     () => {
-      const { clientWidth: i } = a.current;
-      r(i);
+      const { clientWidth: u } = i.current;
+      r(u);
     },
-    [a.current],
+    [i.current],
     100
   );
-  return useResizeObserver(a.current, l, a.current !== null), useEffect(() => {
-    const { clientWidth: i } = a.current;
-    n(i);
-  }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", className: "h-full w-full p-8 pb-0", ref: a, children: o });
+  useResizeObserver(i.current, c, i.current !== null), useEffect(() => {
+    const { clientWidth: u } = i.current;
+    n(u);
+  }, []);
+  const d = () => {
+    a([]), l([]);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, 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, u] = useState({ width: 0, height: 0 }), p = useCanvasScale(d), [m, g] = useState([]), [, x] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [E, b] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), _ = useBuilderProp("htmlDir", "ltr"), S = (A) => {
-    u((T) => ({ ...T, width: A }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, u] = useState({ width: 0, height: 0 }), p = useCanvasScale(d), [m, g] = useState([]), [, x] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [E, b] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), R = (B) => {
+    u((N) => ({ ...N, width: B }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: A, clientHeight: T } = c.current;
-    u({ width: A, height: T });
+    const { clientWidth: B, clientHeight: N } = c.current;
+    u({ width: B, height: N });
   }, [c, n]);
-  const B = (A, T = 0) => {
-    const { top: L } = A.getBoundingClientRect();
-    return L + T >= 0 && L - T <= window.innerHeight;
+  const _ = (B, N = 0) => {
+    const { top: L } = B.getBoundingClientRect();
+    return L + N >= 0 && L - N <= window.innerHeight;
   };
   useEffect(() => {
-    var A, T;
+    var B, N;
     if (a && a.type !== "Multiple" && i.current) {
       const L = getElementByDataBlockId(i.current.contentDocument, a._id);
-      L && (B(L) || (T = (A = i.current) == null ? void 0 : A.contentWindow) == null || T.scrollTo({ top: L.offsetTop, behavior: "smooth" }), g([L]));
+      L && (_(L) || (N = (B = i.current) == null ? void 0 : B.contentWindow) == null || N.scrollTo({ top: L.offsetTop, behavior: "smooth" }), g([L]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(E) && i.current) {
-      const A = getElementByStyleId(
+      const B = getElementByStyleId(
         i.current.contentDocument,
         first(E).id
       );
-      x(A ? [A] : [null]);
+      x(B ? [B] : [null]);
     } else
       x([null]);
   }, [E]);
-  const R = useMemo(() => {
-    let A = IframeInitialContent;
-    return A = A.replace("__HTML_DIR__", _), o === "offline" && (A = A.replace(
+  const C = useMemo(() => {
+    let B = IframeInitialContent;
+    return B = B.replace("__HTML_DIR__", S), o === "offline" && (B = B.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
-    ), A = A.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), A = A.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), A;
-  }, [o, _]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: S, onResize: S, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ), B = B.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), B = B.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), B;
+  }, [o, S]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: R, onResize: R, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
@@ -3650,7 +3654,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
           id: "canvas-iframe",
           style: { ...p, ...isEmpty(p) ? { width: `${n}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: R,
+          initialContent: C,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3773,7 +3777,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       l !== o.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-lKbkdWrD.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-jyFoM1d1.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
@@ -3848,8 +3852,8 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   showHeading: o = !0,
   className: n = ""
 }) => {
-  const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: R }, A) => {
-    A && (a(R), i.current = R);
+  const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: C }, B) => {
+    B && (a(C), i.current = C);
   }, {
     bodyFont: u,
     headingFont: p,
@@ -3861,54 +3865,54 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     bodyBgLightColor: b,
     roundedCorners: k
   } = r;
-  let _ = {
+  let S = {
     headingFont: y({
-      title: c("theme_config.heading_font"),
+      title: c("Theme Config.Heading Font"),
       default: p,
       options: FONTS
     }),
     bodyFont: y({
-      title: c("theme_config.body_font"),
+      title: c("Theme Config.Body Font"),
       default: u,
       options: FONTS
     }),
     roundedCorners: s$1({
-      title: c("theme_config.rounded_corner"),
+      title: c("Theme Config.Rounded Corner"),
       default: parseInt(k || 5, 10)
     }),
-    primaryColor: h({ title: c("theme_config.primary"), default: m }),
-    secondaryColor: h({ title: c("theme_config.secondary"), default: E })
+    primaryColor: h({ title: c("Theme Config.Primary"), default: m }),
+    secondaryColor: h({ title: c("Theme Config.Secondary"), default: E })
   };
-  l || (_ = {
-    ..._,
+  l || (S = {
+    ...S,
     bodyBgLightColor: h({
-      title: c("theme_config.background"),
+      title: c("Theme Config.Background"),
       default: b
     }),
     bodyTextLightColor: h({
-      title: c("theme_config.text_color"),
+      title: c("Theme Config.Text Color"),
       default: g
     }),
     bodyBgDarkColor: h({
-      title: c("theme_config.background_dark_mode"),
+      title: c("Theme Config.Background Dark Mode"),
       default: j
     }),
     bodyTextDarkColor: h({
-      title: c("theme_config.text_color_dark_mode"),
+      title: c("Theme Config.Text Color Dark Mode"),
       default: x
     })
   });
-  const S = {
+  const R = {
     type: "object",
     properties: {}
-  }, B = {};
-  return Object.keys(_).forEach((R) => {
-    const A = _[R];
-    return S.properties || (S.properties = {}), S.properties[R] = A.schema, B[R] = A.uiSchema, !0;
+  }, _ = {};
+  return Object.keys(S).forEach((C) => {
+    const B = S[C];
+    return R.properties || (R.properties = {}), R.properties[C] = B.schema, _[C] = B.uiSchema, !0;
   }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full select-none flex-col", n), children: [
     o ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "px-1 font-semibold", children: c("Theme Configuration") }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Form,
+      Form$1,
       {
         widgets: { color: ColorField },
         idSeparator: ".",
@@ -3916,8 +3920,8 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
         omitExtraData: !0,
         liveOmit: !0,
         liveValidate: !0,
-        uiSchema: B,
-        schema: S,
+        uiSchema: _,
+        schema: R,
         formData: r,
         validator,
         onChange: d
@@ -4100,14 +4104,14 @@ function BiExpandVertical(o) {
 const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let u = null;
-  const p = o.children.length > 0, { highlightBlock: m, clearHighlight: g } = useBlockHighlight(), { id: x, data: j, isSelected: E, willReceiveDrop: b, isDragging: k, isEditing: _, handleClick: S } = o, B = (f) => {
+  const p = o.children.length > 0, { highlightBlock: m, clearHighlight: g } = useBlockHighlight(), { id: x, data: j, isSelected: E, willReceiveDrop: b, isDragging: k, isEditing: S, handleClick: R } = o, _ = (f) => {
     f.stopPropagation(), !i.includes(x) && o.toggle();
-  }, R = (f) => {
+  }, C = (f) => {
     f.isInternal && (u = f.isOpen, f.isOpen && f.close());
-  }, A = (f) => {
+  }, B = (f) => {
     f.isInternal && u !== null && (u ? f.open() : f.close(), u = null);
-  }, T = (f) => {
-    f.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), S(f);
+  }, N = (f) => {
+    f.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), R(f);
   };
   useEffect(() => {
     const f = setTimeout(() => {
@@ -4117,17 +4121,17 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   }, [b, o, k]);
   const L = useMemo(() => {
     const f = Object.keys(j), v = [];
-    for (let C = 0; C < f.length; C++)
-      if (f[C].endsWith("_attrs")) {
-        const w = j[f[C]], I = Object.keys(w).join("|");
+    for (let w = 0; w < f.length; w++)
+      if (f[w].endsWith("_attrs")) {
+        const A = j[f[w]], I = Object.keys(A).join("|");
         I.match(/x-data/) && v.push("data"), I.match(/x-on/) && v.push("event"), I.match(/x-show|x-if/) && v.push("show");
       }
     return v;
   }, [j]), P = (f, v) => {
-    const C = d.contentDocument || d.contentWindow.document, w = C.querySelector(`[data-block-id=${f}]`);
-    w && w.setAttribute("data-drop", v);
-    const I = w.getBoundingClientRect(), N = d.getBoundingClientRect();
-    I.top >= N.top && I.left >= N.left && I.bottom <= N.bottom && I.right <= N.right || (C.documentElement.scrollTop = w.offsetTop - N.top);
+    const w = d.contentDocument || d.contentWindow.document, A = w.querySelector(`[data-block-id=${f}]`);
+    A && A.setAttribute("data-drop", v);
+    const I = A.getBoundingClientRect(), T = d.getBoundingClientRect();
+    I.top >= T.top && I.left >= T.left && I.bottom <= T.bottom && I.right <= T.right || (w.documentElement.scrollTop = A.offsetTop - T.top);
   };
   return x === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -4136,7 +4140,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
       className: "mb-10 mt-5 w-full rounded bg-gray-100 p-1 hover:bg-gray-200 dark:bg-gray-800",
       children: [
         "+ ",
-        l("add_block")
+        l("Add block")
       ]
     }
   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: x, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -4144,12 +4148,12 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     {
       onMouseEnter: () => m(x),
       onMouseLeave: () => g(),
-      onClick: T,
+      onClick: N,
       style: n,
       "data-node-id": x,
       ref: i.includes(x) ? null : r,
-      onDragStart: () => R(o),
-      onDragEnd: () => A(o),
+      onDragStart: () => C(o),
+      onDragEnd: () => B(o),
       onDragOver: (f) => {
         f.preventDefault(), P(x, "yes");
       },
@@ -4172,12 +4176,12 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
             "div",
             {
               className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center text-xs transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-              children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: B, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
+              children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: _, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: j == null ? void 0 : j._type }) }),
-            _ ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            S ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
                 className: "ml-2 flex items-center gap-x-1 truncate text-[11px]",
@@ -4418,7 +4422,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     return o;
   const n = /<video[^>]+src=['"]([^'">]+)['"]/, r = /<iframe[^>]+src=['"]([^'">]+)['"]/, a = o.match(n), l = o.match(r), i = a ? a[1] : l ? l[1] : null, c = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, d = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
   return i && (c.test(i) || d.test(i)) ? i : o;
-}, NAME_ATTRIBUTE = "$name", ATTRIBUTE_MAP = {
+}, NAME_ATTRIBUTES = ["chai-name", "data-chai-name"], ATTRIBUTE_MAP = {
   img: { alt: "alt", width: "width", height: "height", src: "image" },
   video: {
     src: "url",
@@ -4459,7 +4463,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     return {};
   const n = {}, r = ATTRIBUTE_MAP[o.tagName] || {}, a = o.attributes;
   return forEach(a, ({ key: l, value: i }) => {
-    if (l !== NAME_ATTRIBUTE)
+    if (!includes(NAME_ATTRIBUTES, l))
       if (r[l]) {
         if (o.tagName === "img" && l === "src" && !i.startsWith("http")) {
           const c = find(o.attributes, { key: "width" }), d = find(o.attributes, { key: "height" });
@@ -4582,7 +4586,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const k = r.attributes.find((_) => _.key === NAME_ATTRIBUTE);
+    const k = r.attributes.find((S) => includes(NAME_ATTRIBUTES, S.key));
     k && (a._name = k.value);
   }
   if (i)
@@ -4600,14 +4604,14 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ];
     a = {
       ...a,
-      href: ((u = l.find((_) => _.key === "href")) == null ? void 0 : u.value) || "",
-      hrefType: ((p = l.find((_) => _.key === "data-vbtype")) == null ? void 0 : p.value) || "video",
-      autoplay: ((m = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : m.value) === "true",
-      maxWidth: ((x = (g = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : g.value) == null ? void 0 : x.replace("px", "")) || "",
-      backdropColor: ((j = l.find((_) => _.key === "data-overlay")) == null ? void 0 : j.value) || "",
-      galleryName: ((E = l.find((_) => _.key === "data-gall")) == null ? void 0 : E.value) || ""
-    }, forEach(k, (_) => {
-      has(a, `styles_attrs.${_}`) && delete a.styles_attrs[_];
+      href: ((u = l.find((S) => S.key === "href")) == null ? void 0 : u.value) || "",
+      hrefType: ((p = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : p.value) || "video",
+      autoplay: ((m = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : m.value) === "true",
+      maxWidth: ((x = (g = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : g.value) == null ? void 0 : x.replace("px", "")) || "",
+      backdropColor: ((j = l.find((S) => S.key === "data-overlay")) == null ? void 0 : j.value) || "",
+      galleryName: ((E = l.find((S) => S.key === "data-gall")) == null ? void 0 : E.value) || ""
+    }, forEach(k, (S) => {
+      has(a, `styles_attrs.${S}`) && delete a.styles_attrs[S];
     });
   }
   if (a._type === "Input") {
@@ -4617,8 +4621,8 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     const k = stringify([r]);
     return hasVideoEmbed(k) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(k)), set(a, "styles", `${STYLES_KEY},absolute top-0 left-0 w-full h-full`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = k, [a];
   } else if (r.tagName === "svg") {
-    const k = find(r.attributes, { key: "height" }), _ = find(r.attributes, { key: "width" }), S = get(k, "value") ? `[${get(k, "value")}px]` : "24px", B = get(_, "value") ? `[${get(_, "value")}px]` : "24px", R = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${B} h-${S}`, R)}`.trim(), r.attributes = filter(r.attributes, (A) => !includes(["style", "width", "height", "class"], A.key)), a.icon = stringify([r]), [a];
+    const k = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), R = get(k, "value") ? `[${get(k, "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-${R}`, C)}`.trim(), r.attributes = filter(r.attributes, (B) => !includes(["style", "width", "height", "class"], B.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((b = n.block) == null ? void 0 : b._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -4638,9 +4642,9 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     l([...c], o), a(""), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-border/0 p-0 shadow-none", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: n("html_snippet_description") }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: n("Use HTML snippets from Tailwind CSS component libraries") }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "current", className: "text-sm", children: n("tailwind_html_snippet") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "current", className: "text-sm", children: n("Tailwind HTML snippet") }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Textarea,
         {
@@ -4650,7 +4654,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
           onChange: (c) => a(c.target.value),
           rows: 12,
           value: r,
-          placeholder: n("enter_code_snippet"),
+          placeholder: n("Enter your code snippet here"),
           className: "resize-none overflow-x-auto whitespace-pre bg-background font-mono text-xs font-normal"
         }
       )
@@ -4685,8 +4689,8 @@ function ExpandableObject(o) {
   useEffect(() => {
     g.current ? E(p(d, r, n)) : g.current = !0;
   }, [p]);
-  const b = x ? u.collapseIcon : u.expandIcon, k = x ? "collapse JSON" : "expand JSON", _ = useComponentId(), S = d + 1, B = a.length - 1, R = (A) => {
-    A.key === " " && (A.preventDefault(), j());
+  const b = x ? u.collapseIcon : u.expandIcon, k = x ? "collapse JSON" : "expand JSON", S = useComponentId(), R = d + 1, _ = a.length - 1, C = (B) => {
+    B.key === " " && (B.preventDefault(), j());
   };
   return /* @__PURE__ */ createElement("div", {
     className: u.basicChildStyle,
@@ -4694,16 +4698,16 @@ function ExpandableObject(o) {
   }, /* @__PURE__ */ createElement("span", {
     className: b,
     onClick: j,
-    onKeyDown: R,
+    onKeyDown: C,
     role: "button",
     tabIndex: 0,
     "aria-label": k,
     "aria-expanded": x,
-    "aria-controls": x ? _ : void 0
+    "aria-controls": x ? S : void 0
   }), n && (m ? /* @__PURE__ */ createElement("span", {
     className: u.clickableLabel,
     onClick: j,
-    onKeyDown: R,
+    onKeyDown: C,
     role: "button",
     tabIndex: -1
   }, n, ":") : /* @__PURE__ */ createElement("span", {
@@ -4711,20 +4715,20 @@ function ExpandableObject(o) {
   }, n, ":")), /* @__PURE__ */ createElement("span", {
     className: u.punctuation
   }, i), x ? /* @__PURE__ */ createElement("div", {
-    id: _
-  }, a.map((A, T) => /* @__PURE__ */ createElement(DataRender, {
-    key: A[0] || T,
-    field: A[0],
-    value: A[1],
+    id: S
+  }, a.map((B, N) => /* @__PURE__ */ createElement(DataRender, {
+    key: B[0] || N,
+    field: B[0],
+    value: B[1],
     style: u,
-    lastElement: T === B,
-    level: S,
+    lastElement: N === _,
+    level: R,
     shouldExpandNode: p,
     clickToExpandNode: m
   }))) : /* @__PURE__ */ createElement("span", {
     className: u.collapsedContent,
     onClick: j,
-    onKeyDown: R,
+    onKeyDown: C,
     role: "button",
     tabIndex: -1,
     "aria-hidden": !0,
@@ -5134,7 +5138,7 @@ const ViewData = ({ data: o, fullView: n }) => {
   try {
     const n = document.getElementById("icon-picker-field"), r = document.createElement("div");
     ReactDOM.render(/* @__PURE__ */ jsxRuntimeExports.jsx(IconPickerItem, { value: o }), r), n.appendChild(r), r.hidden = !0;
-    let a = r.innerHTML;
+    const a = r.innerHTML;
     setTimeout(() => n.removeChild(r), 100);
     const i = new DOMParser().parseFromString(a, "image/svg+xml"), c = i.querySelector("svg");
     return c && (c.removeAttribute("width"), c.removeAttribute("height")), new XMLSerializer().serializeToString(i);
@@ -5193,12 +5197,12 @@ const ViewData = ({ data: o, fullView: n }) => {
         spellCheck: "false",
         value: o,
         onChange: (l) => n(l.target.value),
-        placeholder: r("choose_icon_or_enter_svg"),
+        placeholder: r("Choose Icon or SVG"),
         className: "no-scrollbar disabled:opacity-50; mt-1 flex w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed"
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-nAe1gyu9.js")), UploadImages = React__default.lazy(() => import("./UploadImages-PygaZXFU.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-Oq4_5Ihm.js")), UploadImages = React__default.lazy(() => import("./UploadImages-zxbjgQf7.js")), ImagesPanel = ({
   isModalView: o = !1,
   onSelect: n = () => {
   }
@@ -5243,7 +5247,7 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
           spellCheck: "false",
           type: "url",
           className: "text-xs",
-          placeholder: c("enter_image_url"),
+          placeholder: c("Enter image URL"),
           value: o,
           onBlur: ({ target: { value: u } }) => a(r, u),
           onChange: (u) => n(u.target.value)
@@ -5376,7 +5380,7 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
     // save only every 5 seconds
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Form,
+    Form$1,
     {
       widgets: {
         binding: BindingWidget,
@@ -5409,7 +5413,7 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 border-b border-border bg-background py-2 font-normal text-muted-foreground", children: [
       r._name || r._type,
       " ",
-      l("visibility settings")
+      l("Visibility settings")
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 pt-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5465,28 +5469,28 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), u = useBuilderProp("dataBindingSupport", !1), p = ({ formData: b }, k, _) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), u = useBuilderProp("dataBindingSupport", !1), p = ({ formData: b }, k, S) => {
     if (k && (c == null ? void 0 : c._id) === n._id) {
-      const S = k.replace("root.", "");
-      a([n._id], { [S]: get(b, S) }, _);
+      const R = k.replace("root.", "");
+      a([n._id], { [R]: get(b, R) }, S);
     }
   }, m = useCallback(
-    debounce(({ formData: b }, k, _) => {
-      p({ formData: b }, k, _), d(b);
+    debounce(({ formData: b }, k, S) => {
+      p({ formData: b }, k, S), d(b);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), g = ({ formData: b }, k) => {
     if (k) {
-      const _ = k.replace("root.", "");
+      const S = k.replace("root.", "");
       r(
         [n._id],
-        convertDotNotationToObject(_, get(b, _.split(".")))
-      ), m({ formData: b }, k, { [_]: get(c, _) });
+        convertDotNotationToObject(S, get(b, S.split(".")))
+      ), m({ formData: b }, k, { [S]: get(c, S) });
     }
   }, x = keys(get(i, "_bindings", {})), j = useMemo(() => {
     const b = cloneDeep(get(l, "props", {}));
-    return each(b, (k, _) => {
-      get(k, "hidden", !1) && delete b[_];
+    return each(b, (k, S) => {
+      get(k, "hidden", !1) && delete b[S];
     }), u && each(x, (k) => delete b[k]), b;
   }, [l, x, u]), E = get(l, "server", !1);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
@@ -5576,14 +5580,14 @@ const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
         if (l) {
           n(!0), a(null);
           try {
-            const b = g === "content" ? cloneDeep(getBlockWithChildren(x, d)) : [cloneDeep(d.find((R) => R._id === x))];
+            const b = g === "content" ? cloneDeep(getBlockWithChildren(x, d)) : [cloneDeep(d.find((C) => C._id === x))];
             set(b, "0._parent", null);
-            const k = u === p ? "" : u, _ = await l(g, promptWithLanguage(j, m, g), b, k), { blocks: S, error: B } = _;
-            if (B) {
-              a(B);
+            const k = u === p ? "" : u, S = await l(g, promptWithLanguage(j, m, g), b, k), { blocks: R, error: _ } = S;
+            if (_) {
+              a(_);
               return;
             }
-            g === "styles" ? c(S) : i(S), E && E(_);
+            g === "styles" ? c(R) : i(R), E && E(S);
           } catch (b) {
             a(b);
           } finally {
@@ -5681,14 +5685,14 @@ const AskAIStyles = ({ blockId: o }) => {
     !l && j && m(j), u.current = setTimeout(() => m(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("ask_ai") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Textarea,
       {
         ref: d,
         value: i,
         onChange: (x) => c(x.target.value),
-        placeholder: n("ask_ai_to_edit_styles"),
+        placeholder: n("Ask AI to edit styles"),
         className: "w-full border border-border focus:border-0",
         rows: 3,
         onKeyDown: (x) => {
@@ -5709,16 +5713,16 @@ const AskAIStyles = ({ blockId: o }) => {
           size: "sm",
           children: a ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "h-5 w-5 animate-spin" }),
-            n("generating_please_wait")
-          ] }) : n("edit_with_ai")
+            n("Generating... Please wait...")
+          ] }) : n("Edit with AI")
         }
       ),
       a ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Skeleton, { className: "flex w-full items-center space-x-1 px-4 py-1 pl-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(FaSpinner, { className: "h-4 w-4 animate-spin text-gray-500" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: n("generating_please_wait") })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: n("Generating... Please wait...") })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("stop") })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
       ] }) : null
     ] }),
     p ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
@@ -5738,16 +5742,16 @@ const AskAIStyles = ({ blockId: o }) => {
   keys: ["name"]
 });
 function ManualClasses() {
-  var A;
-  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, u] = useState(""), { toast: p } = useToast(), m = (A = first(n)) == null ? void 0 : A.prop, g = reject((get(r, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), x = () => {
-    const T = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    a(i, T, !0), u("");
-  }, [j, E] = useState([]), b = ({ value: T }) => {
-    const L = T.trim().toLowerCase(), P = L.match(/.+:/g);
+  var B;
+  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, u] = useState(""), { toast: p } = useToast(), m = (B = first(n)) == null ? void 0 : B.prop, g = reject((get(r, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), x = () => {
+    const N = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    a(i, N, !0), u("");
+  }, [j, E] = useState([]), b = ({ value: N }) => {
+    const L = N.trim().toLowerCase(), P = L.match(/.+:/g);
     let f = [];
     if (P && P.length > 0) {
-      const [v] = P, C = L.replace(v, "");
-      f = fuse.search(C).map((I) => ({
+      const [v] = P, w = L.replace(v, "");
+      f = fuse.search(w).map((I) => ({
         ...I,
         item: { ...I.item, name: v + I.item.name }
       }));
@@ -5756,30 +5760,30 @@ function ManualClasses() {
     return E(map(f, "item"));
   }, k = () => {
     E([]);
-  }, _ = (T) => T.name, S = (T) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: T.name }), B = {
+  }, S = (N) => N.name, R = (N) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: N.name }), _ = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
-    placeholder: o("enter_classes_separated_by_space"),
+    placeholder: o("Enter classes separated by space"),
     value: d,
-    onKeyDown: (T) => {
-      T.key === "Enter" && d.trim() !== "" && x();
+    onKeyDown: (N) => {
+      N.key === "Enter" && d.trim() !== "" && x();
     },
-    onChange: (T, { newValue: L }) => u(L),
+    onChange: (N, { newValue: L }) => u(L),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, R = () => {
+  }, C = () => {
     if (navigator.clipboard === void 0) {
       p({
-        title: o("clipboard_not_supported"),
-        description: o("please_use_chrome_firefox_or_safari"),
+        title: o("Clipboard not supported"),
+        description: o("Please use Chrome, Firefox or Safari"),
         variant: "destructive"
       });
       return;
     }
     navigator.clipboard.writeText(g.join(" ")), p({
-      title: o("copied"),
-      description: o("classes_copied_to_clipboard")
+      title: o("Copied"),
+      description: o("Classes copied to clipboard")
     });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -5791,8 +5795,8 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: o("classes") }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: R, className: "cursor-pointer" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: o("copy_classes_to_clipboard") }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: C, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: o("Copy classes to clipboard") }) })
             ] })
           ] }),
           c ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
@@ -5810,9 +5814,9 @@ function ManualClasses() {
               suggestions: j,
               onSuggestionsFetchRequested: b,
               onSuggestionsClearRequested: k,
-              getSuggestionValue: _,
-              renderSuggestion: S,
-              inputProps: B,
+              getSuggestionValue: S,
+              renderSuggestion: R,
+              inputProps: _,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border"
               },
@@ -5836,22 +5840,22 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          g.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          g.map((N) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate 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: [
-                T,
+                N,
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Cross2Icon,
                   {
-                    onClick: () => l(i, [T]),
+                    onClick: () => l(i, [N]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            T
+            N
           ))
         ) })
       ]
@@ -6501,7 +6505,7 @@ 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: u, units: p, negative: m } = o, [g, x] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [j, E] = useState(!1), [b, k] = useState(""), [_, S] = useState(!1), [B, R] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: m } = o, [g, x] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [j, E] = useState(!1), [b, k] = useState(""), [S, R] = useState(!1), [_, C] = useState(!1);
   useEffect(() => {
     const { value: f, unit: v } = getClassValueAndUnit(i);
     if (v === "") {
@@ -6510,24 +6514,24 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     }
     x(v), l(v === "class" || isEmpty(f) ? "" : f);
   }, [i, u, p]);
-  const A = useThrottledCallback((f) => c(f), [c], THROTTLE_TIME), T = useThrottledCallback((f) => c(f, !1), [c], THROTTLE_TIME), L = useCallback(
+  const B = useThrottledCallback((f) => c(f), [c], THROTTLE_TIME), N = useThrottledCallback((f) => c(f, !1), [c], THROTTLE_TIME), L = useCallback(
     (f = !1) => {
       const v = getUserInputValues(`${a}`, p);
       if (get(v, "error", !1)) {
         E(!0);
         return;
       }
-      const C = get(v, "unit") !== "" ? get(v, "unit") : g;
-      if (C === "auto" || C === "none") {
-        A(`${d}${C}`);
+      const w = get(v, "unit") !== "" ? get(v, "unit") : g;
+      if (w === "auto" || w === "none") {
+        B(`${d}${w}`);
         return;
       }
       if (get(v, "value") === "")
         return;
-      const I = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
-      f ? T(I) : A(I);
+      const I = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
+      f ? N(I) : B(I);
     },
-    [A, T, a, g, d, p]
+    [B, N, a, g, d, p]
   ), P = useCallback(
     (f) => {
       const v = getUserInputValues(`${a}`, p);
@@ -6536,15 +6540,15 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         return;
       }
       if (f === "auto" || f === "none") {
-        A(`${d}${f}`);
+        B(`${d}${f}`);
         return;
       }
       if (get(v, "value") === "")
         return;
-      const C = get(v, "unit") !== "" ? get(v, "unit") : f, I = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
-      A(I);
+      const w = get(v, "unit") !== "" ? get(v, "unit") : f, I = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
+      B(I);
     },
-    [A, a, d, p]
+    [B, a, d, p]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: g === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
@@ -6552,7 +6556,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${_ ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(g) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
@@ -6564,15 +6568,15 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           onKeyDown: (f) => {
             if (f.keyCode !== 38 && f.keyCode !== 40)
               return;
-            f.preventDefault(), R(!0);
+            f.preventDefault(), C(!0);
             const v = parseInt$1(f.target.value);
-            let C = isNaN$1(v) ? 0 : v;
-            f.keyCode === 38 && (C += 1), f.keyCode === 40 && (C -= 1);
-            const w = `${C}`, N = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${g === "-" ? "" : g}]`;
-            T(N);
+            let w = isNaN$1(v) ? 0 : v;
+            f.keyCode === 38 && (w += 1), f.keyCode === 40 && (w -= 1);
+            const A = `${w}`, T = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${g === "-" ? "" : g}]`;
+            N(T);
           },
           onKeyUp: (f) => {
-            B && (f.preventDefault(), R(!1));
+            _ && (f.preventDefault(), C(!1));
           },
           onBlur: () => L(),
           onChange: (f) => {
@@ -6582,7 +6586,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             var v;
             (v = f == null ? void 0 : f.target) == null || v.select(), r(!1);
           },
-          value: _ ? b : a,
+          value: S ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             j ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6614,22 +6618,22 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(g) !== -1 || _ ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(g) !== -1 || S ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => S(!0),
+        onDragStart: () => R(!0),
         onDragEnd: (f) => {
-          if (k(() => ""), S(!1), isEmpty(f))
+          if (k(() => ""), R(!1), isEmpty(f))
             return;
-          const v = `${f}`, w = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${g === "-" ? "" : g}]`;
-          A(w);
+          const v = `${f}`, A = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${g === "-" ? "" : g}]`;
+          B(A);
         },
         onDrag: (f) => {
           if (isEmpty(f))
             return;
           k(f);
-          const v = `${f}`, w = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${g === "-" ? "" : g}]`;
-          T(w);
+          const v = `${f}`, A = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${g === "-" ? "" : g}]`;
+          N(A);
         },
         currentValue: a,
         unit: g,
@@ -6727,34 +6731,34 @@ const RangeChoices = ({ property: o, onChange: n }) => {
 }, 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, [u] = useDarkMode(), [p] = useStylingState(), [, m] = useCanvasWidth(), g = useCurrentClassByProperty(l), x = useAddClassesToBlocks(), j = useRemoveClassesFromBlocks(), [E] = useSelectedBlockIds(), b = useMemo(() => get(g, "fullCls", ""), [g]), k = useCallback(
-    (T, L = !0) => {
-      const P = { dark: u, mq: m, mod: p, cls: T, property: l, fullCls: "" };
+    (N, L = !0) => {
+      const P = { dark: u, mq: m, mod: p, cls: N, property: l, fullCls: "" };
       (u || p !== "") && (P.mq = "xs");
       const f = generateFullClsName(P);
       x(E, [f], L);
     },
     [E, u, m, p, l, x]
-  ), _ = useCallback(() => {
+  ), S = useCallback(() => {
     j(E, [b]);
-  }, [E, b, j]), S = useMemo(() => canChangeClass(g, m), [g, m]);
+  }, [E, b, j]), R = useMemo(() => canChangeClass(g, m), [g, m]);
   useEffect(() => {
-    i(S, g);
-  }, [S, i, g]);
-  const [, , B] = useCanvasWidth(), R = useCallback(
-    (T) => {
-      B({
+    i(R, g);
+  }, [R, i, g]);
+  const [, , _] = useCanvasWidth(), C = useCallback(
+    (N) => {
+      _({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[T]);
+      }[N]);
     },
-    [B]
-  ), A = get(g, "dark", null) === u && get(g, "mod", null) === p && get(g, "mq", null) === m;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: S, canReset: g && A, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${g && !A ? "text-foreground" : ""}`, children: n(a) }) }),
+    [_]
+  ), B = get(g, "dark", null) === u && get(g, "mod", null) === p && get(g, "mq", null) === m;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: R, canReset: g && B, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${g && !B ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6773,7 +6777,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: k }),
         r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: k })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => _(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : R && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6793,7 +6797,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             "button",
             {
               type: "button",
-              onClick: () => R(get(g, "mq")),
+              onClick: () => C(get(g, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6866,7 +6870,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   }, [a, n]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "my-px cursor-default rounded-md bg-gray-50 p-px px-2 text-[11px] text-foreground dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline", children: [
-      r(o.toLowerCase()),
+      startCase(r(o.toLowerCase())),
       l ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         "span",
         {
@@ -6893,7 +6897,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     [r]
   ), l = useMemo(() => ({}), []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionContext.Provider, { value: l, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: o.heading, className: "border-none", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "border-b border-border py-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-x-2 text-sm font-bold", children: n(o.heading) }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "border-b border-border py-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-x-2 text-sm font-bold", children: startCase(n(o.heading)) }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "py-2", children: React__default.Children.toArray(
       o.items.map((i) => has(i, "component") ? React__default.createElement(i.component, { key: i.label }) : has(i, "styleType") ? i.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...i }, i.label) : i.styleType === "accordion" && a(i == null ? void 0 : i.conditions) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NestedOptions, { ...i }, i.label) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...i }, i.label))
     ) })
@@ -7030,7 +7034,7 @@ function UILibrariesSelect({
 }) {
   const { t: a } = useTranslation();
   return n ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-12", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-bold text-gray-500", children: a("choose_library") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-bold text-gray-500", children: a("Choose library") }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ChaiSelect$1,
       {
@@ -7051,8 +7055,8 @@ const BlockCard = ({
   parentId: r = void 0
 }) => {
   const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: p } = useBlockHighlight(), m = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), j = (k) => {
-    const _ = has(k, "styles_attrs.data-page-section");
-    return k._type === "Box" && _;
+    const S = has(k, "styles_attrs.data-page-section");
+    return k._type === "Box" && S;
   }, E = useCallback(
     async (k) => {
       if (k.stopPropagation(), has(o, "component")) {
@@ -7060,23 +7064,23 @@ const BlockCard = ({
         return;
       }
       l(!0);
-      const _ = await i(n, o);
-      isEmpty(_) || d(syncBlocksWithDefaults(_), r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
+      const S = await i(n, o);
+      isEmpty(S) || d(syncBlocksWithDefaults(S), r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
     },
     [o]
   ), b = async (k) => {
-    const _ = await i(n, o);
-    let S = r;
-    if (j(first(_)) && (S = null), !isEmpty(_)) {
-      const B = { blocks: _, uiLibrary: !0, parent: S };
-      if (k.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
-        const R = new Image();
-        R.src = o.preview, R.onload = () => {
-          k.dataTransfer.setDragImage(R, 0, 0);
+    const S = await i(n, o);
+    let R = r;
+    if (j(first(S)) && (R = null), !isEmpty(S)) {
+      const _ = { blocks: S, uiLibrary: !0, parent: R };
+      if (k.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
+        const C = new Image();
+        C.src = o.preview, C.onload = () => {
+          k.dataTransfer.setDragImage(C, 0, 0);
         };
       } else
         k.dataTransfer.setDragImage(new Image(), 0, 0);
-      x(B), setTimeout(() => {
+      x(_), setTimeout(() => {
         u([]), p(), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
       }, 200);
     }
@@ -7117,9 +7121,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o }) => {
-  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((S) => S.category === "custom"), c = a.find((S) => S.uuid === n) || first(a), { data: d, isLoading: u } = useLibraryBlocks(c), p = groupBy([...d, ...i], "group"), [m, g] = useState("Hero"), x = get(p, m, []), j = useRef(null), { t: E } = useTranslation(), b = (S) => {
+  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((R) => R.category === "custom"), c = a.find((R) => R.uuid === n) || first(a), { data: d, isLoading: u } = useLibraryBlocks(c), p = groupBy([...d, ...i], "group"), [m, g] = useState("Hero"), x = get(p, m, []), j = useRef(null), { t: E } = useTranslation(), b = (R) => {
     j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
-      j.current && g(S);
+      j.current && g(R);
     }, 300);
   };
   if (u)
@@ -7127,30 +7131,30 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const k = filter(x, (S, B) => B % 2 === 0), _ = filter(x, (S, B) => B % 2 === 1);
+  const k = filter(x, (R, _) => _ % 2 === 0), S = filter(x, (R, _) => _ % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: c == null ? void 0 : c.uuid, setLibrary: r, uiLibraries: a }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: E("groups") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: E("Groups") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsxRuntimeExports.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(p, (S, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(p, (R, _) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => b(B),
+              onMouseEnter: () => b(_),
               onMouseLeave: () => clearTimeout(j.current),
-              onClick: () => g(B),
+              onClick: () => g(_),
               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",
-                B === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                _ === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(B.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(_.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            B
+            _
           ))
         ) })
       ] })
@@ -7163,10 +7167,10 @@ const BlockCard = ({
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              k.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: S, library: c }))
+              k.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: R, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              _.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: S, library: c }))
+              S.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: R, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7176,7 +7180,7 @@ const BlockCard = ({
       }
     )
   ] }) }) });
-}, UILibrariesPanel = ({ parentId: o }) => /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrarySection, { parentId: o }), UILibraries = UILibrariesPanel, add_block = "Add block", enter_paste_tailwind_html = "(Enter or paste TailwindCSS HTML snippet)", click_to_add_block = "(Click to add block to page)", core = "Core", custom_blocks = "Custom Blocks", ui_library = "UI Library", html_snippet_description = "Use HTML snippets from Tailwind CSS component libraries etc. or just copy paste your own HTML code.", tailwind_html_snippet = "Tailwind HTML snippet:", enter_code_snippet = "Enter your code snippet here...", import_html = "Import HTML", note_imported_html = "NOTE: Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page.", dark_mode = "Dark mode", tree_view_no_blocks = "This page has no blocks. Add a block by clicking the + button", canvas_empty = "This page is empty", no_block_selected_for_styling = "Please select a block to edit settings or styles", no_block_selected_for_ask_ai = "Please select a block to ask AI", no_styling_block_selected = "Please select a styling block", drop_here_message = "Drop your block here", use_setting = "Use setting", mobile_xs_title = "Mobile (XS)", mobile_xs_content = "Styles set here are applied to all screen unless edited at higher breakpoint", mobile_sm_title = "Mobile landscape (SM)", mobile_sm_content = "Styles set here are applied at 640px and up unless edited at higher breakpoint", tablet_md_title = "Tablet (MD)", tablet_md_content = "Styles set here are applied at 768px and up", tablet_lg_title = "Tablet Landscape (LG)", tablet_lg_content = "Styles set here are applied at 1024px and up unless edited at higher breakpoint", desktop_xl_title = "Desktop (XL)", desktop_xl_content = "Styles set here are applied at 1280px and up unless edited at higher breakpoint", large_desktop_2xl_title = "Large Desktop (2XL)", large_desktop_2xl_content = "Styles set here are applied at 1536px and up", Breakpoints$1 = "Breakpoints", clear = "Clear", clear_canvas_title = "Clear whole canvas?", clear_canvas_description = "Are you sure you want to clear the whole canvas?", cancel = "Cancel", yes = "Yes", preview = "Preview", settings = "Settings", styling = "Styling", data_provider = "Data Provider", remove_provider_confirmation = "Are you sure you want to remove <span class='text-blue-500'>{name}</span> provider?", remove_provider_warning = "Your data provider will be removed from this page and all added data binding will be not visible on blocks.", remove = "Remove", no_data_providers = "You have no data providers registered. Please add a data provider to your project.", learn_more = "Learn more", add_data_providers = "Add data providers:", select_provider = "Select a provider", choose = "Choose", page_data_providers = "Page data providers:", view_data = "View Data", mark_as_global = "Mark as Global", global_block_note = "Note: Global blocks are single instances. Editing global blocks will be reflected on all pages using these blocks.", global_block_indicator = "Global blocks are indicated with", global_block_category = "Global blocks are available under 'Global' category", enter_global_block_name = "Enter global block name", eg_header_footer = "Eg: Header, Footer", blocks_selected = "{{length}} blocks selected.", cut = "Cut", copy = "Copy", clear_selection = "Clear Selection", dev_mode_message = "This is dev mode. Visit", to_see_page_preview = "to see page preview", theme_config = {
+}, UILibrariesPanel = ({ parentId: o }) => /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrarySection, { parentId: o }), UILibraries = UILibrariesPanel, 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",
@@ -7278,85 +7282,152 @@ const BlockCard = ({
   multiple_choice: "Multiple Choice",
   textarea: "Textarea",
   rows: "Rows"
-}, ai_assistant = "AI Assistant", close_preview = "Close Preview", saved = "Saved", unsaved = "Unsaved", saving = "Saving...", page_is_empty = "This page is empty.", Theme = "Theme", Outline = "Outline", clipboard_not_supported = "Not supported", please_use_chrome_firefox_or_safari = "Please use Chrome, Firefox or Safari", classes_copied_to_clipboard = "Classes copied to clipboard", download_complete = "Download complete", copied = "Copied", enter_classes_separated_by_space = "Enter classes separated by space", copy_classes_to_clipboard = "Copy classes to clipboard", classes = "Classes", ask_ai = "Ask AI", edit_with_ai = "Edit with AI", generating_please_wait = "Generating... Please wait", stop$1 = "Stop", eg_this_page_is_about_an_ai_assistant_app_called_chai_studio_it_allows_users_to_create_beautiful_webpages_and_edit_content_with_ai = "E.g.: This page is about an AI assistant app called Chai Studio. It allows users to create beautiful webpages and edit content with AI.", ask_ai_to_edit_styles = "Ask AI to edit styles", ask_ai_to_edit_content = "Ask AI to edit content", ai_context = "AI Context", please_select_a_block_to_ask_ai = "Select a block to edit with AI", please_select_a_block_to_edit = "Please select a block to edit", edit = "Edit", tell_about_this_page_eg_this_page_is_about = "Describe this page. E.g.: This page is about...", tag = "Tag", value = "Value", background_image = "Background Image", enter_image_url = "Enter image URL", replace_image = "Replace image", choose_image = "Choose image", images = "Images", typography = "Typography", background = "Background", library = "Library", blocks = "Blocks", basic = "Basic", media = "Media", advanced = "Advanced", form = "Form", choose_icon_or_enter_svg = "Choose an icon or enter SVG", groups = "Groups", ui_libraries = "UI Libraries", accordions = "Accordions", buttons = "Buttons", layouts = "Layouts", choose_library = "Choose library", no_library_found = "No library found.", faq = "FAQ", hero = "Hero", features = "Features", footer = "Footer", navbar = "Navbar", icons = "Icons", testimonials = "Testimonials", blog = "Blog", ai_quick_prompts = {
-  improve_writing: "Improve writing",
-  replace_placeholder_content: "Replace placeholder content",
-  fix_grammar: "Fix grammar",
-  make_longer: "Make longer",
-  make_shorter: "Make shorter",
-  add_emojis: "Add emojis",
-  randomize: "Randomize"
-}, sidebar = {
-  outline: "Outline",
-  edit_block: "Edit Block",
-  ai_assistant: "AI Assistant",
-  theme: "Theme"
-}, remove_context = "Remove context", yes_delete = "Yes, Delete", ai_context_updated = "AI Context Updated", you_can_now_ask_ai_to_edit_your_content = "You can now ask AI to edit your content.", lngEn = {
-  add_block,
-  enter_paste_tailwind_html,
-  click_to_add_block,
-  core,
-  custom_blocks,
-  ui_library,
-  import: "Import",
-  html_snippet_description,
-  tailwind_html_snippet,
-  enter_code_snippet,
-  import_html,
-  note_imported_html,
-  dark_mode,
-  tree_view_no_blocks,
-  canvas_empty,
-  no_block_selected_for_styling,
-  no_block_selected_for_ask_ai,
-  no_styling_block_selected,
-  drop_here_message,
-  use_setting,
-  mobile_xs_title,
-  mobile_xs_content,
-  mobile_sm_title,
-  mobile_sm_content,
-  tablet_md_title,
-  tablet_md_content,
-  tablet_lg_title,
-  tablet_lg_content,
-  desktop_xl_title,
-  desktop_xl_content,
-  large_desktop_2xl_title,
-  large_desktop_2xl_content,
+}, 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",
+  "Click to add block to page": "Click to add block to page",
+  Core,
+  "Custom Blocks": "Custom Blocks",
+  "UI Library": "UI Library",
+  Import,
+  "Use HTML snippets from Tailwind CSS component libraries": "Use HTML snippets from Tailwind CSS component libraries",
+  "Tailwind HTML snippet": "Tailwind HTML snippet",
+  "Enter your code snippet here": "Enter your code snippet here",
+  "Import HTML": "Import HTML",
+  "Imported HTML Note": "NOTE: Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page.",
+  "Dark Mode": "Dark Mode",
+  "This page has no blocks. Add a block by clicking the + button": "This page has no blocks. Add a block by clicking the + button",
+  "This page is empty": "This page is empty",
+  "Please select a block to edit settings or styles": "Please select a block to edit settings or styles",
+  "Please select a block to Ask AI": "Please select a block to ask AI",
+  "Please select a styling block": "Please select a styling block",
+  "Drop your block here": "Drop your block here",
+  "Use setting": "Use setting",
+  "Mobile (XS)": "Mobile (XS)",
+  "Styles set here are applied to all screen unless edited at higher breakpoint": "Styles set here are applied to all screen unless edited at higher breakpoint",
+  "Mobile landscape (SM)": "Mobile landscape (SM)",
+  "Styles set here are applied at 640px and up unless edited at higher breakpoint": "Styles set here are applied at 640px and up unless edited at higher breakpoint",
+  "Tablet (MD)": "Tablet (MD)",
+  "Styles set here are applied at 768px and up": "Styles set here are applied at 768px and up",
+  "Tablet Landscape (LG)": "Tablet Landscape (LG)",
+  "Styles set here are applied at 1024px and up unless edited at higher breakpoint": "Styles set here are applied at 1024px and up unless edited at higher breakpoint",
+  "Desktop (XL)": "Desktop (XL)",
+  "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,
-  clear,
-  clear_canvas_title,
-  clear_canvas_description,
-  cancel,
-  yes,
-  preview,
-  settings,
-  styling,
-  data_provider,
-  remove_provider_confirmation,
-  remove_provider_warning,
-  remove,
-  no_data_providers,
-  learn_more,
-  add_data_providers,
-  select_provider,
-  choose,
-  page_data_providers,
-  view_data,
-  mark_as_global,
-  global_block_note,
-  global_block_indicator,
-  global_block_category,
-  enter_global_block_name,
-  eg_header_footer,
-  blocks_selected,
-  cut,
-  copy,
-  delete: "Delete",
-  clear_selection,
-  dev_mode_message,
-  to_see_page_preview,
+  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?",
+  Cancel,
+  Yes,
+  Preview,
+  Settings,
+  Styling,
+  "Data Provider": "Data Provider",
+  "Remove Provider Confirmation": "Are you sure you want to remove <span class='text-blue-500'>{name}</span> provider?",
+  "Your data provider will be removed from this page and all added data binding will be not visible on blocks.": "Your data provider will be removed from this page and all added data binding will be not visible on blocks.",
+  Remove,
+  "You have no data providers registered. Please add a data provider to your project.": "You have no data providers registered. Please add a data provider to your project.",
+  "Learn more": "Learn more",
+  "Add data providers:": "Add data providers:",
+  "Select a provider": "Select a provider",
+  Choose,
+  "Page data providers:": "Page data providers:",
+  "View Data": "View Data",
+  "Mark as Global": "Mark as Global",
+  "Note: Global blocks are single instances. Editing global blocks will be reflected on all pages using these blocks.": "Note: Global blocks are single instances. Editing global blocks will be reflected on all pages using these blocks.",
+  "Global blocks are indicated with": "Global blocks are indicated with",
+  "Global blocks are available under 'Global' category": "Global blocks are available under 'Global' category",
+  "Enter global block name": "Enter global block name",
+  "Eg: Header, Footer": "Eg: Header, Footer",
+  "{length} blocks selected.": "{length} blocks selected.",
+  Cut,
+  Copy,
+  Paste,
+  Delete,
+  "Clear Selection": "Clear Selection",
+  "This is dev mode. Visit": "This is dev mode. Visit",
+  "to see page preview": "to see page preview",
+  classes,
+  Theme,
+  Outline,
+  "Not supported": "Not supported",
+  "Please use Chrome, Firefox or Safari": "Please use Chrome, Firefox or Safari",
+  "Download Complete": "Download complete",
+  Copied,
+  "Enter Classes": "Enter classes separated by space",
+  "Ask AI": "Ask AI",
+  "Edit with AI": "Edit with AI",
+  "Generating... Please wait...": "Generating... Please wait...",
+  "Saving... Please wait...": "Saving... Please wait...",
+  "Deleting... Please wait...": "Deleting... Please wait...",
+  Stop,
+  "E.g.: This page is about an AI assistant app called Chai Studio. It allows users to create beautiful webpages and edit content with AI": "E.g.: This page is about an AI assistant app called Chai Studio. It allows users to create beautiful webpages and edit content with AI.",
+  "Ask AI to edit styles": "Ask AI to edit styles",
+  "Ask AI to edit content": "Ask AI to edit content",
+  "AI Context": "AI Context",
+  "Select Block for AI": "Select a block to edit with AI",
+  "Select Block to Edit": "Please select a block to edit",
+  Edit,
+  "Describe this page. E.g.: This page is about...": "Describe this page. E.g.: This page is about...",
+  Tag,
+  Value,
+  "Background Image": "Background Image",
+  "Enter image URL": "Enter image URL",
+  "Replace image": "Replace image",
+  "Choose image": "Choose image",
+  Images,
+  Library,
+  Blocks,
+  Basic,
+  Media,
+  Advanced,
+  Form,
+  "Choose Icon or SVG": "Choose an icon or enter SVG",
+  Groups,
+  "UI Libraries": "UI Libraries",
+  Accordions,
+  Buttons,
+  Layouts,
+  "Choose Library": "Choose library",
+  "No Library Found": "No library found.",
+  FAQ,
+  Hero,
+  Features,
+  Footer,
+  Navbar,
+  Icons,
+  Testimonials,
+  Blog,
+  "Remove context": "Remove context",
+  "Yes, Delete": "Yes, Delete",
+  "AI Context Updated": "AI Context Updated",
+  "You can now ask AI to edit your content.": "You can now ask AI to edit your content.",
+  Saved,
+  Unsaved,
+  "Saving...": "Saving...",
+  "Improve writing": "Improve writing",
+  "Replace placeholder content": "Replace placeholder content",
+  "Fix grammar": "Fix grammar",
+  "Make longer": "Make longer",
+  "Make shorter": "Make shorter",
+  "Add emojis": "Add emojis",
+  Randomize,
+  "Edit Block": "Edit Block",
+  "AI Assistant": "AI Assistant",
+  "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)"
+  },
   "flex.heading": "Flex Child",
   "flex.basis": "Basis",
   "flex.order": "Order",
@@ -7527,71 +7598,60 @@ const BlockCard = ({
   "classes.heading": "Classes",
   theme_config,
   web_blocks,
-  ai_assistant,
-  close_preview,
-  saved,
-  unsaved,
-  saving,
-  page_is_empty,
-  Theme,
-  Outline,
-  clipboard_not_supported,
-  please_use_chrome_firefox_or_safari,
-  classes_copied_to_clipboard,
-  download_complete,
-  copied,
-  enter_classes_separated_by_space,
-  copy_classes_to_clipboard,
-  classes,
-  ask_ai,
-  edit_with_ai,
-  generating_please_wait,
-  stop: stop$1,
-  eg_this_page_is_about_an_ai_assistant_app_called_chai_studio_it_allows_users_to_create_beautiful_webpages_and_edit_content_with_ai,
-  ask_ai_to_edit_styles,
-  ask_ai_to_edit_content,
-  ai_context,
-  please_select_a_block_to_ask_ai,
-  please_select_a_block_to_edit,
-  edit,
-  tell_about_this_page_eg_this_page_is_about,
-  tag,
-  value,
-  background_image,
-  enter_image_url,
-  replace_image,
-  choose_image,
-  images,
-  typography,
-  background,
-  library,
-  blocks,
-  basic,
-  media,
-  advanced,
-  form,
-  choose_icon_or_enter_svg,
-  groups,
-  ui_libraries,
-  accordions,
-  buttons,
-  layouts,
-  choose_library,
-  no_library_found,
-  faq,
-  hero,
-  features,
-  footer,
-  navbar,
-  icons,
-  testimonials,
-  blog,
-  ai_quick_prompts,
-  sidebar,
-  remove_context,
-  yes_delete,
-  ai_context_updated,
-  you_can_now_ask_ai_to_edit_your_content
+  "Copy classes to clipboard": "Copy classes to clipboard",
+  "Classes copied to clipboard": "Classes copied to clipboard",
+  "Show hidden blocks": "Show hidden blocks",
+  "Expand all": "Expand all",
+  "Collapse all": "Collapse all",
+  "Choose library": "Choose library",
+  "Close Preview": "Close Preview",
+  Error: "Error",
+  "Failed to copy template": "Failed to copy template",
+  "Total tokens used": "Total tokens used",
+  "Updated AI Context": "Updated AI Context",
+  "You can now Ask AI to edit your content": "You can now Ask AI to edit your content",
+  "Tell about this page eg this page is about": "Tell about this page eg this page is about..",
+  "Delete Context": "Delete Context",
+  "Keyboard shortcuts": "Keyboard shortcuts",
+  Undo,
+  Redo,
+  Duplicate,
+  "Deselect blocks": "Deselect blocks",
+  "Delete block": "Delete block",
+  "Save page": "Save page",
+  "Scripts will be only executed in preview and live mode.": "Scripts will be only executed in preview and live mode.",
+  "HTML Code Editor |": "HTML Code Editor |",
+  Close,
+  "Coming soon": "Coming soon",
+  Selected,
+  Select,
+  "Choose Builder Layout": "Choose Builder Layout",
+  "Single side panel": "Single side panel",
+  "Suitable for smaller screens. Bigger canvas size.": "Suitable for smaller screens. Bigger canvas size.",
+  "Dual side panel": "Dual side panel",
+  "Suitable for larger screens. Smaller canvas size.": "Suitable for larger screens. Smaller canvas size.",
+  "Dual side panel advanced": "Dual side panel advanced",
+  "Suitable for heavy styling & block editing. Setting are always visible.": "Suitable for heavy styling & block editing. Setting are always visible.",
+  "Block Settings": "Block Settings",
+  "Visibility settings": "Visibility settings",
+  "Show on canvas": "Show on canvas",
+  Attributes,
+  "Apply Presets": "Apply Presets",
+  apply,
+  presets,
+  "Global presets": "Global presets",
+  Orientation,
+  Color,
+  "Please select an image": "Please select an image",
+  "click to upload": "click to upload",
+  "SVG, PNG, JPG or GIF (Max. 2mb)": "SVG, PNG, JPG or GIF (Max. 2mb)",
+  "Uploading...": "Uploading...",
+  Upload,
+  "Something went wrong": "Something went wrong",
+  "Fetching...": "Fetching...",
+  "No images found": "No images found",
+  "It looks like you haven't uploaded any images yet. Start by clicking the upload button above.": "It looks like you haven't uploaded any images yet. Start by clicking the upload button above.",
+  "Open Code Editor": "Open Code Editor"
 };
 i18n.use(initReactI18next).init({
   // the translations
@@ -7674,7 +7734,7 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full flex-col overflow-hidden", o), children: [
     n ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: a("Add block") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: a(l === "html" ? "enter_paste_tailwind_html" : "click_to_add_block") })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: a(l === "html" ? "Enter or paste TailwindCSS HTML snippet" : "Click to add block to page") })
     ] }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Tabs,
@@ -8042,8 +8102,8 @@ const AIUserPrompt = ({ blockId: o }) => {
             size: "sm",
             children: a ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "h-5 w-5 animate-spin" }),
-              n("generating_please_wait")
-            ] }) : n("edit_with_ai")
+              n("Generating... Please wait...")
+            ] }) : n("Edit with AI")
           }
         ),
         a ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -8134,14 +8194,14 @@ const AIUserPrompt = ({ blockId: o }) => {
                 size: "sm",
                 children: c ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "h-5 w-5 animate-spin" }),
-                  o("Generating... Please wait...")
+                  o("Saving... Please wait...")
                 ] }) : o("Save")
               }
             ),
             n.trim().length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialog, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: n.trim().length === 0, variant: "ghost", className: "w-fit", size: "sm", children: c ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "h-5 w-5 animate-spin" }),
-                o("Generating... Please wait...")
+                o("Deleting... Please wait...")
               ] }) : o("Delete") }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogHeader, { children: [
@@ -8188,32 +8248,32 @@ const AIUserPrompt = ({ blockId: o }) => {
       return;
     }
     if (i) {
-      const R = [...a, { key: i, value: d }];
-      r(R), l(a), c(""), u(""), x("");
+      const C = [...a, { key: i, value: d }];
+      r(C), l(a), c(""), u(""), x("");
     }
-  }, k = (R) => {
-    const A = a.filter((T, L) => L !== R);
-    r(A), l(A);
-  }, _ = (R) => {
-    m(R), c(a[R].key), u(a[R].value);
-  }, S = () => {
+  }, k = (C) => {
+    const B = a.filter((N, L) => L !== C);
+    r(B), l(B);
+  }, S = (C) => {
+    m(C), c(a[C].key), u(a[C].value);
+  }, R = () => {
     if (i.startsWith("@")) {
       x("Attribute keys cannot start with '@'");
       return;
     }
     if (p !== null && i) {
-      const R = [...a];
-      R[p] = { key: i, value: d }, r(R), l(R), m(null), c(""), u(""), x("");
+      const C = [...a];
+      C[p] = { key: i, value: d }, r(C), l(C), m(null), c(""), u(""), x("");
     }
-  }, B = (R) => {
-    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), p !== null ? S() : b());
+  }, _ = (C) => {
+    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), p !== null ? R() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (R) => {
-          R.preventDefault(), p !== null ? S() : b();
+        onSubmit: (C) => {
+          C.preventDefault(), p !== null ? R() : b();
         },
         className: "space-y-3",
         children: [
@@ -8229,7 +8289,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                   id: "attrKey",
                   ref: j,
                   value: i,
-                  onChange: (R) => c(R.target.value),
+                  onChange: (C) => c(C.target.value),
                   placeholder: "Key",
                   className: "h-8 text-sm"
                 }
@@ -8247,8 +8307,8 @@ const AIUserPrompt = ({ blockId: o }) => {
                   rows: 2,
                   ref: E,
                   value: d,
-                  onChange: (R) => u(R.target.value),
-                  onKeyDown: B,
+                  onChange: (C) => u(C.target.value),
+                  onKeyDown: _,
                   placeholder: "Value",
                   className: "bg-background text-sm"
                 }
@@ -8260,22 +8320,22 @@ const AIUserPrompt = ({ blockId: o }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((R, A) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((C, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mr-2 flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-semibold", children: R.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: R.value.toString() })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-semibold", children: C.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: C.value.toString() })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => _(A), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(B), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Edit attribute" })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(A), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(B), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Remove attribute" })
         ] })
       ] })
-    ] }, A)) })
+    ] }, B)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8346,43 +8406,43 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
   }
 ), WEB_BREAKPOINTS = [
   {
-    title: "mobile_xs_title",
-    content: "mobile_xs_content",
+    title: "Mobile (XS)",
+    content: "Styles set here are applied to all screen unless edited at higher breakpoint",
     breakpoint: "xs",
     icon: /* @__PURE__ */ jsxRuntimeExports.jsx(MobileIcon, {}),
     width: 400
   },
   {
-    title: "mobile_sm_title",
-    content: "mobile_sm_content",
+    title: "Mobile landscape (SM)",
+    content: "Styles set here are applied at 640px and up unless edited at higher breakpoint",
     breakpoint: "sm",
     icon: /* @__PURE__ */ jsxRuntimeExports.jsx(MobileIcon, { className: "rotate-90" }),
     width: 640
   },
   {
-    title: "tablet_md_title",
-    content: "tablet_md_content",
+    title: "Tablet (MD)",
+    content: "Styles set here are applied at 768px and up",
     breakpoint: "md",
     icon: /* @__PURE__ */ jsxRuntimeExports.jsx(TabletIcon, {}),
     width: 800
   },
   {
-    title: "tablet_lg_title",
-    content: "tablet_lg_content",
+    title: "Tablet Landscape (LG)",
+    content: "Styles set here are applied at 1024px and up unless edited at higher breakpoint",
     breakpoint: "lg",
     icon: /* @__PURE__ */ jsxRuntimeExports.jsx(TabletIcon, { landscape: !0 }),
     width: 1024
   },
   {
-    title: "desktop_xl_title",
-    content: "desktop_xl_content",
+    title: "Desktop (XL)",
+    content: "Styles set here are applied at 1280px and up unless edited at higher breakpoint",
     breakpoint: "xl",
     icon: /* @__PURE__ */ jsxRuntimeExports.jsx(LaptopIcon, {}),
     width: 1420
   },
   {
-    title: "large_desktop_2xl_title",
-    content: "large_desktop_2xl_content",
+    title: "Large Desktop (2XL)",
+    content: "Styles set here are applied at 1536px and up",
     breakpoint: "2xl",
     icon: /* @__PURE__ */ jsxRuntimeExports.jsx(DesktopIcon, {}),
     width: 1920
@@ -8451,7 +8511,7 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { className: "border-border", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTitle, { className: "text-foreground", children: o("Clear Canvas") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTitle, { className: "text-foreground", children: o("Clear whole canvas? ") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogDescription, { children: o("Are you sure you want to clear the page?") })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogFooter, { children: [
@@ -8460,43 +8520,6 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       ] })
     ] })
   ] }) });
-}, LanguageSelector = () => {
-  const { fallbackLang: o, languages: n, selectedLang: r, setSelectedLang: a } = useLanguages(), l = (r == null ? void 0 : r.length) > 0 ? r : o, i = useMemo(() => {
-    const c = [];
-    return forEach(uniq([o, ...n]), (d) => {
-      const u = get(LANGUAGES, d);
-      u && c.push({ key: d, value: u, default: d === o });
-    }), c;
-  }, [o, n]);
-  return isEmpty(n) && l === "en" ? null : isEmpty(n) && l !== "en" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(FaLanguage, { className: "h-4 w-4" }),
-    get(LANGUAGES, l)
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1 text-blue-500 hover:text-blue-600", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(FaLanguage, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          " ",
-          get(LANGUAGES, l)
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDownIcon, { className: "h-4 w-4" })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuContent, { className: "border-border", children: map(i, (c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      DropdownMenuItem,
-      {
-        className: cn(
-          "flex cursor-pointer items-center text-sm",
-          c.key === l && "!bg-blue-500 text-white hover:!text-white"
-        ),
-        onClick: () => a(c.key),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: c.value }),
-          c.key === o ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaStar, { className: "ml-2 h-4 w-4 text-yellow-400" }) : null
-        ]
-      }
-    )) })
-  ] });
 }, CanvasTopBar = () => {
   const o = useBuilderProp("darkMode", !0), [n] = useCanvasZoom();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-10 items-center justify-between border-b border-border bg-background/70 px-2", children: [
@@ -8518,10 +8541,7 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { orientation: "vertical" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(UndoRedo, {})
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(LanguageSelector, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ClearCanvas, {})
-    ] })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClearCanvas, {}) })
   ] });
 };
 function BlockAttributesToggle() {
@@ -8545,7 +8565,7 @@ const SettingsPanel = () => {
   const o = useSelectedBlock(), { t: n } = useTranslation(), r = useBuilderProp("onError", noop);
   return isNull(o) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 rounded-xl p-4 text-muted-foreground", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(MixerHorizontalIcon, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: n("please_select_a_block_to_edit") })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: n("Please select a block to edit settings or styles") })
   ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex max-h-full w-full flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(BlockSettings, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8684,7 +8704,7 @@ const ChooseLayout = ({ open: o, close: n }) => {
   }, [o]), o ? /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { onOpenChange: (c) => c ? "" : n(), defaultOpen: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "border-border", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogTitle, { className: "text-foreground", children: [
-        r("data_provider"),
+        r("Data Provider"),
         ": ",
         o.name
       ] }),
@@ -8718,14 +8738,14 @@ function RemoveProviderConfirmation({
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           AlertDialogTitle,
           {
-            dangerouslySetInnerHTML: { __html: a("remove_provider_confirmation").replace("{name}", n) }
+            dangerouslySetInnerHTML: { __html: a("Remove Provider Confirmation").replace("{name}", n) }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogDescription, { children: a("remove_provider_warning") })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogDescription, { children: a("Your data provider will be removed from this page and all added data binding will be not visible on blocks.") })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogCancel, { children: a("cancel") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogAction, { onClick: r, className: "bg-red-600 hover:bg-red-700", children: a("remove") })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogCancel, { children: a("Cancel") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogAction, { onClick: r, className: "bg-red-600 hover:bg-red-700", children: a("Remove") })
       ] })
     ] })
   ] });
@@ -8738,28 +8758,28 @@ const PageDataProviders = () => {
     (b) => !isNull(b)
   ), x = (b) => {
     const k = find(n, { providerKey: b });
-    c((_) => [..._, k]), a((_) => [..._, { providerKey: k.providerKey, args: {} }]), u(""), l("UNSAVED");
+    c((S) => [...S, k]), a((S) => [...S, { providerKey: k.providerKey, args: {} }]), u(""), l("UNSAVED");
   }, j = (b) => {
-    c((k) => filter(k, (_) => _.providerKey !== b.providerKey)), a((k) => filter(k, (_) => _.providerKey !== b.providerKey)), l("UNSAVED");
+    c((k) => filter(k, (S) => S.providerKey !== b.providerKey)), a((k) => filter(k, (S) => S.providerKey !== b.providerKey)), l("UNSAVED");
   }, E = (b) => m(b);
   return isEmpty(n) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 p-4 text-xs text-gray-500", children: [
-    o("no_data_providers"),
+    o("You have no data providers registered. Please add a data provider to your project."),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: o("learn_more") })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: o("Learn more") })
   ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-1.5 text-xs text-gray-500", children: o("add_data_providers") }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: d, onValueChange: (b) => x(b), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: o("select_provider") }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-1.5 text-xs text-gray-500", children: o("Add data providers:") }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Select$1, { value: d, onValueChange: (b) => x(b), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: o("Select a provider") }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "", children: o("choose") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "", children: o("Choose") }),
         g.map((b) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: b.value, children: b.label }, b.value))
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `border-t border-border ${i.length ? "block" : "hidden"}`, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "flex-1 pb-1.5 pt-4 text-xs font-medium text-gray-500", children: [
-        o("page_data_providers"),
+        o("Page Data Providers"),
         ":"
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: i.map((b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -8798,7 +8818,7 @@ const PageDataProviders = () => {
                         ]
                       }
                     ),
-                    o("view_data")
+                    o("View Data")
                   ]
                 }
               ),
@@ -8823,7 +8843,7 @@ const PageDataProviders = () => {
                     ]
                   }
                 ),
-                o("remove")
+                o("Remove")
               ] }) })
             ] })
           ]
@@ -8837,22 +8857,22 @@ const PageDataProviders = () => {
 function AiFillDatabase(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M832 64H192c-17.7 0-32 14.3-32 32v224h704V96c0-17.7-14.3-32-32-32zM288 232c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM160 928c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V704H160v224zm128-136c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zM160 640h704V384H160v256zm128-168c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40z" }, child: [] }] })(o);
 }
-const TopBar = lazy(() => import("./Topbar-lJgYu8sz.js"));
+const TopBar = lazy(() => import("./Topbar-ehvnRhOq.js"));
 function useSidebarMenuItems(o) {
   const n = o === "SINGLE_SIDE_PANEL", { t: r } = useTranslation(), a = useBuilderProp("dataBindingSupport", !1), l = useBuilderProp("askAiCallBack", null);
   return useMemo(() => {
     const i = [
       {
         icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Layers, { size: 20 }),
-        label: "sidebar.outline",
+        label: "Outline",
         component: () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Outline$1, {}) })
       },
-      n ? { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(GearIcon, { className: "size-5" }), label: "sidebar.edit_block", component: SettingsPanel$1 } : null,
+      n ? { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(GearIcon, { className: "size-5" }), label: "Edit Block", component: SettingsPanel$1 } : null,
       a ? { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AiFillDatabase, { className: "size-3" }), label: r("Data Providers"), component: PageDataProviders } : null,
-      l ? { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(LightningBoltIcon, { className: "size-5" }), label: "sidebar.ai_assistant", component: AskAI } : null,
+      l ? { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(LightningBoltIcon, { className: "size-5" }), label: "AI Assistant", component: AskAI } : null,
       {
         icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PaintBucketIcon, { size: 20 }),
-        label: "sidebar.theme",
+        label: "Theme",
         component: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeOptions, { showHeading: !1 })
       }
     ];
@@ -8964,7 +8984,7 @@ const RootLayout = () => {
   return o ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("fixed inset-0 z-[999] bg-background", o ? "block" : "hidden"), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { size: "sm", className: "absolute right-0 top-0 m-4 space-x-2", onClick: () => n(!1), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(EyeClosedIcon, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: r("close_preview") })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: r("Close Preview") })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: a ? /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-96 w-full" }), children: React__default.createElement(a) }) : null })
   ] }) : null;
@@ -9021,69 +9041,72 @@ const RootLayout = () => {
   ] }) }) });
 };
 export {
-  useSelectedBlockCurrentClasses as $,
+  usePasteBlocks as $,
   AddBlocksPanel$1 as A,
   BlockSettings as B,
   ChaiSelect$1 as C,
   DefaultChaiBlocks as D,
-  useBuilderReset as E,
+  useGlobalBlocksStore as E,
   FaCheck as F,
-  useAddBlock as G,
-  useAddClassesToBlocks as H,
+  useBlocksStore as G,
+  useUndoManager as H,
   ImportHTML$1 as I,
-  useCanvasWidth as J,
-  useCanvasZoom as K,
-  useCopyBlockIds as L,
-  useCopyToClipboard as M,
-  useCurrentPage as N,
+  useBuilderReset as J,
+  useAddBlock as K,
+  LANGUAGES as L,
+  useAddClassesToBlocks as M,
+  useCanvasWidth as N,
   Outline$1 as O,
-  useCutBlockIds as P,
-  useDarkMode as Q,
-  useDuplicateBlocks as R,
-  useHiddenBlockIds as S,
+  useCanvasZoom as P,
+  useCopyBlockIds as Q,
+  useCopyToClipboard as R,
+  useCurrentPage as S,
   ThemeOptions as T,
   UILibraries as U,
-  useHighlightBlockId as V,
-  useBlockHighlight as W,
-  usePasteBlocks as X,
-  useBrandingOptions as Y,
-  useRemoveBlocks as Z,
-  useRemoveClassesFromBlocks as _,
+  useCutBlockIds as V,
+  useDarkMode as W,
+  useDuplicateBlocks as X,
+  useHiddenBlockIds as Y,
+  useHighlightBlockId as Z,
+  useBlockHighlight as _,
   useSelectedBlockIds as a,
-  useSelectedBlockAllClasses as a0,
-  useSelectedBlock as a1,
-  useStylingBreakpoint as a2,
-  useUILibraryBlocks as a3,
-  useStylingState as a4,
-  useSelectedBlocksDisplayChild as a5,
-  useSelectedBreakpoints as a6,
-  useSelectedStylingBlocks as a7,
-  useLanguages as a8,
-  useLayoutVariant as a9,
-  useBlocksStoreUndoableActions as aa,
+  useBrandingOptions as a0,
+  useRemoveBlocks as a1,
+  useRemoveClassesFromBlocks as a2,
+  useSelectedBlockCurrentClasses as a3,
+  useSelectedBlockAllClasses as a4,
+  useSelectedBlock as a5,
+  useStylingBreakpoint as a6,
+  useUILibraryBlocks as a7,
+  useStylingState as a8,
+  useSelectedBlocksDisplayChild as a9,
+  useSelectedBreakpoints as aa,
+  useSelectedStylingBlocks as ab,
+  useLayoutVariant as ac,
+  useBlocksStoreUndoableActions as ad,
   useUpdateBlocksProps as b,
   useUpdateBlocksPropsRealtime as c,
   useBuilderProp as d,
   useSavePage as e,
   usePreviewMode as f,
-  CanvasArea$1 as g,
-  BlockStyling as h,
-  AddBlocksDialog as i,
-  emitChaiBuilderMsg as j,
-  useChaiBuilderMsgListener as k,
-  CHAI_BUILDER_EVENTS as l,
-  AISetContext as m,
-  AIUserPrompt as n,
-  BlockAttributesEditor as o,
-  ChaiBuilderEditor as p,
-  DarkMode as q,
-  Breakpoints as r,
-  UndoRedo as s,
-  getClassValueAndUnit as t,
+  useLanguages as g,
+  FaLanguage as h,
+  FaStar as i,
+  CanvasArea$1 as j,
+  BlockStyling as k,
+  AddBlocksDialog as l,
+  emitChaiBuilderMsg as m,
+  useChaiBuilderMsgListener as n,
+  CHAI_BUILDER_EVENTS as o,
+  AISetContext as p,
+  AIUserPrompt as q,
+  BlockAttributesEditor as r,
+  ChaiBuilderEditor as s,
+  DarkMode as t,
   useCodeEditor as u,
-  getBlocksFromHTML as v,
-  useGlobalBlocksList as w,
-  useGlobalBlocksStore as x,
-  useBlocksStore as y,
-  useUndoManager as z
+  Breakpoints as v,
+  UndoRedo as w,
+  getClassValueAndUnit as x,
+  getBlocksFromHTML as y,
+  useGlobalBlocksList as z
 };