@akinon/app-client 0.14.0 → 1.0.1

package/dist/esm/app-client-provider.d.ts

@@ -1,4 +1,5 @@
-import type { ApplicationData, ApplicationModalSize, ApplicationNavigation, ApplicationParams, ApplicationToastType, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
+import type { ApplicationData, ApplicationModalSize, ApplicationNavigation, ApplicationNavigationPayload, ApplicationParams, ApplicationToastType, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
+import Framebus from 'framebus';
 import React from 'react';
 /**
  * Defines the context state for the AppClient, including application data,
@@ -99,6 +100,10 @@ interface AppClientContextState {
      * @returns {Function} - Function to remove the callback.
      */
     onLocaleChange: (callback: (newLocale: string) => void) => void;
+    /**
+     * Context data for the modal.
+     */
+    modalContext?: unknown;
 }
 /**
  * Props for the AppClientProvider component.
@@ -112,20 +117,29 @@ interface AppClientProviderProps {
      * Configuration for the application, including settings like `isDev` and `forceRedirect`.
      */
     config: FullpageApplicationConfig | PluginApplicationConfig;
+    /**
+     * Optional event bus to use instead of creating a new one.
+     */
+    eventBus?: Framebus;
 }
+/**
+ * Default context state for the AppClient.
+ */
+declare const defaultContextState: AppClientContextState;
 /**
  * Custom hook to access the AppClient context.
  *
  * @returns {AppClientContextState} The current context state.
  */
 declare const useAppClient: () => AppClientContextState;
+declare let contextValue: AppClientContextState;
 /**
  * Component providing the context for AppClient. It initializes communication
  * with the AppShell and provides methods for action invocation and navigation.
  *
  * @param {AppClientProviderProps} props - The props for the AppClientProvider component.
  */
-declare const AppClientProvider: ({ children, config }: AppClientProviderProps) => React.JSX.Element;
-export { AppClientProvider, useAppClient };
-export type { ApplicationNavigation, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation };
+declare const AppClientProvider: ({ children, config, eventBus }: AppClientProviderProps) => React.JSX.Element;
+export { AppClientProvider, contextValue, defaultContextState, useAppClient };
+export type { ApplicationNavigation, ApplicationNavigationPayload, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation };
 //# sourceMappingURL=app-client-provider.d.ts.map

package/dist/esm/app-client-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-client-provider.d.ts","sourceRoot":"","sources":["../../src/app-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,oBAAoB,EACpB,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAON,MAAM,OAAO,CAAC;AAEf;;;;GAIG;AACH,UAAU,qBAAqB;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KACpB,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB;;;OAGG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpD;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,OAAO,CAAC;IACd;;;;;;;;;;OAUG;IACH,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE;QACjC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,OAAO,CAAC;IACd;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,OAAO,CAAC;IACrE;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/D;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,CACd,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,OAAO,EACjB,IAAI,CAAC,EAAE,oBAAoB,EAC3B,cAAc,CAAC,EAAE,MAAM,KACpB,OAAO,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EAAE,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;CAC7D;AAyBD;;;;GAIG;AACH,QAAA,MAAM,YAAY,QAAO,qBAAqD,CAAC;AAwL/E;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,yBAA0B,sBAAsB,sBAiJtE,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC;AAC3C,YAAY,EACV,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,CAAC"}
+{"version":3,"file":"app-client-provider.d.ts","sourceRoot":"","sources":["../../src/app-client-provider.tsx"],"names":[],"mappings":"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"}

package/dist/esm/app-client-provider.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { DEFAULT_ACTION_KEYS, EVENTS } from '@akinon/app-shared';
+import { CHANNEL_URL_PARAM_NAME, DEFAULT_ACTION_KEYS, EVENTS, generateBusChannelValue } from '@akinon/app-shared';
 import Framebus from 'framebus';
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 /**
@@ -36,138 +36,44 @@ const AppClientContext = createContext(defaultContextState);
  * @returns {AppClientContextState} The current context state.
  */
 const useAppClient = () => useContext(AppClientContext);
