@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1,236 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLayout = SkeletonLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const Icon_1 = require("./Icon");
+// component
+function SkeletonLayout({ variant, layout }) {
+    // render
+    const tight = variant === 'mobile'
+        ? layout === null || layout === void 0 ? void 0 : layout.tight.mobile
+        : layout === null || layout === void 0 ? void 0 : layout.tight.desktop;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l3", children: [(0, jsx_runtime_1.jsx)("h5", { className: "label-xs text-content-primary leading-[100%]", children: variant === 'mobile' ? 'Mobile' : 'Desktop' }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface2 overflow-hidden rounded-xs', {
+                    'min-h-[100px]': !layout,
+                    'w-[120px]': variant === 'desktop',
+                    'w-[64px]': variant === 'mobile',
+                    'pb-l4': tight === 'above',
+                    'pt-l4': tight === 'below',
+                    'py-l4': tight === 'none'
+                }), children: renderLayout({ variant, layout }) })] }));
+}
+// helpers
+var Skeleton;
+(function (Skeleton) {
+    let Headline;
+    (function (Headline) {
+        Headline.md = 'h-8 bg-ix-primary rounded-xxs overflow-hidden';
+        Headline.sm = 'h-6 bg-ix-primary rounded-xxs overflow-hidden';
+    })(Headline = Skeleton.Headline || (Skeleton.Headline = {}));
+    let Caption;
+    (function (Caption) {
+        Caption.md = 'h-4 bg-draft/tint3 rounded-px overflow-hidden';
+        Caption.sm = 'h-4 bg-draft/tint3 rounded-px overflow-hidden';
+    })(Caption = Skeleton.Caption || (Skeleton.Caption = {}));
+    function Media({ className, aspect }) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'flex justify-center items-center bg-draft/tint3 rounded-xxs overflow-hidden', {
+                'aspect-square': aspect === 'square' || aspect === 'auto',
+                'aspect-phone': aspect === 'phone',
+                'aspect-tv': aspect === 'tv',
+                'aspect-widescreen': aspect === 'widescreen',
+                'aspect-cinema': aspect === 'cinema'
+            }), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: "text-content-tertiary", variant: "Image", size: {
+                    size: 20,
+                    strokeWidth: 1.5,
+                    absoluteStrokeWidth: false
+                } }) }));
+    }
+    Skeleton.Media = Media;
+})(Skeleton || (Skeleton = {}));
+function renderLayout({ className, variant, layout }) {
+    // TODO: render empty state if there's no layout
+    if (!layout) {
+        return null;
+    }
+    // render root layout
+    const { type, items, } = layout.root;
+    return ((0, jsx_runtime_1.jsx)("div", { className: getContainerClasses({ className, variant, siblingCount: 1, item: layout.root }), children: items.map((item, parentOffset) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
+                className: (0, classnames_1.default)({
+                    'flex-1': type === 'row' && variant !== 'mobile'
+                }),
+                variant,
+                parent: type,
+                siblingCount: items.length,
+                item,
+                itemPosition: new ItemPosition({
+                    parent: type,
+                    parentOffset,
+                    parentSize: items.length,
+                })
+            }) }, `${item.type}.${parentOffset}`)) }));
+}
+function renderItem({ className, parent, siblingCount, variant, item, itemPosition }) {
+    // render item
+    const { type: itemType } = item;
+    switch (itemType) {
+        case 'row':
+        case 'column':
+        case 'stack':
+            return ((0, jsx_runtime_1.jsx)("div", { className: getContainerClasses({ className, siblingCount, variant, item }), children: item.items.map((item, parentOffset, items) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
+                        className: (0, classnames_1.default)({
+                            'flex-1': itemType === 'row'
+                        }),
+                        variant,
+                        parent: itemType,
+                        siblingCount: items.length,
+                        item: item,
+                        itemPosition: new ItemPosition({
+                            parent: itemType,
+                            parentOffset,
+                            parentSize: items.length,
+                        })
+                    }) }, `${item.type}.${parentOffset}`)) }));
+        case 'message':
+            return renderMessage({ className, parent, siblingCount, variant, item, itemPosition });
+        case 'visual':
+            return renderVisual({ className, parent, siblingCount, variant, item, itemPosition });
+        case 'list':
+            return renderList({ className, parent, siblingCount, variant, item, itemPosition });
+        default:
+            console.error('[SkeletonLayout] no support for BlockLayout item', item);
+            return null;
+    }
+}
+function getContainerClasses({ className, variant, item }) {
+    const { type, alignY } = item;
+    // row style
+    if (type === 'row' && variant !== 'mobile') {
+        return (0, classnames_1.default)(className, 'grid gap-l3 px-l4', {
+            'items-start': alignY === 'start',
+            'items-center': alignY === 'center',
+            'items-end': alignY === 'end',
+            'grid-cols-[1fr,1fr]': item.ratio.desktop === '1/1',
+            'grid-cols-[1fr,2fr]': item.ratio.desktop === '1/2',
+            'grid-cols-[1fr,3fr]': item.ratio.desktop === '1/3',
+            'grid-cols-[2fr,1fr]': item.ratio.desktop === '2/1',
+            'grid-cols-[2fr,3fr]': item.ratio.desktop === '2/3',
+            'grid-cols-[3fr,1fr]': item.ratio.desktop === '3/1',
+            'grid-cols-[3fr,2fr]': item.ratio.desktop === '3/2',
+        });
+    }
+    // or stack
+    else if (type === 'stack') {
+        return (0, classnames_1.default)(className, 'stacked-stretch');
+    }
+    // or column
+    else {
+        return (0, classnames_1.default)(className, 'flex flex-col gap-l4');
+    }
+}
+function renderMessage(args) {
+    // resolve props
+    const { variant, item: { textAlign } } = args;
+    const messageClasses = variant === 'mobile'
+        ? (0, classnames_1.default)({
+            'items-start': textAlign.mobile === 'left',
+            'items-center': textAlign.mobile === 'center',
+            'items-end': textAlign.mobile === 'right'
+        })
+        : (0, classnames_1.default)({
+            'items-start': textAlign.desktop === 'left',
+            'items-center': textAlign.desktop === 'center',
+            'items-end': textAlign.desktop === 'right'
+        });
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(messageClasses, getPanelClasses(Object.assign(Object.assign({}, args), { className: 'flex flex-col' }))), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full mb-l2', Skeleton.Headline.md) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full mb-px', Skeleton.Caption.md) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full mb-px', Skeleton.Caption.md) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-20', Skeleton.Caption.md) })] }) }));
+}
+function renderVisual(args) {
+    // resolve props
+    const { variant, item: { aspectRatio }, parent } = args;
+    const aspect = variant === 'mobile' ? aspectRatio.mobile : aspectRatio.desktop;
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getPanelClasses(Object.assign(Object.assign({}, args), { className: '' }))), children: (0, jsx_runtime_1.jsx)(Skeleton.Media, { className: "w-full", aspect: aspect }) }) }));
+}
+function renderList(args) {
+    // resolve props
+    const { item: { itemType } } = args;
+    const rows = 2;
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getPanelClasses(Object.assign(Object.assign({}, args), { className: 'flex flex-col gap-l2' }))), children: funnel_core_1.ArrayUtils.series(rows, 1).map(row => (0, jsx_runtime_1.jsxs)("div", { className: "w-full flex flex-row", children: [itemType === 'message+visual' &&
+                        (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Skeleton.Media, { className: "w-full", aspect: "square" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-24 mb-l1', Skeleton.Headline.sm) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full mb-px', Skeleton.Caption.sm) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-40', Skeleton.Caption.sm) })] })] }, `list.${row}`)) }) }));
+}
+function getPanelWrapClasses({ className, variant, parent, item: { mobileOrder, alignY, fullBleed }, itemPosition }) {
+    return variant === 'mobile'
+        ? (0, classnames_1.default)(className, 'w-full flex flex-col', {
+            'justify-start': alignY === 'start',
+            'justify-center': alignY === 'center',
+            'justify-end': alignY === 'end',
+            'order-first': mobileOrder === 'first',
+            'order-last': mobileOrder === 'last',
+            'px-l4': !fullBleed.mobile
+        })
+        : (0, classnames_1.default)(className, 'grid grid-cols-12', {
+            'items-start': alignY === 'start',
+            'items-center': alignY === 'center',
+            'items-end': alignY === 'end',
+            'px-l4': parent !== 'row' && !fullBleed.desktop,
+            '-ml-l4': itemPosition.left && fullBleed.desktop,
+            '-mr-l4': itemPosition.right && fullBleed.desktop
+        });
+}
+function getPanelClasses({ className, variant, parent, item: { type, alignX, alignY, size } }) {
+    // force full width for mobile
+    if (variant === 'mobile') {
+        return (0, classnames_1.default)(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;
+    }
+}
+class ItemPosition {
+    constructor(args) {
+        // initialize instance variables
+        this.parent = args.parent;
+        this.parentOffset = args.parentOffset;
+        this.parentSize = args.parentSize;
+    }
+    get left() {
+        return this.parent === 'row' && this.parentOffset === 0;
+    }
+    get right() {
+        return this.parent === 'row' && this.parentOffset === 1;
+    }
+}

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

@@ -0,0 +1,5 @@
+export * from './BlockIcon';
+export * from './Icon';
+export * from './Illustration';
+export * from './Logo';
+export * from './SkeletonLayout';

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

@@ -0,0 +1,21 @@
+"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("./BlockIcon"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./Illustration"), exports);
+__exportStar(require("./Logo"), exports);
+__exportStar(require("./SkeletonLayout"), exports);

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

@@ -0,0 +1,5 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export type Asset = Schema.Asset.Linked;
+export declare namespace Asset {
+    type Id = Schema.Asset.Id;
+}

package/dist/core/domain/Asset.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,55 @@
+import { Field, FieldModel, Schema } from '@nascentdigital/funnel-core';
+import { StringKeyOf } from 'type-fest';
+import { BlockConfiguration } from './BlockConfiguration';
+import { ItemBase } from './ItemBase';
+import ParentContext = ItemBase.ParentContext;
+export declare class Block<TBlock extends Schema.Block = Schema.Block> extends ItemBase<Block<TBlock>> {
+    readonly schema: TBlock;
+    readonly config: ReadonlyArray<FieldModel.Config>;
+    readonly fields: ReadonlyArray<FieldModel>;
+    readonly nameField: Field<Schema.TextField>;
+    private _modifiedOn?;
+    private _savingOn?;
+    constructor(args: Block.ConstructorArgs<TBlock>);
+    get identifier(): string;
+    get name(): string;
+    get state(): "undefined" | "invalid" | "valid";
+    get value(): Schema.Block.Data;
+    get modified(): boolean;
+    get changes(): Block.Changes;
+    get valid(): boolean;
+    get errors(): Block.Errors;
+    bind(parentContext: ParentContext): void;
+    getConfiguration(): BlockConfiguration;
+    getConfig(fieldId: Block.ConfigId<TBlock>): FieldModel;
+    setConfig(config: ReadonlyArray<FieldModel.Config>): void;
+    getField(fieldId: Block.FieldId<TBlock>): FieldModel;
+    getTextField(fieldId: Block.FieldId<TBlock>): Field<Schema.TextField> | undefined;
+    repair(): void;
+    onSaveStart(): void;
+    onSaveComplete(): void;
+    clone(forceExists?: boolean): Block;
+    protected onActivate(): void;
+    protected syncBlockConfig(): void;
+    protected onFieldChange(event: Field.Event): void;
+}
+export declare namespace Block {
+    type ConstructorArgs<TBlock extends Schema.Block> = ItemBase.ConstructorArgs & {
+        name?: string;
+        schema: TBlock;
+        config: ReadonlyArray<FieldModel.Config>;
+        fields: ReadonlyArray<FieldModel>;
+    };
+    type ConfigId<TBlock extends Schema.Block> = StringKeyOf<TBlock['config']>;
+    type FieldId<TBlock extends Schema.Block> = StringKeyOf<TBlock['fields']>;
+    type Changes = {
+        block: Block;
+        config: FieldModel[];
+        fields: FieldModel[];
+    };
+    type Errors = {
+        block: Block;
+        config: FieldModel[];
+        fields: FieldModel[];
+    };
+}

package/dist/core/domain/Block.js

@@ -0,0 +1,350 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Block = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const rxjs_1 = require("rxjs");
+const BlockConfiguration_1 = require("./BlockConfiguration");
+const ItemBase_1 = require("./ItemBase");
+// class
+class Block extends ItemBase_1.ItemBase {
+    constructor(args) {
+        // construct base
+        super(args);
+        // initialize instance variables
+        this.schema = args.schema;
+        this.config = args.config;
+        this.fields = args.fields;
+        this.nameField = new funnel_core_1.Field({
+            id: '_nd-blockName',
+            name: 'Name',
+            schema: funnel_core_1.Schema.Field.text({
+                name: 'Name',
+                description: `This is the name used to identify this block.`,
+                hint: 'Please provide a name',
+                semantics: 'short',
+                required: true
+            }),
+            eventBus: args.eventBus,
+            initialValue: args.name
+                ? funnel_core_1.Schema.TextField.Value.toData(args.name)
+                : undefined,
+            publishedValue: undefined,
+            required: true
+        });
+        // listen to field changes
+        this.eventBus.events$
+            .pipe((0, rxjs_1.filter)(funnel_core_1.Field.Event.filter), (0, rxjs_1.filter)(event => (event.type === 'changed' || event.type === 'reset')
+            && this.fields.includes(event.field)))
+            .subscribe(event => this.onFieldChange(event));
+    }
+    get identifier() {
+        return this.key;
+    }
+    get name() {
+        return funnel_core_1.Schema.TextField.Value.fromData(this.nameField.value) || this.schema.name;
+    }
+    get state() {
+        return this.activated
+            ? this.valid
+                ? 'valid'
+                : 'invalid'
+            : 'undefined';
+    }
+    get value() {
+        const { schema, config, fields } = this;
+        return {
+            type: 'block',
+            id: schema.id,
+            version: schema.version,
+            config: config.length === 0
+                ? undefined
+                : config.reduce((values, field) => {
+                    // bind config (force casting value in case it's not set)
+                    values[field.id] = field.value;
+                    // keep reducing
+                    return values;
+                }, {}),
+            fields: fields.reduce((values, field) => {
+                // bind content
+                values[field.id] = field.value;
+                // keep reducing
+                return values;
+            }, {})
+        };
+    }
+    get modified() {
+        // ignore if not activated
+        const { activated, isNew, nameField, config, fields } = this;
+        if (isNew && !activated) {
+            return false;
+        }
+        return (isNew && activated)
+            || nameField.modified
+            || config.some(field => field.modified)
+            || fields.some(field => field.modified);
+    }
+    get changes() {
+        return {
+            block: this,
+            config: this.config.filter(field => field.changed),
+            fields: this.fields.filter(field => field.changed)
+        };
+    }
+    get valid() {
+        return this.config.every(field => field.valid)
+            && this.fields.every(field => field.valid);
+    }
+    get errors() {
+        return {
+            block: this,
+            config: this.config.filter(field => !field.valid),
+            fields: this.fields.filter(field => !field.valid)
+        };
+    }
+    bind(parentContext) {
+        // invoke base
+        super.bind(parentContext);
+        // sync config if we are already activated
+        if (this.activated) {
+            this.syncBlockConfig();
+        }
+    }
+    getConfiguration() {
+        return new BlockConfiguration_1.BlockConfiguration({ block: this, assetStore: this.root });
+    }
+    getConfig(fieldId) {
+        // get field (or throw)
+        const field = this.config.find(field => field.id === fieldId);
+        if (!field) {
+            throw new funnel_core_1.IllegalStateError(`Unable to resolve config ${this.name}/${fieldId}`);
+        }
+        // return field
+        return field;
+    }
+    setConfig(config) {
+        console.warn(`[Block/setConfig] updating "${this.name}" config with:`, config);
+        // map fields
+        config.forEach(updatedField => {
+            // find source field (or ignore)
+            const { id, schema } = updatedField;
+            const field = this.config.find(field => field.id === id && field.schema === schema);
+            if (!field) {
+                console.warn(`[Block/setConfig] unable to find field [${schema.type}/${id}]`);
+            }
+            // sync basic field
+            else {
+                field.value = updatedField.value;
+            }
+        });
+    }
+    getField(fieldId) {
+        // get field (or throw)
+        const field = this.fields.find(field => field.id === fieldId);
+        if (!field) {
+            throw new funnel_core_1.IllegalStateError(`Unable to resolve field ${this.name}/${fieldId}`);
+        }
+        // return field
+        return field;
+    }
+    getTextField(fieldId) {
+        return this.fields
+            .filter(field => field.schema instanceof funnel_core_1.Schema.TextField)
+            .find(field => field.id === fieldId);
+    }
+    repair() {
+        // resolve root/fields
+        const { root, fields } = this;
+        // helpers
+        const repairLink = (field, parentList) => {
+            // skip if it's not internal
+            const data = field.value;
+            const value = data
+                ? funnel_core_1.Schema.LinkField.Value.fromData(data)
+                : undefined;
+            if ((value === null || value === void 0 ? void 0 : value.type) !== 'internal') {
+                return;
+            }
+            // prune value if it's not in the refs
+            const page = value.page.value;
+            if (!root.getPageRef(page.id)) {
+                // drop from list
+                if (parentList) {
+                    console.debug(`[Block/repairLink] "${this.key}" removing broking link from parent "${parentList.id}"`, page);
+                    parentList.removeField(field);
+                }
+                // or clear field
+                else {
+                    console.debug(`[Block/repairLink] "${this.key}" clearing broking link for "${field.id}"`, page);
+                    field.reset(null);
+                }
+            }
+        };
+        const repairCollectionLink = (field, parentList) => {
+            // skip if it's inline or there's a collection
+            const data = field.value;
+            const value = data
+                ? funnel_core_1.Schema.CollectionField.Value.fromData(data)
+                : undefined;
+            if (!funnel_core_1.Schema.CollectionField.Value.ForRef.filter(value) || root.getCollection(value.id)) {
+                return;
+            }
+            // remove from list
+            if (parentList) {
+                console.debug(`[Block/repairCollectionLink] "${this.key}" removing broking link from parent "${parentList.id}"`, value);
+                parentList.removeField(field);
+            }
+            // or clear field
+            else {
+                console.debug(`[Block/repairCollectionLink] "${this.key}" clearing broking link for "${field.id}"`, value);
+                field.reset(null);
+            }
+        };
+        const repairPageLink = (field, parentList) => {
+            // skip if there's no page or it's available
+            const data = field.value;
+            const value = data
+                ? funnel_core_1.Schema.PageField.Value.fromData(data)
+                : undefined;
+            if (!value || root.getPageRef(value.id)) {
+                return;
+            }
+            // remove from list
+            if (parentList) {
+                console.debug(`[Block/repairPageLink] "${this.key}" removing broking link from parent "${parentList.id}"`, value);
+                parentList.removeField(field);
+            }
+            // or clear field
+            else {
+                console.debug(`[Block/repairPageLink] "${this.key}" clearing broking link for "${field.id}"`, value);
+                field.reset(null);
+            }
+        };
+        const repairDynamicPageLink = (field, parentList) => {
+            // TODO: need to check for static pages
+        };
+        const repairList = (list) => {
+            list.items.forEach(({ id, field }) => repairField(field, list));
+        };
+        const repairObject = (object, parentList) => {
+            object.fields.forEach(field => repairField(field));
+        };
+        const repairField = (field, parentList) => {
+            const { schema } = field;
+            switch (schema.type) {
+                case 'link':
+                    repairLink(field, parentList);
+                    break;
+                case 'collection':
+                    repairCollectionLink(field, parentList);
+                    break;
+                case 'page':
+                    repairPageLink(field, parentList);
+                    break;
+                case 'dynamic.pages':
+                    repairDynamicPageLink(field, parentList);
+                    break;
+                case 'list':
+                    repairList(field);
+                    break;
+                case 'object':
+                    repairObject(field, parentList);
+                    break;
+            }
+        };
+        // ensure each field that is a collection/page ref is bound (or unlink it)
+        fields.forEach(field => repairField(field));
+    }
+    onSaveStart() {
+        this._savingOn = Date.now();
+    }
+    onSaveComplete() {
+        // reset to initial value if not modified or if save is newer
+        const { _modifiedOn, _savingOn } = this;
+        if (_savingOn && (!_modifiedOn || _savingOn >= _modifiedOn)) {
+            this._isNew = false;
+            this._activated = true;
+        }
+        // clear saving flag
+        delete this._savingOn;
+    }
+    clone(forceExists = false) {
+        // create block
+        const block = new Block({
+            key: this.key,
+            schema: this.schema,
+            eventBus: this.eventBus,
+            config: this.config.map(config => config.clone()),
+            fields: this.fields.map(field => field.clone()),
+            required: this.required,
+            exists: forceExists || this.activated
+        });
+        // activate it
+        if (forceExists) {
+            block.onActivate();
+        }
+        // return block
+        return block;
+    }
+    onActivate() {
+        // call base
+        super.onActivate();
+        this._modifiedOn = Date.now();
+        // pre-populate all fields
+        this.fields.forEach(field => {
+            // skip if there's an existing value OR it's not required
+            const { schema, required, initialValue } = field;
+            if (initialValue || !required) {
+                return;
+            }
+            // activate based on schema
+            switch (schema.type) {
+                case 'form':
+                    activateFormField(field, schema);
+                    break;
+            }
+        });
+    }
+    syncBlockConfig() {
+        // guard: block fields must be ready AND block must exist and be activated
+        if (!this.activated) {
+            throw new funnel_core_1.InvalidOperationError('Cannot sync config for an unactivated block');
+        }
+        // get configuration using existing fields + config data
+        const config = this.getConfiguration();
+        // save the config
+        config.save();
+    }
+    onFieldChange(event) {
+        // sync config changes
+        this.syncBlockConfig();
+    }
+}
+exports.Block = Block;
+// helpers
+function activateFormField(field, schema) {
+    var _a;
+    // pre-populate all fields
+    const form = funnel_core_1.Forms.current().configs[schema.formId];
+    const fields = {};
+    const fieldEntries = [
+        ...Object.entries(form.schema.editableFields),
+        ...Object.entries((_a = form.schema.consentFields) !== null && _a !== void 0 ? _a : {})
+    ];
+    let ordinal = funnel_core_1.Ordinal.new();
+    fieldEntries.forEach(([fieldId, fieldSchema]) => {
+        // create field
+        fields[fieldId] = {
+            name: fieldSchema.name,
+            hint: fieldSchema.hint,
+            description: fieldSchema.description,
+            order: ordinal.order
+        };
+        // increment order
+        ordinal = ordinal.next;
+    });
+    // set form initial value
+    field.value = funnel_core_1.Schema.FormField.Value.toData({
+        formId: schema.formId,
+        fields
+    });
+}