import { cr as e, jC as o, gn as t, d_ as r, av as n, fU as i, dU as a, jD as l, jE as s, Y as d, fV as c, g4 as p, jF as m, j8 as h, ed as u, jG as g, dW as f, jH as x, jI as v, fq as y, jJ as b, jK as j, i$ as w, fD as T, jL as I, jh as C, dV as D, jM as k, jN as $, jO as N, ji as S, jj as E, fg as P, fi as F, f$ as L, g0 as O, jP as M, fp as A, cu as z, gF as _, eA as B, fs as V, jQ as R, jR as U, gx as q, fr as G, gG as H, jS as K, jT as W, e3 as Y, fh as J, jU as X, jV as Q, jW as Z, jX as ee, jY as oe, fe as te, j0 as re, fa as ne, fv as ie, jl as ae, iq as le, jZ as se, fb as de, d$ as ce, j_ as pe, j$ as me, k0 as he, k1 as ue, fS as ge } from "./index-2be62fff.js";
import fe, { useContext as xe, createContext as ve, useState as ye, useMemo as be, useEffect as je, useCallback as we } from "react";
import { lA as Te, lS as Ie, lR as Ce } from "./ant-design-icons-14ab96af.js";
import { S as De } from "./Segmented-136b3e00.js";
import { l as ke, d as $e } from "./styled-components-c6abe9a3.js";
import { f as Ne, _ as Se } from "./lodash-226cb5b1.js";
import "./loglevel-5e7e37fc.js";
import { g as Ee } from "./enterpriseSelectors-1897ddd8.js";
import { f as Pe } from "./folderSelector-82f1bcf3.js";
import { D as Fe } from "./DraggableTree-5eba09cc.js";
import { a as Le } from "./axios-125479b5.js";
import "./redux-devtools-f8b1cd80.js";
import "./alasql-f59e855e.js";
import "./react-router-8d1fc2f1.js";
import "./antd-97b654da.js";
import "react-dom";
import "./dayjs-7fc5ce65.js";
import "./fontawesome-89eb6278.js";
import "./dnd-kit-e67c9595.js";
import "./moment-d8baa15a.js";
import "./crypto-js-8020edb5.js";
import "./numbro-48e81844.js";
import "./papaparse-088c0adc.js";
import "./uuid-82f303b2.js";
import "./supabase-2e4a9112.js";
import "./fetch-6a200310.js";
import "./react-draggable-fda4f1cb.js";
import "./remark-gfm-e9b5dec7.js";
import "./buffer-e20f80c8.js";
import "./rehype-raw-41b6145f.js";
import "./parse5-6476676e.js";
import "./rehype-sanitize-deb53e9a.js";
import "./simplebar-react-cab52c82.js";
import "./react-best-gradient-color-picker-812be7ee.js";
import "./ua-parser-js-1d18a3f8.js";
import "./clsx-469c2c43.js";
import "./codemirror-edf161cb.js";
import "./really-relaxed-json-e5391d6a.js";
import "./immer-c0428a8d.js";
import "./redux-saga-1b0a458d.js";
import "./hotkeys-js-0dddb21a.js";
import "./cnchar-8c3eaa86.js";
import "./react-documents-ae08f8b5.js";
import "./sql-formatter-69e8df59.js";
import "./rc-trigger-9e54e169.js";
import "./react-json-view-364658b4.js";
import "./qrcode-react-e4f7745b.js";
import "./katex-cda5b990.js";
import "./ecogis-maps-10bb29cf.js";
import "./devextreme-28d23085.js";
import "./exceljs-1678d36b.js";
import "./file-saver-es-c18fae8f.js";
const Oe = (e2) => Te(i, { children: Te("div", { style: { paddingBottom: "10px" }, children: e2.children }) });
function Me(i2) {
  const { uiComp: a2 } = i2, l2 = xe(e), s2 = l2.selectedCompNames, d2 = l2.selectedComp(), c2 = a2 == null ? void 0 : a2.getModuleLayoutComp();
  let p2;
  return d2 ? Te(Ie, { children: d2.getPropertyView() }) : (p2 = s2.size > 1 ? Te(o, { comps: Array.from(s2), onChange: (e2) => {
    l2.setSelectedCompNames(/* @__PURE__ */ new Set([e2]));
  }, delete: () => {
    t.deleteComp(l2, l2.selectedComps());
  } }) : c2 ? c2.getPropertyView() : Te(r, { style: { margin: 16 }, text: n("rightPanel.noSelectedComps") }), Te(Oe, { children: p2 }));
}
const Ae = ve({ searchValue: "", onDrag: () => {
} }), ze = ke`
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
`, _e = $e.div`
  ${ze};
  padding: 3px;
  background: #ffffff;
  border: 1px solid #d7d9e0;
  border-radius: 4px;
  height: ${(e2) => e2.$h}px;
  width: ${(e2) => e2.$w}px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  transition: all 0.2s ease-in-out;

  &:active {
    background: #f2f4f8;
  }

  &:hover {
    ${ze};
    padding: 0;
    transform: scale(1.05);
    transition: all 0.2s ease;
    border: 1px solid #b3c4ff;
    box-shadow: 0 0 5px 0 rgba(51, 119, 255, 0.15);
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  
  ${(e2) => e2.$isSelected && `
    ${ze};
    padding: 0;
    transform: scale(1.05);
    transition: all 0.2s ease;
    border: 2px solid #b3c4ff;
    box-shadow: 0 0 5px 0 rgba(51, 119, 255, 0.15);
    transform-style: preserve-3d;
    backface-visibility: hidden;
  `}

  ${(e2) => e2.$color && `
    svg > *[fill='#B480DE'] {
      fill: ${e2.$color};
    }
    svg > *[stroke='#B480DE'] {
      stroke: ${e2.$color};
    }
  `}
`, Be = $e.div`
  padding: 0 16px;
`, Ve = $e.div`
  padding-top: 4px;
  margin-bottom: 12px;
`, Re = () => {
  const e2 = n("docUrls.aboutUs"), o2 = n("lowcoderUrl.createIssue");
  return Te(r, { text: Ce(Ie, { children: [n("rightPanel.searchNotFound"), e2 && Ce(Ie, { children: [Te("br", {}), Te(l, { target: "_blank", href: e2, children: n("rightPanel.contactUs") })] }), Te("br", {}), Te("br", {}), n("help.submitIssue"), Te("br", {}), o2 && Te(l, { target: "_blank", href: o2, children: n("rightPanel.issueHere") })] }) });
}, Ue = $e.span`
  ${a};
  font-weight: 500;
  font-size: 14px;
  color: #8b8fa3;
  line-height: 22px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
`, qe = $e.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  margin-top: 4px;
`, Ge = $e.div`
  ${a};
  line-height: 15px;
  display: table;
  margin: 3px auto 0;
  color: #333333;
  text-align: center;
  word-break: keep-all;
