@nascentdigital/funnel-editor 4.5.3 → 4.5.6

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.js

@@ -7,6 +7,7 @@ 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
@@ -60,43 +61,49 @@ function BlockConfigEditor({ configuration, onClose }) {
         }
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.SideSheet, { size: "xs", title: "Block Configuration", 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-l9 p-l8", 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" }), ((_a = configuration === null || configuration === void 0 ? void 0 : configuration.slotOptions) !== null && _a !== void 0 ? _a : []).length > 1 &&
-                                    (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "ArrowLeftRight", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToNextSlot(), 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)(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 'solo':
-            return ((0, jsx_runtime_1.jsx)("div", { className: "p-l6 size-full", children: (0, jsx_runtime_1.jsx)("div", { className: "size-full bg-surface2" }) }));
+            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.jsxs)("div", { className: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }));
+            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: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }));
+            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: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }));
+            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: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[20px] w-full bg-surface2" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-l2 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] })] }));
+            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: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-full w-[30px] bg-surface2" })] }));
+            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: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-l2 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-[20px] w-full bg-surface2" })] }));
+            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: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-full w-[30px] bg-surface2" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface2" })] })] }));
+            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", { className: "p-l6 size-full", children: (0, jsx_runtime_1.jsx)("div", { className: "px-l5 py-l3 flex h-full bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-surface1" }) }) }));
+            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: "p-l6 w-full h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-l5 py-l3 flex flex-col gap-l2 h-full bg-surface2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface1" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface1" })] }) }));
+            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: "p-l6 w-full h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-l5 py-l3 flex gap-l2 h-full bg-surface2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface1" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface1" })] }) }));
+            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: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full w-7/12 bg-surface1" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2" })] }));
+            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: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex flex-col p-l2 bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-[60%] w-full bg-surface1" }) })] }));
+            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: "p-l6 flex flex-col gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full w-7/12 bg-surface1" }) })] }));
+            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: "p-l6 flex gap-l2 h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex flex-col p-l2 bg-surface2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-[60%] w-full bg-surface1" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface2" })] }));
+            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.d.ts

@@ -5,6 +5,6 @@ export declare namespace BlockPreview {
     type Props = {
         className?: string;
         variant: Variant;
-        configuration?: BlockConfiguration;
+        configuration: BlockConfiguration;
     };
 }

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
-    const { layout } = configuration !== null && configuration !== void 0 ? configuration : {};
+    // 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/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,89 @@
 "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) {
+    // panel
+    const panel = (className = 'w-full') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder rounded-[3px]', className) }));
+    // get content
+    const panelClassName = 'w-full h-full';
+    const panelPaddedX = 'px-10';
+    const panelPaddedY = 'py-10';
+    const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
+    let content;
+    switch (item.id) {
+        case 'grid':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-3 auto-cols-fr gap-x-l3 gap-y-l2 '), children: [panel(), panel(), panel(), panel(), panel()] }));
+            break;
+        case 'verticalStack':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-1 auto-rows-fr gap-y-l2 '), children: [panel(), panel(), panel()] }));
+            break;
+        case 'horizontalStack':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-rows-1 auto-cols-fr grid-flow-col gap-x-l3 '), children: [panel(), panel(), panel()] }));
+            break;
+        case 'masonry':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-3 grid-flow-col gap-x-l3 pt-10'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-l5'), panel('h-l6'), panel('h-l5')] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-22'), panel('h-l6')] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-l4'), panel('h-l7'), panel('h-l5')] })] }));
+            break;
+        case 'bento':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid auto-rows-auto auto-cols-auto gap-l3'), children: [panel('w-20 row-start-1 row-span-2 col-start-1'), panel('w-28 row-start-1 col-start-2'), panel('w-18 row-start-2 col-start-2')] }));
+            break;
+        default:
+            content = ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
+            break;
+    }
+    // render item in frame
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full h-full flex justify-center items-center'), children: content }));
 }

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;
     };
 }

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

@@ -5,9 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessagePanelEditor = MessagePanelEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
+const core_1 = require("../../../core");
 // component
-function MessagePanelEditor({ className }) {
+function MessagePanelEditor({ className, anchor, open, onClose, configuration }) {
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "MessagePanelEditor" }));
+    return ((0, jsx_runtime_1.jsx)(core_1.QuickEditor, { className: (0, classnames_1.default)(className), title: "Message Configuration", tip: "Medium and Large are relative to this block's text area, not the page width.", anchor: anchor, placement: "left", anchorOffset: 4, viewportPadding: 4, open: open, onClose: onClose, size: "sm", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-l4", children: Object.values(configuration.messageFields)
+                .filter(funnel_core_1.Value.isDefined)
+                .map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: field, size: "xs" }, field.id)) }) }));
 }

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

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

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

