{
  "name": "Evaluations",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/Evaluations.tsx",
  "chapterTag": "17 AI Surfaces",
  "chapter": "17-app-ai.html",
  "sectionId": "evaluations",
  "elName": "Sage response — rubric scoring",
  "demoUrl": "https://brand.magicblocks.ai/components/17-app-ai#evaluations",
  "hasLiveDemo": false,
  "description": "Scored-rubric display for evaluating AI agent responses. A vertical\npanel of criteria — each carrying a name, score (0–10), pass / fail\n/ warn status, and an expandable notes block. Use to surface\nLLM-as-judge outputs, human-rubric scoring, or automated eval\nresults.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "Evaluations",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "EvaluationsProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "EvaluationCriterion",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "EvaluationsSummary",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "EvaluationStatus",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { Evaluations } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "criteria",
      "optional": false,
      "type": "EvaluationCriterion[]",
      "doc": "The scored rubric criteria — one row each."
    },
    {
      "name": "summary",
      "optional": true,
      "type": "EvaluationsSummary",
      "doc": "Optional summary header. Auto-derived from `criteria` when omitted."
    },
    {
      "name": "expandedIds",
      "optional": true,
      "type": "string[]",
      "doc": "Controlled expanded-row ids. Pair with `onExpandedChange`."
    },
    {
      "name": "defaultExpandedIds",
      "optional": true,
      "type": "string[]",
      "doc": "Uncontrolled initial expanded-row ids. Default `[]`."
    },
    {
      "name": "onExpandedChange",
      "optional": true,
      "type": "(ids: string[]) => void",
      "doc": "Fires whenever the expanded set changes."
    },
    {
      "name": "title",
      "optional": true,
      "type": "React.ReactNode",
      "doc": "Title shown next to the overall score in the summary header."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class merged via `cn()`. Caller wins over defaults."
    }
  ],
  "classesUsed": [
    "evaluations",
    "evaluations-row",
    "evaluations-row-caret",
    "evaluations-row-head",
    "evaluations-row-name",
    "evaluations-row-notes",
    "evaluations-row-score",
    "evaluations-row-status",
    "evaluations-summary",
    "evaluations-summary-counts",
    "evaluations-summary-score",
    "evaluations-summary-title",
    "title"
  ],
  "examples": {
    "react": "<Evaluations\n  title=\"Sage response — rubric scoring\"\n  defaultExpandedIds={[\"tone-match\"]}\n  criteria={[\n    { id: \"factual-accuracy\", name: \"Factual accuracy\", score: 8.5, status: \"pass\",\n      notes: \"All claims cross-reference KB articles within the last 90 days.\" },\n    { id: \"tone-match\",       name: \"Tone match\",       score: 7.2, status: \"warn\",\n      notes: \"Slightly more formal than the customer's prior message; consider warming up.\" },\n  ]}\n/>",
    "html": "<div class=\"evaluations\"><div class=\"evaluations-summary\"><p class=\"evaluations-summary-title\">Sage response &mdash; rubric scoring</p><div class=\"evaluations-summary-score\">8.2</div><div class=\"evaluations-summary-counts\"><span class=\"evaluations-summary-count is-pass\">3 pass</span><span class=\"evaluations-summary-count is-warn\">2 warn</span><span class=\"evaluations-summary-count is-fail\">0 fail</span></div></div><div class=\"evaluations-row\"><button type=\"button\" class=\"evaluations-row-head\" aria-expanded=\"false\" aria-controls=\"factual-accuracy-notes\"><span class=\"evaluations-row-status is-pass\" aria-hidden=\"true\"></span><span class=\"evaluations-row-name\">Factual accuracy</span><span class=\"evaluations-row-score\">8.5 / 10</span><svg class=\"evaluations-row-caret\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></button></div><div class=\"evaluations-row\"><button type=\"button\" class=\"evaluations-row-head\" aria-expanded=\"true\" aria-controls=\"tone-match-notes\"><span class=\"evaluations-row-status is-warn\" aria-hidden=\"true\"></span><span class=\"evaluations-row-name\">Tone match</span><span class=\"evaluations-row-score\">7.2 / 10</span><svg class=\"evaluations-row-caret\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></button><p id=\"tone-match-notes\" class=\"evaluations-row-notes\">Slightly more formal than the customer&apos;s prior message; consider warming up.</p></div><div class=\"evaluations-row\"><button type=\"button\" class=\"evaluations-row-head\" aria-expanded=\"false\" aria-controls=\"completeness-notes\"><span class=\"evaluations-row-status is-pass\" aria-hidden=\"true\"></span><span class=\"evaluations-row-name\">Completeness</span><span class=\"evaluations-row-score\">9.1 / 10</span><svg class=\"evaluations-row-caret\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></button></div><div class=\"evaluations-row\"><button type=\"button\" class=\"evaluations-row-head\" aria-expanded=\"false\" aria-controls=\"safety-notes\"><span class=\"evaluations-row-status is-pass\" aria-hidden=\"true\"></span><span class=\"evaluations-row-name\">Safety</span><span class=\"evaluations-row-score\">10 / 10</span><svg class=\"evaluations-row-caret\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></button></div><div class=\"evaluations-row\"><button type=\"button\" class=\"evaluations-row-head\" aria-expanded=\"false\" aria-controls=\"brand-voice-notes\"><span class=\"evaluations-row-status is-warn\" aria-hidden=\"true\"></span><span class=\"evaluations-row-name\">Brand voice</span><span class=\"evaluations-row-score\">6 / 10</span><svg class=\"evaluations-row-caret\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></button></div></div>",
    "css": ".evaluations {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n}\n\n.evaluations-row { border-bottom: 1px solid var(--hair); }\n\n.evaluations-row-caret {\n  width: 16px; height: 16px; color: var(--fg-faint);\n  transition: transform 0.15s ease;\n}\n\n.evaluations-row-head {\n  display: grid; grid-template-columns: auto 1fr auto auto;\n  gap: var(--s-3); align-items: center;\n  padding: var(--s-3) var(--s-4);\n  background: transparent; border: 0; width: 100%;\n  text-align: left; cursor: pointer;\n  font: 500 13px/1.4 var(--f-body); color: var(--fg);\n  min-height: 44px;\n}\n\n.evaluations-row-name { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.evaluations-row-notes {\n  padding: 0 var(--s-4) var(--s-3) var(--s-4);\n  margin: 0;\n  font: 400 13px/1.5 var(--f-body); color: var(--fg-soft);\n}\n\n.evaluations-row-score { font: 600 13px/1 var(--f-mono); color: var(--fg); font-feature-settings: \"tnum\"; }\n\n.evaluations-row-status {\n  width: 8px; height: 8px; border-radius: 50%;\n}\n\n.evaluations-summary {\n  display: grid; grid-template-columns: 1fr auto;\n  gap: var(--s-3);\n  padding: var(--s-4);\n  background: var(--bg-sunk);\n  border-bottom: 1px solid var(--hair);\n}\n\n.evaluations-summary-counts {\n  display: flex; gap: var(--s-3);\n  font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em;\n  color: var(--fg-soft);\n}\n\n.evaluations-summary-score {\n  font: 600 22px/1 var(--f-display); color: var(--fg);\n  font-feature-settings: \"tnum\";\n}\n\n.evaluations-summary-title {\n  font: 600 14px/1.3 var(--f-body); color: var(--fg);\n  margin: 0;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}