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

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

@@ -1,254 +1,111 @@
-import { componentQrl, inlinedQrl, useSignal, useTaskQrl, _captures, useVisibleTaskQrl, useComputedQrl, _jsxSorted, _fnSignal, _wrapProp } from "@qwik.dev/core";
+import { getPageDataSource } from "../../devtools/page-data-source.qwik.mjs";
 import { computePerfViewModel } from "./computePerfViewModel.qwik.mjs";
 import { ComponentCard } from "./components/ComponentCard.qwik.mjs";
 import { HookDetailsPanel } from "./components/HookDetailsPanel.qwik.mjs";
 import { PerformanceOverview } from "./components/PerformanceOverview.qwik.mjs";
-import { getPageDataSource } from "../../devtools/page-data-source.qwik.mjs";
-const _hf0 = (p0) => p0.value.overview;
-const _hf1 = (p0) => p0.value.components.length;
-const _hf2 = (p0, p1) => p1.value === p0.componentName;
-const _hf3 = (p0) => p0.value.length;
-const Performance = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  const perf = useSignal(null);
-  const selectedComponent = useSignal(null);
-  const renderEvents = useSignal([]);
-  useTaskQrl(/* @__PURE__ */ inlinedQrl(async () => {
-    const perf2 = _captures[0];
-    const source = getPageDataSource();
-    perf2.value = await source.readPerfData() ?? {
-      ssr: [],
-      csr: []
-    };
-  }, "Performance_component_useTask_WHiyTVV6c8g", [
-    perf
-  ]));
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async ({ cleanup }) => {
-    const renderEvents2 = _captures[0];
-    const source = getPageDataSource();
-    const data = await source.readPerfData();
-    const all = [
-      ...data?.ssr || [],
-      ...data?.csr || []
-    ];
-    if (all.length) {
-      renderEvents2.value = all.map((e) => ({
-        component: e.component || "unknown",
-        phase: e.phase || "csr",
-        duration: e.duration || 0,
-        timestamp: e.end || e.start || Date.now()
-      })).slice(-200);
-    }
-    const unsub = source.subscribeRenderEvents((event) => {
-      renderEvents2.value = [
-        ...renderEvents2.value,
-        event
-      ].slice(-200);
-    });
-    if (unsub) {
-      cleanup(unsub);
-    }
-  }, "Performance_component_useVisibleTask_jEYvQu47TE8", [
-    renderEvents
-  ]));
-  const vm = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const perf2 = _captures[0];
-    return computePerfViewModel(perf2.value);
-  }, "Performance_component_vm_useComputed_go9mqCd7Rk0", [
-    perf
-  ]));
-  const selectedVm = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const selectedComponent2 = _captures[0], vm2 = _captures[1];
-    const name = selectedComponent2.value;
-    if (!name) {
-      return null;
-    }
-    return vm2.value.components.find((c) => c.componentName === name) ?? null;
-  }, "Performance_component_selectedVm_useComputed_9gMJskA6xTk", [
-    selectedComponent,
-    vm
-  ]));
-  const onSelect = /* @__PURE__ */ inlinedQrl((name) => {
-    const selectedComponent2 = _captures[0];
-    selectedComponent2.value = name;
-  }, "Performance_component_onSelect_iR9qDY0SnqQ", [
-    selectedComponent
-  ]);
-  const clearSelect = /* @__PURE__ */ inlinedQrl(() => {
-    const selectedComponent2 = _captures[0];
-    selectedComponent2.value = null;
-  }, "Performance_component_clearSelect_r3DeYHRX6Wc", [
-    selectedComponent
-  ]);
-  const clearRenderEvents = /* @__PURE__ */ inlinedQrl(() => {
-    const renderEvents2 = _captures[0];
-    renderEvents2.value = [];
-  }, "Performance_component_clearRenderEvents_HK009X9J0PU", [
-    renderEvents
-  ]);
-  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
-    const _rawProps2 = _captures[0], renderEvents2 = _captures[1], selectedComponent2 = _captures[2];
-    if (!track(() => _rawProps2.state.clearPerformanceRequested)) {
-      return;
-    }
-    renderEvents2.value = [];
-    selectedComponent2.value = null;
-    _rawProps2.state.clearPerformanceRequested = false;
-  }, "Performance_component_useTask_1_frMsS4pe524", [
-    _rawProps,
-    renderEvents,
-    selectedComponent
-  ]));
-  const hasData = (perf.value?.ssr?.length ?? 0) > 0 || (perf.value?.csr?.length ?? 0) > 0;
-  const hasRenderEvents = renderEvents.value.length > 0;
-  if (!hasData && !hasRenderEvents) {
-    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, "pZ_0");
-  }
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "h-full w-full flex-1 overflow-y-auto"
-  }, /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "flex min-h-0 flex-col gap-4"
-  }, [
-    hasData && /* @__PURE__ */ _jsxSorted(PerformanceOverview, null, {
-      overview: _fnSignal(_hf0, [
-        vm
-      ])
-    }, null, 3, "pZ_1"),
-    hasData && /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "border-glass-border bg-card-item-bg flex min-h-0 overflow-hidden rounded-2xl border"
-    }, [
-      /* @__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(_hf1, [
-              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 c2 = _captures[0], onSelect2 = _captures[1];
-            return onSelect2(c2.componentName);
-          }, "Performance_component_div_div_div_div_div_ComponentCard_onClick_oHPGixzaMYc", [
-            c,
-            onSelect
-          ]),
-          selected: _fnSignal(_hf2, [
-            c,
-            selectedComponent
-          ])
-        }, null, null, 2, c.componentName)), 1, null)
-      ], 1, null),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "border-glass-border border-l"
-      }, 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, "pZ_2") : /* @__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, "pZ_3"), 1, null)
-    ], 1, "pZ_4"),
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "border-glass-border bg-card-item-bg rounded-2xl border 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"
-          }, "Live Renders", 3, null),
-          /* @__PURE__ */ _jsxSorted("div", null, {
-            class: "text-muted-foreground text-xs"
-          }, [
-            _fnSignal(_hf3, [
-              renderEvents
-            ]),
-            " events captured"
-          ], 3, null)
-        ], 3, null),
-        hasRenderEvents && /* @__PURE__ */ _jsxSorted("button", null, {
-          class: "text-muted-foreground hover:text-foreground rounded px-2 py-1 text-xs transition-colors",
-          "q-e:click": clearRenderEvents
-        }, "Clear", 3, "pZ_5")
-      ], 1, null),
-      !hasRenderEvents ? /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "text-muted-foreground py-6 text-center text-sm"
-      }, "No renders captured yet. Interact with the app to trigger component renders.", 3, "pZ_6") : /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "max-h-[400px] overflow-y-auto"
-      }, /* @__PURE__ */ _jsxSorted("table", null, {
-        class: "w-full text-sm"
-      }, [
-        /* @__PURE__ */ _jsxSorted("thead", null, null, /* @__PURE__ */ _jsxSorted("tr", null, {
-          class: "text-muted-foreground border-glass-border border-b text-left text-xs"
-        }, [
-          /* @__PURE__ */ _jsxSorted("th", null, {
-            class: "py-1.5 pr-3 font-medium"
-          }, "Time", 3, null),
-          /* @__PURE__ */ _jsxSorted("th", null, {
-            class: "py-1.5 pr-3 font-medium"
-          }, "Component", 3, null),
-          /* @__PURE__ */ _jsxSorted("th", null, {
-            class: "py-1.5 pr-3 text-right font-medium"
-          }, "Duration", 3, null),
-          /* @__PURE__ */ _jsxSorted("th", null, {
-            class: "py-1.5 font-medium"
-          }, "Phase", 3, null)
-        ], 3, null), 3, null),
-        /* @__PURE__ */ _jsxSorted("tbody", null, null, renderEvents.value.slice().reverse().map((evt, i) => /* @__PURE__ */ _jsxSorted("tr", null, {
-          class: "border-glass-border/50 border-b last:border-0"
-        }, [
-          /* @__PURE__ */ _jsxSorted("td", null, {
-            class: "text-muted-foreground py-1.5 pr-3 font-mono text-xs"
-          }, new Date(evt.timestamp).toLocaleTimeString(), 1, null),
-          /* @__PURE__ */ _jsxSorted("td", null, {
-            class: "text-primary/80 py-1.5 pr-3 font-mono"
-          }, _wrapProp(evt, "component"), 1, null),
-          /* @__PURE__ */ _jsxSorted("td", null, {
-            class: "py-1.5 pr-3 text-right font-mono"
-          }, evt.duration > 0 ? `${evt.duration.toFixed(1)}ms` : "-", 1, null),
-          /* @__PURE__ */ _jsxSorted("td", null, {
-            class: "py-1.5"
-          }, /* @__PURE__ */ _jsxSorted("span", {
-            class: [
-              "rounded-full px-2 py-0.5 text-xs font-medium",
-              evt.phase === "ssr" ? "bg-blue-500/10 text-blue-400" : "bg-green-500/10 text-green-400"
-            ].join(" ")
-          }, null, _wrapProp(evt, "phase"), 1, null), 1, null)
-        ], 1, i)), 1, null)
-      ], 1, null), 1, "pZ_7")
-    ], 1, null)
-  ], 1, null), 1, "pZ_8");
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useTaskQrl, useVisibleTaskQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.value.overview;
+var _hf1 = (p0) => p0.value.components.length;
+var _hf2 = (p0, p1) => p1.value === p0.componentName;
+var _hf3 = (p0) => p0.value.length;
+var Performance = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const perf = useSignal(null);
+	const selectedComponent = useSignal(null);
+	const renderEvents = useSignal([]);
+	useTaskQrl(/*#__PURE__*/ inlinedQrl(async () => {
+		const perf = _captures[0];
+		perf.value = await getPageDataSource().readPerfData() ?? {
+			ssr: [],
+			csr: []
+		};
+	}, "Performance_component_useTask_WHiyTVV6c8g", [perf]));
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async ({ cleanup }) => {
+		const renderEvents = _captures[0];
+		const source = getPageDataSource();
+		const data = await source.readPerfData();
+		const all = [...data?.ssr || [], ...data?.csr || []];
+		if (all.length) renderEvents.value = all.map((e) => ({
+			component: e.component || "unknown",
+			phase: e.phase || "csr",
+			duration: e.duration || 0,
+			timestamp: e.end || e.start || Date.now()
+		})).slice(-200);
+		const unsub = source.subscribeRenderEvents((event) => {
+			renderEvents.value = [...renderEvents.value, event].slice(-200);
+		});
+		if (unsub) cleanup(unsub);
+	}, "Performance_component_useVisibleTask_jEYvQu47TE8", [renderEvents]));
+	const vm = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const perf = _captures[0];
+		return computePerfViewModel(perf.value);
+	}, "Performance_component_vm_useComputed_go9mqCd7Rk0", [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_9gMJskA6xTk", [selectedComponent, vm]));
+	const onSelect = /*#__PURE__*/ inlinedQrl((name) => {
+		const selectedComponent = _captures[0];
+		selectedComponent.value = name;
+	}, "Performance_component_onSelect_iR9qDY0SnqQ", [selectedComponent]);
+	const clearSelect = /*#__PURE__*/ inlinedQrl(() => {
+		const selectedComponent = _captures[0];
+		selectedComponent.value = null;
+	}, "Performance_component_clearSelect_r3DeYHRX6Wc", [selectedComponent]);
+	const clearRenderEvents = /*#__PURE__*/ inlinedQrl(() => {
+		const renderEvents = _captures[0];
+		renderEvents.value = [];
+	}, "Performance_component_clearRenderEvents_HK009X9J0PU", [renderEvents]);
+	useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track }) => {
+		const _rawProps = _captures[0], renderEvents = _captures[1], selectedComponent = _captures[2];
+		if (!track(() => _rawProps.state.clearPerformanceRequested)) return;
+		renderEvents.value = [];
+		selectedComponent.value = null;
+		_rawProps.state.clearPerformanceRequested = false;
+	}, "Performance_component_useTask_1_frMsS4pe524", [
+		_rawProps,
+		renderEvents,
+		selectedComponent
+	]));
+	const hasData = (perf.value?.ssr?.length ?? 0) > 0 || (perf.value?.csr?.length ?? 0) > 0;
+	const hasRenderEvents = renderEvents.value.length > 0;
+	if (!hasData && !hasRenderEvents) 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, "pZ_0");
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-y-auto" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-h-0 flex-col gap-4" }, [
+		hasData && /*#__PURE__*/ _jsxSorted(PerformanceOverview, null, { overview: _fnSignal(_hf0, [vm]) }, null, 3, "pZ_1"),
+		hasData && /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex min-h-0 overflow-hidden rounded-2xl border" }, [
+			/*#__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(_hf1, [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_oHPGixzaMYc", [c, onSelect]),
+				selected: _fnSignal(_hf2, [c, selectedComponent])
+			}, null, null, 2, c.componentName)), 1, null)], 1, null),
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border border-l" }, 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, "pZ_2") : /*#__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, "pZ_3"), 1, null)
+		], 1, "pZ_4"),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-2xl border 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" }, "Live Renders", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, [_fnSignal(_hf3, [renderEvents]), " events captured"], 3, null)], 3, null), hasRenderEvents && /*#__PURE__*/ _jsxSorted("button", null, {
+			class: "text-muted-foreground hover:text-foreground rounded px-2 py-1 text-xs transition-colors",
+			"q-e:click": clearRenderEvents
+		}, "Clear", 3, "pZ_5")], 1, null), !hasRenderEvents ? /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground py-6 text-center text-sm" }, "No renders captured yet. Interact with the app to trigger component renders.", 3, "pZ_6") : /*#__PURE__*/ _jsxSorted("div", null, { class: "max-h-[400px] overflow-y-auto" }, /*#__PURE__*/ _jsxSorted("table", null, { class: "w-full text-sm" }, [/*#__PURE__*/ _jsxSorted("thead", null, null, /*#__PURE__*/ _jsxSorted("tr", null, { class: "text-muted-foreground border-glass-border border-b text-left text-xs" }, [
+			/*#__PURE__*/ _jsxSorted("th", null, { class: "py-1.5 pr-3 font-medium" }, "Time", 3, null),
+			/*#__PURE__*/ _jsxSorted("th", null, { class: "py-1.5 pr-3 font-medium" }, "Component", 3, null),
+			/*#__PURE__*/ _jsxSorted("th", null, { class: "py-1.5 pr-3 text-right font-medium" }, "Duration", 3, null),
+			/*#__PURE__*/ _jsxSorted("th", null, { class: "py-1.5 font-medium" }, "Phase", 3, null)
+		], 3, null), 3, null), /*#__PURE__*/ _jsxSorted("tbody", null, null, renderEvents.value.slice().reverse().map((evt, i) => /*#__PURE__*/ _jsxSorted("tr", null, { class: "border-glass-border/50 border-b last:border-0" }, [
+			/*#__PURE__*/ _jsxSorted("td", null, { class: "text-muted-foreground py-1.5 pr-3 font-mono text-xs" }, new Date(evt.timestamp).toLocaleTimeString(), 1, null),
+			/*#__PURE__*/ _jsxSorted("td", null, { class: "text-primary/80 py-1.5 pr-3 font-mono" }, _wrapProp(evt, "component"), 1, null),
+			/*#__PURE__*/ _jsxSorted("td", null, { class: "py-1.5 pr-3 text-right font-mono" }, evt.duration > 0 ? `${evt.duration.toFixed(1)}ms` : "-", 1, null),
+			/*#__PURE__*/ _jsxSorted("td", null, { class: "py-1.5" }, /*#__PURE__*/ _jsxSorted("span", { class: ["rounded-full px-2 py-0.5 text-xs font-medium", evt.phase === "ssr" ? "bg-blue-500/10 text-blue-400" : "bg-green-500/10 text-green-400"].join(" ") }, null, _wrapProp(evt, "phase"), 1, null), 1, null)
+		], 1, i)), 1, null)], 1, null), 1, "pZ_7")], 1, null)
+	], 1, null), 1, "pZ_8");
 }, "Performance_component_srUJ38wM5RE"));