`, He = $e.span`
  ${a};
  line-height: 14px;
  font-size: 12px;
  display: table;
  margin: 4px auto auto;
  color: #8b8fa3;
  text-align: center;
  word-spacing: 99px;
`, Ke = $e.div`
  display: inline-block;
  border-radius: 4px;

  &:hover + ${Ge} {
    color: #315efb;
  }
`, We = (e2) => {
  var _a;
  const { Icon: o2 } = e2, t2 = f(Ee);
  return Te(_e, { $w: 64, $h: 64, $color: (_a = t2 == null ? void 0 : t2.config_set) == null ? void 0 : _a.mainBrandingColor, children: Te(o2, {}) });
}, Ye = $e.div`
  width: 296px;
  display: flex;
  flex-wrap: wrap;
  padding: 4px 0 0 0;
  box-sizing: border-box;
  gap: 8px;
`, Je = $e.div`
  .section-header {
    margin-left: 0;
  }
  &:not(:last-child){
    border-bottom: 1px solid #e1e3eb;
  }
`, Xe = "UICompSections", Qe = { [Xe]: {} };
Object.keys(s).forEach((e2) => {
  const o2 = s[e2];
  Qe[Xe][o2] = o2 === s.layout;
});
const Ze = () => {
  const { onDrag: e2, searchValue: o2 } = xe(Ae), [t2, r2] = ye(Qe), [n2, i2] = ye({}), a2 = be(() => {
    const e3 = Object.fromEntries(Object.keys(s).map((e4) => [e4, []]));
    return Object.entries(d).forEach(([o3, t3]) => {
      t3.categories.forEach((r3) => {
        e3[r3].push([o3, t3]);
      });
    }), e3;
  }, []), l2 = be(() => {
    const e3 = o2 ? i2 : r2;
    return { compName: Xe, state: o2 ? n2 : t2, toggle: (o3, t3) => {
      e3((e4) => {
        const r3 = { ...e4 }, n3 = r3[o3] || {};
        return n3[t3] = false === n3[t3], r3[o3] = n3, r3;
      });
    } };
  }, [o2, t2, n2]);
  je(() => {
    o2 || i2({});
  }, [o2]);
  const f2 = be(() => Object.entries(a2).map(([t3, r3], n3) => {
    let i3 = r3;
    if (!Ne.isEmpty(o2)) {
      const e3 = o2.trim().toLocaleLowerCase();
      i3 = i3.filter((o3) => o3[1].keywords.toLowerCase().includes(e3.toLowerCase()));
    }
    return Ne.isEmpty(i3) ? null : Te(Je, { children: Te(c, { noMargin: true, width: 288, name: s[t3], children: Te(Ye, { children: i3.map((o3) => Ce(qe, { className: "table" === o3[0] ? p : "", children: [Te(Ke, { draggable: true, onDragStart: (t4) => {
      t4.dataTransfer.setData("compType", o3[0]), t4.dataTransfer.setDragImage(m, 0, 0), h.setData("compType", o3[0]), e2(o3[0]);
    }, children: Te(We, { Icon: o3[1].icon }) }), Te(Ge, { children: o3[1].name }), "en" !== u && Te(He, { children: o3[1].enName })] }, o3[0])) }) }) }, n3);
  }).filter((e3) => null != e3), [a2, o2, e2]);
  return f2.length ? Te(Be, { children: Te(g.Provider, { value: l2, children: f2 }) }) : Te(Be, { children: Te(Re, {}) });
};
var eo = ((e2) => (e2[e2.All = 0] = "All", e2[e2.Application = 1] = "Application", e2[e2.Module = 2] = "Module", e2[e2.NavLayout = 3] = "NavLayout", e2[e2.Folder = 4] = "Folder", e2[e2.MobileTabLayout = 6] = "MobileTabLayout", e2[e2.Navigation = 7] = "Navigation", e2))(eo || {});
const oo = { [eo.All]: { name: n("home.all"), icon: x }, [eo.Application]: { name: n("home.app"), icon: v }, [eo.Module]: { name: n("home.module"), icon: y }, [eo.Navigation]: { name: n("home.navigation"), icon: b }, [eo.NavLayout]: { name: n("home.navLayout"), icon: b, desc: n("home.navLayoutDesc") }, [eo.Folder]: { name: n("home.folder"), icon: j }, [eo.MobileTabLayout]: { name: n("home.mobileTabLayout"), icon: b, desc: n("home.mobileTabLayoutDesc") } };
$e.div`
  font-size: 13px;
  color: #333333;
  line-height: 13px;
  margin-bottom: 8px;
