@nascentdigital/funnel-editor 4.6.7 → 5.0.2

package/dist/core/components/fields/factories/ObjectFactory.js

@@ -1,13 +1,27 @@
 "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.ObjectFactory = ObjectFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const object_1 = require("../object");
 // component
-function ObjectFactory({ schema, field, onCommit, onCancel }) {
+function ObjectFactory(_a) {
+    var { schema, fieldId, field, onCommit, onCancel } = _a, popupProps = __rest(_a, ["schema", "fieldId", "field", "onCommit", "onCancel"]);
     // bind refs
     const editorRef = (0, react_1.useRef)(null);
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancel);
@@ -20,7 +34,7 @@ function ObjectFactory({ schema, field, onCommit, onCancel }) {
             // start editor (cancel if dismissed)
             const value = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
                 schema,
-                field
+                field,
             }));
             if (!value) {
                 console.debug('[ObjectFactory] editing cancelled');

package/dist/core/components/fields/factories/TextFactory.d.ts

@@ -1,10 +1,10 @@
 import { Callback, Schema } from '@nascentdigital/funnel-core';
-export declare function TextFactory({ schema, initialValue, anchor, onCommit, onCancel }: TextFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function TextFactory({ schema, initialValue, onCommit, onCancel, ...popupProps }: TextFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace TextFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.TextField;
         initialValue?: Schema.Field.Data<Schema.TextField>;
-        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.TextField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/TextFactory.js

@@ -1,4 +1,15 @@
 "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.TextFactory = TextFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,11 +17,12 @@ const funnel_core_1 = require("@nascentdigital/funnel-core");
 const react_1 = require("react");
 const interaction_1 = require("../../interaction");
 // component
-function TextFactory({ schema, initialValue, anchor, onCommit, onCancel }) {
+function TextFactory(_a) {
+    var { schema, initialValue, onCommit, onCancel } = _a, popupProps = __rest(_a, ["schema", "initialValue", "onCommit", "onCancel"]);
     // bind refs
     const quickInputRef = (0, react_1.useRef)(null);
-    const anchorRef = (0, react_1.useRef)(anchor);
-    anchorRef.current = anchor;
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancel);
@@ -25,13 +37,7 @@ function TextFactory({ schema, initialValue, anchor, onCommit, onCancel }) {
                 throw new funnel_core_1.IllegalStateError('Unable to resolve QuickInput ref');
             }
             // start editor (cancel if dismissed)
-            const value = await quickInput.open({
-                schema,
-                anchor: anchorRef.current,
-                initialValue: initialValue === null || initialValue === void 0 ? void 0 : initialValue.value,
-                placement: 'right',
-                anchorOffset: 2
-            });
+            const value = await quickInput.open(Object.assign({ schema, initialValue: initialValue === null || initialValue === void 0 ? void 0 : initialValue.value }, (popupPropsRef.current)));
             if (!value) {
                 onCancelRef.current();
             }

package/dist/core/components/fields/link/LinkEditor.d.ts

@@ -1,4 +1,5 @@
 import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const LinkEditor: import("react").ForwardRefExoticComponent<LinkEditor.Props & import("react").RefAttributes<LinkEditor.Ref>>;
 export declare namespace LinkEditor {
     type Props = {
@@ -8,9 +9,8 @@ export declare namespace LinkEditor {
     interface Ref {
         edit(options: Options): Promise<Schema.Field.Data<Schema.LinkField> | undefined>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.LinkField;
         initialValue?: Schema.Field.Data<Schema.LinkField>;
-        anchor: string;
     };
 }

package/dist/core/components/fields/link/LinkEditor.js

@@ -1,4 +1,15 @@
 "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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -25,7 +36,7 @@ exports.LinkEditor = (0, react_1.forwardRef)(function LinkEditor({ region, langu
     const [deferral, setDeferral] = (0, react_1.useState)(undefined);
     const [schema, setSchema] = (0, react_1.useState)();
     const [initialValue, setInitialValue] = (0, react_1.useState)();
-    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
     const [pickedPage, setPickedPage] = (0, react_1.useState)();
     const [pickingPage, setPickingPage] = (0, react_1.useState)(false);
     const [errorLevel, setErrorLevel] = (0, react_1.useState)('none');
@@ -48,11 +59,12 @@ exports.LinkEditor = (0, react_1.forwardRef)(function LinkEditor({ region, langu
     const pagesAvailable = allowInternal && pageStore !== undefined;
     // export service
     (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ schema, initialValue, anchor }) => {
+        edit: async (_a) => {
+            var { schema, initialValue } = _a, popupProps = __rest(_a, ["schema", "initialValue"]);
             // reset state
             setSchema(schema);
             setInitialValue(initialValue);
-            setAnchor(anchor);
+            setPopupProps(popupProps);
             setPickedPage(undefined);
             setPickingPage(false);
             setErrorLevel('none');
@@ -217,11 +229,11 @@ exports.LinkEditor = (0, react_1.forwardRef)(function LinkEditor({ region, langu
         touch();
     };
     // skip if params are missing
-    if (!anchor) {
+    if (!popupProps) {
         return null;
     }
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { title: `${initialValue ? 'Edit' : 'Create'} ${name}`, open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: pickingPage, children: [description &&
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, Object.assign({ title: `${initialValue ? 'Edit' : 'Create'} ${name}`, open: !!deferral && !deferral.isComplete, canSave: canSave, onSave: onSave, onClose: onCancel, disabled: pickingPage }, popupProps, { children: [description &&
                 (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), (0, jsx_runtime_1.jsxs)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: labelField, autoFocus: true }), pickedPage
                         // show picked page (if selected)
                         ?
@@ -232,5 +244,5 @@ exports.LinkEditor = (0, react_1.forwardRef)(function LinkEditor({ region, langu
                                         ?
                                             (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "Globe", onClick: onPickPage })
                                         : undefined }) }, "field.input")] }), allowInternal &&
-                (0, jsx_runtime_1.jsx)(page_1.PagePicker, { ref: pagePickerRef, language: language })] }));
+                (0, jsx_runtime_1.jsx)(page_1.PagePicker, { ref: pagePickerRef, language: language })] })));
 });

