swoop-common 2.2.212 → 2.2.213

package/dist/rendering/components/MediaPicker.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { MediaAsset } from "../types/mediaAsset";
+export interface MediaPickerModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSelect: (assets: MediaAsset[]) => void;
+    maxSelect?: number;
+    initialRegion?: string;
+}
+export default function MediaPickerModal({ open, onClose, onSelect, maxSelect, initialRegion, }: MediaPickerModalProps): React.JSX.Element;

package/dist/rendering/components/MediaPicker.js

@@ -0,0 +1,165 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, MenuItem, Box, Typography, InputAdornment, IconButton, CircularProgress, ToggleButton, ToggleButtonGroup, ListSubheader, } from "@mui/material";
+import { Search as SearchIcon, Clear as ClearIcon, CheckCircle as CheckCircleIcon, } from "@mui/icons-material";
+import { MEDIA_REGIONS, searchResultToMediaAsset, } from "../types/mediaAsset";
+import { buildImgixUrl } from "../util/imgix";
+import { fetchMediaAssets, fetchMediaTags } from "../util/api";
+const PAGE_SIZE = 30;
+export default function MediaPickerModal({ open, onClose, onSelect, maxSelect, initialRegion, }) {
+    const [region, setRegion] = useState(initialRegion !== null && initialRegion !== void 0 ? initialRegion : MEDIA_REGIONS[0].query);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+    const [tagId, setTagId] = useState("");
+    const [tags, setTags] = useState([]);
+    const [page, setPage] = useState(1);
+    const [items, setItems] = useState([]);
+    const [hasMore, setHasMore] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [selected, setSelected] = useState(new Map());
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedSearchTerm(searchTerm), 300);
+        return () => clearTimeout(timer);
+    }, [searchTerm]);
+    // Reset transient state each time the picker opens
+    useEffect(() => {
+        if (open) {
+            setSelected(new Map());
+            setPage(1);
+            if (initialRegion)
+                setRegion(initialRegion);
+        }
+    }, [open, initialRegion]);
+    useEffect(() => {
+        if (!open)
+            return;
+        fetchMediaTags(region)
+            .then(setTags)
+            .catch(() => setTags([]));
+    }, [open, region]);
+    useEffect(() => {
+        setPage(1);
+    }, [region, debouncedSearchTerm, tagId]);
+    useEffect(() => {
+        if (!open)
+            return;
+        setLoading(true);
+        setError(null);
+        fetchMediaAssets({
+            region,
+            q: debouncedSearchTerm || undefined,
+            tagId: tagId || undefined,
+            page,
+            itemsPerPage: PAGE_SIZE,
+        })
+            .then(({ items, hasMore }) => {
+            setItems(items);
+            setHasMore(hasMore);
+        })
+            .catch(() => setError("Failed to load images"))
+            .finally(() => setLoading(false));
+    }, [open, region, debouncedSearchTerm, tagId, page]);
+    const tagsByType = useMemo(() => {
+        const grouped = new Map();
+        tags.forEach((tag) => {
+            if (!grouped.has(tag.type))
+                grouped.set(tag.type, []);
+            grouped.get(tag.type).push(tag);
+        });
+        return grouped;
+    }, [tags]);
+    const atMaxSelection = maxSelect !== undefined && selected.size >= maxSelect;
+    const toggleSelection = (item) => {
+        setSelected((prev) => {
+            const next = new Map(prev);
+            if (next.has(item.id)) {
+                next.delete(item.id);
+            }
+            else {
+                if (maxSelect === 1)
+                    next.clear();
+                else if (atMaxSelection)
+                    return prev;
+                next.set(item.id, item);
+            }
+            return next;
+        });
+    };
+    const handleConfirm = () => {
+        onSelect([...selected.values()].map(searchResultToMediaAsset));
+    };
+    const handleRegionChange = (_, value) => {
+        if (!value)
+            return;
+        setRegion(value);
+        setTagId("");
+    };
+    return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "lg", fullWidth: true },
+        React.createElement(DialogTitle, null, "Select Images"),
+        React.createElement(DialogContent, { dividers: true, sx: { minHeight: 480 } },
+            React.createElement(Box, { sx: { display: "flex", gap: 2, mb: 2, flexWrap: "wrap" } },
+                React.createElement(ToggleButtonGroup, { value: region, exclusive: true, onChange: handleRegionChange, size: "small" }, MEDIA_REGIONS.map((r) => (React.createElement(ToggleButton, { key: r.code, value: r.query }, r.label)))),
+                React.createElement(TextField, { size: "small", placeholder: "Search by title or filename", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), sx: { flexGrow: 1, minWidth: 220 }, InputProps: {
+                        startAdornment: (React.createElement(InputAdornment, { position: "start" },
+                            React.createElement(SearchIcon, { fontSize: "small" }))),
+                        endAdornment: searchTerm && (React.createElement(InputAdornment, { position: "end" },
+                            React.createElement(IconButton, { size: "small", onClick: () => setSearchTerm("") },
+                                React.createElement(ClearIcon, { fontSize: "small" })))),
+                    } }),
+                React.createElement(TextField, { select: true, size: "small", label: "Tag", value: tagId, onChange: (e) => setTagId(e.target.value === "" ? "" : Number(e.target.value)), sx: { minWidth: 180 } },
+                    React.createElement(MenuItem, { value: "" }, "All tags"),
+                    [...tagsByType.entries()].flatMap(([type, typeTags]) => [
+                        React.createElement(ListSubheader, { key: `header-${type}` }, type),
+                        ...typeTags.map((tag) => (React.createElement(MenuItem, { key: tag.id, value: tag.id }, tag.title))),
+                    ]))),
+            loading ? (React.createElement(Box, { sx: { display: "flex", justifyContent: "center", py: 8 } },
+                React.createElement(CircularProgress, null))) : error ? (React.createElement(Typography, { color: "error", sx: { py: 4, textAlign: "center" } }, error)) : items.length === 0 ? (React.createElement(Typography, { color: "text.secondary", sx: { py: 4, textAlign: "center" } }, "No images found")) : (React.createElement(Box, { sx: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+                    gap: 1.5,
+                } }, items.map((item) => {
+                const isSelected = selected.has(item.id);
+                const disabled = !isSelected && atMaxSelection && maxSelect !== 1;
+                return (React.createElement(Box, { key: item.id, onClick: () => !disabled && toggleSelection(item), sx: {
+                        position: "relative",
+                        cursor: disabled ? "not-allowed" : "pointer",
+                        borderRadius: 1,
+                        overflow: "hidden",
+                        outline: isSelected ? "3px solid" : "1px solid",
+                        outlineColor: isSelected ? "primary.main" : "divider",
+                        opacity: disabled ? 0.4 : 1,
+                    } },
+                    React.createElement("img", { src: buildImgixUrl({ assetId: item.id, filename: item.filename }, { w: 240, h: 160, fit: "crop", q: 40 }), alt: item.title, loading: "lazy", style: {
+                            width: "100%",
+                            height: 120,
+                            objectFit: "cover",
+                            display: "block",
+                        } }),
+                    isSelected && (React.createElement(CheckCircleIcon, { color: "primary", sx: {
+                            position: "absolute",
+                            top: 4,
+                            right: 4,
+                            bgcolor: "white",
+                            borderRadius: "50%",
+                        } })),
+                    React.createElement(Box, { sx: { p: 0.5 } },
+                        React.createElement(Typography, { variant: "caption", noWrap: true, display: "block" }, item.title),
+                        React.createElement(Typography, { variant: "caption", color: "text.secondary", noWrap: true, display: "block" }, item.width && item.height
+                            ? `${item.width} × ${item.height}`
+                            : item.filename))));
+            })))),
+        React.createElement(DialogActions, { sx: { justifyContent: "space-between", px: 3 } },
+            React.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1 } },
+                React.createElement(Button, { disabled: page <= 1 || loading, onClick: () => setPage(page - 1) }, "Previous"),
+                React.createElement(Typography, { variant: "body2" },
+                    "Page ",
+                    page),
+                React.createElement(Button, { disabled: !hasMore || loading, onClick: () => setPage(page + 1) }, "Next")),
+            React.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 2 } },
+                React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                    selected.size,
+                    " selected",
+                    maxSelect !== undefined && ` (max ${maxSelect})`),
+                React.createElement(Button, { onClick: onClose }, "Cancel"),
+                React.createElement(Button, { variant: "contained", disabled: selected.size === 0, onClick: handleConfirm }, "Select")))));
+}

