@nascentdigital/funnel-editor 4.5.7 → 4.6.0

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

@@ -14,22 +14,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.animations = void 0;
 exports.Popup = Popup;
-exports.getPopupPlacement = getPopupPlacement;
 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 client_1 = require("@nascentdigital/funnel-ui/client");
 const classnames_1 = __importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+const Animate_1 = require("./Animate");
 // component
 function Popup(_a) {
-    var _b;
-    var { className, style = {}, anchor, placement, anchorOffset, 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", "placement", "anchorOffset", "viewportPadding", "animation", "backdrop", "disabled", "disableDismiss", "disableOverlay", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "children"]);
+    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"]);
     // bind context
     const id = (0, react_1.useId)();
+    const anchorId = typeof anchor === 'string'
+        ? anchor
+        : id;
     const [contentRef, contentElement] = (0, client_1.useRefElement)();
     const openRef = (0, react_1.useRef)(open);
     openRef.current = open;
@@ -37,8 +39,6 @@ function Popup(_a) {
     onOpenedRef.current = onOpenedRaw;
     const onClosedRef = (0, react_1.useRef)(onClosedRaw);
     onClosedRef.current = onClosedRaw;
-    // re-render on window size change
-    (0, client_1.useViewportSize)();
     // lock tab focus
     (0, react_1.useEffect)(() => {
         // lock when opened
@@ -71,7 +71,7 @@ function Popup(_a) {
         }
     };
     const onAnimationComplete = (definition) => {
-        if (definition === 'visible') {
+        if (definition === 'animate') {
             onOpenedRef.current();
         }
         else if (definition === 'exit') {
@@ -89,72 +89,69 @@ function Popup(_a) {
         }
     };
     // render
-    const popupPlacement = getPopupPlacement({
-        contentElement,
-        anchor,
-        anchorOffset,
-        placement,
-        viewportPadding
-    });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { 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)(popupPlacement.containerClassName, 'fixed inset-0 z-popup', {
-                            'pointer-events-none': disableOverlay
-                        }), variants: exports.animations, initial: animation !== 'out' ? 'hidden' : 'visible', animate: "visible", exit: animation !== 'in' ? 'exit' : 'visible', onAnimationComplete: definition => onAnimationComplete(definition), onClick: disableDismiss ? undefined : onBackdropClick, children: [backdrop !== 'none' &&
-                                (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, style: Object.assign(Object.assign({}, style), ((_b = popupPlacement.style) !== null && _b !== void 0 ? _b : {})), className: (0, classnames_1.default)(className, popupPlacement.className, 'pointer-events-auto'), onKeyDown: onKeyDown, children: children }))] }, id) }) }), document.body) }));
+    const { popupContainerClassName, popupClassName } = 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', {
+                                'pointer-events-none': disableOverlay
+                            }), variants: Animate_1.Animate.Variants.fade, initial: animation !== 'out' ? 'initial' : 'animate', animate: "animate", exit: animation !== 'in' ? 'exit' : 'animate', onAnimationComplete: definition => onAnimationComplete(definition), onClick: disableDismiss ? undefined : onBackdropClick, children: [backdrop !== 'none' &&
+                                    (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)] }));
 }
