@rubixstudios/payload-images 1.0.0 → 1.0.1

package/LICENSE

@@ -1,22 +1,22 @@
-MIT License
-
-Copyright (c) 2026 rilrom / Riley Langbein
-Copyright (c) 2025-2026 Rubix Studios Pty. Ltd. <https://rubixstudios.com.au>
-
-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.
+MIT License
+
+Copyright (c) 2026 rilrom / Riley Langbein
+Copyright (c) 2025-2026 Rubix Studios Pty. Ltd. <https://rubixstudios.com.au>
+
+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/dist/components/ImageSearch/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const drawerSlug = "payload-image-search";
+export declare const ImageSearch: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageSearch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageSearch/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAI1C,eAAO,MAAM,UAAU,yBAAyB,CAAA;AAEhD,eAAO,MAAM,WAAW,yBA8BvB,CAAA"}

package/dist/components/ImageSearch/index.js

@@ -0,0 +1,31 @@
+'use client';
+import { Button, Drawer, useConfig, useModal, useUploadControls } from '@payloadcms/ui';
+import React, { useCallback } from 'react';
+import { SearchImages } from '../SearchImages/index.js';
+export const drawerSlug = 'payload-image-search';
+export const ImageSearch = ()=>{
+    const { config } = useConfig();
+    const { setUploadControlFileUrl } = useUploadControls();
+    const { openModal, closeModal } = useModal();
+    const handleSearchSubmit = useCallback((url)=>{
+        if (!url) return;
+        setUploadControlFileUrl(url);
+        closeModal(drawerSlug);
+    }, [
+        setUploadControlFileUrl,
+        closeModal
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+        className: "file-field__orText"
+    }, "Or"), /*#__PURE__*/ React.createElement(Button, {
+        buttonStyle: "pill",
+        size: "small",
+        onClick: ()=>openModal(drawerSlug)
+    }, "Search images"), /*#__PURE__*/ React.createElement(Drawer, {
+        slug: drawerSlug
+    }, /*#__PURE__*/ React.createElement(SearchImages, {
+        serverURL: config.serverURL,
+        api: config.routes.api,
+        onSelect: handleSearchSubmit
+    })));
+};

