@vue/devtools-kit 7.4.4 → 7.4.5

package/dist/index.js

@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target22) => (target22 = mod != null ? __create(
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.0_@types+node@20.16.3__@swc+core@1.5.29_jiti@1.21.6__poim247rgdwcqyeqwscqjhxddq/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.0_@types+node@20.16.5__@swc+core@1.5.29_jiti@1.21.6__hrrjfaj2jdrhlrlzgjkczhq5ey/node_modules/tsup/assets/esm_shims.js
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.0_@types+node@20.16.3__@swc+core@1.5.29_jiti@1.21.6__poim247rgdwcqyeqwscqjhxddq/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.2.4_@microsoft+api-extractor@7.43.0_@types+node@20.16.5__@swc+core@1.5.29_jiti@1.21.6__hrrjfaj2jdrhlrlzgjkczhq5ey/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
   }
 });
@@ -1579,55 +1579,33 @@ init_esm_shims();
 init_esm_shims();
 import { isNuxtApp, target as target13 } from "@vue/devtools-shared";
 
-// src/hook/index.ts
-init_esm_shims();
-import { target as target10 } from "@vue/devtools-shared";
-import { createHooks as createHooks2 } from "hookable";
-
-// src/types/index.ts
-init_esm_shims();
-
-// src/types/inspector.ts
-init_esm_shims();
-
-// src/types/plugin.ts
-init_esm_shims();
-
-// src/types/app.ts
-init_esm_shims();
-
-// src/types/timeline.ts
-init_esm_shims();
-
-// src/types/component.ts
-init_esm_shims();
-
-// src/types/hook.ts
-init_esm_shims();
-
-// src/types/tab.ts
-init_esm_shims();
-
-// src/types/command.ts
-init_esm_shims();
-
-// src/types/router.ts
+// src/compat/index.ts
 init_esm_shims();
+import { target } from "@vue/devtools-shared";
+function onLegacyDevToolsPluginApiAvailable(cb) {
+  if (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__) {
+    cb();
+    return;
+  }
+  Object.defineProperty(target, "__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__", {
+    set(value) {
+      if (value)
+        cb();
+    },
+    configurable: true
+  });
+}
 
 // src/ctx/index.ts
 init_esm_shims();
-import { target as target9 } from "@vue/devtools-shared";
-
-// src/ctx/hook.ts
-init_esm_shims();
-import { createHooks } from "hookable";
+import { target as target11 } from "@vue/devtools-shared";
 
-// src/core/component-highlighter/index.ts
+// src/ctx/api.ts
 init_esm_shims();
+import { target as target9 } from "@vue/devtools-shared";
 
-// src/core/component/utils/index.ts
+// src/core/component/state/editor.ts
 init_esm_shims();
-import { basename, classify } from "@vue/devtools-shared";
 
 // src/shared/stub-vue.ts
 init_esm_shims();
