@chaibuilder/sdk 0.1.0

package/dist/CanvasArea-a7901131.js

@@ -0,0 +1,1455 @@
+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);
+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-cdd49c4c.js";
+import { useTranslation as it } from "react-i18next";
+import { S as se } from "./separator-a80d065b.js";
+import { S as Jt, D as Qt, k as en, l as tn, p as nn, q as rn, n as on, H as sn, i as an, j as cn, A as ln, a as dn, b as un, c as fn, e as pn, f as hn, d as mn, h as yn, g as vn } from "./dropdown-menu-d912a52e.js";
+import { L as gn } from "./label-e770a087.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 Ne from "react-dom";
+import { g as _n } from "./_commonjsHelpers-d4512b9c.js";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "./utils-ac68b2c8.js";
+import "clsx";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+import "i18next";
+import "flagged";
+import "@minoru/react-dnd-treeview";
+import "react-hotkeys-hook";
+import "flat-to-nested";
+import "./Class-e6b07b79.js";
+import "redux-undo";
+import "@radix-ui/react-separator";
+import "@radix-ui/react-switch";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-hover-card";
+import "@radix-ui/react-dropdown-menu";
+import "@radix-ui/react-label";
+const Rn = () => {
+  const { undoCount: e, redoCount: n, undo: r, 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" }) })
+  ] });
+};
+function An() {
+  const [e, n] = tt(), { t: r } = it();
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ t.jsx(gn, { htmlFor: "dark-mode-switch", children: r("dark_mode") }),
+    /* @__PURE__ */ t.jsxs(
+      Jt,
+      {
+        id: "dark-mode-switch",
+        checked: e,
+        onCheckedChange: () => {
+          n(!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`,
+        children: [
+          /* @__PURE__ */ t.jsx("span", { className: "sr-only", children: "Use setting" }),
+          /* @__PURE__ */ t.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${e ? "translate-x-5" : "translate-x-0"}
+            pointer-events-none -mt-px inline-block h-[18px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ t.jsxs(
+  "svg",
+  {
+    className: e ? "rotate-90" : "",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 13 13",
+    xmlSpace: "preserve",
+    width: 13,
+    height: 13,
+    children: [
+      /* @__PURE__ */ t.jsx("g", { strokeWidth: 0 }),
+      /* @__PURE__ */ t.jsx("g", { strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ t.jsx(
+        "path",
+        {
+          d: "M10.65 0H2.349a.851.851 0 0 0-.851.852v11.299c0 .47.382.852.851.852h8.3a.851.851 0 0 0 .851-.852V.852A.851.851 0 0 0 10.65 0zM6.599 12.466a.367.367 0 1 1 0-.735.367.367 0 0 1 0 .735zm3.9-1.267H2.5V1h8.001v10.199z",
+          style: {
+            fill: "#000"
+          }
+        }
+      )
+    ]
+  }
+), Fe = [
+  {
+    title: "Mobile (XS)",
+    content: "Styles set here are applied to all screen unless edited at higher breakpoint",
+    breakpoint: "xs",
+    icon: /* @__PURE__ */ t.jsx(Be, {}),
+    width: 400
+  },
+  {
+    title: "Mobile landscape (SM)",
+    content: "Styles set here are applied at 640px and up unless edited at higher breakpoint",
+    breakpoint: "sm",
+    icon: /* @__PURE__ */ t.jsx(Be, { className: "rotate-90" }),
+    width: 640
+  },
+  {
+    title: "Tablet (MD)",
+    content: "Styles set here are applied at 768px and up",
+    breakpoint: "md",
+    icon: /* @__PURE__ */ t.jsx(Le, {}),
+    width: 800
+  },
+  {
+    title: "Tablet Landscape (LG)",
+    content: "Styles set here are applied at 1024px and up unless edited at higher breakpoint",
+    breakpoint: "lg",
+    icon: /* @__PURE__ */ t.jsx(Le, { landscape: !0 }),
+    width: 1024
+  },
+  {
+    title: "Desktop (XL)",
+    content: "Styles set here are applied at 1280px and up unless edited at higher breakpoint",
+    breakpoint: "xl",
+    icon: /* @__PURE__ */ t.jsx(kt, {}),
+    width: 1420
+  },
+  {
+    title: "Large Desktop (2XL)",
+    content: "Styles set here are applied at 1536px and up",
+    breakpoint: "2xl",
+    icon: /* @__PURE__ */ t.jsx(_t, {}),
+    width: 1920
+  }
+], Pn = ({
+  title: e,
+  content: n,
+  currentBreakpoint: r,
+  breakpoint: i,
+  width: d,
+  icon: s,
+  onClick: a
+}) => /* @__PURE__ */ t.jsxs(sn, { children: [
+  /* @__PURE__ */ t.jsx(an, { asChild: !0, children: /* @__PURE__ */ t.jsx(
+    le,
+    {
+      onClick: () => a(d),
+      size: "sm",
+      variant: i === r ? "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("h4", { className: "text-sm font-semibold", children: e }),
+    /* @__PURE__ */ t.jsx("p", { className: "text-xs", children: n })
+  ] }) }) })
+] }), 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]);
+  };
+  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 })
+    ),
+    /* @__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, {}),
+        ie(Fe, (s) => /* @__PURE__ */ t.jsx(
+          on,
+          {
+            disabled: s.breakpoint === "xs",
+            onCheckedChange: () => d(ye(s.breakpoint)),
+            checked: Me(r, ye(s.breakpoint)),
+            children: s.title
+          },
+          s.breakpoint
+        ))
+      ] })
+    ] })
+  ] });
+}, 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(ln, { children: [
+    /* @__PURE__ */ t.jsx(dn, { 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(un, { className: "border-border", children: [
+      /* @__PURE__ */ t.jsxs(fn, { children: [
+        /* @__PURE__ */ t.jsx(pn, { children: "Clear whole canvas?" }),
+        /* @__PURE__ */ t.jsx(hn, { children: "Are you sure you want to clear the whole canvas?" })
+      ] }),
+      /* @__PURE__ */ t.jsxs(mn, { children: [
+        /* @__PURE__ */ t.jsx(yn, { children: "Cancel" }),
+        /* @__PURE__ */ t.jsx(vn, { onClick: d, children: "Yes" })
+      ] })
+    ] })
+  ] }) });
+}, Mn = () => {
+  const e = $t("darkMode", !1), [n] = nt();
+  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(se, { orientation: "vertical" })
+      ] }) : null,
+      /* @__PURE__ */ t.jsx(In, {}),
+      /* @__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),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsx(se, { orientation: "vertical" }),
+      /* @__PURE__ */ t.jsx(Rn, {})
+    ] }),
+    /* @__PURE__ */ t.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
+      /* @__PURE__ */ t.jsx(se, { orientation: "vertical" }),
+      /* @__PURE__ */ t.jsx(On, {})
+    ] })
+  ] });
+}, ve = {
+  FRAMEWORK: "FRAMEWORK",
+  STATIC: "STATIC",
+  EMAIL: "EMAIL",
+  PRESENTATION: "PRESENTATION",
+  GRAPHIC: "GRAPHIC"
+}, Dn = `<!doctype html>
+<html class="scroll-smooth h-full overflow-y-auto">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://old.chaibuilder.com/offline/tailwind.cdn.js"><\/script>
+    <style>
+    html { height: 100%; overflow:auto; }
+    body { height: 100%; }
+    .air-highlight{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}
+    .air-highlight-multi{ outline: 1px solid #29e503 !important; outline-offset: -1px;}
+    body{   -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
+            -moz-user-select: none;-ms-user-select: none; user-select: none; }
+    html{
+      -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
+    /** IMPORTANT: Make fields content editable in SAFARI */
+    [contenteditable] {-webkit-user-select: text;user-select: text;}
+
+    html::-webkit-scrollbar { width: 0 !important }
+    .aspect-auto{aspect-ratio: auto;}
+    .aspect-square{aspect-ratio: 1/1;}
+    .aspect-video{aspect-ratio: 16/9;}
+    a{ pointer-events: none !important; }
+    </style>
+    <style id="hidden-blocks"></style>
+    <style id="selected-block"></style>
+    <style id="selected-styling-block"></style>
+    <style id="highlighted-block"></style>
+  </head>
+  <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(() => {
+    const { width: a, height: f } = e;
+    if (a < n) {
+      const y = parseFloat((a / n).toString());
+      let p = {};
+      f && (p = { height: f + 2 * f * (1 - y) }), d({
+        transform: `scale(${y})`,
+        transformOrigin: "top left",
+        ...p,
+        maxWidth: "none"
+      }), r(y * 100);
+    } else
+      d({}), r(100);
+  }, [n, e, r]);
+  return F(() => {
+    s();
+  }, [n, e, r, s]), i;
+};
+var Te = { exports: {} }, ae = { exports: {} }, A = {};
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var We;
+function $n() {
+  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;
+  function M(l) {
+    if (typeof l == "object" && l !== null) {
+      var D = l.$$typeof;
+      switch (D) {
+        case n:
+          switch (l = l.type, l) {
+            case y:
+            case p:
+            case i:
+            case s:
+            case d:
+            case h:
+              return l;
+            default:
+              switch (l = l && l.$$typeof, l) {
+                case f:
+                case m:
+                case O:
+                case v:
+                case a:
+                  return l;
+                default:
+                  return D;
+              }
+          }
+        case r:
+          return D;
+      }
+    }
+  }
+  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 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;
+  }, A.isForwardRef = function(l) {
+    return M(l) === m;
+  }, A.isFragment = function(l) {
+    return M(l) === i;
+  }, A.isLazy = function(l) {
+    return M(l) === O;
+  }, A.isMemo = function(l) {
+    return M(l) === v;
+  }, A.isPortal = function(l) {
+    return M(l) === r;
+  }, A.isProfiler = function(l) {
+    return M(l) === s;
+  }, A.isStrictMode = function(l) {
+    return M(l) === d;
+  }, A.isSuspense = function(l) {
+    return M(l) === h;
+  }, A.isValidElementType = function(l) {
+    return typeof l == "string" || typeof l == "function" || l === i || l === p || l === s || l === d || l === h || l === b || typeof l == "object" && l !== null && (l.$$typeof === O || l.$$typeof === v || l.$$typeof === a || l.$$typeof === f || l.$$typeof === m || l.$$typeof === C || l.$$typeof === g || l.$$typeof === U || l.$$typeof === E);
+  }, A.typeOf = M, A;
+}
+var P = {};
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var qe;
+function Nn() {
+  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;
+    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);
+    }
+    function B(c) {
+      if (typeof c == "object" && c !== null) {
+        var z = c.$$typeof;
+        switch (z) {
+          case n:
+            var oe = c.type;
+            switch (oe) {
+              case y:
+              case p:
+              case i:
+              case s:
+              case d:
+              case h:
+                return oe;
+              default:
+                var Ie = oe && oe.$$typeof;
+                switch (Ie) {
+                  case f:
+                  case m:
+                  case O:
+                  case v:
+                  case a:
+                    return Ie;
+                  default:
+                    return z;
+                }
+            }
+          case r:
+            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;
+    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;
+    }
+    function o(c) {
+      return B(c) === p;
+    }
+    function u(c) {
+      return B(c) === f;
+    }
+    function j(c) {
+      return B(c) === a;
+    }
+    function S(c) {
+      return typeof c == "object" && c !== null && c.$$typeof === n;
+    }
+    function x(c) {
+      return B(c) === m;
+    }
+    function k(c) {
+      return B(c) === i;
+    }
+    function w(c) {
+      return B(c) === O;
+    }
+    function T(c) {
+      return B(c) === v;
+    }
+    function _(c) {
+      return B(c) === r;
+    }
+    function I(c) {
+      return B(c) === s;
+    }
+    function R(c) {
+      return B(c) === d;
+    }
+    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;
+}
+var Ue;
+function lt() {
+  return Ue || (Ue = 1, process.env.NODE_ENV === "production" ? ae.exports = $n() : ae.exports = Nn()), ae.exports;
+}
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+var ge, Ye;
+function Ln() {
+  if (Ye)
+    return ge;
+  Ye = 1;
+  var e = Object.getOwnPropertySymbols, n = Object.prototype.hasOwnProperty, r = Object.prototype.propertyIsEnumerable;
+  function i(s) {
+    if (s == null)
+      throw new TypeError("Object.assign cannot be called with null or undefined");
+    return Object(s);
+  }
+  function d() {
+    try {
+      if (!Object.assign)
+        return !1;
+      var s = new String("abc");
+      if (s[5] = "de", Object.getOwnPropertyNames(s)[0] === "5")
+        return !1;
+      for (var a = {}, f = 0; f < 10; f++)
+        a["_" + String.fromCharCode(f)] = f;
+      var y = Object.getOwnPropertyNames(a).map(function(m) {
+        return a[m];
+      });
+      if (y.join("") !== "0123456789")
+        return !1;
+      var p = {};
+      return "abcdefghijklmnopqrst".split("").forEach(function(m) {
+        p[m] = m;
+      }), Object.keys(Object.assign({}, p)).join("") === "abcdefghijklmnopqrst";
+    } catch {
+      return !1;
+    }
+  }
+  return ge = d() ? Object.assign : function(s, a) {
+    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]);
+      if (e) {
+        p = e(f);
+        for (var b = 0; b < p.length; b++)
+          r.call(f, p[b]) && (y[p[b]] = f[p[b]]);
+      }
+    }
+    return y;
+  }, ge;
+}
+var xe, ze;
+function Ae() {
+  if (ze)
+    return xe;
+  ze = 1;
+  var e = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
+  return xe = e, xe;
+}
+var be, He;
+function dt() {
+  return He || (He = 1, be = Function.call.bind(Object.prototype.hasOwnProperty)), be;
+}
+var we, Ke;
+function Fn() {
+  if (Ke)
+    return we;
+  Ke = 1;
+  var e = function() {
+  };
+  if (process.env.NODE_ENV !== "production") {
+    var n = Ae(), r = {}, i = dt();
+    e = function(s) {
+      var a = "Warning: " + s;
+      typeof console < "u" && console.error(a);
+      try {
+        throw new Error(a);
+      } catch {
+      }
+    };
+  }
+  function d(s, a, f, y, p) {
+    if (process.env.NODE_ENV !== "production") {
+      for (var m in s)
+        if (i(s, m)) {
+          var h;
+          try {
+            if (typeof s[m] != "function") {
+              var b = Error(
+                (y || "React class") + ": " + f + " type `" + m + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof s[m] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+              );
+              throw b.name = "Invariant Violation", b;
+            }
+            h = s[m](a, m, y, f, null, n);
+          } 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;
+            var v = p ? p() : "";
+            e(
+              "Failed " + f + " type: " + h.message + (v ?? "")
+            );
+          }
+        }
+    }
+  }
+  return d.resetWarningCache = function() {
+    process.env.NODE_ENV !== "production" && (r = {});
+  }, we = d, we;
+}
+var Ee, Ve;
+function Wn() {
+  if (Ve)
+    return Ee;
+  Ve = 1;
+  var e = lt(), n = Ln(), r = Ae(), i = dt(), d = Fn(), s = function() {
+  };
+  process.env.NODE_ENV !== "production" && (s = function(f) {
+    var y = "Warning: " + f;
+    typeof console < "u" && console.error(y);
+    try {
+      throw new Error(y);
+    } catch {
+    }
+  });
+  function a() {
+    return null;
+  }
+  return Ee = function(f, y) {
+    var p = typeof Symbol == "function" && Symbol.iterator, m = "@@iterator";
+    function h(o) {
+      var u = o && (p && o[p] || o[m]);
+      if (typeof u == "function")
+        return u;
+    }
+    var b = "<<anonymous>>", v = {
+      array: g("array"),
+      bigint: g("bigint"),
+      bool: g("boolean"),
+      func: g("function"),
+      number: g("number"),
+      object: g("object"),
+      string: g("string"),
+      symbol: g("symbol"),
+      any: U(),
+      arrayOf: M,
+      element: B(),
+      elementType: l(),
+      instanceOf: D,
+      node: ue(),
+      objectOf: q,
+      oneOf: W,
+      oneOfType: de,
+      shape: fe,
+      exact: pe
+    };
+    function O(o, u) {
+      return o === u ? o !== 0 || 1 / o === 1 / u : o !== o && u !== u;
+    }
+    function E(o, u) {
+      this.message = o, this.data = u && typeof u == "object" ? u : {}, this.stack = "";
+    }
+    E.prototype = Error.prototype;
+    function C(o) {
+      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 (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"
+            );
+            throw c.name = "Invariant Violation", c;
+          } else if (process.env.NODE_ENV !== "production" && typeof console < "u") {
+            var z = _ + ":" + T;
+            !u[z] && // Avoid spamming the console because they are often not actionable except for lib authors
+            j < 3 && (s(
+              "You are manually calling a React.PropTypes validation function for the `" + R + "` prop on `" + _ + "`. 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[z] = !0, j++);
+          }
+        }
+        return w[T] == null ? k ? w[T] === null ? new E("The " + I + " `" + R + "` is marked as required " + ("in `" + _ + "`, but its value is `null`.")) : new E("The " + I + " `" + R + "` is marked as required in " + ("`" + _ + "`, but its value is `undefined`.")) : null : o(w, T, _, I, R);
+      }
+      var x = S.bind(null, !1);
+      return x.isRequired = S.bind(null, !0), x;
+    }
+    function g(o) {
+      function u(j, S, x, k, w, T) {
+        var _ = j[S], I = Y(_);
+        if (I !== o) {
+          var R = K(_);
+          return new E(
+            "Invalid " + k + " `" + w + "` of type " + ("`" + R + "` supplied to `" + x + "`, expected ") + ("`" + o + "`."),
+            { expectedType: o }
+          );
+        }
+        return null;
+      }
+      return C(u);
+    }
+    function U() {
+      return C(a);
+    }
+    function M(o) {
+      function u(j, S, x, k, w) {
+        if (typeof o != "function")
+          return new E("Property `" + w + "` of component `" + x + "` has invalid PropType notation inside arrayOf.");
+        var T = j[S];
+        if (!Array.isArray(T)) {
+          var _ = Y(T);
+          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);
+          if (R instanceof Error)
+            return R;
+        }
+        return null;
+      }
+      return C(u);
+    }
+    function B() {
+      function o(u, j, S, x, k) {
+        var w = u[j];
+        if (!f(w)) {
+          var T = Y(w);
+          return new E("Invalid " + x + " `" + k + "` of type " + ("`" + T + "` supplied to `" + S + "`, expected a single ReactElement."));
+        }
+        return null;
+      }
+      return C(o);
+    }
+    function l() {
+      function o(u, j, S, x, k) {
+        var w = u[j];
+        if (!e.isValidElementType(w)) {
+          var T = Y(w);
+          return new E("Invalid " + x + " `" + k + "` of type " + ("`" + T + "` supplied to `" + S + "`, expected a single ReactElement type."));
+        }
+        return null;
+      }
+      return C(o);
+    }
+    function D(o) {
+      function u(j, S, x, k, w) {
+        if (!(j[S] instanceof o)) {
+          var T = o.name || b, _ = me(j[S]);
+          return new E("Invalid " + k + " `" + w + "` of type " + ("`" + _ + "` supplied to `" + x + "`, expected ") + ("instance of `" + T + "`."));
+        }
+        return null;
+      }
+      return C(u);
+    }
+    function W(o) {
+      if (!Array.isArray(o))
+        return process.env.NODE_ENV !== "production" && (arguments.length > 1 ? s(
+          "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])."
+        ) : s("Invalid argument supplied to oneOf, expected an array.")), a;
+      function u(j, S, x, k, w) {
+        for (var T = j[S], _ = 0; _ < o.length; _++)
+          if (O(T, o[_]))
+            return null;
+        var I = JSON.stringify(o, function(N, c) {
+          var z = K(c);
+          return z === "symbol" ? String(c) : c;
+        });
+        return new E("Invalid " + k + " `" + w + "` of value `" + String(T) + "` " + ("supplied to `" + x + "`, expected one of " + I + "."));
+      }
+      return C(u);
+    }
+    function q(o) {
+      function u(j, S, x, k, w) {
+        if (typeof o != "function")
+          return new E("Property `" + w + "` of component `" + x + "` has invalid PropType notation inside objectOf.");
+        var T = j[S], _ = Y(T);
+        if (_ !== "object")
+          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);
+            if (R instanceof Error)
+              return R;
+          }
+        return null;
+      }
+      return C(u);
+    }
+    function de(o) {
+      if (!Array.isArray(o))
+        return process.env.NODE_ENV !== "production" && s("Invalid argument supplied to oneOfType, expected an instance of array."), a;
+      for (var u = 0; u < o.length; u++) {
+        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 + "."
+          ), 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);
+          if (c == null)
+            return null;
+          c.data && i(c.data, "expectedType") && I.push(c.data.expectedType);
+        }
+        var z = I.length > 0 ? ", expected one of type [" + I.join(", ") + "]" : "";
+        return new E("Invalid " + T + " `" + _ + "` supplied to " + ("`" + w + "`" + z + "."));
+      }
+      return C(S);
+    }
+    function ue() {
+      function o(u, j, S, x, k) {
+        return J(u[j]) ? null : new E("Invalid " + x + " `" + k + "` supplied to " + ("`" + S + "`, expected a ReactNode."));
+      }
+      return C(o);
+    }
+    function ne(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 + "`."
+      );
+    }
+    function fe(o) {
+      function u(j, S, x, k, w) {
+        var T = j[S], _ = Y(T);
+        if (_ !== "object")
+          return new E("Invalid " + k + " `" + w + "` of type `" + _ + "` " + ("supplied to `" + x + "`, expected `object`."));
+        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);
+          if (N)
+            return N;
+        }
+        return null;
+      }
+      return C(u);
+    }
+    function pe(o) {
+      function u(j, S, x, k, w) {
+        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);
+        for (var R in I) {
+          var N = o[R];
+          if (i(o, R) && typeof N != "function")
+            return ne(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);
+          if (c)
+            return c;
+        }
+        return null;
+      }
+      return C(u);
+    }
+    function J(o) {
+      switch (typeof o) {
+        case "number":
+        case "string":
+        case "undefined":
+          return !0;
+        case "boolean":
+          return !o;
+        case "object":
+          if (Array.isArray(o))
+            return o.every(J);
+          if (o === null || f(o))
+            return !0;
+          var u = h(o);
+          if (u) {
+            var j = u.call(o), S;
+            if (u !== o.entries) {
+              for (; !(S = j.next()).done; )
+                if (!J(S.value))
+                  return !1;
+            } else
+              for (; !(S = j.next()).done; ) {
+                var x = S.value;
+                if (x && !J(x[1]))
+                  return !1;
+              }
+          } else
+            return !1;
+          return !0;
+        default:
+          return !1;
+      }
+    }
+    function he(o, u) {
+      return o === "symbol" ? !0 : u ? u["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && u instanceof Symbol : !1;
+    }
+    function Y(o) {
+      var u = typeof o;
+      return Array.isArray(o) ? "array" : o instanceof RegExp ? "object" : he(u, o) ? "symbol" : u;
+    }
+    function K(o) {
+      if (typeof o > "u" || o === null)
+        return "" + o;
+      var u = Y(o);
+      if (u === "object") {
+        if (o instanceof Date)
+          return "date";
+        if (o instanceof RegExp)
+          return "regexp";
+      }
+      return u;
+    }
+    function re(o) {
+      var u = K(o);
+      switch (u) {
+        case "array":
+        case "object":
+          return "an " + u;
+        case "boolean":
+        case "date":
+        case "regexp":
+          return "a " + u;
+        default:
+          return u;
+      }
+    }
+    function me(o) {
+      return !o.constructor || !o.constructor.name ? b : o.constructor.name;
+    }
+    return v.checkPropTypes = d, v.resetWarningCache = d.resetWarningCache, v.PropTypes = v, v;
+  }, Ee;
+}
+var Se, Ge;
+function qn() {
+  if (Ge)
+    return Se;
+  Ge = 1;
+  var e = Ae();
+  function n() {
+  }
+  function r() {
+  }
+  return r.resetWarningCache = n, Se = function() {
+    function i(a, f, y, p, m, h) {
+      if (h !== e) {
+        var b = 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 b.name = "Invariant Violation", b;
+      }
+    }
+    i.isRequired = i;
+    function d() {
+      return i;
+    }
+    var s = {
+      array: i,
+      bigint: i,
+      bool: i,
+      func: i,
+      number: i,
+      object: i,
+      string: i,
+      symbol: i,
+      any: i,
+      arrayOf: d,
+      element: i,
+      elementType: i,
+      instanceOf: d,
+      node: i,
+      objectOf: d,
+      oneOf: d,
+      oneOfType: d,
+      shape: d,
+      exact: d,
+      checkPropTypes: r,
+      resetWarningCache: n
+    };
+    return s.PropTypes = s, s;
+  }, Se;
+}
+if (process.env.NODE_ENV !== "production") {
+  var Un = lt(), Yn = !0;
+  Te.exports = Wn()(Un.isElement, Yn);
+} else
+  Te.exports = qn()();
+var zn = Te.exports;
+const L = /* @__PURE__ */ _n(zn);
+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: Xr } = pt;
+class ht extends Xe {
+  componentDidMount() {
+    this.props.contentDidMount();
+  }
+  componentDidUpdate() {
+    this.props.contentDidUpdate();
+  }
+  render() {
+    return xt.only(this.props.children);
+  }
+}
+V(ht, "propTypes", {
+  children: L.element.isRequired,
+  contentDidMount: L.func.isRequired,
+  contentDidUpdate: L.func.isRequired
+});
+class je extends Xe {
+  constructor(r, i) {
+    super(r, i);
+    V(this, "setRef", (r) => {
+      this.nodeRef.current = r;
+      const { forwardedRef: i } = this.props;
+      typeof i == "function" ? i(r) : i && (i.current = r);
+    });
+    V(this, "handleLoad", () => {
+      clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
+    });
+    // In certain situations on a cold cache DOMContentLoaded never gets called
+    // fallback to an interval to check if that's the case
+    V(this, "loadCheck", () => setInterval(() => {
+      this.handleLoad();
+    }, 500));
+    this._isMounted = !1, this.nodeRef = G.createRef(), this.state = { iframeLoaded: !1 };
+  }
+  componentDidMount() {
+    this._isMounted = !0, this.getDoc() && this.nodeRef.current.contentWindow.addEventListener("DOMContentLoaded", this.handleLoad);
+  }
+  componentWillUnmount() {
+    this._isMounted = !1, this.nodeRef.current.removeEventListener("DOMContentLoaded", this.handleLoad);
+  }
+  getDoc() {
+    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];
+  }
+  renderFrameContents() {
+    if (!this._isMounted)
+      return null;
+    const r = this.getDoc();
+    if (!r)
+      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();
+    return [Ne.createPortal(this.props.head, this.getDoc().head), Ne.createPortal(a, f)];
+  }
+  render() {
+    const r = {
+      ...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() });
+  }
+}
+// React warns when you render directly into the body since browser extensions
+// 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.
+V(je, "propTypes", {
+  style: L.object,
+  // eslint-disable-line
+  head: L.node,
+  initialContent: L.string,
+  mountTarget: L.string,
+  contentDidMount: L.func,
+  contentDidUpdate: L.func,
+  children: L.oneOfType([L.element, L.arrayOf(L.element)])
+}), V(je, "defaultProps", {
+  style: {},
+  head: null,
+  children: void 0,
+  mountTarget: void 0,
+  contentDidMount: () => {
+  },
+  contentDidUpdate: () => {
+  },
+  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();
+  return F(() => {
+    setTimeout(() => {
+      if (!ee(i))
+        return;
+      const s = mt(n, ce(r));
+      if (s) {
+        const a = s.getAttribute("data-style-prop");
+        if (a) {
+          const f = s.getAttribute("data-style-id"), y = s.getAttribute("data-block-parent");
+          d([{ id: f, prop: a, blockId: y }]);
+        }
+      }
+    }, 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)));
+  };
+  return F(() => {
+    const C = (g) => {
+      if (g.key === "Escape") {
+        r([]), i([]);
+        return;
+      }
+      if (E(g), !v && (g.key === "Delete" || g.key === "Backspace") && (g.preventDefault(), h(n)), 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]);
+      }
+    };
+    return e.removeEventListener("keydown", C), e.addEventListener("keydown", C), () => {
+      e.removeEventListener("keydown", C);
+    };
+  }, [
+    n,
+    r,
+    d,
+    h,
+    m,
+    s,
+    a,
+    f,
+    y,
+    p,
+    v,
+    b,
+    e
+  ]), null;
+}, Xn = ({ block: e, label: n }) => {
+  const [, r] = En(() => ({
+    type: "CANVAS_BLOCK",
+    item: e
+  }));
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
+      ref: r,
+      onDragStart: () => {
+        console.log("drag start");
+      },
+      children: [
+        /* @__PURE__ */ t.jsx(Mt, {}),
+        n
+      ]
+    }
+  );
+}, Zn = ({
+  selectedBlockElement: e,
+  block: n
+}) => {
+  const r = st(), i = rt(), [, d] = X(), [, s] = Z(), { floatingStyles: a, refs: f, update: y } = bn({
+    placement: "top-start",
+    middleware: [wn(), xn()],
+    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(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      ref: f.setFloating,
+      style: a,
+      onClick: (h) => {
+        h.stopPropagation(), h.preventDefault();
+      },
+      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.jsxs("div", { className: "flex gap-2 px-1 ", children: [
+          p && /* @__PURE__ */ t.jsx(
+            Pt,
+            {
+              className: "hover:scale-105 ",
+              onClick: () => {
+                s([]), d([p]);
+              }
+            }
+          ),
+          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
+        ] })
+      ]
+    }
+  );
+}, 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(
+    a == null ? void 0 : a.getElementById("selected-block")
+  ), [m] = H(
+    a == null ? void 0 : a.getElementById("selected-styling-block")
+  );
+  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");
+  return F(() => {
+    const v = $(n, "_primaryColor", "#000"), O = $(n, "_secondaryColor", "#FFF"), E = Tn({
+      colors: [v, O],
+      names: ["primary", "secondary"]
+    });
+    E.primary.DEFAULT = v, E.secondary.DEFAULT = O;
+    const C = $(n, "_roundedCorners", "0");
+    !f || !f.tailwind || (f.tailwind.config = {
+      darkMode: "class",
+      theme: {
+        fontFamily: {
+          heading: [h],
+          body: [b]
+        },
+        extend: {
+          borderRadius: {
+            global: `${C || "0"}px`
+          },
+          colors: E
+        }
+      },
+      plugins: [
+        // @ts-ignore
+        f.tailwind.plugin.withOptions(({ prefix: g = "ui" } = {}) => ({ addVariant: U }) => {
+          for (const M of ["open", "checked", "selected", "active", "disabled"])
+            U(`${g}-${M}`, [
+              `&[data-headlessui-state~="${M}"]`,
+              `:where([data-headlessui-state~="${M}"]) &`
+            ]), U(`${g}-not-${M}`, [
+              `&[data-headlessui-state]:not([data-headlessui-state~="${M}"])`,
+              `:where([data-headlessui-state]:not([data-headlessui-state~="${M}"])) &:not([data-headlessui-state])`
+            ]);
+        })
+      ]
+    });
+  }, [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, p]), F(() => {
+    y && (y.textContent = d ? `[data-style-id="${d}"]{ outline: 1px solid orange !important; outline-offset: -1px;}` : "");
+  }, [d, r, 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");
+    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: [
+    h && /* @__PURE__ */ t.jsx(
+      "link",
+      {
+        id: "heading-font",
+        rel: "stylesheet",
+        type: "text/css",
+        href: `https://fonts.googleapis.com/css2?family=${h.replace(
+          / /g,
+          "+"
+        )}:wght@300;400;500;600;700;800;900&display=swap`,
+        media: "all"
+      }
+    ),
+    b && h !== b && /* @__PURE__ */ t.jsx(
+      "link",
+      {
+        id: "body-font",
+        rel: "stylesheet",
+        type: "text/css",
+        href: `https://fonts.googleapis.com/css2?family=${b.replace(
+          / /g,
+          "+"
+        )}:wght@300;400;500;600;700;800;900&display=swap`,
+        media: "all"
+      }
+    ),
+    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 = () => {
+  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]);
+});
+function nr(e, n) {
+  return $(e, `${n}_attrs`, {});
+}
+function rr(e, n, r, i) {
+  const d = {};
+  return Object.keys(e).forEach((s) => {
+    if (Je(e[s]) && e[s].startsWith(ct)) {
+      const a = tr(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,
+        onClick: i,
+        ...nr(e, s)
+      };
+    }
+  }), d;
+}
+function Ce({ blocks: e }) {
+  const n = at(), [, r] = 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();
+    },
+    [r]
+  ), a = Q(
+    (p) => {
+      r(""), p.stopPropagation();
+    },
+    [r]
+  ), f = Q(
+    (p) => {
+      p.stopPropagation();
+      const m = p.currentTarget;
+      if (m.getAttribute("data-block-parent")) {
+        const h = m.getAttribute("data-style-prop"), b = m.getAttribute("data-style-id"), v = m.getAttribute("data-block-parent");
+        i([{ id: b, prop: h, blockId: v }]), d([v]);
+      } else if (m.getAttribute("data-block-id") && (d([m.getAttribute("data-block-id")]), m.getAttribute("data-block-parent"))) {
+        const h = m.getAttribute("data-style-prop"), b = m.getAttribute("data-style-id"), v = m.getAttribute("data-block-parent");
+        i([{ id: b, prop: h, blockId: v }]);
+      }
+    },
+    [i, d]
+  ), y = Q(
+    (p) => rr(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 = {};
+      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 })] }))
+        );
+      });
+      const v = Ze(n, { _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;
+      return G.createElement(E, {
+        blockProps: {
+          onClick: f,
+          "data-block-id": p._id,
+          "data-block-type": p._type
+        },
+        ...p,
+        index: m,
+        ...y(p),
+        ...b,
+        inBuilder: !0
+      });
+    })
+  ) });
+}
+const or = () => {
+  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);
+  F(() => {
+    const { clientWidth: D, clientHeight: W } = f.current;
+    p({ width: D, height: W }), h === 0 && b(D);
+  }, [f, r, h]);
+  const B = (D, W = 0) => {
+    const { top: q } = D.getBoundingClientRect();
+    return q + W >= 0 && q - W <= window.innerHeight;
+  };
+  F(() => {
+    var D, W;
+    if (d && d.type !== "Multiple" && a.current) {
+      const q = mt(a.current.contentDocument, d._id);
+      q && (B(q) || (W = (D = a.current) == null ? void 0 : D.contentWindow) == null || W.scrollTo({ top: q.offsetTop, behavior: "smooth" }), O([q]));
+    }
+  }, [d]), F(() => {
+    if (!ee(g) && a.current) {
+      const D = sr(
+        a.current.contentDocument,
+        ce(g).id
+      );
+      E(D ? [D] : [null]);
+    } else
+      E([null]);
+  }, [g]);
+  const l = bt(() => {
+    let D = Dn;
+    return e === "offline" && (D = D.replace(
+      "https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio",
+      "/offline/tailwind.cdn.js"
+    ), D = D.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), D = D.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), D;
+  }, [e]);
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      onClick: () => {
+        i([]), U([]);
+      },
+      onMouseLeave: () => setTimeout(() => s(""), 300),
+      className: "relative mx-auto h-full w-full bg-black/80",
+      style: h > 0 && !ee(m) ? { width: n ? "100%" : h } : {},
+      ref: f,
+      children: /* @__PURE__ */ t.jsxs(
+        Kn,
+        {
+          contentDidMount: () => C(a.current),
+          ref: a,
+          id: "canvas-iframe",
+          style: { width: `${r}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(
+              Zn,
+              {
+                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("div", { className: "h-60" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}, ir = wt(() => import("./AddBlocks-04c49399.js")), Zr = () => {
+  const e = Qe("mode", ve.STATIC), [n, r] = te(Xt), i = {
+    [ve.STATIC]: /* @__PURE__ */ t.jsx(ar, {}),
+    [ve.FRAMEWORK]: null
+  }[e];
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex h-full w-full flex-col", children: [
+    /* @__PURE__ */ t.jsx(Mn, {}),
+    /* @__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(
+        "div",
+        {
+          onClick: () => r(!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, {})
+            }
+          )
+        }
+      ) : null
+    ] })
+  ] });
+};
+export {
+  Zr as default
+};