@liiift-studio/sanity-visitor-insights 0.18.0 → 0.19.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, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, T as TypefaceInterestData } from './ranges-B_OrmcdP.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-B_OrmcdP.mjs';
+import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, 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.
@@ -373,14 +373,6 @@ interface Series {
         source: Series['source'];
         points: SeriesPoint[];
     };
-    /**
-     * Multiplier from observed to estimated-true, where the line itself is the lossy source.
-     *
-     * This one IS a symmetric band, because it is genuine uncertainty rather than a known blind
-     * spot. The two must not look alike: one says "we do not know exactly", the other says "we know
-     * exactly, and this much was invisible".
-     */
-    grossUpFactor?: number;
 }
 /** A dated event drawn through every row, e.g. a campaign send. */
 interface TimelineMarker {

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, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, T as TypefaceInterestData } from './ranges-B_OrmcdP.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-B_OrmcdP.js';
+import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, 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.
@@ -373,14 +373,6 @@ interface Series {
         source: Series['source'];
         points: SeriesPoint[];
     };
-    /**
-     * Multiplier from observed to estimated-true, where the line itself is the lossy source.
-     *
-     * This one IS a symmetric band, because it is genuine uncertainty rather than a known blind
-     * spot. The two must not look alike: one says "we do not know exactly", the other says "we know
-     * exactly, and this much was invisible".
-     */
-    grossUpFactor?: number;
 }
 /** A dated event drawn through every row, e.g. a campaign send. */
 interface TimelineMarker {

package/dist/index.js

@@ -69,7 +69,7 @@ var import_sanity2 = require("sanity");
 var import_icons = require("@liiift-studio/sanity-ui-compat/icons");
 
 // src/studio/VisitorInsightsTool.tsx
-var import_react4 = require("react");
+var import_react4 = __toESM(require("react"));
 var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/useReport.ts
@@ -205,23 +205,56 @@ function deltaStyle(tone) {
 }
 function MetricFigure({ metric, label, size = 4, unit = "count" }) {
   if (metric.status === "unavailable") {
-    const reason = REASON_TEXT[metric.reason];
+    const reason = REASON_TEXT[metric.reason] ?? "No figure available";
     const detail = metric.detail ? `${reason}. ${metric.detail}` : reason;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Box, { padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: detail }) }), portal: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, muted: true, "aria-label": `${label}: unavailable. ${detail}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2014" }) }) });
+    return (
+      // The reason travels as REAL TEXT in a visually-hidden span, not as an aria-label and not
+      // only in a tooltip.
+      //
+      // `aria-label` on a <Text> is silently dropped: it renders a bare <div>, whose role is
+      // `generic`, on which aria-label is prohibited by ARIA and ignored by every major
+      // browser. The em dash beside it is aria-hidden. So an unavailable metric announced as
+      // an EMPTY NODE — a blank cell — which is exactly the "absent must never look like a
+      // measured zero" invariant this whole type exists to enforce, inverted for anyone not
+      // looking at the screen. The tooltip was the only other route and it hangs off a
+      // non-focusable element, so it was pointer-only too.
+      //
+      // Delta already does this correctly; this is that pattern applied.
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Box, { padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: detail }) }), portal: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size, muted: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: visuallyHidden, children: [
+          label,
+          ": unavailable. ",
+          detail
+        ] })
+      ] }) })
+    );
   }
   const formatted = unit === "percent" ? `${metric.value.toFixed(1)}%` : formatCount(metric.value);
   if (metric.status === "partial") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, "aria-label": `${label}: ${formatted}, partial. ${metric.note}`, children: formatted }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size, children: [
+        formatted,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: visuallyHidden, children: [
+          ", partial. ",
+          metric.note
+        ] })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Badge, { tone: "caution", fontSize: 0, children: "Partial" })
     ] });
   }
   if (metric.status === "estimated") {
     const range = unit === "percent" ? `${metric.low.toFixed(1)}% to ${metric.high.toFixed(1)}%` : `${formatCount(metric.low)} to ${formatCount(metric.high)}`;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size, "aria-label": `${label}: estimated ${formatted}, between ${range}. ${metric.basis}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "~" }),
