@djangocfg/ui-tools 2.1.116 → 2.1.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.116",
+  "version": "2.1.119",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -58,11 +58,12 @@
     "build": "tsup",
     "clean": "rm -rf dist",
     "dev": "tsup --watch",
+    "playground": "vite --config playground/vite.config.ts",
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.116",
-    "@djangocfg/ui-core": "^2.1.116",
+    "@djangocfg/i18n": "^2.1.119",
+    "@djangocfg/ui-core": "^2.1.119",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -94,14 +95,23 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.116",
-    "@djangocfg/typescript-config": "^2.1.116",
+    "@djangocfg/i18n": "^2.1.119",
+    "@djangocfg/typescript-config": "^2.1.119",
+    "@djangocfg/ui-core": "^2.1.119",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "lucide-react": "^0.545.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^6.3.0",
+    "autoprefixer": "^10.4.20"
   },
   "publishConfig": {
     "access": "public"

package/src/tools/Gallery/components/Gallery.tsx

@@ -5,13 +5,13 @@ import { cn } from '@djangocfg/ui-core/lib'
 import { useTypedT, type I18nTranslations } from '@djangocfg/i18n'
 import { ImageOff } from 'lucide-react'
 import { useGallery } from '../hooks/useGallery'
-import { GalleryGrid } from './GalleryGrid'
-import { GalleryCarousel } from './GalleryCarousel'
+import { GalleryGrid } from './preview'
+import { GalleryCarousel } from './preview'
 import type { GalleryProps } from '../types'
 
 // Lazy load lightbox - only loaded when user opens it
 const GalleryLightbox = lazy(() =>
-  import('./GalleryLightbox').then((mod) => ({ default: mod.GalleryLightbox }))
+  import('./lightbox').then((mod) => ({ default: mod.GalleryLightbox }))
 )
 
 /**

package/src/tools/Gallery/components/compact/GalleryCompact.tsx

@@ -0,0 +1,298 @@
+'use client'
+
+import { memo, useCallback, useEffect, useState, useMemo } from 'react'
+import { cn } from '@djangocfg/ui-core/lib'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from '@djangocfg/ui-core/components'
+import { ChevronLeft, ChevronRight, ImageOff } from 'lucide-react'
+import { GalleryMedia } from '../media'
+import type { GalleryMediaItem } from '../../types'
+
+export interface GalleryCompactProps {
+  /** Array of images to display */
+  images: GalleryMediaItem[]
+  /** Show dots indicator (default: true) */
+  showDots?: boolean
+  /** Max dots to show (default: 5) */
+  maxDots?: number
+  /** Show counter badge (default: false) */
+  showCounter?: boolean
+  /** Show navigation arrows on hover (default: true) */
+  showArrows?: boolean
+  /** Enable zoom effect on hover (default: true) */
+  enableZoom?: boolean
+  /** On image click callback */
+  onClick?: () => void
+  /** Additional CSS class */
+  className?: string
+}
+
+/**
+ * GalleryCompact - Minimal carousel for property/vehicle cards
+ *
+ * Features:
+ * - Simple swipe carousel
+ * - Dots indicator (mobile-style)
+ * - Navigation arrows on hover (desktop)
+ * - Hover zoom effect on images
+ * - Lazy loading - only loads active image + neighbors
+ * - Fills parent container
+ * - Stops event propagation on navigation
+ */
+export const GalleryCompact = memo(function GalleryCompact({
+  images,
+  showDots = true,
+  maxDots = 5,
+  showCounter = false,
+  showArrows = true,
+  enableZoom = true,
+  onClick,
+  className,
+}: GalleryCompactProps) {
+  const [api, setApi] = useState<CarouselApi>()
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [isHovered, setIsHovered] = useState(false)
+
+  const total = images.length
+  const hasMultiple = total > 1
+
+  // Determine which images should be loaded (current + neighbors for smooth transition)
+  const loadedIndices = useMemo(() => {
+    if (total === 0) return new Set<number>()
+    const indices = new Set<number>()
+    // Always load first image
+    indices.add(0)
+    // Load current
+    indices.add(currentIndex)
+    // Load neighbors for smooth transitions
+    if (hasMultiple) {
+      indices.add((currentIndex - 1 + total) % total)
+      indices.add((currentIndex + 1) % total)
+    }
+    return indices
+  }, [currentIndex, total, hasMultiple])
+
+  // Listen to carousel changes
+  useEffect(() => {
+    if (!api) return
+
+    const onSelect = () => {
+      setCurrentIndex(api.selectedScrollSnap())
+    }
+
+    api.on('select', onSelect)
+    return () => {
+      api.off('select', onSelect)
+    }
+  }, [api])
+
+  // Navigation handlers
+  const handlePrev = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      api?.scrollPrev()
+    },
+    [api]
+  )
+
+  const handleNext = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      api?.scrollNext()
+    },
+    [api]
+  )
+
+  // Dot click handler
+  const handleDotClick = useCallback(
+    (e: React.MouseEvent, index: number) => {
+      e.preventDefault()
+      e.stopPropagation()
+      api?.scrollTo(index)
+    },
+    [api]
+  )
+
+  // Handle container click
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      // Don't trigger if clicking on navigation elements
+      if ((e.target as HTMLElement).closest('[data-nav]')) {
+        return
+      }
+      onClick?.()
+    },
+    [onClick]
+  )
+
+  // Empty state
+  if (total === 0) {
+    return (
+      <div className={cn('relative w-full h-full bg-muted flex items-center justify-center', className)}>
+        <ImageOff className="w-8 h-8 text-muted-foreground/50" />
+      </div>
+    )
+  }
+
+  // Single image - no carousel needed
+  if (!hasMultiple) {
+    return (
+      <div
+        className={cn('relative w-full h-full overflow-hidden group', className)}
+        onClick={onClick}
+      >
+        <div className={cn(
+          'w-full h-full transition-transform duration-500 ease-out',
+          enableZoom && 'group-hover:scale-110'
+        )}>
+          <GalleryMedia
+            media={images[0]}
+            className="w-full h-full"
+            priority
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Calculate visible dots
+  const visibleDots = images.slice(0, maxDots).map((_, i) => i)
+  const remainingCount = total > maxDots ? total - maxDots : 0
+
+  return (
+    <div
+      className={cn('relative w-full h-full group/gallery', className)}
+      onClick={handleClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Carousel
+        setApi={setApi}
+        opts={{
+          loop: true,
+        }}
+        className="w-full h-full"
+      >
+        <CarouselContent className="-ml-0 h-full">
+          {images.map((image, index) => {
+            const shouldLoad = loadedIndices.has(index)
+            const isActive = index === currentIndex
+
+            return (
+              <CarouselItem key={image.id} className="pl-0 h-full overflow-hidden">
+                <div className={cn(
+                  'w-full h-full transition-transform duration-500 ease-out',
+                  enableZoom && isActive && isHovered && 'scale-110'
+                )}>
+                  {shouldLoad ? (
+                    <GalleryMedia
+                      media={image}
+                      className="w-full h-full"
+                      priority={index === 0}
+                    />
+                  ) : (
+                    // Placeholder for unloaded images
+                    <div className="w-full h-full bg-muted animate-pulse" />
+                  )}
+                </div>
+              </CarouselItem>
+            )
+          })}
+        </CarouselContent>
+      </Carousel>
+
+      {/* Navigation arrows - always visible but subtle, more prominent on hover */}
+      {showArrows && (
+        <>
+          <button
+            data-nav
+            type="button"
+            className={cn(
+              'absolute left-2 top-1/2 -translate-y-1/2 z-10',
+              'w-7 h-7 rounded-full',
+              'bg-black/30 backdrop-blur-sm text-white/80',
+              'flex items-center justify-center',
+              'transition-all duration-200',
+              // Always visible but subtle, more prominent on hover
+              'opacity-60 group-hover/gallery:opacity-100',
+              'hover:bg-black/60 hover:text-white hover:scale-110',
+              'active:scale-95',
+              'focus:outline-none focus:ring-2 focus:ring-white/50'
+            )}
+            onClick={handlePrev}
+            aria-label="Previous image"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+          <button
+            data-nav
+            type="button"
+            className={cn(
+              'absolute right-2 top-1/2 -translate-y-1/2 z-10',
+              'w-7 h-7 rounded-full',
+              'bg-black/30 backdrop-blur-sm text-white/80',
+              'flex items-center justify-center',
+              'transition-all duration-200',
+              // Always visible but subtle, more prominent on hover
+              'opacity-60 group-hover/gallery:opacity-100',
+              'hover:bg-black/60 hover:text-white hover:scale-110',
+              'active:scale-95',
+              'focus:outline-none focus:ring-2 focus:ring-white/50'
+            )}
+            onClick={handleNext}
+            aria-label="Next image"
+          >
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </>
+      )}
+
+      {/* Dots indicator */}
+      {showDots && (
+        <div
+          data-nav
+          className={cn(
+            'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',
+            'flex items-center gap-1.5',
+            'px-2 py-1 rounded-full',
+            'bg-black/30 backdrop-blur-sm'
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {visibleDots.map((index) => (
+            <button
+              key={index}
+              type="button"
+              className={cn(
+                'rounded-full transition-all duration-200',
+                index === currentIndex
+                  ? 'w-2 h-2 bg-white shadow-[0_0_4px_rgba(255,255,255,0.8)]'
+                  : 'w-1.5 h-1.5 bg-white/50 hover:bg-white/80'
+              )}
+              onClick={(e) => handleDotClick(e, index)}
+              aria-label={`Go to image ${index + 1}`}
+            />
+          ))}
+          {remainingCount > 0 && (
+            <span className="text-white/80 text-[10px] font-medium ml-0.5">
+              +{remainingCount}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Counter badge */}
+      {showCounter && (
+        <div className="absolute bottom-3 right-3 z-10 bg-black/50 backdrop-blur-sm text-white text-xs px-2 py-1 rounded-full font-medium">
+          {currentIndex + 1} / {total}
+        </div>
+      )}
+    </div>
+  )
+})

package/src/tools/Gallery/components/compact/index.ts

@@ -0,0 +1 @@
+export { GalleryCompact, type GalleryCompactProps } from './GalleryCompact'

package/src/tools/Gallery/components/index.ts

@@ -1,13 +1,18 @@
+// Main Gallery component
 export { Gallery } from './Gallery'
-export { GalleryCarousel } from './GalleryCarousel'
-export type { GalleryCarouselProps } from './GalleryCarousel'
-export { GalleryCompact } from './GalleryCompact'
-export type { GalleryCompactProps } from './GalleryCompact'
-export { GalleryGrid } from './GalleryGrid'
-export type { GalleryGridProps, GalleryGridLayout } from './GalleryGrid'
-export { GalleryImage } from './GalleryImage'
-export { GalleryVideo } from './GalleryVideo'
-export { GalleryMedia } from './GalleryMedia'
-export { GalleryThumbnails } from './GalleryThumbnails'
-export { GalleryThumbnailsVirtual } from './GalleryThumbnailsVirtual'
-export { GalleryLightbox } from './GalleryLightbox'
+
+// Compact mode (for cards)
+export { GalleryCompact, type GalleryCompactProps } from './compact'
+
+// Preview modes
+export { GalleryCarousel } from './preview'
+export { GalleryGrid, type GalleryGridProps, type GalleryGridLayout } from './preview'
+
+// Lightbox
+export { GalleryLightbox } from './lightbox'
+
+// Media components
+export { GalleryImage, GalleryVideo, GalleryMedia, type GalleryMediaProps } from './media'
+
+// Thumbnails
+export { GalleryThumbnails, GalleryThumbnailsVirtual } from './thumbnails'

package/src/tools/Gallery/components/{GalleryLightbox.tsx → lightbox/GalleryLightbox.tsx}

@@ -5,12 +5,12 @@ import { createPortal } from 'react-dom'
 import { cn } from '@djangocfg/ui-core/lib'
 import { useTypedT, type I18nTranslations } from '@djangocfg/i18n'
 import { X, ChevronLeft, ChevronRight, Download, Share2, ZoomIn, ZoomOut } from 'lucide-react'
-import { useSwipe } from '../hooks/useSwipe'
-import { usePreloadImages } from '../hooks/usePreloadImages'
-import { useZoom } from '../hooks/useZoom'
-import { GalleryMedia } from './GalleryMedia'
-import { GalleryThumbnails } from './GalleryThumbnails'
-import type { GalleryLightboxProps } from '../types'
+import { useSwipe } from '../../hooks/useSwipe'
+import { usePreloadImages } from '../../hooks/usePreloadImages'
+import { useZoom } from '../../hooks/useZoom'
+import { GalleryMedia } from '../media'
+import { GalleryThumbnails } from '../thumbnails'
+import type { GalleryLightboxProps } from '../../types'
 
 /**
  * GalleryLightbox - Fullscreen image viewer with zoom and navigation

package/src/tools/Gallery/components/lightbox/index.ts

@@ -0,0 +1 @@
+export { GalleryLightbox } from './GalleryLightbox'

package/src/tools/Gallery/components/{GalleryImage.tsx → media/GalleryImage.tsx}

@@ -5,7 +5,7 @@ import { cn } from '@djangocfg/ui-core/lib'
 import { useTypedT, type I18nTranslations } from '@djangocfg/i18n'
 import { useImageLoader } from '@djangocfg/ui-core/hooks'
 import { ImageOff } from 'lucide-react'
-import type { GalleryImageProps } from '../types'
+import type { GalleryImageProps } from '../../types'
 
 /**
  * GalleryImage - Single image with loading state and error handling

package/src/tools/Gallery/components/{GalleryMedia.tsx → media/GalleryMedia.tsx}

@@ -3,7 +3,7 @@
 import { memo } from 'react'
 import { GalleryImage as GalleryImageComponent } from './GalleryImage'
 import { GalleryVideo } from './GalleryVideo'
-import type { GalleryMediaItem } from '../types'
+import type { GalleryMediaItem } from '../../types'
 
 export interface GalleryMediaProps {
   /** Media data */

package/src/tools/Gallery/components/{GalleryVideo.tsx → media/GalleryVideo.tsx}

@@ -4,7 +4,7 @@ import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
 import { useTypedT, type I18nTranslations } from '@djangocfg/i18n'
 import { Play, Pause, Volume2, VolumeX, Maximize, AlertCircle } from 'lucide-react'
-import type { GalleryMediaItem } from '../types'
+import type { GalleryMediaItem } from '../../types'
 
 export interface GalleryVideoProps {
   /** Video data */

package/src/tools/Gallery/components/media/index.ts

@@ -0,0 +1,3 @@
+export { GalleryImage } from './GalleryImage'
+export { GalleryVideo } from './GalleryVideo'
+export { GalleryMedia, type GalleryMediaProps } from './GalleryMedia'

package/src/tools/Gallery/components/{GalleryCarousel.tsx → preview/GalleryCarousel.tsx}

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { memo, useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
 import {
   Carousel,
@@ -12,9 +12,9 @@ import {
   type CarouselApi,
 } from '@djangocfg/ui-core/components'
 import { ZoomIn } from 'lucide-react'
-import { GalleryMedia } from './GalleryMedia'
-import { GalleryThumbnails } from './GalleryThumbnails'
-import type { GalleryMediaItem } from '../types'
+import { GalleryMedia } from '../media'
+import { GalleryThumbnails } from '../thumbnails'
+import type { GalleryMediaItem } from '../../types'
 
 export interface GalleryCarouselProps {
   images: GalleryMediaItem[]
@@ -136,6 +136,31 @@ export const GalleryCarousel = memo(function GalleryCarousel({
     [api]
   )
 
+  // Track pointer down position to distinguish click from drag
+  const pointerStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
+  const CLICK_THRESHOLD = 10 // pixels
+  const CLICK_TIME_THRESHOLD = 300 // ms
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    pointerStartRef.current = { x: e.clientX, y: e.clientY, time: Date.now() }
+  }, [])
+
+  const handlePointerUp = useCallback((e: React.PointerEvent) => {
+    if (!pointerStartRef.current || !enableLightbox || !onLightboxOpen) return
+
+    const { x, y, time } = pointerStartRef.current
+    const dx = Math.abs(e.clientX - x)
+    const dy = Math.abs(e.clientY - y)
+    const dt = Date.now() - time
+
+    // Only trigger click if pointer didn't move much and was quick
+    if (dx < CLICK_THRESHOLD && dy < CLICK_THRESHOLD && dt < CLICK_TIME_THRESHOLD) {
+      onLightboxOpen()
+    }
+
+    pointerStartRef.current = null
+  }, [enableLightbox, onLightboxOpen])
+
   return (
     <div className={cn('space-y-3', className)}>
       <Carousel
@@ -150,9 +175,10 @@ export const GalleryCarousel = memo(function GalleryCarousel({
           {images.map((image, index) => (
             <CarouselItem key={image.id} className="pl-0">
               <div
-                className="relative bg-muted cursor-pointer"
+                className={cn('relative bg-muted', enableLightbox && 'cursor-pointer')}
                 style={{ aspectRatio }}
-                onClick={enableLightbox ? onLightboxOpen : undefined}
+                onPointerDown={enableLightbox ? handlePointerDown : undefined}
+                onPointerUp={enableLightbox ? handlePointerUp : undefined}
               >
                 <GalleryMedia
                   media={image}

package/src/tools/Gallery/components/{GalleryGrid.tsx → preview/GalleryGrid.tsx}

@@ -3,7 +3,7 @@
 import { memo, useCallback, useMemo, useState } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
 import { Play } from 'lucide-react'
-import type { GalleryMediaItem } from '../types'
+import type { GalleryMediaItem } from '../../types'
 
 export type GalleryGridLayout =
   | 'auto'

package/src/tools/Gallery/components/preview/index.ts

@@ -0,0 +1,2 @@
+export { GalleryCarousel } from './GalleryCarousel'
+export { GalleryGrid, type GalleryGridProps, type GalleryGridLayout } from './GalleryGrid'

package/src/tools/Gallery/components/{GalleryThumbnails.tsx → thumbnails/GalleryThumbnails.tsx}

@@ -2,7 +2,7 @@
 
 import { memo, useRef, useEffect, useCallback, Suspense, lazy } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
-import type { GalleryThumbnailsProps } from '../types'
+import type { GalleryThumbnailsProps } from '../../types'
 
 // Lazy load virtualized thumbnails - only for 50+ images
 const GalleryThumbnailsVirtual = lazy(() =>

package/src/tools/Gallery/components/{GalleryThumbnailsVirtual.tsx → thumbnails/GalleryThumbnailsVirtual.tsx}

@@ -2,8 +2,8 @@
 
 import { memo, useCallback, useEffect } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
-import { useVirtualList } from '../hooks/useVirtualList'
-import type { GalleryThumbnailsProps } from '../types'
+import { useVirtualList } from '../../hooks/useVirtualList'
+import type { GalleryThumbnailsProps } from '../../types'
 
 const SIZES = {
   sm: { width: 56, height: 40 },

package/src/tools/Gallery/components/thumbnails/index.ts

@@ -0,0 +1,2 @@
+export { GalleryThumbnails } from './GalleryThumbnails'
+export { GalleryThumbnailsVirtual } from './GalleryThumbnailsVirtual'

package/src/tools/Gallery/components/GalleryCompact.tsx

@@ -1,173 +0,0 @@
-'use client'
-
-import { memo, useCallback, useEffect, useState } from 'react'
-import { cn } from '@djangocfg/ui-core/lib'
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  type CarouselApi,
-} from '@djangocfg/ui-core/components'
-import { ImageOff } from 'lucide-react'
-import { GalleryMedia } from './GalleryMedia'
-import type { GalleryMediaItem } from '../types'
-
-export interface GalleryCompactProps {
-  /** Array of images to display */
-  images: GalleryMediaItem[]
-  /** Show dots indicator (default: true) */
-  showDots?: boolean
-  /** Max dots to show (default: 5) */
-  maxDots?: number
-  /** Show counter badge (default: false) */
-  showCounter?: boolean
-  /** On image click callback */
-  onClick?: () => void
-  /** Additional CSS class */
-  className?: string
-}
-
-/**
- * GalleryCompact - Minimal carousel for property cards
- *
- * Features:
- * - Simple swipe carousel
- * - Dots indicator (mobile-style)
- * - No arrows, thumbnails, or lightbox
- * - Fills parent container
- * - Stops event propagation on navigation
- */
-export const GalleryCompact = memo(function GalleryCompact({
-  images,
-  showDots = true,
-  maxDots = 5,
-  showCounter = false,
-  onClick,
-  className,
-}: GalleryCompactProps) {
-  const [api, setApi] = useState<CarouselApi>()
-  const [currentIndex, setCurrentIndex] = useState(0)
-
-  const total = images.length
-  const hasMultiple = total > 1
-
-  // Listen to carousel changes
-  useEffect(() => {
-    if (!api) return
-
-    const onSelect = () => {
-      setCurrentIndex(api.selectedScrollSnap())
-    }
-
-    api.on('select', onSelect)
-    return () => {
-      api.off('select', onSelect)
-    }
-  }, [api])
-
-  // Dot click handler - stops propagation to prevent card click
-  const handleDotClick = useCallback(
-    (e: React.MouseEvent, index: number) => {
-      e.preventDefault()
-      e.stopPropagation()
-      api?.scrollTo(index)
-    },
-    [api]
-  )
-
-  // Handle container click
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      // Don't trigger if clicking on dots
-      if ((e.target as HTMLElement).closest('[data-dots]')) {
-        return
-      }
-      onClick?.()
-    },
-    [onClick]
-  )
-
-  // Empty state
-  if (total === 0) {
-    return (
-      <div className={cn('relative w-full h-full bg-muted flex items-center justify-center', className)}>
-        <ImageOff className="w-8 h-8 text-muted-foreground/50" />
-      </div>
-    )
-  }
-
-  // Single image - no carousel needed
-  if (!hasMultiple) {
-    return (
-      <div className={cn('relative w-full h-full', className)} onClick={onClick}>
-        <GalleryMedia
-          media={images[0]}
-          className="w-full h-full"
-          priority
-        />
-      </div>
-    )
-  }
-
-  // Calculate visible dots
-  const visibleDots = images.slice(0, maxDots).map((_, i) => i)
-  const remainingCount = total > maxDots ? total - maxDots : 0
-
-  return (
-    <div className={cn('relative w-full h-full', className)} onClick={handleClick}>
-      <Carousel
-        setApi={setApi}
-        opts={{
-          loop: true,
-        }}
-        className="w-full h-full"
-      >
-        <CarouselContent className="-ml-0 h-full">
-          {images.map((image, index) => (
-            <CarouselItem key={image.id} className="pl-0 h-full">
-              <GalleryMedia
-                media={image}
-                className="w-full h-full"
-                priority={index === 0}
-              />
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-      </Carousel>
-
-      {/* Dots indicator */}
-      {showDots && (
-        <div
-          data-dots
-          className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 z-10"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {visibleDots.map((index) => (
-            <button
-              key={index}
-              type="button"
-              className={cn(
-                'rounded-full transition-all',
-                index === currentIndex
-                  ? 'w-2 h-2 bg-white shadow-[0_0_4px_rgba(255,255,255,0.8)]'
-                  : 'w-1.5 h-1.5 bg-white/50 hover:bg-white/70'
-              )}
-              onClick={(e) => handleDotClick(e, index)}
-              aria-label={`Go to image ${index + 1}`}
-            />
-          ))}
-          {remainingCount > 0 && (
-            <span className="text-white/70 text-[10px] ml-0.5">+{remainingCount}</span>
-          )}
-        </div>
-      )}
-
-      {/* Counter badge */}
-      {showCounter && (
-        <div className="absolute bottom-3 right-3 z-10 bg-black/60 backdrop-blur-sm text-white text-xs px-2 py-1 rounded-full">
-          {currentIndex + 1} / {total}
-        </div>
-      )}
-    </div>
-  )
-})