-// helpers
-exports.animations = {
-    hidden: {
-        opacity: 0
-    },
-    visible: {
-        opacity: 1,
-        transition: {
-            ease: 'easeIn',
-            duration: 0.3,
-            when: 'beforeChildren'
-        }
-    },
-    exit: {
-        opacity: 0,
-        transition: {
-            ease: 'easeIn',
-            duration: 0.15,
-            bounce: 0,
-            when: 'afterChildren'
-        }
+// extension
+(function (Popup) {
+    // anchor helpers
+    Popup.anchorClassName = 'anchor/[--nd-popup-anchor]';
+    function getAnchorStyle(anchorId, styles = {}) {
+        return Object.assign(Object.assign({}, styles), { '--nd-popup-anchor': normalizeAnchorId(anchorId) });
     }
-};
-function getPopupPlacement({ anchor, anchorOffset = 0, placement = 'bottom', viewportPadding = 16, contentElement }) {
-    // center if there's no anchor
-    const anchorRect = funnel_core_1.Browser.getElementRect(anchor);
-    if (!anchorRect || !contentElement) {
+    Popup.getAnchorStyle = getAnchorStyle;
+    function getAnchorFrame(frame) {
+        return frame && {
+            left: `${frame.left}px`,
+            top: `${frame.top}px`,
+            width: `${frame.width}px`,
+            height: `${frame.height}px`
+        };
+    }
+    Popup.getAnchorFrame = getAnchorFrame;
+    // container
+    function AnchorElement(_a) {
+        var { anchorId, tag, className, style } = _a, props = __rest(_a, ["anchorId", "tag", "className", "style"]);
+        // render
+        return ((0, jsx_runtime_1.jsx)(funnel_ui_1.HTMLContainer, Object.assign({ tag: tag, className: (0, classnames_1.default)(className, Popup.anchorClassName), style: getAnchorStyle(normalizeAnchorId(anchorId), style) }, props)));
+    }
+    Popup.AnchorElement = AnchorElement;
+})(Popup || (exports.Popup = Popup = {}));
+// helpers
+function normalizeAnchorId(anchorId) {
+    return anchorId.startsWith('--')
+        ? anchorId
+        : `--${anchorId}`;
+}
+function getPopupClassNames({ anchor, placement }) {
+    //  return anchor classes (via tailwind anchor plugin)
+    if (anchor) {
         return {
-            containerClassName: 'flex flex-col justify-end items-center sm:justify-center',
-            className: 'z-dialog'
+            popupContainerClassName: '',
+            popupClassName: (0, classnames_1.default)('!fixed anchored/[--nd-popup-anchor] z-dialog', {
+                'anchored-top': placement === 'top',
+                'anchored-top-span-right': placement === 'top-start',
+                'anchored-bottom': placement === 'bottom',
+                'anchored-left': placement === 'left',
+                'anchored-right': placement === 'right',
+                'anchored-bottom-span-left': placement === 'bottom-end'
+            })
         };
     }
-    // or place absolutely
+    // or treat as modal if there's no anchor
     else {
-        // resolve placement args
-        const containerRect = new funnel_core_1.Rect(0, 0, window.innerWidth, window.innerHeight);
-        const popupFrame = funnel_core_1.Placement.forContent({
-            containerRect,
-            containerPadding: viewportPadding,
-            anchorRect,
-            anchorOffset,
-            placement,
-            contentSize: {
-                width: contentElement.offsetWidth,
-                height: contentElement.offsetHeight
-            }
-        });
-        // set style to frame
         return {
-            className: 'absolute z-dialog',
-            style: popupFrame
+            popupContainerClassName: 'flex flex-col justify-end items-center sm:justify-center',
+            popupClassName: 'z-dialog'
         };
     }
 }

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

@@ -54,6 +54,7 @@ exports.QuickInput = (0, react_1.forwardRef)(function QuickInput(_, ref) {
             setSchema(schema);
             setInitialValue(initialValue);
             setPopupProps(popupProps);
+            console.debug('[QuickInput] opening editor with', popupProps);
             // create/set deferral
             const deferral = new funnel_core_1.Deferral();
             setDeferral(deferral);
@@ -61,6 +62,7 @@ exports.QuickInput = (0, react_1.forwardRef)(function QuickInput(_, ref) {
             const result = await deferral.promise;
             // clear deferral
             setDeferral(undefined);
+            console.debug('[QuickInput] closing editor with', popupProps);
             // return deferral
             return result;
         },

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

@@ -92,8 +92,8 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
             'opacity-none': !opened,
             'opacity-full': opened
         }), animation: "out", open: !!deferral, onOpened: () => setOpened(true), onClose: onClose, onClosed: () => setOpened(false), children: [(0, jsx_runtime_1.jsxs)("section", { className: "px-l8", children: [(0, jsx_runtime_1.jsx)("h3", { className: "heading-sm text-content-primary", children: title }), description &&
-                        (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: description })] }), (0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)({
-                    'flex flex-wrap gap-l5 items-center px-l8 pb-l8 overflow-y-scroll': variant === 'card',
+                        (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: description })] }), (0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('px-l8 pb-l8 overflow-y-scroll scrollbar-thin scroller-edge', {
+                    '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({
@@ -104,7 +104,7 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
                 })) })] })));
 });
 function renderCard({ item, content, selected, onSelect }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l2 shrink-0", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[72px] h-[55px]', {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "group flex flex-col items-center gap-l2 shrink-0 cursor-pointer", onClick: () => onSelect(item.id), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[72px] h-[55px] group-hover:FieldCard-hover group-active:FieldCard-press', {
                     'FieldCard-selected': selected
-                }), onClick: () => onSelect(item.id), children: content }), (0, jsx_runtime_1.jsx)("span", { className: "label-xxs text-content-tertiary cursor-default", children: item.label })] }, item.id));
+                }), children: content }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('label-xxs text-content-tertiary interpolate-fast pointer-events-none', 'group-hover:text-content-secondary group-active:text-content-primary'), children: item.label })] }, item.id));
 }

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

