@chaibuilder/sdk 1.2.61 → 1.2.62

package/dist/CanvasArea-xq30AEQD.js

@@ -1,978 +0,0 @@
-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 I, { createElement as lt, useCallback as q, useState as A, useEffect as C, Component as kt, Children as Pt, Suspense as Q, useRef as ct, useMemo as $t } from "react";
-import { map as O, includes as dt, toUpper as G, round as Ot, throttle as vt, has as V, isEmpty as D, first as J, omit as jt, pick as zt, get as h, isString as nt, memoize as Ut, each as Wt, find as qt, filter as wt, isNull as Vt } from "lodash-es";
-import { ResetIcon as pt, SunIcon as Kt, MobileIcon as ut, 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 se } from "@radix-ui/react-icons";
-import { v as ne, B as K, aa as Ct, aR as _t, aS as oe, aT as ie, aU as re, a4 as Y, as as ae, h as z, E as le, F as ce, G as de, H as pe, I as ue, aV as me, aW as At, r as T, at as P, 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 St, aQ as W, aY as _e, a2 as Ae, ad as F, aZ as Bt, am as Se, a_ as U, a$ as Be, s as Ie, t as De, b0 as Te, b1 as Ee, X as Me, b2 as Ne, D as It, b3 as Le, b4 as Fe, b5 as Re, q as He, ai as Pe, b6 as $e, S as tt, $ as Oe } from "./index-TzLilp-0.js";
-import { a as ze, u as Ue, b as We, B as qe, E as Ve } from "./index-1OAjmTyp.js";
-import { useTranslation as ot } from "react-i18next";
-import { useAtom as b } from "jotai";
-import { SparklesIcon as Ke } from "lucide-react";
-import mt from "react-dom";
-import w from "prop-types";
-import { Quill as Ye } from "react-quill";
-import { d as it, a as Dt } from "./atoms-ZOWyNoiC.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 ts from "@tailwindcss/typography";
-import es from "@tailwindcss/forms";
-import ss from "@tailwindcss/aspect-ratio";
-import ns from "tailwindcss-palette-generator";
-import { twMerge as os } from "tailwind-merge";
-import { S as ht, a as Tt } from "./MODIFIERS-fd5XOmum.js";
-import { getBlockComponent as is } from "@chaibuilder/runtime";
-import { includes as gt } from "lodash";
-import { Provider as rs } from "react-wrap-balancer";
-import { Resizable as as } 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 ls = () => {
-  const { hasUndo: t, hasRedo: e, undo: n, redo: i } = ne();
-  return /* @__PURE__ */ s.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ s.jsx(K, { disabled: !t(), size: "sm", onClick: n, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ s.jsx(pt, {}) }),
-    /* @__PURE__ */ s.jsx(K, { disabled: !e(), onClick: i, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ s.jsx(pt, { className: "rotate-180 scale-y-[-1] transform" }) })
-  ] });
-};
-function cs() {
-  const [t, e] = Ct();
-  return /* @__PURE__ */ s.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ s.jsx(Kt, { className: "size-4 shrink-0" }),
-    /* @__PURE__ */ s.jsx(
-      _t,
-      {
-        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 ft = ({ 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"
-          }
-        }
-      )
-    ]
-  }
-), ds = [
-  {
-    title: "mobile_xs_title",
-    content: "mobile_xs_content",
-    breakpoint: "xs",
-    icon: /* @__PURE__ */ s.jsx(ut, {}),
-    width: 400
-  },
-  {
-    title: "mobile_sm_title",
-    content: "mobile_sm_content",
-    breakpoint: "sm",
-    icon: /* @__PURE__ */ s.jsx(ut, { className: "rotate-90" }),
-    width: 640
-  },
-  {
-    title: "tablet_md_title",
-    content: "tablet_md_content",
-    breakpoint: "md",
-    icon: /* @__PURE__ */ s.jsx(ft, {}),
-    width: 800
-  },
-  {
-    title: "tablet_lg_title",
-    content: "tablet_lg_content",
-    breakpoint: "lg",
-    icon: /* @__PURE__ */ s.jsx(ft, { 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
-  }
-], xt = ({
-  title: t,
-  content: e,
-  currentBreakpoint: n,
-  breakpoint: i,
-  width: a,
-  icon: l,
-  onClick: r
-}) => {
-  const { t: o } = ot();
-  return /* @__PURE__ */ s.jsxs(oe, { children: [
-    /* @__PURE__ */ s.jsx(ie, { asChild: !0, children: /* @__PURE__ */ s.jsx(
-      K,
-      {
-        onClick: () => r(a),
-        size: "sm",
-        variant: i === n ? "secondary" : "ghost",
-        children: l
-      }
-    ) }),
-    /* @__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: o(t) }),
-      /* @__PURE__ */ s.jsx("p", { className: "text-xs", children: o(e) })
-    ] }) }) })
-  ] });
-}, ps = () => {
-  const [, t, e] = Y(), [n, i] = ae(), { t: a } = ot(), l = z("breakpoints", ds), r = (o) => {
-    n.includes(o) ? n.length > 2 && i(n.filter((c) => c !== o)) : i((c) => [...c, o]);
-  };
-  return l.length < 4 ? /* @__PURE__ */ s.jsx("div", { className: "flex items-center rounded-md", children: O(l, (o) => /* @__PURE__ */ lt(xt, { ...o, onClick: e, key: o.breakpoint, currentBreakpoint: t })) }) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center rounded-md", children: [
-    O(
-      l.filter((o) => dt(n, G(o.breakpoint))),
-      (o) => /* @__PURE__ */ lt(xt, { ...o, onClick: e, key: o.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: a("Breakpoints") }),
-        /* @__PURE__ */ s.jsx(ue, {}),
-        O(l, (o) => /* @__PURE__ */ s.jsx(
-          me,
-          {
-            disabled: o.breakpoint === "xs",
-            onCheckedChange: () => r(G(o.breakpoint)),
-            checked: dt(n, G(o.breakpoint)),
-            children: a(o.title)
-          },
-          o.breakpoint
-        ))
-      ] })
-    ] })
-  ] });
-}, us = () => {
-  const { t } = ot(), { setNewBlocks: e } = At(), [, n] = T(), [, i] = P(), a = q(() => {
-    e([]), n([]), i([]);
-  }, [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(K, { 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: a, children: t("yes") })
-      ] })
-    ] })
-  ] }) });
-}, ms = () => {
-  const [t, e] = b(we);
-  return z("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(
-      _t,
-      {
-        className: "scale-90",
-        checked: t,
-        onCheckedChange: (i) => {
-          e(i);
-        },
-        id: "ai-assitantt"
-      }
-    )
-  ] }) : null;
-}, hs = () => {
-  const t = z("darkMode", !0), [e] = St();
-  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(ps, {}),
-      /* @__PURE__ */ s.jsx(W, { orientation: "vertical" }),
-      t ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsx(cs, {}),
-        /* @__PURE__ */ s.jsx(W, { 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(W, { orientation: "vertical" }),
-      /* @__PURE__ */ s.jsx(ls, {})
-    ] }),
-    /* @__PURE__ */ s.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ s.jsx(us, {}),
-      /* @__PURE__ */ s.jsx(W, { orientation: "vertical" }),
-      /* @__PURE__ */ s.jsx(ms, {})
-    ] })
-  ] });
-}, gs = `<!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>
-
-  </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>`, fs = (t) => {
-  const [e] = Y(), [, n] = St(), [i, a] = A({}), l = q(() => {
-    const { width: r, height: o } = t;
-    if (r < e) {
-      const c = parseFloat((r / e).toFixed(2).toString());
-      let u = {};
-      const m = o * c;
-      o && (u = {
-        // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (o - m) / m * 100 + "%"
-      }), a({
-        position: "relative",
-        top: 0,
-        transform: `scale(${c})`,
-        transformOrigin: "top left",
-        ...u,
-        maxWidth: "none"
-      }), n(c * 100);
-    } else
-      a({}), n(100);
-  }, [e, t, n]);
-  return C(() => {
-    l();
-  }, [e, t, n, l]), i;
-};
-let Et, Mt;
-typeof document < "u" && (Et = document);
-typeof window < "u" && (Mt = window);
-const Nt = I.createContext({ document: Et, window: Mt }), X = () => I.useContext(Nt), { Provider: xs, Consumer: Gn } = Nt;
-class Lt extends kt {
-  componentDidMount() {
-    this.props.contentDidMount();
-  }
-  componentDidUpdate() {
-    this.props.contentDidUpdate();
-  }
-  render() {
-    return Pt.only(this.props.children);
-  }
-}
-L(Lt, "propTypes", {
-  children: w.element.isRequired,
-  contentDidMount: w.func.isRequired,
-  contentDidUpdate: w.func.isRequired
-});
-class et extends kt {
-  constructor(n, i) {
-    super(n, i);
-    L(this, "setRef", (n) => {
-      this.nodeRef.current = n;
-      const { forwardedRef: i } = this.props;
-      typeof i == "function" ? i(n) : i && (i.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 = I.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 i = this.props.contentDidMount, a = this.props.contentDidUpdate, l = n.defaultView || n.parentView, r = /* @__PURE__ */ s.jsx(Lt, { contentDidMount: i, contentDidUpdate: a, children: /* @__PURE__ */ s.jsx(xs, { value: { document: n, window: l }, children: /* @__PURE__ */ s.jsx("div", { className: "frame-content", children: this.props.children }) }) }), o = this.getMountTarget();
-    return [mt.createPortal(this.props.head, this.getDoc().head), mt.createPortal(r, o)];
-  }
-  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(et, "propTypes", {
-  style: w.object,
-  // eslint-disable-line
-  head: w.node,
-  initialContent: w.string,
-  mountTarget: w.string,
-  contentDidMount: w.func,
-  contentDidUpdate: w.func,
-  children: w.oneOfType([w.element, w.arrayOf(w.element)])
-}), L(et, "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 ys = I.forwardRef((t, e) => /* @__PURE__ */ s.jsx(et, { ...t, forwardedRef: e }));
-function rt(t) {
-  const e = window.getComputedStyle(t), n = e.display;
-  if (n === "flex" || n === "inline-flex") {
-    const i = e.flexDirection;
-    return i === "column" || i === "column-reverse" ? "vertical" : "horizontal";
-  } else if (n === "grid") {
-    const i = e.gridAutoFlow, a = e.gridTemplateRows, l = e.gridTemplateColumns;
-    return i.includes("column") || a.split(" ").length > l.split(" ").length ? "vertical" : "horizontal";
-  } else if (n === "block" || n === "inline-block")
-    return "vertical";
-  return "horizontal";
-}
-let x = null, S = [], H = null, Z = null;
-const yt = (t, e, n) => {
-  if (!x || !t)
-    return;
-  const i = x == null ? void 0 : x.getElementById("placeholder"), a = S.map(([c]) => c), l = a.reduce(
-    (c, u) => Math.abs(u - n) < Math.abs(c - n) ? u : c,
-    0
-  ), r = a.indexOf(l);
-  if (!S[r])
-    return;
-  const o = S[r];
-  i.style.width = e === "vertical" ? o[2] + "px" : "2px", i.style.height = e === "vertical" ? "2px" : o[2] + "px", i.style.display = "block", e === "vertical" ? (i.style.top = o[0] + "px", i.style.left = o[1] + "px") : (i.style.top = o[1] + "px", i.style.left = o[0] + "px");
-};
-function bs(t, e) {
-  let n = 0, i = 1 / 0;
-  return e.forEach((a, l) => {
-    const r = Math.abs(a[0] - t);
-    r < i && (i = r, n = l);
-  }), n;
-}
-const ks = (t) => {
-  const n = rt(t) === "horizontal";
-  S = [], Array.from(t.children).forEach((i, a) => {
-    if (i.classList.contains("pointer-events-none"))
-      return;
-    const l = n ? i.offsetLeft : i.offsetTop, r = n ? [i.offsetTop, i.clientHeight] : [i.offsetLeft, i.clientWidth];
-    if (S.push([l, r[0], r[1]]), a === t.children.length - 1) {
-      const o = n ? i.offsetLeft + i.clientWidth : i.offsetTop + i.clientHeight;
-      S.push([o, r[0], r[1]]);
-    }
-  });
-}, vs = vt((t) => {
-  var a;
-  const e = t.target, n = rt(e), i = (a = x == null ? void 0 : x.defaultView) == null ? void 0 : a.scrollY;
-  n === "vertical" ? yt(e, n, t.clientY + i) : yt(e, n, t.clientX);
-}, 0);
-function bt() {
-  const t = x == null ? void 0 : x.getElementById("placeholder");
-  t.style.display = "none", js("pointer-none"), ws();
-}
-function js(t) {
-  (x == null ? void 0 : x.querySelectorAll(`.${t}`)).forEach((n) => {
-    n.classList.remove(t);
-  });
-}
-function ws() {
-  const t = x == null ? void 0 : x.querySelector('[data-drop="yes"]');
-  t && t.removeAttribute("data-drop");
-}
-const Cs = () => {
-  const { document: t } = X(), [e, n] = b(_e), { addCoreBlock: i } = Ae(), [, a] = F(), [, l] = T(), { moveBlocks: r } = At(), [, o] = b(Bt), [c, u] = b(it), [, m] = b(Dt), d = () => {
-    bt(), n(!1), o(""), u(null), m(null), S = [];
-  };
-  return x = t, {
-    isDragging: e,
-    onDragOver: (p) => {
-      p.preventDefault(), p.stopPropagation(), vs(p);
-    },
-    onDrop: (p) => {
-      var B;
-      H == null || H.classList.remove("drop-target");
-      const g = H, k = rt(g) === "vertical" ? p.clientY + ((B = x == null ? void 0 : x.defaultView) == null ? void 0 : B.scrollY) : p.clientX;
-      Z = bs(k, S);
-      const v = c, j = g.getAttribute("data-block-id");
-      if (v === H) {
-        d();
-        return;
-      }
-      if (!V(v, "_id")) {
-        i(v, j === "canvas" ? null : j, Z), setTimeout(d, 300);
-        return;
-      }
-      let _ = g.getAttribute("data-block-id");
-      _ === null && (_ = p.target.parentElement.getAttribute("data-block-id")), r([v._id], _, Z), d(), setTimeout(bt, 300);
-    },
-    onDragEnter: (p) => {
-      const g = p, y = g.target;
-      H = y;
-      const k = y.getAttribute("data-block-id");
-      m(k), g.stopPropagation(), g.preventDefault(), S = [], ks(y), y.classList.add("drop-target"), n(!0), a(""), l([]);
-    }
-  };
-};
-function at(t) {
-  return t.getAttribute("data-block-id") ? t : t.closest("[data-block-id]");
-}
-function _s(t) {
-  t.container.innerHTML = "", t.container.parentNode.removeChild(t.container);
-  var e = document.querySelector(".ql-toolbar");
-  e && e.parentNode.removeChild(e), t = null;
-}
-const As = () => {
-  const t = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], e = Se(), [, n] = F(), [i, a] = b(U);
-  return (l) => {
-    var d;
-    if (i)
-      return;
-    const r = at(l.target), o = r.getAttribute("data-block-type");
-    if (!o || !t.includes(o))
-      return;
-    const c = r.cloneNode(!0);
-    r.style.display = "none", Array.from(c.attributes).forEach((p) => {
-      p.name !== "class" && c.removeAttribute(p.name);
-    }), o === "Text" && (c.style.display = "inline-block"), r.parentNode.insertBefore(c, r.nextSibling);
-    const u = new Ye(c, { placeholder: "Type here..." });
-    function m() {
-      const p = u.getText(0, u.getLength());
-      e([r.getAttribute("data-block-id")], { content: p }), r.removeAttribute("style"), c.removeEventListener("blur", m, !0), _s(u), a(""), n("");
-    }
-    c.addEventListener("blur", m, !0), c.addEventListener("keydown", (p) => {
-      (p.key === "Enter" || p.key === "Escape") && m();
-    }), u.focus(), (d = c.querySelector(".ql-clipboard")) == null || d.remove(), a(r.getAttribute("data-block-id"));
-  };
-}, Ss = () => {
-  const [, t] = P(), [e, n] = T(), [, i] = F(), [a] = b(U), [l] = b(Be);
-  return (r) => {
-    if (a)
-      return;
-    r.stopPropagation();
-    const o = at(r.target);
-    if (o != null && o.getAttribute("data-block-id") && (o == null ? void 0 : o.getAttribute("data-block-id")) === "container") {
-      n([]), t([]), i("");
-      return;
-    }
-    if (o != null && o.getAttribute("data-block-parent")) {
-      const c = o.getAttribute("data-style-prop"), u = o.getAttribute("data-style-id"), m = o.getAttribute("data-block-parent");
-      e.includes(m) || l == null || l.closeAll(), t([{ id: u, prop: c, blockId: m }]), n([m]);
-    } else if (o != null && o.getAttribute("data-block-id")) {
-      let c = o.getAttribute("data-block-id");
-      e.includes(c) || l == null || l.closeAll(), t([]), n([c]);
-    }
-    i("");
-  };
-}, Bs = vt((t, e) => {
-  const n = at(t.target);
-  n != null && n.getAttribute("data-style-id") && e(n.getAttribute("data-style-id"));
-}, 100), Is = () => {
-  const [, t] = F(), [e] = b(U);
-  return (n) => {
-    e || Bs(n, t);
-  };
-}, Ds = ({ children: t }) => {
-  const { document: e } = X(), [n] = T(), [i, a] = P();
-  C(() => {
-    setTimeout(() => {
-      if (!D(i))
-        return;
-      const u = Ft(e, J(n));
-      if (u) {
-        const m = u.getAttribute("data-style-prop");
-        if (m) {
-          const d = u.getAttribute("data-style-id"), p = u.getAttribute("data-block-parent");
-          a([{ id: d, prop: m, blockId: p }]);
-        }
-      }
-    }, 100);
-  }, [e, n, a, i]);
-  const l = As(), r = Ss(), o = Is(), c = Cs();
-  return /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      "data-block-id": "canvas",
-      id: "canvas",
-      onClick: r,
-      onDoubleClick: l,
-      onMouseMove: o,
-      ...jt(c, "isDragging"),
-      className: "relative mb-5 h-full max-w-full px-1 " + (c.isDragging ? "dragging" : ""),
-      children: t
-    }
-  );
-}, Ft = (t, e) => t.querySelector(`[data-block-id="${e}"]`), Ts = () => {
-  const { document: t } = X();
-  return Ue(t), null;
-}, Es = ({ block: t, label: e }) => {
-  const [, n] = T(), [, i] = F(), [, a] = b(it), l = Je("dnd");
-  return /* @__PURE__ */ s.jsxs(
-    "div",
-    {
-      className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
-      draggable: l ? "true" : "false",
-      onDragStart: (r) => {
-        r.dataTransfer.setData("text/plain", JSON.stringify(zt(t, ["_id", "_type", "_name"]))), a(t), setTimeout(() => {
-          n([]), i(null);
-        }, 200);
-      },
-      children: [
-        /* @__PURE__ */ s.jsx(Jt, {}),
-        e
-      ]
-    }
-  );
-}, Ms = ({ selectedBlockElement: t, block: e }) => {
-  const n = Ie(), i = De(), [, a] = T(), [, l] = P(), [r] = b(U), { floatingStyles: o, refs: c, update: u } = Ge({
-    placement: "top-start",
-    middleware: [Ze(), Xe()],
-    elements: {
-      reference: t
-    }
-  });
-  Qe(t, () => u(), t !== null);
-  const m = h(e, "_parent", null), d = D(h(e, "_name", "")) ? h(e, "_type", "") : h(e, "_name", "");
-  return !t || !e || r ? null : /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsxs(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      ref: c.setFloating,
-      style: o,
-      onClick: (p) => {
-        p.stopPropagation(), p.preventDefault();
-      },
-      onKeyDown: (p) => p.stopPropagation(),
-      className: "z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
-      children: [
-        /* @__PURE__ */ s.jsx(Es, { label: d, block: e }),
-        /* @__PURE__ */ s.jsxs("div", { className: "flex gap-2 px-1", children: [
-          m && /* @__PURE__ */ s.jsx(
-            te,
-            {
-              className: "hover:scale-105",
-              onClick: () => {
-                l([]), a([m]);
-              }
-            }
-          ),
-          Te(h(e, "_type", "")) ? /* @__PURE__ */ s.jsx(ee, { className: "hover:scale-105", onClick: () => i([e == null ? void 0 : e._id]) }) : null,
-          Ee(h(e, "_type", "")) ? /* @__PURE__ */ s.jsx(se, { className: "hover:scale-105", onClick: () => n([e == null ? void 0 : e._id]) }) : null
-        ] })
-      ]
-    }
-  ) });
-}, Ns = ({ model: t }) => {
-  const [e] = Me(), [n] = T(), [i] = Ct(), [a] = F(), [l] = P(), [r] = b(Bt), { document: o, window: c } = X(), [u] = A(o == null ? void 0 : o.getElementById("highlighted-block")), [m] = A(
-    o == null ? void 0 : o.getElementById("selected-block")
-  ), [d] = A(
-    o == null ? void 0 : o.getElementById("selected-styling-block")
-  ), [p] = A(o == null ? void 0 : o.getElementById("dragged-block"));
-  C(() => {
-    i ? o == null || o.documentElement.classList.add("dark") : o == null || o.documentElement.classList.remove("dark");
-  }, [i, o]);
-  const g = h(e, "headingFont", "DM Sans"), y = h(e, "bodyFont", "DM Sans");
-  return C(() => {
-    const k = h(e, "primaryColor", "#000"), v = h(e, "secondaryColor", "#FFF"), j = h(e, "bodyBgLightColor", "#fff"), _ = h(e, "bodyBgDarkColor", "#000"), B = h(e, "bodyTextDarkColor", "#000"), E = h(e, "bodyTextLightColor", "#fff"), R = ns([
-      { color: k, name: "primary" },
-      { color: v, name: "secondary" }
-    ]), $ = {
-      "bg-light": j,
-      "bg-dark": _,
-      "text-dark": B,
-      "text-light": E
-    }, f = h(e, "roundedCorners", "0");
-    !c || !c.tailwind || (c.tailwind.config = {
-      darkMode: "class",
-      theme: {
-        extend: {
-          container: {
-            center: !0,
-            padding: "1rem",
-            screens: {
-              "2xl": "1400px"
-            }
-          },
-          fontFamily: {
-            heading: [g],
-            body: [y]
-          },
-          borderRadius: {
-            DEFAULT: `${f || "0"}px`
-          },
-          colors: { ...$, ...R }
-        }
-      },
-      plugins: [ts, es, ss]
-    });
-  }, [e, c, g, y]), C(() => {
-    m && (m.textContent = `${O(n, (k) => `[data-block-id="${k}"]`).join(",")}{
-                outline: 1px solid ${n.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
-            }`);
-  }, [n, m]), C(() => {
-    if (!r) {
-      p.textContent = "";
-      return;
-    }
-    p.textContent = `[data-block-id="${r}"]{ pointer-events: none !important; opacity: 0.2 !important}`;
-  }, [r]), C(() => {
-    u && (u.textContent = a ? `[data-style-id="${a}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
-  }, [a, n, u]), C(() => {
-    d && (d.textContent = `${O(l, ({ id: k }) => `[data-style-id="${k}"]`).join(",")}{
-                outline: 1px solid #42a1fc !important; outline-offset: -1px;
-            }`);
-  }, [l, d]), C(() => {
-    const k = h(e, "bodyTextLightColor", "#64748b"), v = h(e, "bodyTextDarkColor", "#94a3b8"), j = h(e, "bodyBgLightColor", "#FFFFFF"), _ = h(e, "bodyBgDarkColor", "#0f172a");
-    o.body.className = `font-body antialiased text-[${k}] bg-[${j}] dark:text-[${v}] dark:bg-[${_}]`;
-  }, [e, o, t]), t === "page" ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-    g && /* @__PURE__ */ s.jsx(
-      "link",
-      {
-        id: "heading-font",
-        rel: "stylesheet",
-        type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${g.replace(
-          / /g,
-          "+"
-        )}:wght@300;400;500;600;700;800;900&display=swap`,
-        media: "all"
-      }
-    ),
-    y && g !== y && /* @__PURE__ */ s.jsx(
-      "link",
-      {
-        id: "body-font",
-        rel: "stylesheet",
-        type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${y.replace(
-          / /g,
-          "+"
-        )}:wght@300;400;500;600;700;800;900&display=swap`,
-        media: "all"
-      }
-    ),
-    g && /* @__PURE__ */ s.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${g}",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;
-}, Ls = () => b(Ne), Fs = (t, e) => {
-  const n = ["xs", "sm", "md", "lg", "xl", "2xl"], i = n.indexOf(e), a = t.split(" ");
-  let l = new Array(n.length).fill(!1);
-  for (const r of a) {
-    let [o, c] = r.split(":");
-    c || (c = o, o = "xs");
-    const u = n.indexOf(o);
-    if (u <= i) {
-      const m = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], d = ["hidden"];
-      if (m.includes(c))
-        for (let p = u; p < n.length; p++)
-          l[p] = !0;
-      else if (d.includes(c))
-        for (let p = u; p < n.length; p++)
-          l[p] = !1;
-    }
-  }
-  return l[i];
-}, Rs = (t) => {
-  const e = {};
-  return Object.keys(t).forEach((n) => {
-    nt(t[n]) && t[n].startsWith(ht) && (e[n] = t[n].replace(ht, "").split(","));
-  }), e;
-}, Hs = Ut((t) => {
-  const e = t.replace(Tt, "").split(",");
-  return os(e[0], e[1]);
-});
-function Ps(t, e) {
-  return h(t, `${e}_attrs`, {});
-}
-function $s(t, e) {
-  const n = {};
-  return Object.keys(t).forEach((i) => {
-    if (nt(t[i]) && t[i].startsWith(Tt)) {
-      const a = Hs(t[i]), l = Ps(t, i);
-      n[i] = {
-        className: a,
-        "data-style-prop": i,
-        "data-block-parent": t._id,
-        "data-style-id": `${i}-${t._id}`,
-        ...l
-      };
-      const r = V(l, "x-show") || V(l, "x-if");
-      r && (n.__isHidden = r && !Fs(a, e));
-    }
-  }), n;
-}
-function Os(t, e) {
-  const n = h(t, "_bindings", {});
-  return D(n) ? { ...t } : (Wt(n, (i, a) => {
-    nt(i) && h(e, i, null) && (t[a] = h(e, i, null));
-  }), t);
-}
-function st({ blocks: t }) {
-  const [e] = It(), [n] = b(Le), [i] = b(it), [a] = b(Dt), [, l] = Y(), [r] = Ls(), o = q((d) => $s(d, l), [l]), [c] = We(), [u] = b(U), m = q(
-    (d) => d.reduce((p, g) => {
-      const y = h(r, g, {});
-      return { ...p, ...y };
-    }, {}),
-    [r, e]
-  );
-  return /* @__PURE__ */ s.jsx(s.Fragment, { children: I.Children.toArray(
-    t.map((d, p) => {
-      if (u === d._id)
-        return null;
-      const g = Rs(d), y = {};
-      D(g) || Object.keys(g).forEach((R) => {
-        y[R] = I.Children.toArray(
-          g[R].map(($) => /* @__PURE__ */ s.jsx(st, { blocks: [qt(e, { _id: $ })] }))
-        );
-      });
-      const k = wt(e, { _parent: d._id });
-      y.children = k.length ? /* @__PURE__ */ s.jsx(st, { blocks: k }) : null;
-      const v = is(d._type), j = h(v, "builderComponent", h(v, "component", null));
-      if (Vt(j))
-        return /* @__PURE__ */ s.jsx("noscript", { children: `<!-- ${d == null ? void 0 : d._type} not registered -->` });
-      const _ = V(v, "getBlockStateFrom") ? v == null ? void 0 : v.getBlockStateFrom(d, e) : [], B = m(_), E = o(d);
-      return h(E, "__isHidden", !1) && !gt(n, d._id) ? null : /* @__PURE__ */ s.jsx(Q, { children: I.createElement(j, {
-        blockProps: {
-          ...gt(n, d._id) ? { "force-show": "" } : {},
-          "data-block-id": d._id,
-          "data-block-type": d._type,
-          ...i ? (
-            // @ts-ignore
-            {
-              "data-dnd": Fe(d._type, i == null ? void 0 : i._type) ? "yes" : "no",
-              "data-dnd-dragged": i._id === d._id ? "yes" : "no"
-            }
-          ) : {},
-          ...a === d._id ? { "data-drop": "yes" } : {}
-        },
-        index: p,
-        ...Os(d, c),
-        ...jt(E, ["__isHidden"]),
-        ...y,
-        inBuilder: !0,
-        blockState: B
-      }) });
-    })
-  ) });
-}
-const zs = () => {
-  const [t] = It(), e = D(t) ? null : /* @__PURE__ */ s.jsx(qe, { children: /* @__PURE__ */ s.jsx(st, { blocks: wt(t, (n) => D(n._parent)) }) });
-  return /* @__PURE__ */ s.jsx(s.Fragment, { children: e });
-}, Us = (t, e) => t.querySelector(`[data-style-id="${e}"]`), Ws = () => {
-  const [t] = b(Re), [e] = He(), [n] = Y(), [, i] = T(), a = Pe(), [, l] = F(), r = ct(null), o = ct(null), [c, u] = A({ width: 0, height: 0 }), m = fs(c), [d, p] = A(0), [g, y] = A([]), [, k] = A([]), [, v] = b($e), [j, _] = P(), B = z("loading", !1), E = z("htmlDir", "ltr");
-  C(() => {
-    const { clientWidth: f, clientHeight: M } = o.current;
-    u({ width: f, height: M }), d === 0 && p(f);
-  }, [o, n, d]);
-  const R = (f, M = 0) => {
-    const { top: N } = f.getBoundingClientRect();
-    return N + M >= 0 && N - M <= window.innerHeight;
-  };
-  C(() => {
-    var f, M;
-    if (a && a.type !== "Multiple" && r.current) {
-      const N = Ft(r.current.contentDocument, a._id);
-      N && (R(N) || (M = (f = r.current) == null ? void 0 : f.contentWindow) == null || M.scrollTo({ top: N.offsetTop, behavior: "smooth" }), y([N]));
-    }
-  }, [a]), C(() => {
-    if (!D(j) && r.current) {
-      const f = Us(
-        r.current.contentDocument,
-        J(j).id
-      );
-      k(f ? [f] : [null]);
-    } else
-      k([null]);
-  }, [j]);
-  const $ = $t(() => {
-    let f = gs;
-    return f = f.replace("__HTML_DIR__", E), t === "offline" && (f = f.replace(
-      "https://old.chaibuilder.com/offline/tailwind.cdn.js",
-      "/offline/tailwind.cdn.js"
-    ), f = f.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), f = f.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), f;
-  }, [t]);
-  return /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      onClick: () => {
-        i([]), _([]);
-      },
-      onMouseLeave: () => setTimeout(() => l(""), 300),
-      className: "relative mx-auto h-full w-full overflow-hidden",
-      style: d > 0 && !D(m) ? { width: e ? "100%" : d } : {},
-      ref: o,
-      children: /* @__PURE__ */ s.jsxs(
-        ys,
-        {
-          contentDidMount: () => v(r.current),
-          ref: r,
-          id: "canvas-iframe",
-          style: { width: `${n}px`, ...m },
-          className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: $,
-          children: [
-            /* @__PURE__ */ s.jsx(Ts, {}),
-            /* @__PURE__ */ s.jsx(
-              Ms,
-              {
-                block: a,
-                selectedBlockElement: J(g)
-              }
-            ),
-            /* @__PURE__ */ s.jsx(Ns, { model: "page" }),
-            /* @__PURE__ */ s.jsx(rs, { children: /* @__PURE__ */ s.jsx(Ds, { children: B ? /* @__PURE__ */ s.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ s.jsx(tt, { className: "h-full" }) }) : /* @__PURE__ */ s.jsx(zs, {}) }) }),
-            /* @__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"
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}, qs = I.lazy(() => import("./CodeEditor-cY6z8D4N.js")), Zn = () => {
-  const [t] = Oe();
-  return /* @__PURE__ */ s.jsxs("div", { className: "flex h-full w-full flex-col", children: [
-    /* @__PURE__ */ s.jsx(hs, {}),
-    /* @__PURE__ */ s.jsxs("div", { className: "relative flex h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
-      /* @__PURE__ */ s.jsx(Q, { fallback: /* @__PURE__ */ s.jsx(tt, { className: "h-full" }), children: /* @__PURE__ */ s.jsx(Ve, { children: /* @__PURE__ */ s.jsx(Ws, {}) }) }),
-      t ? /* @__PURE__ */ s.jsx(Q, { fallback: /* @__PURE__ */ s.jsx(tt, { className: "h-full" }), children: /* @__PURE__ */ s.jsx(as, { enable: { top: !0, bottom: !1 }, className: "max-h-[400px] min-h-[200px]", children: /* @__PURE__ */ s.jsx(qs, {}) }) }) : null
-    ] })
-  ] });
-};
-export {
-  Zn as default
-};