react-sync-board 0.2.0 → 0.3.4

package/dist/esm/index.js

@@ -403,77 +403,64 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-var lib = {};
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
 
-var server = {};
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
 
-// This alphabet uses `A-Za-z0-9_-` symbols. The genetic algorithm helped
-// optimize the gzip compression for this alphabet.
-var urlAlphabet = 'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW';
-
-// This file replaces `index.js` in bundlers like webpack or Rollup,
-
-var random = function random(bytes) {
-  return crypto.getRandomValues(new Uint8Array(bytes));
-};
+      var F = function () {};
 
-var customRandom = function customRandom(alphabet, size, getRandom) {
-  // First, a bitmask is necessary to generate the ID. The bitmask makes bytes
-  // values closer to the alphabet size. The bitmask calculates the closest
-  // `2^31 - 1` number, which exceeds the alphabet size.
-  // For example, the bitmask for the alphabet size 30 is 31 (00011111).
-  // `Math.clz32` is not used, because it is not available in browsers.
-  var mask = (2 << Math.log(alphabet.length - 1) / Math.LN2) - 1; // Though, the bitmask solution is not perfect since the bytes exceeding
-  // the alphabet size are refused. Therefore, to reliably generate the ID,
-  // the random bytes redundancy has to be satisfied.
-  // Note: every hardware random generator call is performance expensive,
-  // because the system call for entropy collection takes a lot of time.
-  // So, to avoid additional system calls, extra bytes are requested in advance.
-  // Next, a step determines how many random bytes to generate.
-  // The number of random bytes gets decided upon the ID size, mask,
-  // alphabet size, and magic number 1.6 (using 1.6 peaks at performance
-  // according to benchmarks).
-  // `-~f => Math.ceil(f)` if f is a float
-  // `-~i => i + 1` if i is an integer
-
-  var step = -~(1.6 * mask * size / alphabet.length);
-  return function () {
-    var id = '';
-
-    while (true) {
-      var bytes = getRandom(step); // A compact alternative for `for (var i = 0; i < step; i++)`.
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
 
-      var j = step;
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
 
-      while (j--) {
-        // Adding `|| ''` refuses a random byte that exceeds the alphabet size.
-        id += alphabet[bytes[j] & mask] || '';
-        if (id.length === size) return id;
+  var normalCompletion = true,
+      didErr = false,
+      err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
       }
     }
   };
-};
+}
 