@@ -1,7 +1,9 @@
 import { Callback } from '@nascentdigital/funnel-core';
 import { Icon } from '../visuals';
-export declare function Tabs<TId extends string>({ className, items, selectedItem, onSelect }: Tabs.Props<TId>): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs<TId extends string>({ className, variant, size, items, selectedItem, onSelect }: Tabs.Props<TId>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Tabs {
+    type Variant = 'underlined' | 'highlighted';
+    type Size = 'md' | 'sm';
     type Item<TId extends string = string> = {
         id: TId;
         label: string;
@@ -9,6 +11,8 @@ export declare namespace Tabs {
     };
     type Props<TId extends string = string> = {
         className?: string;
+        variant?: Variant;
+        size?: Size;
         items: ReadonlyArray<Item<TId>>;
         selectedItem: TId;
         onSelect?: Callback<TId>;

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

@@ -10,15 +10,25 @@ const classnames_1 = __importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const visuals_1 = require("../visuals");
 // component
-function Tabs({ className, items, selectedItem, onSelect = funnel_core_1.Fn.NoOp }) {
+function Tabs({ className, variant = 'underlined', size = 'md', items, selectedItem, onSelect = funnel_core_1.Fn.NoOp }) {
     // render
-    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, classnames_1.default)(className), children: (0, jsx_runtime_1.jsx)("ul", { className: "grid auto-cols-fr grid-flow-col items-center", children: items.map(item => (0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)('group relative border-b border-solid border-content-tertiary cursor-pointer interpolate', {
+    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, classnames_1.default)(className), children: (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('grid auto-cols-fr grid-flow-col items-center cursor-pointer', {
+                'rounded-lg bg-surface-placeholder-raised p-l1': variant === 'highlighted',
+            }), children: items.map(item => (0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)('group relative interpolate', {
+                    'border-b border-solid border-content-tertiary': variant === 'underlined',
                     'pointer-events-none': item.id === selectedItem,
-                    'hover:border-content-secondary active:border-content-tertiary': item.id !== selectedItem
-                }), onClick: () => onSelect(item.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center items-center gap-l6", children: [item.icon &&
-                                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: item.icon, size: "nav" }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block label-sm py-l6 interpolate', {
+                    'hover:border-content-secondary active:border-content-tertiary': item.id !== selectedItem,
+                }), onClick: () => onSelect(item.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex justify-center items-center gap-l6', {
+                            'relative z-supersurface': variant === 'highlighted'
+                        }), children: [item.icon &&
+                                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: item.icon, size: "nav" }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block interpolate', {
                                     'text-content-primary': item.id === selectedItem,
-                                    'text-content-secondary group-hover:text-content-primary group-active:text-content-tertiary': item.id !== selectedItem
-                                }), children: item.label })] }), item.id === selectedItem &&
-                        (0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { id: "underline", layoutId: "underline", className: "absolute inset-x-0 -bottom-px block divider border-b-2 border-ix-primary -mb-px z-supersurface" })] }, item.id)) }) }));
+                                    'text-content-secondary group-hover:text-content-primary group-active:text-content-tertiary': item.id !== selectedItem,
+                                    'py-l6 label-md': variant === 'underlined' && size === 'md',
+                                    'py-l3 label-xs': variant === 'underlined' && size === 'sm',
+                                    'py-l3 label-md': variant === 'highlighted' && size === 'md',
+                                    'py-l2 label-xs': variant === 'highlighted' && size === 'sm'
+                                }), children: item.label })] }), variant === 'underlined' && item.id === selectedItem &&
+                        (0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { id: "underline", layoutId: "underline", className: "absolute inset-x-0 -bottom-px block divider border-b-2 border-ix-primary -mb-px z-supersurface" }), variant === 'highlighted' && item.id === selectedItem &&
+                        (0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { layoutId: "active-tab", className: "absolute z-surface inset-0 bg-surface-placeholder rounded-lg" })] }, item.id)) }) }));
 }

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

