@liiift-studio/sanity-visitor-insights 0.20.0 → 0.21.0

package/dist/index.d.mts

@@ -170,6 +170,28 @@ interface ComparisonBarProps {
  * Studio bundle and the theme-token bridging that a chart library would need for light and dark.
  */
 declare function ComparisonBar({ label, metric, max, tone }: ComparisonBarProps): React.ReactElement;
+/** Props for ChartData. */
+interface ChartDataProps<Row> {
+    /** What the disclosure is called. Names the chart it belongs to. */
+    label: string;
+    rows: Row[];
+    columns: Array<SortColumn<Row>>;
+    rowKey: (row: Row) => string;
+    exportName?: string;
+}
+/**
+ * The figures behind a chart, as a table, collapsed by default.
+ *
+ * A chart is a picture of the data and not the data. Every other panel here renders a table for
+ * exactly that reason — the file header used to say so, and it stopped being true the moment the
+ * charts landed, leaving two time series with no equivalent anywhere in the tool.
+ *
+ * One disclosure serves four readers at once: someone using a screen reader, for whom an SVG under
+ * `role="img"` is a single opaque node; someone navigating by keyboard; someone who cannot resolve
+ * axis type at any size; and anyone who wants these numbers in a spreadsheet, since the table
+ * brings sorting and CSV copy with it. Collapsed, so it costs a sighted reader one line.
+ */
+declare function ChartData<Row>({ label, rows, columns, rowKey, exportName }: ChartDataProps<Row>): React.ReactElement | null;
 /** One bar of a proportion chart. */
 interface ProportionBar {
     key: string;
@@ -394,6 +416,17 @@ interface CrossSourceTimelineProps {
     markers?: TimelineMarker[];
     /** ISO 4217 code for any `money` series. */
     currency?: string | null;
+    /**
+     * Called when the reader drags across a span, with inclusive ISO dates.
+     *
+     * Time is the only dimension all four sources genuinely share, which makes it the only thing
+     * worth linking on — a referrer row carries no date and a funnel step carries no source, so
+     * value-based cross-filtering would need dimensions the reports do not request and could not
+     * afford. Dragging a span and having every panel reflow to it is the whole of the cross-filter
+     * this data model supports, and it costs one callback: the range state already drives
+     * everything.
+     */
+    onBrush?: (start: string, end: string) => void;
 }
 /**
  * The cross-source timeline.
@@ -401,7 +434,7 @@ interface CrossSourceTimelineProps {
  * Renders nothing rather than an empty frame when there is not enough to plot — two points cannot
  * show a shape, and an axis with one dot on it invites a reading it cannot support.
  */
-declare function CrossSourceTimeline({ series, markers, currency }: CrossSourceTimelineProps): React.ReactElement | null;
+declare function CrossSourceTimeline({ series, markers, currency, onBrush }: CrossSourceTimelineProps): React.ReactElement | null;
 
 /**
  * The four report panels.
@@ -432,9 +465,11 @@ declare function CrossSourceTimeline({ series, markers, currency }: CrossSourceT
  * under plumbing, on tab four, behind a door labelled for the instrument. This is the same data,
  * first, under a heading that says what it is.
  */
-declare function OverviewPanel({ data, previous }: {
+declare function OverviewPanel({ data, previous, onBrush }: {
     data: MeasurementHealthData;
     previous?: MeasurementHealthData;
+    /** Narrow every panel to a span dragged on the timeline. */
+    onBrush?: (start: string, end: string) => void;
 }): React.ReactElement;
 /**
  * Data health — the instrument, deliberately last.
@@ -512,4 +547,4 @@ interface VisitorInsightsPluginOptions {
  */
 declare const visitorInsights: sanity.Plugin<VisitorInsightsPluginOptions>;
 
-export { AcquisitionData, AcquisitionPanel, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, useReport, visitorInsights };
+export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, useReport, visitorInsights };

package/dist/index.d.ts

@@ -170,6 +170,28 @@ interface ComparisonBarProps {
  * Studio bundle and the theme-token bridging that a chart library would need for light and dark.
  */
 declare function ComparisonBar({ label, metric, max, tone }: ComparisonBarProps): React.ReactElement;
+/** Props for ChartData. */
+interface ChartDataProps<Row> {
+    /** What the disclosure is called. Names the chart it belongs to. */
+    label: string;
+    rows: Row[];
+    columns: Array<SortColumn<Row>>;
+    rowKey: (row: Row) => string;
+    exportName?: string;
+}
+/**
+ * The figures behind a chart, as a table, collapsed by default.
+ *
+ * A chart is a picture of the data and not the data. Every other panel here renders a table for
+ * exactly that reason — the file header used to say so, and it stopped being true the moment the
+ * charts landed, leaving two time series with no equivalent anywhere in the tool.
+ *
+ * One disclosure serves four readers at once: someone using a screen reader, for whom an SVG under
+ * `role="img"` is a single opaque node; someone navigating by keyboard; someone who cannot resolve
+ * axis type at any size; and anyone who wants these numbers in a spreadsheet, since the table
+ * brings sorting and CSV copy with it. Collapsed, so it costs a sighted reader one line.
+ */
+declare function ChartData<Row>({ label, rows, columns, rowKey, exportName }: ChartDataProps<Row>): React.ReactElement | null;
 /** One bar of a proportion chart. */
 interface ProportionBar {
     key: string;
@@ -394,6 +416,17 @@ interface CrossSourceTimelineProps {
     markers?: TimelineMarker[];
     /** ISO 4217 code for any `money` series. */
     currency?: string | null;
+    /**
+     * Called when the reader drags across a span, with inclusive ISO dates.
+     *
+     * Time is the only dimension all four sources genuinely share, which makes it the only thing
+     * worth linking on — a referrer row carries no date and a funnel step carries no source, so
+     * value-based cross-filtering would need dimensions the reports do not request and could not
+     * afford. Dragging a span and having every panel reflow to it is the whole of the cross-filter
+     * this data model supports, and it costs one callback: the range state already drives
+     * everything.
+     */
+    onBrush?: (start: string, end: string) => void;
 }
 /**
  * The cross-source timeline.
@@ -401,7 +434,7 @@ interface CrossSourceTimelineProps {
  * Renders nothing rather than an empty frame when there is not enough to plot — two points cannot
  * show a shape, and an axis with one dot on it invites a reading it cannot support.
  */
-declare function CrossSourceTimeline({ series, markers, currency }: CrossSourceTimelineProps): React.ReactElement | null;
+declare function CrossSourceTimeline({ series, markers, currency, onBrush }: CrossSourceTimelineProps): React.ReactElement | null;
 
 /**
  * The four report panels.
@@ -432,9 +465,11 @@ declare function CrossSourceTimeline({ series, markers, currency }: CrossSourceT
  * under plumbing, on tab four, behind a door labelled for the instrument. This is the same data,
  * first, under a heading that says what it is.
  */
-declare function OverviewPanel({ data, previous }: {
+declare function OverviewPanel({ data, previous, onBrush }: {
     data: MeasurementHealthData;
     previous?: MeasurementHealthData;
+    /** Narrow every panel to a span dragged on the timeline. */
+    onBrush?: (start: string, end: string) => void;
 }): React.ReactElement;
 /**
  * Data health — the instrument, deliberately last.
@@ -512,4 +547,4 @@ interface VisitorInsightsPluginOptions {
  */
 declare const visitorInsights: sanity.Plugin<VisitorInsightsPluginOptions>;
 
-export { AcquisitionData, AcquisitionPanel, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, useReport, visitorInsights };
+export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, useReport, visitorInsights };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AcquisitionPanel: () => AcquisitionPanel,
+  ChartData: () => ChartData,
   ComparisonBar: () => ComparisonBar,
   CrossSourceTimeline: () => CrossSourceTimeline,
   DataHealthPanel: () => DataHealthPanel,
@@ -76,6 +77,10 @@ var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
 // src/studio/useReport.ts
 var import_react = require("react");
 var import_sanity = require("sanity");
+var envelopeCache = /* @__PURE__ */ new Map();
+function cacheKey(report, range, custom) {
+  return [report, range, custom?.start ?? "", custom?.end ?? ""].join("|");
+}
 var API_VERSION = "2024-03-01";
 function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
   const client = (0, import_sanity.useClient)({ apiVersion: API_VERSION });
@@ -88,7 +93,10 @@ function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
     const requestId = requestIdRef.current + 1;
     requestIdRef.current = requestId;
     const controller = new AbortController();
-    setState((current) => current.status === "ready" ? { ...current, stale: true } : { status: "loading" });
+    const key = cacheKey(report, range, custom);
+    const cached = envelopeCache.get(key);
+    if (cached) setState({ status: "ready", envelope: cached, stale: true });
+    else setState((current) => current.status === "ready" ? { ...current, stale: true } : { status: "loading" });
     async function run() {
       const token = client.config().token;
       if (!token) {
@@ -125,6 +133,7 @@ function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
         }
         const envelope = await response.json();
         if (requestIdRef.current !== requestId) return;
+        envelopeCache.set(key, envelope);
         setState({ status: "ready", envelope });
       } catch (e) {
         if (controller.signal.aborted || requestIdRef.current !== requestId) return;
@@ -137,6 +146,46 @@ function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
   return { state, reload };
 }
 
+// src/core/ranges.ts
+function formatInTimeZone(date, timeZone) {
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).formatToParts(date);
+  const get = (type) => parts.find((p) => p.type === type)?.value ?? "";
+  return `${get("year")}-${get("month")}-${get("day")}`;
+}
+function shiftDays(isoDate, days) {
+  const time = Date.parse(`${isoDate}T00:00:00Z`);
+  if (Number.isNaN(time)) throw new Error(`Invalid ISO date: ${isoDate}`);
+  return new Date(time + days * 864e5).toISOString().slice(0, 10);
+}
+function daysBetween(start, end) {
+  return Math.round((Date.parse(`${end}T00:00:00Z`) - Date.parse(`${start}T00:00:00Z`)) / 864e5) + 1;
+}
+var RANGE_DAYS = {
+  week: 7,
+  month: 30,
+  quarter: 91,
+  year: 365
+};
+function resolveRange(key, timezone, now = /* @__PURE__ */ new Date()) {
+  const end = formatInTimeZone(now, timezone);
+  const start = shiftDays(end, -(RANGE_DAYS[key] - 1));
+  return { key, start, end, timezone };
+}
+function previousRange(range) {
+  const span = daysBetween(range.start, range.end);
+  return {
+    key: range.key,
+    start: shiftDays(range.start, -span),
+    end: shiftDays(range.end, -span),
+    timezone: range.timezone
+  };
+}
+
 // src/studio/Figure.tsx
 var import_react2 = __toESM(require("react"));
 var import_sanity_ui_compat = require("@liiift-studio/sanity-ui-compat");
@@ -298,6 +347,32 @@ function ComparisonBar({ label, metric, max, tone = "default" }) {
     )
   ] });
 }
+function ChartData({ label, rows, columns, rowKey, exportName }) {
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { style: disclosureBlock, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { style: disclosureSummary, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SortableTable,
+      {
+        caption: label,
+        rows,
+        columns,
+        rowKey,
+        exportName
+      }
+    ) })
+  ] });
+}
+var disclosureBlock = { width: "100%" };
+var disclosureSummary = {
+  cursor: "pointer",
+  font: "inherit",
+  fontSize: "0.85em",
+  opacity: 0.75,
+  textDecoration: "underline",
+  textUnderlineOffset: 3,
+  width: "fit-content"
+};
 function ProportionChart({ bars, format, totalLabel }) {
   if (bars.length === 0) return null;
   const total = bars.reduce((sum, bar) => sum + bar.value, 0);
@@ -967,9 +1042,11 @@ function formatValue(value, unit, currency) {
 function tickLabel(date) {
   return `${date.getUTCDate()} ${date.toLocaleString("en-GB", { month: "short", timeZone: "UTC" })}`;
 }
-function CrossSourceTimeline({ series, markers = [], currency }) {
+function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   const [hoverIndex, setHoverIndex] = (0, import_react3.useState)(null);
   const [pinned, setPinned] = (0, import_react3.useState)(false);
+  const [brushAnchor, setBrushAnchor] = (0, import_react3.useState)(null);
+  const [brushed, setBrushed] = (0, import_react3.useState)(null);
   const frameRef = (0, import_react3.useRef)(null);
   const dates = (0, import_react3.useMemo)(() => {
     const all = /* @__PURE__ */ new Set();
@@ -982,18 +1059,27 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
     if (dates.length === 0) return null;
     return (0, import_d3_scale.scaleUtc)().domain([/* @__PURE__ */ new Date(`${dates[0]}T00:00:00Z`), /* @__PURE__ */ new Date(`${dates[dates.length - 1]}T00:00:00Z`)]).range([GUTTER, GUTTER + plotWidth]);
   }, [dates, plotWidth]);
-  const onMove = (0, import_react3.useCallback)(
-    (event) => {
+  const indexAt = (0, import_react3.useCallback)(
+    (clientX) => {
       const frame = frameRef.current;
-      if (!frame || dates.length === 0) return;
+      if (!frame || dates.length === 0) return null;
       const box = frame.getBoundingClientRect();
-      const ratio = (event.clientX - box.left) / box.width * WIDTH;
+      const ratio = (clientX - box.left) / box.width * WIDTH;
       const clamped = Math.max(GUTTER, Math.min(GUTTER + plotWidth, ratio));
       const index = Math.round((clamped - GUTTER) / plotWidth * (dates.length - 1));
-      setHoverIndex(Math.max(0, Math.min(dates.length - 1, index)));
+      return Math.max(0, Math.min(dates.length - 1, index));
     },
     [dates.length, plotWidth]
   );
+  const onMove = (0, import_react3.useCallback)(
+    (event) => {
+      const index = indexAt(event.clientX);
+      if (index === null) return;
+      setHoverIndex(index);
+      if (brushAnchor !== null) setBrushed([Math.min(brushAnchor, index), Math.max(brushAnchor, index)]);
+    },
+    [indexAt, brushAnchor]
+  );
   if (dates.length < 3 || series.length === 0 || !x) return null;
   const hoveredDate = hoverIndex !== null ? dates[hoverIndex] : null;
   const revealed = pinned || hoverIndex !== null;
@@ -1027,9 +1113,32 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
       {
         ref: frameRef,
         viewBox: `0 0 ${WIDTH} ${height}`,
-        style: { width: "100%", height: "auto", display: "block" },
         onMouseMove: onMove,
-        onMouseLeave: () => setHoverIndex(null),
+        onMouseLeave: () => {
+          setHoverIndex(null);
+          setBrushAnchor(null);
+        },
+        onMouseDown: (event) => {
+          if (!onBrush) return;
+          const index = indexAt(event.clientX);
+          if (index === null) return;
+          event.preventDefault();
+          setBrushAnchor(index);
+          setBrushed([index, index]);
+        },
+        onMouseUp: () => {
+          if (!onBrush || brushAnchor === null) return;
+          const index = hoverIndex ?? brushAnchor;
+          const from = Math.min(brushAnchor, index);
+          const to = Math.max(brushAnchor, index);
+          setBrushAnchor(null);
+          if (to - from < 1) {
+            setBrushed(null);
+            return;
+          }
+          onBrush(dates[from], dates[to]);
+        },
+        style: { width: "100%", height: "auto", display: "block", cursor: onBrush ? "col-resize" : "default" },
         tabIndex: 0,
         role: "img",
         "aria-label": summary,
@@ -1044,11 +1153,21 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
           if (event.key === "End") next = dates.length - 1;
           if (event.key === "Escape") {
             setHoverIndex(null);
+            setBrushed(null);
+            return;
+          }
+          if (event.key === "Enter" && brushed && brushed[1] > brushed[0] && onBrush) {
+            event.preventDefault();
+            onBrush(dates[brushed[0]], dates[brushed[1]]);
             return;
           }
           if (next === null) return;
           event.preventDefault();
           setHoverIndex(next);
+          if (event.shiftKey && onBrush) {
+            const anchor = brushed ? brushed[0] : current;
+            setBrushed([Math.min(anchor, next), Math.max(anchor, next)]);
+          }
         },
         children: [
           series.map((row, rowIndex) => {
@@ -1110,6 +1229,30 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: at, cy: TOP_PAD - 8, r: 3, fill: "currentColor", opacity: 0.7 })
             ] }, `${marker.date}-${marker.label}`);
           }),
+          brushed && brushed[1] > brushed[0] && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "rect",
+              {
+                x: GUTTER,
+                y: TOP_PAD - 8,
+                width: Math.max(0, x(/* @__PURE__ */ new Date(`${dates[brushed[0]]}T00:00:00Z`)) - GUTTER),
+                height: series.length * ROW_HEIGHT - 10,
+                fill: "currentColor",
+                opacity: 0.12
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "rect",
+              {
+                x: x(/* @__PURE__ */ new Date(`${dates[brushed[1]]}T00:00:00Z`)),
+                y: TOP_PAD - 8,
+                width: Math.max(0, GUTTER + plotWidth - x(/* @__PURE__ */ new Date(`${dates[brushed[1]]}T00:00:00Z`))),
+                height: series.length * ROW_HEIGHT - 10,
+                fill: "currentColor",
+                opacity: 0.12
+              }
+            )
+          ] }),
           hoveredDate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "line",
             {
@@ -1194,7 +1337,8 @@ function CrossSourceTimeline({ series, markers = [], currency }) {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: sentence }, sentence)
       )),
       series.some((row) => row.shortfall) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "Shaded: what your analytics did not see." }),
