react-sync-board 1.3.1 → 1.4.1

package/dist/react-sync-board.js

@@ -14,12 +14,19 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 }, 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)), 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 {
+}) : n, e)), C = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", w = (e = 21) => {
+	let t = "", n = crypto.getRandomValues(new Uint8Array(e |= 0));
+	for (; e--;) t += C[n[e] & 63];
+	return t;
+}, ee = 128, T = (e) => typeof e == "string" && e.length > 0 && e.length <= ee && !/[\u0000-\u001f\u007f]/u.test(e), E = (e, t) => {
+	if (!T(e)) throw Error(`Invalid ${t}`);
+}, D = 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`);
-		}], this._left = !1, this.registeredRPC = {}, this._socket.on(`${this.room}._call`, async ({ callId: t, name: n, params: r }) => {
+		}], this._left = !1, this.registeredRPC = Object.create(null), this._socket.on(`${this.room}._call`, async ({ callId: t, name: n, params: r }) => {
 			try {
+				if (!Object.hasOwn(this.registeredRPC, n)) throw Error(`Function ${n} is not registered`);
 				let i = await this.registeredRPC[n](r);
 				e.emit(`${this.room}._result.${t}`, { ok: i || null });
 			} catch (n) {
@@ -28,10 +35,10 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		});
 	}
 	async _callServerRPC(e, t) {
-		let n = C();
+		let n = w();
 		return new Promise((r, i) => {
 			this._socket.once(`${this.room}._result.${n}`, (e) => {
-				e.hasOwnProperty("ok") ? r(e.ok) : i(e.err);
+				Object.hasOwn(e, "ok") ? r(e.ok) : i(e.err);
 			}), this._socket.emit(`${this.room}._call`, {
 				callId: n,
 				name: e,
@@ -45,13 +52,14 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		}), this._socket.emit(`${this.room}.leave`);
 	}
 	publish(e, t, n = !1) {
-		this._socket.emit(`${this.room}.publish`, {
+		E(e, "event name"), this._socket.emit(`${this.room}.publish`, {
 			name: e,
 			params: t,
 			self: n
 		});
 	}
 	subscribe(e, t) {
+		if (E(e, "event name"), typeof t != "function") throw TypeError("Invalid callback");
 		this._socket.on(`${this.room}.${e}`, t);
 		let n = () => {
 			this._socket.off(`${this.room}.${e}`, t);
@@ -59,6 +67,13 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		return this.toUnregister.push(n), n;
 	}
 	async register(e, t, { invoke: n = "single" } = {}) {
+		if (E(e, "RPC name"), typeof t != "function") throw TypeError("Invalid callback");
+		if (![
+			"single",
+			"first",
+			"last",
+			"random"
+		].includes(n)) throw Error("Invalid invoke mode");
 		this.registeredRPC[e] = t, await this._callServerRPC("register", {
 			name: e,
 			invoke: n
@@ -74,8 +89,9 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			params: t
 		});
 	}
-}, T = ({ socket: e, room: t, onJoined: n = () => {}, onMaster: r = () => {}, userId: i = null }) => {
-	let a = new w(e, t, i);
+}, te = ({ socket: e, room: t, onJoined: n = () => {}, onMaster: r = () => {}, userId: i = null }) => {
+	E(t, "room name"), i != null && E(i, "user id");
+	let a = new D(e, t, i);
 	return new Promise((o) => {
 		let s = !0;
 		e.on(`${t}.isMaster`, () => {
@@ -92,7 +108,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			userId: i
 		});
 	});
-}, E = e.createContext(), ee = () => /* @__PURE__ */ a("div", {
+}, O = e.createContext(), ne = () => /* @__PURE__ */ a("div", {
 	style: {
 		position: "absolute",
 		top: "0",
@@ -103,8 +119,8 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		alignItems: "center"
 	},
 	children: /* @__PURE__ */ a("h2", { children: "🌀 Loading..." })
-}), D = ({ socket: t, room: n, channel: i = "default", LoadingComponent: o = ee, 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(E), _ = e.useRef(!1);
+}), re = ({ socket: t, room: n, channel: i = "default", LoadingComponent: o = ne, 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(O), _ = e.useRef(!1);
 	return e.useEffect(() => (h.current = !0, () => {
 		h.current = !1;
 	}), []), e.useEffect(() => {
@@ -115,7 +131,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		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}`), _.current || (_.current = !0, T({
+	}, [i, t]), e.useEffect(() => t ? (t.connected || t.connect(), console.log(`Try to connect to wire ${n} on channel ${i}`), _.current || (_.current = !0, te({
 		socket: t,
 		room: n,
 		onMaster: () => {
@@ -130,7 +146,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		i,
 		n,
 		t
-	]), !c || !f ? /* @__PURE__ */ a(o, {}) : /* @__PURE__ */ a(E.Provider, {
+	]), !c || !f ? /* @__PURE__ */ a(o, {}) : /* @__PURE__ */ a(O.Provider, {
 		value: {
 			...g,
 			[i]: {
@@ -142,33 +158,22 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		},
 		children: s
 	});
-}, O = (e = "default") => (r(E) || {})[e], k = (e, t) => e.classList && e.classList.contains(t), A = (e, t) => k(e, t) ? e : e.parentNode ? A(e.parentNode, t) : !1, j = ([e, t], [n, r]) => {
+}, k = (e = "default") => (r(O) || {})[e], A = (e, t) => e.classList && e.classList.contains(t), j = (e, t) => A(e, t) ? e : e.parentNode ? j(e.parentNode, t) : !1, ie = ([e, t], [n, r]) => {
 	let i = Math.abs(e - n), a = Math.abs(t - r);
 	return Math.hypot(i, a);
-}, te = (e, t, n) => {
+}, ae = (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)];
-}, ne = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => te((e - i) / n, (t - a) / n, -r), M = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => {
-	let [o, s] = te(e, t, r);
+}, oe = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => ae((e - i) / n, (t - a) / n, -r), M = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => {
+	let [o, s] = ae(e, t, r);
 	return [o * n + i, s * n + a];
-}, re = (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;
-}, N = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, ie = (e, t) => Array.from(e.querySelectorAll(".corner")).every((e) => {
+}, N = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, se = (e, t) => Array.from(e.querySelectorAll(".corner")).every((e) => {
 	let { top: n, left: r } = e.getBoundingClientRect();
 	return N({
 		x: r,
 		y: n
 	}, t);
-}), ae = (e, t) => ie(e, t.getBoundingClientRect()), P = (e, t) => {
+}), ce = (e, t) => se(e, t.getBoundingClientRect()), P = (e, t) => {
 	try {
 		return document.getElementById(`${e}__${t}`);
 	} catch {
@@ -178,7 +183,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 }, F = (e) => {
 	let t = e?.dataset?.id;
 	return t || console.error("getIdFromElem call fails", e, JSON.stringify(e?.dataset), e?.dataset?.id), t;
-}, oe = (e, t) => {
+}, le = (e, t) => {
 	let n = e.reduce((e, n) => {
 		let r = P(t, n);
 		if (!r) return e || null;
@@ -191,10 +196,10 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		}, 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);
-}, se = (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, ...se(e, e[t].linkedItems, n)] : [])).flat()), ce = (e, t, n) => {
-	let r = new Set(se(e, n));
+}, ue = (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, ...ue(e, e[t].linkedItems, n)] : [])).flat()), de = (e, t, n) => {
+	let r = new Set(ue(e, n));
 	return t.filter((e) => r.has(e));
-}, le = ({ x: e, y: t, width: n, height: r }, { type: i = "grid", size: a = 1, offset: o = {
+}, fe = ({ x: e, y: t, width: n, height: r }, { type: i = "grid", size: a = 1, offset: o = {
 	x: 0,
 	y: 0
 } }) => {
@@ -215,7 +220,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		x: l + o.x - n / 2,
 		y: u + o.y - r / 2
 	};
-}, ue = /* @__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("."), de = () => ue[Math.floor(Math.random() * ue.length)], fe = ({ wire: e, storeName: t, noSync: n = [], defaultValue: r }, i) => (a, o, s) => {
+}, pe = /* @__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("."), me = () => pe[Math.floor(Math.random() * pe.length)], I = ({ wire: e, storeName: t, noSync: n = [], defaultValue: r }, i) => (a, o, s) => {
 	a({ ready: !1 });
 	let c = [];
 	(async () => {
@@ -239,7 +244,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	return d.unsub = () => {
 		c.forEach((e) => e());
 	}, d;
-}, pe = e.createContext(), me = (e, t) => ({
+}, he = e.createContext(), ge = (e, t) => ({
 	items: {},
 	getItems: () => t().items,
 	setItems: (t) => e({ items: t }),
@@ -262,7 +267,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			});
 		}), { items: r };
 	})
-}), he = (e, t) => ({
+}), _e = (e, t) => ({
 	itemIds: [],
 	setItemIds: (t) => e({ itemIds: t }),
 	getItemIds: () => t().itemIds,
@@ -279,7 +284,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		return r[t] = n, { itemIds: r };
 	}),
 	updateManyItemIds: (t) => e((e) => ({ itemIds: e.itemIds.map((e, n) => t[n] === void 0 ? e : t[n]) }))
-}), ge = (e, t) => ({
+}), ve = (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)))
@@ -306,7 +311,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			itemIds: r
 		};
 	})
-}), _e = (e, t) => ({
+}), ye = (e, t) => ({
 	boardConfig: {},
 	getBoardConfig: () => t().boardConfig,
 	setBoardConfig: (t) => e({ boardConfig: t }),
@@ -314,7 +319,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		...e.boardConfig,
 		...t
 	} }))
-}), ve = (e, t) => ({
+}), be = (e, t) => ({
 	session: {},
 	getSessionInfo: () => t().session,
 	setSessionInfo: (t) => e({ session: t }),
@@ -322,34 +327,34 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		...e.session,
 		...t
 	} }))
-}), ye = ({ storeName: t, children: n, defaultValue: r }) => {
-	let { wire: i } = O("room"), [o, c] = e.useState(!1), [l] = e.useState(() => s(fe({
+}), xe = ({ storeName: t, children: n, defaultValue: r }) => {
+	let { wire: i } = k("room"), [o, c] = e.useState(!1), [l] = e.useState(() => s(I({
 		wire: i,
 		storeName: t,
 		defaultValue: r
 	}, (...e) => ({
-		...me(...e),
-		...he(...e),
 		...ge(...e),
 		..._e(...e),
-		...ve(...e)
+		...ve(...e),
+		...ye(...e),
+		...be(...e)
 	}))));
 	return e.useEffect(() => {
 		let e = l.subscribe((t) => {
 			t.ready && (e(), c(!0));
 		});
-	}, [l]), o ? /* @__PURE__ */ a(pe.Provider, {
+	}, [l]), o ? /* @__PURE__ */ a(he.Provider, {
 		value: l,
 		children: n
 	}) : null;
-}, I = (e) => {
-	let t = r(pe);
+}, L = (e) => {
+	let t = r(he);
 	return c(t, e, l);
-}, be = () => {
-	let [t, n] = I((e) => [e.itemIds, e.items]);
+}, Se = () => {
+	let [t, n] = L((e) => [e.itemIds, e.items]);
 	return e.useMemo(() => t.map((e) => n[e]), [t, n]);
-}, xe = () => {
-	let [t, n, r] = I((e) => [
+}, Ce = () => {
+	let [t, n, r] = L((e) => [
 		e.items,
 		e.itemIds,
 		e.getItemList
@@ -364,7 +369,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		n,
 		r
 	]), i;
-}, Se = 5e4, Ce = e.createContext(), we = (e, t) => ({
+}, we = 5e4, Te = e.createContext(), Ee = (e, t) => ({
 	config: {
 		itemTemplates: {},
 		actions: {},
@@ -375,14 +380,14 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			radius: 0
 		},
 		boardWrapperRect: {},
-		boardSize: Se
+		boardSize: we
 	},
 	updateConfiguration: (t) => e((e) => ({ config: {
 		...e.config,
 		...t
 	} })),
 	getConfiguration: () => t().config
-}), Te = (e, t) => ({
+}), De = (e, t) => ({
 	boardState: {
 		movingItems: !1,
 		selecting: !1,
@@ -398,7 +403,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		...t
 	} })),
 	getBoardState: () => t().boardState
-}), Ee = (e, t) => ({
+}), Oe = (e, t) => ({
 	interactions: {},
 	getInteractions: () => t().interactions,
 	register: (t, n) => e((e) => {
@@ -420,7 +425,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			setTimeout(() => e(n), 0);
 		});
 	}
-}), De = (e, t) => ({
+}), ke = (e, t) => ({
 	selection: [],
 	setSelection: (t) => e((e) => JSON.stringify(e.selection) === JSON.stringify(t) ? {} : { selection: t }),
 	getSelection: () => t().selection,
@@ -436,76 +441,34 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		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 } : {};
 	})
