@nascentdigital/funnel-ui 4.6.7 → 5.0.2

package/dist/server/blocks/Block.js

@@ -50,41 +50,6 @@ function Block(_a) {
 }
 // extension
 (function (Block) {
-    function createSchema({ id, name, version, hint, message, visual, list, extendConfigSchema }) {
-        // build fields schema and panel key mapping
-        let fieldsSchema = {};
-        const panelKeyMapping = {};
-        if (message) {
-            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), panels_1.MessagePanel.Fields.all);
-            panelKeyMapping.messageKey = 'message';
-        }
-        if (visual) {
-            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), panels_1.VisualPanel.Fields.all);
-            panelKeyMapping.visualKey = 'visual';
-        }
-        if (list) {
-            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), { list });
-            panelKeyMapping.listKey = 'list';
-        }
-        // create config schema
-        const configSchema = panels_1.BlockPanel.getConfigSchema(Object.assign(Object.assign({ fields: fieldsSchema }, panelKeyMapping), { extend: extendConfigSchema }));
-        // create block schema
-        const schema = funnel_core_1.Schema.Block.create({
-            id,
-            name,
-            version,
-            hint,
-            config: configSchema,
-            fields: fieldsSchema,
-            getConfig: args => panels_1.BlockPanel.getConfig(Object.assign({ args }, panelKeyMapping)),
-            getLayout: args => panels_1.BlockPanel.getLayout(Object.assign({ args }, panelKeyMapping))
-        });
-        // return
-        return {
-            schema: schema,
-            panelKeyMapping
-        };
-    }
     function create(args) {
         // create schema
         const { schema, panelKeyMapping } = createSchema(args);
@@ -97,28 +62,36 @@ function Block(_a) {
                 return null;
             }
             // layout
-            const blockLayout = panels_1.BlockPanel.getLayout(Object.assign({ args: {
+            const blockLayout = getLayout(Object.assign({ args: {
                     fields: (_a = props.model.fields) !== null && _a !== void 0 ? _a : {},
                     config: (_b = props.model.config) !== null && _b !== void 0 ? _b : {}
                 } }, panelKeyMapping));
             const getPanel = ({ className, panel }) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
                 switch (panel.type) {
+                    // message panel
                     case 'message': {
                         const { model: { fields }, messagePanelProps } = props;
-                        const _j = messagePanelProps !== null && messagePanelProps !== void 0 ? messagePanelProps : {}, { className: panelClassName } = _j, panelProps = __rest(_j, ["className"]);
+                        const _p = messagePanelProps !== null && messagePanelProps !== void 0 ? messagePanelProps : {}, { className: panelClassName } = _p, panelProps = __rest(_p, ["className"]);
                         return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, title: (_a = fields === null || fields === void 0 ? void 0 : fields.title) === null || _a === void 0 ? void 0 : _a.value, headline: (_b = fields === null || fields === void 0 ? void 0 : fields.headline) === null || _b === void 0 ? void 0 : _b.value, caption: (_c = fields === null || fields === void 0 ? void 0 : fields.caption) === null || _c === void 0 ? void 0 : _c.value, ctas: (_d = fields === null || fields === void 0 ? void 0 : fields.ctas) === null || _d === void 0 ? void 0 : _d.value }, panelProps)));
                     }
+                    // visual panel
                     case 'visual': {
                         const { model: { fields, config }, visualPanelProps } = props;
-                        const _k = visualPanelProps !== null && visualPanelProps !== void 0 ? visualPanelProps : {}, { className: panelClassName } = _k, panelProps = __rest(_k, ["className"]);
-                        return ((0, jsx_runtime_1.jsx)(panels_1.VisualPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, visual: (_e = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _e === void 0 ? void 0 : _e.value, anchor: (_f = funnel_core_1.Schema.EnumField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualAnchor)) !== null && _f !== void 0 ? _f : 'center' }, panelProps)));
+                        const _q = visualPanelProps !== null && visualPanelProps !== void 0 ? visualPanelProps : {}, { className: panelClassName } = _q, panelProps = __rest(_q, ["className"]);
+                        return ((0, jsx_runtime_1.jsx)(panels_1.VisualPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, visual: (_e = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _e === void 0 ? void 0 : _e.value, anchor: (_f = funnel_core_1.Schema.EnumField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualAnchor)) !== null && _f !== void 0 ? _f : 'center', controls: (_g = funnel_core_1.Schema.BooleanField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualControls)) !== null && _g !== void 0 ? _g : true, autoPlay: (_h = funnel_core_1.Schema.BooleanField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualAutoPlay)) !== null && _h !== void 0 ? _h : false, loop: (_j = funnel_core_1.Schema.BooleanField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualLoop)) !== null && _j !== void 0 ? _j : false, mute: (_k = funnel_core_1.Schema.BooleanField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualMute)) !== null && _k !== void 0 ? _k : false }, panelProps)));
                     }
