@nascentdigital/funnel-editor-contentful 4.6.7 → 5.0.1

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

@@ -26,5 +26,5 @@ function EditorApp() {
         content = (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 }) }));
+    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.EditorApiContainer, { children: content }) }) }));
 }

package/dist/EntryEditor.js

@@ -2,8 +2,49 @@
 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 components_1 = require("@nascentdigital/funnel-editor/components");
+const react_1 = require("react");
+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, {}));
+    // hooks
+    const sdk = (0, react_apps_toolkit_1.useSDK)();
+    const appState = (0, components_1.useAppState)();
+    // create asset repository
+    const assetRepository = (0, react_1.useMemo)(() => {
+        return new core_1.AssetRepository(sdk);
+    }, [sdk]);
+    // create remote collection repository
+    const remoteCollectionRepository = (0, react_1.useMemo)(() => {
+        return new core_1.RemoteCollectionRepository(sdk);
+    }, [sdk]);
+    // create remote page repository
+    const remotePageRepository = (0, react_1.useMemo)(() => {
+        return new core_1.RemotePageRepository(sdk);
+    }, [sdk]);
+    // create collections context
+    const collectionsContext = (0, react_1.useMemo)(() => {
+        const collections = new components_1.Collections({ appState, repository: remoteCollectionRepository });
+        return { collections };
+    }, [appState, remoteCollectionRepository]);
+    // create site context
+    const siteContext = (0, react_1.useMemo)(() => {
+        const site = new components_1.Site({ appState, repository: remotePageRepository, region: 'ca' });
+        return { site };
+    }, [appState, remotePageRepository]);
+    // page editor
+    let content;
+    const { contentType: { sys: { id } } } = sdk.entry.getSys();
+    if (id === core_1.ContentfulPage.contentTypeId) {
+        content = ((0, jsx_runtime_1.jsx)(page_1.LocalPageControllerContainer, { remoteRepository: remotePageRepository, children: (0, jsx_runtime_1.jsx)(page_1.PageEditor, {}) }));
+    }
+    // collection editor
+    else if (id === core_1.ContentfulCollection.contentTypeId) {
+        content = ((0, jsx_runtime_1.jsx)(collection_1.LocalCollectionControllerContainer, { remoteRepository: remoteCollectionRepository, children: (0, jsx_runtime_1.jsx)(collection_1.CollectionEditor, {}) }));
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(components_1.SiteContext.Provider, { value: siteContext, children: (0, jsx_runtime_1.jsx)(components_1.AssetRepositoryContext.Provider, { value: assetRepository, children: (0, jsx_runtime_1.jsx)(components_1.CollectionRepositoryContext.Provider, { value: remoteCollectionRepository, 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: 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.jsxs)("div", { children: ["Entry sidebar ", itemId] }));
 }

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

@@ -0,0 +1,35 @@
+import { CollectionGroup, CollectionTarget, ICollection, ICollectionController } from '@nascentdigital/funnel-editor/components';
+import { type Observable } from 'rxjs';
+import { Collection, LocalCollectionRepository, RemoteCollectionRepository } from '../../core';
+export declare class LocalCollectionController implements ICollectionController {
+    readonly localRepository: LocalCollectionRepository;
+    readonly remoteRepository: RemoteCollectionRepository;
+    private readonly _eventBus;
+    private _state;
+    private _collectionGroup?;
+    private _collection?;
+    private _subscription?;
+    constructor({ localRepository, remoteRepository }: LocalCollectionController.ConstructorArgs);
+    get events$(): Observable<ICollectionController.Event | ICollection.Event>;
+    get state(): ICollectionController.State;
+    private set state(value);
+    get ready(): boolean;
+    get languages(): ("id" | "ca" | "en" | "aa" | "ab" | "ae" | "af" | "ak" | "am" | "an" | "ar" | "as" | "av" | "ay" | "az" | "ba" | "be" | "bg" | "bh" | "bi" | "bm" | "bn" | "bo" | "br" | "bs" | "ce" | "ch" | "co" | "cr" | "cs" | "cu" | "cv" | "cy" | "da" | "de" | "dv" | "dz" | "ee" | "el" | "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 collectionGroup(): CollectionGroup | undefined;
+    private set collectionGroup(value);
+    get collection(): Collection | undefined;
+    set collection(collection: Collection | undefined);
+    sync(updatedOn: number): Promise<void>;
+    load(): Promise<void>;
+    createLanguage(target: CollectionTarget): Promise<void>;
+    unpublish(): Promise<void>;
+    save(collection: Collection): Promise<void>;
+    reload(): Promise<void>;
+    private raiseEvent;
+}
+export declare namespace LocalCollectionController {
+    type ConstructorArgs = {
+        localRepository: LocalCollectionRepository;
+        remoteRepository: RemoteCollectionRepository;
+    };
+}

package/dist/collection/controller/LocalCollectionController.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalCollectionController = 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 LocalCollectionController {
+    constructor({ localRepository, remoteRepository }) {
+        // initialize instance variables
+        this.localRepository = localRepository;
+        this.remoteRepository = remoteRepository;
+        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) {
+            console.debug('[CollectionController/state] skipping redundant update', value);
+            return;
+        }
+        // or update
+        this._state = value;
+        console.debug('[CollectionController/state] updated state', value);
+        // raise event
+        this.raiseEvent('state.changed');
+    }
+    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 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('[CE][CollectionController] ignoring collection change for', collection);
+            return;
+        }
+        // unbind previous subscription (if any)
+        if (this._subscription) {
+            this._subscription.unsubscribe();
+            delete this._subscription;
+        }
+        console.debug('[CE][CollectionController] updating to new collection', collection);
+        // update collection
+        this._collection = collection;
+        // subscribe to collection changes
+        if (collection) {
+            this._subscription = 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) {
+                    console.debug('[CE][CollectionController] saving modified collection', collection);
+                    await this.save(collection);
+                }
+                else {
+                    console.debug('[CE][CollectionController] ignoring change for zombie collection', collection);
+                }
+            });
+        }
+        // raise event
+        this.raiseEvent('collection.changed');
+    }
+    async sync(updatedOn) {
+        // get current collection
+        const collection = this._collection;
+        // bail if no collection
+        if (!collection) {
+            console.warn('[CE][CollectionController] tried to sync with no collection');
+            return;
+        }
+        // skip if page already in sync
+        if (collection.updatedOn >= updatedOn) {
+            console.debug('[CE][CollectionController] skipping sync, collection already in sync');
+            return;
+        }
+        // skip if saving already
+        if (this.state === 'saving') {
+            console.debug('[CE][CollectionController] skipping sync while saving');
+            return;
+        }
+        // start fresh load
+        console.debug('[CE][CollectionController] syncing, page out of date...');
+        await this.load();
+    }
+    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 collection = await this.localRepository.load({ eventBus: this._eventBus });
+            // get collection references
+            if (collection) {
+                const references = await this.remoteRepository.getReferences(collection.id);
+                collection.hydrateStores(references);
+            }
+            // set collection
+            // TODO: create real collection group
+            this._collectionGroup = new components_1.CollectionGroup({ collections: [] });
+            this.collection = collection;
+            // update state
+            this.state = 'ready';
+        }
+        // handle load error
+        catch (e) {
+            console.error('[CollectionController] failed to load collection', e);
+            // TODO: expose error
+            // 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) {
+        // try to save collection
+        try {
+            console.debug('[CE][CollectionController/save] starting save');
+            // update state
+            this.state = 'saving';
+            // save page
+            const updatedCollection = await this.localRepository.save(collection);
+            this.collection = updatedCollection;
+            // update state
+            this.state = 'ready';
+            console.debug('[CE][CollectionController/save] save finished');
+        }
+        // handle error
+        catch (e) {
+            console.error('[CE][CollectionController/save] save failed', e);
+            // update state
+            this.state = 'error';
+        }
+    }
+    async reload() {
+        throw new funnel_core_1.NotImplementedError();
+    }
+    raiseEvent(type) {
+        this._eventBus.publish(components_1.ICollectionController.Event.create({ type, controller: this }));
+    }
+}
+exports.LocalCollectionController = LocalCollectionController;

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

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

