react-sync-board 1.0.0 → 1.0.1

package/dist/react-sync-board.js

@@ -0,0 +1,4887 @@
+var Zn = Object.defineProperty;
+var Hn = (e, t, r) => t in e ? Zn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var lr = (e, t, r) => (Hn(e, typeof t != "symbol" ? t + "" : t, r), r);
+import * as fr from "react";
+import g, { useContext as Se, useDebugValue as Kn, useRef as ke, useMemo as Dt, useEffect as ct, useCallback as qn, forwardRef as Jn, createContext as Gr, createElement as Ae, Fragment as Fr, memo as Zr } from "react";
+function Qn(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var Be = {}, es = {
+  get exports() {
+    return Be;
+  },
+  set exports(e) {
+    Be = e;
+  }
+}, je = {};
+/**
+ * @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 dr;
+function ts() {
+  if (dr)
+    return je;
+  dr = 1;
+  var e = g, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, o = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function i(a, l, d) {
+    var f, u = {}, E = null, S = null;
+    d !== void 0 && (E = "" + d), l.key !== void 0 && (E = "" + l.key), l.ref !== void 0 && (S = l.ref);
+    for (f in l)
+      n.call(l, f) && !o.hasOwnProperty(f) && (u[f] = l[f]);
+    if (a && a.defaultProps)
+      for (f in l = a.defaultProps, l)
+        u[f] === void 0 && (u[f] = l[f]);
+    return { $$typeof: t, type: a, key: E, ref: S, props: u, _owner: s.current };
+  }
+  return je.Fragment = r, je.jsx = i, je.jsxs = i, je;
+}
+var De = {};
+/**
+ * @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 pr;
+function rs() {
+  return pr || (pr = 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"), s = Symbol.for("react.strict_mode"), o = Symbol.for("react.profiler"), i = Symbol.for("react.provider"), a = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), d = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), u = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), S = Symbol.for("react.offscreen"), b = Symbol.iterator, p = "@@iterator";
+    function v(c) {
+      if (c === null || typeof c != "object")
+        return null;
+      var _ = b && c[b] || c[p];
+      return typeof _ == "function" ? _ : null;
+    }
+    var C = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function w(c) {
+      {
+        for (var _ = arguments.length, R = new Array(_ > 1 ? _ - 1 : 0), T = 1; T < _; T++)
+          R[T - 1] = arguments[T];
+        y("error", c, R);
+      }
+    }
+    function y(c, _, R) {
+      {
+        var T = C.ReactDebugCurrentFrame, W = T.getStackAddendum();
+        W !== "" && (_ += "%s", R = R.concat([W]));
+        var V = R.map(function(z) {
+          return String(z);
+        });
+        V.unshift("Warning: " + _), Function.prototype.apply.call(console[c], console, V);
+      }
+    }
+    var h = !1, x = !1, m = !1, I = !1, N = !1, A;
+    A = Symbol.for("react.module.reference");
+    function M(c) {
+      return !!(typeof c == "string" || typeof c == "function" || c === n || c === o || N || c === s || c === d || c === f || I || c === S || h || x || m || typeof c == "object" && c !== null && (c.$$typeof === E || c.$$typeof === u || c.$$typeof === i || c.$$typeof === a || c.$$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.
+      c.$$typeof === A || c.getModuleId !== void 0));
+    }
+    function L(c, _, R) {
+      var T = c.displayName;
+      if (T)
+        return T;
+      var W = _.displayName || _.name || "";
+      return W !== "" ? R + "(" + W + ")" : R;
+    }
+    function B(c) {
+      return c.displayName || "Context";
+    }
+    function Z(c) {
+      if (c == null)
+        return null;
+      if (typeof c.tag == "number" && w("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof c == "function")
+        return c.displayName || c.name || null;
+      if (typeof c == "string")
+        return c;
+      switch (c) {
+        case n:
+          return "Fragment";
+        case r:
+          return "Portal";
+        case o:
+          return "Profiler";
+        case s:
+          return "StrictMode";
+        case d:
+          return "Suspense";
+        case f:
+          return "SuspenseList";
+      }
+      if (typeof c == "object")
+        switch (c.$$typeof) {
+          case a:
+            var _ = c;
+            return B(_) + ".Consumer";
+          case i:
+            var R = c;
+            return B(R._context) + ".Provider";
+          case l:
+            return L(c, c.render, "ForwardRef");
+          case u:
+            var T = c.displayName || null;
+            return T !== null ? T : Z(c.type) || "Memo";
+          case E: {
+            var W = c, V = W._payload, z = W._init;
+            try {
+              return Z(z(V));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var H = Object.assign, O = 0, P, j, X, Y, G, ee, ie;
+    function ce() {
+    }
+    ce.__reactDisabledLog = !0;
+    function ue() {
+      {
+        if (O === 0) {
+          P = console.log, j = console.info, X = console.warn, Y = console.error, G = console.group, ee = console.groupCollapsed, ie = console.groupEnd;
+          var c = {
+            configurable: !0,
+            enumerable: !0,
+            value: ce,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: c,
+            log: c,
+            warn: c,
+            error: c,
+            group: c,
+            groupCollapsed: c,
+            groupEnd: c
+          });
+        }
+        O++;
+      }
+    }
+    function F() {
+      {
+        if (O--, O === 0) {
+          var c = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: H({}, c, {
+              value: P
+            }),
+            info: H({}, c, {
+              value: j
+            }),
+            warn: H({}, c, {
+              value: X
+            }),
+            error: H({}, c, {
+              value: Y
+            }),
+            group: H({}, c, {
+              value: G
+            }),
+            groupCollapsed: H({}, c, {
+              value: ee
+            }),
+            groupEnd: H({}, c, {
+              value: ie
+            })
+          });
+        }
+        O < 0 && w("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var se = C.ReactCurrentDispatcher, be;
+    function Ie(c, _, R) {
+      {
+        if (be === void 0)
+          try {
+            throw Error();
+          } catch (W) {
+            var T = W.stack.trim().match(/\n( *(at )?)/);
+            be = T && T[1] || "";
+          }
+        return `
+` + be + c;
+      }
+    }
+    var ht = !1, He;
+    {
+      var _n = typeof WeakMap == "function" ? WeakMap : Map;
+      He = new _n();
+    }
+    function Kt(c, _) {
+      if (!c || ht)
+        return "";
+      {
+        var R = He.get(c);
+        if (R !== void 0)
+          return R;
+      }
+      var T;
+      ht = !0;
+      var W = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var V;
+      V = se.current, se.current = null, ue();
+      try {
+        if (_) {
+          var z = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(z.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(z, []);
+            } catch (he) {
+              T = he;
+            }
+            Reflect.construct(c, [], z);
+          } else {
+            try {
+              z.call();
+            } catch (he) {
+              T = he;
+            }
+            c.call(z.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (he) {
+            T = he;
+          }
+          c();
+        }
+      } catch (he) {
+        if (he && T && typeof he.stack == "string") {
+          for (var D = he.stack.split(`
+`), ne = T.stack.split(`
+`), K = D.length - 1, q = ne.length - 1; K >= 1 && q >= 0 && D[K] !== ne[q]; )
+            q--;
+          for (; K >= 1 && q >= 0; K--, q--)
+            if (D[K] !== ne[q]) {
+              if (K !== 1 || q !== 1)
+                do
+                  if (K--, q--, q < 0 || D[K] !== ne[q]) {
+                    var le = `
+` + D[K].replace(" at new ", " at ");
+                    return c.displayName && le.includes("<anonymous>") && (le = le.replace("<anonymous>", c.displayName)), typeof c == "function" && He.set(c, le), le;
+                  }
+                while (K >= 1 && q >= 0);
+              break;
+            }
+        }
+      } finally {
+        ht = !1, se.current = V, F(), Error.prepareStackTrace = W;
+      }
+      var xe = c ? c.displayName || c.name : "", ur = xe ? Ie(xe) : "";
+      return typeof c == "function" && He.set(c, ur), ur;
+    }
+    function xn(c, _, R) {
+      return Kt(c, !1);
+    }
+    function Rn(c) {
+      var _ = c.prototype;
+      return !!(_ && _.isReactComponent);
+    }
+    function Ke(c, _, R) {
+      if (c == null)
+        return "";
+      if (typeof c == "function")
+        return Kt(c, Rn(c));
+      if (typeof c == "string")
+        return Ie(c);
+      switch (c) {
+        case d:
+          return Ie("Suspense");
+        case f:
+          return Ie("SuspenseList");
+      }
+      if (typeof c == "object")
+        switch (c.$$typeof) {
+          case l:
+            return xn(c.render);
+          case u:
+            return Ke(c.type, _, R);
+          case E: {
+            var T = c, W = T._payload, V = T._init;
+            try {
+              return Ke(V(W), _, R);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var qe = Object.prototype.hasOwnProperty, qt = {}, Jt = C.ReactDebugCurrentFrame;
+    function Je(c) {
+      if (c) {
+        var _ = c._owner, R = Ke(c.type, c._source, _ ? _.type : null);
+        Jt.setExtraStackFrame(R);
+      } else
+        Jt.setExtraStackFrame(null);
+    }
+    function On(c, _, R, T, W) {
+      {
+        var V = Function.call.bind(qe);
+        for (var z in c)
+          if (V(c, z)) {
+            var D = void 0;
+            try {
+              if (typeof c[z] != "function") {
+                var ne = Error((T || "React class") + ": " + R + " type `" + z + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof c[z] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw ne.name = "Invariant Violation", ne;
+              }
+              D = c[z](_, z, T, R, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (K) {
+              D = K;
+            }
+            D && !(D instanceof Error) && (Je(W), w("%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).", T || "React class", R, z, typeof D), Je(null)), D instanceof Error && !(D.message in qt) && (qt[D.message] = !0, Je(W), w("Failed %s type: %s", R, D.message), Je(null));
+          }
+      }
+    }
+    var kn = Array.isArray;
+    function vt(c) {
+      return kn(c);
+    }
+    function An(c) {
+      {
+        var _ = typeof Symbol == "function" && Symbol.toStringTag, R = _ && c[Symbol.toStringTag] || c.constructor.name || "Object";
+        return R;
+      }
+    }
+    function Mn(c) {
+      try {
+        return Qt(c), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Qt(c) {
+      return "" + c;
+    }
+    function er(c) {
+      if (Mn(c))
+        return w("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", An(c)), Qt(c);
+    }
+    var Pe = C.ReactCurrentOwner, Nn = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, tr, rr, yt;
+    yt = {};
+    function Tn(c) {
+      if (qe.call(c, "ref")) {
+        var _ = Object.getOwnPropertyDescriptor(c, "ref").get;
+        if (_ && _.isReactWarning)
+          return !1;
+      }
+      return c.ref !== void 0;
+    }
+    function Ln(c) {
+      if (qe.call(c, "key")) {
+        var _ = Object.getOwnPropertyDescriptor(c, "key").get;
+        if (_ && _.isReactWarning)
+          return !1;
+      }
+      return c.key !== void 0;
+    }
+    function Pn(c, _) {
+      if (typeof c.ref == "string" && Pe.current && _ && Pe.current.stateNode !== _) {
+        var R = Z(Pe.current.type);
+        yt[R] || (w('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', Z(Pe.current.type), c.ref), yt[R] = !0);
+      }
+    }
+    function jn(c, _) {
+      {
+        var R = function() {
+          tr || (tr = !0, w("%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)", _));
+        };
+        R.isReactWarning = !0, Object.defineProperty(c, "key", {
+          get: R,
+          configurable: !0
+        });
+      }
+    }
+    function Dn(c, _) {
+      {
+        var R = function() {
+          rr || (rr = !0, w("%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)", _));
+        };
+        R.isReactWarning = !0, Object.defineProperty(c, "ref", {
+          get: R,
+          configurable: !0
+        });
+      }
+    }
+    var zn = function(c, _, R, T, W, V, z) {
+      var D = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: t,
+        // Built-in properties that belong on the element
+        type: c,
+        key: _,
+        ref: R,
+        props: z,
+        // Record the component responsible for creating this element.
+        _owner: V
+      };
+      return D._store = {}, Object.defineProperty(D._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(D, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: T
+      }), Object.defineProperty(D, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: W
+      }), Object.freeze && (Object.freeze(D.props), Object.freeze(D)), D;
+    };
+    function Yn(c, _, R, T, W) {
+      {
+        var V, z = {}, D = null, ne = null;
+        R !== void 0 && (er(R), D = "" + R), Ln(_) && (er(_.key), D = "" + _.key), Tn(_) && (ne = _.ref, Pn(_, W));
+        for (V in _)
+          qe.call(_, V) && !Nn.hasOwnProperty(V) && (z[V] = _[V]);
+        if (c && c.defaultProps) {
+          var K = c.defaultProps;
+          for (V in K)
+            z[V] === void 0 && (z[V] = K[V]);
+        }
+        if (D || ne) {
+          var q = typeof c == "function" ? c.displayName || c.name || "Unknown" : c;
+          D && jn(z, q), ne && Dn(z, q);
+        }
+        return zn(c, D, ne, W, T, Pe.current, z);
+      }
+    }
+    var bt = C.ReactCurrentOwner, nr = C.ReactDebugCurrentFrame;
+    function _e(c) {
+      if (c) {
+        var _ = c._owner, R = Ke(c.type, c._source, _ ? _.type : null);
+        nr.setExtraStackFrame(R);
+      } else
+        nr.setExtraStackFrame(null);
+    }
+    var St;
+    St = !1;
+    function Ct(c) {
+      return typeof c == "object" && c !== null && c.$$typeof === t;
+    }
+    function sr() {
+      {
+        if (bt.current) {
+          var c = Z(bt.current.type);
+          if (c)
+            return `
+
+Check the render method of \`` + c + "`.";
+        }
+        return "";
+      }
+    }
+    function Bn(c) {
+      {
+        if (c !== void 0) {
+          var _ = c.fileName.replace(/^.*[\\\/]/, ""), R = c.lineNumber;
+          return `
+
+Check your code at ` + _ + ":" + R + ".";
+        }
+        return "";
+      }
+    }
+    var or = {};
+    function Wn(c) {
+      {
+        var _ = sr();
+        if (!_) {
+          var R = typeof c == "string" ? c : c.displayName || c.name;
+          R && (_ = `
+
+Check the top-level render call using <` + R + ">.");
+        }
+        return _;
+      }
+    }
+    function ir(c, _) {
+      {
+        if (!c._store || c._store.validated || c.key != null)
+          return;
+        c._store.validated = !0;
+        var R = Wn(_);
+        if (or[R])
+          return;
+        or[R] = !0;
+        var T = "";
+        c && c._owner && c._owner !== bt.current && (T = " It was passed a child from " + Z(c._owner.type) + "."), _e(c), w('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', R, T), _e(null);
+      }
+    }
+    function ar(c, _) {
+      {
+        if (typeof c != "object")
+          return;
+        if (vt(c))
+          for (var R = 0; R < c.length; R++) {
+            var T = c[R];
+            Ct(T) && ir(T, _);
+          }
+        else if (Ct(c))
+          c._store && (c._store.validated = !0);
+        else if (c) {
+          var W = v(c);
+          if (typeof W == "function" && W !== c.entries)
+            for (var V = W.call(c), z; !(z = V.next()).done; )
+              Ct(z.value) && ir(z.value, _);
+        }
+      }
+    }
+    function $n(c) {
+      {
+        var _ = c.type;
+        if (_ == null || typeof _ == "string")
+          return;
+        var R;
+        if (typeof _ == "function")
+          R = _.propTypes;
+        else if (typeof _ == "object" && (_.$$typeof === l || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        _.$$typeof === u))
+          R = _.propTypes;
+        else
+          return;
+        if (R) {
+          var T = Z(_);
+          On(R, c.props, "prop", T, c);
+        } else if (_.PropTypes !== void 0 && !St) {
+          St = !0;
+          var W = Z(_);
+          w("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", W || "Unknown");
+        }
+        typeof _.getDefaultProps == "function" && !_.getDefaultProps.isReactClassApproved && w("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function Un(c) {
+      {
+        for (var _ = Object.keys(c.props), R = 0; R < _.length; R++) {
+          var T = _[R];
+          if (T !== "children" && T !== "key") {
+            _e(c), w("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", T), _e(null);
+            break;
+          }
+        }
+        c.ref !== null && (_e(c), w("Invalid attribute `ref` supplied to `React.Fragment`."), _e(null));
+      }
+    }
+    function cr(c, _, R, T, W, V) {
+      {
+        var z = M(c);
+        if (!z) {
+          var D = "";
+          (c === void 0 || typeof c == "object" && c !== null && Object.keys(c).length === 0) && (D += " 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 ne = Bn(W);
+          ne ? D += ne : D += sr();
+          var K;
+          c === null ? K = "null" : vt(c) ? K = "array" : c !== void 0 && c.$$typeof === t ? (K = "<" + (Z(c.type) || "Unknown") + " />", D = " Did you accidentally export a JSX literal instead of a component?") : K = typeof c, w("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", K, D);
+        }
+        var q = Yn(c, _, R, W, V);
+        if (q == null)
+          return q;
+        if (z) {
+          var le = _.children;
+          if (le !== void 0)
+            if (T)
+              if (vt(le)) {
+                for (var xe = 0; xe < le.length; xe++)
+                  ar(le[xe], c);
+                Object.freeze && Object.freeze(le);
+              } else
+                w("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
+              ar(le, c);
+        }
+        return c === n ? Un(q) : $n(q), q;
+      }
+    }
+    function Xn(c, _, R) {
+      return cr(c, _, R, !0);
+    }
+    function Vn(c, _, R) {
+      return cr(c, _, R, !1);
+    }
+    var Gn = Vn, Fn = Xn;
+    De.Fragment = n, De.jsx = Gn, De.jsxs = Fn;
+  }()), De;
+}
+(function(e) {
+  process.env.NODE_ENV === "production" ? e.exports = ts() : e.exports = rs();
+})(es);
+const Hr = Be.Fragment, k = Be.jsx, ve = Be.jsxs;
+let ns = (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 ss {
+  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: s, name: o, params: i }) => {
+      try {
+        const a = await this.registeredRPC[o](i);
+        t.emit(`${this.room}._result.${s}`, {
+          ok: a || null
+        });
+      } catch (a) {
+        t.emit(`${this.room}._result.${s}`, {
+          err: `${a.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 = ns();
+    return new Promise((s, o) => {
+      this._socket.once(`${this.room}._result.${n}`, (i) => {
+        i.hasOwnProperty("ok") ? s(i.ok) : o(i.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 s = () => {
+      if (this.registeredRPC[t] === r)
+        return delete this.registeredRPC[t], this._callServerRPC("unregister", { name: t });
+    };
+    return this.toUnregister.push(s), s;
+  }
+  /**
+   * 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 os = ({
+  socket: e,
+  room: t,
+  onJoined: r = () => {
+  },
+  onMaster: n = () => {
+  },
+  userId: s = null
+}) => {
+  const o = new ss(e, t, s);
+  return new Promise((i) => {
+    let a = !0;
+    e.on(`${t}.isMaster`, () => {
+      o._left || n(t);
+    }), e.on(`${t}.roomJoined`, (l) => {
+      o._left || (o.userId = l, a = !1, r(o), i(o));
+    }), e.on("connect", () => {
+      o._left || a || e.emit("joinSuperSocket", {
+        room: t,
+        userId: o.userId
+      });
+    }), e.emit("joinSuperSocket", { room: t, userId: s });
+  });
+}, kt = g.createContext(), is = () => /* @__PURE__ */ k(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      top: "0",
+      bottom: "0",
+      width: "100%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /* @__PURE__ */ k("h2", { children: "🌀 Loading..." })
+  }
+), Kr = ({
+  socket: e,
+  room: t,
+  channel: r = "default",
+  LoadingComponent: n = is,
+  children: s
+}) => {
+  const [o, i] = g.useState(!1), [a, l] = g.useState(!1), [d, f] = g.useState(null), u = g.useRef(null), E = g.useRef(!1), S = Se(kt), b = g.useRef(!1);
+  return g.useEffect(() => (E.current = !0, () => {
+    E.current = !1;
+  }), []), g.useEffect(() => {
+    if (!e)
+      return null;
+    const p = () => {
+      console.log(`Disconnected from ${r}…`), E.current && (i(!1), l(!1));
+    };
+    return e.on("disconnect", p), () => {
+      e.off("disconnect", p);
+    };
+  }, [r, e]), g.useEffect(() => e ? (e.connected || e.connect(), console.log(`Try to connect to wire ${t} on channel ${r}`), b.current || (b.current = !0, os({
+    socket: e,
+    room: t,
+    onMaster: () => {
+      console.log(`Is now master on channel ${r}…`), E.current && l(!0);
+    },
+    onJoined: (p) => {
+      console.log(`Connected on channel ${r}…`), u.current = p, E.current && (f(p), i(!0));
+    }
+  })), () => {
+    var p;
+    (p = u.current) == null || p.leave();
+  }) : null, [r, t, e]), !o || !d ? /* @__PURE__ */ k(n, {}) : /* @__PURE__ */ k(
+    kt.Provider,
+    {
+      value: { ...S, [r]: { wire: d, joined: o, isMaster: a, room: t } },
+      children: s
+    }
+  );
+}, ut = (e = "default") => (Se(kt) || {})[e], mr = (e) => {
+  let t;
+  const r = /* @__PURE__ */ new Set(), n = (l, d) => {
+    const f = typeof l == "function" ? l(t) : l;
+    if (!Object.is(f, t)) {
+      const u = t;
+      t = d ?? typeof f != "object" ? f : Object.assign({}, t, f), r.forEach((E) => E(t, u));
+    }
+  }, s = () => t, a = { setState: n, getState: s, 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, s, a), a;
+}, lt = (e) => e ? mr(e) : mr;
+var At = {}, as = {
+  get exports() {
+    return At;
+  },
+  set exports(e) {
+    At = e;
+  }
+}, Et = {}, ot = {}, cs = {
+  get exports() {
+    return ot;
+  },
+  set exports(e) {
+    ot = e;
+  }
+}, wt = {};
+/**
+ * @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 gr;
+function us() {
+  if (gr)
+    return wt;
+  gr = 1;
+  var e = g;
+  function t(u, E) {
+    return u === E && (u !== 0 || 1 / u === 1 / E) || u !== u && E !== E;
+  }
+  var r = typeof Object.is == "function" ? Object.is : t, n = e.useState, s = e.useEffect, o = e.useLayoutEffect, i = e.useDebugValue;
+  function a(u, E) {
+    var S = E(), b = n({ inst: { value: S, getSnapshot: E } }), p = b[0].inst, v = b[1];
+    return o(function() {
+      p.value = S, p.getSnapshot = E, l(p) && v({ inst: p });
+    }, [u, S, E]), s(function() {
+      return l(p) && v({ inst: p }), u(function() {
+        l(p) && v({ inst: p });
+      });
+    }, [u]), i(S), S;
+  }
+  function l(u) {
+    var E = u.getSnapshot;
+    u = u.value;
+    try {
+      var S = E();
+      return !r(u, S);
+    } catch {
+      return !0;
+    }
+  }
+  function d(u, E) {
+    return E();
+  }
+  var f = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? d : a;
+  return wt.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : f, wt;
+}
+var It = {};
+/**
+ * @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 hr;
+function ls() {
+  return hr || (hr = 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 h = arguments.length, x = new Array(h > 1 ? h - 1 : 0), m = 1; m < h; m++)
+          x[m - 1] = arguments[m];
+        n("error", y, x);
+      }
+    }
+    function n(y, h, x) {
+      {
+        var m = t.ReactDebugCurrentFrame, I = m.getStackAddendum();
+        I !== "" && (h += "%s", x = x.concat([I]));
+        var N = x.map(function(A) {
+          return String(A);
+        });
+        N.unshift("Warning: " + h), Function.prototype.apply.call(console[y], console, N);
+      }
+    }
+    function s(y, h) {
+      return y === h && (y !== 0 || 1 / y === 1 / h) || y !== y && h !== h;
+    }
+    var o = typeof Object.is == "function" ? Object.is : s, i = e.useState, a = e.useEffect, l = e.useLayoutEffect, d = e.useDebugValue, f = !1, u = !1;
+    function E(y, h, x) {
+      f || e.startTransition !== void 0 && (f = !0, r("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
+      var m = h();
+      if (!u) {
+        var I = h();
+        o(m, I) || (r("The result of getSnapshot should be cached to avoid an infinite loop"), u = !0);
+      }
+      var N = i({
+        inst: {
+          value: m,
+          getSnapshot: h
+        }
+      }), A = N[0].inst, M = N[1];
+      return l(function() {
+        A.value = m, A.getSnapshot = h, S(A) && M({
+          inst: A
+        });
+      }, [y, m, h]), a(function() {
+        S(A) && M({
+          inst: A
+        });
+        var L = function() {
+          S(A) && M({
+            inst: A
+          });
+        };
+        return y(L);
+      }, [y]), d(m), m;
+    }
+    function S(y) {
+      var h = y.getSnapshot, x = y.value;
+      try {
+        var m = h();
+        return !o(x, m);
+      } catch {
+        return !0;
+      }
+    }
+    function b(y, h, x) {
+      return h();
+    }
+    var p = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", v = !p, C = v ? b : E, w = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : C;
+    It.useSyncExternalStore = w, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+  }()), It;
+}
+var vr;
+function qr() {
+  return vr || (vr = 1, function(e) {
+    process.env.NODE_ENV === "production" ? e.exports = us() : e.exports = ls();
+  }(cs)), ot;
+}
+/**
+ * @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 yr;
+function fs() {
+  if (yr)
+    return Et;
+  yr = 1;
+  var e = g, t = qr();
+  function r(d, f) {
+    return d === f && (d !== 0 || 1 / d === 1 / f) || d !== d && f !== f;
+  }
+  var n = typeof Object.is == "function" ? Object.is : r, s = t.useSyncExternalStore, o = e.useRef, i = e.useEffect, a = e.useMemo, l = e.useDebugValue;
+  return Et.useSyncExternalStoreWithSelector = function(d, f, u, E, S) {
+    var b = o(null);
+    if (b.current === null) {
+      var p = { hasValue: !1, value: null };
+      b.current = p;
+    } else
+      p = b.current;
+    b = a(function() {
+      function C(m) {
+        if (!w) {
+          if (w = !0, y = m, m = E(m), S !== void 0 && p.hasValue) {
+            var I = p.value;
+            if (S(I, m))
+              return h = I;
+          }
+          return h = m;
+        }
+        if (I = h, n(y, m))
+          return I;
+        var N = E(m);
+        return S !== void 0 && S(I, N) ? I : (y = m, h = N);
+      }
+      var w = !1, y, h, x = u === void 0 ? null : u;
+      return [function() {
+        return C(f());
+      }, x === null ? void 0 : function() {
+        return C(x());
+      }];
+    }, [f, u, E, S]);
+    var v = s(d, b[0], b[1]);
+    return i(function() {
+      p.hasValue = !0, p.value = v;
+    }, [v]), l(v), v;
+  }, Et;
+}
+var _t = {};
+/**
+ * @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 br;
+function ds() {
+  return br || (br = 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 = qr();
+    function r(f, u) {
+      return f === u && (f !== 0 || 1 / f === 1 / u) || f !== f && u !== u;
+    }
+    var n = typeof Object.is == "function" ? Object.is : r, s = t.useSyncExternalStore, o = e.useRef, i = e.useEffect, a = e.useMemo, l = e.useDebugValue;
+    function d(f, u, E, S, b) {
+      var p = o(null), v;
+      p.current === null ? (v = {
+        hasValue: !1,
+        value: null
+      }, p.current = v) : v = p.current;
+      var C = a(function() {
+        var x = !1, m, I, N = function(B) {
+          if (!x) {
+            x = !0, m = B;
+            var Z = S(B);
+            if (b !== void 0 && v.hasValue) {
+              var H = v.value;
+              if (b(H, Z))
+                return I = H, H;
+            }
+            return I = Z, Z;
+          }
+          var O = m, P = I;
+          if (n(O, B))
+            return P;
+          var j = S(B);
+          return b !== void 0 && b(P, j) ? P : (m = B, I = j, j);
+        }, A = E === void 0 ? null : E, M = function() {
+          return N(u());
+        }, L = A === null ? void 0 : function() {
+          return N(A());
+        };
+        return [M, L];
+      }, [u, E, S, b]), w = C[0], y = C[1], h = s(f, w, y);
+      return i(function() {
+        v.hasValue = !0, v.value = h;
+      }, [h]), l(h), h;
+    }
+    _t.useSyncExternalStoreWithSelector = d, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+  }()), _t;
+}
+(function(e) {
+  process.env.NODE_ENV === "production" ? e.exports = fs() : e.exports = ds();
+})(as);
+const ps = /* @__PURE__ */ Qn(At), { useSyncExternalStoreWithSelector: ms } = ps;
+function ft(e, t = e.getState, r) {
+  const n = ms(
+    e.subscribe,
+    e.getState,
+    e.getServerState || e.getState,
+    t,
+    r
+  );
+  return Kn(n), n;
+}
+const Sr = (e) => {
+  ({ BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0 } && "production") !== "production" && typeof e != "function" && console.warn(
+    '[DEPRECATED] Passing a vanilla store will be unsupported in the future version. Please use `import { useStore } from "zustand"` to use the vanilla store in React.'
+  );
+  const t = typeof e == "function" ? lt(e) : e, r = (n, s) => ft(t, n, s);
+  return Object.assign(r, t), r;
+}, Jr = (e) => e ? Sr(e) : Sr, Oe = (e, t) => e.classList && e.classList.contains(t), We = (e, t) => Oe(e, t) ? e : e.parentNode ? We(e.parentNode, t) : !1, Qr = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, gs = (e, t) => {
+  const r = t.getBoundingClientRect();
+  return Array.from(e.querySelectorAll(".corner")).every((s) => {
+    const { top: o, left: i } = s.getBoundingClientRect();
+    return Qr({ x: i, y: o }, r);
+  });
+}, Mt = (e, t) => {
+  const n = e.getElementsByClassName(`item ${t}`)[0];
+  return n || console.error(`Missing item ${t}`), n;
+}, $e = (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;
+}, en = (e, t = document) => {
+  const r = e.reduce((n, s) => {
+    const o = Mt(t, s);
+    if (!o)
+      return null;
+    const { left: i, right: a, top: l, bottom: d } = o.getBoundingClientRect();
+    let f;
+    return n ? f = n : f = {
+      left: i,
+      top: l,
+      right: a,
+      bottom: d
+    }, f.left = Math.min(i, f.left), f.top = Math.min(l, f.top), f.right = Math.max(a, f.right), f.bottom = Math.max(d, f.bottom), f;
+  }, null);
+  return r && (r.width = r.right - r.left, r.height = r.bottom - r.top, r);
+}, hs = ({ x: e, y: t, width: r, height: n }, { type: s = "grid", size: o = 1, offset: i = { x: 0, y: 0 } }) => {
+  const [a, l] = [
+    e + r / 2 - i.x,
+    t + n / 2 - i.y
+  ];
+  let d, f, u, E, S, b, p, v, C, w;
+  const y = o / 1.1547;
+  switch (s) {
+    case "grid":
+      d = Math.round(a / o) * o, f = Math.round(l / o) * o;
+      break;
+    case "hexH":
+      u = 2 * y, E = 3 * o, S = Math.round(a / u) * u, p = Math.round(l / E) * E, b = S > a ? S - y : S + y, v = p > l ? p - 1.5 * o : p + 1.5 * o, C = Math.hypot(S - a, p - l), w = Math.hypot(b - a, v - l), C < w ? (d = S, f = p) : (d = b, f = v);
+      break;
+    case "hexV":
+      u = 3 * o, E = 2 * y, S = Math.round(a / u) * u, p = Math.round(l / E) * E, b = S > a ? S - 1.5 * o : S + 1.5 * o, v = p > l ? p - y : p + y, C = Math.hypot(S - a, p - l), w = Math.hypot(b - a, v - l), C < w ? (d = S, f = p) : (d = b, f = v);
+      break;
+    default:
+      d = e + r / 2, f = t + n / 2;
+  }
+  return {
+    x: d + i.x - r / 2,
+    y: f + i.y - n / 2
+  };
+}, Cr = [
+  "#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"
+], Er = () => Cr[Math.floor(Math.random() * Cr.length)], vs = !1, zt = ({ wire: e, storeName: t, noSync: r = [], defaultValue: n }, s) => (o, i, a) => {
+  o({ ready: !1 });
+  const l = [];
+  (async () => {
+    try {
+      const S = await e.call(`${t}_getValue`);
+      vs && console.log("init from peer with value", S), o((b) => ({ ...b, ...S }));
+    } catch {
+      n !== void 0 && o(n);
+    }
+    l.push(
+      await e.register(
+        `${t}_getValue`,
+        () => Object.fromEntries(
+          Object.entries(i()).filter(
+            ([S, b]) => typeof b != "function" && !r.includes(S)
+          )
+        ),
+        { invoke: "first" }
+      )
+    ), l.push(
+      e.subscribe(`${t}_call`, ([S, b]) => {
+        u[S](...b);
+      })
+    ), o({ ready: !0 });
+  })();
+  const f = s(o, i, a), u = { ...f }, E = Object.fromEntries(
+    // Send the update message on all method calls
+    Object.entries(f).map(([S, b]) => typeof b == "function" && !S.startsWith("get") && !r.includes(S) ? [S, (...v) => {
+      const C = b(...v);
+      return e.publish(`${t}_call`, [S, v]), C;
+    }] : [S, b])
+  );
+  return E.unsub = () => {
+    l.forEach((S) => S());
+  }, E;
+};
+function Fe(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, s] of e)
+      if (!Object.is(s, 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 tn = g.createContext(), ys = (e, t) => ({
+  items: {},
+  getItems: () => t().items,
+  setItems: (r) => e({ items: r }),
+  updateItems: (r) => e((n) => ({ items: { ...n.items, ...r } })),
+  moveItems: (r, n) => e(({ items: s }) => {
+    const o = { ...s };
+    return r.forEach((i) => {
+      const a = s[i];
+      a && (o[i] = {
+        ...a,
+        x: (a.x || 0) + n.x,
+        y: (a.y || 0) + n.y,
+        moving: !0
+      });
+    }), { items: o };
+  })
+}), bs = (e, t) => ({
+  itemIds: [],
+  setItemIds: (r) => e({ itemIds: r }),
+  getItemIds: () => t().itemIds,
+  insert: (r, n) => e((s) => {
+    const o = [...s.itemIds];
+    return o.splice(r, 0, n), { itemIds: o };
+  }),
+  remove: (r) => e((n) => {
+    const s = [...n.itemIds];
+    return s.splice(r, 1), { itemIds: s };
+  }),
+  updateItemIds: (r, n) => e((s) => {
+    const o = [...s.itemIds];
+    return o[r] = n, { items: o };
+  }),
+  updateManyItemIds: (r) => e((n) => ({
+    items: n.itemIds.map((s, o) => r[o] !== void 0 ? r[o] : s)
+  }))
+}), Ss = (e, t) => ({
+  removeItemsById: (r) => e((n) => ({
+    itemIds: n.itemIds.filter((s) => !r.includes(s)),
+    items: Object.fromEntries(
+      Object.entries(n.items).filter(
+        ([s]) => !r.includes(s)
+      )
+    )
+  })),
+  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((s) => {
+    let o;
+    const i = r.map(({ id: a }) => a);
+    if (n) {
+      const a = s.itemIds.findIndex((l) => l === n);
+      o = [...s.itemIds], o.splice(a, 0, ...i);
+    } else
+      o = [...s.itemIds, ...i];
+    return {
+      items: {
+        ...s.items,
+        ...Object.fromEntries(r.map((a) => [a.id, a]))
+      },
+      itemIds: o
+    };
+  })
+}), Cs = (e, t) => ({
+  boardConfig: {},
+  getBoardConfig: () => t().boardConfig,
+  setBoardConfig: (r) => e({ boardConfig: r }),
+  updateBoardConfig: (r) => e((n) => ({ boardConfig: { ...n.boardConfig, ...r } }))
+}), Es = (e, t) => ({
+  session: {},
+  getSessionInfo: () => t().session,
+  setSessionInfo: (r) => e({ session: r }),
+  updateSessionInfo: (r) => e((n) => ({ session: { ...n.session, ...r } }))
+}), wr = ({ storeName: e, children: t, defaultValue: r }) => {
+  const { wire: n } = ut("room"), [s] = g.useState(
+    () => lt(
+      zt({ wire: n, storeName: e, defaultValue: r }, (...o) => ({
+        ...ys(...o),
+        ...bs(...o),
+        ...Ss(...o),
+        ...Cs(...o),
+        ...Es(...o)
+      }))
+    )
+  );
+  return /* @__PURE__ */ k(tn.Provider, { value: s, children: t });
+}, de = (e, t) => {
+  const r = Se(tn);
+  return ft(r, e, t || Fe);
+}, Gi = () => {
+  const [e, t] = de((n) => [
+    n.itemIds,
+    n.items
+  ]);
+  return g.useMemo(
+    () => e.map((n) => t[n]),
+    [e, t]
+  );
+};
+function rn(e) {
+  const t = ke(e);
+  return t.current = e, Dt(() => Object.freeze({
+    get current() {
+      return t.current;
+    }
+  }), []);
+}
+function nn(e) {
+  const t = rn(e);
+  ct(
+    () => () => {
+      t.current();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+}
+function Yt(e, t, r, n = 0) {
+  const s = ke(), o = ke(), i = ke(), a = () => {
+    s.current && (clearTimeout(s.current), s.current = void 0), o.current && (clearTimeout(o.current), o.current = void 0);
+  };
+  return nn(a), Dt(
+    () => {
+      const l = () => {
+        if (!i.current)
+          return;
+        const f = i.current;
+        i.current = void 0, e.apply(f.this, f.args), a();
+      }, d = function(...f) {
+        s.current && clearTimeout(s.current), i.current = { args: f, this: this }, s.current = setTimeout(l, r), n > 0 && !o.current && (o.current = setTimeout(l, n));
+      };
+      return Object.defineProperties(d, {
+        length: { value: e.length },
+        name: { value: `${e.name || "anonymous"}__debounced__${r}` }
+      }), d;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unsafe-assignment
+    [r, n, ...t]
+  );
+}
+const ws = typeof window < "u" && typeof navigator < "u" && typeof document < "u";
+function sn(e, t, r, n = !1) {
+  const s = ke(), o = ke();
+  return nn(() => {
+    s.current && clearTimeout(s.current);
+  }), Dt(() => {
+    const i = (l, d) => {
+      o.current = void 0, e.apply(l, d), s.current = setTimeout(() => {
+        s.current = void 0, !n && o.current && (i(o.current.this, o.current.args), o.current = void 0);
+      }, r);
+    }, a = function(...l) {
+      if (s.current) {
+        o.current = { args: l, this: this };
+        return;
+      }
+      i(this, l);
+    };
+    return Object.defineProperties(a, {
+      length: { value: e.length },
+      name: { value: `${e.name || "anonymous"}__throttled__${r}` }
+    }), a;
+  }, [r, n, ...t]);
+}
+function Is(e, t, r, n = 0) {
+  ct(Yt(e, t, r, n), t);
+}
+function _s(e, t, r, n = !1) {
+  ct(sn(e, t, r, n), t);
+}
+let Qe;
+function xs() {
+  if (!ws)
+    return;
+  if (Qe)
+    return Qe;
+  const e = /* @__PURE__ */ new Map(), t = new ResizeObserver((r) => {
+    r.forEach((n) => {
+      var s;
+      return (s = e.get(n.target)) == null ? void 0 : s.forEach((o) => setTimeout(() => o(n), 0));
+    });
+  });
+  return Qe = {
+    observer: t,
+    subscribe: (r, n) => {
+      let s = e.get(r);
+      s || (s = /* @__PURE__ */ new Set(), e.set(r, s), t.observe(r)), s.add(n);
+    },
+    unsubscribe: (r, n) => {
+      const s = e.get(r);
+      s && (s.delete(n), s.size || (e.delete(r), t.unobserve(r)));
+    }
+  }, Qe;
+}
+function Rs(e, t, r = !0) {
+  const n = r && xs(), s = rn(t), o = e && "current" in e ? e.current : e;
+  ct(() => {
+    const i = e && "current" in e ? e.current : e;
+    if (!n || !i)
+      return;
+    let a = !0;
+    const l = (...d) => {
+      a && s.current(...d);
+    };
+    return n.subscribe(i, l), () => {
+      a = !1, n.unsubscribe(i, l);
+    };
+  }, [o, n]);
+}
+const Fi = () => {
+  const [e, t, r] = de((o) => [
+    o.items,
+    o.itemIds,
+    o.getItemList
+  ]), [n, s] = g.useState(r());
+  return _s(
+    () => {
+      const o = r();
+      s(o);
+    },
+    [e, t, r],
+    300
+  ), n;
+}, Os = Jr((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((s) => !r.includes(s))
+  })),
+  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 s = n.selectionBox;
+    return !s || !r || s.top !== r.top || s.left !== r.left || s.width !== r.width || s.height !== r.height ? { selectionBox: r } : {};
+  })
+})), ye = (e, t) => Os(e, t || Fe), Zi = () => ye((e) => e.selection), on = 5e4, ks = (e, t) => ({
+  config: {
+    itemTemplates: {},
+    actions: {},
+    uid: null,
+    itemExtent: {},
+    boardWrapperRect: {},
+    boardSize: on
+  },
+  // TODO optimize when same value as before
+  updateConfiguration: (r) => e((n) => ({ config: { ...n.config, ...r } })),
+  getConfiguration: () => t().config
+}), As = (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
+}), Ms = (e, t) => ({
+  interactions: {},
+  getInteractions: () => t().interactions,
+  register: (r, n) => e((s) => {
+    const o = [...s.interactions[r] || []];
+    return o.push(n), {
+      interactions: { ...s.interaction, [r]: o }
+    };
+  }),
+  unregister: (r, n) => e((s) => {
+    const o = (s.interactions[r] || []).filter(
+      (i) => i !== n
+    );
+    return {
+      interactions: { ...s.interaction, [r]: o }
+    };
+  }),
+  callInteractions: (r, n) => {
+    t().interactions[r] && t().interactions[r].forEach((s) => {
+      s(n);
+    });
+  }
+}), Ns = Jr((...e) => ({
+  ...ks(...e),
+  ...As(...e),
+  ...Ms(...e)
+})), Q = (e, t) => Ns(e, t || Fe), et = 100, Re = 1e3, Ts = 0.8, Ir = ({
+  x: e,
+  y: t,
+  scale: r,
+  itemExtent: { right: n, left: s, top: o, bottom: i },
+  boardWrapperRect: a,
+  boardSize: l
+}) => {
+  const d = {
+    left: -n * r + et * r,
+    right: a.width - s * r - et * r,
+    top: -i * r + et * r,
+    bottom: a.height - o * r - et * r,
+    maxRight: a.width - l * r,
+    maxLeft: a.height - l * r
+  }, f = Math.min(
+    Math.max(e, d.left, d.maxRight),
+    d.right,
+    0
+  ), u = Math.min(
+    Math.max(t, d.top, d.maxLeft),
+    d.bottom,
+    0
+  );
+  return [f, u];
+}, Bt = () => {
+  const [e, t] = Q((p) => [
+    p.getBoardState,
+    p.updateBoardState
+  ]), r = g.useRef([0.1, 8]), [n, s, o] = Q((p) => [
+    p.config.itemExtent,
+    p.getConfiguration,
+    p.updateConfiguration
+  ]), i = de((p) => p.getItemIds), a = g.useCallback(() => {
+    const { translateX: p, translateY: v, scale: C } = e();
+    return { translateX: p, translateY: v, scale: C };
+  }, [e]), l = g.useCallback(
+    (p) => {
+      const { itemExtent: v, boardWrapperRect: C, boardSize: w } = s(), y = e(), { translateX: h, translateY: x, scale: m } = {
+        ...y,
+        ...p(y)
+      };
+      let I = m;
+      m !== y.scale && (I > r.current[1] && ([, I] = r.current), I < r.current[0] && ([I] = r.current));
+      let [N, A] = [h, x];
+      (h !== y.translateX || x !== y.translateY) && ([N, A] = Ir({
+        x: h,
+        y: x,
+        scale: I,
+        itemExtent: v,
+        boardWrapperRect: C,
+        boardSize: w
+      })), t({
+        translateX: N,
+        translateY: A,
+        scale: I
+      });
+    },
+    [e, s, t]
+  ), d = g.useCallback(
+    (p, v) => {
+      const { itemExtent: C, boardWrapperRect: w, boardSize: y } = s();
+      let h = v;
+      h || (h = {
+        x: w.width / 2,
+        y: w.height / 2
+      });
+      const x = e();
+      let m = x.scale * p;
+      m > r.current[1] && ([, m] = r.current), m < r.current[0] && ([m] = r.current);
+      const I = h.x - w.left, N = h.y - w.top, A = I - (I - x.translateX) * m / x.scale, M = N - (N - x.translateY) * m / x.scale, [L, B] = Ir({
+        x: A,
+        y: M,
+        scale: m,
+        itemExtent: C,
+        boardWrapperRect: w,
+        boardSize: y
+      });
+      t({
+        scale: m,
+        translateX: L,
+        translateY: B
+      });
+    },
+    [e, s, t]
+  ), f = g.useCallback(
+    ({ left: p, top: v, width: C, height: w }) => {
+      const { boardWrapperRect: y } = s(), h = y.width / C, x = y.height / w, I = Math.min(h, x) * Ts, N = y.width / 2 - (p + C / 2) * I, A = y.height / 2 - (v + w / 2) * I;
+      t({
+        translateX: N,
+        translateY: A,
+        scale: I
+      });
+    },
+    [s, t]
+  ), u = g.useCallback(async () => {
+    const {
+      itemExtent: { width: p, height: v },
+      boardWrapperRect: C
+    } = s(), w = C.width / p, y = C.height / v, h = Math.min(w, y);
+    r.current = [
+      Math.max(h * 0.5, 0.05),
+      Math.max(h * 10, 10)
+    ];
+  }, [s]), E = g.useCallback(() => {
+    const { boardWrapperRect: p, boardSize: v } = s(), { translateX: C, translateY: w, scale: y } = e();
+    return {
+      x: (p.width / 2 - C) / y - v / 2,
+      y: (p.height / 2 - w) / y - v / 2
+    };
+  }, [e, s]), S = g.useCallback(() => {
+    const p = i(), { boardWrapperRect: v, boardWrapper: C, boardSize: w } = s(), { scale: y, translateX: h, translateY: x } = e(), { left: m, top: I, width: N, height: A } = en(
+      p,
+      C
+    ) || {
+      left: w / 2 * y + v.left + h,
+      top: w / 2 * y + v.top + x,
+      width: 0,
+      height: 0
+    }, M = {
+      left: (m - v.left - h) / y,
+      top: (I - v.top - x) / y,
+      width: N / y,
+      height: A / y
+    };
+    if (M.right = M.left + M.width, M.bottom = M.top + M.height, M.width < Re) {
+      const L = (Re - M.width) / 2;
+      M.left -= L, M.right += L, M.width = Re;
+    }
+    if (M.height < Re) {
+      const L = (Re - M.height) / 2;
+      M.top -= L, M.bottom += L, M.height = Re;
+    }
+    o({ itemExtent: M });
+  }, [e, s, i, o]), b = Yt(
+    S,
+    [],
+    300
+  );
+  return g.useEffect(() => {
+    n.left && u();
+  }, [u, n]), {
+    setDim: l,
+    getDim: a,
+    zoomTo: d,
+    zoomToCenter: d,
+    zoomToExtent: f,
+    getCenter: E,
+    updateItemExtent: b
+  };
+}, Ls = (e) => {
+  const [t, r, n] = Q(
+    ({ register: i, unregister: a, callInteractions: l }) => [
+      i,
+      a,
+      l
+    ]
+  ), s = g.useCallback(
+    (i) => (t(e, i), () => {
+      r(e, i);
+    }),
+    [e, t, r]
+  ), o = g.useCallback(
+    (i) => {
+      n(e, i);
+    },
+    [n, e]
+  );
+  return { register: s, call: o };
+}, Wt = () => {
+  const { call: e } = Ls("place"), { getCenter: t, updateItemExtent: r } = Bt(), n = Q((O) => O.getConfiguration), {
+    getItems: s,
+    getItemIds: o,
+    setItemIds: i,
+    updateItems: a,
+    moveItems: l,
+    removeItemsById: d,
+    getItemList: f,
+    insertItems: u,
+    setItemList: E
+  } = de(
+    ({
+      getItems: O,
+      getItemIds: P,
+      setItemIds: j,
+      updateItems: X,
+      moveItems: Y,
+      removeItemsById: G,
+      getItemList: ee,
+      insertItems: ie,
+      setItemList: ce
+    }) => ({
+      getItems: O,
+      getItemIds: P,
+      setItemIds: j,
+      updateItems: X,
+      moveItems: Y,
+      removeItemsById: G,
+      getItemList: ee,
+      insertItems: ie,
+      setItemList: ce
+    })
+  ), [S, b, p] = ye((O) => [
+    O.clear,
+    O.reverse,
+    O.unselect
+  ]), v = g.useCallback(
+    (O, P) => {
+      let j = P;
+      typeof P == "object" && (j = () => P);
+      const X = o().filter((ee) => O.includes(ee)), Y = s(), G = Object.fromEntries(
+        X.map((ee) => [ee, j({ ...Y[ee] })])
+      );
+      a(G), r();
+    },
+    [o, s, r, a]
+  ), C = g.useCallback(
+    (O) => {
+      E(O), S(), r();
+    },
+    [S, E, r]
+  ), w = g.useCallback(
+    (O, P) => {
+      v([O], P);
+    },
+    [v]
+  ), y = g.useCallback(
+    (O, P) => {
+      l(O, P), r();
+    },
+    [l, r]
+  ), h = g.useCallback(
+    (O) => {
+      const P = o(), j = P.filter((Y) => !O.includes(Y)), X = P.filter(
+        (Y) => O.includes(Y)
+      );
+      i([...j, ...X]);
+    },
+    [o, i]
+  ), x = g.useCallback(
+    (O, { type: P, size: j } = {}) => {
+      const { boardWrapper: X } = n(), Y = {}, G = s();
+      O.forEach((ee) => {
+        const ie = G[ee], ce = Mt(X, ee);
+        if (!ce)
+          return;
+        const ue = {
+          type: P || "grid",
+          size: j || 1,
+          offset: { x: 0, y: 0 },
+          ...ie.grid
+        }, F = hs(
+          {
+            x: ie.x,
+            y: ie.y,
+            width: ce.clientWidth,
+            height: ce.clientHeight
+          },
+          ue
+        );
+        Y[ee] = { ...ie, ...F };
+      }), a(Y);
+    },
+    [n, s, a]
+  ), m = g.useCallback(
+    (O, P) => {
+      h(O), v(O, (j) => {
+        const X = { ...j };
+        return delete X.moving, X;
+      }), x(O, P), e(O), r();
+    },
+    [
+      v,
+      e,
+      h,
+      x,
+      r
+    ]
+  ), I = g.useCallback(
+    (O) => {
+      i(O);
+    },
+    [i]
+  ), N = g.useCallback(
+    (O) => {
+      const P = o(), j = P.filter(
+        (Y) => O.includes(Y)
+      ), X = P.map((Y) => O.includes(Y) ? j.pop() : Y);
+      i(X), b();
+    },
+    [o, b, i]
+  ), A = g.useCallback(
+    (O, P) => {
+      const j = s(), X = O.map((F) => j[F]), Y = P.map((F) => j[F]), G = P.reduce((F, se) => (F[se] = X.shift(), F), {}), ee = Y.reduce((F, se) => {
+        const be = G[se.id], Ie = {
+          ...se,
+          x: be.x,
+          y: be.y
+        };
+        return F[se.id] = Ie, F;
+      }, {});
+      a(ee);
+      const ie = O.reduce((F, se) => (F[se] = P.shift(), F), {}), ue = o().map((F) => O.includes(F) ? ie[F] : F);
+      i(ue);
+    },
+    [s, a, o, i]
+  ), M = g.useCallback(
+    (O, P) => {
+      const j = t(), X = O.map((Y, G) => !Y.x || !Y.y ? { ...Y, x: j.x + 2 * G, y: j.y + 2 * G } : Y);
+      u(X, P), r();
+    },
+    [t, u, r]
+  ), L = g.useCallback(
+    (O, P) => {
+      M([O], P);
+    },
+    [M]
+  ), B = g.useCallback(
+    (O) => {
+      p(O), d(O);
+    },
+    [p, d]
+  ), Z = g.useCallback(
+    (O) => {
+      const P = s();
+      return O.map((j) => P[j]);
+    },
+    [s]
+  ), H = g.useCallback(
+    ({ target: O, clientX: P, clientY: j }, { returnLocked: X = !1, passLocked: Y = !1 } = {}) => {
+      if (["INPUT", "TEXTAREA"].includes(O.tagName))
+        return null;
+      const G = We(O, "item");
+      if (G) {
+        if (Oe(G, "selected"))
+          return G;
+        if (!Y && Oe(G, "locked") && !Oe(O, "passthrough"))
+          return X ? G : null;
+        if (Oe(O, "passthrough")) {
+          const ee = o(), { boardWrapper: ie } = n(), ce = ee.reduce((ue, F) => {
+            const se = Mt(ie, F), be = se.getBoundingClientRect();
+            return Qr({ x: P, y: j }, be) && ue.unshift(se), ue;
+          }, []);
+          for (let ue = 0; ue < ce.length; ue += 1) {
+            const F = ce[ue];
+            if (F !== G && (Y || !Oe(F, "locked")))
+              return F;
+          }
+          return null;
+        }
+      }
+      return G;
+    },
+    [n, o]
+  );
+  return {
+    putItemsOnTop: h,
+    batchUpdateItems: v,
+    updateItemOrder: I,
+    moveItems: y,
+    placeItems: m,
+    updateItem: w,
+    swapItems: A,
+    reverseItemsOrder: N,
+    setItemList: C,
+    pushItem: L,
+    pushItems: M,
+    removeItems: B,
+    getItemList: f,
+    findElementUnderPointer: H,
+    getItems: Z
+  };
+};
+var Ps = 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, s, o;
+    if (Array.isArray(t)) {
+      if (n = t.length, n != r.length)
+        return !1;
+      for (s = n; s-- !== 0; )
+        if (!e(t[s], r[s]))
+          return !1;
+      return !0;
+    }
+    if (t instanceof Map && r instanceof Map) {
+      if (t.size !== r.size)
+        return !1;
+      for (s of t.entries())
+        if (!r.has(s[0]))
+          return !1;
+      for (s of t.entries())
+        if (!e(s[1], r.get(s[0])))
+          return !1;
+      return !0;
+    }
+    if (t instanceof Set && r instanceof Set) {
+      if (t.size !== r.size)
+        return !1;
+      for (s of t.entries())
+        if (!r.has(s[0]))
+          return !1;
+      return !0;
+    }
+    if (ArrayBuffer.isView(t) && ArrayBuffer.isView(r)) {
+      if (n = t.length, n != r.length)
+        return !1;
+      for (s = n; s-- !== 0; )
+        if (t[s] !== r[s])
+          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 (o = Object.keys(t), n = o.length, n !== Object.keys(r).length)
+      return !1;
+    for (s = n; s-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(r, o[s]))
+        return !1;
+    for (s = n; s-- !== 0; ) {
+      var i = o[s];
+      if (!e(t[i], r[i]))
+        return !1;
+    }
+    return !0;
+  }
+  return t !== t && r !== r;
+};
+const js = (e, t) => {
+  if (e.type in t) {
+    const r = t[e.type].defaultActions;
+    return typeof r == "function" ? r(e) : r;
+  }
+  return [];
+}, _r = (e, t) => {
+  const { actions: r = js(e, t) } = e;
+  return r.map((n) => typeof n == "string" ? { name: n } : n);
+}, Hi = () => {
+  const [e, t] = de((f) => [
+    f.items,
+    f.getItems
+  ]), r = Q((f) => f.config.itemTemplates), [n, s] = ye((f) => [
+    f.selection,
+    f.getSelection
+  ]), [o, i] = g.useState([]), a = g.useRef(!1);
+  g.useEffect(() => (a.current = !0, () => {
+    a.current = !1;
+  }), []);
+  const l = g.useCallback(
+    (f) => {
+      const u = t();
+      if (f)
+        return [f, f.map((S) => u[S])];
+      const E = s();
+      return [E, E.map((S) => u[S])];
+    },
+    [t, s]
+  ), d = qn(() => {
+    const [f, u] = l();
+    if (f.length > 0) {
+      if (!a.current)
+        return;
+      const E = u.reduce((S, b) => {
+        const p = _r(b, r);
+        return S.filter(
+          (v) => p.some((C) => Ps(v, C))
+        );
+      }, _r(u[0], r));
+      i(E);
+    } else
+      i([]);
+  }, [l, r]);
+  return g.useEffect(() => {
+    d();
+  }, [d, n]), Is(
+    d,
+    [e, d],
+    300
+  ), {
+    availableActions: o
+  };
+}, Ki = () => ye((e) => e.selectionBox);
+let Ee = (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 an = g.createContext(), Nt = (e) => {
+  localStorage.setItem("user", JSON.stringify(e));
+}, Ds = () => {
+  if (localStorage.user) {
+    const t = {
+      name: "Player",
+      color: Er(),
+      uid: Ee(),
+      ...JSON.parse(localStorage.user)
+    };
+    return Nt(t), t;
+  }
+  const e = {
+    name: "Player",
+    color: Er(),
+    uid: Ee()
+  };
+  return Nt(e), e;
+}, zs = (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: s }) => s === n);
+  },
+  addUser: (n) => t((s) => ({ users: { ...s.users, [n.id]: n } })),
+  updateUser: (n, s) => t((o) => {
+    if (!o.users[n])
+      return {};
+    const i = {
+      ...o.users[n],
+      ...s,
+      id: n,
+      uid: o.users[n].uid
+    };
+    return i.id === e && Nt(i), setTimeout(() => r().electSpaceMaster(), 100), {
+      users: {
+        ...o.users,
+        [n]: i
+      }
+    };
+  }),
+  removeUser: (n) => t((s) => {
+    const o = { ...s.users };
+    return delete o[n], setTimeout(() => r().electSpaceMaster(), 100), { users: o };
+  }),
+  // Not synchronized methods
+  updateCurrentUser: (n) => r().updateUser(e, n),
+  joinSpace: (n) => r().updateUser(e, { space: n, spaceJoinedTimestamp: Date.now() }),
+  electSpaceMaster: () => {
+    const n = r().getLocalUsers(), s = {
+      uid: null,
+      timestamp: Date.now()
+    };
+    Object.values(n).forEach(({ spaceJoinedTimestamp: o, id: i }) => {
+      o < s.timestamp && (s.id = i, s.timestamp = o);
+    }), t({ isSpaceMaster: s.id === e });
+  }
+}), Ys = (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 };
+  })
+}), cn = ({ storeName: e, children: t }) => {
+  const { wire: r, isMaster: n } = ut("room"), [s, o] = g.useState(null), [i, a] = g.useState(!1), l = g.useRef(!1);
+  return g.useEffect(() => {
+    let d = !0;
+    const f = [];
+    if (!s && !l.current)
+      return l.current = !0, (() => {
+        const E = lt(
+          zt(
+            {
+              wire: r,
+              storeName: e,
+              noSync: [
+                "updateCurrentUser",
+                "joinSpace",
+                "isSpaceMaster",
+                "electSpaceMaster"
+              ]
+            },
+            (...b) => ({
+              ...zs(r.userId)(...b),
+              ...Ys(...b)
+            })
+          )
+        ), S = E.subscribe((b) => {
+          b.ready && (S(), d && o(E));
+        });
+      })(), () => {
+        d = !1, l.current = !1, f.forEach((E) => E());
+      };
+  }, [s, e, r, r.userId]), g.useEffect(() => {
+    if (s)
+      return s.getState().addUser({
+        ...Ds(),
+        id: r.userId
+      }), a(!0), () => {
+        s.getState().removeUser(r.userId);
+      };
+  }, [n, s, r]), g.useEffect(() => {
+    if (s) {
+      const d = r.subscribe("userLeave", (f) => {
+        s.getState().removeUser(f);
+      });
+      return () => {
+        d();
+      };
+    }
+  }, [n, s, r]), g.useEffect(() => {
+    n && s && s.getState().updateCurrentUser({ isMaster: n });
+  }, [n, s, r]), i ? /* @__PURE__ */ k(an.Provider, { value: s, children: t }) : null;
+}, we = (e, t) => {
+  const r = Se(an);
+  return ft(r, e, t || Fe);
+}, qi = () => {
+  const [e, t, r, n, s] = we((a) => [
+    a.isSpaceMaster,
+    a.getUser(),
+    a.users,
+    a.updateCurrentUser,
+    a.joinSpace
+  ]), o = g.useMemo(() => Object.values(r), [r]), i = g.useMemo(() => {
+    const { space: a } = t;
+    return o.filter(({ space: l }) => l === a);
+  }, [t, o]);
+  return {
+    isSpaceMaster: e,
+    currentUser: t,
+    updateCurrentUser: n,
+    users: o,
+    localUsers: i,
+    joinSpace: s
+  };
+}, Ji = () => {
+  const [e, t, r] = de(
+    (s) => [s.boardConfig, s.getBoardConfig, s.setBoardConfig]
+  ), n = g.useCallback(
+    (s) => {
+      let o = s;
+      typeof s == "object" && (o = () => s);
+      const i = t(), a = o(i);
+      r(a);
+    },
+    [t, r]
+  );
+  return [e, n];
+}, Qi = () => Q((e) => e.boardState), ea = () => {
+  const [e, t, r, n] = de((s) => [
+    s.getSessionInfo,
+    s.setSessionInfo,
+    s.updateSessionInfo,
+    s.session
+  ]);
+  return { getSessionInfo: e, setSessionInfo: t, sessionInfo: n, updateSessionInfo: r };
+}, un = g.createContext(), Bs = ({ user: { name: e, uid: t, color: r }, content: n }) => ({
+  type: "message",
+  user: { name: e, uid: t, color: r },
+  content: n,
+  uid: Ee(),
+  timestamp: new Date().toISOString()
+}), Ws = (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 s = Bs({
+      user: r,
+      content: n
+    });
+    s && t().addMessage(s);
+  }
+}), xr = ({
+  storeName: e,
+  children: t,
+  defaultValue: r = []
+}) => {
+  const { wire: n } = ut("room"), [s] = g.useState(
+    () => lt(
+      zt(
+        { wire: n, storeName: e, defaultValue: r, noSync: ["sendMessage"] },
+        (...o) => ({
+          ...Ws(...o)
+        })
+      )
+    )
+  );
+  return /* @__PURE__ */ k(un.Provider, { value: s, children: t });
+}, $s = (e, t) => {
+  const r = Se(un);
+  return ft(r, e, t || Fe);
+}, Us = () => {
+}, ta = (e = Us) => {
+  const t = we((i) => i.getUser()), [r, n, s] = $s((i) => [
+    i.messages,
+    i.setMessages,
+    i.sendMessage
+  ]);
+  g.useEffect(() => {
+    e();
+  }, [r, e]);
+  const o = g.useCallback(
+    (i) => {
+      s(t, i);
+    },
+    [t, s]
+  );
+  return { messages: r, setMessages: n, sendMessage: o };
+};
+function Tt() {
+  return Tt = Object.assign ? Object.assign.bind() : function(e) {
+    for (var t = 1; t < arguments.length; t++) {
+      var r = arguments[t];
+      for (var n in r)
+        Object.prototype.hasOwnProperty.call(r, n) && (e[n] = r[n]);
+    }
+    return e;
+  }, Tt.apply(this, arguments);
+}
+function ln(e) {
+  var t = /* @__PURE__ */ Object.create(null);
+  return function(r) {
+    return t[r] === void 0 && (t[r] = e(r)), t[r];
+  };
+}
+var Xs = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/, Vs = /* @__PURE__ */ ln(
+  function(e) {
+    return Xs.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+function Gs(e) {
+  if (e.sheet)
+    return e.sheet;
+  for (var t = 0; t < document.styleSheets.length; t++)
+    if (document.styleSheets[t].ownerNode === e)
+      return document.styleSheets[t];
+}
+function Fs(e) {
+  var t = document.createElement("style");
+  return t.setAttribute("data-emotion", e.key), e.nonce !== void 0 && t.setAttribute("nonce", e.nonce), t.appendChild(document.createTextNode("")), t.setAttribute("data-s", ""), t;
+}
+var Zs = /* @__PURE__ */ function() {
+  function e(r) {
+    var n = this;
+    this._insertTag = function(s) {
+      var o;
+      n.tags.length === 0 ? n.insertionPoint ? o = n.insertionPoint.nextSibling : n.prepend ? o = n.container.firstChild : o = n.before : o = n.tags[n.tags.length - 1].nextSibling, n.container.insertBefore(s, o), n.tags.push(s);
+    }, this.isSpeedy = r.speedy === void 0 ? process.env.NODE_ENV === "production" : r.speedy, this.tags = [], this.ctr = 0, this.nonce = r.nonce, this.key = r.key, this.container = r.container, this.prepend = r.prepend, this.insertionPoint = r.insertionPoint, this.before = null;
+  }
+  var t = e.prototype;
+  return t.hydrate = function(n) {
+    n.forEach(this._insertTag);
+  }, t.insert = function(n) {
+    this.ctr % (this.isSpeedy ? 65e3 : 1) === 0 && this._insertTag(Fs(this));
+    var s = this.tags[this.tags.length - 1];
+    if (process.env.NODE_ENV !== "production") {
+      var o = n.charCodeAt(0) === 64 && n.charCodeAt(1) === 105;
+      o && this._alreadyInsertedOrderInsensitiveRule && console.error(`You're attempting to insert the following rule:
+` + n + "\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules."), this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !o;
+    }
+    if (this.isSpeedy) {
+      var i = Gs(s);
+      try {
+        i.insertRule(n, i.cssRules.length);
+      } catch (a) {
+        process.env.NODE_ENV !== "production" && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(n) && console.error('There was a problem inserting the following rule: "' + n + '"', a);
+      }
+    } else
+      s.appendChild(document.createTextNode(n));
+    this.ctr++;
+  }, t.flush = function() {
+    this.tags.forEach(function(n) {
+      return n.parentNode && n.parentNode.removeChild(n);
+    }), this.tags = [], this.ctr = 0, process.env.NODE_ENV !== "production" && (this._alreadyInsertedOrderInsensitiveRule = !1);
+  }, e;
+}(), re = "-ms-", it = "-moz-", $ = "-webkit-", $t = "comm", Ut = "rule", Xt = "decl", Hs = "@import", fn = "@keyframes", Ks = Math.abs, dt = String.fromCharCode, qs = Object.assign;
+function Js(e, t) {
+  return te(e, 0) ^ 45 ? (((t << 2 ^ te(e, 0)) << 2 ^ te(e, 1)) << 2 ^ te(e, 2)) << 2 ^ te(e, 3) : 0;
+}
+function dn(e) {
+  return e.trim();
+}
+function Qs(e, t) {
+  return (e = t.exec(e)) ? e[0] : e;
+}
+function U(e, t, r) {
+  return e.replace(t, r);
+}
+function Lt(e, t) {
+  return e.indexOf(t);
+}
+function te(e, t) {
+  return e.charCodeAt(t) | 0;
+}
+function Ue(e, t, r) {
+  return e.slice(t, r);
+}
+function me(e) {
+  return e.length;
+}
+function Vt(e) {
+  return e.length;
+}
+function tt(e, t) {
+  return t.push(e), e;
+}
+function eo(e, t) {
+  return e.map(t).join("");
+}
+var pt = 1, Ne = 1, pn = 0, oe = 0, J = 0, Le = "";
+function mt(e, t, r, n, s, o, i) {
+  return { value: e, root: t, parent: r, type: n, props: s, children: o, line: pt, column: Ne, length: i, return: "" };
+}
+function ze(e, t) {
+  return qs(mt("", null, null, "", null, null, 0), e, { length: -e.length }, t);
+}
+function to() {
+  return J;
+}
+function ro() {
+  return J = oe > 0 ? te(Le, --oe) : 0, Ne--, J === 10 && (Ne = 1, pt--), J;
+}
+function ae() {
+  return J = oe < pn ? te(Le, oe++) : 0, Ne++, J === 10 && (Ne = 1, pt++), J;
+}
+function ge() {
+  return te(Le, oe);
+}
+function rt() {
+  return oe;
+}
+function Ze(e, t) {
+  return Ue(Le, e, t);
+}
+function Xe(e) {
+  switch (e) {
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    case 58:
+      return 3;
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+function mn(e) {
+  return pt = Ne = 1, pn = me(Le = e), oe = 0, [];
+}
+function gn(e) {
+  return Le = "", e;
+}
+function nt(e) {
+  return dn(Ze(oe - 1, Pt(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+}
+function no(e) {
+  for (; (J = ge()) && J < 33; )
+    ae();
+  return Xe(e) > 2 || Xe(J) > 3 ? "" : " ";
+}
+function so(e, t) {
+  for (; --t && ae() && !(J < 48 || J > 102 || J > 57 && J < 65 || J > 70 && J < 97); )
+    ;
+  return Ze(e, rt() + (t < 6 && ge() == 32 && ae() == 32));
+}
+function Pt(e) {
+  for (; ae(); )
+    switch (J) {
+      case e:
+        return oe;
+      case 34:
+      case 39:
+        e !== 34 && e !== 39 && Pt(J);
+        break;
+      case 40:
+        e === 41 && Pt(e);
+        break;
+      case 92:
+        ae();
+        break;
+    }
+  return oe;
+}
+function oo(e, t) {
+  for (; ae() && e + J !== 47 + 10; )
+    if (e + J === 42 + 42 && ge() === 47)
+      break;
+  return "/*" + Ze(t, oe - 1) + "*" + dt(e === 47 ? e : ae());
+}
+function io(e) {
+  for (; !Xe(ge()); )
+    ae();
+  return Ze(e, oe);
+}
+function ao(e) {
+  return gn(st("", null, null, null, [""], e = mn(e), 0, [0], e));
+}
+function st(e, t, r, n, s, o, i, a, l) {
+  for (var d = 0, f = 0, u = i, E = 0, S = 0, b = 0, p = 1, v = 1, C = 1, w = 0, y = "", h = s, x = o, m = n, I = y; v; )
+    switch (b = w, w = ae()) {
+      case 40:
+        if (b != 108 && te(I, u - 1) == 58) {
+          Lt(I += U(nt(w), "&", "&\f"), "&\f") != -1 && (C = -1);
+          break;
+        }
+      case 34:
+      case 39:
+      case 91:
+        I += nt(w);
+        break;
+      case 9:
+      case 10:
+      case 13:
+      case 32:
+        I += no(b);
+        break;
+      case 92:
+        I += so(rt() - 1, 7);
+        continue;
+      case 47:
+        switch (ge()) {
+          case 42:
+          case 47:
+            tt(co(oo(ae(), rt()), t, r), l);
+            break;
+          default:
+            I += "/";
+        }
+        break;
+      case 123 * p:
+        a[d++] = me(I) * C;
+      case 125 * p:
+      case 59:
+      case 0:
+        switch (w) {
+          case 0:
+          case 125:
+            v = 0;
+          case 59 + f:
+            S > 0 && me(I) - u && tt(S > 32 ? Or(I + ";", n, r, u - 1) : Or(U(I, " ", "") + ";", n, r, u - 2), l);
+            break;
+          case 59:
+            I += ";";
+          default:
+            if (tt(m = Rr(I, t, r, d, f, s, a, y, h = [], x = [], u), o), w === 123)
+              if (f === 0)
+                st(I, t, m, m, h, o, u, a, x);
+              else
+                switch (E === 99 && te(I, 3) === 110 ? 100 : E) {
+                  case 100:
+                  case 109:
+                  case 115:
+                    st(e, m, m, n && tt(Rr(e, m, m, 0, 0, s, a, y, s, h = [], u), x), s, x, u, a, n ? h : x);
+                    break;
+                  default:
+                    st(I, m, m, m, [""], x, 0, a, x);
+                }
+        }
+        d = f = S = 0, p = C = 1, y = I = "", u = i;
+        break;
+      case 58:
+        u = 1 + me(I), S = b;
+      default:
+        if (p < 1) {
+          if (w == 123)
+            --p;
+          else if (w == 125 && p++ == 0 && ro() == 125)
+            continue;
+        }
+        switch (I += dt(w), w * p) {
+          case 38:
+            C = f > 0 ? 1 : (I += "\f", -1);
+            break;
+          case 44:
+            a[d++] = (me(I) - 1) * C, C = 1;
+            break;
+          case 64:
+            ge() === 45 && (I += nt(ae())), E = ge(), f = u = me(y = I += io(rt())), w++;
+            break;
+          case 45:
+            b === 45 && me(I) == 2 && (p = 0);
+        }
+    }
+  return o;
+}
+function Rr(e, t, r, n, s, o, i, a, l, d, f) {
+  for (var u = s - 1, E = s === 0 ? o : [""], S = Vt(E), b = 0, p = 0, v = 0; b < n; ++b)
+    for (var C = 0, w = Ue(e, u + 1, u = Ks(p = i[b])), y = e; C < S; ++C)
+      (y = dn(p > 0 ? E[C] + " " + w : U(w, /&\f/g, E[C]))) && (l[v++] = y);
+  return mt(e, t, r, s === 0 ? Ut : a, l, d, f);
+}
+function co(e, t, r) {
+  return mt(e, t, r, $t, dt(to()), Ue(e, 2, -2), 0);
+}
+function Or(e, t, r, n) {
+  return mt(e, t, r, Xt, Ue(e, 0, n), Ue(e, n + 1, -1), n);
+}
+function Me(e, t) {
+  for (var r = "", n = Vt(e), s = 0; s < n; s++)
+    r += t(e[s], s, e, t) || "";
+  return r;
+}
+function uo(e, t, r, n) {
+  switch (e.type) {
+    case Hs:
+    case Xt:
+      return e.return = e.return || e.value;
+    case $t:
+      return "";
+    case fn:
+      return e.return = e.value + "{" + Me(e.children, n) + "}";
+    case Ut:
+      e.value = e.props.join(",");
+  }
+  return me(r = Me(e.children, n)) ? e.return = e.value + "{" + r + "}" : "";
+}
+function lo(e) {
+  var t = Vt(e);
+  return function(r, n, s, o) {
+    for (var i = "", a = 0; a < t; a++)
+      i += e[a](r, n, s, o) || "";
+    return i;
+  };
+}
+function fo(e) {
+  return function(t) {
+    t.root || (t = t.return) && e(t);
+  };
+}
+var po = function(t, r, n) {
+  for (var s = 0, o = 0; s = o, o = ge(), s === 38 && o === 12 && (r[n] = 1), !Xe(o); )
+    ae();
+  return Ze(t, oe);
+}, mo = function(t, r) {
+  var n = -1, s = 44;
+  do
+    switch (Xe(s)) {
+      case 0:
+        s === 38 && ge() === 12 && (r[n] = 1), t[n] += po(oe - 1, r, n);
+        break;
+      case 2:
+        t[n] += nt(s);
+        break;
+      case 4:
+        if (s === 44) {
+          t[++n] = ge() === 58 ? "&\f" : "", r[n] = t[n].length;
+          break;
+        }
+      default:
+        t[n] += dt(s);
+    }
+  while (s = ae());
+  return t;
+}, go = function(t, r) {
+  return gn(mo(mn(t), r));
+}, kr = /* @__PURE__ */ new WeakMap(), ho = function(t) {
+  if (!(t.type !== "rule" || !t.parent || // positive .length indicates that this rule contains pseudo
+  // negative .length indicates that this rule has been already prefixed
+  t.length < 1)) {
+    for (var r = t.value, n = t.parent, s = t.column === n.column && t.line === n.line; n.type !== "rule"; )
+      if (n = n.parent, !n)
+        return;
+    if (!(t.props.length === 1 && r.charCodeAt(0) !== 58 && !kr.get(n)) && !s) {
+      kr.set(t, !0);
+      for (var o = [], i = go(r, o), a = n.props, l = 0, d = 0; l < i.length; l++)
+        for (var f = 0; f < a.length; f++, d++)
+          t.props[d] = o[l] ? i[l].replace(/&\f/g, a[f]) : a[f] + " " + i[l];
+    }
+  }
+}, vo = function(t) {
+  if (t.type === "decl") {
+    var r = t.value;
+    // charcode for l
+    r.charCodeAt(0) === 108 && // charcode for b
+    r.charCodeAt(2) === 98 && (t.return = "", t.value = "");
+  }
+}, yo = "emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason", bo = function(t) {
+  return t.type === "comm" && t.children.indexOf(yo) > -1;
+}, So = function(t) {
+  return function(r, n, s) {
+    if (!(r.type !== "rule" || t.compat)) {
+      var o = r.value.match(/(:first|:nth|:nth-last)-child/g);
+      if (o) {
+        for (var i = r.parent === s[0], a = i ? s[0].children : (
+          // global rule at the root level
+          s
+        ), l = a.length - 1; l >= 0; l--) {
+          var d = a[l];
+          if (d.line < r.line)
+            break;
+          if (d.column < r.column) {
+            if (bo(d))
+              return;
+            break;
+          }
+        }
+        o.forEach(function(f) {
+          console.error('The pseudo class "' + f + '" is potentially unsafe when doing server-side rendering. Try changing it to "' + f.split("-child")[0] + '-of-type".');
+        });
+      }
+    }
+  };
+}, hn = function(t) {
+  return t.type.charCodeAt(1) === 105 && t.type.charCodeAt(0) === 64;
+}, Co = function(t, r) {
+  for (var n = t - 1; n >= 0; n--)
+    if (!hn(r[n]))
+      return !0;
+  return !1;
+}, Ar = function(t) {
+  t.type = "", t.value = "", t.return = "", t.children = "", t.props = "";
+}, Eo = function(t, r, n) {
+  hn(t) && (t.parent ? (console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles."), Ar(t)) : Co(r, n) && (console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."), Ar(t)));
+};
+function vn(e, t) {
+  switch (Js(e, t)) {
+    case 5103:
+      return $ + "print-" + e + e;
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return $ + e + e;
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return $ + e + it + e + re + e + e;
+    case 6828:
+    case 4268:
+      return $ + e + re + e + e;
+    case 6165:
+      return $ + e + re + "flex-" + e + e;
+    case 5187:
+      return $ + e + U(e, /(\w+).+(:[^]+)/, $ + "box-$1$2" + re + "flex-$1$2") + e;
+    case 5443:
+      return $ + e + re + "flex-item-" + U(e, /flex-|-self/, "") + e;
+    case 4675:
+      return $ + e + re + "flex-line-pack" + U(e, /align-content|flex-|-self/, "") + e;
+    case 5548:
+      return $ + e + re + U(e, "shrink", "negative") + e;
+    case 5292:
+      return $ + e + re + U(e, "basis", "preferred-size") + e;
+    case 6060:
+      return $ + "box-" + U(e, "-grow", "") + $ + e + re + U(e, "grow", "positive") + e;
+    case 4554:
+      return $ + U(e, /([^-])(transform)/g, "$1" + $ + "$2") + e;
+    case 6187:
+      return U(U(U(e, /(zoom-|grab)/, $ + "$1"), /(image-set)/, $ + "$1"), e, "") + e;
+    case 5495:
+    case 3959:
+      return U(e, /(image-set\([^]*)/, $ + "$1$`$1");
+    case 4968:
+      return U(U(e, /(.+:)(flex-)?(.*)/, $ + "box-pack:$3" + re + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + $ + e + e;
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return U(e, /(.+)-inline(.+)/, $ + "$1$2") + e;
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      if (me(e) - 1 - t > 6)
+        switch (te(e, t + 1)) {
+          case 109:
+            if (te(e, t + 4) !== 45)
+              break;
+          case 102:
+            return U(e, /(.+:)(.+)-([^]+)/, "$1" + $ + "$2-$3$1" + it + (te(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
+          case 115:
+            return ~Lt(e, "stretch") ? vn(U(e, "stretch", "fill-available"), t) + e : e;
+        }
+      break;
+    case 4949:
+      if (te(e, t + 1) !== 115)
+        break;
+    case 6444:
+      switch (te(e, me(e) - 3 - (~Lt(e, "!important") && 10))) {
+        case 107:
+          return U(e, ":", ":" + $) + e;
+        case 101:
+          return U(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + $ + (te(e, 14) === 45 ? "inline-" : "") + "box$3$1" + $ + "$2$3$1" + re + "$2box$3") + e;
+      }
+      break;
+    case 5936:
+      switch (te(e, t + 11)) {
+        case 114:
+          return $ + e + re + U(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
+        case 108:
+          return $ + e + re + U(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
+        case 45:
+          return $ + e + re + U(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+      }
+      return $ + e + re + e + e;
+  }
+  return e;
+}
+var wo = function(t, r, n, s) {
+  if (t.length > -1 && !t.return)
+    switch (t.type) {
+      case Xt:
+        t.return = vn(t.value, t.length);
+        break;
+      case fn:
+        return Me([ze(t, {
+          value: U(t.value, "@", "@" + $)
+        })], s);
+      case Ut:
+        if (t.length)
+          return eo(t.props, function(o) {
+            switch (Qs(o, /(::plac\w+|:read-\w+)/)) {
+              case ":read-only":
+              case ":read-write":
+                return Me([ze(t, {
+                  props: [U(o, /:(read-\w+)/, ":" + it + "$1")]
+                })], s);
+              case "::placeholder":
+                return Me([ze(t, {
+                  props: [U(o, /:(plac\w+)/, ":" + $ + "input-$1")]
+                }), ze(t, {
+                  props: [U(o, /:(plac\w+)/, ":" + it + "$1")]
+                }), ze(t, {
+                  props: [U(o, /:(plac\w+)/, re + "input-$1")]
+                })], s);
+            }
+            return "";
+          });
+    }
+}, Io = [wo], _o = function(t) {
+  var r = t.key;
+  if (process.env.NODE_ENV !== "production" && !r)
+    throw new Error(`You have to configure \`key\` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.
+If multiple caches share the same key they might "fight" for each other's style elements.`);
+  if (r === "css") {
+    var n = document.querySelectorAll("style[data-emotion]:not([data-s])");
+    Array.prototype.forEach.call(n, function(p) {
+      var v = p.getAttribute("data-emotion");
+      v.indexOf(" ") !== -1 && (document.head.appendChild(p), p.setAttribute("data-s", ""));
+    });
+  }
+  var s = t.stylisPlugins || Io;
+  if (process.env.NODE_ENV !== "production" && /[^a-z-]/.test(r))
+    throw new Error('Emotion key must only contain lower case alphabetical characters and - but "' + r + '" was passed');
+  var o = {}, i, a = [];
+  i = t.container || document.head, Array.prototype.forEach.call(
+    // this means we will ignore elements which don't have a space in them which
+    // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
+    document.querySelectorAll('style[data-emotion^="' + r + ' "]'),
+    function(p) {
+      for (var v = p.getAttribute("data-emotion").split(" "), C = 1; C < v.length; C++)
+        o[v[C]] = !0;
+      a.push(p);
+    }
+  );
+  var l, d = [ho, vo];
+  process.env.NODE_ENV !== "production" && d.push(So({
+    get compat() {
+      return b.compat;
+    }
+  }), Eo);
+  {
+    var f, u = [uo, process.env.NODE_ENV !== "production" ? function(p) {
+      p.root || (p.return ? f.insert(p.return) : p.value && p.type !== $t && f.insert(p.value + "{}"));
+    } : fo(function(p) {
+      f.insert(p);
+    })], E = lo(d.concat(s, u)), S = function(v) {
+      return Me(ao(v), E);
+    };
+    l = function(v, C, w, y) {
+      f = w, process.env.NODE_ENV !== "production" && C.map !== void 0 && (f = {
+        insert: function(x) {
+          w.insert(x + C.map);
+        }
+      }), S(v ? v + "{" + C.styles + "}" : C.styles), y && (b.inserted[C.name] = !0);
+    };
+  }
+  var b = {
+    key: r,
+    sheet: new Zs({
+      key: r,
+      container: i,
+      nonce: t.nonce,
+      speedy: t.speedy,
+      prepend: t.prepend,
+      insertionPoint: t.insertionPoint
+    }),
+    nonce: t.nonce,
+    inserted: o,
+    registered: {},
+    insert: l
+  };
+  return b.sheet.hydrate(a), b;
+}, xo = !0;
+function yn(e, t, r) {
+  var n = "";
+  return r.split(" ").forEach(function(s) {
+    e[s] !== void 0 ? t.push(e[s] + ";") : n += s + " ";
+  }), n;
+}
+var Gt = function(t, r, n) {
+  var s = t.key + "-" + r.name;
+  // we only need to add the styles to the registered cache if the
+  // class name could be used further down
+  // the tree but if it's a string tag, we know it won't
+  // so we don't have to add it to registered cache.
+  // this improves memory usage since we can avoid storing the whole style string
+  (n === !1 || // we need to always store it if we're in compat mode and
+  // in node since emotion-server relies on whether a style is in
+  // the registered cache to know whether a style is global or not
+  // also, note that this check will be dead code eliminated in the browser
+  xo === !1) && t.registered[s] === void 0 && (t.registered[s] = r.styles);
+}, bn = function(t, r, n) {
+  Gt(t, r, n);
+  var s = t.key + "-" + r.name;
+  if (t.inserted[r.name] === void 0) {
+    var o = r;
+    do
+      t.insert(r === o ? "." + s : "", o, t.sheet, !0), o = o.next;
+    while (o !== void 0);
+  }
+};
+function Ro(e) {
+  for (var t = 0, r, n = 0, s = e.length; s >= 4; ++n, s -= 4)
+    r = e.charCodeAt(n) & 255 | (e.charCodeAt(++n) & 255) << 8 | (e.charCodeAt(++n) & 255) << 16 | (e.charCodeAt(++n) & 255) << 24, r = /* Math.imul(k, m): */
+    (r & 65535) * 1540483477 + ((r >>> 16) * 59797 << 16), r ^= /* k >>> r: */
+    r >>> 24, t = /* Math.imul(k, m): */
+    (r & 65535) * 1540483477 + ((r >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
+    (t & 65535) * 1540483477 + ((t >>> 16) * 59797 << 16);
+  switch (s) {
+    case 3:
+      t ^= (e.charCodeAt(n + 2) & 255) << 16;
+    case 2:
+      t ^= (e.charCodeAt(n + 1) & 255) << 8;
+    case 1:
+      t ^= e.charCodeAt(n) & 255, t = /* Math.imul(h, m): */
+      (t & 65535) * 1540483477 + ((t >>> 16) * 59797 << 16);
+  }
+  return t ^= t >>> 13, t = /* Math.imul(h, m): */
+  (t & 65535) * 1540483477 + ((t >>> 16) * 59797 << 16), ((t ^ t >>> 15) >>> 0).toString(36);
+}
+var Oo = {
+  animationIterationCount: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+}, Mr = `You have illegal escape sequence in your template literal, most likely inside content's property value.
+Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
+You can read more about this here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`, ko = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).", Ao = /[A-Z]|^ms/g, Sn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Ft = function(t) {
+  return t.charCodeAt(1) === 45;
+}, Nr = function(t) {
+  return t != null && typeof t != "boolean";
+}, xt = /* @__PURE__ */ ln(function(e) {
+  return Ft(e) ? e : e.replace(Ao, "-$&").toLowerCase();
+}), at = function(t, r) {
+  switch (t) {
+    case "animation":
+    case "animationName":
+      if (typeof r == "string")
+        return r.replace(Sn, function(n, s, o) {
+          return fe = {
+            name: s,
+            styles: o,
+            next: fe
+          }, s;
+        });
+  }
+  return Oo[t] !== 1 && !Ft(t) && typeof r == "number" && r !== 0 ? r + "px" : r;
+};
+if (process.env.NODE_ENV !== "production") {
+  var Mo = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/, No = ["normal", "none", "initial", "inherit", "unset"], To = at, Lo = /^-ms-/, Po = /-(.)/g, Tr = {};
+  at = function(t, r) {
+    if (t === "content" && (typeof r != "string" || No.indexOf(r) === -1 && !Mo.test(r) && (r.charAt(0) !== r.charAt(r.length - 1) || r.charAt(0) !== '"' && r.charAt(0) !== "'")))
+      throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + r + "\"'`");
+    var n = To(t, r);
+    return n !== "" && !Ft(t) && t.indexOf("-") !== -1 && Tr[t] === void 0 && (Tr[t] = !0, console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + t.replace(Lo, "ms-").replace(Po, function(s, o) {
+      return o.toUpperCase();
+    }) + "?")), n;
+  };
+}
+var Cn = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
+function Ve(e, t, r) {
+  if (r == null)
+    return "";
+  if (r.__emotion_styles !== void 0) {
+    if (process.env.NODE_ENV !== "production" && r.toString() === "NO_COMPONENT_SELECTOR")
+      throw new Error(Cn);
+    return r;
+  }
+  switch (typeof r) {
+    case "boolean":
+      return "";
+    case "object": {
+      if (r.anim === 1)
+        return fe = {
+          name: r.name,
+          styles: r.styles,
+          next: fe
+        }, r.name;
+      if (r.styles !== void 0) {
+        var n = r.next;
+        if (n !== void 0)
+          for (; n !== void 0; )
+            fe = {
+              name: n.name,
+              styles: n.styles,
+              next: fe
+            }, n = n.next;
+        var s = r.styles + ";";
+        return process.env.NODE_ENV !== "production" && r.map !== void 0 && (s += r.map), s;
+      }
+      return jo(e, t, r);
+    }
+    case "function": {
+      if (e !== void 0) {
+        var o = fe, i = r(e);
+        return fe = o, Ve(e, t, i);
+      } else
+        process.env.NODE_ENV !== "production" && console.error("Functions that are interpolated in css calls will be stringified.\nIf you want to have a css call based on props, create a function that returns a css call like this\nlet dynamicStyle = (props) => css`color: ${props.color}`\nIt can be called directly with props or interpolated in a styled call like this\nlet SomeComponent = styled('div')`${dynamicStyle}`");
+      break;
+    }
+    case "string":
+      if (process.env.NODE_ENV !== "production") {
+        var a = [], l = r.replace(Sn, function(f, u, E) {
+          var S = "animation" + a.length;
+          return a.push("const " + S + " = keyframes`" + E.replace(/^@keyframes animation-\w+/, "") + "`"), "${" + S + "}";
+        });
+        a.length && console.error("`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\nInstead of doing this:\n\n" + [].concat(a, ["`" + l + "`"]).join(`
+`) + `
+
+You should wrap it with \`css\` like this:
+
+` + ("css`" + l + "`"));
+      }
+      break;
+  }
+  if (t == null)
+    return r;
+  var d = t[r];
+  return d !== void 0 ? d : r;
+}
+function jo(e, t, r) {
+  var n = "";
+  if (Array.isArray(r))
+    for (var s = 0; s < r.length; s++)
+      n += Ve(e, t, r[s]) + ";";
+  else
+    for (var o in r) {
+      var i = r[o];
+      if (typeof i != "object")
+        t != null && t[i] !== void 0 ? n += o + "{" + t[i] + "}" : Nr(i) && (n += xt(o) + ":" + at(o, i) + ";");
+      else {
+        if (o === "NO_COMPONENT_SELECTOR" && process.env.NODE_ENV !== "production")
+          throw new Error(Cn);
+        if (Array.isArray(i) && typeof i[0] == "string" && (t == null || t[i[0]] === void 0))
+          for (var a = 0; a < i.length; a++)
+            Nr(i[a]) && (n += xt(o) + ":" + at(o, i[a]) + ";");
+        else {
+          var l = Ve(e, t, i);
+          switch (o) {
+            case "animation":
+            case "animationName": {
+              n += xt(o) + ":" + l + ";";
+              break;
+            }
+            default:
+              process.env.NODE_ENV !== "production" && o === "undefined" && console.error(ko), n += o + "{" + l + "}";
+          }
+        }
+      }
+    }
+  return n;
+}
+var Lr = /label:\s*([^\s;\n{]+)\s*(;|$)/g, En;
+process.env.NODE_ENV !== "production" && (En = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g);
+var fe, jt = function(t, r, n) {
+  if (t.length === 1 && typeof t[0] == "object" && t[0] !== null && t[0].styles !== void 0)
+    return t[0];
+  var s = !0, o = "";
+  fe = void 0;
+  var i = t[0];
+  i == null || i.raw === void 0 ? (s = !1, o += Ve(n, r, i)) : (process.env.NODE_ENV !== "production" && i[0] === void 0 && console.error(Mr), o += i[0]);
+  for (var a = 1; a < t.length; a++)
+    o += Ve(n, r, t[a]), s && (process.env.NODE_ENV !== "production" && i[a] === void 0 && console.error(Mr), o += i[a]);
+  var l;
+  process.env.NODE_ENV !== "production" && (o = o.replace(En, function(E) {
+    return l = E, "";
+  })), Lr.lastIndex = 0;
+  for (var d = "", f; (f = Lr.exec(o)) !== null; )
+    d += "-" + // $FlowFixMe we know it's not null
+    f[1];
+  var u = Ro(o) + d;
+  return process.env.NODE_ENV !== "production" ? {
+    name: u,
+    styles: o,
+    map: l,
+    next: fe,
+    toString: function() {
+      return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+    }
+  } : {
+    name: u,
+    styles: o,
+    next: fe
+  };
+}, Do = function(t) {
+  return t();
+}, zo = fr["useInsertionEffect"] ? fr["useInsertionEffect"] : !1, wn = zo || Do, Yo = {}.hasOwnProperty, Zt = /* @__PURE__ */ Gr(
+  // we're doing this to avoid preconstruct's dead code elimination in this one case
+  // because this module is primarily intended for the browser and node
+  // but it's also required in react native and similar environments sometimes
+  // and we could have a special build just for that
+  // but this is much easier and the native packages
+  // might use a different theme context in the future anyway
+  typeof HTMLElement < "u" ? /* @__PURE__ */ _o({
+    key: "css"
+  }) : null
+);
+process.env.NODE_ENV !== "production" && (Zt.displayName = "EmotionCacheContext");
+Zt.Provider;
+var In = function(t) {
+  return /* @__PURE__ */ Jn(function(r, n) {
+    var s = Se(Zt);
+    return t(r, s, n);
+  });
+}, Ht = /* @__PURE__ */ Gr({});
+process.env.NODE_ENV !== "production" && (Ht.displayName = "EmotionThemeContext");
+var Pr = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", jr = "__EMOTION_LABEL_PLEASE_DO_NOT_USE__", Bo = function(t) {
+  var r = t.cache, n = t.serialized, s = t.isStringTag;
+  return Gt(r, n, s), wn(function() {
+    return bn(r, n, s);
+  }), null;
+}, Wo = /* @__PURE__ */ In(function(e, t, r) {
+  var n = e.css;
+  typeof n == "string" && t.registered[n] !== void 0 && (n = t.registered[n]);
+  var s = e[Pr], o = [n], i = "";
+  typeof e.className == "string" ? i = yn(t.registered, o, e.className) : e.className != null && (i = e.className + " ");
+  var a = jt(o, void 0, Se(Ht));
+  if (process.env.NODE_ENV !== "production" && a.name.indexOf("-") === -1) {
+    var l = e[jr];
+    l && (a = jt([a, "label:" + l + ";"]));
+  }
+  i += t.key + "-" + a.name;
+  var d = {};
+  for (var f in e)
+    Yo.call(e, f) && f !== "css" && f !== Pr && (process.env.NODE_ENV === "production" || f !== jr) && (d[f] = e[f]);
+  return d.ref = r, d.className = i, /* @__PURE__ */ Ae(Fr, null, /* @__PURE__ */ Ae(Bo, {
+    cache: t,
+    serialized: a,
+    isStringTag: typeof s == "string"
+  }), /* @__PURE__ */ Ae(s, d));
+});
+process.env.NODE_ENV !== "production" && (Wo.displayName = "EmotionCssPropInternal");
+var $o = Vs, Uo = function(t) {
+  return t !== "theme";
+}, Dr = function(t) {
+  return typeof t == "string" && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  t.charCodeAt(0) > 96 ? $o : Uo;
+}, zr = function(t, r, n) {
+  var s;
+  if (r) {
+    var o = r.shouldForwardProp;
+    s = t.__emotion_forwardProp && o ? function(i) {
+      return t.__emotion_forwardProp(i) && o(i);
+    } : o;
+  }
+  return typeof s != "function" && n && (s = t.__emotion_forwardProp), s;
+}, Yr = `You have illegal escape sequence in your template literal, most likely inside content's property value.
+Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
+You can read more about this here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`, Xo = function(t) {
+  var r = t.cache, n = t.serialized, s = t.isStringTag;
+  return Gt(r, n, s), wn(function() {
+    return bn(r, n, s);
+  }), null;
+}, Vo = function e(t, r) {
+  if (process.env.NODE_ENV !== "production" && t === void 0)
+    throw new Error(`You are trying to create a styled element with an undefined component.
+You may have forgotten to import it.`);
+  var n = t.__emotion_real === t, s = n && t.__emotion_base || t, o, i;
+  r !== void 0 && (o = r.label, i = r.target);
+  var a = zr(t, r, n), l = a || Dr(s), d = !l("as");
+  return function() {
+    var f = arguments, u = n && t.__emotion_styles !== void 0 ? t.__emotion_styles.slice(0) : [];
+    if (o !== void 0 && u.push("label:" + o + ";"), f[0] == null || f[0].raw === void 0)
+      u.push.apply(u, f);
+    else {
+      process.env.NODE_ENV !== "production" && f[0][0] === void 0 && console.error(Yr), u.push(f[0][0]);
+      for (var E = f.length, S = 1; S < E; S++)
+        process.env.NODE_ENV !== "production" && f[0][S] === void 0 && console.error(Yr), u.push(f[S], f[0][S]);
+    }
+    var b = In(function(p, v, C) {
+      var w = d && p.as || s, y = "", h = [], x = p;
+      if (p.theme == null) {
+        x = {};
+        for (var m in p)
+          x[m] = p[m];
+        x.theme = Se(Ht);
+      }
+      typeof p.className == "string" ? y = yn(v.registered, h, p.className) : p.className != null && (y = p.className + " ");
+      var I = jt(u.concat(h), v.registered, x);
+      y += v.key + "-" + I.name, i !== void 0 && (y += " " + i);
+      var N = d && a === void 0 ? Dr(w) : l, A = {};
+      for (var M in p)
+        d && M === "as" || // $FlowFixMe
+        N(M) && (A[M] = p[M]);
+      return A.className = y, A.ref = C, /* @__PURE__ */ Ae(Fr, null, /* @__PURE__ */ Ae(Xo, {
+        cache: v,
+        serialized: I,
+        isStringTag: typeof w == "string"
+      }), /* @__PURE__ */ Ae(w, A));
+    });
+    return b.displayName = o !== void 0 ? o : "Styled(" + (typeof s == "string" ? s : s.displayName || s.name || "Component") + ")", b.defaultProps = t.defaultProps, b.__emotion_real = b, b.__emotion_base = s, b.__emotion_styles = u, b.__emotion_forwardProp = a, Object.defineProperty(b, "toString", {
+      value: function() {
+        return i === void 0 && process.env.NODE_ENV !== "production" ? "NO_COMPONENT_SELECTOR" : "." + i;
+      }
+    }), b.withComponent = function(p, v) {
+      return e(p, Tt({}, r, v, {
+        shouldForwardProp: zr(b, v, !0)
+      })).apply(void 0, u);
+    }, b;
+  };
+}, Go = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "big",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "marquee",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  // SVG
+  "circle",
+  "clipPath",
+  "defs",
+  "ellipse",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "mask",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "stop",
+  "svg",
+  "text",
+  "tspan"
+], Te = Vo.bind();
+Go.forEach(function(e) {
+  Te[e] = Te(e);
+});
+const Fo = Te.div`
+  overflow: hidden;
+  position: absolute;
+  inset: 0;
+`, Br = ({ children: e, session: t, style: r }) => {
+  const n = g.useRef(null), s = we((a) => a.joinSpace), [o, i] = Q((a) => [
+    a.config.uid,
+    a.updateConfiguration
+  ]);
+  return g.useEffect(() => {
+    const a = (l) => {
+      We(l.target, "board") && l.preventDefault();
+    };
+    return document.body.addEventListener("wheel", a, { passive: !1 }), () => {
+      document.body.removeEventListener("wheel", a);
+    };
+  }, []), g.useEffect(() => (s(t), () => {
+    s(null);
+  }), [s, t]), g.useEffect(() => {
+    o || i({
+      uid: Ee()
+    });
+  }, [o, i]), g.useEffect(() => {
+    i({
+      boardWrapper: n.current
+    });
+  }, [i]), Rs(n, () => {
+    n.current && i({
+      boardWrapperRect: n.current.getBoundingClientRect()
+    });
+  }), /* @__PURE__ */ k(
+    Fo,
+    {
+      ref: n,
+      id: o,
+      className: "sync-board",
+      style: r,
+      children: e
+    }
+  );
+}, ra = ({
+  socket: e,
+  room: t,
+  session: r,
+  items: n = [],
+  messages: s = [],
+  LoadingComponent: o,
+  ...i
+}) => {
+  const [a] = g.useState(t || Ee()), [l] = g.useState(r || Ee()), [d] = g.useState(() => ({
+    itemIds: n.map(({ id: u }) => u),
+    items: Object.fromEntries(n.map((u) => [u.id, u]))
+  }));
+  return ut("room") ? /* @__PURE__ */ k(
+    xr,
+    {
+      storeName: `${l}_messages`,
+      defaultValue: s,
+      children: /* @__PURE__ */ k(
+        wr,
+        {
+          storeName: `${l}_item`,
+          defaultValue: d,
+          children: /* @__PURE__ */ k(Br, { ...i, session: l })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ k(
+    Kr,
+    {
+      room: a,
+      channel: "room",
+      socket: e,
+      LoadingComponent: o,
+      children: /* @__PURE__ */ k(cn, { storeName: `${a}_users`, children: /* @__PURE__ */ k(
+        xr,
+        {
+          storeName: `${l}_messages`,
+          defaultValue: s,
+          children: /* @__PURE__ */ k(
+            wr,
+            {
+              storeName: `${l}_item`,
+              defaultValue: d,
+              children: /* @__PURE__ */ k(Br, { ...i, session: l })
+            }
+          )
+        }
+      ) })
+    }
+  );
+}, na = ({ socket: e, room: t, children: r, LoadingComponent: n }) => {
+  const [s] = g.useState(t || Ee());
+  return /* @__PURE__ */ k(
+    Kr,
+    {
+      room: s,
+      channel: "room",
+      socket: e,
+      LoadingComponent: n,
+      children: /* @__PURE__ */ k(cn, { storeName: `${s}_users`, children: r })
+    }
+  );
+}, Rt = () => {
+  const e = navigator.userAgent.toLowerCase();
+  return /mac os ?x 10/.test(e);
+}, Zo = () => {
+  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;
+}, Ho = Zo(), Ko = 800, Wr = (e, t) => {
+  const r = Object.keys(e).map((n) => Number(n)).find((n) => n !== t);
+  return e[r];
+}, $r = ([e, t], [r, n]) => {
+  const s = Math.abs(e - r), o = Math.abs(t - n);
+  return Math.hypot(s, o);
+}, Ce = () => {
+}, qo = (e) => (t) => {
+  const { event: r } = t;
+  return r.isPropagationStopped() ? null : e(t);
+}, Jo = (e) => async (...t) => {
+  try {
+    await e(...t);
+  } catch (r) {
+    console.error(r);
+  }
+};
+class Qo {
+  constructor() {
+    lr(this, "lastPromise", Promise.resolve(!0));
+  }
+  add(t, ...r) {
+    return new Promise((n, s) => {
+      this.lastPromise = this.lastPromise.then(() => qo(Jo(t))(...r)).then(n).catch(s);
+    });
+  }
+}
+const pe = new Qo(), gt = ({
+  children: e,
+  onDrag: t = Ce,
+  onDragStart: r = Ce,
+  onDragEnd: n = Ce,
+  onPan: s = Ce,
+  onTap: o = Ce,
+  onLongTap: i = Ce,
+  onDoubleTap: a = Ce,
+  onZoom: l,
+  mainAction: d = "drag"
+}) => {
+  const f = g.useRef(null), u = g.useRef({
+    moving: !1,
+    pointers: {},
+    mainPointer: void 0
+  }), E = g.useCallback(
+    (C) => {
+      const {
+        deltaX: w,
+        deltaY: y,
+        clientX: h,
+        clientY: x,
+        deltaMode: m,
+        ctrlKey: I,
+        altKey: N,
+        metaKey: A,
+        target: M
+      } = C;
+      if (!(N || I && !Rt()))
+        if (Rt() && !I)
+          pe.add(s, {
+            deltaX: -2 * w,
+            deltaY: -2 * y,
+            button: 1,
+            ctrlKey: I,
+            metaKey: A,
+            target: M,
+            event: C
+          });
+        else {
+          if (l === void 0 || !y)
+            return;
+          let L = y;
+          switch (m) {
+            case 1:
+              L *= Ho;
+              break;
+            case 2:
+              L *= Ko;
+              break;
+          }
+          Rt() && (L *= 2), pe.add(l, { scale: L, clientX: h, clientY: x, event: C });
+        }
+    },
+    [s, l]
+  ), S = g.useCallback(
+    (C) => {
+      const {
+        target: w,
+        button: y,
+        clientX: h,
+        clientY: x,
+        pointerId: m,
+        altKey: I,
+        ctrlKey: N,
+        metaKey: A,
+        isPrimary: M
+      } = C;
+      if (u.current.pointers[m] = { clientX: h, clientY: x }, M && (u.current.mainPointer = void 0), u.current.mainPointer !== void 0) {
+        if (u.current.mainPointer !== m)
+          try {
+            const { clientX: L, clientY: B } = Wr(
+              u.current.pointers,
+              m
+            ), Z = (L + h) / 2, H = (B + x) / 2, O = $r(
+              [L, B],
+              [h, x]
+            );
+            Object.assign(u.current, {
+              pressed: !0,
+              moving: !1,
+              gestureStart: !1,
+              startX: h,
+              startY: x,
+              prevX: Z,
+              prevY: H,
+              startDistance: O,
+              prevDistance: O
+            });
+          } catch (L) {
+            console.log("Error while getting other pointer. Ignoring", L), u.current.mainPointer;
+          }
+        return;
+      }
+      u.current.mainPointer = m, Object.assign(u.current, {
+        pressed: !0,
+        moving: !1,
+        gestureStart: !1,
+        startX: h,
+        startY: x,
+        prevX: h,
+        prevY: x,
+        currentButton: y,
+        pointerDownEvent: C,
+        target: w,
+        timeStart: Date.now(),
+        longTapTimeout: setTimeout(async () => {
+          u.current.noTap = !0, pe.add(i, {
+            clientX: h,
+            clientY: x,
+            altKey: I,
+            ctrlKey: N,
+            metaKey: A,
+            target: w,
+            event: C
+          });
+        }, 750)
+      });
+      try {
+        w.setPointerCapture(m);
+      } catch (L) {
+        console.log("Fail to capture pointer", L);
+      }
+    },
+    [i]
+  ), b = g.useCallback(
+    (C) => {
+      if (u.current.pressed) {
+        const {
+          pointerId: w,
+          clientX: y,
+          clientY: h,
+          altKey: x,
+          ctrlKey: m,
+          metaKey: I,
+          buttons: N,
+          pointerType: A
+        } = C;
+        u.current.pointers[w] = {
+          clientX: y,
+          clientY: h
+        }, u.current.moving = !0;
+        const M = Object.keys(u.current.pointers).length === 2;
+        let L, B, Z;
+        if (M) {
+          const { clientX: j, clientY: X } = Wr(
+            u.current.pointers,
+            w
+          );
+          L = (j + y) / 2, B = (X + h) / 2, Z = $r(
+            [j, X],
+            [y, h]
+          );
+        } else
+          L = y, B = h;
+        let H = x || m || I || N !== 1;
+        d !== "drag" && (H = !H);
+        const O = A !== "touch" ? !H : !M, P = A !== "touch" ? H : M;
+        if (O) {
+          u.current.gestureStart || (f.current.style.cursor = "move", u.current.gestureStart = !0, clearTimeout(u.current.longTapTimeout), pe.add(r, {
+            deltaX: 0,
+            deltaY: 0,
+            startX: u.current.startX,
+            startY: u.current.startY,
+            clientX: u.current.startX,
+            clientY: u.current.startY,
+            distanceX: 0,
+            distanceY: 0,
+            button: u.current.currentButton,
+            altKey: x,
+            ctrlKey: m,
+            metaKey: I,
+            target: u.current.target,
+            event: u.current.pointerDownEvent
+          }));
+          const j = L - u.current.prevX, X = B - u.current.prevY, Y = L - u.current.startX, G = B - u.current.startY;
+          pe.add(t, {
+            deltaX: j,
+            deltaY: X,
+            startX: u.current.startX,
+            startY: u.current.startY,
+            clientX: L,
+            clientY: B,
+            distanceX: Y,
+            distanceY: G,
+            button: u.current.currentButton,
+            altKey: x,
+            ctrlKey: m,
+            metaKey: I,
+            target: u.current.target,
+            event: C
+          });
+        }
+        if (P) {
+          u.current.gestureStart || (f.current.style.cursor = "move", u.current.gestureStart = !0, clearTimeout(u.current.longTapTimeout));
+          const j = L - u.current.prevX, X = B - u.current.prevY, { target: Y } = u.current;
+          if (pe.add(s, {
+            deltaX: j,
+            deltaY: X,
+            button: u.current.currentButton,
+            altKey: x,
+            ctrlKey: m,
+            metaKey: I,
+            target: Y,
+            event: C
+          }), Z !== u.current.prevDistance && l) {
+            const G = u.current.prevDistance - Z;
+            Math.abs(G) > 0 && (pe.add(l, {
+              scale: G * 3,
+              clientX: L,
+              clientY: B,
+              event: C
+            }), u.current.prevDistance = Z);
+          }
+        }
+        u.current.prevX = L, u.current.prevY = B;
+      }
+    },
+    [d, t, r, s, l]
+  ), p = g.useCallback(
+    (C) => {
+      const { clientX: w, clientY: y, altKey: h, ctrlKey: x, metaKey: m, target: I, pointerId: N } = C;
+      if (u.current.pointers[N] && (delete u.current.pointers[N], u.current.mainPointer === N)) {
+        for (; Object.keys(u.current.pointers).length > 0; ) {
+          u.current.mainPointer = Number(
+            Object.keys(u.current.pointers)[0]
+          );
+          try {
+            u.current.target.setPointerCapture(
+              u.current.mainPointer
+            );
+            return;
+          } catch (A) {
+            console.log("Fails to set pointer capture", A), u.current.mainPointer = void 0, delete u.current.pointers[Object.keys(u.current.pointers)[0]];
+          }
+        }
+        if (u.current.mainPointer = void 0, u.current.pressed = !1, clearTimeout(u.current.longTapTimeout), u.current.moving)
+          u.current.moving = !1, pe.add(n, {
+            deltaX: w - u.current.prevX,
+            deltaY: y - u.current.prevY,
+            startX: u.current.startX,
+            startY: u.current.startY,
+            clientX: w,
+            clientY: y,
+            distanceX: w - u.current.startX,
+            distanceY: y - u.current.startY,
+            button: u.current.currentButton,
+            altKey: h,
+            ctrlKey: x,
+            metaKey: m,
+            event: C
+          }), f.current.style.cursor = "auto";
+        else {
+          const A = Date.now();
+          u.current.noTap ? u.current.noTap = !1 : u.current.timeStart - A < 300 && pe.add(o, {
+            clientX: w,
+            clientY: y,
+            altKey: h,
+            ctrlKey: x,
+            metaKey: m,
+            target: I,
+            event: C
+          });
+        }
+      }
+    },
+    [n, o]
+  ), v = g.useCallback(
+    (C) => {
+      const { clientX: w, clientY: y, altKey: h, ctrlKey: x, metaKey: m, target: I } = C;
+      pe.add(a, {
+        clientX: w,
+        clientY: y,
+        altKey: h,
+        ctrlKey: x,
+        metaKey: m,
+        target: I,
+        event: C
+      });
+    },
+    [a]
+  );
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      onWheel: E,
+      onPointerDown: S,
+      onPointerMove: b,
+      onPointerUp: p,
+      onPointerOut: p,
+      onPointerLeave: p,
+      onPointerCancel: p,
+      onDoubleClick: v,
+      style: { touchAction: "none" },
+      ref: f,
+      children: e
+    }
+  );
+}, Ot = ({ onResize: e, ...t }) => {
+  const r = Q((s) => s.getBoardState), n = g.useCallback(
+    async ({ deltaX: s, deltaY: o, event: i }) => {
+      i.stopPropagation();
+      const { scale: a } = r();
+      e({
+        width: s / a,
+        height: o / a
+      });
+    },
+    [r, e]
+  );
+  return /* @__PURE__ */ k(gt, { onDrag: n, children: /* @__PURE__ */ k("div", { ...t }) });
+}, ei = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICB4PSIwcHgiCiAgIHk9IjBweCIKICAgdmlld0JveD0iMCAwIDc1LjYwMTMxOCA5NC45IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMjYiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvY2suc3ZnIgogICB3aWR0aD0iNzUuNjAxMzE4IgogICBoZWlnaHQ9Ijk0LjkwMDAwMiIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi41ICgyMDYwZWMxZjlmLCAyMDIwLTA0LTA4KSI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzIiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnMzMCIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE4NDgiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTAxNiIKICAgICBpZD0ibmFtZWR2aWV3MjgiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIgogICAgIGlua3NjYXBlOnpvb209IjUuMzQwMDcwNCIKICAgICBpbmtzY2FwZTpjeD0iMy4yNjQwMDEzIgogICAgIGlua3NjYXBlOmN5PSI0NS4wNzIxNTIiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjE1MTIiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjI3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iZzE2IiAvPjxnCiAgICAgaWQ9ImcxNiIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIuMiwtMi41KSI+PHBhdGgKICAgICAgIGQ9Ik0gNzUuNCwzNi44IEggMzQuMSBWIDI0LjYgYyAwLC04LjggNy4xLC0xNS45IDE1LjksLTE1LjkgOC44LDAgMTUuOSw3LjEgMTUuOSwxNS45IDAsMS43IDEuNCwzLjEgMy4xLDMuMSAxLjcsMCAzLjEsLTEuNCAzLjEsLTMuMSBDIDcyLjEsMTIuNCA2Mi4yLDIuNSA1MCwyLjUgMzcuOCwyLjUgMjcuOSwxMi40IDI3LjksMjQuNiB2IDEyLjIgaCAtMy4zIGMgLTYuOSwwIC0xMi40LDUuNiAtMTIuNCwxMi40IFYgODUgYyAwLDYuOSA1LjYsMTIuNCAxMi40LDEyLjQgaCA1MC44IGMgNi45LDAgMTIuNCwtNS42IDEyLjQsLTEyLjQgViA0OS4yIEMgODcuOSw0Mi4zIDgyLjMsMzYuOCA3NS40LDM2LjggWiBtIDYuMiw0OC4zIGMgMCwzLjQgLTIuOCw2LjIgLTYuMiw2LjIgSCAyNC42IGMgLTMuNCwwIC02LjIsLTIuOCAtNi4yLC02LjIgViA0OS4yIGMgMCwtMy40IDIuOCwtNi4yIDYuMiwtNi4yIGggNTAuOCBjIDMuNCwwIDYuMiwyLjggNi4yLDYuMiB6IgogICAgICAgaWQ9InBhdGgxMiIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxIiAvPjxwYXRoCiAgICAgICBkPSJtIDU5LjgsNTcuNiAtMTIuNSwxMi41IC03LC03IGMgLTEuMiwtMS4yIC0zLjIsLTEuMiAtNC40LDAgLTEuMiwxLjIgLTEuMiwzLjIgMCw0LjQgbCA5LjIsOS4yIGMgMC42LDAuNiAxLjQsMC45IDIuMiwwLjkgMC44LDAgMS42LC0wLjMgMi4yLC0wLjkgTCA2NC4yLDYyIGMgMS4yLC0xLjIgMS4yLC0zLjIgMCwtNC40IC0xLjIsLTEuMiAtMy4yLC0xLjIgLTQuNCwwIHoiCiAgICAgICBpZD0icGF0aDE0IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjEiIC8+PC9nPjwvc3ZnPg==", ti = Te.div`
+  display: inline-block;
+  transition: transform 150ms;
+  user-select: none;
+  padding: 2px;
+  box-sizing: border-box;
+  transform: rotate(${({ rotation: e }) => e}deg);
+
+  & .corner {
+    position: absolute;
+    width: 0px;
+    height: 0px;
+  }
+
+  & .top-left {
+    top: 0;
+    left: 0;
+  }
+  & .top-right {
+    top: 0;
+    right: 0;
+  }
+  & .bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+  & .bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+
+  & .center {
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    top: 50%;
+    left: 50%;
+  }
+
+  &.selected {
+    border: 2px dashed #db5034;
+    padding: 0px;
+    cursor: pointer;
+  }
+
+  &.locked::after {
+    content: "";
+    position: absolute;
+    width: 24px;
+    height: 30px;
+    top: 4px;
+    right: 4px;
+    opacity: 0.1;
+    background-image: url("${ei}");
+    background-size: cover;
+    user-select: none;
+  }
+
+  &.locked:hover::after {
+    opacity: 0.3;
+  }
+
+  & .resize {
+    position: absolute;
+
+    width: 10px;
+    height: 10px;
+    border: 2px solid #db5034;
+    background-color: #db5034;
+    cursor: move;
+
+    &.resize-width {
+      cursor: ew-resize;
+      right: -6px;
+      top: calc(50% - 5px);
+    }
+    &.resize-height {
+      cursor: ns-resize;
+      bottom: -6px;
+      left: calc(50% - 5px);
+    }
+    &.resize-ratio {
+      cursor: nwse-resize;
+      bottom: -6px;
+      right: -6px;
+    }
+  }
+`, ri = (e) => e, ni = ({ onReload: e }) => /* @__PURE__ */ ve(
+  "div",
+  {
+    style: {
+      width: "100px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      textAlign: "center",
+      color: "red"
+    },
+    className: "syncboard-error-item",
+    children: [
+      "Sorry, this item seems broken.",
+      /* @__PURE__ */ k("button", { onClick: e, children: "Reload it" })
+    ]
+  }
+);
+class si 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__ */ k(t, { onReload: this.onReload }) : this.props.children;
+  }
+}
+const oi = (e) => {
+  e.target.className = "";
+}, ii = ({
+  width: e,
+  height: t,
+  actualWidth: r,
+  actualHeight: n,
+  prevState: s,
+  keepRatio: o
+}) => {
+  let { width: i, height: a } = s;
+  if ([i, a] = [
+    parseFloat(i),
+    parseFloat(a)
+  ], (!i || Number.isNaN(Number(i))) && (i = r), (!a || Number.isNaN(Number(a))) && (a = n), o) {
+    const l = i / a;
+    return {
+      ...s,
+      width: (i + e).toFixed(1),
+      height: (a + t / l).toFixed(1)
+    };
+  }
+  return {
+    ...s,
+    width: (i + e).toFixed(1),
+    height: (a + t).toFixed(1)
+  };
+}, ai = {
+  w: !0,
+  h: !0,
+  b: !0
+}, ci = ({
+  setState: e,
+  state: { type: t, rotation: r = 0, id: n, locked: s, layer: o, ...i } = {},
+  animate: a = "hvr-pop",
+  isSelected: l,
+  itemMap: d,
+  showResizeHandle: f = !1
+}) => {
+  var x;
+  const u = g.useRef(null), {
+    component: E = () => null,
+    resizeDirections: S = ai,
+    resize: b = ii
+  } = d[t], p = g.useCallback(
+    (m, I = !0) => e(n, m, I),
+    [e, n]
+  );
+  g.useEffect(() => {
+    u.current.className = a;
+  }, [a]);
+  let v = `item ${n}`;
+  s && (v += " locked"), l && (v += " selected");
+  const C = g.useCallback(
+    ({ width: m = 0, height: I = 0, keepRatio: N }) => {
+      p((A) => {
+        const { offsetWidth: M, offsetHeight: L } = u.current;
+        return b({
+          prevState: A,
+          width: m,
+          height: I,
+          actualHeight: L,
+          actualWidth: M,
+          keepRatio: N
+        });
+      });
+    },
+    [b, p]
+  ), w = g.useCallback(
+    ({ width: m }) => {
+      C({ width: m });
+    },
+    [C]
+  ), y = g.useCallback(
+    ({ height: m }) => {
+      C({ height: m });
+    },
+    [C]
+  ), h = g.useCallback(
+    ({ width: m }) => {
+      C({ height: m, width: m, keepRatio: !0 });
+    },
+    [C]
+  );
+  return /* @__PURE__ */ k(
+    ti,
+    {
+      rotation: r,
+      locked: s,
+      selected: l,
+      layer: o,
+      "data-id": n,
+      className: v,
+      children: /* @__PURE__ */ ve(
+        "div",
+        {
+          style: { display: "flex" },
+          ref: u,
+          onAnimationEnd: oi,
+          onKeyDown: (m) => m.stopPropagation(),
+          onKeyUp: (m) => m.stopPropagation(),
+          children: [
+            /* @__PURE__ */ k(
+              si,
+              {
+                itemId: n,
+                state: i,
+                setState: p,
+                ErrorComponent: ((x = d == null ? void 0 : d.error) == null ? void 0 : x.component) || ni,
+                children: /* @__PURE__ */ k(E, { ...i, id: n, setState: p })
+              }
+            ),
+            /* @__PURE__ */ k("div", { className: "corner top-left" }),
+            /* @__PURE__ */ k("div", { className: "corner top-right" }),
+            /* @__PURE__ */ k("div", { className: "corner bottom-right" }),
+            /* @__PURE__ */ k("div", { className: "corner bottom-left" }),
+            /* @__PURE__ */ k("div", { className: "center" }),
+            l && f && /* @__PURE__ */ ve(Hr, { children: [
+              S.b && /* @__PURE__ */ k(
+                Ot,
+                {
+                  className: "resize resize-ratio",
+                  onResize: h
+                }
+              ),
+              S.h && /* @__PURE__ */ k(
+                Ot,
+                {
+                  className: "resize resize-height",
+                  onResize: y
+                }
+              ),
+              S.w && /* @__PURE__ */ k(
+                Ot,
+                {
+                  className: "resize resize-width",
+                  onResize: w
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}, ui = Zr(
+  ci,
+  ({
+    state: e,
+    setState: t,
+    isSelected: r,
+    showResizeHandle: n
+  }, {
+    state: s,
+    setState: o,
+    isSelected: i,
+    showResizeHandle: a
+  }) => r === i && n === a && t === o && JSON.stringify(e) === JSON.stringify(s)
+), li = ({ state: e = {}, boardSize: t, currentUser: r, ...n }) => {
+  if (!n.itemMap[e.type])
+    return null;
+  const { stateHook: s = ri } = n.itemMap[e.type], {
+    x: o = 0,
+    y: i = 0,
+    layer: a = 0,
+    moving: l,
+    ...d
+  } = s(e, { currentUser: r });
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: `${t / 2}px`,
+        left: `${t / 2}px`,
+        display: "inline-block",
+        transform: `translate(${o}px, ${i}px)`,
+        zIndex: (a + 4) * 10 + 100 + (l ? 5 : 0)
+        // Items z-index between 100 and 200
+      },
+      children: /* @__PURE__ */ k(
+        ui,
+        {
+          ...n,
+          showResizeHandle: n.isSelected && n.showResizeHandle,
+          state: d
+        }
+      )
+    }
+  );
+}, fi = Zr(li), di = () => {
+  const { updateItem: e } = Wt(), [t, r] = de((l) => [
+    l.itemIds,
+    l.items
+  ]), n = ye((l) => l.selection), [s, o, i] = Q((l) => [
+    l.config.boardSize,
+    l.config.showResizeHandle,
+    l.config.itemTemplates
+  ]), a = we((l) => l.getUser());
+  return t.map((l) => /* @__PURE__ */ k(
+    fi,
+    {
+      state: r[l],
+      setState: e,
+      isSelected: n.includes(l),
+      itemMap: i,
+      boardSize: s,
+      currentUser: a,
+      showResizeHandle: o
+    },
+    l
+  ));
+}, pi = {
+  zIndex: 210,
+  position: "absolute",
+  backgroundColor: "hsla(0, 40%, 50%, 10%)",
+  border: "2px solid hsl(0, 55%, 40%)"
+}, mi = (e, t) => {
+  const r = t.getElementsByClassName("selector");
+  if (!r.length)
+    return [];
+  const n = r[0];
+  return Array.from(t.getElementsByClassName("item")).filter((s) => {
+    const o = $e(s), i = e[o];
+    return !i || i.locked ? !1 : gs(s, n);
+  }).map((s) => $e(s));
+}, gi = ({ children: e, moveFirst: t }) => {
+  const [r, n, s, o] = ye(
+    (m) => [
+      m.getSelection,
+      m.clear,
+      m.setSelection,
+      m.select
+    ]
+  ), i = Q((m) => m.getConfiguration), [a, l] = Q((m) => [
+    m.getBoardState,
+    m.updateBoardState
+  ]), { findElementUnderPointer: d } = Wt(), f = de((m) => m.getItems), [u, E] = g.useState({}), S = g.useRef(null), b = g.useRef({
+    moving: !1
+  });
+  g.useEffect(() => (n(), () => {
+    n();
+  }), [n]);
+  const p = g.useCallback(() => {
+    if (b.current.moving) {
+      const m = f(), { boardWrapper: I } = i(), N = mi(m, I);
+      s(N);
+    }
+  }, [i, f, s]), v = sn(
+    () => {
+      p();
+    },
+    [u, p],
+    50
+  ), C = g.useCallback(
+    async (m) => {
+      await d(m) || (b.current.moving = !0, l({ selection: !0 }), S.current.style.cursor = "crosshair");
+    },
+    [d, l]
+  ), w = g.useCallback(
+    ({ distanceY: m, distanceX: I, startX: N, startY: A }) => {
+      if (b.current.moving) {
+        const { top: M, left: L } = S.current.getBoundingClientRect(), { scale: B } = a(), Z = (N - L) / B, H = (A - M) / B, O = I / B, P = m / B;
+        O > 0 ? (b.current.left = Z, b.current.width = O) : (b.current.left = Z + O, b.current.width = -O), P > 0 ? (b.current.top = H, b.current.height = P) : (b.current.top = H + P, b.current.height = -P), E({ ...b.current, moving: !0 }), v();
+      }
+    },
+    [a, v]
+  ), y = g.useCallback(() => {
+    b.current.moving && (l({ selecting: !1 }), b.current.moving = !1, E({ moving: !1 }), S.current.style.cursor = "auto");
+  }, [l]), h = g.useCallback(
+    ({ target: m }) => {
+      const I = We(m, "item");
+      if (I) {
+        const N = $e(I);
+        s([N]);
+      }
+    },
+    [s]
+  ), x = g.useCallback(
+    async (m) => {
+      const { target: I, ctrlKey: N, metaKey: A } = m, M = await d(m);
+      if (!M && We(I, "board"))
+        n();
+      else {
+        const L = $e(M);
+        if (!L) {
+          n();
+          return;
+        }
+        const B = r();
+        M && !B.includes(L) && (N || A ? o([L]) : s([L]));
+      }
+    },
+    [
+      n,
+      d,
+      r,
+      o,
+      s
+    ]
+  );
+  return /* @__PURE__ */ k(
+    gt,
+    {
+      onDragStart: C,
+      onDrag: w,
+      onDragEnd: y,
+      onTap: x,
+      onLongTap: h,
+      mainAction: t ? "pan" : "drag",
+      children: /* @__PURE__ */ ve("div", { ref: S, children: [
+        u.moving && /* @__PURE__ */ k(
+          "div",
+          {
+            style: {
+              ...pi,
+              transform: `translate(${u.left}px, ${u.top}px)`,
+              height: `${u.height}px`,
+              width: `${u.width}px`
+            },
+            className: "selector"
+          }
+        ),
+        e
+      ] })
+    }
+  );
+}, hi = ({ children: e }) => {
+  const { moveItems: t, placeItems: r, findElementUnderPointer: n } = Wt(), [s, o, i] = ye((v) => [
+    v.select,
+    v.setSelection,
+    v.getSelection
+  ]), [a, l] = Q((v) => [
+    v.getBoardState,
+    v.updateBoardState
+  ]), d = de((v) => v.getBoardConfig), f = g.useRef({}), u = g.useRef({
+    items: []
+  }), E = g.useCallback(
+    async (v) => {
+      const { ctrlKey: C, metaKey: w, event: y } = v, h = await n(v);
+      if (h) {
+        y.stopPropagation();
+        const x = i();
+        u.current.items = x;
+        const m = $e(h);
+        x.includes(m) || (C || w ? (u.current.items = [...x, m], s([m])) : (u.current.items = [m], o([m]))), Object.assign(f.current, {
+          moving: !0,
+          remainX: 0,
+          remainY: 0
+        });
+      }
+    },
+    [n, i, s, o]
+  ), S = g.useCallback(
+    ({ deltaX: v, deltaY: C, event: w }) => {
+      if (f.current.moving) {
+        w.stopPropagation();
+        const { scale: y } = a(), h = f.current.remainX + v / y, x = f.current.remainY + C / y;
+        t(
+          u.current.items,
+          {
+            x: h,
+            y: x
+          },
+          !0
+        ), l({ movingItems: !0 });
+      }
+    },
+    [a, t, l]
+  ), b = g.useCallback(() => {
+    if (f.current.moving) {
+      const { gridSize: v = 1 } = d(), C = v || 1;
+      f.current = { moving: !1 }, r(u.current.items, {
+        type: "grid",
+        size: C
+      }), l({ movingItems: !1 });
+    }
+  }, [d, r, l]), p = g.useCallback(
+    (v) => {
+      if (["INPUT", "TEXTAREA"].includes(v.target.tagName))
+        return;
+      const C = i();
+      if (C.length) {
+        const { gridSize: w = 1 } = d();
+        let y = 0, h = 0;
+        switch (v.key) {
+          case "ArrowLeft":
+            y = -10;
+            break;
+          case "ArrowRight":
+            y = 10;
+            break;
+          case "ArrowUp":
+            h = -10;
+            break;
+          case "ArrowDown":
+            h = 10;
+            break;
+        }
+        (y || h) && (v.shiftKey && (y *= 5, h *= 5), (v.ctrlKey || v.altKey || v.metaKey) && (y /= 10, h /= 10), t(
+          C,
+          {
+            x: y,
+            y: h
+          },
+          !0
+        ), r(C, {
+          type: "grid",
+          size: w || 1
+        }), v.preventDefault());
+      }
+    },
+    [d, i, t, r]
+  );
+  return g.useEffect(() => (document.addEventListener("keydown", p), () => {
+    document.removeEventListener("keydown", p);
+  }), [p]), /* @__PURE__ */ k(gt, { onDragStart: E, onDrag: S, onDragEnd: b, children: e });
+};
+function Ur(e, t, r) {
+  return Math.min(Math.max(e, r), t);
+}
+class vi extends Error {
+  constructor(t) {
+    super(`Failed to parse color: "${t}"`);
+  }
+}
+var Ye = vi;
+function yi(e) {
+  if (typeof e != "string")
+    throw new Ye(e);
+  if (e.trim().toLowerCase() === "transparent")
+    return [0, 0, 0, 0];
+  let t = e.trim();
+  t = xi.test(e) ? Ci(e) : e;
+  const r = Ei.exec(t);
+  if (r) {
+    const i = Array.from(r).slice(1);
+    return [...i.slice(0, 3).map((a) => parseInt(Ge(a, 2), 16)), parseInt(Ge(i[3] || "f", 2), 16) / 255];
+  }
+  const n = wi.exec(t);
+  if (n) {
+    const i = Array.from(n).slice(1);
+    return [...i.slice(0, 3).map((a) => parseInt(a, 16)), parseInt(i[3] || "ff", 16) / 255];
+  }
+  const s = Ii.exec(t);
+  if (s) {
+    const i = Array.from(s).slice(1);
+    return [...i.slice(0, 3).map((a) => parseInt(a, 10)), parseFloat(i[3] || "1")];
+  }
+  const o = _i.exec(t);
+  if (o) {
+    const [i, a, l, d] = Array.from(o).slice(1).map(parseFloat);
+    if (Ur(0, 100, a) !== a)
+      throw new Ye(e);
+    if (Ur(0, 100, l) !== l)
+      throw new Ye(e);
+    return [...Ri(i, a, l), Number.isNaN(d) ? 1 : d];
+  }
+  throw new Ye(e);
+}
+function bi(e) {
+  let t = 5381, r = e.length;
+  for (; r; )
+    t = t * 33 ^ e.charCodeAt(--r);
+  return (t >>> 0) % 2341;
+}
+const Xr = (e) => parseInt(e.replace(/_/g, ""), 36), Si = "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 = Xr(t.substring(0, 3)), n = Xr(t.substring(3)).toString(16);
+  let s = "";
+  for (let o = 0; o < 6 - n.length; o++)
+    s += "0";
+  return e[r] = `${s}${n}`, e;
+}, {});
+function Ci(e) {
+  const t = e.toLowerCase().trim(), r = Si[bi(t)];
+  if (!r)
+    throw new Ye(e);
+  return `#${r}`;
+}
+const Ge = (e, t) => Array.from(Array(t)).map(() => e).join(""), Ei = new RegExp(`^#${Ge("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), wi = new RegExp(`^#${Ge("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), Ii = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Ge(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), _i = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, xi = /^[a-z]+$/i, Vr = (e) => Math.round(e * 255), Ri = (e, t, r) => {
+  let n = r / 100;
+  if (t === 0)
+    return [n, n, n].map(Vr);
+  const s = (e % 360 + 360) % 360 / 60, o = (1 - Math.abs(2 * n - 1)) * (t / 100), i = o * (1 - Math.abs(s % 2 - 1));
+  let a = 0, l = 0, d = 0;
+  s >= 0 && s < 1 ? (a = o, l = i) : s >= 1 && s < 2 ? (a = i, l = o) : s >= 2 && s < 3 ? (l = o, d = i) : s >= 3 && s < 4 ? (l = i, d = o) : s >= 4 && s < 5 ? (a = i, d = o) : s >= 5 && s < 6 && (a = o, d = i);
+  const f = n - o / 2, u = a + f, E = l + f, S = d + f;
+  return [u, E, S].map(Vr);
+};
+function Oi(e) {
+  if (e === "transparent")
+    return 0;
+  function t(o) {
+    const i = o / 255;
+    return i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
+  }
+  const [r, n, s] = yi(e);
+  return 0.2126 * t(r) + 0.7152 * t(n) + 0.0722 * t(s);
+}
+function ki(e) {
+  return Oi(e) > 0.179;
+}
+const Ai = Te.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  z-index: 210;
+  pointer-events: none;
+`, Mi = Te.div`
+  color: ${({ textColor: e }) => e};
+  font-weight: bold;
+  padding: 0 0.5em;
+  border-radius: 2px;
+  max-width: 5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: -0.5em;
+  margin-top: 1.7em;
+  whitespace: nowrap;
+  pointer-events: none;
+  background-color: ${({ color: e }) => e};
+`, Ni = ({ color: e = "#666", size: t = 40, text: r }) => {
+  const n = ki(e) ? "#222" : "#EEE";
+  return /* @__PURE__ */ ve(Ai, { children: [
+    /* @__PURE__ */ ve(
+      "svg",
+      {
+        version: "1.1",
+        id: "Layer_1",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "1064.7701 445.5539 419.8101 717.0565",
+        width: t,
+        height: t,
+        children: [
+          /* @__PURE__ */ k(
+            "path",
+            {
+              d: "m 1197.1015,869.718 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",
+              style: {
+                fill: n
+              }
+            }
+          ),
+          /* @__PURE__ */ k(
+            "path",
+            {
+              d: "m 1193.0939,861.12419 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z",
+              style: {
+                fill: "white",
+                stroke: "#111",
+                strokeWidth: 20
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ k(Mi, { color: e, textColor: n, children: r })
+  ] });
+}, Ti = g.memo(Ni), Li = ({ pos: e, ...t }) => /* @__PURE__ */ k(
+  "div",
+  {
+    style: {
+      transform: `translate(${e.x - 5}px, ${e.y - 3}px)`,
+      top: 0,
+      left: 0,
+      zIndex: 210,
+      position: "fixed",
+      pointerEvents: "none"
+    },
+    children: /* @__PURE__ */ k(Ti, { ...t })
+  }
+), Pi = () => {
+  const [e, t, r, n] = we(
+    (o) => [
+      o.getUser(),
+      o.getLocalUsers(),
+      o.cursors,
+      o.users
+    ]
+  ), s = t.reduce((o, i) => (i.id !== e.id && r[i.id] && (o[i.id] = r[i.id]), o), {});
+  return /* @__PURE__ */ k("div", { children: Object.entries(s).map(([o, i]) => /* @__PURE__ */ k(
+    Li,
+    {
+      pos: i,
+      text: n[o].name,
+      color: n[o].color
+    },
+    o
+  )) });
+}, ji = ({ children: e }) => {
+  const t = we((l) => l.getUser()), [r, n] = we((l) => [
+    l.moveCursor,
+    l.removeCursor
+  ]), [s, o] = Q((l) => [
+    l.getConfiguration,
+    l.getBoardState
+  ]), i = g.useCallback(
+    ({ clientX: l, clientY: d }) => {
+      const { scale: f, translateX: u, translateY: E } = o(), {
+        boardWrapperRect: { left: S, top: b }
+      } = s(), p = {
+        x: (l - S - u) / f,
+        y: (d - b - E) / f
+      };
+      r(t.id, p);
+    },
+    [o, s, r, t.id]
+  );
+  return /* @__PURE__ */ ve("div", { onPointerMove: i, onPointerLeave: () => {
+    n(t.id);
+  }, children: [
+    e,
+    /* @__PURE__ */ k(Pi, {})
+  ] });
+}, Di = (e) => {
+  const t = g.useRef({ hover: !1, x: 0, y: 0 }), r = g.useCallback((i) => {
+    const { clientX: a, clientY: l } = i;
+    t.current.x = a, t.current.y = l;
+  }, []), n = g.useCallback(() => {
+    t.current.hover = !0;
+  }, []), s = g.useCallback(() => {
+    t.current.hover = !1;
+  }, []);
+  return g.useEffect(() => {
+    const { current: i } = e;
+    return i ? (i.addEventListener("mousemove", r), i.addEventListener("mouseenter", n), i.addEventListener("mouseleave", s), () => {
+      i.removeEventListener("mousemove", r), i.removeEventListener("mouseenter", n), i.addEventListener("mouseleave", s);
+    }) : null;
+  }, [e, e.current, r, n, s]), g.useCallback(() => t.current, []);
+}, zi = [...Array(5).keys()].map((e) => `Digit${e + 1}`), Yi = () => {
+  const [e, t] = g.useState({}), [r, n] = Q((o) => [
+    o.getBoardState,
+    o.updateBoardState
+  ]), s = g.useCallback(
+    (o) => {
+      if (!["INPUT", "TEXTAREA"].includes(o.target.tagName) && zi.includes(o.code)) {
+        const i = o.code, { translateX: a, translateY: l, scale: d } = r();
+        o.altKey || o.metaKey || o.ctrlKey ? t((f) => ({
+          ...f,
+          [i]: { translateX: a, translateY: l, scale: d }
+        })) : e[i] && n(e[i]), o.preventDefault();
+      }
+    },
+    [r, e, n]
+  );
+  return g.useEffect(() => (document.addEventListener("keydown", s), () => {
+    document.removeEventListener("keydown", s);
+  }), [s]), null;
+}, Bi = ({ children: e, moveFirst: t = !1 }) => {
+  const r = g.useRef(null), [n, s, o, i] = Q((h) => [
+    {
+      translateX: h.boardState.translateX,
+      translateY: h.boardState.translateY,
+      scale: h.boardState.scale
+    },
+    h.config.itemExtent,
+    h.getConfiguration,
+    h.updateBoardState
+  ]), { setDim: a, zoomToCenter: l, zoomToExtent: d } = Bt(), [f, u] = g.useState(!1), E = g.useRef({}), S = ye((h) => h.getSelection), b = Di(r);
+  Yi();
+  const p = g.useCallback(() => {
+    const { itemExtent: h } = o();
+    d(h);
+  }, [o, d]);
+  g.useEffect(() => {
+    !f && s.left && (p(), u(!0));
+  }, [p, f, s]);
+  const v = g.useCallback(
+    ({ clientX: h, clientY: x, scale: m }) => {
+      l(1 - m / 500, { x: h, y: x }), clearTimeout(E.current.zoom), E.current.zoom = setTimeout(() => {
+        i({ zooming: !1 });
+      }, 200), i({ zooming: !0 });
+    },
+    [i, l]
+  ), C = g.useCallback(
+    async ({ deltaX: h, deltaY: x }) => {
+      a((m) => ({
+        ...m,
+        translateX: m.translateX + h,
+        translateY: m.translateY + x
+      })), clearTimeout(E.current.pan), E.current.pan = setTimeout(() => {
+        i({ panning: !1 });
+      }, 200), i({ panning: !0 });
+    },
+    [a, i]
+  ), w = g.useCallback(
+    (h) => {
+      if (["INPUT", "TEXTAREA"].includes(h.target.tagName))
+        return;
+      let x = 0, m = 0, I = 1;
+      switch (h.key) {
+        case "ArrowLeft":
+          x = -10;
+          break;
+        case "ArrowRight":
+          x = 10;
+          break;
+        case "ArrowUp":
+          m = -10;
+          break;
+        case "ArrowDown":
+          m = 10;
+          break;
+        case "PageUp":
+          I = 1.2;
+          break;
+        case "PageDown":
+          I = 0.8;
+          break;
+      }
+      if (x || m || I !== 1) {
+        const N = S();
+        if (I === 1 && N.length)
+          return;
+        h.shiftKey && (x *= 5, m *= 5), (h.ctrlKey || h.altKey || h.metaKey) && (x /= 5, m /= 5), a((A) => ({
+          ...A,
+          translateY: A.translateY + m,
+          translateX: A.translateX + x
+        })), l(I), h.preventDefault();
+      }
+      h.key === " " && !h.repeat && b().hover && l(3, b());
+    },
+    [S, a, l, b]
+  ), y = g.useCallback(
+    (h) => {
+      ["INPUT", "TEXTAREA"].includes(h.target.tagName) || h.key === " " && b().hover && l(1 / 3, b());
+    },
+    [b, l]
+  );
+  return g.useEffect(() => (document.addEventListener("keydown", w), document.addEventListener("keyup", y), () => {
+    document.removeEventListener("keydown", w), document.removeEventListener("keyup", y);
+  }), [w, y]), /* @__PURE__ */ k(
+    gt,
+    {
+      onPan: C,
+      onZoom: v,
+      mainAction: t ? "pan" : "drag",
+      children: /* @__PURE__ */ k(
+        "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
+        }
+      )
+    }
+  );
+}, Wi = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  zIndex: 210,
+  backgroundColor: "hsla(0, 40%, 50%, 0%)",
+  border: "2px dashed hsl(20, 55%, 40%)",
+  pointerEvents: "none"
+}, $i = () => {
+  const [e, t, r, n] = ye(
+    (u) => [
+      u.selection,
+      u.getSelection,
+      u.selectionBox,
+      u.setSelectionBox
+    ]
+  ), s = Q((u) => u.getConfiguration), { translateX: o, translateY: i, scale: a } = Q((u) => ({
+    translateX: u.boardState.translateX,
+    translateY: u.boardState.translateY,
+    scale: u.boardState.scale
+  })), l = de((u) => u.items), d = g.useCallback(() => {
+    const u = t(), { boardWrapperRect: E, boardWrapper: S } = s();
+    if (u.length === 0) {
+      n(null);
+      return;
+    }
+    const b = en(u, S);
+    if (!b) {
+      n(null);
+      return;
+    }
+    const { left: p, top: v, width: C, height: w } = b, y = {
+      left: p - E.left,
+      top: v - E.top,
+      height: w,
+      width: C
+    };
+    n(y);
+  }, [s, t, n]), f = Yt(d, [d], 300);
+  return g.useEffect(() => {
+    d(), f();
+  }, [
+    e,
+    l,
+    o,
+    i,
+    a,
+    d,
+    f
+  ]), !r || e.length < 2 ? null : /* @__PURE__ */ k(
+    "div",
+    {
+      style: {
+        ...Wi,
+        transform: `translate(${r.left}px, ${r.top}px)`,
+        height: `${r.height}px`,
+        width: `${r.width}px`
+      },
+      className: "selection"
+    }
+  );
+}, Ui = () => Q((t) => t.boardState.movingItems) ? null : /* @__PURE__ */ k($i, {}), sa = ({
+  moveFirst: e = !0,
+  style: t,
+  itemTemplates: r = {},
+  boardSize: n = on,
+  children: s,
+  showResizeHandle: o = !1
+}) => {
+  const i = Q(
+    (d) => d.updateConfiguration
+  ), { updateItemExtent: a } = Bt(), l = g.useMemo(
+    () => ({
+      userSelect: "none",
+      width: `${n}px`,
+      height: `${n}px`,
+      backgroundColor: "#333",
+      ...t
+    }),
+    [n, t]
+  );
+  return g.useEffect(() => {
+    i({
+      itemTemplates: r,
+      boardSize: n,
+      showResizeHandle: o
+    });
+  }, [r, n, o, i]), g.useEffect(() => {
+    a(), setTimeout(a, 2e3);
+  }, [a]), /* @__PURE__ */ ve(Hr, { children: [
+    /* @__PURE__ */ k(Bi, { moveFirst: e, children: /* @__PURE__ */ k(gi, { moveFirst: e, children: /* @__PURE__ */ k(hi, { moveFirst: e, children: /* @__PURE__ */ k(ji, { children: /* @__PURE__ */ ve(
+      "div",
+      {
+        onContextMenu: (d) => {
+          d.preventDefault();
+        },
+        style: l,
+        className: "board",
+        children: [
+          /* @__PURE__ */ k(di, {}),
+          s
+        ]
+      }
+    ) }) }) }) }),
+    /* @__PURE__ */ k(Ui, {})
+  ] });
+};
+export {
+  sa as Board,
+  ra as BoardWrapper,
+  na as RoomWrapper,
+  Hi as useAvailableActions,
+  Ji as useBoardConfig,
+  Bt as useBoardPosition,
+  Qi as useBoardState,
+  Fi as useDebouncedItems,
+  Wt as useItemActions,
+  Ls as useItemInteraction,
+  Gi as useItems,
+  ta as useMessage,
+  Zi as useSelectedItems,
+  Ki as useSelectionBox,
+  ea as useSessionInfo,
+  qi as useUsers,
+  ut as useWire
+};
+//# sourceMappingURL=react-sync-board.js.map