@nascentdigital/funnel-editor-contentful 4.6.7 → 5.0.2

package/dist/Editor.d.ts

@@ -1 +1,6 @@
-export declare function Editor(): import("react/jsx-runtime").JSX.Element;
+export declare function Editor({ fonts }: Editor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Editor {
+    type Props = {
+        fonts: string[];
+    };
+}

package/dist/Editor.js

@@ -3,8 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = Editor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_apps_toolkit_1 = require("@contentful/react-apps-toolkit");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
 const EditorApp_1 = require("./EditorApp");
 // wrapper around editor app to provide Contentful SDK
-function Editor() {
+function Editor({ fonts }) {
+    // bind font to root on mount
+    (0, react_1.useEffect)(() => {
+        // skip if there are no fonts or HTML root
+        const html = funnel_core_1.Browser.getHtml();
+        if (fonts.length === 0 || !html) {
+            return;
+        }
+        // apply fonts (create a copy to unbind
+        const fontClasses = fonts.slice();
+        html.classList.add(...fontClasses);
+        // remove fonts on update
+        return () => html.classList.remove(...fontClasses);
+    }, [fonts]);
+    // render
     return ((0, jsx_runtime_1.jsx)(react_apps_toolkit_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(EditorApp_1.EditorApp, {}) }));
 }

package/dist/EditorApp.js

@@ -6,25 +6,27 @@ const app_sdk_1 = require("@contentful/app-sdk");
 const react_apps_toolkit_1 = require("@contentful/react-apps-toolkit");
 const components_1 = require("@nascentdigital/funnel-editor/components");
 const core_1 = require("./core");
+const EditorPageRouter_1 = require("./EditorPageRouter");
 const EntryEditor_1 = require("./EntryEditor");
 const EntrySidebar_1 = require("./EntrySidebar");
 // editor
 function EditorApp() {
-    // hooks
+    // bind hooks
     const sdk = (0, react_apps_toolkit_1.useSDK)();
-    // entry editor
-    let content;
-    if (sdk.location.is(app_sdk_1.locations.LOCATION_ENTRY_EDITOR)) {
-        content = (0, jsx_runtime_1.jsx)(EntryEditor_1.EntryEditor, {});
+    // page
+    if (sdk.location.is(app_sdk_1.locations.LOCATION_PAGE)) {
+        return ((0, jsx_runtime_1.jsx)(components_1.AppStateContainer, { children: (0, jsx_runtime_1.jsx)(core_1.ContentfulClientContainer, { sdk: sdk, children: (0, jsx_runtime_1.jsx)(EditorPageRouter_1.EditorPageRouter, {}) }) }));
+    }
+    // entry
+    else if (sdk.location.is(app_sdk_1.locations.LOCATION_ENTRY_EDITOR)) {
+        return ((0, jsx_runtime_1.jsx)(components_1.AppStateContainer, { children: (0, jsx_runtime_1.jsx)(core_1.AppBridgeContainer, { children: (0, jsx_runtime_1.jsx)(core_1.ContentfulClientContainer, { sdk: sdk, children: (0, jsx_runtime_1.jsx)(EntryEditor_1.EntryEditor, {}) }) }) }));
     }
     // entry sidebar
     else if (sdk.location.is(app_sdk_1.locations.LOCATION_ENTRY_SIDEBAR)) {
-        content = (0, jsx_runtime_1.jsx)(EntrySidebar_1.EntrySidebar, {});
+        return ((0, jsx_runtime_1.jsx)(components_1.AppStateContainer, { children: (0, jsx_runtime_1.jsx)(core_1.AppBridgeContainer, { children: (0, jsx_runtime_1.jsx)(EntrySidebar_1.EntrySidebar, {}) }) }));
     }
     // fallback
     else {
-        content = (0, jsx_runtime_1.jsx)("div", { children: "Unsupported location" });
+        return ((0, jsx_runtime_1.jsx)("div", { children: "Unsupported location" }));
     }
-    // render
-    return ((0, jsx_runtime_1.jsx)(core_1.EditorApiContainer, { children: (0, jsx_runtime_1.jsx)(components_1.DialogContainer, { children: content }) }));
 }

package/dist/EditorPageRouter.d.ts

@@ -0,0 +1 @@
+export declare function EditorPageRouter(): import("react/jsx-runtime").JSX.Element;

package/dist/EditorPageRouter.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorPageRouter = EditorPageRouter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_apps_toolkit_1 = require("@contentful/react-apps-toolkit");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const components_1 = require("@nascentdigital/funnel-editor/components");
+const react_1 = require("react");
+const react_router_1 = require("react-router");
+const asset_1 = require("./asset");
+const collection_1 = require("./collection");
+const core_1 = require("./core");
+const explore_1 = require("./explore");
+const page_1 = require("./page");
+// router
+function EditorPageRouter() {
+    // bind props + hooks
+    const sdk = (0, react_apps_toolkit_1.useSDK)();
+    const contentfulClient = (0, core_1.useContentfulClient)();
+    const appState = (0, components_1.useAppState)();
+    const { regionalization } = funnel_core_1.AppConfig.brandConfig();
+    const region = funnel_core_1.RegionsConfig.getDefaultRegion(regionalization);
+    // create repositories
+    const { assetRepository, collectionRepository, pageRepository } = (0, react_1.useMemo)(() => ({
+        assetRepository: new asset_1.AssetRepository(sdk),
+        collectionRepository: new collection_1.CollectionRepository({ sdk, contentfulClient }),
+        pageRepository: new page_1.PageRepository({ sdk, contentfulClient })
+    }), [sdk, contentfulClient]);
+    // create contexts
+    const siteContext = (0, react_1.useMemo)(() => {
+        const site = new components_1.Site({ appState, repository: pageRepository, region });
+        return { site };
+    }, [appState, pageRepository, region]);
+    const collectionsContext = (0, react_1.useMemo)(() => {
+        const collections = new components_1.Collections({ appState, repository: collectionRepository });
+        return { collections };
+    }, [appState, collectionRepository]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(react_router_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(components_1.AssetRepositoryContext.Provider, { value: assetRepository, children: (0, jsx_runtime_1.jsx)(components_1.CollectionRepositoryContext.Provider, { value: collectionRepository, children: (0, jsx_runtime_1.jsx)(components_1.PageRepositoryContext.Provider, { value: pageRepository, children: (0, jsx_runtime_1.jsx)(components_1.SiteContext.Provider, { value: siteContext, children: (0, jsx_runtime_1.jsx)(components_1.CollectionsContext.Provider, { value: collectionsContext, children: (0, jsx_runtime_1.jsx)(components_1.DialogContainer, { children: (0, jsx_runtime_1.jsx)(components_1.CenterSheetContainer, { children: (0, jsx_runtime_1.jsx)(components_1.SplashContainer, { message: "Initializing...", children: (0, jsx_runtime_1.jsx)(react_router_1.Routes, { children: (0, jsx_runtime_1.jsxs)(react_router_1.Route, { path: "/contentful", children: [(0, jsx_runtime_1.jsx)(react_router_1.Route, { index: true, element: (0, jsx_runtime_1.jsx)(explore_1.Dashboard, {}) }), (0, jsx_runtime_1.jsxs)(react_router_1.Route, { path: "pages", children: [(0, jsx_runtime_1.jsx)(react_router_1.Route, { index: true, element: (0, jsx_runtime_1.jsx)(explore_1.SiteExplorer, {}) }), (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: ":page", element: (0, jsx_runtime_1.jsx)(explore_1.PageExplorer, {}) })] })] }) }) }) }) }) }) }) }) }) }) }));
+}

