@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/fields/asset/AssetEditor.js

@@ -0,0 +1,213 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const client_1 = require("../../../client");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const transitions_1 = require("../../transitions");
+const FieldEditor_1 = require("../FieldEditor");
+const FieldErrorController_1 = require("../FieldErrorController");
+const OptInField_1 = require("../OptInField");
+const AssetPreview_1 = require("./AssetPreview");
+const AssetSpecs_1 = require("./AssetSpecs");
+const useAssetFields_1 = require("./useAssetFields");
+// components
+exports.AssetEditor = (0, react_2.forwardRef)(function AssetEditor(_, ref) {
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_2.useState)(undefined);
+    const [result, setResult] = (0, react_2.useState)();
+    const [schema, setSchema] = (0, react_2.useState)();
+    const [asset, setAsset] = (0, react_2.useState)();
+    const [anchor, setAnchor] = (0, react_2.useState)();
+    const [errorLevel, setErrorLevel] = (0, react_2.useState)('none');
+    const [error, setError] = (0, react_2.useState)();
+    const { nameField, anchorField, accessibleField, descriptionField } = (0, useAssetFields_1.useAssetFields)();
+    const [shared, setShared] = (0, react_2.useState)(false);
+    const editorApi = (0, client_1.useEditorApi)();
+    const assetStore = (0, hooks_1.useAssetStore)();
+    const { valid, modified } = checkFields({ asset, nameField, anchorField, accessibleField, descriptionField, shared });
+    // export service
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        edit: async ({ schema, asset, anchor }) => {
+            // reset state
+            setSchema(schema);
+            setAsset(asset);
+            setAnchor(anchor);
+            setErrorLevel('none');
+            setError(undefined);
+            setShared(asset.scope === 'global');
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // sync fields
+    (0, react_2.useEffect)(() => {
+        // skip if there's no asset
+        if (!asset) {
+            return;
+        }
+        // bind fields to asset
+        nameField.reset(funnel_core_1.Schema.TextField.Value.toData(asset.name));
+        descriptionField.reset(asset.description ? funnel_core_1.Schema.TextField.Value.toData(asset.description) : null);
+        if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {
+            anchorField.reset(funnel_core_1.Schema.EnumField.Value.toData(asset.metadata.crop));
+        }
+        else if (funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
+            anchorField.reset(funnel_core_1.Schema.EnumField.Value.toData(asset.metadata.crop));
+            const accessible = asset.metadata.accessible;
+            accessibleField.reset(funnel_core_1.Schema.EnumField.Value.toData(accessible === 'system'
+                ? accessible
+                : accessible
+                    ? 'true'
+                    : 'false'));
+        }
+    }, [asset, nameField, anchorField, accessibleField, descriptionField]);
+    // helpers
+    const onValidate = () => {
+        // update error level
+        setErrorLevel('all');
+        // return validity
+        return valid;
+    };
+    const onUpdate = async () => {
+        var _a;
+        // fail there's no asset (shouldn't happen)
+        if (!schema || !asset) {
+            console.error('[AssetEditor] unable to resolve asset');
+            throw new funnel_core_1.InvalidOperationError('Unable to resolve AssetInfo instance');
+        }
+        // handle update
+        try {
+            // create meta
+            const metadata = await getAssetMetadata({ asset, anchorField, accessibleField });
+            console.debug('[AssetEditor/onUpdate] updating asset', { asset, metadata });
+            // upload new file
+            const updatedAsset = await editorApi.updateAsset({
+                id: asset.id,
+                name: (_a = funnel_core_1.Schema.TextField.Value.fromData(nameField.value)) !== null && _a !== void 0 ? _a : asset.name,
+                description: descriptionField.exists
+                    ? funnel_core_1.Schema.TextField.Value.fromData(descriptionField.value)
+                    : null,
+                scope: shared
+                    ? funnel_core_1.Schema.GlobalAssetScope.instance.data
+                    : assetStore.getAssetScope(schema.scope).data,
+                tags: schema.tags.map(tag => tag.data),
+                metadata
+            });
+            // store asset
+            assetStore.addAsset(updatedAsset);
+            // complete
+            setResult(updatedAsset.value);
+            console.debug('[AssetEditor/upload] completed upload');
+        }
+        // handle errors
+        catch (e) {
+            console.error('[AssetEditor/upload] file upload failure', e);
+            setError(feedback_1.ErrorMessage.getGenericError((e instanceof Error) ? e : new funnel_core_1.ServerError()));
+        }
+    };
+    const onCancel = () => {
+        // set result (triggers uploader to close)
+        setResult(null);
+    };
+    const onPickerClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // skip if we don't have any params
+    if (!deferral || !schema) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { className: "flex flex-col gap-l8", title: "Edit Asset", open: result === undefined, placement: "right", anchor: anchor, anchorOffset: 4, canSave: onValidate, disableSave: !valid || !modified, renderSaveLabel: state => state === 'saving' ? 'Updating...' : 'Update', onSave: onUpdate, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }), schema.description && !error &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: schema.description }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('relative h-[210px] overflow-hidden', 'border border-solid border-border-l2 rounded-md'), children: [(0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { asset: asset }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-x-0 bottom-l5 z-overlay pointer-events-none', 'flex flex-col justify-center items-center px-l6'), children: (0, jsx_runtime_1.jsx)(AssetSpecs_1.AssetSpecs, { asset: asset }) })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderFields({ asset, nameField, anchorField, descriptionField, accessibleField, shared, setShared }) }) })] }));
+});
+async function getAssetMetadata({ asset, anchorField, accessibleField }) {
+    var _a;
+    const { type, metadata } = asset;
+    switch (funnel_core_1.FileType.coerce(type)) {
+        case 'image':
+            return Object.assign(Object.assign({}, metadata), { crop: funnel_core_1.Schema.EnumField.Value.fromData(anchorField.value) });
+        case 'video': {
+            const accessible = (_a = funnel_core_1.Schema.EnumField.Value.fromData(accessibleField.value)) !== null && _a !== void 0 ? _a : 'system';
+            return Object.assign(Object.assign({}, metadata), { crop: funnel_core_1.Schema.EnumField.Value.fromData(anchorField.value), accessible: accessible === 'system'
+                    ? 'system'
+                    : accessible === 'true' });
+        }
+        default:
+            return metadata;
+    }
+}
+function checkFields({ asset, nameField, anchorField, accessibleField, descriptionField, shared }) {
+    // skip if there's no asset
+    if (!asset) {
+        return { valid: false, modified: false };
+    }
+    // validate
+    const fieldType = funnel_core_1.FileType.coerce(asset.type);
+    const isVisual = fieldType === 'image' || fieldType === 'icon' || fieldType === 'video';
+    let valid = nameField.valid;
+    if (valid && isVisual) {
+        valid = anchorField.valid &&
+            (!descriptionField.exists || descriptionField.valid);
+        console.debug('[checkFields]', descriptionField);
+    }
+    // check if modified
+    let modified = (asset.scope === 'global') !== shared
+        || nameField.modified
+        || descriptionField.modified;
+    if (!modified && isVisual) {
+        modified = anchorField.modified
+            || (fieldType === 'video' && accessibleField.modified);
+    }
+    console.debug('[checkFields]', { valid, modified });
+    // return validity
+    return {
+        valid,
+        modified
+    };
+}
+function renderFields({ asset, nameField, anchorField, descriptionField, accessibleField, shared, setShared }) {
+    // skip if there's no asset
+    if (!asset) {
+        return null;
+    }
+    // build fields
+    const fields = [
+        (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: nameField }, "name")
+    ];
+    // add fields related to visuals
+    const fieldType = funnel_core_1.FileType.coerce(asset.type);
+    const isVisual = fieldType === 'image' || fieldType === 'icon' || fieldType === 'video';
+    if (isVisual) {
+        // add anchor
+        fields.push((0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: anchorField }, "anchor"));
+        // add accessible flag (for videos)
+        if (fieldType === 'video') {
+            fields.push((0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: accessibleField }, "accessible"));
+        }
+        // get description
+        fields.push(descriptionField.exists
+            ? (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: descriptionField }, "desc")
+            : (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { field: descriptionField }, "desc.option"));
+    }
+    // render editing fields
+    return ((0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "flex flex-col gap-l8", children: [fields, (0, jsx_runtime_1.jsx)(interaction_1.Checkbox, { checked: shared, onChange: setShared, children: "Store in global media library" })] }, "fields"));
+}

