@liiift-studio/sanity-visitor-insights 0.1.0

package/dist/index.js

@@ -0,0 +1,652 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ComparisonBar: () => ComparisonBar,
+  MetricFigure: () => MetricFigure,
+  NoticeList: () => NoticeList,
+  PREEXISTING: () => PREEXISTING,
+  REPORT_NAMES: () => REPORT_NAMES,
+  VisitorInsightsTool: () => VisitorInsightsTool,
+  coverageForRange: () => coverageForRange,
+  default: () => index_default,
+  formatCount: () => formatCount,
+  formatPercent: () => formatPercent,
+  isReportName: () => isReportName,
+  ok: () => ok,
+  partial: () => partial,
+  previousRange: () => previousRange,
+  resolveRange: () => resolveRange,
+  unavailable: () => unavailable,
+  useReport: () => useReport,
+  validateSiteConfig: () => validateSiteConfig,
+  valueOrNull: () => valueOrNull,
+  visitorInsights: () => visitorInsights
+});
+module.exports = __toCommonJS(index_exports);
+var import_sanity2 = require("sanity");
+var import_icons = require("@liiift-studio/sanity-ui-compat/icons");
+
+// src/studio/VisitorInsightsTool.tsx
+var import_react2 = require("react");
+var import_sanity_ui_compat3 = require("@liiift-studio/sanity-ui-compat");
+
+// src/studio/useReport.ts
+var import_react = require("react");
+var import_sanity = require("sanity");
+var API_VERSION = "2024-03-01";
+function useReport({ apiBaseUrl, report, range }) {
+  const client = (0, import_sanity.useClient)({ apiVersion: API_VERSION });
+  const [state, setState] = (0, import_react.useState)({ status: "idle" });
+  const [nonce, setNonce] = (0, import_react.useState)(0);
+  const requestIdRef = (0, import_react.useRef)(0);
+  const reload = (0, import_react.useCallback)(() => setNonce((n) => n + 1), []);
+  (0, import_react.useEffect)(() => {
+    const requestId = requestIdRef.current + 1;
+    requestIdRef.current = requestId;
+    const controller = new AbortController();
+    setState({ status: "loading" });
+    async function run() {
+      const token = client.config().token;
+      if (!token) {
+        setState({
+          status: "error",
+          message: "No Sanity session token available in this Studio. Visitor Insights needs token-based auth to call the site API."
+        });
+        return;
+      }
+      try {
+        const url = `${apiBaseUrl.replace(/\/$/, "")}/api/visitor-insights/${report}?range=${range}`;
+        const response = await fetch(url, {
+          headers: { Authorization: `Bearer ${token}` },
+          signal: controller.signal
+        });
+        if (requestIdRef.current !== requestId) return;
+        if (!response.ok) {
+          const detail = response.status === 401 ? "Not authorised \u2014 sign in to the Studio again." : `Request failed (${response.status})`;
+          setState({ status: "error", message: detail });
+          return;
+        }
+        const envelope = await response.json();
+        if (requestIdRef.current !== requestId) return;
+        setState({ status: "ready", envelope });
+      } catch (e) {
+        if (controller.signal.aborted || requestIdRef.current !== requestId) return;
+        setState({ status: "error", message: e.message });
+      }
+    }
+    void run();
+    return () => controller.abort();
+  }, [client, apiBaseUrl, report, range, nonce]);
+  return { state, reload };
+}
+
+// src/studio/Figure.tsx
+var import_sanity_ui_compat = require("@liiift-studio/sanity-ui-compat");
+var import_jsx_runtime = require("react/jsx-runtime");
+var REASON_TEXT = {
+  not_instrumented: "Not tracked on this site",
+  before_cutover: "Not tracked during this period",
+  suppressed: "Withheld by GA4 for privacy",
+  source_error: "Source did not respond",
+  not_applicable: "Does not apply to this site"
+};
+function formatCount(value) {
+  return new Intl.NumberFormat("en-GB").format(Math.round(value));
+}
+function formatPercent(ratio, digits = 0) {
+  return `${(ratio * 100).toFixed(digits)}%`;
+}
+function MetricFigure({ metric, label, size = 4 }) {
+  if (metric.status === "unavailable") {
+    const reason = REASON_TEXT[metric.reason];
+    const detail = metric.detail ? `${reason}. ${metric.detail}` : reason;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Box, { padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: detail }) }), portal: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, muted: true, "aria-label": `${label}: unavailable. ${detail}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2014" }) }) });
+  }
+  const formatted = formatCount(metric.value);
+  if (metric.status === "partial") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, "aria-label": `${label}: ${formatted}, partial. ${metric.note}`, children: formatted }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Badge, { tone: "caution", fontSize: 0, children: "Partial" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, "aria-label": `${label}: ${formatted}`, children: formatted });
+}
+function ComparisonBar({ label, metric, max, tone = "default" }) {
+  const value = metric.status === "unavailable" ? null : metric.value;
+  const width = value !== null && max > 0 ? Math.max(2, value / max * 100) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Flex, { align: "center", justify: "space-between", gap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "medium", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricFigure, { metric, label, size: 1 })
+    ] }),
+    value === null ? (
+      // A dashed rail, not a zero-width bar: absence must not read as a measured zero.
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_sanity_ui_compat.Box,
+        {
+          "aria-hidden": "true",
+          style: {
+            height: 8,
+            borderRadius: 4,
+            border: "1px dashed var(--card-border-color)"
+          }
+        }
+      )
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_sanity_ui_compat.Box,
+      {
+        "aria-hidden": "true",
+        style: {
+          height: 8,
+          borderRadius: 4,
+          background: "var(--card-border-color)",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_sanity_ui_compat.Box,
+          {
+            style: {
+              width: `${width}%`,
+              height: "100%",
+              background: tone === "primary" ? "var(--card-focus-ring-color)" : tone === "positive" ? "var(--card-badge-positive-dot-color, var(--card-focus-ring-color))" : tone === "caution" ? "var(--card-badge-caution-dot-color, var(--card-muted-fg-color))" : "var(--card-muted-fg-color)"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function NoticeList({ notices }) {
+  if (notices.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 8 }, children: notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Flex, { gap: 2, align: "flex-start", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, muted: true, "aria-hidden": "true", children: "\u26A0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, muted: true, children: notice })
+  ] }) }, notice)) });
+}
+
+// src/studio/panels.tsx
+var import_sanity_ui_compat2 = require("@liiift-studio/sanity-ui-compat");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function maxOf(metrics) {
+  return metrics.reduce((max, metric) => metric.status === "unavailable" ? max : Math.max(max, metric.value), 0);
+}
+var tableWrap = { overflowX: "auto", width: "100%" };
+var table = { width: "100%", borderCollapse: "collapse", minWidth: 420 };
+var cell = { padding: "8px 12px", textAlign: "left", borderBottom: "1px solid var(--card-border-color)" };
+var numericCell = { ...cell, textAlign: "right" };
+function MeasurementHealthPanel({ data }) {
+  const pageviewMax = maxOf([data.ga4Pageviews, data.vercelPageviews]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Pageviews, source against source" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "The same unit on both sides. Vercel is cookieless and ungated; GA4 is consent-gated and blockable, so GA4 seeing fewer is expected." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax, tone: "primary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax, tone: "default" })
+    ] }),
+    data.shortfallRatio !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: [
+        "GA4 shortfall: ",
+        formatPercent(Math.abs(data.shortfallRatio), 1)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: data.interpretation })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Context" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Different units to the figures above, and to each other. Shown for scale, never differenced." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Flex, { gap: 4, wrap: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "GA4 sessions" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: data.ga4Sessions, label: "GA4 sessions" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Orders" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: data.orders, label: "Orders" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Consent granted" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: data.consentRate, label: "Consent granted, percent of sessions" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function AcquisitionPanel({ data }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Flex, { gap: 4, wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Sessions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 4, children: formatCount(data.totalSessions) })
+      ] }),
+      data.designIndustryShare !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "From design-industry referrers" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 4, children: formatPercent(data.designIndustryShare, 1) })
+      ] }),
+      data.unattributedShare !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Unattributed" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 4, children: formatPercent(data.unattributedShare, 1) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Box, { style: tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("caption", { style: { textAlign: "left", paddingBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Traffic sources by sessions" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Source" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Channel" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Sessions" }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: data.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "row", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Flex, { gap: 2, align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: row.source }),
+          row.designIndustry && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "\xB7 design industry" }),
+          row.unattributed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "\xB7 unattributed" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: row.channel }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: formatCount(row.sessions) }) })
+      ] }, `${row.source}-${row.channel}`)) })
+    ] }) }),
+    data.rowsWithheld && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoticeList, { notices: ["GA4 withheld some low-traffic rows for privacy, so this list is shorter than reality."] })
+  ] });
+}
+function JourneyPanel({ data }) {
+  const max = maxOf(data.steps.map((step) => step.count));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: data.approximationNote }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Stack, { space: 3, children: data.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonBar, { label: step.label, metric: step.count, max, tone: "primary" }),
+      step.conversionFromPrevious !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: [
+        formatPercent(step.conversionFromPrevious, 1),
+        " of the previous measurable step"
+      ] })
+    ] }, step.key)) }),
+    data.topExitPages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Where sessions ended" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Box, { style: tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Page" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Exits" }) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: data.topExitPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "row", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: page.path }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: formatCount(page.exits) }) })
+        ] }, page.path)) })
+      ] }) })
+    ] })
+  ] });
+}
+function TypefaceInterestPanel({ data }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: data.interpretationNote }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Box, { style: tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("caption", { style: { textAlign: "left", paddingBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Engagement by typeface" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Typeface" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Viewed" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Tested" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Bought" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: "Test rate" }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: data.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "row", style: cell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, children: row.typeface }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.viewed, label: `${row.typeface} viewed`, size: 1 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.tested, label: `${row.typeface} tested`, size: 1 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: row.bought, label: `${row.typeface} bought`, size: 1 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: numericCell, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: row.testRate === null ? "\u2014" : formatPercent(row.testRate, 1) }) })
+      ] }, row.typeface)) })
+    ] }) })
+  ] });
+}
+
+// src/studio/VisitorInsightsTool.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RANGES = [
+  { key: "week", label: "Week" },
+  { key: "quarter", label: "Quarter" },
+  { key: "year", label: "Year" }
+];
+var PANELS = [
+  { report: "measurement-health", label: "Measurement health", blurb: "How much of reality each source actually sees" },
+  { report: "acquisition", label: "Acquisition", blurb: "Where visitors come from" },
+  { report: "journey", label: "Journey", blurb: "How far visitors get, and where they stop" },
+  { report: "typeface-interest", label: "Typeface interest", blurb: "Viewed, tested and bought, by family" }
+];
+function RangeSelector({ value, onChange }) {
+  const refs = (0, import_react2.useRef)([]);
+  const onKeyDown = (0, import_react2.useCallback)(
+    (event) => {
+      const currentIndex = RANGES.findIndex((r) => r.key === value);
+      let nextIndex = null;
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") nextIndex = (currentIndex + 1) % RANGES.length;
+      if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = (currentIndex - 1 + RANGES.length) % RANGES.length;
+      if (event.key === "Home") nextIndex = 0;
+      if (event.key === "End") nextIndex = RANGES.length - 1;
+      if (nextIndex === null) return;
+      event.preventDefault();
+      const next = RANGES[nextIndex];
+      if (!next) return;
+      onChange(next.key);
+      refs.current[nextIndex]?.focus();
+    },
+    [value, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Flex, { role: "radiogroup", "aria-label": "Date range", gap: 1, onKeyDown, children: RANGES.map((range, index) => {
+    const selected = range.key === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_sanity_ui_compat3.Button,
+      {
+        ref: (el) => {
+          refs.current[index] = el;
+        },
+        role: "radio",
+        "aria-checked": selected,
+        tabIndex: selected ? 0 : -1,
+        mode: selected ? "default" : "bleed",
+        tone: selected ? "primary" : "default",
+        text: range.label,
+        onClick: () => onChange(range.key),
+        fontSize: 1,
+        padding: 3
+      },
+      range.key
+    );
+  }) });
+}
+function PanelTabs({ value, onChange }) {
+  const refs = (0, import_react2.useRef)([]);
+  const onKeyDown = (0, import_react2.useCallback)(
+    (event) => {
+      const currentIndex = PANELS.findIndex((p) => p.report === value);
+      let nextIndex = null;
+      if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % PANELS.length;
+      if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + PANELS.length) % PANELS.length;
+      if (event.key === "Home") nextIndex = 0;
+      if (event.key === "End") nextIndex = PANELS.length - 1;
+      if (nextIndex === null) return;
+      event.preventDefault();
+      const next = PANELS[nextIndex];
+      if (!next) return;
+      onChange(next.report);
+      refs.current[nextIndex]?.focus();
+    },
+    [value, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Flex, { role: "tablist", "aria-label": "Report", gap: 1, wrap: "wrap", onKeyDown, children: PANELS.map((panel, index) => {
+    const selected = panel.report === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_sanity_ui_compat3.Button,
+      {
+        ref: (el) => {
+          refs.current[index] = el;
+        },
+        id: `tab-${panel.report}`,
+        role: "tab",
+        "aria-selected": selected,
+        "aria-controls": `panel-${panel.report}`,
+        tabIndex: selected ? 0 : -1,
+        mode: selected ? "default" : "bleed",
+        tone: selected ? "primary" : "default",
+        text: panel.label,
+        onClick: () => onChange(panel.report),
+        fontSize: 1,
+        padding: 3
+      },
+      panel.report
+    );
+  }) });
+}
+function ReportPanel({ report, apiBaseUrl, range }) {
+  const { state, reload } = useReport({ apiBaseUrl, report, range });
+  const liveMessage = state.status === "loading" ? "Loading report" : state.status === "ready" ? `${report} updated for the selected ${range}` : state.status === "error" ? `Report failed: ${state.message}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Box, { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: liveMessage }),
+    state.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Flex, { align: "center", gap: 3, padding: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Spinner, { muted: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Loading\u2026" })
+    ] }),
+    state.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 4, radius: 2, tone: "critical", 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.Text, { size: 1, children: state.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Button, { text: "Try again", mode: "ghost", fontSize: 1, onClick: reload }) })
+    ] }) }),
+    state.status === "ready" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NoticeList, { notices: state.envelope.notices }),
+      report === "measurement-health" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MeasurementHealthPanel, { data: state.envelope.data }),
+      report === "acquisition" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AcquisitionPanel, { data: state.envelope.data }),
+      report === "journey" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(JourneyPanel, { data: state.envelope.data }),
+      report === "typeface-interest" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TypefaceInterestPanel, { data: state.envelope.data }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
+        state.envelope.range.start,
+        " to ",
+        state.envelope.range.end,
+        " (",
+        state.envelope.range.timezone,
+        ")"
+      ] })
+    ] })
+  ] });
+}
+function VisitorInsightsTool({ apiBaseUrl, siteLabel }) {
+  const [range, setRange] = (0, import_react2.useState)("week");
+  const [activePanel, setActivePanel] = (0, import_react2.useState)("measurement-health");
+  const active = PANELS.find((p) => p.report === activePanel) ?? PANELS[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Container, { width: 4, padding: 4, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 5, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Flex, { align: "flex-start", justify: "space-between", gap: 4, wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 2, children: "Visitor insights" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: siteLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RangeSelector, { value: range, onChange: setRange })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelTabs, { value: activePanel, onChange: setActivePanel }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_sanity_ui_compat3.Box,
+      {
+        role: "tabpanel",
+        id: `panel-${activePanel}`,
+        "aria-labelledby": `tab-${activePanel}`,
+        tabIndex: 0,
+        style: { position: "relative" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
+          active && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: active.blurb }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReportPanel, { report: activePanel, apiBaseUrl, range })
+        ] })
+      }
+    )
+  ] }) });
+}
+
+// src/types.ts
+function ok(value) {
+  return { status: "ok", value };
+}
+function unavailable(reason, detail) {
+  return { status: "unavailable", reason, detail };
+}
+function partial(value, coveredFrom, note) {
+  return { status: "partial", value, coveredFrom, note };
+}
+function valueOrNull(metric) {
+  return metric.status === "unavailable" ? null : metric.value;
+}
+var REPORT_NAMES = [
+  "measurement-health",
+  "acquisition",
+  "journey",
+  "typeface-interest"
+];
+function isReportName(value) {
+  return typeof value === "string" && REPORT_NAMES.includes(value);
+}
+
+// src/core/cutover.ts
+var PREEXISTING = "preexisting";
+function coverageForRange(cutovers, eventName, range) {
+  if (!(eventName in cutovers)) return { status: "none", reason: "unknown_event" };
+  const cutover = cutovers[eventName];
+  if (cutover === null || cutover === void 0) return { status: "none", reason: "not_instrumented" };
+  if (cutover === PREEXISTING) return { status: "full" };
+  const cutoverTime = Date.parse(cutover);
+  if (Number.isNaN(cutoverTime)) return { status: "none", reason: "unknown_event" };
+  if (Date.parse(range.end) < cutoverTime) return { status: "none", reason: "before_cutover", cutover };
+  if (Date.parse(range.start) < cutoverTime) return { status: "partial", cutover };
+  return { status: "full" };
+}
+
+// src/core/siteConfig.ts
+function validateSiteConfig(config) {
+  const problems = [];
+  if (!config) {
+    return [{ field: "config", message: "No site config supplied" }];
+  }
+  if (!config.siteId) problems.push({ field: "siteId", message: "Required" });
+  if (!config.label) problems.push({ field: "label", message: "Required" });
+  if (config.ga4) {
+    const { propertyId, timezone } = config.ga4;
+    if (!propertyId) {
+      problems.push({ field: "ga4.propertyId", message: "Required when ga4 is configured" });
+    } else if (propertyId.startsWith("G-")) {
+      problems.push({
+        field: "ga4.propertyId",
+        message: `Looks like a measurement id ("${propertyId}"). The Data API needs the numeric property id from GA4 Admin instead.`
+      });
+    } else if (!/^\d+$/.test(propertyId)) {
+      problems.push({ field: "ga4.propertyId", message: "Must be the numeric GA4 property id" });
+    }
+    if (!timezone) {
+      problems.push({ field: "ga4.timezone", message: "Required \u2014 ranges are anchored to it" });
+    } else if (!isValidTimeZone(timezone)) {
+      problems.push({ field: "ga4.timezone", message: `Not a recognised IANA timezone: ${timezone}` });
+    }
+  }
+  if (config.vercel && !config.vercel.projectId) {
+    problems.push({ field: "vercel.projectId", message: "Required when vercel is configured" });
+  }
+  if (!config.orders?.documentType) {
+    problems.push({ field: "orders.documentType", message: "Required" });
+  }
+  if (!config.eventCutovers) {
+    problems.push({ field: "eventCutovers", message: "Required \u2014 omit events the site does not have" });
+  }
+  for (const origin of config.allowedStudioOrigins ?? []) {
+    if (!/^https?:\/\//.test(origin)) {
+      problems.push({ field: "allowedStudioOrigins", message: `Must be a full origin including scheme: ${origin}` });
+    }
+    if (origin.endsWith("/")) {
+      problems.push({ field: "allowedStudioOrigins", message: `Must not have a trailing slash: ${origin}` });
+    }
+  }
+  return problems;
+}
+function isValidTimeZone(timeZone) {
+  try {
+    new Intl.DateTimeFormat("en-CA", { timeZone });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// 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,
+  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) => {
+  const { apiBaseUrl, siteLabel, name = "visitor-insights", title = "Insights", roles } = options;
+  return {
+    name: "@liiift-studio/sanity-visitor-insights",
+    tools: (prev, { currentUser }) => {
+      if (roles && roles.length > 0) {
+        const userRoles = currentUser?.roles?.map((role) => role.name) ?? [];
+        const permitted = userRoles.some((role) => roles.includes(role));
+        if (!permitted) return prev;
+      }
+      return [
+        ...prev,
+        {
+          name,
+          title,
+          icon: ChartIcon,
+          component: VisitorInsightsTool,
+          options: { apiBaseUrl, siteLabel }
+        }
+      ];
+    }
+  };
+});
+var index_default = visitorInsights;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ComparisonBar,
+  MetricFigure,
+  NoticeList,
+  PREEXISTING,
+  REPORT_NAMES,
+  VisitorInsightsTool,
+  coverageForRange,
+  formatCount,
+  formatPercent,
+  isReportName,
+  ok,
+  partial,
+  previousRange,
+  resolveRange,
+  unavailable,
+  useReport,
+  validateSiteConfig,
+  valueOrNull,
+  visitorInsights
+});
+//# sourceMappingURL=index.js.map