@inoo-ch/payload-image-optimizer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 inoo.ch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,226 @@
+# @inoo-ch/payload-image-optimizer
+
+A [Payload CMS](https://payloadcms.com) plugin for automatic image optimization. Converts uploads to WebP/AVIF, resizes to configurable limits, strips EXIF metadata, generates [ThumbHash](https://evanw.github.io/thumbhash/) blur placeholders, and provides bulk regeneration from the admin panel.
+
+Built and maintained by [inoo.ch](https://inoo.ch) — a Swiss digital agency crafting modern web experiences.
+
+## Features
+
+- **Format conversion** — Automatically generates WebP and AVIF variants with configurable quality
+- **Smart resizing** — Constrains images to max dimensions while preserving aspect ratio
+- **EXIF stripping** — Removes metadata for smaller files and better privacy
+- **ThumbHash placeholders** — Generates tiny blur hashes for instant image previews
+- **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
+
+## Requirements
+
+- Payload CMS `^3.37.0`
+- Next.js `^14.0.0` or `^15.0.0`
+- React `^18.0.0` or `^19.0.0`
+- Node.js `^18.20.2` or `>=20.9.0`
+
+## Installation
+
+```bash
+pnpm add @inoo-ch/payload-image-optimizer
+# or
+npm install @inoo-ch/payload-image-optimizer
+# or
+yarn add @inoo-ch/payload-image-optimizer
+```
+
+> **Note:** This plugin uses [sharp](https://sharp.pixelplumbing.com/) for image processing. It is expected as a peer dependency from Payload CMS — no separate install needed.
+
+## Quick Start
+
+Add the plugin to your `payload.config.ts`:
+
+```ts
+import { buildConfig } from 'payload'
+import { imageOptimizer } from '@inoo-ch/payload-image-optimizer'
+
+export default buildConfig({
+  // ...
+  plugins: [
+    imageOptimizer({
+      collections: {
+        media: true,
+      },
+    }),
+  ],
+})
+```
+
+That's it. Every image uploaded to the `media` collection will be automatically optimized with sensible defaults.
+
+## Configuration
+
+### Full Example
+
+```ts
+imageOptimizer({
+  collections: {
+    media: {
+      formats: [
+        { format: 'webp', quality: 90 },
+        { format: 'avif', quality: 75 },
+      ],
+      maxDimensions: { width: 4096, height: 4096 },
+    },
+    avatars: true, // uses global defaults
+  },
+
+  // Global defaults (overridden by per-collection config)
+  formats: [
+    { format: 'webp', quality: 80 },
+    { format: 'avif', quality: 65 },
+  ],
+  maxDimensions: { width: 2560, height: 2560 },
+  generateThumbHash: true,
+  stripMetadata: true,
+  disabled: false,
+})
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `collections` | `Record<string, true \| CollectionConfig>` | *required* | Collections to optimize. Use `true` for defaults or an object for overrides. |
+| `formats` | `FormatQuality[]` | `[{ format: 'webp', quality: 80 }, { format: 'avif', quality: 65 }]` | Output formats and quality (1-100). |
+| `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. |
+| `disabled` | `boolean` | `false` | Disable optimization while keeping schema fields intact. |
+
+### Per-Collection Overrides
+
+Each collection can override `formats` and `maxDimensions`:
+
+```ts
+collections: {
+  // Hero images: higher quality, larger dimensions
+  heroes: {
+    formats: [{ format: 'webp', quality: 95 }],
+    maxDimensions: { width: 3840, height: 2160 },
+  },
+  // Thumbnails: smaller, more aggressive compression
+  thumbnails: {
+    formats: [
+      { format: 'webp', quality: 60 },
+      { format: 'avif', quality: 45 },
+    ],
+    maxDimensions: { width: 800, height: 800 },
+  },
+}
+```
+
+## How It Works
+
+1. **Upload** — An image is uploaded to a configured collection
+2. **Pre-process** — The `beforeChange` hook strips metadata, resizes the image, and generates a ThumbHash
+3. **Save** — Payload writes the optimized image to disk
+4. **Convert** — A background job converts the image to WebP/AVIF variants asynchronously
+5. **Done** — The document is updated with variant URLs, file sizes, and optimization status
+
+All format conversion runs as async background jobs, so uploads return immediately.
+
+## Admin UI
+
+The plugin adds an **Optimization Status** panel to the document sidebar showing:
+
+- Status badge (pending / processing / complete / error)
+- Original vs. optimized file size with savings percentage
+- ThumbHash blur preview thumbnail
+- List of generated format variants with dimensions and file sizes
+
+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
+
+The plugin exports an `ImageBox` component — a Next.js `<Image>` wrapper that automatically applies ThumbHash blur placeholders:
+
+```tsx
+import { ImageBox } from '@inoo-ch/payload-image-optimizer/client'
+
+// Pass a Payload media document directly
+<ImageBox media={doc.heroImage} alt="Hero" />
+
+// Or use a plain URL string
+<ImageBox media="/images/photo.jpg" alt="Photo" width={800} height={600} />
+```
+
+**Features:**
+- Automatic ThumbHash `blurDataURL` from the media document
+- 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
+
+## Document Schema
+
+The plugin adds an `imageOptimizer` field group to each configured collection:
+
+```ts
+{
+  imageOptimizer: {
+    status: 'pending' | 'processing' | 'complete' | 'error',
+    originalSize: number,    // bytes
+    optimizedSize: number,   // bytes
+    thumbHash: string,       // base64-encoded ThumbHash
+    error: string,           // error message (if failed)
+    variants: [
+      {
+        format: string,      // 'webp' | 'avif'
+        filename: string,    // e.g. 'photo-optimized.webp'
+        filesize: number,
+        width: number,
+        height: number,
+        mimeType: string,
+        url: string,
+      },
+    ],
+  },
+}
+```
+
+## REST API Endpoints
+
+### Start Bulk Regeneration
+
+```
+POST /api/image-optimizer/regenerate
+Content-Type: application/json
+
+{ "collectionSlug": "media", "force": false }
+```
+
+- `force: false` — only regenerates images that are not yet complete
+- `force: true` — re-processes all images from scratch
+
+**Response:** `{ "queued": 42, "collectionSlug": "media" }`
+
+### Check Regeneration Progress
+
+```
+GET /api/image-optimizer/regenerate?collection=media
+```
+
+**Response:** `{ "collectionSlug": "media", "total": 42, "complete": 30, "errored": 1, "pending": 11 }`
+
+Both endpoints require an authenticated user.
+
+## Contributing
+
+This plugin is open source and we welcome community involvement:
+
+- **Issues** — Found a bug or have a feature request? [Open an issue](https://github.com/payloadcms-plugins/image-optimizer/issues).
+- **Pull Requests** — PRs are welcome! Please open an issue first to discuss larger changes.
+
+All changes are reviewed and merged by the package maintainer at [inoo.ch](https://inoo.ch).
+
+## License
+
+MIT - [inoo.ch](https://inoo.ch)

package/dist/components/ImageBox.d.ts

@@ -0,0 +1,22 @@
+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;
+};
+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

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import NextImage from 'next/image';
+import { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js';
+export const ImageBox = ({ media, alt: altFromProps, fill, sizes, priority, loading: loadingFromProps, style: styleFromProps, ...props })=>{
+    const loading = priority ? undefined : loadingFromProps ?? 'lazy';
+    if (typeof media === 'string') {
+        return /*#__PURE__*/ _jsx(NextImage, {
+            ...props,
+            src: media,
+            alt: altFromProps || '',
+            quality: 80,
+            fill: fill,
+            sizes: sizes,
+            style: {
+                objectFit: 'cover',
+                objectPosition: 'center',
+                ...styleFromProps
+            },
+            priority: priority,
+            loading: loading
+        });
+    }
+    const width = media.width ?? undefined;
+    const height = media.height ?? undefined;
+    const alt = altFromProps || media.alt || media.filename || '';
+    const src = media.url ? `${media.url}${media.updatedAt ? `?${media.updatedAt}` : ''}` : '';
+    const optimizerProps = getImageOptimizerProps(media);
+    return /*#__PURE__*/ _jsx(NextImage, {
+        ...props,
+        src: src,
+        alt: alt,
+        quality: 80,
+        fill: fill,
+        width: !fill ? width : undefined,
+        height: !fill ? height : undefined,
+        sizes: sizes,
+        style: {
+            objectFit: 'cover',
+            ...optimizerProps.style,
+            ...styleFromProps
+        },
+        placeholder: optimizerProps.placeholder,
+        blurDataURL: optimizerProps.blurDataURL,
+        priority: priority,
+        loading: loading
+    });
+};
+
+//# sourceMappingURL=ImageBox.js.map

package/dist/components/ImageBox.js.map

@@ -0,0 +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"}

package/dist/components/OptimizationStatus.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const OptimizationStatus: React.FC<{
+    path?: string;
+}>;

package/dist/components/OptimizationStatus.js

@@ -0,0 +1,196 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { thumbHashToDataURL } from 'thumbhash';
+import { useAllFormFields } from '@payloadcms/ui';
+const formatBytes = (bytes)=>{
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = [
+        'B',
+        'KB',
+        'MB',
+        'GB'
+    ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+};
+const statusColors = {
+    pending: '#f59e0b',
+    processing: '#3b82f6',
+    complete: '#10b981',
+    error: '#ef4444'
+};
+export const OptimizationStatus = (props)=>{
+    const [formState] = useAllFormFields();
+    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 thumbHashUrl = React.useMemo(()=>{
+        if (!thumbHash) return null;
+        try {
+            const bytes = Uint8Array.from(atob(thumbHash), (c)=>c.charCodeAt(0));
+            return thumbHashToDataURL(bytes);
+        } catch  {
+            return null;
+        }
+    }, [
+        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
+        });
+    }
+    if (!status) {
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                padding: '12px 0'
+            },
+            children: /*#__PURE__*/ _jsx("div", {
+                style: {
+                    color: '#6b7280',
+                    fontSize: '13px'
+                },
+                children: "No optimization data yet. Upload an image to optimize."
+            })
+        });
+    }
+    const savings = originalSize && optimizedSize ? Math.round((1 - optimizedSize / originalSize) * 100) : null;
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            padding: '12px 0'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    marginBottom: '8px'
+                },
+                children: /*#__PURE__*/ _jsx("span", {
+                    style: {
+                        backgroundColor: statusColors[status] || '#6b7280',
+                        borderRadius: '4px',
+                        color: '#fff',
+                        display: 'inline-block',
+                        fontSize: '12px',
+                        fontWeight: 600,
+                        padding: '2px 8px',
+                        textTransform: 'uppercase'
+                    },
+                    children: status
+                })
+            }),
+            error && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    color: '#ef4444',
+                    fontSize: '13px',
+                    marginBottom: '8px'
+                },
+                children: error
+            }),
+            originalSize != null && optimizedSize != null && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    fontSize: '13px',
+                    marginBottom: '8px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            "Original: ",
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: formatBytes(originalSize)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            "Optimized: ",
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: formatBytes(optimizedSize)
+                            }),
+                            savings != null && savings > 0 && /*#__PURE__*/ _jsxs("span", {
+                                style: {
+                                    color: '#10b981',
+                                    marginLeft: '4px'
+                                },
+                                children: [
+                                    "(-",
+                                    savings,
+                                    "%)"
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            thumbHashUrl && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    marginBottom: '8px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            fontSize: '12px',
+                            marginBottom: '4px',
+                            opacity: 0.7
+                        },
+                        children: "Blur Preview"
+                    }),
+                    /*#__PURE__*/ _jsx("img", {
+                        alt: "Blur placeholder",
+                        src: thumbHashUrl,
+                        style: {
+                            borderRadius: '4px',
+                            height: '40px',
+                            width: 'auto'
+                        }
+                    })
+                ]
+            }),
+            variants.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            fontSize: '12px',
+                            marginBottom: '4px',
+                            opacity: 0.7
+                        },
+                        children: "Variants"
+                    }),
+                    variants.map((v, i)=>/*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                fontSize: '12px',
+                                marginBottom: '2px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("strong", {
+                                    children: v.format?.toUpperCase()
+                                }),
+                                " — ",
+                                v.filesize ? formatBytes(v.filesize) : '?',
+                                ' ',
+                                "(",
+                                v.width,
+                                "x",
+                                v.height,
+                                ")"
+                            ]
+                        }, i))
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=OptimizationStatus.js.map

package/dist/components/OptimizationStatus.js.map

@@ -0,0 +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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"}

package/dist/components/RegenerationButton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RegenerationButton: React.FC;