@chaibuilder/sdk 1.2.48 → 1.2.50

package/dist/{CanvasArea-HRipTJFS.js → CanvasArea-ehmBje_E.js}

@@ -1,39 +1,39 @@
-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 E = (n, s, e) => (Pe(n, typeof s != "symbol" ? s + "" : s, e), e);
+var Pe = Object.defineProperty;
+var He = (n, s, e) => s in n ? Pe(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
+var N = (n, s, e) => (He(n, typeof s != "symbol" ? s + "" : s, e), e);
 import { j as r } from "./jsx-runtime-WbnYoNE9.js";
-import M, { createElement as ae, useCallback as O, useState as C, useEffect as w, Component as xe, Children as ze, Suspense as ve, useRef as le, useMemo as Oe } from "react";
-import { map as H, includes as ce, toUpper as X, round as Ue, throttle as $e, has as ye, isEmpty as A, first as U, omit as We, pick as qe, get as f, isString as ee, memoize as Ke, each as Ye, find as Ge, filter as be, isNull as Xe } from "lodash-es";
-import { ResetIcon as de, SunIcon as Qe, MoonIcon as Ze, MobileIcon as pe, LaptopIcon as Je, DesktopIcon as Ve, DotsVerticalIcon as et, EraserIcon as tt, ZoomInIcon as st, DragHandleDots2Icon as ot, ArrowUpIcon as nt, CopyIcon as rt, TrashIcon as it } from "@radix-ui/react-icons";
-import { j as ke, B as W, v as we, aq as je, ar as at, as as lt, at as ct, o as te, X as dt, h as P, au as pt, av as ut, aw as ht, ax as mt, ay as gt, az as ft, aA as Ce, L as D, Y as N, A as xt, a as vt, b as $t, c as yt, d as bt, e as kt, f as wt, g as jt, a3 as Ct, aB as Dt, aC as _t, p as De, ap as z, aD as Bt, m as At, z as T, aE as _e, Q as It, aF as L, aG as St, i as se, w as Be, E as Ae, H as Ie, V as Et, aH as Mt, aI as Nt, aJ as Tt, F as Lt, aK as Ft, aL as Rt, aM as Ht, aN as Pt, M as zt, aO as Ot, ah as Se, a2 as Ut } from "./ChaiBuilderEditor-dKHRL-Es.js";
-import { useTranslation as oe } from "react-i18next";
-import { useAtom as y } from "jotai";
+import A, { createElement as ce, useCallback as O, useState as B, useEffect as j, Component as $e, Children as ze, Suspense as Q, useRef as de, useMemo as Oe } from "react";
+import { map as P, 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 Ze, MobileIcon as he, LaptopIcon as Je, DesktopIcon as Qe, DotsVerticalIcon as Ve, EraserIcon as et, ZoomInIcon as tt, DragHandleDots2Icon as st, ArrowUpIcon as ot, CopyIcon as nt, TrashIcon as rt } from "@radix-ui/react-icons";
+import { j as we, B as W, v as je, ap as Ce, aq as it, ar as at, as as lt, at as ct, o as oe, W as dt, h as H, au as pt, av as ut, aw as ht, ax as mt, ay as gt, az as ft, aA as _e, K as D, X 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, a2 as Ct, aB as _t, aC as Bt, p as Be, ao as z, aD as Dt, m as At, z as T, aE as De, P as It, aF as F, aG as St, i as ne, w as Ae, E as Ie, G as Se, U as Et, aH as Nt, aI as Mt, aJ as Tt, F as Lt, aK as Ft, aL as Rt, aM as Pt, aN as Ht, L as zt, aO as Ot, ag as V, a1 as Ut } from "./ChaiBuilderEditor-3xIN-AP_.js";
+import { useTranslation as re } from "react-i18next";
+import { useAtom as b } from "jotai";
 import { SparklesIcon as Wt } from "lucide-react";
-import ue from "react-dom";
-import k from "prop-types";
+import me from "react-dom";
+import w from "prop-types";
 import { Quill as qt } from "react-quill";
-import { d as ne, a as Ee } from "./atoms-ZOWyNoiC.js";
+import { d as ie, a as Ee } from "./atoms-ZOWyNoiC.js";
 import { flip as Kt } from "@floating-ui/dom";
 import { useFloating as Yt, shift as Gt } from "@floating-ui/react-dom";
 import { useResizeObserver as Xt } from "@react-hookz/web";
-import { useFeature as Qt } from "flagged";
-import Zt from "@tailwindcss/typography";
-import Jt from "@tailwindcss/forms";
+import { useFeature as Zt } from "flagged";
+import Jt from "@tailwindcss/typography";
+import Qt from "@tailwindcss/forms";
 import Vt from "@tailwindcss/aspect-ratio";
 import es from "tailwindcss-palette-generator";
 import { twMerge as ts } from "tailwind-merge";
-import { S as he, a as Me } from "./STRINGS--j49GZJP.js";
+import { S as ge, a as Ne } from "./MODIFIERS-fd5XOmum.js";
 import { getBlockComponent as ss } from "@chaibuilder/runtime";
-import { u as os } from "./useCanvasSettings-UzjYHFG5.js";
-import { Provider as ns } from "react-wrap-balancer";
+import { u as os, a as ns } from "./useCodeEditor-yl5V3Hte.js";
+import { Provider as rs } from "react-wrap-balancer";
+import { Resizable as is } from "re-resizable";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "clsx";
 import "@radix-ui/react-scroll-area";
 import "i18next";
 import "./Functions-7jnEwJyw.js";
-import "./MODIFIERS-cBT31iqE.js";
 import "tree-model";
-import "./utils-iMv3T4WT.js";
+import "./utils-VpVqnC9m.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -55,19 +55,20 @@ import "cmdk";
 import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-hotkeys-hook";
-const rs = () => {
-  const { hasUndo: n, hasRedo: s, undo: e, redo: t } = ke();
+import "./index-YpnaudSM.js";
+const as = () => {
+  const { hasUndo: n, hasRedo: s, undo: e, redo: t } = we();
   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(de, {}) }),
-    /* @__PURE__ */ r.jsx(W, { disabled: !s(), onClick: t, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(de, { className: "rotate-180 scale-y-[-1] transform" }) })
+    /* @__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" }) })
   ] });
 };
-function is() {
-  const [n, s] = we();
+function ls() {
+  const [n, s] = je();
   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(
-      je,
+      Ce,
       {
         id: "dark-mode-switch",
         checked: n,
@@ -84,10 +85,10 @@ function is() {
         )
       }
     ),
-    /* @__PURE__ */ r.jsx(Ze, { className: "size-4 ml-3 shrink-0" })
+    /* @__PURE__ */ r.jsx(it, { className: "size-4 ml-3 shrink-0" })
   ] });
 }
