react-sync-board 1.1.3 → 1.1.5

package/dist/react-sync-board.js

@@ -1,7 +1,7 @@
 var Dr = Object.defineProperty;
 var $r = (e, t, r) => t in e ? Dr(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var Ot = (e, t, r) => ($r(e, typeof t != "symbol" ? t + "" : t, r), r);
-import m, { useContext as be, useDebugValue as Ar, useRef as Ie, useMemo as ct, useEffect as Me, useCallback as Jt, memo as Zt } from "react";
+import m, { useContext as _e, useDebugValue as Ar, useRef as Ie, useMemo as ct, useEffect as Me, useCallback as Jt, memo as Zt } from "react";
 function Lr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
@@ -29,14 +29,14 @@ function Yr() {
   Tt = 1;
   var e = m, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, o = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
   function a(u, l, d) {
-    var f, c = {}, b = null, _ = null;
-    d !== void 0 && (b = "" + d), l.key !== void 0 && (b = "" + l.key), l.ref !== void 0 && (_ = l.ref);
+    var f, c = {}, _ = null, b = null;
+    d !== void 0 && (_ = "" + d), l.key !== void 0 && (_ = "" + l.key), l.ref !== void 0 && (b = 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: b, ref: _, props: c, _owner: o.current };
+    return { $$typeof: t, type: u, key: _, ref: b, props: c, _owner: o.current };
   }
   return we.Fragment = r, we.jsx = a, we.jsxs = a, we;
 }
@@ -53,7 +53,7 @@ var Ce = {};
 var kt;
 function Br() {
   return kt || (kt = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = m, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), a = Symbol.for("react.provider"), u = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), d = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), C = Symbol.iterator, h = "@@iterator";
