@actioneer/ads 1.0.6 → 1.0.8

package/components/viz-charts.js

@@ -1,67 +1,67 @@
 "use client";
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import * as $ from "react";
-import { cn as O } from "../lib/cn.js";
-import { fmtDuration as B, pct1 as E, abbr as F, commafy as H } from "../lib/viz-format.js";
-const U = [
+import { jsx as l, jsxs as i } from "react/jsx-runtime";
+import * as M from "react";
+import { cn as z } from "../lib/cn.js";
+import { fmtDuration as V, pct1 as H, abbr as F, commafy as O } from "../lib/viz-format.js";
+const K = [
   "var(--color-chart-1)",
   "var(--color-chart-2)",
   "var(--color-chart-3)",
   "var(--color-chart-4)",
   "var(--color-chart-5)",
   "var(--color-chart-6)"
-], L = (e) => U[e % U.length], C = "var(--color-chart-1)", I = "var(--color-ink-400)", V = "var(--border)", Y = "var(--foreground)", X = 2.5, Z = 2.5;
+], E = (e) => K[e % K.length], S = "var(--color-chart-1)", I = "var(--color-ink-400)", U = "var(--border)", Y = "var(--foreground)", X = 2.5, Z = 2.5;
 function ee(e, c = 4) {
   if (e <= 0) return { max: 1, ticks: [0, 1] };
-  const d = e / c, i = Math.pow(10, Math.floor(Math.log10(d))), o = ([1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].find((w) => w * i >= d) ?? 10) * i, l = Math.ceil(e / o) * o, y = [];
-  for (let w = 0; w <= l + o / 1e6; w += o) y.push(w);
-  return { max: l, ticks: y };
+  const h = e / c, x = Math.pow(10, Math.floor(Math.log10(h))), o = ([1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].find((b) => b * x >= h) ?? 10) * x, r = Math.ceil(e / o) * o, f = [];
+  for (let b = 0; b <= r + o / 1e6; b += o) f.push(b);
+  return { max: r, ticks: f };
 }
 function q(e, c = 8) {
   if (e.length <= c) return e;
-  const d = Math.ceil(e.length / c);
-  return e.map((i, u) => u % d === 0 || u === e.length - 1 ? i : null);
+  const h = Math.ceil(e.length / c);
+  return e.map((x, s) => s % h === 0 || s === e.length - 1 ? x : null);
 }
-function P(e) {
+function B(e) {
   if (!e.length) return "";
   if (e.length === 1) return `M${e[0][0]},${e[0][1]}`;
   let c = `M${e[0][0]},${e[0][1]}`;
-  for (let d = 1; d < e.length; d++) {
-    const [i, u] = e[d - 1], [o, l] = e[d], y = (i + o) / 2;
-    c += `C${y},${u} ${y},${l} ${o},${l}`;
+  for (let h = 1; h < e.length; h++) {
+    const [x, s] = e[h - 1], [o, r] = e[h], f = (x + o) / 2;
+    c += `C${f},${s} ${f},${r} ${o},${r}`;
   }
   return c;
 }
-function K({
+function P({
   x: e,
   y: c,
-  title: d,
-  rows: i,
-  flip: u
+  title: h,
+  rows: x,
+  flip: s
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: "pointer-events-none absolute z-10 min-w-[184px] max-w-[248px] rounded-lg bg-foreground px-3 py-2.5 text-background shadow-elevation",
+      className: "pointer-events-none absolute z-10 min-w-[184px] max-w-[248px] rounded-lg bg-foreground px-3 py-2.5 text-background",
       style: {
         left: e,
         top: c,
-        transform: `translate(${u ? "calc(-100% - 12px)" : "12px"}, -50%)`
+        transform: `translate(${s ? "calc(-100% - 12px)" : "12px"}, -50%)`
       },
       children: [
-        /* @__PURE__ */ a("div", { className: "mb-1.5 text-xs text-background/60", children: d }),
-        /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: i.map((o, l) => /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-xs", children: [
-          o.dashed ? /* @__PURE__ */ a(
+        /* @__PURE__ */ l("div", { className: "mb-1.5 text-xs text-background/60", children: h }),
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-1", children: x.map((o, r) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2 text-xs", children: [
+          o.dashed ? /* @__PURE__ */ l(
             "span",
             {
               "aria-hidden": !0,
               className: "h-0 w-3 shrink-0 border-t border-dashed",
               style: { borderColor: o.swatch ?? "currentColor" }
             }
-          ) : o.swatch ? /* @__PURE__ */ a("span", { "aria-hidden": !0, className: "size-2 shrink-0 rounded-dot", style: { background: o.swatch } }) : null,
-          /* @__PURE__ */ a("span", { className: "min-w-0 flex-1 truncate text-background/70", children: o.label }),
-          /* @__PURE__ */ a("span", { className: "shrink-0 font-medium tabular-nums", children: o.value })
-        ] }, l)) })
+          ) : o.swatch ? /* @__PURE__ */ l("span", { "aria-hidden": !0, className: "size-2 shrink-0 rounded-dot", style: { background: o.swatch } }) : null,
+          /* @__PURE__ */ l("span", { className: "min-w-0 flex-1 truncate text-background/70", children: o.label }),
+          /* @__PURE__ */ l("span", { className: "shrink-0 font-medium tabular-nums", children: o.value })
+        ] }, r)) })
       ]
     }
   );
