@chaibuilder/sdk 1.2.56 → 1.2.58

package/dist/{CanvasArea-CqILE5PR.js → CanvasArea-kMGTLtCw.js}

@@ -1,47 +1,45 @@
-var He = Object.defineProperty;
-var Pe = (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) => (Pe(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 A, { createElement as ce, useCallback as O, useState as B, useEffect as j, Component as $e, Children as ze, Suspense as J, useRef as de, useMemo as Oe } from "react";
-import { map as H, includes as pe, toUpper as X, round as Ue, throttle as ye, has as be, isEmpty as I, first as U, omit as We, pick as qe, get as f, isString as se, memoize as Ke, each as Ye, find as Ge, filter as ke, isNull as Xe } from "lodash-es";
-import { ResetIcon as ue, SunIcon as Qe, MobileIcon as he, 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 { k as we, B as W, w as je, aq as Ce, ar as it, as as at, at as lt, au as ct, p as oe, X as dt, h as P, av as pt, aw as ut, ax as ht, ay as mt, az as gt, aA as ft, aB as _e, L as D, Y as M, 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, aC as _t, aD as Bt, q as Be, ap as z, aE as Dt, n as At, D as T, aF as De, Q as It, aG as F, aH as St, j as ne, x as Ae, F as Ie, H as Se, V as Et, aI as Nt, aJ as Mt, aK as Tt, G as Lt, aL as Ft, aM as Rt, aN as Ht, aO as Pt, M as zt, aP as Ot, ah as V, i as Ut, a2 as Wt } from "./ChaiBuilderEditor-tkzS851D.js";
+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-grcmKbfu.js";
 import { useTranslation as re } from "react-i18next";
 import { useAtom as b } from "jotai";
-import { SparklesIcon as qt } from "lucide-react";
+import { SparklesIcon as Xt } from "lucide-react";
 import me from "react-dom";
 import w from "prop-types";
-import { Quill as Kt } from "react-quill";
-import { d as ie, a as Ee } from "./atoms-ZOWyNoiC.js";
-import { flip as Yt } from "@floating-ui/dom";
-import { useFloating as Gt, shift as Xt } from "@floating-ui/react-dom";
-import { useResizeObserver as Qt } from "@react-hookz/web";
-import { useFeature as Zt } from "flagged";
-import Jt from "@tailwindcss/typography";
-import Vt from "@tailwindcss/forms";
-import es from "@tailwindcss/aspect-ratio";
-import ts from "tailwindcss-palette-generator";
-import { twMerge as ss } from "tailwind-merge";
-import { S as ge, a as Ne } from "./MODIFIERS-fd5XOmum.js";
-import { getBlockComponent as os } from "@chaibuilder/runtime";
-import { u as ns } from "./useCanvasSettings-rEZHbw3s.js";
-import { Provider as rs } from "react-wrap-balancer";
-import { Resizable as is } 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 "clsx";
-import "@radix-ui/react-scroll-area";
-import "i18next";
-import "./Functions-7jnEwJyw.js";
-import "tree-model";
-import "./utils-VpVqnC9m.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
+import "./utils-VpVqnC9m.js";
+import "clsx";
 import "@radix-ui/react-switch";
 import "@radix-ui/react-slot";
 import "@radix-ui/react-accordion";
 import "@radix-ui/react-alert-dialog";
 import "@radix-ui/react-dialog";
 import "@radix-ui/react-label";
+import "@radix-ui/react-scroll-area";
 import "@radix-ui/react-tabs";
 import "@radix-ui/react-tooltip";
 import "@radix-ui/react-popover";
@@ -54,21 +52,24 @@ import "@radix-ui/react-toast";
 import "cmdk";
 import "@radix-ui/react-context-menu";
 import "react-icons-picker";
+import "./Functions-7jnEwJyw.js";
+import "tree-model";
+import "i18next";
 import "react-hotkeys-hook";
 import "./index-VBXQixVm.js";
-const as = () => {
-  const { hasUndo: n, hasRedo: s, undo: e, redo: t } = we();
+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(W, { disabled: !n(), size: "sm", onClick: e, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(ue, {}) }),
-    /* @__PURE__ */ r.jsx(W, { disabled: !s(), onClick: t, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(ue, { 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 ls() {
-  const [n, s] = je();
+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(
-      Ce,
+      Be,
       {
         id: "dark-mode-switch",
         checked: n,
@@ -85,10 +86,10 @@ function ls() {
         )
       }
     ),
-    /* @__PURE__ */ r.jsx(it, { className: "size-4 ml-3 shrink-0" })
+    /* @__PURE__ */ r.jsx(Wt, { className: "size-4 ml-3 shrink-0" })
   ] });
 }
-const fe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
+const xe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
   "svg",
   {
     className: n ? "rotate-90" : "",
@@ -111,7 +112,7 @@ const fe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       )
     ]
   }
-), cs = [
+), ps = [
   {
     title: "mobile_xs_title",
     content: "mobile_xs_content",
@@ -130,48 +131,48 @@ const fe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     title: "tablet_md_title",
     content: "tablet_md_content",
     breakpoint: "md",
-    icon: /* @__PURE__ */ r.jsx(fe, {}),
+    icon: /* @__PURE__ */ r.jsx(xe, {}),
     width: 800
   },
   {
     title: "tablet_lg_title",
     content: "tablet_lg_content",
     breakpoint: "lg",
-    icon: /* @__PURE__ */ r.jsx(fe, { landscape: !0 }),
+    icon: /* @__PURE__ */ r.jsx(xe, { landscape: !0 }),
     width: 1024
   },
   {
     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
   }
-], xe = ({
+], ve = ({
   title: n,
   content: s,
   currentBreakpoint: e,
   breakpoint: t,
   width: o,
-  icon: c,
-  onClick: a
+  icon: a,
+  onClick: l
 }) => {
   const { t: i } = re();
-  return /* @__PURE__ */ r.jsxs(at, { children: [
-    /* @__PURE__ */ r.jsx(lt, { asChild: !0, children: /* @__PURE__ */ r.jsx(
-      W,
+  return /* @__PURE__ */ r.jsxs(lt, { children: [
+    /* @__PURE__ */ r.jsx(at, { asChild: !0, children: /* @__PURE__ */ r.jsx(
+      X,
       {
-        onClick: () => a(o),
+        onClick: () => l(o),
         size: "sm",
         variant: t === e ? "secondary" : "ghost",
-        children: c
+        children: a
       }
     ) }),
     /* @__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: [
@@ -179,26 +180,26 @@ const fe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       /* @__PURE__ */ r.jsx("p", { className: "text-xs", children: i(s) })
     ] }) }) })
   ] });
-}, ds = () => {
-  const [, n, s] = oe(), [e, t] = dt(), { t: o } = re(), c = P("breakpoints", cs), a = (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: H(c, (i) => /* @__PURE__ */ ce(xe, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
-    H(
-      c.filter((i) => pe(e, X(i.breakpoint))),
-      (i) => /* @__PURE__ */ ce(xe, { ...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(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(Ve, { className: "scale-90 transform" }) }) }),
+      /* @__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(
+        z(a, (i) => /* @__PURE__ */ r.jsx(
           ft,
           {
             disabled: i.breakpoint === "xs",
-            onCheckedChange: () => a(X(i.breakpoint)),
-            checked: pe(e, X(i.breakpoint)),
+            onCheckedChange: () => l(Z(i.breakpoint)),
+            checked: pe(e, Z(i.breakpoint)),
             children: o(i.title)
           },
           i.breakpoint
@@ -206,19 +207,19 @@ const fe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       ] })
     ] })
   ] });