+                    // list panel
                     case 'list': {
                         const { model: { fields, config }, listPanelProps, children } = props;
-                        const _l = listPanelProps !== null && listPanelProps !== void 0 ? listPanelProps : {}, { className: panelClassName, itemProps } = _l, panelProps = __rest(_l, ["className", "itemProps"]);
-                        const listLayout = (_g = funnel_core_1.Schema.EnumField.Value.fromData(config === null || config === void 0 ? void 0 : config.listLayout)) !== null && _g !== void 0 ? _g : 'card';
-                        return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, layout: listLayout, items: (_h = fields === null || fields === void 0 ? void 0 : fields.list) === null || _h === void 0 ? void 0 : _h.value }, panelProps, { children: item => children({ item, itemProps, listLayout, blockLayout }) })));
+                        const _r = listPanelProps !== null && listPanelProps !== void 0 ? listPanelProps : {}, { className: panelClassName, itemProps } = _r, panelProps = __rest(_r, ["className", "itemProps"]);
+                        const listLayout = (_l = funnel_core_1.Schema.EnumField.Value.fromData(config === null || config === void 0 ? void 0 : config.listLayout)) !== null && _l !== void 0 ? _l : 'card';
+                        // determine renderer
+                        const renderItem = children !== null && children !== void 0 ? children : (_m = args.list) === null || _m === void 0 ? void 0 : _m.renderItem;
+                        if (!renderItem) {
+                            throw new funnel_core_1.IllegalStateError(`No item render specified for list panel`);
+                        }
+                        return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, layout: listLayout, items: (_o = fields === null || fields === void 0 ? void 0 : fields.list) === null || _o === void 0 ? void 0 : _o.value }, panelProps, { children: item => renderItem({ item, itemProps, listLayout, blockLayout }) })));
                     }
                 }
             };
@@ -132,25 +105,737 @@ function Block(_a) {
         };
     }
     Block.create = create;