-var customAlphabet = function customAlphabet(alphabet, size) {
-  return customRandom(alphabet, size, random);
-};
+// This file replaces `index.js` in bundlers like webpack or Rollup,
 
 var nanoid = function nanoid() {
   var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 21;
@@ -504,199 +491,6 @@ var nanoid = function nanoid() {
   return id;
 };
 
-var index_prod = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  nanoid: nanoid,
-  customAlphabet: customAlphabet,
-  customRandom: customRandom,
-  urlAlphabet: urlAlphabet,
-  random: random
-});
-
-var require$$0 = /*@__PURE__*/getAugmentedNamespace(index_prod);
-
-Object.defineProperty(server, "__esModule", {
-  value: true
-});
-server["default"] = server.handleWire = void 0;
-var _nanoid$1 = require$$0;
-var rooms = {};
-
-var handleWire = function handleWire(socket) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$log = _ref.log,
-      log = _ref$log === void 0 ? console.log : _ref$log,
-      _ref$logPrefix = _ref.logPrefix,
-      logPrefix = _ref$logPrefix === void 0 ? '[Wire.io] ' : _ref$logPrefix;
-
-  socket.on('joinSuperSocket', function (_ref2) {
-    var roomName = _ref2.room,
-        givenUserId = _ref2.userId;
-    socket.join(roomName);
-
-    if (rooms[roomName] === undefined) {
-      rooms[roomName] = {
-        users: [],
-        rpc: {}
-      };
-    }
-
-    var userId = givenUserId || (0, _nanoid$1.nanoid)();
-    var isMaster = rooms[roomName].users.length === 0;
-
-    var promoteMaster = function promoteMaster() {
-      isMaster = true;
-      socket.emit("".concat(roomName, ".isMaster"));
-    };
-
-    rooms[roomName].users.push({
-      userId: userId,
-      promoteMaster: promoteMaster,
-      isMaster: isMaster
-    }); // Publish event to others and self if `self`
-
-    socket.on("".concat(roomName, ".publish"), function (_ref3) {
-      var name = _ref3.name,
-          params = _ref3.params,
-          self = _ref3.self;
-
-      if (self) {
-        socket.emit("".concat(roomName, ".").concat(name), params);
-      }
-
-      socket.broadcast.to(roomName).emit("".concat(roomName, ".").concat(name), params);
-    }); // Register new remote function
-
-    socket.on("".concat(roomName, ".register"), function (_ref4) {
-      var name = _ref4.name;
-
-      // Define function for the room
-      rooms[roomName].rpc[name] = function (_ref5) {
-        var callId = _ref5.callId,
-            params = _ref5.params;
-        return new Promise(function (resolve, reject) {
-          if (!socket.connected) {
-            // Handle case of disconnected socket
-            delete rooms[roomName].rpc[name];
-            resolve({
-              err: "Function ".concat(name, " is not registered")
-            });
-          } else {
-            // Schedule result
-            socket.once("".concat(roomName, ".result.").concat(callId), function (result) {
-              resolve(result);
-            }); // Call function from client
-
-            socket.emit("".concat(roomName, ".call.").concat(name), {
-              callId: callId,
-              params: params
-            });
-          }
-        });
-      };
-
-      socket.emit("".concat(roomName, ".register.").concat(name));
-    });
-    socket.on("".concat(roomName, ".unregister"), function (_ref6) {
-      var name = _ref6.name;
-      delete rooms[roomName].rpc[name];
-      socket.emit("".concat(roomName, ".unregister.").concat(name));
-    }); // Call function from another client
-
-    socket.on("".concat(roomName, ".call"), /*#__PURE__*/function () {
-      var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref7) {
-        var name, callId, params, result;
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                name = _ref7.name, callId = _ref7.callId, params = _ref7.params;
-
-                if (!(rooms[roomName].rpc[name] === undefined)) {
-                  _context.next = 5;
-                  break;
-                }
-
-                socket.emit("".concat(roomName, ".result.").concat(callId), {
-                  err: "Function ".concat(name, " is not registered")
-                });
-                _context.next = 9;
-                break;
-
-              case 5:
-                _context.next = 7;
-                return rooms[roomName].rpc[name]({
-                  callId: callId,
-                  params: params
-                });
-
-              case 7:
-                result = _context.sent;
-                socket.emit("".concat(roomName, ".result.").concat(callId), result);
-
-              case 9:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref8.apply(this, arguments);
-      };
-    }());
-
-    var onLeave = function onLeave() {
-      rooms[roomName].users = rooms[roomName].users.filter(function (_ref9) {
-        var uid = _ref9.userId;
-        return uid !== userId;
-      });
-      log("".concat(logPrefix, "User ").concat(userId, " quit room ").concat(roomName, ".").concat(isMaster ? ' Was room master. ' : '', " ").concat(rooms[roomName].users.length, " user(s) left.")); // Promote the first user if master is gone
-
-      if (rooms[roomName].users.length > 0 && !rooms[roomName].users[0].isMaster) {
-        var user = rooms[roomName].users[0];
-        user.isMaster = true;
-        user.promoteMaster();
-        log("".concat(logPrefix, "Promote ").concat(user.userId, " master of room ").concat(roomName));
-      }
-
-      socket.broadcast.to(roomName).emit("".concat(roomName, ".userLeave"), userId);
-    };
-
-    socket.on('disconnect', onLeave);
-    socket.once("".concat(roomName, ".leave"), function () {
-      socket.removeAllListeners("".concat(roomName, ".register"));
-      socket.removeAllListeners("".concat(roomName, ".unregister"));
-      socket.removeAllListeners("".concat(roomName, ".call"));
-      socket.removeAllListeners("".concat(roomName, ".publish"));
-      socket.off('disconnect', onLeave);
-      onLeave();
-      socket.leave(roomName);
-    });
-
-    if (isMaster) {
-      promoteMaster();
-    }
-
-    socket.emit("".concat(roomName, ".roomJoined"), userId);
-    socket.broadcast.to(roomName).emit("".concat(roomName, ".userEnter"), userId);
-    log("".concat(logPrefix, "User ").concat(userId, " joined room ").concat(roomName, ".").concat(isMaster ? ' Is room master.' : '', " Room has ").concat(rooms[roomName].users.length, " user(s)"));
-  });
-};
-
-server.handleWire = handleWire;
-var _default$1 = handleWire;
-server["default"] = _default$1;
-
-var client = {};
-
-Object.defineProperty(client, "__esModule", {
-  value: true
-});
-client["default"] = client.joinWire = void 0;
-var _nanoid = require$$0;
-
 var Wire = /*#__PURE__*/function () {
   function Wire(socket, room) {
     var _this = this;
@@ -867,7 +661,7 @@ var Wire = /*#__PURE__*/function () {
       var _this4 = this;
 
       return new Promise(function (resolve, reject) {
-        var callId = (0, _nanoid.nanoid)();
+        var callId = nanoid();
 
         _this4._socket.once("".concat(_this4.room, ".result.").concat(callId), function (result) {
           if (result.hasOwnProperty('ok')) {
@@ -951,39 +745,6 @@ var joinWire = function joinWire(_ref3) {
   });
 };
 
-client.joinWire = joinWire;
-var _default = joinWire;
-client["default"] = _default;
-
-(function (exports) {
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  Object.defineProperty(exports, "handleWire", {
-    enumerable: true,
-    get: function get() {
-      return _server["default"];
-    }
-  });
-  Object.defineProperty(exports, "joinWire", {
-    enumerable: true,
-    get: function get() {
-      return _client["default"];
-    }
-  });
-
-  var _server = _interopRequireDefault(server);
-
-  var _client = _interopRequireDefault(client);
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      "default": obj
-    };
-  }
-})(lib);
-
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -2312,6 +2073,8 @@ var createCache = function createCache(options) {
   return cache;
 };
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
 var reactIs$1 = {exports: {}};
 
 var reactIs_production_min = {};
@@ -4085,7 +3848,7 @@ var WireProvider = function WireProvider(_ref) {
     }
 
     console.log("Try to connect to wire ".concat(room, " on channel ").concat(channel));
-    lib.joinWire({
+    joinWire({
       socket: socket,
       room: room,
       onMaster: function onMaster() {
@@ -4818,9 +4581,115 @@ var useItemActions = function useItemActions() {
   };
 };
 
+var es6 = function equal(a, b) {
+  if (a === b) return true;
+
+  if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
+    if (a.constructor !== b.constructor) return false;
+    var length, i, keys;
+
+    if (Array.isArray(a)) {
+      length = a.length;
+      if (length != b.length) return false;
+
+      for (i = length; i-- !== 0;) {
+        if (!equal(a[i], b[i])) return false;
+      }
+
+      return true;
+    }
+
+    if (a instanceof Map && b instanceof Map) {
+      if (a.size !== b.size) return false;
+
+      var _iterator = _createForOfIteratorHelper(a.entries()),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          i = _step.value;
+          if (!b.has(i[0])) return false;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      var _iterator2 = _createForOfIteratorHelper(a.entries()),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          i = _step2.value;
+          if (!equal(i[1], b.get(i[0]))) return false;
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+
+      return true;
+    }
+
+    if (a instanceof Set && b instanceof Set) {
+      if (a.size !== b.size) return false;
+
+      var _iterator3 = _createForOfIteratorHelper(a.entries()),
+          _step3;
+
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          i = _step3.value;
+          if (!b.has(i[0])) return false;
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+
+      return true;
+    }
+
+    if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+      length = a.length;
+      if (length != b.length) return false;
+
+      for (i = length; i-- !== 0;) {
+        if (a[i] !== b[i]) return false;
+      }
+
+      return true;
+    }
+
+    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) return false;
+
+    for (i = length; i-- !== 0;) {
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+    }
+
+    for (i = length; i-- !== 0;) {
+      var key = keys[i];
+      if (!equal(a[key], b[key])) return false;
+    }
+
+    return true;
+  } // true if both NaN, false otherwise
+
+
+  return a !== a && b !== b;
+};
+
 var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' x='0px' y='0px' viewBox='0 0 75.601318 94.9' xml:space='preserve' id='svg26' sodipodi:docname='lock.svg' width='75.601318' height='94.900002' inkscape:version='0.92.5 (2060ec1f9f%2c 2020-04-08)'%3e%3cmetadata id='metadata32'%3e%3crdf:RDF%3e%3ccc:Work rdf:about=''%3e%3cdc:format%3eimage/svg%2bxml%3c/dc:format%3e%3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3e%3cdc:title%3e%3c/dc:title%3e%3c/cc:Work%3e%3c/rdf:RDF%3e%3c/metadata%3e%3cdefs id='defs30' /%3e%3csodipodi:namedview pagecolor='black' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1848' inkscape:window-height='1016' id='namedview28' showgrid='false' fit-margin-top='0' fit-margin-left='0' fit-margin-right='0' fit-margin-bottom='0' inkscape:zoom='5.3400704' inkscape:cx='3.2640013' inkscape:cy='45.072152' inkscape:window-x='1512' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='g16' /%3e%3cg id='g16' transform='translate(-12.2%2c-2.5)'%3e%3cpath d='M 75.4%2c36.8 H 34.1 V 24.6 c 0%2c-8.8 7.1%2c-15.9 15.9%2c-15.9 8.8%2c0 15.9%2c7.1 15.9%2c15.9 0%2c1.7 1.4%2c3.1 3.1%2c3.1 1.7%2c0 3.1%2c-1.4 3.1%2c-3.1 C 72.1%2c12.4 62.2%2c2.5 50%2c2.5 37.8%2c2.5 27.9%2c12.4 27.9%2c24.6 v 12.2 h -3.3 c -6.9%2c0 -12.4%2c5.6 -12.4%2c12.4 V 85 c 0%2c6.9 5.6%2c12.4 12.4%2c12.4 h 50.8 c 6.9%2c0 12.4%2c-5.6 12.4%2c-12.4 V 49.2 C 87.9%2c42.3 82.3%2c36.8 75.4%2c36.8 Z m 6.2%2c48.3 c 0%2c3.4 -2.8%2c6.2 -6.2%2c6.2 H 24.6 c -3.4%2c0 -6.2%2c-2.8 -6.2%2c-6.2 V 49.2 c 0%2c-3.4 2.8%2c-6.2 6.2%2c-6.2 h 50.8 c 3.4%2c0 6.2%2c2.8 6.2%2c6.2 z' id='path12' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3cpath d='m 59.8%2c57.6 -12.5%2c12.5 -7%2c-7 c -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 -1.2%2c1.2 -1.2%2c3.2 0%2c4.4 l 9.2%2c9.2 c 0.6%2c0.6 1.4%2c0.9 2.2%2c0.9 0.8%2c0 1.6%2c-0.3 2.2%2c-0.9 L 64.2%2c62 c 1.2%2c-1.2 1.2%2c-3.2 0%2c-4.4 -1.2%2c-1.2 -3.2%2c-1.2 -4.4%2c0 z' id='path14' inkscape:connector-curvature='0' style='fill:white%3bfill-opacity:1' /%3e%3c/g%3e%3c/svg%3e";
 
-var _excluded$1 = ["type", "rotation", "id", "locked", "layer"],
+var _excluded$2 = ["type", "rotation", "id", "locked", "layer"],
     _excluded2 = ["x", "y", "layer", "moving"],
     _excluded3 = ["state"];
 
@@ -4830,23 +4699,101 @@ var ItemWrapper = newStyled.div(_templateObject$2 || (_templateObject$2 = _tagge
   return rotation;
 }, img);
 
-var Item = function Item(_ref2) {
-  var setState = _ref2.setState,
-      _ref2$state = _ref2.state;
-  _ref2$state = _ref2$state === void 0 ? {} : _ref2$state;
-
-  var type = _ref2$state.type,
-      _ref2$state$rotation = _ref2$state.rotation,
-      rotation = _ref2$state$rotation === void 0 ? 0 : _ref2$state$rotation,
-      id = _ref2$state.id,
-      locked = _ref2$state.locked,
-      layer = _ref2$state.layer,
-      rest = _objectWithoutProperties(_ref2$state, _excluded$1),
-      _ref2$animate = _ref2.animate,
-      animate = _ref2$animate === void 0 ? "hvr-pop" : _ref2$animate,
-      isSelected = _ref2.isSelected,
-      itemMap = _ref2.itemMap,
-      unlocked = _ref2.unlocked;
+var DefaultErrorComponent = function DefaultErrorComponent(_ref2) {
+  var onReload = _ref2.onReload;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      textAlign: "center",
+      color: "red"
+    },
+    className: "syncboard-error-item"
+  }, "Sorry, this item seems broken.", /*#__PURE__*/React.createElement("button", {
+    onClick: onReload
+  }, "Reload it"));
+};
+/* Error boundary for broken item */
+
+
+var ItemErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ItemErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ItemErrorBoundary);
+
+  function ItemErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, ItemErrorBoundary);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false,
+      itemId: props.itemId
+    };
+    _this.onReload = _this.onReload.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(ItemErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      // eslint-disable-next-line no-console
+      console.log("Error for item ".concat(this.state.itemId), error, this.props.state);
+    }
+  }, {
+    key: "onReload",
+    value: function onReload() {
+      this.setState({
+        hasError: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var ErrorComponent = this.props.ErrorComponent;
+
+      if (this.state.hasError) {
+        return /*#__PURE__*/React.createElement(ErrorComponent, {
+          onReload: this.onReload
+        });
+      }
+
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+  }]);
+
+  return ItemErrorBoundary;
+}(React.Component);
+
+var Item = function Item(_ref3) {
+  var _itemMap$error;
+
+  var setState = _ref3.setState,
+      _ref3$state = _ref3.state;
+  _ref3$state = _ref3$state === void 0 ? {} : _ref3$state;
+
+  var type = _ref3$state.type,
+      _ref3$state$rotation = _ref3$state.rotation,
+      rotation = _ref3$state$rotation === void 0 ? 0 : _ref3$state$rotation,
+      id = _ref3$state.id,
+      locked = _ref3$state.locked,
+      layer = _ref3$state.layer,
+      rest = _objectWithoutProperties(_ref3$state, _excluded$2),
+      _ref3$animate = _ref3.animate,
+      animate = _ref3$animate === void 0 ? "hvr-pop" : _ref3$animate,
+      isSelected = _ref3.isSelected,
+      itemMap = _ref3.itemMap,
+      unlocked = _ref3.unlocked;
 
   var isMountedRef = React.useRef(false);
   var animateRef = React.useRef(null);
@@ -4896,10 +4843,15 @@ var Item = function Item(_ref2) {
     onKeyUp: function onKeyUp(e) {
       return e.stopPropagation();
     }
+  }, /*#__PURE__*/React.createElement(ItemErrorBoundary, {
+    itemId: id,
+    state: rest,
+    setState: updateState,
+    ErrorComponent: (itemMap === null || itemMap === void 0 ? void 0 : (_itemMap$error = itemMap.error) === null || _itemMap$error === void 0 ? void 0 : _itemMap$error.component) || DefaultErrorComponent
   }, /*#__PURE__*/React.createElement(Component, _extends$1({}, rest, {
     id: id,
     setState: updateState
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "corner top-left"
   }), /*#__PURE__*/React.createElement("div", {
     className: "corner top-right"
@@ -4910,30 +4862,30 @@ var Item = function Item(_ref2) {
   })));
 };
 
-var MemoizedItem = /*#__PURE__*/memo(Item, function (_ref3, _ref4) {
-  var prevState = _ref3.state,
-      prevSetState = _ref3.setState,
-      prevIsSelected = _ref3.isSelected,
-      prevUnlocked = _ref3.unlocked;
-  var nextState = _ref4.state,
-      nextSetState = _ref4.setState,
-      nextIsSelected = _ref4.isSelected,
-      nextUnlocked = _ref4.unlocked;
+var MemoizedItem = /*#__PURE__*/memo(Item, function (_ref4, _ref5) {
+  var prevState = _ref4.state,
+      prevSetState = _ref4.setState,
+      prevIsSelected = _ref4.isSelected,
+      prevUnlocked = _ref4.unlocked;
+  var nextState = _ref5.state,
+      nextSetState = _ref5.setState,
+      nextIsSelected = _ref5.isSelected,
+      nextUnlocked = _ref5.unlocked;
   return prevIsSelected === nextIsSelected && prevUnlocked === nextUnlocked && prevSetState === nextSetState && JSON.stringify(prevState) === JSON.stringify(nextState);
 }); // Exclude positionning from memoization
 
-var PositionedItem = function PositionedItem(_ref5) {
-  var _ref5$state = _ref5.state;
-  _ref5$state = _ref5$state === void 0 ? {} : _ref5$state;
+var PositionedItem = function PositionedItem(_ref6) {
+  var _ref6$state = _ref6.state;
+  _ref6$state = _ref6$state === void 0 ? {} : _ref6$state;
 
-  var _ref5$state$x = _ref5$state.x,
-      x = _ref5$state$x === void 0 ? 0 : _ref5$state$x,
-      _ref5$state$y = _ref5$state.y,
-      y = _ref5$state$y === void 0 ? 0 : _ref5$state$y,
-      layer = _ref5$state.layer,
-      moving = _ref5$state.moving,
-      stateRest = _objectWithoutProperties(_ref5$state, _excluded2),
-      rest = _objectWithoutProperties(_ref5, _excluded3);
+  var _ref6$state$x = _ref6$state.x,
+      x = _ref6$state$x === void 0 ? 0 : _ref6$state$x,
+      _ref6$state$y = _ref6$state.y,
+      y = _ref6$state$y === void 0 ? 0 : _ref6$state$y,
+      layer = _ref6$state.layer,
+      moving = _ref6$state.moving,
+      stateRest = _objectWithoutProperties(_ref6$state, _excluded2),
+      rest = _objectWithoutProperties(_ref6, _excluded3);
 
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -5559,7 +5511,7 @@ var isItemInsideElement = function isItemInsideElement(itemElement, otherElem) {
 
 var isMacOS = function isMacOS() {
   var userAgent = navigator.userAgent.toLowerCase();
-  return /mac osx 10/.test(userAgent);
+  return /mac os ?x 10/.test(userAgent);
 }; // From https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
 
 var getScrollLineHeight = function getScrollLineHeight() {
@@ -6123,7 +6075,7 @@ var Selector = function Selector(_ref) {
   var stateRef = React.useRef({
     moving: false
   });
-  var config = useRecoilValue(BoardConfigAtom); // Reset selection on game loading
+  var config = useRecoilValue(BoardConfigAtom); // Reset selection on board loading
 
   React.useEffect(function () {
     setSelected(emptySelection);
@@ -6783,32 +6735,26 @@ function F(t) {
   return w(t) > .179;
 }
 
+var _excluded$1 = ["pos"];
+
 var _templateObject$1, _templateObject2;
-var StyledCursor = newStyled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  transform: ", ";\n  position: fixed;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  z-index: 210;\n"])), function (_ref) {
-  var top = _ref.top,
-      left = _ref.left;
-  return "translate(".concat(left, "px, ").concat(top, "px)");
-});
-var CursorName = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  padding: 0 0.5em;\n  border-radius: 2px;\n  max-width: 5em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: -0.5em;\n  margin-top: 1.7em;\n  whitespace: nowrap;\n  background-color: ", ";\n"])), function (_ref2) {
-  var textColor = _ref2.textColor;
+var StyledCursor = newStyled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  z-index: 210;\n"])));
+var CursorName = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  padding: 0 0.5em;\n  border-radius: 2px;\n  max-width: 5em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: -0.5em;\n  margin-top: 1.7em;\n  whitespace: nowrap;\n  background-color: ", ";\n"])), function (_ref) {
+  var textColor = _ref.textColor;
   return textColor;
-}, function (_ref3) {
-  var color = _ref3.color;
+}, function (_ref2) {
+  var color = _ref2.color;
   return color;
 });
 
-var Cursor = function Cursor(_ref4) {
-  var _ref4$color = _ref4.color,
-      color = _ref4$color === void 0 ? "#666" : _ref4$color,
-      _ref4$size = _ref4.size,
-      size = _ref4$size === void 0 ? 40 : _ref4$size,
-      pos = _ref4.pos,
-      text = _ref4.text;
+var Cursor = function Cursor(_ref3) {
+  var _ref3$color = _ref3.color,
+      color = _ref3$color === void 0 ? "#666" : _ref3$color,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? 40 : _ref3$size,
+      text = _ref3.text;
   var textColor = F(color) ? "#222" : "#EEE";
-  return /*#__PURE__*/React.createElement(StyledCursor, {
-    top: pos.y - 10,
-    left: pos.x - 5
-  }, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(StyledCursor, null, /*#__PURE__*/React.createElement("svg", {
     version: "1.1",
     id: "Layer_1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -6833,6 +6779,23 @@ var Cursor = function Cursor(_ref4) {
   }, text));
 };
 
+var MemoizedCursor = /*#__PURE__*/React.memo(Cursor);
+
+var PositionnedCursor = function PositionnedCursor(_ref4) {
+  var pos = _ref4.pos,
+      rest = _objectWithoutProperties(_ref4, _excluded$1);
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "translate(".concat(pos.x - 5, "px, ").concat(pos.y - 3, "px)"),
+      top: 0,
+      left: 0,
+      zIndex: 210,
+      position: "fixed"
+    }
+  }, /*#__PURE__*/React.createElement(MemoizedCursor, rest));
+};
+
 var Cursors = function Cursors(_ref) {
   var users = _ref.users;
 
@@ -6908,7 +6871,7 @@ var Cursors = function Cursors(_ref) {
         userId = _ref5[0],
         pos = _ref5[1];
 
-    return /*#__PURE__*/React.createElement(Cursor, {
+    return /*#__PURE__*/React.createElement(PositionnedCursor, {
       key: userId,
       pos: pos,
       text: usersById[userId].name,
@@ -7447,7 +7410,12 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
 
   var config = useRecoilValue(BoardConfigAtom);
   var setBoardState = useSetRecoilState(BoardStateAtom);
-  var prevDim = usePrevious(dim); // Hooks to save/restore position
+  var prevDim = usePrevious(dim);
+  var mouseRef = React.useRef({
+    hover: false,
+    x: 0,
+    y: 0
+  }); // Hooks to save/restore position
 
   usePositionNavigator();
 
@@ -7482,7 +7450,7 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
         translateY: prevDimension.translateY + deltaY
       });
     });
-  }, [scale, setDim]); // Center board on game loading
+  }, [scale, setDim]); // Center board on board loading
 
   React.useEffect(function () {
     var _boardRef$current$get = boardRef.current.getBoundingClientRect(),
@@ -7749,9 +7717,11 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
                 e.preventDefault();
 
               case 31:
-                // Temporally zoom
+                // Temporary zoom
                 if (e.key === " " && !e.repeat) {
-                  zoomTo(3);
+                  if (mouseRef.current.hover) {
+                    zoomTo(3, mouseRef.current);
+                  }
                 }
 
               case 32:
@@ -7771,10 +7741,23 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
     // Ignore text in Input or Textarea
     if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return; // Zoom out on release
 
-    if (e.key === " ") {
-      zoomTo(1 / 3);
+    if (e.key === " " && mouseRef.current.hover) {
+      zoomTo(1 / 3, mouseRef.current);
     }
-  }, [zoomTo]);
+  }, [zoomTo]); // Save mouse position for temporary zoom
+
+  var onMouseMove = React.useCallback(function (e) {
+    var clientX = e.clientX,
+        clientY = e.clientY;
+    mouseRef.current.x = clientX;
+    mouseRef.current.y = clientY;
+  }, []);
+  var onMouseEnter = React.useCallback(function () {
+    mouseRef.current.hover = true;
+  }, []);
+  var onMouseLeave = React.useCallback(function () {
+    mouseRef.current.hover = false;
+  }, []);
   React.useEffect(function () {
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("keyup", onKeyUp);
@@ -7797,7 +7780,10 @@ var PanZoomRotate = function PanZoomRotate(_ref) {
     ref: wrappedRef,
     onContextMenu: function onContextMenu(e) {
       e.preventDefault();
-    }
+    },
+    onMouseMove: onMouseMove,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
   }, children));
 };
 