package/dist/collection/controller/LocalCollectionControllerContainer.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalCollectionControllerContainer = LocalCollectionControllerContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_apps_toolkit_1 = require("@contentful/react-apps-toolkit");
+const react_1 = require("react");
+const core_1 = require("../../core");
+const LocalCollectionController_1 = require("./LocalCollectionController");
+const LocalCollectionControllerContext_1 = require("./LocalCollectionControllerContext");
+// container
+function LocalCollectionControllerContainer({ children, remoteRepository }) {
+    // bind context
+    const sdk = (0, react_apps_toolkit_1.useSDK)();
+    const context = (0, react_1.useMemo)(() => {
+        console.debug('[CE][CollectionControllerContainer] creating collection controller');
+        const localRepository = new core_1.LocalCollectionRepository(sdk);
+        // return context
+        return {
+            controller: new LocalCollectionController_1.LocalCollectionController({ localRepository, remoteRepository })
+        };
+    }, [sdk, remoteRepository]);
+    // list to collection changes
+    (0, react_1.useEffect)(() => {
+        // get controller
+        const { controller } = context;
+        // sync on change
+        sdk.entry.onSysChanged(sys => {
+            // get updatedOn in milliseconds
+            const updatedOn = new Date(sys.updatedAt).getTime();
+            // call sync
+            controller.sync(updatedOn).catch(console.error);
+        });
+    }, [sdk, context]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(LocalCollectionControllerContext_1.LocalCollectionControllerContext.Provider, { value: context, children: children }));
+}

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

