@liiift-studio/sanity-visitor-insights 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/index.js +49 -67
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +58 -76
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/server.js +10 -1
  6. package/dist/server.js.map +1 -1
  7. package/dist/server.mjs +10 -1
  8. package/dist/server.mjs.map +1 -1
  9. package/package.json +1 -1
  10. package/src/core/core.test.ts +17 -0
  11. package/src/server/vercel.ts +23 -1
  12. package/src/studio/Figure.tsx +17 -35
  13. package/src/studio/panels.tsx +62 -50
package/dist/index.mjs CHANGED
@@ -4,7 +4,7 @@ import { resolveIcon } from "@liiift-studio/sanity-ui-compat/icons";
4
4
 
5
5
  // src/studio/VisitorInsightsTool.tsx
6
6
  import { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
7
- import { Box as Box3, Button, Card as Card2, Container, Flex as Flex3, Heading as Heading2, Spinner, Stack as Stack3, Text as Text3 } from "@liiift-studio/sanity-ui-compat";
7
+ import { Box as Box3, Button, Card as Card3, Container, Flex as Flex3, Heading as Heading2, Spinner, Stack as Stack3, Text as Text3 } from "@liiift-studio/sanity-ui-compat";
8
8
 
9
9
  // src/studio/useReport.ts
10
10
  import { useCallback, useEffect, useRef, useState } from "react";
@@ -57,7 +57,7 @@ function useReport({ apiBaseUrl, report, range }) {
57
57
  }
58
58
 
59
59
  // src/studio/Figure.tsx
60
- import { Badge, Box, Flex, Stack, Text, Tooltip } from "@liiift-studio/sanity-ui-compat";
60
+ import { Badge, Box, Card, Flex, Stack, Text, Tooltip } from "@liiift-studio/sanity-ui-compat";
61
61
  import { jsx, jsxs } from "react/jsx-runtime";
62
62
  var REASON_TEXT = {
63
63
  not_instrumented: "Not tracked on this site",
@@ -99,50 +99,32 @@ function ComparisonBar({ label, metric, max, tone = "default" }) {
99
99
  value === null ? (
100
100
  // A dashed rail, not a zero-width bar: absence must not read as a measured zero.
101
101
  /* @__PURE__ */ jsx(
102
- Box,
102
+ Card,
103
103
  {
104
104
  "aria-hidden": "true",
105
- style: {
106
- height: 8,
107
- borderRadius: 4,
108
- border: "1px dashed var(--card-border-color)"
109
- }
105
+ radius: 2,
106
+ tone: "transparent",
107
+ border: true,
108
+ style: { height: 8, borderStyle: "dashed" }
110
109
  }
111
110
  )
112
- ) : /* @__PURE__ */ jsx(
113
- Box,
114
- {
115
- "aria-hidden": "true",
116
- style: {
117
- height: 8,
118
- borderRadius: 4,
119
- background: "var(--card-border-color)",
120
- overflow: "hidden"
121
- },
122
- children: /* @__PURE__ */ jsx(
123
- Box,
124
- {
125
- style: {
126
- width: `${width}%`,
127
- height: "100%",
128
- background: tone === "primary" ? "var(--card-focus-ring-color)" : tone === "positive" ? "var(--card-badge-positive-dot-color, var(--card-focus-ring-color))" : tone === "caution" ? "var(--card-badge-caution-dot-color, var(--card-muted-fg-color))" : "var(--card-muted-fg-color)"
129
- }
130
- }
131
- )
132
- }
111
+ ) : (
112
+ // Track and fill are both Cards so the palette comes from the Studio theme tokens
113
+ // rather than hand-picked CSS variables, and follows light/dark without extra work.
114
+ /* @__PURE__ */ jsx(Card, { "aria-hidden": "true", radius: 2, tone: "transparent", border: true, style: { height: 8, overflow: "hidden" }, children: /* @__PURE__ */ jsx(Card, { tone: tone === "default" ? "default" : tone, radius: 2, style: { width: `${width}%`, height: "100%" } }) })
133
115
  )
134
116
  ] });
135
117
  }
136
118
  function NoticeList({ notices }) {
137
119
  if (notices.length === 0) return null;
138
- return /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 8 }, children: notices.map((notice) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "flex-start", children: [
139
- /* @__PURE__ */ jsx(Text, { size: 1, muted: true, "aria-hidden": "true", children: "\u26A0" }),
140
- /* @__PURE__ */ jsx(Text, { size: 1, muted: true, children: notice })
141
- ] }) }, notice)) });
120
+ return /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 8 }, children: notices.map((notice) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ jsxs(Flex, { gap: 3, align: "flex-start", children: [
121
+ /* @__PURE__ */ jsx(Badge, { tone: "caution", fontSize: 0, children: "Caveat" }),
122
+ /* @__PURE__ */ jsx(Text, { size: 1, children: notice })
123
+ ] }) }) }, notice)) });
142
124
  }
