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

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

@@ -0,0 +1,144 @@
+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 _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 _hf2 = (p0) => p0.node.id;
+var _hf3 = (p0) => p0.node.name || p0.node.label || "";
+var _hf4 = (p0) => p0.node.label || p0.node.name;
+var _hf5 = (p0) => p0.isHover !== false;
+var _hf6 = (p0) => p0.gap ?? 20;
+var _hf7 = (p0) => 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"];
+/**
+* Build a compact attribute string from a node's props. Only displays the keys listed in
+* `DISPLAY_PROPS`.
+*/ function formatDisplayProps(props) {
+	let result = "";
+	for (const key of DISPLAY_PROPS) {
+		const value = props[key];
+		if (value != null) result += `${key}="${String(value)}" `;
+	}
+	return result;
+}
+/** 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;
+		if (childPath) return [node.id, ...childPath];
+	}
+	return null;
+}
+var TreeNodeComponent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	const hasChildren = (props.node.children?.length ?? 0) > 0;
+	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];
+		props.onNodeClick(props.node);
+		if (hasChildren) props.onToggle(props.node.id, childrenVisible);
+	}, "TreeNodeComponent_component_handleNodeClick_hFhWIIdgPGE", [
+		childrenVisible,
+		hasChildren,
+		props
+	]);
+	const isActive = props.isHover && props.node.id === props.activeNodeId;
+	const duration = props.animationDuration ?? 200;
+	const showChildren = hasChildren && childrenVisible;
+	const renderChildren = props.node.children?.map((child) => /*#__PURE__*/ _jsxSorted(TreeNodeComponent, { node: child }, {
+		isHover: _wrapProp(props, "isHover"),
+		gap: _wrapProp(props, "gap"),
+		expandLevel: _wrapProp(props, "expandLevel"),
+		level: _fnSignal(_hf0, [props]),
+		activeNodeId: _wrapProp(props, "activeNodeId"),
+		expanded: _wrapProp(props, "expanded"),
+		onToggle: _wrapProp(props, "onToggle"),
+		onNodeClick: _wrapProp(props, "onNodeClick"),
+		renderNode: _wrapProp(props, "renderNode"),
+		animate: _wrapProp(props, "animate"),
+		animationDuration: _wrapProp(props, "animationDuration")
+	}, 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, [
+		/*#__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-muted-foreground" }, [` ${formatDisplayProps(props.node.props ?? {})}`, ">"], 1, null)
+	], 1, "gW_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");
+}, "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];
+		if (ref.value) ref.value.scrollLeft = ref.value.scrollWidth;
+		activeNodeId.value = node.id;
+		props.onNodeClick?.(node);
+	}, "Tree_component_setActiveNode_sXOxeM0G0DU", [
+		activeNodeId,
+		props,
+		ref
+	]);
+	const toggleNode = /*#__PURE__*/ inlinedQrl((id, childrenVisible) => {
+		const expanded = _captures[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];
+		const name = track(() => props.revealNode?.value);
+		const nodes = track(() => props.data.value);
+		if (!name) return;
+		const path = findIdPathByName(nodes, name);
+		if (!path) return;
+		const nextExpanded = { ...expanded.value };
+		for (const id of path) nextExpanded[id] = true;
+		expanded.value = nextExpanded;
+		const targetId = path[path.length - 1];
+		activeNodeId.value = targetId;
+		const container = ref.value;
+		if (container) {
+			const scrollDelay = props.animate ?? true ? (props.animationDuration ?? 200) + 50 : 0;
+			setTimeout(() => {
+				container.querySelector(`[data-node-id="${targetId}"]`)?.scrollIntoView({
+					block: "center",
+					behavior: "smooth"
+				});
+			}, scrollDelay);
+		}
+		props.onRevealed$?.();
+	}, "Tree_component_useVisibleTask_Awi233OdHLg", [
+		activeNodeId,
+		expanded,
+		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]),
+		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");
+}, "Tree_component_mMuREZC0V3M"));
+export { Tree };

package/dist/ui/{components → packages/devtools/ui/src/components}/router-head/theme-script.qwik.mjs

@@ -1,4 +1,2 @@
-//#region src/components/router-head/theme-script.tsx
 var themeStorageKey = "vueuse-color-scheme";
-//#endregion
 export { themeStorageKey };

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

