{
  "name": "TemplateCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TemplateCard.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "templates",
  "elName": "TemplateCard",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#templates",
  "hasLiveDemo": false,
  "description": "One template in the new-agent gallery — name, one-line pitch, the journey\nshape as a mini block chain, and what it ships with. Instantiating a\ntemplate copies it; editing the new agent never touches the template.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "TemplateCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TemplateCardProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { TemplateCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Template name, e.g. \"Mortgage lead qualifier\"."
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": "One-line pitch."
    },
    {
      "name": "blocks",
      "optional": true,
      "type": "string[]",
      "doc": "Journey shape — block names in order, rendered as a mini chain."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "What it ships with, e.g. \"6 key facts · 2 goals\"."
    },
    {
      "name": "badge",
      "optional": true,
      "type": "ReactNode",
      "doc": "Source badge, e.g. \"MagicBlocks\" or \"Yours\"."
    },
    {
      "name": "selected",
      "optional": true,
      "type": "boolean",
      "doc": "Selected styling (the gallery is single-select; selection is consumer state)."
    },
    {
      "name": "blank",
      "optional": true,
      "type": "boolean",
      "doc": "Render as the dashed \"Start blank\" card."
    },
    {
      "name": "onSelect",
      "optional": true,
      "type": "() => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "template-card",
    "template-card-arrow",
    "template-card-badge",
    "template-card-block",
    "template-card-desc",
    "template-card-head",
    "template-card-meta",
    "template-card-shape",
    "template-card-title",
    "title"
  ],
  "examples": {
    "react": "<TemplateCard\n  title=\"Mortgage lead qualifier\"\n  description=\"Qualifies, answers objections, books a call.\"\n  blocks={[\"Greeting\", \"Qualify\", \"Pitch\", \"Booking\"]}\n  meta=\"6 key facts · 2 goals\"\n  badge=\"MagicBlocks\"\n  selected\n/>",
    "html": "<div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:stretch\"><div role=\"button\" tabindex=\"0\" class=\"template-card is-selected\"><div class=\"template-card-head\"><span class=\"template-card-title\">Mortgage lead qualifier</span><span class=\"template-card-badge\">MagicBlocks</span></div><p class=\"template-card-desc\">Qualifies, answers objections, books a call.</p><div class=\"template-card-shape\" aria-label=\"Journey shape\"><span class=\"template-card-block\">Greeting<span class=\"template-card-arrow\" aria-hidden=\"true\">→</span></span><span class=\"template-card-block\">Qualify<span class=\"template-card-arrow\" aria-hidden=\"true\">→</span></span><span class=\"template-card-block\">Pitch<span class=\"template-card-arrow\" aria-hidden=\"true\">→</span></span><span class=\"template-card-block\">Booking</span></div><span class=\"template-card-meta\">6 key facts · 2 goals</span></div><div role=\"button\" tabindex=\"0\" class=\"template-card\"><div class=\"template-card-head\"><span class=\"template-card-title\">Acme Assistant copy</span><span class=\"template-card-badge\">Yours</span></div><p class=\"template-card-desc\">Saved from your live agent last week.</p><div class=\"template-card-shape\" aria-label=\"Journey shape\"><span class=\"template-card-block\">Greeting<span class=\"template-card-arrow\" aria-hidden=\"true\">→</span></span><span class=\"template-card-block\">Discovery<span class=\"template-card-arrow\" aria-hidden=\"true\">→</span></span><span class=\"template-card-block\">Handoff</span></div><span class=\"template-card-meta\">7 key facts · 1 goal</span></div><div role=\"button\" tabindex=\"0\" class=\"template-card is-blank\"><div class=\"template-card-head\"><span class=\"template-card-title\">Start blank</span></div></div></div>",
    "css": ".template-card {\n  background: var(--paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  padding: var(--s-3) var(--s-4);\n  display: flex; flex-direction: column; gap: var(--s-2);\n  cursor: pointer;\n  text-align: left;\n}\n\n.template-card-arrow { color: var(--fg-faint); }\n\n.template-card-badge {\n  font: 600 9px/1.5 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;\n  color: var(--accent-text-strong); background: var(--accent-soft);\n  border-radius: 999px; padding: 1px 7px; white-space: nowrap;\n}\n\n.template-card-block {\n  font: 500 10px/1.6 var(--f-mono); color: var(--fg);\n  background: var(--warm-1); border: 1px solid var(--hair-soft);\n  border-radius: 4px; padding: 0 5px;\n  display: inline-flex; align-items: center; gap: 2px;\n}\n\n.template-card-desc { margin: 0; font: 400 0.8rem/1.45 var(--f-body); color: var(--fg-soft); }\n\n.template-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }\n\n.template-card-meta { font: 400 0.74rem/1.4 var(--f-body); color: var(--fg-faint); }\n\n.template-card-shape { display: flex; flex-wrap: wrap; gap: 2px; }\n\n.template-card-title { font: 600 0.9rem/1.3 var(--f-body); color: var(--fg); }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}