@liiift-studio/sanity-visitor-insights 0.27.1 → 0.29.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as sanity from 'sanity';
 import React from 'react';
-import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-_SBvGBJx.mjs';
-export { C as CaptureBasis, d as CaptureEstimate, e as CaptureModel, f as CheckStatus, g as Coverage, h as CrossSourceDay, i as DailyPoint, j as DateRange, k as DiagnosticCheck, E as EmailCampaign, l as EventCutover, m as JourneyOutcome, n as JourneyStep, L as LandingPage, o as LicenceTierRow, P as PREEXISTING, p as REPORT_NAMES, q as ReportError, S as SiteAnalyticsConfig, r as SourceName, s as SourceRow, t as SourceStatus, u as TimelineEvent, v as TypefaceInterestRow, U as UnavailableReason, w as coverageForRange, x as estimated, y as isReportName, z as ok, B as partial, F as previousRange, G as resolveRange, H as unavailable, I as validateSiteConfig, K as valueOrNull } from './ranges-_SBvGBJx.mjs';
+import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-D1A9JY7h.mjs';
+export { C as CaptureBasis, d as CaptureEstimate, e as CaptureModel, f as CheckStatus, g as Coverage, h as CrossSourceDay, i as DailyPoint, j as DateRange, k as DiagnosticCheck, E as EmailCampaign, l as EventCutover, m as JourneyOutcome, n as JourneyStep, L as LandingPage, o as LicenceTierRow, P as PREEXISTING, p as REPORT_NAMES, q as ReportError, S as SiteAnalyticsConfig, r as SourceName, s as SourceRow, t as SourceStatus, u as TimelineEvent, v as TypefaceInterestRow, U as UnavailableReason, w as coverageForRange, x as estimated, y as isReportName, z as ok, B as partial, F as previousRange, G as resolveRange, H as unavailable, I as validateSiteConfig, K as valueOrNull } from './ranges-D1A9JY7h.mjs';
 
 /**
  * Data hook for the Studio panels.
@@ -117,7 +117,7 @@ declare function formatCount(value: number): string;
 declare function formatPercent(ratio: number, digits?: number): string;
 /** Props for MetricFigure. */
 /** Format a money value in the site's currency, falling back to a plain number. */
