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

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

@@ -1,23 +1,34 @@
 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";
 var _hf1 = (p0, p1) => p0 ? {
 	boxShadow: "inset 2px 0 0 0 var(--color-primary)",
 	paddingLeft: `${p1.level * p1.gap}px`
 } : { paddingLeft: `${p1.level * p1.gap}px` };
+var _hf1_str = "p0?{boxShadow:\"inset 2px 0 0 0 var(--color-primary)\",paddingLeft:`${p1.level * p1.gap}px`}:{paddingLeft:`${p1.level * p1.gap}px`}";
 var _hf2 = (p0) => p0.node.id;
+var _hf2_str = "p0.node.id";
 var _hf3 = (p0) => p0.node.name || p0.node.label || "";
+var _hf3_str = "p0.node.name||p0.node.label||\"\"";
 var _hf4 = (p0) => p0.node.label || p0.node.name;
+var _hf4_str = "p0.node.label||p0.node.name";
 var _hf5 = (p0) => p0.isHover !== false;
+var _hf5_str = "p0.isHover!==false";
 var _hf6 = (p0) => p0.gap ?? 20;
+var _hf6_str = "p0.gap??20";
 var _hf7 = (p0) => p0.expandLevel ?? 2;
+var _hf7_str = "p0.expandLevel??2";
 var _hf8 = (p0) => p0.animate ?? true;
-/** Prop keys that should be rendered next to the element name in the tree. */ var DISPLAY_PROPS = ["q:id", "q:key"];
+var _hf8_str = "p0.animate??true";
+/** Prop keys that should be rendered next to the element name in the tree. */
+var DISPLAY_PROPS = ["q:id", "q:key"];
 /**
 * Build a compact attribute string from a node's props. Only displays the keys listed in
 * `DISPLAY_PROPS`.
-*/ function formatDisplayProps(props) {
+*/
+function formatDisplayProps(props) {
 	let result = "";
 	for (const key of DISPLAY_PROPS) {
 		const value = props[key];
@@ -25,7 +36,8 @@ var _hf8 = (p0) => p0.animate ?? true;
 	}
 	return result;
 }
-/** Collects the ids from the root down to the first node whose name or label matches. */ function findIdPathByName(nodes, name) {
+/** Collects the ids from the root down to the first node whose name or label matches. */
+function findIdPathByName(nodes, name) {
 	for (const node of nodes) {
 		if (node.name === name || node.label === name) return [node.id];
 		const childPath = node.children?.length ? findIdPathByName(node.children, name) : null;
@@ -38,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", [
@@ -53,7 +65,7 @@ var TreeNodeComponent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((pro
 		isHover: _wrapProp(props, "isHover"),
 		gap: _wrapProp(props, "gap"),
 		expandLevel: _wrapProp(props, "expandLevel"),
-		level: _fnSignal(_hf0, [props]),
+		level: _fnSignal(_hf0, [props], _hf0_str),
 		activeNodeId: _wrapProp(props, "activeNodeId"),
 		expanded: _wrapProp(props, "expanded"),
 		onToggle: _wrapProp(props, "onToggle"),
@@ -64,25 +76,25 @@ var TreeNodeComponent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((pro
 	}, null, 3, child.id));
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "w-full" }, [/*#__PURE__*/ _jsxSorted("div", {
 		class: ["flex w-full cursor-pointer items-center rounded-lg px-1 py-0.5 transition-colors duration-150", isActive ? "bg-primary/10 text-primary" : "hover:bg-card-item-hover-bg"],
-		"data-node-id": _fnSignal(_hf2, [props]),
-		"data-node-name": _fnSignal(_hf3, [props]),
-		style: _fnSignal(_hf1, [isActive, props])
-	}, { "q-e:click": handleNodeClick }, /*#__PURE__*/ _jsxSorted("div", null, { class: "inline-flex items-center px-2 py-1" }, [hasChildren ? /*#__PURE__*/ _jsxSorted(IconChevronUpMini, { class: `text-muted-foreground mr-2 h-4 w-4 shrink-0 transition-transform duration-200 ${childrenVisible ? "rotate-180" : "rotate-90"}` }, null, null, 3, "gW_0") : /*#__PURE__*/ _jsxSorted("div", null, { class: "mr-2 w-4 shrink-0" }, null, 3, "gW_1"), /*#__PURE__*/ _jsxSorted("div", null, { class: "cursor-pointer font-mono text-sm whitespace-nowrap" }, props.renderNode ? /*#__PURE__*/ _jsxSorted(Fragment, null, null, props.renderNode(props.node), 1, "gW_2") : /*#__PURE__*/ _jsxSorted(Fragment, null, null, [
+		"data-node-id": _fnSignal(_hf2, [props], _hf2_str),
+		"data-node-name": _fnSignal(_hf3, [props], _hf3_str),
+		style: _fnSignal(_hf1, [isActive, props], _hf1_str)
+	}, { "q-e:click": handleNodeClick }, /*#__PURE__*/ _jsxSorted("div", null, { class: "inline-flex items-center px-2 py-1" }, [hasChildren ? /*#__PURE__*/ _jsxSorted(IconChevronUpMini, { class: `text-muted-foreground mr-2 h-4 w-4 shrink-0 transition-transform duration-200 ${childrenVisible ? "rotate-180" : "rotate-90"}` }, null, null, 3, "aD_0") : /*#__PURE__*/ _jsxSorted("div", null, { class: "mr-2 w-4 shrink-0" }, null, 3, "aD_1"), /*#__PURE__*/ _jsxSorted("div", null, { class: "cursor-pointer font-mono text-sm whitespace-nowrap" }, props.renderNode ? /*#__PURE__*/ _jsxSorted(Fragment, null, null, props.renderNode(props.node), 1, "aD_2") : /*#__PURE__*/ _jsxSorted(Fragment, null, null, [
 		/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground/50" }, "<", 3, null),
-		/*#__PURE__*/ _jsxSorted("span", null, { class: "text-primary/80" }, _fnSignal(_hf4, [props]), 1, null),
+		/*#__PURE__*/ _jsxSorted("span", null, { class: "text-primary/80" }, _fnSignal(_hf4, [props], _hf4_str), 1, null),
 		/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, [` ${formatDisplayProps(props.node.props ?? {})}`, ">"], 1, null)
-	], 1, "gW_3"), 1, null)], 1, null), 1, null), hasChildren && (props.animate ? /*#__PURE__*/ _jsxSorted("div", { style: {
+	], 1, "aD_3"), 1, null)], 1, null), 1, null), hasChildren && (props.animate ? /*#__PURE__*/ _jsxSorted("div", { style: {
 		maxHeight: showChildren ? "1000px" : "0px",
 		opacity: showChildren ? "1" : "0",
 		transition: `max-height ${duration}ms ease-in-out, opacity ${duration}ms ease-in-out`
-	} }, { class: "overflow-hidden" }, renderChildren, 1, "gW_4") : showChildren && /*#__PURE__*/ _jsxSorted(Fragment, null, null, renderChildren, 1, "gW_5"))], 1, "gW_6");
+	} }, { class: "overflow-hidden" }, renderChildren, 1, "aD_4") : showChildren && /*#__PURE__*/ _jsxSorted(Fragment, null, null, renderChildren, 1, "aD_5"))], 1, "aD_6");
 }, "TreeNodeComponent_component_uTw0NGLeAGw"));
 var Tree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
 	const ref = useSignal();
 	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);
