@nascentdigital/funnel-editor-contentful 5.0.2 → 5.0.3

package/dist/core/bridge/BridgeLifecycleMessage.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BridgeLifecycleMessage = void 0;
+// extensions
+var BridgeLifecycleMessage;
+(function (BridgeLifecycleMessage) {
+    // helpers
+    function create(args) {
+        return Object.assign(Object.assign({}, args), { domain: 'appBridge' });
+    }
+    BridgeLifecycleMessage.create = create;
+})(BridgeLifecycleMessage || (exports.BridgeLifecycleMessage = BridgeLifecycleMessage = {}));

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

@@ -0,0 +1,16 @@
+import type { AppBridge } from './AppBridge';
+export interface IAppBridgeMessage<TDomain extends string = string, TType extends string = string> {
+    senderId: AppBridge.Id;
+    sonderRole: AppBridge.Role;
+    recipientId?: AppBridge.Id;
+    domain: TDomain;
+    type: TType;
+    timestamp: number;
+}
+export declare namespace IAppBridgeMessage {
+    namespace Create {
+        type Args<TMessage extends IAppBridgeMessage> = Omit<TMessage, 'senderId' | 'sonderRole' | 'domain' | 'timestamp'>;
+        type Result<TMessage extends IAppBridgeMessage> = Omit<TMessage, 'senderId' | 'senderRole' | 'timestamp'>;
+    }
+    function filter<TTMessage extends IAppBridgeMessage>(message: IAppBridgeMessage, domain: TTMessage['domain'], type?: TTMessage['type']): message is TTMessage;
+}

package/dist/core/bridge/IAppBridgeMessage.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IAppBridgeMessage = void 0;
+// extensions
+var IAppBridgeMessage;
+(function (IAppBridgeMessage) {
+    function filter(message, domain, type) {
+        return message.domain === domain
+            && (!type || message.type === type);
+    }
+    IAppBridgeMessage.filter = filter;
+})(IAppBridgeMessage || (exports.IAppBridgeMessage = IAppBridgeMessage = {}));

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

@@ -1,4 +1,5 @@
+export * from './AppBridge';
+export * from './IAppBridgeMessage';
 export * from './AppBridgeContainer';
 export * from './AppBridgeContext';
-export * from './AppMessage';
 export * from './useAppBridge';

package/dist/core/bridge/index.js

@@ -14,7 +14,8 @@ 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("./AppBridge"), exports);
+__exportStar(require("./IAppBridgeMessage"), exports);
 __exportStar(require("./AppBridgeContainer"), exports);
 __exportStar(require("./AppBridgeContext"), exports);
-__exportStar(require("./AppMessage"), exports);
 __exportStar(require("./useAppBridge"), exports);

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

@@ -1,8 +1,2 @@
-import { Observable } from 'rxjs';
-import { AppMessage } from './AppMessage';
-export type AppMessageSubmission = Omit<AppMessage, 'source'>;
-export type UseAppBridgetHook = {
-    sendMessage(message: AppMessageSubmission): void;
-    messages$: Observable<AppMessage>;
-};
-export declare function useAppBridge(): UseAppBridgetHook;
+import { AppBridge } from './AppBridge';
+export declare function useAppBridge(): AppBridge;

package/dist/core/bridge/useAppBridge.js

