@xyo-network/react-webapp 2.25.60 → 2.25.63

package/dist/cjs/components/Chrome.d.ts

@@ -1,4 +1,5 @@
 import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { WebAppNavigationType } from '@xyo-network/react-app-settings';
 import { ReactNode } from 'react';
 export interface WebAppChromeProps extends FlexBoxProps {
     appName: string;
@@ -6,5 +7,7 @@ export interface WebAppChromeProps extends FlexBoxProps {
     appbar?: ReactNode;
     errorPage?: ReactNode;
     footerElevation?: number;
+    navigationType?: WebAppNavigationType;
+    menuItems?: ReactNode;
 }
 export declare const WebAppChrome: React.FC<WebAppChromeProps>;

package/dist/cjs/components/Chrome.js

@@ -11,8 +11,8 @@ const react_shared_1 = require("@xyo-network/react-shared");
 const react_helmet_1 = require("react-helmet");
 const ErrorPage_1 = require("./ErrorPage");
 const WebAppChrome = (_a) => {
-    var { footerElevation = 4, errorPage, appbar, footer, children, appName } = _a, props = tslib_1.__rest(_a, ["footerElevation", "errorPage", "appbar", "footer", "children", "appName"]);
-    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch", height: "100vh" }, props, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, Object.assign({ defaultTitle: appName, titleTemplate: `%s | ${appName}` }, { children: (0, jsx_runtime_1.jsx)("meta", { content: "website", property: "og:type" }) })), appbar !== null && appbar !== void 0 ? appbar : (0, jsx_runtime_1.jsx)(react_appbar_1.ApplicationAppBar, {}), (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowCol, Object.assign({ overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch" }, { children: (0, jsx_runtime_1.jsx)(react_shared_1.ErrorBoundary, Object.assign({ fallback: errorPage !== null && errorPage !== void 0 ? errorPage : (0, jsx_runtime_1.jsx)(ErrorPage_1.WebAppErrorPage, {}) }, { children: children })) })), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ elevation: footerElevation, square: true }, { children: footer !== null && footer !== void 0 ? footer : (0, jsx_runtime_1.jsx)(react_footer_1.Footer, { dynamicHeight: true }) }))] })));
+    var { menuItems, navigationType, footerElevation = 4, errorPage, appbar, footer, children, appName } = _a, props = tslib_1.__rest(_a, ["menuItems", "navigationType", "footerElevation", "errorPage", "appbar", "footer", "children", "appName"]);
+    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch", height: "100vh" }, props, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, Object.assign({ defaultTitle: appName, titleTemplate: `%s | ${appName}` }, { children: (0, jsx_runtime_1.jsx)("meta", { content: "website", property: "og:type" }) })), appbar !== null && appbar !== void 0 ? appbar : (0, jsx_runtime_1.jsx)(react_appbar_1.ApplicationAppBar, { menuItems: navigationType === 'menu' ? menuItems : undefined }), (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexGrowRow, Object.assign({ alignItems: "stretch" }, { children: [navigationType !== 'menu' ? menuItems : null, (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowCol, Object.assign({ overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch" }, { children: (0, jsx_runtime_1.jsx)(react_shared_1.ErrorBoundary, Object.assign({ fallback: errorPage !== null && errorPage !== void 0 ? errorPage : (0, jsx_runtime_1.jsx)(ErrorPage_1.WebAppErrorPage, {}) }, { children: children })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ elevation: footerElevation, square: true }, { children: footer !== null && footer !== void 0 ? footer : (0, jsx_runtime_1.jsx)(react_footer_1.Footer, { dynamicHeight: true }) }))] })));
 };
 exports.WebAppChrome = WebAppChrome;
 //# sourceMappingURL=Chrome.js.map

package/dist/cjs/components/Chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAqC;AACrC,yDAA0E;AAC1E,4DAA6D;AAC7D,4DAAkD;AAClD,4DAAyD;AAEzD,+CAAqC;AAErC,2CAA6C;AAUtC,MAAM,YAAY,GAAgC,CAAC,EAA+E,EAAE,EAAE;QAAnF,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,OAAY,EAAP,KAAK,sBAA7E,2EAA+E,CAAF;IACrI,OAAO,CACL,wBAAC,uBAAO,kBAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,IAAK,KAAK,eACpD,uBAAC,qBAAM,kBAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,gBAC7D,iCAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,IACtC,EACR,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,gCAAiB,KAAG,EAChC,uBAAC,2BAAW,kBAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,gBAC7E,uBAAC,4BAAa,kBAAC,QAAQ,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,uBAAC,2BAAe,KAAG,gBAAG,QAAQ,IAAiB,IACzE,EACd,uBAAC,gBAAK,kBAAC,SAAS,EAAE,eAAe,EAAE,MAAM,sBACtC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,qBAAM,IAAC,aAAa,SAAG,IAC7B,KACA,CACX,CAAA;AACH,CAAC,CAAA;AAfY,QAAA,YAAY,gBAexB"}
+{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAqC;AACrC,yDAAuF;AAEvF,4DAA6D;AAC7D,4DAAkD;AAClD,4DAAyD;AAEzD,+CAAqC;AAErC,2CAA6C;AAYtC,MAAM,YAAY,GAAgC,CAAC,EAA0G,EAAE,EAAE;QAA9G,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,OAAY,EAAP,KAAK,sBAAxG,0GAA0G,CAAF;IAChK,OAAO,CACL,wBAAC,uBAAO,kBAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,IAAK,KAAK,eACpD,uBAAC,qBAAM,kBAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,gBAC7D,iCAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,IACtC,EACR,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,gCAAiB,IAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,EAC9F,wBAAC,2BAAW,kBAAC,UAAU,EAAC,SAAS,iBAC9B,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7C,uBAAC,2BAAW,kBAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,gBAC7E,uBAAC,4BAAa,kBAAC,QAAQ,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,uBAAC,2BAAe,KAAG,gBAAG,QAAQ,IAAiB,IACzE,KACF,EACd,uBAAC,gBAAK,kBAAC,SAAS,EAAE,eAAe,EAAE,MAAM,sBACtC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAC,qBAAM,IAAC,aAAa,SAAG,IAC7B,KACA,CACX,CAAA;AACH,CAAC,CAAA;AAlBY,QAAA,YAAY,gBAkBxB"}

package/dist/cjs/components/Page.d.ts

@@ -5,6 +5,8 @@ export interface WebAppPageProps extends FlexBoxProps {
     container?: ContainerProps['maxWidth'];
     disableGutters?: boolean;
     breadcrumbs?: ReactNode;
+    disableBreadcrumbGutter?: boolean;
+    spacing?: string | number;
 }
 export declare const WebAppPage: React.FC<WebAppPageProps>;
 /** @deprecated use WebAppPagePage instead */

package/dist/cjs/components/Page.js

@@ -10,7 +10,7 @@ const react_shared_1 = require("@xylabs/react-shared");
 const react_helmet_1 = require("react-helmet");
 const react_router_dom_1 = require("react-router-dom");
 const WebAppPage = (_a) => {
-    var { disableGutters, title, container, breadcrumbs, children } = _a, props = tslib_1.__rest(_a, ["disableGutters", "title", "container", "breadcrumbs", "children"]);
+    var { spacing = 1, disableBreadcrumbGutter, disableGutters, title, container, breadcrumbs, children } = _a, props = tslib_1.__rest(_a, ["spacing", "disableBreadcrumbGutter", "disableGutters", "title", "container", "breadcrumbs", "children"]);
     const userEvents = (0, react_pixel_1.useUserEvents)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     (0, react_shared_1.useAsyncEffect)(
@@ -18,7 +18,7 @@ const WebAppPage = (_a) => {
     () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         yield (userEvents === null || userEvents === void 0 ? void 0 : userEvents.viewContent({ name: title !== null && title !== void 0 ? title : 'NodeBasePage', path: location.pathname }));
     }), [pathname, title, userEvents]);
-    const Body = (props) => ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexGrowCol, Object.assign({ gap: 2, paddingY: 2, justifyContent: "flex-start", alignItems: "stretch" }, props, { children: [breadcrumbs, children] })));
+    const Body = (props) => ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexGrowCol, Object.assign({ gap: 1, paddingY: spacing, justifyContent: "flex-start", alignItems: "stretch" }, props, { children: [(0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ justifyContent: "flex-start", marginX: disableBreadcrumbGutter ? 0 : spacing }, { children: breadcrumbs })), children] })));
     return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexGrowCol, Object.assign({ alignItems: "stretch", justifyContent: "flex-start", minHeight: 0, overflow: "visible scroll" }, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, { title: title }), container ? ((0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ disableGutters: disableGutters, style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container }, { children: (0, jsx_runtime_1.jsx)(Body, Object.assign({}, props)) }))) : ((0, jsx_runtime_1.jsx)(Body, Object.assign({ paddingX: disableGutters ? 0 : 1 }, props)))] })));
 };
 exports.WebAppPage = WebAppPage;

