chordia-ui 3.9.1 → 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 w from "react";
-import { createPortal as tt } from "react-dom";
-import { ArrowLeft as it, Download as Be, CalendarDays as ge, ArrowRight as ve, Phone as pe, ShieldCheck as Ne, Lightbulb as je, FolderKanban as Ee, Layers as Ue, TrendingUp as Ye, 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 l = {
+import { jsxs as l, jsx as e, Fragment as Je } from "react/jsx-runtime";
+import S from "react";
+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,69 +133,88 @@ const l = {
   // Section accent colors are passed to SectionHeading via `iconColor`.
   railCompliance: "var(--rail-compliance)",
   accentYellow: "var(--accent-yellow)"
-}, J = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", C = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
-function Ie(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 r = { 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", r);
-  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", r);
-  const s = new Date(a);
-  return Number.isNaN(s.getTime()) ? a : s.toLocaleDateString("en-US", r);
-}
-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, r = 52, a = 36) {
-  if (!Array.isArray(t))
-    return null;
-  const o = t.map((S) => Number(S)).filter((S) => Number.isFinite(S));
-  if (o.length < 2)
-    return null;
-  const s = Math.min(...o), d = Math.max(...o), c = 4, p = d - s || 1, z = a - c * 2 - 4, y = (S) => (o.length === 1 ? 0 : S / (o.length - 1) * (r - 2)) + 1, m = (S) => c + (1 - (S - s) / p) * z;
-  let b = "";
-  for (let S = 0; S < o.length; S++)
-    b += `${S === 0 ? "M" : "L"}${y(S).toFixed(2)},${m(o[S]).toFixed(2)}`;
-  const v = y(o.length - 1), F = y(0), O = `${b} L${v.toFixed(2)},${a} L${F.toFixed(2)},${a} Z`;
-  return { line: b, area: O };
+    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);
 }
-function ct({ trend: t = "up", points: r, width: a = 49.618, height: o = 35 }) {
-  const s = w.useId(), d = dt(r), c = d ? d.line : at, p = d ? d.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: !d && 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-${s}`,
+            id: `spark-${d}`,
             x1: "9.96776",
             y1: "16.2053",
             x2: "9.96776",
             y2: "36.0002",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ e("stop", { stopColor: l.ink }),
-              /* @__PURE__ */ e("stop", { offset: "1", stopColor: l.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: p,
-            fill: `url(#spark-${s})`,
+            d: F,
+            fill: `url(#spark-${d})`,
             fillRule: "evenodd",
             clipRule: "evenodd",
             opacity: "0.1"
@@ -95,71 +223,87 @@ function ct({ trend: t = "up", points: r, width: a = 49.618, height: o = 35 }) {
         /* @__PURE__ */ e(
           "path",
           {
-            d: c,
-            stroke: l.ink,
+            d: u,
+            stroke: a.ink,
             strokeWidth: "2",
             fill: "none",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            strokeDasharray: !d && t === "down" ? "2 4" : void 0
+            strokeDasharray: !c && t === "down" ? "2 4" : void 0
           }
         )
       ]
     }
   );
 }
-function ke({ value: t, label: r, sub: a, trend: o = "up", points: s }) {
-  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: s }),
-        /* @__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: J,
+                fontFamily: te,
                 fontSize: 28,
                 fontWeight: 400,
                 lineHeight: "1.2",
-                color: l.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: l.ink,
+                  color: a.ink,
                   lineHeight: "1.2"
                 },
-                children: r
+                children: n
               }
             ),
             /* @__PURE__ */ e(
               "span",
               {
                 style: {
-                  fontFamily: C,
+                  fontFamily: W,
                   fontSize: 13,
-                  color: l.neutral600,
+                  color: a.neutral600,
                   lineHeight: "1.2"
                 },
-                children: a
+                children: i
               }
             )
           ] })
@@ -168,21 +312,21 @@ function ke({ value: t, label: r, sub: a, trend: o = "up", points: s }) {
     }
   );
 }
-function pt({ label: t, active: r = !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: r ? "none" : `1px solid ${l.borderSubtle}`,
-        background: r ? l.black : l.white,
-        color: r ? l.white : l.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,40 +334,40 @@ function pt({ label: t, active: r = !1, onClick: a }) {
     }
   );
 }
