@pro-laico/payload-images 0.0.0

package/dist/components/admin/focalPreview.js

@@ -0,0 +1,234 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDocumentInfo, useField, useForm, useUploadEdits } from "@payloadcms/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { coverObjectPosition } from "../../transform/geometry.js";
+/**
+ * An inline focal-point picker + live ratio preview for the Images upload edit
+ * view. It ENHANCES Payload's native focal pipeline rather than competing with it:
+ * the displayable source comes from the saved `url` or an object URL of the
+ * just-selected `file` (the same way Payload's own Upload element resolves it), and
+ * the focal point is written through the shared `UploadEdits` context — exactly what
+ * the native "Edit image" selector uses — so the value persists (the server derives
+ * `focalX/focalY` from it on save) and the two never conflict.
+ *
+ * The ratio tiles reproduce the transform endpoint's crop exactly: they share its
+ * `coverCropGeometry` (via `coverObjectPosition`) to turn the focal point into the
+ * matching `object-position`, rather than panning proportionally with a raw
+ * `object-position: <focal>%` (which diverges from the endpoint in the mid-range).
+ * No network calls.
+ */ const DEFAULT_RATIOS = [
+    '16:9',
+    '9:16',
+    '1:1',
+    '4:3',
+    '3:2',
+    '21:9'
+];
+const ratioToCss = (r)=>r.replace(/[:/]/, ' / ');
+const clampPct = (n)=>Math.max(0, Math.min(100, n));
+const note = {
+    color: 'var(--theme-elevation-500)',
+    fontSize: '0.8rem',
+    margin: 0
+};
+export const FocalPreview = ({ previewRatios = DEFAULT_RATIOS, readOnly })=>{
+    const { data } = useDocumentInfo();
+    const { value: file } = useField({
+        path: 'file'
+    });
+    const { uploadEdits, updateUploadEdits } = useUploadEdits();
+    const { setModified } = useForm();
+    const [objectUrl, setObjectUrl] = useState(null);
+    useEffect(()=>{
+        if (file instanceof File && file.type.startsWith('image/')) {
+            const url = URL.createObjectURL(file);
+            setObjectUrl(url);
+            return ()=>URL.revokeObjectURL(url);
+        }
+        setObjectUrl(null);
+        return undefined;
+    }, [
+        file
+    ]);
+    const savedUrl = typeof data?.url === 'string' ? data.url : null;
+    const src = savedUrl || objectUrl;
+    const focalX = uploadEdits?.focalPoint?.x ?? (typeof data?.focalX === 'number' ? data.focalX : 50);
+    const focalY = uploadEdits?.focalPoint?.y ?? (typeof data?.focalY === 'number' ? data.focalY : 50);
+    const [srcDims, setSrcDims] = useState(typeof data?.width === 'number' && typeof data?.height === 'number' ? {
+        w: data.width,
+        h: data.height
+    } : null);
+    const stageRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const applyFromEvent = useCallback((clientX, clientY)=>{
+        if (readOnly) return;
+        const el = stageRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return;
+        const x = clampPct((clientX - rect.left) / rect.width * 100);
+        const y = clampPct((clientY - rect.top) / rect.height * 100);
+        updateUploadEdits({
+            ...uploadEdits,
+            focalPoint: {
+                x,
+                y
+            }
+        });
+        setModified(true);
+    }, [
+        readOnly,
+        uploadEdits,
+        updateUploadEdits,
+        setModified
+    ]);
+    if (!src) {
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                marginBottom: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("strong", {
+                    style: {
+                        fontSize: '0.95rem'
+                    },
+                    children: "Focus point"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: note,
+                    children: "Upload an image to set its focus point and preview display ratios."
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            marginBottom: '1rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("strong", {
+                style: {
+                    fontSize: '0.95rem'
+                },
+                children: "Focus point"
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
+                    ...note,
+                    marginBottom: '0.5rem'
+                },
+                children: readOnly ? 'Focus point (read-only).' : 'Click or drag to set the focus point used when cropping to a ratio.'
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: stageRef,
+                onPointerDown: (e)=>{
+                    if (readOnly) return;
+                    setDragging(true);
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                    applyFromEvent(e.clientX, e.clientY);
+                },
+                onPointerMove: (e)=>{
+                    if (dragging) applyFromEvent(e.clientX, e.clientY);
+                },
+                onPointerUp: (e)=>{
+                    setDragging(false);
+                    e.currentTarget.releasePointerCapture?.(e.pointerId);
+                },
+                style: {
+                    position: 'relative',
+                    maxWidth: 480,
+                    borderRadius: 'var(--style-radius-m, 4px)',
+                    overflow: 'hidden',
+                    border: '1px solid var(--theme-elevation-150)',
+                    cursor: readOnly ? 'default' : 'crosshair',
+                    touchAction: 'none'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("img", {
+                        src: src,
+                        alt: "",
+                        onLoad: (e)=>setSrcDims({
+                                w: e.currentTarget.naturalWidth,
+                                h: e.currentTarget.naturalHeight
+                            }),
+                        style: {
+                            display: 'block',
+                            width: '100%',
+                            height: 'auto'
+                        },
+                        draggable: false
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": true,
+                        style: {
+                            position: 'absolute',
+                            left: `${focalX}%`,
+                            top: `${focalY}%`,
+                            width: 16,
+                            height: 16,
+                            transform: 'translate(-50%, -50%)',
+                            borderRadius: '50%',
+                            border: '2px solid var(--theme-success-500, #22c55e)',
+                            boxShadow: '0 0 0 2px rgba(0,0,0,0.5)',
+                            pointerEvents: 'none'
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))',
+                    gap: '0.5rem',
+                    marginTop: '0.75rem'
+                },
+                children: previewRatios.map((r)=>{
+                    const [rw, rh] = r.split(/[:/]/).map(Number);
+                    const pos = srcDims && rw && rh ? coverObjectPosition(srcDims.w, srcDims.h, rw, rh, focalX, focalY) : {
+                        x: focalX,
+                        y: focalY
+                    };
+                    return /*#__PURE__*/ _jsxs("figure", {
+                        style: {
+                            margin: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    aspectRatio: ratioToCss(r),
+                                    overflow: 'hidden',
+                                    borderRadius: 'var(--style-radius-s, 3px)',
+                                    border: '1px solid var(--theme-elevation-100)',
+                                    background: 'var(--theme-elevation-50)'
+                                },
+                                children: /*#__PURE__*/ _jsx("img", {
+                                    src: src,
+                                    alt: "",
+                                    draggable: false,
+                                    style: {
+                                        width: '100%',
+                                        height: '100%',
+                                        objectFit: 'cover',
+                                        objectPosition: `${pos.x}% ${pos.y}%`
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("figcaption", {
+                                style: {
+                                    ...note,
+                                    textAlign: 'center',
+                                    marginTop: '0.2rem'
+                                },
+                                children: r
+                            })
+                        ]
+                    }, r);
+                })
+            })
+        ]
+    });
+};
+export default FocalPreview;
+
+//# sourceMappingURL=focalPreview.js.map

