@nascentdigital/funnel-editor 5.0.1 → 5.0.3

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/media/MediaEditor.d.ts

@@ -28,10 +28,9 @@ export declare namespace MediaEditor {
     interface Ref {
         edit(options: Options): Promise<Result>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Media.Schema;
         target: Target;
-        anchor: Popup.Anchor;
     };
-    type Result = Media.Value | 'pick' | undefined;
+    type Result = Media.Value | undefined;
 }

package/dist/core/components/fields/media/MediaEditor.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.MediaEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -20,7 +31,7 @@ exports.MediaEditor = (0, react_1.forwardRef)(function MediaEditor({ language },
     const [deferral, setDeferral] = (0, react_1.useState)(undefined);
     const [result, setResult] = (0, react_1.useState)();
     const [target, setTarget] = (0, react_1.useState)();
-    const [anchor, setAnchor] = (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);
@@ -39,7 +50,8 @@ exports.MediaEditor = (0, react_1.forwardRef)(function MediaEditor({ language },
     (0, hooks_1.useCollectionFieldProxy)(field);
     // export service
     (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ schema, target, anchor }) => {
+        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))
@@ -48,7 +60,7 @@ exports.MediaEditor = (0, react_1.forwardRef)(function MediaEditor({ language },
             setTarget(target);
             setField(undefined);
             setShared(false);
-            setAnchor(anchor);
+            setPopupProps(popupProps);
             setErrorLevel('none');
             setError(undefined);
             // create deferral
@@ -189,31 +201,41 @@ exports.MediaEditor = (0, react_1.forwardRef)(function MediaEditor({ language },
         // 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, { className: "flex flex-col gap-l8", title: `Edit Media`, open: !!deferral && result === undefined, placement: "right", anchor: anchor, anchorOffset: 4, disableSave: !modified, canSave: onValidate, onSave: onSave, renderSaveLabel: state => state === 'saving' ? 'Updating...' : 'Update', customActions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: () => setResult('pick'), children: "Use existing media" }), onClose: onCancel, onClosed: onClosed, children: (0, jsx_runtime_1.jsx)(hooks_1.CollectionStoreContext.Provider, { value: collectionStore, children: (0, jsx_runtime_1.jsxs)(hooks_1.AssetStoreContext.Provider, { value: assetStore, children: [mediaSchema.description && !error &&
-                        (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: mediaSchema.description }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsxs)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: field.nameField, autoFocus: true }), renderFields({ field })] }) })] }) }) }));
+    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)) {
-        return renderImageFields(args);
+        content = renderImageFields(args);
     }
     // or video fields
     else {
-        return renderVideoFields(args);
+        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 }) {
+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: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: desktopImageField, disableDelete: true }), mobileImageField.exists
+    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 }) {
+function renderVideoFields({ field, error }) {
     var _a, _b;
     // resolve fields
     const sourceField = field.getField('video');
@@ -222,12 +244,19 @@ function renderVideoFields({ field }) {
     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: [(0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: localVideo
+    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 })

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

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

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

@@ -16,4 +16,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./MediaCard"), exports);
 __exportStar(require("./MediaEditor"), exports);
-__exportStar(require("./MediaPicker"), 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;
     };

package/dist/core/components/fields/object/ObjectEditor.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.ObjectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -14,13 +25,16 @@ exports.ObjectEditor = (0, react_1.forwardRef)(function ObjectEditor(_, ref) {
     const [result, setResult] = (0, react_1.useState)();
     const [schema, setSchema] = (0, react_1.useState)();
     const [field, setField] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
     // sync field
     (0, hooks_1.useField)(field);
     // export service
     (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ schema, field: existingField }) => {
+        edit: async (_a) => {
+            var { schema, field: existingField } = _a, popupProps = __rest(_a, ["schema", "field"]);
             // reset state
             setSchema(schema);
+            setPopupProps(popupProps);
             // create new field (clone data from existing field if provided)
             const clonedField = funnel_core_1.ObjectField.forSchema(schema);
             if (existingField) {

package/dist/core/components/fields/page/PagePicker.js

@@ -138,7 +138,7 @@ exports.PagePicker = (0, react_1.forwardRef)(function PagePicker({ language }, r
             pages.sync()
                 .then(() => {
                 setPagesSchema(pages.template);
-                setPages(pages.items.map(page => page.getClosestPageRef(language, site.defaultLanguage)));
+                setPages(pages.items.map(page => page.getClosestPageRef({ region: site.region.id, language, fallbackLanguage: site.defaultLanguage })));
             })
                 .catch(e => setError(feedback_1.ErrorMessage.coerce(e)));
         }

package/dist/core/components/interaction/Popup.d.ts

@@ -1,13 +1,15 @@
 import { Callback, Placement, Rect } from '@nascentdigital/funnel-core';
 import { HTMLContainer } from '@nascentdigital/funnel-ui';
-import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
-export declare function Popup({ className, style, anchor, anchorOffset, placement, viewportPadding, animation, backdrop, disabled, disableDismiss, disableOverlay, open, onOpened: onOpenedRaw, onClose, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, children, ...props }: Popup.Props): import("react/jsx-runtime").JSX.Element | null;
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export declare function Popup({ className, style, anchor, anchorOffset, placement, animation, backdrop, disabled, disableDismiss, disableOverlay, open, onOpened: onOpenedRaw, onClose, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, children, ...props }: Popup.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Popup {
+    type Anchor = string;
+    type Animation = 'in' | 'out' | 'in-out';
+    type Backdrop = 'none' | 'glass';
     type Props = HTMLAttributes<HTMLDivElement> & {
-        anchor?: Anchor;
+        anchor?: Anchor | ReactNode;
         anchorOffset?: number;
         placement?: Placement;
-        viewportPadding?: number;
         animation?: Animation;
         backdrop?: Backdrop;
         disabled?: boolean;
@@ -18,9 +20,11 @@ export declare namespace Popup {
         onClose?: Callback.Void;
         onClosed?: Callback.Void;
     };
-    type Anchor = string | ReactNode;
-    type Animation = 'in' | 'out' | 'in-out';
-    type Backdrop = 'none' | 'glass';
+    namespace Props {
+        type Delegated = Pick<Props, 'anchorOffset' | 'placement'> & {
+            anchor?: Popup.Anchor;
+        };
+    }
     const anchorClassName: "anchor/[--nd-popup-anchor]";
     function getAnchorStyle(anchorId: string, styles?: CSSProperties): CSSProperties;
     type Frame = {

package/dist/core/components/interaction/Popup.js

@@ -26,7 +26,7 @@ const react_dom_1 = require("react-dom");
 const Animate_1 = require("./Animate");
 // component
 function Popup(_a) {
-    var { className, style = {}, anchor, anchorOffset, placement = 'bottom', viewportPadding, animation = 'in-out', backdrop = 'none', disabled = false, disableDismiss = false, disableOverlay = false, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, onKeyDown: onKeyDownRaw, children } = _a, props = __rest(_a, ["className", "style", "anchor", "anchorOffset", "placement", "viewportPadding", "animation", "backdrop", "disabled", "disableDismiss", "disableOverlay", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "children"]);
+    var { className, style = {}, anchor, anchorOffset = 4, placement = 'bottom', animation = 'in-out', backdrop = 'none', disabled = false, disableDismiss = false, disableOverlay = false, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, onKeyDown: onKeyDownRaw, children } = _a, props = __rest(_a, ["className", "style", "anchor", "anchorOffset", "placement", "animation", "backdrop", "disabled", "disableDismiss", "disableOverlay", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "children"]);
     // bind context
     const id = (0, react_1.useId)();
     const anchorId = typeof anchor === 'string'
@@ -89,7 +89,7 @@ function Popup(_a) {
         }
     };
     // render
-    const { popupContainerClassName, popupClassName } = getPopupClassNames({ anchor, anchorId, anchorOffset, placement });
+    const { popupContainerClassName, popupClassName, popupStyles } = getPopupClassNames({ anchor, anchorId, anchorOffset, placement });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchor && typeof anchor !== 'string' &&
                 (0, jsx_runtime_1.jsx)(Popup.AnchorElement, { tag: "div", anchorId: anchorId, children: anchor }), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", children: open &&
                     (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)(popupContainerClassName, 'fixed inset-0 z-popup', {
@@ -98,8 +98,8 @@ function Popup(_a) {
                                     (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('fixed inset-0 z-backdrop', {
                                             'backdrop-blur-[9px] bg-glass/backdrop will-change-[backdrop-filter]': backdrop === 'glass'
                                         }) }, "backdrop"), (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: contentRef, className: (0, classnames_1.default)(className, popupClassName, 'pointer-events-auto'), style: anchor
-                                        ? Popup.getAnchorStyle(anchorId, { margin: `${anchorOffset !== null && anchorOffset !== void 0 ? anchorOffset : 0}px` })
-                                        : undefined, onKeyDown: onKeyDown, children: children }))] }, id) }) }), document.body)] }));
+                                        ? Popup.getAnchorStyle(anchorId, Object.assign({ margin: `${anchorOffset !== null && anchorOffset !== void 0 ? anchorOffset : 0}px` }, popupStyles))
+                                        : popupStyles, onKeyDown: onKeyDown, children: children }))] }, id) }) }), document.body)] }));
 }
 // extension
 (function (Popup) {
@@ -145,14 +145,16 @@ function getPopupClassNames({ anchor, placement }) {
                 'anchored-left-span-bottom': placement === 'left-start',
                 'anchored-right': placement === 'right',
                 'anchored-bottom-span-left': placement === 'bottom-end'
-            })
+            }),
+            popupStyles: { positionTryFallbacks: 'flip-y, flip-x' }
         };
     }
     // or treat as modal if there's no anchor
     else {
         return {
             popupContainerClassName: 'flex flex-col justify-end items-center sm:justify-center',
-            popupClassName: 'z-dialog'
+            popupClassName: 'z-dialog',
+            popupStyles: {}
         };
     }
 }

