@qwik.dev/devtools 0.3.0-beta.3 → 2.0.0-beta.45

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

@@ -1,713 +1,541 @@
-import { componentQrl, inlinedQrl, useComputedQrl, _captures, useSignal, useVisibleTaskQrl, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
+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 { treeIdFingerprint, toTreeNodes, findNodeById, findNodeByDomAttr, nextId, getElementType, resetNodeId } from "./hookTreeHelpers.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 { IconTarget, IconExpandShrink } from "../../components/Icons/Icons.qwik.mjs";
-const _hf0 = (p0) => p0.value ? "Picking..." : "Pick";
-const _hf1 = (p0) => p0.value ? "Collapse all" : "Expand all";
-const _hf2 = (p0) => p0.value ? "Collapse" : "Expand";
-const EXPAND_ANIMATION_DELAY_MS = 250;
-const HIGHLIGHT_FLASH_MS = 1500;
-const LOAD_RETRY_DELAY_MS = 300;
-const PAGE_CHANGE_SETTLE_MS = 500;
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.value ? "Picking..." : "Pick";
+var _hf0_str = "p0.value?\"Picking...\":\"Pick\"";
+var _hf1 = (p0) => p0.value ? "Collapse all" : "Expand all";
+var _hf1_str = "p0.value?\"Collapse all\":\"Expand all\"";
+var _hf2 = (p0) => p0.value ? "Collapse" : "Expand";
+var _hf2_str = "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"
-  };
+	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;
+	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) {
-      const text = row.textContent || "";
-      if (text.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);
-  });
+	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);
+	});
 }