package/dist/rendering/components/SwoopImage.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { MediaAsset } from "../types/mediaAsset";
+import { ImgixOptions } from "../util/imgix";
+export interface SwoopImageProps extends ImgixOptions {
+    asset: Pick<MediaAsset, "assetId" | "filename" | "title">;
+    alt?: string;
+    dprs?: number[];
+    style?: React.CSSProperties;
+    className?: string;
+    onClick?: () => void;
+}
+/**
+ * Unified image component for CMS media assets. Always renders a sized,
+ * compressed imgix URL (with a srcSet for high-DPI screens) so full-size
+ * originals are never downloaded.
+ */
+export declare const SwoopImage: React.FC<SwoopImageProps>;

package/dist/rendering/components/SwoopImage.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from "react";
+import { Box, Typography } from "@mui/material";
+import BrokenImageIcon from "@mui/icons-material/BrokenImage";
+import { buildImgixUrl, buildImgixSrcSet } from "../util/imgix";
+/**
+ * Unified image component for CMS media assets. Always renders a sized,
+ * compressed imgix URL (with a srcSet for high-DPI screens) so full-size
+ * originals are never downloaded.
+ */
+export const SwoopImage = (_a) => {
+    var _b;
+    var { asset, alt, dprs, style, className, onClick } = _a, imgixOptions = __rest(_a, ["asset", "alt", "dprs", "style", "className", "onClick"]);
+    const [errored, setErrored] = useState(false);
+    const src = buildImgixUrl(asset, imgixOptions);
+    if (!src || errored) {
+        return (React.createElement(Box, { className: className, style: style, onClick: onClick, sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                bgcolor: "grey.100",
+                color: "text.secondary",
+                width: imgixOptions.w,
+                height: imgixOptions.h,
+                minWidth: 60,
+                minHeight: 60,
+            } },
+            React.createElement(BrokenImageIcon, { fontSize: "small" }),
+            React.createElement(Typography, { variant: "caption" }, "Image unavailable")));
+    }
+    return (React.createElement("img", { className: className, src: src, srcSet: buildImgixSrcSet(asset, imgixOptions, dprs), alt: (_b = alt !== null && alt !== void 0 ? alt : asset.title) !== null && _b !== void 0 ? _b : "", width: imgixOptions.w, height: imgixOptions.h, loading: "lazy", style: Object.assign({ objectFit: "cover" }, style), onClick: onClick, onError: () => setErrored(true) }));
+};

