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

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

@@ -2,22 +2,33 @@ import { IconChevronUpMini } from "../Icons/Icons.qwik.mjs";
 import { _captures, _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;
@@ -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,18 +76,18 @@ 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();
@@ -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

@@ -3,6 +3,9 @@ import { getTheme, setTheme } from "../components/ThemeToggle/QwikThemeToggle.qw
 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";
 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,7 +21,8 @@ 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([]);
@@ -113,17 +117,28 @@ 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) => {
+		const activeIndex = _captures[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];
+		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];
+			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) => {
+	}, "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];
 		const count = flatResults.value.length;
 		if (event.key === "ArrowDown") activeIndex.value = count === 0 ? -1 : activeIndex.value < 0 ? 0 : (activeIndex.value + 1) % 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) => {
+				const activeIndex = _captures[0], query = _captures[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

@@ -3,9 +3,12 @@ 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";
 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,24 +17,25 @@ 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) => {
+			const props = _captures[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);
@@ -44,14 +48,17 @@ var _hf1 = (p0, p1) => p0.value === p1;
 		const draggingId = _captures[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(() => {
+			const _rawProps = _captures[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];
 			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,7 +71,7 @@ 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];
@@ -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(() => {
+				const _rawProps = _captures[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(() => {
+				const _rawProps = _captures[0], pendingVisibleIds = _captures[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"));

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

@@ -5,45 +5,51 @@ import { QwikThemeToggle } from "../components/ThemeToggle/QwikThemeToggle.qwik.
 import { Slot, _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal } from "@qwik.dev/core";
 import { Fragment } from "@qwik.dev/core/jsx-runtime";
 var _hf0 = (p0, p1) => p1.value || p0;
-/** A fixed bottom-action button matching the sidebar tab shell (Customize, More). */ var SidebarIconButton = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => /*#__PURE__*/ _jsxSorted("button", {
+var _hf0_str = "p1.value||p0";
+/** A fixed bottom-action button matching the sidebar tab shell (Customize, More). */
+var SidebarIconButton = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => /*#__PURE__*/ _jsxSorted("button", {
 	"aria-label": _wrapProp(_rawProps, "title"),
 	class: ["flex h-11 w-11 items-center justify-center rounded-xl transition-all", _rawProps.active ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"],
 	"q-e:click": _rawProps.onClick$,
 	title: _wrapProp(_rawProps, "title")
-}, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "Hx_0"), 0, "Hx_1"), "SidebarIconButton_component_aIUV3qUcOzY"));
+}, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "BY_0"), 0, "BY_1"), "SidebarIconButton_component_aIUV3qUcOzY"));
 var DevtoolsSidebar = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	const isMoreOpen = useSignal(false);
 	const moreTabs = getAvailableTabs(_rawProps.state.visibleTabIds);
 	const isMoreActive = moreTabs.some((tab) => tab.id === _rawProps.state.activeTab);
+	const DevtoolsSidebar_component_div_div_div_Fragment_div_button_q_e_click_UeLOkJekfd8 = /*#__PURE__*/ inlinedQrl((_, _1, id) => {
+		const _rawProps = _captures[0], isMoreOpen = _captures[1];
+		_rawProps.state.activeTab = id;
+		isMoreOpen.value = false;
+	}, "DevtoolsSidebar_component_div_div_div_Fragment_div_button_q_e_click_UeLOkJekfd8", [_rawProps, isMoreOpen]).m();
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "glass-bg border-glass-border shadow-r flex h-full w-16 flex-col items-center justify-start gap-3 border-r p-3 md:w-20" }, [getVisibleTabs(_rawProps.state.visibleTabIds, _rawProps.state.isExtension).map((tab) => /*#__PURE__*/ _jsxSorted(Tab, {
 		id: _wrapProp(tab, "id"),
 		title: _wrapProp(tab, "title")
 	}, { state: _wrapProp(_rawProps, "state") }, tab.renderIcon(), 1, tab.id)), /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-auto flex flex-col items-center gap-2" }, [
-		moreTabs.length > 0 && /*#__PURE__*/ _jsxSorted("div", null, { class: "relative" }, [/*#__PURE__*/ _jsxSorted(SidebarIconButton, { onClick$: /*#__PURE__*/ inlinedQrl(() => {
-			const isMoreOpen = _captures[0];
-			return isMoreOpen.value = !isMoreOpen.value;
-		}, "DevtoolsSidebar_component_div_div_div_SidebarIconButton_onClick_Ehnn3kErcX8", [isMoreOpen]) }, {
+		moreTabs.length > 0 && /*#__PURE__*/ _jsxSorted("div", null, { class: "relative" }, [/*#__PURE__*/ _jsxSorted(SidebarIconButton, { active: _fnSignal(_hf0, [isMoreActive, isMoreOpen], _hf0_str) }, {
 			title: "More tools",
-			active: _fnSignal(_hf0, [isMoreActive, isMoreOpen])
-		}, /*#__PURE__*/ _jsxSorted(IconEllipsisHorizontal, null, { class: "h-6 w-6" }, null, 3, "Hx_2"), 0, "Hx_3"), isMoreOpen.value && /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSorted("div", {
-			"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, isMoreOpen) => isMoreOpen.value = false, "DevtoolsSidebar_component_div_div_div_Fragment_div_q_e_click_90NEvxKYiKk").m(),
-			"q:p": isMoreOpen
-		}, { class: "fixed inset-0 z-20" }, null, 6, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "glass-panel absolute bottom-0 left-full z-30 ml-2 flex min-w-40 flex-col gap-1 rounded-xl p-2" }, moreTabs.map((tab) => {
+			onClick$: /*#__PURE__*/ inlinedQrl(() => {
+				const isMoreOpen = _captures[0];
+				return isMoreOpen.value = !isMoreOpen.value;
+			}, "DevtoolsSidebar_component_div_div_div_SidebarIconButton_onClick_Ehnn3kErcX8", [isMoreOpen])
+		}, /*#__PURE__*/ _jsxSorted(IconEllipsisHorizontal, null, { class: "h-6 w-6" }, null, 3, "BY_2"), 1, "BY_3"), isMoreOpen.value && /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSorted("div", null, {
+			class: "fixed inset-0 z-20",
+			"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+				const isMoreOpen = _captures[0];
+				return isMoreOpen.value = false;
+			}, "DevtoolsSidebar_component_div_div_div_Fragment_div_q_e_click_90NEvxKYiKk", [isMoreOpen])
+		}, null, 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "glass-panel absolute bottom-0 left-full z-30 ml-2 flex min-w-40 flex-col gap-1 rounded-xl p-2" }, moreTabs.map((tab) => {
 			const id = tab.id;
 			return /*#__PURE__*/ _jsxSorted("button", {
-				"q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, id) => {
-					const _rawProps = _captures[0], isMoreOpen = _captures[1];
-					_rawProps.state.activeTab = id;
-					isMoreOpen.value = false;
-				}, "DevtoolsSidebar_component_div_div_div_Fragment_div_button_q_e_click_UeLOkJekfd8", [_rawProps, isMoreOpen]).m(),
+				"q-e:click": DevtoolsSidebar_component_div_div_div_Fragment_div_button_q_e_click_UeLOkJekfd8,
 				"q:p": id
 			}, { class: "text-muted-foreground hover:bg-card-item-hover-bg hover:text-foreground flex items-center gap-3 rounded-lg px-2 py-1.5 text-left" }, [tab.renderIcon(), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground text-sm" }, _wrapProp(tab, "title"), 1, null)], 4, id);
-		}), 1, null)], 1, "Hx_4")], 1, "Hx_5"),
+		}), 1, null)], 1, "BY_4")], 1, "BY_5"),
 		!_rawProps.state.isExtension && /*#__PURE__*/ _jsxSorted(SidebarIconButton, { onClick$: /*#__PURE__*/ inlinedQrl(() => {
 			const _rawProps = _captures[0];
 			return _rawProps.state.isCustomizeOpen = true;
-		}, "DevtoolsSidebar_component_div_div_SidebarIconButton_onClick_h0rhNZi5Tq0", [_rawProps]) }, { title: "Customize Tabs" }, /*#__PURE__*/ _jsxSorted(IconAdjustmentsHorizontal, null, { class: "h-6 w-6" }, null, 3, "Hx_6"), 0, "Hx_7"),
-		/*#__PURE__*/ _jsxSorted("div", null, { class: "mb-2 opacity-80 transition-opacity hover:opacity-100" }, /*#__PURE__*/ _jsxSorted(QwikThemeToggle, null, null, null, 3, "Hx_8"), 1, null)
-	], 1, null)], 1, "Hx_9");
+		}, "DevtoolsSidebar_component_div_div_SidebarIconButton_onClick_h0rhNZi5Tq0", [_rawProps]) }, { title: "Customize Tabs" }, /*#__PURE__*/ _jsxSorted(IconAdjustmentsHorizontal, null, { class: "h-6 w-6" }, null, 3, "BY_6"), 0, "BY_7"),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "mb-2 opacity-80 transition-opacity hover:opacity-100" }, /*#__PURE__*/ _jsxSorted(QwikThemeToggle, null, null, null, 3, "BY_8"), 1, null)
+	], 1, null)], 1, "BY_9");
 }, "DevtoolsSidebar_component_5rrdRzaEaiE"));
 export { DevtoolsSidebar };

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