@@ -11,12 +11,12 @@ export declare class MenuController<TItemId extends string, TContext = any> {
     set items(items: ReadonlyArray<MenuItem<TItemId>> | undefined);
     get selectedItem(): TItemId | undefined;
     set selectedItem(item: TItemId | undefined);
-    get anchor(): HTMLElement | undefined;
+    get anchor(): string | undefined;
     private _context?;
     get context(): TContext | undefined;
     get changed$(): Observable<Date>;
     get isOpen(): boolean;
-    open(anchor: HTMLElement, context?: TContext): void;
+    open(anchor: string, context?: TContext): void;
     close(): void;
     private raiseChange;
 }

package/dist/core/components/interaction/table/TableItem.d.ts

@@ -1,10 +1,11 @@
 import { Callback } from '@nascentdigital/funnel-core';
 import { MouseEvent, PropsWithChildren, ReactNode } from 'react';
 import { Icon } from '../../visuals';
-export declare function TableItem({ className, nested, details, iconLeft, iconRight, disabled, onClick, children }: TableItem.Props): import("react/jsx-runtime").JSX.Element;
+export declare function TableItem({ className, anchorId, nested, details, iconLeft, iconRight, disabled, onClick, children }: TableItem.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace TableItem {
     type Props = PropsWithChildren & {
         className?: string;
+        anchorId?: string;
         nested?: boolean;
         details?: ReactNode;
         iconLeft?: Icon.Variant | ReactNode;

package/dist/core/components/interaction/table/TableItem.js

@@ -8,8 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
 const visuals_1 = require("../../visuals");
+const interaction_1 = require("../../interaction");
 // component
-function TableItem({ className, nested = false, details, iconLeft, iconRight, disabled = false, onClick, children }) {
+function TableItem({ className, anchorId, nested = false, details, iconLeft, iconRight, disabled = false, onClick, children }) {
     // render
     const labelOnly = !details && !iconRight;
     const interactive = !!onClick;
@@ -17,8 +18,9 @@ function TableItem({ className, nested = false, details, iconLeft, iconRight, di
             'bg-surface1': !nested,
             'bg-transparent': nested,
             'interactive-disabled': !interactive && !disabled,
-            'bg-ix-disabled/tint1 pointer-events-none': disabled
-        }), tabIndex: 0, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "interactive-tint" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex-1 flex items-center gap-l3 py-l5'), children: [visuals_1.Icon.Variant.filter(iconLeft)
+            'bg-ix-disabled/tint1 pointer-events-none': disabled,
+            [interaction_1.Popup.anchorClassName]: !!anchorId
+        }), style: anchorId ? interaction_1.Popup.getAnchorStyle(anchorId) : undefined, tabIndex: 0, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "interactive-tint" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex-1 flex items-center gap-l3 py-l5'), children: [visuals_1.Icon.Variant.filter(iconLeft)
                                 ?
                                     (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: (0, classnames_1.default)({
                                             'text-content-secondary': !disabled,

package/dist/core/components/layout/InfoPanel.js

@@ -19,6 +19,7 @@ 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 classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const feedback_1 = require("../feedback");
 const interaction_1 = require("../interaction");
 // component
@@ -26,10 +27,11 @@ function InfoPanel(_a) {
     var { className, contentClassName, title, caption, status, menu: menuItems, onMenuSelect = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["className", "contentClassName", "title", "caption", "status", "menu", "onMenuSelect", "children"]);
     // bind refs
     const menu = (0, interaction_1.useMenuController)(menuItems);
+    const anchorId = (0, react_1.useId)();
     // helpers
     const onMenuOpen = (e) => {
         // open menu
-        menu.open(e.currentTarget);
+        menu.open(anchorId);
     };
     const onMenuClick = (menuId) => {
         // close menu
@@ -40,7 +42,7 @@ function InfoPanel(_a) {
     // render
     return ((0, jsx_runtime_1.jsxs)("section", { className: (0, classnames_1.default)(className, 'flex flex-col p-l7', 'bg-surface1 rounded-xxl'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [status &&
                         (0, jsx_runtime_1.jsx)(feedback_1.StatusIcon, { variant: status, size: "md" }), (0, jsx_runtime_1.jsx)("h3", { className: "flex-1 heading-sm text-content-primary ellipsis", children: title }), menu &&
-                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { className: "shrink-0", icon: "EllipsisVertical", onClick: onMenuOpen }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { controller: menu, onItemClick: onMenuClick })] })] }), caption &&
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { anchorId: anchorId, className: "shrink-0", icon: "EllipsisVertical", onClick: onMenuOpen }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { controller: menu, onItemClick: onMenuClick })] })] }), caption &&
                 (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { className: (0, classnames_1.default)('markup-caption mt-l6', {
                         'text-destructive-content bg-destructive/tint0 p-l5 rounded-md': status === 'error'
                     }), markdown: caption }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(contentClassName), children: children })] }));

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' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'SearchCode' | 'Settings' | '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' | '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