-export {
-  Performance
-};
+export { Performance };

package/dist/ui/packages/devtools/ui/src/features/Performance/components/ComponentCard.qwik.mjs

@@ -1,49 +1,11 @@
-import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal } from "@qwik.dev/core";
 import { formatMs } from "../utils/formatMs.qwik.mjs";
-const _hf0 = (p0) => p0.component.componentName;
-const _hf1 = (p0) => typeof p0.component.ssr?.ssrCount === "number" ? p0.component.ssr.ssrCount : "-";
-const ComponentCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  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",
-      _rawProps.selected ? "ring-primary-active ring-2" : ""
-    ].join(" "),
-    "q-e:click": _rawProps.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"
-      }, _fnSignal(_hf0, [
-        _rawProps
-      ]), 1, null),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "text-muted-foreground mt-1 text-xs"
-      }, [
-        "Avg: ",
-        formatMs(_rawProps.component.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(_rawProps.component.totalTime), 1, null),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "text-muted-foreground text-xs"
-      }, [
-        "SSR: ",
-        _fnSignal(_hf1, [
-          _rawProps
-        ])
-      ], 1, null)
-    ], 1, null)
-  ], 1, null), 0, _rawProps.component.componentName);
+import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.component.componentName;
+var _hf1 = (p0) => typeof p0.component.ssr?.ssrCount === "number" ? p0.component.ssr.ssrCount : "-";
+var ComponentCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	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", _rawProps.selected ? "ring-primary-active ring-2" : ""].join(" "),
+		"q-e:click": _rawProps.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" }, _fnSignal(_hf0, [_rawProps]), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, ["Avg: ", formatMs(_rawProps.component.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(_rawProps.component.totalTime), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, ["SSR: ", _fnSignal(_hf1, [_rawProps])], 1, null)], 1, null)], 1, null), 0, _rawProps.component.componentName);
 }, "ComponentCard_component_n3qw8GM0NvQ"));
