@module-federation/devtools 0.0.0-next-20250926024003 → 0.0.0-perf-devtools-20260107043700

package/dist/lib/worker/index.js

@@ -1,2 +1,157 @@
 "use strict";
-console.log("Module Federation Worker");
+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 import_messages = require("../utils/chrome/messages");
+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: import_messages.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) === import_messages.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");

package/dist/types/src/App.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import '@arco-design/web-react/es/_util/react-19-adapter';
+import './App.css';
 import './init';
 import { RootComponentProps } from './utils';
 import '@arco-design/web-react/dist/css/arco.css';

package/dist/types/src/component/{Graph → DependencyGraph}/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 import 'reactflow/dist/style.css';
 declare const Graph: (props: {

package/dist/types/src/component/{GraphItem → DependencyGraphItem}/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import 'reactflow/dist/style.css';
 declare const GraphItem: (props: {
     data: {

package/dist/types/src/component/Form/index.d.ts

@@ -13,6 +13,8 @@ interface FormProps {
     validateForm: any;
     enableHMR: string;
     onHMRChange: (on: boolean) => void;
+    enableClip: boolean;
+    onClipChange: (on: boolean) => void;
     headerSlot?: ReactNode;
 }
 declare const FormComponent: (props: FormProps & RootComponentProps) => import("react").JSX.Element;

package/dist/types/src/component/Layout/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 import type { Federation } from '@module-federation/runtime';
 import { RootComponentProps } from '../../utils';

package/dist/types/src/component/ModuleInfo/index.d.ts

@@ -0,0 +1,8 @@
+import type { GlobalModuleInfo } from '@module-federation/sdk';
+interface HomeProps {
+    moduleInfo: GlobalModuleInfo;
+    selectedModuleId: string | null;
+    onSelectModule: (moduleId: string) => void;
+}
+declare const Home: (props: HomeProps) => import("react").JSX.Element;
+export default Home;

package/dist/types/src/component/SharedDepsExplorer/FocusResultDisplay.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LoadedStatus } from './share-utils';
+interface FocusResult {
+    packageName: string;
+    version: string;
+    status: LoadedStatus;
+    providers: string[];
+}
+interface FocusResultDisplayProps {
+    focusResult: FocusResult | null;
+    hasData: boolean;
+    loadedStatusLabel: (status: LoadedStatus) => string;
+}
+declare const FocusResultDisplay: React.FC<FocusResultDisplayProps>;
+export default FocusResultDisplay;

package/dist/types/src/component/SharedDepsExplorer/index.d.ts

@@ -0,0 +1,6 @@
+import type { GlobalShareScopeMap } from '@module-federation/runtime/types';
+interface SharedDepsExplorerProps {
+    shareData?: GlobalShareScopeMap;
+}
+declare function SharedDepsExplorer({ shareData: shareDataProp, }: SharedDepsExplorerProps): import("react").JSX.Element;
+export default SharedDepsExplorer;

package/dist/types/src/component/SharedDepsExplorer/share-utils.d.ts

@@ -0,0 +1,44 @@
+import { GlobalShareScopeMap, Shared, SharedConfig } from '@module-federation/runtime/types';
+export type LoadedStatus = 'loaded' | 'loading' | 'not-loaded';
+export type ReuseStatus = boolean;
+export interface ShareStats {
+    totalProviders: number;
+    totalScopes: number;
+    totalPackages: number;
+    totalVersions: number;
+    loadedCount: number;
+    reusedCount: number;
+}
+export interface NormalizedSharedVersion {
+    id: string;
+    provider: string;
+    scope: string;
+    packageName: string;
+    version: string;
+    from: string;
+    useIn: string[];
+    shareConfig: SharedConfig;
+    strategy?: string;
+    loaded?: boolean;
+    loading?: unknown;
+    loadedStatus: LoadedStatus;
+    reuseStatus: ReuseStatus;
+}
+export declare function computeLoadedStatus(entry: Shared): LoadedStatus;
+export declare function computeReuseStatus(entry: Shared): ReuseStatus;
+export declare function normalizeShareData(raw: GlobalShareScopeMap | null | undefined): NormalizedSharedVersion[];
+export declare function computeShareStats(versions: NormalizedSharedVersion[]): ShareStats;
+export declare function groupByProviderScopePackage(versions: NormalizedSharedVersion[]): Record<string, Record<string, Record<string, NormalizedSharedVersion[]>>>;
+export declare function getFilterOptions(versions: NormalizedSharedVersion[]): {
+    providers: string[];
+    scopes: string[];
+    packages: string[];
+    versions: string[];
+};
+export declare function findPackageProvider(versions: NormalizedSharedVersion[], packageName: string, version?: string): {
+    packageName: string;
+    version: string;
+    providers: string[];
+    status: LoadedStatus;
+} | null;
+export declare function getReusedVersions(versions: NormalizedSharedVersion[]): NormalizedSharedVersion[];

package/dist/types/src/init.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="chrome" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 declare global {
     interface Window {

package/dist/types/src/template/constant.d.ts

@@ -1,5 +1,6 @@
 export declare const FormID = "FormID";
 export declare const ENABLEHMR = "enableHMR";
+export declare const ENABLE_CLIP = "enableClip";
 export declare const proxyFormField = "proxyFormField";
 export declare const defaultDataItem: {
     key: string;
@@ -7,11 +8,7 @@ export declare const defaultDataItem: {
     checked: boolean;
 };
 export declare const defaultModuleData: {
-    proxyFormField: {
-        key: string;
-        value: string;
-        checked: boolean;
-    }[];
+    proxyFormField: never[];
 };
 export declare const statusInfo: Record<string, {
     status: string;
@@ -19,5 +16,6 @@ export declare const statusInfo: Record<string, {
     color: string;
 }>;
 export declare const __ENABLE_FAST_REFRESH__ = "enableFastRefresh";
+export declare const __EAGER_SHARE__ = "eagerShare";
 export declare const BROWSER_ENV_KEY = "MF_ENV";
 export declare const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";

package/dist/types/src/utils/chrome/index.d.ts

@@ -1,16 +1,18 @@
-/// <reference types="chrome" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 export * from './storage';
 export declare const injectPostMessage: (postMessageUrl: string) => void;
 export declare const TabInfo: {
     currentTabId: number;
 };
+export declare const setTargetTab: (tab?: chrome.tabs.Tab | null) => void;
+export declare const syncActiveTab: (tabId?: number) => Promise<chrome.tabs.Tab | undefined>;
 export declare function getCurrentTabId(): number;
 export declare function getInspectWindowTabId(): Promise<unknown>;
-export declare const getGlobalModuleInfo: (callback: React.Dispatch<React.SetStateAction<GlobalModuleInfo>>) => Promise<void>;
+export declare const refreshModuleInfo: () => Promise<void>;
+export declare const getGlobalModuleInfo: (callback: (moduleInfo: GlobalModuleInfo) => void) => Promise<() => void>;
 export declare const getTabs: (queryOptions?: {}) => Promise<chrome.tabs.Tab[]>;
 export declare const getScope: () => Promise<string>;
-export declare const injectScript: (excuteScript: (...args: Array<any>) => any, world?: boolean, ...args: any) => Promise<void>;
+export declare const injectScript: (excuteScript: (...args: Array<any>) => any, world?: boolean, ...args: any) => Promise<any>;
 export declare const getUrl: (file: string) => string;
 export declare const injectToast: (toastUtilUrl: string, e2eFlag: string) => void;
 export declare const setChromeStorage: (formData: Record<string, any>) => void;

package/dist/types/src/utils/chrome/messages.d.ts

@@ -0,0 +1,2 @@
+export declare const MESSAGE_OPEN_SIDE_PANEL = "mf-devtools/open-side-panel";
+export declare const MESSAGE_ACTIVE_TAB_CHANGED = "mf-devtools/active-tab-changed";

package/dist/types/src/utils/chrome/storage.d.ts

@@ -1,4 +1,5 @@
-export declare const mergeStorage: (...args: any[]) => Promise<void>;
-export declare const removeStorageKey: (...args: any[]) => Promise<void>;
-export declare const removeStorage: (...args: any[]) => Promise<void>;
-export declare const setStorage: (...args: any[]) => Promise<void>;
+export declare const mergeStorage: (...args: any[]) => Promise<any>;
+export declare const removeStorageKey: (...args: any[]) => Promise<any>;
+export declare const removeStorage: (...args: any[]) => Promise<any>;
+export declare const setStorage: (...args: any[]) => Promise<any>;
+export declare const getStorageValue: (...args: any[]) => Promise<any>;

package/dist/types/src/utils/sdk/graph.d.ts

@@ -40,6 +40,7 @@ export declare class DependencyGraph {
     createGraph(target?: string): void;
     addNode(id: string, type: string, x: number, y: number, nodeData: NodeCustomData): void;
     addEdge(id: string, source: string, target: string, type?: Edge): void;
-    run(targetGraph: any, target: string | undefined, type: string, id?: string): void;
+    run(targetGraph: any, target: string | undefined, type: string, id?: string, depth?: number, maxDepth?: number): void;
     identify(): string;
+    calculateDepth(target?: string, visited?: Set<string>): number;
 }

package/dist/types/src/utils/sdk/index.d.ts

@@ -1,5 +1,6 @@
 export * from './graph';
 export declare const setLocalStorage: (key: string, value: any) => void;
+export declare const getLocalStorage: (key: string) => string | null;
 export declare const removeLocalStorage: (key: string) => void;
 export declare const mergeLocalStorage: (target: string, key: string, value: any) => void;
 export declare const removeLocalStorageKey: (target: string, key: string) => void;

package/dist/types/src/utils/types/common.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { GlobalModuleInfo } from '@module-federation/sdk';
 import { getModuleInfo } from '../index';
 export interface FormItemStatus {
     keyStatus: boolean;
@@ -14,5 +15,8 @@ export interface RootComponentProps {
     handleProxyAddress?: (address: string) => string;
     customValueValidate?: (schema: string) => boolean;
     headerSlot?: ReactNode;
+    onModuleInfoChange?: (moduleInfo: GlobalModuleInfo) => void;
+    onModuleInfoReset?: () => void;
+    tabId?: number;
 }
 export {};

package/dist/types/src/worker/index.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/devtools",
-  "version": "0.0.0-next-20250926024003",
+  "version": "0.0.0-perf-devtools-20260107043700",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -37,35 +37,37 @@
     "access": "public"
   },
   "dependencies": {
-    "@arco-design/web-react": "^2.64.1",
-    "@modern-js/runtime": "2.68.2",
+    "@modern-js/runtime": "2.69.3",
+    "@arco-design/web-react": "2.66.7",
     "ahooks": "^3.7.10",
     "dagre": "^0.8.5",
-    "react": "~18.3.1",
-    "react-dom": "~18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "reactflow": "11.11.4",
-    "@module-federation/sdk": "0.0.0-next-20250926024003"
+    "echarts": "^6.0.0",
+    "lucide-react": "^0.364.0",
+    "echarts-for-react": "^3.0.5",
+    "@module-federation/sdk": "0.0.0-perf-devtools-20260107043700"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.68.2",
+    "@modern-js/app-tools": "2.69.3",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/module-tools": "2.68.2",
-    "@modern-js/storybook": "2.68.2",
-    "@modern-js/tsconfig": "2.68.2",
+    "@modern-js/module-tools": "2.69.3",
+    "@modern-js/storybook": "2.69.3",
+    "@modern-js/tsconfig": "2.69.3",
     "@playwright/test": "1.49.1",
     "@types/chrome": "^0.0.272",
     "@types/dagre": "^0.7.52",
     "@types/jest": "~29.2.4",
     "@types/node": "~20.12.12",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.3.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "lint-staged": "~13.1.0",
     "prettier": "~3.3.3",
     "rimraf": "~6.0.1",
-    "typescript": "~5.0.4",
     "vitest": "1.2.2",
-    "@module-federation/runtime": "0.0.0-next-20250926024003"
+    "@module-federation/runtime": "0.0.0-perf-devtools-20260107043700"
   },
   "scripts": {
     "build:storybook": "storybook build",

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

@@ -1,127 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect } from "react";
-import ReactFlow, {
-  addEdge,
-  ConnectionLineType,
-  useNodesState,
-  useEdgesState,
-  Controls
-} from "reactflow";
-import dagre from "dagre";
-import { DependencyGraph } from "../../utils/sdk/graph";
-import GraphItem from "../GraphItem";
-import { separateType } from "../../utils";
-import styles from "./index.module";
-import "reactflow/dist/style.css";
-const nodeWidth = 400;
-const nodeHeight = 600;
-const nodeTypes = { graphItem: GraphItem };
-const Graph = (props) => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const { snapshot } = props;
-  const { moduleInfo } = window.__FEDERATION__;
-  const { consumers } = separateType(moduleInfo);
-  useEffect(() => {
-    const dagreGraph = new dagre.graphlib.Graph();
-    dagreGraph.setDefaultEdgeLabel(() => ({}));
-    const getLayoutedElements = (nodes2, edges2, direction = "TB") => {
-      dagreGraph.setGraph({ rankdir: direction });
-      nodes2.forEach((node) => {
-        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-      });
-      edges2.forEach((edge) => {
-        dagreGraph.setEdge(edge.source, edge.target);
-      });
-      dagre.layout(dagreGraph);
-      nodes2.forEach((node) => {
-        const nodeWithPosition = dagreGraph.node(node.id);
-        node.position = {
-          x: nodeWithPosition.x - nodeWidth / 2,
-          y: nodeWithPosition.y - nodeHeight / 2
-        };
-      });
-      return { nodes: nodes2, edges: edges2 };
-    };
-    let nodeSet = [];
-    let edgeSet = [];
-    for (const consumer in consumers) {
-      const moduleGraph = new DependencyGraph(snapshot, consumer);
-      moduleGraph.createGraph();
-      moduleGraph.run(moduleGraph.graph, consumer, "graphItem");
-      nodeSet = [...nodeSet, ...moduleGraph.node];
-      edgeSet = [...edgeSet, ...moduleGraph.edge];
-    }
-    if (!nodeSet.length) {
-      nodeSet.push({
-        id: "1",
-        type: "graphItem",
-        position: {
-          x: 0,
-          y: 0
-        },
-        data: {
-          color: "lightgreen"
-        }
-      });
-    }
-    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
-      nodeSet,
-      edgeSet
-    );
-    setNodes(layoutedNodes);
-    setEdges(layoutedEdges);
-    setTimeout(() => {
-      const element = document.getElementsByClassName(
-        "react-flow__controls-fitview"
-      )[0];
-      element == null ? void 0 : element.click();
-    }, 50);
-  }, [snapshot]);
-  const onConnect = useCallback(
-    (params) => setEdges(
-      (eds) => addEdge(
-        __spreadProps(__spreadValues({}, params), { type: ConnectionLineType.SmoothStep, animated: true }),
-        eds
-      )
-    ),
-    []
-  );
-  return /* @__PURE__ */ jsx("div", { className: styles.depWrapper, children: /* @__PURE__ */ jsx(
-    ReactFlow,
-    {
-      className: styles.graph,
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      onConnect,
-      nodeTypes,
-      fitView: true,
-      children: /* @__PURE__ */ jsx(Controls, {})
-    }
-  ) });
-};
-var Graph_default = Graph;
-export {
-  Graph_default as default
-};

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

@@ -1,5 +0,0 @@
-import "./index_module.css";
-var index_module_default = { "depWrapper": "depWrapper_613b1", "table": "table_613b1", "graph": "graph_613b1" };
-export {
-  index_module_default as default
-};

package/dist/es/component/Graph/index_module.css

@@ -1,12 +0,0 @@
-.depWrapper_613b1 {
-  border: 1px solid #e5e6ec;
-  margin-top: 16px;
-  padding-top: 14px;
-  border-radius: 8px;
-}
-.depWrapper_613b1 .table_613b1 {
-  margin: 8px 0 20px;
-}
-.depWrapper_613b1 .graph_613b1 {
-  height: 80vh !important;
-}

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

@@ -1,5 +0,0 @@
-import "./index_module.css";
-var index_module_default = { "Wrapper": "Wrapper_2fa4f", "container": "container_2fa4f", "group": "group_2fa4f", "name": "name_2fa4f", "info": "info_2fa4f", "expose-container": "expose-container_2fa4f", "type": "type_2fa4f", "item": "item_2fa4f", "message": "message_2fa4f" };
-export {
-  index_module_default as default
-};

package/dist/es/component/GraphItem/index_module.css

@@ -1,61 +0,0 @@
-.Wrapper_2fa4f {
-  display: flex;
-  box-sizing: border-box;
-  border-radius: 10px;
-  margin: 0;
-  padding: 0;
-  width: 300px;
-  overflow: hidden;
-}
-.Wrapper_2fa4f .container_2fa4f {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-.Wrapper_2fa4f .container_2fa4f .group_2fa4f {
-  display: flex;
-  align-items: center;
-  margin-bottom: 3px;
-  width: 100%;
-  padding: 5px 0;
-}
-.Wrapper_2fa4f .container_2fa4f .group_2fa4f .name_2fa4f {
-  color: white;
-  text-align: center;
-  margin: 0 auto;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f {
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  margin: 0 4px 4px 4px;
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
-  font-size: 12px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .expose-container_2fa4f {
-  display: flex;
-  margin-bottom: 5px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .type_2fa4f {
-  font-weight: bold;
-  margin-right: 10px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .item_2fa4f {
-  display: inline-block;
-  padding: 5px;
-  background: lightgray;
-  border-radius: 15px;
-  font-size: 8px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-weight: 300;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.Wrapper_2fa4f .container_2fa4f .message_2fa4f {
-  display: flex;
-}