@handled-ai/design-system 0.18.22 → 0.18.23

package/src/components/contextual-quick-action-launcher.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ArrowRight, ChevronDown, Zap } from "lucide-react"
+import { ChevronDown, Zap } from "lucide-react"
 
 import { cn } from "../lib/utils"
 import {
@@ -19,11 +19,15 @@ export interface ContextualQuickActionItem {
   icon?: React.ReactNode
   disabled?: boolean
   disabledReason?: string
+  meta?: React.ReactNode
 }
 
+export type ContextualQuickActionLauncherVariant = "default" | "case-panel"
+
 export interface ContextualQuickActionContextLabelProps {
   contextLabel: string
   contextSecondary?: string
+  variant?: ContextualQuickActionLauncherVariant
   className?: string
 }
 
@@ -35,6 +39,7 @@ export interface ContextualQuickActionLauncherProps {
   onBrowseAll?: () => void
   showHint?: boolean
   align?: "start" | "end"
+  variant?: ContextualQuickActionLauncherVariant
   className?: string
   open?: boolean
   defaultOpen?: boolean
@@ -44,19 +49,35 @@ export interface ContextualQuickActionLauncherProps {
 function ContextualQuickActionContextLabel({
   contextLabel,
   contextSecondary,
+  variant = "default",
   className,
 }: ContextualQuickActionContextLabelProps) {
+  const isCasePanel = variant === "case-panel"
+
   return (
     <div
       data-slot="contextual-quick-action-context-label"
+      data-variant={variant}
       className={cn(
-        "-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground",
+        isCasePanel
+          ? "-mx-2 -mt-2 mb-1 flex items-center gap-1.5 whitespace-nowrap border-b px-3 py-2.5 text-[13px] text-muted-foreground"
+          : "-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground",
         className
       )}
     >
-      <Zap className="h-3 w-3 shrink-0" strokeWidth={2.25} aria-hidden="true" />
+      <Zap
+        className={cn(isCasePanel ? "h-3.5 w-3.5 shrink-0" : "h-3 w-3 shrink-0")}
+        strokeWidth={2.25}
+        aria-hidden="true"
+      />
       <span>Acting on</span>
-      <strong className="max-w-[180px] truncate font-semibold text-foreground">
+      <strong
+        className={cn(
+          isCasePanel
+            ? "max-w-[260px] truncate font-semibold text-foreground"
+            : "max-w-[180px] truncate font-semibold text-foreground"
+        )}
+      >
         {contextLabel}
       </strong>
       {contextSecondary ? (
@@ -80,12 +101,14 @@ function ContextualQuickActionLauncher({
   onBrowseAll,
   showHint = false,
   align = "start",
+  variant = "default",
   className,
   open,
   defaultOpen,
   onOpenChange,
 }: ContextualQuickActionLauncherProps) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)
+  const isCasePanel = variant === "case-panel"
   const isControlled = open !== undefined
   const isOpen = isControlled ? open : uncontrolledOpen
 
@@ -154,11 +177,16 @@ function ContextualQuickActionLauncher({
           align={align}
           side="bottom"
           sideOffset={6}
-          className="pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]"
+          className={cn(
+            isCasePanel
+              ? "pointer-events-auto w-[432px] rounded-[13px] border border-border bg-popover p-2 text-[13px] shadow-[0_18px_44px_rgba(0,0,0,0.14),0_2px_10px_rgba(0,0,0,0.06)]"
+              : "pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]"
+          )}
         >
           <ContextualQuickActionContextLabel
             contextLabel={contextLabel}
             contextSecondary={contextSecondary}
+            variant={variant}
           />
 
           {items.map((item) => (
@@ -167,48 +195,97 @@ function ContextualQuickActionLauncher({
               disabled={item.disabled}
               onSelect={(event) => handleSelect(item, event)}
               className={cn(
-                "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100",
+                isCasePanel
+                  ? "grid cursor-pointer grid-cols-[34px_minmax(0,1fr)_auto] items-center gap-3 rounded-[9px] px-2.5 py-[9px] text-left outline-none focus:bg-muted/60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100"
+                  : "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100",
                 item.disabled && "text-muted-foreground"
               )}
             >
               <span
                 data-slot="contextual-quick-action-item-icon"
                 className={cn(
-                  "flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground",
+                  isCasePanel
+                    ? "flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[9px] border border-border/70 bg-muted/60 text-foreground [&_svg]:h-[18px] [&_svg]:w-[18px]"
+                    : "flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground",
                   item.disabled && "opacity-60"
                 )}
               >
                 {item.icon ?? <DefaultActionIcon />}
               </span>
               <span className="min-w-0 flex-1">
-                <span className="block truncate text-[12.5px] font-medium leading-tight text-current">
+                <span
+                  className={cn(
+                    isCasePanel
+                      ? "block truncate text-[13.5px] font-semibold leading-tight text-current"
+                      : "block truncate text-[12.5px] font-medium leading-tight text-current"
+                  )}
+                >
                   {item.label}
                 </span>
                 {item.description ? (
-                  <span className="mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground">
+                  <span
+                    className={cn(
+                      isCasePanel
+                        ? "mt-1 block truncate text-[12px] leading-tight text-muted-foreground"
+                        : "mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground"
+                    )}
+                  >
                     {item.description}
                   </span>
                 ) : null}
               </span>
               {item.disabled && item.disabledReason ? (
-                <span className="ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80">
+                <span
+                  data-slot="contextual-quick-action-item-disabled-meta"
+                  className={cn(
+                    isCasePanel
+                      ? "ml-auto shrink-0 whitespace-nowrap text-[12px] italic text-muted-foreground/70"
+                      : "ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80"
+                  )}
+                >
                   {item.disabledReason}
                 </span>
+              ) : item.meta ? (
+                <span
+                  data-slot="contextual-quick-action-item-meta"
+                  className={cn(
+                    isCasePanel
+                      ? "ml-auto shrink-0 whitespace-nowrap text-[12px] italic text-muted-foreground/70"
+                      : "ml-auto shrink-0 text-[10.5px] text-muted-foreground/80"
+                  )}
+                >
+                  {item.meta}
+                </span>
               ) : null}
             </DropdownMenuItem>
           ))}
 
-          <DropdownMenuSeparator className="-mx-1.5 my-1" />
-          <div className="flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground">
+          <DropdownMenuSeparator className={cn(isCasePanel ? "-mx-2 mt-1 mb-1" : "-mx-1.5 my-1")} />
+          <div
+            className={cn(
+              isCasePanel
+                ? "flex items-center justify-between whitespace-nowrap px-2.5 py-2 text-[13px] text-muted-foreground"
+                : "flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground"
+            )}
+          >
             <button
               type="button"
-              className="inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              className={cn(
+                isCasePanel
+                  ? "inline-flex items-center gap-1 font-semibold text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  : "inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              )}
               onClick={handleBrowseAll}
             >
               Browse all actions
-              <ArrowRight className="h-3 w-3" strokeWidth={2} aria-hidden="true" />
             </button>
-            <span className="inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground">
+            <span
+              className={cn(
+                isCasePanel
+                  ? "inline-flex items-center rounded-[5px] border border-border bg-muted/50 px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none text-muted-foreground"
+                  : "inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground"
+              )}
+            >
               ⌘K
             </span>
           </div>

package/src/components/data-table.tsx

@@ -892,7 +892,6 @@ export function DataTable({
             title={data.title}
             description={data.description}
             score={scoreModal.type === "Risk" ? scoreModal.row.riskScore : scoreModal.row.expansionScore}
-            scoreIntent={scoreModal.type === "Risk" ? "risk" : "positive"}
             whyNow={data.whyNow}
             evidence={data.evidence}
             factors={data.factors}

package/src/components/score-analysis-modal.tsx

@@ -7,7 +7,6 @@ import { ScoreRing } from "./score-ring"
 import { ScoreBreakdown, type ScoreFactor } from "./score-breakdown"
 import { SignalApproval } from "./signal-feedback-inline"
 import { X } from "lucide-react"
-import type { ScoreIntent } from "./score-semantics"
 
 interface ScoreAnalysisModalProps {
   open: boolean
@@ -27,25 +26,10 @@ interface ScoreAnalysisModalProps {
   onDismiss?: (reasons: string[], detail: string) => void
   /** When true, renders as an absolute-positioned inline panel instead of a Radix Sheet portal. Useful when the component is inside a container that should not be escaped. */
   useInlinePanel?: boolean
-  scoreIntent?: ScoreIntent
 }
 
-function getScoreLabel(score: number, denominator: number, intent: ScoreIntent = "positive") {
+function getScoreLabel(score: number, denominator: number) {
   const pct = (score / denominator) * 100
-
-  if (intent === "urgency") {
-    if (pct >= 80) return { text: "URGENT", className: "text-red-600" }
-    if (pct >= 60) return { text: "HIGH", className: "text-orange-600" }
-    if (pct >= 35) return { text: "MEDIUM", className: "text-amber-600" }
-    return { text: "LOW", className: "text-neutral-600" }
-  }
-
-  if (intent === "risk") {
-    if (pct >= 70) return { text: "High Risk", className: "text-red-600" }
-    if (pct >= 40) return { text: "Medium Risk", className: "text-amber-600" }
-    return { text: "Low Risk", className: "text-neutral-600" }
-  }
-
   if (pct >= 70) return { text: "HIGH", className: "text-emerald-600" }
   if (pct >= 40) return { text: "MEDIUM", className: "text-amber-600" }
   return { text: "LOW", className: "text-red-600" }
@@ -68,9 +52,8 @@ function ScoreAnalysisModal({
   onApproveFeedback,
   onDismiss,
   useInlinePanel = false,
-  scoreIntent = "positive",
 }: ScoreAnalysisModalProps) {
-  const label = getScoreLabel(score, denominator, scoreIntent)
+  const label = getScoreLabel(score, denominator)
 
   const panelContent = (
     <SignalApproval.Root
@@ -100,7 +83,7 @@ function ScoreAnalysisModal({
 
             <div className="space-y-6">
               <div className="flex flex-col items-center gap-3">
-                <ScoreRing score={score} denominator={denominator} size={120} strokeWidth={10} intent={scoreIntent} />
+                <ScoreRing score={score} denominator={denominator} size={120} strokeWidth={10} />
                 <Badge variant="outline">
                   {Math.round((score / denominator) * 100)}% Score
                   {" \u2014 "}
@@ -128,7 +111,7 @@ function ScoreAnalysisModal({
               {factors && factors.length > 0 && (
                 <div>
                   <h3 className="font-semibold mb-2 text-sm">Score Breakdown</h3>
-                  <ScoreBreakdown factors={factors} onFactorFeedback={onFactorFeedback} scoreIntent={scoreIntent} />
+                  <ScoreBreakdown factors={factors} onFactorFeedback={onFactorFeedback} />
                 </div>
               )}
             </div>
@@ -185,5 +168,5 @@ function ScoreAnalysisModal({
 
 const ScoreAnalysisPanel = ScoreAnalysisModal
 
-export { ScoreAnalysisModal, ScoreAnalysisPanel, getScoreLabel }
+export { ScoreAnalysisModal, ScoreAnalysisPanel }
 export type { ScoreAnalysisModalProps }

package/src/components/score-breakdown.tsx

@@ -3,8 +3,6 @@
 import * as React from "react"
 import { ThumbsUp, ThumbsDown } from "lucide-react"
 import { cn } from "../lib/utils"
-import type { ScoreIntent } from "./score-semantics"
-import { getScoreToneClasses } from "./score-semantics"
 
 export interface ScoreFactor {
   key: string
@@ -14,8 +12,10 @@ export interface ScoreFactor {
   why: string
 }
 
-function getFactorBarColor(score: number, intent: ScoreIntent = "positive") {
-  return getScoreToneClasses(score, intent).bar
+function getFactorBarColor(score: number) {
+  if (score >= 70) return "bg-emerald-500"
+  if (score >= 40) return "bg-amber-500"
+  return "bg-red-500"
 }
 
 function getRiskBadgeStyle(risk: "Low" | "Medium" | "High") {
@@ -34,7 +34,6 @@ interface ScoreBreakdownProps {
   onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
   className?: string
   initialFeedback?: Record<string, { type: "up" | "down"; detail: string }>
-  scoreIntent?: ScoreIntent
 }
 
 function deriveInitialState<T>(
@@ -48,7 +47,7 @@ function deriveInitialState<T>(
   return Object.fromEntries(filtered.map(([k, v]) => [k, mapFn(v)]))
 }
 
-function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback, scoreIntent = "positive" }: ScoreBreakdownProps) {
+function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback }: ScoreBreakdownProps) {
   const [feedback, setFeedback] = React.useState<Record<string, "up" | "down" | null>>(
     () => deriveInitialState(initialFeedback, (v) => v.type)
   )
@@ -171,7 +170,7 @@ function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback,
             {factor.score !== null && (
               <div className="w-full h-1 bg-muted rounded-full overflow-hidden">
                 <div
-                  className={cn("h-full rounded-full", getFactorBarColor(factor.score, scoreIntent))}
+                  className={cn("h-full rounded-full", getFactorBarColor(factor.score))}
                   style={{ width: `${factor.score}%` }}
                 />
               </div>

package/src/components/score-ring.tsx

@@ -1,14 +1,18 @@
 import * as React from "react"
 import { cn } from "../lib/utils"
-import type { ScoreIntent } from "./score-semantics"
-import { getScoreToneClasses } from "./score-semantics"
 
-function getScoreColor(score: number, denominator: number, intent: ScoreIntent = "positive") {
-  return getScoreToneClasses((score / denominator) * 100, intent).text
+function getScoreColor(score: number, denominator: number) {
+  const pct = (score / denominator) * 100
+  if (pct >= 70) return "text-emerald-500"
+  if (pct >= 40) return "text-amber-500"
+  return "text-red-500"
 }
 
-function getScoreTrackColor(score: number, denominator: number, intent: ScoreIntent = "positive") {
-  return getScoreToneClasses((score / denominator) * 100, intent).track
+function getScoreTrackColor(score: number, denominator: number) {
+  const pct = (score / denominator) * 100
+  if (pct >= 70) return "text-emerald-500/15"
+  if (pct >= 40) return "text-amber-500/15"
+  return "text-red-500/15"
 }
 
 interface ScoreRingProps {
@@ -18,7 +22,6 @@ interface ScoreRingProps {
   strokeWidth?: number
   className?: string
   showLabel?: boolean
-  intent?: ScoreIntent
 }
 
 function ScoreRing({
@@ -28,7 +31,6 @@ function ScoreRing({
   strokeWidth = 10,
   className,
   showLabel = true,
-  intent = "positive",
 }: ScoreRingProps) {
   const radius = (size - strokeWidth) / 2
   const circumference = 2 * Math.PI * radius
@@ -51,7 +53,7 @@ function ScoreRing({
           fill="none"
           stroke="currentColor"
           strokeWidth={strokeWidth}
-          className={getScoreTrackColor(score, denominator, intent)}
+          className={getScoreTrackColor(score, denominator)}
         />
         {/* Fill */}
         <circle
@@ -64,7 +66,7 @@ function ScoreRing({
           strokeLinecap="round"
           strokeDasharray={circumference}
           strokeDashoffset={offset}
-          className={cn("transition-all duration-500", getScoreColor(score, denominator, intent))}
+          className={cn("transition-all duration-500", getScoreColor(score, denominator))}
         />
       </svg>
       {showLabel && (
@@ -81,5 +83,5 @@ function ScoreRing({
   )
 }
 
-export { ScoreRing, getScoreColor, getScoreTrackColor }
+export { ScoreRing, getScoreColor }
 export type { ScoreRingProps }

package/src/components/score-why-chips.tsx

@@ -17,12 +17,6 @@ import type { LucideIcon } from "lucide-react"
 import { FeedbackFooter } from "./feedback-primitives"
 import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "./feedback-primitives"
 import { cn } from "../lib/utils"
-import {
-  DEFAULT_SCORE_TONE_CLASS,
-  SCORE_TONE_CLASSES,
-  getUrgencyLevel,
-  getUrgencyRange,
-} from "./score-semantics"
 import type {
   QueueItem,
   SignalScoreData,
@@ -39,11 +33,24 @@ export function getSignalScoreUrgencyLabel(
   score: number,
   providedLabel?: SignalScoreUrgencyLabel,
 ): SignalScoreUrgencyLabel {
-  return providedLabel ?? getUrgencyLevel(score)
+  if (providedLabel) return providedLabel
+  if (score >= 80) return "Urgent"
+  if (score >= 60) return "High"
+  if (score >= 35) return "Medium"
+  return "Low"
 }
 
 export function scoreRangeForUrgency(label: SignalScoreUrgencyLabel): string {
-  return getUrgencyRange(label)
+  switch (label) {
+    case "Urgent":
+      return "80-100"
+    case "High":
+      return "60-79"
+    case "Medium":
+      return "35-59"
+    case "Low":
+      return "0-34"
+  }
 }
 
 function makeDomId(...parts: Array<string | undefined>): string {
@@ -100,11 +107,15 @@ function resolveIcon(iconName?: string): LucideIcon {
 // Static tone class maps (REQUIRED for Tailwind v4 source scanning)
 // ---------------------------------------------------------------------------
 
-/** Shared tone-to-class map. Re-exported for backward compatibility. */
-export const SIGNAL_TONE_CLASSES: Record<string, string> = SCORE_TONE_CLASSES
+/** Shared tone-to-class map. Re-exported for signal-priority-popover. */
+export const SIGNAL_TONE_CLASSES: Record<string, string> = {
+  alert: "bg-red-50 text-red-600",
+  warn: "bg-amber-50 text-amber-600",
+  info: "bg-blue-50 text-blue-600",
+}
 
-/** Default tone for missing/unknown tone values. Re-exported for backward compatibility. */
-export const DEFAULT_TONE_CLASS = DEFAULT_SCORE_TONE_CLASS
+/** Default tone for missing/unknown tone values */
+export const DEFAULT_TONE_CLASS = "bg-muted text-muted-foreground"
 
 // ---------------------------------------------------------------------------
 // Em-dash fallback for missing slot data

package/src/components/signal-priority-popover.tsx

@@ -22,7 +22,7 @@ import { cn } from "../lib/utils"
 import { FeedbackFooter, InlineFeedbackControl } from "./feedback-primitives"
 import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "./feedback-primitives"
 import type { SignalScoreUrgencyLabel } from "../prototype/prototype-config"
-import { SCORE_TONE_CLASSES, URGENCY_SCORE_CLASSES, getUrgencyLevel, getUrgencyRange } from "./score-semantics"
+import { getSignalScoreUrgencyLabel, scoreRangeForUrgency, SIGNAL_TONE_CLASSES } from "./score-why-chips"
 
 // ---------------------------------------------------------------------------
 // Types
@@ -75,28 +75,28 @@ export interface SignalPriorityPopoverProps {
 // ---------------------------------------------------------------------------
 
 const URGENCY_TRIGGER_DEFAULT: Record<SignalScoreUrgencyLabel, string> = {
-  Urgent: URGENCY_SCORE_CLASSES.Urgent.trigger,
-  High: URGENCY_SCORE_CLASSES.High.trigger,
-  Medium: URGENCY_SCORE_CLASSES.Medium.trigger,
-  Low: URGENCY_SCORE_CLASSES.Low.trigger,
+  Urgent: "border-red-200 bg-red-50 text-red-700",
+  High: "border-orange-200 bg-orange-50 text-orange-700",
+  Medium: "border-amber-200 bg-amber-50 text-amber-700",
+  Low: "border-blue-200 bg-blue-50 text-blue-700",
 }
 
 const URGENCY_TRIGGER_HOVER: Record<SignalScoreUrgencyLabel, string> = {
-  Urgent: URGENCY_SCORE_CLASSES.Urgent.hover,
-  High: URGENCY_SCORE_CLASSES.High.hover,
-  Medium: URGENCY_SCORE_CLASSES.Medium.hover,
-  Low: URGENCY_SCORE_CLASSES.Low.hover,
+  Urgent: "hover:bg-red-100",
+  High: "hover:bg-orange-100",
+  Medium: "hover:bg-amber-100",
+  Low: "hover:bg-blue-100",
 }
 
 const URGENCY_TRIGGER_OPEN: Record<SignalScoreUrgencyLabel, string> = {
-  Urgent: URGENCY_SCORE_CLASSES.Urgent.open,
-  High: URGENCY_SCORE_CLASSES.High.open,
-  Medium: URGENCY_SCORE_CLASSES.Medium.open,
-  Low: URGENCY_SCORE_CLASSES.Low.open,
+  Urgent: "bg-red-100",
+  High: "bg-orange-100",
+  Medium: "bg-amber-100",
+  Low: "bg-blue-100",
 }
 
-/** Re-use shared tone classes from score-semantics. */
-const TONE_ICON_CLASSES: Record<PriorityFactor["tone"], string> = SCORE_TONE_CLASSES as Record<PriorityFactor["tone"], string>
+/** Re-use shared tone classes from score-why-chips. */
+const TONE_ICON_CLASSES: Record<PriorityFactor["tone"], string> = SIGNAL_TONE_CLASSES as Record<PriorityFactor["tone"], string>
 
 const DIRECTION_CLASSES: Record<PriorityFactor["direction"], string> = {
   raises: "text-red-600",
@@ -124,10 +124,10 @@ const FACTOR_ICONS: Record<string, LucideIcon> = {
 // ---------------------------------------------------------------------------
 
 const URGENCY_DOT_CLASSES: Record<SignalScoreUrgencyLabel, string> = {
-  Urgent: URGENCY_SCORE_CLASSES.Urgent.dot,
-  High: URGENCY_SCORE_CLASSES.High.dot,
-  Medium: URGENCY_SCORE_CLASSES.Medium.dot,
-  Low: URGENCY_SCORE_CLASSES.Low.dot,
+  Urgent: "bg-red-500",
+  High: "bg-orange-500",
+  Medium: "bg-amber-500",
+  Low: "bg-blue-500",
 }
 
 // ---------------------------------------------------------------------------
@@ -283,8 +283,8 @@ export function SignalPriorityPopover({
   onFactorFeedback,
   initialPriorityFeedback,
 }: SignalPriorityPopoverProps) {
-  const urgencyLabel = providedLabel ?? getUrgencyLevel(score)
-  const scoreRange = getUrgencyRange(urgencyLabel)
+  const urgencyLabel = getSignalScoreUrgencyLabel(score, providedLabel)
+  const scoreRange = scoreRangeForUrgency(urgencyLabel)
 
   const [open, setOpen] = React.useState(false)
   const [feedback, setFeedback] = React.useState<"positive" | "negative" | null>(null)

package/src/index.ts

@@ -20,6 +20,10 @@ export * from "./components/avatar"
 export * from "./components/badge"
 export * from "./components/button"
 export * from "./components/card"
+export * from "./components/case-panel-email-composer"
+export * from "./components/case-panel-activity-timeline"
+export * from "./components/case-panel-detail"
+export * from "./components/case-panel-why"
 export { CollapsibleSection, type CollapsibleSectionProps } from "./components/collapsible-section"
 export * from "./components/compliance-badge"
 export * from "./components/contact-chip"
@@ -77,7 +81,6 @@ export * from "./components/rich-text-toolbar"
 export * from "./components/score-analysis-modal"
 export * from "./components/score-breakdown"
 export * from "./components/score-feedback"
-export * from "./components/score-semantics"
 export * from "./components/score-why-chips"
 export * from "./components/score-ring"
 export * from "./components/scroll-area"

package/dist/components/score-semantics.d.ts

@@ -1,27 +0,0 @@
-type ScoreIntent = "urgency" | "risk" | "positive";
-type UrgencyLevel = "Low" | "Medium" | "High" | "Urgent";
-type RiskLevel = "Low Risk" | "Medium Risk" | "High Risk";
-type PositiveLevel = "Low" | "Medium" | "High";
-type ScoreSemanticClasses = {
-    solid: string;
-    outline: string;
-    dot: string;
-    trigger: string;
-    hover: string;
-    open: string;
-    text: string;
-    track: string;
-    bar: string;
-};
-declare const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses>;
-declare const RISK_SCORE_CLASSES: Record<RiskLevel, ScoreSemanticClasses>;
-declare const POSITIVE_SCORE_CLASSES: Record<PositiveLevel, ScoreSemanticClasses>;
-declare const SCORE_TONE_CLASSES: Record<string, string>;
-declare const DEFAULT_SCORE_TONE_CLASS = "bg-muted text-muted-foreground";
-declare function getUrgencyLevel(score: number): UrgencyLevel;
-declare function getUrgencyRange(label: UrgencyLevel): string;
-declare function getRiskLevel(score: number): RiskLevel;
-declare function getPositiveLevel(score: number): PositiveLevel;
-declare function getScoreToneClasses(score: number, intent: ScoreIntent): ScoreSemanticClasses;
-
-export { DEFAULT_SCORE_TONE_CLASS, POSITIVE_SCORE_CLASSES, type PositiveLevel, RISK_SCORE_CLASSES, type RiskLevel, SCORE_TONE_CLASSES, type ScoreIntent, type ScoreSemanticClasses, URGENCY_SCORE_CLASSES, type UrgencyLevel, getPositiveLevel, getRiskLevel, getScoreToneClasses, getUrgencyLevel, getUrgencyRange };