@@ -1650,6 +1628,8 @@ function toRaw(observed) {
 var Fragment = Symbol.for("v-fgt");
 
 // src/core/component/utils/index.ts
+init_esm_shims();
+import { basename, classify } from "@vue/devtools-shared";
 function getComponentTypeName(options) {
   return options.name || options._componentTag || options.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ || options.__name;
 }
@@ -1749,6 +1729,146 @@ function ensurePropertyExists(obj, key, skipObjCheck = false) {
   return skipObjCheck ? key in obj : typeof obj === "object" && obj !== null ? key in obj : false;
 }
 
+// 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();
+      if (object instanceof Map)
+        object = object.get(section);
+      if (object instanceof Set)
+        object = Array.from(object.values())[section];
+      else 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++) {
+      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;
+    }
+    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 (toRaw(object) instanceof Map)
+          object.delete(field);
+        else if (toRaw(object) instanceof Set)
+          object.delete(Array.from(object.values())[field]);
+        else Reflect.deleteProperty(object, field);
+      }
+      if (!state.remove) {
+        const target22 = object[state.newKey || field];
+        if (this.refEditor.isRef(target22))
+          this.refEditor.set(target22, value);
+        else if (toRaw(object) instanceof Map)
+          object.set(state.newKey || field, value);
+        else if (toRaw(object) instanceof Set)
+          object.add(value);
+        else
+          object[state.newKey || field] = value;
+      }
+    };
+  }
+};
+var RefStateEditor = class {
+  set(ref, value) {
+    if (isRef(ref)) {
+      ref.value = value;
+    } else {
+      if (ref instanceof Set && Array.isArray(value)) {
+        ref.clear();
+        value.forEach((v) => ref.add(v));
+        return;
+      }
+      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));
+    }
+  }
+  get(ref) {
+    return isRef(ref) ? ref.value : ref;
+  }
+  isRef(ref) {
+    return isRef(ref) || isReactive(ref);
+  }
+};
+async function editComponentState(payload, stateEditor2) {
+  const { path, nodeId, state, type } = payload;
+  const instance = getComponentInstance(activeAppRecord.value, nodeId);
+  if (!instance)
+    return;
+  const targetPath = path.slice();
+  let target22;
+  if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0]))
+    target22 = instance.devtoolsRawSetupState;
+  if (instance.data && Object.keys(instance.data).includes(path[0]))
+    target22 = instance.data;
+  if (target22 && targetPath) {
+    if (state.type === "object" && type === "reactive") {
+    }
+    stateEditor2.set(target22, targetPath, state.value, stateEditor2.createDefaultSetCallback(state));
+  }
+}
+var stateEditor = new StateEditor();
+async function editState(payload) {
+  editComponentState(payload, stateEditor);
+}
+
 // src/core/component/tree/el.ts
 init_esm_shims();
 function getRootElementsFromComponentInstance(instance) {
@@ -1771,6 +1891,9 @@ function getFragmentRootElements(vnode) {
   return list;
 }
 
+// src/core/component-highlighter/index.ts
+init_esm_shims();
+
 // src/core/component/state/bounding-rect.ts
 init_esm_shims();
 function createRect() {
@@ -2060,194 +2183,75 @@ function scrollToComponent(options) {
   }
 }
 
-// src/ctx/inspector.ts
+// src/core/component-inspector/index.ts
 init_esm_shims();
 import { target as target2 } from "@vue/devtools-shared";
-import { debounce as debounce2 } from "perfect-debounce";
+var _a, _b;
+(_b = (_a = target2).__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__) != null ? _b : _a.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = true;
+function toggleComponentInspectorEnabled(enabled) {
+  target2.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = enabled;
+}
+function waitForInspectorInit(cb) {
+  let total = 0;
+  const timer = setInterval(() => {
+    if (target2.__VUE_INSPECTOR__) {
+      clearInterval(timer);
+      total += 30;
+      cb();
+    }
+    if (total >= /* 5s */
+    5e3)
+      clearInterval(timer);
+  }, 30);
+}
+function setupInspector() {
+  const inspector = target2.__VUE_INSPECTOR__;
+  const _openInEditor = inspector.openInEditor;
+  inspector.openInEditor = async (...params) => {
+    inspector.disable();
+    _openInEditor(...params);
+  };
+}
+function getComponentInspector() {
+  return new Promise((resolve) => {
+    function setup() {
+      setupInspector();
+      resolve(target2.__VUE_INSPECTOR__);
+    }
+    if (!target2.__VUE_INSPECTOR__) {
+      waitForInspectorInit(() => {
+        setup();
+      });
+    } else {
+      setup();
+    }
+  });
+}
+
+// src/core/open-in-editor/index.ts
+init_esm_shims();
+import { target as target5 } from "@vue/devtools-shared";
 
 // src/ctx/state.ts
 init_esm_shims();
 import { target as global, isUrlString } from "@vue/devtools-shared";
+import { debounce as debounce2 } from "perfect-debounce";
+
+// src/ctx/hook.ts
+init_esm_shims();
+import { createHooks } from "hookable";
+
+// src/ctx/inspector.ts
+init_esm_shims();
+import { target as target4 } from "@vue/devtools-shared";
 import { debounce } from "perfect-debounce";
-var _a, _b;
-(_b = (_a = global).__VUE_DEVTOOLS_KIT_APP_RECORDS__) != null ? _b : _a.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = [];
-var _a2, _b2;
-(_b2 = (_a2 = global).__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__) != null ? _b2 : _a2.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ = {};
-var _a3, _b3;
-(_b3 = (_a3 = global).__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__) != null ? _b3 : _a3.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ = "";
-var _a4, _b4;
-(_b4 = (_a4 = global).__VUE_DEVTOOLS_KIT_CUSTOM_TABS__) != null ? _b4 : _a4.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__ = [];
-var _a5, _b5;
-(_b5 = (_a5 = global).__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__) != null ? _b5 : _a5.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__ = [];
-var STATE_KEY = "__VUE_DEVTOOLS_KIT_GLOBAL_STATE__";
-function initStateFactory() {
-  return {
-    connected: false,
-    clientConnected: false,
-    vitePluginDetected: true,
-    appRecords: [],
-    activeAppRecordId: "",
-    tabs: [],
-    commands: [],
-    highPerfModeEnabled: true,
-    devtoolsClientDetected: {}
-  };
-}
-var _a6, _b6;
-(_b6 = (_a6 = global)[STATE_KEY]) != null ? _b6 : _a6[STATE_KEY] = initStateFactory();
-var callStateUpdatedHook = debounce((state) => {
-  devtoolsContext.hooks.callHook("devtoolsStateUpdated" /* DEVTOOLS_STATE_UPDATED */, { state });
-});
-var callConnectedUpdatedHook = debounce((state, oldState) => {
-  devtoolsContext.hooks.callHook("devtoolsConnectedUpdated" /* DEVTOOLS_CONNECTED_UPDATED */, { state, oldState });
-});
-var devtoolsAppRecords = new Proxy(global.__VUE_DEVTOOLS_KIT_APP_RECORDS__, {
-  get(_target, prop, receiver) {
-    if (prop === "value")
-      return global.__VUE_DEVTOOLS_KIT_APP_RECORDS__;
-    return global.__VUE_DEVTOOLS_KIT_APP_RECORDS__[prop];
-  }
-});
-var addDevToolsAppRecord = (app) => {
-  global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = [
-    ...global.__VUE_DEVTOOLS_KIT_APP_RECORDS__,
-    app
-  ];
-};
-var removeDevToolsAppRecord = (app) => {
-  global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = devtoolsAppRecords.value.filter((record) => record.app !== app);
-};
-var activeAppRecord = new Proxy(global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__, {
-  get(_target, prop, receiver) {
-    if (prop === "value")
-      return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__;
-    else if (prop === "id")
-      return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__;
-    return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__[prop];
-  }
-});
-function updateAllStates() {
-  callStateUpdatedHook({
-    ...global[STATE_KEY],
-    appRecords: devtoolsAppRecords.value,
-    activeAppRecordId: activeAppRecord.id,
-    tabs: global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__,
-    commands: global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__
-  });
-}
-function setActiveAppRecord(app) {
-  global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ = app;
-  updateAllStates();
-}
-function setActiveAppRecordId(id) {
-  global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ = id;
-  updateAllStates();
-}
-var devtoolsState = new Proxy(global[STATE_KEY], {
-  get(target22, property) {
-    if (property === "appRecords") {
-      return devtoolsAppRecords;
-    } else if (property === "activeAppRecordId") {
-      return activeAppRecord.id;
-    } else if (property === "tabs") {
-      return global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__;
-    } else if (property === "commands") {
-      return global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
-    }
-    return global[STATE_KEY][property];
-  },
-  deleteProperty(target22, property) {
-    delete target22[property];
-    return true;
-  },
-  set(target22, property, value) {
-    const oldState = { ...global[STATE_KEY] };
-    target22[property] = value;
-    global[STATE_KEY][property] = value;
-    return true;
-  }
-});
-function resetDevToolsState() {
-  Object.assign(global[STATE_KEY], initStateFactory());
-}
-function updateDevToolsState(state) {
-  const oldState = {
-    ...global[STATE_KEY],
-    appRecords: devtoolsAppRecords.value,
-    activeAppRecordId: activeAppRecord.id
-  };
-  if (oldState.connected !== state.connected && state.connected || oldState.clientConnected !== state.clientConnected && state.clientConnected) {
-    callConnectedUpdatedHook(global[STATE_KEY], oldState);
-  }
-  Object.assign(global[STATE_KEY], state);
-  updateAllStates();
-}
-function onDevToolsConnected(fn) {
-  return new Promise((resolve) => {
-    if (devtoolsState.connected) {
-      fn();
-      resolve();
-    }
-    devtoolsContext.hooks.hook("devtoolsConnectedUpdated" /* DEVTOOLS_CONNECTED_UPDATED */, ({ state }) => {
-      if (state.connected) {
-        fn();
-        resolve();
-      }
-    });
-  });
-}
-var resolveIcon = (icon) => {
-  if (!icon)
-    return;
-  if (icon.startsWith("baseline-")) {
-    return `custom-ic-${icon}`;
-  }
-  if (icon.startsWith("i-") || isUrlString(icon))
-    return icon;
-  return `custom-ic-baseline-${icon}`;
-};
-function addCustomTab(tab) {
-  const tabs = global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__;
-  if (tabs.some((t) => t.name === tab.name))
-    return;
-  tabs.push({
-    ...tab,
-    icon: resolveIcon(tab.icon)
-  });
-  updateAllStates();
-}
-function addCustomCommand(action) {
-  const commands = global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
-  if (commands.some((t) => t.id === action.id))
-    return;
-  commands.push({
-    ...action,
-    icon: resolveIcon(action.icon),
-    children: action.children ? action.children.map((child) => ({
-      ...child,
-      icon: resolveIcon(child.icon)
-    })) : void 0
-  });
-  updateAllStates();
-}
-function removeCustomCommand(actionId) {
-  const commands = global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
-  const index = commands.findIndex((t) => t.id === actionId);
-  if (index === -1)
-    return;
-  commands.splice(index, 1);
-  updateAllStates();
-}
-function toggleClientConnected(state) {
-  updateDevToolsState({ clientConnected: state });
-}
 
 // src/ctx/timeline.ts
 init_esm_shims();
-import { target } from "@vue/devtools-shared";
-var _a7, _b7;
-(_b7 = (_a7 = target).__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS) != null ? _b7 : _a7.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS = [];
-var devtoolsTimelineLayers = new Proxy(target.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS, {
+import { target as target3 } from "@vue/devtools-shared";
+var _a2, _b2;
+(_b2 = (_a2 = target3).__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS) != null ? _b2 : _a2.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS = [];
+var devtoolsTimelineLayers = new Proxy(target3.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS, {
   get(target22, prop, receiver) {
     return Reflect.get(target22, prop, receiver);
   }
@@ -2261,14 +2265,14 @@ function addTimelineLayer(options, descriptor) {
 }
 
 // src/ctx/inspector.ts
-var _a8, _b8;
-(_b8 = (_a8 = target2).__VUE_DEVTOOLS_KIT_INSPECTOR__) != null ? _b8 : _a8.__VUE_DEVTOOLS_KIT_INSPECTOR__ = [];
-var devtoolsInspector = new Proxy(target2.__VUE_DEVTOOLS_KIT_INSPECTOR__, {
+var _a3, _b3;
+(_b3 = (_a3 = target4).__VUE_DEVTOOLS_KIT_INSPECTOR__) != null ? _b3 : _a3.__VUE_DEVTOOLS_KIT_INSPECTOR__ = [];
+var devtoolsInspector = new Proxy(target4.__VUE_DEVTOOLS_KIT_INSPECTOR__, {
   get(target22, prop, receiver) {
     return Reflect.get(target22, prop, receiver);
   }
 });
-var callInspectorUpdatedHook = debounce2(() => {
+var callInspectorUpdatedHook = debounce(() => {
   devtoolsContext.hooks.callHook("sendInspectorToClient" /* SEND_INSPECTOR_TO_CLIENT */, getActiveInspectors());
 });
 function addInspector(inspector, descriptor) {
@@ -2467,156 +2471,183 @@ function createDevToolsCtxHooks() {
   return hooks2;
 }
 
-// src/ctx/api.ts
-init_esm_shims();
-import { target as target7 } from "@vue/devtools-shared";
-
-// src/core/component/state/editor.ts
-init_esm_shims();
-var StateEditor = class {
-  constructor() {
-    this.refEditor = new RefStateEditor();
+// src/ctx/state.ts
+var _a4, _b4;
+(_b4 = (_a4 = global).__VUE_DEVTOOLS_KIT_APP_RECORDS__) != null ? _b4 : _a4.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = [];
+var _a5, _b5;
+(_b5 = (_a5 = global).__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__) != null ? _b5 : _a5.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ = {};
+var _a6, _b6;
+(_b6 = (_a6 = global).__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__) != null ? _b6 : _a6.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ = "";
+var _a7, _b7;
+(_b7 = (_a7 = global).__VUE_DEVTOOLS_KIT_CUSTOM_TABS__) != null ? _b7 : _a7.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__ = [];
+var _a8, _b8;
+(_b8 = (_a8 = global).__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__) != null ? _b8 : _a8.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__ = [];
+var STATE_KEY = "__VUE_DEVTOOLS_KIT_GLOBAL_STATE__";
+function initStateFactory() {
+  return {
+    connected: false,
+    clientConnected: false,
+    vitePluginDetected: true,
+    appRecords: [],
+    activeAppRecordId: "",
+    tabs: [],
+    commands: [],
+    highPerfModeEnabled: true,
+    devtoolsClientDetected: {}
+  };
+}
+var _a9, _b9;
+(_b9 = (_a9 = global)[STATE_KEY]) != null ? _b9 : _a9[STATE_KEY] = initStateFactory();
+var callStateUpdatedHook = debounce2((state) => {
+  devtoolsContext.hooks.callHook("devtoolsStateUpdated" /* DEVTOOLS_STATE_UPDATED */, { state });
+});
+var callConnectedUpdatedHook = debounce2((state, oldState) => {
+  devtoolsContext.hooks.callHook("devtoolsConnectedUpdated" /* DEVTOOLS_CONNECTED_UPDATED */, { state, oldState });
+});
+var devtoolsAppRecords = new Proxy(global.__VUE_DEVTOOLS_KIT_APP_RECORDS__, {
+  get(_target, prop, receiver) {
+    if (prop === "value")
+      return global.__VUE_DEVTOOLS_KIT_APP_RECORDS__;
+    return global.__VUE_DEVTOOLS_KIT_APP_RECORDS__[prop];
   }
-  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);
-      if (object instanceof Set)
-        object = Array.from(object.values())[section];
-      else 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;
-    }
+});
+var addDevToolsAppRecord = (app) => {
+  global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = [
+    ...global.__VUE_DEVTOOLS_KIT_APP_RECORDS__,
+    app
+  ];
+};
+var removeDevToolsAppRecord = (app) => {
+  global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = devtoolsAppRecords.value.filter((record) => record.app !== app);
+};
+var activeAppRecord = new Proxy(global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__, {
+  get(_target, prop, receiver) {
+    if (prop === "value")
+      return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__;
+    else if (prop === "id")
+      return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__;
+    return global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__[prop];
   }
-  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;
-    }
-    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);
+});
+function updateAllStates() {
+  callStateUpdatedHook({
+    ...global[STATE_KEY],
+    appRecords: devtoolsAppRecords.value,
+    activeAppRecordId: activeAppRecord.id,
+    tabs: global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__,
+    commands: global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__
+  });
+}
+function setActiveAppRecord(app) {
+  global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ = app;
+  updateAllStates();
+}
+function setActiveAppRecordId(id) {
+  global.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ = id;
+  updateAllStates();
+}
+var devtoolsState = new Proxy(global[STATE_KEY], {
+  get(target22, property) {
+    if (property === "appRecords") {
+      return devtoolsAppRecords;
+    } else if (property === "activeAppRecordId") {
+      return activeAppRecord.id;
+    } else if (property === "tabs") {
+      return global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__;
+    } else if (property === "commands") {
+      return global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
     }
-    return object != null && Object.prototype.hasOwnProperty.call(object, sections[0]);
+    return global[STATE_KEY][property];
+  },
+  deleteProperty(target22, property) {
+    delete target22[property];
+    return true;
+  },
+  set(target22, property, value) {
+    const oldState = { ...global[STATE_KEY] };
+    target22[property] = value;
+    global[STATE_KEY][property] = value;
+    return true;
   }
-  createDefaultSetCallback(state) {
-    return (object, field, value) => {
-      if (state.remove || state.newKey) {
-        if (Array.isArray(object))
-          object.splice(field, 1);
-        else if (toRaw(object) instanceof Map)
-          object.delete(field);
-        else if (toRaw(object) instanceof Set)
-          object.delete(Array.from(object.values())[field]);
-        else Reflect.deleteProperty(object, field);
-      }
-      if (!state.remove) {
-        const target22 = object[state.newKey || field];
-        if (this.refEditor.isRef(target22))
-          this.refEditor.set(target22, value);
-        else if (toRaw(object) instanceof Map)
-          object.set(state.newKey || field, value);
-        else if (toRaw(object) instanceof Set)
-          object.add(value);
-        else
-          object[state.newKey || field] = value;
-      }
-    };
+});
+function resetDevToolsState() {
+  Object.assign(global[STATE_KEY], initStateFactory());
+}
+function updateDevToolsState(state) {
+  const oldState = {
+    ...global[STATE_KEY],
+    appRecords: devtoolsAppRecords.value,
+    activeAppRecordId: activeAppRecord.id
+  };
+  if (oldState.connected !== state.connected && state.connected || oldState.clientConnected !== state.clientConnected && state.clientConnected) {
+    callConnectedUpdatedHook(global[STATE_KEY], oldState);
   }
-};
-var RefStateEditor = class {
-  set(ref, value) {
-    if (isRef(ref)) {
-      ref.value = value;
-    } else {
-      if (ref instanceof Set && Array.isArray(value)) {
-        ref.clear();
-        value.forEach((v) => ref.add(v));
-        return;
-      }
-      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));
+  Object.assign(global[STATE_KEY], state);
+  updateAllStates();
+}
+function onDevToolsConnected(fn) {
+  return new Promise((resolve) => {
+    if (devtoolsState.connected) {
+      fn();
+      resolve();
     }
+    devtoolsContext.hooks.hook("devtoolsConnectedUpdated" /* DEVTOOLS_CONNECTED_UPDATED */, ({ state }) => {
+      if (state.connected) {
+        fn();
+        resolve();
+      }
+    });
+  });
+}
+var resolveIcon = (icon) => {
+  if (!icon)
+    return;
+  if (icon.startsWith("baseline-")) {
+    return `custom-ic-${icon}`;
   }
-  get(ref) {
-    return isRef(ref) ? ref.value : ref;
-  }
-  isRef(ref) {
-    return isRef(ref) || isReactive(ref);
-  }
+  if (icon.startsWith("i-") || isUrlString(icon))
+    return icon;
+  return `custom-ic-baseline-${icon}`;
 };
-async function editComponentState(payload, stateEditor2) {
-  const { path, nodeId, state, type } = payload;
-  const instance = getComponentInstance(activeAppRecord.value, nodeId);
-  if (!instance)
+function addCustomTab(tab) {
+  const tabs = global.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__;
+  if (tabs.some((t) => t.name === tab.name))
     return;
-  const targetPath = path.slice();
-  let target22;
-  if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0]))
-    target22 = instance.devtoolsRawSetupState;
-  if (instance.data && Object.keys(instance.data).includes(path[0]))
-    target22 = instance.data;
-  if (target22 && targetPath) {
-    if (state.type === "object" && type === "reactive") {
-    }
-    stateEditor2.set(target22, targetPath, state.value, stateEditor2.createDefaultSetCallback(state));
-  }
+  tabs.push({
+    ...tab,
+    icon: resolveIcon(tab.icon)
+  });
+  updateAllStates();
 }
-var stateEditor = new StateEditor();
-async function editState(payload) {
-  editComponentState(payload, stateEditor);
+function addCustomCommand(action) {
+  const commands = global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
+  if (commands.some((t) => t.id === action.id))
+    return;
+  commands.push({
+    ...action,
+    icon: resolveIcon(action.icon),
+    children: action.children ? action.children.map((child) => ({
+      ...child,
+      icon: resolveIcon(child.icon)
+    })) : void 0
+  });
+  updateAllStates();
+}
+function removeCustomCommand(actionId) {
+  const commands = global.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
+  const index = commands.findIndex((t) => t.id === actionId);
+  if (index === -1)
+    return;
+  commands.splice(index, 1);
+  updateAllStates();
+}
+function toggleClientConnected(state) {
+  updateDevToolsState({ clientConnected: state });
 }
 
 // src/core/open-in-editor/index.ts
-init_esm_shims();
-import { target as target3 } from "@vue/devtools-shared";
 function setOpenInEditorBaseUrl(url) {
-  target3.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ = url;
+  target5.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ = url;
 }
 function openInEditor(options = {}) {
   var _a25, _b25, _c;
@@ -2632,150 +2663,15 @@ function openInEditor(options = {}) {
         }
       });
     } else if (devtoolsState.vitePluginDetected) {
-      const _baseUrl = (_c = target3.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__) != null ? _c : baseUrl;
-      target3.__VUE_INSPECTOR__.openInEditor(_baseUrl, file, line, column);
+      const _baseUrl = (_c = target5.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__) != null ? _c : baseUrl;
+      target5.__VUE_INSPECTOR__.openInEditor(_baseUrl, file, line, column);
     }
   }
 }
 
-// src/core/router/index.ts
-init_esm_shims();
-import { deepClone, target as global3 } from "@vue/devtools-shared";
-import { debounce as debounce3 } from "perfect-debounce";
-
-// src/ctx/router.ts
-init_esm_shims();
-import { target as global2 } from "@vue/devtools-shared";
-var ROUTER_KEY = "__VUE_DEVTOOLS_ROUTER__";
-var ROUTER_INFO_KEY = "__VUE_DEVTOOLS_ROUTER_INFO__";
-var _a9, _b9;
-(_b9 = (_a9 = global2)[ROUTER_INFO_KEY]) != null ? _b9 : _a9[ROUTER_INFO_KEY] = {
-  currentRoute: null,
-  routes: []
-};
-var _a10, _b10;
-(_b10 = (_a10 = global2)[ROUTER_KEY]) != null ? _b10 : _a10[ROUTER_KEY] = {};
-var devtoolsRouterInfo = new Proxy(global2[ROUTER_INFO_KEY], {
-  get(target22, property) {
-    return global2[ROUTER_INFO_KEY][property];
-  }
-});
-var devtoolsRouter = new Proxy(global2[ROUTER_KEY], {
-  get(target22, property) {
-    if (property === "value") {
-      return global2[ROUTER_KEY];
-    }
-  }
-});
-
-// 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, meta } = item;
-    if (children == null ? void 0 : children.length)
-      children = filterRoutes(children);
-    return {
-      path,
-      name,
-      children,
-      meta
-    };
-  });
-}
-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, activeAppRecord2) {
-  function init() {
-    var _a25;
-    const router = (_a25 = appRecord.app) == null ? void 0 : _a25.config.globalProperties.$router;
-    const currentRoute = filterCurrentRoute(router == null ? void 0 : router.currentRoute.value);
-    const routes = filterRoutes(getRoutes(router));
-    const c = console.warn;
-    console.warn = () => {
-    };
-    global3[ROUTER_INFO_KEY] = {
-      currentRoute: currentRoute ? deepClone(currentRoute) : {},
-      routes: deepClone(routes)
-    };
-    global3[ROUTER_KEY] = router;
-    console.warn = c;
-  }
-  init();
-  hook.on.componentUpdated(debounce3(() => {
-    var _a25;
-    if (((_a25 = activeAppRecord2.value) == null ? void 0 : _a25.app) !== appRecord.app)
-      return;
-    init();
-    devtoolsContext.hooks.callHook("routerInfoUpdated" /* ROUTER_INFO_UPDATED */, { state: global3[ROUTER_INFO_KEY] });
-  }, 200));
-}
-
-// src/core/component-inspector/index.ts
-init_esm_shims();
-import { target as target4 } from "@vue/devtools-shared";
-var _a11, _b11;
-(_b11 = (_a11 = target4).__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__) != null ? _b11 : _a11.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = true;
-function toggleComponentInspectorEnabled(enabled) {
-  target4.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = enabled;
-}
-function waitForInspectorInit(cb) {
-  let total = 0;
-  const timer = setInterval(() => {
-    if (target4.__VUE_INSPECTOR__) {
-      clearInterval(timer);
-      total += 30;
-      cb();
-    }
-    if (total >= /* 5s */
-    5e3)
-      clearInterval(timer);
-  }, 30);
-}
-function setupInspector() {
-  const inspector = target4.__VUE_INSPECTOR__;
-  const _openInEditor = inspector.openInEditor;
-  inspector.openInEditor = async (...params) => {
-    inspector.disable();
-    _openInEditor(...params);
-  };
-}
-function getComponentInspector() {
-  return new Promise((resolve) => {
-    function setup() {
-      setupInspector();
-      resolve(target4.__VUE_INSPECTOR__);
-    }
-    if (!target4.__VUE_INSPECTOR__) {
-      waitForInspectorInit(() => {
-        setup();
-      });
-    } else {
-      setup();
-    }
-  });
-}
-
 // src/core/plugin/index.ts
 init_esm_shims();
