@liiift-studio/sanity-visitor-insights 0.8.2 → 0.10.0

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -51,7 +61,7 @@ var import_sanity2 = require("sanity");
 var import_icons = require("@liiift-studio/sanity-ui-compat/icons");
 
 // src/studio/VisitorInsightsTool.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_sanity_ui_compat3 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/useReport.ts
@@ -106,6 +116,7 @@ function useReport({ apiBaseUrl, report, range }) {
 }
 
 // src/studio/Figure.tsx
+var import_react2 = __toESM(require("react"));
 var import_sanity_ui_compat = require("@liiift-studio/sanity-ui-compat");
 var import_jsx_runtime = require("react/jsx-runtime");
 var REASON_TEXT = {
@@ -164,6 +175,18 @@ function ComparisonBar({ label, metric, max, tone = "default" }) {
     )
   ] });
 }
+var chartFrame = { position: "relative", width: "100%" };
+var readout = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  padding: "6px 10px",
+  borderRadius: 3,
+  background: "var(--card-bg-color, rgba(0,0,0,0.55))",
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.35))",
+  pointerEvents: "none",
+  maxWidth: "70%"
+};
 var barHeader = {
   display: "flex",
   alignItems: "center",
@@ -177,6 +200,21 @@ var legendRow = {
   alignItems: "center",
   flexWrap: "wrap"
 };
+var disclosure = {
+  appearance: "none",
+  background: "transparent",
+  border: "none",
+  color: "inherit",
+  opacity: 0.75,
+  font: "inherit",
+  fontSize: "0.85em",
+  padding: "2px 0",
+  textDecoration: "underline",
+  textUnderlineOffset: 3,
+  cursor: "pointer",
+  justifySelf: "start",
+  width: "fit-content"
+};
 var noticeRow = {
   display: "flex",
   gap: 12,
@@ -185,23 +223,55 @@ var noticeRow = {
 };
 var noticeBadge = { flex: "0 0 auto" };
 function NoticeList({ notices }) {
+  const [expanded, setExpanded] = import_react2.default.useState(false);
   if (notices.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 8 }, children: notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: noticeRow, children: [
+  const alwaysShown = notices.slice(0, 2);
+  const hidden = notices.slice(2);
+  const item = (notice) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: noticeRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: noticeBadge, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Badge, { tone: "caution", fontSize: 0, children: "Caveat" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: notice })
-  ] }) }) }, notice)) });
+  ] }) }) }, notice);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 8 }, children: [
+      alwaysShown.map(item),
+      expanded && hidden.map(item)
+    ] }),
+    hidden.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        style: disclosure,
+        onClick: () => setExpanded((open) => !open),
+        "aria-expanded": expanded,
+        children: expanded ? "Show fewer caveats" : `${hidden.length} more ${hidden.length === 1 ? "caveat" : "caveats"}`
+      }
+    )
+  ] });
+}
+var CHART = { w: 760, h: 240, left: 52, right: 12, top: 16, bottom: 30 };
+function niceCeiling(value) {
+  if (value <= 0) return 1;
+  const magnitude = 10 ** Math.floor(Math.log10(value));
+  const normalised = value / magnitude;
+  const step = normalised <= 1 ? 1 : normalised <= 2 ? 2 : normalised <= 5 ? 5 : 10;
+  return step * magnitude;
+}
+function shortDate(iso) {
+  const parsed = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
+  if (Number.isNaN(parsed.getTime())) return iso;
+  return `${parsed.getUTCDate()} ${parsed.toLocaleString("en-GB", { month: "short", timeZone: "UTC" })}`;
 }
 function TrendChart({ points, label = "Daily pageviews, GA4 against Vercel" }) {
+  const [hovered, setHovered] = import_react2.default.useState(null);
   if (points.length < 3) return null;
-  const W = 720;
-  const H = 132;
-  const PAD = 4;
   const values = points.flatMap((p) => [p.ga4, p.vercel]).filter((v) => typeof v === "number");
   if (values.length === 0) return null;
-  const max = Math.max(...values, 1);
-  const x = (i) => PAD + i / Math.max(1, points.length - 1) * (W - PAD * 2);
-  const y = (v) => H - PAD - v / max * (H - PAD * 2);
-  const path = (pick) => {
+  const max = niceCeiling(Math.max(...values, 1));
+  const plotW = CHART.w - CHART.left - CHART.right;
+  const plotH = CHART.h - CHART.top - CHART.bottom;
+  const x = (i) => CHART.left + i / Math.max(1, points.length - 1) * plotW;
+  const y = (v) => CHART.top + plotH - v / max * plotH;
+  const line = (pick) => {
     let d = "";
     let penDown = false;
     points.forEach((p, i) => {
@@ -215,43 +285,246 @@ function TrendChart({ points, label = "Daily pageviews, GA4 against Vercel" }) {
     });
     return d.trim();
   };
-  const vercelPath = path((p) => p.vercel);
-  const ga4Path = path((p) => p.ga4);
-  const first = points[0]?.date ?? "";
-  const last = points[points.length - 1]?.date ?? "";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "svg",
-      {
-        viewBox: `0 0 ${W} ${H}`,
-        width: "100%",
-        height: H,
-        role: "img",
-        "aria-label": `${label}, ${first} to ${last}. Peak ${Math.round(max)} pageviews in a day.`,
-        preserveAspectRatio: "none",
-        style: { display: "block", overflow: "visible" },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: vercelPath, fill: "none", stroke: "currentColor", strokeOpacity: "0.85", strokeWidth: "2", vectorEffect: "non-scaling-stroke" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: ga4Path, fill: "none", stroke: "currentColor", strokeOpacity: "0.85", strokeWidth: "2", strokeDasharray: "5 3", vectorEffect: "non-scaling-stroke" })
-        ]
-      }
-    ) }),
+  const bands = [];
+  let run = [];
+  const flushRun = () => {
+    if (run.length > 1) {
+      const top = run.map((i) => `${x(i).toFixed(1)} ${y(points[i].vercel).toFixed(1)}`);
+      const bottom = [...run].reverse().map((i) => `${x(i).toFixed(1)} ${y(points[i].ga4).toFixed(1)}`);
+      bands.push(`M${top.join(" L")} L${bottom.join(" L")} Z`);
+    }
+    run = [];
+  };
+  points.forEach((p, i) => {
+    if (typeof p.ga4 === "number" && typeof p.vercel === "number") run.push(i);
+    else flushRun();
+  });
+  flushRun();
+  const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => ({ value: max * f, y: y(max * f) }));
+  const labelEvery = Math.max(1, Math.ceil(points.length / 6));
+  const dateTicks = points.map((p, i) => ({ i, date: p.date })).filter(({ i }) => i % labelEvery === 0 || i === points.length - 1);
+  const active = hovered !== null ? points[hovered] : null;
+  const activeGap = active && typeof active.ga4 === "number" && typeof active.vercel === "number" && active.vercel > 0 ? (active.vercel - active.ga4) / active.vercel : null;
+  const onKeyDown = (event) => {
+    const last = points.length - 1;
+    const current = hovered ?? 0;
+    const move = (next) => {
+      event.preventDefault();
+      setHovered(Math.max(0, Math.min(last, next)));
+    };
+    if (event.key === "ArrowRight") return move(hovered === null ? 0 : current + 1);
+    if (event.key === "ArrowLeft") return move(hovered === null ? last : current - 1);
+    if (event.key === "Home") return move(0);
+    if (event.key === "End") return move(last);
+    if (event.key === "Escape") {
+      setHovered(null);
+      return;
+    }
+  };
+  const onMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    if (box.width === 0) return;
+    const svgX = (event.clientX - box.left) / box.width * CHART.w;
+    const ratio = (svgX - CHART.left) / plotW;
+    const index = Math.round(ratio * (points.length - 1));
+    setHovered(index >= 0 && index < points.length ? index : null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: chartFrame, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          viewBox: `0 0 ${CHART.w} ${CHART.h}`,
+          width: "100%",
+          style: { display: "block", height: "auto" },
+          role: "img",
+          "aria-label": `${label}, ${points[0]?.date} to ${points[points.length - 1]?.date}. Peak ${formatCount(max)} pageviews in a day.`,
+          onMouseMove: onMove,
+          onMouseLeave: () => setHovered(null),
+          onKeyDown,
+          onBlur: () => setHovered(null),
+          tabIndex: 0,
+          "aria-describedby": active ? "trend-readout" : void 0,
+          children: [
+            ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "line",
+                {
+                  x1: CHART.left,
+                  x2: CHART.w - CHART.right,
+                  y1: tick.y,
+                  y2: tick.y,
+                  stroke: "currentColor",
+                  strokeOpacity: tick.value === 0 ? 0.35 : 0.12,
+                  strokeWidth: "1"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "text",
+                {
+                  x: CHART.left - 8,
+                  y: tick.y + 4,
+                  textAnchor: "end",
+                  fontSize: "11",
+                  fill: "currentColor",
+                  fillOpacity: "0.55",
+                  children: formatCount(tick.value)
+                }
+              )
+            ] }, tick.value)),
+            dateTicks.map(({ i, date }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "text",
+              {
+                x: x(i),
+                y: CHART.h - 10,
+                textAnchor: "middle",
+                fontSize: "11",
+                fill: "currentColor",
+                fillOpacity: "0.55",
+                children: shortDate(date)
+              },
+              date
+            )),
+            bands.map((d) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d, fill: "currentColor", fillOpacity: "0.09", stroke: "none" }, d.slice(0, 24))),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: line((p) => p.vercel), fill: "none", stroke: "currentColor", strokeOpacity: "0.9", strokeWidth: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: line((p) => p.ga4), fill: "none", stroke: "currentColor", strokeOpacity: "0.9", strokeWidth: "2", strokeDasharray: "5 3" }),
+            hovered !== null && active && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "line",
+                {
+                  x1: x(hovered),
+                  x2: x(hovered),
+                  y1: CHART.top,
+                  y2: CHART.top + plotH,
+                  stroke: "currentColor",
+                  strokeOpacity: "0.4",
+                  strokeWidth: "1"
+                }
+              ),
+              typeof active.vercel === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: x(hovered), cy: y(active.vercel), r: "4", fill: "currentColor" }),
+              typeof active.ga4 === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: x(hovered), cy: y(active.ga4), r: "4", fill: "currentColor" })
+            ] })
+          ]
+        }
+      ),
+      active && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: readout, id: "trend-readout", role: "status", "aria-live": "polite", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "medium", children: shortDate(active.date) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 1, muted: true, children: [
+          "Vercel ",
+          typeof active.vercel === "number" ? formatCount(active.vercel) : "\u2014",
+          "  \xB7  ",
+          "GA4 ",
+          typeof active.ga4 === "number" ? formatCount(active.ga4) : "\u2014",
+          activeGap !== null ? `  \xB7  gap ${formatPercent(activeGap, 0)}` : ""
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: legendRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "\u2501\u2501 Vercel" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "\u2504\u2504 GA4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
-        first,
-        " to ",
-        last
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
-        "peak ",
-        formatCount(max),
-        "/day"
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "shaded band is the gap" }),
+      !active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "hover, or focus and use arrow keys, for a day" })
     ] })
   ] });
 }