-      markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "Vertical rules mark campaign sends." })
+      markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "Vertical rules mark campaign sends." }),
+      onBrush && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "Drag across the chart \u2014 or hold shift and use the arrow keys, then Enter \u2014 to narrow every panel to that span." })
     ] })
   ] });
 }
@@ -1268,7 +1412,7 @@ var cardGrid = {
 };
 var cell = { padding: "8px 12px", textAlign: "left", borderBottom: "1px solid var(--card-border-color)" };
 var numericCell = { ...cell, textAlign: "right" };
-function OverviewPanel({ data, previous }) {
+function OverviewPanel({ data, previous, onBrush }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Verdict, { data, previous }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
@@ -1297,9 +1441,51 @@ function OverviewPanel({ data, previous }) {
     (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." }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ChartData,
+        {
+          label: "Show these figures as a table",
+          rows: data.crossSource ?? [],
+          rowKey: (d) => d.date,
+          exportName: "timeline",
+          columns: [
+            { key: "date", label: "Date", sortValue: (d) => d.date, render: (d) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: d.date }) },
+            {
+              key: "vercel",
+              label: "Pageviews",
+              numeric: true,
+              sortValue: (d) => d.vercelPageviews,
+              render: (d) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: d.vercelPageviews === null ? "\u2014" : formatCount(d.vercelPageviews) })
+            },
+            {
+              key: "ga4",
+              label: "Seen by GA4",
+              numeric: true,
+              sortValue: (d) => d.ga4Pageviews,
+              render: (d) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: d.ga4Pageviews === null ? "\u2014" : formatCount(d.ga4Pageviews) })
+            },
+            {
+              key: "orders",
+              label: "Orders",
+              numeric: true,
+              sortValue: (d) => d.orders,
+              render: (d) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: d.orders === null ? "\u2014" : formatCount(d.orders) })
+            },
+            {
+              key: "revenue",
+              label: "Revenue",
+              numeric: true,
+              sortValue: (d) => d.revenue,
+              exportValue: (d) => d.revenue === null ? null : formatMoney(d.revenue, data.currency ?? null),
+              render: (d) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: d.revenue === null ? "\u2014" : formatMoney(d.revenue, data.currency ?? null) })
+            }
+          ]
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         CrossSourceTimeline,
         {
+          onBrush,
           currency: data.currency ?? null,
           markers: data.timelineEvents ?? [],
           series: [
@@ -1849,6 +2035,25 @@ function tabStyle(selected) {
     whiteSpace: "nowrap"
   };
 }
+var contextRow = {
+  display: "flex",
+  gap: 12,
+  alignItems: "baseline",
+  flexWrap: "wrap"
+};
+var inlineClear = {
+  appearance: "none",
+  background: "transparent",
+  border: "none",
+  color: "inherit",
+  font: "inherit",
+  fontSize: "0.8em",
+  opacity: 0.75,
+  padding: 0,
+  textDecoration: "underline",
+  textUnderlineOffset: 3,
+  cursor: "pointer"
+};
 function rangeButton(selected) {
   return {
     appearance: "none",
@@ -2065,7 +2270,8 @@ function ReportPanel({
   report,
   apiBaseUrl,
   range,
-  custom
+  custom,
+  onBrush
 }) {
   const { state, reload } = useReport({ apiBaseUrl, report, range, custom });
   const diagnostics = useReport({
@@ -2104,7 +2310,7 @@ function ReportPanel({
         ", the equivalent window immediately before this one.",
         state.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." })
       ] }),
-      tabId === "overview" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverviewPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data }),
+      tabId === "overview" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverviewPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data, onBrush }),
       tabId === "data-health" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DataHealthPanel, { data: state.envelope.data, diagnostics: diagnostics.status === "ready" ? diagnostics.envelope.data : void 0 }),
       tabId === "acquisition" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AcquisitionPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data }),
       tabId === "journey" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(JourneyPanel, { data: state.envelope.data }),
