@handled-ai/design-system 0.18.19 → 0.18.21

package/src/components/score-breakdown.tsx

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

package/src/components/score-ring.tsx

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

package/src/components/score-semantics.ts

@@ -0,0 +1,154 @@
+export type ScoreIntent = "urgency" | "risk" | "positive"
+
+export type UrgencyLevel = "Low" | "Medium" | "High" | "Urgent"
+export type RiskLevel = "Low Risk" | "Medium Risk" | "High Risk"
+export type PositiveLevel = "Low" | "Medium" | "High"
+
+export type ScoreSemanticClasses = {
+  solid: string
+  outline: string
+  dot: string
+  trigger: string
+  hover: string
+  open: string
+}
+
+export const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> = {
+  Urgent: {
+    solid: "bg-red-600 text-white",
+    outline: "border-red-300 bg-red-50 text-red-800",
+    dot: "bg-red-600",
+    trigger: "border-red-300 bg-red-50 text-red-800",
+    hover: "hover:bg-red-100",
+    open: "bg-red-100",
+  },
+  High: {
+    solid: "bg-orange-500 text-white",
+    outline: "border-orange-300 bg-orange-50 text-orange-800",
+    dot: "bg-orange-500",
+    trigger: "border-orange-300 bg-orange-50 text-orange-800",
+    hover: "hover:bg-orange-100",
+    open: "bg-orange-100",
+  },
+  Medium: {
+    solid: "bg-amber-500 text-white",
+    outline: "border-amber-300 bg-amber-50 text-amber-800",
+    dot: "bg-amber-500",
+    trigger: "border-amber-300 bg-amber-50 text-amber-800",
+    hover: "hover:bg-amber-100",
+    open: "bg-amber-100",
+  },
+  Low: {
+    solid: "bg-neutral-300 text-neutral-900",
+    outline: "border-neutral-200 bg-neutral-50 text-neutral-700",
+    dot: "bg-neutral-400",
+    trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
+    hover: "hover:bg-neutral-100",
+    open: "bg-neutral-100",
+  },
+}
+
+export const RISK_SCORE_CLASSES: Record<RiskLevel, ScoreSemanticClasses> = {
+  "High Risk": {
+    solid: "bg-red-600 text-white",
+    outline: "border-red-300 bg-red-50 text-red-800",
+    dot: "bg-red-600",
+    trigger: "border-red-300 bg-red-50 text-red-800",
+    hover: "hover:bg-red-100",
+    open: "bg-red-100",
+  },
+  "Medium Risk": {
+    solid: "bg-amber-500 text-white",
+    outline: "border-amber-300 bg-amber-50 text-amber-800",
+    dot: "bg-amber-500",
+    trigger: "border-amber-300 bg-amber-50 text-amber-800",
+    hover: "hover:bg-amber-100",
+    open: "bg-amber-100",
+  },
+  "Low Risk": {
+    solid: "bg-neutral-300 text-neutral-900",
+    outline: "border-neutral-200 bg-neutral-50 text-neutral-700",
+    dot: "bg-neutral-400",
+    trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
+    hover: "hover:bg-neutral-100",
+    open: "bg-neutral-100",
+  },
+}
+
+export const POSITIVE_SCORE_CLASSES: Record<PositiveLevel, ScoreSemanticClasses> = {
+  High: {
+    solid: "bg-emerald-500 text-white",
+    outline: "border-emerald-300 bg-emerald-50 text-emerald-800",
+    dot: "bg-emerald-500",
+    trigger: "border-emerald-300 bg-emerald-50 text-emerald-800",
+    hover: "hover:bg-emerald-100",
+    open: "bg-emerald-100",
+  },
+  Medium: {
+    solid: "bg-amber-500 text-white",
+    outline: "border-amber-300 bg-amber-50 text-amber-800",
+    dot: "bg-amber-500",
+    trigger: "border-amber-300 bg-amber-50 text-amber-800",
+    hover: "hover:bg-amber-100",
+    open: "bg-amber-100",
+  },
+  Low: {
+    solid: "bg-red-500 text-white",
+    outline: "border-red-300 bg-red-50 text-red-800",
+    dot: "bg-red-500",
+    trigger: "border-red-300 bg-red-50 text-red-800",
+    hover: "hover:bg-red-100",
+    open: "bg-red-100",
+  },
+}
+
+export const SCORE_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",
+}
+
+export const DEFAULT_SCORE_TONE_CLASS = "bg-muted text-muted-foreground"
+
+export function getUrgencyLevel(score: number): UrgencyLevel {
+  if (score >= 80) return "Urgent"
+  if (score >= 60) return "High"
+  if (score >= 35) return "Medium"
+  return "Low"
+}
+
+export function getUrgencyRange(label: UrgencyLevel): string {
+  switch (label) {
+    case "Urgent":
+      return "80-100"
+    case "High":
+      return "60-79"
+    case "Medium":
+      return "35-59"
+    case "Low":
+      return "0-34"
+  }
+}
+
+export function getRiskLevel(score: number): RiskLevel {
+  if (score >= 70) return "High Risk"
+  if (score >= 40) return "Medium Risk"
+  return "Low Risk"
+}
+
+export function getPositiveLevel(score: number): PositiveLevel {
+  if (score >= 70) return "High"
+  if (score >= 40) return "Medium"
+  return "Low"
+}
+
+export function getScoreToneClasses(score: number, intent: ScoreIntent): ScoreSemanticClasses {
+  switch (intent) {
+    case "urgency":
+      return URGENCY_SCORE_CLASSES[getUrgencyLevel(score)]
+    case "risk":
+      return RISK_SCORE_CLASSES[getRiskLevel(score)]
+    case "positive":
+      return POSITIVE_SCORE_CLASSES[getPositiveLevel(score)]
+  }
+}

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

