@chaibuilder/sdk 1.2.22 → 1.2.23

package/dist/CanvasArea-MajWGr9z.js

@@ -1,908 +0,0 @@
-var Le = Object.defineProperty;
-var Re = (e, t, n) => t in e ? Le(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var M = (e, t, n) => (Re(e, typeof t != "symbol" ? t + "" : t, n), n);
-import { j as s } from "./jsx-runtime-WbnYoNE9.js";
-import A, { createElement as oe, useCallback as G, useState as C, useEffect as k, Component as me, Children as Fe, Suspense as ge, useRef as ie, useMemo as Pe } from "react";
-import { map as $, includes as ae, toUpper as Y, round as $e, throttle as fe, noop as F, isEmpty as S, first as W, omit as Oe, pick as He, get as f, isString as X, memoize as ze, each as Ue, find as We, filter as xe, isNull as qe, has as Ke } from "lodash-es";
-import { ResetIcon as re, MobileIcon as le, LaptopIcon as Ve, DesktopIcon as Ye, DotsVerticalIcon as Je, EraserIcon as Qe, ZoomInIcon as Ze, DragHandleDots2Icon as Ge, ArrowUpIcon as Xe, CopyIcon as et, TrashIcon as tt } from "@radix-ui/react-icons";
-import { v as ye, B as q, V as be, aB as nt, aC as st, aD as ot, aE as it, aF as at, N as ee, ab as rt, h as te, aG as lt, aH as dt, aI as ct, aJ as pt, aK as ut, aL as ht, aM as mt, r as B, ac as E, A as gt, a as ft, b as xt, c as yt, d as bt, e as vt, f as kt, g as wt, ai as jt, O as ve, aA as U, aN as Ct, Y as L, a5 as Bt, aO as R, E as ne, t as ke, q as we, s as je, z as Dt, aP as It, aQ as Ce, aR as St, aS as _t, F as Nt, aT as Mt, a1 as At, aU as Et, S as Be } from "./index-IPJAbzzO.js";
-import { useTranslation as K } from "react-i18next";
-import { useAtom as w } from "jotai";
-import de from "react-dom";
-import v from "prop-types";
-import { Quill as Tt } from "react-quill";
-import { u as Lt } from "./useAddBlockByDrop-V8xo-PNQ.js";
-import { useFeature as De } from "flagged";
-import { flip as Rt } from "@floating-ui/dom";
-import { useFloating as Ft, shift as Pt } from "@floating-ui/react-dom";
-import { useResizeObserver as $t } from "@react-hookz/web";
-import { tailwindcssPaletteGenerator as Ot } from "@bobthered/tailwindcss-palette-generator";
-import { Provider as Ht } from "react-wrap-balancer";
-import { twMerge as zt } from "tailwind-merge";
-import { S as ce, a as Ie } from "./MODIFIERS-WQdaNvb8.js";
-import { getBlockComponent as Ut } from "@chaibuilder/runtime";
-import { u as Wt, B as qt, E as Kt } from "./index-UP_4awU9.js";
-import "./_commonjsHelpers-UyOWmZb0.js";
-import "./Functions-7jnEwJyw.js";
-import "clsx";
-import "@radix-ui/react-toggle";
-import "class-variance-authority";
-import "./Class-3k8xjeiM.js";
-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 "i18next";
-import "react-dnd";
-import "@minoru/react-dnd-treeview";
-import "react-hotkeys-hook";
-const Vt = () => {
-  const { hasUndo: e, hasRedo: t, undo: n, redo: a } = ye();
-  return /* @__PURE__ */ s.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ s.jsx(q, { disabled: !e(), size: "sm", onClick: n, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ s.jsx(re, {}) }),
-    /* @__PURE__ */ s.jsx(q, { disabled: !t(), onClick: a, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ s.jsx(re, { className: "rotate-180 scale-y-[-1] transform" }) })
-  ] });
-};
-function Yt() {
-  const [e, t] = be(), { t: n } = K();
-  return /* @__PURE__ */ s.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ s.jsx(nt, { htmlFor: "dark-mode-switch", children: n("dark_mode") }),
-    /* @__PURE__ */ s.jsxs(
-      st,
-      {
-        id: "dark-mode-switch",
-        checked: e,
-        onCheckedChange: () => {
-          t(!e);
-        },
-        className: `${e ? "bg-violet-600" : "bg-violet-300"}
-          relative ml-2 inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`,
-        children: [
-          /* @__PURE__ */ s.jsx("span", { className: "sr-only", children: n("use_setting") }),
-          /* @__PURE__ */ s.jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: `${e ? "translate-x-5" : "translate-x-0"}
-            pointer-events-none -mt-px inline-block h-[18px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-const pe = ({ landscape: e = !1 }) => /* @__PURE__ */ s.jsxs(
-  "svg",
-  {
-    className: e ? "rotate-90" : "",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 13 13",
-    xmlSpace: "preserve",
-    width: 13,
-    height: 13,
-    children: [
-      /* @__PURE__ */ 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"
-          }
-        }
-      )
-    ]
-  }
-), Jt = [
-  {
-    title: "mobile_xs_title",
-    content: "mobile_xs_content",
-    breakpoint: "xs",
-    icon: /* @__PURE__ */ s.jsx(le, {}),
-    width: 400
-  },
-  {
-    title: "mobile_sm_title",
-    content: "mobile_sm_content",
-    breakpoint: "sm",
-    icon: /* @__PURE__ */ s.jsx(le, { className: "rotate-90" }),
-    width: 640
-  },
-  {
-    title: "tablet_md_title",
-    content: "tablet_md_content",
-    breakpoint: "md",
-    icon: /* @__PURE__ */ s.jsx(pe, {}),
-    width: 800
-  },
-  {
-    title: "tablet_lg_title",
-    content: "tablet_lg_content",
-    breakpoint: "lg",
-    icon: /* @__PURE__ */ s.jsx(pe, { landscape: !0 }),
-    width: 1024
-  },
-  {
-    title: "desktop_xl_title",
-    content: "desktop_xl_content",
-    breakpoint: "xl",
-    icon: /* @__PURE__ */ s.jsx(Ve, {}),
-    width: 1420
-  },
-  {
-    title: "large_desktop_2xl_title",
-    content: "large_desktop_2xl_content",
-    breakpoint: "2xl",
-    icon: /* @__PURE__ */ s.jsx(Ye, {}),
-    width: 1920
-  }
-], ue = ({
-  title: e,
-  content: t,
-  currentBreakpoint: n,
-  breakpoint: a,
-  width: i,
-  icon: l,
-  onClick: d
-}) => {
-  const { t: o } = K();
-  return /* @__PURE__ */ s.jsxs(ot, { children: [
-    /* @__PURE__ */ s.jsx(it, { asChild: !0, children: /* @__PURE__ */ s.jsx(
-      q,
-      {
-        onClick: () => d(i),
-        size: "sm",
-        variant: a === n ? "secondary" : "ghost",
-        children: l
-      }
-    ) }),
-    /* @__PURE__ */ s.jsx(at, { 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(e) }),
-      /* @__PURE__ */ s.jsx("p", { className: "text-xs", children: o(t) })
-    ] }) }) })
-  ] });
-}, Qt = () => {
-  const [, e, t] = ee(), [n, a] = rt(), { t: i } = K(), l = te("breakpoints", Jt), d = (o) => {
-    n.includes(o) ? n.length > 2 && a(n.filter((r) => r !== o)) : a((r) => [...r, o]);
-  };
-  return l.length < 4 ? /* @__PURE__ */ s.jsx("div", { className: "flex items-center rounded-md", children: $(l, (o) => /* @__PURE__ */ oe(ue, { ...o, onClick: t, key: o.breakpoint, currentBreakpoint: e })) }) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center rounded-md", children: [
-    $(
-      l.filter((o) => ae(n, Y(o.breakpoint))),
-      (o) => /* @__PURE__ */ oe(ue, { ...o, onClick: t, key: o.breakpoint, currentBreakpoint: e })
-    ),
-    /* @__PURE__ */ s.jsxs(lt, { children: [
-      /* @__PURE__ */ s.jsx(dt, { asChild: !0, children: /* @__PURE__ */ s.jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ s.jsx(Je, { className: "scale-90 transform" }) }) }),
-      /* @__PURE__ */ s.jsxs(ct, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ s.jsx(pt, { children: i("Breakpoints") }),
-        /* @__PURE__ */ s.jsx(ut, {}),
-        $(l, (o) => /* @__PURE__ */ s.jsx(
-          ht,
-          {
-            disabled: o.breakpoint === "xs",
-            onCheckedChange: () => d(Y(o.breakpoint)),
-            checked: ae(n, Y(o.breakpoint)),
-            children: i(o.title)
-          },
-          o.breakpoint
-        ))
-      ] })
-    ] })
-  ] });
-}, Zt = () => {
-  const { t: e } = K(), { setNewBlocks: t } = mt(), [, n] = B(), [, a] = E(), i = G(() => {
-    t([]), n([]), a([]);
-  }, [t]);
-  return /* @__PURE__ */ s.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ s.jsxs(gt, { children: [
-    /* @__PURE__ */ s.jsx(ft, { asChild: !0, children: /* @__PURE__ */ s.jsxs(q, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
-      /* @__PURE__ */ s.jsx(Qe, {}),
-      " ",
-      e("clear")
-    ] }) }),
-    /* @__PURE__ */ s.jsxs(xt, { className: "border-border", children: [
-      /* @__PURE__ */ s.jsxs(yt, { children: [
-        /* @__PURE__ */ s.jsx(bt, { children: e("clear_canvas_title") }),
-        /* @__PURE__ */ s.jsx(vt, { children: e("clear_canvas_description") })
-      ] }),
-      /* @__PURE__ */ s.jsxs(kt, { children: [
-        /* @__PURE__ */ s.jsx(wt, { children: e("cancel") }),
-        /* @__PURE__ */ s.jsx(jt, { onClick: i, children: e("yes") })
-      ] })
-    ] })
-  ] }) });
-}, Gt = () => {
-  const e = te("darkMode", !1), [t] = ve();
-  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: [
-      e ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsx(Yt, {}),
-        /* @__PURE__ */ s.jsx(U, { orientation: "vertical" })
-      ] }) : null,
-      /* @__PURE__ */ s.jsx(Qt, {}),
-      /* @__PURE__ */ s.jsx(U, { orientation: "vertical" }),
-      /* @__PURE__ */ s.jsxs("div", { className: "flex w-12 items-center justify-center gap-x-1 space-x-0 font-medium", children: [
-        /* @__PURE__ */ s.jsx(Ze, { className: "h-3.5 w-3.5 flex-shrink-0" }),
-        " ",
-        /* @__PURE__ */ s.jsxs("div", { className: "text-xs leading-3", children: [
-          $e(t, 0),
-          "%"
-        ] })
-      ] }),
-      /* @__PURE__ */ s.jsx(U, { orientation: "vertical" }),
-      /* @__PURE__ */ s.jsx(Vt, {})
-    ] }),
-    /* @__PURE__ */ s.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ s.jsx(U, { orientation: "vertical" }),
-      /* @__PURE__ */ s.jsx(Zt, {})
-    ] })
-  ] });
-}, Xt = `<!doctype html>
-<html class="scroll-smooth h-full overflow-y-auto">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://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%; }
-    </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>`, en = (e) => {
-  const [t] = ee(), [, n] = ve(), [a, i] = C({}), l = G(() => {
-    const { width: d, height: o } = e;
-    if (d < t) {
-      const r = parseFloat((d / t).toFixed(2).toString());
-      let c = {};
-      const p = o * r;
-      o && (c = {
-        // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (o - p) / p * 100 + "%"
-      }), i({
-        position: "relative",
-        top: 0,
-        transform: `scale(${r})`,
-        transformOrigin: "top left",
-        ...c,
-        maxWidth: "none"
-      }), n(r * 100);
-    } else
-      i({}), n(100);
-  }, [t, e, n]);
-  return k(() => {
-    l();
-  }, [t, e, n, l]), a;
-};
-let Se, _e;
-typeof document < "u" && (Se = document);
-typeof window < "u" && (_e = window);
-const Ne = A.createContext({ document: Se, window: _e }), V = () => A.useContext(Ne), { Provider: tn, Consumer: Cs } = Ne;
-class Me extends me {
-  componentDidMount() {
-    this.props.contentDidMount();
-  }
-  componentDidUpdate() {
-    this.props.contentDidUpdate();
-  }
-  render() {
-    return Fe.only(this.props.children);
-  }
-}
-M(Me, "propTypes", {
-  children: v.element.isRequired,
-  contentDidMount: v.func.isRequired,
-  contentDidUpdate: v.func.isRequired
-});
-class Q extends me {
-  constructor(n, a) {
-    super(n, a);
-    M(this, "setRef", (n) => {
-      this.nodeRef.current = n;
-      const { forwardedRef: a } = this.props;
-      typeof a == "function" ? a(n) : a && (a.current = n);
-    });
-    M(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
-    M(this, "loadCheck", () => setInterval(() => {
-      this.handleLoad();
-    }, 500));
-    this._isMounted = !1, this.nodeRef = A.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 a = this.props.contentDidMount, i = this.props.contentDidUpdate, l = n.defaultView || n.parentView, d = /* @__PURE__ */ s.jsx(Me, { contentDidMount: a, contentDidUpdate: i, children: /* @__PURE__ */ s.jsx(tn, { value: { document: n, window: l }, children: /* @__PURE__ */ s.jsx("div", { className: "frame-content", children: this.props.children }) }) }), o = this.getMountTarget();
-    return [de.createPortal(this.props.head, this.getDoc().head), de.createPortal(d, 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.
-M(Q, "propTypes", {
-  style: v.object,
-  // eslint-disable-line
-  head: v.node,
-  initialContent: v.string,
-  mountTarget: v.string,
-  contentDidMount: v.func,
-  contentDidUpdate: v.func,
-  children: v.oneOfType([v.element, v.arrayOf(v.element)])
-}), M(Q, "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 nn = A.forwardRef((e, t) => /* @__PURE__ */ s.jsx(Q, { ...e, forwardedRef: t }));
-let I = null, O = [], P = null, Ae = null;
-function sn(e) {
-  const t = window.getComputedStyle(e), n = parseInt(t.paddingLeft, 10), a = parseInt(t.paddingTop, 10), i = parseInt(t.paddingRight, 10), l = parseInt(t.paddingBottom, 10);
-  return { paddingLeft: n, paddingTop: a, paddingRight: i, paddingBottom: l };
-}
-const he = (e, t, n) => {
-  if (!I)
-    return;
-  const a = e.getBoundingClientRect(), i = I == null ? void 0 : I.getElementById("placeholder"), { paddingLeft: l, paddingTop: d, paddingRight: o, paddingBottom: r } = sn(e);
-  i.style.width = t === "vertical" ? a.width - l - o + "px" : "2px", i.style.height = t === "vertical" ? "2px" : a.height - d - r + "px", i.style.display = "block";
-  const c = O.reduce(
-    (p, h) => Math.abs(h - n) < Math.abs(p - n) ? h : p
-  );
-  Ae = O.indexOf(c), t === "vertical" ? (i.style.top = e.offsetTop + c + "px", i.style.left = e.offsetLeft + l + "px") : (i.style.top = e.offsetTop + d + "px", i.style.left = e.offsetLeft + c + "px");
-}, on = (e) => {
-  const t = Ee(e), n = window.getComputedStyle(e), a = t === "horizontal", i = parseInt(n.paddingLeft), l = parseInt(n.paddingTop);
-  let d = a ? i : l;
-  O = [d], Array.from(e.children).forEach((o) => {
-    const r = window.getComputedStyle(o), c = parseInt(
-      a ? r.marginLeft + r.marginRight : r.marginTop + r.marginBottom
-    ), p = a ? o.offsetWidth : o.offsetHeight;
-    O.push(d + p + c), d += p + c;
-  });
-};
-function Ee(e) {
-  const t = window.getComputedStyle(e).display, n = window.getComputedStyle(e).flexDirection;
-  if (t === "flex")
-    return n === "column" || n === "column-reverse" ? "vertical" : "horizontal";
-  if (t === "grid") {
-    const a = window.getComputedStyle(e).gridTemplateRows, i = window.getComputedStyle(e).gridTemplateColumns;
-    if (a.includes("auto"))
-      return "vertical";
-    if (i.includes("auto"))
-      return "horizontal";
-  }
-  return t === "block" ? "vertical" : "horizontal";
-}
-const an = fe((e) => {
-  const t = e.target, n = Ee(t);
-  if (n === "vertical") {
-    const a = e.clientY - t.offsetTop;
-    he(t, n, a);
-  } else {
-    const a = e.clientX - t.offsetLeft;
-    he(t, n, a);
-  }
-}, 200), rn = (e) => {
-  e.preventDefault(), e.stopPropagation(), an(e);
-};
-function J() {
-  const e = I == null ? void 0 : I.getElementById("placeholder");
-  e.style.display = "none";
-}
-const ln = () => {
-  const { document: e } = V(), [t, n] = w(Ct), a = Lt(), i = De("dnd"), [, l] = L(), [, d] = B();
-  return I = e, {
-    isDragging: t,
-    "data-dnd": "branch",
-    onDragOver: i ? rn : F,
-    onDrop: i ? (o) => {
-      P == null || P.classList.remove("outline", "outline-green-300", "outline-2", "-outline-offset-2");
-      const r = JSON.parse(o.dataTransfer.getData("text/plain"));
-      let c = o.target.getAttribute("data-block-id");
-      c === null && (c = o.target.parentElement.getAttribute("data-block-id")), a({ block: r, dropTargetId: c || null, relativeIndex: Ae }), n(!1), J(), setTimeout(() => {
-        J();
-      }, 300);
-    } : F,
-    onDragEnter: i ? (o) => {
-      const r = o;
-      P = r.target, r.stopPropagation(), r.preventDefault(), O = [];
-      const c = r.target;
-      on(c), c.classList.add("outline", "outline-green-300", "outline-2", "-outline-offset-2"), n(!0), l(""), d([]);
-    } : F,
-    onDragLeave: i ? (o) => {
-      const r = o;
-      P = null, r.stopPropagation(), r.preventDefault(), r.target.classList.remove("outline", "outline-green-300", "outline-2", "-outline-offset-2");
-    } : F,
-    onMouseOut: i ? () => {
-      n(!1), J();
-    } : F
-  };
-};
-function se(e) {
-  return e.getAttribute("data-block-id") ? e : e.closest("[data-block-id]");
-}
-function dn(e) {
-  e.container.innerHTML = "", e.container.parentNode.removeChild(e.container);
-  var t = document.querySelector(".ql-toolbar");
-  t && t.parentNode.removeChild(t), e = null;
-}
-const cn = () => {
-  const e = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], t = Bt(), [, n] = L(), [a, i] = w(R);
-  return (l) => {
-    var h;
-    if (a)
-      return;
-    const d = se(l.target), o = d.getAttribute("data-block-type");
-    if (!o || !e.includes(o))
-      return;
-    const r = d.cloneNode(!0);
-    d.style.display = "none", Array.from(r.attributes).forEach((m) => {
-      m.name !== "class" && r.removeAttribute(m.name);
-    }), o === "Text" && (r.style.display = "inline-block"), d.parentNode.insertBefore(r, d.nextSibling);
-    const c = new Tt(r, { placeholder: "Type here..." });
-    function p() {
-      const m = c.getText(0, c.getLength());
-      t([d.getAttribute("data-block-id")], { content: m }), d.removeAttribute("style"), r.removeEventListener("blur", p, !0), dn(c), i(""), n("");
-    }
-    r.addEventListener("blur", p, !0), c.focus(), (h = r.querySelector(".ql-clipboard")) == null || h.remove(), i(d.getAttribute("data-block-id"));
-  };
-}, pn = () => {
-  const [, e] = E(), [, t] = B(), [n] = w(R);
-  return (a) => {
-    if (n)
-      return;
-    a.stopPropagation();
-    const i = se(a.target);
-    if (i != null && i.getAttribute("data-block-parent")) {
-      const l = i.getAttribute("data-style-prop"), d = i.getAttribute("data-style-id"), o = i.getAttribute("data-block-parent");
-      e([{ id: d, prop: l, blockId: o }]), t([o]);
-    } else
-      i != null && i.getAttribute("data-block-id") && t([i.getAttribute("data-block-id")]);
-  };
-}, un = fe((e, t) => {
-  const n = se(e.target);
-  n != null && n.getAttribute("data-style-id") && t(n.getAttribute("data-style-id"));
-}, 100), hn = () => {
-  const [, e] = L(), [t] = w(R);
-  return (n) => {
-    t || un(n, e);
-  };
-}, mn = ({ children: e }) => {
-  const { document: t } = V(), [n] = B(), [a, i] = E();
-  k(() => {
-    setTimeout(() => {
-      if (!S(a))
-        return;
-      const c = Te(t, W(n));
-      if (c) {
-        const p = c.getAttribute("data-style-prop");
-        if (p) {
-          const h = c.getAttribute("data-style-id"), m = c.getAttribute("data-block-parent");
-          i([{ id: h, prop: p, blockId: m }]);
-        }
-      }
-    }, 100);
-  }, [t, n, i, a]);
-  const l = cn(), d = pn(), o = hn(), r = ln();
-  return /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      "data-block-id": "container",
-      id: "canvas",
-      onClick: d,
-      onDoubleClick: l,
-      onMouseMove: o,
-      ...Oe(r, "isDragging"),
-      className: "relative mb-5 h-full max-w-full " + (r.isDragging ? "dragging" : ""),
-      children: e
-    }
-  );
-}, Te = (e, t) => e.querySelector(`[data-block-id="${t}"]`), gn = () => {
-  const { window: e } = V(), [t, n] = B(), [a] = ne(), [, i] = E(), { undo: l, redo: d } = ye(), o = ke(), [, r] = we(), c = je(), { savePage: p } = Dt(), [h] = w(R), [, m] = w(It), b = (g) => {
-    g.key === "Enter" && (g.preventDefault(), t.length === 1 && m(W(t)));
-  }, j = (g) => {
-    const u = a.find((y) => y._id === g);
-    return u ? u._parent : null;
-  };
-  return k(() => {
-    const g = (u) => {
-      if (u.key === "Escape") {
-        n([]), i([]);
-        return;
-      }
-      if (b(u), !h && (u.key === "Delete" || u.key === "Backspace") && (u.preventDefault(), c(t)), u.ctrlKey || u.metaKey) {
-        if (u.key === "ArrowUp") {
-          u.preventDefault();
-          const y = t.length > 0 ? j(t[0]) : null;
-          y && n([y]);
-        }
-        if (["z", "y", "d", "x", "c", "p", "s", "v"].includes(u.key)) {
-          if (h && ["x", "z", "v"].includes(u.key))
-            return !0;
-          u.preventDefault();
-        }
-        u.key === "s" && (u.stopPropagation(), u.preventDefault(), p()), u.key === "z" && l(), u.key === "y" && d(), u.key === "d" && o(t);
-      }
-    };
-    return e.removeEventListener("keydown", g), e.addEventListener("keydown", g), () => {
-      e.removeEventListener("keydown", g);
-    };
-  }, [t, n, l, c, r, d, o, h, p, e]), null;
-}, fn = ({ block: e, label: t }) => {
-  const [, n] = B(), [, a] = L(), [, i] = w(Ce), l = De("dnd");
-  return /* @__PURE__ */ s.jsxs(
-    "div",
-    {
-      className: "mr-10 flex cursor-grab items-center space-x-1 px-1",
-      draggable: l ? "true" : "false",
-      onDragStart: (d) => {
-        d.dataTransfer.setData("text/plain", JSON.stringify(He(e, ["_id", "_type"]))), i(e._id), setTimeout(() => {
-          n([]), a(null);
-        }, 200);
-      },
-      children: [
-        /* @__PURE__ */ s.jsx(Ge, {}),
-        t
-      ]
-    }
-  );
-}, xn = ({ selectedBlockElement: e, block: t }) => {
-  const n = je(), a = ke(), [, i] = B(), [, l] = E(), [d] = w(R), { floatingStyles: o, refs: r, update: c } = Ft({
-    placement: "top-start",
-    middleware: [Pt(), Rt()],
-    elements: {
-      reference: e
-    }
-  });
-  $t(e, () => c(), e !== null);
-  const p = f(t, "_parent", null), h = S(f(t, "_name", "")) ? f(t, "_type", "") : f(t, "_name", "");
-  return !e || !t || d ? null : /* @__PURE__ */ s.jsxs(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      ref: r.setFloating,
-      style: o,
-      onClick: (m) => {
-        m.stopPropagation(), m.preventDefault();
-      },
-      onKeyDown: (m) => m.stopPropagation(),
-      className: "z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
-      children: [
-        /* @__PURE__ */ s.jsx(fn, { label: h, block: t }),
-        /* @__PURE__ */ s.jsxs("div", { className: "flex gap-2 px-1", children: [
-          p && /* @__PURE__ */ s.jsx(
-            Xe,
-            {
-              className: "hover:scale-105",
-              onClick: () => {
-                l([]), i([p]);
-              }
-            }
-          ),
-          St(f(t, "_type", "")) ? /* @__PURE__ */ s.jsx(et, { className: "hover:scale-105", onClick: () => a([t == null ? void 0 : t._id]) }) : null,
-          _t(f(t, "_type", "")) ? /* @__PURE__ */ s.jsx(tt, { className: "hover:scale-105", onClick: () => n([t == null ? void 0 : t._id]) }) : null
-        ] })
-      ]
-    }
-  );
-}, yn = ({ model: e }) => {
-  const [t] = Nt(), [n] = B(), [a] = be(), [i] = L(), [l] = E(), [d] = w(Ce), { document: o, window: r } = V(), [c] = C(o == null ? void 0 : o.getElementById("highlighted-block")), [p] = C(
-    o == null ? void 0 : o.getElementById("selected-block")
-  ), [h] = C(
-    o == null ? void 0 : o.getElementById("selected-styling-block")
-  ), [m] = C(o == null ? void 0 : o.getElementById("dragged-block"));
-  k(() => {
-    a ? o == null || o.documentElement.classList.add("dark") : o == null || o.documentElement.classList.remove("dark");
-  }, [a, o]);
-  const b = f(t, "headingFont", "DM Sans"), j = f(t, "bodyFont", "DM Sans");
-  return k(() => {
-    const g = f(t, "primaryColor", "#000"), u = f(t, "secondaryColor", "#FFF"), y = Ot({
-      colors: [g, u],
-      names: ["primary", "secondary"]
-    });
-    y.primary.DEFAULT = g, y.secondary.DEFAULT = u;
-    const T = f(t, "roundedCorners", "0");
-    !r || !r.tailwind || (r.tailwind.config = {
-      darkMode: "class",
-      theme: {
-        fontFamily: {
-          heading: [b],
-          body: [j]
-        },
-        extend: {
-          borderRadius: {
-            global: `${T || "0"}px`
-          },
-          colors: y
-        }
-      },
-      plugins: [
-        // @ts-ignore
-        r.tailwind.plugin.withOptions(({ prefix: H = "ui" } = {}) => ({ addVariant: z }) => {
-          for (const D of ["open", "checked", "selected", "active", "disabled"])
-            z(`${H}-${D}`, [
-              `&[data-headlessui-state~="${D}"]`,
-              `:where([data-headlessui-state~="${D}"]) &`
-            ]), z(`${H}-not-${D}`, [
-              `&[data-headlessui-state]:not([data-headlessui-state~="${D}"])`,
-              `:where([data-headlessui-state]:not([data-headlessui-state~="${D}"])) &:not([data-headlessui-state])`
-            ]);
-        })
-      ]
-    });
-  }, [t, r, b, j]), k(() => {
-    p && (p.textContent = `${$(n, (g) => `[data-block-id="${g}"]`).join(",")}{
-                outline: 1px solid ${n.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
-            }`);
-  }, [n, p]), k(() => {
-    if (!d) {
-      m.textContent = "";
-      return;
-    }
-    m.textContent = `[data-block-id="${d}"]{ pointer-events: none !important; opacity: 0.2 !important}`;
-  }, [d]), k(() => {
-    c && (c.textContent = i ? `[data-style-id="${i}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
-  }, [i, n, c]), k(() => {
-    h && (h.textContent = `${$(l, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
-                outline: 1px solid #42a1fc !important; outline-offset: -1px;
-            }`);
-  }, [l, h]), k(() => {
-    const g = f(t, "bodyTextLightColor", "#64748b"), u = f(t, "bodyTextDarkColor", "#94a3b8"), y = f(t, "bodyBgLightColor", "#FFFFFF"), T = f(t, "bodyBgDarkColor", "#0f172a");
-    o.body.className = `font-body antialiased text-[${g}] bg-[${y}] dark:text-[${u}] dark:bg-[${T}]`;
-  }, [t, o, e]), e === "page" ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-    b && /* @__PURE__ */ s.jsx(
-      "link",
-      {
-        id: "heading-font",
-        rel: "stylesheet",
-        type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${b.replace(
-          / /g,
-          "+"
-        )}:wght@300;400;500;600;700;800;900&display=swap`,
-        media: "all"
-      }
-    ),
-    j && b !== j && /* @__PURE__ */ s.jsx(
-      "link",
-      {
-        id: "body-font",
-        rel: "stylesheet",
-        type: "text/css",
-        href: `https://fonts.googleapis.com/css2?family=${j.replace(
-          / /g,
-          "+"
-        )}:wght@300;400;500;600;700;800;900&display=swap`,
-        media: "all"
-      }
-    ),
-    b && /* @__PURE__ */ s.jsx("style", { children: `h1,h2,h3,h4,h5,h6{font-family: "${b}",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;
-}, bn = (e) => {
-  const t = {};
-  return Object.keys(e).forEach((n) => {
-    X(e[n]) && e[n].startsWith(ce) && (t[n] = e[n].replace(ce, "").split(","));
-  }), t;
-}, vn = ze((e) => {
-  const t = e.replace(Ie, "").split(",");
-  return zt(t[0], t[1]);
-});
-function kn(e, t) {
-  return f(e, `${t}_attrs`, {});
-}
-function wn(e) {
-  const t = {};
-  return Object.keys(e).forEach((n) => {
-    if (X(e[n]) && e[n].startsWith(Ie)) {
-      const a = vn(e[n]);
-      t[n] = {
-        className: a,
-        "data-style-prop": n,
-        "data-block-parent": e._id,
-        "data-style-id": `${n}-${e._id}`,
-        ...kn(e, n)
-      };
-    }
-  }), t;
-}
-function jn(e, t) {
-  const n = f(e, "_bindings", {});
-  return S(n) ? { ...e } : (Ue(n, (a, i) => {
-    X(a) && f(t, a, null) && (e[i] = f(t, a, null));
-  }), e);
-}
-function Z({ blocks: e }) {
-  const [t] = ne(), n = G((l) => wn(l), []), [a] = Wt(), [i] = w(R);
-  return /* @__PURE__ */ s.jsx(s.Fragment, { children: A.Children.toArray(
-    e.map((l, d) => {
-      if (i === l._id)
-        return null;
-      const o = bn(l), r = {};
-      S(o) || Object.keys(o).forEach((m) => {
-        r[m] = A.Children.toArray(
-          o[m].map((b) => /* @__PURE__ */ s.jsx(Z, { blocks: [We(t, { _id: b })] }))
-        );
-      });
-      const c = xe(t, { _parent: l._id });
-      r.children = c.length ? /* @__PURE__ */ s.jsx(Z, { blocks: c }) : null;
-      const p = Ut(l._type), h = f(p, "builderComponent", f(p, "component", null));
-      return qe(h) ? /* @__PURE__ */ s.jsx("noscript", { children: `<!-- ${l == null ? void 0 : l._type} not registered -->` }) : /* @__PURE__ */ s.jsx(ge, { children: A.createElement(h, {
-        blockProps: {
-          "data-block-id": l._id,
-          "data-block-type": l._type,
-          "data-dnd": Ke(p, "canAcceptBlock") ? "branch" : "leaf"
-        },
-        inBuilder: !0,
-        index: d,
-        ...jn(l, a),
-        ...n(l),
-        ...r
-      }) });
-    })
-  ) });
-}
-const Cn = () => {
-  const [e] = ne(), t = S(e) ? null : /* @__PURE__ */ s.jsx(qt, { children: /* @__PURE__ */ s.jsx(Z, { blocks: xe(e, (n) => S(n._parent)) }) });
-  return /* @__PURE__ */ s.jsx(Ht, { children: t });
-}, Bn = (e, t) => e.querySelector(`[data-style-id="${t}"]`), Dn = () => {
-  const [e] = w(Mt), [t] = we(), [n] = ee(), [, a] = B(), i = At(), [, l] = L(), d = ie(null), o = ie(null), [r, c] = C({ width: 0, height: 0 }), p = en(r), [h, m] = C(0), [b, j] = C([]), [, g] = C([]), [, u] = w(Et), [y, T] = E(), H = te("loading", !1);
-  k(() => {
-    const { clientWidth: x, clientHeight: _ } = o.current;
-    c({ width: x, height: _ }), h === 0 && m(x);
-  }, [o, n, h]);
-  const z = (x, _ = 0) => {
-    const { top: N } = x.getBoundingClientRect();
-    return N + _ >= 0 && N - _ <= window.innerHeight;
-  };
-  k(() => {
-    var x, _;
-    if (i && i.type !== "Multiple" && d.current) {
-      const N = Te(d.current.contentDocument, i._id);
-      N && (z(N) || (_ = (x = d.current) == null ? void 0 : x.contentWindow) == null || _.scrollTo({ top: N.offsetTop, behavior: "smooth" }), j([N]));
-    }
-  }, [i]), k(() => {
-    if (!S(y) && d.current) {
-      const x = Bn(
-        d.current.contentDocument,
-        W(y).id
-      );
-      g(x ? [x] : [null]);
-    } else
-      g([null]);
-  }, [y]);
-  const D = Pe(() => {
-    let x = Xt;
-    return e === "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;
-  }, [e]);
-  return /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      onClick: () => {
-        a([]), T([]);
-      },
-      onMouseLeave: () => setTimeout(() => l(""), 300),
-      className: "relative mx-auto h-full w-full overflow-hidden",
-      style: h > 0 && !S(p) ? { width: t ? "100%" : h } : {},
-      ref: o,
-      children: /* @__PURE__ */ s.jsxs(
-        nn,
-        {
-          contentDidMount: () => u(d.current),
-          ref: d,
-          id: "canvas-iframe",
-          style: { width: `${n}px`, ...p },
-          className: "relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: D,
-          children: [
-            /* @__PURE__ */ s.jsx(gn, {}),
-            /* @__PURE__ */ s.jsx(
-              xn,
-              {
-                block: i,
-                selectedBlockElement: W(b)
-              }
-            ),
-            /* @__PURE__ */ s.jsx(yn, { model: "page" }),
-            /* @__PURE__ */ s.jsx(mn, { children: H ? /* @__PURE__ */ s.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ s.jsx(Be, { className: "h-full" }) }) : /* @__PURE__ */ s.jsx(Cn, {}) }),
-            /* @__PURE__ */ s.jsx("br", {}),
-            /* @__PURE__ */ s.jsx("div", { id: "placeholder", className: "absolute z-[99999] max-w-full bg-green-500 transition-transform" })
-          ]
-        }
-      )
-    }
-  );
-}, Bs = () => /* @__PURE__ */ s.jsxs("div", { className: "flex h-full w-full flex-col", children: [
-  /* @__PURE__ */ s.jsx(Gt, {}),
-  /* @__PURE__ */ s.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__ */ s.jsx(ge, { fallback: /* @__PURE__ */ s.jsx(Be, { className: "h-full" }), children: /* @__PURE__ */ s.jsx(Kt, { children: /* @__PURE__ */ s.jsx(Dn, {}) }) }) })
-] });
-export {
-  Bs as default
-};