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

package/dist/ui/features/Packages/components/PackageIcon/PackageIcon.qwik.mjs

@@ -1,23 +0,0 @@
-import { _captures, _jsxSorted, componentQrl, inlinedQrl, useSignal } from "@qwik.dev/core";
-//#region src/features/Packages/components/PackageIcon/PackageIcon.tsx
-var PackageIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(({ packageName, iconUrl }) => {
-	const iconError = useSignal(false);
-	const handleIconError = /* @__PURE__ */ inlinedQrl(() => {
-		const iconError = _captures[0];
-		iconError.value = true;
-	}, "PackageIcon_component_handleIconError_h1ikvbKNpIY", [iconError]);
-	const fallbackInitial = packageName.split("/").pop()?.charAt(0).toUpperCase() || packageName.charAt(0).toUpperCase();
-	if (!iconUrl || iconError.value) return /* @__PURE__ */ _jsxSorted("span", null, { class: "text-primary text-sm font-bold" }, fallbackInitial, 1, "rW_0");
-	return /* @__PURE__ */ _jsxSorted("img", {
-		alt: `${packageName} icon`,
-		src: iconUrl
-	}, {
-		class: "h-6 w-6 rounded",
-		width: "24",
-		height: "24",
-		"q-e:error": handleIconError,
-		loading: "lazy"
-	}, null, 3, "rW_1");
-}, "PackageIcon_component_b4VxVJNHG48"));
-//#endregion
-export { PackageIcon };

package/dist/ui/features/Packages/components/PackageIcon/index.qwik.mjs

@@ -1 +0,0 @@
-import "./PackageIcon.qwik.mjs";

package/dist/ui/features/Performance/Performance.qwik.mjs