package/dist/core/components/fields/list/CreateFieldButton.js

@@ -39,6 +39,6 @@ function CreateFieldButton(_a) {
         setCreating(false);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, Object.assign({}, props, { anchorId: id, onClick: onCreateStart, variant: "text", iconLeft: "Plus", children: children })), creating &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, Object.assign({}, props, { anchorId: id, onClick: onCreateStart, variant: "secondary", iconLeft: "Plus", children: children })), creating &&
                 (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, anchor: id, onCommit: onCreate, onCancel: onCreateCancel })] }));
 }

package/dist/core/components/fields/media/MediaCard.d.ts

@@ -0,0 +1,7 @@
+import { Field } from '@nascentdigital/funnel-core';
+import { Media } from '@nascentdigital/funnel-ui';
+import type { FieldCard } from '../FieldCard';
+export declare function MediaCard({ className, field, ...props }: MediaCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaCard {
+    type Props = FieldCard.Props.For<Field<Media.Schema>>;
+}

package/dist/core/components/fields/media/MediaCard.js

@@ -0,0 +1,92 @@
+"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.MediaCard = MediaCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const AssetPreview_1 = require("../asset/AssetPreview");
+const FieldCardLayout_1 = require("../FieldCardLayout");
+// component
+function MediaCard(_a) {
+    var _b;
+    var { className, field } = _a, props = __rest(_a, ["className", "field"]);
+    // bind props + hooks
+    const [active, setActive] = (0, react_1.useState)(false);
+    const collectionStore = (0, hooks_1.useCollectionStore)();
+    const assetStore = (0, hooks_1.useAssetStore)();
+    const value = (_b = field.value) === null || _b === void 0 ? void 0 : _b.value;
+    const media = value
+        ? funnel_core_1.Schema.CollectionField.Value.ForRef.filter(value)
+            ? collectionStore.getCollection(value.id)
+            : value
+        : undefined;
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldCardLayout_1.FieldCardLayout, Object.assign({}, props, { className: className, field: field, onActiveChanged: setActive, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 w-full h-full flex flex-col", children: renderMedia({ assetStore, media, active }) }) })));
+}
+function renderMedia({ assetStore, media, active }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // skip if there's no media
+    if (!media) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1" }));
+    }
+    // or image
+    else if (funnel_ui_1.Media.Value.isImage(media)) {
+        // bind props
+        const { image: desktopImageData, mobileImage: mobileImageData } = (_a = media.fields) !== null && _a !== void 0 ? _a : {};
+        const desktopImageId = (_b = desktopImageData === null || desktopImageData === void 0 ? void 0 : desktopImageData.value) === null || _b === void 0 ? void 0 : _b.id;
+        const desktopImage = desktopImageId
+            ? assetStore.getAsset(desktopImageId)
+            : undefined;
+        const mobileImageId = (_c = mobileImageData === null || mobileImageData === void 0 ? void 0 : mobileImageData.value) === null || _c === void 0 ? void 0 : _c.id;
+        const mobileImage = mobileImageId
+            ? assetStore.getAsset(mobileImageId)
+            : undefined;
+        const mobileImageUrl = (_d = mobileImage === null || mobileImage === void 0 ? void 0 : mobileImage.value) === null || _d === void 0 ? void 0 : _d.url;
+        // render image (crossfade)
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { asset: desktopImage === null || desktopImage === void 0 ? void 0 : desktopImage.value, active: active }), mobileImageUrl &&
+                    (0, jsx_runtime_1.jsx)("img", { className: "absolute inset-0 object-cover z-supersurface interpolate opacity-none hover:opacity-full", src: mobileImageUrl, alt: "Mobile preview" })] }));
+    }
+    // or video
+    else if (funnel_ui_1.Media.Value.isVideo(media)) {
+        // bind props
+        const { video, cover: coverRaw } = (_e = media.fields) !== null && _e !== void 0 ? _e : {};
+        const { local: localRaw, remote: remoteRaw } = video.value;
+        const coverId = (_f = coverRaw === null || coverRaw === void 0 ? void 0 : coverRaw.value) === null || _f === void 0 ? void 0 : _f.id;
+        const cover = coverId
+            ? assetStore.getAsset(coverId)
+            : undefined;
+        const localVideoId = (_g = localRaw === null || localRaw === void 0 ? void 0 : localRaw.value) === null || _g === void 0 ? void 0 : _g.id;
+        const localVideo = localVideoId
+            ? assetStore.getAsset(localVideoId)
+            : undefined;
+        const remoteThumbUrl = (_h = remoteRaw === null || remoteRaw === void 0 ? void 0 : remoteRaw.value) === null || _h === void 0 ? void 0 : _h.thumbUrl;
+        // render video
+        if (localVideo) {
+            return ((0, jsx_runtime_1.jsx)(AssetPreview_1.AssetPreview, { asset: localVideo === null || localVideo === void 0 ? void 0 : localVideo.value, active: active }));
+        }
+        // or remove
+        else if (remoteThumbUrl) {
+            return ((0, jsx_runtime_1.jsx)("img", { className: "w-full h-full object-cover", src: remoteThumbUrl, alt: "Video thumbnail preview", draggable: false }));
+        }
+        else {
+            return null;
+        }
+    }
+    // or skip (shouldn't happen
+    else {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1" }));
+    }
+}

