@module-federation/devtools 2.6.0 → 2.8.0

package/dist/lib/utils/chrome/post-message.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/lib/utils/chrome/safe-post-message.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/chrome/snapshot-plugin.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/chrome/storage.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/data/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/sdk/graph.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -43,26 +42,38 @@ const validateSemver = (schema) => {
   return reg.test(schema);
 };
 const validatePort = (schema) => !isNaN(Number(schema));
-const splitModuleId = (target) => {
+const isEntrySegment = (segment) => segment.startsWith("http") || segment.startsWith("//");
+const parseModuleId = (target) => {
   const array = target.split(":");
   const { length } = array;
+  const result = {
+    name: target,
+    version: ""
+  };
   if (length === 1) {
-    return target;
+    return result;
   } else if (length >= 3) {
-    if (array[length - 1].endsWith(".json") || array[length - 1].endsWith(".js")) {
-      const idx = array.findIndex((t) => t.startsWith("http"));
-      return array[idx - 1];
-    } else {
-      return array[1];
+    const idx = array.findIndex(isEntrySegment);
+    if (idx > 0) {
+      result.name = array[idx - 1];
+      result.version = array.slice(idx).join(":");
+      return result;
     }
+    result.name = array[1];
+    result.version = array.slice(2).join(":");
+    return result;
   } else {
     const nameOrVersion = array[length - 1];
-    if (nameOrVersion === "*" || nameOrVersion === "latest" || validateSemver(nameOrVersion)) {
-      return array[0];
+    if (nameOrVersion === "*" || nameOrVersion === "latest" || validateSemver(nameOrVersion) || isEntrySegment(nameOrVersion) || nameOrVersion.endsWith(".json") || nameOrVersion.endsWith(".js")) {
+      result.name = array[0];
+      result.version = nameOrVersion;
+      return result;
     } else {
-      return nameOrVersion;
+      result.name = nameOrVersion;
+      return result;
     }
   }
+  return result;
 };
 class DependencyGraph {
   constructor(snapshot, initTarget) {
@@ -135,12 +146,14 @@ class DependencyGraph {
     if (!targetGraph || !((_a = Object.keys(targetGraph)) == null ? void 0 : _a.length)) {
       return;
     }
-    const name = splitModuleId(target);
+    const { name, version } = parseModuleId(target);
     const targetWithoutType = name;
     let info = name;
     const remote = this.snapshot[target];
     if (remote && ("version" in remote || "remoteEntry" in remote)) {
       info += `:${remote.version || remote.remoteEntry}`;
+    } else if (version) {
+      info += `:${version}`;
     }
     if (!this.identifyMap.has(targetWithoutType)) {
       this.identifyMap.set(targetWithoutType, this.identify());

package/dist/lib/utils/sdk/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/types/common.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/types/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/worker/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;

package/dist/types/App.css

@@ -0,0 +1,13 @@
+.loaded-status-tag {
+  color: var(--color-bg-1, white) !important;
+  background-color: var(--color-neutral-10, black) !important;
+}
+.reused-status-tag {
+  background-color: greenyellow !important;
+  color: black !important;
+}
+.common-tag {
+  color: var(--color-text-2, #71717a) !important;
+  background-color: var(--color-bg-1, #ffffff) !important;
+  border-color: var(--color-border-2, rgba(228, 228, 231, 0.5)) !important;
+}

package/dist/types/App.js

@@ -0,0 +1,519 @@
+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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var App_exports = {};
+__export(App_exports, {
+  default: () => App_default
+});
+module.exports = __toCommonJS(App_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+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_LoadingTrace = __toESM(require("./component/LoadingTrace"));
+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 (0, import_utils.normalizeModuleInfoPayload)(info);
+  } catch (error) {
+    console.warn("[MF Devtools] cloneModuleInfo failed", error);
+    return {};
+  }
+};
+const normalizeShareValue = (target, seen = /* @__PURE__ */ new WeakSet()) => {
+  if (typeof target === "function") {
+    const name = target.name ? `: ${target.name}` : "";
+    return `[Function${name}]`;
+  }
+  if (!target || typeof target !== "object") {
+    return target;
+  }
+  if (seen.has(target)) {
+    return "[Circular]";
+  }
+  seen.add(target);
+  if (target instanceof Map) {
+    const mapped = {};
+    target.forEach((value, key) => {
+      mapped[String(key)] = normalizeShareValue(value, seen);
+    });
+    return mapped;
+  }
+  if (target instanceof Set) {
+    const setItems = [];
+    target.forEach((value) => {
+      setItems.push(normalizeShareValue(value, seen));
+    });
+    return setItems;
+  }
+  if (Array.isArray(target)) {
+    return target.map((item) => normalizeShareValue(item, seen));
+  }
+  return Object.keys(target).reduce((memo, key) => {
+    memo[key] = normalizeShareValue(target[key], seen);
+    return memo;
+  }, {});
+};
+const buildShareSnapshot = (share) => {
+  const normalize = (value) => {
+    try {
+      return normalizeShareValue(value);
+    } catch (error) {
+      console.warn("[MF Devtools] normalize share snapshot failed", error);
+      return normalizeShareValue(value);
+    }
+  };
+  const scopes = normalize(share || {});
+  return scopes;
+};
+const NAV_ITEMS = [
+  { 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: "loadingTrace", i18nKey: "app.nav.loadingTrace" },
+  { key: "performance", i18nKey: "app.nav.performance" }
+];
+const THEME_STORAGE_KEY = "mf-devtools-theme";
+const InnerApp = (props) => {
+  const {
+    versionList,
+    setVersionList,
+    getVersion,
+    handleSnapshot,
+    handleProxyAddress,
+    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;
+      return cloneModuleInfo(((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) || {});
+    }
+  );
+  const [shareInfo, setShareInfo] = (0, import_react.useState)(
+    () => {
+      var _a;
+      return buildShareSnapshot((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__);
+    }
+  );
+  const [inspectedTab, setInspectedTab] = (0, import_react.useState)(
+    window.targetTab
+  );
+  const [inspectedTabRefreshKey, setInspectedTabRefreshKey] = (0, import_react.useState)(0);
+  const [activePanel, setActivePanel] = (0, import_react.useState)("proxy");
+  const [selectedModuleId, setSelectedModuleId] = (0, import_react.useState)(null);
+  const [refreshing, setRefreshing] = (0, import_react.useState)(false);
+  const panelSyncReadyRef = (0, import_react.useRef)(false);
+  const applyModuleUpdate = (0, import_react.useCallback)((info) => {
+    var _a;
+    setModuleInfo(cloneModuleInfo(info));
+    const shareSnapshot = buildShareSnapshot(
+      (_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__
+    );
+    setShareInfo(shareSnapshot);
+    panelSyncReadyRef.current = true;
+  }, []);
+  const { producer, consumers } = (0, import_react.useMemo)(
+    () => (0, import_utils.separateType)(moduleInfo),
+    [moduleInfo]
+  );
+  const moduleKeys = (0, import_react.useMemo)(() => Object.keys(moduleInfo || {}), [moduleInfo]);
+  const moduleCount = moduleKeys.length;
+  const consumerCount = (0, import_react.useMemo)(
+    () => Object.keys(consumers || {}).length,
+    [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);
+      return;
+    }
+    if (!selectedModuleId || !moduleKeys.includes(selectedModuleId)) {
+      setSelectedModuleId(moduleKeys[0]);
+    }
+  }, [moduleKeys, selectedModuleId]);
+  (0, import_react.useEffect)(() => {
+    const bootstrap = () => __async(void 0, null, function* () {
+      const tab = yield (0, import_utils.syncActiveTab)();
+      setInspectedTab(tab || void 0);
+      const detach = yield (0, import_utils.getGlobalModuleInfo)(
+        (info) => applyModuleUpdate(info)
+      );
+      panelSyncReadyRef.current = true;
+      return detach;
+    });
+    const cleanupPromise = bootstrap();
+    return () => {
+      cleanupPromise.then((cleanup) => cleanup == null ? void 0 : cleanup());
+    };
+  }, [applyModuleUpdate]);
+  (0, import_react.useEffect)(() => {
+    const updateActiveTab = (tabId, options) => __async(void 0, null, function* () {
+      var _a, _b;
+      const tab = yield (0, import_utils.syncActiveTab)(tabId);
+      setInspectedTab(tab || void 0);
+      if ((options == null ? void 0 : options.status) === "loading") {
+        setInspectedTabRefreshKey((key) => key + 1);
+        return;
+      }
+      if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
+        applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
+      }
+      yield (0, import_utils.refreshModuleInfo)();
+    });
+    const onMessage = (message, _sender, _sendResponse) => {
+      if ((message == null ? void 0 : message.type) === import_messages.MESSAGE_ACTIVE_TAB_CHANGED) {
+        updateActiveTab(message.tabId, { status: message.status });
+      }
+    };
+    chrome.runtime.onMessage.addListener(onMessage);
+    const onActivated = (activeInfo) => {
+      updateActiveTab(activeInfo.tabId);
+    };
+    chrome.tabs.onActivated.addListener(onActivated);
+    return () => {
+      chrome.runtime.onMessage.removeListener(onMessage);
+      chrome.tabs.onActivated.removeListener(onActivated);
+    };
+  }, [applyModuleUpdate]);
+  const handleRefresh = () => __async(void 0, null, function* () {
+    var _a, _b;
+    if (refreshing) {
+      return;
+    }
+    setRefreshing(true);
+    try {
+      yield (0, import_utils.refreshModuleInfo)();
+      if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
+        applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
+      }
+    } finally {
+      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) || {};
+    applyModuleUpdate(cloneModuleInfo(origin));
+  }, [applyModuleUpdate]);
+  (0, import_react.useEffect)(() => {
+    const shouldAutoSync = activePanel === "proxy" || activePanel === "dependency" || activePanel === "share";
+    if (!shouldAutoSync || !panelSyncReadyRef.current) {
+      return;
+    }
+    let cancelled = false;
+    const syncPanelData = () => __async(void 0, null, function* () {
+      var _a, _b;
+      yield (0, import_utils.refreshModuleInfo)();
+      if (cancelled) {
+        return;
+      }
+      if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
+        applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
+      }
+    });
+    void syncPanelData();
+    return () => {
+      cancelled = true;
+    };
+  }, [activePanel, applyModuleUpdate]);
+  const renderContent = () => {
+    var _a;
+    switch (activePanel) {
+      case "moduleInfo":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ModuleInfo.default,
+          {
+            moduleInfo,
+            selectedModuleId,
+            onSelectModule: (id) => setSelectedModuleId(id)
+          }
+        );
+      case "proxy":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Layout.default,
+          {
+            moduleInfo,
+            versionList,
+            setVersionList,
+            getVersion,
+            handleSnapshot,
+            handleProxyAddress,
+            customValueValidate,
+            headerSlot,
+            onModuleInfoChange: applyModuleUpdate,
+            onModuleInfoReset: resetModuleInfo,
+            tabId: inspectedTab == null ? void 0 : inspectedTab.id
+          }
+        );
+      case "dependency":
+        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: t("common.empty.noModuleInfo"),
+            className: import_App2.default.empty
+          }
+        ) });
+      case "share":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_SharedDepsExplorer.default,
+          {
+            shareData: JSON.parse(
+              JSON.stringify((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__)
+            )
+          }
+        );
+      case "loadingTrace":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_LoadingTrace.default,
+          {
+            tabId: inspectedTab == null ? void 0 : inspectedTab.id,
+            resetKey: inspectedTabRefreshKey
+          }
+        );
+      case "performance":
+        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} ${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.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() }) })
+        ] })
+      ]
+    }
+  );
+};
+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;