package/dist/core/components/fields/asset/AssetInfo.d.ts

@@ -0,0 +1,48 @@
+import { AspectRatio, ByteSize, FileType, MimeType, Size } from '@nascentdigital/funnel-core';
+export declare class AssetInfo {
+    readonly options: AssetInfo.Options;
+    readonly file: Blob;
+    readonly fileName: string;
+    readonly fileExtension: string;
+    readonly mimeType: MimeType;
+    readonly size: number;
+    readonly sizeComponents: ByteSize.Components;
+    readonly dimensions?: Size;
+    readonly aspectRatio?: AspectRatio;
+    readonly blurHash?: string;
+    private _error?;
+    constructor(args: AssetInfo.ConstructorArgs);
+    get isValid(): boolean;
+    get error(): string | undefined;
+    get fileType(): FileType;
+    get isVisual(): boolean;
+    get isVideo(): boolean;
+    get sizeLabel(): string;
+    get dimensionLabel(): string | undefined;
+    private validate;
+}
+export declare namespace AssetInfo {
+    type Options = {
+        allowedTypes: ReadonlyArray<MimeType>;
+        minSize?: number;
+        maxSize?: number;
+        minWidth: number;
+        maxWidth: number;
+        minHeight: number;
+        maxHeight: number;
+        aspectRatio?: AspectRatio;
+    };
+    namespace Options {
+        function normalize({ allowedTypes, minWidth, minHeight, maxWidth, maxHeight, ...options }: Partial<Options>): Options;
+    }
+    type ConstructorArgs = {
+        options: Options;
+        file: Blob;
+        fileName: string;
+        fileExtension: string;
+        mimeType: MimeType;
+        size: number;
+        dimensions?: Size;
+        blurHash?: string;
+    };
+}