-declare function formatMoney(value: number, currency: string | null): string;
+declare function formatMoney(value: number, currency: string | null, fractionDigits?: 0 | 2): string;
 /** Props for Delta. */
 interface DeltaProps {
     /** This period's value, or null when it could not be measured. */

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as sanity from 'sanity';
 import React from 'react';
-import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-_SBvGBJx.js';
-export { C as CaptureBasis, d as CaptureEstimate, e as CaptureModel, f as CheckStatus, g as Coverage, h as CrossSourceDay, i as DailyPoint, j as DateRange, k as DiagnosticCheck, E as EmailCampaign, l as EventCutover, m as JourneyOutcome, n as JourneyStep, L as LandingPage, o as LicenceTierRow, P as PREEXISTING, p as REPORT_NAMES, q as ReportError, S as SiteAnalyticsConfig, r as SourceName, s as SourceRow, t as SourceStatus, u as TimelineEvent, v as TypefaceInterestRow, U as UnavailableReason, w as coverageForRange, x as estimated, y as isReportName, z as ok, B as partial, F as previousRange, G as resolveRange, H as unavailable, I as validateSiteConfig, K as valueOrNull } from './ranges-_SBvGBJx.js';
+import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-D1A9JY7h.js';
+export { C as CaptureBasis, d as CaptureEstimate, e as CaptureModel, f as CheckStatus, g as Coverage, h as CrossSourceDay, i as DailyPoint, j as DateRange, k as DiagnosticCheck, E as EmailCampaign, l as EventCutover, m as JourneyOutcome, n as JourneyStep, L as LandingPage, o as LicenceTierRow, P as PREEXISTING, p as REPORT_NAMES, q as ReportError, S as SiteAnalyticsConfig, r as SourceName, s as SourceRow, t as SourceStatus, u as TimelineEvent, v as TypefaceInterestRow, U as UnavailableReason, w as coverageForRange, x as estimated, y as isReportName, z as ok, B as partial, F as previousRange, G as resolveRange, H as unavailable, I as validateSiteConfig, K as valueOrNull } from './ranges-D1A9JY7h.js';
 
 /**
  * Data hook for the Studio panels.
@@ -117,7 +117,7 @@ declare function formatCount(value: number): string;
 declare function formatPercent(ratio: number, digits?: number): string;
 /** Props for MetricFigure. */
 /** Format a money value in the site's currency, falling back to a plain number. */
-declare function formatMoney(value: number, currency: string | null): string;
+declare function formatMoney(value: number, currency: string | null, fractionDigits?: 0 | 2): string;
 /** Props for Delta. */
 interface DeltaProps {
     /** This period's value, or null when it could not be measured. */

package/dist/index.js

@@ -219,19 +219,25 @@ var REASON_TEXT = {
   source_error: "Source did not respond",
   not_applicable: "Does not apply to this site"
 };
+var LOCALE = "en-GB";
 function formatCount(value) {
-  return new Intl.NumberFormat("en-GB").format(Math.round(value));
+  return new Intl.NumberFormat(LOCALE).format(Math.round(value));
 }
 function formatPercent(ratio, digits = 0) {
   return `${(ratio * 100).toFixed(digits)}%`;
 }
-function formatMoney(value, currency) {
+function formatMoney(value, currency, fractionDigits = 0) {
   if (!currency) return formatCount(Math.round(value));
   try {
-    return new Intl.NumberFormat(void 0, {
+    return new Intl.NumberFormat(LOCALE, {
       style: "currency",
       currency,
-      maximumFractionDigits: value >= 1e3 ? 0 : 2
+      // One precision for the whole column, chosen by the caller, not by each value's own size.
+      // Switching at 1,000 put "$850.00" and "$1,200" in adjacent rows, and printed an axis
+      // reading "$1,000" over a baseline reading "$0.00" — the mismatch the timeline's own
+      // comment claims to have fixed by routing both ends through this function.
+      maximumFractionDigits: fractionDigits,
+      minimumFractionDigits: fractionDigits
     }).format(value);
   } catch {
     return `${formatCount(Math.round(value))} ${currency}`;
@@ -242,7 +248,8 @@ function Delta({ current, previous, riseIsGood = true, unit = "count" }) {
   const now = current;
   const before = previous;
   const absolute = now - before;
-  if (absolute === 0) {
+  const roundsToNothing = unit === "percent" ? Math.abs(absolute) < 0.05 : before !== 0 && Math.abs(absolute / Math.abs(before)) < 5e-3;
+  if (absolute === 0 || roundsToNothing) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: deltaStyle("flat"), children: "no change" });
   }
   const change = before === 0 ? null : absolute / Math.abs(before);
@@ -1081,11 +1088,49 @@ function dayIndexAt(clientX, left, boxWidth, viewBoxWidth, plotWidth, count) {
   const index = Math.round((clamped - GUTTER) / plotWidth * (count - 1));
   return Math.max(0, Math.min(count - 1, index));
 }
+function findCoverageIncident(days, dates) {
+  const measured = days.filter((d) => d !== null);
+  if (measured.length < 21) return null;
+  const sorted = [...measured].sort((a, b) => a - b);
+  const normal = sorted[Math.floor(sorted.length / 2)];
+  if (normal <= 0.1) return null;
+  const threshold = normal * 0.5;
+  const MIN_RUN = 3;
+  let best = null;
+  let runStart = null;
+  for (let i = 0; i <= days.length; i++) {
+    const value = days[i];
+    const low = i < days.length && value !== null && value !== void 0 && value < threshold;
+    if (low && runStart === null) runStart = i;
+    if (!low && runStart !== null) {
+      const length = i - runStart;
+      if (length >= MIN_RUN && (!best || length > best.end - best.start)) best = { start: runStart, end: i };
+      runStart = null;
+    }
+  }
+  if (!best) return null;
+  const during = days.slice(best.start, best.end).filter((d) => d !== null);
+  const before = days.slice(0, best.start).filter((d) => d !== null);
+  if (before.length < 3 || during.length === 0) return null;
+  const mean = (values) => values.reduce((sum, v) => sum + v, 0) / values.length;
+  const onset = dates[best.start];
+  if (!onset) return null;
+  return {
+    onset,
+    days: best.end - best.start,
+    before: mean(before),
+    during: mean(during),
+    // The run reaching the end of the series is the difference between "this happened" and "this
+    // is happening", which is the difference between a note and a job for today.
+    ongoing: best.end >= days.length
+  };
+}
 function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   const [hoverIndex, setHoverIndex] = (0, import_react3.useState)(null);
   const [pinned, setPinned] = (0, import_react3.useState)(false);
   const [brushAnchor, setBrushAnchor] = (0, import_react3.useState)(null);
   const [brushed, setBrushed] = (0, import_react3.useState)(null);
+  const [steppedByKeyboard, setSteppedByKeyboard] = (0, import_react3.useState)(false);
   const [tooShort, setTooShort] = (0, import_react3.useState)(false);
   const [measured, setMeasured] = (0, import_react3.useState)(WIDTH);
   const frameRef = (0, import_react3.useRef)(null);
@@ -1149,6 +1194,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     (event) => {
       const index = indexAt(event.clientX);
       if (index === null) return;
+      setSteppedByKeyboard(false);
       setHoverIndex(index);
       if (brushAnchor !== null) {
         const from = Math.min(brushAnchor, index);
@@ -1203,9 +1249,20 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     }
     const sentences = [];
     if (excess > 0) {
-      sentences.push(`${row.shortfall.source} counted ${formatValue(Math.round(excess), row.unit, currency)} MORE ${row.label.toLowerCase()} than ${row.source} on some days, which usually means a tag firing twice rather than extra traffic.`);
+      sentences.push(`${row.shortfall.source} counted ${formatValue(Math.round(excess), row.unit, currency)} more ${row.label.toLowerCase()} than ${row.source} on some days, which usually means a tag firing twice rather than extra traffic.`);
     }
     if (gap <= 0) return sentences;
+    const coverageByDay = row.points.map((point) => {
+      if (point.value === null || point.value <= 0) return null;
+      const saw = seen.get(point.date);
+      return saw == null ? null : saw / point.value;
+    });
+    const incident = findCoverageIncident(coverageByDay, row.points.map((p) => p.date));
+    if (incident) {
+      sentences.push(
+        `${row.shortfall.source} coverage fell from about ${formatPercent(incident.before, 0)} to ${formatPercent(incident.during, 0)} on ${tickLabel(/* @__PURE__ */ new Date(`${incident.onset}T00:00:00Z`))}` + (incident.ongoing ? `, and has stayed there for ${incident.days} days. That is a change on a date, not a standing shortfall \u2014 something altered on or around then.` : ` for ${incident.days} days, then recovered.`)
+      );
+    }
     const total = `${row.shortfall.source} missed ${formatValue(Math.round(gap), row.unit, currency)} ${row.label.toLowerCase()} over this period`;
     sentences.push(worst && worst.ratio > 0 ? `${total}; the gap was widest on ${tickLabel(/* @__PURE__ */ new Date(`${worst.date}T00:00:00Z`))} at ${formatPercent(worst.ratio, 0)}.` : `${total}.`);
     return sentences;
@@ -1222,7 +1279,6 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
           setHoverIndex(null);
           setBrushAnchor(null);
           setBrushed(null);
-          setTooShort(false);
         },
         onPointerDown: (event) => {
           if (!onBrush) return;
@@ -1272,9 +1328,11 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
           }
           if (next === null) return;
           event.preventDefault();
+          setSteppedByKeyboard(true);
           setHoverIndex(next);
           if (event.shiftKey && onBrush) {
-            const anchor = brushed ? brushed[0] : current;
+            const anchor = brushAnchor ?? current;
+            if (brushAnchor === null) setBrushAnchor(current);
             setBrushed([Math.min(anchor, next), Math.max(anchor, next)]);
           }
         },
@@ -1296,10 +1354,12 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
             const pitch = plotWidth / Math.max(1, dates.length - 1);
             const stemWidth = Math.max(1, Math.min(9, pitch > 2 ? pitch - 1 : pitch));
             const stems = row.mark === "events" ? row.points.filter((p) => p.value !== null && p.value !== 0) : [];
-            const zeroes = row.mark === "events" ? row.points.filter((p) => p.value === 0) : [];
+            const zeroes = row.mark === "events" && pitch >= 6 ? row.points.filter((p) => p.value === 0) : [];
             const gap = row.shortfall ? gapGen(row.points) ?? "" : "";
             const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints) ?? "" : "";
+            const clipId = `row-clip-${rowIndex}`;
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: GUTTER, y: plotTop, width: plotWidth, height: Math.max(1, bottom - plotTop) }) }) }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: GUTTER, x2: GUTTER + plotWidth, y1: bottom, y2: bottom, stroke: "currentColor", strokeWidth: 1, opacity: 0.45 }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER + 4, y: top + 11, fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.85, fontWeight: 500, children: row.label }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("text", { x: GUTTER + plotWidth, y: top + 11, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.72, children: [
@@ -1308,52 +1368,54 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: y(y.domain()[1]) + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: formatValue(y.domain()[1], row.unit, currency) }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: bottom + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: formatValue(0, row.unit, currency) }),
-              gap && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: gap, fill: "currentColor", opacity: 0.48 }),
-              shortfallLine && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: shortfallLine, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeDasharray: "6 4", opacity: 0.8 }),
-              zeroes.map((p) => {
-                const cx = at(p);
-                if (!Number.isFinite(cx)) return null;
-                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "rect",
-                  {
-                    x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
-                    y: bottom - 3,
-                    width: stemWidth,
-                    height: 3,
-                    fill: "currentColor",
-                    opacity: 0.55
-                  },
-                  `zero-${p.date}`
-                );
-              }),
-              stems.map((p) => {
-                const cx = at(p);
-                const headY = y(p.value);
-                if (!Number.isFinite(cx) || !Number.isFinite(headY)) return null;
-                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "rect",
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: `url(#${clipId})`, children: [
+                gap && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: gap, fill: "currentColor", opacity: 0.48 }),
+                shortfallLine && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: shortfallLine, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeDasharray: "6 4", opacity: 0.8 }),
+                zeroes.map((p) => {
+                  const cx = at(p);
+                  if (!Number.isFinite(cx)) return null;
+                  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "rect",
+                    {
+                      x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
+                      y: bottom - 3,
+                      width: stemWidth,
+                      height: 3,
+                      fill: "currentColor",
+                      opacity: 0.55
+                    },
+                    `zero-${p.date}`
+                  );
+                }),
+                stems.map((p) => {
+                  const cx = at(p);
+                  const headY = y(p.value);
+                  if (!Number.isFinite(cx) || !Number.isFinite(headY)) return null;
+                  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "rect",
+                    {
+                      x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
+                      y: Math.min(headY, bottom),
+                      width: stemWidth,
+                      height: Math.max(1.5, Math.abs(bottom - headY)),
+                      fill: "currentColor",
+                      opacity: 0.75
+                    },
+                    p.date
+                  );
+                }),
+                path && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "path",
                   {
-                    x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
-                    y: Math.min(headY, bottom),
-                    width: stemWidth,
-                    height: Math.max(1.5, Math.abs(bottom - headY)),
-                    fill: "currentColor",
-                    opacity: 0.75
-                  },
-                  p.date
-                );
-              }),
-              path && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "path",
-                {
-                  d: path,
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: 2,
-                  strokeDasharray: row.complete ? void 0 : "6 4",
-                  opacity: row.complete ? 0.95 : 0.7
-                }
-              )
+                    d: path,
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeDasharray: row.complete ? void 0 : "6 4",
+                    opacity: row.complete ? 0.95 : 0.7
+                  }
+                )
+              ] })
             ] }, row.key);
           }),
           markers.map((marker) => {
@@ -1412,6 +1474,25 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               opacity: 0.8
             }
           ),
