{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reveal",
  "title": "Reveal",
  "description": "A component that reveals its content on click",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/slide-cn/reveal.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { useState, useRef, useEffect } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n\n/**\n * Reveal\n *\n * Progressive disclosure wrapper that reveals its content via a 3D card flip on click.\n *\n * Responsibilities:\n * - Hides content behind a frosted-glass back face until revealed\n * - Measures content dimensions and flips about the longer axis for a natural look:\n *     - Landscape content (width >= height): flips top-to-bottom (rotateX)\n *     - Portrait content (width < height): flips left-to-right (rotateY)\n * - Tracks dimension changes via ResizeObserver so the axis stays correct on resize\n * - Handles one-way reveal interaction\n * - Works with any child content (text, cards, layouts)\n *\n * Interaction model:\n * - Click to reveal\n * - One-way only (cannot be hidden again)\n * - No hover or keyboard interaction by default\n *\n * Usage:\n * ```tsx\n * <Reveal>\n *   <p>This bullet is revealed on click</p>\n * </Reveal>\n * ```\n *\n * Notes:\n * - Reveal is a presentation affordance, not a security feature\n * - Intended for step-by-step storytelling inside slides\n * - The back face uses backdrop-blur, so it needs a non-transparent background\n *   somewhere in the ancestor tree to look correct\n */\n\n\ninterface RevealProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nexport function Reveal({ children, className }: RevealProps) {\n\tconst [isRevealed, setIsRevealed] = useState(false);\n\t// \"X\" = flip top-to-bottom (landscape content, longer horizontal axis)\n\t// \"Y\" = flip left-to-right (portrait content, longer vertical axis)\n\tconst [axis, setAxis] = useState<\"X\" | \"Y\">(\"X\");\n\tconst contentRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (!contentRef.current) return;\n\n\t\tconst update = (width: number, height: number) => {\n\t\t\tsetAxis(width >= height ? \"X\" : \"Y\");\n\t\t};\n\n\t\tconst { width, height } = contentRef.current.getBoundingClientRect();\n\t\tupdate(width, height);\n\n\t\tconst observer = new ResizeObserver(([entry]) => {\n\t\t\tconst { width, height } = entry.contentRect;\n\t\t\tupdate(width, height);\n\t\t});\n\t\tobserver.observe(contentRef.current);\n\t\treturn () => observer.disconnect();\n\t}, []);\n\n\tconst faceTransform = axis === \"X\" ? \"rotateX(180deg)\" : \"rotateY(180deg)\";\n\tconst animateProps = axis === \"X\"\n\t\t? { rotateX: isRevealed ? 180 : 0 }\n\t\t: { rotateY: isRevealed ? 180 : 0 };\n\n\treturn (\n\t\t<div\n\t\t\tonClick={() => !isRevealed && setIsRevealed(true)}\n\t\t\tclassName={cn(!isRevealed && \"cursor-pointer\", className)}\n\t\t\tstyle={{ perspective: \"1200px\" }}\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tstyle={{ transformStyle: \"preserve-3d\", position: \"relative\" }}\n\t\t\t\tanimate={animateProps}\n\t\t\t\ttransition={{ duration: 0.6, ease: \"easeInOut\" }}\n\t\t\t>\n\t\t\t\t{/* Back face — absolute so it doesn't affect layout height */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute inset-0 rounded-md bg-background/30 backdrop-blur-sm border border-border/40 flex items-center justify-center\"\n\t\t\t\t\tstyle={{ backfaceVisibility: \"hidden\" }}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"text-foreground/60 text-sm select-none font-medium\">\n\t\t\t\t\t\tClick to reveal\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Front face — in normal flow to set height, starts facing away */}\n\t\t\t\t<div\n\t\t\t\t\tref={contentRef}\n\t\t\t\t\tclassName={cn(\"w-full\", !isRevealed && \"select-none\")}\n\t\t\t\t\tstyle={{ backfaceVisibility: \"hidden\", transform: faceTransform }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n}\n\n",
      "type": "registry:component",
      "target": "components/ui/slide-cn/reveal.tsx"
    }
  ],
  "type": "registry:component"
}