@@ -2175,6 +2381,18 @@ function VisitorInsightsTool(props) {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RangeSelector, { value: range, custom, onChange: setRange, onCustomChange: setCustom })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelTabs, { value: activePanel, onChange: setActivePanel }),
+      range === "custom" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: contextRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
+          "Narrowed to ",
+          custom.start,
+          " to ",
+          custom.end,
+          " (",
+          daysBetween(custom.start, custom.end),
+          " days)"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", style: inlineClear, onClick: () => setRange("week"), children: "Back to the week" })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_sanity_ui_compat4.Box,
         {
@@ -2185,7 +2403,20 @@ function VisitorInsightsTool(props) {
           style: { position: "relative" },
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
             active && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: active.blurb }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { onRetry: () => setActivePanel(activePanel), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReportPanel, { tabId: active?.id ?? "overview", report: active?.report ?? "measurement-health", apiBaseUrl, range, custom }) })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { onRetry: () => setActivePanel(activePanel), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              ReportPanel,
+              {
+                tabId: active?.id ?? "overview",
+                report: active?.report ?? "measurement-health",
+                apiBaseUrl,
+                range,
+                custom,
+                onBrush: (start, end) => {
+                  setCustom({ start, end });
+                  setRange("custom");
+                }
+              }
+            ) })
           ] })
         }
       )
