@actioneer/ads 0.5.4 → 0.5.5

package/components/viz-charts.js

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

package/fonts.css

@@ -1,8 +1,10 @@
 /* @actioneer/ads — generated by scripts/build-lib-styles.mjs. Do not edit. */
 /* Aribau Grotesk — ADS 1.0 brand typeface.
-   Two weights only: Regular (400) and Bold (700).
-   The weight RANGES fold Tailwind's intermediate utilities onto these two
-   physical files: `font-normal`/`font-medium` → Regular, `font-semibold`/`font-bold` → Bold.
+   TWO weights only: Regular (400) and Semibold (600). Use `font-normal` and
+   `font-semibold` — there is NO dedicated bold face, so never reach for
+   `font-bold` (it would just fold onto the 600 file). The weight RANGES map
+   Tailwind's utilities onto the two physical files:
+   `font-normal` → Regular (100–500), `font-semibold` → Semibold (600–900).
    `font-synthesis-weight: none` (set in index.css) prevents faux weights. */
 @font-face {
   font-family: "Aribau Grotesk";
@@ -13,7 +15,7 @@
 }
 @font-face {
   font-family: "Aribau Grotesk";
-  src: url("./fonts/aribau-grotesk-700.otf") format("opentype");
+  src: url("./fonts/aribau-grotesk-600.woff2") format("woff2");
   font-weight: 600 900;
   font-style: normal;
   font-display: swap;