-const HookTree = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  const revealNode = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const _rawProps2 = _captures[0];
-    return _rawProps2.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 inspecting2 = _captures[0], treeData2 = _captures[1];
-    inspecting2.value = false;
-    let found = null;
-    if (payload.treeNodeId) {
-      found = findNodeById(treeData2.value, payload.treeNodeId);
-    }
-    if (!found) {
-      found = findNodeByDomAttr(treeData2.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 applyFilters2 = _captures[0], fullStateTree2 = _captures[1], hookFilters2 = _captures[2], selectedNode2 = _captures[3], stateTree2 = _captures[4];
-    const sel = selectedNode2.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);
-      fullStateTree2.value = full;
-      const existingMap = new Map(hookFilters2.value.map((f) => [
-        f.key,
-        f.display
-      ]));
-      hookFilters2.value = full.map((n) => ({
-        key: n.label || n.name || "",
-        display: existingMap.get(n.label || n.name || "") ?? true
-      }));
-      stateTree2.value = await applyFilters2(full, hookFilters2.value);
-    }
-  }, "HookTree_component_refreshSelectedDetail_kXIvs8bLT9w", [
-    applyFilters,
-    fullStateTree,
-    hookFilters,
-    selectedNode,
-    stateTree
-  ]);
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
-    const handleElementPicked2 = _captures[0], lastTreeIds2 = _captures[1], refreshSelectedDetail2 = _captures[2], selectedNode2 = _captures[3], stateTree2 = _captures[4], treeData2 = _captures[5], treeVersion2 = _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 !== lastTreeIds2.value) {
-          lastTreeIds2.value = fp;
-          treeData2.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 !== lastTreeIds2.value) {
-        lastTreeIds2.value = fp;
-        treeData2.value = toTreeNodes(tree);
-      }
-      refreshSelectedDetail2();
-    });
-    const port = window.__devtools_port;
-    let pageCleanup;
-    if (port?.onMessage) {
-      const portHandler = (msg) => {
-        if (msg?.type === "PAGE_CHANGED") {
-          treeData2.value = [];
-          stateTree2.value = [];
-          selectedNode2.value = null;
-          lastTreeIds2.value = "";
-          treeVersion2.value++;
-          setTimeout(() => loadInitial(), PAGE_CHANGE_SETTLE_MS);
-        }
-        if (msg?.type === "ELEMENT_PICKED" && msg.payload) {
-          handleElementPicked2(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 fullStateTree2 = _captures[0], hookFilters2 = _captures[1], selectedNode2 = _captures[2], stateTree2 = _captures[3];
-    const source = getPageDataSource();
-    const name = node.name || node.label || "";
-    if (!name) {
-      stateTree2.value = [];
-      selectedNode2.value = null;
-      return;
-    }
-    const qrlChunk = node.props?.__qrlChunk;
-    selectedNode2.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);
-      fullStateTree2.value = full;
-      hookFilters2.value = full.map((n) => ({
-        key: n.label || n.name || "",
-        display: true
-      }));
-      stateTree2.value = full;
-    } else {
-      stateTree2.value = [];
-      fullStateTree2.value = [];
-      hookFilters2.value = [];
-    }
-  }, "HookTree_component_onNodeClick_2dIkXIOj9HQ", [
-    fullStateTree,
-    hookFilters,
-    selectedNode,
-    stateTree
-  ]);
-  const onStateNodeClick = /* @__PURE__ */ inlinedQrl(async (node) => {
-    const editValue2 = _captures[0], editingNodeId2 = _captures[1];
-    if (node.children && node.children.length > 0) {
-      return;
-    }
-    const label = node.label || "";
-    const match = label.match(/^let (\S+) = : (.+)$/);
-    if (!match) {
-      return;
-    }
-    editingNodeId2.value = node.id;
-    const rawVal = match[2];
-    editValue2.value = rawVal.startsWith('"') && rawVal.endsWith('"') ? rawVal.slice(1, -1) : rawVal;
-  }, "HookTree_component_onStateNodeClick_w05LL5ft0xI", [
-    editValue,
-    editingNodeId
-  ]);
-  const commitEdit = /* @__PURE__ */ inlinedQrl(async () => {
-    const editValue2 = _captures[0], editingNodeId2 = _captures[1], refreshSelectedDetail2 = _captures[2], selectedNode2 = _captures[3], stateTree2 = _captures[4];
-    if (!editingNodeId2.value || !selectedNode2.value) {
-      return;
-    }
-    const sel = selectedNode2.value;
-    const source = getPageDataSource();
-    let variableName = "";
-    for (const group of stateTree2.value) {
-      for (const child of group.children || []) {
-        if (child.id === editingNodeId2.value) {
-          const lbl = child.label || "";
-          const m = lbl.match(/^let (\S+) = :/);
-          if (m) {
-            variableName = m[1];
-          }
-        }
-      }
-    }
-    if (variableName) {
-      let parsed = editValue2.value;
-      try {
-        parsed = JSON.parse(editValue2.value);
-      } catch {
-      }
-      await source.setSignalValue(sel.name, sel.qrlChunk, variableName, parsed);
-      await refreshSelectedDetail2();
-    }
-    editingNodeId2.value = null;
-  }, "HookTree_component_commitEdit_IAq5fsGDYyA", [
-    editValue,
-    editingNodeId,
-    refreshSelectedDetail,
-    selectedNode,
-    stateTree
-  ]);
-  const cancelEdit = /* @__PURE__ */ inlinedQrl(() => {
-    const editingNodeId2 = _captures[0];
-    editingNodeId2.value = null;
-  }, "HookTree_component_cancelEdit_T9PZ4ZUP0kg", [
-    editingNodeId
-  ]);
-  const handleSelectAll = /* @__PURE__ */ inlinedQrl(async () => {
-    const applyFilters2 = _captures[0], fullStateTree2 = _captures[1], hookFilters2 = _captures[2], stateTree2 = _captures[3];
-    hookFilters2.value = hookFilters2.value.map((f) => ({
-      ...f,
-      display: true
-    }));
-    stateTree2.value = await applyFilters2(fullStateTree2.value, hookFilters2.value);
-  }, "HookTree_component_handleSelectAll_XiKssDGD9zI", [
-    applyFilters,
-    fullStateTree,
-    hookFilters,
-    stateTree
-  ]);
-  const handleClear = /* @__PURE__ */ inlinedQrl(async () => {
-    const applyFilters2 = _captures[0], fullStateTree2 = _captures[1], hookFilters2 = _captures[2], stateTree2 = _captures[3];
-    hookFilters2.value = hookFilters2.value.map((f) => ({
-      ...f,
-      display: false
-    }));
-    stateTree2.value = await applyFilters2(fullStateTree2.value, hookFilters2.value);
-  }, "HookTree_component_handleClear_DBcad9ExXgA", [
-    applyFilters,
-    fullStateTree,
-    hookFilters,
-    stateTree
-  ]);
-  const handleFilterChange = /* @__PURE__ */ inlinedQrl(async (index, checked) => {
-    const applyFilters2 = _captures[0], fullStateTree2 = _captures[1], hookFilters2 = _captures[2], stateTree2 = _captures[3];
-    hookFilters2.value = hookFilters2.value.map((f, i) => i === index ? {
-      ...f,
-      display: checked
-    } : f);
-    stateTree2.value = await applyFilters2(fullStateTree2.value, hookFilters2.value);
-  }, "HookTree_component_handleFilterChange_ToM6gJbYC80", [
-    applyFilters,
-    fullStateTree,
-    hookFilters,
-    stateTree
-  ]);
-  const startInspect = /* @__PURE__ */ inlinedQrl(() => {
-    const inspecting2 = _captures[0];
-    const port = window.__devtools_port;
-    if (port) {
-      inspecting2.value = true;
-      port.postMessage({
-        type: "START_INSPECT"
-      });
-    }
-  }, "HookTree_component_startInspect_ivplr7Kh8Cg", [
-    inspecting
-  ]);
-  const stopInspect = /* @__PURE__ */ inlinedQrl(() => {
-    const inspecting2 = _captures[0];
-    const port = window.__devtools_port;
-    if (port) {
-      inspecting2.value = false;
-      port.postMessage({
-        type: "STOP_INSPECT"
-      });
-    }
-  }, "HookTree_component_stopInspect_0GbFiCX0c2U", [
-    inspecting
-  ]);
-  const treeExpanded = useSignal(true);
-  const toggleTreeExpand = /* @__PURE__ */ inlinedQrl(() => {
-    const treeExpanded2 = _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 (treeExpanded2.value ? isExpanded : !isExpanded) {
-        chevron.closest('[class*="cursor-pointer"]')?.click();
-      }
-    }
-    treeExpanded2.value = !treeExpanded2.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 _rawProps2 = _captures[0];
-          return _rawProps2.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 currentTab2 = _captures[0];
-          return currentTab2.value = "code";
-        }, "HookTree_component_div_div_div_RenderTreeTabs_onCodeClick_0lAe8vTbWRQ", [
-          currentTab
-        ]),
-        onStateClick$: /* @__PURE__ */ inlinedQrl(() => {
-          const currentTab2 = _captures[0];
-          return currentTab2.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 hooksOpen2 = _captures[0];
-            return hooksOpen2.value = !hooksOpen2.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 cancelEdit2 = _captures[0], commitEdit2 = _captures[1], editValue2 = _captures[2], editingNodeId2 = _captures[3];
-            if (editingNodeId2.value === node.id) {
-              return /* @__PURE__ */ _jsxSorted("form", null, {
-                "preventdefault:submit": true,
-                "q-e:submit": commitEdit2,
-                class: "inline-flex items-center gap-1"
-              }, [
-                /* @__PURE__ */ _jsxSorted("input", {
-                  "q-e:input": /* @__PURE__ */ inlinedQrl((_, el, _2, editValue3) => {
-                    editValue3.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, cancelEdit3) => {
-                    if (e.key === "Escape") {
-                      cancelEdit3();
-                    }
-                  }, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_keydown_0AuxXsO3Wa0").m(),
-                  "q:ps": [
-                    cancelEdit2,
-                    editValue2
-                  ]
-                }, {
-                  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(editValue2),
-                  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");
+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], onNodeClick = _captures[1], treeData = _captures[2];
+		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,
+		onNodeClick,
+		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, "n0_2"), _fnSignal(_hf0, [inspecting], _hf0_str)], 0, "n0_3"), /*#__PURE__*/ _jsxSorted(IconButton, null, {
+			onClick$: toggleTreeExpand,
+			title: _fnSignal(_hf1, [treeExpanded], _hf1_str)
+		}, [/*#__PURE__*/ _jsxSorted(IconExpandShrink, null, {
+			class: "h-3.5 w-3.5",
+			expanded: _wrapProp(treeExpanded)
+		}, null, 3, "n0_4"), _fnSignal(_hf2, [treeExpanded], _hf2_str)], 1, "n0_5")], 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, "n0_6") : /*#__PURE__*/ _jsxSorted(Tree, {
+			onNodeClick,
+			onRevealed$: /*#__PURE__*/ inlinedQrl(() => {
+				const _rawProps = _captures[0];
+				return _rawProps.state.componentReveal = null;
+			}, "HookTree_component_div_div_div_div_Tree_onRevealed_bBy7gH7s5cA", [_rawProps])
+		}, {
+			data: treeData,
+			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, null, {
+				currentTab: _wrapProp(currentTab),
+				onStateClick$: /*#__PURE__*/ inlinedQrl(() => {
+					const currentTab = _captures[0];
+					return currentTab.value = "state";
+				}, "HookTree_component_div_div_div_RenderTreeTabs_onStateClick_91eAngQRRXU", [currentTab]),
+				onCodeClick$: /*#__PURE__*/ inlinedQrl(() => {
+					const currentTab = _captures[0];
+					return currentTab.value = "code";
+				}, "HookTree_component_div_div_div_RenderTreeTabs_onCodeClick_0lAe8vTbWRQ", [currentTab])
+			}, null, 3, "n0_7"),
+			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, null, {
+				filters: _wrapProp(hookFilters),
+				isOpen: _wrapProp(hooksOpen),
+				onSelectAll$: handleSelectAll,
+				onClear$: handleClear,
+				onToggleOpen$: /*#__PURE__*/ inlinedQrl(() => {
+					const hooksOpen = _captures[0];
+					return hooksOpen.value = !hooksOpen.value;
+				}, "HookTree_component_div_div_div_div_HookFiltersCard_onToggleOpen_wb4o4GAUjKQ", [hooksOpen]),
+				onFilterChange$: handleFilterChange
+			}, null, 3, "n0_8"), stateTree.value.length > 0 ? /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-4 min-h-0 flex-1 overflow-y-auto p-2" }, /*#__PURE__*/ _jsxSorted(Tree, { onNodeClick: onStateNodeClick }, {
+				data: stateTree,
+				gap: 10,
+				animate: true,
+				animationDuration: 200,
+				isHover: true,
+				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", { value: _wrapProp(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",
+						"q-e:input": /*#__PURE__*/ inlinedQrl((_, el) => {
+							const editValue = _captures[0];
+							editValue.value = el.value;
+						}, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_input_z05hdrGPzhg", [editValue]),
+						"q-e:keydown": /*#__PURE__*/ inlinedQrl((e) => {
+							const cancelEdit = _captures[0];
+							if (e.key === "Escape") cancelEdit();
+						}, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_keydown_0AuxXsO3Wa0", [cancelEdit]),
+						autoFocus: true
+					}, null, 3, 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, "n0_0");
+					return /*#__PURE__*/ _jsxSorted(StateTreeNodeLabel, { node }, null, null, 3, "n0_1");
+				}, "HookTree_component_div_div_div_div_div_Tree_renderNode_vC6C4CEUHF8", [
+					cancelEdit,
+					commitEdit,
+					editValue,
+					editingNodeId
+				])
+			}, null, 3, "n0_9"), 1, "n0_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, "n0_11")], 1, "n0_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, "n0_13")
+		], 1, null)
+	], 1, null), 1, "n0_14");
 }, "HookTree_component_Q5wO3ucVIeA"));
-export {
-  HookTree
-};
+export { HookTree };