@nascentdigital/funnel-editor 4.5.0 → 4.5.2

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

@@ -1,13 +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 }) {
+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: (0, classnames_1.default)(className, 'w-full flex justify-center items-center text-center'), children: variant === 'desktop' ? 'Desktop' : 'Mobile' }));
+    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/LegacyBlockConfigEditor.d.ts

@@ -1,13 +1,9 @@
-import { Rect } from '@nascentdigital/funnel-core';
-import { Block, SectionBlock } from '../../../core';
-export declare const LegacyBlockConfigEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<LegacyBlockConfigEditor.Ref>>;
+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 = {};
-    interface Ref {
-        edit(options: Options): Promise<void>;
-    }
-    type Options = {
-        block: Block | SectionBlock;
-        anchor: HTMLElement | Rect;
+    type Props = {
+        configuration?: BlockConfiguration;
+        onClose: Callback.Void;
     };
 }

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

@@ -1,63 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LegacyBlockConfigEditor = void 0;
+exports.LegacyBlockConfigEditor = LegacyBlockConfigEditor;
 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");
 // editor
-exports.LegacyBlockConfigEditor = (0, react_1.forwardRef)(function LegacyBlockConfigEditor(_, ref) {
+function LegacyBlockConfigEditor({ configuration, onClose }) {
     // bind state + hooks
-    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
-    const [configuration, setConfiguration] = (0, react_1.useState)();
-    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [closing, setClosing] = (0, react_1.useState)(false);
     const pageController = (0, hooks_1.usePageController)();
-    const touch = (0, client_1.useTouch)();
     const { modified = false, valid = false } = configuration !== null && configuration !== void 0 ? configuration : {};
     // sync w/ configuration
     (0, core_1.useBlockConfiguration)(configuration);
-    // bind ref
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        edit: async ({ block, anchor }) => {
-            // reset state
-            setConfiguration(block.getConfiguration());
-            setAnchor(anchor);
-            // create deferral
-            const deferral = new funnel_core_1.Deferral();
-            setDeferral(deferral);
-            // wait until deferral is resolved
-            return deferral.promise;
+    // reset closing on new open
+    (0, react_1.useEffect)(() => {
+        if (configuration) {
+            setClosing(false);
         }
-    }), []);
+    }, [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 (we're done)
-        deferral === null || deferral === void 0 ? void 0 : deferral.resolve();
-        // refresh
-        touch();
+        // complete
+        onClose();
     };
-    const onCancel = () => {
-        // skip if missing or already completed
-        if (!deferral || deferral.isComplete) {
-            return;
-        }
-        // cancel
-        deferral.resolve(undefined);
-        // touch
-        touch();
-    };
-    // skip if there's no config
-    if (!configuration) {
-        return null;
-    }
     // render
-    const { layout } = configuration;
-    return ((0, jsx_runtime_1.jsx)(core_1.MiniEditor, { title: "Block Configuration", open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, onSave: onSave, onClose: onCancel, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration.isConfigInDefault, onClick: () => configuration.reset(), children: "Reset to Default" }), wide: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-start items-start gap-l9", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col items-start gap-l8", children: [(0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "desktop", layout: layout }), (0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "mobile", layout: layout })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-[max-content_1fr] auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: configuration.editableFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) })] }) }));
-});
+    const { layout } = configuration !== null && configuration !== void 0 ? configuration : {};
+    return ((0, jsx_runtime_1.jsx)(core_1.SideSheet, { title: "Block Configuration", backdrop: "none", open: !!configuration || closing, onSave: onSave, onClose: onClose, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration === null || configuration === void 0 ? void 0 : configuration.isConfigInDefault, onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.reset(), children: "Reset to Default" }), wide: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l9 p-l8", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-wrap justify-center items-start gap-l8", children: [(0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "desktop", layout: layout }), (0, jsx_runtime_1.jsx)(core_1.SkeletonLayout, { variant: "mobile", layout: layout })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-[max-content_1fr] auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: configuration === null || configuration === void 0 ? void 0 : configuration.editableFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) })] }) }));
+}