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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/es/{index.css → App.css} +0 -3
  2. package/dist/es/App.js +2 -0
  3. package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.js +9 -15
  4. package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.module.js +5 -0
  5. package/dist/es/component/SharedDepsExplorer/FocusResultDisplay_module.css +45 -0
  6. package/dist/es/component/SharedDepsExplorer/index.js +99 -98
  7. package/dist/es/component/SharedDepsExplorer/index.module.js +5 -0
  8. package/dist/es/component/SharedDepsExplorer/index_module.css +457 -0
  9. package/dist/lib/{index.css → App.css} +0 -3
  10. package/dist/lib/App.js +30 -28
  11. package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay.js +19 -15
  12. package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay.module.js +25 -0
  13. package/dist/lib/component/SharedDepsExplorer/FocusResultDisplay_module.css +45 -0
  14. package/dist/lib/component/SharedDepsExplorer/index.js +99 -98
  15. package/dist/lib/component/SharedDepsExplorer/index.module.js +25 -0
  16. package/dist/lib/component/SharedDepsExplorer/index_module.css +457 -0
  17. package/dist/types/src/App.d.ts +2 -0
  18. package/dist/types/src/index.d.ts +1 -2
  19. package/package.json +3 -5
package/dist/es/{index.css → App.css} RENAMED
@@ -1,6 +1,3 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
1
  .loaded-status-tag {
5
2
  color: white !important;
6
3
  background-color: black !important;
package/dist/es/App.js CHANGED
@@ -20,6 +20,8 @@ var __async = (__this, __arguments, generator) => {
20
20
  };
21
21
  import { jsx, jsxs } from "react/jsx-runtime";
22
22
  import { useState, useEffect, useMemo, useCallback, useRef } from "react";
23
+ import "@arco-design/web-react/es/_util/react-19-adapter";
24
+ import "./App.css";
23
25
  import { Empty, Tag, Button, Tooltip } from "@arco-design/web-react";
24
26
  import "./init";
25
27
  import ProxyLayout from "./component/Layout";
package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.js CHANGED
@@ -1,37 +1,31 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Tag } from "@arco-design/web-react";
3
+ import styles from "./FocusResultDisplay.module";
3
4
  const FocusResultDisplay = ({
4
5
  focusResult,
5
6
  hasData,
6
7
  loadedStatusLabel
7
8
  }) => {
8
9
  if (focusResult) {
9
- return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
10
- /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
11
- /* @__PURE__ */ jsxs("span", { className: "font-mono text-[11px]", children: [
10
+ return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
11
+ /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
12
+ /* @__PURE__ */ jsxs("span", { className: styles.packageInfo, children: [
12
13
  focusResult.packageName,
13
14
  "@",
14
15
  focusResult.version
15
16
  ] }),
16
17
  /* @__PURE__ */ jsx(Tag, { size: "small", className: "loaded-status-tag", children: loadedStatusLabel(focusResult.status) })
17
18
  ] }),
18
- /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 text-[11px] text-zinc-700", children: [
19
- /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: "Provider: " }),
20
- focusResult.providers.map((p) => /* @__PURE__ */ jsx(
21
- "span",
22
- {
23
- className: "rounded bg-white px-1.5 py-0.5 font-medium text-zinc-800 shadow-sm",
24
- children: p
25
- },
26
- p
27
- ))
19
+ /* @__PURE__ */ jsxs("div", { className: styles.providers, children: [
20
+ /* @__PURE__ */ jsx("span", { className: styles.label, children: "Provider: " }),
21
+ focusResult.providers.map((p) => /* @__PURE__ */ jsx("span", { className: styles.providerTag, children: p }, p))
28
22
  ] })
29
23
  ] });
30
24
  }
31
25
  if (hasData) {
32
- 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." });
26
+ 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." });
33
27
  }
34
- return /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500", children: "No shared dependency data loaded yet." });
28
+ return /* @__PURE__ */ jsx("p", { className: styles.emptyText, children: "No shared dependency data loaded yet." });
35
29
  };
