import { am as ye, H as t, I as O, od as ve, iZ as be, hn as j, a4 as s, eh as se, a3 as g, dw as we, aC as Ce, hh as oe, ad as b, oe as le, of as _, J as Ie, cC as J, iL as Se, o4 as Te, og as ne, mj as R, oh as Pe, oi as Ne, oj as De, ok as $e, ib as re, ol as Z, om as Fe, m8 as U, i4 as L, on as ke, lv as ce, hi as B, hj as A, oo as Le, gh as Ae, mA as Ee, _ as Me, lw as Oe, lx as Re, op as Be, j6 as Ve, i2 as de, iR as _e, iS as ze, oq as je, ia as pe, lz as me, ji as Ue, cT as M, cW as he, fz as We, nJ as Ge, ic as Ke, jj as Je, or as Ye, os as qe, ht as Xe, i1 as ue, ot as Ze, ou as Qe, ov as He, ow as et, ox as tt, oy as ot, h$ as nt, ma as rt, hX as Q, ii as at, lB as it, k_ as lt, oz as st, hY as ct, ho as dt, oA as pt, oB as mt, oC as ht, oD as ut, iJ as gt } from "./56c67d3b.js";
import ft, { useContext as W, createContext as xt, useState as N, useMemo as z, useEffect as Y, useCallback as yt } from "react";
import { a as vt } from "./0a391aff.js";
import { D as bt } from "./f2c5273f.js";
import "react-dom";
const wt = (e) => /* @__PURE__ */ t(se, {
  children: /* @__PURE__ */ t("div", {
    style: {
      paddingBottom: "10px"
    },
    children: e.children
  })
});
function Ct(e) {
  const {
    uiComp: o
  } = e, r = W(ye), i = r.selectedCompNames, n = r.selectedComp(), a = o == null ? void 0 : o.getModuleLayoutComp();
  let l;
  return n ? /* @__PURE__ */ t(O, {
    children: n.getPropertyView()
  }) : (i.size > 1 ? l = /* @__PURE__ */ t(ve, {
    comps: Array.from(i),
    onChange: (f) => {
      r.setSelectedCompNames(/* @__PURE__ */ new Set([f]));
    },
    delete: () => {
      be.deleteComp(r, r.selectedComps());
    }
  }) : a ? l = a.getPropertyView() : l = /* @__PURE__ */ t(j, {
    style: {
      margin: 16
    },
    text: s("rightPanel.noSelectedComps")
  }), /* @__PURE__ */ t(wt, {
    children: l
  }));
}
const It = g(we)`
  width: 100%;
  height: 28px;
  border-radius: 6px;
  background-color: #efeff1;

  color: #8b8fa3;
  font-size: 12px;

  .ant-segmented-item-selected {
    border-radius: 4px;
    font-weight: 500;
    color: #222222;

    g {
      stroke: #222222;
    }
  }

  .ant-segmented-item-label {
    padding: 0 8px;
    height: 24px;
    min-height: 24px;
    line-height: 24px;
  }

  svg {
    height: 100%;
  }
`;
function St(e) {
  return /* @__PURE__ */ t(It, {
    ...e
  });
}
const G = xt({
  searchValue: "",
  onDrag: () => {
  }
}), H = Ce`
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
`, Tt = g.div`
  ${H};
  padding: 3px;
  background: #ffffff;
  border: 1px solid #d7d9e0;
  border-radius: 4px;
  height: ${(e) => e.$h}px;
  width: ${(e) => e.$w}px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  transition: all 0.2s ease-in-out;

  &:active {
    background: #f2f4f8;
  }

  &:hover {
    ${H};
    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;
  }
  
  ${(e) => e.$isSelected && `
    ${H};
    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;
  `}
`, ee = g.div`
  padding: 0 16px;
`, Pt = g.div`
  padding-top: 4px;
  margin-bottom: 12px;
`, Nt = () => {
  const e = s("docUrls.aboutUs"), o = s("lowcoderUrl.createIssue");
  return /* @__PURE__ */ t(j, {
    text: /* @__PURE__ */ b(O, {
      children: [s("rightPanel.searchNotFound"), e && /* @__PURE__ */ b(O, {
        children: [/* @__PURE__ */ t("br", {}), /* @__PURE__ */ t(le, {
          target: "_blank",
          href: e,
          children: s("rightPanel.contactUs")
        })]
      }), /* @__PURE__ */ t("br", {}), /* @__PURE__ */ t("br", {}), s("help.submitIssue"), /* @__PURE__ */ t("br", {}), o && /* @__PURE__ */ t(le, {
        target: "_blank",
        href: o,
        children: s("rightPanel.issueHere")
      })]
    })
  });
}, ge = g.span`
  ${oe};
  font-weight: 500;
  font-size: 14px;
  color: #8b8fa3;
  line-height: 22px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
`, Dt = g.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  margin-top: 4px;
`, fe = g.div`
  ${oe};
  line-height: 15px;
  display: table;
  margin: 3px auto 0;
  color: #333333;
  text-align: center;
  word-break: keep-all;
