@module-federation/devtools 0.0.0-perf-devtools-20260106124142 → 0.0.0-perf-devtools-20260108034446

package/dist/es/{index.css → App.css}

@@ -1,6 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 .loaded-status-tag {
   color: white !important;
   background-color: black !important;

package/dist/es/App.js

@@ -20,6 +20,8 @@ var __async = (__this, __arguments, generator) => {
 };
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import "@arco-design/web-react/es/_util/react-19-adapter";
+import "./App.css";
 import { Empty, Tag, Button, Tooltip } from "@arco-design/web-react";
 import "./init";
 import ProxyLayout from "./component/Layout";

package/dist/es/component/Layout/index.js

@@ -212,12 +212,23 @@ const Layout = (props) => {
           } else {
             setCondition(statusInfo.noProxy);
           }
+          setCondition(statusInfo.noProxy);
           return;
         }
         if (!clipChanged && effectiveSignature === lastEffectiveRulesRef.current) {
+          if (hadPreviousEffective) {
+            setCondition(statusInfo.success);
+          } else {
+            setCondition(statusInfo.noProxy);
+          }
           return;
         }
         if (rawRules.every((rule) => !rule.value)) {
+          if (hadPreviousEffective) {
+            setCondition(statusInfo.success);
+          } else {
+            setCondition(statusInfo.noProxy);
+          }
           return;
         }
         const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(effectiveRules) : yield getModuleInfo(effectiveRules);
@@ -318,6 +329,11 @@ const Layout = (props) => {
         if (overridesApplied) {
           setChromeStorage(storeData);
         }
+        if (effectiveRules.length) {
+          setCondition(statusInfo.success);
+        } else {
+          setCondition(statusInfo.noProxy);
+        }
       }
     });
     hydrateForm();

package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.js

@@ -1,37 +1,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tag } from "@arco-design/web-react";
+import styles from "./FocusResultDisplay.module";
 const FocusResultDisplay = ({
   focusResult,
   hasData,
   loadedStatusLabel
 }) => {
   if (focusResult) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "font-mono text-[11px]", children: [
+    return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.packageInfo, children: [
           focusResult.packageName,
           "@",
           focusResult.version
         ] }),
         /* @__PURE__ */ jsx(Tag, { size: "small", className: "loaded-status-tag", children: loadedStatusLabel(focusResult.status) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 text-[11px] text-zinc-700", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: "Provider: " }),
-        focusResult.providers.map((p) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "rounded bg-white px-1.5 py-0.5 font-medium text-zinc-800 shadow-sm",
-            children: p
-          },
-          p
-        ))
+      /* @__PURE__ */ jsxs("div", { className: styles.providers, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.label, children: "Provider: " }),
+        focusResult.providers.map((p) => /* @__PURE__ */ jsx("span", { className: styles.providerTag, children: p }, p))
       ] })
     ] });
   }
   if (hasData) {
-    return /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500", children: "No version matching the criteria was found in the current shared data. Please check if the package name / version is correct." });
+    return /* @__PURE__ */ jsx("p", { className: styles.emptyText, children: "No version matching the criteria was found in the current shared data. Please check if the package name / version is correct." });
   }