@@ -92,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;
@@ -127,18 +139,23 @@ var Tree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
 		props,
 		ref
 	]));
-	return /*#__PURE__*/ _jsxSorted("div", { ref }, { class: "h-full w-full overflow-x-auto overflow-y-auto" }, props.data.value.map((rootNode) => /*#__PURE__*/ _jsxSorted(TreeNodeComponent, { node: rootNode }, {
-		isHover: _fnSignal(_hf5, [props]),
-		gap: _fnSignal(_hf6, [props]),
+	return /*#__PURE__*/ _jsxSorted("div", null, {
+		class: "h-full w-full overflow-x-auto overflow-y-auto",
+		ref
+	}, props.data.value.map((rootNode) => /*#__PURE__*/ _jsxSorted(TreeNodeComponent, {
+		animate: _fnSignal(_hf8, [props], _hf8_str),
+		expandLevel: _fnSignal(_hf7, [props], _hf7_str),
+		gap: _fnSignal(_hf6, [props], _hf6_str),
+		isHover: _fnSignal(_hf5, [props], _hf5_str),
+		node: rootNode,
+		onNodeClick: setActiveNode,
+		onToggle: toggleNode
+	}, {
 		level: 0,
-		expandLevel: _fnSignal(_hf7, [props]),
 		activeNodeId: _wrapProp(activeNodeId),
 		expanded: _wrapProp(expanded),
-		onToggle: toggleNode,
-		onNodeClick: setActiveNode,
 		renderNode: _wrapProp(props, "renderNode"),
-		animate: _fnSignal(_hf8, [props]),
 		animationDuration: _wrapProp(props, "animationDuration")
-	}, null, 3, rootNode.id)), 1, "gW_7");
+	}, null, 3, rootNode.id)), 1, "aD_7");
 }, "Tree_component_mMuREZC0V3M"));
 export { Tree };

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

@@ -1,8 +1,11 @@
 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];