@@ -1,118 +0,0 @@
-import { computeEventRows, computePerfViewModel } from "./computePerfViewModel.qwik.mjs";
-import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, isBrowser, useComputedQrl, useSignal, useTaskQrl } from "@qwik.dev/core";
-import { Fragment } from "@qwik.dev/core/jsx-runtime";
-//#region src/features/Performance/Performance.tsx
-var _hf0 = (p0) => p0?.componentName || "-";
-var _hf1 = (p0) => typeof p0.ssr?.ssrCount === "number" ? p0.ssr.ssrCount : "-";
-var _hf2 = (p0) => p0.row.eventName;
-var _hf3 = (p0) => p0.row.calls;
-var _hf4 = (p0) => p0.component.componentName;
-var _hf5 = (p0) => p0.component.calls;
-var _hf6 = (p0) => p0.value.overview;
-var _hf7 = (p0) => p0.value.components.length;
-var _hf8 = (p0, p1) => p1.value === p0.componentName;
-function formatMs(ms) {
-	if (!Number.isFinite(ms)) return "-";
-	if (ms >= 1e3) return `${(ms / 1e3).toFixed(2)}s`;
-	if (ms >= 10) return `${ms.toFixed(0)}ms`;
-	return `${ms.toFixed(2)}ms`;
-}
-/** Single stat card shown in the overview row. */ var StatCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex-1" }, [
-	/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs font-medium" }, _wrapProp(props, "label"), 1, null),
-	/* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-3xl font-semibold" }, _wrapProp(props), 1, null),
-	props.subtitle && /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, _wrapProp(props, "subtitle"), 1, "qe_0")
-], 1, null), 1, "qe_1"), "StatCard_component_mWodOf0kFyU"));
-/** Top overview row of four stat cards. */ var PerformanceOverview = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-	const { overview } = props;
-	const slowest = overview.slowestComponent;
-	return /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-5 md:grid-cols-4" }, [
-		/* @__PURE__ */ _jsxSorted(StatCard, { value: formatMs(overview.totalRenderTime) }, { label: "TOTAL RENDER TIME" }, null, 3, "qe_2"),
-		/* @__PURE__ */ _jsxSorted(StatCard, { subtitle: slowest ? `${formatMs(slowest.avgTime)} avg` : "-" }, {
-			label: "SLOWEST COMPONENT",
-			value: _fnSignal(_hf0, [slowest])
-		}, null, 3, "qe_3"),
-		/* @__PURE__ */ _jsxSorted(StatCard, { value: formatMs(overview.avgTime) }, { label: "AVG TIME" }, null, 3, "qe_4"),
-		/* @__PURE__ */ _jsxSorted(StatCard, { value: String(overview.totalCalls) }, { label: "TOTAL CALLS" }, null, 3, "qe_5")
-	], 1, "qe_6");
-}, "PerformanceOverview_component_PccfcJbBcQM"));
-/** A single component card in the left-hand list. */ var ComponentCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-	const { component: c, selected } = props;
-	return /* @__PURE__ */ _jsxSorted("button", {
-		class: ["border-border bg-card-item-bg hover:bg-card-item-hover-bg w-full rounded-xl border p-4 text-left transition-all duration-200 hover:-translate-y-0.5", selected ? "ring-primary-active ring-2" : ""].join(" "),
-		"q-e:click": props.onClick$
-	}, null, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex items-start justify-between gap-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "min-w-0 flex-1" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate text-base font-semibold" }, _wrapProp(c, "componentName"), 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, ["Avg: ", formatMs(c.avgTime)], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "shrink-0 text-right" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-primary text-lg font-semibold" }, formatMs(c.totalTime), 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, ["SSR: ", _fnSignal(_hf1, [c])], 1, null)], 1, null)], 1, null), 0, c.componentName);
-}, "ComponentCard_component_shbcW80ev2U"));
-/** Single row inside the hook-details table. */ var HookRow = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-3 px-3 py-2 text-sm" }, [
-	/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate" }, _fnSignal(_hf2, [props]), 1, null),
-	/* @__PURE__ */ _jsxSorted("div", null, { class: "text-right" }, formatMs(props.row.time), 1, null),
-	/* @__PURE__ */ _jsxSorted("div", null, { class: "text-right" }, _fnSignal(_hf3, [props]), 1, null)
-], 1, "qe_7"), "HookRow_component_rMs9Cl7A50U"));
-/** Right-hand panel showing hook-level details for a selected component. */ var HookDetailsPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-	const rows = computeEventRows(props.component.csrItems);
-	return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "min-w-0" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate text-base font-semibold" }, [_fnSignal(_hf4, [props]), " Hook Details"], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, [
-		"Total: ",
-		formatMs(props.component.totalTime),
-		" • ",
-		_fnSignal(_hf5, [props]),
-		" calls"
-	], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("button", { "q-e:click": props.onClose$ }, {
-		"aria-label": "close",
-		class: "text-muted-foreground hover:text-foreground rounded p-2 transition-colors"
-	}, "✕", 2, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "min-h-0 flex-1 overflow-y-auto p-4" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg rounded-lg border" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border grid grid-cols-3 border-b px-3 py-2 text-xs font-medium" }, [
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground" }, "HOOK NAME", 3, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-right" }, "TIME", 3, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-right" }, "CALLS", 3, null)
-	], 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "divide-y divide-glass-border" }, [rows.map((row) => /* @__PURE__ */ _jsxSorted(HookRow, { row }, null, null, 3, row.eventName)), rows.length === 0 && /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground px-3 py-4 text-center text-sm" }, "No CSR records for this component.", 3, "qe_8")], 1, null)], 1, null), 1, null)], 1, "qe_9");
-}, "HookDetailsPanel_component_SLSFgmtRaew"));
-var Performance = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-	const perf = useSignal(null);
-	const selectedComponent = useSignal(null);
-	useTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
-		const perf = _captures[0];
-		if (!isBrowser) return;
-		perf.value = window.__QWIK_PERF__ || {
-			ssr: [],
-			csr: []
-		};
-	}, "Performance_component_useTask_qRfojcAJRx0", [perf]));
-	const vm = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-		const perf = _captures[0];
-		return computePerfViewModel(perf.value);
-	}, "Performance_component_vm_useComputed_0R6sxGPNgAs", [perf]));
-	const selectedVm = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-		const selectedComponent = _captures[0], vm = _captures[1];
-		const name = selectedComponent.value;
-		if (!name) return null;
-		return vm.value.components.find((c) => c.componentName === name) ?? null;
-	}, "Performance_component_selectedVm_useComputed_nZ4k4WZsvQ0", [selectedComponent, vm]));
-	const onSelect = /* @__PURE__ */ inlinedQrl((name) => {
-		const selectedComponent = _captures[0];
-		selectedComponent.value = name;
-	}, "Performance_component_onSelect_KLdtDiunnwc", [selectedComponent]);
-	const clearSelect = /* @__PURE__ */ inlinedQrl(() => {
-		const selectedComponent = _captures[0];
-		selectedComponent.value = null;
-	}, "Performance_component_clearSelect_DiCJxQzE8DE", [selectedComponent]);
-	if (!(perf.value?.ssr?.length || perf.value?.csr?.length)) return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-hidden" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg flex h-full items-center justify-center rounded-xl border p-8" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-center text-sm" }, ["No performance data found.", /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-xs" }, "Ensure instrumentation is enabled and interact with the app, then reopen this tab.", 3, null)], 3, null), 3, null), 3, "qe_10");
-	return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-hidden" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full min-h-0 flex-col gap-4" }, [/* @__PURE__ */ _jsxSorted(PerformanceOverview, null, { overview: _fnSignal(_hf6, [vm]) }, null, 3, "qe_11"), /* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border flex min-h-0 flex-1 overflow-hidden rounded-2xl border bg-card-item-bg" }, [
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "min-h-0 flex-1 overflow-y-auto p-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "mb-3 flex items-center justify-between" }, /* @__PURE__ */ _jsxSorted("div", null, null, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-lg font-semibold" }, "Components", 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, [
-			"CSR only • ",
-			_fnSignal(_hf7, [vm]),
-			" total"
-		], 3, null)], 3, null), 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 md:grid-cols-2" }, vm.value.components.map((c) => /* @__PURE__ */ _jsxSorted(ComponentCard, {
-			component: c,
-			onClick$: /* @__PURE__ */ inlinedQrl(() => {
-				const c = _captures[0], onSelect = _captures[1];
-				return onSelect(c.componentName);
-			}, "Performance_component_div_div_div_div_div_ComponentCard_onClick_Wdj23rRG0YU", [c, onSelect]),
-			selected: _fnSignal(_hf8, [c, selectedComponent])
-		}, null, null, 2, c.componentName)), 1, null)], 1, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-l border-glass-border" }, null, 3, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "flex w-[420px] min-w-[320px] flex-col overflow-hidden" }, selectedVm.value ? /* @__PURE__ */ _jsxSorted(HookDetailsPanel, null, {
-			component: _wrapProp(selectedVm),
-			onClose$: clearSelect
-		}, null, 3, "qe_12") : /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full items-center justify-center p-8" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-center text-sm" }, "Select a component to view hook details.", 3, null), 3, "qe_13"), 1, null)
-	], 1, null)], 1, null), 1, "qe_14");
-}, "Performance_component_7v0oxuZ12AM"));
-//#endregion
-export { Performance };

