@qwik.dev/devtools 0.2.5 → 0.2.7

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

@@ -1,27 +1,23 @@
-import { jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, useSignal, $ } from "@qwik.dev/core";
-const PackageIcon = component$(({ packageName, iconUrl }) => {
-  const iconError = useSignal(false);
-  const handleIconError = $(() => {
-    iconError.value = true;
-  });
-  const fallbackInitial = packageName.split("/").pop()?.charAt(0).toUpperCase() || packageName.charAt(0).toUpperCase();
-  if (!iconUrl || iconError.value) {
-    return /* @__PURE__ */ jsx("span", {
-      class: "text-primary text-sm font-bold",
-      children: fallbackInitial
-    });
-  }
-  return /* @__PURE__ */ jsx("img", {
-    src: iconUrl,
-    alt: `${packageName} icon`,
-    class: "h-6 w-6 rounded",
-    width: "24",
-    height: "24",
-    onError$: handleIconError,
-    loading: "lazy"
-  });
-});
-export {
-  PackageIcon
-};
+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

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

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

@@ -1,307 +1,118 @@
-import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
-import { component$, useSignal, useTask$, isBrowser, useComputed$, $ } from "@qwik.dev/core";
-import { computePerfViewModel, computeEventRows } from "./computePerfViewModel.qwik.mjs";
+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`;
+	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`;
 }
