chordia-ui 3.9.0 → 3.9.2

package/dist/PerformancePanel.es.js

@@ -1,9 +1,118 @@
-import { jsxs as i, jsx as e, Fragment as _e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e, Fragment as Je } from "react/jsx-runtime";
 import S from "react";
-import { createPortal as tt } from "react-dom";
-import { ArrowLeft as it, Download as Be, CalendarDays as ge, ArrowRight as ve, Phone as de, ShieldCheck as je, Lightbulb as Ne, FolderKanban as Ee, Layers as Ye, TrendingUp as Ue, ChevronDown as De, Check as nt, Signal as lt, ChevronLeft as rt, ChevronRight as ot } from "lucide-react";
-import { D as Xe } from "./DataTable2.es.js";
-const r = {
+import { createPortal as vt } from "react-dom";
+import { ArrowLeft as kt, Download as Ze, CalendarDays as ve, ArrowRight as Ee, Phone as ye, ShieldCheck as qe, Lightbulb as Qe, FolderKanban as et, Layers as tt, ChevronDown as We, TrendingDown as wt, TrendingUp as nt, Check as St, Signal as Dt, ChevronLeft as Lt, ChevronRight as zt } from "lucide-react";
+import { D as it } from "./DataTable2.es.js";
+const Te = {
+  "8h": 8 * 60 * 60 * 1e3,
+  "1d": 24 * 60 * 60 * 1e3,
+  "7d": 7 * 24 * 60 * 60 * 1e3,
+  "30d": 30 * 24 * 60 * 60 * 1e3
+}, lt = "en-US", Ft = { month: "2-digit", day: "2-digit", year: "numeric" }, Wt = { hour: "numeric", minute: "2-digit", hour12: !0 };
+function me(t) {
+  if (!t)
+    return null;
+  if (t instanceof Date)
+    return Number.isNaN(t.getTime()) ? null : t;
+  const n = String(t).trim(), i = n.match(/^(\d{4})-(\d{1,2})-(\d{1,2})/);
+  if (i) {
+    const s = new Date(Number(i[1]), Number(i[2]) - 1, Number(i[3]));
+    return Number.isNaN(s.getTime()) ? null : s;
+  }
+  const o = new Date(n);
+  return Number.isNaN(o.getTime()) ? null : o;
+}
+function rt(t, n) {
+  return t.getFullYear() === n.getFullYear() && t.getMonth() === n.getMonth() && t.getDate() === n.getDate();
+}
+function ee(t) {
+  const n = t instanceof Date ? t : me(t);
+  return n ? n.toLocaleDateString(lt, Ft) : "";
+}
+function $e(t) {
+  return t.toLocaleTimeString(lt, Wt);
+}
+function oe(t) {
+  return `${ee(t)} ${$e(t)}`;
+}
+function Tt(t, n) {
+  const i = me(t), o = me(n);
+  return !i || !o ? "" : rt(i, o) ? `${oe(i)} – ${$e(o)}` : `${oe(i)} – ${oe(o)}`;
+}
+function $t(t, n) {
+  const i = me(t), o = me(n);
+  return !i || !o ? null : rt(i, o) ? { from: oe(i), to: $e(o) } : { from: oe(i), to: oe(o) };
+}
+function Fe(t) {
+  const n = Te[t];
+  if (!n)
+    return null;
+  const i = /* @__PURE__ */ new Date();
+  return { from: new Date(i.getTime() - n), to: i };
+}
+function It(t) {
+  if (!Te[t])
+    return "";
+  const i = Fe(t);
+  return i ? t === "8h" ? Tt(i.from, i.to) : `${ee(i.from)} – ${ee(i.to)}` : "";
+}
+const ot = "M1.00049 13.5213C7.85975 11.7032 8.88149 4.73912 13.7838 4.73912C19.8344 4.73912 23.6237 17.166 29.1281 17.166C34.5998 17.166 37.4149 4.88121 43.4004 8.61051C47.9764 11.4616 50.6186 1.00024 50.6186 1.00024", at = "M1.00049 16.692C8.88149 15.6975 8.88149 7.79403 13.7838 7.79403C19.8344 7.79403 23.6237 21.4034 29.1281 21.4034C34.5998 21.4034 37.4149 8.93821 43.4004 12.7223C47.9764 15.6152 50.6186 5.00024 50.6186 5.00024V36.0002C50.6186 36.0002 10.8223 36.0002 1.00049 36.0002C1.00049 28.8653 1.00049 19.4871 1.00049 16.692Z";
+function Ie(t) {
+  if (!Array.isArray(t))
+    return null;
+  const n = t.map((i) => Array.isArray(i) ? Number(i[1]) : i == null || i === "" ? NaN : Number(i)).filter((i) => Number.isFinite(i));
+  return n.length >= 2 ? n : null;
+}
+function st(t, n = 52, i = 36) {
+  const o = Ie(t);
+  if (!o)
+    return null;
+  const s = Math.min(...o), d = Math.max(...o), c = 4, u = d - s || 1, F = i - c * 2 - 4, y = (L) => (o.length === 1 ? 0 : L / (o.length - 1) * (n - 2)) + 1, m = (L) => c + (1 - (L - s) / u) * F;
+  let b = "";
+  for (let L = 0; L < o.length; L++)
+    b += `${L === 0 ? "M" : "L"}${y(L).toFixed(2)},${m(o[L]).toFixed(2)}`;
+  const k = y(o.length - 1), D = y(0), $ = `${b} L${k.toFixed(2)},${i} L${D.toFixed(2)},${i} Z`;
+  return { line: b, area: $ };
+}
+function Ce(t) {
+  const n = Ie(t);
+  if (!n)
+    return null;
+  const i = n[0], o = n[n.length - 1];
+  return o > i ? "up" : o < i ? "down" : "up";
+}
+const dt = "—";
+function Ae(t) {
+  if (t == null)
+    return !0;
+  const n = String(t).trim();
+  return !!(!n || /^[-−–—]$/.test(n) || /^(n\/a|null|undefined)$/i.test(n));
+}
+function ke(t) {
+  return !Ae(t);
+}
+function ct(t, n = dt) {
+  return Ae(t) ? n : String(t);
+}
+function Oe(t) {
+  return t != null && String(t).trim() !== "";
+}
+function V(t) {
+  return t ? Oe(t.value) || Oe(t.delta) ? !0 : Array.isArray(t.points) && t.points.length > 0 : !1;
+}
+function Ct(t) {
+  if (Ae(t))
+    return null;
+  const n = String(t).trim(), i = n.match(/\(\s*([+-])?\s*([\d.]+)/);
+  return i ? i[1] === "-" ? "down" : i[1] === "+" ? "up" : parseFloat(i[2]) < 0 ? "down" : "up" : /^[-−]/.test(n) ? "down" : /^\+/.test(n) ? "up" : /-\d/.test(n) ? "down" : null;
+}
+function Me(t, n) {
+  return Ct(n) ?? (t === "down" ? "down" : "up");
+}
+function At(t, n, i) {
+  return Ce(i) ?? (ke(n) ? Me(t, n) : t === "down" ? "down" : "up");
+}
+const a = {
   ink: "var(--color-text)",
   muted: "var(--color-text-secondary)",
   border: "var(--grey-absent)",
@@ -24,50 +133,69 @@ const r = {
   // Section accent colors are passed to SectionHeading via `iconColor`.
   railCompliance: "var(--rail-compliance)",
   accentYellow: "var(--accent-yellow)"
-}, V = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", C = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
-function $e(t) {
+}, te = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", W = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
+function ut({ direction: t = "up", color: n = a.muted }) {
+  return /* @__PURE__ */ e("svg", { width: 18, height: 9.5, viewBox: "0 0 19 10", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: t === "up" ? "M12.4167 0.75H17.4167M17.4167 0.75V5.75M17.4167 0.75L10.3333 7.83333L6.16667 3.66667L0.75 9.08333" : "M12.4167 9.25H17.4167M17.4167 9.25V4.25M17.4167 9.25L10.3333 2.16667L6.16667 6.33333L0.75 0.91667",
+      stroke: n,
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function _e(t) {
   if (!t)
     return "";
-  const l = { month: "2-digit", day: "2-digit", year: "numeric" };
+  const n = { month: "2-digit", day: "2-digit", year: "numeric" };
   if (t instanceof Date)
-    return Number.isNaN(t.getTime()) ? "" : t.toLocaleDateString("en-US", l);
-  const a = String(t).trim(), o = a.match(/^(\d{4})-(\d{1,2})-(\d{1,2})/);
+    return Number.isNaN(t.getTime()) ? "" : t.toLocaleDateString("en-US", n);
+  const i = String(t).trim(), o = i.match(/^(\d{4})-(\d{1,2})-(\d{1,2})/);
   if (o)
-    return new Date(Number(o[1]), Number(o[2]) - 1, Number(o[3])).toLocaleDateString("en-US", l);
-  const d = new Date(a);
-  return Number.isNaN(d.getTime()) ? a : d.toLocaleDateString("en-US", l);
+    return new Date(Number(o[1]), Number(o[2]) - 1, Number(o[3])).toLocaleDateString("en-US", n);
+  const s = new Date(i);
+  return Number.isNaN(s.getTime()) ? i : s.toLocaleDateString("en-US", n);
 }
-const at = "M1.00049 13.5213C7.85975 11.7032 8.88149 4.73912 13.7838 4.73912C19.8344 4.73912 23.6237 17.166 29.1281 17.166C34.5998 17.166 37.4149 4.88121 43.4004 8.61051C47.9764 11.4616 50.6186 1.00024 50.6186 1.00024", st = "M1.00049 16.692C8.88149 15.6975 8.88149 7.79403 13.7838 7.79403C19.8344 7.79403 23.6237 21.4034 29.1281 21.4034C34.5998 21.4034 37.4149 8.93821 43.4004 12.7223C47.9764 15.6152 50.6186 5.00024 50.6186 5.00024V36.0002C50.6186 36.0002 10.8223 36.0002 1.00049 36.0002C1.00049 28.8653 1.00049 19.4871 1.00049 16.692Z";
-function dt(t, l = 52, a = 36) {
-  if (!Array.isArray(t))
-    return null;
-  const o = t.map((k) => Number(k)).filter((k) => Number.isFinite(k));
-  if (o.length < 2)
-    return null;
-  const d = Math.min(...o), s = Math.max(...o), p = 4, h = s - d || 1, v = a - p * 2 - 4, u = (k) => (o.length === 1 ? 0 : k / (o.length - 1) * (l - 2)) + 1, g = (k) => p + (1 - (k - d) / h) * v;
-  let x = "";
-  for (let k = 0; k < o.length; k++)
-    x += `${k === 0 ? "M" : "L"}${u(k).toFixed(2)},${g(o[k]).toFixed(2)}`;
-  const m = u(o.length - 1), z = u(0), O = `${x} L${m.toFixed(2)},${a} L${z.toFixed(2)},${a} Z`;
-  return { line: x, area: O };
-}
-function ct({ trend: t = "up", points: l, width: a = 49.618, height: o = 35 }) {
-  const d = S.useId(), s = dt(l), p = s ? s.line : at, h = s ? s.area : st;
-  return /* @__PURE__ */ i(
+function Mt({ trend: t = "up", points: n, empty: i = !1, width: o = 49.618, height: s = 35 }) {
+  const d = S.useId();
+  if (i)
+    return /* @__PURE__ */ e(
+      "svg",
+      {
+        width: o,
+        height: s,
+        viewBox: "0 0 52 36",
+        fill: "none",
+        style: { flexShrink: 0 },
+        children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M2,18 L50,18",
+            stroke: a.ink,
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      }
+    );
+  const c = st(n), u = c ? c.line : ot, F = c ? c.area : at;
+  return /* @__PURE__ */ l(
     "svg",
     {
-      width: a,
-      height: o,
+      width: o,
+      height: s,
       viewBox: "0 0 52 36",
       fill: "none",
       style: {
         flexShrink: 0,
         // Only mirror the canned curve. When real points are supplied the
         // shape already reflects direction, so no mirror needed.
-        transform: !s && t === "down" ? "scaleX(-1)" : void 0
+        transform: !c && t === "down" ? "scaleX(-1)" : void 0
       },
       children: [
-        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ i(
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l(
           "linearGradient",
           {
             id: `spark-${d}`,
@@ -77,15 +205,15 @@ function ct({ trend: t = "up", points: l, width: a = 49.618, height: o = 35 }) {
             y2: "36.0002",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ e("stop", { stopColor: r.ink }),
-              /* @__PURE__ */ e("stop", { offset: "1", stopColor: r.white, stopOpacity: "0.01" })
+              /* @__PURE__ */ e("stop", { stopColor: a.ink }),
+              /* @__PURE__ */ e("stop", { offset: "1", stopColor: a.white, stopOpacity: "0.01" })
             ]
           }
         ) }),
         /* @__PURE__ */ e(
           "path",
           {
-            d: h,
+            d: F,
             fill: `url(#spark-${d})`,
             fillRule: "evenodd",
             clipRule: "evenodd",
@@ -95,71 +223,87 @@ function ct({ trend: t = "up", points: l, width: a = 49.618, height: o = 35 }) {
         /* @__PURE__ */ e(
           "path",
           {
-            d: p,
-            stroke: r.ink,
+            d: u,
+            stroke: a.ink,
             strokeWidth: "2",
             fill: "none",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            strokeDasharray: !s && t === "down" ? "2 4" : void 0
+            strokeDasharray: !c && t === "down" ? "2 4" : void 0
           }
         )
       ]
     }
   );
 }
-function ke({ value: t, label: l, sub: a, trend: o = "up", points: d }) {
-  return /* @__PURE__ */ i(
+function Ht({ value: t, label: n, sub: i, trend: o = "up", points: s }) {
+  const d = ct(t), c = ke(t) || Ie(s) != null, u = At(o, t, s);
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
-        flex: 1,
         display: "flex",
         alignItems: "center",
+        justifyContent: "center",
         gap: 16,
         minWidth: 0
       },
       children: [
-        /* @__PURE__ */ e(ct, { trend: o, points: d }),
-        /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }, children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              flexShrink: 0,
+              alignItems: "flex-end"
+            },
+            children: [
+              /* @__PURE__ */ e(Mt, { trend: u, points: s, empty: !c }),
+              c ? /* @__PURE__ */ e(ut, { direction: u }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }, children: [
           /* @__PURE__ */ e(
             "div",
             {
               style: {
-                fontFamily: V,
+                fontFamily: te,
                 fontSize: 28,
                 fontWeight: 400,
                 lineHeight: "1.2",
-                color: r.muted,
+                color: a.muted,
                 letterSpacing: "-0.01em",
                 whiteSpace: "nowrap"
               },
-              children: t
+              children: d
             }
           ),
-          /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+          /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
             /* @__PURE__ */ e(
               "span",
               {
                 style: {
-                  fontFamily: C,
+                  fontFamily: W,
                   fontSize: 13,
-                  color: r.ink,
+                  color: a.ink,
                   lineHeight: "1.2"
                 },
-                children: l
+                children: n
               }
             ),
             /* @__PURE__ */ e(
               "span",
               {
                 style: {
-                  fontFamily: C,
+                  fontFamily: W,
                   fontSize: 13,
-                  color: r.neutral600,
+                  color: a.neutral600,
                   lineHeight: "1.2"
                 },
-                children: a
+                children: i
               }
             )
           ] })
@@ -168,21 +312,21 @@ function ke({ value: t, label: l, sub: a, trend: o = "up", points: d }) {
     }
   );
 }
-function pt({ label: t, active: l = !1, onClick: a }) {
+function Pt({ label: t, active: n = !1, onClick: i }) {
   return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: a,
+      onClick: i,
       style: {
         height: 32,
         minWidth: 31,
         padding: "0 12px",
         borderRadius: 10,
-        border: l ? "none" : `1px solid ${r.borderSubtle}`,
-        background: l ? r.black : r.white,
-        color: l ? r.white : r.black,
-        fontFamily: C,
+        border: n ? "none" : `1px solid ${a.borderSubtle}`,
+        background: n ? a.black : a.white,
+        color: n ? a.white : a.black,
+        fontFamily: W,
         fontSize: 14,
         cursor: "pointer"
       },
@@ -190,54 +334,60 @@ function pt({ label: t, active: l = !1, onClick: a }) {
     }
   );
 }
-function re({
+function ue({
   // When omitted, y-axis labels are auto-derived from `points` (5 evenly-spaced
   // ticks from max → min). Pass a custom array to override the formatting.
   yLabels: t,
-  xLabels: l = [],
+  xLabels: n = [],
   // points: array of [x, y] pairs OR array of y-numbers (auto-distributed in x).
   // y is in DATA space — the chart auto-scales it to pixel space using the
   // points' own min/max (with a small padding).
-  points: a,
+  points: i,
   // index of the marker to render filled (defaults to the last point)
   highlightIndex: o
 }) {
-  const p = Array.isArray(a) && a.length > 0, h = S.useId(), v = 6, u = Array.isArray(l) ? l : [], g = u.length <= v ? u : Array.from(
-    { length: v },
-    (y, w) => u[Math.round(w * (u.length - 1) / (v - 1))]
-  ), x = Math.max(2, g.length || v), m = Array.from({ length: x }, (y, w) => w / (x - 1) * 460);
-  if (!p)
-    return /* @__PURE__ */ i("div", { style: { display: "flex", gap: 8, height: 133, width: "100%" }, children: [
+  const [s, d] = S.useState(null), c = 460, u = 110, F = Array.isArray(i) && i.length > 0, y = S.useId(), m = 6, b = Array.isArray(n) ? n : [], k = b.length <= m ? b : Array.from(
+    { length: m },
+    (p, g) => b[Math.round(g * (b.length - 1) / (m - 1))]
+  ), D = Math.max(2, k.length || m), $ = Array.from({ length: D }, (p, g) => g / (D - 1) * c);
+  if (!F)
+    return /* @__PURE__ */ l("div", { style: { display: "flex", gap: 8, height: 133, width: "100%" }, children: [
       /* @__PURE__ */ e("div", { style: { width: 24, flexShrink: 0 } }),
       /* @__PURE__ */ e("div", { style: { flex: 1, position: "relative", minWidth: 0 }, children: /* @__PURE__ */ e(
         "svg",
         {
           width: "100%",
-          height: 110 + 14,
-          viewBox: `0 0 460 ${110 + 14}`,
+          height: u + 14,
+          viewBox: `0 0 ${c} ${u + 14}`,
           preserveAspectRatio: "none",
-          children: m.map((y, w) => /* @__PURE__ */ e(
+          children: $.map((p, g) => /* @__PURE__ */ e(
             "line",
             {
-              x1: y,
+              x1: p,
               y1: "0",
-              x2: y,
-              y2: 110,
-              stroke: r.borderSubtle,
+              x2: p,
+              y2: u,
+              stroke: a.borderSubtle,
               strokeDasharray: "2 3",
               strokeWidth: "1",
               vectorEffect: "non-scaling-stroke"
             },
-            `grid-${w}`
+            `grid-${g}`
           ))
         }
       ) })
     ] });
-  const z = Array.isArray(a[0]) ? a : a.map((y, w) => [w, y]), O = z.map(([, y]) => y), k = Math.min(...O), N = Math.max(...O), _ = N === k ? Math.max(Math.abs(N) * 0.1, 1) : (N - k) * 0.1, E = k - _, B = N + _, U = B - E || 1, X = (y) => (B - y) / U * 110, L = z.map(([y, w]) => [y, X(w)]), f = t && t.length ? t : Array.from({ length: 5 }, (y, w) => {
-    const H = B - w / 4 * (B - E), $ = Math.abs(H), ee = $ >= 100 ? 0 : $ >= 10 ? 1 : 2;
-    return H.toFixed(ee);
-  }), F = L[0][0], j = L[L.length - 1][0] - F || 1, T = (y) => (y - F) / j * 460, P = L.map(([y, w], H) => `${H === 0 ? "M" : "L"}${T(y)},${w}`).join(" "), q = `${P} L${T(L[L.length - 1][0])},110 L${T(L[0][0])},110 Z`, Q = o ?? L.length - 1;
-  return /* @__PURE__ */ i("div", { style: { display: "flex", gap: 8, height: 133, width: "100%" }, children: [
+  const L = Array.isArray(i[0]) ? i : i.map((p, g) => [g, p]), Y = L.map(([, p]) => p), M = Math.min(...Y), E = Math.max(...Y), X = E === M ? Math.max(Math.abs(E) * 0.1, 1) : (E - M) * 0.1, G = M - X, O = E + X, Z = O - G || 1, h = (p) => (O - p) / Z * u, v = L.map(([p, g]) => [p, h(g)]), I = t && t.length ? t : Array.from({ length: 5 }, (p, g) => {
+    const T = O - g / 4 * (O - G), P = Math.abs(T), C = P >= 100 ? 0 : P >= 10 ? 1 : 2;
+    return T.toFixed(C);
+  }), H = v[0][0], _ = v[v.length - 1][0] - H || 1, ie = 8, ae = Math.max(1, c - ie * 2), J = (p) => ie + (p - H) / _ * ae, q = (p) => {
+    const g = Number(p);
+    if (!Number.isFinite(g))
+      return String(p ?? "");
+    const T = Math.abs(g), P = T >= 100 ? 0 : T >= 10 ? 1 : 2;
+    return g.toFixed(P);
+  }, Q = v.map(([p, g], T) => `${T === 0 ? "M" : "L"}${J(p)},${g}`).join(" "), j = `${Q} L${J(v[v.length - 1][0])},${u} L${J(v[0][0])},${u} Z`, se = o ?? v.length - 1;
+  return /* @__PURE__ */ l("div", { style: { display: "flex", gap: 8, height: 133, width: "100%" }, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -246,47 +396,91 @@ function re({
           flexDirection: "column",
           justifyContent: "space-between",
           padding: "14px 0",
-          fontFamily: C,
+          fontFamily: W,
           fontSize: 10,
-          color: r.neutral800,
+          color: a.neutral800,
           flexShrink: 0
         },
-        children: f.map((y) => /* @__PURE__ */ e("span", { children: y }, y))
+        children: I.map((p) => /* @__PURE__ */ e("span", { children: p }, p))
       }
     ),
-    /* @__PURE__ */ i("div", { style: { flex: 1, position: "relative", minWidth: 0 }, children: [
-      /* @__PURE__ */ i(
+    /* @__PURE__ */ l("div", { style: { flex: 1, position: "relative", minWidth: 0 }, children: [
+      s && /* @__PURE__ */ l(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: `${s.xPct}%`,
+            top: `${s.yPct}%`,
+            transform: "translate(-50%, calc(-100% - 10px))",
+            pointerEvents: "none",
+            zIndex: 2,
+            background: a.black,
+            color: a.white,
+            borderRadius: 6,
+            minWidth: 60,
+            padding: "8px 10px",
+            boxShadow: "0 6px 16px rgba(0,0,0,0.18)",
+            fontFamily: W,
+            fontSize: 11,
+            lineHeight: 1.25,
+            whiteSpace: "nowrap",
+            textAlign: "left"
+          },
+          children: [
+            /* @__PURE__ */ e("div", { children: s.label }),
+            /* @__PURE__ */ e("div", { style: { fontWeight: 600 }, children: s.value }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: "50%",
+                  bottom: -5,
+                  width: 10,
+                  height: 10,
+                  background: a.black,
+                  transform: "translateX(-50%) rotate(45deg)",
+                  borderRadius: 2
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ l(
         "svg",
         {
           width: "100%",
-          height: 110 + 14,
-          viewBox: `0 0 460 ${110 + 14}`,
+          height: u + 14,
+          viewBox: `0 0 ${c} ${u + 14}`,
           preserveAspectRatio: "none",
+          onMouseLeave: () => d(null),
           children: [
-            /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ i("linearGradient", { id: `area-${h}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ e("stop", { offset: "0%", style: { stopColor: r.black, stopOpacity: 0.08 } }),
-              /* @__PURE__ */ e("stop", { offset: "100%", style: { stopColor: r.black, stopOpacity: 0 } })
+            /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l("linearGradient", { id: `area-${y}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ e("stop", { offset: "0%", style: { stopColor: a.black, stopOpacity: 0.08 } }),
+              /* @__PURE__ */ e("stop", { offset: "100%", style: { stopColor: a.black, stopOpacity: 0 } })
             ] }) }),
-            m.map((y, w) => /* @__PURE__ */ e(
+            $.map((p, g) => /* @__PURE__ */ e(
               "line",
               {
-                x1: y,
+                x1: p,
                 y1: "0",
-                x2: y,
-                y2: 110,
-                stroke: r.borderSubtle,
+                x2: p,
+                y2: u,
+                stroke: a.borderSubtle,
                 strokeDasharray: "2 3",
                 strokeWidth: "1",
                 vectorEffect: "non-scaling-stroke"
               },
-              `grid-${w}`
+              `grid-${g}`
             )),
-            /* @__PURE__ */ e("path", { d: q, fill: `url(#area-${h})` }),
+            /* @__PURE__ */ e("path", { d: j, fill: `url(#area-${y})` }),
             /* @__PURE__ */ e(
               "path",
               {
-                d: P,
-                stroke: r.black,
+                d: Q,
+                stroke: a.black,
                 strokeWidth: "1.5",
                 fill: "none",
                 strokeLinecap: "round",
@@ -294,20 +488,29 @@ function re({
                 vectorEffect: "non-scaling-stroke"
               }
             ),
-            L.map(([y, w], H) => {
-              const $ = H === Q;
+            v.map(([p, g], T) => {
+              const P = T === se;
               return /* @__PURE__ */ e(
                 "circle",
                 {
-                  cx: T(y),
-                  cy: w,
-                  r: $ ? 4 : 3,
-                  fill: $ ? r.black : r.white,
-                  stroke: r.black,
+                  cx: J(p),
+                  cy: g,
+                  r: P ? 4 : 3,
+                  fill: P ? a.black : a.white,
+                  stroke: a.black,
                   strokeWidth: "1.5",
-                  vectorEffect: "non-scaling-stroke"
+                  vectorEffect: "non-scaling-stroke",
+                  onMouseEnter: () => {
+                    var C;
+                    d({
+                      xPct: J(p) / c * 100,
+                      yPct: g / (u + 28) * 100,
+                      label: b[T] || `Point ${T + 1}`,
+                      value: q((C = L[T]) == null ? void 0 : C[1])
+                    });
+                  }
                 },
-                H
+                T
               );
             })
           ]
@@ -320,62 +523,80 @@ function re({
             display: "flex",
             justifyContent: "space-between",
             paddingRight: 6,
-            fontFamily: C,
+            fontFamily: W,
             fontSize: 10,
-            color: r.neutral800,
-            marginTop: 6,
+            color: a.neutral800,
+            marginTop: 8,
+            marginBottom: 4,
             overflow: "hidden"
           },
-          children: g.map((y, w) => /* @__PURE__ */ e("span", { style: { whiteSpace: "nowrap" }, children: y }, w))
+          children: k.map((p, g) => /* @__PURE__ */ e("span", { style: { whiteSpace: "nowrap" }, children: p }, g))
         }
       )
     ] })
   ] });
 }
-function oe({ title: t, value: l, delta: a, children: o }) {
-  return /* @__PURE__ */ i(
+function fe({ title: t, value: n, delta: i, children: o }) {
+  const s = ct(n), d = ke(i), c = d ? Me("up", i) : "up";
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
         flex: 1,
-        background: r.white,
-        border: `1px solid ${r.border}`,
+        background: a.white,
+        border: `1px solid ${a.border}`,
         borderRadius: 8,
         padding: 24,
         display: "flex",
         flexDirection: "column",
         gap: 24,
         minWidth: 0,
-        boxShadow: r.shadowCard
+        boxShadow: a.shadowCard
       },
       children: [
-        /* @__PURE__ */ i("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end" }, children: [
+        /* @__PURE__ */ l("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end" }, children: [
           /* @__PURE__ */ e(
             "span",
             {
               style: {
-                fontFamily: V,
+                fontFamily: te,
                 fontWeight: 600,
                 fontSize: 15,
-                color: r.ink,
+                color: a.ink,
                 lineHeight: 1.2
               },
               children: t
             }
           ),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ l(
             "span",
             {
               style: {
                 display: "inline-flex",
                 alignItems: "flex-end",
                 gap: 4,
-                fontFamily: V,
+                fontFamily: te,
                 fontWeight: 600
               },
               children: [
-                /* @__PURE__ */ e("span", { style: { fontSize: 20, color: r.black, lineHeight: 1 }, children: l }),
-                /* @__PURE__ */ e("span", { style: { fontSize: 10, color: r.neutral300, lineHeight: 1 }, children: a })
+                /* @__PURE__ */ e("span", { style: { fontSize: 20, color: a.black, lineHeight: 1 }, children: s }),
+                d ? /* @__PURE__ */ l(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 3,
+                      fontSize: 10,
+                      color: a.neutral300,
+                      lineHeight: 1
+                    },
+                    children: [
+                      /* @__PURE__ */ e(ut, { direction: c, color: a.neutral300 }),
+                      i
+                    ]
+                  }
+                ) : null
               ]
             }
           )
@@ -385,8 +606,8 @@ function oe({ title: t, value: l, delta: a, children: o }) {
     }
   );
 }
-function we({ icon: t, title: l, trailing: a, iconColor: o = r.ink, bordered: d = !1 }) {
-  return /* @__PURE__ */ i(
+function Le({ icon: t, title: n, trailing: i, iconColor: o = a.ink, bordered: s = !1 }) {
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -394,8 +615,8 @@ function we({ icon: t, title: l, trailing: a, iconColor: o = r.ink, bordered: d
         alignItems: "center",
         gap: 8,
         width: "100%",
-        paddingBottom: d ? 12 : 0,
-        borderBottom: d ? `1px solid ${r.border}` : "none"
+        paddingBottom: s ? 12 : 0,
+        borderBottom: s ? `1px solid ${a.border}` : "none"
       },
       children: [
         /* @__PURE__ */ e(
@@ -417,60 +638,60 @@ function we({ icon: t, title: l, trailing: a, iconColor: o = r.ink, bordered: d
           {
             style: {
               flex: 1,
-              fontFamily: V,
+              fontFamily: te,
               fontWeight: 600,
               fontSize: 16,
-              color: r.ink,
+              color: a.ink,
               lineHeight: 1.2,
               textTransform: "uppercase",
               letterSpacing: "0.02em"
             },
-            children: l
+            children: n
           }
         ),
-        a && /* @__PURE__ */ e("div", { style: { fontFamily: C, fontSize: 14, color: r.ink }, children: a })
+        i && /* @__PURE__ */ e("div", { style: { fontFamily: W, fontSize: 14, color: a.ink }, children: i })
       ]
     }
   );
 }
-function ht({ text: t, bullet: l, citation: a, date: o, href: d }) {
-  const s = t ?? l ?? "";
-  return /* @__PURE__ */ i(
+function Nt({ text: t, bullet: n, citation: i, date: o, href: s }) {
+  const d = t ?? n ?? "";
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
         display: "flex",
         justifyContent: "space-between",
         alignItems: "center",
-        fontFamily: C,
+        fontFamily: W,
         fontSize: 14,
-        color: r.ink,
+        color: a.ink,
         lineHeight: "24px",
         gap: 16
       },
       children: [
-        d ? /* @__PURE__ */ e(
+        s ? /* @__PURE__ */ e(
           "a",
           {
-            href: d,
+            href: s,
             target: "_blank",
             rel: "noopener noreferrer",
             style: {
-              color: r.ink,
+              color: a.ink,
               textDecoration: "underline",
               textUnderlineOffset: 2,
-              textDecorationColor: r.border,
+              textDecorationColor: a.border,
               minWidth: 0,
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap"
             },
-            children: s
+            children: d
           }
-        ) : /* @__PURE__ */ e("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: s }),
-        /* @__PURE__ */ i("span", { style: { display: "inline-flex", gap: 4, whiteSpace: "nowrap" }, children: [
-          /* @__PURE__ */ e("span", { style: { color: r.ink }, children: a }),
-          o ? /* @__PURE__ */ i("span", { style: { color: r.muted }, children: [
+        ) : /* @__PURE__ */ e("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: d }),
+        /* @__PURE__ */ l("span", { style: { display: "inline-flex", gap: 4, whiteSpace: "nowrap" }, children: [
+          /* @__PURE__ */ e("span", { style: { color: a.ink }, children: i }),
+          o ? /* @__PURE__ */ l("span", { style: { color: a.muted }, children: [
             "(",
             o,
             ")"
@@ -480,25 +701,25 @@ function ht({ text: t, bullet: l, citation: a, date: o, href: d }) {
     }
   );
 }
-function Ae({
+function je({
   title: t,
-  summary: l,
-  calls: a,
+  summary: n,
+  calls: i,
   // Hosts emit `percent` (matches PerformancePanel's accordion); legacy
   // callers may still send `delta`. Accept either.
   percent: o,
-  delta: d,
-  bullets: s,
-  defaultExpanded: p = !1
+  delta: s,
+  bullets: d,
+  defaultExpanded: c = !1
 }) {
-  const [h, v] = S.useState(p), u = o ?? d ?? "", g = Array.isArray(s) ? s : [];
-  return /* @__PURE__ */ i("div", { style: { borderTop: `1px solid ${r.border}` }, children: [
-    /* @__PURE__ */ i(
+  const [u, F] = S.useState(c), y = o ?? s, m = ke(y), b = m ? String(y) : dt, D = (m ? Me("up", b) : "up") === "down" ? wt : nt, $ = Array.isArray(d) ? d : [];
+  return /* @__PURE__ */ l("div", { style: { borderTop: `1px solid ${a.border}` }, children: [
+    /* @__PURE__ */ l(
       "button",
       {
         type: "button",
-        onClick: () => v((x) => !x),
-        "aria-expanded": h,
+        onClick: () => F((L) => !L),
+        "aria-expanded": u,
         style: {
           border: "none",
           background: "transparent",
@@ -509,46 +730,59 @@ function Ae({
           cursor: "pointer",
           width: "100%",
           textAlign: "left",
-          fontFamily: C
+          fontFamily: W
         },
         children: [
-          /* @__PURE__ */ i("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 12, minWidth: 0 }, children: [
-            /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+          /* @__PURE__ */ l("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 12, minWidth: 0 }, children: [
+            /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
               /* @__PURE__ */ e(
                 "span",
                 {
                   style: {
-                    fontFamily: C,
+                    fontFamily: W,
                     fontWeight: 500,
                     fontSize: 14,
-                    color: r.black,
+                    color: a.black,
                     lineHeight: "24px"
                   },
                   children: t
                 }
               ),
-              /* @__PURE__ */ e("span", { style: { fontFamily: C, fontSize: 14, color: r.muted, lineHeight: "24px" }, children: l })
+              /* @__PURE__ */ e("span", { style: { fontFamily: W, fontSize: 14, color: a.muted, lineHeight: "24px" }, children: n })
             ] }),
-            /* @__PURE__ */ i("div", { style: { display: "flex", gap: 16 }, children: [
-              /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                /* @__PURE__ */ e(de, { size: 12, color: r.ink, strokeWidth: 1.75 }),
-                /* @__PURE__ */ e("span", { style: { fontFamily: C, fontSize: 12, color: r.ink }, children: a })
+            /* @__PURE__ */ l("div", { style: { display: "flex", gap: 16 }, children: [
+              /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                /* @__PURE__ */ e(ye, { size: 12, color: a.ink, strokeWidth: 1.75 }),
+                /* @__PURE__ */ l("span", { style: { fontFamily: W, fontSize: 12, color: a.ink }, children: [
+                  i,
+                  " calls"
+                ] })
               ] }),
-              /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                /* @__PURE__ */ e(Ue, { size: 12, color: r.ink, strokeWidth: 1.75 }),
-                /* @__PURE__ */ e("span", { style: { fontFamily: C, fontSize: 12, color: r.ink }, children: u })
+              /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                m ? /* @__PURE__ */ e(D, { size: 12, color: a.ink, strokeWidth: 1.75 }) : null,
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: W,
+                      fontSize: 12,
+                      color: m ? a.ink : a.muted
+                    },
+                    children: b
+                  }
+                )
               ] })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            De,
+            We,
             {
               size: 20,
-              color: r.ink,
+              color: a.ink,
               strokeWidth: 2,
               style: {
                 flexShrink: 0,
-                transform: h ? "rotate(180deg)" : "none",
+                transform: u ? "rotate(180deg)" : "none",
                 transition: "transform 150ms ease"
               }
             }
@@ -556,7 +790,7 @@ function Ae({
         ]
       }
     ),
-    h && g.length > 0 && /* @__PURE__ */ e(
+    u && $.length > 0 && /* @__PURE__ */ e(
       "div",
       {
         style: {
@@ -565,13 +799,13 @@ function Ae({
           gap: 12,
           padding: "0 16px 16px"
         },
-        children: g.map((x, m) => /* @__PURE__ */ e(ht, { ...x }, m))
+        children: $.map((L, Y) => /* @__PURE__ */ e(Nt, { ...L }, Y))
       }
     )
   ] });
 }
-function Te({ label: t, value: l }) {
-  return /* @__PURE__ */ i(
+function Ye({ label: t, value: n }) {
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -579,33 +813,33 @@ function Te({ label: t, value: l }) {
         justifyContent: "space-between",
         alignItems: "center",
         padding: "8px 8px 12px",
-        borderBottom: `1px solid ${r.border}`,
-        fontFamily: C,
+        borderBottom: `1px solid ${a.border}`,
+        fontFamily: W,
         fontSize: 13,
         lineHeight: "1.2"
       },
       children: [
-        /* @__PURE__ */ e("span", { style: { color: r.ink }, children: t }),
-        /* @__PURE__ */ e("span", { style: { color: r.muted }, children: l })
+        /* @__PURE__ */ e("span", { style: { color: a.ink }, children: t }),
+        /* @__PURE__ */ e("span", { style: { color: a.muted }, children: n })
       ]
     }
   );
 }
-function ft({ value: t = 0, max: l = 5 }) {
-  const a = typeof t == "number" ? t : parseFloat(t) || 0, o = Math.floor(a), d = a % 1 > 0 && o < l;
-  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 4 }, children: Array.from({ length: l }).map((s, p) => p < o ? /* @__PURE__ */ e(
+function Rt({ value: t = 0, max: n = 5 }) {
+  const i = typeof t == "number" ? t : parseFloat(t) || 0, o = Math.floor(i), s = i % 1 > 0 && o < n;
+  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 4 }, children: Array.from({ length: n }).map((d, c) => c < o ? /* @__PURE__ */ e(
     "span",
     {
       style: {
         width: 10,
         height: 10,
         borderRadius: "50%",
-        background: r.black,
+        background: a.black,
         display: "inline-block"
       }
     },
-    p
-  ) : p === o && d ? /* @__PURE__ */ e(
+    c
+  ) : c === o && s ? /* @__PURE__ */ e(
     "span",
     {
       style: {
@@ -623,13 +857,13 @@ function ft({ value: t = 0, max: l = 5 }) {
             width: 6,
             height: 6,
             borderRadius: "50%",
-            background: r.black,
+            background: a.black,
             display: "inline-block"
           }
         }
       )
     },
-    p
+    c
   ) : /* @__PURE__ */ e(
     "span",
     {
@@ -637,16 +871,16 @@ function ft({ value: t = 0, max: l = 5 }) {
         width: 10,
         height: 10,
         borderRadius: "50%",
-        background: r.white,
-        border: `1px solid ${r.border}`,
+        background: a.white,
+        border: `1px solid ${a.border}`,
         display: "inline-block",
         boxSizing: "border-box"
       }
     },
-    p
+    c
   )) });
 }
-const Lt = [
+const Qt = [
   { id: "title", label: "Title", width: 220, sortable: !0, filterable: !0 },
   { id: "date", label: "Date", width: 170, sortable: !0 },
   { id: "duration", label: "Duration", width: 170, sortable: !0 },
@@ -657,16 +891,16 @@ const Lt = [
     width: 220,
     sortable: !0,
     render: (t) => {
-      const l = typeof t == "number" ? t : parseFloat(t) || 0;
-      return /* @__PURE__ */ i("span", { style: { display: "inline-flex", alignItems: "center", gap: 12 }, children: [
+      const n = typeof t == "number" ? t : parseFloat(t) || 0;
+      return /* @__PURE__ */ l("span", { style: { display: "inline-flex", alignItems: "center", gap: 12 }, children: [
         /* @__PURE__ */ e("span", { style: { minWidth: 32 }, children: t }),
-        /* @__PURE__ */ e(ft, { value: l })
+        /* @__PURE__ */ e(Rt, { value: n })
       ] });
     }
   }
 ];
-function He({ icon: t, title: l }) {
-  return /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 16, width: "100%" }, children: [
+function Ue({ icon: t, title: n }) {
+  return /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 16, width: "100%" }, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -674,103 +908,116 @@ function He({ icon: t, title: l }) {
           width: 34,
           height: 34,
           borderRadius: 9999,
-          background: r.iconCircle,
+          background: a.iconCircle,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           flexShrink: 0
         },
-        children: /* @__PURE__ */ e(t, { size: 20, color: r.ink, strokeWidth: 1.75 })
+        children: /* @__PURE__ */ e(t, { size: 20, color: a.ink, strokeWidth: 1.75 })
       }
     ),
     /* @__PURE__ */ e(
       "span",
       {
         style: {
-          fontFamily: V,
+          fontFamily: te,
           fontWeight: 600,
           fontSize: 16,
-          color: r.ink,
+          color: a.ink,
           lineHeight: 1.2
         },
-        children: l
+        children: n
       }
     )
   ] });
 }
-function ut({
+function Bt({
   agentName: t = "",
-  startDate: l = "",
-  endDate: a = "",
+  startDate: n = "",
+  endDate: i = "",
   totalCalls: o = "",
-  onBack: d,
-  className: s = "",
+  onBack: s,
+  className: d = "",
   // KPI strip
-  kpiBaseline: p = { value: "", label: "", sub: "", trend: "up" },
-  kpiAgentLift: h = { value: "", label: "", sub: "", trend: "down" },
-  kpiScore: v = { value: "", label: "", sub: "", trend: "up" },
+  kpiBaseline: c = { value: "", label: "", sub: "", trend: "up" },
+  kpiAgentLift: u = { value: "", label: "", sub: "", trend: "down" },
+  kpiScore: F = { value: "", label: "", sub: "", trend: "up" },
   // Chart cards (Baseline / Agent Lift / Score / CSAT / Volume)
   // Each takes { value, delta, yLabels?, xLabels?, points? }.
   // points is an array of [x, y] pairs OR a flat array of y-numbers.
-  baselineChart: u = { value: "", delta: "" },
-  agentLiftChart: g = { value: "", delta: "" },
-  scoreChart: x = { value: "", delta: "" },
-  csatChart: m = { value: "", delta: "" },
-  volumeChart: z = { value: "", delta: "" },
+  baselineChart: y = { value: "", delta: "" },
+  agentLiftChart: m = { value: "", delta: "" },
+  scoreChart: b = { value: "", delta: "" },
+  csatChart: k = { value: "", delta: "" },
+  volumeChart: D = { value: "", delta: "" },
   // Insight sections — titles and chart-card labels stay empty by default
   // so the library doesn't ship demo copy.
-  guidanceItems: O = [],
-  strengthItems: k = [],
-  callDrivers: N = [],
-  callParadigms: _ = [],
+  guidanceItems: $ = [],
+  strengthItems: L = [],
+  callDrivers: Y = [],
+  callParadigms: M = [],
   strengthsTitle: E = "",
-  guidanceTitle: B = "",
-  callMixTitle: U = "",
-  driversTitle: X = "",
-  paradigmsTitle: L = "",
-  sessionsTitle: f = "",
-  baselineChartTitle: F = "",
-  agentLiftChartTitle: A = "",
-  scoreChartTitle: j = "",
-  csatChartTitle: T = "",
-  volumeChartTitle: P = "",
+  guidanceTitle: X = "",
+  callMixTitle: G = "",
+  driversTitle: O = "",
+  paradigmsTitle: Z = "",
+  sessionsTitle: h = "",
+  baselineChartTitle: v = "",
+  agentLiftChartTitle: I = "",
+  scoreChartTitle: H = "",
+  csatChartTitle: K = "",
+  volumeChartTitle: _ = "",
   // Sessions table
-  sessions: q = [],
-  sessionColumns: Q = [],
-  initialPageSize: y = 10,
+  sessions: ie = [],
+  sessionColumns: ae = [],
+  initialPageSize: J = 10,
   // Time-range chips state — mirrors PerformancePanel so the active chip /
   // Date Range highlight survives the navigation into the details page.
   // Callbacks are optional; when omitted the controls are display-only.
-  selectedWindow: w = "30d",
-  onWindowChange: H,
-  dateRange: $,
-  onDateRangeChange: ee,
+  selectedWindow: q = "30d",
+  onWindowChange: Q,
+  dateRange: j,
+  onDateRangeChange: se,
   // Server-side pagination for the sessions table. When all four are provided
   // the table switches to controlled / server-paginated mode and the host is
   // expected to refetch when the user changes page or page size.
-  sessionsTotal: Z = null,
-  sessionsPage: te = null,
-  sessionsPageSize: ce = null,
-  onSessionsPageChange: pe,
-  onSessionsPageSizeChange: G,
+  sessionsTotal: p = null,
+  sessionsPage: g = null,
+  sessionsPageSize: T = null,
+  onSessionsPageChange: P,
+  onSessionsPageSizeChange: C,
   // Fires when the user clicks the Export CSV button in the header. Disabled
   // if no handler is provided.
-  onExport: M,
+  onExport: A,
   // Fires when the user clicks a row in the sessions table.
-  onSessionClick: be,
+  onSessionClick: we,
   // Fires whenever the user toggles columns in the sessions table's column
   // picker — hosts can scope their CSV export to whatever the user has visible.
-  onSessionsVisibleColumnsChange: J
+  onSessionsVisibleColumnsChange: le
 }) {
-  const he = !!($ != null && $.from && ($ != null && $.to)), I = (W) => !!(W && (W.value || W.delta || Array.isArray(W.points) && W.points.length > 0)), ie = I(u) || I(g) || I(x), ne = I(m) || I(z);
-  return /* @__PURE__ */ i(
+  const re = !!(j != null && j.from && (j != null && j.to)), N = (() => {
+    if (re || q !== "8h")
+      return null;
+    const x = Fe("8h");
+    return x ? $t(x.from, x.to) : null;
+  })(), U = (() => {
+    if (re || q === "8h")
+      return null;
+    const x = Fe(q);
+    return x ? {
+      from: ee(x.from),
+      to: ee(x.to)
+    } : null;
+  })(), de = V(y) || V(m) || V(b), Se = V(k) || V(D);
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: s,
+      className: d,
       style: {
-        background: r.white,
-        fontFamily: C,
-        color: r.ink,
+        background: a.white,
+        fontFamily: W,
+        color: a.ink,
         width: "100%",
         minWidth: 1192,
         boxSizing: "border-box",
@@ -778,7 +1025,7 @@ function ut({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -795,7 +1042,7 @@ function ut({
                 {
                   type: "button",
                   "aria-label": "Back",
-                  onClick: d,
+                  onClick: s,
                   style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -805,11 +1052,11 @@ function ut({
                     background: "transparent",
                     border: "none",
                     cursor: "pointer",
-                    color: r.ink,
+                    color: a.ink,
                     padding: 0,
                     flexShrink: 0
                   },
-                  children: /* @__PURE__ */ e(it, { size: 20, strokeWidth: 1.75 })
+                  children: /* @__PURE__ */ e(kt, { size: 20, strokeWidth: 1.75 })
                 }
               ),
               /* @__PURE__ */ e(
@@ -817,7 +1064,7 @@ function ut({
                 {
                   style: {
                     paddingLeft: 16,
-                    borderLeft: `1px solid ${r.border}`,
+                    borderLeft: `1px solid ${a.border}`,
                     flex: 1,
                     minWidth: 0,
                     alignSelf: "stretch",
@@ -828,10 +1075,10 @@ function ut({
                     "h1",
                     {
                       style: {
-                        fontFamily: V,
+                        fontFamily: te,
                         fontSize: 24,
                         fontWeight: 400,
-                        color: r.ink,
+                        color: a.ink,
                         margin: 0,
                         lineHeight: 1,
                         whiteSpace: "nowrap"
@@ -841,12 +1088,12 @@ function ut({
                   )
                 }
               ),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ l(
                 "button",
                 {
                   type: "button",
-                  onClick: () => M == null ? void 0 : M(),
-                  disabled: !M,
+                  onClick: () => A == null ? void 0 : A(),
+                  disabled: !A,
                   style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -854,18 +1101,18 @@ function ut({
                     height: 32,
                     padding: "0 16px",
                     borderRadius: 10,
-                    border: `1px solid ${r.neutralBorder}`,
-                    background: r.white,
-                    cursor: M ? "pointer" : "not-allowed",
-                    opacity: M ? 1 : 0.5,
-                    fontFamily: C,
+                    border: `1px solid ${a.neutralBorder}`,
+                    background: a.white,
+                    cursor: A ? "pointer" : "not-allowed",
+                    opacity: A ? 1 : 0.5,
+                    fontFamily: W,
                     fontSize: 14,
                     lineHeight: "24px",
-                    color: r.neutral800,
+                    color: a.neutral800,
                     flexShrink: 0
                   },
                   children: [
-                    /* @__PURE__ */ e(Be, { size: 18, strokeWidth: 1.75 }),
+                    /* @__PURE__ */ e(Ze, { size: 18, strokeWidth: 1.75 }),
                     "Export CSV"
                   ]
                 }
@@ -873,7 +1120,7 @@ function ut({
             ]
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -883,7 +1130,7 @@ function ut({
               gap: 16
             },
             children: [
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ l(
                 "div",
                 {
                   style: {
@@ -894,44 +1141,44 @@ function ut({
                     paddingLeft: 49
                   },
                   children: [
-                    /* @__PURE__ */ i("div", { style: { display: "flex", gap: 16, alignItems: "center" }, children: [
-                      /* @__PURE__ */ i("div", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-                        /* @__PURE__ */ e(ge, { size: 14, color: r.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
+                    /* @__PURE__ */ l("div", { style: { display: "flex", gap: 16, alignItems: "center" }, children: [
+                      /* @__PURE__ */ l("div", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+                        /* @__PURE__ */ e(ve, { size: 14, color: a.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
                         /* @__PURE__ */ e(
                           "span",
                           {
                             style: {
-                              fontFamily: C,
+                              fontFamily: W,
                               fontSize: 12,
-                              color: r.ink,
+                              color: a.ink,
                               lineHeight: 1.5
                             },
-                            children: $e(l)
+                            children: (N == null ? void 0 : N.from) ?? (U == null ? void 0 : U.from) ?? _e(n)
                           }
                         ),
-                        /* @__PURE__ */ e(ve, { size: 12, color: r.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
+                        /* @__PURE__ */ e(Ee, { size: 12, color: a.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
                         /* @__PURE__ */ e(
                           "span",
                           {
                             style: {
-                              fontFamily: C,
+                              fontFamily: W,
                               fontSize: 12,
-                              color: r.ink,
+                              color: a.ink,
                               lineHeight: 1.5
                             },
-                            children: $e(a)
+                            children: (N == null ? void 0 : N.to) ?? (U == null ? void 0 : U.to) ?? _e(i)
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ i("div", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-                        /* @__PURE__ */ e(de, { size: 14, color: r.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
+                      /* @__PURE__ */ l("div", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+                        /* @__PURE__ */ e(ye, { size: 14, color: a.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
                         /* @__PURE__ */ e(
                           "span",
                           {
                             style: {
-                              fontFamily: C,
+                              fontFamily: W,
                               fontSize: 12,
-                              color: r.ink,
+                              color: a.ink,
                               lineHeight: 1.5
                             },
                             children: o
@@ -939,168 +1186,170 @@ function ut({
                         )
                       ] })
                     ] }),
-                    /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                    /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
                       [
                         { id: "8h", label: "8h" },
                         { id: "1d", label: "1d" },
                         { id: "7d", label: "7d" },
                         { id: "30d", label: "30d" }
-                      ].map((W) => /* @__PURE__ */ e(
-                        pt,
+                      ].map((x) => /* @__PURE__ */ e(
+                        Pt,
                         {
-                          label: W.label,
-                          active: !he && W.id === w,
-                          onClick: () => H == null ? void 0 : H(W.id)
+                          label: x.label,
+                          active: !re && x.id === q,
+                          onClick: () => Q == null ? void 0 : Q(x.id)
                         },
-                        W.id
+                        x.id
                       )),
-                      /* @__PURE__ */ e(Ke, { value: $, onChange: ee })
+                      /* @__PURE__ */ e(yt, { value: j, onChange: se })
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
-                    background: r.beige,
-                    border: `1px solid ${r.border}`,
+                    background: a.beige,
+                    border: `1px solid ${a.border}`,
                     borderRadius: 8,
                     padding: 16,
                     display: "flex",
-                    gap: 24,
                     alignItems: "center"
                   },
                   children: [
-                    /* @__PURE__ */ e(
-                      ke,
+                    { key: "baseline", kpi: c },
+                    { key: "agent-lift", kpi: u },
+                    { key: "score", kpi: F }
+                  ].map((x, R) => /* @__PURE__ */ l(S.Fragment, { children: [
+                    R > 0 ? /* @__PURE__ */ e(
+                      Ee,
                       {
-                        value: p.value,
-                        label: p.label,
-                        sub: p.sub,
-                        trend: p.trend,
-                        points: p.points
-                      }
-                    ),
-                    /* @__PURE__ */ e(ve, { size: 20, color: r.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
-                    /* @__PURE__ */ e(
-                      ke,
-                      {
-                        value: h.value,
-                        label: h.label,
-                        sub: h.sub,
-                        trend: h.trend,
-                        points: h.points
+                        size: 20,
+                        color: a.ink,
+                        strokeWidth: 1.75,
+                        style: { flexShrink: 0, margin: "0 24px" }
                       }
-                    ),
-                    /* @__PURE__ */ e(ve, { size: 20, color: r.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
+                    ) : null,
                     /* @__PURE__ */ e(
-                      ke,
+                      "div",
                       {
-                        value: v.value,
-                        label: v.label,
-                        sub: v.sub,
-                        trend: v.trend,
-                        points: v.points
+                        style: {
+                          flex: 1,
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          minWidth: 0
+                        },
+                        children: /* @__PURE__ */ e(
+                          Ht,
+                          {
+                            value: x.kpi.value,
+                            label: x.kpi.label,
+                            sub: x.kpi.sub,
+                            trend: x.kpi.trend,
+                            points: x.kpi.points
+                          }
+                        )
                       }
                     )
-                  ]
+                  ] }, x.key))
                 }
               ),
-              ie && /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24 }, children: [
-                I(u) && /* @__PURE__ */ e(oe, { title: F, value: u.value, delta: u.delta, children: /* @__PURE__ */ e(
-                  re,
+              de && /* @__PURE__ */ l("div", { style: { display: "flex", gap: 24 }, children: [
+                V(y) && /* @__PURE__ */ e(fe, { title: v, value: y.value, delta: y.delta, children: /* @__PURE__ */ e(
+                  ue,
                   {
-                    yLabels: u.yLabels,
-                    xLabels: u.xLabels,
-                    points: u.points
+                    yLabels: y.yLabels,
+                    xLabels: y.xLabels,
+                    points: y.points
                   }
                 ) }),
-                I(g) && /* @__PURE__ */ e(oe, { title: A, value: g.value, delta: g.delta, children: /* @__PURE__ */ e(
-                  re,
+                V(m) && /* @__PURE__ */ e(fe, { title: I, value: m.value, delta: m.delta, children: /* @__PURE__ */ e(
+                  ue,
                   {
-                    yLabels: g.yLabels,
-                    xLabels: g.xLabels,
-                    points: g.points
+                    yLabels: m.yLabels,
+                    xLabels: m.xLabels,
+                    points: m.points
                   }
                 ) }),
-                I(x) && /* @__PURE__ */ e(oe, { title: j, value: x.value, delta: x.delta, children: /* @__PURE__ */ e(
-                  re,
+                V(b) && /* @__PURE__ */ e(fe, { title: H, value: b.value, delta: b.delta, children: /* @__PURE__ */ e(
+                  ue,
                   {
-                    yLabels: x.yLabels,
-                    xLabels: x.xLabels,
-                    points: x.points
+                    yLabels: b.yLabels,
+                    xLabels: b.xLabels,
+                    points: b.points
                   }
                 ) })
               ] }),
-              ne && /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24 }, children: [
-                I(m) && /* @__PURE__ */ e(oe, { title: T, value: m.value, delta: m.delta, children: /* @__PURE__ */ e(
-                  re,
+              Se && /* @__PURE__ */ l("div", { style: { display: "flex", gap: 24 }, children: [
+                V(k) && /* @__PURE__ */ e(fe, { title: K, value: k.value, delta: k.delta, children: /* @__PURE__ */ e(
+                  ue,
                   {
-                    yLabels: m.yLabels,
-                    xLabels: m.xLabels,
-                    points: m.points
+                    yLabels: k.yLabels,
+                    xLabels: k.xLabels,
+                    points: k.points
                   }
                 ) }),
-                I(z) && /* @__PURE__ */ e(oe, { title: P, value: z.value, delta: z.delta, children: /* @__PURE__ */ e(
-                  re,
+                V(D) && /* @__PURE__ */ e(fe, { title: _, value: D.value, delta: D.delta, children: /* @__PURE__ */ e(
+                  ue,
                   {
-                    yLabels: z.yLabels,
-                    xLabels: z.xLabels,
-                    points: z.points
+                    yLabels: D.yLabels,
+                    xLabels: D.xLabels,
+                    points: D.points
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24, marginTop: 8, alignItems: "flex-start" }, children: [
-                /* @__PURE__ */ i("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }, children: [
-                  /* @__PURE__ */ e(we, { icon: je, title: E, iconColor: r.railCompliance }),
-                  /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: k.map((W, Y) => /* @__PURE__ */ e(Ae, { ...W }, Y)) })
+              /* @__PURE__ */ l("div", { style: { display: "flex", gap: 24, marginTop: 8, alignItems: "flex-start" }, children: [
+                /* @__PURE__ */ l("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }, children: [
+                  /* @__PURE__ */ e(Le, { icon: qe, title: E, iconColor: a.railCompliance }),
+                  /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: L.map((x, R) => /* @__PURE__ */ e(je, { ...x }, R)) })
                 ] }),
-                /* @__PURE__ */ i("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }, children: [
-                  /* @__PURE__ */ e(we, { icon: Ne, title: B, iconColor: r.accentYellow }),
-                  /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: O.map((W, Y) => /* @__PURE__ */ e(Ae, { ...W }, Y)) })
+                /* @__PURE__ */ l("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }, children: [
+                  /* @__PURE__ */ e(Le, { icon: Qe, title: X, iconColor: a.railCompliance }),
+                  /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: $.map((x, R) => /* @__PURE__ */ e(je, { ...x }, R)) })
                 ] })
               ] }),
-              /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 8 }, children: [
-                /* @__PURE__ */ e(we, { icon: de, title: U, iconColor: r.railCompliance }),
-                /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24, alignItems: "flex-start" }, children: [
-                  /* @__PURE__ */ i("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }, children: [
-                    /* @__PURE__ */ e(He, { icon: Ee, title: X }),
-                    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: N.map((W, Y) => /* @__PURE__ */ e(Te, { ...W }, Y)) })
+              /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 8 }, children: [
+                /* @__PURE__ */ e(Le, { icon: ye, title: G, iconColor: a.railCompliance }),
+                /* @__PURE__ */ l("div", { style: { display: "flex", gap: 24, alignItems: "flex-start" }, children: [
+                  /* @__PURE__ */ l("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }, children: [
+                    /* @__PURE__ */ e(Ue, { icon: et, title: O }),
+                    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: Y.map((x, R) => /* @__PURE__ */ e(Ye, { ...x }, R)) })
                   ] }),
-                  /* @__PURE__ */ i("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }, children: [
-                    /* @__PURE__ */ e(He, { icon: Ye, title: L }),
-                    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: _.map((W, Y) => /* @__PURE__ */ e(Te, { ...W }, Y)) })
+                  /* @__PURE__ */ l("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }, children: [
+                    /* @__PURE__ */ e(Ue, { icon: tt, title: Z }),
+                    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: M.map((x, R) => /* @__PURE__ */ e(Ye, { ...x }, R)) })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 8 }, children: [
-                f && /* @__PURE__ */ e(
+              /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 8 }, children: [
+                h && /* @__PURE__ */ e(
                   "span",
                   {
                     style: {
-                      fontFamily: V,
+                      fontFamily: te,
                       fontWeight: 600,
                       fontSize: 16,
-                      color: r.ink,
+                      color: a.ink,
                       lineHeight: 1.2
                     },
-                    children: f
+                    children: h
                   }
                 ),
                 /* @__PURE__ */ e(
-                  Xe,
+                  it,
                   {
-                    data: q,
-                    columns: Q,
-                    initialPageSize: y,
-                    totalCount: Z,
-                    page: te,
-                    pageSize: ce,
-                    onPageChange: pe,
-                    onPageSizeChange: G,
-                    onRowClick: be,
-                    onVisibleColumnsChange: J
+                    data: ie,
+                    columns: ae,
+                    initialPageSize: J,
+                    totalCount: p,
+                    page: g,
+                    pageSize: T,
+                    onPageChange: P,
+                    onPageSizeChange: C,
+                    onRowClick: we,
+                    onVisibleColumnsChange: le
                   }
                 )
               ] })
@@ -1111,7 +1360,7 @@ function ut({
     }
   );
 }
-const ae = { value: "", label: "", trend: "up" }, n = {
+const pe = { value: "", label: "", trend: "up" }, r = {
   ink: "var(--color-text)",
   muted: "var(--color-text-secondary)",
   border: "var(--grey-absent)",
@@ -1137,41 +1386,41 @@ const ae = { value: "", label: "", trend: "up" }, n = {
   shadowDropdown: "var(--shadow-dropdown)",
   railCompliance: "var(--rail-compliance)"
   // section icon accent
-}, K = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", D = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
-function Ge({ trend: t = "up", width: l = 49.618, height: a = 35 }) {
-  const o = S.useId(), d = "M1.00049 13.5213C7.85975 11.7032 8.88149 4.73912 13.7838 4.73912C19.8344 4.73912 23.6237 17.166 29.1281 17.166C34.5998 17.166 37.4149 4.88121 43.4004 8.61051C47.9764 11.4616 50.6186 1.00024 50.6186 1.00024", s = "M1.00049 16.692C8.88149 15.6975 8.88149 7.79403 13.7838 7.79403C19.8344 7.79403 23.6237 21.4034 29.1281 21.4034C34.5998 21.4034 37.4149 8.93821 43.4004 12.7223C47.9764 15.6152 50.6186 5.00024 50.6186 5.00024V36.0002C50.6186 36.0002 10.8223 36.0002 1.00049 36.0002C1.00049 28.8653 1.00049 19.4871 1.00049 16.692Z";
-  return /* @__PURE__ */ i(
+}, ne = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", z = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
+function ft({ trend: t = "up", points: n, width: i = 49.618, height: o = 35 }) {
+  const s = S.useId(), d = st(n), c = d ? d.line : ot, u = d ? d.area : at, F = Ce(n) ?? t;
+  return /* @__PURE__ */ l(
     "svg",
     {
-      width: l,
-      height: a,
+      width: i,
+      height: o,
       viewBox: "0 0 52 36",
       fill: "none",
       style: {
         flexShrink: 0,
-        transform: t === "down" ? "scaleX(-1)" : void 0
+        transform: !d && F === "down" ? "scaleX(-1)" : void 0
       },
       children: [
-        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ i(
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l(
           "linearGradient",
           {
-            id: `spark-${o}`,
+            id: `spark-${s}`,
             x1: "9.96776",
             y1: "16.2053",
             x2: "9.96776",
             y2: "36.0002",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ e("stop", { stopColor: n.ink }),
-              /* @__PURE__ */ e("stop", { offset: "1", stopColor: n.white, stopOpacity: "0.01" })
+              /* @__PURE__ */ e("stop", { stopColor: r.ink }),
+              /* @__PURE__ */ e("stop", { offset: "1", stopColor: r.white, stopOpacity: "0.01" })
             ]
           }
         ) }),
         /* @__PURE__ */ e(
           "path",
           {
-            d: s,
-            fill: `url(#spark-${o})`,
+            d: u,
+            fill: `url(#spark-${s})`,
             fillRule: "evenodd",
             clipRule: "evenodd",
             opacity: "0.1"
@@ -1180,74 +1429,79 @@ function Ge({ trend: t = "up", width: l = 49.618, height: a = 35 }) {
         /* @__PURE__ */ e(
           "path",
           {
-            d,
-            stroke: n.ink,
+            d: c,
+            stroke: r.ink,
             strokeWidth: "2",
             fill: "none",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            strokeDasharray: t === "down" ? "2 4" : void 0
+            strokeDasharray: !d && F === "down" ? "2 4" : void 0
           }
         )
       ]
     }
   );
 }
-function Ve({ direction: t = "up", color: l = n.muted }) {
+function pt(t, n) {
+  return Ce(n) ?? (t === "down" ? "down" : "up");
+}
+function ht({ direction: t = "up", color: n = r.muted }) {
   return /* @__PURE__ */ e("svg", { width: 18, height: 9.5, viewBox: "0 0 19 10", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ e(
     "path",
     {
       d: t === "up" ? "M12.4167 0.75H17.4167M17.4167 0.75V5.75M17.4167 0.75L10.3333 7.83333L6.16667 3.66667L0.75 9.08333" : "M12.4167 9.25H17.4167M17.4167 9.25V4.25M17.4167 9.25L10.3333 2.16667L6.16667 6.33333L0.75 0.91667",
-      stroke: l,
+      stroke: n,
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ) });
 }
-function Me({ value: t, label: l, trend: a = "up", muted: o = !1, beigeBg: d = !1, style: s = {} }) {
-  return /* @__PURE__ */ i(
+function Ve({ value: t, label: n, trend: i = "up", points: o, muted: s = !1, beigeBg: d = !1, style: c = {} }) {
+  const u = pt(i, o);
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
-        background: d ? n.beige : n.white,
-        border: `1px solid ${n.border}`,
+        background: d ? r.beige : r.white,
+        border: `1px solid ${r.border}`,
         borderRadius: 8,
         padding: 16,
         display: "flex",
         flexDirection: "column",
         gap: 8,
         boxSizing: "border-box",
-        ...s
+        ...c
       },
       children: [
-        /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ e(Ge, { trend: a }),
-          /* @__PURE__ */ e(Ve, { direction: a })
+        /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ e(ft, { trend: u, points: o }),
+          /* @__PURE__ */ e(ht, { direction: u })
         ] }),
-        /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }, children: [
+        /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }, children: [
           /* @__PURE__ */ e(
             "div",
             {
               style: {
-                fontFamily: K,
+                fontFamily: ne,
                 fontSize: 28,
                 fontWeight: 500,
                 lineHeight: "1.2",
-                color: o ? n.muted : n.ink,
+                color: s ? r.muted : r.ink,
                 letterSpacing: "-0.01em"
               },
               children: t
             }
           ),
-          /* @__PURE__ */ e("div", { style: { fontFamily: D, fontSize: 13, color: n.ink, lineHeight: "1.2" }, children: l })
+          /* @__PURE__ */ e("div", { style: { fontFamily: z, fontSize: 13, color: r.ink, lineHeight: "1.2" }, children: n })
         ] })
       ]
     }
   );
 }
-function Se({ value: t, label: l, trend: a = "up", withDivider: o = !1 }) {
-  return /* @__PURE__ */ i(
+function ze({ value: t, label: n, trend: i = "up", points: o, withDivider: s = !1 }) {
+  const d = pt(i, o);
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -1255,38 +1509,38 @@ function Se({ value: t, label: l, trend: a = "up", withDivider: o = !1 }) {
         display: "flex",
         flexDirection: "column",
         gap: 8,
-        paddingLeft: o ? 24 : 0,
-        borderLeft: o ? `1px solid ${n.border}` : "none",
+        paddingLeft: s ? 24 : 0,
+        borderLeft: s ? `1px solid ${r.border}` : "none",
         minWidth: 0
       },
       children: [
-        /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ e(Ge, { trend: a }),
-          /* @__PURE__ */ e(Ve, { direction: a })
+        /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ e(ft, { trend: d, points: o }),
+          /* @__PURE__ */ e(ht, { direction: d })
         ] }),
-        /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }, children: [
+        /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }, children: [
           /* @__PURE__ */ e(
             "div",
             {
               style: {
-                fontFamily: K,
+                fontFamily: ne,
                 fontSize: 28,
                 fontWeight: 500,
                 lineHeight: "1.2",
-                color: n.muted,
+                color: r.muted,
                 letterSpacing: "-0.01em"
               },
               children: t
             }
           ),
-          /* @__PURE__ */ e("div", { style: { fontFamily: D, fontSize: 13, color: n.ink, lineHeight: "1.2" }, children: l })
+          /* @__PURE__ */ e("div", { style: { fontFamily: z, fontSize: 13, color: r.ink, lineHeight: "1.2" }, children: n })
         ] })
       ]
     }
   );
 }
-function yt({ icon: t, children: l, trailing: a }) {
-  return /* @__PURE__ */ i(
+function Et({ icon: t, children: n, trailing: i }) {
+  return /* @__PURE__ */ l(
     "button",
     {
       type: "button",
@@ -1297,23 +1551,23 @@ function yt({ icon: t, children: l, trailing: a }) {
         height: 32,
         padding: "0 16px",
         borderRadius: 10,
-        border: `1px solid ${n.neutralBorder}`,
-        background: n.white,
+        border: `1px solid ${r.neutralBorder}`,
+        background: r.white,
         cursor: "pointer",
-        fontFamily: D,
+        fontFamily: z,
         fontSize: 14,
-        color: n.neutral800,
+        color: r.neutral800,
         whiteSpace: "nowrap"
       },
       children: [
         t && /* @__PURE__ */ e(t, { size: 18, strokeWidth: 1.75 }),
-        l,
-        a && /* @__PURE__ */ e(a, { size: 16, strokeWidth: 2 })
+        n,
+        i && /* @__PURE__ */ e(i, { size: 16, strokeWidth: 2 })
       ]
     }
   );
 }
-const gt = [
+const Ot = [
   "January",
   "February",
   "March",
@@ -1326,116 +1580,116 @@ const gt = [
   "October",
   "November",
   "December"
-], mt = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function fe(t) {
-  const l = new Date(t);
-  return l.setHours(0, 0, 0, 0), l;
+], _t = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function ge(t) {
+  const n = new Date(t);
+  return n.setHours(0, 0, 0, 0), n;
 }
-function bt(t, l) {
-  const o = new Date(t, l, 1).getDay(), d = new Date(t, l, 1 - o);
-  return Array.from({ length: 42 }, (s, p) => {
-    const h = new Date(d);
-    return h.setDate(d.getDate() + p), h;
+function jt(t, n) {
+  const o = new Date(t, n, 1).getDay(), s = new Date(t, n, 1 - o);
+  return Array.from({ length: 42 }, (d, c) => {
+    const u = new Date(s);
+    return u.setDate(s.getDate() + c), u;
   });
 }
-function xt({ value: t, onApply: l, onClose: a, anchorRef: o }) {
-  const d = S.useRef(null), [s, p] = S.useState(t != null && t.from ? fe(t.from) : null), [h, v] = S.useState(t != null && t.to ? fe(t.to) : null), u = s || /* @__PURE__ */ new Date(), [g, x] = S.useState(u.getFullYear()), [m, z] = S.useState(u.getMonth()), [O, k] = S.useState({ top: 0, left: 0 });
+function Yt({ value: t, onApply: n, onClose: i, anchorRef: o }) {
+  const s = S.useRef(null), [d, c] = S.useState(t != null && t.from ? ge(t.from) : null), [u, F] = S.useState(t != null && t.to ? ge(t.to) : null), y = d || /* @__PURE__ */ new Date(), [m, b] = S.useState(y.getFullYear()), [k, D] = S.useState(y.getMonth()), [$, L] = S.useState({ top: 0, left: 0 });
   S.useLayoutEffect(() => {
-    const f = () => {
+    const h = () => {
       if (!(o != null && o.current))
         return;
-      const F = o.current.getBoundingClientRect(), A = 320;
-      k({
-        top: F.bottom + 6,
-        left: Math.max(8, F.right - A)
+      const v = o.current.getBoundingClientRect(), I = 320;
+      L({
+        top: v.bottom + 6,
+        left: Math.max(8, v.right - I)
       });
     };
-    return f(), window.addEventListener("scroll", f, !0), window.addEventListener("resize", f), () => {
-      window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
+    return h(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
+      window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
     };
   }, [o]), S.useEffect(() => {
-    const f = (A) => {
-      var j, T;
-      (j = d.current) != null && j.contains(A.target) || (T = o == null ? void 0 : o.current) != null && T.contains(A.target) || a();
-    }, F = (A) => {
-      A.key === "Escape" && a();
+    const h = (I) => {
+      var H, K;
+      (H = s.current) != null && H.contains(I.target) || (K = o == null ? void 0 : o.current) != null && K.contains(I.target) || i();
+    }, v = (I) => {
+      I.key === "Escape" && i();
     };
-    return document.addEventListener("mousedown", f), document.addEventListener("keydown", F), () => {
-      document.removeEventListener("mousedown", f), document.removeEventListener("keydown", F);
+    return document.addEventListener("mousedown", h), document.addEventListener("keydown", v), () => {
+      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", v);
     };
-  }, [a, o]);
-  const N = bt(g, m), _ = fe(/* @__PURE__ */ new Date()), E = (f) => {
-    const F = fe(f);
-    F > _ || (!s || s && h ? (p(F), v(null)) : F < s ? p(F) : v(F));
-  }, B = () => {
-    m === 0 ? (z(11), x(g - 1)) : z(m - 1);
-  }, U = () => {
-    m === 11 ? (z(0), x(g + 1)) : z(m + 1);
-  }, X = (f) => s && h && f >= s && f <= h, L = (f) => s && f.getTime() === s.getTime() || h && f.getTime() === h.getTime();
-  return tt(
-    /* @__PURE__ */ i(
+  }, [i, o]);
+  const Y = jt(m, k), M = ge(/* @__PURE__ */ new Date()), E = (h) => {
+    const v = ge(h);
+    v > M || (!d || d && u ? (c(v), F(null)) : v < d ? c(v) : F(v));
+  }, X = () => {
+    k === 0 ? (D(11), b(m - 1)) : D(k - 1);
+  }, G = () => {
+    k === 11 ? (D(0), b(m + 1)) : D(k + 1);
+  }, O = (h) => d && u && h >= d && h <= u, Z = (h) => d && h.getTime() === d.getTime() || u && h.getTime() === u.getTime();
+  return vt(
+    /* @__PURE__ */ l(
       "div",
       {
-        ref: d,
+        ref: s,
         style: {
           position: "fixed",
-          top: O.top,
-          left: O.left,
+          top: $.top,
+          left: $.left,
           width: 320,
-          background: n.white,
-          border: `1px solid ${n.borderSubtle}`,
+          background: r.white,
+          border: `1px solid ${r.borderSubtle}`,
           borderRadius: 12,
-          boxShadow: n.shadowPopover,
+          boxShadow: r.shadowPopover,
           padding: 16,
           zIndex: 9999,
-          fontFamily: D
+          fontFamily: z
         },
         children: [
-          /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
-            /* @__PURE__ */ e("button", { type: "button", onClick: B, style: Pe, "aria-label": "Previous month", children: /* @__PURE__ */ e(rt, { size: 18, strokeWidth: 1.75 }) }),
-            /* @__PURE__ */ i("div", { style: { fontSize: 14, fontWeight: 600, color: n.ink }, children: [
-              gt[m],
+          /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
+            /* @__PURE__ */ e("button", { type: "button", onClick: X, style: Xe, "aria-label": "Previous month", children: /* @__PURE__ */ e(Lt, { size: 18, strokeWidth: 1.75 }) }),
+            /* @__PURE__ */ l("div", { style: { fontSize: 14, fontWeight: 600, color: r.ink }, children: [
+              Ot[k],
               " ",
-              g
+              m
             ] }),
-            /* @__PURE__ */ e("button", { type: "button", onClick: U, style: Pe, "aria-label": "Next month", children: /* @__PURE__ */ e(ot, { size: 18, strokeWidth: 1.75 }) })
+            /* @__PURE__ */ e("button", { type: "button", onClick: G, style: Xe, "aria-label": "Next month", children: /* @__PURE__ */ e(zt, { size: 18, strokeWidth: 1.75 }) })
           ] }),
-          /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: 4 }, children: mt.map((f) => /* @__PURE__ */ e("div", { style: { textAlign: "center", fontSize: 12, color: n.muted, padding: "4px 0" }, children: f }, f)) }),
-          /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: N.map((f) => {
-            const F = f.getMonth() === m, A = X(f), j = L(f), T = f.getTime() === _.getTime(), P = f > _;
+          /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: 4 }, children: _t.map((h) => /* @__PURE__ */ e("div", { style: { textAlign: "center", fontSize: 12, color: r.muted, padding: "4px 0" }, children: h }, h)) }),
+          /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: Y.map((h) => {
+            const v = h.getMonth() === k, I = O(h), H = Z(h), K = h.getTime() === M.getTime(), _ = h > M;
             return /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: () => E(f),
-                disabled: P,
-                "aria-disabled": P,
+                onClick: () => E(h),
+                disabled: _,
+                "aria-disabled": _,
                 style: {
                   height: 36,
                   border: "none",
                   borderRadius: 8,
-                  background: j ? n.black : A ? n.hoverWarm40 : "transparent",
-                  color: j ? n.white : P ? n.textFaintGrey : F ? n.ink : n.muted,
-                  fontFamily: D,
+                  background: H ? r.black : I ? r.hoverWarm40 : "transparent",
+                  color: H ? r.white : _ ? r.textFaintGrey : v ? r.ink : r.muted,
+                  fontFamily: z,
                   fontSize: 13,
-                  fontWeight: T ? 500 : 400,
-                  cursor: P ? "not-allowed" : "pointer",
-                  opacity: P ? 0.6 : 1
+                  fontWeight: K ? 500 : 400,
+                  cursor: _ ? "not-allowed" : "pointer",
+                  opacity: _ ? 0.6 : 1
                 },
-                children: f.getDate()
+                children: h.getDate()
               },
-              f.toISOString()
+              h.toISOString()
             );
           }) }),
-          /* @__PURE__ */ i("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12, paddingTop: 12, borderTop: `1px solid ${n.borderSubtle}` }, children: [
+          /* @__PURE__ */ l("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12, paddingTop: 12, borderTop: `1px solid ${r.borderSubtle}` }, children: [
             /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  p(null), v(null);
+                  c(null), F(null);
                 },
-                style: { background: "transparent", border: "none", padding: 0, cursor: "pointer", fontSize: 14, fontWeight: 500, color: n.ink },
+                style: { background: "transparent", border: "none", padding: 0, cursor: "pointer", fontSize: 14, fontWeight: 500, color: r.ink },
                 children: "Clear"
               }
             ),
@@ -1443,21 +1697,21 @@ function xt({ value: t, onApply: l, onClose: a, anchorRef: o }) {
               "button",
               {
                 type: "button",
-                disabled: !s || !h,
+                disabled: !d || !u,
                 onClick: () => {
-                  l({ from: s, to: h }), a();
+                  n({ from: d, to: u }), i();
                 },
                 style: {
-                  background: !s || !h ? n.neutralBorder : n.black,
-                  color: n.white,
+                  background: !d || !u ? r.neutralBorder : r.black,
+                  color: r.white,
                   border: "none",
                   borderRadius: 10,
                   height: 30,
                   padding: "0 16px",
-                  fontFamily: D,
+                  fontFamily: z,
                   fontSize: 14,
                   fontWeight: 600,
-                  cursor: !s || !h ? "not-allowed" : "pointer"
+                  cursor: !d || !u ? "not-allowed" : "pointer"
                 },
                 children: "Apply"
               }
@@ -1469,7 +1723,7 @@ function xt({ value: t, onApply: l, onClose: a, anchorRef: o }) {
     document.body
   );
 }
-const Pe = {
+const Xe = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -1479,17 +1733,17 @@ const Pe = {
   background: "transparent",
   borderRadius: 6,
   cursor: "pointer",
-  color: n.ink
+  color: r.ink
 };
-function Ke({ value: t, onChange: l }) {
-  const [a, o] = S.useState(!1), d = S.useRef(null), s = !!(t != null && t.from && (t != null && t.to));
-  return /* @__PURE__ */ i(_e, { children: [
-    /* @__PURE__ */ i(
+function yt({ value: t, onChange: n }) {
+  const [i, o] = S.useState(!1), s = S.useRef(null), d = !!(t != null && t.from && (t != null && t.to));
+  return /* @__PURE__ */ l(Je, { children: [
+    /* @__PURE__ */ l(
       "button",
       {
-        ref: d,
+        ref: s,
         type: "button",
-        onClick: () => o((p) => !p),
+        onClick: () => o((c) => !c),
         style: {
           display: "inline-flex",
           alignItems: "center",
@@ -1497,47 +1751,47 @@ function Ke({ value: t, onChange: l }) {
           height: 32,
           padding: "0 16px",
           borderRadius: 10,
-          border: s ? "none" : `1px solid ${n.neutralBorder}`,
-          background: s ? n.black : n.white,
+          border: d ? "none" : `1px solid ${r.neutralBorder}`,
+          background: d ? r.black : r.white,
           cursor: "pointer",
-          fontFamily: D,
+          fontFamily: z,
           fontSize: 14,
-          color: s ? n.white : n.neutral800,
-          fontWeight: s ? 600 : 400,
+          color: d ? r.white : r.neutral800,
+          fontWeight: d ? 600 : 400,
           whiteSpace: "nowrap"
         },
         children: [
-          /* @__PURE__ */ e(ge, { size: 18, strokeWidth: 1.75 }),
+          /* @__PURE__ */ e(ve, { size: 18, strokeWidth: 1.75 }),
           "Date Range"
         ]
       }
     ),
-    a && /* @__PURE__ */ e(
-      xt,
+    i && /* @__PURE__ */ e(
+      Yt,
       {
         value: t,
-        anchorRef: d,
+        anchorRef: s,
         onClose: () => o(!1),
-        onApply: (p) => l == null ? void 0 : l(p)
+        onApply: (c) => n == null ? void 0 : n(c)
       }
     )
   ] });
 }
-function vt({ label: t, active: l = !1, onClick: a }) {
+function Ut({ label: t, active: n = !1, onClick: i }) {
   return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: a,
+      onClick: i,
       style: {
         height: 32,
         minWidth: 31,
         padding: "0 12px",
         borderRadius: 10,
-        border: l ? "none" : `1px solid ${n.borderSubtle}`,
-        background: l ? n.black : n.white,
-        color: l ? n.white : n.black,
-        fontFamily: D,
+        border: n ? "none" : `1px solid ${r.borderSubtle}`,
+        background: n ? r.black : r.white,
+        color: n ? r.white : r.black,
+        fontFamily: z,
         fontSize: 14,
         cursor: "pointer"
       },
@@ -1545,46 +1799,27 @@ function vt({ label: t, active: l = !1, onClick: a }) {
     }
   );
 }
-const kt = [
+const Vt = [
   { id: "8h", label: "8h" },
   { id: "1d", label: "1d" },
   { id: "7d", label: "7d" },
   { id: "30d", label: "30d" }
-], Ze = {
-  "8h": 8 * 60 * 60 * 1e3,
-  "1d": 24 * 60 * 60 * 1e3,
-  "7d": 7 * 24 * 60 * 60 * 1e3,
-  "30d": 30 * 24 * 60 * 60 * 1e3
-};
-function me(t) {
-  return t.toLocaleDateString("en-US", {
-    month: "2-digit",
-    day: "2-digit",
-    year: "numeric"
-  });
-}
-function wt(t) {
-  const l = Ze[t];
-  if (!l)
-    return "";
-  const a = /* @__PURE__ */ new Date(), o = new Date(a.getTime() - l);
-  return `${me(o)} – ${me(a)}`;
-}
-function St({ value: t = 0, max: l = 5 }) {
-  const a = typeof t == "number" ? t : parseFloat(t) || 0, o = Math.floor(a), d = a % 1 > 0 && o < l;
-  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 4 }, children: Array.from({ length: l }).map((s, p) => p < o ? /* @__PURE__ */ e(
+];
+function Xt({ value: t = 0, max: n = 5 }) {
+  const i = typeof t == "number" ? t : parseFloat(t) || 0, o = Math.floor(i), s = i % 1 > 0 && o < n;
+  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 4 }, children: Array.from({ length: n }).map((d, c) => c < o ? /* @__PURE__ */ e(
     "span",
     {
       style: {
         width: 10,
         height: 10,
         borderRadius: "50%",
-        background: n.black,
+        background: r.black,
         display: "inline-block"
       }
     },
-    p
-  ) : p === o && d ? /* @__PURE__ */ e(
+    c
+  ) : c === o && s ? /* @__PURE__ */ e(
     "span",
     {
       style: {
@@ -1602,13 +1837,13 @@ function St({ value: t = 0, max: l = 5 }) {
             width: 6,
             height: 6,
             borderRadius: "50%",
-            background: n.black,
+            background: r.black,
             display: "inline-block"
           }
         }
       )
     },
-    p
+    c
   ) : /* @__PURE__ */ e(
     "span",
     {
@@ -1616,16 +1851,16 @@ function St({ value: t = 0, max: l = 5 }) {
         width: 10,
         height: 10,
         borderRadius: "50%",
-        background: n.white,
-        border: `1px solid ${n.border}`,
+        background: r.white,
+        border: `1px solid ${r.border}`,
         display: "inline-block",
         boxSizing: "border-box"
       }
     },
-    p
+    c
   )) });
 }
-const It = [
+const en = [
   { id: "agent", label: "Agent", width: 180, sortable: !0, filterable: !0 },
   { id: "supervisor", label: "Supervisor", width: 170, sortable: !0, filterable: !0 },
   { id: "calls", label: "Calls", width: 100, sortable: !0 },
@@ -1639,16 +1874,16 @@ const It = [
     sortable: !0,
     filterable: !0,
     filterType: "number",
-    render: (t) => /* @__PURE__ */ i("span", { style: { display: "inline-flex", alignItems: "center", gap: 12 }, children: [
+    render: (t) => /* @__PURE__ */ l("span", { style: { display: "inline-flex", alignItems: "center", gap: 12 }, children: [
       /* @__PURE__ */ e("span", { style: { minWidth: 32 }, children: t }),
-      /* @__PURE__ */ e(St, { value: typeof t == "number" ? t : 0 })
+      /* @__PURE__ */ e(Xt, { value: typeof t == "number" ? t : 0 })
     ] })
   },
   { id: "totalDuration", label: "Total Duration", width: 150, sortable: !0, filterable: !0, filterType: "duration", filterShowPresets: !1 },
   { id: "avgDuration", label: "Average Duration", width: 170, sortable: !0, filterable: !0, filterType: "duration", filterShowPresets: !1 }
 ];
-function ue({ icon: t, title: l, trailing: a, iconColor: o = n.ink, bordered: d = !1 }) {
-  return /* @__PURE__ */ i(
+function xe({ icon: t, title: n, trailing: i, iconColor: o = r.ink, bordered: s = !1 }) {
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -1656,8 +1891,8 @@ function ue({ icon: t, title: l, trailing: a, iconColor: o = n.ink, bordered: d
         alignItems: "center",
         gap: 8,
         width: "100%",
-        paddingBottom: d ? 12 : 0,
-        borderBottom: d ? `1px solid ${n.border}` : "none"
+        paddingBottom: s ? 12 : 0,
+        borderBottom: s ? `1px solid ${r.border}` : "none"
       },
       children: [
         /* @__PURE__ */ e(
@@ -1679,24 +1914,24 @@ function ue({ icon: t, title: l, trailing: a, iconColor: o = n.ink, bordered: d
           {
             style: {
               flex: 1,
-              fontFamily: K,
+              fontFamily: ne,
               fontWeight: 600,
               fontSize: 16,
-              color: n.ink,
+              color: r.ink,
               lineHeight: "1.2",
               textTransform: "uppercase",
               letterSpacing: "0.02em"
             },
-            children: l
+            children: n
           }
         ),
-        a && /* @__PURE__ */ e("div", { style: { fontFamily: D, fontSize: 14, color: n.ink }, children: a })
+        i && /* @__PURE__ */ e("div", { style: { fontFamily: z, fontSize: 14, color: r.ink }, children: i })
       ]
     }
   );
 }
-function Re({ icon: t, title: l }) {
-  return /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 16, width: "100%" }, children: [
+function Ge({ icon: t, title: n }) {
+  return /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 16, width: "100%" }, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -1704,39 +1939,39 @@ function Re({ icon: t, title: l }) {
           width: 34,
           height: 34,
           borderRadius: 9999,
-          background: n.iconCircle,
+          background: r.iconCircle,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           flexShrink: 0
         },
-        children: /* @__PURE__ */ e(t, { size: 20, color: n.ink, strokeWidth: 1.75 })
+        children: /* @__PURE__ */ e(t, { size: 20, color: r.ink, strokeWidth: 1.75 })
       }
     ),
     /* @__PURE__ */ e(
       "span",
       {
         style: {
-          fontFamily: K,
+          fontFamily: ne,
           fontWeight: 600,
           fontSize: 16,
-          color: n.ink,
+          color: r.ink,
           lineHeight: "24px"
         },
-        children: l
+        children: n
       }
     )
   ] });
 }
-function Oe({ title: t, summary: l, calls: a, percent: o, bullets: d, defaultExpanded: s = !1 }) {
-  const [p, h] = S.useState(s), v = Array.isArray(d) ? d : [];
-  return /* @__PURE__ */ i("div", { style: { borderTop: `1px solid ${n.border}` }, children: [
-    /* @__PURE__ */ i(
+function Ke({ title: t, summary: n, calls: i, percent: o, bullets: s, defaultExpanded: d = !1 }) {
+  const [c, u] = S.useState(d), F = Array.isArray(s) ? s : [];
+  return /* @__PURE__ */ l("div", { style: { borderTop: `1px solid ${r.border}` }, children: [
+    /* @__PURE__ */ l(
       "button",
       {
         type: "button",
-        onClick: () => h((u) => !u),
-        "aria-expanded": p,
+        onClick: () => u((y) => !y),
+        "aria-expanded": c,
         style: {
           border: "none",
           background: "transparent",
@@ -1747,10 +1982,10 @@ function Oe({ title: t, summary: l, calls: a, percent: o, bullets: d, defaultExp
           cursor: "pointer",
           width: "100%",
           textAlign: "left",
-          fontFamily: D
+          fontFamily: z
         },
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ l(
             "div",
             {
               style: {
@@ -1761,44 +1996,44 @@ function Oe({ title: t, summary: l, calls: a, percent: o, bullets: d, defaultExp
                 minWidth: 0
               },
               children: [
-                /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+                /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
                   /* @__PURE__ */ e(
                     "div",
                     {
                       style: {
-                        fontFamily: K,
+                        fontFamily: ne,
                         fontWeight: 600,
                         fontSize: 14,
-                        color: n.black,
+                        color: r.black,
                         lineHeight: "24px"
                       },
                       children: t
                     }
                   ),
-                  /* @__PURE__ */ e("div", { style: { fontFamily: D, fontSize: 14, color: n.muted, lineHeight: "24px" }, children: l })
+                  /* @__PURE__ */ e("div", { style: { fontFamily: z, fontSize: 14, color: r.muted, lineHeight: "24px" }, children: n })
                 ] }),
-                /* @__PURE__ */ i("div", { style: { display: "flex", gap: 16 }, children: [
-                  /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                    /* @__PURE__ */ e(de, { size: 14, color: n.ink, strokeWidth: 1.75 }),
-                    /* @__PURE__ */ e("span", { style: { fontFamily: D, fontSize: 12, color: n.ink, lineHeight: 1.5 }, children: a })
+                /* @__PURE__ */ l("div", { style: { display: "flex", gap: 16 }, children: [
+                  /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                    /* @__PURE__ */ e(ye, { size: 14, color: r.ink, strokeWidth: 1.75 }),
+                    /* @__PURE__ */ e("span", { style: { fontFamily: z, fontSize: 12, color: r.ink, lineHeight: 1.5 }, children: i })
                   ] }),
-                  /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                    /* @__PURE__ */ e(Ue, { size: 14, color: n.ink, strokeWidth: 1.75 }),
-                    /* @__PURE__ */ e("span", { style: { fontFamily: D, fontSize: 12, color: n.ink, lineHeight: 1.5 }, children: o })
+                  /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                    /* @__PURE__ */ e(nt, { size: 14, color: r.ink, strokeWidth: 1.75 }),
+                    /* @__PURE__ */ e("span", { style: { fontFamily: z, fontSize: 12, color: r.ink, lineHeight: 1.5 }, children: o })
                   ] })
                 ] })
               ]
             }
           ),
           /* @__PURE__ */ e(
-            De,
+            We,
             {
               size: 20,
-              color: n.ink,
+              color: r.ink,
               strokeWidth: 2,
               style: {
                 flexShrink: 0,
-                transform: p ? "rotate(180deg)" : "none",
+                transform: c ? "rotate(180deg)" : "none",
                 transition: "transform 150ms ease"
               }
             }
@@ -1806,7 +2041,7 @@ function Oe({ title: t, summary: l, calls: a, percent: o, bullets: d, defaultExp
         ]
       }
     ),
-    p && v.length > 0 && /* @__PURE__ */ e(
+    c && F.length > 0 && /* @__PURE__ */ e(
       "div",
       {
         style: {
@@ -1815,37 +2050,37 @@ function Oe({ title: t, summary: l, calls: a, percent: o, bullets: d, defaultExp
           gap: 12,
           padding: "0 16px 16px"
         },
-        children: v.map((u, g) => /* @__PURE__ */ i(
+        children: F.map((y, m) => /* @__PURE__ */ l(
           "div",
           {
             style: {
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
-              fontFamily: D,
+              fontFamily: z,
               fontSize: 14,
-              color: n.ink,
+              color: r.ink,
               lineHeight: "24px",
               gap: 16
             },
             children: [
-              u.href ? /* @__PURE__ */ e(
+              y.href ? /* @__PURE__ */ e(
                 "a",
                 {
-                  href: u.href,
+                  href: y.href,
                   target: "_blank",
                   rel: "noopener noreferrer",
                   style: {
-                    color: n.ink,
+                    color: r.ink,
                     textDecoration: "underline",
                     textUnderlineOffset: 2,
-                    textDecorationColor: n.border,
+                    textDecorationColor: r.border,
                     minWidth: 0,
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap"
                   },
-                  children: u.text
+                  children: y.text
                 }
               ) : /* @__PURE__ */ e(
                 "span",
@@ -1856,27 +2091,27 @@ function Oe({ title: t, summary: l, calls: a, percent: o, bullets: d, defaultExp
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap"
                   },
-                  children: u.text
+                  children: y.text
                 }
               ),
-              /* @__PURE__ */ i("span", { style: { display: "inline-flex", gap: 4, whiteSpace: "nowrap" }, children: [
-                /* @__PURE__ */ e("span", { style: { color: n.ink }, children: u.citation }),
-                /* @__PURE__ */ i("span", { style: { color: n.muted }, children: [
+              /* @__PURE__ */ l("span", { style: { display: "inline-flex", gap: 4, whiteSpace: "nowrap" }, children: [
+                /* @__PURE__ */ e("span", { style: { color: r.ink }, children: y.citation }),
+                /* @__PURE__ */ l("span", { style: { color: r.muted }, children: [
                   "(",
-                  u.date,
+                  y.date,
                   ")"
                 ] })
               ] })
             ]
           },
-          g
+          m
         ))
       }
     )
   ] });
 }
-function ye({ label: t, value: l }) {
-  return /* @__PURE__ */ i(
+function be({ label: t, value: n }) {
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -1884,154 +2119,154 @@ function ye({ label: t, value: l }) {
         justifyContent: "space-between",
         alignItems: "center",
         padding: "12px 0",
-        borderBottom: `1px solid ${n.border}`,
-        fontFamily: D,
+        borderBottom: `1px solid ${r.border}`,
+        fontFamily: z,
         fontSize: 13,
         lineHeight: "24px"
       },
       children: [
-        /* @__PURE__ */ e("span", { style: { color: n.ink }, children: t }),
-        /* @__PURE__ */ e("span", { style: { color: n.muted }, children: l })
+        /* @__PURE__ */ e("span", { style: { color: r.ink }, children: t }),
+        /* @__PURE__ */ e("span", { style: { color: r.muted }, children: n })
       ]
     }
   );
 }
-function se({ message: t = "" }) {
+function he({ message: t = "" }) {
   return t ? /* @__PURE__ */ e(
     "div",
     {
       style: {
         padding: "16px 0",
-        fontFamily: D,
+        fontFamily: z,
         fontSize: 13,
-        color: n.muted,
+        color: r.muted,
         lineHeight: 1.5
       },
       children: t
     }
   ) : null;
 }
-function $t({
+function tn({
   className: t = "",
-  onAgentClick: l,
+  onAgentClick: n,
   // Header text — empty defaults so host apps don't see demo copy. Hosts pass
   // their own page title / subtitle (the gallery in dev/App.jsx demonstrates
   // the intended "Performance" / "Agent performance metrics..." wording).
-  title: a = "",
+  title: i = "",
   subtitle: o = "",
-  dateRangeLabel: d = "",
+  dateRangeLabel: s = "",
   // View-by dropdown. `initialViewBy` seeds internal state on mount;
   // `onViewByChange(id)` fires when the user selects a different option.
-  viewByOptions: s = [],
-  initialViewBy: p = "",
-  onViewByChange: h,
+  viewByOptions: d = [],
+  initialViewBy: c = "",
+  onViewByChange: u,
   // Label rendered above the View-by option list inside the popover. Empty by
   // default; the gallery passes "Aggregated By" to reproduce the Figma copy.
-  aggregatedByLabel: v = "",
+  aggregatedByLabel: F = "",
   // KPI strip
-  volumeStat: u = ae,
-  compassStat: g = ae,
-  baselineSubStat: x = ae,
-  agentLiftSubStat: m = ae,
-  scoreSubStat: z = ae,
+  volumeStat: y = pe,
+  compassStat: m = pe,
+  baselineSubStat: b = pe,
+  agentLiftSubStat: k = pe,
+  scoreSubStat: D = pe,
   // Agent table
-  agentRows: O = [],
-  agentColumns: k = [],
-  initialPageSize: N = 10,
+  agentRows: $ = [],
+  agentColumns: L = [],
+  initialPageSize: Y = 10,
   // Insight sections — all titles, empty-state copy, and the section icons /
   // colors are host-driven so the library renders nothing concrete by default.
-  guidanceItems: _ = [],
+  guidanceItems: M = [],
   strengthItems: E = [],
-  callDrivers: B = [],
-  callParadigms: U = [],
-  topSignalsLeft: X = [],
-  topSignalsRight: L = [],
-  topSignalsTrailing: f = "",
-  strengthsTitle: F = "",
-  guidanceTitle: A = "",
-  callMixTitle: j = "",
-  driversTitle: T = "",
-  paradigmsTitle: P = "",
-  topSignalsTitle: q = "",
-  emptyStrengthsMessage: Q = "",
-  emptyGuidanceMessage: y = "",
-  emptyDriversMessage: w = "",
-  emptyParadigmsMessage: H = "",
-  emptyTopSignalsMessage: $ = "",
+  callDrivers: X = [],
+  callParadigms: G = [],
+  topSignalsLeft: O = [],
+  topSignalsRight: Z = [],
+  topSignalsTrailing: h = "",
+  strengthsTitle: v = "",
+  guidanceTitle: I = "",
+  callMixTitle: H = "",
+  driversTitle: K = "",
+  paradigmsTitle: _ = "",
+  topSignalsTitle: ie = "",
+  emptyStrengthsMessage: ae = "",
+  emptyGuidanceMessage: J = "",
+  emptyDriversMessage: q = "",
+  emptyParadigmsMessage: Q = "",
+  emptyTopSignalsMessage: j = "",
   // Time-range chips (8h / 1d / 7d / 30d). Override `rangeOptions` to customize.
   // `selectedWindow` is the currently-active option id; `onWindowChange(id)` fires
   // when the user picks a new chip.
-  rangeOptions: ee = kt,
-  selectedWindow: Z = "30d",
-  onWindowChange: te,
+  rangeOptions: se = Vt,
+  selectedWindow: p = "30d",
+  onWindowChange: g,
   // Host-provided date-range picker node. Should render its own trigger button
   // and popover. When provided, replaces the built-in default picker.
   // (Same slot pattern as DataTableFilters2's `dateRangePicker` prop.)
-  dateRangePicker: ce,
+  dateRangePicker: T,
   // Used by the built-in default picker when `dateRangePicker` is not provided.
   // `dateRange` is `{ from, to }` (Date objects); `onDateRangeChange` receives
   // the same shape when the user clicks Apply.
-  dateRange: pe,
-  onDateRangeChange: G,
+  dateRange: P,
+  onDateRangeChange: C,
   // Fires when the user clicks the Export CSV button in the header.
-  onExport: M,
+  onExport: A,
   // Fires whenever the user toggles columns in the table's column picker —
   // hosts can scope their CSV export to whatever the user has visible.
-  onVisibleColumnsChange: be
+  onVisibleColumnsChange: we
 }) {
-  var Ce, Le;
-  const [J, he] = S.useState(null), [I, ie] = S.useState(!1), [ne, W] = S.useState(p), [Y, ze] = S.useState(null), R = pe !== void 0 ? pe : Y, xe = !!(R != null && R.from && (R != null && R.to)), Je = (c) => {
-    ze(c), G == null || G(c);
-  }, qe = (c) => {
-    ze(null), G == null || G(null), te == null || te(c);
-  }, Fe = S.useRef(null), We = S.useRef(null);
+  var Ne, Re;
+  const [le, re] = S.useState(null), [N, U] = S.useState(!1), [de, Se] = S.useState(c), [x, R] = S.useState(null), B = P !== void 0 ? P : x, De = !!(B != null && B.from && (B != null && B.to)), mt = (f) => {
+    R(f), C == null || C(f);
+  }, gt = (f) => {
+    R(null), C == null || C(null), g == null || g(f);
+  }, He = S.useRef(null), Pe = S.useRef(null);
   S.useEffect(() => {
-    if (!I)
+    if (!N)
       return;
-    const c = (b) => {
-      var le, Ie;
-      (le = We.current) != null && le.contains(b.target) || (Ie = Fe.current) != null && Ie.contains(b.target) || ie(!1);
+    const f = (w) => {
+      var ce, Be;
+      (ce = Pe.current) != null && ce.contains(w.target) || (Be = He.current) != null && Be.contains(w.target) || U(!1);
     };
-    return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
-  }, [I]);
-  const Qe = ((Ce = s.find((c) => c.id === ne)) == null ? void 0 : Ce.label) || (((Le = s[0]) == null ? void 0 : Le.label) ?? ""), et = (c) => {
-    if (l) {
-      l(c);
+    return document.addEventListener("mousedown", f), () => document.removeEventListener("mousedown", f);
+  }, [N]);
+  const xt = ((Ne = d.find((f) => f.id === de)) == null ? void 0 : Ne.label) || (((Re = d[0]) == null ? void 0 : Re.label) ?? ""), bt = (f) => {
+    if (n) {
+      n(f);
       return;
     }
-    he(c);
+    re(f);
   };
-  return /* @__PURE__ */ i(_e, { children: [
-    J && (() => {
-      let c = null, b = null;
-      if (xe)
-        c = R.from, b = R.to;
+  return /* @__PURE__ */ l(Je, { children: [
+    le && (() => {
+      let f = null, w = null;
+      if (De)
+        f = B.from, w = B.to;
       else {
-        const le = Ze[Z];
-        le && (b = /* @__PURE__ */ new Date(), c = new Date(b.getTime() - le));
+        const ce = Te[p];
+        ce && (w = /* @__PURE__ */ new Date(), f = new Date(w.getTime() - ce));
       }
       return /* @__PURE__ */ e(
-        ut,
+        Bt,
         {
           className: t,
-          agentName: J.agent,
-          startDate: c || "",
-          endDate: b || "",
-          totalCalls: `${J.calls} Calls`,
-          onBack: () => he(null),
-          selectedWindow: Z,
-          dateRange: R
+          agentName: le.agent,
+          startDate: f || "",
+          endDate: w || "",
+          totalCalls: `${le.calls} Calls`,
+          onBack: () => re(null),
+          selectedWindow: p,
+          dateRange: B
         }
       );
     })(),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ l(
       "div",
       {
         className: t,
         style: {
-          background: n.white,
-          fontFamily: D,
-          color: n.ink,
+          background: r.white,
+          fontFamily: z,
+          color: r.ink,
           width: "100%",
           minWidth: 1192,
           boxSizing: "border-box",
@@ -2040,34 +2275,34 @@ function $t({
           gap: 24,
           // Hide (don't unmount) when drilling into agent details so DataTable2's
           // internal filter / sort / pagination state survives the round trip.
-          display: J ? "none" : "flex"
+          display: le ? "none" : "flex"
         },
         children: [
-          /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, paddingTop: 12 }, children: [
-            /* @__PURE__ */ i("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 4 }, children: [
+          /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, paddingTop: 12 }, children: [
+            /* @__PURE__ */ l("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 4 }, children: [
               /* @__PURE__ */ e(
                 "h1",
                 {
                   style: {
-                    fontFamily: K,
+                    fontFamily: ne,
                     fontSize: 24,
                     fontWeight: 500,
-                    color: n.ink,
+                    color: r.ink,
                     margin: 0,
                     lineHeight: "1.2",
                     letterSpacing: "-0.01em"
                   },
-                  children: a
+                  children: i
                 }
               ),
-              /* @__PURE__ */ e("p", { style: { fontFamily: D, fontSize: 14, color: "var(--neutral-950)", margin: 0, lineHeight: "1.4" }, children: o })
+              /* @__PURE__ */ e("p", { style: { fontFamily: z, fontSize: 14, color: "var(--neutral-950)", margin: 0, lineHeight: "1.4" }, children: o })
             ] }),
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ l(
               "button",
               {
                 type: "button",
-                onClick: () => M == null ? void 0 : M(),
-                disabled: !M,
+                onClick: () => A == null ? void 0 : A(),
+                disabled: !A,
                 style: {
                   display: "inline-flex",
                   alignItems: "center",
@@ -2075,31 +2310,31 @@ function $t({
                   height: 32,
                   padding: "0 16px",
                   borderRadius: 10,
-                  border: `1px solid ${n.neutralBorder}`,
-                  background: n.white,
-                  cursor: M ? "pointer" : "not-allowed",
-                  opacity: M ? 1 : 0.5,
-                  fontFamily: D,
+                  border: `1px solid ${r.neutralBorder}`,
+                  background: r.white,
+                  cursor: A ? "pointer" : "not-allowed",
+                  opacity: A ? 1 : 0.5,
+                  fontFamily: z,
                   fontSize: 14,
-                  color: n.neutral800
+                  color: r.neutral800
                 },
                 children: [
-                  /* @__PURE__ */ e(Be, { size: 18, strokeWidth: 1.75 }),
+                  /* @__PURE__ */ e(Ze, { size: 18, strokeWidth: 1.75 }),
                   "Export CSV"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ i("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-            /* @__PURE__ */ i("div", { style: { position: "relative" }, children: [
-              /* @__PURE__ */ i(
+          /* @__PURE__ */ l("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ l(
                 "button",
                 {
                   type: "button",
-                  ref: Fe,
-                  onClick: () => ie((c) => !c),
+                  ref: He,
+                  onClick: () => U((f) => !f),
                   "aria-haspopup": "listbox",
-                  "aria-expanded": I,
+                  "aria-expanded": N,
                   style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -2107,24 +2342,24 @@ function $t({
                     height: 32,
                     padding: "0 16px",
                     borderRadius: 10,
-                    border: `1px solid ${n.neutralBorder}`,
-                    background: n.white,
+                    border: `1px solid ${r.neutralBorder}`,
+                    background: r.white,
                     cursor: "pointer",
-                    fontFamily: D,
+                    fontFamily: z,
                     fontSize: 14,
                     lineHeight: "24px",
-                    color: n.neutral800,
+                    color: r.neutral800,
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    Qe,
+                    xt,
                     /* @__PURE__ */ e(
-                      De,
+                      We,
                       {
                         size: 20,
                         strokeWidth: 1.75,
                         style: {
-                          transform: I ? "rotate(180deg)" : "none",
+                          transform: N ? "rotate(180deg)" : "none",
                           transition: "transform 120ms ease"
                         }
                       }
@@ -2132,130 +2367,130 @@ function $t({
                   ]
                 }
               ),
-              I && /* @__PURE__ */ i(
+              N && /* @__PURE__ */ l(
                 "div",
                 {
-                  ref: We,
+                  ref: Pe,
                   role: "listbox",
                   style: {
                     position: "absolute",
                     top: 36,
                     left: 0,
                     zIndex: 20,
-                    background: n.white,
-                    border: `1px solid ${n.border}`,
+                    background: r.white,
+                    border: `1px solid ${r.border}`,
                     borderRadius: 4,
-                    boxShadow: n.shadowDropdown,
+                    boxShadow: r.shadowDropdown,
                     display: "flex",
                     flexDirection: "column",
                     minWidth: 144,
-                    fontFamily: D
+                    fontFamily: z
                   },
                   children: [
-                    v && /* @__PURE__ */ e(
+                    F && /* @__PURE__ */ e(
                       "div",
                       {
                         style: {
                           padding: 12,
-                          fontFamily: K,
+                          fontFamily: ne,
                           fontWeight: 600,
                           fontSize: 13,
-                          color: n.ink,
+                          color: r.ink,
                           lineHeight: 1.2
                         },
-                        children: v
+                        children: F
                       }
                     ),
-                    s.map((c) => {
-                      const b = ne === c.id;
-                      return /* @__PURE__ */ i(
+                    d.map((f) => {
+                      const w = de === f.id;
+                      return /* @__PURE__ */ l(
                         "button",
                         {
                           type: "button",
                           role: "option",
-                          "aria-selected": b,
+                          "aria-selected": w,
                           onClick: () => {
-                            c.id !== ne && (W(c.id), h == null || h(c.id)), ie(!1);
+                            f.id !== de && (Se(f.id), u == null || u(f.id)), U(!1);
                           },
                           style: {
                             display: "flex",
                             alignItems: "center",
                             gap: 8,
-                            padding: b ? 12 : "12px 12px 12px 40px",
-                            borderTop: `1px solid ${n.border}`,
+                            padding: w ? 12 : "12px 12px 12px 40px",
+                            borderTop: `1px solid ${r.border}`,
                             borderLeft: "none",
                             borderRight: "none",
                             borderBottom: "none",
                             background: "transparent",
                             cursor: "pointer",
                             textAlign: "left",
-                            fontFamily: D,
+                            fontFamily: z,
                             fontSize: 13,
                             lineHeight: 1.2,
-                            color: n.ink,
+                            color: r.ink,
                             width: "100%"
                           },
                           children: [
-                            b && /* @__PURE__ */ e(nt, { size: 20, color: n.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
-                            /* @__PURE__ */ e("span", { children: c.label })
+                            w && /* @__PURE__ */ e(St, { size: 20, color: r.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
+                            /* @__PURE__ */ e("span", { children: f.label })
                           ]
                         },
-                        c.id
+                        f.id
                       );
                     })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ i("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+            /* @__PURE__ */ l("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
               (() => {
-                const b = (xe ? `${me(R.from)} – ${me(R.to)}` : "") || d || wt(Z);
-                return b ? /* @__PURE__ */ i(
+                const w = (De ? `${ee(B.from)} – ${ee(B.to)}` : "") || It(p) || s;
+                return w ? /* @__PURE__ */ l(
                   "span",
                   {
                     style: {
                       display: "inline-flex",
                       alignItems: "center",
                       gap: 6,
-                      fontFamily: D,
+                      fontFamily: z,
                       fontSize: 13,
-                      color: n.ink
+                      color: r.ink
                     },
                     children: [
-                      /* @__PURE__ */ e(ge, { size: 16, strokeWidth: 1.75, color: n.muted }),
-                      b
+                      /* @__PURE__ */ e(ve, { size: 16, strokeWidth: 1.75, color: r.muted }),
+                      w
                     ]
                   }
                 ) : null;
               })(),
-              ee.map((c) => /* @__PURE__ */ e(
-                vt,
+              se.map((f) => /* @__PURE__ */ e(
+                Ut,
                 {
-                  label: c.label,
-                  active: !xe && c.id === Z,
-                  onClick: () => qe(c.id)
+                  label: f.label,
+                  active: !De && f.id === p,
+                  onClick: () => gt(f.id)
                 },
-                c.id
+                f.id
               )),
-              ce ? /* @__PURE__ */ e(
+              T ? /* @__PURE__ */ e(
                 S.Suspense,
                 {
-                  fallback: /* @__PURE__ */ e(yt, { icon: ge, children: "Date Range" }),
-                  children: ce
+                  fallback: /* @__PURE__ */ e(Et, { icon: ve, children: "Date Range" }),
+                  children: T
                 }
-              ) : /* @__PURE__ */ e(Ke, { value: R, onChange: Je })
+              ) : /* @__PURE__ */ e(yt, { value: B, onChange: mt })
             ] })
           ] }),
-          /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24 }, children: [
-            /* @__PURE__ */ e(Me, { value: u.value, label: u.label, trend: u.trend, style: { width: 264, flexShrink: 0 } }),
-            /* @__PURE__ */ e(Me, { value: g.value, label: g.label, trend: g.trend, style: { width: 264, flexShrink: 0 } }),
-            /* @__PURE__ */ i(
+          /* @__PURE__ */ l("div", { style: { display: "flex", gap: 24 }, children: [
+            /* @__PURE__ */ e(Ve, { value: y.value, label: y.label, trend: y.trend, points: y.points, style: { width: 264, flexShrink: 0 } }),
+            /* @__PURE__ */ e(Ve, { value: m.value, label: m.label, trend: m.trend, points: m.points, style: { width: 264, flexShrink: 0 } }),
+            /* @__PURE__ */ l(
               "div",
               {
                 style: {
                   flex: 1,
-                  background: n.beige,
-                  border: `1px solid ${n.border}`,
+                  background: r.beige,
+                  border: `1px solid ${r.border}`,
                   borderRadius: 8,
                   padding: 16,
                   display: "flex",
@@ -2264,75 +2499,75 @@ function $t({
                   boxSizing: "border-box"
                 },
                 children: [
-                  /* @__PURE__ */ e(Se, { value: x.value, label: x.label, trend: x.trend }),
-                  /* @__PURE__ */ e(Se, { value: m.value, label: m.label, trend: m.trend, withDivider: !0 }),
-                  /* @__PURE__ */ e(Se, { value: z.value, label: z.label, trend: z.trend, withDivider: !0 })
+                  /* @__PURE__ */ e(ze, { value: b.value, label: b.label, trend: b.trend, points: b.points }),
+                  /* @__PURE__ */ e(ze, { value: k.value, label: k.label, trend: k.trend, points: k.points, withDivider: !0 }),
+                  /* @__PURE__ */ e(ze, { value: D.value, label: D.label, trend: D.trend, points: D.points, withDivider: !0 })
                 ]
               }
             )
           ] }),
           /* @__PURE__ */ e(
-            Xe,
+            it,
             {
-              data: O,
-              columns: k,
-              initialPageSize: N,
-              onRowClick: et,
-              onVisibleColumnsChange: be
+              data: $,
+              columns: L,
+              initialPageSize: Y,
+              onRowClick: bt,
+              onVisibleColumnsChange: we
             }
           ),
-          /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24, alignItems: "flex-start" }, children: [
-            /* @__PURE__ */ i("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 16 }, children: [
-              /* @__PURE__ */ e(ue, { icon: je, title: F, iconColor: "var(--rail-compliance)" }),
+          /* @__PURE__ */ l("div", { style: { display: "flex", gap: 24, alignItems: "flex-start" }, children: [
+            /* @__PURE__ */ l("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 16 }, children: [
+              /* @__PURE__ */ e(xe, { icon: qe, title: v, iconColor: "var(--rail-compliance)" }),
               /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
                     display: "flex",
                     flexDirection: "column",
-                    borderBottom: `1px solid ${n.border}`,
+                    borderBottom: `1px solid ${r.border}`,
                     maxHeight: 480,
                     overflowY: "auto"
                   },
-                  children: E.length === 0 ? /* @__PURE__ */ e(se, { message: Q }) : E.map((c, b) => /* @__PURE__ */ e(Oe, { ...c }, b))
+                  children: E.length === 0 ? /* @__PURE__ */ e(he, { message: ae }) : E.map((f, w) => /* @__PURE__ */ e(Ke, { ...f }, w))
                 }
               )
             ] }),
-            /* @__PURE__ */ i("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 16 }, children: [
-              /* @__PURE__ */ e(ue, { icon: Ne, title: A, iconColor: "var(--rail-compliance)" }),
+            /* @__PURE__ */ l("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 16 }, children: [
+              /* @__PURE__ */ e(xe, { icon: Qe, title: I, iconColor: "var(--rail-compliance)" }),
               /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
                     display: "flex",
                     flexDirection: "column",
-                    borderBottom: `1px solid ${n.border}`,
+                    borderBottom: `1px solid ${r.border}`,
                     maxHeight: 480,
                     overflowY: "auto"
                   },
-                  children: _.length === 0 ? /* @__PURE__ */ e(se, { message: y }) : _.map((c, b) => /* @__PURE__ */ e(Oe, { ...c }, b))
+                  children: M.length === 0 ? /* @__PURE__ */ e(he, { message: J }) : M.map((f, w) => /* @__PURE__ */ e(Ke, { ...f }, w))
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-            /* @__PURE__ */ e(ue, { icon: de, title: j, iconColor: "var(--rail-compliance)" }),
-            /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24, alignItems: "flex-start" }, children: [
-              /* @__PURE__ */ i("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }, children: [
-                /* @__PURE__ */ e(Re, { icon: Ee, title: T }),
-                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: B.length === 0 ? /* @__PURE__ */ e(se, { message: w }) : B.map((c, b) => /* @__PURE__ */ e(ye, { ...c }, b)) })
+          /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+            /* @__PURE__ */ e(xe, { icon: ye, title: H, iconColor: "var(--rail-compliance)" }),
+            /* @__PURE__ */ l("div", { style: { display: "flex", gap: 24, alignItems: "flex-start" }, children: [
+              /* @__PURE__ */ l("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }, children: [
+                /* @__PURE__ */ e(Ge, { icon: et, title: K }),
+                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: X.length === 0 ? /* @__PURE__ */ e(he, { message: q }) : X.map((f, w) => /* @__PURE__ */ e(be, { ...f }, w)) })
               ] }),
-              /* @__PURE__ */ i("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }, children: [
-                /* @__PURE__ */ e(Re, { icon: Ye, title: P }),
-                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: U.length === 0 ? /* @__PURE__ */ e(se, { message: H }) : U.map((c, b) => /* @__PURE__ */ e(ye, { ...c }, b)) })
+              /* @__PURE__ */ l("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }, children: [
+                /* @__PURE__ */ e(Ge, { icon: tt, title: _ }),
+                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: G.length === 0 ? /* @__PURE__ */ e(he, { message: Q }) : G.map((f, w) => /* @__PURE__ */ e(be, { ...f }, w)) })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-            /* @__PURE__ */ e(ue, { icon: lt, title: q, iconColor: "var(--rail-compliance)", trailing: f, bordered: !0 }),
-            X.length === 0 && L.length === 0 ? /* @__PURE__ */ e(se, { message: $ }) : /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24 }, children: [
-              /* @__PURE__ */ e("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: X.map((c, b) => /* @__PURE__ */ e(ye, { ...c }, b)) }),
-              /* @__PURE__ */ e("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: L.map((c, b) => /* @__PURE__ */ e(ye, { ...c }, b)) })
+          /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+            /* @__PURE__ */ e(xe, { icon: Dt, title: ie, iconColor: "var(--rail-compliance)", trailing: h, bordered: !0 }),
+            O.length === 0 && Z.length === 0 ? /* @__PURE__ */ e(he, { message: j }) : /* @__PURE__ */ l("div", { style: { display: "flex", gap: 24 }, children: [
+              /* @__PURE__ */ e("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: O.map((f, w) => /* @__PURE__ */ e(be, { ...f }, w)) }),
+              /* @__PURE__ */ e("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: Z.map((f, w) => /* @__PURE__ */ e(be, { ...f }, w)) })
             ] })
           ] })
         ]
@@ -2341,10 +2576,27 @@ function $t({
   ] });
 }
 export {
-  It as D,
-  $t as P,
-  ut as a,
-  Lt as b,
-  Ke as c
+  en as D,
+  dt as M,
+  tn as P,
+  Te as R,
+  Bt as a,
+  Qt as b,
+  It as c,
+  $t as d,
+  ee as e,
+  Tt as f,
+  Fe as g,
+  st as h,
+  ct as i,
+  V as j,
+  ke as k,
+  Ae as l,
+  Me as m,
+  Ie as n,
+  Ct as o,
+  yt as p,
+  At as r,
+  Ce as t
 };
 //# sourceMappingURL=PerformancePanel.es.js.map