-/**
- * Navigates to the specified path within the application.
- * This method communicates with the AppShell to perform the navigation.
- */
-const navigate = ({ id, path, external }) => {
-    const bus = new Framebus();
-    bus.emit(EVENTS.NAVIGATE, { id, path, external });
-};
-/**
- * Shows a modal dialog with the specified title and content.
- * This method communicates with the AppShell to display the modal dialog.
- *
- * @returns {boolean} - Indicates if the dialog was successfully shown.
- */
-const showModalDialog = ({ title, content, onConfirm, onCancel }) => {
-    const bus = new Framebus();
-    function handleActionConfirmed() {
-        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
-        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
-        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-    }
-    function handleActionCanceled() {
-        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
-        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    }
-    if (onConfirm) {
-        bus.on(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
-    }
-    if (onCancel) {
-        bus.on(EVENTS.ACTION_CANCELED, handleActionCanceled);
-    }
-    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
-        actionKey: DEFAULT_ACTION_KEYS.showModalDialog,
-        args: [title, content]
-    });
-};
-/**
- * Shows a confirmation dialog with the specified title and content and can handle the user's input.
- * This method communicates with the AppShell to display the confirmation dialog.
- *
- * @returns {boolean} - Indicates if the dialog was successfully shown.
- */
-const showConfirmationDialog = ({ title, content, onConfirm, onCancel }) => {
-    const bus = new Framebus();
-    function handleActionConfirmed(data) {
-        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
-        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
-        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(data);
-    }
-    function handleActionCanceled() {
-        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
-        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    }
-    if (onConfirm) {
-        bus.on(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
-    }
-    if (onCancel) {
-        bus.on(EVENTS.ACTION_CANCELED, handleActionCanceled);
-    }
-    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
-        actionKey: DEFAULT_ACTION_KEYS.showConfirmationDialog,
-        args: [title, content]
-    });
-};
-/**
- * Displays a toast message with the specified content and type.
- * This method communicates with the AppShell to display the toast message.
- *
- * @param {string} content - The content of the toast message.
- * @param {ApplicationToastType} type - The type of the toast message.
- * @returns {boolean} - Indicates if the event was emitted successfully.
- */
-const showToast = (content, type) => {
-    const bus = new Framebus();
-    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
-        actionKey: DEFAULT_ACTION_KEYS.showToast,
-        args: [content, type]
-    });
-};
-/**
- * Displays an error message dialog with the specified title and content.
- * This method communicates with the AppShell to display the error message.
- *
- * @param {string} title - The title of the error message dialog.
- * @param {string} content - The content of the error message dialog.
- * @returns {boolean} - Indicates if the event was emitted successfully.
- */
-const showErrorMessage = (title, content) => {
-    const bus = new Framebus();
-    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
-        actionKey: DEFAULT_ACTION_KEYS.showErrorMessage,
-        args: [title, content]
-    });
-};
-/**
- * Displays a rich-contentful modal with the specified path and context.
- * This method communicateswith the AppShell to display the complicated modals.
- *
- * @param {string} path - The path of displayed iframe.
- * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
- * @param {Object} size - Optional size of the modal.
- * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
- * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
- * @param {string} closeIconColor - Optional color of the close icon.
- */
-const showRichModal = (path, context, size, closeIconColor) => {
-    const bus = new Framebus();
-    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
-        actionKey: DEFAULT_ACTION_KEYS.showRichModal,
-        args: [path, context, size, closeIconColor]
-    });
-};
+let contextValue;
 /**
  * Component providing the context for AppClient. It initializes communication
  * with the AppShell and provides methods for action invocation and navigation.
  *
  * @param {AppClientProviderProps} props - The props for the AppClientProvider component.
  */