+var _hf1_str = "p2.hint??p0[p1.category]";
 var CATEGORY_HINT = {
 	Tabs: "Tab",
 	Components: "Component",
@@ -18,22 +21,23 @@ function cycleTheme() {
 /**
 * Cmd/Ctrl+K overlay to jump across tabs, components, routes, and packages, plus common actions.
 * The empty state lists recent selections and actions; results are keyboard-navigable.
-*/ var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+*/
+var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	const query = useSignal("");
 	const activeIndex = useSignal(-1);
 	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 = [];
@@ -55,15 +59,15 @@ function cycleTheme() {
 		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");
@@ -94,7 +98,7 @@ function cycleTheme() {
 		_rawProps,
 		recentIds,
 		/* @__PURE__ */ inlinedQrl((action) => {
-			const _rawProps = _captures[0], recentIds = _captures[1];
+			let _rawProps = _capturesObj._[0], recentIds = _capturesObj._[1];
 			switch (action) {
 				case "toggleTheme":
 					cycleTheme();
@@ -113,18 +117,29 @@ function cycleTheme() {
 		}, "CommandPalette_component_runAction_x9wZJ0Hrfic", [_rawProps, recentIds])
 	]);
 	let optionIndex = 0;
-	return /*#__PURE__*/ _jsxSorted("div", null, { class: "absolute inset-0 z-30 flex items-start justify-center p-4" }, [/*#__PURE__*/ _jsxSorted("div", {
-		"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, _rawProps) => _rawProps.state.isPaletteOpen = false, "CommandPalette_component_div_div_q_e_click_AC38AwghEZY").m(),
-		"q:p": _rawProps
-	}, { class: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }, null, 6, null), /*#__PURE__*/ _jsxSorted("div", { "q-e:keydown": [_qrlSync((event) => {
+	const CommandPalette_component_div_div_ul_li_ul_li_q_e_mouseenter_0qIEkwUcwUE = /*#__PURE__*/ inlinedQrl((_, _1, _2, index) => {
+		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) => {
+		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(() => {
+			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) => {
 		if ([
 			"ArrowDown",
 			"ArrowUp",
 			"Enter",
 			"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];
+	}, "event=>{if([ \"ArrowDown\",\"ArrowUp\",\"Enter\",\"Tab\" ].includes(event.key)){event.preventDefault();}}"), /*#__PURE__*/ inlinedQrl((event) => {
+		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;
@@ -145,50 +160,49 @@ function cycleTheme() {
 		"aria-label": "Command palette",
 		class: "glass-panel relative z-10 flex max-h-full w-[32rem] max-w-full flex-col overflow-hidden rounded-2xl"
 	}, [
-		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex items-center gap-3 border-b px-4 py-3" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, /*#__PURE__*/ _jsxSorted(IconMagnifyingGlass, null, { class: "h-5 w-5" }, null, 3, "s1_0"), 1, null), /*#__PURE__*/ _jsxSorted("input", {
-			"q-e:input": /*#__PURE__*/ inlinedQrl((_, el, activeIndex, query) => {
-				query.value = el.value;
-				activeIndex.value = el.value.trim() ? 0 : -1;
-			}, "CommandPalette_component_div_div_div_input_q_e_input_j9vHtbrHP4c").m(),
-			"q:ps": [activeIndex, query],
-			ref: inputRef
-		}, {
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex items-center gap-3 border-b px-4 py-3" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, /*#__PURE__*/ _jsxSorted(IconMagnifyingGlass, null, { class: "h-5 w-5" }, null, 3, "BH_0"), 1, null), /*#__PURE__*/ _jsxSorted("input", null, {
+			ref: inputRef,
 			type: "text",
 			autoFocus: true,
 			role: "combobox",
 			"aria-expanded": "true",
 			"aria-controls": "palette-listbox",
-			"aria-activedescendant": _fnSignal(_hf0, [activeIndex]),
+			"aria-activedescendant": _fnSignal(_hf0, [activeIndex], _hf0_str),
 			placeholder: "Search tabs, components, routes, packages...",
 			class: "text-foreground placeholder:text-muted-foreground/70 w-full bg-transparent text-sm outline-none",
-			value: _wrapProp(query)
-		}, null, 6, null)], 1, null),
+			value: _wrapProp(query),
+			"q-e:input": /*#__PURE__*/ inlinedQrl((_, el) => {
+				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])
+		}, null, 3, null)], 1, null),
 		/*#__PURE__*/ _jsxSorted("ul", null, {
 			id: "palette-listbox",
 			role: "listbox",
 			"aria-label": "Results",
 			class: "custom-scrollbar max-h-80 overflow-y-auto p-2"
-		}, flatResults.value.length === 0 ? /*#__PURE__*/ _jsxSorted("li", null, { class: "text-muted-foreground px-2 py-6 text-center text-sm" }, "No results", 3, "s1_1") : groups.value.map((group) => /*#__PURE__*/ _jsxSorted("li", null, { role: "presentation" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground px-2 pb-1 pt-2 text-xs font-medium uppercase tracking-wide" }, _wrapProp(group, "category"), 1, null), /*#__PURE__*/ _jsxSorted("ul", null, { role: "presentation" }, group.results.map((result) => {
+		}, flatResults.value.length === 0 ? /*#__PURE__*/ _jsxSorted("li", null, { class: "text-muted-foreground px-2 py-6 text-center text-sm" }, "No results", 3, "BH_1") : groups.value.map((group) => /*#__PURE__*/ _jsxSorted("li", null, { role: "presentation" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground px-2 pb-1 pt-2 text-xs font-medium uppercase tracking-wide" }, _wrapProp(group, "category"), 1, null), /*#__PURE__*/ _jsxSorted("ul", null, { role: "presentation" }, group.results.map((result) => {
 			const index = optionIndex++;
 			const isActive = index === activeIndex.value;
-			const qrl_0 = /*#__PURE__*/ inlinedQrl((_, _1, _2, index) => {
-				const activeIndex = _captures[0];
-				return activeIndex.value = index;
-			}, "CommandPalette_component_div_div_ul_li_ul_li_q_e_mouseenter_0qIEkwUcwUE", [activeIndex]).m();
 			return /*#__PURE__*/ _jsxSorted("li", {
 				"aria-selected": isActive ? "true" : "false",
 				class: ["flex cursor-pointer items-center justify-between gap-3 rounded-lg px-2 py-1.5", isActive ? "bg-primary/15 text-primary" : "hover:bg-card-item-hover-bg"],
 				id: `palette-option-${index}`,
-				"q-e:click": qrl_0,
-				"q-e:mouseenter": qrl_0,
+				"q-e:click": CommandPalette_component_div_div_ul_li_ul_li_q_e_click_jIvkGS4GrOM,
+				"q-e:mouseenter": CommandPalette_component_div_div_ul_li_ul_li_q_e_mouseenter_0qIEkwUcwUE,
 				"q:ps": [result, index]
-			}, { role: "option" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground truncate text-sm" }, _wrapProp(result, "label"), 1, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground shrink-0 truncate text-xs" }, result.hint ?? CATEGORY_HINT[group.category], 1, null)], 4, result.id);
+			}, { role: "option" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground truncate text-sm" }, _wrapProp(result, "label"), 1, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground shrink-0 truncate text-xs" }, _fnSignal(_hf1, [
+				CATEGORY_HINT,
+				group,
+				result
+			], _hf1_str), 1, null)], 4, result.id);
 		}), 1, null)], 1, group.category)), 1, null),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border text-muted-foreground flex gap-4 border-t px-4 py-2 text-xs" }, [
 			/*#__PURE__*/ _jsxSorted("span", null, null, "↑↓ navigate", 3, null),
 			/*#__PURE__*/ _jsxSorted("span", null, null, "↵ select", 3, null),
 			/*#__PURE__*/ _jsxSorted("span", null, null, "esc close", 3, null)
 		], 3, null)
-	], 0, null)], 1, "s1_2");
+	], 0, null)], 1, "BH_2");
 }, "CommandPalette_component_0OIptX9h7QY"));
 export { CommandPalette };

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