package/dist/ui/features/Performance/computePerfViewModel.qwik.mjs

@@ -1,111 +0,0 @@
-import { groupCsrBySsr, parseComponentAndEventName } from "./transformPerformanceData.qwik.mjs";
-//#region src/features/Performance/computePerfViewModel.ts
-function getCallsFromCsr(item) {
-	return typeof item.renderCount === "number" ? item.renderCount : 1;
-}
-function computeEventRows(csrItems) {
-	const byEvent = /* @__PURE__ */ new Map();
-	for (const item of csrItems) {
-		const eventName = item.eventName || "render";
-		const prev = byEvent.get(eventName) || {
-			time: 0,
-			calls: 0
-		};
-		prev.time += item.duration || 0;
-		prev.calls += getCallsFromCsr(item);
-		byEvent.set(eventName, prev);
-	}
-	return [...byEvent.entries()].map(([eventName, v]) => ({
-		eventName,
-		time: v.time,
-		calls: v.calls
-	})).sort((a, b) => b.time - a.time);
-}
-function computeComponentVmFromCsr(componentName, csrItems, ssr) {
-	let totalTime = 0;
-	let calls = 0;
-	for (const item of csrItems) {
-		totalTime += item.duration || 0;
-		calls += getCallsFromCsr(item);
-	}
-	const avgTime = calls > 0 ? totalTime / calls : 0;
-	return {
-		componentName,
-		totalTime,
-		calls,
-		avgTime,
-		ssr,
-		csrItems
-	};
-}
-/** Build component view-models when SSR entries are available. */ function groupComponentsBySsr(safe) {
-	const grouped = groupCsrBySsr(safe);
-	const result = [];
-	for (const raw of safe.ssr) {
-		const ssrItem = {
-			...raw,
-			phase: "ssr"
-		};
-		const componentName = parseComponentAndEventName(ssrItem.component).componentName;
-		const csrItems = grouped.get(raw) || [];
-		result.push(computeComponentVmFromCsr(componentName, csrItems, ssrItem));
-	}
-	return result;
-}
-/** Build component view-models from CSR-only data, grouped by component name. */ function groupComponentsByName(csrRaw) {
-	const byName = /* @__PURE__ */ new Map();
-	for (const entry of csrRaw) {
-		const csrItem = {
-			...entry,
-			phase: "csr"
-		};
-		const parsed = parseComponentAndEventName(csrItem.component);
-		const list = byName.get(parsed.componentName) || [];
-		list.push({
-			...csrItem,
-			...parsed
-		});
-		byName.set(parsed.componentName, list);
-	}
-	const result = [];
-	for (const [componentName, csrItems] of byName.entries()) result.push(computeComponentVmFromCsr(componentName, csrItems));
-	return result;
-}
-function computeOverview(components) {
-	let totalRenderTime = 0;
-	let totalCalls = 0;
-	for (const c of components) {
-		totalRenderTime += c.totalTime;
-		totalCalls += c.calls;
-	}
-	const avgTime = totalCalls > 0 ? totalRenderTime / totalCalls : 0;
-	const slowest = components.filter((c) => c.calls > 0).reduce((acc, cur) => {
-		if (!acc) return cur;
-		return cur.avgTime > acc.avgTime ? cur : acc;
-	}, void 0);
-	return {
-		totalRenderTime,
-		totalCalls,
-		avgTime,
-		slowestComponent: slowest ? {
-			componentName: slowest.componentName,
-			avgTime: slowest.avgTime,
-			totalTime: slowest.totalTime,
-			calls: slowest.calls
-		} : void 0
-	};
-}
-function computePerfViewModel(perf) {
-	const safe = perf || {
-		ssr: [],
-		csr: []
-	};
-	const components = safe.ssr?.length ? groupComponentsBySsr(safe) : safe.csr?.length ? groupComponentsByName(safe.csr) : [];
-	components.sort((a, b) => b.totalTime - a.totalTime);
-	return {
-		overview: computeOverview(components),
-		components
-	};
-}
-//#endregion
-export { computeEventRows, computePerfViewModel };