@@ -0,0 +1,7 @@
+import { LocalCollectionController } from './LocalCollectionController';
+export declare const LocalCollectionControllerContext: import("react").Context<LocalCollectionControllerContext.Type>;
+export declare namespace LocalCollectionControllerContext {
+    type Type = {
+        controller: LocalCollectionController;
+    };
+}

package/dist/collection/controller/LocalCollectionControllerContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalCollectionControllerContext = void 0;
+const react_1 = require("react");
+// context
+exports.LocalCollectionControllerContext = (0, react_1.createContext)({});

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

@@ -0,0 +1,4 @@
+export * from './LocalCollectionController';
+export * from './LocalCollectionControllerContext';
+export * from './LocalCollectionControllerContainer';
+export * from './useLocalCollectionController';

package/dist/collection/controller/index.js

@@ -0,0 +1,20 @@
+"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("./LocalCollectionController"), exports);
+__exportStar(require("./LocalCollectionControllerContext"), exports);
+__exportStar(require("./LocalCollectionControllerContainer"), exports);
+__exportStar(require("./useLocalCollectionController"), exports);

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

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

package/dist/collection/controller/useLocalCollectionController.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocalCollectionController = useLocalCollectionController;
+const react_1 = require("react");
+const LocalCollectionControllerContext_1 = require("./LocalCollectionControllerContext");
+// hook
+function useLocalCollectionController() {
+    // bind and return context
+    return (0, react_1.useContext)(LocalCollectionControllerContext_1.LocalCollectionControllerContext);
+}

package/dist/collection/index.d.ts

@@ -0,0 +1,2 @@
+export * from './screens';
+export * from './controller';

package/dist/collection/index.js

@@ -0,0 +1,18 @@
+"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("./screens"), exports);
+__exportStar(require("./controller"), exports);

package/dist/collection/screens/CollectionEditor.d.ts

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

