{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-score-breakdown",
  "type": "registry:component",
  "title": "Score breakdown",
  "description": "A verdict with its arithmetic shown: criteria, weights, and what pulled it down.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json",
    "https://r.assistant-ui.com/elements-range.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/score-breakdown.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/score-breakdown.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { mono, paper } from \"./surfaces\";\nimport { announced, pct, take } from \"../utils/range\";\n\nexport interface ScoreCriterion {\n  label: string;\n  score: number;\n  weight: number;\n  note?: string;\n}\n\nexport function ScoreBreakdown({\n  verdict,\n  total,\n  outOf,\n  criteria,\n  visibleCount,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"verdict\" | \"total\" | \"outOf\" | \"criteria\" | \"visibleCount\"\n> & {\n  verdict: string;\n  total: number;\n  outOf: number;\n  criteria: readonly ScoreCriterion[];\n  visibleCount: number;\n}) {\n  const ratio = outOf === 0 ? 0 : total / outOf;\n\n  return (\n    <div\n      data-slot=\"score-breakdown\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col gap-3 rounded-2xl p-4\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-baseline gap-2\">\n        <span className=\"text-2xl font-medium tracking-tight tabular-nums\">\n          {total.toFixed(1)}\n        </span>\n        <span className={cn(mono, \"text-foreground/30 tabular-nums\")}>\n          / {outOf}\n        </span>\n        <span\n          className={cn(\n            \"ms-auto rounded-full px-2 py-0.5 text-xs font-medium\",\n            ratio >= 0.75\n              ? \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\"\n              : ratio >= 0.5\n                ? \"bg-amber-500/12 text-amber-700 dark:text-amber-300\"\n                : \"bg-red-500/12 text-red-700 dark:text-red-300\",\n          )}\n        >\n          {verdict}\n        </span>\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        {take(criteria, visibleCount).map((criterion) => (\n          <div\n            key={criterion.label}\n            className=\"fade-in slide-in-from-bottom-1 animate-in fill-mode-both flex flex-col gap-1 duration-300\"\n          >\n            <div className=\"flex items-baseline gap-2\">\n              <span className=\"text-foreground/75 min-w-0 flex-1 truncate text-[13px]\">\n                {criterion.label}\n              </span>\n              <span className={cn(mono, \"text-foreground/25 shrink-0\")}>\n                ×{criterion.weight}\n              </span>\n              <span\n                className={cn(mono, \"text-foreground/55 shrink-0 tabular-nums\")}\n              >\n                {criterion.score.toFixed(1)}\n              </span>\n            </div>\n            <span\n              role=\"meter\"\n              aria-label={`${criterion.label} score`}\n              aria-valuemin={0}\n              aria-valuemax={100}\n              aria-valuenow={announced(pct(criterion.score, outOf))}\n              aria-valuetext={`${criterion.score.toFixed(1)} of ${outOf}`}\n              className=\"bg-foreground/[0.06] h-[3px] w-full overflow-hidden rounded-full\"\n            >\n              <span\n                className=\"block h-full rounded-full bg-blue-500 transition-[width] duration-500 motion-reduce:transition-none dark:bg-blue-400\"\n                style={{\n                  width: `${pct(criterion.score, outOf)}%`,\n                }}\n              />\n            </span>\n            {criterion.note && (\n              <span className=\"text-foreground/40 text-xs leading-relaxed break-words\">\n                {criterion.note}\n              </span>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}