{
  "name": "RailItem",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RailItem.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "journey-studio",
  "elName": "Journey rail — redesigned",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#journey-studio",
  "hasLiveDemo": false,
  "description": "A leaf navigation row in the builder rail — a top-level entry or a child\nunder a `RailGroup`. Three-column grid: glyph · label · trailing count.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "RailItem",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RailItemProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { RailItem } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Leading glyph — rendered in `.ab-rail-glyph`, hidden from a11y."
    },
    {
      "name": "count",
      "optional": true,
      "type": "number",
      "doc": "Optional trailing count chip."
    },
    {
      "name": "active",
      "optional": true,
      "type": "boolean",
      "doc": "Active (selected) styling + `aria-current=\"page\"`."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "The item label."
    }
  ],
  "classesUsed": [
    "ab-rail-item",
    "page"
  ],
  "examples": {
    "react": "<RailItem icon={<PersonaIcon />} active>Persona</RailItem>\n<RailItem icon={<KeyFactIcon />} count={2}>Key Facts</RailItem>",
    "html": "<div style=\"max-width:280px;display:grid;gap:10px\">\n<nav class=\"tabs tabs-link\" aria-label=\"Journey view\" style=\"padding:0\"><a class=\"tab active\" aria-current=\"page\" href=\"#\">List</a><a class=\"tab\" href=\"#\">Map</a></nav>\n<div style=\"display:grid;gap:4px\">\n<div role=\"button\" tabindex=\"0\" class=\"ab-rail-block is-active\"><span class=\"ab-rail-block-handle\" aria-hidden=\"true\"><svg viewBox=\"0 0 8 14\" fill=\"currentColor\"><circle cx=\"2\" cy=\"3\" r=\"1\"></circle><circle cx=\"6\" cy=\"3\" r=\"1\"></circle><circle cx=\"2\" cy=\"7\" r=\"1\"></circle><circle cx=\"6\" cy=\"7\" r=\"1\"></circle><circle cx=\"2\" cy=\"11\" r=\"1\"></circle><circle cx=\"6\" cy=\"11\" r=\"1\"></circle></svg></span><span class=\"ab-rail-block-name\">Greeting</span><span class=\"ab-rail-block-start\">Start</span><span class=\"ab-rail-block-stats\"><span class=\"ab-rail-block-stat\" title=\"Key facts\">▤ 2</span><span class=\"ab-rail-block-stat\" title=\"Actions\">⚡ 1</span></span><button type=\"button\" class=\"ab-rail-block-menu\" aria-label=\"Block menu\">⋯</button></div>\n<div role=\"button\" tabindex=\"0\" class=\"ab-rail-block\"><span class=\"ab-rail-block-handle\" aria-hidden=\"true\"><svg viewBox=\"0 0 8 14\" fill=\"currentColor\"><circle cx=\"2\" cy=\"3\" r=\"1\"></circle><circle cx=\"6\" cy=\"3\" r=\"1\"></circle><circle cx=\"2\" cy=\"7\" r=\"1\"></circle><circle cx=\"6\" cy=\"7\" r=\"1\"></circle><circle cx=\"2\" cy=\"11\" r=\"1\"></circle><circle cx=\"6\" cy=\"11\" r=\"1\"></circle></svg></span><span class=\"ab-rail-block-name\">Discovery</span><span class=\"ab-rail-block-stats\"><span class=\"ab-rail-block-stat\" title=\"Key facts\">▤ 3</span><span class=\"ab-rail-block-stat\" title=\"Actions\">⚡ 2</span></span><button type=\"button\" class=\"ab-rail-block-menu\" aria-label=\"Block menu\">⋯</button></div>\n<div role=\"button\" tabindex=\"0\" class=\"ab-rail-block\"><span class=\"ab-rail-block-handle\" aria-hidden=\"true\"><svg viewBox=\"0 0 8 14\" fill=\"currentColor\"><circle cx=\"2\" cy=\"3\" r=\"1\"></circle><circle cx=\"6\" cy=\"3\" r=\"1\"></circle><circle cx=\"2\" cy=\"7\" r=\"1\"></circle><circle cx=\"6\" cy=\"7\" r=\"1\"></circle><circle cx=\"2\" cy=\"11\" r=\"1\"></circle><circle cx=\"6\" cy=\"11\" r=\"1\"></circle></svg></span><span class=\"ab-rail-block-name\">Refinance</span><span class=\"ab-rail-block-hint\">0 jobs · needs work</span><button type=\"button\" class=\"ab-rail-block-menu\" aria-label=\"Block menu\">⋯</button></div>\n</div>\n<div style=\"display:grid;gap:2px\">\n<button type=\"button\" class=\"ab-rail-item\"><span class=\"ab-rail-glyph\" aria-hidden=\"true\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6.25\"></circle><path d=\"M9 6v6M6 9h6\"></path></svg></span>Add block<span></span></button>\n<button type=\"button\" class=\"ab-rail-item\"><span class=\"ab-rail-glyph\" aria-hidden=\"true\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M9 5v9.5\"></path><path d=\"M9 5C7.5 4 5.5 3.5 3 3.5v9.75c2.5 0 4.5.5 6 1.25\"></path><path d=\"M9 5c1.5-1 3.5-1.5 6-1.5v9.75c-2.5 0-4.5.5-6 1.25\"></path></svg></span>Block library<span></span></button>\n</div>\n<hr style=\"border:0;border-top:1px solid var(--hair);margin:2px 0\" />\n<div style=\"display:grid;gap:2px\">\n<button type=\"button\" class=\"ab-rail-item\"><span class=\"ab-rail-glyph\" aria-hidden=\"true\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2.75 5.5 4 6.75 6.5 4.25\"></path><path d=\"M2.75 12 4 13.25 6.5 10.75\"></path><path d=\"M9.25 5.25h6\"></path><path d=\"M9.25 11.75h6\"></path></svg></span>Key facts<span class=\"ab-rail-count\">7</span></button>\n<button type=\"button\" class=\"ab-rail-item\"><span class=\"ab-rail-glyph\" aria-hidden=\"true\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 2L4 10h4l-1.5 6 6-8H8.5L10 2Z\"></path></svg></span>Anytime actions<span class=\"ab-rail-count\">24</span></button>\n</div>\n</div>",
    "css": ".ab-rail-item {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center; gap: 8px;\n  padding: 7px var(--s-3); border-radius: 6px;\n  font: 500 13px/1 var(--f-body); color: var(--fg-soft);\n  text-decoration: none; cursor: pointer; border: 0;\n  background: transparent; text-align: left;\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.page {\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 var(--s-7);\n}"
  }
}