@maestro_io/maestro-web-sdk 5.0.0 → 5.1.0

package/dist/src/external/ReactRenderer.d.ts

@@ -0,0 +1,17 @@
+import { IRenderer } from './ports/renderer';
+declare class ReactRenderer implements IRenderer {
+    private renderersMap;
+    /**
+     * Renders the panel manager
+     * @param id The element ID to render in
+     * @param options Options for rendering including height and width
+     */
+    renderPanel(id: string): Promise<() => void>;
+    /**
+     * @description Get the render function and renderer for the MaestroWebSDK. Useful to configure the renderer and fonts before rendering the component.
+     * @param {string} id - The id of the element to render the component in.
+     * @param {{ height: number; width: number }} options - The height and width of the component.
+     */
+    private getRenderer;
+}
+export default ReactRenderer;

package/dist/src/external/ReactRenderer.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+class ReactRenderer {
+    constructor() {
+        Object.defineProperty(this, "renderersMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+    }
+    /**
+     * Renders the panel manager
+     * @param id The element ID to render in
+     * @param options Options for rendering including height and width
+     */
+    async renderPanel(id) {
+        // Check if there's already a renderer for this ID and clean it up first
+        if (this.renderersMap.has(id)) {
+            const existingRenderer = this.renderersMap.get(id);
+            existingRenderer.unmount();
+            this.renderersMap.delete(id);
+        }
+        const renderer = await this.getRenderer(id);
+        const App = require('../components/core/App').default;
+        const PanelManager = require('../components/core/PanelManager').default;
+        renderer.render(React.createElement(App, null,
+            React.createElement(PanelManager, null)));
+        return () => {
+            // Only unmount if this renderer is still in the map (hasn't been replaced)
+            if (this.renderersMap.has(id) && this.renderersMap.get(id) === renderer) {
+                renderer.unmount();
+                this.renderersMap.delete(id);
+            }
+        };
+    }
+    /**
+     * @description Get the render function and renderer for the MaestroWebSDK. Useful to configure the renderer and fonts before rendering the component.
+     * @param {string} id - The id of the element to render the component in.
+     * @param {{ height: number; width: number }} options - The height and width of the component.
+     */
+    async getRenderer(id) {
+        if (this.renderersMap.has(id)) {
+            return this.renderersMap.get(id);
+        }
+        const el = document.getElementById(id);
+        if (!el) {
+            throw new Error(`Element with id ${id} not found`);
+        }
+        const renderer = {
+            render: (children) => {
+                ReactDOM.render(children, el);
+            },
+            unmount: () => {
+                // Use the captured element reference so unmount still works even if
+                // the node was detached from the DOM.
+                ReactDOM.unmountComponentAtNode(el);
+                // Defensive cleanup in case any nodes remain.
+                el.innerHTML = '';
+            },
+        };
+        this.renderersMap.set(id, renderer);
+        return renderer;
+    }
+}
+export default ReactRenderer;

package/dist/src/external/mocks/MockExternalNetworkClient.d.ts

@@ -0,0 +1,104 @@
+import { INetworkClient } from '../ports/networkClient';
+/**
+ * A mock implementation of the INetworkClient interface for testing
+ * and development purposes.
+ */
+declare class MockNetworkClient implements INetworkClient {
+    private mockResponses;
+    private mockErrors;
+    private defaultResponse;
+    private defaultError;
+    private latestRequest;
+    private delay;
+    /**
+     * Constructor for MockNetworkClient
+     *
+     * @param mockResponses - Optional initial mock responses mapping
+     * @param mockErrors - Optional initial mock errors mapping
+     * @param defaultResponse - Default response for unmocked endpoints
+     * @param delay - Simulated network delay in milliseconds
+     */
+    constructor({ mockResponses, mockErrors, defaultResponse, delay, }?: {
+        mockResponses?: Record<string, any>;
+        mockErrors?: Record<string, Error>;
+        defaultResponse?: any;
+        delay?: number;
+    });
+    /**
+     * Get the latest request made to this mock client
+     */
+    getLatestRequest(): {
+        method: string;
+        endpoint: string;
+        data?: any;
+        params?: any;
+        headers?: Record<string, string> | undefined;
+    } | null;
+    /**
+     * Set a mock response for a specific endpoint
+     *
+     * @param endpoint - The API endpoint
+     * @param response - The mock response data
+     */
+    setMockResponse(endpoint: string, response: any): void;
+    /**
+     * Set a mock error for a specific endpoint
+     *
+     * @param endpoint - The API endpoint
+     * @param error - The error to throw
+     */
+    setMockError(endpoint: string, error: Error): void;
+    /**
+     * Set a default mock response for all unmocked endpoints
+     *
+     * @param response - The default response data
+     */
+    setDefaultResponse(response: any): void;
+    /**
+     * Set a default error for all endpoints not configured with specific errors
+     *
+     * @param error - The default error
+     */
+    setDefaultError(error: Error | null): void;
+    /**
+     * Set the simulated network delay
+     *
+     * @param delayMs - Delay in milliseconds
+     */
+    setDelay(delayMs: number): void;
+    /**
+     * Clear all mock responses and errors
+     */
+    reset(): void;
+    /**
+     * Helper method to handle the common response/error/delay logic
+     */
+    private handleRequest;
+    /**
+     * Mock implementation of the get method
+     */
+    get<TResponseData = any>(endpoint: string, params?: Record<string, any>, headers?: Record<string, string>): Promise<TResponseData>;
+    /**
+     * Mock implementation of the getWithHeaders method
+     */
+    getWithHeaders<TResponseData = any>(endpoint: string, params?: Record<string, any>, headers?: Record<string, string>): Promise<{
+        data: TResponseData;
+        headers: Record<string, string>;
+    }>;
+    /**
+     * Mock implementation of the post method
+     */
+    post<TRequestData = any, TResponseData = any>(endpoint: string, data: TRequestData, params?: Record<string, any>, headers?: Record<string, string>): Promise<TResponseData>;
+    /**
+     * Mock implementation of the postWithHeaders method
+     */
+    postWithHeaders<TRequestData = any, TResponseData = any>(endpoint: string, data: TRequestData, params?: Record<string, any>, headers?: Record<string, string>): Promise<{
+        data: TResponseData;
+        headers: Record<string, string>;
+    }>;
+    /**
+     * Mock implementation of setAuthentication
+     */
+    setAuthentication(token: string | null, apiKey: string | null): void;
+}
+export default MockNetworkClient;

package/dist/src/external/mocks/MockExternalNetworkClient.js

@@ -0,0 +1,187 @@
+/**
+ * A mock implementation of the INetworkClient interface for testing
+ * and development purposes.
+ */
+class MockNetworkClient {
+    /**
+     * Constructor for MockNetworkClient
+     *
+     * @param mockResponses - Optional initial mock responses mapping
+     * @param mockErrors - Optional initial mock errors mapping
+     * @param defaultResponse - Default response for unmocked endpoints
+     * @param delay - Simulated network delay in milliseconds
+     */
+    constructor({ mockResponses = {}, mockErrors = {}, defaultResponse = { success: true }, delay = 0, } = {}) {
+        Object.defineProperty(this, "mockResponses", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "mockErrors", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "defaultResponse", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { success: true }
+        });
+        Object.defineProperty(this, "defaultError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "latestRequest", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "delay", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        // Convert object to Map
+        Object.entries(mockResponses).forEach(([key, value]) => {
+            this.mockResponses.set(key, value);
+        });
+        Object.entries(mockErrors).forEach(([key, value]) => {
+            this.mockErrors.set(key, value);
+        });
+        this.defaultResponse = defaultResponse;
+        this.delay = delay;
+    }
+    /**
+     * Get the latest request made to this mock client
+     */
+    getLatestRequest() {
+        return this.latestRequest;
+    }
+    /**
+     * Set a mock response for a specific endpoint
+     *
+     * @param endpoint - The API endpoint
+     * @param response - The mock response data
+     */
+    setMockResponse(endpoint, response) {
+        this.mockResponses.set(endpoint, response);
+    }
+    /**
+     * Set a mock error for a specific endpoint
+     *
+     * @param endpoint - The API endpoint
+     * @param error - The error to throw
+     */
+    setMockError(endpoint, error) {
+        this.mockErrors.set(endpoint, error);
+    }
+    /**
+     * Set a default mock response for all unmocked endpoints
+     *
+     * @param response - The default response data
+     */
+    setDefaultResponse(response) {
+        this.defaultResponse = response;
+    }
+    /**
+     * Set a default error for all endpoints not configured with specific errors
+     *
+     * @param error - The default error
+     */
+    setDefaultError(error) {
+        this.defaultError = error;
+    }
+    /**
+     * Set the simulated network delay
+     *
+     * @param delayMs - Delay in milliseconds
+     */
+    setDelay(delayMs) {
+        this.delay = delayMs;
+    }
+    /**
+     * Clear all mock responses and errors
+     */
+    reset() {
+        this.mockResponses.clear();
+        this.mockErrors.clear();
+        this.defaultResponse = { success: true };
+        this.defaultError = null;
+        this.latestRequest = null;
+    }
+    /**
+     * Helper method to handle the common response/error/delay logic
+     */
+    async handleRequest(method, endpoint, data, params, headers) {
+        this.latestRequest = { method, endpoint, data, params, headers };
+        // Apply delay if configured
+        if (this.delay > 0) {
+            await new Promise((resolve) => setTimeout(resolve, this.delay));
+        }
+        // Check if there's a specific error for this endpoint
+        if (this.mockErrors.has(endpoint)) {
+            throw this.mockErrors.get(endpoint);
+        }
+        // Check if there's a default error
+        if (this.defaultError) {
+            throw this.defaultError;
+        }
+        // Return mock response for the endpoint, or the default response
+        return this.mockResponses.has(endpoint)
+            ? this.mockResponses.get(endpoint)
+            : this.defaultResponse;
+    }
+    /**
+     * Mock implementation of the get method
+     */
+    async get(endpoint, params, headers = {}) {
+        return this.handleRequest('GET', endpoint, undefined, params, headers);
+    }
+    /**
+     * Mock implementation of the getWithHeaders method
+     */
+    async getWithHeaders(endpoint, params, headers = {}) {
+        const data = await this.handleRequest('GET', endpoint, undefined, params, headers);
+        return {
+            data,
+            headers: {
+                'content-type': 'application/json',
+                'x-mock-header': 'mock-value',
+            },
+        };
+    }
+    /**
+     * Mock implementation of the post method
+     */
+    async post(endpoint, data, params, headers = {}) {
+        return this.handleRequest('POST', endpoint, data, params, headers);
+    }
+    /**
+     * Mock implementation of the postWithHeaders method
+     */
+    async postWithHeaders(endpoint, data, params, headers = {}) {
+        const responseData = await this.handleRequest('POST', endpoint, data, params, headers);
+        return {
+            data: responseData,
+            headers: {
+                'content-type': 'application/json',
+                'x-mock-header': 'mock-value',
+            },
+        };
+    }
+    /**
+     * Mock implementation of setAuthentication
+     */
+    setAuthentication(token, apiKey) {
+        // No-op in mock implementation
+        console.log('setAuthentication called with token:', token, 'and apiKey:', apiKey);
+    }
+}
+export default MockNetworkClient;

package/dist/src/external/ports/cacheManager.d.ts

@@ -0,0 +1,17 @@
+export type CachedData = {
+    data: unknown;
+    timestamp: number;
+};
+export interface ProduceCacheKeyParams {
+    endpoint: string;
+    params?: Record<string, any>;
+    data?: any;
+}
+export interface ICacheManager {
+    setCache(key: string, data: unknown): void;
+    getCache<T = any>(key: string): T | null;
+    clearCache(key: string): void;
+    clearAllCache(): void;
+    clearCacheByPattern(pattern: string): void;
+    produceCacheKey(key: string): string;
+}

package/dist/src/external/ports/cacheManager.js

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

package/dist/src/external/ports/networkClient.d.ts

@@ -0,0 +1,19 @@
+export interface INetworkClient {
+    get<TResponseData = any>(endpoint: string, params?: Record<string, any>, headers?: Record<string, string>): Promise<TResponseData>;
+    post<TRequestData = any, TResponseData = any>(endpoint: string, data: TRequestData, params?: Record<string, any>, headers?: Record<string, string>): Promise<TResponseData>;
+    /**
+     * Get request that returns both data and headers
+     */
+    getWithHeaders<TResponseData = any>(endpoint: string, params?: Record<string, any>, headers?: Record<string, string>): Promise<{
+        data: TResponseData;
+        headers: Record<string, string>;
+    }>;
+    /**
+     * Post request that returns both data and headers
+     */
+    postWithHeaders<TRequestData = any, TResponseData = any>(endpoint: string, data: TRequestData, params?: Record<string, any>, headers?: Record<string, string>): Promise<{
+        data: TResponseData;
+        headers: Record<string, string>;
+    }>;
+    setAuthentication(token: string | null, apiKey: string | null): void;
+}

package/dist/src/external/ports/networkClient.js

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

package/dist/src/external/ports/renderer.d.ts

@@ -0,0 +1,4 @@
+export type UnmountFn = () => void;
+export interface IRenderer {
+    renderPanel(id: string): Promise<UnmountFn>;
+}

package/dist/src/external/ports/renderer.js

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

package/dist/src/external/spatial-navigation/__mocks__/withFocusable.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type { WithFocusableProps, WithFocusableState } from '../withFocusable';
+/**
+ * Mock implementation of withFocusable HOC for testing
+ * Returns the unwrapped component with props passed through
+ */
+export declare const withFocusable: () => (Component: React.ComponentType<any>) => (props: any) => JSX.Element;
+export default withFocusable;

package/dist/src/external/spatial-navigation/__mocks__/withFocusable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Mock implementation of withFocusable HOC for testing
+ * Returns the unwrapped component with props passed through
+ */
+export const withFocusable = () => (Component) => (props) => React.createElement(Component, { ...props });
+export default withFocusable;

package/dist/src/external/spatial-navigation/index.d.ts

@@ -0,0 +1,4 @@
+import withFocusable, { WithFocusableProps } from './withFocusable';
+import SpatialNavigation, { InitOptions, KeyMap } from './spatialNavigation';
+export { withFocusable, SpatialNavigation };
+export { InitOptions, KeyMap, WithFocusableProps };

package/dist/src/external/spatial-navigation/index.js

@@ -0,0 +1,3 @@
+import withFocusable from './withFocusable';
+import SpatialNavigation from './spatialNavigation';
+export { withFocusable, SpatialNavigation };

package/dist/src/external/spatial-navigation/measureLayout.d.ts

@@ -0,0 +1,2 @@
+declare const measureLayout: (node: any, callback: (x: number, y: number, width: number, height: number, left: number, top: number) => void) => void;
+export default measureLayout;

package/dist/src/external/spatial-navigation/measureLayout.js

@@ -0,0 +1,30 @@
+const ELEMENT_NODE = 1;
+const getRect = (node) => {
+    let { offsetParent } = node;
+    const height = node.offsetHeight;
+    const width = node.offsetWidth;
+    let left = node.offsetLeft;
+    let top = node.offsetTop;
+    while (offsetParent && offsetParent.nodeType === ELEMENT_NODE) {
+        left += offsetParent.offsetLeft - offsetParent.scrollLeft;
+        top += offsetParent.offsetTop - offsetParent.scrollTop;
+        ({ offsetParent } = offsetParent);
+    }
+    return {
+        height,
+        left,
+        top,
+        width,
+    };
+};
+const measureLayout = (node, callback) => {
+    const relativeNode = node && node.parentNode;
+    if (relativeNode) {
+        const relativeRect = getRect(relativeNode);
+        const { height, left, top, width } = getRect(node);
+        const x = left - relativeRect.left;
+        const y = top - relativeRect.top;
+        callback(x, y, width, height, left, top);
+    }
+};
+export default measureLayout;

package/dist/src/external/spatial-navigation/spatialNavigation.d.ts

@@ -0,0 +1,160 @@
+import { Details, Direction, KEY_BACK, Layout } from './utils';
+import { KEY_ENTER } from './utils';
+export declare const ROOT_FOCUS_KEY = "SN:ROOT";
+export type KeyType = Direction | typeof KEY_ENTER | typeof KEY_BACK;
+export interface KeyMap {
+    [key: string]: number[];
+}
+interface FocusableComponent {
+    focusKey: string;
+    node: HTMLElement;
+    parentFocusKey: string | null;
+    onEnterPressHandler?: (details: Details) => void;
+    onBackPressHandler?: (details: Details) => void;
+    onClickPressHandler?: (details: Details) => void;
+    onEnterReleaseHandler?: () => void;
+    onArrowPressHandler?: (direction: Direction, details: Details) => boolean | void;
+    onBecameFocusedHandler?: (layout: Layout, details: any) => void;
+    onBecameBlurredHandler?: (layout: Layout, details: any) => void;
+    onUpdateFocus?: (isFocused: boolean) => void;
+    onUpdateHasFocusedChild?: (hasFocusedChild: boolean) => void;
+    forgetLastFocusedChild?: boolean;
+    trackChildren?: boolean;
+    lastFocusedChildKey: string | null;
+    preferredChildFocusKey?: string;
+    focusable: boolean;
+    blockNavigationOut?: boolean;
+    autoRestoreFocus?: boolean;
+    layout: Layout;
+    layoutUpdated: boolean;
+}
+interface Corner {
+    x: number;
+    y: number;
+}
+interface RefCorners {
+    a: Corner;
+    b: Corner;
+}
+export interface InitOptions {
+    debug?: boolean;
+    visualDebug?: boolean;
+    nativeMode?: boolean;
+    throttle?: number;
+    throttleKeypresses?: boolean;
+}
+interface AddFocusableOptions {
+    focusKey: string;
+    node: HTMLElement;
+    parentFocusKey: string | null;
+    onEnterPressHandler?: (details: Details) => void;
+    onClickPressHandler?: (details: Details) => void;
+    onEnterReleaseHandler?: () => void;
+    onBackPressHandler?: (details: Details) => void;
+    onArrowPressHandler?: (direction: Direction, details: Details) => boolean | void;
+    onBecameFocusedHandler?: (layout: Layout, details: any) => void;
+    onBecameBlurredHandler?: (layout: Layout, details: any) => void;
+    forgetLastFocusedChild?: boolean;
+    trackChildren?: boolean;
+    onUpdateFocus?: (isFocused: boolean) => void;
+    onUpdateHasFocusedChild?: (hasFocusedChild: boolean) => void;
+    preferredChildFocusKey?: string;
+    autoRestoreFocus?: boolean;
+    focusable?: boolean;
+    blockNavigationOut?: boolean;
+}
+interface UpdateFocusableOptions {
+    node?: HTMLElement;
+    preferredChildFocusKey?: string;
+    focusable?: boolean;
+    blockNavigationOut?: boolean;
+}
+export declare const getChildClosestToOrigin: (children: FocusableComponent[]) => FocusableComponent;
+declare class SpatialNavigation {
+    private focusableComponents;
+    focusKey: string | null;
+    private parentsHavingFocusedChild;
+    private nativeMode;
+    private throttle;
+    private throttleKeypresses;
+    private pressedKeys;
+    paused: boolean;
+    private keyDownEventListener;
+    private clickEventListener;
+    private keyUpEventListener;
+    private keyMap;
+    private debug;
+    private visualDebugger;
+    private logIndex;
+    /**
+     * Used to determine the coordinate that will be used to filter items that are over the "edge"
+     */
+    static getCutoffCoordinate(isVertical: boolean, isIncremental: boolean, isSibling: boolean, layout: Layout): number;
+    /**
+     * Returns two corners (a and b) coordinates that are used as a reference points
+     * Where "a" is always leftmost and topmost corner, and "b" is rightmost bottommost corner
+     */
+    static getRefCorners(direction: Direction, isSibling: boolean, layout: Layout): RefCorners;
+    /**
+     * Calculates if the sibling node is intersecting enough with the ref node by the secondary coordinate
+     */
+    static isAdjacentSlice(refCorners: RefCorners, siblingCorners: RefCorners, isVerticalDirection: boolean): boolean;
+    static getPrimaryAxisDistance(refCorners: RefCorners, siblingCorners: RefCorners, isVerticalDirection: boolean): number;
+    static getSecondaryAxisDistance(refCorners: RefCorners, siblingCorners: RefCorners, isVerticalDirection: boolean): number;
+    /**
+     * Inspired by: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS_for_TV/TV_remote_control_navigation#Algorithm_design
+     * Ref Corners are the 2 corners of the current component in the direction of navigation
+     * They used as a base to measure adjacent slices
+     */
+    sortSiblingsByPriority(siblings: FocusableComponent[], currentLayout: Layout, direction: Direction, _focusKey: string): FocusableComponent[];
+    constructor(options?: InitOptions);
+    init({ debug, visualDebug, nativeMode, throttle, throttleKeypresses, }?: InitOptions): void;
+    startDrawLayouts(): void;
+    destroy(): void;
+    getEventType(keyCode: number): KeyType | undefined;
+    bindEventHandlers(): void;
+    unbindEventHandlers(): void;
+    findFocusKeyForElement(element: HTMLElement): string | null;
+    onClickPress(details: Details): void;
+    onEnterPress(details: Details): void;
+    onBackPress(details: Details): void;
+    onEnterRelease(): void;
+    onArrowPress(direction: Direction, details: Details): boolean | void;
+    navigateByDirection(direction: Direction, details?: Details): void;
+    onKeyEvent(event: KeyboardEvent): void;
+    smartNavigate(direction: Direction, fromParentFocusKey: string | null, details: Details): void;
+    saveLastFocusedChildKey(component: FocusableComponent | undefined, focusKey: string): void;
+    log(functionName: string, debugString: string, ...rest: any[]): void;
+    getNextFocusKey(targetFocusKey: string): string;
+    addFocusable({ focusKey, node, parentFocusKey, onEnterPressHandler, onEnterReleaseHandler, onBackPressHandler, onArrowPressHandler, onBecameFocusedHandler, onBecameBlurredHandler, forgetLastFocusedChild, trackChildren, onUpdateFocus, onUpdateHasFocusedChild, preferredChildFocusKey, onClickPressHandler, autoRestoreFocus, focusable, blockNavigationOut, }: AddFocusableOptions): void;
+    removeFocusable({ focusKey }: {
+        focusKey: string;
+    }): void;
+    getNodeLayoutByFocusKey(focusKey: string): Layout | null;
+    setCurrentFocusedKey(newFocusKey: string, details?: Details): void;
+    updateParentsHasFocusedChild(focusKey: string, details: Details): void;
+    updateParentsLastFocusedChild(focusKey: string): void;
+    getKeyMap(): KeyMap;
+    setKeyMap(keyMap: KeyMap): void;
+    isFocusableComponent(focusKey: string): boolean;
+    /**
+     * Checks whether the focusableComponent is actually participating in spatial navigation (in other words, is a
+     * 'focusable' focusableComponent). Seems less confusing than calling it isFocusableFocusableComponent()
+     */
+    isParticipatingFocusableComponent(focusKey: string): boolean;
+    onIntermediateNodeBecameFocused(focusKey: string, details: Details): void;
+    onIntermediateNodeBecameBlurred(focusKey: string, details: Details): void;
+    pause(): void;
+    resume(): void;
+    setFocus(targetFocusKey: string, details?: Details): void;
+    updateAllLayouts(): void;
+    updateLayout(focusKey: string): void;
+    updateFocusable(focusKey: string, { node, preferredChildFocusKey, focusable, blockNavigationOut, }: UpdateFocusableOptions): void;
+    isNativeMode(): boolean;
+    getFocusableComponents(): FocusableComponent[];
+    getFocusableComponentsByParentFocusKey(parentFocusKey: string): FocusableComponent[];
+}
+/**
+ * Export singleton
+ */
+export default SpatialNavigation;