-}), Oe = ({ children: t }) => {
+}), Ae = ({ children: t }) => {
 	let [n] = e.useState(() => s((...e) => ({
-		...we(...e),
-		...Te(...e),
 		...Ee(...e),
-		...De(...e)
+		...De(...e),
+		...Oe(...e),
+		...ke(...e)
 	})));
-	return /* @__PURE__ */ a(Ce.Provider, {
+	return /* @__PURE__ */ a(Te.Provider, {
 		value: n,
 		children: t
 	});
-}, L = (e) => {
-	let t = r(Ce);
+}, R = (e) => {
+	let t = r(Te);
 	return c(t, e, l);
-}, ke = () => {
-	let [e] = L((e) => [e.selection]);
+}, je = () => {
+	let [e] = R((e) => [e.selection]);
 	return e;
-}, Ae = () => {
-	let [e] = L((e) => [e.getSelection]);
+}, Me = () => {
+	let [e] = R((e) => [e.getSelection]);
 	return e;
-}, je = 100, Me = 1e3, Ne = .8, R = !1, Pe = ({ x: e, y: t, scale: n, rotate: r, itemExtent: i, boardWrapperRect: a, boardSize: o }) => {
-	let [s, c] = [e, t], l = ne([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 = j(l, [u.x, u.y]), p = Math.min(a.width, a.height), m = i.radius + p / 2 / n - je / n;
-	if (f > m) {
-		let e = re({
-			x: l[0],
-			y: l[1]
-		}, u, u, m - 1 / n)[0], [t, i] = M([-e.x, -e.y], {
-			translateX: a.width / 2,
-			translateY: a.height / 2,
-			scale: n,
-			rotate: r
-		});
-		s = t, c = i;
-	}
-	let h = j(l, [d.x, d.y]), g = o / 2 - j([0, 0], [a.width, a.height]) / n;
-	if (h > g) {
-		let e = re({
-			x: l[0],
-			y: l[1]
-		}, d, d, g - 1 / n)[0];
-		if (e) {
-			let [t, i] = M([-e.x, -e.y], {
-				translateX: a.width / 2,
-				translateY: a.height / 2,
-				scale: n,
-				rotate: r
-			});
-			s = t, c = i;
-		}
-	}
-	return [s, c];
-}, z = () => {
-	let [t, n, r, i, a] = L((e) => [
+}, Ne = 1e3, Pe = .8, z = !1, B = () => {
+	let [t, n, r, i, a] = R((e) => [
 		e.getBoardState,
 		e.updateBoardState,
 		e.config.itemExtent,
 		e.getConfiguration,
 		e.updateConfiguration
-	]), o = e.useRef([.15, 5]), [s] = I((e) => [e.getItemList]), c = e.useCallback(() => {
+	]), o = e.useRef([.15, 5]), [s] = L((e) => [e.getItemList]), c = e.useCallback(() => {
 		let { translateX: e, translateY: n, scale: r, rotate: i } = t();
 		return {
 			translateX: e,
@@ -513,39 +476,30 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			scale: r,
 			rotate: i
 		};
-	}, [t]), l = e.useCallback((e, n) => ne([e, n], t()), [t]), d = e.useCallback((e, n) => M([e, n], t()), [t]), f = e.useCallback((e, n) => {
+	}, [t]), l = e.useCallback((e, n) => oe([e, n], t()), [t]), d = e.useCallback((e, n) => M([e, n], t()), [t]), f = e.useCallback((e, n) => {
 		let { scale: r, rotate: i } = t();
-		return ne([e, n], {
+		return oe([e, n], {
 			translateX: 0,
 			translateY: 0,
 			rotate: i,
 			scale: r
 		});
 	}, [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 { itemExtent: r, boardWrapperRect: a, boardSize: o } = i(), s = t(), { translateX: c, translateY: l, scale: u, rotate: d } = {
-			...s,
-			...e(s)
+		let r = t(), { translateX: i, translateY: a, scale: o, rotate: s } = {
+			...r,
+			...e(r)
 		};
-		R && console.log("New expected values: ", c, l, u, d);
-		let f = p(u), [m, h] = [c, l];
-		(c !== s.translateX || l !== s.translateY) && ([m, h] = Pe({
-			x: c,
-			y: l,
-			scale: f,
-			rotate: d,
-			itemExtent: r,
-			boardWrapperRect: a,
-			boardSize: o
-		})), R && console.log("New fixed values: ", m, h, f, d), n({
-			translateX: isNaN(m) ? 0 : m,
-			translateY: isNaN(h) ? 0 : h,
-			scale: isNaN(f) ? p(1) : f,
-			rotate: isNaN(d) ? 0 : d
+		z && console.log("New expected values: ", i, a, o, s);
+		let c = p(o), l = i, u = a;
+		z && 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
 		});
 	}, [
 		p,
 		t,
-		i,
 		n
 	]), h = e.useCallback((e) => {
 		let t = (t) => ({
@@ -578,21 +532,21 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		i,
 		m
 	]), _ = e.useCallback(({ x: e, y: n, radius: r }) => {
-		let { rotate: a } = t(), { boardWrapperRect: o, boardSize: s } = i(), [c, l, u] = [
+		let { rotate: a } = t(), { boardWrapperRect: o } = i(), [s, c, l] = [
 			e || 0,
 			n || 0,
 			r || 2e3
-		], d = o.width / (u * 2), f = o.height / (u * 2), h = p(Math.min(d, f) * Ne), [g, _] = M([-s / 2 - c, -s / 2 - l], {
+		], u = o.width / (l * 2), d = o.height / (l * 2), f = p(Math.min(u, d) * Pe), [h, g] = M([-s, -c], {
 			translateX: o.width / 2,
 			translateY: o.height / 2,
-			scale: h,
+			scale: f,
 			rotate: a
 		});
 		m((e) => ({
 			...e,
-			translateX: g,
-			translateY: _,
-			scale: h
+			translateX: h,
+			translateY: g,
+			scale: f
 		}));
 	}, [
 		p,
@@ -600,25 +554,34 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		i,
 		m
 	]), v = e.useCallback(() => {
-		let { boardWrapperRect: e, boardSize: t } = i(), [n, r] = l(e.width / 2, e.height / 2);
+		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]), y = e.useCallback(() => {
-		let e = s(), { boardSize: t, uid: n } = i(), r = e.reduce((e, t) => {
-			let r = P(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;
+		let e = s(), { uid: t } = i(), n = e.reduce((e, n) => {
+			let r = P(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: Ne
+			} });
+			return;
+		}
+		let r = {
+			x: (n.right + n.left) / 2,
+			y: (n.bottom + n.top) / 2
 		};
-		o.radius = Math.max(j([o.x, o.y], [r.left, r.top]), Me), a({ itemExtent: o });
+		r.radius = Math.max(ie([r.x, r.y], [n.left, n.top]), Ne), a({ itemExtent: r });
 	}, [
 		i,
 		s,
@@ -637,7 +600,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	]), x = u(() => y(), [y], 200);
 	return e.useEffect(() => {
 		window.debugUpdateExtent = () => y(), window.debugDisplayExtent = () => console.log(i().itemExtent), window.debugSetDebug = () => {
-			R = !0;
+			z = !0;
 		};
 	}, [i, y]), {
 		setDim: m,
@@ -653,8 +616,8 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		fromWrapperToBoard: l,
 		fromBoardToWrapper: d
 	};
-}, B = (t) => {
-	let [n, r, i] = L(({ register: e, unregister: t, callInteractions: n }) => [
+}, V = (t) => {
+	let [n, r, i] = R(({ register: e, unregister: t, callInteractions: n }) => [
 		e,
 		t,
 		n
@@ -671,13 +634,13 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			i(t, e);
 		}, [i, t])
 	};
-}, V = () => {
-	let { call: t } = B("place"), { call: n } = B("delete"), { getCenter: r, updateItemExtent: i } = z(), [a, o, s, c] = L((e) => [
+}, H = () => {
+	let { call: t } = V("place"), { call: n } = V("delete"), { getCenter: r, updateItemExtent: i } = B(), [a, o, s, c] = R((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: _ } = I(({ 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: _ } = L(({ getItems: e, getItemIds: t, setItemIds: n, updateItems: r, moveItems: i, removeItemsById: a, getItemList: o, insertItems: s, setItemList: c }) => ({
 		getItems: e,
 		getItemIds: t,
 		setItemIds: n,
@@ -711,7 +674,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	]), b = e.useCallback((e, t, n = !1) => {
 		v([e], t, n);
 	}, [v]), x = e.useCallback((e, t) => {
-		p(ce(l(), u(), e), t);
+		p(de(l(), u(), e), t);
 	}, [
 		u,
 		l,
@@ -733,7 +696,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 				},
 				...e.grid
 			};
-			return le({
+			return fe({
 				x: e.x,
 				y: e.y,
 				width: i.clientWidth,
@@ -741,7 +704,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			}, a);
 		}, !0);
 	}, [c, v]), w = e.useCallback((e, n) => {
-		let r = ce(l(), u(), e);
+		let r = de(l(), u(), e);
 		S(r), v(r, { moving: !1 }, !0), C(r, n), t(e), i();
 	}, [
 		v,
@@ -751,16 +714,16 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		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
-	]), ee = e.useCallback((e, t) => {
+	]), E = e.useCallback((e, t) => {
 		let n = l(), r = Object.fromEntries(t.map((t, r) => {
 			let i = n[e[r]];
 			return [t, {
@@ -777,7 +740,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		u,
 		d
 	]), D = e.useCallback((e, t) => {
-		let n = r(), i = e.map((e, t) => !e.x || !e.y ? {
+		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
@@ -789,39 +752,39 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		r,
 		g,
 		w
-	]), O = e.useCallback((e, t) => {
+	]), te = e.useCallback((e, t) => {
 		D([e], t);
-	}, [D]), j = e.useCallback((e) => {
+	}, [D]), O = e.useCallback((e) => {
 		s(e), m(e), n(e);
 	}, [
 		s,
 		m,
 		n
-	]), te = e.useCallback((e) => {
+	]), ne = 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: ee,
-		reverseItemsOrder: E,
+		swapItems: E,
+		reverseItemsOrder: T,
 		setItemList: y,
-		pushItem: O,
+		pushItem: te,
 		pushItems: D,
-		removeItems: j,
+		removeItems: O,
 		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 = A(e, "item");
+			let a = j(e, "item");
 			if (a) {
-				if (k(a, "selected")) return a;
-				if (!i && k(a, "locked") && !k(e, "passthrough")) return r ? a : null;
-				if (k(e, "passthrough")) {
+				if (A(a, "selected")) return a;
+				if (!i && A(a, "locked") && !A(e, "passthrough")) return r ? a : null;
+				if (A(e, "passthrough")) {
 					let e = u(), { uid: r } = c(), o = e.reduce((e, i) => {
 						let a = P(r, i), o = a.getBoundingClientRect();
 						return N({
@@ -831,14 +794,14 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 					}, []);
 					for (let e = 0; e < o.length; e += 1) {
 						let t = o[e];
-						if (t !== a && (i || !k(t, "locked"))) return t;
+						if (t !== a && (i || !A(t, "locked"))) return t;
 					}
 					return null;
 				}
 			}
 			return a;
 		}, [c, u]),
-		getItems: te
+		getItems: ne
 	};
 }, Fe = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	t.exports = function e(t, n) {
@@ -890,7 +853,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	let { actions: n = Ie(e, t) } = e;
 	return n.map((e) => typeof e == "string" ? { name: e } : e);
 }, Re = () => {
-	let [t, r] = I((e) => [e.items, e.getItems]), [i, a, o] = L((e) => [
+	let [t, r] = L((e) => [e.items, e.getItems]), [i, a, o] = R((e) => [
 		e.config.itemTemplates,
 		e.selection,
 		e.getSelection
@@ -924,31 +887,27 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		p
 	], 100), { availableActions: s };
 }, ze = () => {
-	let [e] = L((e) => [e.selectionBox]);
+	let [e] = R((e) => [e.selectionBox]);
 	return e;
-}, Be = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", H = (e = 21) => {
-	let t = "", n = crypto.getRandomValues(new Uint8Array(e |= 0));
-	for (; e--;) t += Be[n[e] & 63];
-	return t;
-}, Ve = e.createContext(), He = (e) => {
+}, Be = e.createContext(), Ve = (e) => {
 	localStorage.setItem("user", JSON.stringify(e));
-}, Ue = () => {
+}, He = () => {
 	if (localStorage.user) {
 		let e = {
 			name: "Player",
-			color: de(),
-			uid: H(),
+			color: me(),
+			uid: w(),
 			...JSON.parse(localStorage.user)
 		};
-		return He(e), e;
+		return Ve(e), e;
 	}
 	let e = {
 		name: "Player",
-		color: de(),
-		uid: H()
+		color: me(),
+		uid: w()
 	};
-	return He(e), e;
-}, We = (e) => (t, n) => ({
+	return Ve(e), e;
+}, Ue = (e) => (t, n) => ({
 	isSpaceMaster: !1,
 	users: {},
 	getUser: () => n().users[e],
@@ -971,7 +930,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			id: r,
 			uid: t.users[r].uid
 		};
-		return a.id === e && He(a), setTimeout(() => n().electSpaceMaster(), 100), { users: {
+		return a.id === e && Ve(a), setTimeout(() => n().electSpaceMaster(), 100), { users: {
 			...t.users,
 			[r]: a
 		} };
@@ -994,7 +953,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			e < i.timestamp && (i.id = t, i.timestamp = e);
 		}), t({ isSpaceMaster: i.id === e });
 	}
-}), Ge = (e) => ({
+}), We = (e) => ({
 	cursors: {},
 	moveCursor: (t, n) => e((e) => ({ cursors: {
 		...e.cursors,
@@ -1004,12 +963,12 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		let n = { ...e.cursors };
 		return delete n[t], { cursors: n };
 	})
-}), Ke = ({ storeName: t, children: n }) => {
-	let { wire: r, isMaster: i } = O("room"), [o, c] = e.useState(null), [l, u] = e.useState(!1), d = e.useRef(!1);
+}), Ge = ({ storeName: t, children: n }) => {
+	let { wire: r, isMaster: i } = k("room"), [o, c] = e.useState(null), [l, u] = e.useState(!1), d = e.useRef(!1);
 	return e.useEffect(() => {
 		let e = !0, n = [];
 		if (!o && !d.current) return d.current = !0, (() => {
-			let n = s(fe({
+			let n = s(I({
 				wire: r,
 				storeName: t,
 				noSync: [
@@ -1019,8 +978,8 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 					"electSpaceMaster"
 				]
 			}, (...e) => ({
-				...We(r.userId)(...e),
-				...Ge(...e)
+				...Ue(r.userId)(...e),
+				...We(...e)
 			}), r, t)), i = n.subscribe((t) => {
 				t.ready && (i(), e && c(n));
 			});
@@ -1034,7 +993,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		r.userId
 	]), e.useEffect(() => {
 		if (o) return o.getState().addUser({
-			...Ue(),
+			...He(),
 			id: r.userId
 		}), u(!0), () => {
 			o.getState().removeUser(r.userId);
@@ -1062,14 +1021,14 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		i,
 		o,
 		r
-	]), l ? /* @__PURE__ */ a(Ve.Provider, {
+	]), l ? /* @__PURE__ */ a(Be.Provider, {
 		value: o,
 		children: n
 	}) : null;
 }, U = (e) => {
-	let t = r(Ve);
+	let t = r(Be);
 	return c(t, e, l);
-}, qe = () => {
+}, Ke = () => {
 	let [t, n, r, i, a] = U((e) => [
 		e.isSpaceMaster,
 		e.getUser(),
@@ -1088,8 +1047,8 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		}, [n, o]),
 		joinSpace: a
 	};
-}, Je = () => {
-	let [t, n, r] = I((e) => [
+}, qe = () => {
+	let [t, n, r] = L((e) => [
 		e.boardConfig,
 		e.getBoardConfig,
 		e.setBoardConfig
@@ -1100,11 +1059,11 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		let i = n(), a = t(i);
 		r(a);
 	}, [n, r])];
-}, Ye = () => {
-	let [e] = L((e) => [e.boardState]);
+}, Je = () => {
+	let [e] = R((e) => [e.boardState]);
 	return e;
-}, Xe = () => {
-	let [e, t, n, r] = I((e) => [
+}, Ye = () => {
+	let [e, t, n, r] = L((e) => [
 		e.getSessionInfo,
 		e.setSessionInfo,
 		e.updateSessionInfo,
@@ -1116,7 +1075,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		sessionInfo: r,
 		updateSessionInfo: n
 	};
-}, Ze = e.createContext(), Qe = ({ 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,
@@ -1124,9 +1083,9 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		color: n
 	},
 	content: r,
-	uid: H(),
+	uid: w(),
 	timestamp: (/* @__PURE__ */ new Date()).toISOString()
-}), $e = (e, t) => ({
+}), Qe = (e, t) => ({
 	messages: [],
 	setMessages: (t) => e({ messages: t.map((e) => ({
 		...e,
@@ -1137,28 +1096,28 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		timestamp: Date.parse(t.timestamp)
 	}] })),
 	sendMessage: (e, n) => {
-		let r = Qe({
+		let r = Ze({
 			user: e,
 			content: n
 		});
 		r && t().addMessage(r);
 	}
-}), et = ({ storeName: t, children: n, defaultValue: r = [] }) => {
-	let { wire: i } = O("room"), [o] = e.useState(() => s(fe({
+}), $e = ({ storeName: t, children: n, defaultValue: r = [] }) => {
+	let { wire: i } = k("room"), [o] = e.useState(() => s(I({
 		wire: i,
 		storeName: t,
 		defaultValue: r,
 		noSync: ["sendMessage"]
-	}, (...e) => ({ ...$e(...e) }))));
-	return /* @__PURE__ */ a(Ze.Provider, {
+	}, (...e) => ({ ...Qe(...e) }))));
+	return /* @__PURE__ */ a(Xe.Provider, {
 		value: o,
 		children: n
 	});
-}, tt = (e) => {
-	let t = r(Ze);
+}, et = (e) => {
+	let t = r(Xe);
 	return c(t, e, l);
-}, nt = () => {}, rt = (t = nt) => {
-	let n = U((e) => e.getUser()), [r, i, a] = tt((e) => [
+}, tt = () => {}, nt = (t = tt) => {
+	let n = U((e) => e.getUser()), [r, i, a] = et((e) => [
 		e.messages,
 		e.setMessages,
 		e.sendMessage
@@ -1172,41 +1131,41 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			a(n, e);
 		}, [n, a])
 	};
-}, it = ({ children: t, session: n }) => {
+}, rt = ({ children: t, session: n }) => {
 	let r = U((e) => e.joinSpace);
 	return e.useEffect(() => (r(n), () => {
 		r(null);
 	}), [r, n]), t;
-}, at = ({ socket: t, room: n, session: r, items: i = [], messages: o = [], LoadingComponent: s, ...c }) => {
-	let [l] = e.useState(n || H()), [u] = e.useState(r || H()), [d] = e.useState(() => ({
+}, it = ({ socket: t, room: n, session: r, items: i = [], messages: o = [], LoadingComponent: s, ...c }) => {
+	let [l] = e.useState(n || w()), [u] = e.useState(r || w()), [d] = e.useState(() => ({
 		itemIds: i.map(({ id: e }) => e),
 		items: Object.fromEntries(i.map((e) => [e.id, e]))
 	}));
-	return O("room") ? /* @__PURE__ */ a(et, {
+	return k("room") ? /* @__PURE__ */ a($e, {
 		storeName: `${u}_messages`,
 		defaultValue: o,
-		children: /* @__PURE__ */ a(Oe, { children: /* @__PURE__ */ a(ye, {
+		children: /* @__PURE__ */ a(Ae, { children: /* @__PURE__ */ a(xe, {
 			storeName: `${u}_item`,
 			defaultValue: d,
-			children: /* @__PURE__ */ a(it, {
+			children: /* @__PURE__ */ a(rt, {
 				...c,
 				session: u
 			})
 		}) })
-	}) : /* @__PURE__ */ a(D, {
+	}) : /* @__PURE__ */ a(re, {
 		room: l,
 		channel: "room",
 		socket: t,
 		LoadingComponent: s,
-		children: /* @__PURE__ */ a(Ke, {
+		children: /* @__PURE__ */ a(Ge, {
 			storeName: `${l}_users`,
-			children: /* @__PURE__ */ a(et, {
+			children: /* @__PURE__ */ a($e, {
 				storeName: `${u}_messages`,
 				defaultValue: o,
-				children: /* @__PURE__ */ a(Oe, { children: /* @__PURE__ */ a(ye, {
+				children: /* @__PURE__ */ a(Ae, { children: /* @__PURE__ */ a(xe, {
 					storeName: `${u}_item`,
 					defaultValue: d,
-					children: /* @__PURE__ */ a(it, {
+					children: /* @__PURE__ */ a(rt, {
 						...c,
 						session: u
 					})
@@ -1214,19 +1173,19 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			})
 		})
 	});
-}, ot = ({ socket: t, room: n, children: r, LoadingComponent: i }) => {
-	let [o] = e.useState(n || H());
-	return /* @__PURE__ */ a(D, {
+}, at = ({ socket: t, room: n, children: r, LoadingComponent: i }) => {
+	let [o] = e.useState(n || w());
+	return /* @__PURE__ */ a(re, {
 		room: o,
 		channel: "room",
 		socket: t,
 		LoadingComponent: i,
-		children: /* @__PURE__ */ a(Ke, {
+		children: /* @__PURE__ */ a(Ge, {
 			storeName: `${o}_users`,
 			children: r
 		})
 	});
-}, st = { data: "" }, ct = (e) => {
+}, ot = { data: "" }, st = (e) => {
 	if (typeof window == "object") {
 		let t = (e ? e.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), {
 			innerHTML: " ",
@@ -1234,23 +1193,23 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		});
 		return t.nonce = window.__nonce__, t.parentNode || (e || document.head).appendChild(t), t.firstChild;
 	}
-	return e || st;
-}, lt = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, ut = /\/\*[^]*?\*\/|  +/g, dt = /\n+/g, W = (e, t) => {
+	return e || ot;
+}, ct = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, lt = /\/\*[^]*?\*\/|  +/g, ut = /\n+/g, W = (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" ? W(o, a) : a + "{" + W(o, a[1] == "k" ? "" : t) + "}" : typeof o == "object" ? r += W(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 += W.p ? W.p(a, o) : a + ":" + o + ";");
 	}
 	return n + (t && i ? t + "{" + i + "}" : i) + r;
-}, G = {}, ft = (e) => {
+}, G = {}, 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;
-}, pt = (e, t, n, r, i) => {
-	let a = ft(e), o = G[a] || (G[a] = ((e) => {
+}, ft = (e, t, n, r, i) => {
+	let a = dt(e), o = G[a] || (G[a] = ((e) => {
 		let t = 0, n = 11;
 		for (; t < e.length;) n = 101 * n + e.charCodeAt(t++) >>> 0;
 		return "go" + n;
@@ -1258,7 +1217,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	if (!G[o]) {
 		let t = a === e ? ((e) => {
 			let t, n, r = [{}];
-			for (; t = lt.exec(e.replace(ut, ""));) t[4] ? r.shift() : t[3] ? (n = t[3].replace(dt, " ").trim(), r.unshift(r[0][n] = r[0][n] || {})) : r[0][t[1]] = t[2].replace(dt, " ").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;
 		G[o] = W(i ? { ["@keyframes " + o]: t } : t, n ? "" : "." + o);
@@ -1267,7 +1226,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	return n && (G.g = G[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);
 	})(G[o], t, r, s), o;
-}, mt = (e, t, n) => e.reduce((e, r, i) => {
+}, 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;
@@ -1277,15 +1236,15 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 }, "");
 function K(e) {
 	let t = this || {}, n = e.call ? e(t.p) : e;
-	return pt(n.unshift ? n.raw ? mt(n, [].slice.call(arguments, 1), t.p) : n.reduce((e, n) => Object.assign(e, n && n.call ? n(t.p) : n), {}) : n, ct(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);
 }
 K.bind({ g: 1 }), K.bind({ k: 1 });
-function ht(e, t, n, r) {
+function mt(e, t, n, r) {
 	W.p = t;
 }
 //#endregion
 //#region src/lib/board/Gesture.jsx
-var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((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") {
@@ -1309,23 +1268,23 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		}
 		return t !== t && n !== n;
 	};
-})))(), 1), _t = () => {
+})))(), 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;
-})(), yt = 800, bt = (e, t) => e[Object.keys(e).map((e) => Number(e)).find((e) => e !== t)], xt = ([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);
-}, q = () => {}, St = (e) => (t) => {
+}, q = () => {}, xt = (e) => (t) => {
 	let { event: n } = t;
 	return n.isPropagationStopped() ? null : e(t);
-}, Ct = (e) => async (...t) => {
+}, St = (e) => async (...t) => {
 	try {
 		await e(...t);
 	} catch (e) {
@@ -1335,18 +1294,18 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	lastPromise = Promise.resolve(!0);
 	add(e, ...t) {
 		return new Promise((n, r) => {
-			this.lastPromise = this.lastPromise.then(() => St(Ct(e))(...t)).then(n).catch(r);
+			this.lastPromise = this.lastPromise.then(() => xt(St(e))(...t)).then(n).catch(r);
 		});
 	}
-}(), Y = ({ children: t, onDrag: n = q, onDragStart: r = q, onDragEnd: i = q, onPan: o = q, onTap: s = q, onLongTap: c = q, onDoubleTap: l = q, onZoom: u, mainAction: d = "drag" }) => {
-	let f = e.useRef(null), p = e.useRef({
+}(), Y = ({ children: t, onDrag: n = q, onDragStart: r = q, onDragEnd: i = q, onPan: o = q, onTap: s = q, onLongTap: c = q, onDoubleTap: l = q, onZoom: u, mainAction: d = "drag", fill: f = !1 }) => {
+	let p = e.useRef(null), m = e.useRef({
 		moving: !1,
 		pointers: {},
 		mainPointer: void 0
-	}), m = (e) => {
+	}), 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 && !_t())) {
-			if (_t() && !s) J.add(o, {
+		if (!(c || s && !gt())) {
+			if (gt() && !s) J.add(o, {
 				deltaX: -2 * t,
 				deltaY: -2 * n,
 				button: 1,
@@ -1360,11 +1319,11 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 				let t = n;
 				switch (a) {
 					case 1:
-						t *= vt;
+						t *= _t;
 						break;
-					case 2: t *= yt;
+					case 2: t *= vt;
 				}
-				_t() && (t *= 2), J.add(u, {
+				gt() && (t *= 2), J.add(u, {
 					scale: t,
 					clientX: r,
 					clientY: i,
@@ -1372,15 +1331,15 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 				});
 			}
 		}
-	}, h = (e) => {
+	}, g = (e) => {
 		let { target: t, button: n, clientX: r, clientY: i, pointerId: a, altKey: o, ctrlKey: s, metaKey: l, isPrimary: u } = e;
-		if (p.current.pointers[a] = {
+		if (m.current.pointers[a] = {
 			clientX: r,
 			clientY: i
-		}, u && (p.current.mainPointer = void 0), p.current.mainPointer !== void 0) {
-			if (p.current.mainPointer !== a) try {
-				let { clientX: e, clientY: t } = bt(p.current.pointers, a), n = (e + r) / 2, o = (t + i) / 2, s = xt([e, t], [r, i]);
-				Object.assign(p.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,
@@ -1392,11 +1351,11 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 					prevDistance: s
 				});
 			} catch (e) {
-				console.log("Error while getting other pointer. Ignoring", e), p.current.mainPointer;
+				console.log("Error while getting other pointer. Ignoring", e), m.current.mainPointer;
 			}
 			return;
 		}
-		p.current.mainPointer = a, Object.assign(p.current, {
+		m.current.mainPointer = a, Object.assign(m.current, {
 			pressed: !0,
 			moving: !1,
 			gestureStart: !1,
@@ -1411,7 +1370,7 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			target: t,
 			timeStart: Date.now(),
 			longTapTimeout: setTimeout(async () => {
-				p.current.noTap = !0, J.add(c, {
+				m.current.noTap = !0, J.add(c, {
 					clientX: r,
 					clientY: i,
 					altKey: o,
@@ -1427,89 +1386,89 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		} catch (e) {
 			console.log("Fail to capture pointer", e);
 		}
-	}, g = (e) => {
-		if (p.current.pressed) {
-			let { pointerId: t, clientX: i, clientY: a, altKey: s, shiftKey: c, ctrlKey: l, metaKey: m, buttons: h } = e;
-			p.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: a
-			}, p.current.moving = !0;
-			let g = Object.keys(p.current.pointers).length === 2, _, v, y = 0;
+			}, m.current.moving = !0;
+			let g = Object.keys(m.current.pointers).length === 2, _, v, y = 0;
 			if (g) {
-				let { clientX: e, clientY: n } = bt(p.current.pointers, t);
-				_ = (e + i) / 2, v = (n + a) / 2, y = xt([e, n], [i, a]);
+				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 || m || h !== 1;
+			let b = c || s || l || f || h !== 1;
 			d !== "drag" && (b = !b);
 			let x = !b, S = b;
 			if (x) {
-				p.current.gestureStart || (f.current.style.cursor = "move", p.current.gestureStart = !0, clearTimeout(p.current.longTapTimeout), J.add(r, {
+				m.current.gestureStart || (p.current.style.cursor = "move", m.current.gestureStart = !0, clearTimeout(m.current.longTapTimeout), J.add(r, {
 					deltaX: 0,
 					deltaY: 0,
-					startX: p.current.startX,
-					startY: p.current.startY,
-					clientX: p.current.startX,
-					clientY: p.current.startY,
+					startX: m.current.startX,
+					startY: m.current.startY,
+					clientX: m.current.startX,
+					clientY: m.current.startY,
 					distanceX: 0,
 					distanceY: 0,
-					button: p.current.currentButton,
+					button: m.current.currentButton,
 					altKey: s,
 					shiftKey: c,
 					ctrlKey: l,
-					metaKey: m,
-					target: p.current.target,
-					event: p.current.pointerDownEvent
+					metaKey: f,
+					target: m.current.target,
+					event: m.current.pointerDownEvent
 				}));
-				let t = _ - p.current.prevX, i = v - p.current.prevY, a = _ - p.current.startX, o = v - p.current.startY;
+				let t = _ - m.current.prevX, i = v - m.current.prevY, a = _ - m.current.startX, o = v - m.current.startY;
 				J.add(n, {
 					deltaX: t,
 					deltaY: i,
-					startX: p.current.startX,
-					startY: p.current.startY,
+					startX: m.current.startX,
+					startY: m.current.startY,
 					clientX: _,
 					clientY: v,
 					distanceX: a,
 					distanceY: o,
-					button: p.current.currentButton,
+					button: m.current.currentButton,
 					altKey: s,
 					shiftKey: c,
 					ctrlKey: l,
-					metaKey: m,
-					target: p.current.target,
+					metaKey: f,
+					target: m.current.target,
 					event: e
 				});
 			}
 			if (S) {
-				p.current.gestureStart || (f.current.style.cursor = "move", p.current.gestureStart = !0, clearTimeout(p.current.longTapTimeout));
-				let t = _ - p.current.prevX, n = v - p.current.prevY, { target: r } = p.current;
+				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 (J.add(o, {
 					deltaX: t,
 					deltaY: n,
-					button: p.current.currentButton,
+					button: m.current.currentButton,
 					altKey: s,
 					shiftKey: c,
 					ctrlKey: l,
-					metaKey: m,
+					metaKey: f,
 					target: r,
 					event: e
-				}), y !== p.current.prevDistance && u) {
-					let t = p.current.prevDistance - y;
+				}), y !== m.current.prevDistance && u) {
+					let t = m.current.prevDistance - y;
 					Math.abs(t) > 0 && (J.add(u, {
 						scale: t * 3,
 						clientX: _,
 						clientY: v,
 						event: e
-					}), p.current.prevDistance = y);
+					}), m.current.prevDistance = y);
 				}
 			}
-			p.current.prevX = _, p.current.prevY = v;
+			m.current.prevX = _, m.current.prevY = v;
 		}
-	}, _ = (e) => {
+	}, v = (e) => {
 		let { clientX: t, clientY: n, altKey: r, shiftKey: a, ctrlKey: o, metaKey: c, target: l, pointerId: u } = e;
-		if (p.current.pointers[u]) {
-			if (delete p.current.pointers[u], p.current.mainPointer !== u) {
-				let { clientX: e, clientY: t } = p.current.pointers[p.current.mainPointer];
-				Object.assign(p.current, {
+		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,
@@ -1517,12 +1476,12 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 				});
 				return;
 			}
-			for (; Object.keys(p.current.pointers).length > 0;) {
-				p.current.mainPointer = Number(Object.keys(p.current.pointers)[0]);
+			for (; Object.keys(m.current.pointers).length > 0;) {
+				m.current.mainPointer = Number(Object.keys(m.current.pointers)[0]);
 				try {
-					p.current.target.setPointerCapture(p.current.mainPointer);
-					let { clientX: e, clientY: t } = p.current.pointers[p.current.mainPointer];
-					Object.assign(p.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,
@@ -1530,28 +1489,28 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 					});
 					return;
 				} catch (e) {
-					console.log("Fails to set pointer capture", e), p.current.mainPointer = void 0, delete p.current.pointers[Object.keys(p.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 (p.current.mainPointer = void 0, p.current.pressed = !1, clearTimeout(p.current.longTapTimeout), p.current.moving) p.current.moving = !1, J.add(i, {
-				deltaX: t - p.current.prevX,
-				deltaY: n - p.current.prevY,
-				startX: p.current.startX,
-				startY: p.current.startY,
+			if (m.current.mainPointer = void 0, m.current.pressed = !1, clearTimeout(m.current.longTapTimeout), m.current.moving) m.current.moving = !1, J.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 - p.current.startX,
-				distanceY: n - p.current.startY,
-				button: p.current.currentButton,
+				distanceX: t - m.current.startX,
+				distanceY: n - m.current.startY,
+				button: m.current.currentButton,
 				altKey: r,
 				shiftKey: a,
 				ctrlKey: o,
 				metaKey: c,
 				event: e
-			}), f.current.style.cursor = "auto";
+			}), p.current.style.cursor = "auto";
 			else {
 				let i = Date.now();
-				p.current.noTap ? p.current.noTap = !1 : p.current.timeStart - i < 300 && J.add(s, {
+				m.current.noTap ? m.current.noTap = !1 : m.current.timeStart - i < 300 && J.add(s, {
 					clientX: t,
 					clientY: n,
 					altKey: r,
@@ -1565,13 +1524,11 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		}
 	};
 	return /* @__PURE__ */ a("div", {
-		onWheel: m,
-		onPointerDown: h,
-		onPointerMove: g,
-		onPointerUp: _,
-		onPointerOut: _,
-		onPointerLeave: _,
-		onPointerCancel: _,
+		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;
 			J.add(l, {
@@ -1585,12 +1542,18 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 				event: e
 			});
 		},
-		style: { touchAction: "none" },
-		ref: f,
+		style: {
+			touchAction: "none",
+			...f ? {
+				position: "absolute",
+				inset: 0
+			} : {}
+		},
+		ref: p,
 		children: t
 	});
-}, wt = ({ onResize: e, ...t }) => {
-	let [n] = L((e) => [e.getBoardState]);
+}, Ct = ({ onResize: e, ...t }) => {
+	let [n] = R((e) => [e.getBoardState]);
 	return /* @__PURE__ */ a(Y, {
 		onDrag: ({ deltaX: t, deltaY: r, event: i }) => {
 			i.stopPropagation();
@@ -1602,13 +1565,13 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		},
 		children: /* @__PURE__ */ a("div", { ...t })
 	});
-}, Tt = K`
+}, wt = K`
   display: inline-block;
   transition: transform 150ms;
   user-select: none;
   padding: 2px;
   box-sizing: border-box;
-`, Et = K`
+`, Tt = K`
   border: 2px dashed #db5034;
   padding: 0px;
   cursor: pointer;
@@ -1616,22 +1579,22 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
   position: absolute;
   width: 0px;
   height: 0px;
-`, Dt = K`
+`, Et = K`
   top: 0;
   left: 0;
-`, Ot = K`
+`, Dt = K`
   top: 0;
   right: 0;
-`, kt = K`
+`, Ot = K`
   bottom: 0;
   left: 0;
-`, At = K`
+`, kt = K`
   bottom: 0;
   right: 0;
-`, jt = K`
+`, At = K`
   top: 50%;
   left: 50%;
-`, Z = K`
+`, jt = K`
   position: absolute;
 
   width: 10px;
@@ -1706,16 +1669,16 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	h: !0,
 	b: !0
 }, Bt = 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] = L((e) => [e.config.uid]), { component: _ = () => null, resizeDirections: v = zt, resize: y = Rt } = p[n], b = e.useCallback((e, n = !1) => t(s, e, n), [t, s]);
+	let h = e.useRef(null), [g] = R((e) => [e.config.uid]), { component: _ = () => null, resizeDirections: v = zt, resize: y = Rt } = p[n], b = e.useCallback((e, n = !1) => t(s, e, n), [t, s]);
 	e.useEffect(() => {
 		h.current.className = d;
 	}, [d]);
 	let x = [
 		"item",
 		s,
-		Tt
+		wt
 	];
-	c && x.push("locked"), f && (x.push("selected"), x.push(Et)), Array.isArray(l) && x.concat(l);
+	c && x.push("locked"), f && (x.push("selected"), x.push(Tt)), 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;
@@ -1730,9 +1693,9 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		});
 	}, w = ({ width: e }) => {
 		C({ width: e });
-	}, T = ({ height: e }) => {
+	}, ee = ({ height: e }) => {
 		C({ height: e });
-	}, E = ({ width: e }) => {
+	}, T = ({ width: e }) => {
 		C({
 			height: e,
 			width: e,
@@ -1761,29 +1724,29 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 						setState: b
 					})
 				}),
+				/* @__PURE__ */ a("div", { className: `corner ${X} ${Et}` }),
 				/* @__PURE__ */ a("div", { className: `corner ${X} ${Dt}` }),
-				/* @__PURE__ */ a("div", { className: `corner ${X} ${Ot}` }),
-				/* @__PURE__ */ a("div", { className: `corner ${X} ${At}` }),
 				/* @__PURE__ */ a("div", { className: `corner ${X} ${kt}` }),
-				/* @__PURE__ */ a("div", { className: `center ${X} ${jt}` }),
+				/* @__PURE__ */ a("div", { className: `corner ${X} ${Ot}` }),
+				/* @__PURE__ */ a("div", { className: `center ${X} ${At}` }),
 				m && /* @__PURE__ */ o(i, { children: [
-					v.b && /* @__PURE__ */ a(wt, {
-						className: `${Z} ${Pt}`,
-						onResize: E
-					}),
-					v.h && /* @__PURE__ */ a(wt, {
-						className: `${Z} ${Nt}`,
+					v.b && /* @__PURE__ */ a(Ct, {
+						className: `${jt} ${Pt}`,
 						onResize: T
 					}),
-					v.w && /* @__PURE__ */ a(wt, {
-						className: `${Z} ${Mt}`,
+					v.h && /* @__PURE__ */ a(Ct, {
+						className: `${jt} ${Nt}`,
+						onResize: ee
+					}),
+					v.w && /* @__PURE__ */ a(Ct, {
+						className: `${jt} ${Mt}`,
 						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, gt.default)(e, i)), Vt = (e) => e, Ht = 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)), Vt = (e) => e, Ht = t(({ state: e = {}, getCurrentUser: t, className: n, ...r }) => {
 	if (!r.itemMap[e.type]) return null;
 	let { stateHook: i = Vt } = 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", {
@@ -1799,27 +1762,26 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		})
 	});
 }), Ut = () => {
-	let { updateItem: e } = V(), [t, n] = I((e) => [e.itemIds, e.items]), [r, i, o, s] = L((e) => [
-		e.config.boardSize,
+	let { updateItem: e } = H(), [t, n] = L((e) => [e.itemIds, e.items]), [r, i, o] = R((e) => [
 		e.config.showResizeHandle,
 		e.config.itemTemplates,
 		e.selection
-	]), [c] = U((e) => [e.getUser]), l = K({
+	]), [s] = U((e) => [e.getUser]), c = K({
 		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__ */ a(Ht, {
 		state: n[t],
 		setState: e,
-		isSelected: s.includes(t),
-		itemMap: o,
-		boardSize: r,
-		getCurrentUser: c,
-		showResizeHandle: i,
-		className: l
+		isSelected: o.includes(t),
+		itemMap: i,
+		getCurrentUser: s,
+		showResizeHandle: r,
+		className: c
 	}, t));
 }, Wt = K({
 	zIndex: 210,
@@ -1832,18 +1794,17 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	let i = r[0];
 	return Array.from(t.getElementsByClassName("item")).filter((t) => {
 		let r = e[F(t)];
-		return !r || !n && r.locked ? !1 : ae(t, i);
+		return !r || !n && r.locked ? !1 : ce(t, i);
 	}).map((e) => F(e));
 }, Kt = ({ children: t, moveFirst: n }) => {
-	let [r, i, s, c, l, u] = L((e) => [
+	let [r, i, s, c, l, u] = R((e) => [
 		e.getSelection,
 		e.clear,
 		e.setSelection,
 		e.select,
 		e.getConfiguration,
-		e.getBoardState,
 		e.updateBoardState
-	]), { findElementUnderPointer: d } = V(), [p] = I((e) => [e.getItems]), [m, h] = e.useState({}), [, g] = e.useTransition(), [_, v] = e.useState(!1), y = e.useRef(null), b = e.useRef({ moving: !1 });
+	]), { findElementUnderPointer: d } = H(), [p] = L((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) => {
@@ -1864,6 +1825,7 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		s,
 		_
 	]), /* @__PURE__ */ a(Y, {
+		fill: !0,
 		onDragStart: async (e) => {
 			await d(e) || (b.current.moving = !0, g(() => {
 				u({ selecting: !0 });
@@ -1884,20 +1846,20 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			}), b.current.moving = !1, h({ moving: !1 }), y.current.style.cursor = "auto");
 		},
 		onTap: (e) => {
-			let { target: t, ctrlKey: n, metaKey: a } = e, o = d(e);
-			if (!o && A(t, "board")) i();
+			let { ctrlKey: t, metaKey: n } = e, a = d(e);
+			if (!a) i();
 			else {
-				let e = F(o);
+				let e = F(a);
 				if (!e) {
 					i();
 					return;
 				}
-				let t = r();
-				o && !t.includes(e) && (n || a ? c([e]) : s([e]));
+				let o = r();
+				a && !o.includes(e) && (t || n ? c([e]) : s([e]));
 			}
 		},
 		onLongTap: ({ target: e }) => {
-			let t = A(e, "item");
+			let t = j(e, "item");
 			if (t) {
 				let e = F(t);
 				s([e]);
@@ -1906,6 +1868,10 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		mainAction: n ? "pan" : "drag",
 		children: /* @__PURE__ */ o("div", {
 			ref: y,
+			style: {
+				position: "absolute",
+				inset: 0
+			},
 			children: [m.moving && /* @__PURE__ */ a("div", {
 				style: {
 					transform: `translate(${m.left}px, ${m.top}px)`,
@@ -1917,13 +1883,13 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		})
 	});
 }, qt = ({ children: t }) => {
-	let { moveItems: n, placeItems: r, findElementUnderPointer: i } = V(), { vectorFromWrapperToBoard: o } = z(), [s, c, l, u, d] = L((e) => [
+	let { moveItems: n, placeItems: r, findElementUnderPointer: i } = H(), { vectorFromWrapperToBoard: o } = B(), [s, c, l, u, d] = R((e) => [
 		e.select,
 		e.setSelection,
 		e.getSelection,
 		e.getBoardState,
 		e.updateBoardState
-	]), [p] = I((e) => [e.getBoardConfig]), m = e.useRef({}), h = e.useRef({ items: [] });
+	]), [p] = L((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 = l();
@@ -1954,6 +1920,7 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			}
 		}
 	}), /* @__PURE__ */ a(Y, {
+		fill: !0,
 		onDragStart: (e) => {
 			let { ctrlKey: t, metaKey: n, event: r } = e, a = i(e);
 			if (a) {
@@ -2006,7 +1973,7 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	,
 	,
 ].keys()].map((e) => `Digit${e + 1}`), Xt = () => {
-	let [t, n] = e.useState({}), [r, i] = L((e) => [e.getBoardState, e.updateBoardState]);
+	let [t, n] = e.useState({}), [r, i] = R((e) => [e.getBoardState, e.updateBoardState]);
 	return f(document, "keydown", (e) => {
 		if (!["INPUT", "TEXTAREA"].includes(e.target.tagName) && Yt.includes(e.code)) {
 			let a = e.code, { translateX: o, translateY: s, scale: c } = r();
@@ -2021,29 +1988,23 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		}
 	}), null;
 }, Zt = ({ children: t, moveFirst: n = !1 }) => {
-	let r = e.useRef(null), [i, o, s, c, l] = L((e) => [
-		{
-			translateX: e.boardState.translateX,
-			translateY: e.boardState.translateY,
-			scale: e.boardState.scale,
-			rotate: e.boardState.rotate
-		},
+	let r = e.useRef(null), [i, o, s, c] = R((e) => [
 		e.config.itemExtent,
 		e.getConfiguration,
 		e.updateBoardState,
 		e.getSelection
-	]), { zoomToCenter: u, zoomToExtent: d, moveBoard: p } = z(), [m, h] = e.useState(!1), g = e.useRef({}), _ = Jt(r);
+	]), { zoomToCenter: l, zoomToExtent: u, moveBoard: d } = B(), [p, m] = e.useState(!1), h = e.useRef({}), g = Jt(r);
 	Xt();
-	let v = e.useCallback(() => {
-		let { itemExtent: e } = s();
-		d(e);
-	}, [s, d]);
+	let _ = e.useCallback(() => {
+		let { itemExtent: e } = o();
+		u(e);
+	}, [o, u]);
 	return e.useEffect(() => {
-		!m && o.radius && (v(), h(!0));
+		!p && i.radius && (_(), m(!0));
 	}, [
-		v,
-		m,
-		o
+		_,
+		p,
+		i
 	]), f(document, "keydown", (e) => {
 		if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return;
 		let t = 0, n = 0, r = 1;
@@ -2066,50 +2027,55 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			case "PageDown": r = .8;
 		}
 		if (t || n || r !== 1) {
-			let i = l();
+			let i = c();
 			if (r === 1 && i.length) return;
-			e.shiftKey && (t *= 5, n *= 5), (e.ctrlKey || e.altKey || e.metaKey) && (t /= 5, n /= 5), p(({ translateX: e, translateY: r }) => ({
+			e.shiftKey && (t *= 5, n *= 5), (e.ctrlKey || e.altKey || e.metaKey) && (t /= 5, n /= 5), d(({ translateX: e, translateY: r }) => ({
 				translateX: e + t,
 				translateY: r + n
-			})), u({ factor: r }), e.preventDefault();
+			})), l({ factor: r }), e.preventDefault();
 		}
-		e.key === " " && !e.repeat && _().hover && u({
+		e.key === " " && !e.repeat && g().hover && l({
 			factor: 3,
-			to: _()
+			to: g()
 		});
 	}), f(document, "keyup", (e) => {
-		["INPUT", "TEXTAREA"].includes(e.target.tagName) || e.key === " " && _().hover && u({
+		["INPUT", "TEXTAREA"].includes(e.target.tagName) || e.key === " " && g().hover && l({
 			factor: 1 / 3,
-			to: _()
+			to: g()
 		});
 	}), /* @__PURE__ */ a(Y, {
-		onPan: ({ deltaX: e, deltaY: t }) => {
-			p(({ translateX: n, translateY: r }) => ({
+		fill: !0,
+		onPan: ({ deltaX: e, deltaY: t, target: n }) => {
+			let r = j(n, "item");
+			r && A(r, "selected") || (d(({ translateX: n, translateY: r }) => ({
 				translateX: n + e,
 				translateY: r + t
-			})), clearTimeout(g.current.pan), g.current.pan = setTimeout(() => {
-				c({ panning: !1 });
-			}, 200), c({ panning: !0 });
+			})), clearTimeout(h.current.pan), h.current.pan = setTimeout(() => {
+				s({ panning: !1 });
+			}, 200), s({ panning: !0 }));
 		},
 		onZoom: ({ clientX: e, clientY: t, scale: n }) => {
-			u({
+			l({
 				to: {
 					x: e,
 					y: t
 				},
 				factor: 1 - n / 500
-			}), clearTimeout(g.current.zoom), g.current.zoom = setTimeout(() => {
-				c({ zooming: !1 });
-			}, 200), c({ zooming: !0 });
+			}), clearTimeout(h.current.zoom), h.current.zoom = setTimeout(() => {
+				s({ zooming: !1 });
+			}, 200), s({ zooming: !0 });
 		},
 		mainAction: n ? "pan" : "drag",
 		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
 		})
@@ -2123,7 +2089,7 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	border: "2px dashed hsl(20, 55%, 40%)",
 	pointerEvents: "none"
 }), $t = () => {
-	let [t, n, r, i, o, { translateX: s, translateY: c, scale: l }] = L((e) => [
+	let [t, n, r, i, o, { translateX: s, translateY: c, scale: l }] = R((e) => [
 		e.selection,
 		e.getSelection,
 		e.selectionBox,
@@ -2134,13 +2100,13 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			translateY: e.boardState.translateY,
 			scale: e.boardState.scale
 		}
-	]), [d] = I((e) => [e.items]), f = e.useCallback(() => {
+	]), [d] = L((e) => [e.items]), f = e.useCallback(() => {
 		let e = n(), { boardWrapperRect: t, uid: r } = o();
 		if (e.length === 0) {
 			i(null);
 			return;
 		}
-		let a = oe(e, r);
+		let a = le(e, r);
 		if (!a) {
 			i(null);
 			return;
@@ -2176,7 +2142,7 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		className: `selection ${Qt}`
 	});
 }, en = () => {
-	let [e] = L((e) => [e.boardState.movingItems]);
+	let [e] = R((e) => [e.boardState.movingItems]);
 	return e ? null : /* @__PURE__ */ a($t, {});
 };
 //#endregion
@@ -2184,13 +2150,13 @@ var gt = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 function tn(e, t, n) {
 	return Math.min(Math.max(e, n), t);
 }
-var Q = class extends Error {
+var Z = class extends Error {
 	constructor(e) {
 		super(`Failed to parse color: "${e}"`);
 	}
 };
 function nn(e) {
-	if (typeof e != "string") throw new Q(e);
+	if (typeof e != "string") throw new Z(e);
 	if (e.trim().toLowerCase() === "transparent") return [
 		0,
 		0,
@@ -2202,7 +2168,7 @@ function nn(e) {
 	let n = cn.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 = ln.exec(t);
 	if (r) {
@@ -2217,10 +2183,10 @@ function nn(e) {
 	let a = dn.exec(t);
 	if (a) {
 		let [t, n, r, i] = Array.from(a).slice(1).map(parseFloat);
-		if (tn(0, 100, n) !== n || tn(0, 100, r) !== r) throw new Q(e);
+		if (tn(0, 100, n) !== n || tn(0, 100, r) !== r) throw new Z(e);
 		return [...mn(t, n, r), Number.isNaN(i) ? 1 : i];
 	}
-	throw new Q(e);
+	throw new Z(e);
 }
 function rn(e) {
 	let t = 5381, n = e.length;
@@ -2234,10 +2200,10 @@ var an = (e) => parseInt(e.replace(/_/g, ""), 36), on = "1q29ehhb 1n09sgk7 1kl1e
 }, {});
 function sn(e) {
 	let t = on[rn(e.toLowerCase().trim())];
-	if (!t) throw new Q(e);
+	if (!t) throw new Z(e);
 	return `#${t}`;
 }
-var $ = (e, t) => Array.from(Array(t)).map(() => e).join(""), cn = RegExp(`^#${$("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), ln = RegExp(`^#${$("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), un = RegExp(`^rgba?\\(\\s*(\\d+)\\s*${$(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), dn = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, fn = /^[a-z]+$/i, pn = (e) => Math.round(e * 255), mn = (e, t, n) => {
+var Q = (e, t) => Array.from(Array(t)).map(() => e).join(""), cn = RegExp(`^#${Q("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), ln = RegExp(`^#${Q("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), un = RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Q(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), dn = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, fn = /^[a-z]+$/i, pn = (e) => Math.round(e * 255), mn = (e, t, n) => {
 	let r = n / 100;
 	if (t === 0) return [
 		r,
@@ -2325,7 +2291,7 @@ var _n = K({
 	style: { transform: `translate(${e.x - 6}px, ${e.y - 15}px)` },
 	children: /* @__PURE__ */ a(yn, { ...t })
 }), Sn = ({ children: e }) => {
-	let [t] = L((e) => [e.getConfiguration, e.boardState.scale]), { fromWrapperToBoard: n, fromBoardToWrapper: r } = z(), [i, s, c, l] = U((e) => [
+	let [t] = R((e) => [e.getConfiguration, e.boardState.scale]), { fromWrapperToBoard: n, fromBoardToWrapper: r } = B(), [i, s, c, l] = U((e) => [
 		e.getUser(),
 		e.getLocalUsers(),
 		e.cursors,
@@ -2354,76 +2320,261 @@ var _n = K({
 			}, e) : null;
 		})]
 	});
-}, Cn = ({ children: e }) => e, wn = {
+}, Cn = /[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:px|%)/gi;
+function wn(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(Cn)].reduce((e, [n]) => e + Number.parseFloat(n) * (n.endsWith("%") ? t / 100 : 1), 0);
+}
+function Tn(e, t, n, r) {
+	let [i, a = "auto"] = wn(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 En(e, t, n) {
+	let r = [
+		[0, 0],
+		[e, 0],
+		[0, t],
+		[e, t]
+	].map((e) => oe(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] = M([o, s], n);
+	return {
+		left: o,
+		top: s,
+		width: c - o,
+		height: l - s,
+		x: u,
+		y: d
+	};
+}
+var Dn = (e, t, n) => ((e - t) % n + n) % n;
+function On(e, t, n, r) {
+	let i = En(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] = M([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 kn = {
+	position: "absolute",
+	inset: 0,
+	pointerEvents: "none"
+};
+function An({ style: t, tileSizeOverride: n }) {
+	let [r, i] = R((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) => wn(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 = On(s, c, r, n), h = u.layers.map((e) => {
+		let [t, n] = Tn(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 ? Dn(a, e, t) : a - e}px ${i && n ? Dn(o, s, n) : o - s}px`
+		};
+	});
+	return /* @__PURE__ */ o("div", {
+		className: "world-background",
+		"aria-hidden": "true",
+		style: {
+			...kn,
+			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 jn = ({ children: e }) => e, Mn = {}, Nn = {
 	overflow: "hidden",
 	position: "absolute",
 	inset: 0
-}, Tn = ({ moveFirst: t = !0, style: n, wrapperStyle: r, itemTemplates: i = {}, boardSize: s = Se, children: c, showResizeHandle: l = !1, Wrapper: u = Cn }) => {
-	let d = e.useRef(null), [f, m] = L((e) => [e.config.uid, e.updateConfiguration]), { updateItemExtent: h } = z(), g = {
+}, Pn = ({ moveFirst: t = !0, style: n, wrapperStyle: r, itemTemplates: i = Mn, boardSize: s = we, backgroundTileSize: c, children: l, showResizeHandle: u = !1, Wrapper: d = jn }) => {
+	let f = e.useRef(null), [m, h] = R((e) => [e.config.uid, e.updateConfiguration]), [g, _, v, y] = R((e) => [
+		e.boardState.translateX,
+		e.boardState.translateY,
+		e.boardState.scale,
+		e.boardState.rotate
+	]), { updateItemExtent: b } = B(), x = {
 		userSelect: "none",
-		width: `${s}px`,
-		height: `${s}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) => {
-			A(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(() => {
-		m({ boardWrapper: d.current });
-	}, [m]), e.useEffect(() => {
-		f || m({ uid: H() });
-	}, [f, m]), e.useEffect(() => {
-		m({
+		h({ boardWrapper: f.current });
+	}, [h]), e.useEffect(() => {
+		m || h({ uid: w() });
+	}, [m, h]), e.useEffect(() => {
+		h({
 			itemTemplates: i,
 			boardSize: s,
-			showResizeHandle: l
+			showResizeHandle: u
 		});
 	}, [
 		i,
 		s,
-		l,
-		m
+		u,
+		h
 	]), e.useEffect(() => {
-		m({ boardWrapperRect: d.current.getBoundingClientRect() }), h(), setTimeout(h, 2e3);
-	}, [m, h]), p(d, () => {
-		d.current && m({ boardWrapperRect: d.current.getBoundingClientRect() });
+		h({ boardWrapperRect: f.current.getBoundingClientRect() }), b(), setTimeout(b, 2e3);
+	}, [h, b]), p(f, () => {
+		f.current && h({ boardWrapperRect: f.current.getBoundingClientRect() });
 	});
-	let _ = K({
-		...wn,
+	let S = K({
+		...Nn,
 		...r
 	});
 	return /* @__PURE__ */ o("div", {
-		ref: d,
-		id: f,
-		className: `sync-board ${_}`,
-		children: [/* @__PURE__ */ a(Sn, { children: /* @__PURE__ */ a(Kt, {
-			moveFirst: t,
-			children: /* @__PURE__ */ a(Zt, {
+		ref: f,
+		id: m,
+		className: `sync-board ${S}`,
+		children: [
+			/* @__PURE__ */ a(An, {
+				style: n,
+				tileSizeOverride: c
+			}),
+			/* @__PURE__ */ a(Sn, { children: /* @__PURE__ */ a(Kt, {
 				moveFirst: t,
-				children: /* @__PURE__ */ a(qt, {
+				children: /* @__PURE__ */ a(Zt, {
 					moveFirst: t,
-					children: /* @__PURE__ */ a(u, { children: /* @__PURE__ */ o("div", {
-						onContextMenu: (e) => {
-							e.preventDefault();
-						},
-						style: g,
-						className: "board",
-						children: [/* @__PURE__ */ a(Ut, {}), c]
-					}) })
+					children: /* @__PURE__ */ a(qt, {
+						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(Ut, {}), /* @__PURE__ */ a("div", {
+								style: { pointerEvents: "auto" },
+								children: l
+							})]
+						}) })
+					})
 				})
-			})
-		}) }), /* @__PURE__ */ a(en, {})]
+			}) }),
+			/* @__PURE__ */ a(en, {})
+		]
 	});
 };
 //#endregion
 //#region src/lib/index.js
-ht(e.createElement);
+mt(e.createElement);
 //#endregion
-export { Tn as Board, at as BoardWrapper, ot as RoomWrapper, Re as useAvailableActions, Je as useBoardConfig, z as useBoardPosition, Ye as useBoardState, xe as useDebouncedItems, Ae as useGetSelectedItems, V as useItemActions, B as useItemInteraction, be as useItems, rt as useMessage, ke as useSelectedItems, ze as useSelectionBox, Xe as useSessionInfo, qe as useUsers, O as useWire };
+export { Pn as Board, it as BoardWrapper, at as RoomWrapper, Re as useAvailableActions, qe as useBoardConfig, B as useBoardPosition, Je as useBoardState, Ce as useDebouncedItems, Me as useGetSelectedItems, H as useItemActions, V as useItemInteraction, Se as useItems, nt as useMessage, je as useSelectedItems, ze as useSelectionBox, Ye as useSessionInfo, Ke as useUsers, k as useWire };
 
 //# sourceMappingURL=react-sync-board.js.map