package/dist/EntryEditor.js

@@ -2,8 +2,50 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntryEditor = EntryEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_apps_toolkit_1 = require("@contentful/react-apps-toolkit");
+const contentful_1 = require("@nascentdigital/funnel-cms/contentful");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const components_1 = require("@nascentdigital/funnel-editor/components");
+const react_1 = require("react");
+const asset_1 = require("./asset");
+const collection_1 = require("./collection");
+const core_1 = require("./core");
 const page_1 = require("./page");
 // entry editor
 function EntryEditor() {
-    return ((0, jsx_runtime_1.jsx)(page_1.PageEditor, {}));
+    // bind props + hooks
+    const sdk = (0, react_apps_toolkit_1.useSDK)();
+    const contentfulClient = (0, core_1.useContentfulClient)();
+    const appState = (0, components_1.useAppState)();
+    const { regionalization } = funnel_core_1.AppConfig.brandConfig();
+    let region = funnel_core_1.RegionsConfig.getDefaultRegion(regionalization);
+    // create repositories
+    const { assetRepository, collectionRepository, pageRepository } = (0, react_1.useMemo)(() => ({
+        assetRepository: new asset_1.AssetRepository(sdk),
+        collectionRepository: new collection_1.CollectionRepository({ sdk, contentfulClient }),
+        pageRepository: new page_1.PageRepository({ sdk, contentfulClient })
+    }), [sdk, contentfulClient]);
+    // page editor
+    let content;
+    const { entry } = sdk;
+    const { contentType: { sys: { id } } } = entry.getSys();
+    if (id === contentful_1.ContentfulPageData.contentType) {
+        region = entry.fields.region.getValue();
+        content = ((0, jsx_runtime_1.jsx)(page_1.ContentfulPageControllerContainer, { children: (0, jsx_runtime_1.jsx)(page_1.PageEditor, {}) }));
+    }
+    // collection editor
+    else if (id === contentful_1.ContentfulCollectionData.contentType) {
+        content = ((0, jsx_runtime_1.jsx)(collection_1.ContentfulCollectionControllerContainer, { children: (0, jsx_runtime_1.jsx)(collection_1.CollectionEditor, {}) }));
+    }
+    // create contexts
+    const siteContext = (0, react_1.useMemo)(() => {
+        const site = new components_1.Site({ appState, repository: pageRepository, region });
+        return { site };
+    }, [appState, pageRepository, region]);
+    const collectionsContext = (0, react_1.useMemo)(() => {
+        const collections = new components_1.Collections({ appState, repository: collectionRepository });
+        return { collections };
+    }, [appState, collectionRepository]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(components_1.AssetRepositoryContext.Provider, { value: assetRepository, children: (0, jsx_runtime_1.jsx)(components_1.CollectionRepositoryContext.Provider, { value: collectionRepository, children: (0, jsx_runtime_1.jsx)(components_1.PageRepositoryContext.Provider, { value: pageRepository, children: (0, jsx_runtime_1.jsx)(components_1.SiteContext.Provider, { value: siteContext, children: (0, jsx_runtime_1.jsx)(components_1.CollectionsContext.Provider, { value: collectionsContext, children: (0, jsx_runtime_1.jsx)(components_1.DialogContainer, { children: (0, jsx_runtime_1.jsx)(components_1.CenterSheetContainer, { children: (0, jsx_runtime_1.jsx)(components_1.SplashContainer, { message: "Initializing...", children: content }) }) }) }) }) }) }) }));
 }

