@qwik.dev/devtools 2.0.0-beta.45 → 2.0.0-beta.47

package/dist/kit/index.d.mts

@@ -77,6 +77,9 @@ declare const QWIK_VNODE_PROTOCOL: {
 interface DevtoolsVNodeTreeNode {
   name?: string;
   id: string;
+  source?: {
+    file: string;
+  };
   label?: string;
   props?: Record<string, unknown>;
   children?: DevtoolsVNodeTreeNode[];
@@ -279,6 +282,7 @@ interface QwikDevtoolsSignalEntry {
 interface QwikDevtoolsComponentSnapshot {
   /** Source path (e.g. `src/routes/index.tsx_Counter`) */
   path: string;
+  symbol?: string;
   /** Short display name */
   name: string;
   /** Tracked signals with current values */
@@ -400,6 +404,7 @@ interface DevtoolsRenderStats {
   perf?: QwikPerfStoreRemembered;
 }
 interface ComponentDevtoolsState {
+  symbol?: string;
   hooks: ParsedStructure[];
   stats: DevtoolsRenderStats;
 }
@@ -497,6 +502,7 @@ interface QwikDevtoolsHookExtended extends QwikDevtoolsHook {
   getComponentDetail(name: string, chunk?: string): DevtoolsComponentDetailEntry[] | null;
   setSignalValue(name: string, chunk: string | undefined, varName: string, val: unknown): boolean;
   getVNodeTree?(): DevtoolsVNodeTreeNode[] | null;
+  refreshVNodeTree?(): void;
   getNodeProps?(nodeId: string): Record<string, unknown> | null;
   resolveElementToComponent?(el: Element | null): string | null;
   getElementRect?(nodeId: string): {

package/dist/plugin/codegen.mjs

@@ -1,2 +1,2 @@
-import { n as createHookRuntime, r as createVNodeRuntime, t as createExtensionHookRuntime } from "./create-hook-runtime-CoRDu99E.mjs";
+import { n as createHookRuntime, r as createVNodeRuntime, t as createExtensionHookRuntime } from "./create-hook-runtime-CAtQC5B3.mjs";
 export { createExtensionHookRuntime, createHookRuntime, createVNodeRuntime };

package/dist/plugin/{create-hook-runtime-CoRDu99E.mjs → create-hook-runtime-CAtQC5B3.mjs}

@@ -38,6 +38,8 @@ function isRuntimeExpression(value) {
 */
 function __qwik_derive_component_name__(path) {
 	const lastSeg = path.split("/").pop() || path;
+	const sourceSuffix = lastSeg.match(/\.[jt]sx?_(.+)$/);
+	if (sourceSuffix) return sourceSuffix[1];
 	const underIdx = lastSeg.lastIndexOf("_");
 	return underIdx > 0 ? lastSeg.substring(underIdx + 1) : lastSeg;
 }
@@ -157,7 +159,8 @@ function __qwik_install_hook_runtime__(options) {
 			const state = getState();
 			if (!state) return [];
 			return Object.keys(state).map((path) => {
-				const hooks = state[path].hooks || [];
+				const comp = state[path];
+				const hooks = comp.hooks || [];
 				const name = __qwik_derive_component_name__(path);
 				const signals = [];
 				const hookEntries = [];
@@ -177,7 +180,8 @@ function __qwik_install_hook_runtime__(options) {
 					path,
 					name,
 					signals,
-					hooks: hookEntries
+					hooks: hookEntries,
+					...comp.symbol ? { symbol: comp.symbol } : {}
 				};
 			});
 		},
@@ -191,7 +195,7 @@ function __qwik_install_hook_runtime__(options) {
 		getComponentDetail(componentName, qrlChunk) {
 			const state = getState();
 			if (!state) return null;
-			const matchingKey = __qwik_find_component_key__(state, componentName, qrlChunk);
+			const matchingKey = __qwik_find_component_key__(state, componentName, qrlChunk ?? null);
 			if (!matchingKey) return null;
 			const comp = state[matchingKey];
 			if (!comp || !comp.hooks) return null;
@@ -204,7 +208,7 @@ function __qwik_install_hook_runtime__(options) {
 		setSignalValue(componentName, qrlChunk, variableName, newValue) {
 			const state = getState();
 			if (!state) return false;
-			const matchingKey = __qwik_find_component_key__(state, componentName, qrlChunk);
+			const matchingKey = __qwik_find_component_key__(state, componentName, qrlChunk ?? null);
 			if (!matchingKey) return false;
 			const comp = state[matchingKey];
 			if (!comp || !comp.hooks) return false;
@@ -406,8 +410,7 @@ function __qwik_install_vnode_runtime__(options, internals) {
 		return String(val);
 	}
 	function normalizeName(str) {
-		const name = str.split("_")[0] || "";
-		return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+		return str.split("_component")[0];
 	}
 	function buildTree(container, vnode) {
 		if (!vnode) return [];
@@ -418,26 +421,28 @@ function __qwik_install_vnode_runtime__(options, internals) {
 			const renderFn = isVirtual ? container.getHostProp(current, QRENDERFN) : null;
 			const isComponent = isVirtual && typeof renderFn === "function";
 			if (isComponent) {
+				let component;
 				let name = "Component";
 				let qId = "";
 				let colonId = "";
 				try {
+					const symbol = renderFn.getSymbol?.() || renderFn[SYMBOL_KEY] || "";
+					component = componentNames.get(symbol);
+					name = component?.name || normalizeName(symbol) || "Component";
 					const keys = internals._vnode_getAttrKeys(container, current);
 					for (let i = 0; i < keys.length; i++) {
 						if (keys[i] === QTYPE) continue;
 						if (keys[i] === QID) qId = String(container.getHostProp(current, QID) || "");
 						if (keys[i] === QCOLON) colonId = String(container.getHostProp(current, QCOLON) || "");
 					}
-					if (renderFn.getSymbol) name = normalizeName(renderFn.getSymbol());
-					else if (renderFn[SYMBOL_KEY]) name = normalizeName(renderFn[SYMBOL_KEY]);
 				} catch (_) {}
 				let qrlChunk = "";
 				let qrlPath = "";
 				try {
 					const chunk = renderFn[CHUNK_KEY] || "";
 					const chunkIdx = chunk.indexOf("_component");
-					qrlChunk = chunkIdx > 0 ? chunk.substring(0, chunkIdx) : chunk;
-					qrlPath = renderFn.dev && renderFn.dev.file ? renderFn.dev.file : qrlChunk;
+					qrlChunk = component?.path || (chunkIdx > 0 ? chunk.substring(0, chunkIdx) : chunk);
+					qrlPath = component?.file || (renderFn.dev && renderFn.dev.file ? renderFn.dev.file : qrlChunk);
 				} catch (_) {}
 				let children = [];
 				const firstChild = internals._vnode_getFirstChild(current);
@@ -455,6 +460,7 @@ function __qwik_install_vnode_runtime__(options, internals) {
 					name,
 					id: nodeId,
 					label: name,
+					...component?.file ? { source: { file: component.file } } : {},
 					props: nodeProps,
 					children: children.length > 0 ? children : void 0
 				});
@@ -473,28 +479,43 @@ function __qwik_install_vnode_runtime__(options, internals) {
 		const result = [];
 		for (let i = 0; i < nodes.length; i++) {
 			let n = nodes[i];
-			if (n.name === "Qwikdevtools" || n.name === "Devtoolscontainer") continue;
+			if (n.name?.toLowerCase() === "qwikdevtools" || n.name?.toLowerCase() === "devtoolscontainer") continue;
 			if (n.children) {
 				n = {
 					name: n.name,
 					id: n.id,
 					label: n.label,
 					props: n.props,
+					...n.source ? { source: n.source } : {},
 					children: filterDevtools(n.children)
 				};
-				if (n.children.length === 0) delete n.children;
+				if (n.children?.length === 0) delete n.children;
 			}
 			result.push(n);
 		}
 		return result;
 	}
+	const componentNames = /* @__PURE__ */ new Map();
 	function getTree() {
 		try {
 			idx = 0;
 			vnodeMap = {};
-			const container = internals._getDomContainer(document.documentElement);
-			if (!container || !container.rootVNode) return null;
-			return filterDevtools(buildTree(container, container.rootVNode));
+			componentNames.clear();
+			const hook = window[options.devtoolsGlobalKey]?.[options.hookKey];
+			for (const component of hook?.getComponentTreeSnapshot?.() ?? []) if (component.symbol) componentNames.set(component.symbol, {
+				name: component.name,
+				path: component.path,
+				file: component.path.match(/^(.*\.[jt]sx?)_/)?.[1]
+			});
+			const elements = document.querySelectorAll("[q\\:container]");
+			if (!elements.length) return null;
+			const tree = [];
+			for (const element of elements) {
+				const container = internals._getDomContainer(element);
+				if (!container?.rootVNode) return null;
+				tree.push(...buildTree(container, container.rootVNode));
+			}
+			return filterDevtools(tree);
 		} catch (_) {
 			return null;
 		}
@@ -502,7 +523,7 @@ function __qwik_install_vnode_runtime__(options, internals) {
 	function setupBridge() {
 		if (typeof window === "undefined") return;
 		const hook = window[options.devtoolsGlobalKey]?.[options.hookKey];
-		if (!hook) return;
+		if (!hook || hook.getVNodeTree) return;
 		hook.getVNodeTree = getTree;
 		hook.resolveElementToComponent = function(el) {
 			if (!el) return null;
@@ -621,10 +642,11 @@ function __qwik_install_vnode_runtime__(options, internals) {
 				tree
 			}, "*");
 		}
-		new MutationObserver(function() {
+		hook.refreshVNodeTree = function() {
 			if (debounceTimer) clearTimeout(debounceTimer);
 			debounceTimer = setTimeout(pushTree, DEBOUNCE_MS);
-		}).observe(document.documentElement, {
+		};
+		new MutationObserver(hook.refreshVNodeTree).observe(document.documentElement, {
 			childList: true,
 			subtree: true,
 			characterData: true,

package/dist/plugin/index.mjs

@@ -1,4 +1,4 @@
-import { a as createRuntimeAssignment, c as runtimeExpression, i as __qwik_install_perf_runtime__, l as serializeRuntimeValue, n as createHookRuntime, o as createRuntimeInstallerSource, r as createVNodeRuntime, s as createRuntimeModule } from "./create-hook-runtime-CoRDu99E.mjs";
+import { a as createRuntimeAssignment, c as runtimeExpression, i as __qwik_install_perf_runtime__, l as serializeRuntimeValue, n as createHookRuntime, o as createRuntimeInstallerSource, r as createVNodeRuntime, s as createRuntimeModule } from "./create-hook-runtime-CAtQC5B3.mjs";
 import VueInspector from "vite-plugin-inspect";
 import fs from "node:fs";
 import fsp, { access, readFile } from "node:fs/promises";
@@ -1363,6 +1363,7 @@ function buildComponentArg(path, exportName) {
 	return JSON.stringify(`${baseArg}${suffix}`);
 }
 function buildComponentSuffix(baseArg, exportName) {
+	if (exportName === "") return "_default";
 	if (exportName && typeof exportName === "string") return `_${exportName}`;
 	if (baseArg.endsWith("index.tsx")) {
 		const parts = baseArg.split("/");
@@ -1652,6 +1653,7 @@ const globalVersion = JSON.stringify(QWIK_DEVTOOLS_GLOBAL.version);
 const componentStateKey = JSON.stringify(QWIK_DEVTOOLS_GLOBAL.props.componentState);
 /** Virtual module source for devtools tracking. Collects hooks and tracks render statistics. */
 const useCollectHooks = `import { $, useSignal, useVisibleTask$ } from "@qwik.dev/core"
+import { _getContextContainer, _getContextHostElement } from "@qwik.dev/core/internal"
 
 function initComponentState() {
   return {
@@ -1676,11 +1678,16 @@ function getOrCreateState(src) {
  * Hook to collect component hooks
  */
 export const useCollectHooks = (src) => {
+  const container = _getContextContainer()
+  const host = _getContextHostElement()
+  const symbol = container?.getHostProp(host, "q:renderFn")?.getSymbol?.()
   const hooksList = useSignal(new Set())
   useVisibleTask$(({ track }) => {
     const newHooks = track(() => hooksList.value)
     const state = getOrCreateState(src)
     state.hooks = [...newHooks]
+    state.symbol = symbol
+    window[${globalKey}]?.hook?.refreshVNodeTree?.()
   }, { strategy: 'document-ready' })
   
   return $((args) => {
@@ -1688,6 +1695,10 @@ export const useCollectHooks = (src) => {
       return
     }
     hooksList.value.add(args)
+    if (typeof window !== 'undefined') {
+      getOrCreateState(src).hooks = [...hooksList.value]
+      window[${globalKey}]?.hook?.refreshVNodeTree?.()
+    }
   })
 }
 `;

package/dist/ui/lib-types/ui/src/features/HookTree/hookTreeHelpers.d.ts

@@ -2,7 +2,7 @@ import type { TreeNode, ElementType } from '../../components/Tree/type';
 import type { VNodeTreeNode, ComponentDetailEntry } from '../../devtools/page-data-source';
 /** VNodeTreeNode -> TreeNode conversion */
 export declare function toTreeNodes(vnodes: VNodeTreeNode[]): TreeNode[];
-/** Quick structural fingerprint from node IDs. */
+/** Includes names so collected source metadata refreshes existing nodes. */
 export declare function treeIdFingerprint(nodes: VNodeTreeNode[]): string;
 /** Tree search helpers */
 export declare function findNodeById(nodes: TreeNode[], id: string): TreeNode | null;

package/dist/ui/packages/devtools/ui/src/components/DevtoolsButton/DevtoolsButton.qwik.mjs

@@ -1,5 +1,5 @@
 import { QwikLogo } from "../Icons/Icons.qwik.mjs";
-import { _captures, _fnSignal, _jsxSorted, componentQrl, inlinedQrl, useSignal, useTaskQrl } from "@qwik.dev/core";
+import { _capturesObj, _fnSignal, _jsxSorted, componentQrl, inlinedQrl, useSignal, useTaskQrl } from "@qwik.dev/core";
 var _hf0 = (p0, p1) => ({
 	bottom: `${p1.value.y}px`,
 	right: `${p1.value.x}px`,
@@ -25,7 +25,7 @@ var DevtoolsButton = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 	const isMoved = useSignal(false);
 	/** Handles mouse movement during drag. Defined outside handleMouseDown$ for serialization. */
 	const handleMouseMove = /*#__PURE__*/ inlinedQrl((event) => {
-		const isDragging = _captures[0], isMoved = _captures[1], position = _captures[2], startElementPos = _captures[3], startMousePos = _captures[4];
+		let isDragging = _capturesObj._[0], isMoved = _capturesObj._[1], position = _capturesObj._[2], startElementPos = _capturesObj._[3], startMousePos = _capturesObj._[4];
 		if (!isDragging.value) return;
 		const deltaX = event.clientX - startMousePos.value.x;
 		const deltaY = event.clientY - startMousePos.value.y;
@@ -47,11 +47,11 @@ var DevtoolsButton = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 	]);
 	/** Handles mouse release to end drag. Defined outside handleMouseDown$ for serialization. */
 	const handleMouseUp = /*#__PURE__*/ inlinedQrl(() => {
-		const isDragging = _captures[0];
+		let isDragging = _capturesObj._[0];
 		if (isDragging.value) isDragging.value = false;
 	}, "DevtoolsButton_component_handleMouseUp_GgvQR4Yjzk0", [isDragging]);
 	const handleClick = /*#__PURE__*/ inlinedQrl(() => {
-		const isMoved = _captures[0], props = _captures[1];
+		let isMoved = _capturesObj._[0], props = _capturesObj._[1];
 		if (isMoved.value) {
 			isMoved.value = false;
 			return;
@@ -61,7 +61,7 @@ var DevtoolsButton = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 	}, "DevtoolsButton_component_handleClick_Rt3WuwyzzVQ", [isMoved, props]);
 	/** Handles the mouse down event to initiate dragging. */
 	const handleMouseDown = /*#__PURE__*/ inlinedQrl((event) => {
-		const elementRef = _captures[0], isDragging = _captures[1], isMoved = _captures[2], position = _captures[3], startElementPos = _captures[4], startMousePos = _captures[5];
+		let elementRef = _capturesObj._[0], isDragging = _capturesObj._[1], isMoved = _capturesObj._[2], position = _capturesObj._[3], startElementPos = _capturesObj._[4], startMousePos = _capturesObj._[5];
 		if (event.button !== 0) return;
 		if (!elementRef.value) return;
 		event.preventDefault();
@@ -91,7 +91,7 @@ var DevtoolsButton = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 		startMousePos
 	]);
 	useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
-		const handleMouseMove = _captures[0], handleMouseUp = _captures[1], isDragging = _captures[2];
+		let handleMouseMove = _capturesObj._[0], handleMouseUp = _capturesObj._[1], isDragging = _capturesObj._[2];
 		track(() => isDragging.value);
 		if (isDragging.value && typeof window !== "undefined") {
 			window.addEventListener("mousemove", handleMouseMove);

package/dist/ui/packages/devtools/ui/src/components/DevtoolsPanel/DevtoolsPanel.qwik.mjs

@@ -1,5 +1,5 @@
 import { IconArrowsPointingIn, IconArrowsPointingOut, IconXMark, QwikLogo } from "../Icons/Icons.qwik.mjs";
-import { Slot, _captures, _fnSignal, _jsxSorted, componentQrl, inlinedQrl, isBrowser, useSignal, useTaskQrl, useVisibleTaskQrl } from "@qwik.dev/core";
+import { Slot, _capturesObj, _fnSignal, _jsxSorted, componentQrl, inlinedQrl, isBrowser, useSignal, useTaskQrl, useVisibleTaskQrl } from "@qwik.dev/core";
 import { Fragment } from "@qwik.dev/core/jsx-runtime";
 var _hf0 = (p0) => ["border-glass-border/80 flex items-center justify-between border-b px-4 py-3", p0.state.isPanelFullscreen ? "cursor-default" : "cursor-grab"];
 var _hf0_str = "[\"border-glass-border/80 flex items-center justify-between border-b px-4 py-3\",p0.state.isPanelFullscreen?\"cursor-default\":\"cursor-grab\"]";
@@ -112,12 +112,12 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 	});
 	const panelBounds = useSignal({ ...props.state.panelBounds });
 	const stopInteraction = /*#__PURE__*/ inlinedQrl(() => {
-		const interactionMode = _captures[0];
+		let interactionMode = _capturesObj._[0];
 		interactionMode.value = null;
 		resetPointerStyles();
 	}, "DevtoolsPanel_component_stopInteraction_FDdPgYv46RA", [interactionMode]);
 	const handleMouseMove = /*#__PURE__*/ inlinedQrl((event) => {
-		const interactionMode = _captures[0], panelBounds = _captures[1], props = _captures[2], startBounds = _captures[3], startMousePosition = _captures[4];
+		let interactionMode = _capturesObj._[0], panelBounds = _capturesObj._[1], props = _capturesObj._[2], startBounds = _capturesObj._[3], startMousePosition = _capturesObj._[4];
 		if (!interactionMode.value || props.state.isPanelFullscreen) return;
 		const deltaX = event.clientX - startMousePosition.value.x;
 		const deltaY = event.clientY - startMousePosition.value.y;
@@ -163,7 +163,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 		startMousePosition
 	]);
 	const handleDragStart = /*#__PURE__*/ inlinedQrl((event) => {
-		const interactionMode = _captures[0], panelBounds = _captures[1], props = _captures[2], startBounds = _captures[3], startMousePosition = _captures[4];
+		let interactionMode = _capturesObj._[0], panelBounds = _capturesObj._[1], props = _capturesObj._[2], startBounds = _capturesObj._[3], startMousePosition = _capturesObj._[4];
 		if (event.button !== 0 || props.state.isPanelFullscreen) return;
 		event.preventDefault();
 		event.stopPropagation();
@@ -185,7 +185,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 		startMousePosition
 	]);
 	const handleResizeStart = /*#__PURE__*/ inlinedQrl((direction, event) => {
-		const interactionMode = _captures[0], panelBounds = _captures[1], props = _captures[2], startBounds = _captures[3], startMousePosition = _captures[4];
+		let interactionMode = _capturesObj._[0], panelBounds = _capturesObj._[1], props = _capturesObj._[2], startBounds = _capturesObj._[3], startMousePosition = _capturesObj._[4];
 		if (event.button !== 0 || props.state.isPanelFullscreen) return;
 		event.preventDefault();
 		event.stopPropagation();
@@ -207,7 +207,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 		startMousePosition
 	]);
 	const handleToggleFullscreen = /*#__PURE__*/ inlinedQrl(() => {
-		const interactionMode = _captures[0], panelBounds = _captures[1], props = _captures[2];
+		let interactionMode = _capturesObj._[0], panelBounds = _capturesObj._[1], props = _capturesObj._[2];
 		if (!isBrowser) return;
 		if (props.state.isPanelFullscreen) {
 			props.state.isPanelFullscreen = false;
@@ -226,7 +226,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 		props
 	]);
 	useTaskQrl(/*#__PURE__*/ inlinedQrl(({ cleanup }) => {
-		const props = _captures[0];
+		let props = _capturesObj._[0];
 		const handleKeyPress = (e) => {
 			if (e.key === "`" && e.metaKey) props.state.isOpen = !props.state.isOpen;
 			if (e.key === "Escape" && props.state.isPaletteOpen) props.state.isPaletteOpen = false;
@@ -239,7 +239,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 		});
 	}, "DevtoolsPanel_component_useTask_m0ftdAGWrnk", [props]));
 	useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
-		const handleMouseMove = _captures[0], interactionMode = _captures[1], stopInteraction = _captures[2];
+		let handleMouseMove = _capturesObj._[0], interactionMode = _capturesObj._[1], stopInteraction = _capturesObj._[2];
 		track(() => interactionMode.value);
 		if (!interactionMode.value || !isBrowser) return;
 		window.addEventListener("mousemove", handleMouseMove);
@@ -257,7 +257,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 		stopInteraction
 	]));
 	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
-		const panelBounds = _captures[0], props = _captures[1];
+		let panelBounds = _capturesObj._[0], props = _capturesObj._[1];
 		track(() => props.state.isOpen);
 		track(() => props.state.isPanelFullscreen);
 		if (!props.state.isOpen) return;
@@ -287,7 +287,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 	return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSorted("div", null, {
 		class: "fixed inset-0 z-[9990] bg-black/50 backdrop-blur-sm transition-opacity duration-300",
 		"q-e:mousedown": /*#__PURE__*/ inlinedQrl(() => {
-			const props = _captures[0];
+			let props = _capturesObj._[0];
 			props.state.isOpen = false;
 		}, "DevtoolsPanel_component_Fragment_div_q_e_mousedown_Yyj4ufBP6gI", [props])
 	}, null, 3, null), /*#__PURE__*/ _jsxSorted("div", {
@@ -305,7 +305,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 			"aria-label": "Resize north",
 			class: "absolute inset-x-4 top-0 z-20 h-2 cursor-ns-resize",
 			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
-				const handleResizeStart = _captures[0];
+				let handleResizeStart = _capturesObj._[0];
 				return handleResizeStart("n", event);
 			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_Kpo8QnowZug", [handleResizeStart])
 		}, null, 3, null),
@@ -314,7 +314,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 			"aria-label": "Resize south",
 			class: "absolute inset-x-4 bottom-0 z-20 h-2 cursor-ns-resize",
 			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
-				const handleResizeStart = _captures[0];
+				let handleResizeStart = _capturesObj._[0];
 				return handleResizeStart("s", event);
 			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_1_rpnKj8SmWbQ", [handleResizeStart])
 		}, null, 3, null),
@@ -323,7 +323,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 			"aria-label": "Resize east",
 			class: "absolute top-4 right-0 bottom-4 z-20 w-2 cursor-ew-resize",
 			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
-				const handleResizeStart = _captures[0];
+				let handleResizeStart = _capturesObj._[0];
 				return handleResizeStart("e", event);
 			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_2_7pH0bhGUSrQ", [handleResizeStart])
 		}, null, 3, null),
@@ -332,7 +332,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 			"aria-label": "Resize west",
 			class: "absolute top-4 bottom-4 left-0 z-20 w-2 cursor-ew-resize",
 			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
-				const handleResizeStart = _captures[0];
+				let handleResizeStart = _capturesObj._[0];
 				return handleResizeStart("w", event);
 			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_3_BqRiXxG6CsY", [handleResizeStart])
 		}, null, 3, null),
@@ -341,7 +341,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 			"aria-label": "Resize northwest",
 			class: "absolute top-0 left-0 z-20 h-4 w-4 cursor-nwse-resize",
 			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
-				const handleResizeStart = _captures[0];
+				let handleResizeStart = _capturesObj._[0];
 				return handleResizeStart("nw", event);
 			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_4_azrG92Zn70A", [handleResizeStart])
 		}, null, 3, null),
@@ -350,7 +350,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 			"aria-label": "Resize northeast",
 			class: "absolute top-0 right-0 z-20 h-4 w-4 cursor-nesw-resize",
 			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
-				const handleResizeStart = _captures[0];
+				let handleResizeStart = _capturesObj._[0];
 				return handleResizeStart("ne", event);
 			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_5_hTShrOzMO2s", [handleResizeStart])
 		}, null, 3, null),
@@ -359,7 +359,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 			"aria-label": "Resize southwest",
 			class: "absolute bottom-0 left-0 z-20 h-4 w-4 cursor-nesw-resize",
 			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
-				const handleResizeStart = _captures[0];
+				let handleResizeStart = _capturesObj._[0];
 				return handleResizeStart("sw", event);
 			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_6_ukQTZz0jKXc", [handleResizeStart])
 		}, null, 3, null),
@@ -368,7 +368,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 			"aria-label": "Resize southeast",
 			class: "absolute right-0 bottom-0 z-20 h-4 w-4 cursor-nwse-resize",
 			"q-e:mousedown": /*#__PURE__*/ inlinedQrl((event) => {
-				const handleResizeStart = _captures[0];
+				let handleResizeStart = _capturesObj._[0];
 				return handleResizeStart("se", event);
 			}, "DevtoolsPanel_component_Fragment_div_Fragment_button_q_e_mousedown_7_eWsKZf7ZlNg", [handleResizeStart])
 		}, null, 3, null)
@@ -392,7 +392,7 @@ var DevtoolsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)
 		"aria-label": "Close devtools",
 		class: "bg-card-item-bg hover:bg-card-item-hover-bg border-glass-border text-muted-foreground hover:text-foreground flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border shadow-sm backdrop-blur-md transition-all hover:scale-105 active:scale-95",
 		"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
-			const props = _captures[0];
+			let props = _capturesObj._[0];
 			props.state.isOpen = false;
 		}, "DevtoolsPanel_component_Fragment_div_div_div_div_button_q_e_click_wy3qFhRhsTU", [props])
 	}, /*#__PURE__*/ _jsxSorted(IconXMark, null, { class: "h-5 w-5" }, null, 3, "YV_4"), 1, null)], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-h-0 min-w-0 flex-1 overflow-hidden" }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "YV_5"), 1, null)], 1, null)], 1, null)], 1, "YV_6");

