@module-federation/devtools 2.8.2 → 2.9.1

package/dist/es/utils/chrome/webmcp.js

@@ -0,0 +1,468 @@
+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));
+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 { MODULE_DEVTOOL_IDENTIFIER } from "@module-federation/sdk";
+import {
+  BROWSER_ENV_KEY,
+  __FEDERATION_DEVTOOLS__,
+  __ENABLE_FAST_REFRESH__,
+  __EAGER_SHARE__
+} from "../../template/constant";
+import { sanitizePostMessagePayload } from "./safe-post-message";
+import { normalizeObservabilityDevtoolsConfig } from "./observability-shared";
+import {
+  OBSERVABILITY_DEVTOOLS_STORAGE_KEY,
+  OBSERVABILITY_DEVTOOLS_SOURCE
+} from "./messages";
+import { readSnapshotFromPage } from "./observability";
+const coreModule = require("../../vendor/basic-proxy-core.js");
+const core = coreModule.default || coreModule;
+const isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const readConfig = () => {
+  const raw = localStorage.getItem(__FEDERATION_DEVTOOLS__);
+  const value = raw ? JSON.parse(raw) : {};
+  if (!isRecord(value))
+    throw new Error("Invalid devtools configuration in page storage.");
+  return value;
+};
+const persist = (values) => {
+  var _a;
+  const previous = Object.fromEntries(
+    Object.keys(values).map((key) => [key, localStorage.getItem(key)])
+  );
+  try {
+    for (const [key, value] of Object.entries(values)) {
+      if (value === null)
+        localStorage.removeItem(key);
+      else
+        localStorage.setItem(key, value);
+    }
+  } catch (error) {
+    for (const [key, value] of Object.entries(previous)) {
+      try {
+        if (value === null)
+          localStorage.removeItem(key);
+        else
+          localStorage.setItem(key, value);
+      } catch (e) {
+      }
+    }
+    throw error;
+  }
+  try {
+    window.postMessage(
+      sanitizePostMessagePayload({
+        moduleInfo: modules(),
+        share: ((_a = federation()) == null ? void 0 : _a.__SHARE__) || {}
+      }),
+      location.origin
+    );
+  } catch (e) {
+  }
+};
+const federation = () => window.__FEDERATION__ || window.__VMOK__;
+const modules = () => {
+  var _a;
+  return ((_a = federation()) == null ? void 0 : _a.moduleInfo) || {};
+};
+const reloadResult = () => ({
+  saved: true,
+  reloadRequired: true,
+  instruction: "Reload this page using browser navigation, then call mf_get_state to verify. No navigation has been started by this tool."
+});
+const boolean = (value, name) => {
+  if (typeof value !== "boolean")
+    throw new Error(`${name} must be a boolean.`);
+  return value;
+};
+const validateRules = (value) => {
+  if (!Array.isArray(value) || value.length > 100)
+    throw new Error("rules must be an array of at most 100 rules.");
+  const names = /* @__PURE__ */ new Set();
+  return value.map((rule) => {
+    if (!isRecord(rule) || typeof rule.key !== "string" || !rule.key.trim() || typeof rule.value !== "string" || !rule.value.trim())
+      throw new Error("Each rule needs a nonempty key and value.");
+    const key = rule.key.trim();
+    const destination = rule.value.trim();
+    if (key.split(":").some(
+      (part) => ["__proto__", "constructor", "prototype"].includes(part)
+    ) || names.has(key))
+      throw new Error(`Invalid or duplicate remote key: ${key}`);
+    names.add(key);
+    if (/^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(destination)) {
+      const url = new URL(destination, location.href);
+      if (!["http:", "https:"].includes(url.protocol) || url.username || url.password)
+        throw new Error(
+          "Remote URLs must use HTTP(S), without embedded credentials."
+        );
+    } else if (!/^[\w.*^~<>=|+ -]+$/.test(destination)) {
+      throw new Error("Use an absolute HTTP(S) URL or a registry version/tag.");
+    }
+    return {
+      key,
+      value: destination,
+      checked: rule.checked === void 0 ? true : boolean(rule.checked, "checked")
+    };
+  });
+};
+const writeProxy = (rules, clip) => {
+  const active = rules.filter((rule) => rule.checked);
+  const snapshot = core.getModuleInfo(active, modules());
+  if (clip) {
+    for (const entry of Object.values(snapshot.moduleInfo)) {
+      if (!isRecord(entry))
+        continue;
+      if (entry.modules)
+        entry.modules = [];
+      if (entry.shared)
+        entry.shared = [];
+    }
+  }
+  persist({
+    [MODULE_DEVTOOL_IDENTIFIER]: active.length ? JSON.stringify(snapshot.moduleInfo) : null,
+    [BROWSER_ENV_KEY]: active.length ? "true" : null,
+    [__FEDERATION_DEVTOOLS__]: JSON.stringify(__spreadProps(__spreadValues({}, readConfig()), {
+      overrides: snapshot.overrides,
+      proxyRules: rules,
+      enableClip: clip
+    }))
+  });
+  return __spreadProps(__spreadValues({}, reloadResult()), { rules, clip });
+};
+const state = () => {
+  var _a, _b;
+  return {
+    url: location.href,
+    moduleInfo: modules(),
+    shared: ((_a = federation()) == null ? void 0 : _a.__SHARE__) || {},
+    registeredPlugins: (((_b = federation()) == null ? void 0 : _b.__GLOBAL_PLUGIN__) || []).map(
+      (plugin) => plugin.name
+    ),
+    config: readConfig(),
+    observability: readSnapshotFromPage(OBSERVABILITY_DEVTOOLS_STORAGE_KEY)
+  };
+};
+const schema = (properties = {}, required = []) => ({
+  type: "object",
+  properties,
+  required,
+  additionalProperties: false
+});
+const boolSchema = { type: "boolean" };
+const ruleSchema = schema(
+  {
+    key: { type: "string", minLength: 1 },
+    value: { type: "string", minLength: 1 },
+    checked: boolSchema
+  },
+  ["key", "value"]
+);
+const createDevtoolsTools = () => {
+  const tool = (name, description, inputSchema, readOnly, execute) => ({
+    name,
+    description,
+    inputSchema,
+    annotations: { readOnlyHint: readOnly },
+    execute: (..._0) => __async(void 0, [..._0], function* (input = {}) {
+      try {
+        if (!isRecord(input) || Object.keys(input).some(
+          (key) => !Object.hasOwn(inputSchema.properties, key)
+        ))
+          throw new Error("Unexpected tool arguments.");
+        const result = yield execute(input);
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(sanitizePostMessagePayload(result))
+            }
+          ]
+        };
+      } catch (error) {
+        return {
+          isError: true,
+          content: [
+            {
+              type: "text",
+              text: error instanceof Error ? error.message : String(error)
+            }
+          ]
+        };
+      }
+    })
+  });
+  return [
+    tool(
+      "mf_get_state",
+      "Read Module Federation runtime, proxy/HMR settings and loading reports for this page. Saved settings may require a page reload before taking effect.",
+      schema(),
+      true,
+      state
+    ),
+    tool(
+      "mf_get_modules",
+      "Read all module snapshots, or one snapshot by its exact module ID.",
+      schema({ moduleId: { type: "string" } }),
+      true,
+      ({ moduleId }) => {
+        if (moduleId === void 0)
+          return modules();
+        if (typeof moduleId !== "string" || !Object.hasOwn(modules(), moduleId))
+          throw new Error(
+            "Unknown module ID. Call mf_get_modules without arguments to list IDs."
+          );
+        return modules()[moduleId];
+      }
+    ),
+    tool(
+      "mf_get_dependencies",
+      "Read dependency graph data: module snapshots, consumers and remote IDs.",
+      schema(),
+      true,
+      () => __spreadValues({ modules: modules() }, core.separateType(modules()))
+    ),
+    tool(
+      "mf_get_shared",
+      "Read shared dependency scopes, versions and loaded state. Functions are returned as placeholders and are never invoked.",
+      schema(),
+      true,
+      () => {
+        var _a;
+        return ((_a = federation()) == null ? void 0 : _a.__SHARE__) || {};
+      }
+    ),
+    tool(
+      "mf_set_proxy",
+      "Replace all proxy rules on this page. key is a remote name/ID; value is an HTTP(S) manifest/entry URL or registry version. checked=false disables a rule. clip removes module/shared snapshot lists. Returns reloadRequired; CSP/CORS still apply.",
+      schema(
+        {
+          rules: { type: "array", maxItems: 100, items: ruleSchema },
+          clip: boolSchema
+        },
+        ["rules"]
+      ),
+      false,
+      ({ rules, clip }) => writeProxy(
+        validateRules(rules),
+        clip === void 0 ? Boolean(readConfig().enableClip) : boolean(clip, "clip")
+      )
+    ),
+    tool(
+      "mf_clear_proxy",
+      "Clear all proxy rules and injected snapshot data for this page, preserving HMR and tracing settings. Reload afterwards.",
+      schema(),
+      false,
+      () => writeProxy([], Boolean(readConfig().enableClip))
+    ),
+    tool(
+      "mf_set_hmr",
+      "Enable or disable the extension React Fast Refresh/shared development React replacement for this page. Save first, then reload so document_start scripts apply it before React loads. Eager shares may require an additional automatic reload.",
+      schema({ enabled: boolSchema }, ["enabled"]),
+      false,
+      ({ enabled }) => {
+        const next = __spreadProps(__spreadValues({}, readConfig()), {
+          [__ENABLE_FAST_REFRESH__]: boolean(enabled, "enabled")
+        });
+        if (!enabled)
+          delete next[__EAGER_SHARE__];
+        persist({ [__FEDERATION_DEVTOOLS__]: JSON.stringify(next) });
+        return reloadResult();
+      }
+    ),
+    tool(
+      "mf_configure_loading_trace",
+      "Configure the extension Loading Trace plugin on this page. enabled=false disables it on next reload. Does not disable user-installed observability plugins.",
+      schema(
+        {
+          enabled: boolSchema,
+          level: { type: "string", enum: ["error", "summary", "verbose"] },
+          maxEvents: { type: "integer", minimum: 10, maximum: 1e3 },
+          console: boolSchema,
+          browserEnabled: boolSchema,
+          scope: { type: "string", minLength: 1 },
+          mode: { type: "string", enum: ["development", "production"] },
+          printStart: boolSchema
+        },
+        ["enabled"]
+      ),
+      false,
+      (input) => {
+        var _a, _b, _c, _d;
+        const enabled = boolean(input.enabled, "enabled");
+        for (const key of ["console", "browserEnabled", "printStart"])
+          if (input[key] !== void 0)
+            boolean(input[key], key);
+        if (input.level !== void 0 && !["error", "summary", "verbose"].includes(String(input.level)))
+          throw new Error("Invalid trace level.");
+        if (input.mode !== void 0 && !["development", "production"].includes(String(input.mode)))
+          throw new Error("Invalid trace mode.");
+        if (input.scope !== void 0 && (typeof input.scope !== "string" || !input.scope.trim()))
+          throw new Error("Invalid trace scope.");
+        if (input.maxEvents !== void 0 && (typeof input.maxEvents !== "number" || !Number.isInteger(input.maxEvents) || input.maxEvents < 10 || input.maxEvents > 1e3))
+          throw new Error("maxEvents must be an integer between 10 and 1000.");
+        const raw = localStorage.getItem(OBSERVABILITY_DEVTOOLS_STORAGE_KEY);
+        const old = normalizeObservabilityDevtoolsConfig(
+          raw ? JSON.parse(raw) : void 0
+        );
+        const config = normalizeObservabilityDevtoolsConfig(__spreadProps(__spreadValues(__spreadValues({}, old), input), {
+          enabled,
+          browser: {
+            enabled: (_a = input.browserEnabled) != null ? _a : old.browser.enabled,
+            scope: (_b = input.scope) != null ? _b : old.browser.scope,
+            mode: (_c = input.mode) != null ? _c : old.browser.mode
+          },
+          trace: { printStart: (_d = input.printStart) != null ? _d : old.trace.printStart }
+        }));
+        persist({
+          [OBSERVABILITY_DEVTOOLS_STORAGE_KEY]: enabled ? JSON.stringify(config) : null
+        });
+        window.postMessage(
+          {
+            source: OBSERVABILITY_DEVTOOLS_SOURCE,
+            kind: "config-saved",
+            config
+          },
+          location.origin
+        );
+        return __spreadProps(__spreadValues({}, reloadResult()), { config });
+      }
+    ),
+    tool(
+      "mf_get_loading_reports",
+      "Read current loading reports and trace configuration from all available observability scopes.",
+      schema(),
+      true,
+      () => readSnapshotFromPage(OBSERVABILITY_DEVTOOLS_STORAGE_KEY)
+    ),
+    tool(
+      "mf_export_snapshot",
+      "Export a JSON snapshot of modules, shared dependencies, proxy/HMR configuration and loading reports. Returns data without initiating a download.",
+      schema(),
+      true,
+      () => __spreadValues({ exportedAt: (/* @__PURE__ */ new Date()).toISOString() }, state())
+    )
+  ];
+};
+const getModelContext = () => [document.modelContext, navigator.modelContext].find(
+  (context) => typeof (context == null ? void 0 : context.registerTool) === "function"
+);
+const registerDevtoolsWebMCP = (..._0) => __async(void 0, [..._0], function* (context = getModelContext()) {
+  if (typeof (context == null ? void 0 : context.registerTool) !== "function")
+    return () => __async(void 0, null, function* () {
+    });
+  const registered = [];
+  const cleanup = () => __async(void 0, null, function* () {
+    for (const name of registered.splice(0)) {
+      try {
+        if (typeof context.unregisterTool === "function")
+          yield context.unregisterTool(name);
+      } catch (e) {
+      }
+    }
+  });
+  try {
+    for (const tool of createDevtoolsTools()) {
+      yield context.registerTool(tool);
+      registered.push(tool.name);
+    }
+  } catch (error) {
+    yield cleanup();
+    throw error;
+  }
+  return cleanup;
+});
+const startDevtoolsWebMCP = (retryMs = 250, maxAttempts = 120) => {
+  const diagnostic = {
+    status: "waiting",
+    attempts: 0,
+    tools: [],
+    error: void 0
+  };
+  window.__MF_DEVTOOLS_WEBMCP__ = diagnostic;
+  let timer;
+  let stopped = false;
+  let cleanup;
+  const attempt = () => __async(void 0, null, function* () {
+    if (stopped)
+      return;
+    diagnostic.attempts++;
+    const context = getModelContext();
+    if (!context) {
+      if (diagnostic.attempts < maxAttempts) {
+        timer = setTimeout(() => void attempt(), retryMs);
+      } else {
+        diagnostic.status = "unavailable";
+        console.warn(
+          "[Module Federation Devtools] WebMCP host API unavailable",
+          diagnostic
+        );
+      }
+      return;
+    }
+    diagnostic.status = "registering";
+    try {
+      cleanup = yield registerDevtoolsWebMCP(context);
+      if (stopped) {
+        yield cleanup();
+        return;
+      }
+      diagnostic.tools = createDevtoolsTools().map(({ name }) => name);
+      diagnostic.status = "registered";
+    } catch (error) {
+      diagnostic.status = "error";
+      diagnostic.error = error instanceof Error ? error.message : String(error);
+      console.warn(
+        "[Module Federation Devtools] WebMCP registration failed",
+        error
+      );
+    }
+  });
+  void attempt();
+  return () => __async(void 0, null, function* () {
+    stopped = true;
+    clearTimeout(timer);
+    yield cleanup == null ? void 0 : cleanup();
+  });
+};
+export {
+  createDevtoolsTools,
+  getModelContext,
+  registerDevtoolsWebMCP,
+  startDevtoolsWebMCP
+};

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