package/dist/core/components/interaction/QuickInput.d.ts

@@ -1,4 +1,4 @@
-import { RequiredBy, Schema } from '@nascentdigital/funnel-core';
+import { Schema } from '@nascentdigital/funnel-core';
 import { Popup } from './Popup';
 export declare const QuickInput: import("react").ForwardRefExoticComponent<import("react").RefAttributes<QuickInput.Ref<Schema.Field.Type.Simple.NonRef>>>;
 export declare namespace QuickInput {
@@ -8,10 +8,8 @@ export declare namespace QuickInput {
         open(args: CaptureArgs<TSchema>): Promise<Schema.Field.Value.ForSimpleType<TSchema> | undefined>;
         close(): void;
     }
-    type CaptureArgs<TSchema extends Schema.Field.Type.Simple.NonRef = Schema.Field.Type.Simple.NonRef> = PopupProps & {
+    type CaptureArgs<TSchema extends Schema.Field.Type.Simple.NonRef = Schema.Field.Type.Simple.NonRef> = Popup.Props.Delegated & {
         schema: TSchema;
         initialValue?: Schema.Field.Value.ForSimpleType<TSchema>;
     };
 }
-type PopupProps = RequiredBy<Omit<Popup.Props, 'className' | 'animation' | 'disableClickDismiss' | 'open' | 'onOpened' | 'onClose' | 'onClosed' | 'children'>, 'anchor' | 'placement'>;
-export {};

package/dist/core/components/interaction/QuickInput.js

@@ -127,11 +127,15 @@ exports.QuickInput = (0, react_1.forwardRef)(function QuickInput(_, ref) {
                 break;
         }
     };
+    // skip if not ready
+    if (!popupProps) {
+        return null;
+    }
     // render
-    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, (popupProps !== null && popupProps !== void 0 ? popupProps : {}), { className: (0, classnames_1.default)('glass-overlay w-[330px] flex items-center gap-l5 p-l5 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-full', {
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({ className: (0, classnames_1.default)('glass-overlay w-[330px] flex items-center gap-l5 p-l5 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-full', {
             'opacity-none': !opened,
             'opacity-full': opened
-        }), animation: "out", open: deferral && ready, onOpened: () => setOpened(true), onClose: onClose, onClosed: () => setOpened(false), children: [(0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderInput({ field, onKeyDown }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", onClick: onSave, children: "Save" })] })));
+        }), animation: "out", open: deferral && ready, onOpened: () => setOpened(true), onClose: onClose, onClosed: () => setOpened(false) }, popupProps, { children: [(0, jsx_runtime_1.jsx)(FieldErrorController_1.FieldErrorController, { errorLevel: errorLevel, children: renderInput({ field, onKeyDown }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", onClick: onSave, children: "Save" })] })));
 });
 function renderInput({ field, onKeyDown }) {
     // skip if there's no field

package/dist/core/components/interaction/menu/Menu.d.ts

@@ -1,25 +1,14 @@
 import { Callback } from '@nascentdigital/funnel-core';
 import { Popup } from '../Popup';
-import { MenuItem } from './MenuItem';
 import { MenuController } from './useMenuController';
 export declare function Menu<TItemId extends string>(props: Menu.Props<TItemId>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Menu {
-    type Props<TItemId extends string> = Props.Static<TItemId> | Props.Controlled<TItemId>;
-    namespace Props {
-        type Base<TItemId extends string> = {
-            label?: string;
-            title?: string;
-            onItemClick?: Callback<TItemId>;
-        };
-        export type Static<TItemId extends string> = Omit<Popup.Props, 'children'> & Base<TItemId> & {
-            items: ReadonlyArray<MenuItem<TItemId>>;
-            controller?: never;
-            selectedItem?: TItemId;
-        };
-        export type Controlled<TItemId extends string> = Omit<Popup.Props, 'anchor' | 'open' | 'children'> & Base<TItemId> & {
-            items?: never;
-            controller: MenuController<TItemId>;
-        };
-        export {};
-    }
+    type Props<TItemId extends string> = Omit<Popup.Props.Delegated, 'anchor'> & {
+        className?: string;
+        label?: string;
+        title?: string;
+        controller: MenuController<TItemId>;
+        onItemClick?: Callback<TItemId>;
+        onClose?: Callback.Void;
+    };
 }

package/dist/core/components/interaction/menu/Menu.js

@@ -15,74 +15,40 @@ function Menu(props) {
     const { className, label, title } = props;
     const { popupProps, menuListProps } = getPopupMenuProps(props);
     // render
-    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, popupProps, { className: (0, classnames_1.default)(className, 'min-w-[200px] glass-overlay rounded-lg overflow-hidden'), children: [(label || title) &&
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({ className: (0, classnames_1.default)(className, 'min-w-[200px] glass-overlay rounded-lg overflow-hidden') }, popupProps, { children: [(label || title) &&
                 (0, jsx_runtime_1.jsxs)("div", { className: "border-b border-solid border-border-l1 px-l6 pt-l4 pb-l5", children: [label &&
                             (0, jsx_runtime_1.jsx)("span", { className: "block body-xs text-content-secondary", children: label }), title &&
                             (0, jsx_runtime_1.jsx)("h3", { className: "heading-xs text-content-primary ", children: title })] }), (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, Object.assign({}, menuListProps))] })));
 }
 function getPopupMenuProps(props) {
-    var _a, _b, _c, _d;
+    var _a;
     // handle controlled menu
     const anchorOffset = 4;
-    const viewportPadding = 6;
-    if (isMenuControlled(props)) {
-        const { controller, onClose = funnel_core_1.Fn.NoOp } = props;
-        return {
-            popupProps: {
-                placement: props.placement,
-                anchorOffset: (_a = props.anchorOffset) !== null && _a !== void 0 ? _a : anchorOffset,
-                viewportPadding: (_b = props.viewportPadding) !== null && _b !== void 0 ? _b : viewportPadding,
-                anchor: controller.anchor,
-                open: controller.isOpen,
-                onClose: () => {
-                    controller.close();
-                    onClose();
-                }
-            },
-            menuListProps: {
-                items: controller.items,
-                selectedItem: controller.selectedItem,
-                onItemClick: (id) => {
-                    // close menu
-                    controller.close();
-                    // update selected item
-                    controller.selectedItem = id;
-                    // raise click
-                    if (props.onItemClick) {
-                        props.onItemClick(id);
-                    }
-                }
+    const { controller, onClose = funnel_core_1.Fn.NoOp } = props;
+    return {
+        popupProps: {
+            anchor: controller.anchor,
+            anchorOffset: (_a = props.anchorOffset) !== null && _a !== void 0 ? _a : anchorOffset,
+            placement: props.placement,
+            open: controller.isOpen,
+            onClose: () => {
+                controller.close();
+                onClose();
             }
-        };
-    }
-    // or uncontrolled
-    else {
-        return {
-            popupProps: {
-                placement: props.placement,
-                anchorOffset: (_c = props.anchorOffset) !== null && _c !== void 0 ? _c : anchorOffset,
-                viewportPadding: (_d = props.viewportPadding) !== null && _d !== void 0 ? _d : viewportPadding,
-                anchor: props.anchor,
-                open: props.open,
-                onClose: props.onClose
-            },
-            menuListProps: {
-                items: props.items,
-                selectedItem: props.selectedItem,
-                onItemClick: (id) => {
-                    // close menu
-                    if (props.onClose) {
-                        props.onClose();
-                    }
-                    // raise click
-                    if (props.onItemClick) {
-                        props.onItemClick(id);
-                    }
+        },
+        menuListProps: {
+            items: controller.items,
+            selectedItem: controller.selectedItem,
+            onItemClick: (id) => {
+                // close menu
+                controller.close();
+                // update selected item
+                controller.selectedItem = id;
+                // raise click
+                if (props.onItemClick) {
+                    props.onItemClick(id);
                 }
             }
-        };
-    }
-}
-function isMenuControlled(props) {
-    return 'controller' in props;
+        }
+    };
 }

package/dist/core/components/interaction/menu/useMenuController.d.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { Popup } from '../Popup';
 import { MenuItem } from './MenuItem';
 export declare function useMenuController<TItemId extends string = string, TContext = any>(items?: ReadonlyArray<MenuItem<TItemId>>): MenuController<TItemId, TContext>;
 export declare class MenuController<TItemId extends string, TContext = any> {
@@ -6,17 +7,18 @@ export declare class MenuController<TItemId extends string, TContext = any> {
     private _items?;
     private _selectedItem?;
     private _anchor?;
+    private _open;
     constructor(items?: ReadonlyArray<MenuItem<TItemId>>);
     get items(): ReadonlyArray<MenuItem<TItemId>>;
     set items(items: ReadonlyArray<MenuItem<TItemId>> | undefined);
     get selectedItem(): TItemId | undefined;
     set selectedItem(item: TItemId | undefined);
-    get anchor(): string | undefined;
+    get anchor(): Popup.Anchor | undefined;
     private _context?;
     get context(): TContext | undefined;
     get changed$(): Observable<Date>;
     get isOpen(): boolean;
-    open(anchor: string, context?: TContext): void;
+    open(anchor?: Popup.Anchor, context?: TContext): void;
     close(): void;
     private raiseChange;
 }

package/dist/core/components/interaction/menu/useMenuController.js

@@ -26,6 +26,7 @@ class MenuController {
         // initialize instance variables
         this._changed$ = new rxjs_1.Subject();
         this._items = items;
+        this._open = false;
     }
     get items() {
         var _a;
@@ -52,15 +53,17 @@ class MenuController {
         return this._changed$;
     }
     get isOpen() {
-        return !!this._anchor;
+        return this._open;
     }
     open(anchor, context) {
         this._anchor = anchor;
         this._context = context;
+        this._open = true;
         this.raiseChange();
     }
     close() {
         delete this._anchor;
+        this._open = false;
         this.raiseChange();
     }
     raiseChange() {

package/dist/core/domain/CollectionFieldProxy.js

@@ -23,7 +23,7 @@ class CollectionFieldProxy {
         this._syncing = false;
         // initialize name
         const data = this.dataFrom(initialData);
-        const name = (data === null || data === void 0 ? void 0 : data.name) || '';
+        const name = (data === null || data === void 0 ? void 0 : data.name) || this.schema.name;
         this.nameField = new funnel_core_1.Field({
             id: 'name',
             name: 'Name',

package/dist/core/domain/Collections.js

@@ -12,8 +12,6 @@ class Collections {
         this.schemas = funnel_core_1.Schema.Site.current().collections;
         this._eventBus = new funnel_core_1.EventBus();
         this._state = 'uninitialized';
-        // start initial loading of data
-        this.sync().catch(console.error);
         // listen to app state for page changes
         this._subscription = this.appState.collectionEvents$.subscribe(e => this.onCollectionEvent(e));
     }

package/dist/core/domain/ICollection.d.ts

@@ -43,6 +43,7 @@ export declare namespace ICollection {
         updatedOn: number;
         publishedOn?: number;
     };
+    type Savable = FieldModel;
     type References = {
         collections: Schema.Collection.Data.AsLink[];
         assets: Asset[];

package/dist/core/domain/IPage.d.ts

@@ -1,4 +1,4 @@
-import { EventBus, Field, FieldList, Language, ObjectField, Schema } from '@nascentdigital/funnel-core';
+import { EventBus, Field, FieldList, FieldModel, Language, ObjectField, Schema } from '@nascentdigital/funnel-core';
 import type { Observable } from 'rxjs';
 import type { Asset } from './Asset';
 import type { Block } from './Block';
@@ -34,6 +34,7 @@ export interface IPage extends IAssetStore, ICollectionStore, IPageRefStore, ITa
 export declare namespace IPage {
     type Content = ReadonlyArray<Block | Section>;
     type Area = 'discover' | 'content';
+    type Savable = Section | Block | FieldModel;
     type Ref = {
         template: Schema.Page;
         id: Schema.Page.Id;
@@ -51,6 +52,9 @@ export declare namespace IPage {
         updatedOn: number;
         publishedOn?: number;
     };
+    namespace Ref {
+        function fromData({ tags, ...data }: Schema.Page.Data.AsLink): Ref;
+    }
     type References = {
         pages: Ref[];
         collections: Schema.Collection.Data.AsLink[];
@@ -69,4 +73,5 @@ export declare namespace IPage {
         function filter(event: EventBus.Event): event is Event;
         function create(event: EventBus.Args<Event>): Event;
     }
+    function getPreviewUrl(path: string): URL;
 }