{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "interactive-book",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/ui/interactive-book.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useState, useEffect } from 'react';\r\nimport { motion, AnimatePresence } from 'framer-motion';\r\nimport { cn } from '@/lib/utils';\r\nimport { ChevronLeft, ChevronRight, RefreshCcw, X, BookOpen } from 'lucide-react';\r\n\r\nexport interface BookPage {\r\n    title?: string;\r\n    content: React.ReactNode;\r\n    backContent?: React.ReactNode;\r\n    pageNumber: number;\r\n}\r\n\r\nexport interface InteractiveBookProps {\r\n    coverImage: string;\r\n    bookTitle?: string;\r\n    bookAuthor?: string;\r\n    pages: BookPage[];\r\n    className?: string;\r\n    width?: number | string;\r\n    height?: number | string;\r\n}\r\n\r\nexport default function InteractiveBook({\r\n    coverImage,\r\n    bookTitle = \"Book Title\",\r\n    bookAuthor = \"Author Name\",\r\n    pages,\r\n    className,\r\n    width = 350,\r\n    height = 500,\r\n}: InteractiveBookProps) {\r\n    const [isOpen, setIsOpen] = useState(false);\r\n    const [currentPageIndex, setCurrentPageIndex] = useState(-1);\r\n    const [isHovering, setIsHovering] = useState(false);\r\n\r\n    // Calculate dynamic width/height values for animations\r\n    const widthNum = typeof width === 'number' ? width : 350;\r\n\r\n    // Sync container shift with cover open\r\n    const BOOK_OPEN_DURATION = 1.5;\r\n    const EASING: [number, number, number, number] = [0.25, 0, 0, 1]; // milder smoothing\r\n\r\n    const handleOpenBook = () => setIsOpen(true);\r\n\r\n    const handleCloseBook = (e?: React.MouseEvent) => {\r\n        e?.stopPropagation();\r\n        setIsOpen(false);\r\n        setCurrentPageIndex(-1);\r\n    };\r\n\r\n    const nextPage = (e?: React.MouseEvent) => {\r\n        e?.stopPropagation();\r\n        if (currentPageIndex < pages.length - 1) {\r\n            setCurrentPageIndex((prev) => prev + 1);\r\n        }\r\n    };\r\n\r\n    const prevPage = (e?: React.MouseEvent) => {\r\n        e?.stopPropagation();\r\n        if (currentPageIndex >= 0) {\r\n            setCurrentPageIndex((prev) => prev - 1);\r\n        }\r\n    };\r\n\r\n    const restartBook = (e?: React.MouseEvent) => {\r\n        e?.stopPropagation();\r\n        setCurrentPageIndex(-1);\r\n    };\r\n\r\n    const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n        setCurrentPageIndex(parseInt(e.target.value, 10));\r\n    };\r\n\r\n    // Keyboard navigation\r\n    useEffect(() => {\r\n        if (!isOpen) return;\r\n        const handleKeyDown = (e: KeyboardEvent) => {\r\n            if (e.key === 'ArrowRight') nextPage();\r\n            if (e.key === 'ArrowLeft') prevPage();\r\n            if (e.key === 'Escape') handleCloseBook();\r\n        };\r\n        window.addEventListener('keydown', handleKeyDown);\r\n        return () => window.removeEventListener('keydown', handleKeyDown);\r\n    }, [isOpen, currentPageIndex]);\r\n\r\n    return (\r\n        <div\r\n            className={cn(\"relative flex items-center justify-center perspective-[2000px]\", className)}\r\n            style={{\r\n                width: typeof width === 'number' ? width * 3.5 : '100%',\r\n                height: typeof height === 'number' ? height + 100 : 'auto'\r\n            }}\r\n        >\r\n            <motion.div\r\n                className={cn(\r\n                    \"relative preserve-3d\"\r\n                )}\r\n                style={{ width, height }}\r\n                initial={{ x: 0 }}\r\n                animate={{ x: isOpen ? widthNum / 2 : 0 }}\r\n                transition={{ duration: BOOK_OPEN_DURATION, ease: EASING }}\r\n            >\r\n\r\n                {/* Front Cover */}\r\n                <motion.div\r\n                    className=\"absolute inset-0 w-full h-full origin-left\"\r\n                    initial={{ rotateY: 0, zIndex: 100 }}\r\n                    animate={{\r\n                        rotateY: isOpen ? -180 : (isHovering ? -15 : 0),\r\n                        zIndex: isOpen ? 0 : 100\r\n                    }}\r\n                    transition={{\r\n                        rotateY: { duration: BOOK_OPEN_DURATION, ease: EASING },\r\n                        zIndex: { delay: isOpen ? BOOK_OPEN_DURATION * 0.6 : BOOK_OPEN_DURATION * 0.4 }\r\n                    }}\r\n                    style={{ transformStyle: 'preserve-3d' }}\r\n                    onClick={!isOpen ? handleOpenBook : undefined}\r\n                    onHoverStart={() => !isOpen && setIsHovering(true)}\r\n                    onHoverEnd={() => setIsHovering(false)}\r\n                >\r\n                    {/* Front Face */}\r\n                    <div\r\n                        className=\"absolute inset-0 w-full h-full backface-hidden rounded-r-md rounded-l-sm shadow-2xl cursor-pointer overflow-hidden group\"\r\n                        style={{ transform: 'translateZ(0.5px)' }}\r\n                    >\r\n                        {/* Image Background */}\r\n                        <div\r\n                            className=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\r\n                            style={{ backgroundImage: `url(${coverImage})` }}\r\n                        />\r\n                        <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent\" />\r\n\r\n                        <div className=\"absolute bottom-4 left-3 right-3 text-white text-left\">\r\n                            <h1 className=\"text-sm font-serif font-bold tracking-wide mb-1 drop-shadow-md leading-tight\">{bookTitle}</h1>\r\n                            <p className=\"text-[8px] font-sans tracking-widest opacity-90 uppercase border-t border-white/30 pt-1 inline-block\">{bookAuthor}</p>\r\n                        </div>\r\n\r\n                        {/* Spine Highlight */}\r\n                        <div className=\"absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-white/30 to-transparent opacity-40\" />\r\n                        <div className=\"absolute left-[12px] top-0 bottom-0 w-[1px] bg-black/30\" />\r\n                    </div>\r\n\r\n                    {/* Back Face (Inner Cover) */}\r\n                    <div\r\n                        className=\"absolute inset-0 w-full h-full backface-hidden rounded-l-md rounded-r-sm bg-[#fdfbf7] rotate-y-180 flex flex-col p-8 border-r border-neutral-200 shadow-xl cursor-pointer hover:bg-[#fcfaf5] transition-colors\"\r\n                        style={{ transform: 'rotateY(180deg) translateZ(0.5px)' }}\r\n                        onClick={(e) => {\r\n                            e.stopPropagation();\r\n                            prevPage();\r\n                        }}\r\n                    >\r\n                        <div className=\"flex-1 flex flex-col justify-center items-center text-center opacity-80\">\r\n                            <h2 className=\"text-2xl font-serif text-neutral-800 mb-2 tracking-wide\">{bookTitle}</h2>\r\n                            <div className=\"w-8 h-[1px] bg-neutral-300 mb-3\" />\r\n                            <p className=\"text-xs text-neutral-500 uppercase tracking-widest\">Interactive Edition</p>\r\n                        </div>\r\n                    </div>\r\n                </motion.div>\r\n\r\n                {/* Pages Stack */}\r\n                <div className=\"absolute inset-0 w-full h-full z-0\" style={{ transformStyle: 'preserve-3d' }}>\r\n                    {pages.map((page, index) => {\r\n                        const isFlipped = index <= currentPageIndex;\r\n                        // Stagger delays slightly for a realistic \"whip\" effect if user clicks fast, \r\n                        // but mostly we want instant feedback with smooth transition.\r\n\r\n                        return (\r\n                            <motion.div\r\n                                key={index}\r\n                                className=\"absolute inset-0 w-full h-full origin-left bg-[#fdfbf7] rounded-r-md rounded-l-sm shadow-sm border border-neutral-100\"\r\n                                style={{ transformStyle: 'preserve-3d' }}\r\n                                initial={{ rotateY: 0, zIndex: pages.length - index }}\r\n                                animate={{\r\n                                    rotateY: isFlipped ? -180 : 0,\r\n                                    zIndex: isFlipped ? index + 1 : pages.length - index\r\n                                }}\r\n                                transition={{\r\n                                    duration: 0.6,\r\n                                    ease: [0.645, 0.045, 0.355, 1]\r\n                                }}\r\n                            >\r\n                                {/* Front Face (Right Side) */}\r\n                                <div\r\n                                    className=\"absolute inset-0 w-full h-full backface-hidden p-8 flex flex-col bg-[#fdfbf7] cursor-pointer hover:bg-[#fcfaf5] transition-colors\"\r\n                                    style={{ transform: 'translateZ(0.5px)' }}\r\n                                    onClick={(e) => {\r\n                                        e.stopPropagation();\r\n                                        nextPage();\r\n                                    }}\r\n                                >\r\n                                    <div className=\"flex-1\">\r\n                                        <div className=\"text-xs text-neutral-400 text-right mb-4 font-sans tracking-wider\">\r\n                                            {page.pageNumber * 2 - 1}\r\n                                        </div>\r\n                                        <div className=\"prose prose-neutral prose-sm max-w-none font-serif text-neutral-700 leading-relaxed select-none\">\r\n                                            {page.title && (\r\n                                                <h3 className=\"text-xl font-medium text-center mb-6 text-neutral-800 tracking-tight\">\r\n                                                    {page.title}\r\n                                                </h3>\r\n                                            )}\r\n                                            {page.content}\r\n                                        </div>\r\n                                    </div>\r\n                                    <div className=\"absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-black/5 to-transparent pointer-events-none mix-blend-multiply\" />\r\n                                </div>\r\n\r\n                                {/* Back Face (Left Side) */}\r\n                                <div\r\n                                    className=\"absolute inset-0 w-full h-full backface-hidden rotate-y-180 bg-[#fdfbf7] border-r border-neutral-200 overflow-hidden p-8 flex flex-col cursor-pointer hover:bg-[#fcfaf5] transition-colors\"\r\n                                    style={{ transform: 'rotateY(180deg) translateZ(0.5px)' }}\r\n                                    onClick={(e) => {\r\n                                        e.stopPropagation();\r\n                                        prevPage();\r\n                                    }}\r\n                                >\r\n                                    <div className=\"absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-black/5 to-transparent pointer-events-none mix-blend-multiply\" />\r\n\r\n                                    <div className=\"flex-1 overflow-hidden\">\r\n                                        <div className=\"text-xs text-neutral-400 text-left mb-4 font-sans tracking-wider\">\r\n                                            {page.pageNumber * 2}\r\n                                        </div>\r\n                                        <div className=\"prose prose-neutral prose-sm max-w-none font-serif text-neutral-700 leading-relaxed select-none h-full flex flex-col\">\r\n                                            {page.backContent ? (\r\n                                                <div className=\"flex-1\">\r\n                                                    {page.backContent}\r\n                                                </div>\r\n                                            ) : (\r\n                                                <div className=\"w-full h-full flex items-center justify-center opacity-[0.03]\">\r\n                                                    <span className=\"font-serif text-8xl italic font-bold text-black\">\r\n                                                        {page.pageNumber * 2}\r\n                                                    </span>\r\n                                                </div>\r\n                                            )}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </motion.div>\r\n                        );\r\n                    })}\r\n\r\n                    {/* Back Cover (Static) */}\r\n                    <div\r\n                        className=\"absolute inset-0 w-full h-full bg-[#fdfbf7] rounded-r-md rounded-l-sm shadow-xl border border-neutral-200\"\r\n                        style={{ transform: 'translateZ(-1px)', zIndex: -1 }}\r\n                    >\r\n                        <div className=\"absolute inset-0 p-8 flex flex-col items-center justify-center text-center opacity-40\">\r\n                            <p className=\"font-serif text-neutral-500 italic\">The End</p>\r\n                            <button\r\n                                onClick={restartBook}\r\n                                className=\"mt-4 flex items-center gap-2 px-4 py-2 rounded-full bg-neutral-100 hover:bg-neutral-200 transition-colors text-sm text-neutral-600 cursor-pointer\"\r\n                            >\r\n                                <RefreshCcw size={14} /> Read Again\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                {/* Controls Bar Removed */}\r\n\r\n            </motion.div>\r\n\r\n            {/* Side Navigation Arrows */}\r\n            <AnimatePresence>\r\n                {isOpen && (\r\n                    <>\r\n                        {/* Close Button */}\r\n                        <motion.button\r\n                            initial={{ opacity: 0, scale: 0.8 }}\r\n                            animate={{ opacity: 1, scale: 1 }}\r\n                            exit={{ opacity: 0, scale: 0.8 }}\r\n                            onClick={handleCloseBook}\r\n                            className=\"absolute top-8 right-8 p-2 rounded-full bg-white/50 dark:bg-neutral-800/50 hover:bg-white dark:hover:bg-neutral-800 border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700 backdrop-blur-sm text-neutral-800 dark:text-neutral-100 z-[1000] transition-all hover:scale-110 shadow-sm hover:shadow-xl\"\r\n                        >\r\n                            <X size={24} />\r\n                        </motion.button>\r\n                    </>\r\n                )}\r\n            </AnimatePresence>\r\n\r\n            {/* Hint */}\r\n            {!isOpen && (\r\n                <motion.div\r\n                    initial={{ opacity: 0, y: 10 }}\r\n                    animate={{ opacity: 1, y: 0 }}\r\n                    transition={{ delay: 1, duration: 1 }}\r\n                    className=\"absolute bottom-4 text-neutral-500 dark:text-neutral-400 text-sm font-medium tracking-widest uppercase cursor-pointer z-50 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors\"\r\n                    onClick={handleOpenBook}\r\n                >\r\n                    Click to Open\r\n                </motion.div>\r\n            )}\r\n        </div>\r\n    );\r\n}\r\n",
      "type": "registry:ui",
      "target": "components/ui/interactive-book.tsx"
    }
  ]
}