@liiift-studio/sanity-visitor-insights 0.69.0 → 0.70.0

package/dist/index.js

@@ -290,6 +290,15 @@ function withAlpha(hex, alpha) {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 var COMPARISON = "#8368D4";
+var COMPARISON_TEXT = `var(--vi-comparison, ${COMPARISON})`;
+var COMPARISON_ON_LIGHT = "#6A4FC4";
+var COMPARISON_ON_DARK = "#A594E8";
+var COMPARISON_STYLE = `
+:root { --vi-comparison: ${COMPARISON}; }
+@supports (color: light-dark(#000, #fff)) {
+	:root { --vi-comparison: light-dark(${COMPARISON_ON_LIGHT}, ${COMPARISON_ON_DARK}); }
+}
+`.trim();
 var MARKS = {
   "chart.line": { key: "vercel", alpha: 1, role: "data", note: "A source series in the timeline" },
   "chart.lossyLine": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The lossier source, dashed" },
@@ -455,11 +464,11 @@ function deltaStyle() {
     fontFamily: "inherit",
     fontSize: "0.8em",
     fontWeight: 500,
-    color: COMPARISON,
+    color: COMPARISON_TEXT,
     whiteSpace: "nowrap"
   };
 }
-var baselineStyle = { color: COMPARISON, fontWeight: 400 };
+var baselineStyle = { color: COMPARISON_TEXT, fontWeight: 400 };
 var HOVER_GUTTER = 14;
 var HOVER_CARD_MAX = 260;
 function HoverCard({
@@ -701,7 +710,7 @@ 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 && gapLabel(delta, measurement, entry) !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelGapStyle(measurement === "sequence"), children: [
+        previous && gapLabel(delta, measurement, entry) !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelGapStyle(measurement === "sequence" && delta > 0 && entry > 0), children: [
           measurement === "sequence" && delta > 0 && entry > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: { ...barTrack, height: 6, flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
@@ -1002,6 +1011,7 @@ function SurvivalLines({
   minDenominator = MIN_RATE_DENOMINATOR
 }) {
   const [active, setActive] = import_react2.default.useState(null);
+  const [steppedByKey, setSteppedByKey] = import_react2.default.useState(false);
   if (segments.length < 2 || stepLabels.length < 2) return null;
   const width = 320;
   const height = 132;
@@ -1112,18 +1122,23 @@ function SurvivalLines({
       "button",
       {
         type: "button",
-        style: survivalTick(i === active),
+        style: survivalTick(i === active, i, stepLabels.length),
         "aria-pressed": i === active,
-        onMouseEnter: () => setActive(i),
+        onMouseEnter: () => {
+          setSteppedByKey(false);
+          setActive(i);
+        },
         onMouseLeave: () => setActive(null),
-        onFocus: () => setActive(i),
+        onFocus: () => {
+          setSteppedByKey(true);
+          setActive(i);
+        },
         onBlur: () => setActive(null),
-        onClick: () => setActive(i === active ? null : i),
         children: label
       },
       label
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: survivalLegend, "aria-live": "polite", children: lines.map(({ segment, shares, colour }) => {
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: survivalLegend, "aria-live": steppedByKey ? "polite" : "off", children: lines.map(({ segment, shares, colour }) => {
       const share = active === null ? null : shares[active];
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...hoverSwatch, background: colour, display: "inline-block", marginRight: 6 } }),
@@ -1457,13 +1472,18 @@ var shiftNow = {
 var survivalLegend = { display: "flex", gap: 14, flexWrap: "wrap" };
 var survivalFrame = { paddingLeft: 34, position: "relative" };
 var survivalAxis = {
-  display: "flex",
-  justifyContent: "space-between",
-  gap: 4,
-  paddingLeft: 34
+  position: "relative",
+  // Reserves the row's height, since the ticks inside it are positioned.
+  height: 30,
+  marginLeft: 34
 };
-function survivalTick(activeTick) {
+function survivalTick(activeTick, index, count) {
+  const at = count > 1 ? index / (count - 1) * 100 : 50;
   return {
+    position: "absolute",
+    left: `${at}%`,
+    // The ends align to the plot edge; everything between is centred on its vertex.
+    transform: index === 0 ? "none" : index === count - 1 ? "translateX(-100%)" : "translateX(-50%)",
     appearance: "none",
     background: "transparent",
     border: "none",
@@ -1473,11 +1493,10 @@ function survivalTick(activeTick) {
     font: "inherit",
     fontSize: "0.72em",
     fontWeight: activeTick ? 600 : 400,
-    padding: "6px 2px",
+    padding: "6px 4px",
     minHeight: 24,
     cursor: "pointer",
-    textAlign: "center",
-    flex: "1 1 0"
+    whiteSpace: "nowrap"
   };
 }
 function survivalYLabel(level) {
@@ -2206,7 +2225,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
           }
         )
       ] }),
-      series.some((row) => row.comparison) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      series.some((row) => (row.comparison?.length ?? 0) > 1) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         LegendKey,
         {
           swatch: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: legendDash(mark("chart.ghost")) }),
@@ -2216,7 +2235,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         LegendKey,
         {
-          swatch: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: legendRule(mark("chart.grid")) }),
+          swatch: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: legendMarker }),
           label: "Dashed rules with a dot mark campaign sends"
         }
       ),
@@ -2251,14 +2270,15 @@ function legendBlock(fill, edge) {
     borderTop: `1.5px dashed ${edge}`
   };
 }
-function legendRule(colour) {
-  return {
-    display: "inline-block",
-    width: 0,
-    height: 12,
-    borderLeft: `1px dashed ${colour}`
-  };
-}
+var legendMarker = {
+  display: "inline-block",
+  position: "relative",
+  width: 0,
+  height: 12,
+  borderLeft: "1px dashed currentColor",
+  opacity: 0.7,
+  boxShadow: "-2px -6px 0 0 currentColor, -1px -6px 0 0 currentColor"
+};
 function shortfallKey(series) {
   const row = series.find((r) => r.shortfall);
   return colorFor(row?.shortfall?.source ?? "GA4", row?.unit ?? "count", row?.shortfall?.color);
@@ -2394,7 +2414,7 @@ function OverviewPanel({ data, previous, onBrush }) {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.vercelPageviews, OLDER_ROUTE), label: "Pageviews" }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Delta, { current: metricSortValue(data.vercelPageviews), previous: metricSortValue(previous?.vercelPageviews) })
         ] }),