-const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
+const fe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
   "svg",
   {
     className: n ? "rotate-90" : "",
@@ -110,33 +111,33 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       )
     ]
   }
-), as = [
+), cs = [
   {
     title: "mobile_xs_title",
     content: "mobile_xs_content",
     breakpoint: "xs",
-    icon: /* @__PURE__ */ r.jsx(pe, {}),
+    icon: /* @__PURE__ */ r.jsx(he, {}),
     width: 400
   },
   {
     title: "mobile_sm_title",
     content: "mobile_sm_content",
     breakpoint: "sm",
-    icon: /* @__PURE__ */ r.jsx(pe, { className: "rotate-90" }),
+    icon: /* @__PURE__ */ r.jsx(he, { className: "rotate-90" }),
     width: 640
   },
   {
     title: "tablet_md_title",
     content: "tablet_md_content",
     breakpoint: "md",
-    icon: /* @__PURE__ */ r.jsx(me, {}),
+    icon: /* @__PURE__ */ r.jsx(fe, {}),
     width: 800
   },
   {
     title: "tablet_lg_title",
     content: "tablet_lg_content",
     breakpoint: "lg",
-    icon: /* @__PURE__ */ r.jsx(me, { landscape: !0 }),
+    icon: /* @__PURE__ */ r.jsx(fe, { landscape: !0 }),
     width: 1024
   },
   {
@@ -150,10 +151,10 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     title: "large_desktop_2xl_title",
     content: "large_desktop_2xl_content",
     breakpoint: "2xl",
-    icon: /* @__PURE__ */ r.jsx(Ve, {}),
+    icon: /* @__PURE__ */ r.jsx(Qe, {}),
     width: 1920
   }
-], ge = ({
+], xe = ({
   title: n,
   content: s,
   currentBreakpoint: e,
@@ -162,7 +163,7 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
   icon: c,
   onClick: a
 }) => {
-  const { t: i } = oe();
+  const { t: i } = re();
   return /* @__PURE__ */ r.jsxs(at, { children: [
     /* @__PURE__ */ r.jsx(lt, { asChild: !0, children: /* @__PURE__ */ r.jsx(
       W,
@@ -178,26 +179,26 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       /* @__PURE__ */ r.jsx("p", { className: "text-xs", children: i(s) })
     ] }) }) })
   ] });
-}, ls = () => {
-  const [, n, s] = te(), [e, t] = dt(), { t: o } = oe(), c = P("breakpoints", as), a = (i) => {
+}, ds = () => {
+  const [, n, s] = oe(), [e, t] = dt(), { t: o } = re(), c = H("breakpoints", cs), a = (i) => {
     e.includes(i) ? e.length > 2 && t(e.filter((d) => d !== i)) : t((d) => [...d, i]);
   };
-  return c.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: H(c, (i) => /* @__PURE__ */ ae(ge, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
-    H(
-      c.filter((i) => ce(e, X(i.breakpoint))),
-      (i) => /* @__PURE__ */ ae(ge, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })
+  return c.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: P(c, (i) => /* @__PURE__ */ ce(xe, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
+    P(
+      c.filter((i) => pe(e, X(i.breakpoint))),
+      (i) => /* @__PURE__ */ ce(xe, { ...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(et, { 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(Ve, { 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(
+        P(c, (i) => /* @__PURE__ */ r.jsx(
           ft,
           {
             disabled: i.breakpoint === "xs",
             onCheckedChange: () => a(X(i.breakpoint)),
-            checked: ce(e, X(i.breakpoint)),
+            checked: pe(e, X(i.breakpoint)),
             children: o(i.title)
           },
           i.breakpoint
@@ -205,13 +206,13 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       ] })
     ] })
   ] });
-}, cs = () => {
-  const { t: n } = oe(), { setNewBlocks: s } = Ce(), [, e] = D(), [, t] = N(), o = O(() => {
+}, ps = () => {
+  const { t: n } = re(), { setNewBlocks: s } = _e(), [, e] = D(), [, t] = M(), o = O(() => {
     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(tt, {}),
+      /* @__PURE__ */ r.jsx(et, {}),
       " ",
       n("clear")
     ] }) }),
@@ -226,15 +227,15 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       ] })
     ] })
   ] }) });
-}, ds = () => {
-  const [n, s] = y(Dt);
-  return P("askAiCallBack", null) ? /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ r.jsxs(_t, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
+}, us = () => {
+  const [n, s] = b(_t);
+  return H("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(Wt, { className: "w-4" }),
       "AI Assistant"
     ] }),
     /* @__PURE__ */ r.jsx(
-      je,
+      Ce,
       {
         className: "scale-90",
         checked: n,
@@ -245,18 +246,18 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
       }
     )
   ] }) : null;
