@nascentdigital/funnel-editor 4.5.2 → 4.5.4

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

@@ -38,6 +38,7 @@ __exportStar(require("./NavButton"), exports);
 __exportStar(require("./Picker"), exports);
 __exportStar(require("./Popup"), exports);
 __exportStar(require("./Profile"), exports);
+__exportStar(require("./QuickEditor"), exports);
 __exportStar(require("./QuickInput"), exports);
 __exportStar(require("./QuickPicker"), exports);
 __exportStar(require("./SegmentedButton"), exports);

package/dist/core/components/visuals/Icon.d.ts

@@ -5,8 +5,8 @@ export declare namespace Icon {
         variant: Variant;
         size?: Size;
     };
-    type Size = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'nav' | 'card' | Sizing;
-    type Variant = 'Archive' | 'ArrowLeft' | 'ArrowLeftRight' | 'Atom' | 'Blocks' | 'Bold' | 'Check' | 'ChevronDown' | 'ChevronRight' | 'ChevronUp' | 'Circle' | 'CircleAlert' | 'CircleCheck' | 'CircleCheckBig' | 'CirclePlus' | 'CircleQuestionMark' | 'CloudCheck' | 'CloudUpload' | 'CornerDownRight' | 'EllipsisVertical' | 'Eye' | 'EyeOff' | 'File' | 'FileDown' | 'FilePlusCorner' | 'FileSearchCorner' | 'Goal' | 'Globe' | 'GripVertical' | 'HatGlasses' | 'History' | 'Highlighter' | 'Image' | 'ImageDown' | 'Info' | 'Italic' | 'Layers' | 'LayoutTemplate' | 'Link' | 'Link2' | 'List' | 'ListChecks' | 'ListIndentDecrease' | 'ListIndentIncrease' | 'ListOrdered' | 'Lock' | 'LockOpen' | 'Mail' | 'MessageSquareQuote' | 'Minus' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'SearchCode' | 'Settings' | 'SquarePlay' | 'Star' | 'Strikethrough' | 'Subscript' | 'Sun' | 'Superscript' | 'TextAlignStart' | 'Trash' | 'TriangleAlert' | 'Trophy' | 'Underline' | 'Undo' | 'Upload' | 'UserRound' | 'X';
+    type Size = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'nav' | 'card' | Sizing;
+    type Variant = 'Archive' | 'ArrowLeft' | 'ArrowRight' | 'ArrowLeftRight' | 'Atom' | 'Blocks' | 'Bold' | 'Check' | 'ChevronDown' | 'ChevronRight' | 'ChevronUp' | 'Circle' | 'CircleAlert' | 'CircleCheck' | 'CircleCheckBig' | 'CirclePlus' | 'CircleQuestionMark' | 'CloudCheck' | 'CloudUpload' | 'CornerDownRight' | 'EllipsisVertical' | 'Eye' | 'EyeOff' | 'File' | 'FileDown' | 'FilePlusCorner' | 'FileSearchCorner' | 'Goal' | 'Globe' | 'GripVertical' | 'HatGlasses' | 'History' | 'Highlighter' | 'Image' | 'ImageDown' | 'Info' | 'Italic' | 'Layers' | 'LayoutTemplate' | 'Link' | 'Link2' | 'List' | 'ListChecks' | 'ListIndentDecrease' | 'ListIndentIncrease' | 'ListOrdered' | 'Lock' | 'LockOpen' | 'Mail' | 'MessageSquareQuote' | 'Minus' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'SearchCode' | 'Settings' | 'SquarePlay' | 'Star' | 'Strikethrough' | 'Subscript' | 'Sun' | 'Superscript' | 'TextAlignStart' | 'Trash' | 'TriangleAlert' | 'Trophy' | 'Underline' | 'Undo' | 'Upload' | 'UserRound' | 'X';
     namespace Variant {
         function filter(value: any): value is Variant;
     }

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