`;
const to = $e.span`
  margin: 0 8px;
  cursor: pointer;
  color: ${I};

  &:hover {
    color: ${C};
  }
`;
function ro(e2, o2) {
  const t2 = D(), { currentUser: r2, isCreating: i2 } = f((e3) => ({ currentUser: e3.ui.users.user, isCreating: e3.ui.application.loadingStatus.isApplicationCreating })), a2 = f(k), l2 = oo[e2].name;
  return [we(() => {
    if (i2)
      return;
    const l3 = a2.filter((o3) => !e2 || e2 === o3.applicationType).map((e3) => e3.name), s2 = $(((e3, o3 = T.Application) => o3 === T.NavLayout ? n("home.newNavLayout", { userName: e3, name: Ne.toLower(oo[o3].name) }) : n("home.newApp", { userName: e3, name: Ne.toLower(oo[o3].name) }))(r2.username, e2), l3);
    let d2 = {};
    e2 === T.Module ? d2 = { ui: { compType: "module", comp: {} } } : e2 === T.NavLayout && (d2 = { ui: { compType: "nav", comp: {} } }), t2(N({ applicationType: e2 || T.Application, applicationName: s2, orgId: r2.currentOrgId, dsl: d2, onSuccess: o2 || Se.noop }));
  }, [a2, r2.currentOrgId, r2.username, t2, i2, o2, e2]), i2, l2];
}
function no(e2) {
  const { type: o2, onSuccess: t2 } = e2, [r2, i2, a2] = ro(o2, t2);
  return Te(to, { onClick: r2, children: i2 ? n("createAppButton.creating") : n("createAppButton.created", { name: a2 }) });
}
const io = $e.div`
  display: flex;
  flex-direction: row;
  &:last-child {
    margin-bottom: 0;
  }
  .module-container {
      display: flex;
      width: 195px;
  }
  .module-icon {
    margin-right: 4px;
      width:19px;
      height: 19px;
  }
  .module-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
  }
  .module-name {
    //flex-grow: 1;
    //margin-right: 8px;
    line-height: 1.5;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
`;
function ao(e2) {
  const o2 = "module", { meta: t2, isOverlay: r2, selectedID: i2, setSelectedID: a2, selectedType: l2, setSelectedType: s2, resComp: d2, id: c2, $level: p2 } = e2, u2 = D(), g2 = d2.isFolder, x2 = d2.name, [v2, b2] = ye(void 0), [j2, w2] = ye(false), T2 = f(F), I2 = g2 === l2 && c2 === i2;
  return Te(io, { draggable: true, onDragStart: (r3) => {
    r3.stopPropagation(), r3.dataTransfer.setData("compType", o2), r3.dataTransfer.setDragImage(m, 0, 0), h.setData("compType", o2), h.setData("compLayout", t2.containerSize ? { w: t2.containerSize.width, h: t2.containerSize.height } : void 0), h.setData("compInitialValue", { appId: e2.meta.applicationId }), e2.onDrag(o2);
  }, children: Ce("div", { className: "module-container", children: [Te(y, { className: "module-icon" }), Ce("div", { style: { flexGrow: 1, maxWidth: 174 - 10 * p2 }, children: [Te(A, { style: { width: "100%" }, text: t2.name, forceClickIcon: false, disabled: !I2 || T2 || r2, onFinish: (e3) => {
    if ("" !== e3) {
      let o3 = false, t3 = x2;
      if (d2.rename ? (t3 = d2.rename(e3), o3 = !!t3) : (t3 = x2, o3 = true), o3) {
        a2(t3), s2(g2), b2(void 0);
        try {
          u2(G({ applicationId: i2, name: e3 }));
        } catch (e4) {
          throw console.error("Error: Rename module in extension:", e4), e4;
        }
      }
      b2(void 0);
    }
    b2(void 0);
  }, onChange: (e3) => {
    b2("" === e3 ? "Cannot Be Empty" : void 0);
  }, onEditStateChange: (e3) => w2(e3) }), Te(z, { editorFocus: !!v2 && j2, title: v2 ? n("error") : "", content: v2, hasError: !!v2 })] })] }) });
}
const lo = $e.div`
  max-width: 100%;
  flex: 1;
  display: flex;
  padding-left: ${(e2) => 10 * e2.$level + (e2.$foldable ? 0 : 14)}px;
  border-radius: 4px;
  border: 1px solid ${(e2) => e2.$active ? S : "transparent"};
  align-items: center;
  justify-content: space-between;
`, so = $e.div`
  width: 100%;
  height: 25px;
  display: flex;
  user-select: none;
  padding-left: 2px;
  padding-right: 15px;
  background-color: ${(e2) => e2.$isOverlay ? "rgba(255, 255, 255, 0.11)" : ""};

  &&& {
    background-color: ${(e2) => e2.$color && !e2.$isOverlay ? "#f2f7fc" : null};
  }

  &:hover {
    background-color: #f2f7fc80;
    cursor: pointer;
  }

  .taco-edit-text-wrapper {
    width: 100%;
    height: 21px;
    line-height: 21px;
    color: #222222;
    margin-left: 0;
    font-size: 13px;
    padding-left: 0;

    &:hover {
      background-color: transparent;
    }
  }

  .taco-edit-text-input {
    width: 100%;
    height: 21px;
    line-height: 21px;
    color: #222222;
    margin-left: 0;
    font-size: 13px;
    background-color: #fdfdfd;
    border: 1px solid #3377ff;
    border-radius: 2px;

    &:focus {
      border-color: #3377ff;
      box-shadow: 0 0 0 2px #d6e4ff;
    }
  }
`, co = $e.div`
  width: 12px;
  height: 12px;
  display: flex;
  margin-right: 2px;
`, po = $e(H)`
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  color: ${E};

  &:hover {
    color: #315efb;
  }
`;
function mo(e2) {
  const o2 = D(), { id: t2, resComp: r2, isOver: i2, isOverlay: a2, path: l2, isFolded: s2, selectedID: d2, setSelectedID: c2, selectedType: p2, setSelectedType: m2, onDelete: h2, onCopy: u2, onSelect: g2, onToggleFold: x2 } = e2, { onDrag: v2 } = xe(Ae), [y2, b2] = ye(void 0), [j2, T2] = ye(false), I2 = f(F), C2 = l2.length - 1, k2 = r2.isFolder, $2 = r2.name, N2 = k2 === p2 && t2 === d2, S2 = k2;
  return Te(so, { onClick: () => {
    S2 && x2(), g2();
  }, $color: N2, $isOverlay: a2, children: Ce(lo, { $active: i2 && S2, $level: C2, $foldable: S2, children: [S2 && Te(co, { children: Te(s2 ? O : L, {}) }), S2 ? Ce(Ie, { children: [Te(M, { style: { marginRight: "4px" } }), Ce("div", { style: { flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }, children: [Te(A, { text: $2, forceClickIcon: S2, disabled: !N2 || I2 || a2, onFinish: (e3) => {
    if ("" !== e3) {
      let n2 = false, i3 = $2;
      if (r2.rename ? (i3 = r2.rename(e3), n2 = !!i3) : (i3 = $2, n2 = true), n2) {
        c2(i3), m2(k2), b2(void 0);
        try {
          o2((t3 = { id: d2, name: e3 }, { type: w.UPDATE_FOLDER_INIT, payload: t3 }));
        } catch (e4) {
          throw console.error("Error: Delete module in extension:", e4), e4;
        }
      }
      b2(void 0);
    }
    var t3;
  }, onChange: (e3) => {
    b2("" === e3 ? "Cannot Be Empty" : void 0);
  }, onEditStateChange: (e3) => T2(e3) }), Te(z, { editorFocus: !!y2 && j2, title: y2 ? n("error") : "", content: y2, hasError: !!y2 })] })] }) : Te(ao, { onDrag: v2, meta: r2.module, isOverlay: a2, selectedID: d2, setSelectedID: c2, selectedType: p2, setSelectedType: m2, resComp: r2, id: t2, $level: C2 }, t2), !I2 && !a2 && Te(_, { del: () => h2(), children: Te(po, { tabIndex: -1 }) })] }) });
}
function ho() {
  const e2 = D();
  let o2 = f(Pe);
  const t2 = f(P), { searchValue: i2 } = xe(Ae), [a2, l2] = ye(""), [s2, d2] = ye(false);
  let c2 = "", p2 = "", m2 = "";
  const h2 = be(() => function(e3) {
    const o3 = e3[""] || [], t3 = {};
    let r2 = { name: "root", id: "", isFolder: true, children: [], rename: (e4) => r2.name = e4, checkName: (e4) => e4 };
    for (const e4 of o3)
      if (e4.folder) {
        t3[e4.folderId] = { name: e4.name, id: e4.folderId, isFolder: true, children: [], rename: (o4) => t3[e4.folderId].name = o4, checkName: (e5) => e5 };
        for (const o4 of e4.subApplications || [])
          if (o4 && o4.applicationType === T.Module) {
            const r3 = { name: o4.name, id: o4.applicationId, containerSize: o4.containerSize, isFolder: false, children: [], module: o4, rename: (e5) => r3.name = e5, checkName: (e5) => e5 };
            t3[e4.folderId].children.push(r3);
          }
      } else
        e4.applicationType === T.Module && (t3[e4.applicationId] = { name: e4.name, containerSize: e4.containerSize, id: e4.applicationId, isFolder: false, children: [], module: e4, rename: (o4) => t3[e4.applicationId].name = o4, checkName: (e5) => e5 });
    for (const e4 of o3)
      if (e4.folder) {
        const o4 = e4.parentFolderId;
        o4 && t3[o4] ? t3[o4].children.push(t3[e4.folderId]) : r2.children.push(t3[e4.folderId]);
      } else
        t3[e4.applicationId] && r2.children.push(t3[e4.applicationId]);
    return r2.children.sort((e4, o4) => e4.isFolder && !o4.isFolder ? -1 : !e4.isFolder && o4.isFolder ? 1 : 0), r2;
  }(o2), [o2]), u2 = we((e3) => y2(h2, e3), [h2]);
  const [g2, x2] = ye(i2);
  je(() => {
    const e3 = setTimeout(() => {
      x2(i2);
    }, 500);
    return () => clearTimeout(e3);
  }, [i2]), je(() => {
    var o3;
    t2 || e2((o3 = { name: g2, pageNum: 1, pageSize: 200 }, { type: w.FETCH_FOLDER_ELEMENTS_INIT, payload: o3 }));
  }, [e2, t2, g2]);
  const v2 = () => {
    try {
      "" !== p2 && e2((o3 = { sourceFolderId: c2, sourceId: p2, folderId: m2, moveFlag: true }, t3 = () => {
      }, r2 = () => {
      }, { type: w.MOVE_TO_FOLDER_INIT, payload: o3, onSuccessCallback: t3, onErrorCallback: r2 }));
    } catch (e3) {
      throw console.error("Error: Move module in extension:", e3), e3;
    } finally {
      m2 = "", p2 = "", c2 = "";
    }
    var o3, t3, r2;
  }, y2 = (e3, o3) => {
    if (e3) {
      if (e3.id === o3)
        return e3;
      for (const t3 of e3.children) {
        const e4 = y2(t3, o3);
        if (e4)
          return e4;
      }
    }
  }, b2 = (e3) => {
    const o3 = u2(e3.id), t3 = o3 == null ? void 0 : o3.isFolder, r2 = e3.children.map((e4) => b2(e4)).filter((e4) => !!e4), n2 = { id: o3 == null ? void 0 : o3.id, canDropBefore: (e4) => t3 ? e4 == null ? void 0 : e4.isFolder : !(e4 == null ? void 0 : e4.isFolder), canDropAfter: (e4) => !(!t3 && (e4 == null ? void 0 : e4.isFolder)), canDropIn: (e4) => !!t3 && (!e4 || !e4.isFolder), items: r2, data: o3, addSubItem(e4) {
      m2 = n2.id, v2();
    }, deleteItem(e4) {
      c2 = n2.id, p2 = n2.items[e4].id;
    }, addItem(e4) {
      m2 = n2.id, v2();
    }, moveItem(e4, o4) {
    } };
    return n2;
  }, j2 = be(() => b2(h2), [h2, u2, g2]);
  function I2(o3, t3, r2) {
    if (o3)
      if (r2.children.length)
        B.error(n("module.folderNotEmpty"));
      else
        try {
          e2((i3 = { folderId: t3, parentFolderId: "" }, a3 = () => {
            B.success(n("home.deleteSuccessMsg"));
          }, l3 = () => {
            B.error(n("error"));
          }, { type: w.DELETE_FOLDER_INIT, payload: i3, onSuccessCallback: a3, onErrorCallback: l3 }));
        } catch (e3) {
          throw console.error("Error: Remove folder in extension:", e3), e3;
        }
    else
      try {
        V.confirm({ title: n("home.moveToTrash"), content: R("home.moveToTrashSubTitle", { type: "", name: "This file" }), onConfirm: () => {
          e2(U({ applicationId: t3, folderId: "" }, () => {
            B.success(n("success"));
          }, () => {
            B.error(n("error"));
          }));
        }, confirmBtnType: "delete", okText: n("home.moveToTrash"), onCancel: () => {
        } });
      } catch (e3) {
        throw console.error("Error: Remove module in extension:", e3), e3;
      }
    var i3, a3, l3;
  }
  return Ce(Ie, { children: [Te(Ue, { children: n("rightPanel.moduleListTitle") }), (j2 == null ? void 0 : j2.items.length) ? Te(Fe, { node: j2, disable: !!i2, unfoldAll: !!i2, showSubInDragOverlay: false, showDropInPositionLine: false, showPositionLineDot: true, positionLineDotDiameter: 4, positionLineHeight: 1, itemHeight: 25, positionLineIndent: (e3, o3) => {
    const t3 = 2 + 30 * (e3.length - 1);
    return o3 ? t3 + 12 : t3;
  }, renderItemContent: (e3) => {
    const { node: o3, onToggleFold: t3, onDelete: r2, ...n2 } = e3, i3 = o3.data;
    if (!i3)
      return null;
    const c3 = i3.id, p3 = i3.isFolder;
    return Te(mo, { id: c3, node: o3, resComp: i3, onToggleFold: t3, onCopy: () => {
    }, onSelect: () => function(e4, o4) {
      l2(o4), d2(e4);
    }(p3, c3), selectedID: a2, setSelectedID: l2, selectedType: s2, setSelectedType: d2, onDelete: () => {
      I2(p3, c3, i3);
    }, ...n2 }, c3);
  } }) : Te(r, { text: Ce(Ie, { children: [Te("p", { children: n("rightPanel.emptyModules") }), !t2 && Te(no, { type: T.Module, onSuccess: (e3) => {
    const o3 = e3.applicationInfoView.applicationId, t3 = q(o3, "edit");
    window.open(t3);
  } })] }) })] });
}
const uo = $e.div`
  display: flex;
  flex-direction: row;
  margin-bottom: 12px;
  &:last-child {
    margin-bottom: 0;
  }
  &:hover {
    cursor: grab;
    .module-icon {
      box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
      border-color: ${K};
      transform: scale(1.2);
    }
    .module-name {
      color: ${C};
    }
  }
  .module-icon {
    transition: all 200ms linear;
    margin-right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid ${W};
    border-radius: 4px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .module-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
  }
  .module-name {
    line-height: 1.5;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .module-desc {
    line-height: 1.5;
    font-size: 12px;
    color: ${Y};
  }
`;
function go(e2) {
  const o2 = J(), { packageName: t2, packageVersion: r2, compName: n2, compMeta: i2, onDrag: a2 } = e2, l2 = X("npm", t2, r2, n2), s2 = `${Q}/${o2}/${t2}@${r2}/${i2.icon}`;
  return Ce(uo, { draggable: true, onDragStart: (e3) => {
    e3.dataTransfer.setData("compType", l2), e3.dataTransfer.setDragImage(m, 0, 0), h.setData("compType", l2), h.setData("compLayout", i2.layoutInfo), a2(l2);
  }, children: [Te("div", { className: "module-icon", children: i2.icon ? Te("img", { alt: i2.name, src: s2 }) : Te(y, { width: "19px" }) }), Ce("div", { className: "module-content", children: [Te("div", { className: "module-name", children: i2.name }), Ce("div", { className: "module-desc", children: [i2.description || "No description.", " ", Ce("span", { children: ["v", r2 || ""] })] })] })] });
}
const fo = $e.div`
  margin-bottom: 12px;
  .remove-btn {
    display: none;
  }
  &:hover {
    .remove-btn {
      display: block;
    }
  }
`, xo = $e.div`
  height: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2px;
`, vo = $e.div`
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b8b9bf;
`, yo = $e.div`
  padding-top: 4px;
  margin-bottom: 12px;
`;
function bo(e2) {
  var _a, _b;
  const { name: o2, onRemove: t2 } = e2, i2 = D(), a2 = J(), { onDrag: l2, searchValue: s2 } = xe(Ae), [d2, c2] = ye(false), p2 = Z((e3) => e3.npmPlugin.packageMeta[o2]), m2 = f((e3) => e3.npmPlugin.packageVersion[o2]), h2 = be(() => (p2 == null ? void 0 : p2.versions) || {}, [p2 == null ? void 0 : p2.versions]), u2 = ((_b = (_a = h2[m2]) == null ? void 0 : _a.lowcoder) == null ? void 0 : _b.comps) || {}, g2 = Object.keys(u2);
  je(() => {
    c2(true), Le.get(`${ee}/${a2 || "none"}/${o2}`).then((e3) => {
      var t3, r2;
      e3.status >= 400 || (c2(false), i2((t3 = o2, r2 = e3.data, { type: w.PACKAGE_META_READY, payload: { [t3]: r2 } })));
    });
  }, [i2, o2]);
  const x2 = g2.filter((e3) => !s2 || -1 !== e3.toLowerCase().indexOf(s2.toLowerCase())), v2 = x2.length > 0;
  return Ce(fo, { children: [Ce(xo, { children: [Te(vo, { children: o2 }), Te(oe, { onClick: t2, className: "remove-btn", text: n("npm.removePluginBtnText") })] }), Ce(yo, { children: [!v2 && Te(r, { text: d2 ? "Loading..." : "No components found." }), v2 && x2.map((e3) => Te(go, { onDrag: l2, compName: e3, compMeta: u2[e3], packageName: o2, packageVersion: m2 }, e3))] })] });
}
const jo = $e.div`
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 24px;
`;
function wo() {
  const e2 = D(), [o2, t2] = ye(false), [i2, a2] = ye(""), l2 = f(te), s2 = f(re), d2 = f(P), c2 = be(() => ((s2 == null ? void 0 : s2.npmPlugins) || []).map((e3) => ({ name: ne(e3), raw: e3 })), [s2 == null ? void 0 : s2.npmPlugins]), p2 = (o3) => {
    var t3;
    e2((t3 = { orgId: l2.currentOrgId, isPublicApp: d2, data: { key: "npmPlugins", value: o3 } }, { type: w.SET_COMMON_SETTING, payload: t3 }));
  }, m2 = () => {
    var _a;
    if (!i2)
      return;
    if (!de(i2))
      return void B.error(n("npm.invalidNpmPackageName"));
    if ((_a = s2.npmPlugins) == null ? void 0 : _a.find((e4) => ne(e4) === ne(i2)))
      return void B.error(n("npm.pluginExisted"));
    const e3 = ((s2 == null ? void 0 : s2.npmPlugins) || []).concat(i2);
    p2(e3), a2(""), t2(false);
  }, h2 = c2.map((e3) => Te(bo, { name: e3.name, onRemove: () => ((e4) => {
    var _a;
    const o3 = ((_a = s2 == null ? void 0 : s2.npmPlugins) == null ? void 0 : _a.filter((o4) => o4 !== e4)) || [];
    p2(o3);
  })(e3.raw) }, e3.name)), u2 = Te(r, { style: { marginBottom: 8 }, text: n("rightPanel.emptyPlugins") });
  return Ce(Ie, { children: [Te(Ue, { children: n("rightPanel.pluginListTitle") }), Te(Ve, { children: h2.length > 0 ? h2 : u2 }), Te(jo, { children: Te(ie, { icon: Te(ae, {}), buttonType: "blue", onClick: () => t2(true), children: n("npm.addPluginBtnText") }) }), Ce(V, { centered: true, showOkButton: true, showCancelButton: true, title: n("npm.addPluginModalTitle"), open: o2, onOk: m2, onCancel: () => t2(false), children: [Te("span", { style: { display: "block", marginBottom: "4px" }, children: n("npm.pluginNameLabel") }), Te(le, { autoFocus: true, onPressEnter: () => {
    m2();
  }, onChange: (e3) => {
    a2(e3.target.value);
  }, value: i2 }), Te(se, { style: { marginTop: 8 }, href: n("docUrls.devNpmPlugin"), children: n("docUrls.devNpmPluginText") })] })] });
}
function To() {
  return Ce(Be, { children: [Te(ho, {}), Te(wo, {})] });
}
const Io = $e.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`, Co = $e.div`
  flex: 1;
  overflow: hidden;
`, Do = $e.div`
  padding: 0 16px;
  padding-bottom: 12px;
  .comp-panel-tab {
    margin-top: 16px;
  }
`, ko = [{ value: "ui", label: n("rightPanel.uiComponentTab") }, { value: "extension", label: n("rightPanel.extensionTab") }];
function $o(e2) {
  const { onCompDrag: o2 } = e2, [t2, r2] = ye(""), [a2, l2] = ye("ui");
  return Ce(Io, { children: [Ce(Do, { children: [Te(ce, { placeholder: n("rightPanel.searchPlaceHolder"), value: t2, onChange: (e3) => r2(e3.target.value), allowClear: true }), Te(De, { block: true, options: ko, value: a2, className: "comp-panel-tab", onChange: (e3) => l2(e3) })] }), Te(Ae.Provider, { value: { searchValue: t2, onDrag: o2 }, children: Te(Co, { children: Ce(i, { children: ["ui" === a2 && Te(Ze, {}), "extension" === a2 && Te(To, {})] }) }) })] });
}
const No = fe.memo(function(e2) {
  const { onTabChange: o2, showPropertyPane: t2, uiComp: r2 } = e2, i2 = r2 && r2.children.compType.getView(), a2 = i2 && ge(i2), [l2, s2] = ye("insert"), d2 = [{ key: "property", title: n("rightPanel.propertyTab"), icon: Te(pe, {}), content: Te(Me, { uiComp: r2 }) }];
  return a2 || d2.push({ key: "insert", title: n("rightPanel.createTab"), icon: Te(me, {}), content: Te($o, { onCompDrag: e2.onCompDrag }) }), je(() => {
    const e3 = a2 || t2 ? "property" : "insert";
    e3 !== l2 && s2(e3);
  }, [t2, a2, l2]), Te(he, { className: "cypress-right-content", children: Te(ue, { onChange: (e3) => {
    o2(e3);
  }, tabsConfig: d2, activeKey: l2 }) });
});
export {
  No as default
};