package/dist/cjs/components/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAyD;AACzD,yDAAiE;AACjE,qDAAmD;AACnD,uDAAqD;AAErD,+CAAqC;AACrC,uDAA8C;AAOvC,MAAM,UAAU,GAA8B,CAAC,EAAqE,EAAE,EAAE;QAAzE,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAAnE,mEAAqE,CAAF;IACvH,MAAM,UAAU,GAAG,IAAA,2BAAa,GAAE,CAAA;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,8BAAW,GAAE,CAAA;IAElC,IAAA,6BAAc;IACZ,uDAAuD;IACvD,GAAS,EAAE;QACT,MAAM,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,cAAc,EAAE,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA,CAAA;IAC3F,CAAC,CAAA,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAA;IAED,MAAM,IAAI,GAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9C,wBAAC,2BAAW,kBAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,IAAK,KAAK,eACzF,WAAW,EACX,QAAQ,KACG,CACf,CAAA;IAED,OAAO,CACL,wBAAC,2BAAW,kBAAC,UAAU,EAAC,SAAS,EAAC,cAAc,EAAC,YAAY,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,gBAAgB,iBACnG,uBAAC,qBAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EACvB,SAAS,CAAC,CAAC,CAAC,CACX,uBAAC,oBAAS,kBACR,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE,EACrH,QAAQ,EAAE,SAAS,gBAEnB,uBAAC,IAAI,oBAAK,KAAK,EAAI,IACT,CACb,CAAC,CAAC,CAAC,CACF,uBAAC,IAAI,kBAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAM,KAAK,EAAI,CACtD,KACW,CACf,CAAA;AACH,CAAC,CAAA;AAnCY,QAAA,UAAU,cAmCtB;AAED,6CAA6C;AAChC,QAAA,QAAQ,GAAG,kBAAU,CAAA"}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAyD;AACzD,yDAA0E;AAC1E,qDAAmD;AACnD,uDAAqD;AAErD,+CAAqC;AACrC,uDAA8C;AASvC,MAAM,UAAU,GAA8B,CAAC,EAA2G,EAAE,EAAE;QAA/G,EAAE,OAAO,GAAG,CAAC,EAAE,uBAAuB,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAAzG,yGAA2G,CAAF;IAC7J,MAAM,UAAU,GAAG,IAAA,2BAAa,GAAE,CAAA;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,8BAAW,GAAE,CAAA;IAElC,IAAA,6BAAc;IACZ,uDAAuD;IACvD,GAAS,EAAE;QACT,MAAM,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,cAAc,EAAE,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA,CAAA;IAC3F,CAAC,CAAA,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAA;IAED,MAAM,IAAI,GAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9C,wBAAC,2BAAW,kBAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,IAAK,KAAK,eAChG,uBAAC,uBAAO,kBAAC,cAAc,EAAC,YAAY,EAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,gBAChF,WAAW,IACJ,EACT,QAAQ,KACG,CACf,CAAA;IAED,OAAO,CACL,wBAAC,2BAAW,kBAAC,UAAU,EAAC,SAAS,EAAC,cAAc,EAAC,YAAY,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,gBAAgB,iBACnG,uBAAC,qBAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EACvB,SAAS,CAAC,CAAC,CAAC,CACX,uBAAC,oBAAS,kBACR,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE,EACrH,QAAQ,EAAE,SAAS,gBAEnB,uBAAC,IAAI,oBAAK,KAAK,EAAI,IACT,CACb,CAAC,CAAC,CAAC,CACF,uBAAC,IAAI,kBAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAM,KAAK,EAAI,CACtD,KACW,CACf,CAAA;AACH,CAAC,CAAA;AArCY,QAAA,UAAU,cAqCtB;AAED,6CAA6C;AAChC,QAAA,QAAQ,GAAG,kBAAU,CAAA"}

package/dist/cjs/contexts/AppSettings/Context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { WebAppNavigationType } from '@xyo-network/react-app-settings';
+export interface AppSettingsContextProps {
+    darkMode?: boolean;
+    developerMode?: boolean;
+    enableDarkMode?: (value: boolean) => void;
+    enableDeveloperMode?: (value: boolean) => void;
+    changeNavigationType?: (value: WebAppNavigationType) => void;
+    navigationType?: WebAppNavigationType;
+}
+export declare const AppSettingsContext: import("react").Context<AppSettingsContextProps>;

package/dist/cjs/contexts/AppSettings/Context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppSettingsContext = void 0;
+const react_1 = require("react");
+const appSettingDefault_1 = require("./appSettingDefault");
+exports.AppSettingsContext = (0, react_1.createContext)((0, appSettingDefault_1.appSettingDefault)());
+//# sourceMappingURL=Context.js.map

