{
  "name": "SourcePassage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SourcePassage.tsx",
  "chapterTag": "20 Explainability",
  "chapter": "20-explainability.html",
  "sectionId": "source-passage",
  "elName": "SourcePassage",
  "demoUrl": "https://brand.magicblocks.ai/components/20-explainability#source-passage",
  "hasLiveDemo": false,
  "description": "The kit's source / evidence / citation passage — a quoted block with a cite\nline (source · relevance · meta · optional link). Highlight the matched span\nwith `<mark>`. Used as the loaded body of a `<SourceCard>` (what a\n`<Trace resolveSource>` resolver typically returns) and standalone in\naudit / RAG / compliance surfaces. Supersedes `<EvidenceQuote>`. v3.4.0.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SourcePassage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SourcePassageProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SourcePassage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "The quoted passage. Wrap the relevant span in `<mark>` to highlight it."
    },
    {
      "name": "cite",
      "optional": true,
      "type": "ReactNode",
      "doc": "Source caption — `\"Security policy v2 · §4.1\"`, `\"From your privacy policy\"`."
    },
    {
      "name": "relevance",
      "optional": true,
      "type": "number | string",
      "doc": "Relevance / similarity score, rendered as `\"0.91 sim\"`."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Extra cite meta — `\"chunk 12 / 48\"`, `\"updated 2026-05\"`."
    },
    {
      "name": "url",
      "optional": true,
      "type": "string",
      "doc": "Optional source URL → an `\"Open ↗\"` link opening in a new tab."
    },
    {
      "name": "linkLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Link label. Default `\"Open ↗\"`."
    },
    {
      "name": "tone",
      "optional": true,
      "type": "TraceEventTone",
      "doc": "Accent tone. Default `neutral`."
    }
  ],
  "classesUsed": [
    "source-passage",
    "source-passage-body",
    "source-passage-cite",
    "source-passage-link",
    "source-passage-meta",
    "source-passage-relevance",
    "source-passage-source"
  ],
  "examples": {
    "react": "<SourcePassage cite=\"Security policy v2 · §4.1\" relevance={0.91} meta=\"chunk 12 / 48\">\n  “Rate-limit password attempts to <mark>5 per 15 minutes</mark>.”\n</SourcePassage>",
    "html": null,
    "css": ".source-passage {\n  margin: 0;\n  padding: var(--s-3) var(--s-5);\n  border-left: 3px solid var(--trace-tone, var(--accent));\n  background: var(--bg-warm);\n  border-radius: 0 var(--r-md) var(--r-md) 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n\n.source-passage-body {\n  font: 400 13.5px/1.55 var(--f-body);\n  color: var(--fg);\n  margin: 0;\n}\n\n.source-passage-cite {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--s-3);\n  font: 500 11px/1 var(--f-mono);\n  color: var(--fg-dim);\n}\n\n.source-passage-link {\n  color: var(--accent-text);\n  text-decoration: none;\n  border-radius: var(--r-xs);\n  margin-left: auto;\n}\n\n.source-passage-meta { color: var(--fg-faint); }\n\n.source-passage-relevance { color: var(--fg-faint); }\n\n.source-passage-source { display: inline-flex; align-items: center; }"
  }
}