@module-federation/devtools 0.22.1 → 0.23.0

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

@@ -55,25 +55,27 @@ 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 loadedStatusLabel(status) {
-  if (status === "loaded") {
-    return "Loaded";
-  }
-  if (status === "loading") {
-    return "Loading";
-  }
-  return "Not Loaded";
-}
 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");
+    }
+    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)("");
@@ -188,7 +190,7 @@ function SharedDepsExplorer({
   const hasData = normalized.length > 0;
   const columns = [
     {
-      title: "Package / Version",
+      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 }),
@@ -199,21 +201,15 @@ function SharedDepsExplorer({
       ] })
     },
     {
-      title: "Provider / Scope",
+      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.jsxs)("span", { className: import_index.default.truncate, title: item.from, children: [
-          "Provider: ",
-          item.from
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: import_index.default.scopeText, children: [
-          "scope: ",
-          item.scope
-        ] })
+        /* @__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: "Status",
+      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"].includes(item.loadedStatus) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -221,7 +217,7 @@ function SharedDepsExplorer({
           {
             size: "small",
             className: `${import_index.default.tagContainer} loaded-status-tag`,
-            children: loadedStatusLabel(item.loadedStatus)
+            children: loadedStatusLabelLocal(item.loadedStatus)
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.configTags, children: [
@@ -236,7 +232,7 @@ function SharedDepsExplorer({
       ] })
     },
     {
-      title: "Consumers",
+      title: t("sharedDeps.table.columns.consumers"),
       width: "18%",
       render: (_, item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_web_react.Popover,
@@ -244,70 +240,71 @@ function SharedDepsExplorer({
           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: "Consumer List" }),
-            item.useIn.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: import_index.default.scopeText, children: "No applications are consuming this shared dependency version." }) : /* @__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)("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.jsxs)("span", { children: [
-              item.useIn.length || 0,
-              " Apps"
-            ] })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("sharedDeps.consumersPopover.button", {
+              count: item.useIn.length || 0
+            }) })
           ] }) })
         }
       )
     },
     {
-      title: "Strategy",
+      title: t("sharedDeps.table.columns.strategy"),
       width: "12%",
       render: (_, item) => {
         var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { size: "small", color: "gray", children: (_a = item.strategy) != null ? _a : "-" });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { 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: "Module Federation · Shared Dependencies" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: import_index.default.heroTitle, children: "Overview of Shared Dependencies Usage" })
+      /* @__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: "Number of Providers" }),
+          /* @__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: "Number of applications/build versions exposing shared dependencies." })
+        /* @__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: "Share Scope / Package" }),
+          /* @__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: "scope" })
+            /* @__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: "Shared spaces under Scope dimension." }),
+          /* @__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,
-              " packages"
+              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: "Version Loading & Reuse" }),
+          /* @__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 })
@@ -316,12 +313,12 @@ function SharedDepsExplorer({
         /* @__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)(import_web_react.Tag, { className: `${import_index.default.tagContent} loaded-status-tag`, 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: "Loaded" }),
+            /* @__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)(import_web_react.Tag, { className: `${import_index.default.tagContent} reused-status-tag`, 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: "Reused" }),
+            /* @__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 })
           ] }) })
         ] }) })
@@ -333,14 +330,12 @@ function SharedDepsExplorer({
         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 }),
-          "Who provides the current shared: '",
-          focusPackage,
-          "'?"
+          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: "Package Name" }),
+              /* @__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,
                 {
@@ -350,24 +345,24 @@ function SharedDepsExplorer({
                     setFocusPackage(value);
                     setFocusVersion("");
                   },
-                  placeholder: "Select Shared Dependency Package Name",
+                  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: "Version (Optional, inferred if empty)" }),
+              /* @__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: "All Versions",
+                  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: "All Versions" }),
+                    /* @__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))
                   ]
                 }
@@ -379,7 +374,7 @@ function SharedDepsExplorer({
             {
               focusResult,
               hasData,
-              loadedStatusLabel
+              loadedStatusLabel: loadedStatusLabelLocal
             }
           ) })
         ]
@@ -391,18 +386,18 @@ function SharedDepsExplorer({
         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 }),
-          "Filter / Search"
+          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: "Provider" }),
+              /* @__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: "All Providers",
+                  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))
@@ -410,13 +405,13 @@ function SharedDepsExplorer({
               )
             ] }),
             /* @__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: "Package Name" }),
+              /* @__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: "All Packages",
+                  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))
@@ -424,13 +419,13 @@ function SharedDepsExplorer({
               )
             ] }),
             /* @__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: "Version" }),
+              /* @__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: "All Versions",
+                  placeholder: t("sharedDeps.filters.versionPlaceholder"),
                   className: import_index.default.fullWidth,
                   disabled: !selectedPackage,
                   allowClear: true,
@@ -441,30 +436,26 @@ function SharedDepsExplorer({
           ] }),
           /* @__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: "Package Name Keyword (Fuzzy Match)" }),
+              /* @__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: "e.g., react / axios",
+                  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: [
-              "Currently Matched Versions:",
+              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: "Parsing shared dependency data..." }),
-          loadingState === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.errorText, children: [
-            "Failed to load shared dependency data:",
-            " ",
-            errorMessage != null ? errorMessage : "Unknown Error"
-          ] }),
-          hasData && Object.keys(tree).length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.noMatchText, children: "No matching shared dependency versions under current filter conditions, try relaxing the filter conditions." }),
+          !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,
             {
@@ -474,20 +465,18 @@ function SharedDepsExplorer({
                   /* @__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.jsxs)("span", { children: [
-                  "Scope Count: ",
-                  Object.keys(scopes).length
-                ] }) })
+                /* @__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.jsxs)("span", { children: [
-                      "Scope: ",
-                      scopeName
-                    ] })
+                    /* @__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,

package/dist/lib/component/SharedDepsExplorer/index_module.css

@@ -227,7 +227,7 @@
 .resultBox_967de {
   border-radius: 6px;
   border: 1px dashed #e4e4e7;
-  background-color: #f9fafb;
+  background-color: var(--color-bg-1, #f9fafb) !important;
   padding: 8px 12px;
   font-size: 12px;
 }
@@ -366,6 +366,16 @@
   border: 1px solid #e4e4e7;
   background-color: rgba(249, 250, 251, 0.4);
 }
+.tableContainer_967de .arco-table-hover .arco-table-tr:not(.arco-table-empty-row):hover .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) {
+  background-color: var(--color-fill-2, #f2f3f5) !important;
+}
+.arco-theme-dark .tableContainer_967de .arco-table-hover
+        .arco-table-tr:not(.arco-table-empty-row):hover
+        .arco-table-td:not(.arco-table-col-fixed-left):not(
+          .arco-table-col-fixed-right
+        ) {
+  background-color: var(--color-bg-4) !important;
+}
 
 .cellCol_967de {
   display: flex;
@@ -376,7 +386,7 @@
   word-break: break-all;
   font-family: monospace;
   font-size: 11px;
-  color: #27272a;
+  color: var(--color-neutral-10, #27272a) !important;
 }
 
 .version_967de {

package/dist/lib/component/ThemeToggle.js

@@ -0,0 +1,49 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 ThemeToggle_exports = {};
+__export(ThemeToggle_exports, {
+  default: () => ThemeToggle_default
+});
+module.exports = __toCommonJS(ThemeToggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_web_react = require("@arco-design/web-react");
+var import_icon = require("@arco-design/web-react/icon");
+var import_ThemeToggle = __toESM(require("./ThemeToggle.module"));
+const ThemeToggle = ({ theme, onToggle }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_web_react.Button,
+    {
+      className: import_ThemeToggle.default.themeToggle,
+      size: "default",
+      onClick: onToggle,
+      icon: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconSun, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconMoon, {})
+    }
+  );
+};
+var ThemeToggle_default = ThemeToggle;

package/dist/lib/component/ThemeToggle.module.js

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ThemeToggle_module_exports = {};
+__export(ThemeToggle_module_exports, {
+  default: () => ThemeToggle_module_default
+});
+module.exports = __toCommonJS(ThemeToggle_module_exports);
+var import_ThemeToggle_module = require("./ThemeToggle_module.css");
+var ThemeToggle_module_default = { "themeToggle": "themeToggle_2452c" };

package/dist/lib/component/ThemeToggle_module.css

@@ -0,0 +1,12 @@
+.themeToggle_2452c {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  margin: 0 6px !important;
+  padding: 0 !important;
+}
+.themeToggle_2452c:hover {
+  background-color: var(--color-fill-3, #fafafa) !important;
+}
+.arco-theme-dark .themeToggle_2452c :hover {
+  background-color: var(--color-bg-1) !important;
+}

package/dist/lib/hooks/useDevtoolsTheme.js

@@ -0,0 +1,101 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useDevtoolsTheme_exports = {};
+__export(useDevtoolsTheme_exports, {
+  useDevtoolsTheme: () => useDevtoolsTheme
+});
+module.exports = __toCommonJS(useDevtoolsTheme_exports);
+var import_react = require("react");
+const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+function resolveThemeFromDevtools() {
+  var _a, _b;
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const devtools = (_a = window.chrome) == null ? void 0 : _a.devtools;
+  const themeName = (_b = devtools == null ? void 0 : devtools.panels) == null ? void 0 : _b.themeName;
+  if (typeof themeName === "string") {
+    return themeName.toLowerCase().includes("dark") ? "dark" : "light";
+  }
+  return null;
+}
+function resolveThemeFromMedia() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return null;
+  }
+  return window.matchMedia(DARK_MEDIA_QUERY).matches ? "dark" : "light";
+}
+function getInitialTheme() {
+  var _a, _b;
+  return (_b = (_a = resolveThemeFromDevtools()) != null ? _a : resolveThemeFromMedia()) != null ? _b : "light";
+}
+const useDevtoolsTheme = () => {
+  const [theme, setTheme] = (0, import_react.useState)(() => getInitialTheme());
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (typeof window === "undefined") {
+      return;
+    }
+    const devtools = (_a = window.chrome) == null ? void 0 : _a.devtools;
+    const panels = devtools == null ? void 0 : devtools.panels;
+    const onThemeChanged = panels == null ? void 0 : panels.onThemeChanged;
+    const handleThemeChange = (newThemeName) => {
+      if (typeof newThemeName !== "string") {
+        return;
+      }
+      const next = newThemeName.toLowerCase().includes("dark") ? "dark" : "light";
+      setTheme(next);
+    };
+    const fromDevtools = resolveThemeFromDevtools();
+    if (fromDevtools) {
+      setTheme(fromDevtools);
+    }
+    let mediaQuery = null;
+    const handleMediaQueryChange = (event) => {
+      setTheme(event.matches ? "dark" : "light");
+    };
+    if (onThemeChanged && typeof onThemeChanged.addListener === "function") {
+      onThemeChanged.addListener(handleThemeChange);
+    } else if (typeof window.matchMedia === "function") {
+      mediaQuery = window.matchMedia(DARK_MEDIA_QUERY);
+      if (typeof mediaQuery.addEventListener === "function") {
+        mediaQuery.addEventListener("change", handleMediaQueryChange);
+      } else if (typeof mediaQuery.addListener === "function") {
+        mediaQuery.addListener(handleMediaQueryChange);
+      }
+    }
+    return () => {
+      if (onThemeChanged && typeof onThemeChanged.removeListener === "function") {
+        onThemeChanged.removeListener(handleThemeChange);
+      }
+      if (mediaQuery) {
+        if (typeof mediaQuery.removeEventListener === "function") {
+          mediaQuery.removeEventListener("change", handleMediaQueryChange);
+        } else if (typeof mediaQuery.removeListener === "function") {
+          mediaQuery.removeListener(handleMediaQueryChange);
+        }
+      }
+    };
+  }, []);
+  return theme;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDevtoolsTheme
+});