@@ -1,24 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAppBridge = useAppBridge;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
 const react_1 = require("react");
 const AppBridgeContext_1 = require("./AppBridgeContext");
 // hook
 function useAppBridge() {
     // bind context
-    const { id, eventBus, channel } = (0, react_1.useContext)(AppBridgeContext_1.AppBridgeContext);
-    // helpers
-    const sendMessage = (message) => {
-        // track the message
-        const trackedMessage = Object.assign({ source: id }, message);
-        // send to local bus
-        eventBus.next(trackedMessage);
-        // echo to remote bus (if any)
-        channel.postMessage(trackedMessage);
-    };
-    // return hook interface
-    return {
-        sendMessage,
-        messages$: eventBus.asObservable()
-    };
+    const { appBridge } = (0, react_1.useContext)(AppBridgeContext_1.AppBridgeContext);
+    const touch = (0, hooks_1.useTouch)();
+    // sync with state
+    (0, react_1.useEffect)(() => {
+        // skip if not available (shouldn't happen)
+        if (!appBridge) {
+            return;
+        }
+        // subscribe to state
+        const subscriptions = [
+            appBridge.state$.subscribe(touch),
+            appBridge.bridges$.subscribe(touch)
+        ];
+        // unsubscribe on unmount
+        return () => subscriptions.forEach(subscription => subscription.unsubscribe());
+    }, [appBridge, touch]);
+    // throw if not available (shouldn't happen)
+    if (!appBridge) {
+        throw new funnel_core_1.InvalidOperationError('Cannot use AppBridge outside of AppBridgeContainer');
+    }
+    // return bridge
+    return appBridge;
 }

package/dist/core/index.d.ts

@@ -1,4 +1,2 @@
 export * from './bridge';
 export * from './client';
-export * from './contentful';
-export * from './repository';

package/dist/core/index.js

@@ -16,5 +16,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./bridge"), exports);
 __exportStar(require("./client"), exports);
-__exportStar(require("./contentful"), exports);
-__exportStar(require("./repository"), exports);

package/dist/explore/components/header/Header.d.ts

@@ -0,0 +1,14 @@
+export declare function Header({ className }: Header.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Header {
+    type Breadcrumb = Breadcrumb.Label | Breadcrumb.Link;
+    namespace Breadcrumb {
+        type Label = string;
+        type Link = {
+            label: string;
+            url: string;
+        };
+    }
+    type Props = {
+        className?: string;
+    };
+}

package/dist/explore/components/{Header.js → header/Header.js}

@@ -5,27 +5,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = Header;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
 const components_1 = require("@nascentdigital/funnel-editor/components");
 const classnames_1 = __importDefault(require("classnames"));
-const react_router_1 = require("react-router");
 const react_1 = require("motion/react");
+const react_2 = require("react");
+const react_router_1 = require("react-router");
+const useHeader_1 = require("./useHeader");
 // component
-function Header({ className, title, breadcrumbs: breadcrumbsRaw, highlightBreadcrumb = false, back, onBack = funnel_core_1.Fn.NoOp, disableBack = false, hideControls, children }) {
+function Header({ className }) {
     // bind props + hooks
-    const breadcrumbs = breadcrumbsRaw !== null && breadcrumbsRaw !== void 0 ? breadcrumbsRaw : [];
+    const controller = (0, useHeader_1.useHeader)();
+    const { breadcrumbs, highlightBreadcrumb, backButton, disableBack, actions } = controller;
     const breadcrumbsEndIndex = breadcrumbs.length - 1;
     // render
-    return ((0, jsx_runtime_1.jsxs)("nav", { className: (0, classnames_1.default)(className, 'h-48 flex items-center gap-l4 px-l8', 'label-sm text-content-primary bg-background border-b border-solid border-border-l1'), children: [back === 'none'
+    return ((0, jsx_runtime_1.jsxs)("nav", { className: (0, classnames_1.default)(className, 'h-48 flex items-center gap-l4 px-l8', 'label-sm text-content-primary bg-background border-b border-solid border-border-l1'), children: [backButton === 'none'
                 // logo
                 ?
-                    (0, jsx_runtime_1.jsx)("span", { className: "w-36 h-36 flex justify-center items-center", children: (0, jsx_runtime_1.jsx)(components_1.Logo, { size: 28 }) })
+                    (0, jsx_runtime_1.jsx)("span", { className: "w-40 h-40 flex justify-center items-center", children: (0, jsx_runtime_1.jsx)(components_1.Logo, { size: 28 }) })
                 // back/close
                 :
-                    (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: back === 'back' ? 'ArrowLeft' : 'X', onClick: onBack, disabled: disableBack }), (0, jsx_runtime_1.jsx)("ul", { className: "flex-1 flex items-center gap-l5", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: breadcrumbs.map((breadcrumb, index) => (0, jsx_runtime_1.jsxs)(react_1.motion.li, { className: "flex items-center gap-l5", variants: components_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit", layout: true, children: [index > 0 &&
+                    (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: backButton === 'back' ? 'ArrowLeft' : 'X', onClick: () => controller.onBack(), disabled: disableBack }), (0, jsx_runtime_1.jsx)("ul", { className: "flex-1 flex items-center gap-l5", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "popLayout", children: breadcrumbs.map((breadcrumb, index) => (0, jsx_runtime_1.jsxs)(react_1.motion.li, { className: "flex items-center gap-l5", variants: components_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit", layout: "position", children: [index > 0 &&
                                 (0, jsx_runtime_1.jsx)("span", { children: "/" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({ 'label-sm label-strong': highlightBreadcrumb && index === breadcrumbsEndIndex }), children: typeof breadcrumb === 'string'
                                     ?
                                         (0, jsx_runtime_1.jsx)("span", { children: breadcrumb })
                                     :
-                                        (0, jsx_runtime_1.jsx)(react_router_1.Link, { to: breadcrumb.url, children: breadcrumb.label }) })] }, index)) }) }), (0, jsx_runtime_1.jsx)("div", { className: "h-full flex items-center gap-l6", children: !hideControls && children })] }));
+                                        (0, jsx_runtime_1.jsx)(react_router_1.Link, { to: breadcrumb.url, children: breadcrumb.label }) })] }, typeof breadcrumb === 'string' ? `${breadcrumb}` : `${breadcrumb.label}`)) }) }), (0, jsx_runtime_1.jsx)("div", { className: "h-full flex items-center gap-l6", children: actions.map(action => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: action.components }, action.id)) })] }));
 }

