@liiift-studio/sanity-visitor-insights 0.45.0 → 0.47.0

package/README.md

@@ -19,7 +19,23 @@ only as a conversion anchor and a count; no revenue, and no customer data.
 | **Typeface interest** | Which families get viewed, tested and bought? |
 | **Diagnostics** | What to fix before trusting any of the above? |
 
-Each panel offers a week, quarter or year range.
+Each panel offers a week, quarter or year range, a custom window, and a choice of what the changes
+are measured against — the preceding window, or the same window a year earlier. Type sales are
+seasonal, so a quiet August against a quiet July often says less than August against last August.
+Both cost the same: one comparison window either way.
+
+Four figures are derived from the ones above rather than measured separately:
+
+| Figure | How it is arrived at |
+|---|---|
+| **Average order value** | Revenue over the orders that *carry an amount*, not over every counted order. Marked partial, naming both counts, whenever those differ. |
+| **Visitors per order** | Vercel visitors over orders. Vercel because it is server-side and complete; GA4 sessions would flatter the ratio by roughly the shortfall. |
+| **Orders after a send** | What the order book records in the three days following each email, ending early if another send lands first, so no order is counted twice. |
+| **Revenue per 1,000 sent** | The same window's revenue scaled to a thousand addresses — per send it is fractions of a cent and every campaign renders as the same zero. |
+
+The last two are **what happened next, not what the send caused**. They are built from send times and
+order times, both of which are exact, rather than from GA4's campaign attribution, which at a
+foundry's volumes is withheld for being too thin to divide revenue by.
 
 ---
 

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-CWGvBi3C.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-CWGvBi3C.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-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';
 
 /**
  * Data hook for the Studio panels.
@@ -51,6 +51,8 @@ interface UseReportOptions {
     apiBaseUrl: string;
     report: ReportName;
     range: RangeKey;
+    /** Which baseline the deltas are measured against. Defaults to the preceding window. */
+    compare?: 'previous-period' | 'same-period-last-year';
     /**
      * Whether to fetch at all. Defaults to true.
      *
@@ -64,7 +66,7 @@ interface UseReportOptions {
  *
  * @returns the current state plus a `reload` for manual refresh
  */
