@liiift-studio/sanity-visitor-insights 0.57.0 → 0.59.0

package/dist/index.js

@@ -75,7 +75,7 @@ var import_sanity2 = require("sanity");
 var import_icons = require("@liiift-studio/sanity-ui-compat/icons");
 
 // src/studio/VisitorInsightsTool.tsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/useReport.ts
@@ -306,7 +306,8 @@ var MARKS = {
   "chart.grid": { key: "neutral", alpha: 0.18, role: "furniture", note: "Grid rules" },
   "bar.fill": { key: "vercel", alpha: 1, role: "data", note: "Every proportion, comparison and funnel bar" },
   "bar.track": { key: "neutral", alpha: 0.12, role: "furniture", note: "The rail a bar sits in" },
-  "bar.lost": { key: "revenue", alpha: 1, role: "data", note: "People who did not continue past a funnel rung" }
+  "bar.lost": { key: "revenue", alpha: 1, role: "data", note: "People who did not continue past a funnel rung" },
+  "bar.seen": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The share of a complete count that the lossy source saw" }
 };
 function mark(name) {
   const m = MARKS[name];
@@ -315,6 +316,33 @@ function mark(name) {
   return seriesFill(m.key, m.alpha);
 }
 
+// src/types.ts
+function estimated(value, low, high, basis) {
+  return { status: "estimated", value, low, high, basis };
+}
+function ok(value) {
+  return { status: "ok", value };
+}
+function unavailable(reason, detail) {
+  return { status: "unavailable", reason, detail };
+}
+function partial(value, coveredFrom, note) {
+  return { status: "partial", value, coveredFrom, note };
+}
+function valueOrNull(metric) {
+  return metric.status === "unavailable" ? null : metric.value;
+}
+var REPORT_NAMES = [
+  "measurement-health",
+  "acquisition",
+  "journey",
+  "typeface-interest",
+  "diagnostics"
+];
+function isReportName(value) {
+  return typeof value === "string" && REPORT_NAMES.includes(value);
+}
+
 // src/studio/Figure.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var REASON_TEXT = {
@@ -773,6 +801,47 @@ function SectionTitle({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionHeader, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Heading, { size: tone === "primary" ? 1 : 0, style: tone === "primary" ? primaryTitle : secondaryTitle, children: title }) });
 }