@@ -6,8 +6,71 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VisualPanelEditor = VisualPanelEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const core_1 = require("../../../core");
+const FieldHeader_1 = require("../../../core/components/fields/FieldHeader");
+const framer_motion_1 = require("framer-motion");
 // component
-function VisualPanelEditor({ className }) {
+function VisualPanelEditor({ className, anchor, open, onClose, configuration }) {
+    var _a;
+    // get fields
+    const { visualFields: { aspect: aspectField, anchor: anchorField, width: widthField, horizontalAlign: horizontalAlignField } } = configuration;
+    const { value } = (_a = configuration.getFieldData('visual')) !== null && _a !== void 0 ? _a : {};
+    const visual = funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(value)
+        ? value
+        : undefined;
+    // sync config
+    (0, core_1.useBlockConfiguration)(configuration);
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), children: "MessagePanelEditor" }));
+    return ((0, jsx_runtime_1.jsx)(core_1.QuickEditor, { className: (0, classnames_1.default)(className), title: "Visual Configuration", tip: "Cropping changes how the image appears on your site, not your original file.", 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-l9", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l4", children: [aspectField &&
+                            (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: aspectField, size: "xs" }), anchorField
+                            ? (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: anchorField, size: "xs" })
+                            :
+                                (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Anchor", size: "xs" }), (0, jsx_runtime_1.jsx)("p", { className: "label-xs text-content-secondary text-pretty", children: "Your current image size and aspect ratio don't require and anchor (there's no cropping)." })] })] }), visual && renderVisual({
+                    configuration,
+                    visual,
+                    aspectField: aspectField,
+                    anchorField: anchorField
+                })] }) }));
+}
+function renderVisual({ configuration, visual, aspectField, anchorField }) {
+    var _a, _b, _c;
+    // determine layout info
+    const { metadata, name, description } = visual;
+    const { dimensions: { width, height } } = metadata;
+    const isPortrait = width < height;
+    const aspect = (_b = (_a = aspectField === null || aspectField === void 0 ? void 0 : aspectField.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'auto';
+    const anchor = (_c = anchorField === null || anchorField === void 0 ? void 0 : anchorField.value) === null || _c === void 0 ? void 0 : _c.value;
+    const anchorDirection = anchorField
+        ? anchorField.schema.isValidOption('left')
+            ? 'x'
+            : 'y'
+        : undefined;
+    // render
+    return ((0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('w-full h-[210px]', 'flex flex-col justify-center items-center', 'bg-background rounded-xs'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('relative bg-destructive', {
+                'h-full max-h-full w-auto': isPortrait,
+                'w-full': !isPortrait
+            }), children: [funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(visual)
+                    ? renderImage({ configuration, visual })
+                    : renderVideo({ configuration, visual }), aspect !== 'auto' && anchor && anchorDirection &&
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-supersurface flex', {
+                            'flex-col': anchorDirection === 'y'
+                        }), children: (0, jsx_runtime_1.jsxs)(framer_motion_1.AnimatePresence, { mode: "popLayout", children: [anchor !== 'left' && anchor !== 'top' &&
+                                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "flex-1 bg-content-button-contrast/backdrop", layout: true, variants: core_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "crop.start"), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('shrink-0 outline outline-1 outline-ix-primary', {
+                                        'h-full w-auto': anchorDirection === 'x',
+                                        'w-full h-auto': anchorDirection === 'y',
+                                        'aspect-square': aspect === 'square',
+                                        'aspect-phone': aspect === 'phone',
+                                        'aspect-tv': aspect === 'tv',
+                                        'aspect-widescreen': aspect === 'widescreen',
+                                        'aspect-cinema': aspect === 'cinema'
+                                    }), layout: true }, "visible"), anchor !== 'right' && anchor !== 'bottom' &&
+                                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "flex-1 bg-content-button-contrast/backdrop", layout: true, variants: core_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "crop.end")] }) })] }) }));
+}
+function renderImage({ visual }) {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)("img", { className: "max-w-full max-h-full", src: visual.url, alt: (_a = visual.description) !== null && _a !== void 0 ? _a : visual.name }));
+}
+function renderVideo({ visual }) {
+    return ((0, jsx_runtime_1.jsx)("video", { className: "max-w-full max-h-full", src: visual.url, autoPlay: true, muted: true, loop: true, playsInline: true }));
 }