@nascentdigital/funnel-ui 4.5.2 → 4.5.4

package/dist/Tailwind.d.ts

@@ -193,7 +193,7 @@ export declare namespace Tailwind {
             handler: () => void;
         } | {
             handler: import("tailwindcss/types/config").PluginCreator;
-            config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+            config?: Partial<import("tailwindcss/types/config").Config>;
         })[];
     };
     function toPixel(value: number): PixelSize;

package/dist/Tailwind.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tailwind = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const aspect_ratio_1 = __importDefault(require("@tailwindcss/aspect-ratio"));
-const container_queries_1 = __importDefault(require("@tailwindcss/container-queries"));
 const color_1 = __importDefault(require("color"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
@@ -168,28 +167,21 @@ var Tailwind;
                         'panel-md': '739px',
                         // 1280px with 102px gutters
                         'panel-lg': '1075px'
-                    }
+                    },
                 }
             },
             // plugins
             plugins: [
                 // aspect ratios
                 aspect_ratio_1.default,
-                // container queries
-                container_queries_1.default,
-                // custom selectors
+                // custom variants
                 (0, plugin_1.default)(function ({ addVariant }) {
                     // not first/last child
                     addVariant('not-first', '&:not(:first-child)');
                     addVariant('not-last', '&:not(:last-child)');
                 }),
-                // block theming
-                (0, plugin_1.default)(function ({ addComponents, matchUtilities, matchVariant, theme }) {
-                    // blow up if there's no themes
-                    if (!themes) {
-                        throw new funnel_core_1.ArgumentError('Tailwind.createConfig() is missing "themes" arg');
-                    }
-                    // counter: provides custom counting control via tailwind
+                // counter utils
+                (0, plugin_1.default)(function ({ matchUtilities, theme }) {
                     matchUtilities({
                         'counter': (value) => ({
                             counterReset: value
@@ -203,21 +195,75 @@ var Tailwind;
                     }, {
                         values: theme('counterName')
                     });
-                    // block theming: provides custom counting control via tailwind
-                    Object.entries(themes).forEach(([themeId, { group = 'default' }]) => addComponents({
-                        // first block
-                        [`*:not(.nd-Block.nd-themeGroup-${group}) + .nd-Block.nd-themeGroup-${group}`]: {
-                            paddingTop: 'var(--nd-section-pt-value)'
+                }),
+                // max-width container queries
+                (0, plugin_1.default)(function ({ matchUtilities, matchVariant, theme }) {
+                    var _a;
+                    // helpers
+                    function parseValue(value) {
+                        var _a, _b;
+                        const numericValue = (_b = (_a = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
+                        if (numericValue === null) {
+                            return null;
+                        }
+                        return parseFloat(value);
+                    }
+                    // container query generator
+                    const values = (_a = theme('containers')) !== null && _a !== void 0 ? _a : {};
+                    matchUtilities({
+                        '@container': (value, { modifier }) => {
+                            return {
+                                'container-type': value,
+                                'container-name': modifier,
+                            };
                         },
-                        // continued block
-                        [`.nd-Block.nd-themeGroup-${group} + .nd-Block.nd-themeGroup-${group}`]: {
-                            paddingTop: 'var(--nd-section-gap-value)'
+                    }, {
+                        values: {
+                            DEFAULT: 'inline-size',
+                            normal: 'normal',
                         },
-                        // last block
-                        [`.nd-Block.nd-themeGroup-${group}:has(+ :not(.nd-Block.nd-themeGroup-${group}))`]: {
-                            paddingBottom: 'var(--nd-section-pb-value)'
+                        modifiers: 'any',
+                    });
+                    const variantOptions = {
+                        values,
+                        sort: (aVariant, zVariant) => {
+                            var _a, _b;
+                            const a = parseFloat(aVariant.value);
+                            const z = parseFloat(zVariant.value);
+                            if (a === null || z === null)
+                                return 0;
+                            // Sort values themselves regardless of unit
+                            if (a - z !== 0)
+                                return a - z;
+                            const aLabel = (_a = aVariant.modifier) !== null && _a !== void 0 ? _a : '';
+                            const zLabel = (_b = zVariant.modifier) !== null && _b !== void 0 ? _b : '';
+                            // Explicitly move empty labels to the end
+                            if (aLabel === '' && zLabel !== '') {
+                                return 1;
+                            }
+                            else if (aLabel !== '' && zLabel === '') {
+                                return -1;
+                            }
+                            // Sort labels alphabetically in the English locale
+                            // We are intentionally overriding the locale because we do not want the sort to
+                            // be affected by the machine's locale (be it a developer or CI environment)
+                            return aLabel.localeCompare(zLabel, 'en', { numeric: true });
                         }
-                    }));
+                    };
+                    matchVariant('@', (value = '', { modifier }) => {
+                        const parsed = parseValue(value);
+                        return parsed !== null ? `@container ${modifier !== null && modifier !== void 0 ? modifier : ''} (min-width: ${value})` : [];
+                    }, variantOptions);
+                    matchVariant('@max', (value = '', { modifier }) => {
+                        const parsed = parseValue(value);
+                        return parsed !== null ? `@container ${modifier !== null && modifier !== void 0 ? modifier : ''} (max-width: ${value})` : [];
+                    }, variantOptions);
+                }, 
+                // configuration
+                {
+                    theme: {
+                        containers: {},
+                    },
                 })
             ]
         };

package/dist/client/hooks/breakpoint/BreakpointContainer.d.ts

@@ -1,6 +1,6 @@
 import { Breakpoints } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
-export declare function BreakpointContainer({ breakpoints, children }: BreakpointContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare function BreakpointContainer({ breakpoints: breakpointsRaw, children }: BreakpointContainer.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace BreakpointContainer {
     type Props = {
         breakpoints?: Readonly<Breakpoints>;

package/dist/client/hooks/breakpoint/BreakpointContainer.js

@@ -4,10 +4,12 @@ exports.BreakpointContainer = BreakpointContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const react_1 = require("react");
+const useLatestValue_1 = require("../useLatestValue");
 const BreakpointContext_1 = require("./BreakpointContext");
 // container
-function BreakpointContainer({ breakpoints = funnel_core_1.Breakpoints.defaults, children }) {
+function BreakpointContainer({ breakpoints: breakpointsRaw = funnel_core_1.Breakpoints.defaults, children }) {
     // bind state + observer
+    const breakpoints = (0, useLatestValue_1.useLatestValue)(breakpointsRaw);
     const [context, setContext] = (0, react_1.useState)({
         breakpoints
     });

package/dist/client/interaction/Carousel.d.ts

@@ -9,7 +9,7 @@ export declare namespace Carousel {
         infinite?: boolean;
         autoplay?: boolean;
         autoplayInterval?: Duration;
-        disableClipping?: boolean;
+        disableClipping?: boolean | 'left' | 'right';
         renderIndicator?: Transform<RenderIndicatorArgs, ReactNode>;
         renderNavButton?: Transform<RenderNavButtonArgs, ReactNode>;
         renderPlayButton?: Transform<RenderPlayButtonArgs, ReactNode>;

package/dist/client/interaction/Carousel.js

@@ -204,11 +204,11 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
     hotkeysRef.current = container;
     // render nothing if there are no children
     if (childCount === 0 || !children) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'Carousel-empty'), children: "No content" }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-Carousel-empty'), children: "No content" }));
     }
     // or render single child if there's nothing else
     else if (childCount === 1) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'Carousel-single'), children: children }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-Carousel-single'), children: children }));
     }
     const onDragStart = () => {
         // stop autoplay (if running)
@@ -305,29 +305,29 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
         setPlay(!play);
     };
     // otherwise, render carousel
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classnames_1.default)(className, 'Carousel-root outline-none', {
-            'Carousel-dragging': state === 'dragging',
-            'Carousel-animating': state === 'animating'
-        }), tabIndex: -1, "aria-roledescription": "carousel", children: [(0, jsx_runtime_1.jsxs)("div", { ref: pagerRef, className: (0, classnames_1.default)('Carousel-pager', {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classnames_1.default)(className, 'nd-Carousel-root outline-none', {
+            'nd-Carousel-dragging': state === 'dragging',
+            'nd-Carousel-animating': state === 'animating'
+        }), tabIndex: -1, "aria-roledescription": "carousel", children: [(0, jsx_runtime_1.jsxs)("div", { ref: pagerRef, className: (0, classnames_1.default)('nd-Carousel-pager', {
                     'invisible': !pager,
-                    'overflow-visible': disableClipping,
-                    'overflow-hidden': !disableClipping,
+                    'nd-Carousel-disableClipping': disableClipping === true,
+                    'nd-Carousel-disableClipping-left': disableClipping === 'left',
+                    'nd-Carousel-disableClipping-right': disableClipping === 'right',
                     'pointer-events-none': state !== 'ready' && state !== 'dragging'
-                }), onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), onPointerDown: () => setPlay(false), children: [(0, jsx_runtime_1.jsx)(react_1.motion.ol, { className: "Carousel-pages", style: { x: pagerTranslate }, drag: "x", dragMomentum: false, onDragStart: onDragStart, onDragEnd: onDragEnd, onDrag: onDrag, "aria-atomic": "false", "aria-live": canAutoplay && play && !interacting ? 'off' : 'polite', children: pages.map(({ id, order, page, index, active, virtual }) => (0, jsx_runtime_1.jsx)("li", Object.assign({ id: `${carouselId}-${id}`, className: (0, classnames_1.default)('Carousel-page', {
-                                'Carousel-pageActive': active,
-                                'Carousel-pagePrev': index === prevIndex,
-                                'Carousel-pageNext': index === nextIndex,
-                                'Carousel-pageDragActive': dragIndex !== undefined && dragIndex === index,
-                                'Carousel-pageDragPrev': dragIndex !== undefined && (dragIndex - 1) === index,
-                                'Carousel-pageDragNext': dragIndex !== undefined && (dragIndex + 1) === index,
-                                'Carousel-pageHidden': state !== 'animating' &&
-                                    ((!active && index !== prevIndex && index !== nextIndex && dragIndex === undefined)
-                                        || (dragIndex !== undefined && dragIndex !== index && (dragIndex - 1) !== index && (dragIndex + 1) !== index))
+                }), onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), onPointerDown: () => setPlay(false), children: [(0, jsx_runtime_1.jsx)(react_1.motion.ol, { className: "nd-Carousel-pages", style: { x: pagerTranslate }, drag: "x", dragMomentum: false, onDragStart: onDragStart, onDragEnd: onDragEnd, onDrag: onDrag, "aria-atomic": "false", "aria-live": canAutoplay && play && !interacting ? 'off' : 'polite', children: pages.map(({ id, order, page, index, active, virtual }) => (0, jsx_runtime_1.jsx)("li", Object.assign({ id: `${carouselId}-${id}`, className: (0, classnames_1.default)('nd-Carousel-page', {
+                                'nd-Carousel-pageActive': active,
+                                'nd-Carousel-pagePrev': index === prevIndex,
+                                'nd-Carousel-pageNext': index === nextIndex,
+                                'nd-Carousel-pageDragActive': dragIndex !== undefined && dragIndex === index,
+                                'nd-Carousel-pageDragPrev': dragIndex !== undefined && (dragIndex - 1) === index,
+                                'nd-Carousel-pageDragNext': dragIndex !== undefined && (dragIndex + 1) === index,
+                                'nd-Carousel-pageHidden': ((!active && index !== prevIndex && index !== nextIndex && dragIndex === undefined)
+                                    || (dragIndex !== undefined && dragIndex !== index && (dragIndex - 1) !== index && (dragIndex + 1) !== index))
                             }), style: { margin: `0 ${spacing}px`, order } }, (!virtual && {
                             role: 'tabpanel',
                             'aria-label': `${index + 1} of ${childCount}`,
                             'aria-labelledby': `${carouselId}_${index}_ref`
-                        }), { children: page }), id)) }), (0, jsx_runtime_1.jsx)("div", { className: "Carousel-pagesAlt", children: children.map((page, index) => (0, jsx_runtime_1.jsx)("div", { className: "Carousel-page", children: page }, index)) })] }), (0, jsx_runtime_1.jsxs)("nav", { className: "Carousel-controls", children: [renderNavButton
+                        }), { children: page }), id)) }), (0, jsx_runtime_1.jsx)("div", { className: "nd-Carousel-pagesAlt", children: children.map((page, index) => (0, jsx_runtime_1.jsx)("div", { className: "nd-Carousel-page", children: page }, index)) })] }), (0, jsx_runtime_1.jsxs)("nav", { className: "nd-Carousel-controls", children: [renderNavButton
                         ?
                             renderNavButton({
                                 type: 'prev',
@@ -336,7 +336,7 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
                                     : infinite || dragIndex > 0,
                                 enabled: prevIndex !== undefined,
                                 props: {
-                                    className: 'Carousel-prev',
+                                    className: 'nd-Carousel-prev',
                                     onClick: onPrev,
                                     onPointerEnter: () => setInteracting(true),
                                     onPointerLeave: () => setInteracting(false),
@@ -345,7 +345,7 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
                                 }
                             })
                         :
-                            (0, jsx_runtime_1.jsx)("button", { className: "Carousel-prev", disabled: prevIndex === undefined, onClick: onPrev, onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), "aria-label": prevIndex === undefined ? 'No previous slide' : `Move to slide ${prevIndex + 1} of ${childCount}`, "aria-disabled": prevIndex === undefined, children: "Prev" }), renderNavButton
+                            (0, jsx_runtime_1.jsx)("button", { className: "nd-Carousel-prev", disabled: prevIndex === undefined, onClick: onPrev, onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), "aria-label": prevIndex === undefined ? 'No previous slide' : `Move to slide ${prevIndex + 1} of ${childCount}`, "aria-disabled": prevIndex === undefined }), renderNavButton
                         ?
                             renderNavButton({
                                 type: 'next',
@@ -354,7 +354,7 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
                                     : infinite || dragIndex < childCount - 1,
                                 enabled: nextIndex !== undefined,
                                 props: {
-                                    className: 'Carousel-next',
+                                    className: 'nd-Carousel-next',
                                     onClick: onNext,
                                     onPointerEnter: () => setInteracting(true),
                                     onPointerLeave: () => setInteracting(false),
@@ -363,20 +363,20 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
                                 }
                             })
                         :
-                            (0, jsx_runtime_1.jsx)("button", { className: "Carousel-next", disabled: nextIndex === undefined, onClick: onNext, onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), "aria-label": nextIndex === undefined ? 'No next slide' : `Move to slide ${nextIndex + 1} of ${childCount}`, "aria-disabled": nextIndex === undefined, children: "Next" }), canAutoplay && infinite &&
+                            (0, jsx_runtime_1.jsx)("button", { className: "nd-Carousel-next", disabled: nextIndex === undefined, onClick: onNext, onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), "aria-label": nextIndex === undefined ? 'No next slide' : `Move to slide ${nextIndex + 1} of ${childCount}`, "aria-disabled": nextIndex === undefined }), canAutoplay && infinite &&
                         (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderPlayButton
                                 ?
                                     renderPlayButton({
                                         props: {
                                             ref: playButtonRef,
-                                            className: 'Carousel-play',
+                                            className: 'nd-Carousel-play',
                                             onClick: onTogglePlay,
                                             'aria-label': play ? 'Stop slide rotation' : 'Start slide rotation'
                                         }
                                     })
                                 :
-                                    (0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, className: "Carousel-play", onClick: onTogglePlay, "aria-label": play ? 'Stop slide rotation' : 'Start slide rotation', children: play ? 'Pause' : 'Play' }) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "Carousel-indicatorsWrap", children: (0, jsx_runtime_1.jsx)("ol", { ref: indicatorsRef, className: "Carousel-indicators", onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), role: "tablist", "aria-label": "Choose slide to display", children: children.map((_, index) => (0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('Carousel-indicator', {
-                            'Carousel-indicatorActive': index === activeIndex
+                                    (0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, className: "nd-Carousel-play", onClick: onTogglePlay, "aria-label": play ? 'Stop slide rotation' : 'Start slide rotation', children: play ? 'Pause' : 'Play' }) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "nd-Carousel-indicatorsWrap", children: (0, jsx_runtime_1.jsx)("ol", { ref: indicatorsRef, className: "Carousel-indicators", onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), role: "tablist", "aria-label": "Choose slide to display", children: children.map((_, index) => (0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('nd-Carousel-indicator', {
+                            'nd-Carousel-indicatorActive': index === activeIndex
                         }), children: renderIndicator
                             ?
                                 renderIndicator({
@@ -387,7 +387,7 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
                                         : index === dragIndex,
                                     props: {
                                         id: `${carouselId}_${index}_ref`,
-                                        className: 'Carousel-indicatorBtn',
+                                        className: 'nd-Carousel-indicatorBtn',
                                         onClick: e => onJump(e, index),
                                         role: 'tab',
                                         'aria-label': play ? 'Stop slide rotation' : 'Start slide rotation',
@@ -396,7 +396,7 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
                                     }
                                 })
                             :
-                                (0, jsx_runtime_1.jsx)("button", { id: `${carouselId}_${index}_ref`, className: "Carousel-indicatorBtn", disabled: index === activeIndex, onClick: e => onJump(e, index), role: "tab", "aria-label": `Slide ${index + 1}`, "aria-controls": `${carouselId}_${activeIndex}`, "aria-selected": index === activeIndex, children: index + 1 }) }, index)) }) })] }));
+                                (0, jsx_runtime_1.jsx)("button", { id: `${carouselId}_${index}_ref`, className: "nd-Carousel-indicatorBtn", disabled: index === activeIndex, onClick: e => onJump(e, index), role: "tab", "aria-label": `Slide ${index + 1}`, "aria-controls": `${carouselId}_${activeIndex}`, "aria-selected": index === activeIndex, children: index + 1 }) }, index)) }) })] }));
 }
 function getCarouselSpecs({ spacing, infinite, children, activeIndex, pagerWidth }) {
     // setup for pager with boundaries (bookended)
@@ -490,8 +490,6 @@ async function onAnimateTo({ target, childCount, offset, spacing, infinite, page
     })
         // mark ready after animation
         .finally(() => {
-        // reset drag
-        setDragIndex(undefined);
         // reset state
         setState('ready');
     });

package/dist/client/interaction/index.d.ts

@@ -3,10 +3,4 @@ export * from './ClickObserver';
 export * from './InfiniteScroller';
 export * from './Loader';
 export * from './Marquee';
-export * from './Popup';
-export * from './Tooltip';
-export * from './UILevel';
-export * from './backdrop';
-export * from './focus';
-export * from './modal/index';
 export * from './paginator/index';

package/dist/client/interaction/index.js

@@ -19,10 +19,4 @@ __exportStar(require("./ClickObserver"), exports);
 __exportStar(require("./InfiniteScroller"), exports);
 __exportStar(require("./Loader"), exports);
 __exportStar(require("./Marquee"), exports);
-__exportStar(require("./Popup"), exports);
-__exportStar(require("./Tooltip"), exports);
-__exportStar(require("./UILevel"), exports);
-__exportStar(require("./backdrop"), exports);
-__exportStar(require("./focus"), exports);
-__exportStar(require("./modal/index"), exports);
 __exportStar(require("./paginator/index"), exports);

package/dist/server/Page.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { BlockConfig } from './schema';
+export declare function Page({ className, children }: Page.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Page {
+    type Props = PropsWithChildren & {
+        className?: string;
+    };
+    type Item = ReactElement<BlockProps>;
+}
+type BlockProps = {
+    model: {
+        config: BlockConfig.Presets.ThemeOnly;
+    };
+};
+export {};

package/dist/server/Page.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = Page;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+// component
+function Page({ className, children }) {
+    // group children by themes
+    const blocks = react_1.Children.toArray(children)
+        .flatMap(element => element);
+    const groupedBlocks = groupBlocks(blocks);
+    console.debug('[Page] children', { groupedBlocks, blocks, children });
+    // render
+    return ((0, jsx_runtime_1.jsx)("main", { className: (0, classnames_1.default)(className, 'nd-Page'), children: groupedBlocks.map((blockGroup, index) => {
+            var _a, _b, _c;
+            return (0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)(`nd-Section nd-themeGroup-${(_c = (_b = funnel_core_1.BlockThemes.current()[(_a = blockGroup.theme) !== null && _a !== void 0 ? _a : 'default']) === null || _b === void 0 ? void 0 : _b.group) !== null && _c !== void 0 ? _c : 'default'}`), children: blockGroup.items }, index);
+        }) }));
+}
+function filterBlockProps(node) {
+    return (0, react_1.isValidElement)(node)
+        && !!node.props && typeof node.props === 'object' && !Array.isArray(node.props)
+        && 'model' in node.props && !!node.props.model && typeof node.props.model === 'object' && !Array.isArray(node.props.model);
+}
+function groupBlocks(maybeBlocks) {
+    // group blocks
+    let deferredItems = [];
+    const groupedBlocks = maybeBlocks.reduce((groups, maybeBlock) => {
+        var _a, _b;
+        // handle block
+        let group = funnel_core_1.ArrayUtils.last(groups);
+        if (filterBlockProps(maybeBlock)) {
+            // create new group if theme differs
+            const theme = (_b = (_a = maybeBlock.props.model.config) === null || _a === void 0 ? void 0 : _a.theme.value) !== null && _b !== void 0 ? _b : 'default';
+            if (!group || group.theme !== theme) {
+                // create group
+                group = { theme, items: [] };
+                // flush deferred items (if any)
+                if (deferredItems.length > 0) {
+                    group.items.push(...deferredItems);
+                    deferredItems = [];
+                }
+                // add group
+                groups.push(group);
+            }
+            // add block to group
+            group.items.push(maybeBlock);
+        }
+        // add item to current group
+        else if (group) {
+            group.items.push(maybeBlock);
+        }
+        // or defer item
+        else {
+            deferredItems.push(maybeBlock);
+        }
+        // keep reducing
+        return groups;
+    }, []);
+    // add any deferred items
+    if (deferredItems.length > 0) {
+        groupedBlocks.push({ theme: 'default', items: deferredItems });
+    }
+    // return
+    return groupedBlocks;
+}

