@nascentdigital/funnel-editor 4.4.21 → 4.5.1

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

@@ -0,0 +1,456 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockPreview = BlockPreview;
+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 core_1 = require("../../../core");
+// component
+function BlockPreview({ className, variant, configuration }) {
+    // determine active panels
+    const { layout } = configuration;
+    // sync configuration
+    (0, core_1.useBlockConfiguration)(configuration);
+    // helpers
+    const onPanelClick = (panel) => {
+        console.debug('[BlockPreview] opening panel editor', panel);
+    };
+    // 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.jsx)("div", { className: (0, classnames_1.default)(className, 'w-full flex justify-center'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface2 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, onPanelClick }) }) }));
+}
+// 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)(core_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, onPanelClick }) {
+    // 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
+                }),
+                onPanelClick
+            }) }, `${item.type}.${parentOffset}`)) }));
+}
+function renderItem({ className, parent, parentNested, siblingCount, variant, item, itemPosition, onPanelClick }) {
+    // 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
+                        }),
+                        onPanelClick
+                    }) }, `${item.type}.${parentOffset}`)) }));
+        case 'message':
+            return renderMessage({ className, parent, parentNested, siblingCount, variant, item, itemPosition, onPanelClick });
+        case 'visual':
+            return renderVisual({ className, parent, parentNested, siblingCount, variant, item, itemPosition, onPanelClick });
+        case 'list':
+            return renderList({ className, parent, parentNested, siblingCount, variant, item, itemPosition, onPanelClick });
+        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.jsxs)(EditablePanel, Object.assign({}, args, { panelClassName: (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)(EditablePanel, Object.assign({}, args, { panelClassName: (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)(EditablePanel, Object.assign({}, args, { panelClassName: 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 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 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)(EditablePanel, Object.assign({}, args, { panelClassName: 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 getPanelWrapClasses({ className, variant, parent, parentNested, item: { mobileOrder, alignY, fullBleed }, itemPosition }) {
+    return variant === 'mobile'
+        ? (0, classnames_1.default)(className, 'relative 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, 'relative 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;
+    }
+}
+function EditablePanel(_a) {
+    var { panelClassName, children } = _a, args = __rest(_a, ["panelClassName", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, 'relative'), children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('group absolute inset-0 z-overlay cursor-pointer interpolate', 'bg-surface1 border border-solid, border-ix-primary rounded-xxs overflow-hidden', 'opacity-none hover:opacity-full'), onClick: () => args.onPanelClick(args.item), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full h-full interpolate', 'flex flex-col justify-center items-center gap-l6', 'text-ix-primary group-hover:bg-ix-primary/tint1 group-active:bg-ix-primary/tint3'), children: (0, jsx_runtime_1.jsx)("span", { className: "label-xs label-strong", children: "Edit" }) }) })] }) }));
+}
+// TODO: scrap this
+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/BlockView.d.ts

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

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

@@ -0,0 +1,9 @@
+"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

@@ -0,0 +1,13 @@
+import { Rect } from '@nascentdigital/funnel-core';
+import { Block, SectionBlock } from '../../../core';
+export declare const LegacyBlockConfigEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<LegacyBlockConfigEditor.Ref>>;
+export declare namespace LegacyBlockConfigEditor {
+    type Props = {};
+    interface Ref {
+        edit(options: Options): Promise<void>;
+    }
+    type Options = {
+        block: Block | SectionBlock;
+        anchor: HTMLElement | Rect;
+    };
+}

package/dist/page/components/{BlockConfig.js → config/LegacyBlockConfigEditor.js}

@@ -1,40 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockConfig = BlockConfig;
+exports.LegacyBlockConfigEditor = 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 react_1 = require("react");
 const rxjs_1 = require("rxjs");
-const core_1 = require("../../core");
-const hooks_1 = require("../hooks");
-// component
-function BlockConfig({ className, block: blockOrSectionBlock }) {
-    // bind ref
-    const editorRef = (0, react_1.useRef)(null);
-    // 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;
-    }
-    // helpers
-    const onEdit = async (event) => {
-        var _a;
-        // edit configuration
-        await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-            block: blockOrSectionBlock,
-            anchor: event.currentTarget
-        }));
-    };
-    // 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: onEdit, children: "Configure" }), (0, jsx_runtime_1.jsx)(BlockConfigEditor, { ref: editorRef })] }));
-}
+const core_1 = require("../../../core");
+const hooks_1 = require("../../hooks");
 // editor
-const BlockConfigEditor = (0, react_1.forwardRef)(function BlockConfigEditor(_, ref) {
+exports.LegacyBlockConfigEditor = (0, react_1.forwardRef)(function LegacyBlockConfigEditor(_, ref) {
     // bind state + hooks
     const [deferral, setDeferral] = (0, react_1.useState)(undefined);
     const [configuration, setConfiguration] = (0, react_1.useState)();

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

@@ -0,0 +1,6 @@
+export declare function ListLayoutPicker({ className }: ListLayoutPicker.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListLayoutPicker {
+    type Props = {
+        className?: string;
+    };
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListLayoutPicker = ListLayoutPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function ListLayoutPicker({ className }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "ListLayoutPicker" }));
+}

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

@@ -0,0 +1,6 @@
+export declare function ListPanelEditor({ className }: ListPanelEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListPanelEditor {
+    type Props = {
+        className?: string;
+    };
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListPanelEditor = ListPanelEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function ListPanelEditor({ className }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "ListPanelEditor" }));
+}

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

@@ -0,0 +1,6 @@
+export declare function MessagePanelEditor({ className }: MessagePanelEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessagePanelEditor {
+    type Props = {
+        className?: string;
+    };
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessagePanelEditor = MessagePanelEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function MessagePanelEditor({ className }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "MessagePanelEditor" }));
+}

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

@@ -0,0 +1,6 @@
+export declare function VisualPanelEditor({ className }: VisualPanelEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace VisualPanelEditor {
+    type Props = {
+        className?: string;
+    };
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualPanelEditor = VisualPanelEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function VisualPanelEditor({ className }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "MessagePanelEditor" }));
+}

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

@@ -0,0 +1 @@
+export * from './BlockConfig';

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BlockConfig"), exports);

package/dist/page/hooks/PageController.js

@@ -146,7 +146,7 @@ class PageController {
             });
             // save page immediately if modified (this is a re-entrant call, so we can't await it - trust me)
             if (page.modified) {
-                console.trace('[PageController/setPage] save triggered by page modification', page);
+                console.debug('[PageController/setPage] save triggered by page modification', page);
                 this.save().catch(console.error);
             }
         }