@vue/devtools-kit 7.0.14 → 7.0.16

package/dist/index.cjs

@@ -11,9 +11,9 @@ var __esm = (fn, res) => function __init() {
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
-var __export = (target8, all) => {
+var __export = (target9, all) => {
   for (var name in all)
-    __defProp(target8, name, { get: all[name], enumerable: true });
+    __defProp(target9, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -23,19 +23,19 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target8) => (target8 = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+var __toESM = (mod, isNodeMode, target9) => (target9 = 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(target8, "default", { value: mod, enumerable: true }) : target8,
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target9, "default", { value: mod, enumerable: true }) : target9,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.33_typescript@5.3.3/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.35_typescript@5.3.3/node_modules/tsup/assets/cjs_shims.js
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.33_typescript@5.3.3/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.35_typescript@5.3.3/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
   }
 });
@@ -1581,81 +1581,78 @@ var require_speakingurl2 = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ESC: () => ESC,
-  INFINITY: () => INFINITY,
-  MAX_ARRAY_SIZE: () => MAX_ARRAY_SIZE,
-  MAX_STRING_SIZE: () => MAX_STRING_SIZE,
-  NAN: () => NAN,
-  NEGATIVE_INFINITY: () => NEGATIVE_INFINITY,
   UNDEFINED: () => UNDEFINED,
   addCustomCommand: () => addCustomCommand,
   addCustomTab: () => addCustomTab,
   devtools: () => devtools,
-  fnTypeRE: () => fnTypeRE,
   formatInspectorStateValue: () => formatInspectorStateValue,
   getInspectorStateValueType: () => getInspectorStateValueType,
-  getRawValue: () => getRawValue,
-  now: () => now,
+  getRaw: () => getRaw,
   onDevToolsClientConnected: () => onDevToolsClientConnected,
   onDevToolsConnected: () => onDevToolsConnected,
   parse: () => parse,
-  rawTypeRE: () => rawTypeRE,
   removeCustomCommand: () => removeCustomCommand,
+  setDevToolsEnv: () => setDevToolsEnv,
   setupDevToolsPlugin: () => setupDevToolsPlugin,
-  specialTypeRE: () => specialTypeRE,
   stringify: () => stringify,
-  symbolRE: () => symbolRE,
   toEdit: () => toEdit,
   toSubmit: () => toSubmit,
-  toggleComponentInspectorEnabled: () => toggleComponentInspectorEnabled,
-  vueBuiltins: () => vueBuiltins
+  toggleComponentInspectorEnabled: () => toggleComponentInspectorEnabled
 });
 module.exports = __toCommonJS(src_exports);
 init_cjs_shims();
 
-// src/core/general/index.ts
+// src/core/index.ts
 init_cjs_shims();
-var import_devtools_shared12 = require("@vue/devtools-shared");
-var import_devtools_schema3 = require("@vue/devtools-schema");
+var import_devtools_shared15 = require("@vue/devtools-shared");
 
-// src/api/index.ts
+// src/hook/index.ts
 init_cjs_shims();
+var import_devtools_shared = require("@vue/devtools-shared");
+var import_hookable = require("hookable");
 
-// src/core/general/state.ts
+// src/types/index.ts
 init_cjs_shims();
-var import_devtools_shared3 = require("@vue/devtools-shared");
-var import_perfect_debounce2 = require("perfect-debounce");
 
-// src/core/router/index.ts
+// src/types/app.ts
 init_cjs_shims();
-var import_devtools_shared2 = require("@vue/devtools-shared");
-var import_perfect_debounce = require("perfect-debounce");
 
-// src/core/general/hook.ts
+// src/types/hook.ts
 init_cjs_shims();