package/dist/server/blocks/Block.d.ts

@@ -1,5 +1,5 @@
 import { BlockLayout, Schema, Transform } from '@nascentdigital/funnel-core';
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactElement, ReactNode } from 'react';
 import { HTMLBlockElement } from '../../types';
 import { BlockPanel, ListPanel, MessagePanel, VisualPanel } from '../panels';
 import { BlockConfig } from '../schema';
@@ -20,6 +20,7 @@ export declare namespace Block {
             id: TBlockId;
             name: string;
             version: number;
+            hint?: string;
             className?: string;
             message?: TMessage;
             visual?: TVisual;
@@ -50,7 +51,8 @@ export declare namespace Block {
                 listPanelProps?: ListPanel.Props.Configuration & {
                     itemProps: TItemProps;
                 };
-            } : {}));
+            } : {})) & HTMLBlockElement<'div'>;
         }
     }
+    function filterNode(node: ReactNode): node is ReactElement<Props>;
 }

package/dist/server/blocks/Block.js

@@ -50,7 +50,7 @@ function Block(_a) {
 }
 // extension
 (function (Block) {
-    function createSchema({ id, name, version, message, visual, list }) {
+    function createSchema({ id, name, version, hint, message, visual, list, extendConfigSchema }) {
         // build fields schema and panel key mapping
         let fieldsSchema = {};
         const panelKeyMapping = {};
@@ -67,12 +67,13 @@ function Block(_a) {
             panelKeyMapping.listKey = 'list';
         }
         // create config schema
-        const configSchema = panels_1.BlockPanel.getConfigSchema(Object.assign({ fields: fieldsSchema }, panelKeyMapping));
+        const configSchema = panels_1.BlockPanel.getConfigSchema(Object.assign(Object.assign({ fields: fieldsSchema }, panelKeyMapping), { extend: extendConfigSchema }));
         // create block schema
         const schema = funnel_core_1.Schema.Block.create({
             id,
             name,
             version,
+            hint,
             config: configSchema,
             fields: fieldsSchema,
             getConfig: args => panels_1.BlockPanel.getConfig(Object.assign({ args }, panelKeyMapping)),
@@ -125,7 +126,7 @@ function Block(_a) {
                 }
             };
             // render block
-            return ((0, jsx_runtime_1.jsx)(Block, { className: (0, classnames_1.default)(className, args.className), config: config, layout: layout, renderPanel: getPanel }));
+            return ((0, jsx_runtime_1.jsx)(Block, { id: props.id, className: (0, classnames_1.default)(className, args.className), config: config, layout: layout, renderPanel: getPanel }));
         };
         // return
         return {
@@ -134,6 +135,12 @@ function Block(_a) {
         };
     }
     Block.create = create;
+    function filterNode(node) {
+        return (0, react_1.isValidElement)(node)
+            && !!node.props && typeof node.props === 'object' && !Array.isArray(node.props)
+            && 'model' in node.props && !!node.props.model && typeof node.props.model === 'object' && !Array.isArray(node.props.model);
+    }
+    Block.filterNode = filterNode;
 })(Block || (exports.Block = Block = {}));
 function renderLayout({ renderPanel, layout }) {
     // render root container (row/column/stack)

package/dist/server/blocks/Editorial.d.ts

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { HTMLBlockElement } from '../../types';
 import { Caption, FreeFormContent, Headline, Title, Visual } from '../fields';
 import { BlockConfig } from '../schema';
-export declare function Editorial({ className, editorial, titleTag, headlineTag, captionTag, freeFormContentTag, headerDecorator, visualDecorator, visualLoading, ...props }: Editorial.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function Editorial({ className, model, titleTag, headlineTag, captionTag, freeFormContentTag, headerDecorator, visualDecorator, visualLoading, ...props }: Editorial.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Editorial {
     const schema: Schema.Block<"_nd-editorial", {
         visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
@@ -20,7 +20,7 @@ export declare namespace Editorial {
         visualLayout: Schema.EnumField<Schema.EnumField.Options<BlockConfig.VisualLayout>>;
     }>;
     type Props = HTMLBlockElement<'div'> & {
-        editorial: Model;
+        model: Model;
         titleTag?: Title.Tag;
         headlineTag?: Headline.Tag;
         captionTag?: Caption.Tag;

package/dist/server/blocks/Editorial.js

@@ -23,14 +23,14 @@ const schema_1 = require("../schema");
 // block
 function Editorial(_a) {
     var _b, _c, _d, _e, _f;
-    var { className, editorial, titleTag = 'span', headlineTag = 'div', captionTag = 'div', freeFormContentTag = 'div', headerDecorator, visualDecorator, visualLoading = 'eager' } = _a, props = __rest(_a, ["className", "editorial", "titleTag", "headlineTag", "captionTag", "freeFormContentTag", "headerDecorator", "visualDecorator", "visualLoading"]);
+    var { className, model, titleTag = 'span', headlineTag = 'div', captionTag = 'div', freeFormContentTag = 'div', headerDecorator, visualDecorator, visualLoading = 'eager' } = _a, props = __rest(_a, ["className", "model", "titleTag", "headlineTag", "captionTag", "freeFormContentTag", "headerDecorator", "visualDecorator", "visualLoading"]);
     // dont render if missing model
-    if (!editorial) {
+    if (!model) {
         console.warn('[Editorial] attempted to render without editorial model');
         return null;
     }
     // render
-    const { title: titleRaw, headline: headlineRaw, caption: captionRaw, ctas: ctasRaw, visual: visualRaw, content: contentRaw, extraContent: extraContentRaw } = editorial.fields;
+    const { title: titleRaw, headline: headlineRaw, caption: captionRaw, ctas: ctasRaw, visual: visualRaw, content: contentRaw, extraContent: extraContentRaw } = model.fields;
     const visual = visualRaw === null || visualRaw === void 0 ? void 0 : visualRaw.value;
     const title = titleRaw === null || titleRaw === void 0 ? void 0 : titleRaw.value;
     const headline = headlineRaw === null || headlineRaw === void 0 ? void 0 : headlineRaw.value;
@@ -38,7 +38,7 @@ function Editorial(_a) {
     const ctas = (_b = ctasRaw === null || ctasRaw === void 0 ? void 0 : ctasRaw.value) !== null && _b !== void 0 ? _b : [];
     const content = contentRaw === null || contentRaw === void 0 ? void 0 : contentRaw.value;
     const extraContent = extraContentRaw === null || extraContentRaw === void 0 ? void 0 : extraContentRaw.value;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Block nd-Editorial', schema_1.BlockConfig.Theme.getClassName((_d = (_c = editorial === null || editorial === void 0 ? void 0 : editorial.config) === null || _c === void 0 ? void 0 : _c.theme) === null || _d === void 0 ? void 0 : _d.value), schema_1.BlockConfig.VisualLayout.getClassName((_f = (_e = editorial === null || editorial === void 0 ? void 0 : editorial.config) === null || _e === void 0 ? void 0 : _e.visualLayout) === null || _f === void 0 ? void 0 : _f.value)) }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-content", children: [(title || headline || caption || ctas.length > 0) &&
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Block nd-Editorial', schema_1.BlockConfig.Theme.getClassName((_d = (_c = model === null || model === void 0 ? void 0 : model.config) === null || _c === void 0 ? void 0 : _c.theme) === null || _d === void 0 ? void 0 : _d.value), schema_1.BlockConfig.VisualLayout.getClassName((_f = (_e = model === null || model === void 0 ? void 0 : model.config) === null || _e === void 0 ? void 0 : _e.visualLayout) === null || _f === void 0 ? void 0 : _f.value)) }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-content", children: [(title || headline || caption || ctas.length > 0) &&
                     (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-headerWrap", children: [(0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-header", children: [title &&
                                         (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-Editorial-title", as: titleTag, title: title }), headline &&
                                         (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-Editorial-headline", as: headlineTag, headline: headline }), caption &&

package/dist/server/blocks/Form.d.ts

@@ -3,7 +3,7 @@ import { JSXElementConstructor } from 'react';
 import { HTMLBlockElement, HTMLElements } from '../../types';
 import { Caption, Headline, Title } from '../fields';
 import { FormMessage } from './FormMessage';
-export declare function Form({ className, titleTag, headlineTag, captionTag, privacyStatementTag, form, component: ClientForm, ...props }: Form.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function Form({ className, titleTag, headlineTag, captionTag, privacyStatementTag, model, component: ClientForm, ...props }: Form.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Form {
     const schema: (formId: string) => Schema.Block<"_nd-form", {
         title: Schema.Optional<Schema.TextField>;
@@ -30,7 +30,7 @@ export declare namespace Form {
         headlineTag?: Headline.Tag;
         captionTag?: Caption.Tag;
         privacyStatementTag?: Caption.Tag;
-        form: Model;
+        model: Model;
         component: Component;
     };
     type Tag = HTMLElements.Standard.Container;

package/dist/server/blocks/Form.js

@@ -23,10 +23,10 @@ const schema_1 = require("../schema");
 const FormMessage_1 = require("./FormMessage");
 // component
 function Form(_a) {
-    var { className, titleTag = 'span', headlineTag = 'h2', captionTag = 'div', privacyStatementTag = 'div', form, component: ClientForm } = _a, props = __rest(_a, ["className", "titleTag", "headlineTag", "captionTag", "privacyStatementTag", "form", "component"]);
+    var { className, titleTag = 'span', headlineTag = 'h2', captionTag = 'div', privacyStatementTag = 'div', model, component: ClientForm } = _a, props = __rest(_a, ["className", "titleTag", "headlineTag", "captionTag", "privacyStatementTag", "model", "component"]);
     // dont render if missing model
-    const { config, fields } = form !== null && form !== void 0 ? form : {};
-    if (!form) {
+    const { config, fields } = model !== null && model !== void 0 ? model : {};
+    if (!model) {
         console.warn('[Form] attempted to render without form model');
         return null;
     }

package/dist/server/blocks/Message.js

@@ -21,9 +21,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const Block_1 = require("./Block");
 // component
 function Message(_a) {
+    var _b;
     var { className } = _a, props = __rest(_a, ["className"]);
     // extract variant
-    const variant = funnel_core_1.Schema.EnumField.Value.fromData(props.model.config.variant);
+    const variant = funnel_core_1.Schema.EnumField.Value.fromData((_b = props.model) === null || _b === void 0 ? void 0 : _b.config.variant);
     // render
     return (0, jsx_runtime_1.jsx)(Message.Component, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Message', Message.Variant.getClassName(variant)) }, props));
 }