@@ -20,6 +20,7 @@ function Icon({ className, variant, size: sizing = 'md' }) {
         const values = [
             'Archive',
             'ArrowLeft',
+            'ArrowRight',
             'ArrowLeftRight',
             'Atom',
             'Blocks',
@@ -112,6 +113,8 @@ function getIcon(variant) {
             return lucide_react_1.Archive;
         case 'ArrowLeft':
             return lucide_react_1.ArrowLeft;
+        case 'ArrowRight':
+            return lucide_react_1.ArrowRight;
         case 'ArrowLeftRight':
             return lucide_react_1.ArrowLeftRight;
         case 'Atom':
@@ -281,6 +284,8 @@ function getSizing(size) {
             return { size: 16, strokeWidth: 2 };
         case 'xs':
             return { size: 14, strokeWidth: 2 };
+        case 'xxs':
+            return { size: 10, strokeWidth: 1, absoluteStrokeWidth: true };
         default:
             return { size: 20, strokeWidth: 2 };
     }

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

@@ -1,5 +1,5 @@
 import { BlockLayout, EventBus, Field, FieldModel, Schema } from '@nascentdigital/funnel-core';
-import { PanelLayout } from '@nascentdigital/funnel-ui';
+import { ListPanel, MessagePanel, PanelLayout, SlotVariation, VisualPanel } from '@nascentdigital/funnel-ui';
 import { Block } from './Block';
 import { IAssetStore } from './IAssetStore';
 import { SectionBlock } from './SectionBlock';
@@ -11,6 +11,7 @@ export declare class BlockConfiguration {
     readonly fields: ReadonlyArray<FieldModel.Config>;
     private _editableFields;
     private _layout?;
+    private _slotState;
     private _defaultConfig?;
     private _isConfigInDefault?;
     constructor({ block: blockOrSectionBlock, assetStore }: BlockConfiguration.ConstructorArgs);
@@ -23,11 +24,19 @@ export declare class BlockConfiguration {
     get nameField(): FieldModel.Config | undefined;
     get themeField(): FieldModel.Config | undefined;
     get layoutField(): Field<Schema.EnumField<Schema.EnumField.Options<PanelLayout>>> | undefined;
+    get slotState(): Readonly<BlockConfiguration.SlotState>;
+    gotToNextSlot(): void;
+    gotToPreviousSlot(): void;
+    get messageFields(): Record<keyof MessagePanel.Config.Keys<'message'>, FieldModel.Config | undefined>;
+    get listFields(): Record<keyof ListPanel.Config.Keys<'list'>, FieldModel.Config | undefined>;
+    get visualFields(): Record<keyof VisualPanel.Config.Keys<'visual'>, FieldModel.Config | undefined>;
     get layout(): BlockLayout | undefined;
     get events$(): import("rxjs").Observable<EventBus.Event<string, string>>;
     get valid(): boolean;
     get modified(): boolean;
     getField(fieldId: string): FieldModel;
+    getFieldData(fieldId: string): Schema.Field.LinkedData | undefined;
+    getEditableField(fieldId: string): FieldModel.Config | undefined;
     save(): void;
     reset(): void;
     get isConfigInDefault(): boolean | undefined;
@@ -35,6 +44,12 @@ export declare class BlockConfiguration {
     private raiseEvent;
 }
 export declare namespace BlockConfiguration {
+    type SlotState = {
+        field?: Field<Schema.EnumField<Schema.EnumField.Options<SlotVariation>>>;
+        options: ReadonlyArray<SlotVariation>;
+        currentOption?: SlotVariation | undefined;
+        currentIndex?: number;
+    };
     type ConstructorArgs = {
         assetStore: IAssetStore;
         block: Block | SectionBlock;

package/dist/core/domain/BlockConfiguration.js

@@ -16,6 +16,7 @@ class BlockConfiguration {
         this.fields = fields;
         this._editableFields = fields;
         this._isConfigInDefault = false;
+        this._slotState = { options: [] };
         // initialize section block
         if (blockOrSectionBlock instanceof SectionBlock_1.SectionBlock) {
             // capture parents
@@ -28,7 +29,6 @@ class BlockConfiguration {
         }
         // or regular block
         else {
-            // capture parent
             this.block = blockOrSectionBlock;
         }
         // add fields
@@ -76,7 +76,7 @@ class BlockConfiguration {
     }
     get desktopFields() {
         return [
-            this._editableFields.find(field => field.id === 'contentAlign')
+            this.getEditableField('contentAlign')
         ].filter(funnel_core_1.Value.isDefined);
     }
     get mobileFields() {
@@ -85,15 +85,75 @@ class BlockConfiguration {
     get nameField() {
         const { block, sectionBlock } = this;
         return sectionBlock
-            ? this._editableFields.find(field => field.id === block.nameField.id)
+            ? this.getEditableField(block.nameField.id)
             : undefined;
     }
     get themeField() {
-        return this._editableFields.find(field => field.id === funnel_ui_1.BlockConfig.Presets.ThemeOnly.key);
+        return this.getEditableField(funnel_ui_1.BlockConfig.Presets.ThemeOnly.key);
     }
     get layoutField() {
         return this._editableFields.find(field => field.id === 'layout');
     }
+    get slotState() {
+        return this._slotState;
+    }
+    gotToNextSlot() {
+        // skip if there's no options
+        const { field, options, currentIndex } = this._slotState;
+        if (!field || options.length < 0 || currentIndex === undefined) {
+            return;
+        }
+        // update the slot
+        const newIndex = (currentIndex + 1) % options.length;
+        const newOption = options[newIndex];
+        this._slotState = {
+            field, options, currentIndex: newIndex, currentOption: newOption
+        };
+        field.value = funnel_core_1.Schema.EnumField.Value.toData(newOption);
+    }
+    gotToPreviousSlot() {
+        // skip if there's no options
+        const { field, options, currentIndex } = this._slotState;
+        if (!field || options.length < 0 || currentIndex === undefined) {
+            return;
+        }
+        // update the slot
+        const newIndex = currentIndex === 0
+            ? options.length - 1
+            : currentIndex - 1;
+        const newOption = options[newIndex];
+        this._slotState = {
+            field, options, currentIndex: newIndex, currentOption: newOption
+        };
+        field.value = funnel_core_1.Schema.EnumField.Value.toData(newOption);
+    }
+    get messageFields() {
+        const keys = funnel_ui_1.MessagePanel.Config.getKeys('message');
+        return {
+            textAlign: this.getEditableField(keys.textAlign),
+            width: this.getEditableField(keys.width),
+            horizontalAlign: this.getEditableField(keys.horizontalAlign),
+            verticalAlign: this.getEditableField(keys.verticalAlign)
+        };
+    }
+    get listFields() {
+        const keys = funnel_ui_1.ListPanel.Config.getKeys('list');
+        return {
+            layout: this.getEditableField(keys.layout),
+            width: this.getEditableField(keys.width),
+            horizontalAlign: this.getEditableField(keys.horizontalAlign),
+            verticalAlign: this.getEditableField(keys.verticalAlign)
+        };
+    }
+    get visualFields() {
+        const keys = funnel_ui_1.VisualPanel.Config.getKeys('visual');
+        return {
+            aspect: this.getEditableField(keys.aspect),
+            anchor: this.getEditableField(keys.anchor),
+            width: this.getEditableField(keys.width),
+            horizontalAlign: this.getEditableField(keys.horizontalAlign)
+        };
+    }
     get layout() {
         return this._layout;
     }
@@ -104,7 +164,13 @@ class BlockConfiguration {
         return this.editableFields.every(field => field.valid);
     }
     get modified() {
-        return !funnel_core_1.Value.equals(this.fields.filter(field => field.hasValue).map(field => field.value), this.editableFields.map(field => field.value));
+        const original = this.fields
+            .filter(field => field.hasValue)
+            .map(field => field.value);
+        const updated = this.editableFields
+            .filter(field => field.hasValue)
+            .map(field => field.value);
+        return !funnel_core_1.Value.equals(original, updated);
     }
     getField(fieldId) {
         // return field or throw
@@ -115,6 +181,32 @@ class BlockConfiguration {
         // return field
         return field;
     }
+    getFieldData(fieldId) {
+        // skip if it's not there
+        const { block, assetStore } = this;
+        const field = block.fields.find(field => field.id === fieldId);
+        if (!field) {
+            return undefined;
+        }
+        // link assets
+        const fieldValue = field.value;
+        if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.type) === 'asset') {
+            const assetData = funnel_core_1.Schema.AssetField.Value.fromData(fieldValue);
+            const asset = (assetData === null || assetData === void 0 ? void 0 : assetData.id)
+                ? assetStore.getAsset(assetData === null || assetData === void 0 ? void 0 : assetData.id)
+                : undefined;
+            return assetData && asset
+                ? funnel_core_1.Schema.AssetField.LinkedValue.toData(funnel_core_1.Schema.AssetField.Value.toLinked(assetData, asset))
+                : undefined;
+        }
+        // or return other values as-is
+        else {
+            return fieldValue;
+        }
+    }
+    getEditableField(fieldId) {
+        return this._editableFields.find(field => field.id === fieldId);
+    }
     save() {
         // save each modified field
         const { sectionBlock, block, editableFields } = this;
@@ -196,6 +288,7 @@ class BlockConfiguration {
         return this._isConfigInDefault;
     }
     sync() {
+        var _a;
         // recompute the editable fields
         const { block, blockFieldData: fieldData, fields, editableFields } = this;
         const configData = editableFields.reduce((data, field) => {
@@ -236,6 +329,17 @@ class BlockConfiguration {
         this._layout = getLayout
             ? getLayout({ config: updatedConfig, fields: fieldData })
             : undefined;
+        // setup slot
+        const slotField = configFields.find(field => field.id === 'slotVariation');
+        const slotOptions = (slotField ? Object.keys(slotField.schema.options) : []);
+        const slotOption = (_a = slotField === null || slotField === void 0 ? void 0 : slotField.value) === null || _a === void 0 ? void 0 : _a.value;
+        const slotOptionIndex = slotOption ? slotOptions.indexOf(slotOption) : -1;
+        this._slotState = {
+            field: slotField,
+            options: slotOptions,
+            currentIndex: slotOptionIndex < 0 ? undefined : slotOptionIndex,
+            currentOption: slotOption
+        };
         // assign to editable fields (raised event)
         this.editableFields = configFields;
         // compute the default config

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

@@ -20,7 +20,7 @@ function BlockConfig({ className, block: blockOrSectionBlock }) {
     }
     // 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(block.getConfiguration()), children: "Configure" }), process.env.NEXT_PUBLIC_EDITOR_BLOCK_CONFIG === 'experimental'
+    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) })
                 :

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

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

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

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

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

@@ -20,43 +20,49 @@ const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const core_1 = require("../../../core");
+const ListPanelEditor_1 = require("./ListPanelEditor");
+const MessagePanelEditor_1 = require("./MessagePanelEditor");
+const VisualPanelEditor_1 = require("./VisualPanelEditor");
+const react_2 = require("motion/react");
 // component
 function BlockPreview({ className, variant, configuration }) {
-    // determine active panels
+    // bind props + state + refs
     const { layout } = configuration;
+    const [editingPanel, setEditingPanel] = (0, react_1.useState)();
+    const previewRef = (0, react_1.useRef)(null);
     // sync configuration
     (0, core_1.useBlockConfiguration)(configuration);
     // helpers
     const onPanelClick = (panel) => {
-        console.debug('[BlockPreview] opening panel editor', panel);
+        setEditingPanel(panel.type);
     };
     // 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 }) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_2.motion.div, { ref: previewRef, className: (0, classnames_1.default)(className, 'w-full flex justify-center'), layout: true, children: [(0, jsx_runtime_1.jsx)(react_2.motion.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'
+                    }), layoutRoot: true, layout: true, children: renderLayout({ variant, layout, onPanelClick }) }), (0, jsx_runtime_1.jsx)(MessagePanelEditor_1.MessagePanelEditor, { open: editingPanel === 'message', onClose: () => setEditingPanel(panel => panel === 'message' ? undefined : panel), anchor: previewRef.current, configuration: configuration }), (0, jsx_runtime_1.jsx)(ListPanelEditor_1.ListPanelEditor, { open: editingPanel === 'list', onClose: () => setEditingPanel(panel => panel === 'list' ? undefined : panel), anchor: previewRef.current, configuration: configuration }), (0, jsx_runtime_1.jsx)(VisualPanelEditor_1.VisualPanelEditor, { open: editingPanel === 'visual', onClose: () => setEditingPanel(panel => panel === 'visual' ? undefined : panel), anchor: previewRef.current, configuration: configuration })] }) }));
 }
 // 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', {
+        return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: (0, classnames_1.default)(className, 'bg-ix-primary rounded-xxs overflow-hidden', {
                 'h-6 ': size === 'sm',
                 'h-8': size === 'md'
-            }) }));
+            }), layout: true }));
     }
     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', {