-}, ps = () => {
-  const { t: n } = re(), { setNewBlocks: s } = _e(), [, e] = D(), [, t] = M(), o = O(() => {
+}, 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(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(et, {}),
+    /* @__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($t, { className: "border-border", children: [
-      /* @__PURE__ */ r.jsxs(yt, { children: [
-        /* @__PURE__ */ r.jsx(bt, { children: n("clear_canvas_title") }),
+      /* @__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(wt, { children: [
@@ -227,15 +228,15 @@ const fe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       ] })
     ] })
   ] }) });
-}, us = () => {
+}, ms = () => {
   const [n, s] = b(_t);
-  return P("askAiCallBack", null) ? /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-2", children: [
+  return U("askAiCallBack", null) ? /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-2", children: [
     /* @__PURE__ */ r.jsxs(Bt, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
-      /* @__PURE__ */ r.jsx(qt, { className: "w-4" }),
+      /* @__PURE__ */ r.jsx(Xt, { className: "w-4" }),
       "AI Assistant"
     ] }),
     /* @__PURE__ */ r.jsx(
-      Ce,
+      Be,
       {
         className: "scale-90",
         checked: n,
@@ -246,34 +247,34 @@ const fe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       }
     )
   ] }) : null;
-}, hs = () => {
-  const n = P("darkMode", !0), [s] = Be();
+}, 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(ds, {}),
-      /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx(us, {}),
+      /* @__PURE__ */ r.jsx(W, { orientation: "vertical" }),
       n ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        /* @__PURE__ */ r.jsx(ls, {}),
-        /* @__PURE__ */ r.jsx(z, { orientation: "vertical" })
+        /* @__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: [
-          Ue(s, 0),
+          qe(s, 0),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(as, {})
+      /* @__PURE__ */ r.jsx(W, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx(cs, {})
     ] }),
     /* @__PURE__ */ r.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ r.jsx(ps, {}),
-      /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(us, {})
+      /* @__PURE__ */ r.jsx(hs, {}),
+      /* @__PURE__ */ r.jsx(W, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx(ms, {})
     ] })
   ] });