package/dist/explore/components/header/HeaderActions.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { HeaderController } from './HeaderController';
+export declare function HeaderActions({ children: components, dependencies: dependenciesRaw, ...actionOptionsRaw }: HeaderActions.Props): null;
+export declare namespace HeaderActions {
+    type Props = PropsWithChildren & Omit<HeaderController.ActionsOptions, 'id' | 'components'> & {
+        dependencies?: ReadonlyArray<any>;
+    };
+}

package/dist/explore/components/header/HeaderActions.js

@@ -0,0 +1,37 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderActions = HeaderActions;
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
+const react_1 = require("react");
+const useHeader_1 = require("./useHeader");
+// component
+function HeaderActions(_a) {
+    var { children: components, dependencies: dependenciesRaw = [] } = _a, actionOptionsRaw = __rest(_a, ["children", "dependencies"]);
+    // bind hooks
+    const id = (0, react_1.useId)();
+    const controller = (0, useHeader_1.useHeader)();
+    const componentsRef = (0, react_1.useRef)(components);
+    const dependencies = (0, hooks_1.useLatestValue)(dependenciesRaw);
+    const actionOptions = (0, hooks_1.useLatestValue)(actionOptionsRaw);
+    // sync controller on mount
+    (0, react_1.useEffect)(() => {
+        // register
+        controller.registerActions(Object.assign({ id, components: componentsRef.current }, actionOptions));
+        // unregister on unmount
+        return () => controller.unregisterActions(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controller, id, actionOptions, ...dependencies]);
+    // render nothing
+    return null;
+}

package/dist/explore/components/header/HeaderContainer.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function HeaderContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/explore/components/header/HeaderContainer.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderContainer = HeaderContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const HeaderContext_1 = require("./HeaderContext");
+const HeaderController_1 = require("./HeaderController");
+// component
+function HeaderContainer({ children }) {
+    // create controller
+    const controller = (0, react_1.useMemo)(() => new HeaderController_1.HeaderController(), []);
+    const context = (0, react_1.useMemo)(() => ({ controller }), [controller]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(HeaderContext_1.HeaderContext.Provider, { value: context, children: children }));
+}

package/dist/explore/components/header/HeaderContext.d.ts

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

package/dist/explore/components/header/HeaderContext.js

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

package/dist/explore/components/header/HeaderController.d.ts

@@ -0,0 +1,39 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+import type { Header } from './Header';
+export declare class HeaderController {
+    private readonly _changed$;
+    private _breadcrumbs;
+    private _highlightBreadcrumb;
+    private _backButton;
+    private _disableBack;
+    private readonly _onBackHandlers;
+    private readonly _actions;
+    constructor();
+    get changed$(): import("rxjs").Observable<HeaderController.Change>;
+    get breadcrumbs(): ReadonlyArray<Header.Breadcrumb>;
+    set breadcrumbs(breadcrumbs: ReadonlyArray<Header.Breadcrumb>);
+    get highlightBreadcrumb(): boolean;
+    set highlightBreadcrumb(on: boolean);
+    get backButton(): HeaderController.BackButton;
+    set backButton(button: HeaderController.BackButton);
+    get disableBack(): boolean;
+    set disableBack(disabled: boolean);
+    registerOnBack(handler: HeaderController.OnBackHandler): HeaderController.Unsubscribe;
+    get actions(): HeaderController.ActionsOptions[];
+    registerActions(options: HeaderController.ActionsOptions): void;
+    unregisterActions(clientId: string): void;
+    onBack(): void;
+    private raiseChanged;
+}
+export declare namespace HeaderController {
+    type Change = 'breadcrumbs' | 'highlightBreadcrumb' | 'backButton' | 'disableBack' | 'onBack' | 'actions';
+    type BackButton = 'none' | 'back' | 'close';
+    type OnBackHandler = (stopPropagation: Callback.Void) => void;
+    type Unsubscribe = Callback.Void;
+    type ActionsOptions = {
+        id: string;
+        priority?: number;
+        components: ReactNode;
+    };
+}

package/dist/explore/components/header/HeaderController.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderController = void 0;
+const rxjs_1 = require("rxjs");
+// class
+class HeaderController {
+    constructor() {
+        // initialize instance variables
+        this._changed$ = new rxjs_1.Subject();
+        this._breadcrumbs = [];
+        this._highlightBreadcrumb = false;
+        this._backButton = 'none';
+        this._disableBack = false;
+        this._onBackHandlers = [];
+        this._actions = new Map();
+    }
+    get changed$() {
+        return this._changed$.asObservable();
+    }
+    get breadcrumbs() {
+        return this._breadcrumbs;
+    }
+    set breadcrumbs(breadcrumbs) {
+        this._breadcrumbs = breadcrumbs;
+        this.raiseChanged('breadcrumbs');
+    }
+    get highlightBreadcrumb() {
+        return this._highlightBreadcrumb;
+    }
+    set highlightBreadcrumb(on) {
+        this._highlightBreadcrumb = on;
+        this.raiseChanged('highlightBreadcrumb');
+    }
+    get backButton() {
+        return this._backButton;
+    }
+    set backButton(button) {
+        this._backButton = button;
+        this.raiseChanged('backButton');
+    }
+    get disableBack() {
+        return this._disableBack;
+    }
+    set disableBack(disabled) {
+        this._disableBack = disabled;
+        this.raiseChanged('disableBack');
+    }
+    registerOnBack(handler) {
+        // register handler
+        this._onBackHandlers.push(handler);
+        this.raiseChanged('onBack');
+        // return unsubscribe
+        return () => {
+            const handlerIndex = this._onBackHandlers.indexOf(handler);
+            if (handlerIndex >= 0) {
+                this._onBackHandlers.splice(handlerIndex, 1);
+            }
+        };
+    }
+    get actions() {
+        return this._actions.values().toArray().sort((lhs, rhs) => {
+            var _a, _b;
+            const lhsPriority = (_a = lhs.priority) !== null && _a !== void 0 ? _a : 0;
+            const rhsPriority = (_b = rhs.priority) !== null && _b !== void 0 ? _b : 0;
+            return lhsPriority === rhsPriority
+                ? 0
+                : lhsPriority < rhsPriority
+                    ? -1
+                    : 1;
+        });
+    }
+    registerActions(options) {
+        this._actions.set(options.id, options);
+        this.raiseChanged('actions');
+    }
+    unregisterActions(clientId) {
+        this._actions.delete(clientId);
+        this.raiseChanged('actions');
+    }
+    onBack() {
+        // create handbrake
+        let stopped = false;
+        const onStop = () => {
+            stopped = true;
+        };
+        // invoke handlers until complete
+        for (const handler of this._onBackHandlers) {
+            // invoke handler
+            handler(onStop);
+            // exit if stopped
+            if (stopped) {
+                break;
+            }
+        }
+    }
+    raiseChanged(change) {
+        this._changed$.next(change);
+    }
+}
+exports.HeaderController = HeaderController;

package/dist/explore/components/header/HeaderOptions.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { HeaderController } from './HeaderController';
+export declare function HeaderOptions({ breadcrumbs: breadCrumbsRaw, highlightBreadcrumb, backButton, disableBack, onBack }: HeaderOptions.Props): null;
+export declare namespace HeaderOptions {
+    type Props = Pick<Partial<HeaderController>, 'breadcrumbs' | 'highlightBreadcrumb' | 'backButton' | 'disableBack'> & {
+        onBack?: HeaderController.OnBackHandler;
+        actionsPriority?: number;
+        actions?: ReactNode;
+    };
+}

package/dist/explore/components/header/HeaderOptions.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderOptions = HeaderOptions;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
+const react_1 = require("react");
+const useHeader_1 = require("./useHeader");
+// component
+function HeaderOptions({ breadcrumbs: breadCrumbsRaw = [], highlightBreadcrumb = false, backButton = 'none', disableBack = false, onBack = funnel_core_1.Fn.NoOp }) {
+    // bind hooks
+    const controller = (0, useHeader_1.useHeader)();
+    const breadcrumbs = (0, hooks_1.useLatestValue)(breadCrumbsRaw);
+    const onBackRef = (0, react_1.useRef)(onBack);
+    // sync controller on mount
+    (0, react_1.useEffect)(() => {
+        // update breadcrumbs
+        controller.breadcrumbs = breadcrumbs;
+        controller.highlightBreadcrumb = highlightBreadcrumb;
+        controller.backButton = backButton;
+        controller.disableBack = disableBack;
+        // register back handler (unsubscribe on unmount)
+        return controller.registerOnBack(onStop => onBackRef.current(onStop));
+    }, [controller, breadcrumbs, highlightBreadcrumb, backButton, disableBack]);
+    // render nothing
+    return null;
+}

package/dist/explore/components/header/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Header';
+export * from './HeaderActions';
+export * from './HeaderContainer';
+export * from './HeaderOptions';
+export * from './useHeader';

package/dist/{core/contentful → explore/components/header}/index.js

@@ -14,8 +14,8 @@ 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("./Contentful"), exports);
-__exportStar(require("./ContentfulAsset"), exports);
-__exportStar(require("./ContentfulCollection"), exports);
-__exportStar(require("./ContentfulPage"), exports);
-__exportStar(require("./ContentfulRefs"), exports);
+__exportStar(require("./Header"), exports);
+__exportStar(require("./HeaderActions"), exports);
+__exportStar(require("./HeaderContainer"), exports);
+__exportStar(require("./HeaderOptions"), exports);
+__exportStar(require("./useHeader"), exports);