-export {
-  ComponentCard
-};
+export { ComponentCard };

package/dist/ui/packages/devtools/ui/src/features/Performance/components/HookDetailsPanel.qwik.mjs

@@ -1,95 +1,31 @@
-import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal } from "@qwik.dev/core";
-import { Fragment } from "@qwik.dev/core/jsx-runtime";
 import { computeEventRows } from "../computePerfViewModel.qwik.mjs";
 import { formatMs } from "../utils/formatMs.qwik.mjs";
-const _hf0 = (p0) => p0.row.eventName;
-const _hf1 = (p0) => p0.row.calls;
-const _hf2 = (p0) => p0.component.componentName;
-const _hf3 = (p0) => p0.component.calls;
-const HookRow = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => /* @__PURE__ */ _jsxSorted("div", null, {
-  class: "grid grid-cols-3 px-3 py-2 text-sm"
-}, [
-  /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "truncate"
-  }, _fnSignal(_hf0, [
-    _rawProps
-  ]), 1, null),
-  /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "text-right"
-  }, formatMs(_rawProps.row.time), 1, null),
-  /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "text-right"
-  }, _fnSignal(_hf1, [
-    _rawProps
-  ]), 1, null)
+import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+var _hf0 = (p0) => p0.row.eventName;
+var _hf1 = (p0) => p0.row.calls;
+var _hf2 = (p0) => p0.component.componentName;
+var _hf3 = (p0) => p0.component.calls;
+var HookRow = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-3 px-3 py-2 text-sm" }, [
+	/*#__PURE__*/ _jsxSorted("div", null, { class: "truncate" }, _fnSignal(_hf0, [_rawProps]), 1, null),
+	/*#__PURE__*/ _jsxSorted("div", null, { class: "text-right" }, formatMs(_rawProps.row.time), 1, null),
+	/*#__PURE__*/ _jsxSorted("div", null, { class: "text-right" }, _fnSignal(_hf1, [_rawProps]), 1, null)
 ], 1, "Tx_0"), "HookRow_component_lEGVvl0yq4c"));
