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

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

@@ -0,0 +1,58 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp } from "@qwik.dev/core";
+import { DependencyCard } from "../DependencyCard/DependencyCard.qwik.mjs";
+const InstalledDependencyList = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "flex items-center justify-center py-8"
+    }, /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "flex flex-col items-center gap-3"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "flex items-center gap-2"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "border-t-foreground/40 border-border h-5 w-5 animate-spin rounded-full border-2"
+        }, null, 3, null),
+        /* @__PURE__ */ _jsxSorted("span", null, {
+          class: "text-muted-foreground text-sm"
+        }, "Loading dependencies...", 3, null)
+      ], 3, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "text-muted-foreground text-center text-xs"
+      }, [
+        "Dependencies are being preloaded in the background...",
+        /* @__PURE__ */ _jsxSorted("br", null, null, null, 3, null),
+        "This should only take a moment"
+      ], 3, null)
+    ], 3, null), 3, "Bb_0");
+  }
+  if (props.dependencies.length === 0) {
+    return /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "py-8 text-center"
+    }, /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "text-muted-foreground text-sm"
+    }, "No dependencies found in package.json", 3, null), 3, "Bb_1");
+  }
+  if (props.filteredDependencies.length === 0) {
+    return /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "py-8 text-center"
+    }, /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "text-muted-foreground text-sm"
+    }, [
+      'No installed dependencies match "',
+      _wrapProp(props, "searchKeyword"),
+      '"'
+    ], 1, null), 1, "Bb_2");
+  }
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "grid gap-4 md:grid-cols-2 lg:grid-cols-3"
+  }, props.filteredDependencies.map((pkg) => /* @__PURE__ */ _jsxSorted(DependencyCard, {
+    onUpdate$: props.onUpdate$,
+    pkg
+  }, {
+    activeOperationKey: _wrapProp(props, "activeOperationKey")
+  }, null, 2, pkg.name)), 1, "Bb_3");
+}, "InstalledDependencyList_component_uodXFl0i7Y0"));
+export {
+  InstalledDependencyList
+};

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

@@ -0,0 +1,29 @@
+import { componentQrl, inlinedQrl, useSignal, _jsxSorted, _wrapProp, _captures } from "@qwik.dev/core";
+const PackageIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  const iconError = useSignal(false);
+  const handleIconError = /* @__PURE__ */ inlinedQrl(() => {
+    const iconError2 = _captures[0];
+    iconError2.value = true;
+  }, "PackageIcon_component_handleIconError_6GG7b4NJpQI", [
+    iconError
+  ]);
+  const fallbackInitial = _rawProps.packageName.split("/").pop()?.charAt(0).toUpperCase() || _rawProps.packageName.charAt(0).toUpperCase();
+  if (!_rawProps.iconUrl || iconError.value) {
+    return /* @__PURE__ */ _jsxSorted("span", null, {
+      class: "text-primary text-sm font-bold"
+    }, fallbackInitial, 1, "JC_0");
+  }
+  return /* @__PURE__ */ _jsxSorted("img", {
+    alt: `${_rawProps.packageName} icon`,
+    src: _wrapProp(_rawProps, "iconUrl")
+  }, {
+    class: "h-6 w-6 rounded",
+    width: "24",
+    height: "24",
+    "q-e:error": handleIconError,
+    loading: "lazy"
+  }, null, 3, "JC_1");
+}, "PackageIcon_component_JgJ0UtqxVLw"));
+export {
+  PackageIcon
+};

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

