@chaibuilder/sdk 0.1.4 → 0.1.6

package/dist/{CanvasArea-15458836.js → CanvasArea-d912e63e.js}

@@ -1,29 +1,29 @@
 var yt = Object.defineProperty;
-var vt = (e, n, r) => n in e ? yt(e, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[n] = r;
-var V = (e, n, r) => (vt(e, typeof n != "symbol" ? n + "" : n, r), r);
+var vt = (e, r, n) => r in e ? yt(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n;
+var V = (e, r, n) => (vt(e, typeof r != "symbol" ? r + "" : r, n), n);
 import { j as t } from "./jsx-runtime-944c88e2.js";
 import G, { createElement as gt, useCallback as Q, useState as H, useEffect as F, Component as Xe, Children as xt, useRef as Oe, useMemo as bt, lazy as wt, Suspense as Et } from "react";
 import { map as ie, includes as Me, toUpper as ye, round as St, isEmpty as ee, first as ce, get as $, memoize as Tt, find as jt, filter as Ze, isString as Je } from "lodash";
 import { ResetIcon as De, DotsVerticalIcon as Ct, MobileIcon as Be, LaptopIcon as kt, DesktopIcon as _t, EraserIcon as Rt, ZoomInIcon as At, ArrowUpIcon as Pt, CopyIcon as It, TrashIcon as Ot, DragHandleDots2Icon as Mt } from "@radix-ui/react-icons";
 import { B as le, u as Qe, S as et } from "./useBuilderProp-81a14920.js";
-import { c as ke, d as tt, e as _e, f as Dt, g as Bt, h as X, i as Z, j as $t, k as nt, l as rt, m as Nt, n as Lt, o as Ft, p as ot, q as st, u as Wt, r as qt, s as Ut, t as Yt, v as zt, w as Ht, x as Re, y as at, z as Kt, A as Vt, B as Gt, b as Xt, E as Zt } from "./index-3f65447f.js";
+import { c as ke, d as tt, e as _e, f as Dt, g as Bt, h as X, i as Z, j as $t, k as rt, l as nt, m as Nt, n as Lt, o as Ft, p as ot, q as st, u as Wt, r as qt, s as Ut, t as Yt, v as zt, w as Ht, x as Re, y as at, z as Kt, A as Vt, B as Gt, b as Xt, E as Zt } from "./index-32519c31.js";
 import { useTranslation as it } from "react-i18next";
 import { S as se } from "./separator-a80d065b.js";
-import { S as Jt, D as Qt, c as en, d as tn, h as nn, i as rn, f as on, H as sn, a as an, b as cn } from "./dropdown-menu-ae3ed09b.js";
-import { L as ln } from "./label-e770a087.js";
-import { A as dn, a as un, b as fn, c as pn, e as hn, f as mn, d as yn, h as vn, g as gn } from "./alert-dialog-ee98f47e.js";
+import { S as Jt, D as Qt, c as er, d as tr, h as rr, i as nr, f as or, H as sr, a as ar, b as ir } from "./dropdown-menu-ae3ed09b.js";
+import { L as cr } from "./label-e770a087.js";
+import { A as lr, a as dr, b as ur, c as fr, e as pr, f as hr, d as mr, h as yr, g as vr } from "./alert-dialog-ee98f47e.js";
 import { useAtom as te } from "jotai";
-import { flip as xn } from "@floating-ui/dom";
-import { useFloating as bn, shift as wn } from "@floating-ui/react-dom";
-import { useDrag as En } from "react-dnd";
-import { useResizeObserver as Sn } from "@react-hookz/web";
-import { tailwindcssPaletteGenerator as Tn } from "@bobthered/tailwindcss-palette-generator";
-import { Provider as jn } from "react-wrap-balancer";
-import { twMerge as Cn } from "tailwind-merge";
-import { S as ct, a as $e } from "./CONTROLS-442caee5.js";
-import { getBlockComponent as kn } from "@chaibuilder/blocks";
+import { flip as gr } from "@floating-ui/dom";
+import { useFloating as xr, shift as br } from "@floating-ui/react-dom";
+import { useDrag as wr } from "react-dnd";
+import { useResizeObserver as Er } from "@react-hookz/web";
+import { tailwindcssPaletteGenerator as Sr } from "@bobthered/tailwindcss-palette-generator";
+import { Provider as Tr } from "react-wrap-balancer";
+import { twMerge as jr } from "tailwind-merge";
+import { S as ct, a as $e } from "./MODIFIERS-c2e02614.js";
+import { getBlockComponent as Cr } from "@chaibuilder/blocks";
 import Ne from "react-dom";
-import { g as _n } from "./_commonjsHelpers-d4512b9c.js";
+import { g as kr } from "./_commonjsHelpers-d4512b9c.js";
 import "@radix-ui/react-slot";
 import "class-variance-authority";
 import "./utils-ac68b2c8.js";
@@ -35,32 +35,34 @@ import "flagged";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "flat-to-nested";
-import "./Class-e34b2337.js";
+import "./Class-1fb4c0c4.js";
 import "redux-undo";
+import "sonner";
+import "lucide-react";
 import "@radix-ui/react-separator";
 import "@radix-ui/react-switch";
 import "@radix-ui/react-hover-card";
 import "@radix-ui/react-dropdown-menu";
 import "@radix-ui/react-label";
 import "@radix-ui/react-alert-dialog";
-const Rn = () => {
-  const { undoCount: e, redoCount: n, undo: r, redo: i } = ke();
+const _r = () => {
+  const { undoCount: e, redoCount: r, undo: n, redo: i } = ke();
   return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ t.jsx(le, { disabled: !e, size: "sm", onClick: r, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ t.jsx(De, {}) }),
-    /* @__PURE__ */ t.jsx(le, { disabled: !n, onClick: i, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ t.jsx(De, { className: "rotate-180 scale-y-[-1] transform" }) })
+    /* @__PURE__ */ t.jsx(le, { disabled: !e, size: "sm", onClick: n, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ t.jsx(De, {}) }),
+    /* @__PURE__ */ t.jsx(le, { disabled: !r, onClick: i, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ t.jsx(De, { className: "rotate-180 scale-y-[-1] transform" }) })
   ] });
 };
