@nascentdigital/funnel-editor 4.5.2 → 4.5.3

package/dist/EditorApp.js

@@ -36,5 +36,5 @@ function EditorApp({ fonts }) {
         return null;
     }
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('Editor-wrap', ...fonts), children: (0, jsx_runtime_1.jsx)(core_1.AppStateContainer, { children: (0, jsx_runtime_1.jsx)(core_1.SettingsContainer, { children: (0, jsx_runtime_1.jsx)(react_hotkeys_hook_1.HotkeysProvider, { children: (0, jsx_runtime_1.jsx)(core_1.EditorApiContainer, { children: (0, jsx_runtime_1.jsx)(core_1.AuthContainer, { children: (0, jsx_runtime_1.jsx)(client_1.BreakpointContainer, { children: (0, jsx_runtime_1.jsx)(client_1.BackdropContainer, { children: (0, jsx_runtime_1.jsx)(core_1.DialogContainer, { children: (0, jsx_runtime_1.jsx)(core_1.CenterSheetContainer, { children: (0, jsx_runtime_1.jsx)(core_1.SplashContainer, { children: (0, jsx_runtime_1.jsx)(core_1.SiteConfigContainer, { children: (0, jsx_runtime_1.jsx)(EditorRoutes_1.EditorRoutes, {}) }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('Editor-wrap', ...fonts), children: (0, jsx_runtime_1.jsx)(core_1.AppStateContainer, { children: (0, jsx_runtime_1.jsx)(core_1.SettingsContainer, { children: (0, jsx_runtime_1.jsx)(react_hotkeys_hook_1.HotkeysProvider, { children: (0, jsx_runtime_1.jsx)(core_1.EditorApiContainer, { children: (0, jsx_runtime_1.jsx)(core_1.AuthContainer, { children: (0, jsx_runtime_1.jsx)(client_1.BreakpointContainer, { breakpoints: { xs: 0, sm: 480, md: 768, lg: 980, xl: 1200 }, children: (0, jsx_runtime_1.jsx)(core_1.DialogContainer, { children: (0, jsx_runtime_1.jsx)(core_1.CenterSheetContainer, { children: (0, jsx_runtime_1.jsx)(core_1.SplashContainer, { children: (0, jsx_runtime_1.jsx)(core_1.SiteConfigContainer, { children: (0, jsx_runtime_1.jsx)(EditorRoutes_1.EditorRoutes, {}) }) }) }) }) }) }) }) }) }) }) }));
 }

package/dist/core/components/ColorModeToggle.d.ts

@@ -1,8 +1,8 @@
-import { Popup } from '@nascentdigital/funnel-ui/client';
+import { Placement } from '@nascentdigital/funnel-core';
 export declare function ColorModeToggle({ className, popupPlacement }: ColorModeToggle.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace ColorModeToggle {
     type Props = {
         className?: string;
-        popupPlacement?: Popup.Placement;
+        popupPlacement?: Placement;
     };
 }

package/dist/core/components/fields/collection/CollectionPicker.js

@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollectionPicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-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 client_2 = require("../../../client");
+const client_1 = require("../../../client");
 const hooks_1 = require("../../../hooks");
 const feedback_1 = require("../../feedback");
 const interaction_1 = require("../../interaction");
@@ -29,7 +28,7 @@ exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ l
     const [tagTooltip, setTagTooltip] = (0, react_1.useState)();
     const [fetching, setFetching] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)();
-    const editorApi = (0, client_2.useEditorApi)();
+    const editorApi = (0, client_1.useEditorApi)();
     const siteCollections = (0, hooks_1.useCollections)();
     const collectionStore = (0, hooks_1.useCollectionStore)();
     // export service
@@ -174,7 +173,7 @@ exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ l
         deferral.resolve(result !== null && result !== void 0 ? result : undefined);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (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({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (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, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(client_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'), level: "l2", open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", 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)) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (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({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (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, disabled: fetching, 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({ language, schema, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) {
     // show error if we have one

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PagePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-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");
@@ -206,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)(client_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'), level: "l2", open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", 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", 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
@@ -265,7 +264,7 @@ function renderPageRef({ language, template, disabledIds, ref, onPick, setTagToo
     const visibleTags = tags.slice(0, Math.min(tags.length, 2));
     const tooltipTags = tags.length > 2
         ? tags.slice(2)
-        : [];
+        : [...Object.values(funnel_core_1.Schema.AssetField.Tags.image.tags)];
     const disabled = !ref || ref.language !== language || disabledIds.includes(ref.id);
     // helpers
     const onClick = () => {

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

@@ -9,5 +9,5 @@ export declare namespace Animate {
         layout?: boolean;
         effect?: Effect;
     };
-    type Effect = 'fade';
+    type Effect = 'fade' | 'slideFromLeft' | 'slideFromBottom';
 }

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

@@ -18,8 +18,18 @@ function Animate({ className, present = false, layout = false, effect = 'fade',
     Animate.Variants = {
         fade: {
             initial: { opacity: 0, transition: { when: 'beforeChildren' } },
-            animate: { opacity: 1, transition: { ease: "easeIn", when: 'beforeChildren' } },
-            exit: { opacity: 0, transition: { ease: "easeOut", when: 'afterChildren' } }
+            animate: { opacity: 1, transition: { duration: 0.4, ease: "easeIn", when: 'beforeChildren' } },
+            exit: { opacity: 0, transition: { duration: 0.3, ease: "easeOut", when: 'afterChildren' } }
+        },
+        slideFromLeft: {
+            initial: { x: '100%', transition: { when: 'beforeChildren' } },
+            animate: { x: 0, transition: { duration: 0.3, ease: "easeIn", when: 'beforeChildren' } },
+            exit: { x: '100%', transition: { duration: 0.3, ease: "easeOut", when: 'afterChildren' } }
+        },
+        slideFromBottom: {
+            initial: { y: '100%', transition: { when: 'beforeChildren' } },
+            animate: { y: 0, transition: { duration: 0.3, ease: "easeIn", when: 'beforeChildren' } },
+            exit: { y: '100%', transition: { duration: 0.3, ease: "easeOut", when: 'afterChildren' } }
         }
     };
 })(Animate || (exports.Animate = Animate = {}));

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

@@ -88,7 +88,7 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
         }
     };
     // 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-[420px] max-w-full flex flex-col gap-l8 pt-l8 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-md', {
+    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-[420px] max-w-full flex flex-col gap-l8 pt-l8 interpolate', 'border border-solid border-glass-stroke-l1/tint5 rounded-md', {
             '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 &&

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

@@ -1,11 +1,11 @@
 import { Callback, Provider, Transform } from '@nascentdigital/funnel-core';
-import { HTMLMotionProps, Variants } from 'framer-motion';
+import { HTMLMotionProps } from 'framer-motion';
 import { PropsWithChildren, ReactNode } from 'react';
-export declare function SideSheet({ className, title, wide, backdrop, disabled, disableDismiss, disableOverlay, disableSave, canSave, renderSaveLabel, onSave: onSaveRaw, open, onOpened: onOpenedRaw, onClose: onCloseRaw, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, customActions, children, ...props }: SideSheet.Props): import("react").ReactPortal | null;
+export declare function SideSheet({ className, title, size, backdrop, disabled, disableDismiss, disableOverlay, disableSave, canSave, renderSaveLabel, onSave: onSaveRaw, open, onOpened: onOpenedRaw, onClose: onCloseRaw, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, customActions, children, ...props }: SideSheet.Props): import("react").ReactPortal | null;
 export declare namespace SideSheet {
     type Props = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren & {
         title: ReactNode;
-        wide?: boolean;
+        size?: Size;
         backdrop?: Backdrop;
         disabled?: boolean;
         disableDismiss?: boolean;
@@ -20,7 +20,7 @@ export declare namespace SideSheet {
         onClose?: Callback.Void;
         onClosed?: Callback.Void;
     };
-    type State = 'editing' | 'validating' | 'saving' | 'error' | 'saved';
+    type Size = 'xs' | 'sm' | 'md' | 'lg';
     type Backdrop = 'none' | 'glass';
+    type State = 'editing' | 'validating' | 'saving' | 'error' | 'saved';
 }
-export declare const Animations: Record<'background' | 'slideRight', Variants>;

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

@@ -14,22 +14,25 @@ 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.SideSheet = SideSheet;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
 const classnames_1 = __importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const react_1 = require("motion/react");
 const react_2 = require("react");
 const react_dom_1 = require("react-dom");
+const Animate_1 = require("./Animate");
 const Button_1 = require("./Button");
 // component
 function SideSheet(_a) {
-    var { className, title, wide, backdrop = 'none', disabled = false, disableDismiss = false, disableOverlay = false, disableSave = false, canSave = funnel_core_1.Fn.True, renderSaveLabel = onRenderSaveLabel, onSave: onSaveRaw = funnel_core_1.Fn.NoOp, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose: onCloseRaw = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, onKeyDown: onKeyDownRaw, customActions, children } = _a, props = __rest(_a, ["className", "title", "wide", "backdrop", "disabled", "disableDismiss", "disableOverlay", "disableSave", "canSave", "renderSaveLabel", "onSave", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "customActions", "children"]);
-    // bind state + hooksb= + refs
+    var _b;
+    var { className, title, size = 'md', backdrop = 'none', disabled = false, disableDismiss = false, disableOverlay = false, disableSave = false, canSave = funnel_core_1.Fn.True, renderSaveLabel = onRenderSaveLabel, onSave: onSaveRaw = funnel_core_1.Fn.NoOp, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose: onCloseRaw = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, onKeyDown: onKeyDownRaw, customActions, children } = _a, props = __rest(_a, ["className", "title", "size", "backdrop", "disabled", "disableDismiss", "disableOverlay", "disableSave", "canSave", "renderSaveLabel", "onSave", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "customActions", "children"]);
+    // bind state + hooks + refs
     const [state, setState] = (0, react_2.useState)('editing');
     const locked = disabled || state === 'validating' || state === 'saving' || state === 'saved';
+    const breakpoint = (_b = (0, hooks_1.useCurrentBreakpoint)()) !== null && _b !== void 0 ? _b : 'xs';
     const id = (0, react_2.useId)();
     const openRef = (0, react_2.useRef)(open);
     openRef.current = open;
@@ -141,51 +144,20 @@ function SideSheet(_a) {
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: open &&
             (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('fixed inset-0 z-popup', {
                     'pointer-events-none': disableOverlay
-                }), variants: exports.Animations.background, initial: "initial", animate: "animate", exit: "exit", onAnimationComplete: definition => onAnimationComplete(definition), onClick: disableDismiss || locked ? undefined : onBackdropClick, layout: true, children: [backdrop !== 'none' &&
+                }), onClick: disableDismiss || locked ? undefined : onBackdropClick, layout: true, children: [backdrop !== 'none' &&
                         (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('fixed inset-0 z-backdrop pointer-events-none', {
                                 'backdrop-blur-[9px] bg-glass/backdrop will-change-[backdrop-filter]': backdrop === 'glass'
-                            }) }, "backdrop"), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'fixed right-0 inset-y-0 pointer-events-none', {
-                            'w-full sm:w-[380px]': !wide,
-                            'w-full md:w-screen-sm': wide,
-                        }), variants: exports.Animations.slideRight, initial: "initial", animate: "animate", exit: "exit", 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-l border-solid border-border-l1 rounded-tl-md rounded-bl-md'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary p-l8", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-scroll", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end items-center gap-l4 p-l8", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
+                            }), variants: Animate_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "backdrop"), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-[40px] md:right-0 md:inset-y-0 z-sheet pointer-events-none', {
+                            'w-full md:w-[320px]': size === 'xs',
+                            'w-full md:w-[380px]': size === 'sm',
+                            'w-full md:w-[480px]': size === 'md',
+                            '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-md text-content-primary p-l8", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 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 &&
                                             (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
-exports.Animations = {
-    background: {
-        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'
-            }
-        }
-    },
-    slideRight: {
-        initial: {
-            x: '100%'
-        },
-        animate: {
-            x: '0'
-        },
-        exit: {
-            x: '100%'
-        }
-    }
-};
 function onRenderSaveLabel(state) {
     switch (state) {
         case 'editing':

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

@@ -96,7 +96,7 @@ exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className,
     }
     // render
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: open &&
-            (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('absolute inset-0 z-popup-l1 pointer-events-auto', 'flex flex-col justify-stretch items-center pt-l12 px-l6 md:px-l10 lg:px-l15'), variants: Animations.container, onAnimationComplete: definition => onAnimationComplete(definition), initial: "hidden", animate: "visible", exit: "exit", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'relative h-full w-full max-w-[1000px] max-h-full overflow-hidden', 'text-onSurface bg-background rounded-t-lg shadow-objectEditor'), children: children })] }, id) }), anchor);
+            (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('absolute inset-0 z-popup pointer-events-auto', 'flex flex-col justify-stretch items-center pt-l12 px-l6 md:px-l10 lg:px-l15'), variants: Animations.container, onAnimationComplete: definition => onAnimationComplete(definition), initial: "hidden", animate: "visible", exit: "exit", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'relative h-full w-full max-w-[1000px] max-h-full overflow-hidden', 'text-onSurface bg-background rounded-t-lg shadow-objectEditor'), children: children })] }, id) }), anchor);
 });
 // animations
 var Animations;

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

@@ -58,7 +58,7 @@ 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-l1 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: [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', {
                             'pointer-events-none opacity-none': !active,
                             'pointer-events-auto opacity-full': active
                         }) }, "backdrop") }) })] }));

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