package/dist/EntrySidebar.js

@@ -2,6 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntrySidebar = EntrySidebar;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const core_1 = require("./core");
+// component
 function EntrySidebar() {
-    return ((0, jsx_runtime_1.jsx)("div", { children: "Entry sidebar" }));
+    // setup hooks
+    const bridge = (0, core_1.useAppBridge)();
+    const [itemId, setItemId] = (0, react_1.useState)();
+    // listen to bridge events
+    (0, react_1.useEffect)(() => {
+        // subscribe to block nav messages
+        const subscription = bridge.messages$
+            .pipe((0, rxjs_1.filter)(core_1.AppBlockNavMessage.guard))
+            .subscribe(message => setItemId(message.itemId));
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    });
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h3", { children: ["Entry sidebar ", itemId] }) }));
 }

package/dist/asset/index.d.ts

@@ -0,0 +1 @@
+export * from './repository';

package/dist/{page/hooks → asset}/index.js

@@ -14,4 +14,4 @@ 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("./PageController"), exports);
+__exportStar(require("./repository"), exports);

package/dist/asset/repository/AssetRepository.d.ts

@@ -0,0 +1,10 @@
+import { EditorAppSDK } from '@contentful/app-sdk';
+import { IAssetRepository } from '@nascentdigital/funnel-editor/components';
+export declare class AssetRepository implements IAssetRepository {
+    readonly sdk: EditorAppSDK;
+    constructor(sdk: EditorAppSDK);
+    search(args: IAssetRepository.Search.Args): Promise<IAssetRepository.Search.Result>;
+    get(args: IAssetRepository.Get.Args): Promise<IAssetRepository.Get.Result>;
+    update(args: IAssetRepository.Update.Args): Promise<IAssetRepository.Update.Result>;
+    uploadFile(args: IAssetRepository.UploadFile.Args): Promise<IAssetRepository.UploadFile.Result>;
+}