`, $t = g.span`
  ${oe};
  line-height: 14px;
  font-size: 12px;
  display: table;
  margin: 4px auto auto;
  color: #8b8fa3;
  text-align: center;
  word-spacing: 99px;
`, Ft = g.div`
  display: inline-block;
  border-radius: 4px;

  &:hover + ${fe} {
    color: #315efb;
  }
`, kt = (e) => {
  const {
    Icon: o
  } = e;
  return /* @__PURE__ */ t(Tt, {
    $w: 64,
    $h: 64,
    children: /* @__PURE__ */ t(o, {})
  });
}, Lt = g.div`
  width: 296px;
  display: flex;
  flex-wrap: wrap;
  padding: 4px 0 0 0;
  box-sizing: border-box;
  gap: 8px;
`, At = g.div`
  .section-header {
    margin-left: 0;
  }
  &:not(:last-child){
    border-bottom: 1px solid #e1e3eb;
  }
`, ae = "UICompSections", xe = {
  [ae]: {}
};
Object.keys(_).forEach((e) => {
  const o = _[e];
  xe[ae][o] = o === _.dashboards;
});
const Et = () => {
  const {
    onDrag: e,
    searchValue: o
  } = W(G), [r, i] = N(xe), [n, a] = N({}), l = z(() => {
    const c = Object.fromEntries(Object.keys(_).map((w) => [w, []]));
    return Object.entries(Ie).forEach(([w, C]) => {
      C.categories.forEach((y) => {
        c[y].push([w, C]);
      });
    }), c;
  }, []), f = z(() => {
    const c = o ? n : r, w = o ? a : i;
    return {
      compName: ae,
      state: c,
      toggle: (C, y) => {
        w((d) => {
          const x = {
            ...d
          }, I = x[C] || {};
          return I[y] = I[y] === !1, x[C] = I, x;
        });
      }
    };
  }, [o, r, n]);
  Y(() => {
    o || a({});
  }, [o]);
  const m = z(() => Object.entries(l).map(([c, w], C) => {
    let y = w;
    if (!J.isEmpty(o)) {
      const d = o.trim().toLocaleLowerCase();
      y = y.filter((x) => x[1].keywords.toLowerCase().includes(d.toLowerCase()));
    }
    return J.isEmpty(y) ? null : /* @__PURE__ */ t(At, {
      children: /* @__PURE__ */ t(Se, {
        noMargin: !0,
        width: 288,
        name: _[c],
        children: /* @__PURE__ */ t(Lt, {
          children: y.map((d) => /* @__PURE__ */ b(Dt, {
            className: d[0] === "table" ? Te : "",
            children: [/* @__PURE__ */ t(Ft, {
              draggable: !0,
              onDragStart: (x) => {
                x.dataTransfer.setData("compType", d[0]), x.dataTransfer.setDragImage(ne, 0, 0), R.setData("compType", d[0]), e(d[0]);
              },
              children: /* @__PURE__ */ t(kt, {
                Icon: d[1].icon
              })
            }), /* @__PURE__ */ t(fe, {
              children: d[1].name
            }), Pe !== "en" && /* @__PURE__ */ t($t, {
              children: d[1].enName
            })]
          }, d[0]))
        })
      })
    }, C);
  }).filter((c) => c != null), [l, o, e]);
  return m.length ? /* @__PURE__ */ t(ee, {
    children: /* @__PURE__ */ t(Ne.Provider, {
      value: f,
      children: m
    })
  }) : /* @__PURE__ */ t(ee, {
    children: /* @__PURE__ */ t(Nt, {})
  });
};
var k = /* @__PURE__ */ ((e) => (e[e.All = 0] = "All", e[e.Application = 1] = "Application", e[e.Module = 2] = "Module", e[e.NavLayout = 3] = "NavLayout", e[e.Folder = 4] = "Folder", e[e.MobileTabLayout = 6] = "MobileTabLayout", e[e.Navigation = 7] = "Navigation", e))(k || {});
const te = {
  [k.All]: {
    name: s("home.all"),
    icon: De
  },
  [k.Application]: {
    name: s("home.app"),
    icon: $e
  },
  [k.Module]: {
    name: s("home.module"),
    icon: re
  },
  [k.Navigation]: {
    name: s("home.navigation"),
    icon: Z
  },
  [k.NavLayout]: {
    name: s("home.navLayout"),
    icon: Z,
    desc: s("home.navLayoutDesc")
  },
  [k.Folder]: {
    name: s("home.folder"),
    icon: Fe
  },
  [k.MobileTabLayout]: {
    name: s("home.mobileTabLayout"),
    icon: Z,
    desc: s("home.mobileTabLayoutDesc")
  }
}, Mt = (e) => ({
  type: U.UPDATE_FOLDER_INIT,
  payload: e
}), Ot = (e, o, r) => ({
  type: U.DELETE_FOLDER_INIT,
  payload: e,
  onSuccessCallback: o,
  onErrorCallback: r
}), Rt = (e, o, r) => ({
  type: U.MOVE_TO_FOLDER_INIT,
  payload: e,
  onSuccessCallback: o,
  onErrorCallback: r
});
g.div`
  font-size: 13px;
  color: #333333;
  line-height: 13px;
  margin-bottom: 8px;