@@ -1,5 +1,5 @@
 import { BlockLayout, EventBus, Field, FieldModel, Schema } from '@nascentdigital/funnel-core';
-import { PanelLayout } from '@nascentdigital/funnel-ui';
+import { PanelLayout, SlotVariation } from '@nascentdigital/funnel-ui';
 import { Block } from './Block';
 import { IAssetStore } from './IAssetStore';
 import { SectionBlock } from './SectionBlock';
@@ -23,6 +23,9 @@ export declare class BlockConfiguration {
     get nameField(): FieldModel.Config | undefined;
     get themeField(): FieldModel.Config | undefined;
     get layoutField(): Field<Schema.EnumField<Schema.EnumField.Options<PanelLayout>>> | undefined;
+    get slotField(): Field<Schema.EnumField<Schema.EnumField.Options<SlotVariation>>> | undefined;
+    get slotOptions(): string[];
+    gotToNextSlot(): void;
     get layout(): BlockLayout | undefined;
     get events$(): import("rxjs").Observable<EventBus.Event<string, string>>;
     get valid(): boolean;

package/dist/core/domain/BlockConfiguration.js

@@ -94,6 +94,37 @@ class BlockConfiguration {
     get layoutField() {
         return this._editableFields.find(field => field.id === 'layout');
     }
+    get slotField() {
+        return this._editableFields.find(field => field.id === 'slotVariation');
+    }
+    get slotOptions() {
+        const slotField = this.slotField;
+        return slotField ? Object.keys(slotField.schema.options) : [];
+    }
+    gotToNextSlot() {
+        var _a;
+        // get the slot field and skip if the field doesn't exist
+        const slotField = this.slotField;
+        if (!slotField) {
+            return;
+        }
+        // get the current slot value and skip if no value found (should not happen)
+        const currentValue = (_a = slotField.value) === null || _a === void 0 ? void 0 : _a.value;
+        if (!currentValue) {
+            return;
+        }
+        // get all the available slot options
+        const options = this.slotOptions;
+        // compute the next index and account for being out of bound
+        let nextIndex = options.indexOf(currentValue) + 1;
+        if (nextIndex > options.length - 1) {
+            nextIndex = 0;
+        }
+        // get the next slot value
+        const nextSlot = options[nextIndex];
+        // update the slot
+        slotField.value = funnel_core_1.Schema.EnumField.Value.toData(nextSlot);
+    }
     get layout() {
         return this._layout;
     }
@@ -104,7 +135,13 @@ class BlockConfiguration {
         return this.editableFields.every(field => field.valid);
     }
     get modified() {
-        return !funnel_core_1.Value.equals(this.fields.filter(field => field.hasValue).map(field => field.value), this.editableFields.map(field => field.value));
+        const original = this.fields
+            .filter(field => field.hasValue)
+            .map(field => field.value);
+        const updated = this.editableFields
+            .filter(field => field.hasValue)
+            .map(field => field.value);
+        return !funnel_core_1.Value.equals(original, updated);
     }
     getField(fieldId) {
         // return field or throw

package/dist/page/components/config/BlockConfigEditor.d.ts

@@ -1,6 +1,6 @@
 import { Callback } from '@nascentdigital/funnel-core';
 import { BlockConfiguration } from '../../../core';
-export declare function BlockConfigEditor({ configuration, onClose }: BlockConfigEditor.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function BlockConfigEditor({ configuration, onClose }: BlockConfigEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace BlockConfigEditor {
     type Props = {
         configuration?: BlockConfiguration;

package/dist/page/components/config/BlockConfigEditor.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockConfigEditor = BlockConfigEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-const client_1 = require("@nascentdigital/funnel-ui/client");
 const react_1 = require("motion/react");
 const react_2 = require("react");
 const rxjs_1 = require("rxjs");
@@ -12,10 +11,10 @@ const hooks_1 = require("../../hooks");
 const BlockPreview_1 = require("./BlockPreview");
 // editor
 function BlockConfigEditor({ configuration, onClose }) {
+    var _a;
     // bind state + hooks
     const [blockView, setBlockView] = (0, react_2.useState)('desktop');
     const pageController = (0, hooks_1.usePageController)();
-    const touch = (0, client_1.useTouch)();
     const panelLayoutPickerRef = (0, react_2.useRef)(null);
     const { modified = false, valid = false, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration !== null && configuration !== void 0 ? configuration : {};
     const settingsFields = blockView === 'desktop' ? desktopFields : mobileFields;
@@ -60,23 +59,44 @@ function BlockConfigEditor({ configuration, onClose }) {
             layoutField.value = funnel_core_1.Schema.EnumField.Value.toData(selectedLayout);
         }
     };
-    // skip if there's no config
-    if (!configuration) {
-        return null;
-    }
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.SideSheet, { title: "Block Configuration", open: !!configuration, onSave: onSave, onClose: onClose, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration.isConfigInDefault, onClick: () => configuration.reset(), children: "Reset to Default" }), wide: true, children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-sm text-content-primary flex-1", children: "Layout" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "ArrowLeftRight", children: "Rearrange" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), blocksFields.length > 0 &&
-                        (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) }), (0, jsx_runtime_1.jsx)(core_1.Tabs, { items: blockViews, selectedItem: blockView, onSelect: setBlockView }), (0, jsx_runtime_1.jsx)("section", { className: "stacked p-l6 bg-surface1 rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(core_1.Animate, { effect: "fade", present: true, children: (0, jsx_runtime_1.jsx)(BlockPreview_1.BlockPreview, { variant: blockView, configuration: configuration }) }, blockView) }) }), settingsFields.length > 0 &&
-                        (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: settingsFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) }), (0, jsx_runtime_1.jsx)("hr", { className: "divider border-border-l1" })] }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: panelLayoutPickerRef, variant: "card", title: "Pick Block Layout", description: "Select an available layout for this block.", renderItem: (item) => renderPanelLayoutItem(item) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.SideSheet, { size: "xs", title: "Block Configuration", backdrop: "glass", open: !!configuration, onSave: onSave, onClose: onClose, disableDismiss: modified, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration === null || configuration === void 0 ? void 0 : configuration.isConfigInDefault, onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.reset(), children: "Reset to Default" }), children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l9 p-l8", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-sm text-content-primary flex-1", children: "Layout" }), ((_a = configuration === null || configuration === void 0 ? void 0 : configuration.slotOptions) !== null && _a !== void 0 ? _a : []).length > 1 &&
+                                    (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "ArrowLeftRight", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToNextSlot(), children: "Rearrange" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), blocksFields.length > 0 &&
+                            (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) }), (0, jsx_runtime_1.jsx)(core_1.Tabs, { items: blockViews, selectedItem: blockView, onSelect: setBlockView }), (0, jsx_runtime_1.jsx)("section", { className: "stacked p-l6 bg-surface1 rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(core_1.Animate, { effect: "fade", present: true, children: (0, jsx_runtime_1.jsx)(BlockPreview_1.BlockPreview, { variant: blockView, configuration: configuration }) }, blockView) }) }), settingsFields.length > 0 &&
+                            (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: settingsFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) })] }) }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: panelLayoutPickerRef, variant: "card", title: "Pick Block Layout", description: "Select an available layout for this block.", renderItem: (item) => renderPanelLayoutItem(item) })] }));
 }
 function renderPanelLayoutItem(item) {
     switch (item.id) {
-        case 'stack.h':
-            return ((0, jsx_runtime_1.jsx)("div", { children: "Stack H" }));
+        case 'solo':
+            return ((0, jsx_runtime_1.jsx)("div", { className: "p-l6 size-full", children: (0, jsx_runtime_1.jsx)("div", { className: "size-full bg-surface2" }) }));
         case 'stack.v':
-            return ((0, jsx_runtime_1.jsx)("div", { children: "Stack V" }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }));
+        case 'stack.h':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }));
+        case 'brick.v':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }));
+        case 'brick.t':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[20px] w-full bg-surface2" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-l2 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] })] }));
+        case 'brick.r':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-full w-[30px] bg-surface2" })] }));
+        case 'brick.b':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-l2 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-[20px] w-full bg-surface2" })] }));
+        case 'brick.l':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-full w-[30px] bg-surface2" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] })] }));
         case 'nested':