-function An() {
-  const [e, n] = tt(), { t: r } = it();
+function Rr() {
+  const [e, r] = tt(), { t: n } = it();
   return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ t.jsx(ln, { htmlFor: "dark-mode-switch", children: r("dark_mode") }),
+    /* @__PURE__ */ t.jsx(cr, { htmlFor: "dark-mode-switch", children: n("dark_mode") }),
     /* @__PURE__ */ t.jsxs(
       Jt,
       {
         id: "dark-mode-switch",
         checked: e,
         onCheckedChange: () => {
-          n(!e);
+          r(!e);
         },
         className: `${e ? "bg-violet-600" : "bg-violet-300"}
           relative ml-2 inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`,
@@ -145,48 +147,48 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ t.jsxs(
     icon: /* @__PURE__ */ t.jsx(_t, {}),
     width: 1920
   }
-], Pn = ({
+], Ar = ({
   title: e,
-  content: n,
-  currentBreakpoint: r,
+  content: r,
+  currentBreakpoint: n,
   breakpoint: i,
   width: d,
   icon: s,
   onClick: a
-}) => /* @__PURE__ */ t.jsxs(sn, { children: [
-  /* @__PURE__ */ t.jsx(an, { asChild: !0, children: /* @__PURE__ */ t.jsx(
+}) => /* @__PURE__ */ t.jsxs(sr, { children: [
+  /* @__PURE__ */ t.jsx(ar, { asChild: !0, children: /* @__PURE__ */ t.jsx(
     le,
     {
       onClick: () => a(d),
       size: "sm",
-      variant: i === r ? "secondary" : "ghost",
+      variant: i === n ? "secondary" : "ghost",
       children: s
     }
   ) }),
-  /* @__PURE__ */ t.jsx(cn, { className: "w-52 border-border", children: /* @__PURE__ */ t.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ t.jsxs("div", { className: "space-y-1", children: [
+  /* @__PURE__ */ t.jsx(ir, { className: "w-52 border-border", children: /* @__PURE__ */ t.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ t.jsxs("div", { className: "space-y-1", children: [
     /* @__PURE__ */ t.jsx("h4", { className: "text-sm font-semibold", children: e }),
-    /* @__PURE__ */ t.jsx("p", { className: "text-xs", children: n })
+    /* @__PURE__ */ t.jsx("p", { className: "text-xs", children: r })
   ] }) }) })
-] }), In = () => {
-  const [, e, n] = _e(), [r, i] = Dt(), d = (s) => {
-    r.includes(s) ? r.length > 2 && i(r.filter((a) => a !== s)) : i((a) => [...a, s]);
+] }), Pr = () => {
+  const [, e, r] = _e(), [n, i] = Dt(), d = (s) => {
+    n.includes(s) ? n.length > 2 && i(n.filter((a) => a !== s)) : i((a) => [...a, s]);
   };
   return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center rounded-md", children: [
     ie(
-      Fe.filter((s) => Me(r, ye(s.breakpoint))),
-      (s) => /* @__PURE__ */ gt(Pn, { ...s, onClick: n, key: s.breakpoint, currentBreakpoint: e })
+      Fe.filter((s) => Me(n, ye(s.breakpoint))),
+      (s) => /* @__PURE__ */ gt(Ar, { ...s, onClick: r, key: s.breakpoint, currentBreakpoint: e })
     ),
     /* @__PURE__ */ t.jsxs(Qt, { children: [
-      /* @__PURE__ */ t.jsx(en, { asChild: !0, children: /* @__PURE__ */ t.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ t.jsx(Ct, { className: "scale-90 transform" }) }) }),
-      /* @__PURE__ */ t.jsxs(tn, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ t.jsx(nn, { children: "Breakpoints" }),
-        /* @__PURE__ */ t.jsx(rn, {}),
+      /* @__PURE__ */ t.jsx(er, { asChild: !0, children: /* @__PURE__ */ t.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ t.jsx(Ct, { className: "scale-90 transform" }) }) }),
+      /* @__PURE__ */ t.jsxs(tr, { className: "w-56 border-border text-xs", children: [
+        /* @__PURE__ */ t.jsx(rr, { children: "Breakpoints" }),
+        /* @__PURE__ */ t.jsx(nr, {}),
         ie(Fe, (s) => /* @__PURE__ */ t.jsx(
-          on,
+          or,
           {
             disabled: s.breakpoint === "xs",
             onCheckedChange: () => d(ye(s.breakpoint)),
-            checked: Me(r, ye(s.breakpoint)),
+            checked: Me(n, ye(s.breakpoint)),
             children: s.title
           },
           s.breakpoint
@@ -194,50 +196,50 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ t.jsxs(
       ] })
     ] })
   ] });
-}, On = () => {
-  const [e] = Bt(), { createSnapshot: n } = ke(), [, r] = X(), [, i] = Z(), d = Q(() => {
-    e([]), r([]), i([]), n();
-  }, [e, n]);
-  return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ t.jsxs(dn, { children: [
-    /* @__PURE__ */ t.jsx(un, { asChild: !0, children: /* @__PURE__ */ t.jsxs(le, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+}, Ir = () => {
+  const [e] = Bt(), { createSnapshot: r } = ke(), [, n] = X(), [, i] = Z(), d = Q(() => {
+    e([]), n([]), i([]), r();
+  }, [e, r]);
+  return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ t.jsxs(lr, { children: [
+    /* @__PURE__ */ t.jsx(dr, { asChild: !0, children: /* @__PURE__ */ t.jsxs(le, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
       /* @__PURE__ */ t.jsx(Rt, {}),
       " Clear"
     ] }) }),
-    /* @__PURE__ */ t.jsxs(fn, { className: "border-border", children: [
-      /* @__PURE__ */ t.jsxs(pn, { children: [
-        /* @__PURE__ */ t.jsx(hn, { children: "Clear whole canvas?" }),
-        /* @__PURE__ */ t.jsx(mn, { children: "Are you sure you want to clear the whole canvas?" })
+    /* @__PURE__ */ t.jsxs(ur, { className: "border-border", children: [
+      /* @__PURE__ */ t.jsxs(fr, { children: [
+        /* @__PURE__ */ t.jsx(pr, { children: "Clear whole canvas?" }),
+        /* @__PURE__ */ t.jsx(hr, { children: "Are you sure you want to clear the whole canvas?" })
       ] }),
-      /* @__PURE__ */ t.jsxs(yn, { children: [
-        /* @__PURE__ */ t.jsx(vn, { children: "Cancel" }),
-        /* @__PURE__ */ t.jsx(gn, { onClick: d, children: "Yes" })
+      /* @__PURE__ */ t.jsxs(mr, { children: [
+        /* @__PURE__ */ t.jsx(yr, { children: "Cancel" }),
+        /* @__PURE__ */ t.jsx(vr, { onClick: d, children: "Yes" })
       ] })
     ] })
   ] }) });
-}, Mn = () => {
-  const e = $t("darkMode", !1), [n] = nt();
+}, Or = () => {
+  const e = $t("darkMode", !1), [r] = rt();
   return /* @__PURE__ */ t.jsxs("div", { className: "flex h-10 items-center justify-between border-b bg-background/70 px-2", children: [
     /* @__PURE__ */ t.jsxs("div", { className: "flex h-full space-x-2", children: [
       e ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        /* @__PURE__ */ t.jsx(An, {}),
+        /* @__PURE__ */ t.jsx(Rr, {}),
         /* @__PURE__ */ t.jsx(se, { orientation: "vertical" })
       ] }) : null,
-      /* @__PURE__ */ t.jsx(In, {}),
+      /* @__PURE__ */ t.jsx(Pr, {}),
       /* @__PURE__ */ t.jsx(se, { orientation: "vertical" }),
       /* @__PURE__ */ t.jsxs("div", { className: "flex w-12 items-center justify-center gap-x-1 space-x-0 font-medium", children: [
         /* @__PURE__ */ t.jsx(At, { className: "h-3.5 w-3.5 flex-shrink-0" }),
         " ",
         /* @__PURE__ */ t.jsxs("div", { className: "text-xs leading-3", children: [
-          St(n, 0),
+          St(r, 0),
           "%"
         ] })
       ] }),
       /* @__PURE__ */ t.jsx(se, { orientation: "vertical" }),
-      /* @__PURE__ */ t.jsx(Rn, {})
+      /* @__PURE__ */ t.jsx(_r, {})
     ] }),
     /* @__PURE__ */ t.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
       /* @__PURE__ */ t.jsx(se, { orientation: "vertical" }),
-      /* @__PURE__ */ t.jsx(On, {})
+      /* @__PURE__ */ t.jsx(Ir, {})
     ] })
   ] });
 }, ve = {
@@ -246,7 +248,7 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ t.jsxs(
   EMAIL: "EMAIL",
   PRESENTATION: "PRESENTATION",
   GRAPHIC: "GRAPHIC"
-}, Dn = `<!doctype html>
+}, Mr = `<!doctype html>
 <html class="scroll-smooth h-full overflow-y-auto">
   <head>
     <meta charset="UTF-8">
@@ -280,24 +282,24 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ t.jsxs(
   <body class="font-body antialiased h-full">
     <div class="frame-root"></div>
   </body>
-</html>`, Bn = (e) => {
-  const [n] = _e(), [, r] = nt(), [i, d] = H({}), s = Q(() => {
+</html>`, Dr = (e) => {
+  const [r] = _e(), [, n] = rt(), [i, d] = H({}), s = Q(() => {
     const { width: a, height: f } = e;
-    if (a < n) {
-      const y = parseFloat((a / n).toString());
+    if (a < r) {
+      const y = parseFloat((a / r).toString());
       let p = {};
       f && (p = { height: f + 2 * f * (1 - y) }), d({
         transform: `scale(${y})`,
         transformOrigin: "top left",
         ...p,
         maxWidth: "none"
-      }), r(y * 100);
+      }), n(y * 100);
     } else
-      d({}), r(100);
-  }, [n, e, r]);
+      d({}), n(100);
+  }, [r, e, n]);
   return F(() => {
     s();
-  }, [n, e, r, s]), i;
+  }, [r, e, n, s]), i;
 };
 var Te = { exports: {} }, ae = { exports: {} }, A = {};
 /** @license React v16.13.1
@@ -309,16 +311,16 @@ var Te = { exports: {} }, ae = { exports: {} }, A = {};
  * LICENSE file in the root directory of this source tree.
  */
 var We;
-function $n() {
+function Br() {
   if (We)
     return A;
   We = 1;
-  var e = typeof Symbol == "function" && Symbol.for, n = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, i = e ? Symbol.for("react.fragment") : 60107, d = e ? Symbol.for("react.strict_mode") : 60108, s = e ? Symbol.for("react.profiler") : 60114, a = e ? Symbol.for("react.provider") : 60109, f = e ? Symbol.for("react.context") : 60110, y = e ? Symbol.for("react.async_mode") : 60111, p = e ? Symbol.for("react.concurrent_mode") : 60111, m = e ? Symbol.for("react.forward_ref") : 60112, h = e ? Symbol.for("react.suspense") : 60113, b = e ? Symbol.for("react.suspense_list") : 60120, v = e ? Symbol.for("react.memo") : 60115, O = e ? Symbol.for("react.lazy") : 60116, E = e ? Symbol.for("react.block") : 60121, C = e ? Symbol.for("react.fundamental") : 60117, g = e ? Symbol.for("react.responder") : 60118, U = e ? Symbol.for("react.scope") : 60119;
+  var e = typeof Symbol == "function" && Symbol.for, r = e ? Symbol.for("react.element") : 60103, n = e ? Symbol.for("react.portal") : 60106, i = e ? Symbol.for("react.fragment") : 60107, d = e ? Symbol.for("react.strict_mode") : 60108, s = e ? Symbol.for("react.profiler") : 60114, a = e ? Symbol.for("react.provider") : 60109, f = e ? Symbol.for("react.context") : 60110, y = e ? Symbol.for("react.async_mode") : 60111, p = e ? Symbol.for("react.concurrent_mode") : 60111, m = e ? Symbol.for("react.forward_ref") : 60112, h = e ? Symbol.for("react.suspense") : 60113, b = e ? Symbol.for("react.suspense_list") : 60120, v = e ? Symbol.for("react.memo") : 60115, O = e ? Symbol.for("react.lazy") : 60116, E = e ? Symbol.for("react.block") : 60121, C = e ? Symbol.for("react.fundamental") : 60117, g = e ? Symbol.for("react.responder") : 60118, U = e ? Symbol.for("react.scope") : 60119;
   function M(l) {
     if (typeof l == "object" && l !== null) {
       var D = l.$$typeof;
       switch (D) {
-        case n:
+        case r:
           switch (l = l.type, l) {
             case y:
             case p:
@@ -339,7 +341,7 @@ function $n() {
                   return D;
               }
           }
-        case r:
+        case n:
           return D;
       }
     }
@@ -347,14 +349,14 @@ function $n() {
   function B(l) {
     return M(l) === p;
   }
-  return A.AsyncMode = y, A.ConcurrentMode = p, A.ContextConsumer = f, A.ContextProvider = a, A.Element = n, A.ForwardRef = m, A.Fragment = i, A.Lazy = O, A.Memo = v, A.Portal = r, A.Profiler = s, A.StrictMode = d, A.Suspense = h, A.isAsyncMode = function(l) {
+  return A.AsyncMode = y, A.ConcurrentMode = p, A.ContextConsumer = f, A.ContextProvider = a, A.Element = r, A.ForwardRef = m, A.Fragment = i, A.Lazy = O, A.Memo = v, A.Portal = n, A.Profiler = s, A.StrictMode = d, A.Suspense = h, A.isAsyncMode = function(l) {
     return B(l) || M(l) === y;
   }, A.isConcurrentMode = B, A.isContextConsumer = function(l) {
     return M(l) === f;
   }, A.isContextProvider = function(l) {
     return M(l) === a;
   }, A.isElement = function(l) {
-    return typeof l == "object" && l !== null && l.$$typeof === n;
+    return typeof l == "object" && l !== null && l.$$typeof === r;
   }, A.isForwardRef = function(l) {
     return M(l) === m;
   }, A.isFragment = function(l) {
@@ -364,7 +366,7 @@ function $n() {
   }, A.isMemo = function(l) {
     return M(l) === v;
   }, A.isPortal = function(l) {
-    return M(l) === r;
+    return M(l) === n;
   }, A.isProfiler = function(l) {
     return M(l) === s;
   }, A.isStrictMode = function(l) {
@@ -385,9 +387,9 @@ var P = {};
  * LICENSE file in the root directory of this source tree.
  */
 var qe;
-function Nn() {
+function $r() {
   return qe || (qe = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = typeof Symbol == "function" && Symbol.for, n = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, i = e ? Symbol.for("react.fragment") : 60107, d = e ? Symbol.for("react.strict_mode") : 60108, s = e ? Symbol.for("react.profiler") : 60114, a = e ? Symbol.for("react.provider") : 60109, f = e ? Symbol.for("react.context") : 60110, y = e ? Symbol.for("react.async_mode") : 60111, p = e ? Symbol.for("react.concurrent_mode") : 60111, m = e ? Symbol.for("react.forward_ref") : 60112, h = e ? Symbol.for("react.suspense") : 60113, b = e ? Symbol.for("react.suspense_list") : 60120, v = e ? Symbol.for("react.memo") : 60115, O = e ? Symbol.for("react.lazy") : 60116, E = e ? Symbol.for("react.block") : 60121, C = e ? Symbol.for("react.fundamental") : 60117, g = e ? Symbol.for("react.responder") : 60118, U = e ? Symbol.for("react.scope") : 60119;
+    var e = typeof Symbol == "function" && Symbol.for, r = e ? Symbol.for("react.element") : 60103, n = e ? Symbol.for("react.portal") : 60106, i = e ? Symbol.for("react.fragment") : 60107, d = e ? Symbol.for("react.strict_mode") : 60108, s = e ? Symbol.for("react.profiler") : 60114, a = e ? Symbol.for("react.provider") : 60109, f = e ? Symbol.for("react.context") : 60110, y = e ? Symbol.for("react.async_mode") : 60111, p = e ? Symbol.for("react.concurrent_mode") : 60111, m = e ? Symbol.for("react.forward_ref") : 60112, h = e ? Symbol.for("react.suspense") : 60113, b = e ? Symbol.for("react.suspense_list") : 60120, v = e ? Symbol.for("react.memo") : 60115, O = e ? Symbol.for("react.lazy") : 60116, E = e ? Symbol.for("react.block") : 60121, C = e ? Symbol.for("react.fundamental") : 60117, g = e ? Symbol.for("react.responder") : 60118, U = e ? Symbol.for("react.scope") : 60119;
     function M(c) {
       return typeof c == "string" || typeof c == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
       c === i || c === p || c === s || c === d || c === h || c === b || typeof c == "object" && c !== null && (c.$$typeof === O || c.$$typeof === v || c.$$typeof === a || c.$$typeof === f || c.$$typeof === m || c.$$typeof === C || c.$$typeof === g || c.$$typeof === U || c.$$typeof === E);
@@ -396,7 +398,7 @@ function Nn() {
       if (typeof c == "object" && c !== null) {
         var z = c.$$typeof;
         switch (z) {
-          case n:
+          case r:
             var oe = c.type;
             switch (oe) {
               case y:
@@ -419,14 +421,14 @@ function Nn() {
                     return z;
                 }
             }
-          case r:
+          case n:
             return z;
         }
       }
     }
-    var l = y, D = p, W = f, q = a, de = n, ue = m, ne = i, fe = O, pe = v, J = r, he = s, Y = d, K = h, re = !1;
+    var l = y, D = p, W = f, q = a, de = r, ue = m, re = i, fe = O, pe = v, J = n, he = s, Y = d, K = h, ne = !1;
     function me(c) {
-      return re || (re = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), o(c) || B(c) === y;
+      return ne || (ne = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), o(c) || B(c) === y;
     }
     function o(c) {
       return B(c) === p;
@@ -438,7 +440,7 @@ function Nn() {
       return B(c) === a;
     }
     function S(c) {
-      return typeof c == "object" && c !== null && c.$$typeof === n;
+      return typeof c == "object" && c !== null && c.$$typeof === r;
     }
     function x(c) {
       return B(c) === m;
@@ -453,7 +455,7 @@ function Nn() {
       return B(c) === v;
     }
     function _(c) {
-      return B(c) === r;
+      return B(c) === n;
     }
     function I(c) {
       return B(c) === s;
@@ -464,12 +466,12 @@ function Nn() {
     function N(c) {
       return B(c) === h;
     }
-    P.AsyncMode = l, P.ConcurrentMode = D, P.ContextConsumer = W, P.ContextProvider = q, P.Element = de, P.ForwardRef = ue, P.Fragment = ne, P.Lazy = fe, P.Memo = pe, P.Portal = J, P.Profiler = he, P.StrictMode = Y, P.Suspense = K, P.isAsyncMode = me, P.isConcurrentMode = o, P.isContextConsumer = u, P.isContextProvider = j, P.isElement = S, P.isForwardRef = x, P.isFragment = k, P.isLazy = w, P.isMemo = T, P.isPortal = _, P.isProfiler = I, P.isStrictMode = R, P.isSuspense = N, P.isValidElementType = M, P.typeOf = B;
+    P.AsyncMode = l, P.ConcurrentMode = D, P.ContextConsumer = W, P.ContextProvider = q, P.Element = de, P.ForwardRef = ue, P.Fragment = re, P.Lazy = fe, P.Memo = pe, P.Portal = J, P.Profiler = he, P.StrictMode = Y, P.Suspense = K, P.isAsyncMode = me, P.isConcurrentMode = o, P.isContextConsumer = u, P.isContextProvider = j, P.isElement = S, P.isForwardRef = x, P.isFragment = k, P.isLazy = w, P.isMemo = T, P.isPortal = _, P.isProfiler = I, P.isStrictMode = R, P.isSuspense = N, P.isValidElementType = M, P.typeOf = B;
   }()), P;
 }
 var Ue;
 function lt() {
-  return Ue || (Ue = 1, process.env.NODE_ENV === "production" ? ae.exports = $n() : ae.exports = Nn()), ae.exports;
+  return Ue || (Ue = 1, process.env.NODE_ENV === "production" ? ae.exports = Br() : ae.exports = $r()), ae.exports;
 }
 /*
 object-assign
@@ -477,11 +479,11 @@ object-assign
 @license MIT
 */
 var ge, Ye;
-function Ln() {
+function Nr() {
   if (Ye)
     return ge;
   Ye = 1;
-  var e = Object.getOwnPropertySymbols, n = Object.prototype.hasOwnProperty, r = Object.prototype.propertyIsEnumerable;
+  var e = Object.getOwnPropertySymbols, r = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
   function i(s) {
     if (s == null)
       throw new TypeError("Object.assign cannot be called with null or undefined");
@@ -513,11 +515,11 @@ function Ln() {
     for (var f, y = i(s), p, m = 1; m < arguments.length; m++) {
       f = Object(arguments[m]);
       for (var h in f)
-        n.call(f, h) && (y[h] = f[h]);
+        r.call(f, h) && (y[h] = f[h]);
       if (e) {
         p = e(f);
         for (var b = 0; b < p.length; b++)
-          r.call(f, p[b]) && (y[p[b]] = f[p[b]]);
+          n.call(f, p[b]) && (y[p[b]] = f[p[b]]);
       }
     }
     return y;
@@ -536,14 +538,14 @@ function dt() {
   return He || (He = 1, be = Function.call.bind(Object.prototype.hasOwnProperty)), be;
 }
 var we, Ke;
-function Fn() {
+function Lr() {
   if (Ke)
     return we;
   Ke = 1;
   var e = function() {
   };
   if (process.env.NODE_ENV !== "production") {
-    var n = Ae(), r = {}, i = dt();
+    var r = Ae(), n = {}, i = dt();
     e = function(s) {
       var a = "Warning: " + s;
       typeof console < "u" && console.error(a);
@@ -565,14 +567,14 @@ function Fn() {
               );
               throw b.name = "Invariant Violation", b;
             }
-            h = s[m](a, m, y, f, null, n);
+            h = s[m](a, m, y, f, null, r);
           } catch (O) {
             h = O;
           }
           if (h && !(h instanceof Error) && e(
             (y || "React class") + ": type specification of " + f + " `" + m + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof h + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
-          ), h instanceof Error && !(h.message in r)) {
-            r[h.message] = !0;
+          ), h instanceof Error && !(h.message in n)) {
+            n[h.message] = !0;
             var v = p ? p() : "";
             e(
               "Failed " + f + " type: " + h.message + (v ?? "")
@@ -582,15 +584,15 @@ function Fn() {
     }
   }
   return d.resetWarningCache = function() {
-    process.env.NODE_ENV !== "production" && (r = {});
+    process.env.NODE_ENV !== "production" && (n = {});
   }, we = d, we;
 }
 var Ee, Ve;
-function Wn() {
+function Fr() {
   if (Ve)
     return Ee;
   Ve = 1;
-  var e = lt(), n = Ln(), r = Ae(), i = dt(), d = Fn(), s = function() {
+  var e = lt(), r = Nr(), n = Ae(), i = dt(), d = Lr(), s = function() {
   };
   process.env.NODE_ENV !== "production" && (s = function(f) {
     var y = "Warning: " + f;
@@ -642,7 +644,7 @@ function Wn() {
       if (process.env.NODE_ENV !== "production")
         var u = {}, j = 0;
       function S(k, w, T, _, I, R, N) {
-        if (_ = _ || b, R = R || T, N !== r) {
+        if (_ = _ || b, R = R || T, N !== n) {
           if (y) {
             var c = 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"
@@ -688,7 +690,7 @@ function Wn() {
           return new E("Invalid " + k + " `" + w + "` of type " + ("`" + _ + "` supplied to `" + x + "`, expected an array."));
         }
         for (var I = 0; I < T.length; I++) {
-          var R = o(T, I, x, k, w + "[" + I + "]", r);
+          var R = o(T, I, x, k, w + "[" + I + "]", n);
           if (R instanceof Error)
             return R;
         }
@@ -754,7 +756,7 @@ function Wn() {
           return new E("Invalid " + k + " `" + w + "` of type " + ("`" + _ + "` supplied to `" + x + "`, expected an object."));
         for (var I in T)
           if (i(T, I)) {
-            var R = o(T, I, x, k, w + "." + I, r);
+            var R = o(T, I, x, k, w + "." + I, n);
             if (R instanceof Error)
               return R;
           }
@@ -769,12 +771,12 @@ function Wn() {
         var j = o[u];
         if (typeof j != "function")
           return s(
-            "Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + re(j) + " at index " + u + "."
+            "Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + ne(j) + " at index " + u + "."
           ), a;
       }
       function S(x, k, w, T, _) {
         for (var I = [], R = 0; R < o.length; R++) {
-          var N = o[R], c = N(x, k, w, T, _, r);
+          var N = o[R], c = N(x, k, w, T, _, n);
           if (c == null)
             return null;
           c.data && i(c.data, "expectedType") && I.push(c.data.expectedType);
@@ -790,7 +792,7 @@ function Wn() {
       }
       return C(o);
     }
-    function ne(o, u, j, S, x) {
+    function re(o, u, j, S, x) {
       return new E(
         (o || "React class") + ": " + u + " type `" + j + "." + S + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + x + "`."
       );
@@ -803,8 +805,8 @@ function Wn() {
         for (var I in o) {
           var R = o[I];
           if (typeof R != "function")
-            return ne(x, k, w, I, K(R));
-          var N = R(T, I, x, k, w + "." + I, r);
+            return re(x, k, w, I, K(R));
+          var N = R(T, I, x, k, w + "." + I, n);
           if (N)
             return N;
         }
@@ -817,17 +819,17 @@ function Wn() {
         var T = j[S], _ = Y(T);
         if (_ !== "object")
           return new E("Invalid " + k + " `" + w + "` of type `" + _ + "` " + ("supplied to `" + x + "`, expected `object`."));
-        var I = n({}, j[S], o);
+        var I = r({}, j[S], o);
         for (var R in I) {
           var N = o[R];
           if (i(o, R) && typeof N != "function")
-            return ne(x, k, w, R, K(N));
+            return re(x, k, w, R, K(N));
           if (!N)
             return new E(
               "Invalid " + k + " `" + w + "` key `" + R + "` supplied to `" + x + "`.\nBad object: " + JSON.stringify(j[S], null, "  ") + `
 Valid keys: ` + JSON.stringify(Object.keys(o), null, "  ")
             );
-          var c = N(T, R, x, k, w + "." + R, r);
+          var c = N(T, R, x, k, w + "." + R, n);
           if (c)
             return c;
         }
@@ -887,7 +889,7 @@ Valid keys: ` + JSON.stringify(Object.keys(o), null, "  ")
       }
       return u;
     }
-    function re(o) {
+    function ne(o) {
       var u = K(o);
       switch (u) {
         case "array":
@@ -908,16 +910,16 @@ Valid keys: ` + JSON.stringify(Object.keys(o), null, "  ")
   }, Ee;
 }
 var Se, Ge;
-function qn() {
+function Wr() {
   if (Ge)
     return Se;
   Ge = 1;
   var e = Ae();
-  function n() {
-  }
   function r() {
   }
-  return r.resetWarningCache = n, Se = function() {
+  function n() {
+  }
+  return n.resetWarningCache = r, Se = function() {
     function i(a, f, y, p, m, h) {
       if (h !== e) {
         var b = new Error(
@@ -950,23 +952,23 @@ function qn() {
       oneOfType: d,
       shape: d,
       exact: d,
-      checkPropTypes: r,
-      resetWarningCache: n
+      checkPropTypes: n,
+      resetWarningCache: r
     };
     return s.PropTypes = s, s;
   }, Se;
 }
 if (process.env.NODE_ENV !== "production") {
-  var Un = lt(), Yn = !0;
-  Te.exports = Wn()(Un.isElement, Yn);
+  var qr = lt(), Ur = !0;
+  Te.exports = Fr()(qr.isElement, Ur);
 } else
-  Te.exports = qn()();
-var zn = Te.exports;
-const L = /* @__PURE__ */ _n(zn);
+  Te.exports = Wr()();
+var Yr = Te.exports;
+const L = /* @__PURE__ */ kr(Yr);
 let ut, ft;
 typeof document < "u" && (ut = document);
 typeof window < "u" && (ft = window);
-const pt = G.createContext({ document: ut, window: ft }), Pe = () => G.useContext(pt), { Provider: Hn, Consumer: Zr } = pt;
+const pt = G.createContext({ document: ut, window: ft }), Pe = () => G.useContext(pt), { Provider: zr, Consumer: Qn } = pt;
 class ht extends Xe {
   componentDidMount() {
     this.props.contentDidMount();
@@ -984,12 +986,12 @@ V(ht, "propTypes", {
   contentDidUpdate: L.func.isRequired
 });
 class je extends Xe {
-  constructor(r, i) {
-    super(r, i);
-    V(this, "setRef", (r) => {
-      this.nodeRef.current = r;
+  constructor(n, i) {
+    super(n, i);
+    V(this, "setRef", (n) => {
+      this.nodeRef.current = n;
       const { forwardedRef: i } = this.props;
-      typeof i == "function" ? i(r) : i && (i.current = r);
+      typeof i == "function" ? i(n) : i && (i.current = n);
     });
     V(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
@@ -1011,26 +1013,26 @@ class je extends Xe {
     return this.nodeRef.current ? this.nodeRef.current.contentDocument : null;
   }
   getMountTarget() {
-    const r = this.getDoc();
-    return this.props.mountTarget ? r.querySelector(this.props.mountTarget) : r.body.children[0];
+    const n = this.getDoc();
+    return this.props.mountTarget ? n.querySelector(this.props.mountTarget) : n.body.children[0];
   }
   renderFrameContents() {
     if (!this._isMounted)
       return null;
-    const r = this.getDoc();
-    if (!r)
+    const n = this.getDoc();
+    if (!n)
       return null;
-    const i = this.props.contentDidMount, d = this.props.contentDidUpdate, s = r.defaultView || r.parentView, a = /* @__PURE__ */ t.jsx(ht, { contentDidMount: i, contentDidUpdate: d, children: /* @__PURE__ */ t.jsx(Hn, { value: { document: r, window: s }, children: /* @__PURE__ */ t.jsx("div", { className: "frame-content", children: this.props.children }) }) }), f = this.getMountTarget();
+    const i = this.props.contentDidMount, d = this.props.contentDidUpdate, s = n.defaultView || n.parentView, a = /* @__PURE__ */ t.jsx(ht, { contentDidMount: i, contentDidUpdate: d, children: /* @__PURE__ */ t.jsx(zr, { value: { document: n, window: s }, children: /* @__PURE__ */ t.jsx("div", { className: "frame-content", children: this.props.children }) }) }), f = this.getMountTarget();
     return [Ne.createPortal(this.props.head, this.getDoc().head), Ne.createPortal(a, f)];
   }
   render() {
-    const r = {
+    const n = {
       ...this.props,
       srcDoc: this.props.initialContent,
       children: void 0
       // The iframe isn't ready so we drop children from props here. #12, #17
     };
-    return delete r.head, delete r.initialContent, delete r.mountTarget, delete r.contentDidMount, delete r.contentDidUpdate, delete r.forwardedRef, /* @__PURE__ */ t.jsx("iframe", { ...r, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
+    return delete n.head, delete n.initialContent, delete n.mountTarget, delete n.contentDidMount, delete n.contentDidUpdate, delete n.forwardedRef, /* @__PURE__ */ t.jsx("iframe", { ...n, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
   }
 }
 // React warns when you render directly into the body since browser extensions
@@ -1057,13 +1059,13 @@ V(je, "propTypes", {
   },
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
-const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef: n })), Vn = ({ children: e }) => {
-  const { document: n } = Pe(), [r] = X(), [i, d] = Z();
+const Hr = G.forwardRef((e, r) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef: r })), Kr = ({ children: e }) => {
+  const { document: r } = Pe(), [n] = X(), [i, d] = Z();
   return F(() => {
     setTimeout(() => {
       if (!ee(i))
         return;
-      const s = mt(n, ce(r));
+      const s = mt(r, ce(n));
       if (s) {
         const a = s.getAttribute("data-style-prop");
         if (a) {
@@ -1072,32 +1074,32 @@ const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef
         }
       }
     }, 100);
-  }, [n, r, d, i]), /* @__PURE__ */ t.jsx("div", { id: "canvas", className: "relative h-screen max-w-full outline-2", children: e });
-}, mt = (e, n) => e.querySelector(`[data-block-id="${n}"]`), Gn = () => {
-  const { window: e } = Pe(), [n, r] = X(), [, i] = Z(), { undo: d, redo: s } = ke(), a = rt(), [, f] = Nt(), [, y] = Lt(), { pasteBlocks: p } = Ft(), [, m] = ot(), h = st(), { savePage: b } = Wt(), [v] = te(qt), [, O] = te(Ut), E = (C) => {
-    C.key === "Enter" && (C.preventDefault(), n.length === 1 && O(ce(n)));
+  }, [r, n, d, i]), /* @__PURE__ */ t.jsx("div", { id: "canvas", className: "relative h-screen max-w-full outline-2", children: e });
+}, mt = (e, r) => e.querySelector(`[data-block-id="${r}"]`), Vr = () => {
+  const { window: e } = Pe(), [r, n] = X(), [, i] = Z(), { undo: d, redo: s } = ke(), a = nt(), [, f] = Nt(), [, y] = Lt(), { pasteBlocks: p } = Ft(), [, m] = ot(), h = st(), { savePage: b } = Wt(), [v] = te(qt), [, O] = te(Ut), E = (C) => {
+    C.key === "Enter" && (C.preventDefault(), r.length === 1 && O(ce(r)));
   };
   return F(() => {
     const C = (g) => {
       if (g.key === "Escape") {
-        r([]), i([]);
+        n([]), i([]);
         return;
       }
-      if (E(g), !v && (g.key === "Delete" || g.key === "Backspace") && (g.preventDefault(), h(n)), g.ctrlKey || g.metaKey) {
+      if (E(g), !v && (g.key === "Delete" || g.key === "Backspace") && (g.preventDefault(), h(r)), g.ctrlKey || g.metaKey) {
         if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(g.key)) {
           if (v && ["x", "z", "v"].includes(g.key))
             return !0;
           g.preventDefault();
         }
-        g.key === "s" && (g.stopPropagation(), g.preventDefault(), b()), g.key === "z" && d(), g.key === "y" && s(), g.key === "d" && a(n), g.key === "x" && f(n), g.key === "c" && y(n), g.key === "v" && n.length > 0 && p(n[0]);
+        g.key === "s" && (g.stopPropagation(), g.preventDefault(), b()), g.key === "z" && d(), g.key === "y" && s(), g.key === "d" && a(r), g.key === "x" && f(r), g.key === "c" && y(r), g.key === "v" && r.length > 0 && p(r[0]);
       }
     };
     return e.removeEventListener("keydown", C), e.addEventListener("keydown", C), () => {
       e.removeEventListener("keydown", C);
     };
   }, [
-    n,
     r,
+    n,
     d,
     h,
     m,
@@ -1110,8 +1112,8 @@ const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef
     b,
     e
   ]), null;
-}, Xn = ({ block: e, label: n }) => {
-  const [, r] = En(() => ({
+}, Gr = ({ block: e, label: r }) => {
+  const [, n] = wr(() => ({
     type: "CANVAS_BLOCK",
     item: e
   }));
@@ -1119,30 +1121,30 @@ const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef
     "div",
     {
       className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
-      ref: r,
+      ref: n,
       onDragStart: () => {
         console.log("drag start");
       },
       children: [
         /* @__PURE__ */ t.jsx(Mt, {}),
-        n
+        r
       ]
     }
   );
-}, Zn = ({
+}, Xr = ({
   selectedBlockElement: e,
-  block: n
+  block: r
 }) => {
-  const r = st(), i = rt(), [, d] = X(), [, s] = Z(), { floatingStyles: a, refs: f, update: y } = bn({
+  const n = st(), i = nt(), [, d] = X(), [, s] = Z(), { floatingStyles: a, refs: f, update: y } = xr({
     placement: "top-start",
-    middleware: [wn(), xn()],
+    middleware: [br(), gr()],
     elements: {
       reference: e
     }
   });
-  Sn(e, () => y(), e !== null);
-  const p = $(n, "_parent", null), m = ee($(n, "_name", "")) ? $(n, "_type", "") : $(n, "_name", "");
-  return !e || !n ? null : /* @__PURE__ */ t.jsxs(
+  Er(e, () => y(), e !== null);
+  const p = $(r, "_parent", null), m = ee($(r, "_name", "")) ? $(r, "_type", "") : $(r, "_name", "");
+  return !e || !r ? null : /* @__PURE__ */ t.jsxs(
     "div",
     {
       role: "button",
@@ -1155,7 +1157,7 @@ const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef
       onKeyDown: (h) => h.stopPropagation(),
       className: "z-50 flex h-6 items-center bg-blue-500  py-2 text-xs text-white",
       children: [
-        /* @__PURE__ */ t.jsx(Xn, { label: m, block: n }),
+        /* @__PURE__ */ t.jsx(Gr, { label: m, block: r }),
         /* @__PURE__ */ t.jsxs("div", { className: "flex gap-2 px-1 ", children: [
           p && /* @__PURE__ */ t.jsx(
             Pt,
@@ -1166,14 +1168,14 @@ const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef
               }
             }
           ),
-          Yt($(n, "_type", "")) ? /* @__PURE__ */ t.jsx(It, { className: "hover:scale-105 ", onClick: () => i([n == null ? void 0 : n._id]) }) : null,
-          zt($(n, "_type", "")) ? /* @__PURE__ */ t.jsx(Ot, { className: "hover:scale-105 ", onClick: () => r([n == null ? void 0 : n._id]) }) : null
+          Yt($(r, "_type", "")) ? /* @__PURE__ */ t.jsx(It, { className: "hover:scale-105 ", onClick: () => i([r == null ? void 0 : r._id]) }) : null,
+          zt($(r, "_type", "")) ? /* @__PURE__ */ t.jsx(Ot, { className: "hover:scale-105 ", onClick: () => n([r == null ? void 0 : r._id]) }) : null
         ] })
       ]
     }
   );
-}, Jn = ({ model: e }) => {
-  const [n] = Ht(), [r] = X(), [i] = tt(), [d] = Re(), [s] = Z(), { document: a, window: f } = Pe(), [y] = H(a == null ? void 0 : a.getElementById("highlighted-block")), [p] = H(
+}, Zr = ({ model: e }) => {
+  const [r] = Ht(), [n] = X(), [i] = tt(), [d] = Re(), [s] = Z(), { document: a, window: f } = Pe(), [y] = H(a == null ? void 0 : a.getElementById("highlighted-block")), [p] = H(
     a == null ? void 0 : a.getElementById("selected-block")
   ), [m] = H(
     a == null ? void 0 : a.getElementById("selected-styling-block")
@@ -1181,14 +1183,14 @@ const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef
   F(() => {
     i ? a == null || a.documentElement.classList.add("dark") : a == null || a.documentElement.classList.remove("dark");
   }, [i, a]);
-  const h = $(n, "_headingFont", "DM Sans"), b = $(n, "_bodyFont", "DM Sans");
+  const h = $(r, "_headingFont", "DM Sans"), b = $(r, "_bodyFont", "DM Sans");
   return F(() => {
-    const v = $(n, "_primaryColor", "#000"), O = $(n, "_secondaryColor", "#FFF"), E = Tn({
+    const v = $(r, "_primaryColor", "#000"), O = $(r, "_secondaryColor", "#FFF"), E = Sr({
       colors: [v, O],
       names: ["primary", "secondary"]
     });
     E.primary.DEFAULT = v, E.secondary.DEFAULT = O;
-    const C = $(n, "_roundedCorners", "0");
+    const C = $(r, "_roundedCorners", "0");
     !f || !f.tailwind || (f.tailwind.config = {
       darkMode: "class",
       theme: {
@@ -1217,22 +1219,22 @@ const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef
         })
       ]
     });
-  }, [n, f, h, b]), F(() => {
-    p && (p.textContent = `${ie(r, (v) => `[data-block-id="${v}"]`).join(",")}{
-                outline: 1px solid ${r.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
+  }, [r, f, h, b]), F(() => {
+    p && (p.textContent = `${ie(n, (v) => `[data-block-id="${v}"]`).join(",")}{
+                outline: 1px solid ${n.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
-  }, [r, p]), F(() => {
+  }, [n, p]), F(() => {
     y && (y.textContent = d ? `[data-style-id="${d}"]{ outline: 1px solid orange !important; outline-offset: -1px;}` : "");
-  }, [d, r, y]), F(() => {
+  }, [d, n, y]), F(() => {
     m && (m.textContent = `${ie(s, ({ id: v }) => `[data-style-id="${v}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
   }, [s, m]), F(() => {
     if (e === "section")
       return;
-    const v = $(n, "_bodyTextLightColor", "#64748b"), O = $(n, "_bodyTextDarkColor", "#94a3b8"), E = $(n, "_bodyBgLightColor", "#FFFFFF"), C = $(n, "_bodyBgDarkColor", "#0f172a");
+    const v = $(r, "_bodyTextLightColor", "#64748b"), O = $(r, "_bodyTextDarkColor", "#94a3b8"), E = $(r, "_bodyBgLightColor", "#FFFFFF"), C = $(r, "_bodyBgDarkColor", "#0f172a");
     a.body.className = `font-body antialiased text-[${v}] bg-[${E}] dark:text-[${O}] dark:bg-[${C}]`;
-  }, [n, a, e]), e === "page" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+  }, [r, a, e]), e === "page" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     h && /* @__PURE__ */ t.jsx(
       "link",
       {
@@ -1261,52 +1263,52 @@ const Kn = G.forwardRef((e, n) => /* @__PURE__ */ t.jsx(je, { ...e, forwardedRef
     ),
     h && /* @__PURE__ */ t.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${h}",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;
-}, Qn = () => {
+}, Jr = () => {
   const { t: e } = it();
   return /* @__PURE__ */ t.jsx("div", { className: "my-auto py-24 text-center text-gray-600 dark:text-white", children: /* @__PURE__ */ t.jsx("h1", { className: "mb-10 text-4xl ", children: e("canvas_empty") }) });
-}, er = (e) => {
-  const n = {};
-  return Object.keys(e).forEach((r) => {
-    Je(e[r]) && e[r].startsWith($e) && (n[r] = e[r].replace($e, "").split(","));
-  }), n;
-}, tr = Tt((e) => {
-  const n = e.replace(ct, "").split(",");
-  return Cn(n[0], n[1]);
+}, Qr = (e) => {
+  const r = {};
+  return Object.keys(e).forEach((n) => {
+    Je(e[n]) && e[n].startsWith($e) && (r[n] = e[n].replace($e, "").split(","));
+  }), r;
+}, en = Tt((e) => {
+  const r = e.replace(ct, "").split(",");
+  return jr(r[0], r[1]);
 });
-function nr(e, n) {
-  return $(e, `${n}_attrs`, {});
+function tn(e, r) {
+  return $(e, `${r}_attrs`, {});
 }
-function rr(e, n, r, i) {
+function rn(e, r, n, i) {
   const d = {};
   return Object.keys(e).forEach((s) => {
     if (Je(e[s]) && e[s].startsWith(ct)) {
-      const a = tr(e[s]);
+      const a = en(e[s]);
       d[s] = {
         className: a,
         "data-style-prop": s,
         "data-block-parent": e._id,
         "data-style-id": `${s}-${e._id}`,
-        onMouseEnter: n,
-        onMouseLeave: r,
+        onMouseEnter: r,
+        onMouseLeave: n,
         onClick: i,
-        ...nr(e, s)
+        ...tn(e, s)
       };
     }
   }), d;
 }
 function Ce({ blocks: e }) {
-  const n = at(), [, r] = Re(), [, i] = Z(), [, d] = X(), s = Q(
+  const r = at(), [, n] = Re(), [, i] = Z(), [, d] = X(), s = Q(
     (p) => {
       var h;
       const m = (h = p.currentTarget) == null ? void 0 : h.getAttribute("data-style-id");
-      r(m || ""), p.stopPropagation();
+      n(m || ""), p.stopPropagation();
     },
-    [r]
+    [n]
   ), a = Q(
     (p) => {
-      r(""), p.stopPropagation();
+      n(""), p.stopPropagation();
     },
-    [r]
+    [n]
   ), f = Q(
     (p) => {
       p.stopPropagation();
@@ -1321,20 +1323,20 @@ function Ce({ blocks: e }) {
     },
     [i, d]
   ), y = Q(
-    (p) => rr(p, s, a, f),
+    (p) => rn(p, s, a, f),
     [s, a]
   );
   return /* @__PURE__ */ t.jsx(t.Fragment, { children: G.Children.toArray(
     e.map((p, m) => {
-      const h = er(p), b = {};
+      const h = Qr(p), b = {};
       ee(h) || Object.keys(h).forEach((C) => {
         b[C] = G.Children.toArray(
-          h[C].map((g) => /* @__PURE__ */ t.jsx(Ce, { blocks: [jt(n, { _id: g })] }))
+          h[C].map((g) => /* @__PURE__ */ t.jsx(Ce, { blocks: [jt(r, { _id: g })] }))
         );
       });
-      const v = Ze(n, { _parent: p._id });
+      const v = Ze(r, { _parent: p._id });
       b.children = v.length ? /* @__PURE__ */ t.jsx(Ce, { blocks: v }) : null;
-      const O = kn(p._type), E = (O == null ? void 0 : O.component) || null;
+      const O = Cr(p._type), E = (O == null ? void 0 : O.component) || null;
       return G.createElement(E, {
         blockProps: {
           onClick: f,
@@ -1350,15 +1352,15 @@ function Ce({ blocks: e }) {
     })
   ) });
 }
-const or = () => {
+const nn = () => {
   const e = at();
-  return /* @__PURE__ */ t.jsx(jn, { children: e.length ? /* @__PURE__ */ t.jsx(Ce, { blocks: Ze(e, (n) => ee(n._parent)) }) : /* @__PURE__ */ t.jsx(Qn, {}) });
-}, sr = (e, n) => e.querySelector(`[data-style-id="${n}"]`), ar = () => {
-  const [e] = te(Kt), [n] = ot(), [r] = _e(), [, i] = X(), d = Vt(), [, s] = Re(), a = Oe(null), f = Oe(null), [y, p] = H({ width: 0, height: 0 }), m = Bn(y), [h, b] = H(0), [v, O] = H([]), [, E] = H([]), [, C] = te(Gt), [g, U] = Z(), M = Qe("loadingCanvas", !1);
+  return /* @__PURE__ */ t.jsx(Tr, { children: e.length ? /* @__PURE__ */ t.jsx(Ce, { blocks: Ze(e, (r) => ee(r._parent)) }) : /* @__PURE__ */ t.jsx(Jr, {}) });
+}, on = (e, r) => e.querySelector(`[data-style-id="${r}"]`), sn = () => {
+  const [e] = te(Kt), [r] = ot(), [n] = _e(), [, i] = X(), d = Vt(), [, s] = Re(), a = Oe(null), f = Oe(null), [y, p] = H({ width: 0, height: 0 }), m = Dr(y), [h, b] = H(0), [v, O] = H([]), [, E] = H([]), [, C] = te(Gt), [g, U] = Z(), M = Qe("loadingCanvas", !1);
   F(() => {
     const { clientWidth: D, clientHeight: W } = f.current;
     p({ width: D, height: W }), h === 0 && b(D);
-  }, [f, r, h]);
+  }, [f, n, h]);
   const B = (D, W = 0) => {
     const { top: q } = D.getBoundingClientRect();
     return q + W >= 0 && q - W <= window.innerHeight;
@@ -1371,7 +1373,7 @@ const or = () => {
     }
   }, [d]), F(() => {
     if (!ee(g) && a.current) {
-      const D = sr(
+      const D = on(
         a.current.contentDocument,
         ce(g).id
       );
@@ -1380,7 +1382,7 @@ const or = () => {
       E([null]);
   }, [g]);
   const l = bt(() => {
-    let D = Dn;
+    let D = Mr;
     return e === "offline" && (D = D.replace(
       "https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio",
       "/offline/tailwind.cdn.js"
@@ -1394,29 +1396,29 @@ const or = () => {
       },
       onMouseLeave: () => setTimeout(() => s(""), 300),
       className: "relative mx-auto h-full w-full bg-black/80",
-      style: h > 0 && !ee(m) ? { width: n ? "100%" : h } : {},
+      style: h > 0 && !ee(m) ? { width: r ? "100%" : h } : {},
       ref: f,
       children: /* @__PURE__ */ t.jsxs(
-        Kn,
+        Hr,
         {
           contentDidMount: () => C(a.current),
           ref: a,
           id: "canvas-iframe",
-          style: { width: `${r}px`, ...m },
+          style: { width: `${n}px`, ...m },
           className: "relative mx-auto box-content h-full max-w-full shadow-md transition-all duration-300 ease-linear",
           initialContent: l,
           children: [
-            /* @__PURE__ */ t.jsx(Gn, {}),
+            /* @__PURE__ */ t.jsx(Vr, {}),
             /* @__PURE__ */ t.jsx(
-              Zn,
+              Xr,
               {
                 block: d,
                 selectedBlockElement: ce(v)
               }
             ),
-            /* @__PURE__ */ t.jsx(Jn, { model: "page" }),
-            /* @__PURE__ */ t.jsxs(Vn, { children: [
-              M ? /* @__PURE__ */ t.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ t.jsx(et, { className: "h-full" }) }) : /* @__PURE__ */ t.jsx(or, {}),
+            /* @__PURE__ */ t.jsx(Zr, { model: "page" }),
+            /* @__PURE__ */ t.jsxs(Kr, { children: [
+              M ? /* @__PURE__ */ t.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ t.jsx(et, { className: "h-full" }) }) : /* @__PURE__ */ t.jsx(nn, {}),
               /* @__PURE__ */ t.jsx("div", { className: "h-60" })
             ] })
           ]
@@ -1424,26 +1426,26 @@ const or = () => {
       )
     }
   );
-}, ir = wt(() => import("./AddBlocks-b6a12d50.js")), Jr = () => {
-  const e = Qe("mode", ve.STATIC), [n, r] = te(Xt), i = {
-    [ve.STATIC]: /* @__PURE__ */ t.jsx(ar, {}),
+}, an = wt(() => import("./AddBlocks-671fde09.js")), eo = () => {
+  const e = Qe("mode", ve.STATIC), [r, n] = te(Xt), i = {
+    [ve.STATIC]: /* @__PURE__ */ t.jsx(sn, {}),
     [ve.FRAMEWORK]: null
   }[e];
   return /* @__PURE__ */ t.jsxs("div", { className: "flex h-full w-full flex-col", children: [
-    /* @__PURE__ */ t.jsx(Mn, {}),
+    /* @__PURE__ */ t.jsx(Or, {}),
     /* @__PURE__ */ t.jsxs("div", { className: "relative flex-1 overflow-hidden bg-slate-800/20 bg-[linear-gradient(to_right,#EEE_0.5px,transparent_0.5px),linear-gradient(to_bottom,#EEE_0.5px,transparent_0.5px)] bg-[size:12px_12px]", children: [
       /* @__PURE__ */ t.jsx(Et, { fallback: /* @__PURE__ */ t.jsx(et, { className: "h-full" }), children: /* @__PURE__ */ t.jsx(Zt, { children: i }) }),
-      n ? /* @__PURE__ */ t.jsx(
+      r ? /* @__PURE__ */ t.jsx(
         "div",
         {
-          onClick: () => r(!1),
+          onClick: () => n(!1),
           className: "absolute inset-0 z-50 flex items-center bg-black/30 backdrop-blur-sm",
           children: /* @__PURE__ */ t.jsx(
             "div",
             {
               onClick: (d) => d.stopPropagation(),
               className: "mx-auto h-[90%] w-[90%] max-w-3xl rounded-md bg-white p-4 shadow-lg shadow-black/10 xl:w-[65%]",
-              children: /* @__PURE__ */ t.jsx(ir, {})
+              children: /* @__PURE__ */ t.jsx(an, {})
             }
           )
         }
@@ -1452,5 +1454,5 @@ const or = () => {
   ] });
 };
 export {
-  Jr as default
+  eo as default
 };