{
  "name": "BlockLibraryDrawer",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/BlockLibraryDrawer.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "templates",
  "elName": "Block library",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#templates",
  "hasLiveDemo": false,
  "description": "The journey rail's block-template drawer — the MagicBlocks starter set\n(Greeting, Qualify, Objection handling, Pricing, Booking, Re-engage,\nHuman handover) plus the workspace's saved blocks (\"Save to block library\"\non any block's menu). Insert copies the block into the journey; nothing is\nlinked, so editing an inserted block never haunts another journey.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "BlockLibraryDrawer",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "BlockLibraryDrawerProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "BlockTemplate",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { BlockLibraryDrawer } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "templates",
      "optional": false,
      "type": "BlockTemplate[]",
      "doc": ""
    },
    {
      "name": "onInsert",
      "optional": true,
      "type": "(id: string) => void",
      "doc": "Fires with the template id; insert copies the block into the journey."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Drawer heading. Defaults to \"Block library\"."
    }
  ],
  "classesUsed": [
    "block-tpl-group",
    "block-tpl-group-label",
    "block-tpl-insert",
    "block-tpl-list",
    "block-tpl-name",
    "block-tpl-row",
    "block-tpl-sum",
    "block-tpl-text",
    "title"
  ],
  "examples": {
    "react": "<BlockLibraryDrawer\n  open={open}\n  onOpenChange={setOpen}\n  templates={[{ id: \"qualify\", name: \"Qualify\", summary: \"3 jobs · 3 key facts · transition placeholder\" }]}\n  onInsert={(id) => insertBlock(id)}\n/>",
    "html": "<div style=\"max-width:360px;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md);padding:var(--s-4)\">\n<div class=\"block-tpl-list\">\n  <div class=\"block-tpl-group\">\n    <span class=\"block-tpl-group-label\">MagicBlocks blocks</span>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Greeting</span><span class=\"block-tpl-sum\">1 job &middot; 2 key facts &middot; transition placeholder</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Qualify</span><span class=\"block-tpl-sum\">3 jobs &middot; 3 key facts &middot; transition placeholder</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Objection handling</span><span class=\"block-tpl-sum\">2 jobs &middot; 1 key fact &middot; transition placeholder</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Pricing</span><span class=\"block-tpl-sum\">2 jobs &middot; transition placeholder</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Booking</span><span class=\"block-tpl-sum\">1 job &middot; 1 key fact &middot; calendar action stub</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Re-engage</span><span class=\"block-tpl-sum\">1 job &middot; idle-nudge anytime action</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Human handover</span><span class=\"block-tpl-sum\">1 job &middot; takeover action stub</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n  </div>\n  <div class=\"block-tpl-group\">\n    <span class=\"block-tpl-group-label\">Your blocks</span>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Warm close</span><span class=\"block-tpl-sum\">Saved from Acme Assistant</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n    <div class=\"block-tpl-row\"><span class=\"block-tpl-text\"><span class=\"block-tpl-name\">Secret deals</span><span class=\"block-tpl-sum\">Saved from Winery Example</span></span><button type=\"button\" class=\"block-tpl-insert\">Insert</button></div>\n  </div>\n</div>\n</div>",
    "css": ".block-tpl-group { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.block-tpl-group-label {\n  font: 600 0.7rem/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;\n  color: var(--fg-faint);\n}\n\n.block-tpl-insert {\n  margin-left: auto; flex-shrink: 0;\n  padding: 4px 12px; border-radius: var(--r-pill);\n  font: 600 12px/1 var(--f-body); cursor: pointer;\n  background: var(--bg-paper); color: var(--fg); border: 1px solid var(--hair);\n}\n\n.block-tpl-list { display: flex; flex-direction: column; gap: var(--s-4); }\n\n.block-tpl-name { font: 600 0.86rem/1.3 var(--f-body); color: var(--fg); }\n\n.block-tpl-row {\n  display: flex; align-items: center; gap: var(--s-3);\n  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sm);\n  padding: var(--s-2) var(--s-3);\n}\n\n.block-tpl-sum { font: 400 0.76rem/1.4 var(--f-body); color: var(--fg-soft); }\n\n.block-tpl-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}