@@ -36,7 +36,12 @@ const reloadPage = () => {
   (_a = globalThis == null ? void 0 : globalThis.location) == null ? void 0 : _a.reload();
 };
 const validateCustom = (schema) => schema == null ? void 0 : schema.endsWith(".json");
+const REACT_19_DEV_VERSION = "19.2.4";
 const getUnpkgUrl = (pkg, version) => {
+  if (/^19\./.test(version) && ["react", "react-dom", "react-dom/client"].includes(pkg)) {
+    const name = pkg === "react" ? "react" : "react-dom";
+    return `https://unpkg.com/umd-react@${REACT_19_DEV_VERSION}/dist/${name}.development.js`;
+  }
   if (pkg === "react") {
     return `https://unpkg.com/react@${version}/umd/react.development.js`;
   } else if (pkg === "react-dom") {
@@ -57,6 +62,7 @@ const definePropertyGlobalVal = (target, key, val) => {
   });
 };
 export {
+  REACT_19_DEV_VERSION,
   definePropertyGlobalVal,
   getLocalStorage,
   getUnpkgUrl,

package/dist/es/worker/index.js

@@ -45,7 +45,7 @@ import {
 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 getSidePanel = () => chrome.runtime.getManifest().side_panel ? chrome == null ? void 0 : chrome.sidePanel : void 0;
     const resolveTabId = (tabId) => __async(exports, null, function* () {
       if (typeof tabId === "number") {
         return tabId;

package/dist/lib/App.js

@@ -274,6 +274,8 @@ const InnerApp = (props) => {
     const bootstrap = () => __async(void 0, null, function* () {
       const tab = yield (0, import_utils.syncActiveTab)();
       setInspectedTab(tab || void 0);
+      if (typeof (tab == null ? void 0 : tab.id) !== "number")
+        return;
       const detach = yield (0, import_utils.getGlobalModuleInfo)(
         (info) => applyModuleUpdate(info)
       );
@@ -385,6 +387,9 @@ const InnerApp = (props) => {
   }, [activePanel, applyModuleUpdate]);
   const renderContent = () => {
     var _a;
+    if (typeof (inspectedTab == null ? void 0 : inspectedTab.id) !== "number") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Empty, { description: t("app.header.scope.waiting") });
+    }
     switch (activePanel) {
       case "moduleInfo":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -425,7 +430,7 @@ const InnerApp = (props) => {
           import_SharedDepsExplorer.default,
           {
             shareData: JSON.parse(
-              JSON.stringify((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__)
+              JSON.stringify(((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__) || {})
             )
           }
         );

package/dist/lib/App.module.js

@@ -21,4 +21,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", "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", "headerActions": "headerActions_ae2ee" };

package/dist/lib/App_module.css

@@ -304,4 +304,110 @@ body[arco-theme=dark] {
 
 .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%);
+}
+
+html[data-devtools-view="popup"] {
+  overflow: hidden;
+}
+html[data-devtools-view="popup"] body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+}
+html[data-devtools-view="popup"] .shell_ae2ee {
+  height: 100vh;
+  min-height: 0;
+  padding: 10px;
+  gap: 8px;
+  flex-direction: column;
+  background: var(--color-bg-1, #fff);
+}
+html[data-devtools-view="popup"] .sidebar_ae2ee {
+  flex: 0 0 auto;
+  width: 100%;
+  min-width: 0;
+  padding: 4px;
+  gap: 2px;
+  border-radius: 8px;
+  box-shadow: none;
+}
+html[data-devtools-view="popup"] .tabItem_ae2ee {
+  padding: 7px 9px;
+  font-size: 12px;
+  border-radius: 5px;
+  letter-spacing: 0;
+  text-transform: none;
+}
+html[data-devtools-view="popup"] .tabItem_ae2ee:focus-visible {
+  outline: 2px solid var(--color-primary-6, #165dff);
+  outline-offset: -2px;
+}
+html[data-devtools-view="popup"] .panel_ae2ee {
+  flex: 1 1;
+  min-height: 0;
+  padding: 12px;
+  gap: 10px;
+  border-radius: 8px;
+  box-shadow: none;
+  overflow: hidden;
+}
+html[data-devtools-view="popup"] .header_ae2ee {
+  flex: 0 0 auto;
+  gap: 6px;
+}
+html[data-devtools-view="popup"] .logo_ae2ee {
+  font-size: 16px;
+}
+html[data-devtools-view="popup"] .subtitle_ae2ee,
+html[data-devtools-view="popup"] .scopeLabel_ae2ee {
+  display: none;
+}
+html[data-devtools-view="popup"] .headerActions_ae2ee {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+html[data-devtools-view="popup"] .meta_ae2ee {
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+html[data-devtools-view="popup"] .scope_ae2ee {
+  min-width: 0;
+  flex: 1 1;
+  overflow: hidden;
+}
+html[data-devtools-view="popup"] .scope_ae2ee .arco-tag {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+html[data-devtools-view="popup"] .stats_ae2ee {
+  flex: 0 0 auto;
+  gap: 12px;
+  width: auto;
+}
+html[data-devtools-view="popup"] .statBlock_ae2ee {
+  padding: 0;
+  min-width: 0;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 4px;
+  border: 0;
+  background: none;
+  box-shadow: none;
+}
+html[data-devtools-view="popup"] .statValue_ae2ee {
+  font-size: 14px;
+}
+html[data-devtools-view="popup"] .statLabel_ae2ee {
+  font-size: 10px;
+  text-transform: none;
+}
+html[data-devtools-view="popup"] .body_ae2ee {
+  flex: 1 1;
+}
+html[data-devtools-view="popup"] .content_ae2ee {
+  flex: 1 1;
+  overscroll-behavior: contain;
 }

package/dist/lib/component/Form/index_module.css

@@ -195,4 +195,44 @@
   align-items: center;
   justify-content: center;
   display: flex;
+}
+
+html[data-devtools-view="popup"] .wrapper_20b79,
+html[data-devtools-view="popup"] .rules_20b79 {
+  gap: 10px;
+}
+html[data-devtools-view="popup"] .sectionHeader_20b79 {
+  padding: 8px;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+html[data-devtools-view="popup"] .titleRow_20b79 {
+  font-size: 13px;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+html[data-devtools-view="popup"] .subtitle_20b79 {
+  display: none;
+}
+html[data-devtools-view="popup"] .ruleCard_20b79 {
+  padding: 10px;
+  gap: 6px;
+  border-radius: 6px;
+  box-shadow: none;
+}
+html[data-devtools-view="popup"] .inputs_20b79 {
+  gap: 8px;
+}
+html[data-devtools-view="popup"] .field_20b79 {
+  min-width: 0;
+  margin-bottom: 0;
+}
+html[data-devtools-view="popup"] .field_20b79 .arco-select-view {
+  min-height: 32px;
+  border-radius: 5px;
+  padding: 2px 8px;
+}
+html[data-devtools-view="popup"] .emptyWrapper_20b79 {
+  padding: 16px;
+  border-radius: 6px;
 }