@@ -8189,6 +8175,13 @@ var Board = function Board(_ref) {
   })))))), /*#__PURE__*/React.createElement(Selection, null));
 };
 
+/**
+ * Returns the default actions of an item
+ * @param {object} item to consider
+ * @param {object} itemMap item template map with default actions
+ * @returns An array of default action for this item
+ */
+
 var getDefaultActionsFromItem = function getDefaultActionsFromItem(item, itemMap) {
   if (item.type in itemMap) {
     var actions = itemMap[item.type].defaultActions;
@@ -8202,27 +8195,26 @@ var getDefaultActionsFromItem = function getDefaultActionsFromItem(item, itemMap
 
   return [];
 };
+/**
+ * Returns actual actions from an item ordered by the configured available
+ * actions. If no action is defined, default actions are returned.
+ * @param {object} item item to use
+ * @param {object} itemMap item template map with available action for this item
+ * @returns the array of actions for this item
+ */
 
-var getAvailableActionsFromItem = function getAvailableActionsFromItem(item, itemMap) {
-  if (item.type in itemMap) {
-    var actions = itemMap[item.type].availableActions;
-
-    if (typeof actions === "function") {
-      return actions(item);
-    }
-
-    return actions;
-  }
-
-  return [];
-};
 
 var getActionsFromItem = function getActionsFromItem(item, itemMap) {
   var _item$actions = item.actions,
-      actions = _item$actions === void 0 ? getDefaultActionsFromItem(item, itemMap) : _item$actions; // Filter availableActions to keep same order
+      actions = _item$actions === void 0 ? getDefaultActionsFromItem(item, itemMap) : _item$actions;
+  return actions.map(function (action) {
+    if (typeof action === "string") {
+      return {
+        name: action
+      };
+    }
 
-  return getAvailableActionsFromItem(item, itemMap).filter(function (action) {
-    return actions.includes(action);
+    return action;
   });
 };
 
@@ -8292,6 +8284,11 @@ var useAvailableActions = function useAvailableActions() {
       isMountedRef.current = false;
     };
   }, []);
+  /**
+   * Returns available actions for selected items. An action is kept only if all
+   * items have this exact same action with same parameters.
+   */
+
   var updateAvailableActions = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
     var _yield$getItemListOrS, _yield$getItemListOrS2, selectedItemIds, selectedItemList, allActions;
 
@@ -8324,8 +8321,10 @@ var useAvailableActions = function useAvailableActions() {
             allActions = selectedItemList.reduce(function (acc, item) {
               var itemActions = getActionsFromItem(item, itemMap);
               return acc.filter(function (value) {
-                return itemActions.includes(value);
-              }); // intersection(acc, getActionsFromItem(item, itemMap)),
+                return itemActions.some(function (itemAction) {
+                  return es6(value, itemAction);
+                });
+              });
             }, getActionsFromItem(selectedItemList[0], itemMap));
             setAvailableActions(allActions);
             _context2.next = 14;