{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "animated-notification-stack",
  "type": "registry:ui",
  "title": "Spring Notification Toast Stack",
  "description": "Tactile stacked notification cards with interactive expandable deck and live push dispatch.",
  "category": "navigation",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "navigation",
    "toast",
    "notification",
    "stack"
  ],
  "files": [
    {
      "path": "registry/navigation/animated-notification-stack/animated-notification-stack.tsx",
      "type": "registry:ui",
      "target": "components/ui/animated-notification-stack.tsx",
      "content": "import React, { useState } from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { CheckCircle, WarningCircle, ShieldCheck, X, Plus } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\ninterface NotificationItem {\n  id: string\n  title: string\n  detail: string\n  type: 'success' | 'warning' | 'info'\n  time: string\n}\n\nexport interface AnimatedNotificationStackProps {\n  className?: string\n}\n\nexport const AnimatedNotificationStack: React.FC<AnimatedNotificationStackProps> = ({ className }) => {\n  const [notifications, setNotifications] = useState<NotificationItem[]>([\n    {\n      id: '1',\n      title: 'Formal Invariant Verified',\n      detail: 'Z3 solver confirmed deadlock-freedom across 10k election rounds.',\n      type: 'success',\n      time: 'Just now',\n    },\n    {\n      id: '2',\n      title: 'Hermetic WASM Container Built',\n      detail: 'SHA256 signature verified against compiler seed.',\n      type: 'info',\n      time: '2m ago',\n    },\n  ])\n\n  const dismiss = (id: string) => {\n    setNotifications((prev) => prev.filter((n) => n.id !== id))\n  }\n\n  const addOne = () => {\n    const newItem: NotificationItem = {\n      id: String(Date.now()),\n      title: 'AST Schema Synchronized',\n      detail: 'Emitted zero-copy memory layout buffer.',\n      type: 'success',\n      time: 'Just now',\n    }\n    setNotifications((prev) => [newItem, ...prev.slice(0, 3)])\n  }\n\n  return (\n    <div className={cn('w-full max-w-sm rounded-3xl border border-white/10 bg-zinc-950 p-4 font-sans text-xs text-white shadow-2xl space-y-3', className)}>\n      <div className=\"flex items-center justify-between pb-2 border-b border-white/5 font-mono text-[10px] text-zinc-600 dark:text-zinc-400\">\n        <span>RUNTIME NOTIFICATIONS</span>\n        <button\n          onClick={addOne}\n          className=\"flex items-center gap-1 rounded bg-white/10 px-2 py-0.5 text-white hover:bg-white/20 transition-colors\"\n        >\n          <Plus size={11} weight=\"bold\" />\n          <span>Simulate Event</span>\n        </button>\n      </div>\n\n      <div className=\"space-y-2\">\n        <AnimatePresence>\n          {notifications.map((n) => (\n            <motion.div\n              key={n.id}\n              initial={{ opacity: 0, y: -10, scale: 0.95 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}\n              className=\"flex items-start justify-between gap-3 rounded-2xl border border-white/10 bg-zinc-900/80 p-3 shadow-md\"\n            >\n              <div className=\"flex items-start gap-2.5\">\n                <CheckCircle size={16} weight=\"fill\" className=\"text-emerald-400 shrink-0 mt-0.5\" />\n                <div>\n                  <h4 className=\"font-bold text-zinc-900 dark:text-white text-xs\">{n.title}</h4>\n                  <p className=\"text-[11px] text-zinc-600 dark:text-zinc-400 mt-0.5 leading-snug\">{n.detail}</p>\n                  <span className=\"font-mono text-[9px] text-zinc-500 mt-1 block\">{n.time}</span>\n                </div>\n              </div>\n\n              <button\n                onClick={() => dismiss(n.id)}\n                className=\"text-zinc-500 hover:text-white transition-colors\"\n              >\n                <X size={12} weight=\"bold\" />\n              </button>\n            </motion.div>\n          ))}\n        </AnimatePresence>\n\n        {notifications.length === 0 && (\n          <div className=\"text-center py-6 text-zinc-600 font-mono text-xs\">\n            No active notifications.\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}