payload-plugin-aspect-preview 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sebastian Kolbusz
+
+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,94 @@
+# payload-plugin-aspect-preview
+
+Single-screen crop, focal point, and **live multi-aspect-ratio preview** for Payload upload collections. Replaces Payload's separate crop/focal drawers with one editor that shows, in real time, how your image will look at every aspect ratio your frontend uses.
+
+![edit_preview](./payload-plugin-aspect-preview.png)
+
+## Features
+
+- Crop, focal point, and preview on **one screen** — no drawer round-trips.
+- **Live preview grid** across any set of aspect ratios as you drag the focal point or draw a crop.
+- **Zero-config defaults** (six common ratios) — override with your own list.
+- Simulates the frontend's `object-fit: cover` + focal positioning so previews match production.
+
+## Requirements
+
+- Payload `^3.85.0`
+- React `^19`
+
+> **Compatibility note:** the replacement upload field builds on `@payloadcms/ui` internals (`FileDetails`, `Dropzone`, `PreviewSizes`, …). These are not a stable public API, so a Payload minor upgrade may occasionally require a plugin update. Pin your Payload version and test after upgrades.
+
+## Installation
+
+```bash
+pnpm add payload-plugin-aspect-preview
+```
+
+## Quick start
+
+```ts
+import { aspectPreviewPlugin } from 'payload-plugin-aspect-preview'
+
+export default buildConfig({
+  // ...
+  plugins: [
+    aspectPreviewPlugin({ collections: ['media'] }), // uses built-in default ratios
+  ],
+})
+```
+
+Your `media` collection must be an upload collection (`upload: { ... }`), ideally with `focalPoint: true`.
+
+## Configuration
+
+| Option | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `collections` | `string[]` | yes | — | Upload collection slugs to enhance. |
+| `aspectRatios` | `AspectRatioConfig[]` | no | `DEFAULT_ASPECT_RATIOS` | Ratios shown in the preview grid. |
+| `disabled` | `boolean` | no | `false` | Keep the schema field but disable the upload override. |
+
+### `AspectRatioConfig`
+
+| Field | Type | Required | Description |
+|---|---|---|---|
+| `name` | `string` | yes | Display label (e.g. `"Social Share"`). |
+| `ratio` | `string` | yes | Display token (e.g. `"16:9"`). |
+| `width` | `number` | yes | Ratio numerator (or absolute px width). |
+| `height` | `number` | yes | Ratio denominator (or absolute px height). |
+| `source` | `'css' \| 'crop'` | no | Badge showing how the frontend renders it. Default `'css'`. |
+| `usage` | `string` | no | Description shown in the card footer. |
+| `category` | `string` | no | Free-form grouping label. |
+
+## Examples
+
+**Custom aspect ratios**
+
+```ts
+aspectPreviewPlugin({
+  collections: ['media'],
+  aspectRatios: [
+    { name: 'Hero', ratio: '21:9', width: 21, height: 9, source: 'css', usage: 'Landing hero' },
+    { name: 'Card', ratio: '1:1', width: 1, height: 1, source: 'crop', usage: 'Product cards' },
+  ],
+})
+```
+
+**Multiple collections**
+
+```ts
+aspectPreviewPlugin({ collections: ['media', 'avatars'] })
+```
+
+**Disable without dropping the schema**
+
+```ts
+aspectPreviewPlugin({ collections: ['media'], disabled: true })
+```
+
+## How it works
+
+The plugin wraps each upload collection with a custom admin UI component (`CustomUpload`). It injects a UI field (`FocalPointEditor`) that overlays the live preview grid, replacing Payload's default crop/adjust drawer. The grid simulates `object-fit: cover` with the focal point as the anchor, so you see exactly how each ratio will render on the frontend. Crop and focal coordinates are stored in the document's built-in `focalPoint` field (if present) and in-memory image crop state managed by react-image-crop.
+
+## License
+
+MIT © Sebastian Kolbusz

package/dist/components/AspectRatioPreviewGrid.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { AspectRatioConfig, CropConfig } from '../types';
+interface AspectRatioPreviewGridProps {
+    url: string;
+    focalX: number;
+    focalY: number;
+    aspectRatios: AspectRatioConfig[];
+    crop?: CropConfig;
+}
+export declare const AspectRatioPreviewGrid: React.FC<AspectRatioPreviewGridProps>;
+export default AspectRatioPreviewGrid;

package/dist/components/AspectRatioPreviewGrid.js

