{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "eval-matrix",
  "title": "Eval Matrix",
  "description": "Models by tasks, with cells shaded by score.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/eval-matrix.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype EvalMatrixProps = {\n  /** Names the table for screen readers. */\n  label: string\n  /** Models, down the left. */\n  rows: string[]\n  /** Tasks, across the top. */\n  cols: string[]\n  /** Scores, one array per row. */\n  values: number[][]\n  /** The scores that map to no accent and full accent. */\n  domain?: [number, number]\n  className?: string\n}\n\nexport function scoreShare(value: number, [low, high]: [number, number]) {\n  return Math.round(Math.min(1, Math.max(0, (value - low) / (high - low))) * 100)\n}\n\nexport function EvalMatrix({ label, rows, cols, values, domain = [0.6, 1], className }: EvalMatrixProps) {\n  return (\n    <div tabIndex={0} role=\"region\" aria-label={label} className={cn(\"spotcheck-focus overflow-x-auto font-(family-name:--f-body)\", className)}>\n      <table className=\"w-full min-w-[420px] border-collapse font-(family-name:--f-mono) text-xs tabular-nums\">\n        <caption className=\"sr-only\">{label}</caption>\n        <thead>\n          <tr>\n            <td />\n            {cols.map((col) => (\n              <th key={col} scope=\"col\" className=\"spotcheck-label px-2 py-1.5 text-right font-medium\">\n                {col}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, rowIndex) => (\n            <tr key={row}>\n              <th scope=\"row\" className=\"px-2 py-1 text-left font-semibold whitespace-nowrap\">\n                {row}\n              </th>\n              {cols.map((col, colIndex) => {\n                const value = values[rowIndex]?.[colIndex] ?? 0\n                return (\n                  <td\n                    key={col}\n                    className=\"border-paper border-[1.5px] p-0 text-right\"\n                    style={{ background: `color-mix(in srgb, var(--accent-ink) ${scoreShare(value, domain)}%, var(--wash))` }}\n                  >\n                    {/* A paper chip keeps the digits readable on any shade, in any skin. */}\n                    <div className=\"px-2 pt-3.5 pb-1\">\n                      <span className=\"bg-paper px-1\">{value.toFixed(2)}</span>\n                    </div>\n                  </td>\n                )\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}