package/dist/rendering/contexts/MediaPickerContext.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { MediaAsset } from "../types/mediaAsset";
+export interface MediaPickerGetOptions {
+    maxSelect?: number;
+    initialRegion?: string;
+}
+interface MediaPickerExports {
+    get: (options?: MediaPickerGetOptions) => Promise<MediaAsset[]>;
+}
+interface Props {
+    children?: React.ReactNode;
+}
+export declare const useMediaPicker: () => MediaPickerExports;
+export declare const MediaPickerProvider: React.FC<Props>;
+export {};

package/dist/rendering/contexts/MediaPickerContext.js

@@ -0,0 +1,49 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { createContext, useContext, useRef, useState } from "react";
+import MediaPickerModal from "../components/MediaPicker";
+const MediaPickerContext = createContext(undefined);
+export const useMediaPicker = () => {
+    const picker = useContext(MediaPickerContext);
+    if (!picker)
+        throw new Error("useMediaPicker used from outside MediaPickerProvider");
+    return picker;
+};
+export const MediaPickerProvider = ({ children }) => {
+    const [open, setOpen] = useState(false);
+    const [options, setOptions] = useState({});
+    const changeProp = useRef(() => { });
+    const closeProp = useRef(() => { });
+    const getSelectedAssets = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (getOptions = {}) {
+        setOptions(getOptions);
+        setOpen(true);
+        return new Promise((res, rej) => {
+            // In case of old refs being called (so i dont need to explicitly remove them)
+            let done = false;
+            changeProp.current = (assets) => {
+                if (done)
+                    return;
+                done = true;
+                res(assets);
+                setOpen(false);
+            };
+            closeProp.current = () => {
+                if (done)
+                    return;
+                done = true;
+                rej();
+                setOpen(false);
+            };
+        });
+    });
+    return (React.createElement(MediaPickerContext.Provider, { value: { get: getSelectedAssets } },
+        React.createElement(MediaPickerModal, { open: open, onClose: () => closeProp.current(), onSelect: (assets) => changeProp.current(assets), maxSelect: options.maxSelect, initialRegion: options.initialRegion }),
+        children));
+};