@@ -0,0 +1,230 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+function clamp(val, min, max) {
+    return Math.max(min, Math.min(max, val));
+}
+function isValidNumber(n) {
+    return typeof n === 'number' && !isNaN(n) && isFinite(n) && n > 0;
+}
+function isValidCrop(crop, imgW, imgH) {
+    if (!crop) return false;
+    let cropW;
+    let cropH;
+    if (crop.unit === '%') {
+        cropW = crop.width;
+        cropH = crop.height;
+        if (!isValidNumber(cropW) || !isValidNumber(cropH)) return false;
+        if (cropW > 100 || cropH > 100) return false;
+        if (crop.x < 0 || crop.y < 0) return false;
+        if (crop.x + cropW > 100 + 1e-6) return false;
+        if (crop.y + cropH > 100 + 1e-6) return false;
+    } else {
+        if (crop.width > imgW || crop.height > imgH || crop.x > imgW || crop.y > imgH) {
+            return false;
+        }
+        if (!isValidNumber(crop.width) || !isValidNumber(crop.height)) return false;
+        if (crop.x < 0 || crop.y < 0) return false;
+        cropW = crop.width;
+        cropH = crop.height;
+    }
+    return cropW > 1e-6 && cropH > 1e-6;
+}
+function resolveCropPixels(crop, imgW, imgH) {
+    if (crop.unit === '%') {
+        return {
+            x: crop.x / 100 * imgW,
+            y: crop.y / 100 * imgH,
+            w: crop.width / 100 * imgW,
+            h: crop.height / 100 * imgH
+        };
+    }
+    return {
+        x: crop.x,
+        y: crop.y,
+        w: crop.width,
+        h: crop.height
+    };
+}
+// Editor stores focalX/focalY as percentages of the FULL image.
+// Convert to percentages within the crop region.
+function toCropRelativeFocal(focalX, focalY, crop, imgW, imgH) {
+    const relX = (focalX / 100 * imgW - crop.x) / crop.w;
+    const relY = (focalY / 100 * imgH - crop.y) / crop.h;
+    return {
+        x: clamp(relX * 100, 0, 100),
+        y: clamp(relY * 100, 0, 100)
+    };
+}
+// Compute a background-image style on the FRAME that simulates Payload's
+// server-side behavior: take the crop region from the original image, then
+// render it with object-fit:cover + object-position:focal% into the frame.
+//
+// Background-image is used instead of <img> because Payload's admin CSS
+// applies aggressive global rules to <img> (max-width:100%, height:auto)
+// that fight inline pixel sizing and cause squashing.
+function computeCroppedBackgroundStyle(frameW, frameH, imgW, imgH, crop, focalX, focalY) {
+    // Scale the crop region to cover the frame (same math as object-fit:cover)
+    const scale = Math.max(frameW / crop.w, frameH / crop.h);
+    // Focal point inside the crop region, expressed as %
+    const relFocal = toCropRelativeFocal(focalX, focalY, crop, imgW, imgH);
+    // Where the crop region's top-left lands in the frame, per object-position math
+    const cropDisplayW = crop.w * scale;
+    const cropDisplayH = crop.h * scale;
+    const cropLeft = (frameW - cropDisplayW) * (relFocal.x / 100);
+    const cropTop = (frameH - cropDisplayH) * (relFocal.y / 100);
+    // Position the FULL image so the crop region lands at cropLeft / cropTop
+    const bgLeft = cropLeft - crop.x * scale;
+    const bgTop = cropTop - crop.y * scale;
+    const bgW = imgW * scale;
+    const bgH = imgH * scale;
+    return {
+        backgroundSize: `${bgW}px ${bgH}px`,
+        backgroundPosition: `${bgLeft}px ${bgTop}px`
+    };
+}
+const PreviewCard = ({ ratio, url, focalX, focalY, crop, imgW, imgH })=>{
+    const frameRef = useRef(null);
+    const [frameSize, setFrameSize] = useState({
+        width: 0,
+        height: 0
+    });
+    useEffect(()=>{
+        const el = frameRef.current;
+        if (!el) return;
+        const observer = new ResizeObserver((entries)=>{
+            for (const entry of entries){
+                const { width, height } = entry.contentRect;
+                setFrameSize({
+                    width,
+                    height
+                });
+            }
+        });
+        observer.observe(el);
+        return ()=>observer.disconnect();
+    }, []);
+    const frameStyle = React.useMemo(()=>{
+        const base = {
+            aspectRatio: `${ratio.width} / ${ratio.height}`,
+            backgroundImage: `url("${url}")`,
+            backgroundRepeat: 'no-repeat'
+        };
+        const haveDims = frameSize.width > 0 && frameSize.height > 0 && isValidNumber(imgW) && isValidNumber(imgH);
+        // Fallback: no crop OR dimensions not yet known.
+        // Use CSS-native cover + position — identical to the frontend's
+        // `object-fit:cover; object-position: focalX% focalY%`.
+        if (!haveDims || !isValidCrop(crop, imgW, imgH)) {
+            return {
+                ...base,
+                backgroundSize: 'cover',
+                backgroundPosition: `${focalX}% ${focalY}%`
+            };
+        }
+        const cropPx = resolveCropPixels(crop, imgW, imgH);
+        const { backgroundSize, backgroundPosition } = computeCroppedBackgroundStyle(frameSize.width, frameSize.height, imgW, imgH, cropPx, focalX, focalY);
+        return {
+            ...base,
+            backgroundSize,
+            backgroundPosition
+        };
+    }, [
+        frameSize,
+        imgW,
+        imgH,
+        focalX,
+        focalY,
+        crop,
+        ratio.width,
+        ratio.height,
+        url
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "focal-preview__card",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "focal-preview__card-header",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "focal-preview__card-name",
+                        children: ratio.name
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "focal-preview__card-ratio",
+                        children: ratio.ratio
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: frameRef,
+                className: "focal-preview__card-frame",
+                style: frameStyle,
+                role: "img",
+                "aria-label": `Preview for ${ratio.name}`,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "focal-preview__card-overlay"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "focal-preview__card-crosshair"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "focal-preview__card-footer",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "focal-preview__card-usage",
+                        children: ratio.usage
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: `focal-preview__card-source focal-preview__card-source--${ratio.source}`,
+                        children: ratio.source === 'css' ? 'CSS' : 'Crop'
+                    })
+                ]
+            })
+        ]
+    });
+};
+export const AspectRatioPreviewGrid = ({ url, focalX, focalY, aspectRatios, crop })=>{
+    const [imgDimensions, setImgDimensions] = useState({
+        width: 0,
+        height: 0
+    });
+    useEffect(()=>{
+        const img = new Image();
+        img.onload = ()=>{
+            setImgDimensions({
+                width: img.naturalWidth,
+                height: img.naturalHeight
+            });
+        };
+        img.onerror = ()=>{
+            setImgDimensions({
+                width: 0,
+                height: 0
+            });
+        };
+        img.src = url;
+    }, [
+        url
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "focal-preview",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "focal-preview__grid",
+            children: aspectRatios.map((ratio)=>/*#__PURE__*/ _jsx(PreviewCard, {
+                    ratio: ratio,
+                    url: url,
+                    focalX: focalX,
+                    focalY: focalY,
+                    crop: crop,
+                    imgW: imgDimensions.width,
+                    imgH: imgDimensions.height
+                }, ratio.name))
+        })
+    });
+};
+export default AspectRatioPreviewGrid;
+
+//# sourceMappingURL=AspectRatioPreviewGrid.js.map

