@actioneer/ads 0.5.2 → 0.5.4

package/components/viz-charts.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+export interface VizSeries {
+    name: string;
+    /** Omit to take the palette color for its index. */
+    color?: string;
+    values: number[];
+    /** Render dashed — a 2nd+ event line, not the primary. */
+    dashed?: boolean;
+    /** Faded dashed ghost — a "previous period" compare series. */
+    ghost?: boolean;
+}
+export interface SeriesChartProps {
+    type?: "line" | "area" | "bar";
+    labels: string[];
+    series: VizSeries[];
+    height?: number;
+    /** Formatter for the value axis + tooltip; defaults to abbr / commafy. */
+    formatAxis?: (v: number) => string;
+    formatValue?: (v: number) => string;
+    className?: string;
+}
+export declare function SeriesChart({ type, labels, series, height, formatAxis, formatValue, className, }: SeriesChartProps): React.JSX.Element;
+export interface FunnelStep {
+    label: string;
+    value: number;
+    /** Median seconds from the previous step. */
+    medianTime?: number | null;
+    avgTime?: number | null;
+}
+export interface FunnelVizProps {
+    steps: FunnelStep[];
+    height?: number;
+    className?: string;
+}
+export declare function FunnelViz({ steps, height, className }: FunnelVizProps): React.JSX.Element;
+export interface FunnelBarsHorizontalProps {
+    steps: FunnelStep[];
+    className?: string;
+}
+export declare function FunnelBarsHorizontal({ steps, className }: FunnelBarsHorizontalProps): React.JSX.Element;
+export interface RetentionPoint {
+    label: string;
+    v: number;
+}
+export interface RetentionCurveProps {
+    points: RetentionPoint[];
+    height?: number;
+    className?: string;
+}
+export declare function RetentionCurve({ points, height, className }: RetentionCurveProps): React.JSX.Element;
+export interface RetentionCohort {
+    label: string;
+    size: number;
+    /** One per column; null = period not yet elapsed. */
+    values: (number | null)[];
+}
+export interface RetentionGridProps {
+    cols: string[];
+    cohorts: RetentionCohort[];
+    className?: string;
+}
+export declare function RetentionGrid({ cols, cohorts, className }: RetentionGridProps): React.JSX.Element;

package/components/viz-charts.js

