@chaibuilder/sdk 1.2.43 → 1.2.44

package/dist/CanvasArea-Hqy_21xf.js

@@ -0,0 +1,1215 @@
+var He = Object.defineProperty;
+var ze = (n, s, e) => s in n ? He(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
+var N = (n, s, e) => (ze(n, typeof s != "symbol" ? s + "" : s, e), e);
+import { j as r } from "./jsx-runtime-WbnYoNE9.js";
+import M, { createElement as ne, useCallback as z, useState as C, useEffect as w, Component as me, Children as Oe, Suspense as ge, useRef as re, useMemo as Ue } from "react";
+import { map as R, includes as ie, toUpper as Y, round as We, throttle as fe, has as xe, isEmpty as A, first as O, omit as qe, pick as Ke, get as f, isString as G, memoize as Ye, each as Qe, find as Xe, filter as ve, isNull as Ze } from "lodash-es";
+import { ResetIcon as ae, MobileIcon as le, LaptopIcon as Je, DesktopIcon as Ge, DotsVerticalIcon as Ve, EraserIcon as et, ZoomInIcon as tt, DragHandleDots2Icon as st, ArrowUpIcon as ot, CopyIcon as nt, TrashIcon as rt } from "@radix-ui/react-icons";
+import { j as $e, B as U, v as ye, aq as be, ar as ke, as as it, at, au as lt, o as V, X as ct, h as P, av as dt, aw as pt, ax as ut, ay as ht, az as mt, aA as gt, aB as we, L as B, Y as E, A as ft, a as xt, b as vt, c as $t, d as yt, e as bt, f as kt, g as wt, a3 as jt, aC as Ct, p as je, ap as H, aD as Bt, m as Dt, z as T, aE as Ce, Q as _t, aF as L, aG as At, i as ee, w as Be, E as De, H as _e, V as It, aH as St, aI as Nt, aJ as Mt, F as Et, aK as Tt, aL as Lt, aM as Ft, aN as Rt, M as Pt, aO as Ht, ah as Ae, a2 as zt } from "./ChaiBuilderEditor-NnMEdW3k.js";
+import { useTranslation as W } from "react-i18next";
+import { useAtom as y } from "jotai";
+import { SparklesIcon as Ot } from "lucide-react";
+import ce from "react-dom";
+import k from "prop-types";
+import { Quill as Ut } from "react-quill";
+import { d as te, a as Ie } from "./atoms-ZOWyNoiC.js";
+import { flip as Wt } from "@floating-ui/dom";
+import { useFloating as qt, shift as Kt } from "@floating-ui/react-dom";
+import { useResizeObserver as Yt } from "@react-hookz/web";
+import { useFeature as Qt } from "flagged";
+import Xt from "@tailwindcss/typography";
+import Zt from "@tailwindcss/forms";
+import Jt from "@tailwindcss/aspect-ratio";
+import Gt from "tailwindcss-palette-generator";
+import { twMerge as Vt } from "tailwind-merge";
+import { S as de, a as Se } from "./STRINGS--j49GZJP.js";
+import { getBlockComponent as es } from "@chaibuilder/runtime";
+import { u as ts } from "./useCanvasSettings-QH5zCmxD.js";
+import { Provider as ss } from "react-wrap-balancer";
+import "./_commonjsHelpers-UyOWmZb0.js";
+import "clsx";
+import "@radix-ui/react-scroll-area";
+import "i18next";
+import "./Functions-7jnEwJyw.js";
+import "./MODIFIERS-cBT31iqE.js";
+import "./utils-iMv3T4WT.js";
+import "@radix-ui/react-toggle";
+import "class-variance-authority";
+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-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 "react-hotkeys-hook";
+const os = () => {
+  const { hasUndo: n, hasRedo: s, undo: e, redo: t } = $e();
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ r.jsx(U, { disabled: !n(), size: "sm", onClick: e, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(ae, {}) }),
+    /* @__PURE__ */ r.jsx(U, { disabled: !s(), onClick: t, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ r.jsx(ae, { className: "rotate-180 scale-y-[-1] transform" }) })
+  ] });
+};
+function ns() {
+  const [n, s] = ye(), { t: e } = W();
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ r.jsx(be, { htmlFor: "dark-mode-switch", children: e("dark_mode") }),
+    /* @__PURE__ */ r.jsxs(
+      ke,
+      {
+        id: "dark-mode-switch",
+        checked: n,
+        onCheckedChange: () => {
+          s(!n);
+        },
+        className: `${n ? "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: e("use_setting") }),
+          /* @__PURE__ */ r.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${n ? "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 pe = ({ landscape: n = !1 }) => /* @__PURE__ */ r.jsxs(
+  "svg",
+  {
+    className: n ? "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"
+          }
+        }
+      )
+    ]
+  }
+), rs = [
+  {
+    title: "mobile_xs_title",
+    content: "mobile_xs_content",
+    breakpoint: "xs",
+    icon: /* @__PURE__ */ r.jsx(le, {}),
+    width: 400
+  },
+  {
+    title: "mobile_sm_title",
+    content: "mobile_sm_content",
+    breakpoint: "sm",
+    icon: /* @__PURE__ */ r.jsx(le, { className: "rotate-90" }),
+    width: 640
+  },
+  {
+    title: "tablet_md_title",
+    content: "tablet_md_content",
+    breakpoint: "md",
+    icon: /* @__PURE__ */ r.jsx(pe, {}),
+    width: 800
+  },
+  {
+    title: "tablet_lg_title",
+    content: "tablet_lg_content",
+    breakpoint: "lg",
+    icon: /* @__PURE__ */ r.jsx(pe, { landscape: !0 }),
+    width: 1024
+  },
+  {
+    title: "desktop_xl_title",
+    content: "desktop_xl_content",
+    breakpoint: "xl",
+    icon: /* @__PURE__ */ r.jsx(Je, {}),
+    width: 1420
+  },
+  {
+    title: "large_desktop_2xl_title",
+    content: "large_desktop_2xl_content",
+    breakpoint: "2xl",
+    icon: /* @__PURE__ */ r.jsx(Ge, {}),
+    width: 1920
+  }
+], ue = ({
+  title: n,
+  content: s,
+  currentBreakpoint: e,
+  breakpoint: t,
+  width: o,
+  icon: c,
+  onClick: a
+}) => {
+  const { t: i } = W();
+  return /* @__PURE__ */ r.jsxs(it, { children: [
+    /* @__PURE__ */ r.jsx(at, { asChild: !0, children: /* @__PURE__ */ r.jsx(
+      U,
+      {
+        onClick: () => a(o),
+        size: "sm",
+        variant: t === e ? "secondary" : "ghost",
+        children: c
+      }
+    ) }),
+    /* @__PURE__ */ r.jsx(lt, { 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: i(n) }),
+      /* @__PURE__ */ r.jsx("p", { className: "text-xs", children: i(s) })
+    ] }) }) })
+  ] });
+}, is = () => {
+  const [, n, s] = V(), [e, t] = ct(), { t: o } = W(), c = P("breakpoints", rs), a = (i) => {
+    e.includes(i) ? e.length > 2 && t(e.filter((d) => d !== i)) : t((d) => [...d, i]);
+  };
+  return c.length < 4 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center rounded-md", children: R(c, (i) => /* @__PURE__ */ ne(ue, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })) }) : /* @__PURE__ */ r.jsxs("div", { className: "flex items-center rounded-md", children: [
+    R(
+      c.filter((i) => ie(e, Y(i.breakpoint))),
+      (i) => /* @__PURE__ */ ne(ue, { ...i, onClick: s, key: i.breakpoint, currentBreakpoint: n })
+    ),
+    /* @__PURE__ */ r.jsxs(dt, { children: [
+      /* @__PURE__ */ r.jsx(pt, { asChild: !0, children: /* @__PURE__ */ r.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ r.jsx(Ve, { className: "scale-90 transform" }) }) }),
+      /* @__PURE__ */ r.jsxs(ut, { className: "w-56 border-border text-xs", children: [
+        /* @__PURE__ */ r.jsx(ht, { children: o("Breakpoints") }),
+        /* @__PURE__ */ r.jsx(mt, {}),
+        R(c, (i) => /* @__PURE__ */ r.jsx(
+          gt,
+          {
+            disabled: i.breakpoint === "xs",
+            onCheckedChange: () => a(Y(i.breakpoint)),
+            checked: ie(e, Y(i.breakpoint)),
+            children: o(i.title)
+          },
+          i.breakpoint
+        ))
+      ] })
+    ] })
+  ] });
+}, as = () => {
+  const { t: n } = W(), { setNewBlocks: s } = we(), [, e] = B(), [, t] = E(), o = z(() => {
+    s([]), e([]), t([]);
+  }, [s]);
+  return /* @__PURE__ */ r.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ r.jsxs(ft, { children: [
+    /* @__PURE__ */ r.jsx(xt, { asChild: !0, children: /* @__PURE__ */ r.jsxs(U, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ r.jsx(et, {}),
+      " ",
+      n("clear")
+    ] }) }),
+    /* @__PURE__ */ r.jsxs(vt, { className: "border-border", children: [
+      /* @__PURE__ */ r.jsxs($t, { children: [
+        /* @__PURE__ */ r.jsx(yt, { children: n("clear_canvas_title") }),
+        /* @__PURE__ */ r.jsx(bt, { children: n("clear_canvas_description") })
+      ] }),
+      /* @__PURE__ */ r.jsxs(kt, { children: [
+        /* @__PURE__ */ r.jsx(wt, { children: n("cancel") }),
+        /* @__PURE__ */ r.jsx(jt, { onClick: o, children: n("yes") })
+      ] })
+    ] })
+  ] }) });
+}, ls = () => {
+  const [n, s] = y(Ct);
+  return P("askAiCallBack", null) ? /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ r.jsxs(be, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
+      /* @__PURE__ */ r.jsx(Ot, { className: "w-4" }),
+      "AI Assistant"
+    ] }),
+    /* @__PURE__ */ r.jsx(
+      ke,
+      {
+        className: "scale-90",
+        checked: n,
+        onCheckedChange: (t) => {
+          s(t);
+        },
+        id: "ai-assitantt"
+      }
+    )
+  ] }) : null;
+}, cs = () => {
+  const n = P("darkMode", !1), [s] = je();
+  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: [
+      n ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsx(ns, {}),
+        /* @__PURE__ */ r.jsx(H, { orientation: "vertical" })
+      ] }) : null,
+      /* @__PURE__ */ r.jsx(is, {}),
+      /* @__PURE__ */ r.jsx(H, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsxs("div", { className: "flex w-12 cursor-not-allowed items-center justify-center gap-x-1 space-x-0 font-medium text-gray-400", children: [
+        /* @__PURE__ */ r.jsx(tt, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+        " ",
+        /* @__PURE__ */ r.jsxs("div", { className: "text-xs leading-3", children: [
+          We(s, 0),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ r.jsx(H, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx(os, {})
+    ] }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
+      /* @__PURE__ */ r.jsx(as, {}),
+      /* @__PURE__ */ r.jsx(H, { orientation: "vertical" }),
+      /* @__PURE__ */ r.jsx(ls, {})
+    ] })
+  ] });
+}, ds = `<!doctype html>
+<html lang="en" dir="__HTML_DIR__" 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://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"><\/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;
+    }
+    .frame-root .frame-content { height: 100%; }
+    [data-drop="yes"] { outline: 2px dashed orange !important; outline-offset: -2px }
+    [data-dnd="no"] { 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>
+    <style id="dragged-block"></style>
+
+  </head>
+  <body class="font-body antialiased h-full">
+    <div class="frame-root h-full"></div>
+    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
+  </body>
+</html>`, ps = (n) => {
+  const [s] = V(), [, e] = je(), [t, o] = C({}), c = z(() => {
+    const { width: a, height: i } = n;
+    if (a < s) {
+      const d = parseFloat((a / s).toFixed(2).toString());
+      let l = {};
+      const h = i * d;
+      i && (l = {
+        // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
+        height: 100 + (i - h) / h * 100 + "%"
+      }), o({
+        position: "relative",
+        top: 0,
+        transform: `scale(${d})`,
+        transformOrigin: "top left",
+        ...l,
+        maxWidth: "none"
+      }), e(d * 100);
+    } else
+      o({}), e(100);
+  }, [s, n, e]);
+  return w(() => {
+    c();
+  }, [s, n, e, c]), t;
+};
+let Ne, Me;
+typeof document < "u" && (Ne = document);
+typeof window < "u" && (Me = window);
+const Ee = M.createContext({ document: Ne, window: Me }), q = () => M.useContext(Ee), { Provider: us, Consumer: Po } = Ee;
+class Te extends me {
+  componentDidMount() {
+    this.props.contentDidMount();
+  }
+  componentDidUpdate() {
+    this.props.contentDidUpdate();
+  }
+  render() {
+    return Oe.only(this.props.children);
+  }
+}
+N(Te, "propTypes", {
+  children: k.element.isRequired,
+  contentDidMount: k.func.isRequired,
+  contentDidUpdate: k.func.isRequired
+});
+class Z extends me {
+  constructor(e, t) {
+    super(e, t);
+    N(this, "setRef", (e) => {
+      this.nodeRef.current = e;
+      const { forwardedRef: t } = this.props;
+      typeof t == "function" ? t(e) : t && (t.current = e);
+    });
+    N(this, "handleLoad", () => {
+      clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
+    });
+    // In certain situations on a cold cache DOMContentLoaded never gets called
+    // fallback to an interval to check if that's the case
+    N(this, "loadCheck", () => setInterval(() => {
+      this.handleLoad();
+    }, 500));
+    this._isMounted = !1, this.nodeRef = M.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 e = this.getDoc();
+    return this.props.mountTarget ? e.querySelector(this.props.mountTarget) : e.body.children[0];
+  }
+  renderFrameContents() {
+    if (!this._isMounted)
+      return null;
+    const e = this.getDoc();
+    if (!e)
+      return null;
+    const t = this.props.contentDidMount, o = this.props.contentDidUpdate, c = e.defaultView || e.parentView, a = /* @__PURE__ */ r.jsx(Te, { contentDidMount: t, contentDidUpdate: o, children: /* @__PURE__ */ r.jsx(us, { value: { document: e, window: c }, children: /* @__PURE__ */ r.jsx("div", { className: "frame-content", children: this.props.children }) }) }), i = this.getMountTarget();
+    return [ce.createPortal(this.props.head, this.getDoc().head), ce.createPortal(a, i)];
+  }
+  render() {
+    const e = {
+      ...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 e.head, delete e.initialContent, delete e.mountTarget, delete e.contentDidMount, delete e.contentDidUpdate, delete e.forwardedRef, /* @__PURE__ */ r.jsx("iframe", { ...e, 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.
+N(Z, "propTypes", {
+  style: k.object,
+  // eslint-disable-line
+  head: k.node,
+  initialContent: k.string,
+  mountTarget: k.string,
+  contentDidMount: k.func,
+  contentDidUpdate: k.func,
+  children: k.oneOfType([k.element, k.arrayOf(k.element)])
+}), N(Z, "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 hs = M.forwardRef((n, s) => /* @__PURE__ */ r.jsx(Z, { ...n, forwardedRef: s }));
+function se(n) {
+  const s = window.getComputedStyle(n), e = s.display;
+  if (e === "flex") {
+    const t = s.flexDirection;
+    return t === "column" || t === "column-reverse" ? "vertical" : "horizontal";
+  } else if (e === "grid") {
+    const t = s.gridAutoFlow, o = s.gridTemplateRows, c = s.gridTemplateColumns;
+    return t.includes("column") || o.split(" ").length > c.split(" ").length ? "vertical" : "horizontal";
+  } else if (e === "block" || e === "inline-block")
+    return "vertical";
+  return "horizontal";
+}
+let D = null, _ = [], F = null, Q = null;
+const he = (n, s, e) => {
+  if (!D || !n)
+    return;
+  const t = D == null ? void 0 : D.getElementById("placeholder"), c = _.map(([i]) => i).reduce(
+    (i, d) => Math.abs(d - e) < Math.abs(i - e) ? d : i,
+    0
+  );
+  if (!_[c])
+    return;
+  const a = _[c];
+  t.style.width = s === "vertical" ? a[2] + "px" : "2px", t.style.height = s === "vertical" ? "2px" : a[2] + "px", t.style.display = "block", s === "vertical" ? (t.style.top = a[0] + "px", t.style.left = a[1] + "px") : (t.style.top = a[1] + "px", t.style.left = a[0] + "px");
+};
+function ms(n, s) {
+  let e = 0, t = 1 / 0;
+  return s.forEach((o, c) => {
+    const a = Math.abs(o[0] - n);
+    a < t && (t = a, e = c);
+  }), e;
+}
+const gs = (n) => {
+  const e = se(n) === "horizontal";
+  _ = [], Array.from(n.children).forEach((t) => {
+    if (t.classList.contains("pointer-events-none"))
+      return;
+    const o = e ? t.offsetLeft : t.offsetTop, c = e ? [t.offsetTop, t.clientHeight] : [t.offsetLeft, t.clientWidth];
+    _.push([o, c[0], c[1]]);
+  });
+}, fs = fe((n) => {
+  const s = n.target, e = se(s);
+  if (e === "vertical") {
+    const t = n.clientY - s.offsetTop;
+    he(s, e, t);
+  } else {
+    const t = n.clientX - s.offsetLeft;
+    he(s, e, t);
+  }
+}, 200);
+function X() {
+  const n = D == null ? void 0 : D.getElementById("placeholder");
+  n.style.display = "none", xs("pointer-none");
+}
+function xs(n) {
+  document.querySelectorAll(`.${n}`).forEach((e) => {
+    e.classList.remove(n);
+  });
+}
+const vs = () => {
+  const { document: n } = q(), [s, e] = y(Bt), { addCoreBlock: t } = Dt(), [, o] = T(), [, c] = B(), { moveBlocks: a } = we(), [, i] = y(Ce), [d, l] = y(te), [, h] = y(Ie);
+  return D = n, {
+    isDragging: s,
+    onDragOver: (p) => {
+      p.preventDefault(), p.stopPropagation(), fs(p);
+    },
+    onDrop: (p) => {
+      F == null || F.classList.remove("drop-target");
+      const u = F, v = se(u) === "vertical" ? p.clientY : p.clientX;
+      Q = ms(v, _);
+      const g = d, m = u.getAttribute("data-block-id");
+      if (!xe(g, "_id")) {
+        t(g, m === "canvas" ? null : m, Q), setTimeout(() => {
+          X();
+        }, 300), _ = [], e(!1), i(""), l(null), h(null);
+        return;
+      }
+      let b = u.getAttribute("data-block-id");
+      b === null && (b = p.target.parentElement.getAttribute("data-block-id")), a([g._id], b, Q), X(), e(!1), i(""), setTimeout(() => X(), 300);
+    },
+    onDragEnter: (p) => {
+      const u = p, x = u.target;
+      F = x;
+      const v = x.getAttribute("data-block-id");
+      h(v), u.stopPropagation(), u.preventDefault(), _ = [], gs(x), x.classList.add("drop-target"), e(!0), o(""), c([]);
+    }
+    // onDragLeave: (e: DragEvent) => {
+    //   const event = e;
+    //   dropTarget = null;
+    //   event.stopPropagation();
+    //   event.preventDefault();
+    //   const target = event.target as HTMLElement;
+    //   target.classList.remove("drop-target");
+    // },
+  };
+};
+function oe(n) {
+  return n.getAttribute("data-block-id") ? n : n.closest("[data-block-id]");
+}
+function $s(n) {
+  n.container.innerHTML = "", n.container.parentNode.removeChild(n.container);
+  var s = document.querySelector(".ql-toolbar");
+  s && s.parentNode.removeChild(s), n = null;
+}
+const ys = () => {
+  const n = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], s = _t(), [, e] = T(), [t, o] = y(L);
+  return (c) => {
+    var p;
+    if (t)
+      return;
+    const a = oe(c.target), i = a.getAttribute("data-block-type");
+    if (!i || !n.includes(i))
+      return;
+    const d = a.cloneNode(!0);
+    a.style.display = "none", Array.from(d.attributes).forEach((u) => {
+      u.name !== "class" && d.removeAttribute(u.name);
+    }), i === "Text" && (d.style.display = "inline-block"), a.parentNode.insertBefore(d, a.nextSibling);
+    const l = new Ut(d, { placeholder: "Type here..." });
+    function h() {
+      const u = l.getText(0, l.getLength());
+      s([a.getAttribute("data-block-id")], { content: u }), a.removeAttribute("style"), d.removeEventListener("blur", h, !0), $s(l), o(""), e("");
+    }
+    d.addEventListener("blur", h, !0), d.addEventListener("keydown", (u) => {
+      (u.key === "Enter" || u.key === "Escape") && h();
+    }), l.focus(), (p = d.querySelector(".ql-clipboard")) == null || p.remove(), o(a.getAttribute("data-block-id"));
+  };
+}, bs = () => {
+  const [, n] = E(), [s, e] = B(), [, t] = T(), [o] = y(L), [c] = y(At);
+  return (a) => {
+    if (o)
+      return;
+    a.stopPropagation();
+    const i = oe(a.target);
+    if (i != null && i.getAttribute("data-block-id") && (i == null ? void 0 : i.getAttribute("data-block-id")) === "container") {
+      e([]), n([]), t("");
+      return;
+    }
+    if (i != null && i.getAttribute("data-block-parent")) {
+      const d = i.getAttribute("data-style-prop"), l = i.getAttribute("data-style-id"), h = i.getAttribute("data-block-parent");
+      s.includes(h) || c.closeAll(), n([{ id: l, prop: d, blockId: h }]), e([h]);
+    } else if (i != null && i.getAttribute("data-block-id")) {
+      let d = i.getAttribute("data-block-id");
+      s.includes(d) || c.closeAll(), e([d]);
+    }
+    t("");
+  };
+}, ks = fe((n, s) => {
+  const e = oe(n.target);
+  e != null && e.getAttribute("data-style-id") && s(e.getAttribute("data-style-id"));
+}, 100), ws = () => {
+  const [, n] = T(), [s] = y(L);
+  return (e) => {
+    s || ks(e, n);
+  };
+}, js = ({ children: n }) => {
+  const { document: s } = q(), [e] = B(), [t, o] = E();
+  w(() => {
+    setTimeout(() => {
+      if (!A(t))
+        return;
+      const l = Le(s, O(e));
+      if (l) {
+        const h = l.getAttribute("data-style-prop");
+        if (h) {
+          const p = l.getAttribute("data-style-id"), u = l.getAttribute("data-block-parent");
+          o([{ id: p, prop: h, blockId: u }]);
+        }
+      }
+    }, 100);
+  }, [s, e, o, t]);
+  const c = ys(), a = bs(), i = ws(), d = vs();
+  return /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      "data-block-id": "canvas",
+      id: "canvas",
+      onClick: a,
+      onDoubleClick: c,
+      onMouseMove: i,
+      ...qe(d, "isDragging"),
+      className: "relative mb-5 h-full max-w-full " + (d.isDragging ? "dragging" : ""),
+      children: n
+    }
+  );
+}, Le = (n, s) => n.querySelector(`[data-block-id="${s}"]`), Cs = () => {
+  const { window: n } = q(), [s, e] = B(), [t] = ee(), [, o] = E(), { undo: c, redo: a } = $e(), i = Be(), [, d] = De(), l = _e(), { savePage: h } = It(), [p] = y(L), [, u] = y(St), x = (g) => {
+    g.key === "Enter" && (g.preventDefault(), s.length === 1 && u(O(s)));
+  }, v = (g) => {
+    const m = t.find((b) => b._id === g);
+    return m ? m._parent : null;
+  };
+  return w(() => {
+    const g = (m) => {
+      if (m.key === "Escape") {
+        e([]), o([]);
+        return;
+      }
+      if (x(m), !p && (m.key === "Delete" || m.key === "Backspace") && (m.preventDefault(), l(s)), m.ctrlKey || m.metaKey) {
+        if (m.key === "ArrowUp") {
+          m.preventDefault();
+          const b = s.length > 0 ? v(s[0]) : null;
+          b && e([b]);
+        }
+        if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(m.key)) {
+          if (p && ["x", "z", "v"].includes(m.key))
+            return !0;
+          m.preventDefault();
+        }
+        m.key === "s" && (m.stopPropagation(), m.preventDefault(), h()), m.key === "z" && c(), m.key === "y" && a(), m.key === "d" && i(s);
+      }
+    };
+    return n.removeEventListener("keydown", g), n.addEventListener("keydown", g), () => {
+      n.removeEventListener("keydown", g);
+    };
+  }, [s, e, c, l, d, a, i, p, h, n]), null;
+}, Bs = ({ block: n, label: s }) => {
+  const [, e] = B(), [, t] = T(), [, o] = y(te), c = Qt("dnd");
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
+      draggable: c ? "true" : "false",
+      onDragStart: (a) => {
+        a.dataTransfer.setData("text/plain", JSON.stringify(Ke(n, ["_id", "_type", "_name"]))), o(n), setTimeout(() => {
+          e([]), t(null);
+        }, 200);
+      },
+      children: [
+        /* @__PURE__ */ r.jsx(st, {}),
+        s
+      ]
+    }
+  );
+}, Ds = ({ selectedBlockElement: n, block: s }) => {
+  const e = _e(), t = Be(), [, o] = B(), [, c] = E(), [a] = y(L), { floatingStyles: i, refs: d, update: l } = qt({
+    placement: "top-start",
+    middleware: [Kt(), Wt()],
+    elements: {
+      reference: n
+    }
+  });
+  Yt(n, () => l(), n !== null);
+  const h = f(s, "_parent", null), p = A(f(s, "_name", "")) ? f(s, "_type", "") : f(s, "_name", "");
+  return !n || !s || a ? null : /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      ref: d.setFloating,
+      style: i,
+      onClick: (u) => {
+        u.stopPropagation(), u.preventDefault();
+      },
+      onKeyDown: (u) => u.stopPropagation(),
+      className: "z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
+      children: [
+        /* @__PURE__ */ r.jsx(Bs, { label: p, block: s }),
+        /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 px-1", children: [
+          h && /* @__PURE__ */ r.jsx(
+            ot,
+            {
+              className: "hover:scale-105",
+              onClick: () => {
+                c([]), o([h]);
+              }
+            }
+          ),
+          Nt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(nt, { className: "hover:scale-105", onClick: () => t([s == null ? void 0 : s._id]) }) : null,
+          Mt(f(s, "_type", "")) ? /* @__PURE__ */ r.jsx(rt, { className: "hover:scale-105", onClick: () => e([s == null ? void 0 : s._id]) }) : null
+        ] })
+      ]
+    }
+  ) });
+}, _s = ({ addVariant: n, e: s }) => {
+  n("hs-dropdown-open", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-dropdown.open > .${s(`hs-dropdown-open${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-dropdown.open .hs-dropdown-toggle .${s(`hs-dropdown-open${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-dropdown.open > .hs-dropdown-menu > .${s(`hs-dropdown-open${t}${o}`)}`);
+    }
+  ]), n("hs-removing", ({ modifySelectors: e, separator: t }) => {
+    e(({ className: o }) => `.hs-removing.${s(`hs-removing${t}${o}`)}`);
+  }), n("hs-tooltip-shown", ({ modifySelectors: e, separator: t }) => {
+    e(({ className: o }) => `.hs-tooltip.show .${s(`hs-tooltip-shown${t}${o}`)}`);
+  }), n("hs-accordion-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-accordion.active.${s(`hs-accordion-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-accordion.active > .${s(`hs-accordion-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-accordion.active > .hs-accordion-toggle .${s(`hs-accordion-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-accordion.active > .hs-accordion-heading > .hs-accordion-toggle .${s(
+        `hs-accordion-active${t}${o}`
+      )}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-accordion.active > .hs-accordion-toggle.${s(`hs-accordion-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-accordion.active > .hs-accordion-heading > .hs-accordion-toggle.${s(
+        `hs-accordion-active${t}${o}`
+      )}`);
+    }
+  ]), n("hs-accordion-selected", ({ modifySelectors: e, separator: t }) => {
+    e(({ className: o }) => `.hs-accordion .selected.${s(`hs-accordion-selected${t}${o}`)}`);
+  }), n("hs-collapse-open", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-collapse.open .${s(`hs-collapse-open${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-collapse.open.${s(`hs-collapse-open${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-collapse-toggle.open .${s(`hs-collapse-open${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-collapse-toggle.open.${s(`hs-collapse-open${t}${o}`)}`);
+    }
+  ]), n("hs-tab-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `[data-hs-tab].active.${s(`hs-tab-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `[data-hs-tab].active .${s(`hs-tab-active${t}${o}`)}`);
+    }
+  ]), n("hs-overlay-open", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.open.${s(`hs-overlay-open${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.open .${s(`hs-overlay-open${t}${o}`)}`);
+    }
+  ]), n("hs-overlay-layout-open", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-overlay-body-open.${s(`hs-overlay-layout-open${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-overlay-body-open .${s(`hs-overlay-layout-open${t}${o}`)}`);
+    }
+  ]), n("hs-overlay-backdrop-open", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-overlay-backdrop.${s(`hs-overlay-backdrop-open${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.hs-overlay-backdrop .${s(`hs-overlay-backdrop-open${t}${o}`)}`);
+    }
+  ]), n("hs-scrollspy-active", ({ modifySelectors: e, separator: t }) => {
+    e(({ className: o }) => `.active.${s(`hs-scrollspy-active${t}${o}`)}`);
+  }), n("hs-carousel-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active.${s(`hs-carousel-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active .${s(`hs-carousel-active${t}${o}`)}`);
+    }
+  ]), n("hs-carousel-disabled", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.disabled.${s(`hs-carousel${t}disabled${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.disabled .${s(`hs-carousel${t}disabled${t}${o}`)}`);
+    }
+  ]), n("hs-selected", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.selected.${s(`hs-selected${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.selected .${s(`hs-selected${t}${o}`)}`);
+    }
+  ]), n("hs-select-disabled", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.disabled.${s(`hs-select-disabled${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.disabled .${s(`hs-select-disabled${t}${o}`)}`);
+    }
+  ]), n("hs-select-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active.${s(`hs-select-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active .${s(`hs-select-active${t}${o}`)}`);
+    }
+  ]), n("hs-input-number-disabled", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.disabled.${s(`hs-input-number-disabled${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.disabled .${s(`hs-input-number-disabled${t}${o}`)}`);
+    }
+  ]), n("hs-pin-input-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active.${s(`hs-pin-input-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active .${s(`hs-pin-input-active${t}${o}`)}`);
+    }
+  ]), n("hs-select-opened", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.opened.${s(`hs-select-opened${t}${o}`)}`);
+    }
+  ]), n("hs-password-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active.${s(`hs-password-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active .${s(`hs-password-active${t}${o}`)}`);
+    }
+  ]), n("hs-stepper-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active.${s(`hs-stepper-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active .${s(`hs-stepper-active${t}${o}`)}`);
+    }
+  ]), n("hs-stepper-success", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.success.${s(`hs-stepper-success${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.success .${s(`hs-stepper-success${t}${o}`)}`);
+    }
+  ]), n("hs-stepper-completed", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.completed.${s(`hs-stepper-completed${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.completed .${s(`hs-stepper-completed${t}${o}`)}`);
+    }
+  ]), n("hs-stepper-error", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.error.${s(`hs-stepper-error${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.error .${s(`hs-stepper-error${t}${o}`)}`);
+    }
+  ]), n("hs-stepper-processed", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.processed.${s(`hs-stepper-processed${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.processed .${s(`hs-stepper-processed${t}${o}`)}`);
+    }
+  ]), n("hs-stepper-disabled", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.disabled.${s(`hs-stepper-disabled${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.disabled .${s(`hs-stepper-disabled${t}${o}`)}`);
+    }
+  ]), n("hs-stepper-skipped", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.skipped.${s(`hs-stepper-skipped${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.skipped .${s(`hs-stepper-skipped${t}${o}`)}`);
+    }
+  ]), n("hs-strong-password", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.passed.${s(`hs-strong-password${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.passed .${s(`hs-strong-password${t}${o}`)}`);
+    }
+  ]), n("hs-strong-password-accepted", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.accepted.${s(`hs-strong-password-accepted${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.accepted .${s(`hs-strong-password-accepted${t}${o}`)}`);
+    }
+  ]), n("hs-strong-password-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active.${s(`hs-strong-password-active${t}${o}`)}`);
+    }
+  ]), n("hs-combo-box-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active .${s(`hs-combo-box-active${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active.${s(`hs-combo-box-active${t}${o}`)}`);
+    }
+  ]), n("hs-combo-box-selected", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.selected .${s(`hs-combo-box-selected${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.selected.${s(`hs-combo-box-selected${t}${o}`)}`);
+    }
+  ]), n("hs-combo-box-tab-active", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.active.${s(`hs-combo-box-tab-active${t}${o}`)}`);
+    }
+  ]), n("hs-apexcharts-tooltip-dark", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.dark.${s(`hs-apexcharts-tooltip-dark${t}${o}`)}`);
+    }
+  ]), n("hs-success", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.success .${s(`hs-success${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.success.${s(`hs-success${t}${o}`)}`);
+    }
+  ]), n("hs-error", [
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.error .${s(`hs-error${t}${o}`)}`);
+    },
+    ({ modifySelectors: e, separator: t }) => {
+      e(({ className: o }) => `.error.${s(`hs-error${t}${o}`)}`);
+    }
+  ]), n("hs-default-mode-active", ({ modifySelectors: e, separator: t }) => {
+    e(({ className: o }) => `.default .${s(`hs-default-mode-active${t}${o}`)}`);
+  }), n("hs-dark-mode-active", ({ modifySelectors: e, separator: t }) => {
+    e(({ className: o }) => `.dark .${s(`hs-dark-mode-active${t}${o}`)}`);
+  }), n("hs-auto-mode-active", ({ modifySelectors: e, separator: t }) => {
+    e(({ className: o }) => `.auto .${s(`hs-auto-mode-active${t}${o}`)}`);
+  });
+}, As = ({ model: n }) => {
+  const [s] = Et(), [e] = B(), [t] = ye(), [o] = T(), [c] = E(), [a] = y(Ce), { document: i, window: d } = q(), [l] = C(i == null ? void 0 : i.getElementById("highlighted-block")), [h] = C(
+    i == null ? void 0 : i.getElementById("selected-block")
+  ), [p] = C(
+    i == null ? void 0 : i.getElementById("selected-styling-block")
+  ), [u] = C(i == null ? void 0 : i.getElementById("dragged-block"));
+  w(() => {
+    t ? i == null || i.documentElement.classList.add("dark") : i == null || i.documentElement.classList.remove("dark");
+  }, [t, i]);
+  const x = f(s, "headingFont", "DM Sans"), v = f(s, "bodyFont", "DM Sans");
+  return w(() => {
+    const g = f(s, "primaryColor", "#000"), m = f(s, "secondaryColor", "#FFF"), b = Gt([
+      { color: g, name: "primary" },
+      { color: m, name: "secondary" }
+    ]), j = f(s, "roundedCorners", "0");
+    !d || !d.tailwind || (d.tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          fontFamily: {
+            heading: [x],
+            body: [v]
+          },
+          borderRadius: {
+            global: `${j || "0"}px`
+          },
+          colors: b
+        }
+      },
+      plugins: [Xt, Zt, Jt, d.tailwind.plugin.withOptions(() => _s)]
+    });
+  }, [s, d, x, v]), w(() => {
+    h && (h.textContent = `${R(e, (g) => `[data-block-id="${g}"]`).join(",")}{
+                outline: 1px solid ${e.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
+            }`);
+  }, [e, h]), w(() => {
+    if (!a) {
+      u.textContent = "";
+      return;
+    }
+    u.textContent = `[data-block-id="${a}"]{ pointer-events: none !important; opacity: 0.2 !important}`;
+  }, [a]), w(() => {
+    l && (l.textContent = o ? `[data-style-id="${o}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
+  }, [o, e, l]), w(() => {
+    p && (p.textContent = `${R(c, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
+                outline: 1px solid #42a1fc !important; outline-offset: -1px;
+            }`);
+  }, [c, p]), w(() => {
+    const g = f(s, "bodyTextLightColor", "#64748b"), m = f(s, "bodyTextDarkColor", "#94a3b8"), b = f(s, "bodyBgLightColor", "#FFFFFF"), j = f(s, "bodyBgDarkColor", "#0f172a");
+    i.body.className = `font-body antialiased text-[${g}] bg-[${b}] dark:text-[${m}] dark:bg-[${j}]`;
+  }, [s, i, n]), n === "page" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    x && /* @__PURE__ */ r.jsx(
+      "link",
+      {
+        id: "heading-font",
+        rel: "stylesheet",
+        type: "text/css",
+        href: `https://fonts.googleapis.com/css2?family=${x.replace(
+          / /g,
+          "+"
+        )}:wght@300;400;500;600;700;800;900&display=swap`,
+        media: "all"
+      }
+    ),
+    v && x !== v && /* @__PURE__ */ r.jsx(
+      "link",
+      {
+        id: "body-font",
+        rel: "stylesheet",
+        type: "text/css",
+        href: `https://fonts.googleapis.com/css2?family=${v.replace(
+          / /g,
+          "+"
+        )}:wght@300;400;500;600;700;800;900&display=swap`,
+        media: "all"
+      }
+    ),
+    x && /* @__PURE__ */ r.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${x}",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;
+}, Is = (n) => {
+  const s = {};
+  return Object.keys(n).forEach((e) => {
+    G(n[e]) && n[e].startsWith(de) && (s[e] = n[e].replace(de, "").split(","));
+  }), s;
+}, Ss = Ye((n) => {
+  const s = n.replace(Se, "").split(",");
+  return Vt(s[0], s[1]);
+});
+function Ns(n, s) {
+  return f(n, `${s}_attrs`, {});
+}
+function Ms(n) {
+  const s = {};
+  return Object.keys(n).forEach((e) => {
+    if (G(n[e]) && n[e].startsWith(Se)) {
+      const t = Ss(n[e]);
+      s[e] = {
+        className: t,
+        "data-style-prop": e,
+        "data-block-parent": n._id,
+        "data-style-id": `${e}-${n._id}`,
+        ...Ns(n, e)
+      };
+    }
+  }), s;
+}
+function Es(n, s) {
+  const e = f(n, "_bindings", {});
+  return A(e) ? { ...n } : (Qe(e, (t, o) => {
+    G(t) && f(s, t, null) && (n[o] = f(s, t, null));
+  }), n);
+}
+function J({ blocks: n }) {
+  const [s] = ee(), [e] = y(te), [t] = y(Ie), [o] = ts(), c = z((l) => Ms(l), []), [a] = Tt(), [i] = y(L), d = z(
+    (l) => l.reduce((h, p) => {
+      const u = f(o, p, {});
+      return { ...h, ...u };
+    }, {}),
+    [o, s]
+  );
+  return /* @__PURE__ */ r.jsx(r.Fragment, { children: M.Children.toArray(
+    n.map((l, h) => {
+      if (i === l._id)
+        return null;
+      const p = Is(l), u = {};
+      A(p) || Object.keys(p).forEach((j) => {
+        u[j] = M.Children.toArray(
+          p[j].map((K) => /* @__PURE__ */ r.jsx(J, { blocks: [Xe(s, { _id: K })] }))
+        );
+      });
+      const x = ve(s, { _parent: l._id });
+      u.children = x.length ? /* @__PURE__ */ r.jsx(J, { blocks: x }) : null;
+      const v = es(l._type), g = f(v, "builderComponent", f(v, "component", null));
+      if (Ze(g))
+        return /* @__PURE__ */ r.jsx("noscript", { children: `<!-- ${l == null ? void 0 : l._type} not registered -->` });
+      const m = xe(v, "getBlockStateFrom") ? v == null ? void 0 : v.getBlockStateFrom(l, s) : [], b = d(m);
+      return /* @__PURE__ */ r.jsx(ge, { children: M.createElement(g, {
+        blockProps: {
+          "data-block-id": l._id,
+          "data-block-type": l._type,
+          ...e ? (
+            // @ts-ignore
+            { "data-dnd": Lt(l._type, e == null ? void 0 : e._type) ? "yes" : "no" }
+          ) : {},
+          ...t === l._id ? { "data-drop": "yes" } : {}
+        },
+        index: h,
+        ...Es(l, a),
+        ...c(l),
+        ...u,
+        inBuilder: !0,
+        blockState: b
+      }) });
+    })
+  ) });
+}
+const Ts = () => {
+  const [n] = ee(), s = A(n) ? null : /* @__PURE__ */ r.jsx(Ft, { children: /* @__PURE__ */ r.jsx(J, { blocks: ve(n, (e) => A(e._parent)) }) });
+  return /* @__PURE__ */ r.jsx(r.Fragment, { children: s });
+}, Ls = (n, s) => n.querySelector(`[data-style-id="${s}"]`), Fs = () => {
+  const [n] = y(Rt), [s] = De(), [e] = V(), [, t] = B(), o = Pt(), [, c] = T(), a = re(null), i = re(null), [d, l] = C({ width: 0, height: 0 }), h = ps(d), [p, u] = C(0), [x, v] = C([]), [, g] = C([]), [, m] = y(Ht), [b, j] = E(), K = P("loading", !1), Fe = P("htmlDir", "ltr");
+  w(() => {
+    const { clientWidth: $, clientHeight: I } = i.current;
+    l({ width: $, height: I }), p === 0 && u($);
+  }, [i, e, p]);
+  const Re = ($, I = 0) => {
+    const { top: S } = $.getBoundingClientRect();
+    return S + I >= 0 && S - I <= window.innerHeight;
+  };
+  w(() => {
+    var $, I;
+    if (o && o.type !== "Multiple" && a.current) {
+      const S = Le(a.current.contentDocument, o._id);
+      S && (Re(S) || (I = ($ = a.current) == null ? void 0 : $.contentWindow) == null || I.scrollTo({ top: S.offsetTop, behavior: "smooth" }), v([S]));
+    }
+  }, [o]), w(() => {
+    if (!A(b) && a.current) {
+      const $ = Ls(
+        a.current.contentDocument,
+        O(b).id
+      );
+      g($ ? [$] : [null]);
+    } else
+      g([null]);
+  }, [b]);
+  const Pe = Ue(() => {
+    let $ = ds;
+    return $ = $.replace("__HTML_DIR__", Fe), n === "offline" && ($ = $.replace(
+      "https://old.chaibuilder.com/offline/tailwind.cdn.js",
+      "/offline/tailwind.cdn.js"
+    ), $ = $.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), $ = $.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), $;
+  }, [n]);
+  return /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      onClick: () => {
+        t([]), j([]);
+      },
+      onMouseLeave: () => setTimeout(() => c(""), 300),
+      className: "relative mx-auto h-full w-full overflow-hidden",
+      style: p > 0 && !A(h) ? { width: s ? "100%" : p } : {},
+      ref: i,
+      children: /* @__PURE__ */ r.jsxs(
+        hs,
+        {
+          contentDidMount: () => m(a.current),
+          ref: a,
+          id: "canvas-iframe",
+          style: { width: `${e}px`, ...h },
+          className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
+          initialContent: Pe,
+          children: [
+            /* @__PURE__ */ r.jsx(Cs, {}),
+            /* @__PURE__ */ r.jsx(
+              Ds,
+              {
+                block: o,
+                selectedBlockElement: O(x)
+              }
+            ),
+            /* @__PURE__ */ r.jsx(As, { model: "page" }),
+            /* @__PURE__ */ r.jsx(ss, { children: /* @__PURE__ */ r.jsx(js, { children: K ? /* @__PURE__ */ r.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ r.jsx(Ae, { className: "h-full" }) }) : /* @__PURE__ */ r.jsx(Ts, {}) }) }),
+            /* @__PURE__ */ r.jsx("br", {}),
+            /* @__PURE__ */ r.jsx(
+              "div",
+              {
+                id: "placeholder",
+                className: "pointer-events-none absolute z-[99999] max-w-full bg-green-500 transition-transform"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, Ho = () => /* @__PURE__ */ r.jsxs("div", { className: "flex h-full w-full flex-col", children: [
+  /* @__PURE__ */ r.jsx(cs, {}),
+  /* @__PURE__ */ r.jsx("div", { className: "relative h-full overflow-hidden bg-slate-800/90 bg-[linear-gradient(to_right,#222_0.5px,transparent_0.5px),linear-gradient(to_bottom,#222_0.5px,transparent_0.5px)] bg-[size:12px_12px] px-2", children: /* @__PURE__ */ r.jsx(ge, { fallback: /* @__PURE__ */ r.jsx(Ae, { className: "h-full" }), children: /* @__PURE__ */ r.jsx(zt, { children: /* @__PURE__ */ r.jsx(Fs, {}) }) }) })
+] });
+export {
+  Ho as default
+};