@@ -1,11 +1,14 @@
 import { IconGripVertical, IconXMark } from "../components/Icons/Icons.qwik.mjs";
 import { IconButton } from "../components/IconButton/IconButton.qwik.mjs";
 import { getAvailableTabs, reorderVisibleTabs, resolveTabs, saveVisibleTabIds, setTabVisible } from "./sidebar-tabs.qwik.mjs";
-import { Slot, _captures, _fnSignal, _jsxSorted, _qrlSync, _wrapProp, componentQrl, inlinedQrl, useSignal } from "@qwik.dev/core";
+import { Slot, _capturesObj, _fnSignal, _jsxSorted, _qrlSync, _wrapProp, componentQrl, inlinedQrl, useSignal } from "@qwik.dev/core";
 var _hf0 = (p0) => ["transition-opacity", p0.dragging ? "opacity-40" : ""];
+var _hf0_str = "[\"transition-opacity\",p0.dragging?\"opacity-40\":\"\"]";
 var _hf1 = (p0, p1) => p0.value === p1;
-/** One selectable tab. The icon is passed as children so no non-serializable config crosses props. */ var TabRow = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => /*#__PURE__*/ _jsxSorted("li", {
-	class: _fnSignal(_hf0, [props]),
+var _hf1_str = "p0.value===p1";
+/** One selectable tab. The icon is passed as children so no non-serializable config crosses props. */
+var TabRow = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => /*#__PURE__*/ _jsxSorted("li", {
+	class: _fnSignal(_hf0, [props], _hf0_str),
 	draggable: _wrapProp(props, "draggable"),
 	"q-e:dragend": props.onDragEnd$,
 	"q-e:dragenter": props.onDragEnter$,
@@ -14,44 +17,48 @@ var _hf1 = (p0, p1) => p0.value === p1;
 	props.draggable && /*#__PURE__*/ _jsxSorted("span", null, {
 		class: "text-muted-foreground cursor-grab",
 		title: "Drag to reorder"
-	}, /*#__PURE__*/ _jsxSorted(IconGripVertical, null, { class: "h-4 w-4" }, null, 3, "Mh_0"), 1, "Mh_1"),
-	/*#__PURE__*/ _jsxSorted("input", {
-		checked: _wrapProp(props, "checked"),
-		"q-e:change": /*#__PURE__*/ inlinedQrl((_, el, props) => props.onToggle$(props.id, el.checked), "TabRow_component_li_label_input_q_e_change_34xiTR3EoWM").m(),
-		"q:p": props
-	}, {
+	}, /*#__PURE__*/ _jsxSorted(IconGripVertical, null, { class: "h-4 w-4" }, null, 3, "Ig_0"), 1, "Ig_1"),
+	/*#__PURE__*/ _jsxSorted("input", { checked: _wrapProp(props, "checked") }, {
 		type: "checkbox",
 		class: "h-3.5 w-3.5 rounded",
-		style: { accentColor: "var(--color-primary-active)" }
-	}, null, 6, null),
-	/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "Mh_2"), 1, null),
+		style: { accentColor: "var(--color-primary-active)" },
+		"q-e:change": /*#__PURE__*/ inlinedQrl((_, el) => {
+			let props = _capturesObj._[0];
+			return props.onToggle$(props.id, el.checked);
+		}, "TabRow_component_li_label_input_q_e_change_34xiTR3EoWM", [props])
+	}, null, 3, null),
+	/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "Ig_2"), 1, null),
 	/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground text-sm" }, _wrapProp(props, "title"), 1, null)
