@handled-ai/design-system 0.18.23 → 0.18.25

package/src/components/score-semantics.ts

@@ -0,0 +1,187 @@
+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
+  text: string
+  track: string
+  bar: 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",
+    text: "text-red-600",
+    track: "text-red-600/15",
+    bar: "bg-red-600",
+  },
+  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",
+    text: "text-orange-500",
+    track: "text-orange-500/15",
+    bar: "bg-orange-500",
+  },
+  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",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500",
+  },
+  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",
+    text: "text-neutral-400",
+    track: "text-neutral-400/15",
+    bar: "bg-neutral-400",
+  },
+}
+
+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",
+    text: "text-red-600",
+    track: "text-red-600/15",
+    bar: "bg-red-600",
+  },
+  "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",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500",
+  },
+  "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",
+    text: "text-neutral-400",
+    track: "text-neutral-400/15",
+    bar: "bg-neutral-400",
+  },
+}
+
+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",
+    text: "text-emerald-500",
+    track: "text-emerald-500/15",
+    bar: "bg-emerald-500",
+  },
+  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",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500",
+  },
+  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",
+    text: "text-red-500",
+    track: "text-red-500/15",
+    bar: "bg-red-500",
+  },
+}
+
+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

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