vite-plugin-vue-devtools 0.0.1-alpha.9 → 0.0.1

package/README.md

@@ -1,7 +1,22 @@
-<h1>
+<p align="center">
+  <img src="./assets/bg.png" />
+</p>
+<h1 align="center">
 Vue DevTools <sup>Preview</sup>
 </h1>
 
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/v/vite-plugin-vue-devtools" alt="NPM Version" /></a>
+  <!-- <a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/dt/vite-plugin-vue-devtools" alt="NPM Downloads" /></a> -->
+  <a href="https://github.com/webfansplz/vite-plugin-vue-devtools/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/webfansplz/vite-plugin-vue-devtools" alt="License" /></a>
+</p>
+
+<p align="center">
+<a href="https://stackblitz.com/edit/vitejs-vite-oxbwzk?embed=1&file=vite.config.ts&view=preview"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+</p>
+
+
 ## 📖 Introduction
 
 `vite-plugin-vue-devtools` is a Vite plugin designed to enhance the Vue developer experience.
@@ -11,6 +26,62 @@ Vue DevTools <sup>Preview</sup>
   <a href="https://github.com/webfansplz/vite-plugin-vue-devtools/discussions/2">🗺️ Project Roadmap</a> |
 </p> -->
 
+## 🎉 Features
+
+### Pages
+
+The pages tab shows your current routes and provide a quick way to navigate to them. For dynamic routes, it also provide a form to fill with each params interactively. You can also use the textbox to play and test how each route is matched.
+
+<img src="./assets/pages.png" />
+
+
+### Components
+
+Components tab show all the components you are using in your app and hierarchy. You can also select them to see the details of the component (e.g. data,props).
+
+<img src="./assets/components.png" />
+
+### Assets
+
+Assets tab that shows all your static assets (vite config.publicDir only now) and their information. You can open the asset in the browser or download it.
+
+<img src="./assets/assets.png" />
+
+### Timeline
+
+Timeline tab has three categories: Performance, Router Navigations, and Pinia. You can switch between them to see the state changes and timelines.
+
+<img src="./assets/timeline.png" />
+
+### Routes
+
+Routes tab is a feature integrated with [Vue Router](https://github.com/vuejs/router), allowing you to view the registered routes and their details.
+
+<img src="./assets/routes.png" />
+
+### Pinia
+
+Pinia tab is a feature integrated with [Pinia](https://github.com/vuejs/pinia), allowing you to view the registered modules and their details.
+
+<img src="./assets/pinia.png" />
+
+### Graph
+
+Graph tab provides a graph view that show the relationship between components. 
+
+<img src="./assets/graph.png" />
+
+### Inspect
+
+Inspect expose the [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) integration, allowing you to inspect transformation steps of Vite. It can be helpful to understand how each plugin is transforming your code and spot potential issues.
+
+<img src="./assets/inspect.png" />
+
+### Inspector
+
+You can also use the "Inspector" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly. (This feature is implemented based on the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector))
+
+<img src="./assets/inspector.png" height=450 />
 
 ## 📦 Installation
 
@@ -42,11 +113,23 @@ export default defineConfig({
 
 - Only available in development mode.
 - Only support Vue3.0+.
+- Currently only supports single-instance Vue applications (multi-instance support is coming soon).
 - Doesn't support SSR (If you're using Nuxt, use [nuxt/devtools](https://github.com/nuxt/devtools) directly).
+- The plugin follows Vue's devtools configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g.
+
+  ```js
+  // This Vue instance will be ignored by the plugin.
+  createApp({
+    render: () => h(App),
+    devtools: {
+      hide: true,
+    },
+  })
+  ```
 
 ## 🌸 Credits
 
-- This project is highly inspired by [nuxt/devtools](https://github.com/nuxt/devtools).
+- This project is highly inspired by [nuxt/devtools](https://github.com/nuxt/devtools). Kudos to Anthony Fu for the awesome work!
 
 ## 📄 License
 

package/dist/client/assets/{VCard-2c64c235.js → VCard-1d26a3c3.js}

@@ -1,4 +1,4 @@
-import { ax as _export_sfc, o as openBlock, c as createElementBlock, v as renderSlot } from './index-ecdbdbf3.js';
+import { aE as _export_sfc, o as openBlock, e as createElementBlock, f as renderSlot } from './index-d9de2c94.js';
 
 /* unplugin-vue-components disabled */const _sfc_main = {};
 

package/dist/client/assets/{VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js → VIcon.vue_vue_type_script_setup_true_lang-06188541.js}

@@ -1,4 +1,4 @@
-import { d as defineComponent, o as openBlock, c as createElementBlock, n as normalizeClass } from './index-ecdbdbf3.js';
+import { v as defineComponent, o as openBlock, e as createElementBlock, q as normalizeClass } from './index-d9de2c94.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "VIcon",

package/dist/client/assets/{VIconTitle.vue_vue_type_script_setup_true_lang-7396a93b.js → VIconTitle.vue_vue_type_script_setup_true_lang-a7b04584.js}

@@ -1,4 +1,4 @@
-import { d as defineComponent, o as openBlock, c as createElementBlock, n as normalizeClass, m as createCommentVNode, v as renderSlot, e as createBaseVNode, t as toDisplayString } from './index-ecdbdbf3.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-d9de2c94.js';
 
 const _hoisted_1 = {
   flex: "~ gap-3",

package/dist/client/assets/{VPanelGrids-258e71bf.js → VPanelGrids-0d71921d.js}

@@ -1,4 +1,4 @@
-import { ax as _export_sfc, o as openBlock, c as createElementBlock, v as renderSlot } from './index-ecdbdbf3.js';
+import { aE as _export_sfc, o as openBlock, e as createElementBlock, f as renderSlot } from './index-d9de2c94.js';
 
 /* unplugin-vue-components disabled */const _sfc_main = {};
 

package/dist/client/assets/{VTextInput.vue_vue_type_script_setup_true_lang-bf165828.js → VTextInput.vue_vue_type_script_setup_true_lang-38328457.js}

@@ -1,6 +1,6 @@
-import { _ as _sfc_main$2 } from './VIconTitle.vue_vue_type_script_setup_true_lang-7396a93b.js';
-import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js';
-import { d as defineComponent, s as useVModel, o as openBlock, c as createElementBlock, e as createBaseVNode, n as normalizeClass, b as createVNode, w as withCtx, v as renderSlot, m as createCommentVNode, a as createBlock, u as unref, x as withDirectives, F as Fragment, ay as resolveDirective, E as createTextVNode, t as toDisplayString, az as pushScopeId, aA as popScopeId, ax as _export_sfc, aB as vModelDynamic, ao as mergeProps, z as isRef } from './index-ecdbdbf3.js';
+import { _ as _sfc_main$2 } from './VIconTitle.vue_vue_type_script_setup_true_lang-a7b04584.js';
+import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-06188541.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, R as createTextVNode, y as toDisplayString, p as pushScopeId, a as popScopeId, aE as _export_sfc, aF as vModelDynamic, k as mergeProps, M as isRef } from './index-d9de2c94.js';
 
 const _withScopeId = (n) => (pushScopeId("data-v-cf2e46eb"), n = n(), popScopeId(), n);
 const _hoisted_1$1 = ["open"];

package/dist/client/assets/{__inspecting-ac0f47cd.js → __inspecting-b04290ae.js}

@@ -1,5 +1,5 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-258e71bf.js';
-import { d as defineComponent, aD as useEventListener, o as openBlock, a as createBlock, w as withCtx, e as createBaseVNode, aE as useDevtoolsClient } from './index-ecdbdbf3.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-0d71921d.js';
+import { v as defineComponent, aH as useEventListener, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, aI as useDevtoolsClient } from './index-d9de2c94.js';
 
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("div", null, " Inspecting Vue components ", -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/client/assets/{assets-16670a42.js → assets-e0c8ff78.js}

@@ -1,11 +1,11 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-258e71bf.js';
-import { _ as __unplugin_components_7 } from './VCard-2c64c235.js';
-import { _ as _sfc_main$a } from './VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js';
-import { d as defineComponent, o as openBlock, a as createBlock, w as withCtx, b as createVNode, ao as mergeProps, ap as resolveDynamicComponent, Q as ref, aq as useElementSize, ar as onClickOutside, c as createElementBlock, e as createBaseVNode, v as renderSlot, u as unref, m as createCommentVNode, as as Transition, R as computed, t as toDisplayString, n as normalizeClass, at as useStyleTag, O as normalizeStyle, au as computedAsync, av as useTimeAgo, F as Fragment, E as createTextVNode, _ as _sfc_main$b, aw as onKeyDown, z as isRef, r as renderList } from './index-ecdbdbf3.js';
-import { r as rpc } from './rpc-ff946cbe.js';
-import { _ as _sfc_main$c, a as __unplugin_components_3 } from './VTextInput.vue_vue_type_script_setup_true_lang-bf165828.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-0d71921d.js';
+import { _ as __unplugin_components_7 } from './VCard-1d26a3c3.js';
+import { _ as _sfc_main$a } from './VIcon.vue_vue_type_script_setup_true_lang-06188541.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, ax as useElementSize, ay as onClickOutside, e as createElementBlock, x as createBaseVNode, f as renderSlot, z as unref, g as createCommentVNode, az as Transition, a1 as computed, y as toDisplayString, q as normalizeClass, aA as useStyleTag, l as normalizeStyle, aB as computedAsync, aC as useTimeAgo, F as Fragment, R as createTextVNode, _ as _sfc_main$b, aD as onKeyDown, M as isRef, i as renderList } from './index-d9de2c94.js';
+import { r as rpc } from './rpc-80e3af11.js';
+import { _ as _sfc_main$c, a as __unplugin_components_3 } from './VTextInput.vue_vue_type_script_setup_true_lang-38328457.js';
 import { F as Fuse } from './fuse.esm-c317b696.js';
-import './VIconTitle.vue_vue_type_script_setup_true_lang-7396a93b.js';
+import './VIconTitle.vue_vue_type_script_setup_true_lang-a7b04584.js';
 
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VIconButton",

package/dist/client/assets/{components-d61f66d3.js → components-9660e7aa.js}

@@ -1,6 +1,8 @@
-import { a as _sfc_main$2, g, M, _ as _sfc_main$3 } from './splitpanes.es-aae37be3.js';
-import { ab as getInstanceName, ac as classify, ad as kebabize, ae as isFragment, af as camelize, ag as returnError, ah as isBeingDestroyed, ai as getUniqueComponentId, aj as getRenderKey, Q as ref, ak as shallowRef, R as computed, d as defineComponent, X as resolveComponent, o as openBlock, c as createElementBlock, e as createBaseVNode, u as unref, a as createBlock, n as normalizeClass, t as toDisplayString, O as normalizeStyle, F as Fragment, r as renderList, m as createCommentVNode, f as onMounted, al as onVueInstanceUpdate, b as createVNode, w as withCtx, a3 as reactive, am as instance } from './index-ecdbdbf3.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-0d71921d.js';
+import { _ as __unplugin_components_7 } from './VCard-1d26a3c3.js';
+import { a as _sfc_main$2, g, M, _ as _sfc_main$3 } from './splitpanes.es-8cd9ad22.js';
+import { ak as getInstanceName, al as classify, am as kebabize, an as isFragment, ao as camelize, ap as returnError, aq as isBeingDestroyed, ar as getUniqueComponentId, as as getRenderKey, a0 as ref, at 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, F as Fragment, i as renderList, g as createCommentVNode, A as onMounted, au as onVueInstanceUpdate, u as createVNode, h as withCtx, ad as reactive, av as instance } from './index-d9de2c94.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-06188541.js';
 
 class ComponentFilter {
   filter;
@@ -603,12 +605,18 @@ const _hoisted_2 = {
   class: "no-scrollbar"
 };
 const _hoisted_3 = {
+  key: 0,
   "h-screen": "",
   "select-none": "",
   "overflow-scroll": "",
   "p-2": "",
   class: "no-scrollbar"
 };
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("h1", {
+  "text-sm": "",
+  italic: "",
+  op50: ""
+}, " No Data ", -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "components",
   setup(__props) {
@@ -652,14 +660,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     onMounted(() => {
-      onVueInstanceUpdate(() => {
-        init();
-        selected.value = "vue-devtools:root";
+      onVueInstanceUpdate((v) => {
+        if (v) {
+          init();
+          selected.value = "vue-devtools:root";
+        }
       });
     });
     return (_ctx, _cache) => {
       const _component_ComponentTreeNode = _sfc_main$1;
       const _component_StateFields = _sfc_main$3;
+      const _component_VCard = __unplugin_components_7;
+      const _component_VPanelGrids = __unplugin_components_0;
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(unref(M), null, {
           default: withCtx(() => [
@@ -678,7 +690,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }),
             createVNode(unref(g), null, {
               default: withCtx(() => [
-                createBaseVNode("div", _hoisted_3, [
+                unref(normalizedComponentState).length ? (openBlock(), createElementBlock("div", _hoisted_3, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedComponentState), (item, index) => {
                     return openBlock(), createBlock(_component_StateFields, {
                       id: index,
@@ -686,7 +698,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       data: item
                     }, null, 8, ["id", "data"]);
                   }), 128))
-                ])
+                ])) : (openBlock(), createBlock(_component_VPanelGrids, {
+                  key: 1,
+                  px5: ""
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_VCard, {
+                      flex: "~ col gap2",
+                      "min-w-30": "",
+                      "items-center": "",
+                      p3: ""
+                    }, {
+                      default: withCtx(() => [
+                        _hoisted_4
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }))
               ]),
               _: 1
             })

package/dist/client/assets/{graph-06e5c153.js → graph-b29c71b4.js}

@@ -1,6 +1,6 @@
-import { Q as ref, a7 as useStorage, R as computed, d as defineComponent, o as openBlock, c as createElementBlock, x as withDirectives, a8 as vModelText, u as unref, e as createBaseVNode, z as isRef, A as vModelCheckbox, a9 as useDark, f as onMounted, aa as watch, b as createVNode } from './index-ecdbdbf3.js';
+import { a0 as ref, ag as useStorage, a1 as computed, v as defineComponent, o as openBlock, e as createElementBlock, d as withDirectives, ah as vModelText, z as unref, x as createBaseVNode, M as isRef, N as vModelCheckbox, ai as useDark, A as onMounted, aj as watch, u as createVNode } from './index-d9de2c94.js';
 import { F as Fuse } from './fuse.esm-c317b696.js';
-import { r as rpc } from './rpc-ff946cbe.js';
+import { r as rpc } from './rpc-80e3af11.js';
 
 const list = ref(await rpc.componentGraph());
 const searchText = useStorage("vite-inspect-search-text", "");
@@ -13203,6 +13203,7 @@ function isDataViewLike(idProp, v) {
  * vis.js may be distributed under either license.
  */
 
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {

package/dist/client/assets/{index-ecdbdbf3.js → index-d9de2c94.js}

@@ -1654,6 +1654,8 @@ function flushJobs(seen) {
         }
     }
 }
+new Set();
+new Map();
 
 function emit(instance, event, ...rawArgs) {
     if (instance.isUnmounted)
@@ -2957,6 +2959,20 @@ function ensureValidVNode(vnodes) {
         : null;
 }
 
+/**
+ * For prefixing keys in v-on="obj" with "on"
+ * @private
+ */
+function toHandlers(obj, preserveCaseIfNecessary) {
+    const ret = {};
+    for (const key in obj) {
+        ret[preserveCaseIfNecessary && /[A-Z]/.test(key)
+            ? `on:${key}`
+            : toHandlerKey(key)] = obj[key];
+    }
+    return ret;
+}
+
 /**
  * #2437 In Vue 3, functional components do not have a public instance proxy but
  * they exist in the internal parent chain. For code that relies on traversing
@@ -6658,6 +6674,9 @@ function forceReflow() {
     return document.body.offsetHeight;
 }
 
+new WeakMap();
+new WeakMap();
+
 const getModelAssigner = (vnode) => {
     const fn = vnode.props['onUpdate:modelValue'] ||
         (false );
@@ -14102,17 +14121,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 
 /* Injected with object hook! */
 
-const __pages_import_0__ = () => __vitePreload(() => import('./timeline-32808aaa.js'),true?["./timeline-32808aaa.js","./splitpanes.es-aae37be3.js","./VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js","./VPanelGrids-258e71bf.js","./VCard-2c64c235.js"]:void 0,import.meta.url);
-const __pages_import_1__ = () => __vitePreload(() => import('./settings-0b0be9f6.js'),true?["./settings-0b0be9f6.js","./VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js","./VIconTitle.vue_vue_type_script_setup_true_lang-7396a93b.js"]:void 0,import.meta.url);
-const __pages_import_2__ = () => __vitePreload(() => import('./routes-2f7ef553.js'),true?["./routes-2f7ef553.js","./VPanelGrids-258e71bf.js","./VCard-2c64c235.js","./splitpanes.es-aae37be3.js","./VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js"]:void 0,import.meta.url);
-const __pages_import_3__ = () => __vitePreload(() => import('./pinia-704b2690.js'),true?["./pinia-704b2690.js","./splitpanes.es-aae37be3.js","./VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js"]:void 0,import.meta.url);
-const __pages_import_4__ = () => __vitePreload(() => import('./pages-8bbcb7f6.js'),true?["./pages-8bbcb7f6.js","./VTextInput.vue_vue_type_script_setup_true_lang-bf165828.js","./VIconTitle.vue_vue_type_script_setup_true_lang-7396a93b.js","./VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js","./VTextInput-52804693.css"]:void 0,import.meta.url);
-const __pages_import_5__ = () => __vitePreload(() => import('./overview-8074b6b6.js'),true?["./overview-8074b6b6.js","./VPanelGrids-258e71bf.js","./rpc-ff946cbe.js"]:void 0,import.meta.url);
-const __pages_import_6__ = () => __vitePreload(() => import('./inspect-debc5551.js'),true?["./inspect-debc5551.js","./rpc-ff946cbe.js"]:void 0,import.meta.url);
-const __pages_import_8__ = () => __vitePreload(() => import('./graph-06e5c153.js'),true?["./graph-06e5c153.js","./fuse.esm-c317b696.js","./rpc-ff946cbe.js"]:void 0,import.meta.url);
-const __pages_import_9__ = () => __vitePreload(() => import('./components-d61f66d3.js'),true?["./components-d61f66d3.js","./splitpanes.es-aae37be3.js","./VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js"]:void 0,import.meta.url);
-const __pages_import_10__ = () => __vitePreload(() => import('./assets-16670a42.js'),true?["./assets-16670a42.js","./VPanelGrids-258e71bf.js","./VCard-2c64c235.js","./VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js","./rpc-ff946cbe.js","./VTextInput.vue_vue_type_script_setup_true_lang-bf165828.js","./VIconTitle.vue_vue_type_script_setup_true_lang-7396a93b.js","./VTextInput-52804693.css","./fuse.esm-c317b696.js"]:void 0,import.meta.url);
-const __pages_import_11__ = () => __vitePreload(() => import('./__inspecting-ac0f47cd.js'),true?["./__inspecting-ac0f47cd.js","./VPanelGrids-258e71bf.js"]:void 0,import.meta.url);
+const __pages_import_0__ = () => __vitePreload(() => import('./timeline-79d66fc7.js'),true?["./timeline-79d66fc7.js","./splitpanes.es-8cd9ad22.js","./VIcon.vue_vue_type_script_setup_true_lang-06188541.js","./VPanelGrids-0d71921d.js","./VCard-1d26a3c3.js","./timeline-b315b2e0.css"]:void 0,import.meta.url);
+const __pages_import_1__ = () => __vitePreload(() => import('./settings-0c6220b2.js'),true?["./settings-0c6220b2.js","./VIcon.vue_vue_type_script_setup_true_lang-06188541.js","./VIconTitle.vue_vue_type_script_setup_true_lang-a7b04584.js"]:void 0,import.meta.url);
+const __pages_import_2__ = () => __vitePreload(() => import('./routes-f600cbfa.js'),true?["./routes-f600cbfa.js","./VPanelGrids-0d71921d.js","./VCard-1d26a3c3.js","./splitpanes.es-8cd9ad22.js","./VIcon.vue_vue_type_script_setup_true_lang-06188541.js"]:void 0,import.meta.url);
+const __pages_import_3__ = () => __vitePreload(() => import('./pinia-8b81a9d8.js'),true?["./pinia-8b81a9d8.js","./splitpanes.es-8cd9ad22.js","./VIcon.vue_vue_type_script_setup_true_lang-06188541.js"]:void 0,import.meta.url);
+const __pages_import_4__ = () => __vitePreload(() => import('./pages-ec3d53ab.js'),true?["./pages-ec3d53ab.js","./VTextInput.vue_vue_type_script_setup_true_lang-38328457.js","./VIconTitle.vue_vue_type_script_setup_true_lang-a7b04584.js","./VIcon.vue_vue_type_script_setup_true_lang-06188541.js","./VTextInput-52804693.css"]:void 0,import.meta.url);
+const __pages_import_5__ = () => __vitePreload(() => import('./overview-c580d40f.js'),true?["./overview-c580d40f.js","./VPanelGrids-0d71921d.js","./rpc-80e3af11.js"]:void 0,import.meta.url);
+const __pages_import_6__ = () => __vitePreload(() => import('./inspect-56184e71.js'),true?["./inspect-56184e71.js","./rpc-80e3af11.js"]:void 0,import.meta.url);
+const __pages_import_8__ = () => __vitePreload(() => import('./graph-b29c71b4.js'),true?["./graph-b29c71b4.js","./fuse.esm-c317b696.js","./rpc-80e3af11.js"]:void 0,import.meta.url);
+const __pages_import_9__ = () => __vitePreload(() => import('./components-9660e7aa.js'),true?["./components-9660e7aa.js","./VPanelGrids-0d71921d.js","./VCard-1d26a3c3.js","./splitpanes.es-8cd9ad22.js","./VIcon.vue_vue_type_script_setup_true_lang-06188541.js"]:void 0,import.meta.url);
+const __pages_import_10__ = () => __vitePreload(() => import('./assets-e0c8ff78.js'),true?["./assets-e0c8ff78.js","./VPanelGrids-0d71921d.js","./VCard-1d26a3c3.js","./VIcon.vue_vue_type_script_setup_true_lang-06188541.js","./rpc-80e3af11.js","./VTextInput.vue_vue_type_script_setup_true_lang-38328457.js","./VIconTitle.vue_vue_type_script_setup_true_lang-a7b04584.js","./VTextInput-52804693.css","./fuse.esm-c317b696.js"]:void 0,import.meta.url);
+const __pages_import_11__ = () => __vitePreload(() => import('./__inspecting-b04290ae.js'),true?["./__inspecting-b04290ae.js","./VPanelGrids-0d71921d.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$6,"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! */
@@ -14632,6 +14651,23 @@ var MutationType;
 
 /* Injected with object hook! */
 
+let nanoid = (size = 21) =>
+  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
+    byte &= 63;
+    if (byte < 36) {
+      id += byte.toString(36);
+    } else if (byte < 62) {
+      id += (byte - 26).toString(36).toUpperCase();
+    } else if (byte > 62) {
+      id += '-';
+    } else {
+      id += '_';
+    }
+    return id
+  }, '');
+
+/* Injected with object hook! */
+
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;
 }
@@ -14726,7 +14762,7 @@ const timelineLayer = ref([]);
 const timelineEvent = ref([]);
 const activeLayerId = ref("performance");
 const activeTimelineEvents = computed(() => {
-  return timelineEvent.value.filter((item) => item.layerId === activeLayerId.value);
+  return timelineEvent.value.map((item) => ({ ...item, id: nanoid() })).filter((item) => item.layerId === activeLayerId.value);
 });
 const activeTimelineEventIndex = ref(0);
 function toggleTimelineLayer(id) {
@@ -15397,4 +15433,4 @@ app.mount("#app");
 
 /* Injected with object hook! */
 
-export { routes as $, vModelCheckbox as A, withKeys as B, useTabs as C, useCategorizedTabs as D, createTextVNode as E, Fragment as F, useDevToolsSettings as G, _sfc_main$3 as H, _sfc_main$5 as I, router$1 as J, routeRecordMatcherState as K, activeRouteRecordMatcherState as L, activeRouteRecordIndex as M, toggleRouteRecordMatcher as N, normalizeStyle as O, __unplugin_components_1 as P, ref as Q, computed as R, piniaStoresId as S, reactivePick as T, toRaw as U, piniaState as V, piniaGetters as W, resolveComponent as X, withModifiers as Y, currentRoute as Z, _sfc_main$9 as _, createBlock as a, vueVersion as a0, __unplugin_components_0 as a1, useColorMode as a2, reactive as a3, useElementBounding as a4, nextTick as a5, watchEffect as a6, useStorage as a7, vModelText as a8, useDark as a9, popScopeId as aA, vModelDynamic as aB, __vitePreload as aC, useEventListener as aD, useDevtoolsClient as aE, watch as aa, getInstanceName as ab, classify as ac, kebabize as ad, isFragment as ae, camelize as af, returnError as ag, isBeingDestroyed as ah, getUniqueComponentId as ai, getRenderKey as aj, shallowRef as ak, onVueInstanceUpdate as al, instance as am, h as an, mergeProps as ao, resolveDynamicComponent as ap, useElementSize as aq, onClickOutside as ar, Transition as as, useStyleTag as at, computedAsync as au, useTimeAgo as av, onKeyDown as aw, _export_sfc as ax, resolveDirective as ay, pushScopeId as az, createVNode as b, createElementBlock as c, defineComponent as d, createBaseVNode as e, onMounted as f, onUnmounted as g, timelineLayer as h, activeTimelineEvents as i, activeTimelineEventIndex as j, toggleTimelineEventIndex as k, timelineEventDetails as l, createCommentVNode as m, normalizeClass as n, openBlock as o, activeLayerId as p, toggleTimelineLayer as q, renderList as r, useVModel as s, toDisplayString as t, unref as u, renderSlot as v, withCtx as w, withDirectives as x, vModelSelect as y, isRef as z };
+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, useTabs as P, useCategorizedTabs as Q, createTextVNode as R, useDevToolsSettings as S, _sfc_main$3 as T, _sfc_main$5 as U, router$1 as V, routeRecordMatcherState as W, activeRouteRecordMatcherState as X, activeRouteRecordIndex as Y, toggleRouteRecordMatcher as Z, _sfc_main$9 as _, popScopeId as a, ref as a0, computed as a1, piniaStoresId as a2, reactivePick as a3, toRaw as a4, piniaState as a5, piniaGetters as a6, withModifiers as a7, currentRoute as a8, routes as a9, useStyleTag as aA, computedAsync as aB, useTimeAgo as aC, onKeyDown as aD, _export_sfc as aE, vModelDynamic as aF, __vitePreload as aG, useEventListener as aH, useDevtoolsClient as aI, vueVersion as aa, __unplugin_components_0 as ab, useColorMode as ac, reactive as ad, useElementBounding as ae, watchEffect as af, useStorage as ag, vModelText as ah, useDark as ai, watch as aj, getInstanceName as ak, classify as al, kebabize as am, isFragment as an, camelize as ao, returnError as ap, isBeingDestroyed as aq, getUniqueComponentId as ar, getRenderKey as as, shallowRef as at, onVueInstanceUpdate as au, instance as av, h as aw, useElementSize as ax, onClickOutside as ay, Transition 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/{inspect-debc5551.js → inspect-56184e71.js}

@@ -1,5 +1,5 @@
-import { d as defineComponent, a2 as useColorMode, Q as ref, R as computed, a3 as reactive, a4 as useElementBounding, f as onMounted, a5 as nextTick, a6 as watchEffect, g as onUnmounted, o as openBlock, c as createElementBlock, b as createVNode, u as unref } from './index-ecdbdbf3.js';
-import { i as inspectClientUrl } from './rpc-ff946cbe.js';
+import { v as defineComponent, ac as useColorMode, a0 as ref, a1 as computed, ad as reactive, ae as useElementBounding, A as onMounted, n as nextTick, af as watchEffect, B as onUnmounted, o as openBlock, e as createElementBlock, u as createVNode, z as unref } from './index-d9de2c94.js';
+import { i as inspectClientUrl } from './rpc-80e3af11.js';
 
 const iframeCacheMap = /* @__PURE__ */ new Map();
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({

package/dist/client/assets/{overview-8074b6b6.js → overview-c580d40f.js}

@@ -1,8 +1,8 @@
-import { _ as __unplugin_components_0$1 } from './VPanelGrids-258e71bf.js';
-import { Q as ref, R as computed, $ as routes, d as defineComponent, o as openBlock, a as createBlock, w as withCtx, e as createBaseVNode, b as createVNode, t as toDisplayString, u as unref, a0 as vueVersion, E as createTextVNode, c as createElementBlock, F as Fragment, a1 as __unplugin_components_0, P as __unplugin_components_1, X as resolveComponent, _ as _sfc_main$1 } from './index-ecdbdbf3.js';
-import { r as rpc } from './rpc-ff946cbe.js';
+import { _ as __unplugin_components_0$1 } from './VPanelGrids-0d71921d.js';
+import { a0 as ref, a1 as computed, a9 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, aa as vueVersion, R as createTextVNode, e as createElementBlock, F as Fragment, ab as __unplugin_components_0, $ as __unplugin_components_1, r as resolveComponent, _ as _sfc_main$1 } from './index-d9de2c94.js';
+import { r as rpc } from './rpc-80e3af11.js';
 
-const version = "0.0.1-alpha.9";
+const version = "0.0.1";
 
 /* Injected with object hook! */
 

package/dist/client/assets/{pages-8bbcb7f6.js → pages-ec3d53ab.js}

@@ -1,7 +1,7 @@
-import { _ as _sfc_main$3, a as __unplugin_components_3 } from './VTextInput.vue_vue_type_script_setup_true_lang-bf165828.js';
-import { d as defineComponent, Q as ref, R as computed, X as resolveComponent, u as unref, o as openBlock, c as createElementBlock, e as createBaseVNode, t as toDisplayString, a as createBlock, w as withCtx, Y as withModifiers, F as Fragment, r as renderList, m as createCommentVNode, b as createVNode, E as createTextVNode, n as normalizeClass, _ as _sfc_main$4, P as __unplugin_components_1, f as onMounted, Z as currentRoute, J as router, z as isRef, B as withKeys, $ as routes } from './index-ecdbdbf3.js';
-import './VIconTitle.vue_vue_type_script_setup_true_lang-7396a93b.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js';
+import { _ as _sfc_main$3, a as __unplugin_components_3 } from './VTextInput.vue_vue_type_script_setup_true_lang-38328457.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, a7 as withModifiers, F as Fragment, i as renderList, g as createCommentVNode, u as createVNode, R as createTextVNode, q as normalizeClass, _ as _sfc_main$4, $ as __unplugin_components_1, A as onMounted, a8 as currentRoute, V as router, M as isRef, O as withKeys, a9 as routes } from './index-d9de2c94.js';
+import './VIconTitle.vue_vue_type_script_setup_true_lang-a7b04584.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-06188541.js';
 
 const _hoisted_1$2 = {
   block: "",

package/dist/client/assets/{pinia-704b2690.js → pinia-8b81a9d8.js}

@@ -1,6 +1,6 @@
-import { g, M, _ as _sfc_main$1 } from './splitpanes.es-aae37be3.js';
-import { d as defineComponent, Q as ref, R as computed, S as piniaStoresId, T as reactivePick, U as toRaw, V as piniaState, W as piniaGetters, u as unref, o as openBlock, c as createElementBlock, b as createVNode, w as withCtx, e as createBaseVNode, F as Fragment, r as renderList, n as normalizeClass, t as toDisplayString, a as createBlock } from './index-ecdbdbf3.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js';
+import { g, M, _ as _sfc_main$1 } from './splitpanes.es-8cd9ad22.js';
+import { v as defineComponent, a0 as ref, a1 as computed, a2 as piniaStoresId, a3 as reactivePick, a4 as toRaw, a5 as piniaState, a6 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-d9de2c94.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-06188541.js';
 
 const _hoisted_1 = {
   "h-screen": "",

package/dist/client/assets/{routes-2f7ef553.js → routes-f600cbfa.js}

@@ -1,8 +1,8 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-258e71bf.js';
-import { _ as __unplugin_components_7 } from './VCard-2c64c235.js';
-import { d as defineComponent, u as unref, J as router, o as openBlock, c as createElementBlock, b as createVNode, w as withCtx, e as createBaseVNode, F as Fragment, r as renderList, K as routeRecordMatcherState, L as activeRouteRecordMatcherState, a as createBlock, I as _sfc_main$2, n as normalizeClass, M as activeRouteRecordIndex, N as toggleRouteRecordMatcher, E as createTextVNode, t as toDisplayString, O as normalizeStyle, m as createCommentVNode, P as __unplugin_components_1 } from './index-ecdbdbf3.js';
-import { g, M, _ as _sfc_main$1 } from './splitpanes.es-aae37be3.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-0d71921d.js';
+import { _ as __unplugin_components_7 } from './VCard-1d26a3c3.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, R as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, $ as __unplugin_components_1 } from './index-d9de2c94.js';
+import { g, M, _ as _sfc_main$1 } from './splitpanes.es-8cd9ad22.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-06188541.js';
 
 const _hoisted_1 = {
   key: 0,

package/dist/client/assets/{rpc-ff946cbe.js → rpc-80e3af11.js}

@@ -1,4 +1,4 @@
-import { aC as __vitePreload } from './index-ecdbdbf3.js';
+import { aG as __vitePreload } from './index-d9de2c94.js';
 
 const DEFAULT_TIMEOUT = 6e4;
 function defaultSerialize(i) {

package/dist/client/assets/{settings-0b0be9f6.js → settings-0c6220b2.js}

@@ -1,6 +1,6 @@
-import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js';
-import { d as defineComponent, s as useVModel, o as openBlock, c as createElementBlock, v as renderSlot, x as withDirectives, y as vModelSelect, u as unref, e as createBaseVNode, t as toDisplayString, m as createCommentVNode, z as isRef, a as createBlock, A as vModelCheckbox, B as withKeys, C as useTabs, D as useCategorizedTabs, b as createVNode, F as Fragment, r as renderList, w as withCtx, E as createTextVNode, G as useDevToolsSettings, _ as _sfc_main$5, H as _sfc_main$6, n as normalizeClass, I as _sfc_main$7 } from './index-ecdbdbf3.js';
-import { _ as _sfc_main$4 } from './VIconTitle.vue_vue_type_script_setup_true_lang-7396a93b.js';
+import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-06188541.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 useTabs, Q as useCategorizedTabs, u as createVNode, F as Fragment, i as renderList, h as withCtx, R as createTextVNode, S as useDevToolsSettings, _ as _sfc_main$5, T as _sfc_main$6, q as normalizeClass, U as _sfc_main$7 } from './index-d9de2c94.js';
+import { _ as _sfc_main$4 } from './VIconTitle.vue_vue_type_script_setup_true_lang-a7b04584.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-aae37be3.js → splitpanes.es-8cd9ad22.js}

@@ -1,5 +1,5 @@
-import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-8f4aa88f.js';
-import { d as defineComponent, o as openBlock, a as createBlock, n as normalizeClass, z as isRef, U as toRaw, R as computed, X as resolveComponent, c as createElementBlock, r as renderList, e as createBaseVNode, t as toDisplayString, m as createCommentVNode, u as unref, F as Fragment, Q as ref, b as createVNode, an as h, v as renderSlot, O as normalizeStyle } from './index-ecdbdbf3.js';
+import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-06188541.js';
+import { v as defineComponent, o as openBlock, c as createBlock, q as normalizeClass, M as isRef, a4 as toRaw, a1 as computed, r as resolveComponent, e as createElementBlock, i as renderList, x as createBaseVNode, y as toDisplayString, g as createCommentVNode, z as unref, F as Fragment, a0 as ref, u as createVNode, aw as h, f as renderSlot, l as normalizeStyle } from './index-d9de2c94.js';
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "VExpandIcon",