@@ -0,0 +1,408 @@
+"use client";
+import { jsx as r, 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";
+const G = [
+  "var(--color-chart-1)",
+  "var(--color-chart-2)",
+  "var(--color-chart-3)",
+  "var(--color-chart-4)",
+  "var(--color-chart-5)",
+  "var(--color-chart-6)"
+], 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 };
+}
+function Z(e, s = 8) {
+  if (e.length <= s) return e;
+  const d = Math.ceil(e.length / s);
+  return e.map((i, u) => u % d === 0 || u === e.length - 1 ? i : null);
+}
+function P(e) {
+  if (!e.length) return "";
+  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}`;
+  }
+  return s;
+}
+function _({
+  x: e,
+  y: s,
+  title: d,
+  rows: i,
+  flip: u
+}) {
+  return /* @__PURE__ */ c(
+    "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",
+      style: {
+        left: e,
+        top: s,
+        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(
+            "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)) })
+      ]
+    }
+  );
+}
+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(
+      "span",
+      {
+        "aria-hidden": !0,
+        className: D("h-0 w-4 shrink-0", s.dashed ? "border-t-2 border-dashed" : "border-t-[3px]"),
+        style: { borderColor: s.color }
+      }
+    ),
+    s.label
+  ] }, s.label)) });
+}
+const b = { l: 56, r: 18, t: 18, b: 34 };
+function ne({
+  type: e = "line",
+  labels: s,
+  series: d,
+  height: i = 300,
+  formatAxis: u = V,
+  formatValue: o = H,
+  className: a
+}) {
+  const [y, w] = $.useState(720), N = $.useRef(null);
+  $.useEffect(() => {
+    if (!N.current) return;
+    const t = new ResizeObserver(([m]) => w(m.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 }),
+    /* @__PURE__ */ c(
+      "svg",
+      {
+        width: y,
+        height: i,
+        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));
+          f(Math.max(0, Math.min(R - 1, L)));
+        },
+        children: [
+          j.map((t, m) => /* @__PURE__ */ c("g", { children: [
+            /* @__PURE__ */ r(
+              "line",
+              {
+                x1: b.l,
+                x2: b.l + x,
+                y1: k(t),
+                y2: k(t),
+                stroke: U,
+                strokeWidth: 1,
+                strokeDasharray: t === 0 ? void 0 : "3 4",
+                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)),
+          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)
+          ),
+          e === "bar" && l.map((t, m) => {
+            const T = x / R, L = Math.min(T * 0.7, 64), F = (L - (l.length - 1)) / l.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(
+                "rect",
+                {
+                  x: K,
+                  y: k(I),
+                  width: Math.max(0, F),
+                  height: b.t + M - k(I),
+                  rx: 2,
+                  fill: t.color ?? O(m),
+                  opacity: q ? 0.4 : 1
+                },
+                `${m}-${S}`
+              );
+            });
+          }),
+          e === "area" && l[0] && /* @__PURE__ */ r(
+            "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),
+              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(
+              "path",
+              {
+                d: P(t.values.map((I, S) => [v(S), k(I)])),
+                fill: "none",
+                stroke: T,
+                strokeWidth: F,
+                strokeDasharray: L,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                opacity: t.ghost ? 0.4 : 1
+              },
+              m
+            );
+          }),
+          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(
+              "circle",
+              {
+                cx: v(h),
+                cy: k(t.values[h]),
+                r: 4.5,
+                fill: t.color ?? O(m),
+                stroke: "var(--card)",
+                strokeWidth: 2
+              },
+              m
+            ))
+          ] })
+        ]
+      }
+    ),
+    h != null && /* @__PURE__ */ r(
+      _,
+      {
+        x: v(h),
+        y: b.t + M / 2,
+        flip: v(h) > b.l + x * 0.66,
+        title: s[h],
+        rows: d.map((t) => ({
+          swatch: t.color ?? O(l.indexOf(t)),
+          dashed: t.ghost,
+          label: t.name,
+          value: o(t.values[h])
+        }))
+      }
+    )
+  ] });
+}
+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;
+  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);
+  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 })
+      ] }) }),
+      [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 })
+      ] }, 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;
+        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: [
+            H(n.value),
+            " ",
+            /* @__PURE__ */ r("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: [
+            "↘ ",
+            z((1 - n.value / e[p - 1].value) * 100)
+          ] }),
+          p > 0 && n.medianTime != null && /* @__PURE__ */ c("text", { x: v, y: g.t + N + 86, textAnchor: "middle", className: "fill-tertiary text-[11px] tabular-nums", children: [
+            "◷ ",
+            B(n.medianTime)
+          ] })
+        ] }, p);
+      })
+    ] }),
+    a != null && e[a] && /* @__PURE__ */ r(
+      _,
+      {
+        x: g.l + a * x + x / 2,
+        y: g.t + N / 2,
+        flip: a >= e.length - 2,
+        title: e[a].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) }
+          ] : []
+        ]
+      }
+    )
+  ] });
+}
+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
+          ] }),
+          o > 0 && u.avgTime != null && /* @__PURE__ */ c("span", { className: "shrink-0 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__ */ r("span", { className: "w-[60px] shrink-0 text-right text-base font-bold text-foreground tabular-nums", children: z(a * 100) })
+    ] }, o);
+  }) });
+}
+const W = { l: 48, r: 24, t: 34, b: 34 };
+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 [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)]);
+  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",
+        onMouseLeave: () => y(null),
+        onMouseMove: (l) => {
+          const n = l.currentTarget.getBoundingClientRect(), p = Math.round((l.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,
+              "%"
+            ] })
+          ] }, l)),
+          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)
+          ),
+          /* @__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__ */ r("circle", { cx: f(n), cy: x(l.v), r: a === n ? 5 : 3.5, fill: "var(--card)", stroke: A, strokeWidth: 2 })
+          ] }, n))
+        ]
+      }
+    ),
+    a != null && e[a] && /* @__PURE__ */ r(
+      _,
+      {
+        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}%` }]
+      }
+    )
+  ] });
+}
+function te(e) {
+  const s = 10 + Math.max(0, Math.min(100, e)) / 100 * 78;
+  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))
+    ] }) }),
+    /* @__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(
+        "div",
+        {
+          className: D(
+            "rounded-md py-[9px] text-center text-[12.5px] tabular-nums",
+            u >= 50 ? "text-[var(--card)]" : "text-secondary"
+          ),
+          style: { background: te(u) },
+          children: [
+            u,
+            "%"
+          ]
+        }
+      ) }, o))
+    ] }, i.label)) })
+  ] }) });
+}
+export {
+  ce as FunnelBarsHorizontal,
+  oe as FunnelViz,
+  se as RetentionCurve,
+  ie as RetentionGrid,
+  ne as SeriesChart
+};

package/lib/viz-format.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Number & date formatting for the viz (segmentation) charts — India-first,
+ * per the Visualisations handoff. Kept separate from the components so both
+ * the renderers and their data tables format identically.
+ *
+ * Rule of the surface: every numeral is tabular-nums in the ADS face (never
+ * a mono font — EXTENDING §2.2), prose labels are sans. These helpers only
+ * produce the numeral strings.
+ */
+/** Tooltip / table grouping — lakh grouping. 1042318 → "10,42,318". */
+export declare function commafy(n: number): string;
+/**
+ * Axis abbreviation with the Indian ladder — capital K, then L (lakh),
+ * then Cr (crore). 145000 → "1.5L", 15000000 → "1.5Cr", 2300 → "2.3K".
+ */
+export declare function abbr(n: number): string;
+/**
+ * Duration as the two most-significant units; "—" for null/0.
+ * 21310 → "5h 55m", 305 → "5m 5s", 42 → "42s".
+ */
+export declare function fmtDuration(seconds: number | null | undefined): string;
+/** Percentage to one decimal place, the surface default. 12.83 → "12.8%". */
+export declare function pct1(x: number): string;
+/** Percentage to two decimals — funnel-trends tooltip. 12.8 → "12.80%". */
+export declare function pct2(x: number): string;