-import { target as target6 } from "@vue/devtools-shared";
+import { target as target8 } from "@vue/devtools-shared";
 
 // src/api/index.ts
 init_esm_shims();
@@ -2788,10 +2684,10 @@ init_esm_shims();
 
 // src/ctx/plugin.ts
 init_esm_shims();
-import { target as target5 } from "@vue/devtools-shared";
-var _a12, _b12;
-(_b12 = (_a12 = target5).__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__) != null ? _b12 : _a12.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__ = [];
-var devtoolsPluginBuffer = new Proxy(target5.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__, {
+import { target as target6 } from "@vue/devtools-shared";
+var _a10, _b10;
+(_b10 = (_a10 = target6).__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__) != null ? _b10 : _a10.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__ = [];
+var devtoolsPluginBuffer = new Proxy(target6.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__, {
   get(target22, prop, receiver) {
     return Reflect.get(target22, prop, receiver);
   }
@@ -2859,6 +2755,146 @@ function setPluginSettings(pluginId, key, value) {
   }, "setPluginSettings" /* SET_PLUGIN_SETTINGS */);
 }
 
+// src/hook/index.ts
+init_esm_shims();
+import { target as target7 } from "@vue/devtools-shared";
+import { createHooks as createHooks2 } from "hookable";
+
+// src/types/index.ts
+init_esm_shims();
+
+// src/types/app.ts
+init_esm_shims();
+
+// src/types/command.ts
+init_esm_shims();
+
+// src/types/component.ts
+init_esm_shims();
+
+// src/types/hook.ts
+init_esm_shims();
+
+// src/types/inspector.ts
+init_esm_shims();
+
+// src/types/plugin.ts
+init_esm_shims();
+
+// src/types/router.ts
+init_esm_shims();
+
+// src/types/tab.ts
+init_esm_shims();
+
+// src/types/timeline.ts
+init_esm_shims();
+
+// src/hook/index.ts
+var _a11, _b11;
+var devtoolsHooks = (_b11 = (_a11 = target7).__VUE_DEVTOOLS_HOOK) != null ? _b11 : _a11.__VUE_DEVTOOLS_HOOK = createHooks2();
+var on = {
+  vueAppInit(fn) {
+    devtoolsHooks.hook("app:init" /* APP_INIT */, fn);
+  },
+  vueAppUnmount(fn) {
+    devtoolsHooks.hook("app:unmount" /* APP_UNMOUNT */, fn);
+  },
+  vueAppConnected(fn) {
+    devtoolsHooks.hook("app:connected" /* APP_CONNECTED */, fn);
+  },
+  componentAdded(fn) {
+    return devtoolsHooks.hook("component:added" /* COMPONENT_ADDED */, fn);
+  },
+  componentUpdated(fn) {
+    return devtoolsHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
+  },
+  componentRemoved(fn) {
+    return devtoolsHooks.hook("component:removed" /* COMPONENT_REMOVED */, fn);
+  },
+  setupDevtoolsPlugin(fn) {
+    devtoolsHooks.hook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, fn);
+  }
+};
+function createDevToolsHook() {
+  return {
+    id: "vue-devtools-next",
+    devtoolsVersion: "7.0",
+    enabled: false,
+    appRecords: [],
+    apps: [],
+    events: /* @__PURE__ */ new Map(),
+    on(event, fn) {
+      var _a25;
+      if (!this.events.has(event))
+        this.events.set(event, []);
+      (_a25 = this.events.get(event)) == null ? void 0 : _a25.push(fn);
+      return () => this.off(event, fn);
+    },
+    once(event, fn) {
+      const onceFn = (...args) => {
+        this.off(event, onceFn);
+        fn(...args);
+      };
+      this.on(event, onceFn);
+      return [event, onceFn];
+    },
+    off(event, fn) {
+      if (this.events.has(event)) {
+        const eventCallbacks = this.events.get(event);
+        const index = eventCallbacks.indexOf(fn);
+        if (index !== -1)
+          eventCallbacks.splice(index, 1);
+      }
+    },
+    emit(event, ...payload) {
+      if (this.events.has(event))
+        this.events.get(event).forEach((fn) => fn(...payload));
+    }
+  };
+}
+function subscribeDevToolsHook() {
+  const hook2 = target7.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+  hook2.on("app:init" /* APP_INIT */, (app, version) => {
+    var _a25, _b25, _c;
+    if ((_c = (_b25 = (_a25 = app == null ? void 0 : app._instance) == null ? void 0 : _a25.type) == null ? void 0 : _b25.devtools) == null ? void 0 : _c.hide)
+      return;
+    devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version);
+  });
+  hook2.on("app:unmount" /* APP_UNMOUNT */, (app) => {
+    devtoolsHooks.callHook("app:unmount" /* APP_UNMOUNT */, app);
+  });
+  hook2.on("component:added" /* COMPONENT_ADDED */, async (app, uid, parentUid, component) => {
+    var _a25, _b25, _c;
+    if (((_c = (_b25 = (_a25 = app == null ? void 0 : app._instance) == null ? void 0 : _a25.type) == null ? void 0 : _b25.devtools) == null ? void 0 : _c.hide) || devtoolsState.highPerfModeEnabled)
+      return;
+    if (!app || typeof uid !== "number" && !uid || !component)
+      return;
+    devtoolsHooks.callHook("component:added" /* COMPONENT_ADDED */, app, uid, parentUid, component);
+  });
+  hook2.on("component:updated" /* COMPONENT_UPDATED */, (app, uid, parentUid, component) => {
+    if (!app || typeof uid !== "number" && !uid || !component || devtoolsState.highPerfModeEnabled)
+      return;
+    devtoolsHooks.callHook("component:updated" /* COMPONENT_UPDATED */, app, uid, parentUid, component);
+  });
+  hook2.on("component:removed" /* COMPONENT_REMOVED */, async (app, uid, parentUid, component) => {
+    if (!app || typeof uid !== "number" && !uid || !component || devtoolsState.highPerfModeEnabled)
+      return;
+    devtoolsHooks.callHook("component:removed" /* COMPONENT_REMOVED */, app, uid, parentUid, component);
+  });
+  hook2.on("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, (pluginDescriptor, setupFn, options) => {
+    if ((options == null ? void 0 : options.target) === "legacy")
+      return;
+    devtoolsHooks.callHook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn);
+  });
+}
+var hook = {
+  on,
+  setupDevToolsPlugin(pluginDescriptor, setupFn) {
+    return devtoolsHooks.callHook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn);
+  }
+};
+
 // src/api/v6/index.ts
 var DevToolsV6PluginAPI = class {
   constructor({ plugin, ctx }) {
@@ -2940,259 +2976,42 @@ var DevToolsV6PluginAPI = class {
     return Date.now();
   }
   addTimelineLayer(options) {
-    this.hooks.callHook("timelineLayerAdded" /* TIMELINE_LAYER_ADDED */, { options, plugin: this.plugin });
-  }
-  addTimelineEvent(options) {
-    this.hooks.callHook("timelineEventAdded" /* TIMELINE_EVENT_ADDED */, { options, plugin: this.plugin });
-  }
-  // settings
-  getSettings(pluginId) {
-    const inspector = getActiveInspectors().find((i) => i.packageName === this.plugin.descriptor.packageName);
-    return getPluginSettings(pluginId != null ? pluginId : inspector == null ? void 0 : inspector.id, this.plugin.descriptor.settings);
-  }
-  // utilities
-  getComponentInstances(app) {
-    return this.hooks.callHook("getComponentInstances" /* GET_COMPONENT_INSTANCES */, { app });
-  }
-  getComponentBounds(instance) {
-    return this.hooks.callHook("getComponentBounds" /* GET_COMPONENT_BOUNDS */, { instance });
-  }
-  getComponentName(instance) {
-    return this.hooks.callHook("getComponentName" /* GET_COMPONENT_NAME */, { instance });
-  }
-  highlightElement(instance) {
-    const uid = instance.__VUE_DEVTOOLS_NEXT_UID__;
-    return this.hooks.callHook("componentHighlight" /* COMPONENT_HIGHLIGHT */, { uid });
-  }
-  unhighlightElement() {
-    return this.hooks.callHook("componentUnhighlight" /* COMPONENT_UNHIGHLIGHT */);
-  }
-};
-
-// src/api/index.ts
-var DevToolsPluginAPI = DevToolsV6PluginAPI;
-
-// src/core/plugin/components.ts
-init_esm_shims();
-import { debounce as debounce4 } from "perfect-debounce";
-
-// src/core/component/tree/walker.ts
-init_esm_shims();
-
-// src/core/component/tree/filter.ts
-init_esm_shims();
-import { classify as classify2, kebabize } from "@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 classify2(name).toLowerCase().includes(this.filter) || kebabize(name).toLowerCase().includes(this.filter);
-  }
-};
-function createComponentFilter(filterText) {
-  return new ComponentFilter(filterText);
-}
-
-// 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);
-    }
-    return parents;
-  }
-  captureId(instance) {
-    if (!instance)
-      return null;
-    const id = instance.__VUE_DEVTOOLS_NEXT_UID__ != null ? instance.__VUE_DEVTOOLS_NEXT_UID__ : getUniqueComponentId(instance);
-    instance.__VUE_DEVTOOLS_NEXT_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 _a25;
-    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));
-    }
-    if (this.isKeepAlive(instance)) {
-      const cachedComponents = this.getKeepAliveCachedInstances(instance);
-      const childrenIds = children.map((child) => child.__VUE_DEVTOOLS_NEXT_UID__);
-      for (const cachedChild of cachedComponents) {
-        if (!childrenIds.includes(cachedChild.__VUE_DEVTOOLS_NEXT_UID__)) {
-          const node = await this.capture({ ...cachedChild, isDeactivated: true }, depth + 1);
-          if (node)
-            treeNode.children.push(node);
-        }
-      }
-    }
-    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 ((_a25 = instance.suspense) == null ? void 0 : _a25.suspenseKey) {
-      treeNode.tags.push({
-        label: instance.suspense.suspenseKey,
-        backgroundColor: 14979812,
-        textColor: 16777215
-      });
-      this.mark(instance, true);
-    }
-    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 _a25;
-    if (this.componentFilter.isQualified(instance) && !((_a25 = instance.type.devtools) == null ? void 0 : _a25.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 _a25;
-      return !isBeingDestroyed(child) && !((_a25 = child.type.devtools) == null ? void 0 : _a25.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));
-        });
-      }
-    }
-    return list.filter((child) => {
-      var _a25;
-      return !isBeingDestroyed(child) && !((_a25 = child.type.devtools) == null ? void 0 : _a25.hide);
-    });
+    this.hooks.callHook("timelineLayerAdded" /* TIMELINE_LAYER_ADDED */, { options, plugin: this.plugin });
   }
