{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "component-health-panel",
  "title": "Component Health Panel",
  "description": "A registry health panel for dependencies, source files, JSON URLs, and install commands.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "badge",
    "card",
    "separator"
  ],
  "files": [
    {
      "path": "registry/corr/components/component-health-panel.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  CheckCircle2Icon,\n  FileCode2Icon,\n  FileJsonIcon,\n  PackageIcon,\n  ShieldCheckIcon,\n  TerminalIcon,\n} from \"lucide-react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ComponentHealthFile = {\n  path: string\n  type?: string\n}\n\nexport type ComponentHealthPanelProps = {\n  title: string\n  status?: \"ready\" | \"draft\"\n  dependencies?: string[]\n  registryDependencies?: string[]\n  files?: ComponentHealthFile[]\n  registryUrl?: string\n  installCommand?: string\n  className?: string\n}\n\nfunction HealthSection({\n  title,\n  icon,\n  children,\n}: {\n  title: string\n  icon: React.ReactNode\n  children: React.ReactNode\n}) {\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n        {icon}\n        {title}\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport function ComponentHealthPanel({\n  title,\n  status = \"ready\",\n  dependencies = [],\n  registryDependencies = [],\n  files = [],\n  registryUrl,\n  installCommand,\n  className,\n}: ComponentHealthPanelProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: reduceMotion ? 0 : 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: reduceMotion ? 0 : 0.18 }}\n    >\n      <Card className={cn(\"overflow-hidden\", className)}>\n        <CardHeader>\n          <div className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0\">\n              <CardTitle className=\"truncate text-base\">{title}</CardTitle>\n              <p className=\"mt-1 text-sm text-muted-foreground\">\n                Registry health summary\n              </p>\n            </div>\n            <Badge\n              variant={status === \"ready\" ? \"secondary\" : \"outline\"}\n              className=\"shrink-0\"\n            >\n              <ShieldCheckIcon className=\"size-3.5\" />\n              {status}\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"grid gap-3 sm:grid-cols-3\">\n            <div className=\"rounded-md border bg-muted/30 p-3\">\n              <div className=\"text-lg font-semibold\">{dependencies.length}</div>\n              <div className=\"text-xs text-muted-foreground\">packages</div>\n            </div>\n            <div className=\"rounded-md border bg-muted/30 p-3\">\n              <div className=\"text-lg font-semibold\">\n                {registryDependencies.length}\n              </div>\n              <div className=\"text-xs text-muted-foreground\">shadcn deps</div>\n            </div>\n            <div className=\"rounded-md border bg-muted/30 p-3\">\n              <div className=\"text-lg font-semibold\">{files.length}</div>\n              <div className=\"text-xs text-muted-foreground\">files</div>\n            </div>\n          </div>\n\n          <Separator />\n\n          <HealthSection\n            title=\"Package dependencies\"\n            icon={<PackageIcon className=\"size-3.5\" />}\n          >\n            <div className=\"flex flex-wrap gap-1.5\">\n              {dependencies.length ? (\n                dependencies.map((dependency) => (\n                  <Badge key={dependency} variant=\"outline\">\n                    {dependency}\n                  </Badge>\n                ))\n              ) : (\n                <Badge variant=\"outline\">none</Badge>\n              )}\n            </div>\n          </HealthSection>\n\n          <HealthSection\n            title=\"Registry dependencies\"\n            icon={<CheckCircle2Icon className=\"size-3.5\" />}\n          >\n            <div className=\"flex flex-wrap gap-1.5\">\n              {registryDependencies.length ? (\n                registryDependencies.map((dependency) => (\n                  <Badge key={dependency} variant=\"secondary\">\n                    {dependency}\n                  </Badge>\n                ))\n              ) : (\n                <Badge variant=\"outline\">none</Badge>\n              )}\n            </div>\n          </HealthSection>\n\n          <HealthSection\n            title=\"Files\"\n            icon={<FileCode2Icon className=\"size-3.5\" />}\n          >\n            <div className=\"space-y-1 rounded-md border bg-background p-2\">\n              {files.map((file) => (\n                <div\n                  key={file.path}\n                  className=\"flex min-w-0 items-center justify-between gap-3 text-xs\"\n                >\n                  <span className=\"truncate font-mono\">{file.path}</span>\n                  {file.type ? (\n                    <span className=\"shrink-0 text-muted-foreground\">\n                      {file.type}\n                    </span>\n                  ) : null}\n                </div>\n              ))}\n            </div>\n          </HealthSection>\n\n          {registryUrl || installCommand ? (\n            <div className=\"grid gap-2\">\n              {registryUrl ? (\n                <div className=\"min-w-0 rounded-md border bg-muted/30 p-3\">\n                  <div className=\"mb-1 flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n                    <FileJsonIcon className=\"size-3.5\" />\n                    Registry JSON\n                  </div>\n                  <div className=\"overflow-x-auto font-mono text-xs whitespace-nowrap\">\n                    {registryUrl}\n                  </div>\n                </div>\n              ) : null}\n              {installCommand ? (\n                <div className=\"min-w-0 rounded-md border bg-muted/30 p-3\">\n                  <div className=\"mb-1 flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n                    <TerminalIcon className=\"size-3.5\" />\n                    Install\n                  </div>\n                  <div className=\"overflow-x-auto font-mono text-xs whitespace-nowrap\">\n                    {installCommand}\n                  </div>\n                </div>\n              ) : null}\n            </div>\n          ) : null}\n        </CardContent>\n      </Card>\n    </motion.div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}