@nuxt/devtools-nightly 4.0.0-29893186.47ed265 → 4.0.0-29893186.f4652fe

package/dist/chunks/module-main.mjs

@@ -26,7 +26,7 @@ import { DEVTOOLS_TERMINALS_DOCK_ID, DEVTOOLS_MOUNT_PATH } from '@vitejs/devtool
 import { debounce } from 'perfect-debounce';
 import { Server } from 'node:tls';
 
-const version = "4.0.0-29893186.47ed265";
+const version = "4.0.0-29893186.f4652fe";
 const peerDependencies = {
 	"@nuxt/kit": "^4.0.0-0 || ^5.0.0-0",
 	nitro: "*",

package/dist/chunks/vue-tracer.mjs

@@ -6,7 +6,9 @@ function setup({ nuxt, options }) {
     return;
   if (!options.componentInspector)
     return;
-  const plugin = VueTracer();
+  const plugin = VueTracer({
+    viteDevtools: { onPick: "none" }
+  });
   if (plugin)
     addVitePlugin(plugin);
 }

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools",
   "configKey": "devtools",
-  "version": "4.0.0-29893186.47ed265",
+  "version": "4.0.0-29893186.f4652fe",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/runtime/plugins/view/client.js

@@ -7,6 +7,7 @@ import { computed, effect, isRef, markRaw, nextTick, reactive, ref, shallowReact
 import { useAppConfig } from "#imports";
 import { initTimelineMetrics } from "../../function-metrics-helpers.js";
 const NUXT_DOCK_ANCHOR_ID = "nuxt:devtools";
+const VUE_TRACER_DOCK_ID = "vue-tracer";
 function getDevframeContext() {
   return getDevframeClientContext();
 }
@@ -34,7 +35,7 @@ export async function setupDevToolsClient({
       close() {
         const ctx = getDevframeContext();
         if (ctx)
-          ctx.panel.session.open = false;
+          closePanel(ctx);
       },
       open() {
         const ctx = getDevframeContext();
@@ -94,10 +95,46 @@ export async function setupDevToolsClient({
       left: "0",
       top: "0"
     });
+    const supportsTopLayer = typeof component.showPopover === "function";
+    function raiseToTopLayer() {
+      if (!supportsTopLayer)
+        return;
+      if (component.matches(":popover-open"))
+        component.hidePopover();
+      component.showPopover();
+    }
+    if (supportsTopLayer) {
+      component.popover = "manual";
+      Object.assign(component.style, {
+        inset: "auto",
+        margin: "0",
+        padding: "0",
+        border: "none",
+        background: "transparent",
+        overflow: "visible"
+      });
+      raiseToTopLayer();
+    }
+    let reopenPanelOnClose = false;
+    function holdPanelWhileInspecting() {
+      queueMicrotask(() => {
+        const ctx = getDevframeContext();
+        if (!props.matched || !ctx?.panel.session.open)
+          return;
+        ctx.panel.session.open = false;
+        reopenPanelOnClose = true;
+      });
+    }
     component.addEventListener("close", () => {
       props.matched = void 0;
       inspectorState.isEnabled = false;
       inspectorState.isVisible = false;
+      if (reopenPanelOnClose) {
+        reopenPanelOnClose = false;
+        const ctx = getDevframeContext();
+        if (ctx)
+          ctx.panel.session.open = true;
+      }
     });
     component.addEventListener("selectParent", () => {
       const parent = inspectorState.main?.getParent();
@@ -132,6 +169,8 @@ export async function setupDevToolsClient({
       inspectorState.isVisible = true;
       props.matched = info;
       props.mouse = { x: e.clientX, y: e.clientY };
+      raiseToTopLayer();
+      holdPanelWhileInspecting();
     });
     const isAvailable = ref(inspectorHasData());
     if (!isAvailable.value) {
@@ -139,21 +178,21 @@ export async function setupDevToolsClient({
         isAvailable.value = inspectorHasData();
       });
     }
+    function setActive(active) {
+      const ctx = getDevframeContext();
+      if (ctx?.docks.getStateById(VUE_TRACER_DOCK_ID)) {
+        ctx.docks.setActionActive(VUE_TRACER_DOCK_ID, active);
+        return;
+      }
+      inspectorState.isVisible = active;
+      inspectorState.isEnabled = active;
+    }
     return inspector = markRaw({
       isAvailable,
       isEnabled: toRef(inspectorState, "isVisible"),
-      enable: () => {
-        inspectorState.isVisible = true;
-        inspectorState.isEnabled = true;
-      },
-      disable: () => {
-        inspectorState.isVisible = false;
-        inspectorState.isEnabled = false;
-      },
-      toggle: () => {
-        inspectorState.isEnabled = !inspectorState.isEnabled;
-        inspectorState.isVisible = inspectorState.isEnabled;
-      }
+      enable: () => setActive(true),
+      disable: () => setActive(false),
+      toggle: () => setActive(!inspectorState.isEnabled)
     });
   }
   setupRouteTracking(timeline, router);
@@ -164,6 +203,10 @@ export async function setupDevToolsClient({
       client.devtools.toggle();
   });
 }
+function closePanel(ctx) {
+  ctx.docks.switchEntry(null);
+  ctx.panel.session.open = false;
+}
 export function useClientColorMode() {
   const explicitColor = ref();
   const systemColor = ref();

package/dist/webcomponents/index.mjs

@@ -190,6 +190,43 @@ function onClickOutside(target, handler, options = {}) {
 	return stop;
 }
 //#endregion
+//#region onKeyStroke/index.ts
+function createKeyPredicate(keyFilter) {
+	if (typeof keyFilter === "function") return keyFilter;
+	else if (typeof keyFilter === "string") return (event) => event.key === keyFilter;
+	else if (Array.isArray(keyFilter)) return (event) => keyFilter.includes(event.key);
+	return () => true;
+}
+function onKeyStroke(...args) {
+	let key;
+	let handler;
+	let options = {};
+	if (args.length === 3) {
+		key = args[0];
+		handler = args[1];
+		options = args[2];
+	} else if (args.length === 2) {
+		if (typeof args[1] === "object") {
+			key = true;
+			handler = args[0];
+			options = args[1];
+		} else {
+			key = args[0];
+			handler = args[1];
+		}
+	} else {
+		key = true;
+		handler = args[0];
+	}
+	const { target = defaultWindow, eventName = "keydown", passive = false, dedupe = false } = options;
+	const predicate = createKeyPredicate(key);
+	const listener = (e) => {
+		if (e.repeat && toValue(dedupe)) return;
+		if (predicate(e)) handler(e);
+	};
+	return useEventListener(target, eventName, listener, passive);
+}
+//#endregion
 //#region useDraggable/index.ts
 const defaultScrollConfig = {
 	speed: 2,
@@ -441,6 +478,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         close();
       });
     });
+    onKeyStroke("Escape", () => {
+      if (__props.props.matched)
+        close();
+    });
     function close() {
       emit("close");
     }
@@ -452,6 +493,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       const file = `${__props.props.matched.pos[0]}:${__props.props.matched.pos[1]}:${__props.props.matched.pos[2]}`;
       emit("openInEditor", file);
+      close();
     }
     function generateUniqueSelector(element) {
       if (!element)
@@ -545,6 +587,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         toastTimer = setTimeout(() => {
           showToast.value = false;
         }, 6e3);
+        close();
       } catch (error) {
         console.error("Failed to copy agent info:", error);
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-nightly",
   "type": "module",
-  "version": "4.0.0-29893186.47ed265",
+  "version": "4.0.0-29893186.f4652fe",
   "description": "The Nuxt DevTools gives you insights and transparency about your Nuxt App.",
   "license": "MIT",
   "homepage": "https://nuxt.com/modules/devtools",
@@ -43,18 +43,18 @@
     }
   },
   "dependencies": {
-    "@devframes/hub": "^1.2.6",
-    "@devframes/plugin-assets": "^1.2.6",
-    "@devframes/plugin-code-server": "^1.2.6",
-    "@devframes/plugin-data-inspector": "^1.2.6",
-    "@devframes/plugin-og": "^1.2.6",
-    "@nuxt/devtools-assets": "npm:@nuxt/devtools-assets-nightly@4.0.0-29893186.47ed265",
-    "@nuxt/devtools-kit": "npm:@nuxt/devtools-kit-nightly@4.0.0-29893186.47ed265",
+    "@devframes/hub": "^1.3.1",
+    "@devframes/plugin-assets": "^1.3.1",
+    "@devframes/plugin-code-server": "^1.3.1",
+    "@devframes/plugin-data-inspector": "^1.3.1",
+    "@devframes/plugin-og": "^1.3.1",
+    "@nuxt/devtools-assets": "npm:@nuxt/devtools-assets-nightly@4.0.0-29893186.f4652fe",
+    "@nuxt/devtools-kit": "npm:@nuxt/devtools-kit-nightly@4.0.0-29893186.f4652fe",
     "@vitejs/devtools": "^0.8.0",
     "@vitejs/devtools-kit": "^0.8.0",
     "consola": "^3.4.2",
     "destr": "^2.0.5",
-    "devframe": "^1.2.6",
+    "devframe": "^1.3.1",
     "error-stack-parser-es": "^2.0.1",
     "escape-string-regexp": "^5.0.0",
     "fast-npm-meta": "^2.2.0",
@@ -69,7 +69,7 @@
     "unplugin": "^3.5.0",
     "verkit": "^0.5.0",
     "vite-plugin-vue-devtools": "^9.0.0-beta.1",
-    "vite-plugin-vue-tracer": "^1.6.0"
+    "vite-plugin-vue-tracer": "^1.7.0"
   },
   "devDependencies": {
     "@antfu/utils": "^9.3.0",