+        return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: (0, classnames_1.default)(className, 'h-4 bg-draft/tint3 rounded-px overflow-hidden', {
                 '': size === 'sm'
-            }) }));
+            }), layout: true }));
     }
     Skeleton.CaptionPart = CaptionPart;
     function MediaPart({ className, aspect }) {
@@ -95,7 +101,7 @@ function renderLayout({ className, variant, layout, onPanelClick }) {
     }
     // 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({
+    return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: getContainerClasses({ className, variant, siblingCount: 1, item: layout.root }), layout: true, 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'
                 }),
@@ -119,7 +125,7 @@ function renderItem({ className, parent, parentNested, siblingCount, variant, it
         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({
+            return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: getContainerClasses({ className, parent, siblingCount, variant, item }), layout: true, 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'
                         }),
@@ -437,7 +443,7 @@ function getPanelClasses({ className, variant, parent, parentNested, item: { ali
 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" }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: getPanelWrapClasses(args), layout: true, layoutId: args.item.key, 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" }) }) })] }) }, args.item.key));
 }
 // TODO: scrap this
 class ItemPosition {

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

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

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

@@ -1,6 +1,8 @@
-export declare function ListPanelEditor({ className }: ListPanelEditor.Props): import("react/jsx-runtime").JSX.Element;
+import { BlockConfiguration, Popup } from '../../../core';
+export declare function ListPanelEditor({ className, anchor, open, onClose, configuration }: ListPanelEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace ListPanelEditor {
-    type Props = {
+    type Props = Pick<Popup.Props, 'open' | 'onClose' | 'anchor'> & {
         className?: string;
+        configuration: BlockConfiguration;
     };
 }

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

@@ -1,13 +1,63 @@
 "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.ListPanelEditor = ListPanelEditor;
 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 ListPanelEditor({ className }) {
+function ListPanelEditor({ className, anchor, open, onClose, configuration }) {
+    // bind props + refs
+    const _a = configuration.listFields, { layout: layoutField } = _a, listFields = __rest(_a, ["layout"]);
+    const layoutPickerRef = (0, react_1.useRef)(null);
+    // helpers
+    const onChangeLayout = async (e) => {
+        var _a;
+        // skip if there's no layout field (shouldn't happen)
+        const layoutSchema = layoutField === null || layoutField === void 0 ? void 0 : layoutField.schema;
+        if (!layoutField || !layoutSchema) {
+            return;
+        }
+        // pick new layout
+        const { value: layoutData } = layoutField;
+        const selectedLayout = await ((_a = layoutPickerRef.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
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "ListPanelEditor" }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.QuickEditor, { className: (0, classnames_1.default)(className), title: "List Configuration", tip: "Lorem ipsum.", anchor: anchor, placement: "left", anchorOffset: 4, viewportPadding: 4, open: open, onClose: onClose, size: "sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l4", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangeLayout, children: "Change" }), Object.values(listFields)
+                            .filter(funnel_core_1.Value.isDefined)
+                            .map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: field, size: "xs" }, field.id))] }) }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: layoutPickerRef, variant: "card", title: "Pick List Layout", description: "Select an available layout for this list.", renderItem: (item) => renderListLayoutItem(item) })] }));
+}
+function renderListLayoutItem(item) {
+    switch (item.id) {
+        default:
+            return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
+    }
 }

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

@@ -1,6 +1,8 @@
-export declare function MessagePanelEditor({ className }: MessagePanelEditor.Props): import("react/jsx-runtime").JSX.Element;
+import { BlockConfiguration, Popup } from '../../../core';
+export declare function MessagePanelEditor({ className, anchor, open, onClose, configuration }: MessagePanelEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace MessagePanelEditor {
-    type Props = {
+    type Props = Pick<Popup.Props, 'open' | 'onClose' | 'anchor'> & {
         className?: string;
+        configuration: BlockConfiguration;
     };
 }