-}, ps = () => {
-  const n = P("darkMode", !0), [s] = De();
+}, hs = () => {
+  const n = H("darkMode", !0), [s] = Be();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex h-10 items-center justify-between border-b bg-background/70 px-2", children: [
     /* @__PURE__ */ r.jsxs("div", { className: "flex h-full space-x-2", children: [
-      /* @__PURE__ */ r.jsx(ls, {}),
+      /* @__PURE__ */ r.jsx(ds, {}),
       /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
       n ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        /* @__PURE__ */ r.jsx(is, {}),
+        /* @__PURE__ */ r.jsx(ls, {}),
         /* @__PURE__ */ r.jsx(z, { 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(st, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ r.jsx(tt, { className: "h-3.5 w-3.5 flex-shrink-0" }),
         " ",
         /* @__PURE__ */ r.jsxs("div", { className: "text-xs leading-3", children: [
           Ue(s, 0),
@@ -264,15 +265,15 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
         ] })
       ] }),
       /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(rs, {})
+      /* @__PURE__ */ r.jsx(as, {})
     ] }),
     /* @__PURE__ */ r.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ r.jsx(cs, {}),
+      /* @__PURE__ */ r.jsx(ps, {}),
       /* @__PURE__ */ r.jsx(z, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(ds, {})
+      /* @__PURE__ */ r.jsx(us, {})
     ] })
   ] });
-}, us = `<!doctype html>
+}, ms = `<!doctype html>
 <html lang="en" dir="__HTML_DIR__" class="scroll-smooth h-full overflow-y-auto">
   <head>
     <meta charset="UTF-8">
@@ -309,6 +310,7 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     }
     .frame-root .frame-content { height: 100%; }
     [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; }
     </style>    
     <style id="hidden-blocks"></style>
