@qwik.dev/devtools 0.2.8 → 0.3.0-beta.3

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

@@ -0,0 +1,713 @@
+import { componentQrl, inlinedQrl, useComputedQrl, _captures, useSignal, useVisibleTaskQrl, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
+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 { 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;
+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;
+}
+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);
+  });
+}
+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");
+}, "HookTree_component_Q5wO3ucVIeA"));
+export {
+  HookTree
+};