-    function filterNode(node) {
-        return (0, react_1.isValidElement)(node)
-            && !!node.props && typeof node.props === 'object' && !Array.isArray(node.props)
-            && 'model' in node.props && !!node.props.model && typeof node.props.model === 'object' && !Array.isArray(node.props.model);
+    // create schema
+    function createSchema({ id, name, version, hint, message, visual, list, extendConfigSchema }) {
+        // build fields schema and panel key mapping
+        let fieldsSchema = {};
+        const panelKeyMapping = {};
+        if (message) {
+            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), panels_1.MessagePanel.Fields.all);
+            panelKeyMapping.messageKey = 'message';
+        }
+        if (visual) {
+            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), panels_1.VisualPanel.Fields.all);
+            panelKeyMapping.visualKey = 'visual';
+        }
+        if (list) {
+            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), { list: list.schema });
+            panelKeyMapping.listKey = 'list';
+        }
+        // create config schema
+        const configSchema = getConfigSchema(Object.assign(Object.assign({ fields: fieldsSchema }, panelKeyMapping), { extend: extendConfigSchema }));
+        // create block schema
+        const schema = funnel_core_1.Schema.Block.create({
+            id,
+            name,
+            version,
+            hint,
+            config: configSchema,
+            fields: fieldsSchema,
+            getConfig: args => getConfig(Object.assign({ args }, panelKeyMapping)),
+            getLayout: args => getLayout(Object.assign({ args }, panelKeyMapping))
+        });
+        // return
+        return {
+            schema: schema,
+            panelKeyMapping
+        };
+    }
+    // config schema
+    let GetConfigSchema;
+    (function (GetConfigSchema) {
+        let Key;
+        (function (Key) {
+            // helper
+            function normalize(key) {
+                return typeof key === 'string'
+                    ? { key, name: funnel_core_1.StringUtils.capitalize(key) }
+                    : key;
+            }
+            Key.normalize = normalize;
+        })(Key = GetConfigSchema.Key || (GetConfigSchema.Key = {}));
+    })(GetConfigSchema = Block.GetConfigSchema || (Block.GetConfigSchema = {}));
+    function getConfigSchema({ extend, messageKey: messageKeyRaw, visualKey: visualKeyRaw, listKey: listKeyRaw }) {
+        // throw if there are not enough panels
+        const { key: messageKey, name: messageLabel } = messageKeyRaw === undefined
+            ? {}
+            : GetConfigSchema.Key.normalize(messageKeyRaw);
+        const { key: visualKey, name: visualLabel } = visualKeyRaw === undefined
+            ? {}
+            : GetConfigSchema.Key.normalize(visualKeyRaw);
+        const { key: listKey, name: listLabel } = listKeyRaw === undefined
+            ? {}
+            : GetConfigSchema.Key.normalize(listKeyRaw);
+        const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
+        if (panelCount === 0) {
+            throw new funnel_core_1.IllegalStateError('[BlockPanel.ts] There needs to be at least one panel');
+        }
+        // initialize config schema
+        const configSchema = Object.assign(Object.assign(Object.assign({}, schema_1.BlockConfig.Presets.ThemeOnly.schema), extend), { layout: schema_1.PanelLayout.schema.optional(), slotVariation: schema_1.SlotVariation.schema });
+        // TODO: runtime error for key not available in fields
+        // add schema for message
+        if (messageKey) {
+            const keys = panels_1.MessagePanel.Config.getKeys(messageKey);
+            configSchema[keys.textAlign] = schema_1.TextAlignment.schema
+                .rename(`${messageLabel} ${schema_1.TextAlignment.schema.name}`)
+                .optional();
+            configSchema[keys.width] =
+                schema_1.ItemSize.schema
+                    .rename(`${messageLabel} ${schema_1.ItemSize.schema.name}`)
+                    .optional();
+            configSchema[keys.horizontalAlign] =
+                schema_1.ItemAlignment
+                    .Horizontal.schema.rename(`${messageLabel} ${schema_1.ItemAlignment.Horizontal.schema.name}`)
+                    .optional();
+            configSchema[keys.verticalAlign] = schema_1.ItemAlignment.Vertical.schema.rename(`${messageLabel} ${schema_1.ItemAlignment.Vertical.schema.name}`).optional();
+        }
+        // add schema for list
+        if (listKey) {
+            const keys = panels_1.ListPanel.Config.getKeys(listKey);
+            configSchema[keys.layout] = schema_1.ListPanelLayout.schema.rename(`${listLabel} ${schema_1.ListPanelLayout.schema.name}`).optional();
+            configSchema[keys.width] = schema_1.ItemSize.schema.rename(`${listLabel} ${schema_1.ItemSize.schema.name}`).optional();
+            configSchema[keys.horizontalAlign] = schema_1.ItemAlignment
+                .Horizontal.schema
+                .rename(`${listLabel} ${schema_1.ItemAlignment.Horizontal.schema.name}`)
+                .optional();
+            configSchema[keys.verticalAlign] = schema_1.ItemAlignment
+                .Horizontal.schema
+                .rename(`${listLabel} ${schema_1.ItemAlignment.Vertical.schema.name}`)
+                .optional();
+        }
+        // add schema for visual
+        if (visualKey) {
+            const keys = panels_1.VisualPanel.Config.getKeys(visualKey);
+            configSchema[keys.aspect] = schema_1.AspectRatio.schema
+                .rename(`${visualLabel} ${schema_1.AspectRatio.schema.name}`)
+                .optional();
+            configSchema[keys.anchor] = schema_1.Anchor.schema
+                .rename(`${visualLabel} ${schema_1.Anchor.schema.name}`)
+                .optional();
+            configSchema[keys.width] =
+                schema_1.ItemSize.schema
+                    .rename(`${visualLabel} ${schema_1.ItemSize.schema.name}`)
+                    .optional();
+            configSchema[keys.horizontalAlign] =
+                schema_1.ItemAlignment
+                    .Horizontal.schema.rename(`${visualLabel} ${schema_1.ItemAlignment.Horizontal.schema.name}`)
+                    .optional();
+            configSchema[keys.controls] = funnel_core_1.Schema.Field.boolean({
+                name: 'Controls',
+                description: 'Display video controls so views can play/pause/seek content.',
+                defaultValue: true,
+                semantics: 'toggle'
+            }).optional();
+            configSchema[keys.autoPlay] = funnel_core_1.Schema.Field.boolean({
+                name: 'Autoplay',
+                description: 'Video will automatically play once it\'s ready.',
+                defaultValue: false,
+                semantics: 'toggle'
+            }).optional();
+            configSchema[keys.loop] = funnel_core_1.Schema.Field.boolean({
+                name: 'Loop',
+                description: 'Video will loop forever when enabled.',
+                defaultValue: false,
+                semantics: 'toggle'
+            }).optional();
+            configSchema[keys.mute] = funnel_core_1.Schema.Field.boolean({
+                name: 'Mute',
+                description: 'Audio will be silenced.',
+                defaultValue: true,
+                semantics: 'toggle'
+            }).optional();
+        }
+        // add content alignment/split if there are more than 2 panels
+        if (panelCount > 1) {
+            configSchema['contentAlign'] = schema_1.ItemAlignment.Vertical.schema.rename('Content Alignment').optional();
+            configSchema['contentSplit'] = schema_1.RowRatio.schema.rename('Content Split').optional();
+        }
+        // return
+        return configSchema;
     }
