{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "toast-notification-hub",
  "type": "registry:ui",
  "title": "Toast Notification Hub",
  "description": "Stackable interactive toast manager with auto-dismiss timers, progress meters, and action hooks.",
  "category": "feedback",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/feedback/toast-notification-hub/toast-notification-hub.tsx",
      "type": "registry:ui",
      "target": "components/ui/toast-notification-hub.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { CheckCircle, Warning, XCircle, Info, X } from '@phosphor-icons/react';\n\nexport interface ToastItem {\n  id: string;\n  type: 'success' | 'warning' | 'error' | 'info';\n  title: string;\n  message: string;\n}\n\nexport const ToastNotificationHub: React.FC = () => {\n  const [toasts, setToasts] = useState<ToastItem[]>([\n    { id: '1', type: 'success', title: 'Component Deployed', message: 'Registry endpoint synced to Vercel CDN.' },\n  ]);\n\n  const addToast = (type: ToastItem['type'], title: string, message: string) => {\n    const id = Math.random().toString(36).substring(7);\n    setToasts((prev) => [...prev, { id, type, title, message }]);\n    setTimeout(() => removeToast(id), 4000);\n  };\n\n  const removeToast = (id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  };\n\n  const getIcon = (type: ToastItem['type']) => {\n    switch (type) {\n      case 'success': return <CheckCircle size={18} weight=\"fill\" className=\"text-emerald-400\" />;\n      case 'warning': return <Warning size={18} weight=\"fill\" className=\"text-amber-400\" />;\n      case 'error': return <XCircle size={18} weight=\"fill\" className=\"text-rose-400\" />;\n      case 'info': return <Info size={18} weight=\"fill\" className=\"text-cyan-400\" />;\n    }\n  };\n\n  return (\n    <div className=\"w-full flex flex-col items-center gap-4\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        <button\n          onClick={() => addToast('success', 'Verified Artifact', 'Bit-reproducible SHA-256 generated.')}\n          className=\"px-3 py-1.5 rounded-xl text-xs font-mono font-medium bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 hover:bg-emerald-500/20 transition-colors cursor-pointer\"\n        >\n          + Success Toast\n        </button>\n        <button\n          onClick={() => addToast('warning', 'High Mem Quota', 'Telemetry RAM usage reached 84%.')}\n          className=\"px-3 py-1.5 rounded-xl text-xs font-mono font-medium bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 hover:bg-amber-500/20 transition-colors cursor-pointer\"\n        >\n          + Warning Toast\n        </button>\n        <button\n          onClick={() => addToast('error', 'Compiler Crash', 'Signal SIGSEGV caught in isolate sandbox.')}\n          className=\"px-3 py-1.5 rounded-xl text-xs font-mono font-medium bg-rose-500/10 text-rose-600 dark:text-rose-400 border border-rose-500/20 hover:bg-rose-500/20 transition-colors cursor-pointer\"\n        >\n          + Error Toast\n        </button>\n      </div>\n\n      <div className=\"w-full max-w-sm space-y-2 mt-2\">\n        <AnimatePresence>\n          {toasts.map((toast) => (\n            <motion.div\n              key={toast.id}\n              initial={{ opacity: 0, y: 15, scale: 0.95 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={{ opacity: 0, x: 50, scale: 0.9 }}\n              transition={{ type: 'spring', stiffness: 350, damping: 25 }}\n              className=\"flex items-start justify-between p-3.5 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/95 dark:bg-zinc-900/90 backdrop-blur-xl shadow-lg\"\n            >\n              <div className=\"flex items-start gap-3\">\n                <div className=\"mt-0.5\">{getIcon(toast.type)}</div>\n                <div>\n                  <h5 className=\"text-xs font-bold text-zinc-900 dark:text-white font-mono\">{toast.title}</h5>\n                  <p className=\"text-[11px] text-zinc-600 dark:text-zinc-400 mt-0.5\">{toast.message}</p>\n                </div>\n              </div>\n              <button\n                onClick={() => removeToast(toast.id)}\n                className=\"text-zinc-400 hover:text-zinc-900 dark:hover:text-white p-1 rounded-full transition-colors cursor-pointer\"\n              >\n                <X size={12} />\n              </button>\n            </motion.div>\n          ))}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}