-], 1, null), 0, "Mh_3"), "TabRow_component_OkPaM0aSuSk"));
+], 1, null), 0, "Ig_3"), "TabRow_component_OkPaM0aSuSk"));
 /**
 * Overlay for choosing which tools appear in the sidebar and in what order. Edits stay pending
 * until "Apply", so closing or cancelling discards them. Relies on remounting when reopened to
 * reset the pending list.
-*/ var CustomizeTabsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+*/
+var CustomizeTabsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	const pendingVisibleIds = useSignal([..._rawProps.state.visibleTabIds]);
 	const draggingId = useSignal(null);
 	const visibleTabs = resolveTabs(pendingVisibleIds.value);
 	const availableTabs = getAvailableTabs(pendingVisibleIds.value);
 	const toggle$ = /*#__PURE__*/ inlinedQrl((id, checked) => {
-		const pendingVisibleIds = _captures[0];
+		let pendingVisibleIds = _capturesObj._[0];
 		pendingVisibleIds.value = setTabVisible(pendingVisibleIds.value, id, checked);
 	}, "CustomizeTabsPanel_component_toggle_7ito2DKngBw", [pendingVisibleIds]);
 	const endDrag$ = /*#__PURE__*/ inlinedQrl(() => {
-		const draggingId = _captures[0];
+		let draggingId = _capturesObj._[0];
 		return draggingId.value = null;
 	}, "CustomizeTabsPanel_component_endDrag_GuR2fyNtG9E", [draggingId]);
-	return /*#__PURE__*/ _jsxSorted("div", null, { class: "absolute inset-0 z-30 flex items-start justify-start p-4" }, [/*#__PURE__*/ _jsxSorted("div", {
-		"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, _rawProps) => _rawProps.state.isCustomizeOpen = false, "CustomizeTabsPanel_component_div_div_q_e_click_l3t3UrZvZ6Y").m(),
-		"q:p": _rawProps
-	}, { class: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }, null, 6, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "glass-panel relative z-10 flex max-h-full w-80 flex-col overflow-hidden rounded-2xl" }, [
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "absolute inset-0 z-30 flex items-start justify-start p-4" }, [/*#__PURE__*/ _jsxSorted("div", null, {
+		class: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity",
+		"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+			let _rawProps = _capturesObj._[0];
+			return _rawProps.state.isCustomizeOpen = false;
+		}, "CustomizeTabsPanel_component_div_div_q_e_click_l3t3UrZvZ6Y", [_rawProps])
+	}, null, 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "glass-panel relative z-10 flex max-h-full w-80 flex-col overflow-hidden rounded-2xl" }, [
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-start justify-between p-4 pb-3" }, [/*#__PURE__*/ _jsxSorted("div", null, null, [/*#__PURE__*/ _jsxSorted("h2", null, { class: "text-foreground text-base font-semibold" }, "Customize Tabs", 3, null), /*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground text-xs" }, "Choose which tools appear in the sidebar.", 3, null)], 3, null), /*#__PURE__*/ _jsxSorted(IconButton, { onClick$: /*#__PURE__*/ inlinedQrl(() => {
-			const _rawProps = _captures[0];
+			let _rawProps = _capturesObj._[0];
 			return _rawProps.state.isCustomizeOpen = false;
-		}, "CustomizeTabsPanel_component_div_div_div_IconButton_onClick_BD1Lcw5n01g", [_rawProps]) }, { title: "Close" }, /*#__PURE__*/ _jsxSorted(IconXMark, null, { class: "h-5 w-5" }, null, 3, "Mh_4"), 0, "Mh_5")], 1, null),
+		}, "CustomizeTabsPanel_component_div_div_div_IconButton_onClick_BD1Lcw5n01g", [_rawProps]) }, { title: "Close" }, /*#__PURE__*/ _jsxSorted(IconXMark, null, { class: "h-5 w-5" }, null, 3, "Ig_4"), 0, "Ig_5")], 1, null),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-3" }, [/*#__PURE__*/ _jsxSorted("section", {
 			"q-e:dragover": _qrlSync((event) => event.preventDefault(), "event=>event.preventDefault()"),
 			"q-e:drop": _qrlSync((event) => event.preventDefault(), "event=>event.preventDefault()")