-  /**
-   * 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_NEXT_UID__)) {
-      instanceMap.set(instance.__VUE_DEVTOOLS_NEXT_UID__, instance);
-      activeAppRecord.value.instanceMap = instanceMap;
-    }
+  addTimelineEvent(options) {
+    this.hooks.callHook("timelineEventAdded" /* TIMELINE_EVENT_ADDED */, { options, plugin: this.plugin });
   }
-  isKeepAlive(instance) {
-    return instance.type.__isKeepAlive && instance.__v_cache;
+  // settings
+  getSettings(pluginId) {
+    const inspector = getActiveInspectors().find((i) => i.packageName === this.plugin.descriptor.packageName);
+    return getPluginSettings(pluginId != null ? pluginId : inspector == null ? void 0 : inspector.id, this.plugin.descriptor.settings);
   }
-  getKeepAliveCachedInstances(instance) {
-    return Array.from(instance.__v_cache.values()).map((vnode) => vnode.component).filter(Boolean);
+  // utilities
+  getComponentInstances(app) {
+    return this.hooks.callHook("getComponentInstances" /* GET_COMPONENT_INSTANCES */, { app });
+  }
+  getComponentBounds(instance) {
+    return this.hooks.callHook("getComponentBounds" /* GET_COMPONENT_BOUNDS */, { instance });
+  }
+  getComponentName(instance) {
+    return this.hooks.callHook("getComponentName" /* GET_COMPONENT_NAME */, { instance });
+  }
+  highlightElement(instance) {
+    const uid = instance.__VUE_DEVTOOLS_NEXT_UID__;
+    return this.hooks.callHook("componentHighlight" /* COMPONENT_HIGHLIGHT */, { uid });
+  }
+  unhighlightElement() {
+    return this.hooks.callHook("componentUnhighlight" /* COMPONENT_UNHIGHLIGHT */);
   }
 };
 
+// src/api/index.ts
+var DevToolsPluginAPI = DevToolsV6PluginAPI;
+
+// src/core/plugin/components.ts
+init_esm_shims();
+import { debounce as debounce3 } from "perfect-debounce";
+
 // src/core/component/state/index.ts
 init_esm_shims();
 
@@ -3577,38 +3396,255 @@ function processEventListeners(instance) {
       });
     }
   }