package/lib/viz-format.js

@@ -0,0 +1,40 @@
+"use client";
+function s(t) {
+  return t.toLocaleString("en-IN");
+}
+function o(t, n) {
+  return t.toFixed(n).replace(/\.?0+$/, "");
+}
+function l(t) {
+  const n = t < 0 ? "-" : "", r = Math.abs(t);
+  return r >= 1e7 ? `${n}${o(r / 1e7, 1)}Cr` : r >= 1e5 ? `${n}${o(r / 1e5, 1)}L` : r >= 1e3 ? `${n}${o(r / 1e3, 1)}K` : `${n}${r}`;
+}
+function $(t) {
+  if (t == null || t === 0) return "—";
+  const n = Math.floor(t), r = [
+    [86400, "d"],
+    [3600, "h"],
+    [60, "m"],
+    [1, "s"]
+  ], e = [];
+  let i = n;
+  for (const [u, c] of r)
+    if (i >= u || e.length) {
+      const f = Math.floor(i / u);
+      if ((e.length || f > 0) && (e.push(`${f}${c}`), i -= f * u), e.length === 2) break;
+    }
+  return e.slice(0, 2).join(" ") || `${n}s`;
+}
+function a(t) {
+  return `${o(t, 1)}%`;
+}
+function h(t) {
+  return `${t.toFixed(2)}%`;
+}
+export {
+  l as abbr,
+  s as commafy,
+  $ as fmtDuration,
+  a as pct1,
+  h as pct2
+};

package/llms.txt