@@ -2358,46 +2589,6 @@ function isValidTimeZone(timeZone) {
   }
 }
 
-// src/core/ranges.ts
-function formatInTimeZone(date, timeZone) {
-  const parts = new Intl.DateTimeFormat("en-CA", {
-    timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
-  }).formatToParts(date);
-  const get = (type) => parts.find((p) => p.type === type)?.value ?? "";
-  return `${get("year")}-${get("month")}-${get("day")}`;
-}
-function shiftDays(isoDate, days) {
-  const time = Date.parse(`${isoDate}T00:00:00Z`);
-  if (Number.isNaN(time)) throw new Error(`Invalid ISO date: ${isoDate}`);
-  return new Date(time + days * 864e5).toISOString().slice(0, 10);
-}
-function daysBetween(start, end) {
-  return Math.round((Date.parse(`${end}T00:00:00Z`) - Date.parse(`${start}T00:00:00Z`)) / 864e5) + 1;
-}
-var RANGE_DAYS = {
-  week: 7,
-  month: 30,
-  quarter: 91,
-  year: 365
-};
-function resolveRange(key, timezone, now = /* @__PURE__ */ new Date()) {
-  const end = formatInTimeZone(now, timezone);
-  const start = shiftDays(end, -(RANGE_DAYS[key] - 1));
-  return { key, start, end, timezone };
-}
-function previousRange(range) {
-  const span = daysBetween(range.start, range.end);
-  return {
-    key: range.key,
-    start: shiftDays(range.start, -span),
-    end: shiftDays(range.end, -span),
-    timezone: range.timezone
-  };
-}
-
 // src/index.ts
 var ChartIcon = (0, import_icons.resolveIcon)("ChartUpwardIcon", "chart-upward");
 var visitorInsights = (0, import_sanity2.definePlugin)((options) => {
@@ -2427,6 +2618,7 @@ var index_default = visitorInsights;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AcquisitionPanel,
+  ChartData,
   ComparisonBar,
   CrossSourceTimeline,
   DataHealthPanel,