package/dist/asset/repository/AssetRepository.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetRepository = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const core_1 = require("../../core");
+// class
+class AssetRepository {
+    constructor(sdk) {
+        this.sdk = sdk;
+    }
+    async search(args) {
+        // TODO: implement fetching assets
+        return {
+            items: [],
+            page: 1,
+            pageCount: 0,
+            totalItemCount: 0
+        };
+    }
+    async get(args) {
+        throw new funnel_core_1.NotImplementedError();
+    }
+    async update(args) {
+        throw new funnel_core_1.NotImplementedError();
+    }
+    async uploadFile(args) {
+        // upload asset
+        const asset = await core_1.ContentfulAsset.upload(args, this.sdk);
+        // return result
+        return core_1.ContentfulAsset.serialize(asset, this.sdk.locales.default);
+    }
+}
+exports.AssetRepository = AssetRepository;

package/dist/asset/repository/index.d.ts

@@ -0,0 +1 @@
+export * from './AssetRepository';

package/dist/{core/api → asset/repository}/index.js

@@ -14,6 +14,4 @@ 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("./EditorApiClient"), exports);
-__exportStar(require("./EditorApiContainer"), exports);
-__exportStar(require("./useEditorApi"), exports);
+__exportStar(require("./AssetRepository"), exports);

package/dist/collection/controller/ContentfulCollectionController.d.ts

@@ -0,0 +1,41 @@
+import { EntrySys } from '@contentful/app-sdk';
+import { CollectionGroup, CollectionTarget, ICollection, ICollectionController } from '@nascentdigital/funnel-editor/components';
+import { type Observable } from 'rxjs';
+import { Collection } from '../domain';
+import { CollectionRepository } from '../repository';
+export declare class ContentfulCollectionController implements ICollectionController {
+    readonly collectionRepository: CollectionRepository;
+    private readonly _eventBus;
+    private _state;
+    private _collectionGroup?;
+    private _collection?;
+    private _collectionSys?;
+    private _queuedSave?;
+    private _queuedSync?;
+    private _collectionSubscription?;
+    constructor(args: ContentfulCollectionController.ConstructorArgs);
+    get events$(): Observable<ICollectionController.Event | ICollection.Event>;
+    get state(): ICollectionController.State;
+    private set state(value);
+    get ready(): boolean;
+    get languages(): ("id" | "aa" | "ab" | "ae" | "af" | "ak" | "am" | "an" | "ar" | "as" | "av" | "ay" | "az" | "ba" | "be" | "bg" | "bh" | "bi" | "bm" | "bn" | "bo" | "br" | "bs" | "ca" | "ce" | "ch" | "co" | "cr" | "cs" | "cu" | "cv" | "cy" | "da" | "de" | "dv" | "dz" | "ee" | "el" | "en" | "eo" | "es" | "et" | "eu" | "fa" | "ff" | "fi" | "fj" | "fo" | "fr" | "fy" | "ga" | "gd" | "gl" | "gn" | "gu" | "gv" | "ha" | "he" | "hi" | "ho" | "hr" | "ht" | "hu" | "hy" | "hz" | "ia" | "ie" | "ig" | "ii" | "ik" | "io" | "is" | "it" | "iu" | "ja" | "jv" | "ka" | "kg" | "ki" | "kj" | "kk" | "kl" | "km" | "kn" | "ko" | "kr" | "ks" | "ku" | "kv" | "kw" | "ky" | "la" | "lb" | "lg" | "li" | "ln" | "lo" | "lt" | "lu" | "lv" | "mg" | "mh" | "mi" | "mk" | "ml" | "mn" | "mr" | "ms" | "mt" | "my" | "na" | "nb" | "nd" | "ne" | "ng" | "nl" | "nn" | "no" | "nr" | "nv" | "ny" | "oc" | "oj" | "om" | "or" | "os" | "pa" | "pi" | "pl" | "ps" | "pt" | "qu" | "rm" | "rn" | "ro" | "ru" | "rw" | "sa" | "sc" | "sd" | "se" | "sg" | "si" | "sk" | "sl" | "sm" | "sn" | "so" | "sq" | "sr" | "ss" | "st" | "su" | "sv" | "sw" | "ta" | "te" | "tg" | "th" | "ti" | "tk" | "tl" | "tn" | "to" | "tr" | "ts" | "tt" | "tw" | "ty" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "wo" | "xh" | "yi" | "yo" | "za" | "zh" | "zu")[];
+    get collectionSys(): EntrySys | undefined;
+    private set collectionSys(value);
+    get collectionGroup(): CollectionGroup | undefined;
+    private set collectionGroup(value);
+    get collection(): Collection | undefined;
+    set collection(collection: Collection | undefined);
+    sync(updatedSys: EntrySys): Promise<void>;
+    load(): Promise<void>;
+    createLanguage(target: CollectionTarget): Promise<void>;
+    unpublish(): Promise<void>;
+    save(collection: Collection): Promise<void>;
+    reload(): Promise<void>;
+    private processQueues;
+    private raiseEvent;
+}
+export declare namespace ContentfulCollectionController {
+    type ConstructorArgs = {
+        collectionRepository: CollectionRepository;
+    };
+}

