@nascentdigital/funnel-editor 4.6.1 → 4.6.7

package/dist/core/repository/PageSerializer.js

@@ -103,6 +103,7 @@ var PageSerializer;
             });
         }
     }
+    PageSerializer.deserializeContent = deserializeContent;
     function deserializeSection({ key, eventBus, schema, content, snapshot }) {
         // TODO: handle version mismatch (between schema + content) and upgrading
         if (content && content.version !== schema.version) {
@@ -132,6 +133,7 @@ var PageSerializer;
             exists: content !== undefined
         });
     }
+    PageSerializer.deserializeSection = deserializeSection;
     function deserializeSectionBlock({ id, key, eventBus, schema, content, snapshot }) {
         // create block and return it (upgrade is handled in block deserialization)
         return new domain_1.SectionBlock({
@@ -143,6 +145,7 @@ var PageSerializer;
             exists: true
         });
     }
+    PageSerializer.deserializeSectionBlock = deserializeSectionBlock;
     function deserializeBlock({ key, eventBus, schema, content: blockContent, snapshot }) {
         // throw if there's a type mismatch
         const { type = schema.type, version = schema.version, config = {}, fields = {} } = blockContent !== null && blockContent !== void 0 ? blockContent : {};
@@ -178,4 +181,5 @@ var PageSerializer;
             name: config.name
         });
     }
+    PageSerializer.deserializeBlock = deserializeBlock;
 })(PageSerializer || (exports.PageSerializer = PageSerializer = {}));

package/dist/page/components/PageHeader.d.ts

@@ -1,11 +1,11 @@
 import { Callback } from '@nascentdigital/funnel-core';
 import { Block, PageSettings, Section, SectionBlock } from '../../core';