+          tickIndexes.map((index) => {
+            const date = dates[index];
+            if (!date) return null;
+            const at = x(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
+            if (!Number.isFinite(at)) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "line",
+              {
+                x1: at,
+                x2: at,
+                y1: TOP_PAD,
+                y2: height - AXIS_HEIGHT,
+                stroke: "currentColor",
+                strokeWidth: 1,
+                opacity: 0.08
+              },
+              `grid-${date}`
+            );
+          }),
           tickIndexes.map((index, position) => {
             const date = dates[index];
             if (!date) return null;
@@ -1432,7 +1513,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: readoutRow, "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: readoutRow, "aria-live": steppedByKeyboard ? "polite" : "off", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, weight: "medium", children: brushed && brushed[1] > brushed[0] && brushed[1] < dates.length ? `${tickLabel(/* @__PURE__ */ new Date(`${dates[brushed[0]]}T00:00:00Z`))} \u2013 ${tickLabel(/* @__PURE__ */ new Date(`${dates[brushed[1]]}T00:00:00Z`))} \xB7 ${brushed[1] - brushed[0] + 1} days` : hoveredDate ? tickLabel(/* @__PURE__ */ new Date(`${hoveredDate}T00:00:00Z`)) : "Hover the chart to read a day" }),
       hoveredDate && series.map((row) => {
         const point = row.points.find((p) => p.date === hoveredDate);
@@ -1672,7 +1753,7 @@ function OverviewPanel({ data, previous, onBrush }) {
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ChartData,
         {
-          note: "A negative miss means GA4 counted MORE than Vercel that day \u2014 usually a tag firing twice, not extra traffic.",
+          note: "A negative miss means GA4 counted more than Vercel that day \u2014 usually a tag firing twice, not extra traffic.",
           label: "Show these figures as a table",
           rows: data.crossSource ?? [],
           rowKey: (d) => d.date,
@@ -2031,7 +2112,9 @@ function AcquisitionPanel({ data, previous }) {
                * total and the money column is empty.
                */
               key: "brought",
-              label: "Revenue (est.)",
+              // The hedge belongs on the SPLIT, not on the money: the total is exact and the
+              // division of it is the estimate. "(est.)" on a revenue header implied the reverse.
+              label: "Revenue, split",
               numeric: true,
               sortValue: (row) => finiteOrNull(row.revenueShare),
               exportValue: (row) => {
@@ -2040,7 +2123,7 @@ function AcquisitionPanel({ data, previous }) {
               },
               render: (row) => {
                 const share = finiteOrNull(row.revenueShare);
-                if (share === null) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "\u2014" });
+                if (share === null || share === 0) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "\u2014" });
                 const money = finiteOrNull(row.apportionedRevenue);
                 return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 1, children: [
                   money !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: formatMoney(money, data.currency ?? null) }),
@@ -2054,7 +2137,7 @@ function AcquisitionPanel({ data, previous }) {
           ]
         }
       ),
-      (data.trackedPurchases ?? 0) > 0 && finiteOrNull(data.actualRevenue) !== null && // Says exactly what was combined and what was estimated. The money in that column
+      data.splitIsSound === true && finiteOrNull(data.actualRevenue) !== null && // Says exactly what was combined and what was estimated. The money in that column
       // is Sanity's real total spread across GA4's split — right in scale, and derived,
       // which is a different claim from measured. Saying so here is what makes the
       // column usable rather than another figure to distrust.
@@ -2065,10 +2148,16 @@ function AcquisitionPanel({ data, previous }) {
         " ",
         finiteOrNull(data.actualOrders) === null ? "your orders" : `${formatCount(data.actualOrders)} orders`,
         " in Sanity, split across the ",
-        formatCount(data.trackedPurchases),
+        formatCount(data.trackedPurchases ?? 0),
         " purchase",
         data.trackedPurchases === 1 ? "" : "s",
-        " Google Analytics attributed to a source. Google Analytics sees a fraction of your traffic, but it loses it fairly evenly across channels \u2014 so the split is far more trustworthy than its own totals. Treat these as proportions with a real total behind them, not as measured takings per channel."
+        " Google Analytics attributed to a source. Google Analytics sees a fraction of your traffic, so treat this as a proportion with a real total behind it rather than measured takings per channel. Two things to hold in mind: it credits whichever source a buyer arrived from on the visit they bought, which for a considered purchase is often a bookmark rather than the blog that first sent them; and its loss is not perfectly even across channels \u2014 ad-blocking runs high among designers, so earned referrals and direct visits are likelier to be under-credited than paid clicks.",
+        finiteOrNull(data.shownPurchases) !== null && (data.shownPurchases ?? 0) < (data.trackedPurchases ?? 0) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          " ",
+          "The rows above account for ",
+          formatCount(data.shownPurchases ?? 0),
+          " of those sales; the rest came from sources outside this list, so this column does not add up to the whole."
+        ] })
       ] })
     ] }),
     data.rowsWithheld && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NoticeList, { notices: ["GA4 withheld some low-traffic rows for privacy, so this list is shorter than reality."] })