-function ae({
+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: r = [],
+  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 [s, d] = w.useState(null), c = 460, p = 110, z = Array.isArray(a) && a.length > 0, y = w.useId(), m = 6, b = Array.isArray(r) ? r : [], v = b.length <= m ? b : Array.from(
+  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 },
-    (h, g) => b[Math.round(g * (b.length - 1) / (m - 1))]
-  ), F = Math.max(2, v.length || m), O = Array.from({ length: F }, (h, g) => g / (F - 1) * c);
-  if (!z)
-    return /* @__PURE__ */ i("div", { style: { display: "flex", gap: 8, height: 133, width: "100%" }, children: [
+    (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: p + 14,
-          viewBox: `0 0 ${c} ${p + 14}`,
+          height: u + 14,
+          viewBox: `0 0 ${c} ${u + 14}`,
           preserveAspectRatio: "none",
-          children: O.map((h, g) => /* @__PURE__ */ e(
+          children: $.map((p, g) => /* @__PURE__ */ e(
             "line",
             {
-              x1: h,
+              x1: p,
               y1: "0",
-              x2: h,
-              y2: p,
-              stroke: l.borderSubtle,
+              x2: p,
+              y2: u,
+              stroke: a.borderSubtle,
               strokeDasharray: "2 3",
               strokeWidth: "1",
               vectorEffect: "non-scaling-stroke"
@@ -233,17 +377,17 @@ function ae({
         }
       ) })
     ] });
-  const S = Array.isArray(a[0]) ? a : a.map((h, g) => [g, h]), G = S.map(([, h]) => h), H = Math.min(...G), _ = Math.max(...G), E = _ === H ? Math.max(Math.abs(_) * 0.1, 1) : (_ - H) * 0.1, U = H - E, B = _ + E, K = B - U || 1, u = (h) => (B - h) / K * p, x = S.map(([h, g]) => [h, u(g)]), I = t && t.length ? t : Array.from({ length: 5 }, (h, g) => {
-    const L = B - g / 4 * (B - U), M = Math.abs(L), A = M >= 100 ? 0 : M >= 10 ? 1 : 2;
-    return L.toFixed(A);
-  }), P = x[0][0], N = x[x.length - 1][0] - P || 1, Q = 8, te = Math.max(1, c - Q * 2), X = (h) => Q + (h - P) / N * te, ie = (h) => {
-    const g = Number(h);
+  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(h ?? "");
-    const L = Math.abs(g), M = L >= 100 ? 0 : L >= 10 ? 1 : 2;
-    return g.toFixed(M);
-  }, Z = x.map(([h, g], L) => `${L === 0 ? "M" : "L"}${X(h)},${g}`).join(" "), j = `${Z} L${X(x[x.length - 1][0])},${p} L${X(x[0][0])},${p} Z`, ne = o ?? x.length - 1;
-  return /* @__PURE__ */ i("div", { style: { display: "flex", gap: 8, height: 133, width: "100%" }, children: [
+      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",
       {
@@ -252,16 +396,16 @@ function ae({
           flexDirection: "column",
           justifyContent: "space-between",
           padding: "14px 0",
-          fontFamily: C,
+          fontFamily: W,
           fontSize: 10,
-          color: l.neutral800,
+          color: a.neutral800,
           flexShrink: 0
         },
-        children: I.map((h) => /* @__PURE__ */ e("span", { children: h }, h))
+        children: I.map((p) => /* @__PURE__ */ e("span", { children: p }, p))
       }
     ),
-    /* @__PURE__ */ i("div", { style: { flex: 1, position: "relative", minWidth: 0 }, children: [
-      s && /* @__PURE__ */ i(
+    /* @__PURE__ */ l("div", { style: { flex: 1, position: "relative", minWidth: 0 }, children: [
+      s && /* @__PURE__ */ l(
         "div",
         {
           style: {
@@ -271,13 +415,13 @@ function ae({
             transform: "translate(-50%, calc(-100% - 10px))",
             pointerEvents: "none",
             zIndex: 2,
-            background: l.black,
-            color: l.white,
+            background: a.black,
+            color: a.white,
             borderRadius: 6,
             minWidth: 60,
             padding: "8px 10px",
             boxShadow: "0 6px 16px rgba(0,0,0,0.18)",
-            fontFamily: C,
+            fontFamily: W,
             fontSize: 11,
             lineHeight: 1.25,
             whiteSpace: "nowrap",
@@ -295,7 +439,7 @@ function ae({
                   bottom: -5,
                   width: 10,
                   height: 10,
-                  background: l.black,
+                  background: a.black,
                   transform: "translateX(-50%) rotate(45deg)",
                   borderRadius: 2
                 }
@@ -304,27 +448,27 @@ function ae({
           ]
         }
       ),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ l(
         "svg",
         {
           width: "100%",
-          height: p + 14,
-          viewBox: `0 0 ${c} ${p + 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-${y}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ e("stop", { offset: "0%", style: { stopColor: l.black, stopOpacity: 0.08 } }),
-              /* @__PURE__ */ e("stop", { offset: "100%", style: { stopColor: l.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 } })
             ] }) }),
-            O.map((h, g) => /* @__PURE__ */ e(
+            $.map((p, g) => /* @__PURE__ */ e(
               "line",
               {
-                x1: h,
+                x1: p,
                 y1: "0",
-                x2: h,
-                y2: p,
-                stroke: l.borderSubtle,
+                x2: p,
+                y2: u,
+                stroke: a.borderSubtle,
                 strokeDasharray: "2 3",
                 strokeWidth: "1",
                 vectorEffect: "non-scaling-stroke"
@@ -335,8 +479,8 @@ function ae({
             /* @__PURE__ */ e(
               "path",
               {
-                d: Z,
-                stroke: l.black,
+                d: Q,
+                stroke: a.black,
                 strokeWidth: "1.5",
                 fill: "none",
                 strokeLinecap: "round",
@@ -344,29 +488,29 @@ function ae({
                 vectorEffect: "non-scaling-stroke"
               }
             ),
-            x.map(([h, g], L) => {
-              const M = L === ne;
+            v.map(([p, g], T) => {
+              const P = T === se;
               return /* @__PURE__ */ e(
                 "circle",
                 {
-                  cx: X(h),
+                  cx: J(p),
                   cy: g,
-                  r: M ? 4 : 3,
-                  fill: M ? l.black : l.white,
-                  stroke: l.black,
+                  r: P ? 4 : 3,
+                  fill: P ? a.black : a.white,
+                  stroke: a.black,
                   strokeWidth: "1.5",
                   vectorEffect: "non-scaling-stroke",
                   onMouseEnter: () => {
-                    var A;
+                    var C;
                     d({
-                      xPct: X(h) / c * 100,
-                      yPct: g / (p + 28) * 100,
-                      label: b[L] || `Point ${L + 1}`,
-                      value: ie((A = S[L]) == null ? void 0 : A[1])
+                      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])
                     });
                   }
                 },
-                L
+                T
               );
             })
           ]
@@ -379,63 +523,80 @@ function ae({
             display: "flex",
             justifyContent: "space-between",
             paddingRight: 6,
-            fontFamily: C,
+            fontFamily: W,
             fontSize: 10,
-            color: l.neutral800,
+            color: a.neutral800,
             marginTop: 8,
             marginBottom: 4,
             overflow: "hidden"
           },
-          children: v.map((h, g) => /* @__PURE__ */ e("span", { style: { whiteSpace: "nowrap" }, children: h }, g))
+          children: k.map((p, g) => /* @__PURE__ */ e("span", { style: { whiteSpace: "nowrap" }, children: p }, g))
         }
       )
     ] })
   ] });
 }
-function se({ title: t, value: r, 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: l.white,
-        border: `1px solid ${l.border}`,
+        background: a.white,
+        border: `1px solid ${a.border}`,
         borderRadius: 8,
         padding: 24,
         display: "flex",
         flexDirection: "column",
         gap: 24,
         minWidth: 0,
-        boxShadow: l.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: J,
+                fontFamily: te,
                 fontWeight: 600,
                 fontSize: 15,
-                color: l.ink,
+                color: a.ink,
                 lineHeight: 1.2
               },
               children: t
             }
           ),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ l(
             "span",
             {
               style: {
                 display: "inline-flex",
                 alignItems: "flex-end",
                 gap: 4,
-                fontFamily: J,
+                fontFamily: te,
                 fontWeight: 600
               },
               children: [
-                /* @__PURE__ */ e("span", { style: { fontSize: 20, color: l.black, lineHeight: 1 }, children: r }),
-                /* @__PURE__ */ e("span", { style: { fontSize: 10, color: l.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
               ]
             }
           )
@@ -445,8 +606,8 @@ function se({ title: t, value: r, delta: a, children: o }) {
     }
   );
 }
-function we({ icon: t, title: r, trailing: a, iconColor: o = l.ink, bordered: s = !1 }) {
-  return /* @__PURE__ */ i(
+function Le({ icon: t, title: n, trailing: i, iconColor: o = a.ink, bordered: s = !1 }) {
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -455,7 +616,7 @@ function we({ icon: t, title: r, trailing: a, iconColor: o = l.ink, bordered: s
         gap: 8,
         width: "100%",
         paddingBottom: s ? 12 : 0,
-        borderBottom: s ? `1px solid ${l.border}` : "none"
+        borderBottom: s ? `1px solid ${a.border}` : "none"
       },
       children: [
         /* @__PURE__ */ e(
@@ -477,34 +638,34 @@ function we({ icon: t, title: r, trailing: a, iconColor: o = l.ink, bordered: s
           {
             style: {
               flex: 1,
-              fontFamily: J,
+              fontFamily: te,
               fontWeight: 600,
               fontSize: 16,
-              color: l.ink,
+              color: a.ink,
               lineHeight: 1.2,
               textTransform: "uppercase",
               letterSpacing: "0.02em"
             },
-            children: r
+            children: n
           }
         ),
-        a && /* @__PURE__ */ e("div", { style: { fontFamily: C, fontSize: 14, color: l.ink }, children: a })
+        i && /* @__PURE__ */ e("div", { style: { fontFamily: W, fontSize: 14, color: a.ink }, children: i })
       ]
     }
   );
 }
-function ft({ text: t, bullet: r, citation: a, date: o, href: s }) {
-  const d = t ?? r ?? "";
-  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: l.ink,
+        color: a.ink,
         lineHeight: "24px",
         gap: 16
       },
@@ -516,10 +677,10 @@ function ft({ text: t, bullet: r, citation: a, date: o, href: s }) {
             target: "_blank",
             rel: "noopener noreferrer",
             style: {
-              color: l.ink,
+              color: a.ink,
               textDecoration: "underline",
               textUnderlineOffset: 2,
-              textDecorationColor: l.border,
+              textDecorationColor: a.border,
               minWidth: 0,
               overflow: "hidden",
               textOverflow: "ellipsis",
@@ -528,9 +689,9 @@ function ft({ text: t, bullet: r, citation: a, date: o, href: s }) {
             children: d
           }
         ) : /* @__PURE__ */ e("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: d }),
-        /* @__PURE__ */ i("span", { style: { display: "inline-flex", gap: 4, whiteSpace: "nowrap" }, children: [
-          /* @__PURE__ */ e("span", { style: { color: l.ink }, children: a }),
-          o ? /* @__PURE__ */ i("span", { style: { color: l.muted }, children: [
+        /* @__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,
             ")"
@@ -540,10 +701,10 @@ function ft({ text: t, bullet: r, citation: a, date: o, href: s }) {
     }
   );
 }
-function Ae({
+function je({
   title: t,
-  summary: r,
-  calls: a,
+  summary: n,
+  calls: i,
   // Hosts emit `percent` (matches PerformancePanel's accordion); legacy
   // callers may still send `delta`. Accept either.
   percent: o,
@@ -551,14 +712,14 @@ function Ae({
   bullets: d,
   defaultExpanded: c = !1
 }) {
-  const [p, z] = w.useState(c), y = o ?? s ?? "", m = Array.isArray(d) ? d : [];
-  return /* @__PURE__ */ i("div", { style: { borderTop: `1px solid ${l.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: () => z((b) => !b),
-        "aria-expanded": p,
+        onClick: () => F((L) => !L),
+        "aria-expanded": u,
         style: {
           border: "none",
           background: "transparent",
@@ -569,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: l.black,
+                    color: a.black,
                     lineHeight: "24px"
                   },
                   children: t
                 }
               ),
-              /* @__PURE__ */ e("span", { style: { fontFamily: C, fontSize: 14, color: l.muted, lineHeight: "24px" }, children: r })
+              /* @__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(pe, { size: 12, color: l.ink, strokeWidth: 1.75 }),
-                /* @__PURE__ */ e("span", { style: { fontFamily: C, fontSize: 12, color: l.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(Ye, { size: 12, color: l.ink, strokeWidth: 1.75 }),
-                /* @__PURE__ */ e("span", { style: { fontFamily: C, fontSize: 12, color: l.ink }, children: y })
+              /* @__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: l.ink,
+              color: a.ink,
               strokeWidth: 2,
               style: {
                 flexShrink: 0,
-                transform: p ? "rotate(180deg)" : "none",
+                transform: u ? "rotate(180deg)" : "none",
                 transition: "transform 150ms ease"
               }
             }
@@ -616,7 +790,7 @@ function Ae({
         ]
       }
     ),
-    p && m.length > 0 && /* @__PURE__ */ e(
+    u && $.length > 0 && /* @__PURE__ */ e(
       "div",
       {
         style: {
@@ -625,13 +799,13 @@ function Ae({
           gap: 12,
           padding: "0 16px 16px"
         },
-        children: m.map((b, v) => /* @__PURE__ */ e(ft, { ...b }, v))
+        children: $.map((L, Y) => /* @__PURE__ */ e(Nt, { ...L }, Y))
       }
     )
   ] });
 }
-function Te({ label: t, value: r }) {
-  return /* @__PURE__ */ i(
+function Ye({ label: t, value: n }) {
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -639,28 +813,28 @@ function Te({ label: t, value: r }) {
         justifyContent: "space-between",
         alignItems: "center",
         padding: "8px 8px 12px",
-        borderBottom: `1px solid ${l.border}`,
-        fontFamily: C,
+        borderBottom: `1px solid ${a.border}`,
+        fontFamily: W,
         fontSize: 13,
         lineHeight: "1.2"
       },
       children: [
-        /* @__PURE__ */ e("span", { style: { color: l.ink }, children: t }),
-        /* @__PURE__ */ e("span", { style: { color: l.muted }, children: r })
+        /* @__PURE__ */ e("span", { style: { color: a.ink }, children: t }),
+        /* @__PURE__ */ e("span", { style: { color: a.muted }, children: n })
       ]
     }
   );
 }
-function ht({ value: t = 0, max: r = 5 }) {
-  const a = typeof t == "number" ? t : parseFloat(t) || 0, o = Math.floor(a), s = a % 1 > 0 && o < r;
-  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 4 }, children: Array.from({ length: r }).map((d, c) => c < 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: l.black,
+        background: a.black,
         display: "inline-block"
       }
     },
@@ -683,7 +857,7 @@ function ht({ value: t = 0, max: r = 5 }) {
             width: 6,
             height: 6,
             borderRadius: "50%",
-            background: l.black,
+            background: a.black,
             display: "inline-block"
           }
         }
@@ -697,8 +871,8 @@ function ht({ value: t = 0, max: r = 5 }) {
         width: 10,
         height: 10,
         borderRadius: "50%",
-        background: l.white,
-        border: `1px solid ${l.border}`,
+        background: a.white,
+        border: `1px solid ${a.border}`,
         display: "inline-block",
         boxSizing: "border-box"
       }
@@ -706,7 +880,7 @@ function ht({ value: t = 0, max: r = 5 }) {
     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 },
@@ -717,16 +891,16 @@ const Lt = [
     width: 220,
     sortable: !0,
     render: (t) => {
-      const r = 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(ht, { value: r })
+        /* @__PURE__ */ e(Rt, { value: n })
       ] });
     }
   }
 ];
-function He({ icon: t, title: r }) {
-  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",
       {
@@ -734,103 +908,116 @@ function He({ icon: t, title: r }) {
           width: 34,
           height: 34,
           borderRadius: 9999,
-          background: l.iconCircle,
+          background: a.iconCircle,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           flexShrink: 0
         },
-        children: /* @__PURE__ */ e(t, { size: 20, color: l.ink, strokeWidth: 1.75 })
+        children: /* @__PURE__ */ e(t, { size: 20, color: a.ink, strokeWidth: 1.75 })
       }
     ),
     /* @__PURE__ */ e(
       "span",
       {
         style: {
-          fontFamily: J,
+          fontFamily: te,
           fontWeight: 600,
           fontSize: 16,
-          color: l.ink,
+          color: a.ink,
           lineHeight: 1.2
         },
-        children: r
+        children: n
       }
     )
   ] });
 }
-function ut({
+function Bt({
   agentName: t = "",
-  startDate: r = "",
-  endDate: a = "",
+  startDate: n = "",
+  endDate: i = "",
   totalCalls: o = "",
   onBack: s,
   className: d = "",
   // KPI strip
   kpiBaseline: c = { value: "", label: "", sub: "", trend: "up" },
-  kpiAgentLift: p = { value: "", label: "", sub: "", trend: "down" },
-  kpiScore: z = { 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: y = { value: "", delta: "" },
   agentLiftChart: m = { value: "", delta: "" },
   scoreChart: b = { value: "", delta: "" },
-  csatChart: v = { value: "", delta: "" },
-  volumeChart: F = { 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: S = [],
-  callDrivers: G = [],
-  callParadigms: H = [],
-  strengthsTitle: _ = "",
-  guidanceTitle: E = "",
-  callMixTitle: U = "",
-  driversTitle: B = "",
-  paradigmsTitle: K = "",
-  sessionsTitle: u = "",
-  baselineChartTitle: x = "",
+  guidanceItems: $ = [],
+  strengthItems: L = [],
+  callDrivers: Y = [],
+  callParadigms: M = [],
+  strengthsTitle: E = "",
+  guidanceTitle: X = "",
+  callMixTitle: G = "",
+  driversTitle: O = "",
+  paradigmsTitle: Z = "",
+  sessionsTitle: h = "",
+  baselineChartTitle: v = "",
   agentLiftChartTitle: I = "",
-  scoreChartTitle: P = "",
-  csatChartTitle: Y = "",
-  volumeChartTitle: N = "",
+  scoreChartTitle: H = "",
+  csatChartTitle: K = "",
+  volumeChartTitle: _ = "",
   // Sessions table
-  sessions: Q = [],
-  sessionColumns: te = [],
-  initialPageSize: X = 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: ie = "30d",
-  onWindowChange: Z,
+  selectedWindow: q = "30d",
+  onWindowChange: Q,
   dateRange: j,
-  onDateRangeChange: ne,
+  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: h = null,
+  sessionsTotal: p = null,
   sessionsPage: g = null,
-  sessionsPageSize: L = null,
-  onSessionsPageChange: M,
-  onSessionsPageSizeChange: A,
+  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: T,
+  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: ee
+  onSessionsVisibleColumnsChange: le
 }) {
-  const fe = !!(j != null && j.from && (j != null && j.to)), $ = (W) => !!(W && (W.value || W.delta || Array.isArray(W.points) && W.points.length > 0)), le = $(y) || $(m) || $(b), re = $(v) || $(F);
-  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: d,
       style: {
-        background: l.white,
-        fontFamily: C,
-        color: l.ink,
+        background: a.white,
+        fontFamily: W,
+        color: a.ink,
         width: "100%",
         minWidth: 1192,
         boxSizing: "border-box",
@@ -838,7 +1025,7 @@ function ut({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -865,11 +1052,11 @@ function ut({
                     background: "transparent",
                     border: "none",
                     cursor: "pointer",
-                    color: l.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(
@@ -877,7 +1064,7 @@ function ut({
                 {
                   style: {
                     paddingLeft: 16,
-                    borderLeft: `1px solid ${l.border}`,
+                    borderLeft: `1px solid ${a.border}`,
                     flex: 1,
                     minWidth: 0,
                     alignSelf: "stretch",
@@ -888,10 +1075,10 @@ function ut({
                     "h1",
                     {
                       style: {
-                        fontFamily: J,
+                        fontFamily: te,
                         fontSize: 24,
                         fontWeight: 400,
-                        color: l.ink,
+                        color: a.ink,
                         margin: 0,
                         lineHeight: 1,
                         whiteSpace: "nowrap"
@@ -901,12 +1088,12 @@ function ut({
                   )
                 }
               ),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ l(
                 "button",
                 {
                   type: "button",
-                  onClick: () => T == null ? void 0 : T(),
-                  disabled: !T,
+                  onClick: () => A == null ? void 0 : A(),
+                  disabled: !A,
                   style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -914,18 +1101,18 @@ function ut({
                     height: 32,
                     padding: "0 16px",
                     borderRadius: 10,
-                    border: `1px solid ${l.neutralBorder}`,
-                    background: l.white,
-                    cursor: T ? "pointer" : "not-allowed",
-                    opacity: T ? 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: l.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"
                   ]
                 }
@@ -933,7 +1120,7 @@ function ut({
             ]
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -943,7 +1130,7 @@ function ut({
               gap: 16
             },
             children: [
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ l(
                 "div",
                 {
                   style: {
@@ -954,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: l.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: l.ink,
+                              color: a.ink,
                               lineHeight: 1.5
                             },
-                            children: Ie(r)
+                            children: (N == null ? void 0 : N.from) ?? (U == null ? void 0 : U.from) ?? _e(n)
                           }
                         ),
-                        /* @__PURE__ */ e(ve, { size: 12, color: l.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: l.ink,
+                              color: a.ink,
                               lineHeight: 1.5
                             },
-                            children: Ie(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(pe, { size: 14, color: l.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: l.ink,
+                              color: a.ink,
                               lineHeight: 1.5
                             },
                             children: o
@@ -999,93 +1186,95 @@ 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: !fe && W.id === ie,
-                          onClick: () => Z == null ? void 0 : Z(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: j, onChange: ne })
+                      /* @__PURE__ */ e(yt, { value: j, onChange: se })
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
-                    background: l.beige,
-                    border: `1px solid ${l.border}`,
+                    background: a.beige,
+                    border: `1px solid ${a.border}`,
                     borderRadius: 8,
                     padding: 16,
                     display: "flex",
-                    gap: 24,
                     alignItems: "center"
                   },
                   children: [
-                    /* @__PURE__ */ e(
-                      ke,
-                      {
-                        value: c.value,
-                        label: c.label,
-                        sub: c.sub,
-                        trend: c.trend,
-                        points: c.points
-                      }
-                    ),
-                    /* @__PURE__ */ e(ve, { size: 20, color: l.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
-                    /* @__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
+                        size: 20,
+                        color: a.ink,
+                        strokeWidth: 1.75,
+                        style: { flexShrink: 0, margin: "0 24px" }
                       }
-                    ),
-                    /* @__PURE__ */ e(ve, { size: 20, color: l.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
+                    ) : null,
                     /* @__PURE__ */ e(
-                      ke,
+                      "div",
                       {
-                        value: z.value,
-                        label: z.label,
-                        sub: z.sub,
-                        trend: z.trend,
-                        points: z.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))
                 }
               ),
-              le && /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24 }, children: [
-                $(y) && /* @__PURE__ */ e(se, { title: x, value: y.value, delta: y.delta, children: /* @__PURE__ */ e(
-                  ae,
+              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: y.yLabels,
                     xLabels: y.xLabels,
                     points: y.points
                   }
                 ) }),
-                $(m) && /* @__PURE__ */ e(se, { title: I, value: m.value, delta: m.delta, children: /* @__PURE__ */ e(
-                  ae,
+                V(m) && /* @__PURE__ */ e(fe, { title: I, value: m.value, delta: m.delta, children: /* @__PURE__ */ e(
+                  ue,
                   {
                     yLabels: m.yLabels,
                     xLabels: m.xLabels,
                     points: m.points
                   }
                 ) }),
-                $(b) && /* @__PURE__ */ e(se, { title: P, value: b.value, delta: b.delta, children: /* @__PURE__ */ e(
-                  ae,
+                V(b) && /* @__PURE__ */ e(fe, { title: H, value: b.value, delta: b.delta, children: /* @__PURE__ */ e(
+                  ue,
                   {
                     yLabels: b.yLabels,
                     xLabels: b.xLabels,
@@ -1093,74 +1282,74 @@ function ut({
                   }
                 ) })
               ] }),
-              re && /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24 }, children: [
-                $(v) && /* @__PURE__ */ e(se, { title: Y, value: v.value, delta: v.delta, children: /* @__PURE__ */ e(
-                  ae,
+              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: v.yLabels,
-                    xLabels: v.xLabels,
-                    points: v.points
+                    yLabels: k.yLabels,
+                    xLabels: k.xLabels,
+                    points: k.points
                   }
                 ) }),
-                $(F) && /* @__PURE__ */ e(se, { title: N, value: F.value, delta: F.delta, children: /* @__PURE__ */ e(
-                  ae,
+                V(D) && /* @__PURE__ */ e(fe, { title: _, value: D.value, delta: D.delta, children: /* @__PURE__ */ e(
+                  ue,
                   {
-                    yLabels: F.yLabels,
-                    xLabels: F.xLabels,
-                    points: F.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: Ne, title: _, iconColor: l.railCompliance }),
-                  /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: S.map((W, V) => /* @__PURE__ */ e(Ae, { ...W }, V)) })
+              /* @__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: je, title: E, iconColor: l.railCompliance }),
-                  /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: O.map((W, V) => /* @__PURE__ */ e(Ae, { ...W }, V)) })
+                /* @__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: pe, title: U, iconColor: l.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: B }),
-                    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: G.map((W, V) => /* @__PURE__ */ e(Te, { ...W }, V)) })
+              /* @__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: Ue, title: K }),
-                    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: H.map((W, V) => /* @__PURE__ */ e(Te, { ...W }, V)) })
+                  /* @__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: [
-                u && /* @__PURE__ */ e(
+              /* @__PURE__ */ l("div", { style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 8 }, children: [
+                h && /* @__PURE__ */ e(
                   "span",
                   {
                     style: {
-                      fontFamily: J,
+                      fontFamily: te,
                       fontWeight: 600,
                       fontSize: 16,
-                      color: l.ink,
+                      color: a.ink,
                       lineHeight: 1.2
                     },
-                    children: u
+                    children: h
                   }
                 ),
                 /* @__PURE__ */ e(
-                  Xe,
+                  it,
                   {
-                    data: Q,
-                    columns: te,
-                    initialPageSize: X,
-                    totalCount: h,
+                    data: ie,
+                    columns: ae,
+                    initialPageSize: J,
+                    totalCount: p,
                     page: g,
-                    pageSize: L,
-                    onPageChange: M,
-                    onPageSizeChange: A,
-                    onRowClick: be,
-                    onVisibleColumnsChange: ee
+                    pageSize: T,
+                    onPageChange: P,
+                    onPageSizeChange: C,
+                    onRowClick: we,
+                    onVisibleColumnsChange: le
                   }
                 )
               ] })
@@ -1171,7 +1360,7 @@ function ut({
     }
   );
 }
-const de = { 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)",
@@ -1197,41 +1386,41 @@ const de = { value: "", label: "", trend: "up" }, n = {
   shadowDropdown: "var(--shadow-dropdown)",
   railCompliance: "var(--rail-compliance)"
   // section icon accent
-}, q = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", D = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
-function Ve({ trend: t = "up", width: r = 49.618, height: a = 35 }) {
-  const o = w.useId(), s = "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", d = "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: r,
-      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,
-            fill: `url(#spark-${o})`,
+            d: u,
+            fill: `url(#spark-${s})`,
             fillRule: "evenodd",
             clipRule: "evenodd",
             opacity: "0.1"
@@ -1240,74 +1429,79 @@ function Ve({ trend: t = "up", width: r = 49.618, height: a = 35 }) {
         /* @__PURE__ */ e(
           "path",
           {
-            d: s,
-            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 Ge({ direction: t = "up", color: r = 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: r,
+      stroke: n,
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ) });
 }
-function Pe({ value: t, label: r, trend: a = "up", muted: o = !1, beigeBg: s = !1, style: d = {} }) {
-  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: s ? 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",
-        ...d
+        ...c
       },
       children: [
-        /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ e(Ve, { trend: a }),
-          /* @__PURE__ */ e(Ge, { 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: q,
+                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: r })
+          /* @__PURE__ */ e("div", { style: { fontFamily: z, fontSize: 13, color: r.ink, lineHeight: "1.2" }, children: n })
         ] })
       ]
     }
   );
 }
-function Se({ value: t, label: r, 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: {
@@ -1315,38 +1509,38 @@ function Se({ value: t, label: r, 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(Ve, { trend: a }),
-          /* @__PURE__ */ e(Ge, { 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: q,
+                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: r })
+          /* @__PURE__ */ e("div", { style: { fontFamily: z, fontSize: 13, color: r.ink, lineHeight: "1.2" }, children: n })
         ] })
       ]
     }
   );
 }
-function yt({ icon: t, children: r, trailing: a }) {
-  return /* @__PURE__ */ i(
+function Et({ icon: t, children: n, trailing: i }) {
+  return /* @__PURE__ */ l(
     "button",
     {
       type: "button",
@@ -1357,23 +1551,23 @@ function yt({ icon: t, children: r, 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 }),
-        r,
-        a && /* @__PURE__ */ e(a, { size: 16, strokeWidth: 2 })
+        n,
+        i && /* @__PURE__ */ e(i, { size: 16, strokeWidth: 2 })
       ]
     }
   );
 }
-const gt = [
+const Ot = [
   "January",
   "February",
   "March",
@@ -1386,116 +1580,116 @@ const gt = [
   "October",
   "November",
   "December"
-], mt = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function he(t) {
-  const r = new Date(t);
-  return r.setHours(0, 0, 0, 0), r;
+], _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, r) {
-  const o = new Date(t, r, 1).getDay(), s = new Date(t, r, 1 - o);
+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 p = new Date(s);
-    return p.setDate(s.getDate() + c), p;
+    const u = new Date(s);
+    return u.setDate(s.getDate() + c), u;
   });
 }
-function xt({ value: t, onApply: r, onClose: a, anchorRef: o }) {
-  const s = w.useRef(null), [d, c] = w.useState(t != null && t.from ? he(t.from) : null), [p, z] = w.useState(t != null && t.to ? he(t.to) : null), y = d || /* @__PURE__ */ new Date(), [m, b] = w.useState(y.getFullYear()), [v, F] = w.useState(y.getMonth()), [O, S] = w.useState({ top: 0, left: 0 });
-  w.useLayoutEffect(() => {
-    const u = () => {
+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 h = () => {
       if (!(o != null && o.current))
         return;
-      const x = o.current.getBoundingClientRect(), I = 320;
-      S({
-        top: x.bottom + 6,
-        left: Math.max(8, x.right - I)
+      const v = o.current.getBoundingClientRect(), I = 320;
+      L({
+        top: v.bottom + 6,
+        left: Math.max(8, v.right - I)
       });
     };
-    return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
-      window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
+    return h(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
+      window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
     };
-  }, [o]), w.useEffect(() => {
-    const u = (I) => {
-      var P, Y;
-      (P = s.current) != null && P.contains(I.target) || (Y = o == null ? void 0 : o.current) != null && Y.contains(I.target) || a();
-    }, x = (I) => {
-      I.key === "Escape" && a();
+  }, [o]), S.useEffect(() => {
+    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", u), document.addEventListener("keydown", x), () => {
-      document.removeEventListener("mousedown", u), document.removeEventListener("keydown", x);
+    return document.addEventListener("mousedown", h), document.addEventListener("keydown", v), () => {
+      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", v);
     };
-  }, [a, o]);
-  const G = bt(m, v), H = he(/* @__PURE__ */ new Date()), _ = (u) => {
-    const x = he(u);
-    x > H || (!d || d && p ? (c(x), z(null)) : x < d ? c(x) : z(x));
-  }, E = () => {
-    v === 0 ? (F(11), b(m - 1)) : F(v - 1);
-  }, U = () => {
-    v === 11 ? (F(0), b(m + 1)) : F(v + 1);
-  }, B = (u) => d && p && u >= d && u <= p, K = (u) => d && u.getTime() === d.getTime() || p && u.getTime() === p.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: 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: E, style: Me, "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[v],
+          /* @__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],
               " ",
               m
             ] }),
-            /* @__PURE__ */ e("button", { type: "button", onClick: U, style: Me, "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((u) => /* @__PURE__ */ e("div", { style: { textAlign: "center", fontSize: 12, color: n.muted, padding: "4px 0" }, children: u }, u)) }),
-          /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: G.map((u) => {
-            const x = u.getMonth() === v, I = B(u), P = K(u), Y = u.getTime() === H.getTime(), N = u > H;
+          /* @__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: () => _(u),
-                disabled: N,
-                "aria-disabled": N,
+                onClick: () => E(h),
+                disabled: _,
+                "aria-disabled": _,
                 style: {
                   height: 36,
                   border: "none",
                   borderRadius: 8,
-                  background: P ? n.black : I ? n.hoverWarm40 : "transparent",
-                  color: P ? n.white : N ? n.textFaintGrey : x ? 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: Y ? 500 : 400,
-                  cursor: N ? "not-allowed" : "pointer",
-                  opacity: N ? 0.6 : 1
+                  fontWeight: K ? 500 : 400,
+                  cursor: _ ? "not-allowed" : "pointer",
+                  opacity: _ ? 0.6 : 1
                 },
-                children: u.getDate()
+                children: h.getDate()
               },
-              u.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: () => {
-                  c(null), z(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"
               }
             ),
@@ -1503,21 +1697,21 @@ function xt({ value: t, onApply: r, onClose: a, anchorRef: o }) {
               "button",
               {
                 type: "button",
-                disabled: !d || !p,
+                disabled: !d || !u,
                 onClick: () => {
-                  r({ from: d, to: p }), a();
+                  n({ from: d, to: u }), i();
                 },
                 style: {
-                  background: !d || !p ? 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: !d || !p ? "not-allowed" : "pointer"
+                  cursor: !d || !u ? "not-allowed" : "pointer"
                 },
                 children: "Apply"
               }
@@ -1529,7 +1723,7 @@ function xt({ value: t, onApply: r, onClose: a, anchorRef: o }) {
     document.body
   );
 }
-const Me = {
+const Xe = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -1539,12 +1733,12 @@ const Me = {
   background: "transparent",
   borderRadius: 6,
   cursor: "pointer",
-  color: n.ink
+  color: r.ink
 };
-function Ke({ value: t, onChange: r }) {
-  const [a, o] = w.useState(!1), s = w.useRef(null), d = !!(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: s,
@@ -1557,47 +1751,47 @@ function Ke({ value: t, onChange: r }) {
           height: 32,
           padding: "0 16px",
           borderRadius: 10,
-          border: d ? "none" : `1px solid ${n.neutralBorder}`,
-          background: d ? 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: d ? n.white : n.neutral800,
+          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: s,
         onClose: () => o(!1),
-        onApply: (c) => r == null ? void 0 : r(c)
+        onApply: (c) => n == null ? void 0 : n(c)
       }
     )
   ] });
 }
-function vt({ label: t, active: r = !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: r ? "none" : `1px solid ${n.borderSubtle}`,
-        background: r ? n.black : n.white,
-        color: r ? 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"
       },
@@ -1605,41 +1799,22 @@ function vt({ label: t, active: r = !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 r = Ze[t];
-  if (!r)
-    return "";
-  const a = /* @__PURE__ */ new Date(), o = new Date(a.getTime() - r);
-  return `${me(o)} – ${me(a)}`;
-}
-function St({ value: t = 0, max: r = 5 }) {
-  const a = typeof t == "number" ? t : parseFloat(t) || 0, o = Math.floor(a), s = a % 1 > 0 && o < r;
-  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 4 }, children: Array.from({ length: r }).map((d, c) => c < 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"
       }
     },
@@ -1662,7 +1837,7 @@ function St({ value: t = 0, max: r = 5 }) {
             width: 6,
             height: 6,
             borderRadius: "50%",
-            background: n.black,
+            background: r.black,
             display: "inline-block"
           }
         }
@@ -1676,8 +1851,8 @@ function St({ value: t = 0, max: r = 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"
       }
@@ -1685,7 +1860,7 @@ function St({ value: t = 0, max: r = 5 }) {
     c
   )) });
 }
-const $t = [
+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 },
@@ -1699,16 +1874,16 @@ const $t = [
     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: r, trailing: a, iconColor: o = n.ink, bordered: s = !1 }) {
-  return /* @__PURE__ */ i(
+function xe({ icon: t, title: n, trailing: i, iconColor: o = r.ink, bordered: s = !1 }) {
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -1717,7 +1892,7 @@ function ue({ icon: t, title: r, trailing: a, iconColor: o = n.ink, bordered: s
         gap: 8,
         width: "100%",
         paddingBottom: s ? 12 : 0,
-        borderBottom: s ? `1px solid ${n.border}` : "none"
+        borderBottom: s ? `1px solid ${r.border}` : "none"
       },
       children: [
         /* @__PURE__ */ e(
@@ -1739,24 +1914,24 @@ function ue({ icon: t, title: r, trailing: a, iconColor: o = n.ink, bordered: s
           {
             style: {
               flex: 1,
-              fontFamily: q,
+              fontFamily: ne,
               fontWeight: 600,
               fontSize: 16,
-              color: n.ink,
+              color: r.ink,
               lineHeight: "1.2",
               textTransform: "uppercase",
               letterSpacing: "0.02em"
             },
-            children: r
+            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: r }) {
-  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",
       {
@@ -1764,38 +1939,38 @@ function Re({ icon: t, title: r }) {
           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: q,
+          fontFamily: ne,
           fontWeight: 600,
           fontSize: 16,
-          color: n.ink,
+          color: r.ink,
           lineHeight: "24px"
         },
-        children: r
+        children: n
       }
     )
   ] });
 }
-function Oe({ title: t, summary: r, calls: a, percent: o, bullets: s, defaultExpanded: d = !1 }) {
-  const [c, p] = w.useState(d), z = Array.isArray(s) ? s : [];
-  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: () => p((y) => !y),
+        onClick: () => u((y) => !y),
         "aria-expanded": c,
         style: {
           border: "none",
@@ -1807,10 +1982,10 @@ function Oe({ title: t, summary: r, calls: a, percent: o, bullets: s, defaultExp
           cursor: "pointer",
           width: "100%",
           textAlign: "left",
-          fontFamily: D
+          fontFamily: z
         },
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ l(
             "div",
             {
               style: {
@@ -1821,40 +1996,40 @@ function Oe({ title: t, summary: r, calls: a, percent: o, bullets: s, 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: q,
+                        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: r })
+                  /* @__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(pe, { 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(Ye, { 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,
@@ -1866,7 +2041,7 @@ function Oe({ title: t, summary: r, calls: a, percent: o, bullets: s, defaultExp
         ]
       }
     ),
-    c && z.length > 0 && /* @__PURE__ */ e(
+    c && F.length > 0 && /* @__PURE__ */ e(
       "div",
       {
         style: {
@@ -1875,16 +2050,16 @@ function Oe({ title: t, summary: r, calls: a, percent: o, bullets: s, defaultExp
           gap: 12,
           padding: "0 16px 16px"
         },
-        children: z.map((y, m) => /* @__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
             },
@@ -1896,10 +2071,10 @@ function Oe({ title: t, summary: r, calls: a, percent: o, bullets: s, defaultExp
                   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",
@@ -1919,9 +2094,9 @@ function Oe({ title: t, summary: r, calls: a, percent: o, bullets: s, defaultExp
                   children: y.text
                 }
               ),
-              /* @__PURE__ */ i("span", { style: { display: "inline-flex", gap: 4, whiteSpace: "nowrap" }, children: [
-                /* @__PURE__ */ e("span", { style: { color: n.ink }, children: y.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: [
                   "(",
                   y.date,
                   ")"
@@ -1935,8 +2110,8 @@ function Oe({ title: t, summary: r, calls: a, percent: o, bullets: s, defaultExp
     )
   ] });
 }
-function ye({ label: t, value: r }) {
-  return /* @__PURE__ */ i(
+function be({ label: t, value: n }) {
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -1944,154 +2119,154 @@ function ye({ label: t, value: r }) {
         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: r })
+        /* @__PURE__ */ e("span", { style: { color: r.ink }, children: t }),
+        /* @__PURE__ */ e("span", { style: { color: r.muted }, children: n })
       ]
     }
   );
 }
-function ce({ 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 It({
+function tn({
   className: t = "",
-  onAgentClick: r,
+  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: s = "",
   // View-by dropdown. `initialViewBy` seeds internal state on mount;
   // `onViewByChange(id)` fires when the user selects a different option.
   viewByOptions: d = [],
   initialViewBy: c = "",
-  onViewByChange: p,
+  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: z = "",
+  aggregatedByLabel: F = "",
   // KPI strip
-  volumeStat: y = de,
-  compassStat: m = de,
-  baselineSubStat: b = de,
-  agentLiftSubStat: v = de,
-  scoreSubStat: F = de,
+  volumeStat: y = pe,
+  compassStat: m = pe,
+  baselineSubStat: b = pe,
+  agentLiftSubStat: k = pe,
+  scoreSubStat: D = pe,
   // Agent table
-  agentRows: O = [],
-  agentColumns: S = [],
-  initialPageSize: G = 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: H = [],
-  strengthItems: _ = [],
-  callDrivers: E = [],
-  callParadigms: U = [],
-  topSignalsLeft: B = [],
-  topSignalsRight: K = [],
-  topSignalsTrailing: u = "",
-  strengthsTitle: x = "",
+  guidanceItems: M = [],
+  strengthItems: E = [],
+  callDrivers: X = [],
+  callParadigms: G = [],
+  topSignalsLeft: O = [],
+  topSignalsRight: Z = [],
+  topSignalsTrailing: h = "",
+  strengthsTitle: v = "",
   guidanceTitle: I = "",
-  callMixTitle: P = "",
-  driversTitle: Y = "",
-  paradigmsTitle: N = "",
-  topSignalsTitle: Q = "",
-  emptyStrengthsMessage: te = "",
-  emptyGuidanceMessage: X = "",
-  emptyDriversMessage: ie = "",
-  emptyParadigmsMessage: Z = "",
+  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: ne = kt,
-  selectedWindow: h = "30d",
+  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: L,
+  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: M,
-  onDateRangeChange: A,
+  dateRange: P,
+  onDateRangeChange: C,
   // Fires when the user clicks the Export CSV button in the header.
-  onExport: T,
+  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 [ee, fe] = w.useState(null), [$, le] = w.useState(!1), [re, W] = w.useState(c), [V, ze] = w.useState(null), R = M !== void 0 ? M : V, xe = !!(R != null && R.from && (R != null && R.to)), Je = (f) => {
-    ze(f), A == null || A(f);
-  }, qe = (f) => {
-    ze(null), A == null || A(null), g == null || g(f);
-  }, Fe = w.useRef(null), We = w.useRef(null);
-  w.useEffect(() => {
-    if (!$)
+  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 (!N)
       return;
-    const f = (k) => {
-      var oe, $e;
-      (oe = We.current) != null && oe.contains(k.target) || ($e = Fe.current) != null && $e.contains(k.target) || le(!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", f), () => document.removeEventListener("mousedown", f);
-  }, [$]);
-  const Qe = ((Ce = d.find((f) => f.id === re)) == null ? void 0 : Ce.label) || (((Le = d[0]) == null ? void 0 : Le.label) ?? ""), et = (f) => {
-    if (r) {
-      r(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;
     }
-    fe(f);
+    re(f);
   };
-  return /* @__PURE__ */ i(_e, { children: [
-    ee && (() => {
-      let f = null, k = null;
-      if (xe)
-        f = R.from, k = R.to;
+  return /* @__PURE__ */ l(Je, { children: [
+    le && (() => {
+      let f = null, w = null;
+      if (De)
+        f = B.from, w = B.to;
       else {
-        const oe = Ze[h];
-        oe && (k = /* @__PURE__ */ new Date(), f = new Date(k.getTime() - oe));
+        const ce = Te[p];
+        ce && (w = /* @__PURE__ */ new Date(), f = new Date(w.getTime() - ce));
       }
       return /* @__PURE__ */ e(
-        ut,
+        Bt,
         {
           className: t,
-          agentName: ee.agent,
+          agentName: le.agent,
           startDate: f || "",
-          endDate: k || "",
-          totalCalls: `${ee.calls} Calls`,
-          onBack: () => fe(null),
-          selectedWindow: h,
-          dateRange: R
+          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",
@@ -2100,34 +2275,34 @@ function It({
           gap: 24,
           // Hide (don't unmount) when drilling into agent details so DataTable2's
           // internal filter / sort / pagination state survives the round trip.
-          display: ee ? "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: q,
+                    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: () => T == null ? void 0 : T(),
-                disabled: !T,
+                onClick: () => A == null ? void 0 : A(),
+                disabled: !A,
                 style: {
                   display: "inline-flex",
                   alignItems: "center",
@@ -2135,31 +2310,31 @@ function It({
                   height: 32,
                   padding: "0 16px",
                   borderRadius: 10,
-                  border: `1px solid ${n.neutralBorder}`,
-                  background: n.white,
-                  cursor: T ? "pointer" : "not-allowed",
-                  opacity: T ? 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: () => le((f) => !f),
+                  ref: He,
+                  onClick: () => U((f) => !f),
                   "aria-haspopup": "listbox",
-                  "aria-expanded": $,
+                  "aria-expanded": N,
                   style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -2167,24 +2342,24 @@ function It({
                     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: $ ? "rotate(180deg)" : "none",
+                          transform: N ? "rotate(180deg)" : "none",
                           transition: "transform 120ms ease"
                         }
                       }
@@ -2192,71 +2367,71 @@ function It({
                   ]
                 }
               ),
-              $ && /* @__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: [
-                    z && /* @__PURE__ */ e(
+                    F && /* @__PURE__ */ e(
                       "div",
                       {
                         style: {
                           padding: 12,
-                          fontFamily: q,
+                          fontFamily: ne,
                           fontWeight: 600,
                           fontSize: 13,
-                          color: n.ink,
+                          color: r.ink,
                           lineHeight: 1.2
                         },
-                        children: z
+                        children: F
                       }
                     ),
                     d.map((f) => {
-                      const k = re === f.id;
-                      return /* @__PURE__ */ i(
+                      const w = de === f.id;
+                      return /* @__PURE__ */ l(
                         "button",
                         {
                           type: "button",
                           role: "option",
-                          "aria-selected": k,
+                          "aria-selected": w,
                           onClick: () => {
-                            f.id !== re && (W(f.id), p == null || p(f.id)), le(!1);
+                            f.id !== de && (Se(f.id), u == null || u(f.id)), U(!1);
                           },
                           style: {
                             display: "flex",
                             alignItems: "center",
                             gap: 8,
-                            padding: k ? 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: [
-                            k && /* @__PURE__ */ e(nt, { size: 20, color: n.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
+                            w && /* @__PURE__ */ e(St, { size: 20, color: r.ink, strokeWidth: 1.75, style: { flexShrink: 0 } }),
                             /* @__PURE__ */ e("span", { children: f.label })
                           ]
                         },
@@ -2267,55 +2442,55 @@ function It({
                 }
               )
             ] }),
-            /* @__PURE__ */ i("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+            /* @__PURE__ */ l("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
               (() => {
-                const k = (xe ? `${me(R.from)} – ${me(R.to)}` : "") || s || wt(h);
-                return k ? /* @__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 }),
-                      k
+                      /* @__PURE__ */ e(ve, { size: 16, strokeWidth: 1.75, color: r.muted }),
+                      w
                     ]
                   }
                 ) : null;
               })(),
-              ne.map((f) => /* @__PURE__ */ e(
-                vt,
+              se.map((f) => /* @__PURE__ */ e(
+                Ut,
                 {
                   label: f.label,
-                  active: !xe && f.id === h,
-                  onClick: () => qe(f.id)
+                  active: !De && f.id === p,
+                  onClick: () => gt(f.id)
                 },
                 f.id
               )),
-              L ? /* @__PURE__ */ e(
-                w.Suspense,
+              T ? /* @__PURE__ */ e(
+                S.Suspense,
                 {
-                  fallback: /* @__PURE__ */ e(yt, { icon: ge, children: "Date Range" }),
-                  children: L
+                  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(Pe, { value: y.value, label: y.label, trend: y.trend, style: { width: 264, flexShrink: 0 } }),
-            /* @__PURE__ */ e(Pe, { value: m.value, label: m.label, trend: m.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",
@@ -2324,75 +2499,75 @@ function It({
                   boxSizing: "border-box"
                 },
                 children: [
-                  /* @__PURE__ */ e(Se, { value: b.value, label: b.label, trend: b.trend }),
-                  /* @__PURE__ */ e(Se, { value: v.value, label: v.label, trend: v.trend, withDivider: !0 }),
-                  /* @__PURE__ */ e(Se, { value: F.value, label: F.label, trend: F.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: S,
-              initialPageSize: G,
-              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: Ne, title: x, 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: _.length === 0 ? /* @__PURE__ */ e(ce, { message: te }) : _.map((f, k) => /* @__PURE__ */ e(Oe, { ...f }, k))
+                  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: je, title: I, 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: H.length === 0 ? /* @__PURE__ */ e(ce, { message: X }) : H.map((f, k) => /* @__PURE__ */ e(Oe, { ...f }, k))
+                  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: pe, title: P, 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: Y }),
-                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: E.length === 0 ? /* @__PURE__ */ e(ce, { message: ie }) : E.map((f, k) => /* @__PURE__ */ e(ye, { ...f }, k)) })
+          /* @__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: Ue, title: N }),
-                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }, children: U.length === 0 ? /* @__PURE__ */ e(ce, { message: Z }) : U.map((f, k) => /* @__PURE__ */ e(ye, { ...f }, k)) })
+              /* @__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: u, bordered: !0 }),
-            B.length === 0 && K.length === 0 ? /* @__PURE__ */ e(ce, { message: j }) : /* @__PURE__ */ i("div", { style: { display: "flex", gap: 24 }, children: [
-              /* @__PURE__ */ e("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: B.map((f, k) => /* @__PURE__ */ e(ye, { ...f }, k)) }),
-              /* @__PURE__ */ e("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: K.map((f, k) => /* @__PURE__ */ e(ye, { ...f }, k)) })
+          /* @__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)) })
             ] })
           ] })
         ]
@@ -2401,10 +2576,27 @@ function It({
   ] });
 }
 export {
-  $t as D,
-  It 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