+function SortableTable({ caption, columns, rows, rowKey, initialSort }) {
+  const [sort, setSort] = import_react2.default.useState(
+    initialSort ? { key: initialSort, desc: true } : null
+  );
+  const active = sort ? columns.find((c) => c.key === sort.key) : void 0;
+  const ordered = import_react2.default.useMemo(() => {
+    if (!active || !sort) return rows;
+    const copy = [...rows];
+    copy.sort((a, b) => {
+      const av = active.sortValue(a);
+      const bv = active.sortValue(b);
+      if (av === null && bv === null) return 0;
+      if (av === null) return 1;
+      if (bv === null) return -1;
+      const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
+      return sort.desc ? -cmp : cmp;
+    });
+    return copy;
+  }, [rows, active, sort]);
+  const toggle = (column) => {
+    setSort((current) => {
+      if (current?.key !== column.key) return { key: column.key, desc: Boolean(column.numeric) };
+      return { key: column.key, desc: !current.desc };
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { radius: 2, tone: "transparent", border: true, style: tableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: tableBase, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { style: visuallyHidden, children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: columns.map((column) => {
+      const isActive = sort?.key === column.key;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "th",
+        {
+          scope: "col",
+          style: column.numeric ? headCellNumeric : headCell,
+          "aria-sort": isActive ? sort?.desc ? "descending" : "ascending" : "none",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", style: sortButton(Boolean(column.numeric)), onClick: () => toggle(column), children: [
+            column.label,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: sortMark, children: isActive ? sort?.desc ? "\u25BC" : "\u25B2" : "\u2195" })
+          ] })
+        },
+        column.key
+      );
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: ordered.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: columns.map((column, index) => {
+      const content = column.render(row);
+      return index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "row", style: bodyCell, children: content }, column.key) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: column.numeric ? bodyCellNumeric : bodyCell, children: content }, column.key);
+    }) }, rowKey(row))) })
+  ] }) });
+}
+var tableWrapper = { overflowX: "auto", width: "100%" };
+var tableBase = { width: "100%", borderCollapse: "collapse", minWidth: 420 };
+var headCell = {
+  padding: 0,
+  textAlign: "left",
+  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  whiteSpace: "nowrap"
+};
+var headCellNumeric = { ...headCell, textAlign: "right" };
+var bodyCell = {
+  padding: "8px 12px",
+  textAlign: "left",
+  fontWeight: 400,
+  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.18))"
+};
+var bodyCellNumeric = {
+  ...bodyCell,
+  textAlign: "right",
+  fontVariantNumeric: "tabular-nums"
+};
+function sortButton(numeric) {
+  return {
+    appearance: "none",
+    background: "transparent",
+    border: "none",
+    color: "inherit",
+    font: "inherit",
+    fontSize: "0.78em",
+    letterSpacing: "0.06em",
+    textTransform: "uppercase",
+    opacity: 0.7,
+    padding: "8px 12px",
+    width: "100%",
+    display: "flex",
+    gap: 6,
+    alignItems: "center",
+    justifyContent: numeric ? "flex-end" : "flex-start",
+    cursor: "pointer"
+  };
+}
+var sortMark = { opacity: 0.7, fontSize: "0.9em" };
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap"
+};
 
 // src/studio/VisitorInsightsTool.tsx
 var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