-import { PageController } from '../hooks';
+import { IPageController } from '../hooks';
 export declare function PageHeader({ className, target, onBack }: PageHeader.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace PageHeader {
     type Props = {
         className?: string;
-        target: PageController.Target;
+        target: IPageController.Target;
         selectedItem?: Block | SectionBlock | Section | PageSettings | undefined;
         onBack: Callback.Void;
     };

package/dist/page/components/PageNotCreated.d.ts

@@ -1,8 +1,8 @@
-import { PageController } from '../hooks';
+import { IPageController } from '../hooks';
 export declare function PageNotCreated({ className, target }: PageNotCreated.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace PageNotCreated {
     type Props = {
         className?: string;
-        target: PageController.Target;
+        target: IPageController.Target;
     };
 }

package/dist/page/components/PageNotFound.d.ts

@@ -1,8 +1,8 @@
-import { PageController } from '../hooks';
+import { IPageController } from '../hooks';
 export declare function PageNotFound({ className, target }: PageNotFound.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace PageNotFound {
     type Props = {
         className?: string;
-        target: PageController.Target;
+        target: IPageController.Target;
     };
 }

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

@@ -1,8 +1,9 @@
 import { PropsWithChildren } from 'react';
-export declare function BlockConfigButton({ target, children }: BlockConfigButton.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function BlockConfigButton({ target, anchorId: anchorOverrideId, children }: BlockConfigButton.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace BlockConfigButton {
     type Target = 'block' | 'message' | 'visual' | 'list';
     type Props = PropsWithChildren & {
         target: Target;
+        anchorId?: string;
     };
 }

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

@@ -25,11 +25,12 @@ const rxjs_1 = require("rxjs");
 const core_1 = require("../../../core");
 const hooks_1 = require("../../hooks");
 // component
-function BlockConfigButton({ target, children = 'Configure' }) {
+function BlockConfigButton({ target, anchorId: anchorOverrideId, children = 'Configure' }) {
     var _a;
     // bind state + hooks
     const [open, setOpen] = (0, react_2.useState)(false);
     const anchorId = (0, react_2.useId)();
+    const nestedAnchorId = (0, react_2.useId)();
     const panelLayoutPickerRef = (0, react_2.useRef)(null);
     const listLayoutPickerRef = (0, react_2.useRef)(null);
     const configuration = (0, core_1.useBlockConfiguration)();
@@ -56,7 +57,7 @@ function BlockConfigButton({ target, children = 'Configure' }) {
                 // pick new layout
                 const { schema: layoutSchema, value: layoutData } = layoutField;
                 const selectedLayout = await ((_a = panelLayoutPickerRef.current) === null || _a === void 0 ? void 0 : _a.open({
-                    anchor: anchorId,
+                    anchor: nestedAnchorId,
                     anchorOffset: 4,
                     placement: 'top',
                     items: Object.entries(layoutSchema.options).map(([layout, option]) => ({
@@ -72,7 +73,7 @@ function BlockConfigButton({ target, children = 'Configure' }) {
             };
             // set variables
             size = 'sm';
-            placement = 'left';
+            placement = anchorOverrideId ? 'left-start' : 'left';
             title = 'Block Configuration';
             // render content
             const { scope, layoutField, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration;
@@ -82,7 +83,7 @@ function BlockConfigButton({ target, children = 'Configure' }) {
             const { options: slotOptions = [], currentIndex: slotIndex = 0 } = configuration.slotState;
             content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("section", { className: "grid grid-cols-2 gap-x-l5 gap-y-l4", children: [blocksFields.length > 0 &&
                                 (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-full", field: field, size: "xs" }, field.id)) }), layoutField && layoutField.schema.enum.length > 1 &&
-                                (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(core_1.FieldHeader, { label: "Layout", size: "xs" }), (0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: anchorId, 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)(core_1.FieldHeader, { label: "Layout", size: "xs" }), (0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: nestedAnchorId, 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)(core_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" })
@@ -113,7 +114,7 @@ function BlockConfigButton({ target, children = 'Configure' }) {
                 // pick new layout
                 const { value: layoutData } = layoutField;
                 const selectedLayout = await ((_a = listLayoutPickerRef.current) === null || _a === void 0 ? void 0 : _a.open({
-                    anchor: anchorId,
+                    anchor: nestedAnchorId,
                     anchorOffset: 4,
                     placement: 'top',
                     items: Object.entries(layoutSchema.options).map(([layout, option]) => ({
@@ -132,7 +133,7 @@ function BlockConfigButton({ target, children = 'Configure' }) {
             placement = 'bottom-end';
             title = 'List Configuration';
             // render content
-            content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l4", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: anchorId, variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangeLayout, children: "Change" }), Object.values(listFields)
+            content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l4", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: nestedAnchorId, 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: listLayoutPickerRef, variant: "card", title: "Pick List Layout", description: "Select an available layout for this list.", renderItem: (item) => renderListLayoutItem(item) })] }));
             break;
@@ -153,7 +154,9 @@ function BlockConfigButton({ target, children = 'Configure' }) {
                                 (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)(core_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({
+                                    (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(core_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)." })] }), widthField &&
+                                (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: widthField, size: "xs" }, widthField.id), horizontalAlignField &&
+                                (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: horizontalAlignField, size: "xs" }, horizontalAlignField.id)] }), visual && renderVisual({
                         configuration,
                         visual,
                         aspectField: aspectField,
@@ -180,10 +183,10 @@ function BlockConfigButton({ target, children = 'Configure' }) {
         configuration.reset();
     };
     // render
-    return ((0, jsx_runtime_1.jsx)(core_1.MiniEditor, { title: title, size: size, anchor: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", onClick: () => setOpen(true), children: children }), anchorOffset: 4, placement: placement, open: open, onSave: onSave, disableSave: !configuration.modified, onClose: () => setOpen(false), onClosed: onClosed, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: configuration.scope === 'mobile'
-                ? 'Smartphone'
-                : 'Monitor', onClick: () => configuration.scope = configuration.scope === 'desktop' ? 'mobile' : 'desktop', children: configuration.scope === 'mobile' ? 'Mobile' : 'Desktop' }), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l4", children: [tip &&
-                    (0, jsx_runtime_1.jsx)(core_1.Note, { variant: "tip", size: size, children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: `**Tip:** ${tip}` }) }), content] }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: anchorId, variant: "secondary", size: "xs", onClick: () => setOpen(true), children: children }), (0, jsx_runtime_1.jsx)(core_1.MiniEditor, { title: title, size: size, anchor: anchorOverrideId || anchorId, anchorOffset: 4, placement: placement, open: open, onSave: onSave, disableSave: !configuration.modified, onClose: () => setOpen(false), onClosed: onClosed, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: configuration.scope === 'mobile'
+                        ? 'Smartphone'
+                        : 'Monitor', onClick: () => configuration.scope = configuration.scope === 'desktop' ? 'mobile' : 'desktop', children: configuration.scope === 'mobile' ? 'Mobile' : 'Desktop' }), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l4", children: [tip &&
+                            (0, jsx_runtime_1.jsx)(core_1.Note, { variant: "tip", size: size, children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: `**Tip:** ${tip}` }) }), content] }) })] }));
 }
 function renderPanelLayoutItem(item) {
     const panel = (className = 'flex-1') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder rounded-[2px]', className) }));

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

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

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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockPreview = BlockPreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const preview_1 = require("./preview");
+// components
+function BlockPreview({ className, configuration }) {
+    // bind props
+    const { scope = 'desktop', layout } = configuration !== null && configuration !== void 0 ? configuration : {};
+    const tight = scope === 'mobile'
+        ? layout === null || layout === void 0 ? void 0 : layout.tight.mobile
+        : layout === null || layout === void 0 ? void 0 : layout.tight.desktop;
+    // render
+    return ((0, jsx_runtime_1.jsx)(react_1.motion.section, { className: (0, classnames_1.default)(className, 'bg-surface2 rounded-xs interpolate-all', {
+            'min-h-[100px]': !layout,
+            'w-[240px]': scope === 'desktop',
+            'w-[136px]': scope === 'mobile',
+            'pb-l4': tight === 'above',
+            'pt-l4': tight === 'below',
+            'py-l4': tight === 'none'
+        }), layoutRoot: true, layout: true, children: configuration && renderLayout({ configuration }) }));
+}
+function renderLayout({ configuration }) {
+    // skip if there's no layout
+    const { scope, layout } = configuration;
+    if (!layout) {
+        return null;
+    }
+    // render layout based on root type
+    const mobile = scope === 'mobile';
+    const { root } = layout;
+    switch (root.type) {
+        // row (force column if mobile)
+        case 'row':
+            return mobile
+                ? (0, jsx_runtime_1.jsx)(preview_1.ColumnLayout, { layout: root, mobile: mobile })
+                : (0, jsx_runtime_1.jsx)(preview_1.RowLayout, { layout: root, mobile: mobile });
+        // column
+        case 'column':
+            return (0, jsx_runtime_1.jsx)(preview_1.ColumnLayout, { layout: root, mobile: mobile });
+        // stack
+        case 'stack':
+            return (0, jsx_runtime_1.jsx)(preview_1.StackLayout, { layout: root, mobile: mobile });
+        default:
+            throw new funnel_core_1.NotImplementedError(`Unsupported layout: ${layout.root.type}`);
+    }
+}

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

@@ -1,3 +1,3 @@
 export * from './BlockConfigButton';
 export * from './BlockConfigurationProvider';
-export * from './LegacyBlockPreview';
+export * from './BlockPreview';

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

@@ -16,4 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BlockConfigButton"), exports);
 __exportStar(require("./BlockConfigurationProvider"), exports);
-__exportStar(require("./LegacyBlockPreview"), exports);
+__exportStar(require("./BlockPreview"), exports);

package/dist/page/components/config/preview/ColumnLayout.d.ts

@@ -0,0 +1,10 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
+export declare function ColumnLayout({ className, layout, mobile, nested }: ColumnLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ColumnLayout {
+    type Props = {
+        className?: string;
+        layout: BlockLayout.Container;
+        mobile: boolean;
+        nested?: boolean;
+    };
+}

package/dist/page/components/config/preview/ColumnLayout.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnLayout = ColumnLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const ItemLayout_1 = require("./ItemLayout");
+// components
+function ColumnLayout({ className, layout, mobile, nested = false }) {
+    // render
+    const { items } = layout;
+    return ((0, jsx_runtime_1.jsx)(ItemLayout_1.ItemLayout, { className: (0, classnames_1.default)(className, 'flex flex-col gap-l4'), parentType: "column", items: items, mobile: mobile, nested: nested }));
+}

package/dist/page/components/config/preview/ItemLayout.d.ts

@@ -0,0 +1,12 @@
+import { BlockLayout, Transform } from '@nascentdigital/funnel-core';
+export declare function ItemLayout({ className, itemClassName, parentType, items, mobile, nested }: ItemLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ItemLayout {
+    type Props = {
+        className?: string;
+        itemClassName?: Transform<BlockLayout.NestedItem, string>;
+        parentType: BlockLayout.Container['type'];
+        items: ReadonlyArray<BlockLayout.NestedItem>;
+        mobile: boolean;
+        nested: boolean;
+    };
+}

package/dist/page/components/config/preview/ItemLayout.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemLayout = ItemLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const ColumnLayout_1 = require("./ColumnLayout");
+const ListPanel_1 = require("./ListPanel");
+const MessagePanel_1 = require("./MessagePanel");
+const RowLayout_1 = require("./RowLayout");
+const StackLayout_1 = require("./StackLayout");
+const VisualPanel_1 = require("./VisualPanel");
+// components
+function ItemLayout({ className, itemClassName = () => '', parentType, items, mobile, nested }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)(className), layout: true, children: items.map((item, itemOffset) => renderItem({ className: itemClassName(item), parentType, item, itemOffset, mobile, nested })) }));
+}
+function renderItem({ className, parentType, item, itemOffset, mobile, nested }) {
+    // render based on type
+    const key = funnel_core_1.BlockLayout.Container.filter(item)
+        ? `${item.type}.${itemOffset}`
+        : item.key;
+    switch (item.type) {
+        // containers (nested)
+        case 'row':
+            return mobile
+                ? (0, jsx_runtime_1.jsx)(ColumnLayout_1.ColumnLayout, { layout: item, mobile: mobile, nested: true }, key)
+                : (0, jsx_runtime_1.jsx)(RowLayout_1.RowLayout, { layout: item, mobile: mobile, nested: true }, key);
+        case 'column':
+            return (0, jsx_runtime_1.jsx)(ColumnLayout_1.ColumnLayout, { layout: item, mobile: mobile, nested: true }, key);
+        case 'stack':
+            return (0, jsx_runtime_1.jsx)(StackLayout_1.StackLayout, { layout: item, mobile: mobile, nested: true }, key);
+        // panels
+        case 'message':
+            return ((0, jsx_runtime_1.jsx)(MessagePanel_1.MessagePanel, { className: className, parentType: parentType, itemOffset: itemOffset, panel: item, mobile: mobile, nested: nested }, key));
+        case 'list':
+            return ((0, jsx_runtime_1.jsx)(ListPanel_1.ListPanel, { className: className, parentType: parentType, itemOffset: itemOffset, panel: item, mobile: mobile, nested: nested }, key));
+        case 'visual':
+            return ((0, jsx_runtime_1.jsx)(VisualPanel_1.VisualPanel, { className: className, parentType: parentType, itemOffset: itemOffset, panel: item, mobile: mobile, nested: nested }, key));
+    }
+}

package/dist/page/components/config/preview/ListPanel.d.ts

@@ -0,0 +1,12 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
+export declare function ListPanel({ className, parentType, itemOffset, panel, mobile, nested }: ListPanel.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListPanel {
+    type Props = {
+        className?: string;
+        parentType: BlockLayout.Container['type'];
+        itemOffset: number;
+        panel: BlockLayout.List;
+        mobile: boolean;
+        nested: boolean;
+    };
+}

package/dist/page/components/config/preview/ListPanel.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListPanel = ListPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const Panel_1 = require("./Panel");
+// components
+function ListPanel({ className, parentType, itemOffset, panel, mobile, nested }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(Panel_1.Panel, { className: className, contentClassName: (0, classnames_1.default)('flex flex-col p-6 bg-background rounded-xs', {}), parentType: parentType, itemOffset: itemOffset, panel: panel, mobile: mobile, nested: nested, disableSizing: mobile, children: (0, jsx_runtime_1.jsx)("div", { children: "List Panel" }) }));
+}

package/dist/page/components/config/preview/MessagePanel.d.ts

@@ -0,0 +1,12 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
+export declare function MessagePanel({ className, parentType, itemOffset, panel, mobile, nested }: MessagePanel.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessagePanel {
+    type Props = {
+        className?: string;
+        parentType: BlockLayout.Container['type'];
+        itemOffset: number;
+        panel: BlockLayout.Message;
+        mobile: boolean;
+        nested: boolean;
+    };
+}

package/dist/page/components/config/preview/MessagePanel.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessagePanel = MessagePanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const Panel_1 = require("./Panel");
+// components
+function MessagePanel({ className, parentType, itemOffset, panel, mobile, nested }) {
+    // render
+    const { textAlign: { mobile: textAlignMobile, desktop: textAlignDesktop } } = panel;
+    const textAlign = mobile ? textAlignMobile : textAlignDesktop;
+    return ((0, jsx_runtime_1.jsxs)(Panel_1.Panel, { className: className, contentClassName: (0, classnames_1.default)('flex flex-col p-6 bg-background rounded-xs', {
+            'items-start': textAlign === 'left',
+            'items-center': textAlign === 'center',
+            'items-end': textAlign === 'right'
+        }), parentType: parentType, itemOffset: itemOffset, panel: panel, mobile: mobile, nested: nested, disableSizing: mobile, children: [(0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "w-full h-8 mb-4 bg-ix-primary rounded-xxs overflow-hidden", layout: true }), (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "w-full h-4 mb-3 bg-draft/tint3 rounded-px overflow-hidden", layout: true }), (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "w-full h-4 mb-3 bg-draft/tint3 rounded-px overflow-hidden", layout: true }), (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "w-1/2 h-4 bg-draft/tint3 rounded-px overflow-hidden", layout: true })] }));
+}

package/dist/page/components/config/preview/Panel.d.ts

@@ -0,0 +1,15 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
+import { PropsWithChildren } from 'react';
+export declare function Panel({ className, contentClassName, parentType, itemOffset, panel, mobile, nested, disableSizing, children }: Panel.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Panel {
+    type Props = PropsWithChildren & {
+        className?: string;
+        contentClassName?: string;
+        parentType: BlockLayout.Container['type'];
+        itemOffset: number;
+        panel: BlockLayout.Panel;
+        mobile: boolean;
+        nested: boolean;
+        disableSizing: boolean;
+    };
+}

package/dist/page/components/config/preview/Panel.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = Panel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+// components
+function Panel({ className, contentClassName, parentType, itemOffset, panel, mobile, nested, disableSizing, children }) {
+    // render
+    const { key, mobileOrder, alignY, fullBleed: { mobile: fullBleedMobile, desktop: fullBleedDesktop } } = panel;
+    const fullBleed = mobile ? fullBleedMobile : fullBleedDesktop;
+    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)(className, {
+            // mobile
+            'flex flex-col': mobile,
+            'justify-start': mobile && alignY === 'start',
+            'justify-center': mobile && alignY === 'center',
+            'justify-end': mobile && alignY === 'end',
+            'order-first': mobile && mobileOrder === 'first',
+            'order-last': mobile && mobileOrder === 'last',
+            // desktop
+            'grid grid-cols-12': !mobile,
+            'items-start': !mobile && alignY === 'start',
+            'items-center': !mobile && alignY === 'center',
+            'items-end': !mobile && alignY === 'end',
+            // '-ml-l4': itemPosition.left && fullBleed.desktop,
+            // '-mr-l4': itemPosition.right && fullBleed.desktop
+            // spacing (row)
+            'pl-l4': parentType === 'row' && itemOffset === 0 && !fullBleed,
+            'pr-l4': parentType === 'row' && itemOffset === 1 && !fullBleed,
+            // spacing (column/stack)
+            'px-l4': (parentType === 'column' || (parentType === 'stack' && panel.type === 'visual')) && !fullBleed,
+            'px-l6 py-l4': parentType === 'stack' && panel.type !== 'visual' && !fullBleed
+        }), layoutId: key, layout: true, children: (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: getContentClasses({ className: (0, classnames_1.default)(contentClassName, 'relative'), panel, disableSizing }), layout: true, children: children }) }, key));
+}
+function getContentClasses({ className, panel: { alignX, size }, disableSizing }) {
+    // force full width for mobile
+    if (disableSizing) {
+        return className;
+    }
+    // or size for desktop
+    switch (size) {
+        case 'xs':
+            return (0, classnames_1.default)(className, 'col-span-4', {
+                'col-start-1': alignX === 'start',
+                'col-start-5': alignX === 'center',
+                'col-end-13': alignX === 'end'
+            });
+        case 'sm':
+            return (0, classnames_1.default)(className, 'col-span-6', {
+                'col-start-1': alignX === 'start',
+                'col-start-4': alignX === 'center',
+                'col-end-13': alignX === 'end'
+            });
+        case 'md':
+            return (0, classnames_1.default)(className, 'col-span-8', {
+                'col-start-1': alignX === 'start',
+                'col-start-3': alignX === 'center',
+                'col-end-13': alignX === 'end'
+            });
+        case 'lg':
+            return (0, classnames_1.default)(className, 'col-span-10', {
+                'col-start-1': alignX === 'start',
+                'col-start-2': alignX === 'center',
+                'col-end-13': alignX === 'end'
+            });
+        case 'full':
+            return (0, classnames_1.default)(className, 'col-span-full');
+        default:
+            return className;
+    }
+}

package/dist/page/components/config/preview/RowLayout.d.ts

@@ -0,0 +1,10 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
+export declare function RowLayout({ className, layout, mobile, nested }: RowLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace RowLayout {
+    type Props = {
+        className?: string;
+        layout: BlockLayout.Row | BlockLayout.Row.Nested;
+        mobile: boolean;
+        nested?: boolean;
+    };
+}

package/dist/page/components/config/preview/RowLayout.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowLayout = RowLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const ItemLayout_1 = require("./ItemLayout");
+// components
+function RowLayout({ className, layout, mobile, nested = false }) {
+    // render
+    const { alignY, ratio, items } = layout;
+    return ((0, jsx_runtime_1.jsx)(ItemLayout_1.ItemLayout, { className: (0, classnames_1.default)(className, 'grid gap-l5', {
+            'items-start': alignY === 'start',
+            'items-center': alignY === 'center',
+            'items-end': alignY === 'end',
+            'grid-cols-[1fr,1fr]': ratio.desktop === '1/1',
+            'grid-cols-[1fr,2fr]': ratio.desktop === '1/2',
+            'grid-cols-[1fr,3fr]': ratio.desktop === '1/3',
+            'grid-cols-[2fr,1fr]': ratio.desktop === '2/1',
+            'grid-cols-[2fr,3fr]': ratio.desktop === '2/3',
+            'grid-cols-[3fr,1fr]': ratio.desktop === '3/1',
+            'grid-cols-[3fr,2fr]': ratio.desktop === '3/2'
+        }), itemClassName: () => 'flex-1', parentType: "row", items: items, mobile: mobile, nested: nested }));
+}

package/dist/page/components/config/preview/StackLayout.d.ts

@@ -0,0 +1,10 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
+export declare function StackLayout({ className, layout, mobile, nested }: StackLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace StackLayout {
+    type Props = {
+        className?: string;
+        layout: BlockLayout.Container;
+        mobile: boolean;
+        nested?: boolean;
+    };
+}

package/dist/page/components/config/preview/StackLayout.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackLayout = StackLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const ItemLayout_1 = require("./ItemLayout");
+// components
+function StackLayout({ className, layout, mobile, nested = false }) {
+    // render
+    const { items } = layout;
+    return ((0, jsx_runtime_1.jsx)(ItemLayout_1.ItemLayout, { className: (0, classnames_1.default)(className, 'stacked-stretch'), parentType: "stack", items: items, mobile: mobile, nested: nested }));
+}

package/dist/page/components/config/preview/VisualPanel.d.ts

@@ -0,0 +1,12 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
+export declare function VisualPanel({ className, parentType, itemOffset, panel, mobile, nested }: VisualPanel.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace VisualPanel {
+    type Props = {
+        className?: string;
+        parentType: BlockLayout.Container['type'];
+        itemOffset: number;
+        panel: BlockLayout.Visual;
+        mobile: boolean;
+        nested: boolean;
+    };
+}

package/dist/page/components/config/preview/VisualPanel.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualPanel = VisualPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const core_1 = require("../../../../core");
+const Panel_1 = require("./Panel");
+// components
+function VisualPanel({ className, parentType, itemOffset, panel, mobile, nested }) {
+    // render
+    const { aspectRatio: { mobile: aspectRatioMobile, desktop: aspectRatioDesktop } } = panel;
+    const aspectRatio = mobile ? aspectRatioMobile : aspectRatioDesktop;
+    return ((0, jsx_runtime_1.jsx)(Panel_1.Panel, { className: className, parentType: parentType, itemOffset: itemOffset, panel: panel, mobile: mobile, nested: nested, disableSizing: mobile, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex justify-center items-center bg-draft/tint3 rounded-xxs overflow-hidden', {
+                'aspect-square': aspectRatio === 'square' || aspectRatio === 'auto',
+                'aspect-phone': aspectRatio === 'phone',
+                'aspects-tv': aspectRatio === 'tv',
+                'aspect-widescreen': aspectRatio === 'widescreen',
+                'aspect-cinema': aspectRatio === 'cinema'
+            }), children: (0, jsx_runtime_1.jsx)(core_1.Icon, { className: "text-content-tertiary", variant: "Image", size: {
+                    size: 20,
+                    strokeWidth: 1.5,
+                    absoluteStrokeWidth: false
+                } }) }) }));
+}

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

@@ -0,0 +1,3 @@
+export * from './ColumnLayout';
+export * from './RowLayout';
+export * from './StackLayout';

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

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