@liiift-studio/sanity-visitor-insights 0.22.0 → 0.24.0

package/dist/index.d.mts

@@ -43,6 +43,20 @@ declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps):
  * extractable.
  */
 
+/**
+ * What is known about GA4's coverage of this site and window, or null when nothing is.
+ *
+ * Null is a real answer and must render as nothing: a panel that cannot say how lossy its source is
+ * should not imply the source is fine.
+ *
+ * @param base - the site's API base URL, as passed to the tool
+ * @param range - the range name currently selected
+ * @param custom - the custom bounds, when the range is custom
+ */
+declare function knownShortfall(base: string, range: string, custom?: {
+    start: string;
+    end: string;
+}): number | null;
 /** Loading state for a report. */
 type ReportState<T> = {
     status: 'idle';
@@ -399,6 +413,16 @@ interface Series {
     /** Whether the line's source sees everything. Drives the stroke and the wording. */
     complete: boolean;
     unit: SeriesUnit;
+    /**
+     * How the row is drawn. Defaults to `line`.
+     *
+     * `events` is for a quantity that only exists on the days it happened — orders, revenue. Darden
+     * does seven orders a quarter, and a monotone curve through those seven points drew a smooth
+     * rise and fall across eighty-three days on which nothing occurred, with the curve's overshoot
+     * putting non-zero revenue on days that had none. A stem per day says what a sale is: a discrete
+     * event, on a date, of a size. Days with nothing draw nothing, which is the truth.
+     */
+    mark?: 'line' | 'events';
     points: SeriesPoint[];
     /**
      * What a lossier source saw of the same thing.
@@ -552,4 +576,4 @@ interface VisitorInsightsPluginOptions {
  */
 declare const visitorInsights: sanity.Plugin<VisitorInsightsPluginOptions>;
 
-export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, DataHealthPanel as MeasurementHealthPanel, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, useReport, visitorInsights };
+export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, DataHealthPanel as MeasurementHealthPanel, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, knownShortfall, useReport, visitorInsights };

package/dist/index.d.ts

@@ -43,6 +43,20 @@ declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps):
  * extractable.
  */
 
+/**
+ * What is known about GA4's coverage of this site and window, or null when nothing is.
+ *
+ * Null is a real answer and must render as nothing: a panel that cannot say how lossy its source is
+ * should not imply the source is fine.
+ *
+ * @param base - the site's API base URL, as passed to the tool
+ * @param range - the range name currently selected
+ * @param custom - the custom bounds, when the range is custom
+ */
+declare function knownShortfall(base: string, range: string, custom?: {
+    start: string;
+    end: string;
+}): number | null;
 /** Loading state for a report. */
 type ReportState<T> = {
     status: 'idle';
@@ -399,6 +413,16 @@ interface Series {
     /** Whether the line's source sees everything. Drives the stroke and the wording. */
     complete: boolean;
     unit: SeriesUnit;
+    /**
+     * How the row is drawn. Defaults to `line`.
+     *
+     * `events` is for a quantity that only exists on the days it happened — orders, revenue. Darden
+     * does seven orders a quarter, and a monotone curve through those seven points drew a smooth
+     * rise and fall across eighty-three days on which nothing occurred, with the curve's overshoot
+     * putting non-zero revenue on days that had none. A stem per day says what a sale is: a discrete
+     * event, on a date, of a size. Days with nothing draw nothing, which is the truth.
+     */
+    mark?: 'line' | 'events';
     points: SeriesPoint[];
     /**
      * What a lossier source saw of the same thing.
@@ -552,4 +576,4 @@ interface VisitorInsightsPluginOptions {
  */
 declare const visitorInsights: sanity.Plugin<VisitorInsightsPluginOptions>;
 
-export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, DataHealthPanel as MeasurementHealthPanel, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, useReport, visitorInsights };
+export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, DataHealthPanel as MeasurementHealthPanel, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, knownShortfall, useReport, visitorInsights };

package/dist/index.js

