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

package/dist/ui/packages/devtools/ui/src/features/Preloads/computePreloadViewModel.qwik.mjs

@@ -0,0 +1,140 @@
+var DEFAULT_SOURCE_FILTERS = {
+	vitePluginInjected: false,
+	nodeModules: false,
+	virtualModule: false,
+	generated: false,
+	external: false,
+	unknown: false
+};
+var DEFAULT_PHASE_FILTERS = {
+	csr: true,
+	ssr: true
+};
+function createDefaultPreloadFilters() {
+	return {
+		sourceFilters: { ...DEFAULT_SOURCE_FILTERS },
+		phaseFilters: { ...DEFAULT_PHASE_FILTERS }
+	};
+}
+function summarizeHref(href) {
+	try {
+		const url = new URL(href);
+		return `${url.pathname}${url.search}${url.hash}`;
+	} catch {
+		return href;
+	}
+}
+function latestTimestamp(entry) {
+	return entry.completedAt ?? entry.requestedAt ?? entry.discoveredAt;
+}
+function averageBy(entries, field) {
+	const timed = entries.filter((entry) => typeof entry[field] === "number");
+	if (timed.length === 0) return 0;
+	return timed.reduce((sum, entry) => sum + (entry[field] || 0), 0) / timed.length;
+}
+function buildRow(entry) {
+	return {
+		id: entry.id,
+		href: entry.href,
+		shortHref: summarizeHref(entry.href),
+		rel: entry.rel,
+		as: entry.as,
+		resourceType: entry.resourceType,
+		status: entry.status,
+		source: entry.source,
+		originKind: entry.originKind,
+		phase: entry.phase,
+		importDuration: entry.importDuration ?? entry.duration,
+		loadDuration: entry.loadDuration ?? entry.qrlToLoadDuration,
+		qrlRequestedAt: entry.qrlRequestedAt,
+		loadMatchQuality: entry.loadMatchQuality || "none",
+		matchedBy: entry.matchedBy,
+		qrlSymbol: entry.qrlSymbol,
+		latestAt: latestTimestamp(entry)
+	};
+}
+function matchesOrigin(row, filters) {
+	if (row.originKind === "current-project") return true;
+	switch (row.originKind) {
+		case "vite-plugin-injected": return filters.vitePluginInjected;
+		case "node_modules": return filters.nodeModules;
+		case "virtual-module": return filters.virtualModule;
+		case "generated": return filters.generated;
+		case "external": return filters.external;
+		case "unknown": return filters.unknown;
+		default: return false;
+	}
+}
+function matchesPhase(row, filters) {
+	if (row.phase === "unknown") return false;
+	return filters[row.phase];
+}
+function filterPreloadRows(rows, filter) {
+	switch (filter) {
+		case "loaded":
+		case "pending":
+		case "error": return rows.filter((row) => row.status === filter);
+		case "qrl-correlated": return rows.filter((row) => typeof row.qrlRequestedAt === "number");
+		case "unmatched": return rows.filter((row) => typeof row.qrlRequestedAt !== "number");
+		default: return rows;
+	}
+}
+function computePreloadViewModel(store, filters = createDefaultPreloadFilters()) {
+	const entries = store?.entries ?? [];
+	const rows = entries.map(buildRow);
+	const sourceCounts = {
+		"current-project": 0,
+		"vite-plugin-injected": 0,
+		node_modules: 0,
+		"virtual-module": 0,
+		generated: 0,
+		external: 0,
+		unknown: 0
+	};
+	const phaseCounts = {
+		csr: 0,
+		ssr: 0,
+		unknown: 0
+	};
+	for (const row of rows) {
+		sourceCounts[row.originKind] += 1;
+		phaseCounts[row.phase] += 1;
+	}
+	const visibleRows = rows.filter((row) => matchesOrigin(row, filters.sourceFilters)).filter((row) => matchesPhase(row, filters.phaseFilters)).sort((a, b) => b.latestAt - a.latestAt);
+	const visibleEntries = entries.filter((entry) => {
+		const origin = entry.originKind;
+		if (origin === "current-project") return true;
+		const sourceFilters = filters.sourceFilters;
+		switch (origin) {
+			case "vite-plugin-injected": return sourceFilters.vitePluginInjected;
+			case "node_modules": return sourceFilters.nodeModules;
+			case "virtual-module": return sourceFilters.virtualModule;
+			case "generated": return sourceFilters.generated;
+			case "external": return sourceFilters.external;
+			case "unknown": return sourceFilters.unknown;
+			default: return false;
+		}
+	}).filter((entry) => {
+		if (entry.phase === "unknown") return false;
+		return filters.phaseFilters[entry.phase];
+	});
+	return {
+		overview: {
+			total: visibleEntries.length,
+			loaded: visibleEntries.filter((entry) => entry.status === "loaded").length,
+			pending: visibleEntries.filter((entry) => entry.status === "pending").length,
+			error: visibleEntries.filter((entry) => entry.status === "error").length,
+			correlated: visibleEntries.filter((entry) => typeof entry.qrlRequestedAt === "number").length,
+			ssr: visibleEntries.filter((entry) => entry.phase === "ssr").length,
+			csr: visibleEntries.filter((entry) => entry.phase === "csr").length,
+			avgImportDuration: averageBy(visibleEntries, "importDuration"),
+			maxImportDuration: visibleEntries.reduce((max, entry) => Math.max(max, entry.importDuration ?? entry.duration ?? 0), 0),
+			avgLoadDuration: averageBy(visibleEntries, "loadDuration"),
+			maxLoadDuration: visibleEntries.reduce((max, entry) => Math.max(max, entry.loadDuration ?? entry.qrlToLoadDuration ?? 0), 0)
+		},
+		rows: visibleRows,
+		sourceCounts,
+		phaseCounts
+	};
+}
+export { computePreloadViewModel, createDefaultPreloadFilters, filterPreloadRows, summarizeHref };

