@chaibuilder/sdk 1.2.57 → 1.2.59

package/dist/{CanvasArea-8f_Ki3B7.js → CanvasArea-akw7npWW.js}

@@ -1,32 +1,33 @@
-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 T = (n, s, e) => (ze(n, typeof s != "symbol" ? s + "" : s, e), e);
+var Oe = Object.defineProperty;
+var ze = (n, s, e) => s in n ? Oe(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
+var M = (n, s, e) => (ze(n, typeof s != "symbol" ? s + "" : s, e), e);
 import { j as r } from "./jsx-runtime-WbnYoNE9.js";
-import S, { createElement as pe, useCallback as q, useState as B, useEffect as j, Component as be, Children as Oe, Suspense as J, useRef as ue, useMemo as Ue } from "react";
-import { map as O, includes as V, toUpper as G, round as We, throttle as ye, has as ee, isEmpty as I, first as K, omit as ke, pick as qe, get as f, isString as ne, memoize as Ke, each as Ye, find as Xe, filter as we, isNull as Ge } from "lodash-es";
-import { ResetIcon as he, SunIcon as Qe, MobileIcon as me, LaptopIcon as Ze, DesktopIcon as Je, 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 { v as je, B as Y, aa as Ce, aR as _e, aS as it, aT as lt, aU as at, a4 as re, as as ct, h as U, E as dt, F as pt, G as ut, H as ht, I as mt, aV as gt, aW as Be, r as D, at as M, A as ft, a as xt, b as vt, c as $t, d as bt, e as yt, f as kt, g as wt, P as jt, U as Ct, aX as _t, a5 as De, aQ as W, aY as Bt, a2 as Dt, ad as L, aZ as Ae, am as At, a_ as R, a$ as St, D as ie, t as Se, q as Ie, s as Ee, Q as It, b0 as Et, b1 as Nt, b2 as Tt, X as Mt, b3 as Lt, b4 as Ft, b5 as Rt, b6 as Pt, ai as Ht, b7 as zt, S as te, $ as Ot } from "./index-uLn8W3eR.js";
-import { a as Ut, u as Wt, B as qt, E as Kt } from "./index-IgLSTkN6.js";
-import { useTranslation as le } from "react-i18next";
+import S, { createElement as ce, useCallback as q, useState as _, useEffect as j, Component as ye, Children as Ue, Suspense as V, useRef as de, useMemo as We } from "react";
+import { map as z, includes as pe, toUpper as Z, round as qe, throttle as ke, has as K, isEmpty as I, first as Y, omit as we, pick as Ke, get as f, isString as oe, memoize as Ye, each as Xe, find as Ge, filter as je, isNull as Qe } from "lodash-es";
+import { ResetIcon as ue, SunIcon as Ze, MobileIcon as he, 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 { v as Ce, B as X, aa as _e, aR as Be, aS as lt, aT as at, aU as ct, a4 as G, as as dt, h as U, E as pt, F as ut, G as ht, H as mt, I as gt, aV as ft, aW as Ae, r as A, at as L, A as xt, a as vt, b as $t, c as bt, d as yt, e as kt, f as wt, g as jt, P as Ct, U as _t, aX as Bt, a5 as De, aQ as W, aY as At, a2 as Dt, ad as F, aZ as Se, am as St, a_ as P, a$ as It, D as ne, t as Ie, q as Ee, s as Te, Q as Et, b0 as Tt, b1 as Nt, b2 as Mt, X as Lt, b3 as Ft, b4 as Rt, b5 as Ht, b6 as Pt, ai as Ot, b7 as zt, S as ee, $ as Ut } from "./index-uLn8W3eR.js";
+import { a as Wt, u as qt, B as Kt, E as Yt } from "./index--t_K8Sw6.js";
+import { useTranslation as re } from "react-i18next";
 import { useAtom as b } from "jotai";
-import { SparklesIcon as Yt } from "lucide-react";
-import ge from "react-dom";
+import { SparklesIcon as Xt } from "lucide-react";
+import me from "react-dom";
 import w from "prop-types";
-import { Quill as Xt } from "react-quill";
-import { d as ae, a as Ne } from "./atoms-ZOWyNoiC.js";
-import { flip as Gt } from "@floating-ui/dom";
-import { useFloating as Qt, shift as Zt } from "@floating-ui/react-dom";
-import { useResizeObserver as Jt } from "@react-hookz/web";
-import { useFeature as Vt } from "flagged";
-import es from "@tailwindcss/typography";
-import ts from "@tailwindcss/forms";
-import ss from "@tailwindcss/aspect-ratio";
-import os from "tailwindcss-palette-generator";
-import { twMerge as ns } from "tailwind-merge";
-import { S as fe, a as Te } from "./MODIFIERS-fd5XOmum.js";
-import { getBlockComponent as rs } from "@chaibuilder/runtime";
-import { Provider as is } from "react-wrap-balancer";
-import { Resizable as ls } from "re-resizable";
+import { Quill as Gt } from "react-quill";
+import { d as ie, a as Ne } from "./atoms-ZOWyNoiC.js";
+import { flip as Qt } from "@floating-ui/dom";
+import { useFloating as Zt, shift as Jt } from "@floating-ui/react-dom";
+import { useResizeObserver as Vt } from "@react-hookz/web";
+import { useFeature as es } from "flagged";
+import ts from "@tailwindcss/typography";
+import ss from "@tailwindcss/forms";
+import os from "@tailwindcss/aspect-ratio";
+import ns from "tailwindcss-palette-generator";
+import { twMerge as rs } from "tailwind-merge";
+import { S as ge, a as Me } from "./MODIFIERS-fd5XOmum.js";
+import { getBlockComponent as is } from "@chaibuilder/runtime";
+import { includes as fe } from "lodash";
+import { Provider as ls } from "react-wrap-balancer";
+import { Resizable as as } from "re-resizable";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
@@ -56,19 +57,19 @@ import "tree-model";
 import "i18next";
 import "react-hotkeys-hook";
 import "./index-VBXQixVm.js";
-const as = () => {
-  const { hasUndo: n, hasRedo: s, undo: e, redo: t } = je();
+const cs = () => {
+  const { hasUndo: n, hasRedo: s, undo: e, redo: t } = Ce();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ r.jsx(Y, { disabled: !n(), size: "sm", onClick: e, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(he, {}) }),
-    /* @__PURE__ */ r.jsx(Y, { disabled: !s(), onClick: t, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(he, { className: "rotate-180 scale-y-[-1] transform" }) })
+    /* @__PURE__ */ r.jsx(X, { disabled: !n(), size: "sm", onClick: e, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(ue, {}) }),
+    /* @__PURE__ */ r.jsx(X, { disabled: !s(), onClick: t, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(ue, { className: "rotate-180 scale-y-[-1] transform" }) })
   ] });
 };
-function cs() {
-  const [n, s] = Ce();
+function ds() {
+  const [n, s] = _e();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ r.jsx(Qe, { className: "size-4 shrink-0" }),
+    /* @__PURE__ */ r.jsx(Ze, { className: "size-4 shrink-0" }),
     /* @__PURE__ */ r.jsx(
-      _e,
+      Be,
       {
         id: "dark-mode-switch",
         checked: n,
@@ -85,7 +86,7 @@ function cs() {
         )
       }
     ),
-    /* @__PURE__ */ r.jsx(Ut, { className: "size-4 ml-3 shrink-0" })
+    /* @__PURE__ */ r.jsx(Wt, { className: "size-4 ml-3 shrink-0" })
   ] });
 }
 const xe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
