@module-federation/devtools 0.0.0-next-20250925034616 → 0.0.0-perf-devtools-20260106124142

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

@@ -65,8 +65,8 @@ class DependencyGraph {
     if (!remotesInfo) {
       return;
     }
-    Object.keys(remotesInfo).forEach((dep) => {
-      const { matchedVersion } = remotesInfo[dep];
+    Object.entries(remotesInfo).forEach(([dep, remoteInfo]) => {
+      const { matchedVersion } = remoteInfo;
       let childId = dep;
       if (matchedVersion && matchedVersion !== "") {
         childId = `${childId}:${matchedVersion}`;
@@ -107,7 +107,7 @@ class DependencyGraph {
       type
     });
   }
-  run(targetGraph, target = this.initTarget, type, id = this.initTarget) {
+  run(targetGraph, target = this.initTarget, type, id = this.initTarget, depth = 0, maxDepth = Infinity) {
     var _a;
     if (!targetGraph || !((_a = Object.keys(targetGraph)) == null ? void 0 : _a.length)) {
       return;
@@ -131,12 +131,17 @@ class DependencyGraph {
       targetGraph[targetWithoutType] || targetGraph[target] || {}
     );
     graphChilden.forEach((dep) => {
+      if (depth + 1 > maxDepth) {
+        return;
+      }
       this.addEdge(id + dep, id, id + dep);
       this.run(
         targetGraph[targetWithoutType] || targetGraph[target],
         dep,
         type,
-        id + dep
+        id + dep,
+        depth + 1,
+        maxDepth
       );
     });
   }
@@ -147,6 +152,22 @@ class DependencyGraph {
     const color = `rgba(${r},${g},${b},0.8)`;
     return color;
   }
+  calculateDepth(target = this.initTarget, visited = /* @__PURE__ */ new Set()) {
+    if (visited.has(target)) {
+      return 0;
+    }
+    visited.add(target);
+    const children = this.graph[target] ? Object.keys(this.graph[target]) : [];
+    if (children.length === 0) {
+      visited.delete(target);
+      return 0;
+    }
+    const maxChildDepth = Math.max(
+      ...children.map((child) => this.calculateDepth(child, visited))
+    );
+    visited.delete(target);
+    return 1 + maxChildDepth;
+  }
 }
 export {
   DependencyGraph,

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

@@ -2,6 +2,14 @@ export * from "./graph";
 const setLocalStorage = (key, value) => {
   localStorage.setItem(key, value);
 };
+const getLocalStorage = (key) => {
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    console.warn("[MF Devtools] getLocalStorage failed", error);
+    return null;
+  }
+};
 const removeLocalStorage = (key) => {
   const data = localStorage.getItem(key);
   if (data) {
@@ -50,6 +58,7 @@ const definePropertyGlobalVal = (target, key, val) => {
 };
 export {
   definePropertyGlobalVal,
+  getLocalStorage,
   getUnpkgUrl,
   isObject,
   mergeLocalStorage,

package/dist/es/worker/index.js

@@ -1 +1,168 @@
-console.log("Module Federation Worker");
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+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());
+  });
+};
+import {
+  MESSAGE_ACTIVE_TAB_CHANGED,
+  MESSAGE_OPEN_SIDE_PANEL
+} from "../utils/chrome/messages";
+var require_worker = __commonJS({
+  "src/worker/index.ts"(exports) {
+    const SIDE_PANEL_PATH = "html/main/index.html";
+    const getSidePanel = () => chrome == null ? void 0 : chrome.sidePanel;
+    const resolveTabId = (tabId) => __async(exports, null, function* () {
+      if (typeof tabId === "number") {
+        return tabId;
+      }
+      const [activeTab] = yield chrome.tabs.query({
+        active: true,
+        lastFocusedWindow: true
+      });
+      return activeTab == null ? void 0 : activeTab.id;
+    });
+    const broadcastActiveTab = (tabId) => {
+      try {
+        chrome.runtime.sendMessage({
+          type: MESSAGE_ACTIVE_TAB_CHANGED,
+          tabId
+        });
+      } catch (error) {
+        console.warn(
+          "[Module Federation Devtools] Failed to broadcast active tab",
+          error
+        );
+      }
+    };
+    const openSidePanel = (tabId) => __async(exports, null, function* () {
+      const sidePanel = getSidePanel();
+      if (!sidePanel) {
+        throw new Error("sidePanel api not available");
+      }
+      const targetTabId = yield resolveTabId(tabId);
+      if (typeof targetTabId !== "number") {
+        throw new Error("No active tab available");
+      }
+      yield sidePanel.setOptions({
+        tabId: targetTabId,
+        path: SIDE_PANEL_PATH,
+        enabled: true
+      });
+      if (sidePanel.open) {
+        yield sidePanel.open({ tabId: targetTabId });
+      }
+      broadcastActiveTab(targetTabId);
+      if (sidePanel.getOptions) {
+        try {
+          const options = yield sidePanel.getOptions({ tabId: targetTabId });
+          broadcastActiveTab(targetTabId);
+          return options;
+        } catch (error) {
+          console.warn("[Module Federation Devtools] getOptions failed", error);
+        }
+      }
+      return {
+        path: SIDE_PANEL_PATH,
+        enabled: true
+      };
+    });
+    chrome.runtime.onInstalled.addListener(() => {
+      const sidePanel = getSidePanel();
+      if (sidePanel == null ? void 0 : sidePanel.setPanelBehavior) {
+        sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch((error) => {
+          console.warn(
+            "[Module Federation Devtools] setPanelBehavior failed",
+            error
+          );
+        });
+      }
+    });
+    chrome.action.onClicked.addListener((tab) => __async(exports, null, function* () {
+      try {
+        yield openSidePanel(tab.id);
+      } catch (error) {
+        console.warn(
+          "[Module Federation Devtools] Failed to open side panel",
+          error
+        );
+      }
+    }));
+    chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+      if ((message == null ? void 0 : message.type) === MESSAGE_OPEN_SIDE_PANEL) {
+        openSidePanel(message.tabId).then((options) => sendResponse({ ok: true, options })).catch(
+          (error) => sendResponse({ ok: false, message: String(error) })
+        );
+        return true;
+      }
+      return void 0;
+    });
+    chrome.tabs.onActivated.addListener((activeInfo) => __async(exports, null, function* () {
+      const tabId = activeInfo == null ? void 0 : activeInfo.tabId;
+      if (typeof tabId !== "number") {
+        return;
+      }
+      try {
+        broadcastActiveTab(tabId);
+      } catch (error) {
+        console.warn(
+          "[Module Federation Devtools] Failed to handle tab activation",
+          error
+        );
+      }
+    }));
+    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+      if (changeInfo.status !== "complete") {
+        return;
+      }
+      if (tab == null ? void 0 : tab.active) {
+        try {
+          broadcastActiveTab(tabId);
+        } catch (error) {
+          console.warn(
+            "[Module Federation Devtools] Failed to handle tab update",
+            error
+          );
+        }
+      }
+    });
+    chrome.tabs.onRemoved.addListener((tabId) => __async(exports, null, function* () {
+      try {
+        const FormID = "FormID";
+        const data = yield chrome.storage.sync.get(FormID);
+        const storeData = data[FormID];
+        if (storeData == null ? void 0 : storeData[String(tabId)]) {
+          delete storeData[String(tabId)];
+          yield chrome.storage.sync.set({
+            [FormID]: storeData
+          });
+        }
+      } catch (error) {
+        console.warn(
+          "[Module Federation Devtools] Failed to handle tab removal",
+          error
+        );
+      }
+    }));
+    console.log("Module Federation Worker ready");
+  }
+});
+export default require_worker();