-  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 _a25;
-  const instance = getComponentInstance(activeAppRecord.value, params.instanceId);
-  const id = getUniqueComponentId(instance);
-  const name = getInstanceName(instance);
-  const file = (_a25 = instance == null ? void 0 : instance.type) == null ? void 0 : _a25.__file;
-  const state = processInstanceState(instance);
-  return {
-    id,
-    name,
-    file,
-    state,
-    instance
-  };
-}
+  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 _a25;
+  const instance = getComponentInstance(activeAppRecord.value, params.instanceId);
+  const id = getUniqueComponentId(instance);
+  const name = getInstanceName(instance);
+  const file = (_a25 = instance == null ? void 0 : instance.type) == null ? void 0 : _a25.__file;
+  const state = processInstanceState(instance);
+  return {
+    id,
+    name,
+    file,
+    state,
+    instance
+  };
+}
+
+// src/core/component/tree/walker.ts
+init_esm_shims();
+
+// src/core/component/tree/filter.ts
+init_esm_shims();
+import { classify as classify2, kebabize } from "@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 classify2(name).toLowerCase().includes(this.filter) || kebabize(name).toLowerCase().includes(this.filter);
+  }
+};
+function createComponentFilter(filterText) {
+  return new ComponentFilter(filterText);
+}
+
+// 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);
+    }
+    return parents;
+  }
+  captureId(instance) {
+    if (!instance)
+      return null;
+    const id = instance.__VUE_DEVTOOLS_NEXT_UID__ != null ? instance.__VUE_DEVTOOLS_NEXT_UID__ : getUniqueComponentId(instance);
+    instance.__VUE_DEVTOOLS_NEXT_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 _a25;
+    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));
+    }
+    if (this.isKeepAlive(instance)) {
+      const cachedComponents = this.getKeepAliveCachedInstances(instance);
+      const childrenIds = children.map((child) => child.__VUE_DEVTOOLS_NEXT_UID__);
+      for (const cachedChild of cachedComponents) {
+        if (!childrenIds.includes(cachedChild.__VUE_DEVTOOLS_NEXT_UID__)) {
+          const node = await this.capture({ ...cachedChild, isDeactivated: true }, depth + 1);
+          if (node)
+            treeNode.children.push(node);
+        }
+      }
+    }
+    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 ((_a25 = instance.suspense) == null ? void 0 : _a25.suspenseKey) {
+      treeNode.tags.push({
+        label: instance.suspense.suspenseKey,
+        backgroundColor: 14979812,
+        textColor: 16777215
+      });
+      this.mark(instance, true);
+    }
+    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 _a25;
+    if (this.componentFilter.isQualified(instance) && !((_a25 = instance.type.devtools) == null ? void 0 : _a25.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 _a25;
+      return !isBeingDestroyed(child) && !((_a25 = child.type.devtools) == null ? void 0 : _a25.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));
+        });
+      }
+    }
+    return list.filter((child) => {
+      var _a25;
+      return !isBeingDestroyed(child) && !((_a25 = child.type.devtools) == null ? void 0 : _a25.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_NEXT_UID__)) {
+      instanceMap.set(instance.__VUE_DEVTOOLS_NEXT_UID__, instance);
+      activeAppRecord.value.instanceMap = instanceMap;
+    }
+  }
+  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/vm/index.ts
 init_esm_shims();
@@ -3686,10 +3722,10 @@ function createComponentsDevToolsPlugin(app) {
         await api.sendInspectorState("components");
       }
     });
-    const debounceSendInspectorTree = debounce4(() => {
+    const debounceSendInspectorTree = debounce3(() => {
       api.sendInspectorTree(INSPECTOR_ID);
     }, 120);
-    const debounceSendInspectorState = debounce4(() => {
+    const debounceSendInspectorState = debounce3(() => {
       api.sendInspectorState(INSPECTOR_ID);
     }, 120);
     const componentAddedCleanup = hook.on.componentAdded(async (app2, uid, parentUid, component) => {
@@ -3773,8 +3809,8 @@ function createComponentsDevToolsPlugin(app) {
 }
 
 // src/core/plugin/index.ts
-var _a13, _b13;
-(_b13 = (_a13 = target6).__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__) != null ? _b13 : _a13.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__ = /* @__PURE__ */ new Set();
+var _a12, _b12;
+(_b12 = (_a12 = target8).__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__) != null ? _b12 : _a12.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__ = /* @__PURE__ */ new Set();
 function setupDevToolsPlugin(pluginDescriptor, setupFn) {
   return hook.setupDevToolsPlugin(pluginDescriptor, setupFn);
 }
@@ -3804,17 +3840,107 @@ function callDevToolsPluginSetupFn(plugin, app) {
   }
 }
 function removeRegisteredPluginApp(app) {
-  target6.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.delete(app);
+  target8.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.delete(app);
 }
 function registerDevToolsPlugin(app) {
-  if (target6.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(app))
+  if (target8.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(app))
     return;
-  target6.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.add(app);
+  target8.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.add(app);
   devtoolsPluginBuffer.forEach((plugin) => {
     callDevToolsPluginSetupFn(plugin, app);
   });
 }
 
+// src/core/router/index.ts
+init_esm_shims();
+import { deepClone, target as global3 } from "@vue/devtools-shared";
+import { debounce as debounce4 } from "perfect-debounce";
+
+// src/ctx/router.ts
+init_esm_shims();
+import { target as global2 } from "@vue/devtools-shared";
+var ROUTER_KEY = "__VUE_DEVTOOLS_ROUTER__";
+var ROUTER_INFO_KEY = "__VUE_DEVTOOLS_ROUTER_INFO__";
+var _a13, _b13;
+(_b13 = (_a13 = global2)[ROUTER_INFO_KEY]) != null ? _b13 : _a13[ROUTER_INFO_KEY] = {
+  currentRoute: null,
+  routes: []
+};
+var _a14, _b14;
+(_b14 = (_a14 = global2)[ROUTER_KEY]) != null ? _b14 : _a14[ROUTER_KEY] = {};
+var devtoolsRouterInfo = new Proxy(global2[ROUTER_INFO_KEY], {
+  get(target22, property) {
+    return global2[ROUTER_INFO_KEY][property];
+  }
+});
+var devtoolsRouter = new Proxy(global2[ROUTER_KEY], {
+  get(target22, property) {
+    if (property === "value") {
+      return global2[ROUTER_KEY];
+    }
+  }
+});
+
+// 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, meta } = item;
+    if (children == null ? void 0 : children.length)
+      children = filterRoutes(children);
+    return {
+      path,
+      name,
+      children,
+      meta
+    };
+  });
+}
+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, activeAppRecord2) {
+  function init() {
+    var _a25;
+    const router = (_a25 = appRecord.app) == null ? void 0 : _a25.config.globalProperties.$router;
+    const currentRoute = filterCurrentRoute(router == null ? void 0 : router.currentRoute.value);
+    const routes = filterRoutes(getRoutes(router));
+    const c = console.warn;
+    console.warn = () => {
+    };
+    global3[ROUTER_INFO_KEY] = {
+      currentRoute: currentRoute ? deepClone(currentRoute) : {},
+      routes: deepClone(routes)
+    };
+    global3[ROUTER_KEY] = router;
+    console.warn = c;
+  }
+  init();
+  hook.on.componentUpdated(debounce4(() => {
+    var _a25;
+    if (((_a25 = activeAppRecord2.value) == null ? void 0 : _a25.app) !== appRecord.app)
+      return;
+    init();
+    devtoolsContext.hooks.callHook("routerInfoUpdated" /* ROUTER_INFO_UPDATED */, { state: global3[ROUTER_INFO_KEY] });
+  }, 200));
+}
+
 // src/ctx/api.ts
 function createDevToolsApi(hooks2) {
   return {
@@ -3912,178 +4038,56 @@ function createDevToolsApi(hooks2) {
       if (instance) {
         const [el] = getRootElementsFromComponentInstance(instance);
         if (el) {
-          target7.__VUE_DEVTOOLS_INSPECT_DOM_TARGET__ = el;
-        }
-      }
-    },
-    updatePluginSettings(pluginId, key, value) {
-      setPluginSettings(pluginId, key, value);
-    },
-    getPluginSettings(pluginId) {
-      return {
-        options: getPluginSettingsOptions(pluginId),
-        values: getPluginSettings(pluginId)
-      };
-    }
-  };
-}
-
-// src/ctx/env.ts
-init_esm_shims();
-import { target as target8 } from "@vue/devtools-shared";
-var _a14, _b14;
-(_b14 = (_a14 = target8).__VUE_DEVTOOLS_ENV__) != null ? _b14 : _a14.__VUE_DEVTOOLS_ENV__ = {
-  vitePluginDetected: false
-};
-function getDevToolsEnv() {
-  return target8.__VUE_DEVTOOLS_ENV__;
-}
-function setDevToolsEnv(env) {
-  target8.__VUE_DEVTOOLS_ENV__ = {
-    ...target8.__VUE_DEVTOOLS_ENV__,
-    ...env
-  };
-}
-
-// src/ctx/index.ts
-var hooks = createDevToolsCtxHooks();
-var _a15, _b15;
-(_b15 = (_a15 = target9).__VUE_DEVTOOLS_KIT_CONTEXT__) != null ? _b15 : _a15.__VUE_DEVTOOLS_KIT_CONTEXT__ = {
-  hooks,
-  get state() {
-    return {
-      ...devtoolsState,
-      activeAppRecordId: activeAppRecord.id,
-      activeAppRecord: activeAppRecord.value,
-      appRecords: devtoolsAppRecords.value
-    };
-  },
-  api: createDevToolsApi(hooks)
-};
-var devtoolsContext = target9.__VUE_DEVTOOLS_KIT_CONTEXT__;
-
-// src/hook/index.ts
-var _a16, _b16;
-var devtoolsHooks = (_b16 = (_a16 = target10).__VUE_DEVTOOLS_HOOK) != null ? _b16 : _a16.__VUE_DEVTOOLS_HOOK = createHooks2();
-var on = {
-  vueAppInit(fn) {
-    devtoolsHooks.hook("app:init" /* APP_INIT */, fn);
-  },
-  vueAppUnmount(fn) {
-    devtoolsHooks.hook("app:unmount" /* APP_UNMOUNT */, fn);
-  },
-  vueAppConnected(fn) {
-    devtoolsHooks.hook("app:connected" /* APP_CONNECTED */, fn);
-  },
-  componentAdded(fn) {
-    return devtoolsHooks.hook("component:added" /* COMPONENT_ADDED */, fn);
-  },
-  componentUpdated(fn) {
-    return devtoolsHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
-  },
-  componentRemoved(fn) {
-    return devtoolsHooks.hook("component:removed" /* COMPONENT_REMOVED */, fn);
-  },
-  setupDevtoolsPlugin(fn) {
-    devtoolsHooks.hook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, fn);
-  }
-};
-function createDevToolsHook() {
-  return {
-    id: "vue-devtools-next",
-    devtoolsVersion: "7.0",
-    enabled: false,
-    appRecords: [],
-    apps: [],
-    events: /* @__PURE__ */ new Map(),
-    on(event, fn) {
-      var _a25;
-      if (!this.events.has(event))
-        this.events.set(event, []);
-      (_a25 = this.events.get(event)) == null ? void 0 : _a25.push(fn);
-      return () => this.off(event, fn);
-    },
-    once(event, fn) {
-      const onceFn = (...args) => {
-        this.off(event, onceFn);
-        fn(...args);
-      };
-      this.on(event, onceFn);
-      return [event, onceFn];
-    },
-    off(event, fn) {
-      if (this.events.has(event)) {
-        const eventCallbacks = this.events.get(event);
-        const index = eventCallbacks.indexOf(fn);
-        if (index !== -1)
-          eventCallbacks.splice(index, 1);
+          target9.__VUE_DEVTOOLS_INSPECT_DOM_TARGET__ = el;
+        }
       }
     },
-    emit(event, ...payload) {
-      if (this.events.has(event))
-        this.events.get(event).forEach((fn) => fn(...payload));
+    updatePluginSettings(pluginId, key, value) {
+      setPluginSettings(pluginId, key, value);
+    },
+    getPluginSettings(pluginId) {
+      return {
+        options: getPluginSettingsOptions(pluginId),
+        values: getPluginSettings(pluginId)
+      };
     }
   };
 }