@@ -322,8 +324,8 @@ const me = ({ 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>`, hs = (n) => {
-  const [s] = te(), [, e] = De(), [t, o] = C({}), c = O(() => {
+</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());
@@ -343,15 +345,15 @@ const me = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
     } else
       o({}), e(100);
   }, [s, n, e]);
-  return w(() => {
+  return j(() => {
     c();
   }, [s, n, e, c]), t;
 };
-let Ne, Te;
-typeof document < "u" && (Ne = document);
+let Me, Te;
+typeof document < "u" && (Me = document);
 typeof window < "u" && (Te = window);
-const Le = M.createContext({ document: Ne, window: Te }), q = () => M.useContext(Le), { Provider: ms, Consumer: Oo } = Le;
-class Fe extends xe {
+const Le = A.createContext({ document: Me, window: Te }), q = () => A.useContext(Le), { Provider: fs, Consumer: Yo } = Le;
+class Fe extends $e {
   componentDidMount() {
     this.props.contentDidMount();
   }
@@ -362,28 +364,28 @@ class Fe extends xe {
     return ze.only(this.props.children);
   }
 }
-E(Fe, "propTypes", {
-  children: k.element.isRequired,
-  contentDidMount: k.func.isRequired,
-  contentDidUpdate: k.func.isRequired
+N(Fe, "propTypes", {
+  children: w.element.isRequired,
+  contentDidMount: w.func.isRequired,
+  contentDidUpdate: w.func.isRequired
 });
-class J extends xe {
+class ee extends $e {
   constructor(e, t) {
     super(e, t);
-    E(this, "setRef", (e) => {
+    N(this, "setRef", (e) => {
       this.nodeRef.current = e;
       const { forwardedRef: t } = this.props;
       typeof t == "function" ? t(e) : t && (t.current = e);
     });
-    E(this, "handleLoad", () => {
+    N(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
-    E(this, "loadCheck", () => setInterval(() => {
+    N(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
-    this._isMounted = !1, this.nodeRef = M.createRef(), this.state = { iframeLoaded: !1 };
+    this._isMounted = !1, this.nodeRef = A.createRef(), this.state = { iframeLoaded: !1 };
   }
   componentDidMount() {
     this._isMounted = !0, this.getDoc() && this.nodeRef.current.contentWindow.addEventListener("DOMContentLoaded", this.handleLoad);
@@ -404,8 +406,8 @@ class J extends xe {
     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(ms, { value: { document: e, window: c }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), i = this.getMountTarget();
-    return [ue.createPortal(this.props.head, this.getDoc().head), ue.createPortal(a, i)];
+    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)];
   }
   render() {
     const e = {
@@ -421,16 +423,16 @@ class J extends xe {
 // 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.
-E(J, "propTypes", {
-  style: k.object,
+N(ee, "propTypes", {
+  style: w.object,
   // eslint-disable-line
-  head: k.node,
-  initialContent: k.string,
-  mountTarget: k.string,
-  contentDidMount: k.func,
-  contentDidUpdate: k.func,
-  children: k.oneOfType([k.element, k.arrayOf(k.element)])
-}), E(J, "defaultProps", {
+  head: w.node,
+  initialContent: w.string,
+  mountTarget: w.string,
+  contentDidMount: w.func,
+  contentDidUpdate: w.func,
+  children: w.oneOfType([w.element, w.arrayOf(w.element)])
+}), N(ee, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -441,10 +443,10 @@ E(J, "propTypes", {
   },
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
-const gs = M.forwardRef((n, s) => /* @__PURE__ */ r.jsx(J, { ...n, forwardedRef: s }));
-function re(n) {
+const xs = A.forwardRef((n, s) => /* @__PURE__ */ r.jsx(ee, { ...n, forwardedRef: s }));
+function ae(n) {
   const s = window.getComputedStyle(n), e = s.display;
-  if (e === "flex") {
+  if (e === "flex" || e === "inline-flex") {
     const t = s.flexDirection;
     return t === "column" || t === "column-reverse" ? "vertical" : "horizontal";
   } else if (e === "grid") {
@@ -454,105 +456,113 @@ function re(n) {
     return "vertical";
   return "horizontal";
 }
-let _ = null, B = [], R = null, Q = null;
-const fe = (n, s, e) => {
-  if (!_ || !n)
+let v = null, _ = [], R = null, Z = null;
+const ve = (n, s, e) => {
+  if (!v || !n)
     return;
-  const t = _ == null ? void 0 : _.getElementById("placeholder"), c = B.map(([i]) => i).reduce(
-    (i, d) => Math.abs(d - e) < Math.abs(i - e) ? d : i,
+  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,
     0
-  );
-  if (!B[c])
+  ), a = o.indexOf(c);
+  if (!_[a])
     return;
-  const a = B[c];
-  t.style.width = s === "vertical" ? a[2] + "px" : "2px", t.style.height = s === "vertical" ? "2px" : a[2] + "px", t.style.display = "block", s === "vertical" ? (t.style.top = a[0] + "px", t.style.left = a[1] + "px") : (t.style.top = a[1] + "px", t.style.left = a[0] + "px");
+  const i = _[a];
+  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 fs(n, s) {
+function vs(n, s) {
   let e = 0, t = 1 / 0;
   return s.forEach((o, c) => {
     const a = Math.abs(o[0] - n);
     a < t && (t = a, e = c);
   }), e;
 }
-const xs = (n) => {
-  const e = re(n) === "horizontal";
-  B = [], Array.from(n.children).forEach((t) => {
+const $s = (n) => {
+  const e = ae(n) === "horizontal";
+  _ = [], Array.from(n.children).forEach((t, o) => {
     if (t.classList.contains("pointer-events-none"))
       return;
-    const o = e ? t.offsetLeft : t.offsetTop, c = e ? [t.offsetTop, t.clientHeight] : [t.offsetLeft, t.clientWidth];
-    B.push([o, c[0], c[1]]);
+    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 i = e ? t.offsetLeft + t.clientWidth : t.offsetTop + t.clientHeight;
+      _.push([i, a[0], a[1]]);
+    }
   });
-}, vs = $e((n) => {
-  const s = n.target, e = re(s);
-  if (e === "vertical") {
-    const t = n.clientY - s.offsetTop;
-    fe(s, e, t);
-  } else {
-    const t = n.clientX - s.offsetLeft;
-    fe(s, e, t);
-  }
-}, 200);
-function Z() {
-  const n = _ == null ? void 0 : _.getElementById("placeholder");
-  n.style.display = "none", $s("pointer-none");
+}, ys = ye((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);
+}, 0);
+function J() {
+  const n = v == null ? void 0 : v.getElementById("placeholder");
+  n.style.display = "none", bs("pointer-none"), ks();
 }
-function $s(n) {
-  document.querySelectorAll(`.${n}`).forEach((e) => {
+function bs(n) {
+  (v == null ? void 0 : v.querySelectorAll(`.${n}`)).forEach((e) => {
     e.classList.remove(n);
   });
 }
-const ys = () => {
-  const { document: n } = q(), [s, e] = y(Bt), { addCoreBlock: t } = At(), [, o] = T(), [, c] = D(), { moveBlocks: a } = Ce(), [, i] = y(_e), [d, l] = y(ne), [, h] = y(Ee);
-  return _ = n, {
+function ks() {
+  const n = v == null ? void 0 : v.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, {
     isDragging: s,
     onDragOver: (p) => {
-      p.preventDefault(), p.stopPropagation(), vs(p);
+      p.preventDefault(), p.stopPropagation(), ys(p);
     },
     onDrop: (p) => {
+      var C;
       R == null || R.classList.remove("drop-target");
-      const u = R, $ = re(u) === "vertical" ? p.clientY : p.clientX;
-      Q = fs($, B);
+      const u = R, y = ae(u) === "vertical" ? p.clientY + ((C = v == null ? void 0 : v.defaultView) == null ? void 0 : C.scrollY) : p.clientX;
+      Z = vs(y, _);
       const g = d, m = u.getAttribute("data-block-id");
-      if (!ye(g, "_id")) {
-        t(g, m === "canvas" ? null : m, Q), setTimeout(() => {
-          Z();
-        }, 300), B = [], e(!1), i(""), l(null), h(null);
+      if (!be(g, "_id")) {
+        t(g, m === "canvas" ? null : m, Z), setTimeout(() => {
+          J();
+        }, 300), _ = [], e(!1), i(""), l(null), h(null);
         return;
       }
-      let b = u.getAttribute("data-block-id");
-      b === null && (b = p.target.parentElement.getAttribute("data-block-id")), a([g._id], b, Q), Z(), e(!1), i(""), setTimeout(() => Z(), 300);
+      let k = u.getAttribute("data-block-id");
+      k === null && (k = p.target.parentElement.getAttribute("data-block-id")), a([g._id], k, Z), J(), e(!1), i(""), _ = [], setTimeout(() => J(), 300);
     },
     onDragEnter: (p) => {
-      const u = p, v = u.target;
-      R = v;
-      const $ = v.getAttribute("data-block-id");
-      h($), u.stopPropagation(), u.preventDefault(), B = [], xs(v), v.classList.add("drop-target"), e(!0), o(""), c([]);
+      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([]);
     }
     // onDragLeave: (e: DragEvent) => {
     //   const event = e;
-    //   dropTarget = null;
     //   event.stopPropagation();
     //   event.preventDefault();
     //   const target = event.target as HTMLElement;
-    //   target.classList.remove("drop-target");
+    //   if (target && target.classList.contains("drop-target")) {
+    //     target.classList.remove("drop-target");
+    //     if (dropTarget === target) {
+    //       dropTarget = null;
+    //     }
+    //   }
+    //   removePlaceholder();
     // },
   };
 };
-function ie(n) {
+function le(n) {
   return n.getAttribute("data-block-id") ? n : n.closest("[data-block-id]");
 }
-function bs(n) {
+function js(n) {
   n.container.innerHTML = "", n.container.parentNode.removeChild(n.container);
   var s = document.querySelector(".ql-toolbar");
   s && s.parentNode.removeChild(s), n = null;
 }
-const ks = () => {
-  const n = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], s = It(), [, e] = T(), [t, o] = y(L);
+const Cs = () => {
+  const n = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], s = It(), [, e] = T(), [t, o] = b(F);
   return (c) => {
     var p;
     if (t)
       return;
-    const a = ie(c.target), i = a.getAttribute("data-block-type");
+    const a = le(c.target), i = a.getAttribute("data-block-type");
     if (!i || !n.includes(i))
       return;
     const d = a.cloneNode(!0);
@@ -562,45 +572,45 @@ const ks = () => {
     const l = new qt(d, { placeholder: "Type here..." });
     function h() {
       const u = l.getText(0, l.getLength());
-      s([a.getAttribute("data-block-id")], { content: u }), a.removeAttribute("style"), d.removeEventListener("blur", h, !0), bs(l), o(""), e("");
+      s([a.getAttribute("data-block-id")], { content: u }), a.removeAttribute("style"), d.removeEventListener("blur", h, !0), js(l), o(""), e("");
     }
     d.addEventListener("blur", h, !0), d.addEventListener("keydown", (u) => {
       (u.key === "Enter" || u.key === "Escape") && h();
     }), l.focus(), (p = d.querySelector(".ql-clipboard")) == null || p.remove(), o(a.getAttribute("data-block-id"));
   };
-}, ws = () => {
-  const [, n] = N(), [s, e] = D(), [, t] = T(), [o] = y(L), [c] = y(St);
+}, _s = () => {
+  const [, n] = M(), [s, e] = D(), [, t] = T(), [o] = b(F), [c] = b(St);
   return (a) => {
     if (o)
       return;
     a.stopPropagation();
-    const i = ie(a.target);
+    const i = le(a.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.closeAll(), n([{ id: l, prop: d, blockId: h }]), e([h]);
+      s.includes(h) || c == null || c.closeAll(), n([{ id: l, prop: d, blockId: h }]), e([h]);
     } else if (i != null && i.getAttribute("data-block-id")) {
       let d = i.getAttribute("data-block-id");
-      s.includes(d) || c.closeAll(), e([d]);
+      s.includes(d) || c == null || c.closeAll(), e([d]);
     }
     t("");
   };
-}, js = $e((n, s) => {
-  const e = ie(n.target);
+}, Bs = ye((n, s) => {
+  const e = le(n.target);
   e != null && e.getAttribute("data-style-id") && s(e.getAttribute("data-style-id"));
-}, 100), Cs = () => {
-  const [, n] = T(), [s] = y(L);
+}, 100), Ds = () => {
+  const [, n] = T(), [s] = b(F);
   return (e) => {
-    s || js(e, n);
+    s || Bs(e, n);
   };
-}, Ds = ({ children: n }) => {
-  const { document: s } = q(), [e] = D(), [t, o] = N();
-  w(() => {
+}, As = ({ children: n }) => {
+  const { document: s } = q(), [e] = D(), [t, o] = M();
+  j(() => {
     setTimeout(() => {
-      if (!A(t))
+      if (!I(t))
         return;
       const l = Re(s, U(e));
       if (l) {
@@ -612,7 +622,7 @@ const ks = () => {
       }
     }, 100);
   }, [s, e, o, t]);
-  const c = ks(), a = ws(), i = Cs(), d = ys();
+  const c = Cs(), a = _s(), i = Ds(), d = ws();
   return /* @__PURE__ */ r.jsx(
     "div",
     {
@@ -626,24 +636,24 @@ const ks = () => {
       children: n
     }
   );
-}, Re = (n, s) => n.querySelector(`[data-block-id="${s}"]`), _s = () => {
-  const { window: n } = q(), [s, e] = D(), [t] = se(), [, o] = N(), { undo: c, redo: a } = ke(), i = Be(), [, d] = Ae(), l = Ie(), { savePage: h } = Et(), [p] = y(L), [, u] = y(Mt), v = (g) => {
+}, 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)));
-  }, $ = (g) => {
-    const m = t.find((b) => b._id === g);
+  }, y = (g) => {
+    const m = t.find((k) => k._id === g);
     return m ? m._parent : null;
   };
-  return w(() => {
+  return j(() => {
     const g = (m) => {
       if (m.key === "Escape") {
         e([]), o([]);
         return;
       }
-      if (v(m), !p && (m.key === "Delete" || m.key === "Backspace") && (m.preventDefault(), l(s)), m.ctrlKey || m.metaKey) {
+      if ($(m), !p && (m.key === "Delete" || m.key === "Backspace") && (m.preventDefault(), l(s)), m.ctrlKey || m.metaKey) {
         if (m.key === "ArrowUp") {
           m.preventDefault();
-          const b = s.length > 0 ? $(s[0]) : null;
-          b && e([b]);
+          const k = s.length > 0 ? y(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))
@@ -657,8 +667,8 @@ const ks = () => {
       n.removeEventListener("keydown", g);
     };
   }, [s, e, c, l, d, a, i, p, h, n]), null;
-}, Bs = ({ block: n, label: s }) => {
-  const [, e] = D(), [, t] = T(), [, o] = y(ne), c = Qt("dnd");
+}, Ss = ({ block: n, label: s }) => {
+  const [, e] = D(), [, t] = T(), [, o] = b(ie), c = Zt("dnd");
   return /* @__PURE__ */ r.jsxs(
     "div",
     {
@@ -670,13 +680,13 @@ const ks = () => {
         }, 200);
       },
       children: [
-        /* @__PURE__ */ r.jsx(ot, {}),
+        /* @__PURE__ */ r.jsx(st, {}),
         s
       ]
     }
   );
-}, As = ({ selectedBlockElement: n, block: s }) => {
-  const e = Ie(), t = Be(), [, o] = D(), [, c] = N(), [a] = y(L), { floatingStyles: i, refs: d, update: l } = Yt({
+}, Es = ({ selectedBlockElement: n, block: s }) => {
+  const e = Se(), t = Ae(), [, o] = D(), [, c] = M(), [a] = b(F), { floatingStyles: i, refs: d, update: l } = Yt({
     placement: "top-start",
     middleware: [Gt(), Kt()],
     elements: {
@@ -684,7 +694,7 @@ const ks = () => {
     }
   });
   Xt(n, () => l(), n !== null);
-  const h = f(s, "_parent", null), p = A(f(s, "_name", "")) ? f(s, "_type", "") : f(s, "_name", "");
+  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(
     "div",
     {
@@ -698,10 +708,10 @@ const ks = () => {
       onKeyDown: (u) => u.stopPropagation(),
       className: "z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        /* @__PURE__ */ r.jsx(Bs, { label: p, block: s }),
+        /* @__PURE__ */ r.jsx(Ss, { label: p, block: s }),
         /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 px-1", children: [
           h && /* @__PURE__ */ r.jsx(
-            nt,
+            ot,
             {
               className: "hover:scale-105",
               onClick: () => {
@@ -709,13 +719,13 @@ const ks = () => {
               }
             }
           ),
-          Nt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(rt, { className: "hover:scale-105", onClick: () => t([s == null ? void 0 : s._id]) }) : null,
-          Tt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(it, { className: "hover:scale-105", onClick: () => e([s == null ? void 0 : s._id]) }) : null
+          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
         ] })
       ]
     }
   ) });
-}, Is = ({ addVariant: n, e: s }) => {
+}, Ns = ({ addVariant: n, e: s }) => {
   n("hs-dropdown-open", [
     ({ modifySelectors: e, separator: t }) => {
       e(({ className: o }) => `.hs-dropdown.open > .${s(`hs-dropdown-open${t}${o}`)}`);
@@ -968,24 +978,24 @@ const ks = () => {
   }), n("hs-auto-mode-active", ({ modifySelectors: e, separator: t }) => {
     e(({ className: o }) => `.auto .${s(`hs-auto-mode-active${t}${o}`)}`);
   });
-}, Ss = ({ model: n }) => {
-  const [s] = Lt(), [e] = D(), [t] = we(), [o] = T(), [c] = N(), [a] = y(_e), { document: i, window: d } = q(), [l] = C(i == null ? void 0 : i.getElementById("highlighted-block")), [h] = C(
+}, 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(
     i == null ? void 0 : i.getElementById("selected-block")
-  ), [p] = C(
+  ), [p] = B(
     i == null ? void 0 : i.getElementById("selected-styling-block")
-  ), [u] = C(i == null ? void 0 : i.getElementById("dragged-block"));
-  w(() => {
+  ), [u] = B(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 v = f(s, "headingFont", "DM Sans"), $ = f(s, "bodyFont", "DM Sans");
-  return w(() => {
-    const g = f(s, "primaryColor", "#000"), m = f(s, "secondaryColor", "#FFF"), b = f(s, "bodyBgLightColor", "#fff"), j = f(s, "bodyBgDarkColor", "#000"), F = f(s, "bodyTextDarkColor", "#000"), K = f(s, "bodyTextLightColor", "#fff"), Y = es([
+  const $ = f(s, "headingFont", "DM Sans"), y = 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 = es([
       { color: g, name: "primary" },
       { color: m, name: "secondary" }
     ]), G = {
-      "bg-light": b,
-      "bg-dark": j,
-      "text-dark": F,
+      "bg-light": k,
+      "bg-dark": C,
+      "text-dark": L,
       "text-light": K
     }, x = f(s, "roundedCorners", "0");
     !d || !d.tailwind || (d.tailwind.config = {
@@ -1000,8 +1010,8 @@ const ks = () => {
             }
           },
           fontFamily: {
-            heading: [v],
-            body: [$]
+            heading: [$],
+            body: [y]
           },
           borderRadius: {
             DEFAULT: `${x || "0"}px`
@@ -1009,114 +1019,114 @@ const ks = () => {
           colors: { ...G, ...Y }
         }
       },
-      plugins: [Zt, Jt, Vt, d.tailwind.plugin.withOptions(() => Is)]
+      plugins: [Jt, Qt, Vt, d.tailwind.plugin.withOptions(() => Ns)]
     });
-  }, [s, d, v, $]), w(() => {
-    h && (h.textContent = `${H(e, (g) => `[data-block-id="${g}"]`).join(",")}{
+  }, [s, d, $, y]), j(() => {
+    h && (h.textContent = `${P(e, (g) => `[data-block-id="${g}"]`).join(",")}{
                 outline: 1px solid ${e.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
-  }, [e, h]), w(() => {
+  }, [e, h]), j(() => {
     if (!a) {
       u.textContent = "";
       return;
     }
     u.textContent = `[data-block-id="${a}"]{ pointer-events: none !important; opacity: 0.2 !important}`;
-  }, [a]), w(() => {
+  }, [a]), j(() => {
     l && (l.textContent = o ? `[data-style-id="${o}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
-  }, [o, e, l]), w(() => {
-    p && (p.textContent = `${H(c, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
+  }, [o, e, l]), j(() => {
+    p && (p.textContent = `${P(c, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
-  }, [c, p]), w(() => {
-    const g = f(s, "bodyTextLightColor", "#64748b"), m = f(s, "bodyTextDarkColor", "#94a3b8"), b = f(s, "bodyBgLightColor", "#FFFFFF"), j = f(s, "bodyBgDarkColor", "#0f172a");
-    i.body.className = `font-body antialiased text-[${g}] bg-[${b}] dark:text-[${m}] dark:bg-[${j}]`;
+  }, [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}]`;
   }, [s, i, n]), n === "page" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    v && /* @__PURE__ */ r.jsx(
+    $ && /* @__PURE__ */ r.jsx(
       "link",
       {
         id: "heading-font",
         rel: "stylesheet",
         type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${v.replace(
+        href: `https://fonts.googleapis.com/css2?family=${$.replace(
           / /g,
           "+"
         )}:wght@300;400;500;600;700;800;900&display=swap`,
         media: "all"
       }
     ),
-    $ && v !== $ && /* @__PURE__ */ r.jsx(
+    y && $ !== y && /* @__PURE__ */ r.jsx(
       "link",
       {
         id: "body-font",
         rel: "stylesheet",
         type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${$.replace(
+        href: `https://fonts.googleapis.com/css2?family=${y.replace(
           / /g,
           "+"
         )}:wght@300;400;500;600;700;800;900&display=swap`,
         media: "all"
       }
     ),
-    v && /* @__PURE__ */ r.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${v}",ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}` })
+    $ && /* @__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";}` })
   ] }) : null;
-}, Es = (n) => {
+}, Ts = (n) => {
   const s = {};
   return Object.keys(n).forEach((e) => {
-    ee(n[e]) && n[e].startsWith(he) && (s[e] = n[e].replace(he, "").split(","));
+    se(n[e]) && n[e].startsWith(ge) && (s[e] = n[e].replace(ge, "").split(","));
   }), s;
-}, Ms = Ke((n) => {
-  const s = n.replace(Me, "").split(",");
+}, Ls = Ke((n) => {
+  const s = n.replace(Ne, "").split(",");
   return ts(s[0], s[1]);
 });
-function Ns(n, s) {
+function Fs(n, s) {
   return f(n, `${s}_attrs`, {});
 }
-function Ts(n) {
+function Rs(n) {
   const s = {};
   return Object.keys(n).forEach((e) => {
-    if (ee(n[e]) && n[e].startsWith(Me)) {
-      const t = Ms(n[e]);
+    if (se(n[e]) && n[e].startsWith(Ne)) {
+      const t = Ls(n[e]);
       s[e] = {
         className: t,
         "data-style-prop": e,
         "data-block-parent": n._id,
         "data-style-id": `${e}-${n._id}`,
-        ...Ns(n, e)
+        ...Fs(n, e)
       };
     }
   }), s;
 }
-function Ls(n, s) {
+function Ps(n, s) {
   const e = f(n, "_bindings", {});
-  return A(e) ? { ...n } : (Ye(e, (t, o) => {
-    ee(t) && f(s, t, null) && (n[o] = f(s, t, null));
+  return I(e) ? { ...n } : (Ye(e, (t, o) => {
+    se(t) && f(s, t, null) && (n[o] = f(s, t, null));
   }), n);
 }
-function V({ blocks: n }) {
-  const [s] = se(), [e] = y(ne), [t] = y(Ee), [o] = os(), c = O((l) => Ts(l), []), [a] = Ft(), [i] = y(L), d = O(
+function te({ blocks: n }) {
+  const [s] = ne(), [e] = b(ie), [t] = b(Ee), [o] = os(), 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 };
     }, {}),
     [o, s]
   );
-  return /* @__PURE__ */ r.jsx(r.Fragment, { children: M.Children.toArray(
+  return /* @__PURE__ */ r.jsx(r.Fragment, { children: A.Children.toArray(
     n.map((l, h) => {
       if (i === l._id)
         return null;
-      const p = Es(l), u = {};
-      A(p) || Object.keys(p).forEach((j) => {
-        u[j] = M.Children.toArray(
-          p[j].map((F) => /* @__PURE__ */ r.jsx(V, { blocks: [Ge(s, { _id: F })] }))
+      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 v = be(s, { _parent: l._id });
-      u.children = v.length ? /* @__PURE__ */ r.jsx(V, { blocks: v }) : null;
-      const $ = ss(l._type), g = f($, "builderComponent", f($, "component", null));
+      const $ = ke(s, { _parent: l._id });
+      u.children = $.length ? /* @__PURE__ */ r.jsx(te, { blocks: $ }) : null;
+      const y = ss(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 = ye($, "getBlockStateFrom") ? $ == null ? void 0 : $.getBlockStateFrom(l, s) : [], b = d(m);
-      return /* @__PURE__ */ r.jsx(ve, { children: M.createElement(g, {
+      const m = be(y, "getBlockStateFrom") ? y == null ? void 0 : y.getBlockStateFrom(l, s) : [], k = d(m);
+      return /* @__PURE__ */ r.jsx(Q, { children: A.createElement(g, {
         blockProps: {
           "data-block-id": l._id,
           "data-block-type": l._type,
@@ -1127,46 +1137,46 @@ function V({ blocks: n }) {
           ...t === l._id ? { "data-drop": "yes" } : {}
         },
         index: h,
-        ...Ls(l, a),
+        ...Ps(l, a),
         ...c(l),
         ...u,
         inBuilder: !0,
-        blockState: b
+        blockState: k
       }) });
     })
   ) });
 }
-const Fs = () => {
-  const [n] = se(), s = A(n) ? null : /* @__PURE__ */ r.jsx(Ht, { children: /* @__PURE__ */ r.jsx(V, { blocks: be(n, (e) => A(e._parent)) }) });
+const Hs = () => {
+  const [n] = ne(), s = I(n) ? null : /* @__PURE__ */ r.jsx(Pt, { children: /* @__PURE__ */ r.jsx(te, { blocks: ke(n, (e) => I(e._parent)) }) });
   return /* @__PURE__ */ r.jsx(r.Fragment, { children: s });
-}, Rs = (n, s) => n.querySelector(`[data-style-id="${s}"]`), Hs = () => {
-  const [n] = y(Pt), [s] = Ae(), [e] = te(), [, t] = D(), o = zt(), [, c] = T(), a = le(null), i = le(null), [d, l] = C({ width: 0, height: 0 }), h = hs(d), [p, u] = C(0), [v, $] = C([]), [, g] = C([]), [, m] = y(Ot), [b, j] = N(), F = P("loading", !1), K = P("htmlDir", "ltr");
-  w(() => {
-    const { clientWidth: x, clientHeight: I } = i.current;
-    l({ width: x, height: I }), p === 0 && u(x);
+}, zs = (n, s) => n.querySelector(`[data-style-id="${s}"]`), Os = () => {
+  const [n] = b(Ht), [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 = H("loading", !1), K = H("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, I = 0) => {
-    const { top: S } = x.getBoundingClientRect();
-    return S + I >= 0 && S - I <= window.innerHeight;
+  const Y = (x, S = 0) => {
+    const { top: E } = x.getBoundingClientRect();
+    return E + S >= 0 && E - S <= window.innerHeight;
   };
-  w(() => {
-    var x, I;
+  j(() => {
+    var x, S;
     if (o && o.type !== "Multiple" && a.current) {
-      const S = Re(a.current.contentDocument, o._id);
-      S && (Y(S) || (I = (x = a.current) == null ? void 0 : x.contentWindow) == null || I.scrollTo({ top: S.offsetTop, behavior: "smooth" }), $([S]));
+      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]));
     }
-  }, [o]), w(() => {
-    if (!A(b) && a.current) {
-      const x = Rs(
+  }, [o]), j(() => {
+    if (!I(k) && a.current) {
+      const x = zs(
         a.current.contentDocument,
-        U(b).id
+        U(k).id
       );
       g(x ? [x] : [null]);
     } else
       g([null]);
-  }, [b]);
+  }, [k]);
   const G = Oe(() => {
-    let x = us;
+    let x = ms;
     return x = x.replace("__HTML_DIR__", K), n === "offline" && (x = x.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
@@ -1176,14 +1186,14 @@ const Fs = () => {
     "div",
     {
       onClick: () => {
-        t([]), j([]);
+        t([]), C([]);
       },
       onMouseLeave: () => setTimeout(() => c(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
-      style: p > 0 && !A(h) ? { width: s ? "100%" : p } : {},
+      style: p > 0 && !I(h) ? { width: s ? "100%" : p } : {},
       ref: i,
       children: /* @__PURE__ */ r.jsxs(
-        gs,
+        xs,
         {
           contentDidMount: () => m(a.current),
           ref: a,
@@ -1192,16 +1202,16 @@ const Fs = () => {
           className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
           initialContent: G,
           children: [
-            /* @__PURE__ */ r.jsx(_s, {}),
+            /* @__PURE__ */ r.jsx(Is, {}),
             /* @__PURE__ */ r.jsx(
-              As,
+              Es,
               {
                 block: o,
-                selectedBlockElement: U(v)
+                selectedBlockElement: U($)
               }
             ),
-            /* @__PURE__ */ r.jsx(Ss, { model: "page" }),
-            /* @__PURE__ */ r.jsx(ns, { children: /* @__PURE__ */ r.jsx(Ds, { children: F ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(Se, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(Fs, {}) }) }),
+            /* @__PURE__ */ r.jsx(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(Hs, {}) }) }),
             /* @__PURE__ */ r.jsx("br", {}),
             /* @__PURE__ */ r.jsx(
               "div",
@@ -1215,10 +1225,16 @@ const Fs = () => {
       )
     }
   );
-}, Uo = () => /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
-  /* @__PURE__ */ r.jsx(ps, {}),
-  /* @__PURE__ */ r.jsx("div", { className: "relative h-full overflow-hidden bg-slate-800/90 bg-[linear-gradient(to_right,#222_0.5px,transparent_0.5px),linear-gradient(to_bottom,#222_0.5px,transparent_0.5px)] bg-[size:12px_12px] px-2", children: /* @__PURE__ */ r.jsx(ve, { fallback: /* @__PURE__ */ r.jsx(Se, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(Ut, { children: /* @__PURE__ */ r.jsx(Hs, {}) }) }) })
-] });
+}, Us = A.lazy(() => import("./CodeEditor-0F7Dz3AB.js")), Go = () => {
+  const [n] = ns();
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
+    /* @__PURE__ */ r.jsx(hs, {}),
+    /* @__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(Q, { fallback: /* @__PURE__ */ r.jsx(V, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(Ut, { children: /* @__PURE__ */ r.jsx(Os, {}) }) }),
+      n ? /* @__PURE__ */ r.jsx(Q, { 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
+    ] })
+  ] });
+};
 export {
-  Uo as default
+  Go as default
 };