@liiift-studio/sanity-visitor-insights 0.48.0 → 0.50.0

package/dist/index.d.mts

@@ -363,6 +363,13 @@ interface SortColumn<Row> {
      * currency, and a column with a fallback displays something `sortValue` returns null for.
      */
     exportValue?: (row: Row) => number | string | null;
+    /**
+     * Keep this column even when every value in it is blank or zero.
+     *
+     * For the column that identifies the row — a table whose first column collapsed would be a list
+     * of numbers belonging to nothing — and for any column whose emptiness is itself the finding.
+     */
+    alwaysShow?: boolean;
     render: (row: Row) => React.ReactNode;
 }
 /** Props for SortableTable. */

package/dist/index.d.ts

@@ -363,6 +363,13 @@ interface SortColumn<Row> {
      * currency, and a column with a fallback displays something `sortValue` returns null for.
      */
     exportValue?: (row: Row) => number | string | null;
+    /**
+     * Keep this column even when every value in it is blank or zero.
+     *
+     * For the column that identifies the row — a table whose first column collapsed would be a list
+     * of numbers belonging to nothing — and for any column whose emptiness is itself the finding.
+     */
+    alwaysShow?: boolean;
     render: (row: Row) => React.ReactNode;
 }
 /** Props for SortableTable. */

package/dist/index.js

@@ -648,6 +648,52 @@ function NoticeList({ notices }) {
     )
   ] });
 }