package/dist/core/components/fields/asset/AssetInfo.js

@@ -0,0 +1,116 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetInfo = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+// class
+class AssetInfo {
+    constructor(args) {
+        // initialize instance variables
+        this.options = args.options;
+        this.file = args.file;
+        this.fileName = args.fileName;
+        this.fileExtension = args.fileExtension;
+        this.mimeType = args.mimeType;
+        this.size = args.size;
+        this.sizeComponents = new funnel_core_1.ByteSize(args.size).components();
+        this.dimensions = args.dimensions;
+        this.aspectRatio = args.dimensions
+            ? new funnel_core_1.AspectRatio(args.dimensions)
+            : undefined;
+        this.blurHash = args.blurHash;
+        // validate
+        this.validate();
+    }
+    get isValid() {
+        return !this._error;
+    }
+    get error() {
+        return this._error;
+    }
+    get fileType() {
+        return funnel_core_1.FileType.coerce(this.mimeType);
+    }
+    get isVisual() {
+        switch (this.fileType) {
+            case 'image':
+            case 'video':
+            case 'icon':
+                return true;
+            default:
+                return false;
+        }
+    }
+    get isVideo() {
+        return this.fileType === 'video';
+    }
+    get sizeLabel() {
+        const { sizeComponents } = this;
+        return `${sizeComponents.size}${sizeComponents.units}`;
+    }
+    get dimensionLabel() {
+        const { dimensions } = this;
+        return dimensions
+            ? `${dimensions.width}×${dimensions.height}px`
+            : undefined;
+    }
+    validate() {
+        // get options
+        const { mimeType, size, dimensions, aspectRatio, options } = this;
+        const { allowedTypes, minSize, maxSize, minWidth, maxWidth, minHeight, maxHeight, aspectRatio: targetAspectRatio } = options;
+        // validate mime-type
+        if (!allowedTypes.includes(mimeType)) {
+            this._error = `No support for ${mimeType}`;
+        }
+        // validate min size
+        else if (minSize && size < minSize) {
+            const components = new funnel_core_1.ByteSize(minSize).components();
+            this._error = `File must be at least ${components.size}${components.units}`;
+        }
+        // validate max size
+        else if (maxSize && size > maxSize) {
+            const components = new funnel_core_1.ByteSize(maxSize).components();
+            this._error = `File can't be more than ${components.size}${components.units}`;
+        }
+        // validate min dimensions
+        else if (dimensions && (dimensions.width < minWidth || dimensions.height < minHeight)) {
+            this._error = `File must be larger than ${minWidth}×${minHeight}px`;
+        }
+        // validate max dimensions
+        else if (dimensions && (dimensions.width > maxWidth || dimensions.height > maxHeight)) {
+            this._error = `File can't be larger than ${maxWidth}×${maxHeight}px`;
+        }
+        // validate aspect ratio
+        else if (aspectRatio && targetAspectRatio && !aspectRatio.isSimilarTo(targetAspectRatio)) {
+            this._error = `File must have an aspect ratio of ${aspectRatio.toString()}`;
+        }
+        // otherwise, we're good
+        else {
+            delete this._error;
+        }
+    }
+}
+exports.AssetInfo = AssetInfo;
+// extension
+(function (AssetInfo) {
+    let Options;
+    (function (Options) {
+        function normalize(_a) {
+            var { allowedTypes, minWidth, minHeight, maxWidth, maxHeight } = _a, options = __rest(_a, ["allowedTypes", "minWidth", "minHeight", "maxWidth", "maxHeight"]);
+            const minDimension = 16;
+            const maxDimension = 1920;
+            return Object.assign(Object.assign({}, options), { allowedTypes: (allowedTypes !== null && allowedTypes !== void 0 ? allowedTypes : funnel_core_1.MimeType.any).slice(), minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : minDimension, minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : minDimension, maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : maxDimension, maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : maxDimension });
+        }
+        Options.normalize = normalize;
+    })(Options = AssetInfo.Options || (AssetInfo.Options = {}));
+})(AssetInfo || (exports.AssetInfo = AssetInfo = {}));

