var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
  return value;
};
import { c as e } from "./clsx-9b3c581e.js";
import { _ as t, l as i } from "./lodash-62e10097.js";
import o, { useRef as s, useContext as n, useState as a, useCallback as r, useMemo as p } from "react";
import { s as l, O as h, v as c } from "./react-d37f274e.js";
import { ag as d, U as u, aV as g, aD as m, aG as f, aX as y } from "./util-31a5c3fb.js";
import { E as x, gg as w, gh as D } from "./comps-f4e34e6a.js";
import { av as b, af as $, L as H } from "./constants-6ebafe5b.js";
import { bB as v, eA as E, cn as T, j as I, a as z, eB as S, F as R, e7 as M } from "./common-64096f9e.js";
import { u as k, a as L } from "./styled-components-f8105b39.js";
import { c1 as O } from "./vendor-208d0ff5.js";
import { l as C } from "./loglevel-dd4a2561.js";
const P = 24, N = 8, _ = 1 / 0, j = { margin: [0, 0], containerPadding: [0, 0], containerWidth: 0, cols: 24, rowHeight: 8, maxRows: _ };
function A(e2) {
  const { margin: t2, containerPadding: i2, containerWidth: o2, cols: s2 } = e2;
  return (o2 - t2[0] * (s2 - 1) - 2 * i2[0]) / s2;
}
function F(e2, t2, i2, o2) {
  if (!Number.isFinite(e2))
    return e2;
  return Math.round(t2 * e2 + Math.max(0, e2 - 1) * i2);
}
function K(e2, t2, i2, o2, s2) {
  const { margin: n2, containerPadding: a2, rowHeight: r2 } = e2, p2 = A(e2), l2 = Math.round((r2 + n2[1]) * i2 + a2[1]), h2 = Math.round((p2 + n2[0]) * t2 + a2[0]), { width: c2, height: d2 } = W(e2, o2, s2);
  return { width: c2, height: d2, top: l2, left: h2 };
}
function W(e2, t2, i2, o2, s2) {
  const { margin: n2, rowHeight: a2, cols: r2, maxRows: p2 } = e2;
  return { width: F(t2, A(e2), n2[0]), height: F(i2, a2, n2[1]) };
}
function U(e2, t2, i2, o2, s2, n2 = { x: true, y: true }) {
  const { margin: a2, cols: r2, rowHeight: p2, maxRows: l2, containerPadding: h2 } = e2, c2 = A(e2);
  let d2 = Math.round((i2 - h2[0]) / (c2 + a2[0])), u2 = Math.round((t2 - h2[1]) / (p2 + a2[1]));
  return n2.x && (d2 = G(d2, 0, r2 - o2)), n2.y && (u2 = G(u2, 0, l2 - s2)), { x: d2, y: u2 };
}
function B(e2, t2, i2, o2 = { w: true, h: true, ceil: false }) {
  const { margin: s2, maxRows: n2, cols: a2, rowHeight: r2 } = e2, p2 = A(e2), l2 = o2.ceil ? Math.ceil : Math.round;
  let h2 = l2((t2 + s2[0]) / (p2 + s2[0])), c2 = l2((i2 + s2[1]) / (r2 + s2[1]));
  return o2.w && (h2 = G(h2, 1, a2)), o2.h && (c2 = G(c2, 1, n2)), { w: h2, h: c2 };
}
function G(e2, i2, o2) {
  return t.isNil(i2) || (e2 = Math.max(e2, i2)), t.isNil(o2) || (e2 = Math.min(e2, o2)), e2;
}
function Y(e2) {
  const { cols: t2, margin: i2, maxRows: o2, rowHeight: s2, width: n2, containerPadding: a2 } = e2;
  return { cols: t2, margin: i2, maxRows: o2, rowHeight: s2, containerWidth: n2, containerPadding: a2 ?? i2 };
}
function V(e2, t2, i2, o2) {
  const { width: s2, height: n2 } = W(i2, e2, t2);
  return B(o2, s2, n2);
}
function q(e2, t2, i2) {
  return Math.floor((e2 - 2 * t2) / i2);
}
function X(e2, t2, i2) {
  return (e2 - 2 * t2) / i2;
}
var J;
((e2) => {
  let t2 = {}, i2 = false;
  e2.setData = function(e3, o2) {
    t2[e3] = o2, i2 = true;
  }, e2.getData = function(e3) {
    return t2[e3];
  }, e2.clearData = function() {
    t2 = {}, i2 = false;
  }, e2.isDragging = function() {
    return i2;
  };
})(J || (J = {}));
const Q = k.div`
  background: ${(e2) => e2.$isSelected ? "module" === e2.$compType ? b : $ : "#B8B9BF"};
  border-radius: ${(e2) => "top" === e2.$position ? "4px 4px 0 0" : "0 0 4px 4px"};
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  font-size: 12px;
  line-height: 16px;
  top: ${(e2) => "top" === e2.$position ? "-16px" : "unset"};
  bottom: ${(e2) => "top" === e2.$position ? "unset" : "bottom" === e2.$position ? "-16px" : "0px"};
  height: 16px;
  right: 0;
  padding-right: 5px;
  padding-left: ${(e2) => e2.$isDraggable ? 0 : "5px"};
  display: flex;
  cursor: ${(e2) => e2.$isDraggable ? "grab" : "pointer"};
  z-index: 10;
`, Z = k.span`
  max-width: 208px;
  ${v};
`, ee = 1.5;
function te(e2) {
  return "module" === e2 ? [0, 0] : [8, 4];
}
const ie = k.div`
  width: 100%;
  height: 100%;
  overflow: hidden;

  ${(e2) => `${function(e3, t2, i2, o2, s2) {
  const n2 = "module" === o2 ? b : $, a2 = te(o2);
  let r2 = "transparent", p2 = "solid";
  return i2 || e3 ? r2 = n2 : t2 && (r2 = M(n2, 0.5), p2 = "dashed"), `
      border: 1.5px ${p2} ${r2};
      padding: 0px;
      // padding: ${s2 || !i2 ? 0 : a2[1] - ee}px;
      // padding-left: ${a2[0] - ee}px;
      // padding-right: ${a2[0] - ee}px;
  `;
}(Boolean(e2.$hover), e2.$showDashLine, e2.$isSelected, e2.$compType, e2.$isHidden)}`}
  & .module-wrapper {
    margin: ${-1.5}px;
  }

  ${(e2) => "image" === e2.$compType && e2.$needResizeDetector && "\n    display: inline-flex;\n    align-items: center;\n    > div:nth-last-of-type(1)\n    {\n      flex-grow: 1;\n    }\n  "}
`, oe = (e2, t2) => t2.$resizeHandles.includes(e2) ? "block" : "none", se = (e2, t2) => L`
  position: absolute;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  color: ${"module" === e2.$compType ? b : $};
  display: ${oe(t2, e2)};
`, ne = k(E)`
  ${(e2) => se(e2, "w")};
  left: -3.5px;
  transform: translate(0px, -50%);
`, ae = k(E)`
  ${(e2) => se(e2, "e")};
  right: -3.5px;
  transform: translate(0px, -50%);
`, re = (e2, t2) => L`
  position: absolute;
  height: 8px;
  width: 8px;
  border: 1px solid ${"module" === e2.$compType ? b : $};
  border-radius: 4px;
  background-color: #f5f5f6;
  z-index: 11;
  pointer-events: none;
  display: ${oe(t2, e2)};
`, pe = (e2, t2) => L`
  position: absolute;
  min-height: 7px;
  width: 7px;
  border: 1px solid ${"module" === e2.$compType ? b : $};
  border-radius: 4px;
  background-color: #f5f5f6;
  z-index: 1;
  pointer-events: none;
  display: ${oe(t2, e2)};
`, le = k.div`
  ${(e2) => pe(e2, "w")};
  left: -2.5px;
  top: 50%;
  transform: translate(0px, -50%);
`, he = k.div`
  ${(e2) => pe(e2, "e")};
  right: -2.5px;
  top: 50%;
  transform: translate(0px, -50%);
`, ce = k.div`
  ${(e2) => re(e2, "nw")};
  left: -2.5px;
  top: -2.5px;
`, de = k.div`
  ${(e2) => re(e2, "ne")};
  right: -2.5px;
  top: -2.5px;
`, ue = k.div`
  ${(e2) => re(e2, "sw")};
  left: -2.5px;
  bottom: -2.5px;
`, ge = k.div`
  ${(e2) => re(e2, "se")};
  right: -2.5px;
  bottom: -2.5px;
`, me = k(T)`
  g g {
    fill: #f5f5f6;
  }
`, fe = o.memo((e2) => {
  const t2 = s(null), i2 = n(x);
  let [o2, p2] = a(false);
  const c2 = r((e3) => {
    if (e3.stopPropagation(), J.isDragging())
      return;
    let i3 = e3.relatedTarget;
    for (; i3; ) {
      if (i3 === t2.current)
        return;
      i3 = i3.parentNode;
    }
    p2(true);
  }, [p2]), d2 = r((e3) => {
    e3.stopPropagation();
    let i3 = e3.relatedTarget;
    for (; i3; ) {
      if (i3 === t2.current)
        return;
      i3 = i3.parentNode;
    }
    p2(false);
  }, [p2]), u2 = e2.isSelectable ? { onMouseOver: c2, onMouseOut: d2, onClick: e2.onClick, $hover: o2 || void 0, $showDashLine: i2.showGridLines() || e2.hidden, $isSelected: e2.isSelected, $isHidden: e2.hidden } : { $hover: void 0, $showDashLine: false, $isSelected: false, $isHidden: false }, g2 = e2.isSelected ? H.compSelected : o2 ? H.compHover : e2.hidden ? H.compHidden : void 0, m2 = e2.autoHeight && !e2.placeholder, { ref: f2 } = l({ onResize: e2.onWrapperResize, handleHeight: m2, handleWidth: false }), { nameConfig: y2, resizeIconSize: w2 } = e2;
  return I("div", { id: e2.id, style: { ...e2.style, zIndex: g2 }, className: e2.className, children: z(ie, { ...u2, $compType: e2.compType, ref: f2, $needResizeDetector: m2, children: [e2.isSelectable && y2.show && (o2 || e2.isSelected || e2.hidden) && z(Q, { $compType: e2.compType, $isSelected: o2 || e2.isSelected, $position: y2.pos, $isDraggable: e2.isDraggable, ref: t2, children: [e2.isDraggable && I(S, {}), I(Z, { children: y2.name }), e2.hidden && I(me, {})] }), e2.isResizable && e2.isSelected && e2.autoHeight && z(R, "normal" === w2 ? { children: [I(ne, { $compType: e2.compType, $resizeHandles: e2.resizeHandles }), I(ae, { $compType: e2.compType, $resizeHandles: e2.resizeHandles })] } : { children: [I(he, { $compType: e2.compType, $resizeHandles: e2.resizeHandles }), I(le, { $compType: e2.compType, $resizeHandles: e2.resizeHandles })] }), e2.isResizable && e2.isSelected && !e2.autoHeight && z(R, { children: [I(ce, { $compType: e2.compType, $resizeHandles: e2.resizeHandles }), I(de, { $compType: e2.compType, $resizeHandles: e2.resizeHandles }), I(ue, { $compType: e2.compType, $resizeHandles: e2.resizeHandles }), I(ge, { $compType: e2.compType, $resizeHandles: e2.resizeHandles })] }), !m2 && e2.children, m2 && I(h, { refreshMode: "debounce", refreshRate: 250, onResize: e2.onInnerResize, observerOptions: { box: "border-box" }, children: I("div", { children: e2.children }) })] }) });
}), ye = "rgb(118, 136, 150)", xe = L`
  &::before {
    position: absolute;
    // background: ${ye};
    content: "";
  }
  // small middle circles
  &::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    // border-radius: 50%;
    // background: ${ye};
    top: calc(50% - 2px);
    left: calc(50% - 2px);
    border: none !important;
  }
`, we = L`
  ${xe}
  ${(e2) => "s" === e2.$axis ? "bottom: -10px;" : "top: -10px;"}
  /* left: -4px; */
  height: 12px !important;
  /* width: calc(100% + 8px) !important; */
  width: 100%;
  cursor: row-resize;
  &::before {
    top: 50%;
    right: 0px;
    left: 0px;
    height: 1px;
  }
`, De = L`
  ${xe}
  ${(e2) => "e" === e2.$axis ? "right: -10px;" : "left: -10px;"}
  width: 12px !important;
  top: 0px;
  /* height: calc(100% + 8px) !important; */
  height: 100%;
  cursor: col-resize;
  &::before {
    left: 50%;
    bottom: 0px;
    top: 0px;
    width: 1px;
  }
`, be = L`
  position: absolute;
  z-index: 3;
  width: 10px !important;
  height: 10px !important;
  &::after {
    width: 10px !important;
    height: 10px !important;
    border: none !important;
  }
  cursor: ${(e2) => e2.$axis + "-resize"} !important;
  ${(e2) => ["nw", "ne"].indexOf(e2.$axis) >= 0 ? "top: -5px;" : ""};
  ${(e2) => ["sw", "se"].indexOf(e2.$axis) >= 0 ? "bottom: -5px;" : ""};
  ${(e2) => ["sw", "nw"].indexOf(e2.$axis) >= 0 ? "left: -5px;" : ""};
  ${(e2) => ["se", "ne"].indexOf(e2.$axis) >= 0 ? "right: -5px;" : ""};
`, $e = k.div`
  position: absolute;
  background-image: none;
  ${(e2) => ["s", "n"].indexOf(e2.$axis) >= 0 ? we : ""};
  ${(e2) => ["w", "e"].indexOf(e2.$axis) >= 0 ? De : ""};
  ${(e2) => ["sw", "nw", "se", "ne"].indexOf(e2.$axis) >= 0 ? be : ""};
`, He = (e2, t2) => I($e, { ref: t2, $axis: e2, className: "react-resizable-handle" });
function ve(e2) {
  const i2 = t.max(Object.values(e2).map((e3) => e3.y + e3.h)) ?? 0;
  return t.max([i2, 0]) ?? 0;
}
function Ee(e2) {
  return { ...e2 };
}
function Te(e2, i2) {
  const s2 = o.Children.map(e2, (e3) => e3 == null ? void 0 : e3.key), n2 = o.Children.map(i2, (e3) => e3 == null ? void 0 : e3.key);
  return t.isEqual(s2, n2);
}
function Ie(e2, t2) {
  return e2.i !== t2.i && (!(e2.x + e2.w <= t2.x) && (!(e2.x >= t2.x + t2.w) && (!(e2.y + e2.h <= t2.y) && (!(e2.y >= t2.y + t2.h) && !d()))));
}
function ze({ top: e2, left: t2, width: i2, height: o2 }, s2, n2, a2, r2) {
  const p2 = `translate(${t2}px,${e2}px)`;
  let l2 = "auto";
  return (r2 || !n2 || a2 || s2 && /chart/i.test(s2)) && (l2 = `${o2}px`), { transform: p2, WebkitTransform: p2, MozTransform: p2, msTransform: p2, OTransform: p2, width: `${i2}px`, height: l2, position: "absolute" };
}
function Se(e2, t2, i2) {
  e2 = e2 || {};
  const s2 = {};
  o.Children.forEach(t2, (t3) => {
    if (null == (t3 == null ? void 0 : t3.key))
      return;
    const i3 = e2[t3.key];
    i3 && (s2[i3.i] = Ee(i3));
  });
  const n2 = function(e3, t3) {
    for (const i3 of Object.values(e3))
      i3.w > t3 && (i3.w = t3), i3.x + i3.w > t3 && (i3.x = t3 - i3.w);
    return e3;
  }(s2, i2);
  return n2;
}
function Re(e2, i2 = {}) {
  i2 = t.assignIn(i2, t.mapValues(t.pickBy(e2, (e3) => e3.isDragging), (e3) => ({ ...e3, isDragging: void 0 })));
  let o2 = function(e3) {
    return t.pickBy(e3, (e4) => e4.static);
  }(e2 = t.mapValues(e2, (e3) => ({ ...e3, isDragging: void 0 })));
  o2 = { ...o2, ...i2 }, t.size(i2) > 0 && (o2 = Re(o2));
  const s2 = t.sortBy(Object.values(e2), (e3) => e3.y);
  let n2 = t.sortBy(Object.values(o2), (e3) => e3.y);
  const a2 = {};
  for (const e3 of s2) {
    let t2;
    if (o2.hasOwnProperty(e3.i))
      t2 = o2[e3.i];
    else if (e3.hide)
      t2 = e3;
    else {
      let i3;
      n2 = Me(n2, e3.y), [t2, i3] = ke(e3, n2), Oe(n2, i3);
    }
    a2[t2.i] = t2;
  }
  return a2;
}
function Me(e2, t2) {
  return e2.filter((e3) => e3.y + e3.h > t2);
}
function ke(e2, t2) {
  const i2 = Ee(e2);
  let o2 = i2;
  for (const e3 of t2) {
    if (i2.y + i2.h < e3.y)
      break;
    const t3 = Le(i2, e3);
    t3 > 0 && (o2 = { ...o2, h: o2.h + t3 }), i2.y += t3;
  }
  return [i2, o2];
}
function Le(e2, t2) {
  return Ie(e2, t2) ? t2.y + t2.h - e2.y : 0;
}
function Oe(e2, t2) {
  let i2;
  for (e2.push(t2), i2 = e2.length - 1; i2 > 0; i2--) {
    const o2 = e2[i2 - 1];
    if (!(t2.y < o2.y || t2.y === o2.y && t2.x < o2.x))
      break;
    e2[i2] = o2;
  }
  e2[i2] = t2;
}
function Ce(e2, t2, i2) {
  let o2 = 0, s2 = 0;
  return e2.indexOf("w") > -1 && (o2 -= t2), e2.indexOf("n") > -1 && (s2 -= i2), { deltaX: o2, deltaY: s2 };
}
function Pe(e2, t2, i2) {
  return { top: e2.top + i2, left: e2.left + t2 };
}
function Ne(e2, t2, i2 = 1) {
  const o2 = t2.getBoundingClientRect();
  return { offsetX: (e2.clientX - o2.left) / i2, offsetY: (e2.clientY - o2.top) / i2 };
}
function _e(e2) {
  return e2.x < 0 || e2.y < 0 || !!e2.hide;
}
function je(e2) {
  return t.isNil(e2.isDraggable) || e2.isDraggable;
}
function Ae(e2) {
  return t.isNil(e2.isResizable) || e2.isResizable;
}
function Fe(e2, i2) {
  return e2.resizeHandles && 0 !== t.size(e2.resizeHandles) ? e2.resizeHandles : (o2 = i2 == null ? void 0 : i2.isSelected, s2 = i2 == null ? void 0 : i2.autoHeight, o2 ? s2 ? ["e", "w"] : ["s", "n", "w", "e", "sw", "nw", "se", "ne"] : []);
  var o2, s2;
}
function Ke(e2, t2) {
  const i2 = e2[t2];
  return i2 ? Object.values(e2).filter((e3) => e3.x < i2.x + i2.w && i2.x < e3.x + e3.w && e3.y + e3.h <= i2.y).map((e3) => e3.y + e3.h).reduce((e3, t3) => Math.max(e3, t3), 0) : 0;
}
function We(e2) {
  const i2 = t.min(Object.values(e2).map((e3) => e3.x)), o2 = t.min(Object.values(e2).map((e3) => e3.y));
  return t.mapValues(e2, (e3) => ({ ...e3, x: e3.x - i2, y: e3.y - o2 }));
}
function Ue(e2, i2) {
  const o2 = t.pick(e2, i2 ?? []);
  if (0 === t.size(o2))
    return { x: 0, y: ve(e2) };
  return { x: t.min(Object.values(o2).map((e3) => e3.x)) ?? 0, y: ve(o2) };
}
function Be(e2, t2 = 0, i2) {
  let { x: o2, w: s2 } = e2;
  return o2 < t2 && (s2 = Math.max(1, o2 + s2 - t2), o2 = t2), o2 + s2 > i2 && (s2 = Math.max(1, i2 - o2), o2 = i2 - s2), { ...e2, x: o2, w: s2 };
}
function Ge(e2, t2) {
  return e2.x >= 0 && e2.y >= 0 && e2.w > 0 && e2.h > 0 && e2.x + e2.w <= t2.cols && e2.y + e2.h <= t2.maxRows;
}
const Ye = "inCanvasCount";
function Ve() {
  return J.getData(Ye) ?? 0;
}
function qe(e2) {
  const t2 = Ve(), i2 = Math.max(-1, Math.min(1, t2 + e2));
  t2 !== i2 && J.setData(Ye, i2);
}
function Xe(e2, t2, i2) {
  e2.scrollTop = e2.scrollTop + (2 + 4 * t2) * i2;
}
const Je = o.createContext(true), Qe = k(c)`
  z-index: ${(e2) => 10 * e2.$zIndex};
`, Ze = o.memo((i2) => {
  const l2 = p(() => K({ margin: i2.margin, containerPadding: i2.containerPadding, containerWidth: i2.containerWidth, cols: i2.cols, rowHeight: i2.rowHeight, maxRows: i2.maxRows }, i2.x, i2.y, i2.w, i2.h), [i2.margin, i2.containerPadding, i2.containerWidth, i2.cols, i2.rowHeight, i2.maxRows, i2.x, i2.y, i2.w, i2.h, K]), [h2, c2] = a(), [d2, g2] = a(), m2 = s(null), f2 = n(x), y2 = s(void 0), w2 = r((e2) => {
    var _a;
    e2.stopPropagation();
    const { i: t2 } = i2;
    J.clearData(), J.setData("i", t2), e2.dataTransfer.setDragImage(u, 0, 0), (_a = i2.onDragStart) == null ? void 0 : _a.call(i2, t2, e2, m2.current);
  }, [i2.i, i2.onDragStart]), D2 = r((e2) => {
    var _a;
    e2.stopPropagation();
    const { i: t2 } = i2;
    (_a = i2.onDrag) == null ? void 0 : _a.call(i2, t2, e2, m2.current);
  }, [i2.i, i2.onDrag]), b2 = r((e2) => {
    var _a;
    const { i: t2 } = i2;
    (_a = i2.onDragEnd) == null ? void 0 : _a.call(i2, t2, e2, m2.current), J.clearData();
  }, [i2.i, i2.onDragEnd]), $2 = r((e2, { node: t2, size: o2, handle: s2 }, n2) => {
    e2.preventDefault(), e2.stopPropagation();
    const a2 = i2[n2];
    if (!a2)
      return;
    const r2 = h2;
    let p2 = d2, { cols: u2, maxRows: m3, x: f3, y: y3, w: x2, h: w3, i: D3, maxH: b3, minH: $3, minW: H3, maxW: v3 } = i2, [E3, T3] = [f3, y3];
    const I2 = s2.indexOf("n") >= 0, z3 = s2.indexOf("w") >= 0;
    if (I2 || z3)
      if ("onResizeStart" === n2)
        p2 = { left: l2.left, top: l2.top };
      else {
        if (!p2)
          throw new Error("onResize called before onResizeStart.");
        if ("onResize" === n2) {
          let e4 = 0, t3 = 0;
          if (r2) {
            const i3 = Ce(s2, o2.width - r2.width, o2.height - r2.height);
            [e4, t3] = [i3.deltaX, i3.deltaY];
          }
          p2 = Pe(p2, e4, t3);
        }
        const e3 = U(i2, p2.top, p2.left, i2.w, i2.h);
        [E3, T3] = [e3.x, e3.y];
      }
    c2("onResizeStop" === n2 ? void 0 : o2), g2("onResizeStop" === n2 ? void 0 : p2);
    let { w: S3, h: R3 } = B(i2, o2.width, o2.height);
    S3 = G(S3, H3, v3), R3 = G(R3, $3, b3);
    let M3 = I2 ? y3 + w3 : m3 - y3;
    S3 = G(S3, 1, z3 ? f3 + x2 : u2 - f3), R3 = G(R3, 1, M3), a2(D3, S3, R3, { e: e2, node: t2, size: o2, handle: s2, x: E3, y: T3 });
  }, [h2, d2, i2.cols, i2.maxRows, i2.x, i2.y, i2.w, i2.h, i2.i, i2.maxH, i2.minH, i2.minW, i2.maxW, l2.left, l2.top, Ce, Pe, U, B, c2, g2, G]), H2 = r((e2, t2) => {
    $2(e2, t2, "onResizeStop");
  }, [$2]), v2 = r((e2, t2) => {
    $2(e2, t2, "onResizeStart");
  }, [$2]), E2 = r((e2, t2) => {
    $2(e2, t2, "onResize");
  }, [$2]), T2 = r((e2, t2) => {
    const { i: o2 } = i2, s2 = `lowcoder-${i2.compType}`;
    return I("div", { className: s2, ref: m2, draggable: t2, onDragStart: t2 ? w2 : void 0, onDrag: D2, onDragEnd: b2, onMouseDown: (e3) => {
      var _a, _b;
      const t3 = (_a = f2.findUIParentContainer(i2.name)) == null ? void 0 : _a.toJsonValue();
      if (i2.compType.includes("lowcoder-comp-kanban") || ((_b = t3 == null ? void 0 : t3.compType) == null ? void 0 : _b.includes("lowcoder-comp-kanban")))
        return;
      if (i2.compType.includes("lowcoder-comp-excalidraw"))
        return;
      e3.stopPropagation();
      const o3 = new MouseEvent("mousedown");
      document.dispatchEvent(o3);
    }, children: I(Je.Provider, { value: J.getData("i") !== o2, children: e2 }) });
  }, [i2.i, i2.name, i2.compType, w2, b2, D2, f2.findUIParentContainer]), z2 = r((e2, t2, o2, s2) => {
    const { cols: n2, x: a2, minW: r2, minH: p2, maxW: l3, maxH: h3, resizeHandles: c3 } = i2, d3 = K(i2, 0, 0, r2, p2), u2 = K(i2, 0, 0, l3, h3), g3 = [d3.width, d3.height], m3 = [Math.min(u2.width, 1 / 0), Math.min(u2.height, 1 / 0)];
    return I(Qe, { draggableOpts: { disabled: !o2 }, className: o2 ? void 0 : "react-resizable-hide", width: t2.width, height: t2.height, minConstraints: g3, maxConstraints: m3, onResizeStart: v2, onResize: E2, onResizeStop: H2, resizeHandles: c3, handle: He, $zIndex: s2, isDroppable: J.getData("i") !== i2.i, children: e2 });
  }, [i2.i, i2.cols, i2.x, i2.minW, i2.minH, i2.maxW, i2.maxH, i2.resizeHandles, K, v2, H2, E2]), S2 = r((e2, o2, s2) => {
    var _a;
    if (t.isNil(o2))
      return;
    e2 || (e2 = l2.width);
    const n2 = te(i2.compType), { h: a2 } = B(i2, e2 + 2 * n2[0], o2 + 2 * n2[1], { w: true, h: true, ceil: true });
    i2.h !== a2 && ((_a = i2.onHeightChange) == null ? void 0 : _a.call(i2, i2.i, a2));
  }, [i2.i, i2.h, i2.compType, l2.width, i2.onHeightChange, te, B]), R2 = r((e2, i3) => {
    t.isNil(i3) || (y2.current = i3), S2(e2, i3);
  }, [y2, S2]), M2 = r(() => {
    S2(void 0, y2.current);
  }, [y2, S2]), k2 = r((e2) => {
    const { i: t2, name: o2, autoHeight: s2, isSelected: n2, hidden: a2, selectedSize: r2, clickItem: p2, placeholder: h3, showName: c3, isSelectable: d3, isResizable: u2, compType: g3, resizeHandles: m3 } = i2, f3 = c3.bottom - l2.top - l2.height, y3 = c3.top + l2.top;
    return I(fe, { compType: g3, id: t2, onClick: (e3) => {
      o2 && (p2 == null ? void 0 : p2(e3, o2));
    }, resizeIconSize: i2.h >= 4 ? "normal" : "small", autoHeight: !!s2, isSelected: !!n2, hidden: !!a2, nameConfig: { show: !(!O2 || !o2), name: o2, pos: y3 > 16 ? "top" : f3 > 16 ? "bottom" : "bottomInside" }, placeholder: h3, onInnerResize: R2, onWrapperResize: M2, isSelectable: d3, isResizable: u2 && 1 === r2, isDraggable: O2, resizeHandles: m3, children: e2 });
  }, [i2.i, i2.h, i2.name, i2.autoHeight, i2.isSelected, i2.hidden, i2.selectedSize, i2.clickItem, i2.placeholder, i2.showName.bottom, i2.showName.top, i2.isSelectable, i2.isResizable, i2.compType, i2.resizeHandles, l2.top, l2.height, R2, M2]), L2 = r(() => {
    let e2, t2, i3, o2;
    return h2 ? (e2 = Math.round(h2.width), t2 = Math.round(h2.height)) : (e2 = l2.width, t2 = l2.height), d2 ? (i3 = Math.round(d2.top), o2 = Math.round(d2.left)) : (i3 = l2.top, o2 = l2.left), { width: e2, height: t2, top: i3, left: o2 };
  }, [d2 == null ? void 0 : d2.top, d2 == null ? void 0 : d2.left, l2.height, l2.left, l2.top, l2.width, h2 == null ? void 0 : h2.width, h2 == null ? void 0 : h2.height]), { isDraggable: O2, isResizable: C2, layoutHide: P2, children: N2, isSelected: _2, clickItem: j2, zIndex: A2 } = i2, F2 = p(L2, [L2]), W2 = p(() => {
    let t2 = o.Children.only(N2), s2 = o.cloneElement(t2, { ref: m2, className: e("react-grid-item", i2.name, `ui-comp-${i2.compType}`, t2.props.className, i2.className), style: { ...i2.style, ...t2.props.style } });
    return s2 = k2(s2), s2 = o.cloneElement(s2, { className: e({ static: i2.static, resizing: Boolean(h2), "react-draggable": O2, "react-draggable-dragging": Boolean(d2), cssTransforms: true }), style: { ...ze(F2, i2.name, i2.autoHeight, i2.hidden, Boolean(J.isDragging())), opacity: P2 ? 0 : void 0, pointerEvents: P2 ? "none" : "auto" } }), s2 = z2(s2, F2, C2, A2), s2 = T2(s2, O2), s2;
  }, [F2, N2, m2, h2, d2, O2, P2, A2, i2.name, i2.compType, i2.className, i2.style, i2.static, i2.autoHeight, i2.hidden, ze, k2, z2, T2]);
  return p(() => W2, [W2]);
}, (e2, t2) => i.isEqual(e2, t2));
function et(e2, t2) {
  const { rowHeight: i2 } = e2;
  return { backgroundImage: `repeating-linear-gradient(to right, ${t2} 0px 1px, transparent 1px ${A(e2)}px)
      , repeating-linear-gradient(to bottom, ${t2} 0px 1px, transparent 1px ${i2}px)
    ` };
}
function tt(e2) {
  const t2 = { ...ze(e2.position), ...et(e2.positionParams, e2.lineColor) };
  return I("div", { style: t2 });
}
var it, ot = ((e2) => (e2.CHANGE_ITEM = "CHANGE_ITEM", e2.STICKY_ITEM = "STICKY_ITEM", e2.HIDE_ITEM = "HIDE_ITEM", e2.DELETE_ITEM = "DELETE_ITEM", e2.RENAME_ITEM = "RENAME_ITEM", e2))(ot || {});
function st(e2, t2) {
  return { type: "CHANGE_ITEM", key: e2, item: t2 };
}
function nt(e2, t2) {
  return { type: "STICKY_ITEM", key: e2, item: t2 };
}
function at(e2) {
  return { type: "DELETE_ITEM", key: e2 };
}
function rt(e2, i2, o2) {
  let s2 = e2;
  switch (i2.type) {
    case ot.CHANGE_ITEM:
      s2 = function(e3, t2) {
        return { ...e3, [t2.i]: t2 };
      }(e2, { ...e2[i2.key], ...i2.item });
      break;
    case ot.STICKY_ITEM:
      s2 = function(e3, t2, i3) {
        if (e3 = { ...e3, [t2.i]: t2 }, !i3)
          return e3;
        const o3 = [t2.i];
        for (; o3.length > 0; ) {
          const t3 = o3.shift(), s3 = e3[t3];
          i3.hasOwnProperty(t3) && i3[t3].forEach((t4) => {
            const i4 = e3[t4];
            if (i4 && !_e(i4)) {
              const n2 = Ke(e3, t4);
              e3[t4] = { ...i4, y: Math.max(s3.y + s3.h, n2) }, i4.h > 0 && o3.push(t4);
            }
          });
        }
        return e3;
      }(e2, { ...e2[i2.key], ...i2.item }, o2);
      break;
    case ot.HIDE_ITEM:
      s2 = function(e3, i3, o3) {
        return e3.hasOwnProperty(i3) ? [e3 = t.mapValues(e3, (e4) => e4.i === i3 ? o3(Ee(e4)) : e4), e3[i3]] : [e3, void 0];
      }(e2, i2.key, (e3) => ({ ...e3, hide: true }))[0];
      break;
    case ot.DELETE_ITEM:
      s2 = t.omit(e2, i2.key);
      break;
    case ot.RENAME_ITEM: {
      const o3 = e2[i2.sourceKey];
      if (t.isNil(o3))
        break;
      s2 = { ...t.omit(e2, [i2.sourceKey]), [i2.targetKey]: { ...o3, i: i2.targetKey } };
      break;
    }
  }
  return s2;
}
((e2) => {
  function t2(e3, t3) {
    return t3.type !== ot.CHANGE_ITEM && t3.type !== ot.DELETE_ITEM && t3.type !== ot.HIDE_ITEM || e3.type !== ot.CHANGE_ITEM && e3.type !== ot.DELETE_ITEM && e3.type !== ot.HIDE_ITEM || e3.key === t3.key;
  }
  function i2(e3, i3) {
    if (!e3)
      return [i3];
    let o2 = [];
    for (let a2 = e3.length - 1; a2 >= 0; --a2) {
      const r2 = e3[a2], p2 = (s2 = r2, (n2 = i3).type === ot.CHANGE_ITEM && s2.type === ot.CHANGE_ITEM && s2.key === n2.key ? st(s2.key, { ...s2.item, ...n2.item }) : n2.type !== ot.DELETE_ITEM || s2.type !== ot.CHANGE_ITEM && s2.type !== ot.DELETE_ITEM && s2.type !== ot.HIDE_ITEM || s2.key !== n2.key ? n2.type === ot.STICKY_ITEM && s2.type === ot.STICKY_ITEM && s2.key === n2.key ? nt(s2.key, { ...s2.item, ...n2.item }) : void 0 : n2);
      if (p2)
        i3 = p2;
      else if (o2.push(r2), t2(r2, i3)) {
        o2 = o2.concat(e3.slice(0, a2).reverse());
        break;
      }
    }
    var s2, n2;
    return o2.reverse(), o2.push(i3), o2;
  }
  e2.batchPush = function(e3, t3) {
    let o2 = e3 ?? [];
    return t3.forEach((e4) => {
      o2 = i2(o2, e4);
    }), o2;
  }, e2.push = i2;
})(it || (it = {}));
let pt = (e2, i2, o2, s2, n2 = false) => {
  const a2 = function(e3) {
    const i3 = Object.values(e3).map((t2) => {
      const i4 = Object.values(e3).filter((e4) => t2.y + t2.h === e4.y && t2.x < e4.x + e4.w && e4.x < t2.x + t2.w && t2.i !== e4.i).map((e4) => e4.i);
      return [t2.i, new Set(i4)];
    });
    return t.fromPairs(i3);
  }(e2), r2 = t.fromPairs(t.toPairs(i2).filter(([, e3]) => e3.hidden && !e3.isSelected).map(([t2]) => [t2, e2[t2].h]));
  if ([...t.toPairs(o2).filter(([t2]) => e2.hasOwnProperty(t2)).map(([t2, i3]) => e2[t2].h > i3 ? nt(t2, { h: i3 }) : st(t2, { h: i3 })), ...Object.keys(r2).map((e3) => nt(e3, { h: 0 })), ...s2 ?? []].forEach((t2) => {
    e2 = rt(e2, t2, a2);
  }), e2 = Re(e2), !n2) {
    t.toPairs(r2).map(([e3, t2]) => st(e3, { h: t2 })).forEach((t2) => {
      e2 = rt(e2, t2, a2);
    });
  }
  return e2;
};
pt = g(pt, {});
const lt = "draggingItem", ht = "flyStartInfo", ct = "flyOverInfo", dt = k.div`
  height: 100%;
  background-color: ${(e2) => "module" === e2.$compType ? b : $} !important;
`;
class ut extends o.Component {
  constructor() {
    super(...arguments);
    __publicField(this, "state", { layout: Se(this.props.layout, this.props.children, this.props.cols), nextTime: 0, children: [] });
    __publicField(this, "dragEnterCounter", 0);
    __publicField(this, "innerRef", o.createRef());
    __publicField(this, "ref", this.props.innerRef ?? this.innerRef);
    __publicField(this, "innerHeight", 0);
    __publicField(this, "onDragStart", (e2, i2, o2) => {
      var _a, _b;
      let { transformScale: s2, extraLayout: n2, droppingItem: a2 } = this.props;
      const r2 = a2 == null ? void 0 : a2.i, p2 = document.activeElement;
      if (p2 instanceof HTMLInputElement || p2 instanceof HTMLTextAreaElement)
        return void i2.preventDefault();
      let l2 = this.getSelectedKeys();
      l2.includes(e2) || (l2 = [e2], n2 = t.mapValues(n2, (t2, i3) => i3 !== e2 || t2.isSelected ? i3 !== e2 && t2.isSelected ? { ...t2, isSelected: false } : t2 : { ...t2, isSelected: true }));
      let h2 = this.getUILayout(), c2 = t.pick(h2, l2);
      (_b = (_a = this.props).onFlyStart) == null ? void 0 : _b.call(_a, h2, c2), h2 = t.mapValues(h2, (t2, i3) => i3 === e2 ? { ...t2, i: r2 } : t2), h2 = t.mapKeys(h2, (t2, i3) => i3 === e2 ? r2 : i3), l2 = l2.map((t2) => t2 === e2 ? r2 : t2), l2 = t.sortBy(l2, (e3) => h2[e3].x), n2 && (n2 = t.mapKeys(n2, (t2, i3) => i3 === e2 ? r2 : i3)), c2 = t.pick(h2, l2);
      const d2 = function(e3) {
        return t.mapValues(e3, (t2) => Object.values(e3).filter((e4) => e4.i !== t2.i && e4.x + e4.w === t2.x && e4.y + e4.h > t2.y && t2.y + t2.h > e4.y).map((e4) => e4.i));
      }(c2), u2 = Y(this.props);
      let { offsetX: g2, offsetY: m2 } = Ne(i2, this.ref.current, s2);
      J.setData(ht, { flyStartLayout: h2, flyItemKeys: l2, sourceLayoutFn: this.getUILayout.bind(this), flyExtraLayout: n2, flyLeftAdjItems: d2, flyPositionParams: u2, flyStartOffsetX: g2, flyStartOffsetY: m2, flyItemI: e2, flyStartRecoverFn: () => {
        this.setState({ ops: void 0 });
      } });
    });
    __publicField(this, "onDrag", (e2, i2, o2) => {
      qe(-1);
      const s2 = J.getData(ht), n2 = J.getData(ct);
      if (!!s2 && !n2) {
        const i3 = s2.flyItemKeys, o3 = s2.flyStartLayout, { droppingItem: n3 } = this.props, a2 = n3 == null ? void 0 : n3.i, r2 = o3[a2], p2 = t.flattenDeep([st(e2, { y: ve(o3) - r2.h, hide: true, static: void 0 }), i3.map((e3) => at(e3))]);
        this.setState({ startOps: p2 }), this.mayDelayOver(i3.map((e3) => ({ ...o3[e3], isDragging: true, placeholder: true })), p2, true);
      }
    });
    __publicField(this, "onResizeStart", (e2, t2, i2, { e: o2, node: s2 }) => {
      var _a, _b;
      J.clearData();
      const { layout: n2 } = this.state, a2 = n2[e2];
      a2 && (J.setData(lt, a2), (_b = (_a = this.props).onResizeStart) == null ? void 0 : _b.call(_a, n2, a2, a2, void 0, o2, s2));
    });
    __publicField(this, "onResize", (e2, t2, i2, { e: o2, node: s2, handle: n2, x: a2, y: r2 }) => {
      var _a, _b;
      const p2 = { x: a2, y: r2, w: t2, h: i2 };
      let l2 = it.push(this.state.ops, st(e2, { ...p2, isDragging: true }));
      this.setState({ ops: l2 });
      const h2 = pt(this.state.layout, this.props.extraLayout, this.state.changedHs, l2), c2 = J.getData(lt);
      (_b = (_a = this.props).onResize) == null ? void 0 : _b.call(_a, h2, c2, h2[e2], void 0, o2, s2);
    });
    __publicField(this, "onResizeStop", (e2, t2, i2, { e: o2, node: s2 }) => {
      var _a, _b;
      const n2 = this.getUILayout(), a2 = J.getData(lt);
      (_b = (_a = this.props).onResizeStop) == null ? void 0 : _b.call(_a, n2, a2, n2[e2], void 0, o2, s2), J.clearData(), this.onLayoutMaybeChanged(this.getUILayout());
    });
    __publicField(this, "onHeightChange", (e2, t2) => {
      var _a;
      ((_a = this.state.changedHs) == null ? void 0 : _a[e2]) !== t2 && this.setState((i2) => ({ ...i2, changedHs: { ...i2.changedHs, [e2]: t2 } }));
    });
    __publicField(this, "mayDelayOver", (e2, i2, o2 = false) => {
      const s2 = J.getData(ht), n2 = J.getData(ct);
      if (!o2 && (!!s2 && !n2))
        return;
      const a2 = this.getFlyOverInfo(i2);
      e2 = this.restrictHeight(e2);
      const r2 = it.batchPush(i2, e2.map((e3) => st(e3.i, e3))), p2 = () => {
        n2 ? n2.switchFn(a2) : J.setData(ct, a2), this.setState({ ops: r2, nextLayout: void 0 });
      }, l2 = this.shouldDelayOverTime(e2, i2, r2);
      if (l2 > 0) {
        let e3 = this.state.nextTime;
        const i3 = pt(this.state.layout, this.props.extraLayout, this.state.changedHs, r2);
        t.isEqual(this.state.nextLayout, i3) || (e3 = Date.now() + l2, this.setState({ nextLayout: i3, nextTime: e3 })), Date.now() >= e3 && p2();
      } else
        p2();
    });
    __publicField(this, "throttleDebug", t.throttle(C.debug, 200));
    __publicField(this, "onDragOver", (e2) => {
      e2.preventDefault(), e2.stopPropagation(), qe(2);
      const { onDropDragOver: i2, transformScale: o2 } = this.props, s2 = i2(e2), n2 = J.getData(ht);
      if (!s2 && t.isNil(n2))
        return;
      const { offsetX: a2, offsetY: r2 } = Ne(e2, this.ref.current, o2);
      this.mayScroll(r2);
      let p2 = [];
      if (n2)
        p2 = this.getFinalFlyingItems(a2, r2), this.mayDelayOver(p2, this.state.startOps);
      else {
        const e3 = this.getFinalDroppingItem(s2, a2, r2);
        p2.push(e3), this.mayDelayOver(p2);
      }
    });
    __publicField(this, "onDragEnter", (e2) => {
      e2.preventDefault(), e2.stopPropagation(), ++this.dragEnterCounter;
    });
    __publicField(this, "onDragLeave", (e2) => {
      e2.preventDefault(), e2.stopPropagation(), --this.dragEnterCounter, 0 === this.dragEnterCounter && this.removePlaceholder();
    });
    __publicField(this, "onFlyDrop", () => {
      const { droppingItem: e2, onFlyDrop: i2 } = this.props, o2 = e2.i, s2 = J.getData(ht);
      let n2 = s2 == null ? void 0 : s2.flyItemKeys;
      const a2 = s2.flyItemI, r2 = it.batchPush(this.state.ops, t.flattenDeep([n2.map((e3) => st(e3, { placeholder: void 0 })), (p2 = o2, l2 = a2, { type: "RENAME_ITEM", sourceKey: p2, targetKey: l2 })]));
      var p2, l2;
      this.dragEnterCounter = 0, this.setState({ ops: r2 });
      const h2 = pt(this.state.layout, this.props.extraLayout, this.state.changedHs, r2);
      n2 = n2.map((e3) => e3 === o2 ? a2 : e3);
      const c2 = t.pick(h2, n2);
      i2 == null ? void 0 : i2(h2, c2);
    });
    __publicField(this, "onDrop", (e2) => {
      e2.preventDefault(), e2.stopPropagation();
      const { droppingItem: i2, onDrop: o2 } = this.props, s2 = i2.i;
      if (J.getData(ht))
        return;
      let n2 = this.getUILayout();
      const a2 = it.push(this.state.ops, at(s2)), r2 = t.pick(n2, s2);
      n2 = t.omit(n2, s2), this.dragEnterCounter = 0, this.setState({ ops: a2 }), o2 == null ? void 0 : o2(n2, r2, e2), J.clearData();
    });
    __publicField(this, "onDragEnd", (e2, t2, i2) => {
      if (!J.isDragging())
        return;
      let o2 = J.getData(ht), s2 = J.getData(ct);
      const n2 = Ve() >= 0, a2 = t2.dataTransfer.dropEffect;
      this.setState({ startOps: void 0 }), n2 && "none" === a2 ? (s2 && s2.switchFn(), o2.flyStartRecoverFn()) : s2 && s2.dropFn();
    });
    __publicField(this, "onKeyDown", (e2) => {
      if (this.props.disableDirectionKey || !m(e2) || f(e2))
        return;
      const t2 = y(e2);
      if (t2 ? !this.props.isResizable : !this.props.isDraggable)
        return;
      const i2 = function(e3, t3, i3, o3, s2) {
        const n2 = Object.keys(i3).filter((e4) => {
          var _a;
          return (_a = o3[e4]) == null ? void 0 : _a.isSelected;
        });
        if (0 === n2.length || t3 && 1 !== n2.length)
          return;
        e3.preventDefault();
        const a2 = {}, r2 = [];
        for (const p3 of n2) {
          const n3 = ft(e3, t3, i3[p3], o3[p3]);
          if (!n3 || !Ge(n3, s2))
            return;
          a2[p3] = n3, r2.push(st(p3, n3));
        }
        const p2 = Object.keys(i3).filter((e4) => !a2[e4]);
        for (const e4 of Object.values(a2))
          if (p2.some((t4) => Ie(e4, i3[t4])))
            return;
        return r2;
      }(e2, t2, this.getUILayout(), this.props.extraLayout ?? {}, Y(this.props));
      if (!i2 || 0 === i2.length)
        return;
      const o2 = it.batchPush(this.state.ops, i2);
      this.setState({ ops: o2 }), this.onLayoutMaybeChanged(this.getUILayout(o2));
    });
  }
  static getDerivedStateFromProps(e2, i2) {
    let o2;
    if (J.isDragging())
      return null;
    if (t.isEqual(e2.layout, i2.propsLayout) && Te(e2.children, i2.children) || (o2 = e2.layout), o2) {
      const t2 = Se(o2, e2.children, e2.cols);
      return { layout: J.isDragging() || !Te(e2.children, i2.children) ? t2 : e2.layout, children: e2.children, propsLayout: e2.layout };
    }
    return null;
  }
  shouldComponentUpdate(e2, i2) {
    return !(this.props.children === e2.children && t.isEqual(this.state.ops, i2.ops) && t.isEqual(this.state.changedHs, i2.changedHs) && t.isEqual(i2.layout, this.state.layout) && (o2 = this.props, s2 = e2, o2 === s2 || t.isEqual(o2, s2)));
    var o2, s2;
  }
  componentDidUpdate(e2, i2) {
    if (!J.isDragging() && t.size(this.state.ops) > 0) {
      const e3 = [...this.state.ops], [t2] = e3, { droppingItem: i3 } = this.props;
      if (1 === e3.length && "DELETE_ITEM" === t2.type && t2.key === (i3 == null ? void 0 : i3.i))
        this.setState({ changedHs: void 0, ops: void 0 });
      else {
        const e4 = this.getUILayout();
        this.setState({ layout: e4, changedHs: void 0, ops: void 0 });
      }
    }
    if (!J.isDragging() && t.isNil(this.state.ops)) {
      const e3 = this.state.layout, t2 = i2.layout;
      this.onLayoutMaybeChanged(e3, t2);
    }
  }
  isValidMounted() {
    return t.isNumber(this.props.width) && this.props.width > 0;
  }
  containerHeight() {
    const { margin: e2, rowHeight: i2, fixedRowCount: o2, isCanvas: s2 } = this.props, { emptyRows: n2 } = this.props, a2 = Y(this.props), { containerPadding: r2 } = a2, p2 = this.getUILayout(void 0, true);
    let l2 = ve(p2);
    !t.isNil(n2) && (0 === t.size(p2) || o2 && s2) && (l2 = n2);
    return `${Math.max(l2 * i2 + (l2 - 1) * e2[1] + 2 * r2[1])}px`;
  }
  onLayoutMaybeChanged(e2, i2) {
    var _a, _b;
    i2 || (i2 = this.state.layout), t.isEqual(i2, e2) || ((_b = (_a = this.props).onLayoutChange) == null ? void 0 : _b.call(_a, e2));
  }
  processGridItem(e2, t2, i2) {
    var _a, _b, _c, _d;
    const o2 = (_a = J.getData(ht)) == null ? void 0 : _a.flyExtraLayout, s2 = ((_b = this.props.extraLayout) == null ? void 0 : _b[t2.i]) ?? (o2 == null ? void 0 : o2[t2.i]), n2 = t2.placeholder ? I(dt, { $compType: s2 == null ? void 0 : s2.compType, className: "react-grid-placeholder" }) : i2[t2.i];
    if (!n2)
      return;
    const { width: a2, cols: r2, margin: p2, rowHeight: l2, maxRows: h2, isDraggable: c2, isResizable: d2, isSelectable: u2, transformScale: g2, selectedSize: m2, clickItem: f2 } = this.props, { showName: y2 } = this.props, x2 = u2, b2 = Y(this.props);
    return I(w.Provider, { value: { compType: s2 == null ? void 0 : s2.compType, comp: (_c = s2 == null ? void 0 : s2.comp) == null ? void 0 : _c.toJsonValue() }, children: I(D.Provider, { value: s2 == null ? void 0 : s2.compType, children: I(Ze, { compType: s2 == null ? void 0 : s2.compType, containerWidth: a2, cols: r2, margin: p2, containerPadding: b2.containerPadding, maxRows: h2, rowHeight: l2, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, onHeightChange: this.onHeightChange, isDraggable: c2 && je(t2), isResizable: d2 && Ae(t2), isSelectable: x2, transformScale: g2 || 1, w: t2.w, h: (s2 == null ? void 0 : s2.hidden) && !(s2 == null ? void 0 : s2.isSelected) ? 0 : t2.h, x: t2.x, y: t2.y, i: t2.i, minH: t2.minH || 1, minW: t2.minW || 1, maxH: t2.maxH || 1 / 0, maxW: t2.maxW || 1 / 0, placeholder: t2.placeholder, layoutHide: t2.hide, static: t2.static, resizeHandles: Fe(t2, s2), name: s2 == null ? void 0 : s2.name, autoHeight: s2 == null ? void 0 : s2.autoHeight, isSelected: s2 == null ? void 0 : s2.isSelected, hidden: s2 == null ? void 0 : s2.hidden, selectedSize: m2, clickItem: f2, showName: { top: (y2 == null ? void 0 : y2.top) ?? 0, bottom: ((y2 == null ? void 0 : y2.bottom) ?? 0) + (((_d = this.ref.current) == null ? void 0 : _d.scrollHeight) ?? 0) }, zIndex: e2, className: "", children: n2 }, t2.i) }) }, t2.i);
  }
  getFinalDroppingItem(e2, t2, i2) {
    const o2 = { ...this.props.droppingItem, ...e2 == null ? void 0 : e2.size, placeholder: true };
    let { w: s2, h: n2 } = o2;
    const a2 = Y(this.props), r2 = e2 == null ? void 0 : e2.positionParams;
    if (r2) {
      const { width: e3, height: t3 } = W(r2, s2, n2), { w: i3, h: o3 } = B(a2, e3, t3, { w: false, h: false, ceil: false });
      [s2, n2] = [i3, o3];
    }
    const { width: p2, height: l2 } = W(a2, s2, n2), h2 = U(a2, i2 -= 0.5 * l2, t2 -= 0.5 * p2, s2, n2, { x: false, y: true });
    let c2 = { ...o2, w: s2, h: n2, x: h2.x, y: h2.y, isDragging: true };
    return c2 = Be(c2, 0, a2.cols), c2;
  }
  getFinalFlyingItems(e2, i2) {
    const o2 = J.getData(ht), s2 = o2.flyStartOffsetX, n2 = o2.flyStartOffsetY, a2 = e2 - s2, r2 = i2 - n2, p2 = o2.flyItemKeys, l2 = o2.flyStartLayout, h2 = o2.flyPositionParams, c2 = Y(this.props), d2 = p2.map((e3) => {
      const t2 = l2[e3], i3 = K(h2, t2.x, t2.y, t2.w, t2.h), o3 = { ...i3, left: i3.left + a2, top: i3.top + r2 };
      let { w: s3, h: n3 } = B(c2, o3.width, o3.height, { w: false, h: true }), { x: p3, y: d3 } = U(c2, o3.top, o3.left, s3, n3, { x: false, y: false });
      return { ...t2, x: p3, y: d3, w: s3, h: n3, isDragging: true, placeholder: true };
    }), u2 = o2.flyLeftAdjItems, g2 = {};
    d2.forEach((e3) => {
      var _a, _b;
      const i3 = t.max((_b = (_a = u2[e3.i]) == null ? void 0 : _a.filter((e4) => !t.isNil(g2[e4]))) == null ? void 0 : _b.map((e4) => g2[e4].x + g2[e4].w));
      !t.isNil(i3) && (e3.x = i3), g2[e3.i] = e3;
    });
    const m2 = function(e3, i3) {
      e3 = t.sortBy(e3, (e4) => e4.x);
      let o3 = [];
      return e3.forEach((e4) => {
        const t2 = Math.max(0, ...o3.filter((t3) => t3.y < e4.y + e4.h && e4.y < t3.y + t3.h && e4.x < t3.x + t3.w).map((e5) => e5.x + e5.w)), i4 = Be(e4, t2, 1 / 0);
        o3.push(i4);
      }), e3 = t.sortBy(o3, (e4) => -(e4.x + e4.w)), o3 = [], e3.forEach((e4) => {
        const t2 = Math.min(i3, ...o3.filter((t3) => t3.y < e4.y + e4.h && e4.y < t3.y + t3.h && t3.x < e4.x + e4.w).map((e5) => e5.x)), s3 = Be(e4, 0, t2);
        o3.push(s3);
      }), o3;
    }(Object.values(g2), c2.cols), f2 = function(e3, t2) {
      const i3 = Math.min(...t2.map((e4) => e4.x)), o3 = Math.min(...t2.map((e4) => e4.y)), s3 = Math.max(...t2.map((e4) => e4.x + e4.w)), n3 = Math.max(...t2.map((e4) => e4.y + e4.h));
      let a3 = 0, r3 = 0;
      return i3 < 0 ? a3 = -i3 : s3 > e3.cols && (a3 = Math.max(e3.cols - s3, -i3)), o3 < 0 ? r3 = -o3 : n3 > e3.maxRows && (r3 = Math.max(e3.maxRows - n3, -o3)), t2.map((t3) => {
        let i4 = { ...t3, x: t3.x + a3, y: t3.y + r3 };
        return i4.x + i4.w > e3.cols && (i4.x = Math.max(0, e3.cols - i4.w), i4.x + i4.w > e3.cols && (i4.w = e3.cols - i4.x)), i4.y + i4.h > e3.maxRows && (i4.y = Math.max(0, e3.maxRows - i4.h), i4.y + i4.h > e3.maxRows && (i4.h = e3.maxRows - i4.y)), i4;
      });
    }(c2, m2);
    return f2;
  }
  mayScroll(e2) {
    var _a;
    const t2 = (_a = this.props.scrollContainerRef) == null ? void 0 : _a.current;
    if (!t2)
      return;
    !function(e3, t3) {
      const i2 = 0.15;
      t3 < i2 && Xe(e3, (i2 - t3) / i2, -1);
      const o2 = 1 - t3;
      o2 < i2 && Xe(e3, (i2 - o2) / i2, 1);
    }(t2, (e2 - t2.scrollTop) / t2.clientHeight);
  }
  getFlyOverInfo(e2) {
    const t2 = this.innerHeight, i2 = (o2) => {
      const s2 = (o2 == null ? void 0 : o2.layoutRef) === this.ref;
      if (s2 || this.setState({ ops: e2 }), o2) {
        const n2 = s2 ? { ...o2, startOps: e2, switchFn: i2, innerHeight: t2 } : o2;
        J.setData(ct, n2);
      }
    };
    return { layoutRef: this.ref, switchFn: i2, dropFn: () => this.onFlyDrop(), innerHeight: t2, startOps: e2 };
  }
  restrictHeight(e2) {
    const t2 = J.getData(ct), { autoHeight: i2, minHeight: o2, emptyRows: s2 } = this.props;
    if (i2 && !o2 && t2) {
      const i3 = pt(this.state.layout, this.props.extraLayout, this.state.changedHs, t2.startOps), o3 = Math.max(...Object.values(i3).map((e3) => e3.y + e3.h), s2 ?? -1 / 0), n2 = Math.min(...e2.map((e3) => e3.y));
      if (o3 + 1 < n2) {
        const t3 = o3 + 1 - n2;
        e2 = e2.map((e3) => ({ ...e3, y: e3.y + t3 }));
      }
    }
    return e2;
  }
  shouldDelayOverTime(e2, i2, o2) {
    const { autoHeight: s2 } = this.props, n2 = J.getData(ht), a2 = pt(this.state.layout, this.props.extraLayout, this.state.changedHs, i2), r2 = this.getUILayout(), p2 = pt(this.state.layout, this.props.extraLayout, this.state.changedHs, o2), l2 = Object.keys(a2).filter((e3) => !t.isEqual(a2[e3], r2[e3]));
    return t.difference(Object.values(a2).filter((e3) => e3.delayCollision).map((e3) => e3.i), [...e2.map((e3) => e3.i), n2 == null ? void 0 : n2.flyItemI, ...l2]).some((e3) => !t.isEqual(a2[e3], p2[e3])) ? 100 : s2 && ve(p2) > ve(r2) && !this.props.isCanvas ? 5 : 0;
  }
  removePlaceholder() {
    if (!J.getData(ht)) {
      const { droppingItem: e2 } = this.props, t2 = it.push(this.state.ops, at(e2.i));
      this.setState({ ops: t2 });
    }
  }
  getUILayout(e2, t2 = false) {
    return pt(this.state.layout, this.props.extraLayout, this.state.changedHs, e2 ?? this.state.ops, t2);
  }
  getDefaultStyle() {
    let { autoHeight: e2, minHeight: t2 } = this.props;
    const i2 = J.getData(ct);
    if ((i2 == null ? void 0 : i2.layoutRef) === this.ref) {
      const e3 = i2.innerHeight + "px";
      t2 = t2 ? `max(${t2}, ${e3})` : e3;
    }
    return { minHeight: e2 ? t2 ?? "100%" : "100%" };
  }
  getSelectedKeys() {
    return Object.keys(t.pickBy(this.props.extraLayout, (e2) => !!e2.isSelected));
  }
  hintPlaceholder() {
    const { hintPlaceholder: e2 } = this.props, i2 = this.getUILayout();
    if (!(t.size(i2) > 0))
      return e2;
  }
  gridLines() {
    const e2 = Y(this.props), { containerPadding: t2, rowHeight: i2, containerWidth: o2 } = e2, [s2, n2] = t2, a2 = q(this.innerHeight, t2[1], i2) * i2 + 1, r2 = { left: s2, top: n2, width: o2 - 2 * t2[0] + 1, height: a2 }, p2 = this.props.bgColor ?? "#ffffff", l2 = O(p2).invert().alpha(0.05).toHex();
    return I(tt, { positionParams: e2, position: r2, lineColor: l2 });
  }
  render() {
    const { className: i2, style: o2, isDroppable: s2, children: n2, showGridLines: a2 } = this.props, r2 = e("react-grid-layout", i2), p2 = { height: this.containerHeight(), ...this.getDefaultStyle() }, l2 = t.fromPairs(n2.filter((e2) => e2.key).map((e2) => [e2.key, e2])), c2 = this.getUILayout(), d2 = this.isValidMounted();
    this.ref = this.props.innerRef ?? this.innerRef;
    const u2 = Object.values(c2), g2 = Math.max(...u2.map((e2) => e2.pos || 0));
    return I(gt, { ref: this.ref, className: r2, style: o2, $bgColor: this.props.bgColor, $radius: this.props.radius, $autoHeight: this.props.autoHeight, $overflow: this.props.overflow, $maxRows: this.props.emptyRows, tabIndex: -1, onDrop: s2 ? this.onDrop : t.noop, onDragLeave: s2 ? this.onDragLeave : t.noop, onDragEnter: s2 ? this.onDragEnter : t.noop, onDragOver: s2 ? this.onDragOver : t.noop, onKeyDown: this.onKeyDown, children: I(h, { onResize: (e2, t2) => {
      t2 && (this.innerHeight = t2);
    }, observerOptions: { box: "border-box" }, children: z("div", { style: p2, children: [a2 && this.gridLines(), d2 && u2.map((e2) => {
      const t2 = void 0 !== e2.pos ? g2 - e2.pos + 1 : 1;
      return this.processGridItem(t2, e2, l2);
    }), this.hintPlaceholder()] }) }) });
  }
}
__publicField(ut, "defaultProps", { cols: 12, className: "", style: {}, isRowCountLocked: false, maxRows: 1 / 0, layout: {}, margin: [10, 10], isResizable: true, isDroppable: false, transformScale: 1, droppingItem: { i: "__dropping-elem__", h: 1, w: 1 }, onLayoutChange: t.noop, onResizeStart: t.noop, onResize: t.noop, onResizeStop: t.noop, onDrop: t.noop, onDropDragOver: (e2) => {
}, children: [] });
const gt = k.div`
  border-radius: ${(e2) => e2.$radius ?? "4px"};
  // background-color: ${(e2) => e2.$bgColor ?? "#f5f5f6"};
  /* height: 100%; */
  height: ${(e2) => e2.$autoHeight ? "auto" : "100%"};

  overflow: ${(e2) => e2.$maxRows !== _ ? "hidden" : e2.$overflow ?? "overlay"};
  ${(e2) => e2.$autoHeight && "::-webkit-scrollbar {\n    display: none;\n  }"}
`, mt = o.memo(ut);
function ft(e2, t2, i2, o2) {
  if (t2) {
    if (Ae(i2)) {
      if ("ArrowLeft" === e2.key || "ArrowRight" === e2.key) {
        if (function(e3, t3) {
          return Fe(e3, t3).some((e4) => e4.includes("e"));
        }(i2, o2))
          return { ...i2, w: i2.w + ("ArrowLeft" === e2.key ? -1 : 1) };
      } else if (("ArrowUp" === e2.key || "ArrowDown" === e2.key) && function(e3, t3) {
        return Fe(e3, t3).some((e4) => e4.includes("s"));
      }(i2, o2))
        return { ...i2, h: i2.h + ("ArrowUp" === e2.key ? -1 : 1) };
    }
  } else if (je(i2)) {
    const t3 = i2.x + ("ArrowLeft" === e2.key ? -1 : "ArrowRight" === e2.key ? 1 : 0), o3 = i2.y + ("ArrowUp" === e2.key ? -1 : "ArrowDown" === e2.key ? 1 : 0);
    return { ...i2, x: t3, y: o3 };
  }
}
export {
  fe as C,
  j as D,
  ht as F,
  He as H,
  Je as I,
  mt as R,
  N as a,
  P as b,
  Ue as c,
  J as d,
  _ as e,
  q as f,
  X as g,
  We as m,
  V as s
};
