diff --git a/.gitignore b/.gitignore
index d30f40e..abc487b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,8 @@
/coverage
# production
-/build
+/build/lib/*
+!/build/lib/.gitkeep
# misc
.DS_Store
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..2e6b1e7
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,21 @@
+# See https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build/lib/.gitkeep
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
index d948604..dbf8007 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,10 @@
-REACT PWA PAGE
-==============
+REACT PWA SCREEN MANAGER
+========================
-UI component to handle PWA pages display.
+Almost each time I make a progressive web app, it has to look'n'feel as a "native app".
-Page should change with an animation (either comming from left or right, pushing or coming over the previous one).
+One of the main feature that make your (web)app feels like "native" is the screen change transition : each screen change should completely reload the page and re-render everything ? or the old screen should smoothly go away from the viewport in a nice translation animation while the next one is coming from the other side ?
-Page change should be associated with a change in the router system (shipped in router is "react router").
\ No newline at end of file
+This repository brings a set of React component in order to help you manage those screens transitions
+
+Note : And because, we are on the web, each page change should be associated with a change in the page url, so be aware that this component set is shipped with "react router" (built-in).
\ No newline at end of file
diff --git a/build/examples/index.html b/build/examples/index.html
new file mode 100644
index 0000000..f68c4fe
--- /dev/null
+++ b/build/examples/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ React PWA Screen Manager
+
+
+
+
+
+
+
diff --git a/build/examples/index.js b/build/examples/index.js
new file mode 100644
index 0000000..df9554d
--- /dev/null
+++ b/build/examples/index.js
@@ -0,0 +1,24672 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];
+ }return target;
+}
+
+exports.default = function (_ref) {
+ var children = _ref.children,
+ props = _objectWithoutProperties(_ref, ["children"]);
+
+ return _react2.default.createElement("div", { style: props.style, className: "screen forbidden" }, children);
+};
+
+},{"react":73}],2:[function(require,module,exports){
+var css = "nav {\n position: fixed;\n width: 100%;\n}\nnav.bottom {\n bottom: 0;\n}\nnav.top {\n top: 0;\n}\n"; (require("browserify-css").createStyle(css, { "href": "build\\lib\\NavigationBar.css" }, { "insertAt": "bottom" })); module.exports = css;
+},{"browserify-css":7}],3:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactRouterDom = require('react-router-dom');
+
+require('./NavigationBar.css');
+
+function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+}
+
+function _objectWithoutProperties(obj, keys) {
+ var target = {};for (var i in obj) {
+ if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];
+ }return target;
+}
+
+exports.default = function (_ref) {
+ var pages = _ref.pages,
+ position = _ref.position,
+ props = _objectWithoutProperties(_ref, ['pages', 'position']);
+
+ return _react2.default.createElement('nav', { className: 'navbar ' + position }, props.render ? props.render(pages) : _react2.default.createElement('ul', null, Array.isArray(pages) && pages.map(function (page, k) {
+ return _react2.default.createElement('li', { key: k }, _react2.default.createElement(_reactRouterDom.Link, { to: page.path }, props.link ? props.link(page) : page.name));
+ })));
+};
+
+},{"./NavigationBar.css":2,"react":73,"react-router-dom":59}],4:[function(require,module,exports){
+"use strict";
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.Screen = undefined;
+
+var _createClass = function () {
+ function defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }return function (Constructor, protoProps, staticProps) {
+ if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
+ };
+}();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+}
+
+function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
+ }
+}
+
+function _possibleConstructorReturn(self, call) {
+ if (!self) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }return call && ((typeof call === "undefined" ? "undefined" : _typeof(call)) === "object" || typeof call === "function") ? call : self;
+}
+
+function _inherits(subClass, superClass) {
+ if (typeof superClass !== "function" && superClass !== null) {
+ throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : _typeof(superClass)));
+ }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+}
+
+var Screen = exports.Screen = function (_Component) {
+ _inherits(Screen, _Component);
+
+ function Screen() {
+ _classCallCheck(this, Screen);
+
+ return _possibleConstructorReturn(this, (Screen.__proto__ || Object.getPrototypeOf(Screen)).apply(this, arguments));
+ }
+
+ _createClass(Screen, [{
+ key: "render",
+ value: function render() {
+ var props = this.props;
+ return _react2.default.createElement("div", { style: props.style, className: "screen" }, props.children);
+ }
+ }]);
+
+ return Screen;
+}(_react.Component);
+
+exports.default = Screen;
+
+},{"react":73}],5:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+}
+
+function _objectWithoutProperties(obj, keys) {
+ var target = {};for (var i in obj) {
+ if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];
+ }return target;
+}
+
+exports.default = function (_ref) {
+ var children = _ref.children,
+ props = _objectWithoutProperties(_ref, ["children"]);
+
+ return _react2.default.createElement("div", { style: props.style, className: "screen splash" }, children);
+};
+
+},{"react":73}],6:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _lib = require('../lib');
+
+Object.defineProperty(exports, 'ScreenManager', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_lib).default;
+ }
+});
+
+var _Screen = require('./Screen');
+
+Object.defineProperty(exports, 'Screen', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_Screen).default;
+ }
+});
+
+var _NavigationBar = require('./NavigationBar');
+
+Object.defineProperty(exports, 'NavigationBar', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_NavigationBar).default;
+ }
+});
+
+var _ForbiddenScreen = require('./ForbiddenScreen');
+
+Object.defineProperty(exports, 'ForbiddenScreen', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_ForbiddenScreen).default;
+ }
+});
+
+var _SplashScreen = require('./SplashScreen');
+
+Object.defineProperty(exports, 'SplashScreen', {
+ enumerable: true,
+ get: function get() {
+ return _interopRequireDefault(_SplashScreen).default;
+ }
+});
+
+function _interopRequireDefault(obj) {
+ return obj && obj.__esModule ? obj : { default: obj };
+}
+
+},{"../lib":6,"./ForbiddenScreen":1,"./NavigationBar":3,"./Screen":4,"./SplashScreen":5}],7:[function(require,module,exports){
+'use strict';
+// For more information about browser field, check out the browser field at https://github.com/substack/browserify-handbook#browser-field.
+
+var styleElementsInsertedAtTop = [];
+
+var insertStyleElement = function(styleElement, options) {
+ var head = document.head || document.getElementsByTagName('head')[0];
+ var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
+
+ options = options || {};
+ options.insertAt = options.insertAt || 'bottom';
+
+ if (options.insertAt === 'top') {
+ if (!lastStyleElementInsertedAtTop) {
+ head.insertBefore(styleElement, head.firstChild);
+ } else if (lastStyleElementInsertedAtTop.nextSibling) {
+ head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
+ } else {
+ head.appendChild(styleElement);
+ }
+ styleElementsInsertedAtTop.push(styleElement);
+ } else if (options.insertAt === 'bottom') {
+ head.appendChild(styleElement);
+ } else {
+ throw new Error('Invalid value for parameter \'insertAt\'. Must be \'top\' or \'bottom\'.');
+ }
+};
+
+module.exports = {
+ // Create a tag with optional data attributes
+ createLink: function(href, attributes) {
+ var head = document.head || document.getElementsByTagName('head')[0];
+ var link = document.createElement('link');
+
+ link.href = href;
+ link.rel = 'stylesheet';
+
+ for (var key in attributes) {
+ if ( ! attributes.hasOwnProperty(key)) {
+ continue;
+ }
+ var value = attributes[key];
+ link.setAttribute('data-' + key, value);
+ }
+
+ head.appendChild(link);
+ },
+ // Create a