package/dist/explore/components/header/useHeader.d.ts

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

package/dist/explore/components/header/useHeader.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHeader = useHeader;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
+const react_1 = require("react");
+const HeaderContext_1 = require("./HeaderContext");
+// hook
+function useHeader() {
+    // bind hooks
+    const { controller } = (0, react_1.useContext)(HeaderContext_1.HeaderContext);
+    const touch = (0, hooks_1.useTouch)();
+    // sync on controller update
+    (0, react_1.useEffect)(() => {
+        // skip if not bound
+        if (!controller) {
+            return;
+        }
+        // listen to changes
+        const subscription = controller.changed$.subscribe(touch);
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [controller, touch]);
+    // throw if there's no controller
+    if (!controller) {
+        throw new funnel_core_1.InvalidOperationError('Cannot access HeaderController outside of HeaderContainer');
+    }
+    // return controller
+    return controller;
+}

package/dist/explore/components/index.d.ts

@@ -1 +1,2 @@
-export * from './Header';
+export * from './header/index';
+export * from './pages';

package/dist/explore/components/index.js

@@ -14,4 +14,5 @@ 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("./Header"), exports);
+__exportStar(require("./header/index"), exports);
+__exportStar(require("./pages"), exports);

package/dist/explore/components/pages/PagesExplorerLayout.d.ts

