@inoo-ch/payload-image-optimizer 1.1.0 → 1.2.0

package/AGENT_DOCS.md

@@ -0,0 +1,383 @@
+# @inoo-ch/payload-image-optimizer
+
+Payload CMS plugin for automatic image optimization — WebP/AVIF conversion, resize, EXIF strip, ThumbHash blur placeholders, and bulk regeneration.
+
+## Installation
+
+```bash
+pnpm add @inoo-ch/payload-image-optimizer
+```
+
+**Peer dependency:** Payload 3.x must provide `sharp` in its config.
+
+## Quick Start (Zero-Config)
+
+```ts
+// payload.config.ts
+import { imageOptimizer } from '@inoo-ch/payload-image-optimizer'
+
+export default buildConfig({
+  // ...
+  plugins: [
+    imageOptimizer({
+      collections: {
+        media: true, // enable with all defaults
+      },
+    }),
+  ],
+  sharp, // required — Payload must be configured with sharp
+})
+```
+
+With this minimal config every uploaded image in the `media` collection will automatically:
+
+1. Be resized to fit within 2560x2560 (no upscaling)
+2. Have EXIF/metadata stripped
+3. Be converted to WebP (quality 80) — replacing the original file on disk
+4. Get a ThumbHash blur placeholder generated
+
+## Configuration Reference
+
+### Plugin Options (`ImageOptimizerConfig`)
+
+```ts
+imageOptimizer({
+  // Required — map of collection slugs to optimize.
+  // Use `true` for defaults, or an object for per-collection overrides.
+  collections: {
+    media: true,
+    avatars: {
+      maxDimensions: { width: 256, height: 256 },
+      formats: [{ format: 'webp', quality: 90 }],
+      replaceOriginal: false,
+    },
+  },
+
+  // Global defaults (all optional — values shown are the defaults):
+  formats: [{ format: 'webp', quality: 80 }],     // output formats
+  maxDimensions: { width: 2560, height: 2560 },    // max resize dimensions
+  stripMetadata: true,                              // strip EXIF data
+  generateThumbHash: true,                          // generate blur placeholders
+  replaceOriginal: true,                            // convert main file to primary format
+  disabled: false,                                  // keep fields but skip all processing
+})
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `collections` | `Record<slug, true \| CollectionConfig>` | — | **Required.** Collections to optimize. `true` = use global defaults. |
+| `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. |
+| `generateThumbHash` | `boolean` | `true` | Generate ThumbHash blur placeholder. |
+| `replaceOriginal` | `boolean` | `true` | Replace the original file with the primary format. |
+| `disabled` | `boolean` | `false` | Keep schema fields but disable all processing. |
+
+### Per-Collection Overrides (`CollectionOptimizerConfig`)
+
+Each collection can override `formats`, `maxDimensions`, and `replaceOriginal`. All other settings are global-only.
+
+```ts
+collections: {
+  media: true,                         // uses global defaults
+  avatars: {                           // overrides specific settings
+    formats: [{ format: 'webp', quality: 90 }],
+    maxDimensions: { width: 256, height: 256 },
+    replaceOriginal: false,
+  },
+}
+```
+
+## How It Works
+
+### Upload Pipeline
+
+When an image is uploaded to an optimized collection:
+
+1. **`beforeChange` hook** (in-memory processing):
+   - Auto-rotates based on EXIF orientation
+   - Resizes to fit within `maxDimensions`
+   - Strips metadata (if enabled)
+   - If `replaceOriginal: true`: converts to primary format (first in `formats` array), updates filename/mimeType
+   - Generates ThumbHash (if enabled)
+   - Sets `imageOptimizer.status = 'pending'`
+
+2. **`afterChange` hook** (disk + async):
+   - Writes processed buffer to disk (overwriting Payload's original)
+   - Cleans up old file if filename changed
+   - Queues `imageOptimizer_convertFormats` background job for remaining formats
+
+3. **Background job** (`imageOptimizer_convertFormats`):
+   - Generates variant files for any additional formats (e.g., AVIF)
+   - Writes variants to disk with `-optimized` suffix
+   - Updates document: `imageOptimizer.status = 'complete'`, populates `variants` array
+
+### File Naming
+
+| File | Naming Pattern | Example |
+|------|---------------|---------|
+| Main file (replaceOriginal) | `{name}.{primaryFormat}` | `photo.webp` |
+| Variant files | `{name}-optimized.{format}` | `photo-optimized.avif` |
+
+### Format Behavior
+
+**When `replaceOriginal: true`** (default):
+- The uploaded file is converted to the first format in the `formats` array and replaces the original on disk.
+- Additional formats are generated as variant files.
+- Example: `formats: [webp, avif]` → main file becomes `.webp`, variant is `.avif`
+
+**When `replaceOriginal: false`**:
+- The uploaded file stays in its original format.
+- All configured formats are generated as separate variant files.
+
+## Fields Added to Collections
+
+The plugin adds an `imageOptimizer` group field (read-only, displayed in the admin sidebar) to every configured collection:
+
+```ts
+{
+  imageOptimizer: {
+    status: 'pending' | 'processing' | 'complete' | 'error',
+    error: string | null,
+    thumbHash: string | null,         // base64-encoded ThumbHash
+    originalSize: number,             // bytes
+    optimizedSize: number,            // bytes
+    variants: [
+      {
+        format: string,               // 'webp' | 'avif'
+        filename: string,             // e.g. 'photo-optimized.avif'
+        filesize: number,             // bytes
+        width: number,
+        height: number,
+        mimeType: string,             // e.g. 'image/avif'
+        url: string,                  // e.g. '/media/photo-optimized.avif'
+      }
+    ]
+  }
+}
+```
+
+## Admin UI
+
+### Optimization Status (Document Sidebar)
+
+Every document in an optimized collection shows an `OptimizationStatus` component in the sidebar displaying:
+- Color-coded status badge (pending/processing/complete/error)
+- Original vs optimized file sizes with savings percentage
+- ThumbHash preview thumbnail
+- List of generated variants
+
+### Regenerate Images (Collection List View)
+
+A `RegenerationButton` component is injected above the list table in every optimized collection:
+- **"Regenerate Images"** button — queues optimization jobs for all images
+- **"Force re-process all"** checkbox — re-optimizes already-complete images
+- Live progress bar with polling (every 2 seconds)
+- Stall detection — warns if processing stops progressing
+- Persistent stats showing overall optimization status (e.g., "All 32 images optimized")
+
+## REST API Endpoints
+
+### `POST /api/image-optimizer/regenerate`
+
+Queue bulk regeneration jobs for a collection. Requires authentication.
+
+**Request body:**
+```json
+{
+  "collectionSlug": "media",
+  "force": false
+}
+```
+
+**Response:**
+```json
+{
+  "queued": 12,
+  "collectionSlug": "media"
+}
+```
+
+### `GET /api/image-optimizer/regenerate?collection=media`
+
+Get current optimization status for a collection. Requires authentication.
+
+**Response:**
+```json
+{
+  "collectionSlug": "media",
+  "total": 32,
+  "complete": 30,
+  "errored": 1,
+  "pending": 1
+}
+```
+
+## Client-Side Utilities
+
+Import from `@inoo-ch/payload-image-optimizer/client`:
+
+### `ImageBox` Component
+
+Drop-in Next.js `<Image>` wrapper with automatic ThumbHash blur placeholders and focal point support.
+
+```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" />
+
+// With a plain URL string
+<ImageBox media="/images/fallback.jpg" alt="Fallback" width={800} height={600} />
+```
+
+**Props:** Extends all Next.js `ImageProps` (except `src`), plus:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `media` | `MediaResource \| string` | Payload media document or URL string |
+| `alt` | `string` | Alt text (overrides `media.alt`) |
+
+Automatically applies:
+- ThumbHash blur placeholder (if available on the media resource)
+- Focal point positioning via `objectPosition` (using `focalX`/`focalY`)
+- Cache-busting via `updatedAt` query parameter
+- `objectFit: 'cover'` by default (overridable via `style`)
+
+### `getImageOptimizerProps()` Utility
+
+For integrating with existing image components (e.g., the Payload website template's `ImageMedia`):
+
+```tsx
+import { getImageOptimizerProps } from '@inoo-ch/payload-image-optimizer/client'
+import NextImage from 'next/image'
+
+const optimizerProps = getImageOptimizerProps(media)
+
+<NextImage
+  src={media.url}
+  alt={media.alt}
+  {...optimizerProps}
+/>
+```
+
+**Returns:**
+```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'
+  },
+}
+```
+
+## Server-Side Utilities
+
+Import from `@inoo-ch/payload-image-optimizer`:
+
+### `encodeImageToThumbHash(buffer, width, height)`
+
+Encode raw RGBA pixel data to a base64 ThumbHash string.
+
+### `decodeThumbHashToDataURL(thumbHash)`
+
+Decode a base64 ThumbHash string to a data URL for use as an `<img src>`.
+
+## Background Jobs
+
+The plugin registers two Payload job tasks (retries: 2 each):
+
+| Task Slug | Trigger | Purpose |
+|-----------|---------|---------|
+| `imageOptimizer_convertFormats` | After upload (`afterChange` hook) | Generate format variants for a single document |
+| `imageOptimizer_regenerateDocument` | Bulk regeneration endpoint | Fully re-optimize a single document (resize + thumbhash + all variants) |
+
+## Full Example
+
+```ts
+// payload.config.ts
+import { buildConfig } from 'payload'
+import { imageOptimizer } from '@inoo-ch/payload-image-optimizer'
+import sharp from 'sharp'
+
+export default buildConfig({
+  collections: [
+    {
+      slug: 'media',
+      fields: [],
+      upload: { staticDir: './media' },
+    },
+    {
+      slug: 'avatars',
+      fields: [],
+      upload: { staticDir: './avatars' },
+    },
+  ],
+  plugins: [
+    imageOptimizer({
+      collections: {
+        media: true, // all defaults: webp@80, 2560x2560, strip, thumbhash
+        avatars: {
+          maxDimensions: { width: 256, height: 256 },
+          formats: [{ format: 'webp', quality: 90 }],
+        },
+      },
+      formats: [
+        { format: 'webp', quality: 80 },
+        { format: 'avif', quality: 65 },
+      ],
+    }),
+  ],
+  sharp,
+})
+```
+
+```tsx
+// components/Hero.tsx
+import { ImageBox } from '@inoo-ch/payload-image-optimizer/client'
+
+export function Hero({ image }) {
+  return (
+    <div style={{ position: 'relative', height: '60vh' }}>
+      <ImageBox media={image} alt="Hero" fill sizes="100vw" priority />
+    </div>
+  )
+}
+```
+
+## TypeScript
+
+Exported types:
+
+```ts
+import type {
+  ImageOptimizerConfig,
+  CollectionOptimizerConfig,
+  FormatQuality,
+  ImageFormat,            // 'webp' | 'avif'
+} from '@inoo-ch/payload-image-optimizer'
+
+import type {
+  ImageBoxProps,
+  ImageOptimizerProps,    // return type of getImageOptimizerProps
+} from '@inoo-ch/payload-image-optimizer/client'
+```
+
+## Context Flags
+
+The plugin uses `req.context` flags to control processing:
+
+| Flag | Purpose |
+|------|---------|
+| `imageOptimizer_skip: true` | Set this on `req.context` to skip all optimization for a specific operation (useful for programmatic updates that shouldn't re-trigger processing). |
+
+```ts
+// Example: update a media doc without re-processing
+await payload.update({
+  collection: 'media',
+  id: docId,
+  data: { alt: 'Updated alt text' },
+  context: { imageOptimizer_skip: true },
+})
+```

package/dist/components/ImageBox.d.ts

@@ -1,22 +1,8 @@
 import React from 'react';
 import { type ImageProps } from 'next/image';
-type ImageOptimizerData = {
-    thumbHash?: string | null;
-};
-type MediaResource = {
-    url?: string | null;
-    alt?: string | null;
-    width?: number | null;
-    height?: number | null;
-    filename?: string | null;
-    focalX?: number | null;
-    focalY?: number | null;
-    imageOptimizer?: ImageOptimizerData | null;
-    updatedAt?: string;
-};
+import type { MediaResource } from '../types.js';
 export interface ImageBoxProps extends Omit<ImageProps, 'src' | 'alt'> {
     media: MediaResource | string;
     alt?: string;
 }
 export declare const ImageBox: React.FC<ImageBoxProps>;
-export {};

package/dist/components/ImageBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ImageBox.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport NextImage, { type ImageProps } from 'next/image'\nimport { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\n\ntype ImageOptimizerData = {\n  thumbHash?: string | null\n}\n\ntype MediaResource = {\n  url?: string | null\n  alt?: string | null\n  width?: number | null\n  height?: number | null\n  filename?: string | null\n  focalX?: number | null\n  focalY?: number | null\n  imageOptimizer?: ImageOptimizerData | null\n  updatedAt?: string\n}\n\nexport interface ImageBoxProps extends Omit<ImageProps, 'src' | 'alt'> {\n  media: MediaResource | string\n  alt?: string\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  ...props\n}) => {\n  const loading = priority ? undefined : (loadingFromProps ?? 'lazy')\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', ...styleFromProps }}\n        priority={priority}\n        loading={loading}\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, ...styleFromProps }}\n      placeholder={optimizerProps.placeholder}\n      blurDataURL={optimizerProps.blurDataURL}\n      priority={priority}\n      loading={loading}\n    />\n  )\n}\n"],"names":["React","NextImage","getImageOptimizerProps","ImageBox","media","alt","altFromProps","fill","sizes","priority","loading","loadingFromProps","style","styleFromProps","props","undefined","src","quality","objectFit","objectPosition","width","height","filename","url","updatedAt","optimizerProps","placeholder","blurDataURL"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AACzB,OAAOC,eAAoC,aAAY;AACvD,SAASC,sBAAsB,QAAQ,yCAAwC;AAuB/E,OAAO,MAAMC,WAAoC,CAAC,EAChDC,KAAK,EACLC,KAAKC,YAAY,EACjBC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAASC,gBAAgB,EACzBC,OAAOC,cAAc,EACrB,GAAGC,OACJ;IACC,MAAMJ,UAAUD,WAAWM,YAAaJ,oBAAoB;IAE5D,IAAI,OAAOP,UAAU,UAAU;QAC7B,qBACE,KAACH;YACE,GAAGa,KAAK;YACTE,KAAKZ;YACLC,KAAKC,gBAAgB;YACrBW,SAAS;YACTV,MAAMA;YACNC,OAAOA;YACPI,OAAO;gBAAEM,WAAW;gBAASC,gBAAgB;gBAAU,GAAGN,cAAc;YAAC;YACzEJ,UAAUA;YACVC,SAASA;;IAGf;IAEA,MAAMU,QAAQhB,MAAMgB,KAAK,IAAIL;IAC7B,MAAMM,SAASjB,MAAMiB,MAAM,IAAIN;IAC/B,MAAMV,MAAMC,gBAAgB,AAACF,MAAcC,GAAG,IAAID,MAAMkB,QAAQ,IAAI;IACpE,MAAMN,MAAMZ,MAAMmB,GAAG,GAAG,GAAGnB,MAAMmB,GAAG,GAAGnB,MAAMoB,SAAS,GAAG,CAAC,CAAC,EAAEpB,MAAMoB,SAAS,EAAE,GAAG,IAAI,GAAG;IAExF,MAAMC,iBAAiBvB,uBAAuBE;IAE9C,qBACE,KAACH;QACE,GAAGa,KAAK;QACTE,KAAKA;QACLX,KAAKA;QACLY,SAAS;QACTV,MAAMA;QACNa,OAAO,CAACb,OAAOa,QAAQL;QACvBM,QAAQ,CAACd,OAAOc,SAASN;QACzBP,OAAOA;QACPI,OAAO;YAAEM,WAAW;YAAS,GAAGO,eAAeb,KAAK;YAAE,GAAGC,cAAc;QAAC;QACxEa,aAAaD,eAAeC,WAAW;QACvCC,aAAaF,eAAeE,WAAW;QACvClB,UAAUA;QACVC,SAASA;;AAGf,EAAC"}
+{"version":3,"sources":["../../src/components/ImageBox.tsx"],"sourcesContent":["'use client'\n\nimport React 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}\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  ...props\n}) => {\n  const loading = priority ? undefined : (loadingFromProps ?? 'lazy')\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', ...styleFromProps }}\n        priority={priority}\n        loading={loading}\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, ...styleFromProps }}\n      placeholder={optimizerProps.placeholder}\n      blurDataURL={optimizerProps.blurDataURL}\n      priority={priority}\n      loading={loading}\n    />\n  )\n}\n"],"names":["React","NextImage","getImageOptimizerProps","ImageBox","media","alt","altFromProps","fill","sizes","priority","loading","loadingFromProps","style","styleFromProps","props","undefined","src","quality","objectFit","objectPosition","width","height","filename","url","updatedAt","optimizerProps","placeholder","blurDataURL"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AACzB,OAAOC,eAAoC,aAAY;AAEvD,SAASC,sBAAsB,QAAQ,yCAAwC;AAO/E,OAAO,MAAMC,WAAoC,CAAC,EAChDC,KAAK,EACLC,KAAKC,YAAY,EACjBC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAASC,gBAAgB,EACzBC,OAAOC,cAAc,EACrB,GAAGC,OACJ;IACC,MAAMJ,UAAUD,WAAWM,YAAaJ,oBAAoB;IAE5D,IAAI,OAAOP,UAAU,UAAU;QAC7B,qBACE,KAACH;YACE,GAAGa,KAAK;YACTE,KAAKZ;YACLC,KAAKC,gBAAgB;YACrBW,SAAS;YACTV,MAAMA;YACNC,OAAOA;YACPI,OAAO;gBAAEM,WAAW;gBAASC,gBAAgB;gBAAU,GAAGN,cAAc;YAAC;YACzEJ,UAAUA;YACVC,SAASA;;IAGf;IAEA,MAAMU,QAAQhB,MAAMgB,KAAK,IAAIL;IAC7B,MAAMM,SAASjB,MAAMiB,MAAM,IAAIN;IAC/B,MAAMV,MAAMC,gBAAgB,AAACF,MAAcC,GAAG,IAAID,MAAMkB,QAAQ,IAAI;IACpE,MAAMN,MAAMZ,MAAMmB,GAAG,GAAG,GAAGnB,MAAMmB,GAAG,GAAGnB,MAAMoB,SAAS,GAAG,CAAC,CAAC,EAAEpB,MAAMoB,SAAS,EAAE,GAAG,IAAI,GAAG;IAExF,MAAMC,iBAAiBvB,uBAAuBE;IAE9C,qBACE,KAACH;QACE,GAAGa,KAAK;QACTE,KAAKA;QACLX,KAAKA;QACLY,SAAS;QACTV,MAAMA;QACNa,OAAO,CAACb,OAAOa,QAAQL;QACvBM,QAAQ,CAACd,OAAOc,SAASN;QACzBP,OAAOA;QACPI,OAAO;YAAEM,WAAW;YAAS,GAAGO,eAAeb,KAAK;YAAE,GAAGC,cAAc;QAAC;QACxEa,aAAaD,eAAeC,WAAW;QACvCC,aAAaF,eAAeE,WAAW;QACvClB,UAAUA;QACVC,SAASA;;AAGf,EAAC"}

package/dist/components/OptimizationStatus.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { thumbHashToDataURL } from 'thumbhash';
-import { useAllFormFields } from '@payloadcms/ui';
+import { useAllFormFields, useDocumentInfo } from '@payloadcms/ui';
 const formatBytes = (bytes)=>{
     if (bytes === 0) return '0 B';
     const k = 1024;
@@ -21,14 +21,71 @@ const statusColors = {
     complete: '#10b981',
     error: '#ef4444'
 };
+const POLL_INTERVAL_MS = 2000;
 export const OptimizationStatus = (props)=>{
     const [formState] = useAllFormFields();
+    const { collectionSlug, id } = useDocumentInfo();
     const basePath = props.path ?? 'imageOptimizer';
-    const status = formState[`${basePath}.status`]?.value;
-    const originalSize = formState[`${basePath}.originalSize`]?.value;
-    const optimizedSize = formState[`${basePath}.optimizedSize`]?.value;
-    const thumbHash = formState[`${basePath}.thumbHash`]?.value;
-    const error = formState[`${basePath}.error`]?.value;
+    const formStatus = formState[`${basePath}.status`]?.value;
+    const formOriginalSize = formState[`${basePath}.originalSize`]?.value;
+    const formOptimizedSize = formState[`${basePath}.optimizedSize`]?.value;
+    const formThumbHash = formState[`${basePath}.thumbHash`]?.value;
+    const formError = formState[`${basePath}.error`]?.value;
+    const [polledData, setPolledData] = React.useState(null);
+    // Reset polled data when a new upload changes the form status back to pending
+    React.useEffect(()=>{
+        if (formStatus === 'pending') {
+            setPolledData(null);
+        }
+    }, [
+        formStatus
+    ]);
+    // Poll for status updates when status is non-terminal
+    React.useEffect(()=>{
+        const currentStatus = polledData?.status ?? formStatus;
+        if (!currentStatus || currentStatus === 'complete' || currentStatus === 'error') return;
+        if (!collectionSlug || !id) return;
+        const controller = new AbortController();
+        const poll = async ()=>{
+            try {
+                const res = await fetch(`/api/${collectionSlug}/${id}?depth=0`, {
+                    signal: controller.signal
+                });
+                if (!res.ok) return;
+                const doc = await res.json();
+                const optimizer = doc.imageOptimizer;
+                if (!optimizer) return;
+                setPolledData({
+                    status: optimizer.status,
+                    originalSize: optimizer.originalSize,
+                    optimizedSize: optimizer.optimizedSize,
+                    thumbHash: optimizer.thumbHash,
+                    error: optimizer.error,
+                    variants: optimizer.variants
+                });
+            } catch  {
+            // Silently ignore fetch errors (abort, network issues)
+            }
+        };
+        const intervalId = setInterval(poll, POLL_INTERVAL_MS);
+        // Run immediately on mount
+        poll();
+        return ()=>{
+            controller.abort();
+            clearInterval(intervalId);
+        };
+    }, [
+        polledData?.status,
+        formStatus,
+        collectionSlug,
+        id
+    ]);
+    // Use polled data when available, otherwise fall back to form state
+    const status = polledData?.status ?? formStatus;
+    const originalSize = polledData?.originalSize ?? formOriginalSize;
+    const optimizedSize = polledData?.optimizedSize ?? formOptimizedSize;
+    const thumbHash = polledData?.thumbHash ?? formThumbHash;
+    const error = polledData?.error ?? formError;
     const thumbHashUrl = React.useMemo(()=>{
         if (!thumbHash) return null;
         try {
@@ -40,19 +97,27 @@ export const OptimizationStatus = (props)=>{
     }, [
         thumbHash
     ]);
-    // Read variants array from form state
-    const variantsField = formState[`${basePath}.variants`];
-    const rowCount = variantsField?.rows?.length ?? 0;
-    const variants = [];
-    for(let i = 0; i < rowCount; i++){
-        variants.push({
-            format: formState[`${basePath}.variants.${i}.format`]?.value,
-            filename: formState[`${basePath}.variants.${i}.filename`]?.value,
-            filesize: formState[`${basePath}.variants.${i}.filesize`]?.value,
-            width: formState[`${basePath}.variants.${i}.width`]?.value,
-            height: formState[`${basePath}.variants.${i}.height`]?.value
-        });
-    }
+    // Read variants from polled data or form state
+    const variants = React.useMemo(()=>{
+        if (polledData?.variants) return polledData.variants;
+        const variantsField = formState[`${basePath}.variants`];
+        const rowCount = variantsField?.rows?.length ?? 0;
+        const formVariants = [];
+        for(let i = 0; i < rowCount; i++){
+            formVariants.push({
+                format: formState[`${basePath}.variants.${i}.format`]?.value,
+                filename: formState[`${basePath}.variants.${i}.filename`]?.value,
+                filesize: formState[`${basePath}.variants.${i}.filesize`]?.value,
+                width: formState[`${basePath}.variants.${i}.width`]?.value,
+                height: formState[`${basePath}.variants.${i}.height`]?.value
+            });
+        }
+        return formVariants;
+    }, [
+        polledData?.variants,
+        formState,
+        basePath
+    ]);
     if (!status) {
         return /*#__PURE__*/ _jsx("div", {
             style: {

package/dist/components/OptimizationStatus.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/OptimizationStatus.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { thumbHashToDataURL } from 'thumbhash'\nimport { useAllFormFields } from '@payloadcms/ui'\n\nconst formatBytes = (bytes: number): string => {\n  if (bytes === 0) return '0 B'\n  const k = 1024\n  const sizes = ['B', 'KB', 'MB', 'GB']\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`\n}\n\nconst statusColors: Record<string, string> = {\n  pending: '#f59e0b',\n  processing: '#3b82f6',\n  complete: '#10b981',\n  error: '#ef4444',\n}\n\nexport const OptimizationStatus: React.FC<{ path?: string }> = (props) => {\n  const [formState] = useAllFormFields()\n  const basePath = props.path ?? 'imageOptimizer'\n\n  const status = formState[`${basePath}.status`]?.value as string | undefined\n  const originalSize = formState[`${basePath}.originalSize`]?.value as number | undefined\n  const optimizedSize = formState[`${basePath}.optimizedSize`]?.value as number | undefined\n  const thumbHash = formState[`${basePath}.thumbHash`]?.value as string | undefined\n  const error = formState[`${basePath}.error`]?.value as string | undefined\n\n  const thumbHashUrl = React.useMemo(() => {\n    if (!thumbHash) return null\n    try {\n      const bytes = Uint8Array.from(atob(thumbHash), c => c.charCodeAt(0))\n      return thumbHashToDataURL(bytes)\n    } catch {\n      return null\n    }\n  }, [thumbHash])\n\n  // Read variants array from form state\n  const variantsField = formState[`${basePath}.variants`]\n  const rowCount = (variantsField as any)?.rows?.length ?? 0\n  const variants: Array<{\n    format?: string\n    filename?: string\n    filesize?: number\n    width?: number\n    height?: number\n  }> = []\n\n  for (let i = 0; i < rowCount; i++) {\n    variants.push({\n      format: formState[`${basePath}.variants.${i}.format`]?.value as string | undefined,\n      filename: formState[`${basePath}.variants.${i}.filename`]?.value as string | undefined,\n      filesize: formState[`${basePath}.variants.${i}.filesize`]?.value as number | undefined,\n      width: formState[`${basePath}.variants.${i}.width`]?.value as number | undefined,\n      height: formState[`${basePath}.variants.${i}.height`]?.value as number | undefined,\n    })\n  }\n\n  if (!status) {\n    return (\n      <div style={{ padding: '12px 0' }}>\n        <div style={{ color: '#6b7280', fontSize: '13px' }}>\n          No optimization data yet. Upload an image to optimize.\n        </div>\n      </div>\n    )\n  }\n\n  const savings =\n    originalSize && optimizedSize\n      ? Math.round((1 - optimizedSize / originalSize) * 100)\n      : null\n\n  return (\n    <div style={{ padding: '12px 0' }}>\n      <div style={{ marginBottom: '8px' }}>\n        <span\n          style={{\n            backgroundColor: statusColors[status] || '#6b7280',\n            borderRadius: '4px',\n            color: '#fff',\n            display: 'inline-block',\n            fontSize: '12px',\n            fontWeight: 600,\n            padding: '2px 8px',\n            textTransform: 'uppercase',\n          }}\n        >\n          {status}\n        </span>\n      </div>\n\n      {error && (\n        <div style={{ color: '#ef4444', fontSize: '13px', marginBottom: '8px' }}>{error}</div>\n      )}\n\n      {originalSize != null && optimizedSize != null && (\n        <div style={{ fontSize: '13px', marginBottom: '8px' }}>\n          <div>Original: <strong>{formatBytes(originalSize)}</strong></div>\n          <div>\n            Optimized: <strong>{formatBytes(optimizedSize)}</strong>\n            {savings != null && savings > 0 && (\n              <span style={{ color: '#10b981', marginLeft: '4px' }}>(-{savings}%)</span>\n            )}\n          </div>\n        </div>\n      )}\n\n      {thumbHashUrl && (\n        <div style={{ marginBottom: '8px' }}>\n          <div style={{ fontSize: '12px', marginBottom: '4px', opacity: 0.7 }}>Blur Preview</div>\n          <img\n            alt=\"Blur placeholder\"\n            src={thumbHashUrl}\n            style={{ borderRadius: '4px', height: '40px', width: 'auto' }}\n          />\n        </div>\n      )}\n\n      {variants.length > 0 && (\n        <div>\n          <div style={{ fontSize: '12px', marginBottom: '4px', opacity: 0.7 }}>Variants</div>\n          {variants.map((v, i) => (\n            <div key={i} style={{ fontSize: '12px', marginBottom: '2px' }}>\n              <strong>{v.format?.toUpperCase()}</strong> — {v.filesize ? formatBytes(v.filesize) : '?'}{' '}\n              ({v.width}x{v.height})\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["React","thumbHashToDataURL","useAllFormFields","formatBytes","bytes","k","sizes","i","Math","floor","log","parseFloat","pow","toFixed","statusColors","pending","processing","complete","error","OptimizationStatus","props","formState","basePath","path","status","value","originalSize","optimizedSize","thumbHash","thumbHashUrl","useMemo","Uint8Array","from","atob","c","charCodeAt","variantsField","rowCount","rows","length","variants","push","format","filename","filesize","width","height","div","style","padding","color","fontSize","savings","round","marginBottom","span","backgroundColor","borderRadius","display","fontWeight","textTransform","strong","marginLeft","opacity","img","alt","src","map","v","toUpperCase"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/OptimizationStatus.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { thumbHashToDataURL } from 'thumbhash'\nimport { useAllFormFields, useDocumentInfo } from '@payloadcms/ui'\n\nconst formatBytes = (bytes: number): string => {\n  if (bytes === 0) return '0 B'\n  const k = 1024\n  const sizes = ['B', 'KB', 'MB', 'GB']\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`\n}\n\nconst statusColors: Record<string, string> = {\n  pending: '#f59e0b',\n  processing: '#3b82f6',\n  complete: '#10b981',\n  error: '#ef4444',\n}\n\nconst POLL_INTERVAL_MS = 2000\n\ntype PolledData = {\n  status?: string\n  originalSize?: number\n  optimizedSize?: number\n  thumbHash?: string\n  error?: string\n  variants?: Array<{\n    format?: string\n    filename?: string\n    filesize?: number\n    width?: number\n    height?: number\n  }>\n}\n\nexport const OptimizationStatus: React.FC<{ path?: string }> = (props) => {\n  const [formState] = useAllFormFields()\n  const { collectionSlug, id } = useDocumentInfo()\n  const basePath = props.path ?? 'imageOptimizer'\n\n  const formStatus = formState[`${basePath}.status`]?.value as string | undefined\n  const formOriginalSize = formState[`${basePath}.originalSize`]?.value as number | undefined\n  const formOptimizedSize = formState[`${basePath}.optimizedSize`]?.value as number | undefined\n  const formThumbHash = formState[`${basePath}.thumbHash`]?.value as string | undefined\n  const formError = formState[`${basePath}.error`]?.value as string | undefined\n\n  const [polledData, setPolledData] = React.useState<PolledData | null>(null)\n\n  // Reset polled data when a new upload changes the form status back to pending\n  React.useEffect(() => {\n    if (formStatus === 'pending') {\n      setPolledData(null)\n    }\n  }, [formStatus])\n\n  // Poll for status updates when status is non-terminal\n  React.useEffect(() => {\n    const currentStatus = polledData?.status ?? formStatus\n    if (!currentStatus || currentStatus === 'complete' || currentStatus === 'error') return\n    if (!collectionSlug || !id) return\n\n    const controller = new AbortController()\n\n    const poll = async () => {\n      try {\n        const res = await fetch(`/api/${collectionSlug}/${id}?depth=0`, {\n          signal: controller.signal,\n        })\n        if (!res.ok) return\n        const doc = await res.json()\n        const optimizer = doc.imageOptimizer\n        if (!optimizer) return\n\n        setPolledData({\n          status: optimizer.status,\n          originalSize: optimizer.originalSize,\n          optimizedSize: optimizer.optimizedSize,\n          thumbHash: optimizer.thumbHash,\n          error: optimizer.error,\n          variants: optimizer.variants,\n        })\n      } catch {\n        // Silently ignore fetch errors (abort, network issues)\n      }\n    }\n\n    const intervalId = setInterval(poll, POLL_INTERVAL_MS)\n    // Run immediately on mount\n    poll()\n\n    return () => {\n      controller.abort()\n      clearInterval(intervalId)\n    }\n  }, [polledData?.status, formStatus, collectionSlug, id])\n\n  // Use polled data when available, otherwise fall back to form state\n  const status = polledData?.status ?? formStatus\n  const originalSize = polledData?.originalSize ?? formOriginalSize\n  const optimizedSize = polledData?.optimizedSize ?? formOptimizedSize\n  const thumbHash = polledData?.thumbHash ?? formThumbHash\n  const error = polledData?.error ?? formError\n\n  const thumbHashUrl = React.useMemo(() => {\n    if (!thumbHash) return null\n    try {\n      const bytes = Uint8Array.from(atob(thumbHash), c => c.charCodeAt(0))\n      return thumbHashToDataURL(bytes)\n    } catch {\n      return null\n    }\n  }, [thumbHash])\n\n  // Read variants from polled data or form state\n  const variants: Array<{\n    format?: string\n    filename?: string\n    filesize?: number\n    width?: number\n    height?: number\n  }> = React.useMemo(() => {\n    if (polledData?.variants) return polledData.variants\n\n    const variantsField = formState[`${basePath}.variants`]\n    const rowCount = (variantsField as any)?.rows?.length ?? 0\n    const formVariants: typeof variants = []\n    for (let i = 0; i < rowCount; i++) {\n      formVariants.push({\n        format: formState[`${basePath}.variants.${i}.format`]?.value as string | undefined,\n        filename: formState[`${basePath}.variants.${i}.filename`]?.value as string | undefined,\n        filesize: formState[`${basePath}.variants.${i}.filesize`]?.value as number | undefined,\n        width: formState[`${basePath}.variants.${i}.width`]?.value as number | undefined,\n        height: formState[`${basePath}.variants.${i}.height`]?.value as number | undefined,\n      })\n    }\n    return formVariants\n  }, [polledData?.variants, formState, basePath])\n\n  if (!status) {\n    return (\n      <div style={{ padding: '12px 0' }}>\n        <div style={{ color: '#6b7280', fontSize: '13px' }}>\n          No optimization data yet. Upload an image to optimize.\n        </div>\n      </div>\n    )\n  }\n\n  const savings =\n    originalSize && optimizedSize\n      ? Math.round((1 - optimizedSize / originalSize) * 100)\n      : null\n\n  return (\n    <div style={{ padding: '12px 0' }}>\n      <div style={{ marginBottom: '8px' }}>\n        <span\n          style={{\n            backgroundColor: statusColors[status] || '#6b7280',\n            borderRadius: '4px',\n            color: '#fff',\n            display: 'inline-block',\n            fontSize: '12px',\n            fontWeight: 600,\n            padding: '2px 8px',\n            textTransform: 'uppercase',\n          }}\n        >\n          {status}\n        </span>\n      </div>\n\n      {error && (\n        <div style={{ color: '#ef4444', fontSize: '13px', marginBottom: '8px' }}>{error}</div>\n      )}\n\n      {originalSize != null && optimizedSize != null && (\n        <div style={{ fontSize: '13px', marginBottom: '8px' }}>\n          <div>Original: <strong>{formatBytes(originalSize)}</strong></div>\n          <div>\n            Optimized: <strong>{formatBytes(optimizedSize)}</strong>\n            {savings != null && savings > 0 && (\n              <span style={{ color: '#10b981', marginLeft: '4px' }}>(-{savings}%)</span>\n            )}\n          </div>\n        </div>\n      )}\n\n      {thumbHashUrl && (\n        <div style={{ marginBottom: '8px' }}>\n          <div style={{ fontSize: '12px', marginBottom: '4px', opacity: 0.7 }}>Blur Preview</div>\n          <img\n            alt=\"Blur placeholder\"\n            src={thumbHashUrl}\n            style={{ borderRadius: '4px', height: '40px', width: 'auto' }}\n          />\n        </div>\n      )}\n\n      {variants.length > 0 && (\n        <div>\n          <div style={{ fontSize: '12px', marginBottom: '4px', opacity: 0.7 }}>Variants</div>\n          {variants.map((v, i) => (\n            <div key={i} style={{ fontSize: '12px', marginBottom: '2px' }}>\n              <strong>{v.format?.toUpperCase()}</strong> — {v.filesize ? formatBytes(v.filesize) : '?'}{' '}\n              ({v.width}x{v.height})\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["React","thumbHashToDataURL","useAllFormFields","useDocumentInfo","formatBytes","bytes","k","sizes","i","Math","floor","log","parseFloat","pow","toFixed","statusColors","pending","processing","complete","error","POLL_INTERVAL_MS","OptimizationStatus","props","formState","collectionSlug","id","basePath","path","formStatus","value","formOriginalSize","formOptimizedSize","formThumbHash","formError","polledData","setPolledData","useState","useEffect","currentStatus","status","controller","AbortController","poll","res","fetch","signal","ok","doc","json","optimizer","imageOptimizer","originalSize","optimizedSize","thumbHash","variants","intervalId","setInterval","abort","clearInterval","thumbHashUrl","useMemo","Uint8Array","from","atob","c","charCodeAt","variantsField","rowCount","rows","length","formVariants","push","format","filename","filesize","width","height","div","style","padding","color","fontSize","savings","round","marginBottom","span","backgroundColor","borderRadius","display","fontWeight","textTransform","strong","marginLeft","opacity","img","alt","src","map","v","toUpperCase"],"mappings":"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"}

package/dist/fields/imageOptimizerField.d.ts

@@ -1,2 +1,4 @@
-import type { GroupField } from 'payload';
-export declare const getImageOptimizerField: () => GroupField;
+import type { Field, GroupField } from 'payload';
+import type { FieldsOverride } from '../types.js';
+export declare const defaultImageOptimizerFields: Field[];
+export declare const getImageOptimizerField: (fieldsOverride?: FieldsOverride) => GroupField;