@startlibs/core 1.0.0-alpha-6u → 1.0.1

package/lib/index.js

@@ -9,36 +9,37 @@ var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
 var _inherits = require('@babel/runtime/helpers/inherits');
 var _debounce = require('lodash/fp/debounce');
 var React = require('react');
+var utils = require('@startlibs/utils');
+var core = require('@startlibs/core');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _set = require('lodash/fp/set');
+var _update = require('lodash/fp/update');
+var _isFunction = require('lodash/fp/isFunction');
+var _get = require('lodash/fp/get');
+var _isArray = require('lodash/fp/isArray');
+var _isString = require('lodash/fp/isString');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread');
 var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _unset = require('lodash/fp/unset');
 var _uniqueId = require('lodash/fp/uniqueId');
 var _differenceBy = require('lodash/fp/differenceBy');
-var _set = require('lodash/fp/set');
 var _findIndex = require('lodash/fp/findIndex');
 var _isFinite = require('lodash/fp/isFinite');
 var _max = require('lodash/fp/max');
 var _flatMap = require('lodash/fp/flatMap');
 var _without = require('lodash/fp/without');
 var _union = require('lodash/fp/union');
-var _update = require('lodash/fp/update');
 var _flow = require('lodash/fp/flow');
 var ReactDOM = require('react-dom');
 var styled = require('styled-components');
-var utils = require('@startlibs/utils');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var mitt = require('mitt');
 var _typeof = require('@babel/runtime/helpers/typeof');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var mitt = require('mitt');
-var _isArray = require('lodash/fp/isArray');
-var _isFunction = require('lodash/fp/isFunction');
-var _get = require('lodash/fp/get');
-var _isString = require('lodash/fp/isString');
 var _identity = require('lodash/fp/identity');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -50,37 +51,193 @@ var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeO
 var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
 var _debounce__default = /*#__PURE__*/_interopDefaultLegacy(_debounce);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _set__default = /*#__PURE__*/_interopDefaultLegacy(_set);
+var _update__default = /*#__PURE__*/_interopDefaultLegacy(_update);
+var _isFunction__default = /*#__PURE__*/_interopDefaultLegacy(_isFunction);
+var _get__default = /*#__PURE__*/_interopDefaultLegacy(_get);
+var _isArray__default = /*#__PURE__*/_interopDefaultLegacy(_isArray);
+var _isString__default = /*#__PURE__*/_interopDefaultLegacy(_isString);
 var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _unset__default = /*#__PURE__*/_interopDefaultLegacy(_unset);
 var _uniqueId__default = /*#__PURE__*/_interopDefaultLegacy(_uniqueId);
 var _differenceBy__default = /*#__PURE__*/_interopDefaultLegacy(_differenceBy);
-var _set__default = /*#__PURE__*/_interopDefaultLegacy(_set);
 var _findIndex__default = /*#__PURE__*/_interopDefaultLegacy(_findIndex);
 var _isFinite__default = /*#__PURE__*/_interopDefaultLegacy(_isFinite);
 var _max__default = /*#__PURE__*/_interopDefaultLegacy(_max);
 var _flatMap__default = /*#__PURE__*/_interopDefaultLegacy(_flatMap);
 var _without__default = /*#__PURE__*/_interopDefaultLegacy(_without);
 var _union__default = /*#__PURE__*/_interopDefaultLegacy(_union);
-var _update__default = /*#__PURE__*/_interopDefaultLegacy(_update);
 var _flow__default = /*#__PURE__*/_interopDefaultLegacy(_flow);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var mitt__default = /*#__PURE__*/_interopDefaultLegacy(mitt);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var mitt__default = /*#__PURE__*/_interopDefaultLegacy(mitt);
-var _isArray__default = /*#__PURE__*/_interopDefaultLegacy(_isArray);
-var _isFunction__default = /*#__PURE__*/_interopDefaultLegacy(_isFunction);
-var _get__default = /*#__PURE__*/_interopDefaultLegacy(_get);
-var _isString__default = /*#__PURE__*/_interopDefaultLegacy(_isString);
 var _identity__default = /*#__PURE__*/_interopDefaultLegacy(_identity);
 