package/dist/cjs/contexts/AppSettings/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Context.ts"],"names":[],"mappings":";;;AACA,iCAAqC;AAErC,2DAAuD;AAW1C,QAAA,kBAAkB,GAAG,IAAA,qBAAa,EAA0B,IAAA,qCAAiB,GAAE,CAAC,CAAA"}

package/dist/cjs/contexts/AppSettings/Provider.d.ts

@@ -0,0 +1,8 @@
+import { WithChildren } from '@xylabs/react-shared';
+import { ProviderProps } from 'react';
+import { AppSettingsContextProps } from './Context';
+import { AppSettingsStorage } from './Storage';
+export interface AppSettingsProviderProps<T extends AppSettingsContextProps = AppSettingsContextProps> extends ProviderProps<T> {
+    storage?: AppSettingsStorage;
+}
+export declare const AppSettingsProvider: React.FC<WithChildren<AppSettingsProviderProps>>;

package/dist/cjs/contexts/AppSettings/Provider.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppSettingsProvider = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Context_1 = require("./Context");
+const Storage_1 = require("./Storage");
+const AppSettingsProvider = (_a) => {
+    var { storage = new Storage_1.AppSettingsStorage(), value, children } = _a, props = tslib_1.__rest(_a, ["storage", "value", "children"]);
+    const [developerMode, setDeveloperMode] = (0, react_1.useState)(storage.developerMode);
+    const [darkMode, setDarkMode] = (0, react_1.useState)(storage.darkMode);
+    const [navigationType, setNaviagtionType] = (0, react_1.useState)(storage.navigationType);
+    const enableDeveloperMode = (value) => {
+        storage.developerMode = value;
+        setDeveloperMode(storage.developerMode);
+    };
+    const enableDarkMode = (value) => {
+        storage.darkMode = value;
+        setDarkMode(storage.darkMode);
+    };
+    const changeNavigationType = (value) => {
+        storage.navigationType = value;
+        setNaviagtionType(value);
+    };
+    return ((0, jsx_runtime_1.jsx)(Context_1.AppSettingsContext.Provider, Object.assign({ value: Object.assign({ changeNavigationType,
+            darkMode,
+            developerMode,
+            enableDarkMode,
+            enableDeveloperMode,
+            navigationType }, value) }, props, { children: children })));
+};
+exports.AppSettingsProvider = AppSettingsProvider;
+//# sourceMappingURL=Provider.js.map

package/dist/cjs/contexts/AppSettings/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Provider.tsx"],"names":[],"mappings":";;;;;AAEA,iCAA+C;AAE/C,uCAAuE;AACvE,uCAA8C;AAMvC,MAAM,mBAAmB,GAAqD,CAAC,EAAiE,EAAE,EAAE;QAArE,EAAE,OAAO,GAAG,IAAI,4BAAkB,EAAE,EAAE,KAAK,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAA/D,gCAAiE,CAAF;IACnJ,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IACzE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;IAC1D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,OAAO,CAAC,cAAc,CAAC,CAAA;IAE5E,MAAM,mBAAmB,GAAG,CAAC,KAAc,EAAE,EAAE;QAC7C,OAAO,CAAC,aAAa,GAAG,KAAK,CAAA;QAC7B,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IACzC,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE;QACxC,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAA;QACxB,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,CAAC,KAA2B,EAAE,EAAE;QAC3D,OAAO,CAAC,cAAc,GAAG,KAAK,CAAA;QAC9B,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,OAAO,CACL,uBAAC,4BAAkB,CAAC,QAAQ,kBAC1B,KAAK,kBACH,oBAAoB;YACpB,QAAQ;YACR,aAAa;YACb,cAAc;YACd,mBAAmB;YACnB,cAAc,IAEX,KAAK,KAEN,KAAK,cAER,QAAQ,IACmB,CAC/B,CAAA;AACH,CAAC,CAAA;AArCY,QAAA,mBAAmB,uBAqC/B"}

package/dist/cjs/contexts/AppSettings/Slug.d.ts

@@ -0,0 +1,5 @@
+export declare enum AppSettingSlug {
+    DarkMode = "darkmode",
+    Developer = "developer",
+    NavigationType = "navgiationType"
+}

package/dist/cjs/contexts/AppSettings/Slug.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppSettingSlug = void 0;
+var AppSettingSlug;
+(function (AppSettingSlug) {
+    AppSettingSlug["DarkMode"] = "darkmode";
+    AppSettingSlug["Developer"] = "developer";
+    AppSettingSlug["NavigationType"] = "navgiationType";
+})(AppSettingSlug = exports.AppSettingSlug || (exports.AppSettingSlug = {}));
+//# sourceMappingURL=Slug.js.map

package/dist/cjs/contexts/AppSettings/Slug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slug.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Slug.ts"],"names":[],"mappings":";;;AAAA,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,yCAAuB,CAAA;IACvB,mDAAiC,CAAA;AACnC,CAAC,EAJW,cAAc,GAAd,sBAAc,KAAd,sBAAc,QAIzB"}

package/dist/cjs/contexts/AppSettings/Storage.d.ts

@@ -0,0 +1,11 @@
+import { WebAppNavigationType } from '@xyo-network/react-app-settings';
+import { AppSettingsStorageBase } from './StorageBase';
+export declare class AppSettingsStorage extends AppSettingsStorageBase {
+    constructor(prefix?: string, defaults?: Record<string, unknown>);
+    get darkMode(): boolean;
+    set darkMode(value: boolean);
+    get developerMode(): boolean;
+    set developerMode(value: boolean);
+    get navigationType(): WebAppNavigationType;
+    set navigationType(value: WebAppNavigationType);
+}

package/dist/cjs/contexts/AppSettings/Storage.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppSettingsStorage = void 0;
+const appSettingDefault_1 = require("./appSettingDefault");
+const Slug_1 = require("./Slug");
+const StorageBase_1 = require("./StorageBase");
+class AppSettingsStorage extends StorageBase_1.AppSettingsStorageBase {
+    constructor(prefix = 'AppSettings', defaults) {
+        super(prefix, Object.assign(Object.assign({}, (0, appSettingDefault_1.appSettingDefault)()), defaults));
+    }
+    get darkMode() {
+        return this.getBoolean(Slug_1.AppSettingSlug.DarkMode);
+    }
+    set darkMode(value) {
+        this.setBoolean(Slug_1.AppSettingSlug.DarkMode, value);
+    }
+    get developerMode() {
+        return this.getBoolean(Slug_1.AppSettingSlug.Developer);
+    }
+    set developerMode(value) {
+        this.setBoolean(Slug_1.AppSettingSlug.Developer, value);
+    }
+    get navigationType() {
+        return this.getString(Slug_1.AppSettingSlug.NavigationType);
+    }
+    set navigationType(value) {
+        this.setString(Slug_1.AppSettingSlug.NavigationType, value);
+    }
+}
+exports.AppSettingsStorage = AppSettingsStorage;
+//# sourceMappingURL=Storage.js.map