package/dist/components/AspectRatioPreviewGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AspectRatioPreviewGrid.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { AspectRatioConfig, CropConfig } from '../types'\n\ninterface AspectRatioPreviewGridProps {\n  url: string\n  focalX: number\n  focalY: number\n  aspectRatios: AspectRatioConfig[]\n  crop?: CropConfig\n}\n\nfunction clamp(val: number, min: number, max: number) {\n  return Math.max(min, Math.min(max, val))\n}\n\nfunction isValidNumber(n: number) {\n  return typeof n === 'number' && !isNaN(n) && isFinite(n) && n > 0\n}\n\nfunction isValidCrop(crop: CropConfig | undefined, imgW: number, imgH: number) {\n  if (!crop) return false\n\n  let cropW: number\n  let cropH: number\n\n  if (crop.unit === '%') {\n    cropW = crop.width\n    cropH = crop.height\n    if (!isValidNumber(cropW) || !isValidNumber(cropH)) return false\n    if (cropW > 100 || cropH > 100) return false\n    if (crop.x < 0 || crop.y < 0) return false\n    if (crop.x + cropW > 100 + 1e-6) return false\n    if (crop.y + cropH > 100 + 1e-6) return false\n  } else {\n    if (crop.width > imgW || crop.height > imgH || crop.x > imgW || crop.y > imgH) {\n      return false\n    }\n    if (!isValidNumber(crop.width) || !isValidNumber(crop.height)) return false\n    if (crop.x < 0 || crop.y < 0) return false\n    cropW = crop.width\n    cropH = crop.height\n  }\n\n  return cropW > 1e-6 && cropH > 1e-6\n}\n\nfunction resolveCropPixels(crop: CropConfig, imgW: number, imgH: number) {\n  if (crop.unit === '%') {\n    return {\n      x: (crop.x / 100) * imgW,\n      y: (crop.y / 100) * imgH,\n      w: (crop.width / 100) * imgW,\n      h: (crop.height / 100) * imgH,\n    }\n  }\n  return { x: crop.x, y: crop.y, w: crop.width, h: crop.height }\n}\n\n// Editor stores focalX/focalY as percentages of the FULL image.\n// Convert to percentages within the crop region.\nfunction toCropRelativeFocal(\n  focalX: number,\n  focalY: number,\n  crop: { x: number; y: number; w: number; h: number },\n  imgW: number,\n  imgH: number,\n) {\n  const relX = ((focalX / 100) * imgW - crop.x) / crop.w\n  const relY = ((focalY / 100) * imgH - crop.y) / crop.h\n  return {\n    x: clamp(relX * 100, 0, 100),\n    y: clamp(relY * 100, 0, 100),\n  }\n}\n\n// Compute a background-image style on the FRAME that simulates Payload's\n// server-side behavior: take the crop region from the original image, then\n// render it with object-fit:cover + object-position:focal% into the frame.\n//\n// Background-image is used instead of <img> because Payload's admin CSS\n// applies aggressive global rules to <img> (max-width:100%, height:auto)\n// that fight inline pixel sizing and cause squashing.\nfunction computeCroppedBackgroundStyle(\n  frameW: number,\n  frameH: number,\n  imgW: number,\n  imgH: number,\n  crop: { x: number; y: number; w: number; h: number },\n  focalX: number,\n  focalY: number,\n): { backgroundSize: string; backgroundPosition: string } {\n  // Scale the crop region to cover the frame (same math as object-fit:cover)\n  const scale = Math.max(frameW / crop.w, frameH / crop.h)\n\n  // Focal point inside the crop region, expressed as %\n  const relFocal = toCropRelativeFocal(focalX, focalY, crop, imgW, imgH)\n\n  // Where the crop region's top-left lands in the frame, per object-position math\n  const cropDisplayW = crop.w * scale\n  const cropDisplayH = crop.h * scale\n  const cropLeft = (frameW - cropDisplayW) * (relFocal.x / 100)\n  const cropTop = (frameH - cropDisplayH) * (relFocal.y / 100)\n\n  // Position the FULL image so the crop region lands at cropLeft / cropTop\n  const bgLeft = cropLeft - crop.x * scale\n  const bgTop = cropTop - crop.y * scale\n\n  const bgW = imgW * scale\n  const bgH = imgH * scale\n\n  return {\n    backgroundSize: `${bgW}px ${bgH}px`,\n    backgroundPosition: `${bgLeft}px ${bgTop}px`,\n  }\n}\n\nconst PreviewCard: React.FC<{\n  ratio: AspectRatioConfig\n  url: string\n  focalX: number\n  focalY: number\n  crop?: CropConfig\n  imgW: number\n  imgH: number\n}> = ({ ratio, url, focalX, focalY, crop, imgW, imgH }) => {\n  const frameRef = useRef<HTMLDivElement>(null)\n  const [frameSize, setFrameSize] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const el = frameRef.current\n    if (!el) return\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const { width, height } = entry.contentRect\n        setFrameSize({ width, height })\n      }\n    })\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [])\n\n  const frameStyle: React.CSSProperties = React.useMemo(() => {\n    const base: React.CSSProperties = {\n      aspectRatio: `${ratio.width} / ${ratio.height}`,\n      backgroundImage: `url(\"${url}\")`,\n      backgroundRepeat: 'no-repeat',\n    }\n\n    const haveDims =\n      frameSize.width > 0 && frameSize.height > 0 && isValidNumber(imgW) && isValidNumber(imgH)\n\n    // Fallback: no crop OR dimensions not yet known.\n    // Use CSS-native cover + position — identical to the frontend's\n    // `object-fit:cover; object-position: focalX% focalY%`.\n    if (!haveDims || !isValidCrop(crop, imgW, imgH)) {\n      return {\n        ...base,\n        backgroundSize: 'cover',\n        backgroundPosition: `${focalX}% ${focalY}%`,\n      }\n    }\n\n    const cropPx = resolveCropPixels(crop!, imgW, imgH)\n    const { backgroundSize, backgroundPosition } = computeCroppedBackgroundStyle(\n      frameSize.width,\n      frameSize.height,\n      imgW,\n      imgH,\n      cropPx,\n      focalX,\n      focalY,\n    )\n    return { ...base, backgroundSize, backgroundPosition }\n  }, [frameSize, imgW, imgH, focalX, focalY, crop, ratio.width, ratio.height, url])\n\n  return (\n    <div className=\"focal-preview__card\">\n      <div className=\"focal-preview__card-header\">\n        <span className=\"focal-preview__card-name\">{ratio.name}</span>\n        <span className=\"focal-preview__card-ratio\">{ratio.ratio}</span>\n      </div>\n      <div\n        ref={frameRef}\n        className=\"focal-preview__card-frame\"\n        style={frameStyle}\n        role=\"img\"\n        aria-label={`Preview for ${ratio.name}`}\n      >\n        <div className=\"focal-preview__card-overlay\" />\n        <div className=\"focal-preview__card-crosshair\" />\n      </div>\n      <div className=\"focal-preview__card-footer\">\n        <span className=\"focal-preview__card-usage\">{ratio.usage}</span>\n        <span className={`focal-preview__card-source focal-preview__card-source--${ratio.source}`}>\n          {ratio.source === 'css' ? 'CSS' : 'Crop'}\n        </span>\n      </div>\n    </div>\n  )\n}\n\nexport const AspectRatioPreviewGrid: React.FC<AspectRatioPreviewGridProps> = ({\n  url,\n  focalX,\n  focalY,\n  aspectRatios,\n  crop,\n}) => {\n  const [imgDimensions, setImgDimensions] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const img = new Image()\n    img.onload = () => {\n      setImgDimensions({ width: img.naturalWidth, height: img.naturalHeight })\n    }\n    img.onerror = () => {\n      setImgDimensions({ width: 0, height: 0 })\n    }\n    img.src = url\n  }, [url])\n\n  return (\n    <div className=\"focal-preview\">\n      <div className=\"focal-preview__grid\">\n        {aspectRatios.map((ratio) => (\n          <PreviewCard\n            key={ratio.name}\n            ratio={ratio}\n            url={url}\n            focalX={focalX}\n            focalY={focalY}\n            crop={crop}\n            imgW={imgDimensions.width}\n            imgH={imgDimensions.height}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default AspectRatioPreviewGrid\n"],"names":["React","useEffect","useRef","useState","clamp","val","min","max","Math","isValidNumber","n","isNaN","isFinite","isValidCrop","crop","imgW","imgH","cropW","cropH","unit","width","height","x","y","resolveCropPixels","w","h","toCropRelativeFocal","focalX","focalY","relX","relY","computeCroppedBackgroundStyle","frameW","frameH","scale","relFocal","cropDisplayW","cropDisplayH","cropLeft","cropTop","bgLeft","bgTop","bgW","bgH","backgroundSize","backgroundPosition","PreviewCard","ratio","url","frameRef","frameSize","setFrameSize","el","current","observer","ResizeObserver","entries","entry","contentRect","observe","disconnect","frameStyle","useMemo","base","aspectRatio","backgroundImage","backgroundRepeat","haveDims","cropPx","div","className","span","name","ref","style","role","aria-label","usage","source","AspectRatioPreviewGrid","aspectRatios","imgDimensions","setImgDimensions","img","Image","onload","naturalWidth","naturalHeight","onerror","src","map"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAY1D,SAASC,MAAMC,GAAW,EAAEC,GAAW,EAAEC,GAAW;IAClD,OAAOC,KAAKD,GAAG,CAACD,KAAKE,KAAKF,GAAG,CAACC,KAAKF;AACrC;AAEA,SAASI,cAAcC,CAAS;IAC9B,OAAO,OAAOA,MAAM,YAAY,CAACC,MAAMD,MAAME,SAASF,MAAMA,IAAI;AAClE;AAEA,SAASG,YAAYC,IAA4B,EAAEC,IAAY,EAAEC,IAAY;IAC3E,IAAI,CAACF,MAAM,OAAO;IAElB,IAAIG;IACJ,IAAIC;IAEJ,IAAIJ,KAAKK,IAAI,KAAK,KAAK;QACrBF,QAAQH,KAAKM,KAAK;QAClBF,QAAQJ,KAAKO,MAAM;QACnB,IAAI,CAACZ,cAAcQ,UAAU,CAACR,cAAcS,QAAQ,OAAO;QAC3D,IAAID,QAAQ,OAAOC,QAAQ,KAAK,OAAO;QACvC,IAAIJ,KAAKQ,CAAC,GAAG,KAAKR,KAAKS,CAAC,GAAG,GAAG,OAAO;QACrC,IAAIT,KAAKQ,CAAC,GAAGL,QAAQ,MAAM,MAAM,OAAO;QACxC,IAAIH,KAAKS,CAAC,GAAGL,QAAQ,MAAM,MAAM,OAAO;IAC1C,OAAO;QACL,IAAIJ,KAAKM,KAAK,GAAGL,QAAQD,KAAKO,MAAM,GAAGL,QAAQF,KAAKQ,CAAC,GAAGP,QAAQD,KAAKS,CAAC,GAAGP,MAAM;YAC7E,OAAO;QACT;QACA,IAAI,CAACP,cAAcK,KAAKM,KAAK,KAAK,CAACX,cAAcK,KAAKO,MAAM,GAAG,OAAO;QACtE,IAAIP,KAAKQ,CAAC,GAAG,KAAKR,KAAKS,CAAC,GAAG,GAAG,OAAO;QACrCN,QAAQH,KAAKM,KAAK;QAClBF,QAAQJ,KAAKO,MAAM;IACrB;IAEA,OAAOJ,QAAQ,QAAQC,QAAQ;AACjC;AAEA,SAASM,kBAAkBV,IAAgB,EAAEC,IAAY,EAAEC,IAAY;IACrE,IAAIF,KAAKK,IAAI,KAAK,KAAK;QACrB,OAAO;YACLG,GAAG,AAACR,KAAKQ,CAAC,GAAG,MAAOP;YACpBQ,GAAG,AAACT,KAAKS,CAAC,GAAG,MAAOP;YACpBS,GAAG,AAACX,KAAKM,KAAK,GAAG,MAAOL;YACxBW,GAAG,AAACZ,KAAKO,MAAM,GAAG,MAAOL;QAC3B;IACF;IACA,OAAO;QAAEM,GAAGR,KAAKQ,CAAC;QAAEC,GAAGT,KAAKS,CAAC;QAAEE,GAAGX,KAAKM,KAAK;QAAEM,GAAGZ,KAAKO,MAAM;IAAC;AAC/D;AAEA,gEAAgE;AAChE,iDAAiD;AACjD,SAASM,oBACPC,MAAc,EACdC,MAAc,EACdf,IAAoD,EACpDC,IAAY,EACZC,IAAY;IAEZ,MAAMc,OAAO,AAAC,CAAA,AAACF,SAAS,MAAOb,OAAOD,KAAKQ,CAAC,AAADA,IAAKR,KAAKW,CAAC;IACtD,MAAMM,OAAO,AAAC,CAAA,AAACF,SAAS,MAAOb,OAAOF,KAAKS,CAAC,AAADA,IAAKT,KAAKY,CAAC;IACtD,OAAO;QACLJ,GAAGlB,MAAM0B,OAAO,KAAK,GAAG;QACxBP,GAAGnB,MAAM2B,OAAO,KAAK,GAAG;IAC1B;AACF;AAEA,yEAAyE;AACzE,2EAA2E;AAC3E,2EAA2E;AAC3E,EAAE;AACF,wEAAwE;AACxE,yEAAyE;AACzE,sDAAsD;AACtD,SAASC,8BACPC,MAAc,EACdC,MAAc,EACdnB,IAAY,EACZC,IAAY,EACZF,IAAoD,EACpDc,MAAc,EACdC,MAAc;IAEd,2EAA2E;IAC3E,MAAMM,QAAQ3B,KAAKD,GAAG,CAAC0B,SAASnB,KAAKW,CAAC,EAAES,SAASpB,KAAKY,CAAC;IAEvD,qDAAqD;IACrD,MAAMU,WAAWT,oBAAoBC,QAAQC,QAAQf,MAAMC,MAAMC;IAEjE,gFAAgF;IAChF,MAAMqB,eAAevB,KAAKW,CAAC,GAAGU;IAC9B,MAAMG,eAAexB,KAAKY,CAAC,GAAGS;IAC9B,MAAMI,WAAW,AAACN,CAAAA,SAASI,YAAW,IAAMD,CAAAA,SAASd,CAAC,GAAG,GAAE;IAC3D,MAAMkB,UAAU,AAACN,CAAAA,SAASI,YAAW,IAAMF,CAAAA,SAASb,CAAC,GAAG,GAAE;IAE1D,yEAAyE;IACzE,MAAMkB,SAASF,WAAWzB,KAAKQ,CAAC,GAAGa;IACnC,MAAMO,QAAQF,UAAU1B,KAAKS,CAAC,GAAGY;IAEjC,MAAMQ,MAAM5B,OAAOoB;IACnB,MAAMS,MAAM5B,OAAOmB;IAEnB,OAAO;QACLU,gBAAgB,GAAGF,IAAI,GAAG,EAAEC,IAAI,EAAE,CAAC;QACnCE,oBAAoB,GAAGL,OAAO,GAAG,EAAEC,MAAM,EAAE,CAAC;IAC9C;AACF;AAEA,MAAMK,cAQD,CAAC,EAAEC,KAAK,EAAEC,GAAG,EAAErB,MAAM,EAAEC,MAAM,EAAEf,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAE;IACpD,MAAMkC,WAAWhD,OAAuB;IACxC,MAAM,CAACiD,WAAWC,aAAa,GAAGjD,SAAS;QAAEiB,OAAO;QAAGC,QAAQ;IAAE;IAEjEpB,UAAU;QACR,MAAMoD,KAAKH,SAASI,OAAO;QAC3B,IAAI,CAACD,IAAI;QACT,MAAME,WAAW,IAAIC,eAAe,CAACC;YACnC,KAAK,MAAMC,SAASD,QAAS;gBAC3B,MAAM,EAAErC,KAAK,EAAEC,MAAM,EAAE,GAAGqC,MAAMC,WAAW;gBAC3CP,aAAa;oBAAEhC;oBAAOC;gBAAO;YAC/B;QACF;QACAkC,SAASK,OAAO,CAACP;QACjB,OAAO,IAAME,SAASM,UAAU;IAClC,GAAG,EAAE;IAEL,MAAMC,aAAkC9D,MAAM+D,OAAO,CAAC;QACpD,MAAMC,OAA4B;YAChCC,aAAa,GAAGjB,MAAM5B,KAAK,CAAC,GAAG,EAAE4B,MAAM3B,MAAM,EAAE;YAC/C6C,iBAAiB,CAAC,KAAK,EAAEjB,IAAI,EAAE,CAAC;YAChCkB,kBAAkB;QACpB;QAEA,MAAMC,WACJjB,UAAU/B,KAAK,GAAG,KAAK+B,UAAU9B,MAAM,GAAG,KAAKZ,cAAcM,SAASN,cAAcO;QAEtF,iDAAiD;QACjD,gEAAgE;QAChE,wDAAwD;QACxD,IAAI,CAACoD,YAAY,CAACvD,YAAYC,MAAMC,MAAMC,OAAO;YAC/C,OAAO;gBACL,GAAGgD,IAAI;gBACPnB,gBAAgB;gBAChBC,oBAAoB,GAAGlB,OAAO,EAAE,EAAEC,OAAO,CAAC,CAAC;YAC7C;QACF;QAEA,MAAMwC,SAAS7C,kBAAkBV,MAAOC,MAAMC;QAC9C,MAAM,EAAE6B,cAAc,EAAEC,kBAAkB,EAAE,GAAGd,8BAC7CmB,UAAU/B,KAAK,EACf+B,UAAU9B,MAAM,EAChBN,MACAC,MACAqD,QACAzC,QACAC;QAEF,OAAO;YAAE,GAAGmC,IAAI;YAAEnB;YAAgBC;QAAmB;IACvD,GAAG;QAACK;QAAWpC;QAAMC;QAAMY;QAAQC;QAAQf;QAAMkC,MAAM5B,KAAK;QAAE4B,MAAM3B,MAAM;QAAE4B;KAAI;IAEhF,qBACE,MAACqB;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,KAACC;wBAAKD,WAAU;kCAA4BvB,MAAMyB,IAAI;;kCACtD,KAACD;wBAAKD,WAAU;kCAA6BvB,MAAMA,KAAK;;;;0BAE1D,MAACsB;gBACCI,KAAKxB;gBACLqB,WAAU;gBACVI,OAAOb;gBACPc,MAAK;gBACLC,cAAY,CAAC,YAAY,EAAE7B,MAAMyB,IAAI,EAAE;;kCAEvC,KAACH;wBAAIC,WAAU;;kCACf,KAACD;wBAAIC,WAAU;;;;0BAEjB,MAACD;gBAAIC,WAAU;;kCACb,KAACC;wBAAKD,WAAU;kCAA6BvB,MAAM8B,KAAK;;kCACxD,KAACN;wBAAKD,WAAW,CAAC,uDAAuD,EAAEvB,MAAM+B,MAAM,EAAE;kCACtF/B,MAAM+B,MAAM,KAAK,QAAQ,QAAQ;;;;;;AAK5C;AAEA,OAAO,MAAMC,yBAAgE,CAAC,EAC5E/B,GAAG,EACHrB,MAAM,EACNC,MAAM,EACNoD,YAAY,EACZnE,IAAI,EACL;IACC,MAAM,CAACoE,eAAeC,iBAAiB,GAAGhF,SAAS;QAAEiB,OAAO;QAAGC,QAAQ;IAAE;IAEzEpB,UAAU;QACR,MAAMmF,MAAM,IAAIC;QAChBD,IAAIE,MAAM,GAAG;YACXH,iBAAiB;gBAAE/D,OAAOgE,IAAIG,YAAY;gBAAElE,QAAQ+D,IAAII,aAAa;YAAC;QACxE;QACAJ,IAAIK,OAAO,GAAG;YACZN,iBAAiB;gBAAE/D,OAAO;gBAAGC,QAAQ;YAAE;QACzC;QACA+D,IAAIM,GAAG,GAAGzC;IACZ,GAAG;QAACA;KAAI;IAER,qBACE,KAACqB;QAAIC,WAAU;kBACb,cAAA,KAACD;YAAIC,WAAU;sBACZU,aAAaU,GAAG,CAAC,CAAC3C,sBACjB,KAACD;oBAECC,OAAOA;oBACPC,KAAKA;oBACLrB,QAAQA;oBACRC,QAAQA;oBACRf,MAAMA;oBACNC,MAAMmE,cAAc9D,KAAK;oBACzBJ,MAAMkE,cAAc7D,MAAM;mBAPrB2B,MAAMyB,IAAI;;;AAa3B,EAAC;AAED,eAAeO,uBAAsB"}

