vite-plugin-vue-devtools 0.2.1 → 0.3.1

package/dist/client/assets/{inspect-ef16c665.js → inspect-d5e39a6a.js}

@@ -1,6 +1,6 @@
-import { _ as _sfc_main$1 } from './IframeView.vue_vue_type_script_setup_true_lang-3a43e6ae.js';
-import { i as inspectClientUrl } from './rpc-901b9577.js';
-import { v as defineComponent, o as openBlock, e as createElementBlock, u as createVNode, z as unref } from './index-f743edb2.js';
+import { _ as _sfc_main$1 } from './IframeView.vue_vue_type_script_setup_true_lang-fad49b28.js';
+import { i as inspectClientUrl } from './rpc-6610a4d4.js';
+import { v as defineComponent, o as openBlock, e as createElementBlock, u as createVNode, z as unref } from './index-0158f749.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "inspect",

package/dist/client/assets/{npm-8aa51398.js → npm-8ea47586.js}

@@ -1,10 +1,10 @@
-import { v as defineComponent, $ as ref, a6 as onMounted, ab as useEventListener, ac as hookApi, o as openBlock, e as createElementBlock, ad as useScrollLock, ae as watch, af as useInfiniteScroll, r as resolveComponent, b as resolveDirective, x as createBaseVNode, u as createVNode, z as unref, K as isRef, h as withCtx, F as Fragment, i as renderList, c as createBlock, g as createCommentVNode, y as toDisplayString, d as withDirectives, O as createTextVNode, q as normalizeClass, R as _sfc_main$3 } from './index-f743edb2.js';
-import { _ as __unplugin_components_3 } from './VSectionBlock-c9cecc8a.js';
-import { _ as _sfc_main$2 } from './VTextInput.vue_vue_type_script_setup_true_lang-96ef132c.js';
+import { v as defineComponent, a1 as ref, a8 as onMounted, ad as useEventListener, ae as hookApi, o as openBlock, e as createElementBlock, af as useScrollLock, ag as watch, ah as useInfiniteScroll, r as resolveComponent, b as resolveDirective, x as createBaseVNode, u as createVNode, z as unref, K as isRef, h as withCtx, F as Fragment, i as renderList, c as createBlock, g as createCommentVNode, y as toDisplayString, d as withDirectives, P as createTextVNode, q as normalizeClass, T as _sfc_main$3 } from './index-0158f749.js';
+import { _ as __unplugin_components_3 } from './VSectionBlock-de05a5a5.js';
+import { _ as _sfc_main$2 } from './VTextInput.vue_vue_type_script_setup_true_lang-1c3b455d.js';
 import { g as getDefaultExportFromCjs, c as commonjsGlobal } from './_commonjsHelpers-c0d8ada0.js';
-import { r as rpc } from './rpc-901b9577.js';
-import './VIconTitle.vue_vue_type_script_setup_true_lang-276880a3.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-b5034521.js';
+import { r as rpc } from './rpc-6610a4d4.js';
+import './VIconTitle.vue_vue_type_script_setup_true_lang-3891436f.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js';
 
 var xterm$1 = {exports: {}};/* Injected with object hook! */
 

package/dist/client/assets/{overview-d04e0943.js → overview-3bc4fc18.js}

@@ -1,9 +1,9 @@
-import { _ as __unplugin_components_0$1 } from './VPanelGrids-08531872.js';
-import { $ as ref, a0 as computed, a8 as routes, v as defineComponent, r as resolveComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, u as createVNode, y as toDisplayString, z as unref, a9 as vueVersion, O as createTextVNode, e as createElementBlock, F as Fragment, aa as __unplugin_components_0, Z as __unplugin_components_1, R as _sfc_main$1 } from './index-f743edb2.js';
-import { r as rpc } from './rpc-901b9577.js';
-import { i as isMacOS } from './index-4ea8507d.js';
+import { _ as __unplugin_components_0$1 } from './VPanelGrids-5c36b027.js';
+import { a1 as ref, a2 as computed, aa as routes, v as defineComponent, r as resolveComponent, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, u as createVNode, y as toDisplayString, z as unref, ab as vueVersion, P as createTextVNode, e as createElementBlock, F as Fragment, ac as __unplugin_components_0, a0 as __unplugin_components_1, T as _sfc_main$1 } from './index-0158f749.js';
+import { r as rpc } from './rpc-6610a4d4.js';
+import { i as isMacOS } from './index-32549096.js';
 
-const version = "0.2.1";
+const version = "0.3.1";
 
 /* Injected with object hook! */
 

package/dist/client/assets/{pages-c8759169.js → pages-e0bd078d.js}

