@nascentdigital/funnel-editor 4.6.1 → 5.0.1

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

@@ -25,15 +25,18 @@ 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)();
     const pageController = (0, hooks_1.usePageController)();
+    const collectionStore = (0, core_1.useCollectionStore)();
+    const assetStore = (0, core_1.useAssetStore)();
     // skip if there's no config
     if (!configuration) {
         return null;
@@ -56,7 +59,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 +75,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 +85,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 +116,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 +135,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;
@@ -144,18 +147,36 @@ function BlockConfigButton({ target, children = 'Configure' }) {
             title = 'Visual Configuration';
             tip = 'Cropping changes how the image appears on your site, not your original file.';
             // get fields
-            const { aspect: aspectField, anchor: anchorField, width: widthField, horizontalAlign: horizontalAlignField } = configuration.visualFields;
+            const { aspect: aspectField, anchor: anchorField, width: widthField, horizontalAlign: horizontalAlignField, controls: controlsField, autoPlay: autoPlayField, loop: loopField, mute: muteField, } = configuration.visualFields;
             const { value } = (_a = configuration.getFieldData('visual')) !== null && _a !== void 0 ? _a : {};
-            const visual = funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(value)
+            const media = funnel_core_1.Schema.CollectionField.Value.ForInline.filter(value)
                 ? value
-                : undefined;
+                : funnel_core_1.Schema.CollectionField.Value.ForRef.filter(value)
+                    ? collectionStore.getCollection(value.id)
+                    : undefined;
+            // helpers
+            const renderOptionButton = (field) => {
+                var _a;
+                // skip if there's no field
+                if (!field) {
+                    return null;
+                }
+                // render
+                const enabled = ((_a = field.value) === null || _a === void 0 ? void 0 : _a.value) === true;
+                return ((0, jsx_runtime_1.jsx)(core_1.Button, { variant: enabled ? 'primary' : 'secondary', size: "xs", onClick: () => field.value = funnel_core_1.Schema.BooleanField.Value.toData(!enabled), children: field.schema.name }));
+            };
+            // content
             content = ((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)(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), (controlsField || autoPlayField || loopField || muteField) &&
+                                (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(core_1.FieldHeader, { label: "Video Options", size: "xs" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l4 items-center", children: [renderOptionButton(controlsField), renderOptionButton(autoPlayField)] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l4 items-center", children: [renderOptionButton(loopField), renderOptionButton(muteField)] })] })] }), funnel_ui_1.Media.Value.filter(media) && renderVisual({
+                        assetStore,
                         configuration,
-                        visual,
+                        visual: media,
                         aspectField: aspectField,
                         anchorField: anchorField
                     })] }));
@@ -180,10 +201,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) }));
@@ -277,14 +298,46 @@ function renderListLayoutItem(item) {
     // 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 }));
 }
-function renderVisual({ configuration, visual, aspectField, anchorField }) {
-    var _a, _b, _c;
+function renderVisual({ assetStore, configuration, visual, aspectField, anchorField }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    // get dimensions
+    let width = undefined;
+    let height = undefined;
+    let image = undefined;
+    let video = undefined;
+    let embeddedVideo = undefined;
+    if (funnel_ui_1.Media.Value.isImage(visual) && ((_c = (_b = (_a = visual.fields) === null || _a === void 0 ? void 0 : _a.image) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.id)) {
+        const asset = assetStore.getAsset(visual.fields.image.value.id);
+        image = asset === null || asset === void 0 ? void 0 : asset.value;
+        const { dimensions } = (_d = image === null || image === void 0 ? void 0 : image.metadata) !== null && _d !== void 0 ? _d : {};
+        width = (_e = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _e !== void 0 ? _e : undefined;
+        height = (_f = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) !== null && _f !== void 0 ? _f : undefined;
+    }
+    else if (funnel_ui_1.Media.Value.isVideo(visual) && ((_h = (_g = visual.fields) === null || _g === void 0 ? void 0 : _g.video) === null || _h === void 0 ? void 0 : _h.value)) {
+        // link local video
+        const { video: { value: { local, remote } }, cover: coverRaw } = visual.fields;
+        if ((_j = local === null || local === void 0 ? void 0 : local.value) === null || _j === void 0 ? void 0 : _j.id) {
+            const asset = assetStore.getAsset(local.value.id);
+            video = asset === null || asset === void 0 ? void 0 : asset.value;
+            const { dimensions } = (_k = video === null || video === void 0 ? void 0 : video.metadata) !== null && _k !== void 0 ? _k : {};
+            width = (_l = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _l !== void 0 ? _l : undefined;
+            height = (_m = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) !== null && _m !== void 0 ? _m : undefined;
+        }
+        // or remote
+        else if (remote === null || remote === void 0 ? void 0 : remote.value) {
+            embeddedVideo = remote.value;
+            width = embeddedVideo.dimensions.width;
+            height = embeddedVideo.dimensions.height;
+        }
+    }
+    // slop if there's no asset
+    if (!width || !height) {
+        return null;
+    }
     // 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 aspect = (_p = (_o = aspectField === null || aspectField === void 0 ? void 0 : aspectField.value) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : 'auto';
+    const anchor = (_q = anchorField === null || anchorField === void 0 ? void 0 : anchorField.value) === null || _q === void 0 ? void 0 : _q.value;
     const anchorDirection = anchorField
         ? anchorField.schema.isValidOption('left')
             ? 'x'
@@ -294,9 +347,13 @@ function renderVisual({ configuration, visual, aspectField, anchorField }) {
     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 &&
+            }), children: [image
+                    ? renderImage({ assetStore, configuration, visual: image })
+                    : video
+                        ? renderVideo({ assetStore, configuration, visual: video })
+                        : embeddedVideo
+                            ? renderStreamingVideo({ assetStore, configuration, visual: embeddedVideo })
+                            : null, 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)(react_1.AnimatePresence, { mode: "popLayout", children: [anchor !== 'left' && anchor !== 'top' &&
@@ -318,3 +375,6 @@ function renderImage({ visual }) {
 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 }));
 }
+function renderStreamingVideo({ visual }) {
+    return ((0, jsx_runtime_1.jsx)("img", { className: "max-w-full max-h-full", src: visual.thumbUrl, alt: "Video preview" }));
+}

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