vite-plugin-vue-devtools 0.0.7 → 0.0.9

package/dist/client/assets/{VCard-415c7ae5.js → VCard-0472da6f.js}

@@ -1,4 +1,4 @@
-import { aw as _export_sfc, o as openBlock, e as createElementBlock, f as renderSlot } from './index-89bcc57b.js';
+import { aw as _export_sfc, o as openBlock, e as createElementBlock, f as renderSlot } from './index-6d7c9dec.js';
 
 /* unplugin-vue-components disabled */const _sfc_main = {};
 

package/dist/client/assets/{VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js → VIcon.vue_vue_type_script_setup_true_lang-15751023.js}

@@ -1,4 +1,4 @@
-import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass } from './index-89bcc57b.js';
+import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass } from './index-6d7c9dec.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "VIcon",

package/dist/client/assets/{VIconTitle.vue_vue_type_script_setup_true_lang-e52820ad.js → VIconTitle.vue_vue_type_script_setup_true_lang-36af287a.js}

@@ -1,4 +1,4 @@
-import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass, g as createCommentVNode, f as renderSlot, x as createBaseVNode, y as toDisplayString } from './index-89bcc57b.js';
+import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass, g as createCommentVNode, f as renderSlot, x as createBaseVNode, y as toDisplayString } from './index-6d7c9dec.js';
 
 const _hoisted_1 = {
   flex: "~ gap-3",

package/dist/client/assets/{VPanelGrids-155c3f49.js → VPanelGrids-3b54987c.js}

@@ -1,4 +1,4 @@
-import { aw as _export_sfc, o as openBlock, e as createElementBlock, f as renderSlot } from './index-89bcc57b.js';
+import { aw as _export_sfc, o as openBlock, e as createElementBlock, f as renderSlot } from './index-6d7c9dec.js';
 
 /* unplugin-vue-components disabled */const _sfc_main = {};
 

package/dist/client/assets/{VTextInput.vue_vue_type_script_setup_true_lang-a7aeaac7.js → VTextInput.vue_vue_type_script_setup_true_lang-6fec654b.js}

@@ -1,6 +1,6 @@
-import { _ as _sfc_main$2 } from './VIconTitle.vue_vue_type_script_setup_true_lang-e52820ad.js';
-import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
-import { v as defineComponent, K as useVModel, o as openBlock, e as createElementBlock, x as createBaseVNode, q as normalizeClass, u as createVNode, h as withCtx, f as renderSlot, g as createCommentVNode, c as createBlock, z as unref, d as withDirectives, F as Fragment, b as resolveDirective, Q as createTextVNode, y as toDisplayString, p as pushScopeId, a as popScopeId, aw as _export_sfc, ax as vModelDynamic, k as mergeProps, M as isRef } from './index-89bcc57b.js';
+import { _ as _sfc_main$2 } from './VIconTitle.vue_vue_type_script_setup_true_lang-36af287a.js';
+import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
+import { v as defineComponent, I as useVModel, o as openBlock, e as createElementBlock, x as createBaseVNode, q as normalizeClass, u as createVNode, h as withCtx, f as renderSlot, g as createCommentVNode, c as createBlock, z as unref, d as withDirectives, F as Fragment, b as resolveDirective, O as createTextVNode, y as toDisplayString, p as pushScopeId, a as popScopeId, aw as _export_sfc, ax as vModelDynamic, k as mergeProps, K as isRef } from './index-6d7c9dec.js';
 
 const _withScopeId = (n) => (pushScopeId("data-v-cf2e46eb"), n = n(), popScopeId(), n);
 const _hoisted_1$1 = ["open"];

package/dist/client/assets/{__inspecting-952b7753.js → __inspecting-57a351ce.js}

@@ -1,5 +1,5 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-155c3f49.js';
-import { v as defineComponent, az as useEventListener, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, aA as useDevtoolsClient } from './index-89bcc57b.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-3b54987c.js';
+import { v as defineComponent, az as useEventListener, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, aA as useDevtoolsClient } from './index-6d7c9dec.js';
 
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("div", null, " Inspecting Vue components ", -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/client/assets/{assets-606d73ab.js → assets-453168e0.js}

@@ -1,11 +1,11 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-155c3f49.js';
-import { _ as __unplugin_components_7 } from './VCard-415c7ae5.js';
-import { _ as _sfc_main$a } from './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
-import { v as defineComponent, o as openBlock, c as createBlock, h as withCtx, u as createVNode, k as mergeProps, j as resolveDynamicComponent, a0 as ref, ap as useElementSize, aq as onClickOutside, e as createElementBlock, x as createBaseVNode, f as renderSlot, z as unref, g as createCommentVNode, ar as Transition, a1 as computed, y as toDisplayString, q as normalizeClass, as as useStyleTag, l as normalizeStyle, at as computedAsync, au as useTimeAgo, F as Fragment, Q as createTextVNode, S as _sfc_main$b, av as onKeyDown, M as isRef, i as renderList } from './index-89bcc57b.js';
-import { r as rpc } from './rpc-115351a6.js';
-import { _ as _sfc_main$c, a as __unplugin_components_3 } from './VTextInput.vue_vue_type_script_setup_true_lang-a7aeaac7.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-3b54987c.js';
+import { _ as __unplugin_components_7 } from './VCard-0472da6f.js';
+import { _ as _sfc_main$a } from './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
+import { v as defineComponent, o as openBlock, c as createBlock, h as withCtx, u as createVNode, k as mergeProps, j as resolveDynamicComponent, Z as ref, ap as useElementSize, aq as onClickOutside, e as createElementBlock, x as createBaseVNode, f as renderSlot, z as unref, g as createCommentVNode, ar as Transition, $ as computed, y as toDisplayString, q as normalizeClass, as as useStyleTag, l as normalizeStyle, at as computedAsync, au as useTimeAgo, F as Fragment, O as createTextVNode, Q as _sfc_main$b, av as onKeyDown, K as isRef, i as renderList } from './index-6d7c9dec.js';
+import { r as rpc } from './rpc-3eeb6f82.js';
+import { _ as _sfc_main$c, a as __unplugin_components_3 } from './VTextInput.vue_vue_type_script_setup_true_lang-6fec654b.js';
 import { F as Fuse } from './fuse.esm-c317b696.js';
-import './VIconTitle.vue_vue_type_script_setup_true_lang-e52820ad.js';
+import './VIconTitle.vue_vue_type_script_setup_true_lang-36af287a.js';
 
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VIconButton",

package/dist/client/assets/{components-bd34817a.js → components-8b73bb7e.js}

@@ -1,9 +1,9 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-155c3f49.js';
-import { _ as __unplugin_components_7 } from './VCard-415c7ae5.js';
-import { a as _sfc_main$2, g, M, _ as _sfc_main$3 } from './splitpanes.es-3cb512fa.js';
-import { F as Fragment, a0 as ref, aj as shallowRef, a1 as computed, v as defineComponent, r as resolveComponent, o as openBlock, e as createElementBlock, x as createBaseVNode, z as unref, c as createBlock, q as normalizeClass, y as toDisplayString, l as normalizeStyle, i as renderList, g as createCommentVNode, A as onMounted, ak as onVueInstanceUpdate, u as createVNode, h as withCtx, ac as reactive, al as instance } from './index-89bcc57b.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
-import './index-21cc52d6.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-3b54987c.js';
+import { _ as __unplugin_components_7 } from './VCard-0472da6f.js';
+import { a as _sfc_main$2, g, M, _ as _sfc_main$3 } from './splitpanes.es-741c1942.js';
+import { F as Fragment, Z as ref, aj as shallowRef, $ as computed, v as defineComponent, r as resolveComponent, o as openBlock, e as createElementBlock, x as createBaseVNode, z as unref, c as createBlock, q as normalizeClass, y as toDisplayString, l as normalizeStyle, i as renderList, g as createCommentVNode, a5 as onMounted, ak as onVueInstanceUpdate, u as createVNode, h as withCtx, ab as reactive, al as instance } from './index-6d7c9dec.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
+import './index-d7bd5f5d.js';
 
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;

package/dist/client/assets/{graph-1c1d01ca.js → graph-bf395a07.js}

@@ -1,6 +1,6 @@
-import { a0 as ref, af as useStorage, a1 as computed, v as defineComponent, o as openBlock, e as createElementBlock, d as withDirectives, ag as vModelText, z as unref, x as createBaseVNode, M as isRef, N as vModelCheckbox, ah as useDark, A as onMounted, ai as watch, u as createVNode } from './index-89bcc57b.js';
+import { Z as ref, af as useStorage, $ as computed, v as defineComponent, o as openBlock, e as createElementBlock, d as withDirectives, ag as vModelText, z as unref, x as createBaseVNode, K as isRef, L as vModelCheckbox, ah as useDark, a5 as onMounted, ai as watch, u as createVNode } from './index-6d7c9dec.js';
 import { F as Fuse } from './fuse.esm-c317b696.js';
-import { r as rpc } from './rpc-115351a6.js';
+import { r as rpc } from './rpc-3eeb6f82.js';
 
 const list = ref(await rpc.componentGraph());
 const searchText = useStorage("vite-inspect-search-text", "");

package/dist/client/assets/{index-89bcc57b.js → index-6d7c9dec.js}

@@ -10501,7 +10501,7 @@ function createMemoryHistory(base = '') {
 function isRouteLocation(route) {
     return typeof route === 'string' || (route && typeof route === 'object');
 }
-function isRouteName(name) {
+function isRouteName$1(name) {
     return typeof name === 'string' || typeof name === 'symbol';
 }
 
@@ -11087,7 +11087,7 @@ function createRouterMatcher(routes, globalOptions) {
             : noop$1;
     }
     function removeRoute(matcherRef) {
-        if (isRouteName(matcherRef)) {
+        if (isRouteName$1(matcherRef)) {
             const matcher = matcherMap.get(matcherRef);
             if (matcher) {
                 matcherMap.delete(matcherRef);
@@ -11974,7 +11974,7 @@ function createRouter(options) {
     function addRoute(parentOrRoute, route) {
         let parent;
         let record;
-        if (isRouteName(parentOrRoute)) {
+        if (isRouteName$1(parentOrRoute)) {
             parent = matcher.getRecordMatcher(parentOrRoute);
             record = route;
         }
@@ -14157,17 +14157,17 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 
 /* Injected with object hook! */
 
-const __pages_import_0__ = () => __vitePreload(() => import('./timeline-d187c4c5.js'),true?["./timeline-d187c4c5.js","./splitpanes.es-3cb512fa.js","./VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js","./index-21cc52d6.js","./VPanelGrids-155c3f49.js","./VCard-415c7ae5.js","./timeline-b315b2e0.css"]:void 0,import.meta.url);
-const __pages_import_1__ = () => __vitePreload(() => import('./settings-cf21bbcf.js'),true?["./settings-cf21bbcf.js","./VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js","./VIconTitle.vue_vue_type_script_setup_true_lang-e52820ad.js"]:void 0,import.meta.url);
-const __pages_import_2__ = () => __vitePreload(() => import('./routes-012c9d6a.js'),true?["./routes-012c9d6a.js","./VPanelGrids-155c3f49.js","./VCard-415c7ae5.js","./splitpanes.es-3cb512fa.js","./VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js","./index-21cc52d6.js"]:void 0,import.meta.url);
-const __pages_import_3__ = () => __vitePreload(() => import('./pinia-a857fe5f.js'),true?["./pinia-a857fe5f.js","./splitpanes.es-3cb512fa.js","./VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js","./index-21cc52d6.js"]:void 0,import.meta.url);
-const __pages_import_4__ = () => __vitePreload(() => import('./pages-da50bc3a.js'),true?["./pages-da50bc3a.js","./VTextInput.vue_vue_type_script_setup_true_lang-a7aeaac7.js","./VIconTitle.vue_vue_type_script_setup_true_lang-e52820ad.js","./VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js","./VTextInput-52804693.css"]:void 0,import.meta.url);
-const __pages_import_5__ = () => __vitePreload(() => import('./overview-a18b9320.js'),true?["./overview-a18b9320.js","./VPanelGrids-155c3f49.js","./rpc-115351a6.js","./index-21cc52d6.js"]:void 0,import.meta.url);
-const __pages_import_6__ = () => __vitePreload(() => import('./inspect-f75be7cc.js'),true?["./inspect-f75be7cc.js","./rpc-115351a6.js"]:void 0,import.meta.url);
-const __pages_import_8__ = () => __vitePreload(() => import('./graph-1c1d01ca.js'),true?["./graph-1c1d01ca.js","./fuse.esm-c317b696.js","./rpc-115351a6.js"]:void 0,import.meta.url);
-const __pages_import_9__ = () => __vitePreload(() => import('./components-bd34817a.js'),true?["./components-bd34817a.js","./VPanelGrids-155c3f49.js","./VCard-415c7ae5.js","./splitpanes.es-3cb512fa.js","./VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js","./index-21cc52d6.js"]:void 0,import.meta.url);
-const __pages_import_10__ = () => __vitePreload(() => import('./assets-606d73ab.js'),true?["./assets-606d73ab.js","./VPanelGrids-155c3f49.js","./VCard-415c7ae5.js","./VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js","./rpc-115351a6.js","./VTextInput.vue_vue_type_script_setup_true_lang-a7aeaac7.js","./VIconTitle.vue_vue_type_script_setup_true_lang-e52820ad.js","./VTextInput-52804693.css","./fuse.esm-c317b696.js"]:void 0,import.meta.url);
-const __pages_import_11__ = () => __vitePreload(() => import('./__inspecting-952b7753.js'),true?["./__inspecting-952b7753.js","./VPanelGrids-155c3f49.js"]:void 0,import.meta.url);
+const __pages_import_0__ = () => __vitePreload(() => import('./timeline-22af7a37.js'),true?["./timeline-22af7a37.js","./splitpanes.es-741c1942.js","./VIcon.vue_vue_type_script_setup_true_lang-15751023.js","./index-d7bd5f5d.js","./VPanelGrids-3b54987c.js","./VCard-0472da6f.js","./timeline-b315b2e0.css"]:void 0,import.meta.url);
+const __pages_import_1__ = () => __vitePreload(() => import('./settings-b043f2cf.js'),true?["./settings-b043f2cf.js","./VIcon.vue_vue_type_script_setup_true_lang-15751023.js","./VIconTitle.vue_vue_type_script_setup_true_lang-36af287a.js"]:void 0,import.meta.url);
+const __pages_import_2__ = () => __vitePreload(() => import('./routes-9b71e10a.js'),true?["./routes-9b71e10a.js","./VPanelGrids-3b54987c.js","./VCard-0472da6f.js","./splitpanes.es-741c1942.js","./VIcon.vue_vue_type_script_setup_true_lang-15751023.js","./index-d7bd5f5d.js"]:void 0,import.meta.url);
+const __pages_import_3__ = () => __vitePreload(() => import('./pinia-4eef2ee3.js'),true?["./pinia-4eef2ee3.js","./splitpanes.es-741c1942.js","./VIcon.vue_vue_type_script_setup_true_lang-15751023.js","./index-d7bd5f5d.js"]:void 0,import.meta.url);
+const __pages_import_4__ = () => __vitePreload(() => import('./pages-1efbbfe9.js'),true?["./pages-1efbbfe9.js","./VTextInput.vue_vue_type_script_setup_true_lang-6fec654b.js","./VIconTitle.vue_vue_type_script_setup_true_lang-36af287a.js","./VIcon.vue_vue_type_script_setup_true_lang-15751023.js","./VTextInput-52804693.css"]:void 0,import.meta.url);
+const __pages_import_5__ = () => __vitePreload(() => import('./overview-0e6f7fe5.js'),true?["./overview-0e6f7fe5.js","./VPanelGrids-3b54987c.js","./rpc-3eeb6f82.js","./index-d7bd5f5d.js"]:void 0,import.meta.url);
+const __pages_import_6__ = () => __vitePreload(() => import('./inspect-09e36123.js'),true?["./inspect-09e36123.js","./rpc-3eeb6f82.js"]:void 0,import.meta.url);
+const __pages_import_8__ = () => __vitePreload(() => import('./graph-bf395a07.js'),true?["./graph-bf395a07.js","./fuse.esm-c317b696.js","./rpc-3eeb6f82.js"]:void 0,import.meta.url);
+const __pages_import_9__ = () => __vitePreload(() => import('./components-8b73bb7e.js'),true?["./components-8b73bb7e.js","./VPanelGrids-3b54987c.js","./VCard-0472da6f.js","./splitpanes.es-741c1942.js","./VIcon.vue_vue_type_script_setup_true_lang-15751023.js","./index-d7bd5f5d.js"]:void 0,import.meta.url);
+const __pages_import_10__ = () => __vitePreload(() => import('./assets-453168e0.js'),true?["./assets-453168e0.js","./VPanelGrids-3b54987c.js","./VCard-0472da6f.js","./VIcon.vue_vue_type_script_setup_true_lang-15751023.js","./rpc-3eeb6f82.js","./VTextInput.vue_vue_type_script_setup_true_lang-6fec654b.js","./VIconTitle.vue_vue_type_script_setup_true_lang-36af287a.js","./VTextInput-52804693.css","./fuse.esm-c317b696.js"]:void 0,import.meta.url);
+const __pages_import_11__ = () => __vitePreload(() => import('./__inspecting-57a351ce.js'),true?["./__inspecting-57a351ce.js","./VPanelGrids-3b54987c.js"]:void 0,import.meta.url);
 
 const routes$1 = [{"name":"timeline","path":"/timeline","component":__pages_import_0__,"props":true},{"name":"settings","path":"/settings","component":__pages_import_1__,"props":true},{"name":"routes","path":"/routes","component":__pages_import_2__,"props":true},{"name":"pinia","path":"/pinia","component":__pages_import_3__,"props":true},{"name":"pages","path":"/pages","component":__pages_import_4__,"props":true},{"name":"overview","path":"/overview","component":__pages_import_5__,"props":true},{"name":"inspect","path":"/inspect","component":__pages_import_6__,"props":true},{"name":"index","path":"/","component":_sfc_main$7,"props":true},{"name":"graph","path":"/graph","component":__pages_import_8__,"props":true},{"name":"components","path":"/components","component":__pages_import_9__,"props":true},{"name":"assets","path":"/assets","component":__pages_import_10__,"props":true},{"name":"__inspecting","path":"/__inspecting","component":__pages_import_11__,"props":true}];
 /* Injected with object hook! */
@@ -15069,7 +15069,10 @@ const DARK = 6710886;
 const LAYER_ID = "router";
 const routeRecordMatcher = ref();
 const activeRouteRecordIndex = ref(0);
-const map = /* @__PURE__ */ new Map();
+let routeRecordMatcherStateMap = /* @__PURE__ */ new Map();
+function isRouteName(name) {
+  return typeof name === "string" || typeof name === "symbol";
+}
 const routeRecordMatcherState = computed(() => {
   return routeRecordMatcher.value?.map((route) => {
     const state = formatRouteRecordMatcherForStateInspector(route);
@@ -15079,7 +15082,7 @@ const routeRecordMatcherState = computed(() => {
       tags,
       state
     };
-  }).sort((a, b) => a.path.length - b.path.length).filter((i) => !map.has(i.path) && map.set(i.path, 1));
+  }).sort((a, b) => a.path.length - b.path.length).filter((i) => !routeRecordMatcherStateMap.has(i.path) && routeRecordMatcherStateMap.set(i.path, 1));
 });
 const activeRouteRecordMatcherState = computed(() => {
   const state = routeRecordMatcherState.value?.[activeRouteRecordIndex.value]?.state;
@@ -15198,10 +15201,49 @@ function subscribeRouterChanged(router2) {
     });
   });
 }
-function initRoutes() {
+function initRoutes(buffer) {
   if (router$1.value) {
+    let addRoute = function(parentOrRoute, route) {
+      let parent;
+      let record;
+      if (isRouteName(parentOrRoute)) {
+        parent = matcher.getRecordMatcher(parentOrRoute);
+        record = route;
+      } else {
+        record = parentOrRoute;
+      }
+      return matcher.addRoute(record, parent);
+    }, removeRoute = function(name) {
+      const recordMatcher = matcher.getRecordMatcher(name);
+      if (recordMatcher)
+        matcher.removeRoute(recordMatcher);
+    }, updateRecordMatcher = function() {
+      triggerRef(router$1);
+      routeRecordMatcherStateMap = /* @__PURE__ */ new Map();
+      routeRecordMatcher.value = matcher.getRoutes();
+      triggerRef(routeRecordMatcher);
+      activeRouteRecordIndex.value = 0;
+    };
     const matcher = createRouterMatcher(router$1.value?.options.routes, router$1.value?.options);
     routeRecordMatcher.value = matcher.getRoutes();
+    buffer.forEach(([type, payload]) => {
+      type === "router:add-route" ? addRoute(...payload.args) : removeRoute(...payload.args);
+      updateRecordMatcher();
+    });
+    const _addRoute = router$1.value.addRoute;
+    router$1.value.addRoute = (...args) => {
+      const res = _addRoute(...args);
+      addRoute(...args);
+      updateRecordMatcher();
+      return res;
+    };
+    const _removeRoute = router$1.value.removeRoute;
+    router$1.value.removeRoute = (...args) => {
+      const res = _removeRoute(...args);
+      removeRoute(...args);
+      updateRecordMatcher();
+      return res;
+    };
     timelineApi.addTimelineLayer({
       id: LAYER_ID,
       label: "Router Navigations"
@@ -15241,7 +15283,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       client.value.markClientLoaded();
       hookApi.produce();
       hookApi.consume(hookBuffer.filter(([type]) => type.startsWith("component:")));
-      initRoutes();
+      initRoutes(hookBuffer.filter(([type]) => type.startsWith("router:")));
       initPinia();
       hookApi.hook.on("host:inspector:close", () => {
         if (route.path === "/__inspecting")
@@ -15330,4 +15372,4 @@ app.mount("#app");
 
 /* Injected with object hook! */
 
-export { __unplugin_components_1 as $, onMounted as A, onUnmounted as B, timelineLayer as C, activeTimelineEvents as D, activeTimelineEventIndex as E, Fragment as F, toggleTimelineEventIndex as G, timelineEventDetails as H, activeLayerId as I, toggleTimelineLayer as J, useVModel as K, vModelSelect as L, isRef as M, vModelCheckbox as N, withKeys as O, useCategorizedTabs as P, createTextVNode as Q, useDevToolsSettings as R, _sfc_main$a as S, _sfc_main$4 as T, _sfc_main$6 as U, router$1 as V, routeRecordMatcherState as W, activeRouteRecordMatcherState as X, activeRouteRecordIndex as Y, toggleRouteRecordMatcher as Z, _sfc_main$3 as _, popScopeId as a, ref as a0, computed as a1, piniaStoresCategory as a2, toRaw as a3, piniaState as a4, piniaGetters as a5, withModifiers as a6, currentRoute as a7, routes as a8, vueVersion as a9, useDevtoolsClient as aA, __unplugin_components_0$1 as aa, useColorMode as ab, reactive as ac, useElementBounding as ad, watchEffect as ae, useStorage as af, vModelText as ag, useDark as ah, watch as ai, shallowRef as aj, onVueInstanceUpdate as ak, instance as al, nanoid as am, vShow as an, h as ao, useElementSize as ap, onClickOutside as aq, Transition as ar, useStyleTag as as, computedAsync as at, useTimeAgo as au, onKeyDown as av, _export_sfc as aw, vModelDynamic as ax, __vitePreload as ay, useEventListener as az, resolveDirective as b, createBlock as c, withDirectives as d, createElementBlock as e, renderSlot as f, createCommentVNode as g, withCtx as h, renderList as i, resolveDynamicComponent as j, mergeProps as k, normalizeStyle as l, markRaw as m, nextTick as n, openBlock as o, pushScopeId as p, normalizeClass as q, resolveComponent as r, shallowReactive as s, toHandlers as t, createVNode as u, defineComponent as v, withScopeId as w, createBaseVNode as x, toDisplayString as y, unref as z };
+export { computed as $, timelineLayer as A, activeTimelineEvents as B, activeTimelineEventIndex as C, toggleTimelineEventIndex as D, timelineEventDetails as E, Fragment as F, activeLayerId as G, toggleTimelineLayer as H, useVModel as I, vModelSelect as J, isRef as K, vModelCheckbox as L, withKeys as M, useCategorizedTabs as N, createTextVNode as O, useDevToolsSettings as P, _sfc_main$a as Q, _sfc_main$4 as R, _sfc_main$6 as S, router$1 as T, routeRecordMatcherState as U, activeRouteRecordMatcherState as V, activeRouteRecordIndex as W, toggleRouteRecordMatcher as X, __unplugin_components_1 as Y, ref as Z, _sfc_main$3 as _, popScopeId as a, piniaStoresCategory as a0, toRaw as a1, piniaState as a2, piniaGetters as a3, withModifiers as a4, onMounted as a5, currentRoute as a6, routes as a7, vueVersion as a8, __unplugin_components_0$1 as a9, useDevtoolsClient as aA, useColorMode as aa, reactive as ab, useElementBounding as ac, watchEffect as ad, onUnmounted as ae, useStorage as af, vModelText as ag, useDark as ah, watch as ai, shallowRef as aj, onVueInstanceUpdate as ak, instance as al, nanoid as am, vShow as an, h as ao, useElementSize as ap, onClickOutside as aq, Transition as ar, useStyleTag as as, computedAsync as at, useTimeAgo as au, onKeyDown as av, _export_sfc as aw, vModelDynamic as ax, __vitePreload as ay, useEventListener as az, resolveDirective as b, createBlock as c, withDirectives as d, createElementBlock as e, renderSlot as f, createCommentVNode as g, withCtx as h, renderList as i, resolveDynamicComponent as j, mergeProps as k, normalizeStyle as l, markRaw as m, nextTick as n, openBlock as o, pushScopeId as p, normalizeClass as q, resolveComponent as r, shallowReactive as s, toHandlers as t, createVNode as u, defineComponent as v, withScopeId as w, createBaseVNode as x, toDisplayString as y, unref as z };

package/dist/client/assets/{index-21cc52d6.js → index-d7bd5f5d.js}

@@ -1,4 +1,4 @@
-import { M as isRef } from './index-89bcc57b.js';
+import { K as isRef } from './index-6d7c9dec.js';
 
 const objectToString = Object.prototype.toString;
 function toTypeString(value) {

package/dist/client/assets/{inspect-f75be7cc.js → inspect-09e36123.js}

@@ -1,5 +1,5 @@
-import { v as defineComponent, ab as useColorMode, a0 as ref, a1 as computed, ac as reactive, ad as useElementBounding, A as onMounted, n as nextTick, ae as watchEffect, B as onUnmounted, o as openBlock, e as createElementBlock, u as createVNode, z as unref } from './index-89bcc57b.js';
-import { i as inspectClientUrl } from './rpc-115351a6.js';
+import { v as defineComponent, aa as useColorMode, Z as ref, $ as computed, ab as reactive, ac as useElementBounding, a5 as onMounted, n as nextTick, ad as watchEffect, ae as onUnmounted, o as openBlock, e as createElementBlock, u as createVNode, z as unref } from './index-6d7c9dec.js';
+import { i as inspectClientUrl } from './rpc-3eeb6f82.js';
 
 const iframeCacheMap = /* @__PURE__ */ new Map();
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({

package/dist/client/assets/{overview-a18b9320.js → overview-0e6f7fe5.js}

@@ -1,9 +1,9 @@
-import { _ as __unplugin_components_0$1 } from './VPanelGrids-155c3f49.js';
-import { a0 as ref, a1 as computed, a8 as routes, v as defineComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, u as createVNode, y as toDisplayString, z as unref, a9 as vueVersion, Q as createTextVNode, e as createElementBlock, F as Fragment, aa as __unplugin_components_0, $ as __unplugin_components_1, r as resolveComponent, S as _sfc_main$1 } from './index-89bcc57b.js';
-import { r as rpc } from './rpc-115351a6.js';
-import { i as isMacOS } from './index-21cc52d6.js';
+import { _ as __unplugin_components_0$1 } from './VPanelGrids-3b54987c.js';
+import { Z as ref, $ as computed, a7 as routes, v as defineComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, u as createVNode, y as toDisplayString, z as unref, a8 as vueVersion, O as createTextVNode, e as createElementBlock, F as Fragment, a9 as __unplugin_components_0, Y as __unplugin_components_1, r as resolveComponent, Q as _sfc_main$1 } from './index-6d7c9dec.js';
+import { r as rpc } from './rpc-3eeb6f82.js';
+import { i as isMacOS } from './index-d7bd5f5d.js';
 
-const version = "0.0.7";
+const version = "0.0.9";
 
 /* Injected with object hook! */
 

package/dist/client/assets/{pages-da50bc3a.js → pages-1efbbfe9.js}

@@ -1,7 +1,7 @@
-import { _ as _sfc_main$3, a as __unplugin_components_3 } from './VTextInput.vue_vue_type_script_setup_true_lang-a7aeaac7.js';
-import { v as defineComponent, a0 as ref, a1 as computed, r as resolveComponent, z as unref, o as openBlock, e as createElementBlock, x as createBaseVNode, y as toDisplayString, c as createBlock, h as withCtx, a6 as withModifiers, F as Fragment, i as renderList, g as createCommentVNode, u as createVNode, Q as createTextVNode, q as normalizeClass, S as _sfc_main$4, $ as __unplugin_components_1, A as onMounted, a7 as currentRoute, V as router, M as isRef, O as withKeys, a8 as routes } from './index-89bcc57b.js';
-import './VIconTitle.vue_vue_type_script_setup_true_lang-e52820ad.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
+import { _ as _sfc_main$3, a as __unplugin_components_3 } from './VTextInput.vue_vue_type_script_setup_true_lang-6fec654b.js';
+import { v as defineComponent, Z as ref, $ as computed, r as resolveComponent, z as unref, o as openBlock, e as createElementBlock, x as createBaseVNode, y as toDisplayString, c as createBlock, h as withCtx, a4 as withModifiers, F as Fragment, i as renderList, g as createCommentVNode, u as createVNode, O as createTextVNode, q as normalizeClass, Q as _sfc_main$4, Y as __unplugin_components_1, a5 as onMounted, a6 as currentRoute, T as router, K as isRef, M as withKeys, a7 as routes } from './index-6d7c9dec.js';
+import './VIconTitle.vue_vue_type_script_setup_true_lang-36af287a.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
 
 const _hoisted_1$2 = {
   block: "",

package/dist/client/assets/{pinia-a857fe5f.js → pinia-4eef2ee3.js}

@@ -1,7 +1,7 @@
-import { g, M, _ as _sfc_main$1 } from './splitpanes.es-3cb512fa.js';
-import { v as defineComponent, a0 as ref, a1 as computed, a2 as piniaStoresCategory, a3 as toRaw, a4 as piniaState, a5 as piniaGetters, z as unref, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, q as normalizeClass, y as toDisplayString, c as createBlock } from './index-89bcc57b.js';
-import { p as pick } from './index-21cc52d6.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
+import { g, M, _ as _sfc_main$1 } from './splitpanes.es-741c1942.js';
+import { v as defineComponent, Z as ref, $ as computed, a0 as piniaStoresCategory, a1 as toRaw, a2 as piniaState, a3 as piniaGetters, z as unref, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, q as normalizeClass, y as toDisplayString, c as createBlock } from './index-6d7c9dec.js';
+import { p as pick } from './index-d7bd5f5d.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
 
 const _hoisted_1 = {
   "h-screen": "",

package/dist/client/assets/{routes-012c9d6a.js → routes-9b71e10a.js}

@@ -1,9 +1,9 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-155c3f49.js';
-import { _ as __unplugin_components_7 } from './VCard-415c7ae5.js';
-import { v as defineComponent, z as unref, V as router, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, W as routeRecordMatcherState, X as activeRouteRecordMatcherState, c as createBlock, U as _sfc_main$2, q as normalizeClass, Y as activeRouteRecordIndex, Z as toggleRouteRecordMatcher, Q as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, $ as __unplugin_components_1 } from './index-89bcc57b.js';
-import { g, M, _ as _sfc_main$1 } from './splitpanes.es-3cb512fa.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
-import './index-21cc52d6.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-3b54987c.js';
+import { _ as __unplugin_components_7 } from './VCard-0472da6f.js';
+import { v as defineComponent, z as unref, T as router, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, U as routeRecordMatcherState, V as activeRouteRecordMatcherState, c as createBlock, S as _sfc_main$2, q as normalizeClass, W as activeRouteRecordIndex, X as toggleRouteRecordMatcher, O as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, Y as __unplugin_components_1 } from './index-6d7c9dec.js';
+import { g, M, _ as _sfc_main$1 } from './splitpanes.es-741c1942.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
+import './index-d7bd5f5d.js';
 
 const _hoisted_1 = {
   key: 0,

package/dist/client/assets/{rpc-115351a6.js → rpc-3eeb6f82.js}

@@ -1,4 +1,4 @@
-import { ay as __vitePreload } from './index-89bcc57b.js';
+import { ay as __vitePreload } from './index-6d7c9dec.js';
 
 const DEFAULT_TIMEOUT = 6e4;
 function defaultSerialize(i) {

package/dist/client/assets/{settings-cf21bbcf.js → settings-b043f2cf.js}

@@ -1,6 +1,6 @@
-import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
-import { v as defineComponent, K as useVModel, o as openBlock, e as createElementBlock, f as renderSlot, d as withDirectives, L as vModelSelect, z as unref, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, M as isRef, c as createBlock, N as vModelCheckbox, O as withKeys, P as useCategorizedTabs, u as createVNode, F as Fragment, i as renderList, h as withCtx, Q as createTextVNode, R as useDevToolsSettings, _ as _sfc_main$5, S as _sfc_main$6, T as _sfc_main$7, q as normalizeClass, U as _sfc_main$8 } from './index-89bcc57b.js';
-import { _ as _sfc_main$4 } from './VIconTitle.vue_vue_type_script_setup_true_lang-e52820ad.js';
+import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
+import { v as defineComponent, I as useVModel, o as openBlock, e as createElementBlock, f as renderSlot, d as withDirectives, J as vModelSelect, z as unref, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, K as isRef, c as createBlock, L as vModelCheckbox, M as withKeys, N as useCategorizedTabs, u as createVNode, F as Fragment, i as renderList, h as withCtx, O as createTextVNode, P as useDevToolsSettings, _ as _sfc_main$5, Q as _sfc_main$6, R as _sfc_main$7, q as normalizeClass, S as _sfc_main$8 } from './index-6d7c9dec.js';
+import { _ as _sfc_main$4 } from './VIconTitle.vue_vue_type_script_setup_true_lang-36af287a.js';
 
 const _hoisted_1$2 = { class: "n-text-input flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base" };
 const _hoisted_2$2 = ["disabled"];

package/dist/client/assets/{splitpanes.es-3cb512fa.js → splitpanes.es-741c1942.js}

@@ -1,6 +1,6 @@
-import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
-import { v as defineComponent, o as openBlock, c as createBlock, q as normalizeClass, M as isRef, a3 as toRaw, a1 as computed, r as resolveComponent, e as createElementBlock, i as renderList, z as unref, am as nanoid, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, F as Fragment, a0 as ref, u as createVNode, d as withDirectives, an as vShow, ao as h, f as renderSlot, l as normalizeStyle } from './index-89bcc57b.js';
-import { a as isComputed, b as isArray, c as isMap, d as isSet, e as isRegExp, t as toRawType, f as isPlainObject, g as escape } from './index-21cc52d6.js';
+import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
+import { v as defineComponent, o as openBlock, c as createBlock, q as normalizeClass, K as isRef, a1 as toRaw, $ as computed, r as resolveComponent, e as createElementBlock, i as renderList, z as unref, am as nanoid, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, F as Fragment, Z as ref, u as createVNode, d as withDirectives, an as vShow, ao as h, f as renderSlot, l as normalizeStyle } from './index-6d7c9dec.js';
+import { a as isComputed, b as isArray, c as isMap, d as isSet, e as isRegExp, t as toRawType, f as isPlainObject, g as escape } from './index-d7bd5f5d.js';
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "VExpandIcon",

package/dist/client/assets/{timeline-d187c4c5.js → timeline-22af7a37.js}

@@ -1,9 +1,9 @@
-import { g, M, _ as _sfc_main$2 } from './splitpanes.es-3cb512fa.js';
-import { _ as __unplugin_components_0 } from './VPanelGrids-155c3f49.js';
-import { _ as __unplugin_components_7 } from './VCard-415c7ae5.js';
-import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, A as onMounted, B as onUnmounted, C as timelineLayer, D as activeTimelineEvents, E as activeTimelineEventIndex, G as toggleTimelineEventIndex, H as timelineEventDetails, I as activeLayerId, J as toggleTimelineLayer } from './index-89bcc57b.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-60e8343f.js';
-import './index-21cc52d6.js';
+import { g, M, _ as _sfc_main$2 } from './splitpanes.es-741c1942.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-3b54987c.js';
+import { _ as __unplugin_components_7 } from './VCard-0472da6f.js';
+import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-6d7c9dec.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-15751023.js';
+import './index-d7bd5f5d.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1425,10 +1425,6 @@ const _hoisted_6 = {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "timeline",
   setup(__props) {
-    onMounted(() => {
-    });
-    onUnmounted(() => {
-    });
     return (_ctx, _cache) => {
       const _component_TimelineEvent = _sfc_main$1;
       const _component_StateFields = _sfc_main$2;

package/dist/client/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <title>Vue Devtools</title>
-  <script type="module" crossorigin src="./assets/index-89bcc57b.js"></script>
+  <script type="module" crossorigin src="./assets/index-6d7c9dec.js"></script>
   <link rel="stylesheet" href="./assets/index-62a10721.css">
 </head>
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "packageManager": "pnpm@8.4.0",
   "description": "A vite plugin for Vue Devtools",
   "author": "webfansplz",

package/src/node/Container.vue

@@ -8,6 +8,18 @@ const props = defineProps({
   },
 })
 
+const DevtoolsHooks = {
+  APP_INIT: 'app:init',
+  COMPONENT_UPDATED: 'component:updated',
+  COMPONENT_ADDED: 'component:added',
+  COMPONENT_REMOVED: 'component:removed',
+  COMPONENT_EMIT: 'component:emit',
+  PERF_START: 'perf:start',
+  PERF_END: 'perf:end',
+  ADD_ROUTE: 'router:add-route',
+  REMOVE_ROUTE: 'router:remove-route',
+}
+
 window.__VUE_DEVTOOLS_GLOBAL_HOOKS__ = function () {
   return props.hook
 }
@@ -240,17 +252,40 @@ function initPanelPosition() {
   }
 }
 
+function captureDynamicRoute(app) {
+  const router = app?.config?.globalProperties?.$router
+  if (!router)
+    return
+
+  const _addRoute = router.addRoute
+  router.addRoute = (...args) => {
+    const res = _addRoute(...args)
+
+    if (!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded) {
+      hookBuffer.push([DevtoolsHooks.ADD_ROUTE, {
+        args: [...args],
+      }])
+    }
+
+    return res
+  }
+
+  const _removeRoute = router.removeRoute
+  router.removeRoute = (...args) => {
+    const res = _removeRoute(...args)
+
+    if (!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded) {
+      hookBuffer.push([DevtoolsHooks.REMOVE_ROUTE, {
+        args: [...args],
+      }])
+    }
+
+    return res
+  }
+}
+
 function collectHookBuffer() {
   let sortId = 0
-  const DevtoolsHooks = {
-    APP_INIT: 'app:init',
-    COMPONENT_UPDATED: 'component:updated',
-    COMPONENT_ADDED: 'component:added',
-    COMPONENT_REMOVED: 'component:removed',
-    COMPONENT_EMIT: 'component:emit',
-    PERF_START: 'perf:start',
-    PERF_END: 'perf:end',
-  }
 
   function stopCollect(component) {
     return component?.root?.type?.devtools?.hide || iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded
@@ -260,6 +295,7 @@ function collectHookBuffer() {
     if (!app || app._instance.type?.devtools?.hide)
       return
 
+    captureDynamicRoute(app)
     hookBuffer.push([DevtoolsHooks.APP_INIT, {
       app,
     }])
@@ -295,9 +331,9 @@ function collectHookBuffer() {
       time,
       sortId: sortId++,
     }])
-  })
+  });
 
-  ;[
+  [
     DevtoolsHooks.COMPONENT_UPDATED,
     DevtoolsHooks.COMPONENT_ADDED,
     DevtoolsHooks.COMPONENT_REMOVED,
@@ -326,29 +362,35 @@ initPanelPosition()
 
 <template>
   <div class="vue-devtools-panel" :style="panelPosition">
-    <iframe
-      ref="iframe"
-      :src="clientUrl"
-      :style="{
-        'pointer-events': isDragging ? 'none' : 'auto',
-      }"
-      @load="onLoad"
-    />
+    <iframe ref="iframe" :src="clientUrl" :style="{
+      'pointer-events': isDragging ? 'none' : 'auto',
+    }" @load="onLoad" />
     <template v-if="panelState.viewMode === 'default'">
-      <div v-if="panelState.position !== 'top'" class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal" :style="{ top: 0 }" @mousedown.prevent="() => isDragging = 'horizontal'" />
-      <div v-if="panelState.position !== 'bottom'" class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal" :style="{ bottom: 0 }" @mousedown.prevent="() => isDragging = 'horizontal'" />
-      <div v-if="panelState.position !== 'left'" class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical" :style="{ left: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
-      <div v-if="panelState.position !== 'right'" class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical" :style="{ right: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
-      <div v-if="panelState.position !== 'top' && panelState.position !== 'left'" class="vue-devtools-resize-handle vue-devtools-resize-handle-corner" :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
-      <div v-if="panelState.position !== 'top' && panelState.position !== 'right'" class="vue-devtools-resize-handle vue-devtools-resize-handle-corner" :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
-      <div v-if="panelState.position !== 'bottom' && panelState.position !== 'right'" class="vue-devtools-resize-handle vue-devtools-resize-handle-corner" :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
-      <div v-if="panelState.position !== 'bottom' && panelState.position !== 'left'" class="vue-devtools-resize-handle vue-devtools-resize-handle-corner" :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="panelState.position !== 'top'" class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal"
+        :style="{ top: 0 }" @mousedown.prevent="() => isDragging = 'horizontal'" />
+      <div v-if="panelState.position !== 'bottom'"
+        class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal" :style="{ bottom: 0 }"
+        @mousedown.prevent="() => isDragging = 'horizontal'" />
+      <div v-if="panelState.position !== 'left'" class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
+        :style="{ left: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
+      <div v-if="panelState.position !== 'right'" class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
+        :style="{ right: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
+      <div v-if="panelState.position !== 'top' && panelState.position !== 'left'"
+        class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
+        :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="panelState.position !== 'top' && panelState.position !== 'right'"
+        class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
+        :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="panelState.position !== 'bottom' && panelState.position !== 'right'"
+        class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
+        :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <div v-if="panelState.position !== 'bottom' && panelState.position !== 'left'"
+        class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
+        :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
     </template>
   </div>
-  <button
-    class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
-    @click.prevent="togglePanel"
-  >
+  <button class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
+    @click.prevent="togglePanel">
     <svg viewBox="0 0 256 198" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z" />
       <path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z" />
@@ -400,7 +442,7 @@ initPanelPosition()
 }
 
 .vue-devtools-resize-handle:hover {
-  background: rgba(125,125,125,0.1);
+  background: rgba(125, 125, 125, 0.1);
 }
 
 .vue-devtools-resize-handle-horizontal {
@@ -421,7 +463,7 @@ initPanelPosition()
   border-radius: 6px;
 }
 
-.vue-devtools-resize-handle-vertical{
+.vue-devtools-resize-handle-vertical {
   position: absolute;
   top: 6px;
   bottom: 0;