@djangocfg/ui-tools 2.1.121 → 2.1.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.121",
+  "version": "2.1.124",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -62,8 +62,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.121",
-    "@djangocfg/ui-core": "^2.1.121",
+    "@djangocfg/i18n": "^2.1.124",
+    "@djangocfg/ui-core": "^2.1.124",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -95,10 +95,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.121",
+    "@djangocfg/i18n": "^2.1.124",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.121",
-    "@djangocfg/ui-core": "^2.1.121",
+    "@djangocfg/typescript-config": "^2.1.124",
+    "@djangocfg/ui-core": "^2.1.124",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",

package/src/tools/Gallery/Gallery.story.tsx

@@ -198,7 +198,7 @@ export const Interactive = () => {
       <div>
         <h3 className="text-lg font-semibold mb-4">GalleryCompact</h3>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div className="rounded-xl border border-border overflow-hidden">
+          <div className="rounded-xl border border-border overflow-hidden bg-black">
             <GalleryCompact
               images={SAMPLE_IMAGES}
               aspectRatio={aspectRatio}

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

@@ -78,7 +78,7 @@ export const GalleryCompact = memo(function GalleryCompact({
   const aspectRatioStyle = aspectRatioMap[aspectRatio]
   const containerStyle = aspectRatioStyle ? { aspectRatio: aspectRatioStyle } : undefined
   const hasFixedAspect = aspectRatio !== 'auto'
-  const containerClass = hasFixedAspect ? 'relative w-full' : 'relative w-full h-full'
+  const containerClass = hasFixedAspect ? 'relative w-full overflow-hidden' : 'relative w-full h-full overflow-hidden'
 
   useEffect(() => {
     setIsMounted(true)

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

@@ -9,7 +9,7 @@ import type { GalleryImageProps } from '../../types'
 
 /**
  * GalleryImage - Single image with loading state and error handling
- * Uses useImageLoader for preloading images before displaying
+ * Uses CSS background-image for reliable cover behavior
  */
 export const GalleryImage = memo(function GalleryImage({
   image,
@@ -25,6 +25,10 @@ export const GalleryImage = memo(function GalleryImage({
   const callbacks = useMemo(() => ({ onLoad, onError }), [onLoad, onError])
   const { isLoading, isLoaded, hasError } = useImageLoader(image.src, callbacks)
 
+  const backgroundStyle = useMemo(() =>
+    isLoaded ? { backgroundImage: `url(${image.src})` } : undefined
+  , [isLoaded, image.src])
+
   if (hasError) {
     return (
       <div
@@ -43,24 +47,16 @@ export const GalleryImage = memo(function GalleryImage({
 
   return (
     <div
-      className={cn('relative w-full h-full overflow-hidden', className)}
-      onClick={onClick}
-    >
-      {/* Loading skeleton */}
-      {showLoading && isLoading && (
-        <div className="absolute inset-0 bg-muted animate-pulse" />
+      className={cn(
+        'w-full h-full bg-cover bg-center bg-no-repeat',
+        isLoading && 'bg-muted animate-pulse',
+        isLoaded && 'animate-in fade-in-0 duration-300',
+        className
       )}
-
-      {/* Image - only render when preloaded */}
-      {isLoaded && (
-        <img
-          src={image.src}
-          alt={image.alt || 'Gallery image'}
-          className="absolute inset-0 w-full h-full object-cover animate-in fade-in-0 duration-300"
-          loading={priority ? 'eager' : 'lazy'}
-          decoding="async"
-        />
-      )}
-    </div>
+      style={backgroundStyle}
+      onClick={onClick}
+      role="img"
+      aria-label={image.alt || 'Gallery image'}
+    />
   )
 })