@nascentdigital/funnel-editor 4.4.18

package/dist/page/hooks/PageController.d.ts

@@ -0,0 +1,68 @@
+import { EventBus, Language, Schema } from '@nascentdigital/funnel-core';
+import { AppState, EditorApiClient, Page, PageRepository, PageSummary } from '../../core';
+export declare class PageController {
+    private readonly _eventBus;
+    readonly appState: AppState;
+    readonly repository: PageRepository;
+    private _state;
+    private _target?;
+    private _pageSummary?;
+    private _page?;
+    private _pageSubscription?;
+    private _saveQueuedFor?;
+    constructor({ appState, editorApi }: PageController.ConstructorArgs);
+    get events$(): import("rxjs").Observable<Page.Event | PageController.Event>;
+    get saved$(): import("rxjs").Observable<[PageController.StateChangedEvent, PageController.StateChangedEvent]>;
+    get state(): PageController.State;
+    private set state(value);
+    get ready(): boolean;
+    get target(): PageController.Target;
+    get region(): string;
+    get language(): "id" | "is" | "tw" | "cy" | "fr" | "fy" | "to" | "br" | "hr" | "li" | "th" | "tr" | "no" | "aa" | "ab" | "ae" | "af" | "ak" | "am" | "an" | "ar" | "as" | "av" | "ay" | "az" | "ba" | "be" | "bg" | "bh" | "bi" | "bm" | "bn" | "bo" | "bs" | "ca" | "ce" | "ch" | "co" | "cr" | "cs" | "cu" | "cv" | "da" | "de" | "dv" | "dz" | "ee" | "el" | "en" | "eo" | "es" | "et" | "eu" | "fa" | "ff" | "fi" | "fj" | "fo" | "ga" | "gd" | "gl" | "gn" | "gu" | "gv" | "ha" | "he" | "hi" | "ho" | "ht" | "hu" | "hy" | "hz" | "ia" | "ie" | "ig" | "ii" | "ik" | "io" | "it" | "iu" | "ja" | "jv" | "ka" | "kg" | "ki" | "kj" | "kk" | "kl" | "km" | "kn" | "ko" | "kr" | "ks" | "ku" | "kv" | "kw" | "ky" | "la" | "lb" | "lg" | "ln" | "lo" | "lt" | "lu" | "lv" | "mg" | "mh" | "mi" | "mk" | "ml" | "mn" | "mr" | "ms" | "mt" | "my" | "na" | "nb" | "nd" | "ne" | "ng" | "nl" | "nn" | "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" | "ti" | "tk" | "tl" | "tn" | "ts" | "tt" | "ty" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "wo" | "xh" | "yi" | "yo" | "za" | "zh" | "zu";
+    get languages(): ("id" | "is" | "tw" | "cy" | "fr" | "fy" | "to" | "br" | "hr" | "li" | "th" | "tr" | "no" | "aa" | "ab" | "ae" | "af" | "ak" | "am" | "an" | "ar" | "as" | "av" | "ay" | "az" | "ba" | "be" | "bg" | "bh" | "bi" | "bm" | "bn" | "bo" | "bs" | "ca" | "ce" | "ch" | "co" | "cr" | "cs" | "cu" | "cv" | "da" | "de" | "dv" | "dz" | "ee" | "el" | "en" | "eo" | "es" | "et" | "eu" | "fa" | "ff" | "fi" | "fj" | "fo" | "ga" | "gd" | "gl" | "gn" | "gu" | "gv" | "ha" | "he" | "hi" | "ho" | "ht" | "hu" | "hy" | "hz" | "ia" | "ie" | "ig" | "ii" | "ik" | "io" | "it" | "iu" | "ja" | "jv" | "ka" | "kg" | "ki" | "kj" | "kk" | "kl" | "km" | "kn" | "ko" | "kr" | "ks" | "ku" | "kv" | "kw" | "ky" | "la" | "lb" | "lg" | "ln" | "lo" | "lt" | "lu" | "lv" | "mg" | "mh" | "mi" | "mk" | "ml" | "mn" | "mr" | "ms" | "mt" | "my" | "na" | "nb" | "nd" | "ne" | "ng" | "nl" | "nn" | "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" | "ti" | "tk" | "tl" | "tn" | "ts" | "tt" | "ty" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "wo" | "xh" | "yi" | "yo" | "za" | "zh" | "zu")[];
+    get templates(): Schema.Site.Pages;
+    get currentTemplate(): Schema.Page<Schema.Page.Content, string>;
+    get pageTarget(): PageController.Target | undefined;
+    get pageSummary(): PageSummary | undefined;
+    private set pageSummary(value);
+    get page(): Page | undefined;
+    private set page(value);
+    load(target: PageController.Target): Promise<void>;
+    reload(): Promise<void>;
+    create(target: PageController.Target): Promise<void>;
+    save(): Promise<void>;
+    unpublish(): Promise<void>;
+    private raiseEvent;
+}
+export declare namespace PageController {
+    type State = 'uninitialized' | 'initializing' | 'loading' | 'ready' | 'saving' | 'unpublishing' | 'error';
+    type Target = {
+        brand: string;
+        templates: Schema.Site.Pages;
+        template: Schema.Page;
+        region: string;
+        slug?: string;
+        language: Language;
+    };
+    type ConstructorArgs = {
+        appState: AppState;
+        editorApi: EditorApiClient;
+    };
+    interface Event extends EventBus.Event<'PageController', Event.Type> {
+        controller: PageController;
+    }
+    namespace Event {
+        type Type = 'pageSummary.changed' | 'page.changed';
+        function filter(event: EventBus.Event): event is Event;
+        function create(event: EventBus.Args<Event>): Event;
+    }
+    interface StateChangedEvent extends EventBus.Event<'PageController', StateChangedEvent.Type> {
+        controller: PageController;
+        state: State;
+    }
+    namespace StateChangedEvent {
+        type Type = 'state.changed';
+        function filter(event: EventBus.Event): event is StateChangedEvent;
+        function create(event: Omit<EventBus.Args<StateChangedEvent>, 'type'>): StateChangedEvent;
+    }
+}

