@liiift-studio/sanity-visitor-insights 0.25.0 → 0.26.0

package/dist/index.d.mts

@@ -3,37 +3,6 @@ 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-BUZuS1c-.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-BUZuS1c-.mjs';
 
-/**
- * The Visitor Insights Studio tool.
- *
- * One range control drives every panel, implemented once here as a proper radiogroup with
- * roving tabindex — repeating a bespoke toggle per panel is how keyboard behaviour ends up
- * inconsistent between them.
- */
-
-/** Options supplied by the plugin config, carried on the Sanity tool definition. */
-interface VisitorInsightsToolProps {
-    apiBaseUrl: string;
-    siteLabel: string;
-}
-/**
- * What Sanity actually hands a tool component.
- *
- * Sanity does NOT spread a tool's `options` onto its component's props — it passes the whole tool
- * definition as `tool`, with the options nested inside. Destructuring `apiBaseUrl` straight off
- * props therefore yields undefined, and the first thing useReport does with it is call .replace(),
- * so every panel failed with "Cannot read properties of undefined (reading 'replace')".
- *
- * Both shapes are accepted: the nested one because that is what the Studio passes, and the flat one
- * because the component is exported for direct use and is mounted that way in tests.
- */
-interface VisitorInsightsToolComponentProps extends Partial<VisitorInsightsToolProps> {
-    tool?: {
-        options?: Partial<VisitorInsightsToolProps>;
-    };
-}
-declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps): React.ReactElement;
-
 /**
  * Data hook for the Studio panels.
  *
@@ -100,6 +69,37 @@ declare function useReport<T>({ apiBaseUrl, report, range, custom, enabled }: Us
     reload: () => void;
 };
 
+/**
+ * The Visitor Insights Studio tool.
+ *
+ * One range control drives every panel, implemented once here as a proper radiogroup with
+ * roving tabindex — repeating a bespoke toggle per panel is how keyboard behaviour ends up
+ * inconsistent between them.
+ */
+
+/** Options supplied by the plugin config, carried on the Sanity tool definition. */
+interface VisitorInsightsToolProps {
+    apiBaseUrl: string;
+    siteLabel: string;
+}
+/**
+ * What Sanity actually hands a tool component.
+ *
+ * Sanity does NOT spread a tool's `options` onto its component's props — it passes the whole tool
+ * definition as `tool`, with the options nested inside. Destructuring `apiBaseUrl` straight off
+ * props therefore yields undefined, and the first thing useReport does with it is call .replace(),
+ * so every panel failed with "Cannot read properties of undefined (reading 'replace')".
+ *
+ * Both shapes are accepted: the nested one because that is what the Studio passes, and the flat one
+ * because the component is exported for direct use and is mounted that way in tests.
+ */
+interface VisitorInsightsToolComponentProps extends Partial<VisitorInsightsToolProps> {
+    tool?: {
+        options?: Partial<VisitorInsightsToolProps>;
+    };
+}
+declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps): React.ReactElement;
+
 /**
  * Shared renderers for metric values and comparison bars.
  *
@@ -199,6 +199,10 @@ interface ChartDataProps<Row> {
     columns: Array<SortColumn<Row>>;
     rowKey: (row: Row) => string;
     exportName?: string;
+    /** A line above the table, for anything a column header cannot carry. */
+    note?: string;
+    /** Which column to filter on, if the table should offer a filter box. */
+    filterOn?: (row: Row) => string;
 }
 /**
  * The figures behind a chart, as a table, collapsed by default.
@@ -212,7 +216,7 @@ interface ChartDataProps<Row> {
  * axis type at any size; and anyone who wants these numbers in a spreadsheet, since the table
  * brings sorting and CSV copy with it. Collapsed, so it costs a sighted reader one line.
  */