-        formatted
+        formatted,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: visuallyHidden, children: [
+          "estimated, between ",
+          range,
+          ". ",
+          metric.basis
+        ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: range }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Badge, { tone: "primary", fontSize: 0, children: "Estimated" })
@@ -231,7 +264,7 @@ function MetricFigure({ metric, label, size = 4, unit = "count" }) {
     const unhandled = metric;
     void unhandled;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, "aria-label": `${label}: ${formatted}`, children: formatted });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, children: formatted });
 }
 function ComparisonBar({ label, metric, max, tone = "default" }) {
   const value = metric.status === "unavailable" ? null : metric.value;
@@ -256,7 +289,7 @@ function ComparisonBar({ label, metric, max, tone = "default" }) {
     ) : (
       // Track and fill are both Cards so the palette comes from the Studio theme tokens
       // rather than hand-picked CSS variables, and follows light/dark without extra work.
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { "aria-hidden": "true", radius: 2, tone: "transparent", border: true, style: { height: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { tone: tone === "default" ? "default" : tone, radius: 2, style: { width: `${width}%`, height: "100%" } }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: barTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...barFill, width: `${width}%` } }) })
     )
   ] });
 }
@@ -288,7 +321,7 @@ function ProportionChart({ bars, format, totalLabel }) {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { "aria-hidden": "true", radius: 2, tone: "transparent", border: true, style: { height: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { tone: "primary", radius: 2, style: { width: `${Math.max(1, share * 100)}%`, height: "100%" } }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: barTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...barFill, width: `${Math.max(1, share * 100)}%` } }) })
       ] }, bar.key);
     }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
@@ -340,7 +373,7 @@ function FunnelChart({ stages, measurement }) {
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "medium", children: stage.label }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "semibold", children: formatCount(stage.value) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { "aria-hidden": "true", radius: 2, tone: "transparent", border: true, style: funnelTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Card, { tone: "primary", radius: 2, style: { width: `${width}%`, height: "100%" } }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: { ...barTrack, height: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...barFill, width: `${width}%` } }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
               index === 0 ? "entry step" : `${formatPercent(share, 1)} of ${stages[0]?.label.toLowerCase()}`,
               index > 1 && stage.conversionFromPrevious !== null && previous ? ` \xB7 ${formatPercent(stage.conversionFromPrevious, 1)} of ${previous.label.toLowerCase()}` : ""
@@ -374,7 +407,21 @@ function funnelStage(active) {
     cursor: "default"
   };
 }
-var funnelTrack = { height: 10, overflow: "hidden" };
+var barFill = {
+  height: "100%",
+  borderRadius: 2,
+  // currentColor at an alpha that clears 3:1 against the card in both themes, so the mark works
+  // from one declaration rather than needing a palette.
+  background: "currentColor",
+  opacity: 0.55
+};
+var barTrack = {
+  height: 8,
+  borderRadius: 2,
+  overflow: "hidden",
+  background: "currentColor",
+  opacity: 0.12
+};
 var chartFrame = { position: "relative", width: "100%" };
 var readout = {
   position: "absolute",
@@ -748,21 +795,23 @@ function SortableTable({
             const content = column.render(row);
             return index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "row", style: bodyCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: firstCell, children: [
               content,
-              filterOn && // Per-row exclusion, because the fix for a contaminated
-              // table is to take the bad row out and see what the
-              // rest looks like. Rendered on every row rather than
-              // on hover so it is reachable by keyboard and touch.
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "button",
-                {
-                  type: "button",
-                  style: excludeButton,
-                  "aria-label": `Exclude ${key}`,
-                  title: `Exclude ${key} from this table`,
-                  onClick: () => setExcluded((current) => new Set(current).add(key)),
-                  children: "\xD7"
-                }
-              )
+              exportName || filterOn ? (
+                // Per-row exclusion, because the fix for a contaminated
+                // table is to take the bad row out and see what the
+                // rest looks like. Rendered on every row rather than
+                // on hover so it is reachable by keyboard and touch.
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    style: excludeButton,
+                    "aria-label": `Exclude ${key}`,
+                    title: `Exclude ${key} from this table`,
+                    onClick: () => setExcluded((current) => new Set(current).add(key)),
+                    children: "\xD7"
+                  }
+                )
+              ) : null
             ] }) }, column.key) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: column.numeric ? bodyCellNumeric : bodyCell, children: content }, column.key);
           }) }, key);
         }),
