@djangocfg/ui-tools 2.1.124 → 2.1.126

package/package.json

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

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

@@ -252,7 +252,7 @@ export const GalleryLightbox = memo(function GalleryLightbox({
           {currentImage && (
             <div
               className={cn(
-                'relative max-w-full max-h-full select-none',
+                'relative w-full h-full select-none',
                 isZoomed ? 'cursor-grab' : enableZoom ? 'cursor-zoom-in' : 'cursor-default',
                 isDragging && 'cursor-grabbing'
               )}
@@ -267,7 +267,8 @@ export const GalleryLightbox = memo(function GalleryLightbox({
             >
               <GalleryMedia
                 media={currentImage}
-                className="max-w-full max-h-[calc(100vh-10rem)] object-contain pointer-events-none"
+                className="w-full h-full pointer-events-none"
+                objectFit="contain"
                 showLoading
                 priority
                 autoPlay

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 CSS background-image for reliable cover behavior
+ * Uses CSS background-image for cover mode, <img> for contain mode
  */
 export const GalleryImage = memo(function GalleryImage({
   image,
@@ -18,6 +18,7 @@ export const GalleryImage = memo(function GalleryImage({
   onError,
   onClick,
   priority = false,
+  objectFit = 'cover',
   className,
 }: GalleryImageProps) {
   const t = useTypedT<I18nTranslations>()
@@ -26,8 +27,13 @@ export const GalleryImage = memo(function GalleryImage({
   const { isLoading, isLoaded, hasError } = useImageLoader(image.src, callbacks)
 
   const backgroundStyle = useMemo(() =>
-    isLoaded ? { backgroundImage: `url(${image.src})` } : undefined
-  , [isLoaded, image.src])
+    isLoaded && objectFit === 'cover' ? {
+      backgroundImage: `url(${image.src})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+    } : undefined
+  , [isLoaded, image.src, objectFit])
 
   if (hasError) {
     return (
@@ -45,10 +51,33 @@ export const GalleryImage = memo(function GalleryImage({
     )
   }
 
+  // Use <img> tag for contain mode (lightbox)
+  if (objectFit === 'contain') {
+    return (
+      <div
+        className={cn(
+          'w-full h-full flex items-center justify-center',
+          isLoading && 'bg-muted animate-pulse',
+          className
+        )}
+        onClick={onClick}
+      >
+        {isLoaded && (
+          <img
+            src={image.src}
+            alt={image.alt || 'Gallery image'}
+            className="max-w-full max-h-full object-contain animate-in fade-in-0 duration-300"
+          />
+        )}
+      </div>
+    )
+  }
+
+  // Use background-image for cover mode (thumbnails, grid)
   return (
     <div
       className={cn(
-        'w-full h-full bg-cover bg-center bg-no-repeat',
+        'w-full h-full',
         isLoading && 'bg-muted animate-pulse',
         isLoaded && 'animate-in fade-in-0 duration-300',
         className

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

@@ -20,6 +20,8 @@ export interface GalleryMediaProps {
   priority?: boolean
   /** Autoplay video */
   autoPlay?: boolean
+  /** Object fit mode: cover for thumbnails/grid, contain for lightbox */
+  objectFit?: 'cover' | 'contain'
   /** Additional CSS class */
   className?: string
 }
@@ -35,6 +37,7 @@ export const GalleryMedia = memo(function GalleryMedia({
   onClick,
   priority = false,
   autoPlay = false,
+  objectFit = 'cover',
   className,
 }: GalleryMediaProps) {
   const isVideo = media.type === 'video' && media.videoSrc
@@ -60,6 +63,7 @@ export const GalleryMedia = memo(function GalleryMedia({
       onError={onError}
       onClick={onClick}
       priority={priority}
+      objectFit={objectFit}
       className={className}
     />
   )

package/src/tools/Gallery/types.ts

@@ -136,6 +136,8 @@ export interface GalleryImageProps {
   onClick?: () => void
   /** Priority loading */
   priority?: boolean
+  /** Object fit mode: cover for thumbnails/grid, contain for lightbox */
+  objectFit?: 'cover' | 'contain'
   /** Additional CSS class */
   className?: string
 }