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

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

@@ -1,478 +1,282 @@
-import { componentQrl, inlinedQrl, useSignal, useStore, useVisibleTaskQrl, _captures, useComputedQrl, _jsxSorted, _fnSignal, _wrapProp } from "@qwik.dev/core";
-import { StatCard } from "../Performance/components/StatCard.qwik.mjs";
-import { formatMs } from "../Performance/utils/formatMs.qwik.mjs";
-import { computePreloadViewModel, filterPreloadRows, createDefaultPreloadFilters } from "./computePreloadViewModel.qwik.mjs";
 import { getPageDataSource } from "../../devtools/page-data-source.qwik.mjs";
-const _hf0 = (p0) => `${p0.value.overview.csr} CSR • ${p0.value.overview.ssr} SSR`;
-const _hf1 = (p0) => p0.value.initialized ? "active" : "inactive";
-const _hf2 = (p0) => p0.value.qrlRequests;
-const _hf3 = (p0) => p0.value.sourceCounts["current-project"];
-const _hf4 = (p0) => p0.rel || "-";
-const _hf5 = (p0) => p0.as || p0.resourceType || "-";
-const DEFAULT_FILTERS = createDefaultPreloadFilters();
-const 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"
-  }
+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 _hf0_str = "`${p0.value.overview.csr} CSR • ${p0.value.overview.ssr} SSR`";
+var _hf1 = (p0) => p0.value.initialized ? "active" : "inactive";
+var _hf1_str = "p0.value.initialized?\"active\":\"inactive\"";
+var _hf2 = (p0) => p0.value.qrlRequests;
+var _hf2_str = "p0.value.qrlRequests";
+var _hf3 = (p0) => p0.value.sourceCounts["current-project"];
+var _hf3_str = "p0.value.sourceCounts[\"current-project\"]";
+var _hf4 = (p0) => p0.rel || "-";
+var _hf4_str = "p0.rel||\"-\"";
+var _hf5 = (p0) => p0.as || p0.resourceType || "-";
+var _hf5_str = "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`;
+	if (!Number.isFinite(ms)) return "-";
+	return `${(ms || 0).toFixed(2)}ms`;
 }
 function makeLabelCount(label, count) {
-  return `${label} (${count})`;
+	return `${label} (${count})`;
 }