@@ -259,23 +532,34 @@ var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
 // src/studio/panels.tsx
 var import_sanity_ui_compat2 = require("@liiift-studio/sanity-ui-compat");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function metricSortValue(metric) {
+  return metric.status === "unavailable" ? null : metric.value;
+}
 function maxOf(metrics) {
   return metrics.reduce((max, metric) => metric.status === "unavailable" ? max : Math.max(max, metric.value), 0);
 }
-var tableWrap = { overflowX: "auto", width: "100%" };
+var sectionHeading = { margin: "0 0 2px", lineHeight: 1.3 };
+var sourceLink = {
+  color: "inherit",
+  textDecoration: "underline",
+  textUnderlineOffset: 3,
+  textDecorationThickness: 1
+};
+function isLinkableHost(source) {
+  return /^[a-z0-9-]+(\.[a-z0-9-]+)+$/i.test(source);
+}
 var cardGrid = {
   display: "grid",
   gridTemplateColumns: "repeat(auto-fit, minmax(min(14rem, 100%), 1fr))",
   gap: 16
 };
-var table = { width: "100%", borderCollapse: "collapse", minWidth: 420 };
 var cell = { padding: "8px 12px", textAlign: "left", borderBottom: "1px solid var(--card-border-color)" };
 var numericCell = { ...cell, textAlign: "right" };
 function MeasurementHealthPanel({ data }) {
   const pageviewMax = maxOf([data.ga4Pageviews, data.vercelPageviews]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Pageviews, source against source" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, style: sectionHeading, children: "Pageviews, source against source" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "The same unit on both sides. Vercel is cookieless and ungated; GA4 is consent-gated and blockable, so GA4 seeing fewer is expected." }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax, tone: "primary" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax, tone: "default" })
@@ -285,12 +569,12 @@ function MeasurementHealthPanel({ data }) {
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: data.interpretation })
     ] }) }),
     (data.daily?.length ?? 0) >= 3 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Day by day" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, style: sectionHeading, children: "Day by day" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "A gap that has always been there is consent and blocking. A gap that opens on one day is an incident." }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TrendChart, { points: data.daily ?? [] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Context" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, style: sectionHeading, children: "Context" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Different units to the figures above, and to each other. Shown for scale, never differenced." }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardGrid, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
