@chaibuilder/sdk 1.2.6 → 1.2.8

package/dist/{CanvasArea-7GpvsKP6.js → CanvasArea-EfZgx-gN.js}

@@ -1,27 +1,28 @@
-var wt = Object.defineProperty;
-var jt = (e, t, n) => t in e ? wt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var J = (e, t, n) => (jt(e, typeof t != "symbol" ? t + "" : t, n), n);
+var jt = Object.defineProperty;
+var Tt = (e, t, n) => t in e ? jt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var J = (e, t, n) => (Tt(e, typeof t != "symbol" ? t + "" : t, n), n);
 import { j as r } from "./jsx-runtime-WbnYoNE9.js";
-import V, { createElement as _e, useCallback as we, useState as q, useEffect as M, Component as Ye, Children as Tt, Suspense as Ke, useRef as Be, useMemo as Ct } from "react";
-import { map as re, includes as Oe, toUpper as pe, round as It, throttle as Je, noop as te, isEmpty as K, first as ae, omit as Et, pick as St, get as B, isString as je, memoize as Dt, each as _t, find as Bt, filter as Ve, isNull as Ot } from "lodash-es";
-import { ResetIcon as Ae, MobileIcon as Re, LaptopIcon as At, DesktopIcon as Rt, DotsVerticalIcon as Pt, EraserIcon as Mt, ZoomInIcon as Lt, DragHandleDots2Icon as Nt, ArrowUpIcon as Ft, CopyIcon as Wt, TrashIcon as $t } from "@radix-ui/react-icons";
-import { p as Te, B as le, W as Ze, aH as Ht, aI as qt, aJ as Ut, aK as zt, aL as Yt, R as Ce, ai as Kt, i as Ge, aM as Jt, aN as Vt, aO as Zt, aP as Gt, aQ as Qt, aR as Xt, w as en, j as U, aj as Z, D as tn, E as nn, F as rn, G as on, H as sn, I as an, J as ln, K as cn, ap as dn, L as un, U as Qe, aG as ie, aS as pn, _ as Q, ab as fn, aT as X, ae as Ie, m as Xe, n as hn, k as gn, o as mn, h as et, l as tt, ag as yn, aU as vn, aV as nt, aW as xn, aX as bn, x as kn, a as wn, aY as jn, aZ as Tn, a6 as Cn, a_ as In, S as rt } from "./index-_OgCuSUz.js";
+import V, { createElement as be, useCallback as je, useState as q, useEffect as M, Component as Ke, Children as Ct, Suspense as Je, useRef as Oe, useMemo as It } from "react";
+import { map as re, includes as Ae, toUpper as pe, round as Et, throttle as Ve, noop as te, isEmpty as K, first as ae, omit as St, pick as Dt, get as D, isString as Te, memoize as Bt, each as _t, find as Ot, filter as Xe, isNull as At } from "lodash-es";
+import { ResetIcon as Pe, MobileIcon as Re, LaptopIcon as Pt, DesktopIcon as Rt, DotsVerticalIcon as Mt, EraserIcon as Lt, ZoomInIcon as Nt, DragHandleDots2Icon as Ft, ArrowUpIcon as $t, CopyIcon as Wt, TrashIcon as Ht } from "@radix-ui/react-icons";
+import { p as Ce, B as le, X as Ze, aI as qt, aJ as Ut, aK as zt, aL as Yt, aM as Kt, U as Ie, aj as Jt, i as Ee, aN as Vt, aO as Xt, aP as Zt, aQ as Qt, aR as Gt, aS as en, w as tn, j as U, ak as X, E as nn, F as rn, G as on, H as sn, I as an, J as ln, K as cn, L as dn, aq as un, M as pn, V as Qe, aH as ie, aT as fn, $ as Q, ac as hn, aU as G, af as Se, m as Ge, n as gn, k as mn, o as yn, h as et, l as tt, ah as vn, aV as xn, aW as nt, aX as bn, aY as kn, x as wn, aZ as jn, a7 as Tn, a_ as Cn, S as rt } from "./index-niHREMmR.js";
 import { useTranslation as de } from "react-i18next";
-import { useAtom as F } from "jotai";
-import Pe from "react-dom";
-import { g as En } from "./_commonjsHelpers-UyOWmZb0.js";
-import { r as ot, u as Sn, B as Dn, E as _n } from "./index-482XFRhB.js";
+import { useAtom as N } from "jotai";
+import Me from "react-dom";
+import { g as In } from "./_commonjsHelpers-UyOWmZb0.js";
+import { r as ot, u as En, B as Sn, E as Dn } from "./index-EGUphg4R.js";
 import { Quill as Bn } from "react-quill";
-import { u as On } from "./useAddBlockByDrop-uPXvrg4G.js";
+import { u as _n } from "./useAddBlockByDrop-_nwI4W3q.js";
 import { useFeature as st } from "flagged";
-import { flip as An } from "@floating-ui/dom";
-import { useFloating as Rn, shift as Pn } from "@floating-ui/react-dom";
-import { useResizeObserver as Mn } from "@react-hookz/web";
-import { tailwindcssPaletteGenerator as Ln } from "@bobthered/tailwindcss-palette-generator";
-import { Provider as Nn } from "react-wrap-balancer";
-import { twMerge as Fn } from "tailwind-merge";
-import { S as Me, a as it } from "./MODIFIERS-RiXS5Mn1.js";
-import { getBlockComponent as Wn } from "@chaibuilder/runtime";
+import { flip as On } from "@floating-ui/dom";
+import { useFloating as An, shift as Pn } from "@floating-ui/react-dom";
+import { useResizeObserver as Rn } from "@react-hookz/web";
+import { tailwindcssPaletteGenerator as Mn } from "@bobthered/tailwindcss-palette-generator";
+import { Provider as Ln } from "react-wrap-balancer";
+import { twMerge as Nn } from "tailwind-merge";
+import { S as Le, a as it } from "./MODIFIERS-RiXS5Mn1.js";
+import { getBlockComponent as at } from "@chaibuilder/runtime";
+import { has as Fn } from "lodash";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "./utils-AvyFzbPC.js";
@@ -54,25 +55,24 @@ import "react-dnd";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "sonner";
-import "./html-to-json-yjzEN9OX.js";
+import "./html-to-json-57841sEK.js";
 import "himalaya";
-import "lodash";
 import "lucide-react";
 import "./web-blocks.js";
 import "./controls-XPXGHKht.js";
 const $n = () => {
-  const { undoCount: e, redoCount: t, undo: n, redo: s } = Te();
+  const { undoCount: e, redoCount: t, undo: n, redo: s } = Ce();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ r.jsx(le, { disabled: !e, size: "sm", onClick: n, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(Ae, {}) }),
-    /* @__PURE__ */ r.jsx(le, { disabled: !t, onClick: s, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(Ae, { className: "rotate-180 scale-y-[-1] transform" }) })
+    /* @__PURE__ */ r.jsx(le, { disabled: !e, size: "sm", onClick: n, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(Pe, {}) }),
+    /* @__PURE__ */ r.jsx(le, { disabled: !t, onClick: s, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(Pe, { className: "rotate-180 scale-y-[-1] transform" }) })
   ] });
 };
-function Hn() {
+function Wn() {
   const [e, t] = Ze(), { t: n } = de();
   return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ r.jsx(Ht, { htmlFor: "dark-mode-switch", children: n("dark_mode") }),
+    /* @__PURE__ */ r.jsx(qt, { htmlFor: "dark-mode-switch", children: n("dark_mode") }),
     /* @__PURE__ */ r.jsxs(
-      qt,
+      Ut,
       {
         id: "dark-mode-switch",
         checked: e,
@@ -96,7 +96,7 @@ function Hn() {
     )
   ] });
 }
-const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
+const Ne = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
   "svg",
   {
     className: e ? "rotate-90" : "",
@@ -119,7 +119,7 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
       )
     ]
   }
