@nascentdigital/funnel-editor-contentful 5.0.2 → 5.0.3

package/dist/EditorApp.js

@@ -19,11 +19,11 @@ function EditorApp() {
     }
     // 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, {}) }) }) }));
+        return ((0, jsx_runtime_1.jsx)(components_1.AppStateContainer, { children: (0, jsx_runtime_1.jsx)(core_1.AppBridgeContainer, { role: "hub", 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)) {
-        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, {}) }) }));
+        return ((0, jsx_runtime_1.jsx)(components_1.AppStateContainer, { children: (0, jsx_runtime_1.jsx)(core_1.AppBridgeContainer, { role: "client", children: (0, jsx_runtime_1.jsx)(EntrySidebar_1.EntrySidebar, {}) }) }));
     }
     // fallback
     else {

package/dist/EditorPageRouter.js

@@ -3,13 +3,13 @@ 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 EditorPageRoutes_1 = require("./EditorPageRoutes");
 const explore_1 = require("./explore");
 const page_1 = require("./page");
 // router
@@ -18,23 +18,17 @@ function EditorPageRouter() {
     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),
+        assetRepository: new asset_1.AssetRepository({ sdk, contentfulClient }),
         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, {}) })] })] }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_router_1.BrowserRouter, { basename: "/contentful", useTransitions: false, 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.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)(explore_1.HeaderContainer, { children: (0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(explore_1.Header, {}), (0, jsx_runtime_1.jsx)(EditorPageRoutes_1.EditorPageRoutes, {})] }) }) }) }) }) }) }) }) }) }));
 }

package/dist/EditorPageRoutes.d.ts

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