@@ -1,8 +1,8 @@
-import { _ as __unplugin_components_3 } from './VSectionBlock-c9cecc8a.js';
-import { v as defineComponent, $ as ref, a0 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, a5 as withModifiers, F as Fragment, i as renderList, g as createCommentVNode, u as createVNode, O as createTextVNode, q as normalizeClass, R as _sfc_main$4, Z as __unplugin_components_1, a6 as onMounted, a7 as currentRoute, U as router, K as isRef, M as withKeys, a8 as routes } from './index-f743edb2.js';
-import { _ as _sfc_main$3 } from './VTextInput.vue_vue_type_script_setup_true_lang-96ef132c.js';
-import './VIconTitle.vue_vue_type_script_setup_true_lang-276880a3.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-b5034521.js';
+import { _ as __unplugin_components_3 } from './VSectionBlock-de05a5a5.js';
+import { v as defineComponent, a1 as ref, a2 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, P as createTextVNode, q as normalizeClass, T as _sfc_main$4, a0 as __unplugin_components_1, a8 as onMounted, a9 as currentRoute, W as router, K as isRef, M as withKeys, aa as routes } from './index-0158f749.js';
+import { _ as _sfc_main$3 } from './VTextInput.vue_vue_type_script_setup_true_lang-1c3b455d.js';
+import './VIconTitle.vue_vue_type_script_setup_true_lang-3891436f.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js';
 
 const _hoisted_1$2 = {
   block: "",

package/dist/client/assets/{pinia-a1d3abba.js → pinia-0490bdb1.js}

@@ -1,9 +1,9 @@
-import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-f9c67da8.js';
-import { g, M } from './splitpanes.es-cb929c19.js';
-import { v as defineComponent, $ as ref, a0 as computed, a1 as piniaStoresCategory, a2 as toRaw, a3 as piniaState, a4 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-f743edb2.js';
-import { p as pick } from './index-4ea8507d.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-b5034521.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-66a83f1a.js';
+import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-766dc2da.js';
+import { g, M } from './splitpanes.es-398427c7.js';
+import { v as defineComponent, a1 as ref, a2 as computed, a3 as piniaStoresCategory, 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-0158f749.js';
+import { p as pick } from './index-32549096.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js';
+import './VIconButton.vue_vue_type_script_setup_true_lang-1dfaade2.js';
 
 const _hoisted_1 = {
   "h-screen": "",

package/dist/client/assets/{routes-b6e1361f.js → routes-b5c90320.js}

@@ -1,11 +1,10 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-08531872.js';
-import { _ as __unplugin_components_7 } from './VCard-8f584a44.js';
-import { v as defineComponent, z as unref, U as router, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, V as routeRecordMatcherState, W as activeRouteRecordMatcherState, c as createBlock, T as _sfc_main$2, q as normalizeClass, X as activeRouteRecordIndex, Y as toggleRouteRecordMatcher, O as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, Z as __unplugin_components_1 } from './index-f743edb2.js';
-import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-f9c67da8.js';
-import { g, M } from './splitpanes.es-cb929c19.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-b5034521.js';
-import './index-4ea8507d.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-66a83f1a.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-5c36b027.js';
+import { v as defineComponent, z as unref, W as router, o as openBlock, e as createElementBlock, u as createVNode, h as withCtx, x as createBaseVNode, F as Fragment, i as renderList, X as routeRecordMatcherState, Y as activeRouteRecordMatcherState, c as createBlock, V as _sfc_main$2, _ as __unplugin_components_7, q as normalizeClass, Z as activeRouteRecordIndex, $ as toggleRouteRecordMatcher, P as createTextVNode, y as toDisplayString, l as normalizeStyle, g as createCommentVNode, a0 as __unplugin_components_1 } from './index-0158f749.js';
+import { _ as _sfc_main$1 } from './StateFields.vue_vue_type_script_setup_true_lang-766dc2da.js';
+import { g, M } from './splitpanes.es-398427c7.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js';
+import './index-32549096.js';
+import './VIconButton.vue_vue_type_script_setup_true_lang-1dfaade2.js';
 
 const _hoisted_1 = {
   key: 0,

package/dist/client/assets/{rpc-901b9577.js → rpc-6610a4d4.js}

@@ -1,11 +1,11 @@
-import { aH as __vitePreload, ac as hookApi } from './index-f743edb2.js';
+import { aI as __vitePreload, ae as hookApi } from './index-0158f749.js';
 
 async function getViteClient(base = "/", warning = true) {
   try {
     return await __vitePreload(() => import(
       /* @vite-ignore */
       `${base}@vite/client`
-    ),true?[]:void 0,import.meta.url);
+    ),true?[]:void 0);
   } catch {
     if (warning)
       console.error(`[vite-plugin-hot] Failed to import "${base}@vite/client"`);
@@ -130,7 +130,7 @@ function createRPCClient(name, hot, functions = {}) {
 
 /* Injected with object hook! */
 
-const rpc = createRPCClient("vite-plugin-vue-devtools", await createHotContext("/___", `${location.pathname.split("/__devtools")[0] || ""}/`.replace(/\/\//g, "/")), {
+const rpc = createRPCClient("vite-plugin-vue-devtools", await createHotContext("/___", `${location.pathname.split("/__devtools__")[0] || ""}/`.replace(/\/\//g, "/")), {
   onTerminalData({ data }) {
     hookApi.hook.emit("__vue-devtools:terminal:data__", data);
   },

package/dist/client/assets/{settings-7dc3a0fa.js → settings-68a6aaae.js}

@@ -1,6 +1,6 @@
-import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-b5034521.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, Q as useFrameState, _ as _sfc_main$5, R as _sfc_main$6, S as _sfc_main$7, q as normalizeClass, T as _sfc_main$8 } from './index-f743edb2.js';
-import { _ as _sfc_main$4 } from './VIconTitle.vue_vue_type_script_setup_true_lang-276880a3.js';
+import { _ as _sfc_main$3 } from './VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.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, O as isInPopup, h as withCtx, P as createTextVNode, Q as useDevToolsSettings, R as useFrameState, S as _sfc_main$5, T as _sfc_main$6, U as _sfc_main$7, q as normalizeClass, V as _sfc_main$8 } from './index-0158f749.js';
+import { _ as _sfc_main$4 } from './VIconTitle.vue_vue_type_script_setup_true_lang-3891436f.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"];
@@ -121,6 +121,7 @@ const _hoisted_7 = {
   pr2: ""
 };
 const _hoisted_8 = {
+  key: 0,
   py3: "",
   flex: "~ col gap-1",
   border: "b base"
@@ -196,7 +197,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_VIconTitle = _sfc_main$4;
       const _component_VSwitch = _sfc_main$1;
       const _component_TabIcon = _sfc_main$8;
-      const _component_VPanelPosition = _sfc_main$5;
+      const _component_PanelPosition = _sfc_main$5;
       const _component_VButton = _sfc_main$6;
       const _component_VDarkToggle = _sfc_main$7;
       const _component_VSelect = _sfc_main$2;
@@ -268,12 +269,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), 128))
           ]),
           createBaseVNode("div", null, [
-            createBaseVNode("div", _hoisted_8, [
+            !unref(isInPopup) ? (openBlock(), createElementBlock("div", _hoisted_8, [
               _hoisted_9,
               createBaseVNode("div", null, [
-                createVNode(_component_VPanelPosition)
+                createVNode(_component_PanelPosition)
               ])
-            ]),
+            ])) : createCommentVNode("", true),
             createBaseVNode("div", _hoisted_10, [
               _hoisted_11,
               createBaseVNode("div", null, [

package/dist/client/assets/{splitpanes.es-cb929c19.js → splitpanes.es-398427c7.js}

@@ -1,4 +1,4 @@
-import { av as h, o as openBlock, e as createElementBlock, f as renderSlot, l as normalizeStyle } from './index-f743edb2.js';
+import { ay as h, o as openBlock, e as createElementBlock, f as renderSlot, l as normalizeStyle } from './index-0158f749.js';
 
 const M = {
   name: "splitpanes",

package/dist/client/assets/{timeline-01c3c8d8.js → timeline-f8284402.js}

@@ -1,12 +1,11 @@
-import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-f9c67da8.js';
-import { _ as __unplugin_components_0 } from './VPanelGrids-08531872.js';
-import { _ as __unplugin_components_7 } from './VCard-8f584a44.js';
+import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-766dc2da.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-5c36b027.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, _ as __unplugin_components_7, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-0158f749.js';
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-c0d8ada0.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-f743edb2.js';
-import { g, M } from './splitpanes.es-cb929c19.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-b5034521.js';
-import './index-4ea8507d.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-66a83f1a.js';
+import { g, M } from './splitpanes.es-398427c7.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js';
+import './index-32549096.js';
+import './VIconButton.vue_vue_type_script_setup_true_lang-1dfaade2.js';
 
 var dayjs_min = {exports: {}};/* Injected with object hook! */
 

package/dist/client/index.html

@@ -5,8 +5,8 @@
   <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-f743edb2.js"></script>
-  <link rel="stylesheet" href="./assets/index-76a3c684.css">
+  <script type="module" crossorigin src="/__devtools__/assets/index-0158f749.js"></script>
+  <link rel="stylesheet" href="/__devtools__/assets/index-5b7de771.css">
 </head>
 <body>
   <div id="app"></div>

package/dist/index.cjs

@@ -7526,7 +7526,7 @@ async function getStaticAssets(config) {
   const baseURL = config.base;
   const files = await fg([
     // image
-    "**/*.(a?png|jpe?g|gif|svg|webp|avif|ico|bmp|tiff)",
+    "**/*.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)",
     // video
     "**/*.(mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)",
     // audio
@@ -7534,7 +7534,7 @@ async function getStaticAssets(config) {
     // font
     "**/*.(woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)",
     // text
-    "**/*.(json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown)"
+    "**/*.(json|json5|jsonc|txt|text|tsx|jsx|md|mdx|mdc|markdown)"
   ], {
     cwd: dir,
     onlyFiles: true,
@@ -13715,7 +13715,7 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
   let config;
   function configureServer(server) {
     const base = server.config.base || "/";
-    server.middlewares.use(`${base}__devtools`, sirv__default(DIR_CLIENT, {
+    server.middlewares.use(`${base}__devtools__`, sirv__default(DIR_CLIENT, {
       single: true,
       dev: true
     }));

package/dist/index.mjs

@@ -7500,7 +7500,7 @@ async function getStaticAssets(config) {
   const baseURL = config.base;
   const files = await fg([
     // image
-    "**/*.(a?png|jpe?g|gif|svg|webp|avif|ico|bmp|tiff)",
+    "**/*.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)",
     // video
     "**/*.(mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)",
     // audio
@@ -7508,7 +7508,7 @@ async function getStaticAssets(config) {
     // font
     "**/*.(woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)",
     // text
-    "**/*.(json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown)"
+    "**/*.(json|json5|jsonc|txt|text|tsx|jsx|md|mdx|mdc|markdown)"
   ], {
     cwd: dir,
     onlyFiles: true,
@@ -13689,7 +13689,7 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
   let config;
   function configureServer(server) {
     const base = server.config.base || "/";
-    server.middlewares.use(`${base}__devtools`, sirv(DIR_CLIENT, {
+    server.middlewares.use(`${base}__devtools__`, sirv(DIR_CLIENT, {
       single: true,
       dev: true
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "packageManager": "pnpm@8.4.0",
   "description": "A vite plugin for Vue Devtools",
   "author": "webfansplz",
@@ -43,7 +43,7 @@
     "build": "rimraf dist && run-s build:*",
     "build:client": "vite build src/client",
     "build:js": "unbuild",
-    "dev": "nr stub && vite src/client",
+    "dev": "nr stub && pnpm dev:client",
     "dev:client": "vite build src/client --watch",
     "play": "nr -C playground dev",
     "stub": "unbuild --stub",
@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.1.2",
+    "@vueuse/integrations": "^10.2.0",
     "@webfansplz/vuedoc-parser": "^0.0.3",
     "algoliasearch": "^4.17.1",
     "birpc": "^0.2.12",

package/src/node/Container.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 import vueDevToolsOptions from 'virtual:vue-devtools-options'
 
 // Reuse @vuejs/devtools instance first
@@ -28,11 +28,15 @@ const PANEL_MIN = 15
 const PANEL_MAX = 100
 const PANEL_PADDING = 10
 
-const clientUrl = `${vueDevToolsOptions.base || '/'}__devtools/`
+const clientUrl = `${vueDevToolsOptions.base || '/'}__devtools__/`
 const iframe = ref()
+const isDragging = ref(false)
+const modalRef = ref(null)
+const isInPopup = ref(false)
 
 const hookBuffer = []
 let isAppCreated = false
+let innerIframe = null
 
 /** -----panel start-----**/
 const panelVisible = ref(false)
@@ -150,8 +154,69 @@ function initPanelPosition() {
   }
 }
 
+function getIframe() {
+  iframe.value = document.createElement('iframe')
+  iframe.value.id = 'vue-devtools-iframe'
+  iframe.value.src = clientUrl
+  iframe.value.setAttribute('data-v-inspector-ignore', 'true')
+  iframe.value.onload = async () => {
+    await waitForClientInjection()
+    setupClient()
+  }
+  return iframe.value
+}
+
+watchEffect(() => {
+  if (!modalRef.value || isInPopup.value)
+    return
+
+  if (panelVisible.value) {
+    const iframe = getIframe()
+    iframe.style.pointerEvents = isDragging.value ? 'none' : 'auto'
+
+    if (!innerIframe && Array.from(modalRef.value.children).every(el => el !== iframe))
+      modalRef.value.appendChild(iframe)
+
+    innerIframe = iframe
+  }
+})
+
+// Experimental: Picture-in-Picture mode
+// https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
+const documentPictureInPicture = window.documentPictureInPicture
+async function popup() {
+  const iframe = getIframe()
+  const pip = await documentPictureInPicture.requestWindow({
+    width: Math.round(window.innerWidth * 80 / 100),
+    height: Math.round(window.innerHeight * 60 / 100),
+  })
+  const style = pip.document.createElement('style')
+  style.innerHTML = `
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        iframe {
+          width: 100vw;
+          height: 100vh;
+          border: none;
+          outline: none;
+        }
+      `
+  pip.__VUE_DEVTOOLS_GLOBAL_HOOK__ = props.hook
+  pip.__VUE_DEVTOOLS_IS_POPUP__ = true
+  pip.document.title = 'Vue DevTools'
+  pip.document.head.appendChild(style)
+  pip.document.body.appendChild(iframe)
+  pip.addEventListener('resize', () => {
+  })
+  pip.addEventListener('pagehide', () => {
+    pip.close()
+    isInPopup.value = false
+  })
+}
+
 /** -----resize start-----**/
-const isDragging = ref(false)
 const resizeBaseClassName = 'vue-devtools-resize-handle'
 const resizeVerticalClassName = [resizeBaseClassName, `${resizeBaseClassName}-vertical`]
 const resizeHorizontalClassName = [resizeBaseClassName, `${resizeBaseClassName}-horizontal`]
@@ -266,6 +331,11 @@ function setupClient() {
       toggleViewMode,
       toggle: togglePanel,
       togglePosition(position) {
+        if (position === 'popup') {
+          isInPopup.value = true
+          popup()
+          return
+        }
         panelState.value.position = position
       },
     },
@@ -380,11 +450,6 @@ function collectHookBuffer() {
 collectHookBuffer()
 initPanelPosition()
 
-async function onLoad() {
-  await waitForClientInjection()
-  setupClient()
-}
-
 onMounted(() => {
   window.addEventListener('keydown', (e) => {
     if (e.code === 'KeyD' && e.altKey && e.shiftKey)
@@ -393,9 +458,10 @@ onMounted(() => {
 })
 
 const toggleButtonRef = ref(null)
-const modalRef = ref(null)
 
 window.addEventListener('click', (event) => {
+  if (isInPopup.value)
+    return
   const modalEl = modalRef.value
   const toggleButtonEl = toggleButtonRef.value
   if (!modalEl || !toggleButtonEl || event.composedPath().includes(modalEl) || event.composedPath().includes(toggleButtonEl))
@@ -410,13 +476,7 @@ window.addEventListener('click', (event) => {
 </script>
 
 <template>
-  <div ref="modalRef" class="vue-devtools-panel" :style="panelPosition">
-    <!-- client -->
-    <iframe
-      ref="iframe" :src="clientUrl" :style="{
-        'pointer-events': isDragging ? 'none' : 'auto',
-      }" @load="onLoad"
-    />
+  <div v-show="!isInPopup" ref="modalRef" class="vue-devtools-panel" :style="panelPosition">
     <!-- resize -->
     <template v-if="panelState.viewMode === 'default'">
       <template v-if="panelState.position !== 'top'">
@@ -458,7 +518,7 @@ window.addEventListener('click', (event) => {
   </div>
   <!-- toggle button -->
   <button
-    ref="toggleButtonRef" class="vue-devtools-toggle" aria-label="Toggle devtools panel"
+    v-show="!isInPopup" ref="toggleButtonRef" 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">
@@ -477,7 +537,7 @@ window.addEventListener('click', (event) => {
   height: calc(60vh - 20px);
 }
 
-.vue-devtools-panel iframe {
+.vue-devtools-panel :deep(iframe) {
   width: 100%;
   height: 100%;
   outline: 0;

package/dist/client/assets/VCard-8f584a44.js

@@ -1,15 +0,0 @@
-import { aD as _export_sfc, o as openBlock, e as createElementBlock, f as renderSlot } from './index-f743edb2.js';
-
-/* unplugin-vue-components disabled */const _sfc_main = {};
-
-const _hoisted_1 = { class: "n-card n-card-base" };
-
-function _sfc_render(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "default")
-  ]))
-}
-const __unplugin_components_7 = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);
-/* Injected with object hook! */
-
-export { __unplugin_components_7 as _ };