{
  "name": "TemplateGallery",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TemplateGallery.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "templates",
  "elName": "New agent — start from a template",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#templates",
  "hasLiveDemo": false,
  "description": "The new-agent creation sheet's grid of `TemplateCard`s — the MagicBlocks\nstarter set, the workspace's saved templates, and the dashed Start-blank\ncard. Selection is consumer state (single-select).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "TemplateGallery",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TemplateGalleryProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { TemplateGallery } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "template-gallery"
  ],
  "examples": {
    "react": "<TemplateGallery>\n  <TemplateCard title=\"Mortgage lead qualifier\" selected />\n  <TemplateCard title=\"Start blank\" blank />\n</TemplateGallery>",
    "html": "<div class=\"template-gallery\" aria-label=\"Agent templates\"><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\">Winery club concierge</span><span class=\"template-card-badge\">MagicBlocks</span></div><p class=\"template-card-desc\">Welcomes members, pitches the new release, takes orders.</p><div class=\"template-card-shape\" aria-label=\"Journey shape\"><span class=\"template-card-block\">Hook<span class=\"template-card-arrow\" aria-hidden=\"true\">→</span></span><span class=\"template-card-block\">Secret deals<span class=\"template-card-arrow\" aria-hidden=\"true\">→</span></span><span class=\"template-card-block\">Pitch wines<span class=\"template-card-arrow\" aria-hidden=\"true\">→</span></span><span class=\"template-card-block\">Payment link</span></div><span class=\"template-card-meta\">4 key facts · 1 goal</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-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: var(--s-3);\n}"
  }
}