@chaibuilder/sdk 1.2.61 → 1.2.62

package/dist/CanvasArea-1lUzUorh.js

@@ -0,0 +1,975 @@
+var Rt = Object.defineProperty;
+var Ht = (t, e, n) => e in t ? Rt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var L = (t, e, n) => (Ht(t, typeof e != "symbol" ? e + "" : e, n), n);
+import { j as s } from "./jsx-runtime-WbnYoNE9.js";
+import D, { createElement as ct, useCallback as W, useState as I, useEffect as C, Component as vt, Children as Pt, Suspense as tt, useRef as dt, useMemo as $t } from "react";
+import { map as $, includes as pt, toUpper as Z, round as Ot, throttle as jt, has as q, isEmpty as T, first as et, omit as wt, pick as zt, get as g, isString as it, memoize as Ut, each as Wt, find as qt, filter as Ct, isNull as Vt } from "lodash-es";
+import { ResetIcon as ut, SunIcon as Kt, MobileIcon as mt, LaptopIcon as Yt, DesktopIcon as Xt, DotsVerticalIcon as Gt, EraserIcon as Zt, ZoomInIcon as Qt, DragHandleDots2Icon as Jt, ArrowUpIcon as te, CopyIcon as ee, TrashIcon as ne } from "@radix-ui/react-icons";
+import { v as se, B as V, aa as _t, aR as At, aS as oe, aT as ie, aU as re, a4 as K, as as ae, h as O, E as le, F as ce, G as de, H as pe, I as ue, aV as me, aW as Bt, r as M, at as H, A as he, a as ge, b as fe, c as xe, d as ye, e as be, f as ke, g as ve, P as je, U as we, aX as Ce, a5 as It, aQ as U, aY as _e, a2 as Ae, ad as E, am as Be, aZ as z, a_ as Ie, s as Se, t as De, a$ as Te, b0 as Me, X as Ee, b1 as Ne, D as St, b2 as Le, b3 as Fe, b4 as Re, q as He, ai as Pe, b5 as $e, S as nt, $ as Oe } from "./index-SyrshOUV.js";
+import { a as ze, u as Ue, b as We, B as qe, E as Ve } from "./index-WN67ca4z.js";
+import { useTranslation as rt } from "react-i18next";
+import { useAtom as b } from "jotai";
+import { SparklesIcon as Ke } from "lucide-react";
+import ht from "react-dom";
+import v from "prop-types";
+import { Quill as Ye } from "react-quill";
+import { d as Y, a as Dt } from "./atoms-Oomqut88.js";
+import { flip as Xe } from "@floating-ui/dom";
+import { useFloating as Ge, shift as Ze } from "@floating-ui/react-dom";
+import { useResizeObserver as Qe } from "@react-hookz/web";
+import { useFeature as Je } from "flagged";
+import tn from "@tailwindcss/typography";
+import en from "@tailwindcss/forms";
+import nn from "@tailwindcss/aspect-ratio";
+import sn from "tailwindcss-palette-generator";
+import { p as on } from "./plugin-wDnsBVPp.js";
+import { twMerge as rn } from "tailwind-merge";
+import { S as gt, a as Tt } from "./MODIFIERS-fd5XOmum.js";
+import { getBlockComponent as an } from "@chaibuilder/runtime";
+import { includes as ft } from "lodash";
+import { Provider as ln } from "react-wrap-balancer";
+import { Resizable as cn } from "re-resizable";
+import "./_commonjsHelpers-UyOWmZb0.js";
+import "@radix-ui/react-toggle";
+import "class-variance-authority";
+import "./utils-VpVqnC9m.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 "./Functions-7jnEwJyw.js";
+import "tree-model";
+import "i18next";
+import "react-hotkeys-hook";
+import "./index-VBXQixVm.js";
+const dn = () => {
+  const { hasUndo: t, hasRedo: e, undo: n, redo: o } = se();
+  return /* @__PURE__ */ s.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ s.jsx(V, { disabled: !t(), size: "sm", onClick: n, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ s.jsx(ut, {}) }),
+    /* @__PURE__ */ s.jsx(V, { disabled: !e(), onClick: o, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ s.jsx(ut, { className: "rotate-180 scale-y-[-1] transform" }) })
+  ] });
+};
+function pn() {
+  const [t, e] = _t();
+  return /* @__PURE__ */ s.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ s.jsx(Kt, { className: "size-4 shrink-0" }),
+    /* @__PURE__ */ s.jsx(
+      At,
+      {
+        id: "dark-mode-switch",
+        checked: t,
+        onCheckedChange: () => {
+          e(!t);
+        },
+        className: `${t ? "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__ */ s.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `${t ? "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`
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ s.jsx(ze, { className: "size-4 ml-3 shrink-0" })
+  ] });
+}
+const xt = ({ landscape: t = !1 }) => /* @__PURE__ */ s.jsxs(
+  "svg",
+  {
+    className: t ? "rotate-90" : "",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 13 13",
+    xmlSpace: "preserve",
+    width: 13,
+    height: 13,
+    children: [
+      /* @__PURE__ */ s.jsx("g", { strokeWidth: 0 }),
+      /* @__PURE__ */ s.jsx("g", { strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ s.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"
+          }
+        }
+      )
+    ]
+  }
+), un = [
+  {
+    title: "mobile_xs_title",
+    content: "mobile_xs_content",
+    breakpoint: "xs",
+    icon: /* @__PURE__ */ s.jsx(mt, {}),
+    width: 400
+  },
+  {
+    title: "mobile_sm_title",
+    content: "mobile_sm_content",
+    breakpoint: "sm",
+    icon: /* @__PURE__ */ s.jsx(mt, { className: "rotate-90" }),
+    width: 640
+  },
+  {
+    title: "tablet_md_title",
+    content: "tablet_md_content",
+    breakpoint: "md",
+    icon: /* @__PURE__ */ s.jsx(xt, {}),
+    width: 800
+  },
+  {
+    title: "tablet_lg_title",
+    content: "tablet_lg_content",
+    breakpoint: "lg",
+    icon: /* @__PURE__ */ s.jsx(xt, { landscape: !0 }),
+    width: 1024
+  },
+  {
+    title: "desktop_xl_title",
+    content: "desktop_xl_content",
+    breakpoint: "xl",
+    icon: /* @__PURE__ */ s.jsx(Yt, {}),
+    width: 1420
+  },
+  {
+    title: "large_desktop_2xl_title",
+    content: "large_desktop_2xl_content",
+    breakpoint: "2xl",
+    icon: /* @__PURE__ */ s.jsx(Xt, {}),
+    width: 1920
+  }
+], yt = ({
+  title: t,
+  content: e,
+  currentBreakpoint: n,
+  breakpoint: o,
+  width: l,
+  icon: c,
+  onClick: a
+}) => {
+  const { t: i } = rt();
+  return /* @__PURE__ */ s.jsxs(oe, { children: [
+    /* @__PURE__ */ s.jsx(ie, { asChild: !0, children: /* @__PURE__ */ s.jsx(
+      V,
+      {
+        onClick: () => a(l),
+        size: "sm",
+        variant: o === n ? "secondary" : "ghost",
+        children: c
+      }
+    ) }),
+    /* @__PURE__ */ s.jsx(re, { className: "w-52 border-border", children: /* @__PURE__ */ s.jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ s.jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ s.jsx("h4", { className: "text-sm font-semibold", children: i(t) }),
+      /* @__PURE__ */ s.jsx("p", { className: "text-xs", children: i(e) })
+    ] }) }) })
+  ] });
+}, mn = () => {
+  const [, t, e] = K(), [n, o] = ae(), { t: l } = rt(), c = O("breakpoints", un), a = (i) => {
+    n.includes(i) ? n.length > 2 && o(n.filter((r) => r !== i)) : o((r) => [...r, i]);
+  };
+  return c.length < 4 ? /* @__PURE__ */ s.jsx("div", { className: "flex items-center rounded-md", children: $(c, (i) => /* @__PURE__ */ ct(yt, { ...i, onClick: e, key: i.breakpoint, currentBreakpoint: t })) }) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center rounded-md", children: [
+    $(
+      c.filter((i) => pt(n, Z(i.breakpoint))),
+      (i) => /* @__PURE__ */ ct(yt, { ...i, onClick: e, key: i.breakpoint, currentBreakpoint: t })
+    ),
+    /* @__PURE__ */ s.jsxs(le, { children: [
+      /* @__PURE__ */ s.jsx(ce, { asChild: !0, children: /* @__PURE__ */ s.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ s.jsx(Gt, { className: "scale-90 transform" }) }) }),
+      /* @__PURE__ */ s.jsxs(de, { className: "w-56 border-border text-xs", children: [
+        /* @__PURE__ */ s.jsx(pe, { children: l("Breakpoints") }),
+        /* @__PURE__ */ s.jsx(ue, {}),
+        $(c, (i) => /* @__PURE__ */ s.jsx(
+          me,
+          {
+            disabled: i.breakpoint === "xs",
+            onCheckedChange: () => a(Z(i.breakpoint)),
+            checked: pt(n, Z(i.breakpoint)),
+            children: l(i.title)
+          },
+          i.breakpoint
+        ))
+      ] })
+    ] })
+  ] });
+}, hn = () => {
+  const { t } = rt(), { setNewBlocks: e } = Bt(), [, n] = M(), [, o] = H(), l = W(() => {
+    e([]), n([]), o([]);
+  }, [e]);
+  return /* @__PURE__ */ s.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ s.jsxs(he, { children: [
+    /* @__PURE__ */ s.jsx(ge, { asChild: !0, children: /* @__PURE__ */ s.jsxs(V, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ s.jsx(Zt, {}),
+      " ",
+      t("clear")
+    ] }) }),
+    /* @__PURE__ */ s.jsxs(fe, { className: "border-border", children: [
+      /* @__PURE__ */ s.jsxs(xe, { children: [
+        /* @__PURE__ */ s.jsx(ye, { children: t("clear_canvas_title") }),
+        /* @__PURE__ */ s.jsx(be, { children: t("clear_canvas_description") })
+      ] }),
+      /* @__PURE__ */ s.jsxs(ke, { children: [
+        /* @__PURE__ */ s.jsx(ve, { children: t("cancel") }),
+        /* @__PURE__ */ s.jsx(je, { onClick: l, children: t("yes") })
+      ] })
+    ] })
+  ] }) });
+}, gn = () => {
+  const [t, e] = b(we);
+  return O("askAiCallBack", null) ? /* @__PURE__ */ s.jsxs("div", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ s.jsxs(Ce, { htmlFor: "ai-assistant", className: "flex items-center gap-x-1 text-sm text-yellow-600", children: [
+      /* @__PURE__ */ s.jsx(Ke, { className: "w-4" }),
+      "AI Assistant"
+    ] }),
+    /* @__PURE__ */ s.jsx(
+      At,
+      {
+        className: "scale-90",
+        checked: t,
+        onCheckedChange: (o) => {
+          e(o);
+        },
+        id: "ai-assitantt"
+      }
+    )
+  ] }) : null;
+}, fn = () => {
+  const t = O("darkMode", !0), [e] = It();
+  return /* @__PURE__ */ s.jsxs("div", { className: "flex h-10 items-center justify-between border-b bg-background/70 px-2", children: [
+    /* @__PURE__ */ s.jsxs("div", { className: "flex h-full space-x-2", children: [
+      /* @__PURE__ */ s.jsx(mn, {}),
+      /* @__PURE__ */ s.jsx(U, { orientation: "vertical" }),
+      t ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsx(pn, {}),
+        /* @__PURE__ */ s.jsx(U, { orientation: "vertical" })
+      ] }) : null,
+      /* @__PURE__ */ s.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__ */ s.jsx(Qt, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+        " ",
+        /* @__PURE__ */ s.jsxs("div", { className: "text-xs leading-3", children: [
+          Ot(e, 0),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ s.jsx(U, { orientation: "vertical" }),
+      /* @__PURE__ */ s.jsx(dn, {})
+    ] }),
+    /* @__PURE__ */ s.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
+      /* @__PURE__ */ s.jsx(hn, {}),
+      /* @__PURE__ */ s.jsx(U, { orientation: "vertical" }),
+      /* @__PURE__ */ s.jsx(gn, {})
+    ] })
+  ] });
+}, xn = `<!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="yes"] { pointer-events: auto !important}
+    [data-dnd="no"] { pointer-events: none !important; }
+    [data-dnd-dragged="yes"] { opacity: 0.6; pointer-events: none; }
+    [data-dnd-dragged="no"] { opacity: 1; pointer-events: auto !important; }
+    [force-show] { display: block !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>
+    <style id="drop-target-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>`, yn = (t) => {
+  const [e] = K(), [, n] = It(), [o, l] = I({}), c = W(() => {
+    const { width: a, height: i } = t;
+    if (a < e) {
+      const r = parseFloat((a / e).toFixed(2).toString());
+      let u = {};
+      const d = i * r;
+      i && (u = {
+        // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
+        height: 100 + (i - d) / d * 100 + "%"
+      }), l({
+        position: "relative",
+        top: 0,
+        transform: `scale(${r})`,
+        transformOrigin: "top left",
+        ...u,
+        maxWidth: "none"
+      }), n(r * 100);
+    } else
+      l({}), n(100);
+  }, [e, t, n]);
+  return C(() => {
+    c();
+  }, [e, t, n, c]), o;
+};
+let Mt, Et;
+typeof document < "u" && (Mt = document);
+typeof window < "u" && (Et = window);
+const Nt = D.createContext({ document: Mt, window: Et }), X = () => D.useContext(Nt), { Provider: bn, Consumer: Qs } = Nt;
+class Lt extends vt {
+  componentDidMount() {
+    this.props.contentDidMount();
+  }
+  componentDidUpdate() {
+    this.props.contentDidUpdate();
+  }
+  render() {
+    return Pt.only(this.props.children);
+  }
+}
+L(Lt, "propTypes", {
+  children: v.element.isRequired,
+  contentDidMount: v.func.isRequired,
+  contentDidUpdate: v.func.isRequired
+});
+class st extends vt {
+  constructor(n, o) {
+    super(n, o);
+    L(this, "setRef", (n) => {
+      this.nodeRef.current = n;
+      const { forwardedRef: o } = this.props;
+      typeof o == "function" ? o(n) : o && (o.current = n);
+    });
+    L(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
+    L(this, "loadCheck", () => setInterval(() => {
+      this.handleLoad();
+    }, 500));
+    this._isMounted = !1, this.nodeRef = D.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 o = this.props.contentDidMount, l = this.props.contentDidUpdate, c = n.defaultView || n.parentView, a = /* @__PURE__ */ s.jsx(Lt, { contentDidMount: o, contentDidUpdate: l, children: /* @__PURE__ */ s.jsx(bn, { value: { document: n, window: c }, children: /* @__PURE__ */ s.jsx("div", { className: "frame-content", children: this.props.children }) }) }), i = this.getMountTarget();
+    return [ht.createPortal(this.props.head, this.getDoc().head), ht.createPortal(a, i)];
+  }
+  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__ */ s.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.
+L(st, "propTypes", {
+  style: v.object,
+  // eslint-disable-line
+  head: v.node,
+  initialContent: v.string,
+  mountTarget: v.string,
+  className: v.string,
+  contentDidMount: v.func,
+  contentDidUpdate: v.func,
+  children: v.oneOfType([v.element, v.arrayOf(v.element)])
+}), L(st, "defaultProps", {
+  style: {},
+  head: null,
+  children: void 0,
+  mountTarget: void 0,
+  contentDidMount: () => {
+  },
+  contentDidUpdate: () => {
+  },
+  initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
+});
+const kn = D.forwardRef((t, e) => /* @__PURE__ */ s.jsx(st, { ...t, forwardedRef: e }));
+function at(t) {
+  const e = window.getComputedStyle(t), n = e.display;
+  if (n === "flex" || n === "inline-flex") {
+    const o = e.flexDirection;
+    return o === "column" || o === "column-reverse" ? "vertical" : "horizontal";
+  } else if (n === "grid") {
+    const o = e.gridAutoFlow, l = e.gridTemplateRows, c = e.gridTemplateColumns;
+    return o.includes("column") || l.split(" ").length > c.split(" ").length ? "vertical" : "horizontal";
+  } else if (n === "block" || n === "inline-block")
+    return "vertical";
+  return "horizontal";
+}
+let y = null, A = [], bt = null, Q = null;
+const kt = (t, e, n) => {
+  if (!y || !t)
+    return;
+  const o = y == null ? void 0 : y.getElementById("placeholder"), l = A.map(([r]) => r), c = l.reduce(
+    (r, u) => Math.abs(u - n) < Math.abs(r - n) ? u : r,
+    0
+  ), a = l.indexOf(c);
+  if (!A[a])
+    return;
+  const i = A[a];
+  o.style.width = e === "vertical" ? i[2] + "px" : "2px", o.style.height = e === "vertical" ? "2px" : i[2] + "px", o.style.display = "block", e === "vertical" ? (o.style.top = i[0] + "px", o.style.left = i[1] + "px") : (o.style.top = i[1] + "px", o.style.left = i[0] + "px");
+};
+function vn(t, e) {
+  let n = 0, o = 1 / 0;
+  return e.forEach((l, c) => {
+    const a = Math.abs(l[0] - t);
+    a < o && (o = a, n = c);
+  }), n;
+}
+const jn = (t) => {
+  const n = at(t) === "horizontal";
+  A = [], Array.from(t.children).forEach((o, l) => {
+    if (o.classList.contains("pointer-events-none"))
+      return;
+    const c = n ? o.offsetLeft : o.offsetTop, a = n ? [o.offsetTop, o.clientHeight] : [o.offsetLeft, o.clientWidth];
+    if (A.push([c, a[0], a[1]]), l === t.children.length - 1) {
+      const i = n ? o.offsetLeft + o.clientWidth : o.offsetTop + o.clientHeight;
+      A.push([i, a[0], a[1]]);
+    }
+  });
+}, wn = jt((t) => {
+  var l;
+  const e = t.target, n = at(e), o = (l = y == null ? void 0 : y.defaultView) == null ? void 0 : l.scrollY;
+  n === "vertical" ? kt(e, n, t.clientY + o) : kt(e, n, t.clientX);
+}, 0);
+function J() {
+  const t = y == null ? void 0 : y.getElementById("placeholder");
+  t.style.display = "none", Cn("pointer-none"), _n();
+}
+function Cn(t) {
+  (y == null ? void 0 : y.querySelectorAll(`.${t}`)).forEach((n) => {
+    n.classList.remove(t);
+  });
+}
+function _n() {
+  const t = y == null ? void 0 : y.querySelector('[data-drop="yes"]');
+  t && t.removeAttribute("data-drop");
+}
+const An = () => {
+  const { document: t } = X(), [e, n] = b(_e), { addCoreBlock: o } = Ae(), [, l] = E(), [, c] = M(), { moveBlocks: a } = Bt(), [i, r] = b(Y), [, u] = b(Dt), d = () => {
+    J(), n(!1), c([i._id]), r(null), u(null), A = [];
+  };
+  return y = t, {
+    isDragging: e,
+    onDragOver: (m) => {
+      m.preventDefault(), m.stopPropagation(), wn(m);
+    },
+    onDrop: (m) => {
+      var S;
+      const p = bt, k = at(p) === "vertical" ? m.clientY + ((S = y == null ? void 0 : y.defaultView) == null ? void 0 : S.scrollY) : m.clientX;
+      Q = vn(k, A);
+      const h = i, j = p.getAttribute("data-block-id");
+      if (!q(h, "_id")) {
+        o(h, j === "canvas" ? null : j, Q), setTimeout(d, 300);
+        return;
+      }
+      let w = p.getAttribute("data-block-id");
+      w === null && (w = m.target.parentElement.getAttribute("data-block-id")), a([h._id], w === "canvas" ? null : w, Q), d(), setTimeout(J, 300);
+    },
+    onDragEnter: (m) => {
+      const p = m, f = p.target;
+      bt = f;
+      const k = f.getAttribute("data-block-id");
+      u(k), p.stopPropagation(), p.preventDefault(), A = [], jn(f), n(!0), l(""), c([]);
+    },
+    onDragLeave: (m) => {
+      m.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), J(), A = []);
+    }
+  };
+};
+function lt(t) {
+  return t.getAttribute("data-block-id") ? t : t.closest("[data-block-id]");
+}
+function Bn(t) {
+  t.container.innerHTML = "", t.container.parentNode.removeChild(t.container);
+  var e = document.querySelector(".ql-toolbar");
+  e && e.parentNode.removeChild(e), t = null;
+}
+const In = () => {
+  const t = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], e = Be(), [, n] = E(), [o, l] = b(z);
+  return (c) => {
+    var m;
+    if (o)
+      return;
+    const a = lt(c.target), i = a.getAttribute("data-block-type");
+    if (!i || !t.includes(i))
+      return;
+    const r = a.cloneNode(!0);
+    a.style.display = "none", Array.from(r.attributes).forEach((p) => {
+      p.name !== "class" && r.removeAttribute(p.name);
+    }), i === "Text" && (r.style.display = "inline-block"), a.parentNode.insertBefore(r, a.nextSibling);
+    const u = new Ye(r, { placeholder: "Type here..." });
+    function d() {
+      const p = u.getText(0, u.getLength());
+      e([a.getAttribute("data-block-id")], { content: p }), a.removeAttribute("style"), r.removeEventListener("blur", d, !0), Bn(u), l(""), n("");
+    }
+    r.addEventListener("blur", d, !0), r.addEventListener("keydown", (p) => {
+      (p.key === "Enter" || p.key === "Escape") && d();
+    }), u.focus(), (m = r.querySelector(".ql-clipboard")) == null || m.remove(), l(a.getAttribute("data-block-id"));
+  };
+}, Sn = () => {
+  const [, t] = H(), [e, n] = M(), [, o] = E(), [l] = b(z), [c] = b(Ie);
+  return (a) => {
+    if (l)
+      return;
+    a.stopPropagation();
+    const i = lt(a.target);
+    if (i != null && i.getAttribute("data-block-id") && (i == null ? void 0 : i.getAttribute("data-block-id")) === "container") {
+      n([]), t([]), o("");
+      return;
+    }
+    if (i != null && i.getAttribute("data-block-parent")) {
+      const r = i.getAttribute("data-style-prop"), u = i.getAttribute("data-style-id"), d = i.getAttribute("data-block-parent");
+      e.includes(d) || c == null || c.closeAll(), t([{ id: u, prop: r, blockId: d }]), n([d]);
+    } else if (i != null && i.getAttribute("data-block-id")) {
+      let r = i.getAttribute("data-block-id");
+      e.includes(r) || c == null || c.closeAll(), t([]), n([r]);
+    }
+    o("");
+  };
+}, Dn = jt((t, e) => {
+  const n = lt(t.target);
+  n != null && n.getAttribute("data-style-id") && e(n.getAttribute("data-style-id"));
+}, 100), Tn = () => {
+  const [, t] = E(), [e] = b(z);
+  return (n) => {
+    e || Dn(n, t);
+  };
+}, Mn = ({ children: t }) => {
+  const { document: e } = X(), [n] = M(), [o, l] = H();
+  C(() => {
+    setTimeout(() => {
+      if (!T(o))
+        return;
+      const u = Ft(e, et(n));
+      if (u) {
+        const d = u.getAttribute("data-style-prop");
+        if (d) {
+          const m = u.getAttribute("data-style-id"), p = u.getAttribute("data-block-parent");
+          l([{ id: m, prop: d, blockId: p }]);
+        }
+      }
+    }, 100);
+  }, [e, n, l, o]);
+  const c = In(), a = Sn(), i = Tn(), r = An();
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      "data-block-id": "canvas",
+      id: "canvas",
+      onClick: a,
+      onDoubleClick: c,
+      onMouseMove: i,
+      ...wt(r, "isDragging"),
+      className: "relative mb-5 h-full max-w-full px-1 " + (r.isDragging ? "dragging" : ""),
+      children: t
+    }
+  );
+}, Ft = (t, e) => t.querySelector(`[data-block-id="${e}"]`), En = () => {
+  const { document: t } = X();
+  return Ue(t), null;
+}, Nn = ({ block: t, label: e }) => {
+  const [, n] = M(), [, o] = E(), [, l] = b(Y), c = Je("dnd");
+  return /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      className: "mr-10 flex cursor-default items-center space-x-1 px-1",
+      draggable: c ? "true" : "false",
+      onDragStart: (a) => {
+        a.dataTransfer.setData("text/plain", JSON.stringify(zt(t, ["_id", "_type", "_name"]))), l(t), setTimeout(() => {
+          n([]), o(null);
+        }, 200);
+      },
+      children: [
+        /* @__PURE__ */ s.jsx(Jt, {}),
+        e
+      ]
+    }
+  );
+}, Ln = ({ selectedBlockElement: t, block: e }) => {
+  const n = Se(), o = De(), [, l] = M(), [, c] = E(), [, a] = H(), [i] = b(z), { floatingStyles: r, refs: u, update: d } = Ge({
+    placement: "top-start",
+    middleware: [Ze(), Xe()],
+    elements: {
+      reference: t
+    }
+  });
+  Qe(t, () => d(), t !== null);
+  const m = g(e, "_parent", null), p = T(g(e, "_name", "")) ? g(e, "_type", "") : g(e, "_name", "");
+  return !t || !e || i ? null : /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      ref: u.setFloating,
+      style: r,
+      onClick: (f) => {
+        f.stopPropagation(), f.preventDefault();
+      },
+      onMouseEnter: (f) => {
+        f.stopPropagation(), c(null);
+      },
+      onKeyDown: (f) => f.stopPropagation(),
+      className: "z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
+      children: [
+        /* @__PURE__ */ s.jsx(Nn, { label: p, block: e }),
+        /* @__PURE__ */ s.jsxs("div", { className: "flex gap-2 px-1", children: [
+          m && /* @__PURE__ */ s.jsx(
+            te,
+            {
+              className: "hover:scale-105",
+              onClick: () => {
+                a([]), l([m]);
+              }
+            }
+          ),
+          Te(g(e, "_type", "")) ? /* @__PURE__ */ s.jsx(ee, { className: "hover:scale-105", onClick: () => o([e == null ? void 0 : e._id]) }) : null,
+          Me(g(e, "_type", "")) ? /* @__PURE__ */ s.jsx(ne, { className: "hover:scale-105", onClick: () => n([e == null ? void 0 : e._id]) }) : null
+        ] })
+      ]
+    }
+  ) });
+}, Fn = ({ model: t }) => {
+  const [e] = Ee(), [n] = M(), [o] = _t(), [l] = E(), [c] = H(), [a] = b(Y), [i] = b(Dt), { document: r, window: u } = X(), [d] = I(r == null ? void 0 : r.getElementById("highlighted-block")), [m] = I(
+    r == null ? void 0 : r.getElementById("selected-block")
+  ), [p] = I(
+    r == null ? void 0 : r.getElementById("selected-styling-block")
+  ), [f] = I(
+    r == null ? void 0 : r.getElementById("dragged-block")
+  );
+  C(() => {
+    o ? r == null || r.documentElement.classList.add("dark") : r == null || r.documentElement.classList.remove("dark");
+  }, [o, r]);
+  const k = g(e, "headingFont", "DM Sans"), h = g(e, "bodyFont", "DM Sans");
+  return C(() => {
+    const j = g(e, "primaryColor", "#000"), w = g(e, "secondaryColor", "#FFF"), S = g(e, "bodyBgLightColor", "#fff"), N = g(e, "bodyBgDarkColor", "#000"), F = g(e, "bodyTextDarkColor", "#000"), P = g(e, "bodyTextLightColor", "#fff"), G = sn([
+      { color: j, name: "primary" },
+      { color: w, name: "secondary" }
+    ]), x = {
+      "bg-light": S,
+      "bg-dark": N,
+      "text-dark": F,
+      "text-light": P
+    }, _ = g(e, "roundedCorners", "0");
+    !u || !u.tailwind || (u.tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          container: {
+            center: !0,
+            padding: "1rem",
+            screens: {
+              "2xl": "1400px"
+            }
+          },
+          fontFamily: {
+            heading: [k],
+            body: [h]
+          },
+          borderRadius: {
+            DEFAULT: `${_ || "0"}px`
+          },
+          colors: { ...x, ...G }
+        }
+      },
+      plugins: [
+        tn,
+        en,
+        nn,
+        on(function({ addBase: B, theme: R }) {
+          B({
+            "h1,h2,h3,h4,h5,h6": {
+              fontFamily: R("fontFamily.heading")
+            },
+            body: {
+              fontFamily: R("fontFamily.body"),
+              color: R("colors.text-light"),
+              backgroundColor: R("colors.bg-light")
+            },
+            ".dark body": {
+              color: R("colors.text-dark"),
+              backgroundColor: R("colors.bg-dark")
+            }
+          });
+        })
+      ]
+    });
+  }, [e, u, k, h]), C(() => {
+    m && (m.textContent = `${$(n, (j) => `[data-block-id="${j}"]`).join(",")}{
+                outline: 1px solid ${n.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
+            }`);
+  }, [n, m]), C(() => {
+    f.textContent = a ? `[data-block-id="${a._id}"], [data-block-id="${a._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [a, f]), C(() => {
+    d && (d.textContent = l ? `[data-style-id="${l}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
+  }, [l, n, d]), C(() => {
+    p && (p.textContent = `${$(c, ({ id: j }) => `[data-style-id="${j}"]`).join(",")}{
+                outline: 1px solid #42a1fc !important; outline-offset: -1px;
+            }`);
+  }, [c, p]), C(() => {
+    r.querySelector("#drop-target-block").innerHTML = i ? `[data-block-id="${i}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
+  }, [i]), /* @__PURE__ */ s.jsx(s.Fragment, { children: (k || h) && /* @__PURE__ */ s.jsx(
+    "link",
+    {
+      rel: "stylesheet",
+      href: `https://fonts.googleapis.com/css2?family=${k ? `${k.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}${k && h && k !== h ? "&" : ""}${h && h !== k ? `family=${h.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}&display=swap`
+    }
+  ) });
+}, Rn = () => b(Ne), Hn = (t, e) => {
+  const n = ["xs", "sm", "md", "lg", "xl", "2xl"], o = n.indexOf(e), l = t.split(" ");
+  let c = new Array(n.length).fill(!1);
+  for (const a of l) {
+    let [i, r] = a.split(":");
+    r || (r = i, i = "xs");
+    const u = n.indexOf(i);
+    if (u <= o) {
+      const d = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], m = ["hidden"];
+      if (d.includes(r))
+        for (let p = u; p < n.length; p++)
+          c[p] = !0;
+      else if (m.includes(r))
+        for (let p = u; p < n.length; p++)
+          c[p] = !1;
+    }
+  }
+  return c[o];
+}, Pn = (t) => {
+  const e = {};
+  return Object.keys(t).forEach((n) => {
+    it(t[n]) && t[n].startsWith(gt) && (e[n] = t[n].replace(gt, "").split(","));
+  }), e;
+}, $n = Ut((t) => {
+  const e = t.replace(Tt, "").split(",");
+  return rn(e[0], e[1]);
+});
+function On(t, e) {
+  return g(t, `${e}_attrs`, {});
+}
+function zn(t, e) {
+  const n = {};
+  return Object.keys(t).forEach((o) => {
+    if (it(t[o]) && t[o].startsWith(Tt)) {
+      const l = $n(t[o]), c = On(t, o);
+      n[o] = {
+        className: l,
+        "data-style-prop": o,
+        "data-block-parent": t._id,
+        "data-style-id": `${o}-${t._id}`,
+        ...c
+      };
+      const a = q(c, "x-show") || q(c, "x-if");
+      a && (n.__isHidden = a && !Hn(l, e));
+    }
+  }), n;
+}
+function Un(t, e) {
+  const n = g(t, "_bindings", {});
+  return T(n) ? { ...t } : (Wt(n, (o, l) => {
+    it(o) && g(e, o, null) && (t[l] = g(e, o, null));
+  }), t);
+}
+function ot({ blocks: t }) {
+  const [e] = St(), [n] = b(Le), [o] = b(Y), [, l] = K(), [c] = Rn(), a = W((d) => zn(d, l), [l]), [i] = We(), [r] = b(z), u = W(
+    (d) => d.reduce((m, p) => {
+      const f = g(c, p, {});
+      return { ...m, ...f };
+    }, {}),
+    [c, e]
+  );
+  return /* @__PURE__ */ s.jsx(s.Fragment, { children: D.Children.toArray(
+    t.map((d, m) => {
+      if (r === d._id)
+        return null;
+      const p = Pn(d), f = {};
+      T(p) || Object.keys(p).forEach((F) => {
+        f[F] = D.Children.toArray(
+          p[F].map((P) => /* @__PURE__ */ s.jsx(ot, { blocks: [qt(e, { _id: P })] }))
+        );
+      });
+      const k = Ct(e, { _parent: d._id });
+      f.children = k.length ? /* @__PURE__ */ s.jsx(ot, { blocks: k }) : null;
+      const h = an(d._type), j = g(h, "builderComponent", g(h, "component", null));
+      if (Vt(j))
+        return /* @__PURE__ */ s.jsx("noscript", { children: `<!-- ${d == null ? void 0 : d._type} not registered -->` });
+      const w = q(h, "getBlockStateFrom") ? h == null ? void 0 : h.getBlockStateFrom(d, e) : [], S = u(w), N = a(d);
+      return g(N, "__isHidden", !1) && !ft(n, d._id) ? null : /* @__PURE__ */ s.jsx(tt, { children: D.createElement(j, {
+        blockProps: {
+          ...ft(n, d._id) ? { "force-show": "" } : {},
+          "data-block-id": d._id,
+          "data-block-type": d._type,
+          ...o ? (
+            // @ts-ignore
+            {
+              "data-dnd": Fe(d._type, o == null ? void 0 : o._type) ? "yes" : "no"
+            }
+          ) : {}
+        },
+        index: m,
+        ...Un(d, i),
+        ...wt(N, ["__isHidden"]),
+        ...f,
+        inBuilder: !0,
+        blockState: S
+      }) });
+    })
+  ) });
+}
+const Wn = () => {
+  const [t] = St(), e = T(t) ? null : /* @__PURE__ */ s.jsx(qe, { children: /* @__PURE__ */ s.jsx(ot, { blocks: Ct(t, (n) => T(n._parent)) }) });
+  return /* @__PURE__ */ s.jsx(s.Fragment, { children: e });
+}, qn = (t, e) => t.querySelector(`[data-style-id="${e}"]`), Vn = () => {
+  const [t] = b(Re), [e] = He(), [n] = K(), [, o] = M(), l = Pe(), [, c] = E(), a = dt(null), i = dt(null), [r, u] = I({ width: 0, height: 0 }), d = yn(r), [m, p] = I(0), [f, k] = I([]), [, h] = I([]), [, j] = b($e), [w, S] = H(), N = O("loading", !1), F = O("htmlDir", "ltr");
+  C(() => {
+    const { clientWidth: x, clientHeight: _ } = i.current;
+    u({ width: x, height: _ }), m === 0 && p(x);
+  }, [i, n, m]);
+  const P = (x, _ = 0) => {
+    const { top: B } = x.getBoundingClientRect();
+    return B + _ >= 0 && B - _ <= window.innerHeight;
+  };
+  C(() => {
+    var x, _;
+    if (l && l.type !== "Multiple" && a.current) {
+      const B = Ft(a.current.contentDocument, l._id);
+      B && (P(B) || (_ = (x = a.current) == null ? void 0 : x.contentWindow) == null || _.scrollTo({ top: B.offsetTop, behavior: "smooth" }), k([B]));
+    }
+  }, [l]), C(() => {
+    if (!T(w) && a.current) {
+      const x = qn(
+        a.current.contentDocument,
+        et(w).id
+      );
+      h(x ? [x] : [null]);
+    } else
+      h([null]);
+  }, [w]);
+  const G = $t(() => {
+    let x = xn;
+    return x = x.replace("__HTML_DIR__", F), t === "offline" && (x = x.replace(
+      "https://old.chaibuilder.com/offline/tailwind.cdn.js",
+      "/offline/tailwind.cdn.js"
+    ), x = x.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), x = x.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), x;
+  }, [t]);
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      onClick: () => {
+        o([]), S([]);
+      },
+      onMouseLeave: () => setTimeout(() => c(""), 300),
+      className: "relative mx-auto h-full w-full overflow-hidden",
+      style: m > 0 && !T(d) ? { width: e ? "100%" : m } : {},
+      ref: i,
+      children: /* @__PURE__ */ s.jsxs(
+        kn,
+        {
+          contentDidMount: () => j(a.current),
+          ref: a,
+          id: "canvas-iframe",
+          style: { width: `${n}px`, ...d },
+          className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
+          initialContent: G,
+          children: [
+            /* @__PURE__ */ s.jsx(En, {}),
+            /* @__PURE__ */ s.jsx(
+              Ln,
+              {
+                block: l,
+                selectedBlockElement: et(f)
+              }
+            ),
+            /* @__PURE__ */ s.jsx(Fn, { model: "page" }),
+            /* @__PURE__ */ s.jsx(ln, { children: /* @__PURE__ */ s.jsx(Mn, { children: N ? /* @__PURE__ */ s.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ s.jsx(nt, { className: "h-full" }) }) : /* @__PURE__ */ s.jsx(Wn, {}) }) }),
+            /* @__PURE__ */ s.jsx("br", {}),
+            /* @__PURE__ */ s.jsx(
+              "div",
+              {
+                id: "placeholder",
+                className: "pointer-events-none absolute z-[99999] max-w-full bg-green-500 transition-transform"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, Kn = D.lazy(() => import("./CodeEditor-LeNocbY6.js")), Js = () => {
+  const [t] = Oe();
+  return /* @__PURE__ */ s.jsxs("div", { className: "flex h-full w-full flex-col", children: [
+    /* @__PURE__ */ s.jsx(fn, {}),
+    /* @__PURE__ */ s.jsxs("div", { className: "relative flex h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
+      /* @__PURE__ */ s.jsx(tt, { fallback: /* @__PURE__ */ s.jsx(nt, { className: "h-full" }), children: /* @__PURE__ */ s.jsx(Ve, { children: /* @__PURE__ */ s.jsx(Vn, {}) }) }),
+      t ? /* @__PURE__ */ s.jsx(tt, { fallback: /* @__PURE__ */ s.jsx(nt, { className: "h-full" }), children: /* @__PURE__ */ s.jsx(cn, { enable: { top: !0, bottom: !1 }, className: "max-h-[400px] min-h-[200px]", children: /* @__PURE__ */ s.jsx(Kn, {}) }) }) : null
+    ] })
+  ] });
+};
+export {
+  Js as default
+};