import { hl as e, hm as t, hn as n, ho as a, hp as r, hq as i, hr as o, hs as l, ht as s, hu as d, hv as g, hw as c, hx as m, hy as p, hz as h, hA as u, hB as y, hC as v, eU as f, a8 as b, dH as x, ek as C, hD as k, f3 as I, eV as S, dc as B, eX as j, ac as N, eY as w, f0 as K, f1 as E, f2 as T } from "./index-f927b013.js";
import { useState as R, useEffect as P, useContext as U, useRef as $, useCallback as z, useMemo as V } from "react";
import { lI as A, lz as D, lJ as L, mK as F } from "./ant-design-icons-6bfdc7d5.js";
import { _ as W, c as H } from "./lodash-b5661970.js";
import { u as O } from "./styled-components-7cfa37e6.js";
import { D as q, C as X, N as Y } from "./styledComponents-8c5ddcad.js";
import { q as J, o as M, r as G, F as Q, s as Z, B as _, t as ee, I as te, u as ne, D as ae } from "./antd-2abdded3.js";
import "./axios-04f95181.js";
import "./redux-devtools-8dd21e4f.js";
import "./alasql-f60045ee.js";
import "./fontawesome-3904a214.js";
import "react-dom";
import "./dnd-kit-8227a2db.js";
import "./moment-059406e8.js";
import "./dayjs-2035e031.js";
import "./numbro-47982265.js";
import "./papaparse-07642d76.js";
import "./uuid-bd83cae2.js";
import "./supabase-b2e314d0.js";
import "./fetch-648a91f6.js";
import "./react-draggable-ed505bfc.js";
import "./remark-gfm-18306abe.js";
import "./buffer-d3713d77.js";
import "./rehype-raw-6ebcba88.js";
import "./parse5-f837f753.js";
import "./rehype-sanitize-953d0761.js";
import "./simplebar-react-2133d981.js";
import "./react-best-gradient-color-picker-92c01739.js";
import "./ua-parser-js-c952c07b.js";
import "./clsx-469c2c43.js";
import "./loglevel-b4003767.js";
import "./file-saver-55285fc1.js";
import "./codemirror-8412b963.js";
import "./really-relaxed-json-056be70b.js";
import "./immer-c0428a8d.js";
import "./hotkeys-js-699906bc.js";
import "./cnchar-e1339167.js";
import "./react-documents-041601c7.js";
import "./react-sortable-hoc-4fbe0c32.js";
import "./sql-formatter-577b4ab0.js";
import "./rc-trigger-3f038851.js";
import "./react-json-view-5330ce92.js";
import "./qrcode-react-d377d762.js";
function re(f2) {
  const { themeSettingKey: b2, name: x2, desc: C2, color: k2, radius: I2, configChange: S2, showVarName: B2 = true, margin: j2, padding: N2, borderStyle: w2, borderWidth: K2, borderColor: E2, fontFamily: T2, showComponentLoadingIndicators: U2, showDataLoadingIndicators: $2, dataLoadingIndicator: z2, gridColumns: V2, gridRowHeight: L2, gridRowCount: F2, gridPaddingX: H2, gridPaddingY: O2, gridBgImage: q2, gridBgImageRepeat: X2, gridBgImageSize: Y2, gridBgImagePosition: Q2, gridBgImageOrigin: Z2 } = f2, _2 = W.debounce(S2, 0), [ee2, te2] = R(k2), [ne2, ae2] = R(I2), [re2, ie2] = R(j2), [oe2, le2] = R(N2), [se2, de] = R(w2), [ge, ce] = R(K2), [me, pe] = R(E2), [he, ue] = R(T2), [ye, ve] = R(U2), [fe, be] = R($2), [xe, Ce] = R(z2), [ke, Ie] = R(V2), [Se, Be] = R(L2), [je, Ne] = R(F2), [we, Ke] = R(H2), [Ee, Te] = R(O2), [Re, Pe] = R(q2), [Ue, $e] = R(X2), [ze, Ve] = R(Y2), [Ae, De] = R(Q2), [Le, Fe] = R(Z2), We = `(${b2})`, He = () => {
    ee2 && e(ee2) && t(ee2) ? t(ee2) ? (te2(ee2), S2({ themeSettingKey: b2, color: ee2 })) : (te2(v(ee2)), S2({ themeSettingKey: b2, color: v(ee2) })) : te2(k2);
  }, Oe = (e2) => {
    let t2 = "";
    t2 = e2 && 0 !== Number(e2) ? /^[0-9]+$/.test(e2) ? Number(e2) + "px" : /^[0-9]+(px|%)$/.test(e2) ? e2 : "0" : "0", ae2(t2), S2({ themeSettingKey: b2, radius: t2 });
  }, qe = (e2) => {
    let t2 = "";
    t2 = e2 && 0 !== Number(e2) ? /^[0-9]+$/.test(e2) ? Number(e2) + "px" : /^[0-9]+(px|%)$/.test(e2) ? e2 : "3px" : "0", ie2(t2), S2({ themeSettingKey: b2, margin: t2 });
  }, Xe = (e2) => {
    let t2 = "";
    t2 = e2 && 0 !== Number(e2) ? /^[0-9]+$/.test(e2) ? Number(e2) + "px" : /^[0-9]+(px|%)$/.test(e2) ? e2 : "3px" : "0", le2(t2), S2({ themeSettingKey: b2, padding: t2 });
  }, Ye = (e2) => {
    let t2 = "";
    t2 = e2 || "solid", de(t2), S2({ themeSettingKey: b2, borderStyle: t2 });
  }, Je = (e2) => {
    let t2 = "";
    t2 = e2 && 0 !== Number(e2) ? /^[0-9]+$/.test(e2) ? Number(e2) + "px" : /^[0-9]+(px|%)$/.test(e2) ? e2 : "1px" : "0", ce(e2), S2({ themeSettingKey: b2, borderWidth: t2 });
  }, Me = (e2) => {
    let t2 = "";
    t2 = e2 || "Roboto, sans-serif", ue(t2), S2({ themeSettingKey: b2, fontFamily: t2 });
  }, Ge = (e2) => {
    let t2 = "";
    if (t2 = e2 || ("gridRowHeight" === b2 ? "8" : "24"), "gridRowHeight" === b2)
      return Be(t2), void S2({ themeSettingKey: b2, gridRowHeight: t2 });
    Ie(t2), S2({ themeSettingKey: b2, gridColumns: t2 });
  }, Qe = (e2) => {
    let t2 = 1 / 0;
    "" !== e2 && (t2 = Number(e2)), Ne(t2), S2({ themeSettingKey: b2, gridRowCount: t2 });
  }, Ze = (e2) => {
    let t2 = 20;
    return "" !== e2 && (t2 = Number(e2)), "gridPaddingX" === b2 ? (Ke(t2), void S2({ themeSettingKey: b2, gridPaddingX: t2 })) : "gridPaddingY" === b2 ? (Te(t2), void S2({ themeSettingKey: b2, gridPaddingY: t2 })) : void 0;
  }, _e = (e2) => {
    switch (b2) {
      case "gridBgImage":
        Pe(e2), S2({ themeSettingKey: b2, gridBgImage: e2 });
        break;
      case "gridBgImageRepeat":
        $e(e2 || "no-repeat"), S2({ themeSettingKey: b2, gridBgImageRepeat: e2 });
        break;
      case "gridBgImageSize":
        Ve(e2 || "cover"), S2({ themeSettingKey: b2, gridBgImageSize: e2 });
        break;
      case "gridBgImagePosition":
        De(e2 || "center"), S2({ themeSettingKey: b2, gridBgImagePosition: e2 });
        break;
      case "gridBgImageOrigin":
        Fe(e2 || "padding-box"), S2({ themeSettingKey: b2, gridBgImageOrigin: e2 });
    }
  };
  return P(() => {
    ee2 && (e(ee2) || t(ee2)) && _2({ themeSettingKey: b2, color: ee2 });
  }, [ee2]), P(() => {
    te2(k2);
  }, [k2]), P(() => {
    ae2(I2);
  }, [I2]), P(() => {
    ie2(j2);
  }, [j2]), P(() => {
    le2(N2);
  }, [N2]), P(() => {
    Ie(V2);
  }, [V2]), P(() => {
    Ne(F2);
  }, [F2]), P(() => {
    de(w2);
  }, [w2]), P(() => {
    ce(K2);
  }, [K2]), P(() => {
    pe(E2);
  }, [E2]), P(() => {
    ue(T2);
  }, [T2]), P(() => {
    ve(U2);
  }, [U2]), P(() => {
    be($2);
  }, [$2]), P(() => {
    Ce(z2);
  }, [z2]), P(() => {
    Ke(H2);
  }, [H2]), P(() => {
    Te(O2);
  }, [O2]), A(n, { className: f2.className, children: ["showDataLoadingIndicators" !== b2 && "showComponentLoadingIndicators" !== b2 && A("div", { className: "text-desc", children: [A("div", { className: "name", children: [x2, " ", B2 && D("span", { children: We })] }), D("div", { className: "desc", children: C2 })] }), "radius" !== b2 && "margin" !== b2 && "padding" !== b2 && "borderStyle" !== b2 && "borderWidth" !== b2 && "fontFamily" !== b2 && "showComponentLoadingIndicators" !== b2 && "showDataLoadingIndicators" !== b2 && "dataLoadingIndicator" !== b2 && "gridColumns" !== b2 && "gridRowHeight" !== b2 && "gridRowCount" !== b2 && "gridPaddingX" !== b2 && "gridPaddingY" !== b2 && "gridBgImage" !== b2 && "gridBgImageRepeat" !== b2 && "gridBgImageSize" !== b2 && "gridBgImagePosition" !== b2 && "gridBgImageOrigin" !== b2 && A("div", { className: "config-input", children: [D(a, { changeColor: te2, color: ee2, trigger: "hover", allowGradient: "canvas" === b2 || "primarySurface" === b2 }), D(r, { value: ee2, onChange: (e2) => te2(e2.target.value), onBlur: He, onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && He() })] }), "radius" === b2 && A("div", { className: "config-input", children: [D(i, { $radius: I2 || "0", children: D("div", { children: D(o, { style: { width: "16px", margin: "-2px 0 2px -2px", padding: "0px" } }) }) }), D(r, { value: ne2, onChange: (e2) => ae2(e2.target.value), onBlur: (e2) => Oe(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && Oe(e2.currentTarget.value) })] }), "borderStyle" === b2 && A("div", { className: "config-input", children: [D(l, { $borderStyle: w2 || "solid", children: D("div", { children: D(s, { style: { width: "16px", margin: "2px 0 0 2px", padding: "0px" } }) }) }), D(r, { value: se2, onChange: (e2) => de(e2.target.value), onBlur: (e2) => Ye(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && Ye(e2.currentTarget.value) })] }), "borderWidth" === b2 && A("div", { className: "config-input", children: [D(d, { $borderWidth: K2 || "1px", children: D("div", { children: D(g, { style: { width: "16px", margin: "2px 0 0 2px", padding: "0px" } }) }) }), D(r, { value: ge, onChange: (e2) => ce(e2.target.value), onBlur: (e2) => Je(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && Je(e2.currentTarget.value) })] }), "margin" === b2 && A("div", { className: "config-input", children: [D(c, { $margin: j2 || "4px", children: D("div", { children: D(m, { title: "" }) }) }), D(r, { value: re2, onChange: (e2) => ie2(e2.target.value), onBlur: (e2) => qe(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && qe(e2.currentTarget.value) })] }), "padding" === b2 && A("div", { className: "config-input", children: [D(p, { $padding: N2 || "4px", children: D("div", { children: D(h, { title: "" }) }) }), D(r, { value: oe2, onChange: (e2) => le2(e2.target.value), onBlur: (e2) => Xe(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && Xe(e2.currentTarget.value) })] }), "fontFamily" === b2 && D("div", { className: "config-input", children: D(r, { value: he, onChange: (e2) => ue(e2.target.value), onBlur: (e2) => Me(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && Me(e2.currentTarget.value) }) }), "showComponentLoadingIndicators" === b2 && A("div", { style: { display: "flex", gap: "6px", lineHeight: "normal" }, children: [D(J, { size: "small", checked: ye, onChange: (e2) => {
    ve(e2), S2({ themeSettingKey: b2, showComponentLoadingIndicators: e2 });
  } }), D("span", { children: x2 })] }), "showDataLoadingIndicators" === b2 && A("div", { style: { display: "flex", gap: "6px", lineHeight: "normal" }, children: [D(J, { size: "small", checked: fe, onChange: (e2) => {
    be(e2), S2({ themeSettingKey: b2, showDataLoadingIndicators: e2 });
  } }), D("span", { children: x2 })] }), "dataLoadingIndicator" === b2 && D("div", { style: { marginTop: "6px" }, children: D(M, { block: true, value: xe, options: [{ value: "spinner", label: "Spinner" }, { value: "skeleton", label: "Skeleton" }], onChange: (e2) => {
    Ce(e2), S2({ themeSettingKey: b2, dataLoadingIndicator: e2 });
  } }) }), "gridColumns" === b2 && A("div", { className: "config-input", children: [D(u, { $gridColumns: V2 || "24", children: D("div", { children: D(y, { title: "" }) }) }), D(G, { style: { width: "90%", margin: "8px 5% 0 5%" }, min: 8, max: 48, value: parseInt(ke || "24"), onChange: (e2) => Ie(e2.toString()), onChangeComplete: (e2) => Ge(e2.toString()) })] }), "gridRowHeight" === b2 && A("div", { className: "config-input", children: [D(u, { $gridColumns: V2 || "24", children: D("div", { children: D(y, { title: "" }) }) }), D(G, { style: { width: "90%", margin: "8px 5% 0 5%" }, min: 4, max: 100, value: parseInt(Se || "8"), onChange: (e2) => Be(e2.toString()), onChangeComplete: (e2) => Ge(e2.toString()) })] }), "gridRowCount" === b2 && A("div", { className: "config-input", children: [D(u, { $gridColumns: V2 || "24", children: D("div", { children: D(y, { title: "" }) }) }), D(r, { type: "number", min: 0, value: je, onChange: (e2) => {
    if ("" === e2.target.value)
      return Ne(1 / 0);
    Ne(Number(e2.target.value));
  }, onBlur: (e2) => Qe(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && Qe(e2.currentTarget.value) })] }), "gridPaddingX" === b2 && A("div", { className: "config-input", children: [D(p, { $padding: "3px", children: D("div", { children: D(h, { title: "" }) }) }), D(r, { type: "number", min: 0, value: we, onChange: (e2) => {
    if ("" === e2.target.value)
      return Ke(void 0);
    Ke(Number(e2.target.value));
  }, onBlur: (e2) => Ze(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && Ze(e2.currentTarget.value) })] }), "gridPaddingY" === b2 && A("div", { className: "config-input", children: [D(p, { $padding: "3px", children: D("div", { children: D(h, { title: "" }) }) }), D(r, { type: "number", min: 0, value: Ee, onChange: (e2) => {
    if ("" === e2.target.value)
      return Te(void 0);
    Te(Number(e2.target.value));
  }, onBlur: (e2) => Ze(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && Ze(e2.currentTarget.value) })] }), "gridBgImage" === b2 && D("div", { className: "config-input", children: D(r, { value: Re, onChange: (e2) => Pe(e2.target.value), onBlur: (e2) => _e(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && _e(e2.currentTarget.value) }) }), "gridBgImageRepeat" === b2 && D("div", { className: "config-input", children: D(r, { value: Ue, onChange: (e2) => $e(e2.target.value), onBlur: (e2) => _e(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && _e(e2.currentTarget.value) }) }), "gridBgImageSize" === b2 && D("div", { className: "config-input", children: D(r, { value: ze, onChange: (e2) => Ve(e2.target.value), onBlur: (e2) => _e(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && _e(e2.currentTarget.value) }) }), "gridBgImagePosition" === b2 && D("div", { className: "config-input", children: D(r, { value: Ae, onChange: (e2) => De(e2.target.value), onBlur: (e2) => _e(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && _e(e2.currentTarget.value) }) }), "gridBgImageOrigin" === b2 && D("div", { className: "config-input", children: D(r, { value: Le, onChange: (e2) => Fe(e2.target.value), onBlur: (e2) => _e(e2.target.value), onKeyUp: (e2) => "Enter" === e2.nativeEvent.key && _e(e2.currentTarget.value) }) })] });
}
const ie = [{ label: "Hide Component", key: "hidden" }, { label: "Disable Component", key: "disable" }, { label: "Margin", key: "style.margin" }, { label: "Padding", key: "style.padding" }, { label: "Font Size", key: "style.textSize" }, { label: "Font Weight", key: "style.textWeight" }, { label: "Font Family", key: "style.fontFamily" }, { label: "Font Style", key: "style.fontStyle" }, { label: "Text Transform", key: "style.textTransform" }, { label: "Text Decoration", key: "style.textDecoration" }, { label: "Border Radius", key: "style.borderRadius" }, { label: "Border Width", key: "style.borderWidth" }, { label: "Border Style", key: "style.borderStyle" }, { label: "Background Image", key: "style.backgroundImage" }, { label: "Background Image Repeat", key: "style.backgroundImageRepeat" }, { label: "Background Image Size", key: "style.backgroundImageSize" }, { label: "Background Image Position", key: "style.backgroundImagePosition" }, { label: "Background Image Origin", key: "style.backgroundImageOrigin" }], oe = O.div`
  height: calc(100vh - ${f});
`, le = O(ae)`
  .ant-dropdown-menu-item-icon {
    width: 14px !important;
    height: 14px !important; 
    max-width: 14px !important;
  }
`, se = (e2) => {
  const t2 = U(b), [n2, a2] = R([]);
  x(), C();
  const [r2, i2] = R(t2.getCollisionStatus()), [o2, l2] = R([]), [s2, d2] = R(""), [g2, c2] = R(null), [m2, p2] = R(""), h2 = $(null);
  P(() => {
    k(r2);
  }, [r2]);
  const u2 = z((e3) => {
    c2(e3);
  }, []), y2 = (e3, t3, n3) => {
    const { items: a3, children: r3 } = e3;
    if (Object.keys(a3).length)
      for (const e4 in a3) {
        const r4 = { title: a3[e4].children.name.getView(), type: a3[e4].children.compType.getView(), key: e4, children: [] };
        if (n3) {
          const e5 = I(t3, n3);
          r4.disabled = true, e5 == null ? void 0 : e5.children.push(r4);
        } else
          t3.push(r4);
      }
    if (Object.keys(r3).length)
      for (const e4 in r3)
        y2(r3[e4], t3, e4);
    return t3;
  }, v2 = z((e3) => {
    t2.setSelectedCompNames(/* @__PURE__ */ new Set([e3]), "leftPanel");
  }, [t2]), [f2, O2] = R([]);
  P(() => {
    const e3 = M2();
    O2(e3);
  }, [t2]);
  const M2 = () => {
    const e3 = t2.getUIComp().getTree(), n3 = y2(e3, []), a3 = t2.rootComp.toJsonValue();
    return "module" === a3.ui.compType ? n3.forEach((e4) => {
      e4.pos = a3.ui.comp.container.layout[e4.key].pos;
    }) : n3.forEach((e4) => {
      e4.pos = a3.ui.layout[e4.key].pos;
    }), n3.sort((e4, t3) => {
      const n4 = (e4 == null ? void 0 : e4.pos) || 0, a4 = (t3 == null ? void 0 : t3.pos) || 0;
      return n4 < a4 ? -1 : n4 > a4 ? 1 : 0;
    }), n3;
  }, G2 = (e3) => {
    const { expandedKeys: t3 } = e3;
    t3.includes(e3.node.key) || a2(t3);
  }, ae2 = (e3, t3) => {
    const n3 = t3.split("-").map((e4) => Number(e4));
    let a3 = { children: e3 };
    for (let e4 = 0; e4 < n3.length; e4++)
      a3 = a3.children[n3[e4]];
    return a3;
  };
  z((e3) => {
    switch (e3) {
      case "hidden":
      case "disable":
        return "true | false";
      case "style.border":
        return "e.g., #ffffff";
      case "style.borderRadius":
      case "style.radius":
        return "e.g., 4px";
      case "style.borderWidth":
        return "e.g., 2px";
      case "style.borderStyle":
        return "solid | dashed | dotted";
      case "style.backgroundImage":
        return "URL as string";
      case "style.backgroundImageRepeat":
        return "repeat | repeat-x | repeat-y | no-repeat";
      case "style.backgroundImageSize":
        return "cover | contain | % | px";
      case "style.backgroundImagePosition":
        return "top | bottom | center | % | px";
      case "style.backgroundImageOrigin":
        return "padding-box | border-box | content-box";
      case "style.margin":
      case "style.padding":
        return "e.g., 4px 8px 16px 32px";
      case "style.textSize":
        return "e.g., 16px";
      case "style.textWeight":
        return "bold | 900 | normal | 400";
      case "style.fontFamily":
        return "Arial, sans-serif";
      case "style.fontStyle":
        return "normal | italic | oblique";
      case "style.textTransform":
        return "none | capitalize | uppercase | lowercase";
      case "style.textDecoration":
        return "none | underline | overline | line-through";
      default:
        return "Action Value";
    }
  }, []);
  const se2 = (e3, n3) => {
    var _a, _b, _c, _d, _e;
    for (let a3 of ge()) {
      const r3 = I(f2, a3), i3 = t2.getUICompByName(r3.title);
      if (i3) {
        const { children: t3 } = i3.children.comp, a4 = i3.children.compType.getView(), r4 = n3.split(".");
        1 === r4.length ? (_a = t3[r4[0]]) == null ? void 0 : _a.dispatchChangeValueAction(e3) : 2 === r4.length && (t3[r4[0]] ? t3[r4[0]].children[r4[1]] ? (_b = t3[r4[0]].children[r4[1]]) == null ? void 0 : _b.dispatchChangeValueAction(e3) : (_c = t3[r4[0]][r4[1]]) == null ? void 0 : _c.dispatchChangeValueAction(e3) : ((_d = t3[a4].children[r4[0]]) == null ? void 0 : _d.children[r4[1]]) && ((_e = t3[a4].children[r4[0]].children[r4[1]]) == null ? void 0 : _e.dispatchChangeValueAction(e3)));
      }
    }
  };
  P(() => {
    l2([]);
    const e3 = [], n3 = t2.getUIComp().getTree(), a3 = y2(n3, []);
    for (let n4 of t2.selectedCompNames)
      for (let t3 of a3)
        t3.title === n4 && e3.push(t3.key);
    l2(e3);
  }, [t2]);
  const de = (e3, n3) => {
    l2(e3);
    const a3 = /* @__PURE__ */ new Set();
    for (let e4 of n3.checkedNodes)
      a3.add(e4.title);
    t2.setSelectedCompNames(a3, "leftPanel");
  }, ge = () => o2, ce = () => s2, me = z((e3) => {
    var _a, _b, _c, _d, _e;
    const n3 = ce();
    for (let a3 of ge()) {
      const r3 = I(f2, a3), i3 = t2.getUICompByName(r3.title);
      if (i3) {
        const { children: t3 } = i3.children.comp, a4 = i3.children.compType.getView(), r4 = e3.split(".");
        1 === r4.length ? (_a = t3[r4[0]]) == null ? void 0 : _a.dispatchChangeValueAction(n3) : 2 === r4.length && (t3[r4[0]] ? t3[r4[0]].children[r4[1]] ? (_b = t3[r4[0]].children[r4[1]]) == null ? void 0 : _b.dispatchChangeValueAction(n3) : (_c = t3[r4[0]][r4[1]]) == null ? void 0 : _c.dispatchChangeValueAction(n3) : ((_d = t3[a4].children[r4[0]]) == null ? void 0 : _d.children[r4[1]]) && ((_e = t3[a4].children[r4[0]].children[r4[1]]) == null ? void 0 : _e.dispatchChangeValueAction(n3)));
      }
    }
  }, [ce, ge]), pe = () => {
    const e3 = W.sortBy(t2.uiCompInfoList(), [(e4) => e4.name]), l3 = t2.getCollisionStatus();
    return A(L, { children: [A("div", { style: { margin: "0px 16px" }, children: [A("div", { style: { marginBottom: "10px" }, children: [N("leftPanel.activatelayers"), D(J, { style: { margin: "0px 10px" }, size: "small", defaultChecked: r2, disabled: false, onChange: (e4) => {
      var n3;
      n3 = e4, t2.rootComp.children.settings.children.disableCollision.dispatchChangeValueAction(n3), i2(n3);
    } })] }), D(q, { checkable: true, onCheck: de, selectable: false, checkedKeys: o2, draggable: l3, onDragEnter: G2, onDrop: (e4) => ((e5) => {
      const n3 = e5.node.pos.split("-"), a3 = e5.dragNode.pos.split("-");
      n3.length === a3.length && O2((r3) => {
        let i3 = H(r3);
        const o3 = Number(n3[n3.length - 1]), l4 = Number(a3[a3.length - 1]), s3 = n3.slice(0, -1).join("-"), d3 = "0" === s3 ? { children: i3 } : ae2(i3, s3);
        if (d3 && d3.children) {
          const t3 = d3.children.findIndex((t4) => t4.key === e5.dragNode.key);
          if (-1 !== t3) {
            const [e6] = d3.children.splice(t3, 1);
            d3.children.splice(o3 > l4 ? o3 - 1 : o3, 0, e6);
          }
        }
        const g3 = t2.rootComp.toJsonValue();
        let c3 = {};
        if ("module" === g3.ui.compType) {
          d3.children.forEach((e7, t3) => {
            c3[e7.key] = { ...g3.ui.comp.container.layout[e7.key], pos: t3 };
          });
          const e6 = t2.rootComp.children.ui.getModuleLayoutComp();
          e6 == null ? void 0 : e6.children.container.dispatchChangeValueAction({ ...g3.ui.comp.container, layout: c3 });
        } else
          d3.children.forEach((e6, t3) => {
            c3[e6.key] = { ...g3.ui.layout[e6.key], pos: t3 };
          }), t2.rootComp.children.ui.dispatchChangeValueAction({ ...g3.ui, layout: c3 });
        return i3;
      });
    })(e4), treeData: f2, icon: (e4) => e4.type && D("div", { style: { margin: "16px 5px 0 -3px" }, children: X[e4.type] || D(K, {}) }), switcherIcon: (e4) => e4.expanded ? D(E, {}) : D(T, {}), expandedKeys: n2, onExpand: (e4) => a2(e4), titleRender: (t3) => ((e4, t4) => (t4.find((t5) => t5.name === e4.title), D(Y, { children: D("span", { children: D("span", { children: e4.title }) }) })))(t3, e3) }), D("div", { style: { margin: "10px 0px" }, children: A(Q, { gap: "small", vertical: true, children: [D(le, { dropdownRender: () => D(Z, { items: ie, onClick: ({ key: e4 }) => {
      u2(e4);
    } }), children: D(_, { size: "small", children: A(ee, { children: ["Action ", D(F, {})] }) }) }), D(te, { ref: h2, value: s2, onChange: (e4) => d2(e4.target.value), placeholder: m2 }), D(_, { type: "primary", disabled: !g2, onClick: () => g2 && me(g2), children: "Apply Action" }), D("br", {}), D(re, { themeSettingKey: "background", name: N("componentDoc.styleBackgroundColor"), color: "#ffffff", configChange: (e4) => se2(e4.color, "style.background") }), D(re, { themeSettingKey: "border", name: N("componentDoc.styleBorderColor"), color: "#ffffff", configChange: (e4) => se2(e4.color, "style.border") }), D(re, { themeSettingKey: "text", name: N("style.textColor"), color: "#ffffff", configChange: (e4) => se2(e4.color, "style.text") })] }) })] }), D(ne, {})] });
  }, he = V(() => {
    if (!S(t2.getAppType()))
      return pe();
  }, [t2, v2, n2, f2, s2]), ue = D(B, { children: D("div", { style: { paddingBottom: 80 }, children: D(j, { name: N("leftPanel.layers"), width: 288, noMargin: true, children: D("div", { className: w, children: he }) }) }) });
  return D(oe, { className: "cypress-left-content", children: ue });
};
export {
  se as LeftLayersContent
};
