{
  "name": "BuilderRail",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/BuilderRail.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": "The agent builder's left rail — a scroll container for nested\n`RailGroup`s, leaf `RailItem`s, and the sortable Journey `RailBlockItem`s.\nPass it to `AgentBuilderShell`'s `rail` slot.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "BuilderRail",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "BuilderRailProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { BuilderRail } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
      "doc": "Required — labels the rail `<aside>` for assistive tech."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "Rail body — `RailItem` / `RailGroup` rows (and `RailBlockItem`s inside a `SortableList` for the Journey section). Rendered in `.ab-rail-inner`."
    },
    {
      "name": "foot",
      "optional": true,
      "type": "ReactNode",
      "doc": "Sticky footer slot — e.g. a Basic / Advanced `.ab-mode-toggle`. Optional."
    }
  ],
  "classesUsed": [
    "ab-rail",
    "ab-rail-foot",
    "ab-rail-inner"
  ],
  "examples": {
    "react": "<BuilderRail ariaLabel=\"Agent configuration\" foot={<ModeToggle />}>\n  <RailItem icon={<PlayIcon />}>Try my Agent</RailItem>\n  <RailGroup title=\"General\" count={5} defaultOpen>…</RailGroup>\n</BuilderRail>",
    "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 {\n  background: var(--bg-paper);\n  border-right: 1px solid var(--hair);\n  padding: var(--s-4) 0 0;\n  display: flex; flex-direction: column;\n  overflow-y: auto;\n}\n\n.ab-rail-foot {\n  margin-top: auto;\n  padding: var(--s-4) var(--s-4) var(--s-4);\n  border-top: 1px solid var(--hair);\n  background: var(--bg-paper);\n  position: sticky; bottom: 0;\n}\n\n.ab-rail-inner {\n  padding: 0 var(--s-3);\n  display: flex; flex-direction: column; gap: 2px;\n  flex: 1;\n}"
  }
}