@@ -69,207 +69,207 @@ function K({
 function te({
   items: e
 }) {
-  return /* @__PURE__ */ a("div", { className: "mb-3 flex flex-wrap items-center justify-end gap-x-4 gap-y-1", children: e.map((c) => /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1.5 text-xs text-secondary", children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ l("div", { className: "mb-3 flex flex-wrap items-center justify-end gap-x-4 gap-y-1", children: e.map((c) => /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1.5 text-xs text-secondary", children: [
+    /* @__PURE__ */ l(
       "span",
       {
         "aria-hidden": !0,
-        className: O("h-0 w-4 shrink-0", c.dashed ? "border-t-2 border-dashed" : "border-t-[3px]"),
+        className: z("h-0 w-4 shrink-0", c.dashed ? "border-t-2 border-dashed" : "border-t-[3px]"),
         style: { borderColor: c.color }
       }
     ),
     c.label
   ] }, c.label)) });
 }
-const b = { l: 56, r: 18, t: 18, b: 34 };
+const N = { l: 56, r: 18, t: 18, b: 34 };
 function oe({
   type: e = "line",
   labels: c,
-  series: d,
-  height: i = 300,
-  formatAxis: u = F,
-  formatValue: o = H,
-  className: l
+  series: h,
+  height: x = 300,
+  formatAxis: s = F,
+  formatValue: o = O,
+  className: r
 }) {
-  const [y, w] = $.useState(720), N = $.useRef(null);
-  $.useEffect(() => {
-    if (!N.current) return;
-    const t = new ResizeObserver(([x]) => w(x.contentRect.width));
-    return t.observe(N.current), () => t.disconnect();
+  const [f, b] = M.useState(720), m = M.useRef(null);
+  M.useEffect(() => {
+    if (!m.current) return;
+    const t = new ResizeObserver(([p]) => b(p.contentRect.width));
+    return t.observe(m.current), () => t.disconnect();
   }, []);
-  const [h, f] = $.useState(null), m = Math.max(0, y - b.l - b.r), M = Math.max(0, i - b.t - b.b), r = d.filter((t) => !t.ghost), { max: n, ticks: v } = ee(Math.max(1, ...d.flatMap((t) => t.values))), k = (t) => b.t + M - t / n * M, R = c.length, p = (t) => e === "bar" ? b.l + (t + 0.5) / R * m : b.l + (R <= 1 ? m / 2 : t / (R - 1) * m), _ = [...v].reverse(), D = r.map((t, x) => ({ label: t.name, color: t.color ?? L(x), dashed: t.dashed }));
-  return /* @__PURE__ */ s("div", { ref: N, className: O("relative w-full font-sans", l), children: [
-    D.length > 1 && /* @__PURE__ */ a(te, { items: D }),
-    /* @__PURE__ */ s(
+  const [u, v] = M.useState(null), d = Math.max(0, f - N.l - N.r), y = Math.max(0, x - N.t - N.b), n = h.filter((t) => !t.ghost), { max: a, ticks: g } = ee(Math.max(1, ...h.flatMap((t) => t.values))), $ = (t) => N.t + y - t / a * y, R = c.length, w = (t) => e === "bar" ? N.l + (t + 0.5) / R * d : N.l + (R <= 1 ? d / 2 : t / (R - 1) * d), _ = [...g].reverse(), D = n.map((t, p) => ({ label: t.name, color: t.color ?? E(p), dashed: t.dashed }));
+  return /* @__PURE__ */ i("div", { ref: m, className: z("relative w-full font-sans", r), children: [
+    D.length > 1 && /* @__PURE__ */ l(te, { items: D }),
+    /* @__PURE__ */ i(
       "svg",
       {
-        width: y,
-        height: i,
+        width: f,
+        height: x,
         className: "block select-none",
-        onMouseLeave: () => f(null),
+        onMouseLeave: () => v(null),
         onMouseMove: (t) => {
-          const x = t.currentTarget.getBoundingClientRect(), T = t.clientX - x.left, S = Math.round((T - b.l) / m * (R - 1));
-          f(Math.max(0, Math.min(R - 1, S)));
+          const p = t.currentTarget.getBoundingClientRect(), T = t.clientX - p.left, A = Math.round((T - N.l) / d * (R - 1));
+          v(Math.max(0, Math.min(R - 1, A)));
         },
         children: [
-          _.map((t, x) => /* @__PURE__ */ s("g", { children: [
-            /* @__PURE__ */ a(
+          _.map((t, p) => /* @__PURE__ */ i("g", { children: [
+            /* @__PURE__ */ l(
               "line",
               {
-                x1: b.l,
-                x2: b.l + m,
-                y1: k(t),
-                y2: k(t),
-                stroke: V,
+                x1: N.l,
+                x2: N.l + d,
+                y1: $(t),
+                y2: $(t),
+                stroke: U,
                 strokeWidth: 1,
                 strokeDasharray: t === 0 ? void 0 : "3 4",
                 opacity: t === 0 ? 0.9 : 0.6
               }
             ),
-            /* @__PURE__ */ a("text", { x: b.l - 10, y: k(t), dy: "0.32em", textAnchor: "end", className: "fill-tertiary text-xs tabular-nums", children: u(t) })
-          ] }, x)),
+            /* @__PURE__ */ l("text", { x: N.l - 10, y: $(t), dy: "0.32em", textAnchor: "end", className: "fill-tertiary text-xs tabular-nums", children: s(t) })
+          ] }, p)),
           q(c).map(
-            (t, x) => t == null ? null : /* @__PURE__ */ a("text", { x: p(x), y: i - 12, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: t }, x)
+            (t, p) => t == null ? null : /* @__PURE__ */ l("text", { x: w(p), y: x - 12, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: t }, p)
           ),
-          e === "bar" && r.map((t, x) => {
-            const T = m / R, S = Math.min(T * 0.7, 64), A = (S - (r.length - 1)) / r.length;
-            return t.values.map((j, z) => {
-              const J = b.l + z * T + (T - S) / 2 + x * (A + 1), Q = h != null && h !== z;
-              return /* @__PURE__ */ a(
+          e === "bar" && n.map((t, p) => {
+            const T = d / R, A = Math.min(T * 0.7, 64), C = (A - (n.length - 1)) / n.length;
+            return t.values.map((j, L) => {
+              const J = N.l + L * T + (T - A) / 2 + p * (C + 1), Q = u != null && u !== L;
+              return /* @__PURE__ */ l(
                 "rect",
                 {
                   x: J,
-                  y: k(j),
-                  width: Math.max(0, A),
-                  height: b.t + M - k(j),
+                  y: $(j),
+                  width: Math.max(0, C),
+                  height: N.t + y - $(j),
                   rx: 2,
-                  fill: t.color ?? L(x),
+                  fill: t.color ?? E(p),
                   opacity: Q ? 0.4 : 1
                 },
-                `${x}-${z}`
+                `${p}-${L}`
               );
             });
           }),
-          e === "area" && r[0] && /* @__PURE__ */ a(
+          e === "area" && n[0] && /* @__PURE__ */ l(
             "path",
             {
-              d: `${P(r[0].values.map((t, x) => [p(x), k(t)]))} L${p(R - 1)},${k(0)} L${p(0)},${k(0)} Z`,
-              fill: r[0].color ?? L(0),
+              d: `${B(n[0].values.map((t, p) => [w(p), $(t)]))} L${w(R - 1)},${$(0)} L${w(0)},${$(0)} Z`,
+              fill: n[0].color ?? E(0),
               opacity: 0.12
             }
           ),
-          e !== "bar" && d.map((t, x) => {
-            const T = t.color ?? L(x), S = t.ghost ? "2 4" : t.dashed ? "6 5" : void 0, A = X;
-            return /* @__PURE__ */ a(
+          e !== "bar" && h.map((t, p) => {
+            const T = t.color ?? E(p), A = t.ghost ? "2 4" : t.dashed ? "6 5" : void 0, C = X;
+            return /* @__PURE__ */ l(
               "path",
               {
-                d: P(t.values.map((j, z) => [p(z), k(j)])),
+                d: B(t.values.map((j, L) => [w(L), $(j)])),
                 fill: "none",
                 stroke: T,
-                strokeWidth: A,
-                strokeDasharray: S,
+                strokeWidth: C,
+                strokeDasharray: A,
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 opacity: t.ghost ? 0.4 : 1
               },
-              x
+              p
             );
           }),
-          e !== "bar" && d.flatMap((t, x) => {
-            const T = t.color ?? L(x);
-            return t.values.map((S, A) => /* @__PURE__ */ a(
+          e !== "bar" && h.flatMap((t, p) => {
+            const T = t.color ?? E(p);
+            return t.values.map((A, C) => /* @__PURE__ */ l(
               "circle",
               {
                 "aria-hidden": !0,
-                cx: p(A),
-                cy: k(S),
-                r: h === A ? 5.5 : 4,
+                cx: w(C),
+                cy: $(A),
+                r: u === C ? 5.5 : 4,
                 fill: "var(--card)",
                 stroke: T,
-                strokeWidth: h === A ? 3 : Z,
+                strokeWidth: u === C ? 3 : Z,
                 opacity: t.ghost ? 0.4 : 1
               },
-              `${x}-${A}`
+              `${p}-${C}`
             ));
           }),
-          h != null && e !== "bar" && /* @__PURE__ */ a("line", { x1: p(h), x2: p(h), y1: b.t, y2: b.t + M, stroke: Y, strokeWidth: 1, opacity: 0.18 })
+          u != null && e !== "bar" && /* @__PURE__ */ l("line", { x1: w(u), x2: w(u), y1: N.t, y2: N.t + y, stroke: Y, strokeWidth: 1, opacity: 0.18 })
         ]
       }
     ),
-    h != null && /* @__PURE__ */ a(
-      K,
+    u != null && /* @__PURE__ */ l(
+      P,
       {
-        x: p(h),
-        y: b.t + M / 2,
-        flip: p(h) > b.l + m * 0.66,
-        title: c[h],
-        rows: d.map((t) => ({
-          swatch: t.color ?? L(d.indexOf(t)),
+        x: w(u),
+        y: N.t + y / 2,
+        flip: w(u) > N.l + d * 0.66,
+        title: c[u],
+        rows: h.map((t) => ({
+          swatch: t.color ?? E(h.indexOf(t)),
           dashed: t.ghost,
           label: t.name,
-          value: o(t.values[h])
+          value: o(t.values[u])
         }))
       }
     )
   ] });
 }
-const g = { l: 22, r: 16, t: 28, b: 98 }, G = "viz-funnel-hatch";
-function ce({ steps: e, height: c = 320, className: d }) {
-  var r;
-  const [i, u] = $.useState(720), o = $.useRef(null);
-  $.useEffect(() => {
+const k = { l: 22, r: 16, t: 28, b: 98 }, G = "viz-funnel-hatch";
+function ce({ steps: e, height: c = 320, className: h }) {
+  var n;
+  const [x, s] = M.useState(720), o = M.useRef(null);
+  M.useEffect(() => {
     if (!o.current) return;
-    const n = new ResizeObserver(([v]) => u(v.contentRect.width));
-    return n.observe(o.current), () => n.disconnect();
+    const a = new ResizeObserver(([g]) => s(g.contentRect.width));
+    return a.observe(o.current), () => a.disconnect();
   }, []);
-  const [l, y] = $.useState(null), w = Math.max(0, i - g.l - g.r), N = Math.max(0, c - g.t - g.b), h = ((r = e[0]) == null ? void 0 : r.value) || 1, f = (n) => g.t + N - n * N, m = w / Math.max(1, e.length), M = Math.min(m * 0.56, 120);
-  return /* @__PURE__ */ s("div", { ref: o, className: O("relative w-full font-sans", d), children: [
-    /* @__PURE__ */ s("svg", { width: i, height: c, className: "block select-none", children: [
-      /* @__PURE__ */ a("defs", { children: /* @__PURE__ */ s("pattern", { id: G, width: 6, height: 6, patternTransform: "rotate(45)", patternUnits: "userSpaceOnUse", children: [
-        /* @__PURE__ */ a("rect", { width: 6, height: 6, fill: I, opacity: 0.07 }),
-        /* @__PURE__ */ a("line", { x1: 0, y1: 0, x2: 0, y2: 6, stroke: I, strokeWidth: 2.5, opacity: 0.22 })
+  const [r, f] = M.useState(null), b = Math.max(0, x - k.l - k.r), m = Math.max(0, c - k.t - k.b), u = ((n = e[0]) == null ? void 0 : n.value) || 1, v = (a) => k.t + m - a * m, d = b / Math.max(1, e.length), y = Math.min(d * 0.56, 120);
+  return /* @__PURE__ */ i("div", { ref: o, className: z("relative w-full font-sans", h), children: [
+    /* @__PURE__ */ i("svg", { width: x, height: c, className: "block select-none", children: [
+      /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ i("pattern", { id: G, width: 6, height: 6, patternTransform: "rotate(45)", patternUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ l("rect", { width: 6, height: 6, fill: I, opacity: 0.07 }),
+        /* @__PURE__ */ l("line", { x1: 0, y1: 0, x2: 0, y2: 6, stroke: I, strokeWidth: 2.5, opacity: 0.22 })
       ] }) }),
-      [1, 0.75, 0.5, 0.25, 0].map((n) => /* @__PURE__ */ s("g", { children: [
-        /* @__PURE__ */ a("line", { x1: g.l, x2: g.l + w, y1: f(n), y2: f(n), stroke: V, strokeWidth: 1, strokeDasharray: n === 0 ? void 0 : "3 4", opacity: n === 0 ? 0.9 : 0.6 }),
-        /* @__PURE__ */ a("text", { x: g.l, y: f(n) - 4, className: "fill-tertiary text-xs tabular-nums", children: n * 100 })
-      ] }, n)),
-      e.map((n, v) => {
-        const k = n.value / h, R = v === 0 ? 1 : e[v - 1].value / h, p = g.l + v * m + m / 2, _ = p - M / 2, D = f(k), t = l != null && l !== v;
-        return /* @__PURE__ */ s("g", { opacity: t ? 0.55 : 1, onMouseEnter: () => y(v), onMouseLeave: () => y(null), children: [
-          v > 0 && /* @__PURE__ */ a("rect", { x: _, y: f(R), width: M, height: Math.max(0, D - f(R)), rx: 4, fill: `url(#${G})` }),
-          /* @__PURE__ */ a("rect", { x: _, y: D, width: M, height: Math.max(0, g.t + N - D), rx: 4, fill: C }),
-          /* @__PURE__ */ a("text", { x: p, y: D + 16, textAnchor: "middle", className: "fill-[var(--card)] text-s font-medium tabular-nums", children: F(n.value) }),
-          /* @__PURE__ */ a("text", { x: p, y: g.t + N + 24, textAnchor: "middle", className: "fill-secondary text-s font-medium", children: n.label }),
-          /* @__PURE__ */ s("text", { x: p, y: g.t + N + 45, textAnchor: "middle", className: "fill-foreground text-s font-medium tabular-nums", children: [
-            H(n.value),
+      [1, 0.75, 0.5, 0.25, 0].map((a) => /* @__PURE__ */ i("g", { children: [
+        /* @__PURE__ */ l("line", { x1: k.l, x2: k.l + b, y1: v(a), y2: v(a), stroke: U, strokeWidth: 1, strokeDasharray: a === 0 ? void 0 : "3 4", opacity: a === 0 ? 0.9 : 0.6 }),
+        /* @__PURE__ */ l("text", { x: k.l, y: v(a) - 4, className: "fill-tertiary text-xs tabular-nums", children: a * 100 })
+      ] }, a)),
+      e.map((a, g) => {
+        const $ = a.value / u, R = g === 0 ? 1 : e[g - 1].value / u, w = k.l + g * d + d / 2, _ = w - y / 2, D = v($), t = r != null && r !== g;
+        return /* @__PURE__ */ i("g", { opacity: t ? 0.55 : 1, onMouseEnter: () => f(g), onMouseLeave: () => f(null), children: [
+          g > 0 && /* @__PURE__ */ l("rect", { x: _, y: v(R), width: y, height: Math.max(0, D - v(R)), rx: 4, fill: `url(#${G})` }),
+          /* @__PURE__ */ l("rect", { x: _, y: D, width: y, height: Math.max(0, k.t + m - D), rx: 4, fill: S }),
+          /* @__PURE__ */ l("text", { x: w, y: D + 16, textAnchor: "middle", className: "fill-[var(--card)] text-s font-medium tabular-nums", children: F(a.value) }),
+          /* @__PURE__ */ l("text", { x: w, y: k.t + m + 24, textAnchor: "middle", className: "fill-secondary text-s font-medium", children: a.label }),
+          /* @__PURE__ */ i("text", { x: w, y: k.t + m + 45, textAnchor: "middle", className: "fill-foreground text-s font-medium tabular-nums", children: [
+            O(a.value),
             " ",
-            /* @__PURE__ */ a("tspan", { className: "fill-tertiary", children: v === 0 ? "entered" : `→ ${E(k * 100)}` })
+            /* @__PURE__ */ l("tspan", { className: "fill-tertiary", children: g === 0 ? "entered" : `→ ${H($ * 100)}` })
           ] }),
-          v > 0 && /* @__PURE__ */ s("text", { x: p, y: g.t + N + 66, textAnchor: "middle", className: "fill-tertiary text-s font-medium tabular-nums", children: [
+          g > 0 && /* @__PURE__ */ i("text", { x: w, y: k.t + m + 66, textAnchor: "middle", className: "fill-tertiary text-s font-medium tabular-nums", children: [
             "↘ ",
-            E((1 - n.value / e[v - 1].value) * 100)
+            H((1 - a.value / e[g - 1].value) * 100)
           ] }),
-          v > 0 && n.medianTime != null && /* @__PURE__ */ s("text", { x: p, y: g.t + N + 86, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: [
+          g > 0 && a.medianTime != null && /* @__PURE__ */ i("text", { x: w, y: k.t + m + 86, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: [
             "◷ ",
-            B(n.medianTime)
+            V(a.medianTime)
           ] })
-        ] }, v);
+        ] }, g);
       })
     ] }),
-    l != null && e[l] && /* @__PURE__ */ a(
-      K,
+    r != null && e[r] && /* @__PURE__ */ l(
+      P,
       {
-        x: g.l + l * m + m / 2,
-        y: g.t + N / 2,
-        flip: l >= e.length - 2,
-        title: e[l].label,
+        x: k.l + r * d + d / 2,
+        y: k.t + m / 2,
+        flip: r >= e.length - 2,
+        title: e[r].label,
         rows: [
-          { swatch: C, label: "Converted", value: H(e[l].value) },
-          ...l > 0 ? [
-            { swatch: I, label: "Dropped off", value: `−${H(e[l - 1].value - e[l].value)}` },
-            { label: "Conversion so far", value: E(e[l].value / h * 100) },
-            { label: "From previous", value: E(e[l].value / e[l - 1].value * 100) },
-            { label: "Median time", value: B(e[l].medianTime) }
+          { swatch: S, label: "Converted", value: O(e[r].value) },
+          ...r > 0 ? [
+            { swatch: I, label: "Dropped off", value: `−${O(e[r - 1].value - e[r].value)}` },
+            { label: "Conversion so far", value: H(e[r].value / u * 100) },
+            { label: "From previous", value: H(e[r].value / e[r - 1].value * 100) },
+            { label: "Median time", value: V(e[r].medianTime) }
           ] : []
         ]
       }
@@ -277,130 +277,172 @@ function ce({ steps: e, height: c = 320, className: d }) {
   ] });
 }
 function se({ steps: e, className: c }) {
-  var i;
-  const d = ((i = e[0]) == null ? void 0 : i.value) || 1;
-  return /* @__PURE__ */ a("div", { className: O("flex w-full flex-col gap-[30px] font-sans", c), children: e.map((u, o) => {
-    const l = u.value / d, y = o === 0 ? 1 : e[o - 1].value / d;
-    return /* @__PURE__ */ s("div", { className: "w-full", children: [
-      /* @__PURE__ */ s("div", { className: "mb-1.5 flex items-baseline justify-between gap-3", children: [
-        /* @__PURE__ */ s("span", { className: "truncate text-s font-medium text-secondary", children: [
-          /* @__PURE__ */ s("span", { className: "text-tertiary tabular-nums", children: [
+  var x;
+  const h = ((x = e[0]) == null ? void 0 : x.value) || 1;
+  return /* @__PURE__ */ l("div", { className: z("flex w-full flex-col gap-[30px] font-sans", c), children: e.map((s, o) => {
+    const r = s.value / h, f = o === 0 ? 1 : e[o - 1].value / h;
+    return /* @__PURE__ */ i("div", { className: "w-full", children: [
+      /* @__PURE__ */ i("div", { className: "mb-1.5 flex items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ i("span", { className: "truncate text-s font-medium text-secondary", children: [
+          /* @__PURE__ */ i("span", { className: "text-tertiary tabular-nums", children: [
             o + 1,
             "."
           ] }),
           " ",
-          u.label
+          s.label
         ] }),
-        /* @__PURE__ */ s("div", { className: "flex shrink-0 items-baseline gap-3", children: [
-          o > 0 && u.avgTime != null && /* @__PURE__ */ s("span", { className: "text-xs text-tertiary tabular-nums", children: [
+        /* @__PURE__ */ i("div", { className: "flex shrink-0 items-baseline gap-3", children: [
+          o > 0 && s.avgTime != null && /* @__PURE__ */ i("span", { className: "text-xs text-tertiary tabular-nums", children: [
             "Avg time ",
-            B(u.avgTime)
+            V(s.avgTime)
           ] }),
-          /* @__PURE__ */ a("span", { className: "text-s font-medium text-foreground tabular-nums", children: E(l * 100) })
+          /* @__PURE__ */ l("span", { className: "text-s font-medium text-foreground tabular-nums", children: H(r * 100) })
         ] })
       ] }),
-      /* @__PURE__ */ s("div", { className: "relative h-[46px] w-full overflow-hidden rounded-lg bg-muted-foreground/[0.06]", children: [
-        o > 0 && /* @__PURE__ */ a(
+      /* @__PURE__ */ i("div", { className: "relative h-[46px] w-full overflow-hidden rounded-lg bg-muted-foreground/[0.06]", children: [
+        o > 0 && /* @__PURE__ */ l(
           "div",
           {
             className: "absolute inset-y-0 left-0",
             style: {
-              width: `${y * 100}%`,
+              width: `${f * 100}%`,
               backgroundImage: `repeating-linear-gradient(45deg, color-mix(in srgb, ${I} 9%, transparent) 0 4px, color-mix(in srgb, ${I} 22%, transparent) 4px 5px)`
             }
           }
         ),
-        /* @__PURE__ */ a("div", { className: "absolute inset-y-0 left-0 flex items-center rounded-lg", style: { width: `${l * 100}%`, background: C }, children: /* @__PURE__ */ a("span", { className: "ml-3 text-s font-medium text-ink-950 tabular-nums", children: F(u.value) }) })
+        /* @__PURE__ */ l("div", { className: "absolute inset-y-0 left-0 flex items-center rounded-lg", style: { width: `${r * 100}%`, background: S }, children: /* @__PURE__ */ l("span", { className: "ml-3 text-s font-medium text-ink-950 tabular-nums", children: F(s.value) }) })
       ] })
     ] }, o);
   }) });
 }
 const W = { l: 48, r: 24, t: 34, b: 34 };
-function ie({ points: e, height: c = 300, className: d }) {
-  const [i, u] = $.useState(720), o = $.useRef(null);
-  $.useEffect(() => {
+function ie({ points: e, height: c = 300, className: h }) {
+  const [x, s] = M.useState(720), o = M.useRef(null);
+  M.useEffect(() => {
     if (!o.current) return;
-    const r = new ResizeObserver(([n]) => u(n.contentRect.width));
-    return r.observe(o.current), () => r.disconnect();
+    const n = new ResizeObserver(([a]) => s(a.contentRect.width));
+    return n.observe(o.current), () => n.disconnect();
   }, []);
-  const [l, y] = $.useState(null), w = Math.max(0, i - W.l - W.r), N = Math.max(0, c - W.t - W.b), h = e.length, f = (r) => W.l + (h <= 1 ? w / 2 : r / (h - 1) * w), m = (r) => W.t + N - r / 100 * N, M = e.map((r, n) => [f(n), m(r.v)]);
-  return /* @__PURE__ */ s("div", { ref: o, className: O("relative w-full font-sans", d), children: [
-    /* @__PURE__ */ s(
+  const [r, f] = M.useState(null), b = Math.max(0, x - W.l - W.r), m = Math.max(0, c - W.t - W.b), u = e.length, v = (n) => W.l + (u <= 1 ? b / 2 : n / (u - 1) * b), d = (n) => W.t + m - n / 100 * m, y = e.map((n, a) => [v(a), d(n.v)]);
+  return /* @__PURE__ */ i("div", { ref: o, className: z("relative w-full font-sans", h), children: [
+    /* @__PURE__ */ i(
       "svg",
       {
-        width: i,
+        width: x,
         height: c,
         className: "block select-none",
-        onMouseLeave: () => y(null),
-        onMouseMove: (r) => {
-          const n = r.currentTarget.getBoundingClientRect(), v = Math.round((r.clientX - n.left - W.l) / w * (h - 1));
-          y(Math.max(0, Math.min(h - 1, v)));
+        onMouseLeave: () => f(null),
+        onMouseMove: (n) => {
+          const a = n.currentTarget.getBoundingClientRect(), g = Math.round((n.clientX - a.left - W.l) / b * (u - 1));
+          f(Math.max(0, Math.min(u - 1, g)));
         },
         children: [
-          [100, 75, 50, 25, 0].map((r) => /* @__PURE__ */ s("g", { children: [
-            /* @__PURE__ */ a("line", { x1: W.l, x2: W.l + w, y1: m(r), y2: m(r), stroke: V, strokeWidth: 1, strokeDasharray: r === 0 ? void 0 : "3 4", opacity: r === 0 ? 0.9 : 0.6 }),
-            /* @__PURE__ */ s("text", { x: W.l - 10, y: m(r), dy: "0.32em", textAnchor: "end", className: "fill-tertiary text-xs tabular-nums", children: [
-              r,
+          [100, 75, 50, 25, 0].map((n) => /* @__PURE__ */ i("g", { children: [
+            /* @__PURE__ */ l("line", { x1: W.l, x2: W.l + b, y1: d(n), y2: d(n), stroke: U, strokeWidth: 1, strokeDasharray: n === 0 ? void 0 : "3 4", opacity: n === 0 ? 0.9 : 0.6 }),
+            /* @__PURE__ */ i("text", { x: W.l - 10, y: d(n), dy: "0.32em", textAnchor: "end", className: "fill-tertiary text-xs tabular-nums", children: [
+              n,
               "%"
             ] })
-          ] }, r)),
+          ] }, n)),
           q(e).map(
-            (r, n) => r == null ? null : /* @__PURE__ */ a("text", { x: f(n), y: c - 12, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: r.label }, n)
+            (n, a) => n == null ? null : /* @__PURE__ */ l("text", { x: v(a), y: c - 12, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: n.label }, a)
           ),
-          /* @__PURE__ */ a("path", { d: `${P(M)} L${f(h - 1)},${m(0)} L${f(0)},${m(0)} Z`, fill: C, opacity: 0.12 }),
-          /* @__PURE__ */ a("path", { d: P(M), fill: "none", stroke: C, strokeWidth: X, strokeLinecap: "round", strokeLinejoin: "round" }),
-          e.map((r, n) => /* @__PURE__ */ s("g", { children: [
-            /* @__PURE__ */ s("text", { x: f(n), y: m(r.v) - 12, textAnchor: "middle", className: "fill-foreground text-s font-medium tabular-nums", children: [
-              r.v,
+          /* @__PURE__ */ l("path", { d: `${B(y)} L${v(u - 1)},${d(0)} L${v(0)},${d(0)} Z`, fill: S, opacity: 0.12 }),
+          /* @__PURE__ */ l("path", { d: B(y), fill: "none", stroke: S, strokeWidth: X, strokeLinecap: "round", strokeLinejoin: "round" }),
+          e.map((n, a) => /* @__PURE__ */ i("g", { children: [
+            /* @__PURE__ */ i("text", { x: v(a), y: d(n.v) - 12, textAnchor: "middle", className: "fill-foreground text-s font-medium tabular-nums", children: [
+              n.v,
               "%"
             ] }),
-            /* @__PURE__ */ a("circle", { cx: f(n), cy: m(r.v), r: l === n ? 5.5 : 4, fill: "var(--card)", stroke: C, strokeWidth: Z })
-          ] }, n))
+            /* @__PURE__ */ l("circle", { cx: v(a), cy: d(n.v), r: r === a ? 5.5 : 4, fill: "var(--card)", stroke: S, strokeWidth: Z })
+          ] }, a))
         ]
       }
     ),
-    l != null && e[l] && /* @__PURE__ */ a(
-      K,
+    r != null && e[r] && /* @__PURE__ */ l(
+      P,
       {
-        x: f(l),
-        y: m(e[l].v),
-        flip: l >= h - 2,
-        title: e[l].label,
-        rows: [{ swatch: C, label: "Retention", value: `${e[l].v}%` }]
+        x: v(r),
+        y: d(e[r].v),
+        flip: r >= u - 2,
+        title: e[r].label,
+        rows: [{ swatch: S, label: "Retention", value: `${e[r].v}%` }]
       }
     )
   ] });
 }
-function ae(e) {
+function le(e) {
   const c = 10 + Math.max(0, Math.min(100, e)) / 100 * 78;
-  return `color-mix(in srgb, ${C} ${c}%, transparent)`;
+  return `color-mix(in srgb, ${S} ${c}%, transparent)`;
 }
-function de({ cols: e, cohorts: c, className: d }) {
-  return /* @__PURE__ */ a("div", { className: O("w-full overflow-x-auto font-sans", d), children: /* @__PURE__ */ s("table", { className: "w-full border-collapse text-left", children: [
-    /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ s("tr", { className: "text-xs font-medium text-tertiary", children: [
-      /* @__PURE__ */ a("th", { className: "sticky left-0 w-[1%] bg-card py-2 pr-4 whitespace-nowrap", children: "Cohort" }),
-      /* @__PURE__ */ a("th", { className: "w-[1%] py-2 pr-4 text-right whitespace-nowrap", children: "Users" }),
-      e.map((i) => /* @__PURE__ */ a("th", { className: "px-1.5 py-2 text-center tabular-nums", children: i }, i))
+function de({ cols: e, cohorts: c, className: h }) {
+  const x = M.useRef(null), [s, o] = M.useState(null), r = (m, u, v) => {
+    const d = x.current;
+    if (!d) return;
+    const y = d.getBoundingClientRect(), n = v.getBoundingClientRect(), a = n.right - y.left > y.width * 0.62;
+    o({
+      row: m,
+      col: u,
+      x: (a ? n.left : n.right) - y.left,
+      y: n.top + n.height / 2 - y.top,
+      flip: a
+    });
+  }, f = s ? c[s.row] : void 0, b = s && f ? f.values[s.col] : null;
+  return /* @__PURE__ */ i("div", { ref: x, className: z("relative w-full font-sans", h), children: [
+    /* @__PURE__ */ l("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ i("table", { className: "w-full border-collapse text-left", onMouseLeave: () => o(null), children: [
+      /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ i("tr", { className: "text-xs font-medium text-tertiary", children: [
+        /* @__PURE__ */ l("th", { className: "sticky left-0 w-[1%] bg-card py-2 pr-4 whitespace-nowrap", children: "Cohort" }),
+        /* @__PURE__ */ l("th", { className: "w-[1%] py-2 pr-4 text-right whitespace-nowrap", children: "Users" }),
+        e.map((m) => /* @__PURE__ */ l("th", { className: "px-1.5 py-2 text-center tabular-nums", children: m }, m))
+      ] }) }),
+      /* @__PURE__ */ l("tbody", { children: c.map((m, u) => /* @__PURE__ */ i("tr", { children: [
+        /* @__PURE__ */ l("td", { className: "sticky left-0 w-[1%] bg-card py-1.5 pr-4 text-s text-secondary whitespace-nowrap", children: m.label }),
+        /* @__PURE__ */ l("td", { className: "w-[1%] py-1.5 pr-4 text-right text-s text-secondary tabular-nums whitespace-nowrap", children: O(m.size) }),
+        m.values.map((v, d) => /* @__PURE__ */ l("td", { className: "px-1 py-1", children: v == null ? /* @__PURE__ */ l(
+          "div",
+          {
+            className: "py-[9px] text-center text-s text-tertiary tabular-nums",
+            onMouseEnter: () => o(null),
+            children: "—"
+          }
+        ) : /* @__PURE__ */ i(
+          "div",
+          {
+            className: z(
+              "rounded-md py-[9px] text-center text-s tabular-nums",
+              "text-ink-950",
+              "transition-opacity duration-150 ease-out motion-reduce:transition-none"
+            ),
+            style: {
+              background: le(v),
+              opacity: s && (s.row !== u || s.col !== d) ? 0.55 : 1
+            },
+            onMouseEnter: (y) => r(u, d, y.currentTarget),
+            children: [
+              v,
+              "%"
+            ]
+          }
+        ) }, d))
+      ] }, m.label)) })
     ] }) }),
-    /* @__PURE__ */ a("tbody", { children: c.map((i) => /* @__PURE__ */ s("tr", { children: [
-      /* @__PURE__ */ a("td", { className: "sticky left-0 w-[1%] bg-card py-1.5 pr-4 text-s text-secondary whitespace-nowrap", children: i.label }),
-      /* @__PURE__ */ a("td", { className: "w-[1%] py-1.5 pr-4 text-right text-s text-secondary tabular-nums whitespace-nowrap", children: H(i.size) }),
-      i.values.map((u, o) => /* @__PURE__ */ a("td", { className: "px-1 py-1", children: u == null ? /* @__PURE__ */ a("div", { className: "py-[9px] text-center text-s text-tertiary tabular-nums", children: "—" }) : /* @__PURE__ */ s(
-        "div",
-        {
-          className: O(
-            "rounded-md py-[9px] text-center text-s tabular-nums",
-            "text-ink-950"
-          ),
-          style: { background: ae(u) },
-          children: [
-            u,
-            "%"
-          ]
-        }
-      ) }, o))
-    ] }, i.label)) })
-  ] }) });
+    s && f && b != null && /* @__PURE__ */ l(
+      P,
+      {
+        x: s.x,
+        y: s.y,
+        flip: s.flip,
+        title: `${f.label} cohort · ${e[s.col] ?? ""}`,
+        rows: [
+          { swatch: S, label: "Retained", value: `${b}%` },
+          {
+            label: "Users",
+            value: `${O(Math.round(f.size * b / 100))} of ${O(f.size)}`
+          }
+        ]
+      }
+    )
+  ] });
 }
 export {
   se as FunnelBarsHorizontal,