@qwik.dev/devtools 0.2.8 → 2.0.0-beta.43

package/dist/ui/packages/devtools/ui/src/features/Packages/components/SearchResultCard/SearchResultCard.qwik.mjs

@@ -0,0 +1,32 @@
+import { _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.result.npmUrl;
+var _hf1 = (p0) => p0.result.name;
+var _hf2 = (p0) => p0.result.latestVersion;
+var _hf3 = (p0) => p0.result.installedVersion;
+var _hf4 = (p0) => p0.result.description || "No description available";
+var _hf5 = (p0, p1) => p1.result.isInstalled || p0;
+var _hf6 = (p0, p1) => p1.result.isInstalled ? "Installed" : p0 ? "Installing..." : "Install";
+var SearchResultCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	const isInstalling = props.activeOperationKey === `install:${props.result.name}`;
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-xl border p-4" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-col gap-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-start justify-between gap-3" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "min-w-0" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center gap-2" }, [
+		/*#__PURE__*/ _jsxSorted("a", { href: _fnSignal(_hf0, [props]) }, {
+			target: "_blank",
+			class: "text-foreground hover:text-primary truncate text-sm font-semibold"
+		}, _fnSignal(_hf1, [props]), 1, null),
+		/*#__PURE__*/ _jsxSorted("span", null, { class: "bg-primary/10 text-primary rounded-md px-2 py-0.5 text-xs" }, ["v", _fnSignal(_hf2, [props])], 1, null),
+		props.result.isInstalled ? /*#__PURE__*/ _jsxSorted("span", null, { class: "rounded-md border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-xs text-emerald-300" }, ["Installed ", _fnSignal(_hf3, [props])], 1, "LR_0") : null
+	], 1, null), /*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground mt-2 line-clamp-2 text-sm" }, _fnSignal(_hf4, [props]), 1, null)], 1, null), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center justify-between gap-3" }, [/*#__PURE__*/ _jsxSorted("select", {
+		disabled: _fnSignal(_hf5, [isInstalling, props]),
+		"q-e:change": /*#__PURE__*/ inlinedQrl((_, target, props) => props.onTypeChange$(props.result.name, target.value), "SearchResultCard_component_div_div_div_select_q_e_change_157XuaUcsW4").m(),
+		"q:p": props,
+		value: _wrapProp(props, "selectedType")
+	}, { class: "border-border bg-background/60 rounded-lg border px-2 py-1.5 text-xs" }, [/*#__PURE__*/ _jsxSorted("option", null, { value: "devDependencies" }, "devDependencies", 3, null), /*#__PURE__*/ _jsxSorted("option", null, { value: "dependencies" }, "dependencies", 3, null)], 6, null), /*#__PURE__*/ _jsxSorted("button", {
+		disabled: _fnSignal(_hf5, [isInstalling, props]),
+		"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, props) => props.onInstall$(props.result.name, props.selectedType), "SearchResultCard_component_div_div_div_button_q_e_click_0DlfMgOZNRQ").m(),
+		"q:p": props
+	}, {
+		type: "button",
+		class: "bg-primary/10 hover:bg-primary/20 text-primary rounded-lg px-3 py-1.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+	}, _fnSignal(_hf6, [isInstalling, props]), 4, null)], 1, null)], 1, null), 1, "LR_1");
+}, "SearchResultCard_component_3Z58OZETbL0"));
+export { SearchResultCard };

package/dist/ui/packages/devtools/ui/src/features/Packages/components/SearchResultCard/index.qwik.mjs

@@ -0,0 +1,2 @@
+import { SearchResultCard } from "./SearchResultCard.qwik.mjs";
+export { SearchResultCard };

package/dist/ui/packages/devtools/ui/src/features/Packages/package-utils.qwik.mjs

