@handled-ai/design-system 0.18.18 → 0.18.20

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/components/virtualized-data-table.tsx

@@ -258,9 +258,9 @@ export function VirtualizedDataTable<TData>({
 
                 const sortIcon = (() => {
                   if (!canServerSort) return null
-                  if (activeSortColumn === sortKey && activeSortDirection === "asc") return <ArrowUp className="w-3 h-3" />
-                  if (activeSortColumn === sortKey && activeSortDirection === "desc") return <ArrowDown className="w-3 h-3" />
-                  return <ArrowUpDown className="w-3 h-3 opacity-40" />
+                  if (activeSortColumn === sortKey && activeSortDirection === "asc") return <ArrowUp className="w-3 h-3 shrink-0" />
+                  if (activeSortColumn === sortKey && activeSortDirection === "desc") return <ArrowDown className="w-3 h-3 shrink-0" />
+                  return <ArrowUpDown className="w-3 h-3 shrink-0 opacity-40" />
                 })()
 
                 const handleHeaderClick = canServerSort ? () => {
@@ -274,7 +274,7 @@ export function VirtualizedDataTable<TData>({
                   <div
                     key={header.id}
                     className={cn(
-                      "group/header h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
+                      "group/header h-9 min-w-0 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
                       header.column.getCanResize() && "pr-4",
                     )}
                     style={{
@@ -290,42 +290,48 @@ export function VirtualizedDataTable<TData>({
                         {canServerSort ? (
                           <button
                             type="button"
-                            className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+                            className="flex min-w-0 flex-1 items-center gap-1 hover:text-foreground transition-colors"
                             onClick={handleHeaderClick}
                           >
-                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            <span className="min-w-0 truncate">
+                              {flexRender(header.column.columnDef.header, header.getContext())}
+                            </span>
                             {sortIcon}
                           </button>
                         ) : header.column.getCanSort() ? (
                           <button
                             type="button"
-                            className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+                            className="flex min-w-0 flex-1 items-center gap-1 hover:text-foreground transition-colors"
                             onClick={header.column.getToggleSortingHandler()}
                           >
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
+                            <span className="min-w-0 truncate">
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                            </span>
                             {header.column.getIsSorted() === "asc" ? (
-                              <ArrowUp className="w-3 h-3" />
+                              <ArrowUp className="w-3 h-3 shrink-0" />
                             ) : header.column.getIsSorted() === "desc" ? (
-                              <ArrowDown className="w-3 h-3" />
+                              <ArrowDown className="w-3 h-3 shrink-0" />
                             ) : (
-                              <ArrowUpDown className="w-3 h-3 opacity-40" />
+                              <ArrowUpDown className="w-3 h-3 shrink-0 opacity-40" />
                             )}
                           </button>
                         ) : (
-                          flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )
+                          <span className="min-w-0 flex-1 truncate">
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                          </span>
                         )}
                         {(canServerSort || header.column.getCanSort() || header.column.getCanHide()) && (
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
                               <button
                                 type="button"
-                                className="ml-1 inline-flex items-center hover:text-foreground transition-all opacity-0 group-hover/header:opacity-100"
+                                className="ml-1 inline-flex shrink-0 items-center hover:text-foreground transition-all opacity-0 group-hover/header:opacity-100"
                                 aria-label="Column actions"
                               >
                                 <ChevronDown className="w-3 h-3" />

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"