package/dist/components/admin/focalPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/admin/focalPreview.tsx"],"sourcesContent":["'use client'\n\nimport { useDocumentInfo, useField, useForm, useUploadEdits } from '@payloadcms/ui'\nimport type React from 'react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { coverObjectPosition } from '../../transform/geometry'\n\n/**\n * An inline focal-point picker + live ratio preview for the Images upload edit\n * view. It ENHANCES Payload's native focal pipeline rather than competing with it:\n * the displayable source comes from the saved `url` or an object URL of the\n * just-selected `file` (the same way Payload's own Upload element resolves it), and\n * the focal point is written through the shared `UploadEdits` context — exactly what\n * the native \"Edit image\" selector uses — so the value persists (the server derives\n * `focalX/focalY` from it on save) and the two never conflict.\n *\n * The ratio tiles reproduce the transform endpoint's crop exactly: they share its\n * `coverCropGeometry` (via `coverObjectPosition`) to turn the focal point into the\n * matching `object-position`, rather than panning proportionally with a raw\n * `object-position: <focal>%` (which diverges from the endpoint in the mid-range).\n * No network calls.\n */\n\nconst DEFAULT_RATIOS = ['16:9', '9:16', '1:1', '4:3', '3:2', '21:9']\n\nconst ratioToCss = (r: string): string => r.replace(/[:/]/, ' / ')\nconst clampPct = (n: number): number => Math.max(0, Math.min(100, n))\n\ninterface FocalPreviewProps {\n  previewRatios?: string[]\n  readOnly?: boolean\n}\n\nconst note: React.CSSProperties = { color: 'var(--theme-elevation-500)', fontSize: '0.8rem', margin: 0 }\n\nexport const FocalPreview: React.FC<FocalPreviewProps> = ({ previewRatios = DEFAULT_RATIOS, readOnly }) => {\n  const { data } = useDocumentInfo()\n  const { value: file } = useField<File | undefined>({ path: 'file' })\n  const { uploadEdits, updateUploadEdits } = useUploadEdits()\n  const { setModified } = useForm()\n\n  const [objectUrl, setObjectUrl] = useState<string | null>(null)\n  useEffect(() => {\n    if (file instanceof File && file.type.startsWith('image/')) {\n      const url = URL.createObjectURL(file)\n      setObjectUrl(url)\n      return () => URL.revokeObjectURL(url)\n    }\n    setObjectUrl(null)\n    return undefined\n  }, [file])\n\n  const savedUrl = typeof data?.url === 'string' ? data.url : null\n  const src = savedUrl || objectUrl\n\n  const focalX = uploadEdits?.focalPoint?.x ?? (typeof data?.focalX === 'number' ? data.focalX : 50)\n  const focalY = uploadEdits?.focalPoint?.y ?? (typeof data?.focalY === 'number' ? data.focalY : 50)\n\n  const [srcDims, setSrcDims] = useState<{ w: number; h: number } | null>(\n    typeof data?.width === 'number' && typeof data?.height === 'number' ? { w: data.width, h: data.height } : null,\n  )\n\n  const stageRef = useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = useState(false)\n\n  const applyFromEvent = useCallback(\n    (clientX: number, clientY: number) => {\n      if (readOnly) return\n      const el = stageRef.current\n      if (!el) return\n      const rect = el.getBoundingClientRect()\n      if (rect.width === 0 || rect.height === 0) return\n      const x = clampPct(((clientX - rect.left) / rect.width) * 100)\n      const y = clampPct(((clientY - rect.top) / rect.height) * 100)\n      updateUploadEdits({ ...uploadEdits, focalPoint: { x, y } })\n      setModified(true)\n    },\n    [readOnly, uploadEdits, updateUploadEdits, setModified],\n  )\n\n  if (!src) {\n    return (\n      <div style={{ marginBottom: '1rem' }}>\n        <strong style={{ fontSize: '0.95rem' }}>Focus point</strong>\n        <p style={note}>Upload an image to set its focus point and preview display ratios.</p>\n      </div>\n    )\n  }\n\n  return (\n    <div style={{ marginBottom: '1rem' }}>\n      <strong style={{ fontSize: '0.95rem' }}>Focus point</strong>\n      <p style={{ ...note, marginBottom: '0.5rem' }}>\n        {readOnly ? 'Focus point (read-only).' : 'Click or drag to set the focus point used when cropping to a ratio.'}\n      </p>\n\n      <div\n        ref={stageRef}\n        onPointerDown={(e) => {\n          if (readOnly) return\n          setDragging(true)\n          e.currentTarget.setPointerCapture(e.pointerId)\n          applyFromEvent(e.clientX, e.clientY)\n        }}\n        onPointerMove={(e) => {\n          if (dragging) applyFromEvent(e.clientX, e.clientY)\n        }}\n        onPointerUp={(e) => {\n          setDragging(false)\n          e.currentTarget.releasePointerCapture?.(e.pointerId)\n        }}\n        style={{\n          position: 'relative',\n          maxWidth: 480,\n          borderRadius: 'var(--style-radius-m, 4px)',\n          overflow: 'hidden',\n          border: '1px solid var(--theme-elevation-150)',\n          cursor: readOnly ? 'default' : 'crosshair',\n          touchAction: 'none',\n        }}\n      >\n        {/* biome-ignore lint/performance/noImgElement: intentional plain <img> — admin preview that mirrors the frontend's object-position crop */}\n        <img\n          src={src}\n          alt=\"\"\n          onLoad={(e) => setSrcDims({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight })}\n          style={{ display: 'block', width: '100%', height: 'auto' }}\n          draggable={false}\n        />\n        <span\n          aria-hidden\n          style={{\n            position: 'absolute',\n            left: `${focalX}%`,\n            top: `${focalY}%`,\n            width: 16,\n            height: 16,\n            transform: 'translate(-50%, -50%)',\n            borderRadius: '50%',\n            border: '2px solid var(--theme-success-500, #22c55e)',\n            boxShadow: '0 0 0 2px rgba(0,0,0,0.5)',\n            pointerEvents: 'none',\n          }}\n        />\n      </div>\n\n      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))', gap: '0.5rem', marginTop: '0.75rem' }}>\n        {previewRatios.map((r) => {\n          const [rw, rh] = r.split(/[:/]/).map(Number)\n          const pos = srcDims && rw && rh ? coverObjectPosition(srcDims.w, srcDims.h, rw, rh, focalX, focalY) : { x: focalX, y: focalY }\n          return (\n            <figure key={r} style={{ margin: 0 }}>\n              <div\n                style={{\n                  aspectRatio: ratioToCss(r),\n                  overflow: 'hidden',\n                  borderRadius: 'var(--style-radius-s, 3px)',\n                  border: '1px solid var(--theme-elevation-100)',\n                  background: 'var(--theme-elevation-50)',\n                }}\n              >\n                {/* biome-ignore lint/performance/noImgElement: intentional plain <img> — admin preview that mirrors the frontend's focal crop */}\n                <img\n                  src={src}\n                  alt=\"\"\n                  draggable={false}\n                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: `${pos.x}% ${pos.y}%` }}\n                />\n              </div>\n              <figcaption style={{ ...note, textAlign: 'center', marginTop: '0.2rem' }}>{r}</figcaption>\n            </figure>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default FocalPreview\n"],"names":["useDocumentInfo","useField","useForm","useUploadEdits","useCallback","useEffect","useRef","useState","coverObjectPosition","DEFAULT_RATIOS","ratioToCss","r","replace","clampPct","n","Math","max","min","note","color","fontSize","margin","FocalPreview","previewRatios","readOnly","data","value","file","path","uploadEdits","updateUploadEdits","setModified","objectUrl","setObjectUrl","File","type","startsWith","url","URL","createObjectURL","revokeObjectURL","undefined","savedUrl","src","focalX","focalPoint","x","focalY","y","srcDims","setSrcDims","width","height","w","h","stageRef","dragging","setDragging","applyFromEvent","clientX","clientY","el","current","rect","getBoundingClientRect","left","top","div","style","marginBottom","strong","p","ref","onPointerDown","e","currentTarget","setPointerCapture","pointerId","onPointerMove","onPointerUp","releasePointerCapture","position","maxWidth","borderRadius","overflow","border","cursor","touchAction","img","alt","onLoad","naturalWidth","naturalHeight","display","draggable","span","aria-hidden","transform","boxShadow","pointerEvents","gridTemplateColumns","gap","marginTop","map","rw","rh","split","Number","pos","figure","aspectRatio","background","objectFit","objectPosition","figcaption","textAlign"],"mappings":"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"}

package/dist/components/admin/purgeVariants.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+/**
+ * A button that purges every on-demand variant generated from this source image
+ * (POST `<apiRoute><purgePath>/:id`, logged-in users only). Useful after editing the
+ * focal point or re-uploading, or to reclaim storage. Only shown on a saved doc.
+ *
+ * `purgePath` defaults to the endpoint's fixed `/img/purge` route. The POST is
+ * authenticated by Payload's session cookie (SameSite-protected).
+ */
+interface PurgeVariantsProps {
+    /** Purge route under the API base. Default `/img/purge`. */
+    purgePath?: string;
+}
+export declare const PurgeVariants: React.FC<PurgeVariantsProps>;
+export default PurgeVariants;
+//# sourceMappingURL=purgeVariants.d.ts.map

package/dist/components/admin/purgeVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"purgeVariants.d.ts","sourceRoot":"","sources":["../../../src/components/admin/purgeVariants.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;GAOG;AACH,UAAU,kBAAkB;IAC1B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAcD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+BtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/components/admin/purgeVariants.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast, useConfig, useDocumentInfo } from "@payloadcms/ui";
+import { useState } from "react";
+const button = {
+    cursor: 'pointer',
+    fontSize: '0.85rem',
+    padding: '0.4rem 0.75rem',
+    color: 'var(--theme-elevation-800)',
+    background: 'var(--theme-elevation-50)',
+    borderRadius: 'var(--style-radius-s, 3px)',
+    border: '1px solid var(--theme-elevation-150)'
+};
+const note = {
+    color: 'var(--theme-elevation-500)',
+    fontSize: '0.8rem',
+    margin: '0.25rem 0 0'
+};
+export const PurgeVariants = ({ purgePath = '/img/purge' })=>{
+    const { config } = useConfig();
+    const { id } = useDocumentInfo();
+    const apiRoute = config?.routes?.api || '/api';
+    const [busy, setBusy] = useState(false);
+    if (id == null) return null;
+    const purge = async ()=>{
+        setBusy(true);
+        try {
+            const res = await fetch(`${apiRoute}${purgePath}/${id}`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            const json = await res.json().catch(()=>({}));
+            if (!res.ok) throw new Error(json?.error || `HTTP ${res.status}`);
+            const n = json?.deleted ?? 0;
+            toast.success(`Purged ${n} generated image${n === 1 ? '' : 's'}.`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to purge variants.');
+        } finally{
+            setBusy(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            marginBottom: '1rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: ()=>void purge(),
+                disabled: busy,
+                style: {
+                    ...button,
+                    opacity: busy ? 0.6 : 1
+                },
+                children: busy ? 'Purging…' : 'Purge generated variants'
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: note,
+                children: "Deletes every on-demand image generated from this source. They regenerate on next request."
+            })
+        ]
+    });
+};
+export default PurgeVariants;
+
+//# sourceMappingURL=purgeVariants.js.map

package/dist/components/admin/purgeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/admin/purgeVariants.tsx"],"sourcesContent":["'use client'\n\nimport { toast, useConfig, useDocumentInfo } from '@payloadcms/ui'\nimport type React from 'react'\nimport { useState } from 'react'\n\n/**\n * A button that purges every on-demand variant generated from this source image\n * (POST `<apiRoute><purgePath>/:id`, logged-in users only). Useful after editing the\n * focal point or re-uploading, or to reclaim storage. Only shown on a saved doc.\n *\n * `purgePath` defaults to the endpoint's fixed `/img/purge` route. The POST is\n * authenticated by Payload's session cookie (SameSite-protected).\n */\ninterface PurgeVariantsProps {\n  /** Purge route under the API base. Default `/img/purge`. */\n  purgePath?: string\n}\n\nconst button: React.CSSProperties = {\n  cursor: 'pointer',\n  fontSize: '0.85rem',\n  padding: '0.4rem 0.75rem',\n  color: 'var(--theme-elevation-800)',\n  background: 'var(--theme-elevation-50)',\n  borderRadius: 'var(--style-radius-s, 3px)',\n  border: '1px solid var(--theme-elevation-150)',\n}\n\nconst note: React.CSSProperties = { color: 'var(--theme-elevation-500)', fontSize: '0.8rem', margin: '0.25rem 0 0' }\n\nexport const PurgeVariants: React.FC<PurgeVariantsProps> = ({ purgePath = '/img/purge' }) => {\n  const { config } = useConfig()\n  const { id } = useDocumentInfo()\n  const apiRoute = config?.routes?.api || '/api'\n  const [busy, setBusy] = useState(false)\n\n  if (id == null) return null\n\n  const purge = async (): Promise<void> => {\n    setBusy(true)\n    try {\n      const res = await fetch(`${apiRoute}${purgePath}/${id}`, { method: 'POST', credentials: 'include' })\n      const json = (await res.json().catch(() => ({}))) as { deleted?: number; error?: string }\n      if (!res.ok) throw new Error(json?.error || `HTTP ${res.status}`)\n      const n = json?.deleted ?? 0\n      toast.success(`Purged ${n} generated image${n === 1 ? '' : 's'}.`)\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to purge variants.')\n    } finally {\n      setBusy(false)\n    }\n  }\n\n  return (\n    <div style={{ marginBottom: '1rem' }}>\n      <button type=\"button\" onClick={() => void purge()} disabled={busy} style={{ ...button, opacity: busy ? 0.6 : 1 }}>\n        {busy ? 'Purging…' : 'Purge generated variants'}\n      </button>\n      <p style={note}>Deletes every on-demand image generated from this source. They regenerate on next request.</p>\n    </div>\n  )\n}\n\nexport default PurgeVariants\n"],"names":["toast","useConfig","useDocumentInfo","useState","button","cursor","fontSize","padding","color","background","borderRadius","border","note","margin","PurgeVariants","purgePath","config","id","apiRoute","routes","api","busy","setBusy","purge","res","fetch","method","credentials","json","catch","ok","Error","error","status","n","deleted","success","err","message","div","style","marginBottom","type","onClick","disabled","opacity","p"],"mappings":"AAAA;;AAEA,SAASA,KAAK,EAAEC,SAAS,EAAEC,eAAe,QAAQ,iBAAgB;AAElE,SAASC,QAAQ,QAAQ,QAAO;AAehC,MAAMC,SAA8B;IAClCC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,YAAY;IACZC,cAAc;IACdC,QAAQ;AACV;AAEA,MAAMC,OAA4B;IAAEJ,OAAO;IAA8BF,UAAU;IAAUO,QAAQ;AAAc;AAEnH,OAAO,MAAMC,gBAA8C,CAAC,EAAEC,YAAY,YAAY,EAAE;IACtF,MAAM,EAAEC,MAAM,EAAE,GAAGf;IACnB,MAAM,EAAEgB,EAAE,EAAE,GAAGf;IACf,MAAMgB,WAAWF,QAAQG,QAAQC,OAAO;IACxC,MAAM,CAACC,MAAMC,QAAQ,GAAGnB,SAAS;IAEjC,IAAIc,MAAM,MAAM,OAAO;IAEvB,MAAMM,QAAQ;QACZD,QAAQ;QACR,IAAI;YACF,MAAME,MAAM,MAAMC,MAAM,GAAGP,WAAWH,UAAU,CAAC,EAAEE,IAAI,EAAE;gBAAES,QAAQ;gBAAQC,aAAa;YAAU;YAClG,MAAMC,OAAQ,MAAMJ,IAAII,IAAI,GAAGC,KAAK,CAAC,IAAO,CAAA,CAAC,CAAA;YAC7C,IAAI,CAACL,IAAIM,EAAE,EAAE,MAAM,IAAIC,MAAMH,MAAMI,SAAS,CAAC,KAAK,EAAER,IAAIS,MAAM,EAAE;YAChE,MAAMC,IAAIN,MAAMO,WAAW;YAC3BnC,MAAMoC,OAAO,CAAC,CAAC,OAAO,EAAEF,EAAE,gBAAgB,EAAEA,MAAM,IAAI,KAAK,IAAI,CAAC,CAAC;QACnE,EAAE,OAAOG,KAAK;YACZrC,MAAMgC,KAAK,CAACK,eAAeN,QAAQM,IAAIC,OAAO,GAAG;QACnD,SAAU;YACRhB,QAAQ;QACV;IACF;IAEA,qBACE,MAACiB;QAAIC,OAAO;YAAEC,cAAc;QAAO;;0BACjC,KAACrC;gBAAOsC,MAAK;gBAASC,SAAS,IAAM,KAAKpB;gBAASqB,UAAUvB;gBAAMmB,OAAO;oBAAE,GAAGpC,MAAM;oBAAEyC,SAASxB,OAAO,MAAM;gBAAE;0BAC5GA,OAAO,aAAa;;0BAEvB,KAACyB;gBAAEN,OAAO5B;0BAAM;;;;AAGtB,EAAC;AAED,eAAeE,cAAa"}

package/dist/components/image.d.ts

@@ -0,0 +1,90 @@
+/**
+ * `<ResponsiveImage>` — a single plain `<img>` carrying a `srcset` of on-demand transform URLs,
+ * with a faithful **inline LQIP** painted as its own `background-image`: a tiny base64 data-URI
+ * (generated server-side at the requested aspect-ratio + focal point, zero network) shows
+ * instantly, and the real image paints over it on load — the swap is native, no JS, no `<head>`
+ * script. An async server component: it resolves the project config (pixel step + placeholder
+ * settings), generates the LQIP via the shared variant cache, and renders one `<img>`. Not
+ * `next/image`.
+ *
+ * `className` / `style` / `dataAttributes` all go on the `<img>` itself (size / space / round it
+ * there). The LQIP is on by default; pass `blur={false}` (or the plugin's `placeholder: false`)
+ * to skip it, and it's skipped automatically when there's no populated doc to generate from.
+ */
+import type { SanitizedConfig } from 'payload';
+import type { CSSProperties, ReactElement } from 'react';
+import { type Fit, type Format } from '../transform/params';
+import { type BuildSrcsetOptions, buildSrcset, type BuildUrlOptions, buildVariantUrl, deriveVersion, type GetImageUrlOptions, getImageUrl, type ImageResource, stepWidths } from '../utils/urls';
+export { buildSrcset, buildVariantUrl, deriveVersion, getImageUrl, stepWidths };
+export type { BuildSrcsetOptions, BuildUrlOptions, Fit, Format, GetImageUrlOptions, ImageResource };
+/** A bare id, or a populated image doc (for natural dims, alt, the version token, and inline-LQIP generation). */
+export type ResponsiveImageInput = string | number | {
+    id: string | number;
+    width?: number | null;
+    height?: number | null;
+    alt?: string | null;
+    filename?: string | null;
+    url?: string | null;
+    focalX?: number | null;
+    focalY?: number | null;
+};
+type Awaitable<T> = T | Promise<T>;
+/** Placeholder override: `false` off · `true`/unset on (defaults) · a number = LQIP width (px) · `{ width?, quality? }` = tuned. */
+export type PlaceholderProp = boolean | number | {
+    width?: number;
+    quality?: number;
+};
+export interface ResponsiveImageProps {
+    image: ResponsiveImageInput;
+    alt?: string;
+    /** The `sizes` attribute. Default `100vw`. */
+    sizes?: string;
+    /** Render aspect ratio (`16/9` | `"16:9"`); falls back to the doc's natural ratio. Ignored when `fill` is set. */
+    aspectRatio?: number | string;
+    /**
+     * Cover-fill a height-driven parent instead of acting as an aspect-ratio box. The `<img>`
+     * becomes `position:absolute; inset:0; size:100%` with `object-fit:<fit>` and NO aspect-ratio
+     * — so it fills a parent that sets its own height (full-bleed hero, carousel slide, map panel).
+     * The parent must be positioned. The placeholder still applies. Default false.
+     */
+    fill?: boolean;
+    quality?: number;
+    fit?: Fit;
+    format?: Format;
+    /** Override the source intrinsic width used to cap the srcset (else read from a populated doc). */
+    sourceWidth?: number;
+    /** Native `<img>` `loading`. Default `lazy`; set `eager` for an above-the-fold hero. */
+    loading?: 'lazy' | 'eager';
+    /** Native `<img>` `fetchpriority`. Default `auto`; set `high` for the LCP image. */
+    fetchPriority?: 'high' | 'low' | 'auto';
+    /** Native `<img>` `decoding` hint. Default `async`. */
+    decoding?: 'async' | 'auto' | 'sync';
+    /** Applied to the `<img>` (size / space / round it here). */
+    className?: string;
+    /** Merged onto the `<img>`'s style. */
+    style?: CSSProperties;
+    /** Absolute base for the generated URLs (default same-origin). */
+    baseUrl?: string;
+    /** Transform endpoint base. Default `/api/img`; set it only if your Payload API route or Next.js basePath differs. */
+    path?: string;
+    /** Payload config, used to resolve the project `pixelStep`. Rarely needed: without it the
+     *  component uses the config the plugin stashed at init, falling back to the `@payload-config`
+     *  alias `withPayload` sets up. Pass it explicitly only for a non-standard setup. */
+    config?: Awaitable<SanitizedConfig>;
+    /** Explicit cache-busting version token (`v=`); overrides the one derived from the doc's filename + focal. */
+    version?: string;
+    /**
+     * Inline LQIP placeholder. `false` disables it; a **number** sets the LQIP width in px; an object
+     * tunes `{ width, quality }`. Keep the width small — the LQIP is base64-inlined in **every**
+     * response (~0.6 KB at 24px, ~2 KB at 48, ~3–4 KB at 64), so **24–64 is the sweet spot**; larger
+     * just bloats the HTML. Defaults to the project `placeholder` config (24px). Supersedes `blur`.
+     */
+    placeholder?: PlaceholderProp;
+    /** @deprecated Use `placeholder` instead (`placeholder={false}` to disable). */
+    blur?: boolean;
+    /** Extra attributes (e.g. `data-*`) spread onto the `<img>`. */
+    dataAttributes?: Record<string, string>;
+}
+export declare const ResponsiveImage: (props: ResponsiveImageProps) => Promise<ReactElement | null>;
+export default ResponsiveImage;
+//# sourceMappingURL=image.d.ts.map

package/dist/components/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/components/image.tsx"],"names":[],"mappings":"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"}

package/dist/components/image.js

@@ -0,0 +1,162 @@
+/**
+ * `<ResponsiveImage>` — a single plain `<img>` carrying a `srcset` of on-demand transform URLs,
+ * with a faithful **inline LQIP** painted as its own `background-image`: a tiny base64 data-URI
+ * (generated server-side at the requested aspect-ratio + focal point, zero network) shows
+ * instantly, and the real image paints over it on load — the swap is native, no JS, no `<head>`
+ * script. An async server component: it resolves the project config (pixel step + placeholder
+ * settings), generates the LQIP via the shared variant cache, and renders one `<img>`. Not
+ * `next/image`.
+ *
+ * `className` / `style` / `dataAttributes` all go on the `<img>` itself (size / space / round it
+ * there). The LQIP is on by default; pass `blur={false}` (or the plugin's `placeholder: false`)
+ * to skip it, and it's skipped automatically when there's no populated doc to generate from.
+ */ import { jsx as _jsx } from "react/jsx-runtime";
+import { stashedConfig } from "../lib/configStash.js";
+import { parseAspectRatio } from "../transform/params.js";
+import { buildSrcset, buildVariantUrl, deriveVersion, getImageUrl, stepWidths } from "../utils/urls.js";
+// Re-export the isomorphic URL builders so this single subpath covers the whole frontend API —
+// `import { ResponsiveImage, getImageUrl } from '@pro-laico/payload-images/components/image'`.
+// (The `utils/urls` subpath stays available for importing the builders without the component.)
+export { buildSrcset, buildVariantUrl, deriveVersion, getImageUrl, stepWidths };
+/** Resolve the `placeholder` prop (falling back to the deprecated `blur`) to on/off + optional width/quality. */ const resolvePlaceholderProp = (placeholder, blur)=>{
+    if (placeholder === false) return {
+        on: false
+    };
+    if (placeholder === true) return {
+        on: true
+    };
+    if (typeof placeholder === 'number') return {
+        on: true,
+        width: placeholder
+    };
+    if (placeholder && typeof placeholder === 'object') return {
+        on: true,
+        width: placeholder.width,
+        quality: placeholder.quality
+    };
+    return {
+        on: blur
+    } // `placeholder` unset → legacy `blur` (default true)
+    ;
+};
+const CSS_OBJECT_FIT = {
+    cover: 'cover',
+    contain: 'contain',
+    fill: 'fill',
+    inside: 'contain',
+    outside: 'cover'
+};
+const idOf = (image)=>typeof image === 'object' ? String(image.id ?? '') : String(image ?? '');
+// Once-per-process dev warnings — these failures repeat on every render, so warning each time would flood the console.
+let warnedNoConfig = false;
+let warnedLqipFailed = false;
+export const ResponsiveImage = async (props)=>{
+    const { image, alt, sizes = '100vw', aspectRatio, fill = false, quality = 75, fit = 'cover', format = 'auto', sourceWidth, loading = 'lazy', fetchPriority = 'auto', decoding = 'async', className, style, baseUrl, path, version, placeholder, blur = true, dataAttributes, config } = props;
+    const id = idOf(image);
+    if (!id) return null;
+    // Resolve the Payload config once (the srcset's `pixelStep` and the placeholder settings both
+    // come off it): the explicit prop, else the globalThis stash the plugin's `onInit` filled (set
+    // the moment Payload boots — no bundler involvement), else the `@payload-config` alias — which
+    // only resolves from a published package when the consumer transpiles it (`transpilePackages`).
+    // `as string` keeps TS from resolving the alias at this package's build. Stays undefined if
+    // unreadable (defaults apply).
+    let cfg;
+    try {
+        cfg = await (config ?? stashedConfig() ?? (await import("@payload-config")).default);
+    } catch  {
+        cfg = undefined;
+    }
+    if (!cfg && process.env.NODE_ENV !== 'production' && !warnedNoConfig) {
+        warnedNoConfig = true;
+        console.warn("[payload-images] <ResponsiveImage> could not resolve the Payload config — project pixelStep/placeholder settings are skipped and the inline LQIP is disabled. Pass the `config` prop, or add `transpilePackages: ['@pro-laico/payload-images']` to next.config so the `@payload-config` alias resolves.");
+    }
+    const pixelStep = cfg?.custom?.payloadImages?.pixelStep;
+    const doc = typeof image === 'object' ? image : undefined;
+    const altText = alt ?? doc?.alt ?? '';
+    const naturalW = doc?.width ?? undefined;
+    const naturalH = doc?.height ?? undefined;
+    // Warn (dev only) when an aspectRatio was passed but doesn't parse — we silently fall back to the
+    // natural ratio, which is easy to miss; mirrors how Sanity's reference component surfaces this.
+    if (!fill && aspectRatio != null && parseAspectRatio(aspectRatio) === undefined && process.env.NODE_ENV !== 'production') {
+        console.warn(`[payload-images] Invalid aspectRatio ${JSON.stringify(aspectRatio)} — expected "w/h", "w:h", or a positive number. Falling back to the image's natural ratio.`);
+    }
+    const ar = fill ? undefined : parseAspectRatio(aspectRatio) ?? (naturalW && naturalH ? naturalW / naturalH : undefined);
+    const opts = {
+        fit,
+        quality,
+        format,
+        aspectRatio: ar,
+        baseUrl,
+        path,
+        pixelStep,
+        sourceWidth: sourceWidth ?? naturalW,
+        version: version ?? deriveVersion(doc)
+    };
+    const { srcset, src } = buildSrcset(id, opts);
+    // The faithful inline LQIP: a tiny base64 variant at this exact ratio/focal, generated
+    // server-side (shared variant cache) and painted as the <img>'s own background — instant,
+    // zero network, covered when the real image loads. Needs a populated doc + the config;
+    // the engine is dynamic-imported so the non-placeholder path never bundles Sharp/getPayload.
+    const ph = resolvePlaceholderProp(placeholder, blur);
+    let lqip;
+    if (ph.on && cfg && doc?.filename) {
+        try {
+            const { generateInlineLqip } = await import("./inlineLqip.js");
+            // Trusted (component) call: the requested width is honored (no `untrusted` clamp).
+            lqip = await generateInlineLqip({
+                config: cfg,
+                source: doc,
+                ar,
+                fit,
+                width: ph.width,
+                quality: ph.quality
+            });
+        } catch (err) {
+            lqip = undefined;
+            if (process.env.NODE_ENV !== 'production' && !warnedLqipFailed) {
+                warnedLqipFailed = true;
+                console.warn(`[payload-images] <ResponsiveImage> inline LQIP generation failed — rendering without a placeholder. ${String(err)}`);
+            }
+        }
+    }
+    const intrinsicW = naturalW ?? (ar ? 1280 : undefined);
+    const intrinsicH = naturalH ?? (ar && intrinsicW ? Math.round(intrinsicW / ar) : undefined);
+    const bgSize = fit === 'contain' || fit === 'inside' ? 'contain' : 'cover';
+    return(// biome-ignore lint/performance/noImgElement: intentional plain <img> — a hand-built srcset + inline LQIP that next/image would defeat
+    /*#__PURE__*/ _jsx("img", {
+        src: src,
+        srcSet: srcset,
+        sizes: sizes,
+        alt: altText,
+        width: intrinsicW,
+        height: intrinsicH,
+        loading: loading,
+        fetchPriority: fetchPriority,
+        decoding: decoding,
+        className: className,
+        style: {
+            display: 'block',
+            width: '100%',
+            height: fill ? '100%' : 'auto',
+            ...ar ? {
+                aspectRatio: String(ar)
+            } : null,
+            objectFit: CSS_OBJECT_FIT[fit],
+            ...fill ? {
+                position: 'absolute',
+                inset: 0
+            } : null,
+            ...lqip ? {
+                backgroundImage: `url(${lqip})`,
+                backgroundSize: bgSize,
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat'
+            } : null,
+            ...style
+        },
+        ...dataAttributes
+    }));
+};
+export default ResponsiveImage;
+
+//# sourceMappingURL=image.js.map