@@ -64,10 +71,10 @@ var _hf1 = (p0, p1) => p0.value === p1;
 			/*#__PURE__*/ _jsxSorted("ul", null, { class: "mt-2 flex flex-col gap-1" }, visibleTabs.map((tab) => {
 				const id = tab.id;
 				return /*#__PURE__*/ _jsxSorted(TabRow, {
-					dragging: _fnSignal(_hf1, [draggingId, id]),
+					dragging: _fnSignal(_hf1, [draggingId, id], _hf1_str),
 					id,
 					onDragEnter$: /*#__PURE__*/ inlinedQrl(() => {
-						const draggingId = _captures[0], id = _captures[1], pendingVisibleIds = _captures[2];
+						let draggingId = _capturesObj._[0], id = _capturesObj._[1], pendingVisibleIds = _capturesObj._[2];
 						const dragged = draggingId.value;
 						if (dragged && dragged !== id) pendingVisibleIds.value = reorderVisibleTabs(pendingVisibleIds.value, dragged, id);
 					}, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragEnter_yYXv7uhV1nk", [
@@ -76,8 +83,8 @@ var _hf1 = (p0, p1) => p0.value === p1;
 						pendingVisibleIds
 					]),
 					onDragStart$: /*#__PURE__*/ inlinedQrl(() => {
-						const draggingId = _captures[0];
-						return draggingId.value = _captures[1];
+						let draggingId = _capturesObj._[0];
+						return draggingId.value = _capturesObj._[1];
 					}, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragStart_j7We62qpm2E", [draggingId, id]),
 					title: _wrapProp(tab, "title")
 				}, {
@@ -98,17 +105,21 @@ var _hf1 = (p0, p1) => p0.value === p1;
 				onToggle$: toggle$
 			}, tab.renderIcon(), 1, tab.id)), 1, null)
 		], 1, null)], 1, null),
-		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex justify-end gap-2 border-t p-4" }, [/*#__PURE__*/ _jsxSorted("button", {
-			"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, _rawProps) => _rawProps.state.isCustomizeOpen = false, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_bKi0Y3F44SM").m(),
-			"q:p": _rawProps
-		}, { class: "text-muted-foreground hover:text-foreground rounded-lg px-4 py-1.5 text-sm font-medium transition-colors" }, "Cancel", 6, null), /*#__PURE__*/ _jsxSorted("button", {
-			"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, _rawProps, pendingVisibleIds) => {
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex justify-end gap-2 border-t p-4" }, [/*#__PURE__*/ _jsxSorted("button", null, {
+			class: "text-muted-foreground hover:text-foreground rounded-lg px-4 py-1.5 text-sm font-medium transition-colors",
+			"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+				let _rawProps = _capturesObj._[0];
+				return _rawProps.state.isCustomizeOpen = false;
+			}, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_bKi0Y3F44SM", [_rawProps])
+		}, "Cancel", 3, null), /*#__PURE__*/ _jsxSorted("button", null, {
+			class: "bg-primary rounded-lg px-4 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90",
+			"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+				let _rawProps = _capturesObj._[0], pendingVisibleIds = _capturesObj._[1];
 				_rawProps.state.visibleTabIds = [...pendingVisibleIds.value];
 				saveVisibleTabIds(pendingVisibleIds.value);
 				_rawProps.state.isCustomizeOpen = false;
-			}, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_1_QB9JB6Vwuyc").m(),
-			"q:ps": [_rawProps, pendingVisibleIds]
-		}, { class: "bg-primary rounded-lg px-4 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90" }, "Apply", 6, null)], 1, null)
-	], 1, null)], 1, "Mh_6");
+			}, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_1_QB9JB6Vwuyc", [_rawProps, pendingVisibleIds])
+		}, "Apply", 3, null)], 3, null)
+	], 1, null)], 1, "Ig_6");
 }, "CustomizeTabsPanel_component_sHmgDosprm8"));
 export { CustomizeTabsPanel };

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

@@ -12,8 +12,7 @@ import { Performance } from "../features/Performance/Performance.qwik.mjs";
 import { Preloads } from "../features/Preloads/Preloads.qwik.mjs";
 import { RenderTree } from "../features/RenderTree/RenderTree.qwik.mjs";
 import { Routes } from "../features/Routes/Routes.qwik.mjs";