-const AppClientProvider = ({ children, config }) => {
+const AppClientProvider = ({ children, config, eventBus }) => {
     const [, setAppId] = useState(undefined);
     const [data, setData] = useState(undefined);
+    const [modalContext, setModalContext] = useState(undefined);
     const [params, setParams] = useState(undefined);
     const [isLoading, setIsLoading] = useState(true);
     const [locale, setLocale] = useState('en');
     const localeChangeCallbacks = useRef([]);
-    // Function to invoke an action in the AppShell
-    const invokeAction = (actionKey, ...args) => {
+    // Create a ref to store the bus instance
+    const busRef = useRef();
+    // Initialize bus on mount
+    useEffect(() => {
+        busRef.current =
+            eventBus ||
+                (() => {
+                    const url = new URL(window.location.href);
+                    const channel = url.searchParams.get(CHANNEL_URL_PARAM_NAME);
+                    return new Framebus({
+                        channel: generateBusChannelValue({ channel })
+                    });
+                })();
+        // Send config data to AppShell
+        busRef.current.emit(EVENTS.SET_CONFIG, { config });
+    }, [eventBus, config]);
+    // Update standalone functions to use shared bus
+    const invokeAction = useCallback((actionKey, ...args) => {
+        if (!busRef.current)
+            return Promise.reject('Bus not initialized');
         return new Promise((resolve, reject) => {
-            const bus = new Framebus();
-            bus.emit(EVENTS.INVOKE_ACTION, { actionKey, args }, (response) => {
+            var _a;
+            (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.emit(EVENTS.INVOKE_ACTION, { actionKey, args }, (response) => {
                 if (typeof response === 'object' && response !== null) {
                     const typedResponse = response;
                     if (typedResponse.success) {
@@ -182,33 +88,27 @@ const AppClientProvider = ({ children, config }) => {
                 }
             });
         });
-    };
+    }, []);
     const isFullPageApplication = () => {
         const castedConfig = config;
         return Array.isArray(castedConfig.menu);
     };
     useEffect(() => {
-        // In production, enforce running in an iframe if forceRedirect is true
+        var _a, _b, _c, _d, _e, _f, _g;
         if (config.forceRedirect && !config.isDev && window.self === window.top) {
             console.error('This app must be run inside an iframe when forceRedirect is true.');
             return;
         }
-        // Get c from the url of the iframe containing the application.
-        const url = new URL(window.location.href);
-        const channel = url.searchParams.get('c');
-        const bus = channel ? new Framebus({ channel }) : new Framebus();
-        // Send data from the AppShell upon initialization.
-        // Pass apps config data.
-        bus.emit(EVENTS.SET_CONFIG, { config });
-        bus.on(EVENTS.SET_DATA, (receivedData) => {
+        // Set up event listeners
+        (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.on(EVENTS.SET_DATA, (receivedData) => {
             setData(prevState => (Object.assign(Object.assign({}, prevState), receivedData)));
             setIsLoading(false);
         });
-        bus.on(EVENTS.SET_PARAMS, message => {
+        (_b = busRef.current) === null || _b === void 0 ? void 0 : _b.on(EVENTS.SET_PARAMS, message => {
             const passedParams = message;
             setParams(passedParams);
         });
-        bus.on(EVENTS.SET_APP_ID, data => {
+        (_c = busRef.current) === null || _c === void 0 ? void 0 : _c.on(EVENTS.SET_APP_ID, data => {
             const { appId } = data;
             setAppId(appId);
         });
@@ -216,14 +116,14 @@ const AppClientProvider = ({ children, config }) => {
             // Get computed height of iframe element.
             const height = document.getElementsByTagName('html')[0].offsetHeight;
             if (height > 0 && window.name) {
-                bus.emit(EVENTS.SET_HEIGHT, { height, id: window.name });
+                (_d = busRef.current) === null || _d === void 0 ? void 0 : _d.emit(EVENTS.SET_HEIGHT, { height, id: window.name });
             }
         }
         // Only listen to navigation events if application type is
         // fullpage. plugin type apps should not have the ability to navigate.
         if (isFullPageApplication()) {
             // Listen for navigation events.
-            bus.on(EVENTS.NAVIGATE_CHILD, message => {
+            (_e = busRef.current) === null || _e === void 0 ? void 0 : _e.on(EVENTS.NAVIGATE_CHILD, message => {
                 const { path } = message;
                 const { navigation } = config;
                 if (navigation) {
@@ -231,37 +131,117 @@ const AppClientProvider = ({ children, config }) => {
                     navigate({ path });
                 }
             });
+            // Listen for modal context changes
+            (_f = busRef.current) === null || _f === void 0 ? void 0 : _f.on(EVENTS.SET_MODAL_CONTEXT, modalContext => {
+                setModalContext(modalContext);
+            });
         }
         // Listen for locale changes
-        bus.on(EVENTS.LOCALE_CHANGED, message => {
+        (_g = busRef.current) === null || _g === void 0 ? void 0 : _g.on(EVENTS.LOCALE_CHANGED, message => {
             const { locale: newLocale } = message;
             setLocale(newLocale);
             localeChangeCallbacks.current.forEach(callback => callback(newLocale));
         });
         return () => {
-            bus.teardown();
+            var _a;
+            if (!eventBus) {
+                // Only teardown if we created the bus
+                (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.teardown();
+            }
         };
-    }, [config]);
+    }, [config, eventBus]);
     const onLocaleChange = useCallback((callback) => {
         localeChangeCallbacks.current.push(callback);
         return () => {
             localeChangeCallbacks.current = localeChangeCallbacks.current.filter(cb => cb !== callback);
         };
     }, []);
-    const contextValue = {
+    contextValue = {
         data,
         params,
         isLoading,
         invokeAction,
-        navigate,
-        showModalDialog,
-        showConfirmationDialog,
-        showToast,
-        showErrorMessage,
-        showRichModal,
+        navigate: useCallback((payload) => {
+            var _a;
+            (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.emit(EVENTS.NAVIGATE, Object.assign({}, payload));
+        }, []),
+        showModalDialog: useCallback((options) => {
+            var _a, _b, _c;
+            const { title, content, onConfirm, onCancel } = options;
+            function handleActionConfirmed() {
+                var _a, _b;
+                (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+                (_b = busRef.current) === null || _b === void 0 ? void 0 : _b.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+            }
+            function handleActionCanceled() {
+                var _a, _b;
+                (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+                (_b = busRef.current) === null || _b === void 0 ? void 0 : _b.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            }
+            if (onConfirm) {
+                (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.on(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+            }
+            if (onCancel) {
+                (_b = busRef.current) === null || _b === void 0 ? void 0 : _b.on(EVENTS.ACTION_CANCELED, handleActionCanceled);
+            }
+            return !!((_c = busRef.current) === null || _c === void 0 ? void 0 : _c.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+                actionKey: DEFAULT_ACTION_KEYS.showModalDialog,
+                args: [title, content]
+            }));
+        }, []),
+        showConfirmationDialog: useCallback((options) => {
+            var _a, _b, _c;
+            const { title, content, onConfirm, onCancel } = options;
+            function handleActionConfirmed(data) {
+                var _a, _b;
+                (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+                (_b = busRef.current) === null || _b === void 0 ? void 0 : _b.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(data);
+            }
+            function handleActionCanceled() {
+                var _a, _b;
+                (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+                (_b = busRef.current) === null || _b === void 0 ? void 0 : _b.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            }
+            if (onConfirm) {
+                (_a = busRef.current) === null || _a === void 0 ? void 0 : _a.on(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+            }
+            if (onCancel) {
+                (_b = busRef.current) === null || _b === void 0 ? void 0 : _b.on(EVENTS.ACTION_CANCELED, handleActionCanceled);
+            }
+            return !!((_c = busRef.current) === null || _c === void 0 ? void 0 : _c.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+                actionKey: DEFAULT_ACTION_KEYS.showConfirmationDialog,
+                args: [title, content]
+            }));
+        }, []),
+        showToast: useCallback((content, type) => {
+            var _a;
+            return !!((_a = busRef.current) === null || _a === void 0 ? void 0 : _a.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+                actionKey: DEFAULT_ACTION_KEYS.showToast,
+                args: [content, type]
+            }));
+        }, []),
+        showErrorMessage: useCallback((title, content) => {
+            var _a;
+            return !!((_a = busRef.current) === null || _a === void 0 ? void 0 : _a.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+                actionKey: DEFAULT_ACTION_KEYS.showErrorMessage,
+                args: [title, content]
+            }));
+        }, []),
+        showRichModal: useCallback((path, context, size, closeIconColor) => {
+            var _a;
+            return !!((_a = busRef.current) === null || _a === void 0 ? void 0 : _a.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+                actionKey: DEFAULT_ACTION_KEYS.showRichModal,
+                args: [path, context, size, closeIconColor]
+            }));
+        }, []),
         locale,
-        onLocaleChange
+        onLocaleChange,
+        modalContext
     };
     return (React.createElement(AppClientContext.Provider, { value: contextValue }, children));
 };
-export { AppClientProvider, useAppClient };
+export { AppClientProvider, contextValue, defaultContextState, useAppClient };

package/dist/esm/components/error-boundary.d.ts

@@ -0,0 +1,19 @@
+import { Component, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback: ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    state: {
+        hasError: boolean;
+    };
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    render(): ReactNode;
+}
+export {};
+//# sourceMappingURL=error-boundary.d.ts.map

package/dist/esm/components/error-boundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/error-boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACxD,KAAK;;MAAuB;IAE5B,MAAM,CAAC,wBAAwB;;;IAI/B,MAAM;CAOP"}

package/dist/esm/components/error-boundary.js

@@ -0,0 +1,16 @@
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback;
+        }
+        return this.props.children;
+    }
+}

package/dist/esm/index.d.ts

@@ -1,2 +1,4 @@
 export * from './app-client-provider';
+export * from './multi-app-provider';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC"}

package/dist/esm/index.js

@@ -1 +1,3 @@
 export * from './app-client-provider';
+export * from './multi-app-provider';
+export * from './types';

package/dist/esm/multi-app-provider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MultiAppConfig } from './types';
+interface MultiAppProviderProps {
+    children: React.ReactNode;
+    multiConfig: MultiAppConfig;
+}
+export declare function MultiAppProvider({ children, multiConfig }: MultiAppProviderProps): React.JSX.Element;
+export declare const APP_NOT_FOUND_CONTENT = "App not found";
+export {};
+//# sourceMappingURL=multi-app-provider.d.ts.map

package/dist/esm/multi-app-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-app-provider.d.ts","sourceRoot":"","sources":["../../src/multi-app-provider.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAe9C,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,cAAc,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAW,EACZ,EAAE,qBAAqB,qBAQvB;AA0BD,eAAO,MAAM,qBAAqB,kBAAkB,CAAC"}

package/dist/esm/multi-app-provider.js

@@ -0,0 +1,75 @@
+import { CHANNEL_URL_PARAM_NAME, EVENTS, generateBusChannelValue } from '@akinon/app-shared';
+import Framebus from 'framebus';
+import React, { useEffect, useMemo } from 'react';
+import { AppClientProvider } from './app-client-provider';
+import { ErrorBoundary } from './components/error-boundary';
+function resolveCurrentApp(pathname, apps) {
+    // Find the app with the longest matching basePath
+    const matchingApp = Object.entries(apps)
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .filter(([_, app]) => pathname.startsWith(app.basePath))
+        .sort((a, b) => b[1].basePath.length - a[1].basePath.length)[0];
+    return matchingApp === null || matchingApp === void 0 ? void 0 : matchingApp[1];
+}
+export function MultiAppProvider({ children, multiConfig }) {
+    return (React.createElement(ErrorBoundary, { fallback: React.createElement("div", null, "Error loading application") },
+        React.createElement(MultiAppProviderInner, { multiConfig: multiConfig }, children)));
+}
+function validateConfig(config) {
+    if (!config.apps || Object.keys(config.apps).length === 0) {
+        throw new Error('MultiAppConfig must contain at least one app');
+    }
+    Object.entries(config.apps).forEach(([key, app]) => {
+        if (!app.basePath) {
+            throw new Error(`App "${key}" must have a basePath`);
+        }
+        if (app.type === 'plugin' &&
+            !app.config.placeholderId) {
+            throw new Error(`Plugin app "${key}" must have a placeholderId`);
+        }
+    });
+}
+const getChannelValue = () => {
+    const url = new URL(window.location.href);
+    return url.searchParams.get(CHANNEL_URL_PARAM_NAME);
+};
+export const APP_NOT_FOUND_CONTENT = 'App not found';
+function MultiAppProviderInner({ children, multiConfig }) {
+    const currentApp = useMemo(() => {
+        const pathname = window.location.pathname;
+        const resolvedApp = resolveCurrentApp(pathname, multiConfig.apps);
+        if (!resolvedApp && multiConfig.defaultApp) {
+            return multiConfig.apps[multiConfig.defaultApp];
+        }
+        return resolvedApp;
+    }, [multiConfig]);
+    const eventBus = useMemo(() => {
+        if (!currentApp)
+            return null;
+        return new Framebus({
+            channel: generateBusChannelValue({
+                basePath: currentApp.basePath,
+                channel: getChannelValue()
+            })
+        });
+    }, [currentApp]);
+    useEffect(() => {
+        validateConfig(multiConfig);
+        Object.values(multiConfig.apps).forEach(app => {
+            new Framebus({
+                channel: generateBusChannelValue({
+                    basePath: app.basePath,
+                    channel: getChannelValue()
+                })
+            }).emit(EVENTS.SET_CONFIG, {
+                config: app.config
+            });
+        });
+    }, [multiConfig]);
+    if (!currentApp) {
+        // Handle 404 scenario
+        return React.createElement("div", null, APP_NOT_FOUND_CONTENT);
+    }
+    // Wrap with original AppClientProvider using resolved config
+    return (React.createElement(AppClientProvider, { config: currentApp.config, eventBus: eventBus || undefined }, children));
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,11 @@
+import type { FullpageApplicationConfig, PluginApplicationConfig, RegisteredAppType } from '@akinon/app-shared';
+export interface AppConfig {
+    basePath: string;
+    config: FullpageApplicationConfig | PluginApplicationConfig;
+    type: RegisteredAppType;
+}
+export interface MultiAppConfig {
+    apps: Record<string, AppConfig>;
+    defaultApp?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;IAC5D,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/navigation.d.ts

@@ -0,0 +1,8 @@
+import type { ShellNavigationPayload } from '@akinon/app-shared';
+import type { MultiAppConfig } from '../types';
+export interface ResolveNavigationOptions {
+    multiConfig: MultiAppConfig;
+    currentBasePath: string;
+}
+export declare function resolveNavigationPath(payload: ShellNavigationPayload, options: ResolveNavigationOptions): ShellNavigationPayload;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/esm/utils/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,cAAc,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,sBAAsB,EAC/B,OAAO,EAAE,wBAAwB,0BAuBlC"}

package/dist/esm/utils/navigation.js

@@ -0,0 +1,15 @@
+export function resolveNavigationPath(payload, options) {
+    const { path, external } = payload;
+    const { multiConfig, currentBasePath } = options;
+    // If it's an external path or absolute URL, return as is
+    if (external || path.startsWith('http')) {
+        return payload;
+    }
+    // If path starts with any registered app's basePath, use it as is
+    const matchingApp = Object.values(multiConfig.apps).find(app => path.startsWith(app.basePath));
+    if (matchingApp) {
+        return payload;
+    }
+    // Otherwise, prepend current app's basePath to relative paths
+    return Object.assign(Object.assign({}, payload), { path: `${currentBasePath}${path.startsWith('/') ? path : `/${path}`}` });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/app-client",
   "description": "Akinon AppClient library. This library is used to create a new plugin or an application which will reside in Akinon's applications.",
-  "version": "0.14.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -10,15 +10,15 @@
     "dist"
   ],
   "dependencies": {
-    "framebus": "^6.0.1",
-    "@akinon/app-shared": "0.15.0"
+    "framebus": "^6.0.2",
+    "@akinon/app-shared": "1.0.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.4.0"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18",