@@ -898,11 +947,13 @@ var import_d3_scale = require("d3-scale");
 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 AXIS_HEIGHT = 26;
 var GUTTER = 52;
 var RIGHT_PAD = 12;
-var TOP_PAD = 16;
+var TOP_PAD = 22;
+var AXIS_TYPE = 11;
 function formatValue(value, unit, currency) {
   if (unit === "money") return formatMoney(value, currency ?? null);
   if (unit === "percent") return formatPercent(value, 1);
@@ -920,8 +971,7 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
     for (const s of series) for (const p of s.points) all.add(p.date);
     return [...all].sort();
   }, [series]);
-  const width = 100;
-  const plotWidth = width - GUTTER - RIGHT_PAD;
+  const plotWidth = WIDTH - GUTTER - RIGHT_PAD;
   const height = TOP_PAD + series.length * ROW_HEIGHT + AXIS_HEIGHT;
   const x = (0, import_react3.useMemo)(() => {
     if (dates.length === 0) return null;
@@ -932,7 +982,7 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
       const frame = frameRef.current;
       if (!frame || dates.length === 0) return;
       const box = frame.getBoundingClientRect();
-      const ratio = (event.clientX - box.left) / box.width * width;
+      const ratio = (event.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));
       setHoverIndex(Math.max(0, Math.min(dates.length - 1, index)));
@@ -942,52 +992,94 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
   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);