-            return ((0, jsx_runtime_1.jsx)("div", { children: "Nested" }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: "p-l6 size-full", children: (0, jsx_runtime_1.jsx)("div", { className: "px-l5 py-l3 flex h-full bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-surface1" }) }) }));
+        case 'nested.v':
+            return ((0, jsx_runtime_1.jsx)("div", { className: "p-l6 w-full h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-l5 py-l3 flex flex-col gap-l2 h-full bg-surface2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface1" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface1" })] }) }));
+        case 'nested.h':
+            return ((0, jsx_runtime_1.jsx)("div", { className: "p-l6 w-full h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-l5 py-l3 flex gap-l2 h-full bg-surface2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface1" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface1" })] }) }));
+        case 'nested.t':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full w-7/12 bg-surface1" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2" })] }));
+        case 'nested.r':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex flex-col p-l2 bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-[60%] w-full bg-surface1" }) })] }));
+        case 'nested.b':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full w-7/12 bg-surface1" }) })] }));
+        case 'nested.l':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex flex-col p-l2 bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-[60%] w-full bg-surface1" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2" })] }));
         default:
             return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
     }

package/dist/page/components/config/BlockPreview.d.ts

@@ -5,6 +5,6 @@ export declare namespace BlockPreview {
     type Props = {
         className?: string;
         variant: Variant;
-        configuration: BlockConfiguration;
+        configuration?: BlockConfiguration;
     };
 }