@@ -0,0 +1,55 @@
+function filterInstalledDependencies(dependencies, keyword) {
+	const normalizedKeyword = keyword.trim().toLowerCase();
+	if (!normalizedKeyword) return dependencies;
+	return dependencies.filter((dependency) => dependency.name.toLowerCase().includes(normalizedKeyword));
+}
+function markInstalledSearchResults(results, dependencies) {
+	const installedVersions = new Map(dependencies.map((dependency) => [dependency.name, dependency.currentVersion]));
+	return results.map((result) => {
+		const installedVersion = installedVersions.get(result.name);
+		return {
+			...result,
+			isInstalled: installedVersion !== void 0,
+			installedVersion
+		};
+	});
+}
+function calculateDependencyStatus(currentVersion, latestVersion) {
+	if (!currentVersion || !latestVersion) return "unknown";
+	if (/[*^~<>=|]/.test(currentVersion) || currentVersion.startsWith("workspace:")) return "unknown";
+	return currentVersion === latestVersion ? "latest" : "outdated";
+}
+function mergeDependencyRefresh(previousDependencies, refreshedDependencies) {
+	const previousByName = new Map(previousDependencies.map((dependency) => [dependency.name, dependency]));
+	return refreshedDependencies.map((dependency) => {
+		if (dependency.latestVersion) return dependency;
+		const previous = previousByName.get(dependency.name);
+		if (!previous?.latestVersion) return dependency;
+		return {
+			...dependency,
+			latestVersion: previous.latestVersion,
+			status: calculateDependencyStatus(dependency.currentVersion, previous.latestVersion)
+		};
+	});
+}
+function getDependencyStatusLabel(status) {
+	return {
+		latest: "Latest",
+		outdated: "Update available",
+		unknown: "Unknown",
+		error: "Error"
+	}[status];
+}
+function getDependencyStatusClass(status) {
+	return {
+		latest: "border-emerald-500/30 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+		outdated: "border-amber-500/30 bg-amber-500/15 text-amber-700 dark:text-amber-300",
+		unknown: "border-border bg-foreground/5 text-muted-foreground",
+		error: "border-red-500/20 bg-red-500/10 text-red-300"
+	}[status];
+}
+function getOperationMessage(action, packageName, success, error) {
+	if (success) return action === "install" ? `Installed ${packageName}` : `Updated ${packageName}`;
+	return `Failed to ${action === "install" ? "install" : "update"} ${packageName}: ${error || "Unknown error"}`;
+}
+export { filterInstalledDependencies, getDependencyStatusClass, getDependencyStatusLabel, getOperationMessage, markInstalledSearchResults, mergeDependencyRefresh };

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

@@ -0,0 +1,111 @@
+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 { _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 };

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

@@ -0,0 +1,11 @@
+import { formatMs } from "../utils/formatMs.qwik.mjs";
+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 };

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

@@ -0,0 +1,31 @@
+import { computeEventRows } from "../computePerfViewModel.qwik.mjs";
+import { formatMs } from "../utils/formatMs.qwik.mjs";
+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"));
+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 };

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

@@ -0,0 +1,16 @@
+import { formatMs } from "../utils/formatMs.qwik.mjs";
+import { StatCard } from "./StatCard.qwik.mjs";
+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 };

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

@@ -0,0 +1,9 @@
+import { _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var StatCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__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(_rawProps, "label"), 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "mt-1 text-3xl font-semibold" }, _wrapProp(_rawProps), 1, null),
+		_rawProps.subtitle && /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, _wrapProp(_rawProps, "subtitle"), 1, "RV_0")
+	], 1, null), 1, "RV_1");
+}, "StatCard_component_Uisqt5fvHhk"));
+export { StatCard };

package/dist/ui/{features → packages/devtools/ui/src/features}/Performance/computePerfViewModel.qwik.mjs

@@ -1,5 +1,4 @@
 import { groupCsrBySsr, parseComponentAndEventName } from "./transformPerformanceData.qwik.mjs";
-//#region src/features/Performance/computePerfViewModel.ts
 function getCallsFromCsr(item) {
 	return typeof item.renderCount === "number" ? item.renderCount : 1;
 }
@@ -107,5 +106,4 @@ function computePerfViewModel(perf) {
 		components
 	};
 }
-//#endregion
 export { computeEventRows, computePerfViewModel };

package/dist/ui/{features → packages/devtools/ui/src/features}/Performance/transformPerformanceData.qwik.mjs