package/dist/rendering/index.d.ts

@@ -10,5 +10,10 @@ export { MasterSchema, Stage } from "./schema/formSchemaTypes";
 export { FORM_BUILDER_JSON_SCHEMA } from "./schema/formBuilders/formBuilderJsonSchema";
 export { FORM_BUILDER_UI_SCHEMA } from "./schema/formBuilders/formBuilderUiSchema";
 export * from "./contexts/ComponentPickerContext";
+export * from "./contexts/MediaPickerContext";
+export * from "./components/SwoopImage";
+export * from "./types/mediaAsset";
+export * from "./util/imgix";
+export { fetchMediaAssets, fetchMediaTags } from "./util/api";
 export * from "./consts/system";
 export * from "./consts/templateChipStyles";

package/dist/rendering/index.js

@@ -10,5 +10,10 @@ export { Stage } from "./schema/formSchemaTypes";
 export { FORM_BUILDER_JSON_SCHEMA } from "./schema/formBuilders/formBuilderJsonSchema";
 export { FORM_BUILDER_UI_SCHEMA } from "./schema/formBuilders/formBuilderUiSchema";
 export * from "./contexts/ComponentPickerContext";
+export * from "./contexts/MediaPickerContext";
+export * from "./components/SwoopImage";
+export * from "./types/mediaAsset";
+export * from "./util/imgix";
+export { fetchMediaAssets, fetchMediaTags } from "./util/api";
 export * from "./consts/system";
 export * from "./consts/templateChipStyles";

package/dist/rendering/prebuild/generated/import_generated.d.ts

@@ -6,6 +6,8 @@ import "../../renderers/Debug";
 import "../../renderers/Example";
 import "../../renderers/Image/ImageForm";
 import "../../renderers/Image/ImagePresentation";
+import "../../renderers/MediaGallery/MediaGalleryForm";
+import "../../renderers/MediaGallery/MediaGalleryPresentation";
 import "../../renderers/MultiEnum";
 import "../../renderers/NestedObjectArray";
 import "../../renderers/StagedText";

package/dist/rendering/prebuild/generated/import_generated.js

@@ -8,6 +8,8 @@ import "../../renderers/Debug";
 import "../../renderers/Example";
 import "../../renderers/Image/ImageForm";
 import "../../renderers/Image/ImagePresentation";
+import "../../renderers/MediaGallery/MediaGalleryForm";
+import "../../renderers/MediaGallery/MediaGalleryPresentation";
 import "../../renderers/MultiEnum";
 import "../../renderers/NestedObjectArray";
 import "../../renderers/StagedText";

package/dist/rendering/renderers/MediaGallery/MediaGalleryForm.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { MediaAsset } from "../../types/mediaAsset";
+export declare const FormMediaGallery: React.FC<{
+    value: MediaAsset[];
+    onChange: (assets: MediaAsset[]) => void;
+    label: string;
+    enabled: boolean;
+    maxItems?: number;
+}>;