+var StartlibsContext = React__default['default'].createContext({});
+var PopupContext = React__default['default'].createContext({});
+var StartlibsMetacontext = React__default['default'].createContext(function () {});
+var StartlibsConsumer = StartlibsContext.Consumer;
+var wrappeStyle = {
+  height: '100%'
+};
+var StartlibsProvider =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits__default['default'](StartlibsProvider, _React$Component);
+
+  function StartlibsProvider() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck__default['default'](this, StartlibsProvider);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn__default['default'](this, (_getPrototypeOf2 = _getPrototypeOf__default['default'](StartlibsProvider)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this.openToggles = new Map();
+
+    _this.popupToggleRender = function (_ref, ref) {
+      var isOpen = _ref.isOpen,
+          close = _ref.close;
+
+      if (isOpen && !_this.openToggles.has(ref)) {
+        _this.closePopup();
+
+        _this.openToggles.set(ref, close);
+      }
+    };
+
+    _this.closePopup = function () {
+      core.clearPopups();
+    };
+
+    _this.startlibsMeta = new Map();
+
+    _this.getMeta = function (key, initValue) {
+      var exists = _this.startlibsMeta.get(key);
+
+      if (exists) return exists;
+
+      _this.startlibsMeta.set(key, utils.callIfFunction(initValue));
+
+      return initValue;
+    };
+
+    return _this;
+  }
+
+  _createClass__default['default'](StartlibsProvider, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      utils.fixMediaQuery();
+
+      var addVHFix = function addVHFix() {
+        var _document$documentEle, _document$documentEle2;
+
+        var vh = window.innerHeight * 0.01;
+        (_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : (_document$documentEle2 = _document$documentEle.style) === null || _document$documentEle2 === void 0 ? void 0 : _document$documentEle2.setProperty('--vh', "".concat(vh, "px"));
+      };
+
+      window.addEventListener('resize', _debounce__default['default'](200, addVHFix));
+      addVHFix();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return React__default['default'].createElement(StartlibsContext.Provider, {
+        value: this.props.value
+      }, React__default['default'].createElement(StartlibsMetacontext.Provider, {
+        value: this.getMeta
+      }, React__default['default'].createElement(PopupContext.Provider, {
+        value: this.popupToggleRender
+      }, React__default['default'].createElement("div", {
+        style: wrappeStyle,
+        onClick: this.closePopup
+      }, React__default['default'].createElement(core.SlotProvider, null, this.props.children)))));
+    }
+  }]);
+
+  return StartlibsProvider;
+}(React__default['default'].Component);
+
+var willUseLayers = function willUseLayers() {
+  var useEffect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : React__default['default'].useEffect;
+
+  var _willUseSharedCallbac = core.willUseSharedCallback(useEffect),
+      _willUseSharedCallbac2 = _slicedToArray__default['default'](_willUseSharedCallbac, 3),
+      useRegisterSharedCallback = _willUseSharedCallbac2[0],
+      callGroup = _willUseSharedCallbac2[1],
+      _getSize = _willUseSharedCallbac2[2];
+
+  var useLayer = function useLayer() {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        onFirst = _ref.onFirst,
+        onEmpty = _ref.onEmpty,
+        onTop = _ref.onTop,
+        onRemove = _ref.onRemove;
+
+    var listener = arguments.length > 1 ? arguments[1] : undefined;
+    var resetIndex = React.useCallback(function () {
+      setIndex(getIndex());
+
+      if (getIndex() + 1 === _getSize()) {
+        utils.callIfFunction(onTop, getIndex);
+      }
+    }, []);
+    var getIndex = useRegisterSharedCallback(resetIndex, listener);
+
+    var _useState = React.useState(getIndex()),
+        _useState2 = _slicedToArray__default['default'](_useState, 2),
+        index = _useState2[0],
+        setIndex = _useState2[1];
+
+    useEffect(function () {
+      if (getIndex() === 0) {
+        utils.callIfFunction(onFirst);
+      }
+
+      resetIndex();
+      return function () {
+        utils.callIfFunction(onRemove, _getSize());
+
+        if (_getSize() === 0) {
+          utils.callIfFunction(onEmpty);
+        }
+
+        callGroup();
+      };
+    }, []);
+    return [index, {
+      isFirst: function isFirst() {
+        return getIndex() === 1;
+      },
+      isTop: function isTop() {
+        return getIndex() === _getSize() - 1;
+      },
+      isEmpty: function isEmpty() {
+        return _getSize() === 0;
+      },
+      getSize: function getSize() {
+        return _getSize();
+      }
+    }];
+  };
+
+  return [useLayer, _getSize];
+};
+
 var callList = function callList(list, firstArg) {
   for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     args[_key - 2] = arguments[_key];
@@ -188,7 +345,7 @@ var willUseSharedCallback = function willUseSharedCallback() {
 
 var notDefined = {};
 var willUseSharedState = function willUseSharedState(initialValue) {
-  var _willUseSharedCallbac = willUseSharedCallback(),
+  var _willUseSharedCallbac = core.willUseSharedCallback(),
       _willUseSharedCallbac2 = _slicedToArray__default['default'](_willUseSharedCallbac, 3),
       useRegisterGroupCallback = _willUseSharedCallbac2[0],
       callGroup = _willUseSharedCallbac2[1],
@@ -233,54 +390,180 @@ var willUseSharedState = function willUseSharedState(initialValue) {
   }, clear];
 };
 
-var not_defined = {};
-var useConstant = function useConstant(value) {
-  var ref = React.useRef(not_defined);
-
-  if (ref.current === not_defined) {
-    ref.current = value;
-  }
+var updateAllInputsState = function updateAllInputsState(inputs, values) {
+  var deferedUndefined = [];
+  inputs.forEach(function (input) {
+    var _input = _slicedToArray__default['default'](input, 2),
+        setValue = _input[0],
+        selector = _input[1];
 
-  return ref.current;
-};
-var useLazyConstant = function useLazyConstant(value) {
-  var ref = React.useRef(not_defined);
+    var newValue = selector(values);
 
-  if (ref.current === not_defined) {
-    ref.current = utils.callIfFunction(value);
-  }
+    if (newValue === undefined) {
+      deferedUndefined.push([setValue, newValue]);
+    } else {
+      setValue(newValue);
+    }
+  });
+  deferedUndefined.forEach(function (_ref) {
+    var _ref2 = _slicedToArray__default['default'](_ref, 2),
+        set = _ref2[0],
+        value = _ref2[1];
 
-  return ref.current;
+    return set(value);
+  });
 };
 
-var SlotContext = React__default['default'].createContext(new Map());
-
-var _willUseSharedState = willUseSharedState(),
-    _willUseSharedState2 = _slicedToArray__default['default'](_willUseSharedState, 2),
-    useFillHookState = _willUseSharedState2[0],
-    useFillHookStateRef = _willUseSharedState2[1];
+var pathSelector = function pathSelector(path) {
+  return utils._s.get(path || []);
+};
 
-var _willUseSharedState3 = willUseSharedState(),
-    _willUseSharedState4 = _slicedToArray__default['default'](_willUseSharedState3, 2),
-    useHiddenFillHookState = _willUseSharedState4[0],
-    useHiddenFillHookStateRef = _willUseSharedState4[1];
+var parsePathOrSelector = function parsePathOrSelector(pathOrSelector) {
+  var isNotSelector = typeof pathOrSelector !== 'function';
 
-var DEFAULT_CONTEXT = new Map();
-var SlotProvider = function SlotProvider(_ref) {
-  var children = _ref.children;
-  return React__default['default'].createElement(SlotContext.Provider, {
-    value: DEFAULT_CONTEXT
-  }, children, React__default['default'].createElement(React__default['default'].Suspense, {
-    fallback: null
-  }, React__default['default'].createElement(FillHooks, null)), React__default['default'].createElement(HiddenFillHooks, null));
+  if (isNotSelector) {
+    return [utils.formatPath(pathOrSelector), pathSelector(pathOrSelector)];
+  } else {
+    return ['', pathOrSelector];
+  }
 };
-var Slot = function Slot(_ref2) {
-  var name = _ref2.name,
-      children = _ref2.children,
-      rest = _objectWithoutProperties__default['default'](_ref2, ["name", "children"]);
 
-  var ref = React.useRef();
-  var slotInfo = useConstant({
+var willUseSpreadState = function willUseSpreadState(defaultContextValue) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var Context = React__default['default'].createContext(defaultContextValue);
+  var EMPTY_GLOBAL = {};
+  var prevInitState = EMPTY_GLOBAL;
+  var globalState = EMPTY_GLOBAL;
+
+  var getGlobalState = function getGlobalState(key) {
+    return _isString__default['default'](key) || _isArray__default['default'](key) ? _get__default['default'](key, globalState) : globalState;
+  };
+
+  var useProvideSpreadState = function useProvideSpreadState(initState, setCallback) {
+    var _useConsumerCatalog = core.useConsumerCatalog(function (input) {
+      return updateAllInputsState([input], state.get());
+    }),
+        _useConsumerCatalog2 = _slicedToArray__default['default'](_useConsumerCatalog, 2),
+        consumerList = _useConsumerCatalog2[0],
+        manager = _useConsumerCatalog2[1];
+
+    var state = core.useRefState(initState, setCallback);
+
+    if (options.initRefCheck) {
+      if (prevInitState !== initState) {
+        globalState = initState;
+      }
+
+      prevInitState = initState;
+    }
+
+    if (globalState === EMPTY_GLOBAL) {
+      globalState = initState;
+    }
+
+    React.useEffect(function () {
+      globalState = state.get();
+    }, []);
+
+    var setState = function setState(newState, fastPath, config) {
+      // console.log("Fastpath noop:"+fastPath)
+      state.set(newState, config);
+      globalState = state.get();
+      updateAllInputsState(consumerList(), state.get());
+    };
+
+    var contextValue = React.useMemo(function () {
+      return [state.get, setState, manager];
+    }, []);
+    return [Context.Provider, contextValue, [state.get, setState]];
+  };
+
+  var useSpreadState = function useSpreadState(pathOrSelector, inputs) {
+    var _useContext = React.useContext(Context),
+        _useContext2 = _slicedToArray__default['default'](_useContext, 3),
+        getSpreadState = _useContext2[0],
+        setSpreadState = _useContext2[1],
+        manager = _useContext2[2];
+
+    var _parsePathOrSelector = parsePathOrSelector(pathOrSelector),
+        _parsePathOrSelector2 = _slicedToArray__default['default'](_parsePathOrSelector, 2),
+        path = _parsePathOrSelector2[0],
+        selector = _parsePathOrSelector2[1];
+
+    var pathOrInput = [path] || inputs || [];
+
+    var _useState = React.useState(selector(getSpreadState())),
+        _useState2 = _slicedToArray__default['default'](_useState, 2),
+        value = _useState2[0],
+        setValue = _useState2[1];
+
+    var isUnmounted = core.useIsUnmounted();
+    var currentPath = core.useRefState(path);
+
+    if (path !== currentPath.get()) {
+      /* when path changes, the consumerCatalogCallback will update the new value
+      *  another solution would be to call setValue here directly
+      *  the return value will still be the old, but will be changed before render, just like getDerivedStateFromProps
+      *
+      *  if there's a need for the return value to be the same, the value or, if enters here new value,
+      *  can be returned in an temp variable
+      * */
+      currentPath.set(path);
+    }
+
+    var input = React.useMemo(function () {
+      return [function (v) {
+        /* noop for elements that may be unregistered while looping through consumerList */
+        if (path === currentPath.get() && !isUnmounted()) {
+          setValue(v);
+        }
+      }, selector];
+    }, pathOrInput);
+    core.useCatalogManager(manager, input);
+    var setState = React.useCallback(function (v) {
+      return setSpreadState((_isFunction__default['default'](v) ? pathOrSelector === undefined ? function () {
+        return v;
+      } : _update__default['default'] : _set__default['default'])(path, v), path);
+    }, pathOrInput);
+
+    var getValue = function getValue() {
+      return selector(getGlobalState());
+    };
+
+    return [value, setState, getValue];
+  };
+
+  return [useProvideSpreadState, useSpreadState, Context, getGlobalState];
+};
+
+var SlotContext = React__default['default'].createContext(new Map());
+
+var _willUseSharedState = core.willUseSharedState(),
+    _willUseSharedState2 = _slicedToArray__default['default'](_willUseSharedState, 2),
+    useFillHookState = _willUseSharedState2[0],
+    useFillHookStateRef = _willUseSharedState2[1];
+
+var _willUseSharedState3 = core.willUseSharedState(),
+    _willUseSharedState4 = _slicedToArray__default['default'](_willUseSharedState3, 2),
+    useHiddenFillHookState = _willUseSharedState4[0],
+    useHiddenFillHookStateRef = _willUseSharedState4[1];
+
+var DEFAULT_CONTEXT = new Map();
+var SlotProvider = function SlotProvider(_ref) {
+  var children = _ref.children;
+  return React__default['default'].createElement(SlotContext.Provider, {
+    value: DEFAULT_CONTEXT
+  }, children, React__default['default'].createElement(React__default['default'].Suspense, {
+    fallback: null
+  }, React__default['default'].createElement(FillHooks, null)), React__default['default'].createElement(HiddenFillHooks, null));
+};
+var Slot = function Slot(_ref2) {
+  var name = _ref2.name,
+      children = _ref2.children,
+      rest = _objectWithoutProperties__default['default'](_ref2, ["name", "children"]);
+
+  var ref = React.useRef();
+  var slotInfo = core.useConstant({
     ref: ref
   });
   var slots = React.useContext(SlotContext);
@@ -518,113 +801,296 @@ var useHiddenFill = function useHiddenFill(children, inputs) {
   }, []);
 };
 
-var isPath = function isPath(path) {
-  return typeof path === 'string' || typeof path === 'number' || Array.isArray(path);
-};
-
-var getter = function getter(value) {
-  return function (path) {
-    return path !== "" && isPath(path) ? utils._s.get(path, value) : value;
-  };
+var propsOrConsume = function propsOrConsume(prop, Consumer, childrenAsFunction) {
+  return prop ? childrenAsFunction(prop) : React__default['default'].createElement(Consumer, null, childrenAsFunction);
 };
 
-var uninitialized = {};
-var useRefState = function useRefState(defaultValue, setCallback) {
-  var ref = React.useRef(uninitialized);
-
-  if (ref.current === uninitialized) {
-    ref.current = utils.callIfFunction(defaultValue);
-  }
-
-  return React.useMemo(function () {
-    var get = function get(path) {
-      return getter(ref.current)(path);
-    };
+var addConsumers = function addConsumers(Component, obj) {
+  return Object.entries(obj).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray__default['default'](_ref, 2),
+        propKey = _ref2[0],
+        Consumer = _ref2[1];
 
-    var set = function set(v, config) {
-      var prev = ref.current;
-      ref.current = utils.callIfFunctions(v, function () {
-        return get();
+    return function (props) {
+      return propsOrConsume(props[propKey], Consumer, function (v) {
+        return acc(_objectSpread__default['default'](_defineProperty__default['default']({}, propKey, v), props));
       });
-
-      if (prev !== ref.current && (!config || !config.ignoreCallback)) {
-        utils.callIfFunction(setCallback, prev, ref.current);
-      }
     };
+  }, function (props) {
+    return React__default['default'].createElement(Component, props);
+  });
+};
 
-    return {
-      get: get,
-      set: set
+var consumes = function consumes(obj) {
+  return function (Component) {
+    var withConsumers = addConsumers(Component, obj);
+    return function (props) {
+      return withConsumers(props);
     };
-  }, []);
+  };
 };
 
-var useCallState = function useCallState(defaultValue, setCallback) {
-  var _useState = React.useState(defaultValue),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      val = _useState2[0],
-      setValue = _useState2[1];
+var withDialogError = function withDialogError(Dialog) {
+  var ErrorBoundedComponent = React__default['default'].forwardRef(function (props, ref) {
+    return React__default['default'].createElement(Dialog, _extends__default['default']({
+      ref: ref
+    }, props)); // const ErrorBoundary = __internals('ErrorBoundary')
 
-  return React.useMemo(function () {
-    var get = function get() {
-      return val;
-    };
+    /*return (
+      <ErrorBoundary Error={props.Error || __internals('DialogError')} closeDialog={props.closeDialog}>
+        <Dialog {...props}/>
+      </ErrorBoundary>
+    )*/
+  }); // ErrorBoundedComponent.contextTypes = {startlibs:()=>null}
 
-    return {
-      get: get,
-      val: val,
-      set: setValue
-    };
-  }, [val]);
+  return ErrorBoundedComponent;
 };
 
-var useIsUnmounted = function useIsUnmounted() {
-  var unmounted = React.useRef();
-  React.useEffect(function () {
-    return function () {
-      return unmounted.current = true;
-    };
-  }, []);
-  return function () {
-    return unmounted.current;
-  };
-};
+var GroupEventFactory = function GroupEventFactory() {
+  var emitter = mitt__default['default']();
 
-var useToggleInternal = function useToggleInternal() {
-  var startWith = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  var useStore = arguments.length > 1 ? arguments[1] : undefined;
-  var callback = arguments.length > 2 ? arguments[2] : undefined;
-  var key = arguments.length > 3 ? arguments[3] : undefined;
-  var isOpen = useStore(startWith);
-  var closing = useStore(false);
-  var refIsOpen = useRefState(isOpen.get());
-  var refIsClosing = useRefState(closing.get());
-  var timerId = React.useRef();
-  var isUnmounted = useIsUnmounted();
+  var WithGroupEvent =
+  /*#__PURE__*/
+  function (_React$Component) {
+    _inherits__default['default'](WithGroupEvent, _React$Component);
 
-  var clearClosing = function clearClosing() {
-    if (refIsClosing.get() !== false) {
-      closing.set(false);
-      refIsClosing.set(false);
-      window.clearTimeout(timerId.current);
-    }
-  };
+    function WithGroupEvent() {
+      var _getPrototypeOf2;
 
-  var toggleWith = function toggleWith() {
-    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    var calledValue = utils.callIfFunction(value, refIsOpen.get());
-    var newValue = refIsOpen.get() === calledValue ? !calledValue : calledValue;
+      var _this;
 
-    if (!isUnmounted() && refIsOpen.get() !== newValue) {
-      var result = utils.callIfFunction(callback, newValue, refIsOpen.get());
+      _classCallCheck__default['default'](this, WithGroupEvent);
 
-      if (result === false) {
-        return;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
 
-      isOpen.set(newValue);
-      refIsOpen.set(newValue);
-      clearClosing();
+      _this = _possibleConstructorReturn__default['default'](this, (_getPrototypeOf2 = _getPrototypeOf__default['default'](WithGroupEvent)).call.apply(_getPrototypeOf2, [this].concat(args)));
+      _this.events = {};
+
+      _this.processEvent = function (type, event) {
+        (_this.events[type] || []).forEach(function (c) {
+          return c(event);
+        });
+      };
+
+      _this.groupEventProps = {
+        on: function on(type, callback) {
+          _this.events[type] = (_this.events[type] || []).concat(callback);
+        },
+        off: function off(type, callback) {
+          _this.events[type] = (_this.events[type] || []).filter(function (e) {
+            return e !== callback;
+          });
+        },
+        emit: emitter.emit
+      };
+      return _this;
+    }
+
+    _createClass__default['default'](WithGroupEvent, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        emitter.on('*', this.processEvent);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        emitter.off('*', this.processEvent);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return this.props.children(this.groupEventProps);
+      }
+    }]);
+
+    return WithGroupEvent;
+  }(React__default['default'].Component);
+
+  return WithGroupEvent;
+};
+var withGroupEvent = function withGroupEvent(Component) {
+  var WithGroupEvent = GroupEventFactory();
+  return React__default['default'].forwardRef(function (props, ref) {
+    return React__default['default'].createElement(WithGroupEvent, null, function (groupEvent) {
+      return React__default['default'].createElement(Component, _extends__default['default']({}, props, {
+        ref: ref,
+        groupEvent: groupEvent
+      }));
+    });
+  });
+};
+
+var WithRef =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits__default['default'](WithRef, _React$Component);
+
+  function WithRef(props) {
+    var _this;
+
+    _classCallCheck__default['default'](this, WithRef);
+
+    _this = _possibleConstructorReturn__default['default'](this, _getPrototypeOf__default['default'](WithRef).call(this, props));
+    var total = props.length || props.children.length;
+    var refs = new Array(total);
+
+    for (var i = 0; i < total; i++) {
+      refs[i] = React__default['default'].createRef();
+    }
+
+    _this.createdRefs = refs;
+    return _this;
+  }
+
+  _createClass__default['default'](WithRef, [{
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+      return children.apply(void 0, _toConsumableArray__default['default'](this.createdRefs));
+    }
+  }]);
+
+  return WithRef;
+}(React__default['default'].Component);
+
+var addExtraProp = function addExtraProp(element, extra) {
+  var override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  return React__default['default'].cloneElement(element, override ? _objectSpread__default['default']({}, element.props, extra) : _objectSpread__default['default']({}, extra, element.props), element.props.children);
+};
+
+var WithLazyPlaceholder = function WithLazyPlaceholder(_ref) {
+  var value = _ref.value,
+      fallback = _ref.fallback,
+      children = _ref.children,
+      _ref$forwardProps = _ref.forwardProps,
+      forwardProps = _ref$forwardProps === void 0 ? false : _ref$forwardProps,
+      props = _objectWithoutProperties__default['default'](_ref, ["value", "fallback", "children", "forwardProps"]);
+
+  return React__default['default'].createElement(React__default['default'].Suspense, {
+    fallback: React__default['default'].Children.map(children(fallback, {
+      isLoading: true
+    }), function (child) {
+      return React__default['default'].isValidElement(child) ? addExtraProp(child, {
+        isLoading: true
+      }, false) : child;
+    })
+  }, React__default['default'].createElement(Load, {
+    value: value,
+    children: children,
+    forwardProps: forwardProps && props
+  }));
+};
+var WithLazyResource = function WithLazyResource(_ref2) {
+  var value = _ref2.value,
+      wrap = _ref2.wrap,
+      fallback = _ref2.fallback,
+      children = _ref2.children,
+      _ref2$forwardProps = _ref2.forwardProps,
+      forwardProps = _ref2$forwardProps === void 0 ? false : _ref2$forwardProps,
+      props = _objectWithoutProperties__default['default'](_ref2, ["value", "wrap", "fallback", "children", "forwardProps"]);
+
+  return wrap || fallback !== undefined ? React__default['default'].createElement(React__default['default'].Suspense, {
+    fallback: utils.ifUndefined(fallback, null)
+  }, React__default['default'].createElement(Load, {
+    value: value,
+    forwardProps: forwardProps && props,
+    children: children
+  })) : React__default['default'].createElement(Load, {
+    value: value,
+    children: children,
+    forwardProps: forwardProps && props
+  });
+};
+
+var Load = function Load(_ref3) {
+  var value = _ref3.value,
+      children = _ref3.children,
+      forwardProps = _ref3.forwardProps;
+  var loaded = _isArray__default['default'](value) ? value.forEach(function (v) {
+    return v.promise();
+  }) || value.map(function (v) {
+    return v.read();
+  }) : value.read();
+
+  var _useReducer = React.useReducer(function (s) {
+    return s + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray__default['default'](_useReducer, 2),
+      update = _useReducer2[1];
+
+  var refresh = function refresh() {
+    return Promise.all(_isArray__default['default'](value) ? value.map(function (v) {
+      return v.refresh().promise();
+    }) : [value.refresh().promise()]).then(update);
+  };
+
+  return forwardProps ? addExtraProp(children(loaded, {
+    refresh: refresh,
+    update: update
+  }), forwardProps) : children(loaded, {
+    refresh: refresh,
+    update: update
+  });
+};
+
+var useCallbackStable = function useCallbackStable(fn) {
+  var ref = React__default['default'].useRef([fn, function () {
+    return ref[0].apply(ref, arguments);
+  }]).current; // Per Dan Abramov: useInsertionEffect executes marginally closer to the
+  // correct timing for ref synchronization than useLayoutEffect on React 18.
+  // See: https://github.com/facebook/react/pull/25881#issuecomment-1356244360
+
+  React.useInsertionEffect(function () {
+    ref[0] = fn;
+  });
+  return ref[1];
+};
+
+var WithEffect = function WithEffect(_ref) {
+  var _ref$inputs = _ref.inputs,
+      inputs = _ref$inputs === void 0 ? [] : _ref$inputs,
+      children = _ref.children;
+  React.useEffect(children, inputs);
+  return null;
+};
+
+var useToggleInternal = function useToggleInternal() {
+  var startWith = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var useStore = arguments.length > 1 ? arguments[1] : undefined;
+  var callback = arguments.length > 2 ? arguments[2] : undefined;
+  var key = arguments.length > 3 ? arguments[3] : undefined;
+  var isOpen = useStore(startWith);
+  var closing = useStore(false);
+  var refIsOpen = core.useRefState(isOpen.get());
+  var refIsClosing = core.useRefState(closing.get());
+  var timerId = React.useRef();
+  var isUnmounted = core.useIsUnmounted();
+
+  var clearClosing = function clearClosing() {
+    if (refIsClosing.get() !== false) {
+      closing.set(false);
+      refIsClosing.set(false);
+      window.clearTimeout(timerId.current);
+    }
+  };
+
+  var toggleWith = function toggleWith() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    var calledValue = utils.callIfFunction(value, refIsOpen.get());
+    var newValue = refIsOpen.get() === calledValue ? !calledValue : calledValue;
+
+    if (!isUnmounted() && refIsOpen.get() !== newValue) {
+      var result = utils.callIfFunction(callback, newValue, refIsOpen.get());
+
+      if (result === false) {
+        return;
+      }
+
+      isOpen.set(newValue);
+      refIsOpen.set(newValue);
+      clearClosing();
     }
   };
 
@@ -797,10 +1263,10 @@ var useToggleInternal = function useToggleInternal() {
 };
 
 var useToggle = function useToggle(startWith, callback, key) {
-  return useToggleInternal(startWith, useCallState, callback, key);
+  return useToggleInternal(startWith, core.useCallState, callback, key);
 };
 var useRefToggle = function useRefToggle(startWith) {
-  return useToggleInternal(startWith, useRefState);
+  return useToggleInternal(startWith, core.useRefState);
 };
 
 var prevOpenToggleClose = function prevOpenToggleClose() {};
@@ -814,7 +1280,7 @@ var clearPopups = function clearPopups() {
   }
 };
 var usePopupToggle = function usePopupToggle(startWith, callback) {
-  var toggle = useToggle(startWith, function (v, prev) {
+  var toggle = core.useToggle(startWith, function (v, prev) {
     var result = utils.callIfFunction(callback, v, prev);
 
     if (result === false) {
@@ -837,413 +1303,100 @@ var usePopupToggle = function usePopupToggle(startWith, callback) {
   return toggle;
 };
 
-var StartlibsContext = React__default['default'].createContext({});
-var PopupContext = React__default['default'].createContext({});
-var StartlibsMetacontext = React__default['default'].createContext(function () {});
-var StartlibsConsumer = StartlibsContext.Consumer;
-var wrappeStyle = {
-  height: '100%'
-};
-var StartlibsProvider =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits__default['default'](StartlibsProvider, _React$Component);
-
-  function StartlibsProvider() {
-    var _getPrototypeOf2;
+var useCallState = function useCallState(defaultValue, setCallback) {
+  var _useState = React.useState(defaultValue),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      val = _useState2[0],
+      setValue = _useState2[1];
 
-    var _this;
+  return React.useMemo(function () {
+    var get = function get() {
+      return val;
+    };
 
-    _classCallCheck__default['default'](this, StartlibsProvider);
+    return {
+      get: get,
+      val: val,
+      set: setValue
+    };
+  }, [val]);
+};
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+var isPath = function isPath(path) {
+  return typeof path === 'string' || typeof path === 'number' || Array.isArray(path);
+};
 
-    _this = _possibleConstructorReturn__default['default'](this, (_getPrototypeOf2 = _getPrototypeOf__default['default'](StartlibsProvider)).call.apply(_getPrototypeOf2, [this].concat(args)));
-    _this.openToggles = new Map();
+var getter = function getter(value) {
+  return function (path) {
+    return path !== "" && isPath(path) ? utils._s.get(path, value) : value;
+  };
+};
 
-    _this.popupToggleRender = function (_ref, ref) {
-      var isOpen = _ref.isOpen,
-          close = _ref.close;
+var uninitialized = {};
+var useRefState = function useRefState(defaultValue, setCallback) {
+  var ref = React.useRef(uninitialized);
 
-      if (isOpen && !_this.openToggles.has(ref)) {
-        _this.closePopup();
+  if (ref.current === uninitialized) {
+    ref.current = utils.callIfFunction(defaultValue);
+  }
 
-        _this.openToggles.set(ref, close);
-      }
+  return React.useMemo(function () {
+    var get = function get(path) {
+      return getter(ref.current)(path);
     };
 
-    _this.closePopup = function () {
-      clearPopups();
-    };
-
-    _this.startlibsMeta = new Map();
-
-    _this.getMeta = function (key, initValue) {
-      var exists = _this.startlibsMeta.get(key);
-
-      if (exists) return exists;
-
-      _this.startlibsMeta.set(key, utils.callIfFunction(initValue));
-
-      return initValue;
-    };
-
-    return _this;
-  }
-
-  _createClass__default['default'](StartlibsProvider, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      utils.fixMediaQuery();
-
-      var addVHFix = function addVHFix() {
-        var _document$documentEle, _document$documentEle2;
-
-        var vh = window.innerHeight * 0.01;
-        (_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : (_document$documentEle2 = _document$documentEle.style) === null || _document$documentEle2 === void 0 ? void 0 : _document$documentEle2.setProperty('--vh', "".concat(vh, "px"));
-      };
-
-      window.addEventListener('resize', _debounce__default['default'](200, addVHFix));
-      addVHFix();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return React__default['default'].createElement(StartlibsContext.Provider, {
-        value: this.props.value
-      }, React__default['default'].createElement(StartlibsMetacontext.Provider, {
-        value: this.getMeta
-      }, React__default['default'].createElement(PopupContext.Provider, {
-        value: this.popupToggleRender
-      }, React__default['default'].createElement(SlotProvider, null, React__default['default'].createElement("div", {
-        style: wrappeStyle,
-        onClick: this.closePopup
-      }, this.props.children)))));
-    }
-  }]);
-
-  return StartlibsProvider;
-}(React__default['default'].Component);
-
-var propsOrConsume = function propsOrConsume(prop, Consumer, childrenAsFunction) {
-  return prop ? childrenAsFunction(prop) : React__default['default'].createElement(Consumer, null, childrenAsFunction);
-};
-
-var addConsumers = function addConsumers(Component, obj) {
-  return Object.entries(obj).reduce(function (acc, _ref) {
-    var _ref2 = _slicedToArray__default['default'](_ref, 2),
-        propKey = _ref2[0],
-        Consumer = _ref2[1];
-
-    return function (props) {
-      return propsOrConsume(props[propKey], Consumer, function (v) {
-        return acc(_objectSpread__default['default'](_defineProperty__default['default']({}, propKey, v), props));
+    var set = function set(v, config) {
+      var prev = ref.current;
+      ref.current = utils.callIfFunctions(v, function () {
+        return get();
       });
-    };
-  }, function (props) {
-    return React__default['default'].createElement(Component, props);
-  });
-};
-
-var consumes = function consumes(obj) {
-  return function (Component) {
-    var withConsumers = addConsumers(Component, obj);
-    return function (props) {
-      return withConsumers(props);
-    };
-  };
-};
-
-var withDialogError = function withDialogError(Dialog) {
-  var ErrorBoundedComponent = React__default['default'].forwardRef(function (props, ref) {
-    return React__default['default'].createElement(Dialog, _extends__default['default']({
-      ref: ref
-    }, props)); // const ErrorBoundary = __internals('ErrorBoundary')
-
-    /*return (
-      <ErrorBoundary Error={props.Error || __internals('DialogError')} closeDialog={props.closeDialog}>
-        <Dialog {...props}/>
-      </ErrorBoundary>
-    )*/
-  }); // ErrorBoundedComponent.contextTypes = {startlibs:()=>null}
-
-  return ErrorBoundedComponent;
-};
-
-var GroupEventFactory = function GroupEventFactory() {
-  var emitter = mitt__default['default']();
 
-  var WithGroupEvent =
-  /*#__PURE__*/
-  function (_React$Component) {
-    _inherits__default['default'](WithGroupEvent, _React$Component);
-
-    function WithGroupEvent() {
-      var _getPrototypeOf2;
-
-      var _this;
-
-      _classCallCheck__default['default'](this, WithGroupEvent);
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _possibleConstructorReturn__default['default'](this, (_getPrototypeOf2 = _getPrototypeOf__default['default'](WithGroupEvent)).call.apply(_getPrototypeOf2, [this].concat(args)));
-      _this.events = {};
-
-      _this.processEvent = function (type, event) {
-        (_this.events[type] || []).forEach(function (c) {
-          return c(event);
-        });
-      };
-
-      _this.groupEventProps = {
-        on: function on(type, callback) {
-          _this.events[type] = (_this.events[type] || []).concat(callback);
-        },
-        off: function off(type, callback) {
-          _this.events[type] = (_this.events[type] || []).filter(function (e) {
-            return e !== callback;
-          });
-        },
-        emit: emitter.emit
-      };
-      return _this;
-    }
-
-    _createClass__default['default'](WithGroupEvent, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        emitter.on('*', this.processEvent);
-      }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        emitter.off('*', this.processEvent);
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return this.props.children(this.groupEventProps);
+      if (prev !== ref.current && (!config || !config.ignoreCallback)) {
+        utils.callIfFunction(setCallback, prev, ref.current);
       }
-    }]);
-
-    return WithGroupEvent;
-  }(React__default['default'].Component);
-
-  return WithGroupEvent;
-};
-var withGroupEvent = function withGroupEvent(Component) {
-  var WithGroupEvent = GroupEventFactory();
-  return React__default['default'].forwardRef(function (props, ref) {
-    return React__default['default'].createElement(WithGroupEvent, null, function (groupEvent) {
-      return React__default['default'].createElement(Component, _extends__default['default']({}, props, {
-        ref: ref,
-        groupEvent: groupEvent
-      }));
-    });
-  });
-};
-
-var WithRef =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits__default['default'](WithRef, _React$Component);
-
-  function WithRef(props) {
-    var _this;
-
-    _classCallCheck__default['default'](this, WithRef);
-
-    _this = _possibleConstructorReturn__default['default'](this, _getPrototypeOf__default['default'](WithRef).call(this, props));
-    var total = props.length || props.children.length;
-    var refs = new Array(total);
-
-    for (var i = 0; i < total; i++) {
-      refs[i] = React__default['default'].createRef();
-    }
-
-    _this.createdRefs = refs;
-    return _this;
-  }
-
-  _createClass__default['default'](WithRef, [{
-    key: "render",
-    value: function render() {
-      var children = this.props.children;
-      return children.apply(void 0, _toConsumableArray__default['default'](this.createdRefs));
-    }
-  }]);
-
-  return WithRef;
-}(React__default['default'].Component);
-
-var addExtraProp = function addExtraProp(element, extra) {
-  var override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  return React__default['default'].cloneElement(element, override ? _objectSpread__default['default']({}, element.props, extra) : _objectSpread__default['default']({}, extra, element.props), element.props.children);
-};
-
-var WithLazyResource = function WithLazyResource(_ref) {
-  var value = _ref.value,
-      wrap = _ref.wrap,
-      fallback = _ref.fallback,
-      children = _ref.children,
-      _ref$forwardProps = _ref.forwardProps,
-      forwardProps = _ref$forwardProps === void 0 ? false : _ref$forwardProps,
-      props = _objectWithoutProperties__default['default'](_ref, ["value", "wrap", "fallback", "children", "forwardProps"]);
-
-  return wrap || fallback !== undefined ? React__default['default'].createElement(React__default['default'].Suspense, {
-    fallback: utils.ifUndefined(fallback, null)
-  }, React__default['default'].createElement(Load, {
-    value: value,
-    forwardProps: forwardProps && props,
-    children: children
-  })) : React__default['default'].createElement(Load, {
-    value: value,
-    children: children,
-    forwardProps: forwardProps && props
-  });
-};
-
-var Load = function Load(_ref2) {
-  var value = _ref2.value,
-      children = _ref2.children,
-      forwardProps = _ref2.forwardProps;
-  var loaded = _isArray__default['default'](value) ? value.forEach(function (v) {
-    return v.promise();
-  }) || value.map(function (v) {
-    return v.read();
-  }) : value.read();
-
-  var _useReducer = React.useReducer(function (s) {
-    return s + 1;
-  }, 0),
-      _useReducer2 = _slicedToArray__default['default'](_useReducer, 2),
-      update = _useReducer2[1];
-
-  var refresh = function refresh() {
-    return Promise.all(_isArray__default['default'](value) ? value.map(function (v) {
-      return v.refresh().promise();
-    }) : [value.refresh().promise()]).then(update);
-  };
-
-  return forwardProps ? addExtraProp(children(loaded, {
-    refresh: refresh,
-    update: update
-  }), forwardProps) : children(loaded, {
-    refresh: refresh,
-    update: update
-  });
-};
-
-var WithEffect = function WithEffect(_ref) {
-  var _ref$inputs = _ref.inputs,
-      inputs = _ref$inputs === void 0 ? [] : _ref$inputs,
-      children = _ref.children;
-  React.useEffect(children, inputs);
-  return null;
-};
-
-var useConsumerCatalog = function useConsumerCatalog(mountCallback, unmountCallback) {
-  var elements = useRefState([]);
-  var register = utils.callMany(function (element) {
-    return elements.set(function (elements) {
-      return elements.concat([element]);
-    });
-  }, mountCallback);
-  var unregister = utils.callMany(function (element) {
-    return elements.set(function (elements) {
-      return elements.filter(function (_) {
-        return _ !== element;
-      });
-    });
-  }, unmountCallback);
-  var manager = React.useMemo(function () {
-    return {
-      register: register,
-      unregister: unregister
-    };
-  }, []);
-  return [elements.get, manager];
-};
-var useCatalogManager = function useCatalogManager(_ref, ref) {
-  var register = _ref.register,
-      unregister = _ref.unregister;
-  React.useEffect(function () {
-    register(ref);
-    return function () {
-      return unregister(ref);
     };
-  }, [ref]);
-};
-
-var willUseLayers = function willUseLayers() {
-  var useEffect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : React__default['default'].useEffect;
-
-  var _willUseSharedCallbac = willUseSharedCallback(useEffect),
-      _willUseSharedCallbac2 = _slicedToArray__default['default'](_willUseSharedCallbac, 3),
-      useRegisterSharedCallback = _willUseSharedCallbac2[0],
-      callGroup = _willUseSharedCallbac2[1],
-      _getSize = _willUseSharedCallbac2[2];
-
-  var useLayer = function useLayer() {
-    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        onFirst = _ref.onFirst,
-        onEmpty = _ref.onEmpty,
-        onTop = _ref.onTop;
-
-    var listener = arguments.length > 1 ? arguments[1] : undefined;
-    var resetIndex = React.useCallback(function () {
-      setIndex(getIndex());
-
-      if (getIndex() + 1 === _getSize()) {
-        utils.callIfFunction(onTop, getIndex);
-      }
-    }, []);
-    var getIndex = useRegisterSharedCallback(resetIndex, listener);
-
-    var _useState = React.useState(getIndex()),
-        _useState2 = _slicedToArray__default['default'](_useState, 2),
-        index = _useState2[0],
-        setIndex = _useState2[1];
-
-    useEffect(function () {
-      if (getIndex() === 0) {
-        utils.callIfFunction(onFirst);
-      }
-
-      resetIndex();
-      return function () {
-        if (_getSize() === 0) {
-          utils.callIfFunction(onEmpty);
-        }
 
-        callGroup();
-      };
-    }, []);
-    return [index, {
-      isFirst: function isFirst() {
-        return getIndex() === 1;
-      },
-      isTop: function isTop() {
-        return getIndex() === _getSize() - 1;
-      },
-      isEmpty: function isEmpty() {
-        return _getSize() === 0;
-      },
-      getSize: function getSize() {
-        return _getSize();
-      }
-    }];
-  };
+    return {
+      get: get,
+      set: set
+    };
+  }, []);
+};
 
-  return [useLayer, _getSize];
+var useConsumerCatalog = function useConsumerCatalog(mountCallback, unmountCallback) {
+  var elements = core.useRefState([]);
+  var register = utils.callMany(function (element) {
+    return elements.set(function (elements) {
+      return elements.concat([element]);
+    });
+  }, mountCallback);
+  var unregister = utils.callMany(function (element) {
+    return elements.set(function (elements) {
+      return elements.filter(function (_) {
+        return _ !== element;
+      });
+    });
+  }, unmountCallback);
+  var manager = React.useMemo(function () {
+    return {
+      register: register,
+      unregister: unregister
+    };
+  }, []);
+  return [elements.get, manager];
+};
+var useCatalogManager = function useCatalogManager(_ref, ref) {
+  var register = _ref.register,
+      unregister = _ref.unregister;
+  React.useEffect(function () {
+    register(ref);
+    return function () {
+      return unregister(ref);
+    };
+  }, [ref]);
 };
 
-var _willUseLayers = willUseLayers(),
+var _willUseLayers = core.willUseLayers(),
     _willUseLayers2 = _slicedToArray__default['default'](_willUseLayers, 1),
     useTitleLayers = _willUseLayers2[0];
 
@@ -1318,11 +1471,43 @@ function usePreviousForEffect(value, initialValue) {
   return ref.current;
 }
 
+var useIsUnmounted = function useIsUnmounted() {
+  var unmounted = React.useRef();
+  React.useEffect(function () {
+    return function () {
+      return unmounted.current = true;
+    };
+  }, []);
+  return function () {
+    return unmounted.current;
+  };
+};
+
 var useEnsureRef = function useEnsureRef(forwardedRef) {
   var ref = React.useRef();
   return forwardedRef || ref;
 };
 
+var not_defined = {};
+var useConstant = function useConstant(value) {
+  var ref = React.useRef(not_defined);
+
+  if (ref.current === not_defined) {
+    ref.current = value;
+  }
+
+  return ref.current;
+};
+var useLazyConstant = function useLazyConstant(value) {
+  var ref = React.useRef(not_defined);
+
+  if (ref.current === not_defined) {
+    ref.current = utils.callIfFunction(value);
+  }
+
+  return ref.current;
+};
+
 var useForceUpdate = function useForceUpdate() {
   var _useState = React.useState(0),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -1337,7 +1522,7 @@ var useForceUpdate = function useForceUpdate() {
   }; // update the state to force render
 };
 var willUseForceUpdate = function willUseForceUpdate() {
-  var _willUseSharedState = willUseSharedState(),
+  var _willUseSharedState = core.willUseSharedState(),
       _willUseSharedState2 = _slicedToArray__default['default'](_willUseSharedState, 3),
       useValue = _willUseSharedState2[0],
       set = _willUseSharedState2[2];
@@ -1364,7 +1549,7 @@ var willUseForceUpdate = function willUseForceUpdate() {
 
 var useUpdateOnResize = function useUpdateOnResize() {
   var debounceInterval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 200;
-  var update = useForceUpdate();
+  var update = core.useForceUpdate();
   React.useEffect(function () {
     var trigger = _debounce__default['default'](debounceInterval, update);
 
@@ -1397,152 +1582,6 @@ var useUpdateEffect = function useUpdateEffect(effect, inputs) {
   }, inputs);
 };
 
-var updateAllInputsState = function updateAllInputsState(inputs, values) {
-  var deferedUndefined = [];
-  inputs.forEach(function (input) {
-    var _input = _slicedToArray__default['default'](input, 2),
-        setValue = _input[0],
-        selector = _input[1];
-
-    var newValue = selector(values);
-
-    if (newValue === undefined) {
-      deferedUndefined.push([setValue, newValue]);
-    } else {
-      setValue(newValue);
-    }
-  });
-  deferedUndefined.forEach(function (_ref) {
-    var _ref2 = _slicedToArray__default['default'](_ref, 2),
-        set = _ref2[0],
-        value = _ref2[1];
-
-    return set(value);
-  });
-};
-
-var pathSelector = function pathSelector(path) {
-  return utils._s.get(path || []);
-};
-
-var parsePathOrSelector = function parsePathOrSelector(pathOrSelector) {
-  var isNotSelector = typeof pathOrSelector !== 'function';
-
-  if (isNotSelector) {
-    return [utils.formatPath(pathOrSelector), pathSelector(pathOrSelector)];
-  } else {
-    return ['', pathOrSelector];
-  }
-};
-
-var willUseSpreadState = function willUseSpreadState(defaultContextValue) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var Context = React__default['default'].createContext(defaultContextValue);
-  var EMPTY_GLOBAL = {};
-  var prevInitState = EMPTY_GLOBAL;
-  var globalState = EMPTY_GLOBAL;
-
-  var getGlobalState = function getGlobalState(key) {
-    return _isString__default['default'](key) || _isArray__default['default'](key) ? _get__default['default'](key, globalState) : globalState;
-  };
-
-  var useProvideSpreadState = function useProvideSpreadState(initState, setCallback) {
-    var _useConsumerCatalog = useConsumerCatalog(function (input) {
-      return updateAllInputsState([input], state.get());
-    }),
-        _useConsumerCatalog2 = _slicedToArray__default['default'](_useConsumerCatalog, 2),
-        consumerList = _useConsumerCatalog2[0],
-        manager = _useConsumerCatalog2[1];
-
-    var state = useRefState(initState, setCallback);
-
-    if (options.initRefCheck) {
-      if (prevInitState !== initState) {
-        globalState = initState;
-      }
-
-      prevInitState = initState;
-    }
-
-    if (globalState === EMPTY_GLOBAL) {
-      globalState = initState;
-    }
-
-    React.useEffect(function () {
-      globalState = state.get();
-    }, []);
-
-    var setState = function setState(newState, fastPath, config) {
-      // console.log("Fastpath noop:"+fastPath)
-      state.set(newState, config);
-      globalState = state.get();
-      updateAllInputsState(consumerList(), state.get());
-    };
-
-    var contextValue = React.useMemo(function () {
-      return [state.get, setState, manager];
-    }, []);
-    return [Context.Provider, contextValue, [state.get, setState]];
-  };
-
-  var useSpreadState = function useSpreadState(pathOrSelector, inputs) {
-    var _useContext = React.useContext(Context),
-        _useContext2 = _slicedToArray__default['default'](_useContext, 3),
-        getSpreadState = _useContext2[0],
-        setSpreadState = _useContext2[1],
-        manager = _useContext2[2];
-
-    var _parsePathOrSelector = parsePathOrSelector(pathOrSelector),
-        _parsePathOrSelector2 = _slicedToArray__default['default'](_parsePathOrSelector, 2),
-        path = _parsePathOrSelector2[0],
-        selector = _parsePathOrSelector2[1];
-
-    var pathOrInput = [path] || inputs || [];
-
-    var _useState = React.useState(selector(getSpreadState())),
-        _useState2 = _slicedToArray__default['default'](_useState, 2),
-        value = _useState2[0],
-        setValue = _useState2[1];
-
-    var isUnmounted = useIsUnmounted();
-    var currentPath = useRefState(path);
-
-    if (path !== currentPath.get()) {
-      /* when path changes, the consumerCatalogCallback will update the new value
-      *  another solution would be to call setValue here directly
-      *  the return value will still be the old, but will be changed before render, just like getDerivedStateFromProps
-      *
-      *  if there's a need for the return value to be the same, the value or, if enters here new value,
-      *  can be returned in an temp variable
-      * */
-      currentPath.set(path);
-    }
-
-    var input = React.useMemo(function () {
-      return [function (v) {
-        /* noop for elements that may be unregistered while looping through consumerList */
-        if (path === currentPath.get() && !isUnmounted()) {
-          setValue(v);
-        }
-      }, selector];
-    }, pathOrInput);
-    useCatalogManager(manager, input);
-    var setState = React.useCallback(function (v) {
-      return setSpreadState((_isFunction__default['default'](v) ? pathOrSelector === undefined ? function () {
-        return v;
-      } : _update__default['default'] : _set__default['default'])(path, v), path);
-    }, pathOrInput);
-
-    var getValue = function getValue() {
-      return selector(getGlobalState());
-    };
-
-    return [value, setState, getValue];
-  };
-
-  return [useProvideSpreadState, useSpreadState, Context, getGlobalState];
-};
-
 var useRefMemo = function useRefMemo(value) {
   var ref = React.useRef(value);
 
@@ -1554,9 +1593,9 @@ var useRefMemo = function useRefMemo(value) {
 };
 
 var IS_ARRAY_ITEMS_EQUALS = function IS_ARRAY_ITEMS_EQUALS(a, b) {
-  return a.length === b.length && !a.find(function (itemA, i) {
+  return a.length === b.length && a.findIndex(function (itemA, i) {
     return !Object.is(itemA, b[i]);
-  });
+  }) < 0;
 };
 
 var IS_DEPS_EQUALS = function IS_DEPS_EQUALS() {
@@ -1573,7 +1612,7 @@ var EMPTY_DEPS = [];
 var useUpdateSignal = function useUpdateSignal(initialValue) {
   var value = React.useRef(initialValue);
   value.current = initialValue;
-  return useLazyConstant(function () {
+  return core.useLazyConstant(function () {
     var registered = [];
 
     var register = function register() {
@@ -1581,7 +1620,7 @@ var useUpdateSignal = function useUpdateSignal(initialValue) {
       var isEqual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SHALLOW_IS_EQUAL;
       var selectorRef = React.useRef();
       selectorRef.current = selector;
-      var update = useForceUpdate();
+      var update = core.useForceUpdate();
       var lastValueRef = React.useRef(utils._s.select(selectorRef.current, value.current));
       React.useEffect(function () {
         var item = [update, selectorRef, isEqual, lastValueRef];
@@ -1658,7 +1697,7 @@ var createStatefulContext = function createStatefulContext(v) {
         utils = _ref3.utils,
         children = _ref3.children;
     var register = useSelectorSignal(value);
-    var v = useLazyConstant(function () {
+    var v = core.useLazyConstant(function () {
       return [register, setValue, utils];
     });
     return React__default['default'].createElement(Ctx.Provider, {
@@ -1674,33 +1713,144 @@ var createStatefulContext = function createStatefulContext(v) {
     return useRegister(selector, deps, isEqual);
   };
 
-  var useState = function useState(path, deps) {
+  var useSetValue = function useSetValue(path, deps) {
     var _useContext3 = React.useContext(Ctx),
-        _useContext4 = _slicedToArray__default['default'](_useContext3, 3),
-        useRegister = _useContext4[0],
-        set = _useContext4[1],
-        utils$1 = _useContext4[2];
+        _useContext4 = _slicedToArray__default['default'](_useContext3, 2),
+        reg = _useContext4[0],
+        set = _useContext4[1];
+
+    return core.useConstant(function (update) {
+      return set(function (state) {
+        return path ? _update__default['default'](path, function (v) {
+          return utils.callIfFunction(update, v);
+        }, state) : utils.callIfFunction(update, state);
+      });
+    });
+  };
+
+  var useUtils = function useUtils(path, deps) {
+    var _useContext5 = React.useContext(Ctx),
+        _useContext6 = _slicedToArray__default['default'](_useContext5, 3),
+        reg = _useContext6[0],
+        set = _useContext6[1],
+        utils = _useContext6[2];
+
+    return utils;
+  };
+
+  return [Provider, [useSelectValue, useSetValue, useUtils]];
+};
+var createSelfStatefulContext = function createSelfStatefulContext(v) {
+  var Ctx = React__default['default'].createContext(v);
 
-    var setValue = useConstant(function (update) {
+  var Provider = function Provider(_ref4) {
+    var _ref4$init = _ref4.init,
+        init = _ref4$init === void 0 ? {} : _ref4$init,
+        utils = _ref4.utils,
+        children = _ref4.children;
+
+    var _useState3 = React.useState(init),
+        _useState4 = _slicedToArray__default['default'](_useState3, 2),
+        value = _useState4[0],
+        setValue = _useState4[1];
+
+    var register = useSelectorSignal(value);
+    var v = core.useLazyConstant(function () {
+      return [register, setValue, utils];
+    });
+    return React__default['default'].createElement(Ctx.Provider, {
+      value: v
+    }, children);
+  };
+
+  var useSelectValue = function useSelectValue(selector, deps, isEqual) {
+    var _useContext7 = React.useContext(Ctx),
+        _useContext8 = _slicedToArray__default['default'](_useContext7, 1),
+        useRegister = _useContext8[0];
+
+    return useRegister(selector, deps, isEqual);
+  };
+
+  var useSetState = function useSetState(path, deps) {
+    var _useContext9 = React.useContext(Ctx),
+        _useContext10 = _slicedToArray__default['default'](_useContext9, 3),
+        useRegister = _useContext10[0],
+        set = _useContext10[1],
+        utils$1 = _useContext10[2];
+
+    var setValue = core.useConstant(function (update) {
       return set(function (state) {
         return path ? _update__default['default'](path, function (v) {
           return utils.callIfFunction(update, v);
         }, state) : utils.callIfFunction(update, state);
       });
     });
-    return [useRegister(path, deps), setValue, utils$1];
+    return setValue;
   };
 
-  return [Provider, useState, useSelectValue];
+  var useUtils = function useUtils(path, deps) {
+    var _useContext11 = React.useContext(Ctx),
+        _useContext12 = _slicedToArray__default['default'](_useContext11, 3),
+        useRegister = _useContext12[0],
+        set = _useContext12[1],
+        utils = _useContext12[2];
+
+    return utils;
+  };
+
+  return [Provider, [useSelectValue, useSetState, useUtils]];
 };
 var createSelectableContext = function createSelectableContext(v) {
   var _createStatefulContex = createStatefulContext(v),
-      _createStatefulContex2 = _slicedToArray__default['default'](_createStatefulContex, 3),
+      _createStatefulContex2 = _slicedToArray__default['default'](_createStatefulContex, 2),
       Provider = _createStatefulContex2[0],
-      useSelectValue = _createStatefulContex2[2];
+      _createStatefulContex3 = _slicedToArray__default['default'](_createStatefulContex2[1], 1),
+      useSelectValue = _createStatefulContex3[0];
 
   return [Provider, useSelectValue];
 };
+var createTriggerUpdateContext = function createTriggerUpdateContext(v) {
+  var _createStatefulContex4 = createStatefulContext(v),
+      _createStatefulContex5 = _slicedToArray__default['default'](_createStatefulContex4, 2),
+      Provider = _createStatefulContex5[0],
+      _createStatefulContex6 = _slicedToArray__default['default'](_createStatefulContex5[1], 1),
+      useSelectValue = _createStatefulContex6[0];
+
+  var TriggerProvider = React__default['default'].forwardRef(function (_ref5, ref) {
+    var children = _ref5.children;
+
+    var _useState5 = React.useState(0),
+        _useState6 = _slicedToArray__default['default'](_useState5, 2),
+        v = _useState6[0],
+        setV = _useState6[1];
+
+    var trigger = React__default['default'].useMemo(function () {
+      return function () {
+        return setV(function (v) {
+          return v + 1;
+        });
+      };
+    }, [v]);
+    React__default['default'].useImperativeHandle(ref, function () {
+      return {
+        trigger: trigger
+      };
+    }, []);
+    return React__default['default'].createElement(Provider, {
+      value: trigger
+    }, children);
+  });
+  return [TriggerProvider, useSelectValue];
+};
+
+var WithConstant = function WithConstant(_ref) {
+  var _ref$inputs = _ref.inputs,
+      inputs = _ref$inputs === void 0 ? [] : _ref$inputs,
+      value = _ref.value,
+      children = _ref.children;
+  var constant = core.useLazyConstant(value, inputs);
+  return children(constant);
+};
 
 exports.Fill = Fill;
 exports.GroupEventFactory = GroupEventFactory;
@@ -1712,14 +1862,20 @@ exports.StartlibsConsumer = StartlibsConsumer;
 exports.StartlibsContext = StartlibsContext;
 exports.StartlibsMetacontext = StartlibsMetacontext;
 exports.StartlibsProvider = StartlibsProvider;
+exports.WithConstant = WithConstant;
 exports.WithEffect = WithEffect;
+exports.WithLazyPlaceholder = WithLazyPlaceholder;
 exports.WithLazyResource = WithLazyResource;
 exports.WithRef = WithRef;
 exports.clearPopups = clearPopups;
 exports.consumes = consumes;
 exports.createSelectableContext = createSelectableContext;
+exports.createSelfStatefulContext = createSelfStatefulContext;
 exports.createStatefulContext = createStatefulContext;
+exports.createTriggerUpdateContext = createTriggerUpdateContext;
 exports.useAsyncEffect = useAsyncEffect;
+exports.useCallState = useCallState;
+exports.useCallbackStable = useCallbackStable;
 exports.useCatalogManager = useCatalogManager;
 exports.useConstant = useConstant;
 exports.useConsumerCatalog = useConsumerCatalog;