package/dist/ui/packages/devtools/ui/src/features/RenderTree/RenderTree.qwik.mjs

@@ -0,0 +1,200 @@
+import { __toESM } from "../../../../../../_virtual/_rolldown/runtime.qwik.mjs";
+import { require_browser } from "../../../../../../node_modules/.pnpm/debug@4.4.3_supports-color@10.2.2/node_modules/debug/src/browser.qwik.mjs";
+import { getHighlighter } from "../../utils/shiki.qwik.mjs";
+import { Tree } from "../../components/Tree/Tree.qwik.mjs";
+import { getPageDataSource } from "../../devtools/page-data-source.qwik.mjs";
+import { buildDetailTree, toTreeNodes, treeIdFingerprint } from "../HookTree/hookTreeHelpers.qwik.mjs";
+import { RenderTreeTabs } from "./components/RenderTreeTabs.qwik.mjs";
+import { StateTreeNodeLabel } from "./components/StateTreeNodeLabel.qwik.mjs";
+import { HookFiltersCard } from "./components/HookFiltersCard.qwik.mjs";
+import { HighlightedCodeList } from "./components/HighlightedCodeList.qwik.mjs";
+import { getCodeLanguage } from "./utils/getCodeLanguage.qwik.mjs";
+import { Resource, _captures, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useResourceQrl, useSignal, useStylesQrl, useVisibleTaskQrl } from "@qwik.dev/core";
+import { getViteClientRpc } from "@qwik.dev/devtools/kit";
+var log = (0, (/* @__PURE__ */ __toESM(require_browser(), 1)).default)("qwik:devtools:renderTree");
+var LOAD_RETRY_DELAY_MS = 300;
+function applyHookFilters(tree, filters) {
+	if (filters.length === 0) return tree;
+	return tree.filter((node) => filters.some((filter) => filter.key === (node.label || node.name) && filter.display));
+}
+var RenderTree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	useStylesQrl(/*#__PURE__*/ inlinedQrl(`
+    pre.shiki {
+      overflow: auto;
+      padding: 10px;
+    }
+  `, "RenderTree_component_useStyles_AWhkWvC33YA"));
+	const revealNode = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		return _captures[0].state.componentReveal;
+	}, "RenderTree_component_revealNode_useComputed_kosn0Rf4154", [_rawProps]));
+	const codes = useSignal([]);
+	const data = useSignal([]);
+	const lastTreeIds = useSignal("");
+	const stateTree = useSignal([]);
+	const fullStateTree = useSignal([]);
+	const hookFilters = useSignal([]);
+	const hooksOpen = useSignal(true);
+	const highlightedCodesResource = useResourceQrl(/*#__PURE__*/ inlinedQrl(async (_rawProps) => {
+		const codes = _captures[0];
+		_rawProps.track(() => codes.value);
+		if (!codes.value.length) return [];
+		const highlighter = await getHighlighter();
+		return codes.value.map((item) => {
+			return item?.modules?.code ? highlighter.codeToHtml(item.modules.code, {
+				lang: getCodeLanguage(item.pathId),
+				theme: "nord"
+			}) : "";
+		});
+	}, "RenderTree_component_highlightedCodesResource_useResource_hdA49UhUQ7M", [codes]));
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ cleanup }) => {
+		const data = _captures[0], lastTreeIds = _captures[1];
+		const source = getPageDataSource();
+		const syncTree = (tree) => {
+			if (!tree || tree.length === 0) return false;
+			const fp = treeIdFingerprint(tree);
+			if (fp !== lastTreeIds.value) {
+				lastTreeIds.value = fp;
+				data.value = toTreeNodes(tree);
+			}
+			return true;
+		};
+		const loadInitial = async (retries = 3) => {
+			const tree = await source.readVNodeTree();
+			if (!syncTree(tree) && retries > 0) window.setTimeout(() => loadInitial(retries - 1), LOAD_RETRY_DELAY_MS);
+		};
+		loadInitial();
+		const unsub = source.subscribeTreeUpdates((tree) => {
+			syncTree(tree);
+		});
+		cleanup(() => {
+			unsub?.();
+		});
+	}, "RenderTree_component_useVisibleTask_zrAfIjp4mH4", [data, lastTreeIds]));
+	const onNodeClick = /*#__PURE__*/ inlinedQrl(async (node) => {
+		const codes = _captures[0], fullStateTree = _captures[1], hookFilters = _captures[2], stateTree = _captures[3];
+		log(" current node clicked: %O", node);
+		const source = getPageDataSource();
+		const name = node.name || node.label || "";
+		const props = node.props;
+		const qrlChunk = props?.__qrlChunk;
+		const qrlPath = props?.__qrlPath;
+		if (!name) {
+			codes.value = [];
+			fullStateTree.value = [];
+			stateTree.value = [];
+			hookFilters.value = [];
+			return;
+		}
+		const [detail, vnodeProps] = await Promise.all([source.readComponentDetail(name, qrlChunk), source.readNodeProps(node.id)]);
+		const entries = detail ? [...detail] : [];
+		if (vnodeProps && Object.keys(vnodeProps).length > 0) entries.push({
+			hookType: "props",
+			variableName: "props",
+			data: vnodeProps
+		});
+		const full = buildDetailTree(entries);
+		fullStateTree.value = full;
+		hookFilters.value = full.map((item) => ({
+			key: item.label || item.name || "",
+			display: true
+		}));
+		stateTree.value = full;
+		codes.value = [];
+		if (qrlPath) {
+			const res = await getViteClientRpc()?.getModulesByPathIds([qrlPath]) ?? [];
+			log("getModulesByPathIds return: %O", res);
+			codes.value = res.filter((item) => item.modules);
+		}
+	}, "RenderTree_component_onNodeClick_iFUxWwAkzko", [
+		codes,
+		fullStateTree,
+		hookFilters,
+		stateTree
+	]);
+	const currentTab = useSignal("state");
+	const showStateTab = /*#__PURE__*/ inlinedQrl(() => {
+		const currentTab = _captures[0];
+		currentTab.value = "state";
+	}, "RenderTree_component_showStateTab_O4o7nNS0Yc4", [currentTab]);
+	const showCodeTab = /*#__PURE__*/ inlinedQrl(() => {
+		const currentTab = _captures[0];
+		currentTab.value = "code";
+	}, "RenderTree_component_showCodeTab_m6wrkPHXkYM", [currentTab]);
+	const refreshFilteredStateTree = /*#__PURE__*/ inlinedQrl(() => {
+		const fullStateTree = _captures[0], hookFilters = _captures[1], stateTree = _captures[2];
+		stateTree.value = applyHookFilters(fullStateTree.value, hookFilters.value);
+	}, "RenderTree_component_refreshFilteredStateTree_Ng6tq73zzek", [
+		fullStateTree,
+		hookFilters,
+		stateTree
+	]);
+	const handleSelectAll = /*#__PURE__*/ inlinedQrl(() => {
+		const hookFilters = _captures[0], refreshFilteredStateTree = _captures[1];
+		hookFilters.value = hookFilters.value.map((item) => ({
+			...item,
+			display: true
+		}));
+		refreshFilteredStateTree();
+	}, "RenderTree_component_handleSelectAll_yl6MuzcFZk0", [hookFilters, refreshFilteredStateTree]);
+	const handleClear = /*#__PURE__*/ inlinedQrl(() => {
+		const hookFilters = _captures[0], refreshFilteredStateTree = _captures[1];
+		hookFilters.value = hookFilters.value.map((item) => ({
+			...item,
+			display: false
+		}));
+		refreshFilteredStateTree();
+	}, "RenderTree_component_handleClear_0fY9KH70S2A", [hookFilters, refreshFilteredStateTree]);
+	const handleFilterChange = /*#__PURE__*/ inlinedQrl((index, checked) => {
+		const hookFilters = _captures[0], refreshFilteredStateTree = _captures[1];
+		hookFilters.value = hookFilters.value.map((item, itemIndex) => itemIndex === index ? {
+			...item,
+			display: checked
+		} : item);
+		refreshFilteredStateTree();
+	}, "RenderTree_component_handleFilterChange_4t8lpGTaUG0", [hookFilters, refreshFilteredStateTree]);
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg h-full w-full flex-1 overflow-hidden rounded-2xl border" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex h-full w-full" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, {
+			class: "custom-scrollbar w-1/2 overflow-hidden p-3",
+			style: { minWidth: "360px" }
+		}, /*#__PURE__*/ _jsxSorted(Tree, { onRevealed$: /*#__PURE__*/ inlinedQrl(() => {
+			const _rawProps = _captures[0];
+			return _rawProps.state.componentReveal = null;
+		}, "RenderTree_component_div_div_div_Tree_onRevealed_EevePL82QY4", [_rawProps]) }, {
+			data,
+			onNodeClick,
+			revealNode
+		}, null, 2, "0a_0"), 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border border-l" }, null, 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex h-full min-h-0 w-1/2 flex-col overflow-hidden p-4" }, [
+			/*#__PURE__*/ _jsxSorted(RenderTreeTabs, null, {
+				currentTab: _wrapProp(currentTab),
+				onStateClick$: showStateTab,
+				onCodeClick$: showCodeTab
+			}, null, 3, "0a_1"),
+			currentTab.value === "state" && /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-5 flex min-h-0 flex-1 flex-col" }, [/*#__PURE__*/ _jsxSorted(HookFiltersCard, { onToggleOpen$: /*#__PURE__*/ inlinedQrl(() => {
+				const hooksOpen = _captures[0];
+				return hooksOpen.value = !hooksOpen.value;
+			}, "RenderTree_component_div_div_div_div_HookFiltersCard_onToggleOpen_htBb6dFJgKk", [hooksOpen]) }, {
+				filters: _wrapProp(hookFilters),
+				isOpen: _wrapProp(hooksOpen),
+				onSelectAll$: handleSelectAll,
+				onClear$: handleClear,
+				onFilterChange$: handleFilterChange
+			}, null, 2, "0a_2"), /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-4 min-h-0 flex-1 overflow-y-auto p-2" }, /*#__PURE__*/ _jsxSorted(Tree, { renderNode: /*#__PURE__*/ inlinedQrl((node) => {
+				return /*#__PURE__*/ _jsxSorted(StateTreeNodeLabel, { node }, null, null, 3, "0a_3");
+			}, "RenderTree_component_div_div_div_div_div_Tree_renderNode_h2NF5iZQX8A") }, {
+				data: stateTree,
+				gap: 10,
+				animate: true,
+				animationDuration: 200,
+				isHover: true
+			}, null, 3, "0a_4"), 1, null)], 1, "0a_5"),
+			currentTab.value === "code" && /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg mt-4 min-h-0 flex-1 overflow-y-auto rounded-xl border p-2" }, /*#__PURE__*/ _jsxSorted(Resource, null, {
+				value: highlightedCodesResource,
+				onPending: () => /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground p-2 text-sm" }, "Loading code highlights…", 3, "0a_6"),
+				onResolved: (highlighted) => /*#__PURE__*/ _jsxSorted(HighlightedCodeList, { highlighted }, { codes: _wrapProp(codes) }, null, 3, "0a_7")
+			}, null, 3, "0a_8"), 1, "0a_9")
+		], 1, null)
+	], 1, null), 1, "0a_10");
+}, "RenderTree_component_Sf4kwEPC9Qg"));
+export { RenderTree };