package/dist/page/components/config/BlockPreview.js

@@ -23,7 +23,7 @@ const core_1 = require("../../../core");
 // component
 function BlockPreview({ className, variant, configuration }) {
     // determine active panels
-    const { layout } = configuration;
+    const { layout } = configuration !== null && configuration !== void 0 ? configuration : {};
     // sync configuration
     (0, core_1.useBlockConfiguration)(configuration);
     // helpers

package/dist/page/components/config/LegacyBlockConfigEditor.js

@@ -2,24 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LegacyBlockConfigEditor = LegacyBlockConfigEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const rxjs_1 = require("rxjs");
 const core_1 = require("../../../core");
 const hooks_1 = require("../../hooks");
 // editor
 function LegacyBlockConfigEditor({ configuration, onClose }) {
     // bind state + hooks
-    const [closing, setClosing] = (0, react_1.useState)(false);
     const pageController = (0, hooks_1.usePageController)();
     const { modified = false, valid = false } = configuration !== null && configuration !== void 0 ? configuration : {};
     // sync w/ configuration
     (0, core_1.useBlockConfiguration)(configuration);
-    // reset closing on new open
-    (0, react_1.useEffect)(() => {
-        if (configuration) {
-            setClosing(false);
-        }
-    }, [configuration]);
     // helpers
     const onSave = async () => {
         // save config
@@ -31,5 +23,5 @@ function LegacyBlockConfigEditor({ configuration, onClose }) {
     };
     // render
     const { layout } = configuration !== null && configuration !== void 0 ? configuration : {};
-    return ((0, jsx_runtime_1.jsx)(core_1.SideSheet, { title: "Block Configuration", backdrop: "none", open: !!configuration || closing, onSave: onSave, onClose: onClose, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration === null || configuration === void 0 ? void 0 : configuration.isConfigInDefault, onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.reset(), children: "Reset to Default" }), wide: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l9 p-l8", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-wrap justify-center items-start gap-l8", children: [(0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "desktop", layout: layout }), (0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "mobile", layout: layout })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-[max-content_1fr] auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: configuration === null || configuration === void 0 ? void 0 : configuration.editableFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(core_1.SideSheet, { size: "lg", title: "Block Configuration", backdrop: "glass", open: !!configuration, onSave: onSave, onClose: onClose, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration === null || configuration === void 0 ? void 0 : configuration.isConfigInDefault, onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.reset(), children: "Reset to Default" }), children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l9 p-l8", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-wrap justify-center items-start gap-l8", children: [(0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "desktop", layout: layout }), (0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "mobile", layout: layout })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-[max-content_1fr] auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: configuration === null || configuration === void 0 ? void 0 : configuration.editableFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) })] }) }));
 }

