{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "arch-gallery",
  "title": "Arch Gallery",
  "description": "Fanned photo arch with center-forward stacking; hover lifts a card and scales it up.",
  "files": [
    {
      "path": "components/gallery/ArchGallery.tsx",
      "content": "'use client';\n\nimport { useState, type CSSProperties } from 'react';\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n//\n// items         Gallery entries — image src and optional alt\n// cardWidth     Card width in px\n// cardHeight    Card height in px\n// cornerRadius  Border radius in px\n// className     Styles for the outer shell\n//\ntype GalleryItem = {\n  image: { src: string; alt?: string };\n};\n\ntype ArchGalleryProps = {\n  items?: GalleryItem[];\n  cardWidth?: number;\n  cardHeight?: number;\n  cornerRadius?: number;\n  className?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Defaults\n// ---------------------------------------------------------------------------\nconst DEFAULT_ITEMS: GalleryItem[] = [\n  {\n    image: {\n      src: 'https://assets.uniquel.io/components/stock/photo-1497366216548-37526070297c.jpg',\n      alt: 'Minimal office workspace',\n    },\n  },\n  {\n    image: {\n      src: 'https://assets.uniquel.io/components/stock/photo-1487958449943-2429e8be8625.jpg',\n      alt: 'Modern concrete building',\n    },\n  },\n  {\n    image: {\n      src: 'https://assets.uniquel.io/components/stock/photo-1503387762-592deb58ef4e.jpg',\n      alt: 'Architectural interior detail',\n    },\n  },\n  {\n    image: {\n      src: 'https://assets.uniquel.io/components/stock/photo-1600607687939-ce8a6c25118c.jpg',\n      alt: 'Bright living room interior',\n    },\n  },\n  {\n    image: {\n      src: 'https://assets.uniquel.io/components/stock/photo-1486325212027-8081e485255e.jpg',\n      alt: 'Curved glass tower',\n    },\n  },\n  {\n    image: {\n      src: 'https://assets.uniquel.io/components/stock/photo-1618221195710-dd6b41faaea6.jpg',\n      alt: 'Styled interior corner',\n    },\n  },\n  {\n    image: {\n      src: 'https://assets.uniquel.io/components/stock/photo-1616486338812-3dadae4b4ace.jpg',\n      alt: 'Warm living space',\n    },\n  },\n];\n\nconst ROTATE_STEP = 6;\nconst Y_STEP = 18;\nconst OVERLAP = 0.58;\nconst HOVER_SCALE = 1.08;\nconst HOVER_LIFT = 16;\n\nexport default function ArchGallery({\n  items = DEFAULT_ITEMS,\n  cardWidth = 180,\n  cardHeight = 240,\n  cornerRadius = 18,\n  className = '',\n}: ArchGalleryProps) {\n  const deck = items.length ? items : DEFAULT_ITEMS;\n  const total = deck.length;\n  const mid = (total - 1) / 2;\n  const [hovered, setHovered] = useState<number | null>(null);\n\n  const stageWidth = cardWidth + Math.abs(mid) * 2 * cardWidth * OVERLAP + cardWidth * 0.2;\n  const stageHeight = cardHeight + Math.abs(mid) * Y_STEP + 48;\n\n  return (\n    <div\n      className={['flex w-full items-center justify-center py-10', className]\n        .filter(Boolean)\n        .join(' ')}\n      role='group'\n      aria-label='Image gallery'\n    >\n      <div\n        className='relative'\n        style={{ width: stageWidth, height: stageHeight }}\n      >\n        {deck.map((entry, index) => {\n          const offset = index - mid;\n          const rotate = offset * ROTATE_STEP;\n          const translateY = Math.abs(offset) * Y_STEP;\n          const translateX = offset * cardWidth * OVERLAP;\n          const baseZ = total - Math.abs(offset);\n          const isHovered = hovered === index;\n\n          const cardStyle: CSSProperties = {\n            position: 'absolute',\n            left: '50%',\n            top: '50%',\n            width: cardWidth,\n            height: cardHeight,\n            marginLeft: -cardWidth / 2,\n            marginTop: -cardHeight / 2,\n            borderRadius: cornerRadius,\n            overflow: 'hidden',\n            transformOrigin: 'center center',\n            transform: isHovered\n              ? `translate(${translateX}px, ${translateY - HOVER_LIFT}px) rotate(0deg) scale(${HOVER_SCALE})`\n              : `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(1)`,\n            zIndex: isHovered ? total + 1 : baseZ,\n            transition:\n              'transform 280ms cubic-bezier(0.22, 1, 0.36, 1), z-index 0ms',\n            boxShadow:\n              '0 12px 28px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08)',\n            cursor: 'pointer',\n            backgroundColor: '#f3f4f6',\n          };\n\n          return (\n            <div\n              key={`${entry.image.src}-${index}`}\n              style={cardStyle}\n              onMouseEnter={() => setHovered(index)}\n              onMouseLeave={() => setHovered(null)}\n              onFocus={() => setHovered(index)}\n              onBlur={() => setHovered(null)}\n              tabIndex={0}\n              aria-label={entry.image.alt || `Photo ${index + 1}`}\n            >\n              <img\n                src={entry.image.src}\n                alt={entry.image.alt || ''}\n                draggable={false}\n                className='pointer-events-none absolute inset-0 h-full w-full select-none object-cover'\n              />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/gallery/ArchGallery.tsx"
    }
  ],
  "categories": [
    "gallery"
  ],
  "type": "registry:component"
}