@nascentdigital/funnel-editor 4.5.7 → 4.6.0

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

@@ -1,429 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonLayout = SkeletonLayout;
-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");
-const Icon_1 = require("./Icon");
-// component
-function SkeletonLayout({ variant, layout }) {
-    // render
-    const tight = variant === 'mobile'
-        ? layout === null || layout === void 0 ? void 0 : layout.tight.mobile
-        : layout === null || layout === void 0 ? void 0 : layout.tight.desktop;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l3", children: [(0, jsx_runtime_1.jsx)("h5", { className: "label-xs text-content-primary leading-[100%]", children: variant === 'mobile' ? 'Mobile' : 'Desktop' }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface2 overflow-hidden rounded-xs', {
-                    'min-h-[100px]': !layout,
-                    'w-[120px]': variant === 'desktop',
-                    'w-[64px]': variant === 'mobile',
-                    'pb-l4': tight === 'above',
-                    'pt-l4': tight === 'below',
-                    'py-l4': tight === 'none'
-                }), children: renderLayout({ variant, layout }) })] }));
-}
-// helpers
-var Skeleton;
-(function (Skeleton) {
-    function HeadlinePart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'bg-ix-primary rounded-xxs overflow-hidden', {
-                'h-6 ': size === 'sm',
-                'h-8': size === 'md'
-            }) }));
-    }
-    Skeleton.HeadlinePart = HeadlinePart;
-    function CaptionPart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'h-4 bg-draft/tint3 rounded-px overflow-hidden', {
-                '': size === 'sm'
-            }) }));
-    }
-    Skeleton.CaptionPart = CaptionPart;
-    function MediaPart({ className, aspect }) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'flex justify-center items-center bg-draft/tint3 rounded-xxs overflow-hidden', {
-                'aspect-square': aspect === 'square' || aspect === 'auto',
-                'aspect-phone': aspect === 'phone',
-                'aspect-tv': aspect === 'tv',
-                'aspect-widescreen': aspect === 'widescreen',
-                'aspect-cinema': aspect === 'cinema'
-            }), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: "text-content-tertiary", variant: "Image", size: {
-                    size: 20,
-                    strokeWidth: 1.5,
-                    absoluteStrokeWidth: false
-                } }) }));
-    }
-    Skeleton.MediaPart = MediaPart;
-    function IconPart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'bg-draft/tint3 rounded-full overflow-hidden', {
-                'w-10 h-10': size === 'sm',
-                'w-14 h-14': size === 'md'
-            }) }));
-    }
-    Skeleton.IconPart = IconPart;
-    function LogoPart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'bg-draft/tint3 rounded-px overflow-hidden', {
-                'w-14 h-6': size === 'sm',
-                'w-20 h-9': size === 'md'
-            }) }));
-    }
-    Skeleton.LogoPart = LogoPart;
-})(Skeleton || (Skeleton = {}));
-function renderLayout({ className, variant, layout }) {
-    // TODO: render empty state if there's no layout
-    if (!layout) {
-        return null;
-    }
-    // render root layout
-    const { type, items } = layout.root;
-    return ((0, jsx_runtime_1.jsx)("div", { className: getContainerClasses({ className, variant, siblingCount: 1, item: layout.root }), children: items.map((item, parentOffset) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
-                className: (0, classnames_1.default)({
-                    'flex-1': type === 'row' && variant !== 'mobile'
-                }),
-                variant,
-                parent: type,
-                parentNested: false,
-                siblingCount: items.length,
-                item,
-                itemPosition: new ItemPosition({
-                    parent: type,
-                    parentOffset,
-                    parentSize: items.length
-                })
-            }) }, `${item.type}.${parentOffset}`)) }));
-}
-function renderItem({ className, parent, parentNested, siblingCount, variant, item, itemPosition }) {
-    // render item
-    const { type: itemType } = item;
-    switch (itemType) {
-        case 'row':
-        case 'column':
-        case 'stack':
-            return ((0, jsx_runtime_1.jsx)("div", { className: getContainerClasses({ className, parent, siblingCount, variant, item }), children: item.items.map((item, parentOffset, items) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
-                        className: (0, classnames_1.default)({
-                            'flex-1': itemType === 'row'
-                        }),
-                        variant,
-                        parent: itemType,
-                        parentNested: true,
-                        siblingCount: items.length,
-                        item: item,
-                        itemPosition: new ItemPosition({
-                            parent: itemType,
-                            parentOffset,
-                            parentSize: items.length
-                        })
-                    }) }, `${item.type}.${parentOffset}`)) }));
-        case 'message':
-            return renderMessage({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
-        case 'visual':
-            return renderVisual({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
-        case 'list':
-            return renderList({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
-        default:
-            console.error('[SkeletonLayout] no support for BlockLayout item', item);
-            return null;
-    }
-}
-function getContainerClasses({ className, variant, parent, item }) {
-    const { type, alignY } = item;
-    // row style
-    if (type === 'row' && variant !== 'mobile') {
-        return (0, classnames_1.default)(className, 'grid gap-l3 px-l4', {
-            'items-start': alignY === 'start',
-            'items-center': alignY === 'center',
-            'items-end': alignY === 'end',
-            'grid-cols-[1fr,1fr]': item.ratio.desktop === '1/1',
-            'grid-cols-[1fr,2fr]': item.ratio.desktop === '1/2',
-            'grid-cols-[1fr,3fr]': item.ratio.desktop === '1/3',
-            'grid-cols-[2fr,1fr]': item.ratio.desktop === '2/1',
-            'grid-cols-[2fr,3fr]': item.ratio.desktop === '2/3',
-            'grid-cols-[3fr,1fr]': item.ratio.desktop === '3/1',
-            'grid-cols-[3fr,2fr]': item.ratio.desktop === '3/2'
-        });
-    }
-    // or stack
-    else if (type === 'stack') {
-        return (0, classnames_1.default)(className, 'stacked-stretch');
-    }
-    // or column
-    else {
-        return (0, classnames_1.default)(className, 'flex flex-col gap-l4');
-    }
-}
-function renderMessage(args) {
-    // resolve props
-    const { variant, item: { textAlign } } = args;
-    const messageClasses = variant === 'mobile'
-        ? (0, classnames_1.default)({
-            'items-start': textAlign.mobile === 'left',
-            'items-center': textAlign.mobile === 'center',
-            'items-end': textAlign.mobile === 'right'
-        })
-        : (0, classnames_1.default)({
-            'items-start': textAlign.desktop === 'left',
-            'items-center': textAlign.desktop === 'center',
-            'items-end': textAlign.desktop === 'right'
-        });
-    // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(messageClasses, getPanelClasses(Object.assign(Object.assign({}, args), { className: 'flex flex-col' }))), children: [(0, jsx_runtime_1.jsx)(Skeleton.HeadlinePart, { className: "w-full mb-l2", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-20", size: "md" })] }) }));
-}
-function renderVisual(args) {
-    // resolve props
-    const { variant, item: { aspectRatio }, parent } = args;
-    const aspect = variant === 'mobile' ? aspectRatio.mobile : aspectRatio.desktop;
-    // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getPanelClasses(Object.assign(Object.assign({}, args), { className: '' }))), children: (0, jsx_runtime_1.jsx)(Skeleton.MediaPart, { className: "w-full", aspect: aspect }) }) }));
-}
-function renderList(args) {
-    // resolve props
-    const { variant, parent, parentNested, item: { layout: layoutRaw, itemType, itemCount: itemCountRaw } } = args;
-    const layout = variant === 'mobile'
-        ? layoutRaw.mobile
-        : layoutRaw.desktop;
-    // render a grid
-    if (layout === 'grid') {
-        return renderGrid(args);
-    }
-    // or render row/column
-    const itemCount = variant === 'mobile'
-        ? itemCountRaw.mobile
-        : itemCountRaw.desktop;
-    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: getListPanelClasses(args), children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderListItem({ variant, parent, parentNested, layout, itemType, index: row, count: itemCount }) }, `list.${row}`)) }) }));
-}
-function getListPanelClasses(args) {
-    // resolve props
-    const { variant, item: { layout: layoutRaw } } = args;
-    const layout = variant === 'mobile'
-        ? layoutRaw.mobile
-        : layoutRaw.desktop;
-    // determine list classes
-    let listClasses = '';
-    switch (layout) {
-        case 'row':
-            listClasses = 'grid grid-rows-1 auto-cols-auto grid-flow-col gap-l2';
-            break;
-        case 'column':
-            listClasses = 'flex flex-col gap-l2';
-            break;
-    }
-    // return completed classes
-    return getPanelClasses(Object.assign(Object.assign({}, args), { className: listClasses }));
-}
-function renderGrid(args) {
-    // determine props
-    const { variant, parent, parentNested, item: { itemType, itemCount: itemCountRaw } } = args;
-    const itemCount = variant === 'mobile'
-        ? itemCountRaw.mobile
-        : itemCountRaw.desktop;
-    const { panelClassName, panelItemClassName } = getGridPanelClasses(args);
-    // render grid (really a flexbox layout with controlled item widths)
-    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: panelClassName, children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderListItem({
-                    className: panelItemClassName,
-                    variant,
-                    parent,
-                    parentNested,
-                    layout: 'grid',
-                    itemType, index: row,
-                    count: itemCount
-                }) }, `list.${row}`)) }) }));
-}
-function getGridPanelClasses(args) {
-    // resolve props
-    const { variant, parent, parentNested, item: { itemType, itemCount: itemCountRaw, itemAlign: itemAlignRaw } } = args;
-    const itemAlign = variant === 'mobile'
-        ? itemAlignRaw.mobile
-        : itemAlignRaw.desktop;
-    // determine list classes
-    const panelClasses = (0, classnames_1.default)('flex flex-wrap gap-l2', {
-        'justify-center': itemAlign === 'center',
-        'justify-end': itemAlign === 'end'
-    });
-    let panelItemClasses = '';
-    switch (itemType) {
-        case 'message':
-        case 'message+visual':
-            panelItemClasses = (0, classnames_1.default)({
-                'w-full': variant === 'mobile' || (variant === 'desktop' && (parent === 'row' || parentNested)),
-                'w-[50px]': variant === 'desktop' && parent !== 'row' && !parentNested
-            });
-            break;
-        case 'visual':
-            panelItemClasses = (0, classnames_1.default)({
-                '': variant === 'mobile' || (variant === 'desktop' && (parent === 'row' || parentNested)),
-                'flex-1': variant === 'desktop' && parent !== 'row' && !parentNested
-            });
-            break;
-        case 'icon':
-            panelItemClasses = (0, classnames_1.default)({});
-            break;
-        case 'logo':
-            panelItemClasses = (0, classnames_1.default)({
-                '': variant === 'desktop',
-                '': variant === 'mobile'
-            });
-            break;
-    }
-    // return completed classes
-    return {
-        panelClassName: getPanelClasses(Object.assign(Object.assign({}, args), { className: panelClasses })),
-        panelItemClassName: panelItemClasses
-    };
-}
-function renderListItem({ className, variant, parent, parentNested, layout, itemType, index, count }) {
-    let itemClassName = '';
-    switch (itemType) {
-        case 'message':
-        case 'message+visual':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-row p-3 bg-background rounded-xxs'), children: [itemType === 'message+visual' &&
-                        (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-content-tertiary rounded-full w-4 h-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)(Skeleton.HeadlinePart, { className: "w-11/12 mb-l1", size: "sm" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "sm" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-8/12", size: "sm" })] })] }));
-        case 'visual': {
-            // determine aspect
-            let aspect;
-            switch (layout) {
-                case 'column':
-                    aspect = parent === 'row' || parentNested
-                        ? 'widescreen'
-                        : variant === 'mobile'
-                            ? 'widescreen'
-                            : 'cinema';
-                    break;
-                case 'row':
-                    aspect = parent === 'row' || parentNested
-                        ? 'square'
-                        : 'widescreen';
-                    break;
-                case 'grid': {
-                    // aspect for mobile/nested
-                    if (variant === 'mobile' || parent === 'row' || parentNested) {
-                        itemClassName = 'w-full';
-                        aspect = count === 1
-                            ? 'square'
-                            : count <= 3
-                                ? 'tv'
-                                : 'widescreen';
-                    }
-                    // adjust aspect based on layout (if it's a grid)
-                    else if (layout === 'grid') {
-                        // set base class
-                        itemClassName = 'min-w-[50px]';
-                        // override base + pick aspect
-                        switch (count) {
-                            case 1:
-                                aspect = 'widescreen';
-                                break;
-                            case 2:
-                                aspect = 'widescreen';
-                                break;
-                            case 3:
-                                itemClassName = index === 1
-                                    ? 'min-w-full'
-                                    : 'min-w-[50px]';
-                                aspect = index === 1
-                                    ? 'cinema'
-                                    : 'tv';
-                                break;
-                            case 4:
-                                aspect = 'tv';
-                                break;
-                            case 5:
-                                itemClassName = index === 3
-                                    ? 'min-w-full'
-                                    : 'min-w-[50px]';
-                                aspect = index === 3
-                                    ? 'cinema'
-                                    : 'tv';
-                                break;
-                            default:
-                                aspect = 'widescreen';
-                                break;
-                        }
-                    }
-                    // otherwise standard
-                    else {
-                        aspect = 'widescreen';
-                    }
-                    break;
-                }
-            }
-            // create visual
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, itemClassName), children: (0, jsx_runtime_1.jsx)(Skeleton.MediaPart, { aspect: aspect }) }));
-        }
-        case 'icon':
-            return ((0, jsx_runtime_1.jsx)(Skeleton.IconPart, { className: (0, classnames_1.default)(className, itemClassName), size: variant === 'mobile' ? 'md' : 'sm' }));
-        case 'logo':
-            return ((0, jsx_runtime_1.jsx)(Skeleton.LogoPart, { className: (0, classnames_1.default)(className, itemClassName), size: variant === 'mobile' ? 'md' : 'sm' }));
-        default:
-            return null;
-    }
-}
-function getPanelWrapClasses({ className, variant, parent, parentNested, item: { mobileOrder, alignY, fullBleed }, itemPosition }) {
-    return variant === 'mobile'
-        ? (0, classnames_1.default)(className, 'w-full flex flex-col', {
-            'justify-start': alignY === 'start',
-            'justify-center': alignY === 'center',
-            'justify-end': alignY === 'end',
-            'order-first': mobileOrder === 'first',
-            'order-last': mobileOrder === 'last',
-            'px-l4': !fullBleed.mobile
-        })
-        : (0, classnames_1.default)(className, 'grid grid-cols-12', {
-            'items-start': alignY === 'start',
-            'items-center': alignY === 'center',
-            'items-end': alignY === 'end',
-            'px-l4': parent !== 'row' && !fullBleed.desktop && !parentNested,
-            '-ml-l4': itemPosition.left && fullBleed.desktop,
-            '-mr-l4': itemPosition.right && fullBleed.desktop
-        });
-}
-function getPanelClasses({ className, variant, parent, parentNested, item: { alignX, size } }) {
-    // force full width for mobile
-    if (variant === 'mobile') {
-        return (0, classnames_1.default)(className);
-    }
-    // or size for desktop
-    switch (parent === 'row' || parentNested ? 'full' : size) {
-        case 'xs':
-            return (0, classnames_1.default)(className, 'col-span-4', {
-                'col-start-1': alignX === 'start',
-                'col-start-5': alignX === 'center',
-                'col-end-13': alignX === 'end'
-            });
-        case 'sm':
-            return (0, classnames_1.default)(className, 'col-span-6', {
-                'col-start-1': alignX === 'start',
-                'col-start-4': alignX === 'center',
-                'col-end-13': alignX === 'end'
-            });
-        case 'md':
-            return (0, classnames_1.default)(className, 'col-span-8', {
-                'col-start-1': alignX === 'start',
-                'col-start-3': alignX === 'center',
-                'col-end-13': alignX === 'end'
-            });
-        case 'lg':
-            return (0, classnames_1.default)(className, 'col-span-10', {
-                'col-start-1': alignX === 'start',
-                'col-start-2': alignX === 'center',
-                'col-end-13': alignX === 'end'
-            });
-        case 'full':
-            return (0, classnames_1.default)(className, 'col-span-full');
-        default:
-            return className;
-    }
-}
-class ItemPosition {
-    constructor(args) {
-        // initialize instance variables
-        this.parent = args.parent;
-        this.parentOffset = args.parentOffset;
-        this.parentSize = args.parentSize;
-    }
-    get left() {
-        return this.parent === 'row' && this.parentOffset === 0;
-    }
-    get right() {
-        return this.parent === 'row' && this.parentOffset === 1;
-    }
-}

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