-declare function ChartData<Row>({ label, rows, columns, rowKey, exportName }: ChartDataProps<Row>): React.ReactElement | null;
+declare function ChartData<Row>({ label, rows, columns, rowKey, exportName, note, filterOn }: ChartDataProps<Row>): React.ReactElement | null;
 /** One bar of a proportion chart. */
 interface ProportionBar {
     key: string;

package/dist/index.d.ts

@@ -3,37 +3,6 @@ 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-BUZuS1c-.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-BUZuS1c-.js';
 
-/**
- * The Visitor Insights Studio tool.
- *
- * One range control drives every panel, implemented once here as a proper radiogroup with
- * roving tabindex — repeating a bespoke toggle per panel is how keyboard behaviour ends up
- * inconsistent between them.
- */
-
-/** Options supplied by the plugin config, carried on the Sanity tool definition. */
-interface VisitorInsightsToolProps {
-    apiBaseUrl: string;
-    siteLabel: string;
-}
-/**
- * What Sanity actually hands a tool component.
- *
- * Sanity does NOT spread a tool's `options` onto its component's props — it passes the whole tool
- * definition as `tool`, with the options nested inside. Destructuring `apiBaseUrl` straight off
- * props therefore yields undefined, and the first thing useReport does with it is call .replace(),
- * so every panel failed with "Cannot read properties of undefined (reading 'replace')".
- *
- * Both shapes are accepted: the nested one because that is what the Studio passes, and the flat one
- * because the component is exported for direct use and is mounted that way in tests.
- */
-interface VisitorInsightsToolComponentProps extends Partial<VisitorInsightsToolProps> {
-    tool?: {
-        options?: Partial<VisitorInsightsToolProps>;
-    };
-}
-declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps): React.ReactElement;
-
 /**
  * Data hook for the Studio panels.
  *
@@ -100,6 +69,37 @@ declare function useReport<T>({ apiBaseUrl, report, range, custom, enabled }: Us
     reload: () => void;
 };
 
+/**
+ * The Visitor Insights Studio tool.
+ *
+ * One range control drives every panel, implemented once here as a proper radiogroup with
+ * roving tabindex — repeating a bespoke toggle per panel is how keyboard behaviour ends up
+ * inconsistent between them.
+ */
+
+/** Options supplied by the plugin config, carried on the Sanity tool definition. */
+interface VisitorInsightsToolProps {
+    apiBaseUrl: string;
+    siteLabel: string;
+}
+/**
+ * What Sanity actually hands a tool component.
+ *
+ * Sanity does NOT spread a tool's `options` onto its component's props — it passes the whole tool
+ * definition as `tool`, with the options nested inside. Destructuring `apiBaseUrl` straight off
+ * props therefore yields undefined, and the first thing useReport does with it is call .replace(),
+ * so every panel failed with "Cannot read properties of undefined (reading 'replace')".
+ *
+ * Both shapes are accepted: the nested one because that is what the Studio passes, and the flat one
+ * because the component is exported for direct use and is mounted that way in tests.
+ */
+interface VisitorInsightsToolComponentProps extends Partial<VisitorInsightsToolProps> {
+    tool?: {
+        options?: Partial<VisitorInsightsToolProps>;
+    };
+}
+declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps): React.ReactElement;
+
 /**
  * Shared renderers for metric values and comparison bars.
  *
@@ -199,6 +199,10 @@ interface ChartDataProps<Row> {
     columns: Array<SortColumn<Row>>;
     rowKey: (row: Row) => string;
     exportName?: string;
+    /** A line above the table, for anything a column header cannot carry. */
+    note?: string;
+    /** Which column to filter on, if the table should offer a filter box. */
+    filterOn?: (row: Row) => string;
 }
 /**
  * The figures behind a chart, as a table, collapsed by default.
@@ -212,7 +216,7 @@ interface ChartDataProps<Row> {
  * axis type at any size; and anyone who wants these numbers in a spreadsheet, since the table
  * brings sorting and CSV copy with it. Collapsed, so it costs a sighted reader one line.
  */
-declare function ChartData<Row>({ label, rows, columns, rowKey, exportName }: ChartDataProps<Row>): React.ReactElement | null;
+declare function ChartData<Row>({ label, rows, columns, rowKey, exportName, note, filterOn }: ChartDataProps<Row>): React.ReactElement | null;
 /** One bar of a proportion chart. */
 interface ProportionBar {
     key: string;

package/dist/index.js

@@ -365,20 +365,24 @@ function ComparisonBar({ label, metric, max, outOf }) {
     outOf && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: outOf })
   ] });
 }