36
30
  var FocusResultDisplay_default = FocusResultDisplay;
37
31
  export {
package/dist/es/component/SharedDepsExplorer/FocusResultDisplay.module.js ADDED
@@ -0,0 +1,5 @@
1
+ import "./FocusResultDisplay_module.css";
2
+ 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" };
3
+ export {
4
+ FocusResultDisplay_module_default as default
5
+ };
package/dist/es/component/SharedDepsExplorer/FocusResultDisplay_module.css ADDED
@@ -0,0 +1,45 @@
1
+ .container_ee3c9 {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 4px;
5
+ }
6
+
7
+ .header_ee3c9 {
8
+ display: flex;
9
+ flex-wrap: wrap;
10
+ align-items: center;
11
+ gap: 8px;
12
+ }
13
+
14
+ .packageInfo_ee3c9 {
15
+ font-family: monospace;
16
+ font-size: 11px;
17
+ }
18
+
19
+ .providers_ee3c9 {
20
+ display: flex;
21
+ flex-wrap: wrap;
22
+ align-items: center;
23
+ gap: 4px;
24
+ font-size: 11px;
25
+ color: #374151; /* text-zinc-700 */
26
+ }
27
+
28
+ .label_ee3c9 {
29
+ color: #71717a; /* text-zinc-500 */
30
+ }
31
+
32
+ .providerTag_ee3c9 {
33
+ border-radius: 4px;
34
+ background-color: white;
35
+ padding: 2px 6px;
36
+ font-weight: 500;
37
+ color: #27272a; /* text-zinc-800 */
38
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
39
+ }
40
+
41
+ .emptyText_ee3c9 {
42
+ font-size: 11px;
43
+ color: #71717a; /* text-zinc-500 */
44
+ margin: 0;
45
+ }
package/dist/es/component/SharedDepsExplorer/index.js CHANGED
@@ -47,6 +47,7 @@ import {
47
47
  findPackageProvider
48
48
  } from "./share-utils";
49
49
  import FocusResultDisplay from "./FocusResultDisplay";
50
+ import styles from "./index.module";
50
51
  const ALL_VALUE = "__all__";
51
52
  function loadedStatusLabel(status) {
52
53
  if (status === "loaded") {
@@ -179,9 +180,9 @@ function SharedDepsExplorer({
179
180
  {
180
181
  title: "Package / Version",
181
182
  width: "28%",
182
- render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
183
- /* @__PURE__ */ jsx("div", { className: "break-all font-mono text-[11px] text-zinc-800", children: item.packageName }),
184
- /* @__PURE__ */ jsxs("div", { className: "mt-1 text-[11px] text-zinc-500", children: [
183
+ render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellCol, children: [
184
+ /* @__PURE__ */ jsx("div", { className: styles.packageName, children: item.packageName }),
185
+ /* @__PURE__ */ jsxs("div", { className: styles.version, children: [
185
186
  "v",
186
187
  item.version
187
188
  ] })
@@ -190,12 +191,12 @@ function SharedDepsExplorer({
190
191
  {
191
192
  title: "Provider / Scope",
192
193
  width: "20%",
193
- render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
194
- /* @__PURE__ */ jsxs("span", { className: "truncate", title: item.from, children: [
194
+ render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellColGap, children: [
195
+ /* @__PURE__ */ jsxs("span", { className: styles.truncate, title: item.from, children: [
195
196
  "Provider: ",
196
197
  item.from
197
198
  ] }),
198
- /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-zinc-500", children: [
199
+ /* @__PURE__ */ jsxs("span", { className: styles.scopeText, children: [
199
200
  "scope: ",
200
201
  item.scope
201
202
  ] })
@@ -204,20 +205,20 @@ function SharedDepsExplorer({
204
205
  {
205
206
  title: "Status",
206
207
  width: "22%",
207
- render: (_, item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
208
+ render: (_, item) => /* @__PURE__ */ jsxs("div", { className: styles.cellColGap, children: [
208
209
  ["loaded", "loading"].includes(item.loadedStatus) ? /* @__PURE__ */ jsx(
209
210
  Tag,
210
211
  {
211
212
  size: "small",
212
- className: `w-16 flex items-center justify-center loaded-status-tag`,
213
+ className: `${styles.tagContainer} loaded-status-tag`,
213
214
  children: loadedStatusLabel(item.loadedStatus)
214
215
  }
215
216
  ) : null,
216
- /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap gap-1 text-[10px] text-zinc-500", children: [
217
- item.shareConfig.singleton && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "singleton" }),
218
- item.shareConfig.eager && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "eager" }),
219
- item.shareConfig.strictVersion && /* @__PURE__ */ jsx(Tag, { size: "small", className: "scale-90 origin-left", children: "strictVersion" }),
220
- item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(Tag, { size: "small", className: "scale-90 origin-left", children: [
217
+ /* @__PURE__ */ jsxs("div", { className: styles.configTags, children: [
218
+ item.shareConfig.singleton && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "singleton" }),
219
+ item.shareConfig.eager && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "eager" }),
220
+ item.shareConfig.strictVersion && /* @__PURE__ */ jsx(Tag, { size: "small", className: styles.scale90, children: "strictVersion" }),
221
+ item.shareConfig.requiredVersion && /* @__PURE__ */ jsxs(Tag, { size: "small", className: styles.scale90, children: [
221
222
  "req: ",
222
223
  item.shareConfig.requiredVersion
223
224
  ] })
@@ -232,15 +233,15 @@ function SharedDepsExplorer({
232
233
  {
233
234
  trigger: "click",
234
235
  position: "right",
235
- content: /* @__PURE__ */ jsxs("div", { className: "w-72", children: [
236
- /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium", children: "Consumer List" }),
237
- 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: [
238
- /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
239
- /* @__PURE__ */ jsx("span", { className: "break-all", children: c })
236
+ content: /* @__PURE__ */ jsxs("div", { className: styles.popoverContent, children: [
237
+ /* @__PURE__ */ jsx("div", { className: styles.popoverTitle, children: "Consumer List" }),
238
+ 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: [
239
+ /* @__PURE__ */ jsx("span", { className: styles.dot }),
240
+ /* @__PURE__ */ jsx("span", { className: styles.packageName, children: c })
240
241
  ] }, c)) })
241
242
  ] }),
242
- children: /* @__PURE__ */ jsx(Button, { size: "mini", type: "secondary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
243
- /* @__PURE__ */ jsx(Network, { className: "h-3 w-3 mr-1" }),
243
+ children: /* @__PURE__ */ jsx(Button, { size: "mini", type: "secondary", children: /* @__PURE__ */ jsxs("div", { className: styles.btnContent, children: [
244
+ /* @__PURE__ */ jsx(Network, { className: styles.mr1, size: 12 }),
244
245
  /* @__PURE__ */ jsxs("span", { children: [
245
246
  item.useIn.length || 0,
246
247
  " Apps"
@@ -258,35 +259,35 @@ function SharedDepsExplorer({
258
259
  }
259
260
  }
260
261
  ];
261
- return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-4 px-3 py-4 md:px-4 md:py-6 max-w-5xl`, children: [
262
- /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
263
- /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500", children: "Module Federation · Shared Dependencies" }),
264
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight text-zinc-900", children: "Overview of Shared Dependencies Usage" })
262
+ return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
263
+ /* @__PURE__ */ jsxs("section", { className: styles.heroSection, children: [
264
+ /* @__PURE__ */ jsx("p", { className: styles.heroSubtitle, children: "Module Federation · Shared Dependencies" }),
265
+ /* @__PURE__ */ jsx("h1", { className: styles.heroTitle, children: "Overview of Shared Dependencies Usage" })
265
266
  ] }),
266
- /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [
267
- /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
268
- /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
269
- /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Number of Providers" }),
270
- /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
271
- /* @__PURE__ */ jsx(Server, { className: "h-5 w-5 text-zinc-400" }),
267
+ /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: styles.statsGrid, children: [
268
+ /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
269
+ /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
270
+ /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Number of Providers" }),
271
+ /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
272
+ /* @__PURE__ */ jsx(Server, { className: styles.icon }),
272
273
  /* @__PURE__ */ jsx("span", { children: stats.totalProviders })
273
274
  ] })
274
275
  ] }) }),
275
- /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500", children: "Number of applications/build versions exposing shared dependencies." })
276
+ /* @__PURE__ */ jsx("p", { className: styles.statDescription, children: "Number of applications/build versions exposing shared dependencies." })
276
277
  ] }),
277
- /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
278
- /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
279
- /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Share Scope / Package" }),
280
- /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
281
- /* @__PURE__ */ jsx(Layers, { className: "h-5 w-5 text-zinc-400" }),
278
+ /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
279
+ /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
280
+ /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Share Scope / Package" }),
281
+ /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
282
+ /* @__PURE__ */ jsx(Layers, { className: styles.icon }),
282
283
  /* @__PURE__ */ jsx("span", { children: stats.totalScopes }),
283
- /* @__PURE__ */ jsx("span", { className: "text-base text-zinc-400", children: "scope" })
284
+ /* @__PURE__ */ jsx("span", { className: styles.statSubtext, children: "scope" })
284
285
  ] })
285
286
  ] }) }),
286
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-zinc-500 whitespace-nowrap", children: [
287
- /* @__PURE__ */ jsx("span", { className: "truncate mr-2", children: "Shared spaces under Scope dimension." }),
288
- /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 flex-shrink-0", children: [
289
- /* @__PURE__ */ jsx(Box, { className: "h-3 w-3" }),
287
+ /* @__PURE__ */ jsxs("div", { className: styles.cardFooter, children: [
288
+ /* @__PURE__ */ jsx("span", { className: `${styles.truncate} ${styles.mr2}`, children: "Shared spaces under Scope dimension." }),
289
+ /* @__PURE__ */ jsxs("span", { className: styles.badgeGroup, children: [
290
+ /* @__PURE__ */ jsx(Box, { className: styles.iconSmall }),
290
291
  /* @__PURE__ */ jsxs("span", { children: [
291
292
  stats.totalPackages,
292
293
  " packages"
@@ -294,42 +295,42 @@ function SharedDepsExplorer({
294
295
  ] })
295
296
  ] })
296
297
  ] }),
297
- /* @__PURE__ */ jsxs(Card, { className: "rounded-xl shadow-sm border-zinc-200 p-4", children: [
298
- /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between pb-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
299
- /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-500", children: "Version Loading & Reuse" }),
300
- /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold flex items-center gap-2", children: [
301
- /* @__PURE__ */ jsx(Package2, { className: "h-5 w-5 text-zinc-400" }),
298
+ /* @__PURE__ */ jsxs(Card, { className: styles.cardWithPadding, children: [
299
+ /* @__PURE__ */ jsx("div", { className: styles.cardHeader, children: /* @__PURE__ */ jsxs("div", { className: styles.statSpace, children: [
300
+ /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: "Version Loading & Reuse" }),
301
+ /* @__PURE__ */ jsxs("div", { className: styles.statValue, children: [
302
+ /* @__PURE__ */ jsx(Package2, { className: styles.icon }),
302
303
  /* @__PURE__ */ jsx("span", { children: stats.totalVersions })
303
304
  ] })
304
305
  ] }) }),
305
- /* @__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: [
306
- /* @__PURE__ */ jsx(Tag, { className: "flex items-center gap-1 loaded-status-tag", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
307
- /* @__PURE__ */ jsx(Network, { className: "h-3 w-3 mr-1" }),
306
+ /* @__PURE__ */ jsx("div", { className: styles.statusTags, children: /* @__PURE__ */ jsxs("div", { className: styles.tagRow, children: [
307
+ /* @__PURE__ */ jsx(Tag, { className: `${styles.tagContent} loaded-status-tag`, children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
308
+ /* @__PURE__ */ jsx(Network, { className: `${styles.iconSmall} ${styles.mr1}` }),
308
309
  /* @__PURE__ */ jsx("span", { children: "Loaded" }),
309
- /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: stats.loadedCount })
310
+ /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.loadedCount })
310
311
  ] }) }),
311
- /* @__PURE__ */ jsx(Tag, { className: "flex items-center gap-1 reused-status-tag", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
312
- /* @__PURE__ */ jsx(Repeat, { className: "h-3 w-3 mr-1" }),
312
+ /* @__PURE__ */ jsx(Tag, { className: `${styles.tagContent} reused-status-tag`, children: /* @__PURE__ */ jsxs("div", { className: styles.tagContent, children: [
313
+ /* @__PURE__ */ jsx(Repeat, { className: `${styles.iconSmall} ${styles.mr1}` }),
313
314
  /* @__PURE__ */ jsx("span", { children: "Reused" }),
314
- /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: stats.reusedCount })
315
+ /* @__PURE__ */ jsx("span", { className: styles.tagValue, children: stats.reusedCount })
315
316
  ] }) })
316
317
  ] }) })
317
318
  ] })
318
319
  ] }) }),
319
- /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs(
320
+ /* @__PURE__ */ jsx("section", { className: styles.rightPanels, children: /* @__PURE__ */ jsx("div", { className: styles.panelStack, children: /* @__PURE__ */ jsxs(
320
321
  Card,
321
322
  {
322
- className: "rounded-xl shadow-sm border-zinc-200",
323
- title: /* @__PURE__ */ jsxs("div", { className: "text-base flex items-center gap-2", children: [
324
- /* @__PURE__ */ jsx(Box, { className: "h-4 w-4 text-zinc-500" }),
323
+ className: styles.card,
324
+ title: /* @__PURE__ */ jsxs("div", { className: styles.cardTitle, children: [
325
+ /* @__PURE__ */ jsx(Box, { className: styles.iconMedium }),
325
326
  "Who provides the current shared: '",
326
327
  focusPackage,
327
328
  "'?"
328
329
  ] }),
329
330
  children: [
330
- /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 mb-3 p-2", children: [
331
- /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
332
- /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name" }),
331
+ /* @__PURE__ */ jsxs("div", { className: styles.controlsGrid, children: [
332
+ /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
333
+ /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name" }),
333
334
  /* @__PURE__ */ jsx(
334
335
  Select,
335
336
  {
@@ -340,13 +341,13 @@ function SharedDepsExplorer({
340
341
  setFocusVersion("");
341
342
  },
342
343
  placeholder: "Select Shared Dependency Package Name",
343
- className: "w-full",
344
+ className: styles.fullWidth,
344
345
  children: filterOptions.packages.map((name) => /* @__PURE__ */ jsx(Select.Option, { value: name, children: name }, name))
345
346
  }
346
347
  )
347
348
  ] }),
348
- /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
349
- /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Version (Optional, inferred if empty)" }),
349
+ /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
350
+ /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Version (Optional, inferred if empty)" }),
350
351
  /* @__PURE__ */ jsxs(
351
352
  Select,
352
353
  {
@@ -354,7 +355,7 @@ function SharedDepsExplorer({
354
355
  value: focusVersion || ALL_VALUE,
355
356
  onChange: (value) => setFocusVersion(value === ALL_VALUE ? "" : value),
356
357
  placeholder: "All Versions",
357
- className: "w-full",
358
+ className: styles.fullWidth,
358
359
  children: [
359
360
  /* @__PURE__ */ jsx(Select.Option, { value: ALL_VALUE, children: "All Versions" }),
360
361
  focusVersionsForPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
@@ -363,7 +364,7 @@ function SharedDepsExplorer({
363
364
  )
364
365
  ] })
365
366
  ] }),
366
- /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-zinc-200 bg-zinc-50 px-3 py-2 text-xs", children: /* @__PURE__ */ jsx(
367
+ /* @__PURE__ */ jsx("div", { className: styles.resultBox, children: /* @__PURE__ */ jsx(
367
368
  FocusResultDisplay,
368
369
  {
369
370
  focusResult,
@@ -377,50 +378,50 @@ function SharedDepsExplorer({
377
378
  /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs(
378
379
  Card,
379
380
  {
380
- className: "rounded-xl shadow-sm border-zinc-200",
381
- title: /* @__PURE__ */ jsxs("div", { className: "text-base flex items-center gap-2", children: [
382
- /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-zinc-500" }),
381
+ className: styles.card,
382
+ title: /* @__PURE__ */ jsxs("div", { className: styles.cardTitle, children: [
383
+ /* @__PURE__ */ jsx(Search, { className: styles.iconMedium }),
383
384
  "Filter / Search"
384
385
  ] }),
385
386
  children: [
386
- /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 lg:grid-cols-3 mb-3", children: [
387
- /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
388
- /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Provider" }),
387
+ /* @__PURE__ */ jsxs("div", { className: styles.filterGrid, children: [
388
+ /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
389
+ /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Provider" }),
389
390
  /* @__PURE__ */ jsx(
390
391
  Select,
391
392
  {
392
393
  value: selectedProvider || void 0,
393
394
  onChange: (value) => setSelectedProvider(value === ALL_VALUE ? "" : value),
394
395
  placeholder: "All Providers",
395
- className: "w-full",
396
+ className: styles.fullWidth,
396
397
  allowClear: true,
397
398
  children: filterOptions.providers.map((p) => /* @__PURE__ */ jsx(Select.Option, { value: p, children: p }, p))
398
399
  }
399
400
  )
400
401
  ] }),
401
- /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
402
- /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name" }),
402
+ /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
403
+ /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name" }),
403
404
  /* @__PURE__ */ jsx(
404
405
  Select,
405
406
  {
406
407
  value: selectedPackage || void 0,
407
408
  onChange: (value) => setSelectedPackage(value === ALL_VALUE ? "" : value),
408
409
  placeholder: "All Packages",
409
- className: "w-full",
410
+ className: styles.fullWidth,
410
411
  allowClear: true,
411
412
  children: filterOptions.packages.map((name) => /* @__PURE__ */ jsx(Select.Option, { value: name, children: name }, name))
412
413
  }
413
414
  )
414
415
  ] }),
415
- /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
416
- /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Version" }),
416
+ /* @__PURE__ */ jsxs("div", { className: `${styles.inputGroup} ${styles.padding2}`, children: [
417
+ /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Version" }),
417
418
  /* @__PURE__ */ jsx(
418
419
  Select,
419
420
  {
420
421
  value: selectedVersion || void 0,
421
422
  onChange: (value) => setSelectedVersion(value === ALL_VALUE ? "" : value),
422
423
  placeholder: "All Versions",
423
- className: "w-full",
424
+ className: styles.fullWidth,
424
425
  disabled: !selectedPackage,
425
426
  allowClear: true,
426
427
  children: versionsForSelectedPackage.map((v) => /* @__PURE__ */ jsx(Select.Option, { value: v, children: v }, v))
@@ -428,57 +429,57 @@ function SharedDepsExplorer({
428
429
  )
429
430
  ] })
430
431
  ] }),
431
- /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2 p-2", children: [
432
- /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
433
- /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500", children: "Package Name Keyword (Fuzzy Match)" }),
432
+ /* @__PURE__ */ jsxs("div", { className: styles.searchGrid, children: [
433
+ /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
434
+ /* @__PURE__ */ jsx("div", { className: styles.inputLabel, children: "Package Name Keyword (Fuzzy Match)" }),
434
435
  /* @__PURE__ */ jsx(
435
436
  Input,
436
437
  {
437
- prefix: /* @__PURE__ */ jsx(Search, { className: "text-zinc-400 h-3.5 w-3.5" }),
438
- className: "text-xs",
438
+ prefix: /* @__PURE__ */ jsx(Search, { className: styles.iconMedium }),
439
+ className: styles.searchInput,
439
440
  placeholder: "e.g., react / axios",
440
441
  value: searchText,
441
442
  onChange: (val) => setSearchText(val)
442
443
  }
443
444
  )
444
445
  ] }),
445
- /* @__PURE__ */ jsx("div", { className: "flex items-end justify-end gap-2 text-xs text-zinc-500", children: /* @__PURE__ */ jsxs("span", { children: [
446
+ /* @__PURE__ */ jsx("div", { className: styles.matchCount, children: /* @__PURE__ */ jsxs("span", { children: [
446
447
  "Currently Matched Versions:",
447
- /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-900 ml-1", children: filteredVersions.length })
448
+ /* @__PURE__ */ jsx("span", { className: styles.matchValue, children: filteredVersions.length })
448
449
  ] }) })
449
450
  ] }),
450
- !hasData && loadingState === "loading" && /* @__PURE__ */ jsx("div", { className: "py-4 text-xs text-zinc-500", children: "Parsing shared dependency data..." }),
451
- loadingState === "error" && /* @__PURE__ */ jsxs("div", { className: "py-3 text-xs text-red-600", children: [
451
+ !hasData && loadingState === "loading" && /* @__PURE__ */ jsx("div", { className: styles.loadingText, children: "Parsing shared dependency data..." }),
452
+ loadingState === "error" && /* @__PURE__ */ jsxs("div", { className: styles.errorText, children: [
452
453
  "Failed to load shared dependency data:",
453
454
  " ",
454
455
  errorMessage != null ? errorMessage : "Unknown Error"
455
456
  ] }),
456
- 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." }),
457
- 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(
457
+ 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." }),
458
+ 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(
458
459
  Collapse.Item,
459
460
  {
460
461
  name: provider,
461
- header: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-1 text-left", children: [
462
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
463
- /* @__PURE__ */ jsx(Server, { className: "h-3.5 w-3.5 text-zinc-500" }),
462
+ header: /* @__PURE__ */ jsxs("div", { className: styles.providerHeader, children: [
463
+ /* @__PURE__ */ jsxs("div", { className: styles.providerTitle, children: [
464
+ /* @__PURE__ */ jsx(Server, { className: styles.iconMedium }),
464
465
  /* @__PURE__ */ jsx("span", { children: provider })
465
466
  ] }),
466
- /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 text-[10px] text-zinc-500", children: /* @__PURE__ */ jsxs("span", { children: [
467
+ /* @__PURE__ */ jsx("div", { className: styles.providerMeta, children: /* @__PURE__ */ jsxs("span", { children: [
467
468
  "Scope Count: ",
468
469
  Object.keys(scopes).length
469
470
  ] }) })
470
471
  ] }),
471
- children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(scopes).map(([scopeName, packages]) => {
472
+ children: /* @__PURE__ */ jsx("div", { className: styles.scopeList, children: Object.entries(scopes).map(([scopeName, packages]) => {
472
473
  const list = Object.values(packages).flat();
473
- return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
474
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-zinc-600", children: [
475
- /* @__PURE__ */ jsx(Layers, { className: "h-3 w-3 text-zinc-500" }),
474
+ return /* @__PURE__ */ jsxs("div", { className: styles.scopeItem, children: [
475
+ /* @__PURE__ */ jsxs("div", { className: styles.scopeHeader, children: [
476
+ /* @__PURE__ */ jsx(Layers, { className: styles.iconSmall }),
476
477
  /* @__PURE__ */ jsxs("span", { children: [
477
478
  "Scope: ",
478
479
  scopeName
479
480
  ] })
480
481
  ] }),
481
- /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-zinc-200 bg-zinc-50/40", children: /* @__PURE__ */ jsx(
482
+ /* @__PURE__ */ jsx("div", { className: styles.tableContainer, children: /* @__PURE__ */ jsx(
482
483
  Table,
483
484
  {
484
485
  columns,
package/dist/es/component/SharedDepsExplorer/index.module.js ADDED
@@ -0,0 +1,5 @@
1
+ import "./index_module.css";
2
+ 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" };
3
+ export {
4
+ index_module_default as default
5
+ };