@liiift-studio/sanity-visitor-insights 0.50.0 → 0.52.0

package/README.md

@@ -15,7 +15,7 @@ only as a conversion anchor and a count; no revenue, and no customer data.
 |---|---|
 | **Measurement health** | How much of reality does each source actually see? |
 | **Acquisition** | Where do visitors come from, and how many are design-industry referrals? |
-| **Journey** | How far do visitors get, and where do they stop? |
+| **Journey** | How far do visitors get, where do they stop, and is it different on mobile? |
 | **Typeface interest** | Which families get viewed, tested and bought? |
 | **Diagnostics** | What to fix before trusting any of the above? |
 

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as sanity from 'sanity';
 import React from 'react';
-import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-CeB8esIA.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-CeB8esIA.mjs';
+import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-DBbZ0tg7.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 JourneySegment, o as JourneyStep, L as LandingPage, p as LicenceTierRow, P as PREEXISTING, q as REPORT_NAMES, r as ReportError, S as SiteAnalyticsConfig, s as SourceName, t as SourceRow, u as SourceStatus, v as TimelineEvent, w as TypefaceInterestRow, U as UnavailableReason, x as coverageForRange, y as estimated, z as isReportName, B as ok, F as partial, G as previousRange, H as resolveRange, I as unavailable, K as validateSiteConfig, N as valueOrNull } from './ranges-DBbZ0tg7.mjs';
 
 /**
  * Data hook for the Studio panels.
@@ -606,7 +606,6 @@ declare function AcquisitionPanel({ data, previous }: {
     data: AcquisitionData;
     previous?: AcquisitionData;
 }): React.ReactElement;
-/** Journey — a funnel, drawn as a tracked sequence or as independent totals, whichever the report used. */
 declare function JourneyPanel({ data }: {
     data: JourneyData;
 }): React.ReactElement;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as sanity from 'sanity';
 import React from 'react';
-import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-CeB8esIA.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-CeB8esIA.js';
+import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-DBbZ0tg7.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 JourneySegment, o as JourneyStep, L as LandingPage, p as LicenceTierRow, P as PREEXISTING, q as REPORT_NAMES, r as ReportError, S as SiteAnalyticsConfig, s as SourceName, t as SourceRow, u as SourceStatus, v as TimelineEvent, w as TypefaceInterestRow, U as UnavailableReason, x as coverageForRange, y as estimated, z as isReportName, B as ok, F as partial, G as previousRange, H as resolveRange, I as unavailable, K as validateSiteConfig, N as valueOrNull } from './ranges-DBbZ0tg7.js';
 
 /**
  * Data hook for the Studio panels.
@@ -606,7 +606,6 @@ declare function AcquisitionPanel({ data, previous }: {
     data: AcquisitionData;
     previous?: AcquisitionData;
 }): React.ReactElement;
-/** Journey — a funnel, drawn as a tracked sequence or as independent totals, whichever the report used. */
 declare function JourneyPanel({ data }: {
     data: JourneyData;
 }): React.ReactElement;

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_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/useReport.ts
@@ -266,6 +266,30 @@ var SEND_WINDOW_DAYS = 3;
 // src/studio/Figure.tsx
 var import_react2 = __toESM(require("react"));
 var import_sanity_ui_compat = require("@liiift-studio/sanity-ui-compat");
+
+// src/studio/palette.ts
+var SERIES = {
+  /** The complete, server-side count. The reference every other line is read against. */
+  vercel: "#4C8FD0",
+  /** GA4's pageviews — the like-for-like counterpart to Vercel's. */
+  ga4Pageviews: "#DD6B3F",
+  /** GA4's sessions. Warm, like its sibling above: same instrument, different unit. */
+  ga4Sessions: "#BC861F",
+  /** Orders, from the foundry's own records. Exact. */
+  orders: "#2E9E6B",
+  /** Revenue, same source, different unit. */
+  revenue: "#BF5D9B"
+};
+var REGION_ALPHA = 0.18;
+function seriesFill(key, alpha = REGION_ALPHA) {
+  const hex = SERIES[key];
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// src/studio/Figure.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var REASON_TEXT = {
   not_instrumented: "Not tracked on this site",
@@ -524,7 +548,10 @@ function FunnelChart({ stages, measurement }) {
     const active = activeKey === stage.key;
     const delta = previous ? previous.value - stage.value : 0;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: funnelItem, children: [
-      previous && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: funnelGap, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: gapLabel(delta, measurement) }) }),
+      previous && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelGap, "aria-hidden": "true", children: [
+        measurement === "sequence" && delta > 0 && entry > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: lostTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...lostFill, width: `${Math.max(1, Math.min(1, delta / entry) * 100)}%` } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: gapLabel(delta, measurement) })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
@@ -564,9 +591,30 @@ var funnelList = { listStyle: "none", margin: 0, padding: 0 };
 var funnelItem = { display: "grid", gap: 4 };
 var funnelGap = {
   display: "flex",
+  alignItems: "center",
   justifyContent: "flex-end",
+  gap: 8,
   padding: "4px 2px"
 };