@@ -1,8 +0,0 @@
-import { Block, SectionBlock } from '../../../core';
-export declare function BlockConfig({ className, block: blockOrSectionBlock }: BlockConfig.Props): import("react/jsx-runtime").JSX.Element | undefined;
-export declare namespace BlockConfig {
-    type Props = {
-        className?: string;
-        block: Block | SectionBlock;
-    };
-}

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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockConfig = BlockConfig;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const core_1 = require("../../../core");
-const BlockConfigEditor_1 = require("./BlockConfigEditor");
-const LegacyBlockConfigEditor_1 = require("./LegacyBlockConfigEditor");
-// component
-function BlockConfig({ className, block: blockOrSectionBlock }) {
-    // bind ref
-    const [configuration, setConfiguration] = (0, react_1.useState)();
-    // skip if there's no config
-    const block = blockOrSectionBlock instanceof core_1.SectionBlock
-        ? blockOrSectionBlock.block
-        : blockOrSectionBlock;
-    const { config } = block;
-    if (config.length === 0) {
-        return undefined;
-    }
-    // render
-    const valid = config.every(field => field.valid);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.StatusChip, { className: className, variant: valid ? 'success' : 'error', onClick: () => setConfiguration(blockOrSectionBlock.getConfiguration()), children: "Configure" }), process.env.NEXT_PUBLIC_EDITOR_BLOCK_CONFIG === 'experimental'
-                ?
-                    (0, jsx_runtime_1.jsx)(BlockConfigEditor_1.BlockConfigEditor, { configuration: configuration, onClose: () => setConfiguration(undefined) })
-                :
-                    (0, jsx_runtime_1.jsx)(LegacyBlockConfigEditor_1.LegacyBlockConfigEditor, { configuration: configuration, onClose: () => setConfiguration(undefined) })] }));
-}

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

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

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