+function columnIsEmpty(column, rows) {
+  if (column.alwaysShow) return false;
+  if (rows.length === 0) return false;
+  return rows.every((row) => {
+    const value = column.sortValue(row);
+    return value === 0 || value === "";
+  });
+}
+function Section({
+  title,
+  subtitle,
+  tone = "primary",
+  collapsible = false,
+  defaultOpen = true,
+  children
+}) {
+  const [open, setOpen] = import_react2.default.useState(defaultOpen);
+  const bodyId = import_react2.default.useId();
+  const shown = !collapsible || open;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Heading, { size: tone === "primary" ? 1 : 0, style: tone === "primary" ? primaryTitle : secondaryTitle, children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, muted: true, children: subtitle })
+      ] }),
+      collapsible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          style: sectionToggle,
+          "aria-expanded": open,
+          "aria-controls": bodyId,
+          onClick: () => setOpen((was) => !was),
+          children: open ? "Hide" : "Show"
+        }
+      )
+    ] }),
+    shown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: bodyId, children })
+  ] }) });
+}
+function SectionTitle({
+  title,
+  tone = "primary"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionHeader, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Heading, { size: tone === "primary" ? 1 : 0, style: tone === "primary" ? primaryTitle : secondaryTitle, children: title }) });
+}
 function SortableTable({
   caption,
   columns,
@@ -666,6 +712,7 @@ function SortableTable({
   const [query, setQuery] = import_react2.default.useState("");
   const [excluded, setExcluded] = import_react2.default.useState(() => /* @__PURE__ */ new Set());
   const [copied, setCopied] = import_react2.default.useState("idle");
+  const [showEmpty, setShowEmpty] = import_react2.default.useState(false);
   const copyTimer = import_react2.default.useRef(null);
   import_react2.default.useEffect(() => () => {
     if (copyTimer.current !== null) window.clearTimeout(copyTimer.current);
@@ -679,6 +726,13 @@ function SortableTable({
       return filterOn(row).toLowerCase().includes(needle);
     });
   }, [rows, query, excluded, filterOn, rowKey]);
+  const emptyColumns = import_react2.default.useMemo(
+    () => columns.filter(
+      (column, index) => index > 0 && column.key !== sort?.key && columnIsEmpty(column, visible)
+    ),
+    [columns, visible, sort?.key]
+  );
+  const shown = showEmpty || emptyColumns.length === 0 ? columns : columns.filter((column) => !emptyColumns.includes(column));
   const ordered = import_react2.default.useMemo(() => {
     const rows2 = visible;
     if (!active || !sort) return rows2;
@@ -701,8 +755,8 @@ function SortableTable({
     });
   };
   const copyCsv = async () => {
-    const header = columns.map((column) => column.label);
-    const lines = [header, ...ordered.map((row) => columns.map((column) => {
+    const header = shown.map((column) => column.label);
+    const lines = [header, ...ordered.map((row) => shown.map((column) => {
       const value = column.exportValue ? column.exportValue(row) : column.sortValue(row);
       return value === null || value === void 0 ? "" : String(value);
     }))];
@@ -722,7 +776,7 @@ function SortableTable({
   const hiddenCount = rows.length - visible.length - excludedInWindow;
   const excludedCount = excluded.size;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
-    (filterOn || exportName) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: tableControls, children: [
+    (filterOn || exportName || emptyColumns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: tableControls, children: [
       filterOn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "input",
         {
@@ -750,11 +804,21 @@ function SortableTable({
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
+      emptyColumns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          style: tableControlButton,
+          "aria-pressed": showEmpty,
+          onClick: () => setShowEmpty((open) => !open),
+          children: showEmpty ? `Hide ${emptyColumns.length} empty column${emptyColumns.length === 1 ? "" : "s"}` : `Show ${emptyColumns.length} empty column${emptyColumns.length === 1 ? "" : "s"}`
+        }
+      ),
       exportName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: tableControlButton, onClick: () => void copyCsv(), children: copied === "done" ? "Copied" : copied === "failed" ? "Could not copy" : "Copy as CSV" })
     ] }),
     /* @__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) => {
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: shown.map((column) => {
         const isActive = sort?.key === column.key;
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "th",
@@ -773,7 +837,7 @@ function SortableTable({
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [
         ordered.map((row) => {
           const key = rowKey(row);
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: columns.map((column, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: shown.map((column, index) => {
             const content = column.render(row);
             return index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "row", style: bodyCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: firstCell, children: [
               content,
@@ -813,6 +877,40 @@ var tableControls = {
   gap: 10,
   flexWrap: "wrap"
 };
+var sectionHeader = {
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: 12,
+  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.22))",
+  paddingBottom: 6
+};
+var primaryTitle = { margin: 0, lineHeight: 1.3 };
+var secondaryTitle = {
+  margin: 0,
+  lineHeight: 1.3,
+  textTransform: "uppercase",
+  letterSpacing: "0.07em",
+  opacity: 0.75
+};
+var sectionToggle = {
+  appearance: "none",
+  background: "transparent",
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  borderRadius: 3,
+  color: "inherit",
+  font: "inherit",
+  fontSize: "0.8em",
+  padding: "2px 9px",
+  cursor: "pointer",
+  flex: "0 0 auto"
+};
+var splitGrid = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(min(26rem, 100%), 1fr))",
+  gap: 24,
+  alignItems: "start"
+};
 var filterInput = {
   font: "inherit",
   fontSize: "0.85em",
@@ -1668,7 +1766,6 @@ var OLDER_ROUTE = "This site\u2019s analytics route is older than this figure \u
 function maxOf(metrics) {
   return metrics.reduce((max, metric) => metric.status === "unavailable" ? max : Math.max(max, metric.value), 0);
 }
-var sectionHeading = { margin: "0 0 2px", lineHeight: 1.3 };
 function finiteOrNull(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
@@ -1770,7 +1867,7 @@ function OverviewPanel({ data, previous, onBrush }) {
       ] }) })
     ] }),
     (data.crossSource?.length ?? 0) >= 3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Everything, on one time axis" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Everything, on one time axis" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Each row has its own scale. Hover a day, or use the control below, to see what each source saw of it." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         CrossSourceTimeline,
@@ -1954,7 +2051,7 @@ function OverviewPanel({ data, previous, onBrush }) {
       )
     ] }),
     (data.campaigns?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Email campaigns" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Email campaigns" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Clicks are distinct subscribers. Opens are inflated by Apple Mail Privacy Protection, which fetches images on the recipient\u2019s behalf \u2014 so sort on clicks, not opens." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: [
         "The last two columns count what your order book records in the ",
@@ -2068,7 +2165,7 @@ function DataHealthPanel({ data, diagnostics }) {
   const pageviewMax = maxOf([data.ga4Pageviews, data.vercelPageviews]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Pageviews, source against source" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Pageviews, source against source" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.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_runtime3.jsx)(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax, outOf: "Blocked less than GA4, but not immune to it." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax, outOf: "A subset of the bar above, not a rival measurement." })
@@ -2078,7 +2175,7 @@ function DataHealthPanel({ data, diagnostics }) {
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: data.interpretation })
     ] }) }),
     ((data.capture?.estimates?.length ?? 0) > 0 || data.estimatedSessions?.status === "estimated") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "How much GA4 is seeing" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "How much GA4 is seeing" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: (data.capture?.estimates ?? []).map((estimate) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: estimate.basis === "orders" ? "Measured against orders" : estimate.basis === "email" ? "Measured against email clicks" : "Measured against Vercel" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatPercent(estimate.rate, 0) }),
@@ -2101,36 +2198,52 @@ function DataHealthPanel({ data, diagnostics }) {
       ] }) })
     ] }),
     Object.keys(data.orderStatuses ?? {}).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Order statuses in this range" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Order statuses in this range", tone: "secondary" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "What the orders actually say, before any filtering. Use these values to set which statuses count as a sale." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: Object.entries(data.orderStatuses ?? {}).sort((a, b) => b[1] - a[1]).map(([status, count]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: status }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 3, children: formatCount(count) })
       ] }) }, status)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Context" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Different units to the figures above, and to each other." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Vercel visitors" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.vercelVisitors, OLDER_ROUTE), label: "Vercel visitors" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel\u2019s own counter. Blocked far less often than Google Analytics, but not never \u2014 so read it as a floor on your real traffic." })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "GA4 sessions" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: data.ga4Sessions, label: "GA4 sessions" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Consent granted" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: data.consentRate, label: "Consent granted, share of visitors GA4 saw", unit: "percent" })
-        ] }) })
-      ] })
-    ] }),
-    diagnostics && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Configuration" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DiagnosticsPanel, { data: diagnostics })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Section,
+      {
+        title: "Context",
+        tone: "secondary",
+        subtitle: "Different units to the figures above, and to each other.",
+        collapsible: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Vercel visitors" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.vercelVisitors, OLDER_ROUTE), label: "Vercel visitors" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel\u2019s own counter. Blocked far less often than Google Analytics, but not never \u2014 so read it as a floor on your real traffic." })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "GA4 sessions" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: data.ga4Sessions, label: "GA4 sessions" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Consent granted" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: data.consentRate, label: "Consent granted, share of visitors GA4 saw", unit: "percent" })
+          ] }) })
+        ] })
+      }
+    ),
+    diagnostics && /* Open, and primary. This is the longest block on the tab and the obvious candidate
+       for folding away — but the tab it sits on exists to answer "what should I fix
+       before trusting any of this", and these checks ARE that answer. Folding it would
+       have left Data health opening on a summary of the problem with the solution behind
+       a click. It stays collapsible so a reader who has read it can get it out of the
+       way. */
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Section,
+      {
+        title: "Configuration",
+        subtitle: "What this site has wired up, and what it is missing.",
+        collapsible: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DiagnosticsPanel, { data: diagnostics })
+      }
+    )
   ] });
 }
 function AcquisitionPanel({ data, previous }) {
@@ -2185,7 +2298,7 @@ function AcquisitionPanel({ data, previous }) {
       ] }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Traffic sources" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Traffic sources" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Sort, filter, or exclude a row to see what the rest looks like." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         SortableTable,
@@ -2331,69 +2444,74 @@ function JourneyPanel({ data }) {
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: tracked, children: data.approximationNote })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FunnelChart, { stages, measurement: data.measurement ?? "independent-totals" }),
-    (data.outcomes?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Other outcomes" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Successful outcomes that are not a licence sale. Counted over the same window as the funnel, but not a step within it." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: (data.outcomes ?? []).map((outcome) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: outcome.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: outcome.count, label: outcome.label, size: 4 }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: outcome.note })
-      ] }) }, outcome.key)) })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: splitGrid, children: [
+      (data.outcomes?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Section,
+        {
+          title: "Other outcomes",
+          subtitle: "Successful outcomes that are not a licence sale, counted over the same window as the funnel but not a step within it.",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: (data.outcomes ?? []).map((outcome) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: outcome.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: outcome.count, label: outcome.label, size: 4 }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: outcome.note })
+          ] }) }, outcome.key)) })
+        }
+      ),
+      (data.topLandingPages?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Section, { title: "Where sessions began", subtitle: "The page a visit started on, busiest first.", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LandingPagesTable, { rows: data.topLandingPages ?? [] }) })
     ] }),
     hiddenSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.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_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Where sessions began" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        SortableTable,
