@chaibuilder/sdk 1.0.23 → 1.1.0

package/dist/CanvasArea-dS2B20gv.js

@@ -0,0 +1,1421 @@
+var mt = Object.defineProperty;
+var yt = (e, t, n) => t in e ? mt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var z = (e, t, n) => (yt(e, typeof t != "symbol" ? t + "" : t, n), n);
+import { j as r } from "./jsx-runtime-NV737rRe.js";
+import Y, { createElement as vt, useCallback as Q, useState as $, useEffect as L, Component as $e, Children as xt, Suspense as qe, useRef as Te, useMemo as bt, lazy as kt } from "react";
+import { map as ne, includes as Se, toUpper as ue, round as wt, throttle as jt, noop as G, isEmpty as U, first as re, omit as Ct, get as B, isString as be, memoize as Tt, each as St, find as Et, filter as Ue, isNull as It } from "lodash";
+import { ResetIcon as Ee, MobileIcon as Ie, LaptopIcon as Dt, DesktopIcon as Bt, DotsVerticalIcon as Ot, EraserIcon as At, ZoomInIcon as Pt, DragHandleDots2Icon as Rt, ArrowUpIcon as Lt, CopyIcon as _t, TrashIcon as Mt } from "@radix-ui/react-icons";
+import { p as ke, B as se, W as He, aM as Nt, aN as Ft, aO as Wt, aP as $t, aQ as qt, R as we, ai as Ut, aR as Ht, aS as zt, aT as Yt, aU as Kt, aV as Vt, aW as Xt, w as Jt, j as H, aj as K, D as Zt, E as Gt, F as Qt, G as en, H as tn, I as nn, J as rn, K as sn, at as on, L as an, U as ze, aL as te, aX as ln, ab as cn, _ as ie, aY as ae, m as Ye, n as dn, k as un, o as pn, h as Ke, l as Ve, ag as fn, aZ as hn, a_ as gn, a$ as mn, x as yn, ae as Xe, b0 as vn, b1 as xn, a6 as bn, b2 as kn, i as wn, S as Je, aA as jn } from "./index-ORFlyrBx.js";
+import { useTranslation as Cn } from "react-i18next";
+import { useAtom as F } from "jotai";
+import De from "react-dom";
+import { g as Tn, S as Be, a as Ze } from "./MODIFIERS-MLfpKQY1.js";
+import { r as Ge, u as Sn, B as En, E as In } from "./index-N3mTbV2j.js";
+import { Quill as Dn } from "react-quill";
+import { u as Bn } from "./useAddBlockByDrop-UA_Iw_4l.js";
+import { useFeature as On } from "flagged";
+import { flip as An } from "@floating-ui/dom";
+import { useFloating as Pn, shift as Rn } from "@floating-ui/react-dom";
+import { useDrag as Ln } from "react-dnd";
+import { useResizeObserver as _n } from "@react-hookz/web";
+import { tailwindcssPaletteGenerator as Mn } from "@bobthered/tailwindcss-palette-generator";
+import { Provider as Nn } from "react-wrap-balancer";
+import { twMerge as Fn } from "tailwind-merge";
+import { getBlockComponent as Wn } from "@chaibuilder/runtime";
+import "@radix-ui/react-toggle";
+import "class-variance-authority";
+import "./utils-PPBbw5bk.js";
+import "clsx";
+import "@radix-ui/react-switch";
+import "@radix-ui/react-slot";
+import "@radix-ui/react-accordion";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-dialog";
+import "@radix-ui/react-label";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-tabs";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-popover";
+import "@radix-ui/react-menubar";
+import "@radix-ui/react-hover-card";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dropdown-menu";
+import "@radix-ui/react-separator";
+import "@radix-ui/react-toast";
+import "cmdk";
+import "@radix-ui/react-context-menu";
+import "react-icons-picker";
+import "flat-to-nested";
+import "redux-undo";
+import "i18next";
+import "react-textarea-autosize";
+import "@minoru/react-dnd-treeview";
+import "./lib.js";
+import "himalaya";
+import "./functions-JFP-oMsY.js";
+import "@mhsdesign/jit-browser-tailwindcss";
+import "@tailwindcss/forms";
+import "@tailwindcss/typography";
+import "@tailwindcss/aspect-ratio";
+import "@tailwindcss/line-clamp";
+import "./tailwind-config-d1VL1lzE.js";
+import "react-hotkeys-hook";
+import "sonner";
+import "lucide-react";
+const $n = () => {
+  const { undoCount: e, redoCount: t, undo: n, redo: s } = ke();
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ r.jsx(se, { disabled: !e, size: "sm", onClick: n, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(Ee, {}) }),
+    /* @__PURE__ */ r.jsx(se, { disabled: !t, onClick: s, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(Ee, { className: "rotate-180 scale-y-[-1] transform" }) })
+  ] });
+};
+function qn() {
+  const [e, t] = He(), { t: n } = Cn();
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ r.jsx(Nt, { htmlFor: "dark-mode-switch", children: n("dark_mode") }),
+    /* @__PURE__ */ r.jsxs(
+      Ft,
+      {
+        id: "dark-mode-switch",
+        checked: e,
+        onCheckedChange: () => {
+          t(!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__ */ r.jsx("span", { className: "sr-only", children: "Use setting" }),
+          /* @__PURE__ */ r.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 Oe = ({ landscape: e = !1 }) => /* @__PURE__ */ r.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__ */ r.jsx("g", { strokeWidth: 0 }),
+      /* @__PURE__ */ r.jsx("g", { strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ r.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"
+          }
+        }
+      )
+    ]
+  }
+), Ae = [
+  {
+    title: "Mobile (XS)",
+    content: "Styles set here are applied to all screen unless edited at higher breakpoint",
+    breakpoint: "xs",
+    icon: /* @__PURE__ */ r.jsx(Ie, {}),
+    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__ */ r.jsx(Ie, { className: "rotate-90" }),
+    width: 640
+  },
+  {
+    title: "Tablet (MD)",
+    content: "Styles set here are applied at 768px and up",
+    breakpoint: "md",
+    icon: /* @__PURE__ */ r.jsx(Oe, {}),
+    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__ */ r.jsx(Oe, { 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__ */ r.jsx(Dt, {}),
+    width: 1420
+  },
+  {
+    title: "Large Desktop (2XL)",
+    content: "Styles set here are applied at 1536px and up",
+    breakpoint: "2xl",
+    icon: /* @__PURE__ */ r.jsx(Bt, {}),
+    width: 1920
+  }
+], Un = ({
+  title: e,
+  content: t,
+  currentBreakpoint: n,
+  breakpoint: s,
+  width: a,
+  icon: o,
+  onClick: l
+}) => /* @__PURE__ */ r.jsxs(Wt, { children: [
+  /* @__PURE__ */ r.jsx($t, { asChild: !0, children: /* @__PURE__ */ r.jsx(
+    se,
+    {
+      onClick: () => l(a),
+      size: "sm",
+      variant: s === n ? "secondary" : "ghost",
+      children: o
+    }
+  ) }),
+  /* @__PURE__ */ r.jsx(qt, { className: "w-52 border-border", children: /* @__PURE__ */ r.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ r.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ r.jsx("h4", { className: "text-sm font-semibold", children: e }),
+    /* @__PURE__ */ r.jsx("p", { className: "text-xs", children: t })
+  ] }) }) })
+] }), Hn = () => {
+  const [, e, t] = we(), [n, s] = Ut(), a = (o) => {
+    n.includes(o) ? n.length > 2 && s(n.filter((l) => l !== o)) : s((l) => [...l, o]);
+  };
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
+    ne(
+      Ae.filter((o) => Se(n, ue(o.breakpoint))),
+      (o) => /* @__PURE__ */ vt(Un, { ...o, onClick: t, key: o.breakpoint, currentBreakpoint: e })
+    ),
+    /* @__PURE__ */ r.jsxs(Ht, { children: [
+      /* @__PURE__ */ r.jsx(zt, { asChild: !0, children: /* @__PURE__ */ r.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ r.jsx(Ot, { className: "scale-90 transform" }) }) }),
+      /* @__PURE__ */ r.jsxs(Yt, { className: "w-56 border-border text-xs", children: [
+        /* @__PURE__ */ r.jsx(Kt, { children: "Breakpoints" }),
+        /* @__PURE__ */ r.jsx(Vt, {}),
+        ne(Ae, (o) => /* @__PURE__ */ r.jsx(
+          Xt,
+          {
+            disabled: o.breakpoint === "xs",
+            onCheckedChange: () => a(ue(o.breakpoint)),
+            checked: Se(n, ue(o.breakpoint)),
+            children: o.title
+          },
+          o.breakpoint
+        ))
+      ] })
+    ] })
+  ] });
+}, zn = () => {
+  const [e] = Jt(), { createSnapshot: t } = ke(), [, n] = H(), [, s] = K(), a = Q(() => {
+    e([]), n([]), s([]), t();
+  }, [e, t]);
+  return /* @__PURE__ */ r.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ r.jsxs(Zt, { children: [
+    /* @__PURE__ */ r.jsx(Gt, { asChild: !0, children: /* @__PURE__ */ r.jsxs(se, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ r.jsx(At, {}),
+      " Clear"
+    ] }) }),
+    /* @__PURE__ */ r.jsxs(Qt, { className: "border-border", children: [
+      /* @__PURE__ */ r.jsxs(en, { children: [
+        /* @__PURE__ */ r.jsx(tn, { children: "Clear whole canvas?" }),
+        /* @__PURE__ */ r.jsx(nn, { children: "Are you sure you want to clear the whole canvas?" })
+      ] }),
+      /* @__PURE__ */ r.jsxs(rn, { children: [
+        /* @__PURE__ */ r.jsx(sn, { children: "Cancel" }),
+        /* @__PURE__ */ r.jsx(on, { onClick: a, children: "Yes" })
+      ] })
+    ] })
+  ] }) });
+}, Yn = () => {
+  const e = an("darkMode", !1), [t] = ze();
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex h-10 items-center justify-between border-b bg-background/70 px-2", children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex h-full space-x-2", children: [
+      e ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsx(qn, {}),
+        /* @__PURE__ */ r.jsx(te, { orientation: "vertical" })
+      ] }) : null,
+      /* @__PURE__ */ r.jsx(Hn, {}),
+      /* @__PURE__ */ r.jsx(te, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsxs("div", { className: "flex w-12 items-center justify-center gap-x-1 space-x-0 font-medium", children: [
+        /* @__PURE__ */ r.jsx(Pt, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+        " ",
+        /* @__PURE__ */ r.jsxs("div", { className: "text-xs leading-3", children: [
+          wt(t, 0),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ r.jsx(te, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx($n, {})
+    ] }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
+      /* @__PURE__ */ r.jsx(te, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx(zn, {})
+    ] })
+  ] });
+}, Kn = `<!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;}
+    .dragging [data-dnd="leaf"] { pointer-events: none; } .dragging [data-dnd="leaf"] * { pointer-events: none; }
+    .dragging [data-dnd="ignore"], .dragging [data-dnd="ignore"] * { pointer-events: none; }
+    a{ pointer-events: none !important; }
+    [contenteditable="true"], [contenteditable="true"] * { cursor: text !important; }
+    [contenteditable="true"] {
+        outline: none;
+        box-shadow: 0 0 0px 4px rgba(36, 150, 255, 0.2);
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        user-select: text;
+    }
+    </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>
+    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
+  </body>
+</html>`, Vn = (e) => {
+  const [t] = we(), [, n] = ze(), [s, a] = $({}), o = Q(() => {
+    const { width: l, height: c } = e;
+    if (l < t) {
+      const d = parseFloat((l / t).toString());
+      let p = {};
+      c && (p = { height: c + 2 * c * (1 - d) }), a({
+        transform: `scale(${d})`,
+        transformOrigin: "top left",
+        ...p,
+        maxWidth: "none"
+      }), n(d * 100);
+    } else
+      a({}), n(100);
+  }, [t, e, n]);
+  return L(() => {
+    o();
+  }, [t, e, n, o]), s;
+};
+var oe = { exports: {} };
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+var pe, Pe;
+function Xn() {
+  if (Pe)
+    return pe;
+  Pe = 1;
+  var e = Object.getOwnPropertySymbols, t = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+  function s(o) {
+    if (o == null)
+      throw new TypeError("Object.assign cannot be called with null or undefined");
+    return Object(o);
+  }
+  function a() {
+    try {
+      if (!Object.assign)
+        return !1;
+      var o = new String("abc");
+      if (o[5] = "de", Object.getOwnPropertyNames(o)[0] === "5")
+        return !1;
+      for (var l = {}, c = 0; c < 10; c++)
+        l["_" + String.fromCharCode(c)] = c;
+      var d = Object.getOwnPropertyNames(l).map(function(h) {
+        return l[h];
+      });
+      if (d.join("") !== "0123456789")
+        return !1;
+      var p = {};
+      return "abcdefghijklmnopqrst".split("").forEach(function(h) {
+        p[h] = h;
+      }), Object.keys(Object.assign({}, p)).join("") === "abcdefghijklmnopqrst";
+    } catch {
+      return !1;
+    }
+  }
+  return pe = a() ? Object.assign : function(o, l) {
+    for (var c, d = s(o), p, h = 1; h < arguments.length; h++) {
+      c = Object(arguments[h]);
+      for (var f in c)
+        t.call(c, f) && (d[f] = c[f]);
+      if (e) {
+        p = e(c);
+        for (var w = 0; w < p.length; w++)
+          n.call(c, p[w]) && (d[p[w]] = c[p[w]]);
+      }
+    }
+    return d;
+  }, pe;
+}
+var fe, Re;
+function je() {
+  if (Re)
+    return fe;
+  Re = 1;
+  var e = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
+  return fe = e, fe;
+}
+var he, Le;
+function Qe() {
+  return Le || (Le = 1, he = Function.call.bind(Object.prototype.hasOwnProperty)), he;
+}
+var ge, _e;
+function Jn() {
+  if (_e)
+    return ge;
+  _e = 1;
+  var e = function() {
+  };
+  if (process.env.NODE_ENV !== "production") {
+    var t = je(), n = {}, s = Qe();
+    e = function(o) {
+      var l = "Warning: " + o;
+      typeof console < "u" && console.error(l);
+      try {
+        throw new Error(l);
+      } catch {
+      }
+    };
+  }
+  function a(o, l, c, d, p) {
+    if (process.env.NODE_ENV !== "production") {
+      for (var h in o)
+        if (s(o, h)) {
+          var f;
+          try {
+            if (typeof o[h] != "function") {
+              var w = Error(
+                (d || "React class") + ": " + c + " type `" + h + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof o[h] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+              );
+              throw w.name = "Invariant Violation", w;
+            }
+            f = o[h](l, h, d, c, null, t);
+          } catch (O) {
+            f = O;
+          }
+          if (f && !(f instanceof Error) && e(
+            (d || "React class") + ": type specification of " + c + " `" + h + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof f + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
+          ), f instanceof Error && !(f.message in n)) {
+            n[f.message] = !0;
+            var j = p ? p() : "";
+            e(
+              "Failed " + c + " type: " + f.message + (j ?? "")
+            );
+          }
+        }
+    }
+  }
+  return a.resetWarningCache = function() {
+    process.env.NODE_ENV !== "production" && (n = {});
+  }, ge = a, ge;
+}
+var me, Me;
+function Zn() {
+  if (Me)
+    return me;
+  Me = 1;
+  var e = Ge, t = Xn(), n = je(), s = Qe(), a = Jn(), o = function() {
+  };
+  process.env.NODE_ENV !== "production" && (o = function(c) {
+    var d = "Warning: " + c;
+    typeof console < "u" && console.error(d);
+    try {
+      throw new Error(d);
+    } catch {
+    }
+  });
+  function l() {
+    return null;
+  }
+  return me = function(c, d) {
+    var p = typeof Symbol == "function" && Symbol.iterator, h = "@@iterator";
+    function f(i) {
+      var u = i && (p && i[p] || i[h]);
+      if (typeof u == "function")
+        return u;
+    }
+    var w = "<<anonymous>>", j = {
+      array: m("array"),
+      bigint: m("bigint"),
+      bool: m("boolean"),
+      func: m("function"),
+      number: m("number"),
+      object: m("object"),
+      string: m("string"),
+      symbol: m("symbol"),
+      any: V(),
+      arrayOf: _,
+      element: ce(),
+      elementType: de(),
+      instanceOf: D,
+      node: dt(),
+      objectOf: N,
+      oneOf: M,
+      oneOfType: ct,
+      shape: ut,
+      exact: pt
+    };
+    function O(i, u) {
+      return i === u ? i !== 0 || 1 / i === 1 / u : i !== i && u !== u;
+    }
+    function b(i, u) {
+      this.message = i, this.data = u && typeof u == "object" ? u : {}, this.stack = "";
+    }
+    b.prototype = Error.prototype;
+    function E(i) {
+      if (process.env.NODE_ENV !== "production")
+        var u = {}, k = 0;
+      function v(C, y, x, T, I, S, R) {
+        if (T = T || w, S = S || x, R !== n) {
+          if (d) {
+            var A = 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 A.name = "Invariant Violation", A;
+          } else if (process.env.NODE_ENV !== "production" && typeof console < "u") {
+            var X = T + ":" + x;
+            !u[X] && // Avoid spamming the console because they are often not actionable except for lib authors
+            k < 3 && (o(
+              "You are manually calling a React.PropTypes validation function for the `" + S + "` prop on `" + T + "`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."
+            ), u[X] = !0, k++);
+          }
+        }
+        return y[x] == null ? C ? y[x] === null ? new b("The " + I + " `" + S + "` is marked as required " + ("in `" + T + "`, but its value is `null`.")) : new b("The " + I + " `" + S + "` is marked as required in " + ("`" + T + "`, but its value is `undefined`.")) : null : i(y, x, T, I, S);
+      }
+      var g = v.bind(null, !1);
+      return g.isRequired = v.bind(null, !0), g;
+    }
+    function m(i) {
+      function u(k, v, g, C, y, x) {
+        var T = k[v], I = W(T);
+        if (I !== i) {
+          var S = Z(T);
+          return new b(
+            "Invalid " + C + " `" + y + "` of type " + ("`" + S + "` supplied to `" + g + "`, expected ") + ("`" + i + "`."),
+            { expectedType: i }
+          );
+        }
+        return null;
+      }
+      return E(u);
+    }
+    function V() {
+      return E(l);
+    }
+    function _(i) {
+      function u(k, v, g, C, y) {
+        if (typeof i != "function")
+          return new b("Property `" + y + "` of component `" + g + "` has invalid PropType notation inside arrayOf.");
+        var x = k[v];
+        if (!Array.isArray(x)) {
+          var T = W(x);
+          return new b("Invalid " + C + " `" + y + "` of type " + ("`" + T + "` supplied to `" + g + "`, expected an array."));
+        }
+        for (var I = 0; I < x.length; I++) {
+          var S = i(x, I, g, C, y + "[" + I + "]", n);
+          if (S instanceof Error)
+            return S;
+        }
+        return null;
+      }
+      return E(u);
+    }
+    function ce() {
+      function i(u, k, v, g, C) {
+        var y = u[k];
+        if (!c(y)) {
+          var x = W(y);
+          return new b("Invalid " + g + " `" + C + "` of type " + ("`" + x + "` supplied to `" + v + "`, expected a single ReactElement."));
+        }
+        return null;
+      }
+      return E(i);
+    }
+    function de() {
+      function i(u, k, v, g, C) {
+        var y = u[k];
+        if (!e.isValidElementType(y)) {
+          var x = W(y);
+          return new b("Invalid " + g + " `" + C + "` of type " + ("`" + x + "` supplied to `" + v + "`, expected a single ReactElement type."));
+        }
+        return null;
+      }
+      return E(i);
+    }
+    function D(i) {
+      function u(k, v, g, C, y) {
+        if (!(k[v] instanceof i)) {
+          var x = i.name || w, T = gt(k[v]);
+          return new b("Invalid " + C + " `" + y + "` of type " + ("`" + T + "` supplied to `" + g + "`, expected ") + ("instance of `" + x + "`."));
+        }
+        return null;
+      }
+      return E(u);
+    }
+    function M(i) {
+      if (!Array.isArray(i))
+        return process.env.NODE_ENV !== "production" && (arguments.length > 1 ? o(
+          "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])."
+        ) : o("Invalid argument supplied to oneOf, expected an array.")), l;
+      function u(k, v, g, C, y) {
+        for (var x = k[v], T = 0; T < i.length; T++)
+          if (O(x, i[T]))
+            return null;
+        var I = JSON.stringify(i, function(R, A) {
+          var X = Z(A);
+          return X === "symbol" ? String(A) : A;
+        });
+        return new b("Invalid " + C + " `" + y + "` of value `" + String(x) + "` " + ("supplied to `" + g + "`, expected one of " + I + "."));
+      }
+      return E(u);
+    }
+    function N(i) {
+      function u(k, v, g, C, y) {
+        if (typeof i != "function")
+          return new b("Property `" + y + "` of component `" + g + "` has invalid PropType notation inside objectOf.");
+        var x = k[v], T = W(x);
+        if (T !== "object")
+          return new b("Invalid " + C + " `" + y + "` of type " + ("`" + T + "` supplied to `" + g + "`, expected an object."));
+        for (var I in x)
+          if (s(x, I)) {
+            var S = i(x, I, g, C, y + "." + I, n);
+            if (S instanceof Error)
+              return S;
+          }
+        return null;
+      }
+      return E(u);
+    }
+    function ct(i) {
+      if (!Array.isArray(i))
+        return process.env.NODE_ENV !== "production" && o("Invalid argument supplied to oneOfType, expected an instance of array."), l;
+      for (var u = 0; u < i.length; u++) {
+        var k = i[u];
+        if (typeof k != "function")
+          return o(
+            "Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + ht(k) + " at index " + u + "."
+          ), l;
+      }
+      function v(g, C, y, x, T) {
+        for (var I = [], S = 0; S < i.length; S++) {
+          var R = i[S], A = R(g, C, y, x, T, n);
+          if (A == null)
+            return null;
+          A.data && s(A.data, "expectedType") && I.push(A.data.expectedType);
+        }
+        var X = I.length > 0 ? ", expected one of type [" + I.join(", ") + "]" : "";
+        return new b("Invalid " + x + " `" + T + "` supplied to " + ("`" + y + "`" + X + "."));
+      }
+      return E(v);
+    }
+    function dt() {
+      function i(u, k, v, g, C) {
+        return ee(u[k]) ? null : new b("Invalid " + g + " `" + C + "` supplied to " + ("`" + v + "`, expected a ReactNode."));
+      }
+      return E(i);
+    }
+    function Ce(i, u, k, v, g) {
+      return new b(
+        (i || "React class") + ": " + u + " type `" + k + "." + v + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + g + "`."
+      );
+    }
+    function ut(i) {
+      function u(k, v, g, C, y) {
+        var x = k[v], T = W(x);
+        if (T !== "object")
+          return new b("Invalid " + C + " `" + y + "` of type `" + T + "` " + ("supplied to `" + g + "`, expected `object`."));
+        for (var I in i) {
+          var S = i[I];
+          if (typeof S != "function")
+            return Ce(g, C, y, I, Z(S));
+          var R = S(x, I, g, C, y + "." + I, n);
+          if (R)
+            return R;
+        }
+        return null;
+      }
+      return E(u);
+    }
+    function pt(i) {
+      function u(k, v, g, C, y) {
+        var x = k[v], T = W(x);
+        if (T !== "object")
+          return new b("Invalid " + C + " `" + y + "` of type `" + T + "` " + ("supplied to `" + g + "`, expected `object`."));
+        var I = t({}, k[v], i);
+        for (var S in I) {
+          var R = i[S];
+          if (s(i, S) && typeof R != "function")
+            return Ce(g, C, y, S, Z(R));
+          if (!R)
+            return new b(
+              "Invalid " + C + " `" + y + "` key `" + S + "` supplied to `" + g + "`.\nBad object: " + JSON.stringify(k[v], null, "  ") + `
+Valid keys: ` + JSON.stringify(Object.keys(i), null, "  ")
+            );
+          var A = R(x, S, g, C, y + "." + S, n);
+          if (A)
+            return A;
+        }
+        return null;
+      }
+      return E(u);
+    }
+    function ee(i) {
+      switch (typeof i) {
+        case "number":
+        case "string":
+        case "undefined":
+          return !0;
+        case "boolean":
+          return !i;
+        case "object":
+          if (Array.isArray(i))
+            return i.every(ee);
+          if (i === null || c(i))
+            return !0;
+          var u = f(i);
+          if (u) {
+            var k = u.call(i), v;
+            if (u !== i.entries) {
+              for (; !(v = k.next()).done; )
+                if (!ee(v.value))
+                  return !1;
+            } else
+              for (; !(v = k.next()).done; ) {
+                var g = v.value;
+                if (g && !ee(g[1]))
+                  return !1;
+              }
+          } else
+            return !1;
+          return !0;
+        default:
+          return !1;
+      }
+    }
+    function ft(i, u) {
+      return i === "symbol" ? !0 : u ? u["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && u instanceof Symbol : !1;
+    }
+    function W(i) {
+      var u = typeof i;
+      return Array.isArray(i) ? "array" : i instanceof RegExp ? "object" : ft(u, i) ? "symbol" : u;
+    }
+    function Z(i) {
+      if (typeof i > "u" || i === null)
+        return "" + i;
+      var u = W(i);
+      if (u === "object") {
+        if (i instanceof Date)
+          return "date";
+        if (i instanceof RegExp)
+          return "regexp";
+      }
+      return u;
+    }
+    function ht(i) {
+      var u = Z(i);
+      switch (u) {
+        case "array":
+        case "object":
+          return "an " + u;
+        case "boolean":
+        case "date":
+        case "regexp":
+          return "a " + u;
+        default:
+          return u;
+      }
+    }
+    function gt(i) {
+      return !i.constructor || !i.constructor.name ? w : i.constructor.name;
+    }
+    return j.checkPropTypes = a, j.resetWarningCache = a.resetWarningCache, j.PropTypes = j, j;
+  }, me;
+}
+var ye, Ne;
+function Gn() {
+  if (Ne)
+    return ye;
+  Ne = 1;
+  var e = je();
+  function t() {
+  }
+  function n() {
+  }
+  return n.resetWarningCache = t, ye = function() {
+    function s(l, c, d, p, h, f) {
+      if (f !== e) {
+        var w = 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 w.name = "Invariant Violation", w;
+      }
+    }
+    s.isRequired = s;
+    function a() {
+      return s;
+    }
+    var o = {
+      array: s,
+      bigint: s,
+      bool: s,
+      func: s,
+      number: s,
+      object: s,
+      string: s,
+      symbol: s,
+      any: s,
+      arrayOf: a,
+      element: s,
+      elementType: s,
+      instanceOf: a,
+      node: s,
+      objectOf: a,
+      oneOf: a,
+      oneOfType: a,
+      shape: a,
+      exact: a,
+      checkPropTypes: n,
+      resetWarningCache: t
+    };
+    return o.PropTypes = o, o;
+  }, ye;
+}
+var Ps = oe.exports;
+if (process.env.NODE_ENV !== "production") {
+  var Qn = Ge, er = !0;
+  oe.exports = Zn()(Qn.isElement, er);
+} else
+  oe.exports = Gn()();
+var tr = oe.exports;
+const P = /* @__PURE__ */ Tn(tr);
+let et, tt;
+typeof document < "u" && (et = document);
+typeof window < "u" && (tt = window);
+const nt = Y.createContext({ document: et, window: tt }), le = () => Y.useContext(nt), { Provider: nr, Consumer: Rs } = nt;
+class rt extends $e {
+  componentDidMount() {
+    this.props.contentDidMount();
+  }
+  componentDidUpdate() {
+    this.props.contentDidUpdate();
+  }
+  render() {
+    return xt.only(this.props.children);
+  }
+}
+z(rt, "propTypes", {
+  children: P.element.isRequired,
+  contentDidMount: P.func.isRequired,
+  contentDidUpdate: P.func.isRequired
+});
+class ve extends $e {
+  constructor(n, s) {
+    super(n, s);
+    z(this, "setRef", (n) => {
+      this.nodeRef.current = n;
+      const { forwardedRef: s } = this.props;
+      typeof s == "function" ? s(n) : s && (s.current = n);
+    });
+    z(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
+    z(this, "loadCheck", () => setInterval(() => {
+      this.handleLoad();
+    }, 500));
+    this._isMounted = !1, this.nodeRef = Y.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 n = this.getDoc();
+    return this.props.mountTarget ? n.querySelector(this.props.mountTarget) : n.body.children[0];
+  }
+  renderFrameContents() {
+    if (!this._isMounted)
+      return null;
+    const n = this.getDoc();
+    if (!n)
+      return null;
+    const s = this.props.contentDidMount, a = this.props.contentDidUpdate, o = n.defaultView || n.parentView, l = /* @__PURE__ */ r.jsx(rt, { contentDidMount: s, contentDidUpdate: a, children: /* @__PURE__ */ r.jsx(nr, { value: { document: n, window: o }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), c = this.getMountTarget();
+    return [De.createPortal(this.props.head, this.getDoc().head), De.createPortal(l, c)];
+  }
+  render() {
+    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 n.head, delete n.initialContent, delete n.mountTarget, delete n.contentDidMount, delete n.contentDidUpdate, delete n.forwardedRef, /* @__PURE__ */ r.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
+// 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.
+z(ve, "propTypes", {
+  style: P.object,
+  // eslint-disable-line
+  head: P.node,
+  initialContent: P.string,
+  mountTarget: P.string,
+  contentDidMount: P.func,
+  contentDidUpdate: P.func,
+  children: P.oneOfType([P.element, P.arrayOf(P.element)])
+}), z(ve, "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 rr = Y.forwardRef((e, t) => /* @__PURE__ */ r.jsx(ve, { ...e, forwardedRef: t }));
+let q = null, J = [], st = null;
+function ot(e) {
+  const t = window.getComputedStyle(e), n = parseInt(t.paddingLeft, 10), s = parseInt(t.paddingTop, 10), a = parseInt(t.paddingRight, 10), o = parseInt(t.paddingBottom, 10);
+  return { paddingLeft: n, paddingTop: s, paddingRight: a, paddingBottom: o };
+}
+const Fe = (e, t, n) => {
+  if (!q)
+    return;
+  const s = e.getBoundingClientRect(), a = q == null ? void 0 : q.getElementById("placeholder"), { paddingLeft: o, paddingTop: l, paddingRight: c, paddingBottom: d } = ot(e);
+  a.style.width = t === "vertical" ? s.width - o - c + "px" : "2px", a.style.height = t === "vertical" ? "5px" : s.height - l - d + "px", a.style.display = "block";
+  const p = J.reduce(
+    (h, f) => Math.abs(f - n) < Math.abs(h - n) ? f : h
+  );
+  st = J.indexOf(p), a.style.top = e.offsetTop + (t === "vertical" ? p : 0) + "px", a.style.left = e.offsetLeft + (t === "horizontal" ? p : 0) + "px";
+}, sr = (e) => {
+  const t = it(e), n = e.getBoundingClientRect(), s = Array.from(e.children);
+  s.filter((l) => l.getAttribute("data-dnd") !== "ignore");
+  const { paddingLeft: a, paddingTop: o } = ot(e);
+  J = [t === "vertical" ? a : o], J = [
+    ...J,
+    ...s.map((l) => {
+      const c = l.getBoundingClientRect();
+      return t === "vertical" ? c.top - n.top + c.height : c.left - n.left + c.width;
+    })
+  ];
+};
+function it(e) {
+  const t = window.getComputedStyle(e).display, n = t === "block" ? "vertical" : "horizontal";
+  return t === "flex" && e.style.flexDirection === "column" ? "vertical" : n;
+}
+const or = jt((e) => {
+  const t = e.target, n = it(t);
+  if (n === "vertical") {
+    const s = e.clientY - t.offsetTop;
+    Fe(t, n, s);
+  } else {
+    const s = e.clientX - t.offsetLeft;
+    Fe(t, n, s);
+  }
+}, 200), ir = (e) => {
+  e.preventDefault(), e.stopPropagation(), or(e);
+};
+function We() {
+  const e = q == null ? void 0 : q.getElementById("placeholder");
+  e.style.display = "none";
+}
+const ar = () => {
+  const { document: e } = le(), [t, n] = F(ln), s = Bn(), a = On("dnd");
+  return q = e, {
+    isDragging: t,
+    "data-dnd": "branch",
+    onDragOver: a ? ir : G,
+    onDrop: a ? (o) => {
+      const l = JSON.parse(o.dataTransfer.getData("text/plain"));
+      let c = o.target.getAttribute("data-block-id");
+      c === null && (c = o.target.parentElement.getAttribute("data-block-id")), s({ block: l, dropTargetId: c || null, relativeIndex: st }), n(!1), setTimeout(() => We(), 300);
+    } : G,
+    onDragEnter: a ? (o) => {
+      const l = o;
+      l.stopPropagation(), l.preventDefault(), J = [];
+      const c = l.target;
+      sr(c), c.classList.add("outline", "outline-blue-500", "outline-4", "-outline-offset-4"), n(!0);
+    } : G,
+    onDragLeave: a ? (o) => {
+      const l = o;
+      l.stopPropagation(), l.preventDefault(), l.target.classList.remove("outline", "outline-blue-500", "outline-4", "-outline-offset-4");
+    } : G,
+    onMouseOut: a ? () => {
+      n(!1), We();
+    } : G
+  };
+};
+function at(e) {
+  return e.getAttribute("data-block-id") ? e : e.closest("[data-block-id]");
+}
+function lr(e) {
+  e.container.innerHTML = "", e.container.parentNode.removeChild(e.container);
+  var t = document.querySelector(".ql-toolbar");
+  t && t.parentNode.removeChild(t), e = null;
+}
+const cr = () => {
+  const e = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], t = cn(), [, n] = H(), [, s] = ie(), [a, o] = F(ae);
+  return (l) => {
+    var w;
+    if (a)
+      return;
+    const c = at(l.target), d = c.getAttribute("data-block-type");
+    if (!d || !e.includes(d))
+      return;
+    o(c.getAttribute("data-block-id"));
+    const p = c.cloneNode(!0);
+    c.style.display = "none", Array.from(p.attributes).forEach((j) => {
+      j.name !== "class" && p.removeAttribute(j.name);
+    }), d === "Text" && (p.style.display = "inline-block"), c.parentNode.insertBefore(p, c.nextSibling);
+    const h = new Dn(p);
+    function f() {
+      const j = h.getText(0, h.getLength());
+      t([c.getAttribute("data-block-id")], { content: j }), c.removeAttribute("style"), p.removeEventListener("blur", f, !0), lr(h), o(""), s("");
+    }
+    p.addEventListener("blur", f, !0), h.focus(), (w = p.querySelector(".ql-clipboard")) == null || w.remove(), n([]);
+  };
+}, dr = () => {
+  const [, e] = K(), [, t] = H(), [n] = F(ae);
+  return (s) => {
+    if (n)
+      return;
+    s.stopPropagation();
+    const a = at(s.target);
+    if (a.getAttribute("data-block-parent")) {
+      const o = a.getAttribute("data-style-prop"), l = a.getAttribute("data-style-id"), c = a.getAttribute("data-block-parent");
+      e([{ id: l, prop: o, blockId: c }]), t([c]);
+    } else
+      a.getAttribute("data-block-id") && t([a.getAttribute("data-block-id")]);
+  };
+}, ur = ({ children: e }) => {
+  const { document: t } = le(), [n] = H(), [s, a] = K();
+  L(() => {
+    setTimeout(() => {
+      if (!U(s))
+        return;
+      const d = lt(t, re(n));
+      if (d) {
+        const p = d.getAttribute("data-style-prop");
+        if (p) {
+          const h = d.getAttribute("data-style-id"), f = d.getAttribute("data-block-parent");
+          a([{ id: h, prop: p, blockId: f }]);
+        }
+      }
+    }, 100);
+  }, [t, n, a, s]);
+  const o = cr(), l = dr(), c = ar();
+  return /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      id: "canvas",
+      onClick: l,
+      onDoubleClick: o,
+      ...Ct(c, "isDragging"),
+      className: "relative h-screen max-w-full " + (c.isDragging ? "dragging" : ""),
+      children: e
+    }
+  );
+}, lt = (e, t) => e.querySelector(`[data-block-id="${t}"]`), pr = () => {
+  const { window: e } = le(), [t, n] = H(), [, s] = K(), { undo: a, redo: o } = ke(), l = Ye(), [, c] = dn(), [, d] = un(), { pasteBlocks: p } = pn(), [, h] = Ke(), f = Ve(), { savePage: w } = fn(), [j] = F(ae), [, O] = F(hn), b = (E) => {
+    E.key === "Enter" && (E.preventDefault(), t.length === 1 && O(re(t)));
+  };
+  return L(() => {
+    const E = (m) => {
+      if (m.key === "Escape") {
+        n([]), s([]);
+        return;
+      }
+      if (b(m), !j && (m.key === "Delete" || m.key === "Backspace") && (m.preventDefault(), f(t)), m.ctrlKey || m.metaKey) {
+        if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(m.key)) {
+          if (j && ["x", "z", "v"].includes(m.key))
+            return !0;
+          m.preventDefault();
+        }
+        m.key === "s" && (m.stopPropagation(), m.preventDefault(), w()), m.key === "z" && a(), m.key === "y" && o(), m.key === "d" && l(t), m.key === "x" && c(t), m.key === "c" && d(t), m.key === "v" && t.length > 0 && p(t[0]);
+      }
+    };
+    return e.removeEventListener("keydown", E), e.addEventListener("keydown", E), () => {
+      e.removeEventListener("keydown", E);
+    };
+  }, [
+    t,
+    n,
+    a,
+    f,
+    h,
+    o,
+    l,
+    c,
+    d,
+    p,
+    j,
+    w,
+    e
+  ]), null;
+}, fr = ({ block: e, label: t }) => {
+  const [, n] = Ln(() => ({
+    type: "CANVAS_BLOCK",
+    item: e
+  }));
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
+      ref: n,
+      onDragStart: () => {
+        console.log("drag start");
+      },
+      children: [
+        /* @__PURE__ */ r.jsx(Rt, {}),
+        t
+      ]
+    }
+  );
+}, hr = ({ selectedBlockElement: e, block: t }) => {
+  const n = Ve(), s = Ye(), [, a] = H(), [, o] = K(), { floatingStyles: l, refs: c, update: d } = Pn({
+    placement: "top-start",
+    middleware: [Rn(), An()],
+    elements: {
+      reference: e
+    }
+  });
+  _n(e, () => d(), e !== null);
+  const p = B(t, "_parent", null), h = U(B(t, "_name", "")) ? B(t, "_type", "") : B(t, "_name", "");
+  return !e || !t ? null : /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      ref: c.setFloating,
+      style: l,
+      onClick: (f) => {
+        f.stopPropagation(), f.preventDefault();
+      },
+      onKeyDown: (f) => f.stopPropagation(),
+      className: "z-50 flex h-6 items-center bg-blue-500  py-2 text-xs text-white",
+      children: [
+        /* @__PURE__ */ r.jsx(fr, { label: h, block: t }),
+        /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 px-1 ", children: [
+          p && /* @__PURE__ */ r.jsx(
+            Lt,
+            {
+              className: "hover:scale-105 ",
+              onClick: () => {
+                o([]), a([p]);
+              }
+            }
+          ),
+          gn(B(t, "_type", "")) ? /* @__PURE__ */ r.jsx(_t, { className: "hover:scale-105 ", onClick: () => s([t == null ? void 0 : t._id]) }) : null,
+          mn(B(t, "_type", "")) ? /* @__PURE__ */ r.jsx(Mt, { className: "hover:scale-105 ", onClick: () => n([t == null ? void 0 : t._id]) }) : null
+        ] })
+      ]
+    }
+  );
+}, gr = ({ model: e }) => {
+  const [t] = yn(), [n] = H(), [s] = He(), [a] = ie(), [o] = K(), { document: l, window: c } = le(), [d] = $(l == null ? void 0 : l.getElementById("highlighted-block")), [p] = $(
+    l == null ? void 0 : l.getElementById("selected-block")
+  ), [h] = $(
+    l == null ? void 0 : l.getElementById("selected-styling-block")
+  );
+  L(() => {
+    s ? l == null || l.documentElement.classList.add("dark") : l == null || l.documentElement.classList.remove("dark");
+  }, [s, l]);
+  const f = B(t, "headingFont", "DM Sans"), w = B(t, "bodyFont", "DM Sans");
+  return L(() => {
+    const j = B(t, "primaryColor", "#000"), O = B(t, "secondaryColor", "#FFF"), b = Mn({
+      colors: [j, O],
+      names: ["primary", "secondary"]
+    });
+    b.primary.DEFAULT = j, b.secondary.DEFAULT = O;
+    const E = B(t, "roundedCorners", "0");
+    !c || !c.tailwind || (c.tailwind.config = {
+      darkMode: "class",
+      theme: {
+        fontFamily: {
+          heading: [f],
+          body: [w]
+        },
+        extend: {
+          borderRadius: {
+            global: `${E || "0"}px`
+          },
+          colors: b
+        }
+      },
+      plugins: [
+        // @ts-ignore
+        c.tailwind.plugin.withOptions(({ prefix: m = "ui" } = {}) => ({ addVariant: V }) => {
+          for (const _ of ["open", "checked", "selected", "active", "disabled"])
+            V(`${m}-${_}`, [
+              `&[data-headlessui-state~="${_}"]`,
+              `:where([data-headlessui-state~="${_}"]) &`
+            ]), V(`${m}-not-${_}`, [
+              `&[data-headlessui-state]:not([data-headlessui-state~="${_}"])`,
+              `:where([data-headlessui-state]:not([data-headlessui-state~="${_}"])) &:not([data-headlessui-state])`
+            ]);
+        })
+      ]
+    });
+  }, [t, c, f, w]), L(() => {
+    p && (p.textContent = `${ne(n, (j) => `[data-block-id="${j}"]`).join(",")}{
+                outline: 1px solid ${n.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
+            }`);
+  }, [n, p]), L(() => {
+    d && (d.textContent = a ? `[data-style-id="${a}"]{ outline: 1px solid orange !important; outline-offset: -1px;}` : "");
+  }, [a, n, d]), L(() => {
+    h && (h.textContent = `${ne(o, ({ id: j }) => `[data-style-id="${j}"]`).join(",")}{
+                outline: 1px solid orange !important; outline-offset: -1px;
+            }`);
+  }, [o, h]), L(() => {
+    if (e === "section")
+      return;
+    const j = B(t, "bodyTextLightColor", "#64748b"), O = B(t, "bodyTextDarkColor", "#94a3b8"), b = B(t, "bodyBgLightColor", "#FFFFFF"), E = B(t, "bodyBgDarkColor", "#0f172a");
+    l.body.className = `font-body antialiased text-[${j}] bg-[${b}] dark:text-[${O}] dark:bg-[${E}]`;
+  }, [t, l, e]), e === "page" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    f && /* @__PURE__ */ r.jsx(
+      "link",
+      {
+        id: "heading-font",
+        rel: "stylesheet",
+        type: "text/css",
+        href: `https://fonts.googleapis.com/css2?family=${f.replace(
+          / /g,
+          "+"
+        )}:wght@300;400;500;600;700;800;900&display=swap`,
+        media: "all"
+      }
+    ),
+    w && f !== w && /* @__PURE__ */ r.jsx(
+      "link",
+      {
+        id: "body-font",
+        rel: "stylesheet",
+        type: "text/css",
+        href: `https://fonts.googleapis.com/css2?family=${w.replace(
+          / /g,
+          "+"
+        )}:wght@300;400;500;600;700;800;900&display=swap`,
+        media: "all"
+      }
+    ),
+    f && /* @__PURE__ */ r.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${f}",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;
+}, mr = (e) => {
+  const t = {};
+  return Object.keys(e).forEach((n) => {
+    be(e[n]) && e[n].startsWith(Be) && (t[n] = e[n].replace(Be, "").split(","));
+  }), t;
+}, yr = Tt((e) => {
+  const t = e.replace(Ze, "").split(",");
+  return Fn(t[0], t[1]);
+});
+function vr(e, t) {
+  return B(e, `${t}_attrs`, {});
+}
+function xr(e, t, n) {
+  const s = {};
+  return Object.keys(e).forEach((a) => {
+    if (be(e[a]) && e[a].startsWith(Ze)) {
+      const o = yr(e[a]);
+      s[a] = {
+        className: o,
+        "data-style-prop": a,
+        "data-block-parent": e._id,
+        "data-style-id": `${a}-${e._id}`,
+        onMouseEnter: t,
+        onMouseLeave: n,
+        ...vr(e, a)
+      };
+    }
+  }), s;
+}
+function br(e, t) {
+  const n = B(e, "_bindings", {});
+  return U(n) ? { ...e } : (St(n, (s, a) => {
+    be(s) && B(t, s, null) && (e[a] = B(t, s, null));
+  }), e);
+}
+function xe({ blocks: e }) {
+  const t = Xe(), [, n] = ie(), [s] = F(ae), a = Q(
+    (d) => {
+      var h;
+      if (s)
+        return;
+      const p = (h = d.currentTarget) == null ? void 0 : h.getAttribute("data-style-id");
+      n(p || ""), d.stopPropagation();
+    },
+    [n, s]
+  ), o = Q(
+    (d) => {
+      s || (n(""), d.stopPropagation());
+    },
+    [n, s]
+  ), l = Q(
+    (d) => xr(d, a, o),
+    [a, o]
+  ), [c] = Sn();
+  return /* @__PURE__ */ r.jsx(r.Fragment, { children: Y.Children.toArray(
+    e.map((d, p) => {
+      const h = mr(d), f = {};
+      U(h) || Object.keys(h).forEach((b) => {
+        f[b] = Y.Children.toArray(
+          h[b].map((E) => /* @__PURE__ */ r.jsx(xe, { blocks: [Et(t, { _id: E })] }))
+        );
+      });
+      const w = Ue(t, { _parent: d._id });
+      f.children = w.length ? /* @__PURE__ */ r.jsx(xe, { blocks: w }) : null;
+      const j = Wn(d._type), O = B(j, "component", null);
+      return It(O) ? /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${d == null ? void 0 : d._type} not registered -->` }) : /* @__PURE__ */ r.jsx(qe, { children: Y.createElement(O, {
+        blockProps: {
+          "data-block-id": d._id,
+          "data-block-type": d._type,
+          "data-dnd": vn(d._type) ? "branch" : "leaf"
+        },
+        inBuilder: !0,
+        index: p,
+        ...br(d, c),
+        ...l(d),
+        ...f
+      }) });
+    })
+  ) });
+}
+const kr = () => {
+  const e = Xe();
+  return /* @__PURE__ */ r.jsx(Nn, { children: U(e) ? null : /* @__PURE__ */ r.jsx(En, { children: /* @__PURE__ */ r.jsx(xe, { blocks: Ue(e, (t) => U(t._parent)) }) }) });
+}, wr = (e, t) => e.querySelector(`[data-style-id="${t}"]`), jr = () => {
+  const [e] = F(xn), [t] = Ke(), [n] = we(), [, s] = H(), a = bn(), [, o] = ie(), l = Te(null), c = Te(null), [d, p] = $({ width: 0, height: 0 }), h = Vn(d), [f, w] = $(0), [j, O] = $([]), [, b] = $([]), [, E] = F(kn), [m, V] = K(), _ = wn("loadingCanvas", !1);
+  L(() => {
+    const { clientWidth: D, clientHeight: M } = c.current;
+    p({ width: D, height: M }), f === 0 && w(D);
+  }, [c, n, f]);
+  const ce = (D, M = 0) => {
+    const { top: N } = D.getBoundingClientRect();
+    return N + M >= 0 && N - M <= window.innerHeight;
+  };
+  L(() => {
+    var D, M;
+    if (a && a.type !== "Multiple" && l.current) {
+      const N = lt(l.current.contentDocument, a._id);
+      N && (ce(N) || (M = (D = l.current) == null ? void 0 : D.contentWindow) == null || M.scrollTo({ top: N.offsetTop, behavior: "smooth" }), O([N]));
+    }
+  }, [a]), L(() => {
+    if (!U(m) && l.current) {
+      const D = wr(
+        l.current.contentDocument,
+        re(m).id
+      );
+      b(D ? [D] : [null]);
+    } else
+      b([null]);
+  }, [m]);
+  const de = bt(() => {
+    let D = Kn;
+    return e === "offline" && (D = D.replace(
+      "https://old.chaibuilder.com/offline/tailwind.cdn.js",
+      "/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__ */ r.jsx(
+    "div",
+    {
+      onClick: () => {
+        s([]), V([]);
+      },
+      onMouseLeave: () => setTimeout(() => o(""), 300),
+      className: "relative mx-auto h-full w-full",
+      style: f > 0 && !U(h) ? { width: t ? "100%" : f } : {},
+      ref: c,
+      children: /* @__PURE__ */ r.jsxs(
+        rr,
+        {
+          contentDidMount: () => E(l.current),
+          ref: l,
+          id: "canvas-iframe",
+          style: { width: `${n}px`, ...h },
+          className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
+          initialContent: de,
+          children: [
+            /* @__PURE__ */ r.jsx(pr, {}),
+            /* @__PURE__ */ r.jsx(
+              hr,
+              {
+                block: a,
+                selectedBlockElement: re(j)
+              }
+            ),
+            /* @__PURE__ */ r.jsx(gr, { model: "page" }),
+            /* @__PURE__ */ r.jsx(ur, { children: _ ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(Je, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(kr, {}) }),
+            /* @__PURE__ */ r.jsx("div", { id: "placeholder", className: "absolute bg-green-500 z-[99999] max-w-full transition-transform" })
+          ]
+        }
+      )
+    }
+  );
+}, Cr = kt(() => import("./AddBlocks-imyQSCbI.js")), Ls = () => {
+  const [e, t] = F(jn);
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
+    /* @__PURE__ */ r.jsx(Yn, {}),
+    /* @__PURE__ */ r.jsxs("div", { className: "relative flex-1 overflow-hidden bg-slate-800/90 px-2 bg-[linear-gradient(to_right,#222_0.5px,transparent_0.5px),linear-gradient(to_bottom,#222_0.5px,transparent_0.5px)] bg-[size:12px_12px]", children: [
+      /* @__PURE__ */ r.jsx(qe, { fallback: /* @__PURE__ */ r.jsx(Je, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(In, { children: /* @__PURE__ */ r.jsx(jr, {}) }) }),
+      e ? /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          onClick: () => t(!1),
+          className: "absolute inset-0 z-50 flex items-center bg-black/30 backdrop-blur-sm",
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              onClick: (n) => n.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__ */ r.jsx(Cr, {})
+            }
+          )
+        }
+      ) : null
+    ] })
+  ] });
+};
+export {
+  Ls as default
+};