-const HookDetailsPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  const rows = computeEventRows(_rawProps.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(_hf2, [
-            _rawProps
-          ]),
-          " Hook Details"
-        ], 1, null),
-        /* @__PURE__ */ _jsxSorted("div", null, {
-          class: "text-muted-foreground mt-1 text-xs"
-        }, [
-          "Total: ",
-          formatMs(_rawProps.component.totalTime),
-          " • ",
-          _fnSignal(_hf3, [
-            _rawProps
-          ]),
-          " calls"
-        ], 1, null)
-      ], 1, null),
-      /* @__PURE__ */ _jsxSorted("button", {
-        "q-e:click": _rawProps.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-glass-border divide-y"
-      }, [
-        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, "Tx_1")
-      ], 1, null)
-    ], 1, null), 1, null)
-  ], 1, "Tx_2");
+var HookDetailsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const rows = computeEventRows(_rawProps.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(_hf2, [_rawProps]), " Hook Details"], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, [
+		"Total: ",
+		formatMs(_rawProps.component.totalTime),
+		" • ",
+		_fnSignal(_hf3, [_rawProps]),
+		" calls"
+	], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.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-glass-border divide-y" }, [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, "Tx_1")], 1, null)], 1, null), 1, null)], 1, "Tx_2");
 }, "HookDetailsPanel_component_8uC9a2UU5yo"));