package/dist/ui/packages/devtools/ui/src/features/RenderTree/components/HighlightedCodeList.qwik.mjs

@@ -0,0 +1,7 @@
+import { _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+var _hf0 = (p0, p1) => p0.highlighted[p1] || "";
+var HighlightedCodeList = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted(Fragment, null, null, _rawProps.codes.map((item, index) => /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg hover:bg-card-item-hover-bg mb-4 rounded-xl border p-4 transition-colors" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-primary mb-2 text-base font-semibold break-all" }, _wrapProp(item, "pathId"), 1, null), /*#__PURE__*/ _jsxSorted("pre", { dangerouslySetInnerHTML: _fnSignal(_hf0, [_rawProps, index]) }, { class: "overflow-hidden" }, null, 3, null)], 1, item.pathId)), 1, "XI_0");
+}, "HighlightedCodeList_component_R9Fi7pmo1qQ"));
+export { HighlightedCodeList };

package/dist/ui/packages/devtools/ui/src/features/RenderTree/components/HookFiltersCard.qwik.mjs

@@ -0,0 +1,33 @@
+import { IconChevronUpMini } from "../../../components/Icons/Icons.qwik.mjs";
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => ({
+	maxHeight: p0.isOpen ? "800px" : "0px",
+	opacity: p0.isOpen ? "1" : "0",
+	transition: "max-height 200ms ease, opacity 200ms ease"
+});
+var HookFiltersCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-xl border" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b px-2 py-2" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground text-xs font-medium" }, "Hooks", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center space-x-2" }, [
+		/*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.onSelectAll$ }, { class: "text-primary px-2 py-1 text-xs hover:underline" }, "Select all", 2, null),
+		/*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.onClear$ }, { class: "text-muted-foreground hover:text-foreground px-2 py-1 text-xs hover:underline" }, "Clear", 2, null),
+		/*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.onToggleOpen$ }, {
+			"aria-label": "toggle hooks",
+			class: "text-muted-foreground hover:text-foreground rounded p-1"
+		}, /*#__PURE__*/ _jsxSorted(IconChevronUpMini, { class: `h-4 w-4 transition-transform duration-200 ${_rawProps.isOpen ? "rotate-180" : "-rotate-90"}` }, null, null, 3, "pG_0"), 0, null)
+	], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", { style: _fnSignal(_hf0, [_rawProps]) }, { class: "grid grid-cols-2 gap-x-4 gap-y-3 overflow-hidden px-3 py-2 text-sm" }, _rawProps.filters.map((item, index) => {
+		const qrl_0 = /*#__PURE__*/ inlinedQrl((event, _1, index) => {
+			const _rawProps = _captures[0];
+			const target = event.target;
+			_rawProps.onFilterChange$(index, target.checked);
+		}, "HookFiltersCard_component_div_div_label_input_q_e_change_FeP7wk8oowk", [_rawProps]).m();
+		return /*#__PURE__*/ _jsxSorted("label", null, { class: "flex min-w-0 cursor-pointer items-center gap-2" }, [/*#__PURE__*/ _jsxSorted("input", {
+			checked: _wrapProp(item, "display"),
+			"q-e:change": qrl_0,
+			"q:p": index
+		}, {
+			type: "checkbox",
+			class: "h-4 w-4 shrink-0 cursor-pointer rounded focus:ring-0",
+			style: { accentColor: "var(--color-primary-active)" }
+		}, null, 6, null), /*#__PURE__*/ _jsxSorted("span", { title: _wrapProp(item, "key") }, { class: "ml-2 truncate select-none" }, _wrapProp(item, "key"), 1, null)], 1, item.key);
+	}), 1, null)], 1, "pG_1");
+}, "HookFiltersCard_component_nIw23Ky2Txs"));
+export { HookFiltersCard };