@@ -1,4 +1,3 @@
-//#region src/features/Performance/transformPerformanceData.ts
 function parseComponentAndEventName(component) {
 	return {
 		componentName: (component?.split("_component_")[0] ?? component) || "",
@@ -21,5 +20,4 @@ function groupCsrBySsr(data) {
 	}
 	return result;
 }
-//#endregion
 export { groupCsrBySsr, parseComponentAndEventName };

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

@@ -0,0 +1,7 @@
+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`;
+}
+export { formatMs };

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

@@ -0,0 +1,270 @@
+import { getPageDataSource } from "../../devtools/page-data-source.qwik.mjs";
+import { formatMs } from "../Performance/utils/formatMs.qwik.mjs";
+import { StatCard } from "../Performance/components/StatCard.qwik.mjs";
+import { computePreloadViewModel, createDefaultPreloadFilters, filterPreloadRows } from "./computePreloadViewModel.qwik.mjs";
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useStore, useVisibleTaskQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => `${p0.value.overview.csr} CSR • ${p0.value.overview.ssr} SSR`;
+var _hf1 = (p0) => p0.value.initialized ? "active" : "inactive";
+var _hf2 = (p0) => p0.value.qrlRequests;
+var _hf3 = (p0) => p0.value.sourceCounts["current-project"];
+var _hf4 = (p0) => p0.rel || "-";
+var _hf5 = (p0) => p0.as || p0.resourceType || "-";
+var DEFAULT_FILTERS = createDefaultPreloadFilters();
+var FILTERS = [
+	{
+		id: "all",
+		label: "All"
+	},
+	{
+		id: "loaded",
+		label: "Loaded"
+	},
+	{
+		id: "pending",
+		label: "Pending"
+	},
+	{
+		id: "error",
+		label: "Error"
+	},
+	{
+		id: "qrl-correlated",
+		label: "QRL Matched"
+	},
+	{
+		id: "unmatched",
+		label: "Unmatched"
+	}
+];
+function formatRelativeMs(ms) {
+	if (!Number.isFinite(ms)) return "-";
+	return `${(ms || 0).toFixed(2)}ms`;
+}
+function makeLabelCount(label, count) {
+	return `${label} (${count})`;
+}
+var Preloads = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	const version = useSignal(0);
+	const activeFilter = useSignal("all");
+	const sourceFilters = useStore({ ...DEFAULT_FILTERS.sourceFilters });
+	const phaseFilters = useStore({ ...DEFAULT_FILTERS.phaseFilters });
+	const store = useSignal(null);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async () => {
+		const store = _captures[0], version = _captures[1];
+		const source = getPageDataSource();
+		store.value = await source.readPreloadStore();
+		version.value++;
+		const refresh = () => {
+			source.readPreloadStore().then((s) => {
+				store.value = s;
+				version.value++;
+			});
+		};
+		const unsub = source.subscribePreloadUpdates(refresh);
+		return () => {
+			unsub?.();
+		};
+	}, "Preloads_component_useVisibleTask_0vUhmjcSbAc", [store, version]));
+	const vm = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const phaseFilters = _captures[0], sourceFilters = _captures[1], store = _captures[2];
+		_captures[3].value;
+		return computePreloadViewModel(store.value, {
+			sourceFilters: { ...sourceFilters },
+			phaseFilters: { ...phaseFilters }
+		});
+	}, "Preloads_component_vm_useComputed_OQEJfIwCbOM", [
+		phaseFilters,
+		sourceFilters,
+		store,
+		version
+	]));
+	const rows = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const activeFilter = _captures[0], vm = _captures[1];
+		return filterPreloadRows(vm.value.rows, activeFilter.value);
+	}, "Preloads_component_rows_useComputed_Zff0cdUKId0", [activeFilter, vm]));
+	const runtimeState = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const store = _captures[0];
+		_captures[1].value;
+		return {
+			initialized: !!store.value,
+			qrlRequests: store.value?.qrlRequests.length ?? 0
+		};
+	}, "Preloads_component_runtimeState_useComputed_EHPIU4e0Nko", [store, version]));
+	const clear = /*#__PURE__*/ inlinedQrl(async () => {
+		const store = _captures[0], version = _captures[1];
+		const source = getPageDataSource();
+		await source.clearPreloadStore();
+		store.value = await source.readPreloadStore();
+		version.value++;
+	}, "Preloads_component_clear_zTejYm3eOBI", [store, version]);
+	const toggleSourceFilter = /*#__PURE__*/ inlinedQrl((key) => {
+		const sourceFilters = _captures[0];
+		sourceFilters[key] = !sourceFilters[key];
+	}, "Preloads_component_toggleSourceFilter_zJPQ6oCTEQw", [sourceFilters]);
+	const togglePhaseFilter = /*#__PURE__*/ inlinedQrl((key) => {
+		const phaseFilters = _captures[0];
+		phaseFilters[key] = !phaseFilters[key];
+	}, "Preloads_component_togglePhaseFilter_TkDMzfHnpcI", [phaseFilters]);
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-auto" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-h-full flex-col gap-4" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5" }, [
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: String(vm.value.overview.total) }, {
+			label: "Visible QRLs",
+			subtitle: _fnSignal(_hf0, [vm])
+		}, null, 3, "LY_0"),
+		/*#__PURE__*/ _jsxSorted(StatCard, {
+			subtitle: `Max ${formatMs(vm.value.overview.maxImportDuration)}`,
+			value: formatMs(vm.value.overview.avgImportDuration)
+		}, { label: "Average Import Duration" }, null, 3, "LY_1"),
+		/*#__PURE__*/ _jsxSorted(StatCard, {
+			subtitle: `Max ${formatMs(vm.value.overview.maxLoadDuration)}`,
+			value: formatMs(vm.value.overview.avgLoadDuration)
+		}, { label: "Average Load Duration" }, null, 3, "LY_2"),
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: String(vm.value.overview.correlated) }, {
+			label: "Preloaded Before Use",
+			subtitle: "Matched before the QRL fired"
+		}, null, 3, "LY_3"),
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: String(Math.max(0, vm.value.overview.total - vm.value.overview.correlated)) }, {
+			label: "Missed Preloads",
+			subtitle: "QRLs that were used first"
+		}, null, 3, "LY_4")
+	], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex flex-wrap items-start justify-between gap-4 border-b p-4" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-col gap-3" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-[11px]" }, [
+			"Runtime: ",
+			_fnSignal(_hf1, [runtimeState]),
+			" • QRL requests:",
+			" ",
+			_fnSignal(_hf2, [runtimeState])
+		], 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap gap-2" }, FILTERS.map((filter) => {
+			const qrl_0 = /*#__PURE__*/ inlinedQrl((_, _1, filter) => {
+				const activeFilter = _captures[0];
+				activeFilter.value = filter.id;
+			}, "Preloads_component_div_div_div_div_div_div_button_q_e_click_mEfAxj9bfwU", [activeFilter]).m();
+			return /*#__PURE__*/ _jsxSorted("button", {
+				class: activeFilter.value === filter.id ? "bg-primary text-primary-foreground rounded-full px-3 py-1.5 text-xs font-medium" : "border-border text-muted-foreground rounded-full border px-3 py-1.5 text-xs font-medium",
+				"q-e:click": qrl_0,
+				"q:p": filter
+			}, { type: "button" }, _wrapProp(filter, "label"), 4, filter.id);
+		}), 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap gap-2" }, [
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mr-1 text-xs font-medium tracking-wide uppercase" }, "Sources", 3, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border text-muted-foreground flex cursor-default items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium opacity-90" }, [
+				/*#__PURE__*/ _jsxSorted("input", null, {
+					type: "checkbox",
+					checked: true,
+					disabled: true,
+					class: "h-3.5 w-3.5 rounded"
+				}, null, 3, null),
+				"Current Project (",
+				_fnSignal(_hf3, [vm]),
+				")"
+			], 3, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium" }, [/*#__PURE__*/ _jsxSorted("input", {
+				"q-e:change": /*#__PURE__*/ inlinedQrl((_, _1, toggleSourceFilter) => toggleSourceFilter("vitePluginInjected"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_PO4w6A5Idk4").m(),
+				"q:p": toggleSourceFilter
+			}, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "vitePluginInjected"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" }
+			}, null, 6, null), makeLabelCount("Vite Plugin Injected", vm.value.sourceCounts["vite-plugin-injected"])], 1, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium" }, [/*#__PURE__*/ _jsxSorted("input", {
+				"q-e:change": /*#__PURE__*/ inlinedQrl((_, _1, toggleSourceFilter) => toggleSourceFilter("nodeModules"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_1_a4f6Hw5N5s4").m(),
+				"q:p": toggleSourceFilter
+			}, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "nodeModules"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" }
+			}, null, 6, null), makeLabelCount("Node Modules", vm.value.sourceCounts.node_modules)], 1, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium" }, [/*#__PURE__*/ _jsxSorted("input", {
+				"q-e:change": /*#__PURE__*/ inlinedQrl((_, _1, toggleSourceFilter) => toggleSourceFilter("virtualModule"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_2_JsdB9QG1WM0").m(),
+				"q:p": toggleSourceFilter
+			}, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "virtualModule"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" }
+			}, null, 6, null), makeLabelCount("Virtual Module", vm.value.sourceCounts["virtual-module"])], 1, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium" }, [/*#__PURE__*/ _jsxSorted("input", {
+				"q-e:change": /*#__PURE__*/ inlinedQrl((_, _1, toggleSourceFilter) => toggleSourceFilter("generated"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_3_90iPosvF3mQ").m(),
+				"q:p": toggleSourceFilter
+			}, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "generated"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" }
+			}, null, 6, null), makeLabelCount("Generated", vm.value.sourceCounts.generated)], 1, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium" }, [/*#__PURE__*/ _jsxSorted("input", {
+				"q-e:change": /*#__PURE__*/ inlinedQrl((_, _1, toggleSourceFilter) => toggleSourceFilter("external"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_4_AuLKgSZkHes").m(),
+				"q:p": toggleSourceFilter
+			}, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "external"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" }
+			}, null, 6, null), makeLabelCount("External", vm.value.sourceCounts.external)], 1, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium" }, [/*#__PURE__*/ _jsxSorted("input", {
+				"q-e:change": /*#__PURE__*/ inlinedQrl((_, _1, toggleSourceFilter) => toggleSourceFilter("unknown"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_5_0E0MQZDqb5U").m(),
+				"q:p": toggleSourceFilter
+			}, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "unknown"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" }
+			}, null, 6, null), makeLabelCount("Unknown", vm.value.sourceCounts.unknown)], 1, null)
+		], 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap gap-2" }, [
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mr-1 text-xs font-medium tracking-wide uppercase" }, "Phase", 3, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium" }, [/*#__PURE__*/ _jsxSorted("input", {
+				"q-e:change": /*#__PURE__*/ inlinedQrl((_, _1, togglePhaseFilter) => togglePhaseFilter("csr"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_6_L5lgZJlMTm8").m(),
+				"q:p": togglePhaseFilter
+			}, {
+				type: "checkbox",
+				checked: _wrapProp(phaseFilters, "csr"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" }
+			}, null, 6, null), makeLabelCount("CSR", vm.value.phaseCounts.csr)], 1, null),
+			/*#__PURE__*/ _jsxSorted("label", null, { class: "border-border flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium" }, [/*#__PURE__*/ _jsxSorted("input", {
+				"q-e:change": /*#__PURE__*/ inlinedQrl((_, _1, togglePhaseFilter) => togglePhaseFilter("ssr"), "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_7_PiCA1ivS01Y").m(),
+				"q:p": togglePhaseFilter
+			}, {
+				type: "checkbox",
+				checked: _wrapProp(phaseFilters, "ssr"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" }
+			}, null, 6, null), makeLabelCount("SSR", vm.value.phaseCounts.ssr)], 1, null)
+		], 1, null)
+	], 1, null), /*#__PURE__*/ _jsxSorted("button", null, {
+		type: "button",
+		class: "border-border text-muted-foreground rounded-full border px-3 py-1.5 text-xs font-medium",
+		"q-e:click": clear
+	}, "Clear", 3, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "min-h-0 flex-1 overflow-auto" }, /*#__PURE__*/ _jsxSorted("table", null, { class: "w-full min-w-[1080px] text-left text-sm" }, [/*#__PURE__*/ _jsxSorted("thead", null, { class: "bg-background/60 text-muted-foreground sticky top-0 z-10 text-xs tracking-wide uppercase" }, /*#__PURE__*/ _jsxSorted("tr", null, null, [
+		/*#__PURE__*/ _jsxSorted("th", null, { class: "px-4 py-3 font-medium" }, "Content", 3, null),
+		/*#__PURE__*/ _jsxSorted("th", null, { class: "px-4 py-3 font-medium" }, "Type", 3, null),
+		/*#__PURE__*/ _jsxSorted("th", null, { class: "px-4 py-3 font-medium" }, "Environment", 3, null),
+		/*#__PURE__*/ _jsxSorted("th", null, { class: "px-4 py-3 font-medium" }, "Status", 3, null),
+		/*#__PURE__*/ _jsxSorted("th", null, { class: "px-4 py-3 font-medium" }, "Import Duration", 3, null),
+		/*#__PURE__*/ _jsxSorted("th", null, { class: "px-4 py-3 font-medium" }, "Load Duration", 3, null),
+		/*#__PURE__*/ _jsxSorted("th", null, { class: "px-4 py-3 font-medium" }, "QRL Requested", 3, null)
+	], 3, null), 3, null), /*#__PURE__*/ _jsxSorted("tbody", null, null, rows.value.length ? rows.value.map((row) => /*#__PURE__*/ _jsxSorted("tr", null, { class: "border-glass-border border-t align-top" }, [
+		/*#__PURE__*/ _jsxSorted("td", null, { class: "px-4 py-3" }, [
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "font-medium break-all" }, _wrapProp(row, "shortHref"), 1, null),
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs break-all" }, _wrapProp(row, "href"), 1, null),
+			row.qrlSymbol ? /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, ["Symbol: ", _wrapProp(row, "qrlSymbol")], 1, "LY_5") : null
+		], 1, null),
+		/*#__PURE__*/ _jsxSorted("td", null, { class: "px-4 py-3" }, [
+			/*#__PURE__*/ _jsxSorted("div", null, null, _fnSignal(_hf4, [row]), 1, null),
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, _fnSignal(_hf5, [row]), 1, null),
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-[11px] tracking-wide uppercase" }, _wrapProp(row, "originKind"), 1, null)
+		], 1, null),
+		/*#__PURE__*/ _jsxSorted("td", null, { class: "px-4 py-3" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "font-medium tracking-wide uppercase" }, _wrapProp(row, "phase"), 1, null), 1, null),
+		/*#__PURE__*/ _jsxSorted("td", null, { class: "px-4 py-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "font-medium" }, _wrapProp(row, "status"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, _wrapProp(row, "source"), 1, null)], 1, null),
+		/*#__PURE__*/ _jsxSorted("td", null, { class: "px-4 py-3" }, formatMs(row.importDuration ?? NaN), 1, null),
+		/*#__PURE__*/ _jsxSorted("td", null, { class: "px-4 py-3" }, formatMs(row.loadDuration ?? NaN), 1, null),
+		/*#__PURE__*/ _jsxSorted("td", null, { class: "px-4 py-3" }, formatRelativeMs(row.qrlRequestedAt), 1, null)
+	], 1, row.id)) : /*#__PURE__*/ _jsxSorted("tr", null, { class: "border-glass-border border-t" }, /*#__PURE__*/ _jsxSorted("td", null, {
+		class: "text-muted-foreground px-4 py-8 text-center text-sm",
+		colSpan: 7
+	}, "No rows match the current filters. Uncheck a filter or re-enable CSR to view data.", 3, null), 3, "LY_6"), 1, null)], 1, null), 1, null)], 1, null)], 1, null), 1, "LY_7");
+}, "Preloads_component_fKcrex5znk4"));
+export { Preloads };