@inoo-ch/payload-image-optimizer 1.5.1 → 1.7.1

package/AGENT_DOCS.md

@@ -60,6 +60,7 @@ imageOptimizer({
   generateThumbHash: true,                          // generate blur placeholders
   replaceOriginal: true,                            // convert main file to primary format
   clientOptimization: true,                         // pre-resize in browser before upload
+  uniqueFileNames: false,                           // replace filenames with UUIDs
   disabled: false,                                  // keep fields but skip all processing
 })
 ```
@@ -70,6 +71,7 @@ imageOptimizer({
 | `formats` | `{ format: 'webp' \| 'avif', quality: number }[]` | `[{ format: 'webp', quality: 80 }]` | Output formats to generate. |
 | `maxDimensions` | `{ width: number, height: number }` | `{ width: 2560, height: 2560 }` | Maximum image dimensions (fit inside, no upscaling). |
 | `stripMetadata` | `boolean` | `true` | Strip EXIF, ICC, XMP metadata. |
+| `uniqueFileNames` | `boolean` | `false` | Replace filenames with UUIDs. Prevents Vercel Blob collisions and hides original filenames. |
 | `generateThumbHash` | `boolean` | `true` | Generate ThumbHash blur placeholder. |
 | `replaceOriginal` | `boolean` | `true` | Replace the original file with the primary format. |
 | `clientOptimization` | `boolean` | `true` | Pre-resize images in browser via Canvas API before upload. Reduces upload size 90%+ for large images. |
@@ -97,6 +99,7 @@ collections: {
 When an image is uploaded to an optimized collection:
 
 1. **`beforeChange` hook** (in-memory processing):
+   - If `uniqueFileNames: true`: renames file to UUID (e.g., `photo.jpg` → `a1b2c3d4.jpg`)
    - Auto-rotates based on EXIF orientation
    - Resizes to fit within `maxDimensions`
    - Strips metadata (if enabled)
@@ -119,6 +122,7 @@ When an image is uploaded to an optimized collection:
 | File | Naming Pattern | Example |
 |------|---------------|---------|
 | Main file (replaceOriginal) | `{name}.{primaryFormat}` | `photo.webp` |
+| Main file (uniqueFileNames) | `{uuid}.{primaryFormat}` | `a1b2c3d4-5e6f-7890.webp` |
 | Variant files | `{name}-optimized.{format}` | `photo-optimized.avif` |
 
 ### Format Behavior
@@ -219,24 +223,24 @@ Get current optimization status for a collection. Requires authentication.
 
 Import from `@inoo-ch/payload-image-optimizer/client`:
 
-### `ImageBox` Component
+### `ImageBox` Component (Recommended)
 
-Drop-in Next.js `<Image>` wrapper with automatic ThumbHash blur placeholders, focal point support, and smooth fade-in transition.
+Drop-in Next.js `<Image>` wrapper — the easiest way to display images with best practices. Automatically handles ThumbHash blur placeholders, focal point positioning, smooth fade-in, responsive variant loading, and smart `sizes` defaults.
 
 ```tsx
 import { ImageBox } from '@inoo-ch/payload-image-optimizer/client'
 
-// With a Payload media resource object
-<ImageBox media={doc.image} alt="Hero" fill sizes="100vw" />
+// Pass the full Payload media document — ImageBox handles everything
+<ImageBox media={doc.heroImage} alt="Hero" fill priority />
 
-// With a plain URL string
-<ImageBox media="/images/fallback.jpg" alt="Fallback" width={800} height={600} />
+// Card grid — explicit sizes hint for responsive loading
+<ImageBox media={doc.image} alt="Card" fill sizes="(max-width: 768px) 100vw, 33vw" />
 
-// Disable fade animation
-<ImageBox media={doc.image} alt="Photo" fade={false} />
+// Fixed dimensions (non-fill)
+<ImageBox media={doc.avatar} alt="Avatar" width={64} height={64} fade={false} />
 