@@ -2151,24 +2240,31 @@ function JourneyPanel({ data }) {
     ] })
   ] });
 }
-function medianOf(values) {
-  const usable = values.filter((v) => v !== null && Number.isFinite(v) && v > 0).sort((a, b) => a - b);
-  if (usable.length < 3) return null;
-  const middle = Math.floor(usable.length / 2);
-  return usable.length % 2 === 0 ? (usable[middle - 1] + usable[middle]) / 2 : usable[middle];
+function catalogueRate(rows) {
+  let views = 0;
+  let sales = 0;
+  for (const row of rows) {
+    const viewed = metricSortValue(row.viewed);
+    const bought = metricSortValue(row.bought);
+    if (viewed === null || bought === null) continue;
+    views += viewed;
+    sales += bought;
+  }
+  return views > 0 && sales > 0 ? sales / views : null;
 }
-function buyRateIndex(row, median) {
+function buyRateIndex(row, benchmark) {
   const rate = row.buyRate;
-  if (median === null || median <= 0 || rate === null || rate === void 0 || !Number.isFinite(rate)) return null;
-  return rate / median;
+  if (benchmark === null || benchmark <= 0) return null;
+  if (rate === null || rate === void 0 || !Number.isFinite(rate) || rate < 0) return null;
+  return rate / benchmark;
 }
 function TypefaceInterestPanel({ data }) {
-  const medianBuyRate = medianOf((data.rows ?? []).map((row) => finiteOrNull(row.buyRate)));
+  const benchmark = catalogueRate(data.rows ?? []);
   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)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Sort by any column. \u201CSells vs catalogue\u201D compares each family\u2019s orders-per-view against the median family, which is the part of that ratio that holds even though Google Analytics only sees a fraction of the views. It ranks families against each other; it is not the share of visitors who buy, and at these order volumes a family with one or two sales will swing a long way." }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         SortableTable,
         {
@@ -2249,24 +2345,26 @@ function TypefaceInterestPanel({ data }) {
               key: "buyRate",
               label: "Sells vs catalogue",
               numeric: true,
-              sortValue: (row) => finiteOrNull(row.buyRate),
+              // The INDEX, so a row rendered as a dash cannot sort above a row with a value.
+              // Sorting on the raw rate returned 0 — a real number — for a family whose
+              // cell showed "—", so ascending put a block of dashes at the top of the
+              // table, which is the one thing this file's header forbids.
+              sortValue: (row) => buyRateIndex(row, benchmark),
               exportValue: (row) => {
-                const index = buyRateIndex(row, medianBuyRate);
-                return index === null ? null : `${index.toFixed(1)}x`;
+                const index = buyRateIndex(row, benchmark);
+                return index === null ? null : `${index.toFixed(1)}x catalogue`;
               },
               render: (row) => {
-                const index = buyRateIndex(row, medianBuyRate);
+                const index = buyRateIndex(row, benchmark);
                 if (index === null) {
                   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, "aria-label": `${row.typeface} not comparable`, children: "\u2014" });
                 }
+                if (index === 0) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: "No sales" });
+                }
                 return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, children: [
                   index.toFixed(1),
-                  "\xD7",
-                  " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { opacity: 0.6, fontSize: "0.85em" }, children: [
-                    index >= 1.15 ? "above" : index <= 0.85 ? "below" : "at",
-                    " median"
-                  ] })
+                  "\xD7 catalogue"
                 ] });
               }
             },
@@ -2613,9 +2711,10 @@ function CoverageRibbon({ ratio }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: ratio > 0.6 ? "critical" : "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
     "Every figure on this tab comes from Google Analytics, which is seeing about ",
     seen,
-    "% of this site\u2019s traffic in this window. Read them as at least ",
-    seen === 0 ? "undercounts" : `${seen}% of the real numbers`,
-    ", not as what happened. Data health explains why."
+    "% of this site\u2019s traffic in this window \u2014 so the real numbers are roughly",
+    " ",
+    seen > 0 ? `${(100 / seen).toFixed(1)}\xD7` : "many times",
+    " these. Data health explains why."
   ] }) });
 }
 function ReadyReport({