-        {
-          caption: "Landing pages by sessions",
-          initialSort: "sessions",
-          rows: data.topLandingPages ?? [],
-          rowKey: (page) => page.path,
-          filterOn: (page) => page.path,
-          filterPlaceholder: "Filter pages",
-          exportName: "landing-pages",
-          columns: [
-            {
-              key: "path",
-              label: "Page",
-              sortValue: (page) => page.path,
-              // The comment here used to describe this fix without applying it: it said
-              // the foundry's own URLs were the one table that did not link while
-              // referrer hosts did, and then rendered plain text. A comment asserting
-              // something the code does not do is worse than no comment.
-              render: (page) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: page.path, target: "_blank", rel: "noopener noreferrer", style: sourceLink, children: page.path }) })
-            },
-            {
-              key: "sessions",
-              label: "Sessions",
-              numeric: true,
-              sortValue: (page) => page.sessions,
-              render: (page) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: formatCount(page.sessions) })
-            },
-            {
-              key: "engagement",
-              label: "Engaged",
-              numeric: true,
-              sortValue: (page) => finiteOrNull(page.engagementRate),
-              exportValue: (page) => {
-                const r = finiteOrNull(page.engagementRate);
-                return r === null ? null : formatPercent(r, 0);
-              },
-              // Volume alone could not distinguish a page that delivers 200 arrivals
-              // which leave from one that feeds the shop.
-              render: (page) => finiteOrNull(page.engagementRate) === null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: formatPercent(page.engagementRate, 0) })
-            }
-          ]
-        }
-      )
     ] })
   ] });
 }
