react-sync-board 1.1.0 → 1.1.1

package/dist/react-sync-board.js

@@ -28,14 +28,14 @@ function Yr() {
     return we;
   Tt = 1;
   var e = g, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, o = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function a(u, l, f) {
-    var d, c = {}, b = null, _ = null;
-    f !== void 0 && (b = "" + f), l.key !== void 0 && (b = "" + l.key), l.ref !== void 0 && (_ = l.ref);
-    for (d in l)
-      n.call(l, d) && !s.hasOwnProperty(d) && (c[d] = l[d]);
+  function a(u, l, d) {
+    var f, c = {}, b = null, _ = null;
+    d !== void 0 && (b = "" + d), l.key !== void 0 && (b = "" + l.key), l.ref !== void 0 && (_ = l.ref);
+    for (f in l)
+      n.call(l, f) && !s.hasOwnProperty(f) && (c[f] = l[f]);
     if (u && u.defaultProps)
-      for (d in l = u.defaultProps, l)
-        c[d] === void 0 && (c[d] = l[d]);
+      for (f in l = u.defaultProps, l)
+        c[f] === void 0 && (c[f] = l[f]);
     return { $$typeof: t, type: u, key: b, ref: _, props: c, _owner: o.current };
   }
   return we.Fragment = r, we.jsx = a, we.jsxs = a, we;
@@ -53,7 +53,7 @@ var Ce = {};
 var kt;
 function Br() {
   return kt || (kt = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = g, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), a = Symbol.for("react.provider"), u = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), d = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), w = Symbol.iterator, m = "@@iterator";
+    var e = g, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), a = Symbol.for("react.provider"), u = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), d = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), w = Symbol.iterator, m = "@@iterator";
     function E(i) {
       if (i === null || typeof i != "object")
         return null;
@@ -81,7 +81,7 @@ function Br() {
     var p = !1, h = !1, v = !1, C = !1, D = !1, k;
     k = Symbol.for("react.module.reference");
     function P(i) {
-      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || D || i === o || i === f || i === d || C || i === _ || p || h || v || typeof i == "object" && i !== null && (i.$$typeof === b || i.$$typeof === c || i.$$typeof === a || i.$$typeof === u || i.$$typeof === l || // This needs to include all possible module reference object
+      return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || D || i === o || i === d || i === f || C || i === _ || p || h || v || typeof i == "object" && i !== null && (i.$$typeof === b || i.$$typeof === c || i.$$typeof === a || i.$$typeof === u || i.$$typeof === l || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
@@ -113,9 +113,9 @@ function Br() {
           return "Profiler";
         case o:
           return "StrictMode";
-        case f:
-          return "Suspense";
         case d:
+          return "Suspense";
+        case f:
           return "SuspenseList";
       }
       if (typeof i == "object")
@@ -309,9 +309,9 @@ function Br() {
       if (typeof i == "string")
         return he(i);
       switch (i) {
-        case f:
-          return he("Suspense");
         case d:
+          return he("Suspense");
+        case f:
           return he("SuspenseList");
       }
       if (typeof i == "object")
@@ -782,7 +782,7 @@ const Xr = ({
   LoadingComponent: n = Wr,
   children: o
 }) => {
-  const [s, a] = g.useState(!1), [u, l] = g.useState(!1), [f, d] = g.useState(null), c = g.useRef(null), b = g.useRef(!1), _ = be(ot), w = g.useRef(!1);
+  const [s, a] = g.useState(!1), [u, l] = g.useState(!1), [d, f] = g.useState(null), c = g.useRef(null), b = g.useRef(!1), _ = be(ot), w = g.useRef(!1);
   return g.useEffect(() => (b.current = !0, () => {
     b.current = !1;
   }), []), g.useEffect(() => {
@@ -801,25 +801,25 @@ const Xr = ({
       console.log(`Is now master on channel ${r}…`), b.current && l(!0);
     },
     onJoined: (m) => {
-      console.log(`Connected on channel ${r}…`), c.current = m, b.current && (d(m), a(!0));
+      console.log(`Connected on channel ${r}…`), c.current = m, b.current && (f(m), a(!0));
     }
   })), () => {
     var m;
     (m = c.current) == null || m.leave();
-  }) : null, [r, t, e]), !s || !f ? /* @__PURE__ */ T(n, {}) : /* @__PURE__ */ T(
+  }) : null, [r, t, e]), !s || !d ? /* @__PURE__ */ T(n, {}) : /* @__PURE__ */ T(
     ot.Provider,
     {
-      value: { ..._, [r]: { wire: f, joined: s, isMaster: u, room: t } },
+      value: { ..._, [r]: { wire: d, joined: s, isMaster: u, room: t } },
       children: o
     }
   );
 }, Be = (e = "default") => (be(ot) || {})[e], Pt = (e) => {
   let t;
-  const r = /* @__PURE__ */ new Set(), n = (l, f) => {
-    const d = typeof l == "function" ? l(t) : l;
-    if (!Object.is(d, t)) {
+  const r = /* @__PURE__ */ new Set(), n = (l, d) => {
+    const f = typeof l == "function" ? l(t) : l;
+    if (!Object.is(f, t)) {
       const c = t;
-      t = f ?? typeof d != "object" ? d : Object.assign({}, t, d), r.forEach((b) => b(t, c));
+      t = d ?? typeof f != "object" ? f : Object.assign({}, t, f), r.forEach((b) => b(t, c));
     }
   }, o = () => t, u = { setState: n, getState: o, subscribe: (l) => (r.add(l), () => r.delete(l)), destroy: () => {
     ({ BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0 } && "production") !== "production" && console.warn(
@@ -882,11 +882,11 @@ function Kr() {
       return !0;
     }
   }
-  function f(c, b) {
+  function d(c, b) {
     return b();
   }
-  var d = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? f : u;
-  return Ze.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : d, Ze;
+  var f = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? d : u;
+  return Ze.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : f, Ze;
 }
 var Qe = {};
 /**
@@ -923,9 +923,9 @@ function Hr() {
     function o(y, p) {
       return y === p && (y !== 0 || 1 / y === 1 / p) || y !== y && p !== p;
     }
-    var s = typeof Object.is == "function" ? Object.is : o, a = e.useState, u = e.useEffect, l = e.useLayoutEffect, f = e.useDebugValue, d = !1, c = !1;
+    var s = typeof Object.is == "function" ? Object.is : o, a = e.useState, u = e.useEffect, l = e.useLayoutEffect, d = e.useDebugValue, f = !1, c = !1;
     function b(y, p, h) {
-      d || e.startTransition !== void 0 && (d = !0, r("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
+      f || e.startTransition !== void 0 && (f = !0, r("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
       var v = p();
       if (!c) {
         var C = p();
@@ -951,7 +951,7 @@ function Hr() {
           });
         };
         return y(M);
-      }, [y]), f(v), v;
+      }, [y]), d(v), v;
     }
     function _(y) {
       var p = y.getSnapshot, h = y.value;
@@ -990,11 +990,11 @@ function qr() {
     return Je;
   $t = 1;
   var e = g, t = tr();
-  function r(f, d) {
-    return f === d && (f !== 0 || 1 / f === 1 / d) || f !== f && d !== d;
+  function r(d, f) {
+    return d === f && (d !== 0 || 1 / d === 1 / f) || d !== d && f !== f;
   }
   var n = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, s = e.useRef, a = e.useEffect, u = e.useMemo, l = e.useDebugValue;
-  return Je.useSyncExternalStoreWithSelector = function(f, d, c, b, _) {
+  return Je.useSyncExternalStoreWithSelector = function(d, f, c, b, _) {
     var w = s(null);
     if (w.current === null) {
       var m = { hasValue: !1, value: null };
@@ -1018,12 +1018,12 @@ function qr() {
       }
       var x = !1, y, p, h = c === void 0 ? null : c;
       return [function() {
-        return R(d());
+        return R(f());
       }, h === null ? void 0 : function() {
         return R(h());
       }];
-    }, [d, c, b, _]);
-    var E = o(f, w[0], w[1]);
+    }, [f, c, b, _]);
+    var E = o(d, w[0], w[1]);
     return a(function() {
       m.hasValue = !0, m.value = E;
     }, [E]), l(E), E;
@@ -1044,11 +1044,11 @@ function Gr() {
   return At || (At = 1, process.env.NODE_ENV !== "production" && function() {
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
     var e = g, t = tr();
-    function r(d, c) {
-      return d === c && (d !== 0 || 1 / d === 1 / c) || d !== d && c !== c;
+    function r(f, c) {
+      return f === c && (f !== 0 || 1 / f === 1 / c) || f !== f && c !== c;
     }
     var n = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, s = e.useRef, a = e.useEffect, u = e.useMemo, l = e.useDebugValue;
-    function f(d, c, b, _, w) {
+    function d(f, c, b, _, w) {
       var m = s(null), E;
       m.current === null ? (E = {
         hasValue: !1,
@@ -1077,12 +1077,12 @@ function Gr() {
           return D(k());
         };
         return [P, M];
-      }, [c, b, _, w]), x = R[0], y = R[1], p = o(d, x, y);
+      }, [c, b, _, w]), x = R[0], y = R[1], p = o(f, x, y);
       return a(function() {
         E.hasValue = !0, E.value = p;
       }, [p]), l(p), p;
     }
-    et.useSyncExternalStoreWithSelector = f, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+    et.useSyncExternalStoreWithSelector = d, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
   }()), et;
 }
 (function(e) {
@@ -1122,14 +1122,14 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
     const s = it(t, o);
     if (!s)
       return null;
-    const { left: a, right: u, top: l, bottom: f } = s.getBoundingClientRect();
-    let d;
-    return n ? d = n : d = {
+    const { left: a, right: u, top: l, bottom: d } = s.getBoundingClientRect();
+    let f;
+    return n ? f = n : f = {
       left: a,
       top: l,
       right: u,
-      bottom: f
-    }, d.left = Math.min(a, d.left), d.top = Math.min(l, d.top), d.right = Math.max(u, d.right), d.bottom = Math.max(f, d.bottom), d;
+      bottom: d
+    }, f.left = Math.min(a, f.left), f.top = Math.min(l, f.top), f.right = Math.max(u, f.right), f.bottom = Math.max(d, f.bottom), f;
   }, null);
   return r && (r.width = r.right - r.left, r.height = r.bottom - r.top, r);
 }, tn = ({ x: e, y: t, width: r, height: n }, { type: o = "grid", size: s = 1, offset: a = { x: 0, y: 0 } }) => {
@@ -1137,24 +1137,24 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
     e + r / 2 - a.x,
     t + n / 2 - a.y
   ];
-  let f, d, c, b, _, w, m, E, R, x;
+  let d, f, c, b, _, w, m, E, R, x;
   const y = s / 1.1547;
   switch (o) {
     case "grid":
-      f = Math.round(u / s) * s, d = Math.round(l / s) * s;
+      d = Math.round(u / s) * s, f = Math.round(l / s) * s;
       break;
     case "hexH":
-      c = 2 * y, b = 3 * s, _ = Math.round(u / c) * c, m = Math.round(l / b) * b, w = _ > u ? _ - y : _ + y, E = m > l ? m - 1.5 * s : m + 1.5 * s, R = Math.hypot(_ - u, m - l), x = Math.hypot(w - u, E - l), R < x ? (f = _, d = m) : (f = w, d = E);
+      c = 2 * y, b = 3 * s, _ = Math.round(u / c) * c, m = Math.round(l / b) * b, w = _ > u ? _ - y : _ + y, E = m > l ? m - 1.5 * s : m + 1.5 * s, R = Math.hypot(_ - u, m - l), x = Math.hypot(w - u, E - l), R < x ? (d = _, f = m) : (d = w, f = E);
       break;
     case "hexV":
-      c = 3 * s, b = 2 * y, _ = Math.round(u / c) * c, m = Math.round(l / b) * b, w = _ > u ? _ - 1.5 * s : _ + 1.5 * s, E = m > l ? m - y : m + y, R = Math.hypot(_ - u, m - l), x = Math.hypot(w - u, E - l), R < x ? (f = _, d = m) : (f = w, d = E);
+      c = 3 * s, b = 2 * y, _ = Math.round(u / c) * c, m = Math.round(l / b) * b, w = _ > u ? _ - 1.5 * s : _ + 1.5 * s, E = m > l ? m - y : m + y, R = Math.hypot(_ - u, m - l), x = Math.hypot(w - u, E - l), R < x ? (d = _, f = m) : (d = w, f = E);
       break;
     default:
-      f = e + r / 2, d = t + n / 2;
+      d = e + r / 2, f = t + n / 2;
   }
   return {
-    x: f + a.x - r / 2,
-    y: d + a.y - n / 2
+    x: d + a.x - r / 2,
+    y: f + a.y - n / 2
   };
 }, zt = [
   "#037758",
@@ -1213,9 +1213,9 @@ const _e = (e, t) => e.classList && e.classList.contains(t), Te = (e, t) => _e(e
       })
     ), s({ ready: !0 });
   })();
-  const d = o(s, a, u), c = { ...d }, b = Object.fromEntries(
+  const f = o(s, a, u), c = { ...f }, b = Object.fromEntries(
     // Send the update message on all method calls
-    Object.entries(d).map(([_, w]) => typeof w == "function" && !_.startsWith("get") && !r.includes(_) ? [_, (...E) => {
+    Object.entries(f).map(([_, w]) => typeof w == "function" && !_.startsWith("get") && !r.includes(_) ? [_, (...E) => {
       const R = w(...E);
       return e.publish(`${t}_call`, [_, E]), R;
     }] : [_, w])
@@ -1479,15 +1479,15 @@ function ft(e, t, r, n = 0) {
       const l = () => {
         if (!a.current)
           return;
-        const d = a.current;
-        a.current = void 0, e.apply(d.this, d.args), u();
-      }, f = function(...d) {
-        o.current && clearTimeout(o.current), a.current = { args: d, this: this }, o.current = setTimeout(l, r), n > 0 && !s.current && (s.current = setTimeout(l, n));
+        const f = a.current;
+        a.current = void 0, e.apply(f.this, f.args), u();
+      }, d = function(...f) {
+        o.current && clearTimeout(o.current), a.current = { args: f, this: this }, o.current = setTimeout(l, r), n > 0 && !s.current && (s.current = setTimeout(l, n));
       };
-      return Object.defineProperties(f, {
+      return Object.defineProperties(d, {
         length: { value: e.length },
         name: { value: `${e.name || "anonymous"}__debounced__${r}` }
-      }), f;
+      }), d;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unsafe-assignment
     [r, n, ...t]
@@ -1501,23 +1501,23 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
   boardWrapperRect: u,
   boardSize: l
 }) => {
-  const f = {
+  const d = {
     left: -n * r + ze * r,
     right: u.width - o * r - ze * r,
     top: -a * r + ze * r,
     bottom: u.height - s * r - ze * r,
     maxRight: u.width - l * r,
     maxLeft: u.height - l * r
-  }, d = Math.min(
-    Math.max(e, f.left, f.maxRight),
-    f.right,
+  }, f = Math.min(
+    Math.max(e, d.left, d.maxRight),
+    d.right,
     0
   ), c = Math.min(
-    Math.max(t, f.top, f.maxLeft),
-    f.bottom,
+    Math.max(t, d.top, d.maxLeft),
+    d.bottom,
     0
   );
-  return [d, c];
+  return [f, c];
 }, dt = () => {
   const [
     e,
@@ -1557,7 +1557,7 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
       });
     },
     [e, n, t]
-  ), f = g.useCallback(
+  ), d = g.useCallback(
     (m, E) => {
       const { itemExtent: R, boardWrapperRect: x, boardSize: y } = n();
       let p = E;
@@ -1583,7 +1583,7 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
       });
     },
     [e, n, t]
-  ), d = g.useCallback(
+  ), f = g.useCallback(
     ({ left: m, top: E, width: R, height: x }) => {
       const { boardWrapperRect: y } = n(), p = y.width / R, h = y.height / x, C = Math.min(p, h) * mn, D = y.width / 2 - (m + R / 2) * C, k = y.height / 2 - (E + x / 2) * C;
       t({
@@ -1642,9 +1642,9 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
   }, [c, r]), {
     setDim: l,
     getDim: u,
-    zoomTo: f,
-    zoomToCenter: f,
-    zoomToExtent: d,
+    zoomTo: d,
+    zoomToCenter: d,
+    zoomToExtent: f,
     getCenter: b,
     updateItemExtent: w
   };
@@ -1676,8 +1676,8 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
   ]), {
     getItems: u,
     getItemIds: l,
-    setItemIds: f,
-    updateItems: d,
+    setItemIds: d,
+    updateItems: f,
     moveItems: c,
     removeItemsById: b,
     getItemList: _,
@@ -1712,9 +1712,9 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
       const U = l().filter((J) => O.includes(J)), Y = u(), W = Object.fromEntries(
         U.map((J) => [J, A({ ...Y[J] })])
       );
-      d(W), r();
+      f(W), r();
     },
-    [l, u, r, d]
+    [l, u, r, f]
   ), R = g.useCallback(
     (O) => {
       m(O), n(), r();
@@ -1735,9 +1735,9 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
       const $ = l(), A = $.filter((Y) => !O.includes(Y)), U = $.filter(
         (Y) => O.includes(Y)
       );
-      f([...A, ...U]);
+      d([...A, ...U]);
     },
-    [l, f]
+    [l, d]
   ), h = g.useCallback(
     (O, { type: $, size: A } = {}) => {
       const { boardWrapper: U } = a(), Y = {}, W = u();
@@ -1760,9 +1760,9 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
           ne
         );
         Y[J] = { ...te, ...V };
-      }), d(Y);
+      }), f(Y);
     },
-    [a, u, d]
+    [a, u, f]
   ), v = g.useCallback(
     (O, $) => {
       p(O), E(O, (A) => {
@@ -1779,17 +1779,17 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
     ]
   ), C = g.useCallback(
     (O) => {
-      f(O);
+      d(O);
     },
-    [f]
+    [d]
   ), D = g.useCallback(
     (O) => {
       const $ = l(), A = $.filter(
         (Y) => O.includes(Y)
       ), U = $.map((Y) => O.includes(Y) ? A.pop() : Y);
-      f(U), o();
+      d(U), o();
     },
-    [l, o, f]
+    [l, o, d]
   ), k = g.useCallback(
     (O, $) => {
       const A = u(), U = O.map((V) => A[V]), Y = $.map((V) => A[V]), W = $.reduce((V, ee) => (V[ee] = U.shift(), V), {}), J = Y.reduce((V, ee) => {
@@ -1800,11 +1800,11 @@ const ze = 100, Se = 1e3, mn = 0.8, Nt = ({
         };
         return V[ee.id] = he, V;
       }, {});
-      d(J);
+      f(J);
       const te = O.reduce((V, ee) => (V[ee] = $.shift(), V), {}), ne = l().map((V) => O.includes(V) ? te[V] : V);
-      f(ne);
+      d(ne);
     },
-    [u, d, l, f]
+    [u, f, l, d]
   ), P = g.useCallback(
     (O, $) => {
       const A = t(), U = O.map((Y, W) => !Y.x || !Y.y ? { ...Y, x: A.x + 2 * W, y: A.y + 2 * W } : Y);
@@ -1958,7 +1958,7 @@ const yn = (e, t) => {
   g.useEffect(() => (u.current = !0, () => {
     u.current = !1;
   }), []);
-  const f = g.useCallback(
+  const d = g.useCallback(
     (c) => {
       const b = t();
       if (c)
@@ -1967,8 +1967,8 @@ const yn = (e, t) => {
       return [_, _.map((w) => b[w])];
     },
     [t, o]
-  ), d = Jt(() => {
-    const [c, b] = f();
+  ), f = Jt(() => {
+    const [c, b] = d();
     if (c.length > 0) {
       if (!u.current)
         return;
@@ -1985,10 +1985,10 @@ const yn = (e, t) => {
       l(() => {
         a([]);
       });
-  }, [f, r]);
+  }, [d, r]);
   return vn(
-    () => d(),
-    [e, n, d],
+    () => f(),
+    [e, n, f],
     100
   ), {
     availableActions: s
@@ -2071,8 +2071,8 @@ const ar = g.createContext(), at = (e) => {
 }), cr = ({ storeName: e, children: t }) => {
   const { wire: r, isMaster: n } = Be("room"), [o, s] = g.useState(null), [a, u] = g.useState(!1), l = g.useRef(!1);
   return g.useEffect(() => {
-    let f = !0;
-    const d = [];
+    let d = !0;
+    const f = [];
     if (!o && !l.current)
       return l.current = !0, (() => {
         const b = Ne(
@@ -2093,10 +2093,10 @@ const ar = g.createContext(), at = (e) => {
             })
           )
         ), _ = b.subscribe((w) => {
-          w.ready && (_(), f && s(b));
+          w.ready && (_(), d && s(b));
         });
       })(), () => {
-        f = !1, l.current = !1, d.forEach((b) => b());
+        d = !1, l.current = !1, f.forEach((b) => b());
       };
   }, [o, e, r, r.userId]), g.useEffect(() => {
     if (o)
@@ -2108,11 +2108,11 @@ const ar = g.createContext(), at = (e) => {
       };
   }, [n, o, r]), g.useEffect(() => {
     if (o) {
-      const f = r.subscribe("userLeave", (d) => {
-        o.getState().removeUser(d);
+      const d = r.subscribe("userLeave", (f) => {
+        o.getState().removeUser(f);
       });
       return () => {
-        f();
+        d();
       };
     }
   }, [n, o, r]), g.useEffect(() => {
@@ -2241,7 +2241,7 @@ const ar = g.createContext(), at = (e) => {
   LoadingComponent: s,
   ...a
 }) => {
-  const [u] = g.useState(t || me()), [l] = g.useState(r || me()), [f] = g.useState(() => ({
+  const [u] = g.useState(t || me()), [l] = g.useState(r || me()), [d] = g.useState(() => ({
     itemIds: n.map(({ id: c }) => c),
     items: Object.fromEntries(n.map((c) => [c.id, c]))
   }));
@@ -2254,7 +2254,7 @@ const ar = g.createContext(), at = (e) => {
         Yt,
         {
           storeName: `${l}_item`,
-          defaultValue: f,
+          defaultValue: d,
           children: /* @__PURE__ */ T(Wt, { ...a, session: l })
         }
       ) })
@@ -2275,7 +2275,7 @@ const ar = g.createContext(), at = (e) => {
             Yt,
             {
               storeName: `${l}_item`,
-              defaultValue: f,
+              defaultValue: d,
               children: /* @__PURE__ */ T(Wt, { ...a, session: l })
             }
           ) })
@@ -2344,9 +2344,9 @@ const ie = new Pn(), We = ({
   onLongTap: a = de,
   onDoubleTap: u = de,
   onZoom: l,
-  mainAction: f = "drag"
+  mainAction: d = "drag"
 }) => {
-  const d = g.useRef(null), c = g.useRef({
+  const f = g.useRef(null), c = g.useRef({
     moving: !1,
     pointers: {},
     mainPointer: void 0
@@ -2484,10 +2484,10 @@ const ie = new Pn(), We = ({
       } else
         M = y, N = p;
       let K = h || v || C || D !== 1;
-      f !== "drag" && (K = !K);
+      d !== "drag" && (K = !K);
       const O = k !== "touch" ? !K : !P, $ = k !== "touch" ? K : P;
       if (O) {
-        c.current.gestureStart || (d.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout), ie.add(r, {
+        c.current.gestureStart || (f.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout), ie.add(r, {
           deltaX: 0,
           deltaY: 0,
           startX: c.current.startX,
@@ -2522,7 +2522,7 @@ const ie = new Pn(), We = ({
         });
       }
       if ($) {
-        c.current.gestureStart || (d.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout));
+        c.current.gestureStart || (f.current.style.cursor = "move", c.current.gestureStart = !0, clearTimeout(c.current.longTapTimeout));
         const A = M - c.current.prevX, U = N - c.current.prevY, { target: Y } = c.current;
         if (ie.add(o, {
           deltaX: A,
@@ -2574,7 +2574,7 @@ const ie = new Pn(), We = ({
           ctrlKey: h,
           metaKey: v,
           event: R
-        }), d.current.style.cursor = "auto";
+        }), f.current.style.cursor = "auto";
       else {
         const k = Date.now();
         c.current.noTap ? c.current.noTap = !1 : c.current.timeStart - k < 300 && ie.add(s, {
@@ -2612,7 +2612,7 @@ const ie = new Pn(), We = ({
         });
       },
       style: { touchAction: "none" },
-      ref: d,
+      ref: f,
       children: e
     }
   );
@@ -2644,23 +2644,23 @@ let Mn = { data: "" }, jn = (e) => typeof window == "object" ? ((e ? e.querySele
   return e;
 }, An = (e, t, r, n, o) => {
   let s = lr(e), a = ce[s] || (ce[s] = ((l) => {
-    let f = 0, d = 11;
-    for (; f < l.length; )
-      d = 101 * d + l.charCodeAt(f++) >>> 0;
-    return "go" + d;
+    let d = 0, f = 11;
+    for (; d < l.length; )
+      f = 101 * f + l.charCodeAt(d++) >>> 0;
+    return "go" + f;
   })(s));
   if (!ce[a]) {
-    let l = s !== e ? e : ((f) => {
-      let d, c, b = [{}];
-      for (; d = Dn.exec(f.replace($n, "")); )
-        d[4] ? b.shift() : d[3] ? (c = d[3].replace(Kt, " ").trim(), b.unshift(b[0][c] = b[0][c] || {})) : b[0][d[1]] = d[2].replace(Kt, " ").trim();
+    let l = s !== e ? e : ((d) => {
+      let f, c, b = [{}];
+      for (; f = Dn.exec(d.replace($n, "")); )
+        f[4] ? b.shift() : f[3] ? (c = f[3].replace(Kt, " ").trim(), b.unshift(b[0][c] = b[0][c] || {})) : b[0][f[1]] = f[2].replace(Kt, " ").trim();
       return b[0];
     })(e);
     ce[a] = fe(o ? { ["@keyframes " + a]: l } : l, r ? "" : "." + a);
   }
   let u = r && ce.g ? ce.g : null;
-  return r && (ce.g = ce[a]), ((l, f, d, c) => {
-    c ? f.data = f.data.replace(c, l) : f.data.indexOf(l) === -1 && (f.data = d ? l + f.data : f.data + l);
+  return r && (ce.g = ce[a]), ((l, d, f, c) => {
+    c ? d.data = d.data.replace(c, l) : d.data.indexOf(l) === -1 && (d.data = f ? l + d.data : d.data + l);
   })(ce[a], t, n, u), a;
 }, zn = (e, t, r) => e.reduce((n, o, s) => {
   let a = t[s];
@@ -2838,15 +2838,15 @@ const Zn = (e) => {
   state: { type: t, rotation: r = 0, id: n, locked: o, extraClasses: s, ...a } = {},
   animate: u = "hvr-pop",
   isSelected: l,
-  itemMap: f,
-  showResizeHandle: d = !0
+  itemMap: d,
+  showResizeHandle: f = !0
 }) => {
   var v;
   const c = g.useRef(null), {
     component: b = () => null,
     resizeDirections: _ = eo,
     resize: w = Qn
-  } = f[t], m = g.useCallback(
+  } = d[t], m = g.useCallback(
     (C) => e(n, C),
     [e, n]
   );
@@ -2894,7 +2894,7 @@ const Zn = (e) => {
               {
                 itemId: n,
                 state: a,
-                ErrorComponent: ((v = f == null ? void 0 : f.error) == null ? void 0 : v.component) || Gn,
+                ErrorComponent: ((v = d == null ? void 0 : d.error) == null ? void 0 : v.component) || Gn,
                 children: /* @__PURE__ */ T(b, { ...a, id: n, setState: m })
               }
             ),
@@ -2903,7 +2903,7 @@ const Zn = (e) => {
             /* @__PURE__ */ T("div", { className: `corner ${xe} ${Vn}` }),
             /* @__PURE__ */ T("div", { className: `corner ${xe} ${Wn}` }),
             /* @__PURE__ */ T("div", { className: `${xe} ${Fn}` }),
-            d && /* @__PURE__ */ ue(Qt, { children: [
+            f && /* @__PURE__ */ ue(Qt, { children: [
               _.b && /* @__PURE__ */ T(
                 rt,
                 {
@@ -2952,56 +2952,56 @@ const Zn = (e) => {
     y: a = 0,
     layer: u = 0,
     moving: l,
-    ...f
-  } = o(e, { getCurrentUser: t }), d = (u + 4) * 10 + 100 + (l ? 5 : 0);
+    ...d
+  } = o(e, { getCurrentUser: t }), f = (u + 4) * 10 + 100 + (l ? 5 : 0);
   return /* @__PURE__ */ T(
     "div",
     {
       className: r,
       style: {
         transform: `translate(${s}px, ${a}px)`,
-        zIndex: d
+        zIndex: f
       },
       children: /* @__PURE__ */ T(
         ro,
         {
           ...n,
           showResizeHandle: n.isSelected && n.showResizeHandle,
-          state: f
+          state: d
         }
       )
     }
   );
 }, so = Zt(oo), io = () => {
-  const { updateItem: e } = pt(), [t, r] = se((f) => [
-    f.itemIds,
-    f.items
+  const { updateItem: e } = pt(), [t, r] = se((d) => [
+    d.itemIds,
+    d.items
   ]), [n, o, s, a] = Z(
-    (f) => [
-      f.config.boardSize,
-      f.config.showResizeHandle,
-      f.config.itemTemplates,
-      f.selection
+    (d) => [
+      d.config.boardSize,
+      d.config.showResizeHandle,
+      d.config.itemTemplates,
+      d.selection
     ]
-  ), [u] = ge((f) => [f.getUser]), l = H({
+  ), [u] = ge((d) => [d.getUser]), l = H({
     position: "absolute",
     top: `${n / 2}px`,
     left: `${n / 2}px`,
     display: "inline-block"
   });
-  return t.map((f) => /* @__PURE__ */ T(
+  return t.map((d) => /* @__PURE__ */ T(
     so,
     {
-      state: r[f],
+      state: r[d],
       setState: e,
-      isSelected: a.includes(f),
+      isSelected: a.includes(d),
       itemMap: s,
       boardSize: n,
       getCurrentUser: u,
       showResizeHandle: o,
       className: l
     },
-    f
+    d
   ));
 }, ao = H({
   zIndex: 210,
@@ -3034,23 +3034,23 @@ const Zn = (e) => {
     h.getConfiguration,
     h.getBoardState,
     h.updateBoardState
-  ]), { findElementUnderPointer: f } = pt(), [d] = se((h) => [h.getItems]), [c, b] = g.useState({}), [, _] = g.useTransition(), w = g.useRef(null), m = g.useRef({
+  ]), { findElementUnderPointer: d } = pt(), [f] = se((h) => [h.getItems]), [c, b] = g.useState({}), [, _] = g.useTransition(), w = g.useRef(null), m = g.useRef({
     moving: !1
   });
   return g.useEffect(() => (n(), () => {
     n();
   }), [n]), g.useEffect(() => {
     if (m.current.moving) {
-      const h = d(), { boardWrapper: v } = a(), C = co(h, v);
+      const h = f(), { boardWrapper: v } = a(), C = co(h, v);
       _(() => {
         o(C);
       });
     }
-  }, [a, d, c, o]), /* @__PURE__ */ T(
+  }, [a, f, c, o]), /* @__PURE__ */ T(
     We,
     {
       onDragStart: async (h) => {
-        await f(h) || (m.current.moving = !0, _(() => {
+        await d(h) || (m.current.moving = !0, _(() => {
           l({ selecting: !0 });
         }), w.current.style.cursor = "crosshair");
       },
@@ -3066,7 +3066,7 @@ const Zn = (e) => {
         }), m.current.moving = !1, b({ moving: !1 }), w.current.style.cursor = "auto");
       },
       onTap: (h) => {
-        const { target: v, ctrlKey: C, metaKey: D } = h, k = f(h);
+        const { target: v, ctrlKey: C, metaKey: D } = h, k = d(h);
         if (!k && Te(v, "board"))
           n();
         else {
@@ -3146,7 +3146,7 @@ const go = ({ children: e }) => {
     E.getSelection,
     E.getBoardState,
     E.updateBoardState
-  ]), [f] = se((E) => [E.getBoardConfig]), d = g.useRef({}), c = g.useRef({
+  ]), [d] = se((E) => [E.getBoardConfig]), f = g.useRef({}), c = g.useRef({
     items: []
   }), b = (E) => {
     const { ctrlKey: R, metaKey: x, event: y } = E, p = n(E);
@@ -3155,16 +3155,16 @@ const go = ({ children: e }) => {
       const h = a();
       c.current.items = h;
       const v = ke(p);
-      h.includes(v) || (R || x ? (c.current.items = [...h, v], o([v])) : (c.current.items = [v], s([v]))), Object.assign(d.current, {
+      h.includes(v) || (R || x ? (c.current.items = [...h, v], o([v])) : (c.current.items = [v], s([v]))), Object.assign(f.current, {
         moving: !0,
         remainX: 0,
         remainY: 0
       });
     }
   }, _ = ({ deltaX: E, deltaY: R, event: x }) => {
-    if (d.current.moving) {
+    if (f.current.moving) {
       x.stopPropagation();
-      const { scale: y } = u(), p = d.current.remainX + E / y, h = d.current.remainY + R / y;
+      const { scale: y } = u(), p = f.current.remainX + E / y, h = f.current.remainY + R / y;
       t(
         c.current.items,
         {
@@ -3175,9 +3175,9 @@ const go = ({ children: e }) => {
       ), l({ movingItems: !0 });
     }
   }, w = () => {
-    if (d.current.moving) {
-      const { gridSize: E = 1 } = f(), R = E || 1;
-      d.current = { moving: !1 }, r(c.current.items, {
+    if (f.current.moving) {
+      const { gridSize: E = 1 } = d(), R = E || 1;
+      f.current = { moving: !1 }, r(c.current.items, {
         type: "grid",
         size: R
       }), l({ movingItems: !1 });
@@ -3188,7 +3188,7 @@ const go = ({ children: e }) => {
       return;
     const R = a();
     if (R.length) {
-      const { gridSize: x = 1 } = f();
+      const { gridSize: x = 1 } = d();
       let y = 0, p = 0;
       switch (E.key) {
         case "ArrowLeft":
@@ -3235,8 +3235,8 @@ const go = ({ children: e }) => {
   return pe(document, "keydown", (o) => {
     if (!["INPUT", "TEXTAREA"].includes(o.target.tagName) && vo.includes(o.code)) {
       const s = o.code, { translateX: a, translateY: u, scale: l } = r();
-      o.altKey || o.metaKey || o.ctrlKey ? t((f) => ({
-        ...f,
+      o.altKey || o.metaKey || o.ctrlKey ? t((d) => ({
+        ...d,
         [s]: { translateX: a, translateY: u, scale: l }
       })) : e[s] && n(e[s]), o.preventDefault();
     }
@@ -3258,17 +3258,17 @@ const go = ({ children: e }) => {
     p.getConfiguration,
     p.updateBoardState,
     p.getSelection
-  ]), { setDim: l, zoomToCenter: f, zoomToExtent: d } = dt(), [c, b] = g.useState(!1), _ = g.useRef({}), w = ho(r);
+  ]), { setDim: l, zoomToCenter: d, zoomToExtent: f } = dt(), [c, b] = g.useState(!1), _ = g.useRef({}), w = ho(r);
   yo();
   const m = g.useCallback(() => {
     const { itemExtent: p } = s();
-    d(p);
-  }, [s, d]);
+    f(p);
+  }, [s, f]);
   g.useEffect(() => {
     !c && o.left && (m(), b(!0));
   }, [m, c, o]);
   const E = ({ clientX: p, clientY: h, scale: v }) => {
-    f(1 - v / 500, { x: p, y: h }), clearTimeout(_.current.zoom), _.current.zoom = setTimeout(() => {
+    d(1 - v / 500, { x: p, y: h }), clearTimeout(_.current.zoom), _.current.zoom = setTimeout(() => {
       a({ zooming: !1 });
     }, 200), a({ zooming: !0 });
   }, R = ({ deltaX: p, deltaY: h }) => {
@@ -3311,11 +3311,11 @@ const go = ({ children: e }) => {
         ...k,
         translateY: k.translateY + v,
         translateX: k.translateX + h
-      })), f(C), p.preventDefault();
+      })), d(C), p.preventDefault();
     }
-    p.key === " " && !p.repeat && w().hover && f(3, w());
+    p.key === " " && !p.repeat && w().hover && d(3, w());
   }, y = (p) => {
-    ["INPUT", "TEXTAREA"].includes(p.target.tagName) || p.key === " " && w().hover && f(1 / 3, w());
+    ["INPUT", "TEXTAREA"].includes(p.target.tagName) || p.key === " " && w().hover && d(1 / 3, w());
   };
   return pe(document, "keydown", x), pe(document, "keyup", y), /* @__PURE__ */ T(
     We,
@@ -3365,7 +3365,7 @@ const go = ({ children: e }) => {
       translateY: c.boardState.translateY,
       scale: c.boardState.scale
     }
-  ]), [l] = se((c) => [c.items]), f = g.useCallback(() => {
+  ]), [l] = se((c) => [c.items]), d = g.useCallback(() => {
     const c = t(), { boardWrapperRect: b, boardWrapper: _ } = o();
     if (c.length === 0) {
       n(null);
@@ -3383,17 +3383,17 @@ const go = ({ children: e }) => {
       width: R
     };
     n(y);
-  }, [o, t, n]), d = ft(f, [f], 300);
+  }, [o, t, n]), f = ft(d, [d], 300);
   return g.useEffect(() => {
-    f(), d();
+    d(), f();
   }, [
     e,
     l,
     s,
     a,
     u,
-    f,
-    d
+    d,
+    f
   ]), !r || e.length < 2 ? null : /* @__PURE__ */ T(
     "div",
     {
@@ -3440,8 +3440,8 @@ function xo(e, t, r = !0) {
     if (!n || !a)
       return;
     let u = !0;
-    const l = (...f) => {
-      u && o.current(...f);
+    const l = (...d) => {
+      u && o.current(...d);
     };
     return n.subscribe(a, l), () => {
       u = !1, n.unsubscribe(a, l);
@@ -3481,12 +3481,12 @@ function Io(e) {
   }
   const s = Do.exec(t);
   if (s) {
-    const [a, u, l, f] = Array.from(s).slice(1).map(parseFloat);
+    const [a, u, l, d] = Array.from(s).slice(1).map(parseFloat);
     if (Ht(0, 100, u) !== u)
       throw new Re(e);
     if (Ht(0, 100, l) !== l)
       throw new Re(e);
-    return [...Ao(a, u, l), Number.isNaN(f) ? 1 : f];
+    return [...Ao(a, u, l), Number.isNaN(d) ? 1 : d];
   }
   throw new Re(e);
 }
@@ -3514,9 +3514,9 @@ const Pe = (e, t) => Array.from(Array(t)).map(() => e).join(""), Po = new RegExp
   if (t === 0)
     return [n, n, n].map(Gt);
   const o = (e % 360 + 360) % 360 / 60, s = (1 - Math.abs(2 * n - 1)) * (t / 100), a = s * (1 - Math.abs(o % 2 - 1));
-  let u = 0, l = 0, f = 0;
-  o >= 0 && o < 1 ? (u = s, l = a) : o >= 1 && o < 2 ? (u = a, l = s) : o >= 2 && o < 3 ? (l = s, f = a) : o >= 3 && o < 4 ? (l = a, f = s) : o >= 4 && o < 5 ? (u = a, f = s) : o >= 5 && o < 6 && (u = s, f = a);
-  const d = n - s / 2, c = u + d, b = l + d, _ = f + d;
+  let u = 0, l = 0, d = 0;
+  o >= 0 && o < 1 ? (u = s, l = a) : o >= 1 && o < 2 ? (u = a, l = s) : o >= 2 && o < 3 ? (l = s, d = a) : o >= 3 && o < 4 ? (l = a, d = s) : o >= 4 && o < 5 ? (u = a, d = s) : o >= 5 && o < 6 && (u = s, d = a);
+  const f = n - s / 2, c = u + f, b = l + f, _ = d + f;
   return [c, b, _].map(Gt);
 };
 function zo(e) {
@@ -3635,12 +3635,12 @@ const Yo = H({
     l.getConfiguration,
     l.getBoardState
   ]);
-  return /* @__PURE__ */ ue("div", { onPointerMove: ({ clientX: l, clientY: f }) => {
-    const { scale: d, translateX: c, translateY: b } = s(), {
+  return /* @__PURE__ */ ue("div", { onPointerMove: ({ clientX: l, clientY: d }) => {
+    const { scale: f, translateX: c, translateY: b } = s(), {
       boardWrapperRect: { left: _, top: w }
     } = o(), m = {
-      x: (l - _ - c) / d,
-      y: (f - w - b) / d
+      x: (l - _ - c) / f,
+      y: (d - w - b) / f
     };
     r(t.id, m);
   }, onPointerLeave: () => {
@@ -3663,7 +3663,7 @@ const Yo = H({
   showResizeHandle: a = !1,
   Wrapper: u = Ko
 }) => {
-  const l = g.useRef(null), [f, d] = Z((w) => [
+  const l = g.useRef(null), [d, f] = Z((w) => [
     w.config.uid,
     w.updateConfiguration
   ]), { updateItemExtent: c } = dt(), b = {
@@ -3681,23 +3681,25 @@ const Yo = H({
       document.body.removeEventListener("wheel", w);
     };
   }, []), g.useEffect(() => {
-    d({
+    f({
       boardWrapper: l.current
     });
-  }, [d]), g.useEffect(() => {
-    f || d({
+  }, [f]), g.useEffect(() => {
+    d || f({
       uid: me()
     });
-  }, [f, d]), g.useEffect(() => {
-    d({
+  }, [d, f]), g.useEffect(() => {
+    f({
       itemTemplates: n,
       boardSize: o,
       showResizeHandle: a
     });
-  }, [n, o, a, d]), g.useEffect(() => {
-    c(), setTimeout(c, 2e3);
-  }, [c]), xo(l, () => {
-    l.current && d({
+  }, [n, o, a, f]), g.useEffect(() => {
+    f({
+      boardWrapperRect: l.current.getBoundingClientRect()
+    }), c(), setTimeout(c, 2e3);
+  }, [f, c]), xo(l, () => {
+    l.current && f({
       boardWrapperRect: l.current.getBoundingClientRect()
     });
   });
@@ -3706,7 +3708,7 @@ const Yo = H({
     "div",
     {
       ref: l,
-      id: f,
+      id: d,
       className: `sync-board ${_}`,
       children: [
         /* @__PURE__ */ T(So, { moveFirst: e, children: /* @__PURE__ */ T(uo, { moveFirst: e, children: /* @__PURE__ */ T(go, { moveFirst: e, children: /* @__PURE__ */ T(Fo, { children: /* @__PURE__ */ T(u, { children: /* @__PURE__ */ ue(