{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-tracker",
  "title": "Status Tracker",
  "description": "A staged progress tracker for long-running AI jobs.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/spectrumui/blocks/ai-assistants/status-tracker.tsx",
      "content": "'use client';\n\nimport { Check } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst KEYFRAMES = `\n@keyframes su-pop { 0% { opacity: 0; transform: scale(0.85) } 100% { opacity: 1; transform: none } }\n`;\n\nexport interface TrackerStage {\n  id: string;\n  label: string;\n}\n\nexport type StatusTrackerVariant = 'Default' | 'Minimal';\n\nexport interface StatusTrackerProps {\n  stages: TrackerStage[];\n  activeIndex: number;\n  progress?: number;\n  detail?: string;\n  variant?: StatusTrackerVariant;\n  className?: string;\n}\n\nexport function StatusTracker({\n  stages,\n  activeIndex,\n  progress = 0,\n  detail,\n  variant = 'Default',\n  className,\n}: StatusTrackerProps) {\n  const done = activeIndex >= stages.length;\n\n  if (variant === 'Minimal') {\n    const label = done ? 'Complete' : stages[activeIndex]?.label;\n    const overall = done ? 1 : (activeIndex + progress) / stages.length;\n    return (\n      <div className={cn('flex w-full max-w-[360px] items-center gap-2.5', className)}>\n        <span aria-hidden className=\"h-1 flex-1 overflow-hidden rounded-full bg-black/[0.07] dark:bg-white/[0.09]\">\n          <span\n            className=\"block h-full rounded-full bg-neutral-900 transition-[width] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] dark:bg-neutral-100\"\n            style={{ width: `${overall * 100}%` }}\n          />\n        </span>\n        <span className=\"shrink-0 text-[12px] text-neutral-500 dark:text-neutral-400\">{label}</span>\n        <span className=\"shrink-0 font-mono text-[10.5px] tabular-nums text-neutral-400 dark:text-neutral-600\">\n          {Math.round(overall * 100)}%\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('w-full max-w-[440px]', className)}>\n      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />\n      <ol className=\"flex items-center\">\n        {stages.map((stage, index) => {\n          const completed = index < activeIndex || done;\n          const active = index === activeIndex && !done;\n          return (\n            <li key={stage.id} className={cn('flex items-center', index > 0 && 'flex-1')}>\n              {index > 0 && (\n                <span aria-hidden className=\"mx-1.5 h-px flex-1 overflow-hidden bg-black/[0.08] dark:bg-white/[0.1]\">\n                  <span\n                    className=\"block h-full bg-neutral-900 transition-[width] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] dark:bg-neutral-100\"\n                    style={{ width: completed ? '100%' : active ? `${progress * 100}%` : '0%' }}\n                  />\n                </span>\n              )}\n              <span className=\"flex flex-col items-center gap-1.5\">\n                <span\n                  className={cn(\n                    'grid size-5 place-items-center rounded-full border transition-colors duration-200',\n                    completed\n                      ? 'border-neutral-900 bg-neutral-900 text-white dark:border-neutral-100 dark:bg-neutral-100 dark:text-neutral-900'\n                      : active\n                        ? 'border-neutral-900 text-neutral-900 dark:border-neutral-100 dark:text-neutral-100'\n                        : 'border-black/[0.12] text-transparent dark:border-white/[0.14]',\n                  )}\n                >\n                  {completed ? (\n                    <Check className=\"size-3 motion-safe:animate-[su-pop_200ms_cubic-bezier(0.23,1,0.32,1)_both]\" strokeWidth={3} />\n                  ) : (\n                    <span\n                      className={cn(\n                        'size-1.5 rounded-full',\n                        active && 'bg-current motion-safe:animate-pulse',\n                      )}\n                    />\n                  )}\n                </span>\n                <span\n                  className={cn(\n                    'whitespace-nowrap font-mono text-[9.5px] uppercase tracking-wide',\n                    active || completed\n                      ? 'text-neutral-700 dark:text-neutral-300'\n                      : 'text-neutral-300 dark:text-neutral-600',\n                  )}\n                >\n                  {stage.label}\n                </span>\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n\n      {detail && (\n        <p className=\"mt-3 text-center text-[12px] text-neutral-400 dark:text-neutral-500\" role=\"status\">\n          {detail}\n        </p>\n      )}\n    </div>\n  );\n}\n\nexport default StatusTracker;\n",
      "type": "registry:block",
      "target": "components/spectrumui/blocks/ai-assistants/status-tracker.tsx"
    }
  ],
  "type": "registry:block"
}