-var import_devtools_schema = require("@vue/devtools-schema");
-var import_devtools_shared = require("@vue/devtools-shared");
-var import_hookable = require("hookable");
+
+// src/types/state.ts
+init_cjs_shims();
+
+// src/types/context.ts
+init_cjs_shims();
+
+// src/types/router.ts
+init_cjs_shims();
+
+// src/types/env.ts
+init_cjs_shims();
+
+// src/hook/index.ts
 var _a, _b;
 var devtoolsHooks = (_b = (_a = import_devtools_shared.target).__VUE_DEVTOOLS_HOOK) != null ? _b : _a.__VUE_DEVTOOLS_HOOK = (0, import_hookable.createHooks)();
 var on = {
   vueAppInit(fn) {
-    devtoolsHooks.hook(import_devtools_schema.DevToolsHooks.APP_INIT, fn);
+    devtoolsHooks.hook("app:init" /* APP_INIT */, fn);
   },
   vueAppConnected(fn) {
-    devtoolsHooks.hook(import_devtools_schema.DevToolsHooks.APP_CONNECTED, fn);
+    devtoolsHooks.hook("app:connected" /* APP_CONNECTED */, fn);
   },
   componentAdded(fn) {
-    return devtoolsHooks.hook(import_devtools_schema.DevToolsHooks.COMPONENT_ADDED, fn);
+    return devtoolsHooks.hook("component:added" /* COMPONENT_ADDED */, fn);
   },
   componentUpdated(fn) {
-    return devtoolsHooks.hook(import_devtools_schema.DevToolsHooks.COMPONENT_UPDATED, fn);
+    return devtoolsHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
   },
   componentRemoved(fn) {
-    return devtoolsHooks.hook(import_devtools_schema.DevToolsHooks.COMPONENT_REMOVED, fn);
+    return devtoolsHooks.hook("component:removed" /* COMPONENT_REMOVED */, fn);
   },
   setupDevtoolsPlugin(fn) {
-    devtoolsHooks.hook(import_devtools_schema.DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, fn);
+    devtoolsHooks.hook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, fn);
   }
 };
 function createDevToolsHook() {
@@ -1666,10 +1663,10 @@ function createDevToolsHook() {
     apps: {},
     events: /* @__PURE__ */ new Map(),
     on(event, fn) {
-      var _a9;
+      var _a10;
       if (!this.events.has(event))
         this.events.set(event, []);
-      (_a9 = this.events.get(event)) == null ? void 0 : _a9.push(fn);
+      (_a10 = this.events.get(event)) == null ? void 0 : _a10.push(fn);
       return () => this.off(event, fn);
     },
     once(event, fn) {
@@ -1696,295 +1693,203 @@ function createDevToolsHook() {
 }
 function subscribeDevToolsHook() {
   const hook2 = import_devtools_shared.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
-  hook2.on(import_devtools_schema.DevToolsHooks.APP_INIT, (app, version) => {
-    var _a9, _b9, _c;
-    if ((_c = (_b9 = (_a9 = app == null ? void 0 : app._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
+  hook2.on("app:init" /* APP_INIT */, (app, version) => {
+    var _a10, _b10, _c;
+    if ((_c = (_b10 = (_a10 = app == null ? void 0 : app._instance) == null ? void 0 : _a10.type) == null ? void 0 : _b10.devtools) == null ? void 0 : _c.hide)
       return;
-    devtoolsHooks.callHook(import_devtools_schema.DevToolsHooks.APP_INIT, app, version);
+    devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version);
   });
-  hook2.on(import_devtools_schema.DevToolsHooks.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
-    var _a9, _b9, _c;
-    if ((_c = (_b9 = (_a9 = app == null ? void 0 : app._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
+  hook2.on("component:added" /* COMPONENT_ADDED */, async (app, uid, parentUid, component) => {
+    var _a10, _b10, _c;
+    if ((_c = (_b10 = (_a10 = app == null ? void 0 : app._instance) == null ? void 0 : _a10.type) == null ? void 0 : _b10.devtools) == null ? void 0 : _c.hide)
       return;
     if (!app || typeof uid !== "number" && !uid || !component)
       return;
-    devtoolsHooks.callHook(import_devtools_schema.DevToolsHooks.COMPONENT_ADDED, app, uid, parentUid, component);
+    devtoolsHooks.callHook("component:added" /* COMPONENT_ADDED */, app, uid, parentUid, component);
   });
-  hook2.on(import_devtools_schema.DevToolsHooks.COMPONENT_UPDATED, (app, uid, parentUid, component) => {
+  hook2.on("component:updated" /* COMPONENT_UPDATED */, (app, uid, parentUid, component) => {
     if (!app || typeof uid !== "number" && !uid || !component)
       return;
-    devtoolsHooks.callHook(import_devtools_schema.DevToolsHooks.COMPONENT_UPDATED, app, uid, parentUid, component);
+    devtoolsHooks.callHook("component:updated" /* COMPONENT_UPDATED */, app, uid, parentUid, component);
   });
-  hook2.on(import_devtools_schema.DevToolsHooks.COMPONENT_REMOVED, async (app, uid, parentUid, component) => {
+  hook2.on("component:removed" /* COMPONENT_REMOVED */, async (app, uid, parentUid, component) => {
     if (!app || typeof uid !== "number" && !uid || !component)
       return;
-    devtoolsHooks.callHook(import_devtools_schema.DevToolsHooks.COMPONENT_REMOVED, app, uid, parentUid, component);
+    devtoolsHooks.callHook("component:removed" /* COMPONENT_REMOVED */, app, uid, parentUid, component);
   });
-  hook2.on(import_devtools_schema.DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn) => {
-    devtoolsHooks.callHook(import_devtools_schema.DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
+  hook2.on("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, (pluginDescriptor, setupFn) => {
+    devtoolsHooks.callHook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn);
   });
 }
 var hook = {
-  on
+  on,
+  setupDevToolsPlugin(pluginDescriptor, setupFn) {
+    return devtoolsHooks.callHook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn);
+  }
 };
 
+// src/state/index.ts
+init_cjs_shims();
+
+// src/state/state.ts
+init_cjs_shims();
+var import_devtools_shared10 = require("@vue/devtools-shared");
+var import_perfect_debounce3 = require("perfect-debounce");
+
+// src/api/index.ts
+init_cjs_shims();
+
+// src/api/api.ts
+init_cjs_shims();
+
+// src/core/timeline/index.ts
+init_cjs_shims();
+function addTimelineLayer(payload) {
+  devtoolsContext.timelineLayer.push(payload);
+}
+
+// src/core/inspector/index.ts
+init_cjs_shims();
+function addInspector(payload) {
+  devtoolsContext.inspector.push(payload);
+}
+function getInspector(inspectorId) {
+  return devtoolsContext.inspector.find((inspector) => inspector.id === inspectorId);
+}
+function updateInspector(inspectorId, payload) {
+  const inspector = getInspector(inspectorId);
+  inspector && Object.assign(inspector, payload);
+}
+
+// src/core/app-record/index.ts
+init_cjs_shims();
+var import_speakingurl = __toESM(require_speakingurl2(), 1);
+
+// src/api/plugin.ts
+init_cjs_shims();
+
 // src/core/router/index.ts
-var RouterInfoKey = "__VUE_DEVTOOLS_ROUTER_INFO__";
-var RouterKey = "__VUE_DEVTOOLS_ROUTER__";
+init_cjs_shims();
+var import_devtools_shared3 = require("@vue/devtools-shared");
+var import_perfect_debounce = require("perfect-debounce");
+
+// src/api/hook.ts
+init_cjs_shims();
+var import_devtools_shared2 = require("@vue/devtools-shared");
+var import_hookable2 = require("hookable");
 var _a2, _b2;
-(_b2 = (_a2 = import_devtools_shared2.target)[RouterInfoKey]) != null ? _b2 : _a2[RouterInfoKey] = {
-  currentRoute: null,
-  routes: [],
-  router: null
-};
-var _a3, _b3;
-(_b3 = (_a3 = import_devtools_shared2.target)[RouterKey]) != null ? _b3 : _a3[RouterKey] = null;
-var devtoolsRouterInfo = new Proxy(import_devtools_shared2.target[RouterInfoKey], {
-  get(target8, property) {
-    return import_devtools_shared2.target[RouterInfoKey][property];
+var apiHooks = (_b2 = (_a2 = import_devtools_shared2.target).__VUE_DEVTOOLS_API_HOOK) != null ? _b2 : _a2.__VUE_DEVTOOLS_API_HOOK = (0, import_hookable2.createHooks)();
+
+// src/core/router/index.ts
+function getRoutes(router) {
+  const routesMap = /* @__PURE__ */ new Map();
+  return ((router == null ? void 0 : router.getRoutes()) || []).filter((i) => !routesMap.has(i.path) && routesMap.set(i.path, 1));
+}
+function filterRoutes(routes) {
+  return routes.map((item) => {
+    let { path, name, children } = item;
+    if (children == null ? void 0 : children.length)
+      children = filterRoutes(children);
+    return {
+      path,
+      name,
+      children
+    };
+  });
+}
+function filterCurrentRoute(route) {
+  if (route) {
+    const { fullPath, hash, href, path, name, matched, params, query } = route;
+    return {
+      fullPath,
+      hash,
+      href,
+      path,
+      name,
+      params,
+      query,
+      matched: filterRoutes(matched)
+    };
   }
-});
+  return route;
+}
 function normalizeRouterInfo(appRecord) {
-  const getRoutes = (router) => {
-    const routesMap = /* @__PURE__ */ new Map();
-    return ((router == null ? void 0 : router.getRoutes()) || []).filter((i) => !routesMap.has(i.path) && routesMap.set(i.path, 1));
-  };
-  function filterRoutes(routes) {
-    return routes.map((item) => {
-      let { path, name, children } = item;
-      if (children == null ? void 0 : children.length)
-        children = filterRoutes(children);
-      return {
-        path,
-        name,
-        children
-      };
-    });
-  }
-  function filterCurrentRoute(route) {
-    if (route) {
-      const { fullPath, hash, href, path, name, matched, params, query } = route;
-      return {
-        fullPath,
-        hash,
-        href,
-        path,
-        name,
-        params,
-        query,
-        matched: filterRoutes(matched)
-      };
-    }
-    return route;
-  }
   function init() {
-    var _a9;
-    const router = (_a9 = appRecord.app) == null ? void 0 : _a9.config.globalProperties.$router;
+    var _a10;
+    const router = (_a10 = appRecord.app) == null ? void 0 : _a10.config.globalProperties.$router;
     const currentRoute = filterCurrentRoute(router == null ? void 0 : router.currentRoute.value);
     const routes = filterRoutes(getRoutes(router));
     const c = console.warn;
     console.warn = () => {
     };
-    import_devtools_shared2.target[RouterInfoKey] = {
-      currentRoute: currentRoute ? (0, import_devtools_shared2.deepClone)(currentRoute) : {},
-      routes: (0, import_devtools_shared2.deepClone)(routes)
+    import_devtools_shared3.target[ROUTER_INFO_KEY] = {
+      currentRoute: currentRoute ? (0, import_devtools_shared3.deepClone)(currentRoute) : {},
+      routes: (0, import_devtools_shared3.deepClone)(routes)
     };
-    import_devtools_shared2.target[RouterKey] = router;
+    import_devtools_shared3.target[ROUTER_KEY] = router;
     console.warn = c;
   }
   init();
   hook.on.componentUpdated((0, import_perfect_debounce.debounce)(() => {
     init();
-    apiHooks.callHook("router-info:updated" /* ROUTER_INFO_UPDATED */, import_devtools_shared2.target[RouterInfoKey]);
+    apiHooks.callHook("router-info:updated" /* ROUTER_INFO_UPDATED */, import_devtools_shared3.target[ROUTER_INFO_KEY]);
   }, 200));
 }
 function getRouterDevToolsId(id) {
   return id.replace(/\D/g, "") || "0";
 }
 
-// src/core/general/state.ts
-var StateKey = "__VUE_DEVTOOLS_GLOBAL_STATE__";
-var ContextKey = "__VUE_DEVTOOLS_CONTEXT__";
-var DefaultContext = {
-  appRecord: null,
-  api: null,
-  inspector: [],
-  timelineLayer: [],
-  routerInfo: {},
-  router: null,
-  activeInspectorTreeId: "",
-  componentPluginHookBuffer: []
-};
-var _a4, _b4;
-(_b4 = (_a4 = import_devtools_shared3.target)[StateKey]) != null ? _b4 : _a4[StateKey] = {
-  connected: false,
-  clientConnected: false,
-  appRecords: [],
-  activeAppRecord: null,
-  selectedComponentId: null,
-  pluginBuffer: [],
-  tabs: [],
-  commands: [],
-  vitePluginDetected: false,
-  activeAppRecordId: null
-};
-var _a5, _b5;
-(_b5 = (_a5 = import_devtools_shared3.target)[ContextKey]) != null ? _b5 : _a5[ContextKey] = (0, import_devtools_shared3.deepClone)(DefaultContext);
-var callStateUpdatedHook = (0, import_perfect_debounce2.debounce)((state, oldState) => {
-  apiHooks.callHook("devtools:state-updated" /* DEVTOOLS_STATE_UPDATED */, state, oldState);
-}, 80);
-var callConnectedUpdatedHook = (0, import_perfect_debounce2.debounce)((state, oldState) => {
-  apiHooks.callHook("devtools:connected-updated" /* DEVTOOLS_CONNECTED_UPDATED */, state, oldState);
-}, 80);
-var devtoolsState = new Proxy(import_devtools_shared3.target[StateKey], {
-  get(target8, property) {
-    return import_devtools_shared3.target[StateKey][property];
-  },
-  set(target8, property, value) {
-    var _a9;
-    const oldState = { ...import_devtools_shared3.target[StateKey] };
-    target8[property] = value;
-    import_devtools_shared3.target[StateKey][property] = value;
-    if (property === "activeAppRecord") {
-      import_devtools_shared3.target[ContextKey].appRecord = value;
-      import_devtools_shared3.target[ContextKey].api = value.api;
-      import_devtools_shared3.target[ContextKey].inspector = (_a9 = value.inspector) != null ? _a9 : [];
-      normalizeRouterInfo(value);
-      import_devtools_shared3.target[ContextKey].routerInfo = devtoolsRouterInfo;
-    }
-    callStateUpdatedHook(import_devtools_shared3.target[StateKey], oldState);
-    if (["connected", "clientConnected"].includes(property.toString()) && oldState[property] !== value)
-      callConnectedUpdatedHook(import_devtools_shared3.target[StateKey], oldState);
-    return true;
-  },
-  deleteProperty(target8, property) {
-    delete target8[property];
-    return true;
-  }
-});
-Object.defineProperty(devtoolsState.tabs, "push", {
-  configurable: true,
-  value(...items) {
-    const result = Array.prototype.push.apply(this, items);
-    devtoolsState.tabs = this;
-    apiHooks.callHook("custom-tabs:updated" /* CUSTOM_TABS_UPDATED */, this);
-    return result;
+// src/api/plugin.ts
+function collectDevToolsPlugin(pluginDescriptor, setupFn) {
+  devtoolsState.pluginBuffer.push([pluginDescriptor, setupFn]);
+}
+function setupDevToolsPlugin(pluginDescriptor, setupFn) {
+  return hook.setupDevToolsPlugin(pluginDescriptor, setupFn);
+}
+function setupExternalPlugin(plugin, app, api) {
+  const [pluginDescriptor, setupFn] = plugin;
+  if (pluginDescriptor.app !== app)
+    return;
+  if (pluginDescriptor.packageName === "vue-query") {
+    return;
   }
-});
-["push", "splice"].forEach((method) => {
-  Object.defineProperty(devtoolsState.commands, method, {
-    configurable: true,
-    value(...args) {
-      const result = Array.prototype[method].apply(this, args);
-      devtoolsState.commands = this;
-      apiHooks.callHook("custom-commands:updated" /* CUSTOM_COMMANDS_UPDATED */, this);
-      return result;
+  if (pluginDescriptor.packageName === "vue-router") {
+    const id = getRouterDevToolsId(`${pluginDescriptor.id}`);
+    if (pluginDescriptor.app === app) {
+      devtoolsAppRecords.value = devtoolsAppRecords.value.map((item) => ({
+        ...item,
+        routerId: id
+      }));
     }
-  });
-});
-var devtoolsContext = new Proxy(import_devtools_shared3.target[ContextKey], {
-  get(target8, property) {
-    if (property === "router")
-      return import_devtools_shared3.target[RouterKey];
-    else if (property === "clear")
-      return clearDevToolsContext;
-    return import_devtools_shared3.target[ContextKey][property];
-  },
-  set(target8, property, value) {
-    if (property === "componentPluginHookBuffer")
-      import_devtools_shared3.target[ContextKey][property] = value;
-    return true;
   }
-});
-function clearDevToolsContext() {
-  import_devtools_shared3.target[ContextKey] = (0, import_devtools_shared3.deepClone)(DefaultContext);
+  setupFn(api);
+}
+function registerPlugin(app, api) {
+  devtoolsState.pluginBuffer.forEach((plugin) => setupExternalPlugin(plugin, app, api));
+  devtoolsAppRecords.value = devtoolsAppRecords.value.map((record) => {
+    var _a10, _b10;
+    const globalProperties = (_b10 = (_a10 = record.app) == null ? void 0 : _a10.config) == null ? void 0 : _b10.globalProperties;
+    if (!globalProperties)
+      return record;
+    return {
+      ...record,
+      moduleDetectives: {
+        vueRouter: !!globalProperties.$router,
+        pinia: !!globalProperties.$pinia,
+        vueI18n: !!globalProperties.$i18n
+      }
+    };
+  });
 }
 
-// src/shared/index.ts
-init_cjs_shims();
-
-// src/shared/util.ts
-init_cjs_shims();
-
-// src/core/component/state/replacer.ts
-init_cjs_shims();
-
-// src/core/component/state/constants.ts
+// src/plugins/index.ts
 init_cjs_shims();
-var vueBuiltins = /* @__PURE__ */ new Set([
-  "nextTick",
-  "defineComponent",
-  "defineAsyncComponent",
-  "defineCustomElement",
-  "ref",
-  "computed",
-  "reactive",
-  "readonly",
-  "watchEffect",
-  "watchPostEffect",
-  "watchSyncEffect",
-  "watch",
-  "isRef",
-  "unref",
-  "toRef",
-  "toRefs",
-  "isProxy",
-  "isReactive",
-  "isReadonly",
-  "shallowRef",
-  "triggerRef",
-  "customRef",
-  "shallowReactive",
-  "shallowReadonly",
-  "toRaw",
-  "markRaw",
-  "effectScope",
-  "getCurrentScope",
-  "onScopeDispose",
-  "onMounted",
-  "onUpdated",
-  "onUnmounted",
-  "onBeforeMount",
-  "onBeforeUpdate",
-  "onBeforeUnmount",
-  "onErrorCaptured",
-  "onRenderTracked",
-  "onRenderTriggered",
-  "onActivated",
-  "onDeactivated",
-  "onServerPrefetch",
-  "provide",
-  "inject",
-  "h",
-  "mergeProps",
-  "cloneVNode",
-  "isVNode",
-  "resolveComponent",
-  "resolveDirective",
-  "withDirectives",
-  "withModifiers"
-]);
-var symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/;
-var rawTypeRE = /^\[object (\w+)]$/;
-var specialTypeRE = /^\[native (\w+) (.*?)(<>((.|\s)*))?\]$/;
-var fnTypeRE = /^(?:function|class) (\w+)/;
-var MAX_STRING_SIZE = 1e4;
-var MAX_ARRAY_SIZE = 5e3;
-var UNDEFINED = "__vue_devtool_undefined__";
-var INFINITY = "__vue_devtool_infinity__";
-var NEGATIVE_INFINITY = "__vue_devtool_negative_infinity__";
-var NAN = "__vue_devtool_nan__";
-var ESC = {
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "&": "&amp;"
-};
 
-// src/core/component/state/custom.ts
+// src/plugins/component.ts
 init_cjs_shims();
+var import_perfect_debounce2 = require("perfect-debounce");
 
-// src/core/component/general/util.ts
+// src/core/component/utils/index.ts
 init_cjs_shims();
 var import_devtools_shared4 = require("@vue/devtools-shared");
 var import_vue = require("vue");
@@ -2026,21 +1931,21 @@ async function getComponentId(options) {
   }
 }
 function isFragment(instance) {
-  var _a9;
-  const subTreeType = (_a9 = instance.subTree) == null ? void 0 : _a9.type;
+  var _a10;
+  const subTreeType = (_a10 = instance.subTree) == null ? void 0 : _a10.type;
   return subTreeType === import_vue.Fragment;
 }
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;
 }
 function getInstanceName(instance) {
-  var _a9, _b9, _c;
+  var _a10, _b10, _c;
   const name = getComponentTypeName(instance.type || {});
   if (name)
     return name;
   if (instance.root === instance)
     return "Root";
-  for (const key in (_b9 = (_a9 = instance.parent) == null ? void 0 : _a9.type) == null ? void 0 : _b9.components) {
+  for (const key in (_b10 = (_a10 = instance.parent) == null ? void 0 : _a10.type) == null ? void 0 : _b10.components) {
     if (instance.parent.type.components[key] === instance.type)
       return saveComponentGussedName(instance, key);
   }
@@ -2054,8 +1959,8 @@ function getInstanceName(instance) {
   return "Anonymous Component";
 }
 function getUniqueComponentId(instance) {
-  var _a9, _b9, _c;
-  const appId = (_c = (_b9 = (_a9 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a9.app) == null ? void 0 : _b9.__VUE_DEVTOOLS_APP_RECORD_ID__) != null ? _c : 0;
+  var _a10, _b10, _c;
+  const appId = (_c = (_b10 = (_a10 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a10.app) == null ? void 0 : _b10.__VUE_DEVTOOLS_APP_RECORD_ID__) != null ? _c : 0;
   const instanceId = instance === instance.root ? "root" : instance.uid;
   return `${appId}:${instanceId}`;
 }
@@ -2084,1648 +1989,1864 @@ function getComponentInstance(appRecord, instanceId) {
   return instance || appRecord.instanceMap.get(":root");
 }
 
-// src/core/component/state/process.ts
-init_cjs_shims();
-var import_devtools_shared5 = require("@vue/devtools-shared");
-
-// src/core/component/state/util.ts
-init_cjs_shims();
-
-// src/core/component/state/is.ts
+// src/core/component/state/bounding-rect.ts
 init_cjs_shims();
-function isVueInstance(value) {
-  return value._ && Object.keys(value._).includes("vnode");
+function createRect() {
+  const rect = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    get width() {
+      return rect.right - rect.left;
+    },
+    get height() {
+      return rect.bottom - rect.top;
+    }
+  };
+  return rect;
 }
-function isPlainObject(obj) {
-  return Object.prototype.toString.call(obj) === "[object Object]";
-}
-function isPrimitive(data) {
-  if (data == null)
-    return true;
-  const type = typeof data;
-  return type === "string" || type === "number" || type === "boolean";
-}
-function isRef(raw) {
-  return !!raw.__v_isRef;
-}
-function isComputed(raw) {
-  return isRef(raw) && !!raw.effect;
+var range;
+function getTextRect(node) {
+  if (!range)
+    range = document.createRange();
+  range.selectNode(node);
+  return range.getBoundingClientRect();
 }
-function isReactive(raw) {
-  return !!raw.__v_isReactive;
+function getFragmentRect(vnode) {
+  const rect = createRect();
+  if (!vnode.children)
+    return rect;
+  for (let i = 0, l = vnode.children.length; i < l; i++) {
+    const childVnode = vnode.children[i];
+    let childRect;
+    if (childVnode.component) {
+      childRect = getComponentBoundingRect(childVnode.component);
+    } else if (childVnode.el) {
+      const el = childVnode.el;
+      if (el.nodeType === 1 || el.getBoundingClientRect)
+        childRect = el.getBoundingClientRect();
+      else if (el.nodeType === 3 && el.data.trim())
+        childRect = getTextRect(el);
+    }
+    if (childRect)
+      mergeRects(rect, childRect);
+  }
+  return rect;
 }
-function isReadOnly(raw) {
-  return !!raw.__v_isReadonly;
+function mergeRects(a, b) {
+  if (!a.top || b.top < a.top)
+    a.top = b.top;
+  if (!a.bottom || b.bottom > a.bottom)
+    a.bottom = b.bottom;
+  if (!a.left || b.left < a.left)
+    a.left = b.left;
+  if (!a.right || b.right > a.right)
+    a.right = b.right;
+  return a;
 }
-
-// src/core/component/state/util.ts
-var tokenMap = {
-  [UNDEFINED]: "undefined",
-  [NAN]: "NaN",
-  [INFINITY]: "Infinity",
-  [NEGATIVE_INFINITY]: "-Infinity"
+var DEFAULT_RECT = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: 0,
+  height: 0
 };
-var reversedTokenMap = Object.entries(tokenMap).reduce((acc, [key, value]) => {
-  acc[value] = key;
-  return acc;
-}, {});
-function internalStateTokenToString(value) {
-  if (value === null)
-    return "null";
-  return typeof value === "string" && tokenMap[value] || false;
-}
-function replaceTokenToString(value) {
-  const replaceRegex = new RegExp(`"(${Object.keys(tokenMap).join("|")})"`, "g");
-  return value.replace(replaceRegex, (_, g1) => tokenMap[g1]);
-}
-function replaceStringToToken(value) {
-  const literalValue = reversedTokenMap[value.trim()];
-  if (literalValue)
-    return `"${literalValue}"`;
-  const replaceRegex = new RegExp(`:\\s*(${Object.keys(reversedTokenMap).join("|")})`, "g");
-  return value.replace(replaceRegex, (_, g1) => `:"${reversedTokenMap[g1]}"`);
-}
-function getPropType(type) {
-  if (Array.isArray(type))
-    return type.map((t) => getPropType(t)).join(" or ");
-  if (type == null)
-    return "null";
-  const match = type.toString().match(fnTypeRE);
-  return typeof type === "function" ? match && match[1] || "any" : "any";
-}
-function sanitize(data) {
-  if (!isPrimitive(data) && !Array.isArray(data) && !isPlainObject(data)) {
-    return Object.prototype.toString.call(data);
-  } else {
-    return data;
+function getComponentBoundingRect(instance) {
+  const el = instance.subTree.el;
+  if (typeof window === "undefined") {
+    return DEFAULT_RECT;
   }
+  if (isFragment(instance))
+    return getFragmentRect(instance.subTree);
+  else if ((el == null ? void 0 : el.nodeType) === 1)
+    return el == null ? void 0 : el.getBoundingClientRect();
+  else if (instance.subTree.component)
+    return getComponentBoundingRect(instance.subTree.component);
+  else
+    return DEFAULT_RECT;
 }
-function getSetupStateType(raw) {
-  return {
-    ref: isRef(raw),
-    computed: isComputed(raw),
-    reactive: isReactive(raw),
-    readonly: isReadOnly(raw)
-  };
-}
-function toRaw(value) {
-  if (value == null ? void 0 : value.__v_raw)
-    return value.__v_raw;
-  return value;
+
+// src/core/component/tree/walker.ts
+init_cjs_shims();
+
+// src/core/component/tree/el.ts
+init_cjs_shims();
+function getRootElementsFromComponentInstance(instance) {
+  if (isFragment(instance))
+    return getFragmentRootElements(instance.subTree);
+  if (!instance.subTree)
+    return [];
+  return [instance.subTree.el];
 }
-function escape(s) {
-  return s.replace(/[<>"&]/g, (s2) => {
-    return ESC[s2] || s2;
+function getFragmentRootElements(vnode) {
+  if (!vnode.children)
+    return [];
+  const list = [];
+  vnode.children.forEach((childVnode) => {
+    if (childVnode.component)
+      list.push(...getRootElementsFromComponentInstance(childVnode.component));
+    else if (childVnode == null ? void 0 : childVnode.el)
+      list.push(childVnode.el);
   });
+  return list;
 }
 
-// src/core/component/state/process.ts
-function mergeOptions(to, from, instance) {
-  if (typeof from === "function")
-    from = from.options;
-  if (!from)
-    return to;
-  const { mixins, extends: extendsOptions } = from;
-  extendsOptions && mergeOptions(to, extendsOptions, instance);
-  mixins && mixins.forEach(
-    (m) => mergeOptions(to, m, instance)
-  );
-  for (const key of ["computed", "inject"]) {
-    if (Object.prototype.hasOwnProperty.call(from, key)) {
-      if (!to[key])
-        to[key] = from[key];
-      else
-        Object.assign(to[key], from[key]);
-    }
+// src/core/component/tree/filter.ts
+init_cjs_shims();
+var import_devtools_shared5 = require("@vue/devtools-shared");
+var ComponentFilter = class {
+  constructor(filter) {
+    this.filter = filter || "";
   }
-  return to;
-}
-function resolveMergedOptions(instance) {
-  const raw = instance.type;
-  const { mixins, extends: extendsOptions } = raw;
-  const globalMixins = instance.appContext.mixins;
-  if (!globalMixins.length && !mixins && !extendsOptions)
-    return raw;
-  const options = {};
-  globalMixins.forEach((m) => mergeOptions(options, m, instance));
-  mergeOptions(options, raw, instance);
-  return options;
-}
-function processProps(instance) {
-  const props = [];
-  const propDefinitions = instance.type.props;
-  for (const key in instance.props) {
-    const propDefinition = propDefinitions ? propDefinitions[key] : null;
-    const camelizeKey = (0, import_devtools_shared5.camelize)(key);
-    props.push({
-      type: "props",
-      key: camelizeKey,
-      value: returnError(() => instance.props[key]),
-      meta: propDefinition ? {
-        type: propDefinition.type ? getPropType(propDefinition.type) : "any",
-        required: !!propDefinition.required,
-        ...propDefinition.default ? {
-          default: propDefinition.default.toString()
-        } : {}
-      } : { type: "invalid" }
-    });
+  /**
+   * Check if an instance is qualified.
+   *
+   * @param {Vue|Vnode} instance
+   * @return {boolean}
+   */
+  isQualified(instance) {
+    const name = getInstanceName(instance);
+    return (0, import_devtools_shared5.classify)(name).toLowerCase().includes(this.filter) || (0, import_devtools_shared5.kebabize)(name).toLowerCase().includes(this.filter);
   }
-  return props;
-}
-function processState(instance) {
-  const type = instance.type;
-  const props = type.props;
-  const getters = type.vuex && type.vuex.getters;
-  const computedDefs = type.computed;
-  const data = {
-    ...instance.data,
-    ...instance.renderContext
-  };
-  return Object.keys(data).filter((key) => !(props && key in props) && !(getters && key in getters) && !(computedDefs && key in computedDefs)).map((key) => ({
-    key,
-    type: "data",
-    value: returnError(() => data[key]),
-    editable: true
-  }));
-}
-function getStateTypeAndName(info) {
-  const stateType = info.computed ? "computed" : info.ref ? "ref" : info.reactive ? "reactive" : null;
-  const stateTypeName = stateType ? `${stateType.charAt(0).toUpperCase()}${stateType.slice(1)}` : null;
-  return {
-    stateType,
-    stateTypeName
-  };
+};
+function createComponentFilter(filterText) {
+  return new ComponentFilter(filterText);
 }
-function processSetupState(instance) {
-  const raw = instance.devtoolsRawSetupState || {};
-  return Object.keys(instance.setupState).filter((key) => !vueBuiltins.has(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
-    var _a9, _b9, _c, _d;
-    const value = returnError(() => toRaw(instance.setupState[key]));
-    const rawData = raw[key];
-    let result;
-    let isOtherType = typeof value === "function" || typeof (value == null ? void 0 : value.render) === "function" || typeof (value == null ? void 0 : value.__asyncLoader) === "function";
-    if (rawData) {
-      const info = getSetupStateType(rawData);
-      const { stateType, stateTypeName } = getStateTypeAndName(info);
-      const isState = info.ref || info.computed || info.reactive;
-      const raw2 = ((_b9 = (_a9 = rawData.effect) == null ? void 0 : _a9.raw) == null ? void 0 : _b9.toString()) || ((_d = (_c = rawData.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
-      if (stateType)
-        isOtherType = false;
-      result = {
-        ...stateType ? { stateType, stateTypeName } : {},
-        ...raw2 ? { raw: raw2 } : {},
-        editable: isState && !info.readonly
-      };
-    }
-    const type = isOtherType ? "setup (other)" : "setup";
-    return {
-      key,
-      value,
-      type,
-      // @ts-expect-error ignore
-      ...result
-    };
-  });
-}
-function processComputed(instance, mergedType) {
-  const type = mergedType;
-  const computed = [];
-  const defs = type.computed || {};
-  for (const key in defs) {
-    const def = defs[key];
-    const type2 = typeof def === "function" && def.vuex ? "vuex bindings" : "computed";
-    computed.push({
-      type: type2,
-      key,
-      value: returnError(() => {
-        var _a9;
-        return (_a9 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a9[key];
-      }),
-      editable: typeof def.set === "function"
-    });
+
+// src/core/component/tree/walker.ts
+var ComponentWalker = class {
+  constructor(options) {
+    // Dedupe instances (Some instances may be both on a component and on a child abstract/functional component)
+    this.captureIds = /* @__PURE__ */ new Map();
+    const { filterText = "", maxDepth, recursively } = options;
+    this.componentFilter = createComponentFilter(filterText);
+    this.maxDepth = maxDepth;
+    this.recursively = recursively;
   }
-  return computed;
-}
-function processAttrs(instance) {
-  return Object.keys(instance.attrs).map((key) => ({
-    type: "attrs",
-    key,
-    value: returnError(() => instance.attrs[key])
-  }));
-}
-function processProvide(instance) {
-  return Reflect.ownKeys(instance.provides).map((key) => ({
-    type: "provided",
-    key: key.toString(),
-    value: returnError(() => instance.provides[key])
-  }));
-}
-function processInject(instance, mergedType) {
-  if (!(mergedType == null ? void 0 : mergedType.inject))
-    return [];
-  let keys = [];
-  let defaultValue;
-  if (Array.isArray(mergedType.inject)) {
-    keys = mergedType.inject.map((key) => ({
-      key,
-      originalKey: key
-    }));
-  } else {
-    keys = Reflect.ownKeys(mergedType.inject).map((key) => {
-      const value = mergedType.inject[key];
-      let originalKey;
-      if (typeof value === "string" || typeof value === "symbol") {
-        originalKey = value;
-      } else {
-        originalKey = value.from;
-        defaultValue = value.default;
-      }
-      return {
-        key,
-        originalKey
-      };
-    });
+  getComponentTree(instance) {
+    this.captureIds = /* @__PURE__ */ new Map();
+    return this.findQualifiedChildren(instance, 0);
   }
-  return keys.map(({ key, originalKey }) => ({
-    type: "injected",
-    key: originalKey && key !== originalKey ? `${originalKey.toString()} \u279E ${key.toString()}` : key.toString(),
-    // eslint-disable-next-line no-prototype-builtins
-    value: returnError(() => instance.ctx.hasOwnProperty(key) ? instance.ctx[key] : instance.provides.hasOwnProperty(originalKey) ? instance.provides[originalKey] : defaultValue)
-  }));
-}
-function processRefs(instance) {
-  return Object.keys(instance.refs).map((key) => ({
-    type: "refs",
-    key,
-    value: returnError(() => instance.refs[key])
-  }));
-}
-function processEventListeners(instance) {
-  var _a9;
-  const emitsDefinition = instance.type.emits;
-  const declaredEmits = Array.isArray(emitsDefinition) ? emitsDefinition : Object.keys(emitsDefinition != null ? emitsDefinition : {});
-  const keys = Object.keys((_a9 = instance.vnode.props) != null ? _a9 : {});
-  const result = [];
-  for (const key of keys) {
-    const [prefix, ...eventNameParts] = key.split(/(?=[A-Z])/);
-    if (prefix === "on") {
-      const eventName = eventNameParts.join("-").toLowerCase();
-      const isDeclared = declaredEmits.includes(eventName);
-      result.push({
-        type: "event listeners",
-        key: eventName,
-        value: {
-          _custom: {
-            displayText: isDeclared ? "\u2705 Declared" : "\u26A0\uFE0F Not declared",
-            key: isDeclared ? "\u2705 Declared" : "\u26A0\uFE0F Not declared",
-            value: isDeclared ? "\u2705 Declared" : "\u26A0\uFE0F Not declared",
-            tooltipText: !isDeclared ? `The event <code>${eventName}</code> is not declared in the <code>emits</code> option. It will leak into the component's attributes (<code>$attrs</code>).` : null
-          }
-        }
-      });
+  getComponentParents(instance) {
+    this.captureIds = /* @__PURE__ */ new Map();
+    const parents = [];
+    this.captureId(instance);
+    let parent = instance;
+    while (parent = parent.parent) {
+      this.captureId(parent);
+      parents.push(parent);
     }
+    return parents;
   }
-  return result;
-}
-function processInstanceState(instance) {
-  const mergedType = resolveMergedOptions(instance);
-  return processProps(instance).concat(
-    processState(instance),
-    processSetupState(instance),
-    processComputed(instance, mergedType),
-    processAttrs(instance),
-    processProvide(instance),
-    processInject(instance, mergedType),
-    processRefs(instance),
-    processEventListeners(instance)
-  );
-}
-
-// src/core/component/state/custom.ts
-function getFunctionDetails(func) {
-  let string = "";
-  let matches = null;
-  try {
-    string = Function.prototype.toString.call(func);
-    matches = String.prototype.match.call(string, /\([\s\S]*?\)/);
-  } catch (e) {
+  captureId(instance) {
+    if (!instance)
+      return null;
+    const id = instance.__VUE_DEVTOOLS_UID__ != null ? instance.__VUE_DEVTOOLS_UID__ : getUniqueComponentId(instance);
+    instance.__VUE_DEVTOOLS_UID__ = id;
+    if (this.captureIds.has(id))
+      return null;
+    else
+      this.captureIds.set(id, void 0);
+    this.mark(instance);
+    return id;
   }
-  const match = matches && matches[0];
-  const args = typeof match === "string" ? match : "(?)";
-  const name = typeof func.name === "string" ? func.name : "";
-  return {
-    _custom: {
-      type: "function",
-      displayText: `<span style="opacity:.5;">function</span> ${escape(name)}${args}`,
-      tooltipText: string.trim() ? `<pre>${string}</pre>` : null
-    }
-  };
-}
-function getBigIntDetails(val) {
-  const stringifiedBigInt = BigInt.prototype.toString.call(val);
-  return {
-    _custom: {
-      type: "bigint",
-      displayText: `BigInt(${stringifiedBigInt})`,
-      value: stringifiedBigInt
+  /**
+   * Capture the meta information of an instance. (recursive)
+   *
+   * @param {Vue} instance
+   * @return {object}
+   */
+  async capture(instance, depth) {
+    var _a10;
+    if (!instance)
+      return null;
+    const id = this.captureId(instance);
+    const name = getInstanceName(instance);
+    const children = this.getInternalInstanceChildren(instance.subTree).filter((child) => !isBeingDestroyed(child));
+    const parents = this.getComponentParents(instance) || [];
+    const inactive = !!instance.isDeactivated || parents.some((parent) => parent.isDeactivated);
+    const treeNode = {
+      uid: instance.uid,
+      id,
+      name,
+      renderKey: getRenderKey(instance.vnode ? instance.vnode.key : null),
+      inactive,
+      children: [],
+      isFragment: isFragment(instance),
+      tags: typeof instance.type !== "function" ? [] : [
+        {
+          label: "functional",
+          textColor: 5592405,
+          backgroundColor: 15658734
+        }
+      ],
+      autoOpen: this.recursively,
+      file: instance.type.__file || ""
+    };
+    if (depth < this.maxDepth || instance.type.__isKeepAlive || parents.some((parent) => parent.type.__isKeepAlive)) {
+      treeNode.children = await Promise.all(children.map((child) => this.capture(child, depth + 1)).filter(Boolean));
     }
-  };
-}
-function getMapDetails(val) {
-  const list = [];
-  val.forEach(
-    (value, key) => list.push({
-      key,
-      value
-    })
-  );
-  return {
-    _custom: {
-      type: "map",
-      displayText: "Map",
-      value: list,
-      readOnly: true,
-      fields: {
-        abstract: true
+    if (this.isKeepAlive(instance)) {
+      const cachedComponents = this.getKeepAliveCachedInstances(instance);
+      const childrenIds = children.map((child) => child.__VUE_DEVTOOLS_UID__);
+      for (const cachedChild of cachedComponents) {
+        if (!childrenIds.includes(cachedChild.__VUE_DEVTOOLS_UID__)) {
+          const node = await this.capture({ ...cachedChild, isDeactivated: true }, depth + 1);
+          if (node)
+            treeNode.children.push(node);
+        }
       }
     }
-  };
-}
-function getSetDetails(val) {
-  const list = Array.from(val);
-  return {
-    _custom: {
-      type: "set",
-      displayText: `Set[${list.length}]`,
-      value: list,
-      readOnly: true
+    const rootElements = getRootElementsFromComponentInstance(instance);
+    const firstElement = rootElements[0];
+    if (firstElement == null ? void 0 : firstElement.parentElement) {
+      const parentInstance = instance.parent;
+      const parentRootElements = parentInstance ? getRootElementsFromComponentInstance(parentInstance) : [];
+      let el = firstElement;
+      const indexList = [];
+      do {
+        indexList.push(Array.from(el.parentElement.childNodes).indexOf(el));
+        el = el.parentElement;
+      } while (el.parentElement && parentRootElements.length && !parentRootElements.includes(el));
+      treeNode.domOrder = indexList.reverse();
+    } else {
+      treeNode.domOrder = [-1];
     }
-  };
-}
-function getCatchedGetters(store) {
-  const getters = {};
-  const origGetters = store.getters || {};
-  const keys = Object.keys(origGetters);
-  for (let i = 0; i < keys.length; i++) {
-    const key = keys[i];
-    Object.defineProperty(getters, key, {
-      enumerable: true,
-      get: () => {
-        try {
-          return origGetters[key];
-        } catch (e) {
-          return e;
-        }
-      }
+    if ((_a10 = instance.suspense) == null ? void 0 : _a10.suspenseKey) {
+      treeNode.tags.push({
+        label: instance.suspense.suspenseKey,
+        backgroundColor: 14979812,
+        textColor: 16777215
+      });
+      this.mark(instance, true);
+    }
+    devtoolsContext.api.visitComponentTree({
+      treeNode,
+      componentInstance: instance,
+      app: instance.appContext.app,
+      filter: this.componentFilter.filter
     });
+    return treeNode;
   }
-  return getters;
-}
-function reduceStateList(list) {
-  if (!list.length)
-    return void 0;
-  return list.reduce((map, item) => {
-    const key = item.type || "data";
-    const obj = map[key] = map[key] || {};
-    obj[item.key] = item.value;
-    return map;
-  }, {});
-}
-function namedNodeMapToObject(map) {
-  const result = {};
-  const l = map.length;
-  for (let i = 0; i < l; i++) {
-    const node = map.item(i);
-    result[node.name] = node.value;
+  /**
+   * Find qualified children from a single instance.
+   * If the instance itself is qualified, just return itself.
+   * This is ok because [].concat works in both cases.
+   *
+   * @param {Vue|Vnode} instance
+   * @return {Vue|Array}
+   */
+  async findQualifiedChildren(instance, depth) {
+    var _a10;
+    if (this.componentFilter.isQualified(instance) && !((_a10 = instance.type.devtools) == null ? void 0 : _a10.hide)) {
+      return [await this.capture(instance, depth)];
+    } else if (instance.subTree) {
+      const list = this.isKeepAlive(instance) ? this.getKeepAliveCachedInstances(instance) : this.getInternalInstanceChildren(instance.subTree);
+      return this.findQualifiedChildrenFromList(list, depth);
+    } else {
+      return [];
+    }
   }
-  return result;
-}
-function getStoreDetails(store) {
-  return {
-    _custom: {
-      type: "store",
-      displayText: "Store",
-      value: {
-        state: store.state,
-        getters: getCatchedGetters(store)
-      },
-      fields: {
-        abstract: true
+  /**
+   * Iterate through an array of instances and flatten it into
+   * an array of qualified instances. This is a depth-first
+   * traversal - e.g. if an instance is not matched, we will
+   * recursively go deeper until a qualified child is found.
+   *
+   * @param {Array} instances
+   * @return {Array}
+   */
+  async findQualifiedChildrenFromList(instances, depth) {
+    instances = instances.filter((child) => {
+      var _a10;
+      return !isBeingDestroyed(child) && !((_a10 = child.type.devtools) == null ? void 0 : _a10.hide);
+    });
+    if (!this.componentFilter.filter)
+      return Promise.all(instances.map((child) => this.capture(child, depth)));
+    else
+      return Array.prototype.concat.apply([], await Promise.all(instances.map((i) => this.findQualifiedChildren(i, depth))));
+  }
+  /**
+   * Get children from a component instance.
+   */
+  getInternalInstanceChildren(subTree, suspense = null) {
+    const list = [];
+    if (subTree) {
+      if (subTree.component) {
+        !suspense ? list.push(subTree.component) : list.push({ ...subTree.component, suspense });
+      } else if (subTree.suspense) {
+        const suspenseKey = !subTree.suspense.isInFallback ? "suspense default" : "suspense fallback";
+        list.push(...this.getInternalInstanceChildren(subTree.suspense.activeBranch, { ...subTree.suspense, suspenseKey }));
+      } else if (Array.isArray(subTree.children)) {
+        subTree.children.forEach((childSubTree) => {
+          if (childSubTree.component)
+            !suspense ? list.push(childSubTree.component) : list.push({ ...childSubTree.component, suspense });
+          else
+            list.push(...this.getInternalInstanceChildren(childSubTree, suspense));
+        });
       }
     }
-  };
-}
-function getRouterDetails(router) {
-  return {
-    _custom: {
-      type: "router",
-      displayText: "VueRouter",
-      value: {
-        options: router.options,
-        currentRoute: router.currentRoute
-      },
-      fields: {
-        abstract: true
-      }
+    return list.filter((child) => {
+      var _a10;
+      return !isBeingDestroyed(child) && !((_a10 = child.type.devtools) == null ? void 0 : _a10.hide);
+    });
+  }
+  /**
+   * Mark an instance as captured and store it in the instance map.
+   *
+   * @param {Vue} instance
+   */
+  mark(instance, force = false) {
+    const instanceMap = getAppRecord(instance).instanceMap;
+    if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_UID__))
+      instanceMap.set(instance.__VUE_DEVTOOLS_UID__, instance);
+  }
+  isKeepAlive(instance) {
+    return instance.type.__isKeepAlive && instance.__v_cache;
+  }
+  getKeepAliveCachedInstances(instance) {
+    return Array.from(instance.__v_cache.values()).map((vnode) => vnode.component).filter(Boolean);
+  }
+};
+
+// src/core/component/state/editor.ts
+init_cjs_shims();
+var import_vue2 = require("vue");
+var StateEditor = class {
+  constructor() {
+    this.refEditor = new RefStateEditor();
+  }
+  set(object, path, value, cb) {
+    const sections = Array.isArray(path) ? path : path.split(".");
+    const markRef = false;
+    while (sections.length > 1) {
+      const section = sections.shift();
+      if (object instanceof Map)
+        object = object.get(section);
+      else
+        object = object[section];
+      if (this.refEditor.isRef(object))
+        object = this.refEditor.get(object);
     }
-  };
-}
-function getInstanceDetails(instance) {
-  if (instance._)
-    instance = instance._;
-  const state = processInstanceState(instance);
-  return {
-    _custom: {
-      type: "component",
-      id: instance.__VUE_DEVTOOLS_UID__,
-      displayText: getInstanceName(instance),
-      tooltipText: "Component instance",
-      value: reduceStateList(state),
-      fields: {
-        abstract: true
-      }
+    const field = sections[0];
+    const item = this.refEditor.get(object)[field];
+    if (cb) {
+      cb(object, field, value);
+    } else {
+      if (this.refEditor.isRef(item))
+        this.refEditor.set(item, value);
+      else if (markRef)
+        object[field] = value;
+      else
+        object[field] = value;
     }
-  };
-}
-function getComponentDefinitionDetails(definition) {
-  let display = getComponentName(definition);
-  if (display) {
-    if (definition.name && definition.__file)
-      display += ` <span>(${definition.__file})</span>`;
-  } else {
-    display = "<i>Unknown Component</i>";
   }
-  return {
-    _custom: {
-      type: "component-definition",
-      displayText: display,
-      tooltipText: "Component definition",
-      ...definition.__file ? {
-        file: definition.__file
-      } : {}
+  get(object, path) {
+    const sections = Array.isArray(path) ? path : path.split(".");
+    for (let i = 0; i < sections.length; i++) {
+      if (object instanceof Map)
+        object = object.get(sections[i]);
+      else
+        object = object[sections[i]];
+      if (this.refEditor.isRef(object))
+        object = this.refEditor.get(object);
+      if (!object)
+        return void 0;
     }
-  };
-}
-function getHTMLElementDetails(value) {
-  try {
-    return {
-      _custom: {
-        type: "HTMLElement",
-        displayText: `<span class="opacity-30">&lt;</span><span class="text-blue-500">${value.tagName.toLowerCase()}</span><span class="opacity-30">&gt;</span>`,
-        value: namedNodeMapToObject(value.attributes)
+    return object;
+  }
+  has(object, path, parent = false) {
+    if (typeof object === "undefined")
+      return false;
+    const sections = Array.isArray(path) ? path.slice() : path.split(".");
+    const size = !parent ? 1 : 2;
+    while (object && sections.length > size) {
+      const section = sections.shift();
+      object = object[section];
+      if (this.refEditor.isRef(object))
+        object = this.refEditor.get(object);
+    }
+    return object != null && Object.prototype.hasOwnProperty.call(object, sections[0]);
+  }
+  createDefaultSetCallback(state) {
+    return (object, field, value) => {
+      if (state.remove || state.newKey) {
+        if (Array.isArray(object))
+          object.splice(field, 1);
+        else if ((0, import_vue2.toRaw)(object) instanceof Map)
+          object.delete(field);
+        else if ((0, import_vue2.toRaw)(object) instanceof Set)
+          object.delete(value);
+        else
+          Reflect.deleteProperty(object, field);
       }
-    };
-  } catch (e) {
-    return {
-      _custom: {
-        type: "HTMLElement",
-        displayText: `<span class="text-blue-500">${String(value)}</span>`
+      if (!state.remove) {
+        const target9 = object[state.newKey || field];
+        if (this.refEditor.isRef(target9))
+          this.refEditor.set(target9, value);
+        else if ((0, import_vue2.toRaw)(object) instanceof Map)
+          object.set(state.newKey || field, value);
+        else
+          object[state.newKey || field] = value;
       }
     };
   }
-}
-function getObjectDetails(object) {
-  var _a9, _b9, _c, _d;
-  const info = getSetupStateType(object);
-  const isState = info.ref || info.computed || info.reactive;
-  if (isState) {
-    const stateTypeName = info.computed ? "Computed" : info.ref ? "Ref" : info.reactive ? "Reactive" : null;
-    const value = toRaw(info.reactive ? object : object._value);
-    const raw = ((_b9 = (_a9 = object.effect) == null ? void 0 : _a9.raw) == null ? void 0 : _b9.toString()) || ((_d = (_c = object.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
-    return {
-      _custom: {
-        type: stateTypeName == null ? void 0 : stateTypeName.toLowerCase(),
-        stateTypeName,
-        value,
-        ...raw ? { tooltipText: `<span class="font-mono">${raw}</span>` } : {}
+};
+var RefStateEditor = class {
+  set(ref, value) {
+    if ((0, import_vue2.isRef)(ref)) {
+      ref.value = value;
+    } else {
+      if (ref instanceof Set && Array.isArray(value)) {
+        ref.clear();
+        value.forEach((v) => ref.add(v));
+        return;
       }
-    };
-  }
-  if (typeof object.__asyncLoader === "function") {
-    return {
-      _custom: {
-        type: "component-definition",
-        display: "Async component definition"
+      const currentKeys = Object.keys(value);
+      if (ref instanceof Map) {
+        const previousKeysSet2 = new Set(ref.keys());
+        currentKeys.forEach((key) => {
+          ref.set(key, Reflect.get(value, key));
+          previousKeysSet2.delete(key);
+        });
+        previousKeysSet2.forEach((key) => ref.delete(key));
+        return;
       }
-    };
+      const previousKeysSet = new Set(Object.keys(ref));
+      currentKeys.forEach((key) => {
+        Reflect.set(ref, key, Reflect.get(value, key));
+        previousKeysSet.delete(key);
+      });
+      previousKeysSet.forEach((key) => Reflect.deleteProperty(ref, key));
+    }
   }
-}
-
-// src/core/component/state/replacer.ts
-function stringifyReplacer(key) {
-  var _a9;
-  if (key === "compilerOptions")
+  get(ref) {
+    return (0, import_vue2.isRef)(ref) ? ref.value : ref;
+  }
+  isRef(ref) {
+    return (0, import_vue2.isRef)(ref) || (0, import_vue2.isReactive)(ref);
+  }
+};
+async function editComponentState(payload, stateEditor2) {
+  const { path, nodeId, state, type } = payload;
+  const instance = getComponentInstance(devtoolsContext.appRecord, nodeId);
+  if (!instance)
     return;
-  const val = this[key];
-  const type = typeof val;
-  if (Array.isArray(val)) {
-    const l = val.length;
-    if (l > MAX_ARRAY_SIZE) {
-      return {
-        _isArray: true,
-        length: l,
-        items: val.slice(0, MAX_ARRAY_SIZE)
-      };
-    }
-    return val;
-  } else if (typeof val === "string") {
-    if (val.length > MAX_STRING_SIZE)
-      return `${val.substring(0, MAX_STRING_SIZE)}... (${val.length} total length)`;
-    else
-      return val;
-  } else if (type === "undefined") {
-    return UNDEFINED;
-  } else if (val === Number.POSITIVE_INFINITY) {
-    return INFINITY;
-  } else if (val === Number.NEGATIVE_INFINITY) {
-    return NEGATIVE_INFINITY;
-  } else if (typeof val === "function") {
-    return getFunctionDetails(val);
-  } else if (type === "symbol") {
-    return `[native Symbol ${Symbol.prototype.toString.call(val)}]`;
-  } else if (typeof val === "bigint") {
-    return getBigIntDetails(val);
-  } else if (val !== null && typeof val === "object") {
-    const proto = Object.prototype.toString.call(val);
-    if (proto === "[object Map]") {
-      return getMapDetails(val);
-    } else if (proto === "[object Set]") {
-      return getSetDetails(val);
-    } else if (proto === "[object RegExp]") {
-      return `[native RegExp ${RegExp.prototype.toString.call(val)}]`;
-    } else if (proto === "[object Date]") {
-      return `[native Date ${Date.prototype.toString.call(val)}]`;
-    } else if (proto === "[object Error]") {
-      return `[native Error ${val.message}<>${val.stack}]`;
-    } else if (val.state && val._vm) {
-      return getStoreDetails(val);
-    } else if (val.constructor && val.constructor.name === "VueRouter") {
-      return getRouterDetails(val);
-    } else if (isVueInstance(val)) {
-      return getInstanceDetails(val);
-    } else if (typeof val.render === "function") {
-      return getComponentDefinitionDetails(val);
-    } else if (val.constructor && val.constructor.name === "VNode") {
-      return `[native VNode <${val.tag}>]`;
-    } else if (typeof HTMLElement !== "undefined" && val instanceof HTMLElement) {
-      return getHTMLElementDetails(val);
-    } else if (((_a9 = val.constructor) == null ? void 0 : _a9.name) === "Store" && val._wrappedGetters) {
-      return "[object Store]";
-    } else if (val.currentRoute) {
-      return "[object Router]";
+  const targetPath = path.slice();
+  let target9;
+  if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) {
+    target9 = instance.devtoolsRawSetupState;
+  }
+  if (target9 && targetPath) {
+    if (state.type === "object" && type === "reactive") {
     }
-    const customDetails = getObjectDetails(val);
-    if (customDetails != null)
-      return customDetails;
-  } else if (Number.isNaN(val)) {
-    return NAN;
+    stateEditor2.set(target9, targetPath, state.value, stateEditor2.createDefaultSetCallback(state));
   }
-  return sanitize(val);
+}
+var stateEditor = new StateEditor();
+async function editState(payload) {
+  editComponentState(payload, stateEditor);
 }
 
-// src/core/component/state/reviver.ts
+// src/core/component/state/index.ts
+init_cjs_shims();
+
+// src/core/component/state/process.ts
 init_cjs_shims();
 var import_devtools_shared6 = require("@vue/devtools-shared");
-function reviveSet(val) {
-  const result = /* @__PURE__ */ new Set();
-  const list = val._custom.value;
-  for (let i = 0; i < list.length; i++) {
-    const value = list[i];
-    result.add(revive(value));
-  }
-  return result;
+
+// src/core/component/state/constants.ts
+init_cjs_shims();
+var vueBuiltins = /* @__PURE__ */ new Set([
+  "nextTick",
+  "defineComponent",
+  "defineAsyncComponent",
+  "defineCustomElement",
+  "ref",
+  "computed",
+  "reactive",
+  "readonly",
+  "watchEffect",
+  "watchPostEffect",
+  "watchSyncEffect",
+  "watch",
+  "isRef",
+  "unref",
+  "toRef",
+  "toRefs",
+  "isProxy",
+  "isReactive",
+  "isReadonly",
+  "shallowRef",
+  "triggerRef",
+  "customRef",
+  "shallowReactive",
+  "shallowReadonly",
+  "toRaw",
+  "markRaw",
+  "effectScope",
+  "getCurrentScope",
+  "onScopeDispose",
+  "onMounted",
+  "onUpdated",
+  "onUnmounted",
+  "onBeforeMount",
+  "onBeforeUpdate",
+  "onBeforeUnmount",
+  "onErrorCaptured",
+  "onRenderTracked",
+  "onRenderTriggered",
+  "onActivated",
+  "onDeactivated",
+  "onServerPrefetch",
+  "provide",
+  "inject",
+  "h",
+  "mergeProps",
+  "cloneVNode",
+  "isVNode",
+  "resolveComponent",
+  "resolveDirective",
+  "withDirectives",
+  "withModifiers"
+]);
+var symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/;
+var rawTypeRE = /^\[object (\w+)]$/;
+var specialTypeRE = /^\[native (\w+) (.*?)(<>((.|\s)*))?\]$/;
+var fnTypeRE = /^(?:function|class) (\w+)/;
+var MAX_STRING_SIZE = 1e4;
+var MAX_ARRAY_SIZE = 5e3;
+var UNDEFINED = "__vue_devtool_undefined__";
+var INFINITY = "__vue_devtool_infinity__";
+var NEGATIVE_INFINITY = "__vue_devtool_negative_infinity__";
+var NAN = "__vue_devtool_nan__";
+var ESC = {
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "&": "&amp;"
+};
+
+// src/core/component/state/util.ts
+init_cjs_shims();
+
+// src/core/component/state/is.ts
+init_cjs_shims();
+function isVueInstance(value) {
+  return value._ && Object.keys(value._).includes("vnode");
 }
-function reviveMap(val) {
-  const result = /* @__PURE__ */ new Map();
-  const list = val._custom.value;
-  for (let i = 0; i < list.length; i++) {
-    const { key, value } = list[i];
-    result.set(key, revive(value));
-  }
-  return result;
+function isPlainObject(obj) {
+  return Object.prototype.toString.call(obj) === "[object Object]";
 }
-function revive(val) {
-  var _a9;
-  if (val === UNDEFINED) {
-    return void 0;
-  } else if (val === INFINITY) {
-    return Number.POSITIVE_INFINITY;
-  } else if (val === NEGATIVE_INFINITY) {
-    return Number.NEGATIVE_INFINITY;
-  } else if (val === NAN) {
-    return Number.NaN;
-  } else if (val && val._custom) {
-    const { _custom: custom } = val;
-    if (custom.type === "component")
-      return (_a9 = devtoolsContext.appRecord) == null ? void 0 : _a9.instanceMap.get(custom.id);
-    else if (custom.type === "map")
-      return reviveMap(val);
-    else if (custom.type === "set")
-      return reviveSet(val);
-    else if (custom.type === "bigint")
-      return BigInt(custom.value);
-    else
-      return revive(custom.value);
-  } else if (symbolRE.test(val)) {
-    const [, string] = symbolRE.exec(val);
-    return Symbol.for(string);
-  } else if (specialTypeRE.test(val)) {
-    const [, type, string, , details] = specialTypeRE.exec(val);
-    const result = new import_devtools_shared6.target[type](string);
-    if (type === "Error" && details)
-      result.stack = details;
-    return result;
-  } else {
-    return val;
-  }
+function isPrimitive(data) {
+  if (data == null)
+    return true;
+  const type = typeof data;
+  return type === "string" || type === "number" || type === "boolean";
 }
-function reviver(key, value) {
-  return revive(value);
+function isRef2(raw) {
+  return !!raw.__v_isRef;
 }
-
-// src/shared/transfer.ts
-init_cjs_shims();
-var MAX_SERIALIZED_SIZE = 512 * 1024;
-function encode(data, replacer, list, seen) {
-  let stored, key, value, i, l;
-  const seenIndex = seen.get(data);
-  if (seenIndex != null)
-    return seenIndex;
-  const index = list.length;
-  const proto = Object.prototype.toString.call(data);
-  if (proto === "[object Object]") {
-    stored = {};
-    seen.set(data, index);
-    list.push(stored);
-    const keys = Object.keys(data);
-    for (i = 0, l = keys.length; i < l; i++) {
-      key = keys[i];
-      try {
-        if (key === "compilerOptions")
-          return;
-        value = data[key];
-        if (replacer)
-          value = replacer.call(data, key, value);
-      } catch (e) {
-        value = e;
-      }
-      stored[key] = encode(value, replacer, list, seen);
-    }
-  } else if (proto === "[object Array]") {
-    stored = [];
-    seen.set(data, index);
-    list.push(stored);
-    for (i = 0, l = data.length; i < l; i++) {
-      try {
-        value = data[i];
-        if (replacer)
-          value = replacer.call(data, i, value);
-      } catch (e) {
-        value = e;
-      }
-      stored[i] = encode(value, replacer, list, seen);
-    }
-  } else {
-    list.push(data);
-  }
-  return index;
+function isComputed(raw) {
+  return isRef2(raw) && !!raw.effect;
 }
-function decode(list, reviver2 = null) {
-  let i = list.length;
-  let j, k, data, key, value, proto;
-  while (i--) {
-    data = list[i];
-    proto = Object.prototype.toString.call(data);
-    if (proto === "[object Object]") {
-      const keys = Object.keys(data);
-      for (j = 0, k = keys.length; j < k; j++) {
-        key = keys[j];
-        value = list[data[key]];
-        if (reviver2)
-          value = reviver2.call(data, key, value);
-        data[key] = value;
-      }
-    } else if (proto === "[object Array]") {
-      for (j = 0, k = data.length; j < k; j++) {
-        value = list[data[j]];
-        if (reviver2)
-          value = reviver2.call(data, j, value);
-        data[j] = value;
-      }
-    }
-  }
+function isReactive2(raw) {
+  return !!raw.__v_isReactive;
 }
-function stringifyCircularAutoChunks(data, replacer = null, space = null) {
-  let result;
-  try {
-    result = arguments.length === 1 ? JSON.stringify(data) : JSON.stringify(data, replacer, space);
-  } catch (e) {
-    result = stringifyStrictCircularAutoChunks(data, replacer, space);
-  }
-  if (result.length > MAX_SERIALIZED_SIZE) {
-    const chunkCount = Math.ceil(result.length / MAX_SERIALIZED_SIZE);
-    const chunks = [];
-    for (let i = 0; i < chunkCount; i++)
-      chunks.push(result.slice(i * MAX_SERIALIZED_SIZE, (i + 1) * MAX_SERIALIZED_SIZE));
-    return chunks;
-  }
-  return result;
+function isReadOnly(raw) {
+  return !!raw.__v_isReadonly;
 }
-function stringifyStrictCircularAutoChunks(data, replacer = null, space = null) {
-  const list = [];
-  encode(data, replacer, list, /* @__PURE__ */ new Map());
-  return space ? ` ${JSON.stringify(list, null, space)}` : ` ${JSON.stringify(list)}`;
+
+// src/core/component/state/util.ts
+var tokenMap = {
+  [UNDEFINED]: "undefined",
+  [NAN]: "NaN",
+  [INFINITY]: "Infinity",
+  [NEGATIVE_INFINITY]: "-Infinity"
+};
+var reversedTokenMap = Object.entries(tokenMap).reduce((acc, [key, value]) => {
+  acc[value] = key;
+  return acc;
+}, {});
+function internalStateTokenToString(value) {
+  if (value === null)
+    return "null";
+  return typeof value === "string" && tokenMap[value] || false;
 }
-function parseCircularAutoChunks(data, reviver2 = null) {
-  if (Array.isArray(data))
-    data = data.join("");
-  const hasCircular = /^\s/.test(data);
-  if (!hasCircular) {
-    return arguments.length === 1 ? JSON.parse(data) : JSON.parse(data, reviver2);
-  } else {
-    const list = JSON.parse(data);
-    decode(list, reviver2);
-    return list[0];
-  }
+function replaceTokenToString(value) {
+  const replaceRegex = new RegExp(`"(${Object.keys(tokenMap).join("|")})"`, "g");
+  return value.replace(replaceRegex, (_, g1) => tokenMap[g1]);
 }
-
-// src/core/component/state/format.ts
-init_cjs_shims();
-function getInspectorStateValueType(value, raw = true) {
-  const type = typeof value;
-  if (value == null || value === UNDEFINED) {
+function replaceStringToToken(value) {
+  const literalValue = reversedTokenMap[value.trim()];
+  if (literalValue)
+    return `"${literalValue}"`;
+  const replaceRegex = new RegExp(`:\\s*(${Object.keys(reversedTokenMap).join("|")})`, "g");
+  return value.replace(replaceRegex, (_, g1) => `:"${reversedTokenMap[g1]}"`);
+}
+function getPropType(type) {
+  if (Array.isArray(type))
+    return type.map((t) => getPropType(t)).join(" or ");
+  if (type == null)
     return "null";
-  } else if (type === "boolean" || type === "number" || value === INFINITY || value === NEGATIVE_INFINITY || value === NAN) {
-    return "literal";
-  } else if (value == null ? void 0 : value._custom) {
-    if (raw || value._custom.display != null || value._custom.displayText != null)
-      return "custom";
-    else
-      return getInspectorStateValueType(value._custom.value);
-  } else if (typeof value === "string") {
-    const typeMatch = specialTypeRE.exec(value);
-    if (typeMatch) {
-      const [, type2] = typeMatch;
-      return `native ${type2}`;
-    } else {
-      return "string";
-    }
-  } else if (Array.isArray(value) || (value == null ? void 0 : value._isArray)) {
-    return "array";
-  } else if (isPlainObject(value)) {
-    return "plain-object";
-  } else {
-    return "unknown";
-  }
+  const match = type.toString().match(fnTypeRE);
+  return typeof type === "function" ? match && match[1] || "any" : "any";
 }
-function formatInspectorStateValue(value, quotes = false) {
-  var _a9, _b9;
-  let result;
-  const type = getInspectorStateValueType(value, false);
-  if (type !== "custom" && (value == null ? void 0 : value._custom))
-    value = value._custom.value;
-  if (result = internalStateTokenToString(value)) {
-    return result;
-  } else if (type === "custom") {
-    const nestedName = ((_a9 = value._custom.value) == null ? void 0 : _a9._custom) && formatInspectorStateValue(value._custom.value);
-    return nestedName || value._custom.displayText || value._custom.display;
-  } else if (type === "array") {
-    return `Array[${value.length}]`;
-  } else if (type === "plain-object") {
-    return `Object${Object.keys(value).length ? "" : " (empty)"}`;
-  } else if (type == null ? void 0 : type.includes("native")) {
-    return escape((_b9 = specialTypeRE.exec(value)) == null ? void 0 : _b9[2]);
-  } else if (typeof value === "string") {
-    const typeMatch = value.match(rawTypeRE);
-    if (typeMatch)
-      value = escape(typeMatch[1]);
-    else if (quotes)
-      value = `<span>"</span>${escape(value)}<span>"</span>`;
-    else
-      value = escape(value);
-    value = value.replace(/ /g, "&nbsp;").replace(/\n/g, "<span>\\n</span>");
+function sanitize(data) {
+  if (!isPrimitive(data) && !Array.isArray(data) && !isPlainObject(data)) {
+    return Object.prototype.toString.call(data);
+  } else {
+    return data;
   }
-  return value;
 }
-function getRawValue(value) {
-  var _a9, _b9;
-  const isCustom = getInspectorStateValueType(value) === "custom";
-  let inherit = {};
-  if (isCustom) {
-    const data = value;
-    const customValue = (_a9 = data._custom) == null ? void 0 : _a9.value;
-    const nestedCustom = typeof customValue === "object" && customValue !== null && "_custom" in customValue ? getRawValue(customValue) : { inherit: void 0, value: void 0 };
-    inherit = nestedCustom.inherit || ((_b9 = data._custom) == null ? void 0 : _b9.fields) || {};
-    value = nestedCustom.value || customValue;
-  }
-  if (value && value._isArray)
-    value = value.items;
-  return { value, inherit };
+function getSetupStateType(raw) {
+  return {
+    ref: isRef2(raw),
+    computed: isComputed(raw),
+    reactive: isReactive2(raw),
+    readonly: isReadOnly(raw)
+  };
 }
-function toEdit(value) {
-  return replaceTokenToString(JSON.stringify(value));
+function toRaw2(value) {
+  if (value == null ? void 0 : value.__v_raw)
+    return value.__v_raw;
+  return value;
 }
-function toSubmit(value) {
-  return JSON.parse(replaceStringToToken(value), reviver);
+function escape(s) {
+  return s.replace(/[<>"&]/g, (s2) => {
+    return ESC[s2] || s2;
+  });
 }
 
-// src/shared/util.ts
-function stringify(data) {
-  return stringifyCircularAutoChunks(data, stringifyReplacer);
+// src/core/component/state/process.ts
+function mergeOptions(to, from, instance) {
+  if (typeof from === "function")
+    from = from.options;
+  if (!from)
+    return to;
+  const { mixins, extends: extendsOptions } = from;
+  extendsOptions && mergeOptions(to, extendsOptions, instance);
+  mixins && mixins.forEach(
+    (m) => mergeOptions(to, m, instance)
+  );
+  for (const key of ["computed", "inject"]) {
+    if (Object.prototype.hasOwnProperty.call(from, key)) {
+      if (!to[key])
+        to[key] = from[key];
+      else
+        Object.assign(to[key], from[key]);
+    }
+  }
+  return to;
 }
-function parse(data, revive2 = false) {
-  if (data == void 0)
-    return {};
-  return revive2 ? parseCircularAutoChunks(data, reviver) : parseCircularAutoChunks(data);
+function resolveMergedOptions(instance) {
+  const raw = instance.type;
+  const { mixins, extends: extendsOptions } = raw;
+  const globalMixins = instance.appContext.mixins;
+  if (!globalMixins.length && !mixins && !extendsOptions)
+    return raw;
+  const options = {};
+  globalMixins.forEach((m) => mergeOptions(options, m, instance));
+  mergeOptions(options, raw, instance);
+  return options;
 }
-
-// src/shared/time.ts
-init_cjs_shims();
-function now() {
-  return Date.now();
-}
-
-// src/shared/env.ts
-init_cjs_shims();
-
-// src/core/general/inspector.ts
-init_cjs_shims();
-function addInspector(payload) {
-  devtoolsContext.inspector.push(payload);
-}
-function getInspector(inspectorId) {
-  return devtoolsContext.inspector.find((inspector) => inspector.id === inspectorId);
-}
-function updateInspector(inspectorId, payload) {
-  const inspector = getInspector(inspectorId);
-  inspector && Object.assign(inspector, payload);
-}
-
-// src/core/timeline/index.ts
-init_cjs_shims();
-function addTimelineLayer(payload) {
-  devtoolsContext.timelineLayer.push(payload);
-}
-
-// src/core/component/state/editor.ts
-init_cjs_shims();
-var import_vue2 = require("vue");
-
-// src/core/component/general/index.ts
-init_cjs_shims();
-
-// src/core/component/state/editor.ts
-var StateEditor = class {
-  constructor() {
-    this.refEditor = new RefStateEditor();
-  }
-  set(object, path, value, cb) {
-    const sections = Array.isArray(path) ? path : path.split(".");
-    const markRef = false;
-    while (sections.length > 1) {
-      const section = sections.shift();
-      object = object[section];
-      if (this.refEditor.isRef(object))
-        object = this.refEditor.get(object);
-    }
-    const field = sections[0];
-    const item = this.refEditor.get(object)[field];
-    if (cb) {
-      cb(object, field, value);
-    } else {
-      if (this.refEditor.isRef(item))
-        this.refEditor.set(item, value);
-      else if (markRef)
-        object[field] = value;
-      else
-        object[field] = value;
-    }
-  }
-  get(object, path) {
-    const sections = Array.isArray(path) ? path : path.split(".");
-    for (let i = 0; i < sections.length; i++) {
-      object = object[sections[i]];
-      if (this.refEditor.isRef(object))
-        object = this.refEditor.get(object);
-      if (!object)
-        return void 0;
-    }
-    return object;
-  }
-  has(object, path, parent = false) {
-    if (typeof object === "undefined")
-      return false;
-    const sections = Array.isArray(path) ? path.slice() : path.split(".");
-    const size = !parent ? 1 : 2;
-    while (object && sections.length > size) {
-      const section = sections.shift();
-      object = object[section];
-      if (this.refEditor.isRef(object))
-        object = this.refEditor.get(object);
-    }
-    return object != null && Object.prototype.hasOwnProperty.call(object, sections[0]);
-  }
-  createDefaultSetCallback(state) {
-    return (object, field, value) => {
-      if (state.remove || state.newKey) {
-        if (Array.isArray(object))
-          object.splice(field, 1);
-        else if ((0, import_vue2.toRaw)(object) instanceof Map && typeof value === "object" && value && "key" in value)
-          object.delete(value.key);
-        else if ((0, import_vue2.toRaw)(object) instanceof Set)
-          object.delete(value);
-        else
-          Reflect.deleteProperty(object, field);
-      }
-      if (!state.remove) {
-        const target8 = object[state.newKey || field];
-        if (this.refEditor.isRef(target8))
-          this.refEditor.set(target8, value);
-        else
-          object[state.newKey || field] = value;
-      }
-    };
-  }
-};
-var RefStateEditor = class {
-  set(ref, value) {
-    if ((0, import_vue2.isRef)(ref)) {
-      ref.value = value;
-    } else {
-      const previousKeys = Object.keys(ref);
-      const currentKeys = Object.keys(value);
-      if (previousKeys.length > currentKeys.length) {
-        const diffKeys = previousKeys.filter((key) => !currentKeys.includes(key));
-        diffKeys.forEach((key) => Reflect.deleteProperty(ref, key));
-      }
-      currentKeys.forEach((key) => {
-        Reflect.set(ref, key, Reflect.get(value, key));
-      });
-    }
-  }
-  get(ref) {
-    return (0, import_vue2.isRef)(ref) ? ref.value : ref;
-  }
-  isRef(ref) {
-    return (0, import_vue2.isRef)(ref) || (0, import_vue2.isReactive)(ref);
-  }
-};
-async function editComponentState(payload, stateEditor2) {
-  const { path, nodeId, state, type } = payload;
-  const instance = getComponentInstance(devtoolsContext.appRecord, nodeId);
-  if (!instance)
-    return;
-  const targetPath = path.slice();
-  let target8;
-  if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) {
-    target8 = instance.devtoolsRawSetupState;
-  }
-  if (target8 && targetPath) {
-    if (state.type === "object" && type === "reactive") {
-    }
-    stateEditor2.set(target8, targetPath, state.value, stateEditor2.createDefaultSetCallback(state));
+function processProps(instance) {
+  const props = [];
+  const propDefinitions = instance.type.props;
+  for (const key in instance.props) {
+    const propDefinition = propDefinitions ? propDefinitions[key] : null;
+    const camelizeKey = (0, import_devtools_shared6.camelize)(key);
+    props.push({
+      type: "props",
+      key: camelizeKey,
+      value: returnError(() => instance.props[key]),
+      meta: propDefinition ? {
+        type: propDefinition.type ? getPropType(propDefinition.type) : "any",
+        required: !!propDefinition.required,
+        ...propDefinition.default ? {
+          default: propDefinition.default.toString()
+        } : {}
+      } : { type: "invalid" }
+    });
   }
+  return props;
 }
-var stateEditor = new StateEditor();
-async function editState(payload) {
-  editComponentState(payload, stateEditor);
-}
-
-// src/core/open-in-editor/index.ts
-init_cjs_shims();
-var import_devtools_shared7 = require("@vue/devtools-shared");
-function openInEditor(options = {}) {
-  const { file, line = 0, column = 0 } = options;
-  if (file) {
-    const baseUrl = window.location.origin;
-    if (import_devtools_shared7.target.__VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__) {
-      import_devtools_shared7.target.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column);
-    } else {
-    }
-  }
+function processState(instance) {
+  const type = instance.type;
+  const props = type.props;
+  const getters = type.vuex && type.vuex.getters;
+  const computedDefs = type.computed;
+  const data = {
+    ...instance.data,
+    ...instance.renderContext
+  };
+  return Object.keys(data).filter((key) => !(props && key in props) && !(getters && key in getters) && !(computedDefs && key in computedDefs)).map((key) => ({
+    key,
+    type: "data",
+    value: returnError(() => data[key]),
+    editable: true
+  }));
 }
-
-// src/core/general/app-record.ts
-init_cjs_shims();
-
-// src/core/plugins/index.ts
-init_cjs_shims();
-
-// src/core/plugins/components.ts
-init_cjs_shims();
-var import_perfect_debounce3 = require("perfect-debounce");
-
-// src/api/plugin.ts
-init_cjs_shims();
-var import_devtools_schema2 = require("@vue/devtools-schema");
-function collectRegisteredPlugin(pluginDescriptor, setupFn) {
-  devtoolsState.pluginBuffer.push([pluginDescriptor, setupFn]);
+function getStateTypeAndName(info) {
+  const stateType = info.computed ? "computed" : info.ref ? "ref" : info.reactive ? "reactive" : null;
+  const stateTypeName = stateType ? `${stateType.charAt(0).toUpperCase()}${stateType.slice(1)}` : null;
+  return {
+    stateType,
+    stateTypeName
+  };
 }
-async function registerPlugin(options) {
-  const { app, api } = options;
-  const plugins = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.app === app);
-  plugins.forEach(async ([plugin, setupFn]) => {
-    if (plugin.packageName === "vue-query") {
-      return;
-    }
-    const appRecord = await getAppRecord(plugin.app);
-    if (plugin.packageName === "vue-router") {
-      const id = getRouterDevToolsId(`${plugin.id}`);
-      if (plugin.app === app) {
-        devtoolsState.appRecords = devtoolsState.appRecords.map((item) => ({
-          ...item,
-          routerId: id
-        }));
-      }
+function processSetupState(instance) {
+  const raw = instance.devtoolsRawSetupState || {};
+  return Object.keys(instance.setupState).filter((key) => !vueBuiltins.has(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
+    var _a10, _b10, _c, _d;
+    const value = returnError(() => toRaw2(instance.setupState[key]));
+    const rawData = raw[key];
+    let result;
+    let isOtherType = typeof value === "function" || typeof (value == null ? void 0 : value.render) === "function" || typeof (value == null ? void 0 : value.__asyncLoader) === "function";
+    if (rawData) {
+      const info = getSetupStateType(rawData);
+      const { stateType, stateTypeName } = getStateTypeAndName(info);
+      const isState = info.ref || info.computed || info.reactive;
+      const raw2 = ((_b10 = (_a10 = rawData.effect) == null ? void 0 : _a10.raw) == null ? void 0 : _b10.toString()) || ((_d = (_c = rawData.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
+      if (stateType)
+        isOtherType = false;
+      result = {
+        ...stateType ? { stateType, stateTypeName } : {},
+        ...raw2 ? { raw: raw2 } : {},
+        editable: isState && !info.readonly
+      };
     }
-    setupFn(api);
-  });
-  devtoolsState.appRecords = devtoolsState.appRecords.map((record) => {
-    var _a9, _b9;
-    const globalProperties = (_b9 = (_a9 = record.app) == null ? void 0 : _a9.config) == null ? void 0 : _b9.globalProperties;
-    if (!globalProperties)
-      return record;
+    const type = isOtherType ? "setup (other)" : "setup";
     return {
-      ...record,
-      moduleDetectives: {
-        vueRouter: !!globalProperties.$router,
-        pinia: !!globalProperties.$pinia,
-        vueI18n: !!globalProperties.$i18n
-      }
+      key,
+      value,
+      type,
+      // @ts-expect-error ignore
+      ...result
     };
   });
 }
-function setupDevToolsPlugin(pluginDescriptor, setupFn) {
-  return devtoolsHooks.callHook(import_devtools_schema2.DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
+function processComputed(instance, mergedType) {
+  const type = mergedType;
+  const computed = [];
+  const defs = type.computed || {};
+  for (const key in defs) {
+    const def = defs[key];
+    const type2 = typeof def === "function" && def.vuex ? "vuex bindings" : "computed";
+    computed.push({
+      type: type2,
+      key,
+      value: returnError(() => {
+        var _a10;
+        return (_a10 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a10[key];
+      }),
+      editable: typeof def.set === "function"
+    });
+  }
+  return computed;
 }
-
-// src/core/component/tree/walker.ts
-init_cjs_shims();
-
-// src/core/component/tree/el.ts
-init_cjs_shims();
-function getRootElementsFromComponentInstance(instance) {
-  if (isFragment(instance))
-    return getFragmentRootElements(instance.subTree);
-  if (!instance.subTree)
-    return [];
-  return [instance.subTree.el];
+function processAttrs(instance) {
+  return Object.keys(instance.attrs).map((key) => ({
+    type: "attrs",
+    key,
+    value: returnError(() => instance.attrs[key])
+  }));
 }
-function getFragmentRootElements(vnode) {
-  if (!vnode.children)
-    return [];
-  const list = [];
-  vnode.children.forEach((childVnode) => {
-    if (childVnode.component)
-      list.push(...getRootElementsFromComponentInstance(childVnode.component));
-    else if (childVnode == null ? void 0 : childVnode.el)
-      list.push(childVnode.el);
-  });
-  return list;
+function processProvide(instance) {
+  return Reflect.ownKeys(instance.provides).map((key) => ({
+    type: "provided",
+    key: key.toString(),
+    value: returnError(() => instance.provides[key])
+  }));
 }
-
-// src/core/component/tree/filter.ts
-init_cjs_shims();
-var import_devtools_shared8 = require("@vue/devtools-shared");
-var ComponentFilter = class {
-  constructor(filter) {
-    this.filter = filter || "";
-  }
-  /**
-   * Check if an instance is qualified.
-   *
-   * @param {Vue|Vnode} instance
-   * @return {boolean}
-   */
-  isQualified(instance) {
-    const name = getInstanceName(instance);
-    return (0, import_devtools_shared8.classify)(name).toLowerCase().includes(this.filter) || (0, import_devtools_shared8.kebabize)(name).toLowerCase().includes(this.filter);
+function processInject(instance, mergedType) {
+  if (!(mergedType == null ? void 0 : mergedType.inject))
+    return [];
+  let keys = [];
+  let defaultValue;
+  if (Array.isArray(mergedType.inject)) {
+    keys = mergedType.inject.map((key) => ({
+      key,
+      originalKey: key
+    }));
+  } else {
+    keys = Reflect.ownKeys(mergedType.inject).map((key) => {
+      const value = mergedType.inject[key];
+      let originalKey;
+      if (typeof value === "string" || typeof value === "symbol") {
+        originalKey = value;
+      } else {
+        originalKey = value.from;
+        defaultValue = value.default;
+      }
+      return {
+        key,
+        originalKey
+      };
+    });
   }
-};
-function createComponentFilter(filterText) {
-  return new ComponentFilter(filterText);
+  return keys.map(({ key, originalKey }) => ({
+    type: "injected",
+    key: originalKey && key !== originalKey ? `${originalKey.toString()} \u279E ${key.toString()}` : key.toString(),
+    // eslint-disable-next-line no-prototype-builtins
+    value: returnError(() => instance.ctx.hasOwnProperty(key) ? instance.ctx[key] : instance.provides.hasOwnProperty(originalKey) ? instance.provides[originalKey] : defaultValue)
+  }));
 }
-
-// src/core/component/tree/walker.ts
-var ComponentWalker = class {
-  constructor(options) {
-    // Dedupe instances (Some instances may be both on a component and on a child abstract/functional component)
-    this.captureIds = /* @__PURE__ */ new Map();
-    const { filterText = "", maxDepth, recursively } = options;
-    this.componentFilter = createComponentFilter(filterText);
-    this.maxDepth = maxDepth;
-    this.recursively = recursively;
-  }
-  getComponentTree(instance) {
-    this.captureIds = /* @__PURE__ */ new Map();
-    return this.findQualifiedChildren(instance, 0);
-  }
-  getComponentParents(instance) {
-    this.captureIds = /* @__PURE__ */ new Map();
-    const parents = [];
-    this.captureId(instance);
-    let parent = instance;
-    while (parent = parent.parent) {
-      this.captureId(parent);
-      parents.push(parent);
+function processRefs(instance) {
+  return Object.keys(instance.refs).map((key) => ({
+    type: "refs",
+    key,
+    value: returnError(() => instance.refs[key])
+  }));
+}
+function processEventListeners(instance) {
+  var _a10;
+  const emitsDefinition = instance.type.emits;
+  const declaredEmits = Array.isArray(emitsDefinition) ? emitsDefinition : Object.keys(emitsDefinition != null ? emitsDefinition : {});
+  const keys = Object.keys((_a10 = instance.vnode.props) != null ? _a10 : {});
+  const result = [];
+  for (const key of keys) {
+    const [prefix, ...eventNameParts] = key.split(/(?=[A-Z])/);
+    if (prefix === "on") {
+      const eventName = eventNameParts.join("-").toLowerCase();
+      const isDeclared = declaredEmits.includes(eventName);
+      result.push({
+        type: "event listeners",
+        key: eventName,
+        value: {
+          _custom: {
+            displayText: isDeclared ? "\u2705 Declared" : "\u26A0\uFE0F Not declared",
+            key: isDeclared ? "\u2705 Declared" : "\u26A0\uFE0F Not declared",
+            value: isDeclared ? "\u2705 Declared" : "\u26A0\uFE0F Not declared",
+            tooltipText: !isDeclared ? `The event <code>${eventName}</code> is not declared in the <code>emits</code> option. It will leak into the component's attributes (<code>$attrs</code>).` : null
+          }
+        }
+      });
     }
-    return parents;
   }
-  captureId(instance) {
-    if (!instance)
-      return null;
-    const id = instance.__VUE_DEVTOOLS_UID__ != null ? instance.__VUE_DEVTOOLS_UID__ : getUniqueComponentId(instance);
-    instance.__VUE_DEVTOOLS_UID__ = id;
-    if (this.captureIds.has(id))
-      return null;
-    else
-      this.captureIds.set(id, void 0);
-    this.mark(instance);
-    return id;
-  }
-  /**
-   * Capture the meta information of an instance. (recursive)
-   *
-   * @param {Vue} instance
-   * @return {object}
-   */
-  async capture(instance, depth) {
-    var _a9;
-    if (!instance)
-      return null;
-    const id = this.captureId(instance);
-    const name = getInstanceName(instance);
-    const children = this.getInternalInstanceChildren(instance.subTree).filter((child) => !isBeingDestroyed(child));
-    const parents = this.getComponentParents(instance) || [];
-    const inactive = !!instance.isDeactivated || parents.some((parent) => parent.isDeactivated);
-    const treeNode = {
-      uid: instance.uid,
-      id,
-      name,
-      renderKey: getRenderKey(instance.vnode ? instance.vnode.key : null),
-      inactive,
-      children: [],
-      isFragment: isFragment(instance),
-      tags: typeof instance.type !== "function" ? [] : [
-        {
-          label: "functional",
-          textColor: 5592405,
-          backgroundColor: 15658734
+  return result;
+}
+function processInstanceState(instance) {
+  const mergedType = resolveMergedOptions(instance);
+  return processProps(instance).concat(
+    processState(instance),
+    processSetupState(instance),
+    processComputed(instance, mergedType),
+    processAttrs(instance),
+    processProvide(instance),
+    processInject(instance, mergedType),
+    processRefs(instance),
+    processEventListeners(instance)
+  );
+}
+
+// src/core/component/state/index.ts
+function getInstanceState(params) {
+  var _a10;
+  const instance = getComponentInstance(devtoolsContext.appRecord, params.instanceId);
+  const id = getUniqueComponentId(instance);
+  const name = getInstanceName(instance);
+  const file = (_a10 = instance == null ? void 0 : instance.type) == null ? void 0 : _a10.__file;
+  const state = processInstanceState(instance);
+  return {
+    id,
+    name,
+    file,
+    state,
+    instance
+  };
+}
+
+// src/plugins/component.ts
+var INSPECTOR_ID = "components";
+function registerComponentDevToolsPlugin(app) {
+  setupDevToolsPlugin({
+    id: INSPECTOR_ID,
+    label: "Components",
+    app
+  }, (api) => {
+    api.addInspector({
+      id: INSPECTOR_ID,
+      label: "Components",
+      treeFilterPlaceholder: "Search components"
+    });
+    api.on.getComponentBoundingRect((payload) => {
+      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+        const instance = getComponentInstance(devtoolsContext.appRecord, payload.instanceId);
+        if (instance) {
+          if (typeof DOMRect === "undefined")
+            return;
+          payload.rect = getComponentBoundingRect(instance);
+          if (payload.rect instanceof DOMRect) {
+            payload.rect = {
+              top: payload.rect.top,
+              left: payload.rect.left,
+              right: payload.rect.right,
+              bottom: payload.rect.bottom,
+              width: payload.rect.width,
+              height: payload.rect.height
+            };
+          }
         }
-      ],
-      autoOpen: this.recursively,
-      file: instance.type.__file || ""
-    };
-    if (depth < this.maxDepth || instance.type.__isKeepAlive || parents.some((parent) => parent.type.__isKeepAlive)) {
-      treeNode.children = await Promise.all(children.map((child) => this.capture(child, depth + 1)).filter(Boolean));
-    }
-    if (this.isKeepAlive(instance)) {
-      const cachedComponents = this.getKeepAliveCachedInstances(instance);
-      const childrenIds = children.map((child) => child.__VUE_DEVTOOLS_UID__);
-      for (const cachedChild of cachedComponents) {
-        if (!childrenIds.includes(cachedChild.__VUE_DEVTOOLS_UID__)) {
-          const node = await this.capture({ ...cachedChild, isDeactivated: true }, depth + 1);
-          if (node)
-            treeNode.children.push(node);
+      }
+    });
+    api.on.getInspectorTree(async (payload) => {
+      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+        const instance = getComponentInstance(devtoolsContext.appRecord, payload.instanceId);
+        if (instance) {
+          const walker = new ComponentWalker({
+            filterText: payload.filter,
+            // @TODO: should make this configurable?
+            maxDepth: 100,
+            recursively: false
+          });
+          payload.rootNodes = await walker.getComponentTree(instance);
         }
       }
-    }
-    const rootElements = getRootElementsFromComponentInstance(instance);
-    const firstElement = rootElements[0];
-    if (firstElement == null ? void 0 : firstElement.parentElement) {
-      const parentInstance = instance.parent;
-      const parentRootElements = parentInstance ? getRootElementsFromComponentInstance(parentInstance) : [];
-      let el = firstElement;
-      const indexList = [];
-      do {
-        indexList.push(Array.from(el.parentElement.childNodes).indexOf(el));
-        el = el.parentElement;
-      } while (el.parentElement && parentRootElements.length && !parentRootElements.includes(el));
-      treeNode.domOrder = indexList.reverse();
-    } else {
-      treeNode.domOrder = [-1];
-    }
-    if ((_a9 = instance.suspense) == null ? void 0 : _a9.suspenseKey) {
-      treeNode.tags.push({
-        label: instance.suspense.suspenseKey,
-        backgroundColor: 14979812,
-        textColor: 16777215
-      });
-      this.mark(instance, true);
-    }
-    devtoolsContext.api.visitComponentTree({
-      treeNode,
-      componentInstance: instance,
-      app: instance.appContext.app,
-      filter: this.componentFilter.filter
-    });
-    return treeNode;
-  }
-  /**
-   * Find qualified children from a single instance.
-   * If the instance itself is qualified, just return itself.
-   * This is ok because [].concat works in both cases.
-   *
-   * @param {Vue|Vnode} instance
-   * @return {Vue|Array}
-   */
-  async findQualifiedChildren(instance, depth) {
-    var _a9;
-    if (this.componentFilter.isQualified(instance) && !((_a9 = instance.type.devtools) == null ? void 0 : _a9.hide)) {
-      return [await this.capture(instance, depth)];
-    } else if (instance.subTree) {
-      const list = this.isKeepAlive(instance) ? this.getKeepAliveCachedInstances(instance) : this.getInternalInstanceChildren(instance.subTree);
-      return this.findQualifiedChildrenFromList(list, depth);
-    } else {
-      return [];
-    }
-  }
-  /**
-   * Iterate through an array of instances and flatten it into
-   * an array of qualified instances. This is a depth-first
-   * traversal - e.g. if an instance is not matched, we will
-   * recursively go deeper until a qualified child is found.
-   *
-   * @param {Array} instances
-   * @return {Array}
-   */
-  async findQualifiedChildrenFromList(instances, depth) {
-    instances = instances.filter((child) => {
-      var _a9;
-      return !isBeingDestroyed(child) && !((_a9 = child.type.devtools) == null ? void 0 : _a9.hide);
     });
-    if (!this.componentFilter.filter)
-      return Promise.all(instances.map((child) => this.capture(child, depth)));
-    else
-      return Array.prototype.concat.apply([], await Promise.all(instances.map((i) => this.findQualifiedChildren(i, depth))));
-  }
-  /**
-   * Get children from a component instance.
-   */
-  getInternalInstanceChildren(subTree, suspense = null) {
-    const list = [];
-    if (subTree) {
-      if (subTree.component) {
-        !suspense ? list.push(subTree.component) : list.push({ ...subTree.component, suspense });
-      } else if (subTree.suspense) {
-        const suspenseKey = !subTree.suspense.isInFallback ? "suspense default" : "suspense fallback";
-        list.push(...this.getInternalInstanceChildren(subTree.suspense.activeBranch, { ...subTree.suspense, suspenseKey }));
-      } else if (Array.isArray(subTree.children)) {
-        subTree.children.forEach((childSubTree) => {
-          if (childSubTree.component)
-            !suspense ? list.push(childSubTree.component) : list.push({ ...childSubTree.component, suspense });
-          else
-            list.push(...this.getInternalInstanceChildren(childSubTree, suspense));
+    api.on.getInspectorState(async (payload) => {
+      var _a10;
+      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+        const result = getInstanceState({
+          instanceId: payload.nodeId
         });
+        const componentInstance = result.instance;
+        const app2 = (_a10 = result.instance) == null ? void 0 : _a10.appContext.app;
+        const _payload = {
+          componentInstance,
+          app: app2,
+          instanceData: result
+        };
+        apiHooks.callHookWith((callbacks) => {
+          callbacks.forEach((cb) => cb(_payload));
+        }, "component-state:inspect" /* COMPONENT_STATE_INSPECT */);
+        payload.state = result;
       }
-    }
-    return list.filter((child) => {
-      var _a9;
-      return !isBeingDestroyed(child) && !((_a9 = child.type.devtools) == null ? void 0 : _a9.hide);
     });
+    api.on.editInspectorState(async (payload) => {
+      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+        editState(payload);
+        await api.sendInspectorState("components");
+      }
+    });
+    const debounceSendInspectorTree = (0, import_perfect_debounce2.debounce)(() => {
+      api.sendInspectorTree(INSPECTOR_ID);
+    }, 120);
+    const debounceSendInspectorState = (0, import_perfect_debounce2.debounce)(() => {
+      api.sendInspectorState(INSPECTOR_ID);
+    }, 120);
+    const componentAddedCleanup = hook.on.componentAdded(async (app2, uid, parentUid, component) => {
+      var _a10, _b10, _c;
+      if ((_c = (_b10 = (_a10 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a10.type) == null ? void 0 : _b10.devtools) == null ? void 0 : _c.hide)
+        return;
+      if (!app2 || typeof uid !== "number" && !uid || !component)
+        return;
+      const id = await getComponentId({
+        app: app2,
+        uid,
+        instance: component
+      });
+      const appRecord = await getAppRecord(app2);
+      if (component) {
+        if (component.__VUE_DEVTOOLS_UID__ == null)
+          component.__VUE_DEVTOOLS_UID__ = id;
+        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id)))
+          appRecord == null ? void 0 : appRecord.instanceMap.set(id, component);
+      }
+      if (!appRecord)
+        return;
+      debounceSendInspectorTree();
+    });
+    const componentUpdatedCleanup = hook.on.componentUpdated(async (app2, uid, parentUid, component) => {
+      var _a10, _b10, _c;
+      if ((_c = (_b10 = (_a10 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a10.type) == null ? void 0 : _b10.devtools) == null ? void 0 : _c.hide)
+        return;
+      if (!app2 || typeof uid !== "number" && !uid || !component)
+        return;
+      const id = await getComponentId({
+        app: app2,
+        uid,
+        instance: component
+      });
+      const appRecord = await getAppRecord(app2);
+      if (component) {
+        if (component.__VUE_DEVTOOLS_UID__ == null)
+          component.__VUE_DEVTOOLS_UID__ = id;
+        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id)))
+          appRecord == null ? void 0 : appRecord.instanceMap.set(id, component);
+      }
+      if (!appRecord)
+        return;
+      debounceSendInspectorTree();
+      debounceSendInspectorState();
+    });
+    const componentRemovedCleanup = hook.on.componentRemoved(async (app2, uid, parentUid, component) => {
+      var _a10, _b10, _c;
+      if ((_c = (_b10 = (_a10 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a10.type) == null ? void 0 : _b10.devtools) == null ? void 0 : _c.hide)
+        return;
+      if (!app2 || typeof uid !== "number" && !uid || !component)
+        return;
+      const appRecord = await getAppRecord(app2);
+      if (!appRecord)
+        return;
+      const id = await getComponentId({
+        app: app2,
+        uid,
+        instance: component
+      });
+      appRecord == null ? void 0 : appRecord.instanceMap.delete(id);
+      debounceSendInspectorTree();
+    });
+    devtoolsContext.componentPluginHookBuffer = [
+      componentAddedCleanup,
+      componentUpdatedCleanup,
+      componentRemovedCleanup
+    ];
+  });
+}
+
+// src/core/app-record/index.ts
+function getAppRecordName(app, fallbackName) {
+  var _a10;
+  return ((_a10 = app == null ? void 0 : app._component) == null ? void 0 : _a10.name) || `App ${fallbackName}`;
+}
+function getAppRootInstance(app) {
+  var _a10, _b10, _c, _d;
+  if (app._instance)
+    return app._instance;
+  else if ((_b10 = (_a10 = app._container) == null ? void 0 : _a10._vnode) == null ? void 0 : _b10.component)
+    return (_d = (_c = app._container) == null ? void 0 : _c._vnode) == null ? void 0 : _d.component;
+}
+function getAppRecordId(app, defaultId) {
+  if (app.__VUE_DEVTOOLS_APP_RECORD_ID__ != null)
+    return app.__VUE_DEVTOOLS_APP_RECORD_ID__;
+  let id = defaultId != null ? defaultId : (appRecordInfo.id++).toString();
+  if (defaultId && appRecordInfo.appIds.has(id)) {
+    let count = 1;
+    while (appRecordInfo.appIds.has(`${defaultId}_${count}`))
+      count++;
+    id = `${defaultId}_${count}`;
   }
-  /**
-   * Mark an instance as captured and store it in the instance map.
-   *
-   * @param {Vue} instance
-   */
-  mark(instance, force = false) {
-    const instanceMap = getAppRecord(instance).instanceMap;
-    if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_UID__))
-      instanceMap.set(instance.__VUE_DEVTOOLS_UID__, instance);
-  }
-  isKeepAlive(instance) {
-    return instance.type.__isKeepAlive && instance.__v_cache;
+  appRecordInfo.appIds.add(id);
+  app.__VUE_DEVTOOLS_APP_RECORD_ID__ = id;
+  return id;
+}
+function createAppRecord(app) {
+  const rootInstance = getAppRootInstance(app);
+  if (rootInstance) {
+    appRecordInfo.id++;
+    const name = getAppRecordName(app, appRecordInfo.id.toString());
+    const id = getAppRecordId(app, (0, import_speakingurl.default)(name));
+    const record = {
+      id,
+      name,
+      instanceMap: /* @__PURE__ */ new Map(),
+      rootInstance
+    };
+    app.__VUE_DEVTOOLS_APP_RECORD__ = record;
+    const rootId = `${record.id}:root`;
+    record.instanceMap.set(rootId, record.rootInstance);
+    record.rootInstance.__VUE_DEVTOOLS_UID__ = rootId;
+    return record;
+  } else {
+    return {};
   }
-  getKeepAliveCachedInstances(instance) {
-    return Array.from(instance.__v_cache.values()).map((vnode) => vnode.component).filter(Boolean);
+}
+async function setActiveAppRecord(appRecord) {
+  await registerComponentDevToolsPlugin(appRecord == null ? void 0 : appRecord.app);
+  devtoolsAppRecords.active = appRecord;
+  devtoolsAppRecords.activeId = `${appRecord.id}`;
+  registerPlugin(appRecord.app, appRecord.api);
+}
+async function toggleActiveAppRecord(id) {
+  devtoolsContext.componentPluginHookBuffer.forEach((cleanup) => cleanup());
+  devtoolsContext.api.clear();
+  devtoolsContext.clear();
+  const appRecord = devtoolsAppRecords.value.find((record) => record.id === id);
+  if (appRecord) {
+    devtoolsState.pluginBuffer = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.id !== "components");
+    const api = new DevToolsPluginApi();
+    appRecord.api = api;
+    setActiveAppRecord(appRecord);
   }
-};
-
-// src/core/component/state/index.ts
-init_cjs_shims();
-function getInstanceState(params) {
-  var _a9;
-  const instance = getComponentInstance(devtoolsContext.appRecord, params.instanceId);
-  const id = getUniqueComponentId(instance);
-  const name = getInstanceName(instance);
-  const file = (_a9 = instance == null ? void 0 : instance.type) == null ? void 0 : _a9.__file;
-  const state = processInstanceState(instance);
-  return {
-    id,
-    name,
-    file,
-    state,
-    instance
-  };
 }
 
-// src/core/component/state/bounding-rect.ts
+// src/core/component-highlighter/index.ts
 init_cjs_shims();
-function createRect() {
-  const rect = {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    get width() {
-      return rect.right - rect.left;
-    },
-    get height() {
-      return rect.bottom - rect.top;
-    }
+var CONTAINER_ELEMENT_ID = "__vue-devtools-component-inspector__";
+var CARD_ELEMENT_ID = "__vue-devtools-component-inspector__card__";
+var COMPONENT_NAME_ELEMENT_ID = "__vue-devtools-component-inspector__name__";
+var INDICATOR_ELEMENT_ID = "__vue-devtools-component-inspector__indicator__";
+var containerStyles = {
+  display: "block",
+  zIndex: 2147483640,
+  position: "fixed",
+  backgroundColor: "#42b88325",
+  border: "1px solid #42b88350",
+  borderRadius: "5px",
+  transition: "all 0.1s ease-in",
+  pointerEvents: "none"
+};
+var cardStyles = {
+  fontFamily: "Arial, Helvetica, sans-serif",
+  padding: "5px 8px",
+  borderRadius: "4px",
+  textAlign: "left",
+  position: "absolute",
+  left: 0,
+  color: "#e9e9e9",
+  fontSize: "14px",
+  fontWeight: 600,
+  lineHeight: "24px",
+  backgroundColor: "#42b883",
+  boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
+};
+var indicatorStyles = {
+  display: "inline-block",
+  fontWeight: 400,
+  fontStyle: "normal",
+  fontSize: "12px",
+  opacity: 0.7
+};
+function getContainerElement() {
+  return document.getElementById(CONTAINER_ELEMENT_ID);
+}
+function getCardElement() {
+  return document.getElementById(CARD_ELEMENT_ID);
+}
+function getIndicatorElement() {
+  return document.getElementById(INDICATOR_ELEMENT_ID);
+}
+function getNameElement() {
+  return document.getElementById(COMPONENT_NAME_ELEMENT_ID);
+}
+function getStyles(bounds) {
+  return {
+    left: `${Math.round(bounds.left * 100) / 100}px`,
+    top: `${Math.round(bounds.top * 100) / 100}px`,
+    width: `${Math.round(bounds.width * 100) / 100}px`,
+    height: `${Math.round(bounds.height * 100) / 100}px`
   };
-  return rect;
 }
-var range;
-function getTextRect(node) {
-  if (!range)
-    range = document.createRange();
-  range.selectNode(node);
-  return range.getBoundingClientRect();
+function create(options) {
+  var _a10;
+  const containerEl = document.createElement("div");
+  containerEl.id = (_a10 = options.elementId) != null ? _a10 : CONTAINER_ELEMENT_ID;
+  Object.assign(containerEl.style, {
+    ...containerStyles,
+    ...getStyles(options.bounds),
+    ...options.style
+  });
+  const cardEl = document.createElement("span");
+  cardEl.id = CARD_ELEMENT_ID;
+  Object.assign(cardEl.style, {
+    ...cardStyles,
+    top: options.bounds.top < 35 ? 0 : "-35px"
+  });
+  const nameEl = document.createElement("span");
+  nameEl.id = COMPONENT_NAME_ELEMENT_ID;
+  nameEl.innerHTML = `&lt;${options.name}&gt;&nbsp;&nbsp;`;
+  const indicatorEl = document.createElement("i");
+  indicatorEl.id = INDICATOR_ELEMENT_ID;
+  indicatorEl.innerHTML = `${Math.round(options.bounds.width * 100) / 100} x ${Math.round(options.bounds.height * 100) / 100}`;
+  Object.assign(indicatorEl.style, indicatorStyles);
+  cardEl.appendChild(nameEl);
+  cardEl.appendChild(indicatorEl);
+  containerEl.appendChild(cardEl);
+  document.body.appendChild(containerEl);
+  return containerEl;
 }
-function getFragmentRect(vnode) {
-  const rect = createRect();
-  if (!vnode.children)
-    return rect;
-  for (let i = 0, l = vnode.children.length; i < l; i++) {
-    const childVnode = vnode.children[i];
-    let childRect;
-    if (childVnode.component) {
-      childRect = getComponentBoundingRect(childVnode.component);
-    } else if (childVnode.el) {
-      const el = childVnode.el;
-      if (el.nodeType === 1 || el.getBoundingClientRect)
-        childRect = el.getBoundingClientRect();
-      else if (el.nodeType === 3 && el.data.trim())
-        childRect = getTextRect(el);
+function update(options) {
+  const containerEl = getContainerElement();
+  const cardEl = getCardElement();
+  const nameEl = getNameElement();
+  const indicatorEl = getIndicatorElement();
+  if (containerEl) {
+    Object.assign(containerEl.style, {
+      ...containerStyles,
+      ...getStyles(options.bounds)
+    });
+    Object.assign(cardEl.style, {
+      top: options.bounds.top < 35 ? 0 : "-35px"
+    });
+    nameEl.innerHTML = `&lt;${options.name}&gt;&nbsp;&nbsp;`;
+    indicatorEl.innerHTML = `${Math.round(options.bounds.width * 100) / 100} x ${Math.round(options.bounds.height * 100) / 100}`;
+  }
+}
+function toggleComponentHighLighter(options) {
+  if (options.visible) {
+    const instance = getComponentInstance(devtoolsContext.appRecord, options.id);
+    if (instance && (options.bounds.width || options.bounds.height)) {
+      const name = getInstanceName(instance);
+      const el = getContainerElement();
+      el ? update({ ...options, name }) : create({ ...options, name });
     }
-    if (childRect)
-      mergeRects(rect, childRect);
+  } else {
+    const el = getContainerElement();
+    if (el)
+      el.style.display = "none";
   }
-  return rect;
 }
-function mergeRects(a, b) {
-  if (!a.top || b.top < a.top)
-    a.top = b.top;
-  if (!a.bottom || b.bottom > a.bottom)
-    a.bottom = b.bottom;
-  if (!a.left || b.left < a.left)
-    a.left = b.left;
-  if (!a.right || b.right > a.right)
-    a.right = b.right;
-  return a;
+function highlight(instance) {
+  const bounds = getComponentBoundingRect(instance);
+  const name = getInstanceName(instance);
+  const container = getContainerElement();
+  container ? update({ bounds, name }) : create({ bounds, name });
 }
-var DEFAULT_RECT = {
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  width: 0,
-  height: 0
-};
-function getComponentBoundingRect(instance) {
-  const el = instance.subTree.el;
-  if (typeof window === "undefined") {
-    return DEFAULT_RECT;
+function unhighlight() {
+  const el = getContainerElement();
+  if (el)
+    el.style.display = "none";
+}
+var inspectInstance = null;
+function inspectFn(e) {
+  const target9 = e.target;
+  if (target9) {
+    const instance = target9.__vueParentComponent;
+    if (instance) {
+      inspectInstance = instance;
+      const el = instance.vnode.el;
+      if (el) {
+        const bounds = getComponentBoundingRect(instance);
+        const name = getInstanceName(instance);
+        const container = getContainerElement();
+        container ? update({ bounds, name }) : create({ bounds, name });
+      }
+    }
   }
-  if (isFragment(instance))
-    return getFragmentRect(instance.subTree);
-  else if ((el == null ? void 0 : el.nodeType) === 1)
-    return el == null ? void 0 : el.getBoundingClientRect();
-  else if (instance.subTree.component)
-    return getComponentBoundingRect(instance.subTree.component);
-  else
-    return DEFAULT_RECT;
 }
-
-// src/api/on.ts
-init_cjs_shims();
-var import_devtools_shared9 = require("@vue/devtools-shared");
-var import_hookable2 = require("hookable");
-var _a6, _b6;
-var apiHooks = (_b6 = (_a6 = import_devtools_shared9.target).__VUE_DEVTOOLS_API_HOOK) != null ? _b6 : _a6.__VUE_DEVTOOLS_API_HOOK = (0, import_hookable2.createHooks)();
-var on2 = {
-  devtoolsStateUpdated(fn) {
-    apiHooks.hook("devtools:state-updated" /* DEVTOOLS_STATE_UPDATED */, fn);
-  },
-  routerInfoUpdated(fn) {
-    apiHooks.hook("router-info:updated" /* ROUTER_INFO_UPDATED */, fn);
-  },
-  getComponentBoundingRect(fn) {
-    apiHooks.hook("component-bounding-rect:get" /* GET_COMPONENT_BOUNDING_RECT */, fn);
-  },
-  // compatible
-  inspectComponent(fn) {
-    apiHooks.hook("component-state:inspect" /* COMPONENT_STATE_INSPECT */, fn);
-  },
-  visitComponentTree(fn) {
-    apiHooks.hook("component-tree:visit" /* VISIT_COMPONENT_TREE */, fn);
-  },
-  getInspectorTree(fn) {
-    apiHooks.hook("inspector-tree:get" /* GET_INSPECTOR_TREE */, fn);
-  },
-  getInspectorState(fn) {
-    apiHooks.hook("inspector-state:get" /* GET_INSPECTOR_STATE */, fn);
-  },
-  // private
-  sendInspectorTree(fn) {
-    apiHooks.hook("inspector-tree:send" /* SEND_INSPECTOR_TREE */, fn);
-  },
-  sendInspectorState(fn) {
-    apiHooks.hook("inspector-state:send" /* SEND_INSPECTOR_STATE */, fn);
-  },
-  addTimelineEvent(fn) {
-    apiHooks.hook("timeline:add-event" /* ADD_TIMELINE_EVENT */, fn);
-  },
-  editInspectorState(fn) {
-    apiHooks.hook("inspector-state:edit" /* EDIT_INSPECTOR_STATE */, fn);
-  },
-  editComponentState() {
-  },
-  customTabsUpdated(fn) {
-    apiHooks.hook("custom-tabs:updated" /* CUSTOM_TABS_UPDATED */, fn);
-  },
-  customCommandsUpdated(fn) {
-    apiHooks.hook("custom-commands:updated" /* CUSTOM_COMMANDS_UPDATED */, fn);
+function selectComponentFn(e, cb) {
+  var _a10;
+  e.preventDefault();
+  e.stopPropagation();
+  if (inspectInstance) {
+    const app = (_a10 = devtoolsContext.appRecord) == null ? void 0 : _a10.app;
+    getComponentId({
+      app,
+      uid: app.uid,
+      instance: inspectInstance
+    }).then((id) => {
+      cb(id);
+    });
   }
-};
-
-// src/core/plugins/components.ts
-var INSPECTOR_ID = "components";
-function registerComponentsDevTools(app) {
-  setupDevToolsPlugin({
-    id: INSPECTOR_ID,
-    label: "Components",
-    app
-  }, (api) => {
-    api.addInspector({
-      id: INSPECTOR_ID,
-      label: "Components",
-      treeFilterPlaceholder: "Search components"
-    });
-    api.on.getComponentBoundingRect((payload) => {
-      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-        const instance = getComponentInstance(devtoolsContext.appRecord, payload.instanceId);
-        if (instance) {
-          if (typeof DOMRect === "undefined")
-            return;
-          payload.rect = getComponentBoundingRect(instance);
-          if (payload.rect instanceof DOMRect) {
-            payload.rect = {
-              top: payload.rect.top,
-              left: payload.rect.left,
-              right: payload.rect.right,
-              bottom: payload.rect.bottom,
-              width: payload.rect.width,
-              height: payload.rect.height
-            };
-          }
-        }
+}
+function inspectComponentHighLighter() {
+  window.addEventListener("mouseover", inspectFn);
+  return new Promise((resolve) => {
+    function onSelect(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      selectComponentFn(e, (id) => {
+        window.removeEventListener("click", onSelect);
+        window.removeEventListener("mouseover", inspectFn);
+        const el = getContainerElement();
+        if (el)
+          el.style.display = "none";
+        resolve(JSON.stringify({ id }));
+      });
+    }
+    window.addEventListener("click", onSelect);
+  });
+}
+function scrollToComponent(options) {
+  const instance = getComponentInstance(devtoolsContext.appRecord, options.id);
+  if (instance) {
+    const [el] = getRootElementsFromComponentInstance(instance);
+    if (typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({
+        behavior: "smooth"
+      });
+    } else {
+      const bounds = getComponentBoundingRect(instance);
+      const scrollTarget = document.createElement("div");
+      const styles = {
+        ...getStyles(bounds),
+        position: "absolute"
+      };
+      Object.assign(scrollTarget.style, styles);
+      document.body.appendChild(scrollTarget);
+      scrollTarget.scrollIntoView({
+        behavior: "smooth"
+      });
+      setTimeout(() => {
+        document.body.removeChild(scrollTarget);
+      }, 2e3);
+    }
+    setTimeout(() => {
+      const bounds = getComponentBoundingRect(instance);
+      if (bounds.width || bounds.height) {
+        const name = getInstanceName(instance);
+        const el2 = getContainerElement();
+        el2 ? update({ ...options, name, bounds }) : create({ ...options, name, bounds });
+        setTimeout(() => {
+          if (el2)
+            el2.style.display = "none";
+        }, 1500);
       }
-    });
-    api.on.getInspectorTree(async (payload) => {
-      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-        const instance = getComponentInstance(devtoolsContext.appRecord, payload.instanceId);
-        if (instance) {
-          const walker = new ComponentWalker({
-            filterText: payload.filter,
-            // @TODO: should make this configurable?
-            maxDepth: 100,
-            recursively: false
-          });
-          payload.rootNodes = await walker.getComponentTree(instance);
-        }
+    }, 1200);
+  }
+}
+
+// src/shared/index.ts
+init_cjs_shims();
+
+// src/shared/util.ts
+init_cjs_shims();
+
+// src/core/component/state/replacer.ts
+init_cjs_shims();
+
+// src/core/component/state/custom.ts
+init_cjs_shims();
+function getFunctionDetails(func) {
+  let string = "";
+  let matches = null;
+  try {
+    string = Function.prototype.toString.call(func);
+    matches = String.prototype.match.call(string, /\([\s\S]*?\)/);
+  } catch (e) {
+  }
+  const match = matches && matches[0];
+  const args = typeof match === "string" ? match : "(?)";
+  const name = typeof func.name === "string" ? func.name : "";
+  return {
+    _custom: {
+      type: "function",
+      displayText: `<span style="opacity:.5;">function</span> ${escape(name)}${args}`,
+      tooltipText: string.trim() ? `<pre>${string}</pre>` : null
+    }
+  };
+}
+function getBigIntDetails(val) {
+  const stringifiedBigInt = BigInt.prototype.toString.call(val);
+  return {
+    _custom: {
+      type: "bigint",
+      displayText: `BigInt(${stringifiedBigInt})`,
+      value: stringifiedBigInt
+    }
+  };
+}
+function getMapDetails(val) {
+  const list = Object.fromEntries(val);
+  return {
+    _custom: {
+      type: "map",
+      displayText: "Map",
+      value: list,
+      readOnly: true,
+      fields: {
+        abstract: true
       }
-    });
-    api.on.getInspectorState(async (payload) => {
-      var _a9;
-      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-        const result = getInstanceState({
-          instanceId: payload.nodeId
-        });
-        const componentInstance = result.instance;
-        const app2 = (_a9 = result.instance) == null ? void 0 : _a9.appContext.app;
-        const _payload = {
-          componentInstance,
-          app: app2,
-          instanceData: result
-        };
-        apiHooks.callHookWith((callbacks) => {
-          callbacks.forEach((cb) => cb(_payload));
-        }, "component-state:inspect" /* COMPONENT_STATE_INSPECT */);
-        payload.state = result;
+    }
+  };
+}
+function getSetDetails(val) {
+  const list = Array.from(val);
+  return {
+    _custom: {
+      type: "set",
+      displayText: `Set[${list.length}]`,
+      value: list,
+      readOnly: true
+    }
+  };
+}
+function getCatchedGetters(store) {
+  const getters = {};
+  const origGetters = store.getters || {};
+  const keys = Object.keys(origGetters);
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    Object.defineProperty(getters, key, {
+      enumerable: true,
+      get: () => {
+        try {
+          return origGetters[key];
+        } catch (e) {
+          return e;
+        }
       }
     });
-    api.on.editInspectorState(async (payload) => {
-      if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
-        editState(payload);
-        await api.sendInspectorState("components");
+  }
+  return getters;
+}
+function reduceStateList(list) {
+  if (!list.length)
+    return void 0;
+  return list.reduce((map, item) => {
+    const key = item.type || "data";
+    const obj = map[key] = map[key] || {};
+    obj[item.key] = item.value;
+    return map;
+  }, {});
+}
+function namedNodeMapToObject(map) {
+  const result = {};
+  const l = map.length;
+  for (let i = 0; i < l; i++) {
+    const node = map.item(i);
+    result[node.name] = node.value;
+  }
+  return result;
+}
+function getStoreDetails(store) {
+  return {
+    _custom: {
+      type: "store",
+      displayText: "Store",
+      value: {
+        state: store.state,
+        getters: getCatchedGetters(store)
+      },
+      fields: {
+        abstract: true
       }
-    });
-    const debounceSendInspectorTree = (0, import_perfect_debounce3.debounce)(() => {
-      api.sendInspectorTree(INSPECTOR_ID);
-    }, 120);
-    const debounceSendInspectorState = (0, import_perfect_debounce3.debounce)(() => {
-      api.sendInspectorState(INSPECTOR_ID);
-    }, 120);
-    const componentAddedCleanup = hook.on.componentAdded(async (app2, uid, parentUid, component) => {
-      var _a9, _b9, _c;
-      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
-        return;
-      if (!app2 || typeof uid !== "number" && !uid || !component)
-        return;
-      const id = await getComponentId({
-        app: app2,
-        uid,
-        instance: component
-      });
-      const appRecord = await getAppRecord(app2);
-      if (component) {
-        if (component.__VUE_DEVTOOLS_UID__ == null)
-          component.__VUE_DEVTOOLS_UID__ = id;
-        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id)))
-          appRecord == null ? void 0 : appRecord.instanceMap.set(id, component);
+    }
+  };
+}
+function getRouterDetails(router) {
+  return {
+    _custom: {
+      type: "router",
+      displayText: "VueRouter",
+      value: {
+        options: router.options,
+        currentRoute: router.currentRoute
+      },
+      fields: {
+        abstract: true
       }
-      if (!appRecord)
-        return;
-      debounceSendInspectorTree();
-    });
-    const componentUpdatedCleanup = hook.on.componentUpdated(async (app2, uid, parentUid, component) => {
-      var _a9, _b9, _c;
-      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
-        return;
-      if (!app2 || typeof uid !== "number" && !uid || !component)
-        return;
-      const id = await getComponentId({
-        app: app2,
-        uid,
-        instance: component
-      });
-      const appRecord = await getAppRecord(app2);
-      if (component) {
-        if (component.__VUE_DEVTOOLS_UID__ == null)
-          component.__VUE_DEVTOOLS_UID__ = id;
-        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id)))
-          appRecord == null ? void 0 : appRecord.instanceMap.set(id, component);
+    }
+  };
+}
+function getInstanceDetails(instance) {
+  if (instance._)
+    instance = instance._;
+  const state = processInstanceState(instance);
+  return {
+    _custom: {
+      type: "component",
+      id: instance.__VUE_DEVTOOLS_UID__,
+      displayText: getInstanceName(instance),
+      tooltipText: "Component instance",
+      value: reduceStateList(state),
+      fields: {
+        abstract: true
       }
-      if (!appRecord)
-        return;
-      debounceSendInspectorTree();
-      debounceSendInspectorState();
-    });
-    const componentRemovedCleanup = hook.on.componentRemoved(async (app2, uid, parentUid, component) => {
-      var _a9, _b9, _c;
-      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
-        return;
-      if (!app2 || typeof uid !== "number" && !uid || !component)
-        return;
-      const appRecord = await getAppRecord(app2);
-      if (!appRecord)
-        return;
-      const id = await getComponentId({
-        app: app2,
-        uid,
-        instance: component
-      });
-      appRecord == null ? void 0 : appRecord.instanceMap.delete(id);
-      debounceSendInspectorTree();
-    });
-    devtoolsContext.componentPluginHookBuffer = [
-      componentAddedCleanup,
-      componentUpdatedCleanup,
-      componentRemovedCleanup
-    ];
-  });
+    }
+  };
+}
+function getComponentDefinitionDetails(definition) {
+  let display = getComponentName(definition);
+  if (display) {
+    if (definition.name && definition.__file)
+      display += ` <span>(${definition.__file})</span>`;
+  } else {
+    display = "<i>Unknown Component</i>";
+  }
+  return {
+    _custom: {
+      type: "component-definition",
+      displayText: display,
+      tooltipText: "Component definition",
+      ...definition.__file ? {
+        file: definition.__file
+      } : {}
+    }
+  };
+}
+function getHTMLElementDetails(value) {
+  try {
+    return {
+      _custom: {
+        type: "HTMLElement",
+        displayText: `<span class="opacity-30">&lt;</span><span class="text-blue-500">${value.tagName.toLowerCase()}</span><span class="opacity-30">&gt;</span>`,
+        value: namedNodeMapToObject(value.attributes)
+      }
+    };
+  } catch (e) {
+    return {
+      _custom: {
+        type: "HTMLElement",
+        displayText: `<span class="text-blue-500">${String(value)}</span>`
+      }
+    };
+  }
+}
+function getObjectDetails(object) {
+  var _a10, _b10, _c, _d;
+  const info = getSetupStateType(object);
+  const isState = info.ref || info.computed || info.reactive;
+  if (isState) {
+    const stateTypeName = info.computed ? "Computed" : info.ref ? "Ref" : info.reactive ? "Reactive" : null;
+    const value = toRaw2(info.reactive ? object : object._value);
+    const raw = ((_b10 = (_a10 = object.effect) == null ? void 0 : _a10.raw) == null ? void 0 : _b10.toString()) || ((_d = (_c = object.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
+    return {
+      _custom: {
+        type: stateTypeName == null ? void 0 : stateTypeName.toLowerCase(),
+        stateTypeName,
+        value,
+        ...raw ? { tooltipText: `<span class="font-mono">${raw}</span>` } : {}
+      }
+    };
+  }
+  if (typeof object.__asyncLoader === "function") {
+    return {
+      _custom: {
+        type: "component-definition",
+        display: "Async component definition"
+      }
+    };
+  }
+}
+
+// src/core/component/state/replacer.ts
+function stringifyReplacer(key) {
+  var _a10;
+  if (key === "compilerOptions")
+    return;
+  const val = this[key];
+  const type = typeof val;
+  if (Array.isArray(val)) {
+    const l = val.length;
+    if (l > MAX_ARRAY_SIZE) {
+      return {
+        _isArray: true,
+        length: l,
+        items: val.slice(0, MAX_ARRAY_SIZE)
+      };
+    }
+    return val;
+  } else if (typeof val === "string") {
+    if (val.length > MAX_STRING_SIZE)
+      return `${val.substring(0, MAX_STRING_SIZE)}... (${val.length} total length)`;
+    else
+      return val;
+  } else if (type === "undefined") {
+    return UNDEFINED;
+  } else if (val === Number.POSITIVE_INFINITY) {
+    return INFINITY;
+  } else if (val === Number.NEGATIVE_INFINITY) {
+    return NEGATIVE_INFINITY;
+  } else if (typeof val === "function") {
+    return getFunctionDetails(val);
+  } else if (type === "symbol") {
+    return `[native Symbol ${Symbol.prototype.toString.call(val)}]`;
+  } else if (typeof val === "bigint") {
+    return getBigIntDetails(val);
+  } else if (val !== null && typeof val === "object") {
+    const proto = Object.prototype.toString.call(val);
+    if (proto === "[object Map]") {
+      return getMapDetails(val);
+    } else if (proto === "[object Set]") {
+      return getSetDetails(val);
+    } else if (proto === "[object RegExp]") {
+      return `[native RegExp ${RegExp.prototype.toString.call(val)}]`;
+    } else if (proto === "[object Date]") {
+      return `[native Date ${Date.prototype.toString.call(val)}]`;
+    } else if (proto === "[object Error]") {
+      return `[native Error ${val.message}<>${val.stack}]`;
+    } else if (val.state && val._vm) {
+      return getStoreDetails(val);
+    } else if (val.constructor && val.constructor.name === "VueRouter") {
+      return getRouterDetails(val);
+    } else if (isVueInstance(val)) {
+      return getInstanceDetails(val);
+    } else if (typeof val.render === "function") {
+      return getComponentDefinitionDetails(val);
+    } else if (val.constructor && val.constructor.name === "VNode") {
+      return `[native VNode <${val.tag}>]`;
+    } else if (typeof HTMLElement !== "undefined" && val instanceof HTMLElement) {
+      return getHTMLElementDetails(val);
+    } else if (((_a10 = val.constructor) == null ? void 0 : _a10.name) === "Store" && val._wrappedGetters) {
+      return "[object Store]";
+    } else if (val.currentRoute) {
+      return "[object Router]";
+    }
+    const customDetails = getObjectDetails(val);
+    if (customDetails != null)
+      return customDetails;
+  } else if (Number.isNaN(val)) {
+    return NAN;
+  }
+  return sanitize(val);
+}
+
+// src/core/component/state/reviver.ts
+init_cjs_shims();
+var import_devtools_shared7 = require("@vue/devtools-shared");
+function reviveSet(val) {
+  const result = /* @__PURE__ */ new Set();
+  const list = val._custom.value;
+  for (let i = 0; i < list.length; i++) {
+    const value = list[i];
+    result.add(revive(value));
+  }
+  return result;
+}
+function reviveMap(val) {
+  const result = /* @__PURE__ */ new Map();
+  const list = val._custom.value;
+  for (let i = 0; i < list.length; i++) {
+    const { key, value } = list[i];
+    result.set(key, revive(value));
+  }
+  return result;
+}
+function revive(val) {
+  var _a10;
+  if (val === UNDEFINED) {
+    return void 0;
+  } else if (val === INFINITY) {
+    return Number.POSITIVE_INFINITY;
+  } else if (val === NEGATIVE_INFINITY) {
+    return Number.NEGATIVE_INFINITY;
+  } else if (val === NAN) {
+    return Number.NaN;
+  } else if (val && val._custom) {
+    const { _custom: custom } = val;
+    if (custom.type === "component")
+      return (_a10 = devtoolsContext.appRecord) == null ? void 0 : _a10.instanceMap.get(custom.id);
+    else if (custom.type === "map")
+      return reviveMap(val);
+    else if (custom.type === "set")
+      return reviveSet(val);
+    else if (custom.type === "bigint")
+      return BigInt(custom.value);
+    else
+      return revive(custom.value);
+  } else if (symbolRE.test(val)) {
+    const [, string] = symbolRE.exec(val);
+    return Symbol.for(string);
+  } else if (specialTypeRE.test(val)) {
+    const [, type, string, , details] = specialTypeRE.exec(val);
+    const result = new import_devtools_shared7.target[type](string);
+    if (type === "Error" && details)
+      result.stack = details;
+    return result;
+  } else {
+    return val;
+  }
+}
+function reviver(key, value) {
+  return revive(value);
+}
+
+// src/shared/transfer.ts
+init_cjs_shims();
+var MAX_SERIALIZED_SIZE = 512 * 1024;
+function encode(data, replacer, list, seen) {
+  let stored, key, value, i, l;
+  const seenIndex = seen.get(data);
+  if (seenIndex != null)
+    return seenIndex;
+  const index = list.length;
+  const proto = Object.prototype.toString.call(data);
+  if (proto === "[object Object]") {
+    stored = {};
+    seen.set(data, index);
+    list.push(stored);
+    const keys = Object.keys(data);
+    for (i = 0, l = keys.length; i < l; i++) {
+      key = keys[i];
+      try {
+        if (key === "compilerOptions")
+          return;
+        value = data[key];
+        if (replacer)
+          value = replacer.call(data, key, value);
+      } catch (e) {
+        value = e;
+      }
+      stored[key] = encode(value, replacer, list, seen);
+    }
+  } else if (proto === "[object Array]") {
+    stored = [];
+    seen.set(data, index);
+    list.push(stored);
+    for (i = 0, l = data.length; i < l; i++) {
+      try {
+        value = data[i];
+        if (replacer)
+          value = replacer.call(data, i, value);
+      } catch (e) {
+        value = e;
+      }
+      stored[i] = encode(value, replacer, list, seen);
+    }
+  } else {
+    list.push(data);
+  }
+  return index;
+}
+function decode(list, reviver2 = null) {
+  let i = list.length;
+  let j, k, data, key, value, proto;
+  while (i--) {
+    data = list[i];
+    proto = Object.prototype.toString.call(data);
+    if (proto === "[object Object]") {
+      const keys = Object.keys(data);
+      for (j = 0, k = keys.length; j < k; j++) {
+        key = keys[j];
+        value = list[data[key]];
+        if (reviver2)
+          value = reviver2.call(data, key, value);
+        data[key] = value;
+      }
+    } else if (proto === "[object Array]") {
+      for (j = 0, k = data.length; j < k; j++) {
+        value = list[data[j]];
+        if (reviver2)
+          value = reviver2.call(data, j, value);
+        data[j] = value;
+      }
+    }
+  }
+}
+function stringifyCircularAutoChunks(data, replacer = null, space = null) {
+  let result;
+  try {
+    result = arguments.length === 1 ? JSON.stringify(data) : JSON.stringify(data, replacer, space);
+  } catch (e) {
+    result = stringifyStrictCircularAutoChunks(data, replacer, space);
+  }
+  if (result.length > MAX_SERIALIZED_SIZE) {
+    const chunkCount = Math.ceil(result.length / MAX_SERIALIZED_SIZE);
+    const chunks = [];
+    for (let i = 0; i < chunkCount; i++)
+      chunks.push(result.slice(i * MAX_SERIALIZED_SIZE, (i + 1) * MAX_SERIALIZED_SIZE));
+    return chunks;
+  }
+  return result;
+}
+function stringifyStrictCircularAutoChunks(data, replacer = null, space = null) {
+  const list = [];
+  encode(data, replacer, list, /* @__PURE__ */ new Map());
+  return space ? ` ${JSON.stringify(list, null, space)}` : ` ${JSON.stringify(list)}`;
+}
+function parseCircularAutoChunks(data, reviver2 = null) {
+  if (Array.isArray(data))
+    data = data.join("");
+  const hasCircular = /^\s/.test(data);
+  if (!hasCircular) {
+    return arguments.length === 1 ? JSON.parse(data) : JSON.parse(data, reviver2);
+  } else {
+    const list = JSON.parse(data);
+    decode(list, reviver2);
+    return list[0];
+  }
+}
+
+// src/core/component/state/format.ts
+init_cjs_shims();
+function getInspectorStateValueType(value, raw = true) {
+  const type = typeof value;
+  if (value == null || value === UNDEFINED) {
+    return "null";
+  } else if (type === "boolean" || type === "number" || value === INFINITY || value === NEGATIVE_INFINITY || value === NAN) {
+    return "literal";
+  } else if (value == null ? void 0 : value._custom) {
+    if (raw || value._custom.display != null || value._custom.displayText != null)
+      return "custom";
+    else
+      return getInspectorStateValueType(value._custom.value);
+  } else if (typeof value === "string") {
+    const typeMatch = specialTypeRE.exec(value);
+    if (typeMatch) {
+      const [, type2] = typeMatch;
+      return `native ${type2}`;
+    } else {
+      return "string";
+    }
+  } else if (Array.isArray(value) || (value == null ? void 0 : value._isArray)) {
+    return "array";
+  } else if (isPlainObject(value)) {
+    return "plain-object";
+  } else {
+    return "unknown";
+  }
+}
+function formatInspectorStateValue(value, quotes = false) {
+  var _a10, _b10;
+  let result;
+  const type = getInspectorStateValueType(value, false);
+  if (type !== "custom" && (value == null ? void 0 : value._custom))
+    value = value._custom.value;
+  if (result = internalStateTokenToString(value)) {
+    return result;
+  } else if (type === "custom") {
+    const nestedName = ((_a10 = value._custom.value) == null ? void 0 : _a10._custom) && formatInspectorStateValue(value._custom.value);
+    return nestedName || value._custom.displayText || value._custom.display;
+  } else if (type === "array") {
+    return `Array[${value.length}]`;
+  } else if (type === "plain-object") {
+    return `Object${Object.keys(value).length ? "" : " (empty)"}`;
+  } else if (type == null ? void 0 : type.includes("native")) {
+    return escape((_b10 = specialTypeRE.exec(value)) == null ? void 0 : _b10[2]);
+  } else if (typeof value === "string") {
+    const typeMatch = value.match(rawTypeRE);
+    if (typeMatch)
+      value = escape(typeMatch[1]);
+    else if (quotes)
+      value = `<span>"</span>${escape(value)}<span>"</span>`;
+    else
+      value = escape(value);
+    value = value.replace(/ /g, "&nbsp;").replace(/\n/g, "<span>\\n</span>");
+  }
+  return value;
+}
+function getRaw(value) {
+  var _a10, _b10, _c;
+  let customType;
+  const isCustom = getInspectorStateValueType(value) === "custom";
+  let inherit = {};
+  if (isCustom) {
+    const data = value;
+    const customValue = (_a10 = data._custom) == null ? void 0 : _a10.value;
+    const currentCustomType = (_b10 = data._custom) == null ? void 0 : _b10.type;
+    const nestedCustom = typeof customValue === "object" && customValue !== null && "_custom" in customValue ? getRaw(customValue) : { inherit: void 0, value: void 0, customType: void 0 };
+    inherit = nestedCustom.inherit || ((_c = data._custom) == null ? void 0 : _c.fields) || {};
+    value = nestedCustom.value || customValue;
+    customType = nestedCustom.customType || currentCustomType;
+  }
+  if (value && value._isArray)
+    value = value.items;
+  return { value, inherit, customType };
+}
+function toEdit(value, customType) {
+  if (customType === "bigint")
+    return value;
+  return replaceTokenToString(JSON.stringify(value));
+}
+function toSubmit(value, customType) {
+  if (customType === "bigint")
+    return BigInt(value);
+  return JSON.parse(replaceStringToToken(value), reviver);
 }
 
-// src/core/general/app-record.ts
-async function setActiveAppRecord(appRecord) {
-  await registerComponentsDevTools(appRecord.app);
-  devtoolsState.activeAppRecord = appRecord;
-  devtoolsState.activeAppRecordId = `${appRecord.id}`;
-  registerPlugin({
-    app: appRecord.app,
-    api: appRecord.api
-  });
+// src/shared/util.ts
+function stringify(data) {
+  return stringifyCircularAutoChunks(data, stringifyReplacer);
 }
-async function toggleAppRecord(id) {
-  devtoolsContext.componentPluginHookBuffer.forEach((cleanup) => cleanup());
-  devtoolsContext.api.clear();
-  devtoolsContext.clear();
-  const appRecord = devtoolsState.appRecords.find((record) => record.id === id);
-  if (appRecord) {
-    devtoolsState.pluginBuffer = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.id !== "components");
-    const api = new DevToolsPluginApi();
-    appRecord.api = api;
-    setActiveAppRecord(appRecord);
-    window.postMessage({
-      event: "toggle-app-record",
-      target: "vue-devtools"
-    });
-  }
+function parse(data, revive2 = false) {
+  if (data == void 0)
+    return {};
+  return revive2 ? parseCircularAutoChunks(data, reviver) : parseCircularAutoChunks(data);
+}
+
+// src/shared/time.ts
+init_cjs_shims();
+function now() {
+  return Date.now();
 }
 
+// src/shared/env.ts
+init_cjs_shims();
+
 // src/core/custom-tab/index.ts
 init_cjs_shims();
 function addCustomTab(tab) {
@@ -3748,18 +3869,18 @@ function removeCustomCommand(actionId) {
   devtoolsState.commands.splice(index, 1);
 }
 
-// src/core/vue-inspector/index.ts
+// src/core/component-inspector/index.ts
 init_cjs_shims();
-var import_devtools_shared10 = require("@vue/devtools-shared");
-var _a7, _b7;
-(_b7 = (_a7 = import_devtools_shared10.target).__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__) != null ? _b7 : _a7.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = true;
+var import_devtools_shared8 = require("@vue/devtools-shared");
+var _a3, _b3;
+(_b3 = (_a3 = import_devtools_shared8.target).__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__) != null ? _b3 : _a3.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = true;
 function toggleComponentInspectorEnabled(enabled) {
-  import_devtools_shared10.target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = enabled;
+  import_devtools_shared8.target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = enabled;
 }
 function waitForInspectorInit(cb) {
   let total = 0;
   const timer = setInterval(() => {
-    if (import_devtools_shared10.target.__VUE_INSPECTOR__) {
+    if (import_devtools_shared8.target.__VUE_INSPECTOR__) {
       clearInterval(timer);
       total += 30;
       cb();
@@ -3770,22 +3891,20 @@ function waitForInspectorInit(cb) {
   }, 30);
 }
 function setupInspector() {
-  const inspector = import_devtools_shared10.target.__VUE_INSPECTOR__;
+  const inspector = import_devtools_shared8.target.__VUE_INSPECTOR__;
   const _openInEditor = inspector.openInEditor;
   inspector.openInEditor = async (...params) => {
     inspector.disable();
     _openInEditor(...params);
   };
 }
-function getVueInspector() {
+function getComponentInspector() {
   return new Promise((resolve) => {
-    if (!import_devtools_shared10.target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__)
-      resolve(null);
     function setup() {
       setupInspector();
-      resolve(import_devtools_shared10.target.__VUE_INSPECTOR__);
+      resolve(import_devtools_shared8.target.__VUE_INSPECTOR__);
     }
-    if (!import_devtools_shared10.target.__VUE_INSPECTOR__) {
+    if (!import_devtools_shared8.target.__VUE_INSPECTOR__) {
       waitForInspectorInit(() => {
         setup();
       });
@@ -3795,271 +3914,117 @@ function getVueInspector() {
   });
 }
 
-// src/core/component-inspector/index.ts
+// src/core/open-in-editor/index.ts
 init_cjs_shims();
-var CONTAINER_ELEMENT_ID = "__vue-devtools-component-inspector__";
-var CARD_ELEMENT_ID = "__vue-devtools-component-inspector__card__";
-var COMPONENT_NAME_ELEMENT_ID = "__vue-devtools-component-inspector__name__";
-var INDICATOR_ELEMENT_ID = "__vue-devtools-component-inspector__indicator__";
-var containerStyles = {
-  display: "block",
-  zIndex: 2147483640,
-  position: "fixed",
-  backgroundColor: "#42b88325",
-  border: "1px solid #42b88350",
-  borderRadius: "5px",
-  transition: "all 0.1s ease-in",
-  pointerEvents: "none"
-};
-var cardStyles = {
-  fontFamily: "Arial, Helvetica, sans-serif",
-  padding: "5px 8px",
-  borderRadius: "4px",
-  textAlign: "left",
-  position: "absolute",
-  left: 0,
-  color: "#e9e9e9",
-  fontSize: "14px",
-  fontWeight: 600,
-  lineHeight: "24px",
-  backgroundColor: "#42b883",
-  boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
-};
-var indicatorStyles = {
-  display: "inline-block",
-  fontWeight: 400,
-  fontStyle: "normal",
-  fontSize: "12px",
-  opacity: 0.7
-};
-function getContainerElement() {
-  return document.getElementById(CONTAINER_ELEMENT_ID);
-}
-function getCardElement() {
-  return document.getElementById(CARD_ELEMENT_ID);
-}
-function getIndicatorElement() {
-  return document.getElementById(INDICATOR_ELEMENT_ID);
-}
-function getNameElement() {
-  return document.getElementById(COMPONENT_NAME_ELEMENT_ID);
-}
-function getStyles(bounds) {
-  return {
-    left: `${Math.round(bounds.left * 100) / 100}px`,
-    top: `${Math.round(bounds.top * 100) / 100}px`,
-    width: `${Math.round(bounds.width * 100) / 100}px`,
-    height: `${Math.round(bounds.height * 100) / 100}px`
-  };
-}
-function create(options) {
-  var _a9;
-  const containerEl = document.createElement("div");
-  containerEl.id = (_a9 = options.elementId) != null ? _a9 : CONTAINER_ELEMENT_ID;
-  Object.assign(containerEl.style, {
-    ...containerStyles,
-    ...getStyles(options.bounds),
-    ...options.style
-  });
-  const cardEl = document.createElement("span");
-  cardEl.id = CARD_ELEMENT_ID;
-  Object.assign(cardEl.style, {
-    ...cardStyles,
-    top: options.bounds.top < 35 ? 0 : "-35px"
-  });
-  const nameEl = document.createElement("span");
-  nameEl.id = COMPONENT_NAME_ELEMENT_ID;
-  nameEl.innerHTML = `&lt;${options.name}&gt;&nbsp;&nbsp;`;
-  const indicatorEl = document.createElement("i");
-  indicatorEl.id = INDICATOR_ELEMENT_ID;
-  indicatorEl.innerHTML = `${Math.round(options.bounds.width * 100) / 100} x ${Math.round(options.bounds.height * 100) / 100}`;
-  Object.assign(indicatorEl.style, indicatorStyles);
-  cardEl.appendChild(nameEl);
-  cardEl.appendChild(indicatorEl);
-  containerEl.appendChild(cardEl);
-  document.body.appendChild(containerEl);
-  return containerEl;
-}
-function update(options) {
-  const containerEl = getContainerElement();
-  const cardEl = getCardElement();
-  const nameEl = getNameElement();
-  const indicatorEl = getIndicatorElement();
-  if (containerEl) {
-    Object.assign(containerEl.style, {
-      ...containerStyles,
-      ...getStyles(options.bounds)
-    });
-    Object.assign(cardEl.style, {
-      top: options.bounds.top < 35 ? 0 : "-35px"
-    });
-    nameEl.innerHTML = `&lt;${options.name}&gt;&nbsp;&nbsp;`;
-    indicatorEl.innerHTML = `${Math.round(options.bounds.width * 100) / 100} x ${Math.round(options.bounds.height * 100) / 100}`;
-  }
-}
-function toggleComponentInspector(options) {
-  if (options.visible) {
-    const instance = getComponentInstance(devtoolsContext.appRecord, options.id);
-    if (instance && (options.bounds.width || options.bounds.height)) {
-      const name = getInstanceName(instance);
-      const el = getContainerElement();
-      el ? update({ ...options, name }) : create({ ...options, name });
-    }
-  } else {
-    const el = getContainerElement();
-    if (el)
-      el.style.display = "none";
-  }
-}
-function highlight(instance) {
-  const bounds = getComponentBoundingRect(instance);
-  const name = getInstanceName(instance);
-  const container = getContainerElement();
-  container ? update({ bounds, name }) : create({ bounds, name });
-}
-function unhighlight() {
-  const el = getContainerElement();
-  if (el)
-    el.style.display = "none";
-}
-var inspectInstance = null;
-function inspectFn(e) {
-  const target8 = e.target;
-  if (target8) {
-    const instance = target8.__vueParentComponent;
-    if (instance) {
-      inspectInstance = instance;
-      const el = instance.vnode.el;
-      if (el) {
-        const bounds = getComponentBoundingRect(instance);
-        const name = getInstanceName(instance);
-        const container = getContainerElement();
-        container ? update({ bounds, name }) : create({ bounds, name });
-      }
+var import_devtools_shared9 = require("@vue/devtools-shared");
+function openInEditor(options = {}) {
+  const { file, line = 0, column = 0 } = options;
+  if (file) {
+    const baseUrl = window.location.origin;
+    if (devtoolsState.vitePluginDetected) {
+      import_devtools_shared9.target.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column);
+    } else {
     }
   }
 }
-function selectComponentFn(e, cb) {
-  var _a9;
-  e.preventDefault();
-  e.stopPropagation();
-  if (inspectInstance) {
-    const app = (_a9 = devtoolsContext.appRecord) == null ? void 0 : _a9.app;
-    getComponentId({
-      app,
-      uid: app.uid,
-      instance: inspectInstance
-    }).then((id) => {
-      cb(id);
-    });
-  }
-}
-function inspectComponentInspector() {
-  window.addEventListener("mouseover", inspectFn);
-  return new Promise((resolve) => {
-    function onSelect(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      selectComponentFn(e, (id) => {
-        window.removeEventListener("click", onSelect);
-        window.removeEventListener("mouseover", inspectFn);
-        const el = getContainerElement();
-        if (el)
-          el.style.display = "none";
-        resolve(JSON.stringify({ id }));
-      });
-    }
-    window.addEventListener("click", onSelect);
-  });
-}
-function scrollToComponent(options) {
-  const instance = getComponentInstance(devtoolsContext.appRecord, options.id);
-  if (instance) {
-    const [el] = getRootElementsFromComponentInstance(instance);
-    if (typeof el.scrollIntoView === "function") {
-      el.scrollIntoView({
-        behavior: "smooth"
-      });
-    } else {
-      const bounds = getComponentBoundingRect(instance);
-      const scrollTarget = document.createElement("div");
-      const styles = {
-        ...getStyles(bounds),
-        position: "absolute"
-      };
-      Object.assign(scrollTarget.style, styles);
-      document.body.appendChild(scrollTarget);
-      scrollTarget.scrollIntoView({
-        behavior: "smooth"
-      });
-      setTimeout(() => {
-        document.body.removeChild(scrollTarget);
-      }, 2e3);
-    }
-    setTimeout(() => {
-      const bounds = getComponentBoundingRect(instance);
-      if (bounds.width || bounds.height) {
-        const name = getInstanceName(instance);
-        const el2 = getContainerElement();
-        el2 ? update({ ...options, name, bounds }) : create({ ...options, name, bounds });
-        setTimeout(() => {
-          if (el2)
-            el2.style.display = "none";
-        }, 1500);
-      }
-    }, 1200);
+
+// src/api/on.ts
+init_cjs_shims();
+var on2 = {
+  // #region compatible with old devtools
+  addTimelineEvent(fn) {
+    apiHooks.hook("timeline:add-event" /* ADD_TIMELINE_EVENT */, fn);
+  },
+  inspectComponent(fn) {
+    apiHooks.hook("component-state:inspect" /* COMPONENT_STATE_INSPECT */, fn);
+  },
+  visitComponentTree(fn) {
+    apiHooks.hook("component-tree:visit" /* VISIT_COMPONENT_TREE */, fn);
+  },
+  getInspectorTree(fn) {
+    apiHooks.hook("inspector-tree:get" /* GET_INSPECTOR_TREE */, fn);
+  },
+  getInspectorState(fn) {
+    apiHooks.hook("inspector-state:get" /* GET_INSPECTOR_STATE */, fn);
+  },
+  sendInspectorTree(fn) {
+    apiHooks.hook("inspector-tree:send" /* SEND_INSPECTOR_TREE */, fn);
+  },
+  sendInspectorState(fn) {
+    apiHooks.hook("inspector-state:send" /* SEND_INSPECTOR_STATE */, fn);
+  },
+  editInspectorState(fn) {
+    apiHooks.hook("inspector-state:edit" /* EDIT_INSPECTOR_STATE */, fn);
+  },
+  editComponentState() {
+  },
+  componentUpdated(fn) {
+    apiHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
+  },
+  // #endregion compatible with old devtools
+  // router
+  routerInfoUpdated(fn) {
+    apiHooks.hook("router-info:updated" /* ROUTER_INFO_UPDATED */, fn);
+  },
+  // component highlighter
+  getComponentBoundingRect(fn) {
+    apiHooks.hook("component-bounding-rect:get" /* GET_COMPONENT_BOUNDING_RECT */, fn);
+  },
+  // custom tabs
+  customTabsUpdated(fn) {
+    apiHooks.hook("custom-tabs:updated" /* CUSTOM_TABS_UPDATED */, fn);
+  },
+  // custom commands
+  customCommandsUpdated(fn) {
+    apiHooks.hook("custom-commands:updated" /* CUSTOM_COMMANDS_UPDATED */, fn);
+  },
+  devtoolsStateUpdated(fn) {
+    apiHooks.hook("devtools:state-updated" /* DEVTOOLS_STATE_UPDATED */, fn);
   }
-}
+};
 
 // src/api/off.ts
 init_cjs_shims();
-function clear() {
+function remove() {
   apiHooks.removeAllHooks();
 }
 
-// src/api/index.ts
+// src/api/api.ts
 var DevToolsPluginApi = class {
   constructor() {
+    this.clear = remove;
     this.on = on2;
-    this.clear = clear;
   }
-  toggleApp(id) {
-    return toggleAppRecord(id);
-  }
-  addTimelineEvent(payload) {
-    apiHooks.callHook("timeline:add-event" /* ADD_TIMELINE_EVENT */, payload);
+  // #region compatible with old devtools
+  // timeline layer
+  addTimelineLayer(payload) {
+    addTimelineLayer(payload);
   }
-  toggleComponentInspector(payload) {
-    return toggleComponentInspector(payload);
+  // timeline event
+  addTimelineEvent(...params) {
+    apiHooks.callHook("timeline:add-event" /* ADD_TIMELINE_EVENT */, ...params);
   }
-  inspectComponentInspector() {
-    return inspectComponentInspector();
+  // add inspector
+  addInspector(payload) {
+    addInspector({
+      id: payload.id,
+      nodeId: "",
+      filter: "",
+      treeFilterPlaceholder: payload.treeFilterPlaceholder || ""
+    });
   }
-  scrollToComponent(payload) {
-    return scrollToComponent(payload);
+  highlightElement(instance) {
+    highlight(instance);
   }
-  getComponentBoundingRect(payload) {
-    const { inspectorId, instanceId = "" } = payload;
-    const _payload = {
-      app: devtoolsContext.appRecord.app,
-      inspectorId,
-      instanceId,
-      rect: {
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0
-      }
-    };
-    apiHooks.callHookWith((callbacks) => {
-      callbacks.map((cb) => cb(_payload));
-    }, "component-bounding-rect:get" /* GET_COMPONENT_BOUNDING_RECT */);
-    return stringify(_payload.rect);
+  unhighlightElement() {
+    unhighlight();
   }
+  // inspector
   async getInspectorTree(payload = {}) {
+    var _a10;
     const { inspectorId, filter = "", instanceId = "" } = payload;
     const _payload = {
-      app: devtoolsContext.appRecord.app,
+      app: (_a10 = devtoolsContext.appRecord) == null ? void 0 : _a10.app,
       inspectorId,
       instanceId,
       filter,
@@ -4077,9 +4042,10 @@ var DevToolsPluginApi = class {
     return stringify(_payload.rootNodes);
   }
   getInspectorState(payload = {}) {
+    var _a10;
     const { inspectorId, nodeId } = payload;
     const _payload = {
-      app: devtoolsContext.appRecord.app,
+      app: (_a10 = devtoolsContext.appRecord) == null ? void 0 : _a10.app,
       inspectorId,
       nodeId
     };
@@ -4094,10 +4060,11 @@ var DevToolsPluginApi = class {
     return stringify(state);
   }
   async editInspectorState(payload) {
+    var _a10;
     const stateEditor2 = new StateEditor();
     apiHooks.callHook("inspector-state:edit" /* EDIT_INSPECTOR_STATE */, {
       ...payload,
-      app: devtoolsContext.appRecord.app,
+      app: (_a10 = devtoolsContext.appRecord) == null ? void 0 : _a10.app,
       set: (obj, path = payload.path, value = payload.state.value, cb) => {
         stateEditor2.set(obj, path, value, cb || stateEditor2.createDefaultSetCallback(payload.state));
       }
@@ -4125,50 +4092,17 @@ var DevToolsPluginApi = class {
       apiHooks.callHook("inspector-state:send" /* SEND_INSPECTOR_STATE */, stringify({ ...parse(res), inspectorId }));
     }
   }
-  addCustomTab(tab) {
-    addCustomTab(tab);
-  }
-  addCustomCommand(action) {
-    addCustomCommand(action);
-  }
-  removeCustomCommand(actionId) {
-    removeCustomCommand(actionId);
-  }
-  addInspector(payload) {
-    var _a9;
-    addInspector({
-      id: payload.id,
-      nodeId: "",
-      filter: "",
-      treeFilterPlaceholder: (_a9 = payload.treeFilterPlaceholder) != null ? _a9 : ""
-    });
-  }
-  openInEditor(payload) {
-    openInEditor(payload);
-  }
-  highlightElement(instance) {
-    highlight(instance);
-  }
-  unhighlightElement() {
-    unhighlight();
-  }
   async getComponentInstances(app) {
     const appRecord = app.__VUE_DEVTOOLS_APP_RECORD__;
     const appId = appRecord.id.toString();
     const instances = [...appRecord.instanceMap].filter(([key]) => key.split(":")[0] === appId).map(([, instance]) => instance);
     return instances;
   }
-  // Vite only
-  getVueInspector() {
-    return getVueInspector();
-  }
-  visitComponentTree(payload) {
-    apiHooks.callHook("component-tree:visit" /* VISIT_COMPONENT_TREE */, payload);
-  }
-  addTimelineLayer(payload) {
-    addTimelineLayer(payload);
+  visitComponentTree(...params) {
+    apiHooks.callHook("component-tree:visit" /* VISIT_COMPONENT_TREE */, ...params);
   }
   notifyComponentUpdate() {
+    apiHooks.callHook("component:updated" /* COMPONENT_UPDATED */);
   }
   now() {
     return now();
@@ -4178,83 +4112,255 @@ var DevToolsPluginApi = class {
       logStoreChanges: null
     };
   }
+  // #endregion compatible with old devtools
+  //  #region highlighter
+  toggleComponentInspector(...params) {
+    return toggleComponentHighLighter(...params);
+  }
+  inspectComponentInspector() {
+    return inspectComponentHighLighter();
+  }
+  scrollToComponent(...params) {
+    return scrollToComponent(...params);
+  }
+  getComponentBoundingRect(...params) {
+    var _a10;
+    const { inspectorId, instanceId = "" } = params[0];
+    const _payload = {
+      app: (_a10 = devtoolsContext.appRecord) == null ? void 0 : _a10.app,
+      inspectorId,
+      instanceId,
+      rect: {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      }
+    };
+    apiHooks.callHookWith((callbacks) => {
+      callbacks.map((cb) => cb(_payload));
+    }, "component-bounding-rect:get" /* GET_COMPONENT_BOUNDING_RECT */);
+    return stringify(_payload.rect);
+  }
+  // #endregion highlighter
+  toggleApp(id) {
+    return toggleActiveAppRecord(id);
+  }
+  addCustomTab(tab) {
+    addCustomTab(tab);
+  }
+  addCustomCommand(action) {
+    addCustomCommand(action);
+  }
+  removeCustomCommand(actionId) {
+    removeCustomCommand(actionId);
+  }
+  openInEditor(payload) {
+    openInEditor(payload);
+  }
+  getVueInspector() {
+    return getComponentInspector();
+  }
 };
 
-// src/core/general/app.ts
+// src/state/state.ts
+var STATE_KEY = "__VUE_DEVTOOLS_GLOBAL_STATE__";
+function initStateFactory() {
+  return {
+    connected: false,
+    clientConnected: false,
+    appRecords: [],
+    activeAppRecord: null,
+    selectedComponentId: null,
+    pluginBuffer: [],
+    tabs: [],
+    commands: [],
+    vitePluginDetected: false,
+    activeAppRecordId: null
+  };
+}
+var _a4, _b4;
+(_b4 = (_a4 = import_devtools_shared10.target)[STATE_KEY]) != null ? _b4 : _a4[STATE_KEY] = initStateFactory();
+var callStateUpdatedHook = (0, import_perfect_debounce3.debounce)((state, oldState) => {
+  apiHooks.callHook("devtools:state-updated" /* DEVTOOLS_STATE_UPDATED */, state, oldState);
+}, 80);
+var callConnectedUpdatedHook = (0, import_perfect_debounce3.debounce)((state, oldState) => {
+  apiHooks.callHook("devtools:connected-updated" /* DEVTOOLS_CONNECTED_UPDATED */, state, oldState);
+}, 80);
+var devtoolsState = new Proxy(import_devtools_shared10.target[STATE_KEY], {
+  get(target9, property) {
+    return import_devtools_shared10.target[STATE_KEY][property];
+  },
+  deleteProperty(target9, property) {
+    delete target9[property];
+    return true;
+  },
+  set(target9, property, value) {
+    const oldState = { ...import_devtools_shared10.target[STATE_KEY] };
+    target9[property] = value;
+    import_devtools_shared10.target[STATE_KEY][property] = value;
+    callStateUpdatedHook(import_devtools_shared10.target[STATE_KEY], oldState);
+    if (["connected", "clientConnected"].includes(property.toString()) && oldState[property] !== value)
+      callConnectedUpdatedHook(import_devtools_shared10.target[STATE_KEY], oldState);
+    return true;
+  }
+});
+Object.defineProperty(devtoolsState.tabs, "push", {
+  configurable: true,
+  value(...items) {
+    const result = Array.prototype.push.apply(this, items);
+    devtoolsState.tabs = this;
+    apiHooks.callHook("custom-tabs:updated" /* CUSTOM_TABS_UPDATED */, this);
+    return result;
+  }
+});
+["push", "splice"].forEach((method) => {
+  Object.defineProperty(devtoolsState.commands, method, {
+    configurable: true,
+    value(...args) {
+      const result = Array.prototype[method].apply(this, args);
+      devtoolsState.commands = this;
+      apiHooks.callHook("custom-commands:updated" /* CUSTOM_COMMANDS_UPDATED */, this);
+      return result;
+    }
+  });
+});
+
+// src/state/app-record.ts
+init_cjs_shims();
+var import_devtools_shared13 = require("@vue/devtools-shared");
+
+// src/state/router.ts
 init_cjs_shims();
 var import_devtools_shared11 = require("@vue/devtools-shared");
-var import_speakingurl = __toESM(require_speakingurl2(), 1);
-var _a8, _b8;
-var appRecordInfo = (_b8 = (_a8 = import_devtools_shared11.target).__VUE_DEVTOOLS_APP_RECROD_INFO__) != null ? _b8 : _a8.__VUE_DEVTOOLS_APP_RECROD_INFO__ = {
-  id: 0,
-  appIds: /* @__PURE__ */ new Set()
+var ROUTER_KEY = "__VUE_DEVTOOLS_ROUTER__";
+var ROUTER_INFO_KEY = "__VUE_DEVTOOLS_ROUTER_INFO__";
+var _a5, _b5;
+(_b5 = (_a5 = import_devtools_shared11.target)[ROUTER_INFO_KEY]) != null ? _b5 : _a5[ROUTER_INFO_KEY] = {
+  currentRoute: null,
+  routes: []
 };
-function getAppRecordName(app, fallbackName) {
-  var _a9;
-  return ((_a9 = app == null ? void 0 : app._component) == null ? void 0 : _a9.name) || `App ${fallbackName}`;
+var _a6, _b6;
+(_b6 = (_a6 = import_devtools_shared11.target)[ROUTER_KEY]) != null ? _b6 : _a6[ROUTER_KEY] = null;
+var devtoolsRouterInfo = new Proxy(import_devtools_shared11.target[ROUTER_INFO_KEY], {
+  get(target9, property) {
+    return import_devtools_shared11.target[ROUTER_INFO_KEY][property];
+  }
+});
+
+// src/state/context.ts
+init_cjs_shims();
+var import_devtools_shared12 = require("@vue/devtools-shared");
+var CONTEXT_KEY = "__VUE_DEVTOOLS_CONTEXT__";
+function initContextFactory() {
+  return {
+    appRecord: null,
+    api: null,
+    inspector: [],
+    timelineLayer: [],
+    routerInfo: {},
+    router: null,
+    activeInspectorTreeId: "",
+    componentPluginHookBuffer: []
+  };
 }
-function getAppRootInstance(app) {
-  var _a9, _b9, _c, _d;
-  if (app._instance)
-    return app._instance;
-  else if ((_b9 = (_a9 = app._container) == null ? void 0 : _a9._vnode) == null ? void 0 : _b9.component)
-    return (_d = (_c = app._container) == null ? void 0 : _c._vnode) == null ? void 0 : _d.component;
+var _a7, _b7;
+(_b7 = (_a7 = import_devtools_shared12.target)[CONTEXT_KEY]) != null ? _b7 : _a7[CONTEXT_KEY] = initContextFactory();
+function resetDevToolsContext() {
+  import_devtools_shared12.target[CONTEXT_KEY] = initContextFactory();
 }
-function getAppRecordId(app, defaultId) {
-  if (app.__VUE_DEVTOOLS_APP_RECORD_ID__ != null)
-    return app.__VUE_DEVTOOLS_APP_RECORD_ID__;
-  let id = defaultId != null ? defaultId : (appRecordInfo.id++).toString();
-  if (defaultId && appRecordInfo.appIds.has(id)) {
-    let count = 1;
-    while (appRecordInfo.appIds.has(`${defaultId}_${count}`))
-      count++;
-    id = `${defaultId}_${count}`;
+var devtoolsContext = new Proxy(import_devtools_shared12.target[CONTEXT_KEY], {
+  get(target9, property) {
+    if (property === "router")
+      return import_devtools_shared12.target[ROUTER_KEY];
+    else if (property === "clear")
+      return resetDevToolsContext;
+    return import_devtools_shared12.target[CONTEXT_KEY][property];
+  },
+  set(target9, property, value) {
+    import_devtools_shared12.target[CONTEXT_KEY][property] = value;
+    return true;
   }
-  appRecordInfo.appIds.add(id);
-  app.__VUE_DEVTOOLS_APP_RECORD_ID__ = id;
-  return id;
-}
-function createAppRecord(app) {
-  const rootInstance = getAppRootInstance(app);
-  if (rootInstance) {
-    appRecordInfo.id++;
-    const name = getAppRecordName(app, appRecordInfo.id.toString());
-    const id = getAppRecordId(app, (0, import_speakingurl.default)(name));
-    const record = {
-      id,
-      name,
-      instanceMap: /* @__PURE__ */ new Map(),
-      rootInstance
-    };
-    app.__VUE_DEVTOOLS_APP_RECORD__ = record;
-    const rootId = `${record.id}:root`;
-    record.instanceMap.set(rootId, record.rootInstance);
-    record.rootInstance.__VUE_DEVTOOLS_UID__ = rootId;
-    return record;
-  } else {
-    return {};
+});
+
+// src/state/app-record.ts
+var devtoolsAppRecords = new Proxy(devtoolsState.appRecords, {
+  get(_, property) {
+    if (property === "value")
+      return devtoolsState.appRecords;
+    else if (property === "active")
+      return devtoolsState.activeAppRecord;
+    else if (property === "activeId")
+      return devtoolsState.activeAppRecordId;
+  },
+  set(target9, property, value) {
+    var _a10;
+    const oldState = { ...devtoolsState };
+    if (property === "value") {
+      devtoolsState.appRecords = value;
+    } else if (property === "active") {
+      const _value = value;
+      devtoolsState.activeAppRecord = _value;
+      devtoolsContext.appRecord = _value;
+      devtoolsContext.api = _value.api;
+      devtoolsContext.inspector = (_a10 = _value.inspector) != null ? _a10 : [];
+      normalizeRouterInfo(value);
+      devtoolsContext.routerInfo = devtoolsRouterInfo;
+    } else if (property === "activeId") {
+      devtoolsState.activeAppRecordId = value;
+    }
+    callStateUpdatedHook(devtoolsState, oldState);
+    if (["connected", "clientConnected"].includes(property.toString()) && oldState[property] !== value)
+      callConnectedUpdatedHook(devtoolsState, oldState);
+    return true;
   }
+});
+var _a8, _b8;
+var appRecordInfo = (_b8 = (_a8 = import_devtools_shared13.target).__VUE_DEVTOOLS_APP_RECROD_INFO__) != null ? _b8 : _a8.__VUE_DEVTOOLS_APP_RECROD_INFO__ = {
+  id: 0,
+  appIds: /* @__PURE__ */ new Set()
+};
+
+// src/state/env.ts
+init_cjs_shims();
+var import_devtools_shared14 = require("@vue/devtools-shared");
+var _a9, _b9;
+(_b9 = (_a9 = import_devtools_shared14.target).__VUE_DEVTOOLS_ENV__) != null ? _b9 : _a9.__VUE_DEVTOOLS_ENV__ = {
+  vitePluginDetected: false
+};
+function getDevToolsEnv() {
+  return import_devtools_shared14.target.__VUE_DEVTOOLS_ENV__;
+}
+function setDevToolsEnv(env) {
+  import_devtools_shared14.target.__VUE_DEVTOOLS_ENV__ = {
+    ...import_devtools_shared14.target.__VUE_DEVTOOLS_ENV__,
+    ...env
+  };
 }
 
-// src/core/general/index.ts
+// src/core/index.ts
 function initDevTools() {
-  var _a9, _b9, _c;
-  devtoolsState.vitePluginDetected = !!import_devtools_shared12.target.__VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__;
-  const isNewDevTools = ((_a9 = import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a9.id) === "vue-devtools-next";
-  if (import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isNewDevTools)
+  var _a10;
+  devtoolsState.vitePluginDetected = getDevToolsEnv().vitePluginDetected;
+  const isDevToolsNext = ((_a10 = import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a10.id) === "vue-devtools-next";
+  if (import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isDevToolsNext)
     return;
-  if (import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__)
+  if (import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__)
     Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
   else
-    import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
-  (_c = (_b9 = import_devtools_shared12.target).__VUE_DEVTOOLS_APP_RECORDS__) != null ? _c : _b9.__VUE_DEVTOOLS_APP_RECORDS__ = [];
-  hook.on.setupDevtoolsPlugin(collectRegisteredPlugin);
+    import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
+  hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
+    collectDevToolsPlugin(pluginDescriptor, setupFn);
+    const { app, api } = devtoolsAppRecords.active || {};
+    if (!app || !api)
+      return;
+    setupExternalPlugin([pluginDescriptor, setupFn], app, api);
+  });
   hook.on.vueAppInit(async (app, version) => {
-    var _a10;
     const record = createAppRecord(app);
     const api = new DevToolsPluginApi();
-    devtoolsState.appRecords = [
-      ...(_a10 = devtoolsState.appRecords) != null ? _a10 : [],
+    devtoolsAppRecords.value = [
+      ...devtoolsAppRecords.value,
       {
         ...record,
         app,
@@ -4262,10 +4368,10 @@ function initDevTools() {
         api
       }
     ];
-    if (devtoolsState.appRecords.length === 1) {
-      await setActiveAppRecord(devtoolsState.appRecords[0]);
+    if (devtoolsAppRecords.value.length === 1) {
+      await setActiveAppRecord(devtoolsAppRecords.value[0]);
       devtoolsState.connected = true;
-      devtoolsHooks.callHook(import_devtools_schema3.DevToolsHooks.APP_CONNECTED);
+      devtoolsHooks.callHook("app:connected" /* APP_CONNECTED */);
     }
   });
   subscribeDevToolsHook();
@@ -4305,40 +4411,29 @@ function onDevToolsClientConnected(fn) {
 var devtools = {
   state: devtoolsState,
   context: devtoolsContext,
-  init: initDevTools,
   hook,
+  init: initDevTools,
   get api() {
     return devtoolsContext.api;
   }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ESC,
-  INFINITY,
-  MAX_ARRAY_SIZE,
-  MAX_STRING_SIZE,
-  NAN,
-  NEGATIVE_INFINITY,
   UNDEFINED,
   addCustomCommand,
   addCustomTab,
   devtools,
-  fnTypeRE,
   formatInspectorStateValue,
   getInspectorStateValueType,
-  getRawValue,
-  now,
+  getRaw,
   onDevToolsClientConnected,
   onDevToolsConnected,
   parse,
-  rawTypeRE,
   removeCustomCommand,
+  setDevToolsEnv,
   setupDevToolsPlugin,
-  specialTypeRE,
   stringify,
-  symbolRE,
   toEdit,
   toSubmit,
-  toggleComponentInspectorEnabled,
-  vueBuiltins
+  toggleComponentInspectorEnabled
 });