@nascentdigital/funnel-editor 4.4.18

package/dist/core/settings/Settings.d.ts

@@ -0,0 +1,31 @@
+import { ColorMode, EventBus } from '@nascentdigital/funnel-core';
+import { Observable } from 'rxjs';
+export declare class Settings {
+    private readonly _eventBus;
+    private _colorMode;
+    constructor();
+    get events$(): Observable<Settings.Event>;
+    get colorMode(): Settings.ColorMode;
+    set colorMode(colorMode: Settings.ColorMode);
+    get color(): ColorMode;
+    clear(): void;
+    private save;
+    private raiseEvent;
+    private static getDefaults;
+    private static loadData;
+    private static saveData;
+}
+export declare namespace Settings {
+    type Data = {
+        colorMode: ColorMode;
+    };
+    type ColorMode = 'system' | 'light' | 'dark';
+    interface Event extends EventBus.Event<'Settings', Event.Type> {
+        settings: Settings;
+    }
+    namespace Event {
+        type Type = 'changed';
+        function filter(event: EventBus.Event): event is Event;
+        function create(event: EventBus.Args<Event>): Event;
+    }
+}

package/dist/core/settings/Settings.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Settings = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const rxjs_1 = require("rxjs");
+// class
+class Settings {
+    constructor() {
+        // initialize instance variables
+        this._eventBus = new funnel_core_1.EventBus();
+        // load saved settings
+        const { colorMode = 'system' } = Settings.loadData();
+        this._colorMode = colorMode;
+        // listen to system changes for color
+        funnel_core_1.ColorMode.current$()
+            .pipe((0, rxjs_1.filter)(() => this._colorMode === 'system'))
+            .subscribe(() => this.raiseEvent('changed'));
+    }
+    get events$() {
+        return this._eventBus.events$;
+    }
+    get colorMode() {
+        return this._colorMode;
+    }
+    set colorMode(colorMode) {
+        // skip if unchanged
+        if (this._colorMode === colorMode) {
+            return;
+        }
+        // update + persist
+        this._colorMode = colorMode;
+        this.save();
+        // raise change
+        this.raiseEvent('changed');
+    }
+    get color() {
+        const { _colorMode } = this;
+        return _colorMode === 'system'
+            ? funnel_core_1.ColorMode.current()
+            : _colorMode;
+    }
+    clear() {
+        localStorage.removeItem(SETTINGS_STORAGE_KEY);
+    }
+    save() {
+        const { colorMode } = this;
+        Settings.saveData({ colorMode });
+    }
+    raiseEvent(type) {
+        this._eventBus.publish(Settings.Event.create({ type, settings: this }));
+    }
+    static getDefaults() {
+        return {
+            colorMode: 'system'
+        };
+    }
+    static loadData() {
+        var _a;
+        // load settings (or create it)
+        const storedData = JSON.parse((_a = localStorage.getItem(SETTINGS_STORAGE_KEY)) !== null && _a !== void 0 ? _a : '{}');
+        // return merged (handles upgrades)
+        return Object.assign(Object.assign({}, Settings.getDefaults()), storedData);
+    }
+    static saveData(data) {
+        // persist
+        localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(data));
+    }
+}
+exports.Settings = Settings;
+// extension
+(function (Settings) {
+    let Event;
+    (function (Event) {
+        // methods
+        function filter(event) {
+            return event.domain === 'Settings';
+        }
+        Event.filter = filter;
+        function create(event) {
+            return funnel_core_1.EventBus.createEvent(Object.assign({ domain: 'Settings' }, event));
+        }
+        Event.create = create;
+    })(Event = Settings.Event || (Settings.Event = {}));
+})(Settings || (exports.Settings = Settings = {}));
+// helpers
+const SETTINGS_STORAGE_KEY = '_funnel.settings';

package/dist/core/settings/SettingsContainer.d.ts

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