-import { _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
-var _hf0 = (p0) => p0.state.isExtension ? "Component Tree" : "Render Tree";
+import { _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
 function formatAssetSummary(assets) {
 	const totalSizeInKb = assets.reduce((totalSize, asset) => totalSize + asset.size, 0) / 1024;
 	return {
@@ -23,7 +22,7 @@ function formatAssetSummary(assets) {
 }
 var ViteOnlyPlaceholder = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "flex h-full flex-col items-center justify-center gap-4 px-8 text-center" }, [
-		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground/40 text-4xl" }, /*#__PURE__*/ _jsxSorted(IconMonitor, null, { class: "h-12 w-12" }, null, 3, "lf_0"), 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground/40 text-4xl" }, /*#__PURE__*/ _jsxSorted(IconMonitor, null, { class: "h-12 w-12" }, null, 3, "L0_0"), 1, null),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "font-semibold" }, _wrapProp(_rawProps, "feature"), 1, null), " is only available in the in-app overlay."], 1, null),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground/50 max-w-xs text-xs leading-relaxed" }, [
 			"This feature requires direct access to the Vite dev server. Add",
@@ -32,85 +31,71 @@ var ViteOnlyPlaceholder = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_
 			" ",
 			"to your Vite config to use it in the overlay during development."
 		], 3, null)
-	], 1, "lf_1");
+	], 1, "L0_1");
 }, "ViteOnlyPlaceholder_component_AIuuVPTVfFw"));
-var DevtoolsContent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
-	const assetSummary = formatAssetSummary(_rawProps.state.assets);
-	switch (_rawProps.state.activeTab) {
-		case "overview": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted("div", { "q:slot": "title" }, { class: "flex items-center gap-3" }, [/*#__PURE__*/ _jsxSorted(QwikLogo, null, {
+var DevtoolsContent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(({ state }) => {
+	const isExtensionMode = state.isExtension;
+	const assetSummary = formatAssetSummary(state.assets);
+	switch (state.activeTab) {
+		case "overview": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted("div", null, {
+			class: "flex items-center gap-3",
+			"q:slot": "title"
+		}, [/*#__PURE__*/ _jsxSorted(QwikLogo, null, {
 			title: "Qwik Logo",
 			class: "h-8 w-8"
-		}, null, 3, "lf_2"), /*#__PURE__*/ _jsxSorted("h1", null, { class: "text-2xl font-semibold" }, "Qwik DevTools", 3, null)], 1, null), /*#__PURE__*/ _jsxSorted(Overview, null, {
-			state: _wrapProp(_rawProps, "state"),
-			"q:slot": "content"
-		}, null, 3, "lf_3")], 1, "lf_4");
+		}, null, 3, "L0_2"), /*#__PURE__*/ _jsxSorted("h1", null, { class: "text-2xl font-semibold" }, "Qwik DevTools", 3, null)], 1, null), /*#__PURE__*/ _jsxSorted(Overview, { state }, { "q:slot": "content" }, null, 3, "L0_3")], 1, "L0_4");
 		case "assets": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
 			title: "Public Assets",
 			"q:slot": "title"
-		}, null, 3, "lf_5"), _rawProps.state.isExtension ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+		}, null, 3, "L0_5"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
 			feature: "Assets",
 			"q:slot": "content"
-		}, null, 3, "lf_6") : /*#__PURE__*/ _jsxSorted("div", { "q:slot": "content" }, { class: "flex flex-col gap-4" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex gap-4 text-sm" }, [/*#__PURE__*/ _jsxSorted("span", null, null, [
+		}, null, 3, "L0_6") : /*#__PURE__*/ _jsxSorted("div", null, {
+			class: "flex flex-col gap-4",
+			"q:slot": "content"
+		}, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex gap-4 text-sm" }, [/*#__PURE__*/ _jsxSorted("span", null, null, [
 			"Total Size: ",
 			_wrapProp(assetSummary, "totalSizeInKb"),
 			" KB"
-		], 1, null), /*#__PURE__*/ _jsxSorted("span", null, null, ["Count: ", _wrapProp(assetSummary, "count")], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted(Assets, null, { state: _wrapProp(_rawProps, "state") }, null, 3, "lf_7")], 1, "lf_8")], 1, "lf_9");
+		], 1, null), /*#__PURE__*/ _jsxSorted("span", null, null, ["Count: ", _wrapProp(assetSummary, "count")], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted(Assets, { state }, null, null, 3, "L0_7")], 1, "L0_8")], 1, "L0_9");
 		case "packages": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
 			title: "Project Dependencies",
 			"q:slot": "title"
-		}, null, 3, "lf_10"), _rawProps.state.isExtension ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+		}, null, 3, "L0_10"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
 			feature: "Packages",
 			"q:slot": "content"