package/dist/rendering/renderers/MediaGallery/MediaGalleryForm.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
+import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
+import ClearIcon from "@mui/icons-material/Clear";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { ComponentPool } from "../../registry/types";
+import { registerComponent } from "../../registry/components";
+import { useMediaPicker } from "../../contexts/MediaPickerContext";
+import { SwoopImage } from "../../components/SwoopImage";
+export const FormMediaGallery = ({ value, onChange, label, enabled, maxItems }) => {
+    const { get } = useMediaPicker();
+    const atMax = maxItems !== undefined && value.length >= maxItems;
+    const remaining = maxItems !== undefined ? maxItems - value.length : undefined;
+    const addImages = () => {
+        get({ maxSelect: remaining })
+            .then((assets) => {
+            // Skip assets already in the gallery
+            const existing = new Set(value.map((a) => a.assetId));
+            onChange([...value, ...assets.filter((a) => !existing.has(a.assetId))]);
+        })
+            .catch(() => { });
+    };
+    const removeAt = (index) => {
+        onChange(value.filter((_, i) => i !== index));
+    };
+    const moveTo = (index, target) => {
+        if (target < 0 || target >= value.length)
+            return;
+        const next = [...value];
+        [next[index], next[target]] = [next[target], next[index]];
+        onChange(next);
+    };
+    return (React.createElement(Paper, { sx: { p: 2, mb: 1 } },
+        React.createElement(Typography, { sx: { mb: 1 } }, label),
+        React.createElement(Box, { sx: { display: "flex", gap: 1.5, flexWrap: "wrap" } },
+            value.map((asset, index) => (React.createElement(Box, { key: asset.assetId, sx: { position: "relative", width: 160 } },
+                React.createElement(SwoopImage, { asset: asset, w: 160, h: 110, fit: "crop", q: 40, style: { borderRadius: 4, display: "block" } }),
+                React.createElement(Typography, { variant: "caption", noWrap: true, display: "block" }, asset.title),
+                enabled && (React.createElement(Box, { sx: {
+                        position: "absolute",
+                        top: 2,
+                        right: 2,
+                        display: "flex",
+                        bgcolor: "rgba(255,255,255,0.85)",
+                        borderRadius: 1,
+                    } },
+                    React.createElement(IconButton, { size: "small", disabled: index === 0, onClick: () => moveTo(index, index - 1) },
+                        React.createElement(ChevronLeftIcon, { fontSize: "small" })),
+                    React.createElement(IconButton, { size: "small", disabled: index === value.length - 1, onClick: () => moveTo(index, index + 1) },
+                        React.createElement(ChevronRightIcon, { fontSize: "small" })),
+                    React.createElement(IconButton, { size: "small", onClick: () => removeAt(index) },
+                        React.createElement(ClearIcon, { fontSize: "small" }))))))),
+            enabled && !atMax && (React.createElement(Button, { onClick: addImages, variant: "outlined", sx: {
+                    width: 160,
+                    height: 110,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 0.5,
+                    textTransform: "none",
+                } },
+                React.createElement(AddPhotoAlternateIcon, null),
+                value.length ? "Add more" : "Add images")))));
+};
+const FormRendererMediaGallery = ({ data, handleChange, path, label, enabled, schema, }) => {
+    const maxItems = schema.maxItems;
+    return (React.createElement(FormMediaGallery, { value: Array.isArray(data) ? data : [], onChange: (assets) => handleChange(path, assets), label: label, enabled: enabled, maxItems: maxItems }));
+};
+registerComponent("mediaGallery", FormRendererMediaGallery, ComponentPool.FORM);

package/dist/rendering/renderers/MediaGallery/MediaGalleryPresentation.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/rendering/renderers/MediaGallery/MediaGalleryPresentation.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { ComponentPool } from "../../registry/types";
+import { registerComponent } from "../../registry/components";
+import { SwoopImage } from "../../components/SwoopImage";
+const PresentationMediaGallery = ({ data, label }) => {
+    const assets = Array.isArray(data) ? data : [];
+    if (!assets.length)
+        return null;
+    return (React.createElement(Box, { sx: { mb: 2 } },
+        label && React.createElement(Typography, { sx: { mb: 1 } }, label),
+        React.createElement(Box, { sx: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+                gap: 1.5,
+            } }, assets.map((asset) => (React.createElement(Box, { key: asset.assetId },
+            React.createElement(SwoopImage, { asset: asset, w: 480, h: 320, fit: "crop", style: { width: "100%", height: "auto", borderRadius: 4 } }),
+            asset.caption && (React.createElement(Typography, { variant: "caption", color: "text.secondary" }, asset.caption))))))));
+};
+registerComponent("mediaGallery", PresentationMediaGallery, ComponentPool.PRESENTATION);

