{
  "name": "EngagementScore",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/EngagementScore.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "engagement-score",
  "elName": "EngagementScore",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#engagement-score",
  "hasLiveDemo": false,
  "description": "A contact / record engagement score as a drop-in molecule: a `<ScoreRing>`\npaired with a `<Sparkline>` trend and an optional \"computed from…\" basis line.\nComposes the kit's existing ring + spark primitives (chapters 7.15 / 7.17).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "EngagementScore",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "EngagementScoreProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { EngagementScore } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "score",
      "optional": false,
      "type": "number",
      "doc": "Score 0–100."
    },
    {
      "name": "series",
      "optional": true,
      "type": "number[]",
      "doc": "Trend series for the sparkline."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Caption under the trend (\"Sentiment · last 14 days\")."
    },
    {
      "name": "basis",
      "optional": true,
      "type": "ReactNode",
      "doc": "How the score is computed — a quiet basis line."
    },
    {
      "name": "tone",
      "optional": true,
      "type": "\"success\" | \"warning\" | \"accent\"",
      "doc": "Colour intent: `success` (green), `warning` (amber), `accent` (pink)."
    }
  ],
  "classesUsed": [
    "card",
    "eng-basis",
    "eng-label",
    "eng-main",
    "eng-trend",
    "engagement-score"
  ],
  "examples": {
    "react": "<EngagementScore\n  score={82}\n  series={[74, 73, 76, 79, 80, 82, 82]}\n  label=\"Sentiment · last 14 days\"\n  basis=\"Computed from sentiment · recency · goal completion across 3 sessions\"\n/>",
    "html": "<div class=\"engagement-score\" style=\"max-width:320px;\">\n  <div class=\"eng-main\">\n    <span class=\"score-ring score-ring--lg\" data-band=\"high\" aria-label=\"Score 82\"><svg viewBox=\"0 0 36 36\"><circle class=\"track\" cx=\"18\" cy=\"18\" r=\"15\"></circle><circle class=\"fill\" cx=\"18\" cy=\"18\" r=\"15\" stroke-dasharray=\"94.2\" stroke-dashoffset=\"17.0\"></circle></svg><span class=\"v\">82</span></span>\n    <div class=\"eng-trend\">\n      <span class=\"spark spark--card\" data-risk=\"low\"><svg viewBox=\"0 0 64 12\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><polygon class=\"area\" points=\"0,12 0,11 11,11.5 21,9 32,6 43,5 53,2 64,2 64,12\"></polygon><polyline class=\"line\" points=\"0,11 11,11.5 21,9 32,6 43,5 53,2 64,2\" fill=\"none\"></polyline><circle class=\"end-dot\" cx=\"64\" cy=\"2\" r=\"1.6\"></circle></svg></span>\n      <span class=\"eng-label\">Sentiment &middot; last 14 days</span>\n    </div>\n  </div>\n  <div class=\"eng-basis\">Computed from sentiment &middot; recency &middot; goal completion across 3 sessions</div>\n</div>",
    "css": ".card {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  padding: var(--s-6) var(--s-6);\n  display: flex; flex-direction: column; gap: var(--s-2);\n  /* v1.9.0 (R6-2): cards now ship with `--sh-1` by default. On a same-\n     colour page bg (the typical CRM detail-page setup) cards visually\n     disappear with hairline + radius alone. Adding the small drop\n     shadow gives the \"card feels like a card\" treatment that every\n     product app reaches for. Marketing-grid contexts that explicitly\n     want flat hairline-only cards opt out via `<Card flat>` (or\n     `.card-flat`). */\n  box-shadow: var(--sh-1);\n  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);\n}\n\n.eng-basis { font: 500 11px/1.5 var(--f-body); color: var(--fg-faint); border-top: 1px solid var(--hair-soft); padding-top: var(--s-2); }\n\n.eng-label { font: 500 11px/1 var(--f-body); color: var(--fg-faint); }\n\n.eng-main { display: flex; align-items: center; gap: var(--s-4); }\n\n.eng-trend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }\n\n.engagement-score { display: flex; flex-direction: column; gap: var(--s-3); }"
  }
}