package/dist/cjs/contexts/AppSettings/Storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Storage.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Storage.ts"],"names":[],"mappings":";;;AAEA,2DAAuD;AACvD,iCAAuC;AACvC,+CAAsD;AAEtD,MAAa,kBAAmB,SAAQ,oCAAsB;IAC5D,YAAY,MAAM,GAAG,aAAa,EAAE,QAAkC;QACpE,KAAK,CAAC,MAAM,kCAAO,IAAA,qCAAiB,GAAE,GAAK,QAAQ,EAAG,CAAA;IACxD,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,qBAAc,CAAC,QAAQ,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,UAAU,CAAC,qBAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,qBAAc,CAAC,SAAS,CAAC,CAAA;IAClD,CAAC;IAED,IAAI,aAAa,CAAC,KAAc;QAC9B,IAAI,CAAC,UAAU,CAAC,qBAAc,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAClD,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC,qBAAc,CAAC,cAAc,CAAyB,CAAA;IAC9E,CAAC;IAED,IAAI,cAAc,CAAC,KAA2B;QAC5C,IAAI,CAAC,SAAS,CAAC,qBAAc,CAAC,cAAc,EAAE,KAAK,CAAC,CAAA;IACtD,CAAC;CACF;AA5BD,gDA4BC"}

package/dist/cjs/contexts/AppSettings/StorageBase.d.ts

@@ -0,0 +1,15 @@
+export declare class AppSettingsStorageBase {
+    private prefix;
+    private defaults;
+    constructor(prefix?: string, defaults?: Record<string, unknown>);
+    getBoolean(name: string): boolean;
+    setBoolean(name: string, value: boolean): void;
+    setNumber(name: string, value: number): void;
+    getNumber(name: string): number;
+    getString(name: string): string;
+    setString(name: string, value: string): void;
+    getStringArray(name: string): string[];
+    setStringArray(name: string, value: string[]): void;
+    getObject<T>(name: string): T;
+    setObject<T>(name: string, value: T): void;
+}

package/dist/cjs/contexts/AppSettings/StorageBase.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppSettingsStorageBase = void 0;
+const sdk_js_1 = require("@xylabs/sdk-js");
+const react_shared_1 = require("@xyo-network/react-shared");
+class AppSettingsStorageBase {
+    constructor(prefix = 'AppSettings', defaults) {
+        this.prefix = prefix;
+        this.defaults = defaults !== null && defaults !== void 0 ? defaults : {};
+    }
+    getBoolean(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            (0, sdk_js_1.assertEx)(typeof this.defaults[name] === 'boolean', 'Default value is not boolean');
+            const defaultValue = this.defaults[name];
+            (0, sdk_js_1.assertEx)(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue !== 'false';
+    }
+    setBoolean(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+    setNumber(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+    getNumber(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            (0, sdk_js_1.assertEx)(typeof this.defaults[name] === 'boolean', 'Default value is not boolean');
+            const defaultValue = this.defaults[name];
+            (0, sdk_js_1.assertEx)(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return parseFloat(storedValue);
+    }
+    getString(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            (0, react_shared_1.assertDefinedEx)(typeof this.defaults[name] === 'string', 'Default value is not string');
+            const defaultValue = this.defaults[name];
+            (0, sdk_js_1.assertEx)(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue;
+    }
+    setString(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, value);
+    }
+    getStringArray(name) {
+        var _a;
+        const storedValue = (_a = localStorage.getItem(`${this.prefix}|${name}`)) === null || _a === void 0 ? void 0 : _a.split(',');
+        if (!storedValue) {
+            (0, react_shared_1.assertDefinedEx)(Array.isArray(this.defaults[name]), 'Default value is not array');
+            const defaultValue = this.defaults[name];
+            (0, sdk_js_1.assertEx)(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue;
+    }
+    setStringArray(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, value.join(','));
+    }
+    getObject(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        const parsedStoredValue = storedValue ? JSON.parse(storedValue) : null;
+        if (!parsedStoredValue) {
+            (0, sdk_js_1.assertEx)(typeof this.defaults[name] === 'object', 'Default value is not object');
+            return (0, sdk_js_1.assertEx)(this.defaults[name], `Missing Default for ${name}`);
+        }
+        return parsedStoredValue;
+    }
+    setObject(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+}
+exports.AppSettingsStorageBase = AppSettingsStorageBase;
+//# sourceMappingURL=StorageBase.js.map

package/dist/cjs/contexts/AppSettings/StorageBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageBase.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/StorageBase.ts"],"names":[],"mappings":"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"}

package/dist/cjs/contexts/AppSettings/appSettingDefault.d.ts

@@ -0,0 +1 @@
+export declare const appSettingDefault: () => Record<string, unknown>;

package/dist/cjs/contexts/AppSettings/appSettingDefault.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appSettingDefault = void 0;
+const Slug_1 = require("./Slug");
+const appSettingDefault = () => {
+    return {
+        [Slug_1.AppSettingSlug.DarkMode]: false,
+        [Slug_1.AppSettingSlug.Developer]: false,
+        [Slug_1.AppSettingSlug.NavigationType]: 'menu',
+    };
+};
+exports.appSettingDefault = appSettingDefault;
+//# sourceMappingURL=appSettingDefault.js.map

package/dist/cjs/contexts/AppSettings/appSettingDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appSettingDefault.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/appSettingDefault.ts"],"names":[],"mappings":";;;AAAA,iCAAuC;AAEhC,MAAM,iBAAiB,GAAG,GAA4B,EAAE;IAC7D,OAAO;QACL,CAAC,qBAAc,CAAC,QAAQ,CAAC,EAAE,KAAK;QAChC,CAAC,qBAAc,CAAC,SAAS,CAAC,EAAE,KAAK;QACjC,CAAC,qBAAc,CAAC,cAAc,CAAC,EAAE,MAAM;KACxC,CAAA;AACH,CAAC,CAAA;AANY,QAAA,iBAAiB,qBAM7B"}

package/dist/cjs/contexts/AppSettings/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Context';
+export * from './Provider';
+export * from './Slug';
+export * from './Storage';
+export * from './StorageBase';
+export * from './useAppSettings';

package/dist/cjs/contexts/AppSettings/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Context"), exports);
+tslib_1.__exportStar(require("./Provider"), exports);
+tslib_1.__exportStar(require("./Slug"), exports);
+tslib_1.__exportStar(require("./Storage"), exports);
+tslib_1.__exportStar(require("./StorageBase"), exports);
+tslib_1.__exportStar(require("./useAppSettings"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/contexts/AppSettings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/index.ts"],"names":[],"mappings":";;;AAAA,oDAAyB;AACzB,qDAA0B;AAC1B,iDAAsB;AACtB,oDAAyB;AACzB,wDAA6B;AAC7B,2DAAgC"}

package/dist/cjs/contexts/AppSettings/useAppSettings.d.ts

@@ -0,0 +1 @@
+export declare const useAppSettings: () => import("./Context").AppSettingsContextProps;

package/dist/cjs/contexts/AppSettings/useAppSettings.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppSettings = void 0;
+const react_1 = require("react");
+const Context_1 = require("./Context");
+const useAppSettings = () => {
+    return (0, react_1.useContext)(Context_1.AppSettingsContext);
+};
+exports.useAppSettings = useAppSettings;
+//# sourceMappingURL=useAppSettings.js.map

package/dist/cjs/contexts/AppSettings/useAppSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppSettings.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/useAppSettings.ts"],"names":[],"mappings":";;;AAAA,iCAAkC;AAElC,uCAA8C;AAEvC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,IAAA,kBAAU,EAAC,4BAAkB,CAAC,CAAA;AACvC,CAAC,CAAA;AAFY,QAAA,cAAc,kBAE1B"}

package/dist/cjs/contexts/index.d.ts

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

package/dist/cjs/contexts/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AppSettings"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":";;;AAAA,wDAA6B"}

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./contexts"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B;AAC5B,qDAA0B"}

package/dist/esm/components/Chrome.d.ts

@@ -1,4 +1,5 @@
 import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { WebAppNavigationType } from '@xyo-network/react-app-settings';
 import { ReactNode } from 'react';
 export interface WebAppChromeProps extends FlexBoxProps {
     appName: string;
@@ -6,5 +7,7 @@ export interface WebAppChromeProps extends FlexBoxProps {
     appbar?: ReactNode;
     errorPage?: ReactNode;
     footerElevation?: number;
+    navigationType?: WebAppNavigationType;
+    menuItems?: ReactNode;
 }
 export declare const WebAppChrome: React.FC<WebAppChromeProps>;

package/dist/esm/components/Chrome.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Paper } from '@mui/material';
-import { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Paper } from '@mui/material';
+import { FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox';
 import { ApplicationAppBar } from '@xyo-network/react-appbar';
 import { Footer } from '@xyo-network/react-footer';
 import { ErrorBoundary } from '@xyo-network/react-shared';
 import { Helmet } from 'react-helmet';
 import { WebAppErrorPage } from './ErrorPage';
-export const WebAppChrome = ({ footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
-    return (_jsxs(FlexCol, { alignItems: "stretch", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, {}), _jsx(FlexGrowCol, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(WebAppErrorPage, {}), children: children }) }), _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) })] }));
+export const WebAppChrome = ({ menuItems, navigationType = 'menu', footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
+    return (_jsxs(FlexCol, { alignItems: "stretch", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, { menuItems: navigationType === 'menu' ? menuItems : undefined }), _jsxs(FlexGrowRow, { alignItems: "stretch", children: [navigationType !== 'menu' ? (_jsxs(_Fragment, { children: [menuItems, _jsx(Divider, { orientation: "vertical" })] })) : null, _jsx(FlexGrowCol, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(WebAppErrorPage, {}), children: children }) })] }), _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) })] }));
 };
 //# sourceMappingURL=Chrome.js.map

