{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rail",
  "type": "registry:component",
  "title": "Rail",
  "description": "Left-edge section minimap: one tick per heading, active-section highlight, labels on hover. Hidden below 1280px.",
  "dependencies": [],
  "registryDependencies": [
    "https://mocoui.site/r/tokens.json",
    "https://mocoui.site/r/hooks.json"
  ],
  "files": [
    {
      "path": "registry/rail/rail.tsx",
      "type": "registry:component",
      "target": "components/moco/rail.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport \"./rail.css\";\nimport { useScrollspy, smoothScrollTo } from \"@/components/moco/hooks\";\n\nexport interface Heading {\n  id: string;\n  text: string;\n  level?: number;\n}\n\nexport interface RailProps {\n  headings: Heading[];\n}\n\n/** Left-edge minimap: one tick per H2. Hidden below 1280px. */\nexport function Rail({ headings }: RailProps) {\n  const ids = React.useMemo(() => headings.map((h) => h.id), [headings]);\n  const active = useScrollspy(ids);\n  if (!headings.length) return null;\n\n  return (\n    <nav className=\"moco-rail\" aria-label=\"Sections\">\n      {headings.map((h, i) => (\n        <button\n          key={h.id}\n          type=\"button\"\n          className=\"moco-rail-item\"\n          aria-current={i === active}\n          aria-label={`Jump to ${h.text}`}\n          onClick={() => smoothScrollTo(h.id)}\n        >\n          <span className=\"moco-rail-tick\" aria-hidden=\"true\" />\n          <span className=\"moco-rail-label\" aria-hidden=\"true\">\n            {h.text}\n          </span>\n        </button>\n      ))}\n    </nav>\n  );\n}\n"
    },
    {
      "path": "registry/rail/rail.css",
      "type": "registry:file",
      "target": "components/moco/rail.css",
      "content": ".moco-rail {\n  position: fixed;\n  left: 28px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 40;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0.5rem 0;\n}\n\n.moco-rail-item {\n  display: flex;\n  align-items: center;\n  gap: 0.7rem;\n  height: 14px;\n  /* Button reset the host app may not provide. */\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n.moco-rail-tick {\n  display: block;\n  height: 1px;\n  width: 18px;\n  background: var(--moco-muted);\n  opacity: 0.4;\n  flex: none;\n  transition:\n    width 300ms var(--moco-ease),\n    opacity 300ms var(--moco-ease),\n    background 300ms var(--moco-ease);\n}\n\n.moco-rail-item[aria-current=\"true\"] .moco-rail-tick {\n  width: 30px;\n  opacity: 1;\n  height: 2px;\n  background: var(--moco-accent-dk);\n}\n\n.moco-rail-label {\n  font-size: 12px;\n  color: var(--moco-faint);\n  white-space: nowrap;\n  opacity: 0;\n  transform: translateX(-6px);\n  transition:\n    opacity 250ms var(--moco-ease),\n    transform 250ms var(--moco-ease);\n  pointer-events: none;\n}\n\n.moco-rail:hover .moco-rail-label,\n.moco-rail:focus-within .moco-rail-label {\n  opacity: 1;\n  transform: none;\n}\n\n.moco-rail-item[aria-current=\"true\"] .moco-rail-label {\n  color: var(--moco-ink);\n}\n\n@media (max-width: 1279px) {\n  .moco-rail {\n    display: none;\n  }\n}\n"
    }
  ],
  "docs": "\"use client\";\n\nimport { Rail, type Heading } from \"./rail\";\n\nconst HEADINGS: Heading[] = [\n  { id: \"one\", text: \"First section\" },\n  { id: \"two\", text: \"Second section\" },\n  { id: \"three\", text: \"Third section\" },\n];\n\nexport default function RailDemo() {\n  return (\n    <div>\n      <Rail headings={HEADINGS} />\n      <main style={{ maxWidth: \"42rem\", margin: \"0 auto\", padding: \"4rem 1rem\" }}>\n        {HEADINGS.map((h) => (\n          <section key={h.id}>\n            <h2 id={h.id}>{h.text}</h2>\n            {Array.from({ length: 12 }, (_, i) => (\n              <p key={i}>\n                Widen the window past 1280px and scroll — the tick on the left edge follows the\n                section you are reading, and hovering the rail reveals the labels.\n              </p>\n            ))}\n          </section>\n        ))}\n      </main>\n    </div>\n  );\n}\n",
  "meta": {
    "tags": [
      "navigation",
      "scrollspy",
      "toc"
    ]
  }
}