@liiift-studio/sanity-visitor-insights 0.10.0 → 0.11.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-B1YwjGGt.mjs';
-export { C as Coverage, d as DateRange, E as EventCutover, P as PREEXISTING, e as REPORT_NAMES, f as ReportError, S as SiteAnalyticsConfig, g as SourceName, h as SourceStatus, U as UnavailableReason, i as coverageForRange, j as isReportName, o as ok, p as partial, k as previousRange, r as resolveRange, u as unavailable, v as validateSiteConfig, l as valueOrNull } from './ranges-B1YwjGGt.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-YGStz1nR.mjs';
+export { C as Coverage, d as DateRange, E as EventCutover, P as PREEXISTING, e as REPORT_NAMES, f as ReportError, S as SiteAnalyticsConfig, g as SourceName, h as SourceStatus, U as UnavailableReason, i as coverageForRange, j as isReportName, o as ok, p as partial, k as previousRange, r as resolveRange, u as unavailable, v as validateSiteConfig, l as valueOrNull } from './ranges-YGStz1nR.mjs';
 
 /**
  * The Visitor Insights Studio tool.
@@ -57,6 +57,11 @@ type ReportState<T> = {
 };
 /** Options for useReport. */
 interface UseReportOptions {
+    /** Explicit dates, required when `range` is 'custom' and ignored otherwise. */
+    custom?: {
+        start: string;
+        end: string;
+    };
     /** Base URL of the site serving the reports, e.g. `https://dardenstudio.com`. */
     apiBaseUrl: string;
     report: ReportName;
@@ -67,7 +72,7 @@ interface UseReportOptions {
  *
  * @returns the current state plus a `reload` for manual refresh
  */
-declare function useReport<T>({ apiBaseUrl, report, range }: UseReportOptions): {
+declare function useReport<T>({ apiBaseUrl, report, range, custom }: UseReportOptions): {
     state: ReportState<T>;
     reload: () => void;
 };
@@ -165,7 +170,7 @@ declare function MeasurementHealthPanel({ data }: {
 declare function AcquisitionPanel({ data }: {
     data: AcquisitionData;
 }): React.ReactElement;
-/** Journey — per-step totals with adjacent drop-off, explicitly not a tracked path. */
+/** 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, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, T as TypefaceInterestData } from './ranges-B1YwjGGt.js';
-export { C as Coverage, d as DateRange, E as EventCutover, P as PREEXISTING, e as REPORT_NAMES, f as ReportError, S as SiteAnalyticsConfig, g as SourceName, h as SourceStatus, U as UnavailableReason, i as coverageForRange, j as isReportName, o as ok, p as partial, k as previousRange, r as resolveRange, u as unavailable, v as validateSiteConfig, l as valueOrNull } from './ranges-B1YwjGGt.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-YGStz1nR.js';
+export { C as Coverage, d as DateRange, E as EventCutover, P as PREEXISTING, e as REPORT_NAMES, f as ReportError, S as SiteAnalyticsConfig, g as SourceName, h as SourceStatus, U as UnavailableReason, i as coverageForRange, j as isReportName, o as ok, p as partial, k as previousRange, r as resolveRange, u as unavailable, v as validateSiteConfig, l as valueOrNull } from './ranges-YGStz1nR.js';
 
 /**
  * The Visitor Insights Studio tool.
@@ -57,6 +57,11 @@ type ReportState<T> = {
 };
 /** Options for useReport. */
 interface UseReportOptions {
+    /** Explicit dates, required when `range` is 'custom' and ignored otherwise. */
+    custom?: {
+        start: string;
+        end: string;
+    };
     /** Base URL of the site serving the reports, e.g. `https://dardenstudio.com`. */
     apiBaseUrl: string;
     report: ReportName;
@@ -67,7 +72,7 @@ interface UseReportOptions {
  *
  * @returns the current state plus a `reload` for manual refresh
  */
-declare function useReport<T>({ apiBaseUrl, report, range }: UseReportOptions): {
+declare function useReport<T>({ apiBaseUrl, report, range, custom }: UseReportOptions): {
     state: ReportState<T>;
     reload: () => void;
 };
@@ -165,7 +170,7 @@ declare function MeasurementHealthPanel({ data }: {
 declare function AcquisitionPanel({ data }: {
     data: AcquisitionData;
 }): React.ReactElement;
-/** Journey — per-step totals with adjacent drop-off, explicitly not a tracked path. */
+/** 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

@@ -68,7 +68,7 @@ var import_sanity_ui_compat3 = require("@liiift-studio/sanity-ui-compat");
 var import_react = require("react");
 var import_sanity = require("sanity");
 var API_VERSION = "2024-03-01";
-function useReport({ apiBaseUrl, report, range }) {
+function useReport({ apiBaseUrl, report, range, custom }) {
   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);
@@ -90,14 +90,24 @@ function useReport({ apiBaseUrl, report, range }) {
       }
       try {
         const base = typeof apiBaseUrl === "string" ? apiBaseUrl.replace(/\/$/, "") : "";
-        const url = `${base}/api/visitor-insights/${report}?range=${range}`;
+        const query = new URLSearchParams({ range });
+        if (range === "custom" && custom) {
+          query.set("start", custom.start);
+          query.set("end", custom.end);
+        }
+        const url = `${base}/api/visitor-insights/${report}?${query.toString()}`;
         const response = await fetch(url, {
           headers: { Authorization: `Bearer ${token}` },
           signal: controller.signal
         });
         if (requestIdRef.current !== requestId) return;
         if (!response.ok) {
-          const detail = response.status === 401 ? "Not authorised \u2014 sign in to the Studio again." : `Request failed (${response.status})`;
+          let detail = response.status === 401 ? "Not authorised \u2014 sign in to the Studio again." : `Request failed (${response.status})`;
+          if (response.status === 400) {
+            const body = await response.json().catch(() => null);
+            if (body?.error) detail = body.error;
+          }
+          if (requestIdRef.current !== requestId) return;
           setState({ status: "error", message: detail });
           return;
         }
@@ -111,7 +121,7 @@ function useReport({ apiBaseUrl, report, range }) {
     }
     void run();
     return () => controller.abort();
-  }, [client, apiBaseUrl, report, range, nonce]);
+  }, [client, apiBaseUrl, report, range, custom?.start, custom?.end, nonce]);
   return { state, reload };
 }
 
@@ -175,6 +185,83 @@ function ComparisonBar({ label, metric, max, tone = "default" }) {
     )
   ] });
 }
+function FunnelChart({ stages, measurement }) {
+  const [activeKey, setActiveKey] = (0, import_react2.useState)(null);
+  const refs = (0, import_react2.useRef)([]);
+  const entry = stages[0]?.value ?? 0;
+  if (stages.length === 0) return null;
+  const onKeyDown = (event, index) => {
+    let next = null;
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") next = Math.min(index + 1, stages.length - 1);
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") next = Math.max(index - 1, 0);
+    if (event.key === "Home") next = 0;
+    if (event.key === "End") next = stages.length - 1;
+    if (next === null) return;
+    event.preventDefault();
+    refs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { style: funnelList, children: stages.map((stage, index) => {
+    const previous = index > 0 ? stages[index - 1] : null;
+    const share = entry > 0 ? stage.value / entry : 0;
+    const width = Math.max(1.5, Math.min(1, share) * 100);
+    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) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ref: (el) => {
+            refs.current[index] = el;
+          },
+          tabIndex: 0,
+          role: "listitem",
+          style: funnelStage(active),
+          onMouseEnter: () => setActiveKey(stage.key),
+          onMouseLeave: () => setActiveKey(null),
+          onFocus: () => setActiveKey(stage.key),
+          onBlur: () => setActiveKey(null),
+          onKeyDown: (e) => onKeyDown(e, index),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: barHeader, children: [
+              /* @__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.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()}` : ""
+            ] })
+          ]
+        }
+      )
+    ] }, stage.key);
+  }) });
+}
+function gapLabel(delta, measurement) {
+  if (delta === 0) return measurement === "sequence" ? "no drop-off" : "no difference";
+  if (delta > 0) return measurement === "sequence" ? `\u2212${formatCount(delta)} did not continue` : `${formatCount(delta)} fewer`;
+  return `${formatCount(-delta)} more \u2014 not a subset of the step above`;
+}
+var funnelList = { listStyle: "none", margin: 0, padding: 0 };
+var funnelItem = { display: "grid", gap: 4 };
+var funnelGap = {
+  display: "flex",
+  justifyContent: "flex-end",
+  padding: "4px 2px"
+};
+function funnelStage(active) {
+  return {
+    display: "grid",
+    gap: 6,
+    padding: "8px 10px",
+    borderRadius: 3,
+    border: `1px solid ${active ? "currentColor" : "transparent"}`,
+    background: active ? "var(--card-bg-color, rgba(128,128,128,0.08))" : "transparent",
+    cursor: "default"
+  };
+}
+var funnelTrack = { height: 10, overflow: "hidden" };
 var chartFrame = { position: "relative", width: "100%" };
 var readout = {
   position: "absolute",
@@ -663,17 +750,16 @@ function JourneyPanel({ data }) {
   const allSteps = data.steps ?? [];
   const shown = allSteps.filter((step) => step.count.status !== "unavailable");
   const hiddenSteps = allSteps.filter((step) => step.count.status === "unavailable");
-  const max = maxOf(shown.map((step) => step.count));
+  const stages = shown.flatMap(
+    (step) => step.count.status === "unavailable" ? [] : [{ key: step.key, label: step.label, value: step.count.value, conversionFromPrevious: step.conversionFromPrevious }]
+  );
+  const tracked = data.measurement === "sequence";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: data.approximationNote }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Stack, { space: 3, children: shown.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonBar, { label: step.label, metric: step.count, max, tone: "primary" }),
-      step.conversionFromPrevious !== null && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: [
-        formatPercent(step.conversionFromPrevious, 1),
-        " of ",
-        shown[index - 1]?.label.toLowerCase()
-      ] })
-    ] }, step.key)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: tracked ? "transparent" : "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "medium", children: tracked ? "Tracked funnel" : "Independent per-step totals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: tracked, children: data.approximationNote })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FunnelChart, { stages, measurement: data.measurement ?? "independent-totals" }),
     hiddenSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: [
       "Not shown: ",
       hiddenSteps.map((step) => step.label.toLowerCase()).join(", "),
@@ -794,6 +880,12 @@ function DiagnosticsPanel({ data }) {
 
 // src/studio/VisitorInsightsTool.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var controlRow = {
+  display: "flex",
+  gap: 6,
+  alignItems: "center",
+  flexWrap: "wrap"
+};
 var tabStrip = {
   display: "flex",
   gap: 2,
@@ -817,10 +909,39 @@ function tabStyle(selected) {
     whiteSpace: "nowrap"
   };
 }
+function rangeButton(selected) {
+  return {
+    appearance: "none",
+    background: "transparent",
+    border: `1px solid ${selected ? "currentColor" : "var(--card-border-color, rgba(128,128,128,0.3))"}`,
+    borderRadius: 3,
+    color: "inherit",
+    opacity: selected ? 1 : 0.7,
+    font: "inherit",
+    fontSize: "0.85em",
+    fontWeight: selected ? 600 : 400,
+    padding: "5px 10px",
+    cursor: "pointer",
+    whiteSpace: "nowrap"
+  };
+}
+var pickerRow = { display: "flex", gap: 10, alignItems: "flex-end", flexWrap: "wrap" };
+var pickerField = { display: "grid", gap: 2 };
+var dateInput = {
+  font: "inherit",
+  fontSize: "0.85em",
+  padding: "4px 6px",
+  borderRadius: 3,
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  background: "transparent",
+  color: "inherit",
+  colorScheme: "light dark"
+};
 var RANGES = [
-  { key: "week", label: "7 days", span: "the last 7 days" },
-  { key: "quarter", label: "91 days", span: "the last 91 days" },
-  { key: "year", label: "365 days", span: "the last 365 days" }
+  { key: "week", label: "Week", span: "the last 7 days" },
+  { key: "month", label: "Month", span: "the last 30 days" },
+  { key: "quarter", label: "Quarter", span: "the last 91 days" },
+  { key: "year", label: "Year", span: "the last 365 days" }
 ];
 var PANELS = [
   { report: "acquisition", label: "Acquisition", blurb: "Where visitors come from" },
@@ -829,8 +950,14 @@ var PANELS = [
   { report: "measurement-health", label: "Measurement health", blurb: "How much of reality each source actually sees" },
   { report: "diagnostics", label: "Diagnostics", blurb: "What to fix before trusting the numbers above" }
 ];
-function RangeSelector({ value, onChange }) {
+function RangeSelector({
+  value,
+  custom,
+  onChange,
+  onCustomChange
+}) {
   const refs = (0, import_react3.useRef)([]);
+  const [pickerOpen, setPickerOpen] = (0, import_react3.useState)(value === "custom");
   const onKeyDown = (0, import_react3.useCallback)(
     (event) => {
       const currentIndex = RANGES.findIndex((r) => r.key === value);
@@ -843,33 +970,92 @@ function RangeSelector({ value, onChange }) {
       event.preventDefault();
       const next = RANGES[nextIndex];
       if (!next) return;
+      setPickerOpen(false);
       onChange(next.key);
       refs.current[nextIndex]?.focus();
     },
     [value, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Flex, { role: "radiogroup", "aria-label": "Date range", gap: 1, onKeyDown, children: RANGES.map((range, index) => {
-    const selected = range.key === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_sanity_ui_compat3.Button,
-      {
-        ref: (el) => {
-          refs.current[index] = el;
-        },
-        role: "radio",
-        "aria-checked": selected,
-        tabIndex: selected ? 0 : -1,
-        mode: selected ? "default" : "bleed",
-        tone: selected ? "primary" : "default",
-        text: range.label,
-        title: `Ending today, covering ${range.span}`,
-        onClick: () => onChange(range.key),
-        fontSize: 1,
-        padding: 3
-      },
-      range.key
-    );
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "radiogroup", "aria-label": "Date range", style: controlRow, onKeyDown, children: [
+      RANGES.map((range, index) => {
+        const selected = range.key === value;
+        return (
+          // Plain buttons rather than the UI kit's: the compat shim's DOM fallback does not
+          // forward `text`, which renders the whole selector as blank boxes on any Studio
+          // version where it cannot resolve Button.
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              ref: (el) => {
+                refs.current[index] = el;
+              },
+              role: "radio",
+              "aria-checked": selected,
+              tabIndex: selected ? 0 : -1,
+              title: `Ending today, covering ${range.span}`,
+              style: rangeButton(selected),
+              onClick: () => {
+                setPickerOpen(false);
+                onChange(range.key);
+              },
+              children: range.label
+            },
+            range.key
+          )
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          style: rangeButton(value === "custom"),
+          "aria-expanded": pickerOpen,
+          onClick: () => setPickerOpen((open) => !open),
+          children: value === "custom" ? `${custom.start} to ${custom.end}` : "Custom\u2026"
+        }
+      )
+    ] }),
+    pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: pickerRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: pickerField, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "From" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "date",
+            value: custom.start,
+            max: custom.end || void 0,
+            style: dateInput,
+            onChange: (e) => onCustomChange({ ...custom, start: e.currentTarget.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: pickerField, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "To" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "date",
+            value: custom.end,
+            min: custom.start || void 0,
+            style: dateInput,
+            onChange: (e) => onCustomChange({ ...custom, end: e.currentTarget.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          style: rangeButton(true),
+          disabled: !custom.start || !custom.end,
+          onClick: () => onChange("custom"),
+          children: "Apply"
+        }
+      )
+    ] })
+  ] });
 }
 var SOURCE_LABEL = {
   ga4: "Google Analytics",
@@ -933,9 +1119,14 @@ function PanelTabs({ value, onChange }) {
     );
   }) });
 }
-function ReportPanel({ report, apiBaseUrl, range }) {
-  const { state, reload } = useReport({ apiBaseUrl, report, range });
-  const liveMessage = state.status === "loading" ? "Loading report" : state.status === "ready" ? `${report} updated for the selected ${range}` : state.status === "error" ? `Report failed: ${state.message}` : "";
+function ReportPanel({
+  report,
+  apiBaseUrl,
+  range,
+  custom
+}) {
+  const { state, reload } = useReport({ apiBaseUrl, report, range, custom });
+  const liveMessage = state.status === "loading" ? "Loading report" : state.status === "ready" ? `${report} updated for ${range === "custom" ? `${custom.start} to ${custom.end}` : `the selected ${range}`}` : state.status === "error" ? `Report failed: ${state.message}` : "";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Box, { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: liveMessage }),
     state.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Flex, { align: "center", gap: 3, padding: 4, children: [
@@ -965,36 +1156,44 @@ function ReportPanel({ report, apiBaseUrl, range }) {
     ] })
   ] });
 }
+function isoDaysAgo(days) {
+  const date = /* @__PURE__ */ new Date();
+  date.setDate(date.getDate() - days);
+  return date.toISOString().slice(0, 10);
+}
 function VisitorInsightsTool(props) {
   const apiBaseUrl = props.tool?.options?.apiBaseUrl ?? props.apiBaseUrl ?? "";
   const siteLabel = props.tool?.options?.siteLabel ?? props.siteLabel ?? "";
   const [range, setRange] = (0, import_react3.useState)("week");
+  const [custom, setCustom] = (0, import_react3.useState)(() => ({ start: isoDaysAgo(30), end: isoDaysAgo(0) }));
   const [activePanel, setActivePanel] = (0, import_react3.useState)("acquisition");
   const active = PANELS.find((p) => p.report === activePanel) ?? PANELS[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Container, { width: 4, padding: 4, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 5, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Flex, { align: "flex-start", justify: "space-between", gap: 4, wrap: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
+  return (
+    // Named for assistive technology even though the name is not printed: a Studio user with
+    // several tabs open hears which site's figures these are, without the heading repeating
+    // what the Studio navigation already says.
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Container, { width: 4, padding: 4, as: "section", "aria-label": siteLabel ? `Visitor insights for ${siteLabel}` : "Visitor insights", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 5, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Flex, { align: "flex-start", justify: "space-between", gap: 4, wrap: "wrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 2, children: "Visitor insights" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: siteLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RangeSelector, { value: range, custom, onChange: setRange, onCustomChange: setCustom })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RangeSelector, { value: range, onChange: setRange })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelTabs, { value: activePanel, onChange: setActivePanel }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_sanity_ui_compat3.Box,
-      {
-        role: "tabpanel",
-        id: `panel-${activePanel}`,
-        "aria-labelledby": `tab-${activePanel}`,
-        tabIndex: 0,
-        style: { position: "relative" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
-          active && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: active.blurb }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReportPanel, { report: activePanel, apiBaseUrl, range })
-        ] })
-      }
-    )
-  ] }) });
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelTabs, { value: activePanel, onChange: setActivePanel }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_sanity_ui_compat3.Box,
+        {
+          role: "tabpanel",
+          id: `panel-${activePanel}`,
+          "aria-labelledby": `tab-${activePanel}`,
+          tabIndex: 0,
+          style: { position: "relative" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
+            active && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: active.blurb }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReportPanel, { report: activePanel, apiBaseUrl, range, custom })
+          ] })
+        }
+      )
+    ] }) })
+  );
 }
 
 // src/types.ts
@@ -1128,6 +1327,7 @@ function daysBetween(start, end) {
 }
 var RANGE_DAYS = {
   week: 7,
+  month: 30,
   quarter: 91,
   year: 365
 };