package/dist/esm/components/Chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAU7C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3I,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACpD,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACR,MAAM,IAAI,KAAC,iBAAiB,KAAG,EAChC,KAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC7E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,eAAe,KAAG,YAAG,QAAQ,GAAiB,GACzE,EACd,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,IACA,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAW,MAAM,uBAAuB,CAAA;AAEhG,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAY7C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,SAAS,EAAE,cAAc,GAAG,MAAM,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/K,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACpD,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACR,MAAM,IAAI,KAAC,iBAAiB,IAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,EAC9F,MAAC,WAAW,IAAC,UAAU,EAAC,SAAS,aAC9B,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3B,8BACG,SAAS,EACV,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,IACjC,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC7E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,eAAe,KAAG,YAAG,QAAQ,GAAiB,GACzE,IACF,EACd,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,IACA,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Page.d.ts

@@ -5,6 +5,8 @@ export interface WebAppPageProps extends FlexBoxProps {
     container?: ContainerProps['maxWidth'];
     disableGutters?: boolean;
     breadcrumbs?: ReactNode;
+    disableBreadcrumbGutter?: boolean;
+    spacing?: string | number;
 }
 export declare const WebAppPage: React.FC<WebAppPageProps>;
 /** @deprecated use WebAppPagePage instead */

package/dist/esm/components/Page.js

@@ -1,11 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Container } from '@mui/material';
-import { FlexGrowCol } from '@xylabs/react-flexbox';
+import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox';
 import { useUserEvents } from '@xylabs/react-pixel';
 import { useAsyncEffect } from '@xylabs/react-shared';
 import { Helmet } from 'react-helmet';
 import { useLocation } from 'react-router-dom';