package/dist/ui/features/Performance/transformPerformanceData.qwik.mjs

@@ -1,25 +0,0 @@
-//#region src/features/Performance/transformPerformanceData.ts
-function parseComponentAndEventName(component) {
-	return {
-		componentName: (component?.split("_component_")[0] ?? component) || "",
-		eventName: (component.includes("_component_") ? component.split("_component_")[1] ?? "" : "").split("_").filter(Boolean).find((p) => /^use[A-Z_]/.test(p) || /^on[A-Z_]/.test(p))
-	};
-}
-function groupCsrBySsr(data) {
-	const ssrByName = /* @__PURE__ */ new Map();
-	for (const ssrItem of data.ssr) ssrByName.set(parseComponentAndEventName(ssrItem.component).componentName, ssrItem);
-	const result = /* @__PURE__ */ new WeakMap();
-	for (const ssrItem of data.ssr) result.set(ssrItem, []);
-	for (const csrItem of data.csr) {
-		const parsed = parseComponentAndEventName(csrItem.component);
-		const ssrItem = ssrByName.get(parsed.componentName);
-		if (!ssrItem) continue;
-		result.get(ssrItem).push({
-			...csrItem,
-			...parsed
-		});
-	}
-	return result;
-}
-//#endregion
-export { groupCsrBySsr, parseComponentAndEventName };

package/dist/ui/features/RenderTree/RenderTree.qwik.mjs