package/dist/core/settings/SettingsContainer.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsContainer = SettingsContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const Settings_1 = require("./Settings");
+const SettingsContext_1 = require("./SettingsContext");
+// component
+function SettingsContainer({ children }) {
+    // bind hooks + memo
+    const settings = (0, react_1.useMemo)(() => new Settings_1.Settings(), []);
+    const [context, setContext] = (0, react_1.useState)(() => ({ settings }));
+    const { color } = settings;
+    // update context on event changes
+    (0, react_1.useEffect)(() => {
+        // update context whenever settings changes
+        const subscription = settings.events$.subscribe(() => setContext({ settings }));
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [settings]);
+    // add/remove dark mode classes when settings change
+    (0, react_1.useEffect)(() => {
+        // add dark mode
+        const html = funnel_core_1.Browser.getHtml();
+        if (color === 'dark') {
+            html === null || html === void 0 ? void 0 : html.classList.add('dark');
+        }
+        // or remove it
+        else {
+            html === null || html === void 0 ? void 0 : html.classList.remove('dark');
+        }
+    }, [color]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(SettingsContext_1.SettingsContext.Provider, { value: context, children: children }));
+}

package/dist/core/settings/SettingsContext.d.ts

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

package/dist/core/settings/SettingsContext.js

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

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

@@ -0,0 +1,4 @@
+export * from './Settings';
+export * from './SettingsContainer';
+export * from './SettingsContext';
+export * from './useSettings';

package/dist/core/settings/index.js

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

package/dist/core/settings/useSettings.d.ts

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

package/dist/core/settings/useSettings.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSettings = useSettings;
+const react_1 = require("react");
+const SettingsContext_1 = require("./SettingsContext");
+function useSettings() {
+    // resolve service
+    const { settings } = (0, react_1.useContext)(SettingsContext_1.SettingsContext);
+    // and return it
+    return settings;
+}

package/dist/core/site-config/SiteConfig.d.ts

@@ -0,0 +1,39 @@
+import { SiteConfig as SiteConfigModel } from '@nascentdigital/funnel-cms';
+import { AppState } from '../app';
+import { Authenticator } from '../auth';
+import { EditorApiClient } from '../client';
+export declare class SiteConfig {
+    readonly appState: AppState;
+    readonly authenticator: Authenticator;
+    readonly editorApi: EditorApiClient;
+    private _state$;
+    private _isEditorBlocked$;
+    private _data?;
+    constructor(args: SiteConfig.Args);
+    get state$(): import("rxjs").Observable<SiteConfig.State>;
+    get state(): SiteConfig.State;
+    private set state(value);
+    get isEditorBlocked$(): import("rxjs").Observable<boolean | undefined>;
+    get isEditorBlocked(): boolean | undefined;
+    private set isEditorBlocked(value);
+    get isEditorLocked(): boolean | undefined;
+    get initialized(): boolean;
+    get ready(): boolean;
+    get available$(): import("rxjs").Observable<boolean>;
+    get available(): boolean;
+    waitUntilAvailable(): Promise<void>;
+    lockEditor(): Promise<void>;
+    unlockEditor(): Promise<void>;
+    sync(): Promise<void>;
+    reset(): void;
+    private validate;
+}
+export declare namespace SiteConfig {
+    type State = 'uninitialized' | 'initializing' | 'ready' | 'error' | 'updating';
+    type Data = SiteConfigModel.Data;
+    type Args = {
+        appState: AppState;
+        authenticator: Authenticator;
+        editorApi: EditorApiClient;
+    };
+}

package/dist/core/site-config/SiteConfig.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteConfig = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const rxjs_1 = require("rxjs");
+// class
+class SiteConfig {
+    constructor(args) {
+        // initialize instance variables
+        this.appState = args.appState;
+        this.authenticator = args.authenticator;
+        this.editorApi = args.editorApi;
+        this._state$ = new rxjs_1.BehaviorSubject('uninitialized');
+        this._isEditorBlocked$ = new rxjs_1.BehaviorSubject(undefined);
+        // listen to authenticator changes
+        this.authenticator.user$
+            .subscribe(user => {
+            // reset if not logged in
+            if (user.role.id === 'public') {
+                this.reset();
+            }
+            // or sync
+            else {
+                this.sync().catch(console.error);
+            }
+        });
+    }
+    get state$() {
+        return this._state$.asObservable()
+            .pipe((0, rxjs_1.distinctUntilChanged)());
+    }
+    get state() {
+        return this._state$.getValue();
+    }
+    set state(state) {
+        this._state$.next(state);
+    }
+    get isEditorBlocked$() {
+        return this._isEditorBlocked$.asObservable()
+            .pipe((0, rxjs_1.distinctUntilChanged)());
+    }
+    get isEditorBlocked() {
+        return this._isEditorBlocked$.getValue();
+    }
+    set isEditorBlocked(blocked) {
+        this._isEditorBlocked$.next(blocked);
+    }
+    get isEditorLocked() {
+        var _a;
+        return (_a = this._data) === null || _a === void 0 ? void 0 : _a.lockdownEditor;
+    }
+    get initialized() {
+        const { state } = this;
+        return state !== 'uninitialized' && state !== 'initializing';
+    }
+    get ready() {
+        return this.state === 'ready';
+    }
+    get available$() {
+        return this.state$
+            .pipe((0, rxjs_1.map)(state => state !== 'initializing' && state !== 'updating'), (0, rxjs_1.distinctUntilChanged)());
+    }
+    get available() {
+        const { state } = this;
+        return state !== 'initializing' && state !== 'updating';
+    }
+    async waitUntilAvailable() {
+        await (0, rxjs_1.firstValueFrom)(this.available$.pipe((0, rxjs_1.filter)(available => available)));
+    }
+    async lockEditor() {
+        // wait until available
+        await this.waitUntilAvailable();
+        // throw if not ready
+        const { _data } = this;
+        if (!_data) {
+            throw new funnel_core_1.InvalidOperationError('Cannot lock editor when SiteConfig is not in sync');
+        }
+        // try to lock
+        try {
+            // mark as updating
+            this.state = 'updating';
+            // get data
+            const data = await this.editorApi.updateSiteConfig({ id: _data.id, lockdownEditor: true });
+            // bail if reset
+            if (this._state$.getValue() === 'uninitialized') {
+                return;
+            }
+            // update data
+            this._data = data;
+            // validate
+            this.validate();
+            // mark ready
+            this.state = 'ready';
+        }
+        // handle errors
+        catch (e) {
+            // bail if reset
+            if (this.state === 'uninitialized') {
+                return;
+            }
+            // mark error
+            this.state = 'error';
+        }
+    }
+    async unlockEditor() {
+        // wait until available
+        await this.waitUntilAvailable();
+        // throw if not ready
+        const { _data } = this;
+        if (!_data) {
+            throw new funnel_core_1.InvalidOperationError('Cannot unlock editor when SiteConfig is not in sync');
+        }
+        // try to unlock
+        try {
+            // mark as updating
+            this.state = 'updating';
+            // get data
+            const data = await this.editorApi.updateSiteConfig({ id: _data.id, lockdownEditor: false });
+            // bail if reset
+            if (this._state$.getValue() === 'uninitialized') {
+                return;
+            }
+            // update data
+            this._data = data;
+            // validate
+            this.validate();
+            // mark ready
+            this.state = 'ready';
+        }
+        // handle errors
+        catch (e) {
+            // bail if reset
+            if (this.state === 'uninitialized') {
+                return;
+            }
+            // mark error
+            this.state = 'error';
+        }
+    }
+    async sync() {
+        // wait until available
+        await this.waitUntilAvailable();
+        // try to update
+        try {
+            // mark as initialing
+            this.state = this.state !== 'uninitialized'
+                ? 'initializing'
+                : 'updating';
+            // sync with cms
+            const siteConfig = await this.editorApi.getSiteConfig();
+            // bail if reset (would be uninitialized again)
+            if (this._state$.getValue() === 'uninitialized') {
+                console.debug('[SiteConfig] ignoring SiteConfig result after cancelled config');
+                return;
+            }
+            // update data
+            this._data = siteConfig;
+            console.debug('[SiteConfig] fetched updated config', siteConfig);
+            // validate after sync
+            this.validate();
+            // mark as ready
+            this.state = 'ready';
+        }
+        // handle errors
+        catch (e) {
+            // ignore if reset
+            if (this.state === 'uninitialized') {
+                console.debug('[SiteConfig] ignoring SiteConfig error after cancelled config');
+            }
+            // or raise error
+            else {
+                this.state = 'error';
+            }
+        }
+    }
+    reset() {
+        // clear data
+        this._data = undefined;
+        // update state
+        this.state = 'uninitialized';
+        // validate
+        this.validate();
+    }
+    validate() {
+        // reset blocked status if we have no data
+        const { appState, authenticator, _data } = this;
+        const { user, authenticated } = authenticator;
+        if (!_data || !authenticated) {
+            this.isEditorBlocked = undefined;
+            appState.blocked = false;
+        }
+        // or set based on user/lockdown status
+        else {
+            const blocked = user.role.id !== 'owner' && _data.lockdownEditor;
+            this.isEditorBlocked = blocked;
+            appState.blocked = blocked;
+        }
+    }
+}
+exports.SiteConfig = SiteConfig;

package/dist/core/site-config/SiteConfigContainer.d.ts

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

package/dist/core/site-config/SiteConfigContainer.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteConfigContainer = SiteConfigContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const app_1 = require("../app");
+const auth_1 = require("../auth");
+const client_1 = require("../client");
+const SiteConfig_1 = require("./SiteConfig");
+const SiteConfigContext_1 = require("./SiteConfigContext");
+// component
+function SiteConfigContainer({ children }) {
+    // bind hooks + memo
+    const appState = (0, app_1.useAppState)();
+    const authenticator = (0, auth_1.useAuthenticator)();
+    const editorApi = (0, client_1.useEditorApi)();
+    const siteConfig = (0, react_1.useMemo)(() => new SiteConfig_1.SiteConfig({ appState, authenticator, editorApi }), [appState, authenticator, editorApi]);
+    const context = (0, react_1.useMemo)(() => ({ siteConfig }), [siteConfig]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(SiteConfigContext_1.SiteConfigContext.Provider, { value: context, children: children }));
+}

package/dist/core/site-config/SiteConfigContext.d.ts

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

package/dist/core/site-config/SiteConfigContext.js

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

package/dist/core/site-config/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SiteConfig';
+export * from './SiteConfigContainer';
+export * from './SiteConfigContext';
+export * from './useSiteConfig';

package/dist/core/site-config/index.js

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

package/dist/core/site-config/useSiteConfig.d.ts

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

package/dist/core/site-config/useSiteConfig.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSiteConfig = useSiteConfig;
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
+const react_1 = require("react");
+const SiteConfigContext_1 = require("./SiteConfigContext");
+// hook
+function useSiteConfig() {
+    // resolve service
+    const { siteConfig } = (0, react_1.useContext)(SiteConfigContext_1.SiteConfigContext);
+    const touch = (0, hooks_1.useTouch)();
+    // sync with events
+    (0, react_1.useEffect)(() => {
+        // touch on any change
+        const subscriptions = [
+            siteConfig.state$.subscribe(touch),
+            siteConfig.isEditorBlocked$.subscribe(touch)
+        ];
+        // unsubscribe on unmount
+        return () => subscriptions.forEach(subscription => subscription.unsubscribe());
+    }, [siteConfig, touch]);
+    // and return it
+    return siteConfig;
+}

package/dist/core/splash/Splash.d.ts

@@ -0,0 +1,7 @@
+import { SplashService } from './SplashService';
+export declare function Splash({ state }: Splash.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Splash {
+    type Props = {
+        state: SplashService.State;
+    };
+}

package/dist/core/splash/Splash.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Splash = Splash;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const components_1 = require("../components");
+const useSplash_1 = require("./useSplash");
+// component
+function Splash({ state }) {
+    // use splash
+    const splash = (0, useSplash_1.useSplash)();
+    // mark visible on mount
+    (0, react_2.useEffect)(() => {
+        splash.visible = true;
+    }, [splash]);
+    // determine contents
+    let content;
+    switch (state.type) {
+        case 'loading':
+            content = renderLoading(state, splash);
+            break;
+        case 'error':
+            content = renderError(state, splash);
+            break;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)('fixed inset-0 z-splash bg-background', 'flex flex-col justify-around items-center gap-l10'), exit: { opacity: 0, transition: { duration: 0.5, ease: 'easeOut' } }, children: content }));
+}
+// helpers
+function renderLoading({ message }, splash) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-screen-sm flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "mb-l8", children: (0, jsx_runtime_1.jsx)(components_1.Logo, { className: "text-content-primary bg-ix-util-hover/tint1 rounded-full", size: 64 }) }), (0, jsx_runtime_1.jsx)(react_1.motion.h1, { className: "heading-lg text-content-primary text-center text-pretty will-change-[opacity,filter]", initial: { opacity: 0, y: 20, filter: 'blur(8px)' }, animate: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.5, ease: 'easeOut' } }, onAnimationComplete: () => splash.onActivated('1s'), children: message }), (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "mt-l11", animate: !splash.active && { opacity: 0 }, children: (0, jsx_runtime_1.jsx)(components_1.Loader, { className: "text-ix-primary", size: "xl" }) })] }));
+}
+function renderError({ message, onRetry }, splash) {
+    return null;
+}

package/dist/core/splash/SplashContainer.d.ts

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

package/dist/core/splash/SplashContainer.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplashContainer = SplashContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const Splash_1 = require("./Splash");
+const SplashContext_1 = require("./SplashContext");
+const SplashService_1 = require("./SplashService");
+// component
+function SplashContainer({ children }) {
+    // bind hooks + memo
+    const service = (0, react_2.useMemo)(() => {
+        // create service
+        const service = new SplashService_1.SplashService();
+        // start in a loading state
+        service.showLoading(`Signing you in`);
+        // return service
+        return service;
+    }, []);
+    const [context, setContext] = (0, react_2.useState)(() => ({ service }));
+    // update context on event changes
+    (0, react_2.useEffect)(() => {
+        // update context whenever service changes
+        const subscription = service.events$.subscribe(() => setContext({ service }));
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [service]);
+    // render
+    const { state } = service;
+    return ((0, jsx_runtime_1.jsxs)(SplashContext_1.SplashContext.Provider, { value: context, children: [children, (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { onExitComplete: () => service.visible = false, children: state &&
+                    (0, jsx_runtime_1.jsx)(Splash_1.Splash, { state: state }) })] }));
+}

package/dist/core/splash/SplashContext.d.ts

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