-export const WebAppPage = ({ disableGutters, title, container, breadcrumbs, children, ...props }) => {
+export const WebAppPage = ({ spacing = 1, disableBreadcrumbGutter, disableGutters, title, container, breadcrumbs, children, ...props }) => {
     const userEvents = useUserEvents();
     const { pathname } = useLocation();
     useAsyncEffect(
@@ -13,7 +13,7 @@ export const WebAppPage = ({ disableGutters, title, container, breadcrumbs, chil
     async () => {
         await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname });
     }, [pathname, title, userEvents]);
-    const Body = (props) => (_jsxs(FlexGrowCol, { gap: 2, paddingY: 2, justifyContent: "flex-start", alignItems: "stretch", ...props, children: [breadcrumbs, children] }));
+    const Body = (props) => (_jsxs(FlexGrowCol, { gap: 1, paddingY: spacing, justifyContent: "flex-start", alignItems: "stretch", ...props, children: [_jsx(FlexRow, { justifyContent: "flex-start", marginX: disableBreadcrumbGutter ? 0 : spacing, children: breadcrumbs }), children] }));
     return (_jsxs(FlexGrowCol, { alignItems: "stretch", justifyContent: "flex-start", minHeight: 0, overflow: "visible scroll", children: [_jsx(Helmet, { title: title }), container ? (_jsx(Container, { disableGutters: disableGutters, style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container, children: _jsx(Body, { ...props }) })) : (_jsx(Body, { paddingX: disableGutters ? 0 : 1, ...props }))] }));
 };
 /** @deprecated use WebAppPagePage instead */

package/dist/esm/components/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACzD,OAAO,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAO9C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7H,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAElC,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,MAAM,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,cAAc,EAAE,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC3F,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAA;IAED,MAAM,IAAI,GAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9C,MAAC,WAAW,IAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACzF,WAAW,EACX,QAAQ,IACG,CACf,CAAA;IAED,OAAO,CACL,MAAC,WAAW,IAAC,UAAU,EAAC,SAAS,EAAC,cAAc,EAAC,YAAY,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,gBAAgB,aACnG,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EACvB,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,SAAS,IACR,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE,EACrH,QAAQ,EAAE,SAAS,YAEnB,KAAC,IAAI,OAAK,KAAK,GAAI,GACT,CACb,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAM,KAAK,GAAI,CACtD,IACW,CACf,CAAA;AACH,CAAC,CAAA;AAED,6CAA6C;AAC7C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAA"}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACzD,OAAO,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAS9C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,uBAAuB,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnK,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAElC,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,MAAM,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,cAAc,EAAE,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC3F,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAA;IAED,MAAM,IAAI,GAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9C,MAAC,WAAW,IAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aAChG,KAAC,OAAO,IAAC,cAAc,EAAC,YAAY,EAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,YAChF,WAAW,GACJ,EACT,QAAQ,IACG,CACf,CAAA;IAED,OAAO,CACL,MAAC,WAAW,IAAC,UAAU,EAAC,SAAS,EAAC,cAAc,EAAC,YAAY,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,gBAAgB,aACnG,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EACvB,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,SAAS,IACR,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE,EACrH,QAAQ,EAAE,SAAS,YAEnB,KAAC,IAAI,OAAK,KAAK,GAAI,GACT,CACb,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAM,KAAK,GAAI,CACtD,IACW,CACf,CAAA;AACH,CAAC,CAAA;AAED,6CAA6C;AAC7C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAA"}

package/dist/esm/contexts/AppSettings/Context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { WebAppNavigationType } from '@xyo-network/react-app-settings';
+export interface AppSettingsContextProps {
+    darkMode?: boolean;
+    developerMode?: boolean;
+    enableDarkMode?: (value: boolean) => void;
+    enableDeveloperMode?: (value: boolean) => void;
+    changeNavigationType?: (value: WebAppNavigationType) => void;
+    navigationType?: WebAppNavigationType;
+}
+export declare const AppSettingsContext: import("react").Context<AppSettingsContextProps>;

package/dist/esm/contexts/AppSettings/Context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { appSettingDefault } from './appSettingDefault';
+export const AppSettingsContext = createContext(appSettingDefault());
+//# sourceMappingURL=Context.js.map

package/dist/esm/contexts/AppSettings/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAWvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAA0B,iBAAiB,EAAE,CAAC,CAAA"}

package/dist/esm/contexts/AppSettings/Provider.d.ts

@@ -0,0 +1,8 @@
+import { WithChildren } from '@xylabs/react-shared';
+import { ProviderProps } from 'react';
+import { AppSettingsContextProps } from './Context';
+import { AppSettingsStorage } from './Storage';
+export interface AppSettingsProviderProps<T extends AppSettingsContextProps = AppSettingsContextProps> extends ProviderProps<T> {
+    storage?: AppSettingsStorage;
+}
+export declare const AppSettingsProvider: React.FC<WithChildren<AppSettingsProviderProps>>;

package/dist/esm/contexts/AppSettings/Provider.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AppSettingsContext } from './Context';
+import { AppSettingsStorage } from './Storage';
+export const AppSettingsProvider = ({ storage = new AppSettingsStorage(), value, children, ...props }) => {
+    const [developerMode, setDeveloperMode] = useState(storage.developerMode);
+    const [darkMode, setDarkMode] = useState(storage.darkMode);
+    const [navigationType, setNaviagtionType] = useState(storage.navigationType);
+    const enableDeveloperMode = (value) => {
+        storage.developerMode = value;
+        setDeveloperMode(storage.developerMode);
+    };
+    const enableDarkMode = (value) => {
+        storage.darkMode = value;
+        setDarkMode(storage.darkMode);
+    };
+    const changeNavigationType = (value) => {
+        storage.navigationType = value;
+        setNaviagtionType(value);
+    };
+    return (_jsx(AppSettingsContext.Provider, { value: {
+            changeNavigationType,
+            darkMode,
+            developerMode,
+            enableDarkMode,
+            enableDeveloperMode,
+            navigationType,
+            ...value,
+        }, ...props, children: children }));
+};
+//# sourceMappingURL=Provider.js.map

package/dist/esm/contexts/AppSettings/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Provider.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,kBAAkB,EAA2B,MAAM,WAAW,CAAA;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAM9C,MAAM,CAAC,MAAM,mBAAmB,GAAqD,CAAC,EAAE,OAAO,GAAG,IAAI,kBAAkB,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzJ,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IACzE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;IAC1D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;IAE5E,MAAM,mBAAmB,GAAG,CAAC,KAAc,EAAE,EAAE;QAC7C,OAAO,CAAC,aAAa,GAAG,KAAK,CAAA;QAC7B,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IACzC,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE;QACxC,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAA;QACxB,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,CAAC,KAA2B,EAAE,EAAE;QAC3D,OAAO,CAAC,cAAc,GAAG,KAAK,CAAA;QAC9B,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,oBAAoB;YACpB,QAAQ;YACR,aAAa;YACb,cAAc;YACd,mBAAmB;YACnB,cAAc;YAEd,GAAG,KAAK;SACT,KACG,KAAK,YAER,QAAQ,GACmB,CAC/B,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/contexts/AppSettings/Slug.d.ts

@@ -0,0 +1,5 @@
+export declare enum AppSettingSlug {
+    DarkMode = "darkmode",
+    Developer = "developer",
+    NavigationType = "navgiationType"
+}

package/dist/esm/contexts/AppSettings/Slug.js

@@ -0,0 +1,7 @@
+export var AppSettingSlug;
+(function (AppSettingSlug) {
+    AppSettingSlug["DarkMode"] = "darkmode";
+    AppSettingSlug["Developer"] = "developer";
+    AppSettingSlug["NavigationType"] = "navgiationType";
+})(AppSettingSlug || (AppSettingSlug = {}));
+//# sourceMappingURL=Slug.js.map

package/dist/esm/contexts/AppSettings/Slug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slug.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Slug.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,yCAAuB,CAAA;IACvB,mDAAiC,CAAA;AACnC,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB"}

package/dist/esm/contexts/AppSettings/Storage.d.ts

@@ -0,0 +1,11 @@
+import { WebAppNavigationType } from '@xyo-network/react-app-settings';
+import { AppSettingsStorageBase } from './StorageBase';
+export declare class AppSettingsStorage extends AppSettingsStorageBase {
+    constructor(prefix?: string, defaults?: Record<string, unknown>);
+    get darkMode(): boolean;
+    set darkMode(value: boolean);
+    get developerMode(): boolean;
+    set developerMode(value: boolean);
+    get navigationType(): WebAppNavigationType;
+    set navigationType(value: WebAppNavigationType);
+}