package/dist/lib/App.js

@@ -26,6 +26,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   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
@@ -36,12 +56,75 @@ var import_react = require("react");
 var import_web_react = require("@arco-design/web-react");
 var import_init = require("./init");
 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_utils = require("./utils");
+var import_messages = require("./utils/chrome/messages");
 var import_arco = require("@arco-design/web-react/dist/css/arco.css");
 var import_App = __toESM(require("./App.module"));
-const { Content } = import_web_react.Layout;
+const cloneModuleInfo = (info) => {
+  try {
+    return JSON.parse(JSON.stringify(info || {}));
+  } catch (error) {
+    console.warn("[MF Devtools] cloneModuleInfo failed", error);
+    return info || {};
+  }
+};
+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", label: "Module info" },
+  { key: "proxy", label: "Proxy" },
+  { key: "dependency", label: "Dependency graph" },
+  { key: "share", label: "Shared" },
+  { key: "performance", label: "Performance" }
+];
 const App = (props) => {
-  var _a;
   const {
     versionList,
     setVersionList,
@@ -51,22 +134,240 @@ const App = (props) => {
     customValueValidate,
     headerSlot
   } = props;
-  const [module2, setModule] = (0, import_react.useState)(((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) || {});
-  (0, import_react.useEffect)(() => {
-    (0, import_utils.getGlobalModuleInfo)(setModule);
+  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 [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;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Layout, { className: import_App.default.layout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { className: import_App.default.content, children: Object.keys(module2).length > 0 || process.env.NODE_ENV === "development" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Layout.default,
-    {
-      moduleInfo: module2,
-      versionList,
-      setVersionList,
-      getVersion,
-      handleSnapshot,
-      handleProxyAddress,
-      customValueValidate,
-      headerSlot
+  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)(() => {
+    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) => __async(void 0, null, function* () {
+      var _a, _b;
+      const tab = yield (0, import_utils.syncActiveTab)(tabId);
+      setInspectedTab(tab || void 0);
+      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);
+      }
+    };
+    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 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_App.default.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_web_react.Empty,
+          {
+            description: "No ModuleInfo Detected",
+            className: import_App.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 "performance":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App.default.placeholder, children: "WIP..." });
+      default:
+        return null;
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Empty, { description: "No ModuleInfo Detected" }) }) }) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_App.default.shell} ${import_App.default.overrideArco}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: import_App.default.sidebar, children: NAV_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: `${import_App.default.tabItem} ${activePanel === item.key ? import_App.default.activeTab : ""}`,
+        onClick: () => setActivePanel(item.key),
+        children: item.label
+      },
+      item.key
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: import_App.default.panel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: import_App.default.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.headerTop, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.branding, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.logo, children: "Module Federation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.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_App.default.refresh,
+              children: "Refresh"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.meta, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.scope, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.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_App.default.stats, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.statBlock, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statValue, children: moduleCount }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statLabel, children: "Modules" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.statBlock, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statValue, children: producer.length }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statLabel, children: "Remotes" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.statBlock, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statValue, children: consumerCount }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statLabel, children: "Consumers" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App.default.body, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App.default.content, children: renderContent() }) })
+    ] })
+  ] });
 };
 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 = { "layout": "layout_ae2ee", "content": "content_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", "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" };