-  return /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500", children: "No shared dependency data loaded yet." });
+  return /* @__PURE__ */ jsx("p", { className: styles.emptyText, children: "No shared dependency data loaded yet." });
 };
 var FocusResultDisplay_default = FocusResultDisplay;
 export {

package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.module.js

@@ -0,0 +1,5 @@
+import "./FocusResultDisplay_module.css";
+var FocusResultDisplay_module_default = { "container": "container_ee3c9", "header": "header_ee3c9", "packageInfo": "packageInfo_ee3c9", "providers": "providers_ee3c9", "label": "label_ee3c9", "providerTag": "providerTag_ee3c9", "emptyText": "emptyText_ee3c9" };
+export {
+  FocusResultDisplay_module_default as default
+};

package/dist/es/component/SharedDepsExplorer/FocusResultDisplay_module.css

@@ -0,0 +1,45 @@
+.container_ee3c9 {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.header_ee3c9 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.packageInfo_ee3c9 {
+  font-family: monospace;
+  font-size: 11px;
+}
+
+.providers_ee3c9 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #374151; /* text-zinc-700 */
+}
+
+.label_ee3c9 {
+  color: #71717a; /* text-zinc-500 */
+}
+
+.providerTag_ee3c9 {
+  border-radius: 4px;
+  background-color: white;
+  padding: 2px 6px;
+  font-weight: 500;
+  color: #27272a; /* text-zinc-800 */
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.emptyText_ee3c9 {
+  font-size: 11px;
+  color: #71717a; /* text-zinc-500 */
+  margin: 0;
+}

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

@@ -47,6 +47,7 @@ import {
   findPackageProvider
 } from "./share-utils";
 import FocusResultDisplay from "./FocusResultDisplay";
+import styles from "./index.module";
 const ALL_VALUE = "__all__";
 function loadedStatusLabel(status) {
   if (status === "loaded") {
@@ -179,9 +180,9 @@ function SharedDepsExplorer({
     {
       title: "Package / Version",
       width: "28%",
-      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx("div", { className: "break-all font-mono text-[11px] text-zinc-800", children: item.packageName }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-1 text-[11px] text-zinc-500", children: [
+      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellCol, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.packageName, children: item.packageName }),
+        /* @__PURE__ */ jsxs("div", { className: styles.version, children: [
           "v",
           item.version
         ] })
@@ -190,12 +191,12 @@ function SharedDepsExplorer({
     {
       title: "Provider / Scope",
       width: "20%",
-      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs("span", { className: "truncate", title: item.from, children: [
+      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellColGap, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.truncate, title: item.from, children: [
           "Provider: ",
           item.from
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-zinc-500", children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.scopeText, children: [
           "scope: ",
           item.scope
         ] })
@@ -204,20 +205,20 @@ function SharedDepsExplorer({
     {
       title: "Status",
       width: "22%",
-      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellColGap, children: [
         ["loaded", "loading"].includes(item.loadedStatus) ? /* @__PURE__ */ jsx(
           Tag,
           {
             size: "small",
-            className: `w-16 flex items-center justify-center loaded-status-tag`,
+            className: `${styles.tagContainer} loaded-status-tag`,
             children: loadedStatusLabel(item.loadedStatus)
           }
         ) : null,
-        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap gap-1 text-[10px] text-zinc-500", children: [
-          item.shareConfig.singleton && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "singleton" }),
-          item.shareConfig.eager && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "eager" }),
-          item.shareConfig.strictVersion && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "strictVersion" }),
-          item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(Tag, { size: "small", className: "scale-90 origin-left", children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.configTags, children: [
+          item.shareConfig.singleton && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "singleton" }),
+          item.shareConfig.eager && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "eager" }),
+          item.shareConfig.strictVersion && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "strictVersion" }),
+          item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(Tag, { size: "small", className: styles.scale90, children: [
             "req: ",
             item.shareConfig.requiredVersion
           ] })
@@ -232,15 +233,15 @@ function SharedDepsExplorer({
         {
           trigger: "click",
           position: "right",
-          content: /* @__PURE__ */ jsxs("div", { className: "w-72", children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium", children: "Consumer List" }),
-            item.useIn.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500", children: "No applications are consuming this shared dependency version." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-[11px] text-zinc-700", children: item.useIn.map((c) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
-              /* @__PURE__ */ jsx("span", { className: "break-all", children: c })
+          content: /* @__PURE__ */ jsxs("div", { className: styles.popoverContent, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.popoverTitle, children: "Consumer List" }),
+            item.useIn.length === 0 ? /* @__PURE__ */ jsx("p", { className: styles.scopeText, children: "No applications are consuming this shared dependency version." }) : /* @__PURE__ */ jsx("ul", { className: styles.consumerList, children: item.useIn.map((c) => /* @__PURE__ */ jsxs("li", { className: styles.consumerItem, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.dot }),
+              /* @__PURE__ */ jsx("span", { className: styles.packageName, children: c })
             ] }, c)) })
           ] }),
-          children: /* @__PURE__ */ jsx(Button, { size: "mini", type: "secondary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx(Network, { className: "h-3 w-3 mr-1" }),
+          children: /* @__PURE__ */ jsx(Button, { size: "mini", type: "secondary", children: /* @__PURE__ */ jsxs("div", { className: styles.btnContent, children: [
+            /* @__PURE__ */ jsx(Network, { className: styles.mr1, size: 12 }),
             /* @__PURE__ */ jsxs("span", { children: [
               item.useIn.length || 0,
               " Apps"
@@ -258,35 +259,35 @@ function SharedDepsExplorer({
       }
     }
   ];
-  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-4 px-3 py-4 md:px-4 md:py-6 max-w-5xl`, children: [
-    /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500", children: "Module Federation · Shared Dependencies" }),
-      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight text-zinc-900", children: "Overview of Shared Dependencies Usage" })
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxs("section", { className: styles.heroSection, children: [
+      /* @__PURE__ */ jsx("p", { className: styles.heroSubtitle, children: "Module Federation · Shared Dependencies" }),
+      /* @__PURE__ */ jsx("h1", { className: styles.heroTitle, children: "Overview of Shared Dependencies Usage" })
     ] }),
-    /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [
-      /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Number of Providers" }),
-          /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Server, { className: "h-5 w-5 text-zinc-400" }),
+    /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: styles.statsGrid, children: [
+      /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Number of Providers" }),
+          /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
+            /* @__PURE__ */ jsx(Server, { className: styles.icon }),
             /* @__PURE__ */ jsx("span", { children: stats.totalProviders })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500", children: "Number of applications/build versions exposing shared dependencies." })
+        /* @__PURE__ */ jsx("p", { className: styles.statDescription, children: "Number of applications/build versions exposing shared dependencies." })
       ] }),
-      /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Share Scope / Package" }),
-          /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Layers, { className: "h-5 w-5 text-zinc-400" }),
+      /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Share Scope / Package" }),
+          /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
+            /* @__PURE__ */ jsx(Layers, { className: styles.icon }),
             /* @__PURE__ */ jsx("span", { children: stats.totalScopes }),
-            /* @__PURE__ */ jsx("span", { className: "text-base text-zinc-400", children: "scope" })
+            /* @__PURE__ */ jsx("span", { className: styles.statSubtext, children: "scope" })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-zinc-500 whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate mr-2", children: "Shared spaces under Scope dimension." }),
-          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 flex-shrink-0", children: [
-            /* @__PURE__ */ jsx(Box, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsxs("div", { className: styles.cardFooter, children: [
+          /* @__PURE__ */ jsx("span", { className: `${styles.truncate} ${styles.mr2}`, children: "Shared spaces under Scope dimension." }),
+          /* @__PURE__ */ jsxs("span", { className: styles.badgeGroup, children: [
+            /* @__PURE__ */ jsx(Box, { className: styles.iconSmall }),
             /* @__PURE__ */ jsxs("span", { children: [
               stats.totalPackages,
               " packages"
@@ -294,42 +295,42 @@ function SharedDepsExplorer({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Version Loading & Reuse" }),
-          /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Package2, { className: "h-5 w-5 text-zinc-400" }),
+      /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Version Loading & Reuse" }),
+          /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
+            /* @__PURE__ */ jsx(Package2, { className: styles.icon }),
             /* @__PURE__ */ jsx("span", { children: stats.totalVersions })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 text-xs text-zinc-500", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Tag, { className: "flex items-center gap-1 loaded-status-tag", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx(Network, { className: "h-3 w-3 mr-1" }),
+        /* @__PURE__ */ jsx("div", { className: styles.statusTags, children: /* @__PURE__ */ jsxs("div", { className: styles.tagRow, children: [
+          /* @__PURE__ */ jsx(Tag, { className: `${styles.tagContent} loaded-status-tag`, children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
+            /* @__PURE__ */ jsx(Network, { className: `${styles.iconSmall} ${styles.mr1}` }),
             /* @__PURE__ */ jsx("span", { children: "Loaded" }),
-            /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: stats.loadedCount })
+            /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.loadedCount })
           ] }) }),
-          /* @__PURE__ */ jsx(Tag, { className: "flex items-center gap-1 reused-status-tag", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx(Repeat, { className: "h-3 w-3 mr-1" }),
+          /* @__PURE__ */ jsx(Tag, { className: `${styles.tagContent} reused-status-tag`, children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
+            /* @__PURE__ */ jsx(Repeat, { className: `${styles.iconSmall} ${styles.mr1}` }),
             /* @__PURE__ */ jsx("span", { children: "Reused" }),
-            /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: stats.reusedCount })
+            /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.reusedCount })
           ] }) })
         ] }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("section", { className: styles.rightPanels, children: /* @__PURE__ */ jsx("div", { className: styles.panelStack, children: /* @__PURE__ */ jsxs(
       Card,
       {
-        className: "rounded-xl shadow-sm border-zinc-200",
-        title: /* @__PURE__ */ jsxs("div", { className: "text-base flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Box, { className: "h-4 w-4 text-zinc-500" }),
+        className: styles.card,
+        title: /* @__PURE__ */ jsxs("div", { className: styles.cardTitle, children: [
+          /* @__PURE__ */ jsx(Box, { className: styles.iconMedium }),
           "Who provides the current shared: '",
           focusPackage,
           "'?"
         ] }),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 mb-3 p-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name" }),
+          /* @__PURE__ */ jsxs("div", { className: styles.controlsGrid, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name" }),
               /* @__PURE__ */ jsx(
                 Select,
                 {
@@ -340,13 +341,13 @@ function SharedDepsExplorer({
                     setFocusVersion("");
                   },
                   placeholder: "Select Shared Dependency Package Name",
-                  className: "w-full",
+                  className: styles.fullWidth,
                   children: filterOptions.packages.map((name) => /* @__PURE__ */ jsx(Select.Option, { value: name, children: name }, name))
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Version (Optional, inferred if empty)" }),
+            /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Version (Optional, inferred if empty)" }),
               /* @__PURE__ */ jsxs(
                 Select,
                 {
@@ -354,7 +355,7 @@ function SharedDepsExplorer({
                   value: focusVersion || ALL_VALUE,
                   onChange: (value) => setFocusVersion(value === ALL_VALUE ? "" : value),
                   placeholder: "All Versions",
-                  className: "w-full",
+                  className: styles.fullWidth,
                   children: [
                     /* @__PURE__ */ jsx(Select.Option, { value: ALL_VALUE, children: "All Versions" }),
                     focusVersionsForPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
@@ -363,7 +364,7 @@ function SharedDepsExplorer({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-zinc-200 bg-zinc-50 px-3 py-2 text-xs", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: styles.resultBox, children: /* @__PURE__ */ jsx(
             FocusResultDisplay,
             {
               focusResult,
@@ -377,50 +378,50 @@ function SharedDepsExplorer({
     /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs(
       Card,
       {
-        className: "rounded-xl shadow-sm border-zinc-200",
-        title: /* @__PURE__ */ jsxs("div", { className: "text-base flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-zinc-500" }),
+        className: styles.card,
+        title: /* @__PURE__ */ jsxs("div", { className: styles.cardTitle, children: [
+          /* @__PURE__ */ jsx(Search, { className: styles.iconMedium }),
           "Filter / Search"
         ] }),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 lg:grid-cols-3 mb-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Provider" }),
+          /* @__PURE__ */ jsxs("div", { className: styles.filterGrid, children: [
+            /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Provider" }),
               /* @__PURE__ */ jsx(
                 Select,
                 {
                   value: selectedProvider || void 0,
                   onChange: (value) => setSelectedProvider(value === ALL_VALUE ? "" : value),
                   placeholder: "All Providers",
-                  className: "w-full",
+                  className: styles.fullWidth,
                   allowClear: true,
                   children: filterOptions.providers.map((p) => /* @__PURE__ */ jsx(Select.Option, { value: p, children: p }, p))
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name" }),
+            /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name" }),
               /* @__PURE__ */ jsx(
                 Select,
                 {
                   value: selectedPackage || void 0,
                   onChange: (value) => setSelectedPackage(value === ALL_VALUE ? "" : value),
                   placeholder: "All Packages",
-                  className: "w-full",
+                  className: styles.fullWidth,
                   allowClear: true,
                   children: filterOptions.packages.map((name) => /* @__PURE__ */ jsx(Select.Option, { value: name, children: name }, name))
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Version" }),
+            /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Version" }),
               /* @__PURE__ */ jsx(
                 Select,
                 {
                   value: selectedVersion || void 0,
                   onChange: (value) => setSelectedVersion(value === ALL_VALUE ? "" : value),
                   placeholder: "All Versions",
-                  className: "w-full",
+                  className: styles.fullWidth,
                   disabled: !selectedPackage,
                   allowClear: true,
                   children: versionsForSelectedPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
@@ -428,57 +429,57 @@ function SharedDepsExplorer({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 p-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name Keyword (Fuzzy Match)" }),
+          /* @__PURE__ */ jsxs("div", { className: styles.searchGrid, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name Keyword (Fuzzy Match)" }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
-                  prefix: /* @__PURE__ */ jsx(Search, { className: "text-zinc-400 h-3.5 w-3.5" }),
-                  className: "text-xs",
+                  prefix: /* @__PURE__ */ jsx(Search, { className: styles.iconMedium }),
+                  className: styles.searchInput,
                   placeholder: "e.g., react / axios",
                   value: searchText,
                   onChange: (val) => setSearchText(val)
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-end justify-end gap-2 text-xs text-zinc-500", children: /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("div", { className: styles.matchCount, children: /* @__PURE__ */ jsxs("span", { children: [
               "Currently Matched Versions:",
-              /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: filteredVersions.length })
+              /* @__PURE__ */ jsx("span", { className: styles.matchValue, children: filteredVersions.length })
             ] }) })
           ] }),
-          !hasData && loadingState === "loading" && /* @__PURE__ */ jsx("div", { className: "py-4 text-xs text-zinc-500", children: "Parsing shared dependency data..." }),
-          loadingState === "error" && /* @__PURE__ */ jsxs("div", { className: "py-3 text-xs text-red-600", children: [
+          !hasData && loadingState === "loading" && /* @__PURE__ */ jsx("div", { className: styles.loadingText, children: "Parsing shared dependency data..." }),
+          loadingState === "error" && /* @__PURE__ */ jsxs("div", { className: styles.errorText, children: [
             "Failed to load shared dependency data:",
             " ",
             errorMessage != null ? errorMessage : "Unknown Error"
           ] }),
-          hasData && Object.keys(tree).length === 0 && /* @__PURE__ */ jsx("div", { className: "py-3 text-xs text-zinc-500", children: "No matching shared dependency versions under current filter conditions, try relaxing the filter conditions." }),
-          hasData && Object.keys(tree).length > 0 && /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", style: { border: 0 }, children: /* @__PURE__ */ jsx(Collapse, { children: Object.entries(tree).map(([provider, scopes]) => /* @__PURE__ */ jsx(
+          hasData && Object.keys(tree).length === 0 && /* @__PURE__ */ jsx("div", { className: styles.noMatchText, children: "No matching shared dependency versions under current filter conditions, try relaxing the filter conditions." }),
+          hasData && Object.keys(tree).length > 0 && /* @__PURE__ */ jsx("div", { className: styles.treeContainer, children: /* @__PURE__ */ jsx("div", { className: styles.collapseWrapper, children: /* @__PURE__ */ jsx(Collapse, { children: Object.entries(tree).map(([provider, scopes]) => /* @__PURE__ */ jsx(
             Collapse.Item,
             {
               name: provider,
-              header: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-1 text-left", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
-                  /* @__PURE__ */ jsx(Server, { className: "h-3.5 w-3.5 text-zinc-500" }),
+              header: /* @__PURE__ */ jsxs("div", { className: styles.providerHeader, children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.providerTitle, children: [
+                  /* @__PURE__ */ jsx(Server, { className: styles.iconMedium }),
                   /* @__PURE__ */ jsx("span", { children: provider })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 text-[10px] text-zinc-500", children: /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("div", { className: styles.providerMeta, children: /* @__PURE__ */ jsxs("span", { children: [
                   "Scope Count: ",
                   Object.keys(scopes).length
                 ] }) })
               ] }),
-              children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(scopes).map(([scopeName, packages]) => {
+              children: /* @__PURE__ */ jsx("div", { className: styles.scopeList, children: Object.entries(scopes).map(([scopeName, packages]) => {
                 const list = Object.values(packages).flat();
-                return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-zinc-600", children: [
-                    /* @__PURE__ */ jsx(Layers, { className: "h-3 w-3 text-zinc-500" }),
+                return /* @__PURE__ */ jsxs("div", { className: styles.scopeItem, children: [
+                  /* @__PURE__ */ jsxs("div", { className: styles.scopeHeader, children: [
+                    /* @__PURE__ */ jsx(Layers, { className: styles.iconSmall }),
                     /* @__PURE__ */ jsxs("span", { children: [
                       "Scope: ",
                       scopeName
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-zinc-200 bg-zinc-50/40", children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx("div", { className: styles.tableContainer, children: /* @__PURE__ */ jsx(
                     Table,
                     {
                       columns,

package/dist/es/component/SharedDepsExplorer/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "container": "container_967de", "heroSection": "heroSection_967de", "heroSubtitle": "heroSubtitle_967de", "heroTitle": "heroTitle_967de", "statsGrid": "statsGrid_967de", "card": "card_967de", "cardWithPadding": "cardWithPadding_967de", "cardHeader": "cardHeader_967de", "statSpace": "statSpace_967de", "statLabel": "statLabel_967de", "statValue": "statValue_967de", "icon": "icon_967de", "iconSmall": "iconSmall_967de", "iconMedium": "iconMedium_967de", "statDescription": "statDescription_967de", "statSubtext": "statSubtext_967de", "cardFooter": "cardFooter_967de", "truncate": "truncate_967de", "mr2": "mr2_967de", "badgeGroup": "badgeGroup_967de", "statusTags": "statusTags_967de", "tagRow": "tagRow_967de", "tagContent": "tagContent_967de", "tagValue": "tagValue_967de", "mr1": "mr1_967de", "rightPanels": "rightPanels_967de", "panelStack": "panelStack_967de", "cardTitle": "cardTitle_967de", "controlsGrid": "controlsGrid_967de", "inputGroup": "inputGroup_967de", "inputLabel": "inputLabel_967de", "fullWidth": "fullWidth_967de", "resultBox": "resultBox_967de", "filterGrid": "filterGrid_967de", "padding2": "padding2_967de", "searchGrid": "searchGrid_967de", "searchInput": "searchInput_967de", "matchCount": "matchCount_967de", "matchValue": "matchValue_967de", "loadingText": "loadingText_967de", "errorText": "errorText_967de", "noMatchText": "noMatchText_967de", "treeContainer": "treeContainer_967de", "collapseWrapper": "collapseWrapper_967de", "providerHeader": "providerHeader_967de", "providerTitle": "providerTitle_967de", "providerMeta": "providerMeta_967de", "scopeList": "scopeList_967de", "scopeItem": "scopeItem_967de", "scopeHeader": "scopeHeader_967de", "tableContainer": "tableContainer_967de", "cellCol": "cellCol_967de", "packageName": "packageName_967de", "version": "version_967de", "cellColGap": "cellColGap_967de", "scopeText": "scopeText_967de", "tagContainer": "tagContainer_967de", "configTags": "configTags_967de", "scale90": "scale90_967de", "popoverContent": "popoverContent_967de", "popoverTitle": "popoverTitle_967de", "consumerList": "consumerList_967de", "consumerItem": "consumerItem_967de", "dot": "dot_967de", "btnContent": "btnContent_967de" };
+export {
+  index_module_default as default
+};