@handled-ai/design-system 0.17.0 → 0.17.2

package/dist/components/score-why-chips.js

@@ -3,8 +3,19 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Info } from "lucide-react";
-import { ScoreBreakdown } from "./score-breakdown.js";
+import {
+  ChevronDown,
+  ChevronUp,
+  ChevronRight,
+  X,
+  TrendingDown,
+  ArrowUpRight,
+  Radar,
+  ArrowDownLeft,
+  GitMerge,
+  Activity
+} from "lucide-react";
+import { FeedbackFooter } from "./feedback-primitives.js";
 import { cn } from "../lib/utils.js";
 function getSignalScoreUrgencyLabel(score, providedLabel) {
   if (providedLabel) return providedLabel;
@@ -13,25 +24,6 @@ function getSignalScoreUrgencyLabel(score, providedLabel) {
   if (score >= 35) return "Medium";
   return "Low";
 }
-function getUrgencyChipClass(label) {
-  switch (label) {
-    case "Urgent":
-      return "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-300";
-    case "High":
-      return "border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-900/50 dark:bg-orange-950/30 dark:text-orange-300";
-    case "Medium":
-      return "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-300";
-    case "Low":
-      return "border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-300";
-  }
-}
-function classificationForScore(score) {
-  if (score == null) return void 0;
-  if (score >= 80) return "Urgent";
-  if (score >= 60) return "High";
-  if (score >= 35) return "Medium";
-  return "Low";
-}
 function scoreRangeForUrgency(label) {
   switch (label) {
     case "Urgent":
@@ -47,18 +39,6 @@ function scoreRangeForUrgency(label) {
 function makeDomId(...parts) {
   return parts.filter((part) => Boolean(part)).join("-").replace(/[^A-Za-z0-9_-]+/g, "-");
 }
-function scoreFactorToPriorityBucket(factor) {
-  var _a, _b, _c;
-  return {
-    key: factor.key,
-    label: factor.label,
-    kind: "factor",
-    score: (_a = factor.score) != null ? _a : void 0,
-    classification: (_c = factor.risk) != null ? _c : classificationForScore((_b = factor.score) != null ? _b : void 0),
-    rationale: factor.why,
-    factorKeys: [factor.key]
-  };
-}
 function bucketHasSignalRows(bucket) {
   var _a, _b, _c, _d;
   return ((_b = (_a = bucket.signals) == null ? void 0 : _a.length) != null ? _b : 0) > 0 || ((_d = (_c = bucket.signalIds) == null ? void 0 : _c.length) != null ? _d : 0) > 0 || Boolean(bucket.primarySignalId);
@@ -78,119 +58,253 @@ function getBucketSignals(bucket) {
     label: `${bucket.label} signal`
   }));
 }
-function getPriorityBuckets(signalData) {
-  if (signalData.explanationBuckets !== void 0) return signalData.explanationBuckets;
-  return signalData.factors.map(scoreFactorToPriorityBucket);
+const SIGNAL_TYPE_ICONS = {
+  treasury_liquidation: TrendingDown,
+  cumulative_treasury_outflow: ArrowUpRight,
+  test_transaction: Radar,
+  micro_deposit: ArrowDownLeft,
+  combined_signal: GitMerge
+};
+function resolveIcon(iconName) {
+  var _a;
+  if (!iconName) return Activity;
+  return (_a = SIGNAL_TYPE_ICONS[iconName]) != null ? _a : Activity;
 }
-function isSameExplanation(a, b) {
-  return Boolean(a && b && a.trim() === b.trim());
+const SIGNAL_TONE_CLASSES = {
+  alert: "bg-red-50 text-red-600",
+  warn: "bg-amber-50 text-amber-600",
+  info: "bg-blue-50 text-blue-600"
+};
+const DEFAULT_TONE_CLASS = "bg-muted text-muted-foreground";
+function slotValue(value) {
+  return value && value.trim().length > 0 ? value : "";
 }
-function SignalPriorityChip({
-  score,
-  urgencyLabel: providedLabel,
-  isOpen,
-  controlsId,
-  onClick,
-  className
-}) {
-  const urgencyLabel = getSignalScoreUrgencyLabel(score, providedLabel);
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "aria-expanded": isOpen,
-      "aria-controls": controlsId,
-      className: cn(
-        "inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        getUrgencyChipClass(urgencyLabel),
-        className
-      ),
-      children: [
-        urgencyLabel,
-        " Priority",
-        /* @__PURE__ */ jsx(Info, { className: "h-3 w-3" })
-      ]
-    }
+const BUCKET_NEGATIVE_CHIPS = [
+  {
+    label: "Not relevant for this account",
+    subPrompt: "Why isn't it relevant?",
+    subChips: [
+      "Business as usual for this account",
+      "Account in maintenance mode",
+      "Wrong contact for this signal",
+      "Other"
+    ]
+  },
+  { label: "Bad timing" },
+  {
+    label: "Inaccurate data",
+    subPrompt: "Which field?",
+    subChips: ["Balance figures", "Counterparty", "Timestamp", "Other"]
+  },
+  { label: "Wrong account" },
+  { label: "Already handled" },
+  { label: "Other" }
+];
+const DEFAULT_VISIBLE_ROWS = 8;
+function WhyPill({ bucket, isSelected, signalCount, panelId, onToggle, onClose }) {
+  const IconComponent = resolveIcon(bucket.icon);
+  const sharedClasses = cn(
+    "inline-flex items-center text-[11px] font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    isSelected ? "border-border bg-muted text-foreground" : "border-border bg-background text-muted-foreground hover:bg-muted/60 hover:text-foreground"
   );
-}
-function SignalPriorityPanel({ signalData, className, id }) {
-  var _a, _b, _c;
-  const urgencyLabel = getSignalScoreUrgencyLabel(signalData.score, signalData.urgencyLabel);
-  const buckets = React.useMemo(() => getPriorityBuckets(signalData), [signalData]);
-  const topBucketRationale = (_a = buckets.find((bucket) => bucket.rationale)) == null ? void 0 : _a.rationale;
-  const primaryUrgencyExplanation = (_c = (_b = signalData.urgencyExplanation) != null ? _b : signalData.whyNow) != null ? _c : topBucketRationale;
-  const whyNowSection = isSameExplanation(signalData.whyNow, primaryUrgencyExplanation) ? void 0 : signalData.whyNow;
-  const topFactorSection = isSameExplanation(topBucketRationale, primaryUrgencyExplanation) || isSameExplanation(topBucketRationale, whyNowSection) ? void 0 : topBucketRationale;
-  const scoreRange = scoreRangeForUrgency(urgencyLabel);
-  return /* @__PURE__ */ jsxs("div", { id, className: cn("rounded-lg border border-border bg-muted/20 p-3 text-xs", className), role: "region", "aria-label": "Priority explanation", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("p", { className: "font-semibold text-foreground", children: [
-          "Why this is ",
-          urgencyLabel.toLowerCase(),
-          " priority"
-        ] }),
-        primaryUrgencyExplanation ? /* @__PURE__ */ jsx("p", { className: "mt-1 leading-relaxed text-muted-foreground", children: primaryUrgencyExplanation }) : null
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap gap-1.5 text-[11px] text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-background px-2 py-0.5", children: [
-          "Score ",
-          signalData.score,
-          "/100"
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-background px-2 py-0.5", children: [
-          urgencyLabel,
-          " range: ",
-          scoreRange
-        ] })
-      ] })
-    ] }),
-    (whyNowSection || topFactorSection) && /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-2 text-xs text-muted-foreground sm:grid-cols-2", children: [
-      whyNowSection ? /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-background/80 p-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: "Why now" }),
-        /* @__PURE__ */ jsx("p", { className: "mt-0.5 leading-relaxed", children: whyNowSection })
-      ] }) : null,
-      topFactorSection ? /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-background/80 p-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: "Top factor" }),
-        /* @__PURE__ */ jsx("p", { className: "mt-0.5 leading-relaxed", children: topFactorSection })
-      ] }) : null
-    ] }),
-    signalData.factors.length > 0 ? /* @__PURE__ */ jsx(
-      ScoreBreakdown,
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex h-[26px] items-stretch", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": isSelected,
+        "aria-controls": panelId,
+        className: cn(
+          sharedClasses,
+          "gap-1.5 rounded-lg border px-2.5 py-1",
+          isSelected && "rounded-b-none rounded-r-none border-r-0"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(IconComponent, { className: "h-3 w-3 shrink-0" }),
+          bucket.label,
+          signalCount > 1 && /* @__PURE__ */ jsxs("span", { className: cn("rounded-full px-1.5 py-0 text-[10px]", isSelected ? "bg-background/60" : "bg-muted"), children: [
+            "x",
+            signalCount
+          ] }),
+          isSelected ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0" })
+        ]
+      }
+    ),
+    isSelected && /* @__PURE__ */ jsx(
+      "button",
       {
-        className: "mt-3",
-        factors: signalData.factors,
-        onFactorFeedback: signalData.onFactorFeedback,
-        initialFeedback: signalData.initialFactorFeedback
+        type: "button",
+        "aria-label": `Close ${bucket.label}`,
+        onClick: onClose,
+        className: cn(
+          sharedClasses,
+          "rounded-lg rounded-b-none rounded-l-none border border-l-0 border-border px-1.5 py-1 hover:bg-background/60"
+        ),
+        children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
       }
-    ) : null
+    )
   ] });
 }