package/dist/collection/controller/ContentfulCollectionController.js

@@ -0,0 +1,278 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentfulCollectionController = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const components_1 = require("@nascentdigital/funnel-editor/components");
+const rxjs_1 = require("rxjs");
+// class
+class ContentfulCollectionController {
+    constructor(args) {
+        // initialize instance variables
+        this.collectionRepository = args.collectionRepository;
+        this._eventBus = new funnel_core_1.EventBus();
+        this._state = 'uninitialized';
+    }
+    get events$() {
+        return this._eventBus.events$
+            .pipe((0, rxjs_1.filter)(e => components_1.ICollectionController.Event.filter(e) || components_1.ICollection.Event.filter(e)));
+    }
+    get state() {
+        return this._state;
+    }
+    set state(value) {
+        // skip if unchanged
+        if (this._state === value) {
+            return;
+        }
+        // or update
+        this._state = value;
+        // raise event
+        this.raiseEvent('state.changed');
+        // process queues if ready (might be noop)
+        if (value === 'ready') {
+            this.processQueues().catch(console.error);
+        }
+    }
+    get ready() {
+        const { _state } = this;
+        return _state !== 'uninitialized' && _state !== 'initializing';
+    }
+    get languages() {
+        const brand = funnel_core_1.AppConfig.brandConfig();
+        return funnel_core_1.RegionsConfig.getLanguages(brand.regionalization);
+    }
+    get collectionSys() {
+        return this._collectionSys;
+    }
+    set collectionSys(sys) {
+        this._collectionSys = sys;
+    }
+    get collectionGroup() {
+        return this._collectionGroup;
+    }
+    set collectionGroup(collectionGroup) {
+        // skip if group is the same
+        if (this._collectionGroup === collectionGroup) {
+            return;
+        }
+        // update group
+        this._collectionGroup = collectionGroup;
+        // raise event
+        this.raiseEvent('collectionGroup.changed');
+    }
+    get collection() {
+        return this._collection;
+    }
+    set collection(collection) {
+        // skip if collection is the same
+        if (this._collection === collection) {
+            console.debug('[ContentfulCollectionController] ignoring collection change for', collection);
+            return;
+        }
+        // unbind previous subscription (if any)
+        if (this._collectionSubscription) {
+            this._collectionSubscription.unsubscribe();
+            delete this._collectionSubscription;
+        }
+        console.debug('[ContentfulCollectionController] updating to new collection', collection);
+        // update collection
+        this._collection = collection;
+        // subscribe to collection changes
+        if (collection) {
+            this._collectionSubscription = collection.events$
+                .pipe((0, rxjs_1.filter)(e => {
+                // handle collection events
+                if (components_1.ICollection.Event.filter(e)) {
+                    return e.type === 'modified';
+                }
+                // or item/object/list events
+                else if (components_1.Item.Event.filter(e)
+                    || components_1.Item.Event.filter(e)
+                    || funnel_core_1.ObjectField.Event.filter(e)
+                    || funnel_core_1.FieldList.Event.filter(e)) {
+                    return e.type === 'changed';
+                }
+                // or field
+                else {
+                    return funnel_core_1.Field.Event.filter(e) && (e.type === 'changed' || e.type === 'reset');
+                }
+            }), (0, rxjs_1.debounce)(e => {
+                if ((components_1.ICollection.Event.filter(e) && e.type === 'modified')
+                    || components_1.Item.Event.filter(e)
+                    || funnel_core_1.FieldList.Event.filter(e)
+                    || (funnel_core_1.Field.Event.filter(e) && e.field.isComposite)) {
+                    return (0, rxjs_1.interval)(0);
+                }
+                else {
+                    return (0, rxjs_1.interval)(2000);
+                }
+            }))
+                .subscribe(async () => {
+                if (collection.modified && this._collection === collection) {
+                    await this.save(collection);
+                }
+            });
+        }
+        // raise event
+        this.raiseEvent('collection.changed');
+    }
+    async sync(updatedSys) {
+        // skip if there's no active collection/sys
+        const { collection, collectionSys, state, collectionRepository } = this;
+        if (!collection || !collectionSys) {
+            console.warn('[ContentfulCollectionController/sync] ignoring update before initial load');
+            return;
+        }
+        // or skip if collection version is unchanged
+        else if (collection.id === updatedSys.id && collectionSys.version >= updatedSys.version) {
+            console.debug('[ContentfulCollectionController/sync] ignoring update - current version is fresh');
+            return;
+        }
+        // or ignore if booting up
+        else if (state === 'uninitialized' || state === 'initializing' || state === 'loading') {
+            console.debug('[ContentfulCollectionController/sync] ignoring sync while loading');
+            return;
+        }
+        // or queue if saving
+        else if (this.state === 'saving') {
+            console.debug('[ContentfulCollectionController/sync] queueing collection sync - updated while saving');
+            this._queuedSync = updatedSys;
+            return;
+        }
+        // try to sync
+        try {
+            console.debug('[ContentfulCollectionController/sync] starting sync');
+            // update state
+            this.state = 'loading';
+            // perform sync
+            const result = await collectionRepository.sync({ collection, sys: updatedSys });
+            // update sys
+            this.collectionSys = result.sys;
+            // update collection (if unchanged)
+            if (this.collection !== result.collection) {
+                this.collection = result.collection;
+            }
+            // update summary (if any)
+            if (result.collectionGroup) {
+                this.collectionGroup = result.collectionGroup;
+            }
+            console.debug('[ContentfulCollectionController/sync] sync complete');
+            // clear state
+            this.state = 'ready';
+        }
+        // catch error
+        catch (e) {
+            console.error('[ContentfulCollectionController/sync] sync failed', e);
+            this.state = 'error';
+        }
+    }
+    async load() {
+        // mark as loading (or initialing if loading for first time)
+        this.state = this._state === 'uninitialized'
+            ? 'initializing'
+            : 'loading';
+        // try to fetch collection
+        try {
+            // load collection
+            const { collectionGroup, collection, sys } = await this.collectionRepository.load();
+            // set collection/group
+            this.collectionGroup = collectionGroup;
+            this.collection = collection;
+            this._collectionSys = sys;
+            // update state
+            this.state = 'ready';
+        }
+        // handle load error
+        catch (e) {
+            console.error('[ContentfulCollectionController] failed to load collection', e);
+            // set error state
+            this.state = 'error';
+        }
+    }
+    async createLanguage(target) {
+        throw new funnel_core_1.NotImplementedError();
+    }
+    async unpublish() {
+        throw new funnel_core_1.NotImplementedError();
+    }
+    async save(collection) {
+        // ignore if not ready
+        if (this._state !== 'ready') {
+            console.debug(`[ContentfulCollectionController/save] queuing save while in "${this._state}" state`);
+            this._queuedSave = collection;
+            return;
+        }
+        // clear save if queued
+        delete this._queuedSave;
+        // skip if collection isn't modified
+        if (!collection.modified) {
+            console.debug('[ContentfulCollectionController/save] ignore unmodified collection');
+            return;
+        }
+        // try to save collection
+        try {
+            console.debug('[ContentfulCollectionController/save] starting save');
+            // mark as syncing
+            collection.syncing = true;
+            // update state
+            this.state = 'saving';
+            // save page
+            this.collection = await this.collectionRepository.save(collection);
+            // update state
+            this.state = 'ready';
+            console.debug('[ContentfulCollectionController/save] save finished');
+        }
+        // handle error
+        catch (e) {
+            console.error('[ContentfulCollectionController/save] save failed', e);
+            // update state
+            this.state = 'error';
+        }
+        // complete
+        finally {
+            collection.syncing = false;
+        }
+    }
+    async reload() {
+        throw new funnel_core_1.NotImplementedError();
+    }
+    async processQueues() {
+        // try to save (if queued)
+        const { _queuedSave, _collection } = this;
+        if (_queuedSave) {
+            // nuke if collection differs (keep going afterward)
+            if (_collection !== _queuedSave) {
+                console.debug('[ContentfulCollectionController/processQueues] ignoring queued save for old page');
+                delete this._queuedSave;
+            }
+            // otherwise, try to save
+            else {
+                console.debug('[ContentfulCollectionController/processQueues] restarting queued save');
+                // save
+                this.save(_collection).catch(console.error);
+                // stop processing
+                return;
+            }
+        }
+        // try to sync
+        const { _queuedSync, _collectionSys } = this;
+        if (_queuedSync) {
+            // clear sync
+            delete this._queuedSync;
+            // reload if entity is different
+            if (_queuedSync.id !== (_collectionSys === null || _collectionSys === void 0 ? void 0 : _collectionSys.id)) {
+                console.debug('[ContentfulCollectionController/processQueues] reloading on entity change');
+                this.load().catch(console.error);
+            }
+            // otherwise, try to sync
+            else {
+                console.debug('[ContentfulCollectionController/processQueues] retrying sync');
+                this.sync(_queuedSync).catch(console.error);
+            }
+        }
+    }
+    raiseEvent(type) {
+        this._eventBus.publish(components_1.ICollectionController.Event.create({ type, controller: this }));
+    }
+}
+exports.ContentfulCollectionController = ContentfulCollectionController;