+    var e = m, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), a = Symbol.for("react.provider"), u = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), d = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), b = Symbol.for("react.offscreen"), C = Symbol.iterator, h = "@@iterator";
     function S(i) {
       if (i === null || typeof i != "object")
         return null;
@@ -81,7 +81,7 @@ function Br() {
     var p = !1, R = !1, w = !1, g = !1, k = !1, P;
     P = Symbol.for("react.module.reference");
     function M(i) {
-      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || k || i === o || i === d || i === f || g || i === _ || p || R || w || typeof i == "object" && i !== null && (i.$$typeof === b || i.$$typeof === c || i.$$typeof === a || i.$$typeof === u || i.$$typeof === l || // This needs to include all possible module reference object
+      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || k || i === o || i === d || i === f || g || i === b || p || R || w || typeof i == "object" && i !== null && (i.$$typeof === _ || 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.
@@ -131,7 +131,7 @@ function Br() {
           case c:
             var j = i.displayName || null;
             return j !== null ? j : N(i.type) || "Memo";
-          case b: {
+          case _: {
             var U = i, W = U._payload, Y = U._init;
             try {
               return N(Y(W));
@@ -320,7 +320,7 @@ function Br() {
             return dr(i.render);
           case c:
             return De(i.type, y, I);
-          case b: {
+          case _: {
             var j = i, U = j._payload, W = j._init;
             try {
               return De(W(U), y, I);
@@ -386,7 +386,7 @@ function Br() {
       ref: !0,
       __self: !0,
       __source: !0
-    }, St, _t, Ke;
+    }, St, bt, Ke;
     Ke = {};
     function Sr(i) {
       if ($e.call(i, "ref")) {
@@ -396,7 +396,7 @@ function Br() {
       }
       return i.ref !== void 0;
     }
-    function _r(i) {
+    function br(i) {
       if ($e.call(i, "key")) {
         var y = Object.getOwnPropertyDescriptor(i, "key").get;
         if (y && y.isReactWarning)
@@ -404,7 +404,7 @@ function Br() {
       }
       return i.key !== void 0;
     }
-    function br(i, y) {
+    function _r(i, y) {
       if (typeof i.ref == "string" && Ee.current && y && Ee.current.stateNode !== y) {
         var I = N(Ee.current.type);
         Ke[I] || (x('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', N(Ee.current.type), i.ref), Ke[I] = !0);
@@ -424,7 +424,7 @@ function Br() {
     function wr(i, y) {
       {
         var I = function() {
-          _t || (_t = !0, x("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", y));
+          bt || (bt = !0, x("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", y));
         };
         I.isReactWarning = !0, Object.defineProperty(i, "ref", {
           get: I,
@@ -464,7 +464,7 @@ function Br() {
     function xr(i, y, I, j, U) {
       {
         var W, Y = {}, L = null, Q = null;
-        I !== void 0 && (yt(I), L = "" + I), _r(y) && (yt(y.key), L = "" + y.key), Sr(y) && (Q = y.ref, br(y, U));
+        I !== void 0 && (yt(I), L = "" + I), br(y) && (yt(y.key), L = "" + y.key), Sr(y) && (Q = y.ref, _r(y, U));
         for (W in y)
           $e.call(y, W) && !yr.hasOwnProperty(W) && (Y[W] = y[W]);
         if (i && i.defaultProps) {
@@ -479,13 +479,13 @@ function Br() {
         return Cr(i, L, Q, U, j, Ee.current, Y);
       }
     }
-    var He = E.ReactCurrentOwner, bt = E.ReactDebugCurrentFrame;
+    var He = E.ReactCurrentOwner, _t = E.ReactDebugCurrentFrame;
     function ve(i) {
       if (i) {
         var y = i._owner, I = De(i.type, i._source, y ? y.type : null);
-        bt.setExtraStackFrame(I);
+        _t.setExtraStackFrame(I);
       } else
-        bt.setExtraStackFrame(null);
+        _t.setExtraStackFrame(null);
     }
     var qe;
     qe = !1;
@@ -782,14 +782,14 @@ const Xr = ({
   LoadingComponent: n = Wr,
   children: o
 }) => {
-  const [s, a] = m.useState(!1), [u, l] = m.useState(!1), [d, f] = m.useState(null), c = m.useRef(null), b = m.useRef(!1), _ = be(ot), C = m.useRef(!1);
-  return m.useEffect(() => (b.current = !0, () => {
-    b.current = !1;
+  const [s, a] = m.useState(!1), [u, l] = m.useState(!1), [d, f] = m.useState(null), c = m.useRef(null), _ = m.useRef(!1), b = _e(ot), C = m.useRef(!1);
+  return m.useEffect(() => (_.current = !0, () => {
+    _.current = !1;
   }), []), m.useEffect(() => {
     if (!e)
       return null;
     const h = () => {
-      console.log(`Disconnected from ${r}…`), b.current && (a(!1), l(!1));
+      console.log(`Disconnected from ${r}…`), _.current && (a(!1), l(!1));
     };
     return e.on("disconnect", h), () => {
       e.off("disconnect", h);
@@ -798,10 +798,10 @@ const Xr = ({
     socket: e,
     room: t,
     onMaster: () => {
-      console.log(`Is now master on channel ${r}…`), b.current && l(!0);
+      console.log(`Is now master on channel ${r}…`), _.current && l(!0);
     },
     onJoined: (h) => {
-      console.log(`Connected on channel ${r}…`), c.current = h, b.current && (f(h), a(!0));
+      console.log(`Connected on channel ${r}…`), c.current = h, _.current && (f(h), a(!0));
     }
   })), () => {
     var h;
@@ -809,17 +809,17 @@ const Xr = ({
   }) : null, [r, t, e]), !s || !d ? /* @__PURE__ */ T(n, {}) : /* @__PURE__ */ T(
     ot.Provider,
     {
-      value: { ..._, [r]: { wire: d, joined: s, isMaster: u, room: t } },
+      value: { ...b, [r]: { wire: d, joined: s, isMaster: u, room: t } },
       children: o
     }
   );
-}, Be = (e = "default") => (be(ot) || {})[e], Pt = (e) => {
+}, Be = (e = "default") => (_e(ot) || {})[e], Pt = (e) => {
   let t;
   const r = /* @__PURE__ */ new Set(), n = (l, d) => {
     const f = typeof l == "function" ? l(t) : l;
     if (!Object.is(f, t)) {
       const c = t;
-      t = d ?? typeof f != "object" ? f : Object.assign({}, t, f), r.forEach((b) => b(t, c));
+      t = d ?? typeof f != "object" ? f : Object.assign({}, t, f), r.forEach((_) => _(t, c));
     }
   }, o = () => t, u = { setState: n, getState: o, subscribe: (l) => (r.add(l), () => r.delete(l)), destroy: () => {
     ({ BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0 } && "production") !== "production" && console.warn(
@@ -858,32 +858,32 @@ function Kr() {
     return Ze;
   Mt = 1;
   var e = m;
-  function t(c, b) {
-    return c === b && (c !== 0 || 1 / c === 1 / b) || c !== c && b !== b;
+  function t(c, _) {
+    return c === _ && (c !== 0 || 1 / c === 1 / _) || c !== c && _ !== _;
   }
   var r = typeof Object.is == "function" ? Object.is : t, n = e.useState, o = e.useEffect, s = e.useLayoutEffect, a = e.useDebugValue;
-  function u(c, b) {
-    var _ = b(), C = n({ inst: { value: _, getSnapshot: b } }), h = C[0].inst, S = C[1];
+  function u(c, _) {
+    var b = _(), C = n({ inst: { value: b, getSnapshot: _ } }), h = C[0].inst, S = C[1];
     return s(function() {
-      h.value = _, h.getSnapshot = b, l(h) && S({ inst: h });
-    }, [c, _, b]), o(function() {
+      h.value = b, h.getSnapshot = _, l(h) && S({ inst: h });
+    }, [c, b, _]), o(function() {
       return l(h) && S({ inst: h }), c(function() {
         l(h) && S({ inst: h });
       });
-    }, [c]), a(_), _;
+    }, [c]), a(b), b;
   }
   function l(c) {
-    var b = c.getSnapshot;
+    var _ = c.getSnapshot;
     c = c.value;
     try {
-      var _ = b();
-      return !r(c, _);
+      var b = _();
+      return !r(c, b);
     } catch {
       return !0;
     }
   }
-  function d(c, b) {
-    return b();
+  function d(c, _) {
+    return _();
   }
   var f = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? d : u;
   return Ze.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : f, Ze;
@@ -924,7 +924,7 @@ function Hr() {
       return v === p && (v !== 0 || 1 / v === 1 / p) || v !== v && p !== p;
     }
     var s = typeof Object.is == "function" ? Object.is : o, a = e.useState, u = e.useEffect, l = e.useLayoutEffect, d = e.useDebugValue, f = !1, c = !1;
-    function b(v, p, R) {
+    function _(v, p, R) {
       f || e.startTransition !== void 0 && (f = !0, r("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
       var w = p();
       if (!c) {
@@ -938,22 +938,22 @@ function Hr() {
         }
       }), P = k[0].inst, M = k[1];
       return l(function() {
-        P.value = w, P.getSnapshot = p, _(P) && M({
+        P.value = w, P.getSnapshot = p, b(P) && M({
           inst: P
         });
       }, [v, w, p]), u(function() {
-        _(P) && M({
+        b(P) && M({
           inst: P
         });
         var $ = function() {
-          _(P) && M({
+          b(P) && M({
             inst: P
           });
         };
         return v($);
       }, [v]), d(w), w;
     }
-    function _(v) {
+    function b(v) {
       var p = v.getSnapshot, R = v.value;
       try {
         var w = p();
@@ -965,7 +965,7 @@ function Hr() {
     function C(v, p, R) {
       return p();
     }
-    var h = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", S = !h, E = S ? C : b, x = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : E;
+    var h = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", S = !h, E = S ? C : _, x = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : E;
     Qe.useSyncExternalStore = x, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
   }()), Qe;
 }
@@ -994,7 +994,7 @@ function qr() {
     return d === f && (d !== 0 || 1 / d === 1 / f) || d !== d && f !== f;
   }
   var n = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, s = e.useRef, a = e.useEffect, u = e.useMemo, l = e.useDebugValue;
-  return Je.useSyncExternalStoreWithSelector = function(d, f, c, b, _) {
+  return Je.useSyncExternalStoreWithSelector = function(d, f, c, _, b) {
     var C = s(null);
     if (C.current === null) {
       var h = { hasValue: !1, value: null };
@@ -1004,17 +1004,17 @@ function qr() {
     C = u(function() {
       function E(w) {
         if (!x) {
-          if (x = !0, v = w, w = b(w), _ !== void 0 && h.hasValue) {
+          if (x = !0, v = w, w = _(w), b !== void 0 && h.hasValue) {
             var g = h.value;
-            if (_(g, w))
+            if (b(g, w))
               return p = g;
           }
           return p = w;
         }
         if (g = p, n(v, w))
           return g;
-        var k = b(w);
-        return _ !== void 0 && _(g, k) ? g : (v = w, p = k);
+        var k = _(w);
+        return b !== void 0 && b(g, k) ? g : (v = w, p = k);
       }
       var x = !1, v, p, R = c === void 0 ? null : c;
       return [function() {
@@ -1022,7 +1022,7 @@ function qr() {
       }, R === null ? void 0 : function() {
         return E(R());
       }];
-    }, [f, c, b, _]);
+    }, [f, c, _, b]);
     var S = o(d, C[0], C[1]);
     return a(function() {
       h.hasValue = !0, h.value = S;
@@ -1048,7 +1048,7 @@ function Gr() {
       return f === c && (f !== 0 || 1 / f === 1 / c) || f !== f && c !== c;
     }
     var n = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, s = e.useRef, a = e.useEffect, u = e.useMemo, l = e.useDebugValue;
-    function d(f, c, b, _, C) {
+    function d(f, c, _, b, C) {
       var h = s(null), S;
       h.current === null ? (S = {
         hasValue: !1,
@@ -1058,7 +1058,7 @@ function Gr() {
         var R = !1, w, g, k = function(B) {
           if (!R) {
             R = !0, w = B;
-            var N = _(B);
+            var N = b(B);
             if (C !== void 0 && S.hasValue) {
               var K = S.value;
               if (C(K, N))
@@ -1069,15 +1069,15 @@ function Gr() {
           var O = w, D = g;
           if (n(O, B))
             return D;
-          var A = _(B);
+          var A = b(B);
           return C !== void 0 && C(D, A) ? D : (w = B, g = A, A);
-        }, P = b === void 0 ? null : b, M = function() {
+        }, P = _ === void 0 ? null : _, M = function() {
           return k(c());
         }, $ = P === null ? void 0 : function() {
           return k(P());
         };
         return [M, $];
-      }, [c, b, _, C]), x = E[0], v = E[1], p = o(f, x, v);
+      }, [c, _, b, C]), x = E[0], v = E[1], p = o(f, x, v);
       return a(function() {
         S.hasValue = !0, S.value = p;
       }, [p]), l(p), p;
@@ -1099,7 +1099,7 @@ function Ue(e, t = e.getState, r) {
   );
   return Ar(n), n;
 }
-const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e, t) ? e : e.parentNode ? Te(e.parentNode, t) : !1, rr = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, Qr = (e, t) => Array.from(e.querySelectorAll(".corner")).every((n) => {
+const be = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => be(e, t) ? e : e.parentNode ? Te(e.parentNode, t) : !1, rr = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, Qr = (e, t) => Array.from(e.querySelectorAll(".corner")).every((n) => {
   const { top: o, left: s } = n.getBoundingClientRect();
   return rr({ x: s, y: o }, t);
 }), en = (e, t) => {
@@ -1137,17 +1137,17 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
     e + r / 2 - a.x,
     t + n / 2 - a.y
   ];
-  let d, f, c, b, _, C, h, S, E, x;
+  let d, f, c, _, b, C, h, S, E, x;
   const v = s / 1.1547;
   switch (o) {
     case "grid":
       d = Math.round(u / s) * s, f = Math.round(l / s) * s;
       break;
     case "hexH":
-      c = 2 * v, b = 3 * s, _ = Math.round(u / c) * c, h = Math.round(l / b) * b, C = _ > u ? _ - v : _ + v, S = h > l ? h - 1.5 * s : h + 1.5 * s, E = Math.hypot(_ - u, h - l), x = Math.hypot(C - u, S - l), E < x ? (d = _, f = h) : (d = C, f = S);
+      c = 2 * v, _ = 3 * s, b = Math.round(u / c) * c, h = Math.round(l / _) * _, C = b > u ? b - v : b + v, S = h > l ? h - 1.5 * s : h + 1.5 * s, E = Math.hypot(b - u, h - l), x = Math.hypot(C - u, S - l), E < x ? (d = b, f = h) : (d = C, f = S);
       break;
     case "hexV":
-      c = 3 * s, b = 2 * v, _ = Math.round(u / c) * c, h = Math.round(l / b) * b, C = _ > u ? _ - 1.5 * s : _ + 1.5 * s, S = h > l ? h - v : h + v, E = Math.hypot(_ - u, h - l), x = Math.hypot(C - u, S - l), E < x ? (d = _, f = h) : (d = C, f = S);
+      c = 3 * s, _ = 2 * v, b = Math.round(u / c) * c, h = Math.round(l / _) * _, C = b > u ? b - 1.5 * s : b + 1.5 * s, S = h > l ? h - v : h + v, E = Math.hypot(b - u, h - l), x = Math.hypot(C - u, S - l), E < x ? (d = b, f = h) : (d = C, f = S);
       break;
     default:
       d = e + r / 2, f = t + n / 2;
@@ -1192,8 +1192,8 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
   const l = [];
   (async () => {
     try {
-      const _ = await e.call(`${t}_getValue`);
-      rn && console.log("init from peer with value", _), s((C) => ({ ...C, ..._ }));
+      const b = await e.call(`${t}_getValue`);
+      rn && console.log("init from peer with value", b), s((C) => ({ ...C, ...b }));
     } catch {
       n !== void 0 && s(n);
     }
@@ -1202,27 +1202,27 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
         `${t}_getValue`,
         () => Object.fromEntries(
           Object.entries(a()).filter(
-            ([_, C]) => typeof C != "function" && !r.includes(_)
+            ([b, C]) => typeof C != "function" && !r.includes(b)
           )
         ),
         { invoke: "first" }
       )
     ), l.push(
-      e.subscribe(`${t}_call`, ([_, C]) => {
-        c[_](...C);
+      e.subscribe(`${t}_call`, ([b, C]) => {
+        c[b](...C);
       })
     ), s({ ready: !0 });
   })();
-  const f = o(s, a, u), c = { ...f }, b = Object.fromEntries(
+  const f = o(s, a, u), c = { ...f }, _ = Object.fromEntries(
     // Send the update message on all method calls
-    Object.entries(f).map(([_, C]) => typeof C == "function" && !_.startsWith("get") && !r.includes(_) ? [_, (...S) => {
+    Object.entries(f).map(([b, C]) => typeof C == "function" && !b.startsWith("get") && !r.includes(b) ? [b, (...S) => {
       const E = C(...S);
-      return e.publish(`${t}_call`, [_, S]), E;
-    }] : [_, C])
+      return e.publish(`${t}_call`, [b, S]), E;
+    }] : [b, C])
   );
-  return b.unsub = () => {
-    l.forEach((_) => _());
-  }, b;
+  return _.unsub = () => {
+    l.forEach((b) => b());
+  }, _;
 };
 function Xe(e, t) {
   if (Object.is(e, t))
@@ -1333,20 +1333,24 @@ const or = m.createContext(), nn = (e, t) => ({
   setSessionInfo: (r) => e({ session: r }),
   updateSessionInfo: (r) => e((n) => ({ session: { ...n.session, ...r } }))
 }), Yt = ({ storeName: e, children: t, defaultValue: r }) => {
-  const { wire: n } = Be("room"), [o] = m.useState(
+  const { wire: n } = Be("room"), [o, s] = m.useState(!1), [a] = m.useState(
     () => Ne(
-      ut({ wire: n, storeName: e, defaultValue: r }, (...s) => ({
-        ...nn(...s),
-        ...on(...s),
-        ...sn(...s),
-        ...an(...s),
-        ...cn(...s)
+      ut({ wire: n, storeName: e, defaultValue: r }, (...u) => ({
+        ...nn(...u),
+        ...on(...u),
+        ...sn(...u),
+        ...an(...u),
+        ...cn(...u)
       }))
     )
   );
-  return /* @__PURE__ */ T(or.Provider, { value: o, children: t });
+  return m.useEffect(() => {
+    const u = a.subscribe((l) => {
+      l.ready && (u(), s(!0));
+    });
+  }, [a]), o ? /* @__PURE__ */ T(or.Provider, { value: a, children: t }) : null;
 }, se = (e, t) => {
-  const r = be(or);
+  const r = _e(or);
   return Ue(r, e, t || Xe);
 }, Jo = () => {
   const [e, t] = se((n) => [
@@ -1391,6 +1395,7 @@ const or = m.createContext(), nn = (e, t) => ({
     translateY: 0,
     scale: 1
   },
+  // TODO optimize when same value as before
   updateBoardState: (r) => e((n) => ({ boardState: { ...n.boardState, ...r } })),
   getBoardState: () => t().boardState
 }), fn = (e, t) => ({
@@ -1446,7 +1451,7 @@ const or = m.createContext(), nn = (e, t) => ({
   );
   return /* @__PURE__ */ T(ir.Provider, { value: t, children: e });
 }, Z = (e, t) => {
-  const r = be(ir);
+  const r = _e(ir);
   return Ue(r, e, t || Xe);
 }, Qo = () => {
   const [e] = Z((t) => [t.selection]);
@@ -1602,13 +1607,13 @@ const Le = 100, Se = 1e3, mn = 0.8, Nt = ({
       Math.max(p * 0.5, 0.05),
       Math.max(p * 10, 10)
     ];
-  }, [n]), b = m.useCallback(() => {
+  }, [n]), _ = m.useCallback(() => {
     const { boardWrapperRect: h, boardSize: S } = n(), { translateX: E, translateY: x, scale: v } = e();
     return {
       x: (h.width / 2 - E) / v - S / 2,
       y: (h.height / 2 - x) / v - S / 2
     };
-  }, [e, n]), _ = m.useCallback(() => {
+  }, [e, n]), b = m.useCallback(() => {
     const h = a(), { boardWrapperRect: S, boardWrapper: E, boardSize: x } = n(), { scale: v, translateX: p, translateY: R } = e(), { left: w, top: g, width: k, height: P } = nr(
       h.map(({ id: $ }) => $),
       E
@@ -1633,8 +1638,8 @@ const Le = 100, Se = 1e3, mn = 0.8, Nt = ({
     }
     o({ itemExtent: M });
   }, [e, n, a, o]), C = ft(
-    () => _(),
-    [_],
+    () => b(),
+    [b],
     200
   );
   return m.useEffect(() => {
@@ -1645,7 +1650,7 @@ const Le = 100, Se = 1e3, mn = 0.8, Nt = ({
     zoomTo: d,
     zoomToCenter: d,
     zoomToExtent: f,
-    getCenter: b,
+    getCenter: _,
     updateItemExtent: C
   };
 }, gn = (e) => {
@@ -1679,8 +1684,8 @@ const Le = 100, Se = 1e3, mn = 0.8, Nt = ({
     setItemIds: d,
     updateItems: f,
     moveItems: c,
-    removeItemsById: b,
-    getItemList: _,
+    removeItemsById: _,
+    getItemList: b,
     insertItems: C,
     setItemList: h
   } = se(
@@ -1818,9 +1823,9 @@ const Le = 100, Se = 1e3, mn = 0.8, Nt = ({
     [M]
   ), B = m.useCallback(
     (O) => {
-      s(O), b(O);
+      s(O), _(O);
     },
-    [s, b]
+    [s, _]
   ), N = m.useCallback(
     (O) => {
       const D = u();
@@ -1833,18 +1838,18 @@ const Le = 100, Se = 1e3, mn = 0.8, Nt = ({
         return null;
       const F = Te(O, "item");
       if (F) {
-        if (_e(F, "selected"))
+        if (be(F, "selected"))
           return F;
-        if (!z && _e(F, "locked") && !_e(O, "passthrough"))
+        if (!z && be(F, "locked") && !be(O, "passthrough"))
           return X ? F : null;
-        if (_e(O, "passthrough")) {
+        if (be(O, "passthrough")) {
           const H = l(), { boardWrapper: te } = a(), re = H.reduce((ne, V) => {
             const ee = it(te, V), fe = ee.getBoundingClientRect();
             return rr({ x: D, y: A }, fe) && ne.unshift(ee), ne;
           }, []);
           for (let ne = 0; ne < re.length; ne += 1) {
             const V = re[ne];
-            if (V !== F && (z || !_e(V, "locked")))
+            if (V !== F && (z || !be(V, "locked")))
               return V;
           }
           return null;
@@ -1867,7 +1872,7 @@ const Le = 100, Se = 1e3, mn = 0.8, Nt = ({
     pushItem: $,
     pushItems: M,
     removeItems: B,
-    getItemList: _,
+    getItemList: b,
     findElementUnderPointer: K,
     getItems: N
   };
@@ -1960,26 +1965,26 @@ const yn = (e, t) => {
   }), []);
   const d = m.useCallback(
     (c) => {
-      const b = t();
+      const _ = t();
       if (c)
-        return [c, c.map((C) => b[C])];
-      const _ = o();
-      return [_, _.map((C) => b[C])];
+        return [c, c.map((C) => _[C])];
+      const b = o();
+      return [b, b.map((C) => _[C])];
     },
     [t, o]
   ), f = Jt(() => {
-    const [c, b] = d();
+    const [c, _] = d();
     if (c.length > 0) {
       if (!u.current)
         return;
-      const _ = b.reduce((C, h) => {
+      const b = _.reduce((C, h) => {
         const S = Ut(h, r);
         return C.filter(
           (E) => S.some((x) => hn(E, x))
         );
-      }, Ut(b[0], r));
+      }, Ut(_[0], r));
       l(() => {
-        a(_);
+        a(b);
       });
     } else
       l(() => {
@@ -2016,7 +2021,7 @@ const ar = m.createContext(), at = (e) => {
     uid: me()
   };
   return at(e), e;
-}, _n = (e) => (t, r) => ({
+}, bn = (e) => (t, r) => ({
   isSpaceMaster: !1,
   users: {},
   getUser: () => r().users[e],
@@ -2061,7 +2066,7 @@ const ar = m.createContext(), at = (e) => {
       s < o.timestamp && (o.id = a, o.timestamp = s);
     }), t({ isSpaceMaster: o.id === e });
   }
-}), bn = (e) => ({
+}), _n = (e) => ({
   cursors: {},
   moveCursor: (t, r) => e((n) => ({ cursors: { ...n.cursors, [t]: r } })),
   removeCursor: (t) => e((r) => {
@@ -2075,7 +2080,7 @@ const ar = m.createContext(), at = (e) => {
     const f = [];
     if (!o && !l.current)
       return l.current = !0, (() => {
-        const b = Ne(
+        const _ = Ne(
           ut(
             {
               wire: r,
@@ -2088,15 +2093,15 @@ const ar = m.createContext(), at = (e) => {
               ]
             },
             (...C) => ({
-              ..._n(r.userId)(...C),
-              ...bn(...C)
+              ...bn(r.userId)(...C),
+              ..._n(...C)
             })
           )
-        ), _ = b.subscribe((C) => {
-          C.ready && (_(), d && s(b));
+        ), b = _.subscribe((C) => {
+          C.ready && (b(), d && s(_));
         });
       })(), () => {
-        d = !1, l.current = !1, f.forEach((b) => b());
+        d = !1, l.current = !1, f.forEach((_) => _());
       };
   }, [o, e, r, r.userId]), m.useEffect(() => {
     if (o)
@@ -2119,7 +2124,7 @@ const ar = m.createContext(), at = (e) => {
     n && o && o.getState().updateCurrentUser({ isMaster: n });
   }, [n, o, r]), a ? /* @__PURE__ */ T(ar.Provider, { value: o, children: t }) : null;
 }, ge = (e, t) => {
-  const r = be(ar);
+  const r = _e(ar);
   return Ue(r, e, t || Xe);
 }, rs = () => {
   const [e, t, r, n, o] = ge((u) => [
@@ -2208,7 +2213,7 @@ const ar = m.createContext(), at = (e) => {
   );
   return /* @__PURE__ */ T(ur.Provider, { value: o, children: t });
 }, Cn = (e, t) => {
-  const r = be(ur);
+  const r = _e(ur);
   return Ue(r, e, t || Xe);
 }, xn = () => {
 }, is = (e = xn) => {
@@ -2350,7 +2355,7 @@ const ie = new Pn(), We = ({
     moving: !1,
     pointers: {},
     mainPointer: void 0
-  }), b = (E) => {
+  }), _ = (E) => {
     const {
       deltaX: x,
       deltaY: v,
@@ -2387,7 +2392,7 @@ const ie = new Pn(), We = ({
         }
         tt() && ($ *= 2), ie.add(l, { scale: $, clientX: p, clientY: R, event: E });
       }
-  }, _ = (E) => {
+  }, b = (E) => {
     const {
       target: x,
       button: v,
@@ -2607,8 +2612,8 @@ const ie = new Pn(), We = ({
   return /* @__PURE__ */ T(
     "div",
     {
-      onWheel: b,
-      onPointerDown: _,
+      onWheel: _,
+      onPointerDown: b,
       onPointerMove: C,
       onPointerUp: h,
       onPointerOut: h,
@@ -2667,10 +2672,10 @@ let Mn = { data: "" }, jn = (e) => typeof window == "object" ? ((e ? e.querySele
   })(s));
   if (!ce[a]) {
     let l = s !== e ? e : ((d) => {
-      let f, c, b = [{}];
+      let f, c, _ = [{}];
       for (; f = Dn.exec(d.replace($n, "")); )
-        f[4] ? b.shift() : f[3] ? (c = f[3].replace(Kt, " ").trim(), b.unshift(b[0][c] = b[0][c] || {})) : b[0][f[1]] = f[2].replace(Kt, " ").trim();
-      return b[0];
+        f[4] ? _.shift() : f[3] ? (c = f[3].replace(Kt, " ").trim(), _.unshift(_[0][c] = _[0][c] || {})) : _[0][f[1]] = f[2].replace(Kt, " ").trim();
+      return _[0];
     })(e);
     ce[a] = de(o ? { ["@keyframes " + a]: l } : l, r ? "" : "." + a);
   }
@@ -2859,8 +2864,8 @@ const Zn = (e) => {
 }) => {
   var w;
   const c = m.useRef(null), {
-    component: b = () => null,
-    resizeDirections: _ = eo,
+    component: _ = () => null,
+    resizeDirections: b = eo,
     resize: C = Qn
   } = d[t], h = m.useCallback(
     (g) => e(n, g),
@@ -2911,7 +2916,7 @@ const Zn = (e) => {
                 itemId: n,
                 state: a,
                 ErrorComponent: ((w = d == null ? void 0 : d.error) == null ? void 0 : w.component) || Gn,
-                children: /* @__PURE__ */ T(b, { ...a, id: n, setState: h })
+                children: /* @__PURE__ */ T(_, { ...a, id: n, setState: h })
               }
             ),
             /* @__PURE__ */ T("div", { className: `corner ${xe} ${Un}` }),
@@ -2920,21 +2925,21 @@ const Zn = (e) => {
             /* @__PURE__ */ T("div", { className: `corner ${xe} ${Wn}` }),
             /* @__PURE__ */ T("div", { className: `${xe} ${Fn}` }),
             f && /* @__PURE__ */ le(Qt, { children: [
-              _.b && /* @__PURE__ */ T(
+              b.b && /* @__PURE__ */ T(
                 rt,
                 {
                   className: `${nt} ${qn}`,
                   onResize: R
                 }
               ),
-              _.h && /* @__PURE__ */ T(
+              b.h && /* @__PURE__ */ T(
                 rt,
                 {
                   className: `${nt} ${Hn}`,
                   onResize: p
                 }
               ),
-              _.w && /* @__PURE__ */ T(
+              b.w && /* @__PURE__ */ T(
                 rt,
                 {
                   className: `${nt} ${Kn}`,
@@ -3086,7 +3091,7 @@ const fo = q({
     g.getConfiguration,
     g.getBoardState,
     g.updateBoardState
-  ]), { findElementUnderPointer: d } = pt(), [f] = se((g) => [g.getItems]), [c, b] = m.useState({}), [, _] = m.useTransition(), [C, h] = m.useState(!1), S = m.useRef(null), E = m.useRef({
+  ]), { findElementUnderPointer: d } = pt(), [f] = se((g) => [g.getItems]), [c, _] = m.useState({}), [, b] = m.useTransition(), [C, h] = m.useState(!1), S = m.useRef(null), E = m.useRef({
     moving: !1
   });
   return ue(document, "keydown", (g) => {
@@ -3098,7 +3103,7 @@ const fo = q({
   }), [n]), m.useEffect(() => {
     if (E.current.moving) {
       const g = f(), { boardWrapper: k } = a(), P = po(g, k, C);
-      _(() => {
+      b(() => {
         o(P);
       });
     }
@@ -3106,20 +3111,20 @@ const fo = q({
     We,
     {
       onDragStart: async (g) => {
-        await d(g) || (E.current.moving = !0, _(() => {
+        await d(g) || (E.current.moving = !0, b(() => {
           l({ selecting: !0 });
         }), S.current.style.cursor = "crosshair");
       },
       onDrag: ({ distanceY: g, distanceX: k, startX: P, startY: M }) => {
         if (E.current.moving) {
           const { top: $, left: B } = S.current.getBoundingClientRect(), { scale: N } = u(), K = (P - B) / N, O = (M - $) / N, D = k / N, A = g / N;
-          D > 0 ? (E.current.left = K, E.current.width = D) : (E.current.left = K + D, E.current.width = -D), A > 0 ? (E.current.top = O, E.current.height = A) : (E.current.top = O + A, E.current.height = -A), b({ ...E.current, moving: !0 });
+          D > 0 ? (E.current.left = K, E.current.width = D) : (E.current.left = K + D, E.current.width = -D), A > 0 ? (E.current.top = O, E.current.height = A) : (E.current.top = O + A, E.current.height = -A), _({ ...E.current, moving: !0 });
         }
       },
       onDragEnd: () => {
-        E.current.moving && (_(() => {
+        E.current.moving && (b(() => {
           l({ selecting: !1 });
-        }), E.current.moving = !1, b({ moving: !1 }), S.current.style.cursor = "auto");
+        }), E.current.moving = !1, _({ moving: !1 }), S.current.style.cursor = "auto");
       },
       onTap: (g) => {
         const { target: k, ctrlKey: P, metaKey: M } = g, $ = d(g);
@@ -3168,7 +3173,7 @@ const fo = q({
     S.updateBoardState
   ]), [d] = se((S) => [S.getBoardConfig]), f = m.useRef({}), c = m.useRef({
     items: []
-  }), b = (S) => {
+  }), _ = (S) => {
     const { ctrlKey: E, metaKey: x, event: v } = S, p = n(S);
     if (p) {
       v.stopPropagation();
@@ -3181,18 +3186,18 @@ const fo = q({
         remainY: 0
       });
     }
-  }, _ = ({ deltaX: S, deltaY: E, event: x }) => {
+  }, b = ({ deltaX: S, deltaY: E, event: x }) => {
     if (f.current.moving) {
       x.stopPropagation();
-      const { scale: v } = u(), p = f.current.remainX + S / v, R = f.current.remainY + E / v;
+      const { scale: v, movingItems: p } = u(), R = f.current.remainX + S / v, w = f.current.remainY + E / v;
       t(
         c.current.items,
         {
-          x: p,
-          y: R
+          x: R,
+          y: w
         },
         !0
-      ), l({ movingItems: !0 });
+      ), p || l({ movingItems: !0 });
     }
   }, C = () => {
     if (f.current.moving) {
@@ -3236,7 +3241,7 @@ const fo = q({
         size: x || 1
       }), S.preventDefault());
     }
-  }), /* @__PURE__ */ T(We, { onDragStart: b, onDrag: _, onDragEnd: C, children: e });
+  }), /* @__PURE__ */ T(We, { onDragStart: _, onDrag: b, onDragEnd: C, children: e });
 }, ho = (e) => {
   const t = m.useRef({ hover: !1, x: 0, y: 0 });
   return ue(e.current, "mousemove", (n) => {
@@ -3278,17 +3283,17 @@ const fo = q({
     p.getConfiguration,
     p.updateBoardState,
     p.getSelection
-  ]), { setDim: l, zoomToCenter: d, zoomToExtent: f } = dt(), [c, b] = m.useState(!1), _ = m.useRef({}), C = ho(r);
+  ]), { setDim: l, zoomToCenter: d, zoomToExtent: f } = dt(), [c, _] = m.useState(!1), b = m.useRef({}), C = ho(r);
   yo();
   const h = m.useCallback(() => {
     const { itemExtent: p } = s();
     f(p);
   }, [s, f]);
   m.useEffect(() => {
-    !c && o.left && (h(), b(!0));
+    !c && o.left && (h(), _(!0));
   }, [h, c, o]);
   const S = ({ clientX: p, clientY: R, scale: w }) => {
-    d(1 - w / 500, { x: p, y: R }), clearTimeout(_.current.zoom), _.current.zoom = setTimeout(() => {
+    d(1 - w / 500, { x: p, y: R }), clearTimeout(b.current.zoom), b.current.zoom = setTimeout(() => {
       a({ zooming: !1 });
     }, 200), a({ zooming: !0 });
   }, E = ({ deltaX: p, deltaY: R }) => {
@@ -3296,7 +3301,7 @@ const fo = q({
       ...w,
       translateX: w.translateX + p,
       translateY: w.translateY + R
-    })), clearTimeout(_.current.pan), _.current.pan = setTimeout(() => {
+    })), clearTimeout(b.current.pan), b.current.pan = setTimeout(() => {
       a({ panning: !1 });
     }, 200), a({ panning: !0 });
   }, x = (p) => {
@@ -3358,7 +3363,7 @@ const fo = q({
       )
     }
   );
-}, _o = q({
+}, bo = q({
   position: "absolute",
   top: 0,
   left: 0,
@@ -3366,7 +3371,7 @@ const fo = q({
   backgroundColor: "hsla(0, 40%, 50%, 0%)",
   border: "2px dashed hsl(20, 55%, 40%)",
   pointerEvents: "none"
-}), bo = () => {
+}), _o = () => {
   const [
     e,
     t,
@@ -3386,19 +3391,19 @@ const fo = q({
       scale: c.boardState.scale
     }
   ]), [l] = se((c) => [c.items]), d = m.useCallback(() => {
-    const c = t(), { boardWrapperRect: b, boardWrapper: _ } = o();
+    const c = t(), { boardWrapperRect: _, boardWrapper: b } = o();
     if (c.length === 0) {
       n(null);
       return;
     }
-    const C = nr(c, _);
+    const C = nr(c, b);
     if (!C) {
       n(null);
       return;
     }
     const { left: h, top: S, width: E, height: x } = C, v = {
-      left: h - b.left,
-      top: S - b.top,
+      left: h - _.left,
+      top: S - _.top,
       height: x,
       width: E
     };
@@ -3422,12 +3427,12 @@ const fo = q({
         height: `${r.height}px`,
         width: `${r.width}px`
       },
-      className: `selection ${_o}`
+      className: `selection ${bo}`
     }
   );
 }, Eo = () => {
   const [e] = Z((t) => [t.boardState.movingItems]);
-  return e ? null : /* @__PURE__ */ T(bo, {});
+  return e ? null : /* @__PURE__ */ T(_o, {});
 }, wo = typeof window < "u" && typeof navigator < "u" && typeof document < "u";
 let ze;
 function Co() {
@@ -3536,8 +3541,8 @@ const Pe = (e, t) => Array.from(Array(t)).map(() => e).join(""), Po = new RegExp
   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, b = l + f, _ = d + f;
-  return [c, b, _].map(Gt);
+  const f = n - s / 2, c = u + f, _ = l + f, b = d + f;
+  return [c, _, b].map(Gt);
 };
 function Lo(e) {
   if (e === "transparent")
@@ -3656,11 +3661,11 @@ const Yo = q({
     l.getBoardState
   ]);
   return /* @__PURE__ */ le("div", { onPointerMove: ({ clientX: l, clientY: d }) => {
-    const { scale: f, translateX: c, translateY: b } = s(), {
-      boardWrapperRect: { left: _, top: C }
+    const { scale: f, translateX: c, translateY: _ } = s(), {
+      boardWrapperRect: { left: b, top: C }
     } = o(), h = {
-      x: (l - _ - c) / f,
-      y: (d - C - b) / f
+      x: (l - b - c) / f,
+      y: (d - C - _) / f
     };
     r(t.id, h);
   }, onPointerLeave: () => {
@@ -3686,7 +3691,7 @@ const Yo = q({
   const l = m.useRef(null), [d, f] = Z((C) => [
     C.config.uid,
     C.updateConfiguration
-  ]), { updateItemExtent: c } = dt(), b = {
+  ]), { updateItemExtent: c } = dt(), _ = {
     userSelect: "none",
     width: `${o}px`,
     height: `${o}px`,
@@ -3723,13 +3728,13 @@ const Yo = q({
       boardWrapperRect: l.current.getBoundingClientRect()
     });
   });
-  const _ = q({ ...Ho, ...r });
+  const b = q({ ...Ho, ...r });
   return /* @__PURE__ */ le(
     "div",
     {
       ref: l,
       id: d,
-      className: `sync-board ${_}`,
+      className: `sync-board ${b}`,
       children: [
         /* @__PURE__ */ T(So, { moveFirst: e, children: /* @__PURE__ */ T(mo, { moveFirst: e, children: /* @__PURE__ */ T(go, { moveFirst: e, children: /* @__PURE__ */ T(Fo, { children: /* @__PURE__ */ T(u, { children: /* @__PURE__ */ le(
           "div",
@@ -3737,7 +3742,7 @@ const Yo = q({
             onContextMenu: (C) => {
               C.preventDefault();
             },
-            style: b,
+            style: _,
             className: "board",
             children: [
               /* @__PURE__ */ T(io, {}),