-		}, null, 3, "lf_11") : /*#__PURE__*/ _jsxSorted(Packages, null, {
-			state: _wrapProp(_rawProps, "state"),
-			"q:slot": "content"
-		}, null, 3, "lf_12")], 1, "lf_13");
+		}, null, 3, "L0_11") : /*#__PURE__*/ _jsxSorted(Packages, { state }, { "q:slot": "content" }, null, 3, "L0_12")], 1, "L0_13");
 		case "routes": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
 			title: "Application Routes",
 			"q:slot": "title"
-		}, null, 3, "lf_14"), _rawProps.state.isExtension ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+		}, null, 3, "L0_14"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
 			feature: "Routes",
 			"q:slot": "content"
-		}, null, 3, "lf_15") : /*#__PURE__*/ _jsxSorted(Routes, null, {
-			state: _wrapProp(_rawProps, "state"),
-			"q:slot": "content"
-		}, null, 3, "lf_16")], 1, "lf_17");
-		case "inspect": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, _rawProps.state.isExtension ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+		}, null, 3, "L0_15") : /*#__PURE__*/ _jsxSorted(Routes, { state }, { "q:slot": "content" }, null, 3, "L0_16")], 1, "L0_17");
+		case "inspect": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
 			feature: "Inspect",
 			"q:slot": "content"
-		}, null, 3, "lf_18") : /*#__PURE__*/ _jsxSorted(Inspect, null, { "q:slot": "content" }, null, 3, "lf_19"), 1, "lf_20");
-		case "renderTree": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
-			title: _fnSignal(_hf0, [_rawProps]),
-			"q:slot": "title"
-		}, null, 3, "lf_21"), _rawProps.state.isExtension ? /*#__PURE__*/ _jsxSorted(HookTree, null, {
-			state: _wrapProp(_rawProps, "state"),
-			"q:slot": "content"
-		}, null, 3, "lf_22") : /*#__PURE__*/ _jsxSorted(RenderTree, null, {
-			state: _wrapProp(_rawProps, "state"),
-			"q:slot": "content"
-		}, null, 3, "lf_23")], 1, "lf_24");
+		}, null, 3, "L0_18") : /*#__PURE__*/ _jsxSorted(Inspect, null, { "q:slot": "content" }, null, 3, "L0_19"), 1, "L0_20");
+		case "renderTree": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, { title: isExtensionMode ? "Component Tree" : "Render Tree" }, { "q:slot": "title" }, null, 3, "L0_21"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(HookTree, { state }, { "q:slot": "content" }, null, 3, "L0_22") : /*#__PURE__*/ _jsxSorted(RenderTree, { state }, { "q:slot": "content" }, null, 3, "L0_23")], 1, "L0_24");
 		case "codeBreak": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
 			title: "Code Break",
 			"q:slot": "title"
-		}, null, 3, "lf_25"), /*#__PURE__*/ _jsxSorted(CodeBreak, null, { "q:slot": "content" }, null, 3, "lf_26")], 1, "lf_27");
+		}, null, 3, "L0_25"), /*#__PURE__*/ _jsxSorted(CodeBreak, null, { "q:slot": "content" }, null, 3, "L0_26")], 1, "L0_27");
 		case "performance": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
 			title: "Performance",
 			"q:slot": "title"
-		}, null, 3, "lf_28"), /*#__PURE__*/ _jsxSorted(Performance, null, {
-			state: _wrapProp(_rawProps, "state"),
-			"q:slot": "content"
-		}, null, 3, "lf_29")], 1, "lf_30");
+		}, null, 3, "L0_28"), /*#__PURE__*/ _jsxSorted(Performance, { state }, { "q:slot": "content" }, null, 3, "L0_29")], 1, "L0_30");
 		case "preloads": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
 			title: "Preloads",
 			"q:slot": "title"
-		}, null, 3, "lf_31"), /*#__PURE__*/ _jsxSorted(Preloads, null, { "q:slot": "content" }, null, 3, "lf_32")], 1, "lf_33");
+		}, null, 3, "L0_31"), /*#__PURE__*/ _jsxSorted(Preloads, null, { "q:slot": "content" }, null, 3, "L0_32")], 1, "L0_33");
 		case "buildAnalysis": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
 			title: "Build Analysis",
 			"q:slot": "title"
-		}, null, 3, "lf_34"), _rawProps.state.isExtension ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+		}, null, 3, "L0_34"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
 			feature: "Build Analysis",
 			"q:slot": "content"
-		}, null, 3, "lf_35") : /*#__PURE__*/ _jsxSorted(BuildAnalysis, null, { "q:slot": "content" }, null, 3, "lf_36")], 1, "lf_37");
+		}, null, 3, "L0_35") : /*#__PURE__*/ _jsxSorted(BuildAnalysis, null, { "q:slot": "content" }, null, 3, "L0_36")], 1, "L0_37");
 		default: return null;
 	}
 }, "DevtoolsContent_component_38oZRY07A7Y"));