@@ -325,72 +609,157 @@ function AcquisitionPanel({ data }) {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 4, children: formatPercent(data.unattributedShare, 1) })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { radius: 2, tone: "transparent", border: true, style: tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: table, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("caption", { style: { textAlign: "left", paddingBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Traffic sources by sessions" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Source" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Channel" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Sessions" }) })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: (data.rows ?? []).map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "row", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: row.source }),
-          row.designIndustry && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Badge, { tone: "primary", fontSize: 0, children: "design industry" }),
-          row.unattributed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Badge, { tone: "caution", fontSize: 0, children: "unattributed" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: row.channel }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: formatCount(row.sessions) }) })
-      ] }, `${row.source}-${row.channel}`)) })
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, style: sectionHeading, children: "Traffic sources" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Sort by any column. Sessions is the default." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        SortableTable,
+        {
+          caption: "Traffic sources by sessions",
+          initialSort: "sessions",
+          rows: data.rows ?? [],
+          rowKey: (row) => `${row.source}-${row.channel}`,
+          columns: [
+            {
+              key: "source",
+              label: "Source",
+              sortValue: (row) => row.source,
+              render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [
+                isLinkableHost(row.source) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "a",
+                  {
+                    href: `https://${row.source}`,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: sourceLink,
+                    children: row.source
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: row.source }),
+                row.designIndustry && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Badge, { tone: "primary", fontSize: 0, children: "Design" }),
+                row.unattributed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Badge, { tone: "caution", fontSize: 0, children: "Unattributed" })
+              ] })
+            },
+            {
+              key: "channel",
+              label: "Channel",
+              sortValue: (row) => row.channel,
+              render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: row.channel })
+            },
+            {
+              key: "sessions",
+              label: "Sessions",
+              numeric: true,
+              sortValue: (row) => row.sessions,
+              render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: formatCount(row.sessions) })
+            }
+          ]
+        }
+      )
+    ] }),
     data.rowsWithheld && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoticeList, { notices: ["GA4 withheld some low-traffic rows for privacy, so this list is shorter than reality."] })
   ] });
 }
 function JourneyPanel({ data }) {
-  const max = maxOf((data.steps ?? []).map((step) => step.count));
+  const allSteps = data.steps ?? [];
+  const shown = allSteps.filter((step) => step.count.status !== "unavailable");
+  const hiddenSteps = allSteps.filter((step) => step.count.status === "unavailable");
+  const max = maxOf(shown.map((step) => step.count));
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: data.approximationNote }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Stack, { space: 3, children: (data.steps ?? []).map((step) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Stack, { space: 3, children: shown.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonBar, { label: step.label, metric: step.count, max, tone: "primary" }),
-      step.conversionFromPrevious !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: [
+      step.conversionFromPrevious !== null && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: [
         formatPercent(step.conversionFromPrevious, 1),
-        " of the previous measurable step"
+        " of ",
+        shown[index - 1]?.label.toLowerCase()
       ] })
     ] }, step.key)) }),