@@ -57,6 +57,7 @@ __export(index_exports, {
   formatMoney: () => formatMoney,
   formatPercent: () => formatPercent,
   isReportName: () => isReportName,
+  knownShortfall: () => knownShortfall,
   ok: () => ok,
   partial: () => partial,
   previousRange: () => previousRange,
@@ -79,6 +80,19 @@ var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
 var import_react = require("react");
 var import_sanity = require("sanity");
 var envelopeCache = /* @__PURE__ */ new Map();
+var shortfallByWindow = /* @__PURE__ */ new Map();
+function windowKey(range, custom) {
+  return range === "custom" && custom ? `${custom.start}..${custom.end}` : range;
+}
+function knownShortfall(base, range, custom) {
+  return shortfallByWindow.get(`${base}|${windowKey(range, custom)}`) ?? null;
+}
+function rememberShortfall(base, range, custom, data) {
+  const ratio = data?.shortfallRatio;
+  if (typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 && ratio <= 1) {
+    shortfallByWindow.set(`${base}|${windowKey(range, custom)}`, ratio);
+  }
+}
 function cacheKey(base, report, range, custom) {
   return [base, report, range, custom?.start ?? "", custom?.end ?? ""].join("|");
 }
@@ -140,6 +154,7 @@ function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
         const envelope = await response.json();
         if (requestIdRef.current !== requestId) return;
         envelopeCache.set(key, envelope);
+        rememberShortfall(apiBaseUrl, range, custom, envelope.data);
         setState({ status: "ready", envelope });
       } catch (e) {
         if (controller.signal.aborted || requestIdRef.current !== requestId) return;
@@ -827,7 +842,8 @@ function SortableTable({
       copyTimer.current = window.setTimeout(() => setCopied("idle"), 4e3);
     }
   };
-  const hiddenCount = rows.length - visible.length;
+  const excludedInWindow = rows.filter((row) => excluded.has(rowKey(row))).length;
+  const hiddenCount = rows.length - visible.length - excludedInWindow;
   const excludedCount = excluded.size;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
     (filterOn || exportName) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: tableControls, children: [
@@ -905,7 +921,7 @@ function SortableTable({
             ] }) }, column.key) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: column.numeric ? bodyCellNumeric : bodyCell, children: content }, column.key);
           }) }, key);
         }),
-        ordered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: columns.length, style: bodyCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, muted: true, children: "No rows match this filter." }) }) })
+        ordered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: columns.length, style: bodyCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, muted: true, children: rows.length === 0 ? "Nothing to show for this period." : query.trim() || excludedInWindow > 0 ? "No rows match this filter." : "Nothing to show for this period." }) }) })
       ] })
     ] }) }),
     truncatedNote && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: truncatedNote })
@@ -1031,7 +1047,7 @@ var import_sanity_ui_compat5 = require("@liiift-studio/sanity-ui-compat");
 var import_sanity_ui_compat3 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/CrossSourceTimeline.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"));
 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");