@@ -111,19 +112,19 @@ const xe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       )
     ]
   }
-), ds = [
+), ps = [
   {
     title: "mobile_xs_title",
     content: "mobile_xs_content",
     breakpoint: "xs",
-    icon: /* @__PURE__ */ r.jsx(me, {}),
+    icon: /* @__PURE__ */ r.jsx(he, {}),
     width: 400
   },
   {
     title: "mobile_sm_title",
     content: "mobile_sm_content",
     breakpoint: "sm",
-    icon: /* @__PURE__ */ r.jsx(me, { className: "rotate-90" }),
+    icon: /* @__PURE__ */ r.jsx(he, { className: "rotate-90" }),
     width: 640
   },
   {
@@ -144,14 +145,14 @@ const xe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     title: "desktop_xl_title",
     content: "desktop_xl_content",
     breakpoint: "xl",
-    icon: /* @__PURE__ */ r.jsx(Ze, {}),
+    icon: /* @__PURE__ */ r.jsx(Je, {}),
     width: 1420
   },
   {
     title: "large_desktop_2xl_title",
     content: "large_desktop_2xl_content",
     breakpoint: "2xl",
-    icon: /* @__PURE__ */ r.jsx(Je, {}),
+    icon: /* @__PURE__ */ r.jsx(Ve, {}),
     width: 1920
   }
 ], ve = ({
@@ -160,45 +161,45 @@ const xe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
   currentBreakpoint: e,
   breakpoint: t,
   width: o,
-  icon: c,
+  icon: a,
   onClick: l
 }) => {
-  const { t: i } = le();
-  return /* @__PURE__ */ r.jsxs(it, { children: [
-    /* @__PURE__ */ r.jsx(lt, { asChild: !0, children: /* @__PURE__ */ r.jsx(
-      Y,
+  const { t: i } = re();
+  return /* @__PURE__ */ r.jsxs(lt, { children: [
+    /* @__PURE__ */ r.jsx(at, { asChild: !0, children: /* @__PURE__ */ r.jsx(
+      X,
       {
         onClick: () => l(o),
         size: "sm",
         variant: t === e ? "secondary" : "ghost",
-        children: c
+        children: a
       }
     ) }),
-    /* @__PURE__ */ r.jsx(at, { 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) })
     ] }) }) })
   ] });
-}, ps = () => {
-  const [, n, s] = re(), [e, t] = ct(), { t: o } = le(), c = U("breakpoints", ds), l = (i) => {
-    e.includes(i) ? e.length > 2 && t(e.filter((d) => d !== i)) : t((d) => [...d, i]);
+}, us = () => {
+  const [, n, s] = G(), [e, t] = dt(), { t: o } = re(), a = U("breakpoints", ps), l = (i) => {
+    e.includes(i) ? e.length > 2 && t(e.filter((c) => c !== i)) : t((c) => [...c, i]);
   };
-  return c.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: O(c, (i) => /* @__PURE__ */ pe(ve, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
-    O(
-      c.filter((i) => V(e, G(i.breakpoint))),
-      (i) => /* @__PURE__ */ pe(ve, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })
+  return a.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: z(a, (i) => /* @__PURE__ */ ce(ve, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
+    z(
+      a.filter((i) => pe(e, Z(i.breakpoint))),
+      (i) => /* @__PURE__ */ ce(ve, { ...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, {}),
-        O(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, {}),
+        z(a, (i) => /* @__PURE__ */ r.jsx(
+          ft,
           {
             disabled: i.breakpoint === "xs",
-            onCheckedChange: () => l(G(i.breakpoint)),
-            checked: V(e, G(i.breakpoint)),
+            onCheckedChange: () => l(Z(i.breakpoint)),
+            checked: pe(e, Z(i.breakpoint)),
             children: o(i.title)
           },
           i.breakpoint
@@ -206,36 +207,36 @@ const xe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       ] })
     ] })
   ] });
-}, us = () => {
-  const { t: n } = le(), { setNewBlocks: s } = Be(), [, e] = D(), [, t] = M(), o = q(() => {
+}, hs = () => {
+  const { t: n } = re(), { setNewBlocks: s } = Ae(), [, e] = A(), [, t] = L(), o = q(() => {
     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(Y, { 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(X, { 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(bt, { children: n("clear_canvas_title") }),
-        /* @__PURE__ */ r.jsx(yt, { children: n("clear_canvas_description") })
+    /* @__PURE__ */ r.jsxs($t, { className: "border-border", children: [
+      /* @__PURE__ */ r.jsxs(bt, { children: [
+        /* @__PURE__ */ r.jsx(yt, { 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") })
       ] })
     ] })
   ] }) });
-}, hs = () => {
-  const [n, s] = b(Ct);
+}, ms = () => {
+  const [n, s] = b(_t);
   return U("askAiCallBack", null) ? /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ r.jsxs(_t, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
-      /* @__PURE__ */ r.jsx(Yt, { className: "w-4" }),
+    /* @__PURE__ */ r.jsxs(Bt, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
+      /* @__PURE__ */ r.jsx(Xt, { className: "w-4" }),
       "AI Assistant"
     ] }),
     /* @__PURE__ */ r.jsx(
-      _e,
+      Be,
       {
         className: "scale-90",
         checked: n,
@@ -246,34 +247,34 @@ const xe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       }
     )
   ] }) : null;
-}, ms = () => {
+}, gs = () => {
   const n = U("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(ps, {}),
+      /* @__PURE__ */ r.jsx(us, {}),
       /* @__PURE__ */ r.jsx(W, { orientation: "vertical" }),
       n ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        /* @__PURE__ */ r.jsx(cs, {}),
+        /* @__PURE__ */ r.jsx(ds, {}),
         /* @__PURE__ */ r.jsx(W, { orientation: "vertical" })
       ] }) : null,
       /* @__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),
+          qe(s, 0),
           "%"
         ] })
       ] }),
       /* @__PURE__ */ r.jsx(W, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(as, {})
+      /* @__PURE__ */ r.jsx(cs, {})
     ] }),
     /* @__PURE__ */ r.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ r.jsx(us, {}),
+      /* @__PURE__ */ r.jsx(hs, {}),
       /* @__PURE__ */ r.jsx(W, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(hs, {})
+      /* @__PURE__ */ r.jsx(ms, {})
     ] })
   ] });
-}, gs = `<!doctype html>
+}, fs = `<!doctype html>
 <html lang="en" dir="__HTML_DIR__" class="scroll-smooth h-full overflow-y-auto">
   <head>
     <meta charset="UTF-8">
@@ -312,6 +313,9 @@ const xe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     [data-drop="yes"] { outline: 2px dashed orange !important; outline-offset: -2px }
     [data-dnd="yes"] { pointer-events: auto !important}
     [data-dnd="no"] { pointer-events: none !important; }
+    [data-dnd-dragged="yes"] { opacity: 0.6; pointer-events: none; }
+    [data-dnd-dragged="no"] { opacity: 1; pointer-events: auto !important; }
+    [force-show] { display: block !important; }
     </style>    
     <style id="hidden-blocks"></style>
     <style id="selected-block"></style>