-}, ms = `<!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 fe = ({ 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 fe = ({ 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>`, gs = (n) => {
-  const [s] = oe(), [, e] = Be(), [t, o] = B({}), c = O(() => {
-    const { width: a, height: i } = n;
-    if (a < s) {
-      const d = parseFloat((a / s).toFixed(2).toString());
-      let l = {};
-      const h = i * d;
-      i && (l = {
+</html>`, xs = (n) => {
+  const [s] = G(), [, e] = De(), [t, o] = _({}), a = q(() => {
+    const { width: l, height: i } = n;
+    if (l < s) {
+      const c = parseFloat((l / s).toFixed(2).toString());
+      let u = {};
+      const m = i * c;
+      i && (u = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (i - h) / h * 100 + "%"
+        height: 100 + (i - m) / m * 100 + "%"
       }), o({
         position: "relative",
         top: 0,
-        transform: `scale(${d})`,
+        transform: `scale(${c})`,
         transformOrigin: "top left",
-        ...l,
+        ...u,
         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, Te;
-typeof document < "u" && (Me = document);
-typeof window < "u" && (Te = window);
-const Le = A.createContext({ document: Me, window: Te }), q = () => A.useContext(Le), { Provider: fs, Consumer: Yo } = Le;
-class Fe extends $e {
+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,31 +365,31 @@ class Fe extends $e {
     this.props.contentDidUpdate();
   }
   render() {
-    return ze.only(this.props.children);
+    return Ue.only(this.props.children);
   }
 }
-N(Fe, "propTypes", {
+M(He, "propTypes", {
   children: w.element.isRequired,
   contentDidMount: w.func.isRequired,
   contentDidUpdate: w.func.isRequired
 });
-class ee extends $e {
+class te extends ye {
   constructor(e, t) {
     super(e, t);
-    N(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);
     });
-    N(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
-    N(this, "loadCheck", () => setInterval(() => {
+    M(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
-    this._isMounted = !1, this.nodeRef = A.createRef(), this.state = { iframeLoaded: !1 };
+    this._isMounted = !1, this.nodeRef = S.createRef(), this.state = { iframeLoaded: !1 };
   }
   componentDidMount() {
     this._isMounted = !0, this.getDoc() && this.nodeRef.current.contentWindow.addEventListener("DOMContentLoaded", this.handleLoad);
@@ -406,8 +410,8 @@ class ee extends $e {
     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(Fe, { contentDidMount: t, contentDidUpdate: o, children: /* @__PURE__ */ r.jsx(fs, { value: { document: e, window: c }, 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(a, 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 ee extends $e {
 // 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(ee, "propTypes", {
+M(te, "propTypes", {
   style: w.object,
   // eslint-disable-line
   head: w.node,
@@ -432,7 +436,7 @@ N(ee, "propTypes", {
   contentDidMount: w.func,
   contentDidUpdate: w.func,
   children: w.oneOfType([w.element, w.arrayOf(w.element)])
-}), N(ee, "defaultProps", {
+}), M(te, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -443,289 +447,280 @@ N(ee, "propTypes", {
   },
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
-const xs = A.forwardRef((n, s) => /* @__PURE__ */ r.jsx(ee, { ...n, forwardedRef: s }));
-function ae(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 v = null, _ = [], R = null, Q = null;
-const ve = (n, s, e) => {
-  if (!v || !n)
+let y = null, B = [], H = null, J = null;
+const $e = (n, s, e) => {
+  if (!y || !n)
     return;
-  const t = v == null ? void 0 : v.getElementById("placeholder"), o = _.map(([d]) => d), c = o.reduce(
-    (d, l) => Math.abs(l - e) < Math.abs(d - e) ? l : d,
+  const t = y == null ? void 0 : y.getElementById("placeholder"), o = B.map(([c]) => c), a = o.reduce(
+    (c, u) => Math.abs(u - e) < Math.abs(c - e) ? u : c,
     0
-  ), a = o.indexOf(c);
-  if (!_[a])
+  ), l = o.indexOf(a);
+  if (!B[l])
     return;
-  const i = _[a];
+  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 vs(n, s) {
+function bs(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);
+  return s.forEach((o, a) => {
+    const l = Math.abs(o[0] - n);
+    l < t && (t = l, e = a);
   }), e;
 }
-const $s = (n) => {
-  const e = ae(n) === "horizontal";
-  _ = [], 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, a = e ? [t.offsetTop, t.clientHeight] : [t.offsetLeft, t.clientWidth];
-    if (_.push([c, a[0], a[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;
-      _.push([i, a[0], a[1]]);
+      B.push([i, l[0], l[1]]);
     }
   });
-}, ys = ye((n) => {
+}, ks = ke((n) => {
   var o;
-  const s = n.target, e = ae(s), t = (o = v == null ? void 0 : v.defaultView) == null ? void 0 : o.scrollY;
-  e === "vertical" ? ve(s, e, n.clientY + t) : ve(s, e, n.clientX);
+  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 = v == null ? void 0 : v.getElementById("placeholder");
-  n.style.display = "none", bs("pointer-none"), ks();
+function be() {
+  const n = y == null ? void 0 : y.getElementById("placeholder");
+  n.style.display = "none", ws("pointer-none"), js();
 }
-function bs(n) {
-  (v == null ? void 0 : v.querySelectorAll(`.${n}`)).forEach((e) => {
+function ws(n) {
+  (y == null ? void 0 : y.querySelectorAll(`.${n}`)).forEach((e) => {
     e.classList.remove(n);
   });
 }
-function ks() {
-  const n = v == null ? void 0 : v.querySelector('[data-drop="yes"]');
+function js() {
+  const n = y == null ? void 0 : y.querySelector('[data-drop="yes"]');
   n && n.removeAttribute("data-drop");
 }
-const ws = () => {
-  const { document: n } = q(), [s, e] = b(Dt), { addCoreBlock: t } = At(), [, o] = T(), [, c] = D(), { moveBlocks: a } = _e(), [, i] = b(De), [d, l] = b(ie), [, h] = b(Ee);
-  return v = 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, u] = b(ie), [, m] = b(Ne), d = () => {
+    be(), e(!1), i(""), u(null), m(null), B = [];
+  };
+  return y = n, {
     isDragging: s,
-    onDragOver: (p) => {
-      p.preventDefault(), p.stopPropagation(), ys(p);
+    onDragOver: (h) => {
+      h.preventDefault(), h.stopPropagation(), ks(h);
     },
-    onDrop: (p) => {
-      var C;
-      R == null || R.classList.remove("drop-target");
-      const u = R, y = ae(u) === "vertical" ? p.clientY + ((C = v == null ? void 0 : v.defaultView) == null ? void 0 : C.scrollY) : p.clientX;
-      Q = vs(y, _);
-      const g = d, m = u.getAttribute("data-block-id");
-      if (!be(g, "_id")) {
-        t(g, m === "canvas" ? null : m, Q), setTimeout(() => {
-          Z();
-        }, 300), _ = [], e(!1), i(""), l(null), h(null);
+    onDrop: (h) => {
+      var D;
+      H == null || H.classList.remove("drop-target");
+      const x = H, g = le(x) === "vertical" ? h.clientY + ((D = y == null ? void 0 : y.defaultView) == null ? void 0 : D.scrollY) : h.clientX;
+      J = bs(g, B);
+      const p = c, k = x.getAttribute("data-block-id");
+      if (p === H) {
+        d();
         return;
       }
-      let k = u.getAttribute("data-block-id");
-      k === null && (k = p.target.parentElement.getAttribute("data-block-id")), a([g._id], k, Q), Z(), e(!1), i(""), _ = [], setTimeout(() => Z(), 300);
+      if (!K(p, "_id")) {
+        t(p, k === "canvas" ? null : k, J), setTimeout(d, 300);
+        return;
+      }
+      let C = x.getAttribute("data-block-id");
+      C === null && (C = h.target.parentElement.getAttribute("data-block-id")), l([p._id], C, J), d(), setTimeout(be, 300);
     },
-    onDragEnter: (p) => {
-      const u = p, $ = u.target;
-      R = $;
-      const y = $.getAttribute("data-block-id");
-      h(y), u.stopPropagation(), u.preventDefault(), _ = [], $s($), console.log(_, p.clientY, v.defaultView.scrollY), $.classList.add("drop-target"), e(!0), o(""), c([]);
+    onDragEnter: (h) => {
+      const x = h, $ = 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 le(n) {
+function ae(n) {
   return n.getAttribute("data-block-id") ? n : n.closest("[data-block-id]");
 }
-function js(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 Cs = () => {
-  const n = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], s = It(), [, e] = T(), [t, o] = b(F);
-  return (c) => {
-    var p;
+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 a = le(c.target), i = a.getAttribute("data-block-type");
+    const l = ae(a.target), i = l.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 Kt(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), js(l), o(""), e("");
+    const c = l.cloneNode(!0);
+    l.style.display = "none", Array.from(c.attributes).forEach((h) => {
+      h.name !== "class" && c.removeAttribute(h.name);
+    }), i === "Text" && (c.style.display = "inline-block"), l.parentNode.insertBefore(c, l.nextSibling);
+    const u = new Gt(c, { placeholder: "Type here..." });
+    function m() {
+      const h = u.getText(0, u.getLength());
+      s([l.getAttribute("data-block-id")], { content: h }), l.removeAttribute("style"), c.removeEventListener("blur", m, !0), _s(u), 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"));
+    c.addEventListener("blur", m, !0), c.addEventListener("keydown", (h) => {
+      (h.key === "Enter" || h.key === "Escape") && m();
+    }), u.focus(), (d = c.querySelector(".ql-clipboard")) == null || d.remove(), o(l.getAttribute("data-block-id"));
   };
-}, _s = () => {
-  const [, n] = M(), [s, e] = D(), [, t] = T(), [o] = b(F), [c] = b(St);
-  return (a) => {
+}, As = () => {
+  const [, n] = L(), [s, e] = A(), [, t] = F(), [o] = b(P), [a] = b(It);
+  return (l) => {
     if (o)
       return;
-    a.stopPropagation();
-    const i = le(a.target);
+    l.stopPropagation();
+    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"), l = i.getAttribute("data-style-id"), h = i.getAttribute("data-block-parent");
-      s.includes(h) || c == null || c.closeAll(), n([{ id: l, prop: d, blockId: h }]), e([h]);
+      const c = i.getAttribute("data-style-prop"), u = i.getAttribute("data-style-id"), m = i.getAttribute("data-block-parent");
+      s.includes(m) || a == null || a.closeAll(), n([{ id: u, 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("");
   };
-}, Bs = ye((n, s) => {
-  const e = le(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), Ds = () => {
-  const [, n] = T(), [s] = b(F);
+}, 100), Ss = () => {
+  const [, n] = F(), [s] = b(P);
   return (e) => {
-    s || Bs(e, n);
+    s || Ds(e, n);
   };
-}, As = ({ children: n }) => {
-  const { document: s } = q(), [e] = D(), [t, o] = M();
+}, Is = ({ children: n }) => {
+  const { document: s } = Q(), [e] = A(), [t, o] = L();
   j(() => {
     setTimeout(() => {
       if (!I(t))
         return;
-      const l = Re(s, U(e));
-      if (l) {
-        const h = l.getAttribute("data-style-prop");
-        if (h) {
-          const p = l.getAttribute("data-style-id"), u = l.getAttribute("data-block-parent");
-          o([{ id: p, prop: h, blockId: u }]);
+      const u = Pe(s, Y(e));
+      if (u) {
+        const m = u.getAttribute("data-style-prop");
+        if (m) {
+          const d = u.getAttribute("data-style-id"), h = u.getAttribute("data-block-parent");
+          o([{ id: d, prop: m, blockId: h }]);
         }
       }
     }, 100);
   }, [s, e, o, t]);
-  const c = Cs(), a = _s(), i = Ds(), d = ws();
+  const a = Bs(), l = As(), i = Ss(), c = Cs();
   return /* @__PURE__ */ r.jsx(
     "div",
     {
       "data-block-id": "canvas",
       id: "canvas",
-      onClick: a,
-      onDoubleClick: c,
+      onClick: l,
+      onDoubleClick: a,
       onMouseMove: i,
-      ...We(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
     }
   );
-}, Re = (n, s) => n.querySelector(`[data-block-id="${s}"]`), Is = () => {
-  const { window: n } = q(), [s, e] = D(), [t] = ne(), [, o] = M(), { undo: c, redo: a } = we(), i = Ae(), [, d] = Ie(), l = Se(), { savePage: h } = Et(), [p] = b(F), [, u] = b(Nt), $ = (g) => {
-    g.key === "Enter" && (g.preventDefault(), s.length === 1 && u(U(s)));
-  }, y = (g) => {
-    const m = t.find((k) => k._id === g);
-    return m ? m._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(), u = Te(), { savePage: m } = Et(), [d] = b(P), [, h] = b(Tt), x = (g) => {
+    g.key === "Enter" && (g.preventDefault(), s.length === 1 && h(Y(s)));
+  }, $ = (g) => {
+    const p = t.find((k) => k._id === g);
+    return p ? p._parent : null;
   };
   return j(() => {
-    const g = (m) => {
-      if (m.key === "Escape") {
+    const g = (p) => {
+      if (p.key === "Escape") {
         e([]), o([]);
         return;
       }
-      if ($(m), !p && (m.key === "Delete" || m.key === "Backspace") && (m.preventDefault(), l(s)), m.ctrlKey || m.metaKey) {
-        if (m.key === "ArrowUp") {
-          m.preventDefault();
-          const k = s.length > 0 ? y(s[0]) : null;
+      if (x(p), !d && (p.key === "Delete" || p.key === "Backspace") && (p.preventDefault(), u(s)), p.ctrlKey || p.metaKey) {
+        if (p.key === "ArrowUp") {
+          p.preventDefault();
+          const k = s.length > 0 ? $(s[0]) : null;
           k && e([k]);
         }
-        if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(m.key)) {
-          if (p && ["x", "z", "v"].includes(m.key))
+        if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(p.key)) {
+          if (d && ["x", "z", "v"].includes(p.key))
             return !0;
-          m.preventDefault();
+          p.preventDefault();
         }
-        m.key === "s" && (m.stopPropagation(), m.preventDefault(), h()), m.key === "z" && c(), m.key === "y" && a(), m.key === "d" && i(s);
+        p.key === "s" && (p.stopPropagation(), p.preventDefault(), m()), p.key === "z" && a(), p.key === "y" && l(), p.key === "d" && i(s);
       }
     };
     return n.removeEventListener("keydown", g), n.addEventListener("keydown", g), () => {
       n.removeEventListener("keydown", g);
     };
-  }, [s, e, c, l, d, a, i, p, h, n]), null;
-}, Ss = ({ block: n, label: s }) => {
-  const [, e] = D(), [, t] = T(), [, o] = b(ie), c = Zt("dnd");
+  }, [s, e, a, u, 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",
-      onDragStart: (a) => {
-        a.dataTransfer.setData("text/plain", JSON.stringify(qe(n, ["_id", "_type", "_name"]))), o(n), setTimeout(() => {
+      draggable: a ? "true" : "false",
+      onDragStart: (l) => {
+        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
       ]
     }
   );
-}, Es = ({ selectedBlockElement: n, block: s }) => {
-  const e = Se(), t = Ae(), [, o] = D(), [, c] = M(), [a] = b(F), { floatingStyles: i, refs: d, update: l } = Gt({
+}, Ns = ({ selectedBlockElement: n, block: s }) => {
+  const e = Te(), t = Ie(), [, o] = A(), [, a] = L(), [l] = b(P), { floatingStyles: i, refs: c, update: u } = Zt({
     placement: "top-start",
-    middleware: [Xt(), Yt()],
+    middleware: [Jt(), Qt()],
     elements: {
       reference: n
     }
   });
-  Qt(n, () => l(), n !== null);
-  const h = f(s, "_parent", null), p = I(f(s, "_name", "")) ? f(s, "_type", "") : f(s, "_name", "");
-  return !n || !s || a ? null : /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsxs(
+  Vt(n, () => u(), 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: (u) => {
-        u.stopPropagation(), u.preventDefault();
+      onClick: (h) => {
+        h.stopPropagation(), h.preventDefault();
       },
-      onKeyDown: (u) => u.stopPropagation(),
+      onKeyDown: (h) => h.stopPropagation(),
       className: "z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        /* @__PURE__ */ r.jsx(Ss, { label: p, block: s }),
+        /* @__PURE__ */ r.jsx(Ts, { label: d, block: s }),
         /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 px-1", children: [
-          h && /* @__PURE__ */ r.jsx(
-            ot,
+          m && /* @__PURE__ */ r.jsx(
+            nt,
             {
               className: "hover:scale-105",
               onClick: () => {
-                c([]), o([h]);
+                a([]), o([m]);
               }
             }
           ),
-          Mt(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
         ] })
       ]
     }
   ) });
-}, Ns = ({ 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 Cs = () => {
   }), 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] = Lt(), [e] = D(), [t] = je(), [o] = T(), [c] = M(), [a] = b(De), { document: i, window: d } = q(), [l] = B(i == null ? void 0 : i.getElementById("highlighted-block")), [h] = B(
+}, Ls = ({ model: n }) => {
+  const [s] = Lt(), [e] = A(), [t] = _e(), [o] = F(), [a] = L(), [l] = b(Se), { document: i, window: c } = Q(), [u] = _(i == null ? void 0 : i.getElementById("highlighted-block")), [m] = _(
     i == null ? void 0 : i.getElementById("selected-block")
-  ), [p] = B(
+  ), [d] = _(
     i == null ? void 0 : i.getElementById("selected-styling-block")
-  ), [u] = B(i == null ? void 0 : i.getElementById("dragged-block"));
+  ), [h] = _(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 $ = f(s, "headingFont", "DM Sans"), y = 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"), m = f(s, "secondaryColor", "#FFF"), k = f(s, "bodyBgLightColor", "#fff"), C = f(s, "bodyBgDarkColor", "#000"), L = f(s, "bodyTextDarkColor", "#000"), K = f(s, "bodyTextLightColor", "#fff"), Y = ts([
+    const g = f(s, "primaryColor", "#000"), p = 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: m, name: "secondary" }
-    ]), G = {
+      { color: p, name: "secondary" }
+    ]), O = {
       "bg-light": k,
       "bg-dark": C,
-      "text-dark": L,
-      "text-light": K
-    }, x = f(s, "roundedCorners", "0");
-    !d || !d.tailwind || (d.tailwind.config = {
+      "text-dark": D,
+      "text-light": E
+    }, v = f(s, "roundedCorners", "0");
+    !c || !c.tailwind || (c.tailwind.config = {
       darkMode: "class",
       theme: {
         extend: {
@@ -1010,177 +1005,197 @@ const Cs = () => {
             }
           },
           fontFamily: {
-            heading: [$],
-            body: [y]
+            heading: [x],
+            body: [$]
           },
           borderRadius: {
-            DEFAULT: `${x || "0"}px`
+            DEFAULT: `${v || "0"}px`
           },
-          colors: { ...G, ...Y }
+          colors: { ...O, ...R }
         }
       },
-      plugins: [Jt, Vt, es, d.tailwind.plugin.withOptions(() => Ns)]
+      plugins: [ts, ss, os, c.tailwind.plugin.withOptions(() => Ms)]
     });
-  }, [s, d, $, y]), j(() => {
-    h && (h.textContent = `${H(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, h]), j(() => {
-    if (!a) {
-      u.textContent = "";
+  }, [e, m]), j(() => {
+    if (!l) {
+      h.textContent = "";
       return;
     }
-    u.textContent = `[data-block-id="${a}"]{ pointer-events: none !important; opacity: 0.2 !important}`;
-  }, [a]), j(() => {
-    l && (l.textContent = o ? `[data-style-id="${o}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
-  }, [o, e, l]), j(() => {
-    p && (p.textContent = `${H(c, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
+    h.textContent = `[data-block-id="${l}"]{ pointer-events: none !important; opacity: 0.2 !important}`;
+  }, [l]), j(() => {
+    u && (u.textContent = o ? `[data-style-id="${o}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
+  }, [o, e, u]), j(() => {
+    d && (d.textContent = `${z(a, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
-  }, [c, p]), j(() => {
-    const g = f(s, "bodyTextLightColor", "#64748b"), m = 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-[${m}] dark:bg-[${C}]`;
+  }, [a, d]), j(() => {
+    const g = f(s, "bodyTextLightColor", "#64748b"), p = 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-[${p}] dark:bg-[${C}]`;
   }, [s, i, n]), n === "page" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    $ && /* @__PURE__ */ r.jsx(
+    x && /* @__PURE__ */ r.jsx(
       "link",
       {
         id: "heading-font",
         rel: "stylesheet",
         type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${$.replace(
+        href: `https://fonts.googleapis.com/css2?family=${x.replace(
           / /g,
           "+"
         )}:wght@300;400;500;600;700;800;900&display=swap`,
         media: "all"
       }
     ),
-    y && $ !== y && /* @__PURE__ */ r.jsx(
+    $ && x !== $ && /* @__PURE__ */ r.jsx(
       "link",
       {
         id: "body-font",
         rel: "stylesheet",
         type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${y.replace(
+        href: `https://fonts.googleapis.com/css2?family=${$.replace(
           / /g,
           "+"
         )}:wght@300;400;500;600;700;800;900&display=swap`,
         media: "all"
       }
     ),
-    $ && /* @__PURE__ */ r.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${$}",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";}` })
+    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;
-}, Ts = (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 u = e.indexOf(i);
+    if (u <= t) {
+      const m = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"].includes(c);
+      for (let d = u; d < e.length; d++)
+        a[d] = m;
+    }
+  }
+  return a[t];
+}, Hs = (n) => {
   const s = {};
   return Object.keys(n).forEach((e) => {
-    se(n[e]) && n[e].startsWith(ge) && (s[e] = n[e].replace(ge, "").split(","));
+    oe(n[e]) && n[e].startsWith(ge) && (s[e] = n[e].replace(ge, "").split(","));
   }), s;
-}, Ls = Ke((n) => {
-  const s = n.replace(Ne, "").split(",");
-  return ss(s[0], s[1]);
+}, Ps = Ye((n) => {
+  const s = n.replace(Me, "").split(",");
+  return rs(s[0], s[1]);
 });
-function Fs(n, s) {
+function Os(n, s) {
   return f(n, `${s}_attrs`, {});
 }
-function Rs(n) {
-  const s = {};
-  return Object.keys(n).forEach((e) => {
-    if (se(n[e]) && n[e].startsWith(Ne)) {
-      const t = Ls(n[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}`,
-        ...Fs(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 Hs(n, s) {
+function Us(n, s) {
   const e = f(n, "_bindings", {});
-  return I(e) ? { ...n } : (Ye(e, (t, o) => {
-    se(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 te({ blocks: n }) {
-  const [s] = ne(), [e] = b(ie), [t] = b(Ee), [o] = ns(), c = O((l) => Rs(l), []), [a] = Ft(), [i] = b(F), d = O(
-    (l) => l.reduce((h, p) => {
-      const u = f(o, p, {});
-      return { ...h, ...u };
+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(), [u] = b(P), m = q(
+    (d) => d.reduce((h, x) => {
+      const $ = f(l, x, {});
+      return { ...h, ...$ };
     }, {}),
-    [o, s]
+    [l, s]
   );
-  return /* @__PURE__ */ r.jsx(r.Fragment, { children: A.Children.toArray(
-    n.map((l, h) => {
-      if (i === l._id)
+  return /* @__PURE__ */ r.jsx(r.Fragment, { children: S.Children.toArray(
+    n.map((d, h) => {
+      if (u === d._id)
         return null;
-      const p = Ts(l), u = {};
-      I(p) || Object.keys(p).forEach((C) => {
-        u[C] = A.Children.toArray(
-          p[C].map((L) => /* @__PURE__ */ r.jsx(te, { blocks: [Ge(s, { _id: L })] }))
+      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 $ = ke(s, { _parent: l._id });
-      u.children = $.length ? /* @__PURE__ */ r.jsx(te, { blocks: $ }) : null;
-      const y = os(l._type), g = f(y, "builderComponent", f(y, "component", null));
-      if (Xe(g))
-        return /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${l == null ? void 0 : l._type} not registered -->` });
-      const m = be(y, "getBlockStateFrom") ? y == null ? void 0 : y.getBlockStateFrom(l, s) : [], k = d(m);
-      return /* @__PURE__ */ r.jsx(J, { children: A.createElement(g, {
+      const g = je(s, { _parent: d._id });
+      $.children = g.length ? /* @__PURE__ */ r.jsx(se, { blocks: g }) : null;
+      const p = is(d._type), k = f(p, "builderComponent", f(p, "component", null));
+      if (Qe(k))
+        return /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${d == null ? void 0 : d._type} not registered -->` });
+      const C = K(p, "getBlockStateFrom") ? p == null ? void 0 : p.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": l._id,
-          "data-block-type": l._type,
-          ...e ? (
+          ...fe(e, d._id) ? { "force-show": "" } : {},
+          "data-block-id": d._id,
+          "data-block-type": d._type,
+          ...t ? (
             // @ts-ignore
-            { "data-dnd": Rt(l._type, e == null ? void 0 : e._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"
+            }
           ) : {},
-          ...t === l._id ? { "data-drop": "yes" } : {}
+          ...o === d._id ? { "data-drop": "yes" } : {}
         },
         index: h,
-        ...Hs(l, a),
-        ...c(l),
-        ...u,
+        ...Us(d, c),
+        ...we(E, ["__isHidden"]),
+        ...$,
         inBuilder: !0,
-        blockState: k
+        blockState: D
       }) });
     })
   ) });
 }
-const Ps = () => {
-  const [n] = ne(), s = I(n) ? null : /* @__PURE__ */ r.jsx(Ht, { children: /* @__PURE__ */ r.jsx(te, { blocks: ke(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 });
-}, zs = (n, s) => n.querySelector(`[data-style-id="${s}"]`), Os = () => {
-  const [n] = b(Pt), [s] = Ie(), [e] = oe(), [, t] = D(), o = zt(), [, c] = T(), a = de(null), i = de(null), [d, l] = B({ width: 0, height: 0 }), h = gs(d), [p, u] = B(0), [$, y] = B([]), [, g] = B([]), [, m] = b(Ot), [k, C] = M(), L = P("loading", !1), K = P("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, u] = _({ width: 0, height: 0 }), m = xs(c), [d, h] = _(0), [x, $] = _([]), [, g] = _([]), [, p] = b(zt), [k, C] = L(), D = U("loading", !1), E = U("htmlDir", "ltr");
   j(() => {
-    const { clientWidth: x, clientHeight: S } = i.current;
-    l({ width: x, height: S }), p === 0 && u(x);
-  }, [i, e, p]);
-  const Y = (x, S = 0) => {
-    const { top: E } = x.getBoundingClientRect();
-    return E + S >= 0 && E - S <= window.innerHeight;
+    const { clientWidth: v, clientHeight: T } = i.current;
+    u({ width: v, height: T }), d === 0 && h(v);
+  }, [i, e, d]);
+  const R = (v, T = 0) => {
+    const { top: N } = v.getBoundingClientRect();
+    return N + T >= 0 && N - T <= window.innerHeight;
   };
   j(() => {
-    var x, S;
-    if (o && o.type !== "Multiple" && a.current) {
-      const E = Re(a.current.contentDocument, o._id);
-      E && (Y(E) || (S = (x = a.current) == null ? void 0 : x.contentWindow) == null || S.scrollTo({ top: E.offsetTop, behavior: "smooth" }), y([E]));
+    var v, T;
+    if (o && o.type !== "Multiple" && l.current) {
+      const N = Pe(l.current.contentDocument, o._id);
+      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(k) && a.current) {
-      const x = zs(
-        a.current.contentDocument,
-        U(k).id
+    if (!I(k) && l.current) {
+      const v = qs(
+        l.current.contentDocument,
+        Y(k).id
       );
-      g(x ? [x] : [null]);
+      g(v ? [v] : [null]);
     } else
       g([null]);
   }, [k]);
-  const G = Oe(() => {
-    let x = ms;
-    return x = x.replace("__HTML_DIR__", K), n === "offline" && (x = x.replace(
+  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"
-    ), 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;
+    ), 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;
   }, [n]);
   return /* @__PURE__ */ r.jsx(
     "div",
@@ -1188,30 +1203,30 @@ const Ps = () => {
       onClick: () => {
         t([]), C([]);
       },
-      onMouseLeave: () => setTimeout(() => c(""), 300),
+      onMouseLeave: () => setTimeout(() => a(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
-      style: p > 0 && !I(h) ? { width: s ? "100%" : p } : {},
+      style: d > 0 && !I(m) ? { width: s ? "100%" : d } : {},
       ref: i,
       children: /* @__PURE__ */ r.jsxs(
-        xs,
+        $s,
         {
-          contentDidMount: () => m(a.current),
-          ref: a,
+          contentDidMount: () => p(l.current),
+          ref: l,
           id: "canvas-iframe",
-          style: { width: `${e}px`, ...h },
+          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: G,
+          initialContent: O,
           children: [
-            /* @__PURE__ */ r.jsx(Is, {}),
+            /* @__PURE__ */ r.jsx(Es, {}),
             /* @__PURE__ */ r.jsx(
-              Es,
+              Ns,
               {
                 block: o,
-                selectedBlockElement: U($)
+                selectedBlockElement: Y(x)
               }
             ),
-            /* @__PURE__ */ r.jsx(Ms, { model: "page" }),
-            /* @__PURE__ */ r.jsx(rs, { children: /* @__PURE__ */ r.jsx(As, { children: L ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(V, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(Ps, {}) }) }),
+            /* @__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 +1240,16 @@ const Ps = () => {
       )
     }
   );
-}, Us = A.lazy(() => import("./CodeEditor-kxV5RCpd.js")), Go = () => {
+}, 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(hs, {}),
+    /* @__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(V, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(Wt, { children: /* @__PURE__ */ r.jsx(Os, {}) }) }),
-      n ? /* @__PURE__ */ r.jsx(J, { fallback: /* @__PURE__ */ r.jsx(V, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(is, { enable: { top: !0, bottom: !1 }, className: "max-h-[400px] min-h-[200px]", children: /* @__PURE__ */ r.jsx(Us, {}) }) }) : 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 {
-  Go as default
+  Vo as default
 };