-    Block.filterNode = filterNode;
+    Block.getConfigSchema = getConfigSchema;
+    function getConfig({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        // throw if there are not enough panels
+        const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
+        if (panelCount === 0) {
+            throw new funnel_core_1.IllegalStateError('[BlockPanel.ts] There needs to be at least one panel');
+        }
+        // resolve props
+        const configSchema = args.configSchema;
+        const config = args.config;
+        const fields = args.fields;
+        const messageKeys = messageKey
+            ? panels_1.MessagePanel.Config.getKeys(messageKey)
+            : {};
+        const visualKeys = visualKey
+            ? panels_1.VisualPanel.Config.getKeys(visualKey)
+            : {};
+        const listKeys = listKey
+            ? panels_1.ListPanel.Config.getKeys(listKey)
+            : {};
+        const allKeys = [
+            ...Object.values(messageKeys),
+            ...Object.values(visualKeys),
+            ...Object.values(listKeys)
+        ];
+        // current config helpers
+        const visual = visualKey
+            ? fields[visualKey]
+            : undefined;
+        const panelInfo = getActivePanels({ fields: args.fields, messageFieldKeys, messageKey, visualKey, listKey });
+        const activePanels = {
+            message: panelInfo.message !== false,
+            visual: panelInfo.visual !== false,
+            list: panelInfo.list !== false,
+        };
+        // get layout schema
+        const layoutSchema = schema_1.PanelLayout.schemaForPanels(activePanels);
+        let layout = ((_b = (_a = config.layout) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'solo');
+        layout = layoutSchema.isValidOption(layout)
+            ? layout
+            : layoutSchema.defaultOption;
+        const slotVariationSchema = schema_1.SlotVariation.schemaForLayout(layout);
+        let slotVariation = ((_d = (_c = config.slotVariation) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 'v1');
+        slotVariation = slotVariationSchema.isValidOption(slotVariation)
+            ? slotVariation
+            : slotVariationSchema.defaultOption;
+        const items = panels_1.BlockPanel.Slots.Items.compute({
+            panels: activePanels,
+            layout,
+            variation: slotVariation
+        });
+        const flexDirections = panels_1.BlockPanel.Slots.getFlexDirections({ layout, items });
+        // extract message config
+        let messageConfig = undefined;
+        if (messageKey && activePanels.message) {
+            messageConfig = panels_1.MessagePanel.getConfig({
+                messageKey,
+                config: config,
+                fields: fields,
+                flexDirection: flexDirections.M
+            });
+        }
+        // extract visual config (if any)
+        let visualConfig = undefined;
+        if (visualKey && activePanels.visual) {
+            visualConfig = panels_1.VisualPanel.getConfig({
+                visualKey,
+                visual,
+                config: config,
+                flexDirection: flexDirections.V
+            });
+        }
+        // extract list config (if any)
+        let listConfig = undefined;
+        if (listKey && activePanels.list) {
+            listConfig = panels_1.ListPanel.getConfig({
+                listKey,
+                config: config,
+                flexDirection: flexDirections.L
+            });
+        }
+        // create new schema
+        const updatedConfigSchema = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Object.entries(configSchema)
+            .reduce((configSchema, [key, fieldSchema]) => {
+            // add the config back if it's not in the panel config keys
+            if (!allKeys.includes(key)) {
+                configSchema[key] = fieldSchema;
+            }
+            // keep reducing
+            return configSchema;
+        }, {})), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.configSchema), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.configSchema), listConfig === null || listConfig === void 0 ? void 0 : listConfig.configSchema), { layout: layoutSchema, slotVariation: slotVariationSchema });
+        // drop content alignment if it's not applicable
+        if (!panels_1.BlockPanel.Slots.contentAlignmentExists(layout)) {
+            delete updatedConfigSchema.contentAlign;
+        }
+        // drop layout/content split if not applicable
+        if (panelCount < 2) {
+            delete updatedConfigSchema.layout;
+            delete updatedConfigSchema.contentSplit;
+        }
+        // create default config
+        const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), { theme: funnel_core_1.Schema.EnumField.Value.toData('default'), contentAlign: funnel_core_1.Schema.EnumField.Value.toData('start'), contentSplit: funnel_core_1.Schema.EnumField.Value.toData('1/1') }), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.defaultConfig), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.defaultConfig), listConfig === null || listConfig === void 0 ? void 0 : listConfig.defaultConfig), { layout: funnel_core_1.Schema.EnumField.Value.toData((_e = layoutSchema.defaultOption) !== null && _e !== void 0 ? _e : 'solo'), slotVariation: funnel_core_1.Schema.EnumField.Value.toData((_f = slotVariationSchema.defaultOption) !== null && _f !== void 0 ? _f : 'v1') });
+        const contentAlign = ((_h = (_g = config.contentAlign) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : 'start');
+        const contentSplit = ((_k = (_j = config.contentSplit) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : '1/1');
+        // create new config
+        const updatedConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.config), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.config), listConfig === null || listConfig === void 0 ? void 0 : listConfig.config), { layout: funnel_core_1.Schema.EnumField.Value.toData(layout), slotVariation: funnel_core_1.Schema.EnumField.Value.toData(slotVariation), contentAlign: funnel_core_1.Schema.EnumField.Value.toData(contentAlign), contentSplit: funnel_core_1.Schema.EnumField.Value.toData(contentSplit) });
+        // return config
+        return {
+            updatedConfigSchema: updatedConfigSchema,
+            updatedConfig: updatedConfig,
+            defaultConfig: defaultConfig
+        };
+    }
+    Block.getConfig = getConfig;
+    function getLayout({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+        // throw if there are not enough panels
+        const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
+        if (panelCount === 0) {
+            throw new funnel_core_1.IllegalStateError('[BlockPanel.ts] There needs to be at least one panel');
+        }
+        // resolve props
+        const config = args.config;
+        const messageKeys = messageKey
+            ? panels_1.MessagePanel.Config.getKeys(messageKey)
+            : {};
+        const visualKeys = visualKey
+            ? panels_1.VisualPanel.Config.getKeys(visualKey)
+            : {};
+        const listKeys = listKey
+            ? panels_1.ListPanel.Config.getKeys(listKey)
+            : {};
+        // current config helpers
+        const panelInfo = getActivePanels({ fields: args.fields, messageFieldKeys, messageKey, visualKey, listKey });
+        const activePanels = {
+            message: panelInfo.message !== false,
+            visual: panelInfo.visual !== false,
+            list: panelInfo.list !== false,
+        };
+        // get layout schema
+        const layout = ((_b = (_a = config.layout) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'solo');
+        const slotVariation = ((_d = (_c = config.slotVariation) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 'v1');
+        const items = panels_1.BlockPanel.Slots.Items.compute({
+            panels: activePanels,
+            layout,
+            variation: slotVariation
+        });
+        // compute content alignment/split config
+        const contentAlign = (_f = (_e = config.contentAlign) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : 'start';
+        const contentSplit = ((_h = (_g = config.contentSplit) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : '1/1');
+        // compute message config
+        const messageWidthRaw = (_j = config[messageKeys.width]) === null || _j === void 0 ? void 0 : _j.value;
+        const isMessageFullBleed = messageWidthRaw === 'fullBleed';
+        const messageWidth = isMessageFullBleed ? 'full' : (_l = (_k = config[messageKeys.width]) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 'full';
+        const messageTextAlign = (_o = (_m = config[messageKeys.textAlign]) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : 'left';
+        const messageHorizontalAlign = (_q = (_p = config[messageKeys.horizontalAlign]) === null || _p === void 0 ? void 0 : _p.value) !== null && _q !== void 0 ? _q : 'start';
+        const messageVerticalAlign = (_s = (_r = config[messageKeys.verticalAlign]) === null || _r === void 0 ? void 0 : _r.value) !== null && _s !== void 0 ? _s : 'start';
+        // compute visual config
+        const visualAspect = (_u = (_t = config[visualKeys.aspect]) === null || _t === void 0 ? void 0 : _t.value) !== null && _u !== void 0 ? _u : 'auto';
+        const visualWidth = ((_w = (_v = config[visualKeys.width]) === null || _v === void 0 ? void 0 : _v.value) !== null && _w !== void 0 ? _w : 'full');
+        const visualHorizontalAlign = (_y = (_x = config[visualKeys.horizontalAlign]) === null || _x === void 0 ? void 0 : _x.value) !== null && _y !== void 0 ? _y : 'start';
+        const isVisualFullBleed = visualWidth === 'fullBleed';
+        // compute list config
+        const listWidthRaw = (_z = config[listKeys.width]) === null || _z === void 0 ? void 0 : _z.value;
+        const isListFullBleed = listWidthRaw === 'fullBleed';
+        const listWidth = isListFullBleed ? 'full' : (_1 = (_0 = config[listKeys.width]) === null || _0 === void 0 ? void 0 : _0.value) !== null && _1 !== void 0 ? _1 : 'full';
+        const listHorizontalAlign = (_3 = (_2 = config[listKeys.horizontalAlign]) === null || _2 === void 0 ? void 0 : _2.value) !== null && _3 !== void 0 ? _3 : 'start';
+        const listVerticalAlign = (_5 = (_4 = config[listKeys.verticalAlign]) === null || _4 === void 0 ? void 0 : _4.value) !== null && _5 !== void 0 ? _5 : 'start';
+        // create visual if we have one
+        let visualSlot = undefined;
+        if (items.includes('V') || schema_1.PanelLayout.isNested(layout)) {
+            // language=XML
+            visualSlot = (`
+        <visual
+          xmlns="nd:block"
+          aspect="${visualAspect}"
+          size="${visualWidth === 'fullBleed' ? 'full' : visualWidth}"
+          alignX="${visualHorizontalAlign}"
+          fullBleed="${isVisualFullBleed}"
+        />
+      `);
+        }
+        // create slot items
+        const slots = items.map(item => {
+            switch (item) {
+                case 'M': {
+                    // language=XML
+                    return (`
+            <message
+              xmlns="nd:block"
+              textAlign="${messageTextAlign}"
+              size="${messageWidth}"
+              fullBleed="${isMessageFullBleed}"
+              alignX="${messageHorizontalAlign}"
+              alignY="${messageVerticalAlign}"
+            />
+          `);
+                }
+                case 'V':
+                    return visualSlot;
+                case 'L': {
+                    // FIXME: update props from config (lists WILL REQUIRED new props)
+                    // language=XML
+                    return (`
+            <list
+              xmlns="nd:block"
+              layout="column"
+              itemType="message"
+              size="${listWidth}"
+              alignX="${listHorizontalAlign}"
+              alignY="${listVerticalAlign}"
+              fullBleed="${isListFullBleed}"
+              itemCount="2"
+            />
+          `);
+                }
+            }
+        });
+        // build layout
+        let blockLayout = '';
+        switch (layout) {
+            case 'solo':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Solo">
+            <col>
+              ${slots[0]}
+            </col>
+          </block>
+        `;
+                break;
+            case 'stack.h': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    tightDesktop = 'both';
+                    tightMobile = items[0] === 'V' ? 'above' : 'below';
+                }
+                // language=XML
+                blockLayout = `
+          <block 
+            xmlns="nd:block"
+            name="Horizontal Stack"
+            tightDesktop="${tightDesktop}"
+            tightMobile="${tightMobile}"
+          >
+            <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+              ${slots[0]}
+              ${slots[1]}
+            </row>
+          </block>
+        `;
+                break;
+            }
+            case 'stack.v':
+                // language=XML
+                blockLayout = `
+            <block 
+              xmlns="nd:block" name="Vertical Stack"
+              tight="${!isVisualFullBleed ? 'none' : items[0] === 'V' ? 'above' : 'below'}">
+            <col>
+              ${slots[0]}
+              ${slots[1]}
+            </col>
+          </block>
+        `;
+                break;
+            case 'nested':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Simple" tight="${isVisualFullBleed ? 'both' : 'none'}">
+            <stack>
+              ${visualSlot}
+              ${slots[0]}
+            </stack>
+          </block>
+        `;
+                break;
+            case 'nested.h':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Horizontal">
+            <stack>
+              ${visualSlot}
+              <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+                ${slots[0]}
+                ${slots[1]}
+              </row>
+            </stack>
+          </block>
+        `;
+                break;
+            case 'nested.v':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Vertical">
+            <stack>
+              ${visualSlot}
+              <col>
+                ${slots[0]}
+                ${slots[1]}
+              </col>
+            </stack>
+          </block>
+        `;
+                break;
+            case 'nested.t':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Top">
+            <col>
+              <stack>
+                ${visualSlot}
+                ${slots[0]}
+              </stack>
+              ${slots[1]}
+            </col>
+          </block>
+        `;
+                break;
+            case 'nested.r':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Right">
+            <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+              ${slots[0]}
+              <stack>
+                ${visualSlot}
+                ${slots[1]}
+              </stack>
+            </row>
+          </block>
+        `;
+                break;
+            case 'nested.b':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Bottom">
+            <col>
+              ${slots[0]}
+              <stack>
+                ${visualSlot}
+                ${slots[1]}
+              </stack>
+            </col>
+          </block>
+        `;
+                break;
+            case 'nested.l':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Left">
+            <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+              <stack>
+                ${visualSlot}
+                ${slots[0]}
+              </stack>
+              ${slots[1]}
+            </row>
+          </block>
+        `;
+                break;
+            case 'brick.v': {
+                // compute tight
+                let tight = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tight = 'above';
+                    }
+                    else if (items[2] === 'V') {
+                        tight = 'below';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+          <block
+            xmlns="nd:block"
+            name="Brick: Vertical"
+            tight="${tight}"
+          >
+            <col>
+              ${slots[0]}
+              ${slots[1]}
+              ${slots[2]}
+            </col>
+          </block>
+        `;
+                break;
+            }
+            case 'brick.t': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'above';
+                    }
+                    else if (items[1] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'none';
+                    }
+                    else if (items[2] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'below';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+            <block
+              xmlns="nd:block"
+              name="Brick: Top"
+              tightDesktop="${tightDesktop}"
+              tightMobile="${tightMobile}"
+            >
+              <col>
+                ${slots[0]}
+                <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+                  ${slots[1]}
+                  ${slots[2]}
+                </row>
+              </col>
+            </block>
+        `;
+                break;
+            }
+            case 'brick.r': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'above';
+                    }
+                    else if (items[1] === 'V') {
+                        tightDesktop = 'both';
+                        tightMobile = 'below';
+                    }
+                    else if (items[2] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'none';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+            <block
+              xmlns="nd:block" 
+              name="Brick: Right"
+              tightDesktop="${tightDesktop}"
+              tightMobile="${tightMobile}"
+            >
+                <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+                    <col>
+                        ${slots[0]}
+                        ${slots[2]}
+                    </col>
+                    ${slots[1]}
+                </row>
+            </block>
+        `;
+                break;
+            }
+            case 'brick.b': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'above';
+                    }
+                    else if (items[1] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'none';
+                    }
+                    else if (items[2] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'below';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+            <block 
+              xmlns="nd:block"
+              name="Brick: Bottom"
+              tightDesktop="${tightDesktop}"
+              tightMobile="${tightMobile}"
+            >
+              <col>
+                <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+                  ${slots[0]}
+                  ${slots[1]}
+                </row>
+                ${slots[2]}
+              </col>
+            </block>
+        `;
+                break;
+            }
+            case 'brick.l': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tightDesktop = 'both';
+                        tightMobile = 'above';
+                    }
+                    else if (items[1] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'none';
+                    }
+                    else if (items[2] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'below';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+          <block
+            xmlns="nd:block"
+            name="Brick: Left"
+            tightDesktop="${tightDesktop}"
+            tightMobile="${tightMobile}"
+          >
+            <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+                ${slots[0]}
+                <col>
+                    ${slots[1]}
+                    ${slots[2]}
+                </col>
+            </row>
+          </block>
+        `;
+                break;
+            }
+            default:
+                throw new funnel_core_1.NotImplementedError();
+        }
+        // return parsed layout
+        return funnel_core_1.BlockLayout.parse(blockLayout);
+    }
+    Block.getLayout = getLayout;
+    function getActivePanels({ fields: fieldsRaw, messageFieldKeys, messageKey, visualKey, listKey }) {
+        var _a;
+        // prepare values
+        const fields = fieldsRaw;
+        const visual = visualKey
+            ? fields[visualKey]
+            : undefined;
+        const list = listKey
+            ? fields[listKey]
+            : undefined;
+        // return result
+        return {
+            message: messageKey && panels_1.MessagePanel.Fields.exists(fields, messageFieldKeys)
+                ? panels_1.MessagePanel.Fields.isEmpty(fields, messageFieldKeys)
+                    ? 'invalid'
+                    : 'valid'
+                : false,
+            visual: visual
+                ? visual.value
+                    ? 'valid'
+                    : 'invalid'
+                : false,
+            list: list
+                ? ((_a = list.value) !== null && _a !== void 0 ? _a : []).length === 0
+                    ? 'valid'
+                    : 'invalid'
+                : false
+        };
+    }
+    Block.getActivePanels = getActivePanels;
 })(Block || (exports.Block = Block = {}));
-function renderLayout({ renderPanel, layout }) {
-    // render root container (row/column/stack)
-    const { root } = layout;
-    const { items } = root;
-    const siblingCount = items.length;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "nd-Block-rootContainerWrap", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-Block-rootContainer', getContainerClasses(root)), children: items.map((item, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({ renderPanel, parent: root.type, item, siblingCount }) }, `${item.type}.${index}`)) }) }));
-}
+// helpers
 function getContainerClasses(container) {
     var _a;
     const { type, alignX, alignY, items } = container;
     const itemCount = (_a = items.length) !== null && _a !== void 0 ? _a : 0;
-    return (0, classnames_1.default)({
+    return (0, classnames_1.default)('nd-Block-container', {
         'nd-Block-row': type === 'row',
         'nd-Block-column': type === 'column',
         'nd-Block-stack': type === 'stack',
@@ -160,11 +845,51 @@ function getContainerClasses(container) {
         'nd-Block-y-start': alignY === 'start',
         'nd-Block-y-center': alignY === 'center',
         'nd-Block-y-end': alignY === 'end',
-        'nd-Block-items-1': itemCount === 1,
-        'nd-Block-items-2': itemCount === 2,
-        'nd-Block-items-3': itemCount === 3
+    }, type === 'row' && funnel_core_1.BlockLayout.ResponsiveClassNames.parse({
+        value: container.ratio,
+        desktop: {
+            '1/1': 'md:nd-Block-row-ratio-1_1',
+            '1/2': 'md:nd-Block-row-ratio-1_2',
+            '1/3': 'md:nd-Block-row-ratio-1_3',
+            '2/1': 'md:nd-Block-row-ratio-2_1',
+            '2/3': 'md:nd-Block-row-ratio-2_3',
+            '3/1': 'md:nd-Block-row-ratio-3_1',
+            '3/2': 'md:nd-Block-row-ratio-3_2',
+        },
+        mobile: {
+            '1/1': '',
+            '1/2': '',
+            '1/3': '',
+            '2/1': '',
+            '2/3': '',
+            '3/1': '',
+            '3/2': '',
+        },
+        base: {
+            '1/1': '',
+            '1/2': '',
+            '1/3': '',
+            '2/1': '',
+            '2/3': '',
+            '3/1': '',
+            '3/2': '',
+        }
+    }));
+}
+function getWrapperClasses(type) {
+    return (0, classnames_1.default)('nd-Block-containerWrap', {
+        'nd-Block-rowWrap': type === 'row',
+        'nd-Block-columnWrap': type === 'column',
+        'nd-Block-stackWrap': type === 'stack',
     });
 }
+function renderLayout({ renderPanel, layout }) {
+    // render root container (row/column/stack)
+    const { root } = layout;
+    const { items } = root;
+    const siblingCount = items.length;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-Block-rootContainerWrap', getWrapperClasses(root.type)), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-Block-rootContainer', getContainerClasses(root)), children: items.map((item, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({ renderPanel, parent: root.type, item, siblingCount }) }, `${item.type}.${index}`)) }) }));
+}
 function renderItem({ renderPanel, parent, item, siblingCount }) {
     // render based on item type
     switch (item.type) {
@@ -175,7 +900,7 @@ function renderItem({ renderPanel, parent, item, siblingCount }) {
             const { items } = item;
             const parent = item.type;
             const siblingCount = items.length;
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getContainerClasses(item)), children: items.map((child, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({ renderPanel, parent, item: child, siblingCount }) }, `${child.type}.${index}`)) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getWrapperClasses(item.type)), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getContainerClasses(item)), children: items.map((child, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({ renderPanel, parent, item: child, siblingCount }) }, `${child.type}.${index}`)) }) }));
         }
         // child panel (provided by caller)
         default: {