@@ -324,36 +328,36 @@ const xe = ({ 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>`, fs = (n) => {
-  const [s] = re(), [, e] = De(), [t, o] = B({}), c = q(() => {
+</html>`, xs = (n) => {
+  const [s] = G(), [, e] = De(), [t, o] = _({}), a = q(() => {
     const { width: l, height: i } = n;
     if (l < s) {
-      const d = parseFloat((l / s).toFixed(2).toString());
-      let m = {};
-      const a = i * d;
-      i && (m = {
+      const c = parseFloat((l / s).toFixed(2).toString());
+      let h = {};
+      const m = i * c;
+      i && (h = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (i - a) / a * 100 + "%"
+        height: 100 + (i - m) / m * 100 + "%"
       }), o({
         position: "relative",
         top: 0,
-        transform: `scale(${d})`,
+        transform: `scale(${c})`,
         transformOrigin: "top left",
-        ...m,
+        ...h,
         maxWidth: "none"
-      }), e(d * 100);
+      }), e(c * 100);
     } else
       o({}), e(100);
   }, [s, n, e]);
   return j(() => {
-    c();
-  }, [s, n, e, c]), t;
+    a();
+  }, [s, n, e, a]), t;
 };
-let Me, Le;
-typeof document < "u" && (Me = document);
-typeof window < "u" && (Le = window);
-const Fe = S.createContext({ document: Me, window: Le }), X = () => S.useContext(Fe), { Provider: xs, Consumer: Go } = Fe;
-class Re extends be {
+let Le, Fe;
+typeof document < "u" && (Le = document);
+typeof window < "u" && (Fe = window);
+const Re = S.createContext({ document: Le, window: Fe }), Q = () => S.useContext(Re), { Provider: vs, Consumer: Jo } = Re;
+class He extends ye {
   componentDidMount() {
     this.props.contentDidMount();
   }
@@ -361,28 +365,28 @@ class Re extends be {
     this.props.contentDidUpdate();
   }
   render() {
-    return Oe.only(this.props.children);
+    return Ue.only(this.props.children);
   }
 }
-T(Re, "propTypes", {
+M(He, "propTypes", {
   children: w.element.isRequired,
   contentDidMount: w.func.isRequired,
   contentDidUpdate: w.func.isRequired
 });
-class se extends be {
+class te extends ye {
   constructor(e, t) {
     super(e, t);
-    T(this, "setRef", (e) => {
+    M(this, "setRef", (e) => {
       this.nodeRef.current = e;
       const { forwardedRef: t } = this.props;
       typeof t == "function" ? t(e) : t && (t.current = e);
     });
-    T(this, "handleLoad", () => {
+    M(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
-    T(this, "loadCheck", () => setInterval(() => {
+    M(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = S.createRef(), this.state = { iframeLoaded: !1 };
@@ -406,8 +410,8 @@ class se extends be {
     const e = this.getDoc();
     if (!e)
       return null;
-    const t = this.props.contentDidMount, o = this.props.contentDidUpdate, c = e.defaultView || e.parentView, l = /* @__PURE__ */ r.jsx(Re, { contentDidMount: t, contentDidUpdate: o, children: /* @__PURE__ */ r.jsx(xs, { value: { document: e, window: c }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), i = this.getMountTarget();
-    return [ge.createPortal(this.props.head, this.getDoc().head), ge.createPortal(l, i)];
+    const t = this.props.contentDidMount, o = this.props.contentDidUpdate, a = e.defaultView || e.parentView, l = /* @__PURE__ */ r.jsx(He, { contentDidMount: t, contentDidUpdate: o, children: /* @__PURE__ */ r.jsx(vs, { value: { document: e, window: a }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), i = this.getMountTarget();
+    return [me.createPortal(this.props.head, this.getDoc().head), me.createPortal(l, i)];
   }
   render() {
     const e = {
@@ -423,7 +427,7 @@ class se extends be {
 // 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.
-T(se, "propTypes", {
+M(te, "propTypes", {
   style: w.object,
   // eslint-disable-line
   head: w.node,
@@ -432,7 +436,7 @@ T(se, "propTypes", {
   contentDidMount: w.func,
   contentDidUpdate: w.func,
   children: w.oneOfType([w.element, w.arrayOf(w.element)])
-}), T(se, "defaultProps", {
+}), M(te, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -443,264 +447,255 @@ T(se, "propTypes", {
   },
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
-const vs = S.forwardRef((n, s) => /* @__PURE__ */ r.jsx(se, { ...n, forwardedRef: s }));
-function ce(n) {
+const $s = S.forwardRef((n, s) => /* @__PURE__ */ r.jsx(te, { ...n, forwardedRef: s }));
+function le(n) {
   const s = window.getComputedStyle(n), e = s.display;
   if (e === "flex" || e === "inline-flex") {
     const t = s.flexDirection;
     return t === "column" || t === "column-reverse" ? "vertical" : "horizontal";
   } else if (e === "grid") {
-    const t = s.gridAutoFlow, o = s.gridTemplateRows, c = s.gridTemplateColumns;
-    return t.includes("column") || o.split(" ").length > c.split(" ").length ? "vertical" : "horizontal";
+    const t = s.gridAutoFlow, o = s.gridTemplateRows, a = s.gridTemplateColumns;
+    return t.includes("column") || o.split(" ").length > a.split(" ").length ? "vertical" : "horizontal";
   } else if (e === "block" || e === "inline-block")
     return "vertical";
   return "horizontal";
 }
-let $ = null, C = [], z = null, Q = null;
+let y = null, B = [], H = null, J = null;
 const $e = (n, s, e) => {
-  if (!$ || !n)
+  if (!y || !n)
     return;
-  const t = $ == null ? void 0 : $.getElementById("placeholder"), o = C.map(([d]) => d), c = o.reduce(
-    (d, m) => Math.abs(m - e) < Math.abs(d - e) ? m : d,
+  const t = y == null ? void 0 : y.getElementById("placeholder"), o = B.map(([c]) => c), a = o.reduce(
+    (c, h) => Math.abs(h - e) < Math.abs(c - e) ? h : c,
     0
-  ), l = o.indexOf(c);
-  if (!C[l])
+  ), l = o.indexOf(a);
+  if (!B[l])
     return;
-  const i = C[l];
+  const i = B[l];
   t.style.width = s === "vertical" ? i[2] + "px" : "2px", t.style.height = s === "vertical" ? "2px" : i[2] + "px", t.style.display = "block", s === "vertical" ? (t.style.top = i[0] + "px", t.style.left = i[1] + "px") : (t.style.top = i[1] + "px", t.style.left = i[0] + "px");
 };
-function $s(n, s) {
+function bs(n, s) {
   let e = 0, t = 1 / 0;
-  return s.forEach((o, c) => {
+  return s.forEach((o, a) => {
     const l = Math.abs(o[0] - n);
-    l < t && (t = l, e = c);
+    l < t && (t = l, e = a);
   }), e;
 }
-const bs = (n) => {
-  const e = ce(n) === "horizontal";
-  C = [], Array.from(n.children).forEach((t, o) => {
+const ys = (n) => {
+  const e = le(n) === "horizontal";
+  B = [], Array.from(n.children).forEach((t, o) => {
     if (t.classList.contains("pointer-events-none"))
       return;
-    const c = e ? t.offsetLeft : t.offsetTop, l = e ? [t.offsetTop, t.clientHeight] : [t.offsetLeft, t.clientWidth];
-    if (C.push([c, l[0], l[1]]), o === n.children.length - 1) {
+    const a = e ? t.offsetLeft : t.offsetTop, l = e ? [t.offsetTop, t.clientHeight] : [t.offsetLeft, t.clientWidth];
+    if (B.push([a, l[0], l[1]]), o === n.children.length - 1) {
       const i = e ? t.offsetLeft + t.clientWidth : t.offsetTop + t.clientHeight;
-      C.push([i, l[0], l[1]]);
+      B.push([i, l[0], l[1]]);
     }
   });
-}, ys = ye((n) => {
+}, ks = ke((n) => {
   var o;
-  const s = n.target, e = ce(s), t = (o = $ == null ? void 0 : $.defaultView) == null ? void 0 : o.scrollY;
+  const s = n.target, e = le(s), t = (o = y == null ? void 0 : y.defaultView) == null ? void 0 : o.scrollY;
   e === "vertical" ? $e(s, e, n.clientY + t) : $e(s, e, n.clientX);
 }, 0);
-function Z() {
-  const n = $ == null ? void 0 : $.getElementById("placeholder");
-  n.style.display = "none", ks("pointer-none"), ws();
+function be() {
+  const n = y == null ? void 0 : y.getElementById("placeholder");
+  n.style.display = "none", ws("pointer-none"), js();
 }
-function ks(n) {
-  ($ == null ? void 0 : $.querySelectorAll(`.${n}`)).forEach((e) => {
+function ws(n) {
+  (y == null ? void 0 : y.querySelectorAll(`.${n}`)).forEach((e) => {
     e.classList.remove(n);
   });
 }
-function ws() {
-  const n = $ == null ? void 0 : $.querySelector('[data-drop="yes"]');
+function js() {
+  const n = y == null ? void 0 : y.querySelector('[data-drop="yes"]');
   n && n.removeAttribute("data-drop");
 }
-const js = () => {
-  const { document: n } = X(), [s, e] = b(Bt), { addCoreBlock: t } = Dt(), [, o] = L(), [, c] = D(), { moveBlocks: l } = Be(), [, i] = b(Ae), [d, m] = b(ae), [, a] = b(Ne);
-  return $ = n, {
+const Cs = () => {
+  const { document: n } = Q(), [s, e] = b(At), { addCoreBlock: t } = Dt(), [, o] = F(), [, a] = A(), { moveBlocks: l } = Ae(), [, i] = b(Se), [c, h] = b(ie), [, m] = b(Ne), d = () => {
+    be(), e(!1), i(""), h(null), m(null), B = [];
+  };
+  return y = n, {
     isDragging: s,
-    onDragOver: (u) => {
-      u.preventDefault(), u.stopPropagation(), ys(u);
+    onDragOver: (p) => {
+      p.preventDefault(), p.stopPropagation(), ks(p);
     },
-    onDrop: (u) => {
-      var _;
-      z == null || z.classList.remove("drop-target");
-      const p = z, k = ce(p) === "vertical" ? u.clientY + ((_ = $ == null ? void 0 : $.defaultView) == null ? void 0 : _.scrollY) : u.clientX;
-      Q = $s(k, C);
-      const g = d, h = p.getAttribute("data-block-id");
-      if (!ee(g, "_id")) {
-        t(g, h === "canvas" ? null : h, Q), setTimeout(() => {
-          Z();
-        }, 300), C = [], e(!1), i(""), m(null), a(null);
+    onDrop: (p) => {
+      var D;
+      H == null || H.classList.remove("drop-target");
+      const x = H, g = le(x) === "vertical" ? p.clientY + ((D = y == null ? void 0 : y.defaultView) == null ? void 0 : D.scrollY) : p.clientX;
+      J = bs(g, B);
+      const u = c, k = x.getAttribute("data-block-id");
+      if (u === H) {
+        d();
         return;
       }
-      let y = p.getAttribute("data-block-id");
-      y === null && (y = u.target.parentElement.getAttribute("data-block-id")), l([g._id], y, Q), Z(), e(!1), i(""), C = [], setTimeout(() => Z(), 300);
+      if (!K(u, "_id")) {
+        t(u, k === "canvas" ? null : k, J), setTimeout(d, 300);
+        return;
+      }
+      let C = x.getAttribute("data-block-id");
+      C === null && (C = p.target.parentElement.getAttribute("data-block-id")), l([u._id], C, J), d(), setTimeout(be, 300);
     },
-    onDragEnter: (u) => {
-      const p = u, x = p.target;
-      z = x;
-      const k = x.getAttribute("data-block-id");
-      a(k), p.stopPropagation(), p.preventDefault(), C = [], bs(x), console.log(C, u.clientY, $.defaultView.scrollY), x.classList.add("drop-target"), e(!0), o(""), c([]);
+    onDragEnter: (p) => {
+      const x = p, $ = x.target;
+      H = $;
+      const g = $.getAttribute("data-block-id");
+      m(g), x.stopPropagation(), x.preventDefault(), B = [], ys($), $.classList.add("drop-target"), e(!0), o(""), a([]);
     }
-    // onDragLeave: (e: DragEvent) => {
-    //   const event = e;
-    //   event.stopPropagation();
-    //   event.preventDefault();
-    //   const target = event.target as HTMLElement;
-    //   if (target && target.classList.contains("drop-target")) {
-    //     target.classList.remove("drop-target");
-    //     if (dropTarget === target) {
-    //       dropTarget = null;
-    //     }
-    //   }
-    //   removePlaceholder();
-    // },
   };
 };
-function de(n) {
+function ae(n) {
   return n.getAttribute("data-block-id") ? n : n.closest("[data-block-id]");
 }
-function Cs(n) {
+function _s(n) {
   n.container.innerHTML = "", n.container.parentNode.removeChild(n.container);
   var s = document.querySelector(".ql-toolbar");
   s && s.parentNode.removeChild(s), n = null;
 }
-const _s = () => {
-  const n = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], s = At(), [, e] = L(), [t, o] = b(R);
-  return (c) => {
-    var u;
+const Bs = () => {
+  const n = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], s = St(), [, e] = F(), [t, o] = b(P);
+  return (a) => {
+    var d;
     if (t)
       return;
-    const l = de(c.target), i = l.getAttribute("data-block-type");
+    const l = ae(a.target), i = l.getAttribute("data-block-type");
     if (!i || !n.includes(i))
       return;
-    const d = l.cloneNode(!0);
-    l.style.display = "none", Array.from(d.attributes).forEach((p) => {
-      p.name !== "class" && d.removeAttribute(p.name);
-    }), i === "Text" && (d.style.display = "inline-block"), l.parentNode.insertBefore(d, l.nextSibling);
-    const m = new Xt(d, { placeholder: "Type here..." });
-    function a() {
-      const p = m.getText(0, m.getLength());
-      s([l.getAttribute("data-block-id")], { content: p }), l.removeAttribute("style"), d.removeEventListener("blur", a, !0), Cs(m), o(""), e("");
+    const c = l.cloneNode(!0);
+    l.style.display = "none", Array.from(c.attributes).forEach((p) => {
+      p.name !== "class" && c.removeAttribute(p.name);
+    }), i === "Text" && (c.style.display = "inline-block"), l.parentNode.insertBefore(c, l.nextSibling);
+    const h = new Gt(c, { placeholder: "Type here..." });
+    function m() {
+      const p = h.getText(0, h.getLength());
+      s([l.getAttribute("data-block-id")], { content: p }), l.removeAttribute("style"), c.removeEventListener("blur", m, !0), _s(h), o(""), e("");
     }
-    d.addEventListener("blur", a, !0), d.addEventListener("keydown", (p) => {
-      (p.key === "Enter" || p.key === "Escape") && a();
-    }), m.focus(), (u = d.querySelector(".ql-clipboard")) == null || u.remove(), o(l.getAttribute("data-block-id"));
+    c.addEventListener("blur", m, !0), c.addEventListener("keydown", (p) => {
+      (p.key === "Enter" || p.key === "Escape") && m();
+    }), h.focus(), (d = c.querySelector(".ql-clipboard")) == null || d.remove(), o(l.getAttribute("data-block-id"));
   };
-}, Bs = () => {
-  const [, n] = M(), [s, e] = D(), [, t] = L(), [o] = b(R), [c] = b(St);
+}, As = () => {
+  const [, n] = L(), [s, e] = A(), [, t] = F(), [o] = b(P), [a] = b(It);
   return (l) => {
     if (o)
       return;
     l.stopPropagation();
-    const i = de(l.target);
+    const i = ae(l.target);
     if (i != null && i.getAttribute("data-block-id") && (i == null ? void 0 : i.getAttribute("data-block-id")) === "container") {
       e([]), n([]), t("");
       return;
     }
     if (i != null && i.getAttribute("data-block-parent")) {
-      const d = i.getAttribute("data-style-prop"), m = i.getAttribute("data-style-id"), a = i.getAttribute("data-block-parent");
-      s.includes(a) || c == null || c.closeAll(), n([{ id: m, prop: d, blockId: a }]), e([a]);
+      const c = i.getAttribute("data-style-prop"), h = i.getAttribute("data-style-id"), m = i.getAttribute("data-block-parent");
+      s.includes(m) || a == null || a.closeAll(), n([{ id: h, prop: c, blockId: m }]), e([m]);
     } else if (i != null && i.getAttribute("data-block-id")) {
-      let d = i.getAttribute("data-block-id");
-      s.includes(d) || c == null || c.closeAll(), e([d]);
+      let c = i.getAttribute("data-block-id");
+      s.includes(c) || a == null || a.closeAll(), e([c]);
     }
     t("");
   };
-}, Ds = ye((n, s) => {
-  const e = de(n.target);
+}, Ds = ke((n, s) => {
+  const e = ae(n.target);
   e != null && e.getAttribute("data-style-id") && s(e.getAttribute("data-style-id"));
-}, 100), As = () => {
-  const [, n] = L(), [s] = b(R);
+}, 100), Ss = () => {
+  const [, n] = F(), [s] = b(P);
   return (e) => {
     s || Ds(e, n);
   };
-}, Ss = ({ children: n }) => {
-  const { document: s } = X(), [e] = D(), [t, o] = M();
+}, Is = ({ children: n }) => {
+  const { document: s } = Q(), [e] = A(), [t, o] = L();
   j(() => {
     setTimeout(() => {
       if (!I(t))
         return;
-      const m = Pe(s, K(e));
-      if (m) {
-        const a = m.getAttribute("data-style-prop");
-        if (a) {
-          const u = m.getAttribute("data-style-id"), p = m.getAttribute("data-block-parent");
-          o([{ id: u, prop: a, blockId: p }]);
+      const h = Pe(s, Y(e));
+      if (h) {
+        const m = h.getAttribute("data-style-prop");
+        if (m) {
+          const d = h.getAttribute("data-style-id"), p = h.getAttribute("data-block-parent");
+          o([{ id: d, prop: m, blockId: p }]);
         }
       }
     }, 100);
   }, [s, e, o, t]);
-  const c = _s(), l = Bs(), i = As(), d = js();
+  const a = Bs(), l = As(), i = Ss(), c = Cs();
   return /* @__PURE__ */ r.jsx(
     "div",
     {
       "data-block-id": "canvas",
       id: "canvas",
       onClick: l,
-      onDoubleClick: c,
+      onDoubleClick: a,
       onMouseMove: i,
-      ...ke(d, "isDragging"),
-      className: "relative mb-5 h-full max-w-full " + (d.isDragging ? "dragging" : ""),
+      ...we(c, "isDragging"),
+      className: "relative mb-5 h-full max-w-full " + (c.isDragging ? "dragging" : ""),
       children: n
     }
   );
-}, Pe = (n, s) => n.querySelector(`[data-block-id="${s}"]`), Is = () => {
-  const { window: n } = X(), [s, e] = D(), [t] = ie(), [, o] = M(), { undo: c, redo: l } = je(), i = Se(), [, d] = Ie(), m = Ee(), { savePage: a } = It(), [u] = b(R), [, p] = b(Et), x = (g) => {
-    g.key === "Enter" && (g.preventDefault(), s.length === 1 && p(K(s)));
-  }, k = (g) => {
-    const h = t.find((y) => y._id === g);
-    return h ? h._parent : null;
+}, Pe = (n, s) => n.querySelector(`[data-block-id="${s}"]`), Es = () => {
+  const { window: n } = Q(), [s, e] = A(), [t] = ne(), [, o] = L(), { undo: a, redo: l } = Ce(), i = Ie(), [, c] = Ee(), h = Te(), { savePage: m } = Et(), [d] = b(P), [, p] = b(Tt), x = (g) => {
+    g.key === "Enter" && (g.preventDefault(), s.length === 1 && p(Y(s)));
+  }, $ = (g) => {
+    const u = t.find((k) => k._id === g);
+    return u ? u._parent : null;
   };
   return j(() => {
-    const g = (h) => {
-      if (h.key === "Escape") {
+    const g = (u) => {
+      if (u.key === "Escape") {
         e([]), o([]);
         return;
       }
-      if (x(h), !u && (h.key === "Delete" || h.key === "Backspace") && (h.preventDefault(), m(s)), h.ctrlKey || h.metaKey) {
-        if (h.key === "ArrowUp") {
-          h.preventDefault();
-          const y = s.length > 0 ? k(s[0]) : null;
-          y && e([y]);
+      if (x(u), !d && (u.key === "Delete" || u.key === "Backspace") && (u.preventDefault(), h(s)), u.ctrlKey || u.metaKey) {
+        if (u.key === "ArrowUp") {
+          u.preventDefault();
+          const k = s.length > 0 ? $(s[0]) : null;
+          k && e([k]);
         }
-        if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(h.key)) {
-          if (u && ["x", "z", "v"].includes(h.key))
+        if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(u.key)) {
+          if (d && ["x", "z", "v"].includes(u.key))
             return !0;
-          h.preventDefault();
+          u.preventDefault();
         }
-        h.key === "s" && (h.stopPropagation(), h.preventDefault(), a()), h.key === "z" && c(), h.key === "y" && l(), h.key === "d" && i(s);
+        u.key === "s" && (u.stopPropagation(), u.preventDefault(), m()), u.key === "z" && a(), u.key === "y" && l(), u.key === "d" && i(s);
       }
     };
     return n.removeEventListener("keydown", g), n.addEventListener("keydown", g), () => {
       n.removeEventListener("keydown", g);
     };
-  }, [s, e, c, m, d, l, i, u, a, n]), null;
-}, Es = ({ block: n, label: s }) => {
-  const [, e] = D(), [, t] = L(), [, o] = b(ae), c = Vt("dnd");
+  }, [s, e, a, h, c, l, i, d, m, n]), null;
+}, Ts = ({ block: n, label: s }) => {
+  const [, e] = A(), [, t] = F(), [, o] = b(ie), a = es("dnd");
   return /* @__PURE__ */ r.jsxs(
     "div",
     {
       className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
-      draggable: c ? "true" : "false",
+      draggable: a ? "true" : "false",
       onDragStart: (l) => {
-        l.dataTransfer.setData("text/plain", JSON.stringify(qe(n, ["_id", "_type", "_name"]))), o(n), setTimeout(() => {
+        l.dataTransfer.setData("text/plain", JSON.stringify(Ke(n, ["_id", "_type", "_name"]))), o(n), setTimeout(() => {
           e([]), t(null);
         }, 200);
       },
       children: [
-        /* @__PURE__ */ r.jsx(st, {}),
+        /* @__PURE__ */ r.jsx(ot, {}),
         s
       ]
     }
   );
 }, Ns = ({ selectedBlockElement: n, block: s }) => {
-  const e = Ee(), t = Se(), [, o] = D(), [, c] = M(), [l] = b(R), { floatingStyles: i, refs: d, update: m } = Qt({
+  const e = Te(), t = Ie(), [, o] = A(), [, a] = L(), [l] = b(P), { floatingStyles: i, refs: c, update: h } = Zt({
     placement: "top-start",
-    middleware: [Zt(), Gt()],
+    middleware: [Jt(), Qt()],
     elements: {
       reference: n
     }
   });
-  Jt(n, () => m(), n !== null);
-  const a = f(s, "_parent", null), u = I(f(s, "_name", "")) ? f(s, "_type", "") : f(s, "_name", "");
+  Vt(n, () => h(), n !== null);
+  const m = f(s, "_parent", null), d = I(f(s, "_name", "")) ? f(s, "_type", "") : f(s, "_name", "");
   return !n || !s || l ? null : /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsxs(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      ref: d.setFloating,
+      ref: c.setFloating,
       style: i,
       onClick: (p) => {
         p.stopPropagation(), p.preventDefault();
@@ -708,24 +703,24 @@ const _s = () => {
       onKeyDown: (p) => p.stopPropagation(),
       className: "z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        /* @__PURE__ */ r.jsx(Es, { label: u, block: s }),
+        /* @__PURE__ */ r.jsx(Ts, { label: d, block: s }),
         /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 px-1", children: [
-          a && /* @__PURE__ */ r.jsx(
-            ot,
+          m && /* @__PURE__ */ r.jsx(
+            nt,
             {
               className: "hover:scale-105",
               onClick: () => {
-                c([]), o([a]);
+                a([]), o([m]);
               }
             }
           ),
-          Nt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(nt, { className: "hover:scale-105", onClick: () => t([s == null ? void 0 : s._id]) }) : null,
-          Tt(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,
+          Mt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(it, { className: "hover:scale-105", onClick: () => e([s == null ? void 0 : s._id]) }) : null
         ] })
       ]
     }
   ) });
-}, Ts = ({ addVariant: n, e: s }) => {
+}, Ms = ({ addVariant: n, e: s }) => {
   n("hs-dropdown-open", [
     ({ modifySelectors: e, separator: t }) => {
       e(({ className: o }) => `.hs-dropdown.open > .${s(`hs-dropdown-open${t}${o}`)}`);
@@ -978,27 +973,27 @@ const _s = () => {
   }), n("hs-auto-mode-active", ({ modifySelectors: e, separator: t }) => {
     e(({ className: o }) => `.auto .${s(`hs-auto-mode-active${t}${o}`)}`);
   });
-}, Ms = ({ model: n }) => {
-  const [s] = Mt(), [e] = D(), [t] = Ce(), [o] = L(), [c] = M(), [l] = b(Ae), { document: i, window: d } = X(), [m] = B(i == null ? void 0 : i.getElementById("highlighted-block")), [a] = B(
+}, Ls = ({ model: n }) => {
+  const [s] = Lt(), [e] = A(), [t] = _e(), [o] = F(), [a] = L(), [l] = b(Se), { document: i, window: c } = Q(), [h] = _(i == null ? void 0 : i.getElementById("highlighted-block")), [m] = _(
     i == null ? void 0 : i.getElementById("selected-block")
-  ), [u] = B(
+  ), [d] = _(
     i == null ? void 0 : i.getElementById("selected-styling-block")
-  ), [p] = B(i == null ? void 0 : i.getElementById("dragged-block"));
+  ), [p] = _(i == null ? void 0 : i.getElementById("dragged-block"));
   j(() => {
     t ? i == null || i.documentElement.classList.add("dark") : i == null || i.documentElement.classList.remove("dark");
   }, [t, i]);
-  const x = f(s, "headingFont", "DM Sans"), k = f(s, "bodyFont", "DM Sans");
+  const x = f(s, "headingFont", "DM Sans"), $ = f(s, "bodyFont", "DM Sans");
   return j(() => {
-    const g = f(s, "primaryColor", "#000"), h = f(s, "secondaryColor", "#FFF"), y = f(s, "bodyBgLightColor", "#fff"), _ = f(s, "bodyBgDarkColor", "#000"), A = f(s, "bodyTextDarkColor", "#000"), P = f(s, "bodyTextLightColor", "#fff"), F = os([
+    const g = f(s, "primaryColor", "#000"), u = f(s, "secondaryColor", "#FFF"), k = f(s, "bodyBgLightColor", "#fff"), C = f(s, "bodyBgDarkColor", "#000"), D = f(s, "bodyTextDarkColor", "#000"), E = f(s, "bodyTextLightColor", "#fff"), R = ns([
       { color: g, name: "primary" },
-      { color: h, name: "secondary" }
-    ]), H = {
-      "bg-light": y,
-      "bg-dark": _,
-      "text-dark": A,
-      "text-light": P
+      { color: u, name: "secondary" }
+    ]), O = {
+      "bg-light": k,
+      "bg-dark": C,
+      "text-dark": D,
+      "text-light": E
     }, v = f(s, "roundedCorners", "0");
-    !d || !d.tailwind || (d.tailwind.config = {
+    !c || !c.tailwind || (c.tailwind.config = {
       darkMode: "class",
       theme: {
         extend: {
@@ -1011,35 +1006,35 @@ const _s = () => {
           },
           fontFamily: {
             heading: [x],
-            body: [k]
+            body: [$]
           },
           borderRadius: {
             DEFAULT: `${v || "0"}px`
           },
-          colors: { ...H, ...F }
+          colors: { ...O, ...R }
         }
       },
-      plugins: [es, ts, ss, d.tailwind.plugin.withOptions(() => Ts)]
+      plugins: [ts, ss, os, c.tailwind.plugin.withOptions(() => Ms)]
     });
-  }, [s, d, x, k]), j(() => {
-    a && (a.textContent = `${O(e, (g) => `[data-block-id="${g}"]`).join(",")}{
+  }, [s, c, x, $]), j(() => {
+    m && (m.textContent = `${z(e, (g) => `[data-block-id="${g}"]`).join(",")}{
                 outline: 1px solid ${e.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
-  }, [e, a]), j(() => {
+  }, [e, m]), j(() => {
     if (!l) {
       p.textContent = "";
       return;
     }
     p.textContent = `[data-block-id="${l}"]{ pointer-events: none !important; opacity: 0.2 !important}`;
   }, [l]), j(() => {
-    m && (m.textContent = o ? `[data-style-id="${o}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
-  }, [o, e, m]), j(() => {
-    u && (u.textContent = `${O(c, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
+    h && (h.textContent = o ? `[data-style-id="${o}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
+  }, [o, e, h]), j(() => {
+    d && (d.textContent = `${z(a, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
-  }, [c, u]), j(() => {
-    const g = f(s, "bodyTextLightColor", "#64748b"), h = f(s, "bodyTextDarkColor", "#94a3b8"), y = f(s, "bodyBgLightColor", "#FFFFFF"), _ = f(s, "bodyBgDarkColor", "#0f172a");
-    i.body.className = `font-body antialiased text-[${g}] bg-[${y}] dark:text-[${h}] dark:bg-[${_}]`;
+  }, [a, d]), j(() => {
+    const g = f(s, "bodyTextLightColor", "#64748b"), u = f(s, "bodyTextDarkColor", "#94a3b8"), k = f(s, "bodyBgLightColor", "#FFFFFF"), C = f(s, "bodyBgDarkColor", "#0f172a");
+    i.body.className = `font-body antialiased text-[${g}] bg-[${k}] dark:text-[${u}] dark:bg-[${C}]`;
   }, [s, i, n]), n === "page" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
     x && /* @__PURE__ */ r.jsx(
       "link",
@@ -1054,13 +1049,13 @@ const _s = () => {
         media: "all"
       }
     ),
-    k && x !== k && /* @__PURE__ */ r.jsx(
+    $ && x !== $ && /* @__PURE__ */ r.jsx(
       "link",
       {
         id: "body-font",
         rel: "stylesheet",
         type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${k.replace(
+        href: `https://fonts.googleapis.com/css2?family=${$.replace(
           / /g,
           "+"
         )}:wght@300;400;500;600;700;800;900&display=swap`,
@@ -1069,115 +1064,139 @@ const _s = () => {
     ),
     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";}` })
   ] }) : null;
-}, Ls = () => b(Lt), Fs = (n) => {
+}, Fs = () => b(Ft), Rs = (n, s) => {
+  const e = ["xs", "sm", "md", "lg", "xl", "2xl"], t = e.indexOf(s), o = n.split(" ");
+  let a = new Array(e.length).fill(!1);
+  for (const l of o) {
+    let [i, c] = l.split(":");
+    c || (c = i, i = "xs");
+    const h = e.indexOf(i);
+    if (h <= t) {
+      const m = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], d = ["hidden"];
+      if (m.includes(c))
+        for (let p = h; p < e.length; p++)
+          a[p] = !0;
+      else if (d.includes(c))
+        for (let p = h; p < e.length; p++)
+          a[p] = !1;
+    }
+  }
+  return a[t];
+}, Hs = (n) => {
   const s = {};
   return Object.keys(n).forEach((e) => {
-    ne(n[e]) && n[e].startsWith(fe) && (s[e] = n[e].replace(fe, "").split(","));
+    oe(n[e]) && n[e].startsWith(ge) && (s[e] = n[e].replace(ge, "").split(","));
   }), s;
-}, Rs = Ke((n) => {
-  const s = n.replace(Te, "").split(",");
-  return ns(s[0], s[1]);
+}, Ps = Ye((n) => {
+  const s = n.replace(Me, "").split(",");
+  return rs(s[0], s[1]);
 });
-function Ps(n, s) {
+function Os(n, s) {
   return f(n, `${s}_attrs`, {});
 }
-function Hs(n) {
-  const s = {};
-  return Object.keys(n).forEach((e) => {
-    if (ne(n[e]) && n[e].startsWith(Te)) {
-      const t = Rs(n[e]);
-      s.__key = e, s[e] = {
-        className: t,
-        "data-style-prop": e,
+function zs(n, s) {
+  const e = {};
+  return Object.keys(n).forEach((t) => {
+    if (oe(n[t]) && n[t].startsWith(Me)) {
+      const o = Ps(n[t]), a = Os(n, t);
+      e[t] = {
+        className: o,
+        "data-style-prop": t,
         "data-block-parent": n._id,
-        "data-style-id": `${e}-${n._id}`,
-        ...Ps(n, e)
+        "data-style-id": `${t}-${n._id}`,
+        ...a
       };
+      const l = K(a, "x-show") || K(a, "x-if");
+      l && (e.__isHidden = l && !Rs(o, s));
     }
-  }), s;
+  }), e;
 }
-function zs(n, s) {
+function Us(n, s) {
   const e = f(n, "_bindings", {});
-  return I(e) ? { ...n } : (Ye(e, (t, o) => {
-    ne(t) && f(s, t, null) && (n[o] = f(s, t, null));
+  return I(e) ? { ...n } : (Xe(e, (t, o) => {
+    oe(t) && f(s, t, null) && (n[o] = f(s, t, null));
   }), n);
 }
-function oe({ blocks: n }) {
-  const [s] = ie(), [e] = b(Ft), [t] = b(ae), [o] = b(Ne), [c] = Ls(), l = q((a) => Hs(a), []), [i] = Wt(), [d] = b(R), m = q(
-    (a) => a.reduce((u, p) => {
-      const x = f(c, p, {});
-      return { ...u, ...x };
+function se({ blocks: n }) {
+  const [s] = ne(), [e] = b(Rt), [t] = b(ie), [o] = b(Ne), [, a] = G(), [l] = Fs(), i = q((d) => zs(d, a), [a]), [c] = qt(), [h] = b(P), m = q(
+    (d) => d.reduce((p, x) => {
+      const $ = f(l, x, {});
+      return { ...p, ...$ };
     }, {}),
-    [c, s]
+    [l, s]
   );
   return /* @__PURE__ */ r.jsx(r.Fragment, { children: S.Children.toArray(
-    n.map((a, u) => {
-      if (d === a._id)
+    n.map((d, p) => {
+      if (h === d._id)
         return null;
-      const p = Fs(a), x = {};
-      I(p) || Object.keys(p).forEach((F) => {
-        x[F] = S.Children.toArray(
-          p[F].map((H) => /* @__PURE__ */ r.jsx(oe, { blocks: [Xe(s, { _id: H })] }))
+      const x = Hs(d), $ = {};
+      I(x) || Object.keys(x).forEach((R) => {
+        $[R] = S.Children.toArray(
+          x[R].map((O) => /* @__PURE__ */ r.jsx(se, { blocks: [Ge(s, { _id: O })] }))
         );
       });
-      const k = we(s, { _parent: a._id });
-      x.children = k.length ? /* @__PURE__ */ r.jsx(oe, { blocks: k }) : null;
-      const g = rs(a._type), h = f(g, "builderComponent", f(g, "component", null));
-      if (Ge(h))
-        return /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${a == null ? void 0 : a._type} not registered -->` });
-      const y = ee(g, "getBlockStateFrom") ? g == null ? void 0 : g.getBlockStateFrom(a, s) : [], _ = m(y), A = l(a), P = f(A, "__key", "styles");
-      return ee(A, P + ".x-show") && !V(e, a._id) ? null : /* @__PURE__ */ r.jsx(J, { children: S.createElement(h, {
+      const g = je(s, { _parent: d._id });
+      $.children = g.length ? /* @__PURE__ */ r.jsx(se, { blocks: g }) : null;
+      const u = is(d._type), k = f(u, "builderComponent", f(u, "component", null));
+      if (Qe(k))
+        return /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${d == null ? void 0 : d._type} not registered -->` });
+      const C = K(u, "getBlockStateFrom") ? u == null ? void 0 : u.getBlockStateFrom(d, s) : [], D = m(C), E = i(d);
+      return f(E, "__isHidden", !1) && !fe(e, d._id) ? null : /* @__PURE__ */ r.jsx(V, { children: S.createElement(k, {
         blockProps: {
-          "data-block-id": a._id,
-          "data-block-type": a._type,
+          ...fe(e, d._id) ? { "force-show": "" } : {},
+          "data-block-id": d._id,
+          "data-block-type": d._type,
           ...t ? (
             // @ts-ignore
-            { "data-dnd": Rt(a._type, t == null ? void 0 : t._type) ? "yes" : "no" }
+            {
+              "data-dnd": Ht(d._type, t == null ? void 0 : t._type) ? "yes" : "no",
+              "data-dnd-dragged": t._id === d._id ? "yes" : "no"
+            }
           ) : {},
-          ...o === a._id ? { "data-drop": "yes" } : {}
+          ...o === d._id ? { "data-drop": "yes" } : {}
         },
-        index: u,
-        ...zs(a, i),
-        ...ke(A, ["__key"]),
-        ...x,
+        index: p,
+        ...Us(d, c),
+        ...we(E, ["__isHidden"]),
+        ...$,
         inBuilder: !0,
-        blockState: _
+        blockState: D
       }) });
     })
   ) });
 }
-const Os = () => {
-  const [n] = ie(), s = I(n) ? null : /* @__PURE__ */ r.jsx(qt, { children: /* @__PURE__ */ r.jsx(oe, { blocks: we(n, (e) => I(e._parent)) }) });
+const Ws = () => {
+  const [n] = ne(), s = I(n) ? null : /* @__PURE__ */ r.jsx(Kt, { children: /* @__PURE__ */ r.jsx(se, { blocks: je(n, (e) => I(e._parent)) }) });
   return /* @__PURE__ */ r.jsx(r.Fragment, { children: s });
-}, Us = (n, s) => n.querySelector(`[data-style-id="${s}"]`), Ws = () => {
-  const [n] = b(Pt), [s] = Ie(), [e] = re(), [, t] = D(), o = Ht(), [, c] = L(), l = ue(null), i = ue(null), [d, m] = B({ width: 0, height: 0 }), a = fs(d), [u, p] = B(0), [x, k] = B([]), [, g] = B([]), [, h] = b(zt), [y, _] = M(), A = U("loading", !1), P = U("htmlDir", "ltr");
+}, qs = (n, s) => n.querySelector(`[data-style-id="${s}"]`), Ks = () => {
+  const [n] = b(Pt), [s] = Ee(), [e] = G(), [, t] = A(), o = Ot(), [, a] = F(), l = de(null), i = de(null), [c, h] = _({ width: 0, height: 0 }), m = xs(c), [d, p] = _(0), [x, $] = _([]), [, g] = _([]), [, u] = b(zt), [k, C] = L(), D = U("loading", !1), E = U("htmlDir", "ltr");
   j(() => {
-    const { clientWidth: v, clientHeight: E } = i.current;
-    m({ width: v, height: E }), u === 0 && p(v);
-  }, [i, e, u]);
-  const F = (v, E = 0) => {
+    const { clientWidth: v, clientHeight: T } = i.current;
+    h({ width: v, height: T }), d === 0 && p(v);
+  }, [i, e, d]);
+  const R = (v, T = 0) => {
     const { top: N } = v.getBoundingClientRect();
-    return N + E >= 0 && N - E <= window.innerHeight;
+    return N + T >= 0 && N - T <= window.innerHeight;
   };
   j(() => {
-    var v, E;
+    var v, T;
     if (o && o.type !== "Multiple" && l.current) {
       const N = Pe(l.current.contentDocument, o._id);
-      N && (F(N) || (E = (v = l.current) == null ? void 0 : v.contentWindow) == null || E.scrollTo({ top: N.offsetTop, behavior: "smooth" }), k([N]));
+      N && (R(N) || (T = (v = l.current) == null ? void 0 : v.contentWindow) == null || T.scrollTo({ top: N.offsetTop, behavior: "smooth" }), $([N]));
     }
   }, [o]), j(() => {
-    if (!I(y) && l.current) {
-      const v = Us(
+    if (!I(k) && l.current) {
+      const v = qs(
         l.current.contentDocument,
-        K(y).id
+        Y(k).id
       );
       g(v ? [v] : [null]);
     } else
       g([null]);
-  }, [y]);
-  const H = Ue(() => {
-    let v = gs;
-    return v = v.replace("__HTML_DIR__", P), n === "offline" && (v = v.replace(
+  }, [k]);
+  const O = We(() => {
+    let v = fs;
+    return v = v.replace("__HTML_DIR__", E), n === "offline" && (v = v.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
     ), v = v.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), v = v.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), v;
@@ -1186,32 +1205,32 @@ const Os = () => {
     "div",
     {
       onClick: () => {
-        t([]), _([]);
+        t([]), C([]);
       },
-      onMouseLeave: () => setTimeout(() => c(""), 300),
+      onMouseLeave: () => setTimeout(() => a(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
-      style: u > 0 && !I(a) ? { width: s ? "100%" : u } : {},
+      style: d > 0 && !I(m) ? { width: s ? "100%" : d } : {},
       ref: i,
       children: /* @__PURE__ */ r.jsxs(
-        vs,
+        $s,
         {
-          contentDidMount: () => h(l.current),
+          contentDidMount: () => u(l.current),
           ref: l,
           id: "canvas-iframe",
-          style: { width: `${e}px`, ...a },
+          style: { width: `${e}px`, ...m },
           className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: H,
+          initialContent: O,
           children: [
-            /* @__PURE__ */ r.jsx(Is, {}),
+            /* @__PURE__ */ r.jsx(Es, {}),
             /* @__PURE__ */ r.jsx(
               Ns,
               {
                 block: o,
-                selectedBlockElement: K(x)
+                selectedBlockElement: Y(x)
               }
             ),
-            /* @__PURE__ */ r.jsx(Ms, { model: "page" }),
-            /* @__PURE__ */ r.jsx(is, { children: /* @__PURE__ */ r.jsx(Ss, { children: A ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(te, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(Os, {}) }) }),
+            /* @__PURE__ */ r.jsx(Ls, { model: "page" }),
+            /* @__PURE__ */ r.jsx(ls, { children: /* @__PURE__ */ r.jsx(Is, { children: D ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(ee, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(Ws, {}) }) }),
             /* @__PURE__ */ r.jsx("br", {}),
             /* @__PURE__ */ r.jsx(
               "div",
@@ -1225,16 +1244,16 @@ const Os = () => {
       )
     }
   );
-}, qs = S.lazy(() => import("./CodeEditor-zYBqhBv3.js")), Qo = () => {
-  const [n] = Ot();
+}, Ys = S.lazy(() => import("./CodeEditor-zYBqhBv3.js")), Vo = () => {
+  const [n] = Ut();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
-    /* @__PURE__ */ r.jsx(ms, {}),
+    /* @__PURE__ */ r.jsx(gs, {}),
     /* @__PURE__ */ r.jsxs("div", { className: "relative flex h-full flex-col 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(J, { fallback: /* @__PURE__ */ r.jsx(te, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(Kt, { children: /* @__PURE__ */ r.jsx(Ws, {}) }) }),
-      n ? /* @__PURE__ */ r.jsx(J, { fallback: /* @__PURE__ */ r.jsx(te, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(ls, { enable: { top: !0, bottom: !1 }, className: "max-h-[400px] min-h-[200px]", children: /* @__PURE__ */ r.jsx(qs, {}) }) }) : null
+      /* @__PURE__ */ r.jsx(V, { fallback: /* @__PURE__ */ r.jsx(ee, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(Yt, { children: /* @__PURE__ */ r.jsx(Ks, {}) }) }),
+      n ? /* @__PURE__ */ r.jsx(V, { fallback: /* @__PURE__ */ r.jsx(ee, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(as, { enable: { top: !0, bottom: !1 }, className: "max-h-[400px] min-h-[200px]", children: /* @__PURE__ */ r.jsx(Ys, {}) }) }) : null
     ] })
   ] });
 };
 export {
-  Qo as default
+  Vo as default
 };