package/dist/ui/packages/devtools/ui/src/components/Tab/Tab.qwik.mjs

@@ -1,4 +1,4 @@
-import { Slot, _captures, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+import { Slot, _capturesObj, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
 var Tab = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	const isActive = _rawProps.state.activeTab === _rawProps.id;
 	return /*#__PURE__*/ _jsxSorted("button", {
@@ -6,7 +6,7 @@ var Tab = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 		style: isActive ? { boxShadow: "inset 3px 0 0 0 var(--color-primary)" } : {},
 		title: _wrapProp(_rawProps, "title")
 	}, { "q-e:click": /*#__PURE__*/ inlinedQrl(() => {
-		const _rawProps = _captures[0];
+		let _rawProps = _capturesObj._[0];
 		_rawProps.state.activeTab = _rawProps.id;
 	}, "Tab_component_button_q_e_click_mLGAiGoqTr0", [_rawProps]) }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "Cp_0"), 1, "Cp_1");
 }, "Tab_component_HsfA1eSoy4c"));

package/dist/ui/packages/devtools/ui/src/components/Tree/Tree.qwik.mjs

@@ -1,5 +1,5 @@
 import { IconChevronUpMini } from "../Icons/Icons.qwik.mjs";
-import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
+import { _capturesObj, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
 import { Fragment } from "@qwik.dev/core/jsx-runtime";
 var _hf0 = (p0) => p0.level + 1;
 var _hf0_str = "p0.level+1";
@@ -50,7 +50,7 @@ var TreeNodeComponent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((pro
 	const override = props.expanded[props.node.id];
 	const childrenVisible = override !== void 0 ? override : props.level < props.expandLevel;
 	const handleNodeClick = /*#__PURE__*/ inlinedQrl(() => {
-		const childrenVisible = _captures[0], hasChildren = _captures[1], props = _captures[2];
+		let childrenVisible = _capturesObj._[0], hasChildren = _capturesObj._[1], props = _capturesObj._[2];
 		props.onNodeClick(props.node);
 		if (hasChildren) props.onToggle(props.node.id, childrenVisible);
 	}, "TreeNodeComponent_component_handleNodeClick_hFhWIIdgPGE", [
@@ -94,7 +94,7 @@ var Tree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
 	const activeNodeId = useSignal("");
 	const expanded = useSignal({});
 	const setActiveNode = /*#__PURE__*/ inlinedQrl((node) => {
-		const activeNodeId = _captures[0], props = _captures[1], ref = _captures[2];
+		let activeNodeId = _capturesObj._[0], props = _capturesObj._[1], ref = _capturesObj._[2];
 		if (ref.value) ref.value.scrollLeft = ref.value.scrollWidth;
 		activeNodeId.value = node.id;
 		props.onNodeClick?.(node);
@@ -104,14 +104,14 @@ var Tree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
 		ref
 	]);
 	const toggleNode = /*#__PURE__*/ inlinedQrl((id, childrenVisible) => {
-		const expanded = _captures[0];
+		let expanded = _capturesObj._[0];
 		expanded.value = {
 			...expanded.value,
 			[id]: !childrenVisible
 		};
 	}, "Tree_component_toggleNode_QxlcpIF5TKQ", [expanded]);
 	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ track }) => {
-		const activeNodeId = _captures[0], expanded = _captures[1], props = _captures[2], ref = _captures[3];
+		let activeNodeId = _capturesObj._[0], expanded = _capturesObj._[1], props = _capturesObj._[2], ref = _capturesObj._[3];
 		const name = track(() => props.revealNode?.value);
 		const nodes = track(() => props.data.value);
 		if (!name) return;

package/dist/ui/packages/devtools/ui/src/devtools/CommandPalette.qwik.mjs

@@ -1,7 +1,7 @@
 import { IconMagnifyingGlass } from "../components/Icons/Icons.qwik.mjs";
 import { getTheme, setTheme } from "../components/ThemeToggle/QwikThemeToggle.qwik.mjs";
 import { addRecentId, buildPaletteSources, filterResults, getActionResults, groupResults, loadRecentIds, resolveRecents, saveRecentIds } from "./command-palette.qwik.mjs";
-import { _captures, _fnSignal, _jsxSorted, _qrlSync, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
+import { _capturesObj, _fnSignal, _jsxSorted, _qrlSync, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.value >= 0 ? `palette-option-${p0.value}` : void 0;
 var _hf0_str = "p0.value>=0?`palette-option-${p0.value}`:undefined";
 var _hf1 = (p0, p1, p2) => p2.hint ?? p0[p1.category];
@@ -28,16 +28,16 @@ var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 	const recentIds = useSignal([]);
 	const inputRef = useSignal();
 	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(() => {
-		const inputRef = _captures[0], recentIds = _captures[1];
+		let inputRef = _capturesObj._[0], recentIds = _capturesObj._[1];
 		recentIds.value = loadRecentIds();
 		inputRef.value?.focus();
 	}, "CommandPalette_component_useVisibleTask_35PZ2o0kMqE", [inputRef, recentIds]));
 	const searchable = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
-		const _rawProps = _captures[0];
+		let _rawProps = _capturesObj._[0];
 		return [...buildPaletteSources(_rawProps.state), ...getActionResults(_rawProps.state)];
 	}, "CommandPalette_component_searchable_useComputed_9iV5XwqJXZQ", [_rawProps]));
 	const groups = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
-		const _rawProps = _captures[0], query = _captures[1], recentIds = _captures[2], searchable = _captures[3];
+		let _rawProps = _capturesObj._[0], query = _capturesObj._[1], recentIds = _capturesObj._[2], searchable = _capturesObj._[3];
 		if (!query.value.trim()) {
 			const recents = resolveRecents(recentIds.value, _rawProps.state);
 			const emptyGroups = [];
@@ -59,15 +59,15 @@ var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 		searchable
 	]));
 	const flatResults = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