package/dist/esm/contexts/AppSettings/Storage.js

@@ -0,0 +1,27 @@
+import { appSettingDefault } from './appSettingDefault';
+import { AppSettingSlug } from './Slug';
+import { AppSettingsStorageBase } from './StorageBase';
+export class AppSettingsStorage extends AppSettingsStorageBase {
+    constructor(prefix = 'AppSettings', defaults) {
+        super(prefix, { ...appSettingDefault(), ...defaults });
+    }
+    get darkMode() {
+        return this.getBoolean(AppSettingSlug.DarkMode);
+    }
+    set darkMode(value) {
+        this.setBoolean(AppSettingSlug.DarkMode, value);
+    }
+    get developerMode() {
+        return this.getBoolean(AppSettingSlug.Developer);
+    }
+    set developerMode(value) {
+        this.setBoolean(AppSettingSlug.Developer, value);
+    }
+    get navigationType() {
+        return this.getString(AppSettingSlug.NavigationType);
+    }
+    set navigationType(value) {
+        this.setString(AppSettingSlug.NavigationType, value);
+    }
+}
+//# sourceMappingURL=Storage.js.map

package/dist/esm/contexts/AppSettings/Storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Storage.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Storage.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAEtD,MAAM,OAAO,kBAAmB,SAAQ,sBAAsB;IAC5D,YAAY,MAAM,GAAG,aAAa,EAAE,QAAkC;QACpE,KAAK,CAAC,MAAM,EAAE,EAAE,GAAG,iBAAiB,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAA;IACxD,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;IAClD,CAAC;IAED,IAAI,aAAa,CAAC,KAAc;QAC9B,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAClD,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,cAAc,CAAyB,CAAA;IAC9E,CAAC;IAED,IAAI,cAAc,CAAC,KAA2B;QAC5C,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,cAAc,EAAE,KAAK,CAAC,CAAA;IACtD,CAAC;CACF"}

package/dist/esm/contexts/AppSettings/StorageBase.d.ts

@@ -0,0 +1,15 @@
+export declare class AppSettingsStorageBase {
+    private prefix;
+    private defaults;
+    constructor(prefix?: string, defaults?: Record<string, unknown>);
+    getBoolean(name: string): boolean;
+    setBoolean(name: string, value: boolean): void;
+    setNumber(name: string, value: number): void;
+    getNumber(name: string): number;
+    getString(name: string): string;
+    setString(name: string, value: string): void;
+    getStringArray(name: string): string[];
+    setStringArray(name: string, value: string[]): void;
+    getObject<T>(name: string): T;
+    setObject<T>(name: string, value: T): void;
+}

package/dist/esm/contexts/AppSettings/StorageBase.js