-function subscribeDevToolsHook() {
-  const hook2 = target10.__VUE_DEVTOOLS_GLOBAL_HOOK__;
-  hook2.on("app:init" /* APP_INIT */, (app, version) => {
-    var _a25, _b25, _c;
-    if ((_c = (_b25 = (_a25 = app == null ? void 0 : app._instance) == null ? void 0 : _a25.type) == null ? void 0 : _b25.devtools) == null ? void 0 : _c.hide)
-      return;
-    devtoolsHooks.callHook("app:init" /* APP_INIT */, app, version);
-  });
-  hook2.on("app:unmount" /* APP_UNMOUNT */, (app) => {
-    devtoolsHooks.callHook("app:unmount" /* APP_UNMOUNT */, app);
-  });
-  hook2.on("component:added" /* COMPONENT_ADDED */, async (app, uid, parentUid, component) => {
-    var _a25, _b25, _c;
-    if (((_c = (_b25 = (_a25 = app == null ? void 0 : app._instance) == null ? void 0 : _a25.type) == null ? void 0 : _b25.devtools) == null ? void 0 : _c.hide) || devtoolsState.highPerfModeEnabled)
-      return;
-    if (!app || typeof uid !== "number" && !uid || !component)
-      return;
-    devtoolsHooks.callHook("component:added" /* COMPONENT_ADDED */, app, uid, parentUid, component);
-  });
-  hook2.on("component:updated" /* COMPONENT_UPDATED */, (app, uid, parentUid, component) => {
-    if (!app || typeof uid !== "number" && !uid || !component || devtoolsState.highPerfModeEnabled)
-      return;
-    devtoolsHooks.callHook("component:updated" /* COMPONENT_UPDATED */, app, uid, parentUid, component);
-  });
-  hook2.on("component:removed" /* COMPONENT_REMOVED */, async (app, uid, parentUid, component) => {
-    if (!app || typeof uid !== "number" && !uid || !component || devtoolsState.highPerfModeEnabled)
-      return;
-    devtoolsHooks.callHook("component:removed" /* COMPONENT_REMOVED */, app, uid, parentUid, component);
-  });
-  hook2.on("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, (pluginDescriptor, setupFn, options) => {
-    if ((options == null ? void 0 : options.target) === "legacy")
-      return;
-    devtoolsHooks.callHook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn);
-  });
-}
-var hook = {
-  on,
-  setupDevToolsPlugin(pluginDescriptor, setupFn) {
-    return devtoolsHooks.callHook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn);
-  }
-};
 
-// src/compat/index.ts
+// src/ctx/env.ts
 init_esm_shims();
-import { target as target11 } from "@vue/devtools-shared";
-function onLegacyDevToolsPluginApiAvailable(cb) {
-  if (target11.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__) {
-    cb();
-    return;
-  }
-  Object.defineProperty(target11, "__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__", {
-    set(value) {
-      if (value)
-        cb();
-    },
-    configurable: true
-  });
+import { target as target10 } from "@vue/devtools-shared";
+var _a15, _b15;
+(_b15 = (_a15 = target10).__VUE_DEVTOOLS_ENV__) != null ? _b15 : _a15.__VUE_DEVTOOLS_ENV__ = {
+  vitePluginDetected: false
+};
+function getDevToolsEnv() {
+  return target10.__VUE_DEVTOOLS_ENV__;
+}
+function setDevToolsEnv(env) {
+  target10.__VUE_DEVTOOLS_ENV__ = {
+    ...target10.__VUE_DEVTOOLS_ENV__,
+    ...env
+  };
 }
 
+// src/ctx/index.ts
+var hooks = createDevToolsCtxHooks();
+var _a16, _b16;
+(_b16 = (_a16 = target11).__VUE_DEVTOOLS_KIT_CONTEXT__) != null ? _b16 : _a16.__VUE_DEVTOOLS_KIT_CONTEXT__ = {
+  hooks,
+  get state() {
+    return {
+      ...devtoolsState,
+      activeAppRecordId: activeAppRecord.id,
+      activeAppRecord: activeAppRecord.value,
+      appRecords: devtoolsAppRecords.value
+    };
+  },
+  api: createDevToolsApi(hooks)
+};
+var devtoolsContext = target11.__VUE_DEVTOOLS_KIT_CONTEXT__;
+
 // src/core/app/index.ts
 init_esm_shims();
 var import_speakingurl = __toESM(require_speakingurl2(), 1);
@@ -4163,6 +4167,14 @@ function initDevTools() {
       Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
     }
   }
+  target13.__VUE_DEVTOOLS_GLOBAL_HOOK__.once("init", (Vue) => {
+    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 700; font-size: 20px;");
+    console.log("%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.", "font-bold: 700; font-size: 16px;");
+    const url = "https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp";
+    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, "font-size: 16px;", "text-decoration: underline; cursor: pointer;font-size: 16px;");
+    console.log("%cPlease install and enable only the legacy version for your Vue2 app.", "font-bold: 700; font-size: 16px;");
+    console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 700; font-size: 20px;");
+  });
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
     var _a26;
     addDevToolsPluginToBuffer(pluginDescriptor, setupFn);
@@ -4237,20 +4249,186 @@ function toggleHighPerfMode(state) {
   devtoolsState.highPerfModeEnabled = state != null ? state : !devtoolsState.highPerfModeEnabled;
 }
 