@@ -17,6 +17,12 @@ 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,
@@ -33,24 +39,11 @@ export function getSignalScoreUrgencyLabel(
   score: number,
   providedLabel?: SignalScoreUrgencyLabel,
 ): SignalScoreUrgencyLabel {
-  if (providedLabel) return providedLabel
-  if (score >= 80) return "Urgent"
-  if (score >= 60) return "High"
-  if (score >= 35) return "Medium"
-  return "Low"
+  return providedLabel ?? getUrgencyLevel(score)
 }
 
 export function scoreRangeForUrgency(label: SignalScoreUrgencyLabel): string {
-  switch (label) {
-    case "Urgent":
-      return "80-100"
-    case "High":
-      return "60-79"
-    case "Medium":
-      return "35-59"
-    case "Low":
-      return "0-34"
-  }
+  return getUrgencyRange(label)
 }
 
 function makeDomId(...parts: Array<string | undefined>): string {
@@ -107,15 +100,11 @@ function resolveIcon(iconName?: string): LucideIcon {
 // Static tone class maps (REQUIRED for Tailwind v4 source scanning)
 // ---------------------------------------------------------------------------
 
-/** 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",
-}
+/** Shared tone-to-class map. Re-exported for backward compatibility. */
+export const SIGNAL_TONE_CLASSES: Record<string, string> = SCORE_TONE_CLASSES
 
-/** Default tone for missing/unknown tone values */
-export const DEFAULT_TONE_CLASS = "bg-muted text-muted-foreground"
+/** Default tone for missing/unknown tone values. Re-exported for backward compatibility. */
+export const DEFAULT_TONE_CLASS = DEFAULT_SCORE_TONE_CLASS
 
 // ---------------------------------------------------------------------------
 // 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 { getSignalScoreUrgencyLabel, scoreRangeForUrgency, SIGNAL_TONE_CLASSES } from "./score-why-chips"
+import { SCORE_TONE_CLASSES, URGENCY_SCORE_CLASSES, getUrgencyLevel, getUrgencyRange } from "./score-semantics"
 
 // ---------------------------------------------------------------------------
 // Types
@@ -75,28 +75,28 @@ export interface SignalPriorityPopoverProps {
 // ---------------------------------------------------------------------------
 
 const URGENCY_TRIGGER_DEFAULT: Record<SignalScoreUrgencyLabel, string> = {
-  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",
+  Urgent: URGENCY_SCORE_CLASSES.Urgent.trigger,
+  High: URGENCY_SCORE_CLASSES.High.trigger,
+  Medium: URGENCY_SCORE_CLASSES.Medium.trigger,
+  Low: URGENCY_SCORE_CLASSES.Low.trigger,
 }
 
 const URGENCY_TRIGGER_HOVER: Record<SignalScoreUrgencyLabel, string> = {
-  Urgent: "hover:bg-red-100",
-  High: "hover:bg-orange-100",
-  Medium: "hover:bg-amber-100",
-  Low: "hover:bg-blue-100",
+  Urgent: URGENCY_SCORE_CLASSES.Urgent.hover,
+  High: URGENCY_SCORE_CLASSES.High.hover,
+  Medium: URGENCY_SCORE_CLASSES.Medium.hover,
+  Low: URGENCY_SCORE_CLASSES.Low.hover,
 }
 
 const URGENCY_TRIGGER_OPEN: Record<SignalScoreUrgencyLabel, string> = {
-  Urgent: "bg-red-100",
-  High: "bg-orange-100",
-  Medium: "bg-amber-100",
-  Low: "bg-blue-100",
+  Urgent: URGENCY_SCORE_CLASSES.Urgent.open,
+  High: URGENCY_SCORE_CLASSES.High.open,
+  Medium: URGENCY_SCORE_CLASSES.Medium.open,
+  Low: URGENCY_SCORE_CLASSES.Low.open,
 }
 
-/** 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>
+/** Re-use shared tone classes from score-semantics. */
+const TONE_ICON_CLASSES: Record<PriorityFactor["tone"], string> = SCORE_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: "bg-red-500",
-  High: "bg-orange-500",
-  Medium: "bg-amber-500",
-  Low: "bg-blue-500",
+  Urgent: URGENCY_SCORE_CLASSES.Urgent.dot,
+  High: URGENCY_SCORE_CLASSES.High.dot,
+  Medium: URGENCY_SCORE_CLASSES.Medium.dot,
+  Low: URGENCY_SCORE_CLASSES.Low.dot,
 }
 
 // ---------------------------------------------------------------------------
@@ -283,8 +283,8 @@ export function SignalPriorityPopover({
   onFactorFeedback,
   initialPriorityFeedback,
 }: SignalPriorityPopoverProps) {
-  const urgencyLabel = getSignalScoreUrgencyLabel(score, providedLabel)
-  const scoreRange = scoreRangeForUrgency(urgencyLabel)
+  const urgencyLabel = providedLabel ?? getUrgencyLevel(score)
+  const scoreRange = getUrgencyRange(urgencyLabel)
 
   const [open, setOpen] = React.useState(false)
   const [feedback, setFeedback] = React.useState<"positive" | "negative" | null>(null)

package/src/index.ts

@@ -77,6 +77,7 @@ 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"