-function SignalRow({ item, bucketKey, signal, onOpenSignalBucket }) {
+function CombinedSignalMiniChips({ components }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: components.map((comp, idx) => {
+    const CompIcon = resolveIcon(comp.type);
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      idx > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/60", children: "+" }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(CompIcon, { className: "h-2.5 w-2.5 shrink-0" }),
+        comp.type.replace(/_/g, " "),
+        " x",
+        comp.count
+      ] })
+    ] }, comp.type);
+  }) });
+}
+function StructuredSignalRow({ item, bucketKey, signal, tone, onOpenSignalBucket }) {
+  var _a;
+  const IconComponent = resolveIcon(signal.signalTypeName);
+  const toneClass = tone ? (_a = SIGNAL_TONE_CLASSES[tone]) != null ? _a : DEFAULT_TONE_CLASS : DEFAULT_TONE_CLASS;
+  const isCombined = signal.signalTypeName === "combined_signal" && signal.components && signal.components.length > 0;
   const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex h-5 w-5 shrink-0 items-center justify-center rounded", toneClass), children: /* @__PURE__ */ jsx(IconComponent, { className: "h-3 w-3" }) }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: isCombined ? /* @__PURE__ */ jsx(CombinedSignalMiniChips, { components: signal.components }) : /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-foreground", children: slotValue(signal.primaryValue) }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: slotValue(signal.qualifier) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: slotValue(signal.counterparty) }) }),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground/70", children: slotValue(signal.time) }),
