@react-perfscope/ui 0.5.0 → 0.6.0

package/dist/index.js

@@ -146,7 +146,8 @@ var en = {
   processingTime: "processing",
   presentation: "presentation",
   interactionThresholdHint: "Only interactions \u226540ms are shown \u2014 INP surfaces the slow ones; fast clicks are omitted.",
-  layoutShiftHint: "Every layout shift, including ones triggered by your interactions. The CLS metric excludes input-driven shifts, so this is not a CLS score."
+  layoutShiftHint: "Every layout shift, including ones triggered by your interactions. The CLS metric excludes input-driven shifts, so this is not a CLS score.",
+  unsupportedInBrowser: (kinds) => `Not measurable in this browser (the API is missing, not that nothing happened): ${kinds}.`
 };
 var KIND_LABELS_KO = {
   render: "\uB80C\uB354",
@@ -240,7 +241,8 @@ var ko = {
   processingTime: "\uCC98\uB9AC",
   presentation: "\uD654\uBA74 \uBC18\uC601",
   interactionThresholdHint: "40ms \uC774\uC0C1 \uAC78\uB9B0 \uC0C1\uD638\uC791\uC6A9\uB9CC \uD45C\uC2DC\uB3FC\uC694 \u2014 \uB290\uB9B0 \uAC83\uB9CC INP\uB85C \uC7A1\uACE0, \uBE60\uB978 \uD074\uB9AD\uC740 \uC0DD\uB7B5\uD574\uC694.",
-  layoutShiftHint: "\uC0AC\uC6A9\uC790 \uC778\uD130\uB799\uC158\uC73C\uB85C \uC0DD\uAE34 \uAC83\uAE4C\uC9C0 \uD3EC\uD568\uD55C \uBAA8\uB4E0 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8\uC608\uC694. CLS \uC9C0\uD45C\uB294 \uC785\uB825\uC73C\uB85C \uC778\uD55C \uC2DC\uD504\uD2B8\uB97C \uC81C\uC678\uD558\uBBC0\uB85C, \uC774\uAC74 CLS \uC810\uC218\uAC00 \uC544\uB2C8\uC5D0\uC694."
+  layoutShiftHint: "\uC0AC\uC6A9\uC790 \uC778\uD130\uB799\uC158\uC73C\uB85C \uC0DD\uAE34 \uAC83\uAE4C\uC9C0 \uD3EC\uD568\uD55C \uBAA8\uB4E0 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8\uC608\uC694. CLS \uC9C0\uD45C\uB294 \uC785\uB825\uC73C\uB85C \uC778\uD55C \uC2DC\uD504\uD2B8\uB97C \uC81C\uC678\uD558\uBBC0\uB85C, \uC774\uAC74 CLS \uC810\uC218\uAC00 \uC544\uB2C8\uC5D0\uC694.",
+  unsupportedInBrowser: (kinds) => `\uC774 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC120 \uCE21\uC815\uD560 \uC218 \uC5C6\uC5B4\uC694 (\uC544\uBB34 \uC77C\uB3C4 \uC5C6\uB358 \uAC8C \uC544\uB2C8\uB77C API\uAC00 \uC5C6\uC74C): ${kinds}.`
 };
 var STRINGS = { en, ko };
 function isLang(v) {
@@ -350,6 +352,7 @@ function Widget(props) {
 
 // src/panel.tsx
 import { useState as useState3, useMemo as useMemo3, useEffect, useRef as useRef2 } from "preact/hooks";
+import { unsupportedKinds } from "@react-perfscope/core";
 
 // src/overlay.ts
 var OVERLAY_MARKER = "data-perfscope-overlay";
@@ -2828,6 +2831,7 @@ function Panel(props) {
   const { t } = useI18n();
   const grouped = useMemo3(() => groupByKind(result.signals), [result.signals]);
   const kindsPresent = KIND_ORDER.filter((k) => grouped[k].length > 0);
+  const unsupported = useMemo3(() => unsupportedKinds(), []);
   const hasTimelineSignals = result.signals.some((s) => s.kind !== "web-vital") || (result.heapSamples?.length ?? 0) > 0 || (result.frames?.length ?? 0) > 0;
   const [activeTab, setActiveTab] = useState3(
     kindsPresent[0] ?? "forced-reflow"
@@ -2929,6 +2933,21 @@ function Panel(props) {
         )
       ] })
     ] }),
+    unsupported.length > 0 && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          padding: "6px 8px",
+          marginBottom: "8px",
+          fontSize: "11px",
+          color: "#888",
+          background: "#141414",
+          border: "1px solid #1f1f1f",
+          borderRadius: "6px"
+        },
+        children: t.unsupportedInBrowser(unsupported.map((k) => t.kindLabel(k)).join(", "))
+      }
+    ),
     kindsPresent.length === 0 && /* @__PURE__ */ jsx8("div", { style: { color: "#888" }, children: t.noSignals }),
     kindsPresent.length > 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
       /* @__PURE__ */ jsx8(