-function ChartData({ label, rows, columns, rowKey, exportName }) {
+function ChartData({ label, rows, columns, rowKey, exportName, note, filterOn }) {
   if (rows.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { style: disclosureBlock, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { style: disclosureSummary, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      SortableTable,
-      {
-        caption: label,
-        rows,
-        columns,
-        rowKey,
-        exportName
-      }
-    ) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: 10 }, children: [
+      note && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, style: { marginBottom: 8, display: "block" }, children: note }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SortableTable,
+        {
+          caption: label,
+          rows,
+          columns,
+          rowKey,
+          exportName,
+          filterOn
+        }
+      )
+    ] })
   ] });
 }
 var disclosureBlock = { width: "100%" };
@@ -1054,7 +1058,7 @@ var import_d3_shape = require("d3-shape");
 var import_d3_array = require("d3-array");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var WIDTH = 760;
-var ROW_HEIGHT = 74;
+var ROW_HEIGHT = 92;
 var AXIS_HEIGHT = 26;
 var GUTTER = 52;
 var RIGHT_PAD = 12;
@@ -1131,7 +1135,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     (from, to) => {
       if (!onBrush) return;
       if (to - from < MIN_BRUSH_DAYS - 1) {
-        setTooShort(true);
+        setTooShort(to > from);
         return;
       }
       setTooShort(false);
@@ -1146,12 +1150,14 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       const index = indexAt(event.clientX);
       if (index === null) return;
       setHoverIndex(index);
-      if (brushAnchor !== null) setBrushed([Math.min(brushAnchor, index), Math.max(brushAnchor, index)]);
+      if (brushAnchor !== null) {
+        const from = Math.min(brushAnchor, index);
+        const to = Math.max(brushAnchor, index);
+        setBrushed((current) => current && current[0] === from && current[1] === to ? current : [from, to]);
+      }
     },
     [indexAt, brushAnchor]
   );
-  if (dates.length < 3 || series.length === 0 || !x) return null;
-  const hoveredDate = hoverIndex !== null ? dates[hoverIndex] : null;
   const tickIndexes = (0, import_react3.useMemo)(() => {
     if (dates.length === 0) return [];
     if (dates.length === 1) return [0];
@@ -1160,6 +1166,8 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     const indexes = Array.from({ length: affordable }, (_, i) => Math.round(i * step));
     return [...new Set(indexes)];
   }, [dates.length, plotWidth]);
+  if (dates.length < 3 || series.length === 0 || !x) return null;
+  const hoveredDate = hoverIndex !== null ? dates[hoverIndex] : null;
   const revealed = pinned || hoverIndex !== null;
   const shapeOf = (row) => {
     const real = row.points.filter((p) => p.value !== null);
@@ -1193,11 +1201,14 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       const ratio = point.value > 0 ? 1 - saw / point.value : 0;
       if (point.value >= floor && (!worst || ratio > worst.ratio)) worst = { date: point.date, ratio };
     }
