npm - react-sync-board - Versions diffs - 1.2.6 → 1.2.8 - Mend

react-sync-board 1.2.6 → 1.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/react-sync-board.js +1170 -1157
package/dist/react-sync-board.js.map +1 -1
package/dist/react-sync-board.umd.cjs +24 -24
package/dist/react-sync-board.umd.cjs.map +1 -1
package/package.json +1 -1

package/dist/react-sync-board.js CHANGED Viewed

@@ -1,11 +1,11 @@
-var Lr = Object.defineProperty;
-var zr = (e, t, r) => t in e ? Lr(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var kt = (e, t, r) => (zr(e, typeof t != "symbol" ? t + "" : t, r), r);
-import g, { useContext as _e, useDebugValue as Yr, useRef as Re, useMemo as lt, useEffect as Pe, useCallback as tr, memo as rr } from "react";
-function Br(e) {
+var zr = Object.defineProperty;
+var Yr = (e, t, r) => t in e ? zr(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var Pt = (e, t, r) => (Yr(e, typeof t != "symbol" ? t + "" : t, r), r);
+import g, { useContext as _e, useDebugValue as Br, useRef as Re, useMemo as ft, useEffect as Pe, useCallback as rr, memo as nr } from "react";
+function Nr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Ie = {}, Nr = {
+var Ie = {}, Xr = {
   get exports() {
     return Ie;
   },
@@ -22,21 +22,21 @@ var Ie = {}, Nr = {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Pt;
-function Xr() {
-  if (Pt)
+var Mt;
+function Ur() {
+  if (Mt)
     return Ee;
-  Pt = 1;
+  Mt = 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 };
   function a(u, l, d) {
-    var f, c = {}, h = null, _ = null;
-    d !== void 0 && (h = "" + d), l.key !== void 0 && (h = "" + l.key), l.ref !== void 0 && (_ = l.ref);
+    var f, c = {}, h = null, S = null;
+    d !== void 0 && (h = "" + d), l.key !== void 0 && (h = "" + l.key), l.ref !== void 0 && (S = l.ref);
     for (f in l)
       n.call(l, f) && !s.hasOwnProperty(f) && (c[f] = l[f]);
     if (u && u.defaultProps)
       for (f in l = u.defaultProps, l)
         c[f] === void 0 && (c[f] = l[f]);
-    return { $$typeof: t, type: u, key: h, ref: _, props: c, _owner: o.current };
+    return { $$typeof: t, type: u, key: h, ref: S, props: c, _owner: o.current };
   }
   return Ee.Fragment = r, Ee.jsx = a, Ee.jsxs = a, Ee;
 }
@@ -50,57 +50,57 @@ var we = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Mt;
-function Ur() {
-  return Mt || (Mt = 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"), h = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), v = Symbol.iterator, E = "@@iterator";
-    function I(i) {
+var Dt;
+function Wr() {
+  return Dt || (Dt = 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"), h = Symbol.for("react.lazy"), S = Symbol.for("react.offscreen"), v = Symbol.iterator, E = "@@iterator";
+    function O(i) {
       if (i === null || typeof i != "object")
         return null;
       var b = v && i[v] || i[E];
       return typeof b == "function" ? b : null;
     }
     var y = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function C(i) {
+    function x(i) {
       {
-        for (var b = arguments.length, R = new Array(b > 1 ? b - 1 : 0), D = 1; D < b; D++)
-          R[D - 1] = arguments[D];
-        x("error", i, R);
+        for (var b = arguments.length, I = new Array(b > 1 ? b - 1 : 0), j = 1; j < b; j++)
+          I[j - 1] = arguments[j];
+        C("error", i, I);
       }
     }
-    function x(i, b, R) {
+    function C(i, b, I) {
       {
-        var D = y.ReactDebugCurrentFrame, X = D.getStackAddendum();
-        X !== "" && (b += "%s", R = R.concat([X]));
-        var W = R.map(function(B) {
-          return String(B);
+        var j = y.ReactDebugCurrentFrame, X = j.getStackAddendum();
+        X !== "" && (b += "%s", I = I.concat([X]));
+        var W = I.map(function(N) {
+          return String(N);
         });
         W.unshift("Warning: " + b), Function.prototype.apply.call(console[i], console, W);
       }
     }
-    var p = !1, w = !1, m = !1, S = !1, O = !1, k;
-    k = Symbol.for("react.module.reference");
-    function j(i) {
-      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || O || i === o || i === d || i === f || S || i === _ || p || w || m || typeof i == "object" && i !== null && (i.$$typeof === h || i.$$typeof === c || i.$$typeof === a || i.$$typeof === u || i.$$typeof === l || // This needs to include all possible module reference object
+    var p = !1, _ = !1, m = !1, w = !1, R = !1, T;
+    T = Symbol.for("react.module.reference");
+    function D(i) {
+      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || R || i === o || i === d || i === f || w || i === S || p || _ || m || typeof i == "object" && i !== null && (i.$$typeof === h || 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 === T || i.getModuleId !== void 0));
     }
-    function M(i, b, R) {
-      var D = i.displayName;
-      if (D)
-        return D;
+    function M(i, b, I) {
+      var j = i.displayName;
+      if (j)
+        return j;
       var X = b.displayName || b.name || "";
-      return X !== "" ? R + "(" + X + ")" : R;
+      return X !== "" ? I + "(" + X + ")" : I;
     }
     function A(i) {
       return i.displayName || "Context";
     }
-    function N(i) {
+    function Y(i) {
       if (i == null)
         return null;
-      if (typeof i.tag == "number" && C("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof i == "function")
+      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")
         return i.displayName || i.name || null;
       if (typeof i == "string")
         return i;
@@ -124,17 +124,17 @@ function Ur() {
             var b = i;
             return A(b) + ".Consumer";
           case a:
-            var R = i;
-            return A(R._context) + ".Provider";
+            var I = i;
+            return A(I._context) + ".Provider";
           case l:
             return M(i, i.render, "ForwardRef");
           case c:
-            var D = i.displayName || null;
-            return D !== null ? D : N(i.type) || "Memo";
+            var j = i.displayName || null;
+            return j !== null ? j : Y(i.type) || "Memo";
           case h: {
-            var X = i, W = X._payload, B = X._init;
+            var X = i, W = X._payload, N = X._init;
             try {
-              return N(B(W));
+              return Y(N(W));
             } catch {
               return null;
             }
@@ -142,14 +142,14 @@ function Ur() {
         }
       return null;
     }
-    var U = Object.assign, J = 0, P, $, z, V, Y, F, H;
+    var U = Object.assign, G = 0, P, $, B, V, L, F, H;
     function te() {
     }
     te.__reactDisabledLog = !0;
-    function Z() {
+    function Q() {
       {
-        if (J === 0) {
-          P = console.log, $ = console.info, z = console.warn, V = console.error, Y = console.group, F = console.groupCollapsed, H = console.groupEnd;
+        if (G === 0) {
+          P = console.log, $ = console.info, B = console.warn, V = console.error, L = console.group, F = console.groupCollapsed, H = console.groupEnd;
           var i = {
             configurable: !0,
             enumerable: !0,
@@ -166,12 +166,12 @@ function Ur() {
             groupEnd: i
           });
         }
-        J++;
+        G++;
       }
     }
     function ne() {
       {
-        if (J--, J === 0) {
+        if (G--, G === 0) {
           var i = {
             configurable: !0,
             enumerable: !0,
@@ -185,13 +185,13 @@ function Ur() {
               value: $
             }),
             warn: U({}, i, {
-              value: z
+              value: B
             }),
             error: U({}, i, {
               value: V
             }),
             group: U({}, i, {
-              value: Y
+              value: L
             }),
             groupCollapsed: U({}, i, {
               value: F
@@ -201,111 +201,111 @@ function Ur() {
             })
           });
         }
-        J < 0 && C("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        G < 0 && x("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
     var ie = y.ReactCurrentDispatcher, me;
-    function ge(i, b, R) {
+    function ge(i, b, I) {
       {
         if (me === void 0)
           try {
             throw Error();
           } catch (X) {
-            var D = X.stack.trim().match(/\n( *(at )?)/);
-            me = D && D[1] || "";
+            var j = X.stack.trim().match(/\n( *(at )?)/);
+            me = j && j[1] || "";
           }
         return `
 ` + me + i;
       }
     }
-    var Ke = !1, je;
+    var Ke = !1, De;
     {
-      var mr = typeof WeakMap == "function" ? WeakMap : Map;
-      je = new mr();
+      var gr = typeof WeakMap == "function" ? WeakMap : Map;
+      De = new gr();
     }
-    function ht(i, b) {
+    function vt(i, b) {
       if (!i || Ke)
         return "";
       {
-        var R = je.get(i);
-        if (R !== void 0)
-          return R;
+        var I = De.get(i);
+        if (I !== void 0)
+          return I;
       }
-      var D;
+      var j;
       Ke = !0;
       var X = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var W;
-      W = ie.current, ie.current = null, Z();
+      W = ie.current, ie.current = null, Q();
       try {
         if (b) {
-          var B = function() {
+          var N = function() {
             throw Error();
           };
-          if (Object.defineProperty(B.prototype, "props", {
+          if (Object.defineProperty(N.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(B, []);
+              Reflect.construct(N, []);
             } catch (ae) {
-              D = ae;
+              j = ae;
             }
-            Reflect.construct(i, [], B);
+            Reflect.construct(i, [], N);
           } else {
             try {
-              B.call();
+              N.call();
             } catch (ae) {
-              D = ae;
+              j = ae;
             }
-            i.call(B.prototype);
+            i.call(N.prototype);
           }
         } else {
           try {
             throw Error();
           } catch (ae) {
-            D = ae;
+            j = ae;
           }
           i();
         }
       } catch (ae) {
-        if (ae && D && typeof ae.stack == "string") {
-          for (var L = ae.stack.split(`
-`), ee = D.stack.split(`
-`), q = L.length - 1, G = ee.length - 1; q >= 1 && G >= 0 && L[q] !== ee[G]; )
-            G--;
-          for (; q >= 1 && G >= 0; q--, G--)
-            if (L[q] !== ee[G]) {
-              if (q !== 1 || G !== 1)
+        if (ae && j && typeof ae.stack == "string") {
+          for (var z = ae.stack.split(`
+`), ee = j.stack.split(`
+`), q = z.length - 1, J = ee.length - 1; q >= 1 && J >= 0 && z[q] !== ee[J]; )
+            J--;
+          for (; q >= 1 && J >= 0; q--, J--)
+            if (z[q] !== ee[J]) {
+              if (q !== 1 || J !== 1)
                 do
-                  if (q--, G--, G < 0 || L[q] !== ee[G]) {
+                  if (q--, J--, J < 0 || z[q] !== ee[J]) {
                     var re = `
-` + L[q].replace(" at new ", " at ");
-                    return i.displayName && re.includes("<anonymous>") && (re = re.replace("<anonymous>", i.displayName)), typeof i == "function" && je.set(i, re), re;
+` + z[q].replace(" at new ", " at ");
+                    return i.displayName && re.includes("<anonymous>") && (re = re.replace("<anonymous>", i.displayName)), typeof i == "function" && De.set(i, re), re;
                   }
-                while (q >= 1 && G >= 0);
+                while (q >= 1 && J >= 0);
               break;
             }
         }
       } finally {
         Ke = !1, ie.current = W, ne(), Error.prepareStackTrace = X;
       }
-      var ve = i ? i.displayName || i.name : "", Tt = ve ? ge(ve) : "";
-      return typeof i == "function" && je.set(i, Tt), Tt;
+      var ve = i ? i.displayName || i.name : "", kt = ve ? ge(ve) : "";
+      return typeof i == "function" && De.set(i, kt), kt;
     }
-    function gr(i, b, R) {
-      return ht(i, !1);
+    function hr(i, b, I) {
+      return vt(i, !1);
     }
-    function hr(i) {
+    function vr(i) {
       var b = i.prototype;
       return !!(b && b.isReactComponent);
     }
-    function De(i, b, R) {
+    function je(i, b, I) {
       if (i == null)
         return "";
       if (typeof i == "function")
-        return ht(i, hr(i));
+        return vt(i, vr(i));
       if (typeof i == "string")
         return ge(i);
       switch (i) {
@@ -317,78 +317,78 @@ function Ur() {
       if (typeof i == "object")
         switch (i.$$typeof) {
           case l:
-            return gr(i.render);
+            return hr(i.render);
           case c:
-            return De(i.type, b, R);
+            return je(i.type, b, I);
           case h: {
-            var D = i, X = D._payload, W = D._init;
+            var j = i, X = j._payload, W = j._init;
             try {
-              return De(W(X), b, R);
+              return je(W(X), b, I);
             } catch {
             }
           }
         }
       return "";
     }
-    var $e = Object.prototype.hasOwnProperty, vt = {}, yt = y.ReactDebugCurrentFrame;
+    var $e = Object.prototype.hasOwnProperty, yt = {}, St = y.ReactDebugCurrentFrame;
     function Ae(i) {
       if (i) {
-        var b = i._owner, R = De(i.type, i._source, b ? b.type : null);
-        yt.setExtraStackFrame(R);
+        var b = i._owner, I = je(i.type, i._source, b ? b.type : null);
+        St.setExtraStackFrame(I);
       } else
-        yt.setExtraStackFrame(null);
+        St.setExtraStackFrame(null);
     }
-    function vr(i, b, R, D, X) {
+    function yr(i, b, I, j, X) {
       {
         var W = Function.call.bind($e);
-        for (var B in i)
-          if (W(i, B)) {
-            var L = void 0;
+        for (var N in i)
+          if (W(i, N)) {
+            var z = void 0;
             try {
-              if (typeof i[B] != "function") {
-                var ee = Error((D || "React class") + ": " + R + " type `" + B + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[B] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+              if (typeof i[N] != "function") {
+                var ee = Error((j || "React class") + ": " + I + " type `" + N + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[N] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                 throw ee.name = "Invariant Violation", ee;
               }
-              L = i[B](b, B, D, R, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+              z = i[N](b, N, j, I, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             } catch (q) {
-              L = q;
+              z = q;
             }
-            L && !(L instanceof Error) && (Ae(X), C("%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).", D || "React class", R, B, typeof L), Ae(null)), L instanceof Error && !(L.message in vt) && (vt[L.message] = !0, Ae(X), C("Failed %s type: %s", R, L.message), Ae(null));
+            z && !(z instanceof Error) && (Ae(X), 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, N, typeof z), Ae(null)), z instanceof Error && !(z.message in yt) && (yt[z.message] = !0, Ae(X), x("Failed %s type: %s", I, z.message), Ae(null));
           }
       }
     }
-    var yr = Array.isArray;
+    var Sr = Array.isArray;
     function He(i) {
-      return yr(i);
+      return Sr(i);
     }
-    function Sr(i) {
+    function _r(i) {
       {
-        var b = typeof Symbol == "function" && Symbol.toStringTag, R = b && i[Symbol.toStringTag] || i.constructor.name || "Object";
-        return R;
+        var b = typeof Symbol == "function" && Symbol.toStringTag, I = b && i[Symbol.toStringTag] || i.constructor.name || "Object";
+        return I;
       }
     }
-    function _r(i) {
+    function br(i) {
       try {
-        return St(i), !1;
+        return _t(i), !1;
       } catch {
         return !0;
       }
     }
-    function St(i) {
+    function _t(i) {
       return "" + i;
     }
-    function _t(i) {
-      if (_r(i))
-        return C("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Sr(i)), St(i);
+    function bt(i) {
+      if (br(i))
+        return x("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", _r(i)), _t(i);
     }
-    var be = y.ReactCurrentOwner, br = {
+    var be = y.ReactCurrentOwner, Er = {
       key: !0,
       ref: !0,
       __self: !0,
       __source: !0
-    }, bt, Et, qe;
+    }, Et, wt, qe;
     qe = {};
-    function Er(i) {
+    function wr(i) {
       if ($e.call(i, "ref")) {
         var b = Object.getOwnPropertyDescriptor(i, "ref").get;
         if (b && b.isReactWarning)
@@ -396,7 +396,7 @@ function Ur() {
       }
       return i.ref !== void 0;
     }
-    function wr(i) {
+    function xr(i) {
       if ($e.call(i, "key")) {
         var b = Object.getOwnPropertyDescriptor(i, "key").get;
         if (b && b.isReactWarning)
@@ -406,86 +406,86 @@ function Ur() {
     }
     function Cr(i, b) {
       if (typeof i.ref == "string" && be.current && b && be.current.stateNode !== b) {
-        var R = N(be.current.type);
-        qe[R] || (C('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(be.current.type), i.ref), qe[R] = !0);
+        var I = Y(be.current.type);
+        qe[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', Y(be.current.type), i.ref), qe[I] = !0);
       }
     }
-    function xr(i, b) {
+    function Rr(i, b) {
       {
-        var R = function() {
-          bt || (bt = !0, C("%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)", b));
+        var I = function() {
+          Et || (Et = !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)", b));
         };
-        R.isReactWarning = !0, Object.defineProperty(i, "key", {
-          get: R,
+        I.isReactWarning = !0, Object.defineProperty(i, "key", {
+          get: I,
           configurable: !0
         });
       }
     }
-    function Rr(i, b) {
+    function Ir(i, b) {
       {
-        var R = function() {
-          Et || (Et = !0, C("%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)", b));
+        var I = function() {
+          wt || (wt = !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)", b));
         };
-        R.isReactWarning = !0, Object.defineProperty(i, "ref", {
-          get: R,
+        I.isReactWarning = !0, Object.defineProperty(i, "ref", {
+          get: I,
           configurable: !0
         });
       }
     }
-    var Ir = function(i, b, R, D, X, W, B) {
-      var L = {
+    var Or = function(i, b, I, j, X, W, N) {
+      var z = {
         // 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: b,
-        ref: R,
-        props: B,
+        ref: I,
+        props: N,
         // Record the component responsible for creating this element.
         _owner: W
       };
-      return L._store = {}, Object.defineProperty(L._store, "validated", {
+      return z._store = {}, Object.defineProperty(z._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: !1
-      }), Object.defineProperty(L, "_self", {
+      }), Object.defineProperty(z, "_self", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: D
-      }), Object.defineProperty(L, "_source", {
+        value: j
+      }), Object.defineProperty(z, "_source", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
         value: X
-      }), Object.freeze && (Object.freeze(L.props), Object.freeze(L)), L;
+      }), Object.freeze && (Object.freeze(z.props), Object.freeze(z)), z;
     };
-    function Or(i, b, R, D, X) {
+    function Tr(i, b, I, j, X) {
       {
-        var W, B = {}, L = null, ee = null;
-        R !== void 0 && (_t(R), L = "" + R), wr(b) && (_t(b.key), L = "" + b.key), Er(b) && (ee = b.ref, Cr(b, X));
+        var W, N = {}, z = null, ee = null;
+        I !== void 0 && (bt(I), z = "" + I), xr(b) && (bt(b.key), z = "" + b.key), wr(b) && (ee = b.ref, Cr(b, X));
         for (W in b)
-          $e.call(b, W) && !br.hasOwnProperty(W) && (B[W] = b[W]);
+          $e.call(b, W) && !Er.hasOwnProperty(W) && (N[W] = b[W]);
         if (i && i.defaultProps) {
           var q = i.defaultProps;
           for (W in q)
-            B[W] === void 0 && (B[W] = q[W]);
+            N[W] === void 0 && (N[W] = q[W]);
         }
-        if (L || ee) {
-          var G = typeof i == "function" ? i.displayName || i.name || "Unknown" : i;
-          L && xr(B, G), ee && Rr(B, G);
+        if (z || ee) {
+          var J = typeof i == "function" ? i.displayName || i.name || "Unknown" : i;
+          z && Rr(N, J), ee && Ir(N, J);
         }
-        return Ir(i, L, ee, X, D, be.current, B);
+        return Or(i, z, ee, X, j, be.current, N);
       }
     }
-    var Ge = y.ReactCurrentOwner, wt = y.ReactDebugCurrentFrame;
+    var Ge = y.ReactCurrentOwner, xt = y.ReactDebugCurrentFrame;
     function he(i) {
       if (i) {
-        var b = i._owner, R = De(i.type, i._source, b ? b.type : null);
-        wt.setExtraStackFrame(R);
+        var b = i._owner, I = je(i.type, i._source, b ? b.type : null);
+        xt.setExtraStackFrame(I);
       } else
-        wt.setExtraStackFrame(null);
+        xt.setExtraStackFrame(null);
     }
     var Je;
     Je = !1;
@@ -495,7 +495,7 @@ function Ur() {
     function Ct() {
       {
         if (Ge.current) {
-          var i = N(Ge.current.type);
+          var i = Y(Ge.current.type);
           if (i)
             return `
@@ -504,145 +504,145 @@ Check the render method of \`` + i + "`.";
         return "";
       }
     }
-    function Tr(i) {
+    function kr(i) {
       {
         if (i !== void 0) {
-          var b = i.fileName.replace(/^.*[\\\/]/, ""), R = i.lineNumber;
+          var b = i.fileName.replace(/^.*[\\\/]/, ""), I = i.lineNumber;
           return `
-Check your code at ` + b + ":" + R + ".";
+Check your code at ` + b + ":" + I + ".";
         }
         return "";
       }
     }
-    var xt = {};
-    function kr(i) {
+    var Rt = {};
+    function Pr(i) {
       {
         var b = Ct();
         if (!b) {
-          var R = typeof i == "string" ? i : i.displayName || i.name;
-          R && (b = `
+          var I = typeof i == "string" ? i : i.displayName || i.name;
+          I && (b = `
-Check the top-level render call using <` + R + ">.");
+Check the top-level render call using <` + I + ">.");
         }
         return b;
       }
     }
-    function Rt(i, b) {
+    function It(i, b) {
       {
         if (!i._store || i._store.validated || i.key != null)
           return;
         i._store.validated = !0;
-        var R = kr(b);
-        if (xt[R])
+        var I = Pr(b);
+        if (Rt[I])
           return;
-        xt[R] = !0;
-        var D = "";
-        i && i._owner && i._owner !== Ge.current && (D = " It was passed a child from " + N(i._owner.type) + "."), he(i), C('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', R, D), he(null);
+        Rt[I] = !0;
+        var j = "";
+        i && i._owner && i._owner !== Ge.current && (j = " It was passed a child from " + Y(i._owner.type) + "."), he(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), he(null);
       }
     }
-    function It(i, b) {
+    function Ot(i, b) {
       {
         if (typeof i != "object")
           return;
         if (He(i))
-          for (var R = 0; R < i.length; R++) {
-            var D = i[R];
-            Ze(D) && Rt(D, b);
+          for (var I = 0; I < i.length; I++) {
+            var j = i[I];
+            Ze(j) && It(j, b);
           }
         else if (Ze(i))
           i._store && (i._store.validated = !0);
         else if (i) {
-          var X = I(i);
+          var X = O(i);
           if (typeof X == "function" && X !== i.entries)
-            for (var W = X.call(i), B; !(B = W.next()).done; )
-              Ze(B.value) && Rt(B.value, b);
+            for (var W = X.call(i), N; !(N = W.next()).done; )
+              Ze(N.value) && It(N.value, b);
         }
       }
     }
-    function Pr(i) {
+    function Mr(i) {
       {
         var b = i.type;
         if (b == null || typeof b == "string")
           return;
-        var R;
+        var I;
         if (typeof b == "function")
-          R = b.propTypes;
+          I = b.propTypes;
         else if (typeof b == "object" && (b.$$typeof === l || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
         b.$$typeof === c))
-          R = b.propTypes;
+          I = b.propTypes;
         else
           return;
-        if (R) {
-          var D = N(b);
-          vr(R, i.props, "prop", D, i);
+        if (I) {
+          var j = Y(b);
+          yr(I, i.props, "prop", j, i);
         } else if (b.PropTypes !== void 0 && !Je) {
           Je = !0;
-          var X = N(b);
-          C("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", X || "Unknown");
+          var X = Y(b);
+          x("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", X || "Unknown");
         }
-        typeof b.getDefaultProps == "function" && !b.getDefaultProps.isReactClassApproved && C("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof b.getDefaultProps == "function" && !b.getDefaultProps.isReactClassApproved && x("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function Mr(i) {
+    function Dr(i) {
       {
-        for (var b = Object.keys(i.props), R = 0; R < b.length; R++) {
-          var D = b[R];
-          if (D !== "children" && D !== "key") {
-            he(i), C("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", D), he(null);
+        for (var b = Object.keys(i.props), I = 0; I < b.length; I++) {
+          var j = b[I];
+          if (j !== "children" && j !== "key") {
+            he(i), x("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", j), he(null);
             break;
           }
         }
-        i.ref !== null && (he(i), C("Invalid attribute `ref` supplied to `React.Fragment`."), he(null));
+        i.ref !== null && (he(i), x("Invalid attribute `ref` supplied to `React.Fragment`."), he(null));
       }
     }
-    function Ot(i, b, R, D, X, W) {
+    function Tt(i, b, I, j, X, W) {
       {
-        var B = j(i);
-        if (!B) {
-          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 ee = Tr(X);
-          ee ? L += ee : L += Ct();
+        var N = D(i);
+        if (!N) {
+          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 ee = kr(X);
+          ee ? z += ee : z += Ct();
           var q;
-          i === null ? q = "null" : He(i) ? q = "array" : i !== void 0 && i.$$typeof === t ? (q = "<" + (N(i.type) || "Unknown") + " />", L = " Did you accidentally export a JSX literal instead of a component?") : q = typeof i, C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", q, L);
+          i === null ? q = "null" : He(i) ? q = "array" : i !== void 0 && i.$$typeof === t ? (q = "<" + (Y(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 G = Or(i, b, R, X, W);
-        if (G == null)
-          return G;
-        if (B) {
+        var J = Tr(i, b, I, X, W);
+        if (J == null)
+          return J;
+        if (N) {
           var re = b.children;
           if (re !== void 0)
-            if (D)
+            if (j)
               if (He(re)) {
                 for (var ve = 0; ve < re.length; ve++)
-                  It(re[ve], i);
+                  Ot(re[ve], i);
                 Object.freeze && Object.freeze(re);
               } else
-                C("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+                x("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
             else
-              It(re, i);
+              Ot(re, i);
         }
-        return i === n ? Mr(G) : Pr(G), G;
+        return i === n ? Dr(J) : Mr(J), J;
       }
     }
-    function jr(i, b, R) {
-      return Ot(i, b, R, !0);
+    function jr(i, b, I) {
+      return Tt(i, b, I, !0);
     }
-    function Dr(i, b, R) {
-      return Ot(i, b, R, !1);
+    function $r(i, b, I) {
+      return Tt(i, b, I, !1);
     }
-    var $r = Dr, Ar = jr;
-    we.Fragment = n, we.jsx = $r, we.jsxs = Ar;
+    var Ar = $r, Lr = jr;
+    we.Fragment = n, we.jsx = Ar, we.jsxs = Lr;
   }()), we;
 }
 (function(e) {
-  process.env.NODE_ENV === "production" ? e.exports = Xr() : e.exports = Ur();
-})(Nr);
-const Wr = Ie.Fragment, T = Ie.jsx, le = Ie.jsxs;
-let Vr = (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 Fr {
+  process.env.NODE_ENV === "production" ? e.exports = Ur() : e.exports = Wr();
+})(Xr);
+const Vr = Ie.Fragment, k = Ie.jsx, le = Ie.jsxs;
+let Fr = (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 Kr {
   constructor(t, r, n = null) {
     this._socket = t, this.userId = n, this.room = r, this.toUnregister = [
       () => {
@@ -669,7 +669,7 @@ class Fr {
    * @returns the result of the call.
    */
   async _callServerRPC(t, r) {
-    const n = Vr();
+    const n = Fr();
     return new Promise((o, s) => {
       this._socket.once(`${this.room}._result.${n}`, (a) => {
         a.hasOwnProperty("ok") ? o(a.ok) : s(a.err);
@@ -738,7 +738,7 @@ class Fr {
     return await this._callServerRPC("call", { name: t, params: r });
   }
 }
-const Kr = ({
+const Hr = ({
   socket: e,
   room: t,
   onJoined: r = () => {
@@ -747,7 +747,7 @@ const Kr = ({
   },
   userId: o = null
 }) => {
-  const s = new Fr(e, t, o);
+  const s = new Kr(e, t, o);
   return new Promise((a) => {
     let u = !0;
     e.on(`${t}.isMaster`, () => {
@@ -761,7 +761,7 @@ const Kr = ({
       });
     }), e.emit("joinSuperSocket", { room: t, userId: o });
   });
-}, it = g.createContext(), Hr = () => /* @__PURE__ */ T(
+}, at = g.createContext(), qr = () => /* @__PURE__ */ k(
   "div",
   {
     style: {
@@ -773,16 +773,16 @@ const Kr = ({
       justifyContent: "center",
       alignItems: "center"
     },
-    children: /* @__PURE__ */ T("h2", { children: "🌀 Loading..." })
+    children: /* @__PURE__ */ k("h2", { children: "🌀 Loading..." })
   }
-), nr = ({
+), or = ({
   socket: e,
   room: t,
   channel: r = "default",
-  LoadingComponent: n = Hr,
+  LoadingComponent: n = qr,
   children: o
 }) => {
-  const [s, a] = g.useState(!1), [u, l] = g.useState(!1), [d, f] = g.useState(null), c = g.useRef(null), h = g.useRef(!1), _ = _e(it), v = g.useRef(!1);
+  const [s, a] = g.useState(!1), [u, l] = g.useState(!1), [d, f] = g.useState(null), c = g.useRef(null), h = g.useRef(!1), S = _e(at), v = g.useRef(!1);
   return g.useEffect(() => (h.current = !0, () => {
     h.current = !1;
   }), []), g.useEffect(() => {
@@ -794,7 +794,7 @@ const Kr = ({
     return e.on("disconnect", E), () => {
       e.off("disconnect", E);
     };
-  }, [r, e]), g.useEffect(() => e ? (e.connected || e.connect(), console.log(`Try to connect to wire ${t} on channel ${r}`), v.current || (v.current = !0, Kr({
+  }, [r, e]), g.useEffect(() => e ? (e.connected || e.connect(), console.log(`Try to connect to wire ${t} on channel ${r}`), v.current || (v.current = !0, Hr({
     socket: e,
     room: t,
     onMaster: () => {
@@ -806,14 +806,14 @@ const Kr = ({
   })), () => {
     var E;
     (E = c.current) == null || E.leave();
-  }) : null, [r, t, e]), !s || !d ? /* @__PURE__ */ T(n, {}) : /* @__PURE__ */ T(
-    it.Provider,
+  }) : null, [r, t, e]), !s || !d ? /* @__PURE__ */ k(n, {}) : /* @__PURE__ */ k(
+    at.Provider,
     {
-      value: { ..._, [r]: { wire: d, joined: s, isMaster: u, room: t } },
+      value: { ...S, [r]: { wire: d, joined: s, isMaster: u, room: t } },
       children: o
     }
   );
-}, Xe = (e = "default") => (_e(it) || {})[e], jt = (e) => {
+}, Xe = (e = "default") => (_e(at) || {})[e], jt = (e) => {
   let t;
   const r = /* @__PURE__ */ new Set(), n = (l, d) => {
     const f = typeof l == "function" ? l(t) : l;
@@ -828,14 +828,14 @@ const Kr = ({
   } };
   return t = e(n, o, u), u;
 }, Ue = (e) => e ? jt(e) : jt;
-var at = {}, qr = {
+var ct = {}, Gr = {
   get exports() {
-    return at;
+    return ct;
   },
   set exports(e) {
-    at = e;
+    ct = e;
   }
-}, Qe = {}, Ye = {}, Gr = {
+}, Qe = {}, Ye = {}, Jr = {
   get exports() {
     return Ye;
   },
@@ -852,32 +852,32 @@ var at = {}, qr = {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Dt;
-function Jr() {
-  if (Dt)
+var $t;
+function Zr() {
+  if ($t)
     return et;
-  Dt = 1;
+  $t = 1;
   var e = g;
   function t(c, h) {
     return c === h && (c !== 0 || 1 / c === 1 / h) || c !== c && h !== h;
   }
   var r = typeof Object.is == "function" ? Object.is : t, n = e.useState, o = e.useEffect, s = e.useLayoutEffect, a = e.useDebugValue;
   function u(c, h) {
-    var _ = h(), v = n({ inst: { value: _, getSnapshot: h } }), E = v[0].inst, I = v[1];
+    var S = h(), v = n({ inst: { value: S, getSnapshot: h } }), E = v[0].inst, O = v[1];
     return s(function() {
-      E.value = _, E.getSnapshot = h, l(E) && I({ inst: E });
-    }, [c, _, h]), o(function() {
-      return l(E) && I({ inst: E }), c(function() {
-        l(E) && I({ inst: E });
+      E.value = S, E.getSnapshot = h, l(E) && O({ inst: E });
+    }, [c, S, h]), o(function() {
+      return l(E) && O({ inst: E }), c(function() {
+        l(E) && O({ inst: E });
       });
-    }, [c]), a(_), _;
+    }, [c]), a(S), S;
   }
   function l(c) {
     var h = c.getSnapshot;
     c = c.value;
     try {
-      var _ = h();
-      return !r(c, _);
+      var S = h();
+      return !r(c, S);
     } catch {
       return !0;
     }
@@ -898,82 +898,82 @@ var tt = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var $t;
-function Zr() {
-  return $t || ($t = 1, process.env.NODE_ENV !== "production" && function() {
+var At;
+function Qr() {
+  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 = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function r(x) {
+    function r(C) {
       {
-        for (var p = arguments.length, w = new Array(p > 1 ? p - 1 : 0), m = 1; m < p; m++)
-          w[m - 1] = arguments[m];
-        n("error", x, w);
+        for (var p = arguments.length, _ = new Array(p > 1 ? p - 1 : 0), m = 1; m < p; m++)
+          _[m - 1] = arguments[m];
+        n("error", C, _);
       }
     }
-    function n(x, p, w) {
+    function n(C, p, _) {
       {
-        var m = t.ReactDebugCurrentFrame, S = m.getStackAddendum();
-        S !== "" && (p += "%s", w = w.concat([S]));
-        var O = w.map(function(k) {
-          return String(k);
+        var m = t.ReactDebugCurrentFrame, w = m.getStackAddendum();
+        w !== "" && (p += "%s", _ = _.concat([w]));
+        var R = _.map(function(T) {
+          return String(T);
         });
-        O.unshift("Warning: " + p), Function.prototype.apply.call(console[x], console, O);
+        R.unshift("Warning: " + p), Function.prototype.apply.call(console[C], console, R);
       }
     }
-    function o(x, p) {
-      return x === p && (x !== 0 || 1 / x === 1 / p) || x !== x && p !== p;
+    function o(C, p) {
+      return C === p && (C !== 0 || 1 / C === 1 / p) || C !== C && 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 h(x, p, w) {
+    function h(C, p, _) {
       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 m = p();
       if (!c) {
-        var S = p();
-        s(m, S) || (r("The result of getSnapshot should be cached to avoid an infinite loop"), c = !0);
+        var w = p();
+        s(m, w) || (r("The result of getSnapshot should be cached to avoid an infinite loop"), c = !0);
       }
-      var O = a({
+      var R = a({
         inst: {
           value: m,
           getSnapshot: p
         }
-      }), k = O[0].inst, j = O[1];
+      }), T = R[0].inst, D = R[1];
       return l(function() {
-        k.value = m, k.getSnapshot = p, _(k) && j({
-          inst: k
+        T.value = m, T.getSnapshot = p, S(T) && D({
+          inst: T
         });
-      }, [x, m, p]), u(function() {
-        _(k) && j({
-          inst: k
+      }, [C, m, p]), u(function() {
+        S(T) && D({
+          inst: T
         });
         var M = function() {
-          _(k) && j({
-            inst: k
+          S(T) && D({
+            inst: T
           });
         };
-        return x(M);
-      }, [x]), d(m), m;
+        return C(M);
+      }, [C]), d(m), m;
     }
-    function _(x) {
-      var p = x.getSnapshot, w = x.value;
+    function S(C) {
+      var p = C.getSnapshot, _ = C.value;
       try {
         var m = p();
-        return !s(w, m);
+        return !s(_, m);
       } catch {
         return !0;
       }
     }
-    function v(x, p, w) {
+    function v(C, p, _) {
       return p();
     }
-    var E = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", I = !E, y = I ? v : h, C = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : y;
-    tt.useSyncExternalStore = C, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+    var E = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", O = !E, y = O ? v : h, x = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : y;
+    tt.useSyncExternalStore = x, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
   }()), tt;
 }
-var At;
-function or() {
-  return At || (At = 1, function(e) {
-    process.env.NODE_ENV === "production" ? e.exports = Jr() : e.exports = Zr();
-  }(Gr)), Ye;
+var Lt;
+function sr() {
+  return Lt || (Lt = 1, function(e) {
+    process.env.NODE_ENV === "production" ? e.exports = Zr() : e.exports = Qr();
+  }(Jr)), Ye;
 }
 /**
  * @license React
@@ -984,17 +984,17 @@ function or() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Lt;
-function Qr() {
-  if (Lt)
+var zt;
+function en() {
+  if (zt)
     return Qe;
-  Lt = 1;
-  var e = g, t = or();
+  zt = 1;
+  var e = g, t = sr();
   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 Qe.useSyncExternalStoreWithSelector = function(d, f, c, h, _) {
+  return Qe.useSyncExternalStoreWithSelector = function(d, f, c, h, S) {
     var v = s(null);
     if (v.current === null) {
       var E = { hasValue: !1, value: null };
@@ -1003,30 +1003,30 @@ function Qr() {
       E = v.current;
     v = u(function() {
       function y(m) {
-        if (!C) {
-          if (C = !0, x = m, m = h(m), _ !== void 0 && E.hasValue) {
-            var S = E.value;
-            if (_(S, m))
-              return p = S;
+        if (!x) {
+          if (x = !0, C = m, m = h(m), S !== void 0 && E.hasValue) {
+            var w = E.value;
+            if (S(w, m))
+              return p = w;
           }
           return p = m;
         }
-        if (S = p, n(x, m))
-          return S;
-        var O = h(m);
-        return _ !== void 0 && _(S, O) ? S : (x = m, p = O);
+        if (w = p, n(C, m))
+          return w;
+        var R = h(m);
+        return S !== void 0 && S(w, R) ? w : (C = m, p = R);
       }
-      var C = !1, x, p, w = c === void 0 ? null : c;
+      var x = !1, C, p, _ = c === void 0 ? null : c;
       return [function() {
         return y(f());
-      }, w === null ? void 0 : function() {
-        return y(w());
+      }, _ === null ? void 0 : function() {
+        return y(_());
       }];
-    }, [f, c, h, _]);
-    var I = o(d, v[0], v[1]);
+    }, [f, c, h, S]);
+    var O = o(d, v[0], v[1]);
     return a(function() {
-      E.hasValue = !0, E.value = I;
-    }, [I]), l(I), I;
+      E.hasValue = !0, E.value = O;
+    }, [O]), l(O), O;
   }, Qe;
 }
 var rt = {};
@@ -1039,97 +1039,97 @@ var rt = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var zt;
-function en() {
-  return zt || (zt = 1, process.env.NODE_ENV !== "production" && function() {
+var Yt;
+function tn() {
+  return Yt || (Yt = 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 = or();
+    var e = g, t = sr();
     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, h, _, v) {
-      var E = s(null), I;
-      E.current === null ? (I = {
+    function d(f, c, h, S, v) {
+      var E = s(null), O;
+      E.current === null ? (O = {
         hasValue: !1,
         value: null
-      }, E.current = I) : I = E.current;
+      }, E.current = O) : O = E.current;
       var y = u(function() {
-        var w = !1, m, S, O = function(A) {
-          if (!w) {
-            w = !0, m = A;
-            var N = _(A);
-            if (v !== void 0 && I.hasValue) {
-              var U = I.value;
-              if (v(U, N))
-                return S = U, U;
+        var _ = !1, m, w, R = function(A) {
+          if (!_) {
+            _ = !0, m = A;
+            var Y = S(A);
+            if (v !== void 0 && O.hasValue) {
+              var U = O.value;
+              if (v(U, Y))
+                return w = U, U;
             }
-            return S = N, N;
+            return w = Y, Y;
           }
-          var J = m, P = S;
-          if (n(J, A))
+          var G = m, P = w;
+          if (n(G, A))
             return P;
-          var $ = _(A);
-          return v !== void 0 && v(P, $) ? P : (m = A, S = $, $);
-        }, k = h === void 0 ? null : h, j = function() {
-          return O(c());
-        }, M = k === null ? void 0 : function() {
-          return O(k());
+          var $ = S(A);
+          return v !== void 0 && v(P, $) ? P : (m = A, w = $, $);
+        }, T = h === void 0 ? null : h, D = function() {
+          return R(c());
+        }, M = T === null ? void 0 : function() {
+          return R(T());
         };
-        return [j, M];
-      }, [c, h, _, v]), C = y[0], x = y[1], p = o(f, C, x);
+        return [D, M];
+      }, [c, h, S, v]), x = y[0], C = y[1], p = o(f, x, C);
       return a(function() {
-        I.hasValue = !0, I.value = p;
+        O.hasValue = !0, O.value = p;
       }, [p]), l(p), p;
     }
     rt.useSyncExternalStoreWithSelector = d, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
   }()), rt;
 }
 (function(e) {
-  process.env.NODE_ENV === "production" ? e.exports = Qr() : e.exports = en();
-})(qr);
-const tn = /* @__PURE__ */ Br(at), { useSyncExternalStoreWithSelector: rn } = tn;
+  process.env.NODE_ENV === "production" ? e.exports = en() : e.exports = tn();
+})(Gr);
+const rn = /* @__PURE__ */ Nr(ct), { useSyncExternalStoreWithSelector: nn } = rn;
 function We(e, t = e.getState, r) {
-  const n = rn(
+  const n = nn(
     e.subscribe,
     e.getState,
     e.getServerState || e.getState,
     t,
     r
   );
-  return Yr(n), n;
+  return Br(n), n;
 }
 const ye = (e, t) => e.classList && e.classList.contains(t), Oe = (e, t) => ye(e, t) ? e : e.parentNode ? Oe(e.parentNode, t) : !1, ze = ([e, t], [r, n]) => {
   const o = Math.abs(e - r), s = Math.abs(t - n);
   return Math.hypot(o, s);
-}, sr = (e, t, r) => {
+}, ir = (e, t, r) => {
   const n = r * Math.PI / 180, o = e * Math.cos(n) - t * Math.sin(n), s = e * Math.sin(n) + t * Math.cos(n);
   return [o, s];
-}, ct = ([e, t], { scale: r, rotate: n, translateX: o, translateY: s }) => {
+}, ut = ([e, t], { scale: r, rotate: n, translateX: o, translateY: s }) => {
   const a = (e - o) / r, u = (t - s) / r;
-  return sr(a, u, -n);
+  return ir(a, u, -n);
 }, Be = ([e, t], { scale: r, rotate: n, translateX: o, translateY: s }) => {
-  const [a, u] = sr(e, t, n);
+  const [a, u] = ir(e, t, n);
   return [a * r + o, u * r + s];
-}, Yt = (e, t, r, n) => {
-  const o = e.x, s = e.y, a = t.x, u = t.y, l = r.x, d = r.y, f = a - o, c = u - s, h = o - l, _ = s - d, v = f * f + c * c, E = 2 * (h * f + _ * c), I = h * h + _ * _ - n * n, y = E * E - 4 * v * I;
+}, Bt = (e, t, r, n) => {
+  const o = e.x, s = e.y, a = t.x, u = t.y, l = r.x, d = r.y, f = a - o, c = u - s, h = o - l, S = s - d, v = f * f + c * c, E = 2 * (h * f + S * c), O = h * h + S * S - n * n, y = E * E - 4 * v * O;
   if (y < 0)
     return [];
-  const C = (-E + Math.sqrt(y)) / (2 * v), x = (-E - Math.sqrt(y)) / (2 * v), p = [];
-  return C >= 0 && C <= 1 && p.push({ x: o + C * f, y: s + C * c }), x >= 0 && x <= 1 && p.push({ x: o + x * f, y: s + x * c }), p;
-}, ft = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, nn = (e, t) => Array.from(e.querySelectorAll(".corner")).every((n) => {
+  const x = (-E + Math.sqrt(y)) / (2 * v), C = (-E - Math.sqrt(y)) / (2 * v), p = [];
+  return x >= 0 && x <= 1 && p.push({ x: o + x * f, y: s + x * c }), C >= 0 && C <= 1 && p.push({ x: o + C * f, y: s + C * c }), p;
+}, dt = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, on = (e, t) => Array.from(e.querySelectorAll(".corner")).every((n) => {
   const { top: o, left: s } = n.getBoundingClientRect();
-  return ft({ x: s, y: o }, t);
-}), on = (e, t) => {
+  return dt({ x: s, y: o }, t);
+}), sn = (e, t) => {
   const r = t.getBoundingClientRect();
-  return nn(e, r);
+  return on(e, r);
 }, Ne = (e, t) => {
   try {
-    const n = e.getElementsByClassName(`item ${t}`)[0];
-    return n || console.error(`Missing item ${t}`), n;
+    const r = document.getElementById(`${e}__${t}`);
+    return r || console.error(`Missing item ${t}`), r;
   } catch {
     console.error(
-      `Error while getting item with id ${t} with wrapper`,
+      `Error while getting item with id ${t} inside wrapper`,
       e
     );
     return;
@@ -1143,7 +1143,7 @@ const ye = (e, t) => e.classList && e.classList.contains(t), Oe = (e, t) => ye(e
     JSON.stringify(e == null ? void 0 : e.dataset),
     (n = e == null ? void 0 : e.dataset) == null ? void 0 : n.id
   ), t;
-}, sn = (e, t = document) => {
+}, an = (e, t) => {
   const r = e.reduce((n, o) => {
     const s = Ne(t, o);
     if (!s)
@@ -1158,32 +1158,32 @@ const ye = (e, t) => e.classList && e.classList.contains(t), Oe = (e, t) => ye(e
     }, f.left = Math.min(a, f.left), f.top = Math.min(l, f.top), f.right = Math.max(u, f.right), f.bottom = Math.max(d, f.bottom), f;
   }, null);
   return r && (r.width = r.right - r.left, r.height = r.bottom - r.top, r);
-}, ir = (e, t, r = null) => (r === null && (r = /* @__PURE__ */ new Set()), !Array.isArray(t) || t.length === 0 ? [] : t.map((n) => r.has(n) ? [] : (r.add(n), [
+}, ar = (e, t, r = null) => (r === null && (r = /* @__PURE__ */ new Set()), !Array.isArray(t) || t.length === 0 ? [] : t.map((n) => r.has(n) ? [] : (r.add(n), e[n] ? [
   n,
-  ...ir(
+  ...ar(
     e,
     e[n].linkedItems,
     r
   )
-])).flat()), Bt = (e, t, r) => {
-  const n = new Set(ir(e, r));
+] : [])).flat()), Nt = (e, t, r) => {
+  const n = new Set(ar(e, r));
   return t.filter((o) => n.has(o));
-}, an = ({ x: e, y: t, width: r, height: n }, { type: o = "grid", size: s = 1, offset: a = { x: 0, y: 0 } }) => {
+}, cn = ({ x: e, y: t, width: r, height: n }, { type: o = "grid", size: s = 1, offset: a = { x: 0, y: 0 } }) => {
   const [u, l] = [
     e + r / 2 - a.x,
     t + n / 2 - a.y
   ];
-  let d, f, c, h, _, v, E, I, y, C;
-  const x = s / 1.1547;
+  let d, f, c, h, S, v, E, O, y, x;
+  const C = s / 1.1547;
   switch (o) {
     case "grid":
       d = Math.round(u / s) * s, f = Math.round(l / s) * s;
       break;
     case "hexH":
-      c = 2 * x, h = 3 * s, _ = Math.round(u / c) * c, E = Math.round(l / h) * h, v = _ > u ? _ - x : _ + x, I = E > l ? E - 1.5 * s : E + 1.5 * s, y = Math.hypot(_ - u, E - l), C = Math.hypot(v - u, I - l), y < C ? (d = _, f = E) : (d = v, f = I);
+      c = 2 * C, h = 3 * s, S = Math.round(u / c) * c, E = Math.round(l / h) * h, v = S > u ? S - C : S + C, O = E > l ? E - 1.5 * s : E + 1.5 * s, y = Math.hypot(S - u, E - l), x = Math.hypot(v - u, O - l), y < x ? (d = S, f = E) : (d = v, f = O);
       break;
     case "hexV":
-      c = 3 * s, h = 2 * x, _ = Math.round(u / c) * c, E = Math.round(l / h) * h, v = _ > u ? _ - 1.5 * s : _ + 1.5 * s, I = E > l ? E - x : E + x, y = Math.hypot(_ - u, E - l), C = Math.hypot(v - u, I - l), y < C ? (d = _, f = E) : (d = v, f = I);
+      c = 3 * s, h = 2 * C, S = Math.round(u / c) * c, E = Math.round(l / h) * h, v = S > u ? S - 1.5 * s : S + 1.5 * s, O = E > l ? E - C : E + C, y = Math.hypot(S - u, E - l), x = Math.hypot(v - u, O - l), y < x ? (d = S, f = E) : (d = v, f = O);
       break;
     default:
       d = e + r / 2, f = t + n / 2;
@@ -1192,7 +1192,7 @@ const ye = (e, t) => e.classList && e.classList.contains(t), Oe = (e, t) => ye(e
     x: d + a.x - r / 2,
     y: f + a.y - n / 2
   };
-}, Nt = [
+}, Xt = [
   "#037758",
   "#99092a",
   "#067070",
@@ -1223,13 +1223,13 @@ const ye = (e, t) => e.classList && e.classList.contains(t), Oe = (e, t) => ye(e
   "#007a4b",
   "#bf0daa",
   "#af0ad8"
-], Xt = () => Nt[Math.floor(Math.random() * Nt.length)], cn = !1, dt = ({ wire: e, storeName: t, noSync: r = [], defaultValue: n }, o) => (s, a, u) => {
+], Ut = () => Xt[Math.floor(Math.random() * Xt.length)], un = !1, pt = ({ 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`);
-      cn && console.log("init from peer with value", _), s((v) => ({ ...v, ..._ }));
+      const S = await e.call(`${t}_getValue`);
+      un && console.log("init from peer with value", S), s((v) => ({ ...v, ...S }));
     } catch {
       n !== void 0 && s(n);
     }
@@ -1238,26 +1238,26 @@ const ye = (e, t) => e.classList && e.classList.contains(t), Oe = (e, t) => ye(e
         `${t}_getValue`,
         () => Object.fromEntries(
           Object.entries(a()).filter(
-            ([_, v]) => typeof v != "function" && !r.includes(_)
+            ([S, v]) => typeof v != "function" && !r.includes(S)
           )
         ),
         { invoke: "first" }
       )
     ), l.push(
-      e.subscribe(`${t}_call`, ([_, v]) => {
-        c[_](...v);
+      e.subscribe(`${t}_call`, ([S, v]) => {
+        c[S](...v);
       })
     ), s({ ready: !0 });
   })();
   const f = o(s, a, u), c = { ...f }, h = Object.fromEntries(
     // Send the update message on all method calls
-    Object.entries(f).map(([_, v]) => typeof v == "function" && !_.startsWith("get") && !r.includes(_) ? [_, (...I) => {
-      const y = v(...I);
-      return e.publish(`${t}_call`, [_, I]), y;
-    }] : [_, v])
+    Object.entries(f).map(([S, v]) => typeof v == "function" && !S.startsWith("get") && !r.includes(S) ? [S, (...O) => {
+      const y = v(...O);
+      return e.publish(`${t}_call`, [S, O]), y;
+    }] : [S, v])
   );
   return h.unsub = () => {
-    l.forEach((_) => _());
+    l.forEach((S) => S());
   }, h;
 };
 function Ve(e, t) {
@@ -1289,7 +1289,7 @@ function Ve(e, t) {
       return !1;
   return !0;
 }
-const ar = g.createContext(), un = (e, t) => ({
+const cr = g.createContext(), ln = (e, t) => ({
   items: {},
   getItems: () => t().items,
   setItems: (r) => e({ items: r }),
@@ -1308,7 +1308,7 @@ const ar = g.createContext(), un = (e, t) => ({
       });
     }), { items: s };
   })
-}), ln = (e, t) => ({
+}), fn = (e, t) => ({
   itemIds: [],
   setItemIds: (r) => e({ itemIds: r }),
   getItemIds: () => t().itemIds,
@@ -1327,7 +1327,7 @@ const ar = g.createContext(), un = (e, t) => ({
   updateManyItemIds: (r) => e((n) => ({
     items: n.itemIds.map((o, s) => r[s] !== void 0 ? r[s] : o)
   }))
-}), fn = (e, t) => ({
+}), dn = (e, t) => ({
   removeItemsById: (r) => e((n) => ({
     itemIds: n.itemIds.filter((o) => !r.includes(o)),
     items: Object.fromEntries(
@@ -1360,25 +1360,25 @@ const ar = g.createContext(), un = (e, t) => ({
       itemIds: s
     };
   })
-}), dn = (e, t) => ({
+}), pn = (e, t) => ({
   boardConfig: {},
   getBoardConfig: () => t().boardConfig,
   setBoardConfig: (r) => e({ boardConfig: r }),
   updateBoardConfig: (r) => e((n) => ({ boardConfig: { ...n.boardConfig, ...r } }))
-}), pn = (e, t) => ({
+}), mn = (e, t) => ({
   session: {},
   getSessionInfo: () => t().session,
   setSessionInfo: (r) => e({ session: r }),
   updateSessionInfo: (r) => e((n) => ({ session: { ...n.session, ...r } }))
-}), Ut = ({ storeName: e, children: t, defaultValue: r }) => {
+}), Wt = ({ storeName: e, children: t, defaultValue: r }) => {
   const { wire: n } = Xe("room"), [o, s] = g.useState(!1), [a] = g.useState(
     () => Ue(
-      dt({ wire: n, storeName: e, defaultValue: r }, (...u) => ({
-        ...un(...u),
+      pt({ wire: n, storeName: e, defaultValue: r }, (...u) => ({
         ...ln(...u),
         ...fn(...u),
         ...dn(...u),
-        ...pn(...u)
+        ...pn(...u),
+        ...mn(...u)
       }))
     )
   );
@@ -1386,11 +1386,11 @@ const ar = g.createContext(), un = (e, t) => ({
     const u = a.subscribe((l) => {
       l.ready && (u(), s(!0));
     });
-  }, [a]), o ? /* @__PURE__ */ T(ar.Provider, { value: a, children: t }) : null;
+  }, [a]), o ? /* @__PURE__ */ k(cr.Provider, { value: a, children: t }) : null;
 }, oe = (e, t) => {
-  const r = _e(ar);
+  const r = _e(cr);
   return We(r, e, t || Ve);
-}, ns = () => {
+}, os = () => {
   const [e, t] = oe((n) => [
     n.itemIds,
     n.items
@@ -1399,7 +1399,7 @@ const ar = g.createContext(), un = (e, t) => ({
     () => e.map((n) => t[n]),
     [e, t]
   );
-}, os = () => {
+}, ss = () => {
   const [e, t, r] = oe((a) => [
     a.items,
     a.itemIds,
@@ -1411,19 +1411,19 @@ const ar = g.createContext(), un = (e, t) => ({
       o(a);
     });
   }, [e, t, r]), n;
-}, cr = 5e4, ur = g.createContext(), mn = (e, t) => ({
+}, ur = 5e4, lr = g.createContext(), gn = (e, t) => ({
   config: {
     itemTemplates: {},
     actions: {},
     uid: null,
     itemExtent: { x: 0, y: 0, radius: 0 },
     boardWrapperRect: {},
-    boardSize: cr
+    boardSize: ur
   },
   // TODO optimize when same values as before
   updateConfiguration: (r) => e((n) => ({ config: { ...n.config, ...r } })),
   getConfiguration: () => t().config
-}), gn = (e, t) => ({
+}), hn = (e, t) => ({
   boardState: {
     movingItems: !1,
     selecting: !1,
@@ -1437,7 +1437,7 @@ const ar = g.createContext(), un = (e, t) => ({
   // TODO optimize when same values as before
   updateBoardState: (r) => e((n) => ({ boardState: { ...n.boardState, ...r } })),
   getBoardState: () => t().boardState
-}), hn = (e, t) => ({
+}), vn = (e, t) => ({
   interactions: {},
   getInteractions: () => t().interactions,
   register: (r, n) => e((o) => {
@@ -1459,7 +1459,7 @@ const ar = g.createContext(), un = (e, t) => ({
       setTimeout(() => o(n), 0);
     });
   }
-}), vn = (e, t) => ({
+}), yn = (e, t) => ({
   selection: [],
   setSelection: (r) => e((n) => JSON.stringify(n.selection) !== JSON.stringify(r) ? { selection: r } : {}),
   getSelection: () => t().selection,
@@ -1479,33 +1479,36 @@ const ar = g.createContext(), un = (e, t) => ({
     const o = n.selectionBox;
     return !o || !r || o.top !== r.top || o.left !== r.left || o.width !== r.width || o.height !== r.height ? { selectionBox: r } : {};
   })
-}), Wt = ({ children: e }) => {
+}), Vt = ({ children: e }) => {
   const [t] = g.useState(
     () => Ue((...r) => ({
-      ...mn(...r),
       ...gn(...r),
       ...hn(...r),
-      ...vn(...r)
+      ...vn(...r),
+      ...yn(...r)
     }))
   );
-  return /* @__PURE__ */ T(ur.Provider, { value: t, children: e });
-}, Q = (e, t) => {
-  const r = _e(ur);
+  return /* @__PURE__ */ k(lr.Provider, { value: t, children: e });
+}, Z = (e, t) => {
+  const r = _e(lr);
   return We(r, e, t || Ve);
-}, ss = () => {
-  const [e] = Q((t) => [t.selection]);
+}, is = () => {
+  const [e] = Z((t) => [t.selection]);
+  return e;
+}, as = () => {
+  const [e] = Z((t) => [t.getSelection]);
   return e;
 };
-function pt(e) {
+function mt(e) {
   const t = Re(e);
-  return t.current = e, lt(() => Object.freeze({
+  return t.current = e, ft(() => Object.freeze({
     get current() {
       return t.current;
     }
   }), []);
 }
-function yn(e) {
-  const t = pt(e);
+function Sn(e) {
+  const t = mt(e);
   Pe(
     () => () => {
       t.current();
@@ -1514,11 +1517,11 @@ function yn(e) {
     []
   );
 }
-function mt(e, t, r, n = 0) {
+function gt(e, t, r, n = 0) {
   const o = Re(), s = Re(), a = Re(), u = () => {
     o.current && (clearTimeout(o.current), o.current = void 0), s.current && (clearTimeout(s.current), s.current = void 0);
   };
-  return yn(u), lt(
+  return Sn(u), ft(
     () => {
       const l = () => {
         if (!a.current)
@@ -1537,7 +1540,9 @@ function mt(e, t, r, n = 0) {
     [r, n, ...t]
   );
 }
-const Sn = 100, _n = 1e3, bn = 0.8, En = ({
+const _n = 100, bn = 1e3, En = 0.8;
+let nt = !1;
+const wn = ({
   x: e,
   y: t,
   scale: r,
@@ -1547,7 +1552,7 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
   boardSize: a
 }) => {
   let [u, l] = [e, t];
-  const d = ct(
+  const d = ut(
     [s.width / 2, s.height / 2],
     { translateX: u, translateY: l, scale: r, rotate: n }
   ), f = {
@@ -1556,37 +1561,37 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
   }, c = {
     x: a / 2,
     y: a / 2
-  }, h = ze(d, [f.x, f.y]), _ = Math.min(s.width, s.height), v = o.radius + _ / 2 / r - Sn / r;
+  }, h = ze(d, [f.x, f.y]), S = Math.min(s.width, s.height), v = o.radius + S / 2 / r - _n / r;
   if (h > v) {
-    const y = Yt(
+    const y = Bt(
       { x: d[0], y: d[1] },
       f,
       f,
       v - 1 / r
-    )[0], [C, x] = Be([-y.x, -y.y], {
+    )[0], [x, C] = Be([-y.x, -y.y], {
       translateX: s.width / 2,
       translateY: s.height / 2,
       scale: r,
       rotate: n
     });
-    u = C, l = x;
+    u = x, l = C;
   }
-  const E = ze(d, [c.x, c.y]), I = a / 2 - ze([0, 0], [s.width, s.height]) / r;
-  if (E > I) {
-    const y = Yt(
+  const E = ze(d, [c.x, c.y]), O = a / 2 - ze([0, 0], [s.width, s.height]) / r;
+  if (E > O) {
+    const y = Bt(
       { x: d[0], y: d[1] },
       c,
       c,
-      I - 1 / r
+      O - 1 / r
     )[0];
     if (y) {
-      const [C, x] = Be([-y.x, -y.y], {
+      const [x, C] = Be([-y.x, -y.y], {
         translateX: s.width / 2,
         translateY: s.height / 2,
         scale: r,
         rotate: n
       });
-      u = C, l = x;
+      u = x, l = C;
     }
   }
   return [u, l];
@@ -1597,66 +1602,68 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
     r,
     n,
     o
-  ] = Q((p) => [
+  ] = Z((p) => [
     p.getBoardState,
     p.updateBoardState,
     p.config.itemExtent,
     p.getConfiguration,
     p.updateConfiguration
   ]), s = g.useRef([0.15, 5]), [a] = oe((p) => [p.getItemList]), u = g.useCallback(() => {
-    const { translateX: p, translateY: w, scale: m, rotate: S } = e();
-    return { translateX: p, translateY: w, scale: m, rotate: S };
+    const { translateX: p, translateY: _, scale: m, rotate: w } = e();
+    return { translateX: p, translateY: _, scale: m, rotate: w };
   }, [e]), l = g.useCallback(
-    (p, w) => ct([p, w], e()),
+    (p, _) => ut([p, _], e()),
     [e]
   ), d = g.useCallback(
-    (p, w) => Be([p, w], e()),
+    (p, _) => Be([p, _], e()),
     [e]
   ), f = g.useCallback(
-    (p, w) => {
-      const { scale: m, rotate: S } = e();
-      return ct([p, w], {
+    (p, _) => {
+      const { scale: m, rotate: w } = e();
+      return ut([p, _], {
         translateX: 0,
         translateY: 0,
-        rotate: S,
+        rotate: w,
         scale: m
       });
     },
     [e]
   ), c = g.useCallback((p) => p > s.current[1] ? s.current[1] : p < s.current[0] ? s.current[0] : p, []), h = g.useCallback(
     (p) => {
-      const { itemExtent: w, boardWrapperRect: m, boardSize: S } = n(), O = e(), {
-        translateX: k,
-        translateY: j,
+      const { itemExtent: _, boardWrapperRect: m, boardSize: w } = n(), R = e(), {
+        translateX: T,
+        translateY: D,
         scale: M,
         rotate: A
       } = {
-        ...O,
-        ...p(O)
-      }, N = c(M);
-      let [U, J] = [k, j];
-      (k !== O.translateX || j !== O.translateY) && ([U, J] = En({
-        x: k,
-        y: j,
-        scale: N,
+        ...R,
+        ...p(R)
+      };
+      nt && console.log("New expected values: ", T, D, M, A);
+      const Y = c(M);
+      let [U, G] = [T, D];
+      (T !== R.translateX || D !== R.translateY) && ([U, G] = wn({
+        x: T,
+        y: D,
+        scale: Y,
         rotate: A,
-        itemExtent: w,
+        itemExtent: _,
         boardWrapperRect: m,
-        boardSize: S
-      })), t({
+        boardSize: w
+      })), nt && console.log("New fixed values: ", U, G, Y, A), t({
         translateX: U,
-        translateY: J,
-        scale: N,
+        translateY: G,
+        scale: Y,
         rotate: A
       });
     },
     [c, e, n, t]
-  ), _ = g.useCallback(
+  ), S = g.useCallback(
     (p) => {
-      let w = (m) => ({ ...m, ...p });
-      typeof p == "function" && (w = p), h((m) => ({
+      let _ = (m) => ({ ...m, ...p });
+      typeof p == "function" && (_ = p), h((m) => ({
         ...m,
-        ...w({
+        ..._({
           translateX: m.translateX,
           translateY: m.translateY
         })
@@ -1664,98 +1671,102 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
     },
     [h]
   ), v = g.useCallback(
-    ({ to: p, factor: w }) => {
+    ({ to: p, factor: _ }) => {
       const { boardWrapperRect: m } = n();
-      let S = p;
-      S || (S = {
+      let w = p;
+      w || (w = {
         x: m.left + m.width / 2,
         y: m.top + m.height / 2
       });
-      const O = e(), k = c(O.scale * w), j = S.x - m.left, M = S.y - m.top, A = j - (j - O.translateX) * k / O.scale, N = M - (M - O.translateY) * k / O.scale;
+      const R = e(), T = c(R.scale * _), D = w.x - m.left, M = w.y - m.top, A = D - (D - R.translateX) * T / R.scale, Y = M - (M - R.translateY) * T / R.scale;
       h((U) => ({
         ...U,
         translateX: A,
-        translateY: N,
-        scale: k
+        translateY: Y,
+        scale: T
       }));
     },
     [c, e, n, h]
   ), E = g.useCallback(
-    ({ x: p, y: w, radius: m }) => {
-      const { rotate: S } = e(), { boardWrapperRect: O, boardSize: k } = n(), j = O.width / (m * 2), M = O.height / (m * 2), A = c(Math.min(j, M) * bn), [N, U] = Be(
-        [-k / 2 - p, -k / 2 - w],
+    ({ x: p, y: _, radius: m }) => {
+      const { rotate: w } = e(), { boardWrapperRect: R, boardSize: T } = n(), D = R.width / (m * 2), M = R.height / (m * 2), A = c(Math.min(D, M) * En), [Y, U] = Be(
+        [-T / 2 - p, -T / 2 - _],
         {
-          translateX: O.width / 2,
-          translateY: O.height / 2,
+          translateX: R.width / 2,
+          translateY: R.height / 2,
           scale: A,
-          rotate: S
+          rotate: w
         }
       );
-      h((J) => ({ ...J, translateX: N, translateY: U, scale: A }));
+      h((G) => ({ ...G, translateX: Y, translateY: U, scale: A }));
     },
     [c, e, n, h]
-  ), I = g.useCallback(() => {
-    const { boardWrapperRect: p, boardSize: w } = n(), [m, S] = l(
+  ), O = g.useCallback(() => {
+    const { boardWrapperRect: p, boardSize: _ } = n(), [m, w] = l(
       p.width / 2,
       p.height / 2
     );
     return {
-      x: m - w / 2,
-      y: S - w / 2
+      x: m - _ / 2,
+      y: w - _ / 2
     };
   }, [l, n]), y = g.useCallback(() => {
-    const p = a(), { boardWrapper: w, boardSize: m } = n(), S = p.reduce(
-      (k, j) => {
-        const M = Ne(w, j.id);
-        return M && (k.left = Math.min(j.x, k.left), k.top = Math.min(j.y, k.top), k.right = Math.max(
-          j.x + M.offsetWidth,
-          k.right
-        ), k.bottom = Math.max(
-          j.y + M.offsetHeight,
-          k.bottom
-        )), k;
+    const p = a(), { boardSize: _, uid: m } = n(), w = p.reduce(
+      (T, D) => {
+        const M = Ne(m, D.id);
+        return M && (T.left = Math.min(D.x, T.left), T.top = Math.min(D.y, T.top), T.right = Math.max(
+          D.x + M.offsetWidth,
+          T.right
+        ), T.bottom = Math.max(
+          D.y + M.offsetHeight,
+          T.bottom
+        )), T;
       },
       {
-        left: m / 2,
-        top: m / 2,
-        right: -m / 2,
-        bottom: -m / 2
+        left: _ / 2,
+        top: _ / 2,
+        right: -_ / 2,
+        bottom: -_ / 2
       }
-    ), O = {
-      x: (S.right + S.left) / 2,
-      y: (S.bottom + S.top) / 2
+    ), R = {
+      x: (w.right + w.left) / 2,
+      y: (w.bottom + w.top) / 2
     };
-    O.radius = Math.max(
-      ze([O.x, O.y], [S.left, S.top]),
-      _n
-    ), o({ itemExtent: O });
-  }, [n, a, o]), C = g.useCallback(
+    R.radius = Math.max(
+      ze([R.x, R.y], [w.left, w.top]),
+      bn
+    ), o({ itemExtent: R });
+  }, [n, a, o]), x = g.useCallback(
     (p) => {
-      let w = () => p;
-      typeof p == "function" && (w = p), h((m) => ({ ...m, rotate: w(m.rotate) })), y(), E(r);
+      let _ = () => p;
+      typeof p == "function" && (_ = p), h((m) => ({ ...m, rotate: _(m.rotate) })), y(), E(r);
     },
     [r, h, y, E]
-  ), x = mt(
+  ), C = gt(
     () => y(),
     [y],
     200
   );
-  return {
+  return g.useEffect(() => {
+    window.debugUpdateExtent = () => y(), window.debugDisplayExtent = () => console.log(n().itemExtent), window.debugSetDebug = () => {
+      nt = !0;
+    };
+  }, [n, y]), {
     setDim: h,
-    rotateBoard: C,
-    moveBoard: _,
+    rotateBoard: x,
+    moveBoard: S,
     getDim: u,
     zoomTo: v,
     zoomToCenter: v,
     zoomToExtent: E,
-    getCenter: I,
-    updateItemExtent: x,
+    getCenter: O,
+    updateItemExtent: C,
     vectorFromWrapperToBoard: f,
     fromWrapperToBoard: l,
     fromBoardToWrapper: d
   };
-}, Vt = (e) => {
-  const [t, r, n] = Q(
+}, Ft = (e) => {
+  const [t, r, n] = Z(
     ({ register: a, unregister: u, callInteractions: l }) => [
       a,
       u,
@@ -1773,8 +1784,8 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
     [n, e]
   );
   return { register: o, call: s };
-}, gt = () => {
-  const { call: e } = Vt("place"), { call: t } = Vt("delete"), { getCenter: r, updateItemExtent: n } = Me(), [o, s, a, u] = Q((P) => [
+}, ht = () => {
+  const { call: e } = Ft("place"), { call: t } = Ft("delete"), { getCenter: r, updateItemExtent: n } = Me(), [o, s, a, u] = Z((P) => [
     P.clear,
     P.reverse,
     P.unselect,
@@ -1785,91 +1796,91 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
     setItemIds: f,
     updateItems: c,
     moveItems: h,
-    removeItemsById: _,
+    removeItemsById: S,
     getItemList: v,
     insertItems: E,
-    setItemList: I
+    setItemList: O
   } = oe(
     ({
       getItems: P,
       getItemIds: $,
-      setItemIds: z,
+      setItemIds: B,
       updateItems: V,
-      moveItems: Y,
+      moveItems: L,
       removeItemsById: F,
       getItemList: H,
       insertItems: te,
-      setItemList: Z
+      setItemList: Q
     }) => ({
       getItems: P,
       getItemIds: $,
-      setItemIds: z,
+      setItemIds: B,
       updateItems: V,
-      moveItems: Y,
+      moveItems: L,
       removeItemsById: F,
       getItemList: H,
       insertItems: te,
-      setItemList: Z
+      setItemList: Q
     })
   ), y = g.useCallback(
-    (P, $, z = !1) => {
+    (P, $, B = !1) => {
       let V = $;
       typeof $ == "object" && (V = () => $);
-      const Y = d().filter((Z) => P.includes(Z)), F = l(), H = Y.map((Z) => {
-        const ne = F[Z];
-        return z ? [Z, V(ne)] : [Z, V({ ...ne })];
-      }).filter(([, Z]) => Z);
+      const L = d().filter((Q) => P.includes(Q)), F = l(), H = L.map((Q) => {
+        const ne = F[Q];
+        return B ? [Q, V(ne)] : [Q, V({ ...ne })];
+      }).filter(([, Q]) => Q);
       if (H.length === 0)
         return;
       const te = Object.fromEntries(H);
-      c(te, z), n();
+      c(te, B), n();
     },
     [d, l, n, c]
-  ), C = g.useCallback(
+  ), x = g.useCallback(
     (P) => {
-      I(P), o(), n();
+      O(P), o(), n();
     },
-    [o, I, n]
-  ), x = g.useCallback(
-    (P, $, z = !1) => {
-      y([P], $, z);
+    [o, O, n]
+  ), C = g.useCallback(
+    (P, $, B = !1) => {
+      y([P], $, B);
     },
     [y]
   ), p = g.useCallback(
     (P, $) => {
       h(
-        Bt(l(), d(), P),
+        Nt(l(), d(), P),
         $
-      ), n();
+      );
     },
-    [d, l, h, n]
-  ), w = g.useCallback(
+    [d, l, h]
+  ), _ = g.useCallback(
     (P) => {
-      const $ = d(), z = $.filter((Y) => !P.includes(Y)), V = $.filter(
-        (Y) => P.includes(Y)
+      const $ = d(), B = $.filter((L) => !P.includes(L)), V = $.filter(
+        (L) => P.includes(L)
       );
-      f([...z, ...V]);
+      f([...B, ...V]);
     },
     [d, f]
   ), m = g.useCallback(
-    (P, { type: $, size: z } = {}) => {
-      const { boardWrapper: V } = u();
+    (P, { type: $, size: B } = {}) => {
+      const { uid: V } = u();
       y(
         P,
-        (Y) => {
-          const F = Ne(V, Y.id);
+        (L) => {
+          const F = Ne(V, L.id);
           if (!F)
             return;
           const H = {
             type: $ || "grid",
-            size: z || 1,
+            size: B || 1,
             offset: { x: 0, y: 0 },
-            ...Y.grid
+            ...L.grid
           };
-          return an(
+          return cn(
             {
-              x: Y.x,
-              y: Y.y,
+              x: L.x,
+              y: L.y,
               width: F.clientWidth,
               height: F.clientHeight
             },
@@ -1880,47 +1891,47 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
       );
     },
     [u, y]
-  ), S = g.useCallback(
+  ), w = g.useCallback(
     (P, $) => {
-      const z = Bt(
+      const B = Nt(
         l(),
         d(),
         P
       );
-      w(z), y(z, { moving: !1 }, !0), m(z, $), e(P), n();
+      _(B), y(B, { moving: !1 }, !0), m(B, $), e(P), n();
     },
     [
       y,
       e,
       d,
       l,
-      w,
+      _,
       m,
       n
     ]
-  ), O = g.useCallback(
+  ), R = g.useCallback(
     (P) => {
       f(P);
     },
     [f]
-  ), k = g.useCallback(
+  ), T = g.useCallback(
     (P) => {
-      const $ = d(), z = $.filter(
-        (Y) => P.includes(Y)
-      ), V = $.map((Y) => P.includes(Y) ? z.pop() : Y);
+      const $ = d(), B = $.filter(
+        (L) => P.includes(L)
+      ), V = $.map((L) => P.includes(L) ? B.pop() : L);
       f(V), s();
     },
     [d, s, f]
-  ), j = g.useCallback(
+  ), D = g.useCallback(
     (P, $) => {
-      const z = l(), V = Object.fromEntries(
+      const B = l(), V = Object.fromEntries(
         $.map((H, te) => {
-          const Z = z[P[te]];
+          const Q = B[P[te]];
           return [
             H,
             {
-              x: Z.x,
-              y: Z.y
+              x: Q.x,
+              y: Q.y
             }
           ];
         })
@@ -1930,52 +1941,52 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
         (H) => V[H.id],
         !0
       );
-      const Y = Object.fromEntries(
+      const L = Object.fromEntries(
         P.map((H, te) => [H, $[te]])
-      ), F = d().map((H) => P.includes(H) ? Y[H] : H);
+      ), F = d().map((H) => P.includes(H) ? L[H] : H);
       f(F);
     },
     [l, y, d, f]
   ), M = g.useCallback(
     (P, $) => {
-      const z = r(), V = P.map((Y, F) => !Y.x || !Y.y ? { ...Y, x: z.x + 2 * F, y: z.y + 2 * F } : Y);
-      E(V, $), n();
+      const B = r(), V = P.map((L, F) => !L.x || !L.y ? { ...L, x: B.x + 2 * F, y: B.y + 2 * F } : L);
+      E(V, $), w(P.map(({ id: L }) => L));
     },
-    [r, E, n]
+    [r, E, w]
   ), A = g.useCallback(
     (P, $) => {
       M([P], $);
     },
     [M]
-  ), N = g.useCallback(
+  ), Y = g.useCallback(
     (P) => {
-      a(P), _(P), t(P);
+      a(P), S(P), t(P);
     },
-    [a, _, t]
+    [a, S, t]
   ), U = g.useCallback(
     (P) => {
       const $ = l();
-      return P.map((z) => $[z]);
+      return P.map((B) => $[B]);
     },
     [l]
-  ), J = g.useCallback(
-    ({ target: P, clientX: $, clientY: z }, { returnLocked: V = !1, passLocked: Y = !1 } = {}) => {
+  ), G = g.useCallback(
+    ({ target: P, clientX: $, clientY: B }, { returnLocked: V = !1, passLocked: L = !1 } = {}) => {
       if (["INPUT", "TEXTAREA"].includes(P.tagName))
         return null;
       const F = Oe(P, "item");
       if (F) {
         if (ye(F, "selected"))
           return F;
-        if (!Y && ye(F, "locked") && !ye(P, "passthrough"))
+        if (!L && ye(F, "locked") && !ye(P, "passthrough"))
           return V ? F : null;
         if (ye(P, "passthrough")) {
-          const H = d(), { boardWrapper: te } = u(), Z = H.reduce((ne, ie) => {
+          const H = d(), { uid: te } = u(), Q = H.reduce((ne, ie) => {
             const me = Ne(te, ie), ge = me.getBoundingClientRect();
-            return ft({ x: $, y: z }, ge) && ne.unshift(me), ne;
+            return dt({ x: $, y: B }, ge) && ne.unshift(me), ne;
           }, []);
-          for (let ne = 0; ne < Z.length; ne += 1) {
-            const ie = Z[ne];
-            if (ie !== F && (Y || !ye(ie, "locked")))
+          for (let ne = 0; ne < Q.length; ne += 1) {
+            const ie = Q[ne];
+            if (ie !== F && (L || !ye(ie, "locked")))
               return ie;
           }
           return null;
@@ -1986,24 +1997,24 @@ const Sn = 100, _n = 1e3, bn = 0.8, En = ({
     [u, d]
   );
   return {
-    putItemsOnTop: w,
+    putItemsOnTop: _,
     batchUpdateItems: y,
-    updateItemOrder: O,
+    updateItemOrder: R,
     moveItems: p,
-    placeItems: S,
-    updateItem: x,
-    swapItems: j,
-    reverseItemsOrder: k,
-    setItemList: C,
+    placeItems: w,
+    updateItem: C,
+    swapItems: D,
+    reverseItemsOrder: T,
+    setItemList: x,
     pushItem: A,
     pushItems: M,
-    removeItems: N,
+    removeItems: Y,
     getItemList: v,
-    findElementUnderPointer: J,
+    findElementUnderPointer: G,
     getItems: U
   };
 };
-var wn = function e(t, r) {
+var xn = function e(t, r) {
   if (t === r)
     return !0;
   if (t && r && typeof t == "object" && typeof r == "object") {
@@ -2066,22 +2077,22 @@ var wn = function e(t, r) {
   return t !== t && r !== r;
 };
 function Cn(e, t, r, n = 0) {
-  Pe(mt(e, t, r, n), t);
+  Pe(gt(e, t, r, n), t);
 }
-const xn = (e, t) => {
+const Rn = (e, t) => {
   if (e.type in t) {
     const r = t[e.type].defaultActions;
     return typeof r == "function" ? r(e) : r;
   }
   return [];
-}, Ft = (e, t) => {
-  const { actions: r = xn(e, t) } = e;
+}, Kt = (e, t) => {
+  const { actions: r = Rn(e, t) } = e;
   return r.map((n) => typeof n == "string" ? { name: n } : n);
-}, is = () => {
+}, cs = () => {
   const [e, t] = oe((c) => [
     c.items,
     c.getItems
-  ]), [r, n, o] = Q((c) => [
+  ]), [r, n, o] = Z((c) => [
     c.config.itemTemplates,
     c.selection,
     c.getSelection
@@ -2094,23 +2105,23 @@ const xn = (e, t) => {
       const h = t();
       if (c)
         return [c, c.map((v) => h[v])];
-      const _ = o();
-      return [_, _.map((v) => h[v])];
+      const S = o();
+      return [S, S.map((v) => h[v])];
     },
     [t, o]
-  ), f = tr(() => {
+  ), f = rr(() => {
     const [c, h] = d();
     if (c.length > 0) {
       if (!u.current)
         return;
-      const _ = h.reduce((v, E) => {
-        const I = Ft(E, r);
+      const S = h.reduce((v, E) => {
+        const O = Kt(E, r);
         return v.filter(
-          (y) => I.some((C) => wn(y, C))
+          (y) => O.some((x) => xn(y, x))
         );
-      }, Ft(h[0], r));
+      }, Kt(h[0], r));
       l(() => {
-        a(_);
+        a(S);
       });
     } else
       l(() => {
@@ -2124,30 +2135,30 @@ const xn = (e, t) => {
   ), {
     availableActions: s
   };
-}, as = () => {
-  const [e] = Q((t) => [t.selectionBox]);
+}, us = () => {
+  const [e] = Z((t) => [t.selectionBox]);
   return e;
 };
 let pe = (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 lr = g.createContext(), ut = (e) => {
+const fr = g.createContext(), lt = (e) => {
   localStorage.setItem("user", JSON.stringify(e));
-}, Rn = () => {
+}, In = () => {
   if (localStorage.user) {
     const t = {
       name: "Player",
-      color: Xt(),
+      color: Ut(),
       uid: pe(),
       ...JSON.parse(localStorage.user)
     };
-    return ut(t), t;
+    return lt(t), t;
   }
   const e = {
     name: "Player",
-    color: Xt(),
+    color: Ut(),
     uid: pe()
   };
-  return ut(e), e;
-}, In = (e) => (t, r) => ({
+  return lt(e), e;
+}, On = (e) => (t, r) => ({
   isSpaceMaster: !1,
   users: {},
   getUser: () => r().users[e],
@@ -2169,7 +2180,7 @@ const lr = g.createContext(), ut = (e) => {
       id: n,
       uid: s.users[n].uid
     };
-    return a.id === e && ut(a), setTimeout(() => r().electSpaceMaster(), 100), {
+    return a.id === e && lt(a), setTimeout(() => r().electSpaceMaster(), 100), {
       users: {
         ...s.users,
         [n]: a
@@ -2192,14 +2203,14 @@ const lr = g.createContext(), ut = (e) => {
       s < o.timestamp && (o.id = a, o.timestamp = s);
     }), t({ isSpaceMaster: o.id === e });
   }
-}), On = (e) => ({
+}), Tn = (e) => ({
   cursors: {},
   moveCursor: (t, r) => e((n) => ({ cursors: { ...n.cursors, [t]: r } })),
   removeCursor: (t) => e((r) => {
     const n = { ...r.cursors };
     return delete n[t], { cursors: n };
   })
-}), fr = ({ storeName: e, children: t }) => {
+}), dr = ({ storeName: e, children: t }) => {
   const { wire: r, isMaster: n } = Xe("room"), [o, s] = g.useState(null), [a, u] = g.useState(!1), l = g.useRef(!1);
   return g.useEffect(() => {
     let d = !0;
@@ -2207,7 +2218,7 @@ const lr = g.createContext(), ut = (e) => {
     if (!o && !l.current)
       return l.current = !0, (() => {
         const h = Ue(
-          dt(
+          pt(
             {
               wire: r,
               storeName: e,
@@ -2219,12 +2230,12 @@ const lr = g.createContext(), ut = (e) => {
               ]
             },
             (...v) => ({
-              ...In(r.userId)(...v),
-              ...On(...v)
+              ...On(r.userId)(...v),
+              ...Tn(...v)
             })
           )
-        ), _ = h.subscribe((v) => {
-          v.ready && (_(), d && s(h));
+        ), S = h.subscribe((v) => {
+          v.ready && (S(), d && s(h));
         });
       })(), () => {
         d = !1, l.current = !1, f.forEach((h) => h());
@@ -2232,7 +2243,7 @@ const lr = g.createContext(), ut = (e) => {
   }, [o, e, r, r.userId]), g.useEffect(() => {
     if (o)
       return o.getState().addUser({
-        ...Rn(),
+        ...In(),
         id: r.userId
       }), u(!0), () => {
         o.getState().removeUser(r.userId);
@@ -2248,11 +2259,11 @@ const lr = g.createContext(), ut = (e) => {
     }
   }, [n, o, r]), g.useEffect(() => {
     n && o && o.getState().updateCurrentUser({ isMaster: n });
-  }, [n, o, r]), a ? /* @__PURE__ */ T(lr.Provider, { value: o, children: t }) : null;
+  }, [n, o, r]), a ? /* @__PURE__ */ k(fr.Provider, { value: o, children: t }) : null;
 }, Se = (e, t) => {
-  const r = _e(lr);
+  const r = _e(fr);
   return We(r, e, t || Ve);
-}, cs = () => {
+}, ls = () => {
   const [e, t, r, n, o] = Se((u) => [
     u.isSpaceMaster,
     u.getUser(),
@@ -2271,7 +2282,7 @@ const lr = g.createContext(), ut = (e) => {
     localUsers: a,
     joinSpace: o
   };
-}, us = () => {
+}, fs = () => {
   const [e, t, r] = oe(
     (o) => [o.boardConfig, o.getBoardConfig, o.setBoardConfig]
   ), n = g.useCallback(
@@ -2284,10 +2295,10 @@ const lr = g.createContext(), ut = (e) => {
     [t, r]
   );
   return [e, n];
-}, ls = () => {
-  const [e] = Q((t) => [t.boardState]);
+}, ds = () => {
+  const [e] = Z((t) => [t.boardState]);
   return e;
-}, fs = () => {
+}, ps = () => {
   const [e, t, r, n] = oe((o) => [
     o.getSessionInfo,
     o.setSessionInfo,
@@ -2295,13 +2306,13 @@ const lr = g.createContext(), ut = (e) => {
     o.session
   ]);
   return { getSessionInfo: e, setSessionInfo: t, sessionInfo: n, updateSessionInfo: r };
-}, dr = g.createContext(), Tn = ({ user: { name: e, uid: t, color: r }, content: n }) => ({
+}, pr = g.createContext(), kn = ({ user: { name: e, uid: t, color: r }, content: n }) => ({
   type: "message",
   user: { name: e, uid: t, color: r },
   content: n,
   uid: pe(),
   timestamp: new Date().toISOString()
-}), kn = (e, t) => ({
+}), Pn = (e, t) => ({
   messages: [],
   setMessages: (r) => e({
     messages: r.map((n) => ({
@@ -2316,34 +2327,34 @@ const lr = g.createContext(), ut = (e) => {
     ]
   })),
   sendMessage: (r, n) => {
-    const o = Tn({
+    const o = kn({
       user: r,
       content: n
     });
     o && t().addMessage(o);
   }
-}), Kt = ({
+}), Ht = ({
   storeName: e,
   children: t,
   defaultValue: r = []
 }) => {
   const { wire: n } = Xe("room"), [o] = g.useState(
     () => Ue(
-      dt(
+      pt(
         { wire: n, storeName: e, defaultValue: r, noSync: ["sendMessage"] },
         (...s) => ({
-          ...kn(...s)
+          ...Pn(...s)
         })
       )
     )
   );
-  return /* @__PURE__ */ T(dr.Provider, { value: o, children: t });
-}, Pn = (e, t) => {
-  const r = _e(dr);
+  return /* @__PURE__ */ k(pr.Provider, { value: o, children: t });
+}, Mn = (e, t) => {
+  const r = _e(pr);
   return We(r, e, t || Ve);
-}, Mn = () => {
-}, ds = (e = Mn) => {
-  const t = Se((a) => a.getUser()), [r, n, o] = Pn((a) => [
+}, Dn = () => {
+}, ms = (e = Dn) => {
+  const t = Se((a) => a.getUser()), [r, n, o] = Mn((a) => [
     a.messages,
     a.setMessages,
     a.sendMessage
@@ -2358,12 +2369,12 @@ const lr = g.createContext(), ut = (e) => {
     [t, o]
   );
   return { messages: r, setMessages: n, sendMessage: s };
-}, Ht = ({ children: e, session: t }) => {
+}, qt = ({ children: e, session: t }) => {
   const r = Se((n) => n.joinSpace);
   return g.useEffect(() => (r(t), () => {
     r(null);
   }), [r, t]), e;
-}, ps = ({
+}, gs = ({
   socket: e,
   room: t,
   session: r,
@@ -2376,60 +2387,148 @@ const lr = g.createContext(), ut = (e) => {
     itemIds: n.map(({ id: c }) => c),
     items: Object.fromEntries(n.map((c) => [c.id, c]))
   }));
-  return Xe("room") ? /* @__PURE__ */ T(
-    Kt,
+  return Xe("room") ? /* @__PURE__ */ k(
+    Ht,
     {
       storeName: `${l}_messages`,
       defaultValue: o,
-      children: /* @__PURE__ */ T(Wt, { children: /* @__PURE__ */ T(
-        Ut,
+      children: /* @__PURE__ */ k(Vt, { children: /* @__PURE__ */ k(
+        Wt,
         {
           storeName: `${l}_item`,
           defaultValue: d,
-          children: /* @__PURE__ */ T(Ht, { ...a, session: l })
+          children: /* @__PURE__ */ k(qt, { ...a, session: l })
         }
       ) })
     }
-  ) : /* @__PURE__ */ T(
-    nr,
+  ) : /* @__PURE__ */ k(
+    or,
     {
       room: u,
       channel: "room",
       socket: e,
       LoadingComponent: s,
-      children: /* @__PURE__ */ T(fr, { storeName: `${u}_users`, children: /* @__PURE__ */ T(
-        Kt,
+      children: /* @__PURE__ */ k(dr, { storeName: `${u}_users`, children: /* @__PURE__ */ k(
+        Ht,
         {
           storeName: `${l}_messages`,
           defaultValue: o,
-          children: /* @__PURE__ */ T(Wt, { children: /* @__PURE__ */ T(
-            Ut,
+          children: /* @__PURE__ */ k(Vt, { children: /* @__PURE__ */ k(
+            Wt,
             {
               storeName: `${l}_item`,
               defaultValue: d,
-              children: /* @__PURE__ */ T(Ht, { ...a, session: l })
+              children: /* @__PURE__ */ k(qt, { ...a, session: l })
             }
           ) })
         }
       ) })
     }
   );
-}, ms = ({ socket: e, room: t, children: r, LoadingComponent: n }) => {
+}, hs = ({ socket: e, room: t, children: r, LoadingComponent: n }) => {
   const [o] = g.useState(t || pe());
-  return /* @__PURE__ */ T(
-    nr,
+  return /* @__PURE__ */ k(
+    or,
     {
       room: o,
       channel: "room",
       socket: e,
       LoadingComponent: n,
-      children: /* @__PURE__ */ T(fr, { storeName: `${o}_users`, children: r })
+      children: /* @__PURE__ */ k(dr, { storeName: `${o}_users`, children: r })
     }
   );
-}, nt = () => {
+};
+let jn = { data: "" }, $n = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || jn, An = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, Ln = /\/\*[^]*?\*\/|  +/g, Gt = /\n+/g, fe = (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 + ";");
+  }
+  return r + (t && o ? t + "{" + o + "}" : o) + n;
+}, ce = {}, mr = (e) => {
+  if (typeof e == "object") {
+    let t = "";
+    for (let r in e)
+      t += r + mr(e[r]);
+    return t;
+  }
+  return e;
+}, zn = (e, t, r, n, o) => {
+  let s = mr(e), a = ce[s] || (ce[s] = ((l) => {
+    let d = 0, f = 11;
+    for (; d < l.length; )
+      f = 101 * f + l.charCodeAt(d++) >>> 0;
+    return "go" + f;
+  })(s));
+  if (!ce[a]) {
+    let l = s !== e ? e : ((d) => {
+      let f, c, h = [{}];
+      for (; f = An.exec(d.replace(Ln, "")); )
+        f[4] ? h.shift() : f[3] ? (c = f[3].replace(Gt, " ").trim(), h.unshift(h[0][c] = h[0][c] || {})) : h[0][f[1]] = f[2].replace(Gt, " ").trim();
+      return h[0];
+    })(e);
+    ce[a] = fe(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;
+}, Yn = (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;
+  }
+  return n + o + (a ?? "");
+}, "");
+function K(e) {
+  let t = this || {}, r = e.call ? e(t.p) : e;
+  return zn(r.unshift ? r.raw ? Yn(r, [].slice.call(arguments, 1), t.p) : r.reduce((n, o) => Object.assign(n, o && o.call ? o(t.p) : o), {}) : r, $n(t.target), t.g, t.o, t.k);
+}
+K.bind({ g: 1 });
+K.bind({ k: 1 });
+function Bn(e, t, r, n) {
+  fe.p = t;
+}
+var Nn = function e(t, r) {
+  if (t === r)
+    return !0;
+  if (t && r && typeof t == "object" && typeof r == "object") {
+    if (t.constructor !== r.constructor)
+      return !1;
+    var n, o, s;
+    if (Array.isArray(t)) {
+      if (n = t.length, n != r.length)
+        return !1;
+      for (o = n; o-- !== 0; )
+        if (!e(t[o], r[o]))
+          return !1;
+      return !0;
+    }
+    if (t.constructor === RegExp)
+      return t.source === r.source && t.flags === r.flags;
+    if (t.valueOf !== Object.prototype.valueOf)
+      return t.valueOf() === r.valueOf();
+    if (t.toString !== Object.prototype.toString)
+      return t.toString() === r.toString();
+    if (s = Object.keys(t), n = s.length, n !== Object.keys(r).length)
+      return !1;
+    for (o = n; o-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(r, s[o]))
+        return !1;
+    for (o = n; o-- !== 0; ) {
+      var a = s[o];
+      if (!e(t[a], r[a]))
+        return !1;
+    }
+    return !0;
+  }
+  return t !== t && r !== r;
+};
+const ot = () => {
   const e = navigator.userAgent.toLowerCase();
   return /mac os ?x 10/.test(e);
-}, jn = () => {
+}, Xn = () => {
   const e = document.createElement("iframe");
   e.src = "#", document.body.appendChild(e);
   const t = e.contentWindow.document;
@@ -2438,34 +2537,34 @@ const lr = g.createContext(), ut = (e) => {
   ), t.close();
   const r = t.body.firstElementChild.offsetHeight;
   return document.body.removeChild(e), r;
-}, Dn = jn(), $n = 800, qt = (e, t) => {
+}, Un = Xn(), Wn = 800, Jt = (e, t) => {
   const r = Object.keys(e).map((n) => Number(n)).find((n) => n !== t);
   return e[r];
-}, Gt = ([e, t], [r, n]) => {
+}, Zt = ([e, t], [r, n]) => {
   const o = Math.abs(e - r), s = Math.abs(t - n);
   return Math.hypot(o, s);
 }, de = () => {
-}, An = (e) => (t) => {
+}, Vn = (e) => (t) => {
   const { event: r } = t;
   return r.isPropagationStopped() ? null : e(t);
-}, Ln = (e) => async (...t) => {
+}, Fn = (e) => async (...t) => {
   try {
     await e(...t);
   } catch (r) {
     console.error(r);
   }
 };
-class zn {
+class Kn {
   constructor() {
-    kt(this, "lastPromise", Promise.resolve(!0));
+    Pt(this, "lastPromise", Promise.resolve(!0));
   }
   add(t, ...r) {
     return new Promise((n, o) => {
-      this.lastPromise = this.lastPromise.then(() => An(Ln(t))(...r)).then(n).catch(o);
+      this.lastPromise = this.lastPromise.then(() => Vn(Fn(t))(...r)).then(n).catch(o);
     });
   }
 }
-const se = new zn(), Fe = ({
+const se = new Kn(), Fe = ({
   children: e,
   onDrag: t = de,
   onDragStart: r = de,
@@ -2483,73 +2582,73 @@ const se = new zn(), Fe = ({
     mainPointer: void 0
   }), h = (y) => {
     const {
-      deltaX: C,
-      deltaY: x,
+      deltaX: x,
+      deltaY: C,
       clientX: p,
-      clientY: w,
+      clientY: _,
       deltaMode: m,
-      ctrlKey: S,
-      altKey: O,
-      metaKey: k,
-      target: j
+      ctrlKey: w,
+      altKey: R,
+      metaKey: T,
+      target: D
     } = y;
-    if (!(O || S && !nt()))
-      if (nt() && !S)
+    if (!(R || w && !ot()))
+      if (ot() && !w)
         se.add(o, {
-          deltaX: -2 * C,
-          deltaY: -2 * x,
+          deltaX: -2 * x,
+          deltaY: -2 * C,
           button: 1,
-          ctrlKey: S,
-          metaKey: k,
-          target: j,
+          ctrlKey: w,
+          metaKey: T,
+          target: D,
           event: y
         });
       else {
-        if (l === void 0 || !x)
+        if (l === void 0 || !C)
           return;
-        let M = x;
+        let M = C;
         switch (m) {
           case 1:
-            M *= Dn;
+            M *= Un;
             break;
           case 2:
-            M *= $n;
+            M *= Wn;
             break;
         }
-        nt() && (M *= 2), se.add(l, { scale: M, clientX: p, clientY: w, event: y });
+        ot() && (M *= 2), se.add(l, { scale: M, clientX: p, clientY: _, event: y });
       }
-  }, _ = (y) => {
+  }, S = (y) => {
     const {
-      target: C,
-      button: x,
+      target: x,
+      button: C,
       clientX: p,
-      clientY: w,
+      clientY: _,
       pointerId: m,
-      altKey: S,
-      ctrlKey: O,
-      metaKey: k,
-      isPrimary: j
+      altKey: w,
+      ctrlKey: R,
+      metaKey: T,
+      isPrimary: D
     } = y;
-    if (c.current.pointers[m] = { clientX: p, clientY: w }, j && (c.current.mainPointer = void 0), c.current.mainPointer !== void 0) {
+    if (c.current.pointers[m] = { clientX: p, clientY: _ }, D && (c.current.mainPointer = void 0), c.current.mainPointer !== void 0) {
       if (c.current.mainPointer !== m)
         try {
-          const { clientX: M, clientY: A } = qt(
+          const { clientX: M, clientY: A } = Jt(
             c.current.pointers,
             m
-          ), N = (M + p) / 2, U = (A + w) / 2, J = Gt(
+          ), Y = (M + p) / 2, U = (A + _) / 2, G = Zt(
             [M, A],
-            [p, w]
+            [p, _]
           );
           Object.assign(c.current, {
             pressed: !0,
             moving: !1,
             gestureStart: !1,
             startX: p,
-            startY: w,
-            prevX: N,
+            startY: _,
+            prevX: Y,
             prevY: U,
-            startDistance: J,
-            prevDistance: J
+            startDistance: G,
+            prevDistance: G
           });
         } catch (M) {
           console.log("Error while getting other pointer. Ignoring", M), c.current.mainPointer;
@@ -2561,65 +2660,65 @@ const se = new zn(), Fe = ({
       moving: !1,
       gestureStart: !1,
       startX: p,
-      startY: w,
+      startY: _,
       prevX: p,
-      prevY: w,
-      currentButton: x,
+      prevY: _,
+      currentButton: C,
       pointerDownEvent: y,
       startDistance: 0,
       prevDistance: 0,
-      target: C,
+      target: x,
       timeStart: Date.now(),
       longTapTimeout: setTimeout(async () => {
         c.current.noTap = !0, se.add(a, {
           clientX: p,
-          clientY: w,
-          altKey: S,
-          ctrlKey: O,
-          metaKey: k,
-          target: C,
+          clientY: _,
+          altKey: w,
+          ctrlKey: R,
+          metaKey: T,
+          target: x,
           event: y
         });
       }, 750)
     });
     try {
-      C.setPointerCapture(m);
+      x.setPointerCapture(m);
     } catch (M) {
       console.log("Fail to capture pointer", M);
     }
   }, v = (y) => {
     if (c.current.pressed) {
       const {
-        pointerId: C,
-        clientX: x,
+        pointerId: x,
+        clientX: C,
         clientY: p,
-        altKey: w,
+        altKey: _,
         shiftKey: m,
-        ctrlKey: S,
-        metaKey: O,
-        buttons: k
+        ctrlKey: w,
+        metaKey: R,
+        buttons: T
       } = y;
-      c.current.pointers[C] = {
-        clientX: x,
+      c.current.pointers[x] = {
+        clientX: C,
         clientY: p
       }, c.current.moving = !0;
-      const j = Object.keys(c.current.pointers).length === 2;
-      let M, A, N = 0;
-      if (j) {
-        const { clientX: $, clientY: z } = qt(
+      const D = Object.keys(c.current.pointers).length === 2;
+      let M, A, Y = 0;
+      if (D) {
+        const { clientX: $, clientY: B } = Jt(
           c.current.pointers,
-          C
+          x
         );
-        M = ($ + x) / 2, A = (z + p) / 2, N = Gt(
-          [$, z],
-          [x, p]
+        M = ($ + C) / 2, A = (B + p) / 2, Y = Zt(
+          [$, B],
+          [C, p]
         );
       } else
-        M = x, A = p;
-      let U = m || w || S || O || k !== 1;
+        M = C, A = p;
+      let U = m || _ || w || R || T !== 1;
       d !== "drag" && (U = !U);
-      const J = !U, P = U;
-      if (J) {
+      const G = !U, P = U;
+      if (G) {
         c.current.gestureStart || (f.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout), se.add(r, {
           deltaX: 0,
           deltaY: 0,
@@ -2630,73 +2729,73 @@ const se = new zn(), Fe = ({
           distanceX: 0,
           distanceY: 0,
           button: c.current.currentButton,
-          altKey: w,
+          altKey: _,
           shiftKey: m,
-          ctrlKey: S,
-          metaKey: O,
+          ctrlKey: w,
+          metaKey: R,
           target: c.current.target,
           event: c.current.pointerDownEvent
         }));
-        const $ = M - c.current.prevX, z = A - c.current.prevY, V = M - c.current.startX, Y = A - c.current.startY;
+        const $ = M - c.current.prevX, B = A - c.current.prevY, V = M - c.current.startX, L = A - c.current.startY;
         se.add(t, {
           deltaX: $,
-          deltaY: z,
+          deltaY: B,
           startX: c.current.startX,
           startY: c.current.startY,
           clientX: M,
           clientY: A,
           distanceX: V,
-          distanceY: Y,
+          distanceY: L,
           button: c.current.currentButton,
-          altKey: w,
+          altKey: _,
           shiftKey: m,
-          ctrlKey: S,
-          metaKey: O,
+          ctrlKey: w,
+          metaKey: R,
           target: c.current.target,
           event: y
         });
       }
       if (P) {
         c.current.gestureStart || (f.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout));
-        const $ = M - c.current.prevX, z = A - c.current.prevY, { target: V } = c.current;
+        const $ = M - c.current.prevX, B = A - c.current.prevY, { target: V } = c.current;
         if (se.add(o, {
           deltaX: $,
-          deltaY: z,
+          deltaY: B,
           button: c.current.currentButton,
-          altKey: w,
+          altKey: _,
           shiftKey: m,
-          ctrlKey: S,
-          metaKey: O,
+          ctrlKey: w,
+          metaKey: R,
           target: V,
           event: y
-        }), N !== c.current.prevDistance && l) {
-          const Y = c.current.prevDistance - N;
-          Math.abs(Y) > 0 && (se.add(l, {
-            scale: Y * 3,
+        }), Y !== c.current.prevDistance && l) {
+          const L = c.current.prevDistance - Y;
+          Math.abs(L) > 0 && (se.add(l, {
+            scale: L * 3,
             clientX: M,
             clientY: A,
             event: y
-          }), c.current.prevDistance = N);
+          }), c.current.prevDistance = Y);
         }
       }
       c.current.prevX = M, c.current.prevY = A;
     }
   }, E = (y) => {
     const {
-      clientX: C,
-      clientY: x,
+      clientX: x,
+      clientY: C,
       altKey: p,
-      shiftKey: w,
+      shiftKey: _,
       ctrlKey: m,
-      metaKey: S,
-      target: O,
-      pointerId: k
+      metaKey: w,
+      target: R,
+      pointerId: T
     } = y;
-    if (c.current.pointers[k]) {
-      if (delete c.current.pointers[k], c.current.mainPointer !== k) {
-        const { clientX: j, clientY: M } = c.current.pointers[c.current.mainPointer];
+    if (c.current.pointers[T]) {
+      if (delete c.current.pointers[T], c.current.mainPointer !== T) {
+        const { clientX: D, clientY: M } = c.current.pointers[c.current.mainPointer];
         Object.assign(c.current, {
-          prevX: j,
+          prevX: D,
           prevY: M,
           prevDistance: 0,
           startDistance: 0
@@ -2709,70 +2808,70 @@ const se = new zn(), Fe = ({
         );
         try {
           c.current.target.setPointerCapture(c.current.mainPointer);
-          const { clientX: j, clientY: M } = c.current.pointers[c.current.mainPointer];
+          const { clientX: D, clientY: M } = c.current.pointers[c.current.mainPointer];
           Object.assign(c.current, {
-            prevX: j,
+            prevX: D,
             prevY: M,
             prevDistance: 0,
             startDistance: 0
           });
           return;
-        } catch (j) {
-          console.log("Fails to set pointer capture", j), c.current.mainPointer = void 0, delete c.current.pointers[Object.keys(c.current.pointers)[0]];
+        } catch (D) {
+          console.log("Fails to set pointer capture", D), 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, se.add(n, {
-          deltaX: C - c.current.prevX,
-          deltaY: x - c.current.prevY,
+          deltaX: x - c.current.prevX,
+          deltaY: C - c.current.prevY,
           startX: c.current.startX,
           startY: c.current.startY,
-          clientX: C,
-          clientY: x,
-          distanceX: C - c.current.startX,
-          distanceY: x - c.current.startY,
+          clientX: x,
+          clientY: C,
+          distanceX: x - c.current.startX,
+          distanceY: C - c.current.startY,
           button: c.current.currentButton,
           altKey: p,
-          shiftKey: w,
+          shiftKey: _,
           ctrlKey: m,
-          metaKey: S,
+          metaKey: w,
           event: y
         }), f.current.style.cursor = "auto";
       else {
-        const j = Date.now();
-        c.current.noTap ? c.current.noTap = !1 : c.current.timeStart - j < 300 && se.add(s, {
-          clientX: C,
-          clientY: x,
+        const D = Date.now();
+        c.current.noTap ? c.current.noTap = !1 : c.current.timeStart - D < 300 && se.add(s, {
+          clientX: x,
+          clientY: C,
           altKey: p,
-          shiftKey: w,
+          shiftKey: _,
           ctrlKey: m,
-          metaKey: S,
-          target: O,
+          metaKey: w,
+          target: R,
           event: y
         });
       }
     }
   };
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ k(
     "div",
     {
       onWheel: h,
-      onPointerDown: _,
+      onPointerDown: S,
       onPointerMove: v,
       onPointerUp: E,
       onPointerOut: E,
       onPointerLeave: E,
       onPointerCancel: E,
       onDoubleClick: (y) => {
-        const { clientX: C, clientY: x, altKey: p, shiftKey: w, ctrlKey: m, metaKey: S, target: O } = y;
+        const { clientX: x, clientY: C, altKey: p, shiftKey: _, ctrlKey: m, metaKey: w, target: R } = y;
         se.add(u, {
-          clientX: C,
-          clientY: x,
+          clientX: x,
+          clientY: C,
           altKey: p,
-          shiftKey: w,
+          shiftKey: _,
           ctrlKey: m,
-          metaKey: S,
-          target: O,
+          metaKey: w,
+          target: R,
           event: y
         });
       },
@@ -2781,134 +2880,46 @@ const se = new zn(), Fe = ({
       children: e
     }
   );
-}, ot = ({ onResize: e, ...t }) => {
-  const [r] = Q((o) => [o.getBoardState]);
-  return /* @__PURE__ */ T(Fe, { onDrag: ({ deltaX: o, deltaY: s, event: a }) => {
+}, st = ({ onResize: e, ...t }) => {
+  const [r] = Z((o) => [o.getBoardState]);
+  return /* @__PURE__ */ k(Fe, { onDrag: ({ deltaX: o, deltaY: s, event: a }) => {
     a.stopPropagation();
     const { scale: u } = r();
     e({
       width: o / u,
       height: s / u
     });
-  }, children: /* @__PURE__ */ T("div", { ...t }) });
-};
-let Yn = { data: "" }, Bn = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || Yn, Nn = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, Xn = /\/\*[^]*?\*\/|  +/g, Jt = /\n+/g, fe = (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 + ";");
-  }
-  return r + (t && o ? t + "{" + o + "}" : o) + n;
-}, ce = {}, pr = (e) => {
-  if (typeof e == "object") {
-    let t = "";
-    for (let r in e)
-      t += r + pr(e[r]);
-    return t;
-  }
-  return e;
-}, Un = (e, t, r, n, o) => {
-  let s = pr(e), a = ce[s] || (ce[s] = ((l) => {
-    let d = 0, f = 11;
-    for (; d < l.length; )
-      f = 101 * f + l.charCodeAt(d++) >>> 0;
-    return "go" + f;
-  })(s));
-  if (!ce[a]) {
-    let l = s !== e ? e : ((d) => {
-      let f, c, h = [{}];
-      for (; f = Nn.exec(d.replace(Xn, "")); )
-        f[4] ? h.shift() : f[3] ? (c = f[3].replace(Jt, " ").trim(), h.unshift(h[0][c] = h[0][c] || {})) : h[0][f[1]] = f[2].replace(Jt, " ").trim();
-      return h[0];
-    })(e);
-    ce[a] = fe(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;
-}, Wn = (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;
-  }
-  return n + o + (a ?? "");
-}, "");
-function K(e) {
-  let t = this || {}, r = e.call ? e(t.p) : e;
-  return Un(r.unshift ? r.raw ? Wn(r, [].slice.call(arguments, 1), t.p) : r.reduce((n, o) => Object.assign(n, o && o.call ? o(t.p) : o), {}) : r, Bn(t.target), t.g, t.o, t.k);
-}
-K.bind({ g: 1 });
-K.bind({ k: 1 });
-function Vn(e, t, r, n) {
-  fe.p = t;
-}
-var Fn = function e(t, r) {
-  if (t === r)
-    return !0;
-  if (t && r && typeof t == "object" && typeof r == "object") {
-    if (t.constructor !== r.constructor)
-      return !1;
-    var n, o, s;
-    if (Array.isArray(t)) {
-      if (n = t.length, n != r.length)
-        return !1;
-      for (o = n; o-- !== 0; )
-        if (!e(t[o], r[o]))
-          return !1;
-      return !0;
-    }
-    if (t.constructor === RegExp)
-      return t.source === r.source && t.flags === r.flags;
-    if (t.valueOf !== Object.prototype.valueOf)
-      return t.valueOf() === r.valueOf();
-    if (t.toString !== Object.prototype.toString)
-      return t.toString() === r.toString();
-    if (s = Object.keys(t), n = s.length, n !== Object.keys(r).length)
-      return !1;
-    for (o = n; o-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(r, s[o]))
-        return !1;
-    for (o = n; o-- !== 0; ) {
-      var a = s[o];
-      if (!e(t[a], r[a]))
-        return !1;
-    }
-    return !0;
-  }
-  return t !== t && r !== r;
-};
-const Kn = K`
+  }, children: /* @__PURE__ */ k("div", { ...t }) });
+}, Hn = K`
   display: inline-block;
   transition: transform 150ms;
   user-select: none;
   padding: 2px;
   box-sizing: border-box;
-`, Hn = K`
+`, qn = K`
   border: 2px dashed #db5034;
   padding: 0px;
   cursor: pointer;
-`, Ce = K`
+`, xe = K`
   position: absolute;
   width: 0px;
   height: 0px;
-`, qn = K`
+`, Gn = K`
   top: 0;
   left: 0;
-`, Gn = K`
+`, Jn = K`
   top: 0;
   right: 0;
-`, Jn = K`
+`, Zn = K`
   bottom: 0;
   left: 0;
-`, Zn = K`
+`, Qn = K`
   bottom: 0;
   right: 0;
-`, Qn = K`
+`, eo = K`
   top: 50%;
   left: 50%;
-`, st = K`
+`, it = K`
   position: absolute;
   width: 10px;
@@ -2916,19 +2927,19 @@ const Kn = K`
   border: 2px solid #db5034;
   background-color: #db5034;
   cursor: move;
-`, eo = K`
+`, to = K`
   cursor: ew-resize;
   right: -6px;
   top: calc(50% - 5px);
-`, to = K`
+`, ro = K`
   cursor: ns-resize;
   bottom: -6px;
   left: calc(50% - 5px);
-`, ro = K`
+`, no = K`
   cursor: nwse-resize;
   bottom: -6px;
   right: -6px;
-`, no = ({ onReload: e }) => /* @__PURE__ */ le(
+`, oo = ({ onReload: e }) => /* @__PURE__ */ le(
   "div",
   {
     className: `syncboard-error-item ${K({
@@ -2941,11 +2952,11 @@ const Kn = K`
     })}`,
     children: [
       "Sorry, this item seems broken.",
-      /* @__PURE__ */ T("button", { onClick: e, children: "Reload it" })
+      /* @__PURE__ */ k("button", { onClick: e, children: "Reload it" })
     ]
   }
 );
-class oo extends g.Component {
+class so extends g.Component {
   constructor(t) {
     super(t), this.state = { hasError: !1, itemId: t.itemId }, this.onReload = this.onReload.bind(this);
   }
@@ -2964,12 +2975,12 @@ class oo extends g.Component {
   }
   render() {
     const { ErrorComponent: t } = this.props;
-    return this.state.hasError ? /* @__PURE__ */ T(t, { onReload: this.onReload }) : this.props.children;
+    return this.state.hasError ? /* @__PURE__ */ k(t, { onReload: this.onReload }) : this.props.children;
   }
 }
-const so = (e) => {
+const io = (e) => {
   e.target.className = "";
-}, io = ({
+}, ao = ({
   width: e,
   height: t,
   actualWidth: r,
@@ -2994,11 +3005,11 @@ const so = (e) => {
     width: (a + e).toFixed(1),
     height: (u + t).toFixed(1)
   };
-}, ao = {
+}, co = {
   w: !0,
   h: !0,
   b: !0
-}, co = ({
+}, uo = ({
   setState: e,
   state: { type: t, rotation: r = 0, id: n, locked: o, extraClasses: s, ...a } = {},
   animate: u = "hvr-pop",
@@ -3006,88 +3017,89 @@ const so = (e) => {
   itemMap: d,
   showResizeHandle: f = !0
 }) => {
-  var m;
-  const c = g.useRef(null), {
-    component: h = () => null,
-    resizeDirections: _ = ao,
-    resize: v = io
-  } = d[t], E = g.useCallback(
-    (S, O = !1) => e(n, S, O),
+  var w;
+  const c = g.useRef(null), [h] = Z((R) => [R.config.uid]), {
+    component: S = () => null,
+    resizeDirections: v = co,
+    resize: E = ao
+  } = d[t], O = g.useCallback(
+    (R, T = !1) => e(n, R, T),
     [e, n]
   );
   g.useEffect(() => {
     c.current.className = u;
   }, [u]);
-  const I = ["item", n, Kn];
-  o && I.push("locked"), l && (I.push("selected"), I.push(Hn));
-  const y = I.join(" "), C = ({ width: S = 0, height: O = 0, keepRatio: k }) => {
-    E((j) => {
-      const { offsetWidth: M, offsetHeight: A } = c.current;
-      return v({
-        prevState: j,
-        width: S,
-        height: O,
-        actualHeight: A,
-        actualWidth: M,
-        keepRatio: k
+  const y = ["item", n, Hn];
+  o && y.push("locked"), l && (y.push("selected"), y.push(qn));
+  const x = y.join(" "), C = ({ width: R = 0, height: T = 0, keepRatio: D }) => {
+    O((M) => {
+      const { offsetWidth: A, offsetHeight: Y } = c.current;
+      return E({
+        prevState: M,
+        width: R,
+        height: T,
+        actualHeight: Y,
+        actualWidth: A,
+        keepRatio: D
       });
     });
-  }, x = ({ width: S }) => {
-    C({ width: S });
-  }, p = ({ height: S }) => {
-    C({ height: S });
-  }, w = ({ width: S }) => {
-    C({ height: S, width: S, keepRatio: !0 });
+  }, p = ({ width: R }) => {
+    C({ width: R });
+  }, _ = ({ height: R }) => {
+    C({ height: R });
+  }, m = ({ width: R }) => {
+    C({ height: R, width: R, keepRatio: !0 });
   };
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ k(
     "div",
     {
       style: { transform: `rotate(${r}deg` },
       "data-id": n,
-      className: y,
+      id: `${h}__${n}`,
+      className: x,
       children: /* @__PURE__ */ le(
         "div",
         {
           style: { display: "flex" },
           ref: c,
-          onAnimationEnd: so,
-          onKeyDown: (S) => S.stopPropagation(),
-          onKeyUp: (S) => S.stopPropagation(),
+          onAnimationEnd: io,
+          onKeyDown: (R) => R.stopPropagation(),
+          onKeyUp: (R) => R.stopPropagation(),
           children: [
-            /* @__PURE__ */ T(
-              oo,
+            /* @__PURE__ */ k(
+              so,
               {
                 itemId: n,
                 state: a,
-                ErrorComponent: ((m = d == null ? void 0 : d.error) == null ? void 0 : m.component) || no,
-                children: /* @__PURE__ */ T(h, { ...a, id: n, setState: E })
+                ErrorComponent: ((w = d == null ? void 0 : d.error) == null ? void 0 : w.component) || oo,
+                children: /* @__PURE__ */ k(S, { ...a, id: n, setState: O })
               }
             ),
-            /* @__PURE__ */ T("div", { className: `corner ${Ce} ${qn}` }),
-            /* @__PURE__ */ T("div", { className: `corner ${Ce} ${Gn}` }),
-            /* @__PURE__ */ T("div", { className: `corner ${Ce} ${Zn}` }),
-            /* @__PURE__ */ T("div", { className: `corner ${Ce} ${Jn}` }),
-            /* @__PURE__ */ T("div", { className: `center ${Ce} ${Qn}` }),
-            f && /* @__PURE__ */ le(Wr, { children: [
-              _.b && /* @__PURE__ */ T(
-                ot,
+            /* @__PURE__ */ k("div", { className: `corner ${xe} ${Gn}` }),
+            /* @__PURE__ */ k("div", { className: `corner ${xe} ${Jn}` }),
+            /* @__PURE__ */ k("div", { className: `corner ${xe} ${Qn}` }),
+            /* @__PURE__ */ k("div", { className: `corner ${xe} ${Zn}` }),
+            /* @__PURE__ */ k("div", { className: `center ${xe} ${eo}` }),
+            f && /* @__PURE__ */ le(Vr, { children: [
+              v.b && /* @__PURE__ */ k(
+                st,
                 {
-                  className: `${st} ${ro}`,
-                  onResize: w
+                  className: `${it} ${no}`,
+                  onResize: m
                 }
               ),
-              _.h && /* @__PURE__ */ T(
-                ot,
+              v.h && /* @__PURE__ */ k(
+                st,
                 {
-                  className: `${st} ${to}`,
-                  onResize: p
+                  className: `${it} ${ro}`,
+                  onResize: _
                 }
               ),
-              _.w && /* @__PURE__ */ T(
-                ot,
+              v.w && /* @__PURE__ */ k(
+                st,
                 {
-                  className: `${st} ${eo}`,
-                  onResize: x
+                  className: `${it} ${to}`,
+                  onResize: p
                 }
               )
             ] })
@@ -3096,8 +3108,8 @@ const so = (e) => {
       )
     }
   );
-}, uo = rr(
-  co,
+}, lo = nr(
+  uo,
   ({
     state: e,
     setState: t,
@@ -3108,18 +3120,18 @@ const so = (e) => {
     setState: s,
     isSelected: a,
     showResizeHandle: u
-  }) => r === a && n === u && t === s && Fn(e, o)
-), lo = (e) => e, fo = ({ state: e = {}, getCurrentUser: t, className: r, ...n }) => {
+  }) => r === a && n === u && t === s && Nn(e, o)
+), fo = (e) => e, po = ({ state: e = {}, getCurrentUser: t, className: r, ...n }) => {
   if (!n.itemMap[e.type])
     return null;
-  const { stateHook: o = lo } = n.itemMap[e.type], {
+  const { stateHook: o = fo } = n.itemMap[e.type], {
     x: s = 0,
     y: a = 0,
     layer: u = 0,
     moving: l,
     ...d
   } = o(e, { getCurrentUser: t }), f = (u + 4) * 10 + 100 + (l ? 5 : 0);
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ k(
     "div",
     {
       className: r,
@@ -3127,8 +3139,8 @@ const so = (e) => {
         transform: `translate(${s}px, ${a}px)`,
         zIndex: f
       },
-      children: /* @__PURE__ */ T(
-        uo,
+      children: /* @__PURE__ */ k(
+        lo,
         {
           ...n,
           showResizeHandle: n.isSelected && n.showResizeHandle,
@@ -3137,11 +3149,11 @@ const so = (e) => {
       )
     }
   );
-}, po = rr(fo), mo = () => {
-  const { updateItem: e } = gt(), [t, r] = oe((d) => [
+}, mo = nr(po), go = () => {
+  const { updateItem: e } = ht(), [t, r] = oe((d) => [
     d.itemIds,
     d.items
-  ]), [n, o, s, a] = Q(
+  ]), [n, o, s, a] = Z(
     (d) => [
       d.config.boardSize,
       d.config.showResizeHandle,
@@ -3155,8 +3167,8 @@ const so = (e) => {
     display: "inline-block",
     lineHeight: 0
   });
-  return t.map((d) => /* @__PURE__ */ T(
-    po,
+  return t.map((d) => /* @__PURE__ */ k(
+    mo,
     {
       state: r[d],
       setState: e,
@@ -3170,21 +3182,21 @@ const so = (e) => {
     d
   ));
 };
-function go(e = !1) {
-  const t = Re(e), r = tr(() => t.current, []);
+function ho(e = !1) {
+  const t = Re(e), r = rr(() => t.current, []);
   return Pe(() => (t.current = !0, () => {
     t.current = !1;
   }), []), r;
 }
-function ho(e, ...t) {
+function vo(e, ...t) {
   e && e.addEventListener && e.addEventListener(...t);
 }
-function vo(e, ...t) {
+function yo(e, ...t) {
   e && e.removeEventListener && e.removeEventListener(...t);
 }
-const yo = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
+const So = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
 function ue(e, ...t) {
-  const r = go(), n = pt(t[1]), o = lt(
+  const r = ho(), n = mt(t[1]), o = ft(
     () => (
       // as some event listeners designed to be used through `this`
       // it is better to make listener a conventional function as it
@@ -3198,28 +3210,28 @@ function ue(e, ...t) {
     []
   );
   Pe(() => {
-    const s = e && yo(e, "current") ? e.current : e;
+    const s = e && So(e, "current") ? e.current : e;
     if (!s)
       return;
     const a = t.slice(2);
-    return ho(s, t[0], o, ...a), () => vo(s, t[0], o, ...a);
+    return vo(s, t[0], o, ...a), () => yo(s, t[0], o, ...a);
   }, [e, t[0]]);
 }
-const So = K({
+const _o = K({
   zIndex: 210,
   position: "absolute",
   backgroundColor: "hsla(0, 40%, 50%, 10%)",
   border: "2px solid hsl(0, 55%, 40%)"
-}), _o = (e, t, r = !1) => {
+}), bo = (e, t, r = !1) => {
   const n = t.getElementsByClassName("selector");
   if (!n.length)
     return [];
   const o = n[0];
   return Array.from(t.getElementsByClassName("item")).filter((s) => {
     const a = Te(s), u = e[a];
-    return !u || !r && u.locked ? !1 : on(s, o);
+    return !u || !r && u.locked ? !1 : sn(s, o);
   }).map((s) => Te(s));
-}, bo = ({ children: e, moveFirst: t }) => {
+}, Eo = ({ children: e, moveFirst: t }) => {
   const [
     r,
     n,
@@ -3227,7 +3239,7 @@ const So = K({
     s,
     a,
     u
-  ] = Q((m) => [
+  ] = Z((m) => [
     m.getSelection,
     m.clear,
     m.setSelection,
@@ -3235,7 +3247,7 @@ const So = K({
     m.getConfiguration,
     m.getBoardState,
     m.updateBoardState
-  ]), { findElementUnderPointer: l } = gt(), [d] = oe((m) => [m.getItems]), [f, c] = g.useState({}), [, h] = g.useTransition(), [_, v] = g.useState(!1), E = g.useRef(null), I = g.useRef({
+  ]), { findElementUnderPointer: l } = ht(), [d] = oe((m) => [m.getItems]), [f, c] = g.useState({}), [, h] = g.useTransition(), [S, v] = g.useState(!1), E = g.useRef(null), O = g.useRef({
     moving: !1
   });
   return ue(document, "keydown", (m) => {
@@ -3245,55 +3257,55 @@ const So = K({
   }), g.useEffect(() => (n(), () => {
     n();
   }), [n]), g.useEffect(() => {
-    if (I.current.moving) {
-      const m = d(), { boardWrapper: S } = a(), O = _o(m, S, _);
+    if (O.current.moving) {
+      const m = d(), { boardWrapper: w } = a(), R = bo(m, w, S);
       h(() => {
-        o(O);
+        o(R);
       });
     }
-  }, [a, d, f, o, _]), /* @__PURE__ */ T(
+  }, [a, d, f, o, S]), /* @__PURE__ */ k(
     Fe,
     {
       onDragStart: async (m) => {
-        await l(m) || (I.current.moving = !0, h(() => {
+        await l(m) || (O.current.moving = !0, h(() => {
           u({ selecting: !0 });
         }), E.current.style.cursor = "crosshair");
       },
-      onDrag: ({ distanceY: m, distanceX: S, startX: O, startY: k }) => {
-        if (I.current.moving) {
-          const { top: j, left: M } = E.current.getBoundingClientRect(), A = O - M, N = k - j;
-          S > 0 ? (I.current.left = A, I.current.width = S) : (I.current.left = A + S, I.current.width = -S), m > 0 ? (I.current.top = N, I.current.height = m) : (I.current.top = N + m, I.current.height = -m), c({ ...I.current, moving: !0 });
+      onDrag: ({ distanceY: m, distanceX: w, startX: R, startY: T }) => {
+        if (O.current.moving) {
+          const { top: D, left: M } = E.current.getBoundingClientRect(), A = R - M, Y = T - D;
+          w > 0 ? (O.current.left = A, O.current.width = w) : (O.current.left = A + w, O.current.width = -w), m > 0 ? (O.current.top = Y, O.current.height = m) : (O.current.top = Y + m, O.current.height = -m), c({ ...O.current, moving: !0 });
         }
       },
       onDragEnd: () => {
-        I.current.moving && (h(() => {
+        O.current.moving && (h(() => {
           u({ selecting: !1 });
-        }), I.current.moving = !1, c({ moving: !1 }), E.current.style.cursor = "auto");
+        }), O.current.moving = !1, c({ moving: !1 }), E.current.style.cursor = "auto");
       },
       onTap: (m) => {
-        const { target: S, ctrlKey: O, metaKey: k } = m, j = l(m);
-        if (!j && Oe(S, "board"))
+        const { target: w, ctrlKey: R, metaKey: T } = m, D = l(m);
+        if (!D && Oe(w, "board"))
           n();
         else {
-          const M = Te(j);
+          const M = Te(D);
           if (!M) {
             n();
             return;
           }
           const A = r();
-          j && !A.includes(M) && (O || k ? s([M]) : o([M]));
+          D && !A.includes(M) && (R || T ? s([M]) : o([M]));
         }
       },
       onLongTap: ({ target: m }) => {
-        const S = Oe(m, "item");
-        if (S) {
-          const O = Te(S);
-          o([O]);
+        const w = Oe(m, "item");
+        if (w) {
+          const R = Te(w);
+          o([R]);
         }
       },
       mainAction: t ? "pan" : "drag",
       children: /* @__PURE__ */ le("div", { ref: E, children: [
-        f.moving && /* @__PURE__ */ T(
+        f.moving && /* @__PURE__ */ k(
           "div",
           {
             style: {
@@ -3301,15 +3313,15 @@ const So = K({
               height: `${f.height}px`,
               width: `${f.width}px`
             },
-            className: `selector ${So}`
+            className: `selector ${_o}`
           }
         ),
         e
       ] })
     }
   );
-}, Eo = ({ children: e }) => {
-  const { moveItems: t, placeItems: r, findElementUnderPointer: n } = gt(), { vectorFromWrapperToBoard: o } = Me(), [s, a, u, l, d] = Q((y) => [
+}, wo = ({ children: e }) => {
+  const { moveItems: t, placeItems: r, findElementUnderPointer: n } = ht(), { vectorFromWrapperToBoard: o } = Me(), [s, a, u, l, d] = Z((y) => [
     y.select,
     y.setSelection,
     y.getSelection,
@@ -3317,25 +3329,25 @@ const So = K({
     y.updateBoardState
   ]), [f] = oe((y) => [y.getBoardConfig]), c = g.useRef({}), h = g.useRef({
     items: []
-  }), _ = (y) => {
-    const { ctrlKey: C, metaKey: x, event: p } = y, w = n(y);
-    if (w) {
+  }), S = (y) => {
+    const { ctrlKey: x, metaKey: C, event: p } = y, _ = n(y);
+    if (_) {
       p.stopPropagation();
       const m = u();
       h.current.items = m;
-      const S = Te(w);
-      m.includes(S) || (C || x ? (h.current.items = [...m, S], s([S])) : (h.current.items = [S], a([S]))), Object.assign(c.current, {
+      const w = Te(_);
+      m.includes(w) || (x || C ? (h.current.items = [...m, w], s([w])) : (h.current.items = [w], a([w]))), Object.assign(c.current, {
         moving: !0
       });
     }
-  }, v = ({ deltaX: y, deltaY: C, event: x }) => {
+  }, v = ({ deltaX: y, deltaY: x, event: C }) => {
     if (c.current.moving) {
-      x.stopPropagation();
-      const { movingItems: p } = l(), [w, m] = o(y, C);
+      C.stopPropagation();
+      const { movingItems: p } = l(), [_, m] = o(y, x);
       t(
         h.current.items,
         {
-          x: w,
+          x: _,
           y: m
         },
         !0
@@ -3343,20 +3355,20 @@ const So = K({
     }
   }, E = () => {
     if (c.current.moving) {
-      const { gridSize: y = 1 } = f(), C = y || 1;
+      const { gridSize: y = 1 } = f(), x = y || 1;
       c.current = { moving: !1 }, r(h.current.items, {
         type: "grid",
-        size: C
+        size: x
       }), d({ movingItems: !1 });
     }
   };
   return ue(document, "keydown", (y) => {
     if (["INPUT", "TEXTAREA"].includes(y.target.tagName))
       return;
-    const C = u();
-    if (C.length) {
-      const { gridSize: x = 1 } = f();
-      let p = 0, w = 0;
+    const x = u();
+    if (x.length) {
+      const { gridSize: C = 1 } = f();
+      let p = 0, _ = 0;
       switch (y.key) {
         case "ArrowLeft":
           p = -10;
@@ -3365,30 +3377,30 @@ const So = K({
           p = 10;
           break;
         case "ArrowUp":
-          w = -10;
+          _ = -10;
           break;
         case "ArrowDown":
-          w = 10;
+          _ = 10;
           break;
       }
-      if (p || w) {
-        y.shiftKey && (p *= 5, w *= 5), (y.ctrlKey || y.altKey || y.metaKey) && (p /= 10, w /= 10);
-        const [m, S] = o(p, w);
+      if (p || _) {
+        y.shiftKey && (p *= 5, _ *= 5), (y.ctrlKey || y.altKey || y.metaKey) && (p /= 10, _ /= 10);
+        const [m, w] = o(p, _);
         t(
-          C,
+          x,
           {
             x: m,
-            y: S
+            y: w
           },
           !0
-        ), r(C, {
+        ), r(x, {
           type: "grid",
-          size: x || 1
+          size: C || 1
         }), y.preventDefault();
       }
     }
-  }), /* @__PURE__ */ T(Fe, { onDragStart: _, onDrag: v, onDragEnd: E, children: e });
-}, wo = (e) => {
+  }), /* @__PURE__ */ k(Fe, { onDragStart: S, onDrag: v, onDragEnd: E, children: e });
+}, xo = (e) => {
   const t = g.useRef({ hover: !1, x: 0, y: 0 });
   return ue(e.current, "mousemove", (n) => {
     const { clientX: o, clientY: s } = n;
@@ -3398,8 +3410,8 @@ const So = K({
   }), ue(e.current, "mouseleave", () => {
     t.current.hover = !1;
   }), g.useCallback(() => t.current, []);
-}, Co = [...Array(5).keys()].map((e) => `Digit${e + 1}`), xo = () => {
-  const [e, t] = g.useState({}), [r, n] = Q((o) => [
+}, Co = [...Array(5).keys()].map((e) => `Digit${e + 1}`), Ro = () => {
+  const [e, t] = g.useState({}), [r, n] = Z((o) => [
     o.getBoardState,
     o.updateBoardState
   ]);
@@ -3412,14 +3424,14 @@ const So = K({
       })) : e[s] && n(e[s]), o.preventDefault();
     }
   }), null;
-}, Ro = ({ children: e, moveFirst: t = !1 }) => {
+}, Io = ({ children: e, moveFirst: t = !1 }) => {
   const r = g.useRef(null), [
     n,
     o,
     s,
     a,
     u
-  ] = Q((p) => [
+  ] = Z((p) => [
     {
       translateX: p.boardState.translateX,
       translateY: p.boardState.translateY,
@@ -3430,8 +3442,8 @@ const So = K({
     p.getConfiguration,
     p.updateBoardState,
     p.getSelection
-  ]), { zoomToCenter: l, zoomToExtent: d, moveBoard: f } = Me(), [c, h] = g.useState(!1), _ = g.useRef({}), v = wo(r);
-  xo();
+  ]), { zoomToCenter: l, zoomToExtent: d, moveBoard: f } = Me(), [c, h] = g.useState(!1), S = g.useRef({}), v = xo(r);
+  Ro();
   const E = g.useCallback(() => {
     const { itemExtent: p } = s();
     d(p);
@@ -3439,27 +3451,27 @@ const So = K({
   g.useEffect(() => {
     !c && o.radius && (E(), h(!0));
   }, [E, c, o]);
-  const I = ({ clientX: p, clientY: w, scale: m }) => {
-    l({ to: { x: p, y: w }, factor: 1 - m / 500 }), clearTimeout(_.current.zoom), _.current.zoom = setTimeout(() => {
+  const O = ({ clientX: p, clientY: _, scale: m }) => {
+    l({ to: { x: p, y: _ }, factor: 1 - m / 500 }), clearTimeout(S.current.zoom), S.current.zoom = setTimeout(() => {
       a({ zooming: !1 });
     }, 200), a({ zooming: !0 });
-  }, y = ({ deltaX: p, deltaY: w }) => {
-    f(({ translateX: m, translateY: S }) => ({
+  }, y = ({ deltaX: p, deltaY: _ }) => {
+    f(({ translateX: m, translateY: w }) => ({
       translateX: m + p,
-      translateY: S + w
-    })), clearTimeout(_.current.pan), _.current.pan = setTimeout(() => {
+      translateY: w + _
+    })), clearTimeout(S.current.pan), S.current.pan = setTimeout(() => {
       a({ panning: !1 });
     }, 200), a({ panning: !0 });
-  }, C = (p) => {
+  }, x = (p) => {
     if (["INPUT", "TEXTAREA"].includes(p.target.tagName))
       return;
-    let w = 0, m = 0, S = 1;
+    let _ = 0, m = 0, w = 1;
     switch (p.key) {
       case "ArrowLeft":
-        w = -10;
+        _ = -10;
         break;
       case "ArrowRight":
-        w = 10;
+        _ = 10;
         break;
       case "ArrowUp":
         m = -10;
@@ -3468,32 +3480,32 @@ const So = K({
         m = 10;
         break;
       case "PageUp":
-        S = 1.2;
+        w = 1.2;
         break;
       case "PageDown":
-        S = 0.8;
+        w = 0.8;
         break;
     }
-    if (w || m || S !== 1) {
-      const O = u();
-      if (S === 1 && O.length)
+    if (_ || m || w !== 1) {
+      const R = u();
+      if (w === 1 && R.length)
         return;
-      p.shiftKey && (w *= 5, m *= 5), (p.ctrlKey || p.altKey || p.metaKey) && (w /= 5, m /= 5), f(({ translateX: k, translateY: j }) => ({
-        translateX: k + w,
-        translateY: j + m
-      })), l({ factor: S }), p.preventDefault();
+      p.shiftKey && (_ *= 5, m *= 5), (p.ctrlKey || p.altKey || p.metaKey) && (_ /= 5, m /= 5), f(({ translateX: T, translateY: D }) => ({
+        translateX: T + _,
+        translateY: D + m
+      })), l({ factor: w }), p.preventDefault();
     }
     p.key === " " && !p.repeat && v().hover && l({ factor: 3, to: v() });
-  }, x = (p) => {
+  }, C = (p) => {
     ["INPUT", "TEXTAREA"].includes(p.target.tagName) || p.key === " " && v().hover && l({ factor: 1 / 3, to: v() });
   };
-  return ue(document, "keydown", C), ue(document, "keyup", x), /* @__PURE__ */ T(
+  return ue(document, "keydown", x), ue(document, "keyup", C), /* @__PURE__ */ k(
     Fe,
     {
       onPan: y,
-      onZoom: I,
+      onZoom: O,
       mainAction: t ? "pan" : "drag",
-      children: /* @__PURE__ */ T(
+      children: /* @__PURE__ */ k(
         "div",
         {
           style: {
@@ -3508,7 +3520,7 @@ const So = K({
       )
     }
   );
-}, Io = K({
+}, Oo = K({
   position: "absolute",
   top: 0,
   left: 0,
@@ -3516,7 +3528,7 @@ const So = K({
   backgroundColor: "hsla(0, 40%, 50%, 0%)",
   border: "2px dashed hsl(20, 55%, 40%)",
   pointerEvents: "none"
-}), Oo = () => {
+}), To = () => {
   const [
     e,
     t,
@@ -3524,7 +3536,7 @@ const So = K({
     n,
     o,
     { translateX: s, translateY: a, scale: u }
-  ] = Q((c) => [
+  ] = Z((c) => [
     c.selection,
     c.getSelection,
     c.selectionBox,
@@ -3536,24 +3548,24 @@ const So = K({
       scale: c.boardState.scale
     }
   ]), [l] = oe((c) => [c.items]), d = g.useCallback(() => {
-    const c = t(), { boardWrapperRect: h, boardWrapper: _ } = o();
+    const c = t(), { boardWrapperRect: h, uid: S } = o();
     if (c.length === 0) {
       n(null);
       return;
     }
-    const v = sn(c, _);
+    const v = an(c, S);
     if (!v) {
       n(null);
       return;
     }
-    const { left: E, top: I, width: y, height: C } = v, x = {
+    const { left: E, top: O, width: y, height: x } = v, C = {
       left: E - h.left,
-      top: I - h.top,
-      height: C,
+      top: O - h.top,
+      height: x,
       width: y
     };
-    n(x);
-  }, [o, t, n]), f = mt(d, [d], 300);
+    n(C);
+  }, [o, t, n]), f = gt(d, [d], 300);
   return g.useEffect(() => {
     d(), f();
   }, [
@@ -3564,7 +3576,7 @@ const So = K({
     u,
     d,
     f
-  ]), !r || e.length < 2 ? null : /* @__PURE__ */ T(
+  ]), !r || e.length < 2 ? null : /* @__PURE__ */ k(
     "div",
     {
       style: {
@@ -3572,16 +3584,16 @@ const So = K({
         height: `${r.height}px`,
         width: `${r.width}px`
       },
-      className: `selection ${Io}`
+      className: `selection ${Oo}`
     }
   );
-}, To = () => {
-  const [e] = Q((t) => [t.boardState.movingItems]);
-  return e ? null : /* @__PURE__ */ T(Oo, {});
-}, ko = typeof window < "u" && typeof navigator < "u" && typeof document < "u";
+}, ko = () => {
+  const [e] = Z((t) => [t.boardState.movingItems]);
+  return e ? null : /* @__PURE__ */ k(To, {});
+}, Po = typeof window < "u" && typeof navigator < "u" && typeof document < "u";
 let Le;
-function Po() {
-  if (!ko)
+function Mo() {
+  if (!Po)
     return;
   if (Le)
     return Le;
@@ -3603,8 +3615,8 @@ function Po() {
     }
   }, Le;
 }
-function Mo(e, t, r = !0) {
-  const n = r && Po(), o = pt(t), s = e && "current" in e ? e.current : e;
+function Do(e, t, r = !0) {
+  const n = r && Mo(), o = mt(t), s = e && "current" in e ? e.current : e;
   Pe(() => {
     const a = e && "current" in e ? e.current : e;
     if (!n || !a)
@@ -3618,7 +3630,7 @@ function Mo(e, t, r = !0) {
     };
   }, [s, n]);
 }
-function Zt(e, t, r) {
+function Qt(e, t, r) {
   return Math.min(Math.max(e, r), t);
 }
 class jo extends Error {
@@ -3626,89 +3638,89 @@ class jo extends Error {
     super(`Failed to parse color: "${t}"`);
   }
 }
-var xe = jo;
-function Do(e) {
+var Ce = jo;
+function $o(e) {
   if (typeof e != "string")
-    throw new xe(e);
+    throw new Ce(e);
   if (e.trim().toLowerCase() === "transparent")
     return [0, 0, 0, 0];
   let t = e.trim();
-  t = Xo.test(e) ? Lo(e) : e;
-  const r = zo.exec(t);
+  t = Uo.test(e) ? zo(e) : e;
+  const r = Yo.exec(t);
   if (r) {
     const a = Array.from(r).slice(1);
     return [...a.slice(0, 3).map((u) => parseInt(ke(u, 2), 16)), parseInt(ke(a[3] || "f", 2), 16) / 255];
   }
-  const n = Yo.exec(t);
+  const n = Bo.exec(t);
   if (n) {
     const a = Array.from(n).slice(1);
     return [...a.slice(0, 3).map((u) => parseInt(u, 16)), parseInt(a[3] || "ff", 16) / 255];
   }
-  const o = Bo.exec(t);
+  const o = No.exec(t);
   if (o) {
     const a = Array.from(o).slice(1);
     return [...a.slice(0, 3).map((u) => parseInt(u, 10)), parseFloat(a[3] || "1")];
   }
-  const s = No.exec(t);
+  const s = Xo.exec(t);
   if (s) {
     const [a, u, l, d] = Array.from(s).slice(1).map(parseFloat);
-    if (Zt(0, 100, u) !== u)
-      throw new xe(e);
-    if (Zt(0, 100, l) !== l)
-      throw new xe(e);
-    return [...Uo(a, u, l), Number.isNaN(d) ? 1 : d];
+    if (Qt(0, 100, u) !== u)
+      throw new Ce(e);
+    if (Qt(0, 100, l) !== l)
+      throw new Ce(e);
+    return [...Wo(a, u, l), Number.isNaN(d) ? 1 : d];
   }
-  throw new xe(e);
+  throw new Ce(e);
 }
-function $o(e) {
+function Ao(e) {
   let t = 5381, r = e.length;
   for (; r; )
     t = t * 33 ^ e.charCodeAt(--r);
   return (t >>> 0) % 2341;
 }
-const Qt = (e) => parseInt(e.replace(/_/g, ""), 36), Ao = "1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((e, t) => {
-  const r = Qt(t.substring(0, 3)), n = Qt(t.substring(3)).toString(16);
+const er = (e) => parseInt(e.replace(/_/g, ""), 36), Lo = "1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((e, t) => {
+  const r = er(t.substring(0, 3)), n = er(t.substring(3)).toString(16);
   let o = "";
   for (let s = 0; s < 6 - n.length; s++)
     o += "0";
   return e[r] = `${o}${n}`, e;
 }, {});
-function Lo(e) {
-  const t = e.toLowerCase().trim(), r = Ao[$o(t)];
+function zo(e) {
+  const t = e.toLowerCase().trim(), r = Lo[Ao(t)];
   if (!r)
-    throw new xe(e);
+    throw new Ce(e);
   return `#${r}`;
 }
-const ke = (e, t) => Array.from(Array(t)).map(() => e).join(""), zo = new RegExp(`^#${ke("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), Yo = new RegExp(`^#${ke("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), Bo = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${ke(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), No = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, Xo = /^[a-z]+$/i, er = (e) => Math.round(e * 255), Uo = (e, t, r) => {
+const ke = (e, t) => Array.from(Array(t)).map(() => e).join(""), Yo = new RegExp(`^#${ke("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), Bo = new RegExp(`^#${ke("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), No = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${ke(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), Xo = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, Uo = /^[a-z]+$/i, tr = (e) => Math.round(e * 255), Wo = (e, t, r) => {
   let n = r / 100;
   if (t === 0)
-    return [n, n, n].map(er);
+    return [n, n, n].map(tr);
   const o = (e % 360 + 360) % 360 / 60, s = (1 - Math.abs(2 * n - 1)) * (t / 100), a = s * (1 - Math.abs(o % 2 - 1));
   let u = 0, l = 0, d = 0;
   o >= 0 && o < 1 ? (u = s, l = a) : o >= 1 && o < 2 ? (u = a, l = s) : o >= 2 && o < 3 ? (l = s, d = a) : o >= 3 && o < 4 ? (l = a, d = s) : o >= 4 && o < 5 ? (u = a, d = s) : o >= 5 && o < 6 && (u = s, d = a);
-  const f = n - s / 2, c = u + f, h = l + f, _ = d + f;
-  return [c, h, _].map(er);
+  const f = n - s / 2, c = u + f, h = l + f, S = d + f;
+  return [c, h, S].map(tr);
 };
-function Wo(e) {
+function Vo(e) {
   if (e === "transparent")
     return 0;
   function t(s) {
     const a = s / 255;
     return a <= 0.03928 ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4);
   }
-  const [r, n, o] = Do(e);
+  const [r, n, o] = $o(e);
   return 0.2126 * t(r) + 0.7152 * t(n) + 0.0722 * t(o);
 }
-function Vo(e) {
-  return Wo(e) > 0.179;
+function Fo(e) {
+  return Vo(e) > 0.179;
 }
-const Fo = K({
+const Ko = K({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
   zIndex: 210,
   pointerEvents: "none"
-}), Ko = K({
+}), Ho = K({
   fontWeight: "bold",
   padding: "0 0.5em",
   borderRadius: "2px",
@@ -3719,9 +3731,9 @@ const Fo = K({
   marginTop: "1.7em",
   whitespace: "nowrap",
   pointerEvents: "none"
-}), Ho = ({ color: e = "#666", size: t = 40, text: r }) => {
-  const n = Vo(e) ? "#222" : "#EEE";
-  return /* @__PURE__ */ le("div", { className: Fo, children: [
+}), qo = ({ color: e = "#666", size: t = 40, text: r }) => {
+  const n = Fo(e) ? "#222" : "#EEE";
+  return /* @__PURE__ */ le("div", { className: Ko, children: [
     /* @__PURE__ */ le(
       "svg",
       {
@@ -3731,7 +3743,7 @@ const Fo = K({
         width: t,
         height: t,
         children: [
-          /* @__PURE__ */ T(
+          /* @__PURE__ */ k(
             "path",
             {
               d: "m 1197.1015,869.718 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",
@@ -3740,7 +3752,7 @@ const Fo = K({
               }
             }
           ),
-          /* @__PURE__ */ T(
+          /* @__PURE__ */ k(
             "path",
             {
               d: "m 1193.0939,861.12419 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",
@@ -3754,35 +3766,35 @@ const Fo = K({
         ]
       }
     ),
-    /* @__PURE__ */ T(
+    /* @__PURE__ */ k(
       "div",
       {
         style: {
           color: n,
           backgroundColor: e
         },
-        className: Ko,
+        className: Ho,
         children: r
       }
     )
   ] });
-}, qo = g.memo(Ho), Go = K({
+}, Go = g.memo(qo), Jo = K({
   top: 0,
   left: 0,
   zIndex: 210,
   position: "fixed",
   pointerEvents: "none"
-}), Jo = ({ pos: e, ...t }) => /* @__PURE__ */ T(
+}), Zo = ({ pos: e, ...t }) => /* @__PURE__ */ k(
   "div",
   {
-    className: Go,
+    className: Jo,
     style: {
       transform: `translate(${e.x - 6}px, ${e.y - 15}px)`
     },
-    children: /* @__PURE__ */ T(qo, { ...t })
+    children: /* @__PURE__ */ k(Go, { ...t })
   }
-), Zo = ({ children: e }) => {
-  const [t] = Q((v) => [
+), Qo = ({ children: e }) => {
+  const [t] = Z((v) => [
     v.getConfiguration,
     v.boardState.scale
     // We want to update this component when the scale changes
@@ -3797,25 +3809,25 @@ const Fo = K({
     v.moveCursor,
     v.removeCursor
   ]), { boardWrapperRect: f } = t(), c = ({ clientX: v, clientY: E }) => {
-    const [I, y] = r(
+    const [O, y] = r(
       v - f.left,
       E - f.top
     );
-    l(o.id, { x: I, y });
+    l(o.id, { x: O, y });
   }, h = () => {
     d(o.id);
-  }, _ = s.reduce((v, E) => (E.id !== o.id && a[E.id] && (v[E.id] = a[E.id]), v), {});
+  }, S = s.reduce((v, E) => (E.id !== o.id && a[E.id] && (v[E.id] = a[E.id]), v), {});
   return /* @__PURE__ */ le("div", { onPointerMove: c, onPointerLeave: h, children: [
     e,
-    Object.entries(_).map(([v, E]) => {
-      const [I, y] = n(E.x, E.y), C = {
-        x: I + f.left,
+    Object.entries(S).map(([v, E]) => {
+      const [O, y] = n(E.x, E.y), x = {
+        x: O + f.left,
         y: y + f.top
       };
-      return ft(C, f) ? /* @__PURE__ */ T(
-        Jo,
+      return dt(x, f) ? /* @__PURE__ */ k(
+        Zo,
         {
-          pos: C,
+          pos: x,
           text: u[v].name,
           color: u[v].color
         },
@@ -3823,21 +3835,21 @@ const Fo = K({
       ) : null;
     })
   ] });
-}, Qo = ({ children: e }) => e, es = {
+}, es = ({ children: e }) => e, ts = {
   overflow: "hidden",
   position: "absolute",
   inset: 0
-}, gs = ({
+}, vs = ({
   moveFirst: e = !0,
   style: t,
   wrapperStyle: r,
   itemTemplates: n = {},
-  boardSize: o = cr,
+  boardSize: o = ur,
   children: s,
   showResizeHandle: a = !1,
-  Wrapper: u = Qo
+  Wrapper: u = es
 }) => {
-  const l = g.useRef(null), [d, f] = Q((v) => [
+  const l = g.useRef(null), [d, f] = Z((v) => [
     v.config.uid,
     v.updateConfiguration
   ]), { updateItemExtent: c } = Me(), h = {
@@ -3872,20 +3884,20 @@ const Fo = K({
     f({
       boardWrapperRect: l.current.getBoundingClientRect()
     }), c(), setTimeout(c, 2e3);
-  }, [f, c]), Mo(l, () => {
+  }, [f, c]), Do(l, () => {
     l.current && f({
       boardWrapperRect: l.current.getBoundingClientRect()
     });
   });
-  const _ = K({ ...es, ...r });
+  const S = K({ ...ts, ...r });
   return /* @__PURE__ */ le(
     "div",
     {
       ref: l,
       id: d,
-      className: `sync-board ${_}`,
+      className: `sync-board ${S}`,
       children: [
-        /* @__PURE__ */ T(Zo, { children: /* @__PURE__ */ T(bo, { moveFirst: e, children: /* @__PURE__ */ T(Ro, { moveFirst: e, children: /* @__PURE__ */ T(Eo, { moveFirst: e, children: /* @__PURE__ */ T(u, { children: /* @__PURE__ */ le(
+        /* @__PURE__ */ k(Qo, { children: /* @__PURE__ */ k(Eo, { moveFirst: e, children: /* @__PURE__ */ k(Io, { moveFirst: e, children: /* @__PURE__ */ k(wo, { moveFirst: e, children: /* @__PURE__ */ k(u, { children: /* @__PURE__ */ le(
           "div",
           {
             onContextMenu: (v) => {
@@ -3894,34 +3906,35 @@ const Fo = K({
             style: h,
             className: "board",
             children: [
-              /* @__PURE__ */ T(mo, {}),
+              /* @__PURE__ */ k(go, {}),
               s
             ]
           }
         ) }) }) }) }) }),
-        /* @__PURE__ */ T(To, {})
+        /* @__PURE__ */ k(ko, {})
       ]
     }
   );
 };
-Vn(g.createElement);
+Bn(g.createElement);
 export {
-  gs as Board,
-  ps as BoardWrapper,
-  ms as RoomWrapper,
-  is as useAvailableActions,
-  us as useBoardConfig,
+  vs as Board,
+  gs as BoardWrapper,
+  hs as RoomWrapper,
+  cs as useAvailableActions,
+  fs as useBoardConfig,
   Me as useBoardPosition,
-  ls as useBoardState,
-  os as useDebouncedItems,
-  gt as useItemActions,
-  Vt as useItemInteraction,
-  ns as useItems,
-  ds as useMessage,
-  ss as useSelectedItems,
-  as as useSelectionBox,
-  fs as useSessionInfo,
-  cs as useUsers,
+  ds as useBoardState,
+  ss as useDebouncedItems,
+  as as useGetSelectedItems,
+  ht as useItemActions,
+  Ft as useItemInteraction,
+  os as useItems,
+  ms as useMessage,
+  is as useSelectedItems,
+  us as useSelectionBox,
+  ps as useSessionInfo,
+  ls as useUsers,
   Xe as useWire
 };
 //# sourceMappingURL=react-sync-board.js.map