@djangocfg/ui-tools 2.1.136 → 2.1.137

package/package.json

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

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

@@ -6,6 +6,7 @@ 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 { normalizeImageUrl } from '../../utils'
 
 /**
  * GalleryImage - Single image with loading state and error handling

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

@@ -1,9 +1,10 @@
 'use client'
 
-import { memo, useCallback, useMemo, useState } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { cn } from '@djangocfg/ui-core/lib'
 import { Play } from 'lucide-react'
 import type { GalleryMediaItem } from '../../types'
+import { normalizeImageUrl } from '../../utils'
 
 export type GalleryGridLayout =
   | 'auto'
@@ -347,16 +348,10 @@ const GridItem = memo(function GridItem({
   showBadge = false,
   badgeCount = 0,
 }: GridItemProps) {
-  const [isLoaded, setIsLoaded] = useState(false)
-
   const handleClick = useCallback(() => {
     onClick(index)
   }, [onClick, index])
 
-  const handleLoad = useCallback(() => {
-    setIsLoaded(true)
-  }, [])
-
   if (!image) return null
 
   const isVideo = image.type === 'video'
@@ -376,17 +371,15 @@ const GridItem = memo(function GridItem({
       aria-label={`View image ${index + 1}`}
     >
       <img
-        src={image.thumbnail || image.src}
+        src={normalizeImageUrl(image.thumbnail || image.src)}
         alt={image.alt || `Image ${index + 1}`}
         className={cn(
           'w-full h-full object-cover transition-transform duration-300 group-hover:scale-105',
-          // Staggered reveal animation
-          staggerDelay > 0 && !isLoaded && 'opacity-0 scale-105',
-          staggerDelay > 0 && isLoaded && 'animate-in fade-in zoom-in-95 duration-300 fill-mode-both'
+          // Staggered reveal animation with CSS only (no JS state needed)
+          staggerDelay > 0 && 'animate-in fade-in zoom-in-95 duration-300 fill-mode-both'
         )}
-        style={staggerDelay > 0 && isLoaded ? { animationDelay } : undefined}
+        style={staggerDelay > 0 ? { animationDelay } : undefined}
         loading={index === 0 ? 'eager' : 'lazy'}
-        onLoad={handleLoad}
       />
 
       {/* Hover overlay */}

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

@@ -9,3 +9,8 @@ export type {
   ImageOrientation,
   AnalyzedImage,
 } from './imageAnalysis'
+
+export {
+  normalizeImageUrl,
+  normalizeImageUrls,
+} from './normalizeUrl'

package/src/tools/Gallery/utils/normalizeUrl.ts

@@ -0,0 +1,31 @@
+/**
+ * URL normalization utilities for Gallery
+ *
+ * Handles Mixed Content issues by upgrading HTTP to HTTPS
+ * when the page is served over HTTPS.
+ */
+
+/**
+ * Normalize image URL to prevent Mixed Content errors
+ * Upgrades HTTP to HTTPS when page is served over HTTPS
+ */
+export function normalizeImageUrl(url: string | undefined): string {
+  if (!url) return ''
+
+  // Check if we're on HTTPS page
+  const isSecurePage = typeof window !== 'undefined' && window.location.protocol === 'https:'
+
+  // Upgrade HTTP to HTTPS if on secure page
+  if (isSecurePage && url.startsWith('http://')) {
+    return url.replace('http://', 'https://')
+  }
+
+  return url
+}
+
+/**
+ * Normalize array of URLs
+ */
+export function normalizeImageUrls(urls: (string | undefined)[]): string[] {
+  return urls.map(normalizeImageUrl).filter(Boolean) as string[]
+}