@@ -1,129 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-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 classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("motion/react");
-const react_2 = require("react");
-const rxjs_1 = require("rxjs");
-const core_1 = require("../../../core");
-const FieldHeader_1 = require("../../../core/components/fields/FieldHeader");
-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 panelLayoutPickerRef = (0, react_2.useRef)(null);
-    const { layoutField, modified = false, valid = false, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration !== null && configuration !== void 0 ? configuration : {};
-    const settingsFields = blockView === 'desktop' ? desktopFields : mobileFields;
-    // sync w/ configuration
-    (0, core_1.useBlockConfiguration)(configuration);
-    // reset to desktop when open
-    (0, react_2.useEffect)(() => {
-        if (configuration) {
-            setBlockView('desktop');
-        }
-    }, [configuration]);
-    // helpers
-    const onSave = async () => {
-        // save config
-        configuration === null || configuration === void 0 ? void 0 : configuration.save();
-        // wait for page to save
-        await (0, rxjs_1.firstValueFrom)(pageController.saved$);
-        // complete
-        onClose();
-    };
-    const onChangePanelLayout = async (e) => {
-        var _a;
-        // skip if there's no layout field (shouldn't happen)
-        if (!layoutField) {
-            return;
-        }
-        // pick new layout
-        const { schema: layoutSchema, value: layoutData } = layoutField;
-        const selectedLayout = await ((_a = panelLayoutPickerRef.current) === null || _a === void 0 ? void 0 : _a.open({
-            anchor: e.currentTarget,
-            anchorOffset: 4,
-            placement: 'top',
-            items: Object.entries(layoutSchema.options).map(([layout, option]) => ({
-                id: layout,
-                label: option.name
-            })),
-            selectedItem: layoutData === null || layoutData === void 0 ? void 0 : layoutData.value
-        }));
-        // update if something was picked
-        if (selectedLayout) {
-            layoutField.value = funnel_core_1.Schema.EnumField.Value.toData(selectedLayout);
-        }
-    };
-    // render
-    const { options: slotOptions = [], currentIndex: slotIndex = 0 } = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.slotState) !== null && _a !== void 0 ? _a : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.SideSheet, { title: "Block Configuration", size: "xs", 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-l6", children: [(0, jsx_runtime_1.jsxs)("section", { className: "grid grid-cols-2 gap-x-l5 gap-y-l4", children: [blocksFields.length > 0 &&
-                                    (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-full", field: field, size: "xs" }, field.id)) }), layoutField && layoutField.schema.enum.length > 1 &&
-                                    (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Layout", size: "xs" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), slotOptions.length > 1 &&
-                                    (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Arrangement", size: "xs" }), slotOptions.length === 2
-                                                ?
-                                                    (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "ArrowLeftRight", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToNextSlot(), children: "Swap" })
-                                                :
-                                                    (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToPreviousSlot(), children: (0, jsx_runtime_1.jsx)(core_1.Icon, { variant: "ArrowLeft", size: { size: 16, strokeWidth: 1, absoluteStrokeWidth: true } }) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-xs", children: [slotIndex + 1, " of ", slotOptions.length] }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToNextSlot(), children: (0, jsx_runtime_1.jsx)(core_1.Icon, { variant: "ArrowRight", size: { size: 16, strokeWidth: 1, absoluteStrokeWidth: true } }) })] })] })] }), (0, jsx_runtime_1.jsx)(core_1.Tabs, { items: blockViews, selectedItem: blockView, onSelect: setBlockView }), (0, jsx_runtime_1.jsx)(react_1.motion.section, { className: "p-l6 bg-surface-placeholder-raised rounded-md", layout: true, children: configuration &&
-                                (0, jsx_runtime_1.jsx)(BlockPreview_1.BlockPreview, { variant: blockView, configuration: configuration }) }), 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, size: "xs" }, 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) {
-    const panel = (className = 'flex-1') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder rounded-[2px]', className) }));
-    const panelPaddedX = 'px-l4';
-    const panelPaddedY = 'py-l4';
-    const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
-    const panelGap = 'gap-l1';
-    const nestedPanel = (config = {}) => {
-        // unpack config
-        const { panelClassName, nestedPanelClassName, multipleItems = false } = config;
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full bg-surface-placeholder rounded-[2px]', panelClassName, panelGap, { 'p-l2': multipleItems }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex-1 bg-surface-placeholder-raised rounded-[2px]', nestedPanelClassName, { 'm-l2': !multipleItems }) }), multipleItems &&
-                    (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex-1 bg-surface-placeholder-raised rounded-[2px]', nestedPanelClassName) })] }));
-    };
-    switch (item.id) {
-        case 'solo':
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: panel('size-full') }));
-        case 'stack.v':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [panel(), panel()] }));
-        case 'stack.h':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel(), panel()] }));
-        case 'brick.v':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel(), panel(), panel()] }));
-        case 'brick.t':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel('flex-1 w-full h-[20px]'), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-1', panelGap), children: [panel(), panel()] })] }));
-        case 'brick.r':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full', panelPadded, panelGap), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full flex-1 flex-col', panelGap), children: [panel(), panel()] }), panel('h-full w-[30px]')] }));
-        case 'brick.b':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-1', panelGap), children: [panel(), panel()] }), panel('flex-1 w-full h-[20px]')] }));
-        case 'brick.l':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full', panelPadded, panelGap), children: [panel('h-full w-[30px]'), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full flex-1 flex-col', panelGap), children: [panel(), panel()] })] }));
-        case 'nested':
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel() }));
-        case 'nested.v':
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel({ panelClassName: 'flex-col', multipleItems: true }) }));
-        case 'nested.h':
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel({ multipleItems: true }) }));
-        case 'nested.t':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full flex-col", panelPadded, panelGap), children: [nestedPanel({ panelClassName: 'flex-1' }), panel()] }));
-        case 'nested.r':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [panel(), nestedPanel({ panelClassName: 'flex-1' })] }));
-        case 'nested.b':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full flex-col", panelPadded, panelGap), children: [panel(), nestedPanel({ panelClassName: 'flex-1' })] }));
-        case 'nested.l':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [nestedPanel({ panelClassName: 'flex-1' }), panel()] }));
-        default:
-            return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
-    }
-}
-const blockViews = [
-    { id: 'desktop', label: 'Desktop' },
-    { id: 'mobile', label: 'Mobile' },
-];

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

@@ -1,10 +0,0 @@
-import { BlockConfiguration } from '../../../core';
-export declare function BlockPreview({ className, variant, configuration }: BlockPreview.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace BlockPreview {
-    type Variant = 'desktop' | 'mobile';
-    type Props = {
-        className?: string;
-        variant: Variant;
-        configuration: BlockConfiguration;
-    };
-}

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

@@ -1,4 +0,0 @@
-export type BlockView = 'desktop' | 'mobile';
-export declare namespace BlockView {
-    const values: ReadonlyArray<BlockView>;
-}

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockView = void 0;
-// extension
-var BlockView;
-(function (BlockView) {
-    // values
-    BlockView.values = ['desktop', 'mobile'];
-})(BlockView || (exports.BlockView = BlockView = {}));

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

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