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

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

@@ -0,0 +1,530 @@
+import { IconExpandShrink, IconTarget } from "../../components/Icons/Icons.qwik.mjs";
+import { Tree } from "../../components/Tree/Tree.qwik.mjs";
+import { getPageDataSource } from "../../devtools/page-data-source.qwik.mjs";
+import { findNodeByDomAttr, findNodeById, getElementType, nextId, resetNodeId, toTreeNodes, treeIdFingerprint } from "./hookTreeHelpers.qwik.mjs";
+import { RenderTreeTabs } from "../RenderTree/components/RenderTreeTabs.qwik.mjs";
+import { StateTreeNodeLabel } from "../RenderTree/components/StateTreeNodeLabel.qwik.mjs";
+import { HookFiltersCard } from "../RenderTree/components/HookFiltersCard.qwik.mjs";
+import { IconButton } from "../../components/IconButton/IconButton.qwik.mjs";
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.value ? "Picking..." : "Pick";
+var _hf1 = (p0) => p0.value ? "Collapse all" : "Expand all";
+var _hf2 = (p0) => p0.value ? "Collapse" : "Expand";
+var EXPAND_ANIMATION_DELAY_MS = 250;
+var HIGHLIGHT_FLASH_MS = 1500;
+var LOAD_RETRY_DELAY_MS = 300;
+var PAGE_CHANGE_SETTLE_MS = 500;
+function valueToTree(key, val, depth) {
+	if (depth > 8) return null;
+	if (val === null || val === void 0) return {
+		id: nextId(),
+		label: `${key}: ${val}`,
+		elementType: "null"
+	};
+	const t = typeof val;
+	if (t === "boolean" || t === "number") return {
+		id: nextId(),
+		label: `${key}: ${val}`,
+		elementType: getElementType(val)
+	};
+	if (t === "string") return {
+		id: nextId(),
+		label: `${key}: "${val}"`,
+		elementType: "string"
+	};
+	if (t === "object" && val && val.__type === "function") {
+		const name = val.__name || "anonymous";
+		return {
+			id: nextId(),
+			label: `${key}: ƒ ${name}()`,
+			elementType: "function"
+		};
+	}
+	if (Array.isArray(val)) {
+		const children = val.map((item, i) => valueToTree(String(i), item, depth + 1)).filter((n) => n !== null);
+		return {
+			id: nextId(),
+			label: `${key}: Array[${val.length}]`,
+			elementType: "array",
+			children
+		};
+	}
+	if (t === "object" && val) {
+		const obj = val;
+		const className = obj.__className;
+		const displayKeys = Object.keys(obj).filter((k) => k !== "__className" && k !== "__display" && k !== "__type");
+		const children = displayKeys.map((k) => valueToTree(k, obj[k], depth + 1)).filter((n) => n !== null);
+		const label = className && className !== "Object" ? `${key}: Class {${className}}` : `${key}: Object {${displayKeys.length}}`;
+		return {
+			id: nextId(),
+			label,
+			elementType: "object",
+			children: children.length > 0 ? children : void 0
+		};
+	}
+	return {
+		id: nextId(),
+		label: `${key}: ${String(val)}`,
+		elementType: "string"
+	};
+}
+function buildDetailTree(entries) {
+	resetNodeId();
+	const result = [];
+	const groups = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		const list = groups.get(entry.hookType) ?? [];
+		list.push(entry);
+		groups.set(entry.hookType, list);
+	}
+	for (const [hookType, hooks] of groups) {
+		const children = [];
+		for (const hook of hooks) {
+			const varName = hook.variableName || hookType;
+			const data = hook.data;
+			if (data && typeof data === "object" && !Array.isArray(data)) {
+				const obj = data;
+				const className = obj.__className;
+				const displayKeys = Object.keys(obj).filter((k) => k !== "__className" && k !== "__display" && k !== "__type");
+				const subChildren = displayKeys.map((k) => valueToTree(k, obj[k], 1)).filter((n) => n !== null);
+				const sizeLabel = className && className !== "Object" ? `Class {${className}}` : `Object {${displayKeys.length}}`;
+				children.push({
+					id: nextId(),
+					label: `let ${varName} = : ${sizeLabel}`,
+					children: subChildren.length > 0 ? subChildren : void 0
+				});
+			} else {
+				const formatted = data === null ? "null" : data === void 0 ? "undefined" : typeof data === "string" ? `"${data}"` : String(data);
+				children.push({
+					id: nextId(),
+					label: `let ${varName} = : ${formatted}`
+				});
+			}
+		}
+		result.push({
+			id: nextId(),
+			label: hookType,
+			name: hookType,
+			children
+		});
+	}
+	return result;
+}
+/** DOM helpers for expand/scroll/highlight */ function expandAndScrollToNode(targetName) {
+	requestAnimationFrame(() => {
+		const container = document.getElementById("hook-tree-left");
+		if (!container) return;
+		const rows = Array.from(container.querySelectorAll("[class*=\"cursor-pointer\"]"));
+		let targetRow = null;
+		for (const row of rows) if ((row.textContent || "").includes(`<${targetName}`)) {
+			targetRow = row;
+			break;
+		}
+		if (!targetRow) return;
+		let parent = targetRow.parentElement;
+		while (parent && parent.id !== "hook-tree-left") {
+			if (parent.style.maxHeight === "0px") {
+				const siblingRow = parent.previousElementSibling;
+				if (siblingRow) siblingRow.click();
+			}
+			parent = parent.parentElement;
+		}
+		setTimeout(() => {
+			if (!targetRow) return;
+			targetRow.scrollIntoView({
+				block: "center",
+				behavior: "smooth"
+			});
+			targetRow.click();
+			targetRow.style.background = "rgba(139, 92, 246, 0.25)";
+			targetRow.style.borderRadius = "8px";
+			targetRow.style.transition = "background 0.5s";
+			setTimeout(() => {
+				if (!targetRow) return;
+				targetRow.style.background = "";
+				targetRow.style.borderRadius = "";
+				targetRow.style.transition = "";
+			}, HIGHLIGHT_FLASH_MS);
+		}, EXPAND_ANIMATION_DELAY_MS);
+	});
+}
+var HookTree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const revealNode = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		return _captures[0].state.componentReveal;
+	}, "HookTree_component_revealNode_useComputed_tpsp3UJyFJs", [_rawProps]));
+	const treeData = useSignal([]);
+	const treeVersion = useSignal(0);
+	const lastTreeIds = useSignal("");
+	const stateTree = useSignal([]);
+	const fullStateTree = useSignal([]);
+	const hookFilters = useSignal([]);
+	const hooksOpen = useSignal(true);
+	const currentTab = useSignal("state");
+	const selectedNode = useSignal(null);
+	const editingNodeId = useSignal(null);
+	const editValue = useSignal("");
+	const inspecting = useSignal(false);
+	const handleElementPicked = /*#__PURE__*/ inlinedQrl((payload) => {
+		const inspecting = _captures[0], treeData = _captures[1];
+		inspecting.value = false;
+		let found = null;
+		if (payload.treeNodeId) found = findNodeById(treeData.value, payload.treeNodeId);
+		if (!found) found = findNodeByDomAttr(treeData.value, payload.qId || null, payload.colonId || null);
+		if (found) {
+			onNodeClick(found);
+			expandAndScrollToNode(found.label || found.name || "");
+		}
+	}, "HookTree_component_handleElementPicked_Tg1fX7eTA88", [inspecting, treeData]);
+	const applyFilters = /*#__PURE__*/ inlinedQrl((tree, filters) => {
+		if (filters.length === 0) return tree;
+		return tree.filter((node) => filters.some((f) => f.key === node.label && f.display));
+	}, "HookTree_component_applyFilters_BI0rmhS6jV0");
+	const refreshSelectedDetail = /*#__PURE__*/ inlinedQrl(async () => {
+		const applyFilters = _captures[0], fullStateTree = _captures[1], hookFilters = _captures[2], selectedNode = _captures[3], stateTree = _captures[4];
+		const sel = selectedNode.value;
+		if (!sel) return;
+		const source = getPageDataSource();
+		const [detail, vnodeProps] = await Promise.all([source.readComponentDetail(sel.name, sel.qrlChunk), source.readNodeProps(sel.nodeId)]);
+		const entries = detail ?? [];
+		if (vnodeProps && Object.keys(vnodeProps).length > 0) entries.push({
+			hookType: "props",
+			variableName: "props",
+			data: vnodeProps
+		});
+		if (entries.length > 0) {
+			const full = buildDetailTree(entries);
+			fullStateTree.value = full;
+			const existingMap = new Map(hookFilters.value.map((f) => [f.key, f.display]));
+			hookFilters.value = full.map((n) => ({
+				key: n.label || n.name || "",
+				display: existingMap.get(n.label || n.name || "") ?? true
+			}));
+			stateTree.value = await applyFilters(full, hookFilters.value);
+		}
+	}, "HookTree_component_refreshSelectedDetail_kXIvs8bLT9w", [
+		applyFilters,
+		fullStateTree,
+		hookFilters,
+		selectedNode,
+		stateTree
+	]);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ cleanup }) => {
+		const handleElementPicked = _captures[0], lastTreeIds = _captures[1], refreshSelectedDetail = _captures[2], selectedNode = _captures[3], stateTree = _captures[4], treeData = _captures[5], treeVersion = _captures[6];
+		const source = getPageDataSource();
+		const loadInitial = async (retries = 3) => {
+			const vnodeTree = await source.readVNodeTree();
+			if (vnodeTree && vnodeTree.length > 0) {
+				const fp = treeIdFingerprint(vnodeTree);
+				if (fp !== lastTreeIds.value) {
+					lastTreeIds.value = fp;
+					treeData.value = toTreeNodes(vnodeTree);
+				}
+			} else if (retries > 0) setTimeout(() => loadInitial(retries - 1), LOAD_RETRY_DELAY_MS);
+		};
+		loadInitial();
+		const unsub = source.subscribeTreeUpdates((tree) => {
+			const fp = treeIdFingerprint(tree);
+			if (fp !== lastTreeIds.value) {
+				lastTreeIds.value = fp;
+				treeData.value = toTreeNodes(tree);
+			}
+			refreshSelectedDetail();
+		});
+		const port = window.__devtools_port;
+		let pageCleanup;
+		if (port?.onMessage) {
+			const portHandler = (msg) => {
+				if (msg?.type === "PAGE_CHANGED") {
+					treeData.value = [];
+					stateTree.value = [];
+					selectedNode.value = null;
+					lastTreeIds.value = "";
+					treeVersion.value++;
+					setTimeout(() => loadInitial(), PAGE_CHANGE_SETTLE_MS);
+				}
+				if (msg?.type === "ELEMENT_PICKED" && msg.payload) handleElementPicked(msg.payload);
+			};
+			port.onMessage.addListener(portHandler);
+			pageCleanup = () => port.onMessage.removeListener(portHandler);
+		}
+		const treeEl = document.getElementById("hook-tree-left");
+		let lastHoveredId = "";
+		const handleTreeHover = (e) => {
+			const target = e.target.closest("[data-node-id]");
+			if (!target) {
+				if (lastHoveredId) {
+					source.unhighlightElement();
+					lastHoveredId = "";
+				}
+				return;
+			}
+			const vnodeId = target.dataset.nodeId || "";
+			const name = target.dataset.nodeName || "";
+			if (!vnodeId || vnodeId === lastHoveredId) return;
+			lastHoveredId = vnodeId;
+			source.highlightElement(vnodeId, name);
+		};
+		const handleTreeLeave = () => {
+			if (lastHoveredId) {
+				source.unhighlightElement();
+				lastHoveredId = "";
+			}
+		};
+		treeEl?.addEventListener("mouseover", handleTreeHover);
+		treeEl?.addEventListener("mouseleave", handleTreeLeave);
+		cleanup(() => {
+			unsub?.();
+			pageCleanup?.();
+			treeEl?.removeEventListener("mouseover", handleTreeHover);
+			treeEl?.removeEventListener("mouseleave", handleTreeLeave);
+		});
+	}, "HookTree_component_useVisibleTask_K0XjSg2Wna0", [
+		handleElementPicked,
+		lastTreeIds,
+		refreshSelectedDetail,
+		selectedNode,
+		stateTree,
+		treeData,
+		treeVersion
+	]));
+	const onNodeClick = /*#__PURE__*/ inlinedQrl(async (node) => {
+		const fullStateTree = _captures[0], hookFilters = _captures[1], selectedNode = _captures[2], stateTree = _captures[3];
+		const source = getPageDataSource();
+		const name = node.name || node.label || "";
+		if (!name) {
+			stateTree.value = [];
+			selectedNode.value = null;
+			return;
+		}
+		const qrlChunk = node.props?.__qrlChunk;
+		selectedNode.value = {
+			name,
+			nodeId: node.id,
+			qrlChunk
+		};
+		const [detail, vnodeProps] = await Promise.all([source.readComponentDetail(name, qrlChunk), source.readNodeProps(node.id)]);
+		const entries = detail ?? [];
+		if (vnodeProps && Object.keys(vnodeProps).length > 0) entries.push({
+			hookType: "props",
+			variableName: "props",
+			data: vnodeProps
+		});
+		if (entries.length > 0) {
+			const full = buildDetailTree(entries);
+			fullStateTree.value = full;
+			hookFilters.value = full.map((n) => ({
+				key: n.label || n.name || "",
+				display: true
+			}));
+			stateTree.value = full;
+		} else {
+			stateTree.value = [];
+			fullStateTree.value = [];
+			hookFilters.value = [];
+		}
+	}, "HookTree_component_onNodeClick_2dIkXIOj9HQ", [
+		fullStateTree,
+		hookFilters,
+		selectedNode,
+		stateTree
+	]);
+	const onStateNodeClick = /*#__PURE__*/ inlinedQrl(async (node) => {
+		const editValue = _captures[0], editingNodeId = _captures[1];
+		if (node.children && node.children.length > 0) return;
+		const match = (node.label || "").match(/^let (\S+) = : (.+)$/);
+		if (!match) return;
+		editingNodeId.value = node.id;
+		const rawVal = match[2];
+		editValue.value = rawVal.startsWith("\"") && rawVal.endsWith("\"") ? rawVal.slice(1, -1) : rawVal;
+	}, "HookTree_component_onStateNodeClick_w05LL5ft0xI", [editValue, editingNodeId]);
+	const commitEdit = /*#__PURE__*/ inlinedQrl(async () => {
+		const editValue = _captures[0], editingNodeId = _captures[1], refreshSelectedDetail = _captures[2], selectedNode = _captures[3], stateTree = _captures[4];
+		if (!editingNodeId.value || !selectedNode.value) return;
+		const sel = selectedNode.value;
+		const source = getPageDataSource();
+		let variableName = "";
+		for (const group of stateTree.value) for (const child of group.children || []) if (child.id === editingNodeId.value) {
+			const m = (child.label || "").match(/^let (\S+) = :/);
+			if (m) variableName = m[1];
+		}
+		if (variableName) {
+			let parsed = editValue.value;
+			try {
+				parsed = JSON.parse(editValue.value);
+			} catch {}
+			await source.setSignalValue(sel.name, sel.qrlChunk, variableName, parsed);
+			await refreshSelectedDetail();
+		}
+		editingNodeId.value = null;
+	}, "HookTree_component_commitEdit_IAq5fsGDYyA", [
+		editValue,
+		editingNodeId,
+		refreshSelectedDetail,
+		selectedNode,
+		stateTree
+	]);
+	const cancelEdit = /*#__PURE__*/ inlinedQrl(() => {
+		const editingNodeId = _captures[0];
+		editingNodeId.value = null;
+	}, "HookTree_component_cancelEdit_T9PZ4ZUP0kg", [editingNodeId]);
+	const handleSelectAll = /*#__PURE__*/ inlinedQrl(async () => {
+		const applyFilters = _captures[0], fullStateTree = _captures[1], hookFilters = _captures[2], stateTree = _captures[3];
+		hookFilters.value = hookFilters.value.map((f) => ({
+			...f,
+			display: true
+		}));
+		stateTree.value = await applyFilters(fullStateTree.value, hookFilters.value);
+	}, "HookTree_component_handleSelectAll_XiKssDGD9zI", [
+		applyFilters,
+		fullStateTree,
+		hookFilters,
+		stateTree
+	]);
+	const handleClear = /*#__PURE__*/ inlinedQrl(async () => {
+		const applyFilters = _captures[0], fullStateTree = _captures[1], hookFilters = _captures[2], stateTree = _captures[3];
+		hookFilters.value = hookFilters.value.map((f) => ({
+			...f,
+			display: false
+		}));
+		stateTree.value = await applyFilters(fullStateTree.value, hookFilters.value);
+	}, "HookTree_component_handleClear_DBcad9ExXgA", [
+		applyFilters,
+		fullStateTree,
+		hookFilters,
+		stateTree
+	]);
+	const handleFilterChange = /*#__PURE__*/ inlinedQrl(async (index, checked) => {
+		const applyFilters = _captures[0], fullStateTree = _captures[1], hookFilters = _captures[2], stateTree = _captures[3];
+		hookFilters.value = hookFilters.value.map((f, i) => i === index ? {
+			...f,
+			display: checked
+		} : f);
+		stateTree.value = await applyFilters(fullStateTree.value, hookFilters.value);
+	}, "HookTree_component_handleFilterChange_ToM6gJbYC80", [
+		applyFilters,
+		fullStateTree,
+		hookFilters,
+		stateTree
+	]);
+	const startInspect = /*#__PURE__*/ inlinedQrl(() => {
+		const inspecting = _captures[0];
+		const port = window.__devtools_port;
+		if (port) {
+			inspecting.value = true;
+			port.postMessage({ type: "START_INSPECT" });
+		}
+	}, "HookTree_component_startInspect_ivplr7Kh8Cg", [inspecting]);
+	const stopInspect = /*#__PURE__*/ inlinedQrl(() => {
+		const inspecting = _captures[0];
+		const port = window.__devtools_port;
+		if (port) {
+			inspecting.value = false;
+			port.postMessage({ type: "STOP_INSPECT" });
+		}
+	}, "HookTree_component_stopInspect_0GbFiCX0c2U", [inspecting]);
+	const treeExpanded = useSignal(true);
+	const toggleTreeExpand = /*#__PURE__*/ inlinedQrl(() => {
+		const treeExpanded = _captures[0];
+		const container = document.getElementById("hook-tree-left");
+		if (!container) return;
+		const chevrons = Array.from(container.querySelectorAll("svg[class*=\"shrink-0\"]"));
+		for (const chevron of chevrons) {
+			const isExpanded = chevron.classList.contains("rotate-180");
+			if (treeExpanded.value ? isExpanded : !isExpanded) chevron.closest("[class*=\"cursor-pointer\"]")?.click();
+		}
+		treeExpanded.value = !treeExpanded.value;
+	}, "HookTree_component_toggleTreeExpand_FzGT4h3lf38", [treeExpanded]);
+	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 flex w-1/2 flex-col overflow-hidden p-3",
+			style: { minWidth: "360px" }
+		}, [/*#__PURE__*/ _jsxSorted("div", null, { class: "mb-2 flex items-center gap-1" }, [/*#__PURE__*/ _jsxSorted(IconButton, { onClick$: inspecting.value ? stopInspect : startInspect }, {
+			active: _wrapProp(inspecting),
+			title: "Select a component on the page"
+		}, [/*#__PURE__*/ _jsxSorted(IconTarget, null, { class: "h-3.5 w-3.5" }, null, 3, "uB_0"), _fnSignal(_hf0, [inspecting])], 0, "uB_1"), /*#__PURE__*/ _jsxSorted(IconButton, null, {
+			onClick$: toggleTreeExpand,
+			title: _fnSignal(_hf1, [treeExpanded])
+		}, [/*#__PURE__*/ _jsxSorted(IconExpandShrink, null, {
+			class: "h-3.5 w-3.5",
+			expanded: _wrapProp(treeExpanded)
+		}, null, 3, "uB_2"), _fnSignal(_hf2, [treeExpanded])], 1, "uB_3")], 1, null), /*#__PURE__*/ _jsxSorted("div", null, {
+			id: "hook-tree-left",
+			class: "min-h-0 flex-1 overflow-y-auto"
+		}, treeData.value.length === 0 ? /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex h-full items-center justify-center text-sm" }, "Waiting for component tree...", 3, "uB_4") : /*#__PURE__*/ _jsxSorted(Tree, { onRevealed$: /*#__PURE__*/ inlinedQrl(() => {
+			const _rawProps = _captures[0];
+			return _rawProps.state.componentReveal = null;
+		}, "HookTree_component_div_div_div_div_Tree_onRevealed_bBy7gH7s5cA", [_rawProps]) }, {
+			data: treeData,
+			onNodeClick,
+			revealNode
+		}, null, 2, treeVersion.value), 1, null)], 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, {
+				onCodeClick$: /*#__PURE__*/ inlinedQrl(() => {
+					const currentTab = _captures[0];
+					return currentTab.value = "code";
+				}, "HookTree_component_div_div_div_RenderTreeTabs_onCodeClick_0lAe8vTbWRQ", [currentTab]),
+				onStateClick$: /*#__PURE__*/ inlinedQrl(() => {
+					const currentTab = _captures[0];
+					return currentTab.value = "state";
+				}, "HookTree_component_div_div_div_RenderTreeTabs_onStateClick_91eAngQRRXU", [currentTab])
+			}, { currentTab: _wrapProp(currentTab) }, null, 2, "uB_5"),
+			currentTab.value === "state" && /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-5 flex min-h-0 flex-1 flex-col" }, [hookFilters.value.length > 0 && /*#__PURE__*/ _jsxSorted(HookFiltersCard, { onToggleOpen$: /*#__PURE__*/ inlinedQrl(() => {
+				const hooksOpen = _captures[0];
+				return hooksOpen.value = !hooksOpen.value;
+			}, "HookTree_component_div_div_div_div_HookFiltersCard_onToggleOpen_wb4o4GAUjKQ", [hooksOpen]) }, {
+				filters: _wrapProp(hookFilters),
+				isOpen: _wrapProp(hooksOpen),
+				onSelectAll$: handleSelectAll,
+				onClear$: handleClear,
+				onFilterChange$: handleFilterChange
+			}, null, 2, "uB_6"), stateTree.value.length > 0 ? /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-4 min-h-0 flex-1 overflow-y-auto p-2" }, /*#__PURE__*/ _jsxSorted(Tree, { renderNode: /*#__PURE__*/ inlinedQrl((node) => {
+				const cancelEdit = _captures[0], commitEdit = _captures[1], editValue = _captures[2];
+				if (_captures[3].value === node.id) return /*#__PURE__*/ _jsxSorted("form", null, {
+					"preventdefault:submit": true,
+					"q-e:submit": commitEdit,
+					class: "inline-flex items-center gap-1"
+				}, [/*#__PURE__*/ _jsxSorted("input", {
+					"q-e:input": /*#__PURE__*/ inlinedQrl((_, el, _2, editValue) => {
+						editValue.value = el.value;
+					}, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_input_z05hdrGPzhg").m(),
+					"q-e:keydown": /*#__PURE__*/ inlinedQrl((e, _1, cancelEdit) => {
+						if (e.key === "Escape") cancelEdit();
+					}, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_keydown_0AuxXsO3Wa0").m(),
+					"q:ps": [cancelEdit, editValue]
+				}, {
+					type: "text",
+					class: "border-primary/50 bg-card-item-hover-bg text-foreground focus:border-primary w-32 rounded border px-1.5 py-0.5 text-xs outline-none",
+					value: _wrapProp(editValue),
+					autoFocus: true
+				}, null, 6, null), /*#__PURE__*/ _jsxSorted("button", null, {
+					type: "submit",
+					class: "bg-primary/20 text-primary hover:bg-primary/30 rounded px-1.5 py-0.5 text-xs"
+				}, "ok", 3, null)], 1, "uB_7");
+				return /*#__PURE__*/ _jsxSorted(StateTreeNodeLabel, { node }, null, null, 3, "uB_8");
+			}, "HookTree_component_div_div_div_div_div_Tree_renderNode_vC6C4CEUHF8", [
+				cancelEdit,
+				commitEdit,
+				editValue,
+				editingNodeId
+			]) }, {
+				data: stateTree,
+				gap: 10,
+				animate: true,
+				animationDuration: 200,
+				isHover: true,
+				onNodeClick: onStateNodeClick
+			}, null, 3, "uB_9"), 1, "uB_10") : /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex h-full items-center justify-center text-sm" }, "Select a component to inspect its state", 3, "uB_11")], 1, "uB_12"),
+			currentTab.value === "code" && /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg mt-4 flex min-h-0 flex-1 items-center justify-center rounded-xl border p-4" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "text-center" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "font-medium" }, "Code", 3, null), " requires the Qwik DevTools Vite plugin."], 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground/60 mt-2 text-xs" }, [
+				"Available in the in-app overlay when running",
+				" ",
+				/*#__PURE__*/ _jsxSorted("code", null, { class: "bg-card-item-hover-bg rounded px-1.5 py-0.5" }, "pnpm dev", 3, null),
+				" with",
+				" ",
+				/*#__PURE__*/ _jsxSorted("code", null, { class: "bg-card-item-hover-bg rounded px-1.5 py-0.5" }, "@qwik.dev/devtools", 3, null)
+			], 3, null)], 3, null), 3, "uB_13")
+		], 1, null)
+	], 1, null), 1, "uB_14");
+}, "HookTree_component_Q5wO3ucVIeA"));
+export { HookTree };