-declare function useReport<T>({ apiBaseUrl, report, range, custom, enabled }: UseReportOptions): {
+declare function useReport<T>({ apiBaseUrl, report, range, custom, compare, enabled }: UseReportOptions): {
     state: ReportState<T>;
     reload: () => void;
 };

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-CWGvBi3C.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-CWGvBi3C.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-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';
 
 /**
  * Data hook for the Studio panels.
@@ -51,6 +51,8 @@ interface UseReportOptions {
     apiBaseUrl: string;
     report: ReportName;
     range: RangeKey;
+    /** Which baseline the deltas are measured against. Defaults to the preceding window. */
+    compare?: 'previous-period' | 'same-period-last-year';
     /**
      * Whether to fetch at all. Defaults to true.
      *
@@ -64,7 +66,7 @@ interface UseReportOptions {
  *
  * @returns the current state plus a `reload` for manual refresh
  */
-declare function useReport<T>({ apiBaseUrl, report, range, custom, enabled }: UseReportOptions): {
+declare function useReport<T>({ apiBaseUrl, report, range, custom, compare, enabled }: UseReportOptions): {
     state: ReportState<T>;
     reload: () => void;
 };

package/dist/index.js

@@ -95,14 +95,14 @@ function rememberShortfall(base, range, custom, data) {
     shortfallByWindow.set(`${base}|${windowKey(range, custom)}`, ratio);
   }
 }
-function cacheKey(base, report, range, custom) {
-  return [base, report, range, custom?.start ?? "", custom?.end ?? ""].join("|");
+function cacheKey(base, report, range, custom, compare) {
+  return [base, report, range, custom?.start ?? "", custom?.end ?? "", compare ?? "previous-period"].join("|");
 }
 function holdsPreviousAnswer(current, nextReport) {
   return current.status === "ready" && current.envelope.report === nextReport;
 }
 var API_VERSION = "2024-03-01";
-function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
+function useReport({ apiBaseUrl, report, range, custom, compare, enabled = true }) {
   const client = (0, import_sanity.useClient)({ apiVersion: API_VERSION });
   const [state, setState] = (0, import_react.useState)({ status: "idle" });
   const [nonce, setNonce] = (0, import_react.useState)(0);
@@ -113,7 +113,7 @@ function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
     const requestId = requestIdRef.current + 1;
     requestIdRef.current = requestId;
     const controller = new AbortController();
-    const key = cacheKey(apiBaseUrl, report, range, custom);
+    const key = cacheKey(apiBaseUrl, report, range, custom, compare);
     const cached = envelopeCache.get(key);
     if (cached) setState({ status: "ready", envelope: cached, stale: true });
     else {
@@ -131,6 +131,7 @@ function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
       try {
         const base = typeof apiBaseUrl === "string" ? apiBaseUrl.replace(/\/$/, "") : "";
         const query = new URLSearchParams({ range });
+        if (compare && compare !== "previous-period") query.set("compare", compare);
         if (range === "custom" && custom) {
           query.set("start", custom.start);
           query.set("end", custom.end);
@@ -243,7 +244,15 @@ function resolveRange(key, timezone, now = /* @__PURE__ */ new Date()) {
   const start = shiftDays(end, -(RANGE_DAYS[key] - 1));
   return { key, start, end, timezone };
 }
-function previousRange(range) {
+function previousRange(range, basis = "previous-period") {
+  if (basis === "same-period-last-year") {
+    return {
+      key: range.key,
+      start: shiftDays(range.start, -364),
+      end: shiftDays(range.end, -364),
+      timezone: range.timezone
+    };
+  }
   const span = daysBetween(range.start, range.end);
   return {
     key: range.key,
@@ -252,6 +261,7 @@ function previousRange(range) {
     timezone: range.timezone
   };
 }
+var SEND_WINDOW_DAYS = 3;
 
 // src/studio/Figure.tsx
 var import_react2 = __toESM(require("react"));
@@ -1494,6 +1504,33 @@ var legendRow = {
   alignItems: "center"
 };
 
+// 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) {
@@ -1589,6 +1626,26 @@ function OverviewPanel({ data, previous, onBrush }) {
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Everyone subscribed today, not just this period. Mailchimp\u2019s own count, so it is not consent-gated or blockable." })
       ] }) })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
+      /* @__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: "Average order" }),
+        (() => {
+          const average = averageOrderValue(data);
+          const value = metricSortValue(average);
+          if (value === null) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: average, label: "Average order value" });
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatMoney(value, data.currency ?? null) }),
+            average.status === "partial" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "partial" })
+          ] });
+        })(),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "From your own orders, so it is exact \u2014 but only across the orders that carry an amount, which is what the revenue figure covers." })
+      ] }) }),
+      /* @__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: "Visitors per order" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: visitorsPerOrder(data), label: "Visitors per order" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Against Vercel\u2019s visitor count, not Google Analytics\u2019 \u2014 dividing by GA4 would flatter this by whatever share it is missing. Read it as a ceiling: some of those visitors are crawlers or repeat devices." })
+      ] }) })
+    ] }),
     (data.crossSource?.length ?? 0) >= 3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Everything, on one time axis" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Each row has its own scale. Hover a day, or use the control below, to see what each source saw of it." }),
@@ -1776,6 +1833,11 @@ function OverviewPanel({ data, previous, onBrush }) {
     (data.campaigns?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "Email campaigns" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Clicks are distinct subscribers. Opens are inflated by Apple Mail Privacy Protection, which fetches images on the recipient\u2019s behalf \u2014 so sort on clicks, not opens." }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: [
+        "The last two columns count what your order book records in the ",
+        SEND_WINDOW_DAYS,
+        " days after each send, ending early if another send lands first. They are what happened next, not what the send caused \u2014 but unlike anything GA4 can tell you about email, both the send times and the order times are exact."
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         SortableTable,
         {
@@ -1805,6 +1867,31 @@ function OverviewPanel({ data, previous, onBrush }) {
               numeric: true,
               sortValue: (c) => c.unsubscribed,
               render: (c) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: formatCount(c.unsubscribed) })
+            },
+            {
+              key: "ordersAfter",
+              label: "Orders after",
+              numeric: true,
+              sortValue: (c) => c.ordersAfter ?? null,
+              exportValue: (c) => c.ordersAfter ?? null,
+              render: (c) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, children: [
+                c.ordersAfter === null || c.ordersAfter === void 0 ? "\u2014" : formatCount(c.ordersAfter),
+                c.windowComplete === false && c.ordersAfter !== null && c.ordersAfter !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { as: "span", size: 0, muted: true, children: " so far" })
+              ] })
+            },
+            {
+              key: "revenuePerThousand",
+              label: "Per 1,000 sent",
+              numeric: true,
+              // Per thousand, not per send: a foundry's sends run to thousands of addresses
+              // against a handful of orders, so per-send lands at fractions of a cent and
+              // every campaign renders as the same rounded zero.
+              sortValue: (c) => revenuePerThousandSent(c),
+              exportValue: (c) => revenuePerThousandSent(c),
+              render: (c) => {
+                const value = revenuePerThousandSent(c);
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: value === null ? "\u2014" : formatMoney(value, data.currency ?? null) });
+              }
             }
           ]
         }
@@ -2205,6 +2292,36 @@ function buyRateIndex(row, benchmark) {
   if (views === null || views < MIN_FAMILY_VIEWS) return null;
   return rate / benchmark;
 }
+function revenuePerThousandSent(campaign) {
+  if (campaign.revenueAfter === null || campaign.revenueAfter === void 0) return null;
+  if (!Number.isFinite(campaign.sent) || campaign.sent <= 0) return null;
+  return campaign.revenueAfter / campaign.sent * 1e3;
+}
+function averageOrderValue(data) {
+  const revenueMetric = metricOr(data.revenue, OLDER_ROUTE);
+  if (revenueMetric.status === "unavailable") return revenueMetric;
+  const revenue = metricSortValue(revenueMetric);
+  const orders = finiteOrNull(data.ordersWithTotal);
+  if (revenue === null || orders === null || orders <= 0) {
+    return unavailable("not_applicable", "No order in this range carried an amount to average");
+  }
+  const average = revenue / orders;
+  const counted = finiteOrNull(metricSortValue(metricOr(data.orders, OLDER_ROUTE)));
+  const overSubset = counted !== null && counted > orders;
+  return overSubset || data.revenue.status === "partial" ? partial(average, "", `Averaged over the ${formatCount(orders)} of ${formatCount(counted ?? orders)} orders that carry an amount.`) : ok(average);
+}
+function visitorsPerOrder(data) {
+  const visitorMetric = metricOr(data.vercelVisitors, OLDER_ROUTE);
+  const orderMetric = metricOr(data.orders, OLDER_ROUTE);
+  if (visitorMetric.status === "unavailable") return visitorMetric;
+  if (orderMetric.status === "unavailable") return orderMetric;
+  const visitors = metricSortValue(visitorMetric);
+  const orders = metricSortValue(orderMetric);
+  if (visitors === null || orders === null || orders <= 0) {
+    return unavailable("not_applicable", "No order in this range to divide the visitors by");
+  }
+  return ok(Math.round(visitors / orders));
+}
 function TypefaceInterestPanel({ data }) {
   const benchmark = catalogueRate(data.rows ?? []);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
@@ -2705,7 +2822,8 @@ function ReadyReport({
       envelope.comparison.range.start,
       " to ",
       envelope.comparison.range.end,
-      ", the equivalent window immediately before this one.",
+      ",",
+      envelope.comparison.basis === "same-period-last-year" ? " the same window a year earlier." : " the equivalent window immediately before this one.",
       envelope.comparison.provisional && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: " This window\u2019s last days are still being processed by GA4, so changes read low." })
     ] }),
     GA4_ONLY_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CoverageRibbon, { ratio: knownShortfall(apiBaseUrl, range, range === "custom" ? custom : void 0) }),
@@ -2738,15 +2856,46 @@ function ReadyReport({
     ] })
   ] });
 }
+function BasisSelector({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: controlRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: "Compared with" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        style: rangeButton(value === "previous-period"),
+        "aria-pressed": value === "previous-period",
+        title: "The equivalent window immediately before this one",
+        onClick: () => onChange("previous-period"),
+        children: "Previous period"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        style: rangeButton(value === "same-period-last-year"),
+        "aria-pressed": value === "same-period-last-year",
+        title: "The same window a year earlier, shifted by 364 days so the weekdays line up",
+        onClick: () => onChange("same-period-last-year"),
+        children: "Last year"
+      }
+    )
+  ] });
+}
 function ReportPanel({
   tabId,
   report,
   apiBaseUrl,
   range,
   custom,
+  compare,
   onBrush
 }) {
-  const { state, reload } = useReport({ apiBaseUrl, report, range, custom });
+  const { state, reload } = useReport({ apiBaseUrl, report, range, custom, compare });
   const diagnostics = useReport({
     apiBaseUrl,
     report: "diagnostics",
@@ -2840,6 +2989,7 @@ function VisitorInsightsTool(props) {
   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_react4.useState)("previous-period");
   const [activePanel, setActivePanel] = (0, import_react4.useState)(linkedTab ?? "overview");
   import_react4.default.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -2861,7 +3011,10 @@ function VisitorInsightsTool(props) {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Container, { width: 4, padding: 4, as: "section", "aria-label": siteLabel ? `Visitor insights for ${siteLabel}` : "Visitor insights", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 5, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Flex, { align: "flex-start", justify: "space-between", gap: 4, wrap: "wrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Heading, { size: 2, children: "Visitor insights" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RangeSelector, { value: range, custom, onChange: setRange, onCustomChange: setCustom })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RangeSelector, { value: range, custom, onChange: setRange, onCustomChange: setCustom }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BasisSelector, { value: compare, onChange: setCompare })
+        ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelTabs, { value: activePanel, onChange: setActivePanel }),
       range === "custom" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: contextRow, children: [
@@ -2930,6 +3083,7 @@ function VisitorInsightsTool(props) {
                 apiBaseUrl,
                 range,
                 custom,
+                compare,
                 onBrush: (start, end) => {
                   if (range !== "custom") setRangeBeforeBrush(range);
                   setCustom({ start, end });
@@ -2944,33 +3098,6 @@ function VisitorInsightsTool(props) {
   );
 }
 
-// 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/core/cutover.ts
 var PREEXISTING = "preexisting";
 function toHistory(cutover) {