-		return _captures[0].value.flatMap((group) => group.results);
+		return _capturesObj._[0].value.flatMap((group) => group.results);
 	}, "CommandPalette_component_flatResults_useComputed_cCauVUcEhYk", [groups]));
 	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ track }) => {
-		const activeIndex = _captures[0];
+		let activeIndex = _capturesObj._[0];
 		const index = track(() => activeIndex.value);
 		document.getElementById(`palette-option-${index}`)?.scrollIntoView({ block: "nearest" });
 	}, "CommandPalette_component_useVisibleTask_1_fkiiKqJKwhQ", [activeIndex]));
 	const activate = /*#__PURE__*/ inlinedQrl((result) => {
-		const _rawProps = _captures[0], recentIds = _captures[1], runAction = _captures[2];
+		let _rawProps = _capturesObj._[0], recentIds = _capturesObj._[1], runAction = _capturesObj._[2];
 		const target = result.target;
 		if (target.kind === "action" && target.action === "clearRecents") {
 			runAction("clearRecents");
@@ -98,7 +98,7 @@ var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 		_rawProps,
 		recentIds,
 		/* @__PURE__ */ inlinedQrl((action) => {
-			const _rawProps = _captures[0], recentIds = _captures[1];
+			let _rawProps = _capturesObj._[0], recentIds = _capturesObj._[1];
 			switch (action) {
 				case "toggleTheme":
 					cycleTheme();
@@ -118,17 +118,17 @@ var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 	]);
 	let optionIndex = 0;
 	const CommandPalette_component_div_div_ul_li_ul_li_q_e_mouseenter_0qIEkwUcwUE = /*#__PURE__*/ inlinedQrl((_, _1, _2, index) => {
-		const activeIndex = _captures[0];
+		let activeIndex = _capturesObj._[0];
 		return activeIndex.value = index;
 	}, "CommandPalette_component_div_div_ul_li_ul_li_q_e_mouseenter_0qIEkwUcwUE", [activeIndex]).m();
 	const CommandPalette_component_div_div_ul_li_ul_li_q_e_click_jIvkGS4GrOM = /*#__PURE__*/ inlinedQrl((_, _1, result) => {
-		const activate = _captures[0];
+		let activate = _capturesObj._[0];
 		return activate(result);
 	}, "CommandPalette_component_div_div_ul_li_ul_li_q_e_click_jIvkGS4GrOM", [activate]).m();
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "absolute inset-0 z-30 flex items-start justify-center p-4" }, [/*#__PURE__*/ _jsxSorted("div", null, {
 		class: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity",
 		"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
-			const _rawProps = _captures[0];
+			let _rawProps = _capturesObj._[0];
 			return _rawProps.state.isPaletteOpen = false;
 		}, "CommandPalette_component_div_div_q_e_click_AC38AwghEZY", [_rawProps])
 	}, null, 3, null), /*#__PURE__*/ _jsxSorted("div", { "q-e:keydown": [_qrlSync((event) => {
@@ -139,7 +139,7 @@ var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 			"Tab"
 		].includes(event.key)) event.preventDefault();
 	}, "event=>{if([ \"ArrowDown\",\"ArrowUp\",\"Enter\",\"Tab\" ].includes(event.key)){event.preventDefault();}}"), /*#__PURE__*/ inlinedQrl((event) => {
-		const _rawProps = _captures[0], activate = _captures[1], activeIndex = _captures[2], flatResults = _captures[3], inputRef = _captures[4];
+		let _rawProps = _capturesObj._[0], activate = _capturesObj._[1], activeIndex = _capturesObj._[2], flatResults = _capturesObj._[3], inputRef = _capturesObj._[4];
 		const count = flatResults.value.length;
 		if (event.key === "ArrowDown") activeIndex.value = count === 0 ? -1 : activeIndex.value < 0 ? 0 : (activeIndex.value + 1) % count;
 		else if (event.key === "ArrowUp") activeIndex.value = count === 0 ? -1 : activeIndex.value < 0 ? count - 1 : (activeIndex.value - 1 + count) % count;
@@ -172,7 +172,7 @@ var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 			class: "text-foreground placeholder:text-muted-foreground/70 w-full bg-transparent text-sm outline-none",
 			value: _wrapProp(query),
 			"q-e:input": /*#__PURE__*/ inlinedQrl((_, el) => {
-				const activeIndex = _captures[0], query = _captures[1];
+				let activeIndex = _capturesObj._[0], query = _capturesObj._[1];
 				query.value = el.value;
 				activeIndex.value = el.value.trim() ? 0 : -1;
 			}, "CommandPalette_component_div_div_div_input_q_e_input_j9vHtbrHP4c", [activeIndex, query])