package/dist/core/components/fields/asset/AssetPicker.d.ts

@@ -0,0 +1,12 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare const AssetPicker: import("react").ForwardRefExoticComponent<import("react").RefAttributes<AssetPicker.Ref>>;
+export declare namespace AssetPicker {
+    type Props = {};
+    interface Ref {
+        pick(options: Options): Promise<Result>;
+    }
+    type Options = {
+        schema: Schema.AssetField;
+    };
+    type Result = Schema.Field.LinkedData<Schema.AssetField> | 'upload' | undefined;
+}

package/dist/core/components/fields/asset/AssetPicker.js

@@ -0,0 +1,218 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const client_1 = require("../../../client");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const transitions_1 = require("../../transitions");
+const AssetPreview_1 = require("./AssetPreview");
+// component
+exports.AssetPicker = (0, react_1.forwardRef)(function AssetPicker(_, ref) {
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [result, setResult] = (0, react_1.useState)();
+    const [schema, setSchema] = (0, react_1.useState)();
+    const [assets, setAssets] = (0, react_1.useState)();
+    const [fileTypeFilters, setFileTypeFilters] = (0, react_1.useState)([]);
+    const [tagFilters, setTagFilters] = (0, react_1.useState)([]);
+    const [globalFilter, setGlobalFilter] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)();
+    const editorApi = (0, client_1.useEditorApi)();
+    const assetStore = (0, hooks_1.useAssetStore)();
+    const fileTypes = (0, react_1.useMemo)(() => getFileTypeOptions(schema), [schema]);
+    const tags = (0, react_1.useMemo)(() => getTagOptions(schema, assets), [schema, assets]);
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        pick: async ({ schema }) => {
+            // reset state
+            setSchema(schema);
+            setAssets(undefined);
+            setFileTypeFilters([]);
+            setTagFilters([]);
+            setGlobalFilter(true);
+            setError(undefined);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // load files on mount
+    (0, react_1.useEffect)(() => {
+        // ignore if there's no schema
+        if (!schema) {
+            return;
+        }
+        const scope = assetStore.getSearchScope();
+        console.debug('[AssetPicker] fetching files for', { fileTypes, tag: schema.tags, scope });
+        // fetch files
+        editorApi
+            .getAssets({
+            fileType: fileTypes,
+            scope: assetStore.getSearchScope(),
+            tags: schema.tags.map(funnel_core_1.Schema.Tag.toData),
+            pagination: 'all',
+        })
+            .then(({ items }) => {
+            setAssets(items);
+        })
+            .catch(e => {
+            setError(feedback_1.ErrorMessage.coerce(e));
+        });
+    }, [editorApi, assetStore, schema, fileTypes]);
+    // helpers
+    const onPick = (asset) => {
+        // store asset (if not switching to uploader)
+        if (asset !== 'upload') {
+            assetStore.addAsset(Object.assign({ __root: 'asset' }, asset));
+        }
+        // set result (triggers picker to close)
+        setResult(asset);
+    };
+    const onCancel = () => {
+        // set result (triggers picker to close)
+        setResult(null);
+    };
+    const onPickerClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Media" }), fileTypes.length > 1 &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Asset Type", multiselect: true, options: fileTypes, selectedOptions: fileTypeFilters, onToggle: (fileType, selected) => setFileTypeFilters(filters => selected
+                                ? [...filters, fileType]
+                                : filters.filter(filter => filter !== fileType)), onToggleAll: () => setFileTypeFilters([]), renderLabel: filter => funnel_core_1.StringUtils.capitalize(filter) }), tags.length > 1 &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Tags", multiselect: true, options: tags, selectedOptions: tagFilters, onToggle: (tag, selected) => setTagFilters(tags => selected
+                                ? [...tags, tag]
+                                : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters([]), renderLabel: tag => VisualTag.getName(tag) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Checkbox, { className: "shrink-0", checked: globalFilter, onChange: setGlobalFilter, children: "Include Library Items" })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ schema, error, assets, fileTypeFilters, tagFilters, onPick }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center p-l8 border-t border-solid border-border-l1", children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", iconLeft: "Upload", disabled: assets === undefined, onClick: () => onPick('upload'), children: "Upload new asset" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" })] })] })] }));
+});
+function getFileTypeOptions(schema) {
+    // skip if there's no schema
+    if (!schema) {
+        return [];
+    }
+    // or reduce down to file type options
+    return schema.mimeTypes.values()
+        .reduce((fileTypes, mimeType) => {
+        // coerce the mime -> file type
+        const fileType = funnel_core_1.FileType.coerce(mimeType);
+        // add file if it's not in the set
+        if (!fileTypes.includes(fileType)) {
+            fileTypes.push(fileType);
+            fileTypes.sort(funnel_core_1.FileType.compare);
+        }
+        // keep reducing
+        return fileTypes;
+    }, []);
+}
+var VisualTag;
+(function (VisualTag) {
+    function forSchema(schema) {
+        // skip if there's no schema
+        if (!schema) {
+            return [];
+        }
+        // use specified tags, or all tags if there's no definition
+        let tags = schema.tags.filter(isVisualTags);
+        if (tags.length === 0) {
+            tags = [
+                ...Object.values(funnel_core_1.Schema.AssetField.Tags.image.tags),
+                ...Object.values(funnel_core_1.Schema.AssetField.Tags.video.tags)
+            ];
+        }
+        // reduce down to unique tags
+        const uniqueTags = new Set();
+        tags.forEach(tag => uniqueTags.add(tag.id));
+        return uniqueTags.values().toArray();
+    }
+    VisualTag.forSchema = forSchema;
+    function getName(tag) {
+        var _a, _b, _c, _d;
+        return (_d = (_b = (_a = funnel_core_1.Schema.AssetField.Tags.image.get(tag)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = funnel_core_1.Schema.AssetField.Tags.video.get(tag)) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : tag;
+    }
+    VisualTag.getName = getName;
+    function isVisualTags(tag) {
+        return tag.groupId === funnel_core_1.Schema.AssetField.Tags.image.id
+            || tag.groupId === funnel_core_1.Schema.AssetField.Tags.video.id;
+    }
+    VisualTag.isVisualTags = isVisualTags;
+})(VisualTag || (VisualTag = {}));
+function getTagOptions(schema, files) {
+    // skip if there's no schema OR no files
+    if (!schema || !files || files.length === 0) {
+        return [];
+    }
+    // first, get the options fot the schema
+    const tags = VisualTag.forSchema(schema);
+    // then determine tags in files
+    const fileTags = files.reduce((fileTags, file) => {
+        var _a, _b;
+        // add all tags associated with the file
+        const tags = (_b = (_a = file.value) === null || _a === void 0 ? void 0 : _a.tags) !== null && _b !== void 0 ? _b : [];
+        tags.forEach(tag => {
+            var _a;
+            const tagId = (_a = funnel_core_1.Schema.Tag.Data.parse(tag)) === null || _a === void 0 ? void 0 : _a.tagId;
+            if (tagId) {
+                fileTags.add(tagId);
+            }
+        });
+        // keep reducing
+        return fileTags;
+    }, new Set());
+    // then reduce to the ones available in the files
+    return tags.filter(tag => fileTags.has(tag));
+}
+function renderPicker({ schema, error, assets, fileTypeFilters, tagFilters, onPick }) {
+    // show error if we have one
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }) }, "error"));
+    }
+    // or show loader if there are no items
+    else if (!schema || !assets) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "w-full h-full flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "lg" }) }, "loader"));
+    }
+    // show empty state if there are no assets
+    else if (assets.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-wrap justify-center items-center", children: (0, jsx_runtime_1.jsxs)(feedback_1.EmptyState, { variant: "missing", size: "sm", children: [(0, jsx_runtime_1.jsxs)("p", { className: "body-md text-content-secondary text-pretty", children: ["We couldn't find any media suitable for the ", (0, jsx_runtime_1.jsx)("span", { className: "body-strong", children: schema.name }), " field."] }), (0, jsx_runtime_1.jsxs)("p", { className: "body-md text-content-secondary text-pretty", children: ["Please", (0, jsx_runtime_1.jsx)(interaction_1.Button, { className: "mx-l3", variant: "secondary", size: "xs", onClick: () => onPick('upload'), children: "Upload" }), "a new file to get started."] })] }) }, "assets.empty"));
+    }
+    // or show items (filtered)
+    else {
+        // filter assets
+        const filteredAssets = assets.filter(asset => {
+            const { type, tags = [] } = asset.value;
+            const tagIds = tags
+                .map(tag => { var _a; return (_a = funnel_core_1.Schema.Tag.Data.parse(tag)) === null || _a === void 0 ? void 0 : _a.tagId; })
+                .filter(funnel_core_1.Value.isDefined);
+            return (fileTypeFilters.length === 0 || fileTypeFilters.includes(funnel_core_1.FileType.coerce(type)))
+                && (tagFilters.length === 0 || tagIds.some(tag => tagFilters.includes(tag)));
+        });
+        // render empty list if there are no items
+        if (filteredAssets.length === 0) {
+            return ((0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "h-full flex flex-col items-center justify-center gap-l5 px-l10", variant: "blur", children: [(0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Sorry, but no media match your filters." }), (0, jsx_runtime_1.jsxs)("p", { className: "body-md text-content-secondary text-pretty", children: ["Please adjust your filters or", (0, jsx_runtime_1.jsx)(interaction_1.Button, { className: "mx-l3", variant: "secondary", size: "xs", onClick: () => onPick('upload'), children: "Upload" }), "a new file."] })] }, "assets.empty"));
+        }
+        // or render items
+        else {
+            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "grid grid-flow-row grid-cols-1 md:grid-cols-3 lg:grid-cols-4 auto-rows-auto gap-l6", children: filteredAssets.map(asset => renderAsset({ asset, onPick })) }, "files"));
+        }
+    }
+}
+function renderAsset({ asset, onPick }) {
+    const { value } = asset;
+    const { id, name } = value;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "group flex flex-col gap-l4 cursor-pointer", onClick: () => onPick(asset), tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('aspect-tv overflow-hidden interpolate', 'border border-solid border-border-l1 rounded-md', 'outline outline-2 outline-offset-2 outline-transparent', 'group-hover:border-ix-primary group-focus-visible:outline-ix-primary', 'group-active:outline-transparent group-active:scale-[0.97]'), children: (0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { asset: value }) }), (0, jsx_runtime_1.jsx)("span", { className: "label-sm text-content-primary", children: name })] }, id));
+}