package/dist/components/SearchImages/heart.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare function HeartIcon(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+//# sourceMappingURL=heart.d.ts.map

package/dist/components/SearchImages/heart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heart.d.ts","sourceRoot":"","sources":["../../../src/components/SearchImages/heart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,qBASvD"}

package/dist/components/SearchImages/heart.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export function HeartIcon(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        viewBox: "0 0 15 15",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M13.91 6.75c-1.17 2.25-4.3 5.31-6.07 6.94a.52.52 0 0 1-.67 0C5.39 12.06 2.26 9 1.09 6.75-1.48 1.8 5-1.5 7.5 3.45 10-1.5 16.48 1.8 13.91 6.75z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/SearchImages/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './style.css';
+export declare const previewImageDrawerSlug = "preview-image";
+type SearchImagesProps = {
+    serverURL: string;
+    api: string;
+    onSelect: (value: string) => void;
+};
+export declare const SearchImages: (props: SearchImagesProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SearchImages/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchImages/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAmB/D,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,sBAAsB,kBAAkB,CAAA;AAOrD,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAgcpD,CAAA"}

package/dist/components/SearchImages/index.js

@@ -0,0 +1,378 @@
+'use client';
+import { LinkIcon, Pagination, SearchFilter, Select, Tooltip, toast } from '@payloadcms/ui';
+import React, { useCallback, useEffect, useState } from 'react';
+import { PexelsColours, PexelsOrientation, PexelsSize, PixabayCategories, PixabayColours, PixabayImageType, PixabayOrder, PixabayOrientation, UnsplashColours, UnsplashOrientation } from '../../types.js';
+import { fetchCache } from '../../utils/fetchCache.js';
+import { HeartIcon } from '../SearchImages/heart.js';
+import './style.css';
+const baseClass = 'search-images';
+export const previewImageDrawerSlug = 'preview-image';
+export const SearchImages = (props)=>{
+    const { serverURL, api, onSelect } = props;
+    const [providerOptions, setProviderOptions] = useState([]);
+    const [selectedProvider, setSelectedProvider] = useState(null);
+    const [unsplashFilters, setUnsplashFilters] = useState({});
+    const [pexelsFilters, setPexelsFilters] = useState({});
+    const [pixabayFilters, setPixabayFilters] = useState({});
+    const [images, setImages] = useState(null);
+    const [totalPages, setTotalPages] = useState(null);
+    const [currentPage, setCurrentPage] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [show, setShow] = useState(false);
+    const [value, setValue] = useState('');
+    const addDefaultError = useCallback(()=>{
+        toast.error('Something went wrong.');
+    }, []);
+    const resetImages = useCallback(()=>{
+        setImages(null);
+        setTotalPages(null);
+        setCurrentPage(1);
+    }, []);
+    const getProviderOptions = useCallback(async ()=>{
+        try {
+            const response = await fetch(`${serverURL}${api}/providers`);
+            const json = await response.json();
+            if (json.error) {
+                setLoading(false);
+                return toast.error(json.error);
+            }
+            const providers = json.data.map((provider)=>({
+                    label: provider.name,
+                    value: provider.key.toLowerCase()
+                }));
+            setProviderOptions(providers);
+            setSelectedProvider(providers[0]);
+        } catch  {
+            setLoading(false);
+            addDefaultError();
+        }
+    }, [
+        serverURL,
+        api,
+        addDefaultError
+    ]);
+    const buildFeaturedParams = useCallback(()=>{
+        const params = new URLSearchParams();
+        if (selectedProvider?.value === 'unsplash') {
+            if (unsplashFilters.color) params.set('color', unsplashFilters.color);
+            if (unsplashFilters.orientation) params.set('orientation', unsplashFilters.orientation);
+        }
+        if (selectedProvider?.value === 'pexels') {
+            if (pexelsFilters.color) params.set('color', pexelsFilters.color);
+            if (pexelsFilters.orientation) params.set('orientation', pexelsFilters.orientation);
+            if (pexelsFilters.size) params.set('size', pexelsFilters.size);
+        }
+        if (selectedProvider?.value === 'pixabay') {
+            if (pixabayFilters.category) params.set('category', pixabayFilters.category);
+            if (pixabayFilters.image_type) params.set('image_type', pixabayFilters.image_type);
+            if (pixabayFilters.order) params.set('order', pixabayFilters.order);
+            if (pixabayFilters.orientation) params.set('orientation', pixabayFilters.orientation);
+            if (pixabayFilters.colors) params.set('colors', pixabayFilters.colors);
+        }
+        const query = params.toString();
+        return query ? `?${query}` : '';
+    }, [
+        selectedProvider?.value,
+        unsplashFilters,
+        pexelsFilters,
+        pixabayFilters
+    ]);
+    const getFeaturedPhotos = useCallback(async ()=>{
+        try {
+            setLoading(true);
+            resetImages();
+            const json = await fetchCache(`${serverURL}${api}/providers/${selectedProvider?.value}/featured${buildFeaturedParams()}`);
+            if (json.error) return toast.error(json.error);
+            setImages(json.data.images);
+        } catch  {
+            addDefaultError();
+            resetImages();
+        } finally{
+            setLoading(false);
+        }
+    }, [
+        resetImages,
+        serverURL,
+        api,
+        selectedProvider?.value,
+        addDefaultError,
+        buildFeaturedParams
+    ]);
+    const buildQueryParams = useCallback((page = 1)=>{
+        const params = new URLSearchParams();
+        params.set('query', value);
+        params.set('page', String(page));
+        if (selectedProvider?.value === 'unsplash') {
+            if (unsplashFilters.color) params.set('color', unsplashFilters.color);
+            if (unsplashFilters.orientation) params.set('orientation', unsplashFilters.orientation);
+        }
+        if (selectedProvider?.value === 'pexels') {
+            if (pexelsFilters.color) params.set('color', pexelsFilters.color);
+            if (pexelsFilters.orientation) params.set('orientation', pexelsFilters.orientation);
+            if (pexelsFilters.size) params.set('size', pexelsFilters.size);
+        }
+        if (selectedProvider?.value === 'pixabay') {
+            if (pixabayFilters.category) params.set('category', pixabayFilters.category);
+            if (pixabayFilters.image_type) params.set('image_type', pixabayFilters.image_type);
+            if (pixabayFilters.order) params.set('order', pixabayFilters.order);
+            if (pixabayFilters.orientation) params.set('orientation', pixabayFilters.orientation);
+            if (pixabayFilters.colors) params.set('colors', pixabayFilters.colors);
+        }
+        return params.toString();
+    }, [
+        value,
+        selectedProvider?.value,
+        unsplashFilters,
+        pexelsFilters,
+        pixabayFilters
+    ]);
+    const getPhotos = useCallback(async (page = 1)=>{
+        try {
+            setLoading(true);
+            resetImages();
+            const json = await fetchCache(`${serverURL}${api}/providers/${selectedProvider?.value}/search?${buildQueryParams(page)}`);
+            if (json.error) return toast.error(json.error);
+            setImages(json.data.images);
+            setTotalPages(json.data.totalPages);
+            setCurrentPage(page);
+        } catch  {
+            addDefaultError();
+            resetImages();
+        } finally{
+            setLoading(false);
+        }
+    }, [
+        resetImages,
+        serverURL,
+        api,
+        selectedProvider?.value,
+        addDefaultError,
+        buildQueryParams
+    ]);
+    const handleSearchFilterChange = useCallback((search)=>{
+        setValue(search);
+    }, []);
+    const handleSelectChange = useCallback((select)=>{
+        setSelectedProvider(select);
+    }, []);
+    const handleSearch = useCallback(()=>{
+        if (value.length > 0) {
+            getPhotos(1);
+        } else {
+            getFeaturedPhotos();
+        }
+    }, [
+        getFeaturedPhotos,
+        getPhotos,
+        value
+    ]);
+    const handleSelect = async (url, download)=>{
+        onSelect(url);
+        if (!download) return;
+        try {
+            await fetch(`${serverURL}${api}/providers/${selectedProvider?.value}/track-download?url=${download}`);
+        } catch  {
+            return null;
+        }
+    };
+    useEffect(()=>{
+        if (!selectedProvider) {
+            getProviderOptions();
+            return;
+        }
+        handleSearch();
+    }, [
+        getProviderOptions,
+        handleSearch,
+        selectedProvider
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: baseClass
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__fields`
+    }, /*#__PURE__*/ React.createElement(SearchFilter, {
+        label: "",
+        handleChange: handleSearchFilterChange
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: providerOptions,
+        value: selectedProvider,
+        onChange: (value)=>handleSelectChange(value),
+        isClearable: false,
+        isSearchable: false,
+        isCreatable: false
+    })), selectedProvider?.value === 'pexels' && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__filters`
+    }, /*#__PURE__*/ React.createElement(Select, {
+        options: PexelsColours,
+        value: PexelsColours.find((o)=>o.value === pexelsFilters.color),
+        onChange: (opt)=>setPexelsFilters((prev)=>({
+                    ...prev,
+                    color: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select color..."
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PexelsSize,
+        value: PexelsSize.find((o)=>o.value === pexelsFilters.size),
+        onChange: (opt)=>setPexelsFilters((prev)=>({
+                    ...prev,
+                    size: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select size..."
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PexelsOrientation,
+        value: PexelsOrientation.find((o)=>o.value === pexelsFilters.orientation),
+        onChange: (opt)=>setPexelsFilters((prev)=>({
+                    ...prev,
+                    orientation: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select orientation..."
+    })), selectedProvider?.value === 'pixabay' && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__filters`
+    }, /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayCategories,
+        value: PixabayCategories.find((o)=>o.value === pixabayFilters.category),
+        onChange: (opt)=>setPixabayFilters((prev)=>({
+                    ...prev,
+                    category: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select category..."
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayImageType,
+        value: PixabayImageType.find((o)=>o.value === pixabayFilters.image_type),
+        onChange: (opt)=>setPixabayFilters((prev)=>({
+                    ...prev,
+                    image_type: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select type..."
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayColours,
+        value: PixabayColours.find((o)=>o.value === pixabayFilters.colors),
+        onChange: (opt)=>setPixabayFilters((prev)=>({
+                    ...prev,
+                    colors: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select color..."
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayOrientation,
+        value: PixabayOrientation.find((o)=>o.value === pixabayFilters.orientation),
+        onChange: (opt)=>setPixabayFilters((prev)=>({
+                    ...prev,
+                    orientation: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select orientation..."
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayOrder,
+        value: PixabayOrder.find((o)=>o.value === pixabayFilters.order),
+        onChange: (opt)=>setPixabayFilters((prev)=>({
+                    ...prev,
+                    order: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select order..."
+    })), selectedProvider?.value === 'unsplash' && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__filters`
+    }, /*#__PURE__*/ React.createElement(Select, {
+        options: UnsplashColours,
+        value: UnsplashColours.find((o)=>o.value === unsplashFilters.color),
+        onChange: (opt)=>setUnsplashFilters((prev)=>({
+                    ...prev,
+                    color: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select color..."
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: UnsplashOrientation,
+        value: UnsplashOrientation.find((o)=>o.value === unsplashFilters.orientation),
+        onChange: (opt)=>setUnsplashFilters((prev)=>({
+                    ...prev,
+                    orientation: opt?.value
+                })),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Select orientation..."
+    })), loading && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__loading`
+    }, "Loading images..."), !loading && images?.length === 0 && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__noResults`
+    }, "No images found"), !loading && images && images?.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__results`
+    }, images.map((data)=>/*#__PURE__*/ React.createElement("div", {
+            key: data.id,
+            className: `${baseClass}__card`
+        }, /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: `${baseClass}__button`,
+            onClick: ()=>handleSelect(data.urls.original, data.urls?.downloadLocation),
+            style: {
+                backgroundColor: data.color
+            }
+        }, /*#__PURE__*/ React.createElement("img", {
+            src: data.urls.view,
+            alt: data.alt,
+            width: data.width,
+            height: data.height
+        })), /*#__PURE__*/ React.createElement("div", {
+            className: `${baseClass}__topOverlay`
+        }, data.likes !== undefined && /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: `${baseClass}__likes`,
+            onMouseEnter: ()=>setShow(true),
+            onMouseLeave: ()=>setShow(false),
+            onFocus: ()=>setShow(true),
+            onBlur: ()=>setShow(false)
+        }, /*#__PURE__*/ React.createElement(HeartIcon, null), /*#__PURE__*/ React.createElement(Tooltip, {
+            position: "bottom",
+            alignCaret: "center",
+            show: show
+        }, data.likes, " likes")), /*#__PURE__*/ React.createElement("a", {
+            className: `${baseClass}__download`,
+            href: data.urls.download,
+            target: "_blank",
+            rel: "noopener noreferrer"
+        }, /*#__PURE__*/ React.createElement(LinkIcon, null))), /*#__PURE__*/ React.createElement("div", {
+            className: `${baseClass}__bottomOverlay`
+        }, /*#__PURE__*/ React.createElement("a", {
+            className: `${baseClass}__attribution`,
+            href: data.attribution.link,
+            target: "_blank",
+            rel: "noopener noreferrer"
+        }, data.avatar ? /*#__PURE__*/ React.createElement("img", {
+            className: `${baseClass}__avatar`,
+            src: data.avatar,
+            alt: data.attribution.name,
+            width: 24,
+            height: 24,
+            loading: "lazy",
+            referrerPolicy: "no-referrer"
+        }) : /*#__PURE__*/ React.createElement("div", {
+            className: `${baseClass}__avatarFallback`,
+            "aria-hidden": true
+        }), data.attribution.name))))), currentPage && totalPages && totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__pagination`
+    }, /*#__PURE__*/ React.createElement(Pagination, {
+        hasNextPage: currentPage < totalPages,
+        hasPrevPage: currentPage > 1,
+        nextPage: currentPage < totalPages ? currentPage + 1 : undefined,
+        numberOfNeighbors: 3,
+        page: currentPage,
+        prevPage: currentPage > 1 ? currentPage - 1 : undefined,
+        totalPages: totalPages,
+        onChange: (page)=>getPhotos(page)
+    }))));
+};

package/dist/components/SearchImages/style.css

@@ -0,0 +1 @@
+.drawer__content-children{display:flex;flex-flow:column nowrap}.search-images{width:100%;display:flex;flex-flow:column nowrap;flex:1;padding:2rem 0}.search-images__fields{display:flex;gap:1.5rem}.search-images__fields .search-filter{flex:1}.search-images__fields .search-filter__input{height:100%;padding:0 1rem}.search-images__fields .rs__indicators{margin-left:.5rem}.search-images__filters{display:flex;margin-top:15px;gap:16px}.search-images__filters .react-select{min-width:130px}.search-images__results{margin-top:3rem;column-gap:16px;column-count:5}.search-images__card{break-inside:avoid;margin-bottom:16px}.search-images__results>div{width:100%}.search-images__results img{max-width:100%;width:100%}.search-images__pagination{margin-top:auto;padding-top:2rem;display:flex;justify-content:center}.search-images__loading,.search-images__noResults{display:flex;justify-content:center;align-items:center;flex:1}.search-images__card{position:relative;display:block;overflow:hidden}.search-images__card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s ease;pointer-events:none}.search-images__card:hover::after{opacity:1}.search-images__button{appearance:none;border:none;background-color:transparent;display:block;margin:0;padding:0;cursor:pointer;width:100%}.search-images__button img{display:block;width:100%;height:auto}.search-images__button svg{color:#fff}.search-images__bottomOverlay,.search-images__topOverlay{position:absolute;z-index:1;display:flex;opacity:0;transition:opacity .4s ease;max-width:calc(100% - 20px - 1rem)}.search-images__topOverlay{right:1rem;top:.8rem}.search-images__bottomOverlay{left:1rem;bottom:.8rem}.search-images__card:hover .search-images__bottomOverlay,.search-images__card:hover .search-images__topOverlay{opacity:1;pointer-events:auto}.search-images__likes{cursor:pointer;background:#fff;border-radius:6px;border:0;margin-right:10px;padding:7px;font-size:1em;line-height:1}.search-images__likes svg{width:14px}.search-images__likes:hover{background:rgb(255 255 255 / 80%);transition:background-color .4s ease}.search-images__likes .tooltip{left:14px}.search-images__download{background:#fff;border-radius:6px;padding:4px;font-size:0;line-height:1;width:28px;text-align:center}.search-images__download svg{pointer-events:none}a.search-images__download:hover{background:rgb(255 255 255 / 80%);transition:background-color .4s ease}img.search-images__avatar{max-width:24px;max-height:24px;margin-right:10px;border-radius:100%}.search-images__avatarFallback{width:24px;height:24px;margin-right:10px;border-radius:100%;background:rgba(255 255 255 / 25%)}.search-images__attribution{display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:1rem;font-weight:600;line-height:1;text-decoration:none;overflow:hidden}.search-images__attribution:hover{text-decoration:underline}.search-images__image{border-radius:4px;object-fit:cover;width:100%}.search-images__provider{display:flex;justify-content:center;padding-top:3rem;margin-top:auto;margin-bottom:30px}@media (max-width:1600px){.search-images__results{column-count:5}}@media (max-width:1400px){.search-images__results{column-count:4}}@media (max-width:1200px){.search-images__results{column-count:3}}@media (max-width:900px){.search-images__results{column-count:2}.search-images__filters{display:grid}}@media (max-width:600px){.search-images__results{column-count:1}.search-images__filters{display:grid}}

package/dist/defaults.d.ts

@@ -0,0 +1,3 @@
+import { type ImageConfig } from './types.js';
+export declare const defaultPluginOptions: Required<ImageConfig>;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../src/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,WAAW,CAOtD,CAAA"}

package/dist/defaults.js

@@ -0,0 +1,8 @@
+export const defaultPluginOptions = {
+    disabled: false,
+    unsplash: '',
+    pexels: '',
+    pixabay: '',
+    openverse: '',
+    access: ({ req: { user } })=>Boolean(user)
+};

package/dist/endpoints/handler/Pexels.d.ts

@@ -0,0 +1,12 @@
+import type { PexelsFilters, PexelsResult, ProviderResult } from '../../types.js';
+import type { Resolver } from './Provider.js';
+import { Provider } from './Provider.js';
+export declare class Pexels extends Provider {
+    constructor(apiKey: Resolver);
+    getFetchBaseUrl(): string;
+    getFetchHeaders(): Record<string, string>;
+    getFeatured(filters?: PexelsFilters): Promise<unknown>;
+    getSearch(query: string, page: number, filters?: PexelsFilters): Promise<unknown>;
+    formatResults(data: PexelsResult[]): ProviderResult[];
+}
+//# sourceMappingURL=Pexels.d.ts.map

package/dist/endpoints/handler/Pexels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pexels.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Pexels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBAAa,MAAO,SAAQ,QAAQ;gBACtB,MAAM,EAAE,QAAQ;IAInB,eAAe,IAAI,MAAM;IAIzB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAInC,WAAW,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IActD,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAsBvF,aAAa,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE;CAkB/D"}

package/dist/endpoints/handler/Pexels.js

@@ -0,0 +1,60 @@
+import { Provider } from './Provider.js';
+export class Pexels extends Provider {
+    constructor(apiKey){
+        super('pexels', 'Pexels', 'https://www.pexels.com/', apiKey);
+    }
+    getFetchBaseUrl() {
+        return 'https://api.pexels.com';
+    }
+    getFetchHeaders() {
+        return {
+            Authorization: `${this.getApiKey()}`
+        };
+    }
+    async getFeatured(filters) {
+        if (filters?.color || filters?.orientation || filters?.size) {
+            return this.getSearch('featured', 1, filters);
+        }
+        const data = await this.fetch('GET', `/v1/curated?per_page=${this.getFetchLimit()}`);
+        return {
+            images: this.formatResults(data.photos),
+            totalImages: null,
+            totalPages: null
+        };
+    }
+    async getSearch(query, page, filters) {
+        const params = new URLSearchParams({
+            query: query || 'featured',
+            page: String(page),
+            per_page: String(this.getFetchLimit())
+        });
+        if (filters?.color) params.set('color', filters.color);
+        if (filters?.size) params.set('size', filters.size);
+        if (filters?.orientation) params.set('orientation', filters.orientation);
+        const data = await this.fetch('GET', `/v1/search?${params.toString()}`);
+        const totalResults = data.total_results;
+        return {
+            images: this.formatResults(data.photos),
+            totalImages: totalResults,
+            totalPages: Math.min(Math.ceil(totalResults / this.getFetchLimit()), 100)
+        };
+    }
+    formatResults(data) {
+        return data.map((image)=>({
+                id: image.id,
+                alt: image.alt || '',
+                width: image.width,
+                height: image.height,
+                color: image.avg_color,
+                urls: {
+                    view: image.src.medium,
+                    original: image.src.original,
+                    download: image.url
+                },
+                attribution: {
+                    name: image.photographer,
+                    link: image.photographer_url
+                }
+            }));
+    }
+}

package/dist/endpoints/handler/Pixabay.d.ts

@@ -0,0 +1,12 @@
+import type { PixabayFilters, PixabayResult, ProviderResult } from '../../types.js';
+import type { Resolver } from './Provider.js';
+import { Provider } from './Provider.js';
+export declare class Pixabay extends Provider {
+    constructor(apiKey: Resolver);
+    getFetchBaseUrl(): string;
+    getFetchHeaders(): Record<string, string>;
+    getFeatured(filters?: PixabayFilters): Promise<unknown>;
+    getSearch(query: string, page: number, filters?: PixabayFilters): Promise<unknown>;
+    formatResults(data: PixabayResult[]): ProviderResult[];
+}
+//# sourceMappingURL=Pixabay.d.ts.map

package/dist/endpoints/handler/Pixabay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pixabay.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Pixabay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACnF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBAAa,OAAQ,SAAQ,QAAQ;gBACvB,MAAM,EAAE,QAAQ;IAInB,eAAe,IAAI,MAAM;IAIzB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAInC,WAAW,CAAC,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IAuBvD,SAAS,CACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,cAAc,GACvB,OAAO,CAAC,OAAO,CAAC;IAyBV,aAAa,CAAC,IAAI,EAAE,aAAa,EAAE,GAAG,cAAc,EAAE;CAoBhE"}