+    /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground/50" })
+  ] });
+  if (signal.id && onOpenSignalBucket) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "group grid w-full cursor-pointer items-center gap-x-3 gap-y-1 rounded-md px-3 py-2 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        style: { gridTemplateColumns: "20px minmax(0,1fr) minmax(0,1fr) auto 16px" },
+        onClick: () => onOpenSignalBucket({ item, bucketKey, signalId: signal.id }),
+        children: rowContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "grid w-full items-center gap-x-3 gap-y-1 rounded-md px-3 py-2",
+      style: { gridTemplateColumns: "20px minmax(0,1fr) minmax(0,1fr) auto 16px" },
+      children: rowContent
+    }
+  );
+}
+function LegacySignalRow({ item, bucketKey, signal, onOpenSignalBucket }) {
+  const isClickable = !!(signal.id && onOpenSignalBucket);
+  const rowContent = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: signal.label }),
-      signal.time ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground/70", children: signal.time }) : null
+      signal.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 leading-relaxed text-muted-foreground", children: signal.description }) : null,
+      (signal.source || signal.metric) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap gap-1.5 text-[11px] text-muted-foreground/80", children: [
+        signal.source ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5", children: signal.source }) : null,
+        signal.metric ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5", children: signal.metric }) : null
+      ] })
     ] }),
