{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "progress-step-loader",
  "type": "registry:ui",
  "title": "Progress Step Loader",
  "description": "Multi-stage pipeline compilation loader with real-time status telemetry and spring animations.",
  "category": "feedback",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/feedback/progress-step-loader/progress-step-loader.tsx",
      "type": "registry:ui",
      "target": "components/ui/progress-step-loader.tsx",
      "content": "import React, { useState, useEffect } from 'react';\nimport { motion } from 'framer-motion';\nimport { Check, CircleNotch } from '@phosphor-icons/react';\n\nconst STEPS = [\n  'Resolving AST Dependencies',\n  'Synthesizing Deterministic Code',\n  'Executing SMT Proof Verification',\n  'Publishing Artifact to Registry',\n];\n\nexport const ProgressStepLoader: React.FC = () => {\n  const [currentStep, setCurrentStep] = useState(2);\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setCurrentStep((prev) => (prev < STEPS.length ? prev + 1 : 0));\n    }, 2500);\n    return () => clearInterval(timer);\n  }, []);\n\n  return (\n    <div className=\"w-full max-w-md mx-auto p-5 rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900/60 backdrop-blur-xl shadow-lg\">\n      <div className=\"flex items-center justify-between mb-4 pb-2 border-b border-zinc-200/60 dark:border-white/5\">\n        <span className=\"text-[10px] font-mono uppercase tracking-widest text-zinc-500\">SYNTHESIS PIPELINE</span>\n        <span className=\"text-[10px] font-mono text-emerald-500 font-bold\">\n          {Math.min(100, Math.round((currentStep / (STEPS.length - 1)) * 100))}% COMPLETE\n        </span>\n      </div>\n\n      <div className=\"space-y-3\">\n        {STEPS.map((step, idx) => {\n          const isDone = idx < currentStep;\n          const isCurrent = idx === currentStep;\n\n          return (\n            <div key={step} className=\"flex items-center gap-3\">\n              <div\n                className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs transition-colors ${\n                  isDone\n                    ? 'bg-emerald-500 text-white font-bold'\n                    : isCurrent\n                    ? 'bg-indigo-600 text-white animate-pulse'\n                    : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-400'\n                }`}\n              >\n                {isDone ? (\n                  <Check size={12} weight=\"bold\" />\n                ) : isCurrent ? (\n                  <CircleNotch size={13} className=\"animate-spin\" />\n                ) : (\n                  <span className=\"text-[10px] font-mono\">{idx + 1}</span>\n                )}\n              </div>\n              <span\n                className={`text-xs font-mono transition-colors ${\n                  isDone\n                    ? 'text-zinc-400 line-through'\n                    : isCurrent\n                    ? 'text-zinc-900 dark:text-white font-semibold'\n                    : 'text-zinc-500'\n                }`}\n              >\n                {step}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}