@nascentdigital/funnel-editor 4.6.7 → 5.0.2

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) {
@@ -58,5 +72,5 @@ exports.ObjectEditor = (0, react_1.forwardRef)(function ObjectEditor(_, ref) {
         return null;
     }
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.CenterSheet, { className: "h-full flex flex-col gap-l6", name: field.name, open: !!deferral && result === undefined, onClose: onClose, onClosed: onClosed, children: [(0, jsx_runtime_1.jsxs)("div", { className: "h-48 flex items-center gap-l4 px-l7", children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "X", onClick: onClose }), (0, jsx_runtime_1.jsx)("h1", { className: "label-sm text-content-primary", children: field.name }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", disabled: !field.modified, onClick: () => setResult(field.value), children: field.isNew ? 'Create' : 'Update' })] }), (0, jsx_runtime_1.jsx)(FieldsPanel_1.FieldsPanel, { className: "flex-1 px-l7", title: schema.name, fields: field.fields })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.CenterSheet, { className: "h-full flex flex-col gap-l6", name: field.name, open: !!deferral && result === undefined, onClose: onClose, onClosed: onClosed, children: [(0, jsx_runtime_1.jsxs)("div", { className: "h-48 flex items-center gap-l8 px-l7", children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "X", onClick: onClose }), (0, jsx_runtime_1.jsx)("h1", { className: "label-sm text-content-primary", children: field.name }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", disabled: !field.modified, onClick: () => setResult(field.value), children: field.isNew ? 'Create' : 'Update' })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex flex-col gap-l10 px-l6 py-l10 overflow-y-scroll scrollbar-thin bg-background", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(FieldsPanel_1.FieldsPanel, { className: "flex-1", title: schema.name, fields: field.fields, autoFocus: true }) })] }));
 });

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

@@ -205,7 +205,7 @@ exports.PagePicker = (0, react_1.forwardRef)(function PagePicker({ language }, r
                             ? 'Primary'
                             : filter.template.name }), tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.map(({ group, tags: groupTags }) => (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: group.name, multiselect: true, options: groupTags.values().toArray(), selectedOptions: tagFilters.filter(tag => groupTags.has(tag)), onToggle: (tag, selected) => setTagFilters(tags => selected
                             ? [...tags, tag]
-                            : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters(tags => tags.filter(tag => !groupTags.has(tag))), renderLabel: tag => tag.name }, group.id))] }), (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({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
+                            : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters(tags => tags.filter(tag => !groupTags.has(tag))), renderLabel: tag => tag.name }, group.id))] }), (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", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
 });
 function renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) {
     // show error if we have one

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

@@ -70,7 +70,7 @@ function Combobox({ id: externalId, className, size = 'md', maxRows = 6, rowHeig
                     }), style: {
                         minWidth: button ? `${button.offsetWidth}px` : 'auto',
                         maxHeight: maxRows * rowHeight + (rowPaddingY * 2)
-                    }, role: "listbox", children: options.map((option, index) => {
+                    }, role: "listbox", tabIndex: -1, children: options.map((option, index) => {
                         // render
                         const optionKey = getOptionId(id, option);
                         const selected = option.id === selectedOptionId;

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

@@ -57,11 +57,11 @@ exports.MultiSelectControls = (0, react_1.forwardRef)(function MultiSelectContro
     };
     // render controls when selecting
     if (selecting) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-wrap items-center gap-l5', className), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", onClick: selectedIdCount < idCount ? onSelectAll : onDeselectAll, children: selectedIdCount < idCount ? selectAllLabel : deselectAllLabel }), actions, (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", onClick: onSelectCancel, children: cancelLabel })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-wrap items-center gap-l5', className), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "xs", onClick: selectedIdCount < idCount ? onSelectAll : onDeselectAll, children: selectedIdCount < idCount ? selectAllLabel : deselectAllLabel }), actions, (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "xs", onClick: onSelectCancel, children: cancelLabel })] }));
     }
     // or render control to enter selection
     else {
-        return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", onClick: onSelectStart, children: editLabel }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "xs", onClick: onSelectStart, children: editLabel }) }));
     }
 });
 // hook
