@chaibuilder/sdk 1.2.46 → 1.2.48

package/dist/{CanvasArea-2widR9Ry.js → CanvasArea-HRipTJFS.js}

@@ -1,31 +1,31 @@
 var He = Object.defineProperty;
-var ze = (n, s, e) => s in n ? He(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
-var N = (n, s, e) => (ze(n, typeof s != "symbol" ? s + "" : s, e), e);
+var Pe = (n, s, e) => s in n ? He(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
+var E = (n, s, e) => (Pe(n, typeof s != "symbol" ? s + "" : s, e), e);
 import { j as r } from "./jsx-runtime-WbnYoNE9.js";
-import M, { createElement as ne, useCallback as z, useState as C, useEffect as w, Component as me, Children as Oe, Suspense as ge, useRef as re, useMemo as Ue } from "react";
-import { map as R, includes as ie, toUpper as Y, round as We, throttle as fe, has as xe, isEmpty as A, first as O, omit as qe, pick as Ke, get as f, isString as G, memoize as Ye, each as Qe, find as Xe, filter as ve, isNull as Ze } from "lodash-es";
-import { ResetIcon as ae, MobileIcon as le, LaptopIcon as Je, DesktopIcon as Ge, DotsVerticalIcon as Ve, EraserIcon as et, ZoomInIcon as tt, DragHandleDots2Icon as st, ArrowUpIcon as ot, CopyIcon as nt, TrashIcon as rt } from "@radix-ui/react-icons";
-import { j as $e, B as U, v as ye, aq as be, ar as ke, as as it, at, au as lt, o as V, X as ct, h as P, av as dt, aw as pt, ax as ut, ay as ht, az as mt, aA as gt, aB as we, L as B, Y as E, A as ft, a as xt, b as vt, c as $t, d as yt, e as bt, f as kt, g as wt, a3 as jt, aC as Ct, p as je, ap as H, aD as Bt, m as Dt, z as T, aE as Ce, Q as _t, aF as L, aG as At, i as ee, w as Be, E as De, H as _e, V as It, aH as St, aI as Nt, aJ as Mt, F as Et, aK as Tt, aL as Lt, aM as Ft, aN as Rt, M as Pt, aO as Ht, ah as Ae, a2 as zt } from "./ChaiBuilderEditor-wriVkIG1.js";
-import { useTranslation as W } from "react-i18next";
+import M, { createElement as ae, useCallback as O, useState as C, useEffect as w, Component as xe, Children as ze, Suspense as ve, useRef as le, useMemo as Oe } from "react";
+import { map as H, includes as ce, toUpper as X, round as Ue, throttle as $e, has as ye, isEmpty as A, first as U, omit as We, pick as qe, get as f, isString as ee, memoize as Ke, each as Ye, find as Ge, filter as be, isNull as Xe } from "lodash-es";
+import { ResetIcon as de, SunIcon as Qe, MoonIcon as Ze, MobileIcon as pe, LaptopIcon as Je, DesktopIcon as Ve, DotsVerticalIcon as et, EraserIcon as tt, ZoomInIcon as st, DragHandleDots2Icon as ot, ArrowUpIcon as nt, CopyIcon as rt, TrashIcon as it } from "@radix-ui/react-icons";
+import { j as ke, B as W, v as we, aq as je, ar as at, as as lt, at as ct, o as te, X as dt, h as P, au as pt, av as ut, aw as ht, ax as mt, ay as gt, az as ft, aA as Ce, L as D, Y as N, A as xt, a as vt, b as $t, c as yt, d as bt, e as kt, f as wt, g as jt, a3 as Ct, aB as Dt, aC as _t, p as De, ap as z, aD as Bt, m as At, z as T, aE as _e, Q as It, aF as L, aG as St, i as se, w as Be, E as Ae, H as Ie, V as Et, aH as Mt, aI as Nt, aJ as Tt, F as Lt, aK as Ft, aL as Rt, aM as Ht, aN as Pt, M as zt, aO as Ot, ah as Se, a2 as Ut } from "./ChaiBuilderEditor-dKHRL-Es.js";
+import { useTranslation as oe } from "react-i18next";
 import { useAtom as y } from "jotai";
-import { SparklesIcon as Ot } from "lucide-react";
-import ce from "react-dom";
+import { SparklesIcon as Wt } from "lucide-react";
+import ue from "react-dom";
 import k from "prop-types";
-import { Quill as Ut } from "react-quill";
-import { d as te, a as Ie } from "./atoms-ZOWyNoiC.js";
-import { flip as Wt } from "@floating-ui/dom";
-import { useFloating as qt, shift as Kt } from "@floating-ui/react-dom";
-import { useResizeObserver as Yt } from "@react-hookz/web";
+import { Quill as qt } from "react-quill";
+import { d as ne, a as Ee } from "./atoms-ZOWyNoiC.js";
+import { flip as Kt } from "@floating-ui/dom";
+import { useFloating as Yt, shift as Gt } from "@floating-ui/react-dom";
+import { useResizeObserver as Xt } from "@react-hookz/web";
 import { useFeature as Qt } from "flagged";
-import Xt from "@tailwindcss/typography";
-import Zt from "@tailwindcss/forms";
-import Jt from "@tailwindcss/aspect-ratio";
-import Gt from "tailwindcss-palette-generator";
-import { twMerge as Vt } from "tailwind-merge";
-import { S as de, a as Se } from "./STRINGS--j49GZJP.js";
-import { getBlockComponent as es } from "@chaibuilder/runtime";
-import { u as ts } from "./useCanvasSettings-L2pW5boY.js";
-import { Provider as ss } from "react-wrap-balancer";
+import Zt from "@tailwindcss/typography";
+import Jt from "@tailwindcss/forms";
+import Vt from "@tailwindcss/aspect-ratio";
+import es from "tailwindcss-palette-generator";
+import { twMerge as ts } from "tailwind-merge";
+import { S as he, a as Me } from "./STRINGS--j49GZJP.js";
+import { getBlockComponent as ss } from "@chaibuilder/runtime";
+import { u as os } from "./useCanvasSettings-UzjYHFG5.js";
+import { Provider as ns } from "react-wrap-balancer";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "clsx";
 import "@radix-ui/react-scroll-area";
@@ -55,43 +55,39 @@ import "cmdk";
 import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-hotkeys-hook";
-const os = () => {
-  const { hasUndo: n, hasRedo: s, undo: e, redo: t } = $e();
+const rs = () => {
+  const { hasUndo: n, hasRedo: s, undo: e, redo: t } = ke();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ r.jsx(U, { disabled: !n(), size: "sm", onClick: e, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(ae, {}) }),
-    /* @__PURE__ */ r.jsx(U, { disabled: !s(), onClick: t, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(ae, { className: "rotate-180 scale-y-[-1] transform" }) })
+    /* @__PURE__ */ r.jsx(W, { disabled: !n(), size: "sm", onClick: e, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(de, {}) }),
+    /* @__PURE__ */ r.jsx(W, { disabled: !s(), onClick: t, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(de, { className: "rotate-180 scale-y-[-1] transform" }) })
   ] });
 };
