chordia-ui 3.9.4 → 3.9.6

package/dist/AgentLiftAnalysisCard.es.js

@@ -1,10 +1,11 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useState as R, useRef as _ } from "react";
+import { useState as E, useRef as _ } from "react";
 import { Info as W, Settings as z } from "lucide-react";
-const E = "chordia-cog-spin-style";
-if (typeof document < "u" && !document.getElementById(E)) {
-  const i = document.createElement("style");
-  i.id = E, i.textContent = `
+import { u as $ } from "./useMediaQuery.es.js";
+const A = "chordia-cog-spin-style";
+if (typeof document < "u" && !document.getElementById(A)) {
+  const l = document.createElement("style");
+  l.id = A, l.textContent = `
     @keyframes chordia-cog-spin {
       from { transform: rotate(0deg); }
       to   { transform: rotate(360deg); }
@@ -12,9 +13,9 @@ if (typeof document < "u" && !document.getElementById(E)) {
     @media (prefers-reduced-motion: reduce) {
       .chordia-cog-spin { animation: none !important; }
     }
-  `, document.head.appendChild(i);
+  `, document.head.appendChild(l);
 }
-const n = {
+const i = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
   faint: "var(--Grey-Faint, #ACADAD)",
@@ -25,32 +26,32 @@ const n = {
   surface: "#FAF9F5",
   // Gauge ring (background semicircle)
   gaugeTrack: "#E3E1D7"
-}, s = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", v = (i, l, r) => Math.max(l, Math.min(r, i)), A = (i) => {
-  const l = v(Number(i) || 0, -1, 1);
-  return l >= 0.6 ? "High" : l >= 0.15 ? "Above Average" : l <= -0.6 ? "Low" : l <= -0.15 ? "Below Average" : "Average";
-}, H = (i) => {
-  const l = Number(i);
-  return !Number.isFinite(l) || Math.abs(l) < 0.05 ? "neutral" : l > 0 ? "positive" : "negative";
-}, k = ({ text: i, children: l, maxWidth: r = 280 }) => {
-  const [t, o] = R(!1), a = _(null), [c, g] = R({ top: 0, left: 0 });
-  return i ? /* @__PURE__ */ d(
+}, s = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", R = (l, n, r) => Math.max(n, Math.min(r, l)), w = (l) => {
+  const n = R(Number(l) || 0, -1, 1);
+  return n >= 0.6 ? "High" : n >= 0.15 ? "Above Average" : n <= -0.6 ? "Low" : n <= -0.15 ? "Below Average" : "Average";
+}, k = (l) => {
+  const n = Number(l);
+  return !Number.isFinite(n) || Math.abs(n) < 0.05 ? "neutral" : n > 0 ? "positive" : "negative";
+}, H = ({ text: l, children: n, maxWidth: r = 280 }) => {
+  const [t, o] = E(!1), a = _(null), [c, h] = E({ top: 0, left: 0 });
+  return l ? /* @__PURE__ */ d(
     "div",
     {
       ref: a,
       style: { position: "relative", display: "inline-flex" },
       onMouseEnter: () => {
         if (a.current) {
-          const h = a.current.getBoundingClientRect();
-          g({
-            top: h.bottom + 6,
-            left: h.left + h.width / 2
+          const f = a.current.getBoundingClientRect();
+          h({
+            top: f.bottom + 6,
+            left: f.left + f.width / 2
           });
         }
         o(!0);
       },
       onMouseLeave: () => o(!1),
       children: [
-        l,
+        n,
         t && /* @__PURE__ */ e(
           "div",
           {
@@ -75,20 +76,20 @@ const n = {
               whiteSpace: "normal",
               textAlign: "left"
             },
-            children: i
+            children: l
           }
         )
       ]
     }
-  ) : l;
-}, $ = ({ value: i = 0, highlight: l = null }) => {
-  const m = v(Number(i) || 0, -1, 1) * (Math.PI / 2), b = 60 + 38 * Math.sin(m), x = 56 - 38 * Math.cos(m);
+  ) : n;
+}, M = ({ value: l = 0, highlight: n = null }) => {
+  const g = R(Number(l) || 0, -1, 1) * (Math.PI / 2), b = 60 + 38 * Math.sin(g), v = 56 - 38 * Math.cos(g);
   let u = null;
-  if (l != null) {
-    const p = v(Number(l) || 0, -1, 1);
-    if (p !== 0) {
-      const f = p * (Math.PI / 2), C = 60, T = 56 - 26.65, L = 60 + 26.65 * Math.sin(f), N = 56 - 26.65 * Math.cos(f), F = p > 0 ? 1 : 0;
-      u = `M ${C} ${T} A ${26.65} ${26.65} 0 0 ${F} ${L} ${N}`;
+  if (n != null) {
+    const m = R(Number(n) || 0, -1, 1);
+    if (m !== 0) {
+      const x = m * (Math.PI / 2), y = 60, T = 56 - 26.65, L = 60 + 26.65 * Math.sin(x), N = 56 - 26.65 * Math.cos(x), F = m > 0 ? 1 : 0;
+      u = `M ${y} ${T} A ${26.65} ${26.65} 0 0 ${F} ${L} ${N}`;
     }
   }
   return (
@@ -113,7 +114,7 @@ const n = {
             {
               d: `M ${60 - 26.65} 56 A ${26.65} ${26.65} 0 0 1 ${60 + 26.65} 56`,
               fill: "none",
-              stroke: n.gaugeTrack,
+              stroke: i.gaugeTrack,
               strokeWidth: 28.7,
               strokeLinecap: "butt"
             }
@@ -123,7 +124,7 @@ const n = {
             {
               d: u,
               fill: "none",
-              stroke: n.strong,
+              stroke: i.strong,
               strokeWidth: 28.7,
               strokeLinecap: "butt"
             }
@@ -136,7 +137,7 @@ const n = {
               textAnchor: "middle",
               fontSize: "13",
               fontFamily: s,
-              fill: n.orange,
+              fill: i.orange,
               children: "0"
             }
           ),
@@ -148,7 +149,7 @@ const n = {
               textAnchor: "middle",
               fontSize: "14",
               fontFamily: s,
-              fill: n.strong,
+              fill: i.strong,
               children: "−"
             }
           ),
@@ -160,7 +161,7 @@ const n = {
               textAnchor: "middle",
               fontSize: "14",
               fontFamily: s,
-              fill: n.strong,
+              fill: i.strong,
               children: "+"
             }
           ),
@@ -170,26 +171,26 @@ const n = {
               x1: 60,
               y1: 56,
               x2: b,
-              y2: x,
-              stroke: n.orange,
+              y2: v,
+              stroke: i.orange,
               strokeWidth: 2,
               strokeLinecap: "round"
             }
           ),
-          /* @__PURE__ */ e("circle", { cx: 60, cy: 56, r: 2.5, fill: n.orange })
+          /* @__PURE__ */ e("circle", { cx: 60, cy: 56, r: 2.5, fill: i.orange })
         ]
       }
     )
   );
 }, S = ({
-  title: i,
-  value: l,
+  title: l,
+  value: n,
   highlight: r,
   centerLabel: t,
   centerLabelColor: o,
   sublabel: a,
   footer: c,
-  description: g
+  description: h
 }) => /* @__PURE__ */ d(
   "div",
   {
@@ -219,17 +220,17 @@ const n = {
                 fontFamily: s,
                 fontSize: 14,
                 fontWeight: 400,
-                color: n.strong,
+                color: i.strong,
                 lineHeight: "20px",
                 textAlign: "center",
                 width: "100%"
               },
-              children: i
+              children: l
             }
           )
         }
       ),