@@ -332,7 +332,9 @@ When tabs and a search field control the same content, they share one responsive
 - [ConnectorCard] — Use ConnectorCard to represent one data source/destination on an integrations screen — identity, connection status, health strip, and a usage/action footer. [docs](https://ads.actioneer.dev/#/connector-card)
 - [EdgeLabelRenderer] — component [docs](https://ads.actioneer.dev/#/infinite-canvas)
 - [ExplanationAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
+- [FunnelBarsHorizontal] — component [docs](https://ads.actioneer.dev/#/viz-charts)
 - [FunnelChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
+- [FunnelViz] — component [docs](https://ads.actioneer.dev/#/viz-charts)
 - [Handle] — component [docs](https://ads.actioneer.dev/#/infinite-canvas)
 - [InfiniteCanvas] — Lay out a node graph or workflow on a pan/zoom surface — pass nodes, edges, and your own nodeTypes; the canvas owns the grid, edges, zoom cluster, snap toggle, and toolbar slots. Use readOnly for a canvas that explains rather than edits. [docs](https://ads.actioneer.dev/#/infinite-canvas)
 - [LineChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
@@ -342,7 +344,10 @@ When tabs and a search field control the same content, they share one responsive
 - [RadarChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
 - [RadialBarChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
 - [ReactFlowProvider] — component [docs](https://ads.actioneer.dev/#/infinite-canvas)
+- [RetentionCurve] — component [docs](https://ads.actioneer.dev/#/viz-charts)
+- [RetentionGrid] — component [docs](https://ads.actioneer.dev/#/viz-charts)
 - [ScatterChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
+- [SeriesChart] — component [docs](https://ads.actioneer.dev/#/viz-charts)
 - [StatusAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
 - [Tab] — component (variants: variant: primary|secondary; orientation: horizontal|vertical; size: sm|md|lg; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
 - [Table] — Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Interactive rows inherit the shared soft neutral hover/focus sink and keep their normal table geometry; do not add a brand tint or hover-only corner rounding. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky. [docs](https://ads.actioneer.dev/#/table)
@@ -410,9 +415,12 @@ When tabs and a search field control the same content, they share one responsive
 - [EdgeTypes] — TypeScript type
 - [ExplanationAnswerProps] — TypeScript type
 - [ExplanationAnswerSpec] — TypeScript type
+- [FunnelBarsHorizontalProps] — TypeScript type
 - [FunnelChartProps] — TypeScript type
 - [FunnelLabelContext] — TypeScript type
 - [FunnelLabelRenderer] — TypeScript type
+- [FunnelStep] — TypeScript type
+- [FunnelVizProps] — TypeScript type
 - [InfiniteCanvasProps] — TypeScript type
 - [LineChartProps] — TypeScript type
 - [Node] — TypeScript type
@@ -424,9 +432,14 @@ When tabs and a search field control the same content, they share one responsive
 - [RadarChartProps] — TypeScript type
 - [RadialBarChartProps] — TypeScript type
 - [ReactFlowInstance] — TypeScript type
+- [RetentionCohort] — TypeScript type
+- [RetentionCurveProps] — TypeScript type
+- [RetentionGridProps] — TypeScript type
+- [RetentionPoint] — TypeScript type
 - [ScatterChartProps] — TypeScript type
 - [Selection] — TypeScript type
 - [SelectionMode] — TypeScript type
+- [SeriesChartProps] — TypeScript type
 - [SortDescriptor] — TypeScript type
 - [SortDirection] — TypeScript type
 - [StatusAnswerProps] — TypeScript type
@@ -447,6 +460,7 @@ When tabs and a search field control the same content, they share one responsive
 - [TrendAnswerProps] — TypeScript type
 - [TrendAnswerSpec] — TypeScript type
 - [Viewport] — TypeScript type
+- [VizSeries] — TypeScript type
 - [useEdgesState] — React hook
 - [useNodesState] — React hook
 - [useReactFlow] — React hook
@@ -466,6 +480,7 @@ When tabs and a search field control the same content, they share one responsive
 - [getBezierPath] — utility
 - [getSmoothStepPath] — utility
 - [getStraightPath] — utility
+- [MIN_HEIGHT] — utility
 - [StatusAnswerSchema] — utility
 - [TrendAnswerSchema] — utility