{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-elevation-nova",
  "title": "Status Elevation Nova",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/status-elevation/nova/StatusElevationNova.jsx",
      "content": "\"use client\";\n\nimport React, { useState, useCallback, useEffect, useRef, useMemo } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { XCircle, Loader, CheckCircle } from \"lucide-react\";\n\n// ─── Status Config ─────────────────────────────────────────────\nconst STATUS_CONFIG = {\n    failed: {\n        priority: 1, label: \"Failed\", icon: XCircle,\n        color: \"#ef4444\",\n        glowColor: \"rgba(239, 68, 68, 0.4)\",\n        softGlow: \"rgba(239, 68, 68, 0.15)\",\n        borderColor: \"rgba(239, 68, 68, 0.25)\",\n    },\n    pending: {\n        priority: 2, label: \"Pending\", icon: Loader,\n        color: \"#f59e0b\",\n        glowColor: \"rgba(245, 158, 11, 0.4)\",\n        softGlow: \"rgba(245, 158, 11, 0.15)\",\n        borderColor: \"rgba(245, 158, 11, 0.25)\",\n    },\n    success: {\n        priority: 3, label: \"Success\", icon: CheckCircle,\n        color: \"#10b981\",\n        glowColor: \"rgba(16, 185, 129, 0.4)\",\n        softGlow: \"rgba(16, 185, 129, 0.15)\",\n        borderColor: \"rgba(16, 185, 129, 0.25)\",\n    },\n};\n\n// ─── Status Pill ───────────────────────────────────────────────\nfunction StatusPill({ status, duration = 0.3 }) {\n    const config = STATUS_CONFIG[status];\n    const Icon = config.icon;\n    const isPending = status === \"pending\";\n    const halfDuration = duration / 2;\n\n    return (\n        <motion.div key={status}\n            initial={{ scale: 0.9, opacity: 0 }}\n            animate={{ scale: 1, opacity: 1 }}\n            transition={{ type: \"tween\", duration, ease: \"easeOut\" }}\n            className=\"relative w-32\"\n        >\n            <AnimatePresence>\n                <motion.div\n                    className=\"relative flex items-center gap-2.5 pl-3.5 pr-5 py-2.5 rounded-full\"\n                    animate={{ boxShadow: `inset 0 2px 2px -1px ${config.glowColor}` }}\n                    transition={{ duration: halfDuration, ease: \"easeInOut\" }}\n                    style={{ background: \"linear-gradient(145deg, rgba(40,40,45,0.95), rgba(25,25,30,0.98))\" }}\n                >\n                    <div className=\"relative\">\n                        <div className=\"absolute inset-0 blur-sm rounded-full\"\n                            style={{ background: config.glowColor, opacity: 0.5 }} />\n                        <Icon className={`relative w-5 h-5 ${isPending ? \"animate-spin\" : \"\"}`}\n                            style={{ color: config.color, filter: `drop-shadow(0 0 4px ${config.glowColor})` }}\n                            strokeWidth={2} />\n                    </div>\n                    <AnimatePresence mode=\"wait\">\n                        <motion.span key={status}\n                            initial={{ filter: \"blur(4px)\", opacity: 0.4 }}\n                            animate={{ filter: \"blur(0px)\", opacity: 1 }}\n                            exit={{ filter: \"blur(4px)\", opacity: 0.4 }}\n                            transition={{ duration: halfDuration, ease: \"easeInOut\" }}\n                            className=\"text-sm font-medium tracking-wide\"\n                            style={{ color: \"rgba(255, 255, 255, 0.85)\" }}\n                        >{config.label}</motion.span>\n                    </AnimatePresence>\n                </motion.div>\n            </AnimatePresence>\n        </motion.div>\n    );\n}\n\n// ─── Status Elevation Component ────────────────────────────────\nexport function StatusElevation({ items = [], duration = 0.3 }) {\n    const sortedItems = useMemo(() => {\n        return [...items].sort((a, b) => {\n            const pA = STATUS_CONFIG[a.status]?.priority ?? 99;\n            const pB = STATUS_CONFIG[b.status]?.priority ?? 99;\n            if (pA !== pB) return pB - pA;\n            return a.id - b.id;\n        });\n    }, [items]);\n\n    return (\n        <div className=\"w-full max-w-lg mx-auto\">\n            <div className=\"space-y-3\">\n                <AnimatePresence initial={false}>\n                    {sortedItems.map((item, index) => {\n                        const config = STATUS_CONFIG[item.status];\n                        return (\n                            <motion.div key={item.id} layout\n                                initial={{ opacity: 0, y: 20, scale: 0.95 }}\n                                animate={{ opacity: 1, y: 0, scale: 1 }}\n                                exit={{ opacity: 0, scale: 0.9, x: -20 }}\n                                transition={{\n                                    layout: { type: \"tween\", duration, ease: \"easeInOut\" },\n                                    opacity: { duration }, scale: { duration },\n                                }}\n                                className=\"relative overflow-hidden rounded-2xl\"\n                                style={{\n                                    background: \"linear-gradient(135deg, rgba(30,30,35,0.9), rgba(20,20,25,0.95))\",\n                                    border: \"1px solid rgba(255,255,255,0.06)\",\n                                    boxShadow: \"0 2px 12px rgba(0,0,0,0.3)\",\n                                }}\n                            >\n                                <motion.div layout className=\"absolute left-0 top-0 bottom-0 w-[2px]\"\n                                    style={{ background: config.color, opacity: 0.6 }} />\n                                <div className=\"flex items-center gap-4 p-4 pl-5\">\n                                    <motion.div layout className=\"flex items-center justify-center w-7 h-7 rounded-lg\"\n                                        style={{ background: \"rgba(255,255,255,0.04)\", border: \"1px solid rgba(255,255,255,0.06)\" }}>\n                                        <span className=\"text-xs font-bold text-white/40 font-mono\">{index + 1}</span>\n                                    </motion.div>\n                                    <div className=\"flex-1 min-w-0\">\n                                        <p className=\"text-sm font-medium text-white/80 truncate\">{item.name}</p>\n                                        <p className=\"text-[11px] text-white/25 mt-0.5 font-mono\">ID: {item.id}</p>\n                                    </div>\n                                    <StatusPill status={item.status} duration={duration} />\n                                </div>\n                                <motion.div key={item.status}\n                                    initial={{ x: \"-100%\", opacity: 0.2 }}\n                                    animate={{ x: \"200%\", opacity: 0 }}\n                                    transition={{ duration, ease: \"easeOut\" }}\n                                    className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent pointer-events-none\" />\n                            </motion.div>\n                        );\n                    })}\n                </AnimatePresence>\n            </div>\n        </div>\n    );\n}\n\n// ─── Demo ──────────────────────────────────────────────────────\nconst STATUSES = [\"failed\", \"pending\", \"success\"];\n\nconst INITIAL_ITEMS = [\n    { id: 1, name: \"Database Migration\", status: \"pending\" },\n    { id: 2, name: \"API Deployment\", status: \"success\" },\n    { id: 3, name: \"Auth Service\", status: \"failed\" },\n    { id: 4, name: \"Cache Warmup\", status: \"pending\" },\n    { id: 5, name: \"SSL Certificate\", status: \"success\" },\n    { id: 6, name: \"DNS Propagation\", status: \"pending\" },\n];\n\nexport default function StatusElevationNovaDemo() {\n    const [items, setItems] = useState(INITIAL_ITEMS);\n    const intervalRef = useRef(null);\n\n    const randomizeOne = useCallback(() => {\n        setItems((prev) => {\n            const idx = Math.floor(Math.random() * prev.length);\n            const currentStatus = prev[idx].status;\n            const otherStatuses = STATUSES.filter((s) => s !== currentStatus);\n            const newStatus = otherStatuses[Math.floor(Math.random() * otherStatuses.length)];\n            return prev.map((item, i) => i === idx ? { ...item, status: newStatus } : item);\n        });\n    }, []);\n\n    useEffect(() => {\n        intervalRef.current = setInterval(randomizeOne, 1500);\n        return () => clearInterval(intervalRef.current);\n    }, [randomizeOne]);\n\n    return (\n        <div className=\"w-full flex flex-col gap-6 p-4\">\n            <StatusElevation items={items} duration={0.3} />\n        </div>\n    );\n}\n\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}