`;
const Bt = (e, o = L.Application) => o === L.NavLayout ? s("home.newNavLayout", {
  userName: e,
  name: J.toLower(te[o].name)
}) : s("home.newApp", {
  userName: e,
  name: J.toLower(te[o].name)
}), Vt = g.span`
  margin: 0 8px;
  cursor: pointer;
  color: ${ke};

  &:hover {
    color: ${ce};
  }
`;
function _t(e, o) {
  const r = B(), {
    currentUser: i,
    isCreating: n
  } = A((m) => ({
    currentUser: m.ui.users.user,
    isCreating: m.ui.application.loadingStatus.isApplicationCreating
  })), a = A(Le), l = te[e].name;
  return [yt(() => {
    if (n)
      return;
    const c = a.filter((y) => !e || e === y.applicationType).map((y) => y.name), w = Ae(Bt(i.username, e), c);
    let C = {};
    e === L.Module ? C = {
      ui: {
        compType: "module",
        comp: {}
      }
    } : e === L.NavLayout && (C = {
      ui: {
        compType: "nav",
        comp: {}
      }
    }), r(Ee({
      applicationType: e || L.Application,
      applicationName: w,
      orgId: i.currentOrgId,
      dsl: C,
      onSuccess: o || Me.noop
    }));
  }, [a, i.currentOrgId, i.username, r, n, o, e]), n, l];
}
function zt(e) {
  const {
    type: o,
    onSuccess: r
  } = e, [i, n, a] = _t(o, r);
  return /* @__PURE__ */ t(Vt, {
    onClick: i,
    children: n ? s("createAppButton.creating") : s("createAppButton.created", {
      name: a
    })
  });
}
const jt = g.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 Ut(e) {
  const o = e[""], r = {};
  let i = {
    name: "root",
    id: "",
    isFolder: !0,
    children: [],
    rename: (n) => i.name = n,
    checkName: (n) => n
  };
  for (const n of o)
    if (n.folder) {
      r[n.folderId] = {
        name: n.name,
        id: n.folderId,
        isFolder: !0,
        children: [],
        rename: (a) => r[n.folderId].name = a,
        checkName: (a) => a
      };
      for (const a of n.subApplications || [])
        if (a && a.applicationType === L.Module) {
          const l = {
            name: a.name,
            id: a.applicationId,
            containerSize: a.containerSize,
            isFolder: !1,
            children: [],
            module: a,
            rename: (f) => l.name = f,
            checkName: (f) => f
          };
          r[n.folderId].children.push(l);
        }
    } else
      n.applicationType === L.Module && (r[n.applicationId] = {
        name: n.name,
        containerSize: n.containerSize,
        id: n.applicationId,
        isFolder: !1,
        children: [],
        module: n,
        rename: (a) => r[n.applicationId].name = a,
        checkName: (a) => a
      });
  for (const n of o)
    if (n.folder) {
      const a = n.parentFolderId;
      a && r[a] ? r[a].children.push(r[n.folderId]) : i.children.push(r[n.folderId]);
    } else
      r[n.applicationId] && i.children.push(r[n.applicationId]);
  return i.children.sort((n, a) => n.isFolder && !a.isFolder ? -1 : !n.isFolder && a.isFolder ? 1 : 0), i;
}
function Wt(e) {
  const o = "module", {
    meta: r,
    isOverlay: i,
    selectedID: n,
    setSelectedID: a,
    selectedType: l,
    setSelectedType: f,
    resComp: m,
    id: c,
    $level: w
  } = e, C = B(), y = m.isFolder, d = m.name, [x, I] = N(void 0), [D, F] = N(!1), S = A(de), V = y === l && c === n, v = (u) => {
    if (u !== "") {
      let T = !1, P = d;
      if (m.rename ? (P = m.rename(u), T = !!P) : (P = d, T = !0), T) {
        a(P), f(y), I(void 0);
        try {
          C(Ke({
            applicationId: n,
            name: u
          }));
        } catch (p) {
          throw console.error("Error: Rename module in extension:", p), p;
        }
      }
      I(void 0);
    }
    I(void 0);
  }, h = (u) => {
    I(u === "" ? "Cannot Be Empty" : void 0);
  };
  return /* @__PURE__ */ t(jt, {
    draggable: !0,
    onDragStart: (u) => {
      u.stopPropagation(), u.dataTransfer.setData("compType", o), u.dataTransfer.setDragImage(ne, 0, 0), R.setData("compType", o), R.setData("compLayout", r.containerSize ? {
        w: r.containerSize.width,
        h: r.containerSize.height
      } : void 0), R.setData("compInitialValue", {
        appId: e.meta.applicationId
      }), e.onDrag(o);
    },
    children: /* @__PURE__ */ b("div", {
      className: "module-container",
      children: [/* @__PURE__ */ t(re, {
        className: "module-icon"
      }), /* @__PURE__ */ b("div", {
        style: {
          flexGrow: 1,
          maxWidth: 174 - w * 10
        },
        children: [/* @__PURE__ */ t(pe, {
          style: {
            width: "100%"
          },
          text: r.name,
          forceClickIcon: !1,
          disabled: !V || S || i,
          onFinish: v,
          onChange: h,
          onEditStateChange: (u) => F(u)
        }), /* @__PURE__ */ t(me, {
          editorFocus: !!x && D,
          title: x ? s("error") : "",
          content: x,
          hasError: !!x
        })]
      })]
    })
  });
}
const Gt = g.div`
  max-width: 100%;
  flex: 1;
  display: flex;
  padding-left: ${(e) => e.$level * 10 + (e.$foldable ? 0 : 14)}px;
  border-radius: 4px;
  border: 1px solid ${(e) => e.$active ? Oe : "transparent"};
  align-items: center;
  justify-content: space-between;
