@liiift-studio/sanity-visitor-insights 0.49.0 → 0.51.0

package/dist/index.js

@@ -266,6 +266,30 @@ var SEND_WINDOW_DAYS = 3;
 // src/studio/Figure.tsx
 var import_react2 = __toESM(require("react"));
 var import_sanity_ui_compat = require("@liiift-studio/sanity-ui-compat");
+
+// src/studio/palette.ts
+var SERIES = {
+  /** The complete, server-side count. The reference every other line is read against. */
+  vercel: "#4C8FD0",
+  /** GA4's pageviews — the like-for-like counterpart to Vercel's. */
+  ga4Pageviews: "#DD6B3F",
+  /** GA4's sessions. Warm, like its sibling above: same instrument, different unit. */
+  ga4Sessions: "#BC861F",
+  /** Orders, from the foundry's own records. Exact. */
+  orders: "#2E9E6B",
+  /** Revenue, same source, different unit. */
+  revenue: "#BF5D9B"
+};
+var REGION_ALPHA = 0.18;
+function seriesFill(key, alpha = REGION_ALPHA) {
+  const hex = SERIES[key];
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// src/studio/Figure.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var REASON_TEXT = {
   not_instrumented: "Not tracked on this site",
@@ -524,7 +548,10 @@ function FunnelChart({ stages, measurement }) {
     const active = activeKey === stage.key;
     const delta = previous ? previous.value - stage.value : 0;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: funnelItem, children: [
-      previous && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: funnelGap, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: gapLabel(delta, measurement) }) }),
+      previous && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelGap, "aria-hidden": "true", children: [
+        measurement === "sequence" && delta > 0 && entry > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: lostTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...lostFill, width: `${Math.max(1, Math.min(1, delta / entry) * 100)}%` } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: gapLabel(delta, measurement) })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
@@ -564,9 +591,30 @@ var funnelList = { listStyle: "none", margin: 0, padding: 0 };
 var funnelItem = { display: "grid", gap: 4 };
 var funnelGap = {
   display: "flex",
+  alignItems: "center",
   justifyContent: "flex-end",
+  gap: 8,
   padding: "4px 2px"
 };
+var lostTrack = {
+  width: "38%",
+  maxWidth: 200,
+  height: 6,
+  borderRadius: 2,
+  overflow: "hidden",
+  background: "currentColor",
+  opacity: 0.1,
+  // Right to left: the bar grows back toward the funnel it came out of, which reads as leaving
+  // rather than as another quantity accumulating alongside.
+  display: "flex",
+  justifyContent: "flex-end"
+};
+var lostFill = {
+  height: "100%",
+  borderRadius: 2,
+  background: SERIES.ga4Pageviews,
+  opacity: 0.75
+};
 function funnelStage(active) {
   return {
     display: "grid",
@@ -581,10 +629,11 @@ function funnelStage(active) {
 var barFill = {
   height: "100%",
   borderRadius: 2,
-  // currentColor at an alpha that clears 3:1 against the card in both themes, so the mark works
-  // from one declaration rather than needing a palette.
-  background: "currentColor",
-  opacity: 0.55
+  // The reference blue, as everywhere else the tool draws "people who were here". Previously
+  // currentColor at 0.55, which made the funnel a stack of grey bars whose only variable was
+  // length — legible, and giving the eye nothing to hold on to across five rungs.
+  background: SERIES.vercel,
+  opacity: 0.85
 };
 var barTrack = {
   height: 8,
@@ -656,6 +705,44 @@ function columnIsEmpty(column, rows) {
     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,
@@ -839,6 +926,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",
@@ -954,30 +1075,6 @@ var import_sanity_ui_compat2 = require("@liiift-studio/sanity-ui-compat");
 var import_d3_scale = require("d3-scale");
 var import_d3_shape = require("d3-shape");
 var import_d3_array = require("d3-array");
-
-// src/studio/palette.ts
-var SERIES = {
-  /** The complete, server-side count. The reference every other line is read against. */
-  vercel: "#4C8FD0",
-  /** GA4's pageviews — the like-for-like counterpart to Vercel's. */
-  ga4Pageviews: "#DD6B3F",
-  /** GA4's sessions. Warm, like its sibling above: same instrument, different unit. */
-  ga4Sessions: "#BC861F",
-  /** Orders, from the foundry's own records. Exact. */
-  orders: "#2E9E6B",
-  /** Revenue, same source, different unit. */
-  revenue: "#BF5D9B"
-};
-var REGION_ALPHA = 0.18;
-function seriesFill(key, alpha = REGION_ALPHA) {
-  const hex = SERIES[key];
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-// src/studio/CrossSourceTimeline.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function colorFor(source, unit, explicit) {
   if (explicit) return explicit;
@@ -1694,7 +1791,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;
 }
@@ -1796,7 +1892,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,
@@ -1980,7 +2076,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 ",
@@ -2094,7 +2190,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." })
@@ -2104,7 +2200,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) }),
@@ -2127,36 +2223,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 }) {
@@ -2211,7 +2323,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,
@@ -2357,69 +2469,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;
@@ -2476,7 +2593,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.",
         " ",
@@ -2611,7 +2728,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,