@@ -0,0 +1,73 @@
+import { assertEx } from '@xylabs/sdk-js';
+import { assertDefinedEx } from '@xyo-network/react-shared';
+export class AppSettingsStorageBase {
+    constructor(prefix = 'AppSettings', defaults) {
+        this.prefix = prefix;
+        this.defaults = defaults ?? {};
+    }
+    getBoolean(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            assertEx(typeof this.defaults[name] === 'boolean', 'Default value is not boolean');
+            const defaultValue = this.defaults[name];
+            assertEx(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue !== 'false';
+    }
+    setBoolean(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+    setNumber(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+    getNumber(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            assertEx(typeof this.defaults[name] === 'boolean', 'Default value is not boolean');
+            const defaultValue = this.defaults[name];
+            assertEx(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return parseFloat(storedValue);
+    }
+    getString(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            assertDefinedEx(typeof this.defaults[name] === 'string', 'Default value is not string');
+            const defaultValue = this.defaults[name];
+            assertEx(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue;
+    }
+    setString(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, value);
+    }
+    getStringArray(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`)?.split(',');
+        if (!storedValue) {
+            assertDefinedEx(Array.isArray(this.defaults[name]), 'Default value is not array');
+            const defaultValue = this.defaults[name];
+            assertEx(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue;
+    }
+    setStringArray(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, value.join(','));
+    }
+    getObject(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        const parsedStoredValue = storedValue ? JSON.parse(storedValue) : null;
+        if (!parsedStoredValue) {
+            assertEx(typeof this.defaults[name] === 'object', 'Default value is not object');
+            return assertEx(this.defaults[name], `Missing Default for ${name}`);
+        }
+        return parsedStoredValue;
+    }
+    setObject(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+}
+//# sourceMappingURL=StorageBase.js.map

package/dist/esm/contexts/AppSettings/StorageBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageBase.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/StorageBase.ts"],"names":[],"mappings":"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"}

package/dist/esm/contexts/AppSettings/appSettingDefault.d.ts

@@ -0,0 +1 @@
+export declare const appSettingDefault: () => Record<string, unknown>;

package/dist/esm/contexts/AppSettings/appSettingDefault.js

@@ -0,0 +1,9 @@
+import { AppSettingSlug } from './Slug';
+export const appSettingDefault = () => {
+    return {
+        [AppSettingSlug.DarkMode]: false,
+        [AppSettingSlug.Developer]: false,
+        [AppSettingSlug.NavigationType]: 'menu',
+    };
+};
+//# sourceMappingURL=appSettingDefault.js.map

package/dist/esm/contexts/AppSettings/appSettingDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appSettingDefault.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/appSettingDefault.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AAEvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAA4B,EAAE;IAC7D,OAAO;QACL,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,KAAK;QAChC,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,KAAK;QACjC,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM;KACxC,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/contexts/AppSettings/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Context';
+export * from './Provider';
+export * from './Slug';
+export * from './Storage';
+export * from './StorageBase';
+export * from './useAppSettings';

package/dist/esm/contexts/AppSettings/index.js

@@ -0,0 +1,7 @@
+export * from './Context';
+export * from './Provider';
+export * from './Slug';
+export * from './Storage';
+export * from './StorageBase';
+export * from './useAppSettings';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/AppSettings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA"}

package/dist/esm/contexts/AppSettings/useAppSettings.d.ts

@@ -0,0 +1 @@
+export declare const useAppSettings: () => import("./Context").AppSettingsContextProps;

package/dist/esm/contexts/AppSettings/useAppSettings.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { AppSettingsContext } from './Context';
+export const useAppSettings = () => {
+    return useContext(AppSettingsContext);
+};
+//# sourceMappingURL=useAppSettings.js.map

package/dist/esm/contexts/AppSettings/useAppSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppSettings.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/useAppSettings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAA;AACvC,CAAC,CAAA"}

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

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

package/dist/esm/contexts/index.js

@@ -0,0 +1,2 @@
+export * from './AppSettings';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/package.json

@@ -12,16 +12,17 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@mui/material": "^5.8.3",
-    "@xylabs/react-button": "^2.12.24",
-    "@xylabs/react-flexbox": "^2.12.24",
-    "@xylabs/react-pixel": "^2.12.24",
-    "@xylabs/react-shared": "^2.12.24",
-    "@xyo-network/react-appbar": "^2.25.60",
-    "@xyo-network/react-footer": "^2.25.60",
-    "@xyo-network/react-shared": "^2.25.60",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "@mui/material": "^5.8.4",
+    "@xylabs/react-button": "^2.12.25",
+    "@xylabs/react-flexbox": "^2.12.25",
+    "@xylabs/react-pixel": "^2.12.25",
+    "@xylabs/react-shared": "^2.12.25",
+    "@xyo-network/react-app-settings": "^2.25.62",
+    "@xyo-network/react-appbar": "^2.25.63",
+    "@xyo-network/react-footer": "^2.25.63",
+    "@xyo-network/react-shared": "^2.25.63",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.3.0",
     "tslib": "^2.4.0"
@@ -32,6 +33,7 @@
     "@babel/preset-env": "^7.18.2",
     "@storybook/react": "^6.5.9",
     "@types/react-helmet": "^6.1.5",
+    "@xylabs/react-common": "^2.12.25",
     "@xylabs/tsconfig": "^1.0.13"
   },
   "browser": "dist/esm/index.js",
@@ -83,6 +85,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.60",
+  "version": "2.25.63",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Chrome.stories.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable import/no-internal-modules */
+import { Breadcrumbs, List } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { LinkEx } from '@xylabs/react-common'
 import { FlexCol } from '@xylabs/react-flexbox'
+import { SiteMenuListItem } from '@xyo-network/react-appbar'
 import { BrowserRouter } from 'react-router-dom'
 
 import { WebAppChrome } from './Chrome'
@@ -21,8 +24,21 @@ const Template: ComponentStory<typeof WebAppChrome> = (args) => {
   return (
     <FlexCol height="80vh" alignItems="stretch" overflow="hidden">
       <BrowserRouter>
-        <WebAppChrome {...args}>
-          <WebAppPage />
+        <WebAppChrome
+          menuItems={
+            <List>
+              <SiteMenuListItem primary="Hello" />
+            </List>
+          }
+          {...args}
+        >
+          <WebAppPage
+            breadcrumbs={
+              <Breadcrumbs>
+                <LinkEx>BreadCrumbs</LinkEx>
+              </Breadcrumbs>
+            }
+          />
         </WebAppChrome>
       </BrowserRouter>
     </FlexCol>
@@ -32,7 +48,10 @@ const Template: ComponentStory<typeof WebAppChrome> = (args) => {
 const Default = Template.bind({})
 Default.args = {}
 
-export { Default }
+const DefaultSideBar = Template.bind({})
+DefaultSideBar.args = { navigationType: 'sidebar' }
+
+export { Default, DefaultSideBar }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Chrome.tsx

@@ -1,5 +1,6 @@
-import { Paper } from '@mui/material'
-import { FlexBoxProps, FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'
+import { Divider, Paper } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import { WebAppNavigationType } from '@xyo-network/react-app-settings'
 import { ApplicationAppBar } from '@xyo-network/react-appbar'
 import { Footer } from '@xyo-network/react-footer'
 import { ErrorBoundary } from '@xyo-network/react-shared'
@@ -14,18 +15,28 @@ export interface WebAppChromeProps extends FlexBoxProps {
   appbar?: ReactNode
   errorPage?: ReactNode
   footerElevation?: number
+  navigationType?: WebAppNavigationType
+  menuItems?: ReactNode
 }
 
-export const WebAppChrome: React.FC<WebAppChromeProps> = ({ footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
+export const WebAppChrome: React.FC<WebAppChromeProps> = ({ menuItems, navigationType = 'menu', footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
   return (
     <FlexCol alignItems="stretch" height="100vh" {...props}>
       <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>
         <meta content="website" property="og:type" />
       </Helmet>
-      {appbar ?? <ApplicationAppBar />}
-      <FlexGrowCol overflow="hidden" justifyContent="flex-start" alignItems="stretch">
-        <ErrorBoundary fallback={errorPage ?? <WebAppErrorPage />}>{children}</ErrorBoundary>
-      </FlexGrowCol>
+      {appbar ?? <ApplicationAppBar menuItems={navigationType === 'menu' ? menuItems : undefined} />}
+      <FlexGrowRow alignItems="stretch">
+        {navigationType !== 'menu' ? (
+          <>
+            {menuItems}
+            <Divider orientation="vertical" />
+          </>
+        ) : null}
+        <FlexGrowCol overflow="hidden" justifyContent="flex-start" alignItems="stretch">
+          <ErrorBoundary fallback={errorPage ?? <WebAppErrorPage />}>{children}</ErrorBoundary>
+        </FlexGrowCol>
+      </FlexGrowRow>
       <Paper elevation={footerElevation} square>
         {footer ?? <Footer dynamicHeight />}
       </Paper>

package/src/components/Page.tsx

@@ -1,5 +1,5 @@
 import { Container, ContainerProps } from '@mui/material'
-import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
+import { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
 import { useUserEvents } from '@xylabs/react-pixel'
 import { useAsyncEffect } from '@xylabs/react-shared'
 import { ReactNode } from 'react'
@@ -9,9 +9,11 @@ export interface WebAppPageProps extends FlexBoxProps {
   container?: ContainerProps['maxWidth']
   disableGutters?: boolean
   breadcrumbs?: ReactNode
+  disableBreadcrumbGutter?: boolean
+  spacing?: string | number
 }
 
-export const WebAppPage: React.FC<WebAppPageProps> = ({ disableGutters, title, container, breadcrumbs, children, ...props }) => {
+export const WebAppPage: React.FC<WebAppPageProps> = ({ spacing = 1, disableBreadcrumbGutter, disableGutters, title, container, breadcrumbs, children, ...props }) => {
   const userEvents = useUserEvents()
   const { pathname } = useLocation()
 
@@ -24,8 +26,10 @@ export const WebAppPage: React.FC<WebAppPageProps> = ({ disableGutters, title, c
   )
 
   const Body: React.FC<FlexBoxProps> = (props) => (
-    <FlexGrowCol gap={2} paddingY={2} justifyContent="flex-start" alignItems="stretch" {...props}>
-      {breadcrumbs}
+    <FlexGrowCol gap={1} paddingY={spacing} justifyContent="flex-start" alignItems="stretch" {...props}>
+      <FlexRow justifyContent="flex-start" marginX={disableBreadcrumbGutter ? 0 : spacing}>
+        {breadcrumbs}
+      </FlexRow>
       {children}
     </FlexGrowCol>
   )