-    signal.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 leading-relaxed text-muted-foreground", children: signal.description }) : null,
-    (signal.source || signal.metric) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap gap-1.5 text-[11px] text-muted-foreground/80", children: [
-      signal.source ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5", children: signal.source }) : null,
-      signal.metric ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5", children: signal.metric }) : null
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+      signal.time ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground/70", children: signal.time }) : null,
+      isClickable && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground/50" })
     ] })
-  ] });
-  if (signal.id && onOpenSignalBucket) {
+  ] }) });
+  if (isClickable) {
     return /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: "w-full rounded-md bg-background/80 p-2 text-left text-xs transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className: "group w-full cursor-pointer rounded-md bg-background/80 p-3 text-left text-xs transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         onClick: () => onOpenSignalBucket({ item, bucketKey, signalId: signal.id }),
         children: rowContent
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-background/80 p-2 text-xs", children: rowContent });
+  return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-background/80 p-3 text-xs", children: rowContent });
+}
+function hasStructuredData(signal) {
+  return Boolean(
+    signal.primaryValue || signal.qualifier || signal.counterparty || signal.components && signal.components.length > 0
+  );
+}
+function WhyCard({ bucket, signals, item, panelId, onOpenSignalBucket, onBucketFeedback }) {
+  var _a;
+  const [showAll, setShowAll] = React.useState(false);
+  const [bucketFeedback, setBucketFeedback] = React.useState(null);
+  const totalCount = (_a = bucket.signalCount) != null ? _a : signals.length;
+  const visibleSignals = showAll ? signals : signals.slice(0, DEFAULT_VISIBLE_ROWS);
+  const hiddenCount = signals.length - DEFAULT_VISIBLE_ROWS;
+  const useStructured = signals.some(hasStructuredData);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: panelId,
+      className: "rounded-lg rounded-t-none border border-t-0 border-border bg-muted/20 p-3",
+      role: "region",
+      "aria-label": `${bucket.label} details`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-between", children: /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: [
+          totalCount,
+          " signal",
+          totalCount !== 1 ? "s" : "",
+          " \u2013 ",
+          bucket.label
+        ] }) }),
+        visibleSignals.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/30", "aria-label": "Matching signals", children: visibleSignals.map((signal, index) => {
+          var _a2;
+          return /* @__PURE__ */ jsx("li", { children: useStructured ? /* @__PURE__ */ jsx(
+            StructuredSignalRow,
+            {
+              item,
+              bucketKey: bucket.key,
+              signal,
+              tone: bucket.tone,
+              onOpenSignalBucket
+            }
+          ) : /* @__PURE__ */ jsx(
+            LegacySignalRow,
+            {
+              item,
+              bucketKey: bucket.key,
+              signal,
+              onOpenSignalBucket
+            }
+          ) }, (_a2 = signal.id) != null ? _a2 : `${bucket.key}-signal-${index}`);
+        }) }) : bucket.evidence && bucket.evidence.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-1.5", "aria-label": "Matching signals", children: bucket.evidence.map((evidence, index) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "mt-1.5 h-1 w-1 shrink-0 rounded-full bg-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "leading-relaxed", children: evidence })
+        ] }, `${bucket.key}-evidence-${index}`)) }) : null,
+        !showAll && hiddenCount > 0 && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowAll(true),
+            className: "mt-2 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }),
+              "Show ",
+              hiddenCount,
+              " more"
+            ]
+          }
+        ),
+        onBucketFeedback && /* @__PURE__ */ jsx("div", { className: "mt-3 border-t border-border/40 pt-3", children: /* @__PURE__ */ jsx(
+          FeedbackFooter,
+          {
+            feedback: bucketFeedback,
+            onFeedbackChange: setBucketFeedback,
+            onSubmit: (data) => onBucketFeedback(bucket.key, data),
+            negativeChips: BUCKET_NEGATIVE_CHIPS,
+            negativePrompt: "Was this bucket useful?",
+            positivePrompt: "Thanks! What was useful about this bucket?"
+          }
+        ) })
+      ]
+    }
+  );
 }
 function ScoreWhyChips({
   item,
@@ -198,7 +312,7 @@ function ScoreWhyChips({
   onOpenSignalBucket,
   className
 }) {
-  var _a, _b;
+  var _a;
   const [selectedBucketKey, setSelectedBucketKey] = React.useState(null);
   React.useEffect(() => {
     setSelectedBucketKey(null);
@@ -213,69 +327,41 @@ function ScoreWhyChips({
   return /* @__PURE__ */ jsxs("div", { className: cn("mt-4", className), children: [
     /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: "Why" }) }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: buckets.map((bucket) => {
+      var _a2;
       const isSelected = selectedBucketKey === bucket.key;
       const panelId = `${idPrefix}-panel-${makeDomId(bucket.key)}`;
-      return /* @__PURE__ */ jsxs(
-        "button",
+      const signals = getBucketSignals(bucket);
+      const signalCount = (_a2 = bucket.signalCount) != null ? _a2 : signals.length;
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx(
+        WhyPill,
         {
-          type: "button",
-          onClick: () => setSelectedBucketKey((prev) => prev === bucket.key ? null : bucket.key),
-          "aria-expanded": isSelected,
-          "aria-controls": panelId,
-          className: cn(
-            "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            isSelected ? "border-foreground/30 bg-foreground text-background" : "border-border bg-background text-muted-foreground hover:bg-muted/60 hover:text-foreground"
-          ),
-          children: [
-            bucket.label,
-            bucket.signalCount && bucket.signalCount > 1 ? /* @__PURE__ */ jsxs("span", { className: cn("rounded-full px-1.5 py-0 text-[10px]", isSelected ? "bg-background/20" : "bg-muted"), children: [
-              "\xD7",
-              bucket.signalCount
-            ] }) : null
-          ]
-        },
-        bucket.key
-      );
+          bucket,
+          isSelected,
+          signalCount,
+          panelId,
+          onToggle: () => setSelectedBucketKey((prev) => prev === bucket.key ? null : bucket.key),
+          onClose: () => setSelectedBucketKey(null)
+        }
+      ) }, bucket.key);
     }) }),
-    selectedBucket && /* @__PURE__ */ jsxs(
-      "div",
+    selectedBucket && selectedPanelId && /* @__PURE__ */ jsx(
+      WhyCard,
       {
-        id: selectedPanelId,
-        className: "mt-3 rounded-lg border border-border bg-muted/20 p-3",
-        role: "region",
-        "aria-label": `${selectedBucket.label} details`,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: selectedBucket.label }),
-            /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-1.5 text-[11px] text-muted-foreground", children: /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-background px-2 py-0.5", children: [
-              (_b = selectedBucket.signalCount) != null ? _b : selectedBucketSignals.length,
-              " signals"
-            ] }) })
-          ] }) }),
-          selectedBucketSignals.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-2", "aria-label": "Matching signals", children: selectedBucketSignals.map((signal, index) => {
-            var _a2;
-            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              SignalRow,
-              {
-                item,
-                bucketKey: selectedBucket.key,
-                signal,
-                onOpenSignalBucket
-              }
-            ) }, (_a2 = signal.id) != null ? _a2 : `${selectedBucket.key}-signal-${index}`);
-          }) }) : selectedBucket.evidence && selectedBucket.evidence.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-1.5", "aria-label": "Matching signals", children: selectedBucket.evidence.map((evidence, index) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { className: "mt-1.5 h-1 w-1 shrink-0 rounded-full bg-primary" }),
-            /* @__PURE__ */ jsx("span", { className: "leading-relaxed", children: evidence })
-          ] }, `${selectedBucket.key}-evidence-${index}`)) }) : null
-        ]
+        bucket: selectedBucket,
+        signals: selectedBucketSignals,
+        item,
+        panelId: selectedPanelId,
+        onOpenSignalBucket,
+        onBucketFeedback: signalData.onBucketFeedback
       }
     )
   ] });
 }
 export {
+  DEFAULT_TONE_CLASS,
+  SIGNAL_TONE_CLASSES,
   ScoreWhyChips,
-  SignalPriorityChip,
-  SignalPriorityPanel,
-  getSignalScoreUrgencyLabel
+  getSignalScoreUrgencyLabel,
+  scoreRangeForUrgency
 };
 //# sourceMappingURL=score-why-chips.js.map