{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-elevation-retro",
  "title": "Status Elevation Retro",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/status-elevation/retro/StatusElevationRetro.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        retroBg: \"#fee2e2\",\n        retroText: \"#991b1b\",\n        retroBorder: \"#991b1b\",\n    },\n    pending: {\n        priority: 2, label: \"Pending\", icon: Loader,\n        color: \"#f59e0b\",\n        retroBg: \"#fef3c7\",\n        retroText: \"#92400e\",\n        retroBorder: \"#92400e\",\n    },\n    success: {\n        priority: 3, label: \"Success\", icon: CheckCircle,\n        color: \"#10b981\",\n        retroBg: \"#d1fae5\",\n        retroText: \"#065f46\",\n        retroBorder: \"#065f46\",\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={{ opacity: 0, x: 10 }}\n            animate={{ opacity: 1, x: 0 }}\n            transition={{ type: \"tween\", duration, ease: \"easeOut\" }}\n            className=\"w-32\"\n        >\n            <div className=\"flex items-center gap-2 px-3 py-1.5 border-2 font-mono text-xs font-bold uppercase tracking-widest\"\n                style={{ background: config.retroBg, color: config.retroText, borderColor: config.retroBorder }}>\n                <Icon className={`w-3.5 h-3.5 ${isPending ? \"animate-spin\" : \"\"}`} strokeWidth={2.5} />\n                <AnimatePresence mode=\"wait\">\n                    <motion.span key={status}\n                        initial={{ filter: \"blur(3px)\", opacity: 0.4 }}\n                        animate={{ filter: \"blur(0px)\", opacity: 1 }}\n                        exit={{ filter: \"blur(3px)\", opacity: 0.4 }}\n                        transition={{ duration: halfDuration, ease: \"easeInOut\" }}\n                    >{config.label.toUpperCase()}</motion.span>\n                </AnimatePresence>\n            </div>\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 border-2 border-black shadow-[8px_8px_0px_0px_#000000] bg-white p-4\">\n            <div className=\"border-b-2 border-black pb-2 mb-4 flex justify-between items-center\">\n                <span className=\"font-bold font-mono uppercase tracking-widest text-black text-sm\">STATUS_QUEUE.exe</span>\n                <span className=\"text-xs font-mono border-2 border-black px-2 py-0.5 text-black\">{items.length} ENTRIES</span>\n            </div>\n            <div className=\"space-y-2\">\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 border-2 border-black\"\n                                style={{ background: \"#ffffff\" }}\n                            >\n                                <motion.div layout className=\"absolute left-0 top-0 bottom-0 w-1\"\n                                    style={{ background: config.retroText }} />\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 border-2 border-black\"\n                                        style={{ background: \"#ffffff\" }}>\n                                        <span className=\"text-xs font-bold font-mono text-black\">{index + 1}</span>\n                                    </motion.div>\n                                    <div className=\"flex-1 min-w-0\">\n                                        <p className=\"text-sm font-mono font-bold uppercase text-black truncate\">{item.name}</p>\n                                        <p className=\"text-[10px] text-gray-500 mt-0.5 font-mono uppercase\">ID: {item.id}</p>\n                                    </div>\n                                    <StatusPill status={item.status} duration={duration} />\n                                </div>\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 StatusElevationRetroDemo() {\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 text-black\">\n            <StatusElevation items={items} duration={0.3} />\n        </div>\n    );\n}\n\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}