+    hiddenSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: [
+      "Not shown: ",
+      hiddenSteps.map((step) => step.label.toLowerCase()).join(", "),
+      " \u2014 not instrumented on this site, so there is no figure to place in the funnel."
+    ] }),
     (data.topLandingPages?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Where sessions began" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { radius: 2, tone: "transparent", border: true, style: tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: table, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Page" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Sessions" }) })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: (data.topLandingPages ?? []).map((page) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "row", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: page.path }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: formatCount(page.sessions) }) })
-        ] }, page.path)) })
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, style: sectionHeading, children: "Where sessions began" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        SortableTable,
+        {
+          caption: "Landing pages by sessions",
+          initialSort: "sessions",
+          rows: data.topLandingPages ?? [],
+          rowKey: (page) => page.path,
+          columns: [
+            {
+              key: "path",
+              label: "Page",
+              sortValue: (page) => page.path,
+              render: (page) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: page.path })
+            },
+            {
+              key: "sessions",
+              label: "Sessions",
+              numeric: true,
+              sortValue: (page) => page.sessions,
+              render: (page) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: formatCount(page.sessions) })
+            }
+          ]
+        }
+      )
     ] })
   ] });
 }
 function TypefaceInterestPanel({ data }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: data.interpretationNote }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { radius: 2, tone: "transparent", border: true, style: tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: table, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("caption", { style: { textAlign: "left", paddingBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Engagement by typeface" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Typeface" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Viewed" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Tested" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Bought" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Test rate" }) })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: (data.rows ?? []).map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "row", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: row.typeface }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.viewed, label: `${row.typeface} viewed`, size: 1 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.tested, label: `${row.typeface} tested`, size: 1 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.bought, label: `${row.typeface} bought`, size: 1 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: row.testRate === null ? "\u2014" : formatPercent(row.testRate, 1) }) })