@@ -0,0 +1,4 @@
+export declare function PagesExplorerLayout(): import("react/jsx-runtime").JSX.Element;
+export declare namespace PagesExplorerLayout {
+    type Params = 'region';
+}

package/dist/explore/components/pages/PagesExplorerLayout.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagesExplorerLayout = PagesExplorerLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 screens_1 = require("../../screens");
+const index_1 = require("../header/index");
+// layout
+function PagesExplorerLayout() {
+    // bind hooks + context
+    const navigate = (0, react_router_1.useNavigate)();
+    const { region: possibleRegion } = (0, react_router_1.useParams)();
+    const { regionalization } = funnel_core_1.AppConfig.brandConfig();
+    const regions = (0, react_1.useMemo)(() => Object.entries(regionalization.regions)
+        .map(([region, config]) => ({ id: region, label: config.name })), [regionalization]);
+    const region = possibleRegion !== null && possibleRegion !== void 0 ? possibleRegion : funnel_core_1.RegionsConfig.getDefaultRegion(regionalization);
+    const appState = (0, components_1.useAppState)();
+    const pageRepository = (0, components_1.usePageRepository)();
+    const siteContext = (0, react_1.useMemo)(() => {
+        const site = new components_1.Site({ appState, repository: pageRepository, region });
+        return { site };
+    }, [appState, pageRepository, region]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)(components_1.SiteContext.Provider, { value: siteContext, children: [(0, jsx_runtime_1.jsx)(index_1.HeaderActions, { priority: 10, children: (0, jsx_runtime_1.jsx)(components_1.Combobox, { options: regions, selectedOption: region, onSelect: region => navigate(screens_1.PagesExplorer.getUrl({ region })), size: "sm" }) }), (0, jsx_runtime_1.jsx)(react_router_1.Outlet, {})] }));
+}

package/dist/explore/components/pages/index.d.ts

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

package/dist/{core/repository → explore/components/pages}/index.js

@@ -14,7 +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("./LocalCollectionRepository"), exports);
-__exportStar(require("./LocalPageRepository"), exports);
-__exportStar(require("./RemoteCollectionRepository"), exports);
-__exportStar(require("./RemotePageRepository"), exports);
+__exportStar(require("./PagesExplorerLayout"), exports);

package/dist/explore/index.d.ts

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

package/dist/explore/index.js

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

package/dist/explore/screens/Dashboard.d.ts

@@ -1 +1,4 @@
 export declare function Dashboard(): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dashboard {
+    function getUrl(): string;
+}