@@ -73,16 +73,13 @@ function useMultiSelectControls() {
     (0, react_1.useEffect)(() => {
         // skip if not bound
         if (!multiSelect) {
-            console.debug('[useMultiSelectControls] controls not ready');
             return;
         }
-        console.debug('[useMultiSelectControls] binding to controls');
         // touch on event
         const subscription = multiSelect.events$.subscribe(touch);
         // unsubscribe on unmount
         return () => subscription.unsubscribe();
     }, [touch, multiSelect]);
-    console.debug('[useMultiSelectControls] updated', multiSelect);
     // return selector
     return [setMultiSelect, multiSelect];
 }

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/QuickEditor.js

@@ -29,5 +29,5 @@ function QuickEditor(_a) {
             'w-[320px]': size === 'md',
             'w-[288px]': size === 'sm'
         }), open: open, onClose: onClose, children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-content-primary flex justify-between items-center gap-l8 px-l8 pt-l8 pb-l4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-sm text-pretty", children: title }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "shrink-0", icon: "X", size: "xs", onClick: onClose })] }), tip &&
-                (0, jsx_runtime_1.jsx)(feedback_1.Note, { className: "mt-l2 mb-l4 mx-l8", variant: "tip", size: size === 'md' ? 'sm' : 'xs', children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: `**Tip:** ${tip}` }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 px-l8 pt-l4 pb-l8 overflow-y-scroll", children: children })] })));
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { className: "mt-l2 mb-l4 mx-l8", variant: "tip", size: size === 'md' ? 'sm' : 'xs', children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: `**Tip:** ${tip}` }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 px-l8 pt-l4 pb-l8 overflow-y-scroll", tabIndex: -1, children: children })] })));
 }

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/QuickPicker.js

@@ -96,7 +96,7 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
                     'flex flex-wrap gap-l5 items-center ': variant === 'card',
                     'w-[288px]': variant === 'card' && items.length < 4,
                     'w-[372px] max-h-[213px]': variant === 'card' && items.length >= 4