-      l == null ? (
+      n == null ? (
         // Gauge swapped for an em-dash placeholder when the API ships no
         // numeric value for this column. Same 60px height as the gauge SVG
         // (after its -20 negative margin) so the columns stay aligned.
@@ -251,7 +252,7 @@ const n = {
                   fontFamily: s,
                   fontSize: 28,
                   fontWeight: 400,
-                  color: n.muted,
+                  color: i.muted,
                   lineHeight: 1
                 },
                 children: "—"
@@ -259,7 +260,7 @@ const n = {
             )
           }
         )
-      ) : /* @__PURE__ */ e($, { value: l, highlight: r }),
+      ) : /* @__PURE__ */ e(M, { value: n, highlight: r }),
       /* @__PURE__ */ d(
         "div",
         {
@@ -280,7 +281,7 @@ const n = {
                   // (#272727) for both "Average" and "Above Average".
                   fontSize: 14,
                   fontWeight: 600,
-                  color: t ? o || "#272727" : n.muted,
+                  color: t ? o || "#272727" : i.muted,
                   lineHeight: "normal",
                   textAlign: "center"
                 },
@@ -294,7 +295,7 @@ const n = {
                   fontFamily: s,
                   fontSize: 13,
                   fontWeight: 400,
-                  color: n.muted,
+                  color: i.muted,
                   lineHeight: "normal",
                   textAlign: "center",
                   width: "100%"
@@ -309,7 +310,7 @@ const n = {
                   fontFamily: s,
                   fontSize: 13,
                   fontWeight: 400,
-                  color: c ? n.strong : n.muted,
+                  color: c ? i.strong : i.muted,
                   lineHeight: "normal",
                   textAlign: "center",
                   width: "100%"
@@ -317,20 +318,20 @@ const n = {
                 children: c || "—"
               }
             ),
-            g && /* @__PURE__ */ e(
+            h && /* @__PURE__ */ e(
               "span",
               {
                 style: {
                   fontFamily: s,
                   fontSize: 13,
                   fontWeight: 400,
-                  color: n.muted,
+                  color: i.muted,
                   lineHeight: "normal",
                   textAlign: "center",
                   width: "100%",
                   marginTop: 4
                 },
-                children: g
+                children: h
               }
             )
           ]
@@ -338,14 +339,14 @@ const n = {
       )
     ]
   }
-), M = ({
-  percent: i,
-  label: l,
+), O = ({
+  percent: l,
+  label: n,
   totalLabel: r = "Total",
   description: t,
   status: o
 }) => {
-  const a = (o == null ? void 0 : o.label) ?? l;
+  const a = (o == null ? void 0 : o.label) ?? n;
   return (
     // Top-aligned stack — pill → percent → Total / description, all hugging
     // the top of the column with the root `gap: 16` between them. The row
@@ -385,7 +386,7 @@ const n = {
                     fontFamily: s,
                     fontSize: 14,
                     fontWeight: 600,
-                    color: n.strong,
+                    color: i.strong,
                     lineHeight: "normal",
                     whiteSpace: "nowrap"
                   },
@@ -412,12 +413,12 @@ const n = {
                       fontFamily: s,
                       fontSize: 34,
                       fontWeight: 400,
-                      color: n.strong,
+                      color: i.strong,
                       lineHeight: 1.2,
                       textAlign: "center",
                       whiteSpace: "nowrap"
                     },
-                    children: i != null ? `${i}%` : "—"
+                    children: l != null ? `${l}%` : "—"
                   }
                 ),
                 /* @__PURE__ */ d(
@@ -453,7 +454,7 @@ const n = {
                             fontFamily: s,
                             fontSize: 13,
                             fontWeight: 400,
-                            color: n.muted,
+                            color: i.muted,
                             lineHeight: "normal",
                             textAlign: "center",
                             width: "100%"
@@ -471,18 +472,24 @@ const n = {
       }
     )
   );
-}, w = ({ variant: i = "dashed" }) => /* @__PURE__ */ e(
+}, C = ({ variant: l = "dashed", horizontal: n = !1 }) => /* @__PURE__ */ e(
   "div",
   {
     "aria-hidden": "true",
-    style: {
+    style: n ? {
+      // Stacked (mobile) layout: a full-width horizontal rule between gauges.
+      height: 0,
+      width: "100%",
+      borderTop: `1px ${l} ${i.border}`,
+      flexShrink: 0
+    } : {
       width: 0,
       alignSelf: "stretch",
-      borderLeft: `1px ${i} ${n.border}`,
+      borderLeft: `1px ${l} ${i.border}`,
       flexShrink: 0
     }
   }
-), O = () => /* @__PURE__ */ d(
+), D = () => /* @__PURE__ */ d(
   "div",
   {
     style: {
@@ -500,7 +507,7 @@ const n = {
         z,
         {
           size: 28,
-          color: n.orange,
+          color: i.orange,
           strokeWidth: 2,
           className: "chordia-cog-spin",
           "aria-hidden": "true",
@@ -518,7 +525,7 @@ const n = {
             fontFamily: s,
             fontSize: 14,
             fontWeight: 400,
-            color: n.strong,
+            color: i.strong,
             lineHeight: 1.2,
             textAlign: "center",
             maxWidth: 120
@@ -528,9 +535,9 @@ const n = {
       )
     ]
   }
-), P = ({
-  title: i = "Agent Lift Analysis",
-  status: l,
+), U = ({
+  title: l = "Agent Lift Analysis",
+  status: n,
   interactionDifficulty: r,
   agentImpact: t,
   outcome: o,
@@ -539,17 +546,17 @@ const n = {
   // Tooltip text rendered on hover of the (i) icon next to the card
   // title. The default explains what this section measures; hosts can
   // override per-context if needed.
-  infoTooltip: g = "Measures the agent's contribution to the call outcome by comparing actual performance against the expected result for similar calls."
+  infoTooltip: h = "Measures the agent's contribution to the call outcome by comparing actual performance against the expected result for similar calls."
 }) => {
-  const y = Number(r == null ? void 0 : r.value) || 0, h = Number(t == null ? void 0 : t.value) || 0, m = (r == null ? void 0 : r.label) ?? A(y), b = (t == null ? void 0 : t.label) ?? A(h), x = "#272727", u = (() => {
+  const p = $("(max-width: 640px)"), f = Number(r == null ? void 0 : r.value) || 0, g = Number(t == null ? void 0 : t.value) || 0, b = (r == null ? void 0 : r.label) ?? w(f), v = (t == null ? void 0 : t.label) ?? w(g), u = "#272727", m = (() => {
     if ((t == null ? void 0 : t.impactPercent) == null)
       return;
-    const f = Number(t.impactPercent);
-    if (Number.isFinite(f))
-      return `${f < 0 ? "-" : ""}${Math.abs(f)}% Score impact`;
-  })(), p = l ?? {
+    const y = Number(t.impactPercent);
+    if (Number.isFinite(y))
+      return `${y < 0 ? "-" : ""}${Math.abs(y)}% Score impact`;
+  })(), x = n ?? {
     label: o == null ? void 0 : o.label,
-    direction: t != null ? H(h) : "positive"
+    direction: t != null ? k(g) : "positive"
   };
   return /* @__PURE__ */ d(
     "div",
@@ -559,8 +566,8 @@ const n = {
         flexDirection: "column",
         gap: 16,
         padding: "24px 16px",
-        background: n.surface,
-        border: `1px solid ${n.border}`,
+        background: i.surface,
+        border: `1px solid ${i.border}`,
         borderRadius: 8,
         width: "100%",
         boxSizing: "border-box"
@@ -583,14 +590,14 @@ const n = {
                     fontFamily: s,
                     fontSize: 15,
                     fontWeight: 700,
-                    color: n.strong,
+                    color: i.strong,
                     lineHeight: 1.2,
                     whiteSpace: "nowrap"
                   },
-                  children: i
+                  children: l
                 }
               ),
-              a && /* @__PURE__ */ e(k, { text: g, children: /* @__PURE__ */ e(
+              a && /* @__PURE__ */ e(H, { text: h, children: /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
@@ -609,8 +616,8 @@ const n = {
                     // a tooltip on hover or a click handler. Since `infoTooltip`
                     // defaults to a non-empty string, the icon almost always
                     // reads as interactive.
-                    cursor: g || c ? "pointer" : "default",
-                    color: n.muted
+                    cursor: h || c ? "pointer" : "default",
+                    color: i.muted
                   },
                   children: /* @__PURE__ */ e(W, { size: 16, strokeWidth: 1.75 })
                 }
@@ -623,6 +630,7 @@ const n = {
           {
             style: {
               display: "flex",
+              flexDirection: p ? "column" : "row",
               alignItems: "stretch",
               gap: 16,
               width: "100%"
@@ -632,37 +640,37 @@ const n = {
                 S,
                 {
                   title: "Interaction Difficulty",
-                  value: y,
+                  value: f,
                   highlight: null,
-                  centerLabel: m,
-                  centerLabelColor: x,
+                  centerLabel: b,
+                  centerLabelColor: u,
                   sublabel: r.sublabel,
                   footer: r.footer
                 }
               ),
-              r && t && /* @__PURE__ */ e(w, { variant: "dashed" }),
-              t && (t.isLearning ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e(
+              r && t && /* @__PURE__ */ e(C, { variant: "dashed", horizontal: p }),
+              t && (t.isLearning ? /* @__PURE__ */ e(D, {}) : /* @__PURE__ */ e(
                 S,
                 {
                   title: "Agent Impact",
-                  value: h,
-                  highlight: h,
-                  centerLabel: b,
-                  centerLabelColor: x,
+                  value: g,
+                  highlight: g,
+                  centerLabel: v,
+                  centerLabelColor: u,
                   sublabel: t.sublabel,
-                  footer: u,
+                  footer: m,
                   description: t.description
                 }
               )),
-              (r || t) && o && /* @__PURE__ */ e(w, { variant: "solid" }),
+              (r || t) && o && /* @__PURE__ */ e(C, { variant: "solid", horizontal: p }),
               o && /* @__PURE__ */ e(
-                M,
+                O,
                 {
                   percent: o.percent,
                   label: o.label,
                   totalLabel: o.totalLabel ?? "Total",
                   description: o.description,
-                  status: p
+                  status: x
                 }
               )
             ]
@@ -673,6 +681,6 @@ const n = {
   );
 };
 export {
-  P as A
+  U as A
 };
 //# sourceMappingURL=AgentLiftAnalysisCard.es.js.map