-        data.vercelPageviews?.status === "ok" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Pageviews, from Vercel\u2019s own counter." })
+        data.vercelPageviews?.status !== "unavailable" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Pageviews, from Vercel\u2019s own counter." })
       ] }) }),
       /* @__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: "Mailing list, total" }),
@@ -2413,7 +2433,7 @@ function OverviewPanel({ data, previous, onBrush }) {
             ] });
           })()
         ] }),
-        data.audience?.status === "ok" && /* @__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." })
+        data.audience?.status !== "unavailable" && /* @__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: [
@@ -2448,12 +2468,12 @@ function OverviewPanel({ data, previous, onBrush }) {
             unavailable: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: visitorsPerOrder(data), label: "Visitors per order" })
           }
         ),
-        data.vercelVisitors?.status === "ok" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel\u2019s visitor count. A ceiling \u2014 some are bots or the same person twice." })
+        data.vercelVisitors?.status !== "unavailable" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel\u2019s visitor count. A ceiling \u2014 some are bots or the same person twice." })
       ] }) })
     ] }),
     (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)(SectionTitle, { title: "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 to see what each source saw of it." }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Each row has its own scale, so the rows cannot be compared by height \u2014 only by shape." }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         CrossSourceTimeline,
         {
@@ -2760,7 +2780,6 @@ function Verdict({ data, previous }) {
   say("Revenue", data.revenue, previous?.revenue, "money");
   say("Orders", data.orders, previous?.orders, "count");
   say("Traffic", data.vercelPageviews, previous?.vercelPageviews, "count");
-  const sends = data.campaigns?.length ?? 0;
   const shortfall = data.shortfallRatio;
   const seeing = shortfall !== null && shortfall !== void 0 ? `GA4 is seeing ${formatPercent(1 - shortfall, 0)} of your traffic` : null;
   const broken = shortfall === null || shortfall === void 0 ? data.capture?.discrepancy ? "measurement disagrees between sources" : null : shortfall > 0.6 ? `${seeing} \u2014 treat its figures as broken` : shortfall > 0.35 ? `${seeing} \u2014 its figures are undercounts, not what happened` : data.capture?.discrepancy ? "measurement disagrees between sources" : null;
@@ -3602,12 +3621,15 @@ function basisButton(selected) {
     background: selected ? withAlpha(COMPARISON, 0.12) : "transparent",
     border: `1px ${selected ? "solid" : "dashed"} ${selected ? COMPARISON : "var(--card-border-color, rgba(128,128,128,0.3))"}`,
     borderRadius: 999,
-    color: selected ? COMPARISON : "inherit",
+    color: selected ? COMPARISON_TEXT : "inherit",
     opacity: selected ? 1 : 0.7,
     font: "inherit",
     fontSize: "0.85em",
     fontWeight: selected ? 600 : 400,
     padding: "5px 12px",
+    // Pinned rather than left to emerge from padding and root font size, which is how a target
+    // silently drops under the 24px minimum when someone adjusts either.
+    minHeight: 24,
     cursor: "pointer",
     whiteSpace: "nowrap"
   };
@@ -3846,7 +3868,7 @@ function ReadyReport({
       "These figures are the last ones that loaded. Refreshing them failed: ",
       revalidationError
     ] }) }),
-    envelope.comparison && COMPARED_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, style: { color: COMPARISON }, children: [
+    envelope.comparison && COMPARED_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, style: { color: COMPARISON_TEXT }, children: [
       "Changes are against ",
       envelope.comparison.range.start,
       " to ",
@@ -3889,8 +3911,8 @@ function BasisSelector({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: controlRow, role: "radiogroup", "aria-label": "Comparison basis", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 0, style: { color: COMPARISON }, children: "Compared with" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: controlRow, role: "group", "aria-label": "Comparison basis", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 0, style: { color: COMPARISON_TEXT }, children: "Compared with" }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
@@ -4037,90 +4059,93 @@ function VisitorInsightsTool(props) {
     // 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_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.jsxs)(import_sanity_ui_compat4.Stack, { space: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RangeSelector, { value: range, custom, onChange: setRange, onCustomChange: setCustom }),
-          COMPARED_TABS.includes(activePanel) && /* @__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: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
-          "Showing ",
-          custom.start,
-          " to ",
-          custom.end,
-          " (",
-          daysBetween(custom.start, custom.end),
-          " days).",
-          daysBetween(custom.start, custom.end) < 14 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: " Short windows lose GA4\u2019s low-count rows, so the source and typeface lists will be shorter than reality." })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(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.jsx)("style", { children: COMPARISON_STYLE }),
+      /* @__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.jsxs)(import_sanity_ui_compat4.Stack, { space: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RangeSelector, { value: range, custom, onChange: setRange, onCustomChange: setCustom }),
+            COMPARED_TABS.includes(activePanel) && /* @__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: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
+            "Showing ",
+            custom.start,
+            " to ",
+            custom.end,
+            " (",
+            daysBetween(custom.start, custom.end),
+            " days).",
+            daysBetween(custom.start, custom.end) < 14 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: " Short windows lose GA4\u2019s low-count rows, so the source and typeface lists will be shorter than reality." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              style: inlineClear,
+              "aria-label": "Shift the window back by its own length",
+              onClick: () => {
+                const span = daysBetween(custom.start, custom.end);
+                setCustom({ start: shiftDays(custom.start, -span), end: shiftDays(custom.end, -span) });
+              },
+              children: "\u2190 earlier"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Shift the window forward by its own length",
+              disabled: atPresent,
+              style: atPresent ? { ...inlineClear, opacity: 0.35, cursor: "not-allowed" } : inlineClear,
+              title: atPresent ? "This window already ends today" : void 0,
+              onClick: () => {
+                const span = daysBetween(custom.start, custom.end);
+                const today = isoDaysAgo(0);
+                const room = daysBetween(custom.end, today) - 1;
+                const allowed = Math.min(span, room);
+                if (allowed <= 0) return;
+                setCustom({ start: shiftDays(custom.start, allowed), end: shiftDays(custom.end, allowed) });
+              },
+              children: "later \u2192"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { type: "button", style: inlineClear, onClick: () => setRange(rangeBeforeBrush), children: [
+            "Back to the ",
+            RANGES.find((r) => r.key === rangeBeforeBrush)?.label.toLowerCase() ?? "week"
+          ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            style: inlineClear,
-            "aria-label": "Shift the window back by its own length",
-            onClick: () => {
-              const span = daysBetween(custom.start, custom.end);
-              setCustom({ start: shiftDays(custom.start, -span), end: shiftDays(custom.end, -span) });
-            },
-            children: "\u2190 earlier"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
+          import_sanity_ui_compat4.Box,
           {
-            type: "button",
-            "aria-label": "Shift the window forward by its own length",
-            disabled: atPresent,
-            style: atPresent ? { ...inlineClear, opacity: 0.35, cursor: "not-allowed" } : inlineClear,
-            title: atPresent ? "This window already ends today" : void 0,
-            onClick: () => {
-              const span = daysBetween(custom.start, custom.end);
-              const today = isoDaysAgo(0);
-              const room = daysBetween(custom.end, today) - 1;
-              const allowed = Math.min(span, room);
-              if (allowed <= 0) return;
-              setCustom({ start: shiftDays(custom.start, allowed), end: shiftDays(custom.end, allowed) });
-            },
-            children: "later \u2192"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { type: "button", style: inlineClear, onClick: () => setRange(rangeBeforeBrush), children: [
-          "Back to the ",
-          RANGES.find((r) => r.key === rangeBeforeBrush)?.label.toLowerCase() ?? "week"
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_sanity_ui_compat4.Box,
-        {
-          role: "tabpanel",
-          id: `panel-${activePanel}`,
-          "aria-labelledby": `tab-${activePanel}`,
-          tabIndex: 0,
-          style: { position: "relative" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Stack, { space: 4, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { resetKey: `${activePanel}|${range}|${custom.start}|${custom.end}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            ReportPanel,
-            {
-              tabId: active?.id ?? "overview",
-              report: active?.report ?? "measurement-health",
-              apiBaseUrl,
-              range,
-              custom,
-              compare,
-              onBrush: (start, end) => {
-                if (range !== "custom") setRangeBeforeBrush(range);
-                setCustom({ start, end });
-                setRange("custom");
+            role: "tabpanel",
+            id: `panel-${activePanel}`,
+            "aria-labelledby": `tab-${activePanel}`,
+            tabIndex: 0,
+            style: { position: "relative" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Stack, { space: 4, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { resetKey: `${activePanel}|${range}|${custom.start}|${custom.end}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              ReportPanel,
+              {
+                tabId: active?.id ?? "overview",
+                report: active?.report ?? "measurement-health",
+                apiBaseUrl,
+                range,
+                custom,
+                compare,
+                onBrush: (start, end) => {
+                  if (range !== "custom") setRangeBeforeBrush(range);
+                  setCustom({ start, end });
+                  setRange("custom");
+                }
               }
-            }
-          ) }) })
-        }
-      )
-    ] }) })
+            ) }) })
+          }
+        )
+      ] })
+    ] })
   );
 }