@liiift-studio/sanity-visitor-insights 0.73.0 → 0.75.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, c as MeasurementHealthData, D as DiagnosticReport, J as JourneyData, T as TypefaceInterestData } from './ranges-DhfuNtgW.mjs';
-export { C as CaptureBasis, d as CaptureEstimate, e as CaptureModel, f as CheckStatus, g as Coverage, h as CrossSourceDay, i as DateRange, j as DiagnosticCheck, E as EmailCampaign, k as EventCutover, l as JourneyOutcome, m as JourneySegment, 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-DhfuNtgW.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-DfjCK0XY.mjs';
+export { C as CaptureBasis, d as CaptureEstimate, e as CaptureModel, f as CheckStatus, g as Coverage, h as CrossSourceDay, i as DateRange, j as DiagnosticCheck, E as EmailCampaign, k as EventCutover, l as JourneyOutcome, m as JourneySegment, 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-DfjCK0XY.mjs';
 
 /**
  * Data hook for the Studio panels.
@@ -297,6 +297,23 @@ interface FunnelStage {
     partial?: {
         from: string;
     };
+    /**
+     * This rung split by audience segment, in a stable order across rungs.
+     *
+     * The bar's WIDTH is unchanged — still this rung's share of the entry step — and the split
+     * subdivides that width. So a segment collapsing reads as its portion shrinking down the column,
+     * against a total that stays honestly anchored to entry.
+     *
+     * This replaces a second chart. `SurvivalLines` drew the same segments as normalised shares on
+     * its own axis, above a funnel drawing the pooled counts: two pictures of one fact, and the
+     * share-only one could not print a count, which at rungs of 23 and 12 and 7 is the only fact
+     * that survives. Its denominator floor also silenced it at exactly those rungs.
+     */
+    segments?: ReadonlyArray<{
+        key: string;
+        label: string;
+        value: number;
+    }>;
 }
 /** Props for FunnelChart. */
 interface FunnelChartProps {

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-DhfuNtgW.js';
-export { C as CaptureBasis, d as CaptureEstimate, e as CaptureModel, f as CheckStatus, g as Coverage, h as CrossSourceDay, i as DateRange, j as DiagnosticCheck, E as EmailCampaign, k as EventCutover, l as JourneyOutcome, m as JourneySegment, 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-DhfuNtgW.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-DfjCK0XY.js';
+export { C as CaptureBasis, d as CaptureEstimate, e as CaptureModel, f as CheckStatus, g as Coverage, h as CrossSourceDay, i as DateRange, j as DiagnosticCheck, E as EmailCampaign, k as EventCutover, l as JourneyOutcome, m as JourneySegment, 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-DfjCK0XY.js';
 
 /**
  * Data hook for the Studio panels.
@@ -297,6 +297,23 @@ interface FunnelStage {
     partial?: {
         from: string;
     };
+    /**
+     * This rung split by audience segment, in a stable order across rungs.
+     *
+     * The bar's WIDTH is unchanged — still this rung's share of the entry step — and the split
+     * subdivides that width. So a segment collapsing reads as its portion shrinking down the column,
+     * against a total that stays honestly anchored to entry.
+     *
+     * This replaces a second chart. `SurvivalLines` drew the same segments as normalised shares on
+     * its own axis, above a funnel drawing the pooled counts: two pictures of one fact, and the
+     * share-only one could not print a count, which at rungs of 23 and 12 and 7 is the only fact
+     * that survives. Its denominator floor also silenced it at exactly those rungs.
+     */
+    segments?: ReadonlyArray<{
+        key: string;
+        label: string;
+        value: number;
+    }>;
 }
 /** Props for FunnelChart. */
 interface FunnelChartProps {

package/dist/index.js

@@ -279,10 +279,6 @@ var SERIES = {
   /** Revenue, same source, different unit. */
   revenue: "#BF5D9B"
 };
-var REGION_ALPHA = 0.18;
-function seriesFill(key, alpha = REGION_ALPHA) {
-  return withAlpha(SERIES[key], alpha);
-}
 function withAlpha(hex, alpha) {
   const r = parseInt(hex.slice(1, 3), 16);
   const g = parseInt(hex.slice(3, 5), 16);
@@ -304,21 +300,14 @@ var MARKS = {
   "chart.coverage": { key: "ga4Sessions", alpha: 1, role: "data", note: "Share one source saw of another" },
   "chart.stem": { key: "orders", alpha: 1, role: "data", note: "One day that had orders" },
   "chart.zeroTick": { key: "orders", alpha: 1, role: "data", note: "A day MEASURED at zero \u2014 the package's founding distinction" },
-  "chart.regionEdge": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The upper boundary of the shortfall region" },
-  "chart.region": {
-    key: "ga4Pageviews",
-    alpha: 0.22,
-    role: "fill",
-    boundary: "chart.regionEdge",
-    note: "What the lossier source missed. Light on purpose \u2014 the line it covers must stay readable"
-  },
+  // Renamed from `chart.regionEdge`. It was the boundary of a filled region; the region is gone —
+  // its width was the absolute gap, which under a flat coverage rate is the traffic curve scaled
+  // down, so it widened on busy days with no change in the instrument. This is now simply the
+  // lossier source's own line, which is what the collapse detector and the spoken summary read.
+  "chart.lossy": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The lossier source's own level, dashed beneath the complete one" },
   "chart.ghost": { key: "comparison", alpha: 1, role: "data", note: "The same window last period, behind everything" },
   "chart.grid": { key: "neutral", alpha: 0.18, role: "furniture", note: "Grid rules" },
   "bar.fill": { key: "vercel", alpha: 1, role: "data", note: "Every proportion, comparison and funnel bar" },
-  // The hatch on a rung whose count covers fewer days than the rail it sits in. A `data` mark, not
-  // furniture: it is the only thing on that rung saying the figure is not comparable, so it has to
-  // be as visible as a bar would have been.
-  "bar.partial": { key: "vercel", alpha: 1, role: "data", note: "A funnel rung measured over part of the window" },
   "bar.track": { key: "neutral", alpha: 0.12, role: "furniture", note: "The rail a bar sits in" },
   // Neither a source nor money. It was drawn in the REVENUE hue, so a magenta bar between funnel
   // rungs read as takings; GA4's hue was rejected for the opposite reason, since that hue means
@@ -329,9 +318,6 @@ var MARKS = {
   "estimate.dot": { key: "ga4Pageviews", alpha: 1, role: "data", note: "One independent estimate of how much GA4 sees" },
   "estimate.interval": { key: "ga4Pageviews", alpha: 0.35, role: "fill", boundary: "estimate.dot", note: "How wide the sample leaves that estimate \u2014 the dot is its own boundary" },
   "estimate.rule": { key: "neutral", alpha: 0.45, role: "furniture", note: "The 100% reference a capture rate is read against" },
-  "shift.now": { key: "vercel", alpha: 1, role: "data", note: "A channel this period" },
-  "shift.before": { key: "comparison", alpha: 1, role: "data", note: "The same channel last period \u2014 context, not a second answer" },
-  "shift.link": { key: "comparison", alpha: 0.55, role: "fill", boundary: "shift.before", note: "The distance between the two, which is the finding" },
   // A segment per colour rather than a dash pattern per segment. Dash was the ONLY channel
   // separating these lines, and it is the one channel `preserveAspectRatio="none"` distorted —
   // so two segments could be drawn identically on a wide pane. The keys are reused from the
@@ -673,6 +659,23 @@ function formatDay(iso) {
   if (Number.isNaN(date.getTime())) return iso;
   return `${date.getUTCDate()} ${date.toLocaleString("en-GB", { month: "short", timeZone: "UTC" })}`;
 }
+function segmentColour(index) {
+  const names = ["survival.line", "survival.line.2", "survival.line.3", "survival.line.4"];
+  return mark(names[index % names.length]);
+}
+function segmentKeys(stages) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const stage of stages) {
+    for (const segment of stage.segments ?? []) {
+      if (segment.value > 0 && !seen.has(segment.key)) seen.set(segment.key, segment.label);
+    }
+  }
+  return [...seen].map(([key, label]) => ({ key, label }));
+}
+function segmentShare(value, whole) {
+  if (!(whole > 0) || !(value > 0)) return 0;
+  return Math.min(1, value / whole);
+}
 function rateLine(stage, index, entry, share, entryLabel) {
   if (index === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "100% \u2014 everyone who arrived" });
   if (stage.partial) {
@@ -714,6 +717,8 @@ function FunnelChart({ stages, measurement }) {
       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 hasSplit = (stage.segments?.length ?? 0) > 0;
+      const remainder = hasSplit ? Math.max(0, 1 - (stage.segments ?? []).reduce((sum, s) => sum + segmentShare(s.value, stage.value), 0)) : 0;
       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" && delta > 0 && entry > 0), children: [
@@ -750,15 +755,34 @@ function FunnelChart({ stages, measurement }) {
                 /* @__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)("div", { "aria-hidden": "true", style: { ...barTrack, height: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              stage.partial ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: partialSlot }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: { ...barTrack, height: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 "div",
                 {
-                  style: stage.partial ? {
-                    height: "100%",
-                    width: "100%",
-                    borderRadius: 3,
-                    backgroundImage: `repeating-linear-gradient(135deg, ${mark("bar.partial")} 0 4px, transparent 4px 8px)`
-                  } : { ...barFill, width: `${width}%` }
+                  style: {
+                    ...barFill,
+                    width: `${width}%`,
+                    display: "flex",
+                    overflow: "hidden",
+                    // Transparent when split. Left as the ordinary fill, the parent's own
+                    // colour showed through wherever the segments did not reach — and on a
+                    // rung where they sum to 451 of 475 that painted the missing 24 in the
+                    // FIRST segment's colour, reading as a third segment of it.
+                    ...hasSplit ? { background: "transparent" } : {}
+                  },
+                  children: [
+                    (stage.segments ?? []).map((segment, segmentIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: `${segmentShare(segment.value, stage.value) * 100}%`,
+                          background: segmentColour(segmentIndex),
+                          height: "100%"
+                        }
+                      },
+                      segment.key
+                    )),
+                    hasSplit && remainder > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: `${remainder * 100}%`, background: mark("bar.track"), height: "100%" } })
+                  ]
                 }
               ) }),
               rateLine(stage, index, entry, share, stages[0]?.label ?? "")
@@ -767,10 +791,11 @@ function FunnelChart({ stages, measurement }) {
         )
       ] }, stage.key);
     }) }),
-    stages.some((stage) => stage.partial) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelKey, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: funnelKeySwatch }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "Striped: tracking started partway through this period, so the step covers fewer days than the ones above it and cannot be compared with them." })
-    ] }),
+    segmentKeys(stages).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: funnelSegmentKey, children: segmentKeys(stages).map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { ...hoverSwatch, background: segmentColour(index), display: "inline-block", marginRight: 6 } }),
+      segment.label
+    ] }, segment.key)) }),
+    stages.some((stage) => stage.partial) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "Steps with no bar were only tracked for part of this period, so they cover fewer days than the ones above and cannot be drawn against them. Their counts are exact for the days they do cover." }),
     withheldAny && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
       "Shares are shown only for steps at least ",
       MIN_RATE_DENOMINATOR,
@@ -787,15 +812,8 @@ function gapLabel(delta, measurement, entry = 0) {
   }
   return `${formatCount(-delta)} more \u2014 not a subset of the step above`;
 }
-var funnelKey = { display: "flex", alignItems: "center", gap: 8, paddingTop: 4 };
-var funnelKeySwatch = {
-  display: "inline-block",
-  width: 24,
-  height: 10,
-  flex: "0 0 auto",
-  borderRadius: 3,
-  backgroundImage: `repeating-linear-gradient(135deg, ${mark("bar.partial")} 0 4px, transparent 4px 8px)`
-};
+var partialSlot = { height: 10 };
+var funnelSegmentKey = { display: "flex", gap: 14, flexWrap: "wrap", paddingTop: 4 };
 var funnelList = { listStyle: "none", margin: 0, padding: 0 };
 var funnelItem = { display: "grid", gap: 4 };
 function funnelGapStyle(hasBar) {
@@ -1013,177 +1031,14 @@ function EstimateDotPlot({
           " of ",
           formatCount(estimate.actual),
           wide && " \u2014 too small a sample to lean on",
+          estimate.note && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: estimateNote, children: estimate.note }),
           estimate.rate > 1.05 && " \u2014 over 100%, so GA4 is counting more than the source it is checked against. That is usually a tag firing twice, not extra traffic."
         ] })
       ] }, estimate.basis);
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "Each is a separate way of asking the same question. Where they disagree, the spread is the answer\u2019s uncertainty \u2014 the rule marks 100%." })
-  ] });
-}
-function SurvivalLines({
-  segments,
-  stepLabels,
-  partialSteps = [],
-  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;
-  const x = (i) => i / (stepLabels.length - 1) * width;
-  const drawn = segments.map((segment, index) => {
-    const entry = segment.values[0];
-    if (entry === null || entry === void 0 || entry <= 0) return null;
-    const points = [];
-    const shares = [];
-    for (let i = 0; i < segment.values.length && i < stepLabels.length; i++) {
-      const value = segment.values[i];
-      const previous = i === 0 ? entry : segment.values[i - 1];
-      if (value === null || value === void 0) break;
-      if (i > 0 && (previous === null || previous === void 0 || previous < minDenominator)) break;
-      if (partialSteps.includes(i)) break;
-      const share = Math.min(1, value / entry);
-      points.push([x(i), height - share * height]);
-      shares.push(share);
-    }
-    if (points.length < 2) return null;
-    return { segment, index, points, shares, colour: segmentColour(index) };
-  });
-  const lines = drawn.filter((d) => d !== null);
-  if (lines.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 3, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: survivalFrame, children: [
-      [1, 0.5, 0].map((level) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: survivalYLabel(level), children: level === 1 ? "100%" : level === 0.5 ? "50%" : "0%" }, level)),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "svg",
-        {
-          viewBox: `0 0 ${width} ${height}`,
-          preserveAspectRatio: "none",
-          style: { width: "100%", height: 150, overflow: "visible" },
-          role: "img",
-          "aria-label": survivalSummary(lines, stepLabels),
-          children: [
-            [1, 0.5, 0].map((level) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "line",
-              {
-                x1: 0,
-                x2: width,
-                y1: height * (1 - level),
-                y2: height * (1 - level),
-                stroke: mark("survival.grid"),
-                strokeWidth: 0.6,
-                vectorEffect: "non-scaling-stroke"
-              },
-              level
-            )),
-            stepLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "rect",
-              {
-                x: i === 0 ? 0 : x(i) - width / (stepLabels.length - 1) / 2,
-                y: 0,
-                width: width / (stepLabels.length - 1) / (i === 0 || i === stepLabels.length - 1 ? 2 : 1),
-                height,
-                fill: "transparent",
-                onMouseEnter: () => {
-                  setSteppedByKey(false);
-                  setActive(i);
-                },
-                onMouseLeave: () => setActive(null)
-              },
-              label
-            )),
-            active !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "line",
-              {
-                x1: x(active),
-                x2: x(active),
-                y1: 0,
-                y2: height,
-                stroke: mark("survival.grid"),
-                strokeWidth: 1
-              }
-            ),
-            lines.map(({ segment, points, colour }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "polyline",
-              {
-                points: points.map(([px, py]) => `${px},${py}`).join(" "),
-                fill: "none",
-                stroke: colour,
-                strokeWidth: 1.6,
-                vectorEffect: "non-scaling-stroke",
-                strokeLinejoin: "round"
-              },
-              segment.key
-            )),
-            active !== null && lines.map(({ segment, points, colour }) => {
-              const point = points[active];
-              if (!point) return null;
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "line",
-                {
-                  x1: point[0],
-                  x2: point[0],
-                  y1: point[1],
-                  y2: point[1],
-                  stroke: colour,
-                  strokeWidth: 6,
-                  strokeLinecap: "round",
-                  vectorEffect: "non-scaling-stroke"
-                },
-                segment.key
-              );
-            })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: survivalAxis, children: stepLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        type: "button",
-        style: survivalTick(i === active, i, stepLabels.length),
-        "aria-label": `Read ${label}`,
-        onMouseEnter: () => {
-          setSteppedByKey(false);
-          setActive(i);
-        },
-        onMouseLeave: () => setActive(null),
-        onFocus: () => {
-          setSteppedByKey(true);
-          setActive(i);
-        },
-        onBlur: () => setActive(null),
-        children: label
-      },
-      label
-    )) }),
-    /* @__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 } }),
-        segment.label,
-        active !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: survivalReadoutValue, children: [
-          "\xA0",
-          share === null || share === void 0 ? "not measured here" : formatPercent(share, 0)
-        ] })
-      ] }, segment.key);
-    }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "The rule marks 100%." })
   ] });
 }
-function segmentColour(index) {
-  const names = ["survival.line", "survival.line.2", "survival.line.3", "survival.line.4"];
-  return mark(names[index % names.length]);
-}
-function survivalSummary(lines, stepLabels) {
-  const parts = lines.map(({ segment, shares }) => {
-    const last = shares.length - 1;
-    const share = shares[last];
-    const reached = stepLabels[last] ?? "the last measured step";
-    return share === null || share === void 0 ? `${segment.label} could not be followed past ${reached}` : `${segment.label} ${formatPercent(share, 0)} by ${reached}`;
-  });
-  return `Share of each segment still present at each step, starting from ${stepLabels[0]}. ${parts.join(". ")}.`;
-}
 function RatioFigure({
   value,
   format,
@@ -1435,6 +1290,7 @@ var estimateTrack = {
   borderRadius: 2,
   background: mark("bar.track")
 };
+var estimateNote = { display: "block", marginTop: 2, opacity: 0.85 };
 var estimateRule = {
   position: "absolute",
   top: 0,
@@ -1458,82 +1314,6 @@ var estimateDot = {
   borderRadius: "50%",
   background: mark("estimate.dot")
 };
-var shiftTrack = {
-  position: "relative",
-  height: 16,
-  borderRadius: 2,
-  background: mark("bar.track")
-};
-var shiftLink = {
-  position: "absolute",
-  top: 7,
-  height: 2,
-  background: mark("shift.link")
-};
-var shiftBefore = {
-  position: "absolute",
-  top: 3,
-  width: 10,
-  height: 10,
-  marginLeft: -5,
-  borderRadius: "50%",
-  border: `2px solid ${mark("shift.before")}`,
-  background: "transparent"
-};
-var shiftNow = {
-  position: "absolute",
-  top: 3,
-  width: 10,
-  height: 10,
-  marginLeft: -5,
-  borderRadius: "50%",
-  background: mark("shift.now")
-};
-var survivalLegend = { display: "flex", gap: 14, flexWrap: "wrap" };
-var survivalFrame = { paddingLeft: 34, position: "relative" };
-var survivalAxis = {
-  position: "relative",
-  // Reserves the row's height, since the ticks inside it are positioned.
-  height: 30,
-  marginLeft: 34
-};
-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",
-    borderTop: `2px solid ${activeTick ? "currentColor" : "transparent"}`,
-    color: "inherit",
-    opacity: activeTick ? 1 : 0.7,
-    font: "inherit",
-    fontSize: "0.72em",
-    fontWeight: activeTick ? 600 : 400,
-    padding: "6px 4px",
-    minHeight: 24,
-    cursor: "pointer",
-    whiteSpace: "nowrap"
-  };
-}
-function survivalYLabel(level) {
-  return {
-    position: "absolute",
-    left: 0,
-    // 150 is the plot's rendered height; the label is nudged up by half its own line so it sits
-    // on the rule rather than under it.
-    top: 150 * (1 - level) - 6,
-    width: 28,
-    textAlign: "right",
-    fontSize: 10,
-    opacity: 0.7,
-    fontVariantNumeric: "tabular-nums"
-  };
-}
-var survivalReadoutValue = { fontVariantNumeric: "tabular-nums" };
 var ratioRow = {
   display: "flex",
   alignItems: "baseline",
@@ -2008,8 +1788,6 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               const defined = (p) => p.value !== null;
               const lineGen = (0, import_d3_shape.line)().defined(defined).x(at).y((p) => y(p.value)).curve(import_d3_shape.curveLinear);
               const shortfallPoints = row.shortfall?.points ?? [];
-              const byDate = new Map(shortfallPoints.map((p) => [p.date, p.value]));
-              const gapGen = (0, import_d3_shape.area)().defined((p) => p.value !== null && byDate.get(p.date) != null).x(at).y0((p) => y(byDate.get(p.date))).y1((p) => y(p.value)).curve(import_d3_shape.curveLinear);
               const path = row.mark === "events" ? "" : lineGen(row.points) ?? "";
               const ghost = row.comparison && row.comparison.length > 1 ? lineGen(row.comparison.slice(0, dates.length).map((point, i) => ({
                 date: dates[i] ?? point.date,
@@ -2019,7 +1797,6 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               const stemWidth = Math.max(1, Math.min(9, pitch > 2 ? pitch - 1 : pitch));
               const stems = row.mark === "events" ? row.points.filter((p) => p.value !== null && p.value !== 0) : [];
               const zeroes = row.mark === "events" && pitch >= 6 ? row.points.filter((p) => p.value === 0) : [];
-              const gap = row.shortfall ? gapGen(row.points) ?? "" : "";
               const shortfallLine = row.shortfall ? lineGen(shortfallPoints) ?? "" : "";
               const clipId = `${instanceId}-row-${rowIndex}`;
               return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
@@ -2044,20 +1821,12 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                       strokeDasharray: "2 3"
                     }
                   ),
-                  gap && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "path",
-                    {
-                      d: gap,
-                      fill: shortfallStroke ? seriesFill(colorFor(row.shortfall.source, row.unit, row.shortfall.color), MARKS["chart.region"].alpha) : "currentColor",
-                      opacity: shortfallStroke ? 1 : 0.48
-                    }
-                  ),
                   shortfallLine && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "path",
                     {
                       d: shortfallLine,
                       fill: "none",
-                      stroke: mark("chart.regionEdge"),
+                      stroke: mark("chart.lossy"),
                       strokeWidth: 1.5,
                       strokeDasharray: "6 4"
                     }
@@ -2229,22 +1998,13 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       ] }, m.label))
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: legendRow, children: [
-      series.some((row) => row.shortfall) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          LegendKey,
-          {
-            swatch: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: legendDash(shortfallColour(series)) }),
-            label: `${shortfallLabel(series)} \u2014 the dashed line`
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          LegendKey,
-          {
-            swatch: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: legendBlock(seriesFill(shortfallKey(series), MARKS["chart.region"].alpha), shortfallColour(series)) }),
-            label: "Shaded: what your analytics did not see"
-          }
-        )
-      ] }),
+      series.some((row) => row.shortfall) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        LegendKey,
+        {
+          swatch: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: legendDash(shortfallColour(series)) }),
+          label: `${shortfallLabel(series)} \u2014 the dashed line`
+        }
+      ) }),
       series.some((row) => (row.comparison?.length ?? 0) > 1) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         LegendKey,
         {
@@ -2281,15 +2041,6 @@ function legendDash(colour) {
     borderTop: `2px dashed ${colour}`
   };
 }
-function legendBlock(fill, edge) {
-  return {
-    display: "inline-block",
-    width: 18,
-    height: 10,
-    background: fill,
-    borderTop: `1.5px dashed ${edge}`
-  };
-}
 var legendMarker = {
   display: "inline-block",
   position: "relative",
@@ -2383,9 +2134,6 @@ function metricOr(metric, detail) {
   return { status: "unavailable", reason: "route_outdated", detail };
 }
 var OLDER_ROUTE = "This site\u2019s analytics route is older than this figure \u2014 it will appear after the site is next deployed.";
-function maxOf(metrics) {
-  return metrics.reduce((max, metric) => !metric || metric.status === "unavailable" ? max : Math.max(max, metric.value), 0);
-}
 function finiteOrNull(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
@@ -2847,7 +2595,6 @@ function Verdict({ data, previous }) {
   );
 }
 function DataHealthPanel({ data, diagnostics }) {
-  const pageviewMax = maxOf([data.ga4Pageviews, data.vercelPageviews]);
   const contained = isContainment(data.vercelPageviews, data.ga4Pageviews);
   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.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
@@ -3227,33 +2974,25 @@ function JourneyPanel({ data }) {
       label: step.label,
       value: step.count.value,
       conversionFromPrevious: step.conversionFromPrevious,
+      // The device split, subdividing this rung's bar rather than drawn as a second chart.
+      // Only counts that are present and whole travel: a segment GA4 stopped reporting is
+      // left out of the split rather than drawn as a shrunken share of one.
+      ...segments.length > 0 ? {
+        segments: segments.flatMap((segment) => {
+          const cell = segment.steps.find((s) => s.key === step.key);
+          const value = cell ? metricSortValue(cell.count) : null;
+          return value === null ? [] : [{ key: segment.key, label: segment.label, value }];
+        })
+      } : {},
       ...step.count.status === "partial" && step.count.coveredFrom ? { partial: { from: formatDay(step.count.coveredFrom) } } : {}
     }]
   );
-  const wholeSpine = spine.filter((step) => {
-    const cell = allSteps.find((s) => s.key === step.key);
-    return cell?.count.status !== "partial";
-  });
   const tracked = data.measurement === "sequence";
   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.Card, { padding: 3, radius: 2, tone: tracked ? "transparent" : "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "medium", children: tracked ? "Tracked path" : "Not a tracked path" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: tracked, children: data.approximationNote })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      SurvivalLines,
-      {
-        segments: segments.map((segment) => ({
-          key: segment.key,
-          label: segment.label,
-          values: wholeSpine.map((step) => {
-            const cell = segment.steps.find((s) => s.key === step.key);
-            return cell ? metricSortValue(cell.count) : null;
-          })
-        })),
-        stepLabels: wholeSpine.map((step) => step.label)
-      }
-    ),
     segments.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ChartData,
       {
@@ -3465,6 +3204,8 @@ function TypefaceInterestPanel({ data }) {
             },
             {
               key: "bought",
+              // Never folded. Zero sales is the finding, not an empty column.
+              alwaysShow: true,
               label: "Bought (orders)",
               numeric: true,
               sortValue: (row) => metricSortValue(row.bought),
@@ -3472,6 +3213,8 @@ function TypefaceInterestPanel({ data }) {
             },
             {
               key: "revenue",
+              // Same reason as Bought: an exact zero from the order book is a measurement.
+              alwaysShow: true,
               label: "Revenue (orders)",
               numeric: true,
               sortValue: (row) => metricSortValue(row.revenue),