package/dist/rendering/schema/generate/jsonSchemaGenerate.js

@@ -94,6 +94,11 @@ const defaultConverter = (field, stage, omitTitle, isChild) => {
         : {};
     let title = omitTitle ? undefined : field.name;
     let isReadonly = !isChild && !field.editableIn.map(Number).includes(stage);
+    // The generic path below drops the registered schema's `items`, so array-of-object
+    // types need their full registered schema spread in
+    if (field.fieldType === "mediaGallery") {
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, (isReadonly && { readOnly: true })), { title }), schema.schema), directOptions);
+    }
     if (field.fieldType === "operator") {
         return Object.assign(Object.assign({}, (isReadonly && { readOnly: true })), { title, type: "array", "x-type": "operator", items: { type: "string" }, uniqueItems: true });
     }

package/dist/rendering/type_registration/register.js

@@ -144,6 +144,30 @@ registerType("address", "Address", {
     required: ["line1", "city", "postcode"],
 }, {}, false);
 registerType("image", "Image", { type: "string" }, {}, false);
+registerType("mediaGallery", "Images (CMS)", {
+    type: "array",
+    items: {
+        type: "object",
+        properties: {
+            assetId: { type: "string" },
+            type: { type: "string", enum: ["image"] },
+            filename: { type: "string" },
+            title: { type: "string" },
+            caption: { type: "string" },
+            width: { type: "integer" },
+            height: { type: "integer" },
+        },
+        required: ["assetId", "type", "filename"],
+        additionalProperties: false,
+    },
+}, {
+    type: "object",
+    title: "Image Options",
+    properties: {
+        minItems: { type: "integer", minimum: 0 },
+        maxItems: { type: "integer", minimum: 1 },
+    },
+}, false);
 registerType("person", "Person (Swooper)", { type: "string" }, {
     type: "object",
     title: "Person Options",

package/dist/rendering/types/mediaAsset.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A CMS media asset snapshot as stored in component field data.
+ * The assetId is a region-prefixed legacy CMS image ID (e.g. "ANT-123") kept
+ * for future syncing; the remaining fields let consumers render the image
+ * without an API lookup (URLs are built from filename via imgix helpers).
+ */
+export interface MediaAsset {
+    assetId: string;
+    type: "image";
+    filename: string;
+    title: string;
+    caption?: string;
+    width?: number;
+    height?: number;
+}
+export interface MediaTag {
+    id: number;
+    title: string;
+    alias: string;
+    type: string;
+}
+/** Shape returned by swoop-data's GET /api/media-assets */
+export interface MediaAssetSearchResult {
+    id: string;
+    type: string;
+    title: string;
+    caption?: string;
+    filename: string;
+    width?: number;
+    height?: number;
+    credit?: string;
+    copyright?: string;
+    qualityRating?: number;
+    resolutionRating?: number;
+}
+export declare const searchResultToMediaAsset: (result: MediaAssetSearchResult) => MediaAsset;
+/** Regions with media libraries. Arctic is excluded — no longer managed. */
+export declare const MEDIA_REGIONS: readonly [{
+    readonly code: "ANT";
+    readonly label: "Antarctica";
+    readonly query: "antarctica";
+}, {
+    readonly code: "PAT";
+    readonly label: "Patagonia";
+    readonly query: "patagonia";
+}];
+export type MediaRegionCode = (typeof MEDIA_REGIONS)[number]["code"];

package/dist/rendering/types/mediaAsset.js

@@ -0,0 +1,6 @@
+export const searchResultToMediaAsset = (result) => (Object.assign(Object.assign(Object.assign({ assetId: result.id, type: "image", filename: result.filename, title: result.title }, (result.caption && { caption: result.caption })), (result.width && { width: result.width })), (result.height && { height: result.height })));
+/** Regions with media libraries. Arctic is excluded — no longer managed. */
+export const MEDIA_REGIONS = [
+    { code: "ANT", label: "Antarctica", query: "antarctica" },
+    { code: "PAT", label: "Patagonia", query: "patagonia" },
+];

package/dist/rendering/util/api.d.ts

@@ -1,4 +1,5 @@
 import { DTOComponentRead, Pagination } from "../../api/generated/core/exports";
+import { MediaAssetSearchResult, MediaTag } from "../types/mediaAsset";
 export declare const getAllPartners: () => Promise<any[]>;
 export declare const fetchComponents: (filters?: Record<string, string>) => Promise<{
     data: Array<DTOComponentRead & {
@@ -6,4 +7,15 @@ export declare const fetchComponents: (filters?: Record<string, string>) => Prom
     }>;
     pagination: Pagination;
 }>;
+export declare const fetchMediaAssets: (params: {
+    region: string;
+    q?: string;
+    tagId?: number;
+    page?: number;
+    itemsPerPage?: number;
+}) => Promise<{
+    items: MediaAssetSearchResult[];
+    hasMore: boolean;
+}>;
+export declare const fetchMediaTags: (region: string) => Promise<MediaTag[]>;
 export declare const getComponentsByIds: (componentIds: string[]) => Promise<DTOComponentRead[]>;

package/dist/rendering/util/api.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { OpenAPI } from "../../api/generated/core";
+import { OpenAPI as SwoopOpenAPI } from "../../api/generated/swoop";
 import { InternalServices } from "../../api/init";
 const Regions = ["patagonia", "arctic", "antarctica"];
 export const getAllPartners = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -50,6 +51,48 @@ export const fetchComponents = (filters) => __awaiter(void 0, void 0, void 0, fu
     });
     return { data: latestComponents, pagination: data.pagination };
 });
