{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "sliding-drawer-sheet",
  "type": "registry:ui",
  "title": "Sliding Drawer Sheet",
  "description": "Right-side sliding drawer panel with grab handle, spring slide physics, and backdrop blur.",
  "category": "overlays",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/overlays/sliding-drawer-sheet/sliding-drawer-sheet.tsx",
      "type": "registry:ui",
      "target": "components/ui/sliding-drawer-sheet.tsx",
      "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { X, Gear, Sliders, Check } from '@phosphor-icons/react';\n\nexport const SlidingDrawerSheet: 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 items-center justify-center\">\n      <button\n        onClick={() => setIsOpen(true)}\n        className=\"flex items-center gap-2 px-4 py-2 rounded-full border border-zinc-300 dark:border-white/15 bg-white dark:bg-zinc-900 text-xs font-mono text-zinc-900 dark:text-white shadow-sm hover:border-indigo-500 cursor-pointer\"\n      >\n        <Sliders size={14} />\n        <span>Open Runtime Drawer</span>\n      </button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <div \n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label=\"Runtime Drawer Inspector\"\n            data-lenis-prevent=\"true\"\n            className=\"fixed inset-0 z-[70] overflow-hidden\"\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/60 backdrop-blur-xs\"\n            />\n\n            <motion.div\n              initial={{ x: '100%' }}\n              animate={{ x: 0 }}\n              exit={{ x: '100%' }}\n              transition={{ type: 'spring', damping: 26, stiffness: 260 }}\n              className=\"fixed inset-y-0 right-0 w-80 max-w-full border-l border-zinc-200 dark:border-white/15 bg-white dark:bg-zinc-950 p-6 shadow-2xl flex flex-col justify-between\"\n            >\n              <div>\n                <div className=\"flex items-center justify-between pb-4 border-b border-zinc-200 dark:border-white/10 mb-6\">\n                  <div className=\"flex items-center gap-2\">\n                    <Gear size={16} className=\"text-indigo-500\" />\n                    <h4 className=\"text-sm font-bold text-zinc-900 dark:text-white font-mono\">Drawer Inspector</h4>\n                  </div>\n                  <button\n                    onClick={() => setIsOpen(false)}\n                    className=\"p-1 rounded-full text-zinc-400 hover:text-zinc-900 dark:hover:text-white cursor-pointer\"\n                  >\n                    <X size={16} />\n                  </button>\n                </div>\n\n                <div className=\"space-y-4 text-xs font-mono\">\n                  <div className=\"p-3 rounded-2xl bg-zinc-100 dark:bg-zinc-900/60 border border-zinc-200 dark:border-white/5\">\n                    <span className=\"text-zinc-500 text-[10px] uppercase\">WASM ISOLATE STATUS</span>\n                    <p className=\"mt-1 font-semibold text-emerald-500 flex items-center gap-1\">\n                      <Check size={12} weight=\"bold\" /> Nominal (Sandboxed)\n                    </p>\n                  </div>\n\n                  <div className=\"p-3 rounded-2xl bg-zinc-100 dark:bg-zinc-900/60 border border-zinc-200 dark:border-white/5\">\n                    <span className=\"text-zinc-500 text-[10px] uppercase\">MEMORY ALLOCATION</span>\n                    <p className=\"mt-1 font-semibold text-zinc-900 dark:text-white\">64 MB / 512 MB Pool</p>\n                  </div>\n                </div>\n              </div>\n\n              <button\n                onClick={() => setIsOpen(false)}\n                className=\"w-full py-2.5 rounded-xl bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 text-xs font-mono font-bold shadow-md cursor-pointer\"\n              >\n                Close Drawer\n              </button>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n"
    }
  ]
}