-      ] }, row.typeface)) })
-    ] }) })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, style: sectionHeading, children: "Engagement by typeface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Sort by any column. Views is the default." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        SortableTable,
+        {
+          caption: "Engagement by typeface",
+          initialSort: "viewed",
+          rows: data.rows ?? [],
+          rowKey: (row) => row.typeface,
+          columns: [
+            {
+              key: "typeface",
+              label: "Typeface",
+              sortValue: (row) => row.typeface,
+              render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: row.typeface })
+            },
+            {
+              key: "viewed",
+              label: "Viewed",
+              numeric: true,
+              sortValue: (row) => metricSortValue(row.viewed),
+              render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.viewed, label: `${row.typeface} viewed`, size: 1 })
+            },
+            {
+              key: "tested",
+              label: "Tested",
+              numeric: true,
+              sortValue: (row) => metricSortValue(row.tested),
+              render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.tested, label: `${row.typeface} tested`, size: 1 })
+            },
+            {
+              key: "bought",
+              label: "Bought",
+              numeric: true,
+              sortValue: (row) => metricSortValue(row.bought),
+              render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.bought, label: `${row.typeface} bought`, size: 1 })
+            },
+            {
+              key: "testRate",
+              label: "Test rate",
+              numeric: true,
+              sortValue: (row) => row.testRate,
+              render: (row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, "aria-label": row.testRate === null ? `${row.typeface} test rate unavailable` : void 0, children: row.testRate === null ? "\u2014" : formatPercent(row.testRate, 1) })
+            }
+          ]
+        }
+      )
+    ] })
   ] });
 }
 var CHECK_TONE = {
@@ -406,15 +775,16 @@ var CHECK_WORD = {
   skipped: "Skipped"
 };
 function DiagnosticsPanel({ data }) {
-  const failing = data.checks.filter((c) => c.status === "fail").length;
-  const warning = data.checks.filter((c) => c.status === "warn").length;
-  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.`;
+  const checks = data.checks ?? [];
+  const failing = checks.filter((c) => c.status === "fail").length;
+  const warning = checks.filter((c) => c.status === "warn").length;
+  const summary = checks.length === 0 ? "No checks ran. Nothing here has been verified either way." : data.verdict === "pass" ? "Configuration and credentials check out. That covers the wiring, not whether the figures are worth trusting \u2014 the caveats on each panel still apply." : `${failing} failing, ${warning} worth a look. Panels depending on these will be wrong or incomplete until they are resolved.`;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: CHECK_TONE[data.verdict], border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: summary }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Stack, { space: 3, children: data.checks.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: CHECK_TONE[data.verdict] ?? "default", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: summary }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Stack, { space: 3, children: checks.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Flex, { align: "center", justify: "space-between", gap: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: item.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Badge, { tone: CHECK_TONE[item.status], fontSize: 0, children: CHECK_WORD[item.status] })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Badge, { tone: CHECK_TONE[item.status] ?? "default", fontSize: 0, children: CHECK_WORD[item.status] ?? item.status })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: item.detail }),
       item.remedy && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: item.remedy })
@@ -424,21 +794,44 @@ function DiagnosticsPanel({ data }) {
 
 // src/studio/VisitorInsightsTool.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var tabStrip = {
+  display: "flex",
+  gap: 2,
+  alignItems: "stretch",
+  flexWrap: "wrap",
+  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.25))"
+};
+function tabStyle(selected) {
+  return {
+    appearance: "none",
+    background: "transparent",
+    border: "none",
+    borderBottom: `2px solid ${selected ? "currentColor" : "transparent"}`,
+    color: "inherit",
+    opacity: selected ? 1 : 0.62,
+    font: "inherit",
+    fontWeight: selected ? 600 : 400,
+    padding: "8px 12px",
+    marginBottom: -1,
+    cursor: "pointer",
+    whiteSpace: "nowrap"
+  };
+}
 var RANGES = [
-  { key: "week", label: "Week" },
-  { key: "quarter", label: "Quarter" },
-  { key: "year", label: "Year" }
+  { key: "week", label: "7 days", span: "the last 7 days" },
+  { key: "quarter", label: "91 days", span: "the last 91 days" },
+  { key: "year", label: "365 days", span: "the last 365 days" }
 ];
 var PANELS = [
-  { report: "measurement-health", label: "Measurement health", blurb: "How much of reality each source actually sees" },
   { report: "acquisition", label: "Acquisition", blurb: "Where visitors come from" },
-  { report: "journey", label: "Journey", blurb: "How far visitors get, and where they stop" },
+  { report: "journey", label: "Journey", blurb: "How far visitors get" },
   { report: "typeface-interest", label: "Typeface interest", blurb: "Viewed, tested and bought, by family" },
+  { report: "measurement-health", label: "Measurement health", blurb: "How much of reality each source actually sees" },
   { report: "diagnostics", label: "Diagnostics", blurb: "What to fix before trusting the numbers above" }
 ];
 function RangeSelector({ value, onChange }) {
-  const refs = (0, import_react2.useRef)([]);
-  const onKeyDown = (0, import_react2.useCallback)(
+  const refs = (0, import_react3.useRef)([]);
+  const onKeyDown = (0, import_react3.useCallback)(
     (event) => {
       const currentIndex = RANGES.findIndex((r) => r.key === value);
       let nextIndex = null;
@@ -469,6 +862,7 @@ function RangeSelector({ value, onChange }) {
         mode: selected ? "default" : "bleed",
         tone: selected ? "primary" : "default",
         text: range.label,
+        title: `Ending today, covering ${range.span}`,
         onClick: () => onChange(range.key),
         fontSize: 1,
         padding: 3
@@ -494,8 +888,8 @@ function SourceStatusRow({ sources }) {
   ] }) });
 }
 function PanelTabs({ value, onChange }) {
-  const refs = (0, import_react2.useRef)([]);
-  const onKeyDown = (0, import_react2.useCallback)(
+  const refs = (0, import_react3.useRef)([]);
+  const onKeyDown = (0, import_react3.useCallback)(
     (event) => {
       const currentIndex = PANELS.findIndex((p) => p.report === value);
       let nextIndex = null;
@@ -512,27 +906,30 @@ function PanelTabs({ value, onChange }) {
     },
     [value, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Flex, { role: "tablist", "aria-label": "Report", gap: 1, wrap: "wrap", onKeyDown, children: PANELS.map((panel, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "tablist", "aria-label": "Report", style: tabStrip, onKeyDown, children: PANELS.map((panel, index) => {
     const selected = panel.report === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_sanity_ui_compat3.Button,
-      {
-        ref: (el) => {
-          refs.current[index] = el;
+    return (
+      // A plain button rather than the UI kit's, so the label is real children and
+      // cannot vanish: the compat shim's DOM fallback does not forward `text`, which
+      // would leave five blank tabs on any Studio version where it falls back.
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          ref: (el) => {
+            refs.current[index] = el;
+          },
+          id: `tab-${panel.report}`,
+          role: "tab",
+          "aria-selected": selected,
+          "aria-controls": `panel-${panel.report}`,
+          tabIndex: selected ? 0 : -1,
+          style: tabStyle(selected),
+          onClick: () => onChange(panel.report),
+          children: panel.label
         },
-        id: `tab-${panel.report}`,
-        role: "tab",
-        "aria-selected": selected,
-        "aria-controls": `panel-${panel.report}`,
-        tabIndex: selected ? 0 : -1,
-        mode: selected ? "default" : "bleed",
-        tone: selected ? "primary" : "default",
-        text: panel.label,
-        onClick: () => onChange(panel.report),
-        fontSize: 1,
-        padding: 3
-      },
-      panel.report
+        panel.report
+      )
     );
   }) });
 }
@@ -558,12 +955,12 @@ function ReportPanel({ report, apiBaseUrl, range }) {
       report === "typeface-interest" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TypefaceInterestPanel, { data: state.envelope.data }),
       report === "diagnostics" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DiagnosticsPanel, { data: state.envelope.data }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
+        "Figures cover ",
         state.envelope.range.start,
         " to ",
         state.envelope.range.end,
-        " (",
-        state.envelope.range.timezone,
-        ")"
+        ", in ",
+        state.envelope.range.timezone
       ] })
     ] })
   ] });
@@ -571,8 +968,8 @@ function ReportPanel({ report, apiBaseUrl, range }) {
 function VisitorInsightsTool(props) {
   const apiBaseUrl = props.tool?.options?.apiBaseUrl ?? props.apiBaseUrl ?? "";
   const siteLabel = props.tool?.options?.siteLabel ?? props.siteLabel ?? "";
-  const [range, setRange] = (0, import_react2.useState)("week");
-  const [activePanel, setActivePanel] = (0, import_react2.useState)("measurement-health");
+  const [range, setRange] = (0, import_react3.useState)("week");
+  const [activePanel, setActivePanel] = (0, import_react3.useState)("acquisition");
   const active = PANELS.find((p) => p.report === activePanel) ?? PANELS[0];
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Container, { width: 4, padding: 4, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 5, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Flex, { align: "flex-start", justify: "space-between", gap: 4, wrap: "wrap", children: [