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

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

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

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

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

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

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