{
  "name": "KeyFactGrid",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/KeyFactGrid.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "key-fact-grid",
  "elName": "KeyFactGrid",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#key-fact-grid",
  "hasLiveDemo": false,
  "description": "Structured facts an agent captured about a contact, each with provenance. The\nkeys adapt to any industry — nothing hard-coded. Pairs with `<MemoryList>` on\nthe Memories surface (memories lead, key facts as the side panel).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "KeyFactGrid",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "KeyFactGridProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "KeyFact",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { KeyFactGrid } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "facts",
      "optional": false,
      "type": "KeyFact[]",
      "doc": ""
    },
    {
      "name": "layout",
      "optional": true,
      "type": "\"grid\" | \"list\"",
      "doc": "`grid` = key·value·source columns (a bordered card); `list` = compact stacked rows for a sidebar."
    },
    {
      "name": "emptyLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Shown when `facts` is empty."
    }
  ],
  "classesUsed": [
    "key-fact-grid",
    "kfg-empty",
    "kfg-key",
    "kfg-row",
    "kfg-src",
    "kfg-val"
  ],
  "examples": {
    "react": "<KeyFactGrid facts={[{ id: \"f1\", label: \"credit_score\", value: \"760\", source: \"CREFCO · today\" }]} />",
    "html": "<div class=\"key-fact-grid\" data-layout=\"grid\">\n  <div class=\"kfg-row\"><span class=\"kfg-key\">loan_purpose</span><span class=\"kfg-val\">Refinance</span><span class=\"kfg-src\">CREFCO &middot; today</span></div>\n  <div class=\"kfg-row\"><span class=\"kfg-key\">credit_score</span><span class=\"kfg-val\">760</span><span class=\"kfg-src\">CREFCO &middot; today</span></div>\n  <div class=\"kfg-row\"><span class=\"kfg-key\">employment</span><span class=\"kfg-val\">W2 &mdash; 4 yrs</span><span class=\"kfg-src\">Pre-Qual &middot; 3d</span></div>\n</div>",
    "css": ".key-fact-grid { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-paper); }\n\n.kfg-empty { font: 400 13px/1.5 var(--f-body); color: var(--fg-faint); margin: 0; padding: var(--s-3) var(--s-4); }\n\n.kfg-key { font: 600 12px/1.3 var(--f-mono); color: var(--fg-dim); }\n\n.kfg-row { display: grid; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hair-soft); }\n\n.kfg-src { font: 500 10px/1 var(--f-mono); color: var(--fg-faint); white-space: nowrap; }\n\n.kfg-val { font: 600 13px/1.35 var(--f-body); color: var(--fg); }"
  }
}