-// Custom fade duration
-<ImageBox media={doc.image} alt="Photo" fadeDuration={300} />
+// Plain URL string fallback
+<ImageBox media="/images/fallback.jpg" alt="Fallback" width={800} height={600} />
 ```
 
 **Props:** Extends all Next.js `ImageProps` (except `src`), plus:
@@ -248,45 +252,92 @@ import { ImageBox } from '@inoo-ch/payload-image-optimizer/client'
 | `fade` | `boolean` | `true` | Enable smooth blur-to-sharp fade transition on load |
 | `fadeDuration` | `number` | `500` | Duration of the fade animation in milliseconds |
 
-Automatically applies:
-- ThumbHash blur placeholder (if available on the media resource)
-- Smooth blur-to-sharp fade transition on image load (disable with `fade={false}`)
-- Focal point positioning via `objectPosition` (using `focalX`/`focalY`)
-- Cache-busting via `updatedAt` query parameter
-- `objectFit: 'cover'` by default (overridable via `style`)
+**What ImageBox does automatically:**
 
-### `FadeImage` Component
+- **ThumbHash blur placeholder** — per-image blur preview from `imageOptimizer.thumbHash`
+- **Responsive variant loader** — when `media.sizes` has Payload size variants (from `imageSizes` collection config), serves pre-generated variants directly instead of going through `/_next/image` re-optimization. Falls back to `/_next/image` when no close match exists.
+- **Smart `sizes` default** — for `fill` mode without explicit `sizes`, uses `(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw` instead of the browser's `100vw` assumption
+- **Focal point positioning** — applies `objectPosition` from `focalX`/`focalY`
+- **Fade transition** — smooth blur-to-sharp animation on load
+- **Cache busting** — appends `updatedAt` as query parameter
 
-Standalone Next.js `<Image>` wrapper with fade-in transition for use with `getImageOptimizerProps()`. Use this when you have a custom image component and want the fade effect without `ImageBox`.
+**Important:** For the variant loader to work, your collection must have `imageSizes` configured in the Payload collection config. This is how Payload generates the width variants. Without `imageSizes`, images still work but go through `/_next/image` as usual.
+
+### `getOptimizedImageProps()` — For Existing Components (e.g., Payload Website Template)
+
+Single-function integration for existing `<NextImage>` components. Returns ThumbHash, focal point, AND variant loader in one spread-friendly object. **This is the recommended way to integrate with the Payload website template's `ImageMedia` component.**
 
 ```tsx
-import { FadeImage, getImageOptimizerProps } from '@inoo-ch/payload-image-optimizer/client'
+import { getOptimizedImageProps } from '@inoo-ch/payload-image-optimizer/client'
 
-const optimizerProps = getImageOptimizerProps(resource)
+// In your existing ImageMedia component — 3 lines to add:
+const optimizedProps = getOptimizedImageProps(resource)
 
-<FadeImage
-  src={resource.url}
-  alt=""
-  width={800}
-  height={600}
-  optimizerProps={optimizerProps}
+<NextImage
+  {...optimizedProps}   // spreads: placeholder, blurDataURL, style, loader
+  src={src}
+  alt={alt}
+  fill={fill}
+  sizes={sizes}
+  quality={80}
+  priority={priority}
+  loading={loading}
 />
 ```
 
-**Props:** Extends all Next.js `ImageProps` (except `placeholder`, `blurDataURL`, `onLoad`), plus:
+**Returns:**
+```ts
+{
+  placeholder: 'blur' | 'empty',
+  blurDataURL?: string,              // data URL from ThumbHash
+  style: { objectPosition: string }, // from focalX/focalY
+  loader?: ImageLoader,              // variant-aware loader (only when media.sizes has variants)
+}
+```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `optimizerProps` | `ImageOptimizerProps` | — | Props returned by `getImageOptimizerProps()` |
-| `fadeDuration` | `number` | `500` | Duration of the fade animation in milliseconds |
+**Payload Website Template integration example:**
+
+If you're using the [Payload website template](https://github.com/payloadcms/payload/tree/main/templates/website), modify `src/components/Media/ImageMedia/index.tsx`:
+
+```diff
++ import { getOptimizedImageProps } from '@inoo-ch/payload-image-optimizer/client'
+
+  export const ImageMedia: React.FC<MediaProps> = (props) => {
+    // ... existing code ...
+
++   const optimizedProps = typeof resource === 'object' ? getOptimizedImageProps(resource) : {}
+
+    return (
+      <picture className={cn(pictureClassName)}>
+        <NextImage
++         {...optimizedProps}
+          alt={alt || ''}
+          className={cn(imgClassName)}
+          fill={fill}
+          height={!fill ? height : undefined}
+-         placeholder="blur"
+-         blurDataURL={placeholderBlur}
+          priority={priority}
+-         quality={100}
++         quality={80}
+          loading={loading}
+          sizes={sizes}
+          src={src}
+          width={!fill ? width : undefined}
+        />
+      </picture>
+    )
+  }
+```
+
+This replaces the template's hardcoded blur placeholder with per-image ThumbHash, adds focal point support, and enables variant-aware responsive loading — all in a few lines.
 
-### `getImageOptimizerProps()` Utility
+### `getImageOptimizerProps()` — Low-Level Utility
 
-For integrating with existing image components (e.g., the Payload website template's `ImageMedia`):
+Returns only ThumbHash placeholder and focal point props (no variant loader). Use when you need granular control or don't want the variant loader.
 
 ```tsx
 import { getImageOptimizerProps } from '@inoo-ch/payload-image-optimizer/client'
-import NextImage from 'next/image'
 
 const optimizerProps = getImageOptimizerProps(media)
 
@@ -301,13 +352,76 @@ const optimizerProps = getImageOptimizerProps(media)
 ```ts
 {
   placeholder: 'blur' | 'empty',
-  blurDataURL?: string,           // data URL from ThumbHash (only when placeholder is 'blur')
-  style: {
-    objectPosition: string,       // e.g. '50% 30%' from focalX/focalY, or 'center'
-  },
+  blurDataURL?: string,
+  style: { objectPosition: string },
 }
 ```
 
+### `createVariantLoader()` — Custom Loader Factory
+
+Creates a Next.js Image `loader` that maps requested widths to pre-generated Payload size variants. Use when building fully custom image components.
+
+```tsx
+import { createVariantLoader } from '@inoo-ch/payload-image-optimizer/client'
+
+const loader = createVariantLoader(media) // returns undefined when no variants
+
+<NextImage loader={loader} src={media.url} sizes="100vw" ... />
+```
+
+**How the hybrid loader works:**
+1. Finds the smallest Payload size variant with width >= requested width
+2. If found → serves the pre-generated variant URL directly (bypasses `/_next/image`)
+3. If no variant is large enough → uses the largest variant if it covers >= 80% of requested width
+4. If no close match at all → falls back to `/_next/image` re-optimization
+
+### `getDefaultSizes()` — Smart Sizes Helper
+
+Returns a sensible default `sizes` attribute for fill-mode images:
+
+```tsx
+import { getDefaultSizes } from '@inoo-ch/payload-image-optimizer/client'
+
+const sizes = getDefaultSizes(true) // '(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
+const sizes = getDefaultSizes(false) // undefined (let next/image use 1x/2x descriptors)
+```
+
+### `FadeImage` Component
+
+Standalone Next.js `<Image>` wrapper with fade-in transition for use with `getImageOptimizerProps()`. Use this when you have a custom image component and want the fade effect without `ImageBox`.
+
+```tsx
+import { FadeImage, getImageOptimizerProps } from '@inoo-ch/payload-image-optimizer/client'
+
+const optimizerProps = getImageOptimizerProps(resource)
+
+<FadeImage
+  src={resource.url}
+  alt=""
+  width={800}
+  height={600}
+  optimizerProps={optimizerProps}
+/>
+```
+
+**Props:** Extends all Next.js `ImageProps` (except `placeholder`, `blurDataURL`, `onLoad`), plus:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `optimizerProps` | `ImageOptimizerProps` | — | Props returned by `getImageOptimizerProps()` |
+| `fadeDuration` | `number` | `500` | Duration of the fade animation in milliseconds |
+
+### Client Utility Decision Guide
+
+| Scenario | Use | Why |
+|----------|-----|-----|
+| **New project, fresh components** | `ImageBox` | Zero-config, handles everything |
+| **Existing project with Payload website template** | `getOptimizedImageProps()` | 3-line change to existing `ImageMedia` |
+| **Custom component, want blur + focal + variants** | `getOptimizedImageProps()` | Single spread, all features |
+| **Custom component, only want blur + focal** | `getImageOptimizerProps()` | Lighter, no loader |
+| **Fully custom loader logic** | `createVariantLoader()` | Granular control |
+| **Custom component with fade animation** | `FadeImage` + `getImageOptimizerProps()` | Fade without ImageBox |
+
 ## Server-Side Utilities
 
 Import from `@inoo-ch/payload-image-optimizer`:
@@ -352,6 +466,30 @@ vercelBlobStorage({
 })
 ```
 
+### "This blob already exists" error
+
+When `replaceOriginal: true` (default), the plugin changes filenames (e.g., `photo.jpg` → `photo.webp`). If a blob with that name already exists, Vercel Blob throws an error because `@payloadcms/storage-vercel-blob` does not pass `allowOverwrite` to the Vercel Blob SDK.
+
+**Fix (recommended):** Enable `uniqueFileNames` in the plugin config — replaces filenames with UUIDs before the storage adapter sees them. This fixes both initial uploads AND regeneration (the regeneration task also generates a new UUID for cloud storage re-uploads):
+
+```ts
+imageOptimizer({
+  collections: { media: true },
+  uniqueFileNames: true, // photo.jpg → a1b2c3d4-5e6f-7890-abcd-ef1234567890.webp
+})
+```
+
+**Alternative:** Set `addRandomSuffix: true` on the storage adapter (only fixes initial uploads, not regeneration):
+
+```ts
+vercelBlobStorage({
+  collections: { media: true },
+  token: process.env.BLOB_READ_WRITE_TOKEN,
+  clientUploads: true,
+  addRandomSuffix: true,
+})
+```
+
 ## Full Example
 
 ```ts
@@ -415,15 +553,46 @@ import type {
   CollectionOptimizerConfig,
   FormatQuality,
   ImageFormat,            // 'webp' | 'avif'
+  MediaResource,          // type for media documents passed to client utilities
+  MediaSizeVariant,       // type for individual size variants in media.sizes
 } from '@inoo-ch/payload-image-optimizer'
 
 import type {
   ImageBoxProps,
   FadeImageProps,
   ImageOptimizerProps,    // return type of getImageOptimizerProps
+  OptimizedImageProps,    // return type of getOptimizedImageProps
 } from '@inoo-ch/payload-image-optimizer/client'
 ```
 
+### `MediaResource` Type
+
+The `MediaResource` type represents a Payload media document as consumed by client utilities. It accepts the full Payload media response including the `sizes` field (generated by Payload when `imageSizes` is configured on the collection).
+
+```ts
+type MediaResource = {
+  url?: string | null
+  alt?: string | null
+  width?: number | null
+  height?: number | null
+  filename?: string | null
+  focalX?: number | null
+  focalY?: number | null
+  imageOptimizer?: { thumbHash?: string | null } | null
+  updatedAt?: string
+  sizes?: Record<string, {
+    url?: string | null
+    width?: number | null
+    height?: number | null
+    mimeType?: string | null
+    filesize?: number | null
+    filename?: string | null
+  } | undefined>
+}
+```
+
+The type is intentionally loose — it structurally matches any Payload media document whether or not the plugin is installed. You can pass your generated Payload types directly without casting.
+
 ## Context Flags
 
 The plugin uses `req.context` flags to control processing:

package/README.md

@@ -17,7 +17,9 @@ Built and maintained by [inoo.ch](https://inoo.ch) — a Swiss digital agency cr
 - **Bulk regeneration** — Re-process existing images from the admin UI with progress tracking
 - **Per-collection config** — Override formats, quality, and dimensions per collection
 - **Admin UI** — Status badges, file size savings, and blur previews in the sidebar
-- **ImageBox component** — Drop-in Next.js `<Image>` wrapper with automatic ThumbHash blur and smooth fade-in
+- **ImageBox component** — Drop-in Next.js `<Image>` wrapper with ThumbHash blur, fade-in, responsive variant loading, and smart `sizes` defaults
+- **Responsive variant loader** — Serves pre-generated Payload size variants directly, bypassing `/_next/image` re-optimization
+- **Template-friendly** — `getOptimizedImageProps()` integrates with the Payload website template in 3 lines
 - **FadeImage component** — Standalone fade-in image for custom setups using `getImageOptimizerProps()`
 
 ## Requirements
@@ -100,6 +102,7 @@ imageOptimizer({
 | `maxDimensions` | `{ width: number, height: number }` | `{ width: 2560, height: 2560 }` | Maximum image dimensions. Images are resized to fit within these bounds. |
 | `generateThumbHash` | `boolean` | `true` | Generate ThumbHash blur placeholders for instant image previews. |
 | `stripMetadata` | `boolean` | `true` | Remove EXIF and other metadata from images. |
+| `uniqueFileNames` | `boolean` | `false` | Replace filenames with UUIDs (e.g., `photo.jpg` → `a1b2c3d4.webp`). Prevents Vercel Blob "already exists" errors on uploads and regeneration. |
 | `clientOptimization` | `boolean` | `true` | Pre-resize images in the browser before upload using Canvas API. Reduces upload size by up to 90% for large images. |
 | `disabled` | `boolean` | `false` | Disable optimization while keeping schema fields intact. |
 
@@ -181,6 +184,32 @@ vercelBlobStorage({
 
 With `clientUploads: true`, files upload directly from the browser to Vercel Blob (up to 5TB) and the server only handles the small JSON metadata payload. This eliminates body size limit errors regardless of file size.
 
+#### "This blob already exists" error
+
+When `replaceOriginal: true` (default), the plugin changes filenames during upload (e.g., `photo.jpg` → `photo.webp`). If a blob with that name already exists, Vercel Blob throws an error because `@payloadcms/storage-vercel-blob` does not pass [`allowOverwrite`](https://vercel.com/docs/vercel-blob#overwriting-blobs) to the Vercel Blob SDK.
+
+**Fix:** Enable `uniqueFileNames` in the plugin config — replaces original filenames with UUIDs before the storage adapter sees them:
+
+```ts
+imageOptimizer({
+  collections: { media: true },
+  uniqueFileNames: true, // photo.jpg → a1b2c3d4-5e6f-7890-abcd-ef1234567890.webp
+})
+```
+
+This prevents collisions on both initial uploads and bulk regeneration (the regeneration task also generates a new UUID for cloud storage re-uploads). Payload stores the full URL in the database, so UUID filenames are transparent to your application.
+
+**Alternative:** If you prefer to keep original filenames, set `addRandomSuffix: true` on the storage adapter instead:
+
+```ts
+vercelBlobStorage({
+  collections: { media: true },
+  token: process.env.BLOB_READ_WRITE_TOKEN,
+  clientUploads: true,
+  addRandomSuffix: true,
+})
+```
+
 ## How It Differs from Payload's Default Image Handling
 
 Payload CMS ships with [sharp](https://sharp.pixelplumbing.com/) built-in and can resize images and generate sizes on upload. This plugin **does not double-process your images** — it intercepts the raw upload in a `beforeChange` hook *before* Payload's own sharp pipeline runs, and writes the optimized buffer back to `req.file.data`. When Payload's built-in `uploadFiles` step kicks in to generate your configured sizes, it works from the already-optimized file, not the raw original.
@@ -218,32 +247,63 @@ The plugin adds an **Optimization Status** panel to the document sidebar showing
 
 A **Regenerate Images** button appears in collection list views, allowing you to bulk re-process existing images with a real-time progress bar.
 
-## ImageBox Component
+## Displaying Images
 
-The plugin exports an `ImageBox` component — a Next.js `<Image>` wrapper that automatically applies ThumbHash blur placeholders with a smooth blur-to-sharp fade transition:
+### Option 1: `ImageBox` (New Projects)
+
+Drop-in Next.js `<Image>` wrapper — the easiest way to display images with best practices:
 
 ```tsx
 import { ImageBox } from '@inoo-ch/payload-image-optimizer/client'
 
-// Pass a Payload media document directly
-<ImageBox media={doc.heroImage} alt="Hero" />
+// Hero image — fill mode with priority
+<ImageBox media={doc.heroImage} alt="Hero" fill priority />
+
+// Card grid — explicit sizes hint
+<ImageBox media={doc.image} alt="Card" fill sizes="(max-width: 768px) 100vw, 33vw" />
+
+// Fixed dimensions
+<ImageBox media={doc.avatar} alt="Avatar" width={64} height={64} fade={false} />
+```
+
+**What it does automatically:**
+- Per-image ThumbHash blur placeholder
+- Smooth blur-to-sharp fade transition
+- Focal point positioning from `focalX`/`focalY`
+- Responsive variant loader — serves pre-generated Payload size variants directly instead of `/_next/image` re-optimization (when `imageSizes` is configured on the collection)
+- Smart `sizes` default for fill mode — `(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw` instead of the browser's `100vw` assumption
+- Cache busting via `updatedAt`
 
-// Or use a plain URL string
-<ImageBox media="/images/photo.jpg" alt="Photo" width={800} height={600} />
+### Option 2: `getOptimizedImageProps()` (Existing Projects / Payload Website Template)
 
-// Disable fade animation
-<ImageBox media={doc.image} alt="Photo" fade={false} />
+If you're using the [Payload website template](https://github.com/payloadcms/payload/tree/main/templates/website) or have an existing `<NextImage>` component, add 3 lines:
 
-// Custom fade duration (default: 500ms)
-<ImageBox media={doc.image} alt="Photo" fadeDuration={300} />
+```tsx
+import { getOptimizedImageProps } from '@inoo-ch/payload-image-optimizer/client'
+
+const optimizedProps = getOptimizedImageProps(resource)
+
+<NextImage
+  {...optimizedProps}   // ThumbHash blur, focal point, variant loader
+  src={src}
+  alt={alt}
+  fill={fill}
+  sizes={sizes}
+  quality={80}
+/>
 ```
 
-**Features:**
-- Automatic ThumbHash `blurDataURL` from the media document
-- Smooth blur-to-sharp fade transition on load (enabled by default)
-- Respects Payload focal point (`focalX` / `focalY`) for `objectPosition`
-- Lazy loading by default, with `priority` prop for above-the-fold images
-- Cache busting via `updatedAt` timestamp
+This replaces the template's hardcoded blur placeholder with per-image ThumbHash, adds focal point support, and enables responsive variant loading.
+
+### Responsive Variant Loading
+
+When your collection has `imageSizes` configured (e.g., `thumbnail: 300`, `medium: 900`, `large: 1400`), both `ImageBox` and `getOptimizedImageProps()` automatically create a hybrid `next/image` loader that:
+
+1. Picks the smallest pre-generated variant >= the requested width
+2. Serves it directly from your storage (bypasses `/_next/image` — no double optimization)
+3. Falls back to `/_next/image` when no close variant match exists
+
+This means images uploaded to collections with `imageSizes` get responsive loading for free — no extra config needed.
 
 ## Document Schema
 
@@ -310,8 +370,9 @@ Copy-paste this instruction to your AI coding agent to have it autonomously inte
 >
 > 1. Which upload collections should be optimized and with what settings
 > 2. Whether to use `replaceOriginal` or keep originals alongside variants
-> 3. Where to add `<ImageBox>`, `<FadeImage>`, or `getImageOptimizerProps()` in the frontend for ThumbHash blur placeholders with smooth fade-in and focal point support
-> 4. Whether any existing image rendering code should use the optimized variants
+> 3. For **new components**: use `<ImageBox>` — it handles ThumbHash blur, fade-in, focal point, responsive variant loading, and smart `sizes` defaults automatically
+> 4. For **existing components** (especially the Payload website template's `ImageMedia`): use `getOptimizedImageProps(resource)` — a single spread that adds ThumbHash, focal point, and variant loader to any `<NextImage>`
+> 5. If collections have `imageSizes` configured, the variant loader will automatically serve pre-generated size variants directly instead of going through `/_next/image` re-optimization
 >
 > Use the zero-config default (`collections: { <slug>: true }`) unless the project has specific requirements that call for custom settings.
 

package/dist/components/ImageBox.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import NextImage from 'next/image';
 import { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js';
+import { createVariantLoader, getDefaultSizes } from '../utilities/responsiveImage.js';
 export const ImageBox = ({ media, alt: altFromProps, fill, sizes, priority, loading: loadingFromProps, style: styleFromProps, fade = true, fadeDuration = 500, ...props })=>{
     const [loaded, setLoaded] = useState(false);
     const loading = priority ? undefined : loadingFromProps ?? 'lazy';
@@ -17,7 +18,7 @@ export const ImageBox = ({ media, alt: altFromProps, fill, sizes, priority, load
             alt: altFromProps || '',
             quality: 80,
             fill: fill,
-            sizes: sizes,
+            sizes: sizes ?? getDefaultSizes(fill),
             style: {
                 objectFit: 'cover',
                 objectPosition: 'center',
@@ -34,6 +35,9 @@ export const ImageBox = ({ media, alt: altFromProps, fill, sizes, priority, load
     const alt = altFromProps || media.alt || media.filename || '';
     const src = media.url ? `${media.url}${media.updatedAt ? `?${media.updatedAt}` : ''}` : '';
     const optimizerProps = getImageOptimizerProps(media);
+    const variantLoader = useMemo(()=>createVariantLoader(media), [
+        media
+    ]);
     return /*#__PURE__*/ _jsx(NextImage, {
         ...props,
         src: src,
@@ -42,7 +46,8 @@ export const ImageBox = ({ media, alt: altFromProps, fill, sizes, priority, load
         fill: fill,
         width: !fill ? width : undefined,
         height: !fill ? height : undefined,
-        sizes: sizes,
+        sizes: sizes ?? getDefaultSizes(fill),
+        loader: variantLoader,
         style: {
             objectFit: 'cover',
             ...optimizerProps.style,

package/dist/components/ImageBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ImageBox.tsx"],"sourcesContent":["'use client'\n\nimport React, { useState } from 'react'\nimport NextImage, { type ImageProps } from 'next/image'\nimport type { MediaResource } from '../types.js'\nimport { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\n\nexport interface ImageBoxProps extends Omit<ImageProps, 'src' | 'alt'> {\n  media: MediaResource | string\n  alt?: string\n  /** Enable smooth blur-to-sharp fade transition on load. Defaults to `true`. */\n  fade?: boolean\n  /** Duration of the fade animation in milliseconds. Defaults to `500`. */\n  fadeDuration?: number\n}\n\nexport const ImageBox: React.FC<ImageBoxProps> = ({\n  media,\n  alt: altFromProps,\n  fill,\n  sizes,\n  priority,\n  loading: loadingFromProps,\n  style: styleFromProps,\n  fade = true,\n  fadeDuration = 500,\n  ...props\n}) => {\n  const [loaded, setLoaded] = useState(false)\n  const loading = priority ? undefined : (loadingFromProps ?? 'lazy')\n\n  const fadeStyle = fade\n    ? {\n        filter: loaded ? 'blur(0px)' : 'blur(20px)',\n        transition: loaded ? `filter ${fadeDuration}ms ease-in-out` : undefined,\n      }\n    : undefined\n\n  if (typeof media === 'string') {\n    return (\n      <NextImage\n        {...props}\n        src={media}\n        alt={altFromProps || ''}\n        quality={80}\n        fill={fill}\n        sizes={sizes}\n        style={{ objectFit: 'cover', objectPosition: 'center', ...fadeStyle, ...styleFromProps }}\n        priority={priority}\n        loading={loading}\n        onLoad={fade ? () => setLoaded(true) : undefined}\n      />\n    )\n  }\n\n  const width = media.width ?? undefined\n  const height = media.height ?? undefined\n  const alt = altFromProps || (media as any).alt || media.filename || ''\n  const src = media.url ? `${media.url}${media.updatedAt ? `?${media.updatedAt}` : ''}` : ''\n\n  const optimizerProps = getImageOptimizerProps(media)\n\n  return (\n    <NextImage\n      {...props}\n      src={src}\n      alt={alt}\n      quality={80}\n      fill={fill}\n      width={!fill ? width : undefined}\n      height={!fill ? height : undefined}\n      sizes={sizes}\n      style={{ objectFit: 'cover', ...optimizerProps.style, ...fadeStyle, ...styleFromProps }}\n      placeholder={optimizerProps.placeholder}\n      blurDataURL={optimizerProps.blurDataURL}\n      priority={priority}\n      loading={loading}\n      onLoad={fade ? () => setLoaded(true) : undefined}\n    />\n  )\n}\n"],"names":["React","useState","NextImage","getImageOptimizerProps","ImageBox","media","alt","altFromProps","fill","sizes","priority","loading","loadingFromProps","style","styleFromProps","fade","fadeDuration","props","loaded","setLoaded","undefined","fadeStyle","filter","transition","src","quality","objectFit","objectPosition","onLoad","width","height","filename","url","updatedAt","optimizerProps","placeholder","blurDataURL"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AACvC,OAAOC,eAAoC,aAAY;AAEvD,SAASC,sBAAsB,QAAQ,yCAAwC;AAW/E,OAAO,MAAMC,WAAoC,CAAC,EAChDC,KAAK,EACLC,KAAKC,YAAY,EACjBC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAASC,gBAAgB,EACzBC,OAAOC,cAAc,EACrBC,OAAO,IAAI,EACXC,eAAe,GAAG,EAClB,GAAGC,OACJ;IACC,MAAM,CAACC,QAAQC,UAAU,GAAGlB,SAAS;IACrC,MAAMU,UAAUD,WAAWU,YAAaR,oBAAoB;IAE5D,MAAMS,YAAYN,OACd;QACEO,QAAQJ,SAAS,cAAc;QAC/BK,YAAYL,SAAS,CAAC,OAAO,EAAEF,aAAa,cAAc,CAAC,GAAGI;IAChE,IACAA;IAEJ,IAAI,OAAOf,UAAU,UAAU;QAC7B,qBACE,KAACH;YACE,GAAGe,KAAK;YACTO,KAAKnB;YACLC,KAAKC,gBAAgB;YACrBkB,SAAS;YACTjB,MAAMA;YACNC,OAAOA;YACPI,OAAO;gBAAEa,WAAW;gBAASC,gBAAgB;gBAAU,GAAGN,SAAS;gBAAE,GAAGP,cAAc;YAAC;YACvFJ,UAAUA;YACVC,SAASA;YACTiB,QAAQb,OAAO,IAAMI,UAAU,QAAQC;;IAG7C;IAEA,MAAMS,QAAQxB,MAAMwB,KAAK,IAAIT;IAC7B,MAAMU,SAASzB,MAAMyB,MAAM,IAAIV;IAC/B,MAAMd,MAAMC,gBAAgB,AAACF,MAAcC,GAAG,IAAID,MAAM0B,QAAQ,IAAI;IACpE,MAAMP,MAAMnB,MAAM2B,GAAG,GAAG,GAAG3B,MAAM2B,GAAG,GAAG3B,MAAM4B,SAAS,GAAG,CAAC,CAAC,EAAE5B,MAAM4B,SAAS,EAAE,GAAG,IAAI,GAAG;IAExF,MAAMC,iBAAiB/B,uBAAuBE;IAE9C,qBACE,KAACH;QACE,GAAGe,KAAK;QACTO,KAAKA;QACLlB,KAAKA;QACLmB,SAAS;QACTjB,MAAMA;QACNqB,OAAO,CAACrB,OAAOqB,QAAQT;QACvBU,QAAQ,CAACtB,OAAOsB,SAASV;QACzBX,OAAOA;QACPI,OAAO;YAAEa,WAAW;YAAS,GAAGQ,eAAerB,KAAK;YAAE,GAAGQ,SAAS;YAAE,GAAGP,cAAc;QAAC;QACtFqB,aAAaD,eAAeC,WAAW;QACvCC,aAAaF,eAAeE,WAAW;QACvC1B,UAAUA;QACVC,SAASA;QACTiB,QAAQb,OAAO,IAAMI,UAAU,QAAQC;;AAG7C,EAAC"}
+{"version":3,"sources":["../../src/components/ImageBox.tsx"],"sourcesContent":["'use client'\n\nimport React, { useMemo, useState } from 'react'\nimport NextImage, { type ImageProps } from 'next/image'\nimport type { MediaResource } from '../types.js'\nimport { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nimport { createVariantLoader, getDefaultSizes } from '../utilities/responsiveImage.js'\n\nexport interface ImageBoxProps extends Omit<ImageProps, 'src' | 'alt'> {\n  media: MediaResource | string\n  alt?: string\n  /** Enable smooth blur-to-sharp fade transition on load. Defaults to `true`. */\n  fade?: boolean\n  /** Duration of the fade animation in milliseconds. Defaults to `500`. */\n  fadeDuration?: number\n}\n\nexport const ImageBox: React.FC<ImageBoxProps> = ({\n  media,\n  alt: altFromProps,\n  fill,\n  sizes,\n  priority,\n  loading: loadingFromProps,\n  style: styleFromProps,\n  fade = true,\n  fadeDuration = 500,\n  ...props\n}) => {\n  const [loaded, setLoaded] = useState(false)\n  const loading = priority ? undefined : (loadingFromProps ?? 'lazy')\n\n  const fadeStyle = fade\n    ? {\n        filter: loaded ? 'blur(0px)' : 'blur(20px)',\n        transition: loaded ? `filter ${fadeDuration}ms ease-in-out` : undefined,\n      }\n    : undefined\n\n  if (typeof media === 'string') {\n    return (\n      <NextImage\n        {...props}\n        src={media}\n        alt={altFromProps || ''}\n        quality={80}\n        fill={fill}\n        sizes={sizes ?? getDefaultSizes(fill)}\n        style={{ objectFit: 'cover', objectPosition: 'center', ...fadeStyle, ...styleFromProps }}\n        priority={priority}\n        loading={loading}\n        onLoad={fade ? () => setLoaded(true) : undefined}\n      />\n    )\n  }\n\n  const width = media.width ?? undefined\n  const height = media.height ?? undefined\n  const alt = altFromProps || (media as any).alt || media.filename || ''\n  const src = media.url ? `${media.url}${media.updatedAt ? `?${media.updatedAt}` : ''}` : ''\n\n  const optimizerProps = getImageOptimizerProps(media)\n  const variantLoader = useMemo(() => createVariantLoader(media), [media])\n\n  return (\n    <NextImage\n      {...props}\n      src={src}\n      alt={alt}\n      quality={80}\n      fill={fill}\n      width={!fill ? width : undefined}\n      height={!fill ? height : undefined}\n      sizes={sizes ?? getDefaultSizes(fill)}\n      loader={variantLoader}\n      style={{ objectFit: 'cover', ...optimizerProps.style, ...fadeStyle, ...styleFromProps }}\n      placeholder={optimizerProps.placeholder}\n      blurDataURL={optimizerProps.blurDataURL}\n      priority={priority}\n      loading={loading}\n      onLoad={fade ? () => setLoaded(true) : undefined}\n    />\n  )\n}\n"],"names":["React","useMemo","useState","NextImage","getImageOptimizerProps","createVariantLoader","getDefaultSizes","ImageBox","media","alt","altFromProps","fill","sizes","priority","loading","loadingFromProps","style","styleFromProps","fade","fadeDuration","props","loaded","setLoaded","undefined","fadeStyle","filter","transition","src","quality","objectFit","objectPosition","onLoad","width","height","filename","url","updatedAt","optimizerProps","variantLoader","loader","placeholder","blurDataURL"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAChD,OAAOC,eAAoC,aAAY;AAEvD,SAASC,sBAAsB,QAAQ,yCAAwC;AAC/E,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,kCAAiC;AAWtF,OAAO,MAAMC,WAAoC,CAAC,EAChDC,KAAK,EACLC,KAAKC,YAAY,EACjBC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAASC,gBAAgB,EACzBC,OAAOC,cAAc,EACrBC,OAAO,IAAI,EACXC,eAAe,GAAG,EAClB,GAAGC,OACJ;IACC,MAAM,CAACC,QAAQC,UAAU,GAAGpB,SAAS;IACrC,MAAMY,UAAUD,WAAWU,YAAaR,oBAAoB;IAE5D,MAAMS,YAAYN,OACd;QACEO,QAAQJ,SAAS,cAAc;QAC/BK,YAAYL,SAAS,CAAC,OAAO,EAAEF,aAAa,cAAc,CAAC,GAAGI;IAChE,IACAA;IAEJ,IAAI,OAAOf,UAAU,UAAU;QAC7B,qBACE,KAACL;YACE,GAAGiB,KAAK;YACTO,KAAKnB;YACLC,KAAKC,gBAAgB;YACrBkB,SAAS;YACTjB,MAAMA;YACNC,OAAOA,SAASN,gBAAgBK;YAChCK,OAAO;gBAAEa,WAAW;gBAASC,gBAAgB;gBAAU,GAAGN,SAAS;gBAAE,GAAGP,cAAc;YAAC;YACvFJ,UAAUA;YACVC,SAASA;YACTiB,QAAQb,OAAO,IAAMI,UAAU,QAAQC;;IAG7C;IAEA,MAAMS,QAAQxB,MAAMwB,KAAK,IAAIT;IAC7B,MAAMU,SAASzB,MAAMyB,MAAM,IAAIV;IAC/B,MAAMd,MAAMC,gBAAgB,AAACF,MAAcC,GAAG,IAAID,MAAM0B,QAAQ,IAAI;IACpE,MAAMP,MAAMnB,MAAM2B,GAAG,GAAG,GAAG3B,MAAM2B,GAAG,GAAG3B,MAAM4B,SAAS,GAAG,CAAC,CAAC,EAAE5B,MAAM4B,SAAS,EAAE,GAAG,IAAI,GAAG;IAExF,MAAMC,iBAAiBjC,uBAAuBI;IAC9C,MAAM8B,gBAAgBrC,QAAQ,IAAMI,oBAAoBG,QAAQ;QAACA;KAAM;IAEvE,qBACE,KAACL;QACE,GAAGiB,KAAK;QACTO,KAAKA;QACLlB,KAAKA;QACLmB,SAAS;QACTjB,MAAMA;QACNqB,OAAO,CAACrB,OAAOqB,QAAQT;QACvBU,QAAQ,CAACtB,OAAOsB,SAASV;QACzBX,OAAOA,SAASN,gBAAgBK;QAChC4B,QAAQD;QACRtB,OAAO;YAAEa,WAAW;YAAS,GAAGQ,eAAerB,KAAK;YAAE,GAAGQ,SAAS;YAAE,GAAGP,cAAc;QAAC;QACtFuB,aAAaH,eAAeG,WAAW;QACvCC,aAAaJ,eAAeI,WAAW;QACvC5B,UAAUA;QACVC,SAASA;QACTiB,QAAQb,OAAO,IAAMI,UAAU,QAAQC;;AAG7C,EAAC"}

package/dist/defaults.js

@@ -14,7 +14,8 @@ export const resolveConfig = (config)=>({
             height: 2560
         },
         replaceOriginal: config.replaceOriginal ?? true,
-        stripMetadata: config.stripMetadata ?? true
+        stripMetadata: config.stripMetadata ?? true,
+        uniqueFileNames: config.uniqueFileNames ?? false
     });
 export const resolveCollectionConfig = (resolvedConfig, collectionSlug)=>{
     const collectionValue = resolvedConfig.collections[collectionSlug];

package/dist/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.ts"],"sourcesContent":["import type { CollectionSlug } from 'payload'\n\nimport type { ImageOptimizerConfig, ResolvedCollectionOptimizerConfig, ResolvedImageOptimizerConfig } from './types.js'\n\nexport const resolveConfig = (config: ImageOptimizerConfig): ResolvedImageOptimizerConfig => ({\n  clientOptimization: config.clientOptimization ?? true,\n  collections: config.collections,\n  disabled: config.disabled ?? false,\n  formats: config.formats ?? [\n    { format: 'webp', quality: 80 },\n  ],\n  generateThumbHash: config.generateThumbHash ?? true,\n  maxDimensions: config.maxDimensions ?? { width: 2560, height: 2560 },\n  replaceOriginal: config.replaceOriginal ?? true,\n  stripMetadata: config.stripMetadata ?? true,\n})\n\nexport const resolveCollectionConfig = (\n  resolvedConfig: ResolvedImageOptimizerConfig,\n  collectionSlug: string,\n): ResolvedCollectionOptimizerConfig => {\n  const collectionValue = resolvedConfig.collections[collectionSlug as CollectionSlug]\n\n  if (!collectionValue || collectionValue === true) {\n    return {\n      formats: resolvedConfig.formats,\n      maxDimensions: resolvedConfig.maxDimensions,\n      replaceOriginal: resolvedConfig.replaceOriginal,\n    }\n  }\n\n  return {\n    formats: collectionValue.formats ?? resolvedConfig.formats,\n    maxDimensions: collectionValue.maxDimensions ?? resolvedConfig.maxDimensions,\n    replaceOriginal: collectionValue.replaceOriginal ?? resolvedConfig.replaceOriginal,\n  }\n}\n"],"names":["resolveConfig","config","clientOptimization","collections","disabled","formats","format","quality","generateThumbHash","maxDimensions","width","height","replaceOriginal","stripMetadata","resolveCollectionConfig","resolvedConfig","collectionSlug","collectionValue"],"mappings":"AAIA,OAAO,MAAMA,gBAAgB,CAACC,SAAgE,CAAA;QAC5FC,oBAAoBD,OAAOC,kBAAkB,IAAI;QACjDC,aAAaF,OAAOE,WAAW;QAC/BC,UAAUH,OAAOG,QAAQ,IAAI;QAC7BC,SAASJ,OAAOI,OAAO,IAAI;YACzB;gBAAEC,QAAQ;gBAAQC,SAAS;YAAG;SAC/B;QACDC,mBAAmBP,OAAOO,iBAAiB,IAAI;QAC/CC,eAAeR,OAAOQ,aAAa,IAAI;YAAEC,OAAO;YAAMC,QAAQ;QAAK;QACnEC,iBAAiBX,OAAOW,eAAe,IAAI;QAC3CC,eAAeZ,OAAOY,aAAa,IAAI;IACzC,CAAA,EAAE;AAEF,OAAO,MAAMC,0BAA0B,CACrCC,gBACAC;IAEA,MAAMC,kBAAkBF,eAAeZ,WAAW,CAACa,eAAiC;IAEpF,IAAI,CAACC,mBAAmBA,oBAAoB,MAAM;QAChD,OAAO;YACLZ,SAASU,eAAeV,OAAO;YAC/BI,eAAeM,eAAeN,aAAa;YAC3CG,iBAAiBG,eAAeH,eAAe;QACjD;IACF;IAEA,OAAO;QACLP,SAASY,gBAAgBZ,OAAO,IAAIU,eAAeV,OAAO;QAC1DI,eAAeQ,gBAAgBR,aAAa,IAAIM,eAAeN,aAAa;QAC5EG,iBAAiBK,gBAAgBL,eAAe,IAAIG,eAAeH,eAAe;IACpF;AACF,EAAC"}
+{"version":3,"sources":["../src/defaults.ts"],"sourcesContent":["import type { CollectionSlug } from 'payload'\n\nimport type { ImageOptimizerConfig, ResolvedCollectionOptimizerConfig, ResolvedImageOptimizerConfig } from './types.js'\n\nexport const resolveConfig = (config: ImageOptimizerConfig): ResolvedImageOptimizerConfig => ({\n  clientOptimization: config.clientOptimization ?? true,\n  collections: config.collections,\n  disabled: config.disabled ?? false,\n  formats: config.formats ?? [\n    { format: 'webp', quality: 80 },\n  ],\n  generateThumbHash: config.generateThumbHash ?? true,\n  maxDimensions: config.maxDimensions ?? { width: 2560, height: 2560 },\n  replaceOriginal: config.replaceOriginal ?? true,\n  stripMetadata: config.stripMetadata ?? true,\n  uniqueFileNames: config.uniqueFileNames ?? false,\n})\n\nexport const resolveCollectionConfig = (\n  resolvedConfig: ResolvedImageOptimizerConfig,\n  collectionSlug: string,\n): ResolvedCollectionOptimizerConfig => {\n  const collectionValue = resolvedConfig.collections[collectionSlug as CollectionSlug]\n\n  if (!collectionValue || collectionValue === true) {\n    return {\n      formats: resolvedConfig.formats,\n      maxDimensions: resolvedConfig.maxDimensions,\n      replaceOriginal: resolvedConfig.replaceOriginal,\n    }\n  }\n\n  return {\n    formats: collectionValue.formats ?? resolvedConfig.formats,\n    maxDimensions: collectionValue.maxDimensions ?? resolvedConfig.maxDimensions,\n    replaceOriginal: collectionValue.replaceOriginal ?? resolvedConfig.replaceOriginal,\n  }\n}\n"],"names":["resolveConfig","config","clientOptimization","collections","disabled","formats","format","quality","generateThumbHash","maxDimensions","width","height","replaceOriginal","stripMetadata","uniqueFileNames","resolveCollectionConfig","resolvedConfig","collectionSlug","collectionValue"],"mappings":"AAIA,OAAO,MAAMA,gBAAgB,CAACC,SAAgE,CAAA;QAC5FC,oBAAoBD,OAAOC,kBAAkB,IAAI;QACjDC,aAAaF,OAAOE,WAAW;QAC/BC,UAAUH,OAAOG,QAAQ,IAAI;QAC7BC,SAASJ,OAAOI,OAAO,IAAI;YACzB;gBAAEC,QAAQ;gBAAQC,SAAS;YAAG;SAC/B;QACDC,mBAAmBP,OAAOO,iBAAiB,IAAI;QAC/CC,eAAeR,OAAOQ,aAAa,IAAI;YAAEC,OAAO;YAAMC,QAAQ;QAAK;QACnEC,iBAAiBX,OAAOW,eAAe,IAAI;QAC3CC,eAAeZ,OAAOY,aAAa,IAAI;QACvCC,iBAAiBb,OAAOa,eAAe,IAAI;IAC7C,CAAA,EAAE;AAEF,OAAO,MAAMC,0BAA0B,CACrCC,gBACAC;IAEA,MAAMC,kBAAkBF,eAAeb,WAAW,CAACc,eAAiC;IAEpF,IAAI,CAACC,mBAAmBA,oBAAoB,MAAM;QAChD,OAAO;YACLb,SAASW,eAAeX,OAAO;YAC/BI,eAAeO,eAAeP,aAAa;YAC3CG,iBAAiBI,eAAeJ,eAAe;QACjD;IACF;IAEA,OAAO;QACLP,SAASa,gBAAgBb,OAAO,IAAIW,eAAeX,OAAO;QAC1DI,eAAeS,gBAAgBT,aAAa,IAAIO,eAAeP,aAAa;QAC5EG,iBAAiBM,gBAAgBN,eAAe,IAAII,eAAeJ,eAAe;IACpF;AACF,EAAC"}

package/dist/exports/client.d.ts

@@ -5,5 +5,8 @@ export { FadeImage } from '../components/FadeImage.js';
 export type { FadeImageProps } from '../components/FadeImage.js';
 export { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js';
 export type { ImageOptimizerProps } from '../utilities/getImageOptimizerProps.js';
+export { getOptimizedImageProps } from '../utilities/getOptimizedImageProps.js';
+export type { OptimizedImageProps } from '../utilities/getOptimizedImageProps.js';
+export { createVariantLoader, getDefaultSizes } from '../utilities/responsiveImage.js';
 export { RegenerationButton } from '../components/RegenerationButton.js';
 export { UploadOptimizer } from '../components/UploadOptimizer.js';

package/dist/exports/client.js

@@ -2,6 +2,8 @@ export { OptimizationStatus } from '../components/OptimizationStatus.js';
 export { ImageBox } from '../components/ImageBox.js';
 export { FadeImage } from '../components/FadeImage.js';
 export { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js';
+export { getOptimizedImageProps } from '../utilities/getOptimizedImageProps.js';
+export { createVariantLoader, getDefaultSizes } from '../utilities/responsiveImage.js';
 export { RegenerationButton } from '../components/RegenerationButton.js';
 export { UploadOptimizer } from '../components/UploadOptimizer.js';
 

package/dist/exports/client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { OptimizationStatus } from '../components/OptimizationStatus.js'\nexport { ImageBox } from '../components/ImageBox.js'\nexport type { ImageBoxProps } from '../components/ImageBox.js'\nexport { FadeImage } from '../components/FadeImage.js'\nexport type { FadeImageProps } from '../components/FadeImage.js'\nexport { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nexport type { ImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nexport { RegenerationButton } from '../components/RegenerationButton.js'\nexport { UploadOptimizer } from '../components/UploadOptimizer.js'\n"],"names":["OptimizationStatus","ImageBox","FadeImage","getImageOptimizerProps","RegenerationButton","UploadOptimizer"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,sCAAqC;AACxE,SAASC,QAAQ,QAAQ,4BAA2B;AAEpD,SAASC,SAAS,QAAQ,6BAA4B;AAEtD,SAASC,sBAAsB,QAAQ,yCAAwC;AAE/E,SAASC,kBAAkB,QAAQ,sCAAqC;AACxE,SAASC,eAAe,QAAQ,mCAAkC"}
+{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { OptimizationStatus } from '../components/OptimizationStatus.js'\nexport { ImageBox } from '../components/ImageBox.js'\nexport type { ImageBoxProps } from '../components/ImageBox.js'\nexport { FadeImage } from '../components/FadeImage.js'\nexport type { FadeImageProps } from '../components/FadeImage.js'\nexport { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nexport type { ImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nexport { getOptimizedImageProps } from '../utilities/getOptimizedImageProps.js'\nexport type { OptimizedImageProps } from '../utilities/getOptimizedImageProps.js'\nexport { createVariantLoader, getDefaultSizes } from '../utilities/responsiveImage.js'\nexport { RegenerationButton } from '../components/RegenerationButton.js'\nexport { UploadOptimizer } from '../components/UploadOptimizer.js'\n"],"names":["OptimizationStatus","ImageBox","FadeImage","getImageOptimizerProps","getOptimizedImageProps","createVariantLoader","getDefaultSizes","RegenerationButton","UploadOptimizer"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,sCAAqC;AACxE,SAASC,QAAQ,QAAQ,4BAA2B;AAEpD,SAASC,SAAS,QAAQ,6BAA4B;AAEtD,SAASC,sBAAsB,QAAQ,yCAAwC;AAE/E,SAASC,sBAAsB,QAAQ,yCAAwC;AAE/E,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,kCAAiC;AACtF,SAASC,kBAAkB,QAAQ,sCAAqC;AACxE,SAASC,eAAe,QAAQ,mCAAkC"}

package/dist/hooks/beforeChange.js

@@ -1,3 +1,4 @@
+import crypto from 'crypto';
 import path from 'path';
 import { resolveCollectionConfig } from '../defaults.js';
 import { convertFormat, generateThumbHash, stripAndResize } from '../processing/index.js';
@@ -6,6 +7,15 @@ export const createBeforeChangeHook = (resolvedConfig, collectionSlug)=>{
     return async ({ context, data, req })=>{
         if (context?.imageOptimizer_skip) return data;
         if (!req.file || !req.file.data || !req.file.mimetype?.startsWith('image/')) return data;
+        // Rename file to UUID before any processing, so the storage adapter
+        // never sees the original filename. Prevents Vercel Blob "already exists"
+        // errors and avoids leaking original filenames to storage.
+        if (resolvedConfig.uniqueFileNames) {
+            const ext = path.extname(req.file.name);
+            const uuid = crypto.randomUUID();
+            req.file.name = `${uuid}${ext}`;
+            data.filename = req.file.name;
+        }
         const originalSize = req.file.data.length;
         const perCollectionConfig = resolveCollectionConfig(resolvedConfig, collectionSlug);
         // Process in memory: strip EXIF, resize, generate blur