@liiift-studio/sanity-visitor-insights 0.50.0 → 0.51.0

package/dist/index.js

@@ -266,6 +266,30 @@ var SEND_WINDOW_DAYS = 3;
 // src/studio/Figure.tsx
 var import_react2 = __toESM(require("react"));
 var import_sanity_ui_compat = require("@liiift-studio/sanity-ui-compat");
+
+// src/studio/palette.ts
+var SERIES = {
+  /** The complete, server-side count. The reference every other line is read against. */
+  vercel: "#4C8FD0",
+  /** GA4's pageviews — the like-for-like counterpart to Vercel's. */
+  ga4Pageviews: "#DD6B3F",
+  /** GA4's sessions. Warm, like its sibling above: same instrument, different unit. */
+  ga4Sessions: "#BC861F",
+  /** Orders, from the foundry's own records. Exact. */
+  orders: "#2E9E6B",
+  /** Revenue, same source, different unit. */
+  revenue: "#BF5D9B"
+};
+var REGION_ALPHA = 0.18;
+function seriesFill(key, alpha = REGION_ALPHA) {
+  const hex = SERIES[key];
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// src/studio/Figure.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var REASON_TEXT = {
   not_instrumented: "Not tracked on this site",
@@ -524,7 +548,10 @@ 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 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: funnelGap, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: gapLabel(delta, measurement) }) }),
+      previous && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelGap, "aria-hidden": "true", children: [
+        measurement === "sequence" && delta > 0 && entry > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: lostTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...lostFill, width: `${Math.max(1, Math.min(1, delta / entry) * 100)}%` } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: gapLabel(delta, measurement) })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
@@ -564,9 +591,30 @@ var funnelList = { listStyle: "none", margin: 0, padding: 0 };
 var funnelItem = { display: "grid", gap: 4 };
 var funnelGap = {
   display: "flex",
+  alignItems: "center",
   justifyContent: "flex-end",
+  gap: 8,
   padding: "4px 2px"
 };
+var lostTrack = {
+  width: "38%",
+  maxWidth: 200,
+  height: 6,
+  borderRadius: 2,
+  overflow: "hidden",
+  background: "currentColor",
+  opacity: 0.1,
+  // Right to left: the bar grows back toward the funnel it came out of, which reads as leaving
+  // rather than as another quantity accumulating alongside.
+  display: "flex",
+  justifyContent: "flex-end"
+};
+var lostFill = {
+  height: "100%",
+  borderRadius: 2,
+  background: SERIES.ga4Pageviews,
+  opacity: 0.75
+};
 function funnelStage(active) {
   return {
     display: "grid",
@@ -581,10 +629,11 @@ function funnelStage(active) {
 var barFill = {
   height: "100%",
   borderRadius: 2,
-  // currentColor at an alpha that clears 3:1 against the card in both themes, so the mark works
-  // from one declaration rather than needing a palette.
-  background: "currentColor",
-  opacity: 0.55
+  // The reference blue, as everywhere else the tool draws "people who were here". Previously
+  // currentColor at 0.55, which made the funnel a stack of grey bars whose only variable was
+  // length — legible, and giving the eye nothing to hold on to across five rungs.
+  background: SERIES.vercel,
+  opacity: 0.85
 };
 var barTrack = {
   height: 8,
@@ -1026,30 +1075,6 @@ var import_sanity_ui_compat2 = require("@liiift-studio/sanity-ui-compat");
 var import_d3_scale = require("d3-scale");
 var import_d3_shape = require("d3-shape");
 var import_d3_array = require("d3-array");
-
-// src/studio/palette.ts
-var SERIES = {
-  /** The complete, server-side count. The reference every other line is read against. */
-  vercel: "#4C8FD0",
-  /** GA4's pageviews — the like-for-like counterpart to Vercel's. */
-  ga4Pageviews: "#DD6B3F",
-  /** GA4's sessions. Warm, like its sibling above: same instrument, different unit. */
-  ga4Sessions: "#BC861F",
-  /** Orders, from the foundry's own records. Exact. */
-  orders: "#2E9E6B",
-  /** Revenue, same source, different unit. */
-  revenue: "#BF5D9B"
-};
-var REGION_ALPHA = 0.18;
-function seriesFill(key, alpha = REGION_ALPHA) {
-  const hex = SERIES[key];
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-// src/studio/CrossSourceTimeline.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function colorFor(source, unit, explicit) {
   if (explicit) return explicit;