package/dist/components/CustomUpload.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import '../styles.scss';
+export declare const CustomUpload: React.FC;
+export default CustomUpload;

package/dist/components/CustomUpload.js

@@ -0,0 +1,167 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Drawer, Dropzone, FileDetails, PreviewSizes, Thumbnail, fieldBaseClass, useConfig, useDocumentInfo, useField, useForm, useModal, useTranslation, useUploadEdits } from '@payloadcms/ui';
+import { isImage } from 'payload/shared';
+import React, { useCallback, useState } from 'react';
+import '../styles.scss';
+const baseClass = 'file-field';
+const sizePreviewSlug = 'preview-sizes';
+const validate = (value)=>{
+    if (!value && value !== undefined) {
+        return 'A file is required.';
+    }
+    if (value && (!value.name || value.name === '')) {
+        return 'A file name is required.';
+    }
+    return true;
+};
+export const CustomUpload = ()=>{
+    const { t } = useTranslation();
+    const { getEntityConfig } = useConfig();
+    const { data, docPermissions } = useDocumentInfo();
+    const { setModified } = useForm();
+    const { openModal } = useModal();
+    const { resetUploadEdits } = useUploadEdits();
+    const collectionSlug = data?.collection || 'media';
+    const collectionConfig = getEntityConfig({
+        collectionSlug
+    });
+    const uploadConfig = collectionConfig?.upload;
+    const { setValue, value } = useField({
+        path: 'file',
+        validate
+    });
+    const [fileSrc, setFileSrc] = useState(undefined);
+    const [removedFile, setRemovedFile] = useState(false);
+    const hasImageSizes = (uploadConfig?.imageSizes?.length || 0) > 0;
+    const imageCacheTag = uploadConfig?.cacheTags && data?.updatedAt;
+    const handleFileChange = useCallback((file)=>{
+        if (file) {
+            setFileSrc(URL.createObjectURL(file));
+        }
+        setValue(file);
+        setModified(true);
+    }, [
+        setValue,
+        setModified
+    ]);
+    const handleFileRemoval = useCallback(()=>{
+        setRemovedFile(true);
+        setValue(null);
+        setFileSrc(undefined);
+        resetUploadEdits();
+        setModified(true);
+    }, [
+        setValue,
+        resetUploadEdits,
+        setModified
+    ]);
+    const handleDropzoneChange = useCallback((files)=>{
+        if (files && files.length > 0) {
+            handleFileChange(files[0]);
+        }
+    }, [
+        handleFileChange
+    ]);
+    const hasExistingFile = data?.filename && !removedFile;
+    const hasNewFile = value && fileSrc;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: [
+            fieldBaseClass,
+            baseClass
+        ].join(' '),
+        children: [
+            hasExistingFile && /*#__PURE__*/ _jsx(FileDetails, {
+                collectionSlug: collectionSlug,
+                doc: data,
+                enableAdjustments: false,
+                handleRemove: docPermissions?.update ? handleFileRemoval : undefined,
+                hasImageSizes: hasImageSizes,
+                uploadConfig: uploadConfig,
+                imageCacheTag: imageCacheTag
+            }),
+            (!hasExistingFile || removedFile) && /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__upload`,
+                children: /*#__PURE__*/ _jsx(Dropzone, {
+                    onChange: handleDropzoneChange,
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__dropzoneContent`,
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "pill",
+                                onClick: ()=>document.getElementById('file-input')?.click(),
+                                size: "small",
+                                children: t('upload:selectFile')
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                id: "file-input",
+                                type: "file",
+                                hidden: true,
+                                onChange: (e)=>handleFileChange(e.target.files?.[0] || null)
+                            })
+                        ]
+                    })
+                })
+            }),
+            hasNewFile && /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__file-selected`,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__thumbnail-wrap`,
+                        children: /*#__PURE__*/ _jsx(Thumbnail, {
+                            collectionSlug: collectionSlug,
+                            fileSrc: isImage(value.type) ? fileSrc : undefined
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__file-adjustments`,
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                value: value.name,
+                                onChange: (e)=>{
+                                    const renamed = new File([
+                                        value
+                                    ], e.target.value, {
+                                        type: value.type
+                                    });
+                                    handleFileChange(renamed);
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__upload-actions`,
+                                children: hasImageSizes && /*#__PURE__*/ _jsx(Button, {
+                                    buttonStyle: "pill",
+                                    size: "small",
+                                    onClick: ()=>openModal(sizePreviewSlug),
+                                    children: t('upload:previewSizes')
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        icon: "x",
+                        onClick: handleFileRemoval,
+                        round: true,
+                        tooltip: t('general:cancel')
+                    })
+                ]
+            }),
+            data && hasImageSizes && /*#__PURE__*/ _jsx(Drawer, {
+                slug: sizePreviewSlug,
+                title: t('upload:sizesFor', {
+                    label: data.filename
+                }),
+                children: /*#__PURE__*/ _jsx(PreviewSizes, {
+                    doc: data,
+                    imageCacheTag: imageCacheTag,
+                    uploadConfig: uploadConfig
+                })
+            })
+        ]
+    });
+};
+export default CustomUpload;
+
+//# sourceMappingURL=CustomUpload.js.map

