{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pipeline-flow",
  "type": "registry:ui",
  "title": "PipelineFlow",
  "description": "Multi-stage data pipeline flow visualizer with throughput metrics and animated pulse lines.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/pipeline-flow.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PipelineStageItem {\n  title: string;\n  badge?: string;\n  description?: string;\n  metric?: string;\n  active?: boolean;\n}\n\nexport interface PipelineFlowProps extends React.HTMLAttributes<HTMLDivElement> {\n  stages: PipelineStageItem[];\n  animated?: boolean;\n}\n\nexport function PipelineFlow({\n  stages,\n  animated = true,\n  className,\n  ...props\n}: PipelineFlowProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 p-4 overflow-x-auto w-full rounded-lg border border-border bg-card\",\n        className\n      )}\n      {...props}\n    >\n      {stages.map((stage, idx) => (\n        <React.Fragment key={idx}>\n          <div\n            className={cn(\n              \"flex flex-col p-3.5 rounded-md border border-border bg-card shadow-xs min-w-[170px] max-w-[240px] flex-shrink-0 transition-colors\",\n              stage.active && \"border-primary ring-1 ring-primary\"\n            )}\n          >\n            <div className=\"flex items-center justify-between gap-1.5 mb-1.5\">\n              <span className=\"font-mono text-sm font-medium text-foreground\">\n                {stage.title}\n              </span>\n              {stage.badge && (\n                <span className=\"font-mono text-xs font-medium px-1.5 py-0.5 rounded bg-muted text-muted-foreground\">\n                  {stage.badge}\n                </span>\n              )}\n            </div>\n            {stage.description && (\n              <p className=\"text-sm text-muted-foreground line-clamp-2 mb-2 leading-snug\">\n                {stage.description}\n              </p>\n            )}\n            {stage.metric && (\n              <div className=\"font-mono text-sm font-medium text-emerald-500 mt-auto\">\n                {stage.metric}\n              </div>\n            )}\n          </div>\n\n          {idx < stages.length - 1 && (\n            <div className=\"flex flex-col items-center justify-center relative w-10 flex-shrink-0\">\n              <div className=\"w-full h-0.5 bg-border relative\">\n                {animated && (\n                  <div className=\"absolute -top-[3px] w-2 h-2 rounded-full bg-primary animate-pulse\" />\n                )}\n                <span className=\"absolute -right-1 -top-2 text-xs text-muted-foreground\">\n                  ►\n                </span>\n              </div>\n            </div>\n          )}\n        </React.Fragment>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}