package/dist/ui/packages/devtools/ui/src/features/HookTree/hookTreeHelpers.qwik.mjs

@@ -0,0 +1,139 @@
+/** VNodeTreeNode -> TreeNode conversion */ function toTreeNodes(vnodes) {
+	return vnodes.map((v) => ({
+		id: v.id,
+		name: v.name,
+		label: v.name,
+		props: v.props,
+		children: v.children ? toTreeNodes(v.children) : void 0
+	}));
+}
+/** Quick structural fingerprint from node IDs. */ function treeIdFingerprint(nodes) {
+	const ids = [];
+	const walk = (list) => {
+		for (const n of list) {
+			ids.push(n.id);
+			if (n.children) walk(n.children);
+		}
+	};
+	walk(nodes);
+	return ids.join(",");
+}
+/** Tree search helpers */ function findNodeById(nodes, id) {
+	for (const node of nodes) {
+		if (node.id === id) return node;
+		if (node.children) {
+			const found = findNodeById(node.children, id);
+			if (found) return found;
+		}
+	}
+	return null;
+}
+function findNodeByDomAttr(nodes, qId, colonId) {
+	for (const node of nodes) {
+		const props = node.props;
+		if (qId && props?.["q:id"] === qId) return node;
+		if (colonId && props?.__colonId === colonId) return node;
+		if (node.children) {
+			const found = findNodeByDomAttr(node.children, qId, colonId);
+			if (found) return found;
+		}
+	}
+	return null;
+}
+var _nodeId = 0;
+function resetNodeId() {
+	_nodeId = 0;
+}
+function nextId() {
+	return `detail-${_nodeId++}`;
+}
+function getElementType(val) {
+	if (val === null) return "null";
+	if (Array.isArray(val)) return "array";
+	const t = typeof val;
+	if (t === "boolean") return "boolean";
+	if (t === "number") return "number";
+	if (t === "string") return "string";
+	if (t === "function") return "function";
+	if (t === "object") return "object";
+	return "string";
+}
+function isSerializedFunction(val) {
+	return typeof val === "object" && val !== null && val.__type === "function";
+}
+function valueToTree(key, val, depth) {
+	if (depth > 8) return null;
+	if (val === null || val === void 0) return {
+		id: nextId(),
+		label: `${key}: ${val}`,
+		elementType: "null"
+	};
+	if (isSerializedFunction(val)) {
+		const name = val.__name || "anonymous";
+		return {
+			id: nextId(),
+			label: `${key}: fn ${name}()`,
+			elementType: "function"
+		};
+	}
+	const t = typeof val;
+	if (t === "string" || t === "number" || t === "boolean") return {
+		id: nextId(),
+		name: key,
+		label: `${key}: ${JSON.stringify(val)}`,
+		elementType: getElementType(val)
+	};
+	if (Array.isArray(val)) {
+		const children = val.map((item, i) => valueToTree(`[${i}]`, item, depth + 1)).filter((n) => n !== null);
+		return {
+			id: nextId(),
+			name: key,
+			label: `${key} (${val.length})`,
+			elementType: "array",
+			children: children.length > 0 ? children : void 0
+		};
+	}
+	if (t === "object") {
+		const obj = val;
+		const className = obj.__className;
+		const children = Object.keys(obj).filter((k) => k !== "__className" && k !== "__display").map((k) => valueToTree(k, obj[k], depth + 1)).filter((n) => n !== null);
+		const displayLabel = className ? `${key}: ${className}` : key;
+		return {
+			id: nextId(),
+			name: key,
+			label: displayLabel,
+			elementType: "object",
+			children: children.length > 0 ? children : void 0
+		};
+	}
+	return {
+		id: nextId(),
+		label: `${key}: ${String(val)}`,
+		elementType: "string"
+	};
+}
+function buildDetailTree(entries) {
+	_nodeId = 0;
+	const byType = /* @__PURE__ */ new Map();
+	for (const e of entries) {
+		const group = byType.get(e.hookType) || [];
+		group.push(e);
+		byType.set(e.hookType, group);
+	}
+	const result = [];
+	for (const [hookType, items] of byType) {
+		const children = [];
+		for (const item of items) {
+			const child = valueToTree(item.variableName, item.data, 0);
+			if (child) children.push(child);
+		}
+		result.push({
+			id: nextId(),
+			name: hookType,
+			label: hookType,
+			children: children.length > 0 ? children : void 0
+		});
+	}
+	return result;
+}
+export { buildDetailTree, findNodeByDomAttr, findNodeById, getElementType, nextId, resetNodeId, toTreeNodes, treeIdFingerprint, valueToTree };