package/dist/styles/index.css

@@ -580,10 +580,10 @@ video {
         --color-ix-disabled-content : 156 163 176;
 
         --color-glass: 156 163 176;
-        --color-glass-fill-l1: rgba(226, 232, 240, 0.5);
-        --color-glass-fill-l2: rgba(255, 255, 255, 0.75);
-        --color-glass-stroke-l1: rgba(255, 255, 255, 1);
-        --color-glass-stroke-l2: rgba(226, 232, 240, 1);
+        --color-glass-fill-l1: 203 213 224;
+        --color-glass-fill-l2: 226 232 240;
+        --color-glass-stroke-l1: 156 163 176;
+        --color-glass-stroke-l2: 156 163 176;
 
         --color-destructive-content: 255 84 84;
         --color-destructive: 255 94 94;
@@ -634,10 +634,10 @@ video {
         --color-ix-disabled-content : 156 163 176 !important;
 
         --color-glass: 26 32 44 !important;
-        --color-glass-fill-l1: rgba(0, 0, 0, 0.1) !important;
-        --color-glass-fill-l2: rgba(117, 119, 130, 0.25) !important;
-        --color-glass-stroke-l1: rgba(117, 119, 130, 1) !important;
-        --color-glass-stroke-l2: rgba(30, 29, 44, 1) !important;
+        --color-glass-fill-l1: 0 0 0 !important;
+        --color-glass-fill-l2: 26 32 44 !important;
+        --color-glass-stroke-l1: 117 119 130 !important;
+        --color-glass-stroke-l2: 30 29 44 !important;
 
         --color-destructive-content: 255 84 84 !important;
         --color-destructive: 255 94 94 !important;
@@ -688,10 +688,10 @@ video {
         --color-ix-disabled-content : 156 163 176;
 
         --color-glass: 26 32 44;
-        --color-glass-fill-l1: rgba(0, 0, 0, 0.1);
-        --color-glass-fill-l2: rgba(117, 119, 130, 0.25);
-        --color-glass-stroke-l1: rgba(117, 119, 130, 1);
-        --color-glass-stroke-l2: rgba(30, 29, 44, 1);
+        --color-glass-fill-l1: 0 0 0;
+        --color-glass-fill-l2: 26 32 44;
+        --color-glass-stroke-l1: 117 119 130;
+        --color-glass-stroke-l2: 30 29 44;
 
         --color-destructive-content: 255 84 84;
         --color-destructive: 255 94 94;
@@ -940,7 +940,7 @@ video {
     border-bottom-left-radius: 8px;
 }
 .react-datepicker-popper{
-    z-index: 140;
+    z-index: 150;
 }
 .react-datepicker__header{
     position: relative;
@@ -2047,24 +2047,6 @@ video {
     font-weight: 400;
     line-height: 1.5;
 }
-.Backdrop-root{
-    position: fixed;
-    inset: 0px;
-    background-color: rgb(var(--color-glass) / .8);
-    --tw-backdrop-blur: blur(9px);
-    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-    will-change: backdrop-filter;
-}
-/* vertical stacking */
-.Backdrop-root.Backdrop-l1{
-    z-index: 100;
-}
-.Backdrop-root.Backdrop-l2{
-    z-index: 200;
-}
-.Backdrop-root.Backdrop-l3{
-    z-index: 300;
-}
 .button{
     flex-shrink: 0;
     cursor: pointer;
@@ -3587,12 +3569,19 @@ video {
     --tw-backdrop-blur: blur(10px);
     backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
     background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-    --tw-gradient-from: var(--color-glass-fill-l2) var(--tw-gradient-from-position);
-    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+    --tw-gradient-from: rgb(var(--color-glass-fill-l2) / .5) var(--tw-gradient-from-position);
+    --tw-gradient-to: rgb(var(--color-glass-fill-l2) / 0) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-    --tw-gradient-to: var(--color-glass-fill-l1) var(--tw-gradient-to-position);
+    --tw-gradient-from-position: 0%;
+    --tw-gradient-to: rgb(var(--color-glass-fill-l1) / .5) var(--tw-gradient-to-position);
     --tw-gradient-to-position: 75%;
 }
+@media (prefers-color-scheme: dark){
+
+    .glass-overlay{
+        --tw-gradient-to: rgb(var(--color-glass-fill-l1) / .01) var(--tw-gradient-to-position);
+    }
+}
 .Picker-root{
     margin-left: auto;
     margin-right: auto;
@@ -4292,11 +4281,8 @@ video {
 .z-backdrop{
     z-index: 100;
 }
-.z-backdrop-l1{
-    z-index: 100;
-}
 .z-dialog{
-    z-index: 130;
+    z-index: 140;
 }
 .z-header{
     z-index: 120;
@@ -4305,10 +4291,10 @@ video {
     z-index: 10;
 }
 .z-popup{
-    z-index: 140;
+    z-index: 150;
 }
-.z-popup-l1{
-    z-index: 140;
+.z-sheet{
+    z-index: 130;
 }
 .z-splash{
     z-index: 199;
@@ -4507,6 +4493,10 @@ video {
     width: 20px;
     height: 20px;
 }
+.size-full{
+    width: 100%;
+    height: 100%;
+}
 .h-10{
     height: 10px;
 }
@@ -4561,12 +4551,18 @@ video {
 .h-\[170px\]{
     height: 170px;
 }
+.h-\[20px\]{
+    height: 20px;
+}
 .h-\[210px\]{
     height: 210px;
 }
 .h-\[400px\]{
     height: 400px;
 }
+.h-\[60\%\]{
+    height: 60%;
+}
 .h-\[80px\]{
     height: 80px;
 }
@@ -4675,6 +4671,9 @@ video {
 .w-6{
     width: 6px;
 }
+.w-7\/12{
+    width: 58.333333%;
+}
 .w-8\/12{
     width: 66.666667%;
 }
@@ -4702,6 +4701,9 @@ video {
 .w-\[220px\]{
     width: 220px;
 }
+.w-\[30px\]{
+    width: 30px;
+}
 .w-\[330px\]{
     width: 330px;
 }
@@ -5035,12 +5037,6 @@ video {
     border-top-left-radius: 18px;
     border-top-right-radius: 18px;
 }
-.rounded-bl-md{
-    border-bottom-left-radius: 12px;
-}
-.rounded-tl-md{
-    border-top-left-radius: 12px;
-}
 .border{
     border-width: 1px;
 }
@@ -5105,7 +5101,11 @@ video {
     border-color: rgb(var(--color-draft) / .3);
 }
 .border-glass-stroke-l1{
-    border-color: var(--color-glass-stroke-l1);
+    --tw-border-opacity: 1;
+    border-color: rgb(var(--color-glass-stroke-l1) / var(--tw-border-opacity, 1));
+}
+.border-glass-stroke-l1\/tint5{
+    border-color: rgb(var(--color-glass-stroke-l1) / .5);
 }
 .border-info-content{
     --tw-border-opacity: 1;
@@ -5182,7 +5182,8 @@ video {
     background-color: rgb(var(--color-draft) / .3);
 }
 .bg-glass-fill-l1{
-    background-color: var(--color-glass-fill-l1);
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-glass-fill-l1) / var(--tw-bg-opacity, 1));
 }
 .bg-glass\/backdrop{
     background-color: rgb(var(--color-glass) / .8);
@@ -5423,6 +5424,10 @@ video {
     padding-top: 72px;
     padding-bottom: 72px;
 }
+.py-l3{
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
 .py-l4{
     padding-top: 8px;
     padding-bottom: 8px;
@@ -6201,16 +6206,39 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-ix-secondary) / var(--tw-bg-opacity, 1));
 }
+@media not all and (min-width: 768px){
+
+    .max-md\:inset-x-0{
+        left: 0px;
+        right: 0px;
+    }
+
+    .max-md\:bottom-0{
+        bottom: 0px;
+    }
+
+    .max-md\:top-\[40px\]{
+        top: 40px;
+    }
+
+    .max-md\:rounded-tl-md{
+        border-top-left-radius: 12px;
+    }
+
+    .max-md\:rounded-tr-md{
+        border-top-right-radius: 12px;
+    }
+
+    .max-md\:border-t{
+        border-top-width: 1px;
+    }
+}
 @media (min-width: 480px){
 
     .sm\:w-4\/5{
         width: 80%;
     }
 
-    .sm\:w-\[380px\]{
-        width: 380px;
-    }
-
     .sm\:max-w-screen-sm{
         max-width: 480px;
     }
@@ -6225,6 +6253,15 @@ video {
 }
 @media (min-width: 768px){
 
+    .md\:inset-y-0{
+        top: 0px;
+        bottom: 0px;
+    }
+
+    .md\:right-0{
+        right: 0px;
+    }
+
     .md\:block{
         display: block;
     }
@@ -6241,6 +6278,18 @@ video {
         width: 280px;
     }
 
+    .md\:w-\[320px\]{
+        width: 320px;
+    }
+
+    .md\:w-\[380px\]{
+        width: 380px;
+    }
+
+    .md\:w-\[480px\]{
+        width: 480px;
+    }
+
     .md\:w-screen-sm{
         width: 600px;
     }
@@ -6249,6 +6298,18 @@ video {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
+    .md\:rounded-bl-md{
+        border-bottom-left-radius: 12px;
+    }
+
+    .md\:rounded-tl-md{
+        border-top-left-radius: 12px;
+    }
+
+    .md\:border-l{
+        border-left-width: 1px;
+    }
+
     .md\:px-l10{
         padding-left: 40px;
         padding-right: 40px;

package/dist/styles/tailwind.js

@@ -56,24 +56,13 @@ exports.EditorTailwindConfig = {
             l1: '2px', l2: '4px', l3: '6px', l4: '8px', l5: '12px', l6: '16px', l7: '20px', l8: '24px', l9: '32px', l10: '40px', l11: '48px', l12: '56px', l13: '64px', l14: '72px', l15: '80px', l16: '96px', l17: '120px', l18: '160px', l19: '180px', touchable: '40px', icon: '24px', 'body-sm': '18px' }),
         zIndex: {
             splash: '199',
-            tooltip: '150',
-            'tooltip-l1': '150',
-            'tooltip-l2': '250',
-            'tooltip-l3': '350',
-            popup: '140',
-            'popup-l1': '140',
-            'popup-l2': '240',
-            'popup-l3': '340',
-            dialog: '130',
-            'dialog-l1': '130',
-            'dialog-l2': '230',
-            'dialog-l3': '330',
+            tooltip: '160',
+            popup: '150',
+            dialog: '140',
+            sheet: '130',
             header: '120',
             subheader: '110',
             backdrop: '100',
-            'backdrop-l1': '100',
-            'backdrop-l2': '200',
-            'backdrop-l3': '300',
             fab: '20',
             superoverlay: '11',
             overlay: '10',
@@ -129,6 +118,10 @@ exports.EditorTailwindConfig = {
             'ix-disabled-content': '--color-ix-disabled-content',
             // overlay
             glass: '--color-glass',
+            'glass-fill-l1': '--color-glass-fill-l1',
+            'glass-fill-l2': '--color-glass-fill-l2',
+            'glass-stroke-l1': '--color-glass-stroke-l1',
+            'glass-stroke-l2': '--color-glass-stroke-l2',
             // status
             'destructive-content': '--color-destructive-content',
             'destructive': '--color-destructive',
@@ -140,7 +133,7 @@ exports.EditorTailwindConfig = {
             'draft': '--color-draft',
             'info-content': '--color-info-content',
             'info': '--color-info'
-        })), { inherit: 'inherit', current: 'currentColor', transparent: 'transparent', 'shadow1': 'var(--color-shadow1)', 'shadow2': 'var(--color-shadow2)', 'glass-fill-l1': 'var(--color-glass-fill-l1)', 'glass-fill-l2': 'var(--color-glass-fill-l2)', 'glass-stroke-l1': 'var(--color-glass-stroke-l1)', 'glass-stroke-l2': 'var(--color-glass-stroke-l2)' }),
+        })), { inherit: 'inherit', current: 'currentColor', transparent: 'transparent', 'shadow1': 'var(--color-shadow1)', 'shadow2': 'var(--color-shadow2)' }),
         opacity: {
             'tint0': '.05',
             'tint1': '.1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "4.5.2",
+  "version": "4.5.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -89,5 +89,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "5b63f9cd8843cc111b4458c71aa031a974455241"
+  "gitHead": "ef42bb5440cc23187aeefc29319875ed5402676f"
 }