-                }), children: items.map(item => renderCard({
+                }), tabIndex: -1, children: items.map(item => renderCard({
                     item,
                     content: renderItem(item),
                     selected: item.id === selectedItem,

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

@@ -154,7 +154,7 @@ function SideSheet(_a) {
                             'w-full md:w-screen-sm': size === 'lg'
                         }), variants: breakpoint === 'xs' || breakpoint === 'sm'
                             ? Animate_1.Animate.Variants.slideFromBottom
-                            : Animate_1.Animate.Variants.slideFromLeft, initial: "initial", animate: "animate", exit: "exit", onAnimationComplete: definition => onAnimationComplete(definition), onKeyDown: onKeyDown, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'w-full h-full max-h-full pointer-events-auto', 'flex flex-col', 'bg-background border-solid border-border-l1', 'max-md:border-t max-md:rounded-tl-md max-md:rounded-tr-md', 'md:border-l md:rounded-tl-md md:rounded-bl-md'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-sm text-content-primary px-l8 pt-l8 pb-l4", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 px-l8 pt-l4 pb-l8 overflow-y-scroll", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex justify-end items-center gap-l4 p-l8', 'border-t border-solid border-border-l1'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
+                            : Animate_1.Animate.Variants.slideFromLeft, initial: "initial", animate: "animate", exit: "exit", onAnimationComplete: definition => onAnimationComplete(definition), onKeyDown: onKeyDown, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'w-full h-full max-h-full pointer-events-auto', 'flex flex-col', 'bg-background border-solid border-border-l1', 'max-md:border-t max-md:rounded-tl-md max-md:rounded-tr-md', 'md:border-l md:rounded-tl-md md:rounded-bl-md'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-sm text-content-primary px-l8 pt-l8 pb-l4", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 px-l8 pt-l4 pb-l8 overflow-y-scroll", tabIndex: -1, children: children }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex justify-end items-center gap-l4 p-l8', 'border-t border-solid border-border-l1'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
                                             (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex justify-end items-center gap-l4", children: customActions }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "sm", loading: state === 'saving', disabled: disableSave || locked, onClick: onSave, children: renderSaveLabel(state) })] })] }) }))] }, id) }), document.body);
 }
 // helpers

package/dist/core/components/interaction/centersheet/CenterSheet.js

@@ -34,8 +34,10 @@ exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className,
     }), [open]);
     // handle open/close events
     (0, react_2.useEffect)(() => {
-        // raise open event
+        // handle open change
+        let unlock = undefined;
         if (open) {
+            // raise open event
             eventBus.next({
                 type: 'onOpen',
                 sheetInfo: {
@@ -43,6 +45,8 @@ exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className,
                     name: nameRef.current
                 }
             });
+            // lock tabbing
+            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(id)}`);
         }
         // or close event
         else {
@@ -51,6 +55,8 @@ exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className,
                 sheetId: id
             });
         }
+        // unlock tabbing on unmount (if locked)
+        return () => unlock && unlock();
     }, [id, eventBus, open]);
     // ensure close on unmount
     (0, react_2.useEffect)(() => {

package/dist/core/components/interaction/centersheet/CenterSheetContainer.js

@@ -58,7 +58,9 @@ function CenterSheetContainer({ children }) {
     // render
     const { sheets } = context;
     const active = sheets.length > 0;
-    return ((0, jsx_runtime_1.jsxs)(CenterSheetContext_1.CenterSheetContext.Provider, { value: context, children: [children, (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 pointer-events-none", children: (0, jsx_runtime_1.jsx)("div", { id: anchorId, className: "relative w-full h-full", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-backdrop interpolate will-change-[backdrop-filter,opacity]', 'backdrop-blur-[9px] bg-glass-fill-l1', {
+    return ((0, jsx_runtime_1.jsxs)(CenterSheetContext_1.CenterSheetContext.Provider, { value: context, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-dvw h-dvh', {
+                    'pointer-events-none': active
+                }), children: children }), (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 pointer-events-none", children: (0, jsx_runtime_1.jsx)("div", { id: anchorId, className: "relative w-full h-full", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-backdrop interpolate will-change-[backdrop-filter,opacity]', 'backdrop-blur-[9px] bg-glass-fill-l1/tint3', {
                             'pointer-events-none opacity-none': !active,
                             'pointer-events-auto opacity-full': active
                         }) }, "backdrop") }) })] }));

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/components/transitions/FadeIn.js

@@ -25,5 +25,5 @@ function FadeIn(_a) {
     // render
     return ((0, jsx_runtime_1.jsx)(react_1.motion.div, Object.assign({ className: (0, classnames_1.default)(className, {
             'will-change-[opacity,filter]': variant === 'blur'
-        }), variants: interaction_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, props)));
+        }), variants: interaction_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, props, { tabIndex: -1 })));
 }

package/dist/core/components/visuals/Icon.d.ts

@@ -6,7 +6,7 @@ export declare namespace Icon {
         size?: Size;
     };
     type Size = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'nav' | 'card' | Sizing;
-    type Variant = 'Archive' | 'ArrowLeft' | 'ArrowRight' | 'ArrowLeftRight' | 'Atom' | 'Blocks' | 'Bold' | 'Check' | 'ChevronDown' | 'ChevronRight' | 'ChevronUp' | 'Circle' | 'CircleAlert' | 'CircleCheck' | 'CircleCheckBig' | 'CirclePlus' | 'CircleQuestionMark' | 'CloudCheck' | 'CloudUpload' | 'CornerDownRight' | 'EllipsisVertical' | 'Eye' | 'EyeOff' | 'File' | 'FileDown' | 'FilePlusCorner' | 'FileSearchCorner' | 'Goal' | 'Globe' | 'GripVertical' | 'HatGlasses' | 'History' | 'Highlighter' | 'Image' | 'ImageDown' | 'Info' | 'Italic' | 'Layers' | 'LayoutTemplate' | 'Link' | 'Link2' | 'List' | 'ListChecks' | 'ListIndentDecrease' | 'ListIndentIncrease' | 'ListOrdered' | 'Lock' | 'LockOpen' | 'Mail' | 'MessageSquareQuote' | 'Minus' | 'Monitor' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'SearchCode' | 'Settings' | 'Smartphone' | 'SquarePlay' | 'Star' | 'Strikethrough' | 'Subscript' | 'Sun' | 'Superscript' | 'TextAlignStart' | 'Trash' | 'TriangleAlert' | 'Trophy' | 'Underline' | 'Undo' | 'Upload' | 'UserRound' | 'X';
+    type Variant = 'Archive' | 'ArrowLeft' | 'ArrowRight' | 'ArrowLeftRight' | 'Atom' | 'Blocks' | 'Bold' | 'Check' | 'ChevronDown' | 'ChevronRight' | 'ChevronUp' | 'Circle' | 'CircleAlert' | 'CircleCheck' | 'CircleCheckBig' | 'CirclePlus' | 'CircleQuestionMark' | 'CloudCheck' | 'CloudUpload' | 'CornerDownRight' | 'EllipsisVertical' | 'Eye' | 'EyeOff' | 'File' | 'FileDown' | 'FilePlusCorner' | 'FileSearchCorner' | 'Goal' | 'Globe' | 'GripVertical' | 'HatGlasses' | 'History' | 'Highlighter' | 'Image' | 'ImageDown' | 'Info' | 'Italic' | 'Layers' | 'LayoutTemplate' | 'Link' | 'Link2' | 'List' | 'ListChecks' | 'ListIndentDecrease' | 'ListIndentIncrease' | 'ListOrdered' | 'Lock' | 'LockOpen' | 'Mail' | 'MessageSquareQuote' | 'Minus' | 'Monitor' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'Search' | 'SearchCode' | 'Settings' | 'Smartphone' | 'SquarePlay' | 'Star' | 'Strikethrough' | 'Subscript' | 'Sun' | 'Superscript' | 'TextAlignStart' | 'Trash' | 'TriangleAlert' | 'Trophy' | 'Underline' | 'Undo' | 'Upload' | 'UserRound' | 'X';
     namespace Variant {
         function filter(value: any): value is Variant;
     }

package/dist/core/components/visuals/Icon.js

@@ -80,6 +80,7 @@ function Icon({ className, variant, size: sizing = 'md' }) {
             'RefreshCw',
             'RotateCcw',
             'RotateCw',
+            'Search',
             'SearchCode',
             'Settings',
             'Smartphone',
@@ -235,6 +236,8 @@ function getIcon(variant) {
             return lucide_react_1.RotateCcw;
         case 'RotateCw':
             return lucide_react_1.RotateCw;
+        case 'Search':
+            return lucide_react_1.Search;
         case 'SearchCode':
             return lucide_react_1.SearchCode;
         case 'Settings':

package/dist/core/containers/AssetRepositoryContainer.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function AssetRepositoryContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/core/containers/AssetRepositoryContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetRepositoryContainer = AssetRepositoryContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("../client");
+const hooks_1 = require("../hooks");
+const repository_1 = require("../repository");
+// container
+function AssetRepositoryContainer({ children }) {
+    // bind to hooks
+    const client = (0, client_1.useEditorApi)();
+    const repository = (0, react_1.useMemo)(() => {
+        return new repository_1.AssetRepository(client);
+    }, [client]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(hooks_1.AssetRepositoryContext.Provider, { value: repository, children: children }));
+}

package/dist/core/containers/CollectionRepositoryContainer.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function CollectionRepositoryContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/core/containers/CollectionRepositoryContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionRepositoryContainer = CollectionRepositoryContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("../client");
+const hooks_1 = require("../hooks");
+const repository_1 = require("../repository");
+// container
+function CollectionRepositoryContainer({ children }) {
+    // bind to hooks
+    const client = (0, client_1.useEditorApi)();
+    const repository = (0, react_1.useMemo)(() => {
+        return new repository_1.CollectionRepository(client);
+    }, [client]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(hooks_1.CollectionRepositoryContext.Provider, { value: repository, children: children }));
+}

package/dist/core/containers/PageRepositoryContainer.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function PageRepositoryContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/core/containers/PageRepositoryContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageRepositoryContainer = PageRepositoryContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("../client");
+const hooks_1 = require("../hooks");
+const repository_1 = require("../repository");
+// container
+function PageRepositoryContainer({ children }) {
+    // bind to hooks
+    const client = (0, client_1.useEditorApi)();
+    const repository = (0, react_1.useMemo)(() => {
+        return new repository_1.PageRepository(client);
+    }, [client]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(hooks_1.PageRepositoryContext.Provider, { value: repository, children: children }));
+}

package/dist/core/containers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AssetRepositoryContainer';
+export * from './CollectionRepositoryContainer';
+export * from './PageRepositoryContainer';