@@ -0,0 +1,51 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
+import { SearchResultCard } from "../SearchResultCard/SearchResultCard.qwik.mjs";
+const _hf0 = (p0, p1) => p0.selectedTypes[p1.name] || "devDependencies";
+const PackageSearchResults = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  if (!props.query.trim()) {
+    return null;
+  }
+  if (props.isSearching) {
+    return /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-glass-border bg-card-item-bg text-muted-foreground rounded-xl border p-4 text-sm"
+    }, "Searching packages...", 3, "bz_0");
+  }
+  if (props.error) {
+    return /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "rounded-xl border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-300"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, null, _wrapProp(props, "error"), 1, null),
+      /* @__PURE__ */ _jsxSorted("button", {
+        "q-e:click": props.onRetrySearch$
+      }, {
+        type: "button",
+        class: "mt-3 rounded-lg bg-red-500/10 px-3 py-1.5 text-xs font-medium hover:bg-red-500/20"
+      }, "Retry", 2, null)
+    ], 1, "bz_1");
+  }
+  if (props.results.length === 0) {
+    return /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-glass-border bg-card-item-bg text-muted-foreground rounded-xl border p-4 text-sm"
+    }, [
+      'No external packages found for "',
+      _wrapProp(props, "query"),
+      '".'
+    ], 1, "bz_2");
+  }
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "flex flex-col gap-3"
+  }, props.results.map((result) => /* @__PURE__ */ _jsxSorted(SearchResultCard, {
+    onInstall$: props.onInstall$,
+    onTypeChange$: props.onTypeChange$,
+    result,
+    selectedType: _fnSignal(_hf0, [
+      props,
+      result
+    ])
+  }, {
+    activeOperationKey: _wrapProp(props, "activeOperationKey")
+  }, null, 2, result.name)), 1, "bz_3");
+}, "PackageSearchResults_component_EKXKiudzonI"));
+export {
+  PackageSearchResults
+};

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

@@ -0,0 +1,97 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal, _wrapProp } from "@qwik.dev/core";
+const _hf0 = (p0) => p0.result.npmUrl;
+const _hf1 = (p0) => p0.result.name;
+const _hf2 = (p0) => p0.result.latestVersion;
+const _hf3 = (p0) => p0.result.installedVersion;
+const _hf4 = (p0) => p0.result.description || "No description available";
+const _hf5 = (p0, p1) => p1.result.isInstalled || p0;
+const _hf6 = (p0, p1) => p1.result.isInstalled ? "Installed" : p0 ? "Installing..." : "Install";
+const 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, props2) => props2.onTypeChange$(props2.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, props2) => props2.onInstall$(props2.result.name, props2.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/package-utils.qwik.mjs

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

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

@@ -0,0 +1,49 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal } from "@qwik.dev/core";
+import { formatMs } from "../utils/formatMs.qwik.mjs";
+const _hf0 = (p0) => p0.component.componentName;
+const _hf1 = (p0) => typeof p0.component.ssr?.ssrCount === "number" ? p0.component.ssr.ssrCount : "-";
+const ComponentCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted("button", {
+    class: [
+      "border-border bg-card-item-bg hover:bg-card-item-hover-bg w-full rounded-xl border p-4 text-left transition-all duration-200 hover:-translate-y-0.5",
+      _rawProps.selected ? "ring-primary-active ring-2" : ""
+    ].join(" "),
+    "q-e:click": _rawProps.onClick$
+  }, null, /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "flex items-start justify-between gap-4"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "min-w-0 flex-1"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "truncate text-base font-semibold"
+      }, _fnSignal(_hf0, [
+        _rawProps
+      ]), 1, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "text-muted-foreground mt-1 text-xs"
+      }, [
+        "Avg: ",
+        formatMs(_rawProps.component.avgTime)
+      ], 1, null)
+    ], 1, null),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "shrink-0 text-right"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "text-primary text-lg font-semibold"
+      }, formatMs(_rawProps.component.totalTime), 1, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "text-muted-foreground text-xs"
+      }, [
+        "SSR: ",
+        _fnSignal(_hf1, [
+          _rawProps
+        ])
+      ], 1, null)
+    ], 1, null)
+  ], 1, null), 0, _rawProps.component.componentName);
+}, "ComponentCard_component_n3qw8GM0NvQ"));
+export {
+  ComponentCard
+};