+function isContainment(whole, part) {
+  const w = valueOrNull(whole);
+  const p = valueOrNull(part);
+  return w !== null && p !== null && w > 0 && p <= w;
+}
+function ContainmentBar({
+  wholeLabel,
+  whole,
+  partLabel,
+  part,
+  missingLabel
+}) {
+  const wholeValue = valueOrNull(whole);
+  const partValue = valueOrNull(part);
+  if (!isContainment(whole, part)) return null;
+  if (wholeValue === null || partValue === null) return null;
+  const share = partValue / wholeValue;
+  const missing = wholeValue - partValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: barHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: wholeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "medium", children: formatCount(wholeValue) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: { ...barTrack, background: mark("bar.fill"), height: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "100%", width: `${share * 100}%`, background: mark("bar.seen"), borderRadius: 2 } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: barHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+        partLabel,
+        ": ",
+        formatCount(partValue),
+        " (",
+        formatPercent(share, 0),
+        ")"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+        formatCount(missing),
+        " ",
+        missingLabel
+      ] })
+    ] })
+  ] });
+}
 function SortableTable({
   caption,
   columns,
@@ -1097,7 +1166,6 @@ var visuallyHidden = {
 var import_sanity_ui_compat5 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/panels.tsx
-var import_react4 = __toESM(require("react"));
 var import_sanity_ui_compat3 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/CrossSourceTimeline.tsx
@@ -1812,33 +1880,6 @@ function describeRank(rank) {
   return `${ordinal(rank.rank)} best of the last ${rank.of} weeks`;
 }
 
-// src/types.ts
-function estimated(value, low, high, basis) {
-  return { status: "estimated", value, low, high, basis };
-}
-function ok(value) {
-  return { status: "ok", value };
-}
-function unavailable(reason, detail) {
-  return { status: "unavailable", reason, detail };
-}
-function partial(value, coveredFrom, note) {
-  return { status: "partial", value, coveredFrom, note };
-}
-function valueOrNull(metric) {
-  return metric.status === "unavailable" ? null : metric.value;
-}
-var REPORT_NAMES = [
-  "measurement-health",
-  "acquisition",
-  "journey",
-  "typeface-interest",
-  "diagnostics"
-];
-function isReportName(value) {
-  return typeof value === "string" && REPORT_NAMES.includes(value);
-}
-
 // src/studio/panels.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function metricSortValue(metric) {
@@ -1865,24 +1906,24 @@ var figureRow = {
   gap: 10,
   flexWrap: "wrap"
 };
-var segmentRow = { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" };
-function segmentButton(selected) {
-  return {
-    appearance: "none",
-    background: selected ? "var(--card-bg-color, rgba(128,128,128,0.12))" : "transparent",
-    border: `1px solid ${selected ? "currentColor" : "var(--card-border-color, rgba(128,128,128,0.3))"}`,
-    borderRadius: 3,
-    color: "inherit",
-    font: "inherit",
-    fontSize: "0.85em",
-    padding: "4px 10px",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "baseline",
-    gap: 7
-  };
-}
-var segmentRate = { opacity: 0.65, fontVariantNumeric: "tabular-nums" };
+var segmentHeadCell = {
+  textAlign: "left",
+  fontSize: "0.78em",
+  letterSpacing: "0.06em",
+  textTransform: "uppercase",
+  fontWeight: 500,
+  opacity: 0.7,
+  padding: "8px 12px",
+  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  whiteSpace: "nowrap"
+};
+var segmentRowCell = {
+  textAlign: "left",
+  fontWeight: 400,
+  padding: "8px 12px",
+  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.18))",
+  verticalAlign: "baseline"
+};
 var sourceLink = {
   color: "inherit",
   textDecoration: "underline",
@@ -2269,12 +2310,24 @@ function Verdict({ data, previous }) {
 }
 function DataHealthPanel({ data, diagnostics }) {
   const pageviewMax = maxOf([data.ga4Pageviews, data.vercelPageviews]);
+  const contained = isContainment(data.vercelPageviews, data.ga4Pageviews);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Pageviews, source against source" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "The same unit on both sides. Vercel is cookieless and ungated; GA4 is consent-gated and blockable, so GA4 seeing fewer is expected." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax, outOf: "Blocked less than GA4, but not immune to it." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax, outOf: "A subset of the bar above, not a rival measurement." })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Both counting pageviews. Google Analytics is blockable, so seeing fewer is normal." }),
+      contained ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ContainmentBar,
+        {
+          wholeLabel: "Pageviews Vercel counted",
+          whole: data.vercelPageviews,
+          partLabel: "Seen by Google Analytics",
+          part: data.ga4Pageviews,
+          missingLabel: "it missed"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax })
+      ] })
     ] }),
     /* @__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: 2, children: [
       data.shortfallRatio !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "semibold", children: data.shortfallRatio >= 0 ? `GA4 saw ${formatPercent(data.shortfallRatio, 1)} fewer pageviews than Vercel` : `GA4 saw ${formatPercent(-data.shortfallRatio, 1)} more pageviews than Vercel` }),
@@ -2571,11 +2624,51 @@ function rankLine(series, pick) {
   const ranked = weeklyRank(series.map((d) => ({ date: d.date, value: pick(d) })));
   return ranked ? describeRank(ranked) : null;
 }
+function SegmentTable({ segments, dimension }) {
+  if (segments.length < 2) return null;
+  const spine = [...segments].sort((a, b) => b.steps.length - a.steps.length)[0]?.steps ?? [];
+  if (spine.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: [
+      "Every ",
+      dimension,
+      " at once. A rate needs ",
+      MIN_RATE_DENOMINATOR,
+      " people at the step before it; below that only the count is shown."
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { radius: 2, tone: "transparent", border: true, style: { overflowX: "auto", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: 360 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("caption", { style: visuallyHidden, children: [
+        "Funnel steps by ",
+        dimension
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { scope: "col", style: segmentHeadCell, children: "Step" }),
+        segments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { scope: "col", style: { ...segmentHeadCell, textAlign: "right" }, children: segment.label }, segment.key))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: spine.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { scope: "row", style: segmentRowCell, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: step.label }) }),
+        segments.map((segment) => {
+          const cell = segment.steps.find((s) => s.key === step.key);
+          const count = cell ? metricSortValue(cell.count) : null;
+          const before = index > 0 ? metricSortValue(segment.steps.find((s) => s.key === spine[index - 1].key)?.count) : null;
+          const rate = cell?.conversionFromPrevious ?? null;
+          const showRate = index > 0 && rate !== null && before !== null && before >= MIN_RATE_DENOMINATOR;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { ...segmentRowCell, textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: count === null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: formatCount(count) }),
+            showRate && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
+              formatPercent(rate, 1),
+              " of ",
+              formatCount(before)
+            ] })
+          ] }) }, segment.key);
+        })
+      ] }, step.key)) })
+    ] }) })
+  ] });
+}
 function JourneyPanel({ data }) {
-  const [segmentKey, setSegmentKey] = import_react4.default.useState(null);
   const segments = data.segments ?? [];
-  const segment = segmentKey === null ? null : segments.find((row) => row.key === segmentKey) ?? null;
-  const allSteps = segment ? segment.steps : data.steps ?? [];
+  const allSteps = data.steps ?? [];
   const shown = allSteps.filter((step) => step.count.status !== "unavailable");
   const hiddenSteps = allSteps.filter((step) => step.count.status === "unavailable");
   const stages = shown.flatMap(
@@ -2587,44 +2680,8 @@ function JourneyPanel({ data }) {
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "medium", children: tracked ? "Tracked funnel" : "Independent per-step totals" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: tracked, children: data.approximationNote })
     ] }) }),
-    segments.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: segmentRow, role: "radiogroup", "aria-label": `Funnel by ${data.segmentDimension ?? "segment"}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": segmentKey === null,
-            style: segmentButton(segmentKey === null),
-            onClick: () => setSegmentKey(null),
-            children: "Everyone"
-          }
-        ),
-        segments.map((row) => {
-          const rate = firstStepRate(row.steps);
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "button",
-            {
-              type: "button",
-              role: "radio",
-              "aria-checked": segmentKey === row.key,
-              style: segmentButton(segmentKey === row.key),
-              onClick: () => setSegmentKey(row.key),
-              children: [
-                row.label,
-                rate !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: segmentRate, children: formatPercent(rate, 2) })
-              ]
-            },
-            row.key
-          );
-        })
-      ] }),
-      spread(segments) && /* Said in words, once, where the funnel is. The whole reason to split a funnel
-         is that the halves differ; when they differ by a multiple rather than a
-         margin, the undivided funnel above describes nobody and the reader should
-         be told rather than left to press the buttons and notice. */
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: spread(segments) })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SegmentTable, { segments, dimension: data.segmentDimension ?? "segment" }),
+    spread(segments) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: spread(segments) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FunnelChart, { stages, measurement: data.measurement ?? "independent-totals" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: splitGrid, children: [
       (data.outcomes?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -3038,13 +3095,13 @@ function RangeSelector({
   onChange,
   onCustomChange
 }) {
-  const refs = (0, import_react5.useRef)([]);
-  const [pickerOpen, setPickerOpen] = (0, import_react5.useState)(value === "custom");
-  const [draft, setDraft] = (0, import_react5.useState)(custom);
-  import_react5.default.useEffect(() => {
+  const refs = (0, import_react4.useRef)([]);
+  const [pickerOpen, setPickerOpen] = (0, import_react4.useState)(value === "custom");
+  const [draft, setDraft] = (0, import_react4.useState)(custom);
+  import_react4.default.useEffect(() => {
     setDraft(custom);
   }, [custom.start, custom.end]);
-  const onKeyDown = (0, import_react5.useCallback)(
+  const onKeyDown = (0, import_react4.useCallback)(
     (event) => {
       const currentIndex = RANGES.findIndex((r) => r.key === value);
       let nextIndex = null;
@@ -3164,8 +3221,8 @@ function SourceStatusRow({ sources }) {
   ] }) });
 }
 function PanelTabs({ value, onChange }) {
-  const refs = (0, import_react5.useRef)([]);
-  const onKeyDown = (0, import_react5.useCallback)(
+  const refs = (0, import_react4.useRef)([]);
+  const onKeyDown = (0, import_react4.useCallback)(
     (event) => {
       const currentIndex = PANELS.findIndex((p) => p.id === value);
       let nextIndex = null;
@@ -3366,7 +3423,7 @@ function isoDaysAgo(days) {
   return new Date(utcMidnight - days * 864e5).toISOString().slice(0, 10);
 }
 var COMPARED_TABS = ["overview", "acquisition"];
-var PanelBoundary = class extends import_react5.default.Component {
+var PanelBoundary = class extends import_react4.default.Component {
   constructor(props) {
     super(props);
     this.state = { error: null, shownFor: props.resetKey };
@@ -3405,16 +3462,16 @@ var PanelBoundary = class extends import_react5.default.Component {
 function VisitorInsightsTool(props) {
   const apiBaseUrl = props.tool?.options?.apiBaseUrl ?? props.apiBaseUrl ?? "";
   const siteLabel = props.tool?.options?.siteLabel ?? props.siteLabel ?? "";
-  const [linked] = (0, import_react5.useState)(() => typeof window === "undefined" ? {} : decodeView(window.location.hash));
+  const [linked] = (0, import_react4.useState)(() => typeof window === "undefined" ? {} : decodeView(window.location.hash));
   const linkedRange = RANGES.some((r) => r.key === linked.range) ? linked.range : null;
   const linkedTab = PANELS.some((p) => p.id === linked.tab) ? linked.tab : null;
-  const [range, setRange] = (0, import_react5.useState)(linkedRange ?? "month");
-  const [rangeBeforeBrush, setRangeBeforeBrush] = (0, import_react5.useState)(linkedRange ?? "month");
-  const [custom, setCustom] = (0, import_react5.useState)(() => linked.from && linked.to ? { start: linked.from, end: linked.to } : { start: isoDaysAgo(30), end: isoDaysAgo(0) });
+  const [range, setRange] = (0, import_react4.useState)(linkedRange ?? "month");
+  const [rangeBeforeBrush, setRangeBeforeBrush] = (0, import_react4.useState)(linkedRange ?? "month");
+  const [custom, setCustom] = (0, import_react4.useState)(() => linked.from && linked.to ? { start: linked.from, end: linked.to } : { start: isoDaysAgo(30), end: isoDaysAgo(0) });
   const atPresent = custom.end >= isoDaysAgo(0);
-  const [compare, setCompare] = (0, import_react5.useState)("previous-period");
-  const [activePanel, setActivePanel] = (0, import_react5.useState)(linkedTab ?? "overview");
-  import_react5.default.useEffect(() => {
+  const [compare, setCompare] = (0, import_react4.useState)("previous-period");
+  const [activePanel, setActivePanel] = (0, import_react4.useState)(linkedTab ?? "overview");
+  import_react4.default.useEffect(() => {
     if (typeof window === "undefined") return;
     const next = mergeIntoHash(window.location.hash, {
       tab: activePanel,