@module-federation/devtools 2.6.0 → 2.8.0

package/dist/types/component/SharedDepsExplorer/index.js

@@ -0,0 +1,638 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var SharedDepsExplorer_exports = {};
+__export(SharedDepsExplorer_exports, {
+  default: () => SharedDepsExplorer_default
+});
+module.exports = __toCommonJS(SharedDepsExplorer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
+var import_share_utils = require("./share-utils");
+var import_FocusResultDisplay = __toESM(require("./FocusResultDisplay"));
+var import_index = __toESM(require("./index.module"));
+const ALL_VALUE = "__all__";
+function HoverTag(_a) {
+  var _b = _a, { tooltip, children } = _b, tagProps = __objRest(_b, ["tooltip", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Popover, { trigger: "hover", position: "top", content: tooltip != null ? tooltip : children, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, __spreadProps(__spreadValues({}, tagProps), { children })) });
+}
+function SharedDepsExplorer({
+  shareData: shareDataProp
+}) {
+  const { t } = (0, import_react_i18next.useTranslation)();
+  const [normalized, setNormalized] = (0, import_react.useState)([]);
+  const [loadingState, setLoadingState] = (0, import_react.useState)("idle");
+  const [errorMessage, setErrorMessage] = (0, import_react.useState)(null);
+  const loadedStatusLabelLocal = (status) => {
+    if (status === "loaded") {
+      return t("sharedDeps.status.loaded");
+    }
+    if (status === "loading") {
+      return t("sharedDeps.status.loading");
+    }
+    if (status === "t-loaded") {
+      return t("sharedDeps.status.tLoaded");
+    }
+    if (status === "t-loading") {
+      return t("sharedDeps.status.tLoading");
+    }
+    return t("sharedDeps.status.notLoaded");
+  };
+  const [selectedProvider, setSelectedProvider] = (0, import_react.useState)("");
+  const [selectedPackage, setSelectedPackage] = (0, import_react.useState)("");
+  const [selectedVersion, setSelectedVersion] = (0, import_react.useState)("");
+  const [selectedMode, setSelectedMode] = (0, import_react.useState)("");
+  const [searchText, setSearchText] = (0, import_react.useState)("");
+  const [chartScope, setChartScope] = (0, import_react.useState)("default");
+  const [focusPackage, setFocusPackage] = (0, import_react.useState)("react");
+  const [focusVersion, setFocusVersion] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    function bootstrap() {
+      return __async(this, null, function* () {
+        if (shareDataProp && Object.keys(shareDataProp).length > 0) {
+          const versions = (0, import_share_utils.normalizeShareData)(shareDataProp);
+          if (!cancelled) {
+            setNormalized(versions);
+            setLoadingState("idle");
+            setErrorMessage(null);
+          }
+          return;
+        }
+        if (!cancelled) {
+          setLoadingState("idle");
+          setErrorMessage(null);
+        }
+      });
+    }
+    bootstrap();
+    return () => {
+      cancelled = true;
+    };
+  }, [shareDataProp]);
+  const stats = (0, import_react.useMemo)(() => (0, import_share_utils.computeShareStats)(normalized), [normalized]);
+  const filterOptions = (0, import_react.useMemo)(
+    () => (0, import_share_utils.getFilterOptions)(normalized),
+    [normalized]
+  );
+  (0, import_react.useEffect)(() => {
+    const { scopes } = filterOptions;
+    if (!scopes.length) {
+      return;
+    }
+    if (!scopes.includes(chartScope)) {
+      if (scopes.includes("default")) {
+        setChartScope("default");
+      } else {
+        setChartScope(scopes[0]);
+      }
+    }
+  }, [filterOptions.scopes, chartScope]);
+  const filteredVersions = (0, import_react.useMemo)(() => {
+    const keyword = searchText.trim().toLowerCase();
+    return normalized.filter((v) => {
+      if (selectedProvider && v.from !== selectedProvider) {
+        return false;
+      }
+      if (selectedPackage && v.packageName !== selectedPackage) {
+        return false;
+      }
+      if (selectedVersion && v.version !== selectedVersion) {
+        return false;
+      }
+      if (selectedMode && v.treeShakingMode !== selectedMode) {
+        return false;
+      }
+      if (keyword && !v.packageName.toLowerCase().includes(keyword)) {
+        return false;
+      }
+      return true;
+    });
+  }, [
+    normalized,
+    selectedProvider,
+    selectedPackage,
+    selectedVersion,
+    selectedMode,
+    searchText
+  ]);
+  const tree = (0, import_react.useMemo)(
+    () => (0, import_share_utils.groupByProviderScopePackage)(filteredVersions),
+    [filteredVersions]
+  );
+  const versionsForSelectedPackage = (0, import_react.useMemo)(() => {
+    if (!selectedPackage) {
+      return [];
+    }
+    const set = /* @__PURE__ */ new Set();
+    normalized.forEach((v) => {
+      if (v.packageName === selectedPackage) {
+        set.add(v.version);
+      }
+    });
+    return Array.from(set).sort();
+  }, [normalized, selectedPackage]);
+  const modesForSelectedPackage = (0, import_react.useMemo)(() => {
+    if (!selectedPackage) {
+      return [];
+    }
+    const set = /* @__PURE__ */ new Set();
+    normalized.forEach((v) => {
+      if (v.packageName === selectedPackage && v.treeShakingMode) {
+        set.add(v.treeShakingMode);
+      }
+    });
+    return Array.from(set).sort();
+  }, [normalized, selectedPackage]);
+  const focusVersionsForPackage = (0, import_react.useMemo)(() => {
+    if (!focusPackage) {
+      return [];
+    }
+    const set = /* @__PURE__ */ new Set();
+    normalized.forEach((v) => {
+      if (v.packageName === focusPackage) {
+        set.add(v.version);
+      }
+    });
+    return Array.from(set).sort();
+  }, [normalized, focusPackage]);
+  const focusResult = (0, import_react.useMemo)(() => {
+    if (!focusPackage) {
+      return null;
+    }
+    return (0, import_share_utils.findPackageProvider)(
+      normalized,
+      focusPackage,
+      focusVersion || void 0
+    );
+  }, [normalized, focusPackage, focusVersion]);
+  const hasData = normalized.length > 0;
+  const columns = [
+    {
+      title: t("sharedDeps.table.columns.packageVersion"),
+      width: "28%",
+      render: (_, item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.cellCol, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.packageName, children: item.packageName }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.version, children: [
+          "v",
+          item.version
+        ] })
+      ] })
+    },
+    {
+      title: t("sharedDeps.table.columns.providerScope"),
+      width: "20%",
+      render: (_, item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.cellColGap, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.truncate, title: item.from, children: t("sharedDeps.table.providerPrefix", { name: item.from }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.scopeText, children: t("sharedDeps.table.scopePrefix", { scope: item.scope }) })
+      ] })
+    },
+    {
+      title: t("sharedDeps.table.columns.status"),
+      width: "22%",
+      render: (_, item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.cellColGap, children: [
+        ["loaded", "loading", "t-loaded", "t-loading"].includes(
+          item.loadedStatus
+        ) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          HoverTag,
+          {
+            size: "small",
+            className: `${import_index.default.tagContainer} loaded-status-tag`,
+            tooltip: loadedStatusLabelLocal(item.loadedStatus),
+            children: loadedStatusLabelLocal(item.loadedStatus)
+          }
+        ) : null,
+        item.treeShakingMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          HoverTag,
+          {
+            size: "small",
+            className: import_index.default.tagContainer,
+            tooltip: item.treeShakingMode,
+            children: item.treeShakingMode
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.configTags, children: [
+          item.shareConfig.singleton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            HoverTag,
+            {
+              size: "small",
+              className: import_index.default.scale90,
+              tooltip: "singleton",
+              children: "singleton"
+            }
+          ),
+          item.shareConfig.eager && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HoverTag, { size: "small", className: import_index.default.scale90, tooltip: "eager", children: "eager" }),
+          item.shareConfig.strictVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            HoverTag,
+            {
+              size: "small",
+              className: import_index.default.scale90,
+              tooltip: "strictVersion",
+              children: "strictVersion"
+            }
+          ),
+          item.shareConfig.requiredVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            HoverTag,
+            {
+              size: "small",
+              className: import_index.default.scale90,
+              tooltip: `requiredVersion: ${item.shareConfig.requiredVersion}`,
+              children: [
+                "requiredVersion: ",
+                item.shareConfig.requiredVersion
+              ]
+            }
+          )
+        ] })
+      ] })
+    },
+    {
+      title: t("sharedDeps.table.columns.consumers"),
+      width: "18%",
+      render: (_, item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_web_react.Popover,
+        {
+          trigger: "click",
+          position: "right",
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.popoverContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.popoverTitle, children: t("sharedDeps.consumersPopover.title") }),
+            item.useIn.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: import_index.default.scopeText, children: t("sharedDeps.consumersPopover.empty") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: import_index.default.consumerList, children: item.useIn.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: import_index.default.consumerItem, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.dot }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.packageName, children: c })
+            ] }, c)) })
+          ] }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Button, { size: "mini", type: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.btnContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Network, { className: import_index.default.mr1, size: 12 }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.consumersPopover.button", {
+              count: item.useIn.length || 0
+            }) })
+          ] }) })
+        }
+      )
+    },
+    {
+      title: t("sharedDeps.table.columns.strategy"),
+      width: "12%",
+      render: (_, item) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HoverTag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : t("sharedDeps.table.strategyFallback") });
+      }
+    }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: import_index.default.heroSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: import_index.default.heroSubtitle, children: t("sharedDeps.hero.subtitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: import_index.default.heroTitle, children: t("sharedDeps.hero.title") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.statsGrid, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_web_react.Card, { className: import_index.default.cardWithPadding, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.statSpace, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.statLabel, children: t("sharedDeps.stats.providers.title") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.statValue, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Server, { className: import_index.default.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stats.totalProviders })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: import_index.default.statDescription, children: t("sharedDeps.stats.providers.description") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_web_react.Card, { className: import_index.default.cardWithPadding, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.statSpace, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.statLabel, children: t("sharedDeps.stats.scopes.title") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.statValue, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Layers, { className: import_index.default.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stats.totalScopes }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.statSubtext, children: t("sharedDeps.stats.scopes.badge") })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.cardFooter, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${import_index.default.truncate} ${import_index.default.mr2}`, children: t("sharedDeps.stats.scopes.description") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: import_index.default.badgeGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Box, { className: import_index.default.iconSmall }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+              stats.totalPackages,
+              t("sharedDeps.stats.scopes.packagesBadge", {
+                count: stats.totalPackages
+              })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_web_react.Card, { className: import_index.default.cardWithPadding, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.cardHeader, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.statSpace, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.statLabel, children: t("sharedDeps.stats.versions.title") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.statValue, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Package2, { className: import_index.default.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stats.totalVersions })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.statusTags, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.tagRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            HoverTag,
+            {
+              className: `${import_index.default.tagContent} loaded-status-tag`,
+              tooltip: `Loaded: ${stats.loadedCount}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.tagContent, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Network, { className: `${import_index.default.iconSmall} ${import_index.default.mr1}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.stats.versions.loadedLabel") }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.tagValue, children: stats.loadedCount })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            HoverTag,
+            {
+              className: `${import_index.default.tagContent} reused-status-tag`,
+              tooltip: `Reused: ${stats.reusedCount}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.tagContent, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Repeat, { className: `${import_index.default.iconSmall} ${import_index.default.mr1}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.stats.versions.reusedLabel") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.tagValue, children: stats.reusedCount })
+              ] })
+            }
+          )
+        ] }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: import_index.default.rightPanels, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.panelStack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_web_react.Card,
+      {
+        className: import_index.default.card,
+        title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.cardTitle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Box, { className: import_index.default.iconMedium }),
+          t("sharedDeps.focusPanel.title", { package: focusPackage })
+        ] }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.controlsGrid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.inputGroup, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.inputLabel, children: t("sharedDeps.focusPanel.packageLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_web_react.Select,
+                {
+                  showSearch: true,
+                  value: focusPackage,
+                  onChange: (value) => {
+                    setFocusPackage(value);
+                    setFocusVersion("");
+                  },
+                  placeholder: t("sharedDeps.focusPanel.packagePlaceholder"),
+                  className: import_index.default.fullWidth,
+                  children: filterOptions.packages.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: name, children: name }, name))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.inputGroup, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.inputLabel, children: t("sharedDeps.focusPanel.versionLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_web_react.Select,
+                {
+                  showSearch: true,
+                  value: focusVersion || ALL_VALUE,
+                  onChange: (value) => setFocusVersion(value === ALL_VALUE ? "" : value),
+                  placeholder: t("sharedDeps.focusPanel.versionPlaceholder"),
+                  className: import_index.default.fullWidth,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: ALL_VALUE, children: t("sharedDeps.focusPanel.versionAllOption") }),
+                    focusVersionsForPackage.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: v, children: v }, v))
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.resultBox, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_FocusResultDisplay.default,
+            {
+              focusResult,
+              hasData,
+              loadedStatusLabel: loadedStatusLabelLocal
+            }
+          ) })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_web_react.Card,
+      {
+        className: import_index.default.card,
+        title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.cardTitle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { className: import_index.default.iconMedium }),
+          t("sharedDeps.filters.cardTitle")
+        ] }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.filterGrid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_index.default.inputGroup} ${import_index.default.padding2}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.inputLabel, children: t("sharedDeps.filters.providerLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_web_react.Select,
+                {
+                  value: selectedProvider || void 0,
+                  onChange: (value) => setSelectedProvider(value === ALL_VALUE ? "" : value),
+                  placeholder: t("sharedDeps.filters.providerPlaceholder"),
+                  className: import_index.default.fullWidth,
+                  allowClear: true,
+                  children: filterOptions.providers.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: p, children: p }, p))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_index.default.inputGroup} ${import_index.default.padding2}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.inputLabel, children: t("sharedDeps.filters.packageLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_web_react.Select,
+                {
+                  value: selectedPackage || void 0,
+                  onChange: (value) => setSelectedPackage(value === ALL_VALUE ? "" : value),
+                  placeholder: t("sharedDeps.filters.packagePlaceholder"),
+                  className: import_index.default.fullWidth,
+                  allowClear: true,
+                  children: filterOptions.packages.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: name, children: name }, name))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_index.default.inputGroup} ${import_index.default.padding2}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.inputLabel, children: t("sharedDeps.filters.versionLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_web_react.Select,
+                {
+                  value: selectedVersion || void 0,
+                  onChange: (value) => setSelectedVersion(value === ALL_VALUE ? "" : value),
+                  placeholder: t("sharedDeps.filters.versionPlaceholder"),
+                  className: import_index.default.fullWidth,
+                  disabled: !selectedPackage,
+                  allowClear: true,
+                  children: versionsForSelectedPackage.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: v, children: v }, v))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_index.default.inputGroup} ${import_index.default.padding2}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: import_index.default.inputLabel,
+                  style: { display: "flex", alignItems: "center", gap: 4 },
+                  children: [
+                    "Mode",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: "Shared Tree Shaking Mode, options: server-calc | runtime-infer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_lucide_react.Info,
+                      {
+                        size: 14,
+                        style: { cursor: "help", color: "#86909c" }
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_web_react.Select,
+                {
+                  value: selectedMode || void 0,
+                  onChange: (value) => setSelectedMode(value === ALL_VALUE ? "" : value),
+                  placeholder: "All Modes",
+                  className: import_index.default.fullWidth,
+                  disabled: !selectedPackage || modesForSelectedPackage.length === 0,
+                  allowClear: true,
+                  children: modesForSelectedPackage.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Select.Option, { value: v, children: v }, v))
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.searchGrid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.inputGroup, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.inputLabel, children: t("sharedDeps.filters.keywordLabel") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_web_react.Input,
+                {
+                  prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { className: import_index.default.iconMedium }),
+                  className: import_index.default.searchInput,
+                  placeholder: t("sharedDeps.filters.keywordPlaceholder"),
+                  value: searchText,
+                  onChange: (val) => setSearchText(val)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.matchCount, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+              t("sharedDeps.filters.matchCountLabel"),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.matchValue, children: filteredVersions.length })
+            ] }) })
+          ] }),
+          !hasData && loadingState === "loading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.loadingText, children: t("sharedDeps.messages.loading") }),
+          loadingState === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.errorText, children: errorMessage ? t("sharedDeps.messages.error", { message: errorMessage }) : t("sharedDeps.messages.errorUnknown") }),
+          hasData && Object.keys(tree).length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.noMatchText, children: t("sharedDeps.messages.noMatch") }),
+          hasData && Object.keys(tree).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.treeContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.collapseWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Collapse, { children: Object.entries(tree).map(([provider, scopes]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_web_react.Collapse.Item,
+            {
+              name: provider,
+              header: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.providerHeader, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.providerTitle, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Server, { className: import_index.default.iconMedium }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: provider })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.providerMeta, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.filters.scopeCount", {
+                  count: Object.keys(scopes).length
+                }) }) })
+              ] }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.scopeList, children: Object.entries(scopes).map(([scopeName, packages]) => {
+                const list = Object.values(packages).flat();
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.scopeItem, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.scopeHeader, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Layers, { className: import_index.default.iconSmall }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.filters.scopePrefix", {
+                      name: scopeName
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.tableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_web_react.Table,
+                    {
+                      columns,
+                      data: list,
+                      pagination: false,
+                      rowKey: "id",
+                      border: false,
+                      size: "small"
+                    }
+                  ) })
+                ] }, scopeName);
+              }) })
+            },
+            provider
+          )) }) }) })
+        ]
+      }
+    ) })
+  ] });
+}
+var SharedDepsExplorer_default = SharedDepsExplorer;