-function ns() {
-  const [n, s] = ye(), { t: e } = W();
+function is() {
+  const [n, s] = we();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ r.jsx(be, { htmlFor: "dark-mode-switch", children: e("dark_mode") }),
-    /* @__PURE__ */ r.jsxs(
-      ke,
+    /* @__PURE__ */ r.jsx(Qe, { className: "size-4 shrink-0" }),
+    /* @__PURE__ */ r.jsx(
+      je,
       {
         id: "dark-mode-switch",
         checked: n,
         onCheckedChange: () => {
           s(!n);
         },
-        className: `${n ? "bg-violet-600" : "bg-violet-300"}
-          relative ml-2 inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`,
-        children: [
-          /* @__PURE__ */ r.jsx("span", { className: "sr-only", children: e("use_setting") }),
-          /* @__PURE__ */ r.jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: `${n ? "translate-x-5" : "translate-x-0"}
-            pointer-events-none -mt-px inline-block h-[18px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`
-            }
-          )
-        ]
+        className: `${n ? "bg-violet-600" : "bg-violet-300"} relative ml-2 inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`,
+        children: /* @__PURE__ */ r.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `${n ? "translate-x-5" : "translate-x-0"} pointer-events-none -mt-px inline-block h-[18px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`
+          }
+        )
       }
-    )
+    ),
+    /* @__PURE__ */ r.jsx(Ze, { className: "size-4 ml-3 shrink-0" })
   ] });
 }
-const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
+const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
   "svg",
   {
     className: n ? "rotate-90" : "",
@@ -114,33 +110,33 @@ const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       )
     ]
   }
