{
  "name": "RailBlockItem",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RailBlockItem.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 draggable Journey-block row for the builder rail. Designed as the\n`renderRow` body of a `SortableList` (whole-row drag; the dotted handle is\nthe affordance, clicking still selects). Used standalone it's a plain\nselectable row.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "RailBlockItem",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RailBlockItemProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { RailBlockItem } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "name",
      "optional": false,
      "type": "string",
      "doc": "Block name (truncates with ellipsis when long)."
    },
    {
      "name": "active",
      "optional": true,
      "type": "boolean",
      "doc": "Active (selected) block styling."
    },
    {
      "name": "start",
      "optional": true,
      "type": "boolean",
      "doc": "Render the Start pill beside the name (the journey's entry block). v4.11.0."
    },
    {
      "name": "keyFactCount",
      "optional": true,
      "type": "number",
      "doc": "Key-fact count — shown as the `▤ N` stat. Omit to hide."
    },
    {
      "name": "actionCount",
      "optional": true,
      "type": "number",
      "doc": "Action count — shown as the `⚡ N` stat. Omit to hide."
    },
    {
      "name": "hint",
      "optional": true,
      "type": "ReactNode",
      "doc": "Muted coaching hint replacing the stats, e.g. \"0 jobs · needs work\". v4.11.0."
    },
    {
      "name": "onSelect",
      "optional": true,
      "type": "() => void",
      "doc": "Fires on click / Enter / Space — selects the block."
    },
    {
      "name": "onMenu",
      "optional": true,
      "type": "() => void",
      "doc": "Fires when the trailing kebab is clicked."
    },
    {
      "name": "menuLabel",
      "optional": true,
      "type": "string",
      "doc": "Accessible label for the kebab. Defaults to \"Block menu\"."
    }
  ],
  "classesUsed": [
    "ab-rail-block",
    "ab-rail-block-handle",
    "ab-rail-block-hint",
    "ab-rail-block-menu",
    "ab-rail-block-name",
    "ab-rail-block-start",
    "ab-rail-block-stat",
    "ab-rail-block-stats"
  ],
  "examples": {
    "react": "<SortableList items={blocks} rowId={(b) => b.id} onReorder={setBlocks}\n  renderRow={(b) => (\n    <RailBlockItem name={b.name} active={b.id === current}\n      keyFactCount={b.keyFacts.length} actionCount={b.actions.length}\n      onSelect={() => select(b.id)} />\n  )} />",
    "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-block {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  align-items: center; gap: 6px;\n  padding: 8px 6px 8px var(--s-2); border-radius: 6px;\n  font: 500 13px/1.1 var(--f-body); color: var(--fg-soft);\n  background: var(--bg-warm);\n  border: 1px solid var(--hair);\n  text-align: left;\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);\n}\n\n.ab-rail-block-handle {\n  color: var(--fg-faint); cursor: grab;\n  width: 8px; height: 14px; padding: 0 1px;\n  display: inline-flex; align-items: center; justify-content: center;\n  user-select: none;\n}\n\n.ab-rail-block-hint {\n  font: 500 10px/1 var(--f-mono);\n  color: var(--warning-text);\n  white-space: nowrap;\n}\n\n.ab-rail-block-menu {\n  width: 20px; height: 20px; border-radius: 4px;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--fg-faint); border: 0; background: transparent; cursor: pointer;\n  font: 600 14px/1 var(--f-mono);\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.ab-rail-block-name {\n  text-align: left;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ab-rail-block-start {\n  font: 600 10px/1.5 var(--f-mono);\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--accent-text-strong);\n  background: var(--accent-soft);\n  border-radius: 999px;\n  padding: 1px 6px;\n  flex-shrink: 0;\n}\n\n.ab-rail-block-stat {\n  display: inline-flex; align-items: center; gap: 2px;\n  padding: 2px 4px; background: var(--bg); border-radius: 3px;\n}\n\n.ab-rail-block-stats {\n  display: inline-flex; gap: 4px; color: var(--fg-faint);\n  font: 500 10px/1 var(--f-mono);\n}"
  }
}