@@ -69,6 +69,7 @@ function Icon({ className, variant, size: sizing = 'md' }) {
             'Mail',
             'MessageSquareQuote',
             'Minus',
+            'Monitor',
             'MonitorCog',
             'Moon',
             'NotebookPen',
@@ -81,6 +82,7 @@ function Icon({ className, variant, size: sizing = 'md' }) {
             'RotateCw',
             'SearchCode',
             'Settings',
+            'Smartphone',
             'SquarePlay',
             'Star',
             'Strikethrough',
@@ -211,6 +213,8 @@ function getIcon(variant) {
             return lucide_react_1.MessageSquareQuote;
         case 'Minus':
             return lucide_react_1.Minus;
+        case 'Monitor':
+            return lucide_react_1.Monitor;
         case 'MonitorCog':
             return lucide_react_1.MonitorCog;
         case 'Moon':
@@ -235,6 +239,8 @@ function getIcon(variant) {
             return lucide_react_1.SearchCode;
         case 'Settings':
             return lucide_react_1.Settings;
+        case 'Smartphone':
+            return lucide_react_1.Smartphone;
         case 'SquarePlay':
             return lucide_react_1.SquarePlay;
         case 'Star':

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

@@ -2,4 +2,3 @@ export * from './BlockIcon';
 export * from './Icon';
 export * from './Illustration';
 export * from './Logo';
-export * from './SkeletonLayout';

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

@@ -18,4 +18,3 @@ __exportStar(require("./BlockIcon"), exports);
 __exportStar(require("./Icon"), exports);
 __exportStar(require("./Illustration"), exports);
 __exportStar(require("./Logo"), exports);
-__exportStar(require("./SkeletonLayout"), exports);

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

@@ -8,6 +8,10 @@ export declare class Block<TBlock extends Schema.Block = Schema.Block> extends I
     readonly config: ReadonlyArray<FieldModel.Config>;
     readonly fields: ReadonlyArray<FieldModel>;
     readonly nameField: Field<Schema.TextField>;
+    readonly messageFields: ReadonlyArray<FieldModel>;
+    readonly visualFields: ReadonlyArray<FieldModel>;
+    readonly listsFields: ReadonlyArray<FieldModel>;
+    readonly extendedFields: ReadonlyArray<FieldModel>;
     private _modifiedOn?;
     private _savingOn?;
     constructor(args: Block.ConstructorArgs<TBlock>);

package/dist/core/domain/Block.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Block = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
 const rxjs_1 = require("rxjs");
 const BlockConfiguration_1 = require("./BlockConfiguration");
 const ItemBase_1 = require("./ItemBase");
@@ -31,6 +32,12 @@ class Block extends ItemBase_1.ItemBase {
             publishedValue: undefined,
             required: true
         });
+        // group fields
+        const messageKeys = Object.keys(funnel_ui_1.MessagePanel.Fields.getSchema());
+        this.messageFields = this.fields.filter(field => messageKeys.includes(field.id));
+        this.visualFields = this.fields.filter(field => field.id === 'visual');
+        this.listsFields = this.fields.filter(field => field.id === 'list');
+        this.extendedFields = this.fields.filter(field => !messageKeys.includes(field.id) && field.id !== 'visual' && field.id !== 'list');
         // listen to field changes
         this.eventBus.events$
             .pipe((0, rxjs_1.filter)(funnel_core_1.Field.Event.filter), (0, rxjs_1.filter)(event => (event.type === 'changed' || event.type === 'reset')

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

@@ -8,15 +8,19 @@ export declare class BlockConfiguration {
     readonly assetStore: IAssetStore;
     readonly sectionBlock?: SectionBlock;
     readonly block: Block;
-    readonly fields: ReadonlyArray<FieldModel.Config>;
+    private _fields;
     private _editableFields;
+    private _scope;
     private _layout?;
     private _slotState;
     private _defaultConfig?;
     private _isConfigInDefault?;
     constructor({ block: blockOrSectionBlock, assetStore }: BlockConfiguration.ConstructorArgs);
+    get fields(): ReadonlyArray<FieldModel.Config>;
     get editableFields(): ReadonlyArray<FieldModel.Config>;
     set editableFields(fields: ReadonlyArray<FieldModel.Config>);
+    get scope(): BlockConfiguration.Scope;
+    set scope(scope: BlockConfiguration.Scope);
     get blocksFields(): FieldModel.Config[];
     get blockFieldData(): Schema.Block.Data.ForFields<Schema.Fields>;
     get desktopFields(): FieldModel.Config[];
@@ -27,6 +31,7 @@ export declare class BlockConfiguration {
     get slotState(): Readonly<BlockConfiguration.SlotState>;
     gotToNextSlot(): void;
     gotToPreviousSlot(): void;
+    get hasPanels(): boolean;
     get messageFields(): Record<keyof MessagePanel.Config.Keys<'message'>, FieldModel.Config | undefined>;
     get listFields(): Record<keyof ListPanel.Config.Keys<'list'>, FieldModel.Config | undefined>;
     get visualFields(): Record<keyof VisualPanel.Config.Keys<'visual'>, FieldModel.Config | undefined>;
@@ -39,12 +44,14 @@ export declare class BlockConfiguration {
     getFieldData(fieldId: string): Schema.Field.LinkedData | undefined;
     getEditableField(fieldId: string): FieldModel.Config | undefined;
     save(): void;
-    reset(): void;
+    resetToDefault(): void;
     get isConfigInDefault(): boolean | undefined;
     sync(): void;
+    reset(): void;
     private raiseEvent;
 }
 export declare namespace BlockConfiguration {
+    type Scope = 'desktop' | 'mobile';
     type SlotState = {
         field?: Field<Schema.EnumField<Schema.EnumField.Options<SlotVariation>>>;
         options: ReadonlyArray<SlotVariation>;

package/dist/core/domain/BlockConfiguration.js

@@ -9,37 +9,34 @@ const SectionBlock_1 = require("./SectionBlock");
 class BlockConfiguration {
     constructor({ block: blockOrSectionBlock, assetStore }) {
         // initialize core fields
-        const eventBus = new funnel_core_1.EventBus();
-        this.eventBus = eventBus;
+        this.eventBus = new funnel_core_1.EventBus();
         this.assetStore = assetStore;
         const fields = [];
-        this.fields = fields;
+        this._fields = fields;
         this._editableFields = fields;
+        this._scope = 'desktop';
         this._isConfigInDefault = false;
         this._slotState = { options: [] };
-        // initialize section block
+        // handle section blocks
         if (blockOrSectionBlock instanceof SectionBlock_1.SectionBlock) {
             // capture parents
             this.sectionBlock = blockOrSectionBlock;
             this.block = blockOrSectionBlock.block;
-            // add name
-            const nameField = blockOrSectionBlock.block.nameField.clone({ eventBus });
-            nameField.reset(funnel_core_1.Schema.TextField.Value.toData(blockOrSectionBlock.block.name));
-            fields.push(nameField);
         }
         // or regular block
         else {
             this.block = blockOrSectionBlock;
         }
-        // add fields
-        this.block.config.forEach(field => fields.push(field.clone({ eventBus })));
         // sync
-        this.sync();
+        this.reset();
         // force sync if a field is modified
         this.eventBus.events$
             .pipe((0, rxjs_1.filter)(event => funnel_core_1.Field.Event.filter(event) && event.type === 'changed'))
             .subscribe(() => this.sync());
     }
+    get fields() {
+        return this._fields;
+    }
     get editableFields() {
         return this._editableFields;
     }
@@ -47,6 +44,18 @@ class BlockConfiguration {
         this._editableFields = fields;
         this.raiseEvent('changed');
     }
+    get scope() {
+        return this._scope;
+    }
+    set scope(scope) {
+        // ignore if unchanged
+        if (this._scope === scope) {
+            return;
+        }
+        // update + raise event
+        this._scope = scope;
+        this.raiseEvent('changed');
+    }
     get blocksFields() {
         return [
             this.nameField,
@@ -130,6 +139,16 @@ class BlockConfiguration {
         };
         field.value = funnel_core_1.Schema.EnumField.Value.toData(newOption);
     }
+    get hasPanels() {
+        // build list of panel keys
+        const panelKeys = [
+            ...Object.values(funnel_ui_1.MessagePanel.Config.getKeys('message')),
+            ...Object.values(funnel_ui_1.ListPanel.Config.getKeys('list')),
+            ...Object.values(funnel_ui_1.VisualPanel.Config.getKeys('visual'))
+        ];
+        // return true if any keys exist
+        return this._editableFields.some(field => panelKeys.includes(field.id));
+    }
     get messageFields() {
         const keys = funnel_ui_1.MessagePanel.Config.getKeys('message');
         return {
@@ -291,7 +310,7 @@ class BlockConfiguration {
             }
         });
     }
-    reset() {
+    resetToDefault() {
         // set the editable fields to their default values
         this.editableFields.forEach(field => {
             // throw if default config is not set
@@ -378,6 +397,24 @@ class BlockConfiguration {
         // determine if the values of the editable fields are same as default
         this._isConfigInDefault = funnel_core_1.Value.equals(Object.values(this._defaultConfig), this.editableFields.map(field => field.value));
     }
+    reset() {
+        // create new fields
+        const fields = [];
+        // add name field
+        const { eventBus, sectionBlock, block } = this;
+        if (sectionBlock) {
+            const nameField = block.nameField.clone({ eventBus });
+            nameField.reset(funnel_core_1.Schema.TextField.Value.toData(block.name));
+            fields.push(nameField);
+        }
+        // add fields
+        block.config.forEach(field => fields.push(field.clone({ eventBus })));
+        // bind fields
+        this._fields = fields;
+        this._editableFields = fields;
+        // force sync
+        this.sync();
+    }
     raiseEvent(type) {
         this.eventBus.publish(BlockConfiguration.Event.create({ type, configuration: this }));
     }