-), rs = [
+), as = [
   {
     title: "mobile_xs_title",
     content: "mobile_xs_content",
     breakpoint: "xs",
-    icon: /* @__PURE__ */ r.jsx(le, {}),
+    icon: /* @__PURE__ */ r.jsx(pe, {}),
     width: 400
   },
   {
     title: "mobile_sm_title",
     content: "mobile_sm_content",
     breakpoint: "sm",
-    icon: /* @__PURE__ */ r.jsx(le, { className: "rotate-90" }),
+    icon: /* @__PURE__ */ r.jsx(pe, { className: "rotate-90" }),
     width: 640
   },
   {
     title: "tablet_md_title",
     content: "tablet_md_content",
     breakpoint: "md",
-    icon: /* @__PURE__ */ r.jsx(pe, {}),
+    icon: /* @__PURE__ */ r.jsx(me, {}),
     width: 800
   },
   {
     title: "tablet_lg_title",
     content: "tablet_lg_content",
     breakpoint: "lg",
-    icon: /* @__PURE__ */ r.jsx(pe, { landscape: !0 }),
+    icon: /* @__PURE__ */ r.jsx(me, { landscape: !0 }),
     width: 1024
   },
   {
@@ -154,10 +150,10 @@ const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     title: "large_desktop_2xl_title",
     content: "large_desktop_2xl_content",
     breakpoint: "2xl",
-    icon: /* @__PURE__ */ r.jsx(Ge, {}),
+    icon: /* @__PURE__ */ r.jsx(Ve, {}),
     width: 1920
   }
-], ue = ({
+], ge = ({
   title: n,
   content: s,
   currentBreakpoint: e,
@@ -166,10 +162,10 @@ const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
   icon: c,
   onClick: a
 }) => {
-  const { t: i } = W();
-  return /* @__PURE__ */ r.jsxs(it, { children: [
-    /* @__PURE__ */ r.jsx(at, { asChild: !0, children: /* @__PURE__ */ r.jsx(
-      U,
+  const { t: i } = oe();
+  return /* @__PURE__ */ r.jsxs(at, { children: [
+    /* @__PURE__ */ r.jsx(lt, { asChild: !0, children: /* @__PURE__ */ r.jsx(
+      W,
       {
         onClick: () => a(o),
         size: "sm",
@@ -177,31 +173,31 @@ const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
         children: c
       }
     ) }),
-    /* @__PURE__ */ r.jsx(lt, { className: "w-52 border-border", children: /* @__PURE__ */ r.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ r.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ r.jsx(ct, { className: "w-52 border-border", children: /* @__PURE__ */ r.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ r.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ r.jsx("h4", { className: "text-sm font-semibold", children: i(n) }),
       /* @__PURE__ */ r.jsx("p", { className: "text-xs", children: i(s) })
     ] }) }) })
   ] });
-}, is = () => {
-  const [, n, s] = V(), [e, t] = ct(), { t: o } = W(), c = P("breakpoints", rs), a = (i) => {
+}, ls = () => {
+  const [, n, s] = te(), [e, t] = dt(), { t: o } = oe(), c = P("breakpoints", as), a = (i) => {
     e.includes(i) ? e.length > 2 && t(e.filter((d) => d !== i)) : t((d) => [...d, i]);
   };
-  return c.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: R(c, (i) => /* @__PURE__ */ ne(ue, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
-    R(
-      c.filter((i) => ie(e, Y(i.breakpoint))),
-      (i) => /* @__PURE__ */ ne(ue, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })
+  return c.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: H(c, (i) => /* @__PURE__ */ ae(ge, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
+    H(
+      c.filter((i) => ce(e, X(i.breakpoint))),
+      (i) => /* @__PURE__ */ ae(ge, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })
     ),
-    /* @__PURE__ */ r.jsxs(dt, { children: [
-      /* @__PURE__ */ r.jsx(pt, { asChild: !0, children: /* @__PURE__ */ r.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ r.jsx(Ve, { className: "scale-90 transform" }) }) }),
-      /* @__PURE__ */ r.jsxs(ut, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ r.jsx(ht, { children: o("Breakpoints") }),
-        /* @__PURE__ */ r.jsx(mt, {}),
-        R(c, (i) => /* @__PURE__ */ r.jsx(
-          gt,
+    /* @__PURE__ */ r.jsxs(pt, { children: [
+      /* @__PURE__ */ r.jsx(ut, { asChild: !0, children: /* @__PURE__ */ r.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ r.jsx(et, { className: "scale-90 transform" }) }) }),
+      /* @__PURE__ */ r.jsxs(ht, { className: "w-56 border-border text-xs", children: [
+        /* @__PURE__ */ r.jsx(mt, { children: o("Breakpoints") }),
+        /* @__PURE__ */ r.jsx(gt, {}),
+        H(c, (i) => /* @__PURE__ */ r.jsx(
+          ft,
           {
             disabled: i.breakpoint === "xs",
-            onCheckedChange: () => a(Y(i.breakpoint)),
-            checked: ie(e, Y(i.breakpoint)),
+            onCheckedChange: () => a(X(i.breakpoint)),
+            checked: ce(e, X(i.breakpoint)),
             children: o(i.title)
           },
           i.breakpoint
@@ -209,36 +205,36 @@ const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       ] })
     ] })
   ] });
-}, as = () => {
-  const { t: n } = W(), { setNewBlocks: s } = we(), [, e] = B(), [, t] = E(), o = z(() => {
+}, cs = () => {
+  const { t: n } = oe(), { setNewBlocks: s } = Ce(), [, e] = D(), [, t] = N(), o = O(() => {
     s([]), e([]), t([]);
   }, [s]);
-  return /* @__PURE__ */ r.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ r.jsxs(ft, { children: [
-    /* @__PURE__ */ r.jsx(xt, { asChild: !0, children: /* @__PURE__ */ r.jsxs(U, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
-      /* @__PURE__ */ r.jsx(et, {}),
+  return /* @__PURE__ */ r.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ r.jsxs(xt, { children: [
+    /* @__PURE__ */ r.jsx(vt, { asChild: !0, children: /* @__PURE__ */ r.jsxs(W, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ r.jsx(tt, {}),
       " ",
       n("clear")
     ] }) }),
-    /* @__PURE__ */ r.jsxs(vt, { className: "border-border", children: [
-      /* @__PURE__ */ r.jsxs($t, { children: [
-        /* @__PURE__ */ r.jsx(yt, { children: n("clear_canvas_title") }),
-        /* @__PURE__ */ r.jsx(bt, { children: n("clear_canvas_description") })
+    /* @__PURE__ */ r.jsxs($t, { className: "border-border", children: [
+      /* @__PURE__ */ r.jsxs(yt, { children: [
+        /* @__PURE__ */ r.jsx(bt, { children: n("clear_canvas_title") }),
+        /* @__PURE__ */ r.jsx(kt, { children: n("clear_canvas_description") })
       ] }),
-      /* @__PURE__ */ r.jsxs(kt, { children: [
-        /* @__PURE__ */ r.jsx(wt, { children: n("cancel") }),
-        /* @__PURE__ */ r.jsx(jt, { onClick: o, children: n("yes") })
+      /* @__PURE__ */ r.jsxs(wt, { children: [
+        /* @__PURE__ */ r.jsx(jt, { children: n("cancel") }),
+        /* @__PURE__ */ r.jsx(Ct, { onClick: o, children: n("yes") })
       ] })
     ] })
   ] }) });
-}, ls = () => {
-  const [n, s] = y(Ct);
+}, ds = () => {
+  const [n, s] = y(Dt);
   return P("askAiCallBack", null) ? /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ r.jsxs(be, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
-      /* @__PURE__ */ r.jsx(Ot, { className: "w-4" }),
+    /* @__PURE__ */ r.jsxs(_t, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
+      /* @__PURE__ */ r.jsx(Wt, { className: "w-4" }),
       "AI Assistant"
     ] }),
     /* @__PURE__ */ r.jsx(
-      ke,
+      je,
       {
         className: "scale-90",
         checked: n,
@@ -249,34 +245,34 @@ const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       }
     )
   ] }) : null;
-}, cs = () => {
-  const n = P("darkMode", !1), [s] = je();
+}, ps = () => {
+  const n = P("darkMode", !0), [s] = De();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex h-10 items-center justify-between border-b bg-background/70 px-2", children: [
     /* @__PURE__ */ r.jsxs("div", { className: "flex h-full space-x-2", children: [
+      /* @__PURE__ */ r.jsx(ls, {}),
+      /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
       n ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        /* @__PURE__ */ r.jsx(ns, {}),
-        /* @__PURE__ */ r.jsx(H, { orientation: "vertical" })
+        /* @__PURE__ */ r.jsx(is, {}),
+        /* @__PURE__ */ r.jsx(z, { orientation: "vertical" })
       ] }) : null,
-      /* @__PURE__ */ r.jsx(is, {}),
-      /* @__PURE__ */ r.jsx(H, { orientation: "vertical" }),
       /* @__PURE__ */ r.jsxs("div", { className: "flex w-12 cursor-not-allowed items-center justify-center gap-x-1 space-x-0 font-medium text-gray-400", children: [
-        /* @__PURE__ */ r.jsx(tt, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ r.jsx(st, { className: "h-3.5 w-3.5 flex-shrink-0" }),
         " ",
         /* @__PURE__ */ r.jsxs("div", { className: "text-xs leading-3", children: [
-          We(s, 0),
+          Ue(s, 0),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ r.jsx(H, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(os, {})
+      /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx(rs, {})
     ] }),
     /* @__PURE__ */ r.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ r.jsx(as, {}),
-      /* @__PURE__ */ r.jsx(H, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(ls, {})
+      /* @__PURE__ */ r.jsx(cs, {}),
+      /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx(ds, {})
     ] })
   ] });
-}, ds = `<!doctype html>
+}, us = `<!doctype html>
 <html lang="en" dir="__HTML_DIR__" class="scroll-smooth h-full overflow-y-auto">
   <head>
     <meta charset="UTF-8">
@@ -326,8 +322,8 @@ const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     <div class="frame-root h-full"></div>
     <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
   </body>
-</html>`, ps = (n) => {
-  const [s] = V(), [, e] = je(), [t, o] = C({}), c = z(() => {
+</html>`, hs = (n) => {
+  const [s] = te(), [, e] = De(), [t, o] = C({}), c = O(() => {
     const { width: a, height: i } = n;
     if (a < s) {
       const d = parseFloat((a / s).toFixed(2).toString());
@@ -351,11 +347,11 @@ const pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     c();
   }, [s, n, e, c]), t;
 };
-let Ne, Me;
+let Ne, Te;
 typeof document < "u" && (Ne = document);
-typeof window < "u" && (Me = window);
-const Ee = M.createContext({ document: Ne, window: Me }), q = () => M.useContext(Ee), { Provider: us, Consumer: Ho } = Ee;
-class Te extends me {
+typeof window < "u" && (Te = window);
+const Le = M.createContext({ document: Ne, window: Te }), q = () => M.useContext(Le), { Provider: ms, Consumer: Oo } = Le;
+class Fe extends xe {
   componentDidMount() {
     this.props.contentDidMount();
   }
@@ -363,28 +359,28 @@ class Te extends me {
     this.props.contentDidUpdate();
   }
   render() {
-    return Oe.only(this.props.children);
+    return ze.only(this.props.children);
   }
 }
-N(Te, "propTypes", {
+E(Fe, "propTypes", {
   children: k.element.isRequired,
   contentDidMount: k.func.isRequired,
   contentDidUpdate: k.func.isRequired
 });
-class Z extends me {
+class J extends xe {
   constructor(e, t) {
     super(e, t);
-    N(this, "setRef", (e) => {
+    E(this, "setRef", (e) => {
       this.nodeRef.current = e;
       const { forwardedRef: t } = this.props;
       typeof t == "function" ? t(e) : t && (t.current = e);
     });
-    N(this, "handleLoad", () => {
+    E(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
-    N(this, "loadCheck", () => setInterval(() => {
+    E(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = M.createRef(), this.state = { iframeLoaded: !1 };
@@ -408,8 +404,8 @@ class Z extends me {
     const e = this.getDoc();
     if (!e)
       return null;
-    const t = this.props.contentDidMount, o = this.props.contentDidUpdate, c = e.defaultView || e.parentView, a = /* @__PURE__ */ r.jsx(Te, { contentDidMount: t, contentDidUpdate: o, children: /* @__PURE__ */ r.jsx(us, { value: { document: e, window: c }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), i = this.getMountTarget();
-    return [ce.createPortal(this.props.head, this.getDoc().head), ce.createPortal(a, i)];
+    const t = this.props.contentDidMount, o = this.props.contentDidUpdate, c = e.defaultView || e.parentView, a = /* @__PURE__ */ r.jsx(Fe, { contentDidMount: t, contentDidUpdate: o, children: /* @__PURE__ */ r.jsx(ms, { value: { document: e, window: c }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), i = this.getMountTarget();
+    return [ue.createPortal(this.props.head, this.getDoc().head), ue.createPortal(a, i)];
   }
   render() {
     const e = {
@@ -425,7 +421,7 @@ class Z extends me {
 // 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.
-N(Z, "propTypes", {
+E(J, "propTypes", {
   style: k.object,
   // eslint-disable-line
   head: k.node,
@@ -434,7 +430,7 @@ N(Z, "propTypes", {
   contentDidMount: k.func,
   contentDidUpdate: k.func,
   children: k.oneOfType([k.element, k.arrayOf(k.element)])
-}), N(Z, "defaultProps", {
+}), E(J, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -445,8 +441,8 @@ N(Z, "propTypes", {
   },
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
-const hs = M.forwardRef((n, s) => /* @__PURE__ */ r.jsx(Z, { ...n, forwardedRef: s }));
-function se(n) {
+const gs = M.forwardRef((n, s) => /* @__PURE__ */ r.jsx(J, { ...n, forwardedRef: s }));
+function re(n) {
   const s = window.getComputedStyle(n), e = s.display;
   if (e === "flex") {
     const t = s.flexDirection;
@@ -458,79 +454,79 @@ function se(n) {
     return "vertical";
   return "horizontal";
 }
-let D = null, _ = [], F = null, Q = null;
-const he = (n, s, e) => {
-  if (!D || !n)
+let _ = null, B = [], R = null, Q = null;
+const fe = (n, s, e) => {
+  if (!_ || !n)
     return;
-  const t = D == null ? void 0 : D.getElementById("placeholder"), c = _.map(([i]) => i).reduce(
+  const t = _ == null ? void 0 : _.getElementById("placeholder"), c = B.map(([i]) => i).reduce(
     (i, d) => Math.abs(d - e) < Math.abs(i - e) ? d : i,
     0
   );
-  if (!_[c])
+  if (!B[c])
     return;
-  const a = _[c];
+  const a = B[c];
   t.style.width = s === "vertical" ? a[2] + "px" : "2px", t.style.height = s === "vertical" ? "2px" : a[2] + "px", t.style.display = "block", s === "vertical" ? (t.style.top = a[0] + "px", t.style.left = a[1] + "px") : (t.style.top = a[1] + "px", t.style.left = a[0] + "px");
 };
-function ms(n, s) {
+function fs(n, s) {
   let e = 0, t = 1 / 0;
   return s.forEach((o, c) => {
     const a = Math.abs(o[0] - n);
     a < t && (t = a, e = c);
   }), e;
 }
-const gs = (n) => {
-  const e = se(n) === "horizontal";
-  _ = [], Array.from(n.children).forEach((t) => {
+const xs = (n) => {
+  const e = re(n) === "horizontal";
+  B = [], Array.from(n.children).forEach((t) => {
     if (t.classList.contains("pointer-events-none"))
       return;
     const o = e ? t.offsetLeft : t.offsetTop, c = e ? [t.offsetTop, t.clientHeight] : [t.offsetLeft, t.clientWidth];
-    _.push([o, c[0], c[1]]);
+    B.push([o, c[0], c[1]]);
   });
-}, fs = fe((n) => {
-  const s = n.target, e = se(s);
+}, vs = $e((n) => {
+  const s = n.target, e = re(s);
   if (e === "vertical") {
     const t = n.clientY - s.offsetTop;
-    he(s, e, t);
+    fe(s, e, t);
   } else {
     const t = n.clientX - s.offsetLeft;
-    he(s, e, t);
+    fe(s, e, t);
   }
 }, 200);
-function X() {
-  const n = D == null ? void 0 : D.getElementById("placeholder");
-  n.style.display = "none", xs("pointer-none");
+function Z() {
+  const n = _ == null ? void 0 : _.getElementById("placeholder");
+  n.style.display = "none", $s("pointer-none");
 }
-function xs(n) {
+function $s(n) {
   document.querySelectorAll(`.${n}`).forEach((e) => {
     e.classList.remove(n);
   });
 }
-const vs = () => {
-  const { document: n } = q(), [s, e] = y(Bt), { addCoreBlock: t } = Dt(), [, o] = T(), [, c] = B(), { moveBlocks: a } = we(), [, i] = y(Ce), [d, l] = y(te), [, h] = y(Ie);
-  return D = n, {
+const ys = () => {
+  const { document: n } = q(), [s, e] = y(Bt), { addCoreBlock: t } = At(), [, o] = T(), [, c] = D(), { moveBlocks: a } = Ce(), [, i] = y(_e), [d, l] = y(ne), [, h] = y(Ee);
+  return _ = n, {
     isDragging: s,
     onDragOver: (p) => {
-      p.preventDefault(), p.stopPropagation(), fs(p);
+      p.preventDefault(), p.stopPropagation(), vs(p);
     },
     onDrop: (p) => {
-      F == null || F.classList.remove("drop-target");
-      const u = F, v = se(u) === "vertical" ? p.clientY : p.clientX;
-      Q = ms(v, _);
+      R == null || R.classList.remove("drop-target");
+      const u = R, $ = re(u) === "vertical" ? p.clientY : p.clientX;
+      Q = fs($, B);
       const g = d, m = u.getAttribute("data-block-id");
-      if (!xe(g, "_id")) {
+      if (!ye(g, "_id")) {
         t(g, m === "canvas" ? null : m, Q), setTimeout(() => {
-          X();
-        }, 300), _ = [], e(!1), i(""), l(null), h(null);
+          Z();
+        }, 300), B = [], e(!1), i(""), l(null), h(null);
         return;
       }
       let b = u.getAttribute("data-block-id");
-      b === null && (b = p.target.parentElement.getAttribute("data-block-id")), a([g._id], b, Q), X(), e(!1), i(""), setTimeout(() => X(), 300);
+      b === null && (b = p.target.parentElement.getAttribute("data-block-id")), a([g._id], b, Q), Z(), e(!1), i(""), setTimeout(() => Z(), 300);
     },
     onDragEnter: (p) => {
-      const u = p, x = u.target;
-      F = x;
-      const v = x.getAttribute("data-block-id");
-      h(v), u.stopPropagation(), u.preventDefault(), _ = [], gs(x), x.classList.add("drop-target"), e(!0), o(""), c([]);
+      const u = p, v = u.target;
+      R = v;
+      const $ = v.getAttribute("data-block-id");
+      h($), u.stopPropagation(), u.preventDefault(), B = [], xs(v), v.classList.add("drop-target"), e(!0), o(""), c([]);
     }
     // onDragLeave: (e: DragEvent) => {
     //   const event = e;
@@ -542,43 +538,43 @@ const vs = () => {
     // },
   };
 };
-function oe(n) {
+function ie(n) {
   return n.getAttribute("data-block-id") ? n : n.closest("[data-block-id]");
 }
-function $s(n) {
+function bs(n) {
   n.container.innerHTML = "", n.container.parentNode.removeChild(n.container);
   var s = document.querySelector(".ql-toolbar");
   s && s.parentNode.removeChild(s), n = null;
 }
-const ys = () => {
-  const n = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], s = _t(), [, e] = T(), [t, o] = y(L);
+const ks = () => {
+  const n = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], s = It(), [, e] = T(), [t, o] = y(L);
   return (c) => {
     var p;
     if (t)
       return;
-    const a = oe(c.target), i = a.getAttribute("data-block-type");
+    const a = ie(c.target), i = a.getAttribute("data-block-type");
     if (!i || !n.includes(i))
       return;
     const d = a.cloneNode(!0);
     a.style.display = "none", Array.from(d.attributes).forEach((u) => {
       u.name !== "class" && d.removeAttribute(u.name);
     }), i === "Text" && (d.style.display = "inline-block"), a.parentNode.insertBefore(d, a.nextSibling);
-    const l = new Ut(d, { placeholder: "Type here..." });
+    const l = new qt(d, { placeholder: "Type here..." });
     function h() {
       const u = l.getText(0, l.getLength());
-      s([a.getAttribute("data-block-id")], { content: u }), a.removeAttribute("style"), d.removeEventListener("blur", h, !0), $s(l), o(""), e("");
+      s([a.getAttribute("data-block-id")], { content: u }), a.removeAttribute("style"), d.removeEventListener("blur", h, !0), bs(l), o(""), e("");
     }
     d.addEventListener("blur", h, !0), d.addEventListener("keydown", (u) => {
       (u.key === "Enter" || u.key === "Escape") && h();
     }), l.focus(), (p = d.querySelector(".ql-clipboard")) == null || p.remove(), o(a.getAttribute("data-block-id"));
   };
-}, bs = () => {
-  const [, n] = E(), [s, e] = B(), [, t] = T(), [o] = y(L), [c] = y(At);
+}, ws = () => {
+  const [, n] = N(), [s, e] = D(), [, t] = T(), [o] = y(L), [c] = y(St);
   return (a) => {
     if (o)
       return;
     a.stopPropagation();
-    const i = oe(a.target);
+    const i = ie(a.target);
     if (i != null && i.getAttribute("data-block-id") && (i == null ? void 0 : i.getAttribute("data-block-id")) === "container") {
       e([]), n([]), t("");
       return;
@@ -592,21 +588,21 @@ const ys = () => {
     }
     t("");
   };
-}, ks = fe((n, s) => {
-  const e = oe(n.target);
+}, js = $e((n, s) => {
+  const e = ie(n.target);
   e != null && e.getAttribute("data-style-id") && s(e.getAttribute("data-style-id"));
-}, 100), ws = () => {
+}, 100), Cs = () => {
   const [, n] = T(), [s] = y(L);
   return (e) => {
-    s || ks(e, n);
+    s || js(e, n);
   };
-}, js = ({ children: n }) => {
-  const { document: s } = q(), [e] = B(), [t, o] = E();
+}, Ds = ({ children: n }) => {
+  const { document: s } = q(), [e] = D(), [t, o] = N();
   w(() => {
     setTimeout(() => {
       if (!A(t))
         return;
-      const l = Le(s, O(e));
+      const l = Re(s, U(e));
       if (l) {
         const h = l.getAttribute("data-style-prop");
         if (h) {
@@ -616,7 +612,7 @@ const ys = () => {
       }
     }, 100);
   }, [s, e, o, t]);
-  const c = ys(), a = bs(), i = ws(), d = vs();
+  const c = ks(), a = ws(), i = Cs(), d = ys();
   return /* @__PURE__ */ r.jsx(
     "div",
     {
@@ -625,15 +621,15 @@ const ys = () => {
       onClick: a,
       onDoubleClick: c,
       onMouseMove: i,
-      ...qe(d, "isDragging"),
+      ...We(d, "isDragging"),
       className: "relative mb-5 h-full max-w-full " + (d.isDragging ? "dragging" : ""),
       children: n
     }
   );
-}, Le = (n, s) => n.querySelector(`[data-block-id="${s}"]`), Cs = () => {
-  const { window: n } = q(), [s, e] = B(), [t] = ee(), [, o] = E(), { undo: c, redo: a } = $e(), i = Be(), [, d] = De(), l = _e(), { savePage: h } = It(), [p] = y(L), [, u] = y(St), x = (g) => {
-    g.key === "Enter" && (g.preventDefault(), s.length === 1 && u(O(s)));
-  }, v = (g) => {
+}, Re = (n, s) => n.querySelector(`[data-block-id="${s}"]`), _s = () => {
+  const { window: n } = q(), [s, e] = D(), [t] = se(), [, o] = N(), { undo: c, redo: a } = ke(), i = Be(), [, d] = Ae(), l = Ie(), { savePage: h } = Et(), [p] = y(L), [, u] = y(Mt), v = (g) => {
+    g.key === "Enter" && (g.preventDefault(), s.length === 1 && u(U(s)));
+  }, $ = (g) => {
     const m = t.find((b) => b._id === g);
     return m ? m._parent : null;
   };
@@ -643,10 +639,10 @@ const ys = () => {
         e([]), o([]);
         return;
       }
-      if (x(m), !p && (m.key === "Delete" || m.key === "Backspace") && (m.preventDefault(), l(s)), m.ctrlKey || m.metaKey) {
+      if (v(m), !p && (m.key === "Delete" || m.key === "Backspace") && (m.preventDefault(), l(s)), m.ctrlKey || m.metaKey) {
         if (m.key === "ArrowUp") {
           m.preventDefault();
-          const b = s.length > 0 ? v(s[0]) : null;
+          const b = s.length > 0 ? $(s[0]) : null;
           b && e([b]);
         }
         if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(m.key)) {
@@ -662,32 +658,32 @@ const ys = () => {
     };
   }, [s, e, c, l, d, a, i, p, h, n]), null;
 }, Bs = ({ block: n, label: s }) => {
-  const [, e] = B(), [, t] = T(), [, o] = y(te), c = Qt("dnd");
+  const [, e] = D(), [, t] = T(), [, o] = y(ne), c = Qt("dnd");
   return /* @__PURE__ */ r.jsxs(
     "div",
     {
       className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
       draggable: c ? "true" : "false",
       onDragStart: (a) => {
-        a.dataTransfer.setData("text/plain", JSON.stringify(Ke(n, ["_id", "_type", "_name"]))), o(n), setTimeout(() => {
+        a.dataTransfer.setData("text/plain", JSON.stringify(qe(n, ["_id", "_type", "_name"]))), o(n), setTimeout(() => {
           e([]), t(null);
         }, 200);
       },
       children: [
-        /* @__PURE__ */ r.jsx(st, {}),
+        /* @__PURE__ */ r.jsx(ot, {}),
         s
       ]
     }
   );
-}, Ds = ({ selectedBlockElement: n, block: s }) => {
-  const e = _e(), t = Be(), [, o] = B(), [, c] = E(), [a] = y(L), { floatingStyles: i, refs: d, update: l } = qt({
+}, As = ({ selectedBlockElement: n, block: s }) => {
+  const e = Ie(), t = Be(), [, o] = D(), [, c] = N(), [a] = y(L), { floatingStyles: i, refs: d, update: l } = Yt({
     placement: "top-start",
-    middleware: [Kt(), Wt()],
+    middleware: [Gt(), Kt()],
     elements: {
       reference: n
     }
   });
-  Yt(n, () => l(), n !== null);
+  Xt(n, () => l(), n !== null);
   const h = f(s, "_parent", null), p = A(f(s, "_name", "")) ? f(s, "_type", "") : f(s, "_name", "");
   return !n || !s || a ? null : /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsxs(
     "div",
@@ -705,7 +701,7 @@ const ys = () => {
         /* @__PURE__ */ r.jsx(Bs, { label: p, block: s }),
         /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 px-1", children: [
           h && /* @__PURE__ */ r.jsx(
-            ot,
+            nt,
             {
               className: "hover:scale-105",
               onClick: () => {
@@ -713,13 +709,13 @@ const ys = () => {
               }
             }
           ),
-          Nt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(nt, { className: "hover:scale-105", onClick: () => t([s == null ? void 0 : s._id]) }) : null,
-          Mt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(rt, { className: "hover:scale-105", onClick: () => e([s == null ? void 0 : s._id]) }) : null
+          Nt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(rt, { className: "hover:scale-105", onClick: () => t([s == null ? void 0 : s._id]) }) : null,
+          Tt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(it, { className: "hover:scale-105", onClick: () => e([s == null ? void 0 : s._id]) }) : null
         ] })
       ]
     }
   ) });
-}, _s = ({ addVariant: n, e: s }) => {
+}, Is = ({ addVariant: n, e: s }) => {
   n("hs-dropdown-open", [
     ({ modifySelectors: e, separator: t }) => {
       e(({ className: o }) => `.hs-dropdown.open > .${s(`hs-dropdown-open${t}${o}`)}`);
@@ -972,8 +968,8 @@ const ys = () => {
   }), n("hs-auto-mode-active", ({ modifySelectors: e, separator: t }) => {
     e(({ className: o }) => `.auto .${s(`hs-auto-mode-active${t}${o}`)}`);
   });
-}, As = ({ model: n }) => {
-  const [s] = Et(), [e] = B(), [t] = ye(), [o] = T(), [c] = E(), [a] = y(Ce), { document: i, window: d } = q(), [l] = C(i == null ? void 0 : i.getElementById("highlighted-block")), [h] = C(
+}, Ss = ({ model: n }) => {
+  const [s] = Lt(), [e] = D(), [t] = we(), [o] = T(), [c] = N(), [a] = y(_e), { document: i, window: d } = q(), [l] = C(i == null ? void 0 : i.getElementById("highlighted-block")), [h] = C(
     i == null ? void 0 : i.getElementById("selected-block")
   ), [p] = C(
     i == null ? void 0 : i.getElementById("selected-styling-block")
@@ -981,30 +977,42 @@ const ys = () => {
   w(() => {
     t ? i == null || i.documentElement.classList.add("dark") : i == null || i.documentElement.classList.remove("dark");
   }, [t, i]);
-  const x = f(s, "headingFont", "DM Sans"), v = f(s, "bodyFont", "DM Sans");
+  const v = f(s, "headingFont", "DM Sans"), $ = f(s, "bodyFont", "DM Sans");
   return w(() => {
-    const g = f(s, "primaryColor", "#000"), m = f(s, "secondaryColor", "#FFF"), b = Gt([
+    const g = f(s, "primaryColor", "#000"), m = f(s, "secondaryColor", "#FFF"), b = f(s, "bodyBgLightColor", "#fff"), j = f(s, "bodyBgDarkColor", "#000"), F = f(s, "bodyTextDarkColor", "#000"), K = f(s, "bodyTextLightColor", "#fff"), Y = es([
       { color: g, name: "primary" },
       { color: m, name: "secondary" }
-    ]), j = f(s, "roundedCorners", "0");
+    ]), G = {
+      "bg-light": b,
+      "bg-dark": j,
+      "text-dark": F,
+      "text-light": K
+    }, x = f(s, "roundedCorners", "0");
     !d || !d.tailwind || (d.tailwind.config = {
       darkMode: "class",
       theme: {
         extend: {
+          container: {
+            center: !0,
+            padding: "1rem",
+            screens: {
+              "2xl": "1400px"
+            }
+          },
           fontFamily: {
-            heading: [x],
-            body: [v]
+            heading: [v],
+            body: [$]
           },
           borderRadius: {
-            global: `${j || "0"}px`
+            DEFAULT: `${x || "0"}px`
           },
-          colors: b
+          colors: { ...G, ...Y }
         }
       },
-      plugins: [Xt, Zt, Jt, d.tailwind.plugin.withOptions(() => _s)]
+      plugins: [Zt, Jt, Vt, d.tailwind.plugin.withOptions(() => Is)]
     });
-  }, [s, d, x, v]), w(() => {
-    h && (h.textContent = `${R(e, (g) => `[data-block-id="${g}"]`).join(",")}{
+  }, [s, d, v, $]), w(() => {
+    h && (h.textContent = `${H(e, (g) => `[data-block-id="${g}"]`).join(",")}{
                 outline: 1px solid ${e.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
   }, [e, h]), w(() => {
@@ -1016,58 +1024,58 @@ const ys = () => {
   }, [a]), w(() => {
     l && (l.textContent = o ? `[data-style-id="${o}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
   }, [o, e, l]), w(() => {
-    p && (p.textContent = `${R(c, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
+    p && (p.textContent = `${H(c, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
   }, [c, p]), w(() => {
     const g = f(s, "bodyTextLightColor", "#64748b"), m = f(s, "bodyTextDarkColor", "#94a3b8"), b = f(s, "bodyBgLightColor", "#FFFFFF"), j = f(s, "bodyBgDarkColor", "#0f172a");
     i.body.className = `font-body antialiased text-[${g}] bg-[${b}] dark:text-[${m}] dark:bg-[${j}]`;
   }, [s, i, n]), n === "page" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    x && /* @__PURE__ */ r.jsx(
+    v && /* @__PURE__ */ r.jsx(
       "link",
       {
         id: "heading-font",
         rel: "stylesheet",
         type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${x.replace(
+        href: `https://fonts.googleapis.com/css2?family=${v.replace(
           / /g,
           "+"
         )}:wght@300;400;500;600;700;800;900&display=swap`,
         media: "all"
       }
     ),
-    v && x !== v && /* @__PURE__ */ r.jsx(
+    $ && v !== $ && /* @__PURE__ */ r.jsx(
       "link",
       {
         id: "body-font",
         rel: "stylesheet",
         type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${v.replace(
+        href: `https://fonts.googleapis.com/css2?family=${$.replace(
           / /g,
           "+"
         )}:wght@300;400;500;600;700;800;900&display=swap`,
         media: "all"
       }
     ),
-    x && /* @__PURE__ */ r.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${x}",ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}` })
+    v && /* @__PURE__ */ r.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${v}",ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}` })
   ] }) : null;
-}, Is = (n) => {
+}, Es = (n) => {
   const s = {};
   return Object.keys(n).forEach((e) => {
-    G(n[e]) && n[e].startsWith(de) && (s[e] = n[e].replace(de, "").split(","));
+    ee(n[e]) && n[e].startsWith(he) && (s[e] = n[e].replace(he, "").split(","));
   }), s;
-}, Ss = Ye((n) => {
-  const s = n.replace(Se, "").split(",");
-  return Vt(s[0], s[1]);
+}, Ms = Ke((n) => {
+  const s = n.replace(Me, "").split(",");
+  return ts(s[0], s[1]);
 });
 function Ns(n, s) {
   return f(n, `${s}_attrs`, {});
 }
-function Ms(n) {
+function Ts(n) {
   const s = {};
   return Object.keys(n).forEach((e) => {
-    if (G(n[e]) && n[e].startsWith(Se)) {
-      const t = Ss(n[e]);
+    if (ee(n[e]) && n[e].startsWith(Me)) {
+      const t = Ms(n[e]);
       s[e] = {
         className: t,
         "data-style-prop": e,
@@ -1078,14 +1086,14 @@ function Ms(n) {
     }
   }), s;
 }
-function Es(n, s) {
+function Ls(n, s) {
   const e = f(n, "_bindings", {});
-  return A(e) ? { ...n } : (Qe(e, (t, o) => {
-    G(t) && f(s, t, null) && (n[o] = f(s, t, null));
+  return A(e) ? { ...n } : (Ye(e, (t, o) => {
+    ee(t) && f(s, t, null) && (n[o] = f(s, t, null));
   }), n);
 }
-function J({ blocks: n }) {
-  const [s] = ee(), [e] = y(te), [t] = y(Ie), [o] = ts(), c = z((l) => Ms(l), []), [a] = Tt(), [i] = y(L), d = z(
+function V({ blocks: n }) {
+  const [s] = se(), [e] = y(ne), [t] = y(Ee), [o] = os(), c = O((l) => Ts(l), []), [a] = Ft(), [i] = y(L), d = O(
     (l) => l.reduce((h, p) => {
       const u = f(o, p, {});
       return { ...h, ...u };
@@ -1096,30 +1104,30 @@ function J({ blocks: n }) {
     n.map((l, h) => {
       if (i === l._id)
         return null;
-      const p = Is(l), u = {};
+      const p = Es(l), u = {};
       A(p) || Object.keys(p).forEach((j) => {
         u[j] = M.Children.toArray(
-          p[j].map((K) => /* @__PURE__ */ r.jsx(J, { blocks: [Xe(s, { _id: K })] }))
+          p[j].map((F) => /* @__PURE__ */ r.jsx(V, { blocks: [Ge(s, { _id: F })] }))
         );
       });
-      const x = ve(s, { _parent: l._id });
-      u.children = x.length ? /* @__PURE__ */ r.jsx(J, { blocks: x }) : null;
-      const v = es(l._type), g = f(v, "builderComponent", f(v, "component", null));
-      if (Ze(g))
+      const v = be(s, { _parent: l._id });
+      u.children = v.length ? /* @__PURE__ */ r.jsx(V, { blocks: v }) : null;
+      const $ = ss(l._type), g = f($, "builderComponent", f($, "component", null));
+      if (Xe(g))
         return /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${l == null ? void 0 : l._type} not registered -->` });
-      const m = xe(v, "getBlockStateFrom") ? v == null ? void 0 : v.getBlockStateFrom(l, s) : [], b = d(m);
-      return /* @__PURE__ */ r.jsx(ge, { children: M.createElement(g, {
+      const m = ye($, "getBlockStateFrom") ? $ == null ? void 0 : $.getBlockStateFrom(l, s) : [], b = d(m);
+      return /* @__PURE__ */ r.jsx(ve, { children: M.createElement(g, {
         blockProps: {
           "data-block-id": l._id,
           "data-block-type": l._type,
           ...e ? (
             // @ts-ignore
-            { "data-dnd": Lt(l._type, e == null ? void 0 : e._type) ? "yes" : "no" }
+            { "data-dnd": Rt(l._type, e == null ? void 0 : e._type) ? "yes" : "no" }
           ) : {},
           ...t === l._id ? { "data-drop": "yes" } : {}
         },
         index: h,
-        ...Es(l, a),
+        ...Ls(l, a),
         ...c(l),
         ...u,
         inBuilder: !0,
@@ -1128,41 +1136,41 @@ function J({ blocks: n }) {
     })
   ) });
 }
-const Ts = () => {
-  const [n] = ee(), s = A(n) ? null : /* @__PURE__ */ r.jsx(Ft, { children: /* @__PURE__ */ r.jsx(J, { blocks: ve(n, (e) => A(e._parent)) }) });
+const Fs = () => {
+  const [n] = se(), s = A(n) ? null : /* @__PURE__ */ r.jsx(Ht, { children: /* @__PURE__ */ r.jsx(V, { blocks: be(n, (e) => A(e._parent)) }) });
   return /* @__PURE__ */ r.jsx(r.Fragment, { children: s });
-}, Ls = (n, s) => n.querySelector(`[data-style-id="${s}"]`), Fs = () => {
-  const [n] = y(Rt), [s] = De(), [e] = V(), [, t] = B(), o = Pt(), [, c] = T(), a = re(null), i = re(null), [d, l] = C({ width: 0, height: 0 }), h = ps(d), [p, u] = C(0), [x, v] = C([]), [, g] = C([]), [, m] = y(Ht), [b, j] = E(), K = P("loading", !1), Fe = P("htmlDir", "ltr");
+}, Rs = (n, s) => n.querySelector(`[data-style-id="${s}"]`), Hs = () => {
+  const [n] = y(Pt), [s] = Ae(), [e] = te(), [, t] = D(), o = zt(), [, c] = T(), a = le(null), i = le(null), [d, l] = C({ width: 0, height: 0 }), h = hs(d), [p, u] = C(0), [v, $] = C([]), [, g] = C([]), [, m] = y(Ot), [b, j] = N(), F = P("loading", !1), K = P("htmlDir", "ltr");
   w(() => {
-    const { clientWidth: $, clientHeight: I } = i.current;
-    l({ width: $, height: I }), p === 0 && u($);
+    const { clientWidth: x, clientHeight: I } = i.current;
+    l({ width: x, height: I }), p === 0 && u(x);
   }, [i, e, p]);
-  const Re = ($, I = 0) => {
-    const { top: S } = $.getBoundingClientRect();
+  const Y = (x, I = 0) => {
+    const { top: S } = x.getBoundingClientRect();
     return S + I >= 0 && S - I <= window.innerHeight;
   };
   w(() => {
-    var $, I;
+    var x, I;
     if (o && o.type !== "Multiple" && a.current) {
-      const S = Le(a.current.contentDocument, o._id);
-      S && (Re(S) || (I = ($ = a.current) == null ? void 0 : $.contentWindow) == null || I.scrollTo({ top: S.offsetTop, behavior: "smooth" }), v([S]));
+      const S = Re(a.current.contentDocument, o._id);
+      S && (Y(S) || (I = (x = a.current) == null ? void 0 : x.contentWindow) == null || I.scrollTo({ top: S.offsetTop, behavior: "smooth" }), $([S]));
     }
   }, [o]), w(() => {
     if (!A(b) && a.current) {
-      const $ = Ls(
+      const x = Rs(
         a.current.contentDocument,
-        O(b).id
+        U(b).id
       );
-      g($ ? [$] : [null]);
+      g(x ? [x] : [null]);
     } else
       g([null]);
   }, [b]);
-  const Pe = Ue(() => {
-    let $ = ds;
-    return $ = $.replace("__HTML_DIR__", Fe), n === "offline" && ($ = $.replace(
+  const G = Oe(() => {
+    let x = us;
+    return x = x.replace("__HTML_DIR__", K), n === "offline" && (x = x.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
-    ), $ = $.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), $ = $.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), $;
+    ), x = x.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), x = x.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), x;
   }, [n]);
   return /* @__PURE__ */ r.jsx(
     "div",
@@ -1175,25 +1183,25 @@ const Ts = () => {
       style: p > 0 && !A(h) ? { width: s ? "100%" : p } : {},
       ref: i,
       children: /* @__PURE__ */ r.jsxs(
-        hs,
+        gs,
         {
           contentDidMount: () => m(a.current),
           ref: a,
           id: "canvas-iframe",
           style: { width: `${e}px`, ...h },
           className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: Pe,
+          initialContent: G,
           children: [
-            /* @__PURE__ */ r.jsx(Cs, {}),
+            /* @__PURE__ */ r.jsx(_s, {}),
             /* @__PURE__ */ r.jsx(
-              Ds,
+              As,
               {
                 block: o,
-                selectedBlockElement: O(x)
+                selectedBlockElement: U(v)
               }
             ),
-            /* @__PURE__ */ r.jsx(As, { model: "page" }),
-            /* @__PURE__ */ r.jsx(ss, { children: /* @__PURE__ */ r.jsx(js, { children: K ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(Ae, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(Ts, {}) }) }),
+            /* @__PURE__ */ r.jsx(Ss, { model: "page" }),
+            /* @__PURE__ */ r.jsx(ns, { children: /* @__PURE__ */ r.jsx(Ds, { children: F ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(Se, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(Fs, {}) }) }),
             /* @__PURE__ */ r.jsx("br", {}),
             /* @__PURE__ */ r.jsx(
               "div",
@@ -1207,10 +1215,10 @@ const Ts = () => {
       )
     }
   );
-}, zo = () => /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
-  /* @__PURE__ */ r.jsx(cs, {}),
-  /* @__PURE__ */ r.jsx("div", { className: "relative h-full overflow-hidden bg-slate-800/90 bg-[linear-gradient(to_right,#222_0.5px,transparent_0.5px),linear-gradient(to_bottom,#222_0.5px,transparent_0.5px)] bg-[size:12px_12px] px-2", children: /* @__PURE__ */ r.jsx(ge, { fallback: /* @__PURE__ */ r.jsx(Ae, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(zt, { children: /* @__PURE__ */ r.jsx(Fs, {}) }) }) })
+}, Uo = () => /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
+  /* @__PURE__ */ r.jsx(ps, {}),
+  /* @__PURE__ */ r.jsx("div", { className: "relative h-full overflow-hidden bg-slate-800/90 bg-[linear-gradient(to_right,#222_0.5px,transparent_0.5px),linear-gradient(to_bottom,#222_0.5px,transparent_0.5px)] bg-[size:12px_12px] px-2", children: /* @__PURE__ */ r.jsx(ve, { fallback: /* @__PURE__ */ r.jsx(Se, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(Ut, { children: /* @__PURE__ */ r.jsx(Hs, {}) }) }) })
 ] });
 export {
-  zo as default
+  Uo as default
 };