`, Kt = g.div`
  width: 100%;
  height: 25px;
  display: flex;
  user-select: none;
  padding-left: 2px;
  padding-right: 15px;
  background-color: ${(e) => e.$isOverlay ? "rgba(255, 255, 255, 0.11)" : ""};

  &&& {
    background-color: ${(e) => e.$color && !e.$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;
    }
  }
`, Jt = g.div`
  width: 12px;
  height: 12px;
  display: flex;
  margin-right: 2px;
`, Yt = g(Je)`
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  color: ${Re};

  &:hover {
    color: #315efb;
  }
`, qt = /* @__PURE__ */ t(j, {
  text: /* @__PURE__ */ b(O, {
    children: [/* @__PURE__ */ t("p", {
      children: s("rightPanel.emptyModules")
    }), /* @__PURE__ */ t(zt, {
      type: L.Module,
      onSuccess: (e) => {
        const o = e.applicationInfoView.applicationId, r = Ve(o, "edit");
        window.open(r);
      }
    })]
  })
});
function Xt(e) {
  const o = B(), {
    id: r,
    resComp: i,
    isOver: n,
    isOverlay: a,
    path: l,
    isFolded: f,
    selectedID: m,
    setSelectedID: c,
    selectedType: w,
    setSelectedType: C,
    onDelete: y,
    onCopy: d,
    onSelect: x,
    onToggleFold: I
  } = e, {
    onDrag: D
  } = W(G), [F, S] = N(void 0), [V, v] = N(!1), h = A(de), u = l.length - 1, T = i.isFolder, P = i.name, p = T === w && r === m, $ = T;
  return /* @__PURE__ */ t(Kt, {
    onClick: () => {
      $ && I(), x();
    },
    $color: p,
    $isOverlay: a,
    children: /* @__PURE__ */ b(Gt, {
      $active: n && $,
      $level: u,
      $foldable: $,
      children: [$ && /* @__PURE__ */ t(Jt, {
        children: f ? /* @__PURE__ */ t(ze, {}) : /* @__PURE__ */ t(_e, {})
      }), $ ? /* @__PURE__ */ b(O, {
        children: [/* @__PURE__ */ t(je, {
          style: {
            marginRight: "4px"
          }
        }), /* @__PURE__ */ b("div", {
          style: {
            flexGrow: 1,
            marginRight: "8px",
            width: "calc(100% - 62px)"
          },
          children: [/* @__PURE__ */ t(pe, {
            text: P,
            forceClickIcon: $,
            disabled: !p || h || a,
            onFinish: (E) => {
              if (E !== "") {
                let X = !1, K = P;
                if (i.rename ? (K = i.rename(E), X = !!K) : (K = P, X = !0), X) {
                  c(K), C(T), S(void 0);
                  try {
                    o(Mt({
                      id: m,
                      name: E
                    }));
                  } catch (ie) {
                    throw console.error("Error: Delete module in extension:", ie), ie;
                  }
                }
                S(void 0);
              }
            },
            onChange: (E) => {
              S(E === "" ? "Cannot Be Empty" : void 0);
            },
            onEditStateChange: (E) => v(E)
          }), /* @__PURE__ */ t(me, {
            editorFocus: !!F && V,
            title: F ? s("error") : "",
            content: F,
            hasError: !!F
          })]
        })]
      }) : /* @__PURE__ */ t(Wt, {
        onDrag: D,
        meta: i.module,
        isOverlay: a,
        selectedID: m,
        setSelectedID: c,
        selectedType: w,
        setSelectedType: C,
        resComp: i,
        id: r,
        $level: u
      }, r), !h && !a && /* @__PURE__ */ t(Ue, {
        del: () => y(),
        children: /* @__PURE__ */ t(Yt, {
          tabIndex: -1
        })
      })]
    })
  });
}
function Zt() {
  const e = B();
  let o = A(vt);
  const {
    searchValue: r
  } = W(G), [i, n] = N(""), [a, l] = N(!1);
  let f = "", m = "", c = "";
  const w = Ut(o), C = (v) => x(w, v);
  let y = "";
  Y(() => {
    e(Be());
  }, [e]);
  const d = () => {
    try {
      m !== "" && e(Rt({
        sourceFolderId: f,
        sourceId: m,
        folderId: c,
        moveFlag: !0
      }, () => {
      }, () => {
      }));
    } catch (v) {
      throw console.error("Error: Move module in extension:", v), v;
    } finally {
      c = "", m = "", f = "";
    }
  }, x = (v, h) => {
    if (v) {
      if (v.id === h)
        return v;
      for (const u of v.children) {
        const T = x(u, h);
        if (T)
          return T;
      }
    }
  }, I = (v) => {
    const h = C(v.id), u = h == null ? void 0 : h.isFolder, T = v.children.map((p) => I(p)).filter((p) => !!p), P = {
      id: h == null ? void 0 : h.id,
      canDropBefore: (p) => u ? p == null ? void 0 : p.isFolder : !(p != null && p.isFolder),
      canDropAfter: (p) => !(!u && (p != null && p.isFolder)),
      canDropIn: (p) => u ? p ? !p.isFolder : !0 : !1,
      items: T,
      data: h,
      addSubItem(p) {
        c = P.id, d();
      },
      deleteItem(p) {
        f = P.id, m = P.items[p].id;
      },
      addItem(p) {
        c = P.id, d();
      },
      moveItem(p, $) {
      }
    };
    if (!(r && h && !h.name.toLowerCase().includes(r.toLowerCase()) && T.length === 0))
      return P;
  }, D = I(w);
  function F(v, h) {
  }
  function S(v, h, u) {
    n(h), l(v);
  }
  function V(v, h, u) {
    if (v)
      if (u.children.length)
        M.error(s("module.folderNotEmpty"));
      else
        try {
          e(Ot({
            folderId: h,
            parentFolderId: ""
          }, () => {
            M.success(s("home.deleteSuccessMsg"));
          }, () => {
            M.error(s("error"));
          }));
        } catch (T) {
          throw console.error("Error: Remove folder in extension:", T), T;
        }
    else
      try {
        he.confirm({
          title: s("home.moveToTrash"),
          content: We("home.moveToTrashSubTitle", {
            type: "",
            name: "This file"
          }),
          onConfirm: () => {
            e(Ge({
              applicationId: h,
              folderId: y
            }, () => {
              M.success(s("success"));
            }, () => {
              M.error(s("error"));
            }));
          },
          confirmBtnType: "delete",
          okText: s("home.moveToTrash"),
          onCancel: () => {
          }
        });
      } catch (T) {
        throw console.error("Error: Remove module in extension:", T), T;
      }
  }
  return /* @__PURE__ */ b(O, {
    children: [/* @__PURE__ */ t(ge, {
      children: s("rightPanel.moduleListTitle")
    }), D != null && D.items.length ? /* @__PURE__ */ t(bt, {
      node: D,
      disable: !!r,
      unfoldAll: !!r,
      showSubInDragOverlay: !1,
      showDropInPositionLine: !1,
      showPositionLineDot: !0,
      positionLineDotDiameter: 4,
      positionLineHeight: 1,
      itemHeight: 25,
      positionLineIndent: (v, h) => {
        const u = 2 + (v.length - 1) * 30;
        return h ? u + 12 : u;
      },
      renderItemContent: (v) => {
        const {
          node: h,
          onToggleFold: u,
          onDelete: T,
          ...P
        } = v, p = h.data;
        if (!p)
          return null;
        const $ = p.id, q = p.isFolder;
        return /* @__PURE__ */ t(Xt, {
          id: $,
          node: h,
          resComp: p,
          onToggleFold: u,
          onCopy: () => void 0,
          onSelect: () => S(q, $),
          selectedID: i,
          setSelectedID: n,
          selectedType: a,
          setSelectedType: l,
          onDelete: () => {
            V(q, $, p);
          },
          ...P
        }, $);
      }
    }) : qt]
  });
}
const Qt = (e, o) => ({
  type: U.PACKAGE_META_READY,
  payload: {
    [e]: o
  }
}), Ht = g.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: ${Ye};
      transform: scale(1.2);
    }
    .module-name {
      color: ${ce};
    }
  }
  .module-icon {
    transition: all 200ms linear;
    margin-right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid ${qe};
    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: ${Xe};
  }
`;
function eo(e) {
  const o = ue(), {
    packageName: r,
    packageVersion: i,
    compName: n,
    compMeta: a,
    onDrag: l
  } = e, f = Qe("npm", r, i, n), m = `${Ze}/${o}/${r}@${i}/${a.icon}`;
  return /* @__PURE__ */ b(Ht, {
    draggable: !0,
    onDragStart: (c) => {
      c.dataTransfer.setData("compType", f), c.dataTransfer.setDragImage(ne, 0, 0), R.setData("compType", f), R.setData("compLayout", a.layoutInfo), l(f);
    },
    children: [/* @__PURE__ */ t("div", {
      className: "module-icon",
      children: a.icon ? /* @__PURE__ */ t("img", {
        alt: a.name,
        src: m
      }) : /* @__PURE__ */ t(re, {
        width: "19px"
      })
    }), /* @__PURE__ */ b("div", {
      className: "module-content",
      children: [/* @__PURE__ */ t("div", {
        className: "module-name",
        children: a.name
      }), /* @__PURE__ */ b("div", {
        className: "module-desc",
        children: [a.description || "No description.", " ", /* @__PURE__ */ b("span", {
          children: ["v", i || ""]
        })]
      })]
    })]
  });
}
const to = g.div`
  margin-bottom: 12px;
  .remove-btn {
    display: none;
  }
  &:hover {
    .remove-btn {
      display: block;
    }
  }
`, oo = g.div`
  height: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2px;
`, no = g.div`
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b8b9bf;
`, ro = g.div`
  padding-top: 4px;
  margin-bottom: 12px;
`;
function ao(e) {
  var D, F;
  const {
    name: o,
    onRemove: r
  } = e, i = B(), n = ue(), {
    onDrag: a,
    searchValue: l
  } = W(G), [f, m] = N(!1), c = He((S) => S.npmPlugin.packageMeta[o]), w = A((S) => S.npmPlugin.packageVersion[o]), y = ((F = (D = z(() => (c == null ? void 0 : c.versions) || {}, [c == null ? void 0 : c.versions])[w]) == null ? void 0 : D.lowcoder) == null ? void 0 : F.comps) || {}, d = Object.keys(y);
  Y(() => {
    m(!0), et.get(`${tt}/${n}/${o}`).then((S) => {
      S.status >= 400 || (m(!1), i(Qt(o, S.data)));
    });
  }, [i, o]);
  const x = d.filter((S) => !l || S.toLowerCase().indexOf(l.toLowerCase()) !== -1), I = x.length > 0;
  return /* @__PURE__ */ b(to, {
    children: [/* @__PURE__ */ b(oo, {
      children: [/* @__PURE__ */ t(no, {
        children: o
      }), /* @__PURE__ */ t(ot, {
        onClick: r,
        className: "remove-btn",
        text: s("npm.removePluginBtnText")
      })]
    }), /* @__PURE__ */ b(ro, {
      children: [!I && /* @__PURE__ */ t(j, {
        text: f ? "Loading..." : "No components found."
      }), I && x.map((S) => /* @__PURE__ */ t(eo, {
        onDrag: a,
        compName: S,
        compMeta: y[S],
        packageName: o,
        packageVersion: w
      }, S))]
    })]
  });
}
const io = (e) => ({
  type: U.SET_COMMON_SETTING,
  payload: e
}), lo = g.div`
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 24px;
`;
function so() {
  const e = B(), [o, r] = N(!1), [i, n] = N(""), a = A(nt), l = A(rt), f = z(() => ((l == null ? void 0 : l.npmPlugins) || []).map((d) => ({
    name: Q(d),
    raw: d
  })), [l == null ? void 0 : l.npmPlugins]), m = (d) => {
    e(io({
      orgId: a.currentOrgId,
      data: {
        key: "npmPlugins",
        value: d
      }
    }));
  }, c = () => {
    var x;
    if (!i)
      return;
    if (!ct(i)) {
      M.error(s("npm.invalidNpmPackageName"));
      return;
    }
    if ((x = l.npmPlugins) != null && x.find((I) => Q(I) === Q(i))) {
      M.error(s("npm.pluginExisted"));
      return;
    }
    const d = ((l == null ? void 0 : l.npmPlugins) || []).concat(i);
    m(d), n(""), r(!1);
  }, w = (d) => {
    var I;
    const x = ((I = l == null ? void 0 : l.npmPlugins) == null ? void 0 : I.filter((D) => D !== d)) || [];
    m(x);
  }, C = f.map((d) => /* @__PURE__ */ t(ao, {
    name: d.name,
    onRemove: () => w(d.raw)
  }, d.name)), y = /* @__PURE__ */ t(j, {
    style: {
      marginBottom: 8
    },
    text: s("rightPanel.emptyPlugins")
  });
  return /* @__PURE__ */ b(O, {
    children: [/* @__PURE__ */ t(ge, {
      children: s("rightPanel.pluginListTitle")
    }), /* @__PURE__ */ t(Pt, {
      children: C.length > 0 ? C : y
    }), /* @__PURE__ */ t(lo, {
      children: /* @__PURE__ */ t(at, {
        icon: /* @__PURE__ */ t(it, {}),
        buttonType: "blue",
        onClick: () => r(!0),
        children: s("npm.addPluginBtnText")
      })
    }), /* @__PURE__ */ b(he, {
      centered: !0,
      title: s("npm.addPluginModalTitle"),
      open: o,
      onOk: c,
      onCancel: () => r(!1),
      children: [/* @__PURE__ */ t("span", {
        style: {
          display: "block",
          marginBottom: "4px"
        },
        children: s("npm.pluginNameLabel")
      }), /* @__PURE__ */ t(lt, {
        autoFocus: !0,
        onPressEnter: () => {
          c();
        },
        onChange: (d) => {
          n(d.target.value);
        },
        value: i
      }), /* @__PURE__ */ t(st, {
        style: {
          marginTop: 8
        },
        href: s("docUrls.devNpmPlugin"),
        children: s("docUrls.devNpmPluginText")
      })]
    })]
  });
}
function co() {
  return /* @__PURE__ */ b(ee, {
    children: [/* @__PURE__ */ t(Zt, {}), /* @__PURE__ */ t(so, {})]
  });
}
const po = g.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`, mo = g.div`
  flex: 1;
  overflow: hidden;