@@ -1053,18 +1069,48 @@ function formatValue(value, unit, currency) {
 function tickLabel(date) {
   return `${date.getUTCDate()} ${date.toLocaleString("en-GB", { month: "short", timeZone: "UTC" })}`;
 }
+function dayIndexAt(clientX, left, boxWidth, viewBoxWidth, plotWidth, count) {
+  if (count === 0 || boxWidth <= 0 || plotWidth <= 0) return null;
+  const ratio = (clientX - left) / boxWidth * viewBoxWidth;
+  const clamped = Math.max(GUTTER, Math.min(GUTTER + plotWidth, ratio));
+  const index = Math.round((clamped - GUTTER) / plotWidth * (count - 1));
+  return Math.max(0, Math.min(count - 1, index));
+}
 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 [measured, setMeasured] = (0, import_react3.useState)(WIDTH);
   const frameRef = (0, import_react3.useRef)(null);
+  const [frameNode, setFrameNode] = (0, import_react3.useState)(null);
+  const attachFrame = (0, import_react3.useCallback)((node) => {
+    frameRef.current = node;
+    setFrameNode(node);
+  }, []);
   const dates = (0, import_react3.useMemo)(() => {
     const all = /* @__PURE__ */ new Set();
     for (const s of series) for (const p of s.points) all.add(p.date);
     return [...all].sort();
   }, [series]);
-  const plotWidth = WIDTH - GUTTER - RIGHT_PAD;
+  const plotWidth = Math.max(120, measured - GUTTER - RIGHT_PAD);
+  import_react3.default.useLayoutEffect(() => {
+    const frame = frameNode;
+    if (!frame) return;
+    const apply = (width) => {
+      if (width <= 0) return;
+      const next = Math.round(width);
+      setMeasured((current) => Math.abs(next - current) > 1 ? next : current);
+    };
+    apply(frame.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width;
+      if (width !== void 0) apply(width);
+    });
+    observer.observe(frame);
+    return () => observer.disconnect();
+  }, [frameNode]);
   const height = TOP_PAD + series.length * ROW_HEIGHT + AXIS_HEIGHT;
   const x = (0, import_react3.useMemo)(() => {
     if (dates.length === 0) return null;
@@ -1075,12 +1121,9 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       const frame = frameRef.current;
       if (!frame || dates.length === 0) return null;
       const box = frame.getBoundingClientRect();
-      const ratio = (clientX - box.left) / box.width * WIDTH;
-      const clamped = Math.max(GUTTER, Math.min(GUTTER + plotWidth, ratio));
-      const index = Math.round((clamped - GUTTER) / plotWidth * (dates.length - 1));
-      return Math.max(0, Math.min(dates.length - 1, index));
+      return dayIndexAt(clientX, box.left, box.width, measured, plotWidth, dates.length);
     },
-    [dates.length, plotWidth]
+    [dates.length, plotWidth, measured]
   );
   const commit = (0, import_react3.useCallback)(
     (from, to) => {
@@ -1108,6 +1151,13 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     if (real.length === 0) return `${row.label}: no data`;
     const top = real.reduce((best, p) => p.value > best.value ? p : best, real[0]);
     const total = real.reduce((sum, p) => sum + p.value, 0);
+    if (row.mark === "events") {
+      const active = real.filter((p) => p.value !== 0);
+      if (active.length === 0) {
+        return `${row.label} (${row.source}): nothing on any of the ${real.length} days measured`;
+      }
+      return `${row.label} (${row.source}): ${formatValue(total, row.unit, currency)} across ${active.length} of ${real.length} days, the largest ${formatValue(top.value, row.unit, currency)} on ${tickLabel(/* @__PURE__ */ new Date(`${top.date}T00:00:00Z`))}`;
+    }
     return `${row.label} (${row.source}): ${formatValue(total, row.unit, currency)} in total, peaking at ${formatValue(top.value, row.unit, currency)} on ${tickLabel(/* @__PURE__ */ new Date(`${top.date}T00:00:00Z`))}`;
   };
   const missed = series.flatMap((row) => {
@@ -1131,8 +1181,8 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: frameStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "svg",
       {
-        ref: frameRef,
-        viewBox: `0 0 ${WIDTH} ${height}`,
+        ref: attachFrame,
+        viewBox: `0 0 ${measured} ${height}`,
         onMouseMove: onMove,
         onMouseLeave: () => {
           setHoverIndex(null);
@@ -1160,7 +1210,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
           setBrushed(null);
           commit(from, to);
         },
-        style: { width: "100%", height: "auto", display: "block", cursor: onBrush ? "col-resize" : "default" },
+        style: { width: "100%", height, display: "block", cursor: onBrush ? "col-resize" : "default" },
         tabIndex: 0,
         role: "img",
         "aria-label": summary,
@@ -1205,7 +1255,11 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
             const shortfallPoints = row.shortfall?.points ?? [];
             const byDate = new Map(shortfallPoints.map((p) => [p.date, p.value]));
             const gapGen = (0, import_d3_shape.area)().defined((p) => p.value !== null && byDate.get(p.date) != null).x(at).y0((p) => y(byDate.get(p.date))).y1((p) => y(p.value)).curve(import_d3_shape.curveMonotoneX);
-            const path = lineGen(row.points) ?? "";
+            const path = row.mark === "events" ? "" : lineGen(row.points) ?? "";
+            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 gap = row.shortfall ? gapGen(row.points) ?? "" : "";
             const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints.filter((p) => p.value !== null)) ?? "" : "";
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
@@ -1219,7 +1273,40 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: bottom + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: "0" }),
               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 }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              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 - 1,