package/dist/components/CustomUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CustomUpload.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedUploadConfig } from 'payload'\n\nimport {\n  Button,\n  Drawer,\n  Dropzone,\n  FileDetails,\n  PreviewSizes,\n  Thumbnail,\n  fieldBaseClass,\n  useConfig,\n  useDocumentInfo,\n  useField,\n  useForm,\n  useModal,\n  useTranslation,\n  useUploadEdits,\n} from '@payloadcms/ui'\nimport { isImage } from 'payload/shared'\nimport React, { useCallback, useState } from 'react'\n\nimport '../styles.scss'\n\nconst baseClass = 'file-field'\nconst sizePreviewSlug = 'preview-sizes'\n\nconst validate = (value: File | undefined) => {\n  if (!value && value !== undefined) {\n    return 'A file is required.'\n  }\n  if (value && (!value.name || value.name === '')) {\n    return 'A file name is required.'\n  }\n  return true\n}\n\nexport const CustomUpload: React.FC = () => {\n  const { t } = useTranslation()\n  const { getEntityConfig } = useConfig()\n  const { data, docPermissions } = useDocumentInfo()\n  const { setModified } = useForm()\n  const { openModal } = useModal()\n  const { resetUploadEdits } = useUploadEdits()\n\n  const collectionSlug = data?.collection || 'media'\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const uploadConfig = collectionConfig?.upload as SanitizedUploadConfig | undefined\n\n  const { setValue, value } = useField<File>({ path: 'file', validate })\n\n  const [fileSrc, setFileSrc] = useState<string | undefined>(undefined)\n  const [removedFile, setRemovedFile] = useState(false)\n\n  const hasImageSizes = ((uploadConfig?.imageSizes?.length as number | undefined) || 0) > 0\n  const imageCacheTag = uploadConfig?.cacheTags && data?.updatedAt\n\n  const handleFileChange = useCallback(\n    (file: File | null) => {\n      if (file) {\n        setFileSrc(URL.createObjectURL(file))\n      }\n      setValue(file)\n      setModified(true)\n    },\n    [setValue, setModified],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setRemovedFile(true)\n    setValue(null)\n    setFileSrc(undefined)\n    resetUploadEdits()\n    setModified(true)\n  }, [setValue, resetUploadEdits, setModified])\n\n  const handleDropzoneChange = useCallback(\n    (files: FileList | null) => {\n      if (files && files.length > 0) {\n        handleFileChange(files[0])\n      }\n    },\n    [handleFileChange],\n  )\n\n  const hasExistingFile = data?.filename && !removedFile\n  const hasNewFile = value && fileSrc\n\n  return (\n    <div className={[fieldBaseClass, baseClass].join(' ')}>\n      {/* Existing file display — no edit button, editor is a separate UI field */}\n      {hasExistingFile && (\n        <FileDetails\n          collectionSlug={collectionSlug}\n          doc={data}\n          enableAdjustments={false}\n          handleRemove={docPermissions?.update ? handleFileRemoval : undefined}\n          hasImageSizes={hasImageSizes}\n          uploadConfig={uploadConfig!}\n          imageCacheTag={imageCacheTag}\n        />\n      )}\n\n      {/* Upload area */}\n      {(!hasExistingFile || removedFile) && (\n        <div className={`${baseClass}__upload`}>\n          <Dropzone onChange={handleDropzoneChange}>\n            <div className={`${baseClass}__dropzoneContent`}>\n              <Button\n                buttonStyle=\"pill\"\n                onClick={() => document.getElementById('file-input')?.click()}\n                size=\"small\"\n              >\n                {t('upload:selectFile')}\n              </Button>\n              <input\n                id=\"file-input\"\n                type=\"file\"\n                hidden\n                onChange={(e) => handleFileChange(e.target.files?.[0] || null)}\n              />\n            </div>\n          </Dropzone>\n        </div>\n      )}\n\n      {/* Selected file preview */}\n      {hasNewFile && (\n        <div className={`${baseClass}__file-selected`}>\n          <div className={`${baseClass}__thumbnail-wrap`}>\n            <Thumbnail\n              collectionSlug={collectionSlug}\n              fileSrc={isImage(value.type) ? fileSrc : undefined}\n            />\n          </div>\n          <div className={`${baseClass}__file-adjustments`}>\n            <input\n              type=\"text\"\n              value={value.name}\n              onChange={(e) => {\n                const renamed = new File([value], e.target.value, { type: value.type })\n                handleFileChange(renamed)\n              }}\n            />\n            <div className={`${baseClass}__upload-actions`}>\n              {hasImageSizes && (\n                <Button buttonStyle=\"pill\" size=\"small\" onClick={() => openModal(sizePreviewSlug)}>\n                  {t('upload:previewSizes')}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Button\n            buttonStyle=\"icon-label\"\n            icon=\"x\"\n            onClick={handleFileRemoval}\n            round\n            tooltip={t('general:cancel')}\n          />\n        </div>\n      )}\n\n      {/* Preview Sizes Drawer */}\n      {data && hasImageSizes && (\n        <Drawer slug={sizePreviewSlug} title={t('upload:sizesFor', { label: data.filename })}>\n          <PreviewSizes doc={data} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig!} />\n        </Drawer>\n      )}\n    </div>\n  )\n}\n\nexport default CustomUpload\n"],"names":["Button","Drawer","Dropzone","FileDetails","PreviewSizes","Thumbnail","fieldBaseClass","useConfig","useDocumentInfo","useField","useForm","useModal","useTranslation","useUploadEdits","isImage","React","useCallback","useState","baseClass","sizePreviewSlug","validate","value","undefined","name","CustomUpload","t","getEntityConfig","data","docPermissions","setModified","openModal","resetUploadEdits","collectionSlug","collection","collectionConfig","uploadConfig","upload","setValue","path","fileSrc","setFileSrc","removedFile","setRemovedFile","hasImageSizes","imageSizes","length","imageCacheTag","cacheTags","updatedAt","handleFileChange","file","URL","createObjectURL","handleFileRemoval","handleDropzoneChange","files","hasExistingFile","filename","hasNewFile","div","className","join","doc","enableAdjustments","handleRemove","update","onChange","buttonStyle","onClick","document","getElementById","click","size","input","id","type","hidden","e","target","renamed","File","icon","round","tooltip","slug","title","label"],"mappings":"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"}

package/dist/components/FocalPointEditor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import 'react-image-crop/dist/ReactCrop.css';
+export declare const FocalPointEditor: React.FC;
+export default FocalPointEditor;