-const 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 store2 = _captures[0], version2 = _captures[1];
-    const source = getPageDataSource();
-    store2.value = await source.readPreloadStore();
-    version2.value++;
-    const refresh = () => {
-      source.readPreloadStore().then((s) => {
-        store2.value = s;
-        version2.value++;
-      });
-    };
-    const unsub = source.subscribePreloadUpdates(refresh);
-    return () => {
-      unsub?.();
-    };
-  }, "Preloads_component_useVisibleTask_0vUhmjcSbAc", [
-    store,
-    version
-  ]));
-  const vm = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const phaseFilters2 = _captures[0], sourceFilters2 = _captures[1], store2 = _captures[2], version2 = _captures[3];
-    version2.value;
-    return computePreloadViewModel(store2.value, {
-      sourceFilters: {
-        ...sourceFilters2
-      },
-      phaseFilters: {
-        ...phaseFilters2
-      }
-    });
-  }, "Preloads_component_vm_useComputed_OQEJfIwCbOM", [
-    phaseFilters,
-    sourceFilters,
-    store,
-    version
-  ]));
-  const rows = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const activeFilter2 = _captures[0], vm2 = _captures[1];
-    return filterPreloadRows(vm2.value.rows, activeFilter2.value);
-  }, "Preloads_component_rows_useComputed_Zff0cdUKId0", [
-    activeFilter,
-    vm
-  ]));
-  const runtimeState = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const store2 = _captures[0], version2 = _captures[1];
-    version2.value;
-    return {
-      initialized: !!store2.value,
-      qrlRequests: store2.value?.qrlRequests.length ?? 0
-    };
-  }, "Preloads_component_runtimeState_useComputed_EHPIU4e0Nko", [
-    store,
-    version
-  ]));
-  const clear = /* @__PURE__ */ inlinedQrl(async () => {
-    const store2 = _captures[0], version2 = _captures[1];
-    const source = getPageDataSource();
-    await source.clearPreloadStore();
-    store2.value = await source.readPreloadStore();
-    version2.value++;
-  }, "Preloads_component_clear_zTejYm3eOBI", [
-    store,
-    version
-  ]);
-  const toggleSourceFilter = /* @__PURE__ */ inlinedQrl((key) => {
-    const sourceFilters2 = _captures[0];
-    sourceFilters2[key] = !sourceFilters2[key];
-  }, "Preloads_component_toggleSourceFilter_zJPQ6oCTEQw", [
-    sourceFilters
-  ]);
-  const togglePhaseFilter = /* @__PURE__ */ inlinedQrl((key) => {
-    const phaseFilters2 = _captures[0];
-    phaseFilters2[key] = !phaseFilters2[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, filter2) => {
-              const activeFilter2 = _captures[0];
-              activeFilter2.value = filter2.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, toggleSourceFilter2) => toggleSourceFilter2("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, toggleSourceFilter2) => toggleSourceFilter2("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, toggleSourceFilter2) => toggleSourceFilter2("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, toggleSourceFilter2) => toggleSourceFilter2("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, toggleSourceFilter2) => toggleSourceFilter2("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, toggleSourceFilter2) => toggleSourceFilter2("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, togglePhaseFilter2) => togglePhaseFilter2("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, togglePhaseFilter2) => togglePhaseFilter2("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");
+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]);
+	const Preloads_component_div_div_div_div_div_div_button_q_e_click_mEfAxj9bfwU = /*#__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("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], _hf0_str)
+		}, null, 3, "oi_0"),
+		/*#__PURE__*/ _jsxSorted(StatCard, {
+			subtitle: `Max ${formatMs(vm.value.overview.maxImportDuration)}`,
+			value: formatMs(vm.value.overview.avgImportDuration)
+		}, { label: "Average Import Duration" }, null, 3, "oi_1"),
+		/*#__PURE__*/ _jsxSorted(StatCard, {
+			subtitle: `Max ${formatMs(vm.value.overview.maxLoadDuration)}`,
+			value: formatMs(vm.value.overview.avgLoadDuration)
+		}, { label: "Average Load Duration" }, null, 3, "oi_2"),
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: String(vm.value.overview.correlated) }, {
+			label: "Preloaded Before Use",
+			subtitle: "Matched before the QRL fired"
+		}, null, 3, "oi_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, "oi_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], _hf1_str),
+			" • QRL requests:",
+			" ",
+			_fnSignal(_hf2, [runtimeState], _hf2_str)
+		], 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap gap-2" }, FILTERS.map((filter) => /*#__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": Preloads_component_div_div_div_div_div_div_button_q_e_click_mEfAxj9bfwU,
+			"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], _hf3_str),
+				")"
+			], 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", null, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "vitePluginInjected"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" },
+				"q-e:change": /*#__PURE__*/ inlinedQrl(() => {
+					const toggleSourceFilter = _captures[0];
+					return toggleSourceFilter("vitePluginInjected");
+				}, "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_PO4w6A5Idk4", [toggleSourceFilter])
+			}, null, 3, 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", null, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "nodeModules"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" },
+				"q-e:change": /*#__PURE__*/ inlinedQrl(() => {
+					const toggleSourceFilter = _captures[0];
+					return toggleSourceFilter("nodeModules");
+				}, "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_1_a4f6Hw5N5s4", [toggleSourceFilter])
+			}, null, 3, 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", null, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "virtualModule"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" },
+				"q-e:change": /*#__PURE__*/ inlinedQrl(() => {
+					const toggleSourceFilter = _captures[0];
+					return toggleSourceFilter("virtualModule");
+				}, "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_2_JsdB9QG1WM0", [toggleSourceFilter])
+			}, null, 3, 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", null, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "generated"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" },
+				"q-e:change": /*#__PURE__*/ inlinedQrl(() => {
+					const toggleSourceFilter = _captures[0];
+					return toggleSourceFilter("generated");
+				}, "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_3_90iPosvF3mQ", [toggleSourceFilter])
+			}, null, 3, 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", null, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "external"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" },
+				"q-e:change": /*#__PURE__*/ inlinedQrl(() => {
+					const toggleSourceFilter = _captures[0];
+					return toggleSourceFilter("external");
+				}, "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_4_AuLKgSZkHes", [toggleSourceFilter])
+			}, null, 3, 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", null, {
+				type: "checkbox",
+				checked: _wrapProp(sourceFilters, "unknown"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" },
+				"q-e:change": /*#__PURE__*/ inlinedQrl(() => {
+					const toggleSourceFilter = _captures[0];
+					return toggleSourceFilter("unknown");
+				}, "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_5_0E0MQZDqb5U", [toggleSourceFilter])
+			}, null, 3, 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", null, {
+				type: "checkbox",
+				checked: _wrapProp(phaseFilters, "csr"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" },
+				"q-e:change": /*#__PURE__*/ inlinedQrl(() => {
+					const togglePhaseFilter = _captures[0];
+					return togglePhaseFilter("csr");
+				}, "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_6_L5lgZJlMTm8", [togglePhaseFilter])
+			}, null, 3, 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", null, {
+				type: "checkbox",
+				checked: _wrapProp(phaseFilters, "ssr"),
+				class: "h-3.5 w-3.5 rounded focus:ring-0",
+				style: { accentColor: "var(--color-primary-active)" },
+				"q-e:change": /*#__PURE__*/ inlinedQrl(() => {
+					const togglePhaseFilter = _captures[0];
+					return togglePhaseFilter("ssr");
+				}, "Preloads_component_div_div_div_div_div_div_label_input_q_e_change_7_PiCA1ivS01Y", [togglePhaseFilter])
+			}, null, 3, 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, "oi_5") : null
+		], 1, null),
+		/*#__PURE__*/ _jsxSorted("td", null, { class: "px-4 py-3" }, [
+			/*#__PURE__*/ _jsxSorted("div", null, null, _fnSignal(_hf4, [row], _hf4_str), 1, null),
+			/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, _fnSignal(_hf5, [row], _hf5_str), 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, "oi_6"), 1, null)], 1, null), 1, null)], 1, null)], 1, null), 1, "oi_7");
 }, "Preloads_component_fKcrex5znk4"));
-export {
-  Preloads
-};
+export { Preloads };