package/dist/ui/packages/devtools/ui/src/features/RenderTree/components/RenderTreeTabs.qwik.mjs

@@ -0,0 +1,10 @@
+import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0, p1) => p0.currentTab === p1 ? { boxShadow: "inset 0 -2px 0 0 var(--color-primary)" } : {};
+var RenderTreeTabs = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex space-x-2 border-b pb-1" }, ["state", "code"].map((tabId) => /*#__PURE__*/ _jsxSorted("button", {
+		class: ["rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200", _rawProps.currentTab === tabId ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground hover:bg-foreground/5"],
+		"q-e:click": tabId === "state" ? _rawProps.onStateClick$ : _rawProps.onCodeClick$,
+		style: _fnSignal(_hf0, [_rawProps, tabId])
+	}, null, tabId === "state" ? "State" : "Code", 0, tabId)), 1, "Mj_0");
+}, "RenderTreeTabs_component_fyOtScBp88U"));
+export { RenderTreeTabs };

package/dist/ui/packages/devtools/ui/src/features/RenderTree/components/StateTreeNodeLabel.qwik.mjs

@@ -0,0 +1,20 @@
+import { getValueColorClass } from "../utils/getValueColorClass.qwik.mjs";
+import { _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+var StateTreeNodeLabel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const label = _rawProps.node.label || _rawProps.node.name || "";
+	const parts = label.split(":");
+	if (_rawProps.node.children && parts.length === 1) return /*#__PURE__*/ _jsxSorted("span", null, { class: "font-semibold text-pink-400" }, label, 1, "mY_0");
+	if (parts.length > 1) {
+		const key = parts[0];
+		const value = parts.slice(1).join(":").trim();
+		const valueClass = getValueColorClass(_rawProps.node, value);
+		return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [
+			/*#__PURE__*/ _jsxSorted("span", null, { class: "text-blue-400" }, key, 1, null),
+			/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground/70" }, " : ", 3, null),
+			/*#__PURE__*/ _jsxSorted("span", { class: valueClass }, null, value, 1, null)
+		], 1, "mY_1");
+	}
+	return /*#__PURE__*/ _jsxSorted("span", null, null, label, 1, "mY_2");
+}, "StateTreeNodeLabel_component_ONzjgo7C9iQ"));
+export { StateTreeNodeLabel };