package/dist/core/components/fields/media/MediaEditor.d.ts

@@ -0,0 +1,36 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Media } from '@nascentdigital/funnel-ui';
+import { Popup } from '../../interaction';
+export declare const MediaEditor: import("react").ForwardRefExoticComponent<MediaEditor.Props & import("react").RefAttributes<MediaEditor.Ref>>;
+export declare namespace MediaEditor {
+    type Target = Target.Image | Target.LocalVideo | Target.RemoteVideo | Target.Media;
+    namespace Target {
+        type Image = {
+            type: 'image';
+            image: Schema.AssetField.LinkedValue.Image;
+        };
+        type LocalVideo = {
+            type: 'video.local';
+            video: Schema.AssetField.LinkedValue.Video;
+        };
+        type RemoteVideo = {
+            type: 'video.remote';
+            video: Schema.EmbeddedVideoField.Value;
+        };
+        type Media = {
+            type: 'media';
+            media: Media.Value;
+        };
+    }
+    type Props = {
+        language: Language;
+    };
+    interface Ref {
+        edit(options: Options): Promise<Result>;
+    }
+    type Options = Popup.Props.Delegated & {
+        schema: Media.Schema;
+        target: Target;
+    };
+    type Result = Media.Value | undefined;
+}

package/dist/core/components/fields/media/MediaEditor.js