+const resolveSwoopToken = () => __awaiter(void 0, void 0, void 0, function* () {
+    const token = SwoopOpenAPI.TOKEN;
+    return typeof token === "function"
+        ? yield token({})
+        : token;
+});
+export const fetchMediaAssets = (params) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const itemsPerPage = (_a = params.itemsPerPage) !== null && _a !== void 0 ? _a : 30;
+    const query = new URLSearchParams({ region: params.region });
+    if (params.q)
+        query.set("q", params.q);
+    if (params.tagId)
+        query.set("tagId", String(params.tagId));
+    query.set("page", String((_b = params.page) !== null && _b !== void 0 ? _b : 1));
+    query.set("itemsPerPage", String(itemsPerPage));
+    const token = yield resolveSwoopToken();
+    const response = yield fetch(`${SwoopOpenAPI.BASE}/api/media-assets?${query}`, {
+        headers: {
+            Authorization: `Bearer ${token}`,
+            Accept: "application/ld+json",
+        },
+    });
+    if (!response.ok)
+        throw new Error(`Failed to fetch media assets: ${response.status}`);
+    const data = yield response.json();
+    const items = (data.member || []);
+    return { items, hasMore: items.length === itemsPerPage };
+});
+export const fetchMediaTags = (region) => __awaiter(void 0, void 0, void 0, function* () {
+    const token = yield resolveSwoopToken();
+    const response = yield fetch(`${SwoopOpenAPI.BASE}/api/media-tags?region=${encodeURIComponent(region)}`, {
+        headers: {
+            Authorization: `Bearer ${token}`,
+            Accept: "application/json",
+        },
+    });
+    if (!response.ok)
+        throw new Error(`Failed to fetch media tags: ${response.status}`);
+    const data = yield response.json();
+    return (data.mediaTags || []);
+});
 export const getComponentsByIds = (componentIds) => __awaiter(void 0, void 0, void 0, function* () {
     const uniqueIds = Array.from(new Set(componentIds.filter(Boolean)));
     if (!uniqueIds.length)

package/dist/rendering/util/imgix.d.ts

@@ -0,0 +1,26 @@
+import { MediaAsset, MediaRegionCode } from "../types/mediaAsset";
+/**
+ * Canonical imgix source domains per region. CMS-migrated files sit at the
+ * bucket root, so a full URL is https://{domain}/{filename}?{params}.
+ */
+export declare const IMGIX_DOMAINS: Record<MediaRegionCode, string>;
+export interface ImgixOptions {
+    w?: number;
+    h?: number;
+    q?: number;
+    dpr?: number;
+    fit?: "crop" | "clip" | "max" | "min" | "scale" | "fill" | "facearea";
+    crop?: string;
+    auto?: string;
+}
+export declare const regionFromAssetId: (assetId: string) => MediaRegionCode | undefined;
+/** Build a sized imgix URL for a CMS media asset. */
+export declare const buildImgixUrl: (asset: Pick<MediaAsset, "assetId" | "filename">, opts?: ImgixOptions) => string;
+export declare const buildImgixSrcSet: (asset: Pick<MediaAsset, "assetId" | "filename">, opts?: ImgixOptions, dprs?: number[]) => string;
+/**
+ * Apply imgix sizing params to an existing full image URL (replaces any
+ * query string already present). For assets that are stored as plain URLs
+ * rather than MediaAsset objects.
+ */
+export declare const withImgixParams: (src: string, opts?: ImgixOptions) => string;
+export declare const imgixSrcSetFromUrl: (src: string, opts?: ImgixOptions, dprs?: number[]) => string;

package/dist/rendering/util/imgix.js

@@ -0,0 +1,48 @@
+/**
+ * Canonical imgix source domains per region. CMS-migrated files sit at the
+ * bucket root, so a full URL is https://{domain}/{filename}?{params}.
+ */
+export const IMGIX_DOMAINS = {
+    ANT: "imgix.swoop-antarctica.com",
+    PAT: "imgix.swoop-patagonia.com",
+};
+const IMGIX_DEFAULTS = { auto: "format,compress", q: 60 };
+export const regionFromAssetId = (assetId) => {
+    var _a;
+    const prefix = (_a = assetId === null || assetId === void 0 ? void 0 : assetId.split("-")[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    return prefix && prefix in IMGIX_DOMAINS
+        ? prefix
+        : undefined;
+};
+const buildImgixParams = (opts) => {
+    const merged = Object.assign(Object.assign({}, IMGIX_DEFAULTS), opts);
+    const params = new URLSearchParams();
+    Object.entries(merged).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "")
+            params.set(key, String(value));
+    });
+    return params.toString();
+};
+/** Build a sized imgix URL for a CMS media asset. */
+export const buildImgixUrl = (asset, opts) => {
+    const region = regionFromAssetId(asset.assetId);
+    if (!region || !asset.filename)
+        return "";
+    return `https://${IMGIX_DOMAINS[region]}/${encodeURIComponent(asset.filename)}?${buildImgixParams(opts)}`;
+};
+export const buildImgixSrcSet = (asset, opts, dprs = [1, 2]) => dprs
+    .map((dpr) => `${buildImgixUrl(asset, Object.assign(Object.assign({}, opts), { dpr }))} ${dpr}x`)
+    .join(", ");
+/**
+ * Apply imgix sizing params to an existing full image URL (replaces any
+ * query string already present). For assets that are stored as plain URLs
+ * rather than MediaAsset objects.
+ */
+export const withImgixParams = (src, opts) => {
+    if (!src)
+        return src;
+    return `${src.split("?")[0]}?${buildImgixParams(opts)}`;
+};
+export const imgixSrcSetFromUrl = (src, opts, dprs = [1, 2]) => dprs
+    .map((dpr) => `${withImgixParams(src, Object.assign(Object.assign({}, opts), { dpr }))} ${dpr}x`)
+    .join(", ");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "swoop-common",
-    "version": "2.2.212",
+    "version": "2.2.213",
     "main": "dist/api/index.js",
     "types": "dist/api/index.d.ts",
     "exports": {