package/dist/core/components/fields/asset/AssetPreview.d.ts

@@ -0,0 +1,9 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function AssetPreview({ className, asset, active }: AssetPreview.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AssetPreview {
+    type Props = {
+        className?: string;
+        asset?: Schema.AssetField.LinkedValue;
+        active?: boolean;
+    };
+}

package/dist/core/components/fields/asset/AssetPreview.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetPreview = AssetPreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const feedback_1 = require("../../feedback");
+const preview_1 = require("./preview");
+// component
+function AssetPreview({ className, asset, active = false }) {
+    // render empty content
+    if (!asset) {
+        return ((0, jsx_runtime_1.jsx)(feedback_1.Note, { className: className, variant: "error", children: "File missing" }));
+    }
+    // render image
+    else if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {
+        return ((0, jsx_runtime_1.jsx)(preview_1.ImagePreview, { className: className, asset: asset }));
+    }
+    // render video
+    else if (funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
+        return ((0, jsx_runtime_1.jsx)(preview_1.VideoPreview, { className: className, asset: asset, active: active }));
+    }
+    // or not supported
+    else {
+        const { type } = asset;
+        return ((0, jsx_runtime_1.jsxs)(feedback_1.Note, { className: className, variant: "warn", children: ["\"", type, "\" is not supported"] }));
+    }
+}

package/dist/core/components/fields/asset/AssetSelectorPane.d.ts

@@ -0,0 +1,10 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { AssetInfo } from './AssetInfo';
+export declare function AssetSelectorPane({ className, options, onAssetChanged }: AssetSelectorPane.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AssetSelectorPane {
+    type Props = {
+        className?: string;
+        options: AssetInfo.Options;
+        onAssetChanged?: Callback<AssetInfo | undefined>;
+    };
+}