@@ -0,0 +1,264 @@
+"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.MediaEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const domain_1 = require("../../../domain");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const FieldEditor_1 = require("../FieldEditor");
+const FieldErrorController_1 = require("../FieldErrorController");
+const OptInField_1 = require("../OptInField");
+// component
+exports.MediaEditor = (0, react_1.forwardRef)(function MediaEditor({ language }, ref) {
+    var _a, _b;
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [result, setResult] = (0, react_1.useState)();
+    const [target, setTarget] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
+    const [fieldSchema, setFieldSchema] = (0, react_1.useState)();
+    const [mediaSchema, setMediaSchema] = (0, react_1.useState)();
+    const [shared, setShared] = (0, react_1.useState)(false);
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)('none');
+    const [error, setError] = (0, react_1.useState)();
+    const [field, setField] = (0, react_1.useState)();
+    const page = (0, hooks_1.usePossiblePage)();
+    const collection = (0, hooks_1.usePossibleCollection)();
+    const collectionRepository = (0, hooks_1.useCollectionRepository)();
+    const collectionStore = page !== null && page !== void 0 ? page : collection;
+    const assetStore = page !== null && page !== void 0 ? page : collection;
+    const dialog = (0, feedback_1.useDialog)();
+    const valid = (_a = field === null || field === void 0 ? void 0 : field.valid) !== null && _a !== void 0 ? _a : false;
+    const modified = (_b = field === null || field === void 0 ? void 0 : field.modified) !== null && _b !== void 0 ? _b : false;
+    // sync with field
+    (0, hooks_1.useCollectionFieldProxy)(field);
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        edit: async (_a) => {
+            var { schema, target } = _a, popupProps = __rest(_a, ["schema", "target"]);
+            // reset state
+            setFieldSchema(schema);
+            setMediaSchema(target.type === 'image' || (target.type === 'media' && funnel_ui_1.Media.Value.isImage(target.media))
+                ? funnel_ui_1.Media.Image.collection
+                : funnel_ui_1.Media.Video.collection);
+            setTarget(target);
+            setField(undefined);
+            setShared(false);
+            setPopupProps(popupProps);
+            setErrorLevel('none');
+            setError(undefined);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // create field
+    (0, react_1.useEffect)(() => {
+        // ignore if schemas aren't set
+        if (!fieldSchema || !mediaSchema || !collectionStore || !assetStore || !target) {
+            return;
+        }
+        // create new field (wraps existing data for editing)
+        domain_1.CollectionFieldProxy
+            .create({
+            collectionRepository,
+            collectionStore,
+            assetStore,
+            schema: fieldSchema,
+            collectionSchema: mediaSchema,
+            language,
+            initialValue: target.type === 'media' ? target.media : undefined
+        })
+            .then(field => {
+            // bind image (if partial)
+            switch (target.type) {
+                case 'image': {
+                    const collection = field;
+                    const imageField = collection.getField('image');
+                    imageField.value = funnel_core_1.Schema.AssetField.Value.toData(target.image);
+                    break;
+                }
+                case 'video.local': {
+                    const collection = field;
+                    const videoField = collection.getField('video');
+                    const typeField = videoField.getField('type');
+                    typeField.value = funnel_core_1.Schema.EnumField.Value.toData('local');
+                    const localVideoField = videoField.getField('local');
+                    localVideoField.optIn();
+                    localVideoField.value = funnel_core_1.Schema.AssetField.Value.toData(target.video);
+                    break;
+                }
+                case 'video.remote': {
+                    const collection = field;
+                    const videoField = collection.getField('video');
+                    const typeField = videoField.getField('type');
+                    typeField.value = funnel_core_1.Schema.EnumField.Value.toData('remote');
+                    const remoteVideoField = videoField.getField('remote');
+                    remoteVideoField.optIn();
+                    remoteVideoField.value = funnel_core_1.Schema.EmbeddedVideoField.Value.toData(target.video);
+                    break;
+                }
+            }
+            // bind field
+            setField(field);
+            setShared(!field.isNew && field.isRef);
+        });
+    }, [language, collectionRepository, collectionStore, assetStore, fieldSchema, mediaSchema, target]);
+    // skip if there's no schema or value
+    if (!fieldSchema || !mediaSchema || !field || !target || !collectionStore || !assetStore) {
+        return null;
+    }
+    // helpers
+    const onValidate = () => {
+        // update error level
+        setErrorLevel('all');
+        // return validity
+        return valid;
+    };
+    const onSave = async () => {
+        // skip there's no field (should never happen)
+        if (!field) {
+            return;
+        }
+        // confirm if it's shared (skip if user bails)
+        if (shared) {
+            const confirmed = await dialog.confirm(field.isNew
+                ?
+                    {
+                        title: `Create a new ${mediaSchema.name}?`,
+                        message: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("b", { children: field.name }), " will be created as a shared content entry."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["You will also need to go to the Collection editor in order to publish this entry before attempting to the changes to this ", page ? 'page' : 'collection', " can go live."] })] })),
+                        confirmLabel: 'Update'
+                    }
+                :
+                    {
+                        title: `Update shared ${mediaSchema.name}?`,
+                        message: 'Updating this content may affect other pages.',
+                        confirmLabel: 'Update'
+                    });
+            if (!confirmed) {
+                return;
+            }
+        }
+        // TODO: handle errors
+        // save
+        await field.save(shared);
+        // update after closing
+        setResult(field.value);
+    };
+    const onCancel = async () => {
+        // skip there's no field (should never happen)
+        if (!field) {
+            return;
+        }
+        // confirm if there are unsaved changes
+        if (field.modified) {
+            // confirm
+            const confirmed = await dialog.confirm({
+                title: 'Are you sure?',
+                message: 'You have unsaved changes that you\'ll lose.',
+                confirmLabel: 'Yes',
+                destructive: true
+            });
+            // skip if user cancelled
+            if (!confirmed) {
+                return;
+            }
+        }
+        // set result (triggers editor to close)
+        setResult(null);
+    };
+    const onClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            console.debug('[MediaEditor/onClosed] ignoring invalid trigger');
+            return;
+        }
+        console.debug('[MediaEditor/onClosed] completing edit:', result);
+        // clear field
+        setFieldSchema(undefined);
+        setMediaSchema(undefined);
+        setTarget(undefined);
+        setField(undefined);
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // skip if not ready
+    if (!popupProps) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(interaction_1.MiniEditor, Object.assign({ className: "flex flex-col gap-l8", title: `Edit Media`, open: !!deferral && result === undefined, disableSave: !modified, canSave: onValidate, onSave: onSave, renderSaveLabel: state => state === 'saving' ? 'Updating...' : 'Update', onClose: onCancel, onClosed: onClosed }, popupProps, { children: (0, jsx_runtime_1.jsx)(hooks_1.CollectionStoreContext.Provider, { value: collectionStore, children: (0, jsx_runtime_1.jsx)(hooks_1.AssetStoreContext.Provider, { value: assetStore, children: renderFields({ field, error, errorLevel }) }) }) })));
+});
+function renderFields(args) {
+    // render image fields
+    let content;
+    const value = args.field.value;
+    if (funnel_ui_1.Media.Value.isImage(value)) {
+        content = renderImageFields(args);
+    }
+    // or video fields
+    else {
+        content = renderVideoFields(args);
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: args.errorLevel, children: content }) }));
+}
+function renderImageFields({ field, error }) {
+    // resolve fields
+    const desktopImageField = field.getField('image');
+    const mobileImageField = field.getField('mobileImage');
+    const hasMobileImage = mobileImageField.exists;
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!error &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: hasMobileImage
+                        ? 'The mobile version on phones and smaller displays.'
+                        : 'Without a mobile version, this image is used at every screen size.' }), (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: desktopImageField, disableDelete: true }), hasMobileImage
+                ? (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: mobileImageField })
+                : (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { className: "self-start", field: mobileImageField })] }));
+}
+function renderVideoFields({ field, error }) {
+    var _a, _b;
+    // resolve fields
+    const sourceField = field.getField('video');
+    const localVideoField = sourceField.getField('local');
+    const localVideo = (_a = localVideoField.value) === null || _a === void 0 ? void 0 : _a.value;
+    const remoteVideoField = sourceField.getField('remote');
+    const remoteVideo = (_b = remoteVideoField.value) === null || _b === void 0 ? void 0 : _b.value;
+    const coverField = field.getField('cover');
+    const hasCover = coverField.exists;
+    const isRemote = !localVideo;
+    // TODO render error if there's no video source
+    if (!localVideo && !remoteVideo) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!error &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: hasCover
+                        ? 'Your cover image will be shown before the video plays, replacing the default first frame.'
+                        : isRemote
+                            ? 'You can customize the video cover image.'
+                            : 'Without a cover image, a blurhash will be displayed before it plays.' }), (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: localVideo
+                    ? localVideoField
+                    : remoteVideoField, disableDelete: true }), coverField.exists
+                ? (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: coverField })
+                : (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { className: "self-start", field: coverField })] }));
+}

package/dist/core/components/fields/media/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MediaCard';
+export * from './MediaEditor';

package/dist/core/components/fields/media/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MediaCard"), exports);
+__exportStar(require("./MediaEditor"), exports);

package/dist/core/components/fields/object/ObjectEditor.d.ts

@@ -1,11 +1,12 @@
 import { ObjectField, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const ObjectEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<ObjectEditor.Ref>>;
 export declare namespace ObjectEditor {
     type Props = {};
     interface Ref {
         edit(options: Options): Promise<Schema.Field.Data<Schema.ObjectField> | undefined>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.ObjectField;
         field?: ObjectField;
     };