@module-federation/devtools 0.22.1 → 0.23.0

package/dist/lib/App.js

@@ -3,8 +3,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -56,15 +70,22 @@ var import_react = require("react");
 var import_react_19_adapter = require("@arco-design/web-react/es/_util/react-19-adapter");
 var import_App = require("./App.css");
 var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
 var import_init = require("./init");
+var import_icon = require("@arco-design/web-react/icon");
 var import_Layout = __toESM(require("./component/Layout"));
 var import_DependencyGraph = __toESM(require("./component/DependencyGraph"));
 var import_ModuleInfo = __toESM(require("./component/ModuleInfo"));
 var import_SharedDepsExplorer = __toESM(require("./component/SharedDepsExplorer"));
+var import_LanguageSwitch = __toESM(require("./component/LanguageSwitch"));
+var import_ThemeToggle = __toESM(require("./component/ThemeToggle"));
 var import_utils = require("./utils");
 var import_messages = require("./utils/chrome/messages");
+var import_useDevtoolsTheme = require("./hooks/useDevtoolsTheme");
+var import_i18n = __toESM(require("./i18n"));
 var import_arco = require("@arco-design/web-react/dist/css/arco.css");
 var import_App2 = __toESM(require("./App.module"));
+var import_ThemeToggle2 = __toESM(require("./component/ThemeToggle.module"));
 const cloneModuleInfo = (info) => {
   try {
     return JSON.parse(JSON.stringify(info || {}));
@@ -120,13 +141,14 @@ const buildShareSnapshot = (share) => {
   return scopes;
 };
 const NAV_ITEMS = [
-  { key: "moduleInfo", label: "Module info" },
-  { key: "proxy", label: "Proxy" },
-  { key: "dependency", label: "Dependency graph" },
-  { key: "share", label: "Shared" },
-  { key: "performance", label: "Performance" }
+  { key: "moduleInfo", i18nKey: "app.nav.moduleInfo" },
+  { key: "proxy", i18nKey: "app.nav.proxy" },
+  { key: "dependency", i18nKey: "app.nav.dependency" },
+  { key: "share", i18nKey: "app.nav.share" },
+  { key: "performance", i18nKey: "app.nav.performance" }
 ];
-const App = (props) => {
+const THEME_STORAGE_KEY = "mf-devtools-theme";
+const InnerApp = (props) => {
   const {
     versionList,
     setVersionList,
@@ -136,6 +158,10 @@ const App = (props) => {
     customValueValidate,
     headerSlot
   } = props;
+  const autoTheme = (0, import_useDevtoolsTheme.useDevtoolsTheme)();
+  const [userTheme, setUserTheme] = (0, import_react.useState)(null);
+  const effectiveTheme = userTheme != null ? userTheme : autoTheme;
+  const { t } = (0, import_react_i18next.useTranslation)();
   const [moduleInfo, setModuleInfo] = (0, import_react.useState)(
     () => {
       var _a;
@@ -175,6 +201,64 @@ const App = (props) => {
     [consumers]
   );
   const hasModule = moduleCount > 0 || process.env.NODE_ENV === "development";
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (typeof window === "undefined") {
+      return;
+    }
+    let cancelled = false;
+    const applyTheme = (value) => {
+      if (cancelled) {
+        return;
+      }
+      if (value === "light" || value === "dark") {
+        setUserTheme(value);
+      }
+    };
+    try {
+      const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+      if (stored === "light" || stored === "dark") {
+        applyTheme(stored);
+        return;
+      }
+    } catch (error) {
+      console.warn("[MF Devtools] read theme from localStorage failed", error);
+    }
+    try {
+      const chromeObj = window.chrome;
+      const storage = (_a = chromeObj == null ? void 0 : chromeObj.storage) == null ? void 0 : _a.sync;
+      if (storage && typeof storage.get === "function") {
+        storage.get([THEME_STORAGE_KEY], (result) => {
+          applyTheme(result == null ? void 0 : result[THEME_STORAGE_KEY]);
+        });
+      }
+    } catch (error) {
+      console.warn(
+        "[MF Devtools] read theme from chrome.storage.sync failed",
+        error
+      );
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const { body } = document;
+    if (!body) {
+      return;
+    }
+    if (effectiveTheme === "dark") {
+      body.setAttribute("arco-theme", "dark");
+    } else {
+      body.removeAttribute("arco-theme");
+    }
+    return () => {
+      body.removeAttribute("arco-theme");
+    };
+  }, [effectiveTheme]);
   (0, import_react.useEffect)(() => {
     if (!moduleKeys.length) {
       setSelectedModuleId(null);
@@ -239,6 +323,34 @@ const App = (props) => {
       setRefreshing(false);
     }
   });
+  const handleThemeToggle = () => {
+    var _a;
+    const current = effectiveTheme;
+    const next = current === "dark" ? "light" : "dark";
+    setUserTheme(next);
+    if (typeof window !== "undefined") {
+      try {
+        window.localStorage.setItem(THEME_STORAGE_KEY, next);
+      } catch (error) {
+        console.warn(
+          "[MF Devtools] persist theme to localStorage failed",
+          error
+        );
+      }
+      try {
+        const chromeObj = window.chrome;
+        const storage = (_a = chromeObj == null ? void 0 : chromeObj.storage) == null ? void 0 : _a.sync;
+        if (storage && typeof storage.set === "function") {
+          storage.set({ [THEME_STORAGE_KEY]: next });
+        }
+      } catch (error) {
+        console.warn(
+          "[MF Devtools] persist theme to chrome.storage.sync failed",
+          error
+        );
+      }
+    }
+  };
   const resetModuleInfo = (0, import_react.useCallback)(() => {
     var _a;
     const origin = ((_a = window.__FEDERATION__) == null ? void 0 : _a.originModuleInfo) || {};
@@ -298,7 +410,7 @@ const App = (props) => {
         return hasModule ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DependencyGraph.default, { snapshot: moduleInfo }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_web_react.Empty,
           {
-            description: "No ModuleInfo Detected",
+            description: t("common.empty.noModuleInfo"),
             className: import_App2.default.empty
           }
         ) });
@@ -312,64 +424,82 @@ const App = (props) => {
           }
         );
       case "performance":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.placeholder, children: "WIP..." });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.placeholder, children: t("app.performance.placeholder") });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_App2.default.shell} ${import_App2.default.overrideArco}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: import_App2.default.sidebar, children: NAV_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        type: "button",
-        className: `${import_App2.default.tabItem} ${activePanel === item.key ? import_App2.default.activeTab : ""}`,
-        onClick: () => setActivePanel(item.key),
-        children: item.label
-      },
-      item.key
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: import_App2.default.panel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: import_App2.default.header, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.headerTop, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.branding, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.logo, children: "Module Federation" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.subtitle, children: "DevTools Companion" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: "重新同步当前页面的 Federation 信息", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_web_react.Button,
-            {
-              size: "mini",
-              type: "primary",
-              loading: refreshing,
-              onClick: handleRefresh,
-              className: import_App2.default.refresh,
-              children: "Refresh"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.meta, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.scope, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.scopeLabel, children: "Focus Tab" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { className: "common-tag", children: (inspectedTab == null ? void 0 : inspectedTab.title) || "Waiting for target" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.stats, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: moduleCount }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: "Modules" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: producer.length }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: "Remotes" })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `${import_App2.default.shell} ${import_App2.default.overrideArco} ${effectiveTheme === "dark" ? "arco-theme-dark" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: import_App2.default.sidebar, children: NAV_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `${import_App2.default.tabItem} ${activePanel === item.key ? import_App2.default.activeTab : ""}`,
+            onClick: () => setActivePanel(item.key),
+            children: t(item.i18nKey)
+          },
+          item.key
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: import_App2.default.panel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: import_App2.default.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.headerTop, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.branding, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.logo, children: t("app.header.title") }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.subtitle, children: t("app.header.subtitle") })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.headerActions, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LanguageSwitch.default, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ThemeToggle.default,
+                  {
+                    theme: effectiveTheme,
+                    onToggle: handleThemeToggle
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: t("app.header.refresh.tooltip"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_web_react.Button,
+                  {
+                    size: "default",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.IconRefresh, {}),
+                    loading: refreshing,
+                    onClick: handleRefresh,
+                    className: import_ThemeToggle2.default.themeToggle
+                  }
+                ) })
+              ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: consumerCount }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: "Consumers" })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.meta, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.scope, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.scopeLabel, children: t("app.header.scope.label") }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { className: "common-tag", children: (inspectedTab == null ? void 0 : inspectedTab.title) || t("app.header.scope.waiting") })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.stats, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: moduleCount }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: t("app.header.stats.modules") })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: producer.length }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: t("app.header.stats.remotes") })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: consumerCount }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: t("app.header.stats.consumers") })
+                ] })
+              ] })
             ] })
-          ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.body, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.content, children: renderContent() }) })
         ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.body, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.content, children: renderContent() }) })
-    ] })
-  ] });
+      ]
+    }
+  );
+};
+const App = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_i18next.I18nextProvider, { i18n: import_i18n.default, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerApp, __spreadValues({}, props)) });
 };
 var App_default = App;

package/dist/lib/App.module.js

@@ -22,4 +22,4 @@ __export(App_module_exports, {
 });
 module.exports = __toCommonJS(App_module_exports);
 var import_App_module = require("./App_module.css");
-var App_module_default = { "shell": "shell_ae2ee", "sidebar": "sidebar_ae2ee", "tabItem": "tabItem_ae2ee", "activeTab": "activeTab_ae2ee", "panel": "panel_ae2ee", "header": "header_ae2ee", "headerTop": "headerTop_ae2ee", "branding": "branding_ae2ee", "refresh": "refresh_ae2ee", "logo": "logo_ae2ee", "subtitle": "subtitle_ae2ee", "meta": "meta_ae2ee", "scope": "scope_ae2ee", "scopeLabel": "scopeLabel_ae2ee", "stats": "stats_ae2ee", "statBlock": "statBlock_ae2ee", "statValue": "statValue_ae2ee", "statLabel": "statLabel_ae2ee", "body": "body_ae2ee", "content": "content_ae2ee", "emptyState": "emptyState_ae2ee", "empty": "empty_ae2ee", "placeholder": "placeholder_ae2ee", "overrideArco": "overrideArco_ae2ee" };
+var App_module_default = { "shell": "shell_ae2ee", "sidebar": "sidebar_ae2ee", "tabItem": "tabItem_ae2ee", "activeTab": "activeTab_ae2ee", "panel": "panel_ae2ee", "header": "header_ae2ee", "headerTop": "headerTop_ae2ee", "branding": "branding_ae2ee", "logo": "logo_ae2ee", "subtitle": "subtitle_ae2ee", "meta": "meta_ae2ee", "scope": "scope_ae2ee", "scopeLabel": "scopeLabel_ae2ee", "stats": "stats_ae2ee", "statBlock": "statBlock_ae2ee", "statValue": "statValue_ae2ee", "statLabel": "statLabel_ae2ee", "body": "body_ae2ee", "content": "content_ae2ee", "emptyState": "emptyState_ae2ee", "empty": "empty_ae2ee", "placeholder": "placeholder_ae2ee", "overrideArco": "overrideArco_ae2ee" };

package/dist/lib/App_module.css

@@ -10,7 +10,7 @@
   flex: 1 1;
 }
 .arco-empty {
-  color: #4b5563;
+  color: var(--color-text-2, #4b5563);
 }
 .arco-select, .arco-input {
   background: transparent;
@@ -20,6 +20,12 @@
   border: 1px solid rgba(34, 197, 94, 0.35);
   color: #4b5563;
 }
+body {
+  --form-control-alpha: 0.9;
+}
+body[arco-theme=dark] {
+  --form-control-alpha: 0.1;
+}
 
 .shell_ae2ee {
   width: 100%;
@@ -41,8 +47,8 @@
   gap: 12px;
   padding: clamp(18px, 2.5vw, 24px) clamp(14px, 2vw, 18px);
   border-radius: 22px;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid var(--color-border-1, rgba(148, 163, 184, 0.18));
+  background: var(--color-bg-2, rgba(255, 255, 255, 0.95));
   box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.05) inset;
   box-sizing: border-box;
 }
@@ -54,8 +60,8 @@
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 10px 12px;
-  background: rgba(249, 250, 251, 0.8);
-  color: rgba(55, 65, 81, 0.9);
+  background: var(--color-bg-2, rgba(249, 250, 251, 0.8));
+  color: var(--color-text-2, rgba(55, 65, 81, 0.9));
   font-size: 13px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
@@ -66,13 +72,13 @@
 
 .tabItem_ae2ee:hover {
   border-color: rgba(37, 49, 48, 0.45);
-  color: #1e293b;
+  color: var(--color-text-1, #1e293b);
 }
 
 .activeTab_ae2ee {
   border-color: rgba(99, 102, 241, 0.65);
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
-  color: #1e293b;
+  color: var(--color-text-1, #1e293b);
   box-shadow: 0 12px 28px rgba(30, 64, 175, 0.25);
 }
 
@@ -82,8 +88,8 @@
   width: 100%;
   max-width: 1120px;
   min-height: calc(100vh - 56px);
-  background: rgba(255, 255, 255, 0.98);
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.98));
+  border: 1px solid var(--color-border-2, rgba(0, 0, 0, 0.08));
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.06), 0 2px 0 rgba(0, 0, 0, 0.04) inset;
   border-radius: 22px;
   padding: clamp(20px, 3vw, 32px);
@@ -91,7 +97,7 @@
   flex-direction: column;
   gap: 28px;
   box-sizing: border-box;
-  color: #1f2937;
+  color: var(--color-text-1, #1f2937);
 }
 
 .header_ae2ee {
@@ -113,25 +119,17 @@
   gap: 4px;
 }
 
-.refresh_ae2ee .arco-btn-primary {
-  background: linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.7));
-  border-color: rgba(34, 197, 94, 0.65);
-}
-.refresh_ae2ee .arco-btn-primary:hover {
-  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(22, 163, 74, 0.85));
-}
-
 .logo_ae2ee {
   font-size: 20px;
   font-weight: 600;
   letter-spacing: 0.02em;
-  color: #1e293b;
+  color: var(--color-text-1, #1e293b);
 }
 
 .subtitle_ae2ee {
   font-size: 12px;
   font-weight: 500;
-  color: rgba(75, 85, 99, 0.8);
+  color: var(--color-text-2, rgba(75, 85, 99, 0.8));
   text-transform: uppercase;
   letter-spacing: 0.12em;
 }
@@ -153,7 +151,7 @@
 
 .scopeLabel_ae2ee {
   font-size: 12px;
-  color: rgba(75, 85, 99, 0.85);
+  color: var(--color-text-2, rgba(75, 85, 99, 0.85));
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
@@ -172,7 +170,7 @@
   min-width: 80px;
   padding: 12px 14px;
   border-radius: 14px;
-  background: linear-gradient(140deg, rgba(243, 244, 246, 0.8) 0%, rgba(229, 231, 235, 0.6) 100%);
+  background: linear-gradient(140deg, rgba(243, 244, 246, 0) 0%, rgba(229, 231, 235, 0.1) 100%);
   border: 1px solid rgba(203, 213, 225, 0.4);
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
@@ -180,13 +178,13 @@
 .statValue_ae2ee {
   font-size: 22px;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--color-text-1, #1e293b);
   line-height: 1.1;
 }
 
 .statLabel_ae2ee {
   font-size: 11px;
-  color: rgba(75, 85, 99, 0.88);
+  color: var(--color-text-2, rgba(75, 85, 99, 0.88));
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
@@ -251,7 +249,7 @@
   justify-content: center;
   border-radius: 18px;
   border: 1px dashed rgba(203, 213, 225, 0.4);
-  background: rgba(255, 255, 255, 0.8);
+  background: var(--color-bg-2, rgba(255, 255, 255, 0.8));
   padding: 32px;
 }
 
@@ -266,8 +264,8 @@
   justify-content: center;
   border-radius: 18px;
   border: 1px dashed rgba(203, 213, 225, 0.4);
-  background: rgba(255, 255, 255, 0.8);
-  color: rgba(75, 85, 99, 0.75);
+  background: var(--color-bg-2, rgba(255, 255, 255, 0.8));
+  color: var(--color-text-2, rgba(75, 85, 99, 0.75));
   font-size: 14px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -275,18 +273,18 @@
 
 .overrideArco_ae2ee .arco-input-inner-wrapper,
 .overrideArco_ae2ee .arco-select-view {
-  background-color: #fff !important;
-  border-color: rgba(228, 228, 231, 0.5) !important;
+  background-color: var(--color-bg-1, #fff) !important;
+  border-color: var(--color-border-2, rgba(228, 228, 231, 0.5)) !important;
 }
 .overrideArco_ae2ee .arco-input-inner-wrapper:hover,
 .overrideArco_ae2ee .arco-select-view:hover {
-  background-color: #fff !important;
-  border-color: rgba(228, 228, 231, 0.5) !important;
+  background-color: var(--color-bg-1, #fff) !important;
+  border-color: var(--color-border-2, rgba(228, 228, 231, 0.5)) !important;
 }
 .overrideArco_ae2ee .arco-input-inner-wrapper:focus-within,
 .overrideArco_ae2ee .arco-select-view-focus {
-  background-color: #fff !important;
-  border-color: rgba(228, 228, 231, 0.5) !important;
+  background-color: var(--color-bg-1, #fff) !important;
+  border-color: var(--color-border-2, rgba(228, 228, 231, 0.5)) !important;
 }
 .overrideArco_ae2ee .arco-collapse-item .arco-collapse-item-icon-hover {
   top: 25% !important;
@@ -296,10 +294,14 @@
 }
 
 .arco-table-th {
-  background-color: rgb(250 250 250/var(--tw-bg-opacity)) !important;
-  border-bottom-color: rgb(228 228 231/var(--tw-border-opacity)) !important;
+  background-color: var(--color-bg-2, rgb(250 250 250/var(--tw-bg-opacity))) !important;
+  border-bottom-color: var(--color-border-2, rgb(228 228 231/var(--tw-border-opacity))) !important;
 }
 
 .arco-table-td {
-  border-bottom-color: rgba(228, 228, 231, 0.5) !important;
+  border-bottom-color: var(--color-border-2, rgba(228, 228, 231, 0.5)) !important;
+}
+
+.shell_ae2ee.arco-theme-dark {
+  background: radial-gradient(circle at 10% 20%, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.98) 55%), linear-gradient(135deg, var(--color-bg-1, #020617) 0%, var(--color-bg-2, #020617) 100%);
 }

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

@@ -53,6 +53,7 @@ var import_react = require("react");
 var import_reactflow = __toESM(require("reactflow"));
 var import_dagre = __toESM(require("dagre"));
 var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
 var import_graph = require("../../utils/sdk/graph");
 var import_DependencyGraphItem = __toESM(require("../DependencyGraphItem"));
 var import_utils = require("../../utils");
@@ -63,6 +64,7 @@ const nodeHeight = 420;
 const nodeTypes = { graphItem: import_DependencyGraphItem.default };
 const { Option } = import_web_react.Select;
 const Graph = (props) => {
+  const { t } = (0, import_react_i18next.useTranslation)();
   const [nodes, setNodes, onNodesChange] = (0, import_reactflow.useNodesState)([]);
   const [edges, setEdges, onEdgesChange] = (0, import_reactflow.useEdgesState)([]);
   const { snapshot } = props;
@@ -164,20 +166,20 @@ const Graph = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.depWrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.titleBlock, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: "Dependency Graph" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: "Visualise how consumers resolve remotes with the current overrides." })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.title, children: t("dependencyGraph.title") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.subtitle, children: t("dependencyGraph.subtitle") })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.filterBlock, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_web_react.Select,
           {
             showSearch: true,
-            placeholder: "Select Consumer",
+            placeholder: t("dependencyGraph.filters.consumerPlaceholder"),
             style: { width: 200 },
             value: selectedConsumer,
             onChange: setSelectedConsumer,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: "All Consumers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: t("dependencyGraph.filters.consumerAll") }),
               Object.keys(consumers).map((key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: key, children: key }, key))
             ]
           }
@@ -186,17 +188,14 @@ const Graph = (props) => {
           import_web_react.Select,
           {
             showSearch: true,
-            placeholder: "Select Depth",
+            placeholder: t("dependencyGraph.filters.depthPlaceholder"),
             style: { width: 120 },
             value: maxDepth === Infinity ? "All" : maxDepth,
             onChange: (val) => setMaxDepth(val === "All" ? Infinity : val),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: "All Depth" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: "All", children: t("dependencyGraph.filters.depthAll") }),
               Array.from({ length: availableDepth }, (_, i) => i + 1).map(
-                (depth) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Option, { value: depth, children: [
-                  "Depth: ",
-                  depth
-                ] }, depth)
+                (depth) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, { value: depth, children: t("dependencyGraph.filters.depthOption", { depth }) }, depth)
               )
             ]
           }
@@ -204,7 +203,7 @@ const Graph = (props) => {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.meta, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.metaBadge, children: nodes.length }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.metaLabel, children: nodes.length === 1 ? "node rendered" : "nodes rendered" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.metaLabel, children: nodes.length === 1 ? t("dependencyGraph.meta.singleNode") : t("dependencyGraph.meta.multiNodes") })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.canvas, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(