+function LandingPagesTable({ rows }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    SortableTable,
+    {
+      caption: "Landing pages by sessions",
+      initialSort: "sessions",
+      rows,
+      rowKey: (page) => page.path,
+      filterOn: (page) => page.path,
+      filterPlaceholder: "Filter pages",
+      exportName: "landing-pages",
+      columns: [
+        {
+          key: "path",
+          label: "Page",
+          sortValue: (page) => page.path,
+          // The comment here used to describe this fix without applying it: it said
+          // the foundry's own URLs were the one table that did not link while
+          // referrer hosts did, and then rendered plain text. A comment asserting
+          // something the code does not do is worse than no comment.
+          render: (page) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: page.path, target: "_blank", rel: "noopener noreferrer", style: sourceLink, children: page.path }) })
+        },
+        {
+          key: "sessions",
+          label: "Sessions",
+          numeric: true,
+          sortValue: (page) => page.sessions,
+          render: (page) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: formatCount(page.sessions) })
+        },
+        {
+          key: "engagement",
+          label: "Engaged",
+          numeric: true,
+          sortValue: (page) => finiteOrNull(page.engagementRate),
+          exportValue: (page) => {
+            const r = finiteOrNull(page.engagementRate);
+            return r === null ? null : formatPercent(r, 0);
+          },
+          // Volume alone could not distinguish a page that delivers 200 arrivals
+          // which leave from one that feeds the shop.
+          render: (page) => finiteOrNull(page.engagementRate) === null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: formatPercent(page.engagementRate, 0) })
+        }
+      ]
+    }
+  );
+}
 var MIN_FAMILY_VIEWS = 30;
 function catalogueRate(rows) {
   let views = 0;
@@ -2450,7 +2568,7 @@ function TypefaceInterestPanel({ data }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: data.interpretationNote }) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Engagement by typeface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Engagement by typeface" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: [
         "Sort by any column. \u201CSells vs catalogue\u201D compares each family\u2019s sales-per-view against the catalogue as a whole \u2014 1.0\xD7 is average, and sorting up finds the families that are looked at and do not sell. It is a comparison between your families, not the share of visitors who buy: Google Analytics sees only a fraction of the views, which moves every family together and so cancels out here. With one or two sales a family will still swing a long way, so read it alongside the order counts beside it.",
         " ",
@@ -2585,7 +2703,7 @@ function TypefaceInterestPanel({ data }) {
       )
     ] }),
     (data.licences?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "How licences sell" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "How licences sell" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "From the orders themselves, so this is exact and unaffected by whatever GA4 is doing. Tier and term are separate rows, because they are the two variables in the pricing question and a tier that sells well at one year may not at perpetual." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ProportionChart,