-    if (excess > gap) {
-      return [`${row.shortfall.source} counted ${formatCount(Math.round(excess - gap))} MORE ${row.label.toLowerCase()} than ${row.source} over this period, which usually means a tag firing twice rather than extra traffic.`];
+    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.`);
     }
-    if (gap <= 0 || !worst) return [];
-    return [`${row.shortfall.source} missed ${formatCount(Math.round(gap))} ${row.label.toLowerCase()} over this period; the gap was widest on ${tickLabel(/* @__PURE__ */ new Date(`${worst.date}T00:00:00Z`))} at ${formatPercent(worst.ratio, 0)}.`];
+    if (gap <= 0) return sentences;
+    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;
   });
   const summary = `${dates.length} days from ${tickLabel(/* @__PURE__ */ new Date(`${dates[0]}T00:00:00Z`))} to ${tickLabel(/* @__PURE__ */ new Date(`${dates[dates.length - 1]}T00:00:00Z`))}. ` + series.map(shapeOf).join(". ") + ". " + missed.join(" ") + (markers.length > 0 ? ` ${markers.length} campaign send${markers.length === 1 ? "" : "s"} marked.` : "");
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
@@ -1211,6 +1222,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
           setHoverIndex(null);
           setBrushAnchor(null);
           setBrushed(null);
+          setTooShort(false);
         },
         onPointerDown: (event) => {
           if (!onBrush) return;
@@ -1286,7 +1298,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
             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 gap = row.shortfall ? gapGen(row.points) ?? "" : "";
-            const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints.filter((p) => p.value !== null)) ?? "" : "";
+            const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints) ?? "" : "";
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
               /* @__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 }),
@@ -1305,11 +1317,11 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                   "rect",
                   {
                     x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
-                    y: bottom - 1,
+                    y: bottom - 3,
                     width: stemWidth,
-                    height: 1,
+                    height: 3,
                     fill: "currentColor",
-                    opacity: 0.3
+                    opacity: 0.55
                   },
                   `zero-${p.date}`
                 );
@@ -1660,10 +1672,12 @@ 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.",
           label: "Show these figures as a table",
           rows: data.crossSource ?? [],
           rowKey: (d) => d.date,
           exportName: "timeline",
+          filterOn: (d) => d.date,
           columns: [
             { key: "date", label: "Date", sortValue: (d) => d.date, render: (d) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: d.date }) },
             {
@@ -1695,7 +1709,6 @@ function OverviewPanel({ data, previous, onBrush }) {
               label: "Missed by GA4",
               numeric: true,
               sortValue: (d) => gapOf(d),
-              exportValue: (d) => gapOf(d),
               render: (d) => {
                 const gap = gapOf(d);
                 return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: gap === null ? "\u2014" : formatCount(gap) });
@@ -1712,7 +1725,13 @@ function OverviewPanel({ data, previous, onBrush }) {
               label: "GA4 coverage",
               numeric: true,
               sortValue: (d) => coverageOf(d),
-              exportValue: (d) => coverageOf(d),
+              // The FORMATTED value, matching the cell. Passing the raw ratio through
+              // shipped 0.06666666666666667 into a CSV column whose cell reads "7%" —
+              // verbatim the case exportValue exists to prevent.
+              exportValue: (d) => {
+                const coverage = coverageOf(d);
+                return coverage === null ? null : formatPercent(coverage, 0);
+              },
               render: (d) => {
                 const coverage = coverageOf(d);
                 return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: coverage === null ? "\u2014" : formatPercent(coverage, 0) });
@@ -2507,6 +2526,60 @@ function CoverageRibbon({ ratio }) {
     ", not as what happened. Data health explains why."
   ] }) });
 }
+function ReadyReport({
+  envelope,
+  tabId,
+  apiBaseUrl,
+  range,
+  custom,
+  revalidationError,
+  diagnostics,
+  onBrush
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SourceStatusRow, { sources: envelope.sources }),
+    revalidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
+      "These figures are the last ones that loaded. Refreshing them failed: ",
+      revalidationError
+    ] }) }),
+    envelope.comparison && COMPARED_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
+      "Changes are against ",
+      envelope.comparison.range.start,
+      " to ",
+      envelope.comparison.range.end,
+      ", the equivalent window immediately before this one.",
+      envelope.comparison.provisional && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: " This window\u2019s last days are still being processed by GA4, so changes read low." })
+    ] }),
+    GA4_ONLY_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CoverageRibbon, { ratio: knownShortfall(apiBaseUrl, range, range === "custom" ? custom : void 0) }),
+    tabId === "overview" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverviewPanel, { data: envelope.data, previous: envelope.comparison?.data, onBrush }),
+    tabId === "data-health" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        DataHealthPanel,
+        {
+          data: envelope.data,
+          diagnostics: diagnostics.status === "ready" ? diagnostics.envelope.data : void 0
+        }
+      ),
+      diagnostics.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: "Checking configuration\u2026" }),
+      diagnostics.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
+        "Configuration checks could not run: ",
+        diagnostics.message
+      ] }) })
+    ] }),
+    tabId === "acquisition" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AcquisitionPanel, { data: envelope.data, previous: envelope.comparison?.data }),
+    tabId === "journey" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(JourneyPanel, { data: envelope.data }),
+    tabId === "typeface-interest" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TypefaceInterestPanel, { data: envelope.data }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NoticeList, { notices: envelope.notices }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
+      "Figures cover ",
+      envelope.range.start,
+      " to ",
+      envelope.range.end,
+      ", in ",
+      envelope.range.timezone
+    ] })
+  ] });
+}
 function ReportPanel({
   tabId,
   report,
@@ -2542,49 +2615,19 @@ function ReportPanel({
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: state.disabled, children: state.message }),
       !state.disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", style: rangeButton(false), onClick: reload, children: "Try again" }) })
     ] }) }),
-    state.status === "ready" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SourceStatusRow, { sources: state.envelope.sources }),
-      state.revalidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
-        "These figures are the last ones that loaded. Refreshing them failed: ",
-        state.revalidationError
-      ] }) }),
-      state.envelope.comparison && COMPARED_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
-        "Changes are against ",
-        state.envelope.comparison.range.start,
-        " to ",
-        state.envelope.comparison.range.end,
-        ", the equivalent window immediately before this one.",
-        state.envelope.comparison.provisional && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: " This window\u2019s last days are still being processed by GA4, so changes read low." }),
-        GA4_ONLY_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CoverageRibbon, { ratio: knownShortfall(apiBaseUrl, range, range === "custom" ? custom : void 0) }),
-        tabId === "overview" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverviewPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data, onBrush }),
-        tabId === "data-health" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            DataHealthPanel,
-            {
-              data: state.envelope.data,
-              diagnostics: diagnostics.status === "ready" ? diagnostics.envelope.data : void 0
-            }
-          ),
-          diagnostics.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: "Checking configuration\u2026" }),
-          diagnostics.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
-            "Configuration checks could not run: ",
-            diagnostics.message
-          ] }) })
-        ] }),
-        tabId === "acquisition" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AcquisitionPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data }),
-        tabId === "journey" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(JourneyPanel, { data: state.envelope.data }),
-        tabId === "typeface-interest" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TypefaceInterestPanel, { data: state.envelope.data }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NoticeList, { notices: state.envelope.notices })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
-        "Figures cover ",
-        state.envelope.range.start,
-        " to ",
-        state.envelope.range.end,
-        ", in ",
-        state.envelope.range.timezone
-      ] })
-    ] })
+    state.status === "ready" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ReadyReport,
+      {
+        envelope: state.envelope,
+        tabId,
+        apiBaseUrl,
+        range,
+        custom,
+        revalidationError: state.revalidationError ?? null,
+        diagnostics,
+        onBrush
+      }
+    )
   ] });
 }
 function isoDaysAgo(days) {
@@ -2676,15 +2719,15 @@ function VisitorInsightsTool(props) {
           "button",
           {
             type: "button",
-            style: inlineClear,
             "aria-label": "Shift the window forward by its own length",
             disabled: atPresent,
+            style: atPresent ? { ...inlineClear, opacity: 0.35, cursor: "not-allowed" } : inlineClear,
             title: atPresent ? "This window already ends today" : void 0,
             onClick: () => {
               const span = daysBetween(custom.start, custom.end);
               const today = isoDaysAgo(0);
-              const end = shiftDays(custom.end, span);
-              const allowed = end > today ? daysBetween(custom.end, today) : span;
+              const room = daysBetween(custom.end, today) - 1;
+              const allowed = Math.min(span, room);
               if (allowed <= 0) return;
               setCustom({ start: shiftDays(custom.start, allowed), end: shiftDays(custom.end, allowed) });
             },
@@ -2706,7 +2749,7 @@ function VisitorInsightsTool(props) {
           style: { position: "relative" },
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
             active && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: active.blurb }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { resetKey: activePanel, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { resetKey: `${activePanel}|${range}|${custom.start}|${custom.end}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               ReportPanel,
               {
                 tabId: active?.id ?? "overview",