react-sync-board 1.3.0 → 1.4.0

package/dist/react-sync-board.js

@@ -1,18 +1,20 @@
-import e, { memo as t, useCallback as n, useContext as r, useEffect as i, useMemo as a, useRef as o } from "react";
+import e, { memo as t, useCallback as n, useContext as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createStore as s } from "zustand";
+import { useStoreWithEqualityFn as c } from "zustand/traditional";
+import { shallow as l } from "zustand/shallow";
+import { useDebouncedCallback as u, useDebouncedEffect as d, useEventListener as f, useResizeObserver as p } from "@react-hookz/web";
 //#region \0rolldown/runtime.js
-var s = Object.create, c = Object.defineProperty, l = Object.getOwnPropertyDescriptor, u = Object.getOwnPropertyNames, d = Object.getPrototypeOf, f = Object.prototype.hasOwnProperty, p = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), m = (e, t, n, r) => {
-	if (t && typeof t == "object" || typeof t == "function") for (var i = u(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !f.call(e, s) && s !== n && c(e, s, {
+var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, _ = Object.getOwnPropertyNames, v = Object.getPrototypeOf, y = Object.prototype.hasOwnProperty, b = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), x = (e, t, n, r) => {
+	if (t && typeof t == "object" || typeof t == "function") for (var i = _(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !y.call(e, s) && s !== n && h(e, s, {
 		get: ((e) => t[e]).bind(null, s),
-		enumerable: !(r = l(t, s)) || r.enumerable
+		enumerable: !(r = g(t, s)) || r.enumerable
 	});
 	return e;
-}, h = (e, t, n) => (n = e == null ? {} : s(d(e)), m(t || !e || !e.__esModule || !f.call(e, "default") ? c(n, "default", {
+}, S = (e, t, n) => (n = e == null ? {} : m(v(e)), x(t || !e || !e.__esModule || !y.call(e, "default") ? h(n, "default", {
 	value: e,
 	enumerable: !0
-}) : n, e)), g = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), _ = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce((e, t) => (t &= 63, e += t < 36 ? t.toString(36) : t < 62 ? (t - 26).toString(36).toUpperCase() : t > 62 ? "-" : "_", e), ""), v = class {
+}) : n, e)), C = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce((e, t) => (t &= 63, e += t < 36 ? t.toString(36) : t < 62 ? (t - 26).toString(36).toUpperCase() : t > 62 ? "-" : "_", e), ""), w = class {
 	constructor(e, t, n = null) {
 		this._socket = e, this.userId = n, this.room = t, this.toUnregister = [() => {
 			this._socket.off(`${this.room}.isMaster`), this._socket.off(`${this.room}.roomJoined`), this._socket.off(`${this.room}._call`);
@@ -26,7 +28,7 @@ var s = Object.create, c = Object.defineProperty, l = Object.getOwnPropertyDescr
 		});
 	}
 	async _callServerRPC(e, t) {
-		let n = _();
+		let n = C();
 		return new Promise((r, i) => {
 			this._socket.once(`${this.room}._result.${n}`, (e) => {
 				e.hasOwnProperty("ok") ? r(e.ok) : i(e.err);
@@ -72,8 +74,8 @@ var s = Object.create, c = Object.defineProperty, l = Object.getOwnPropertyDescr
 			params: t
 		});
 	}
-}, y = ({ socket: e, room: t, onJoined: n = () => {}, onMaster: r = () => {}, userId: i = null }) => {
-	let a = new v(e, t, i);
+}, ee = ({ socket: e, room: t, onJoined: n = () => {}, onMaster: r = () => {}, userId: i = null }) => {
+	let a = new w(e, t, i);
 	return new Promise((o) => {
 		let s = !0;
 		e.on(`${t}.isMaster`, () => {
@@ -90,198 +92,7 @@ var s = Object.create, c = Object.defineProperty, l = Object.getOwnPropertyDescr
 			userId: i
 		});
 	});
-}, b = /* @__PURE__ */ p(((e) => {
-	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-	function r(e, n, r) {
-		var i = null;
-		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
-		else r = n;
-		return n = r.ref, {
-			$$typeof: t,
-			type: e,
-			key: i,
-			ref: n === void 0 ? null : n,
-			props: r
-		};
-	}
-	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), x = /* @__PURE__ */ p(((e) => {
-	process.env.NODE_ENV !== "production" && (function() {
-		function t(e) {
-			if (e == null) return null;
-			if (typeof e == "function") return e.$$typeof === te ? null : e.displayName || e.name || null;
-			if (typeof e == "string") return e;
-			switch (e) {
-				case v: return "Fragment";
-				case b: return "Profiler";
-				case y: return "StrictMode";
-				case w: return "Suspense";
-				case T: return "SuspenseList";
-				case O: return "Activity";
-				case ee: return "ViewTransition";
-			}
-			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
-				case _: return "Portal";
-				case S: return e.displayName || "Context";
-				case x: return (e._context.displayName || "Context") + ".Consumer";
-				case C:
-					var n = e.render;
-					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
-				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
-				case D:
-					n = e._payload, e = e._init;
-					try {
-						return t(e(n));
-					} catch {}
-			}
-			return null;
-		}
-		function n(e) {
-			return "" + e;
-		}
-		function r(e) {
-			try {
-				n(e);
-				var t = !1;
-			} catch {
-				t = !0;
-			}
-			if (t) {
-				t = console;
-				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
-			}
-		}
-		function i(e) {
-			if (e === v) return "<>";
-			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
-			try {
-				var n = t(e);
-				return n ? "<" + n + ">" : "<...>";
-			} catch {
-				return "<...>";
-			}
-		}
-		function a() {
-			var e = k.A;
-			return e === null ? null : e.getOwner();
-		}
-		function o() {
-			return Error("react-stack-top-frame");
-		}
-		function s(e) {
-			if (ne.call(e, "key")) {
-				var t = Object.getOwnPropertyDescriptor(e, "key").get;
-				if (t && t.isReactWarning) return !1;
-			}
-			return e.key !== void 0;
-		}
-		function c(e, t) {
-			function n() {
-				ie || (ie = !0, console.error("%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://react.dev/link/special-props)", t));
-			}
-			n.isReactWarning = !0, Object.defineProperty(e, "key", {
-				get: n,
-				configurable: !0
-			});
-		}
-		function l() {
-			var e = t(this.type);
-			return j[e] || (j[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
-		}
-		function u(e, t, n, r, i, a) {
-			var o = n.ref;
-			return e = {
-				$$typeof: h,
-				type: e,
-				key: t,
-				props: n,
-				_owner: r
-			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				value: null
-			}) : Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				get: l
-			}), e._store = {}, Object.defineProperty(e._store, "validated", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: 0
-			}), Object.defineProperty(e, "_debugInfo", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: null
-			}), Object.defineProperty(e, "_debugStack", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: i
-			}), Object.defineProperty(e, "_debugTask", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: a
-			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-		}
-		function d(e, n, i, o, l, d) {
-			var p = n.children;
-			if (p !== void 0) {
-				if (o) {
-					if (re(p)) {
-						for (o = 0; o < p.length; o++) f(p[o]);
-						Object.freeze && Object.freeze(p);
-					} else console.error("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 f(p);
-			}
-			if (ne.call(n, "key")) {
-				p = t(e);
-				var m = Object.keys(n).filter(function(e) {
-					return e !== "key";
-				});
-				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", P[p + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, p, m, p), P[p + o] = !0);
-			}
-			if (p = null, i !== void 0 && (r(i), p = "" + i), s(n) && (r(n.key), p = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
-			else i = n;
-			return p && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), u(e, p, i, a(), l, d);
-		}
-		function f(e) {
-			p(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? p(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-		}
-		function p(e) {
-			return typeof e == "object" && !!e && e.$$typeof === h;
-		}
-		var m = g("react"), h = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), ee = Symbol.for("react.view_transition"), te = Symbol.for("react.client.reference"), k = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ne = Object.prototype.hasOwnProperty, re = Array.isArray, A = console.createTask ? console.createTask : function() {
-			return null;
-		};
-		m = { react_stack_bottom_frame: function(e) {
-			return e();
-		} };
-		var ie, j = {}, M = m.react_stack_bottom_frame.bind(m, o)(), N = A(i(o)), P = {};
-		e.Fragment = v, e.jsx = function(e, t, n) {
-			var r = 1e4 > k.recentlyCreatedOwnerStacks++;
-			if (r) {
-				var a = Error.stackTraceLimit;
-				Error.stackTraceLimit = 10;
-				var o = Error("react-stack-top-frame");
-				Error.stackTraceLimit = a;
-			} else o = M;
-			return d(e, t, n, !1, o, r ? A(i(e)) : N);
-		}, e.jsxs = function(e, t, n) {
-			var r = 1e4 > k.recentlyCreatedOwnerStacks++;
-			if (r) {
-				var a = Error.stackTraceLimit;
-				Error.stackTraceLimit = 10;
-				var o = Error("react-stack-top-frame");
-				Error.stackTraceLimit = a;
-			} else o = M;
-			return d(e, t, n, !0, o, r ? A(i(e)) : N);
-		};
-	})();
-})), S = (/* @__PURE__ */ p(((e, t) => {
-	t.exports = process.env.NODE_ENV === "production" ? b() : x();
-})))(), C = e.createContext(), w = () => /* @__PURE__ */ (0, S.jsx)("div", {
+}, T = e.createContext(), te = () => /* @__PURE__ */ a("div", {
 	style: {
 		position: "absolute",
 		top: "0",
@@ -291,304 +102,74 @@ var s = Object.create, c = Object.defineProperty, l = Object.getOwnPropertyDescr
 		justifyContent: "center",
 		alignItems: "center"
 	},
-	children: /* @__PURE__ */ (0, S.jsx)("h2", { children: "🌀 Loading..." })
-}), T = ({ socket: t, room: n, channel: i = "default", LoadingComponent: a = w, children: o }) => {
-	let [s, c] = e.useState(!1), [l, u] = e.useState(!1), [d, f] = e.useState(null), p = e.useRef(null), m = e.useRef(!1), h = r(C), g = e.useRef(!1);
-	return e.useEffect(() => (m.current = !0, () => {
-		m.current = !1;
+	children: /* @__PURE__ */ a("h2", { children: "🌀 Loading..." })
+}), E = ({ socket: t, room: n, channel: i = "default", LoadingComponent: o = te, children: s }) => {
+	let [c, l] = e.useState(!1), [u, d] = e.useState(!1), [f, p] = e.useState(null), m = e.useRef(null), h = e.useRef(!1), g = r(T), _ = e.useRef(!1);
+	return e.useEffect(() => (h.current = !0, () => {
+		h.current = !1;
 	}), []), e.useEffect(() => {
 		if (!t) return null;
 		let e = () => {
-			console.log(`Disconnected from ${i}…`), m.current && (c(!1), u(!1));
+			console.log(`Disconnected from ${i}…`), h.current && (l(!1), d(!1));
 		};
 		return t.on("disconnect", e), () => {
 			t.off("disconnect", e);
 		};
-	}, [i, t]), e.useEffect(() => t ? (t.connected || t.connect(), console.log(`Try to connect to wire ${n} on channel ${i}`), g.current || (g.current = !0, y({
+	}, [i, t]), e.useEffect(() => t ? (t.connected || t.connect(), console.log(`Try to connect to wire ${n} on channel ${i}`), _.current || (_.current = !0, ee({
 		socket: t,
 		room: n,
 		onMaster: () => {
-			console.log(`Is now master on channel ${i}…`), m.current && u(!0);
+			console.log(`Is now master on channel ${i}…`), h.current && d(!0);
 		},
 		onJoined: (e) => {
-			console.log(`Connected on channel ${i}…`), p.current = e, m.current && (f(e), c(!0));
+			console.log(`Connected on channel ${i}…`), m.current = e, h.current && (p(e), l(!0));
 		}
 	})), () => {
-		p.current?.leave();
+		m.current?.leave();
 	}) : null, [
 		i,
 		n,
 		t
-	]), !s || !d ? /* @__PURE__ */ (0, S.jsx)(a, {}) : /* @__PURE__ */ (0, S.jsx)(C.Provider, {
+	]), !c || !f ? /* @__PURE__ */ a(o, {}) : /* @__PURE__ */ a(T.Provider, {
 		value: {
-			...h,
+			...g,
 			[i]: {
-				wire: d,
-				joined: s,
-				isMaster: l,
+				wire: f,
+				joined: c,
+				isMaster: u,
 				room: n
 			}
 		},
-		children: o
+		children: s
 	});
-}, E = (e = "default") => (r(C) || {})[e], D = (e) => {
-	let t, n = /* @__PURE__ */ new Set(), r = (e, r) => {
-		let i = typeof e == "function" ? e(t) : e;
-		if (!Object.is(i, t)) {
-			let e = t;
-			t = r ?? (typeof i != "object" || !i) ? i : Object.assign({}, t, i), n.forEach((n) => n(t, e));
-		}
-	}, i = () => t, a = {
-		setState: r,
-		getState: i,
-		getInitialState: () => o,
-		subscribe: (e) => (n.add(e), () => n.delete(e))
-	}, o = t = e(r, i, a);
-	return a;
-}, O = ((e) => e ? D(e) : D), ee = /* @__PURE__ */ p(((e) => {
-	var t = g("react");
-	function n(e, t) {
-		return e === t && (e !== 0 || 1 / e == 1 / t) || e !== e && t !== t;
-	}
-	var r = typeof Object.is == "function" ? Object.is : n, i = t.useState, a = t.useEffect, o = t.useLayoutEffect, s = t.useDebugValue;
-	function c(e, t) {
-		var n = t(), r = i({ inst: {
-			value: n,
-			getSnapshot: t
-		} }), c = r[0].inst, u = r[1];
-		return o(function() {
-			c.value = n, c.getSnapshot = t, l(c) && u({ inst: c });
-		}, [
-			e,
-			n,
-			t
-		]), a(function() {
-			return l(c) && u({ inst: c }), e(function() {
-				l(c) && u({ inst: c });
-			});
-		}, [e]), s(n), n;
-	}
-	function l(e) {
-		var t = e.getSnapshot;
-		e = e.value;
-		try {
-			var n = t();
-			return !r(e, n);
-		} catch {
-			return !0;
-		}
-	}
-	function u(e, t) {
-		return t();
-	}
-	var d = typeof window > "u" || window.document === void 0 || window.document.createElement === void 0 ? u : c;
-	e.useSyncExternalStore = t.useSyncExternalStore === void 0 ? d : t.useSyncExternalStore;
-})), te = /* @__PURE__ */ p(((e) => {
-	process.env.NODE_ENV !== "production" && (function() {
-		function t(e, t) {
-			return e === t && (e !== 0 || 1 / e == 1 / t) || e !== e && t !== t;
-		}
-		function n(e, t) {
-			d || a.startTransition === void 0 || (d = !0, console.error("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 n = t();
-			if (!f) {
-				var i = t();
-				o(n, i) || (console.error("The result of getSnapshot should be cached to avoid an infinite loop"), f = !0);
-			}
-			i = s({ inst: {
-				value: n,
-				getSnapshot: t
-			} });
-			var p = i[0].inst, m = i[1];
-			return l(function() {
-				p.value = n, p.getSnapshot = t, r(p) && m({ inst: p });
-			}, [
-				e,
-				n,
-				t
-			]), c(function() {
-				return r(p) && m({ inst: p }), e(function() {
-					r(p) && m({ inst: p });
-				});
-			}, [e]), u(n), n;
-		}
-		function r(e) {
-			var t = e.getSnapshot;
-			e = e.value;
-			try {
-				var n = t();
-				return !o(e, n);
-			} catch {
-				return !0;
-			}
-		}
-		function i(e, t) {
-			return t();
-		}
-		typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-		var a = g("react"), o = typeof Object.is == "function" ? Object.is : t, s = a.useState, c = a.useEffect, l = a.useLayoutEffect, u = a.useDebugValue, d = !1, f = !1, p = typeof window > "u" || window.document === void 0 || window.document.createElement === void 0 ? i : n;
-		e.useSyncExternalStore = a.useSyncExternalStore === void 0 ? p : a.useSyncExternalStore, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-	})();
-})), k = /* @__PURE__ */ p(((e, t) => {
-	t.exports = process.env.NODE_ENV === "production" ? ee() : te();
-})), ne = /* @__PURE__ */ p(((e) => {
-	var t = g("react"), n = k();
-	function r(e, t) {
-		return e === t && (e !== 0 || 1 / e == 1 / t) || e !== e && t !== t;
-	}
-	var i = typeof Object.is == "function" ? Object.is : r, a = n.useSyncExternalStore, o = t.useRef, s = t.useEffect, c = t.useMemo, l = t.useDebugValue;
-	e.useSyncExternalStoreWithSelector = function(e, t, n, r, u) {
-		var d = o(null);
-		if (d.current === null) {
-			var f = {
-				hasValue: !1,
-				value: null
-			};
-			d.current = f;
-		} else f = d.current;
-		d = c(function() {
-			function e(e) {
-				if (!a) {
-					if (a = !0, o = e, e = r(e), u !== void 0 && f.hasValue) {
-						var t = f.value;
-						if (u(t, e)) return s = t;
-					}
-					return s = e;
-				}
-				if (t = s, i(o, e)) return t;
-				var n = r(e);
-				return u !== void 0 && u(t, n) ? (o = e, t) : (o = e, s = n);
-			}
-			var a = !1, o, s, c = n === void 0 ? null : n;
-			return [function() {
-				return e(t());
-			}, c === null ? void 0 : function() {
-				return e(c());
-			}];
-		}, [
-			t,
-			n,
-			r,
-			u
-		]);
-		var p = a(e, d[0], d[1]);
-		return s(function() {
-			f.hasValue = !0, f.value = p;
-		}, [p]), l(p), p;
-	};
-})), re = /* @__PURE__ */ p(((e) => {
-	process.env.NODE_ENV !== "production" && (function() {
-		function t(e, t) {
-			return e === t && (e !== 0 || 1 / e == 1 / t) || e !== e && t !== t;
-		}
-		typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-		var n = g("react"), r = k(), i = typeof Object.is == "function" ? Object.is : t, a = r.useSyncExternalStore, o = n.useRef, s = n.useEffect, c = n.useMemo, l = n.useDebugValue;
-		e.useSyncExternalStoreWithSelector = function(e, t, n, r, u) {
-			var d = o(null);
-			if (d.current === null) {
-				var f = {
-					hasValue: !1,
-					value: null
-				};
-				d.current = f;
-			} else f = d.current;
-			d = c(function() {
-				function e(e) {
-					if (!a) {
-						if (a = !0, o = e, e = r(e), u !== void 0 && f.hasValue) {
-							var t = f.value;
-							if (u(t, e)) return s = t;
-						}
-						return s = e;
-					}
-					if (t = s, i(o, e)) return t;
-					var n = r(e);
-					return u !== void 0 && u(t, n) ? (o = e, t) : (o = e, s = n);
-				}
-				var a = !1, o, s, c = n === void 0 ? null : n;
-				return [function() {
-					return e(t());
-				}, c === null ? void 0 : function() {
-					return e(c());
-				}];
-			}, [
-				t,
-				n,
-				r,
-				u
-			]);
-			var p = a(e, d[0], d[1]);
-			return s(function() {
-				f.hasValue = !0, f.value = p;
-			}, [p]), l(p), p;
-		}, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-	})();
-})), { useSyncExternalStoreWithSelector: A } = (/* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
-	t.exports = process.env.NODE_ENV === "production" ? ne() : re();
-})))(), 1)).default, ie = (e) => e;
-function j(t, n = ie, r) {
-	let i = A(t.subscribe, t.getState, t.getInitialState, n, r);
-	return e.useDebugValue(i), i;
-}
-//#endregion
-//#region node_modules/zustand/esm/vanilla/shallow.mjs
-var M = (e) => Symbol.iterator in e, N = (e) => "entries" in e, P = (e, t) => {
-	let n = e instanceof Map ? e : new Map(e.entries()), r = t instanceof Map ? t : new Map(t.entries());
-	if (n.size !== r.size) return !1;
-	for (let [e, t] of n) if (!r.has(e) || !Object.is(t, r.get(e))) return !1;
-	return !0;
-}, ae = (e, t) => {
-	let n = e[Symbol.iterator](), r = t[Symbol.iterator](), i = n.next(), a = r.next();
-	for (; !i.done && !a.done;) {
-		if (!Object.is(i.value, a.value)) return !1;
-		i = n.next(), a = r.next();
-	}
-	return !!i.done && !!a.done;
-};
-function oe(e, t) {
-	return Object.is(e, t) ? !0 : typeof e != "object" || !e || typeof t != "object" || !t || Object.getPrototypeOf(e) !== Object.getPrototypeOf(t) ? !1 : M(e) && M(t) ? N(e) && N(t) ? P(e, t) : ae(e, t) : P({ entries: () => Object.entries(e) }, { entries: () => Object.entries(t) });
-}
-//#endregion
-//#region src/lib/utils.js
-var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t) ? e : e.parentNode ? I(e.parentNode, t) : !1, se = ([e, t], [n, r]) => {
+}, D = (e = "default") => (r(T) || {})[e], O = (e, t) => e.classList && e.classList.contains(t), ne = (e, t) => O(e, t) ? e : e.parentNode ? ne(e.parentNode, t) : !1, re = ([e, t], [n, r]) => {
 	let i = Math.abs(e - n), a = Math.abs(t - r);
 	return Math.hypot(i, a);
-}, ce = (e, t, n) => {
+}, ie = (e, t, n) => {
 	let r = n * Math.PI / 180;
 	return [e * Math.cos(r) - t * Math.sin(r), e * Math.sin(r) + t * Math.cos(r)];
-}, le = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => ce((e - i) / n, (t - a) / n, -r), L = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => {
-	let [o, s] = ce(e, t, r);
+}, k = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => ie((e - i) / n, (t - a) / n, -r), A = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => {
+	let [o, s] = ie(e, t, r);
 	return [o * n + i, s * n + a];
-}, ue = (e, t, n, r) => {
-	let i = e.x, a = e.y, o = t.x, s = t.y, c = n.x, l = n.y, u = o - i, d = s - a, f = i - c, p = a - l, m = u * u + d * d, h = 2 * (f * u + p * d), g = f * f + p * p - r * r, _ = h * h - 4 * m * g;
-	if (_ < 0) return [];
-	let v = (-h + Math.sqrt(_)) / (2 * m), y = (-h - Math.sqrt(_)) / (2 * m), b = [];
-	return v >= 0 && v <= 1 && b.push({
-		x: i + v * u,
-		y: a + v * d
-	}), y >= 0 && y <= 1 && b.push({
-		x: i + y * u,
-		y: a + y * d
-	}), b;
-}, de = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, fe = (e, t) => Array.from(e.querySelectorAll(".corner")).every((e) => {
+}, j = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, ae = (e, t) => Array.from(e.querySelectorAll(".corner")).every((e) => {
 	let { top: n, left: r } = e.getBoundingClientRect();
-	return de({
+	return j({
 		x: r,
 		y: n
 	}, t);
-}), pe = (e, t) => fe(e, t.getBoundingClientRect()), R = (e, t) => {
+}), oe = (e, t) => ae(e, t.getBoundingClientRect()), M = (e, t) => {
 	try {
 		return document.getElementById(`${e}__${t}`);
 	} catch {
 		console.error(`Error while getting item with id ${t} inside wrapper`, e);
 		return;
 	}
-}, z = (e) => {
+}, N = (e) => {
 	let t = e?.dataset?.id;
 	return t || console.error("getIdFromElem call fails", e, JSON.stringify(e?.dataset), e?.dataset?.id), t;
-}, me = (e, t) => {
+}, se = (e, t) => {
 	let n = e.reduce((e, n) => {
-		let r = R(t, n);
+		let r = M(t, n);
 		if (!r) return e || null;
 		let { left: i, right: a, top: o, bottom: s } = r.getBoundingClientRect(), c;
 		return c = e || {
@@ -599,10 +180,10 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 		}, c.left = Math.min(i, c.left), c.top = Math.min(o, c.top), c.right = Math.max(a, c.right), c.bottom = Math.max(s, c.bottom), c;
 	}, null);
 	return n && (n.width = n.right - n.left, n.height = n.bottom - n.top, n);
-}, he = (e, t, n = null) => (n === null && (n = /* @__PURE__ */ new Set()), !Array.isArray(t) || t.length === 0 ? [] : t.map((t) => n.has(t) ? [] : (n.add(t), e[t] ? [t, ...he(e, e[t].linkedItems, n)] : [])).flat()), ge = (e, t, n) => {
-	let r = new Set(he(e, n));
+}, ce = (e, t, n = null) => (n === null && (n = /* @__PURE__ */ new Set()), !Array.isArray(t) || t.length === 0 ? [] : t.map((t) => n.has(t) ? [] : (n.add(t), e[t] ? [t, ...ce(e, e[t].linkedItems, n)] : [])).flat()), le = (e, t, n) => {
+	let r = new Set(ce(e, n));
 	return t.filter((e) => r.has(e));
-}, _e = ({ x: e, y: t, width: n, height: r }, { type: i = "grid", size: a = 1, offset: o = {
+}, ue = ({ x: e, y: t, width: n, height: r }, { type: i = "grid", size: a = 1, offset: o = {
 	x: 0,
 	y: 0
 } }) => {
@@ -623,7 +204,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 		x: l + o.x - n / 2,
 		y: u + o.y - r / 2
 	};
-}, ve = /* @__PURE__ */ "#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".split("."), ye = () => ve[Math.floor(Math.random() * ve.length)], be = ({ wire: e, storeName: t, noSync: n = [], defaultValue: r }, i) => (a, o, s) => {
+}, de = /* @__PURE__ */ "#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".split("."), fe = () => de[Math.floor(Math.random() * de.length)], pe = ({ wire: e, storeName: t, noSync: n = [], defaultValue: r }, i) => (a, o, s) => {
 	a({ ready: !1 });
 	let c = [];
 	(async () => {
@@ -647,7 +228,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 	return d.unsub = () => {
 		c.forEach((e) => e());
 	}, d;
-}, xe = e.createContext(), Se = (e, t) => ({
+}, me = e.createContext(), he = (e, t) => ({
 	items: {},
 	getItems: () => t().items,
 	setItems: (t) => e({ items: t }),
@@ -670,7 +251,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 			});
 		}), { items: r };
 	})
-}), Ce = (e, t) => ({
+}), ge = (e, t) => ({
 	itemIds: [],
 	setItemIds: (t) => e({ itemIds: t }),
 	getItemIds: () => t().itemIds,
@@ -687,7 +268,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 		return r[t] = n, { itemIds: r };
 	}),
 	updateManyItemIds: (t) => e((e) => ({ itemIds: e.itemIds.map((e, n) => t[n] === void 0 ? e : t[n]) }))
-}), we = (e, t) => ({
+}), _e = (e, t) => ({
 	removeItemsById: (t) => e((e) => ({
 		itemIds: e.itemIds.filter((e) => !t.includes(e)),
 		items: Object.fromEntries(Object.entries(e.items).filter(([e]) => !t.includes(e)))
@@ -714,7 +295,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 			itemIds: r
 		};
 	})
-}), Te = (e, t) => ({
+}), ve = (e, t) => ({
 	boardConfig: {},
 	getBoardConfig: () => t().boardConfig,
 	setBoardConfig: (t) => e({ boardConfig: t }),
@@ -722,7 +303,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 		...e.boardConfig,
 		...t
 	} }))
-}), Ee = (e, t) => ({
+}), ye = (e, t) => ({
 	session: {},
 	getSessionInfo: () => t().session,
 	setSessionInfo: (t) => e({ session: t }),
@@ -730,31 +311,34 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 		...e.session,
 		...t
 	} }))
-}), De = ({ storeName: t, children: n, defaultValue: r }) => {
-	let { wire: i } = E("room"), [a, o] = e.useState(!1), [s] = e.useState(() => O(be({
+}), be = ({ storeName: t, children: n, defaultValue: r }) => {
+	let { wire: i } = D("room"), [o, c] = e.useState(!1), [l] = e.useState(() => s(pe({
 		wire: i,
 		storeName: t,
 		defaultValue: r
 	}, (...e) => ({
-		...Se(...e),
-		...Ce(...e),
-		...we(...e),
-		...Te(...e),
-		...Ee(...e)
+		...he(...e),
+		...ge(...e),
+		..._e(...e),
+		...ve(...e),
+		...ye(...e)
 	}))));
 	return e.useEffect(() => {
-		let e = s.subscribe((t) => {
-			t.ready && (e(), o(!0));
+		let e = l.subscribe((t) => {
+			t.ready && (e(), c(!0));
 		});
-	}, [s]), a ? /* @__PURE__ */ (0, S.jsx)(xe.Provider, {
-		value: s,
+	}, [l]), o ? /* @__PURE__ */ a(me.Provider, {
+		value: l,
 		children: n
 	}) : null;
-}, B = (e) => j(r(xe), e, oe), Oe = () => {
-	let [t, n] = B((e) => [e.itemIds, e.items]);
+}, P = (e) => {
+	let t = r(me);
+	return c(t, e, l);
+}, xe = () => {
+	let [t, n] = P((e) => [e.itemIds, e.items]);
 	return e.useMemo(() => t.map((e) => n[e]), [t, n]);
-}, ke = () => {
-	let [t, n, r] = B((e) => [
+}, Se = () => {
+	let [t, n, r] = P((e) => [
 		e.items,
 		e.itemIds,
 		e.getItemList
@@ -769,7 +353,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 		n,
 		r
 	]), i;
-}, Ae = 5e4, je = e.createContext(), Me = (e, t) => ({
+}, Ce = 5e4, we = e.createContext(), Te = (e, t) => ({
 	config: {
 		itemTemplates: {},
 		actions: {},
@@ -780,14 +364,14 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 			radius: 0
 		},
 		boardWrapperRect: {},
-		boardSize: Ae
+		boardSize: Ce
 	},
 	updateConfiguration: (t) => e((e) => ({ config: {
 		...e.config,
 		...t
 	} })),
 	getConfiguration: () => t().config
-}), Ne = (e, t) => ({
+}), Ee = (e, t) => ({
 	boardState: {
 		movingItems: !1,
 		selecting: !1,
@@ -803,7 +387,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 		...t
 	} })),
 	getBoardState: () => t().boardState
-}), Pe = (e, t) => ({
+}), De = (e, t) => ({
 	interactions: {},
 	getInteractions: () => t().interactions,
 	register: (t, n) => e((e) => {
@@ -825,7 +409,7 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 			setTimeout(() => e(n), 0);
 		});
 	}
-}), Fe = (e, t) => ({
+}), Oe = (e, t) => ({
 	selection: [],
 	setSelection: (t) => e((e) => JSON.stringify(e.selection) === JSON.stringify(t) ? {} : { selection: t }),
 	getSelection: () => t().selection,
@@ -841,204 +425,34 @@ var F = (e, t) => e.classList && e.classList.contains(t), I = (e, t) => F(e, t)
 		let n = e.selectionBox;
 		return !n || !t || n.top !== t.top || n.left !== t.left || n.width !== t.width || n.height !== t.height ? { selectionBox: t } : {};
 	})
-}), Ie = ({ children: t }) => {
-	let [n] = e.useState(() => O((...e) => ({
-		...Me(...e),
-		...Ne(...e),
-		...Pe(...e),
-		...Fe(...e)
+}), ke = ({ children: t }) => {
+	let [n] = e.useState(() => s((...e) => ({
+		...Te(...e),
+		...Ee(...e),
+		...De(...e),
+		...Oe(...e)
 	})));
-	return /* @__PURE__ */ (0, S.jsx)(je.Provider, {
+	return /* @__PURE__ */ a(we.Provider, {
 		value: n,
 		children: t
 	});
-}, V = (e) => j(r(je), e, oe), Le = () => {
-	let [e] = V((e) => [e.selection]);
+}, F = (e) => {
+	let t = r(we);
+	return c(t, e, l);
+}, Ae = () => {
+	let [e] = F((e) => [e.selection]);
 	return e;
-}, Re = () => {
-	let [e] = V((e) => [e.getSelection]);
+}, je = () => {
+	let [e] = F((e) => [e.getSelection]);
 	return e;
-};
-//#endregion
-//#region node_modules/@react-hookz/web/dist/useSyncedRef/index.js
-function ze(e) {
-	let t = o(e);
-	return t.current = e, a(() => Object.freeze({ get current() {
-		return t.current;
-	} }), []);
-}
-//#endregion
-//#region node_modules/@react-hookz/web/dist/useUnmountEffect/index.js
-function Be(e) {
-	let t = ze(e);
-	i(() => () => {
-		t.current();
-	}, []);
-}
-//#endregion
-//#region node_modules/@react-hookz/web/dist/useDebouncedCallback/index.js
-function Ve(e, t, n, r = 0) {
-	let s = o(void 0), c = o(void 0), l = o(e), u = o(void 0), d = () => {
-		s.current &&= (clearTimeout(s.current), void 0), c.current &&= (clearTimeout(c.current), void 0);
-	};
-	return Be(d), i(() => {
-		l.current = e;
-	}, t), a(() => {
-		let t = () => {
-			if (d(), !u.current) return;
-			let e = u.current;
-			u.current = void 0, l.current.apply(e.this, e.args);
-		}, i = function(...e) {
-			s.current && clearTimeout(s.current), u.current = {
-				args: e,
-				this: this
-			}, s.current = setTimeout(t, n), r > 0 && !c.current && (c.current = setTimeout(t, r));
-		};
-		return Object.defineProperties(i, {
-			length: { value: e.length },
-			name: { value: `${e.name || "anonymous"}__debounced__${n}` }
-		}), i;
-	}, [
-		n,
-		r,
-		...t
-	]);
-}
-//#endregion
-//#region node_modules/@react-hookz/web/dist/util/const.js
-var He = typeof globalThis < "u" && typeof navigator < "u" && typeof document < "u";
-//#endregion
-//#region node_modules/@react-hookz/web/dist/util/misc.js
-function Ue(e, ...t) {
-	e?.addEventListener(...t);
-}
-function We(e, ...t) {
-	e?.removeEventListener(...t);
-}
-var Ge = (e, t) => Object.hasOwn(e, t);
-//#endregion
-//#region node_modules/@react-hookz/web/dist/useDebouncedEffect/index.js
-function Ke(e, t, n, r = 0) {
-	i(Ve(e, t, n, r), t);
-}
-//#endregion
-//#region node_modules/@react-hookz/web/dist/useIsMounted/index.js
-function qe(e = !1) {
-	let t = o(e), r = n(() => t.current, []);
-	return i(() => (t.current = !0, () => {
-		t.current = !1;
-	}), []), r;
-}
-//#endregion
-//#region node_modules/@react-hookz/web/dist/useResizeObserver/index.js
-var Je = /* @__PURE__ */ new Map();
-function Ye(e) {
-	if (!He) return;
-	let t = Je.get(e);
-	if (t) return t;
-	let n = /* @__PURE__ */ new Map(), r = new ResizeObserver((e) => {
-		for (let t of e) {
-			let e = n.get(t.target);
-			if (e !== void 0 && e.size !== 0) for (let n of e) setTimeout(() => {
-				n(t);
-			}, 0);
-		}
-	}), i = {
-		observer: r,
-		subscribe(t, i) {
-			let a = n.get(t);
-			a || (a = /* @__PURE__ */ new Set(), n.set(t, a), r.observe(t, { box: e })), a.add(i);
-		},
-		unsubscribe(e, t) {
-			let i = n.get(e);
-			i && (i.delete(t), i.size === 0 && (n.delete(e), r.unobserve(e)));
-		}
-	};
-	return Je.set(e, i), i;
-}
-function Xe(e, t, n = !0, r = "content-box") {
-	let a = n && Ye(r), o = ze(t), s = e && "current" in e ? e.current : e;
-	i(() => {
-		let t = e && "current" in e ? e.current : e;
-		if (a === !1 || a === void 0 || t == null) return;
-		let n = !0, r = (...e) => {
-			n && o.current(...e);
-		};
-		return a.subscribe(t, r), () => {
-			n = !1, a.unsubscribe(t, r);
-		};
-	}, [s, a]);
-}
-//#endregion
-//#region node_modules/@react-hookz/web/dist/useEventListener/index.js
-function H(e, ...t) {
-	let n = qe(), r = ze(t[1]), o = a(() => function(...e) {
-		n() && (typeof r.current == "function" ? r.current.apply(this, e) : typeof r.current.handleEvent == "function" && r.current.handleEvent.apply(this, e));
-	}, []);
-	i(() => {
-		let n = Ze(e) ? e.current : e;
-		if (!n) return;
-		let r = t.slice(2);
-		return Ue(n, t[0], o, ...r), () => {
-			We(n, t[0], o, ...r);
-		};
-	}, [e, t[0]]);
-}
-function Ze(e) {
-	return typeof e == "object" && !!e && Ge(e, "current");
-}
-//#endregion
-//#region src/lib/board/useDim.js
-var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate: r, itemExtent: i, boardWrapperRect: a, boardSize: o }) => {
-	let [s, c] = [e, t], l = le([a.width / 2, a.height / 2], {
-		translateX: s,
-		translateY: c,
-		scale: n,
-		rotate: r
-	}), u = {
-		x: i.x + o / 2,
-		y: i.y + o / 2
-	}, d = {
-		x: o / 2,
-		y: o / 2
-	}, f = se(l, [u.x, u.y]), p = Math.min(a.width, a.height), m = i.radius + p / 2 / n - Qe / n;
-	if (f > m) {
-		let e = ue({
-			x: l[0],
-			y: l[1]
-		}, u, u, m - 1 / n)[0], [t, i] = L([-e.x, -e.y], {
-			translateX: a.width / 2,
-			translateY: a.height / 2,
-			scale: n,
-			rotate: r
-		});
-		s = t, c = i;
-	}
-	let h = se(l, [d.x, d.y]), g = o / 2 - se([0, 0], [a.width, a.height]) / n;
-	if (h > g) {
-		let e = ue({
-			x: l[0],
-			y: l[1]
-		}, d, d, g - 1 / n)[0];
-		if (e) {
-			let [t, i] = L([-e.x, -e.y], {
-				translateX: a.width / 2,
-				translateY: a.height / 2,
-				scale: n,
-				rotate: r
-			});
-			s = t, c = i;
-		}
-	}
-	return [s, c];
-}, U = () => {
-	let [t, n, r, i, a] = V((e) => [
+}, Me = 1e3, Ne = .8, I = !1, L = () => {
+	let [t, n, r, i, a] = F((e) => [
 		e.getBoardState,
 		e.updateBoardState,
 		e.config.itemExtent,
 		e.getConfiguration,
 		e.updateConfiguration
-	]), o = e.useRef([.15, 5]), [s] = B((e) => [e.getItemList]), c = e.useCallback(() => {
+	]), o = e.useRef([.15, 5]), [s] = P((e) => [e.getItemList]), c = e.useCallback(() => {
 		let { translateX: e, translateY: n, scale: r, rotate: i } = t();
 		return {
 			translateX: e,
@@ -1046,148 +460,148 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 			scale: r,
 			rotate: i
 		};
-	}, [t]), l = e.useCallback((e, n) => le([e, n], t()), [t]), u = e.useCallback((e, n) => L([e, n], t()), [t]), d = e.useCallback((e, n) => {
+	}, [t]), l = e.useCallback((e, n) => k([e, n], t()), [t]), d = e.useCallback((e, n) => A([e, n], t()), [t]), f = e.useCallback((e, n) => {
 		let { scale: r, rotate: i } = t();
-		return le([e, n], {
+		return k([e, n], {
 			translateX: 0,
 			translateY: 0,
 			rotate: i,
 			scale: r
 		});
-	}, [t]), f = e.useCallback((e) => e > o.current[1] ? o.current[1] : e < o.current[0] ? o.current[0] : e, []), p = e.useCallback((e) => {
-		let { itemExtent: r, boardWrapperRect: a, boardSize: o } = i(), s = t(), { translateX: c, translateY: l, scale: u, rotate: d } = {
-			...s,
-			...e(s)
+	}, [t]), p = e.useCallback((e) => e > o.current[1] ? o.current[1] : e < o.current[0] ? o.current[0] : e, []), m = e.useCallback((e) => {
+		let r = t(), { translateX: i, translateY: a, scale: o, rotate: s } = {
+			...r,
+			...e(r)
 		};
-		tt && console.log("New expected values: ", c, l, u, d);
-		let p = f(u), [m, h] = [c, l];
-		(c !== s.translateX || l !== s.translateY) && ([m, h] = nt({
-			x: c,
-			y: l,
-			scale: p,
-			rotate: d,
-			itemExtent: r,
-			boardWrapperRect: a,
-			boardSize: o
-		})), tt && console.log("New fixed values: ", m, h, p, d), n({
-			translateX: isNaN(m) ? 0 : m,
-			translateY: isNaN(h) ? 0 : h,
-			scale: isNaN(p) ? f(1) : p,
-			rotate: isNaN(d) ? 0 : d
+		I && console.log("New expected values: ", i, a, o, s);
+		let c = p(o), l = i, u = a;
+		I && console.log("New fixed values: ", l, u, c, s), n({
+			translateX: Number.isFinite(l) ? l : r.translateX,
+			translateY: Number.isFinite(u) ? u : r.translateY,
+			scale: Number.isFinite(c) ? c : p(1),
+			rotate: Number.isFinite(s) ? s : r.rotate
 		});
 	}, [
-		f,
+		p,
 		t,
-		i,
 		n
-	]), m = e.useCallback((e) => {
+	]), h = e.useCallback((e) => {
 		let t = (t) => ({
 			...t,
 			...e
 		});
-		typeof e == "function" && (t = e), p((e) => ({
+		typeof e == "function" && (t = e), m((e) => ({
 			...e,
 			...t({
 				translateX: e.translateX,
 				translateY: e.translateY
 			})
 		}));
-	}, [p]), h = e.useCallback(({ to: e, factor: n }) => {
+	}, [m]), g = e.useCallback(({ to: e, factor: n }) => {
 		let { boardWrapperRect: r } = i(), a = e;
 		a ||= {
 			x: r.left + r.width / 2,
 			y: r.top + r.height / 2
 		};
-		let o = t(), s = f(o.scale * n), c = a.x - r.left, l = a.y - r.top, u = c - (c - o.translateX) * s / o.scale, d = l - (l - o.translateY) * s / o.scale;
-		p((e) => ({
+		let o = t(), s = p(o.scale * n), c = a.x - r.left, l = a.y - r.top, u = c - (c - o.translateX) * s / o.scale, d = l - (l - o.translateY) * s / o.scale;
+		m((e) => ({
 			...e,
 			translateX: u,
 			translateY: d,
 			scale: s
 		}));
 	}, [
-		f,
+		p,
 		t,
 		i,
-		p
-	]), g = e.useCallback(({ x: e, y: n, radius: r }) => {
-		let { rotate: a } = t(), { boardWrapperRect: o, boardSize: s } = i(), [c, l, u] = [
+		m
+	]), _ = e.useCallback(({ x: e, y: n, radius: r }) => {
+		let { rotate: a } = t(), { boardWrapperRect: o } = i(), [s, c, l] = [
 			e || 0,
 			n || 0,
 			r || 2e3
-		], d = o.width / (u * 2), m = o.height / (u * 2), h = f(Math.min(d, m) * et), [g, _] = L([-s / 2 - c, -s / 2 - l], {
+		], u = o.width / (l * 2), d = o.height / (l * 2), f = p(Math.min(u, d) * Ne), [h, g] = A([-s, -c], {
 			translateX: o.width / 2,
 			translateY: o.height / 2,
-			scale: h,
+			scale: f,
 			rotate: a
 		});
-		p((e) => ({
+		m((e) => ({
 			...e,
-			translateX: g,
-			translateY: _,
-			scale: h
+			translateX: h,
+			translateY: g,
+			scale: f
 		}));
 	}, [
-		f,
+		p,
 		t,
 		i,
-		p
-	]), _ = e.useCallback(() => {
-		let { boardWrapperRect: e, boardSize: t } = i(), [n, r] = l(e.width / 2, e.height / 2);
+		m
+	]), v = e.useCallback(() => {
+		let { boardWrapperRect: e } = i(), [t, n] = l(e.width / 2, e.height / 2);
 		return {
-			x: n - t / 2,
-			y: r - t / 2
+			x: t,
+			y: n
 		};
-	}, [l, i]), v = e.useCallback(() => {
-		let e = s(), { boardSize: t, uid: n } = i(), r = e.reduce((e, t) => {
-			let r = R(n, t.id);
-			return r && (e.left = Math.min(t.x, e.left), e.top = Math.min(t.y, e.top), e.right = Math.max(t.x + r.offsetWidth, e.right), e.bottom = Math.max(t.y + r.offsetHeight, e.bottom)), e;
+	}, [l, i]), y = e.useCallback(() => {
+		let e = s(), { uid: t } = i(), n = e.reduce((e, n) => {
+			let r = M(t, n.id);
+			return r && (e.left = Math.min(n.x, e.left), e.top = Math.min(n.y, e.top), e.right = Math.max(n.x + r.offsetWidth, e.right), e.bottom = Math.max(n.y + r.offsetHeight, e.bottom)), e;
 		}, {
-			left: t / 2,
-			top: t / 2,
-			right: -t / 2,
-			bottom: -t / 2
-		}), o = {
-			x: (r.right + r.left) / 2,
-			y: (r.bottom + r.top) / 2
+			left: Infinity,
+			top: Infinity,
+			right: -Infinity,
+			bottom: -Infinity
+		});
+		if (!Number.isFinite(n.left)) {
+			a({ itemExtent: {
+				x: 0,
+				y: 0,
+				radius: Me
+			} });
+			return;
+		}
+		let r = {
+			x: (n.right + n.left) / 2,
+			y: (n.bottom + n.top) / 2
 		};
-		o.radius = Math.max(se([o.x, o.y], [r.left, r.top]), $e), a({ itemExtent: o });
+		r.radius = Math.max(re([r.x, r.y], [n.left, n.top]), Me), a({ itemExtent: r });
 	}, [
 		i,
 		s,
 		a
-	]), y = e.useCallback((e) => {
+	]), b = e.useCallback((e) => {
 		let t = () => e;
-		typeof e == "function" && (t = e), p((e) => ({
+		typeof e == "function" && (t = e), m((e) => ({
 			...e,
 			rotate: t(e.rotate)
-		})), v(), g(r);
+		})), y(), _(r);
 	}, [
 		r,
-		p,
-		v,
-		g
-	]), b = Ve(() => v(), [v], 200);
+		m,
+		y,
+		_
+	]), x = u(() => y(), [y], 200);
 	return e.useEffect(() => {
-		window.debugUpdateExtent = () => v(), window.debugDisplayExtent = () => console.log(i().itemExtent), window.debugSetDebug = () => {
-			tt = !0;
+		window.debugUpdateExtent = () => y(), window.debugDisplayExtent = () => console.log(i().itemExtent), window.debugSetDebug = () => {
+			I = !0;
 		};
-	}, [i, v]), {
-		setDim: p,
-		rotateBoard: y,
-		moveBoard: m,
+	}, [i, y]), {
+		setDim: m,
+		rotateBoard: b,
+		moveBoard: h,
 		getDim: c,
-		zoomTo: h,
-		zoomToCenter: h,
-		zoomToExtent: g,
-		getCenter: _,
-		updateItemExtent: b,
-		vectorFromWrapperToBoard: d,
+		zoomTo: g,
+		zoomToCenter: g,
+		zoomToExtent: _,
+		getCenter: v,
+		updateItemExtent: x,
+		vectorFromWrapperToBoard: f,
 		fromWrapperToBoard: l,
-		fromBoardToWrapper: u
+		fromBoardToWrapper: d
 	};
-}, rt = (t) => {
-	let [n, r, i] = V(({ register: e, unregister: t, callInteractions: n }) => [
+}, R = (t) => {
+	let [n, r, i] = F(({ register: e, unregister: t, callInteractions: n }) => [
 		e,
 		t,
 		n
@@ -1204,13 +618,13 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 			i(t, e);
 		}, [i, t])
 	};
-}, W = () => {
-	let { call: t } = rt("place"), { call: n } = rt("delete"), { getCenter: r, updateItemExtent: i } = U(), [a, o, s, c] = V((e) => [
+}, z = () => {
+	let { call: t } = R("place"), { call: n } = R("delete"), { getCenter: r, updateItemExtent: i } = L(), [a, o, s, c] = F((e) => [
 		e.clear,
 		e.reverse,
 		e.unselect,
 		e.getConfiguration
-	]), { getItems: l, getItemIds: u, setItemIds: d, updateItems: f, moveItems: p, removeItemsById: m, getItemList: h, insertItems: g, setItemList: _ } = B(({ getItems: e, getItemIds: t, setItemIds: n, updateItems: r, moveItems: i, removeItemsById: a, getItemList: o, insertItems: s, setItemList: c }) => ({
+	]), { getItems: l, getItemIds: u, setItemIds: d, updateItems: f, moveItems: p, removeItemsById: m, getItemList: h, insertItems: g, setItemList: _ } = P(({ getItems: e, getItemIds: t, setItemIds: n, updateItems: r, moveItems: i, removeItemsById: a, getItemList: o, insertItems: s, setItemList: c }) => ({
 		getItems: e,
 		getItemIds: t,
 		setItemIds: n,
@@ -1244,7 +658,7 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 	]), b = e.useCallback((e, t, n = !1) => {
 		v([e], t, n);
 	}, [v]), x = e.useCallback((e, t) => {
-		p(ge(l(), u(), e), t);
+		p(le(l(), u(), e), t);
 	}, [
 		u,
 		l,
@@ -1255,7 +669,7 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 	}, [u, d]), C = e.useCallback((e, { type: t, size: n } = {}) => {
 		let { uid: r } = c();
 		v(e, (e) => {
-			let i = R(r, e.id);
+			let i = M(r, e.id);
 			if (!i) return;
 			let a = {
 				type: t || "grid",
@@ -1266,7 +680,7 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 				},
 				...e.grid
 			};
-			return _e({
+			return ue({
 				x: e.x,
 				y: e.y,
 				width: i.clientWidth,
@@ -1274,7 +688,7 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 			}, a);
 		}, !0);
 	}, [c, v]), w = e.useCallback((e, n) => {
-		let r = ge(l(), u(), e);
+		let r = le(l(), u(), e);
 		S(r), v(r, { moving: !1 }, !0), C(r, n), t(e), i();
 	}, [
 		v,
@@ -1284,16 +698,16 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		S,
 		C,
 		i
-	]), T = e.useCallback((e) => {
+	]), ee = e.useCallback((e) => {
 		d(e);
-	}, [d]), E = e.useCallback((e) => {
+	}, [d]), T = e.useCallback((e) => {
 		let t = u(), n = t.filter((t) => e.includes(t)), r = t.map((t) => e.includes(t) ? n.pop() : t);
 		d(r), o();
 	}, [
 		u,
 		o,
 		d
-	]), D = e.useCallback((e, t) => {
+	]), te = e.useCallback((e, t) => {
 		let n = l(), r = Object.fromEntries(t.map((t, r) => {
 			let i = n[e[r]];
 			return [t, {
@@ -1309,8 +723,8 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		v,
 		u,
 		d
-	]), O = e.useCallback((e, t) => {
-		let n = r(), i = e.map((e, t) => !e.x || !e.y ? {
+	]), E = e.useCallback((e, t) => {
+		let n = r(), i = e.map((e, t) => e.x === void 0 || e.x === null || e.y === void 0 || e.y === null ? {
 			...e,
 			x: n.x + 2 * t,
 			y: n.y + 2 * t
@@ -1322,58 +736,58 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		r,
 		g,
 		w
-	]), ee = e.useCallback((e, t) => {
-		O([e], t);
-	}, [O]), te = e.useCallback((e) => {
+	]), D = e.useCallback((e, t) => {
+		E([e], t);
+	}, [E]), re = e.useCallback((e) => {
 		s(e), m(e), n(e);
 	}, [
 		s,
 		m,
 		n
-	]), k = e.useCallback((e) => {
+	]), ie = e.useCallback((e) => {
 		let t = l();
 		return e.map((e) => t[e]);
 	}, [l]);
 	return {
 		putItemsOnTop: S,
 		batchUpdateItems: v,
-		updateItemOrder: T,
+		updateItemOrder: ee,
 		moveItems: x,
 		placeItems: w,
 		updateItem: b,
-		swapItems: D,
-		reverseItemsOrder: E,
+		swapItems: te,
+		reverseItemsOrder: T,
 		setItemList: y,
-		pushItem: ee,
-		pushItems: O,
-		removeItems: te,
+		pushItem: D,
+		pushItems: E,
+		removeItems: re,
 		getItemList: h,
 		findElementUnderPointer: e.useCallback(({ target: e, clientX: t, clientY: n }, { returnLocked: r = !1, passLocked: i = !1 } = {}) => {
 			if (["INPUT", "TEXTAREA"].includes(e.tagName)) return null;
-			let a = I(e, "item");
+			let a = ne(e, "item");
 			if (a) {
-				if (F(a, "selected")) return a;
-				if (!i && F(a, "locked") && !F(e, "passthrough")) return r ? a : null;
-				if (F(e, "passthrough")) {
+				if (O(a, "selected")) return a;
+				if (!i && O(a, "locked") && !O(e, "passthrough")) return r ? a : null;
+				if (O(e, "passthrough")) {
 					let e = u(), { uid: r } = c(), o = e.reduce((e, i) => {
-						let a = R(r, i), o = a.getBoundingClientRect();
-						return de({
+						let a = M(r, i), o = a.getBoundingClientRect();
+						return j({
 							x: t,
 							y: n
 						}, o) && e.unshift(a), e;
 					}, []);
 					for (let e = 0; e < o.length; e += 1) {
 						let t = o[e];
-						if (t !== a && (i || !F(t, "locked"))) return t;
+						if (t !== a && (i || !O(t, "locked"))) return t;
 					}
 					return null;
 				}
 			}
 			return a;
 		}, [c, u]),
-		getItems: k
+		getItems: ie
 	};
-}, it = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
+}, Pe = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	t.exports = function e(t, n) {
 		if (t === n) return !0;
 		if (t && n && typeof t == "object" && typeof n == "object") {
@@ -1413,17 +827,17 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		}
 		return t !== t && n !== n;
 	};
-})))(), 1), at = (e, t) => {
+})))(), 1), Fe = (e, t) => {
 	if (e.type in t) {
 		let n = t[e.type].defaultActions;
 		return typeof n == "function" ? n(e) : n;
 	}
 	return [];
-}, ot = (e, t) => {
-	let { actions: n = at(e, t) } = e;
+}, Ie = (e, t) => {
+	let { actions: n = Fe(e, t) } = e;
 	return n.map((e) => typeof e == "string" ? { name: e } : e);
-}, st = () => {
-	let [t, r] = B((e) => [e.items, e.getItems]), [i, a, o] = V((e) => [
+}, Le = () => {
+	let [t, r] = P((e) => [e.items, e.getItems]), [i, a, o] = F((e) => [
 		e.config.itemTemplates,
 		e.selection,
 		e.getSelection
@@ -1431,57 +845,57 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 	e.useEffect(() => (l.current = !0, () => {
 		l.current = !1;
 	}), []);
-	let d = e.useCallback((e) => {
+	let f = e.useCallback((e) => {
 		let t = r();
 		if (e) return [e, e.map((e) => t[e])];
 		let n = o();
 		return [n, n.map((e) => t[e])];
-	}, [r, o]), f = n(() => {
-		let [e, t] = d();
+	}, [r, o]), p = n(() => {
+		let [e, t] = f();
 		if (e.length > 0) {
 			if (!l.current) return;
 			let e = t.reduce((e, t) => {
-				let n = ot(t, i);
-				return e.filter((e) => n.some((t) => (0, it.default)(e, t)));
-			}, ot(t[0], i));
+				let n = Ie(t, i);
+				return e.filter((e) => n.some((t) => (0, Pe.default)(e, t)));
+			}, Ie(t[0], i));
 			u(() => {
 				c(e);
 			});
 		} else u(() => {
 			c([]);
 		});
-	}, [d, i]);
-	return Ke(() => f(), [
+	}, [f, i]);
+	return d(() => p(), [
 		t,
 		a,
-		f
+		p
 	], 100), { availableActions: s };
-}, ct = () => {
-	let [e] = V((e) => [e.selectionBox]);
+}, Re = () => {
+	let [e] = F((e) => [e.selectionBox]);
 	return e;
-}, lt = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", G = (e = 21) => {
+}, ze = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", B = (e = 21) => {
 	let t = "", n = crypto.getRandomValues(new Uint8Array(e |= 0));
-	for (; e--;) t += lt[n[e] & 63];
+	for (; e--;) t += ze[n[e] & 63];
 	return t;
-}, ut = e.createContext(), dt = (e) => {
+}, Be = e.createContext(), Ve = (e) => {
 	localStorage.setItem("user", JSON.stringify(e));
-}, ft = () => {
+}, He = () => {
 	if (localStorage.user) {
 		let e = {
 			name: "Player",
-			color: ye(),
-			uid: G(),
+			color: fe(),
+			uid: B(),
 			...JSON.parse(localStorage.user)
 		};
-		return dt(e), e;
+		return Ve(e), e;
 	}
 	let e = {
 		name: "Player",
-		color: ye(),
-		uid: G()
+		color: fe(),
+		uid: B()
 	};
-	return dt(e), e;
-}, pt = (e) => (t, n) => ({
+	return Ve(e), e;
+}, Ue = (e) => (t, n) => ({
 	isSpaceMaster: !1,
 	users: {},
 	getUser: () => n().users[e],
@@ -1504,7 +918,7 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 			id: r,
 			uid: t.users[r].uid
 		};
-		return a.id === e && dt(a), setTimeout(() => n().electSpaceMaster(), 100), { users: {
+		return a.id === e && Ve(a), setTimeout(() => n().electSpaceMaster(), 100), { users: {
 			...t.users,
 			[r]: a
 		} };
@@ -1527,7 +941,7 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 			e < i.timestamp && (i.id = t, i.timestamp = e);
 		}), t({ isSpaceMaster: i.id === e });
 	}
-}), mt = (e) => ({
+}), We = (e) => ({
 	cursors: {},
 	moveCursor: (t, n) => e((e) => ({ cursors: {
 		...e.cursors,
@@ -1537,12 +951,12 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		let n = { ...e.cursors };
 		return delete n[t], { cursors: n };
 	})
-}), ht = ({ storeName: t, children: n }) => {
-	let { wire: r, isMaster: i } = E("room"), [a, o] = e.useState(null), [s, c] = e.useState(!1), l = e.useRef(!1);
+}), Ge = ({ storeName: t, children: n }) => {
+	let { wire: r, isMaster: i } = D("room"), [o, c] = e.useState(null), [l, u] = e.useState(!1), d = e.useRef(!1);
 	return e.useEffect(() => {
 		let e = !0, n = [];
-		if (!a && !l.current) return l.current = !0, (() => {
-			let n = O(be({
+		if (!o && !d.current) return d.current = !0, (() => {
+			let n = s(pe({
 				wire: r,
 				storeName: t,
 				noSync: [
@@ -1552,34 +966,34 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 					"electSpaceMaster"
 				]
 			}, (...e) => ({
-				...pt(r.userId)(...e),
-				...mt(...e)
+				...Ue(r.userId)(...e),
+				...We(...e)
 			}), r, t)), i = n.subscribe((t) => {
-				t.ready && (i(), e && o(n));
+				t.ready && (i(), e && c(n));
 			});
 		})(), () => {
-			e = !1, l.current = !1, n.forEach((e) => e());
+			e = !1, d.current = !1, n.forEach((e) => e());
 		};
 	}, [
-		a,
+		o,
 		t,
 		r,
 		r.userId
 	]), e.useEffect(() => {
-		if (a) return a.getState().addUser({
-			...ft(),
+		if (o) return o.getState().addUser({
+			...He(),
 			id: r.userId
-		}), c(!0), () => {
-			a.getState().removeUser(r.userId);
+		}), u(!0), () => {
+			o.getState().removeUser(r.userId);
 		};
 	}, [
 		i,
-		a,
+		o,
 		r
 	]), e.useEffect(() => {
-		if (a) {
+		if (o) {
 			let e = r.subscribe("userLeave", (e) => {
-				a.getState().removeUser(e);
+				o.getState().removeUser(e);
 			});
 			return () => {
 				e();
@@ -1587,20 +1001,23 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		}
 	}, [
 		i,
-		a,
+		o,
 		r
 	]), e.useEffect(() => {
-		i && a && a.getState().updateCurrentUser({ isMaster: i });
+		i && o && o.getState().updateCurrentUser({ isMaster: i });
 	}, [
 		i,
-		a,
+		o,
 		r
-	]), s ? /* @__PURE__ */ (0, S.jsx)(ut.Provider, {
-		value: a,
+	]), l ? /* @__PURE__ */ a(Be.Provider, {
+		value: o,
 		children: n
 	}) : null;
-}, K = (e) => j(r(ut), e, oe), gt = () => {
-	let [t, n, r, i, a] = K((e) => [
+}, V = (e) => {
+	let t = r(Be);
+	return c(t, e, l);
+}, Ke = () => {
+	let [t, n, r, i, a] = V((e) => [
 		e.isSpaceMaster,
 		e.getUser(),
 		e.users,
@@ -1618,8 +1035,8 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		}, [n, o]),
 		joinSpace: a
 	};
-}, _t = () => {
-	let [t, n, r] = B((e) => [
+}, qe = () => {
+	let [t, n, r] = P((e) => [
 		e.boardConfig,
 		e.getBoardConfig,
 		e.setBoardConfig
@@ -1630,11 +1047,11 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		let i = n(), a = t(i);
 		r(a);
 	}, [n, r])];
-}, vt = () => {
-	let [e] = V((e) => [e.boardState]);
+}, Je = () => {
+	let [e] = F((e) => [e.boardState]);
 	return e;
-}, yt = () => {
-	let [e, t, n, r] = B((e) => [
+}, Ye = () => {
+	let [e, t, n, r] = P((e) => [
 		e.getSessionInfo,
 		e.setSessionInfo,
 		e.updateSessionInfo,
@@ -1646,7 +1063,7 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		sessionInfo: r,
 		updateSessionInfo: n
 	};
-}, bt = e.createContext(), xt = ({ user: { name: e, uid: t, color: n }, content: r }) => ({
+}, Xe = e.createContext(), Ze = ({ user: { name: e, uid: t, color: n }, content: r }) => ({
 	type: "message",
 	user: {
 		name: e,
@@ -1654,9 +1071,9 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		color: n
 	},
 	content: r,
-	uid: G(),
+	uid: B(),
 	timestamp: (/* @__PURE__ */ new Date()).toISOString()
-}), St = (e, t) => ({
+}), Qe = (e, t) => ({
 	messages: [],
 	setMessages: (t) => e({ messages: t.map((e) => ({
 		...e,
@@ -1667,25 +1084,28 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		timestamp: Date.parse(t.timestamp)
 	}] })),
 	sendMessage: (e, n) => {
-		let r = xt({
+		let r = Ze({
 			user: e,
 			content: n
 		});
 		r && t().addMessage(r);
 	}
-}), Ct = ({ storeName: t, children: n, defaultValue: r = [] }) => {
-	let { wire: i } = E("room"), [a] = e.useState(() => O(be({
+}), $e = ({ storeName: t, children: n, defaultValue: r = [] }) => {
+	let { wire: i } = D("room"), [o] = e.useState(() => s(pe({
 		wire: i,
 		storeName: t,
 		defaultValue: r,
 		noSync: ["sendMessage"]
-	}, (...e) => ({ ...St(...e) }))));
-	return /* @__PURE__ */ (0, S.jsx)(bt.Provider, {
-		value: a,
+	}, (...e) => ({ ...Qe(...e) }))));
+	return /* @__PURE__ */ a(Xe.Provider, {
+		value: o,
 		children: n
 	});
-}, wt = (e) => j(r(bt), e, oe), Tt = () => {}, Et = (t = Tt) => {
-	let n = K((e) => e.getUser()), [r, i, a] = wt((e) => [
+}, et = (e) => {
+	let t = r(Xe);
+	return c(t, e, l);
+}, tt = () => {}, nt = (t = tt) => {
+	let n = V((e) => e.getUser()), [r, i, a] = et((e) => [
 		e.messages,
 		e.setMessages,
 		e.sendMessage
@@ -1699,61 +1119,61 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 			a(n, e);
 		}, [n, a])
 	};
-}, Dt = ({ children: t, session: n }) => {
-	let r = K((e) => e.joinSpace);
+}, rt = ({ children: t, session: n }) => {
+	let r = V((e) => e.joinSpace);
 	return e.useEffect(() => (r(n), () => {
 		r(null);
 	}), [r, n]), t;
-}, Ot = ({ socket: t, room: n, session: r, items: i = [], messages: a = [], LoadingComponent: o, ...s }) => {
-	let [c] = e.useState(n || G()), [l] = e.useState(r || G()), [u] = e.useState(() => ({
+}, it = ({ socket: t, room: n, session: r, items: i = [], messages: o = [], LoadingComponent: s, ...c }) => {
+	let [l] = e.useState(n || B()), [u] = e.useState(r || B()), [d] = e.useState(() => ({
 		itemIds: i.map(({ id: e }) => e),
 		items: Object.fromEntries(i.map((e) => [e.id, e]))
 	}));
-	return E("room") ? /* @__PURE__ */ (0, S.jsx)(Ct, {
-		storeName: `${l}_messages`,
-		defaultValue: a,
-		children: /* @__PURE__ */ (0, S.jsx)(Ie, { children: /* @__PURE__ */ (0, S.jsx)(De, {
-			storeName: `${l}_item`,
-			defaultValue: u,
-			children: /* @__PURE__ */ (0, S.jsx)(Dt, {
-				...s,
-				session: l
+	return D("room") ? /* @__PURE__ */ a($e, {
+		storeName: `${u}_messages`,
+		defaultValue: o,
+		children: /* @__PURE__ */ a(ke, { children: /* @__PURE__ */ a(be, {
+			storeName: `${u}_item`,
+			defaultValue: d,
+			children: /* @__PURE__ */ a(rt, {
+				...c,
+				session: u
 			})
 		}) })
-	}) : /* @__PURE__ */ (0, S.jsx)(T, {
-		room: c,
+	}) : /* @__PURE__ */ a(E, {
+		room: l,
 		channel: "room",
 		socket: t,
-		LoadingComponent: o,
-		children: /* @__PURE__ */ (0, S.jsx)(ht, {
-			storeName: `${c}_users`,
-			children: /* @__PURE__ */ (0, S.jsx)(Ct, {
-				storeName: `${l}_messages`,
-				defaultValue: a,
-				children: /* @__PURE__ */ (0, S.jsx)(Ie, { children: /* @__PURE__ */ (0, S.jsx)(De, {
-					storeName: `${l}_item`,
-					defaultValue: u,
-					children: /* @__PURE__ */ (0, S.jsx)(Dt, {
-						...s,
-						session: l
+		LoadingComponent: s,
+		children: /* @__PURE__ */ a(Ge, {
+			storeName: `${l}_users`,
+			children: /* @__PURE__ */ a($e, {
+				storeName: `${u}_messages`,
+				defaultValue: o,
+				children: /* @__PURE__ */ a(ke, { children: /* @__PURE__ */ a(be, {
+					storeName: `${u}_item`,
+					defaultValue: d,
+					children: /* @__PURE__ */ a(rt, {
+						...c,
+						session: u
 					})
 				}) })
 			})
 		})
 	});
-}, kt = ({ socket: t, room: n, children: r, LoadingComponent: i }) => {
-	let [a] = e.useState(n || G());
-	return /* @__PURE__ */ (0, S.jsx)(T, {
-		room: a,
+}, at = ({ socket: t, room: n, children: r, LoadingComponent: i }) => {
+	let [o] = e.useState(n || B());
+	return /* @__PURE__ */ a(E, {
+		room: o,
 		channel: "room",
 		socket: t,
 		LoadingComponent: i,
-		children: /* @__PURE__ */ (0, S.jsx)(ht, {
-			storeName: `${a}_users`,
+		children: /* @__PURE__ */ a(Ge, {
+			storeName: `${o}_users`,
 			children: r
 		})
 	});
-}, At = { data: "" }, jt = (e) => {
+}, ot = { data: "" }, st = (e) => {
 	if (typeof window == "object") {
 		let t = (e ? e.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), {
 			innerHTML: " ",
@@ -1761,58 +1181,58 @@ var Qe = 100, $e = 1e3, et = .8, tt = !1, nt = ({ x: e, y: t, scale: n, rotate:
 		});
 		return t.nonce = window.__nonce__, t.parentNode || (e || document.head).appendChild(t), t.firstChild;
 	}
-	return e || At;
-}, Mt = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, Nt = /\/\*[^]*?\*\/|  +/g, Pt = /\n+/g, q = (e, t) => {
+	return e || ot;
+}, ct = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, lt = /\/\*[^]*?\*\/|  +/g, ut = /\n+/g, H = (e, t) => {
 	let n = "", r = "", i = "";
 	for (let a in e) {
 		let o = e[a];
-		a[0] == "@" ? a[1] == "i" ? n = a + " " + o + ";" : r += a[1] == "f" ? q(o, a) : a + "{" + q(o, a[1] == "k" ? "" : t) + "}" : typeof o == "object" ? r += q(o, t ? t.replace(/([^,])+/g, (e) => a.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (t) => /&/.test(t) ? t.replace(/&/g, e) : e ? e + " " + t : t)) : a) : o != null && (a = a[1] == "-" ? a : a.replace(/[A-Z]/g, "-$&").toLowerCase(), i += q.p ? q.p(a, o) : a + ":" + o + ";");
+		a[0] == "@" ? a[1] == "i" ? n = a + " " + o + ";" : r += a[1] == "f" ? H(o, a) : a + "{" + H(o, a[1] == "k" ? "" : t) + "}" : typeof o == "object" ? r += H(o, t ? t.replace(/([^,])+/g, (e) => a.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (t) => /&/.test(t) ? t.replace(/&/g, e) : e ? e + " " + t : t)) : a) : o != null && (a = a[1] == "-" ? a : a.replace(/[A-Z]/g, "-$&").toLowerCase(), i += H.p ? H.p(a, o) : a + ":" + o + ";");
 	}
 	return n + (t && i ? t + "{" + i + "}" : i) + r;
-}, J = {}, Ft = (e) => {
+}, U = {}, dt = (e) => {
 	if (typeof e == "object") {
 		let t = "";
-		for (let n in e) t += n + Ft(e[n]);
+		for (let n in e) t += n + dt(e[n]);
 		return t;
 	}
 	return e;
-}, It = (e, t, n, r, i) => {
-	let a = Ft(e), o = J[a] || (J[a] = ((e) => {
+}, ft = (e, t, n, r, i) => {
+	let a = dt(e), o = U[a] || (U[a] = ((e) => {
 		let t = 0, n = 11;
 		for (; t < e.length;) n = 101 * n + e.charCodeAt(t++) >>> 0;
 		return "go" + n;
 	})(a));
-	if (!J[o]) {
+	if (!U[o]) {
 		let t = a === e ? ((e) => {
 			let t, n, r = [{}];
-			for (; t = Mt.exec(e.replace(Nt, ""));) t[4] ? r.shift() : t[3] ? (n = t[3].replace(Pt, " ").trim(), r.unshift(r[0][n] = r[0][n] || {})) : r[0][t[1]] = t[2].replace(Pt, " ").trim();
+			for (; t = ct.exec(e.replace(lt, ""));) t[4] ? r.shift() : t[3] ? (n = t[3].replace(ut, " ").trim(), r.unshift(r[0][n] = r[0][n] || {})) : r[0][t[1]] = t[2].replace(ut, " ").trim();
 			return r[0];
 		})(e) : e;
-		J[o] = q(i ? { ["@keyframes " + o]: t } : t, n ? "" : "." + o);
+		U[o] = H(i ? { ["@keyframes " + o]: t } : t, n ? "" : "." + o);
 	}
-	let s = n && J.g;
-	return n && (J.g = J[o]), ((e, t, n, r) => {
+	let s = n && U.g;
+	return n && (U.g = U[o]), ((e, t, n, r) => {
 		r ? t.data = t.data.replace(r, e) : t.data.indexOf(e) === -1 && (t.data = n ? e + t.data : t.data + e);
-	})(J[o], t, r, s), o;
-}, Lt = (e, t, n) => e.reduce((e, r, i) => {
+	})(U[o], t, r, s), o;
+}, pt = (e, t, n) => e.reduce((e, r, i) => {
 	let a = t[i];
 	if (a && a.call) {
 		let e = a(n), t = e && e.props && e.props.className || /^go/.test(e) && e;
-		a = t ? "." + t : e && typeof e == "object" ? e.props ? "" : q(e, "") : !1 === e ? "" : e;
+		a = t ? "." + t : e && typeof e == "object" ? e.props ? "" : H(e, "") : !1 === e ? "" : e;
 	}
 	return e + r + (a ?? "");
 }, "");
-function Y(e) {
+function W(e) {
 	let t = this || {}, n = e.call ? e(t.p) : e;
-	return It(n.unshift ? n.raw ? Lt(n, [].slice.call(arguments, 1), t.p) : n.reduce((e, n) => Object.assign(e, n && n.call ? n(t.p) : n), {}) : n, jt(t.target), t.g, t.o, t.k);
+	return ft(n.unshift ? n.raw ? pt(n, [].slice.call(arguments, 1), t.p) : n.reduce((e, n) => Object.assign(e, n && n.call ? n(t.p) : n), {}) : n, st(t.target), t.g, t.o, t.k);
 }
-Y.bind({ g: 1 }), Y.bind({ k: 1 });
-function Rt(e, t, n, r) {
-	q.p = t;
+W.bind({ g: 1 }), W.bind({ k: 1 });
+function mt(e, t, n, r) {
+	H.p = t;
 }
 //#endregion
 //#region src/lib/board/Gesture.jsx
-var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
+var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	t.exports = function e(t, n) {
 		if (t === n) return !0;
 		if (t && n && typeof t == "object" && typeof n == "object") {
@@ -1836,62 +1256,62 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 		}
 		return t !== t && n !== n;
 	};
-})))(), 1), Bt = () => {
+})))(), 1), gt = () => {
 	let e = navigator.userAgent.toLowerCase();
 	return /mac os ?x 10/.test(e);
-}, Vt = (() => {
+}, _t = (() => {
 	let e = document.createElement("iframe");
 	e.src = "#", document.body.appendChild(e);
 	let t = e.contentWindow.document;
 	t.open(), t.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>"), t.close();
 	let n = t.body.firstElementChild.offsetHeight;
 	return document.body.removeChild(e), n;
-})(), Ht = 800, Ut = (e, t) => e[Object.keys(e).map((e) => Number(e)).find((e) => e !== t)], Wt = ([e, t], [n, r]) => {
+})(), vt = 800, yt = (e, t) => e[Object.keys(e).map((e) => Number(e)).find((e) => e !== t)], bt = ([e, t], [n, r]) => {
 	let i = Math.abs(e - n), a = Math.abs(t - r);
 	return Math.hypot(i, a);
-}, X = () => {}, Gt = (e) => (t) => {
+}, G = () => {}, xt = (e) => (t) => {
 	let { event: n } = t;
 	return n.isPropagationStopped() ? null : e(t);
-}, Kt = (e) => async (...t) => {
+}, St = (e) => async (...t) => {
 	try {
 		await e(...t);
 	} catch (e) {
 		console.error(e);
 	}
-}, Z = new class {
+}, K = new class {
 	lastPromise = Promise.resolve(!0);
 	add(e, ...t) {
 		return new Promise((n, r) => {
-			this.lastPromise = this.lastPromise.then(() => Gt(Kt(e))(...t)).then(n).catch(r);
+			this.lastPromise = this.lastPromise.then(() => xt(St(e))(...t)).then(n).catch(r);
 		});
 	}
-}(), qt = ({ children: t, onDrag: n = X, onDragStart: r = X, onDragEnd: i = X, onPan: a = X, onTap: o = X, onLongTap: s = X, onDoubleTap: c = X, onZoom: l, mainAction: u = "drag" }) => {
-	let d = e.useRef(null), f = e.useRef({
+}(), q = ({ children: t, onDrag: n = G, onDragStart: r = G, onDragEnd: i = G, onPan: o = G, onTap: s = G, onLongTap: c = G, onDoubleTap: l = G, onZoom: u, mainAction: d = "drag", fill: f = !1 }) => {
+	let p = e.useRef(null), m = e.useRef({
 		moving: !1,
 		pointers: {},
 		mainPointer: void 0
-	}), p = (e) => {
-		let { deltaX: t, deltaY: n, clientX: r, clientY: i, deltaMode: o, ctrlKey: s, altKey: c, metaKey: u, target: d } = e;
-		if (!(c || s && !Bt())) {
-			if (Bt() && !s) Z.add(a, {
+	}), h = (e) => {
+		let { deltaX: t, deltaY: n, clientX: r, clientY: i, deltaMode: a, ctrlKey: s, altKey: c, metaKey: l, target: d } = e;
+		if (!(c || s && !gt())) {
+			if (gt() && !s) K.add(o, {
 				deltaX: -2 * t,
 				deltaY: -2 * n,
 				button: 1,
 				ctrlKey: s,
-				metaKey: u,
+				metaKey: l,
 				target: d,
 				event: e
 			});
 			else {
-				if (l === void 0 || !n) return;
+				if (u === void 0 || !n) return;
 				let t = n;
-				switch (o) {
+				switch (a) {
 					case 1:
-						t *= Vt;
+						t *= _t;
 						break;
-					case 2: t *= Ht;
+					case 2: t *= vt;
 				}
-				Bt() && (t *= 2), Z.add(l, {
+				gt() && (t *= 2), K.add(u, {
 					scale: t,
 					clientX: r,
 					clientY: i,
@@ -1899,15 +1319,15 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 				});
 			}
 		}
-	}, m = (e) => {
-		let { target: t, button: n, clientX: r, clientY: i, pointerId: a, altKey: o, ctrlKey: c, metaKey: l, isPrimary: u } = e;
-		if (f.current.pointers[a] = {
+	}, g = (e) => {
+		let { target: t, button: n, clientX: r, clientY: i, pointerId: a, altKey: o, ctrlKey: s, metaKey: l, isPrimary: u } = e;
+		if (m.current.pointers[a] = {
 			clientX: r,
 			clientY: i
-		}, u && (f.current.mainPointer = void 0), f.current.mainPointer !== void 0) {
-			if (f.current.mainPointer !== a) try {
-				let { clientX: e, clientY: t } = Ut(f.current.pointers, a), n = (e + r) / 2, o = (t + i) / 2, s = Wt([e, t], [r, i]);
-				Object.assign(f.current, {
+		}, u && (m.current.mainPointer = void 0), m.current.mainPointer !== void 0) {
+			if (m.current.mainPointer !== a) try {
+				let { clientX: e, clientY: t } = yt(m.current.pointers, a), n = (e + r) / 2, o = (t + i) / 2, s = bt([e, t], [r, i]);
+				Object.assign(m.current, {
 					pressed: !0,
 					moving: !1,
 					gestureStart: !1,
@@ -1919,11 +1339,11 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 					prevDistance: s
 				});
 			} catch (e) {
-				console.log("Error while getting other pointer. Ignoring", e), f.current.mainPointer;
+				console.log("Error while getting other pointer. Ignoring", e), m.current.mainPointer;
 			}
 			return;
 		}
-		f.current.mainPointer = a, Object.assign(f.current, {
+		m.current.mainPointer = a, Object.assign(m.current, {
 			pressed: !0,
 			moving: !1,
 			gestureStart: !1,
@@ -1938,11 +1358,11 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 			target: t,
 			timeStart: Date.now(),
 			longTapTimeout: setTimeout(async () => {
-				f.current.noTap = !0, Z.add(s, {
+				m.current.noTap = !0, K.add(c, {
 					clientX: r,
 					clientY: i,
 					altKey: o,
-					ctrlKey: c,
+					ctrlKey: s,
 					metaKey: l,
 					target: t,
 					event: e
@@ -1954,89 +1374,89 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 		} catch (e) {
 			console.log("Fail to capture pointer", e);
 		}
-	}, h = (e) => {
-		if (f.current.pressed) {
-			let { pointerId: t, clientX: i, clientY: o, altKey: s, shiftKey: c, ctrlKey: p, metaKey: m, buttons: h } = e;
-			f.current.pointers[t] = {
+	}, _ = (e) => {
+		if (m.current.pressed) {
+			let { pointerId: t, clientX: i, clientY: a, altKey: s, shiftKey: c, ctrlKey: l, metaKey: f, buttons: h } = e;
+			m.current.pointers[t] = {
 				clientX: i,
-				clientY: o
-			}, f.current.moving = !0;
-			let g = Object.keys(f.current.pointers).length === 2, _, v, y = 0;
+				clientY: a
+			}, m.current.moving = !0;
+			let g = Object.keys(m.current.pointers).length === 2, _, v, y = 0;
 			if (g) {
-				let { clientX: e, clientY: n } = Ut(f.current.pointers, t);
-				_ = (e + i) / 2, v = (n + o) / 2, y = Wt([e, n], [i, o]);
-			} else _ = i, v = o;
-			let b = c || s || p || m || h !== 1;
-			u !== "drag" && (b = !b);
+				let { clientX: e, clientY: n } = yt(m.current.pointers, t);
+				_ = (e + i) / 2, v = (n + a) / 2, y = bt([e, n], [i, a]);
+			} else _ = i, v = a;
+			let b = c || s || l || f || h !== 1;
+			d !== "drag" && (b = !b);
 			let x = !b, S = b;
 			if (x) {
-				f.current.gestureStart || (d.current.style.cursor = "move", f.current.gestureStart = !0, clearTimeout(f.current.longTapTimeout), Z.add(r, {
+				m.current.gestureStart || (p.current.style.cursor = "move", m.current.gestureStart = !0, clearTimeout(m.current.longTapTimeout), K.add(r, {
 					deltaX: 0,
 					deltaY: 0,
-					startX: f.current.startX,
-					startY: f.current.startY,
-					clientX: f.current.startX,
-					clientY: f.current.startY,
+					startX: m.current.startX,
+					startY: m.current.startY,
+					clientX: m.current.startX,
+					clientY: m.current.startY,
 					distanceX: 0,
 					distanceY: 0,
-					button: f.current.currentButton,
+					button: m.current.currentButton,
 					altKey: s,
 					shiftKey: c,
-					ctrlKey: p,
-					metaKey: m,
-					target: f.current.target,
-					event: f.current.pointerDownEvent
+					ctrlKey: l,
+					metaKey: f,
+					target: m.current.target,
+					event: m.current.pointerDownEvent
 				}));
-				let t = _ - f.current.prevX, i = v - f.current.prevY, a = _ - f.current.startX, o = v - f.current.startY;
-				Z.add(n, {
+				let t = _ - m.current.prevX, i = v - m.current.prevY, a = _ - m.current.startX, o = v - m.current.startY;
+				K.add(n, {
 					deltaX: t,
 					deltaY: i,
-					startX: f.current.startX,
-					startY: f.current.startY,
+					startX: m.current.startX,
+					startY: m.current.startY,
 					clientX: _,
 					clientY: v,
 					distanceX: a,
 					distanceY: o,
-					button: f.current.currentButton,
+					button: m.current.currentButton,
 					altKey: s,
 					shiftKey: c,
-					ctrlKey: p,
-					metaKey: m,
-					target: f.current.target,
+					ctrlKey: l,
+					metaKey: f,
+					target: m.current.target,
 					event: e
 				});
 			}
 			if (S) {
-				f.current.gestureStart || (d.current.style.cursor = "move", f.current.gestureStart = !0, clearTimeout(f.current.longTapTimeout));
-				let t = _ - f.current.prevX, n = v - f.current.prevY, { target: r } = f.current;
-				if (Z.add(a, {
+				m.current.gestureStart || (p.current.style.cursor = "move", m.current.gestureStart = !0, clearTimeout(m.current.longTapTimeout));
+				let t = _ - m.current.prevX, n = v - m.current.prevY, { target: r } = m.current;
+				if (K.add(o, {
 					deltaX: t,
 					deltaY: n,
-					button: f.current.currentButton,
+					button: m.current.currentButton,
 					altKey: s,
 					shiftKey: c,
-					ctrlKey: p,
-					metaKey: m,
+					ctrlKey: l,
+					metaKey: f,
 					target: r,
 					event: e
-				}), y !== f.current.prevDistance && l) {
-					let t = f.current.prevDistance - y;
-					Math.abs(t) > 0 && (Z.add(l, {
+				}), y !== m.current.prevDistance && u) {
+					let t = m.current.prevDistance - y;
+					Math.abs(t) > 0 && (K.add(u, {
 						scale: t * 3,
 						clientX: _,
 						clientY: v,
 						event: e
-					}), f.current.prevDistance = y);
+					}), m.current.prevDistance = y);
 				}
 			}
-			f.current.prevX = _, f.current.prevY = v;
+			m.current.prevX = _, m.current.prevY = v;
 		}
-	}, g = (e) => {
-		let { clientX: t, clientY: n, altKey: r, shiftKey: a, ctrlKey: s, metaKey: c, target: l, pointerId: u } = e;
-		if (f.current.pointers[u]) {
-			if (delete f.current.pointers[u], f.current.mainPointer !== u) {
-				let { clientX: e, clientY: t } = f.current.pointers[f.current.mainPointer];
-				Object.assign(f.current, {
+	}, v = (e) => {
+		let { clientX: t, clientY: n, altKey: r, shiftKey: a, ctrlKey: o, metaKey: c, target: l, pointerId: u } = e;
+		if (m.current.pointers[u]) {
+			if (delete m.current.pointers[u], m.current.mainPointer !== u) {
+				let { clientX: e, clientY: t } = m.current.pointers[m.current.mainPointer];
+				Object.assign(m.current, {
 					prevX: e,
 					prevY: t,
 					prevDistance: 0,
@@ -2044,12 +1464,12 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 				});
 				return;
 			}
-			for (; Object.keys(f.current.pointers).length > 0;) {
-				f.current.mainPointer = Number(Object.keys(f.current.pointers)[0]);
+			for (; Object.keys(m.current.pointers).length > 0;) {
+				m.current.mainPointer = Number(Object.keys(m.current.pointers)[0]);
 				try {
-					f.current.target.setPointerCapture(f.current.mainPointer);
-					let { clientX: e, clientY: t } = f.current.pointers[f.current.mainPointer];
-					Object.assign(f.current, {
+					m.current.target.setPointerCapture(m.current.mainPointer);
+					let { clientX: e, clientY: t } = m.current.pointers[m.current.mainPointer];
+					Object.assign(m.current, {
 						prevX: e,
 						prevY: t,
 						prevDistance: 0,
@@ -2057,33 +1477,33 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 					});
 					return;
 				} catch (e) {
-					console.log("Fails to set pointer capture", e), f.current.mainPointer = void 0, delete f.current.pointers[Object.keys(f.current.pointers)[0]];
+					console.log("Fails to set pointer capture", e), m.current.mainPointer = void 0, delete m.current.pointers[Object.keys(m.current.pointers)[0]];
 				}
 			}
-			if (f.current.mainPointer = void 0, f.current.pressed = !1, clearTimeout(f.current.longTapTimeout), f.current.moving) f.current.moving = !1, Z.add(i, {
-				deltaX: t - f.current.prevX,
-				deltaY: n - f.current.prevY,
-				startX: f.current.startX,
-				startY: f.current.startY,
+			if (m.current.mainPointer = void 0, m.current.pressed = !1, clearTimeout(m.current.longTapTimeout), m.current.moving) m.current.moving = !1, K.add(i, {
+				deltaX: t - m.current.prevX,
+				deltaY: n - m.current.prevY,
+				startX: m.current.startX,
+				startY: m.current.startY,
 				clientX: t,
 				clientY: n,
-				distanceX: t - f.current.startX,
-				distanceY: n - f.current.startY,
-				button: f.current.currentButton,
+				distanceX: t - m.current.startX,
+				distanceY: n - m.current.startY,
+				button: m.current.currentButton,
 				altKey: r,
 				shiftKey: a,
-				ctrlKey: s,
+				ctrlKey: o,
 				metaKey: c,
 				event: e
-			}), d.current.style.cursor = "auto";
+			}), p.current.style.cursor = "auto";
 			else {
 				let i = Date.now();
-				f.current.noTap ? f.current.noTap = !1 : f.current.timeStart - i < 300 && Z.add(o, {
+				m.current.noTap ? m.current.noTap = !1 : m.current.timeStart - i < 300 && K.add(s, {
 					clientX: t,
 					clientY: n,
 					altKey: r,
 					shiftKey: a,
-					ctrlKey: s,
+					ctrlKey: o,
 					metaKey: c,
 					target: l,
 					event: e
@@ -2091,17 +1511,15 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 			}
 		}
 	};
-	return /* @__PURE__ */ (0, S.jsx)("div", {
-		onWheel: p,
-		onPointerDown: m,
-		onPointerMove: h,
-		onPointerUp: g,
-		onPointerOut: g,
-		onPointerLeave: g,
-		onPointerCancel: g,
+	return /* @__PURE__ */ a("div", {
+		onWheel: h,
+		onPointerDown: g,
+		onPointerMove: _,
+		onPointerUp: v,
+		onPointerCancel: v,
 		onDoubleClick: (e) => {
 			let { clientX: t, clientY: n, altKey: r, shiftKey: i, ctrlKey: a, metaKey: o, target: s } = e;
-			Z.add(c, {
+			K.add(l, {
 				clientX: t,
 				clientY: n,
 				altKey: r,
@@ -2112,13 +1530,19 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 				event: e
 			});
 		},
-		style: { touchAction: "none" },
-		ref: d,
+		style: {
+			touchAction: "none",
+			...f ? {
+				position: "absolute",
+				inset: 0
+			} : {}
+		},
+		ref: p,
 		children: t
 	});
-}, Jt = ({ onResize: e, ...t }) => {
-	let [n] = V((e) => [e.getBoardState]);
-	return /* @__PURE__ */ (0, S.jsx)(qt, {
+}, J = ({ onResize: e, ...t }) => {
+	let [n] = F((e) => [e.getBoardState]);
+	return /* @__PURE__ */ a(q, {
 		onDrag: ({ deltaX: t, deltaY: r, event: i }) => {
 			i.stopPropagation();
 			let { scale: a } = n();
@@ -2127,38 +1551,38 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 				height: r / a
 			});
 		},
-		children: /* @__PURE__ */ (0, S.jsx)("div", { ...t })
+		children: /* @__PURE__ */ a("div", { ...t })
 	});
-}, Yt = Y`
+}, Ct = W`
   display: inline-block;
   transition: transform 150ms;
   user-select: none;
   padding: 2px;
   box-sizing: border-box;
-`, Xt = Y`
+`, wt = W`
   border: 2px dashed #db5034;
   padding: 0px;
   cursor: pointer;
-`, Q = Y`
+`, Y = W`
   position: absolute;
   width: 0px;
   height: 0px;
-`, Zt = Y`
+`, Tt = W`
   top: 0;
   left: 0;
-`, Qt = Y`
+`, Et = W`
   top: 0;
   right: 0;
-`, $t = Y`
+`, Dt = W`
   bottom: 0;
   left: 0;
-`, en = Y`
+`, Ot = W`
   bottom: 0;
   right: 0;
-`, tn = Y`
+`, kt = W`
   top: 50%;
   left: 50%;
-`, nn = Y`
+`, X = W`
   position: absolute;
 
   width: 10px;
@@ -2166,20 +1590,20 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
   border: 2px solid #db5034;
   background-color: #db5034;
   cursor: move;
-`, rn = Y`
+`, At = W`
   cursor: ew-resize;
   right: -6px;
   top: calc(50% - 5px);
-`, an = Y`
+`, jt = W`
   cursor: ns-resize;
   bottom: -6px;
   left: calc(50% - 5px);
-`, on = Y`
+`, Mt = W`
   cursor: nwse-resize;
   bottom: -6px;
   right: -6px;
-`, sn = ({ onReload: e }) => /* @__PURE__ */ (0, S.jsxs)("div", {
-	className: `syncboard-error-item ${Y({
+`, Nt = ({ onReload: e }) => /* @__PURE__ */ o("div", {
+	className: `syncboard-error-item ${W({
 		width: "100px",
 		display: "flex",
 		flexDirection: "column",
@@ -2187,11 +1611,11 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 		textAlign: "center",
 		color: "red"
 	})}`,
-	children: ["Sorry, this item seems broken.", /* @__PURE__ */ (0, S.jsx)("button", {
+	children: ["Sorry, this item seems broken.", /* @__PURE__ */ a("button", {
 		onClick: e,
 		children: "Reload it"
 	})]
-}), cn = class extends e.Component {
+}), Pt = class extends e.Component {
 	constructor(e) {
 		super(e), this.state = {
 			hasError: !1,
@@ -2209,11 +1633,11 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 	}
 	render() {
 		let { ErrorComponent: e } = this.props;
-		return this.state.hasError ? /* @__PURE__ */ (0, S.jsx)(e, { onReload: this.onReload }) : this.props.children;
+		return this.state.hasError ? /* @__PURE__ */ a(e, { onReload: this.onReload }) : this.props.children;
 	}
-}, ln = (e) => {
+}, Ft = (e) => {
 	e.target.className = "";
-}, un = ({ width: e, height: t, actualWidth: n, actualHeight: r, prevState: i, keepRatio: a }) => {
+}, It = ({ width: e, height: t, actualWidth: n, actualHeight: r, prevState: i, keepRatio: a }) => {
 	let { width: o, height: s } = i;
 	if ([o, s] = [parseFloat(o), parseFloat(s)], (!o || Number.isNaN(Number(o))) && (o = n), (!s || Number.isNaN(Number(s))) && (s = r), a) {
 		let n = o / s;
@@ -2228,25 +1652,25 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 		width: (o + e).toFixed(1),
 		height: (s + t).toFixed(1)
 	};
-}, dn = {
+}, Lt = {
 	w: !0,
 	h: !0,
 	b: !0
-}, fn = t(({ setState: t, state: { type: n, rotation: r = 0, id: i, locked: a, extraClasses: o, ...s } = {}, animate: c = "hvr-pop", isSelected: l, itemMap: u, showResizeHandle: d = !0 }) => {
-	let f = e.useRef(null), [p] = V((e) => [e.config.uid]), { component: m = () => null, resizeDirections: h = dn, resize: g = un } = u[n], _ = e.useCallback((e, n = !1) => t(i, e, n), [t, i]);
+}, Rt = t(({ setState: t, state: { type: n, rotation: r = 0, id: s, locked: c, extraClasses: l, ...u } = {}, animate: d = "hvr-pop", isSelected: f, itemMap: p, showResizeHandle: m = !0 }) => {
+	let h = e.useRef(null), [g] = F((e) => [e.config.uid]), { component: _ = () => null, resizeDirections: v = Lt, resize: y = It } = p[n], b = e.useCallback((e, n = !1) => t(s, e, n), [t, s]);
 	e.useEffect(() => {
-		f.current.className = c;
-	}, [c]);
-	let v = [
+		h.current.className = d;
+	}, [d]);
+	let x = [
 		"item",
-		i,
-		Yt
+		s,
+		Ct
 	];
-	a && v.push("locked"), l && (v.push("selected"), v.push(Xt)), Array.isArray(o) && v.concat(o);
-	let y = v.join(" "), b = ({ width: e = 0, height: t = 0, keepRatio: n }) => {
-		_((r) => {
-			let { offsetWidth: i, offsetHeight: a } = f.current;
-			return g({
+	c && x.push("locked"), f && (x.push("selected"), x.push(wt)), Array.isArray(l) && x.concat(l);
+	let S = x.join(" "), C = ({ width: e = 0, height: t = 0, keepRatio: n }) => {
+		b((r) => {
+			let { offsetWidth: i, offsetHeight: a } = h.current;
+			return y({
 				prevState: r,
 				width: e,
 				height: t,
@@ -2255,222 +1679,225 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 				keepRatio: n
 			});
 		});
-	}, x = ({ width: e }) => {
-		b({ width: e });
-	}, C = ({ height: e }) => {
-		b({ height: e });
 	}, w = ({ width: e }) => {
-		b({
+		C({ width: e });
+	}, ee = ({ height: e }) => {
+		C({ height: e });
+	}, T = ({ width: e }) => {
+		C({
 			height: e,
 			width: e,
 			keepRatio: !0
 		});
 	};
-	return /* @__PURE__ */ (0, S.jsx)("div", {
+	return /* @__PURE__ */ a("div", {
 		style: { transform: `rotate(${r}deg` },
-		"data-id": i,
-		id: `${p}__${i}`,
-		className: y,
-		children: /* @__PURE__ */ (0, S.jsxs)("div", {
+		"data-id": s,
+		id: `${g}__${s}`,
+		className: S,
+		children: /* @__PURE__ */ o("div", {
 			style: { display: "flex" },
-			ref: f,
-			onAnimationEnd: ln,
+			ref: h,
+			onAnimationEnd: Ft,
 			onKeyDown: (e) => e.stopPropagation(),
 			onKeyUp: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ (0, S.jsx)(cn, {
-					itemId: i,
-					state: s,
-					ErrorComponent: u?.error?.component || sn,
-					children: /* @__PURE__ */ (0, S.jsx)(m, {
-						...s,
-						id: i,
-						setState: _
+				/* @__PURE__ */ a(Pt, {
+					itemId: s,
+					state: u,
+					ErrorComponent: p?.error?.component || Nt,
+					children: /* @__PURE__ */ a(_, {
+						...u,
+						id: s,
+						setState: b
 					})
 				}),
-				/* @__PURE__ */ (0, S.jsx)("div", { className: `corner ${Q} ${Zt}` }),
-				/* @__PURE__ */ (0, S.jsx)("div", { className: `corner ${Q} ${Qt}` }),
-				/* @__PURE__ */ (0, S.jsx)("div", { className: `corner ${Q} ${en}` }),
-				/* @__PURE__ */ (0, S.jsx)("div", { className: `corner ${Q} ${$t}` }),
-				/* @__PURE__ */ (0, S.jsx)("div", { className: `center ${Q} ${tn}` }),
-				d && /* @__PURE__ */ (0, S.jsxs)(S.Fragment, { children: [
-					h.b && /* @__PURE__ */ (0, S.jsx)(Jt, {
-						className: `${nn} ${on}`,
-						onResize: w
+				/* @__PURE__ */ a("div", { className: `corner ${Y} ${Tt}` }),
+				/* @__PURE__ */ a("div", { className: `corner ${Y} ${Et}` }),
+				/* @__PURE__ */ a("div", { className: `corner ${Y} ${Ot}` }),
+				/* @__PURE__ */ a("div", { className: `corner ${Y} ${Dt}` }),
+				/* @__PURE__ */ a("div", { className: `center ${Y} ${kt}` }),
+				m && /* @__PURE__ */ o(i, { children: [
+					v.b && /* @__PURE__ */ a(J, {
+						className: `${X} ${Mt}`,
+						onResize: T
 					}),
-					h.h && /* @__PURE__ */ (0, S.jsx)(Jt, {
-						className: `${nn} ${an}`,
-						onResize: C
+					v.h && /* @__PURE__ */ a(J, {
+						className: `${X} ${jt}`,
+						onResize: ee
 					}),
-					h.w && /* @__PURE__ */ (0, S.jsx)(Jt, {
-						className: `${nn} ${rn}`,
-						onResize: x
+					v.w && /* @__PURE__ */ a(J, {
+						className: `${X} ${At}`,
+						onResize: w
 					})
 				] })
 			]
 		})
 	});
-}, ({ state: e, setState: t, isSelected: n, showResizeHandle: r }, { state: i, setState: a, isSelected: o, showResizeHandle: s }) => n === o && r === s && t === a && (0, zt.default)(e, i)), pn = (e) => e, mn = t(({ state: e = {}, getCurrentUser: t, className: n, ...r }) => {
+}, ({ state: e, setState: t, isSelected: n, showResizeHandle: r }, { state: i, setState: a, isSelected: o, showResizeHandle: s }) => n === o && r === s && t === a && (0, ht.default)(e, i)), zt = (e) => e, Bt = t(({ state: e = {}, getCurrentUser: t, className: n, ...r }) => {
 	if (!r.itemMap[e.type]) return null;
-	let { stateHook: i = pn } = r.itemMap[e.type], { x: a = 0, y: o = 0, layer: s = 0, moving: c, ...l } = i(e, { currentUser: t?.() }), u = (s + 4) * 10 + 100 + (c ? 5 : 0);
-	return /* @__PURE__ */ (0, S.jsx)("div", {
+	let { stateHook: i = zt } = r.itemMap[e.type], { x: o = 0, y: s = 0, layer: c = 0, moving: l, ...u } = i(e, { currentUser: t?.() }), d = (c + 4) * 10 + 100 + (l ? 5 : 0);
+	return /* @__PURE__ */ a("div", {
 		className: n,
 		style: {
-			transform: `translate(${a}px, ${o}px)`,
-			zIndex: u
+			transform: `translate(${o}px, ${s}px)`,
+			zIndex: d
 		},
-		children: /* @__PURE__ */ (0, S.jsx)(fn, {
+		children: /* @__PURE__ */ a(Rt, {
 			...r,
 			showResizeHandle: r.isSelected && r.showResizeHandle,
-			state: l
+			state: u
 		})
 	});
-}), hn = () => {
-	let { updateItem: e } = W(), [t, n] = B((e) => [e.itemIds, e.items]), [r, i, a, o] = V((e) => [
-		e.config.boardSize,
+}), Vt = () => {
+	let { updateItem: e } = z(), [t, n] = P((e) => [e.itemIds, e.items]), [r, i, o] = F((e) => [
 		e.config.showResizeHandle,
 		e.config.itemTemplates,
 		e.selection
-	]), [s] = K((e) => [e.getUser]), c = Y({
+	]), [s] = V((e) => [e.getUser]), c = W({
 		position: "absolute",
-		top: `${r / 2}px`,
-		left: `${r / 2}px`,
+		top: 0,
+		left: 0,
+		pointerEvents: "auto",
 		display: "inline-block",
 		lineHeight: 0
 	});
-	return t.map((t) => /* @__PURE__ */ (0, S.jsx)(mn, {
+	return t.map((t) => /* @__PURE__ */ a(Bt, {
 		state: n[t],
 		setState: e,
 		isSelected: o.includes(t),
-		itemMap: a,
-		boardSize: r,
+		itemMap: i,
 		getCurrentUser: s,
-		showResizeHandle: i,
+		showResizeHandle: r,
 		className: c
 	}, t));
-}, gn = Y({
+}, Ht = W({
 	zIndex: 210,
 	position: "absolute",
 	backgroundColor: "hsla(0, 40%, 50%, 10%)",
 	border: "2px solid hsl(0, 55%, 40%)"
-}), _n = (e, t, n = !1) => {
+}), Ut = (e, t, n = !1) => {
 	let r = t.getElementsByClassName("selector");
 	if (!r.length) return [];
 	let i = r[0];
 	return Array.from(t.getElementsByClassName("item")).filter((t) => {
-		let r = e[z(t)];
-		return !r || !n && r.locked ? !1 : pe(t, i);
-	}).map((e) => z(e));
-}, vn = ({ children: t, moveFirst: n }) => {
-	let [r, i, a, o, s, c] = V((e) => [
+		let r = e[N(t)];
+		return !r || !n && r.locked ? !1 : oe(t, i);
+	}).map((e) => N(e));
+}, Wt = ({ children: t, moveFirst: n }) => {
+	let [r, i, s, c, l, u] = F((e) => [
 		e.getSelection,
 		e.clear,
 		e.setSelection,
 		e.select,
 		e.getConfiguration,
-		e.getBoardState,
 		e.updateBoardState
-	]), { findElementUnderPointer: l } = W(), [u] = B((e) => [e.getItems]), [d, f] = e.useState({}), [, p] = e.useTransition(), [m, h] = e.useState(!1), g = e.useRef(null), _ = e.useRef({ moving: !1 });
-	return H(document, "keydown", (e) => {
-		e.key === "l" && h(!0);
-	}), H(document, "keyup", (e) => {
-		e.key === "l" && h(!1);
+	]), { findElementUnderPointer: d } = z(), [p] = P((e) => [e.getItems]), [m, h] = e.useState({}), [, g] = e.useTransition(), [_, v] = e.useState(!1), y = e.useRef(null), b = e.useRef({ moving: !1 });
+	return f(document, "keydown", (e) => {
+		e.key === "l" && v(!0);
+	}), f(document, "keyup", (e) => {
+		e.key === "l" && v(!1);
 	}), e.useEffect(() => (i(), () => {
 		i();
 	}), [i]), e.useEffect(() => {
-		if (_.current.moving) {
-			let e = u(), { boardWrapper: t } = s(), n = _n(e, t, m);
-			p(() => {
-				a(n);
+		if (b.current.moving) {
+			let e = p(), { boardWrapper: t } = l(), n = Ut(e, t, _);
+			g(() => {
+				s(n);
 			});
 		}
 	}, [
+		l,
+		p,
+		m,
 		s,
-		u,
-		d,
-		a,
-		m
-	]), /* @__PURE__ */ (0, S.jsx)(qt, {
+		_
+	]), /* @__PURE__ */ a(q, {
+		fill: !0,
 		onDragStart: async (e) => {
-			await l(e) || (_.current.moving = !0, p(() => {
-				c({ selecting: !0 });
-			}), g.current.style.cursor = "crosshair");
+			await d(e) || (b.current.moving = !0, g(() => {
+				u({ selecting: !0 });
+			}), y.current.style.cursor = "crosshair");
 		},
 		onDrag: ({ distanceY: e, distanceX: t, startX: n, startY: r }) => {
-			if (_.current.moving) {
-				let { top: i, left: a } = g.current.getBoundingClientRect(), o = n - a, s = r - i;
-				t > 0 ? (_.current.left = o, _.current.width = t) : (_.current.left = o + t, _.current.width = -t), e > 0 ? (_.current.top = s, _.current.height = e) : (_.current.top = s + e, _.current.height = -e), f({
-					..._.current,
+			if (b.current.moving) {
+				let { top: i, left: a } = y.current.getBoundingClientRect(), o = n - a, s = r - i;
+				t > 0 ? (b.current.left = o, b.current.width = t) : (b.current.left = o + t, b.current.width = -t), e > 0 ? (b.current.top = s, b.current.height = e) : (b.current.top = s + e, b.current.height = -e), h({
+					...b.current,
 					moving: !0
 				});
 			}
 		},
 		onDragEnd: () => {
-			_.current.moving && (p(() => {
-				c({ selecting: !1 });
-			}), _.current.moving = !1, f({ moving: !1 }), g.current.style.cursor = "auto");
+			b.current.moving && (g(() => {
+				u({ selecting: !1 });
+			}), b.current.moving = !1, h({ moving: !1 }), y.current.style.cursor = "auto");
 		},
 		onTap: (e) => {
-			let { target: t, ctrlKey: n, metaKey: s } = e, c = l(e);
-			if (!c && I(t, "board")) i();
+			let { ctrlKey: t, metaKey: n } = e, a = d(e);
+			if (!a) i();
 			else {
-				let e = z(c);
+				let e = N(a);
 				if (!e) {
 					i();
 					return;
 				}
-				let t = r();
-				c && !t.includes(e) && (n || s ? o([e]) : a([e]));
+				let o = r();
+				a && !o.includes(e) && (t || n ? c([e]) : s([e]));
 			}
 		},
 		onLongTap: ({ target: e }) => {
-			let t = I(e, "item");
+			let t = ne(e, "item");
 			if (t) {
-				let e = z(t);
-				a([e]);
+				let e = N(t);
+				s([e]);
 			}
 		},
 		mainAction: n ? "pan" : "drag",
-		children: /* @__PURE__ */ (0, S.jsxs)("div", {
-			ref: g,
-			children: [d.moving && /* @__PURE__ */ (0, S.jsx)("div", {
+		children: /* @__PURE__ */ o("div", {
+			ref: y,
+			style: {
+				position: "absolute",
+				inset: 0
+			},
+			children: [m.moving && /* @__PURE__ */ a("div", {
 				style: {
-					transform: `translate(${d.left}px, ${d.top}px)`,
-					height: `${d.height}px`,
-					width: `${d.width}px`
+					transform: `translate(${m.left}px, ${m.top}px)`,
+					height: `${m.height}px`,
+					width: `${m.width}px`
 				},
-				className: `selector ${gn}`
+				className: `selector ${Ht}`
 			}), t]
 		})
 	});
-}, yn = ({ children: t }) => {
-	let { moveItems: n, placeItems: r, findElementUnderPointer: i } = W(), { vectorFromWrapperToBoard: a } = U(), [o, s, c, l, u] = V((e) => [
+}, Gt = ({ children: t }) => {
+	let { moveItems: n, placeItems: r, findElementUnderPointer: i } = z(), { vectorFromWrapperToBoard: o } = L(), [s, c, l, u, d] = F((e) => [
 		e.select,
 		e.setSelection,
 		e.getSelection,
 		e.getBoardState,
 		e.updateBoardState
-	]), [d] = B((e) => [e.getBoardConfig]), f = e.useRef({}), p = e.useRef({ items: [] });
-	return H(document, "keydown", (e) => {
+	]), [p] = P((e) => [e.getBoardConfig]), m = e.useRef({}), h = e.useRef({ items: [] });
+	return f(document, "keydown", (e) => {
 		if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return;
-		let t = c();
+		let t = l();
 		if (t.length) {
-			let { gridSize: i = 1 } = d(), o = 0, s = 0;
+			let { gridSize: i = 1 } = p(), a = 0, s = 0;
 			switch (e.key) {
 				case "ArrowLeft":
-					o = -10;
+					a = -10;
 					break;
 				case "ArrowRight":
-					o = 10;
+					a = 10;
 					break;
 				case "ArrowUp":
 					s = -10;
 					break;
 				case "ArrowDown": s = 10;
 			}
-			if (o || s) {
-				e.shiftKey && (o *= 5, s *= 5), (e.ctrlKey || e.altKey || e.metaKey) && (o /= 10, s /= 10);
-				let [c, l] = a(o, s);
+			if (a || s) {
+				e.shiftKey && (a *= 5, s *= 5), (e.ctrlKey || e.altKey || e.metaKey) && (a /= 10, s /= 10);
+				let [c, l] = o(a, s);
 				n(t, {
 					x: c,
 					y: l
@@ -2480,62 +1907,63 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 				}), e.preventDefault();
 			}
 		}
-	}), /* @__PURE__ */ (0, S.jsx)(qt, {
+	}), /* @__PURE__ */ a(q, {
+		fill: !0,
 		onDragStart: (e) => {
 			let { ctrlKey: t, metaKey: n, event: r } = e, a = i(e);
 			if (a) {
 				r.stopPropagation();
-				let e = c();
-				p.current.items = e;
-				let i = z(a);
-				e.includes(i) || (t || n ? (p.current.items = [...e, i], o([i])) : (p.current.items = [i], s([i]))), Object.assign(f.current, { moving: !0 });
+				let e = l();
+				h.current.items = e;
+				let i = N(a);
+				e.includes(i) || (t || n ? (h.current.items = [...e, i], s([i])) : (h.current.items = [i], c([i]))), Object.assign(m.current, { moving: !0 });
 			}
 		},
 		onDrag: ({ deltaX: e, deltaY: t, event: r }) => {
-			if (f.current.moving) {
+			if (m.current.moving) {
 				r.stopPropagation();
-				let { movingItems: i } = l(), [o, s] = a(e, t);
-				n(p.current.items, {
-					x: o,
+				let { movingItems: i } = u(), [a, s] = o(e, t);
+				n(h.current.items, {
+					x: a,
 					y: s
-				}, !0), i || u({ movingItems: !0 });
+				}, !0), i || d({ movingItems: !0 });
 			}
 		},
 		onDragEnd: () => {
-			if (f.current.moving) {
-				let { gridSize: e = 1 } = d(), t = e || 1;
-				f.current = { moving: !1 }, r(p.current.items, {
+			if (m.current.moving) {
+				let { gridSize: e = 1 } = p(), t = e || 1;
+				m.current = { moving: !1 }, r(h.current.items, {
 					type: "grid",
 					size: t
-				}), u({ movingItems: !1 });
+				}), d({ movingItems: !1 });
 			}
 		},
 		children: t
 	});
-}, bn = (t) => {
+}, Kt = (t) => {
 	let n = e.useRef({
 		hover: !1,
 		x: 0,
 		y: 0
 	});
-	return H(t, "mousemove", (e) => {
+	return f(t, "mousemove", (e) => {
 		let { clientX: t, clientY: r } = e;
 		n.current.x = t, n.current.y = r;
-	}), H(t, "mouseenter", () => {
+	}), f(t, "mouseenter", () => {
 		n.current.hover = !0;
-	}), H(t, "mouseleave", () => {
+	}), f(t, "mouseleave", () => {
 		n.current.hover = !1;
 	}), e.useCallback(() => n.current, []);
-}, xn = [...[
+}, qt = [...[
 	,
 	,
 	,
 	,
 	,
-].keys()].map((e) => `Digit${e + 1}`), Sn = () => {
-	let [t, n] = e.useState({}), [r, i] = V((e) => [e.getBoardState, e.updateBoardState]);
-	return H(document, "keydown", (e) => {
-		if (!["INPUT", "TEXTAREA"].includes(e.target.tagName) && xn.includes(e.code)) {
+].keys()].map((e) => `Digit${e + 1}`), Jt = () => {
+	let [t, n] = e.useState({}), [r, i] = F((e) => [e.getBoardState, e.updateBoardState]);
+	return f(document, "keydown", (e) => {
+		if (!["INPUT", "TEXTAREA"].includes(e.target.tagName) && qt.includes(e.code)) {
 			let a = e.code, { translateX: o, translateY: s, scale: c } = r();
 			e.altKey || e.metaKey || e.ctrlKey || e.shiftKey ? n((e) => ({
 				...e,
@@ -2547,31 +1975,25 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 			})) : t[a] && i(t[a]), e.preventDefault();
 		}
 	}), null;
-}, Cn = ({ children: t, moveFirst: n = !1 }) => {
-	let r = e.useRef(null), [i, a, o, s, c] = V((e) => [
-		{
-			translateX: e.boardState.translateX,
-			translateY: e.boardState.translateY,
-			scale: e.boardState.scale,
-			rotate: e.boardState.rotate
-		},
+}, Yt = ({ children: t, moveFirst: n = !1 }) => {
+	let r = e.useRef(null), [i, o, s, c] = F((e) => [
 		e.config.itemExtent,
 		e.getConfiguration,
 		e.updateBoardState,
 		e.getSelection
-	]), { zoomToCenter: l, zoomToExtent: u, moveBoard: d } = U(), [f, p] = e.useState(!1), m = e.useRef({}), h = bn(r);
-	Sn();
-	let g = e.useCallback(() => {
+	]), { zoomToCenter: l, zoomToExtent: u, moveBoard: d } = L(), [p, m] = e.useState(!1), h = e.useRef({}), g = Kt(r);
+	Jt();
+	let _ = e.useCallback(() => {
 		let { itemExtent: e } = o();
 		u(e);
 	}, [o, u]);
 	return e.useEffect(() => {
-		!f && a.radius && (g(), p(!0));
+		!p && i.radius && (_(), m(!0));
 	}, [
-		g,
-		f,
-		a
-	]), H(document, "keydown", (e) => {
+		_,
+		p,
+		i
+	]), f(document, "keydown", (e) => {
 		if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return;
 		let t = 0, n = 0, r = 1;
 		switch (e.key) {
@@ -2600,21 +2022,22 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 				translateY: r + n
 			})), l({ factor: r }), e.preventDefault();
 		}
-		e.key === " " && !e.repeat && h().hover && l({
+		e.key === " " && !e.repeat && g().hover && l({
 			factor: 3,
-			to: h()
+			to: g()
 		});
-	}), H(document, "keyup", (e) => {
-		["INPUT", "TEXTAREA"].includes(e.target.tagName) || e.key === " " && h().hover && l({
+	}), f(document, "keyup", (e) => {
+		["INPUT", "TEXTAREA"].includes(e.target.tagName) || e.key === " " && g().hover && l({
 			factor: 1 / 3,
-			to: h()
+			to: g()
 		});
-	}), /* @__PURE__ */ (0, S.jsx)(qt, {
+	}), /* @__PURE__ */ a(q, {
+		fill: !0,
 		onPan: ({ deltaX: e, deltaY: t }) => {
 			d(({ translateX: n, translateY: r }) => ({
 				translateX: n + e,
 				translateY: r + t
-			})), clearTimeout(m.current.pan), m.current.pan = setTimeout(() => {
+			})), clearTimeout(h.current.pan), h.current.pan = setTimeout(() => {
 				s({ panning: !1 });
 			}, 200), s({ panning: !0 });
 		},
@@ -2625,23 +2048,26 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 					y: t
 				},
 				factor: 1 - n / 500
-			}), clearTimeout(m.current.zoom), m.current.zoom = setTimeout(() => {
+			}), clearTimeout(h.current.zoom), h.current.zoom = setTimeout(() => {
 				s({ zooming: !1 });
 			}, 200), s({ zooming: !0 });
 		},
 		mainAction: n ? "pan" : "drag",
-		children: /* @__PURE__ */ (0, S.jsx)("div", {
+		children: /* @__PURE__ */ a("div", {
 			style: {
-				display: "inline-block",
-				transformOrigin: "top left",
-				transform: `translate(${i.translateX}px, ${i.translateY}px) rotate(${i.rotate}deg) scale(${i.scale})`
+				position: "absolute",
+				top: 0,
+				left: 0,
+				display: "block",
+				width: "100%",
+				height: "100%"
 			},
-			className: `board-pane${i.scale < .5 ? " board-pane__far" : ""}`,
+			className: "board",
 			ref: r,
 			children: t
 		})
 	});
-}, wn = Y({
+}, Xt = W({
 	position: "absolute",
 	top: 0,
 	left: 0,
@@ -2649,8 +2075,8 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 	backgroundColor: "hsla(0, 40%, 50%, 0%)",
 	border: "2px dashed hsl(20, 55%, 40%)",
 	pointerEvents: "none"
-}), Tn = () => {
-	let [t, n, r, i, a, { translateX: o, translateY: s, scale: c }] = V((e) => [
+}), Zt = () => {
+	let [t, n, r, i, o, { translateX: s, translateY: c, scale: l }] = F((e) => [
 		e.selection,
 		e.getSelection,
 		e.selectionBox,
@@ -2661,18 +2087,18 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 			translateY: e.boardState.translateY,
 			scale: e.boardState.scale
 		}
-	]), [l] = B((e) => [e.items]), u = e.useCallback(() => {
-		let e = n(), { boardWrapperRect: t, uid: r } = a();
+	]), [d] = P((e) => [e.items]), f = e.useCallback(() => {
+		let e = n(), { boardWrapperRect: t, uid: r } = o();
 		if (e.length === 0) {
 			i(null);
 			return;
 		}
-		let o = me(e, r);
-		if (!o) {
+		let a = se(e, r);
+		if (!a) {
 			i(null);
 			return;
 		}
-		let { left: s, top: c, width: l, height: u } = o, d = {
+		let { left: s, top: c, width: l, height: u } = a, d = {
 			left: s - t.left,
 			top: c - t.top,
 			height: u,
@@ -2680,44 +2106,44 @@ var zt = /* @__PURE__ */ h((/* @__PURE__ */ p(((e, t) => {
 		};
 		i(d);
 	}, [
-		a,
+		o,
 		n,
 		i
-	]), d = Ve(u, [u], 300);
+	]), p = u(f, [f], 300);
 	return e.useEffect(() => {
-		u(), d();
+		f(), p();
 	}, [
 		t,
-		l,
-		o,
+		d,
 		s,
 		c,
-		u,
-		d
-	]), !r || t.length < 2 ? null : /* @__PURE__ */ (0, S.jsx)("div", {
+		l,
+		f,
+		p
+	]), !r || t.length < 2 ? null : /* @__PURE__ */ a("div", {
 		style: {
 			transform: `translate(${r.left}px, ${r.top}px)`,
 			height: `${r.height}px`,
 			width: `${r.width}px`
 		},
-		className: `selection ${wn}`
+		className: `selection ${Xt}`
 	});
-}, En = () => {
-	let [e] = V((e) => [e.boardState.movingItems]);
-	return e ? null : /* @__PURE__ */ (0, S.jsx)(Tn, {});
+}, Qt = () => {
+	let [e] = F((e) => [e.boardState.movingItems]);
+	return e ? null : /* @__PURE__ */ a(Zt, {});
 };
 //#endregion
 //#region node_modules/color2k/dist/index.exports.import.es.mjs
-function Dn(e, t, n) {
+function $t(e, t, n) {
 	return Math.min(Math.max(e, n), t);
 }
-var On = class extends Error {
+var Z = class extends Error {
 	constructor(e) {
 		super(`Failed to parse color: "${e}"`);
 	}
 };
-function kn(e) {
-	if (typeof e != "string") throw new On(e);
+function en(e) {
+	if (typeof e != "string") throw new Z(e);
 	if (e.trim().toLowerCase() === "transparent") return [
 		0,
 		0,
@@ -2725,52 +2151,52 @@ function kn(e) {
 		0
 	];
 	let t = e.trim();
-	t = Rn.test(e) ? Nn(e) : e;
-	let n = Pn.exec(t);
+	t = un.test(e) ? an(e) : e;
+	let n = on.exec(t);
 	if (n) {
 		let e = Array.from(n).slice(1);
-		return [...e.slice(0, 3).map((e) => parseInt($(e, 2), 16)), parseInt($(e[3] || "f", 2), 16) / 255];
+		return [...e.slice(0, 3).map((e) => parseInt(Q(e, 2), 16)), parseInt(Q(e[3] || "f", 2), 16) / 255];
 	}
-	let r = Fn.exec(t);
+	let r = sn.exec(t);
 	if (r) {
 		let e = Array.from(r).slice(1);
 		return [...e.slice(0, 3).map((e) => parseInt(e, 16)), parseInt(e[3] || "ff", 16) / 255];
 	}
-	let i = In.exec(t);
+	let i = cn.exec(t);
 	if (i) {
 		let e = Array.from(i).slice(1);
 		return [...e.slice(0, 3).map((e) => parseInt(e, 10)), parseFloat(e[3] || "1")];
 	}
-	let a = Ln.exec(t);
+	let a = ln.exec(t);
 	if (a) {
 		let [t, n, r, i] = Array.from(a).slice(1).map(parseFloat);
-		if (Dn(0, 100, n) !== n || Dn(0, 100, r) !== r) throw new On(e);
-		return [...Bn(t, n, r), Number.isNaN(i) ? 1 : i];
+		if ($t(0, 100, n) !== n || $t(0, 100, r) !== r) throw new Z(e);
+		return [...fn(t, n, r), Number.isNaN(i) ? 1 : i];
 	}
-	throw new On(e);
+	throw new Z(e);
 }
-function An(e) {
+function tn(e) {
 	let t = 5381, n = e.length;
 	for (; n;) t = t * 33 ^ e.charCodeAt(--n);
 	return (t >>> 0) % 2341;
 }
-var jn = (e) => parseInt(e.replace(/_/g, ""), 36), Mn = "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) => {
-	let n = jn(t.substring(0, 3)), r = jn(t.substring(3)).toString(16), i = "";
+var nn = (e) => parseInt(e.replace(/_/g, ""), 36), rn = "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) => {
+	let n = nn(t.substring(0, 3)), r = nn(t.substring(3)).toString(16), i = "";
 	for (let e = 0; e < 6 - r.length; e++) i += "0";
 	return e[n] = `${i}${r}`, e;
 }, {});
-function Nn(e) {
-	let t = Mn[An(e.toLowerCase().trim())];
-	if (!t) throw new On(e);
+function an(e) {
+	let t = rn[tn(e.toLowerCase().trim())];
+	if (!t) throw new Z(e);
 	return `#${t}`;
 }
-var $ = (e, t) => Array.from(Array(t)).map(() => e).join(""), Pn = RegExp(`^#${$("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), Fn = RegExp(`^#${$("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), In = RegExp(`^rgba?\\(\\s*(\\d+)\\s*${$(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), Ln = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, Rn = /^[a-z]+$/i, zn = (e) => Math.round(e * 255), Bn = (e, t, n) => {
+var Q = (e, t) => Array.from(Array(t)).map(() => e).join(""), on = RegExp(`^#${Q("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), sn = RegExp(`^#${Q("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), cn = RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Q(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), ln = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, un = /^[a-z]+$/i, dn = (e) => Math.round(e * 255), fn = (e, t, n) => {
 	let r = n / 100;
 	if (t === 0) return [
 		r,
 		r,
 		r
-	].map(zn);
+	].map(dn);
 	let i = (e % 360 + 360) % 360 / 60, a = (1 - Math.abs(2 * r - 1)) * (t / 100), o = a * (1 - Math.abs(i % 2 - 1)), s = 0, c = 0, l = 0;
 	i >= 0 && i < 1 ? (s = a, c = o) : i >= 1 && i < 2 ? (s = o, c = a) : i >= 2 && i < 3 ? (c = a, l = o) : i >= 3 && i < 4 ? (c = o, l = a) : i >= 4 && i < 5 ? (s = o, l = a) : i >= 5 && i < 6 && (s = a, l = o);
 	let u = r - a / 2;
@@ -2778,29 +2204,29 @@ var $ = (e, t) => Array.from(Array(t)).map(() => e).join(""), Pn = RegExp(`^#${$
 		s + u,
 		c + u,
 		l + u
-	].map(zn);
+	].map(dn);
 };
-function Vn(e) {
+function pn(e) {
 	if (e === "transparent") return 0;
 	function t(e) {
 		let t = e / 255;
 		return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
 	}
-	let [n, r, i] = kn(e);
+	let [n, r, i] = en(e);
 	return .2126 * t(n) + .7152 * t(r) + .0722 * t(i);
 }
-function Hn(e) {
-	return Vn(e) > .179;
+function mn(e) {
+	return pn(e) > .179;
 }
 //#endregion
 //#region src/lib/board/Cursors/Cursor.jsx
-var Un = Y({
+var hn = W({
 	display: "flex",
 	flexDirection: "row",
 	alignItems: "center",
 	zIndex: 210,
 	pointerEvents: "none"
-}), Wn = Y({
+}), gn = W({
 	fontWeight: "bold",
 	padding: "0 0.5em",
 	borderRadius: "2px",
@@ -2811,20 +2237,20 @@ var Un = Y({
 	marginTop: "1.7em",
 	whitespace: "nowrap",
 	pointerEvents: "none"
-}), Gn = e.memo(({ color: e = "#666", size: t = 40, text: n }) => {
-	let r = Hn(e) ? "#222" : "#EEE";
-	return /* @__PURE__ */ (0, S.jsxs)("div", {
-		className: Un,
-		children: [/* @__PURE__ */ (0, S.jsxs)("svg", {
+}), _n = e.memo(({ color: e = "#666", size: t = 40, text: n }) => {
+	let r = mn(e) ? "#222" : "#EEE";
+	return /* @__PURE__ */ o("div", {
+		className: hn,
+		children: [/* @__PURE__ */ o("svg", {
 			version: "1.1",
 			xmlns: "http://www.w3.org/2000/svg",
 			viewBox: "1064.7701 445.5539 419.8101 717.0565",
 			width: t,
 			height: t,
-			children: [/* @__PURE__ */ (0, S.jsx)("path", {
+			children: [/* @__PURE__ */ a("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: r }
-			}), /* @__PURE__ */ (0, S.jsx)("path", {
+			}), /* @__PURE__ */ a("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",
@@ -2832,125 +2258,310 @@ var Un = Y({
 					strokeWidth: 20
 				}
 			})]
-		}), /* @__PURE__ */ (0, S.jsx)("div", {
+		}), /* @__PURE__ */ a("div", {
 			style: {
 				color: r,
 				backgroundColor: e
 			},
-			className: Wn,
+			className: gn,
 			children: n
 		})]
 	});
-}), Kn = Y({
+}), vn = W({
 	top: 0,
 	left: 0,
 	zIndex: 210,
 	position: "fixed",
 	pointerEvents: "none"
-}), qn = ({ pos: e, ...t }) => /* @__PURE__ */ (0, S.jsx)("div", {
-	className: Kn,
+}), yn = ({ pos: e, ...t }) => /* @__PURE__ */ a("div", {
+	className: vn,
 	style: { transform: `translate(${e.x - 6}px, ${e.y - 15}px)` },
-	children: /* @__PURE__ */ (0, S.jsx)(Gn, { ...t })
-}), Jn = ({ children: e }) => {
-	let [t] = V((e) => [e.getConfiguration, e.boardState.scale]), { fromWrapperToBoard: n, fromBoardToWrapper: r } = U(), [i, a, o, s] = K((e) => [
+	children: /* @__PURE__ */ a(_n, { ...t })
+}), bn = ({ children: e }) => {
+	let [t] = F((e) => [e.getConfiguration, e.boardState.scale]), { fromWrapperToBoard: n, fromBoardToWrapper: r } = L(), [i, s, c, l] = V((e) => [
 		e.getUser(),
 		e.getLocalUsers(),
 		e.cursors,
 		e.users
-	]), [c, l] = K((e) => [e.moveCursor, e.removeCursor]), { boardWrapperRect: u } = t(), d = ({ clientX: e, clientY: t }) => {
-		let [r, a] = n(e - u.left, t - u.top);
-		c(i.id, {
+	]), [u, d] = V((e) => [e.moveCursor, e.removeCursor]), { boardWrapperRect: f } = t(), p = ({ clientX: e, clientY: t }) => {
+		let [r, a] = n(e - f.left, t - f.top);
+		u(i.id, {
 			x: r,
 			y: a
 		});
-	}, f = () => {
-		l(i.id);
-	}, p = a.reduce((e, t) => (t.id !== i.id && o[t.id] && (e[t.id] = o[t.id]), e), {});
-	return /* @__PURE__ */ (0, S.jsxs)("div", {
-		onPointerMove: d,
-		onPointerLeave: f,
-		children: [e, Object.entries(p).map(([e, t]) => {
-			let [n, i] = r(t.x, t.y), a = {
-				x: n + u.left,
-				y: i + u.top
+	}, m = () => {
+		d(i.id);
+	}, h = s.reduce((e, t) => (t.id !== i.id && c[t.id] && (e[t.id] = c[t.id]), e), {});
+	return /* @__PURE__ */ o("div", {
+		onPointerMove: p,
+		onPointerLeave: m,
+		children: [e, Object.entries(h).map(([e, t]) => {
+			let [n, i] = r(t.x, t.y), o = {
+				x: n + f.left,
+				y: i + f.top
 			};
-			return de(a, u) ? /* @__PURE__ */ (0, S.jsx)(qn, {
-				pos: a,
-				text: s[e].name,
-				color: s[e].color
+			return j(o, f) ? /* @__PURE__ */ a(yn, {
+				pos: o,
+				text: l[e].name,
+				color: l[e].color
 			}, e) : null;
 		})]
 	});
-}, Yn = ({ children: e }) => e, Xn = {
+}, xn = /[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:px|%)/gi;
+function Sn(e, t = ",") {
+	let n = 0, r = "", i = 0, a = [];
+	for (let [o, s] of e.split("").entries()) if (r) s === r && e[o - 1] !== "\\" && (r = "");
+	else if (s === "\"" || s === "'") r = s;
+	else if (s === "(") n++;
+	else if (s === ")") n--;
+	else if (n === 0 && s === t) {
+		let t = e.slice(i, o).trim();
+		t && a.push(t), i = o + 1;
+	}
+	let o = e.slice(i).trim();
+	return o && a.push(o), a;
+}
+function $(e, t) {
+	return [...e.replace(/\s/g, "").matchAll(xn)].reduce((e, [n]) => e + Number.parseFloat(n) * (n.endsWith("%") ? t / 100 : 1), 0);
+}
+function Cn(e, t, n, r) {
+	let [i, a = "auto"] = Sn(e, " "), o = r?.width, s = r?.height;
+	if (i === "cover" || i === "contain") {
+		if (!o || !s) return [t, n];
+		let e = Math[i === "cover" ? "max" : "min"](t / o, n / s);
+		return [o * e, s * e];
+	}
+	let c = i === "auto" ? null : $(i, t), l = a === "auto" ? null : $(a, n);
+	return c === null && l === null ? [o || t, s || n] : (c === null && (c = o && s ? l * o / s : t), l === null && (l = o && s ? c * s / o : n), [c, l]);
+}
+function wn(e, t, n) {
+	let r = [
+		[0, 0],
+		[e, 0],
+		[0, t],
+		[e, t]
+	].map((e) => k(e, n)), i = r.map(([e]) => e), a = r.map(([, e]) => e), o = Math.floor(Math.min(...i)) - 2, s = Math.floor(Math.min(...a)) - 2, c = Math.ceil(Math.max(...i)) + 2, l = Math.ceil(Math.max(...a)) + 2, [u, d] = A([o, s], n);
+	return {
+		left: o,
+		top: s,
+		width: c - o,
+		height: l - s,
+		x: u,
+		y: d
+	};
+}
+var Tn = (e, t, n) => ((e - t) % n + n) % n;
+function En(e, t, n, r) {
+	let i = wn(e, t, n), a = Number.isFinite(r) && r > 0 ? r : 512 * 2 ** Math.max(0, Math.ceil(Math.log2(1 / n.scale))), o = Math.floor(i.left / a) - 1, s = Math.floor((i.left + i.width) / a) + 1, c = Math.floor(i.top / a) - 1, l = Math.floor((i.top + i.height) / a) + 1, u = o * a, d = c * a, [f, p] = A([u, d], n);
+	return {
+		tiles: Array.from({ length: l - c + 1 }, (e, t) => {
+			let n = c + t;
+			return Array.from({ length: s - o + 1 }, (e, t) => {
+				let r = o + t;
+				return {
+					key: `${a}:${r}:${n}`,
+					left: r * a,
+					top: n * a
+				};
+			});
+		}).flat(),
+		size: a,
+		left: u,
+		top: d,
+		x: f,
+		y: p
+	};
+}
+//#endregion
+//#region src/lib/board/WorldBackground.jsx
+var Dn = {
+	position: "absolute",
+	inset: 0,
+	pointerEvents: "none"
+};
+function On({ style: t, tileSizeOverride: n }) {
+	let [r, i] = F((e) => [e.boardState, e.config.boardWrapperRect]), s = i.width || 1, c = i.height || 1, l = e.useRef(null), [u, d] = e.useState({
+		color: "#333",
+		layers: []
+	}), [f, p] = e.useState({});
+	e.useLayoutEffect(() => {
+		let e = getComputedStyle(l.current), t = (t) => Sn(e[t]), n = t("backgroundSize"), r = t("backgroundPositionX"), i = t("backgroundPositionY"), a = t("backgroundRepeat"), o = t("backgroundBlendMode");
+		d({
+			color: e.backgroundColor,
+			layers: t("backgroundImage").map((e, t) => ({
+				image: e,
+				size: n[t % n.length],
+				x: r[t % r.length],
+				y: i[t % i.length],
+				repeat: a[t % a.length],
+				blend: o[t % o.length]
+			}))
+		});
+	}, [
+		t,
+		s,
+		c
+	]), e.useEffect(() => {
+		let e = !0;
+		return u.layers.forEach(({ image: t }) => {
+			if (!t.startsWith("url(")) return;
+			let n = new Image();
+			n.onload = () => {
+				e && p((e) => ({
+					...e,
+					[t]: {
+						width: n.naturalWidth,
+						height: n.naturalHeight
+					}
+				}));
+			}, n.src = t.slice(4, -1).replace(/^["']|["']$/g, "");
+		}), () => {
+			e = !1;
+		};
+	}, [u.layers]);
+	let m = En(s, c, r, n), h = u.layers.map((e) => {
+		let [t, n] = Cn(e.size, s, c, f[e.image]), r = ["repeat", "repeat-x"].includes(e.repeat) || e.repeat.startsWith("repeat "), i = ["repeat", "repeat-y"].includes(e.repeat) || e.repeat.endsWith(" repeat"), a = $(e.x, s - t), o = $(e.y, c - n);
+		return {
+			...e,
+			size: `${t}px ${n}px`,
+			position: (e, s) => `${r && t ? Tn(a, e, t) : a - e}px ${i && n ? Tn(o, s, n) : o - s}px`
+		};
+	});
+	return /* @__PURE__ */ o("div", {
+		className: "world-background",
+		"aria-hidden": "true",
+		style: {
+			...Dn,
+			overflow: "hidden",
+			backgroundColor: u.color
+		},
+		children: [/* @__PURE__ */ a("div", {
+			ref: l,
+			style: {
+				backgroundColor: "#333",
+				...t,
+				position: "absolute",
+				width: s,
+				height: c,
+				visibility: "hidden",
+				pointerEvents: "none"
+			}
+		}), /* @__PURE__ */ a("div", {
+			className: "world-background-tiles",
+			style: {
+				position: "absolute",
+				transformOrigin: "0 0",
+				transform: `translate(${m.x}px, ${m.y}px) rotate(${r.rotate}deg) scale(${r.scale})`
+			},
+			children: m.tiles.map((e) => /* @__PURE__ */ a("div", {
+				className: "world-background-tile",
+				"data-tile": e.key,
+				style: {
+					position: "absolute",
+					left: e.left - m.left,
+					top: e.top - m.top,
+					width: m.size,
+					height: m.size,
+					backgroundImage: h.map((e) => e.image).join(", "),
+					backgroundSize: h.map((e) => e.size).join(", "),
+					backgroundPosition: h.map((t) => t.position(e.left, e.top)).join(", "),
+					backgroundRepeat: h.map((e) => e.repeat).join(", "),
+					backgroundBlendMode: h.map((e) => e.blend).join(", ")
+				}
+			}, e.key))
+		})]
+	});
+}
+//#endregion
+//#region src/lib/board/Board.jsx
+var kn = ({ children: e }) => e, An = {}, jn = {
 	overflow: "hidden",
 	position: "absolute",
 	inset: 0
-}, Zn = ({ moveFirst: t = !0, style: n, wrapperStyle: r, itemTemplates: i = {}, boardSize: a = Ae, children: o, showResizeHandle: s = !1, Wrapper: c = Yn }) => {
-	let l = e.useRef(null), [u, d] = V((e) => [e.config.uid, e.updateConfiguration]), { updateItemExtent: f } = U(), p = {
+}, Mn = ({ moveFirst: t = !0, style: n, wrapperStyle: r, itemTemplates: i = An, boardSize: s = Ce, backgroundTileSize: c, children: l, showResizeHandle: u = !1, Wrapper: d = kn }) => {
+	let f = e.useRef(null), [m, h] = F((e) => [e.config.uid, e.updateConfiguration]), [g, _, v, y] = F((e) => [
+		e.boardState.translateX,
+		e.boardState.translateY,
+		e.boardState.scale,
+		e.boardState.rotate
+	]), { updateItemExtent: b } = L(), x = {
 		userSelect: "none",
-		width: `${a}px`,
-		height: `${a}px`,
-		backgroundColor: "#333",
-		...n
+		position: "absolute",
+		inset: 0,
+		width: "100%",
+		height: "100%",
+		transformOrigin: "0 0",
+		transform: `translate(${g}px, ${_}px) rotate(${y}deg) scale(${v})`,
+		pointerEvents: "none"
 	};
 	e.useEffect(() => {
 		let e = (e) => {
-			I(e.target, "board") && e.preventDefault();
+			f.current?.contains(e.target) && e.preventDefault();
 		};
 		return document.body.addEventListener("wheel", e, { passive: !1 }), () => {
 			document.body.removeEventListener("wheel", e);
 		};
 	}, []), e.useEffect(() => {
-		d({ boardWrapper: l.current });
-	}, [d]), e.useEffect(() => {
-		u || d({ uid: G() });
-	}, [u, d]), e.useEffect(() => {
-		d({
+		h({ boardWrapper: f.current });
+	}, [h]), e.useEffect(() => {
+		m || h({ uid: B() });
+	}, [m, h]), e.useEffect(() => {
+		h({
 			itemTemplates: i,
-			boardSize: a,
-			showResizeHandle: s
+			boardSize: s,
+			showResizeHandle: u
 		});
 	}, [
 		i,
-		a,
 		s,
-		d
+		u,
+		h
 	]), e.useEffect(() => {
-		d({ boardWrapperRect: l.current.getBoundingClientRect() }), f(), setTimeout(f, 2e3);
-	}, [d, f]), Xe(l, () => {
-		l.current && d({ boardWrapperRect: l.current.getBoundingClientRect() });
+		h({ boardWrapperRect: f.current.getBoundingClientRect() }), b(), setTimeout(b, 2e3);
+	}, [h, b]), p(f, () => {
+		f.current && h({ boardWrapperRect: f.current.getBoundingClientRect() });
 	});
-	let m = Y({
-		...Xn,
+	let S = W({
+		...jn,
 		...r
 	});
-	return /* @__PURE__ */ (0, S.jsxs)("div", {
-		ref: l,
-		id: u,
-		className: `sync-board ${m}`,
-		children: [/* @__PURE__ */ (0, S.jsx)(Jn, { children: /* @__PURE__ */ (0, S.jsx)(vn, {
-			moveFirst: t,
-			children: /* @__PURE__ */ (0, S.jsx)(Cn, {
+	return /* @__PURE__ */ o("div", {
+		ref: f,
+		id: m,
+		className: `sync-board ${S}`,
+		children: [
+			/* @__PURE__ */ a(On, {
+				style: n,
+				tileSizeOverride: c
+			}),
+			/* @__PURE__ */ a(bn, { children: /* @__PURE__ */ a(Wt, {
 				moveFirst: t,
-				children: /* @__PURE__ */ (0, S.jsx)(yn, {
+				children: /* @__PURE__ */ a(Yt, {
 					moveFirst: t,
-					children: /* @__PURE__ */ (0, S.jsx)(c, { children: /* @__PURE__ */ (0, S.jsxs)("div", {
-						onContextMenu: (e) => {
-							e.preventDefault();
-						},
-						style: p,
-						className: "board",
-						children: [/* @__PURE__ */ (0, S.jsx)(hn, {}), o]
-					}) })
+					children: /* @__PURE__ */ a(Gt, {
+						moveFirst: t,
+						children: /* @__PURE__ */ a(d, { children: /* @__PURE__ */ o("div", {
+							onContextMenu: (e) => {
+								e.preventDefault();
+							},
+							style: x,
+							className: `board-pane${v < .5 ? " board-pane__far" : ""}`,
+							children: [/* @__PURE__ */ a(Vt, {}), /* @__PURE__ */ a("div", {
+								style: { pointerEvents: "auto" },
+								children: l
+							})]
+						}) })
+					})
 				})
-			})
-		}) }), /* @__PURE__ */ (0, S.jsx)(En, {})]
+			}) }),
+			/* @__PURE__ */ a(Qt, {})
+		]
 	});
 };
 //#endregion
 //#region src/lib/index.js
-Rt(e.createElement);
+mt(e.createElement);
 //#endregion
-export { Zn as Board, Ot as BoardWrapper, kt as RoomWrapper, st as useAvailableActions, _t as useBoardConfig, U as useBoardPosition, vt as useBoardState, ke as useDebouncedItems, Re as useGetSelectedItems, W as useItemActions, rt as useItemInteraction, Oe as useItems, Et as useMessage, Le as useSelectedItems, ct as useSelectionBox, yt as useSessionInfo, gt as useUsers, E as useWire };
+export { Mn as Board, it as BoardWrapper, at as RoomWrapper, Le as useAvailableActions, qe as useBoardConfig, L as useBoardPosition, Je as useBoardState, Se as useDebouncedItems, je as useGetSelectedItems, z as useItemActions, R as useItemInteraction, xe as useItems, nt as useMessage, Ae as useSelectedItems, Re as useSelectionBox, Ye as useSessionInfo, Ke as useUsers, D as useWire };
 
 //# sourceMappingURL=react-sync-board.js.map