@@ -1,223 +0,0 @@
-import { __toESM } from "../../_virtual/_rolldown/runtime.qwik.mjs";
-import { IconChevronUpMini } from "../../components/Icons/Icons.qwik.mjs";
-import { QPROPS, QRENDERFN, QSEQ } from "../../packages/kit/src/constants.qwik.mjs";
-import { getViteClientRpc } from "../../packages/kit/src/context.qwik.mjs";
-import "../../packages/kit/src/index.qwik.mjs";
-import { Tree } from "../../components/Tree/Tree.qwik.mjs";
-import { removeNodeFromTree } from "../../components/Tree/vnode.qwik.mjs";
-import { htmlContainer } from "../../utils/location.qwik.mjs";
-import { vnode_toObject } from "../../components/Tree/filterVnode.qwik.mjs";
-import { ISDEVTOOL } from "../../components/Tree/type.qwik.mjs";
-import { isListen } from "../../utils/type.qwik.mjs";
-import { require_browser } from "../../node_modules/.pnpm/debug@4.4.3_supports-color@5.5.0/node_modules/debug/src/browser.qwik.mjs";
-import { QrlUtils, getHookStore } from "./formatTreeData.qwik.mjs";
-import { getHighlighter } from "../../utils/shiki.qwik.mjs";
-import { getQwikState, returnQrlData } from "./data.qwik.mjs";
-import { Resource, _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useResourceQrl, useSignal, useStylesQrl, useVisibleTaskQrl } from "@qwik.dev/core";
-import { Fragment } from "@qwik.dev/core/jsx-runtime";
-import { unwrapStore } from "@qwik.dev/core/internal";
-//#region src/features/RenderTree/RenderTree.tsx
-var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1);
-var _hf0 = (p0) => p0.value === "state" ? { boxShadow: "inset 0 -2px 0 0 var(--color-primary)" } : {};
-var _hf1 = (p0) => p0.value === "code" ? { boxShadow: "inset 0 -2px 0 0 var(--color-primary)" } : {};
-var _hf2 = (p0) => `h-4 w-4 transition-transform duration-200 ${p0.value ? "rotate-180" : "-rotate-90"}`;
-var _hf3 = (p0) => ({
-	maxHeight: p0.value ? "800px" : "0px",
-	opacity: p0.value ? "1" : "0",
-	transition: "max-height 200ms ease, opacity 200ms ease"
-});
-var _hf4 = (p0, p1) => p0[p1] || "";
-var log = (0, import_browser.default)("qwik:devtools:renderTree");
-function getValueColorClass(node, valueText) {
-	switch (node.elementType) {
-		case "string": return "text-red-400";
-		case "number": return "text-green-400";
-		case "boolean": return "text-amber-400";
-		case "function": return "text-purple-400";
-		case "array": return "text-muted-foreground";
-		case "object": return /(Array\[|Object\s\{|Class\s\{)/.test(valueText) ? "text-muted-foreground" : "text-foreground";
-		default: return "text-foreground";
-	}
-}
-var RenderTree = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-	const hookStore = useSignal(getHookStore());
-	useStylesQrl(/* @__PURE__ */ inlinedQrl(`
-    pre.shiki {
-      overflow: auto;
-      padding: 10px;
-    }
-  `, "RenderTree_component_useStyles_WA7YjkOPX10"));
-	const codes = useSignal([]);
-	const data = useSignal([]);
-	const stateTree = useSignal([]);
-	const hookFilters = useSignal([]);
-	const hooksOpen = useSignal(true);
-	const qwikContainer = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-		try {
-			return htmlContainer();
-		} catch (error) {
-			log("get html container failed: %O", error);
-			return null;
-		}
-	}, "RenderTree_component_qwikContainer_useComputed_kMMf6NnQJfk"));
-	const highlightedCodesResource = useResourceQrl(/* @__PURE__ */ inlinedQrl(async ({ track }) => {
-		const codes = _captures[0];
-		track(() => codes.value);
-		if (!codes.value.length) return [];
-		const highlighter = await getHighlighter();
-		return codes.value.map((item) => {
-			let lang = "tsx";
-			if (item.pathId.endsWith(".js")) lang = "js";
-			if (item.pathId.endsWith(".ts")) lang = "ts";
-			if (item.pathId.endsWith(".jsx")) lang = "jsx";
-			if (item.pathId.endsWith(".tsx")) lang = "tsx";
-			return item?.modules?.code ? highlighter.codeToHtml(item.modules.code, {
-				lang,
-				theme: "nord"
-			}) : "";
-		});
-	}, "RenderTree_component_highlightedCodesResource_useResource_YqZOGC0OjzQ", [codes]));
-	useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
-		const data = _captures[0], qwikContainer = _captures[1];
-		data.value = removeNodeFromTree(vnode_toObject(qwikContainer.value.rootVNode), (node) => {
-			return node.name === ISDEVTOOL;
-		});
-	}, "RenderTree_component_useVisibleTask_4dN4gA5TjC4", [data, qwikContainer]));
-	const onNodeClick = /* @__PURE__ */ inlinedQrl(async (node) => {
-		const codes = _captures[0], hookFilters = _captures[1], hookStore = _captures[2], stateTree = _captures[3];
-		log(" current node clicked: %O", node);
-		const rpc = getViteClientRpc();
-		let parsed = [];
-		hookStore.value.clear();
-		if (node.props?.["q:renderFn"]) {
-			hookStore.value.add("render", { data: { render: node.props[QRENDERFN] } });
-			parsed = getQwikState(QrlUtils.getChunkName(node.props[QRENDERFN]));
-		}
-		if (Array.isArray(node.props?.["q:seq"]) && parsed.length > 0) [...parsed, ...returnQrlData(node.props?.[QSEQ])].forEach((item) => {
-			hookStore.value.add(item.hookType, item);
-		});
-		if (node.props?.["q:props"]) {
-			const props = unwrapStore(node.props[QPROPS]);
-			Object.entries(props).forEach(([key, value]) => {
-				hookStore.value.add(isListen(key) ? "listens" : "props", { data: { [key]: value } });
-			});
-		}
-		codes.value = [];
-		const res = await rpc?.getModulesByPathIds(hookStore.value.findAllQrlPaths()) ?? [];
-		log("getModulesByPathIds return: %O", res);
-		codes.value = res.filter((item) => item.modules);
-		stateTree.value = hookStore.value.buildTree();
-		hookFilters.value = hookStore.value.getFilterList();
-	}, "RenderTree_component_onNodeClick_wqsx2qHoX2Q", [
-		codes,
-		hookFilters,
-		hookStore,
-		stateTree
-	]);
-	const currentTab = useSignal("state");
-	return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-hidden rounded-2xl border border-glass-border bg-card-item-bg" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full w-full" }, [
-		/* @__PURE__ */ _jsxSorted("div", null, {
-			class: "w-1/2 overflow-hidden p-3 custom-scrollbar",
-			style: { minWidth: "360px" }
-		}, /* @__PURE__ */ _jsxSorted(Tree, null, {
-			data,
-			onNodeClick
-		}, null, 3, "N0_0"), 1, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-l border-glass-border" }, 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("div", null, { class: "" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-b border-glass-border flex space-x-2 pb-1" }, [/* @__PURE__ */ _jsxSorted("button", {
-				class: ["px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200", currentTab.value === "state" ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground hover:bg-foreground/5"],
-				"q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, currentTab) => currentTab.value = "state", "RenderTree_component_div_div_div_div_div_button_q_e_click_0BjFkeQoET0"),
-				"q:p": currentTab
-			}, { style: _fnSignal(_hf0, [currentTab]) }, "State", 6, null), /* @__PURE__ */ _jsxSorted("button", {
-				class: ["px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200", currentTab.value === "code" ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground hover:bg-foreground/5"],
-				"q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, currentTab) => currentTab.value = "code", "RenderTree_component_div_div_div_div_div_button_q_e_click_1_39v2rkQNmhc"),
-				"q:p": currentTab
-			}, { style: _fnSignal(_hf1, [currentTab]) }, "Code", 6, null)], 1, null), 1, null),
-			currentTab.value === "state" && /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-5 flex min-h-0 flex-1 flex-col" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "rounded-xl border border-glass-border bg-card-item-bg" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-b border-glass-border flex items-center justify-between 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": /* @__PURE__ */ inlinedQrl(() => {
-					const hookFilters = _captures[0], hookStore = _captures[1], stateTree = _captures[2];
-					hookFilters.value = hookFilters.value.map((item) => {
-						item.display = true;
-						return item;
-					});
-					stateTree.value = hookStore.value.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
-				}, "RenderTree_component_div_div_div_div_div_div_div_button_q_e_click_rG0Q01Im31s", [
-					hookFilters,
-					hookStore,
-					stateTree
-				]) }, { class: "text-primary px-2 py-1 text-xs hover:underline" }, "Select all", 2, null),
-				/* @__PURE__ */ _jsxSorted("button", { "q-e:click": /* @__PURE__ */ inlinedQrl(() => {
-					const hookFilters = _captures[0], hookStore = _captures[1], stateTree = _captures[2];
-					hookFilters.value = hookFilters.value.map((item) => {
-						item.display = false;
-						return item;
-					});
-					stateTree.value = hookStore.value.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
-				}, "RenderTree_component_div_div_div_div_div_div_div_button_q_e_click_1_eWgfykHXlO0", [
-					hookFilters,
-					hookStore,
-					stateTree
-				]) }, { class: "text-muted-foreground hover:text-foreground px-2 py-1 text-xs hover:underline" }, "Clear", 2, null),
-				/* @__PURE__ */ _jsxSorted("button", { "q-e:click": /* @__PURE__ */ inlinedQrl(() => {
-					const hooksOpen = _captures[0];
-					return hooksOpen.value = !hooksOpen.value;
-				}, "RenderTree_component_div_div_div_div_div_div_div_button_q_e_click_2_aUICNVG1290", [hooksOpen]) }, {
-					"aria-label": "toggle hooks",
-					class: "text-muted-foreground hover:text-foreground rounded p-1"
-				}, /* @__PURE__ */ _jsxSorted(IconChevronUpMini, null, { class: _fnSignal(_hf2, [hooksOpen]) }, null, 3, "N0_1"), 0, null)
-			], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, {
-				class: "grid grid-cols-2 gap-x-6 gap-y-3 overflow-hidden px-3 py-2 text-sm sm:grid-cols-3 lg:grid-cols-4",
-				style: _fnSignal(_hf3, [hooksOpen])
-			}, hookFilters.value.map((item, idx) => {
-				const qrl_4294901769 = /* @__PURE__ */ inlinedQrl((ev, _1, idx) => {
-					const hookFilters = _captures[0], hookStore = _captures[1], stateTree = _captures[2];
-					const target = ev.target;
-					hookFilters.value[idx].display = target.checked;
-					stateTree.value = hookStore.value.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
-				}, "RenderTree_component_div_div_div_div_div_div_label_input_q_e_change_zKnIYzSwl0E", [
-					hookFilters,
-					hookStore,
-					stateTree
-				]);
-				return /* @__PURE__ */ _jsxSorted("label", null, { class: "flex items-center gap-2 cursor-pointer" }, [/* @__PURE__ */ _jsxSorted("input", {
-					checked: _wrapProp(item, "display"),
-					"q-e:change": qrl_4294901769,
-					"q:p": idx
-				}, {
-					class: "h-4 w-4 rounded focus:ring-0 cursor-pointer",
-					style: { accentColor: "var(--color-primary-active)" },
-					type: "checkbox"
-				}, null, 6, null), /* @__PURE__ */ _jsxSorted("span", null, { class: "ml-2 select-none" }, _wrapProp(item, "key"), 1, null)], 1, idx);
-			}), 1, null)], 1, null), /* @__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 label = node.label || node.name || "";
-				const parts = label.split(":");
-				if (node.children && parts.length === 1) return /* @__PURE__ */ _jsxSorted("span", null, { class: "font-semibold text-pink-400" }, label, 1, "N0_2");
-				if (parts.length > 1) {
-					const key = parts[0];
-					const value = parts.slice(1).join(":").trim();
-					const valueClass = getValueColorClass(node, value);
-					return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
-						/* @__PURE__ */ _jsxSorted("span", null, { class: "text-blue-400" }, key, 1, null),
-						/* @__PURE__ */ _jsxSorted("span", null, { class: "text-foreground/70" }, " : ", 3, null),
-						/* @__PURE__ */ _jsxSorted("span", { class: valueClass }, null, value, 1, null)
-					], 1, "N0_3");
-				}
-				return /* @__PURE__ */ _jsxSorted("span", null, null, label, 1, "N0_4");
-			}, "RenderTree_component_div_div_div_div_div_Tree_renderNode_Ws4xKiaa8pU") }, {
-				data: stateTree,
-				gap: 10,
-				animate: true,
-				animationDuration: 200,
-				isHover: true
-			}, null, 3, "N0_5"), 1, null)], 1, "N0_6"),
-			currentTab.value === "code" && /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-4 min-h-0 flex-1 overflow-y-auto rounded-xl border border-glass-border bg-card-item-bg 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, "N0_7"),
-				onResolved: (highlighted) => /* @__PURE__ */ _jsxSorted(Fragment, null, null, codes.value.map((item, idx) => /* @__PURE__ */ _jsxSorted(Fragment, null, null, /* @__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 break-all text-base font-semibold" }, _wrapProp(item, "pathId"), 1, null), /* @__PURE__ */ _jsxSorted("pre", { dangerouslySetInnerHTML: _fnSignal(_hf4, [highlighted, idx]) }, { class: "overflow-hidden" }, null, 3, null)], 1, null), 1, "N0_8")), 1, "N0_9")
-			}, null, 3, "N0_10"), 1, "N0_11")
-		], 1, null)
-	], 1, null), 1, "N0_12");
-}, "RenderTree_component_EsCz0RYR5LE"));
-//#endregion
-export { RenderTree };