-const Performance = component$(() => {
-  const perf = useSignal(null);
-  const selectedComponent = useSignal(null);
-  useTask$(() => {
-    if (!isBrowser) return;
-    perf.value = window.__QWIK_PERF__ || {
-      ssr: [],
-      csr: []
-    };
-  });
-  const vm = useComputed$(() => computePerfViewModel(perf.value));
-  const selectedVm = useComputed$(() => {
-    const name = selectedComponent.value;
-    if (!name) return null;
-    return vm.value.components.find((c) => c.componentName === name) || null;
-  });
-  const onSelect = $((name) => {
-    selectedComponent.value = name;
-  });
-  const clearSelect = $(() => {
-    selectedComponent.value = null;
-  });
-  return /* @__PURE__ */ jsx("div", {
-    class: "h-full w-full flex-1 overflow-hidden",
-    children: !perf.value?.ssr?.length && !perf.value?.csr?.length ? /* @__PURE__ */ jsx("div", {
-      class: "border-border bg-card-item-bg flex h-full items-center justify-center rounded-xl border p-8",
-      children: /* @__PURE__ */ jsxs("div", {
-        class: "text-muted-foreground text-center text-sm",
-        children: [
-          "No performance data found.",
-          /* @__PURE__ */ jsx("div", {
-            class: "mt-1 text-xs",
-            children: "Ensure instrumentation is enabled and interact with the app, then reopen this tab."
-          })
-        ]
-      })
-    }) : /* @__PURE__ */ jsxs("div", {
-      class: "flex h-full min-h-0 flex-col gap-4",
-      children: [
-        /* @__PURE__ */ jsxs("div", {
-          class: "grid grid-cols-1 gap-5 md:grid-cols-4",
-          children: [
-            /* @__PURE__ */ jsx("div", {
-              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",
-              children: /* @__PURE__ */ jsxs("div", {
-                class: "flex-1",
-                children: [
-                  /* @__PURE__ */ jsx("div", {
-                    class: "text-muted-foreground text-xs font-medium",
-                    children: "TOTAL RENDER TIME"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "mt-1 text-3xl font-semibold",
-                    children: formatMs(vm.value.overview.totalRenderTime)
-                  })
-                ]
-              })
-            }),
-            /* @__PURE__ */ jsx("div", {
-              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",
-              children: /* @__PURE__ */ jsxs("div", {
-                class: "flex-1",
-                children: [
-                  /* @__PURE__ */ jsx("div", {
-                    class: "text-muted-foreground text-xs font-medium",
-                    children: "SLOWEST COMPONENT"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "mt-1 text-lg font-semibold",
-                    children: vm.value.overview.slowestComponent?.componentName || "-"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "text-muted-foreground mt-1 text-xs",
-                    children: vm.value.overview.slowestComponent ? `${formatMs(vm.value.overview.slowestComponent.avgTime)} avg` : "-"
-                  })
-                ]
-              })
-            }),
-            /* @__PURE__ */ jsx("div", {
-              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",
-              children: /* @__PURE__ */ jsxs("div", {
-                class: "flex-1",
-                children: [
-                  /* @__PURE__ */ jsx("div", {
-                    class: "text-muted-foreground text-xs font-medium",
-                    children: "AVG TIME"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "mt-1 text-3xl font-semibold",
-                    children: formatMs(vm.value.overview.avgTime)
-                  })
-                ]
-              })
-            }),
-            /* @__PURE__ */ jsx("div", {
-              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",
-              children: /* @__PURE__ */ jsxs("div", {
-                class: "flex-1",
-                children: [
-                  /* @__PURE__ */ jsx("div", {
-                    class: "text-muted-foreground text-xs font-medium",
-                    children: "TOTAL CALLS"
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "mt-1 text-3xl font-semibold",
-                    children: vm.value.overview.totalCalls
-                  })
-                ]
-              })
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxs("div", {
-          class: "border-border bg-background flex min-h-0 flex-1 overflow-hidden rounded-md border",
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              class: "min-h-0 flex-1 overflow-y-auto p-4",
-              children: [
-                /* @__PURE__ */ jsx("div", {
-                  class: "mb-3 flex items-center justify-between",
-                  children: /* @__PURE__ */ jsxs("div", {
-                    children: [
-                      /* @__PURE__ */ jsx("div", {
-                        class: "text-lg font-semibold",
-                        children: "Components"
-                      }),
-                      /* @__PURE__ */ jsxs("div", {
-                        class: "text-muted-foreground text-xs",
-                        children: [
-                          "CSR only • ",
-                          vm.value.components.length,
-                          " total"
-                        ]
-                      })
-                    ]
-                  })
-                }),
-                /* @__PURE__ */ jsx("div", {
-                  class: "grid grid-cols-1 gap-4 md:grid-cols-2",
-                  children: vm.value.components.map((c) => {
-                    const selected = selectedComponent.value === c.componentName;
-                    return /* @__PURE__ */ jsx("button", {
-                      onClick$: () => onSelect(c.componentName),
-                      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(" "),
-                      children: /* @__PURE__ */ jsxs("div", {
-                        class: "flex items-start justify-between gap-4",
-                        children: [
-                          /* @__PURE__ */ jsxs("div", {
-                            class: "min-w-0 flex-1",
-                            children: [
-                              /* @__PURE__ */ jsx("div", {
-                                class: "truncate text-base font-semibold",
-                                children: c.componentName
-                              }),
-                              /* @__PURE__ */ jsxs("div", {
-                                class: "text-muted-foreground mt-1 text-xs",
-                                children: [
-                                  "Avg: ",
-                                  formatMs(c.avgTime)
-                                ]
-                              })
-                            ]
-                          }),
-                          /* @__PURE__ */ jsxs("div", {
-                            class: "shrink-0 text-right",
-                            children: [
-                              /* @__PURE__ */ jsx("div", {
-                                class: "text-primary text-lg font-semibold",
-                                children: formatMs(c.totalTime)
-                              }),
-                              /* @__PURE__ */ jsxs("div", {
-                                class: "text-muted-foreground text-xs",
-                                children: [
-                                  "SSR: ",
-                                  typeof c.ssr?.ssrCount === "number" ? c.ssr.ssrCount : "-"
-                                ]
-                              })
-                            ]
-                          })
-                        ]
-                      })
-                    }, c.componentName);
-                  })
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsx("div", {
-              class: "border-border border-l"
-            }),
-            /* @__PURE__ */ jsx("div", {
-              class: "flex w-[420px] min-w-[320px] flex-col overflow-hidden",
-              children: selectedVm.value ? /* @__PURE__ */ jsxs(Fragment, {
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "border-border flex items-center justify-between border-b p-4",
-                    children: [
-                      /* @__PURE__ */ jsxs("div", {
-                        class: "min-w-0",
-                        children: [
-                          /* @__PURE__ */ jsxs("div", {
-                            class: "truncate text-base font-semibold",
-                            children: [
-                              selectedVm.value.componentName,
-                              " Hook Details"
-                            ]
-                          }),
-                          /* @__PURE__ */ jsxs("div", {
-                            class: "text-muted-foreground mt-1 text-xs",
-                            children: [
-                              "Total: ",
-                              formatMs(selectedVm.value.totalTime),
-                              " • ",
-                              selectedVm.value.calls,
-                              " calls"
-                            ]
-                          })
-                        ]
-                      }),
-                      /* @__PURE__ */ jsx("button", {
-                        "aria-label": "close",
-                        onClick$: clearSelect,
-                        class: "text-muted-foreground hover:text-foreground rounded p-2 transition-colors",
-                        children: "✕"
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "min-h-0 flex-1 overflow-y-auto p-4",
-                    children: /* @__PURE__ */ jsxs("div", {
-                      class: "border-border bg-card-item-bg rounded-lg border",
-                      children: [
-                        /* @__PURE__ */ jsxs("div", {
-                          class: "border-border grid grid-cols-3 border-b px-3 py-2 text-xs font-medium",
-                          children: [
-                            /* @__PURE__ */ jsx("div", {
-                              class: "text-muted-foreground",
-                              children: "HOOK NAME"
-                            }),
-                            /* @__PURE__ */ jsx("div", {
-                              class: "text-muted-foreground text-right",
-                              children: "TIME"
-                            }),
-                            /* @__PURE__ */ jsx("div", {
-                              class: "text-muted-foreground text-right",
-                              children: "CALLS"
-                            })
-                          ]
-                        }),
-                        /* @__PURE__ */ jsxs("div", {
-                          class: "divide-border divide-y",
-                          children: [
-                            computeEventRows(selectedVm.value.csrItems).map((row) => /* @__PURE__ */ jsxs("div", {
-                              class: "grid grid-cols-3 px-3 py-2 text-sm",
-                              children: [
-                                /* @__PURE__ */ jsx("div", {
-                                  class: "truncate",
-                                  children: row.eventName
-                                }),
-                                /* @__PURE__ */ jsx("div", {
-                                  class: "text-right",
-                                  children: formatMs(row.time)
-                                }),
-                                /* @__PURE__ */ jsx("div", {
-                                  class: "text-right",
-                                  children: row.calls
-                                })
-                              ]
-                            }, row.eventName)),
-                            !selectedVm.value.csrItems.length && /* @__PURE__ */ jsx("div", {
-                              class: "text-muted-foreground px-3 py-4 text-center text-sm",
-                              children: "No CSR records for this component."
-                            })
-                          ]
-                        })
-                      ]
-                    })
-                  })
-                ]
-              }) : /* @__PURE__ */ jsx("div", {
-                class: "flex h-full items-center justify-center p-8",
-                children: /* @__PURE__ */ jsx("div", {
-                  class: "text-muted-foreground text-center text-sm",
-                  children: "Select a component to view hook details."
-                })
-              })
-            })
-          ]
-        })
-      ]
-    })
-  });
-});
-export {
-  Performance
-};
+/** 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 };