{
  "name": "HandoverOutcome",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/HandoverOutcome.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "handover-outcome",
  "elName": "HandoverOutcome",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#handover-outcome",
  "hasLiveDemo": false,
  "description": "What happened at the end of a session — the webhooks that fired and where the\ncontact was handed (a journey block or a human). Renders as a summary card list,\nand the same `.ho-row`s double as terminal activity events in a transcript.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "HandoverOutcome",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "HandoverOutcomeProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "OutcomeEvent",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { HandoverOutcome } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "events",
      "optional": false,
      "type": "OutcomeEvent[]",
      "doc": ""
    },
    {
      "name": "emptyLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Shown when there are no events."
    }
  ],
  "classesUsed": [
    "handover-outcome",
    "ho-body",
    "ho-detail",
    "ho-empty",
    "ho-ic",
    "ho-label",
    "ho-row",
    "ho-status"
  ],
  "examples": {
    "react": "<HandoverOutcome events={[\n  { id: \"w1\", kind: \"webhook\", label: \"CRM lead created\", detail: \"POST crm.acme.com/leads\", status: \"200\" },\n  { id: \"h1\", kind: \"handover\", label: \"Handed to journey block\", detail: \"Post-demo nurture\" },\n]} />",
    "html": "<div class=\"handover-outcome\">\n  <div class=\"ho-row\" data-kind=\"webhook\"><span class=\"ho-ic\" aria-hidden=\"true\"></span><div class=\"ho-body\"><span class=\"ho-label\">CRM lead created</span><span class=\"ho-detail\">POST crm.acme.com/leads</span></div><span class=\"ho-status\">200</span></div>\n  <div class=\"ho-row\" data-kind=\"webhook\"><span class=\"ho-ic\" aria-hidden=\"true\"></span><div class=\"ho-body\"><span class=\"ho-label\">Slack notified</span><span class=\"ho-detail\">#sales</span></div><span class=\"ho-status\">sent</span></div>\n  <div class=\"ho-row\" data-kind=\"handover\"><span class=\"ho-ic\" aria-hidden=\"true\"></span><div class=\"ho-body\"><span class=\"ho-label\">Handed to journey block</span><span class=\"ho-detail\">Post-demo nurture</span></div></div>\n</div>",
    "css": ".handover-outcome { display: flex; flex-direction: column; }\n\n.ho-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n\n.ho-detail { font: 500 11px/1.3 var(--f-mono); color: var(--fg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ho-empty { font: 400 13px/1.5 var(--f-body); color: var(--fg-faint); margin: 0; padding: var(--s-3) 0; }\n\n.ho-ic { width: 26px; height: 26px; border-radius: var(--r-sm); flex: none; background: var(--info-soft); position: relative; }\n\n.ho-label { font: 600 13px/1.35 var(--f-body); color: var(--fg); }\n\n.ho-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--hair-soft); }\n\n.ho-status { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--success-text); flex: none; }"
  }
}