`, ho = g.div`
  padding: 0 16px;
  padding-bottom: 12px;
  .comp-panel-tab {
    margin-top: 16px;
  }
`, uo = [{
  value: "ui",
  label: s("rightPanel.uiComponentTab")
}, {
  value: "extension",
  label: s("rightPanel.extensionTab")
}];
function go(e) {
  const {
    onCompDrag: o
  } = e, [r, i] = N(""), [n, a] = N("ui");
  return /* @__PURE__ */ b(po, {
    children: [/* @__PURE__ */ b(ho, {
      children: [/* @__PURE__ */ t(dt, {
        placeholder: s("rightPanel.searchPlaceHolder"),
        value: r,
        onChange: (l) => i(l.target.value),
        allowClear: !0
      }), /* @__PURE__ */ t(St, {
        block: !0,
        options: uo,
        value: n,
        className: "comp-panel-tab",
        onChange: (l) => a(l)
      })]
    }), /* @__PURE__ */ t(G.Provider, {
      value: {
        searchValue: r,
        onDrag: o
      },
      children: /* @__PURE__ */ t(mo, {
        children: /* @__PURE__ */ b(se, {
          children: [n === "ui" && /* @__PURE__ */ t(Et, {}), n === "extension" && /* @__PURE__ */ t(co, {})]
        })
      })
    })]
  });
}
function fo(e) {
  const {
    onTabChange: o,
    showPropertyPane: r,
    uiComp: i
  } = e, n = i && i.children.compType.getView(), a = n && gt(n), [l, f] = N("insert"), m = [{
    key: "property",
    title: s("rightPanel.propertyTab"),
    icon: /* @__PURE__ */ t(pt, {}),
    content: /* @__PURE__ */ t(Ct, {
      uiComp: i
    })
  }];
  return a || m.push({
    key: "insert",
    title: s("rightPanel.createTab"),
    icon: /* @__PURE__ */ t(mt, {}),
    content: /* @__PURE__ */ t(go, {
      onCompDrag: e.onCompDrag
    })
  }), Y(() => {
    const c = a || r ? "property" : "insert";
    c !== l && f(c);
  }, [r, a, l]), /* @__PURE__ */ t(ht, {
    className: "cypress-right-content",
    children: /* @__PURE__ */ t(ut, {
      onChange: (c) => {
        o(c);
      },
      tabsConfig: m,
      activeKey: l
    })
  });
}
const So = ft.memo(fo);
export {
  So as default
};
