@fluxo-dev/shell 0.0.26 → 0.0.28

package/index.esm.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, Suspense, forwardRef, createElement as createElement$2, useEffect, createContext, useContext, useLayoutEffect, useRef, useCallback, useMemo, memo, isValidElement, cloneElement, useImperativeHandle, lazy } from 'react';
+import React__default, { useState, Suspense, forwardRef, createElement as createElement$2, useEffect, useCallback, createContext, useContext, useLayoutEffect, useRef, useMemo, memo, isValidElement, cloneElement, useImperativeHandle, lazy } from 'react';
 import { useSelector, Provider } from 'react-redux';
-import { useLocation, Navigate, Outlet, useNavigate, Link, Route, useSearchParams, createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { DataCard, NoData, ConfirmModal, ShellPage, ErrorPage as ErrorPage$1, WaitData, FlxRoutes } from '@fluxo-dev/ui-components';
+import { useLocation, Navigate, Outlet, useNavigate, Link, useOutlet, Route, useSearchParams, createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { DataCard, useFlxNavigate, NoData, ConfirmModal, ShellPage, ErrorPage as ErrorPage$1, WaitData, FlxRoutes } from '@fluxo-dev/ui-components';
 import { ModuleLoader } from '@fluxo-dev/shell-mfe';
-import { Text, TextInput, ActionIcon, useMantineTheme, AppShell, Stack, Group, Burger, Badge, Drawer, NavLink, Popover, Avatar, Center, Divider, Button, Anchor, Tooltip, Space, useMantineColorScheme, UnstyledButton, Box, ThemeIcon, Collapse, ScrollArea, rem, Loader, Grid, PasswordInput, ColorSwatch, FileButton, NumberInput, Alert, ColorInput, Checkbox, Modal, Switch, Select, Chip, LoadingOverlay, Image as Image$1, Menu, Textarea, Table, MultiSelect, Card, MantineProvider } from '@mantine/core';
+import { Text, TextInput, ActionIcon, useMantineTheme, AppShell, Stack, Group, Burger, Badge, Drawer, NavLink, Popover, Avatar, Center, Divider, Button, Tabs, Anchor, Tooltip, Space, useMantineColorScheme, UnstyledButton, Box, ThemeIcon, Collapse, ScrollArea, rem, Loader, Grid, PasswordInput, ColorSwatch, FileButton, NumberInput, Alert, ColorInput, Checkbox, Modal, Switch, Select, Chip, LoadingOverlay, Image as Image$1, Menu, Table, MultiSelect, Card, MantineProvider } from '@mantine/core';
 import { openSpotlight, Spotlight } from '@mantine/spotlight';
 import { useOs, useHotkeys, useIdle } from '@mantine/hooks';
 import { AppType, AppState, FluxoStateDispatcher, FluxoClientSys, UserService, AppMenuContextType, ApiKeyService, DomainRoleService, EmailServerProviderType } from '@fluxo-dev/api-client-base';
@@ -1133,17 +1133,78 @@ for (var COLLECTION_NAME in DOMIterables) {
   }
 }
 
-var $$8 = _export;
 var DESCRIPTORS$3 = descriptors;
+var fails$5 = fails$c;
+var objectKeys = objectKeys$2;
+var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
+var propertyIsEnumerableModule = objectPropertyIsEnumerable;
+var toObject$2 = toObject$4;
+var IndexedObject = indexedObject;
+
+var nativeAssign = Object.assign;
+var defineProperty$2 = Object.defineProperty;
+
+// `Object.assign` method
+// https://tc39.github.io/ecma262/#sec-object.assign
+var objectAssign$1 = !nativeAssign || fails$5(function () {
+  // should have correct order of operations (Edge bug)
+  if (DESCRIPTORS$3 && nativeAssign({ b: 1 }, nativeAssign(defineProperty$2({}, 'a', {
+    enumerable: true,
+    get: function () {
+      defineProperty$2(this, 'b', {
+        value: 3,
+        enumerable: false
+      });
+    }
+  }), { b: 2 })).b !== 1) return true;
+  // should work with symbols and should have deterministic property order (V8 bug)
+  var A = {};
+  var B = {};
+  // eslint-disable-next-line no-undef
+  var symbol = Symbol();
+  var alphabet = 'abcdefghijklmnopqrst';
+  A[symbol] = 7;
+  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
+  return nativeAssign({}, A)[symbol] != 7 || objectKeys(nativeAssign({}, B)).join('') != alphabet;
+}) ? function assign(target, source) { // eslint-disable-line no-unused-vars
+  var T = toObject$2(target);
+  var argumentsLength = arguments.length;
+  var index = 1;
+  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
+  var propertyIsEnumerable = propertyIsEnumerableModule.f;
+  while (argumentsLength > index) {
+    var S = IndexedObject(arguments[index++]);
+    var keys = getOwnPropertySymbols ? objectKeys(S).concat(getOwnPropertySymbols(S)) : objectKeys(S);
+    var length = keys.length;
+    var j = 0;
+    var key;
+    while (length > j) {
+      key = keys[j++];
+      if (!DESCRIPTORS$3 || propertyIsEnumerable.call(S, key)) T[key] = S[key];
+    }
+  } return T;
+} : nativeAssign;
+
+var $$8 = _export;
+var assign$1 = objectAssign$1;
+
+// `Object.assign` method
+// https://tc39.github.io/ecma262/#sec-object.assign
+$$8({ target: 'Object', stat: true, forced: Object.assign !== assign$1 }, {
+  assign: assign$1
+});
+
+var $$7 = _export;
+var DESCRIPTORS$2 = descriptors;
 var global$9 = global$l;
 var has$4 = has$e;
 var isObject$5 = isObject$b;
-var defineProperty$2 = objectDefineProperty.f;
+var defineProperty$1 = objectDefineProperty.f;
 var copyConstructorProperties = copyConstructorProperties$2;
 
 var NativeSymbol = global$9.Symbol;
 
-if (DESCRIPTORS$3 && typeof NativeSymbol == 'function' && (!('description' in NativeSymbol.prototype) ||
+if (DESCRIPTORS$2 && typeof NativeSymbol == 'function' && (!('description' in NativeSymbol.prototype) ||
   // Safari 12 bug
   NativeSymbol().description !== undefined
 )) {
@@ -1163,20 +1224,20 @@ if (DESCRIPTORS$3 && typeof NativeSymbol == 'function' && (!('description' in Na
   symbolPrototype.constructor = SymbolWrapper;
 
   var symbolToString = symbolPrototype.toString;
-  var native = String(NativeSymbol('test')) == 'Symbol(test)';
+  var native$1 = String(NativeSymbol('test')) == 'Symbol(test)';
   var regexp = /^Symbol\((.*)\)[^)]+$/;
-  defineProperty$2(symbolPrototype, 'description', {
+  defineProperty$1(symbolPrototype, 'description', {
     configurable: true,
     get: function description() {
       var symbol = isObject$5(this) ? this.valueOf() : this;
       var string = symbolToString.call(symbol);
       if (has$4(EmptyStringDescriptionStore, symbol)) return '';
-      var desc = native ? string.slice(7, -1) : string.replace(regexp, '$1');
+      var desc = native$1 ? string.slice(7, -1) : string.replace(regexp, '$1');
       return desc === '' ? undefined : desc;
     }
   });
 
-  $$8({ global: true, forced: true }, {
+  $$7({ global: true, forced: true }, {
     Symbol: SymbolWrapper
   });
 }
@@ -1195,7 +1256,7 @@ var redefineAll$1 = function (target, src, options) {
 var getBuiltIn$3 = getBuiltIn$6;
 var definePropertyModule = objectDefineProperty;
 var wellKnownSymbol$a = wellKnownSymbol$g;
-var DESCRIPTORS$2 = descriptors;
+var DESCRIPTORS$1 = descriptors;
 
 var SPECIES$3 = wellKnownSymbol$a('species');
 
@@ -1203,7 +1264,7 @@ var setSpecies$1 = function (CONSTRUCTOR_NAME) {
   var Constructor = getBuiltIn$3(CONSTRUCTOR_NAME);
   var defineProperty = definePropertyModule.f;
 
-  if (DESCRIPTORS$2 && Constructor && !Constructor[SPECIES$3]) {
+  if (DESCRIPTORS$1 && Constructor && !Constructor[SPECIES$3]) {
     defineProperty(Constructor, SPECIES$3, {
       configurable: true,
       get: function () { return this; }
@@ -1429,7 +1490,7 @@ var userAgent$1 = engineUserAgent;
 var engineIsIos = /(iphone|ipod|ipad).*applewebkit/i.test(userAgent$1);
 
 var global$7 = global$l;
-var fails$5 = fails$c;
+var fails$4 = fails$c;
 var classof$4 = classofRaw$1;
 var bind$2 = functionBindContext;
 var html = html$2;
@@ -1510,7 +1571,7 @@ if (!set || !clear) {
     global$7.addEventListener &&
     typeof postMessage == 'function' &&
     !global$7.importScripts &&
-    !fails$5(post) &&
+    !fails$4(post) &&
     location.protocol !== 'file:'
   ) {
     defer = post;
@@ -1686,7 +1747,7 @@ if (v8) {
 
 var engineV8Version = version && +version;
 
-var $$7 = _export;
+var $$6 = _export;
 var global$3 = global$l;
 var getBuiltIn$1 = getBuiltIn$6;
 var NativePromise$1 = nativePromiseConstructor;
@@ -1978,7 +2039,7 @@ if (FORCED$1) {
     }, { unsafe: true });
 
     // wrap fetch result
-    if (typeof $fetch == 'function') $$7({ global: true, enumerable: true, forced: true }, {
+    if (typeof $fetch == 'function') $$6({ global: true, enumerable: true, forced: true }, {
       // eslint-disable-next-line no-unused-vars
       fetch: function fetch(input /* , init */) {
         return promiseResolve$1(PromiseConstructor, $fetch.apply(global$3, arguments));
@@ -1987,7 +2048,7 @@ if (FORCED$1) {
   }
 }
 
-$$7({ global: true, wrap: true, forced: FORCED$1 }, {
+$$6({ global: true, wrap: true, forced: FORCED$1 }, {
   Promise: PromiseConstructor
 });
 
@@ -1997,7 +2058,7 @@ setSpecies(PROMISE);
 PromiseWrapper = getBuiltIn$1(PROMISE);
 
 // statics
-$$7({ target: PROMISE, stat: true, forced: FORCED$1 }, {
+$$6({ target: PROMISE, stat: true, forced: FORCED$1 }, {
   // `Promise.reject` method
   // https://tc39.github.io/ecma262/#sec-promise.reject
   reject: function reject(r) {
@@ -2007,7 +2068,7 @@ $$7({ target: PROMISE, stat: true, forced: FORCED$1 }, {
   }
 });
 
-$$7({ target: PROMISE, stat: true, forced: FORCED$1 }, {
+$$6({ target: PROMISE, stat: true, forced: FORCED$1 }, {
   // `Promise.resolve` method
   // https://tc39.github.io/ecma262/#sec-promise.resolve
   resolve: function resolve(x) {
@@ -2015,7 +2076,7 @@ $$7({ target: PROMISE, stat: true, forced: FORCED$1 }, {
   }
 });
 
-$$7({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, {
+$$6({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, {
   // `Promise.all` method
   // https://tc39.github.io/ecma262/#sec-promise.all
   all: function all(iterable) {
@@ -2062,22 +2123,22 @@ $$7({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, {
   }
 });
 
-var $$6 = _export;
+var $$5 = _export;
 var NativePromise = nativePromiseConstructor;
-var fails$4 = fails$c;
+var fails$3 = fails$c;
 var getBuiltIn = getBuiltIn$6;
 var speciesConstructor = speciesConstructor$2;
 var promiseResolve = promiseResolve$2;
 var redefine$1 = redefine$6.exports;
 
 // Safari bug https://bugs.webkit.org/show_bug.cgi?id=200829
-var NON_GENERIC = !!NativePromise && fails$4(function () {
+var NON_GENERIC = !!NativePromise && fails$3(function () {
   NativePromise.prototype['finally'].call({ then: function () { /* empty */ } }, function () { /* empty */ });
 });
 
 // `Promise.prototype.finally` method
 // https://tc39.github.io/ecma262/#sec-promise.prototype.finally
-$$6({ target: 'Promise', proto: true, real: true, forced: NON_GENERIC }, {
+$$5({ target: 'Promise', proto: true, real: true, forced: NON_GENERIC }, {
   'finally': function (onFinally) {
     var C = speciesConstructor(this, getBuiltIn('Promise'));
     var isFunction = typeof onFinally == 'function';
@@ -2478,7 +2539,7 @@ var getOwnPropertySymbols = Object.getOwnPropertySymbols;
 var hasOwnProperty = Object.prototype.hasOwnProperty;
 var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 
-function toObject$2(val) {
+function toObject$1(val) {
 	if (val === null || val === undefined) {
 		throw new TypeError('Object.assign cannot be called with null or undefined');
 	}
@@ -2530,9 +2591,9 @@ function shouldUseNative() {
 	}
 }
 
-var objectAssign$1 = shouldUseNative() ? Object.assign : function (target, source) {
+var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
 	var from;
-	var to = toObject$2(target);
+	var to = toObject$1(target);
 	var symbols;
 
 	for (var s = 1; s < arguments.length; s++) {
@@ -2680,7 +2741,7 @@ var checkPropTypes_1 = checkPropTypes$1;
  */
 
 var ReactIs$1 = reactIs.exports;
-var assign$1 = objectAssign$1;
+var assign = objectAssign;
 
 var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
 var has$1 = has$3;
@@ -3119,7 +3180,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
       }
       // We need to check all keys in case some are required but missing from props.
-      var allKeys = assign$1({}, props[propName], shapeTypes);
+      var allKeys = assign({}, props[propName], shapeTypes);
       for (var key in allKeys) {
         var checker = shapeTypes[key];
         if (has$1(shapeTypes, key) && typeof checker !== 'function') {
@@ -4525,8 +4586,310 @@ function AppBar(props) {
   });
 }
 
-function AppContent() {
-  return jsx(Outlet, {});
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
+
+class ShellSessionCollection {
+  constructor(sessions = [], currentSessionId) {
+    this._sessions = sessions;
+    this._currentSessionId = currentSessionId;
+  }
+  get currentSession() {
+    return this._currentSessionId ? this.getSession(this._currentSessionId) : null;
+  }
+  addSession(title, element, url) {
+    const session = new ShellSession(title, element, url);
+    this._sessions.push(session);
+    return session;
+  }
+  removeSession(id) {
+    this._sessions = this._sessions.filter(s => s.id !== id);
+  }
+  getSession(id) {
+    return this._sessions.find(s => s.id === id);
+  }
+  get sessions() {
+    return this._sessions;
+  }
+  getCurrentSessionId() {
+    return this._currentSessionId;
+  }
+  getCurrentSession() {
+    return this.getSession(this._currentSessionId);
+  }
+  setCurrentSession(id) {
+    this._currentSessionId = id;
+  }
+  updateSession(id, title, element, url) {
+    const session = this.getSession(id);
+    if (session) {
+      session.updateSession(title, element, url);
+    }
+  }
+  getPreviuosSessionId() {
+    const index = this._sessions.findIndex(s => s.id === this._currentSessionId);
+    if (index > 0) {
+      return this._sessions[index - 1].id;
+    }
+    return this._sessions[this._sessions.length - 1].id;
+  }
+  getNextSessionId() {
+    const index = this._sessions.findIndex(s => s.id === this._currentSessionId);
+    if (index < this._sessions.length - 1) {
+      return this._sessions[index + 1].id;
+    }
+    return this._sessions[0].id;
+  }
+}
+class ShellSession {
+  constructor(title, element, url) {
+    this._id = v4();
+    this._title = title;
+    this._element = element;
+    this._url = url;
+  }
+  get id() {
+    return this._id;
+  }
+  get title() {
+    return this._title;
+  }
+  get element() {
+    return this._element;
+  }
+  get url() {
+    return this._url;
+  }
+  updateSession(title, element, url) {
+    this._title = title;
+    this._element = element;
+    this._url = url;
+  }
+}
+
+const defaultState = {
+  addSession: () => '',
+  removeSession: () => {},
+  getSession: () => {},
+  sessions: () => [],
+  updateSession: () => {},
+  getCurrentSessionId: () => null,
+  getCurrentSession: () => null,
+  setCurrentSession: () => {},
+  isCurrentSessionDisableable: () => false
+};
+const ShellSessionContext = /*#__PURE__*/React__default.createContext(defaultState);
+function ShellSessionProvider(props) {
+  useHotkeys([['shift+s', () => {
+    addSession(`Dashboard`, null, '/');
+  }]]);
+  useHotkeys([['shift+x', () => {
+    removeSession(getCurrentSessionId());
+  }]], [], true);
+  useHotkeys([['shift+ArrowLeft', () => {
+    setCurrentSession(sessionCollection.getPreviuosSessionId());
+  }]], [], true);
+  useHotkeys([['shift+ArrowRight', () => {
+    setCurrentSession(sessionCollection.getNextSessionId());
+  }]], [], true);
+  const [sessionCollection, setSessionCollection] = React__default.useState(new ShellSessionCollection([], null));
+  const navigate = useFlxNavigate();
+  const addSession = useCallback((title, element, url) => {
+    const cloned = new ShellSessionCollection(sessionCollection.sessions, sessionCollection.getCurrentSessionId());
+    const s = cloned.addSession(title, element, url);
+    cloned.setCurrentSession(s.id);
+    setSessionCollection(cloned);
+    navigate(s.url, {
+      state: {
+        title: title
+      }
+    });
+    return s.id;
+  }, [sessionCollection]);
+  const removeSession = useCallback(id => {
+    if (!isCurrentSessionDisableable()) return;
+    const cloned = new ShellSessionCollection(sessionCollection.sessions, sessionCollection.getCurrentSessionId());
+    cloned.removeSession(id);
+    cloned.setCurrentSession(cloned.sessions[cloned.sessions.length - 1].id);
+    setSessionCollection(cloned);
+  }, [sessionCollection]);
+  const getSession = useCallback(id => {
+    return sessionCollection.getSession(id);
+  }, [sessionCollection]);
+  const sessions = useCallback(() => {
+    return sessionCollection.sessions;
+  }, [sessionCollection]);
+  const updateSession = useCallback((id, title, element, url) => {
+    const cloned = new ShellSessionCollection(sessionCollection.sessions, sessionCollection.getCurrentSessionId());
+    cloned.updateSession(id, title, element, url);
+    setSessionCollection(cloned);
+  }, [sessionCollection]);
+  const setCurrentSession = useCallback(id => {
+    const cloned = new ShellSessionCollection(sessionCollection.sessions, id);
+    cloned.setCurrentSession(id);
+    setSessionCollection(cloned);
+    navigate(cloned.getCurrentSession().url, {
+      state: {
+        title: cloned.getCurrentSession().title
+      }
+    });
+  }, [sessionCollection]);
+  const getCurrentSessionId = useCallback(() => {
+    return sessionCollection.getCurrentSessionId();
+  }, [sessionCollection]);
+  const getCurrentSession = useCallback(() => {
+    return sessionCollection.getCurrentSession();
+  }, [sessionCollection]);
+  const isCurrentSessionDisableable = useCallback(() => {
+    return sessionCollection.sessions.length > 1;
+  }, [sessionCollection]);
+  return jsx(ShellSessionContext.Provider, {
+    value: {
+      sessions: sessions,
+      addSession: addSession,
+      removeSession: removeSession,
+      getSession: getSession,
+      updateSession: updateSession,
+      getCurrentSessionId: getCurrentSessionId,
+      getCurrentSession: getCurrentSession,
+      setCurrentSession: setCurrentSession,
+      isCurrentSessionDisableable: isCurrentSessionDisableable
+    },
+    children: props.children
+  });
+}
+
+function AppContent(props) {
+  const sessionContext = React__default.useContext(ShellSessionContext);
+  useEffect(() => {
+    if (props.withMultipleSessions) {
+      const newSessionId = sessionContext.addSession('Dashboard', null, '/');
+      sessionContext.setCurrentSession(newSessionId);
+    }
+  }, []);
+  const outletContext = useOutlet();
+  const location = useLocation();
+  useEffect(() => {
+    var _a, _b;
+    if (props.withMultipleSessions) {
+      const currentSession = sessionContext.getCurrentSession();
+      if (currentSession) {
+        sessionContext.updateSession(currentSession.id, (_b = (_a = location.state) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : 'Sessione', outletContext, location.pathname);
+      }
+    }
+  }, [location]);
+  return jsx(Fragment, {
+    children: props.withMultipleSessions ? jsxs(Tabs, {
+      value: sessionContext.getCurrentSessionId(),
+      keepMounted: true,
+      children: [jsxs(Tabs.List, {
+        style: {
+          alignItems: 'center',
+          position: 'sticky',
+          width: '100%',
+          overflowAnchor: 'none',
+          top: 48,
+          zIndex: 50,
+          marginBottom: 0,
+          background: '#fff'
+        },
+        children: [sessionContext.sessions().map((session, i) => {
+          return jsx(Tabs.Tab, {
+            style: {
+              borderTop: '2px solid #ececec'
+            },
+            value: session.id,
+            onClick: v => {
+              sessionContext.setCurrentSession(session.id);
+            },
+            children: session.title
+          }, session.id);
+        }), jsxs(Group, {
+          ml: 'auto',
+          children: [jsx(ActionIcon, {
+            disabled: !sessionContext.isCurrentSessionDisableable(),
+            onClick: () => sessionContext.removeSession(sessionContext.getCurrentSessionId()),
+            children: jsx(IconX, {
+              size: 18
+            })
+          }), jsx(ActionIcon, {
+            onClick: () => sessionContext.addSession("Test", null, "/"),
+            ml: 'auto',
+            children: jsx(IconPlus, {
+              size: 18
+            })
+          })]
+        })]
+      }), sessionContext.sessions().map(session => {
+        return jsx(Tabs.Panel, {
+          value: session.id,
+          children: session.element
+        }, session.id);
+      })]
+    }) : jsx(Outlet, {})
+  });
 }
 
 function FooterBar(props) {
@@ -4607,6 +4970,9 @@ function FooterBar(props) {
         children: [hasAdminAccess && jsxs(Fragment, {
           children: [jsx(Link, {
             to: '/settings',
+            state: {
+              title: 'Amministrazione'
+            },
             style: {
               textDecoration: 'none'
             },
@@ -4687,6 +5053,9 @@ function NavBarItem({
           color: colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
           borderLeft: `1px solid ${colorScheme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`
         },
+        state: {
+          title: link.label
+        },
         to: '/' + link.routerLink,
         children: link.label
       }, link.label + '_' + i);
@@ -4696,7 +5065,11 @@ function NavBarItem({
     children: navbarOpened ? jsxs(Fragment, {
       children: [jsx(UnstyledButton, {
         onClick: () => {
-          if (hasLinks) setOpened(o => !o);else navigate('/' + routerLink);
+          if (hasLinks) setOpened(o => !o);else navigate('/' + routerLink, {
+            state: {
+              title: label
+            }
+          });
         },
         className: level === 0 ? style['control'] : style['controlSub'],
         children: jsxs(Group, {
@@ -4835,67 +5208,6 @@ function Navbar() {
   });
 }
 
-var DESCRIPTORS$1 = descriptors;
-var fails$3 = fails$c;
-var objectKeys = objectKeys$2;
-var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
-var propertyIsEnumerableModule = objectPropertyIsEnumerable;
-var toObject$1 = toObject$4;
-var IndexedObject = indexedObject;
-
-var nativeAssign = Object.assign;
-var defineProperty$1 = Object.defineProperty;
-
-// `Object.assign` method
-// https://tc39.github.io/ecma262/#sec-object.assign
-var objectAssign = !nativeAssign || fails$3(function () {
-  // should have correct order of operations (Edge bug)
-  if (DESCRIPTORS$1 && nativeAssign({ b: 1 }, nativeAssign(defineProperty$1({}, 'a', {
-    enumerable: true,
-    get: function () {
-      defineProperty$1(this, 'b', {
-        value: 3,
-        enumerable: false
-      });
-    }
-  }), { b: 2 })).b !== 1) return true;
-  // should work with symbols and should have deterministic property order (V8 bug)
-  var A = {};
-  var B = {};
-  // eslint-disable-next-line no-undef
-  var symbol = Symbol();
-  var alphabet = 'abcdefghijklmnopqrst';
-  A[symbol] = 7;
-  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
-  return nativeAssign({}, A)[symbol] != 7 || objectKeys(nativeAssign({}, B)).join('') != alphabet;
-}) ? function assign(target, source) { // eslint-disable-line no-unused-vars
-  var T = toObject$1(target);
-  var argumentsLength = arguments.length;
-  var index = 1;
-  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
-  var propertyIsEnumerable = propertyIsEnumerableModule.f;
-  while (argumentsLength > index) {
-    var S = IndexedObject(arguments[index++]);
-    var keys = getOwnPropertySymbols ? objectKeys(S).concat(getOwnPropertySymbols(S)) : objectKeys(S);
-    var length = keys.length;
-    var j = 0;
-    var key;
-    while (length > j) {
-      key = keys[j++];
-      if (!DESCRIPTORS$1 || propertyIsEnumerable.call(S, key)) T[key] = S[key];
-    }
-  } return T;
-} : nativeAssign;
-
-var $$5 = _export;
-var assign = objectAssign;
-
-// `Object.assign` method
-// https://tc39.github.io/ecma262/#sec-object.assign
-$$5({ target: 'Object', stat: true, forced: Object.assign !== assign }, {
-  assign: assign
-});
-
 class AppMenuService {
   getSpotlightMenu(menu, parentTitle) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -4940,7 +5252,11 @@ function ShellSpotlight() {
           return Object.assign(Object.assign({}, group), {
             actions: group.actions.map(action => {
               return Object.assign(Object.assign({}, action), {
-                onClick: () => navigateTo(action.id)
+                onClick: () => navigateTo(action.id, {
+                  state: {
+                    title: action.label
+                  }
+                })
               });
             })
           });
@@ -4972,7 +5288,7 @@ function AppLayout(props) {
   const {
     navbarOpened
   } = useSelector(state => state.layout);
-  return jsxs(Fragment, {
+  return jsxs(ShellSessionProvider, {
     children: [jsxs(AppShell, {
       padding: 0,
       styles: {
@@ -5001,7 +5317,9 @@ function AppLayout(props) {
       }), jsx(Navbar, {}), jsx(AppShell.Main, {
         children: jsx(Suspense, {
           fallback: jsx(Loader, {}),
-          children: jsx(AppContent, {})
+          children: jsx(AppContent, {
+            withMultipleSessions: props.withMultipleSessions
+          })
         })
       }), jsx(AppShell.Footer, {
         children: jsx(FooterBar, {
@@ -20870,8 +21188,14 @@ function MenuCreateForm(props) {
   }, [context, role, user, name]);
   const onSubmit = () => {
     if (saveButtonIsDisabled()) return;
+    let ctx = AppMenuContextType.Default;
+    if (context === '1') {
+      ctx = AppMenuContextType.DomainRole;
+    } else if (context === '2') {
+      ctx = AppMenuContextType.User;
+    }
     FluxoClientSys.Instance.configuration.createAppMenu({
-      contextType: context === '1' ? AppMenuContextType.DomainRole : AppMenuContextType.User,
+      contextType: ctx,
       name: name,
       domainRoleId: context === '1' ? +role : 0,
       copyItemsFromWebMenuId: 0,
@@ -20888,7 +21212,7 @@ function MenuCreateForm(props) {
     }).catch(err => {
       showNotification({
         title: 'Errore',
-        message: 'Si è verificato un errore durante la creazione del menu',
+        message: `Si è verificato un errore durante la creazione del menu: ${err.message}`,
         color: 'red',
         autoClose: 5000
       });
@@ -27806,6 +28130,31 @@ function EmbeddedModuleItem(props) {
   });
 }
 
+function EmbeddedBackendModuleItem(props) {
+  React__default.useState(false);
+  return jsx(Group, {
+    justify: 'space-between',
+    style: {
+      border: '1px solid #dedede',
+      padding: 15
+    },
+    children: jsx(Group, {
+      children: jsxs(Stack, {
+        gap: 0,
+        children: [jsxs("span", {
+          children: [props.app.description, " ", jsxs("small", {
+            children: ["(", props.app.version, ")"]
+          })]
+        }), jsxs("small", {
+          children: [props.app.name, " - ", jsx("b", {
+            children: props.app.author
+          })]
+        })]
+      })
+    })
+  });
+}
+
 function AppsList(props) {
   const [apps, setApps] = useState([]);
   const [showInstallComponent, setShowInstallComponent] = useState(false);
@@ -27884,7 +28233,7 @@ function AppsList(props) {
         }, app.id))]
       })]
     }), jsx(DataCard, {
-      title: 'Apps di sistema',
+      title: 'Apps di sistema (frontend)',
       children: jsxs(Stack, {
         gap: 16,
         children: [embeddedModules.length === 0 && jsx(NoData, {
@@ -27897,6 +28246,18 @@ function AppsList(props) {
           }, i))
         }) : jsx(Loader, {})]
       })
+    }), jsx(DataCard, {
+      title: 'Apps di sistema (server)',
+      children: jsxs(Stack, {
+        gap: 16,
+        children: [apps.length === 0 && jsx(NoData, {
+          message: 'Nessun modulo di sistema trovato'
+        }), !loading ? jsx(Fragment, {
+          children: apps.filter(a => a.type === AppType.Backend).map((app, i) => jsx(EmbeddedBackendModuleItem, {
+            app: app
+          }, i))
+        }) : jsx(Loader, {})]
+      })
     }), jsxs(DataCard, {
       title: 'Apps JIT (Sviluppo)',
       actions: [{
@@ -27953,52 +28314,6 @@ function AppsList(props) {
   });
 }
 
-function UpdatePermission(props) {
-  const [permissionsJson, setPermissionsJson] = React__default.useState('');
-  const updatePermissions = () => {
-    try {
-      const data = JSON.parse(permissionsJson);
-      FluxoClientSys.Instance.security.permission.installPermissions(data).then(() => {
-        showNotification({
-          title: 'Operazione completata',
-          color: 'green',
-          message: `I permessi sono stati aggiornati con successo`
-        });
-        props.onUpdated();
-      }, err => {
-        showNotification({
-          title: 'Operazione fallita',
-          color: 'red',
-          message: `Non è stato possibile aggiornare i permessi: ${err.message}`
-        });
-      });
-    } catch (err) {
-      showNotification({
-        title: 'Operazione fallita',
-        color: 'red',
-        message: `Il file non è valido.`
-      });
-    }
-  };
-  return jsxs(Stack, {
-    children: [jsx(Textarea, {
-      minRows: 20,
-      value: permissionsJson,
-      onChange: v => setPermissionsJson(v.target.value)
-    }), jsxs(Group, {
-      justify: 'right',
-      children: [jsx(Button, {
-        onClick: props.onCanceled,
-        children: "Annulla"
-      }), jsx(Button, {
-        onClick: updatePermissions,
-        disabled: !permissionsJson,
-        children: "Aggiorna"
-      })]
-    })]
-  });
-}
-
 function CreateScopeForm(props) {
   const [permissionScopes] = useState(props.permissionScopes);
   const [createdScopes, setCreatedScopes] = useState([]);
@@ -28159,7 +28474,6 @@ function CreateCustomPermissionForm(props) {
 
 function PermissionGrid() {
   const [permissions, setPermissions] = useState([]);
-  const [updatePermissionModal, setUpdatePermissionModal] = useState(false);
   const [permissionScopes, setPermissionScopes] = useState([]);
   const [permissionScopesLoaded, setPermissionScopesLoaded] = useState(false);
   const [currentScope, setCurrentScope] = useState(null);
@@ -28244,14 +28558,6 @@ function PermissionGrid() {
   return jsx(DataCard, {
     title: 'Permessi',
     actions: [{
-      icon: jsx(IconArrowDown, {
-        size: 18
-      }),
-      label: 'Installa permessi',
-      onClick: () => {
-        setUpdatePermissionModal(true);
-      }
-    }, {
       icon: jsx(IconPlus, {
         size: 18
       }),
@@ -28427,19 +28733,6 @@ function PermissionGrid() {
             })
           })]
         })]
-      }), jsx(Modal, {
-        centered: true,
-        opened: updatePermissionModal,
-        onClose: () => {
-          setUpdatePermissionModal(false);
-        },
-        title: "Aggiorna permessi",
-        children: jsx(UpdatePermission, {
-          onUpdated: () => {
-            setUpdatePermissionModal(false);
-          },
-          onCanceled: () => setUpdatePermissionModal(false)
-        })
       }), jsx(Modal, {
         centered: true,
         opened: createPermissionScopeModalOpened,
@@ -29433,7 +29726,7 @@ function EmailServerConfiguration() {
             })]
           })]
         })
-      }), !configExists && jsx(DataCard, {
+      }), configExists && jsx(DataCard, {
         title: "Test invio email",
         children: jsxs(Stack, {
           children: [jsx(Alert, {
@@ -30190,12 +30483,16 @@ function FluxoShell(props) {
   const generateRoutesFromEmbeddedModules = frontend => {
     const embeddedModules = [...frontend.modules, reportsModule, workflowModule];
     const rObjs = [];
+    let routes = {};
     embeddedModules.forEach(eModule => {
       rObjs.push({
         path: `/${eModule.scope}/${eModule.name}/*`,
         children: eModule.getRouteObject()
       });
+      const aa = eModule.getRouteMap();
+      routes = Object.assign(Object.assign({}, routes), aa);
     });
+    FluxoStateDispatcher.dispatchSetRoutes(routes);
     return rObjs;
   };
   const generateRoutesFromJitApps = frontend => {
@@ -30357,6 +30654,7 @@ function FluxoShell(props) {
         const FrontendLayout = () => {
           var _a, _b;
           return (_a = frontendByRender === null || frontendByRender === void 0 ? void 0 : frontendByRender.layout) !== null && _a !== void 0 ? _a : jsx(AppLayout, {
+            withMultipleSessions: props.withMultipleSessions,
             brandName: (_b = props.brandName) !== null && _b !== void 0 ? _b : 'Fluxo',
             appVersion: props.appVersion
           });
@@ -30376,6 +30674,7 @@ function FluxoShell(props) {
         FluxoStateDispatcher.dispatchSetCurrentFrontend(res.currentFrontend);
         FluxoStateDispatcher.dispatchAllowedFrontends(res.frontends);
         FluxoStateDispatcher.dispatchHasAdminAccess(res.hasAdminAccess);
+        if (props.withMultipleSessions) FluxoStateDispatcher.dispatchSetSessionMode('multi-session');else FluxoStateDispatcher.dispatchSetSessionMode('single-session');
         const rObjs = [generateAuthRoutes(), {
           path: 'frontend-switcher',
           element: jsx(ProtectedRoute, {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@fluxo-dev/shell",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "peerDependencies": {
-    "@fluxo-dev/shell-hub": "0.0.26",
-    "@fluxo-dev/shell-korebi": "0.0.26",
-    "@fluxo-dev/shell-mfe": "0.0.26",
-    "@fluxo-dev/shell-printing": "0.0.26",
-    "@fluxo-dev/shell-reporting": "0.0.26",
-    "@fluxo-dev/shell-workflow": "0.0.26"
+    "@fluxo-dev/shell-hub": "0.0.28",
+    "@fluxo-dev/shell-korebi": "0.0.28",
+    "@fluxo-dev/shell-mfe": "0.0.28",
+    "@fluxo-dev/shell-printing": "0.0.28",
+    "@fluxo-dev/shell-reporting": "0.0.28",
+    "@fluxo-dev/shell-workflow": "0.0.28"
   },
   "module": "./index.esm.js",
   "type": "module",

package/src/lib/app.d.ts

@@ -16,6 +16,7 @@ export interface FluxoShellProps {
     frontends: ShellFrontend[];
     clientInitialization: () => Promise<void>;
     brandName?: string;
+    withMultipleSessions: boolean;
 }
 export declare function FluxoShell(props: FluxoShellProps): import("react/jsx-runtime").JSX.Element;
 export default FluxoShell;

package/src/lib/layouts/main/app-layout.d.ts

@@ -1,6 +1,7 @@
 export interface AppLayoutProps {
     appVersion: string;
     brandName: string;
+    withMultipleSessions: boolean;
 }
 declare function AppLayout(props: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
 export default AppLayout;

package/src/lib/layouts/main/content.d.ts

@@ -1,2 +1,5 @@
-declare function AppContent(): import("react/jsx-runtime").JSX.Element;
+export interface AppContentProps {
+    withMultipleSessions: boolean;
+}
+declare function AppContent(props: AppContentProps): import("react/jsx-runtime").JSX.Element;
 export default AppContent;

package/src/lib/layouts/main/shell-session-provider.d.ts

@@ -0,0 +1,18 @@
+import { ShellSession } from "./shell-session";
+import React from "react";
+interface ShellSessionContextData {
+    addSession: (title: string, element: React.ReactElement | null, url: string) => string;
+    removeSession: (id: string) => void;
+    getSession: (id: string) => void;
+    sessions: () => ShellSession[];
+    updateSession: (id: string, title: string, element: React.ReactElement | null, url: string) => void;
+    getCurrentSessionId: () => string | null;
+    getCurrentSession: () => ShellSession | null | undefined;
+    setCurrentSession: (id: string) => void;
+    isCurrentSessionDisableable: () => boolean;
+}
+export declare const ShellSessionContext: React.Context<ShellSessionContextData>;
+export declare function ShellSessionProvider(props: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/layouts/main/shell-session.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export declare class ShellSessionCollection {
+    private _sessions;
+    private _currentSessionId;
+    constructor(sessions: ShellSession[] | undefined, currentSessionId: string | null);
+    get currentSession(): ShellSession | null | undefined;
+    addSession(title: string, element: React.ReactElement | null, url: string): ShellSession;
+    removeSession(id: string): void;
+    getSession(id: string): ShellSession | undefined;
+    get sessions(): ShellSession[];
+    getCurrentSessionId(): string | null;
+    getCurrentSession(): ShellSession | null | undefined;
+    setCurrentSession(id: string): void;
+    updateSession(id: string, title: string, element: React.ReactElement | null, url: string): void;
+    getPreviuosSessionId(): string;
+    getNextSessionId(): string;
+}
+export declare class ShellSession {
+    private readonly _id;
+    private _title;
+    private _element;
+    private _url;
+    constructor(title: string, element: React.ReactElement | null, url: string);
+    get id(): string;
+    get title(): string;
+    get element(): React.ReactElement | null;
+    get url(): string;
+    updateSession(title: string, element: React.ReactElement | null, url: string): void;
+}

package/src/lib/pages/settings/apps/embedded-backend-module-item.d.ts

@@ -0,0 +1,5 @@
+import { FluxoApp } from "@fluxo-dev/api-client-base";
+export interface EmbeddedBackendModuleItemProps {
+    app: FluxoApp;
+}
+export declare function EmbeddedBackendModuleItem(props: EmbeddedBackendModuleItemProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/pages/settings/security/components/permission/update-permission.d.ts

@@ -1,5 +0,0 @@
-export interface UpdatePermissionProps {
-    onUpdated: () => void;
-    onCanceled: () => void;
-}
-export declare function UpdatePermission(props: UpdatePermissionProps): import("react/jsx-runtime").JSX.Element;