-export {
-  HookDetailsPanel
-};
+export { HookDetailsPanel };

package/dist/ui/packages/devtools/ui/src/features/Performance/components/PerformanceOverview.qwik.mjs

@@ -1,36 +1,16 @@
-import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal } from "@qwik.dev/core";
 import { formatMs } from "../utils/formatMs.qwik.mjs";
 import { StatCard } from "./StatCard.qwik.mjs";
-const _hf0 = (p0) => p0.overview.slowestComponent?.componentName || "-";
-const PerformanceOverview = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "grid grid-cols-1 gap-5 md:grid-cols-4"
-  }, [
-    /* @__PURE__ */ _jsxSorted(StatCard, {
-      value: formatMs(_rawProps.overview.totalRenderTime)
-    }, {
-      label: "TOTAL RENDER TIME"
-    }, null, 3, "BX_0"),
-    /* @__PURE__ */ _jsxSorted(StatCard, {
-      subtitle: _rawProps.overview.slowestComponent ? `${formatMs(_rawProps.overview.slowestComponent.avgTime)} avg` : "-"
-    }, {
-      label: "SLOWEST COMPONENT",
-      value: _fnSignal(_hf0, [
-        _rawProps
-      ])
-    }, null, 3, "BX_1"),
-    /* @__PURE__ */ _jsxSorted(StatCard, {
-      value: formatMs(_rawProps.overview.avgTime)
-    }, {
-      label: "AVG TIME"
-    }, null, 3, "BX_2"),
-    /* @__PURE__ */ _jsxSorted(StatCard, {
-      value: String(_rawProps.overview.totalCalls)
-    }, {
-      label: "TOTAL CALLS"
-    }, null, 3, "BX_3")
-  ], 1, "BX_4");
+import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.overview.slowestComponent?.componentName || "-";
+var PerformanceOverview = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-5 md:grid-cols-4" }, [
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: formatMs(_rawProps.overview.totalRenderTime) }, { label: "TOTAL RENDER TIME" }, null, 3, "BX_0"),
+		/*#__PURE__*/ _jsxSorted(StatCard, { subtitle: _rawProps.overview.slowestComponent ? `${formatMs(_rawProps.overview.slowestComponent.avgTime)} avg` : "-" }, {
+			label: "SLOWEST COMPONENT",
+			value: _fnSignal(_hf0, [_rawProps])
+		}, null, 3, "BX_1"),
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: formatMs(_rawProps.overview.avgTime) }, { label: "AVG TIME" }, null, 3, "BX_2"),
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: String(_rawProps.overview.totalCalls) }, { label: "TOTAL CALLS" }, null, 3, "BX_3")
+	], 1, "BX_4");
 }, "PerformanceOverview_component_TcuA6nX9GNo"));
-export {
-  PerformanceOverview
-};
+export { PerformanceOverview };