package/dist/EditorPageRoutes.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorPageRoutes = EditorPageRoutes;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+const react_router_1 = require("react-router");
+const explore_1 = require("./explore");
+const NotFound_1 = require("./NotFound");
+// router
+function EditorPageRoutes() {
+    // bind props + hooks
+    const location = (0, react_router_1.useLocation)();
+    console.debug('[EditorPageRoutes] render location', location);
+    // render
+    return ((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsxs)(react_router_1.Routes, { 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/:region?", element: (0, jsx_runtime_1.jsx)(explore_1.PagesExplorerLayout, {}), children: [(0, jsx_runtime_1.jsx)(react_router_1.Route, { index: true, element: (0, jsx_runtime_1.jsx)(explore_1.PagesExplorer, {}) }), (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: "page/:pageType", element: (0, jsx_runtime_1.jsx)(explore_1.PageExplorer, {}) })] }), (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}) })] }) }));
+}

package/dist/EntryEditor.js

@@ -21,7 +21,7 @@ function EntryEditor() {
     let region = funnel_core_1.RegionsConfig.getDefaultRegion(regionalization);
     // create repositories
     const { assetRepository, collectionRepository, pageRepository } = (0, react_1.useMemo)(() => ({
-        assetRepository: new asset_1.AssetRepository(sdk),
+        assetRepository: new asset_1.AssetRepository({ sdk, contentfulClient }),
         collectionRepository: new collection_1.CollectionRepository({ sdk, contentfulClient }),
         pageRepository: new page_1.PageRepository({ sdk, contentfulClient })
     }), [sdk, contentfulClient]);

package/dist/EntrySidebar.js

@@ -2,23 +2,44 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntrySidebar = EntrySidebar;
 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 rxjs_1 = require("rxjs");
 const core_1 = require("./core");
+const page_1 = require("./page");
 // component
 function EntrySidebar() {
+    var _a;
     // setup hooks
+    const id = (0, react_1.useId)();
+    const sdk = (0, react_apps_toolkit_1.useSDK)();
     const bridge = (0, core_1.useAppBridge)();
-    const [itemId, setItemId] = (0, react_1.useState)();
+    const [block, setBlock] = (0, react_1.useState)();
+    // setup ui
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // setup styling for auto-resize
+        (_a = funnel_core_1.Browser.getHtml()) === null || _a === void 0 ? void 0 : _a.classList.add('Editor-widget');
+        // start auto-resize
+        sdk.window.startAutoResizer();
+    }, [sdk]);
     // 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));
+            .pipe((0, rxjs_1.filter)(page_1.BlockChangedMessage.filter))
+            .subscribe(message => setBlock(message.block));
         // unsubscribe on unmount
         return () => subscription.unsubscribe();
-    });
+    }, [bridge, sdk]);
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h3", { children: ["Entry sidebar ", itemId] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full flex flex-col gap-l8 py-l8", children: [(0, jsx_runtime_1.jsxs)("h3", { children: ["Active Block: ", (_a = block === null || block === void 0 ? void 0 : block.name) !== null && _a !== void 0 ? _a : 'N/A'] }), sdk.entry.getSys().contentType.sys.id === 'page' && (block === null || block === void 0 ? void 0 : block.layout) && (block === null || block === void 0 ? void 0 : block.scope) &&
+                (0, jsx_runtime_1.jsx)(components_1.FadeIn, { children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l6 py-l7 bg-surface1 rounded-xxl interpolate-all", children: [(0, jsx_runtime_1.jsx)(components_1.Tabs, { className: "mx-l7", variant: "highlighted", size: "sm", items: blockScopes, selectedItem: block.scope, onSelect: scope => console.debug('changing scope', scope) }), (0, jsx_runtime_1.jsx)(components_1.BlockPreview, { className: "self-center", scope: block.scope, layout: block.layout })] }) }, "block.config")] }));
 }
+// helpers
+const blockScopes = [
+    { id: 'desktop', label: 'Desktop' },
+    { id: 'mobile', label: 'Mobile' },
+];

package/dist/NotFound.d.ts

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

package/dist/NotFound.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotFound = NotFound;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@nascentdigital/funnel-editor/components");
+const react_1 = require("react");
+const react_router_1 = require("react-router");
+function NotFound() {
+    // bind hooks
+    const navigate = (0, react_router_1.useNavigate)();
+    const splash = (0, components_1.useSplash)();
+    // dismiss splash
+    (0, react_1.useEffect)(() => {
+        splash.dismiss();
+    }, [splash]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(components_1.FadeIn, { className: "w-full flex-1 flex flex-col", variant: "blur", children: (0, jsx_runtime_1.jsxs)(components_1.EmptyState, { variant: "missing", size: "md", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md", children: "Sorry!  You took a wrong turn somewhere..." }), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "primary", size: "md", onClick: () => navigate('/'), children: "Go to Dashboard" })] }) }, "notFound"));
+}

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

@@ -1,10 +1,18 @@
-import { EditorAppSDK } from '@contentful/app-sdk';
+import { EditorAppSDK, PageAppSDK } from '@contentful/app-sdk';
+import { ContentfulContentClient } from '@nascentdigital/funnel-cms/contentful';
 import { IAssetRepository } from '@nascentdigital/funnel-editor/components';
 export declare class AssetRepository implements IAssetRepository {
-    readonly sdk: EditorAppSDK;
-    constructor(sdk: EditorAppSDK);
+    readonly sdk: EditorAppSDK | PageAppSDK;
+    readonly contentfulClient: ContentfulContentClient;
+    constructor(args: AssetRepository.ConstructorArgs);
     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>;
 }
+export declare namespace AssetRepository {
+    type ConstructorArgs = {
+        sdk: EditorAppSDK | PageAppSDK;
+        contentfulClient: ContentfulContentClient;
+    };
+}

package/dist/asset/repository/AssetRepository.js

@@ -2,11 +2,12 @@
 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;
+    constructor(args) {
+        // initialize instance
+        this.sdk = args.sdk;
+        this.contentfulClient = args.contentfulClient;
     }
     async search(args) {
         // TODO: implement fetching assets
@@ -25,9 +26,9 @@ class AssetRepository {
     }
     async uploadFile(args) {
         // upload asset
-        const asset = await core_1.ContentfulAsset.upload(args, this.sdk);
+        const asset = await this.contentfulClient.uploadAsset(args);
         // return result
-        return core_1.ContentfulAsset.serialize(asset, this.sdk.locales.default);
+        return funnel_core_1.Schema.AssetField.LinkedValue.toData(asset);
     }
 }
 exports.AssetRepository = AssetRepository;

package/dist/collection/domain/Collection.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Collection = void 0;
+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 rxjs_1 = require("rxjs");
@@ -341,7 +342,7 @@ exports.Collection = Collection;
                 schema,
                 content: fields[id],
                 snapshot: fieldsSnapshot[id]
-            })), files: Object.values(files), collections: Object.values(collections) }));
+            })), files: Object.values(files), collections: Object.values(collections), references: contentful_1.ContentfulData.findReferences(fields) }));
     }
     Collection.fromSchemaData = fromSchemaData;
     function toUpdates(collection, savables) {

package/dist/collection/repository/CollectionRepository.d.ts

@@ -1,10 +1,10 @@
-import { EditorAppSDK, EntrySys } from '@contentful/app-sdk';
+import { EditorAppSDK, EntrySys, PageAppSDK } from '@contentful/app-sdk';
 import { ContentfulContentClient } from '@nascentdigital/funnel-cms/contentful';
 import { Schema } from '@nascentdigital/funnel-core';
 import { CollectionFieldProxy, CollectionGroup, ICollection, ICollectionRepository } from '@nascentdigital/funnel-editor/components';
 import { Collection } from '../domain';
 export declare class CollectionRepository implements ICollectionRepository {
-    readonly sdk: EditorAppSDK;
+    readonly sdk: EditorAppSDK | PageAppSDK;
     readonly contentfulClient: ContentfulContentClient;
     constructor(args: CollectionRepository.ConstructorArgs);
     getOverview(args: ICollectionRepository.GetOverview.Args): Promise<ICollectionRepository.GetOverview.Result>;
@@ -22,7 +22,7 @@ export declare class CollectionRepository implements ICollectionRepository {
 }
 export declare namespace CollectionRepository {
     type ConstructorArgs = {
-        sdk: EditorAppSDK;
+        sdk: EditorAppSDK | PageAppSDK;
         contentfulClient: ContentfulContentClient;
     };
     namespace Load {

package/dist/collection/repository/CollectionRepository.js

@@ -48,8 +48,12 @@ class CollectionRepository {
         throw new funnel_core_1.NotImplementedError();
     }
     async load(sys) {
-        // throw if entry isn't a collection (it should be in this case)
+        // blow up if we're not in the editor
         const { sdk, contentfulClient } = this;
+        if (!('entry' in sdk)) {
+            throw new funnel_core_1.InvalidOperationError('Attempt to call load() outside of EntryEditor');
+        }
+        // throw if entry isn't a collection (it should be in this case)
         const { entry } = sdk;
         sys = sys !== null && sys !== void 0 ? sys : entry.getSys();
         const { id: entryId, contentType: { sys: { id: entryType } } } = sys;
@@ -78,7 +82,7 @@ class CollectionRepository {
         const { data: _remote } = collectionResult, references = __rest(collectionResult, ["data"]);
         const data = entryToCollectionData(entry);
         // return collection model from data
-        const collection = domain_1.Collection.fromSchemaData(Object.assign({ data }, references));
+        const collection = domain_1.Collection.fromSchemaData({ data, references });
         return {
             collectionGroup: new components_1.CollectionGroup(Object.assign({ template: collection.template, collections }, group)),
             collection,
@@ -86,6 +90,11 @@ class CollectionRepository {
         };
     }
     async save(collection) {
+        // guard method
+        const { sdk } = this;
+        if (!('entry' in sdk)) {
+            throw new funnel_core_1.InvalidOperationError('Attempt to call save() outside of EntryEditor');
+        }
         // serialize collection updates (or skip if there are no changes)
         const savables = [];
         const updateArgs = domain_1.Collection.toUpdates(collection, savables);
@@ -97,7 +106,6 @@ class CollectionRepository {
         savables.forEach(savable => savable.onSaveStart());
         // update entry if page is local
         let updatedOn;
-        const { sdk } = this;
         const { entry } = sdk;
         const { id: entryId, contentType: { sys: { id: entryType } } } = entry.getSys();
         if (entryType === contentful_1.ContentfulCollectionData.contentType && collection.id === entryId) {
@@ -117,7 +125,8 @@ class CollectionRepository {
             // swap to new collection (if update returned new data)
             if (result.collection) {
                 console.debug('[PageRepository/save] switching to new page data', result.collection);
-                collection = domain_1.Collection.fromSchemaData(result.collection);
+                const _a = result.collection, { data } = _a, references = __rest(_a, ["data"]);
+                collection = domain_1.Collection.fromSchemaData({ data, references });
             }
         }
         console.debug('[PageRepository/save] finalizing save');
@@ -129,8 +138,12 @@ class CollectionRepository {
         return collection;
     }
     async sync({ collection, sys }) {
-        // skip if entity version and updated sys are same
+        // guard method
         const { sdk } = this;
+        if (!('entry' in sdk)) {
+            throw new funnel_core_1.InvalidOperationError('Attempt to call sync() outside of EntryEditor');
+        }
+        // skip if entity version and updated sys are same
         const { entry } = sdk;
         const entrySys = entry.getSys();
         if (sys.version === entrySys.version) {
@@ -161,7 +174,7 @@ class CollectionRepository {
         };
         // create new page (use existing sys)
         return {
-            collection: domain_1.Collection.fromSchemaData(Object.assign({ data }, references)),
+            collection: domain_1.Collection.fromSchemaData({ data, references }),
             sys
         };
     }

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

@@ -0,0 +1,31 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Observable } from 'rxjs';
+import { Tagged } from 'type-fest';
+import { IAppBridgeMessage } from './IAppBridgeMessage';
+export declare class AppBridge {
+    readonly id: AppBridge.Id;
+    readonly role: AppBridge.Role;
+    private readonly _bridges$;
+    private readonly _messages$;
+    private readonly _state$;
+    private readonly _channel;
+    constructor(role: string);
+    get messages$(): Observable<IAppBridgeMessage<string, string>>;
+    get bridges$(): Observable<ReadonlySet<AppBridge.Id>>;
+    get bridges(): ReadonlySet<AppBridge.Id>;
+    private addBridge;
+    private removeBridge;
+    get state$(): Observable<AppBridge.State>;
+    get state(): AppBridge.State;
+    private set state(value);
+    connect(): AppBridge.DisconnectMethod;
+    send<TMessage extends IAppBridgeMessage>(args: AppBridge.SendArgs<TMessage>): void;
+}
+export declare namespace AppBridge {
+    type Id = Tagged<string, 'AppBridge.Id'>;
+    type Role = 'hub' | 'client';
+    type State = 'uninitialized' | 'initializing' | 'ready';
+    type DisconnectMethod = Callback.Void;
+    type SendArgs<TMessage extends IAppBridgeMessage> = Omit<TMessage, 'senderId' | 'sonderRole' | 'timestamp'>;
+}
+export declare function createBridgeChannel(): BroadcastChannel;

package/dist/core/bridge/AppBridge.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBridge = void 0;
+exports.createBridgeChannel = createBridgeChannel;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const rxjs_1 = require("rxjs");
+const BridgeLifecycleMessage_1 = require("./BridgeLifecycleMessage");
+const IAppBridgeMessage_1 = require("./IAppBridgeMessage");
+// class
+class AppBridge {
+    constructor(role) {
+        // initialize instance variables
+        this.id = funnel_core_1.Value.uuid();
+        this.role = role;
+        this._bridges$ = new rxjs_1.BehaviorSubject(new Set());
+        this._messages$ = new rxjs_1.Subject();
+        this._state$ = new rxjs_1.BehaviorSubject('uninitialized');
+        this._channel = createBridgeChannel();
+    }
+    get messages$() {
+        return this._messages$.asObservable();
+    }
+    get bridges$() {
+        return this._bridges$.asObservable();
+    }
+    get bridges() {
+        return this._bridges$.value;
+    }
+    addBridge(bridge) {
+        const bridges = new Set(this.bridges);
+        bridges.add(bridge);
+        this._bridges$.next(bridges);
+    }
+    removeBridge(bridge) {
+        const bridges = new Set(this.bridges);
+        bridges.delete(bridge);
+        this._bridges$.next(bridges);
+    }
+    get state$() {
+        return this._state$.asObservable();
+    }
+    get state() {
+        return this._state$.value;
+    }
+    set state(state) {
+        this._state$.next(state);
+    }
+    connect() {
+        // throw if already connecting/connected
+        const { id, role, _messages$, _channel } = this;
+        if (this.state !== 'uninitialized') {
+            throw new funnel_core_1.InvalidOperationError('Cannot call connect() unless disconnected');
+        }
+        console.debug(`[${role}/${id}] initializing`);
+        // update state
+        this.state = 'initializing';
+        // add self to bridges
+        this.addBridge(id);
+        // create broadcast handler
+        const onChannelMessage = (event) => {
+            console.debug(`[${role}/${id}] received event`, event);
+            // ignore message if it's an echo
+            const message = event.data;
+            if (message.senderId === id) {
+                console.debug(`[${role}/${id}] ignoring echo`);
+                return;
+            }
+            // or ignore if it's directed to another bridge type
+            else if (message.recipientId && message.recipientId !== id) {
+                console.debug(`[${role}/${id}] ignoring message for recipient: `, message.recipientId);
+                return;
+            }
+            // handle bridge lifecycle events
+            if (IAppBridgeMessage_1.IAppBridgeMessage.filter(message, 'appBridge')) {
+                switch (message.type) {
+                    case 'connect': {
+                        console.debug(`[${role}/${id}] tracking connect for:`, message.senderId);
+                        // track bridge connect
+                        this.addBridge(message.senderId);
+                        // greet if hub and sender joined
+                        if (role === 'hub' && message.sonderRole === 'client') {
+                            console.debug(`[${role}/${id}] greeting client: `, message.senderId);
+                            // track client connect
+                            this.send(BridgeLifecycleMessage_1.BridgeLifecycleMessage.create({ type: 'greet', recipientId: message.senderId }));
+                        }
+                        break;
+                    }
+                    case 'greet': {
+                        // track bridge on greet
+                        this.addBridge(message.senderId);
+                        // mark client ready when greeted by hub
+                        if (role === 'client' && message.sonderRole === 'hub') {
+                            console.debug(`[${role}/${id}] received greeting from hub - marking ready`);
+                            this.state = 'ready';
+                        }
+                        // shouldn't receive greet from client (or a sibling hub)
+                        else {
+                            console.warn(`[${role}/${id}] received unexpected greeting`, message);
+                        }
+                        break;
+                    }
+                    case 'disconnect': {
+                        console.debug(`[${role}/${id}] tracking disconnect for:`, message.senderId);
+                        // remove bridge on disconnect
+                        this.removeBridge(message.senderId);
+                        break;
+                    }
+                }
+            }
+            else {
+                console.debug(`[${role}/${id}] message is not a lifecycle message`, message);
+            }
+            // forward locally
+            _messages$.next(message);
+        };
+        // listen to messages and forward all to the channel
+        _channel.addEventListener('message', onChannelMessage);
+        console.debug(`[${role}/${id}] broadcasting connect`);
+        // broadcast connect
+        this.send(BridgeLifecycleMessage_1.BridgeLifecycleMessage.create({ type: 'connect' }));
+        // broadcast greet (if we're the hub)
+        if (role === 'hub') {
+            console.debug(`[${role}/${id}] broadcasting greet`);
+            // greet
+            this.send(BridgeLifecycleMessage_1.BridgeLifecycleMessage.create({ type: 'greet' }));
+            // mark ready
+            this.state = 'ready';
+        }
+        // return disconnect handler
+        return () => {
+            console.debug(`[${role}/${id}] broadcasting disconnect`);
+            // stop listening
+            _channel.removeEventListener('message', onChannelMessage);
+            // broadcast disconnect
+            this.send(BridgeLifecycleMessage_1.BridgeLifecycleMessage.create({ type: 'disconnect' }));
+        };
+    }
+    send(args) {
+        // create full message
+        const { id, role, _messages$, _channel } = this;
+        const message = Object.assign({ senderId: id, sonderRole: role, timestamp: Date.now() }, args);
+        // post locally
+        _messages$.next(message);
+        _channel.postMessage(message);
+    }
+}
+exports.AppBridge = AppBridge;
+// helpers
+const CHANNEL_PREFIX = 'funnel:channel:';
+const CHANNEL_ID_KEY = 'funnel:appBridge:channelId';
+function createBridgeChannel() {
+    // fetch channel id (or create one)
+    let channelId = window.sessionStorage.getItem(CHANNEL_ID_KEY);
+    if (!channelId) {
+        channelId = funnel_core_1.Value.uuid();
+        window.sessionStorage.setItem(CHANNEL_ID_KEY, channelId);
+    }
+    // create broadcast channel for bridge
+    return new BroadcastChannel(`'${CHANNEL_PREFIX}${channelId}`);
+}

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

@@ -1,9 +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;
+import { AppBridge } from './AppBridge';
+export declare function AppBridgeContainer({ role, children }: AppBridgeContainer.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace AppBridgeContainer {
     type Props = {
+        role: AppBridge.Role;
         children: ReactNode;
     };
 }
-export declare function getUniqueId(): string;

package/dist/core/bridge/AppBridgeContainer.js

@@ -1,55 +1,19 @@
 "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 AppBridge_1 = require("./AppBridge");
 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
+function AppBridgeContainer({ role, children }) {
+    // bind bridge/context
+    const appBridge = (0, react_1.useMemo)(() => new AppBridge_1.AppBridge(role), [role]);
+    const context = (0, react_1.useMemo)(() => ({ appBridge }), [appBridge]);
+    // connect on mount (automatically disconnects b/c of result
     (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]);
+        return appBridge.connect();
+    }, [appBridge]);
     // 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

@@ -1,8 +1,7 @@
-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>;
+import { AppBridge } from './AppBridge';
+export declare const AppBridgeContext: import("react").Context<AppBridgeContext.Data>;
+export declare namespace AppBridgeContext {
+    type Data = {
+        appBridge?: AppBridge;
+    };
+}

package/dist/core/bridge/AppBridgeContext.js

@@ -2,10 +2,5 @@
 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: {}
-});
+exports.AppBridgeContext = (0, react_1.createContext)({});

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

@@ -0,0 +1,7 @@
+import type { IAppBridgeMessage } from './IAppBridgeMessage';
+export interface BridgeLifecycleMessage extends IAppBridgeMessage<'appBridge', BridgeLifecycleMessage.Type> {
+}
+export declare namespace BridgeLifecycleMessage {
+    type Type = 'connect' | 'greet' | 'disconnect';
+    function create(args: IAppBridgeMessage.Create.Args<BridgeLifecycleMessage>): IAppBridgeMessage.Create.Result<BridgeLifecycleMessage>;
+}