{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "interactive-dialog-modal",
  "type": "registry:ui",
  "title": "Interactive Dialog Modal",
  "description": "Accessible modal dialog with spring physics, backdrop blur, keyboard ESC trap, and customizable action slots.",
  "category": "overlays",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/overlays/interactive-dialog-modal/interactive-dialog-modal.tsx",
      "type": "registry:ui",
      "target": "components/ui/interactive-dialog-modal.tsx",
      "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { ShieldCheck, X, ArrowRight } from '@phosphor-icons/react';\n\nexport const InteractiveDialogModal: React.FC = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') setIsOpen(false);\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen]);\n\n  return (\n    <div className=\"flex flex-col items-center gap-3\">\n      <button\n        onClick={() => setIsOpen(true)}\n        className=\"px-5 py-2.5 rounded-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs shadow-lg shadow-indigo-600/25 transition-all cursor-pointer\"\n      >\n        Open Verification Dialog\n      </button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <div \n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label=\"Formal Gate Verification Modal\"\n            data-lenis-prevent=\"true\"\n            className=\"fixed inset-0 z-[70] flex items-center justify-center p-4\"\n          >\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={() => setIsOpen(false)}\n              className=\"fixed inset-0 bg-black/75 backdrop-blur-md\"\n            />\n\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95, y: 15 }}\n              animate={{ opacity: 1, scale: 1, y: 0 }}\n              exit={{ opacity: 0, scale: 0.95, y: 15 }}\n              transition={{ type: 'spring', damping: 25, stiffness: 300 }}\n              className=\"relative z-10 w-full max-w-md rounded-3xl border border-zinc-200 dark:border-white/15 bg-white dark:bg-zinc-950 p-6 shadow-2xl\"\n            >\n              <div className=\"flex items-center justify-between pb-4 border-b border-zinc-200 dark:border-white/10\">\n                <div className=\"flex items-center gap-2.5\">\n                  <div className=\"flex h-8 w-8 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-500 border border-emerald-500/20\">\n                    <ShieldCheck size={18} weight=\"bold\" />\n                  </div>\n                  <h4 className=\"text-sm font-bold text-zinc-900 dark:text-white font-mono\">Formal Gate Verification</h4>\n                </div>\n                <button\n                  onClick={() => setIsOpen(false)}\n                  className=\"text-zinc-400 hover:text-zinc-900 dark:hover:text-white p-1 rounded-full cursor-pointer\"\n                >\n                  <X size={16} />\n                </button>\n              </div>\n\n              <div className=\"py-4 text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed space-y-2\">\n                <p>All AST safety invariant proofs have converged with 100% formal safety certificates.</p>\n                <div className=\"p-3 rounded-xl bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-white/5 font-mono text-[11px] text-zinc-700 dark:text-zinc-300\">\n                  SHA-256: 4f89b1c72...92da4e\n                </div>\n              </div>\n\n              <div className=\"flex items-center justify-end gap-2 pt-3 border-t border-zinc-200 dark:border-white/10\">\n                <button\n                  onClick={() => setIsOpen(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-mono text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 cursor-pointer\"\n                >\n                  Dismiss\n                </button>\n                <button\n                  onClick={() => setIsOpen(false)}\n                  className=\"flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-mono font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-md cursor-pointer\"\n                >\n                  <span>Authorize Emission</span>\n                  <ArrowRight size={13} weight=\"bold\" />\n                </button>\n              </div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n"
    }
  ]
}