react-sync-board 1.1.1 → 1.1.2

package/dist/react-sync-board.js

@@ -1,11 +1,11 @@
 var Dr = Object.defineProperty;
 var $r = (e, t, r) => t in e ? Dr(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var Ot = (e, t, r) => ($r(e, typeof t != "symbol" ? t + "" : t, r), r);
-import g, { useContext as be, useDebugValue as Ar, useRef as Ie, useMemo as ct, useEffect as Me, useCallback as Jt, memo as Zt } from "react";
-function zr(e) {
+import m, { useContext as be, useDebugValue as Ar, useRef as Ie, useMemo as ct, useEffect as Me, useCallback as Jt, memo as Zt } from "react";
+function Lr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Oe = {}, Lr = {
+var Oe = {}, zr = {
   get exports() {
     return Oe;
   },
@@ -27,7 +27,7 @@ function Yr() {
   if (Tt)
     return we;
   Tt = 1;
-  var e = g, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, o = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
+  var e = m, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, o = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
   function a(u, l, d) {
     var f, c = {}, b = null, _ = null;
     d !== void 0 && (b = "" + d), l.key !== void 0 && (b = "" + l.key), l.ref !== void 0 && (_ = l.ref);
@@ -53,51 +53,51 @@ var Ce = {};
 var kt;
 function Br() {
   return kt || (kt = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = g, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), a = Symbol.for("react.provider"), u = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), d = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), w = Symbol.iterator, m = "@@iterator";
-    function E(i) {
+    var e = m, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), a = Symbol.for("react.provider"), u = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), d = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), C = Symbol.iterator, h = "@@iterator";
+    function S(i) {
       if (i === null || typeof i != "object")
         return null;
-      var S = w && i[w] || i[m];
-      return typeof S == "function" ? S : null;
+      var y = C && i[C] || i[h];
+      return typeof y == "function" ? y : null;
     }
-    var R = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    var E = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
     function x(i) {
       {
-        for (var S = arguments.length, I = new Array(S > 1 ? S - 1 : 0), j = 1; j < S; j++)
+        for (var y = arguments.length, I = new Array(y > 1 ? y - 1 : 0), j = 1; j < y; j++)
           I[j - 1] = arguments[j];
-        y("error", i, I);
+        v("error", i, I);
       }
     }
-    function y(i, S, I) {
+    function v(i, y, I) {
       {
-        var j = R.ReactDebugCurrentFrame, B = j.getStackAddendum();
-        B !== "" && (S += "%s", I = I.concat([B]));
-        var X = I.map(function(L) {
-          return String(L);
+        var j = E.ReactDebugCurrentFrame, U = j.getStackAddendum();
+        U !== "" && (y += "%s", I = I.concat([U]));
+        var W = I.map(function(Y) {
+          return String(Y);
         });
-        X.unshift("Warning: " + S), Function.prototype.apply.call(console[i], console, X);
+        W.unshift("Warning: " + y), Function.prototype.apply.call(console[i], console, W);
       }
     }
-    var p = !1, h = !1, v = !1, C = !1, D = !1, k;
-    k = Symbol.for("react.module.reference");
-    function P(i) {
-      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || D || i === o || i === d || i === f || C || i === _ || p || h || v || typeof i == "object" && i !== null && (i.$$typeof === b || i.$$typeof === c || i.$$typeof === a || i.$$typeof === u || i.$$typeof === l || // This needs to include all possible module reference object
+    var p = !1, R = !1, w = !1, g = !1, k = !1, P;
+    P = Symbol.for("react.module.reference");
+    function M(i) {
+      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || k || i === o || i === d || i === f || g || i === _ || p || R || w || typeof i == "object" && i !== null && (i.$$typeof === b || i.$$typeof === c || i.$$typeof === a || i.$$typeof === u || i.$$typeof === l || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
-      i.$$typeof === k || i.getModuleId !== void 0));
+      i.$$typeof === P || i.getModuleId !== void 0));
     }
-    function M(i, S, I) {
+    function $(i, y, I) {
       var j = i.displayName;
       if (j)
         return j;
-      var B = S.displayName || S.name || "";
-      return B !== "" ? I + "(" + B + ")" : I;
+      var U = y.displayName || y.name || "";
+      return U !== "" ? I + "(" + U + ")" : I;
     }
-    function N(i) {
+    function B(i) {
       return i.displayName || "Context";
     }
-    function F(i) {
+    function N(i) {
       if (i == null)
         return null;
       if (typeof i.tag == "number" && x("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof i == "function")
@@ -121,20 +121,20 @@ function Br() {
       if (typeof i == "object")
         switch (i.$$typeof) {
           case u:
-            var S = i;
-            return N(S) + ".Consumer";
+            var y = i;
+            return B(y) + ".Consumer";
           case a:
             var I = i;
-            return N(I._context) + ".Provider";
+            return B(I._context) + ".Provider";
           case l:
-            return M(i, i.render, "ForwardRef");
+            return $(i, i.render, "ForwardRef");
           case c:
             var j = i.displayName || null;
-            return j !== null ? j : F(i.type) || "Memo";
+            return j !== null ? j : N(i.type) || "Memo";
           case b: {
-            var B = i, X = B._payload, L = B._init;
+            var U = i, W = U._payload, Y = U._init;
             try {
-              return F(L(X));
+              return N(Y(W));
             } catch {
               return null;
             }
@@ -142,14 +142,14 @@ function Br() {
         }
       return null;
     }
-    var K = Object.assign, O = 0, $, A, U, Y, W, J, te;
+    var K = Object.assign, O = 0, D, A, X, z, F, H, te;
     function re() {
     }
     re.__reactDisabledLog = !0;
     function ne() {
       {
         if (O === 0) {
-          $ = console.log, A = console.info, U = console.warn, Y = console.error, W = console.group, J = console.groupCollapsed, te = console.groupEnd;
+          D = console.log, A = console.info, X = console.warn, z = console.error, F = console.group, H = console.groupCollapsed, te = console.groupEnd;
           var i = {
             configurable: !0,
             enumerable: !0,
@@ -179,22 +179,22 @@ function Br() {
           };
           Object.defineProperties(console, {
             log: K({}, i, {
-              value: $
+              value: D
             }),
             info: K({}, i, {
               value: A
             }),
             warn: K({}, i, {
-              value: U
+              value: X
             }),
             error: K({}, i, {
-              value: Y
+              value: z
             }),
             group: K({}, i, {
-              value: W
+              value: F
             }),
             groupCollapsed: K({}, i, {
-              value: J
+              value: H
             }),
             groupEnd: K({}, i, {
               value: te
@@ -204,18 +204,18 @@ function Br() {
         O < 0 && x("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var ee = R.ReactCurrentDispatcher, le;
-    function he(i, S, I) {
+    var ee = E.ReactCurrentDispatcher, fe;
+    function he(i, y, I) {
       {
-        if (le === void 0)
+        if (fe === void 0)
           try {
             throw Error();
-          } catch (B) {
-            var j = B.stack.trim().match(/\n( *(at )?)/);
-            le = j && j[1] || "";
+          } catch (U) {
+            var j = U.stack.trim().match(/\n( *(at )?)/);
+            fe = j && j[1] || "";
           }
         return `
-` + le + i;
+` + fe + i;
       }
     }
     var Ve = !1, je;
@@ -223,7 +223,7 @@ function Br() {
       var fr = typeof WeakMap == "function" ? WeakMap : Map;
       je = new fr();
     }
-    function mt(i, S) {
+    function mt(i, y) {
       if (!i || Ve)
         return "";
       {
@@ -233,33 +233,33 @@ function Br() {
       }
       var j;
       Ve = !0;
-      var B = Error.prepareStackTrace;
+      var U = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var X;
-      X = ee.current, ee.current = null, ne();
+      var W;
+      W = ee.current, ee.current = null, ne();
       try {
-        if (S) {
-          var L = function() {
+        if (y) {
+          var Y = function() {
             throw Error();
           };
-          if (Object.defineProperty(L.prototype, "props", {
+          if (Object.defineProperty(Y.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(L, []);
+              Reflect.construct(Y, []);
             } catch (ae) {
               j = ae;
             }
-            Reflect.construct(i, [], L);
+            Reflect.construct(i, [], Y);
           } else {
             try {
-              L.call();
+              Y.call();
             } catch (ae) {
               j = ae;
             }
-            i.call(L.prototype);
+            i.call(Y.prototype);
           }
         } else {
           try {
@@ -271,37 +271,37 @@ function Br() {
         }
       } catch (ae) {
         if (ae && j && typeof ae.stack == "string") {
-          for (var z = ae.stack.split(`
+          for (var L = ae.stack.split(`
 `), Q = j.stack.split(`
-`), q = z.length - 1, G = Q.length - 1; q >= 1 && G >= 0 && z[q] !== Q[G]; )
-            G--;
-          for (; q >= 1 && G >= 0; q--, G--)
-            if (z[q] !== Q[G]) {
-              if (q !== 1 || G !== 1)
+`), G = L.length - 1, J = Q.length - 1; G >= 1 && J >= 0 && L[G] !== Q[J]; )
+            J--;
+          for (; G >= 1 && J >= 0; G--, J--)
+            if (L[G] !== Q[J]) {
+              if (G !== 1 || J !== 1)
                 do
-                  if (q--, G--, G < 0 || z[q] !== Q[G]) {
+                  if (G--, J--, J < 0 || L[G] !== Q[J]) {
                     var oe = `
-` + z[q].replace(" at new ", " at ");
+` + L[G].replace(" at new ", " at ");
                     return i.displayName && oe.includes("<anonymous>") && (oe = oe.replace("<anonymous>", i.displayName)), typeof i == "function" && je.set(i, oe), oe;
                   }
-                while (q >= 1 && G >= 0);
+                while (G >= 1 && J >= 0);
               break;
             }
         }
       } finally {
-        Ve = !1, ee.current = X, V(), Error.prepareStackTrace = B;
+        Ve = !1, ee.current = W, V(), Error.prepareStackTrace = U;
       }
       var ye = i ? i.displayName || i.name : "", It = ye ? he(ye) : "";
       return typeof i == "function" && je.set(i, It), It;
     }
-    function dr(i, S, I) {
+    function dr(i, y, I) {
       return mt(i, !1);
     }
     function pr(i) {
-      var S = i.prototype;
-      return !!(S && S.isReactComponent);
+      var y = i.prototype;
+      return !!(y && y.isReactComponent);
     }
-    function De(i, S, I) {
+    function De(i, y, I) {
       if (i == null)
         return "";
       if (typeof i == "function")
@@ -319,41 +319,41 @@ function Br() {
           case l:
             return dr(i.render);
           case c:
-            return De(i.type, S, I);
+            return De(i.type, y, I);
           case b: {
-            var j = i, B = j._payload, X = j._init;
+            var j = i, U = j._payload, W = j._init;
             try {
-              return De(X(B), S, I);
+              return De(W(U), y, I);
             } catch {
             }
           }
         }
       return "";
     }
-    var $e = Object.prototype.hasOwnProperty, gt = {}, ht = R.ReactDebugCurrentFrame;
+    var $e = Object.prototype.hasOwnProperty, gt = {}, ht = E.ReactDebugCurrentFrame;
     function Ae(i) {
       if (i) {
-        var S = i._owner, I = De(i.type, i._source, S ? S.type : null);
+        var y = i._owner, I = De(i.type, i._source, y ? y.type : null);
         ht.setExtraStackFrame(I);
       } else
         ht.setExtraStackFrame(null);
     }
-    function mr(i, S, I, j, B) {
+    function mr(i, y, I, j, U) {
       {
-        var X = Function.call.bind($e);
-        for (var L in i)
-          if (X(i, L)) {
-            var z = void 0;
+        var W = Function.call.bind($e);
+        for (var Y in i)
+          if (W(i, Y)) {
+            var L = void 0;
             try {
-              if (typeof i[L] != "function") {
-                var Q = Error((j || "React class") + ": " + I + " type `" + L + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[L] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+              if (typeof i[Y] != "function") {
+                var Q = Error((j || "React class") + ": " + I + " type `" + Y + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[Y] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                 throw Q.name = "Invariant Violation", Q;
               }
-              z = i[L](S, L, j, I, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (q) {
-              z = q;
+              L = i[Y](y, Y, j, I, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (G) {
+              L = G;
             }
-            z && !(z instanceof Error) && (Ae(B), x("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", j || "React class", I, L, typeof z), Ae(null)), z instanceof Error && !(z.message in gt) && (gt[z.message] = !0, Ae(B), x("Failed %s type: %s", I, z.message), Ae(null));
+            L && !(L instanceof Error) && (Ae(U), x("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", j || "React class", I, Y, typeof L), Ae(null)), L instanceof Error && !(L.message in gt) && (gt[L.message] = !0, Ae(U), x("Failed %s type: %s", I, L.message), Ae(null));
           }
       }
     }
@@ -363,7 +363,7 @@ function Br() {
     }
     function hr(i) {
       {
-        var S = typeof Symbol == "function" && Symbol.toStringTag, I = S && i[Symbol.toStringTag] || i.constructor.name || "Object";
+        var y = typeof Symbol == "function" && Symbol.toStringTag, I = y && i[Symbol.toStringTag] || i.constructor.name || "Object";
         return I;
       }
     }
@@ -381,7 +381,7 @@ function Br() {
       if (vr(i))
         return x("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", hr(i)), vt(i);
     }
-    var Ee = R.ReactCurrentOwner, yr = {
+    var Ee = E.ReactCurrentOwner, yr = {
       key: !0,
       ref: !0,
       __self: !0,
@@ -390,30 +390,30 @@ function Br() {
     Ke = {};
     function Sr(i) {
       if ($e.call(i, "ref")) {
-        var S = Object.getOwnPropertyDescriptor(i, "ref").get;
-        if (S && S.isReactWarning)
+        var y = Object.getOwnPropertyDescriptor(i, "ref").get;
+        if (y && y.isReactWarning)
           return !1;
       }
       return i.ref !== void 0;
     }
     function _r(i) {
       if ($e.call(i, "key")) {
-        var S = Object.getOwnPropertyDescriptor(i, "key").get;
-        if (S && S.isReactWarning)
+        var y = Object.getOwnPropertyDescriptor(i, "key").get;
+        if (y && y.isReactWarning)
           return !1;
       }
       return i.key !== void 0;
     }
-    function br(i, S) {
-      if (typeof i.ref == "string" && Ee.current && S && Ee.current.stateNode !== S) {
-        var I = F(Ee.current.type);
-        Ke[I] || (x('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', F(Ee.current.type), i.ref), Ke[I] = !0);
+    function br(i, y) {
+      if (typeof i.ref == "string" && Ee.current && y && Ee.current.stateNode !== y) {
+        var I = N(Ee.current.type);
+        Ke[I] || (x('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', N(Ee.current.type), i.ref), Ke[I] = !0);
       }
     }
-    function Er(i, S) {
+    function Er(i, y) {
       {
         var I = function() {
-          St || (St = !0, x("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", S));
+          St || (St = !0, x("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", y));
         };
         I.isReactWarning = !0, Object.defineProperty(i, "key", {
           get: I,
@@ -421,10 +421,10 @@ function Br() {
         });
       }
     }
-    function wr(i, S) {
+    function wr(i, y) {
       {
         var I = function() {
-          _t || (_t = !0, x("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", S));
+          _t || (_t = !0, x("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", y));
         };
         I.isReactWarning = !0, Object.defineProperty(i, "ref", {
           get: I,
@@ -432,57 +432,57 @@ function Br() {
         });
       }
     }
-    var Cr = function(i, S, I, j, B, X, L) {
-      var z = {
+    var Cr = function(i, y, I, j, U, W, Y) {
+      var L = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: t,
         // Built-in properties that belong on the element
         type: i,
-        key: S,
+        key: y,
         ref: I,
-        props: L,
+        props: Y,
         // Record the component responsible for creating this element.
-        _owner: X
+        _owner: W
       };
-      return z._store = {}, Object.defineProperty(z._store, "validated", {
+      return L._store = {}, Object.defineProperty(L._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: !1
-      }), Object.defineProperty(z, "_self", {
+      }), Object.defineProperty(L, "_self", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
         value: j
-      }), Object.defineProperty(z, "_source", {
+      }), Object.defineProperty(L, "_source", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: B
-      }), Object.freeze && (Object.freeze(z.props), Object.freeze(z)), z;
+        value: U
+      }), Object.freeze && (Object.freeze(L.props), Object.freeze(L)), L;
     };
-    function xr(i, S, I, j, B) {
+    function xr(i, y, I, j, U) {
       {
-        var X, L = {}, z = null, Q = null;
-        I !== void 0 && (yt(I), z = "" + I), _r(S) && (yt(S.key), z = "" + S.key), Sr(S) && (Q = S.ref, br(S, B));
-        for (X in S)
-          $e.call(S, X) && !yr.hasOwnProperty(X) && (L[X] = S[X]);
+        var W, Y = {}, L = null, Q = null;
+        I !== void 0 && (yt(I), L = "" + I), _r(y) && (yt(y.key), L = "" + y.key), Sr(y) && (Q = y.ref, br(y, U));
+        for (W in y)
+          $e.call(y, W) && !yr.hasOwnProperty(W) && (Y[W] = y[W]);
         if (i && i.defaultProps) {
-          var q = i.defaultProps;
-          for (X in q)
-            L[X] === void 0 && (L[X] = q[X]);
+          var G = i.defaultProps;
+          for (W in G)
+            Y[W] === void 0 && (Y[W] = G[W]);
         }
-        if (z || Q) {
-          var G = typeof i == "function" ? i.displayName || i.name || "Unknown" : i;
-          z && Er(L, G), Q && wr(L, G);
+        if (L || Q) {
+          var J = typeof i == "function" ? i.displayName || i.name || "Unknown" : i;
+          L && Er(Y, J), Q && wr(Y, J);
         }
-        return Cr(i, z, Q, B, j, Ee.current, L);
+        return Cr(i, L, Q, U, j, Ee.current, Y);
       }
     }
-    var He = R.ReactCurrentOwner, bt = R.ReactDebugCurrentFrame;
+    var He = E.ReactCurrentOwner, bt = E.ReactDebugCurrentFrame;
     function ve(i) {
       if (i) {
-        var S = i._owner, I = De(i.type, i._source, S ? S.type : null);
+        var y = i._owner, I = De(i.type, i._source, y ? y.type : null);
         bt.setExtraStackFrame(I);
       } else
         bt.setExtraStackFrame(null);
@@ -495,7 +495,7 @@ function Br() {
     function Et() {
       {
         if (He.current) {
-          var i = F(He.current.type);
+          var i = N(He.current.type);
           if (i)
             return `
 
@@ -507,10 +507,10 @@ Check the render method of \`` + i + "`.";
     function Rr(i) {
       {
         if (i !== void 0) {
-          var S = i.fileName.replace(/^.*[\\\/]/, ""), I = i.lineNumber;
+          var y = i.fileName.replace(/^.*[\\\/]/, ""), I = i.lineNumber;
           return `
 
-Check your code at ` + S + ":" + I + ".";
+Check your code at ` + y + ":" + I + ".";
         }
         return "";
       }
@@ -518,77 +518,77 @@ Check your code at ` + S + ":" + I + ".";
     var wt = {};
     function Ir(i) {
       {
-        var S = Et();
-        if (!S) {
+        var y = Et();
+        if (!y) {
           var I = typeof i == "string" ? i : i.displayName || i.name;
-          I && (S = `
+          I && (y = `
 
 Check the top-level render call using <` + I + ">.");
         }
-        return S;
+        return y;
       }
     }
-    function Ct(i, S) {
+    function Ct(i, y) {
       {
         if (!i._store || i._store.validated || i.key != null)
           return;
         i._store.validated = !0;
-        var I = Ir(S);
+        var I = Ir(y);
         if (wt[I])
           return;
         wt[I] = !0;
         var j = "";
-        i && i._owner && i._owner !== He.current && (j = " It was passed a child from " + F(i._owner.type) + "."), ve(i), x('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', I, j), ve(null);
+        i && i._owner && i._owner !== He.current && (j = " It was passed a child from " + N(i._owner.type) + "."), ve(i), x('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', I, j), ve(null);
       }
     }
-    function xt(i, S) {
+    function xt(i, y) {
       {
         if (typeof i != "object")
           return;
         if (Fe(i))
           for (var I = 0; I < i.length; I++) {
             var j = i[I];
-            Ge(j) && Ct(j, S);
+            Ge(j) && Ct(j, y);
           }
         else if (Ge(i))
           i._store && (i._store.validated = !0);
         else if (i) {
-          var B = E(i);
-          if (typeof B == "function" && B !== i.entries)
-            for (var X = B.call(i), L; !(L = X.next()).done; )
-              Ge(L.value) && Ct(L.value, S);
+          var U = S(i);
+          if (typeof U == "function" && U !== i.entries)
+            for (var W = U.call(i), Y; !(Y = W.next()).done; )
+              Ge(Y.value) && Ct(Y.value, y);
         }
       }
     }
     function Or(i) {
       {
-        var S = i.type;
-        if (S == null || typeof S == "string")
+        var y = i.type;
+        if (y == null || typeof y == "string")
           return;
         var I;
-        if (typeof S == "function")
-          I = S.propTypes;
-        else if (typeof S == "object" && (S.$$typeof === l || // Note: Memo only checks outer props here.
+        if (typeof y == "function")
+          I = y.propTypes;
+        else if (typeof y == "object" && (y.$$typeof === l || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        S.$$typeof === c))
-          I = S.propTypes;
+        y.$$typeof === c))
+          I = y.propTypes;
         else
           return;
         if (I) {
-          var j = F(S);
+          var j = N(y);
           mr(I, i.props, "prop", j, i);
-        } else if (S.PropTypes !== void 0 && !qe) {
+        } else if (y.PropTypes !== void 0 && !qe) {
           qe = !0;
-          var B = F(S);
-          x("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", B || "Unknown");
+          var U = N(y);
+          x("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", U || "Unknown");
         }
-        typeof S.getDefaultProps == "function" && !S.getDefaultProps.isReactClassApproved && x("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof y.getDefaultProps == "function" && !y.getDefaultProps.isReactClassApproved && x("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
     function Tr(i) {
       {
-        for (var S = Object.keys(i.props), I = 0; I < S.length; I++) {
-          var j = S[I];
+        for (var y = Object.keys(i.props), I = 0; I < y.length; I++) {
+          var j = y[I];
           if (j !== "children" && j !== "key") {
             ve(i), x("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", j), ve(null);
             break;
@@ -597,22 +597,22 @@ Check the top-level render call using <` + I + ">.");
         i.ref !== null && (ve(i), x("Invalid attribute `ref` supplied to `React.Fragment`."), ve(null));
       }
     }
-    function Rt(i, S, I, j, B, X) {
+    function Rt(i, y, I, j, U, W) {
       {
-        var L = P(i);
-        if (!L) {
-          var z = "";
-          (i === void 0 || typeof i == "object" && i !== null && Object.keys(i).length === 0) && (z += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var Q = Rr(B);
-          Q ? z += Q : z += Et();
-          var q;
-          i === null ? q = "null" : Fe(i) ? q = "array" : i !== void 0 && i.$$typeof === t ? (q = "<" + (F(i.type) || "Unknown") + " />", z = " Did you accidentally export a JSX literal instead of a component?") : q = typeof i, x("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", q, z);
+        var Y = M(i);
+        if (!Y) {
+          var L = "";
+          (i === void 0 || typeof i == "object" && i !== null && Object.keys(i).length === 0) && (L += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var Q = Rr(U);
+          Q ? L += Q : L += Et();
+          var G;
+          i === null ? G = "null" : Fe(i) ? G = "array" : i !== void 0 && i.$$typeof === t ? (G = "<" + (N(i.type) || "Unknown") + " />", L = " Did you accidentally export a JSX literal instead of a component?") : G = typeof i, x("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", G, L);
         }
-        var G = xr(i, S, I, B, X);
-        if (G == null)
-          return G;
-        if (L) {
-          var oe = S.children;
+        var J = xr(i, y, I, U, W);
+        if (J == null)
+          return J;
+        if (Y) {
+          var oe = y.children;
           if (oe !== void 0)
             if (j)
               if (Fe(oe)) {
@@ -624,14 +624,14 @@ Check the top-level render call using <` + I + ">.");
             else
               xt(oe, i);
         }
-        return i === n ? Tr(G) : Or(G), G;
+        return i === n ? Tr(J) : Or(J), J;
       }
     }
-    function kr(i, S, I) {
-      return Rt(i, S, I, !0);
+    function kr(i, y, I) {
+      return Rt(i, y, I, !0);
     }
-    function Pr(i, S, I) {
-      return Rt(i, S, I, !1);
+    function Pr(i, y, I) {
+      return Rt(i, y, I, !1);
     }
     var Mr = Pr, jr = kr;
     Ce.Fragment = n, Ce.jsx = Mr, Ce.jsxs = jr;
@@ -639,8 +639,8 @@ Check the top-level render call using <` + I + ">.");
 }
 (function(e) {
   process.env.NODE_ENV === "production" ? e.exports = Yr() : e.exports = Br();
-})(Lr);
-const Qt = Oe.Fragment, T = Oe.jsx, ue = Oe.jsxs;
+})(zr);
+const Qt = Oe.Fragment, T = Oe.jsx, le = Oe.jsxs;
 let Nr = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce((t, r) => (r &= 63, r < 36 ? t += r.toString(36) : r < 62 ? t += (r - 26).toString(36).toUpperCase() : r > 62 ? t += "-" : t += "_", t), "");
 class Ur {
   constructor(t, r, n = null) {
@@ -761,7 +761,7 @@ const Xr = ({
       });
     }), e.emit("joinSuperSocket", { room: t, userId: o });
   });
-}, ot = g.createContext(), Wr = () => /* @__PURE__ */ T(
+}, ot = m.createContext(), Wr = () => /* @__PURE__ */ T(
   "div",
   {
     style: {
@@ -782,30 +782,30 @@ const Xr = ({
   LoadingComponent: n = Wr,
   children: o
 }) => {
-  const [s, a] = g.useState(!1), [u, l] = g.useState(!1), [d, f] = g.useState(null), c = g.useRef(null), b = g.useRef(!1), _ = be(ot), w = g.useRef(!1);
-  return g.useEffect(() => (b.current = !0, () => {
+  const [s, a] = m.useState(!1), [u, l] = m.useState(!1), [d, f] = m.useState(null), c = m.useRef(null), b = m.useRef(!1), _ = be(ot), C = m.useRef(!1);
+  return m.useEffect(() => (b.current = !0, () => {
     b.current = !1;
-  }), []), g.useEffect(() => {
+  }), []), m.useEffect(() => {
     if (!e)
       return null;
-    const m = () => {
+    const h = () => {
       console.log(`Disconnected from ${r}…`), b.current && (a(!1), l(!1));
     };
-    return e.on("disconnect", m), () => {
-      e.off("disconnect", m);
+    return e.on("disconnect", h), () => {
+      e.off("disconnect", h);
     };
-  }, [r, e]), g.useEffect(() => e ? (e.connected || e.connect(), console.log(`Try to connect to wire ${t} on channel ${r}`), w.current || (w.current = !0, Xr({
+  }, [r, e]), m.useEffect(() => e ? (e.connected || e.connect(), console.log(`Try to connect to wire ${t} on channel ${r}`), C.current || (C.current = !0, Xr({
     socket: e,
     room: t,
     onMaster: () => {
       console.log(`Is now master on channel ${r}…`), b.current && l(!0);
     },
-    onJoined: (m) => {
-      console.log(`Connected on channel ${r}…`), c.current = m, b.current && (f(m), a(!0));
+    onJoined: (h) => {
+      console.log(`Connected on channel ${r}…`), c.current = h, b.current && (f(h), a(!0));
     }
   })), () => {
-    var m;
-    (m = c.current) == null || m.leave();
+    var h;
+    (h = c.current) == null || h.leave();
   }) : null, [r, t, e]), !s || !d ? /* @__PURE__ */ T(n, {}) : /* @__PURE__ */ T(
     ot.Provider,
     {
@@ -857,18 +857,18 @@ function Kr() {
   if (Mt)
     return Ze;
   Mt = 1;
-  var e = g;
+  var e = m;
   function t(c, b) {
     return c === b && (c !== 0 || 1 / c === 1 / b) || c !== c && b !== b;
   }
   var r = typeof Object.is == "function" ? Object.is : t, n = e.useState, o = e.useEffect, s = e.useLayoutEffect, a = e.useDebugValue;
   function u(c, b) {
-    var _ = b(), w = n({ inst: { value: _, getSnapshot: b } }), m = w[0].inst, E = w[1];
+    var _ = b(), C = n({ inst: { value: _, getSnapshot: b } }), h = C[0].inst, S = C[1];
     return s(function() {
-      m.value = _, m.getSnapshot = b, l(m) && E({ inst: m });
+      h.value = _, h.getSnapshot = b, l(h) && S({ inst: h });
     }, [c, _, b]), o(function() {
-      return l(m) && E({ inst: m }), c(function() {
-        l(m) && E({ inst: m });
+      return l(h) && S({ inst: h }), c(function() {
+        l(h) && S({ inst: h });
       });
     }, [c]), a(_), _;
   }
@@ -902,70 +902,70 @@ var jt;
 function Hr() {
   return jt || (jt = 1, process.env.NODE_ENV !== "production" && function() {
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-    var e = g, t = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function r(y) {
+    var e = m, t = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function r(v) {
       {
-        for (var p = arguments.length, h = new Array(p > 1 ? p - 1 : 0), v = 1; v < p; v++)
-          h[v - 1] = arguments[v];
-        n("error", y, h);
+        for (var p = arguments.length, R = new Array(p > 1 ? p - 1 : 0), w = 1; w < p; w++)
+          R[w - 1] = arguments[w];
+        n("error", v, R);
       }
     }
-    function n(y, p, h) {
+    function n(v, p, R) {
       {
-        var v = t.ReactDebugCurrentFrame, C = v.getStackAddendum();
-        C !== "" && (p += "%s", h = h.concat([C]));
-        var D = h.map(function(k) {
-          return String(k);
+        var w = t.ReactDebugCurrentFrame, g = w.getStackAddendum();
+        g !== "" && (p += "%s", R = R.concat([g]));
+        var k = R.map(function(P) {
+          return String(P);
         });
-        D.unshift("Warning: " + p), Function.prototype.apply.call(console[y], console, D);
+        k.unshift("Warning: " + p), Function.prototype.apply.call(console[v], console, k);
       }
     }
-    function o(y, p) {
-      return y === p && (y !== 0 || 1 / y === 1 / p) || y !== y && p !== p;
+    function o(v, p) {
+      return v === p && (v !== 0 || 1 / v === 1 / p) || v !== v && p !== p;
     }
     var s = typeof Object.is == "function" ? Object.is : o, a = e.useState, u = e.useEffect, l = e.useLayoutEffect, d = e.useDebugValue, f = !1, c = !1;
-    function b(y, p, h) {
+    function b(v, p, R) {
       f || e.startTransition !== void 0 && (f = !0, r("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
-      var v = p();
+      var w = p();
       if (!c) {
-        var C = p();
-        s(v, C) || (r("The result of getSnapshot should be cached to avoid an infinite loop"), c = !0);
+        var g = p();
+        s(w, g) || (r("The result of getSnapshot should be cached to avoid an infinite loop"), c = !0);
       }
-      var D = a({
+      var k = a({
         inst: {
-          value: v,
+          value: w,
           getSnapshot: p
         }
-      }), k = D[0].inst, P = D[1];
+      }), P = k[0].inst, M = k[1];
       return l(function() {
-        k.value = v, k.getSnapshot = p, _(k) && P({
-          inst: k
+        P.value = w, P.getSnapshot = p, _(P) && M({
+          inst: P
         });
-      }, [y, v, p]), u(function() {
-        _(k) && P({
-          inst: k
+      }, [v, w, p]), u(function() {
+        _(P) && M({
+          inst: P
         });
-        var M = function() {
-          _(k) && P({
-            inst: k
+        var $ = function() {
+          _(P) && M({
+            inst: P
           });
         };
-        return y(M);
-      }, [y]), d(v), v;
+        return v($);
+      }, [v]), d(w), w;
     }
-    function _(y) {
-      var p = y.getSnapshot, h = y.value;
+    function _(v) {
+      var p = v.getSnapshot, R = v.value;
       try {
-        var v = p();
-        return !s(h, v);
+        var w = p();
+        return !s(R, w);
       } catch {
         return !0;
       }
     }
-    function w(y, p, h) {
+    function C(v, p, R) {
       return p();
     }
-    var m = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", E = !m, R = E ? w : b, x = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : R;
+    var h = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", S = !h, E = S ? C : b, x = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : E;
     Qe.useSyncExternalStore = x, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
   }()), Qe;
 }
@@ -989,44 +989,44 @@ function qr() {
   if ($t)
     return Je;
   $t = 1;
-  var e = g, t = tr();
+  var e = m, t = tr();
   function r(d, f) {
     return d === f && (d !== 0 || 1 / d === 1 / f) || d !== d && f !== f;
   }
   var n = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, s = e.useRef, a = e.useEffect, u = e.useMemo, l = e.useDebugValue;
   return Je.useSyncExternalStoreWithSelector = function(d, f, c, b, _) {
-    var w = s(null);
-    if (w.current === null) {
-      var m = { hasValue: !1, value: null };
-      w.current = m;
+    var C = s(null);
+    if (C.current === null) {
+      var h = { hasValue: !1, value: null };
+      C.current = h;
     } else
-      m = w.current;
-    w = u(function() {
-      function R(v) {
+      h = C.current;
+    C = u(function() {
+      function E(w) {
         if (!x) {
-          if (x = !0, y = v, v = b(v), _ !== void 0 && m.hasValue) {
-            var C = m.value;
-            if (_(C, v))
-              return p = C;
+          if (x = !0, v = w, w = b(w), _ !== void 0 && h.hasValue) {
+            var g = h.value;
+            if (_(g, w))
+              return p = g;
           }
-          return p = v;
+          return p = w;
         }
-        if (C = p, n(y, v))
-          return C;
-        var D = b(v);
-        return _ !== void 0 && _(C, D) ? C : (y = v, p = D);
+        if (g = p, n(v, w))
+          return g;
+        var k = b(w);
+        return _ !== void 0 && _(g, k) ? g : (v = w, p = k);
       }
-      var x = !1, y, p, h = c === void 0 ? null : c;
+      var x = !1, v, p, R = c === void 0 ? null : c;
       return [function() {
-        return R(f());
-      }, h === null ? void 0 : function() {
-        return R(h());
+        return E(f());
+      }, R === null ? void 0 : function() {
+        return E(R());
       }];
     }, [f, c, b, _]);
-    var E = o(d, w[0], w[1]);
+    var S = o(d, C[0], C[1]);
     return a(function() {
-      m.hasValue = !0, m.value = E;
-    }, [E]), l(E), E;
+      h.hasValue = !0, h.value = S;
+    }, [S]), l(S), S;
   }, Je;
 }
 var et = {};
@@ -1043,43 +1043,43 @@ var At;
 function Gr() {
   return At || (At = 1, process.env.NODE_ENV !== "production" && function() {
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-    var e = g, t = tr();
+    var e = m, t = tr();
     function r(f, c) {
       return f === c && (f !== 0 || 1 / f === 1 / c) || f !== f && c !== c;
     }
     var n = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, s = e.useRef, a = e.useEffect, u = e.useMemo, l = e.useDebugValue;
-    function d(f, c, b, _, w) {
-      var m = s(null), E;
-      m.current === null ? (E = {
+    function d(f, c, b, _, C) {
+      var h = s(null), S;
+      h.current === null ? (S = {
         hasValue: !1,
         value: null
-      }, m.current = E) : E = m.current;
-      var R = u(function() {
-        var h = !1, v, C, D = function(N) {
-          if (!h) {
-            h = !0, v = N;
-            var F = _(N);
-            if (w !== void 0 && E.hasValue) {
-              var K = E.value;
-              if (w(K, F))
-                return C = K, K;
+      }, h.current = S) : S = h.current;
+      var E = u(function() {
+        var R = !1, w, g, k = function(B) {
+          if (!R) {
+            R = !0, w = B;
+            var N = _(B);
+            if (C !== void 0 && S.hasValue) {
+              var K = S.value;
+              if (C(K, N))
+                return g = K, K;
             }
-            return C = F, F;
+            return g = N, N;
           }
-          var O = v, $ = C;
-          if (n(O, N))
-            return $;
-          var A = _(N);
-          return w !== void 0 && w($, A) ? $ : (v = N, C = A, A);
-        }, k = b === void 0 ? null : b, P = function() {
-          return D(c());
-        }, M = k === null ? void 0 : function() {
-          return D(k());
+          var O = w, D = g;
+          if (n(O, B))
+            return D;
+          var A = _(B);
+          return C !== void 0 && C(D, A) ? D : (w = B, g = A, A);
+        }, P = b === void 0 ? null : b, M = function() {
+          return k(c());
+        }, $ = P === null ? void 0 : function() {
+          return k(P());
         };
-        return [P, M];
-      }, [c, b, _, w]), x = R[0], y = R[1], p = o(f, x, y);
+        return [M, $];
+      }, [c, b, _, C]), x = E[0], v = E[1], p = o(f, x, v);
       return a(function() {
-        E.hasValue = !0, E.value = p;
+        S.hasValue = !0, S.value = p;
       }, [p]), l(p), p;
     }
     et.useSyncExternalStoreWithSelector = d, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
@@ -1088,7 +1088,7 @@ function Gr() {
 (function(e) {
   process.env.NODE_ENV === "production" ? e.exports = qr() : e.exports = Gr();
 })(Vr);
-const Jr = /* @__PURE__ */ zr(st), { useSyncExternalStoreWithSelector: Zr } = Jr;
+const Jr = /* @__PURE__ */ Lr(st), { useSyncExternalStoreWithSelector: Zr } = Jr;
 function Ue(e, t = e.getState, r) {
   const n = Zr(
     e.subscribe,
@@ -1137,17 +1137,17 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
     e + r / 2 - a.x,
     t + n / 2 - a.y
   ];
-  let d, f, c, b, _, w, m, E, R, x;
-  const y = s / 1.1547;
+  let d, f, c, b, _, C, h, S, E, x;
+  const v = s / 1.1547;
   switch (o) {
     case "grid":
       d = Math.round(u / s) * s, f = Math.round(l / s) * s;
       break;
     case "hexH":
-      c = 2 * y, b = 3 * s, _ = Math.round(u / c) * c, m = Math.round(l / b) * b, w = _ > u ? _ - y : _ + y, E = m > l ? m - 1.5 * s : m + 1.5 * s, R = Math.hypot(_ - u, m - l), x = Math.hypot(w - u, E - l), R < x ? (d = _, f = m) : (d = w, f = E);
+      c = 2 * v, b = 3 * s, _ = Math.round(u / c) * c, h = Math.round(l / b) * b, C = _ > u ? _ - v : _ + v, S = h > l ? h - 1.5 * s : h + 1.5 * s, E = Math.hypot(_ - u, h - l), x = Math.hypot(C - u, S - l), E < x ? (d = _, f = h) : (d = C, f = S);
       break;
     case "hexV":
-      c = 3 * s, b = 2 * y, _ = Math.round(u / c) * c, m = Math.round(l / b) * b, w = _ > u ? _ - 1.5 * s : _ + 1.5 * s, E = m > l ? m - y : m + y, R = Math.hypot(_ - u, m - l), x = Math.hypot(w - u, E - l), R < x ? (d = _, f = m) : (d = w, f = E);
+      c = 3 * s, b = 2 * v, _ = Math.round(u / c) * c, h = Math.round(l / b) * b, C = _ > u ? _ - 1.5 * s : _ + 1.5 * s, S = h > l ? h - v : h + v, E = Math.hypot(_ - u, h - l), x = Math.hypot(C - u, S - l), E < x ? (d = _, f = h) : (d = C, f = S);
       break;
     default:
       d = e + r / 2, f = t + n / 2;
@@ -1156,7 +1156,7 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
     x: d + a.x - r / 2,
     y: f + a.y - n / 2
   };
-}, zt = [
+}, Lt = [
   "#037758",
   "#99092a",
   "#067070",
@@ -1187,13 +1187,13 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
   "#007a4b",
   "#bf0daa",
   "#af0ad8"
-], Lt = () => zt[Math.floor(Math.random() * zt.length)], rn = !1, ut = ({ wire: e, storeName: t, noSync: r = [], defaultValue: n }, o) => (s, a, u) => {
+], zt = () => Lt[Math.floor(Math.random() * Lt.length)], rn = !1, ut = ({ wire: e, storeName: t, noSync: r = [], defaultValue: n }, o) => (s, a, u) => {
   s({ ready: !1 });
   const l = [];
   (async () => {
     try {
       const _ = await e.call(`${t}_getValue`);
-      rn && console.log("init from peer with value", _), s((w) => ({ ...w, ..._ }));
+      rn && console.log("init from peer with value", _), s((C) => ({ ...C, ..._ }));
     } catch {
       n !== void 0 && s(n);
     }
@@ -1202,23 +1202,23 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
         `${t}_getValue`,
         () => Object.fromEntries(
           Object.entries(a()).filter(
-            ([_, w]) => typeof w != "function" && !r.includes(_)
+            ([_, C]) => typeof C != "function" && !r.includes(_)
           )
         ),
         { invoke: "first" }
       )
     ), l.push(
-      e.subscribe(`${t}_call`, ([_, w]) => {
-        c[_](...w);
+      e.subscribe(`${t}_call`, ([_, C]) => {
+        c[_](...C);
       })
     ), s({ ready: !0 });
   })();
   const f = o(s, a, u), c = { ...f }, b = Object.fromEntries(
     // Send the update message on all method calls
-    Object.entries(f).map(([_, w]) => typeof w == "function" && !_.startsWith("get") && !r.includes(_) ? [_, (...E) => {
-      const R = w(...E);
-      return e.publish(`${t}_call`, [_, E]), R;
-    }] : [_, w])
+    Object.entries(f).map(([_, C]) => typeof C == "function" && !_.startsWith("get") && !r.includes(_) ? [_, (...S) => {
+      const E = C(...S);
+      return e.publish(`${t}_call`, [_, S]), E;
+    }] : [_, C])
   );
   return b.unsub = () => {
     l.forEach((_) => _());
@@ -1253,7 +1253,7 @@ function Xe(e, t) {
       return !1;
   return !0;
 }
-const or = g.createContext(), nn = (e, t) => ({
+const or = m.createContext(), nn = (e, t) => ({
   items: {},
   getItems: () => t().items,
   setItems: (r) => e({ items: r }),
@@ -1333,7 +1333,7 @@ const or = g.createContext(), nn = (e, t) => ({
   setSessionInfo: (r) => e({ session: r }),
   updateSessionInfo: (r) => e((n) => ({ session: { ...n.session, ...r } }))
 }), Yt = ({ storeName: e, children: t, defaultValue: r }) => {
-  const { wire: n } = Be("room"), [o] = g.useState(
+  const { wire: n } = Be("room"), [o] = m.useState(
     () => Ne(
       ut({ wire: n, storeName: e, defaultValue: r }, (...s) => ({
         ...nn(...s),
@@ -1353,7 +1353,7 @@ const or = g.createContext(), nn = (e, t) => ({
     n.itemIds,
     n.items
   ]);
-  return g.useMemo(
+  return m.useMemo(
     () => e.map((n) => t[n]),
     [e, t]
   );
@@ -1362,14 +1362,14 @@ const or = g.createContext(), nn = (e, t) => ({
     a.items,
     a.itemIds,
     a.getItemList
-  ]), [n, o] = g.useState(r()), [, s] = g.useTransition();
-  return g.useEffect(() => {
+  ]), [n, o] = m.useState(r()), [, s] = m.useTransition();
+  return m.useEffect(() => {
     const a = r();
     s(() => {
       o(a);
     });
   }, [e, t, r]), n;
-}, sr = 5e4, ir = g.createContext(), un = (e, t) => ({
+}, sr = 5e4, ir = m.createContext(), un = (e, t) => ({
   config: {
     itemTemplates: {},
     actions: {},
@@ -1436,7 +1436,7 @@ const or = g.createContext(), nn = (e, t) => ({
     return !o || !r || o.top !== r.top || o.left !== r.left || o.width !== r.width || o.height !== r.height ? { selectionBox: r } : {};
   })
 }), Bt = ({ children: e }) => {
-  const [t] = g.useState(
+  const [t] = m.useState(
     () => Ne((...r) => ({
       ...un(...r),
       ...ln(...r),
@@ -1493,7 +1493,7 @@ function ft(e, t, r, n = 0) {
     [r, n, ...t]
   );
 }
-const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
+const Le = 100, Se = 1e3, mn = 0.8, Nt = ({
   x: e,
   y: t,
   scale: r,
@@ -1502,10 +1502,10 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
   boardSize: l
 }) => {
   const d = {
-    left: -n * r + ze * r,
-    right: u.width - o * r - ze * r,
-    top: -a * r + ze * r,
-    bottom: u.height - s * r - ze * r,
+    left: -n * r + Le * r,
+    right: u.width - o * r - Le * r,
+    top: -a * r + Le * r,
+    bottom: u.height - s * r - Le * r,
     maxRight: u.width - l * r,
     maxLeft: u.height - l * r
   }, f = Math.min(
@@ -1525,119 +1525,119 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
     r,
     n,
     o
-  ] = Z((m) => [
-    m.getBoardState,
-    m.updateBoardState,
-    m.config.itemExtent,
-    m.getConfiguration,
-    m.updateConfiguration
-  ]), s = g.useRef([0.1, 8]), [a] = se((m) => [m.getItemList]), u = g.useCallback(() => {
-    const { translateX: m, translateY: E, scale: R } = e();
-    return { translateX: m, translateY: E, scale: R };
-  }, [e]), l = g.useCallback(
-    (m) => {
-      const { itemExtent: E, boardWrapperRect: R, boardSize: x } = n(), y = e(), { translateX: p, translateY: h, scale: v } = {
-        ...y,
-        ...m(y)
+  ] = Z((h) => [
+    h.getBoardState,
+    h.updateBoardState,
+    h.config.itemExtent,
+    h.getConfiguration,
+    h.updateConfiguration
+  ]), s = m.useRef([0.1, 8]), [a] = se((h) => [h.getItemList]), u = m.useCallback(() => {
+    const { translateX: h, translateY: S, scale: E } = e();
+    return { translateX: h, translateY: S, scale: E };
+  }, [e]), l = m.useCallback(
+    (h) => {
+      const { itemExtent: S, boardWrapperRect: E, boardSize: x } = n(), v = e(), { translateX: p, translateY: R, scale: w } = {
+        ...v,
+        ...h(v)
       };
-      let C = v;
-      v !== y.scale && (C > s.current[1] && ([, C] = s.current), C < s.current[0] && ([C] = s.current));
-      let [D, k] = [p, h];
-      (p !== y.translateX || h !== y.translateY) && ([D, k] = Nt({
+      let g = w;
+      w !== v.scale && (g > s.current[1] && ([, g] = s.current), g < s.current[0] && ([g] = s.current));
+      let [k, P] = [p, R];
+      (p !== v.translateX || R !== v.translateY) && ([k, P] = Nt({
         x: p,
-        y: h,
-        scale: C,
-        itemExtent: E,
-        boardWrapperRect: R,
+        y: R,
+        scale: g,
+        itemExtent: S,
+        boardWrapperRect: E,
         boardSize: x
       })), t({
-        translateX: D,
-        translateY: k,
-        scale: C
+        translateX: k,
+        translateY: P,
+        scale: g
       });
     },
     [e, n, t]
-  ), d = g.useCallback(
-    (m, E) => {
-      const { itemExtent: R, boardWrapperRect: x, boardSize: y } = n();
-      let p = E;
+  ), d = m.useCallback(
+    (h, S) => {
+      const { itemExtent: E, boardWrapperRect: x, boardSize: v } = n();
+      let p = S;
       p || (p = {
         x: x.width / 2,
         y: x.height / 2
       });
-      const h = e();
-      let v = h.scale * m;
-      v > s.current[1] && ([, v] = s.current), v < s.current[0] && ([v] = s.current);
-      const C = p.x - x.left, D = p.y - x.top, k = C - (C - h.translateX) * v / h.scale, P = D - (D - h.translateY) * v / h.scale, [M, N] = Nt({
-        x: k,
-        y: P,
-        scale: v,
-        itemExtent: R,
+      const R = e();
+      let w = R.scale * h;
+      w > s.current[1] && ([, w] = s.current), w < s.current[0] && ([w] = s.current);
+      const g = p.x - x.left, k = p.y - x.top, P = g - (g - R.translateX) * w / R.scale, M = k - (k - R.translateY) * w / R.scale, [$, B] = Nt({
+        x: P,
+        y: M,
+        scale: w,
+        itemExtent: E,
         boardWrapperRect: x,
-        boardSize: y
+        boardSize: v
       });
       t({
-        scale: v,
-        translateX: M,
-        translateY: N
+        scale: w,
+        translateX: $,
+        translateY: B
       });
     },
     [e, n, t]
-  ), f = g.useCallback(
-    ({ left: m, top: E, width: R, height: x }) => {
-      const { boardWrapperRect: y } = n(), p = y.width / R, h = y.height / x, C = Math.min(p, h) * mn, D = y.width / 2 - (m + R / 2) * C, k = y.height / 2 - (E + x / 2) * C;
+  ), f = m.useCallback(
+    ({ left: h, top: S, width: E, height: x }) => {
+      const { boardWrapperRect: v } = n(), p = v.width / E, R = v.height / x, g = Math.min(p, R) * mn, k = v.width / 2 - (h + E / 2) * g, P = v.height / 2 - (S + x / 2) * g;
       t({
-        translateX: D,
-        translateY: k,
-        scale: C
+        translateX: k,
+        translateY: P,
+        scale: g
       });
     },
     [n, t]
-  ), c = g.useCallback(async () => {
+  ), c = m.useCallback(async () => {
     const {
-      itemExtent: { width: m, height: E },
-      boardWrapperRect: R
-    } = n(), x = R.width / m, y = R.height / E, p = Math.min(x, y);
+      itemExtent: { width: h, height: S },
+      boardWrapperRect: E
+    } = n(), x = E.width / h, v = E.height / S, p = Math.min(x, v);
     s.current = [
       Math.max(p * 0.5, 0.05),
       Math.max(p * 10, 10)
     ];
-  }, [n]), b = g.useCallback(() => {
-    const { boardWrapperRect: m, boardSize: E } = n(), { translateX: R, translateY: x, scale: y } = e();
+  }, [n]), b = m.useCallback(() => {
+    const { boardWrapperRect: h, boardSize: S } = n(), { translateX: E, translateY: x, scale: v } = e();
     return {
-      x: (m.width / 2 - R) / y - E / 2,
-      y: (m.height / 2 - x) / y - E / 2
+      x: (h.width / 2 - E) / v - S / 2,
+      y: (h.height / 2 - x) / v - S / 2
     };
-  }, [e, n]), _ = g.useCallback(() => {
-    const m = a(), { boardWrapperRect: E, boardWrapper: R, boardSize: x } = n(), { scale: y, translateX: p, translateY: h } = e(), { left: v, top: C, width: D, height: k } = nr(
-      m.map(({ id: M }) => M),
-      R
+  }, [e, n]), _ = m.useCallback(() => {
+    const h = a(), { boardWrapperRect: S, boardWrapper: E, boardSize: x } = n(), { scale: v, translateX: p, translateY: R } = e(), { left: w, top: g, width: k, height: P } = nr(
+      h.map(({ id: $ }) => $),
+      E
     ) || {
-      left: x / 2 * y + E.left + p,
-      top: x / 2 * y + E.top + h,
+      left: x / 2 * v + S.left + p,
+      top: x / 2 * v + S.top + R,
       width: 0,
       height: 0
-    }, P = {
-      left: (v - E.left - p) / y,
-      top: (C - E.top - h) / y,
-      width: D / y,
-      height: k / y
+    }, M = {
+      left: (w - S.left - p) / v,
+      top: (g - S.top - R) / v,
+      width: k / v,
+      height: P / v
     };
-    if (P.right = P.left + P.width, P.bottom = P.top + P.height, P.width < Se) {
-      const M = (Se - P.width) / 2;
-      P.left -= M, P.right += M, P.width = Se;
+    if (M.right = M.left + M.width, M.bottom = M.top + M.height, M.width < Se) {
+      const $ = (Se - M.width) / 2;
+      M.left -= $, M.right += $, M.width = Se;
     }
-    if (P.height < Se) {
-      const M = (Se - P.height) / 2;
-      P.top -= M, P.bottom += M, P.height = Se;
+    if (M.height < Se) {
+      const $ = (Se - M.height) / 2;
+      M.top -= $, M.bottom += $, M.height = Se;
     }
-    o({ itemExtent: P });
-  }, [e, n, a, o]), w = ft(
+    o({ itemExtent: M });
+  }, [e, n, a, o]), C = ft(
     () => _(),
     [_],
     200
   );
-  return g.useEffect(() => {
+  return m.useEffect(() => {
     r.left && c();
   }, [c, r]), {
     setDim: l,
@@ -1646,7 +1646,7 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
     zoomToCenter: d,
     zoomToExtent: f,
     getCenter: b,
-    updateItemExtent: w
+    updateItemExtent: C
   };
 }, gn = (e) => {
   const [t, r, n] = Z(
@@ -1655,12 +1655,12 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
       u,
       l
     ]
-  ), o = g.useCallback(
+  ), o = m.useCallback(
     (a) => (t(e, a), () => {
       r(e, a);
     }),
     [e, t, r]
-  ), s = g.useCallback(
+  ), s = m.useCallback(
     (a) => {
       n(e, a);
     },
@@ -1681,72 +1681,72 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
     moveItems: c,
     removeItemsById: b,
     getItemList: _,
-    insertItems: w,
-    setItemList: m
+    insertItems: C,
+    setItemList: h
   } = se(
     ({
       getItems: O,
-      getItemIds: $,
+      getItemIds: D,
       setItemIds: A,
-      updateItems: U,
-      moveItems: Y,
-      removeItemsById: W,
-      getItemList: J,
+      updateItems: X,
+      moveItems: z,
+      removeItemsById: F,
+      getItemList: H,
       insertItems: te,
       setItemList: re
     }) => ({
       getItems: O,
-      getItemIds: $,
+      getItemIds: D,
       setItemIds: A,
-      updateItems: U,
-      moveItems: Y,
-      removeItemsById: W,
-      getItemList: J,
+      updateItems: X,
+      moveItems: z,
+      removeItemsById: F,
+      getItemList: H,
       insertItems: te,
       setItemList: re
     })
-  ), E = g.useCallback(
-    (O, $) => {
-      let A = $;
-      typeof $ == "object" && (A = () => $);
-      const U = l().filter((J) => O.includes(J)), Y = u(), W = Object.fromEntries(
-        U.map((J) => [J, A({ ...Y[J] })])
+  ), S = m.useCallback(
+    (O, D) => {
+      let A = D;
+      typeof D == "object" && (A = () => D);
+      const X = l().filter((H) => O.includes(H)), z = u(), F = Object.fromEntries(
+        X.map((H) => [H, A({ ...z[H] })])
       );
-      f(W), r();
+      f(F), r();
     },
     [l, u, r, f]
-  ), R = g.useCallback(
+  ), E = m.useCallback(
     (O) => {
-      m(O), n(), r();
+      h(O), n(), r();
     },
-    [n, m, r]
-  ), x = g.useCallback(
-    (O, $) => {
-      E([O], $);
+    [n, h, r]
+  ), x = m.useCallback(
+    (O, D) => {
+      S([O], D);
     },
-    [E]
-  ), y = g.useCallback(
-    (O, $) => {
-      c(O, $), r();
+    [S]
+  ), v = m.useCallback(
+    (O, D) => {
+      c(O, D), r();
     },
     [c, r]
-  ), p = g.useCallback(
+  ), p = m.useCallback(
     (O) => {
-      const $ = l(), A = $.filter((Y) => !O.includes(Y)), U = $.filter(
-        (Y) => O.includes(Y)
+      const D = l(), A = D.filter((z) => !O.includes(z)), X = D.filter(
+        (z) => O.includes(z)
       );
-      d([...A, ...U]);
+      d([...A, ...X]);
     },
     [l, d]
-  ), h = g.useCallback(
-    (O, { type: $, size: A } = {}) => {
-      const { boardWrapper: U } = a(), Y = {}, W = u();
-      O.forEach((J) => {
-        const te = W[J], re = it(U, J);
+  ), R = m.useCallback(
+    (O, { type: D, size: A } = {}) => {
+      const { boardWrapper: X } = a(), z = {}, F = u();
+      O.forEach((H) => {
+        const te = F[H], re = it(X, H);
         if (!re)
           return;
         const ne = {
-          type: $ || "grid",
+          type: D || "grid",
           size: A || 1,
           offset: { x: 0, y: 0 },
           ...te.grid
@@ -1759,117 +1759,117 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
           },
           ne
         );
-        Y[J] = { ...te, ...V };
-      }), f(Y);
+        z[H] = { ...te, ...V };
+      }), f(z);
     },
     [a, u, f]
-  ), v = g.useCallback(
-    (O, $) => {
-      p(O), E(O, (A) => {
-        const U = { ...A };
-        return delete U.moving, U;
-      }), h(O, $), e(O), r();
+  ), w = m.useCallback(
+    (O, D) => {
+      p(O), S(O, (A) => {
+        const X = { ...A };
+        return delete X.moving, X;
+      }), R(O, D), e(O), r();
     },
     [
-      E,
+      S,
       e,
       p,
-      h,
+      R,
       r
     ]
-  ), C = g.useCallback(
+  ), g = m.useCallback(
     (O) => {
       d(O);
     },
     [d]
-  ), D = g.useCallback(
+  ), k = m.useCallback(
     (O) => {
-      const $ = l(), A = $.filter(
-        (Y) => O.includes(Y)
-      ), U = $.map((Y) => O.includes(Y) ? A.pop() : Y);
-      d(U), o();
+      const D = l(), A = D.filter(
+        (z) => O.includes(z)
+      ), X = D.map((z) => O.includes(z) ? A.pop() : z);
+      d(X), o();
     },
     [l, o, d]
-  ), k = g.useCallback(
-    (O, $) => {
-      const A = u(), U = O.map((V) => A[V]), Y = $.map((V) => A[V]), W = $.reduce((V, ee) => (V[ee] = U.shift(), V), {}), J = Y.reduce((V, ee) => {
-        const le = W[ee.id], he = {
+  ), P = m.useCallback(
+    (O, D) => {
+      const A = u(), X = O.map((V) => A[V]), z = D.map((V) => A[V]), F = D.reduce((V, ee) => (V[ee] = X.shift(), V), {}), H = z.reduce((V, ee) => {
+        const fe = F[ee.id], he = {
           ...ee,
-          x: le.x,
-          y: le.y
+          x: fe.x,
+          y: fe.y
         };
         return V[ee.id] = he, V;
       }, {});
-      f(J);
-      const te = O.reduce((V, ee) => (V[ee] = $.shift(), V), {}), ne = l().map((V) => O.includes(V) ? te[V] : V);
+      f(H);
+      const te = O.reduce((V, ee) => (V[ee] = D.shift(), V), {}), ne = l().map((V) => O.includes(V) ? te[V] : V);
       d(ne);
     },
     [u, f, l, d]
-  ), P = g.useCallback(
-    (O, $) => {
-      const A = t(), U = O.map((Y, W) => !Y.x || !Y.y ? { ...Y, x: A.x + 2 * W, y: A.y + 2 * W } : Y);
-      w(U, $), r();
+  ), M = m.useCallback(
+    (O, D) => {
+      const A = t(), X = O.map((z, F) => !z.x || !z.y ? { ...z, x: A.x + 2 * F, y: A.y + 2 * F } : z);
+      C(X, D), r();
     },
-    [t, w, r]
-  ), M = g.useCallback(
-    (O, $) => {
-      P([O], $);
+    [t, C, r]
+  ), $ = m.useCallback(
+    (O, D) => {
+      M([O], D);
     },
-    [P]
-  ), N = g.useCallback(
+    [M]
+  ), B = m.useCallback(
     (O) => {
       s(O), b(O);
     },
     [s, b]
-  ), F = g.useCallback(
+  ), N = m.useCallback(
     (O) => {
-      const $ = u();
-      return O.map((A) => $[A]);
+      const D = u();
+      return O.map((A) => D[A]);
     },
     [u]
-  ), K = g.useCallback(
-    ({ target: O, clientX: $, clientY: A }, { returnLocked: U = !1, passLocked: Y = !1 } = {}) => {
+  ), K = m.useCallback(
+    ({ target: O, clientX: D, clientY: A }, { returnLocked: X = !1, passLocked: z = !1 } = {}) => {
       if (["INPUT", "TEXTAREA"].includes(O.tagName))
         return null;
-      const W = Te(O, "item");
-      if (W) {
-        if (_e(W, "selected"))
-          return W;
-        if (!Y && _e(W, "locked") && !_e(O, "passthrough"))
-          return U ? W : null;
+      const F = Te(O, "item");
+      if (F) {
+        if (_e(F, "selected"))
+          return F;
+        if (!z && _e(F, "locked") && !_e(O, "passthrough"))
+          return X ? F : null;
         if (_e(O, "passthrough")) {
-          const J = l(), { boardWrapper: te } = a(), re = J.reduce((ne, V) => {
-            const ee = it(te, V), le = ee.getBoundingClientRect();
-            return rr({ x: $, y: A }, le) && ne.unshift(ee), ne;
+          const H = l(), { boardWrapper: te } = a(), re = H.reduce((ne, V) => {
+            const ee = it(te, V), fe = ee.getBoundingClientRect();
+            return rr({ x: D, y: A }, fe) && ne.unshift(ee), ne;
           }, []);
           for (let ne = 0; ne < re.length; ne += 1) {
             const V = re[ne];
-            if (V !== W && (Y || !_e(V, "locked")))
+            if (V !== F && (z || !_e(V, "locked")))
               return V;
           }
           return null;
         }
       }
-      return W;
+      return F;
     },
     [a, l]
   );
   return {
     putItemsOnTop: p,
-    batchUpdateItems: E,
-    updateItemOrder: C,
-    moveItems: y,
-    placeItems: v,
+    batchUpdateItems: S,
+    updateItemOrder: g,
+    moveItems: v,
+    placeItems: w,
     updateItem: x,
-    swapItems: k,
-    reverseItemsOrder: D,
-    setItemList: R,
-    pushItem: M,
-    pushItems: P,
-    removeItems: N,
+    swapItems: P,
+    reverseItemsOrder: k,
+    setItemList: E,
+    pushItem: $,
+    pushItems: M,
+    removeItems: B,
     getItemList: _,
     findElementUnderPointer: K,
-    getItems: F
+    getItems: N
   };
 };
 var hn = function e(t, r) {
@@ -1954,17 +1954,17 @@ const yn = (e, t) => {
     c.config.itemTemplates,
     c.selection,
     c.getSelection
-  ]), [s, a] = g.useState([]), u = g.useRef(!1), [, l] = g.useTransition();
-  g.useEffect(() => (u.current = !0, () => {
+  ]), [s, a] = m.useState([]), u = m.useRef(!1), [, l] = m.useTransition();
+  m.useEffect(() => (u.current = !0, () => {
     u.current = !1;
   }), []);
-  const d = g.useCallback(
+  const d = m.useCallback(
     (c) => {
       const b = t();
       if (c)
-        return [c, c.map((w) => b[w])];
+        return [c, c.map((C) => b[C])];
       const _ = o();
-      return [_, _.map((w) => b[w])];
+      return [_, _.map((C) => b[C])];
     },
     [t, o]
   ), f = Jt(() => {
@@ -1972,10 +1972,10 @@ const yn = (e, t) => {
     if (c.length > 0) {
       if (!u.current)
         return;
-      const _ = b.reduce((w, m) => {
-        const E = Ut(m, r);
-        return w.filter(
-          (R) => E.some((x) => hn(R, x))
+      const _ = b.reduce((C, h) => {
+        const S = Ut(h, r);
+        return C.filter(
+          (E) => S.some((x) => hn(E, x))
         );
       }, Ut(b[0], r));
       l(() => {
@@ -1998,13 +1998,13 @@ const yn = (e, t) => {
   return e;
 };
 let me = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce((t, r) => (r &= 63, r < 36 ? t += r.toString(36) : r < 62 ? t += (r - 26).toString(36).toUpperCase() : r > 62 ? t += "-" : t += "_", t), "");
-const ar = g.createContext(), at = (e) => {
+const ar = m.createContext(), at = (e) => {
   localStorage.setItem("user", JSON.stringify(e));
 }, Sn = () => {
   if (localStorage.user) {
     const t = {
       name: "Player",
-      color: Lt(),
+      color: zt(),
       uid: me(),
       ...JSON.parse(localStorage.user)
     };
@@ -2012,7 +2012,7 @@ const ar = g.createContext(), at = (e) => {
   }
   const e = {
     name: "Player",
-    color: Lt(),
+    color: zt(),
     uid: me()
   };
   return at(e), e;
@@ -2069,8 +2069,8 @@ const ar = g.createContext(), at = (e) => {
     return delete n[t], { cursors: n };
   })
 }), cr = ({ storeName: e, children: t }) => {
-  const { wire: r, isMaster: n } = Be("room"), [o, s] = g.useState(null), [a, u] = g.useState(!1), l = g.useRef(!1);
-  return g.useEffect(() => {
+  const { wire: r, isMaster: n } = Be("room"), [o, s] = m.useState(null), [a, u] = m.useState(!1), l = m.useRef(!1);
+  return m.useEffect(() => {
     let d = !0;
     const f = [];
     if (!o && !l.current)
@@ -2087,18 +2087,18 @@ const ar = g.createContext(), at = (e) => {
                 "electSpaceMaster"
               ]
             },
-            (...w) => ({
-              ..._n(r.userId)(...w),
-              ...bn(...w)
+            (...C) => ({
+              ..._n(r.userId)(...C),
+              ...bn(...C)
             })
           )
-        ), _ = b.subscribe((w) => {
-          w.ready && (_(), d && s(b));
+        ), _ = b.subscribe((C) => {
+          C.ready && (_(), d && s(b));
         });
       })(), () => {
         d = !1, l.current = !1, f.forEach((b) => b());
       };
-  }, [o, e, r, r.userId]), g.useEffect(() => {
+  }, [o, e, r, r.userId]), m.useEffect(() => {
     if (o)
       return o.getState().addUser({
         ...Sn(),
@@ -2106,7 +2106,7 @@ const ar = g.createContext(), at = (e) => {
       }), u(!0), () => {
         o.getState().removeUser(r.userId);
       };
-  }, [n, o, r]), g.useEffect(() => {
+  }, [n, o, r]), m.useEffect(() => {
     if (o) {
       const d = r.subscribe("userLeave", (f) => {
         o.getState().removeUser(f);
@@ -2115,7 +2115,7 @@ const ar = g.createContext(), at = (e) => {
         d();
       };
     }
-  }, [n, o, r]), g.useEffect(() => {
+  }, [n, o, r]), m.useEffect(() => {
     n && o && o.getState().updateCurrentUser({ isMaster: n });
   }, [n, o, r]), a ? /* @__PURE__ */ T(ar.Provider, { value: o, children: t }) : null;
 }, ge = (e, t) => {
@@ -2128,7 +2128,7 @@ const ar = g.createContext(), at = (e) => {
     u.users,
     u.updateCurrentUser,
     u.joinSpace
-  ]), s = g.useMemo(() => Object.values(r), [r]), a = g.useMemo(() => {
+  ]), s = m.useMemo(() => Object.values(r), [r]), a = m.useMemo(() => {
     const { space: u } = t;
     return s.filter(({ space: l }) => l === u);
   }, [t, s]);
@@ -2143,7 +2143,7 @@ const ar = g.createContext(), at = (e) => {
 }, ns = () => {
   const [e, t, r] = se(
     (o) => [o.boardConfig, o.getBoardConfig, o.setBoardConfig]
-  ), n = g.useCallback(
+  ), n = m.useCallback(
     (o) => {
       let s = o;
       typeof o == "object" && (s = () => o);
@@ -2164,7 +2164,7 @@ const ar = g.createContext(), at = (e) => {
     o.session
   ]);
   return { getSessionInfo: e, setSessionInfo: t, sessionInfo: n, updateSessionInfo: r };
-}, ur = g.createContext(), En = ({ user: { name: e, uid: t, color: r }, content: n }) => ({
+}, ur = m.createContext(), En = ({ user: { name: e, uid: t, color: r }, content: n }) => ({
   type: "message",
   user: { name: e, uid: t, color: r },
   content: n,
@@ -2196,7 +2196,7 @@ const ar = g.createContext(), at = (e) => {
   children: t,
   defaultValue: r = []
 }) => {
-  const { wire: n } = Be("room"), [o] = g.useState(
+  const { wire: n } = Be("room"), [o] = m.useState(
     () => Ne(
       ut(
         { wire: n, storeName: e, defaultValue: r, noSync: ["sendMessage"] },
@@ -2217,10 +2217,10 @@ const ar = g.createContext(), at = (e) => {
     a.setMessages,
     a.sendMessage
   ]);
-  g.useEffect(() => {
+  m.useEffect(() => {
     r.length && e();
   }, [r, e]);
-  const s = g.useCallback(
+  const s = m.useCallback(
     (a) => {
       o(t, a);
     },
@@ -2229,7 +2229,7 @@ const ar = g.createContext(), at = (e) => {
   return { messages: r, setMessages: n, sendMessage: s };
 }, Wt = ({ children: e, session: t }) => {
   const r = ge((n) => n.joinSpace);
-  return g.useEffect(() => (r(t), () => {
+  return m.useEffect(() => (r(t), () => {
     r(null);
   }), [r, t]), e;
 }, as = ({
@@ -2241,7 +2241,7 @@ const ar = g.createContext(), at = (e) => {
   LoadingComponent: s,
   ...a
 }) => {
-  const [u] = g.useState(t || me()), [l] = g.useState(r || me()), [d] = g.useState(() => ({
+  const [u] = m.useState(t || me()), [l] = m.useState(r || me()), [d] = m.useState(() => ({
     itemIds: n.map(({ id: c }) => c),
     items: Object.fromEntries(n.map((c) => [c.id, c]))
   }));
@@ -2284,7 +2284,7 @@ const ar = g.createContext(), at = (e) => {
     }
   );
 }, cs = ({ socket: e, room: t, children: r, LoadingComponent: n }) => {
-  const [o] = g.useState(t || me());
+  const [o] = m.useState(t || me());
   return /* @__PURE__ */ T(
     er,
     {
@@ -2313,7 +2313,7 @@ const ar = g.createContext(), at = (e) => {
 }, Ft = ([e, t], [r, n]) => {
   const o = Math.abs(e - r), s = Math.abs(t - n);
   return Math.hypot(o, s);
-}, de = () => {
+}, pe = () => {
 }, Tn = (e) => (t) => {
   const { event: r } = t;
   return r.isPropagationStopped() ? null : e(t);
@@ -2336,157 +2336,158 @@ class Pn {
 }
 const ie = new Pn(), We = ({
   children: e,
-  onDrag: t = de,
-  onDragStart: r = de,
-  onDragEnd: n = de,
-  onPan: o = de,
-  onTap: s = de,
-  onLongTap: a = de,
-  onDoubleTap: u = de,
+  onDrag: t = pe,
+  onDragStart: r = pe,
+  onDragEnd: n = pe,
+  onPan: o = pe,
+  onTap: s = pe,
+  onLongTap: a = pe,
+  onDoubleTap: u = pe,
   onZoom: l,
   mainAction: d = "drag"
 }) => {
-  const f = g.useRef(null), c = g.useRef({
+  const f = m.useRef(null), c = m.useRef({
     moving: !1,
     pointers: {},
     mainPointer: void 0
-  }), b = (R) => {
+  }), b = (E) => {
     const {
       deltaX: x,
-      deltaY: y,
+      deltaY: v,
       clientX: p,
-      clientY: h,
-      deltaMode: v,
-      ctrlKey: C,
-      altKey: D,
-      metaKey: k,
-      target: P
-    } = R;
-    if (!(D || C && !tt()))
-      if (tt() && !C)
+      clientY: R,
+      deltaMode: w,
+      ctrlKey: g,
+      altKey: k,
+      metaKey: P,
+      target: M
+    } = E;
+    if (!(k || g && !tt()))
+      if (tt() && !g)
         ie.add(o, {
           deltaX: -2 * x,
-          deltaY: -2 * y,
+          deltaY: -2 * v,
           button: 1,
-          ctrlKey: C,
-          metaKey: k,
-          target: P,
-          event: R
+          ctrlKey: g,
+          metaKey: P,
+          target: M,
+          event: E
         });
       else {
-        if (l === void 0 || !y)
+        if (l === void 0 || !v)
           return;
-        let M = y;
-        switch (v) {
+        let $ = v;
+        switch (w) {
           case 1:
-            M *= In;
+            $ *= In;
             break;
           case 2:
-            M *= On;
+            $ *= On;
             break;
         }
-        tt() && (M *= 2), ie.add(l, { scale: M, clientX: p, clientY: h, event: R });
+        tt() && ($ *= 2), ie.add(l, { scale: $, clientX: p, clientY: R, event: E });
       }
-  }, _ = (R) => {
+  }, _ = (E) => {
     const {
       target: x,
-      button: y,
+      button: v,
       clientX: p,
-      clientY: h,
-      pointerId: v,
-      altKey: C,
-      ctrlKey: D,
-      metaKey: k,
-      isPrimary: P
-    } = R;
-    if (c.current.pointers[v] = { clientX: p, clientY: h }, P && (c.current.mainPointer = void 0), c.current.mainPointer !== void 0) {
-      if (c.current.mainPointer !== v)
+      clientY: R,
+      pointerId: w,
+      altKey: g,
+      ctrlKey: k,
+      metaKey: P,
+      isPrimary: M
+    } = E;
+    if (c.current.pointers[w] = { clientX: p, clientY: R }, M && (c.current.mainPointer = void 0), c.current.mainPointer !== void 0) {
+      if (c.current.mainPointer !== w)
         try {
-          const { clientX: M, clientY: N } = Vt(
+          const { clientX: $, clientY: B } = Vt(
             c.current.pointers,
-            v
-          ), F = (M + p) / 2, K = (N + h) / 2, O = Ft(
-            [M, N],
-            [p, h]
+            w
+          ), N = ($ + p) / 2, K = (B + R) / 2, O = Ft(
+            [$, B],
+            [p, R]
           );
           Object.assign(c.current, {
             pressed: !0,
             moving: !1,
             gestureStart: !1,
             startX: p,
-            startY: h,
-            prevX: F,
+            startY: R,
+            prevX: N,
             prevY: K,
             startDistance: O,
             prevDistance: O
           });
-        } catch (M) {
-          console.log("Error while getting other pointer. Ignoring", M), c.current.mainPointer;
+        } catch ($) {
+          console.log("Error while getting other pointer. Ignoring", $), c.current.mainPointer;
         }
       return;
     }
-    c.current.mainPointer = v, Object.assign(c.current, {
+    c.current.mainPointer = w, Object.assign(c.current, {
       pressed: !0,
       moving: !1,
       gestureStart: !1,
       startX: p,
-      startY: h,
+      startY: R,
       prevX: p,
-      prevY: h,
-      currentButton: y,
-      pointerDownEvent: R,
+      prevY: R,
+      currentButton: v,
+      pointerDownEvent: E,
       target: x,
       timeStart: Date.now(),
       longTapTimeout: setTimeout(async () => {
         c.current.noTap = !0, ie.add(a, {
           clientX: p,
-          clientY: h,
-          altKey: C,
-          ctrlKey: D,
-          metaKey: k,
+          clientY: R,
+          altKey: g,
+          ctrlKey: k,
+          metaKey: P,
           target: x,
-          event: R
+          event: E
         });
       }, 750)
     });
     try {
-      x.setPointerCapture(v);
-    } catch (M) {
-      console.log("Fail to capture pointer", M);
+      x.setPointerCapture(w);
+    } catch ($) {
+      console.log("Fail to capture pointer", $);
     }
-  }, w = (R) => {
+  }, C = (E) => {
     if (c.current.pressed) {
       const {
         pointerId: x,
-        clientX: y,
+        clientX: v,
         clientY: p,
-        altKey: h,
-        ctrlKey: v,
-        metaKey: C,
-        buttons: D,
-        pointerType: k
-      } = R;
+        altKey: R,
+        shiftKey: w,
+        ctrlKey: g,
+        metaKey: k,
+        buttons: P,
+        pointerType: M
+      } = E;
       c.current.pointers[x] = {
-        clientX: y,
+        clientX: v,
         clientY: p
       }, c.current.moving = !0;
-      const P = Object.keys(c.current.pointers).length === 2;
-      let M, N, F;
-      if (P) {
-        const { clientX: A, clientY: U } = Vt(
+      const $ = Object.keys(c.current.pointers).length === 2;
+      let B, N, K;
+      if ($) {
+        const { clientX: X, clientY: z } = Vt(
           c.current.pointers,
           x
         );
-        M = (A + y) / 2, N = (U + p) / 2, F = Ft(
-          [A, U],
-          [y, p]
+        B = (X + v) / 2, N = (z + p) / 2, K = Ft(
+          [X, z],
+          [v, p]
         );
       } else
-        M = y, N = p;
-      let K = h || v || C || D !== 1;
-      d !== "drag" && (K = !K);
-      const O = k !== "touch" ? !K : !P, $ = k !== "touch" ? K : P;
-      if (O) {
+        B = v, N = p;
+      let O = w || R || g || k || P !== 1;
+      d !== "drag" && (O = !O);
+      const D = M !== "touch" ? !O : !$, A = M !== "touch" ? O : $;
+      if (D) {
         c.current.gestureStart || (f.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout), ie.add(r, {
           deltaX: 0,
           deltaY: 0,
@@ -2497,57 +2498,69 @@ const ie = new Pn(), We = ({
           distanceX: 0,
           distanceY: 0,
           button: c.current.currentButton,
-          altKey: h,
-          ctrlKey: v,
-          metaKey: C,
+          altKey: R,
+          shiftKey: w,
+          ctrlKey: g,
+          metaKey: k,
           target: c.current.target,
           event: c.current.pointerDownEvent
         }));
-        const A = M - c.current.prevX, U = N - c.current.prevY, Y = M - c.current.startX, W = N - c.current.startY;
+        const X = B - c.current.prevX, z = N - c.current.prevY, F = B - c.current.startX, H = N - c.current.startY;
         ie.add(t, {
-          deltaX: A,
-          deltaY: U,
+          deltaX: X,
+          deltaY: z,
           startX: c.current.startX,
           startY: c.current.startY,
-          clientX: M,
+          clientX: B,
           clientY: N,
-          distanceX: Y,
-          distanceY: W,
+          distanceX: F,
+          distanceY: H,
           button: c.current.currentButton,
-          altKey: h,
-          ctrlKey: v,
-          metaKey: C,
+          altKey: R,
+          shiftKey: w,
+          ctrlKey: g,
+          metaKey: k,
           target: c.current.target,
-          event: R
+          event: E
         });
       }
-      if ($) {
+      if (A) {
         c.current.gestureStart || (f.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout));
-        const A = M - c.current.prevX, U = N - c.current.prevY, { target: Y } = c.current;
+        const X = B - c.current.prevX, z = N - c.current.prevY, { target: F } = c.current;
         if (ie.add(o, {
-          deltaX: A,
-          deltaY: U,
+          deltaX: X,
+          deltaY: z,
           button: c.current.currentButton,
-          altKey: h,
-          ctrlKey: v,
-          metaKey: C,
-          target: Y,
-          event: R
-        }), F !== c.current.prevDistance && l) {
-          const W = c.current.prevDistance - F;
-          Math.abs(W) > 0 && (ie.add(l, {
-            scale: W * 3,
-            clientX: M,
+          altKey: R,
+          shiftKey: w,
+          ctrlKey: g,
+          metaKey: k,
+          target: F,
+          event: E
+        }), K !== c.current.prevDistance && l) {
+          const H = c.current.prevDistance - K;
+          Math.abs(H) > 0 && (ie.add(l, {
+            scale: H * 3,
+            clientX: B,
             clientY: N,
-            event: R
-          }), c.current.prevDistance = F);
+            event: E
+          }), c.current.prevDistance = K);
         }
       }
-      c.current.prevX = M, c.current.prevY = N;
+      c.current.prevX = B, c.current.prevY = N;
     }
-  }, m = (R) => {
-    const { clientX: x, clientY: y, altKey: p, ctrlKey: h, metaKey: v, target: C, pointerId: D } = R;
-    if (c.current.pointers[D] && (delete c.current.pointers[D], c.current.mainPointer === D)) {
+  }, h = (E) => {
+    const {
+      clientX: x,
+      clientY: v,
+      altKey: p,
+      shiftKey: R,
+      ctrlKey: w,
+      metaKey: g,
+      target: k,
+      pointerId: P
+    } = E;
+    if (c.current.pointers[P] && (delete c.current.pointers[P], c.current.mainPointer === P)) {
       for (; Object.keys(c.current.pointers).length > 0; ) {
         c.current.mainPointer = Number(
           Object.keys(c.current.pointers)[0]
@@ -2555,36 +2568,38 @@ const ie = new Pn(), We = ({
         try {
           c.current.target.setPointerCapture(c.current.mainPointer);
           return;
-        } catch (k) {
-          console.log("Fails to set pointer capture", k), c.current.mainPointer = void 0, delete c.current.pointers[Object.keys(c.current.pointers)[0]];
+        } catch (M) {
+          console.log("Fails to set pointer capture", M), c.current.mainPointer = void 0, delete c.current.pointers[Object.keys(c.current.pointers)[0]];
         }
       }
       if (c.current.mainPointer = void 0, c.current.pressed = !1, clearTimeout(c.current.longTapTimeout), c.current.moving)
         c.current.moving = !1, ie.add(n, {
           deltaX: x - c.current.prevX,
-          deltaY: y - c.current.prevY,
+          deltaY: v - c.current.prevY,
           startX: c.current.startX,
           startY: c.current.startY,
           clientX: x,
-          clientY: y,
+          clientY: v,
           distanceX: x - c.current.startX,
-          distanceY: y - c.current.startY,
+          distanceY: v - c.current.startY,
           button: c.current.currentButton,
           altKey: p,
-          ctrlKey: h,
-          metaKey: v,
-          event: R
+          shiftKey: R,
+          ctrlKey: w,
+          metaKey: g,
+          event: E
         }), f.current.style.cursor = "auto";
       else {
-        const k = Date.now();
-        c.current.noTap ? c.current.noTap = !1 : c.current.timeStart - k < 300 && ie.add(s, {
+        const M = Date.now();
+        c.current.noTap ? c.current.noTap = !1 : c.current.timeStart - M < 300 && ie.add(s, {
           clientX: x,
-          clientY: y,
+          clientY: v,
           altKey: p,
-          ctrlKey: h,
-          metaKey: v,
-          target: C,
-          event: R
+          shiftKey: R,
+          ctrlKey: w,
+          metaKey: g,
+          target: k,
+          event: E
         });
       }
     }
@@ -2594,21 +2609,22 @@ const ie = new Pn(), We = ({
     {
       onWheel: b,
       onPointerDown: _,
-      onPointerMove: w,
-      onPointerUp: m,
-      onPointerOut: m,
-      onPointerLeave: m,
-      onPointerCancel: m,
-      onDoubleClick: (R) => {
-        const { clientX: x, clientY: y, altKey: p, ctrlKey: h, metaKey: v, target: C } = R;
+      onPointerMove: C,
+      onPointerUp: h,
+      onPointerOut: h,
+      onPointerLeave: h,
+      onPointerCancel: h,
+      onDoubleClick: (E) => {
+        const { clientX: x, clientY: v, altKey: p, shiftKey: R, ctrlKey: w, metaKey: g, target: k } = E;
         ie.add(u, {
           clientX: x,
-          clientY: y,
+          clientY: v,
           altKey: p,
-          ctrlKey: h,
-          metaKey: v,
-          target: C,
-          event: R
+          shiftKey: R,
+          ctrlKey: w,
+          metaKey: g,
+          target: k,
+          event: E
         });
       },
       style: { touchAction: "none" },
@@ -2627,11 +2643,11 @@ const ie = new Pn(), We = ({
     });
   }, children: /* @__PURE__ */ T("div", { ...t }) });
 };
-let Mn = { data: "" }, jn = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || Mn, Dn = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, $n = /\/\*[^]*?\*\/|  +/g, Kt = /\n+/g, fe = (e, t) => {
+let Mn = { data: "" }, jn = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || Mn, Dn = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, $n = /\/\*[^]*?\*\/|  +/g, Kt = /\n+/g, de = (e, t) => {
   let r = "", n = "", o = "";
   for (let s in e) {
     let a = e[s];
-    s[0] == "@" ? s[1] == "i" ? r = s + " " + a + ";" : n += s[1] == "f" ? fe(a, s) : s + "{" + fe(a, s[1] == "k" ? "" : t) + "}" : typeof a == "object" ? n += fe(a, t ? t.replace(/([^,])+/g, (u) => s.replace(/(^:.*)|([^,])+/g, (l) => /&/.test(l) ? l.replace(/&/g, u) : u ? u + " " + l : l)) : s) : a != null && (s = /^--/.test(s) ? s : s.replace(/[A-Z]/g, "-$&").toLowerCase(), o += fe.p ? fe.p(s, a) : s + ":" + a + ";");
+    s[0] == "@" ? s[1] == "i" ? r = s + " " + a + ";" : n += s[1] == "f" ? de(a, s) : s + "{" + de(a, s[1] == "k" ? "" : t) + "}" : typeof a == "object" ? n += de(a, t ? t.replace(/([^,])+/g, (u) => s.replace(/(^:.*)|([^,])+/g, (l) => /&/.test(l) ? l.replace(/&/g, u) : u ? u + " " + l : l)) : s) : a != null && (s = /^--/.test(s) ? s : s.replace(/[A-Z]/g, "-$&").toLowerCase(), o += de.p ? de.p(s, a) : s + ":" + a + ";");
   }
   return r + (t && o ? t + "{" + o + "}" : o) + n;
 }, ce = {}, lr = (e) => {
@@ -2656,28 +2672,28 @@ let Mn = { data: "" }, jn = (e) => typeof window == "object" ? ((e ? e.querySele
         f[4] ? b.shift() : f[3] ? (c = f[3].replace(Kt, " ").trim(), b.unshift(b[0][c] = b[0][c] || {})) : b[0][f[1]] = f[2].replace(Kt, " ").trim();
       return b[0];
     })(e);
-    ce[a] = fe(o ? { ["@keyframes " + a]: l } : l, r ? "" : "." + a);
+    ce[a] = de(o ? { ["@keyframes " + a]: l } : l, r ? "" : "." + a);
   }
   let u = r && ce.g ? ce.g : null;
   return r && (ce.g = ce[a]), ((l, d, f, c) => {
     c ? d.data = d.data.replace(c, l) : d.data.indexOf(l) === -1 && (d.data = f ? l + d.data : d.data + l);
   })(ce[a], t, n, u), a;
-}, zn = (e, t, r) => e.reduce((n, o, s) => {
+}, Ln = (e, t, r) => e.reduce((n, o, s) => {
   let a = t[s];
   if (a && a.call) {
     let u = a(r), l = u && u.props && u.props.className || /^go/.test(u) && u;
-    a = l ? "." + l : u && typeof u == "object" ? u.props ? "" : fe(u, "") : u === !1 ? "" : u;
+    a = l ? "." + l : u && typeof u == "object" ? u.props ? "" : de(u, "") : u === !1 ? "" : u;
   }
   return n + o + (a ?? "");
 }, "");
-function H(e) {
+function q(e) {
   let t = this || {}, r = e.call ? e(t.p) : e;
-  return An(r.unshift ? r.raw ? zn(r, [].slice.call(arguments, 1), t.p) : r.reduce((n, o) => Object.assign(n, o && o.call ? o(t.p) : o), {}) : r, jn(t.target), t.g, t.o, t.k);
+  return An(r.unshift ? r.raw ? Ln(r, [].slice.call(arguments, 1), t.p) : r.reduce((n, o) => Object.assign(n, o && o.call ? o(t.p) : o), {}) : r, jn(t.target), t.g, t.o, t.k);
 }
-H.bind({ g: 1 });
-H.bind({ k: 1 });
-function Ln(e, t, r, n) {
-  fe.p = t;
+q.bind({ g: 1 });
+q.bind({ k: 1 });
+function zn(e, t, r, n) {
+  de.p = t;
 }
 var Yn = function e(t, r) {
   if (t === r)
@@ -2714,36 +2730,36 @@ var Yn = function e(t, r) {
   }
   return t !== t && r !== r;
 };
-const Bn = H`
+const Bn = q`
   display: inline-block;
   transition: transform 150ms;
   user-select: none;
   padding: 2px;
   box-sizing: border-box;
-`, Nn = H`
+`, Nn = q`
   border: 2px dashed #db5034;
   padding: 0px;
   cursor: pointer;
-`, xe = H`
+`, xe = q`
   position: absolute;
   width: 0px;
   height: 0px;
-`, Un = H`
+`, Un = q`
   top: 0;
   left: 0;
-`, Xn = H`
+`, Xn = q`
   top: 0;
   right: 0;
-`, Wn = H`
+`, Wn = q`
   bottom: 0;
   left: 0;
-`, Vn = H`
+`, Vn = q`
   bottom: 0;
   right: 0;
-`, Fn = H`
+`, Fn = q`
   top: 50%;
   left: 50%;
-`, nt = H`
+`, nt = q`
   position: absolute;
 
   width: 10px;
@@ -2751,22 +2767,22 @@ const Bn = H`
   border: 2px solid #db5034;
   background-color: #db5034;
   cursor: move;
-`, Kn = H`
+`, Kn = q`
   cursor: ew-resize;
   right: -6px;
   top: calc(50% - 5px);
-`, Hn = H`
+`, Hn = q`
   cursor: ns-resize;
   bottom: -6px;
   left: calc(50% - 5px);
-`, qn = H`
+`, qn = q`
   cursor: nwse-resize;
   bottom: -6px;
   right: -6px;
-`, Gn = ({ onReload: e }) => /* @__PURE__ */ ue(
+`, Gn = ({ onReload: e }) => /* @__PURE__ */ le(
   "div",
   {
-    className: `syncboard-error-item ${H({
+    className: `syncboard-error-item ${q({
       width: "100px",
       display: "flex",
       flexDirection: "column",
@@ -2780,7 +2796,7 @@ const Bn = H`
     ]
   }
 );
-class Jn extends g.Component {
+class Jn extends m.Component {
   constructor(t) {
     super(t), this.state = { hasError: !1, itemId: t.itemId }, this.onReload = this.onReload.bind(this);
   }
@@ -2841,61 +2857,61 @@ const Zn = (e) => {
   itemMap: d,
   showResizeHandle: f = !0
 }) => {
-  var v;
-  const c = g.useRef(null), {
+  var w;
+  const c = m.useRef(null), {
     component: b = () => null,
     resizeDirections: _ = eo,
-    resize: w = Qn
-  } = d[t], m = g.useCallback(
-    (C) => e(n, C),
+    resize: C = Qn
+  } = d[t], h = m.useCallback(
+    (g) => e(n, g),
     [e, n]
   );
-  g.useEffect(() => {
+  m.useEffect(() => {
     c.current.className = u;
   }, [u]);
-  const E = ["item", n, Bn];
-  o && E.push("locked"), l && (E.push("selected"), E.push(Nn));
-  const R = E.join(" "), x = ({ width: C = 0, height: D = 0, keepRatio: k }) => {
-    m((P) => {
-      const { offsetWidth: M, offsetHeight: N } = c.current;
-      return w({
-        prevState: P,
-        width: C,
-        height: D,
-        actualHeight: N,
-        actualWidth: M,
-        keepRatio: k
+  const S = ["item", n, Bn];
+  o && S.push("locked"), l && (S.push("selected"), S.push(Nn));
+  const E = S.join(" "), x = ({ width: g = 0, height: k = 0, keepRatio: P }) => {
+    h((M) => {
+      const { offsetWidth: $, offsetHeight: B } = c.current;
+      return C({
+        prevState: M,
+        width: g,
+        height: k,
+        actualHeight: B,
+        actualWidth: $,
+        keepRatio: P
       });
     });
-  }, y = ({ width: C }) => {
-    x({ width: C });
-  }, p = ({ height: C }) => {
-    x({ height: C });
-  }, h = ({ width: C }) => {
-    x({ height: C, width: C, keepRatio: !0 });
+  }, v = ({ width: g }) => {
+    x({ width: g });
+  }, p = ({ height: g }) => {
+    x({ height: g });
+  }, R = ({ width: g }) => {
+    x({ height: g, width: g, keepRatio: !0 });
   };
   return /* @__PURE__ */ T(
     "div",
     {
       style: { transform: `rotate(${r}deg` },
       "data-id": n,
-      className: R,
-      children: /* @__PURE__ */ ue(
+      className: E,
+      children: /* @__PURE__ */ le(
         "div",
         {
           style: { display: "flex" },
           ref: c,
           onAnimationEnd: Zn,
-          onKeyDown: (C) => C.stopPropagation(),
-          onKeyUp: (C) => C.stopPropagation(),
+          onKeyDown: (g) => g.stopPropagation(),
+          onKeyUp: (g) => g.stopPropagation(),
           children: [
             /* @__PURE__ */ T(
               Jn,
               {
                 itemId: n,
                 state: a,
-                ErrorComponent: ((v = d == null ? void 0 : d.error) == null ? void 0 : v.component) || Gn,
-                children: /* @__PURE__ */ T(b, { ...a, id: n, setState: m })
+                ErrorComponent: ((w = d == null ? void 0 : d.error) == null ? void 0 : w.component) || Gn,
+                children: /* @__PURE__ */ T(b, { ...a, id: n, setState: h })
               }
             ),
             /* @__PURE__ */ T("div", { className: `corner ${xe} ${Un}` }),
@@ -2903,12 +2919,12 @@ const Zn = (e) => {
             /* @__PURE__ */ T("div", { className: `corner ${xe} ${Vn}` }),
             /* @__PURE__ */ T("div", { className: `corner ${xe} ${Wn}` }),
             /* @__PURE__ */ T("div", { className: `${xe} ${Fn}` }),
-            f && /* @__PURE__ */ ue(Qt, { children: [
+            f && /* @__PURE__ */ le(Qt, { children: [
               _.b && /* @__PURE__ */ T(
                 rt,
                 {
                   className: `${nt} ${qn}`,
-                  onResize: h
+                  onResize: R
                 }
               ),
               _.h && /* @__PURE__ */ T(
@@ -2922,7 +2938,7 @@ const Zn = (e) => {
                 rt,
                 {
                   className: `${nt} ${Kn}`,
-                  onResize: y
+                  onResize: v
                 }
               )
             ] })
@@ -2983,7 +2999,7 @@ const Zn = (e) => {
       d.config.itemTemplates,
       d.selection
     ]
-  ), [u] = ge((d) => [d.getUser]), l = H({
+  ), [u] = ge((d) => [d.getUser]), l = q({
     position: "absolute",
     top: `${n / 2}px`,
     left: `${n / 2}px`,
@@ -3003,21 +3019,57 @@ const Zn = (e) => {
     },
     d
   ));
-}, ao = H({
+};
+function ao(e = !1) {
+  const t = Ie(e), r = Jt(() => t.current, []);
+  return Me(() => (t.current = !0, () => {
+    t.current = !1;
+  }), []), r;
+}
+function co(e, ...t) {
+  e && e.addEventListener && e.addEventListener(...t);
+}
+function uo(e, ...t) {
+  e && e.removeEventListener && e.removeEventListener(...t);
+}
+const lo = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
+function ue(e, ...t) {
+  const r = ao(), n = lt(t[1]), o = ct(
+    () => (
+      // as some event listeners designed to be used through `this`
+      // it is better to make listener a conventional function as it
+      // infers call context
+      // eslint-disable-next-line func-names
+      function(...s) {
+        r() && (typeof n.current == "function" ? n.current.apply(this, s) : typeof n.current.handleEvent == "function" && n.current.handleEvent.apply(this, s));
+      }
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  Me(() => {
+    const s = e && lo(e, "current") ? e.current : e;
+    if (!s)
+      return;
+    const a = t.slice(2);
+    return co(s, t[0], o, ...a), () => uo(s, t[0], o, ...a);
+  }, [e, t[0]]);
+}
+const fo = q({
   zIndex: 210,
   position: "absolute",
   backgroundColor: "hsla(0, 40%, 50%, 10%)",
   border: "2px solid hsl(0, 55%, 40%)"
-}), co = (e, t) => {
-  const r = t.getElementsByClassName("selector");
-  if (!r.length)
+}), po = (e, t, r = !1) => {
+  const n = t.getElementsByClassName("selector");
+  if (!n.length)
     return [];
-  const n = r[0];
-  return Array.from(t.getElementsByClassName("item")).filter((o) => {
-    const s = ke(o), a = e[s];
-    return !a || a.locked ? !1 : en(o, n);
-  }).map((o) => ke(o));
-}, uo = ({ children: e, moveFirst: t }) => {
+  const o = n[0];
+  return Array.from(t.getElementsByClassName("item")).filter((s) => {
+    const a = ke(s), u = e[a];
+    return !u || !r && u.locked ? !1 : en(s, o);
+  }).map((s) => ke(s));
+}, mo = ({ children: e, moveFirst: t }) => {
   const [
     r,
     n,
@@ -3026,68 +3078,72 @@ const Zn = (e) => {
     a,
     u,
     l
-  ] = Z((h) => [
-    h.getSelection,
-    h.clear,
-    h.setSelection,
-    h.select,
-    h.getConfiguration,
-    h.getBoardState,
-    h.updateBoardState
-  ]), { findElementUnderPointer: d } = pt(), [f] = se((h) => [h.getItems]), [c, b] = g.useState({}), [, _] = g.useTransition(), w = g.useRef(null), m = g.useRef({
+  ] = Z((g) => [
+    g.getSelection,
+    g.clear,
+    g.setSelection,
+    g.select,
+    g.getConfiguration,
+    g.getBoardState,
+    g.updateBoardState
+  ]), { findElementUnderPointer: d } = pt(), [f] = se((g) => [g.getItems]), [c, b] = m.useState({}), [, _] = m.useTransition(), [C, h] = m.useState(!1), S = m.useRef(null), E = m.useRef({
     moving: !1
   });
-  return g.useEffect(() => (n(), () => {
+  return ue(document, "keydown", (g) => {
+    g.key === "l" && h(!0);
+  }), ue(document, "keyup", (g) => {
+    g.key === "l" && h(!1);
+  }), m.useEffect(() => (n(), () => {
     n();
-  }), [n]), g.useEffect(() => {
-    if (m.current.moving) {
-      const h = f(), { boardWrapper: v } = a(), C = co(h, v);
+  }), [n]), m.useEffect(() => {
+    if (E.current.moving) {
+      const g = f(), { boardWrapper: k } = a(), P = po(g, k, C);
       _(() => {
-        o(C);
+        o(P);
       });
     }
-  }, [a, f, c, o]), /* @__PURE__ */ T(
+  }, [a, f, c, o, C]), /* @__PURE__ */ T(
     We,
     {
-      onDragStart: async (h) => {
-        await d(h) || (m.current.moving = !0, _(() => {
+      onDragStart: async (g) => {
+        await d(g) || (E.current.moving = !0, _(() => {
           l({ selecting: !0 });
-        }), w.current.style.cursor = "crosshair");
+        }), S.current.style.cursor = "crosshair");
       },
-      onDrag: ({ distanceY: h, distanceX: v, startX: C, startY: D }) => {
-        if (m.current.moving) {
-          const { top: k, left: P } = w.current.getBoundingClientRect(), { scale: M } = u(), N = (C - P) / M, F = (D - k) / M, K = v / M, O = h / M;
-          K > 0 ? (m.current.left = N, m.current.width = K) : (m.current.left = N + K, m.current.width = -K), O > 0 ? (m.current.top = F, m.current.height = O) : (m.current.top = F + O, m.current.height = -O), b({ ...m.current, moving: !0 });
+      onDrag: ({ distanceY: g, distanceX: k, startX: P, startY: M }) => {
+        if (E.current.moving) {
+          const { top: $, left: B } = S.current.getBoundingClientRect(), { scale: N } = u(), K = (P - B) / N, O = (M - $) / N, D = k / N, A = g / N;
+          D > 0 ? (E.current.left = K, E.current.width = D) : (E.current.left = K + D, E.current.width = -D), A > 0 ? (E.current.top = O, E.current.height = A) : (E.current.top = O + A, E.current.height = -A), b({ ...E.current, moving: !0 });
         }
       },
       onDragEnd: () => {
-        m.current.moving && (_(() => {
+        E.current.moving && (_(() => {
           l({ selecting: !1 });
-        }), m.current.moving = !1, b({ moving: !1 }), w.current.style.cursor = "auto");
+        }), E.current.moving = !1, b({ moving: !1 }), S.current.style.cursor = "auto");
       },
-      onTap: (h) => {
-        const { target: v, ctrlKey: C, metaKey: D } = h, k = d(h);
-        if (!k && Te(v, "board"))
+      onTap: (g) => {
+        const { target: k, ctrlKey: P, metaKey: M } = g, $ = d(g);
+        if (!$ && Te(k, "board"))
           n();
         else {
-          const P = ke(k);
-          if (!P) {
+          const B = ke($);
+          if (!B) {
             n();
             return;
           }
-          const M = r();
-          k && !M.includes(P) && (C || D ? s([P]) : o([P]));
+          const N = r();
+          $ && !N.includes(B) && (P || M ? s([B]) : o([B]));
         }
       },
-      onLongTap: ({ target: h }) => {
-        const v = Te(h, "item");
-        if (v) {
-          const C = ke(v);
-          o([C]);
+      onLongTap: ({ target: g }) => {
+        const k = Te(g, "item");
+        if (k) {
+          const P = ke(k);
+          o([P]);
         }
       },
       mainAction: t ? "pan" : "drag",
-      children: /* @__PURE__ */ ue("div", { ref: w, children: [
+      children: /* @__PURE__ */ le("div", { ref: S, children: [
         c.moving && /* @__PURE__ */ T(
           "div",
           {
@@ -3096,106 +3152,70 @@ const Zn = (e) => {
               height: `${c.height}px`,
               width: `${c.width}px`
             },
-            className: `selector ${ao}`
+            className: `selector ${fo}`
           }
         ),
         e
       ] })
     }
   );
-};
-function lo(e = !1) {
-  const t = Ie(e), r = Jt(() => t.current, []);
-  return Me(() => (t.current = !0, () => {
-    t.current = !1;
-  }), []), r;
-}
-function fo(e, ...t) {
-  e && e.addEventListener && e.addEventListener(...t);
-}
-function po(e, ...t) {
-  e && e.removeEventListener && e.removeEventListener(...t);
-}
-const mo = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
-function pe(e, ...t) {
-  const r = lo(), n = lt(t[1]), o = ct(
-    () => (
-      // as some event listeners designed to be used through `this`
-      // it is better to make listener a conventional function as it
-      // infers call context
-      // eslint-disable-next-line func-names
-      function(...s) {
-        r() && (typeof n.current == "function" ? n.current.apply(this, s) : typeof n.current.handleEvent == "function" && n.current.handleEvent.apply(this, s));
-      }
-    ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  Me(() => {
-    const s = e && mo(e, "current") ? e.current : e;
-    if (!s)
-      return;
-    const a = t.slice(2);
-    return fo(s, t[0], o, ...a), () => po(s, t[0], o, ...a);
-  }, [e, t[0]]);
-}
-const go = ({ children: e }) => {
-  const { moveItems: t, placeItems: r, findElementUnderPointer: n } = pt(), [o, s, a, u, l] = Z((E) => [
-    E.select,
-    E.setSelection,
-    E.getSelection,
-    E.getBoardState,
-    E.updateBoardState
-  ]), [d] = se((E) => [E.getBoardConfig]), f = g.useRef({}), c = g.useRef({
+}, go = ({ children: e }) => {
+  const { moveItems: t, placeItems: r, findElementUnderPointer: n } = pt(), [o, s, a, u, l] = Z((S) => [
+    S.select,
+    S.setSelection,
+    S.getSelection,
+    S.getBoardState,
+    S.updateBoardState
+  ]), [d] = se((S) => [S.getBoardConfig]), f = m.useRef({}), c = m.useRef({
     items: []
-  }), b = (E) => {
-    const { ctrlKey: R, metaKey: x, event: y } = E, p = n(E);
+  }), b = (S) => {
+    const { ctrlKey: E, metaKey: x, event: v } = S, p = n(S);
     if (p) {
-      y.stopPropagation();
-      const h = a();
-      c.current.items = h;
-      const v = ke(p);
-      h.includes(v) || (R || x ? (c.current.items = [...h, v], o([v])) : (c.current.items = [v], s([v]))), Object.assign(f.current, {
+      v.stopPropagation();
+      const R = a();
+      c.current.items = R;
+      const w = ke(p);
+      R.includes(w) || (E || x ? (c.current.items = [...R, w], o([w])) : (c.current.items = [w], s([w]))), Object.assign(f.current, {
         moving: !0,
         remainX: 0,
         remainY: 0
       });
     }
-  }, _ = ({ deltaX: E, deltaY: R, event: x }) => {
+  }, _ = ({ deltaX: S, deltaY: E, event: x }) => {
     if (f.current.moving) {
       x.stopPropagation();
-      const { scale: y } = u(), p = f.current.remainX + E / y, h = f.current.remainY + R / y;
+      const { scale: v } = u(), p = f.current.remainX + S / v, R = f.current.remainY + E / v;
       t(
         c.current.items,
         {
           x: p,
-          y: h
+          y: R
         },
         !0
       ), l({ movingItems: !0 });
     }
-  }, w = () => {
+  }, C = () => {
     if (f.current.moving) {
-      const { gridSize: E = 1 } = d(), R = E || 1;
+      const { gridSize: S = 1 } = d(), E = S || 1;
       f.current = { moving: !1 }, r(c.current.items, {
         type: "grid",
-        size: R
+        size: E
       }), l({ movingItems: !1 });
     }
   };
-  return pe(document, "keydown", (E) => {
-    if (["INPUT", "TEXTAREA"].includes(E.target.tagName))
+  return ue(document, "keydown", (S) => {
+    if (["INPUT", "TEXTAREA"].includes(S.target.tagName))
       return;
-    const R = a();
-    if (R.length) {
+    const E = a();
+    if (E.length) {
       const { gridSize: x = 1 } = d();
-      let y = 0, p = 0;
-      switch (E.key) {
+      let v = 0, p = 0;
+      switch (S.key) {
         case "ArrowLeft":
-          y = -10;
+          v = -10;
           break;
         case "ArrowRight":
-          y = 10;
+          v = 10;
           break;
         case "ArrowUp":
           p = -10;
@@ -3204,45 +3224,45 @@ const go = ({ children: e }) => {
           p = 10;
           break;
       }
-      (y || p) && (E.shiftKey && (y *= 5, p *= 5), (E.ctrlKey || E.altKey || E.metaKey) && (y /= 10, p /= 10), t(
-        R,
+      (v || p) && (S.shiftKey && (v *= 5, p *= 5), (S.ctrlKey || S.altKey || S.metaKey) && (v /= 10, p /= 10), t(
+        E,
         {
-          x: y,
+          x: v,
           y: p
         },
         !0
-      ), r(R, {
+      ), r(E, {
         type: "grid",
         size: x || 1
-      }), E.preventDefault());
+      }), S.preventDefault());
     }
-  }), /* @__PURE__ */ T(We, { onDragStart: b, onDrag: _, onDragEnd: w, children: e });
+  }), /* @__PURE__ */ T(We, { onDragStart: b, onDrag: _, onDragEnd: C, children: e });
 }, ho = (e) => {
-  const t = g.useRef({ hover: !1, x: 0, y: 0 });
-  return pe(e.current, "mousemove", (n) => {
+  const t = m.useRef({ hover: !1, x: 0, y: 0 });
+  return ue(e.current, "mousemove", (n) => {
     const { clientX: o, clientY: s } = n;
     t.current.x = o, t.current.y = s;
-  }), pe(e.current, "mouseenter", () => {
+  }), ue(e.current, "mouseenter", () => {
     t.current.hover = !0;
-  }), pe(e.current, "mouseleave", () => {
+  }), ue(e.current, "mouseleave", () => {
     t.current.hover = !1;
-  }), g.useCallback(() => t.current, []);
+  }), m.useCallback(() => t.current, []);
 }, vo = [...Array(5).keys()].map((e) => `Digit${e + 1}`), yo = () => {
-  const [e, t] = g.useState({}), [r, n] = Z((o) => [
+  const [e, t] = m.useState({}), [r, n] = Z((o) => [
     o.getBoardState,
     o.updateBoardState
   ]);
-  return pe(document, "keydown", (o) => {
+  return ue(document, "keydown", (o) => {
     if (!["INPUT", "TEXTAREA"].includes(o.target.tagName) && vo.includes(o.code)) {
       const s = o.code, { translateX: a, translateY: u, scale: l } = r();
-      o.altKey || o.metaKey || o.ctrlKey ? t((d) => ({
+      o.altKey || o.metaKey || o.ctrlKey || o.shiftKey ? t((d) => ({
         ...d,
         [s]: { translateX: a, translateY: u, scale: l }
       })) : e[s] && n(e[s]), o.preventDefault();
     }
   }), null;
 }, So = ({ children: e, moveFirst: t = !1 }) => {
-  const r = g.useRef(null), [
+  const r = m.useRef(null), [
     n,
     o,
     s,
@@ -3258,70 +3278,70 @@ const go = ({ children: e }) => {
     p.getConfiguration,
     p.updateBoardState,
     p.getSelection
-  ]), { setDim: l, zoomToCenter: d, zoomToExtent: f } = dt(), [c, b] = g.useState(!1), _ = g.useRef({}), w = ho(r);
+  ]), { setDim: l, zoomToCenter: d, zoomToExtent: f } = dt(), [c, b] = m.useState(!1), _ = m.useRef({}), C = ho(r);
   yo();
-  const m = g.useCallback(() => {
+  const h = m.useCallback(() => {
     const { itemExtent: p } = s();
     f(p);
   }, [s, f]);
-  g.useEffect(() => {
-    !c && o.left && (m(), b(!0));
-  }, [m, c, o]);
-  const E = ({ clientX: p, clientY: h, scale: v }) => {
-    d(1 - v / 500, { x: p, y: h }), clearTimeout(_.current.zoom), _.current.zoom = setTimeout(() => {
+  m.useEffect(() => {
+    !c && o.left && (h(), b(!0));
+  }, [h, c, o]);
+  const S = ({ clientX: p, clientY: R, scale: w }) => {
+    d(1 - w / 500, { x: p, y: R }), clearTimeout(_.current.zoom), _.current.zoom = setTimeout(() => {
       a({ zooming: !1 });
     }, 200), a({ zooming: !0 });
-  }, R = ({ deltaX: p, deltaY: h }) => {
-    l((v) => ({
-      ...v,
-      translateX: v.translateX + p,
-      translateY: v.translateY + h
+  }, E = ({ deltaX: p, deltaY: R }) => {
+    l((w) => ({
+      ...w,
+      translateX: w.translateX + p,
+      translateY: w.translateY + R
     })), clearTimeout(_.current.pan), _.current.pan = setTimeout(() => {
       a({ panning: !1 });
     }, 200), a({ panning: !0 });
   }, x = (p) => {
     if (["INPUT", "TEXTAREA"].includes(p.target.tagName))
       return;
-    let h = 0, v = 0, C = 1;
+    let R = 0, w = 0, g = 1;
     switch (p.key) {
       case "ArrowLeft":
-        h = -10;
+        R = -10;
         break;
       case "ArrowRight":
-        h = 10;
+        R = 10;
         break;
       case "ArrowUp":
-        v = -10;
+        w = -10;
         break;
       case "ArrowDown":
-        v = 10;
+        w = 10;
         break;
       case "PageUp":
-        C = 1.2;
+        g = 1.2;
         break;
       case "PageDown":
-        C = 0.8;
+        g = 0.8;
         break;
     }
-    if (h || v || C !== 1) {
-      const D = u();
-      if (C === 1 && D.length)
+    if (R || w || g !== 1) {
+      const k = u();
+      if (g === 1 && k.length)
         return;
-      p.shiftKey && (h *= 5, v *= 5), (p.ctrlKey || p.altKey || p.metaKey) && (h /= 5, v /= 5), l((k) => ({
-        ...k,
-        translateY: k.translateY + v,
-        translateX: k.translateX + h
-      })), d(C), p.preventDefault();
-    }
-    p.key === " " && !p.repeat && w().hover && d(3, w());
-  }, y = (p) => {
-    ["INPUT", "TEXTAREA"].includes(p.target.tagName) || p.key === " " && w().hover && d(1 / 3, w());
+      p.shiftKey && (R *= 5, w *= 5), (p.ctrlKey || p.altKey || p.metaKey) && (R /= 5, w /= 5), l((P) => ({
+        ...P,
+        translateY: P.translateY + w,
+        translateX: P.translateX + R
+      })), d(g), p.preventDefault();
+    }
+    p.key === " " && !p.repeat && C().hover && d(3, C());
+  }, v = (p) => {
+    ["INPUT", "TEXTAREA"].includes(p.target.tagName) || p.key === " " && C().hover && d(1 / 3, C());
   };
-  return pe(document, "keydown", x), pe(document, "keyup", y), /* @__PURE__ */ T(
+  return ue(document, "keydown", x), ue(document, "keyup", v), /* @__PURE__ */ T(
     We,
     {
-      onPan: R,
-      onZoom: E,
+      onPan: E,
+      onZoom: S,
       mainAction: t ? "pan" : "drag",
       children: /* @__PURE__ */ T(
         "div",
@@ -3338,7 +3358,7 @@ const go = ({ children: e }) => {
       )
     }
   );
-}, _o = H({
+}, _o = q({
   position: "absolute",
   top: 0,
   left: 0,
@@ -3365,26 +3385,26 @@ const go = ({ children: e }) => {
       translateY: c.boardState.translateY,
       scale: c.boardState.scale
     }
-  ]), [l] = se((c) => [c.items]), d = g.useCallback(() => {
+  ]), [l] = se((c) => [c.items]), d = m.useCallback(() => {
     const c = t(), { boardWrapperRect: b, boardWrapper: _ } = o();
     if (c.length === 0) {
       n(null);
       return;
     }
-    const w = nr(c, _);
-    if (!w) {
+    const C = nr(c, _);
+    if (!C) {
       n(null);
       return;
     }
-    const { left: m, top: E, width: R, height: x } = w, y = {
-      left: m - b.left,
-      top: E - b.top,
+    const { left: h, top: S, width: E, height: x } = C, v = {
+      left: h - b.left,
+      top: S - b.top,
       height: x,
-      width: R
+      width: E
     };
-    n(y);
+    n(v);
   }, [o, t, n]), f = ft(d, [d], 300);
-  return g.useEffect(() => {
+  return m.useEffect(() => {
     d(), f();
   }, [
     e,
@@ -3409,19 +3429,19 @@ const go = ({ children: e }) => {
   const [e] = Z((t) => [t.boardState.movingItems]);
   return e ? null : /* @__PURE__ */ T(bo, {});
 }, wo = typeof window < "u" && typeof navigator < "u" && typeof document < "u";
-let Le;
+let ze;
 function Co() {
   if (!wo)
     return;
-  if (Le)
-    return Le;
+  if (ze)
+    return ze;
   const e = /* @__PURE__ */ new Map(), t = new ResizeObserver((r) => {
     r.forEach((n) => {
       var o;
       return (o = e.get(n.target)) == null ? void 0 : o.forEach((s) => setTimeout(() => s(n), 0));
     });
   });
-  return Le = {
+  return ze = {
     observer: t,
     subscribe: (r, n) => {
       let o = e.get(r);
@@ -3431,7 +3451,7 @@ function Co() {
       const o = e.get(r);
       o && (o.delete(n), o.size || (e.delete(r), t.unobserve(r)));
     }
-  }, Le;
+  }, ze;
 }
 function xo(e, t, r = !0) {
   const n = r && Co(), o = lt(t), s = e && "current" in e ? e.current : e;
@@ -3519,7 +3539,7 @@ const Pe = (e, t) => Array.from(Array(t)).map(() => e).join(""), Po = new RegExp
   const f = n - s / 2, c = u + f, b = l + f, _ = d + f;
   return [c, b, _].map(Gt);
 };
-function zo(e) {
+function Lo(e) {
   if (e === "transparent")
     return 0;
   function t(s) {
@@ -3529,16 +3549,16 @@ function zo(e) {
   const [r, n, o] = Io(e);
   return 0.2126 * t(r) + 0.7152 * t(n) + 0.0722 * t(o);
 }
-function Lo(e) {
-  return zo(e) > 0.179;
+function zo(e) {
+  return Lo(e) > 0.179;
 }
-const Yo = H({
+const Yo = q({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
   zIndex: 210,
   pointerEvents: "none"
-}), Bo = H({
+}), Bo = q({
   fontWeight: "bold",
   padding: "0 0.5em",
   borderRadius: "2px",
@@ -3550,9 +3570,9 @@ const Yo = H({
   whitespace: "nowrap",
   pointerEvents: "none"
 }), No = ({ color: e = "#666", size: t = 40, text: r }) => {
-  const n = Lo(e) ? "#222" : "#EEE";
-  return /* @__PURE__ */ ue("div", { className: Yo, children: [
-    /* @__PURE__ */ ue(
+  const n = zo(e) ? "#222" : "#EEE";
+  return /* @__PURE__ */ le("div", { className: Yo, children: [
+    /* @__PURE__ */ le(
       "svg",
       {
         version: "1.1",
@@ -3596,7 +3616,7 @@ const Yo = H({
       }
     )
   ] });
-}, Uo = g.memo(No), Xo = H({
+}, Uo = m.memo(No), Xo = q({
   top: 0,
   left: 0,
   zIndex: 210,
@@ -3635,14 +3655,14 @@ const Yo = H({
     l.getConfiguration,
     l.getBoardState
   ]);
-  return /* @__PURE__ */ ue("div", { onPointerMove: ({ clientX: l, clientY: d }) => {
+  return /* @__PURE__ */ le("div", { onPointerMove: ({ clientX: l, clientY: d }) => {
     const { scale: f, translateX: c, translateY: b } = s(), {
-      boardWrapperRect: { left: _, top: w }
-    } = o(), m = {
+      boardWrapperRect: { left: _, top: C }
+    } = o(), h = {
       x: (l - _ - c) / f,
-      y: (d - w - b) / f
+      y: (d - C - b) / f
     };
-    r(t.id, m);
+    r(t.id, h);
   }, onPointerLeave: () => {
     n(t.id);
   }, children: [
@@ -3663,9 +3683,9 @@ const Yo = H({
   showResizeHandle: a = !1,
   Wrapper: u = Ko
 }) => {
-  const l = g.useRef(null), [d, f] = Z((w) => [
-    w.config.uid,
-    w.updateConfiguration
+  const l = m.useRef(null), [d, f] = Z((C) => [
+    C.config.uid,
+    C.updateConfiguration
   ]), { updateItemExtent: c } = dt(), b = {
     userSelect: "none",
     width: `${o}px`,
@@ -3673,28 +3693,28 @@ const Yo = H({
     backgroundColor: "#333",
     ...t
   };
-  g.useEffect(() => {
-    const w = (m) => {
-      Te(m.target, "board") && m.preventDefault();
+  m.useEffect(() => {
+    const C = (h) => {
+      Te(h.target, "board") && h.preventDefault();
     };
-    return document.body.addEventListener("wheel", w, { passive: !1 }), () => {
-      document.body.removeEventListener("wheel", w);
+    return document.body.addEventListener("wheel", C, { passive: !1 }), () => {
+      document.body.removeEventListener("wheel", C);
     };
-  }, []), g.useEffect(() => {
+  }, []), m.useEffect(() => {
     f({
       boardWrapper: l.current
     });
-  }, [f]), g.useEffect(() => {
+  }, [f]), m.useEffect(() => {
     d || f({
       uid: me()
     });
-  }, [d, f]), g.useEffect(() => {
+  }, [d, f]), m.useEffect(() => {
     f({
       itemTemplates: n,
       boardSize: o,
       showResizeHandle: a
     });
-  }, [n, o, a, f]), g.useEffect(() => {
+  }, [n, o, a, f]), m.useEffect(() => {
     f({
       boardWrapperRect: l.current.getBoundingClientRect()
     }), c(), setTimeout(c, 2e3);
@@ -3703,19 +3723,19 @@ const Yo = H({
       boardWrapperRect: l.current.getBoundingClientRect()
     });
   });
-  const _ = H({ ...Ho, ...r });
-  return /* @__PURE__ */ ue(
+  const _ = q({ ...Ho, ...r });
+  return /* @__PURE__ */ le(
     "div",
     {
       ref: l,
       id: d,
       className: `sync-board ${_}`,
       children: [
-        /* @__PURE__ */ T(So, { moveFirst: e, children: /* @__PURE__ */ T(uo, { moveFirst: e, children: /* @__PURE__ */ T(go, { moveFirst: e, children: /* @__PURE__ */ T(Fo, { children: /* @__PURE__ */ T(u, { children: /* @__PURE__ */ ue(
+        /* @__PURE__ */ T(So, { moveFirst: e, children: /* @__PURE__ */ T(mo, { moveFirst: e, children: /* @__PURE__ */ T(go, { moveFirst: e, children: /* @__PURE__ */ T(Fo, { children: /* @__PURE__ */ T(u, { children: /* @__PURE__ */ le(
           "div",
           {
-            onContextMenu: (w) => {
-              w.preventDefault();
+            onContextMenu: (C) => {
+              C.preventDefault();
             },
             style: b,
             className: "board",
@@ -3730,7 +3750,7 @@ const Yo = H({
     }
   );
 };
-Ln(g.createElement);
+zn(m.createElement);
 export {
   us as Board,
   as as BoardWrapper,