react-sync-board 1.0.0 → 1.1.0

package/dist/react-sync-board.js

@@ -0,0 +1,3751 @@
+var Dr = Object.defineProperty;
+var $r = (e, t, r) => t in e ? Dr(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var Ot = (e, t, r) => ($r(e, typeof t != "symbol" ? t + "" : t, r), r);
+import g, { useContext as be, useDebugValue as Ar, useRef as Ie, useMemo as ct, useEffect as Me, useCallback as Jt, memo as Zt } from "react";
+function zr(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var Oe = {}, Lr = {
+  get exports() {
+    return Oe;
+  },
+  set exports(e) {
+    Oe = e;
+  }
+}, we = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Tt;
+function Yr() {
+  if (Tt)
+    return we;
+  Tt = 1;
+  var e = g, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, o = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function a(u, l, f) {
+    var d, c = {}, b = null, _ = null;
+    f !== void 0 && (b = "" + f), l.key !== void 0 && (b = "" + l.key), l.ref !== void 0 && (_ = l.ref);
+    for (d in l)
+      n.call(l, d) && !s.hasOwnProperty(d) && (c[d] = l[d]);
+    if (u && u.defaultProps)
+      for (d in l = u.defaultProps, l)
+        c[d] === void 0 && (c[d] = l[d]);
+    return { $$typeof: t, type: u, key: b, ref: _, props: c, _owner: o.current };
+  }
+  return we.Fragment = r, we.jsx = a, we.jsxs = a, we;
+}
+var Ce = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var kt;
+function Br() {
+  return kt || (kt = 1, process.env.NODE_ENV !== "production" && function() {
+    var e = g, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), a = Symbol.for("react.provider"), u = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), d = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), w = Symbol.iterator, m = "@@iterator";
+    function E(i) {
+      if (i === null || typeof i != "object")
+        return null;
+      var S = w && i[w] || i[m];
+      return typeof S == "function" ? S : null;
+    }
+    var R = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function x(i) {
+      {
+        for (var S = arguments.length, I = new Array(S > 1 ? S - 1 : 0), j = 1; j < S; j++)
+          I[j - 1] = arguments[j];
+        y("error", i, I);
+      }
+    }
+    function y(i, S, I) {
+      {
+        var j = R.ReactDebugCurrentFrame, B = j.getStackAddendum();
+        B !== "" && (S += "%s", I = I.concat([B]));
+        var X = I.map(function(L) {
+          return String(L);
+        });
+        X.unshift("Warning: " + S), Function.prototype.apply.call(console[i], console, X);
+      }
+    }
+    var p = !1, h = !1, v = !1, C = !1, D = !1, k;
+    k = Symbol.for("react.module.reference");
+    function P(i) {
+      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || D || i === o || i === f || i === d || C || i === _ || p || h || v || typeof i == "object" && i !== null && (i.$$typeof === b || i.$$typeof === c || i.$$typeof === a || i.$$typeof === u || i.$$typeof === l || // This needs to include all possible module reference object
+      // 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));
+    }
+    function M(i, S, I) {
+      var j = i.displayName;
+      if (j)
+        return j;
+      var B = S.displayName || S.name || "";
+      return B !== "" ? I + "(" + B + ")" : I;
+    }
+    function N(i) {
+      return i.displayName || "Context";
+    }
+    function F(i) {
+      if (i == null)
+        return null;
+      if (typeof i.tag == "number" && x("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof i == "function")
+        return i.displayName || i.name || null;
+      if (typeof i == "string")
+        return i;
+      switch (i) {
+        case n:
+          return "Fragment";
+        case r:
+          return "Portal";
+        case s:
+          return "Profiler";
+        case o:
+          return "StrictMode";
+        case f:
+          return "Suspense";
+        case d:
+          return "SuspenseList";
+      }
+      if (typeof i == "object")
+        switch (i.$$typeof) {
+          case u:
+            var S = i;
+            return N(S) + ".Consumer";
+          case a:
+            var I = i;
+            return N(I._context) + ".Provider";
+          case l:
+            return M(i, i.render, "ForwardRef");
+          case c:
+            var j = i.displayName || null;
+            return j !== null ? j : F(i.type) || "Memo";
+          case b: {
+            var B = i, X = B._payload, L = B._init;
+            try {
+              return F(L(X));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var K = Object.assign, O = 0, $, A, U, Y, W, J, te;
+    function re() {
+    }
+    re.__reactDisabledLog = !0;
+    function ne() {
+      {
+        if (O === 0) {
+          $ = console.log, A = console.info, U = console.warn, Y = console.error, W = console.group, J = console.groupCollapsed, te = console.groupEnd;
+          var i = {
+            configurable: !0,
+            enumerable: !0,
+            value: re,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: i,
+            log: i,
+            warn: i,
+            error: i,
+            group: i,
+            groupCollapsed: i,
+            groupEnd: i
+          });
+        }
+        O++;
+      }
+    }
+    function V() {
+      {
+        if (O--, O === 0) {
+          var i = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: K({}, i, {
+              value: $
+            }),
+            info: K({}, i, {
+              value: A
+            }),
+            warn: K({}, i, {
+              value: U
+            }),
+            error: K({}, i, {
+              value: Y
+            }),
+            group: K({}, i, {
+              value: W
+            }),
+            groupCollapsed: K({}, i, {
+              value: J
+            }),
+            groupEnd: K({}, i, {
+              value: te
+            })
+          });
+        }
+        O < 0 && x("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var ee = R.ReactCurrentDispatcher, le;
+    function he(i, S, I) {
+      {
+        if (le === void 0)
+          try {
+            throw Error();
+          } catch (B) {
+            var j = B.stack.trim().match(/\n( *(at )?)/);
+            le = j && j[1] || "";
+          }
+        return `
+` + le + i;
+      }
+    }
+    var Ve = !1, je;
+    {
+      var fr = typeof WeakMap == "function" ? WeakMap : Map;
+      je = new fr();
+    }
+    function mt(i, S) {
+      if (!i || Ve)
+        return "";
+      {
+        var I = je.get(i);
+        if (I !== void 0)
+          return I;
+      }
+      var j;
+      Ve = !0;
+      var B = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var X;
+      X = ee.current, ee.current = null, ne();
+      try {
+        if (S) {
+          var L = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(L.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(L, []);
+            } catch (ae) {
+              j = ae;
+            }
+            Reflect.construct(i, [], L);
+          } else {
+            try {
+              L.call();
+            } catch (ae) {
+              j = ae;
+            }
+            i.call(L.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (ae) {
+            j = ae;
+          }
+          i();
+        }
+      } catch (ae) {
+        if (ae && j && typeof ae.stack == "string") {
+          for (var z = ae.stack.split(`
+`), Q = j.stack.split(`
+`), q = z.length - 1, G = Q.length - 1; q >= 1 && G >= 0 && z[q] !== Q[G]; )
+            G--;
+          for (; q >= 1 && G >= 0; q--, G--)
+            if (z[q] !== Q[G]) {
+              if (q !== 1 || G !== 1)
+                do
+                  if (q--, G--, G < 0 || z[q] !== Q[G]) {
+                    var oe = `
+` + z[q].replace(" at new ", " at ");
+                    return i.displayName && oe.includes("<anonymous>") && (oe = oe.replace("<anonymous>", i.displayName)), typeof i == "function" && je.set(i, oe), oe;
+                  }
+                while (q >= 1 && G >= 0);
+              break;
+            }
+        }
+      } finally {
+        Ve = !1, ee.current = X, V(), Error.prepareStackTrace = B;
+      }
+      var ye = i ? i.displayName || i.name : "", It = ye ? he(ye) : "";
+      return typeof i == "function" && je.set(i, It), It;
+    }
+    function dr(i, S, I) {
+      return mt(i, !1);
+    }
+    function pr(i) {
+      var S = i.prototype;
+      return !!(S && S.isReactComponent);
+    }
+    function De(i, S, I) {
+      if (i == null)
+        return "";
+      if (typeof i == "function")
+        return mt(i, pr(i));
+      if (typeof i == "string")
+        return he(i);
+      switch (i) {
+        case f:
+          return he("Suspense");
+        case d:
+          return he("SuspenseList");
+      }
+      if (typeof i == "object")
+        switch (i.$$typeof) {
+          case l:
+            return dr(i.render);
+          case c:
+            return De(i.type, S, I);
+          case b: {
+            var j = i, B = j._payload, X = j._init;
+            try {
+              return De(X(B), S, I);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var $e = Object.prototype.hasOwnProperty, gt = {}, ht = R.ReactDebugCurrentFrame;
+    function Ae(i) {
+      if (i) {
+        var S = i._owner, I = De(i.type, i._source, S ? S.type : null);
+        ht.setExtraStackFrame(I);
+      } else
+        ht.setExtraStackFrame(null);
+    }
+    function mr(i, S, I, j, B) {
+      {
+        var X = Function.call.bind($e);
+        for (var L in i)
+          if (X(i, L)) {
+            var z = void 0;
+            try {
+              if (typeof i[L] != "function") {
+                var Q = Error((j || "React class") + ": " + I + " type `" + L + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[L] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw Q.name = "Invariant Violation", Q;
+              }
+              z = i[L](S, L, j, I, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (q) {
+              z = q;
+            }
+            z && !(z instanceof Error) && (Ae(B), x("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", j || "React class", I, L, typeof z), Ae(null)), z instanceof Error && !(z.message in gt) && (gt[z.message] = !0, Ae(B), x("Failed %s type: %s", I, z.message), Ae(null));
+          }
+      }
+    }
+    var gr = Array.isArray;
+    function Fe(i) {
+      return gr(i);
+    }
+    function hr(i) {
+      {
+        var S = typeof Symbol == "function" && Symbol.toStringTag, I = S && i[Symbol.toStringTag] || i.constructor.name || "Object";
+        return I;
+      }
+    }
+    function vr(i) {
+      try {
+        return vt(i), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function vt(i) {
+      return "" + i;
+    }
+    function yt(i) {
+      if (vr(i))
+        return x("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", hr(i)), vt(i);
+    }
+    var Ee = R.ReactCurrentOwner, yr = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, St, _t, Ke;
+    Ke = {};
+    function Sr(i) {
+      if ($e.call(i, "ref")) {
+        var S = Object.getOwnPropertyDescriptor(i, "ref").get;
+        if (S && S.isReactWarning)
+          return !1;
+      }
+      return i.ref !== void 0;
+    }
+    function _r(i) {
+      if ($e.call(i, "key")) {
+        var S = Object.getOwnPropertyDescriptor(i, "key").get;
+        if (S && S.isReactWarning)
+          return !1;
+      }
+      return i.key !== void 0;
+    }
+    function br(i, S) {
+      if (typeof i.ref == "string" && Ee.current && S && Ee.current.stateNode !== S) {
+        var I = F(Ee.current.type);
+        Ke[I] || (x('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', F(Ee.current.type), i.ref), Ke[I] = !0);
+      }
+    }
+    function Er(i, S) {
+      {
+        var I = function() {
+          St || (St = !0, x("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", S));
+        };
+        I.isReactWarning = !0, Object.defineProperty(i, "key", {
+          get: I,
+          configurable: !0
+        });
+      }
+    }
+    function wr(i, S) {
+      {
+        var I = function() {
+          _t || (_t = !0, x("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", S));
+        };
+        I.isReactWarning = !0, Object.defineProperty(i, "ref", {
+          get: I,
+          configurable: !0
+        });
+      }
+    }
+    var Cr = function(i, S, I, j, B, X, L) {
+      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: S,
+        ref: I,
+        props: L,
+        // Record the component responsible for creating this element.
+        _owner: X
+      };
+      return z._store = {}, Object.defineProperty(z._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(z, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: j
+      }), Object.defineProperty(z, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: B
+      }), Object.freeze && (Object.freeze(z.props), Object.freeze(z)), z;
+    };
+    function xr(i, S, I, j, B) {
+      {
+        var X, L = {}, z = null, Q = null;
+        I !== void 0 && (yt(I), z = "" + I), _r(S) && (yt(S.key), z = "" + S.key), Sr(S) && (Q = S.ref, br(S, B));
+        for (X in S)
+          $e.call(S, X) && !yr.hasOwnProperty(X) && (L[X] = S[X]);
+        if (i && i.defaultProps) {
+          var q = i.defaultProps;
+          for (X in q)
+            L[X] === void 0 && (L[X] = q[X]);
+        }
+        if (z || Q) {
+          var G = typeof i == "function" ? i.displayName || i.name || "Unknown" : i;
+          z && Er(L, G), Q && wr(L, G);
+        }
+        return Cr(i, z, Q, B, j, Ee.current, L);
+      }
+    }
+    var He = R.ReactCurrentOwner, bt = R.ReactDebugCurrentFrame;
+    function ve(i) {
+      if (i) {
+        var S = i._owner, I = De(i.type, i._source, S ? S.type : null);
+        bt.setExtraStackFrame(I);
+      } else
+        bt.setExtraStackFrame(null);
+    }
+    var qe;
+    qe = !1;
+    function Ge(i) {
+      return typeof i == "object" && i !== null && i.$$typeof === t;
+    }
+    function Et() {
+      {
+        if (He.current) {
+          var i = F(He.current.type);
+          if (i)
+            return `
+
+Check the render method of \`` + i + "`.";
+        }
+        return "";
+      }
+    }
+    function Rr(i) {
+      {
+        if (i !== void 0) {
+          var S = i.fileName.replace(/^.*[\\\/]/, ""), I = i.lineNumber;
+          return `
+
+Check your code at ` + S + ":" + I + ".";
+        }
+        return "";
+      }
+    }
+    var wt = {};
+    function Ir(i) {
+      {
+        var S = Et();
+        if (!S) {
+          var I = typeof i == "string" ? i : i.displayName || i.name;
+          I && (S = `
+
+Check the top-level render call using <` + I + ">.");
+        }
+        return S;
+      }
+    }
+    function Ct(i, S) {
+      {
+        if (!i._store || i._store.validated || i.key != null)
+          return;
+        i._store.validated = !0;
+        var I = Ir(S);
+        if (wt[I])
+          return;
+        wt[I] = !0;
+        var j = "";
+        i && i._owner && i._owner !== He.current && (j = " It was passed a child from " + F(i._owner.type) + "."), ve(i), x('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', I, j), ve(null);
+      }
+    }
+    function xt(i, S) {
+      {
+        if (typeof i != "object")
+          return;
+        if (Fe(i))
+          for (var I = 0; I < i.length; I++) {
+            var j = i[I];
+            Ge(j) && Ct(j, S);
+          }
+        else if (Ge(i))
+          i._store && (i._store.validated = !0);
+        else if (i) {
+          var B = E(i);
+          if (typeof B == "function" && B !== i.entries)
+            for (var X = B.call(i), L; !(L = X.next()).done; )
+              Ge(L.value) && Ct(L.value, S);
+        }
+      }
+    }
+    function Or(i) {
+      {
+        var S = i.type;
+        if (S == null || typeof S == "string")
+          return;
+        var I;
+        if (typeof S == "function")
+          I = S.propTypes;
+        else if (typeof S == "object" && (S.$$typeof === l || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        S.$$typeof === c))
+          I = S.propTypes;
+        else
+          return;
+        if (I) {
+          var j = F(S);
+          mr(I, i.props, "prop", j, i);
+        } else if (S.PropTypes !== void 0 && !qe) {
+          qe = !0;
+          var B = F(S);
+          x("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", B || "Unknown");
+        }
+        typeof S.getDefaultProps == "function" && !S.getDefaultProps.isReactClassApproved && x("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function Tr(i) {
+      {
+        for (var S = Object.keys(i.props), I = 0; I < S.length; I++) {
+          var j = S[I];
+          if (j !== "children" && j !== "key") {
+            ve(i), x("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", j), ve(null);
+            break;
+          }
+        }
+        i.ref !== null && (ve(i), x("Invalid attribute `ref` supplied to `React.Fragment`."), ve(null));
+      }
+    }
+    function Rt(i, S, I, j, B, X) {
+      {
+        var L = P(i);
+        if (!L) {
+          var z = "";
+          (i === void 0 || typeof i == "object" && i !== null && Object.keys(i).length === 0) && (z += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var Q = Rr(B);
+          Q ? z += Q : z += Et();
+          var q;
+          i === null ? q = "null" : Fe(i) ? q = "array" : i !== void 0 && i.$$typeof === t ? (q = "<" + (F(i.type) || "Unknown") + " />", z = " Did you accidentally export a JSX literal instead of a component?") : q = typeof i, x("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", q, z);
+        }
+        var G = xr(i, S, I, B, X);
+        if (G == null)
+          return G;
+        if (L) {
+          var oe = S.children;
+          if (oe !== void 0)
+            if (j)
+              if (Fe(oe)) {
+                for (var ye = 0; ye < oe.length; ye++)
+                  xt(oe[ye], i);
+                Object.freeze && Object.freeze(oe);
+              } else
+                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
+              xt(oe, i);
+        }
+        return i === n ? Tr(G) : Or(G), G;
+      }
+    }
+    function kr(i, S, I) {
+      return Rt(i, S, I, !0);
+    }
+    function Pr(i, S, I) {
+      return Rt(i, S, I, !1);
+    }
+    var Mr = Pr, jr = kr;
+    Ce.Fragment = n, Ce.jsx = Mr, Ce.jsxs = jr;
+  }()), Ce;
+}
+(function(e) {
+  process.env.NODE_ENV === "production" ? e.exports = Yr() : e.exports = Br();
+})(Lr);
+const Qt = Oe.Fragment, T = Oe.jsx, ue = Oe.jsxs;
+let Nr = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce((t, r) => (r &= 63, r < 36 ? t += r.toString(36) : r < 62 ? t += (r - 26).toString(36).toUpperCase() : r > 62 ? t += "-" : t += "_", t), "");
+class Ur {
+  constructor(t, r, n = null) {
+    this._socket = t, this.userId = n, this.room = r, this.toUnregister = [
+      () => {
+        this._socket.off(`${this.room}.isMaster`), this._socket.off(`${this.room}.roomJoined`), this._socket.off(`${this.room}._call`);
+      }
+    ], this._left = !1, this.registeredRPC = {}, this._socket.on(`${this.room}._call`, async ({ callId: o, name: s, params: a }) => {
+      try {
+        const u = await this.registeredRPC[s](a);
+        t.emit(`${this.room}._result.${o}`, {
+          ok: u || null
+        });
+      } catch (u) {
+        t.emit(`${this.room}._result.${o}`, {
+          err: `${u.message}`
+        });
+      }
+    });
+  }
+  /**
+   * Call a server procedure.
+   *
+   * @param {string} action name of the operation to call on the server.
+   * @param {*} params the params of the action.
+   * @returns the result of the call.
+   */
+  async _callServerRPC(t, r) {
+    const n = Nr();
+    return new Promise((o, s) => {
+      this._socket.once(`${this.room}._result.${n}`, (a) => {
+        a.hasOwnProperty("ok") ? o(a.ok) : s(a.err);
+      }), this._socket.emit(`${this.room}._call`, { callId: n, name: t, params: r });
+    });
+  }
+  /**
+   * Leave current room
+   * @param {string} room name.
+   */
+  leave() {
+    this._left = !0, this.toUnregister.forEach((t) => {
+      t();
+    }), this._socket.emit(`${this.room}.leave`);
+  }
+  /**
+   * Send an event to all other client in room. Also to self if true.
+   * @param {string} name Name of event
+   * @param {*} params arguments of event
+   * @param {boolean} self if true, the publish get the event too
+   */
+  publish(t, r, n = !1) {
+    this._socket.emit(`${this.room}.publish`, { name: t, params: r, self: n });
+  }
+  /**
+   * Subscribe to an event.
+   * @param {string} event Name of event
+   * @param {function} callback Called when the event is received. First param
+   *   of the function is the params sent with the event.
+   */
+  subscribe(t, r) {
+    this._socket.on(`${this.room}.${t}`, r);
+    const n = () => {
+      this._socket.off(`${this.room}.${t}`, r);
+    };
+    return this.toUnregister.push(n), n;
+  }
+  /**
+   * Register a new RPC function.
+   * @param {string} name of function
+   * @param {function} callback the function that handle the function result
+   * @param {object} params the configuration of the RPC. For now only `invoke`
+   *   parameter is allowed with the following values:
+   *     - 'single' for a RPC that can be registered only once.
+   *     - 'first' The first registered client is called.
+   *     - 'last' The last registered client is called.
+   *     - 'random' A random RPC is called.
+   */
+  async register(t, r, { invoke: n = "single" } = {}) {
+    this.registeredRPC[t] = r, await this._callServerRPC("register", {
+      name: t,
+      invoke: n
+    });
+    const o = () => {
+      if (this.registeredRPC[t] === r)
+        return delete this.registeredRPC[t], this._callServerRPC("unregister", { name: t });
+    };
+    return this.toUnregister.push(o), o;
+  }
+  /**
+   * Call a previously registered function with `params` arguments.
+   * @param {string} name of function
+   * @param {*} params parameters of the called function.
+   */
+  async call(t, r) {
+    return await this._callServerRPC("call", { name: t, params: r });
+  }
+}
+const Xr = ({
+  socket: e,
+  room: t,
+  onJoined: r = () => {
+  },
+  onMaster: n = () => {
+  },
+  userId: o = null
+}) => {
+  const s = new Ur(e, t, o);
+  return new Promise((a) => {
+    let u = !0;
+    e.on(`${t}.isMaster`, () => {
+      s._left || n(t);
+    }), e.on(`${t}.roomJoined`, (l) => {
+      s._left || (s.userId = l, u = !1, r(s), a(s));
+    }), e.on("connect", () => {
+      s._left || u || e.emit("joinSuperSocket", {
+        room: t,
+        userId: s.userId
+      });
+    }), e.emit("joinSuperSocket", { room: t, userId: o });
+  });
+}, ot = g.createContext(), Wr = () => /* @__PURE__ */ T(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      top: "0",
+      bottom: "0",
+      width: "100%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /* @__PURE__ */ T("h2", { children: "🌀 Loading..." })
+  }
+), er = ({
+  socket: e,
+  room: t,
+  channel: r = "default",
+  LoadingComponent: n = Wr,
+  children: o
+}) => {
+  const [s, a] = g.useState(!1), [u, l] = g.useState(!1), [f, d] = g.useState(null), c = g.useRef(null), b = g.useRef(!1), _ = be(ot), w = g.useRef(!1);
+  return g.useEffect(() => (b.current = !0, () => {
+    b.current = !1;
+  }), []), g.useEffect(() => {
+    if (!e)
+      return null;
+    const m = () => {
+      console.log(`Disconnected from ${r}…`), b.current && (a(!1), l(!1));
+    };
+    return e.on("disconnect", m), () => {
+      e.off("disconnect", m);
+    };
+  }, [r, e]), g.useEffect(() => e ? (e.connected || e.connect(), console.log(`Try to connect to wire ${t} on channel ${r}`), w.current || (w.current = !0, Xr({
+    socket: e,
+    room: t,
+    onMaster: () => {
+      console.log(`Is now master on channel ${r}…`), b.current && l(!0);
+    },
+    onJoined: (m) => {
+      console.log(`Connected on channel ${r}…`), c.current = m, b.current && (d(m), a(!0));
+    }
+  })), () => {
+    var m;
+    (m = c.current) == null || m.leave();
+  }) : null, [r, t, e]), !s || !f ? /* @__PURE__ */ T(n, {}) : /* @__PURE__ */ T(
+    ot.Provider,
+    {
+      value: { ..._, [r]: { wire: f, joined: s, isMaster: u, room: t } },
+      children: o
+    }
+  );
+}, Be = (e = "default") => (be(ot) || {})[e], Pt = (e) => {
+  let t;
+  const r = /* @__PURE__ */ new Set(), n = (l, f) => {
+    const d = typeof l == "function" ? l(t) : l;
+    if (!Object.is(d, t)) {
+      const c = t;
+      t = f ?? typeof d != "object" ? d : Object.assign({}, t, d), r.forEach((b) => b(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(
+      "[DEPRECATED] The destroy method will be unsupported in the future version. You should use unsubscribe function returned by subscribe. Everything will be garbage collected if store is garbage collected."
+    ), r.clear();
+  } };
+  return t = e(n, o, u), u;
+}, Ne = (e) => e ? Pt(e) : Pt;
+var st = {}, Vr = {
+  get exports() {
+    return st;
+  },
+  set exports(e) {
+    st = e;
+  }
+}, Je = {}, Ye = {}, Fr = {
+  get exports() {
+    return Ye;
+  },
+  set exports(e) {
+    Ye = e;
+  }
+}, Ze = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * 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 Kr() {
+  if (Mt)
+    return Ze;
+  Mt = 1;
+  var e = g;
+  function t(c, b) {
+    return c === b && (c !== 0 || 1 / c === 1 / b) || c !== c && b !== b;
+  }
+  var r = typeof Object.is == "function" ? Object.is : t, n = e.useState, o = e.useEffect, s = e.useLayoutEffect, a = e.useDebugValue;
+  function u(c, b) {
+    var _ = b(), w = n({ inst: { value: _, getSnapshot: b } }), m = w[0].inst, E = w[1];
+    return s(function() {
+      m.value = _, m.getSnapshot = b, l(m) && E({ inst: m });
+    }, [c, _, b]), o(function() {
+      return l(m) && E({ inst: m }), c(function() {
+        l(m) && E({ inst: m });
+      });
+    }, [c]), a(_), _;
+  }
+  function l(c) {
+    var b = c.getSnapshot;
+    c = c.value;
+    try {
+      var _ = b();
+      return !r(c, _);
+    } catch {
+      return !0;
+    }
+  }
+  function f(c, b) {
+    return b();
+  }
+  var d = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? f : u;
+  return Ze.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : d, Ze;
+}
+var Qe = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var jt;
+function Hr() {
+  return jt || (jt = 1, process.env.NODE_ENV !== "production" && function() {
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+    var e = g, t = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function r(y) {
+      {
+        for (var p = arguments.length, h = new Array(p > 1 ? p - 1 : 0), v = 1; v < p; v++)
+          h[v - 1] = arguments[v];
+        n("error", y, h);
+      }
+    }
+    function n(y, p, h) {
+      {
+        var v = t.ReactDebugCurrentFrame, C = v.getStackAddendum();
+        C !== "" && (p += "%s", h = h.concat([C]));
+        var D = h.map(function(k) {
+          return String(k);
+        });
+        D.unshift("Warning: " + p), Function.prototype.apply.call(console[y], console, D);
+      }
+    }
+    function o(y, p) {
+      return y === p && (y !== 0 || 1 / y === 1 / p) || y !== y && p !== p;
+    }
+    var s = typeof Object.is == "function" ? Object.is : o, a = e.useState, u = e.useEffect, l = e.useLayoutEffect, f = e.useDebugValue, d = !1, c = !1;
+    function b(y, p, h) {
+      d || e.startTransition !== void 0 && (d = !0, r("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
+      var v = p();
+      if (!c) {
+        var C = p();
+        s(v, C) || (r("The result of getSnapshot should be cached to avoid an infinite loop"), c = !0);
+      }
+      var D = a({
+        inst: {
+          value: v,
+          getSnapshot: p
+        }
+      }), k = D[0].inst, P = D[1];
+      return l(function() {
+        k.value = v, k.getSnapshot = p, _(k) && P({
+          inst: k
+        });
+      }, [y, v, p]), u(function() {
+        _(k) && P({
+          inst: k
+        });
+        var M = function() {
+          _(k) && P({
+            inst: k
+          });
+        };
+        return y(M);
+      }, [y]), f(v), v;
+    }
+    function _(y) {
+      var p = y.getSnapshot, h = y.value;
+      try {
+        var v = p();
+        return !s(h, v);
+      } catch {
+        return !0;
+      }
+    }
+    function w(y, p, h) {
+      return p();
+    }
+    var m = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", E = !m, R = E ? w : b, x = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : R;
+    Qe.useSyncExternalStore = x, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+  }()), Qe;
+}
+var Dt;
+function tr() {
+  return Dt || (Dt = 1, function(e) {
+    process.env.NODE_ENV === "production" ? e.exports = Kr() : e.exports = Hr();
+  }(Fr)), Ye;
+}
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * 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 qr() {
+  if ($t)
+    return Je;
+  $t = 1;
+  var e = g, t = tr();
+  function r(f, d) {
+    return f === d && (f !== 0 || 1 / f === 1 / d) || f !== f && d !== d;
+  }
+  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(f, d, c, b, _) {
+    var w = s(null);
+    if (w.current === null) {
+      var m = { hasValue: !1, value: null };
+      w.current = m;
+    } else
+      m = w.current;
+    w = u(function() {
+      function R(v) {
+        if (!x) {
+          if (x = !0, y = v, v = b(v), _ !== void 0 && m.hasValue) {
+            var C = m.value;
+            if (_(C, v))
+              return p = C;
+          }
+          return p = v;
+        }
+        if (C = p, n(y, v))
+          return C;
+        var D = b(v);
+        return _ !== void 0 && _(C, D) ? C : (y = v, p = D);
+      }
+      var x = !1, y, p, h = c === void 0 ? null : c;
+      return [function() {
+        return R(d());
+      }, h === null ? void 0 : function() {
+        return R(h());
+      }];
+    }, [d, c, b, _]);
+    var E = o(f, w[0], w[1]);
+    return a(function() {
+      m.hasValue = !0, m.value = E;
+    }, [E]), l(E), E;
+  }, Je;
+}
+var et = {};
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var At;
+function Gr() {
+  return At || (At = 1, process.env.NODE_ENV !== "production" && function() {
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+    var e = g, t = tr();
+    function r(d, c) {
+      return d === c && (d !== 0 || 1 / d === 1 / c) || d !== d && 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 f(d, c, b, _, w) {
+      var m = s(null), E;
+      m.current === null ? (E = {
+        hasValue: !1,
+        value: null
+      }, m.current = E) : E = m.current;
+      var R = u(function() {
+        var h = !1, v, C, D = function(N) {
+          if (!h) {
+            h = !0, v = N;
+            var F = _(N);
+            if (w !== void 0 && E.hasValue) {
+              var K = E.value;
+              if (w(K, F))
+                return C = K, K;
+            }
+            return C = F, F;
+          }
+          var O = v, $ = C;
+          if (n(O, N))
+            return $;
+          var A = _(N);
+          return w !== void 0 && w($, A) ? $ : (v = N, C = A, A);
+        }, k = b === void 0 ? null : b, P = function() {
+          return D(c());
+        }, M = k === null ? void 0 : function() {
+          return D(k());
+        };
+        return [P, M];
+      }, [c, b, _, w]), x = R[0], y = R[1], p = o(d, x, y);
+      return a(function() {
+        E.hasValue = !0, E.value = p;
+      }, [p]), l(p), p;
+    }
+    et.useSyncExternalStoreWithSelector = f, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+  }()), et;
+}
+(function(e) {
+  process.env.NODE_ENV === "production" ? e.exports = qr() : e.exports = Gr();
+})(Vr);
+const Jr = /* @__PURE__ */ zr(st), { useSyncExternalStoreWithSelector: Zr } = Jr;
+function Ue(e, t = e.getState, r) {
+  const n = Zr(
+    e.subscribe,
+    e.getState,
+    e.getServerState || e.getState,
+    t,
+    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 { top: o, left: s } = n.getBoundingClientRect();
+  return rr({ x: s, y: o }, t);
+}), en = (e, t) => {
+  const r = t.getBoundingClientRect();
+  return Qr(e, r);
+}, it = (e, t) => {
+  const n = e.getElementsByClassName(`item ${t}`)[0];
+  return n || console.error(`Missing item ${t}`), n;
+}, ke = (e) => {
+  var r, n;
+  const t = (r = e == null ? void 0 : e.dataset) == null ? void 0 : r.id;
+  return t || console.error(
+    "getIdFromElem call fails",
+    e,
+    JSON.stringify(e == null ? void 0 : e.dataset),
+    (n = e == null ? void 0 : e.dataset) == null ? void 0 : n.id
+  ), t;
+}, nr = (e, t = document) => {
+  const r = e.reduce((n, o) => {
+    const s = it(t, o);
+    if (!s)
+      return null;
+    const { left: a, right: u, top: l, bottom: f } = s.getBoundingClientRect();
+    let d;
+    return n ? d = n : d = {
+      left: a,
+      top: l,
+      right: u,
+      bottom: f
+    }, d.left = Math.min(a, d.left), d.top = Math.min(l, d.top), d.right = Math.max(u, d.right), d.bottom = Math.max(f, d.bottom), d;
+  }, null);
+  return r && (r.width = r.right - r.left, r.height = r.bottom - r.top, r);
+}, tn = ({ 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 f, d, c, b, _, w, m, E, R, x;
+  const y = s / 1.1547;
+  switch (o) {
+    case "grid":
+      f = Math.round(u / s) * s, d = Math.round(l / s) * s;
+      break;
+    case "hexH":
+      c = 2 * y, b = 3 * s, _ = Math.round(u / c) * c, m = Math.round(l / b) * b, w = _ > u ? _ - y : _ + y, E = m > l ? m - 1.5 * s : m + 1.5 * s, R = Math.hypot(_ - u, m - l), x = Math.hypot(w - u, E - l), R < x ? (f = _, d = m) : (f = w, d = E);
+      break;
+    case "hexV":
+      c = 3 * s, b = 2 * y, _ = Math.round(u / c) * c, m = Math.round(l / b) * b, w = _ > u ? _ - 1.5 * s : _ + 1.5 * s, E = m > l ? m - y : m + y, R = Math.hypot(_ - u, m - l), x = Math.hypot(w - u, E - l), R < x ? (f = _, d = m) : (f = w, d = E);
+      break;
+    default:
+      f = e + r / 2, d = t + n / 2;
+  }
+  return {
+    x: f + a.x - r / 2,
+    y: d + a.y - n / 2
+  };
+}, zt = [
+  "#037758",
+  "#99092a",
+  "#067070",
+  "#c6650f",
+  "#008726",
+  "#3d7004",
+  "#348402",
+  "#057f58",
+  "#b58612",
+  "#c44c01",
+  "#0a7704",
+  "#0e910e",
+  "#027377",
+  "#c99e02",
+  "#054160",
+  "#157a01",
+  "#b10de2",
+  "#0d6289",
+  "#bc5d03",
+  "#ba0cd1",
+  "#d39f10",
+  "#0c4c7a",
+  "#460782",
+  "#a51f10",
+  "#cecb10",
+  "#9b0943",
+  "#607f0c",
+  "#007a4b",
+  "#bf0daa",
+  "#af0ad8"
+], Lt = () => zt[Math.floor(Math.random() * zt.length)], rn = !1, ut = ({ wire: e, storeName: t, noSync: r = [], defaultValue: n }, o) => (s, a, u) => {
+  s({ ready: !1 });
+  const l = [];
+  (async () => {
+    try {
+      const _ = await e.call(`${t}_getValue`);
+      rn && console.log("init from peer with value", _), s((w) => ({ ...w, ..._ }));
+    } catch {
+      n !== void 0 && s(n);
+    }
+    l.push(
+      await e.register(
+        `${t}_getValue`,
+        () => Object.fromEntries(
+          Object.entries(a()).filter(
+            ([_, w]) => typeof w != "function" && !r.includes(_)
+          )
+        ),
+        { invoke: "first" }
+      )
+    ), l.push(
+      e.subscribe(`${t}_call`, ([_, w]) => {
+        c[_](...w);
+      })
+    ), s({ ready: !0 });
+  })();
+  const d = o(s, a, u), c = { ...d }, b = Object.fromEntries(
+    // Send the update message on all method calls
+    Object.entries(d).map(([_, w]) => typeof w == "function" && !_.startsWith("get") && !r.includes(_) ? [_, (...E) => {
+      const R = w(...E);
+      return e.publish(`${t}_call`, [_, E]), R;
+    }] : [_, w])
+  );
+  return b.unsub = () => {
+    l.forEach((_) => _());
+  }, b;
+};
+function Xe(e, t) {
+  if (Object.is(e, t))
+    return !0;
+  if (typeof e != "object" || e === null || typeof t != "object" || t === null)
+    return !1;
+  if (e instanceof Map && t instanceof Map) {
+    if (e.size !== t.size)
+      return !1;
+    for (const [n, o] of e)
+      if (!Object.is(o, t.get(n)))
+        return !1;
+    return !0;
+  }
+  if (e instanceof Set && t instanceof Set) {
+    if (e.size !== t.size)
+      return !1;
+    for (const n of e)
+      if (!t.has(n))
+        return !1;
+    return !0;
+  }
+  const r = Object.keys(e);
+  if (r.length !== Object.keys(t).length)
+    return !1;
+  for (let n = 0; n < r.length; n++)
+    if (!Object.prototype.hasOwnProperty.call(t, r[n]) || !Object.is(e[r[n]], t[r[n]]))
+      return !1;
+  return !0;
+}
+const or = g.createContext(), nn = (e, t) => ({
+  items: {},
+  getItems: () => t().items,
+  setItems: (r) => e({ items: r }),
+  updateItems: (r) => e((n) => ({ items: { ...n.items, ...r } })),
+  moveItems: (r, n) => e(({ items: o }) => {
+    const s = { ...o };
+    return r.forEach((a) => {
+      const u = o[a];
+      u && (s[a] = {
+        ...u,
+        x: (u.x || 0) + n.x,
+        y: (u.y || 0) + n.y,
+        moving: !0
+      });
+    }), { items: s };
+  })
+}), on = (e, t) => ({
+  itemIds: [],
+  setItemIds: (r) => e({ itemIds: r }),
+  getItemIds: () => t().itemIds,
+  insert: (r, n) => e((o) => {
+    const s = [...o.itemIds];
+    return s.splice(r, 0, n), { itemIds: s };
+  }),
+  remove: (r) => e((n) => {
+    const o = [...n.itemIds];
+    return o.splice(r, 1), { itemIds: o };
+  }),
+  updateItemIds: (r, n) => e((o) => {
+    const s = [...o.itemIds];
+    return s[r] = n, { items: s };
+  }),
+  updateManyItemIds: (r) => e((n) => ({
+    items: n.itemIds.map((o, s) => r[s] !== void 0 ? r[s] : o)
+  }))
+}), sn = (e, t) => ({
+  removeItemsById: (r) => e((n) => ({
+    itemIds: n.itemIds.filter((o) => !r.includes(o)),
+    items: Object.fromEntries(
+      Object.entries(n.items).filter(
+        ([o]) => !r.includes(o)
+      )
+    )
+  })),
+  getItemList: () => {
+    const r = t().items;
+    return t().itemIds.map((n) => r[n]);
+  },
+  setItemList: (r) => e({
+    items: Object.fromEntries(r.map((n) => [n.id, n])),
+    itemIds: r.map(({ id: n }) => n)
+  }),
+  insertItems: (r, n) => e((o) => {
+    let s;
+    const a = r.map(({ id: u }) => u);
+    if (n) {
+      const u = o.itemIds.findIndex((l) => l === n);
+      s = [...o.itemIds], s.splice(u, 0, ...a);
+    } else
+      s = [...o.itemIds, ...a];
+    return {
+      items: {
+        ...o.items,
+        ...Object.fromEntries(r.map((u) => [u.id, u]))
+      },
+      itemIds: s
+    };
+  })
+}), an = (e, t) => ({
+  boardConfig: {},
+  getBoardConfig: () => t().boardConfig,
+  setBoardConfig: (r) => e({ boardConfig: r }),
+  updateBoardConfig: (r) => e((n) => ({ boardConfig: { ...n.boardConfig, ...r } }))
+}), cn = (e, t) => ({
+  session: {},
+  getSessionInfo: () => t().session,
+  setSessionInfo: (r) => e({ session: r }),
+  updateSessionInfo: (r) => e((n) => ({ session: { ...n.session, ...r } }))
+}), Yt = ({ storeName: e, children: t, defaultValue: r }) => {
+  const { wire: n } = Be("room"), [o] = g.useState(
+    () => Ne(
+      ut({ wire: n, storeName: e, defaultValue: r }, (...s) => ({
+        ...nn(...s),
+        ...on(...s),
+        ...sn(...s),
+        ...an(...s),
+        ...cn(...s)
+      }))
+    )
+  );
+  return /* @__PURE__ */ T(or.Provider, { value: o, children: t });
+}, se = (e, t) => {
+  const r = be(or);
+  return Ue(r, e, t || Xe);
+}, Jo = () => {
+  const [e, t] = se((n) => [
+    n.itemIds,
+    n.items
+  ]);
+  return g.useMemo(
+    () => e.map((n) => t[n]),
+    [e, t]
+  );
+}, Zo = () => {
+  const [e, t, r] = se((a) => [
+    a.items,
+    a.itemIds,
+    a.getItemList
+  ]), [n, o] = g.useState(r()), [, s] = g.useTransition();
+  return g.useEffect(() => {
+    const a = r();
+    s(() => {
+      o(a);
+    });
+  }, [e, t, r]), n;
+}, sr = 5e4, ir = g.createContext(), un = (e, t) => ({
+  config: {
+    itemTemplates: {},
+    actions: {},
+    uid: null,
+    itemExtent: {},
+    boardWrapperRect: {},
+    boardSize: sr
+  },
+  // TODO optimize when same value as before
+  updateConfiguration: (r) => e((n) => ({ config: { ...n.config, ...r } })),
+  getConfiguration: () => t().config
+}), ln = (e, t) => ({
+  boardState: {
+    movingItems: !1,
+    selecting: !1,
+    zooming: !1,
+    panning: !1,
+    translateX: 0,
+    translateY: 0,
+    scale: 1
+  },
+  updateBoardState: (r) => e((n) => ({ boardState: { ...n.boardState, ...r } })),
+  getBoardState: () => t().boardState
+}), fn = (e, t) => ({
+  interactions: {},
+  getInteractions: () => t().interactions,
+  register: (r, n) => e((o) => {
+    const s = [...o.interactions[r] || []];
+    return s.push(n), {
+      interactions: { ...o.interaction, [r]: s }
+    };
+  }),
+  unregister: (r, n) => e((o) => {
+    const s = (o.interactions[r] || []).filter(
+      (a) => a !== n
+    );
+    return {
+      interactions: { ...o.interaction, [r]: s }
+    };
+  }),
+  callInteractions: (r, n) => {
+    t().interactions[r] && t().interactions[r].forEach((o) => {
+      o(n);
+    });
+  }
+}), dn = (e, t) => ({
+  selection: [],
+  setSelection: (r) => e((n) => JSON.stringify(n.selection) !== JSON.stringify(r) ? { selection: r } : {}),
+  getSelection: () => t().selection,
+  select: (r) => e((n) => ({
+    selection: [...n.selection, ...r]
+  })),
+  unselect: (r) => e((n) => ({
+    selection: n.selection.filter((o) => !r.includes(o))
+  })),
+  clear: () => e((r) => r.selection.length > 0 ? { selection: [] } : {}),
+  reverse: () => e((r) => {
+    const n = [...r.selection];
+    return n.reverse(), { selection: n };
+  }),
+  selectionBox: null,
+  setSelectionBox: (r) => e((n) => {
+    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 } : {};
+  })
+}), Bt = ({ children: e }) => {
+  const [t] = g.useState(
+    () => Ne((...r) => ({
+      ...un(...r),
+      ...ln(...r),
+      ...fn(...r),
+      ...dn(...r)
+    }))
+  );
+  return /* @__PURE__ */ T(ir.Provider, { value: t, children: e });
+}, Z = (e, t) => {
+  const r = be(ir);
+  return Ue(r, e, t || Xe);
+}, Qo = () => {
+  const [e] = Z((t) => [t.selection]);
+  return e;
+};
+function lt(e) {
+  const t = Ie(e);
+  return t.current = e, ct(() => Object.freeze({
+    get current() {
+      return t.current;
+    }
+  }), []);
+}
+function pn(e) {
+  const t = lt(e);
+  Me(
+    () => () => {
+      t.current();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+}
+function ft(e, t, r, n = 0) {
+  const o = Ie(), s = Ie(), a = Ie(), u = () => {
+    o.current && (clearTimeout(o.current), o.current = void 0), s.current && (clearTimeout(s.current), s.current = void 0);
+  };
+  return pn(u), ct(
+    () => {
+      const l = () => {
+        if (!a.current)
+          return;
+        const d = a.current;
+        a.current = void 0, e.apply(d.this, d.args), u();
+      }, f = function(...d) {
+        o.current && clearTimeout(o.current), a.current = { args: d, this: this }, o.current = setTimeout(l, r), n > 0 && !s.current && (s.current = setTimeout(l, n));
+      };
+      return Object.defineProperties(f, {
+        length: { value: e.length },
+        name: { value: `${e.name || "anonymous"}__debounced__${r}` }
+      }), f;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unsafe-assignment
+    [r, n, ...t]
+  );
+}
+const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
+  x: e,
+  y: t,
+  scale: r,
+  itemExtent: { right: n, left: o, top: s, bottom: a },
+  boardWrapperRect: u,
+  boardSize: l
+}) => {
+  const f = {
+    left: -n * r + ze * r,
+    right: u.width - o * r - ze * r,
+    top: -a * r + ze * r,
+    bottom: u.height - s * r - ze * r,
+    maxRight: u.width - l * r,
+    maxLeft: u.height - l * r
+  }, d = Math.min(
+    Math.max(e, f.left, f.maxRight),
+    f.right,
+    0
+  ), c = Math.min(
+    Math.max(t, f.top, f.maxLeft),
+    f.bottom,
+    0
+  );
+  return [d, c];
+}, dt = () => {
+  const [
+    e,
+    t,
+    r,
+    n,
+    o
+  ] = Z((m) => [
+    m.getBoardState,
+    m.updateBoardState,
+    m.config.itemExtent,
+    m.getConfiguration,
+    m.updateConfiguration
+  ]), s = g.useRef([0.1, 8]), [a] = se((m) => [m.getItemList]), u = g.useCallback(() => {
+    const { translateX: m, translateY: E, scale: R } = e();
+    return { translateX: m, translateY: E, scale: R };
+  }, [e]), l = g.useCallback(
+    (m) => {
+      const { itemExtent: E, boardWrapperRect: R, boardSize: x } = n(), y = e(), { translateX: p, translateY: h, scale: v } = {
+        ...y,
+        ...m(y)
+      };
+      let C = v;
+      v !== y.scale && (C > s.current[1] && ([, C] = s.current), C < s.current[0] && ([C] = s.current));
+      let [D, k] = [p, h];
+      (p !== y.translateX || h !== y.translateY) && ([D, k] = Nt({
+        x: p,
+        y: h,
+        scale: C,
+        itemExtent: E,
+        boardWrapperRect: R,
+        boardSize: x
+      })), t({
+        translateX: D,
+        translateY: k,
+        scale: C
+      });
+    },
+    [e, n, t]
+  ), f = g.useCallback(
+    (m, E) => {
+      const { itemExtent: R, boardWrapperRect: x, boardSize: y } = n();
+      let p = E;
+      p || (p = {
+        x: x.width / 2,
+        y: x.height / 2
+      });
+      const h = e();
+      let v = h.scale * m;
+      v > s.current[1] && ([, v] = s.current), v < s.current[0] && ([v] = s.current);
+      const C = p.x - x.left, D = p.y - x.top, k = C - (C - h.translateX) * v / h.scale, P = D - (D - h.translateY) * v / h.scale, [M, N] = Nt({
+        x: k,
+        y: P,
+        scale: v,
+        itemExtent: R,
+        boardWrapperRect: x,
+        boardSize: y
+      });
+      t({
+        scale: v,
+        translateX: M,
+        translateY: N
+      });
+    },
+    [e, n, t]
+  ), d = g.useCallback(
+    ({ left: m, top: E, width: R, height: x }) => {
+      const { boardWrapperRect: y } = n(), p = y.width / R, h = y.height / x, C = Math.min(p, h) * mn, D = y.width / 2 - (m + R / 2) * C, k = y.height / 2 - (E + x / 2) * C;
+      t({
+        translateX: D,
+        translateY: k,
+        scale: C
+      });
+    },
+    [n, t]
+  ), c = g.useCallback(async () => {
+    const {
+      itemExtent: { width: m, height: E },
+      boardWrapperRect: R
+    } = n(), x = R.width / m, y = R.height / E, p = Math.min(x, y);
+    s.current = [
+      Math.max(p * 0.5, 0.05),
+      Math.max(p * 10, 10)
+    ];
+  }, [n]), b = g.useCallback(() => {
+    const { boardWrapperRect: m, boardSize: E } = n(), { translateX: R, translateY: x, scale: y } = e();
+    return {
+      x: (m.width / 2 - R) / y - E / 2,
+      y: (m.height / 2 - x) / y - E / 2
+    };
+  }, [e, n]), _ = g.useCallback(() => {
+    const m = a(), { boardWrapperRect: E, boardWrapper: R, boardSize: x } = n(), { scale: y, translateX: p, translateY: h } = e(), { left: v, top: C, width: D, height: k } = nr(
+      m.map(({ id: M }) => M),
+      R
+    ) || {
+      left: x / 2 * y + E.left + p,
+      top: x / 2 * y + E.top + h,
+      width: 0,
+      height: 0
+    }, P = {
+      left: (v - E.left - p) / y,
+      top: (C - E.top - h) / y,
+      width: D / y,
+      height: k / y
+    };
+    if (P.right = P.left + P.width, P.bottom = P.top + P.height, P.width < Se) {
+      const M = (Se - P.width) / 2;
+      P.left -= M, P.right += M, P.width = Se;
+    }
+    if (P.height < Se) {
+      const M = (Se - P.height) / 2;
+      P.top -= M, P.bottom += M, P.height = Se;
+    }
+    o({ itemExtent: P });
+  }, [e, n, a, o]), w = ft(
+    () => _(),
+    [_],
+    200
+  );
+  return g.useEffect(() => {
+    r.left && c();
+  }, [c, r]), {
+    setDim: l,
+    getDim: u,
+    zoomTo: f,
+    zoomToCenter: f,
+    zoomToExtent: d,
+    getCenter: b,
+    updateItemExtent: w
+  };
+}, gn = (e) => {
+  const [t, r, n] = Z(
+    ({ register: a, unregister: u, callInteractions: l }) => [
+      a,
+      u,
+      l
+    ]
+  ), o = g.useCallback(
+    (a) => (t(e, a), () => {
+      r(e, a);
+    }),
+    [e, t, r]
+  ), s = g.useCallback(
+    (a) => {
+      n(e, a);
+    },
+    [n, e]
+  );
+  return { register: o, call: s };
+}, pt = () => {
+  const { call: e } = gn("place"), { getCenter: t, updateItemExtent: r } = dt(), [n, o, s, a] = Z((O) => [
+    O.clear,
+    O.reverse,
+    O.unselect,
+    O.getConfiguration
+  ]), {
+    getItems: u,
+    getItemIds: l,
+    setItemIds: f,
+    updateItems: d,
+    moveItems: c,
+    removeItemsById: b,
+    getItemList: _,
+    insertItems: w,
+    setItemList: m
+  } = se(
+    ({
+      getItems: O,
+      getItemIds: $,
+      setItemIds: A,
+      updateItems: U,
+      moveItems: Y,
+      removeItemsById: W,
+      getItemList: J,
+      insertItems: te,
+      setItemList: re
+    }) => ({
+      getItems: O,
+      getItemIds: $,
+      setItemIds: A,
+      updateItems: U,
+      moveItems: Y,
+      removeItemsById: W,
+      getItemList: J,
+      insertItems: te,
+      setItemList: re
+    })
+  ), E = g.useCallback(
+    (O, $) => {
+      let A = $;
+      typeof $ == "object" && (A = () => $);
+      const U = l().filter((J) => O.includes(J)), Y = u(), W = Object.fromEntries(
+        U.map((J) => [J, A({ ...Y[J] })])
+      );
+      d(W), r();
+    },
+    [l, u, r, d]
+  ), R = g.useCallback(
+    (O) => {
+      m(O), n(), r();
+    },
+    [n, m, r]
+  ), x = g.useCallback(
+    (O, $) => {
+      E([O], $);
+    },
+    [E]
+  ), y = g.useCallback(
+    (O, $) => {
+      c(O, $), r();
+    },
+    [c, r]
+  ), p = g.useCallback(
+    (O) => {
+      const $ = l(), A = $.filter((Y) => !O.includes(Y)), U = $.filter(
+        (Y) => O.includes(Y)
+      );
+      f([...A, ...U]);
+    },
+    [l, f]
+  ), h = g.useCallback(
+    (O, { type: $, size: A } = {}) => {
+      const { boardWrapper: U } = a(), Y = {}, W = u();
+      O.forEach((J) => {
+        const te = W[J], re = it(U, J);
+        if (!re)
+          return;
+        const ne = {
+          type: $ || "grid",
+          size: A || 1,
+          offset: { x: 0, y: 0 },
+          ...te.grid
+        }, V = tn(
+          {
+            x: te.x,
+            y: te.y,
+            width: re.clientWidth,
+            height: re.clientHeight
+          },
+          ne
+        );
+        Y[J] = { ...te, ...V };
+      }), d(Y);
+    },
+    [a, u, d]
+  ), v = g.useCallback(
+    (O, $) => {
+      p(O), E(O, (A) => {
+        const U = { ...A };
+        return delete U.moving, U;
+      }), h(O, $), e(O), r();
+    },
+    [
+      E,
+      e,
+      p,
+      h,
+      r
+    ]
+  ), C = g.useCallback(
+    (O) => {
+      f(O);
+    },
+    [f]
+  ), D = g.useCallback(
+    (O) => {
+      const $ = l(), A = $.filter(
+        (Y) => O.includes(Y)
+      ), U = $.map((Y) => O.includes(Y) ? A.pop() : Y);
+      f(U), o();
+    },
+    [l, o, f]
+  ), k = g.useCallback(
+    (O, $) => {
+      const A = u(), U = O.map((V) => A[V]), Y = $.map((V) => A[V]), W = $.reduce((V, ee) => (V[ee] = U.shift(), V), {}), J = Y.reduce((V, ee) => {
+        const le = W[ee.id], he = {
+          ...ee,
+          x: le.x,
+          y: le.y
+        };
+        return V[ee.id] = he, V;
+      }, {});
+      d(J);
+      const te = O.reduce((V, ee) => (V[ee] = $.shift(), V), {}), ne = l().map((V) => O.includes(V) ? te[V] : V);
+      f(ne);
+    },
+    [u, d, l, f]
+  ), P = g.useCallback(
+    (O, $) => {
+      const A = t(), U = O.map((Y, W) => !Y.x || !Y.y ? { ...Y, x: A.x + 2 * W, y: A.y + 2 * W } : Y);
+      w(U, $), r();
+    },
+    [t, w, r]
+  ), M = g.useCallback(
+    (O, $) => {
+      P([O], $);
+    },
+    [P]
+  ), N = g.useCallback(
+    (O) => {
+      s(O), b(O);
+    },
+    [s, b]
+  ), F = g.useCallback(
+    (O) => {
+      const $ = u();
+      return O.map((A) => $[A]);
+    },
+    [u]
+  ), K = g.useCallback(
+    ({ target: O, clientX: $, clientY: A }, { returnLocked: U = !1, passLocked: Y = !1 } = {}) => {
+      if (["INPUT", "TEXTAREA"].includes(O.tagName))
+        return null;
+      const W = Te(O, "item");
+      if (W) {
+        if (_e(W, "selected"))
+          return W;
+        if (!Y && _e(W, "locked") && !_e(O, "passthrough"))
+          return U ? W : null;
+        if (_e(O, "passthrough")) {
+          const J = l(), { boardWrapper: te } = a(), re = J.reduce((ne, V) => {
+            const ee = it(te, V), le = ee.getBoundingClientRect();
+            return rr({ x: $, y: A }, le) && ne.unshift(ee), ne;
+          }, []);
+          for (let ne = 0; ne < re.length; ne += 1) {
+            const V = re[ne];
+            if (V !== W && (Y || !_e(V, "locked")))
+              return V;
+          }
+          return null;
+        }
+      }
+      return W;
+    },
+    [a, l]
+  );
+  return {
+    putItemsOnTop: p,
+    batchUpdateItems: E,
+    updateItemOrder: C,
+    moveItems: y,
+    placeItems: v,
+    updateItem: x,
+    swapItems: k,
+    reverseItemsOrder: D,
+    setItemList: R,
+    pushItem: M,
+    pushItems: P,
+    removeItems: N,
+    getItemList: _,
+    findElementUnderPointer: K,
+    getItems: F
+  };
+};
+var hn = 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 instanceof Map && r instanceof Map) {
+      if (t.size !== r.size)
+        return !1;
+      for (o of t.entries())
+        if (!r.has(o[0]))
+          return !1;
+      for (o of t.entries())
+        if (!e(o[1], r.get(o[0])))
+          return !1;
+      return !0;
+    }
+    if (t instanceof Set && r instanceof Set) {
+      if (t.size !== r.size)
+        return !1;
+      for (o of t.entries())
+        if (!r.has(o[0]))
+          return !1;
+      return !0;
+    }
+    if (ArrayBuffer.isView(t) && ArrayBuffer.isView(r)) {
+      if (n = t.length, n != r.length)
+        return !1;
+      for (o = n; o-- !== 0; )
+        if (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;
+};
+function vn(e, t, r, n = 0) {
+  Me(ft(e, t, r, n), t);
+}
+const yn = (e, t) => {
+  if (e.type in t) {
+    const r = t[e.type].defaultActions;
+    return typeof r == "function" ? r(e) : r;
+  }
+  return [];
+}, Ut = (e, t) => {
+  const { actions: r = yn(e, t) } = e;
+  return r.map((n) => typeof n == "string" ? { name: n } : n);
+}, es = () => {
+  const [e, t] = se((c) => [
+    c.items,
+    c.getItems
+  ]), [r, n, o] = Z((c) => [
+    c.config.itemTemplates,
+    c.selection,
+    c.getSelection
+  ]), [s, a] = g.useState([]), u = g.useRef(!1), [, l] = g.useTransition();
+  g.useEffect(() => (u.current = !0, () => {
+    u.current = !1;
+  }), []);
+  const f = g.useCallback(
+    (c) => {
+      const b = t();
+      if (c)
+        return [c, c.map((w) => b[w])];
+      const _ = o();
+      return [_, _.map((w) => b[w])];
+    },
+    [t, o]
+  ), d = Jt(() => {
+    const [c, b] = f();
+    if (c.length > 0) {
+      if (!u.current)
+        return;
+      const _ = b.reduce((w, m) => {
+        const E = Ut(m, r);
+        return w.filter(
+          (R) => E.some((x) => hn(R, x))
+        );
+      }, Ut(b[0], r));
+      l(() => {
+        a(_);
+      });
+    } else
+      l(() => {
+        a([]);
+      });
+  }, [f, r]);
+  return vn(
+    () => d(),
+    [e, n, d],
+    100
+  ), {
+    availableActions: s
+  };
+}, ts = () => {
+  const [e] = Z((t) => [t.selectionBox]);
+  return e;
+};
+let me = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce((t, r) => (r &= 63, r < 36 ? t += r.toString(36) : r < 62 ? t += (r - 26).toString(36).toUpperCase() : r > 62 ? t += "-" : t += "_", t), "");
+const ar = g.createContext(), at = (e) => {
+  localStorage.setItem("user", JSON.stringify(e));
+}, Sn = () => {
+  if (localStorage.user) {
+    const t = {
+      name: "Player",
+      color: Lt(),
+      uid: me(),
+      ...JSON.parse(localStorage.user)
+    };
+    return at(t), t;
+  }
+  const e = {
+    name: "Player",
+    color: Lt(),
+    uid: me()
+  };
+  return at(e), e;
+}, _n = (e) => (t, r) => ({
+  isSpaceMaster: !1,
+  users: {},
+  getUser: () => r().users[e],
+  getUsers: () => r().users,
+  getUserList: () => Object.values(r().users),
+  getLocalUsers: () => {
+    if (!r().users[e])
+      return [];
+    const { space: n } = r().users[e];
+    return r().getUserList().filter(({ space: o }) => o === n);
+  },
+  addUser: (n) => t((o) => ({ users: { ...o.users, [n.id]: n } })),
+  updateUser: (n, o) => t((s) => {
+    if (!s.users[n])
+      return {};
+    const a = {
+      ...s.users[n],
+      ...o,
+      id: n,
+      uid: s.users[n].uid
+    };
+    return a.id === e && at(a), setTimeout(() => r().electSpaceMaster(), 100), {
+      users: {
+        ...s.users,
+        [n]: a
+      }
+    };
+  }),
+  removeUser: (n) => t((o) => {
+    const s = { ...o.users };
+    return delete s[n], setTimeout(() => r().electSpaceMaster(), 100), { users: s };
+  }),
+  // Not synchronized methods
+  updateCurrentUser: (n) => r().updateUser(e, n),
+  joinSpace: (n) => r().updateUser(e, { space: n, spaceJoinedTimestamp: Date.now() }),
+  electSpaceMaster: () => {
+    const n = r().getLocalUsers(), o = {
+      uid: null,
+      timestamp: Date.now()
+    };
+    Object.values(n).forEach(({ spaceJoinedTimestamp: s, id: a }) => {
+      s < o.timestamp && (o.id = a, o.timestamp = s);
+    }), t({ isSpaceMaster: o.id === e });
+  }
+}), bn = (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 };
+  })
+}), cr = ({ storeName: e, children: t }) => {
+  const { wire: r, isMaster: n } = Be("room"), [o, s] = g.useState(null), [a, u] = g.useState(!1), l = g.useRef(!1);
+  return g.useEffect(() => {
+    let f = !0;
+    const d = [];
+    if (!o && !l.current)
+      return l.current = !0, (() => {
+        const b = Ne(
+          ut(
+            {
+              wire: r,
+              storeName: e,
+              noSync: [
+                "updateCurrentUser",
+                "joinSpace",
+                "isSpaceMaster",
+                "electSpaceMaster"
+              ]
+            },
+            (...w) => ({
+              ..._n(r.userId)(...w),
+              ...bn(...w)
+            })
+          )
+        ), _ = b.subscribe((w) => {
+          w.ready && (_(), f && s(b));
+        });
+      })(), () => {
+        f = !1, l.current = !1, d.forEach((b) => b());
+      };
+  }, [o, e, r, r.userId]), g.useEffect(() => {
+    if (o)
+      return o.getState().addUser({
+        ...Sn(),
+        id: r.userId
+      }), u(!0), () => {
+        o.getState().removeUser(r.userId);
+      };
+  }, [n, o, r]), g.useEffect(() => {
+    if (o) {
+      const f = r.subscribe("userLeave", (d) => {
+        o.getState().removeUser(d);
+      });
+      return () => {
+        f();
+      };
+    }
+  }, [n, o, r]), g.useEffect(() => {
+    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);
+  return Ue(r, e, t || Xe);
+}, rs = () => {
+  const [e, t, r, n, o] = ge((u) => [
+    u.isSpaceMaster,
+    u.getUser(),
+    u.users,
+    u.updateCurrentUser,
+    u.joinSpace
+  ]), s = g.useMemo(() => Object.values(r), [r]), a = g.useMemo(() => {
+    const { space: u } = t;
+    return s.filter(({ space: l }) => l === u);
+  }, [t, s]);
+  return {
+    isSpaceMaster: e,
+    currentUser: t,
+    updateCurrentUser: n,
+    users: s,
+    localUsers: a,
+    joinSpace: o
+  };
+}, ns = () => {
+  const [e, t, r] = se(
+    (o) => [o.boardConfig, o.getBoardConfig, o.setBoardConfig]
+  ), n = g.useCallback(
+    (o) => {
+      let s = o;
+      typeof o == "object" && (s = () => o);
+      const a = t(), u = s(a);
+      r(u);
+    },
+    [t, r]
+  );
+  return [e, n];
+}, os = () => {
+  const [e] = Z((t) => [t.boardState]);
+  return e;
+}, ss = () => {
+  const [e, t, r, n] = se((o) => [
+    o.getSessionInfo,
+    o.setSessionInfo,
+    o.updateSessionInfo,
+    o.session
+  ]);
+  return { getSessionInfo: e, setSessionInfo: t, sessionInfo: n, updateSessionInfo: r };
+}, ur = g.createContext(), En = ({ user: { name: e, uid: t, color: r }, content: n }) => ({
+  type: "message",
+  user: { name: e, uid: t, color: r },
+  content: n,
+  uid: me(),
+  timestamp: new Date().toISOString()
+}), wn = (e, t) => ({
+  messages: [],
+  setMessages: (r) => e({
+    messages: r.map((n) => ({
+      ...n,
+      timestamp: Date.parse(n.timestamp)
+    }))
+  }),
+  addMessage: (r) => e((n) => ({
+    messages: [
+      ...n.messages,
+      { ...r, timestamp: Date.parse(r.timestamp) }
+    ]
+  })),
+  sendMessage: (r, n) => {
+    const o = En({
+      user: r,
+      content: n
+    });
+    o && t().addMessage(o);
+  }
+}), Xt = ({
+  storeName: e,
+  children: t,
+  defaultValue: r = []
+}) => {
+  const { wire: n } = Be("room"), [o] = g.useState(
+    () => Ne(
+      ut(
+        { wire: n, storeName: e, defaultValue: r, noSync: ["sendMessage"] },
+        (...s) => ({
+          ...wn(...s)
+        })
+      )
+    )
+  );
+  return /* @__PURE__ */ T(ur.Provider, { value: o, children: t });
+}, Cn = (e, t) => {
+  const r = be(ur);
+  return Ue(r, e, t || Xe);
+}, xn = () => {
+}, is = (e = xn) => {
+  const t = ge((a) => a.getUser()), [r, n, o] = Cn((a) => [
+    a.messages,
+    a.setMessages,
+    a.sendMessage
+  ]);
+  g.useEffect(() => {
+    r.length && e();
+  }, [r, e]);
+  const s = g.useCallback(
+    (a) => {
+      o(t, a);
+    },
+    [t, o]
+  );
+  return { messages: r, setMessages: n, sendMessage: s };
+}, Wt = ({ children: e, session: t }) => {
+  const r = ge((n) => n.joinSpace);
+  return g.useEffect(() => (r(t), () => {
+    r(null);
+  }), [r, t]), e;
+}, as = ({
+  socket: e,
+  room: t,
+  session: r,
+  items: n = [],
+  messages: o = [],
+  LoadingComponent: s,
+  ...a
+}) => {
+  const [u] = g.useState(t || me()), [l] = g.useState(r || me()), [f] = g.useState(() => ({
+    itemIds: n.map(({ id: c }) => c),
+    items: Object.fromEntries(n.map((c) => [c.id, c]))
+  }));
+  return Be("room") ? /* @__PURE__ */ T(
+    Xt,
+    {
+      storeName: `${l}_messages`,
+      defaultValue: o,
+      children: /* @__PURE__ */ T(Bt, { children: /* @__PURE__ */ T(
+        Yt,
+        {
+          storeName: `${l}_item`,
+          defaultValue: f,
+          children: /* @__PURE__ */ T(Wt, { ...a, session: l })
+        }
+      ) })
+    }
+  ) : /* @__PURE__ */ T(
+    er,
+    {
+      room: u,
+      channel: "room",
+      socket: e,
+      LoadingComponent: s,
+      children: /* @__PURE__ */ T(cr, { storeName: `${u}_users`, children: /* @__PURE__ */ T(
+        Xt,
+        {
+          storeName: `${l}_messages`,
+          defaultValue: o,
+          children: /* @__PURE__ */ T(Bt, { children: /* @__PURE__ */ T(
+            Yt,
+            {
+              storeName: `${l}_item`,
+              defaultValue: f,
+              children: /* @__PURE__ */ T(Wt, { ...a, session: l })
+            }
+          ) })
+        }
+      ) })
+    }
+  );
+}, cs = ({ socket: e, room: t, children: r, LoadingComponent: n }) => {
+  const [o] = g.useState(t || me());
+  return /* @__PURE__ */ T(
+    er,
+    {
+      room: o,
+      channel: "room",
+      socket: e,
+      LoadingComponent: n,
+      children: /* @__PURE__ */ T(cr, { storeName: `${o}_users`, children: r })
+    }
+  );
+}, tt = () => {
+  const e = navigator.userAgent.toLowerCase();
+  return /mac os ?x 10/.test(e);
+}, Rn = () => {
+  const e = document.createElement("iframe");
+  e.src = "#", document.body.appendChild(e);
+  const t = e.contentWindow.document;
+  t.open(), t.write(
+    "<!DOCTYPE html><html><head></head><body><span>a</span></body></html>"
+  ), t.close();
+  const r = t.body.firstElementChild.offsetHeight;
+  return document.body.removeChild(e), r;
+}, In = Rn(), On = 800, Vt = (e, t) => {
+  const r = Object.keys(e).map((n) => Number(n)).find((n) => n !== t);
+  return e[r];
+}, Ft = ([e, t], [r, n]) => {
+  const o = Math.abs(e - r), s = Math.abs(t - n);
+  return Math.hypot(o, s);
+}, de = () => {
+}, Tn = (e) => (t) => {
+  const { event: r } = t;
+  return r.isPropagationStopped() ? null : e(t);
+}, kn = (e) => async (...t) => {
+  try {
+    await e(...t);
+  } catch (r) {
+    console.error(r);
+  }
+};
+class Pn {
+  constructor() {
+    Ot(this, "lastPromise", Promise.resolve(!0));
+  }
+  add(t, ...r) {
+    return new Promise((n, o) => {
+      this.lastPromise = this.lastPromise.then(() => Tn(kn(t))(...r)).then(n).catch(o);
+    });
+  }
+}
+const ie = new Pn(), We = ({
+  children: e,
+  onDrag: t = de,
+  onDragStart: r = de,
+  onDragEnd: n = de,
+  onPan: o = de,
+  onTap: s = de,
+  onLongTap: a = de,
+  onDoubleTap: u = de,
+  onZoom: l,
+  mainAction: f = "drag"
+}) => {
+  const d = g.useRef(null), c = g.useRef({
+    moving: !1,
+    pointers: {},
+    mainPointer: void 0
+  }), b = (R) => {
+    const {
+      deltaX: x,
+      deltaY: y,
+      clientX: p,
+      clientY: h,
+      deltaMode: v,
+      ctrlKey: C,
+      altKey: D,
+      metaKey: k,
+      target: P
+    } = R;
+    if (!(D || C && !tt()))
+      if (tt() && !C)
+        ie.add(o, {
+          deltaX: -2 * x,
+          deltaY: -2 * y,
+          button: 1,
+          ctrlKey: C,
+          metaKey: k,
+          target: P,
+          event: R
+        });
+      else {
+        if (l === void 0 || !y)
+          return;
+        let M = y;
+        switch (v) {
+          case 1:
+            M *= In;
+            break;
+          case 2:
+            M *= On;
+            break;
+        }
+        tt() && (M *= 2), ie.add(l, { scale: M, clientX: p, clientY: h, event: R });
+      }
+  }, _ = (R) => {
+    const {
+      target: x,
+      button: y,
+      clientX: p,
+      clientY: h,
+      pointerId: v,
+      altKey: C,
+      ctrlKey: D,
+      metaKey: k,
+      isPrimary: P
+    } = R;
+    if (c.current.pointers[v] = { clientX: p, clientY: h }, P && (c.current.mainPointer = void 0), c.current.mainPointer !== void 0) {
+      if (c.current.mainPointer !== v)
+        try {
+          const { clientX: M, clientY: N } = Vt(
+            c.current.pointers,
+            v
+          ), F = (M + p) / 2, K = (N + h) / 2, O = Ft(
+            [M, N],
+            [p, h]
+          );
+          Object.assign(c.current, {
+            pressed: !0,
+            moving: !1,
+            gestureStart: !1,
+            startX: p,
+            startY: h,
+            prevX: F,
+            prevY: K,
+            startDistance: O,
+            prevDistance: O
+          });
+        } catch (M) {
+          console.log("Error while getting other pointer. Ignoring", M), c.current.mainPointer;
+        }
+      return;
+    }
+    c.current.mainPointer = v, Object.assign(c.current, {
+      pressed: !0,
+      moving: !1,
+      gestureStart: !1,
+      startX: p,
+      startY: h,
+      prevX: p,
+      prevY: h,
+      currentButton: y,
+      pointerDownEvent: R,
+      target: x,
+      timeStart: Date.now(),
+      longTapTimeout: setTimeout(async () => {
+        c.current.noTap = !0, ie.add(a, {
+          clientX: p,
+          clientY: h,
+          altKey: C,
+          ctrlKey: D,
+          metaKey: k,
+          target: x,
+          event: R
+        });
+      }, 750)
+    });
+    try {
+      x.setPointerCapture(v);
+    } catch (M) {
+      console.log("Fail to capture pointer", M);
+    }
+  }, w = (R) => {
+    if (c.current.pressed) {
+      const {
+        pointerId: x,
+        clientX: y,
+        clientY: p,
+        altKey: h,
+        ctrlKey: v,
+        metaKey: C,
+        buttons: D,
+        pointerType: k
+      } = R;
+      c.current.pointers[x] = {
+        clientX: y,
+        clientY: p
+      }, c.current.moving = !0;
+      const P = Object.keys(c.current.pointers).length === 2;
+      let M, N, F;
+      if (P) {
+        const { clientX: A, clientY: U } = Vt(
+          c.current.pointers,
+          x
+        );
+        M = (A + y) / 2, N = (U + p) / 2, F = Ft(
+          [A, U],
+          [y, p]
+        );
+      } else
+        M = y, N = p;
+      let K = h || v || C || D !== 1;
+      f !== "drag" && (K = !K);
+      const O = k !== "touch" ? !K : !P, $ = k !== "touch" ? K : P;
+      if (O) {
+        c.current.gestureStart || (d.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout), ie.add(r, {
+          deltaX: 0,
+          deltaY: 0,
+          startX: c.current.startX,
+          startY: c.current.startY,
+          clientX: c.current.startX,
+          clientY: c.current.startY,
+          distanceX: 0,
+          distanceY: 0,
+          button: c.current.currentButton,
+          altKey: h,
+          ctrlKey: v,
+          metaKey: C,
+          target: c.current.target,
+          event: c.current.pointerDownEvent
+        }));
+        const A = M - c.current.prevX, U = N - c.current.prevY, Y = M - c.current.startX, W = N - c.current.startY;
+        ie.add(t, {
+          deltaX: A,
+          deltaY: U,
+          startX: c.current.startX,
+          startY: c.current.startY,
+          clientX: M,
+          clientY: N,
+          distanceX: Y,
+          distanceY: W,
+          button: c.current.currentButton,
+          altKey: h,
+          ctrlKey: v,
+          metaKey: C,
+          target: c.current.target,
+          event: R
+        });
+      }
+      if ($) {
+        c.current.gestureStart || (d.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout));
+        const A = M - c.current.prevX, U = N - c.current.prevY, { target: Y } = c.current;
+        if (ie.add(o, {
+          deltaX: A,
+          deltaY: U,
+          button: c.current.currentButton,
+          altKey: h,
+          ctrlKey: v,
+          metaKey: C,
+          target: Y,
+          event: R
+        }), F !== c.current.prevDistance && l) {
+          const W = c.current.prevDistance - F;
+          Math.abs(W) > 0 && (ie.add(l, {
+            scale: W * 3,
+            clientX: M,
+            clientY: N,
+            event: R
+          }), c.current.prevDistance = F);
+        }
+      }
+      c.current.prevX = M, c.current.prevY = N;
+    }
+  }, m = (R) => {
+    const { clientX: x, clientY: y, altKey: p, ctrlKey: h, metaKey: v, target: C, pointerId: D } = R;
+    if (c.current.pointers[D] && (delete c.current.pointers[D], c.current.mainPointer === D)) {
+      for (; Object.keys(c.current.pointers).length > 0; ) {
+        c.current.mainPointer = Number(
+          Object.keys(c.current.pointers)[0]
+        );
+        try {
+          c.current.target.setPointerCapture(c.current.mainPointer);
+          return;
+        } catch (k) {
+          console.log("Fails to set pointer capture", k), c.current.mainPointer = void 0, delete c.current.pointers[Object.keys(c.current.pointers)[0]];
+        }
+      }
+      if (c.current.mainPointer = void 0, c.current.pressed = !1, clearTimeout(c.current.longTapTimeout), c.current.moving)
+        c.current.moving = !1, ie.add(n, {
+          deltaX: x - c.current.prevX,
+          deltaY: y - c.current.prevY,
+          startX: c.current.startX,
+          startY: c.current.startY,
+          clientX: x,
+          clientY: y,
+          distanceX: x - c.current.startX,
+          distanceY: y - c.current.startY,
+          button: c.current.currentButton,
+          altKey: p,
+          ctrlKey: h,
+          metaKey: v,
+          event: R
+        }), d.current.style.cursor = "auto";
+      else {
+        const k = Date.now();
+        c.current.noTap ? c.current.noTap = !1 : c.current.timeStart - k < 300 && ie.add(s, {
+          clientX: x,
+          clientY: y,
+          altKey: p,
+          ctrlKey: h,
+          metaKey: v,
+          target: C,
+          event: R
+        });
+      }
+    }
+  };
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      onWheel: b,
+      onPointerDown: _,
+      onPointerMove: w,
+      onPointerUp: m,
+      onPointerOut: m,
+      onPointerLeave: m,
+      onPointerCancel: m,
+      onDoubleClick: (R) => {
+        const { clientX: x, clientY: y, altKey: p, ctrlKey: h, metaKey: v, target: C } = R;
+        ie.add(u, {
+          clientX: x,
+          clientY: y,
+          altKey: p,
+          ctrlKey: h,
+          metaKey: v,
+          target: C,
+          event: R
+        });
+      },
+      style: { touchAction: "none" },
+      ref: d,
+      children: e
+    }
+  );
+}, rt = ({ onResize: e, ...t }) => {
+  const [r] = Z((o) => [o.getBoardState]);
+  return /* @__PURE__ */ T(We, { 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 Mn = { data: "" }, jn = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || Mn, Dn = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, $n = /\/\*[^]*?\*\/|  +/g, Kt = /\n+/g, fe = (e, t) => {
+  let 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 = {}, lr = (e) => {
+  if (typeof e == "object") {
+    let t = "";
+    for (let r in e)
+      t += r + lr(e[r]);
+    return t;
+  }
+  return e;
+}, An = (e, t, r, n, o) => {
+  let s = lr(e), a = ce[s] || (ce[s] = ((l) => {
+    let f = 0, d = 11;
+    for (; f < l.length; )
+      d = 101 * d + l.charCodeAt(f++) >>> 0;
+    return "go" + d;
+  })(s));
+  if (!ce[a]) {
+    let l = s !== e ? e : ((f) => {
+      let d, c, b = [{}];
+      for (; d = Dn.exec(f.replace($n, "")); )
+        d[4] ? b.shift() : d[3] ? (c = d[3].replace(Kt, " ").trim(), b.unshift(b[0][c] = b[0][c] || {})) : b[0][d[1]] = d[2].replace(Kt, " ").trim();
+      return b[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, f, d, c) => {
+    c ? f.data = f.data.replace(c, l) : f.data.indexOf(l) === -1 && (f.data = d ? l + f.data : f.data + l);
+  })(ce[a], t, n, u), a;
+}, zn = (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 H(e) {
+  let t = this || {}, r = e.call ? e(t.p) : e;
+  return An(r.unshift ? r.raw ? zn(r, [].slice.call(arguments, 1), t.p) : r.reduce((n, o) => Object.assign(n, o && o.call ? o(t.p) : o), {}) : r, jn(t.target), t.g, t.o, t.k);
+}
+H.bind({ g: 1 });
+H.bind({ k: 1 });
+function Ln(e, t, r, n) {
+  fe.p = t;
+}
+var Yn = 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 Bn = H`
+  display: inline-block;
+  transition: transform 150ms;
+  user-select: none;
+  padding: 2px;
+  box-sizing: border-box;
+`, Nn = H`
+  border: 2px dashed #db5034;
+  padding: 0px;
+  cursor: pointer;
+`, xe = H`
+  position: absolute;
+  width: 0px;
+  height: 0px;
+`, Un = H`
+  top: 0;
+  left: 0;
+`, Xn = H`
+  top: 0;
+  right: 0;
+`, Wn = H`
+  bottom: 0;
+  left: 0;
+`, Vn = H`
+  bottom: 0;
+  right: 0;
+`, Fn = H`
+  top: 50%;
+  left: 50%;
+`, nt = H`
+  position: absolute;
+
+  width: 10px;
+  height: 10px;
+  border: 2px solid #db5034;
+  background-color: #db5034;
+  cursor: move;
+`, Kn = H`
+  cursor: ew-resize;
+  right: -6px;
+  top: calc(50% - 5px);
+`, Hn = H`
+  cursor: ns-resize;
+  bottom: -6px;
+  left: calc(50% - 5px);
+`, qn = H`
+  cursor: nwse-resize;
+  bottom: -6px;
+  right: -6px;
+`, Gn = ({ onReload: e }) => /* @__PURE__ */ ue(
+  "div",
+  {
+    className: `syncboard-error-item ${H({
+      width: "100px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      textAlign: "center",
+      color: "red"
+    })}`,
+    children: [
+      "Sorry, this item seems broken.",
+      /* @__PURE__ */ T("button", { onClick: e, children: "Reload it" })
+    ]
+  }
+);
+class Jn extends g.Component {
+  constructor(t) {
+    super(t), this.state = { hasError: !1, itemId: t.itemId }, this.onReload = this.onReload.bind(this);
+  }
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  componentDidCatch(t) {
+    console.error(
+      `Error for item ${this.state.itemId}`,
+      t,
+      this.props.state
+    );
+  }
+  onReload() {
+    this.setState({ hasError: !1 });
+  }
+  render() {
+    const { ErrorComponent: t } = this.props;
+    return this.state.hasError ? /* @__PURE__ */ T(t, { onReload: this.onReload }) : this.props.children;
+  }
+}
+const Zn = (e) => {
+  e.target.className = "";
+}, Qn = ({
+  width: e,
+  height: t,
+  actualWidth: r,
+  actualHeight: n,
+  prevState: o,
+  keepRatio: s
+}) => {
+  let { width: a, height: u } = o;
+  if ([a, u] = [
+    parseFloat(a),
+    parseFloat(u)
+  ], (!a || Number.isNaN(Number(a))) && (a = r), (!u || Number.isNaN(Number(u))) && (u = n), s) {
+    const l = a / u;
+    return {
+      ...o,
+      width: (a + e).toFixed(1),
+      height: (u + t / l).toFixed(1)
+    };
+  }
+  return {
+    ...o,
+    width: (a + e).toFixed(1),
+    height: (u + t).toFixed(1)
+  };
+}, eo = {
+  w: !0,
+  h: !0,
+  b: !0
+}, to = ({
+  setState: e,
+  state: { type: t, rotation: r = 0, id: n, locked: o, extraClasses: s, ...a } = {},
+  animate: u = "hvr-pop",
+  isSelected: l,
+  itemMap: f,
+  showResizeHandle: d = !0
+}) => {
+  var v;
+  const c = g.useRef(null), {
+    component: b = () => null,
+    resizeDirections: _ = eo,
+    resize: w = Qn
+  } = f[t], m = g.useCallback(
+    (C) => e(n, C),
+    [e, n]
+  );
+  g.useEffect(() => {
+    c.current.className = u;
+  }, [u]);
+  const E = ["item", n, Bn];
+  o && E.push("locked"), l && (E.push("selected"), E.push(Nn));
+  const R = E.join(" "), x = ({ width: C = 0, height: D = 0, keepRatio: k }) => {
+    m((P) => {
+      const { offsetWidth: M, offsetHeight: N } = c.current;
+      return w({
+        prevState: P,
+        width: C,
+        height: D,
+        actualHeight: N,
+        actualWidth: M,
+        keepRatio: k
+      });
+    });
+  }, y = ({ width: C }) => {
+    x({ width: C });
+  }, p = ({ height: C }) => {
+    x({ height: C });
+  }, h = ({ width: C }) => {
+    x({ height: C, width: C, keepRatio: !0 });
+  };
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      style: { transform: `rotate(${r}deg` },
+      "data-id": n,
+      className: R,
+      children: /* @__PURE__ */ ue(
+        "div",
+        {
+          style: { display: "flex" },
+          ref: c,
+          onAnimationEnd: Zn,
+          onKeyDown: (C) => C.stopPropagation(),
+          onKeyUp: (C) => C.stopPropagation(),
+          children: [
+            /* @__PURE__ */ T(
+              Jn,
+              {
+                itemId: n,
+                state: a,
+                ErrorComponent: ((v = f == null ? void 0 : f.error) == null ? void 0 : v.component) || Gn,
+                children: /* @__PURE__ */ T(b, { ...a, id: n, setState: m })
+              }
+            ),
+            /* @__PURE__ */ T("div", { className: `corner ${xe} ${Un}` }),
+            /* @__PURE__ */ T("div", { className: `corner ${xe} ${Xn}` }),
+            /* @__PURE__ */ T("div", { className: `corner ${xe} ${Vn}` }),
+            /* @__PURE__ */ T("div", { className: `corner ${xe} ${Wn}` }),
+            /* @__PURE__ */ T("div", { className: `${xe} ${Fn}` }),
+            d && /* @__PURE__ */ ue(Qt, { children: [
+              _.b && /* @__PURE__ */ T(
+                rt,
+                {
+                  className: `${nt} ${qn}`,
+                  onResize: h
+                }
+              ),
+              _.h && /* @__PURE__ */ T(
+                rt,
+                {
+                  className: `${nt} ${Hn}`,
+                  onResize: p
+                }
+              ),
+              _.w && /* @__PURE__ */ T(
+                rt,
+                {
+                  className: `${nt} ${Kn}`,
+                  onResize: y
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}, ro = Zt(
+  to,
+  ({
+    state: e,
+    setState: t,
+    isSelected: r,
+    showResizeHandle: n
+  }, {
+    state: o,
+    setState: s,
+    isSelected: a,
+    showResizeHandle: u
+  }) => r === a && n === u && t === s && Yn(e, o)
+), no = (e) => e, oo = ({ state: e = {}, getCurrentUser: t, className: r, ...n }) => {
+  if (!n.itemMap[e.type])
+    return null;
+  const { stateHook: o = no } = n.itemMap[e.type], {
+    x: s = 0,
+    y: a = 0,
+    layer: u = 0,
+    moving: l,
+    ...f
+  } = o(e, { getCurrentUser: t }), d = (u + 4) * 10 + 100 + (l ? 5 : 0);
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      className: r,
+      style: {
+        transform: `translate(${s}px, ${a}px)`,
+        zIndex: d
+      },
+      children: /* @__PURE__ */ T(
+        ro,
+        {
+          ...n,
+          showResizeHandle: n.isSelected && n.showResizeHandle,
+          state: f
+        }
+      )
+    }
+  );
+}, so = Zt(oo), io = () => {
+  const { updateItem: e } = pt(), [t, r] = se((f) => [
+    f.itemIds,
+    f.items
+  ]), [n, o, s, a] = Z(
+    (f) => [
+      f.config.boardSize,
+      f.config.showResizeHandle,
+      f.config.itemTemplates,
+      f.selection
+    ]
+  ), [u] = ge((f) => [f.getUser]), l = H({
+    position: "absolute",
+    top: `${n / 2}px`,
+    left: `${n / 2}px`,
+    display: "inline-block"
+  });
+  return t.map((f) => /* @__PURE__ */ T(
+    so,
+    {
+      state: r[f],
+      setState: e,
+      isSelected: a.includes(f),
+      itemMap: s,
+      boardSize: n,
+      getCurrentUser: u,
+      showResizeHandle: o,
+      className: l
+    },
+    f
+  ));
+}, ao = H({
+  zIndex: 210,
+  position: "absolute",
+  backgroundColor: "hsla(0, 40%, 50%, 10%)",
+  border: "2px solid hsl(0, 55%, 40%)"
+}), co = (e, t) => {
+  const r = t.getElementsByClassName("selector");
+  if (!r.length)
+    return [];
+  const n = r[0];
+  return Array.from(t.getElementsByClassName("item")).filter((o) => {
+    const s = ke(o), a = e[s];
+    return !a || a.locked ? !1 : en(o, n);
+  }).map((o) => ke(o));
+}, uo = ({ children: e, moveFirst: t }) => {
+  const [
+    r,
+    n,
+    o,
+    s,
+    a,
+    u,
+    l
+  ] = Z((h) => [
+    h.getSelection,
+    h.clear,
+    h.setSelection,
+    h.select,
+    h.getConfiguration,
+    h.getBoardState,
+    h.updateBoardState
+  ]), { findElementUnderPointer: f } = pt(), [d] = se((h) => [h.getItems]), [c, b] = g.useState({}), [, _] = g.useTransition(), w = g.useRef(null), m = g.useRef({
+    moving: !1
+  });
+  return g.useEffect(() => (n(), () => {
+    n();
+  }), [n]), g.useEffect(() => {
+    if (m.current.moving) {
+      const h = d(), { boardWrapper: v } = a(), C = co(h, v);
+      _(() => {
+        o(C);
+      });
+    }
+  }, [a, d, c, o]), /* @__PURE__ */ T(
+    We,
+    {
+      onDragStart: async (h) => {
+        await f(h) || (m.current.moving = !0, _(() => {
+          l({ selecting: !0 });
+        }), w.current.style.cursor = "crosshair");
+      },
+      onDrag: ({ distanceY: h, distanceX: v, startX: C, startY: D }) => {
+        if (m.current.moving) {
+          const { top: k, left: P } = w.current.getBoundingClientRect(), { scale: M } = u(), N = (C - P) / M, F = (D - k) / M, K = v / M, O = h / M;
+          K > 0 ? (m.current.left = N, m.current.width = K) : (m.current.left = N + K, m.current.width = -K), O > 0 ? (m.current.top = F, m.current.height = O) : (m.current.top = F + O, m.current.height = -O), b({ ...m.current, moving: !0 });
+        }
+      },
+      onDragEnd: () => {
+        m.current.moving && (_(() => {
+          l({ selecting: !1 });
+        }), m.current.moving = !1, b({ moving: !1 }), w.current.style.cursor = "auto");
+      },
+      onTap: (h) => {
+        const { target: v, ctrlKey: C, metaKey: D } = h, k = f(h);
+        if (!k && Te(v, "board"))
+          n();
+        else {
+          const P = ke(k);
+          if (!P) {
+            n();
+            return;
+          }
+          const M = r();
+          k && !M.includes(P) && (C || D ? s([P]) : o([P]));
+        }
+      },
+      onLongTap: ({ target: h }) => {
+        const v = Te(h, "item");
+        if (v) {
+          const C = ke(v);
+          o([C]);
+        }
+      },
+      mainAction: t ? "pan" : "drag",
+      children: /* @__PURE__ */ ue("div", { ref: w, children: [
+        c.moving && /* @__PURE__ */ T(
+          "div",
+          {
+            style: {
+              transform: `translate(${c.left}px, ${c.top}px)`,
+              height: `${c.height}px`,
+              width: `${c.width}px`
+            },
+            className: `selector ${ao}`
+          }
+        ),
+        e
+      ] })
+    }
+  );
+};
+function lo(e = !1) {
+  const t = Ie(e), r = Jt(() => t.current, []);
+  return Me(() => (t.current = !0, () => {
+    t.current = !1;
+  }), []), r;
+}
+function fo(e, ...t) {
+  e && e.addEventListener && e.addEventListener(...t);
+}
+function po(e, ...t) {
+  e && e.removeEventListener && e.removeEventListener(...t);
+}
+const mo = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
+function pe(e, ...t) {
+  const r = lo(), n = lt(t[1]), o = ct(
+    () => (
+      // as some event listeners designed to be used through `this`
+      // it is better to make listener a conventional function as it
+      // infers call context
+      // eslint-disable-next-line func-names
+      function(...s) {
+        r() && (typeof n.current == "function" ? n.current.apply(this, s) : typeof n.current.handleEvent == "function" && n.current.handleEvent.apply(this, s));
+      }
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  Me(() => {
+    const s = e && mo(e, "current") ? e.current : e;
+    if (!s)
+      return;
+    const a = t.slice(2);
+    return fo(s, t[0], o, ...a), () => po(s, t[0], o, ...a);
+  }, [e, t[0]]);
+}
+const go = ({ children: e }) => {
+  const { moveItems: t, placeItems: r, findElementUnderPointer: n } = pt(), [o, s, a, u, l] = Z((E) => [
+    E.select,
+    E.setSelection,
+    E.getSelection,
+    E.getBoardState,
+    E.updateBoardState
+  ]), [f] = se((E) => [E.getBoardConfig]), d = g.useRef({}), c = g.useRef({
+    items: []
+  }), b = (E) => {
+    const { ctrlKey: R, metaKey: x, event: y } = E, p = n(E);
+    if (p) {
+      y.stopPropagation();
+      const h = a();
+      c.current.items = h;
+      const v = ke(p);
+      h.includes(v) || (R || x ? (c.current.items = [...h, v], o([v])) : (c.current.items = [v], s([v]))), Object.assign(d.current, {
+        moving: !0,
+        remainX: 0,
+        remainY: 0
+      });
+    }
+  }, _ = ({ deltaX: E, deltaY: R, event: x }) => {
+    if (d.current.moving) {
+      x.stopPropagation();
+      const { scale: y } = u(), p = d.current.remainX + E / y, h = d.current.remainY + R / y;
+      t(
+        c.current.items,
+        {
+          x: p,
+          y: h
+        },
+        !0
+      ), l({ movingItems: !0 });
+    }
+  }, w = () => {
+    if (d.current.moving) {
+      const { gridSize: E = 1 } = f(), R = E || 1;
+      d.current = { moving: !1 }, r(c.current.items, {
+        type: "grid",
+        size: R
+      }), l({ movingItems: !1 });
+    }
+  };
+  return pe(document, "keydown", (E) => {
+    if (["INPUT", "TEXTAREA"].includes(E.target.tagName))
+      return;
+    const R = a();
+    if (R.length) {
+      const { gridSize: x = 1 } = f();
+      let y = 0, p = 0;
+      switch (E.key) {
+        case "ArrowLeft":
+          y = -10;
+          break;
+        case "ArrowRight":
+          y = 10;
+          break;
+        case "ArrowUp":
+          p = -10;
+          break;
+        case "ArrowDown":
+          p = 10;
+          break;
+      }
+      (y || p) && (E.shiftKey && (y *= 5, p *= 5), (E.ctrlKey || E.altKey || E.metaKey) && (y /= 10, p /= 10), t(
+        R,
+        {
+          x: y,
+          y: p
+        },
+        !0
+      ), r(R, {
+        type: "grid",
+        size: x || 1
+      }), E.preventDefault());
+    }
+  }), /* @__PURE__ */ T(We, { onDragStart: b, onDrag: _, onDragEnd: w, children: e });
+}, ho = (e) => {
+  const t = g.useRef({ hover: !1, x: 0, y: 0 });
+  return pe(e.current, "mousemove", (n) => {
+    const { clientX: o, clientY: s } = n;
+    t.current.x = o, t.current.y = s;
+  }), pe(e.current, "mouseenter", () => {
+    t.current.hover = !0;
+  }), pe(e.current, "mouseleave", () => {
+    t.current.hover = !1;
+  }), g.useCallback(() => t.current, []);
+}, vo = [...Array(5).keys()].map((e) => `Digit${e + 1}`), yo = () => {
+  const [e, t] = g.useState({}), [r, n] = Z((o) => [
+    o.getBoardState,
+    o.updateBoardState
+  ]);
+  return pe(document, "keydown", (o) => {
+    if (!["INPUT", "TEXTAREA"].includes(o.target.tagName) && vo.includes(o.code)) {
+      const s = o.code, { translateX: a, translateY: u, scale: l } = r();
+      o.altKey || o.metaKey || o.ctrlKey ? t((f) => ({
+        ...f,
+        [s]: { translateX: a, translateY: u, scale: l }
+      })) : e[s] && n(e[s]), o.preventDefault();
+    }
+  }), null;
+}, So = ({ children: e, moveFirst: t = !1 }) => {
+  const r = g.useRef(null), [
+    n,
+    o,
+    s,
+    a,
+    u
+  ] = Z((p) => [
+    {
+      translateX: p.boardState.translateX,
+      translateY: p.boardState.translateY,
+      scale: p.boardState.scale
+    },
+    p.config.itemExtent,
+    p.getConfiguration,
+    p.updateBoardState,
+    p.getSelection
+  ]), { setDim: l, zoomToCenter: f, zoomToExtent: d } = dt(), [c, b] = g.useState(!1), _ = g.useRef({}), w = ho(r);
+  yo();
+  const m = g.useCallback(() => {
+    const { itemExtent: p } = s();
+    d(p);
+  }, [s, d]);
+  g.useEffect(() => {
+    !c && o.left && (m(), b(!0));
+  }, [m, c, o]);
+  const E = ({ clientX: p, clientY: h, scale: v }) => {
+    f(1 - v / 500, { x: p, y: h }), clearTimeout(_.current.zoom), _.current.zoom = setTimeout(() => {
+      a({ zooming: !1 });
+    }, 200), a({ zooming: !0 });
+  }, R = ({ deltaX: p, deltaY: h }) => {
+    l((v) => ({
+      ...v,
+      translateX: v.translateX + p,
+      translateY: v.translateY + h
+    })), clearTimeout(_.current.pan), _.current.pan = setTimeout(() => {
+      a({ panning: !1 });
+    }, 200), a({ panning: !0 });
+  }, x = (p) => {
+    if (["INPUT", "TEXTAREA"].includes(p.target.tagName))
+      return;
+    let h = 0, v = 0, C = 1;
+    switch (p.key) {
+      case "ArrowLeft":
+        h = -10;
+        break;
+      case "ArrowRight":
+        h = 10;
+        break;
+      case "ArrowUp":
+        v = -10;
+        break;
+      case "ArrowDown":
+        v = 10;
+        break;
+      case "PageUp":
+        C = 1.2;
+        break;
+      case "PageDown":
+        C = 0.8;
+        break;
+    }
+    if (h || v || C !== 1) {
+      const D = u();
+      if (C === 1 && D.length)
+        return;
+      p.shiftKey && (h *= 5, v *= 5), (p.ctrlKey || p.altKey || p.metaKey) && (h /= 5, v /= 5), l((k) => ({
+        ...k,
+        translateY: k.translateY + v,
+        translateX: k.translateX + h
+      })), f(C), p.preventDefault();
+    }
+    p.key === " " && !p.repeat && w().hover && f(3, w());
+  }, y = (p) => {
+    ["INPUT", "TEXTAREA"].includes(p.target.tagName) || p.key === " " && w().hover && f(1 / 3, w());
+  };
+  return pe(document, "keydown", x), pe(document, "keyup", y), /* @__PURE__ */ T(
+    We,
+    {
+      onPan: R,
+      onZoom: E,
+      mainAction: t ? "pan" : "drag",
+      children: /* @__PURE__ */ T(
+        "div",
+        {
+          style: {
+            display: "inline-block",
+            transformOrigin: "top left",
+            transform: `translate(${n.translateX}px, ${n.translateY}px) scale(${n.scale})`
+          },
+          className: `board-pane${n.scale < 0.5 ? " board-pane__far" : ""}`,
+          ref: r,
+          children: e
+        }
+      )
+    }
+  );
+}, _o = H({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  zIndex: 210,
+  backgroundColor: "hsla(0, 40%, 50%, 0%)",
+  border: "2px dashed hsl(20, 55%, 40%)",
+  pointerEvents: "none"
+}), bo = () => {
+  const [
+    e,
+    t,
+    r,
+    n,
+    o,
+    { translateX: s, translateY: a, scale: u }
+  ] = Z((c) => [
+    c.selection,
+    c.getSelection,
+    c.selectionBox,
+    c.setSelectionBox,
+    c.getConfiguration,
+    {
+      translateX: c.boardState.translateX,
+      translateY: c.boardState.translateY,
+      scale: c.boardState.scale
+    }
+  ]), [l] = se((c) => [c.items]), f = g.useCallback(() => {
+    const c = t(), { boardWrapperRect: b, boardWrapper: _ } = o();
+    if (c.length === 0) {
+      n(null);
+      return;
+    }
+    const w = nr(c, _);
+    if (!w) {
+      n(null);
+      return;
+    }
+    const { left: m, top: E, width: R, height: x } = w, y = {
+      left: m - b.left,
+      top: E - b.top,
+      height: x,
+      width: R
+    };
+    n(y);
+  }, [o, t, n]), d = ft(f, [f], 300);
+  return g.useEffect(() => {
+    f(), d();
+  }, [
+    e,
+    l,
+    s,
+    a,
+    u,
+    f,
+    d
+  ]), !r || e.length < 2 ? null : /* @__PURE__ */ T(
+    "div",
+    {
+      style: {
+        transform: `translate(${r.left}px, ${r.top}px)`,
+        height: `${r.height}px`,
+        width: `${r.width}px`
+      },
+      className: `selection ${_o}`
+    }
+  );
+}, Eo = () => {
+  const [e] = Z((t) => [t.boardState.movingItems]);
+  return e ? null : /* @__PURE__ */ T(bo, {});
+}, wo = typeof window < "u" && typeof navigator < "u" && typeof document < "u";
+let Le;
+function Co() {
+  if (!wo)
+    return;
+  if (Le)
+    return Le;
+  const e = /* @__PURE__ */ new Map(), t = new ResizeObserver((r) => {
+    r.forEach((n) => {
+      var o;
+      return (o = e.get(n.target)) == null ? void 0 : o.forEach((s) => setTimeout(() => s(n), 0));
+    });
+  });
+  return Le = {
+    observer: t,
+    subscribe: (r, n) => {
+      let o = e.get(r);
+      o || (o = /* @__PURE__ */ new Set(), e.set(r, o), t.observe(r)), o.add(n);
+    },
+    unsubscribe: (r, n) => {
+      const o = e.get(r);
+      o && (o.delete(n), o.size || (e.delete(r), t.unobserve(r)));
+    }
+  }, Le;
+}
+function xo(e, t, r = !0) {
+  const n = r && Co(), o = lt(t), s = e && "current" in e ? e.current : e;
+  Me(() => {
+    const a = e && "current" in e ? e.current : e;
+    if (!n || !a)
+      return;
+    let u = !0;
+    const l = (...f) => {
+      u && o.current(...f);
+    };
+    return n.subscribe(a, l), () => {
+      u = !1, n.unsubscribe(a, l);
+    };
+  }, [s, n]);
+}
+function Ht(e, t, r) {
+  return Math.min(Math.max(e, r), t);
+}
+class Ro extends Error {
+  constructor(t) {
+    super(`Failed to parse color: "${t}"`);
+  }
+}
+var Re = Ro;
+function Io(e) {
+  if (typeof e != "string")
+    throw new Re(e);
+  if (e.trim().toLowerCase() === "transparent")
+    return [0, 0, 0, 0];
+  let t = e.trim();
+  t = $o.test(e) ? ko(e) : e;
+  const r = Po.exec(t);
+  if (r) {
+    const a = Array.from(r).slice(1);
+    return [...a.slice(0, 3).map((u) => parseInt(Pe(u, 2), 16)), parseInt(Pe(a[3] || "f", 2), 16) / 255];
+  }
+  const n = Mo.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 = jo.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 = Do.exec(t);
+  if (s) {
+    const [a, u, l, f] = Array.from(s).slice(1).map(parseFloat);
+    if (Ht(0, 100, u) !== u)
+      throw new Re(e);
+    if (Ht(0, 100, l) !== l)
+      throw new Re(e);
+    return [...Ao(a, u, l), Number.isNaN(f) ? 1 : f];
+  }
+  throw new Re(e);
+}
+function Oo(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), To = "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);
+  let o = "";
+  for (let s = 0; s < 6 - n.length; s++)
+    o += "0";
+  return e[r] = `${o}${n}`, e;
+}, {});
+function ko(e) {
+  const t = e.toLowerCase().trim(), r = To[Oo(t)];
+  if (!r)
+    throw new Re(e);
+  return `#${r}`;
+}
+const Pe = (e, t) => Array.from(Array(t)).map(() => e).join(""), Po = new RegExp(`^#${Pe("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), Mo = new RegExp(`^#${Pe("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), jo = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Pe(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), Do = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, $o = /^[a-z]+$/i, Gt = (e) => Math.round(e * 255), Ao = (e, t, r) => {
+  let n = r / 100;
+  if (t === 0)
+    return [n, n, n].map(Gt);
+  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, f = 0;
+  o >= 0 && o < 1 ? (u = s, l = a) : o >= 1 && o < 2 ? (u = a, l = s) : o >= 2 && o < 3 ? (l = s, f = a) : o >= 3 && o < 4 ? (l = a, f = s) : o >= 4 && o < 5 ? (u = a, f = s) : o >= 5 && o < 6 && (u = s, f = a);
+  const d = n - s / 2, c = u + d, b = l + d, _ = f + d;
+  return [c, b, _].map(Gt);
+};
+function zo(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] = Io(e);
+  return 0.2126 * t(r) + 0.7152 * t(n) + 0.0722 * t(o);
+}
+function Lo(e) {
+  return zo(e) > 0.179;
+}
+const Yo = H({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  zIndex: 210,
+  pointerEvents: "none"
+}), Bo = H({
+  fontWeight: "bold",
+  padding: "0 0.5em",
+  borderRadius: "2px",
+  maxWidth: "5em",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  marginLeft: "-0.5em",
+  marginTop: "1.7em",
+  whitespace: "nowrap",
+  pointerEvents: "none"
+}), No = ({ color: e = "#666", size: t = 40, text: r }) => {
+  const n = Lo(e) ? "#222" : "#EEE";
+  return /* @__PURE__ */ ue("div", { className: Yo, children: [
+    /* @__PURE__ */ ue(
+      "svg",
+      {
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "1064.7701 445.5539 419.8101 717.0565",
+        width: t,
+        height: t,
+        children: [
+          /* @__PURE__ */ T(
+            "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",
+              style: {
+                fill: n
+              }
+            }
+          ),
+          /* @__PURE__ */ T(
+            "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",
+              style: {
+                fill: "white",
+                stroke: "#111",
+                strokeWidth: 20
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ T(
+      "div",
+      {
+        style: {
+          color: n,
+          backgroundColor: e
+        },
+        className: Bo,
+        children: r
+      }
+    )
+  ] });
+}, Uo = g.memo(No), Xo = H({
+  top: 0,
+  left: 0,
+  zIndex: 210,
+  position: "fixed",
+  pointerEvents: "none"
+}), Wo = ({ pos: e, ...t }) => /* @__PURE__ */ T(
+  "div",
+  {
+    className: Xo,
+    style: { transform: `translate(${e.x - 5}px, ${e.y - 3}px)` },
+    children: /* @__PURE__ */ T(Uo, { ...t })
+  }
+), Vo = () => {
+  const [e, t, r, n] = ge(
+    (s) => [
+      s.getUser(),
+      s.getLocalUsers(),
+      s.cursors,
+      s.users
+    ]
+  ), o = t.reduce((s, a) => (a.id !== e.id && r[a.id] && (s[a.id] = r[a.id]), s), {});
+  return /* @__PURE__ */ T(Qt, { children: Object.entries(o).map(([s, a]) => /* @__PURE__ */ T(
+    Wo,
+    {
+      pos: a,
+      text: n[s].name,
+      color: n[s].color
+    },
+    s
+  )) });
+}, Fo = ({ children: e }) => {
+  const t = ge((l) => l.getUser()), [r, n] = ge((l) => [
+    l.moveCursor,
+    l.removeCursor
+  ]), [o, s] = Z((l) => [
+    l.getConfiguration,
+    l.getBoardState
+  ]);
+  return /* @__PURE__ */ ue("div", { onPointerMove: ({ clientX: l, clientY: f }) => {
+    const { scale: d, translateX: c, translateY: b } = s(), {
+      boardWrapperRect: { left: _, top: w }
+    } = o(), m = {
+      x: (l - _ - c) / d,
+      y: (f - w - b) / d
+    };
+    r(t.id, m);
+  }, onPointerLeave: () => {
+    n(t.id);
+  }, children: [
+    e,
+    /* @__PURE__ */ T(Vo, {})
+  ] });
+}, Ko = ({ children: e }) => e, Ho = {
+  overflow: "hidden",
+  position: "absolute",
+  inset: 0
+}, us = ({
+  moveFirst: e = !0,
+  style: t,
+  wrapperStyle: r,
+  itemTemplates: n = {},
+  boardSize: o = sr,
+  children: s,
+  showResizeHandle: a = !1,
+  Wrapper: u = Ko
+}) => {
+  const l = g.useRef(null), [f, d] = Z((w) => [
+    w.config.uid,
+    w.updateConfiguration
+  ]), { updateItemExtent: c } = dt(), b = {
+    userSelect: "none",
+    width: `${o}px`,
+    height: `${o}px`,
+    backgroundColor: "#333",
+    ...t
+  };
+  g.useEffect(() => {
+    const w = (m) => {
+      Te(m.target, "board") && m.preventDefault();
+    };
+    return document.body.addEventListener("wheel", w, { passive: !1 }), () => {
+      document.body.removeEventListener("wheel", w);
+    };
+  }, []), g.useEffect(() => {
+    d({
+      boardWrapper: l.current
+    });
+  }, [d]), g.useEffect(() => {
+    f || d({
+      uid: me()
+    });
+  }, [f, d]), g.useEffect(() => {
+    d({
+      itemTemplates: n,
+      boardSize: o,
+      showResizeHandle: a
+    });
+  }, [n, o, a, d]), g.useEffect(() => {
+    c(), setTimeout(c, 2e3);
+  }, [c]), xo(l, () => {
+    l.current && d({
+      boardWrapperRect: l.current.getBoundingClientRect()
+    });
+  });
+  const _ = H({ ...Ho, ...r });
+  return /* @__PURE__ */ ue(
+    "div",
+    {
+      ref: l,
+      id: f,
+      className: `sync-board ${_}`,
+      children: [
+        /* @__PURE__ */ T(So, { moveFirst: e, children: /* @__PURE__ */ T(uo, { moveFirst: e, children: /* @__PURE__ */ T(go, { moveFirst: e, children: /* @__PURE__ */ T(Fo, { children: /* @__PURE__ */ T(u, { children: /* @__PURE__ */ ue(
+          "div",
+          {
+            onContextMenu: (w) => {
+              w.preventDefault();
+            },
+            style: b,
+            className: "board",
+            children: [
+              /* @__PURE__ */ T(io, {}),
+              s
+            ]
+          }
+        ) }) }) }) }) }),
+        /* @__PURE__ */ T(Eo, {})
+      ]
+    }
+  );
+};
+Ln(g.createElement);
+export {
+  us as Board,
+  as as BoardWrapper,
+  cs as RoomWrapper,
+  es as useAvailableActions,
+  ns as useBoardConfig,
+  dt as useBoardPosition,
+  os as useBoardState,
+  Zo as useDebouncedItems,
+  pt as useItemActions,
+  gn as useItemInteraction,
+  Jo as useItems,
+  is as useMessage,
+  Qo as useSelectedItems,
+  ts as useSelectionBox,
+  ss as useSessionInfo,
+  rs as useUsers,
+  Be as useWire
+};
+//# sourceMappingURL=react-sync-board.js.map