package/dist/page/hooks/PageController.js

@@ -0,0 +1,359 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageController = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const rxjs_1 = require("rxjs");
+const core_1 = require("../../core");
+// class
+class PageController {
+    constructor({ appState, editorApi }) {
+        // initialize instance variables
+        this._eventBus = new funnel_core_1.EventBus();
+        this.appState = appState;
+        this.repository = new core_1.PageRepository(editorApi);
+        this._state = 'uninitialized';
+    }
+    get events$() {
+        return this._eventBus.events$
+            .pipe((0, rxjs_1.filter)(e => PageController.Event.filter(e) || core_1.Page.Event.filter(e)));
+    }
+    get saved$() {
+        return this._eventBus.events$.pipe((0, rxjs_1.filter)(PageController.StateChangedEvent.filter), (0, rxjs_1.pairwise)(), (0, rxjs_1.filter)(([previous, current]) => previous.state === 'saving' && current.state === 'ready'));
+    }
+    get state() {
+        return this._state;
+    }
+    set state(value) {
+        // skip if unchanged
+        if (this._state === value) {
+            return;
+        }
+        // or update
+        this._state = value;
+        // raise event
+        this._eventBus.publish(PageController.StateChangedEvent.create({
+            state: value,
+            controller: this
+        }));
+        // save again if it's queued for the same page
+        if (this._saveQueuedFor && this._saveQueuedFor === this._page) {
+            console.debug('[PageController/setState] initiating queued save');
+            this.save().catch(console.error);
+        }
+    }
+    get ready() {
+        const { _state } = this;
+        return _state !== 'uninitialized' && _state !== 'initializing';
+    }
+    get target() {
+        // throw if there's no target
+        const { _target } = this;
+        if (!_target) {
+            throw new funnel_core_1.InvalidOperationError('Attempt to access PageController.target before load');
+        }
+        // return target
+        return _target;
+    }
+    get region() {
+        return this.target.region;
+    }
+    get language() {
+        return this.target.language;
+    }
+    get languages() {
+        // empty array if we're not loaded
+        const { _target } = this;
+        if (!_target) {
+            return [];
+        }
+        // return all languages
+        const brand = funnel_core_1.AppConfig.brandConfig();
+        return brand.regionalization.regions[_target.region].languages;
+    }
+    get templates() {
+        return this.target.templates;
+    }
+    get currentTemplate() {
+        return this.target.template;
+    }
+    get pageTarget() {
+        return this._target;
+    }
+    get pageSummary() {
+        return this._pageSummary;
+    }
+    set pageSummary(pageSummary) {
+        // skip if summary is the same
+        if (this._pageSummary === pageSummary) {
+            return;
+        }
+        // update summary
+        this._pageSummary = pageSummary;
+        // raise event
+        this.raiseEvent('pageSummary.changed');
+    }
+    get page() {
+        return this._page;
+    }
+    set page(page) {
+        // skip if page is the same
+        if (this._page === page) {
+            return;
+        }
+        // unbind previous page subscription (if any)
+        if (this._pageSubscription) {
+            this._pageSubscription.unsubscribe();
+            delete this._pageSubscription;
+        }
+        // update page
+        this._page = page;
+        // subscribe to page changes (if there's a page)
+        if (page) {
+            // subscribe to events
+            this._pageSubscription = page.events$
+                .pipe((0, rxjs_1.filter)(e => {
+                // handle page events
+                if (core_1.Page.Event.filter(e)) {
+                    return e.type === 'modified';
+                }
+                // or item/object/list events
+                else if (core_1.Item.Event.filter(e)
+                    || core_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 ((core_1.Page.Event.filter(e) && e.type === 'modified')
+                    || core_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 (event) => {
+                if (page.modified && this._page === page) {
+                    console.debug('[PageController/setPage] save triggered by change event', event);
+                    await this.save();
+                }
+            });
+            // save page immediately if modified (this is a re-entrant call, so we can't await it - trust me)
+            if (page.modified) {
+                console.trace('[PageController/setPage] save triggered by page modification', page);
+                this.save().catch(console.error);
+            }
+        }
+        console.debug('[PageController/setPage] updated page', page);
+        // raise state change
+        this.raiseEvent('page.changed');
+    }
+    async load(target) {
+        var _a;
+        // bind target
+        this._target = target;
+        // TODO: should we block load based on some state?
+        // mark as loading (or initialing if loading for first time)
+        this.state = this._state === 'uninitialized'
+            ? 'initializing'
+            : 'loading';
+        // try to fetch new page
+        try {
+            // load summary/page
+            const { summary, page } = (_a = await this.repository.load(Object.assign(Object.assign({}, target), { eventBus: this._eventBus }))) !== null && _a !== void 0 ? _a : {};
+            console.debug('[PageController] loaded', { summary, page });
+            // (re)bind data
+            this.pageSummary = summary;
+            this.page = page;
+            // update state
+            this.state = 'ready';
+        }
+        // handle load error
+        catch (e) {
+            console.error('[PageController] failed to load page', e);
+            // TODO: expose error
+            // set error state
+            this.state = 'error';
+        }
+    }
+    reload() {
+        // mark uninitialized
+        this.state = 'uninitialized';
+        // reload
+        return this.load(this.target);
+    }
+    async create(target) {
+        // bind target
+        this._target = target;
+        // TODO: should we block load based on some state?
+        // mark as loading (or initialing if loading for first time)
+        this.state = this._state === 'uninitialized'
+            ? 'initializing'
+            : 'loading';
+        // try to fetch new page
+        try {
+            // create page (use existing group if it's in the target scope)
+            const eventBus = this._eventBus;
+            const existingSummary = this._pageSummary;
+            let result;
+            if (existingSummary
+                && existingSummary.isInGroup(target)
+                && existingSummary.groupId !== funnel_core_1.Schema.Page.GroupId.empty) {
+                const { template, slug, language } = target;
+                result = await this.repository.createLanguage({
+                    template,
+                    groupId: existingSummary.groupId,
+                    slug,
+                    language,
+                    eventBus
+                });
+            }
+            // or create a new page
+            else {
+                result = await this.repository.create(Object.assign(Object.assign({}, target), { tags: [], eventBus }));
+            }
+            console.debug('[PageController] created', result);
+            // (re)bind data
+            this.pageSummary = result.summary;
+            this.page = result.page;
+            // update state
+            this.state = 'ready';
+            // raise event
+            if (result.page) {
+                this.appState.onPageCreated(result.page);
+            }
+        }
+        // handle load error
+        catch (e) {
+            console.error('[PageController] failed to create page', e);
+            // TODO: expose error
+            // set error state
+            this.state = 'error';
+        }
+    }
+    async save() {
+        // throw if there's no page (shouldn't happen)
+        const page = this._page;
+        if (page === undefined) {
+            console.error('[PageController/save] cannot resolve page in "ready" state');
+            throw new funnel_core_1.IllegalStateError('Page unavailable in "ready" state');
+        }
+        // ignore if not ready
+        else if (this._state !== 'ready') {
+            console.debug(`[PageController/save] queuing save while in "${this._state}" state`);
+            this._saveQueuedFor = page;
+            return;
+        }
+        // clear save if queued
+        delete this._saveQueuedFor;
+        // skip if page isn't modified
+        if (!page.modified) {
+            console.debug('[PageController/save] ignore unmodified page');
+            return;
+        }
+        // try to save
+        try {
+            console.debug('[PageController/save] starting save');
+            // start page sync
+            page.syncing = true;
+            // update state
+            this.state = 'saving';
+            // sync page
+            page.sync();
+            // save page
+            const updatedPage = await this.repository.save(page);
+            this.page = updatedPage;
+            console.debug('[PageController/save] page saved', { modified: page.modified, page, controller: this });
+            // update state
+            this.state = 'ready';
+            // raise event
+            this.appState.onPageCreated(updatedPage);
+        }
+        // handle error
+        catch (e) {
+            console.error('[PageController/save] save failed', e);
+            // update state
+            this.state = 'error';
+            // TODO: how do we communicate errors to the app?
+        }
+        // end page sync
+        finally {
+            page.syncing = false;
+        }
+    }
+    async unpublish() {
+        // throw if there's no page (shouldn't happen)
+        const page = this._page;
+        if (page === undefined) {
+            console.error('[PageController/unpublish] cannot resolve page');
+            throw new funnel_core_1.IllegalStateError('Page is not found');
+        }
+        // throw if in an invalid state
+        else if (this._state !== 'ready') {
+            console.error('[PageController/unpublish] attempt to unpublish outside of "ready" state');
+            throw new funnel_core_1.IllegalStateError('Page cannot be unpublished outside of "ready" state');
+        }
+        // try to publish
+        try {
+            console.debug('[PageController/unpublish] unpublishing');
+            // start sync
+            page.syncing = true;
+            // change state
+            this.state = 'unpublishing';
+            // unpublish (and re-bind)
+            await this.repository.unpublish(page);
+            console.debug('[PageController/unpublish] unpublish complete');
+            // mark as ready
+            this.state = 'ready';
+        }
+        // handle errors
+        catch (e) {
+            console.error('[PageController/unpublish] save failed');
+            // update state
+            this.state = 'ready';
+            // rethrow error
+            throw e;
+        }
+        // end sync
+        finally {
+            page.syncing = false;
+        }
+    }
+    raiseEvent(type) {
+        this._eventBus.publish(PageController.Event.create({ type, controller: this }));
+    }
+}
+exports.PageController = PageController;
+// extensions
+(function (PageController) {
+    let Event;
+    (function (Event) {
+        // methods
+        function filter(event) {
+            return event.domain === 'PageController';
+        }
+        Event.filter = filter;
+        function create(event) {
+            return funnel_core_1.EventBus.createEvent(Object.assign({ domain: 'PageController' }, event));
+        }
+        Event.create = create;
+    })(Event = PageController.Event || (PageController.Event = {}));
+    let StateChangedEvent;
+    (function (StateChangedEvent) {
+        // methods
+        function filter(event) {
+            return event.domain === 'PageController' && event.type === 'state.changed';
+        }
+        StateChangedEvent.filter = filter;
+        function create(event) {
+            return funnel_core_1.EventBus.createEvent(Object.assign({ domain: 'PageController', type: 'state.changed' }, event));
+        }
+        StateChangedEvent.create = create;
+    })(StateChangedEvent = PageController.StateChangedEvent || (PageController.StateChangedEvent = {}));
+})(PageController || (exports.PageController = PageController = {}));

package/dist/page/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageController';
+export * from './usePageController';

package/dist/page/hooks/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("./PageController"), exports);
+__exportStar(require("./usePageController"), exports);

package/dist/page/hooks/usePageController.d.ts

@@ -0,0 +1,8 @@
+import { PageController } from './PageController';
+export declare function usePageController(pageController?: PageController): PageController;
+export declare const PageControllerContext: import("react").Context<PageControllerContext.Type>;
+export declare namespace PageControllerContext {
+    type Type = {
+        controller: PageController;
+    };
+}

package/dist/page/hooks/usePageController.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageControllerContext = void 0;
+exports.usePageController = usePageController;
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const react_1 = require("react");
+// hook
+function usePageController(pageController) {
+    // bind context + touch
+    const context = (0, react_1.useContext)(exports.PageControllerContext);
+    const touch = (0, client_1.useTouch)();
+    const controller = pageController !== null && pageController !== void 0 ? pageController : context.controller;
+    // listen to page controller changes
+    (0, react_1.useEffect)(() => {
+        // subscribe to changes
+        const subscription = controller.events$.subscribe(() => touch());
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [controller, touch]);
+    // return controller
+    return controller;
+}
+// context
+exports.PageControllerContext = (0, react_1.createContext)({});

package/dist/page/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+export * from './screens';

package/dist/page/index.js

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

package/dist/page/screens/PageEditor.d.ts

@@ -0,0 +1,10 @@
+import { Language, Schema } from '@nascentdigital/funnel-core';
+export declare function PageEditor({ templateId, region, language, slug }: PageEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageEditor {
+    type Props = {
+        templateId: Schema.Page.Type;
+        slug?: string;
+        region: string;
+        language: Language;
+    };
+}

package/dist/page/screens/PageEditor.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEditor = PageEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const core_1 = require("../../core");
+const components_1 = require("../components");
+const hooks_1 = require("../hooks");
+// component
+function PageEditor({ templateId, region, language, slug }) {
+    // bind data + hooks
+    const [itemId, setItemId] = (0, react_2.useState)();
+    const appState = (0, core_1.useAppState)();
+    const splash = (0, core_1.useSplash)();
+    const router = (0, core_1.useEditorRouter)();
+    const target = (0, react_2.useMemo)(() => coerceTarget({ templateId, slug, region, language }), [templateId, slug, region, language]);
+    const editorApi = (0, core_1.useEditorApi)();
+    const { controller, controllerContext } = (0, react_2.useMemo)(() => {
+        // return controller + context
+        const controller = new hooks_1.PageController({ appState, editorApi });
+        return {
+            controller,
+            controllerContext: { controller }
+        };
+    }, [appState, editorApi]);
+    const { page } = controller;
+    const pageContext = (0, react_2.useMemo)(() => ({ page }), [page]);
+    const selectedItem = (0, react_2.useMemo)(() => page === null || page === void 0 ? void 0 : page.coerceItem(itemId), [page, itemId]);
+    const pageRefStoreProxy = (0, react_2.useMemo)(() => new core_1.PageRefStoreProxy({ language, editorApi }), [editorApi, language]);
+    // load any needed page refs
+    (0, react_2.useEffect)(() => {
+        // bail if no page
+        if (!page) {
+            return;
+        }
+        // load needed page refs
+        pageRefStoreProxy
+            .bindParent(page)
+            .load(page.collections.flatMap(col => { var _a; return (_a = col.pageIds) !== null && _a !== void 0 ? _a : []; }))
+            .catch(console.error);
+    }, [pageRefStoreProxy, page]);
+    // sync with controller
+    (0, hooks_1.usePageController)(controller);
+    // (re)load controller when target changes
+    (0, react_2.useEffect)(() => {
+        controller.load(target)
+            .then(() => splash.dismiss())
+            .catch(console.error);
+    }, [controller, target, splash]);
+    // redirect if page target doesn't match slug (caused by rename)
+    (0, react_2.useEffect)(() => {
+        if (page && page.hasSlug && page.slug !== slug) {
+            const { type, region, language, slug } = page;
+            router.navigateToPage({ page: type, region, language, slug })
+                .catch(console.error);
+        }
+    }, [router, page, slug]);
+    // helpers
+    const onHeaderBack = async () => {
+        // navigate back to page list if it's a dynamic page
+        const { region, template, slug } = target;
+        if (slug) {
+            await router.navigateToPages({ region, page: template.type });
+        }
+        // or navigate back to template list
+        else {
+            await router.navigateToTemplates({ region });
+        }
+    };
+    const onSelectItem = (item) => setItemId(item.identifier);
+    // render
+    return ((0, jsx_runtime_1.jsx)(hooks_1.PageControllerContext.Provider, { value: controllerContext, children: (0, jsx_runtime_1.jsx)(core_1.PageContext.Provider, { value: pageContext, children: (0, jsx_runtime_1.jsx)(core_1.AssetStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.CollectionStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.PageRefStoreContext.Provider, { value: pageRefStoreProxy, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-background", children: [(0, jsx_runtime_1.jsx)(components_1.PageHeader, { target: target, selectedItem: selectedItem, onBack: onHeaderBack }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)("section", { className: "w-[220px] lg:w-[240px] xl:w-[280px] shrink-0 overflow-y-scroll scrollbar-thin", children: (0, jsx_runtime_1.jsx)(components_1.PageNav, { selectedItem: selectedItem, onSelectItem: onSelectItem }) }), (0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full max-w-[1000px] mx-auto", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", initial: false, children: renderContent({ target, controller, page, selectedItem, onSelectItem }) }) }), (0, jsx_runtime_1.jsx)("section", { className: "hidden lg:block lg:w-[320px] shrink-0 overflow-y-scroll scrollbar-thin", children: (0, jsx_runtime_1.jsx)(components_1.PageStatus, { selectedItem: selectedItem, onSelectItem: onSelectItem }) })] }) })] }) }) }) }) }) }));
+}
+// helpers
+function coerceTarget({ templateId, slug, region, language }) {
+    // resolve template (or throw)
+    const schema = funnel_core_1.Schema.Site.current();
+    const templates = schema.regions[region];
+    const template = templates[templateId];
+    if (!template) {
+        throw new funnel_core_1.ArgumentError(`Unable to resolve template: ${templateId}`);
+    }
+    // ensure we have a brand
+    const brand = funnel_core_1.AppConfig.brand();
+    // return target
+    return {
+        brand,
+        templates,
+        template,
+        slug,
+        region,
+        language
+    };
+}
+function renderContent({ target, controller, page, selectedItem, onSelectItem }) {
+    // show loader if not ready
+    const { pageSummary } = controller;
+    if (!controller.ready) {
+        return (0, jsx_runtime_1.jsx)(core_1.Loader, {}, "loader");
+    }
+    // show not found if there's no group
+    else if (!pageSummary || (!pageSummary.hasPages && pageSummary.variant !== 'static')) {
+        return ((0, jsx_runtime_1.jsx)(core_1.EmptyState, { variant: "missing", size: "md", children: "Oops!  This page doesn't seem to exist..." }));
+    }
+    // or handle case where page doesn't exist
+    else if (!page) {
+        return ((0, jsx_runtime_1.jsx)(core_1.FadeIn, { children: !controller.pageSummary && target.template.variant === 'dynamic'
+                // render not found if there's no summary and it's a dynamic page
+                ? (0, jsx_runtime_1.jsx)(components_1.PageNotFound, { target: target })
+                // or render not created if we can create the page from here
+                : (0, jsx_runtime_1.jsx)(components_1.PageNotCreated, { target: target }) }, target.language));
+    }
+    // or render loader if we don't have an item selected
+    else if (!selectedItem || selectedItem instanceof core_1.Section) {
+        return null;
+    }
+    // or settings editor
+    else if (selectedItem instanceof core_1.PageSettings) {
+        return ((0, jsx_runtime_1.jsx)(core_1.FadeIn, { className: "h-full max-h-full", children: (0, jsx_runtime_1.jsx)(components_1.SettingsEditor, { className: "h-full max-h-full" }) }, selectedItem.identifier));
+    }
+    // or render block editor
+    else {
+        return ((0, jsx_runtime_1.jsx)(core_1.FadeIn, { className: "h-full max-h-full", children: (0, jsx_runtime_1.jsx)(components_1.BlockEditor, { className: "h-full max-h-full", block: selectedItem, onSelectItem: onSelectItem }) }, selectedItem.identifier));
+    }
+}

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

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