+// src/core/component/state/format.ts
+init_esm_shims();
+
+// src/core/component/state/reviver.ts
+init_esm_shims();
+import { target as target14 } from "@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) {
+  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 activeAppRecord.value.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 target14[type](string);
+    if (type === "Error" && details)
+      result.stack = details;
+    return result;
+  } else {
+    return val;
+  }
+}
+function reviver(key, value) {
+  return revive(value);
+}
+
+// src/core/component/state/format.ts
+function getInspectorStateValueType(value, raw = true) {
+  const type = typeof value;
+  if (value == null || value === UNDEFINED || 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, options) {
+  var _a25, _b25, _c;
+  const { customClass } = options != null ? options : {};
+  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 = ((_a25 = value._custom.value) == null ? void 0 : _a25._custom) && formatInspectorStateValue(value._custom.value, quotes, options);
+    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((_b25 = specialTypeRE.exec(value)) == null ? void 0 : _b25[2]);
+  } else if (typeof value === "string") {
+    const typeMatch = value.match(rawTypeRE);
+    if (typeMatch) {
+      value = escapeString(typeMatch[1]);
+    } else if (quotes) {
+      value = `<span>"</span>${(customClass == null ? void 0 : customClass.string) ? `<span class=${customClass.string}>${escapeString(value)}</span>` : escapeString(value)}<span>"</span>`;
+    } else {
+      value = (customClass == null ? void 0 : customClass.string) ? `<span class="${(_c = customClass == null ? void 0 : customClass.string) != null ? _c : ""}">${escapeString(value)}</span>` : escapeString(value);
+    }
+  }
+  return value;
+}
+function escapeString(value) {
+  return escape(value).replace(/ /g, "&nbsp;").replace(/\n/g, "<span>\\n</span>");
+}
+function getRaw(value) {
+  var _a25, _b25, _c;
+  let customType;
+  const isCustom = getInspectorStateValueType(value) === "custom";
+  let inherit = {};
+  if (isCustom) {
+    const data = value;
+    const customValue = (_a25 = data._custom) == null ? void 0 : _a25.value;
+    const currentCustomType = (_b25 = data._custom) == null ? void 0 : _b25.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;
+  if (customType === "date")
+    return value;
+  return replaceTokenToString(JSON.stringify(value));
+}
+function toSubmit(value, customType) {
+  if (customType === "bigint")
+    return BigInt(value);
+  if (customType === "date")
+    return new Date(value);
+  return JSON.parse(replaceStringToToken(value), reviver);
+}
+
+// src/core/devtools-client/detected.ts
+init_esm_shims();
+import { target as target15 } from "@vue/devtools-shared";
+function updateDevToolsClientDetected(params) {
+  devtoolsState.devtoolsClientDetected = {
+    ...devtoolsState.devtoolsClientDetected,
+    ...params
+  };
+  const devtoolsClientVisible = Object.values(devtoolsState.devtoolsClientDetected).some(Boolean);
+  toggleHighPerfMode(!devtoolsClientVisible);
+}
+var _a18, _b18;
+(_b18 = (_a18 = target15).__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__) != null ? _b18 : _a18.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__ = updateDevToolsClientDetected;
+
 // src/messaging/index.ts
 init_esm_shims();
+import { target as target21 } from "@vue/devtools-shared";
 import { createBirpc, createBirpcGroup } from "birpc";
-import { target as target19 } from "@vue/devtools-shared";
 
 // src/messaging/presets/index.ts
 init_esm_shims();
 
-// src/messaging/presets/iframe/index.ts
-init_esm_shims();
-
-// src/messaging/presets/iframe/client.ts
+// src/messaging/presets/broadcast-channel/index.ts
 init_esm_shims();
-import { isBrowser } from "@vue/devtools-shared";
 
 // ../../node_modules/.pnpm/superjson@2.2.1/node_modules/superjson/dist/index.js
 init_esm_shims();
@@ -5060,84 +5238,6 @@ var registerCustom = SuperJSON.registerCustom;
 var registerSymbol = SuperJSON.registerSymbol;
 var allowErrorProps = SuperJSON.allowErrorProps;
 
-// src/messaging/presets/iframe/context.ts
-init_esm_shims();
-import { target as target14 } from "@vue/devtools-shared";
-var __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY = "__devtools-kit-iframe-messaging-event-key__";
-var __IFRAME_SERVER_CONTEXT__ = "iframe:server-context";
-function getIframeServerContext() {
-  return target14[__IFRAME_SERVER_CONTEXT__];
-}
-function setIframeServerContext(context) {
-  target14[__IFRAME_SERVER_CONTEXT__] = context;
-}
-
-// src/messaging/presets/iframe/client.ts
-function createIframeClientChannel() {
-  if (!isBrowser) {
-    return {
-      post: (data) => {
-      },
-      on: (handler) => {
-      }
-    };
-  }
-  return {
-    post: (data) => window.parent.postMessage(SuperJSON.stringify({
-      event: __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY,
-      data
-    }), "*"),
-    on: (handler) => window.addEventListener("message", (event) => {
-      try {
-        const parsed = SuperJSON.parse(event.data);
-        if (event.source === window.parent && parsed.event === __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY) {
-          handler(parsed.data);
-        }
-      } catch (e) {
-      }
-    })
-  };
-}
-
-// src/messaging/presets/iframe/server.ts
-init_esm_shims();
-import { isBrowser as isBrowser2 } from "@vue/devtools-shared";
-function createIframeServerChannel() {
-  if (!isBrowser2) {
-    return {
-      post: (data) => {
-      },
-      on: (handler) => {
-      }
-    };
-  }
-  return {
-    post: (data) => {
-      var _a25;
-      const iframe = getIframeServerContext();
-      (_a25 = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a25.postMessage(SuperJSON.stringify({
-        event: __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY,
-        data
-      }), "*");
-    },
-    on: (handler) => {
-      window.addEventListener("message", (event) => {
-        const iframe = getIframeServerContext();
-        try {
-          const parsed = SuperJSON.parse(event.data);
-          if (event.source === (iframe == null ? void 0 : iframe.contentWindow) && parsed.event === __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY) {
-            handler(parsed.data);
-          }
-        } catch (e) {
-        }
-      });
-    }
-  };
-}
-
-// src/messaging/presets/broadcast-channel/index.ts
-init_esm_shims();
-
 // src/messaging/presets/broadcast-channel/context.ts
 init_esm_shims();
 var __DEVTOOLS_KIT_BROADCAST_MESSAGING_EVENT_KEY = "__devtools-kit-broadcast-messaging-event-key__";
@@ -5164,79 +5264,15 @@ function createBroadcastChannel() {
   };
 }
 
-// src/messaging/presets/vite/index.ts
-init_esm_shims();
-
-// src/messaging/presets/vite/client.ts
-init_esm_shims();
-
-// src/messaging/presets/vite/context.ts
-init_esm_shims();
-import { target as target15 } from "@vue/devtools-shared";
-var __DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY = "__devtools-kit-vite-messaging-event-key__";
-var __VITE_CLIENT_CONTEXT__ = "vite:client-context";
-var __VITE_SERVER_CONTEXT__ = "vite:server-context";
-function getViteClientContext() {
-  return target15[__VITE_CLIENT_CONTEXT__];
-}
-function setViteClientContext(context) {
-  target15[__VITE_CLIENT_CONTEXT__] = context;
-}
-function getViteServerContext() {
-  return target15[__VITE_SERVER_CONTEXT__];
-}
-function setViteServerContext(context) {
-  target15[__VITE_SERVER_CONTEXT__] = context;
-}
-
-// src/messaging/presets/vite/client.ts
-function createViteClientChannel() {
-  const client = getViteClientContext();
-  return {
-    post: (data) => {
-      client == null ? void 0 : client.send(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, SuperJSON.stringify(data));
-    },
-    on: (handler) => {
-      client == null ? void 0 : client.on(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, (event) => {
-        handler(SuperJSON.parse(event));
-      });
-    }
-  };
-}
-
-// src/messaging/presets/vite/server.ts
-init_esm_shims();
-function createViteServerChannel() {
-  var _a25;
-  const viteServer = getViteServerContext();
-  const ws = (_a25 = viteServer.hot) != null ? _a25 : viteServer.ws;
-  return {
-    post: (data) => ws == null ? void 0 : ws.send(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, SuperJSON.stringify(data)),
-    on: (handler) => ws == null ? void 0 : ws.on(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, (event) => {
-      handler(SuperJSON.parse(event));
-    })
-  };
-}
-
-// src/messaging/presets/ws/index.ts
-init_esm_shims();
-
-// src/messaging/presets/ws/client.ts
-init_esm_shims();
-
-// src/messaging/presets/ws/context.ts
-init_esm_shims();
-import { target as target16 } from "@vue/devtools-shared";
-
-// src/messaging/presets/ws/server.ts
+// src/messaging/presets/electron/index.ts
 init_esm_shims();
 
-// src/messaging/presets/electron/index.ts
+// src/messaging/presets/electron/client.ts
 init_esm_shims();
 
 // src/messaging/presets/electron/context.ts
 init_esm_shims();
-import { target as target17 } from "@vue/devtools-shared";
+import { target as target16 } from "@vue/devtools-shared";
 var __ELECTRON_CLIENT_CONTEXT__ = "electron:client-context";
 var __ELECTRON_RPOXY_CONTEXT__ = "electron:proxy-context";
 var __ELECTRON_SERVER_CONTEXT__ = "electron:server-context";
@@ -5254,26 +5290,25 @@ var __DEVTOOLS_KIT_ELECTRON_MESSAGING_EVENT_KEY__ = {
   // on: proxy->server
 };
 function getElectronClientContext() {
-  return target17[__ELECTRON_CLIENT_CONTEXT__];
+  return target16[__ELECTRON_CLIENT_CONTEXT__];
 }
 function setElectronClientContext(context) {
-  target17[__ELECTRON_CLIENT_CONTEXT__] = context;
+  target16[__ELECTRON_CLIENT_CONTEXT__] = context;
 }
 function getElectronProxyContext() {
-  return target17[__ELECTRON_RPOXY_CONTEXT__];
+  return target16[__ELECTRON_RPOXY_CONTEXT__];
 }
 function setElectronProxyContext(context) {
-  target17[__ELECTRON_RPOXY_CONTEXT__] = context;
+  target16[__ELECTRON_RPOXY_CONTEXT__] = context;
 }
 function getElectronServerContext() {
-  return target17[__ELECTRON_SERVER_CONTEXT__];
+  return target16[__ELECTRON_SERVER_CONTEXT__];
 }
 function setElectronServerContext(context) {
-  target17[__ELECTRON_SERVER_CONTEXT__] = context;
+  target16[__ELECTRON_SERVER_CONTEXT__] = context;
 }
 
 // src/messaging/presets/electron/client.ts
-init_esm_shims();
 function createElectronClientChannel() {
   const socket = getElectronClientContext();
   return {
@@ -5325,9 +5360,12 @@ function createElectronServerChannel() {
 // src/messaging/presets/extension/index.ts
 init_esm_shims();
 
+// src/messaging/presets/extension/client.ts
+init_esm_shims();
+
 // src/messaging/presets/extension/context.ts
 init_esm_shims();
-import { target as target18 } from "@vue/devtools-shared";
+import { target as target17 } from "@vue/devtools-shared";
 var __EXTENSION_CLIENT_CONTEXT__ = "electron:client-context";
 var __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__ = {
   // client
@@ -5343,14 +5381,13 @@ var __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__ = {
   // on: proxy->server
 };
 function getExtensionClientContext() {
-  return target18[__EXTENSION_CLIENT_CONTEXT__];
+  return target17[__EXTENSION_CLIENT_CONTEXT__];
 }
 function setExtensionClientContext(context) {
-  target18[__EXTENSION_CLIENT_CONTEXT__] = context;
+  target17[__EXTENSION_CLIENT_CONTEXT__] = context;
 }
 
 // src/messaging/presets/extension/client.ts
-init_esm_shims();
 function createExtensionClientChannel() {
   let disconnected = false;
   let port = null;
@@ -5433,66 +5470,215 @@ function createExtensionProxyChannel() {
   };
 }
 
-// src/messaging/presets/extension/server.ts
+// src/messaging/presets/extension/server.ts
+init_esm_shims();
+function createExtensionServerChannel() {
+  return {
+    post: (data) => {
+      window.postMessage({
+        source: __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__.SERVER_TO_PROXY,
+        payload: SuperJSON.stringify(data)
+      }, "*");
+    },
+    on: (handler) => {
+      const listener = (event) => {
+        if (event.data.source === __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__.PROXY_TO_SERVER && event.data.payload) {
+          handler(SuperJSON.parse(event.data.payload));
+        }
+      };
+      window.addEventListener("message", listener);
+      return () => {
+        window.removeEventListener("message", listener);
+      };
+    }
+  };
+}
+
+// src/messaging/presets/iframe/index.ts
+init_esm_shims();
+
+// src/messaging/presets/iframe/client.ts
+init_esm_shims();
+import { isBrowser } from "@vue/devtools-shared";
+
+// src/messaging/presets/iframe/context.ts
+init_esm_shims();
+import { target as target18 } from "@vue/devtools-shared";
+var __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY = "__devtools-kit-iframe-messaging-event-key__";
+var __IFRAME_SERVER_CONTEXT__ = "iframe:server-context";
+function getIframeServerContext() {
+  return target18[__IFRAME_SERVER_CONTEXT__];
+}
+function setIframeServerContext(context) {
+  target18[__IFRAME_SERVER_CONTEXT__] = context;
+}
+
+// src/messaging/presets/iframe/client.ts
+function createIframeClientChannel() {
+  if (!isBrowser) {
+    return {
+      post: (data) => {
+      },
+      on: (handler) => {
+      }
+    };
+  }
+  return {
+    post: (data) => window.parent.postMessage(SuperJSON.stringify({
+      event: __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY,
+      data
+    }), "*"),
+    on: (handler) => window.addEventListener("message", (event) => {
+      try {
+        const parsed = SuperJSON.parse(event.data);
+        if (event.source === window.parent && parsed.event === __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY) {
+          handler(parsed.data);
+        }
+      } catch (e) {
+      }
+    })
+  };
+}
+
+// src/messaging/presets/iframe/server.ts
+init_esm_shims();
+import { isBrowser as isBrowser2 } from "@vue/devtools-shared";
+function createIframeServerChannel() {
+  if (!isBrowser2) {
+    return {
+      post: (data) => {
+      },
+      on: (handler) => {
+      }
+    };
+  }
+  return {
+    post: (data) => {
+      var _a25;
+      const iframe = getIframeServerContext();
+      (_a25 = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a25.postMessage(SuperJSON.stringify({
+        event: __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY,
+        data
+      }), "*");
+    },
+    on: (handler) => {
+      window.addEventListener("message", (event) => {
+        const iframe = getIframeServerContext();
+        try {
+          const parsed = SuperJSON.parse(event.data);
+          if (event.source === (iframe == null ? void 0 : iframe.contentWindow) && parsed.event === __DEVTOOLS_KIT_IFRAME_MESSAGING_EVENT_KEY) {
+            handler(parsed.data);
+          }
+        } catch (e) {
+        }
+      });
+    }
+  };
+}
+
+// src/messaging/presets/vite/index.ts
 init_esm_shims();
-function createExtensionServerChannel() {
+
+// src/messaging/presets/vite/client.ts
+init_esm_shims();
+
+// src/messaging/presets/vite/context.ts
+init_esm_shims();
+import { target as target19 } from "@vue/devtools-shared";
+var __DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY = "__devtools-kit-vite-messaging-event-key__";
+var __VITE_CLIENT_CONTEXT__ = "vite:client-context";
+var __VITE_SERVER_CONTEXT__ = "vite:server-context";
+function getViteClientContext() {
+  return target19[__VITE_CLIENT_CONTEXT__];
+}
+function setViteClientContext(context) {
+  target19[__VITE_CLIENT_CONTEXT__] = context;
+}
+function getViteServerContext() {
+  return target19[__VITE_SERVER_CONTEXT__];
+}
+function setViteServerContext(context) {
+  target19[__VITE_SERVER_CONTEXT__] = context;
+}
+
+// src/messaging/presets/vite/client.ts
+function createViteClientChannel() {
+  const client = getViteClientContext();
   return {
     post: (data) => {
-      window.postMessage({
-        source: __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__.SERVER_TO_PROXY,
-        payload: SuperJSON.stringify(data)
-      }, "*");
+      client == null ? void 0 : client.send(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, SuperJSON.stringify(data));
     },
     on: (handler) => {
-      const listener = (event) => {
-        if (event.data.source === __DEVTOOLS_KIT_EXTENSION_MESSAGING_EVENT_KEY__.PROXY_TO_SERVER && event.data.payload) {
-          handler(SuperJSON.parse(event.data.payload));
-        }
-      };
-      window.addEventListener("message", listener);
-      return () => {
-        window.removeEventListener("message", listener);
-      };
+      client == null ? void 0 : client.on(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, (event) => {
+        handler(SuperJSON.parse(event));
+      });
     }
   };
 }
 
+// src/messaging/presets/vite/server.ts
+init_esm_shims();
+function createViteServerChannel() {
+  var _a25;
+  const viteServer = getViteServerContext();
+  const ws = (_a25 = viteServer.hot) != null ? _a25 : viteServer.ws;
+  return {
+    post: (data) => ws == null ? void 0 : ws.send(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, SuperJSON.stringify(data)),
+    on: (handler) => ws == null ? void 0 : ws.on(__DEVTOOLS_KIT_VITE_MESSAGING_EVENT_KEY, (event) => {
+      handler(SuperJSON.parse(event));
+    })
+  };
+}
+
+// src/messaging/presets/ws/index.ts
+init_esm_shims();
+
+// src/messaging/presets/ws/client.ts
+init_esm_shims();
+
+// src/messaging/presets/ws/context.ts
+init_esm_shims();
+import { target as target20 } from "@vue/devtools-shared";
+
+// src/messaging/presets/ws/server.ts
+init_esm_shims();
+
 // src/messaging/index.ts
-var _a18, _b18;
-(_b18 = (_a18 = target19).__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__) != null ? _b18 : _a18.__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__ = [];
 var _a19, _b19;
-(_b19 = (_a19 = target19).__VUE_DEVTOOLS_KIT_RPC_CLIENT__) != null ? _b19 : _a19.__VUE_DEVTOOLS_KIT_RPC_CLIENT__ = null;
+(_b19 = (_a19 = target21).__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__) != null ? _b19 : _a19.__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__ = [];
 var _a20, _b20;
-(_b20 = (_a20 = target19).__VUE_DEVTOOLS_KIT_RPC_SERVER__) != null ? _b20 : _a20.__VUE_DEVTOOLS_KIT_RPC_SERVER__ = null;
+(_b20 = (_a20 = target21).__VUE_DEVTOOLS_KIT_RPC_CLIENT__) != null ? _b20 : _a20.__VUE_DEVTOOLS_KIT_RPC_CLIENT__ = null;
 var _a21, _b21;
-(_b21 = (_a21 = target19).__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__) != null ? _b21 : _a21.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__ = null;
+(_b21 = (_a21 = target21).__VUE_DEVTOOLS_KIT_RPC_SERVER__) != null ? _b21 : _a21.__VUE_DEVTOOLS_KIT_RPC_SERVER__ = null;
 var _a22, _b22;
-(_b22 = (_a22 = target19).__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__) != null ? _b22 : _a22.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__ = null;
+(_b22 = (_a22 = target21).__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__) != null ? _b22 : _a22.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__ = null;
 var _a23, _b23;
-(_b23 = (_a23 = target19).__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__) != null ? _b23 : _a23.__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__ = null;
+(_b23 = (_a23 = target21).__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__) != null ? _b23 : _a23.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__ = null;
+var _a24, _b24;
+(_b24 = (_a24 = target21).__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__) != null ? _b24 : _a24.__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__ = null;
 function setRpcClientToGlobal(rpc) {
-  target19.__VUE_DEVTOOLS_KIT_RPC_CLIENT__ = rpc;
+  target21.__VUE_DEVTOOLS_KIT_RPC_CLIENT__ = rpc;
 }
 function setRpcServerToGlobal(rpc) {
-  target19.__VUE_DEVTOOLS_KIT_RPC_SERVER__ = rpc;
+  target21.__VUE_DEVTOOLS_KIT_RPC_SERVER__ = rpc;
 }
 function getRpcClient() {
-  return target19.__VUE_DEVTOOLS_KIT_RPC_CLIENT__;
+  return target21.__VUE_DEVTOOLS_KIT_RPC_CLIENT__;
 }
 function getRpcServer() {
-  return target19.__VUE_DEVTOOLS_KIT_RPC_SERVER__;
+  return target21.__VUE_DEVTOOLS_KIT_RPC_SERVER__;
 }
 function setViteRpcClientToGlobal(rpc) {
-  target19.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__ = rpc;
+  target21.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__ = rpc;
 }
 function setViteRpcServerToGlobal(rpc) {
-  target19.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__ = rpc;
+  target21.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__ = rpc;
 }
 function getViteRpcClient() {
-  return target19.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__;
+  return target21.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__;
 }
 function getViteRpcServer() {
-  return target19.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__;
+  return target21.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__;
 }
 function getChannel(preset, host = "client") {
   const channel = {
@@ -5569,6 +5755,12 @@ function createRpcProxy(options = {}) {
 // src/shared/index.ts
 init_esm_shims();
 
+// src/shared/env.ts
+init_esm_shims();
+
+// src/shared/time.ts
+init_esm_shims();
+
 // src/shared/util.ts
 init_esm_shims();
 
@@ -5877,65 +6069,6 @@ function stringifyReplacer(key, _value, depth, seenInstance) {
   return sanitize(val);
 }
 
-// src/core/component/state/reviver.ts
-init_esm_shims();
-import { target as target20 } from "@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) {
-  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 activeAppRecord.value.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 target20[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_esm_shims();
 var MAX_SERIALIZED_SIZE = 2 * 1024 * 1024;
@@ -6060,101 +6193,6 @@ function parseCircularAutoChunks(data, reviver2 = null) {
   }
 }
 
-// src/core/component/state/format.ts
-init_esm_shims();
-function getInspectorStateValueType(value, raw = true) {
-  const type = typeof value;
-  if (value == null || value === UNDEFINED || 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, options) {
-  var _a25, _b25, _c;
-  const { customClass } = options != null ? options : {};
-  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 = ((_a25 = value._custom.value) == null ? void 0 : _a25._custom) && formatInspectorStateValue(value._custom.value, quotes, options);
-    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((_b25 = specialTypeRE.exec(value)) == null ? void 0 : _b25[2]);
-  } else if (typeof value === "string") {
-    const typeMatch = value.match(rawTypeRE);
-    if (typeMatch) {
-      value = escapeString(typeMatch[1]);
-    } else if (quotes) {
-      value = `<span>"</span>${(customClass == null ? void 0 : customClass.string) ? `<span class=${customClass.string}>${escapeString(value)}</span>` : escapeString(value)}<span>"</span>`;
-    } else {
-      value = (customClass == null ? void 0 : customClass.string) ? `<span class="${(_c = customClass == null ? void 0 : customClass.string) != null ? _c : ""}">${escapeString(value)}</span>` : escapeString(value);
-    }
-  }
-  return value;
-}
-function escapeString(value) {
-  return escape(value).replace(/ /g, "&nbsp;").replace(/\n/g, "<span>\\n</span>");
-}
-function getRaw(value) {
-  var _a25, _b25, _c;
-  let customType;
-  const isCustom = getInspectorStateValueType(value) === "custom";
-  let inherit = {};
-  if (isCustom) {
-    const data = value;
-    const customValue = (_a25 = data._custom) == null ? void 0 : _a25.value;
-    const currentCustomType = (_b25 = data._custom) == null ? void 0 : _b25.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;
-  if (customType === "date")
-    return value;
-  return replaceTokenToString(JSON.stringify(value));
-}
-function toSubmit(value, customType) {
-  if (customType === "bigint")
-    return BigInt(value);
-  if (customType === "date")
-    return new Date(value);
-  return JSON.parse(replaceStringToToken(value), reviver);
-}
-
 // src/shared/util.ts
 function stringify2(data) {
   return stringifyCircularAutoChunks(data, stringifyReplacer);
@@ -6165,26 +6203,6 @@ function parse2(data, revive2 = false) {
   return revive2 ? parseCircularAutoChunks(data, reviver) : parseCircularAutoChunks(data);
 }
 
-// src/shared/time.ts
-init_esm_shims();
-
-// src/shared/env.ts
-init_esm_shims();
-
-// src/core/devtools-client/detected.ts
-init_esm_shims();
-import { target as target21 } from "@vue/devtools-shared";
-function updateDevToolsClientDetected(params) {
-  devtoolsState.devtoolsClientDetected = {
-    ...devtoolsState.devtoolsClientDetected,
-    ...params
-  };
-  const devtoolsClientVisible = Object.values(devtoolsState.devtoolsClientDetected).some(Boolean);
-  toggleHighPerfMode(!devtoolsClientVisible);
-}
-var _a24, _b24;
-(_b24 = (_a24 = target21).__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__) != null ? _b24 : _a24.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__ = updateDevToolsClientDetected;
-
 // src/index.ts
 var devtools = {
   hook,