+                    width: stemWidth,
+                    height: 1,
+                    fill: "currentColor",
+                    opacity: 0.3
+                  },
+                  `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",
                 {
                   d: path,
@@ -1346,7 +1433,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
         }
       ),
       series.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: row.complete ? "\u2500\u2500\u2500" : "\u254C\u254C\u254C" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: row.mark === "events" ? "\u25AE\u25AE\u25AE" : row.complete ? "\u2500\u2500\u2500" : "\u254C\u254C\u254C" }),
         " ",
         row.label,
         " (",
@@ -1513,6 +1600,8 @@ function OverviewPanel({ data, previous, onBrush }) {
               source: "Sanity",
               complete: true,
               unit: "money",
+              // A sale is an event on a date, not a level that varies day to day.
+              mark: "events",
               points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.revenue }))
             }] : [{
               key: "orders",
@@ -1520,6 +1609,7 @@ function OverviewPanel({ data, previous, onBrush }) {
               source: "Sanity",
               complete: true,
               unit: "count",
+              mark: "events",
               points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.orders }))
             }]
           ]
@@ -1631,11 +1721,12 @@ function Verdict({ data, previous }) {
   const sends = data.campaigns?.length ?? 0;
   if (sends > 0) parts.push(`${sends} campaign${sends === 1 ? "" : "s"} sent`);
   const shortfall = data.shortfallRatio;
-  const broken = shortfall !== null && shortfall !== void 0 && shortfall > 0.6 ? `GA4 is seeing ${formatPercent(1 - shortfall, 0)} of your traffic \u2014 treat its figures as broken` : data.capture?.discrepancy ? "measurement disagrees between sources" : null;
+  const seeing = shortfall !== null && shortfall !== void 0 ? `GA4 is seeing ${formatPercent(1 - shortfall, 0)} of your traffic` : null;
+  const broken = shortfall === null || shortfall === void 0 ? data.capture?.discrepancy ? "measurement disagrees between sources" : null : shortfall > 0.6 ? `${seeing} \u2014 treat its figures as broken` : shortfall > 0.35 ? `${seeing} \u2014 its figures are undercounts, not what happened` : data.capture?.discrepancy ? "measurement disagrees between sources" : null;
   if (broken) parts.push(broken);
   if (parts.length === 0) return null;
-  const checked = shortfall !== null && shortfall !== void 0;
-  const closing = broken ? "" : checked ? " \xB7 nothing broken" : "";
+  const noticeable = shortfall !== null && shortfall !== void 0 && shortfall > 0.2;
+  const closing = broken || !noticeable ? "" : ` \xB7 ${seeing}`;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_sanity_ui_compat3.Card,
     {
@@ -1668,7 +1759,8 @@ function DataHealthPanel({ data, diagnostics }) {
       /* @__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)("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(Math.min(1, estimate.rate), 0) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatPercent(estimate.rate, 0) }),
+        estimate.rate > 1.05 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, children: "Above 100%: GA4 is counting more than the source it is measured against. That is usually a tag firing twice, not extra traffic." }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
           formatCount(estimate.observed),
           " of ",
@@ -2145,6 +2237,7 @@ var RANGES = [
   { key: "quarter", label: "Quarter", span: "the last 91 days" },
   { key: "year", label: "Year", span: "the last 365 days" }
 ];
+var GA4_ONLY_TABS = ["acquisition", "journey", "typeface-interest"];
 var PANELS = [
   { id: "overview", report: "measurement-health", label: "Overview", blurb: "Money, traffic and what moved this period" },
   { id: "acquisition", report: "acquisition", label: "Acquisition", blurb: "Where visitors come from" },
@@ -2329,6 +2422,17 @@ function PanelTabs({ value, onChange }) {
     );
   }) });
 }
+function CoverageRibbon({ ratio }) {
+  if (ratio === null || ratio < 0.2) return null;
+  const seen = Math.round((1 - ratio) * 100);
+  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."
+  ] }) });
+}
 function ReportPanel({
   tabId,
   report,
@@ -2352,10 +2456,6 @@ function ReportPanel({
     // felt state of the tool was "slightly unreadable", and muted text at 55% is under
     // 3:1 in both themes. The line says it; the figures stay legible.
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: "Updating\u2026" }),
-    state.status === "ready" && 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.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Flex, { align: "center", gap: 3, padding: 4, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Spinner, { muted: true }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: "Loading\u2026" })
@@ -2370,33 +2470,38 @@ function ReportPanel({
     ] }) }),
     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 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NoticeList, { notices: state.envelope.notices }),
+      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." })
-      ] }),
-      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
-        ] }) })
+        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 })
       ] }),
-      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.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
         "Figures cover ",
         state.envelope.range.start,
@@ -2746,6 +2851,7 @@ var index_default = visitorInsights;
   formatMoney,
   formatPercent,
   isReportName,
+  knownShortfall,
   ok,
   partial,
   previousRange,