143
125
 
144
126
  // src/studio/panels.tsx
145
- import { Box as Box2, Card, Flex as Flex2, Heading, Stack as Stack2, Text as Text2 } from "@liiift-studio/sanity-ui-compat";
127
+ import { Badge as Badge2, Card as Card2, Flex as Flex2, Grid, Heading, Label, Stack as Stack2, Text as Text2 } from "@liiift-studio/sanity-ui-compat";
146
128
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
147
129
  function maxOf(metrics) {
148
130
  return metrics.reduce((max, metric) => metric.status === "unavailable" ? max : Math.max(max, metric.value), 0);
@@ -160,7 +142,7 @@ function MeasurementHealthPanel({ data }) {
160
142
  /* @__PURE__ */ jsx2(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax, tone: "primary" }),
161
143
  /* @__PURE__ */ jsx2(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax, tone: "default" })
162
144
  ] }),
163
- data.shortfallRatio !== null && /* @__PURE__ */ jsx2(Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
145
+ data.shortfallRatio !== null && /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
164
146
  /* @__PURE__ */ jsxs2(Text2, { size: 1, weight: "semibold", children: [
165
147
  "GA4 shortfall: ",
166
148
  formatPercent(Math.abs(data.shortfallRatio), 1)
@@ -170,51 +152,51 @@ function MeasurementHealthPanel({ data }) {
170
152
  /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
171
153
  /* @__PURE__ */ jsx2(Heading, { size: 1, children: "Context" }),
172
154
  /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "Different units to the figures above, and to each other. Shown for scale, never differenced." }),
173
- /* @__PURE__ */ jsxs2(Flex2, { gap: 4, wrap: "wrap", children: [
174
- /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
175
- /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "GA4 sessions" }),
155
+ /* @__PURE__ */ jsxs2(Grid, { columns: [1, 3], gap: 4, children: [
156
+ /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
157
+ /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "GA4 sessions" }),
176
158
  /* @__PURE__ */ jsx2(MetricFigure, { metric: data.ga4Sessions, label: "GA4 sessions" })
177
- ] }),
178
- /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
179
- /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "Orders" }),
159
+ ] }) }),
160
+ /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
161
+ /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Orders" }),
180
162
  /* @__PURE__ */ jsx2(MetricFigure, { metric: data.orders, label: "Orders" })
181
- ] }),
182
- /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
183
- /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "Consent granted" }),
163
+ ] }) }),
164
+ /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
165
+ /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Consent granted" }),
184
166
  /* @__PURE__ */ jsx2(MetricFigure, { metric: data.consentRate, label: "Consent granted, percent of sessions" })
185
- ] })
167
+ ] }) })
186
168
  ] })
187
169
  ] })
188
170
  ] });
189
171
  }
190
172
  function AcquisitionPanel({ data }) {
191
173
  return /* @__PURE__ */ jsxs2(Stack2, { space: 4, children: [
192
- /* @__PURE__ */ jsxs2(Flex2, { gap: 4, wrap: "wrap", children: [
193
- /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
194
- /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "Sessions" }),
174
+ /* @__PURE__ */ jsxs2(Grid, { columns: [1, 3], gap: 4, children: [
175
+ /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
176
+ /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Sessions" }),
195
177
  /* @__PURE__ */ jsx2(Text2, { size: 4, children: formatCount(data.totalSessions) })
196
- ] }),
197
- data.designIndustryShare !== null && /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
198
- /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "From design-industry referrers" }),
178
+ ] }) }),
179
+ data.designIndustryShare !== null && /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
180
+ /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "From design-industry referrers" }),
199
181
  /* @__PURE__ */ jsx2(Text2, { size: 4, children: formatPercent(data.designIndustryShare, 1) })
200
- ] }),
201
- data.unattributedShare !== null && /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
202
- /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "Unattributed" }),
182
+ ] }) }),
183
+ data.unattributedShare !== null && /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
184
+ /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Unattributed" }),
203
185
  /* @__PURE__ */ jsx2(Text2, { size: 4, children: formatPercent(data.unattributedShare, 1) })
204
- ] })
186
+ ] }) })
205
187
  ] }),