@@ -1,8 +1,8 @@
+/* empty css                  */
 import { DevtoolsButton } from "../components/DevtoolsButton/DevtoolsButton.qwik.mjs";
 import { DevtoolsContainer } from "../components/DevtoolsContainer/DevtoolsContainer.qwik.mjs";
 import { DevtoolsPanel } from "../components/DevtoolsPanel/DevtoolsPanel.qwik.mjs";
 import { ThemeScript } from "../components/ThemeToggle/theme-script.qwik.mjs";
-/* empty css                  */
 import { loadDevtoolsData } from "./rpc.qwik.mjs";
 import { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
 import { loadVisibleTabIds } from "./sidebar-tabs.qwik.mjs";
@@ -48,11 +48,11 @@ var QwikDevtools = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) =
 		window.addEventListener("keydown", handleShortcut);
 		cleanup(() => window.removeEventListener("keydown", handleShortcut));
 	}, "QwikDevtools_component_useVisibleTask_1_Q0Inlj2aFY8", [state]), { strategy: "document-ready" });
-	if (!shouldRender.value) return /*#__PURE__*/ _jsxSorted("span", null, { style: { display: "contents" } }, null, 3, "lm_0");
-	return /*#__PURE__*/ _jsxSorted("div", null, { class: "qwik-devtools" }, [/*#__PURE__*/ _jsxSorted(ThemeScript, null, null, null, 3, "lm_1"), /*#__PURE__*/ _jsxSorted(DevtoolsContainer, null, null, [/*#__PURE__*/ _jsxSorted(DevtoolsButton, null, { state }, null, 3, "lm_2"), state.isOpen && /*#__PURE__*/ _jsxSorted(DevtoolsPanel, null, { state }, [/*#__PURE__*/ _jsxSorted(DevtoolsSidebar, null, { state }, null, 3, "lm_3"), /*#__PURE__*/ _jsxSorted("div", null, { class: "relative min-h-0 flex-1" }, [
-		/*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar h-full overflow-y-auto p-4" }, /*#__PURE__*/ _jsxSorted(DevtoolsContent, null, { state }, null, 3, "lm_4"), 1, null),
-		!state.isExtension && state.isCustomizeOpen && /*#__PURE__*/ _jsxSorted(CustomizeTabsPanel, null, { state }, null, 3, "lm_5"),
-		state.isPaletteOpen && /*#__PURE__*/ _jsxSorted(CommandPalette, null, { state }, null, 3, "lm_6")
-	], 1, null)], 1, "lm_7")], 1, "lm_8")], 1, "lm_9");
+	if (!shouldRender.value) return /*#__PURE__*/ _jsxSorted("span", null, { style: { display: "contents" } }, null, 3, "xj_0");
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "qwik-devtools" }, [/*#__PURE__*/ _jsxSorted(ThemeScript, null, null, null, 3, "xj_1"), /*#__PURE__*/ _jsxSorted(DevtoolsContainer, null, null, [/*#__PURE__*/ _jsxSorted(DevtoolsButton, null, { state }, null, 3, "xj_2"), state.isOpen && /*#__PURE__*/ _jsxSorted(DevtoolsPanel, null, { state }, [/*#__PURE__*/ _jsxSorted(DevtoolsSidebar, null, { state }, null, 3, "xj_3"), /*#__PURE__*/ _jsxSorted("div", null, { class: "relative min-h-0 flex-1" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar h-full overflow-y-auto p-4" }, /*#__PURE__*/ _jsxSorted(DevtoolsContent, null, { state }, null, 3, "xj_4"), 1, null),
+		!state.isExtension && state.isCustomizeOpen && /*#__PURE__*/ _jsxSorted(CustomizeTabsPanel, null, { state }, null, 3, "xj_5"),
+		state.isPaletteOpen && /*#__PURE__*/ _jsxSorted(CommandPalette, null, { state }, null, 3, "xj_6")
+	], 1, null)], 1, "xj_7")], 1, "xj_8")], 1, "xj_9");
 }, "QwikDevtools_component_Jxy3rMAzQPw"));
 export { QwikDevtools };