package/dist/collection/controller/ContentfulCollectionControllerContainer.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export declare function ContentfulCollectionControllerContainer({ children }: ContentfulCollectionControllerContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ContentfulCollectionControllerContainer {
+    type Props = PropsWithChildren;
+}

package/dist/collection/controller/ContentfulCollectionControllerContainer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentfulCollectionControllerContainer = ContentfulCollectionControllerContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_apps_toolkit_1 = require("@contentful/react-apps-toolkit");
+const components_1 = require("@nascentdigital/funnel-editor/components");
+const react_1 = require("react");
+const ContentfulCollectionController_1 = require("./ContentfulCollectionController");
+// container
+function ContentfulCollectionControllerContainer({ children }) {
+    // bind context
+    const collectionRepository = (0, components_1.useCollectionRepository)();
+    const sdk = (0, react_apps_toolkit_1.useSDK)();
+    const context = (0, react_1.useMemo)(() => ({
+        controller: new ContentfulCollectionController_1.ContentfulCollectionController({ collectionRepository })
+    }), [collectionRepository]);
+    // list to collection changes
+    (0, react_1.useEffect)(() => {
+        // get controller
+        const { controller } = context;
+        // sync on change
+        sdk.entry.onSysChanged(sys => {
+            controller.sync(sys).catch(console.error);
+        });
+    }, [sdk, context]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(components_1.CollectionControllerContext.Provider, { value: context, children: children }));
+}

package/dist/collection/controller/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ContentfulCollectionController';
+export * from './ContentfulCollectionControllerContainer';
+export * from './useContentfulCollectionController';

package/dist/collection/controller/index.js

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

package/dist/collection/controller/useContentfulCollectionController.d.ts

@@ -0,0 +1,2 @@
+import { ContentfulCollectionController } from './ContentfulCollectionController';
+export declare function useContentfulCollectionController(): ContentfulCollectionController;