-), qn = [
+), Hn = [
   {
     title: "mobile_xs_title",
     content: "mobile_xs_content",
@@ -138,21 +138,21 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
     title: "tablet_md_title",
     content: "tablet_md_content",
     breakpoint: "md",
-    icon: /* @__PURE__ */ r.jsx(Le, {}),
+    icon: /* @__PURE__ */ r.jsx(Ne, {}),
     width: 800
   },
   {
     title: "tablet_lg_title",
     content: "tablet_lg_content",
     breakpoint: "lg",
-    icon: /* @__PURE__ */ r.jsx(Le, { landscape: !0 }),
+    icon: /* @__PURE__ */ r.jsx(Ne, { landscape: !0 }),
     width: 1024
   },
   {
     title: "desktop_xl_title",
     content: "desktop_xl_content",
     breakpoint: "xl",
-    icon: /* @__PURE__ */ r.jsx(At, {}),
+    icon: /* @__PURE__ */ r.jsx(Pt, {}),
     width: 1420
   },
   {
@@ -162,51 +162,51 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
     icon: /* @__PURE__ */ r.jsx(Rt, {}),
     width: 1920
   }
-], Ne = ({
+], Fe = ({
   title: e,
   content: t,
   currentBreakpoint: n,
   breakpoint: s,
   width: i,
-  icon: a,
+  icon: l,
   onClick: d
 }) => {
   const { t: o } = de();
-  return /* @__PURE__ */ r.jsxs(Ut, { children: [
-    /* @__PURE__ */ r.jsx(zt, { asChild: !0, children: /* @__PURE__ */ r.jsx(
+  return /* @__PURE__ */ r.jsxs(zt, { children: [
+    /* @__PURE__ */ r.jsx(Yt, { asChild: !0, children: /* @__PURE__ */ r.jsx(
       le,
       {
         onClick: () => d(i),
         size: "sm",
         variant: s === n ? "secondary" : "ghost",
-        children: a
+        children: l
       }
     ) }),
-    /* @__PURE__ */ r.jsx(Yt, { className: "w-52 border-border", children: /* @__PURE__ */ r.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ r.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ r.jsx(Kt, { className: "w-52 border-border", children: /* @__PURE__ */ r.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ r.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ r.jsx("h4", { className: "text-sm font-semibold", children: o(e) }),
       /* @__PURE__ */ r.jsx("p", { className: "text-xs", children: o(t) })
     ] }) }) })
   ] });
-}, Un = () => {
-  const [, e, t] = Ce(), [n, s] = Kt(), { t: i } = de(), a = Ge("breakpoints", qn), d = (o) => {
+}, qn = () => {
+  const [, e, t] = Ie(), [n, s] = Jt(), { t: i } = de(), l = Ee("breakpoints", Hn), d = (o) => {
     n.includes(o) ? n.length > 2 && s(n.filter((c) => c !== o)) : s((c) => [...c, o]);
   };
-  return a.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: re(a, (o) => /* @__PURE__ */ _e(Ne, { ...o, onClick: t, key: o.breakpoint, currentBreakpoint: e })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
+  return l.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: re(l, (o) => /* @__PURE__ */ be(Fe, { ...o, onClick: t, key: o.breakpoint, currentBreakpoint: e })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
     re(
-      a.filter((o) => Oe(n, pe(o.breakpoint))),
-      (o) => /* @__PURE__ */ _e(Ne, { ...o, onClick: t, key: o.breakpoint, currentBreakpoint: e })
+      l.filter((o) => Ae(n, pe(o.breakpoint))),
+      (o) => /* @__PURE__ */ be(Fe, { ...o, onClick: t, key: o.breakpoint, currentBreakpoint: e })
     ),
-    /* @__PURE__ */ r.jsxs(Jt, { children: [
-      /* @__PURE__ */ r.jsx(Vt, { asChild: !0, children: /* @__PURE__ */ r.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ r.jsx(Pt, { className: "scale-90 transform" }) }) }),
+    /* @__PURE__ */ r.jsxs(Vt, { children: [
+      /* @__PURE__ */ r.jsx(Xt, { asChild: !0, children: /* @__PURE__ */ r.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ r.jsx(Mt, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ r.jsxs(Zt, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ r.jsx(Gt, { children: i("Breakpoints") }),
-        /* @__PURE__ */ r.jsx(Qt, {}),
-        re(a, (o) => /* @__PURE__ */ r.jsx(
-          Xt,
+        /* @__PURE__ */ r.jsx(Qt, { children: i("Breakpoints") }),
+        /* @__PURE__ */ r.jsx(Gt, {}),
+        re(l, (o) => /* @__PURE__ */ r.jsx(
+          en,
           {
             disabled: o.breakpoint === "xs",
             onCheckedChange: () => d(pe(o.breakpoint)),
-            checked: Oe(n, pe(o.breakpoint)),
+            checked: Ae(n, pe(o.breakpoint)),
             children: i(o.title)
           },
           o.breakpoint
@@ -214,42 +214,42 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
       ] })
     ] })
   ] });
-}, zn = () => {
-  const { t: e } = de(), [t] = en(), { createSnapshot: n } = Te(), [, s] = U(), [, i] = Z(), a = we(() => {
+}, Un = () => {
+  const { t: e } = de(), [t] = tn(), { createSnapshot: n } = Ce(), [, s] = U(), [, i] = X(), l = je(() => {
     t([]), s([]), i([]), n();
   }, [t, n]);
-  return /* @__PURE__ */ r.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ r.jsxs(tn, { children: [
-    /* @__PURE__ */ r.jsx(nn, { asChild: !0, children: /* @__PURE__ */ r.jsxs(le, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
-      /* @__PURE__ */ r.jsx(Mt, {}),
+  return /* @__PURE__ */ r.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ r.jsxs(nn, { children: [
+    /* @__PURE__ */ r.jsx(rn, { asChild: !0, children: /* @__PURE__ */ r.jsxs(le, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ r.jsx(Lt, {}),
       " ",
       e("clear")
     ] }) }),
-    /* @__PURE__ */ r.jsxs(rn, { className: "border-border", children: [
-      /* @__PURE__ */ r.jsxs(on, { children: [
-        /* @__PURE__ */ r.jsx(sn, { children: e("clear_canvas_title") }),
-        /* @__PURE__ */ r.jsx(an, { children: e("clear_canvas_description") })
+    /* @__PURE__ */ r.jsxs(on, { className: "border-border", children: [
+      /* @__PURE__ */ r.jsxs(sn, { children: [
+        /* @__PURE__ */ r.jsx(an, { children: e("clear_canvas_title") }),
+        /* @__PURE__ */ r.jsx(ln, { children: e("clear_canvas_description") })
       ] }),
-      /* @__PURE__ */ r.jsxs(ln, { children: [
-        /* @__PURE__ */ r.jsx(cn, { children: e("cancel") }),
-        /* @__PURE__ */ r.jsx(dn, { onClick: a, children: e("yes") })
+      /* @__PURE__ */ r.jsxs(cn, { children: [
+        /* @__PURE__ */ r.jsx(dn, { children: e("cancel") }),
+        /* @__PURE__ */ r.jsx(un, { onClick: l, children: e("yes") })
       ] })
     ] })
   ] }) });
-}, Yn = () => {
-  const e = un("darkMode", !1), [t] = Qe();
+}, zn = () => {
+  const e = pn("darkMode", !1), [t] = Qe();
   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: [
       e ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        /* @__PURE__ */ r.jsx(Hn, {}),
+        /* @__PURE__ */ r.jsx(Wn, {}),
         /* @__PURE__ */ r.jsx(ie, { orientation: "vertical" })
       ] }) : null,
-      /* @__PURE__ */ r.jsx(Un, {}),
+      /* @__PURE__ */ r.jsx(qn, {}),
       /* @__PURE__ */ r.jsx(ie, { orientation: "vertical" }),
       /* @__PURE__ */ r.jsxs("div", { className: "flex w-12 items-center justify-center gap-x-1 space-x-0 font-medium", children: [
-        /* @__PURE__ */ r.jsx(Lt, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ r.jsx(Nt, { className: "h-3.5 w-3.5 flex-shrink-0" }),
         " ",
         /* @__PURE__ */ r.jsxs("div", { className: "text-xs leading-3", children: [
-          It(t, 0),
+          Et(t, 0),
           "%"
         ] })
       ] }),
@@ -258,10 +258,10 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
     ] }),
     /* @__PURE__ */ r.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
       /* @__PURE__ */ r.jsx(ie, { orientation: "vertical" }),
-      /* @__PURE__ */ r.jsx(zn, {})
+      /* @__PURE__ */ r.jsx(Un, {})
     ] })
   ] });
-}, Kn = `<!doctype html>
+}, Yn = `<!doctype html>
 <html class="scroll-smooth h-full overflow-y-auto">
   <head>
     <meta charset="UTF-8">
@@ -296,6 +296,7 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
         -moz-user-select: text;
         user-select: text;
     }
+    .frame-root .frame-content { height: 100%; }
     </style>    
     <style id="hidden-blocks"></style>
     <style id="selected-block"></style>
@@ -305,11 +306,11 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
 
   </head>
   <body class="font-body antialiased h-full">
-    <div class="frame-root"></div>
+    <div class="frame-root h-full"></div>
     <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
   </body>
-</html>`, Jn = (e) => {
-  const [t] = Ce(), [, n] = Qe(), [s, i] = q({}), a = we(() => {
+</html>`, Kn = (e) => {
+  const [t] = Ie(), [, n] = Qe(), [s, i] = q({}), l = je(() => {
     const { width: d, height: o } = e;
     if (d < t) {
       const c = parseFloat((d / t).toFixed(2).toString());
@@ -330,8 +331,8 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ r.jsxs(
       i({}), n(100);
   }, [t, e, n]);
   return M(() => {
-    a();
-  }, [t, e, n, a]), s;
+    l();
+  }, [t, e, n, l]), s;
 };
 var ce = { exports: {} };
 /*
@@ -339,23 +340,23 @@ object-assign
 (c) Sindre Sorhus
 @license MIT
 */
-var fe, Fe;
-function Vn() {
-  if (Fe)
+var fe, $e;
+function Jn() {
+  if ($e)
     return fe;
-  Fe = 1;
+  $e = 1;
   var e = Object.getOwnPropertySymbols, t = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
-  function s(a) {
-    if (a == null)
+  function s(l) {
+    if (l == null)
       throw new TypeError("Object.assign cannot be called with null or undefined");
-    return Object(a);
+    return Object(l);
   }
   function i() {
     try {
       if (!Object.assign)
         return !1;
-      var a = new String("abc");
-      if (a[5] = "de", Object.getOwnPropertyNames(a)[0] === "5")
+      var l = new String("abc");
+      if (l[5] = "de", Object.getOwnPropertyNames(l)[0] === "5")
         return !1;
       for (var d = {}, o = 0; o < 10; o++)
         d["_" + String.fromCharCode(o)] = o;
@@ -372,8 +373,8 @@ function Vn() {
       return !1;
     }
   }
-  return fe = i() ? Object.assign : function(a, d) {
-    for (var o, c = s(a), p, f = 1; f < arguments.length; f++) {
+  return fe = i() ? Object.assign : function(l, d) {
+    for (var o, c = s(l), p, f = 1; f < arguments.length; f++) {
       o = Object(arguments[f]);
       for (var h in o)
         t.call(o, h) && (c[h] = o[h]);
@@ -387,28 +388,28 @@ function Vn() {
   }, fe;
 }
 var he, We;
-function Ee() {
+function De() {
   if (We)
     return he;
   We = 1;
   var e = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
   return he = e, he;
 }
-var ge, $e;
-function at() {
-  return $e || ($e = 1, ge = Function.call.bind(Object.prototype.hasOwnProperty)), ge;
+var ge, He;
+function lt() {
+  return He || (He = 1, ge = Function.call.bind(Object.prototype.hasOwnProperty)), ge;
 }
-var me, He;
-function Zn() {
-  if (He)
+var me, qe;
+function Vn() {
+  if (qe)
     return me;
-  He = 1;
+  qe = 1;
   var e = function() {
   };
   if (process.env.NODE_ENV !== "production") {
-    var t = Ee(), n = {}, s = at();
-    e = function(a) {
-      var d = "Warning: " + a;
+    var t = De(), n = {}, s = lt();
+    e = function(l) {
+      var d = "Warning: " + l;
       typeof console < "u" && console.error(d);
       try {
         throw new Error(d);
@@ -416,19 +417,19 @@ function Zn() {
       }
     };
   }
-  function i(a, d, o, c, p) {
+  function i(l, d, o, c, p) {
     if (process.env.NODE_ENV !== "production") {
-      for (var f in a)
-        if (s(a, f)) {
+      for (var f in l)
+        if (s(l, f)) {
           var h;
           try {
-            if (typeof a[f] != "function") {
+            if (typeof l[f] != "function") {
               var g = Error(
-                (c || "React class") + ": " + o + " type `" + f + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof a[f] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+                (c || "React class") + ": " + o + " type `" + f + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof l[f] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
               );
               throw g.name = "Invariant Violation", g;
             }
-            h = a[f](d, f, c, o, null, t);
+            h = l[f](d, f, c, o, null, t);
           } catch (A) {
             h = A;
           }
@@ -448,14 +449,14 @@ function Zn() {
     process.env.NODE_ENV !== "production" && (n = {});
   }, me = i, me;
 }
-var ye, qe;
-function Gn() {
-  if (qe)
+var ye, Ue;
+function Xn() {
+  if (Ue)
     return ye;
-  qe = 1;
-  var e = ot, t = Vn(), n = Ee(), s = at(), i = Zn(), a = function() {
+  Ue = 1;
+  var e = ot, t = Jn(), n = De(), s = lt(), i = Vn(), l = function() {
   };
-  process.env.NODE_ENV !== "production" && (a = function(o) {
+  process.env.NODE_ENV !== "production" && (l = function(o) {
     var c = "Warning: " + o;
     typeof console < "u" && console.error(c);
     try {
@@ -468,70 +469,70 @@ function Gn() {
   }
   return ye = function(o, c) {
     var p = typeof Symbol == "function" && Symbol.iterator, f = "@@iterator";
-    function h(l) {
-      var u = l && (p && l[p] || l[f]);
+    function h(a) {
+      var u = a && (p && a[p] || a[f]);
       if (typeof u == "function")
         return u;
     }
     var g = "<<anonymous>>", E = {
-      array: D("array"),
-      bigint: D("bigint"),
-      bool: D("boolean"),
-      func: D("function"),
-      number: D("number"),
-      object: D("object"),
-      string: D("string"),
-      symbol: D("symbol"),
+      array: B("array"),
+      bigint: B("bigint"),
+      bool: B("boolean"),
+      func: B("function"),
+      number: B("number"),
+      object: B("object"),
+      string: B("string"),
+      symbol: B("symbol"),
       any: O(),
       arrayOf: w,
-      element: N(),
-      elementType: W(),
+      element: F(),
+      elementType: $(),
       instanceOf: _,
-      node: mt(),
+      node: yt(),
       objectOf: H,
-      oneOf: $,
-      oneOfType: gt,
-      shape: yt,
-      exact: vt
+      oneOf: W,
+      oneOfType: mt,
+      shape: vt,
+      exact: xt
     };
-    function A(l, u) {
-      return l === u ? l !== 0 || 1 / l === 1 / u : l !== l && u !== u;
+    function A(a, u) {
+      return a === u ? a !== 0 || 1 / a === 1 / u : a !== a && u !== u;
     }
-    function b(l, u) {
-      this.message = l, this.data = u && typeof u == "object" ? u : {}, this.stack = "";
+    function b(a, u) {
+      this.message = a, this.data = u && typeof u == "object" ? u : {}, this.stack = "";
     }
     b.prototype = Error.prototype;
-    function S(l) {
+    function S(a) {
       if (process.env.NODE_ENV !== "production")
         var u = {}, k = 0;
       function v(j, y, x, T, I, C, L) {
         if (T = T || g, C = C || x, L !== n) {
           if (c) {
-            var R = new Error(
+            var P = new Error(
               "Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types"
             );
-            throw R.name = "Invariant Violation", R;
+            throw P.name = "Invariant Violation", P;
           } else if (process.env.NODE_ENV !== "production" && typeof console < "u") {
-            var G = T + ":" + x;
-            !u[G] && // Avoid spamming the console because they are often not actionable except for lib authors
-            k < 3 && (a(
+            var Z = T + ":" + x;
+            !u[Z] && // Avoid spamming the console because they are often not actionable except for lib authors
+            k < 3 && (l(
               "You are manually calling a React.PropTypes validation function for the `" + C + "` prop on `" + T + "`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."
-            ), u[G] = !0, k++);
+            ), u[Z] = !0, k++);
           }
         }
-        return y[x] == null ? j ? y[x] === null ? new b("The " + I + " `" + C + "` is marked as required " + ("in `" + T + "`, but its value is `null`.")) : new b("The " + I + " `" + C + "` is marked as required in " + ("`" + T + "`, but its value is `undefined`.")) : null : l(y, x, T, I, C);
+        return y[x] == null ? j ? y[x] === null ? new b("The " + I + " `" + C + "` is marked as required " + ("in `" + T + "`, but its value is `null`.")) : new b("The " + I + " `" + C + "` is marked as required in " + ("`" + T + "`, but its value is `undefined`.")) : null : a(y, x, T, I, C);
       }
       var m = v.bind(null, !1);
       return m.isRequired = v.bind(null, !0), m;
     }
-    function D(l) {
+    function B(a) {
       function u(k, v, m, j, y, x) {
         var T = k[v], I = z(T);
-        if (I !== l) {
+        if (I !== a) {
           var C = ee(T);
           return new b(
-            "Invalid " + j + " `" + y + "` of type " + ("`" + C + "` supplied to `" + m + "`, expected ") + ("`" + l + "`."),
-            { expectedType: l }
+            "Invalid " + j + " `" + y + "` of type " + ("`" + C + "` supplied to `" + m + "`, expected ") + ("`" + a + "`."),
+            { expectedType: a }
           );
         }
         return null;
@@ -541,9 +542,9 @@ function Gn() {
     function O() {
       return S(d);
     }
-    function w(l) {
+    function w(a) {
       function u(k, v, m, j, y) {
-        if (typeof l != "function")
+        if (typeof a != "function")
           return new b("Property `" + y + "` of component `" + m + "` has invalid PropType notation inside arrayOf.");
         var x = k[v];
         if (!Array.isArray(x)) {
@@ -551,7 +552,7 @@ function Gn() {
           return new b("Invalid " + j + " `" + y + "` of type " + ("`" + T + "` supplied to `" + m + "`, expected an array."));
         }
         for (var I = 0; I < x.length; I++) {
-          var C = l(x, I, m, j, y + "[" + I + "]", n);
+          var C = a(x, I, m, j, y + "[" + I + "]", n);
           if (C instanceof Error)
             return C;
         }
@@ -559,8 +560,8 @@ function Gn() {
       }
       return S(u);
     }
-    function N() {
-      function l(u, k, v, m, j) {
+    function F() {
+      function a(u, k, v, m, j) {
         var y = u[k];
         if (!o(y)) {
           var x = z(y);
@@ -568,10 +569,10 @@ function Gn() {
         }
         return null;
       }
-      return S(l);
+      return S(a);
     }
-    function W() {
-      function l(u, k, v, m, j) {
+    function $() {
+      function a(u, k, v, m, j) {
         var y = u[k];
         if (!e.isValidElementType(y)) {
           var x = z(y);
@@ -579,45 +580,45 @@ function Gn() {
         }
         return null;
       }
-      return S(l);
+      return S(a);
     }
-    function _(l) {
+    function _(a) {
       function u(k, v, m, j, y) {
-        if (!(k[v] instanceof l)) {
-          var x = l.name || g, T = kt(k[v]);
+        if (!(k[v] instanceof a)) {
+          var x = a.name || g, T = wt(k[v]);
           return new b("Invalid " + j + " `" + y + "` of type " + ("`" + T + "` supplied to `" + m + "`, expected ") + ("instance of `" + x + "`."));
         }
         return null;
       }
       return S(u);
     }
-    function $(l) {
-      if (!Array.isArray(l))
-        return process.env.NODE_ENV !== "production" && (arguments.length > 1 ? a(
+    function W(a) {
+      if (!Array.isArray(a))
+        return process.env.NODE_ENV !== "production" && (arguments.length > 1 ? l(
           "Invalid arguments supplied to oneOf, expected an array, got " + arguments.length + " arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])."
-        ) : a("Invalid argument supplied to oneOf, expected an array.")), d;
+        ) : l("Invalid argument supplied to oneOf, expected an array.")), d;
       function u(k, v, m, j, y) {
-        for (var x = k[v], T = 0; T < l.length; T++)
-          if (A(x, l[T]))
+        for (var x = k[v], T = 0; T < a.length; T++)
+          if (A(x, a[T]))
             return null;
-        var I = JSON.stringify(l, function(L, R) {
-          var G = ee(R);
-          return G === "symbol" ? String(R) : R;
+        var I = JSON.stringify(a, function(L, P) {
+          var Z = ee(P);
+          return Z === "symbol" ? String(P) : P;
         });
         return new b("Invalid " + j + " `" + y + "` of value `" + String(x) + "` " + ("supplied to `" + m + "`, expected one of " + I + "."));
       }
       return S(u);
     }
-    function H(l) {
+    function H(a) {
       function u(k, v, m, j, y) {
-        if (typeof l != "function")
+        if (typeof a != "function")
           return new b("Property `" + y + "` of component `" + m + "` has invalid PropType notation inside objectOf.");
         var x = k[v], T = z(x);
         if (T !== "object")
           return new b("Invalid " + j + " `" + y + "` of type " + ("`" + T + "` supplied to `" + m + "`, expected an object."));
         for (var I in x)
           if (s(x, I)) {
-            var C = l(x, I, m, j, y + "." + I, n);
+            var C = a(x, I, m, j, y + "." + I, n);
             if (C instanceof Error)
               return C;
           }
@@ -625,48 +626,48 @@ function Gn() {
       }
       return S(u);
     }
-    function gt(l) {
-      if (!Array.isArray(l))
-        return process.env.NODE_ENV !== "production" && a("Invalid argument supplied to oneOfType, expected an instance of array."), d;
-      for (var u = 0; u < l.length; u++) {
-        var k = l[u];
+    function mt(a) {
+      if (!Array.isArray(a))
+        return process.env.NODE_ENV !== "production" && l("Invalid argument supplied to oneOfType, expected an instance of array."), d;
+      for (var u = 0; u < a.length; u++) {
+        var k = a[u];
         if (typeof k != "function")
-          return a(
-            "Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + bt(k) + " at index " + u + "."
+          return l(
+            "Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + kt(k) + " at index " + u + "."
           ), d;
       }
       function v(m, j, y, x, T) {
-        for (var I = [], C = 0; C < l.length; C++) {
-          var L = l[C], R = L(m, j, y, x, T, n);
-          if (R == null)
+        for (var I = [], C = 0; C < a.length; C++) {
+          var L = a[C], P = L(m, j, y, x, T, n);
+          if (P == null)
             return null;
-          R.data && s(R.data, "expectedType") && I.push(R.data.expectedType);
+          P.data && s(P.data, "expectedType") && I.push(P.data.expectedType);
         }
-        var G = I.length > 0 ? ", expected one of type [" + I.join(", ") + "]" : "";
-        return new b("Invalid " + x + " `" + T + "` supplied to " + ("`" + y + "`" + G + "."));
+        var Z = I.length > 0 ? ", expected one of type [" + I.join(", ") + "]" : "";
+        return new b("Invalid " + x + " `" + T + "` supplied to " + ("`" + y + "`" + Z + "."));
       }
       return S(v);
     }
-    function mt() {
-      function l(u, k, v, m, j) {
+    function yt() {
+      function a(u, k, v, m, j) {
         return se(u[k]) ? null : new b("Invalid " + m + " `" + j + "` supplied to " + ("`" + v + "`, expected a ReactNode."));
       }
-      return S(l);
+      return S(a);
     }
-    function De(l, u, k, v, m) {
+    function _e(a, u, k, v, m) {
       return new b(
-        (l || "React class") + ": " + u + " type `" + k + "." + v + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + m + "`."
+        (a || "React class") + ": " + u + " type `" + k + "." + v + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + m + "`."
       );
     }
-    function yt(l) {
+    function vt(a) {
       function u(k, v, m, j, y) {
         var x = k[v], T = z(x);
         if (T !== "object")
           return new b("Invalid " + j + " `" + y + "` of type `" + T + "` " + ("supplied to `" + m + "`, expected `object`."));
-        for (var I in l) {
-          var C = l[I];
+        for (var I in a) {
+          var C = a[I];
           if (typeof C != "function")
-            return De(m, j, y, I, ee(C));
+            return _e(m, j, y, I, ee(C));
           var L = C(x, I, m, j, y + "." + I, n);
           if (L)
             return L;
@@ -675,46 +676,46 @@ function Gn() {
       }
       return S(u);
     }
-    function vt(l) {
+    function xt(a) {
       function u(k, v, m, j, y) {
         var x = k[v], T = z(x);
         if (T !== "object")
           return new b("Invalid " + j + " `" + y + "` of type `" + T + "` " + ("supplied to `" + m + "`, expected `object`."));
-        var I = t({}, k[v], l);
+        var I = t({}, k[v], a);
         for (var C in I) {
-          var L = l[C];
-          if (s(l, C) && typeof L != "function")
-            return De(m, j, y, C, ee(L));
+          var L = a[C];
+          if (s(a, C) && typeof L != "function")
+            return _e(m, j, y, C, ee(L));
           if (!L)
             return new b(
               "Invalid " + j + " `" + y + "` key `" + C + "` supplied to `" + m + "`.\nBad object: " + JSON.stringify(k[v], null, "  ") + `
-Valid keys: ` + JSON.stringify(Object.keys(l), null, "  ")
+Valid keys: ` + JSON.stringify(Object.keys(a), null, "  ")
             );
-          var R = L(x, C, m, j, y + "." + C, n);
-          if (R)
-            return R;
+          var P = L(x, C, m, j, y + "." + C, n);
+          if (P)
+            return P;
         }
         return null;
       }
       return S(u);
     }
-    function se(l) {
-      switch (typeof l) {
+    function se(a) {
+      switch (typeof a) {
         case "number":
         case "string":
         case "undefined":
           return !0;
         case "boolean":
-          return !l;
+          return !a;
         case "object":
-          if (Array.isArray(l))
-            return l.every(se);
-          if (l === null || o(l))
+          if (Array.isArray(a))
+            return a.every(se);
+          if (a === null || o(a))
             return !0;
-          var u = h(l);
+          var u = h(a);
           if (u) {
-            var k = u.call(l), v;
-            if (u !== l.entries) {
+            var k = u.call(a), v;
+            if (u !== a.entries) {
               for (; !(v = k.next()).done; )
                 if (!se(v.value))
                   return !1;
@@ -731,27 +732,27 @@ Valid keys: ` + JSON.stringify(Object.keys(l), null, "  ")
           return !1;
       }
     }
-    function xt(l, u) {
-      return l === "symbol" ? !0 : u ? u["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && u instanceof Symbol : !1;
+    function bt(a, u) {
+      return a === "symbol" ? !0 : u ? u["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && u instanceof Symbol : !1;
     }
-    function z(l) {
-      var u = typeof l;
-      return Array.isArray(l) ? "array" : l instanceof RegExp ? "object" : xt(u, l) ? "symbol" : u;
+    function z(a) {
+      var u = typeof a;
+      return Array.isArray(a) ? "array" : a instanceof RegExp ? "object" : bt(u, a) ? "symbol" : u;
     }
-    function ee(l) {
-      if (typeof l > "u" || l === null)
-        return "" + l;
-      var u = z(l);
+    function ee(a) {
+      if (typeof a > "u" || a === null)
+        return "" + a;
+      var u = z(a);
       if (u === "object") {
-        if (l instanceof Date)
+        if (a instanceof Date)
           return "date";
-        if (l instanceof RegExp)
+        if (a instanceof RegExp)
           return "regexp";
       }
       return u;
     }
-    function bt(l) {
-      var u = ee(l);
+    function kt(a) {
+      var u = ee(a);
       switch (u) {
         case "array":
         case "object":
@@ -764,18 +765,18 @@ Valid keys: ` + JSON.stringify(Object.keys(l), null, "  ")
           return u;
       }
     }
-    function kt(l) {
-      return !l.constructor || !l.constructor.name ? g : l.constructor.name;
+    function wt(a) {
+      return !a.constructor || !a.constructor.name ? g : a.constructor.name;
     }
     return E.checkPropTypes = i, E.resetWarningCache = i.resetWarningCache, E.PropTypes = E, E;
   }, ye;
 }
-var ve, Ue;
-function Qn() {
-  if (Ue)
+var ve, ze;
+function Zn() {
+  if (ze)
     return ve;
-  Ue = 1;
-  var e = Ee();
+  ze = 1;
+  var e = De();
   function t() {
   }
   function n() {
@@ -793,7 +794,7 @@ function Qn() {
     function i() {
       return s;
     }
-    var a = {
+    var l = {
       array: s,
       bigint: s,
       bool: s,
@@ -816,22 +817,22 @@ function Qn() {
       checkPropTypes: n,
       resetWarningCache: t
     };
-    return a.PropTypes = a, a;
+    return l.PropTypes = l, l;
   }, ve;
 }
-var Ro = ce.exports;
+var Ao = ce.exports;
 if (process.env.NODE_ENV !== "production") {
-  var Xn = ot, er = !0;
-  ce.exports = Gn()(Xn.isElement, er);
+  var Qn = ot, Gn = !0;
+  ce.exports = Xn()(Qn.isElement, Gn);
 } else
-  ce.exports = Qn()();
-var tr = ce.exports;
-const P = /* @__PURE__ */ En(tr);
-let lt, ct;
-typeof document < "u" && (lt = document);
-typeof window < "u" && (ct = window);
-const dt = V.createContext({ document: lt, window: ct }), ue = () => V.useContext(dt), { Provider: nr, Consumer: Po } = dt;
-class ut extends Ye {
+  ce.exports = Zn()();
+var er = ce.exports;
+const R = /* @__PURE__ */ In(er);
+let ct, dt;
+typeof document < "u" && (ct = document);
+typeof window < "u" && (dt = window);
+const ut = V.createContext({ document: ct, window: dt }), ue = () => V.useContext(ut), { Provider: tr, Consumer: Po } = ut;
+class pt extends Ke {
   componentDidMount() {
     this.props.contentDidMount();
   }
@@ -839,15 +840,15 @@ class ut extends Ye {
     this.props.contentDidUpdate();
   }
   render() {
-    return Tt.only(this.props.children);
+    return Ct.only(this.props.children);
   }
 }
-J(ut, "propTypes", {
-  children: P.element.isRequired,
-  contentDidMount: P.func.isRequired,
-  contentDidUpdate: P.func.isRequired
+J(pt, "propTypes", {
+  children: R.element.isRequired,
+  contentDidMount: R.func.isRequired,
+  contentDidUpdate: R.func.isRequired
 });
-class be extends Ye {
+class ke extends Ke {
   constructor(n, s) {
     super(n, s);
     J(this, "setRef", (n) => {
@@ -884,8 +885,8 @@ class be extends Ye {
     const n = this.getDoc();
     if (!n)
       return null;
-    const s = this.props.contentDidMount, i = this.props.contentDidUpdate, a = n.defaultView || n.parentView, d = /* @__PURE__ */ r.jsx(ut, { contentDidMount: s, contentDidUpdate: i, children: /* @__PURE__ */ r.jsx(nr, { value: { document: n, window: a }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), o = this.getMountTarget();
-    return [Pe.createPortal(this.props.head, this.getDoc().head), Pe.createPortal(d, o)];
+    const s = this.props.contentDidMount, i = this.props.contentDidUpdate, l = n.defaultView || n.parentView, d = /* @__PURE__ */ r.jsx(pt, { contentDidMount: s, contentDidUpdate: i, children: /* @__PURE__ */ r.jsx(tr, { value: { document: n, window: l }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), o = this.getMountTarget();
+    return [Me.createPortal(this.props.head, this.getDoc().head), Me.createPortal(d, o)];
   }
   render() {
     const n = {
@@ -901,16 +902,16 @@ class be extends Ye {
 // 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.
-J(be, "propTypes", {
-  style: P.object,
+J(ke, "propTypes", {
+  style: R.object,
   // eslint-disable-line
-  head: P.node,
-  initialContent: P.string,
-  mountTarget: P.string,
-  contentDidMount: P.func,
-  contentDidUpdate: P.func,
-  children: P.oneOfType([P.element, P.arrayOf(P.element)])
-}), J(be, "defaultProps", {
+  head: R.node,
+  initialContent: R.string,
+  mountTarget: R.string,
+  contentDidMount: R.func,
+  contentDidUpdate: R.func,
+  children: R.oneOfType([R.element, R.arrayOf(R.element)])
+}), J(ke, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -921,24 +922,24 @@ J(be, "propTypes", {
   },
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
-const rr = V.forwardRef((e, t) => /* @__PURE__ */ r.jsx(be, { ...e, forwardedRef: t }));
-let Y = null, oe = [], ne = null, pt = null;
-function or(e) {
-  const t = window.getComputedStyle(e), n = parseInt(t.paddingLeft, 10), s = parseInt(t.paddingTop, 10), i = parseInt(t.paddingRight, 10), a = parseInt(t.paddingBottom, 10);
-  return { paddingLeft: n, paddingTop: s, paddingRight: i, paddingBottom: a };
+const nr = V.forwardRef((e, t) => /* @__PURE__ */ r.jsx(ke, { ...e, forwardedRef: t }));
+let Y = null, oe = [], ne = null, ft = null;
+function rr(e) {
+  const t = window.getComputedStyle(e), n = parseInt(t.paddingLeft, 10), s = parseInt(t.paddingTop, 10), i = parseInt(t.paddingRight, 10), l = parseInt(t.paddingBottom, 10);
+  return { paddingLeft: n, paddingTop: s, paddingRight: i, paddingBottom: l };
 }
-const ze = (e, t, n) => {
+const Ye = (e, t, n) => {
   if (!Y)
     return;
-  const s = e.getBoundingClientRect(), i = Y == null ? void 0 : Y.getElementById("placeholder"), { paddingLeft: a, paddingTop: d, paddingRight: o, paddingBottom: c } = or(e);
-  i.style.width = t === "vertical" ? s.width - a - o + "px" : "2px", i.style.height = t === "vertical" ? "2px" : s.height - d - c + "px", i.style.display = "block";
+  const s = e.getBoundingClientRect(), i = Y == null ? void 0 : Y.getElementById("placeholder"), { paddingLeft: l, paddingTop: d, paddingRight: o, paddingBottom: c } = rr(e);
+  i.style.width = t === "vertical" ? s.width - l - o + "px" : "2px", i.style.height = t === "vertical" ? "2px" : s.height - d - c + "px", i.style.display = "block";
   const p = oe.reduce(
     (f, h) => Math.abs(h - n) < Math.abs(f - n) ? h : f
   );
-  pt = oe.indexOf(p), t === "vertical" ? (i.style.top = e.offsetTop + p + "px", i.style.left = e.offsetLeft + a + "px") : (i.style.top = e.offsetTop + d + "px", i.style.left = e.offsetLeft + p + "px");
-}, sr = (e) => {
-  const t = ft(e), n = window.getComputedStyle(e), s = t === "horizontal", i = parseInt(n.paddingLeft), a = parseInt(n.paddingTop);
-  let d = s ? i : a;
+  ft = oe.indexOf(p), t === "vertical" ? (i.style.top = e.offsetTop + p + "px", i.style.left = e.offsetLeft + l + "px") : (i.style.top = e.offsetTop + d + "px", i.style.left = e.offsetLeft + p + "px");
+}, or = (e) => {
+  const t = ht(e), n = window.getComputedStyle(e), s = t === "horizontal", i = parseInt(n.paddingLeft), l = parseInt(n.paddingTop);
+  let d = s ? i : l;
   oe = [d], Array.from(e.children).forEach((o) => {
     const c = window.getComputedStyle(o), p = parseInt(
       s ? c.marginLeft + c.marginRight : c.marginTop + c.marginBottom
@@ -946,7 +947,7 @@ const ze = (e, t, n) => {
     oe.push(d + f + p), d += f + p;
   });
 };
-function ft(e) {
+function ht(e) {
   const t = window.getComputedStyle(e).display, n = window.getComputedStyle(e).flexDirection;
   if (t === "flex")
     return n === "column" || n === "column-reverse" ? "vertical" : "horizontal";
@@ -959,33 +960,33 @@ function ft(e) {
   }
   return t === "block" ? "vertical" : "horizontal";
 }
-const ir = Je((e) => {
-  const t = e.target, n = ft(t);
+const sr = Ve((e) => {
+  const t = e.target, n = ht(t);
   if (n === "vertical") {
     const s = e.clientY - t.offsetTop;
-    ze(t, n, s);
+    Ye(t, n, s);
   } else {
     const s = e.clientX - t.offsetLeft;
-    ze(t, n, s);
+    Ye(t, n, s);
   }
-}, 200), ar = (e) => {
-  e.preventDefault(), e.stopPropagation(), ir(e);
+}, 200), ir = (e) => {
+  e.preventDefault(), e.stopPropagation(), sr(e);
 };
 function xe() {
   const e = Y == null ? void 0 : Y.getElementById("placeholder");
   e.style.display = "none";
 }
-const lr = () => {
-  const { document: e } = ue(), [t, n] = F(pn), s = On(), i = st("dnd"), [, a] = Q(), [, d] = U();
+const ar = () => {
+  const { document: e } = ue(), [t, n] = N(fn), s = _n(), i = st("dnd"), [, l] = Q(), [, d] = U();
   return Y = e, {
     isDragging: t,
     "data-dnd": "branch",
-    onDragOver: i ? ar : te,
+    onDragOver: i ? ir : te,
     onDrop: i ? (o) => {
       ne == null || ne.classList.remove("outline", "outline-green-300", "outline-2", "-outline-offset-2");
       const c = JSON.parse(o.dataTransfer.getData("text/plain"));
       let p = o.target.getAttribute("data-block-id");
-      p === null && (p = o.target.parentElement.getAttribute("data-block-id")), s({ block: c, dropTargetId: p || null, relativeIndex: pt }), n(!1), xe(), setTimeout(() => {
+      p === null && (p = o.target.parentElement.getAttribute("data-block-id")), s({ block: c, dropTargetId: p || null, relativeIndex: ft }), n(!1), xe(), setTimeout(() => {
         xe();
       }, 300);
     } : te,
@@ -993,7 +994,7 @@ const lr = () => {
       const c = o;
       ne = c.target, c.stopPropagation(), c.preventDefault(), oe = [];
       const p = c.target;
-      sr(p), p.classList.add("outline", "outline-green-300", "outline-2", "-outline-offset-2"), n(!0), a(""), d([]);
+      or(p), p.classList.add("outline", "outline-green-300", "outline-2", "-outline-offset-2"), n(!0), l(""), d([]);
     } : te,
     onDragLeave: i ? (o) => {
       const c = o;
@@ -1004,21 +1005,21 @@ const lr = () => {
     } : te
   };
 };
-function Se(e) {
+function Be(e) {
   return e.getAttribute("data-block-id") ? e : e.closest("[data-block-id]");
 }
-function cr(e) {
+function lr(e) {
   e.container.innerHTML = "", e.container.parentNode.removeChild(e.container);
   var t = document.querySelector(".ql-toolbar");
   t && t.parentNode.removeChild(t), e = null;
 }
-const dr = () => {
-  const e = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], t = fn(), [, n] = Q(), [s, i] = F(X);
-  return (a) => {
+const cr = () => {
+  const e = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], t = hn(), [, n] = Q(), [s, i] = N(G);
+  return (l) => {
     var h;
     if (s)
       return;
-    const d = Se(a.target), o = d.getAttribute("data-block-type");
+    const d = Be(l.target), o = d.getAttribute("data-block-type");
     if (!o || !e.includes(o))
       return;
     const c = d.cloneNode(!0);
@@ -1028,38 +1029,38 @@ const dr = () => {
     const p = new Bn(c, { placeholder: "Type here..." });
     function f() {
       const g = p.getText(0, p.getLength());
-      t([d.getAttribute("data-block-id")], { content: g }), d.removeAttribute("style"), c.removeEventListener("blur", f, !0), cr(p), i(""), n("");
+      t([d.getAttribute("data-block-id")], { content: g }), d.removeAttribute("style"), c.removeEventListener("blur", f, !0), lr(p), i(""), n("");
     }
     c.addEventListener("blur", f, !0), p.focus(), (h = c.querySelector(".ql-clipboard")) == null || h.remove(), i(d.getAttribute("data-block-id"));
   };
-}, ur = () => {
-  const [, e] = Z(), [, t] = U(), [n] = F(X);
+}, dr = () => {
+  const [, e] = X(), [, t] = U(), [n] = N(G);
   return (s) => {
     if (n)
       return;
     s.stopPropagation();
-    const i = Se(s.target);
+    const i = Be(s.target);
     if (i != null && i.getAttribute("data-block-parent")) {
-      const a = i.getAttribute("data-style-prop"), d = i.getAttribute("data-style-id"), o = i.getAttribute("data-block-parent");
-      e([{ id: d, prop: a, blockId: o }]), t([o]);
+      const l = i.getAttribute("data-style-prop"), d = i.getAttribute("data-style-id"), o = i.getAttribute("data-block-parent");
+      e([{ id: d, prop: l, blockId: o }]), t([o]);
     } else
       i != null && i.getAttribute("data-block-id") && t([i.getAttribute("data-block-id")]);
   };
-}, pr = Je((e, t) => {
-  const n = Se(e.target);
+}, ur = Ve((e, t) => {
+  const n = Be(e.target);
   n != null && n.getAttribute("data-style-id") && t(n.getAttribute("data-style-id"));
-}, 100), fr = () => {
-  const [, e] = Q(), [t] = F(X);
+}, 100), pr = () => {
+  const [, e] = Q(), [t] = N(G);
   return (n) => {
-    t || pr(n, e);
+    t || ur(n, e);
   };
-}, hr = ({ children: e }) => {
-  const { document: t } = ue(), [n] = U(), [s, i] = Z();
+}, fr = ({ children: e }) => {
+  const { document: t } = ue(), [n] = U(), [s, i] = X();
   M(() => {
     setTimeout(() => {
       if (!K(s))
         return;
-      const p = ht(t, ae(n));
+      const p = gt(t, ae(n));
       if (p) {
         const f = p.getAttribute("data-style-prop");
         if (f) {
@@ -1069,24 +1070,25 @@ const dr = () => {
       }
     }, 100);
   }, [t, n, i, s]);
-  const a = dr(), d = ur(), o = fr(), c = lr();
+  const l = cr(), d = dr(), o = pr(), c = ar();
   return /* @__PURE__ */ r.jsx(
     "div",
     {
+      "data-block-id": "container",
       id: "canvas",
       onClick: d,
-      onDoubleClick: a,
+      onDoubleClick: l,
       onMouseMove: o,
-      ...Et(c, "isDragging"),
-      className: "relative mb-5 max-w-full " + (c.isDragging ? "dragging" : ""),
+      ...St(c, "isDragging"),
+      className: "relative mb-5 h-full max-w-full " + (c.isDragging ? "dragging" : ""),
       children: e
     }
   );
-}, ht = (e, t) => e.querySelector(`[data-block-id="${t}"]`), gr = () => {
-  const { window: e } = ue(), [t, n] = U(), s = Ie(), [, i] = Z(), { undo: a, redo: d } = Te(), o = Xe(), [, c] = hn(), [, p] = gn(), { pasteBlocks: f } = mn(), [, h] = et(), g = tt(), { savePage: E } = yn(), [A] = F(X), [, b] = F(vn), S = (O) => {
+}, gt = (e, t) => e.querySelector(`[data-block-id="${t}"]`), hr = () => {
+  const { window: e } = ue(), [t, n] = U(), s = Se(), [, i] = X(), { undo: l, redo: d } = Ce(), o = Ge(), [, c] = gn(), [, p] = mn(), { pasteBlocks: f } = yn(), [, h] = et(), g = tt(), { savePage: E } = vn(), [A] = N(G), [, b] = N(xn), S = (O) => {
     O.key === "Enter" && (O.preventDefault(), t.length === 1 && b(ae(t)));
-  }, D = (O) => {
-    const w = s.find((N) => N._id === O);
+  }, B = (O) => {
+    const w = s.find((F) => F._id === O);
     return w ? w._parent : null;
   };
   return M(() => {
@@ -1098,15 +1100,15 @@ const dr = () => {
       if (S(w), !A && (w.key === "Delete" || w.key === "Backspace") && (w.preventDefault(), g(t)), w.ctrlKey || w.metaKey) {
         if (w.key === "ArrowUp") {
           w.preventDefault();
-          const N = t.length > 0 ? D(t[0]) : null;
-          N && n([N]);
+          const F = t.length > 0 ? B(t[0]) : null;
+          F && n([F]);
         }
         if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(w.key)) {
           if (A && ["x", "z", "v"].includes(w.key))
             return !0;
           w.preventDefault();
         }
-        w.key === "s" && (w.stopPropagation(), w.preventDefault(), E()), w.key === "z" && a(), w.key === "y" && d(), w.key === "d" && o(t), w.key === "x" && c(t), w.key === "c" && p(t), w.key === "v" && t.length > 0 && f(t[0]);
+        w.key === "s" && (w.stopPropagation(), w.preventDefault(), E()), w.key === "z" && l(), w.key === "y" && d(), w.key === "d" && o(t), w.key === "x" && c(t), w.key === "c" && p(t), w.key === "v" && t.length > 0 && f(t[0]);
       }
     };
     return e.removeEventListener("keydown", O), e.addEventListener("keydown", O), () => {
@@ -1115,7 +1117,7 @@ const dr = () => {
   }, [
     t,
     n,
-    a,
+    l,
     g,
     h,
     d,
@@ -1127,34 +1129,34 @@ const dr = () => {
     E,
     e
   ]), null;
-}, mr = ({ block: e, label: t }) => {
-  const [, n] = U(), [, s] = Q(), [, i] = F(nt), a = st("dnd");
+}, gr = ({ block: e, label: t }) => {
+  const [, n] = U(), [, s] = Q(), [, i] = N(nt), l = st("dnd");
   return /* @__PURE__ */ r.jsxs(
     "div",
     {
       className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
-      draggable: a ? "true" : "false",
+      draggable: l ? "true" : "false",
       onDragStart: (d) => {
-        d.dataTransfer.setData("text/plain", JSON.stringify(St(e, ["_id", "_type"]))), i(e._id), setTimeout(() => {
+        d.dataTransfer.setData("text/plain", JSON.stringify(Dt(e, ["_id", "_type"]))), i(e._id), setTimeout(() => {
           n([]), s(null);
         }, 200);
       },
       children: [
-        /* @__PURE__ */ r.jsx(Nt, {}),
+        /* @__PURE__ */ r.jsx(Ft, {}),
         t
       ]
     }
   );
-}, yr = ({ selectedBlockElement: e, block: t }) => {
-  const n = tt(), s = Xe(), [, i] = U(), [, a] = Z(), [d] = F(X), { floatingStyles: o, refs: c, update: p } = Rn({
+}, mr = ({ selectedBlockElement: e, block: t }) => {
+  const n = tt(), s = Ge(), [, i] = U(), [, l] = X(), [d] = N(G), { floatingStyles: o, refs: c, update: p } = An({
     placement: "top-start",
-    middleware: [Pn(), An()],
+    middleware: [Pn(), On()],
     elements: {
       reference: e
     }
   });
-  Mn(e, () => p(), e !== null);
-  const f = B(t, "_parent", null), h = K(B(t, "_name", "")) ? B(t, "_type", "") : B(t, "_name", "");
+  Rn(e, () => p(), e !== null);
+  const f = D(t, "_parent", null), h = K(D(t, "_name", "")) ? D(t, "_type", "") : D(t, "_name", "");
   return !e || !t || d ? null : /* @__PURE__ */ r.jsxs(
     "div",
     {
@@ -1168,25 +1170,25 @@ const dr = () => {
       onKeyDown: (g) => g.stopPropagation(),
       className: "z-[99999] flex h-6 items-center bg-blue-500  py-2 text-xs text-white",
       children: [
-        /* @__PURE__ */ r.jsx(mr, { label: h, block: t }),
+        /* @__PURE__ */ r.jsx(gr, { label: h, block: t }),
         /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 px-1 ", children: [
           f && /* @__PURE__ */ r.jsx(
-            Ft,
+            $t,
             {
               className: "hover:scale-105 ",
               onClick: () => {
-                a([]), i([f]);
+                l([]), i([f]);
               }
             }
           ),
-          xn(B(t, "_type", "")) ? /* @__PURE__ */ r.jsx(Wt, { className: "hover:scale-105 ", onClick: () => s([t == null ? void 0 : t._id]) }) : null,
-          bn(B(t, "_type", "")) ? /* @__PURE__ */ r.jsx($t, { className: "hover:scale-105 ", onClick: () => n([t == null ? void 0 : t._id]) }) : null
+          bn(D(t, "_type", "")) ? /* @__PURE__ */ r.jsx(Wt, { className: "hover:scale-105 ", onClick: () => s([t == null ? void 0 : t._id]) }) : null,
+          kn(D(t, "_type", "")) ? /* @__PURE__ */ r.jsx(Ht, { className: "hover:scale-105 ", onClick: () => n([t == null ? void 0 : t._id]) }) : null
         ] })
       ]
     }
   );
-}, vr = ({ model: e }) => {
-  const [t] = kn(), [n] = U(), [s] = Ze(), [i] = Q(), [a] = Z(), [d] = F(nt), { document: o, window: c } = ue(), [p] = q(o == null ? void 0 : o.getElementById("highlighted-block")), [f] = q(
+}, yr = ({ model: e }) => {
+  const [t] = wn(), [n] = U(), [s] = Ze(), [i] = Q(), [l] = X(), [d] = N(nt), { document: o, window: c } = ue(), [p] = q(o == null ? void 0 : o.getElementById("highlighted-block")), [f] = q(
     o == null ? void 0 : o.getElementById("selected-block")
   ), [h] = q(
     o == null ? void 0 : o.getElementById("selected-styling-block")
@@ -1194,14 +1196,14 @@ const dr = () => {
   M(() => {
     s ? o == null || o.documentElement.classList.add("dark") : o == null || o.documentElement.classList.remove("dark");
   }, [s, o]);
-  const E = B(t, "headingFont", "DM Sans"), A = B(t, "bodyFont", "DM Sans");
+  const E = D(t, "headingFont", "DM Sans"), A = D(t, "bodyFont", "DM Sans");
   return M(() => {
-    const b = B(t, "primaryColor", "#000"), S = B(t, "secondaryColor", "#FFF"), D = Ln({
+    const b = D(t, "primaryColor", "#000"), S = D(t, "secondaryColor", "#FFF"), B = Mn({
       colors: [b, S],
       names: ["primary", "secondary"]
     });
-    D.primary.DEFAULT = b, D.secondary.DEFAULT = S;
-    const O = B(t, "roundedCorners", "0");
+    B.primary.DEFAULT = b, B.secondary.DEFAULT = S;
+    const O = D(t, "roundedCorners", "0");
     !c || !c.tailwind || (c.tailwind.config = {
       darkMode: "class",
       theme: {
@@ -1213,19 +1215,19 @@ const dr = () => {
           borderRadius: {
             global: `${O || "0"}px`
           },
-          colors: D
+          colors: B
         }
       },
       plugins: [
         // @ts-ignore
-        c.tailwind.plugin.withOptions(({ prefix: w = "ui" } = {}) => ({ addVariant: N }) => {
-          for (const W of ["open", "checked", "selected", "active", "disabled"])
-            N(`${w}-${W}`, [
-              `&[data-headlessui-state~="${W}"]`,
-              `:where([data-headlessui-state~="${W}"]) &`
-            ]), N(`${w}-not-${W}`, [
-              `&[data-headlessui-state]:not([data-headlessui-state~="${W}"])`,
-              `:where([data-headlessui-state]:not([data-headlessui-state~="${W}"])) &:not([data-headlessui-state])`
+        c.tailwind.plugin.withOptions(({ prefix: w = "ui" } = {}) => ({ addVariant: F }) => {
+          for (const $ of ["open", "checked", "selected", "active", "disabled"])
+            F(`${w}-${$}`, [
+              `&[data-headlessui-state~="${$}"]`,
+              `:where([data-headlessui-state~="${$}"]) &`
+            ]), F(`${w}-not-${$}`, [
+              `&[data-headlessui-state]:not([data-headlessui-state~="${$}"])`,
+              `:where([data-headlessui-state]:not([data-headlessui-state~="${$}"])) &:not([data-headlessui-state])`
             ]);
         })
       ]
@@ -1243,12 +1245,12 @@ const dr = () => {
   }, [d]), M(() => {
     p && (p.textContent = i ? `[data-style-id="${i}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
   }, [i, n, p]), M(() => {
-    h && (h.textContent = `${re(a, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
+    h && (h.textContent = `${re(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
-  }, [a, h]), M(() => {
-    const b = B(t, "bodyTextLightColor", "#64748b"), S = B(t, "bodyTextDarkColor", "#94a3b8"), D = B(t, "bodyBgLightColor", "#FFFFFF"), O = B(t, "bodyBgDarkColor", "#0f172a");
-    o.body.className = `font-body antialiased text-[${b}] bg-[${D}] dark:text-[${S}] dark:bg-[${O}]`;
+  }, [l, h]), M(() => {
+    const b = D(t, "bodyTextLightColor", "#64748b"), S = D(t, "bodyTextDarkColor", "#94a3b8"), B = D(t, "bodyBgLightColor", "#FFFFFF"), O = D(t, "bodyBgDarkColor", "#0f172a");
+    o.body.className = `font-body antialiased text-[${b}] bg-[${B}] dark:text-[${S}] dark:bg-[${O}]`;
   }, [t, o, e]), e === "page" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
     E && /* @__PURE__ */ r.jsx(
       "link",
@@ -1278,100 +1280,100 @@ const dr = () => {
     ),
     E && /* @__PURE__ */ r.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${E}",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;
-}, xr = (e) => {
+}, vr = (e) => {
   const t = {};
   return Object.keys(e).forEach((n) => {
-    je(e[n]) && e[n].startsWith(Me) && (t[n] = e[n].replace(Me, "").split(","));
+    Te(e[n]) && e[n].startsWith(Le) && (t[n] = e[n].replace(Le, "").split(","));
   }), t;
-}, br = Dt((e) => {
+}, xr = Bt((e) => {
   const t = e.replace(it, "").split(",");
-  return Fn(t[0], t[1]);
+  return Nn(t[0], t[1]);
 });
-function kr(e, t) {
-  return B(e, `${t}_attrs`, {});
+function br(e, t) {
+  return D(e, `${t}_attrs`, {});
 }
-function wr(e) {
+function kr(e) {
   const t = {};
   return Object.keys(e).forEach((n) => {
-    if (je(e[n]) && e[n].startsWith(it)) {
-      const s = br(e[n]);
+    if (Te(e[n]) && e[n].startsWith(it)) {
+      const s = xr(e[n]);
       t[n] = {
         className: s,
         "data-style-prop": n,
         "data-block-parent": e._id,
         "data-style-id": `${n}-${e._id}`,
-        ...kr(e, n)
+        ...br(e, n)
       };
     }
   }), t;
 }
-function jr(e, t) {
-  const n = B(e, "_bindings", {});
+function wr(e, t) {
+  const n = D(e, "_bindings", {});
   return K(n) ? { ...e } : (_t(n, (s, i) => {
-    je(s) && B(t, s, null) && (e[i] = B(t, s, null));
+    Te(s) && D(t, s, null) && (e[i] = D(t, s, null));
   }), e);
 }
-function ke({ blocks: e }) {
-  const t = Ie(), n = we((a) => wr(a), []), [s] = Sn(), [i] = wn(X);
+function we({ blocks: e }) {
+  const t = Se(), n = je((l) => kr(l), []), [s] = En(), [i] = N(G);
   return /* @__PURE__ */ r.jsx(r.Fragment, { children: V.Children.toArray(
-    e.map((a, d) => {
-      if (i === a._id)
+    e.map((l, d) => {
+      if (i === l._id)
         return null;
-      const o = xr(a), c = {};
+      const o = vr(l), c = {};
       K(o) || Object.keys(o).forEach((g) => {
         c[g] = V.Children.toArray(
-          o[g].map((E) => /* @__PURE__ */ r.jsx(ke, { blocks: [Bt(t, { _id: E })] }))
+          o[g].map((E) => /* @__PURE__ */ r.jsx(we, { blocks: [Ot(t, { _id: E })] }))
         );
       });
-      const p = Ve(t, { _parent: a._id });
-      c.children = p.length ? /* @__PURE__ */ r.jsx(ke, { blocks: p }) : null;
-      const f = Wn(a._type), h = B(f, "component", null);
-      return Ot(h) ? /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${a == null ? void 0 : a._type} not registered -->` }) : /* @__PURE__ */ r.jsx(Ke, { children: V.createElement(h, {
+      const p = Xe(t, { _parent: l._id });
+      c.children = p.length ? /* @__PURE__ */ r.jsx(we, { blocks: p }) : null;
+      const f = at(l._type), h = D(f, "builderComponent", D(f, "component", null));
+      return At(h) ? /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${l == null ? void 0 : l._type} not registered -->` }) : /* @__PURE__ */ r.jsx(Je, { children: V.createElement(h, {
         blockProps: {
-          "data-block-id": a._id,
-          "data-block-type": a._type,
-          "data-dnd": jn(a._type) ? "branch" : "leaf"
+          "data-block-id": l._id,
+          "data-block-type": l._type,
+          "data-dnd": Fn(f, "canAcceptBlock") ? "branch" : "leaf"
         },
         inBuilder: !0,
         index: d,
-        ...jr(a, s),
-        ...n(a),
+        ...wr(l, s),
+        ...n(l),
         ...c
       }) });
     })
   ) });
 }
-const Tr = () => {
-  const e = Ie();
-  return /* @__PURE__ */ r.jsx(Nn, { children: K(e) ? null : /* @__PURE__ */ r.jsx(Dn, { children: /* @__PURE__ */ r.jsx(ke, { blocks: Ve(e, (t) => K(t._parent)) }) }) });
-}, Cr = (e, t) => e.querySelector(`[data-style-id="${t}"]`), Ir = () => {
-  const [e] = F(Tn), [t] = et(), [n] = Ce(), [, s] = U(), i = Cn(), [, a] = Q(), d = Be(null), o = Be(null), [c, p] = q({ width: 0, height: 0 }), f = Jn(c), [h, g] = q(0), [E, A] = q([]), [, b] = q([]), [, S] = F(In), [D, O] = Z(), w = Ge("loadingCanvas", !1);
+const jr = () => {
+  const e = Se(), t = Ee("container", null), n = K(e) ? null : /* @__PURE__ */ r.jsx(Sn, { children: /* @__PURE__ */ r.jsx(we, { blocks: Xe(e, (i) => K(i._parent)) }) }), s = t ? be(at(t).component, {}, n) : n;
+  return /* @__PURE__ */ r.jsx(Ln, { children: s });
+}, Tr = (e, t) => e.querySelector(`[data-style-id="${t}"]`), Cr = () => {
+  const [e] = N(jn), [t] = et(), [n] = Ie(), [, s] = U(), i = Tn(), [, l] = Q(), d = Oe(null), o = Oe(null), [c, p] = q({ width: 0, height: 0 }), f = Kn(c), [h, g] = q(0), [E, A] = q([]), [, b] = q([]), [, S] = N(Cn), [B, O] = X(), w = Ee("loadingCanvas", !1);
   M(() => {
-    const { clientWidth: _, clientHeight: $ } = o.current;
-    p({ width: _, height: $ }), h === 0 && g(_);
+    const { clientWidth: _, clientHeight: W } = o.current;
+    p({ width: _, height: W }), h === 0 && g(_);
   }, [o, n, h]);
-  const N = (_, $ = 0) => {
+  const F = (_, W = 0) => {
     const { top: H } = _.getBoundingClientRect();
-    return H + $ >= 0 && H - $ <= window.innerHeight;
+    return H + W >= 0 && H - W <= window.innerHeight;
   };
   M(() => {
-    var _, $;
+    var _, W;
     if (i && i.type !== "Multiple" && d.current) {
-      const H = ht(d.current.contentDocument, i._id);
-      H && (N(H) || ($ = (_ = d.current) == null ? void 0 : _.contentWindow) == null || $.scrollTo({ top: H.offsetTop, behavior: "smooth" }), A([H]));
+      const H = gt(d.current.contentDocument, i._id);
+      H && (F(H) || (W = (_ = d.current) == null ? void 0 : _.contentWindow) == null || W.scrollTo({ top: H.offsetTop, behavior: "smooth" }), A([H]));
     }
   }, [i]), M(() => {
-    if (!K(D) && d.current) {
-      const _ = Cr(
+    if (!K(B) && d.current) {
+      const _ = Tr(
         d.current.contentDocument,
-        ae(D).id
+        ae(B).id
       );
       b(_ ? [_] : [null]);
     } else
       b([null]);
-  }, [D]);
-  const W = Ct(() => {
-    let _ = Kn;
+  }, [B]);
+  const $ = It(() => {
+    let _ = Yn;
     return e === "offline" && (_ = _.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
@@ -1383,30 +1385,30 @@ const Tr = () => {
       onClick: () => {
         s([]), O([]);
       },
-      onMouseLeave: () => setTimeout(() => a(""), 300),
+      onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto overflow-hidden h-full w-full",
       style: h > 0 && !K(f) ? { width: t ? "100%" : h } : {},
       ref: o,
       children: /* @__PURE__ */ r.jsxs(
-        rr,
+        nr,
         {
           contentDidMount: () => S(d.current),
           ref: d,
           id: "canvas-iframe",
           style: { width: `${n}px`, ...f },
           className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: W,
+          initialContent: $,
           children: [
-            /* @__PURE__ */ r.jsx(gr, {}),
+            /* @__PURE__ */ r.jsx(hr, {}),
             /* @__PURE__ */ r.jsx(
-              yr,
+              mr,
               {
                 block: i,
                 selectedBlockElement: ae(E)
               }
             ),
-            /* @__PURE__ */ r.jsx(vr, { model: "page" }),
-            /* @__PURE__ */ r.jsx(hr, { children: w ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(rt, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(Tr, {}) }),
+            /* @__PURE__ */ r.jsx(yr, { model: "page" }),
+            /* @__PURE__ */ r.jsx(fr, { children: w ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(rt, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(jr, {}) }),
             /* @__PURE__ */ r.jsx("br", {}),
             /* @__PURE__ */ r.jsx("div", { id: "placeholder", className: "absolute bg-green-500 z-[99999] max-w-full transition-transform" })
           ]
@@ -1414,10 +1416,10 @@ const Tr = () => {
       )
     }
   );
-}, Mo = () => /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
-  /* @__PURE__ */ r.jsx(Yn, {}),
-  /* @__PURE__ */ r.jsx("div", { className: "relative h-full overflow-hidden bg-slate-800/90 px-2 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]", children: /* @__PURE__ */ r.jsx(Ke, { fallback: /* @__PURE__ */ r.jsx(rt, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(_n, { children: /* @__PURE__ */ r.jsx(Ir, {}) }) }) })
+}, Ro = () => /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
+  /* @__PURE__ */ r.jsx(zn, {}),
+  /* @__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(Je, { fallback: /* @__PURE__ */ r.jsx(rt, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(Dn, { children: /* @__PURE__ */ r.jsx(Cr, {}) }) }) })
 ] });
 export {
-  Mo as default
+  Ro as default
 };