{
  "name": "LeadsToStrip",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/LeadsToStrip.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "journey-studio",
  "elName": "LeadsToStrip",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#journey-studio",
  "hasLiveDemo": false,
  "description": "The block editor's orientation strip — \"Leads to → Discovery, once every\nkey fact here is collected\" — with the reverse half (\"Reached from …\")\nrevealed on hover or keyboard focus, so a block tells both halves of its\nstory. A block with no local route is never a dead end: anytime actions\nstill apply, and the strip says so.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "LeadsToStrip",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "LeadsToStripProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { LeadsToStrip } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "to",
      "optional": true,
      "type": "ReactNode",
      "doc": "Destination block name, e.g. \"Discovery\". Omit when the block has no local route yet."
    },
    {
      "name": "rule",
      "optional": true,
      "type": "ReactNode",
      "doc": "The transition's rule in plain language, e.g. \"once every key fact here is collected\"."
    },
    {
      "name": "reachedFrom",
      "optional": true,
      "type": "ReactNode",
      "doc": "Blocks + anytime actions that can land a contact here — revealed on hover or keyboard focus."
    },
    {
      "name": "action",
      "optional": true,
      "type": "ReactNode",
      "doc": "Trailing action slot — typically an \"Edit transitions →\" ghost button."
    }
  ],
  "classesUsed": [
    "ab-leads",
    "ab-leads-action",
    "ab-leads-label",
    "ab-leads-reached",
    "ab-leads-row",
    "ab-leads-rule",
    "ab-leads-target",
    "title"
  ],
  "examples": {
    "react": "<LeadsToStrip to=\"Discovery\" rule=\"once every key fact here is collected\" reachedFrom=\"Greeting · 2 anytime actions\" />",
    "html": "<div style=\"display:grid;gap:10px\"><div class=\"ab-leads\" tabindex=\"0\"><div class=\"ab-leads-row\"><span class=\"ab-leads-label\">Leads to</span><span class=\"ab-leads-target\">→ Discovery</span><span class=\"ab-leads-rule\">once every key fact here is collected</span><span class=\"ab-leads-action\"><button type=\"button\" class=\"ab-h-pill\">Edit transitions →</button></span></div><div class=\"ab-leads-reached\"><span class=\"ab-leads-label\">Reached from</span><span class=\"ab-leads-rule\">2 anytime actions</span></div></div><div class=\"ab-leads\"><div class=\"ab-leads-row\"><span class=\"ab-leads-label\">Leads to</span><span class=\"ab-leads-target is-muted\">no local route yet — anytime actions still apply</span></div></div></div>",
    "css": ".ab-leads {\n  background: var(--warm-1);\n  border: 1px solid var(--hair-soft);\n  border-radius: var(--r-sm);\n  padding: var(--s-2) var(--s-3);\n  font-size: 0.84rem;\n}\n\n.ab-leads-action { margin-left: auto; }\n\n.ab-leads-label {\n  font: 600 0.7rem/1.4 var(--f-mono);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--fg-faint);\n  white-space: nowrap;\n}\n\n.ab-leads-reached {\n  display: none;\n  align-items: baseline;\n  gap: var(--s-2);\n  margin-top: var(--s-1);\n  padding-top: var(--s-1);\n  border-top: 1px solid var(--hair-soft);\n}\n\n.ab-leads-row { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }\n\n.ab-leads-rule { color: var(--fg-soft); }\n\n.ab-leads-target { font-weight: 600; color: var(--fg); }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}