package/dist/ui/packages/devtools/ui/src/features/RenderTree/utils/getCodeLanguage.qwik.mjs

@@ -0,0 +1,8 @@
+function getCodeLanguage(pathId) {
+	if (pathId.endsWith(".js")) return "js";
+	if (pathId.endsWith(".ts")) return "ts";
+	if (pathId.endsWith(".jsx")) return "jsx";
+	if (pathId.endsWith(".tsx")) return "tsx";
+	return "tsx";
+}
+export { getCodeLanguage };

package/dist/ui/packages/devtools/ui/src/features/RenderTree/utils/getValueColorClass.qwik.mjs

@@ -0,0 +1,12 @@
+function getValueColorClass(node, valueText) {
+	switch (node.elementType) {
+		case "string": return "text-red-400";
+		case "number": return "text-green-400";
+		case "boolean": return "text-amber-400";
+		case "function": return "text-purple-400";
+		case "array": return "text-muted-foreground";
+		case "object": return /(Array\[|Object\s\{|Class\s\{)/.test(valueText) ? "text-muted-foreground" : "text-foreground";
+		default: return "text-foreground";
+	}
+}
+export { getValueColorClass };

package/dist/ui/packages/devtools/ui/src/features/Routes/Routes.qwik.mjs

@@ -0,0 +1,28 @@
+import { _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.relativePath === "" ? "/" : `/${p0.relativePath}/`;
+var _hf1 = (p0, p1, p2) => p1 && p0 > 0 ? `${p2.relativePath}/layout` : "default";
+var Routes = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-border flex-1 overflow-hidden rounded-xl border" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "bg-card-item-bg grid grid-cols-4 gap-4 p-4 text-sm font-medium" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, null, "Route Path", 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, null, "Name", 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, null, "Middleware", 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, null, "Layout", 3, null)
+	], 3, null), _rawProps.state.routes?.map((route, i) => {
+		const children = route.children || [];
+		const layout = route.relativePath !== "" && route.type === "directory" && children.find((child) => child.name.startsWith("layout"));
+		return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-border hover:bg-card-item-hover-bg grid grid-cols-4 gap-4 border-t p-4 text-sm" }, [
+			/*#__PURE__*/ _jsxSorted("div", null, null, /*#__PURE__*/ _jsxSorted("span", { class: { "text-accent": location.pathname === "/" && route.relativePath === "" || location.pathname === `/${route.relativePath}/` } }, null, _fnSignal(_hf0, [route]), 1, null), 1, null),
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground" }, _wrapProp(route, "name"), 1, null),
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground" }, "-", 3, null),
+			/*#__PURE__*/ _jsxSorted("div", null, null, /*#__PURE__*/ _jsxSorted("span", { class: {
+				"text-accent": layout && i > 0,
+				"text-muted-foreground": !layout || i === 0
+			} }, null, _fnSignal(_hf1, [
+				i,
+				layout,
+				route
+			]), 1, null), 1, null)
+		], 1, route.relativePath);
+	})], 1, "Q2_0");
+}, "Routes_component_0J1MQ3ONHgI"));
+export { Routes };