{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "image-comparison-slider",
  "type": "registry:ui",
  "title": "Split Image Comparison Slider",
  "description": "Interactive before-and-after split image comparison container with draggable center divider handle.",
  "category": "layout",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/layout/image-comparison-slider/image-comparison-slider.tsx",
      "type": "registry:ui",
      "target": "components/ui/image-comparison-slider.tsx",
      "content": "import React, { useState, useRef } from 'react';\nimport { ArrowsLeftRight } from '@phosphor-icons/react';\n\nexport const ImageComparisonSlider: React.FC = () => {\n  const [sliderPos, setSliderPos] = useState(50);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const handleMove = (clientX: number) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));\n    setSliderPos((x / rect.width) * 100);\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={(e) => e.buttons === 1 && handleMove(e.clientX)}\n      onTouchMove={(e) => handleMove(e.touches[0].clientX)}\n      className=\"relative w-full max-w-md h-48 rounded-2xl overflow-hidden border border-zinc-200 dark:border-white/10 select-none cursor-ew-resize\"\n    >\n      {/* Background (After / Wireframe) */}\n      <div className=\"absolute inset-0 bg-zinc-900 flex items-center justify-center\">\n        <div className=\"text-center font-mono text-zinc-500\">\n          <span className=\"text-xs uppercase tracking-widest text-indigo-400 font-bold\">AFTER (OPTIMIZED)</span>\n          <p className=\"text-[11px] mt-1 text-zinc-400\">Zero JS Payload • 60 FPS Canvas WebGL</p>\n        </div>\n      </div>\n\n      {/* Foreground (Before / Legacy) with clipPath */}\n      <div\n        className=\"absolute inset-0 bg-indigo-950 flex items-center justify-center\"\n        style={{ clipPath: `polygon(0 0, ${sliderPos}% 0, ${sliderPos}% 100%, 0 100%)` }}\n      >\n        <div className=\"text-center font-mono text-white\">\n          <span className=\"text-xs uppercase tracking-widest text-cyan-300 font-bold\">BEFORE (LEGACY)</span>\n          <p className=\"text-[11px] mt-1 text-indigo-200\">1.4 MB Bundle • 18 DOM Mutations/sec</p>\n        </div>\n      </div>\n\n      {/* Divider Bar */}\n      <div\n        style={{ left: `${sliderPos}%` }}\n        className=\"absolute top-0 bottom-0 w-0.5 bg-white -translate-x-1/2 pointer-events-none z-20 flex items-center justify-center\"\n      >\n        <div className=\"w-6 h-6 rounded-full bg-white text-zinc-900 shadow-lg flex items-center justify-center\">\n          <ArrowsLeftRight size={12} weight=\"bold\" />\n        </div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}