package/dist/collection/screens/CollectionEditor.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionEditor = CollectionEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@nascentdigital/funnel-editor/components");
+const react_1 = require("react");
+const controller_1 = require("../controller");
+// component
+function CollectionEditor() {
+    // hooks
+    const controllerContext = (0, controller_1.useLocalCollectionController)();
+    const { controller } = controllerContext;
+    const { collection } = controller;
+    const collectionContext = (0, react_1.useMemo)(() => ({ collection }), [collection]);
+    // sync with controller
+    (0, components_1.useCollectionController)(controller);
+    // load
+    (0, react_1.useEffect)(() => {
+        controller.load().catch(console.error);
+    }, [controller]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(components_1.CollectionControllerContext.Provider, { value: controllerContext, children: (0, jsx_runtime_1.jsx)(components_1.CollectionContext.Provider, { value: collectionContext, children: (0, jsx_runtime_1.jsx)(components_1.AssetStoreContext.Provider, { value: collection, children: (0, jsx_runtime_1.jsx)(components_1.CollectionStoreContext.Provider, { value: collection, children: (0, jsx_runtime_1.jsx)("div", { className: "w-dvw h-dvh flex flex-col bg-background", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex", children: (0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full max-w-[1000px] mx-auto", children: renderContent({ controller }) }) }) }) }) }) }) }) }));
+}
+function renderContent({ controller }) {
+    // render loader if not ready
+    const { ready, collectionGroup, collection } = controller;
+    if (!ready) {
+        return ((0, jsx_runtime_1.jsx)(components_1.Loader, {}, "loader"));
+    }
+    // render error if there's no group
+    else if (!collectionGroup) {
+        return ((0, jsx_runtime_1.jsx)(components_1.EmptyState, { variant: "missing", size: "md", children: "Oops!  This page doesn't seem to exist..." }));
+    }
+    // render create state if there's no group
+    else if (!collection) {
+        return null;
+    }
+    // otherwise render editor
+    else {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex flex-col gap-l10 px-l6 py-l10 overflow-y-scroll scrollbar-thin bg-background", children: (0, jsx_runtime_1.jsx)(components_1.FieldsPanel, { title: "Content", fields: collection.allFields }) }));
+    }
+}

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

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

package/dist/{page/hooks → collection/screens}/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("./CollectionEditor"), exports);

package/dist/core/bridge/AppBridgeContainer.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare const CHANNEL_PREFIX = "funnel:channel:";
+export declare function AppBridgeContainer({ children }: AppBridgeContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AppBridgeContainer {
+    type Props = {
+        children: ReactNode;
+    };
+}
+export declare function getUniqueId(): string;

package/dist/core/bridge/AppBridgeContainer.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHANNEL_PREFIX = void 0;
+exports.AppBridgeContainer = AppBridgeContainer;
+exports.getUniqueId = getUniqueId;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const uuid_1 = require("uuid");
+const AppBridgeContext_1 = require("./AppBridgeContext");
+// constants
+exports.CHANNEL_PREFIX = 'funnel:channel:';
+// container
+function AppBridgeContainer({ children }) {
+    // create context
+    const context = (0, react_1.useMemo)(() => ({
+        id: (0, uuid_1.v4)(),
+        eventBus: new rxjs_1.Subject(),
+        channel: new BroadcastChannel(exports.CHANNEL_PREFIX + getUniqueId())
+    }), []);
+    // forward all events to channel
+    (0, react_1.useEffect)(() => {
+        // create message handler
+        const { id, eventBus, channel } = context;
+        const onChannelMessage = (event) => {
+            console.debug(`[${id}] received event`, event);
+            // ignore message if sent from this container
+            const message = event.data;
+            if (message.source === id) {
+                console.debug(`[${id}] ignoring echo`);
+                return;
+            }
+            console.debug(`[${id}] forwarding message to local bus`);
+            eventBus.next(message);
+        };
+        // listen to messages and forward all to the channel
+        channel.addEventListener('message', onChannelMessage);
+        // remove listener on unmount
+        return () => channel.removeEventListener('message', onChannelMessage);
+    }, [context]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(AppBridgeContext_1.AppBridgeContext.Provider, { value: context, children: children }));
+}
+// helpers
+const UUID_KEY = 'funnel:uuid';
+function getUniqueId() {
+    // fetch window id (or create one)
+    let value = window.sessionStorage.getItem(UUID_KEY);
+    if (!value) {
+        value = (0, uuid_1.v4)();
+        window.sessionStorage.setItem(UUID_KEY, value);
+    }
+    // return value
+    return value;
+}

package/dist/core/bridge/AppBridgeContext.d.ts

@@ -0,0 +1,8 @@
+import { Subject } from 'rxjs';
+import { AppContextId, TrackedAppMessage } from './AppMessage';
+export type IAppBridgeContext = {
+    id: AppContextId;
+    eventBus: Subject<TrackedAppMessage>;
+    channel: BroadcastChannel;
+};
+export declare const AppBridgeContext: import("react").Context<IAppBridgeContext>;

package/dist/core/bridge/AppBridgeContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBridgeContext = void 0;
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+// context
+exports.AppBridgeContext = (0, react_1.createContext)({
+    id: '',
+    eventBus: new rxjs_1.Subject(),
+    channel: {}
+});