+var lostTrack = {
+  width: "38%",
+  maxWidth: 200,
+  height: 6,
+  borderRadius: 2,
+  overflow: "hidden",
+  background: "currentColor",
+  opacity: 0.1,
+  // Right to left: the bar grows back toward the funnel it came out of, which reads as leaving
+  // rather than as another quantity accumulating alongside.
+  display: "flex",
+  justifyContent: "flex-end"
+};
+var lostFill = {
+  height: "100%",
+  borderRadius: 2,
+  background: SERIES.ga4Pageviews,
+  opacity: 0.75
+};
 function funnelStage(active) {
   return {
     display: "grid",
@@ -581,10 +629,11 @@ function funnelStage(active) {
 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
+  // The reference blue, as everywhere else the tool draws "people who were here". Previously
+  // currentColor at 0.55, which made the funnel a stack of grey bars whose only variable was
+  // length — legible, and giving the eye nothing to hold on to across five rungs.
+  background: SERIES.vercel,
+  opacity: 0.85
 };
 var barTrack = {
   height: 8,
@@ -1018,6 +1067,7 @@ 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
@@ -1026,30 +1076,6 @@ 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");
 var import_d3_array = require("d3-array");
-
-// src/studio/palette.ts
-var SERIES = {
-  /** The complete, server-side count. The reference every other line is read against. */
-  vercel: "#4C8FD0",
-  /** GA4's pageviews — the like-for-like counterpart to Vercel's. */
-  ga4Pageviews: "#DD6B3F",
-  /** GA4's sessions. Warm, like its sibling above: same instrument, different unit. */
-  ga4Sessions: "#BC861F",
-  /** Orders, from the foundry's own records. Exact. */
-  orders: "#2E9E6B",
-  /** Revenue, same source, different unit. */
-  revenue: "#BF5D9B"
-};
-var REGION_ALPHA = 0.18;
-function seriesFill(key, alpha = REGION_ALPHA) {
-  const hex = SERIES[key];
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-// src/studio/CrossSourceTimeline.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function colorFor(source, unit, explicit) {
   if (explicit) return explicit;
@@ -1778,6 +1804,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 sourceLink = {
   color: "inherit",
   textDecoration: "underline",
@@ -2430,8 +2474,33 @@ function AcquisitionPanel({ data, previous }) {
     data.rowsWithheld && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NoticeList, { notices: ["GA4 withheld some low-traffic rows for privacy, so this list is shorter than reality."] })
   ] });
 }
+function firstStepRate(steps) {
+  const second = steps[1];
+  if (!second) return null;
+  const rate = second.conversionFromPrevious;
+  return typeof rate === "number" && Number.isFinite(rate) ? rate : null;
+}
+function spread(segments) {
+  const MIN_USERS = 200;
+  const RATIO = 3;
+  const rated = segments.map((segment) => ({
+    label: segment.label,
+    rate: firstStepRate(segment.steps),
+    users: metricSortValue(segment.steps[0]?.count) ?? 0
+  })).filter((row) => row.rate !== null && row.rate > 0 && row.users >= MIN_USERS);
+  if (rated.length < 2) return null;
+  const sorted = [...rated].sort((a, b) => b.rate - a.rate);
+  const best = sorted[0];
+  const worst = sorted[sorted.length - 1];
+  const ratio = best.rate / worst.rate;
+  if (ratio < RATIO) return null;
+  return `${worst.label} reaches the second step at ${formatPercent(worst.rate, 2)} against ${best.label}'s ${formatPercent(best.rate, 2)} \u2014 about ${Math.round(ratio)} times worse, on ${formatCount(worst.users)} visitors. The combined funnel above averages the two and describes neither.`;
+}
 function JourneyPanel({ data }) {
-  const allSteps = data.steps ?? [];
+  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 shown = allSteps.filter((step) => step.count.status !== "unavailable");
   const hiddenSteps = allSteps.filter((step) => step.count.status === "unavailable");
   const stages = shown.flatMap(
@@ -2443,6 +2512,44 @@ 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)(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)(
@@ -2853,13 +2960,13 @@ function RangeSelector({
   onChange,
   onCustomChange
 }) {
-  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(() => {
+  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(() => {
     setDraft(custom);
   }, [custom.start, custom.end]);
-  const onKeyDown = (0, import_react4.useCallback)(
+  const onKeyDown = (0, import_react5.useCallback)(
     (event) => {
       const currentIndex = RANGES.findIndex((r) => r.key === value);
       let nextIndex = null;
@@ -2979,8 +3086,8 @@ function SourceStatusRow({ sources }) {
   ] }) });
 }
 function PanelTabs({ value, onChange }) {
-  const refs = (0, import_react4.useRef)([]);
-  const onKeyDown = (0, import_react4.useCallback)(
+  const refs = (0, import_react5.useRef)([]);
+  const onKeyDown = (0, import_react5.useCallback)(
     (event) => {
       const currentIndex = PANELS.findIndex((p) => p.id === value);
       let nextIndex = null;
@@ -3184,7 +3291,7 @@ function isoDaysAgo(days) {
   return new Date(utcMidnight - days * 864e5).toISOString().slice(0, 10);
 }
 var COMPARED_TABS = ["overview", "acquisition"];
-var PanelBoundary = class extends import_react4.default.Component {
+var PanelBoundary = class extends import_react5.default.Component {
   constructor(props) {
     super(props);
     this.state = { error: null, shownFor: props.resetKey };
@@ -3223,16 +3330,16 @@ var PanelBoundary = class extends import_react4.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_react4.useState)(() => typeof window === "undefined" ? {} : decodeView(window.location.hash));
+  const [linked] = (0, import_react5.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_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 [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 atPresent = custom.end >= isoDaysAgo(0);
-  const [compare, setCompare] = (0, import_react4.useState)("previous-period");
-  const [activePanel, setActivePanel] = (0, import_react4.useState)(linkedTab ?? "overview");
-  import_react4.default.useEffect(() => {
+  const [compare, setCompare] = (0, import_react5.useState)("previous-period");
+  const [activePanel, setActivePanel] = (0, import_react5.useState)(linkedTab ?? "overview");
+  import_react5.default.useEffect(() => {
     if (typeof window === "undefined") return;
     const next = mergeIntoHash(window.location.hash, {
       tab: activePanel,