+    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);
+    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) => {
+    if (!row.shortfall) return [];
+    const seen = new Map(row.shortfall.points.map((p) => [p.date, p.value]));
+    let gap = 0;
+    let worst = null;
+    for (const point of row.points) {
+      if (point.value === null) continue;
+      const saw = seen.get(point.date);
+      if (saw == null) continue;
+      gap += point.value - saw;
+      const ratio = point.value > 0 ? 1 - saw / point.value : 0;
+      if (!worst || ratio > worst.ratio) worst = { date: point.date, ratio };
+    }
+    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)}.`];
+  });
+  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: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: frameStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "svg",
       {
         ref: frameRef,
-        viewBox: `0 0 ${width} ${height}`,
-        preserveAspectRatio: "none",
-        style: { width: "100%", height: series.length * ROW_HEIGHT + AXIS_HEIGHT + TOP_PAD, display: "block" },
+        viewBox: `0 0 ${WIDTH} ${height}`,
+        style: { width: "100%", height: "auto", display: "block" },
         onMouseMove: onMove,
         onMouseLeave: () => setHoverIndex(null),
+        tabIndex: 0,
         role: "img",
-        "aria-label": `${series.map((s) => s.label).join(", ")} over ${dates.length} days, on one shared time axis`,
+        "aria-label": summary,
+        onFocus: () => setHoverIndex((current) => current ?? dates.length - 1),
+        onBlur: () => setHoverIndex(null),
+        onKeyDown: (event) => {
+          let next = null;
+          const current = hoverIndex ?? dates.length - 1;
+          if (event.key === "ArrowRight") next = Math.min(current + 1, dates.length - 1);
+          if (event.key === "ArrowLeft") next = Math.max(current - 1, 0);
+          if (event.key === "Home") next = 0;
+          if (event.key === "End") next = dates.length - 1;
+          if (event.key === "Escape") {
+            setHoverIndex(null);
+            return;
+          }
+          if (next === null) return;
+          event.preventDefault();
+          setHoverIndex(next);
+        },
         children: [
           series.map((row, rowIndex) => {
             const top = TOP_PAD + rowIndex * ROW_HEIGHT;
             const bottom = top + ROW_HEIGHT - 18;
             const values = row.points.map((p) => p.value).filter((v) => v !== null);
             const peak = (0, import_d3_array.max)(values) ?? 0;
-            const grossed = row.grossUpFactor && row.grossUpFactor > 1 ? peak * row.grossUpFactor : peak;
-            const y = (0, import_d3_scale.scaleLinear)().domain([0, grossed || 1]).nice().range([bottom, top]);
+            const y = (0, import_d3_scale.scaleLinear)().domain([0, peak || 1]).nice().range([bottom, top]);
             const at = (p) => x(/* @__PURE__ */ new Date(`${p.date}T00:00:00Z`));
             const defined = (p) => p.value !== null;
             const lineGen = (0, import_d3_shape.line)().defined(defined).x(at).y((p) => y(p.value)).curve(import_d3_shape.curveMonotoneX);
             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 bandGen = (0, import_d3_shape.area)().defined(defined).x(at).y0((p) => y(p.value)).y1((p) => y(p.value * row.grossUpFactor)).curve(import_d3_shape.curveMonotoneX);
             const path = lineGen(row.points) ?? "";
             const gap = row.shortfall ? gapGen(row.points) ?? "" : "";
-            const band = row.grossUpFactor && row.grossUpFactor > 1 ? bandGen(row.points) ?? "" : "";
             const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints.filter((p) => p.value !== null)) ?? "" : "";
             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: 0.15, opacity: 0.25 }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 4, y: top + 5, textAnchor: "end", fontSize: 3, fill: "currentColor", opacity: 0.55, children: formatValue(grossed, row.unit, currency) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 4, y: bottom, textAnchor: "end", fontSize: 3, fill: "currentColor", opacity: 0.55, children: "0" }),
-              gap && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: gap, fill: "currentColor", opacity: revealed ? 0.16 : 0.09 }),
-              band && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: band, fill: "currentColor", opacity: 0.1 }),
-              shortfallLine && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: shortfallLine, fill: "none", stroke: "currentColor", strokeWidth: 0.35, strokeDasharray: "1.5 1", opacity: 0.75 }),
+              /* @__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, y: top - 6, fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.75, fontWeight: 500, children: row.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("text", { x: GUTTER + plotWidth, y: top - 6, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.55, children: [
+                row.source,
+                row.complete ? "" : " \xB7 partial"
+              ] }),
+              /* @__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: "0" }),
+              gap && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: gap, fill: "currentColor", opacity: revealed ? 0.34 : 0.26 }),
+              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)(
                 "path",
                 {
                   d: path,
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: 0.5,
-                  strokeDasharray: row.complete ? void 0 : "1.5 1",
+                  strokeWidth: 2,
+                  strokeDasharray: row.complete ? void 0 : "6 4",
                   opacity: row.complete ? 0.95 : 0.7
                 }
               )
@@ -1005,12 +1097,12 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
                   y1: TOP_PAD - 6,
                   y2: TOP_PAD + series.length * ROW_HEIGHT - 18,
                   stroke: "currentColor",
-                  strokeWidth: 0.3,
-                  strokeDasharray: "0.8 0.8",
+                  strokeWidth: 1.25,
+                  strokeDasharray: "4 3",
                   opacity: 0.5
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: at, cy: TOP_PAD - 8, r: 0.9, fill: "currentColor", opacity: 0.7 })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: at, cy: TOP_PAD - 8, r: 3, fill: "currentColor", opacity: 0.7 })
             ] }, `${marker.date}-${marker.label}`);
           }),
           hoveredDate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1021,7 +1113,7 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
               y1: TOP_PAD - 6,
               y2: TOP_PAD + series.length * ROW_HEIGHT - 18,
               stroke: "currentColor",
-              strokeWidth: 0.25,
+              strokeWidth: 1,
               opacity: 0.8
             }
           ),
@@ -1034,7 +1126,7 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
                 x: x(/* @__PURE__ */ new Date(`${date}T00:00:00Z`)),
                 y: height - 6,
                 textAnchor: position === 0 ? "start" : position === 2 ? "end" : "middle",
-                fontSize: 3,
+                fontSize: AXIS_TYPE,
                 fill: "currentColor",
                 opacity: 0.55,
                 children: tickLabel(/* @__PURE__ */ new Date(`${date}T00:00:00Z`))
@@ -1090,8 +1182,13 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
         row.source,
         ")"
       ] }, row.key)),
-      series.some((row) => row.shortfall) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "The shaded area is what your analytics did not see. It is a quantity, not a margin of error \u2014 the traffic happened, GA4 just missed it." }),
-      series.some((row) => !row.complete && row.grossUpFactor) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "A dashed line is a lossy source; the band above it is where the true figure probably sits." }),
+      missed.map((sentence) => (
+        // The region's argument, stated as a number. It was drawn to scale and described
+        // in the abstract, so the two facts it exists to convey — how much was missed and
+        // when it was worst — were available only by looking hard at a pale fill.
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: sentence }, sentence)
+      )),
+      series.some((row) => row.shortfall) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "The shaded area is what your analytics did not see \u2014 a quantity, not a margin of error." }),
       markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "Vertical rules mark campaign sends." })
     ] })
   ] });
@@ -1203,7 +1300,11 @@ function MeasurementHealthPanel({ data, previous }) {
               shortfall: {
                 label: "Seen by GA4",
                 source: "GA4",
-                points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.ga4Sessions }))
+                // PAGEVIEWS, not sessions. The region encodes the difference between
+                // these two as an area, so both sides must be the same unit — this
+                // previously shaded sessions under a pageview line, overstating the
+                // loss by the pageviews-per-session ratio.
+                points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.ga4Pageviews }))
               }
             },
             ...data.crossSource?.some((d) => d.revenue !== null) ? [{
@@ -1519,10 +1620,11 @@ function JourneyPanel({ data }) {
               key: "path",
               label: "Page",
               sortValue: (page) => page.path,
-              // The foundry's own URLs were the one table that did not link, while
-              // referrer hosts did — so clicking took you to somebody else's site
-              // and the pages you might want to open would not open.
-              render: (page) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: page.path })
+              // The comment here used to describe this fix without applying it: it said
+              // the foundry's own URLs were the one table that did not link while
+              // referrer hosts did, and then rendered plain text. A comment asserting
+              // something the code does not do is worse than no comment.
+              render: (page) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: page.path, target: "_blank", rel: "noopener noreferrer", style: sourceLink, children: page.path })
             },
             {
               key: "sessions",
@@ -1957,7 +2059,7 @@ function ReportPanel({
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 4, radius: 2, tone: state.disabled ? "transparent" : "critical", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 3, children: [
       state.disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, weight: "medium", children: "Switched off" }),
       /* @__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)(import_sanity_ui_compat4.Button, { text: "Try again", mode: "ghost", fontSize: 1, onClick: reload }) })
+      !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 }),
@@ -1992,6 +2094,38 @@ function isoDaysAgo(days) {
   return date.toISOString().slice(0, 10);
 }
 var COMPARED_REPORTS = ["acquisition", "measurement-health"];
+var PanelBoundary = class extends import_react4.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    console.error("Visitor insights: panel render failed:", error.message);
+  }
+  render() {
+    if (!this.state.error) return this.props.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 4, radius: 2, tone: "critical", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, weight: "medium", children: "This panel could not be drawn" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, children: "The other panels are unaffected. This usually means the site\u2019s API route is a different version from this Studio \u2014 redeploying the site normally clears it." }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: this.state.error.message }),
+      /* @__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: () => {
+            this.setState({ error: null });
+            this.props.onRetry();
+          },
+          children: "Try again"
+        }
+      ) })
+    ] }) });
+  }
+};
 function VisitorInsightsTool(props) {
   const apiBaseUrl = props.tool?.options?.apiBaseUrl ?? props.apiBaseUrl ?? "";
   const siteLabel = props.tool?.options?.siteLabel ?? props.siteLabel ?? "";
@@ -2019,7 +2153,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)(ReportPanel, { report: activePanel, apiBaseUrl, range, custom })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { onRetry: () => setActivePanel(activePanel), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReportPanel, { report: activePanel, apiBaseUrl, range, custom }) })
           ] })
         }
       )