@@ -0,0 +1,194 @@
+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";
+var _hf0 = (p0) => p0.value >= 0 ? `palette-option-${p0.value}` : void 0;
+var CATEGORY_HINT = {
+	Tabs: "Tab",
+	Components: "Component",
+	Routes: "Route",
+	Packages: "Package",
+	Actions: "Action",
+	Recent: "Recent"
+};
+function cycleTheme() {
+	const current = getTheme();
+	setTheme(current === "dark" ? "light" : current === "light" ? "auto" : "dark");
+}
+/**
+* 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) => {
+	const query = useSignal("");
+	const activeIndex = useSignal(-1);
+	const recentIds = useSignal([]);
+	const inputRef = useSignal();
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const inputRef = _captures[0], recentIds = _captures[1];
+		recentIds.value = loadRecentIds();
+		inputRef.value?.focus();
+	}, "CommandPalette_component_useVisibleTask_35PZ2o0kMqE", [inputRef, recentIds]));
+	const searchable = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const _rawProps = _captures[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];
+		if (!query.value.trim()) {
+			const recents = resolveRecents(recentIds.value, _rawProps.state);
+			const emptyGroups = [];
+			if (recents.length > 0) emptyGroups.push({
+				category: "Recent",
+				results: recents
+			});
+			emptyGroups.push({
+				category: "Actions",
+				results: getActionResults(_rawProps.state)
+			});
+			return emptyGroups;
+		}
+		return groupResults(filterResults(searchable.value, query.value));
+	}, "CommandPalette_component_groups_useComputed_W1LVMagOt0o", [
+		_rawProps,
+		query,
+		recentIds,
+		searchable
+	]));
+	const flatResults = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		return _captures[0].value.flatMap((group) => group.results);
+	}, "CommandPalette_component_flatResults_useComputed_cCauVUcEhYk", [groups]));
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ track }) => {
+		const activeIndex = _captures[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];
+		const target = result.target;
+		if (target.kind === "action" && target.action === "clearRecents") {
+			runAction("clearRecents");
+			return;
+		}
+		if (!(target.kind === "action" && target.action === "customizeTabs")) _rawProps.state.isCustomizeOpen = false;
+		const nextRecents = addRecentId(recentIds.value, result.id);
+		recentIds.value = nextRecents;
+		saveRecentIds(nextRecents);
+		switch (target.kind) {
+			case "tab":
+				_rawProps.state.activeTab = target.tabId;
+				break;
+			case "route":
+				_rawProps.state.activeTab = "routes";
+				break;
+			case "package":
+				_rawProps.state.activeTab = "packages";
+				break;
+			case "component":
+				_rawProps.state.activeTab = "renderTree";
+				_rawProps.state.componentReveal = target.name;
+				break;
+			case "action": runAction(target.action);
+		}
+		_rawProps.state.isPaletteOpen = false;
+	}, "CommandPalette_component_activate_13BjyNN4Ia4", [
+		_rawProps,
+		recentIds,
+		/* @__PURE__ */ inlinedQrl((action) => {
+			const _rawProps = _captures[0], recentIds = _captures[1];
+			switch (action) {
+				case "toggleTheme":
+					cycleTheme();
+					break;
+				case "clearPerformance":
+					_rawProps.state.activeTab = "performance";
+					_rawProps.state.clearPerformanceRequested = true;
+					break;
+				case "customizeTabs":
+					_rawProps.state.isCustomizeOpen = true;
+					break;
+				case "clearRecents":
+					recentIds.value = [];
+					saveRecentIds([]);
+			}
+		}, "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) => {
+		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];
+		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;
+		else if (event.key === "Enter") {
+			const result = activeIndex.value >= 0 ? flatResults.value[activeIndex.value] : null;
+			if (result) activate(result);
+		} else if (event.key === "Escape") _rawProps.state.isPaletteOpen = false;
+		else if (event.key === "Tab") inputRef.value?.focus();
+	}, "CommandPalette_component_div_div_q_e_keydown_PM5c20jSiZ0", [
+		_rawProps,
+		activate,
+		activeIndex,
+		flatResults,
+		inputRef
+	])] }, {
+		role: "dialog",
+		"aria-modal": "true",
+		"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
+		}, {
+			type: "text",
+			autoFocus: true,
+			role: "combobox",
+			"aria-expanded": "true",
+			"aria-controls": "palette-listbox",
+			"aria-activedescendant": _fnSignal(_hf0, [activeIndex]),
+			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),
+		/*#__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) => {
+			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: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);
+		}), 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");
+}, "CommandPalette_component_0OIptX9h7QY"));
+export { CommandPalette };

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

@@ -0,0 +1,114 @@
+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";
+var _hf0 = (p0) => ["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]),
+	draggable: _wrapProp(props, "draggable"),
+	"q-e:dragend": props.onDragEnd$,
+	"q-e:dragenter": props.onDragEnter$,
+	"q-e:dragstart": props.onDragStart$
+}, null, /*#__PURE__*/ _jsxSorted("label", null, { class: "hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5" }, [
+	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
+	}, {
+		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),
+	/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground text-sm" }, _wrapProp(props, "title"), 1, null)
+], 1, null), 0, "Mh_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) => {
+	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];
+		pendingVisibleIds.value = setTabVisible(pendingVisibleIds.value, id, checked);
+	}, "CustomizeTabsPanel_component_toggle_7ito2DKngBw", [pendingVisibleIds]);
+	const endDrag$ = /*#__PURE__*/ inlinedQrl(() => {
+		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" }, [
+		/*#__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),
+		/*#__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()")
+		}, {
+			"preventdefault:dragover": true,
+			"preventdefault:drop": true
+		}, [
+			/*#__PURE__*/ _jsxSorted("h3", null, { class: "text-foreground text-sm font-medium" }, "Visible in Sidebar", 3, null),
+			/*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground text-xs" }, "Drag to reorder.", 3, null),
+			/*#__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]),
+					id,
+					onDragEnter$: /*#__PURE__*/ inlinedQrl(() => {
+						const draggingId = _captures[0], id = _captures[1], pendingVisibleIds = _captures[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", [
+						draggingId,
+						id,
+						pendingVisibleIds
+					]),
+					onDragStart$: /*#__PURE__*/ inlinedQrl(() => {
+						const draggingId = _captures[0];
+						return draggingId.value = _captures[1];
+					}, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragStart_j7We62qpm2E", [draggingId, id]),
+					title: _wrapProp(tab, "title")
+				}, {
+					checked: true,
+					onToggle$: toggle$,
+					draggable: true,
+					onDragEnd$: endDrag$
+				}, tab.renderIcon(), 0, id);
+			}), 1, null)
+		], 0, null), /*#__PURE__*/ _jsxSorted("section", null, null, [
+			/*#__PURE__*/ _jsxSorted("h3", null, { class: "text-foreground text-sm font-medium" }, "Available in More Panel", 3, null),
+			/*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground text-xs" }, "Add tools to access them from the More panel.", 3, null),
+			/*#__PURE__*/ _jsxSorted("ul", null, { class: "mt-2 flex flex-col gap-1" }, availableTabs.map((tab) => /*#__PURE__*/ _jsxSorted(TabRow, {
+				id: _wrapProp(tab, "id"),
+				title: _wrapProp(tab, "title")
+			}, {
+				checked: false,
+				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) => {
+				_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_sHmgDosprm8"));
+export { CustomizeTabsPanel };

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

@@ -0,0 +1,117 @@
+import { IconMonitor, QwikLogo } from "../components/Icons/Icons.qwik.mjs";
+import { TabContent } from "../components/TabContent/TabContent.qwik.mjs";
+import { TabTitle } from "../components/TabTitle/TabTitle.qwik.mjs";
+import { Assets } from "../features/Assets/Assets.qwik.mjs";
+import { BuildAnalysis } from "../features/BuildAnalysis/BuildAnalysis.qwik.mjs";
+import { CodeBreak } from "../features/CodeBreak/CodeBreak.qwik.mjs";
+import { HookTree } from "../features/HookTree/HookTree.qwik.mjs";
+import { Inspect } from "../features/Inspect/Inspect.qwik.mjs";
+import { Overview } from "../features/Overview/Overview.qwik.mjs";
+import { Packages } from "../features/Packages/Packages.qwik.mjs";
+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";
+function formatAssetSummary(assets) {
+	const totalSizeInKb = assets.reduce((totalSize, asset) => totalSize + asset.size, 0) / 1024;
+	return {
+		count: assets.length,
+		totalSizeInKb: totalSizeInKb.toFixed(2)
+	};
+}
+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 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",
+			" ",
+			/*#__PURE__*/ _jsxSorted("code", null, { class: "bg-card-item-bg text-foreground/70 rounded px-1.5 py-0.5" }, "qwikDevtools()", 3, null),
+			" ",
+			"to your Vite config to use it in the overlay during development."
+		], 3, null)
+	], 1, "lf_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, {
+			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");
+		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, {
+			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, [
+			"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");
+		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, {
+			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");
+		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, {
+			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, {
+			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");
+		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");
+		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");
+		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");
+		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, {
+			feature: "Build Analysis",
+			"q:slot": "content"
+		}, null, 3, "lf_35") : /*#__PURE__*/ _jsxSorted(BuildAnalysis, null, { "q:slot": "content" }, null, 3, "lf_36")], 1, "lf_37");
+		default: return null;
+	}
+}, "DevtoolsContent_component_38oZRY07A7Y"));
+export { DevtoolsContent };

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

@@ -0,0 +1,49 @@
+import { IconAdjustmentsHorizontal, IconEllipsisHorizontal } from "../components/Icons/Icons.qwik.mjs";
+import { getAvailableTabs, getVisibleTabs } from "./sidebar-tabs.qwik.mjs";
+import { Tab } from "../components/Tab/Tab.qwik.mjs";
+import { QwikThemeToggle } from "../components/ThemeToggle/QwikThemeToggle.qwik.mjs";
+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", {
+	"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"));
+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);
+	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]) }, {
+			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) => {
+			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: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"),
+		!_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_5rrdRzaEaiE"));
+export { DevtoolsSidebar };