206
- /* @__PURE__ */ jsx2(Box2, { style: tableWrap, children: /* @__PURE__ */ jsxs2("table", { style: table, children: [
188
+ /* @__PURE__ */ jsx2(Card2, { radius: 2, tone: "transparent", border: true, style: tableWrap, children: /* @__PURE__ */ jsxs2("table", { style: table, children: [
207
189
  /* @__PURE__ */ jsx2("caption", { style: { textAlign: "left", paddingBottom: 8 }, children: /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "Traffic sources by sessions" }) }),
208
190
  /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
209
- /* @__PURE__ */ jsx2("th", { scope: "col", style: cell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Source" }) }),
210
- /* @__PURE__ */ jsx2("th", { scope: "col", style: cell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Channel" }) }),
211
- /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Sessions" }) })
191
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: cell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Source" }) }),
192
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: cell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Channel" }) }),
193
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Sessions" }) })
212
194
  ] }) }),
213
195
  /* @__PURE__ */ jsx2("tbody", { children: data.rows.map((row) => /* @__PURE__ */ jsxs2("tr", { children: [
214
196
  /* @__PURE__ */ jsx2("th", { scope: "row", style: cell, children: /* @__PURE__ */ jsxs2(Flex2, { gap: 2, align: "center", children: [
215
197
  /* @__PURE__ */ jsx2(Text2, { size: 1, children: row.source }),
216
- row.designIndustry && /* @__PURE__ */ jsx2(Text2, { size: 0, muted: true, children: "\xB7 design industry" }),
217
- row.unattributed && /* @__PURE__ */ jsx2(Text2, { size: 0, muted: true, children: "\xB7 unattributed" })
198
+ row.designIndustry && /* @__PURE__ */ jsx2(Badge2, { tone: "primary", fontSize: 0, children: "design industry" }),
199
+ row.unattributed && /* @__PURE__ */ jsx2(Badge2, { tone: "caution", fontSize: 0, children: "unattributed" })
218
200
  ] }) }),
219
201
  /* @__PURE__ */ jsx2("td", { style: cell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: row.channel }) }),
220
202
  /* @__PURE__ */ jsx2("td", { style: numericCell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, children: formatCount(row.sessions) }) })
@@ -226,7 +208,7 @@ function AcquisitionPanel({ data }) {
226
208
  function JourneyPanel({ data }) {
227
209
  const max = maxOf(data.steps.map((step) => step.count));
228
210
  return /* @__PURE__ */ jsxs2(Stack2, { space: 4, children: [
229
- /* @__PURE__ */ jsx2(Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ jsx2(Text2, { size: 1, children: data.approximationNote }) }),
211
+ /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ jsx2(Text2, { size: 1, children: data.approximationNote }) }),
230
212
  /* @__PURE__ */ jsx2(Stack2, { space: 3, children: data.steps.map((step) => /* @__PURE__ */ jsxs2(Stack2, { space: 2, children: [
231
213
  /* @__PURE__ */ jsx2(ComparisonBar, { label: step.label, metric: step.count, max, tone: "primary" }),
232
214
  step.conversionFromPrevious !== null && /* @__PURE__ */ jsxs2(Text2, { size: 0, muted: true, children: [
@@ -236,10 +218,10 @@ function JourneyPanel({ data }) {
236
218
  ] }, step.key)) }),
237
219
  data.topExitPages.length > 0 && /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
238
220
  /* @__PURE__ */ jsx2(Heading, { size: 1, children: "Where sessions ended" }),
239
- /* @__PURE__ */ jsx2(Box2, { style: tableWrap, children: /* @__PURE__ */ jsxs2("table", { style: table, children: [
221
+ /* @__PURE__ */ jsx2(Card2, { radius: 2, tone: "transparent", border: true, style: tableWrap, children: /* @__PURE__ */ jsxs2("table", { style: table, children: [
240
222
  /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
241
- /* @__PURE__ */ jsx2("th", { scope: "col", style: cell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Page" }) }),
242
- /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Exits" }) })
223
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: cell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Page" }) }),
224
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Exits" }) })
243
225
  ] }) }),
244
226
  /* @__PURE__ */ jsx2("tbody", { children: data.topExitPages.map((page) => /* @__PURE__ */ jsxs2("tr", { children: [
245
227
  /* @__PURE__ */ jsx2("th", { scope: "row", style: cell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, children: page.path }) }),
@@ -251,15 +233,15 @@ function JourneyPanel({ data }) {
251
233
  }
252
234
  function TypefaceInterestPanel({ data }) {
253
235
  return /* @__PURE__ */ jsxs2(Stack2, { space: 4, children: [
254
- /* @__PURE__ */ jsx2(Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: data.interpretationNote }) }),
255
- /* @__PURE__ */ jsx2(Box2, { style: tableWrap, children: /* @__PURE__ */ jsxs2("table", { style: table, children: [
236
+ /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: data.interpretationNote }) }),
237
+ /* @__PURE__ */ jsx2(Card2, { radius: 2, tone: "transparent", border: true, style: tableWrap, children: /* @__PURE__ */ jsxs2("table", { style: table, children: [
256
238
  /* @__PURE__ */ jsx2("caption", { style: { textAlign: "left", paddingBottom: 8 }, children: /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: "Engagement by typeface" }) }),
257
239
  /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
258
- /* @__PURE__ */ jsx2("th", { scope: "col", style: cell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Typeface" }) }),
259
- /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Viewed" }) }),
260
- /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Tested" }) }),
261
- /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Bought" }) }),
262
- /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: "Test rate" }) })
240
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: cell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Typeface" }) }),
241
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Viewed" }) }),
242
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Tested" }) }),
243
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Bought" }) }),
244
+ /* @__PURE__ */ jsx2("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ jsx2(Label, { size: 1, muted: true, children: "Test rate" }) })
263
245
  ] }) }),
264
246
  /* @__PURE__ */ jsx2("tbody", { children: data.rows.map((row) => /* @__PURE__ */ jsxs2("tr", { children: [
265
247
  /* @__PURE__ */ jsx2("th", { scope: "row", style: cell, children: /* @__PURE__ */ jsx2(Text2, { size: 1, children: row.typeface }) }),
@@ -288,11 +270,11 @@ function DiagnosticsPanel({ data }) {
288
270
  const warning = data.checks.filter((c) => c.status === "warn").length;
289
271
  const summary = data.verdict === "pass" ? "Everything checked out. The figures in the other panels can be taken at face value." : `${failing} failing, ${warning} worth a look. Panels depending on these will be wrong or incomplete until they are resolved.`;
290
272
  return /* @__PURE__ */ jsxs2(Stack2, { space: 4, children: [
291
- /* @__PURE__ */ jsx2(Card, { padding: 3, radius: 2, tone: CHECK_TONE[data.verdict], border: true, children: /* @__PURE__ */ jsx2(Text2, { size: 1, children: summary }) }),
292
- /* @__PURE__ */ jsx2(Stack2, { space: 3, children: data.checks.map((item) => /* @__PURE__ */ jsx2(Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
273
+ /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: CHECK_TONE[data.verdict], border: true, children: /* @__PURE__ */ jsx2(Text2, { size: 1, children: summary }) }),
274
+ /* @__PURE__ */ jsx2(Stack2, { space: 3, children: data.checks.map((item) => /* @__PURE__ */ jsx2(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs2(Stack2, { space: 3, children: [
293
275
  /* @__PURE__ */ jsxs2(Flex2, { align: "center", justify: "space-between", gap: 3, children: [
294
276
  /* @__PURE__ */ jsx2(Text2, { size: 1, weight: "semibold", children: item.label }),
295
- /* @__PURE__ */ jsx2(Card, { padding: 2, radius: 2, tone: CHECK_TONE[item.status], children: /* @__PURE__ */ jsx2(Text2, { size: 0, weight: "medium", children: CHECK_WORD[item.status] }) })
277
+ /* @__PURE__ */ jsx2(Badge2, { tone: CHECK_TONE[item.status], fontSize: 0, children: CHECK_WORD[item.status] })
296
278
  ] }),
297
279
  /* @__PURE__ */ jsx2(Text2, { size: 1, muted: true, children: item.detail }),
298
280
  item.remedy && /* @__PURE__ */ jsx2(Text2, { size: 1, children: item.remedy })
@@ -407,7 +389,7 @@ function ReportPanel({ report, apiBaseUrl, range }) {
407
389
  /* @__PURE__ */ jsx3(Spinner, { muted: true }),
408
390
  /* @__PURE__ */ jsx3(Text3, { size: 1, muted: true, children: "Loading\u2026" })
409
391
  ] }),
410
- state.status === "error" && /* @__PURE__ */ jsx3(Card2, { padding: 4, radius: 2, tone: "critical", border: true, children: /* @__PURE__ */ jsxs3(Stack3, { space: 3, children: [
392
+ state.status === "error" && /* @__PURE__ */ jsx3(Card3, { padding: 4, radius: 2, tone: "critical", border: true, children: /* @__PURE__ */ jsxs3(Stack3, { space: 3, children: [
411
393
  /* @__PURE__ */ jsx3(Text3, { size: 1, children: state.message }),
412
394
  /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(Button, { text: "Try again", mode: "ghost", fontSize: 1, onClick: reload }) })
413
395
  ] }) }),