package/dist/ui/features/RenderTree/TreeBuilder.qwik.mjs

@@ -1,145 +0,0 @@
-import { isValue } from "../../utils/type.qwik.mjs";
-//#region src/features/RenderTree/TreeBuilder.ts
-/**
-* Builder class for creating TreeNode structures from objects.
-* Handles all types of data transformation to tree format.
-*/ var TreeBuilder = class {
-	constructor() {
-		this.idCounter = 0;
-	}
-	/**
-	* Generate a unique ID for a tree node
-	*/ generateId() {
-		return `node-${this.idCounter++}`;
-	}
-	/**
-	* Reset the ID counter (useful for testing)
-	*/ resetIdCounter() {
-		this.idCounter = 0;
-	}
-	/**
-	* Create a group node (parent node with children)
-	*/ createGroupNode(label, children = []) {
-		return {
-			id: this.generateId(),
-			label,
-			props: {},
-			children
-		};
-	}
-	/**
-	* Convert any object to TreeNode array
-	*/ objectToTree(obj, parentPath = "") {
-		if (!obj || typeof obj !== "object") return [];
-		if (Array.isArray(obj)) return this.arrayToTree(obj, parentPath);
-		return this.objectPropertiesToTree(obj, parentPath);
-	}
-	/**
-	* Convert array to TreeNode array
-	*/ arrayToTree(arr, parentPath) {
-		return arr.map((item, index) => {
-			const path = parentPath ? `${parentPath}[${index}]` : `[${index}]`;
-			return this.createNode(item, `[${index}]`, path);
-		}).filter((node) => node !== null);
-	}
-	/**
-	* Convert object properties to TreeNode array
-	*/ objectPropertiesToTree(obj, parentPath) {
-		const result = [];
-		for (const [key, value] of Object.entries(obj)) {
-			const path = parentPath ? `${parentPath}.${key}` : key;
-			const node = this.createNode(value, key, path);
-			if (node) result.push(node);
-		}
-		return result;
-	}
-	/**
-	* Create a single TreeNode from a value
-	*/ createNode(value, key, path) {
-		if (value === null || value === void 0) return this.createPrimitiveNode(key, value, "null");
-		const primitiveNode = this.tryCreatePrimitiveNode(key, value);
-		if (primitiveNode) return primitiveNode;
-		if (Array.isArray(value)) return this.createArrayNode(key, value, path);
-		if (typeof value === "object") return this.createObjectNode(key, value, path);
-		return null;
-	}
-	/**
-	* Try to create a primitive node (boolean, number, string, function)
-	*/ tryCreatePrimitiveNode(key, value) {
-		switch (typeof value) {
-			case "boolean": return this.createPrimitiveNode(key, value, "boolean");
-			case "number": return this.createPrimitiveNode(key, value, "number");
-			case "string": return this.createPrimitiveNode(key, `"${value}"`, "string");
-			case "function": return this.createFunctionNode(key, value);
-			default: return null;
-		}
-	}
-	/**
-	* Create a node for primitive values
-	*/ createPrimitiveNode(key, value, elementType) {
-		return {
-			id: this.generateId(),
-			label: `${key}: ${value}`,
-			props: {},
-			elementType
-		};
-	}
-	/**
-	* Create a node for function values
-	*/ createFunctionNode(key, fn) {
-		const fnName = fn.name ? `ƒ ${fn.name}()` : "ƒ()";
-		return {
-			id: this.generateId(),
-			label: `${key}: ${fnName}`,
-			props: {},
-			elementType: "function"
-		};
-	}
-	/**
-	* Create a node for array values
-	*/ createArrayNode(key, arr, path) {
-		const children = arr.map((item, index) => {
-			const childPath = `${path}[${index}]`;
-			return this.createNode(item, index.toString(), childPath);
-		}).filter((node) => node !== null);
-		return {
-			id: this.generateId(),
-			label: `${key}: Array[${arr.length}]`,
-			props: {},
-			elementType: "array",
-			children
-		};
-	}
-	/**
-	* Create a node for object values
-	*/ createObjectNode(key, obj, path) {
-		const constructorName = obj.constructor?.name;
-		if (!(constructorName === "Object")) return this.createClassInstanceNode(key, obj, constructorName);
-		const keys = Object.keys(obj);
-		const children = Object.entries(obj).map(([childKey, childValue]) => {
-			const childPath = `${path}.${childKey}`;
-			return this.createNode(childValue, childKey, childPath);
-		}).filter((node) => node !== null);
-		return {
-			id: this.generateId(),
-			label: `${key}: Object {${keys.length}}`,
-			props: {},
-			elementType: "object",
-			children
-		};
-	}
-	/**
-	* Create a node for class instances (non-plain objects)
-	*/ createClassInstanceNode(key, obj, className) {
-		const node = {
-			id: this.generateId(),
-			label: `${key}: Class {${className}}`,
-			props: {},
-			elementType: "object"
-		};
-		if (isValue(obj)) node.children = [this.createNode(obj.value, "value", "value")].filter((n) => n !== null);
-		return node;
-	}
-};
-//#endregion
-export { TreeBuilder };