react-sync-board 1.4.2 → 1.4.4

package/dist/react-sync-board.js

@@ -18,9 +18,9 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	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 {
+}, T = 128, ee = (e) => typeof e == "string" && e.length > 0 && e.length <= T && !/[\u0000-\u001f\u007f]/u.test(e), E = (e, t) => {
+	if (!ee(e)) throw Error(`Invalid ${t}`);
+}, te = 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`);
@@ -89,9 +89,9 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			params: t
 		});
 	}
-}, te = ({ socket: e, room: t, onJoined: n = () => {}, onMaster: r = () => {}, userId: i = null }) => {
+}, D = ({ 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);
+	let a = new te(e, t, i);
 	return new Promise((o) => {
 		let s = !0;
 		e.on(`${t}.isMaster`, () => {
@@ -132,7 +132,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			t.off("disconnect", e);
 		};
 	}, [i, t]), e.useEffect(() => {
-		if (t) return t.connected || t.connect(), console.log(`Try to connect to wire ${n} on channel ${i}`), _.current || (_.current = !0, te({
+		if (t) return t.connected || t.connect(), console.log(`Try to connect to wire ${n} on channel ${i}`), _.current || (_.current = !0, D({
 			socket: t,
 			room: n,
 			onMaster: () => {
@@ -160,34 +160,105 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		},
 		children: s
 	});
-}, 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]) => {
+}, k = (e = "default") => (r(O) || {})[e], ie = /* @__PURE__ */ new Set([
+	"grid",
+	"hexH",
+	"hexV"
+]), A = (e, t = 0) => Number.isFinite(Number(e)) ? Number(e) : t, j = (e) => {
+	if (!ie.has(e?.type)) return null;
+	let t = A(e.size, 1);
+	return {
+		...e,
+		size: t > 0 ? t : 1,
+		offset: {
+			x: A(e.offset?.x),
+			y: A(e.offset?.y)
+		},
+		show: e.show !== !1,
+		color: e.color || "#000000",
+		opacity: Math.max(0, Math.min(1, A(e.opacity ?? .2, .2)))
+	};
+}, ae = (e, t) => j(t) || j(e), oe = (e, t) => {
+	let n = ae(e, t), r = j(t);
+	return !n || r || typeof t?.show != "boolean" ? n : {
+		...n,
+		show: t.show
+	};
+}, se = (e) => {
+	let t = getComputedStyle(e), n = (e, n, r, i) => {
+		let a = parseFloat(t[e]);
+		return Number.isFinite(a) ? (t.boxSizing !== "border-box" && (a += (parseFloat(t[`padding${n}`]) || 0) + (parseFloat(t[`padding${r}`]) || 0) + (parseFloat(t[`border${n}Width`]) || 0) + (parseFloat(t[`border${r}Width`]) || 0)), a) : i;
+	};
+	return {
+		width: n("width", "Left", "Right", e.offsetWidth),
+		height: n("height", "Top", "Bottom", e.offsetHeight)
+	};
+}, ce = ({ type: e, size: t }) => {
+	let n = Math.sqrt(3) * t / 2;
+	return e === "grid" ? {
+		width: t,
+		height: t,
+		centers: [[t / 2, t / 2]]
+	} : e === "hexH" ? {
+		width: 2 * n,
+		height: 3 * t,
+		centers: [[0, 0], [n, 1.5 * t]]
+	} : {
+		width: 3 * t,
+		height: 2 * n,
+		centers: [[0, 0], [1.5 * t, n]]
+	};
+}, le = (e, t) => {
+	let { x: n, y: r, width: i, height: a } = e, o = j(t);
+	if (!o || ![
+		n,
+		r,
+		i,
+		a
+	].every(Number.isFinite)) return {
+		x: n,
+		y: r
+	};
+	let { offset: s } = o, c = n + i / 2 - s.x, l = r + a / 2 - s.y, u = ce(o), d, f = Infinity;
+	for (let [e, t] of u.centers) {
+		let n = Math.round((c - e) / u.width) * u.width + e, r = Math.round((l - t) / u.height) * u.height + t, o = Math.hypot(n - c, r - l);
+		o < f && (d = {
+			x: n + s.x - i / 2,
+			y: r + s.y - a / 2
+		}, f = o);
+	}
+	return d && Number.isFinite(d.x) && Number.isFinite(d.y) ? d : {
+		x: n,
+		y: r
+	};
+}, M = (e, t) => e.classList && e.classList.contains(t), N = (e, t) => M(e, t) ? e : e.parentNode ? N(e.parentNode, t) : !1, ue = ([e, t], [n, r]) => {
 	let i = Math.abs(e - n), a = Math.abs(t - r);
 	return Math.hypot(i, a);
-}, ae = (e, t, n) => {
+}, de = (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)];
-}, 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);
+}, fe = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => de((e - i) / n, (t - a) / n, -r), P = ([e, t], { scale: n, rotate: r, translateX: i, translateY: a }) => {
+	let [o, s] = de(e, t, r);
 	return [o * n + i, s * n + a];
-}, 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) => {
+}, pe = (e, t) => e.x > t.left && e.x < t.left + t.width && e.y > t.top && e.y < t.top + t.height, me = (e, t) => Array.from(e.querySelectorAll(".corner")).every((e) => {
 	let { top: n, left: r } = e.getBoundingClientRect();
-	return N({
+	return pe({
 		x: r,
 		y: n
 	}, t);
-}), ce = (e, t) => se(e, t.getBoundingClientRect()), P = (e, t) => {
+}), he = (e, t) => me(e, t.getBoundingClientRect()), F = (e, t) => {
 	try {
 		return document.getElementById(`${e}__${t}`);
 	} catch {
 		console.error(`Error while getting item with id ${t} inside wrapper`, e);
 		return;
 	}
-}, F = (e) => {
+}, I = (e) => {
 	let t = e?.dataset?.id;
 	return t || console.error("getIdFromElem call fails", e, JSON.stringify(e?.dataset), e?.dataset?.id), t;
-}, le = (e, t) => {
+}, ge = (e, t) => {
 	let n = e.reduce((e, n) => {
-		let r = P(t, n);
+		let r = F(t, n);
 		if (!r) return e || null;
 		let { left: i, right: a, top: o, bottom: s } = r.getBoundingClientRect(), c;
 		return c = e || {
@@ -198,31 +269,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);
-}, 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));
+}, _e = (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, ..._e(e, e[t].linkedItems, n)] : [])).flat()), ve = (e, t, n) => {
+	let r = new Set(_e(e, n));
 	return t.filter((e) => r.has(e));
-}, fe = ({ x: e, y: t, width: n, height: r }, { type: i = "grid", size: a = 1, offset: o = {
-	x: 0,
-	y: 0
-} }) => {
-	let [s, c] = [e + n / 2 - o.x, t + r / 2 - o.y], l, u, d, f, p, m, h, g, _, v, y = a / 1.1547;
-	switch (i) {
-		case "grid":
-			l = Math.round(s / a) * a, u = Math.round(c / a) * a;
-			break;
-		case "hexH":
-			d = 2 * y, f = 3 * a, p = Math.round(s / d) * d, h = Math.round(c / f) * f, m = p > s ? p - y : p + y, g = h > c ? h - 1.5 * a : h + 1.5 * a, _ = Math.hypot(p - s, h - c), v = Math.hypot(m - s, g - c), _ < v ? (l = p, u = h) : (l = m, u = g);
-			break;
-		case "hexV":
-			d = 3 * a, f = 2 * y, p = Math.round(s / d) * d, h = Math.round(c / f) * f, m = p > s ? p - 1.5 * a : p + 1.5 * a, g = h > c ? h - y : h + y, _ = Math.hypot(p - s, h - c), v = Math.hypot(m - s, g - c), _ < v ? (l = p, u = h) : (l = m, u = g);
-			break;
-		default: l = e + n / 2, u = t + r / 2;
-	}
-	return {
-		x: l + o.x - n / 2,
-		y: u + o.y - r / 2
-	};
-}, 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) => {
+}, ye = /* @__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("."), be = () => ye[Math.floor(Math.random() * ye.length)], L = ({ wire: e, storeName: t, noSync: n = [], defaultValue: r }, i) => (a, o, s) => {
 	a({ ready: !1 });
 	let c = [];
 	(async () => {
@@ -246,7 +296,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	return d.unsub = () => {
 		c.forEach((e) => e());
 	}, d;
-}, he = e.createContext(), ge = (e, t) => ({
+}, xe = e.createContext(), Se = (e, t) => ({
 	items: {},
 	getItems: () => t().items,
 	setItems: (t) => e({ items: t }),
@@ -269,7 +319,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			});
 		}), { items: r };
 	})
-}), _e = (e, t) => ({
+}), Ce = (e, t) => ({
 	itemIds: [],
 	setItemIds: (t) => e({ itemIds: t }),
 	getItemIds: () => t().itemIds,
@@ -286,7 +336,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]) }))
-}), ve = (e, t) => ({
+}), we = (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)))
@@ -313,7 +363,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			itemIds: r
 		};
 	})
-}), ye = (e, t) => ({
+}), Te = (e, t) => ({
 	boardConfig: {},
 	getBoardConfig: () => t().boardConfig,
 	setBoardConfig: (t) => e({ boardConfig: t }),
@@ -321,7 +371,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		...e.boardConfig,
 		...t
 	} }))
-}), be = (e, t) => ({
+}), Ee = (e, t) => ({
 	session: {},
 	getSessionInfo: () => t().session,
 	setSessionInfo: (t) => e({ session: t }),
@@ -329,34 +379,34 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		...e.session,
 		...t
 	} }))
-}), xe = ({ storeName: t, children: n, defaultValue: r }) => {
-	let { wire: i } = k("room"), [o, c] = e.useState(!1), [l] = e.useState(() => s(I({
+}), De = ({ storeName: t, children: n, defaultValue: r }) => {
+	let { wire: i } = k("room"), [o, c] = e.useState(!1), [l] = e.useState(() => s(L({
 		wire: i,
 		storeName: t,
 		defaultValue: r
 	}, (...e) => ({
-		...ge(...e),
-		..._e(...e),
-		...ve(...e),
-		...ye(...e),
-		...be(...e)
+		...Se(...e),
+		...Ce(...e),
+		...we(...e),
+		...Te(...e),
+		...Ee(...e)
 	}))));
 	return e.useEffect(() => {
 		let e = l.subscribe((t) => {
 			t.ready && (e(), c(!0));
 		});
-	}, [l]), o ? /* @__PURE__ */ a(he.Provider, {
+	}, [l]), o ? /* @__PURE__ */ a(xe.Provider, {
 		value: l,
 		children: n
 	}) : null;
-}, L = (e) => {
-	let t = r(he);
+}, R = (e) => {
+	let t = r(xe);
 	return c(t, e, l);
-}, Se = () => {
-	let [t, n] = L((e) => [e.itemIds, e.items]);
+}, Oe = () => {
+	let [t, n] = R((e) => [e.itemIds, e.items]);
 	return e.useMemo(() => t.map((e) => n[e]), [t, n]);
-}, Ce = () => {
-	let [t, n, r] = L((e) => [
+}, ke = () => {
+	let [t, n, r] = R((e) => [
 		e.items,
 		e.itemIds,
 		e.getItemList
@@ -371,7 +421,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		n,
 		r
 	]), i;
-}, we = 5e4, Te = e.createContext(), Ee = (e, t) => ({
+}, Ae = 5e4, je = e.createContext(), Me = (e, t) => ({
 	config: {
 		itemTemplates: {},
 		actions: {},
@@ -382,14 +432,14 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			radius: 0
 		},
 		boardWrapperRect: {},
-		boardSize: we
+		boardSize: Ae
 	},
 	updateConfiguration: (t) => e((e) => ({ config: {
 		...e.config,
 		...t
 	} })),
 	getConfiguration: () => t().config
-}), De = (e, t) => ({
+}), Ne = (e, t) => ({
 	boardState: {
 		movingItems: !1,
 		selecting: !1,
@@ -405,7 +455,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		...t
 	} })),
 	getBoardState: () => t().boardState
-}), Oe = (e, t) => ({
+}), Pe = (e, t) => ({
 	interactions: {},
 	getInteractions: () => t().interactions,
 	register: (t, n) => e((e) => {
@@ -427,7 +477,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			setTimeout(() => e(n), 0);
 		});
 	}
-}), ke = (e, t) => ({
+}), Fe = (e, t) => ({
 	selection: [],
 	setSelection: (t) => e((e) => JSON.stringify(e.selection) === JSON.stringify(t) ? {} : { selection: t }),
 	getSelection: () => t().selection,
@@ -443,34 +493,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 } : {};
 	})
-}), Ae = ({ children: t }) => {
+}), Ie = ({ children: t }) => {
 	let [n] = e.useState(() => s((...e) => ({
-		...Ee(...e),
-		...De(...e),
-		...Oe(...e),
-		...ke(...e)
+		...Me(...e),
+		...Ne(...e),
+		...Pe(...e),
+		...Fe(...e)
 	})));
-	return /* @__PURE__ */ a(Te.Provider, {
+	return /* @__PURE__ */ a(je.Provider, {
 		value: n,
 		children: t
 	});
-}, R = (e) => {
-	let t = r(Te);
+}, z = (e) => {
+	let t = r(je);
 	return c(t, e, l);
-}, je = () => {
-	let [e] = R((e) => [e.selection]);
+}, Le = () => {
+	let [e] = z((e) => [e.selection]);
 	return e;
-}, Me = () => {
-	let [e] = R((e) => [e.getSelection]);
+}, Re = () => {
+	let [e] = z((e) => [e.getSelection]);
 	return e;
-}, Ne = 1e3, Pe = .8, z = !1, B = () => {
-	let [t, n, r, i, a] = R((e) => [
+}, ze = 1e3, Be = .8, Ve = !1, B = () => {
+	let [t, n, r, i, a] = z((e) => [
 		e.getBoardState,
 		e.updateBoardState,
 		e.config.itemExtent,
 		e.getConfiguration,
 		e.updateConfiguration
-	]), o = e.useRef([.15, 5]), [s] = L((e) => [e.getItemList]), c = e.useCallback(() => {
+	]), o = e.useRef([.15, 5]), [s] = R((e) => [e.getItemList]), c = e.useCallback(() => {
 		let { translateX: e, translateY: n, scale: r, rotate: i } = t();
 		return {
 			translateX: e,
@@ -478,9 +528,9 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			scale: r,
 			rotate: i
 		};
-	}, [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) => {
+	}, [t]), l = e.useCallback((e, n) => fe([e, n], t()), [t]), d = e.useCallback((e, n) => P([e, n], t()), [t]), f = e.useCallback((e, n) => {
 		let { scale: r, rotate: i } = t();
-		return oe([e, n], {
+		return fe([e, n], {
 			translateX: 0,
 			translateY: 0,
 			rotate: i,
@@ -491,9 +541,9 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			...r,
 			...e(r)
 		};
-		z && console.log("New expected values: ", i, a, o, s);
+		Ve && 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({
+		Ve && 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),
@@ -538,7 +588,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			e || 0,
 			n || 0,
 			r || 2e3
-		], u = o.width / (l * 2), d = o.height / (l * 2), f = p(Math.min(u, d) * Pe), [h, g] = M([-s, -c], {
+		], u = o.width / (l * 2), d = o.height / (l * 2), f = p(Math.min(u, d) * Be), [h, g] = P([-s, -c], {
 			translateX: o.width / 2,
 			translateY: o.height / 2,
 			scale: f,
@@ -563,7 +613,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		};
 	}, [l, i]), y = e.useCallback(() => {
 		let e = s(), { uid: t } = i(), n = e.reduce((e, n) => {
-			let r = P(t, n.id);
+			let r = F(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: Infinity,
@@ -575,7 +625,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			a({ itemExtent: {
 				x: 0,
 				y: 0,
-				radius: Ne
+				radius: ze
 			} });
 			return;
 		}
@@ -583,7 +633,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			x: (n.right + n.left) / 2,
 			y: (n.bottom + n.top) / 2
 		};
-		r.radius = Math.max(ie([r.x, r.y], [n.left, n.top]), Ne), a({ itemExtent: r });
+		r.radius = Math.max(ue([r.x, r.y], [n.left, n.top]), ze), a({ itemExtent: r });
 	}, [
 		i,
 		s,
@@ -602,7 +652,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 = () => {
-			z = !0;
+			Ve = !0;
 		};
 	}, [i, y]), {
 		setDim: m,
@@ -618,8 +668,8 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		fromWrapperToBoard: l,
 		fromBoardToWrapper: d
 	};
-}, V = (t) => {
-	let [n, r, i] = R(({ register: e, unregister: t, callInteractions: n }) => [
+}, He = (t) => {
+	let [n, r, i] = z(({ register: e, unregister: t, callInteractions: n }) => [
 		e,
 		t,
 		n
@@ -636,176 +686,169 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			i(t, e);
 		}, [i, t])
 	};
-}, H = () => {
-	let { call: t } = V("place"), { call: n } = V("delete"), { getCenter: r, updateItemExtent: i } = B(), [a, o, s, c] = R((e) => [
+}, V = () => {
+	let { call: t } = He("place"), { call: n } = He("delete"), { getCenter: r, updateItemExtent: i } = B(), [a, o, s, c] = z((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: _ } = 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,
-		updateItems: r,
-		moveItems: i,
-		removeItemsById: a,
-		getItemList: o,
-		insertItems: s,
-		setItemList: c
-	})), v = e.useCallback((e, t, n = !1) => {
+	]), { getBoardConfig: l, getItems: u, getItemIds: d, setItemIds: f, updateItems: p, moveItems: m, removeItemsById: h, getItemList: g, insertItems: _, setItemList: v } = R(({ getBoardConfig: e, getItems: t, getItemIds: n, setItemIds: r, updateItems: i, moveItems: a, removeItemsById: o, getItemList: s, insertItems: c, setItemList: l }) => ({
+		getBoardConfig: e,
+		getItems: t,
+		getItemIds: n,
+		setItemIds: r,
+		updateItems: i,
+		moveItems: a,
+		removeItemsById: o,
+		getItemList: s,
+		insertItems: c,
+		setItemList: l
+	})), y = e.useCallback((e, t, n = !1) => {
 		let r = t;
 		typeof t == "object" && (r = () => t);
-		let a = u().filter((t) => e.includes(t)), o = l(), s = a.map((e) => {
+		let a = d().filter((t) => e.includes(t)), o = u(), s = a.map((e) => {
 			let t = o[e];
 			return n ? [e, r(t)] : [e, r({ ...t })];
 		}).filter(([, e]) => e);
 		if (s.length === 0) return;
 		let c = Object.fromEntries(s);
-		f(c, n), i();
+		p(c, n), i();
 	}, [
+		d,
 		u,
-		l,
 		i,
-		f
-	]), y = e.useCallback((e) => {
-		_(e), a(), i();
+		p
+	]), b = e.useCallback((e) => {
+		v(e), a(), i();
 	}, [
 		a,
-		_,
+		v,
 		i
-	]), b = e.useCallback((e, t, n = !1) => {
-		v([e], t, n);
-	}, [v]), x = e.useCallback((e, t) => {
-		p(de(l(), u(), e), t);
+	]), x = e.useCallback((e, t, n = !1) => {
+		y([e], t, n);
+	}, [y]), S = e.useCallback((e, t) => {
+		m(ve(u(), d(), e), t);
 	}, [
+		d,
 		u,
-		l,
-		p
-	]), S = e.useCallback((e) => {
-		let t = u(), n = t.filter((t) => !e.includes(t)), r = t.filter((t) => e.includes(t));
-		d([...n, ...r]);
-	}, [u, d]), C = e.useCallback((e, { type: t, size: n } = {}) => {
-		let { uid: r } = c();
-		v(e, (e) => {
-			let i = P(r, e.id);
-			if (!i) return;
-			let a = {
-				type: t || "grid",
-				size: n || 1,
-				offset: {
-					x: 0,
-					y: 0
-				},
-				...e.grid
-			};
-			return fe({
+		m
+	]), C = e.useCallback((e) => {
+		let t = d(), n = t.filter((t) => !e.includes(t)), r = t.filter((t) => e.includes(t));
+		f([...n, ...r]);
+	}, [d, f]), w = e.useCallback((e, t) => {
+		let { uid: n } = c();
+		y(e, (e) => {
+			let r = F(n, e.id);
+			if (!r) return;
+			let i = ae(t, e.grid);
+			if (i) return le({
 				x: e.x,
 				y: e.y,
-				width: i.clientWidth,
-				height: i.clientHeight
-			}, a);
+				...se(r)
+			}, i);
 		}, !0);
-	}, [c, v]), w = e.useCallback((e, n) => {
-		let r = de(l(), u(), e);
-		S(r), v(r, { moving: !1 }, !0), C(r, n), t(e), i();
+	}, [c, y]), T = e.useCallback((e) => {
+		let n = ve(u(), d(), e);
+		C(n), y(n, { moving: !1 }, !0), w(n, l().grid), t(e), i();
 	}, [
-		v,
+		y,
 		t,
-		u,
 		l,
-		S,
+		d,
+		u,
 		C,
+		w,
 		i
 	]), ee = e.useCallback((e) => {
-		d(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();
+		f(e);
+	}, [f]), E = e.useCallback((e) => {
+		let t = d(), n = t.filter((t) => e.includes(t)), r = t.map((t) => e.includes(t) ? n.pop() : t);
+		f(r), o();
 	}, [
-		u,
+		d,
 		o,
-		d
-	]), E = e.useCallback((e, t) => {
-		let n = l(), r = Object.fromEntries(t.map((t, r) => {
+		f
+	]), te = e.useCallback((e, t) => {
+		let n = u(), r = Object.fromEntries(t.map((t, r) => {
 			let i = n[e[r]];
 			return [t, {
 				x: i.x,
 				y: i.y
 			}];
 		}));
-		v(e, (e) => r[e.id], !0);
-		let i = Object.fromEntries(e.map((e, n) => [e, t[n]])), a = u().map((t) => e.includes(t) ? i[t] : t);
-		d(a);
+		y(e, (e) => r[e.id], !0);
+		let i = Object.fromEntries(e.map((e, n) => [e, t[n]])), a = d().map((t) => e.includes(t) ? i[t] : t);
+		f(a);
 	}, [
-		l,
-		v,
 		u,
-		d
+		y,
+		d,
+		f
 	]), D = 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
 		} : e);
-		g(i, t), requestAnimationFrame(() => {
-			w(e.map(({ id: e }) => e));
+		_(i, t), requestAnimationFrame(() => {
+			T(e.map(({ id: e }) => e));
 		});
 	}, [
 		r,
-		g,
-		w
-	]), te = e.useCallback((e, t) => {
+		_,
+		T
+	]), O = e.useCallback((e, t) => {
 		D([e], t);
-	}, [D]), O = e.useCallback((e) => {
-		s(e), m(e), n(e);
+	}, [D]), ne = e.useCallback((e) => {
+		s(e), h(e), n(e);
 	}, [
 		s,
-		m,
+		h,
 		n
-	]), ne = e.useCallback((e) => {
-		let t = l();
+	]), re = e.useCallback((e) => {
+		let t = u();
 		return e.map((e) => t[e]);
-	}, [l]);
+	}, [u]);
 	return {
-		putItemsOnTop: S,
-		batchUpdateItems: v,
+		putItemsOnTop: C,
+		batchUpdateItems: y,
 		updateItemOrder: ee,
-		moveItems: x,
-		placeItems: w,
-		updateItem: b,
-		swapItems: E,
-		reverseItemsOrder: T,
-		setItemList: y,
-		pushItem: te,
+		moveItems: S,
+		placeItems: T,
+		updateItem: x,
+		swapItems: te,
+		reverseItemsOrder: E,
+		setItemList: b,
+		pushItem: O,
 		pushItems: D,
-		removeItems: O,
-		getItemList: h,
+		removeItems: ne,
+		getItemList: g,
 		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 = j(e, "item");
+			let a = N(e, "item");
 			if (a) {
-				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({
+				if (M(a, "selected")) return a;
+				if (!i && M(a, "locked") && !M(e, "passthrough")) return r ? a : null;
+				if (M(e, "passthrough")) {
+					let e = d(), { uid: r } = c(), o = e.reduce((e, i) => {
+						let a = F(r, i), o = a.getBoundingClientRect();
+						return pe({
 							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 || !A(t, "locked"))) return t;
+						if (t !== a && (i || !M(t, "locked"))) return t;
 					}
 					return null;
 				}
 			}
 			return a;
-		}, [c, u]),
-		getItems: ne
+		}, [c, d]),
+		getItems: re
 	};
-}, Fe = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
+}, Ue = /* @__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") {
@@ -845,17 +888,17 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		}
 		return t !== t && n !== n;
 	};
-})))(), 1), Ie = (e, t) => {
+})))(), 1), We = (e, t) => {
 	if (e.type in t) {
 		let n = t[e.type].defaultActions;
 		return typeof n == "function" ? n(e) : n;
 	}
 	return [];
-}, Le = (e, t) => {
-	let { actions: n = Ie(e, t) } = e;
+}, Ge = (e, t) => {
+	let { actions: n = We(e, t) } = e;
 	return n.map((e) => typeof e == "string" ? { name: e } : e);
-}, Re = () => {
-	let [t, r] = L((e) => [e.items, e.getItems]), [i, a, o] = R((e) => [
+}, Ke = () => {
+	let [t, r] = R((e) => [e.items, e.getItems]), [i, a, o] = z((e) => [
 		e.config.itemTemplates,
 		e.selection,
 		e.getSelection
@@ -873,9 +916,9 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		if (e.length > 0) {
 			if (!l.current) return;
 			let e = t.reduce((e, t) => {
-				let n = Le(t, i);
-				return e.filter((e) => n.some((t) => (0, Fe.default)(e, t)));
-			}, Le(t[0], i));
+				let n = Ge(t, i);
+				return e.filter((e) => n.some((t) => (0, Ue.default)(e, t)));
+			}, Ge(t[0], i));
 			u(() => {
 				c(e);
 			});
@@ -888,28 +931,28 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		a,
 		p
 	], 100), { availableActions: s };
-}, ze = () => {
-	let [e] = R((e) => [e.selectionBox]);
+}, qe = () => {
+	let [e] = z((e) => [e.selectionBox]);
 	return e;
-}, Be = e.createContext(), Ve = (e) => {
+}, Je = e.createContext(), Ye = (e) => {
 	localStorage.setItem("user", JSON.stringify(e));
-}, He = () => {
+}, Xe = () => {
 	if (localStorage.user) {
 		let e = {
 			name: "Player",
-			color: me(),
+			color: be(),
 			uid: w(),
 			...JSON.parse(localStorage.user)
 		};
-		return Ve(e), e;
+		return Ye(e), e;
 	}
 	let e = {
 		name: "Player",
-		color: me(),
+		color: be(),
 		uid: w()
 	};
-	return Ve(e), e;
-}, Ue = (e) => (t, n) => ({
+	return Ye(e), e;
+}, Ze = (e) => (t, n) => ({
 	isSpaceMaster: !1,
 	users: {},
 	getUser: () => n().users[e],
@@ -932,7 +975,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			id: r,
 			uid: t.users[r].uid
 		};
-		return a.id === e && Ve(a), setTimeout(() => n().electSpaceMaster(), 100), { users: {
+		return a.id === e && Ye(a), setTimeout(() => n().electSpaceMaster(), 100), { users: {
 			...t.users,
 			[r]: a
 		} };
@@ -955,7 +998,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 });
 	}
-}), We = (e) => ({
+}), Qe = (e) => ({
 	cursors: {},
 	moveCursor: (t, n) => e((e) => ({ cursors: {
 		...e.cursors,
@@ -965,12 +1008,12 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		let n = { ...e.cursors };
 		return delete n[t], { cursors: n };
 	})
-}), Ge = ({ storeName: t, children: n }) => {
+}), $e = ({ 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(I({
+			let n = s(L({
 				wire: r,
 				storeName: t,
 				noSync: [
@@ -980,8 +1023,8 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 					"electSpaceMaster"
 				]
 			}, (...e) => ({
-				...Ue(r.userId)(...e),
-				...We(...e)
+				...Ze(r.userId)(...e),
+				...Qe(...e)
 			}), r, t)), i = n.subscribe((t) => {
 				t.ready && (i(), e && c(n));
 			});
@@ -995,7 +1038,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		r.userId
 	]), e.useEffect(() => {
 		if (o) return o.getState().addUser({
-			...He(),
+			...Xe(),
 			id: r.userId
 		}), u(!0), () => {
 			o.getState().removeUser(r.userId);
@@ -1023,15 +1066,15 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		i,
 		o,
 		r
-	]), l ? /* @__PURE__ */ a(Be.Provider, {
+	]), l ? /* @__PURE__ */ a(Je.Provider, {
 		value: o,
 		children: n
 	}) : null;
-}, U = (e) => {
-	let t = r(Be);
+}, H = (e) => {
+	let t = r(Je);
 	return c(t, e, l);
-}, Ke = () => {
-	let [t, n, r, i, a] = U((e) => [
+}, et = () => {
+	let [t, n, r, i, a] = H((e) => [
 		e.isSpaceMaster,
 		e.getUser(),
 		e.users,
@@ -1049,8 +1092,8 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		}, [n, o]),
 		joinSpace: a
 	};
-}, qe = () => {
-	let [t, n, r] = L((e) => [
+}, tt = () => {
+	let [t, n, r] = R((e) => [
 		e.boardConfig,
 		e.getBoardConfig,
 		e.setBoardConfig
@@ -1061,11 +1104,11 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		let i = n(), a = t(i);
 		r(a);
 	}, [n, r])];
-}, Je = () => {
-	let [e] = R((e) => [e.boardState]);
+}, nt = () => {
+	let [e] = z((e) => [e.boardState]);
 	return e;
-}, Ye = () => {
-	let [e, t, n, r] = L((e) => [
+}, rt = () => {
+	let [e, t, n, r] = R((e) => [
 		e.getSessionInfo,
 		e.setSessionInfo,
 		e.updateSessionInfo,
@@ -1077,7 +1120,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		sessionInfo: r,
 		updateSessionInfo: n
 	};
-}, Xe = e.createContext(), Ze = ({ user: { name: e, uid: t, color: n }, content: r }) => ({
+}, it = e.createContext(), at = ({ user: { name: e, uid: t, color: n }, content: r }) => ({
 	type: "message",
 	user: {
 		name: e,
@@ -1087,7 +1130,7 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 	content: r,
 	uid: w(),
 	timestamp: (/* @__PURE__ */ new Date()).toISOString()
-}), Qe = (e, t) => ({
+}), ot = (e, t) => ({
 	messages: [],
 	setMessages: (t) => e({ messages: t.map((e) => ({
 		...e,
@@ -1098,28 +1141,28 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		timestamp: Date.parse(t.timestamp)
 	}] })),
 	sendMessage: (e, n) => {
-		let r = Ze({
+		let r = at({
 			user: e,
 			content: n
 		});
 		r && t().addMessage(r);
 	}
-}), $e = ({ storeName: t, children: n, defaultValue: r = [] }) => {
-	let { wire: i } = k("room"), [o] = e.useState(() => s(I({
+}), st = ({ storeName: t, children: n, defaultValue: r = [] }) => {
+	let { wire: i } = k("room"), [o] = e.useState(() => s(L({
 		wire: i,
 		storeName: t,
 		defaultValue: r,
 		noSync: ["sendMessage"]
-	}, (...e) => ({ ...Qe(...e) }))));
-	return /* @__PURE__ */ a(Xe.Provider, {
+	}, (...e) => ({ ...ot(...e) }))));
+	return /* @__PURE__ */ a(it.Provider, {
 		value: o,
 		children: n
 	});
-}, et = (e) => {
-	let t = r(Xe);
+}, ct = (e) => {
+	let t = r(it);
 	return c(t, e, l);
-}, tt = () => {}, nt = (t = tt) => {
-	let n = U((e) => e.getUser()), [r, i, a] = et((e) => [
+}, lt = () => {}, ut = (t = lt) => {
+	let n = H((e) => e.getUser()), [r, i, a] = ct((e) => [
 		e.messages,
 		e.setMessages,
 		e.sendMessage
@@ -1133,23 +1176,23 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			a(n, e);
 		}, [n, a])
 	};
-}, rt = ({ children: t, session: n }) => {
-	let r = U((e) => e.joinSpace);
+}, dt = ({ children: t, session: n }) => {
+	let r = H((e) => e.joinSpace);
 	return e.useEffect(() => (r(n), () => {
 		r(null);
 	}), [r, n]), t;
-}, it = ({ socket: t, room: n, session: r, items: i = [], messages: o = [], LoadingComponent: s, ...c }) => {
+}, ft = ({ 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 k("room") ? /* @__PURE__ */ a($e, {
+	return k("room") ? /* @__PURE__ */ a(st, {
 		storeName: `${u}_messages`,
 		defaultValue: o,
-		children: /* @__PURE__ */ a(Ae, { children: /* @__PURE__ */ a(xe, {
+		children: /* @__PURE__ */ a(Ie, { children: /* @__PURE__ */ a(De, {
 			storeName: `${u}_item`,
 			defaultValue: d,
-			children: /* @__PURE__ */ a(rt, {
+			children: /* @__PURE__ */ a(dt, {
 				...c,
 				session: u
 			})
@@ -1159,15 +1202,15 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 		channel: "room",
 		socket: t,
 		LoadingComponent: s,
-		children: /* @__PURE__ */ a(Ge, {
+		children: /* @__PURE__ */ a($e, {
 			storeName: `${l}_users`,
-			children: /* @__PURE__ */ a($e, {
+			children: /* @__PURE__ */ a(st, {
 				storeName: `${u}_messages`,
 				defaultValue: o,
-				children: /* @__PURE__ */ a(Ae, { children: /* @__PURE__ */ a(xe, {
+				children: /* @__PURE__ */ a(Ie, { children: /* @__PURE__ */ a(De, {
 					storeName: `${u}_item`,
 					defaultValue: d,
-					children: /* @__PURE__ */ a(rt, {
+					children: /* @__PURE__ */ a(dt, {
 						...c,
 						session: u
 					})
@@ -1175,19 +1218,19 @@ var m = Object.create, h = Object.defineProperty, g = Object.getOwnPropertyDescr
 			})
 		})
 	});
-}, at = ({ socket: t, room: n, children: r, LoadingComponent: i }) => {
+}, pt = ({ 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(Ge, {
+		children: /* @__PURE__ */ a($e, {
 			storeName: `${o}_users`,
 			children: r
 		})
 	});
-}, ot = { data: "" }, st = (e) => {
+}, mt = { data: "" }, ht = (e) => {
 	if (typeof window == "object") {
 		let t = (e ? e.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), {
 			innerHTML: " ",
@@ -1195,58 +1238,58 @@ 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 || ot;
-}, ct = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, lt = /\/\*[^]*?\*\/|  +/g, ut = /\n+/g, W = (e, t) => {
+	return e || mt;
+}, gt = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, _t = /\/\*[^]*?\*\/|  +/g, vt = /\n+/g, U = (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 + ";");
+		a[0] == "@" ? a[1] == "i" ? n = a + " " + o + ";" : r += a[1] == "f" ? U(o, a) : a + "{" + U(o, a[1] == "k" ? "" : t) + "}" : typeof o == "object" ? r += U(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 += U.p ? U.p(a, o) : a + ":" + o + ";");
 	}
 	return n + (t && i ? t + "{" + i + "}" : i) + r;
-}, G = {}, dt = (e) => {
+}, W = {}, yt = (e) => {
 	if (typeof e == "object") {
 		let t = "";
-		for (let n in e) t += n + dt(e[n]);
+		for (let n in e) t += n + yt(e[n]);
 		return t;
 	}
 	return e;
-}, ft = (e, t, n, r, i) => {
-	let a = dt(e), o = G[a] || (G[a] = ((e) => {
+}, bt = (e, t, n, r, i) => {
+	let a = yt(e), o = W[a] || (W[a] = ((e) => {
 		let t = 0, n = 11;
 		for (; t < e.length;) n = 101 * n + e.charCodeAt(t++) >>> 0;
 		return "go" + n;
 	})(a));
-	if (!G[o]) {
+	if (!W[o]) {
 		let t = a === e ? ((e) => {
 			let t, n, r = [{}];
-			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();
+			for (; t = gt.exec(e.replace(_t, ""));) t[4] ? r.shift() : t[3] ? (n = t[3].replace(vt, " ").trim(), r.unshift(r[0][n] = r[0][n] || {})) : r[0][t[1]] = t[2].replace(vt, " ").trim();
 			return r[0];
 		})(e) : e;
-		G[o] = W(i ? { ["@keyframes " + o]: t } : t, n ? "" : "." + o);
+		W[o] = U(i ? { ["@keyframes " + o]: t } : t, n ? "" : "." + o);
 	}
-	let s = n && G.g;
-	return n && (G.g = G[o]), ((e, t, n, r) => {
+	let s = n && W.g;
+	return n && (W.g = W[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;
-}, pt = (e, t, n) => e.reduce((e, r, i) => {
+	})(W[o], t, r, s), o;
+}, xt = (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 ? "" : W(e, "") : !1 === e ? "" : e;
+		a = t ? "." + t : e && typeof e == "object" ? e.props ? "" : U(e, "") : !1 === e ? "" : e;
 	}
 	return e + r + (a ?? "");
 }, "");
-function K(e) {
+function G(e) {
 	let t = this || {}, n = e.call ? e(t.p) : e;
-	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);
+	return bt(n.unshift ? n.raw ? xt(n, [].slice.call(arguments, 1), t.p) : n.reduce((e, n) => Object.assign(e, n && n.call ? n(t.p) : n), {}) : n, ht(t.target), t.g, t.o, t.k);
 }
-K.bind({ g: 1 }), K.bind({ k: 1 });
-function mt(e, t, n, r) {
-	W.p = t;
+G.bind({ g: 1 }), G.bind({ k: 1 });
+function St(e, t, n, r) {
+	U.p = t;
 }
 //#endregion
 //#region src/lib/board/Gesture.jsx
-var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
+var Ct = /* @__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") {
@@ -1270,44 +1313,44 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		}
 		return t !== t && n !== n;
 	};
-})))(), 1), gt = () => {
+})))(), 1), wt = () => {
 	let e = navigator.userAgent.toLowerCase();
 	return /mac os ?x 10/.test(e);
-}, _t = (() => {
+}, Tt = (() => {
 	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;
-})(), vt = 800, yt = (e, t) => e[Object.keys(e).map((e) => Number(e)).find((e) => e !== t)], bt = ([e, t], [n, r]) => {
+})(), Et = 800, Dt = (e, t) => e[Object.keys(e).map((e) => Number(e)).find((e) => e !== t)], Ot = ([e, t], [n, r]) => {
 	let i = Math.abs(e - n), a = Math.abs(t - r);
 	return Math.hypot(i, a);
-}, q = () => {}, xt = (e) => (t) => {
+}, K = () => {}, kt = (e) => (t) => {
 	let { event: n } = t;
 	return n.isPropagationStopped() ? null : e(t);
-}, St = (e) => async (...t) => {
+}, At = (e) => async (...t) => {
 	try {
 		await e(...t);
 	} catch (e) {
 		console.error(e);
 	}
-}, J = new class {
+}, q = new class {
 	lastPromise = Promise.resolve(!0);
 	add(e, ...t) {
 		return new Promise((n, r) => {
-			this.lastPromise = this.lastPromise.then(() => xt(St(e))(...t)).then(n).catch(r);
+			this.lastPromise = this.lastPromise.then(() => kt(At(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", fill: f = !1 }) => {
+}(), J = ({ children: t, onDrag: n = K, onDragStart: r = K, onDragEnd: i = K, onPan: o = K, onTap: s = K, onLongTap: c = K, onDoubleTap: l = K, onZoom: u, mainAction: d = "drag", fill: f = !1 }) => {
 	let p = e.useRef(null), m = e.useRef({
 		moving: !1,
 		pointers: {},
 		mainPointer: void 0
 	}), 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) J.add(o, {
+		if (!(c || s && !wt())) {
+			if (wt() && !s) q.add(o, {
 				deltaX: -2 * t,
 				deltaY: -2 * n,
 				button: 1,
@@ -1321,11 +1364,11 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 				let t = n;
 				switch (a) {
 					case 1:
-						t *= _t;
+						t *= Tt;
 						break;
-					case 2: t *= vt;
+					case 2: t *= Et;
 				}
-				gt() && (t *= 2), J.add(u, {
+				wt() && (t *= 2), q.add(u, {
 					scale: t,
 					clientX: r,
 					clientY: i,
@@ -1340,7 +1383,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			clientY: i
 		}, 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]);
+				let { clientX: e, clientY: t } = Dt(m.current.pointers, a), n = (e + r) / 2, o = (t + i) / 2, s = Ot([e, t], [r, i]);
 				Object.assign(m.current, {
 					pressed: !0,
 					moving: !1,
@@ -1372,7 +1415,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			target: t,
 			timeStart: Date.now(),
 			longTapTimeout: setTimeout(async () => {
-				m.current.noTap = !0, J.add(c, {
+				m.current.noTap = !0, q.add(c, {
 					clientX: r,
 					clientY: i,
 					altKey: o,
@@ -1397,14 +1440,14 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			}, m.current.moving = !0;
 			let g = Object.keys(m.current.pointers).length === 2, _, v, y = 0;
 			if (g) {
-				let { clientX: e, clientY: n } = yt(m.current.pointers, t);
-				_ = (e + i) / 2, v = (n + a) / 2, y = bt([e, n], [i, a]);
+				let { clientX: e, clientY: n } = Dt(m.current.pointers, t);
+				_ = (e + i) / 2, v = (n + a) / 2, y = Ot([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) {
-				m.current.gestureStart || (p.current.style.cursor = "move", m.current.gestureStart = !0, clearTimeout(m.current.longTapTimeout), J.add(r, {
+				m.current.gestureStart || (p.current.style.cursor = "move", m.current.gestureStart = !0, clearTimeout(m.current.longTapTimeout), q.add(r, {
 					deltaX: 0,
 					deltaY: 0,
 					startX: m.current.startX,
@@ -1422,7 +1465,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 					event: m.current.pointerDownEvent
 				}));
 				let t = _ - m.current.prevX, i = v - m.current.prevY, a = _ - m.current.startX, o = v - m.current.startY;
-				J.add(n, {
+				q.add(n, {
 					deltaX: t,
 					deltaY: i,
 					startX: m.current.startX,
@@ -1443,7 +1486,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			if (S) {
 				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, {
+				if (q.add(o, {
 					deltaX: t,
 					deltaY: n,
 					button: m.current.currentButton,
@@ -1455,7 +1498,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 					event: e
 				}), y !== m.current.prevDistance && u) {
 					let t = m.current.prevDistance - y;
-					Math.abs(t) > 0 && (J.add(u, {
+					Math.abs(t) > 0 && (q.add(u, {
 						scale: t * 3,
 						clientX: _,
 						clientY: v,
@@ -1494,7 +1537,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 					console.log("Fails to set pointer capture", e), m.current.mainPointer = void 0, delete m.current.pointers[Object.keys(m.current.pointers)[0]];
 				}
 			}
-			if (m.current.mainPointer = void 0, m.current.pressed = !1, clearTimeout(m.current.longTapTimeout), m.current.moving) m.current.moving = !1, J.add(i, {
+			if (m.current.mainPointer = void 0, m.current.pressed = !1, clearTimeout(m.current.longTapTimeout), m.current.moving) m.current.moving = !1, q.add(i, {
 				deltaX: t - m.current.prevX,
 				deltaY: n - m.current.prevY,
 				startX: m.current.startX,
@@ -1512,7 +1555,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			}), p.current.style.cursor = "auto";
 			else {
 				let i = Date.now();
-				m.current.noTap ? m.current.noTap = !1 : m.current.timeStart - i < 300 && J.add(s, {
+				m.current.noTap ? m.current.noTap = !1 : m.current.timeStart - i < 300 && q.add(s, {
 					clientX: t,
 					clientY: n,
 					altKey: r,
@@ -1533,7 +1576,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		onPointerCancel: v,
 		onDoubleClick: (e) => {
 			let { clientX: t, clientY: n, altKey: r, shiftKey: i, ctrlKey: a, metaKey: o, target: s } = e;
-			J.add(l, {
+			q.add(l, {
 				clientX: t,
 				clientY: n,
 				altKey: r,
@@ -1554,9 +1597,9 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		ref: p,
 		children: t
 	});
-}, Ct = ({ onResize: e, ...t }) => {
-	let [n] = R((e) => [e.getBoardState]);
-	return /* @__PURE__ */ a(Y, {
+}, jt = ({ onResize: e, ...t }) => {
+	let [n] = z((e) => [e.getBoardState]);
+	return /* @__PURE__ */ a(J, {
 		onDrag: ({ deltaX: t, deltaY: r, event: i }) => {
 			i.stopPropagation();
 			let { scale: a } = n();
@@ -1567,36 +1610,36 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		},
 		children: /* @__PURE__ */ a("div", { ...t })
 	});
-}, wt = K`
+}, Mt = G`
   display: inline-block;
   transition: transform 150ms;
   user-select: none;
   padding: 2px;
   box-sizing: border-box;
-`, Tt = K`
+`, Nt = G`
   border: 2px dashed #db5034;
   padding: 0px;
   cursor: pointer;
-`, X = K`
+`, Y = G`
   position: absolute;
   width: 0px;
   height: 0px;
-`, Et = K`
+`, Pt = G`
   top: 0;
   left: 0;
-`, Dt = K`
+`, Ft = G`
   top: 0;
   right: 0;
-`, Ot = K`
+`, It = G`
   bottom: 0;
   left: 0;
-`, kt = K`
+`, Lt = G`
   bottom: 0;
   right: 0;
-`, At = K`
+`, Rt = G`
   top: 50%;
   left: 50%;
-`, jt = K`
+`, X = G`
   position: absolute;
 
   width: 10px;
@@ -1604,20 +1647,20 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
   border: 2px solid #db5034;
   background-color: #db5034;
   cursor: move;
-`, Mt = K`
+`, zt = G`
   cursor: ew-resize;
   right: -6px;
   top: calc(50% - 5px);
-`, Nt = K`
+`, Bt = G`
   cursor: ns-resize;
   bottom: -6px;
   left: calc(50% - 5px);
-`, Pt = K`
+`, Vt = G`
   cursor: nwse-resize;
   bottom: -6px;
   right: -6px;
-`, Ft = ({ onReload: e }) => /* @__PURE__ */ o("div", {
-	className: `syncboard-error-item ${K({
+`, Ht = ({ onReload: e }) => /* @__PURE__ */ o("div", {
+	className: `syncboard-error-item ${G({
 		width: "100px",
 		display: "flex",
 		flexDirection: "column",
@@ -1629,7 +1672,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		onClick: e,
 		children: "Reload it"
 	})]
-}), It = class extends e.Component {
+}), Ut = class extends e.Component {
 	constructor(e) {
 		super(e), this.state = {
 			hasError: !1,
@@ -1649,9 +1692,9 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		let { ErrorComponent: e } = this.props;
 		return this.state.hasError ? /* @__PURE__ */ a(e, { onReload: this.onReload }) : this.props.children;
 	}
-}, Lt = (e) => {
+}, Wt = (e) => {
 	e.target.className = "";
-}, Rt = ({ width: e, height: t, actualWidth: n, actualHeight: r, prevState: i, keepRatio: a }) => {
+}, Gt = ({ 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;
@@ -1666,21 +1709,21 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		width: (o + e).toFixed(1),
 		height: (s + t).toFixed(1)
 	};
-}, zt = {
+}, Kt = {
 	w: !0,
 	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] = 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]);
+}, qt = 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] = z((e) => [e.config.uid]), { component: _ = () => null, resizeDirections: v = Kt, resize: y = Gt } = 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,
-		wt
+		Mt
 	];
-	c && x.push("locked"), f && (x.push("selected"), x.push(Tt)), Array.isArray(l) && x.concat(l);
+	c && x.push("locked"), f && (x.push("selected"), x.push(Nt)), 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;
@@ -1695,9 +1738,9 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		});
 	}, w = ({ width: e }) => {
 		C({ width: e });
-	}, ee = ({ height: e }) => {
+	}, T = ({ height: e }) => {
 		C({ height: e });
-	}, T = ({ width: e }) => {
+	}, ee = ({ width: e }) => {
 		C({
 			height: e,
 			width: e,
@@ -1712,63 +1755,63 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		children: /* @__PURE__ */ o("div", {
 			style: { display: "flex" },
 			ref: h,
-			onAnimationEnd: Lt,
+			onAnimationEnd: Wt,
 			onKeyDown: (e) => e.stopPropagation(),
 			onKeyUp: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ a(It, {
+				/* @__PURE__ */ a(Ut, {
 					itemId: s,
 					state: u,
-					ErrorComponent: p?.error?.component || Ft,
+					ErrorComponent: p?.error?.component || Ht,
 					children: /* @__PURE__ */ a(_, {
 						...u,
 						id: s,
 						setState: b
 					})
 				}),
-				/* @__PURE__ */ a("div", { className: `corner ${X} ${Et}` }),
-				/* @__PURE__ */ a("div", { className: `corner ${X} ${Dt}` }),
-				/* @__PURE__ */ a("div", { className: `corner ${X} ${kt}` }),
-				/* @__PURE__ */ a("div", { className: `corner ${X} ${Ot}` }),
-				/* @__PURE__ */ a("div", { className: `center ${X} ${At}` }),
+				/* @__PURE__ */ a("div", { className: `corner ${Y} ${Pt}` }),
+				/* @__PURE__ */ a("div", { className: `corner ${Y} ${Ft}` }),
+				/* @__PURE__ */ a("div", { className: `corner ${Y} ${Lt}` }),
+				/* @__PURE__ */ a("div", { className: `corner ${Y} ${It}` }),
+				/* @__PURE__ */ a("div", { className: `center ${Y} ${Rt}` }),
 				m && /* @__PURE__ */ o(i, { children: [
-					v.b && /* @__PURE__ */ a(Ct, {
-						className: `${jt} ${Pt}`,
-						onResize: T
-					}),
-					v.h && /* @__PURE__ */ a(Ct, {
-						className: `${jt} ${Nt}`,
+					v.b && /* @__PURE__ */ a(jt, {
+						className: `${X} ${Vt}`,
 						onResize: ee
 					}),
-					v.w && /* @__PURE__ */ a(Ct, {
-						className: `${jt} ${Mt}`,
+					v.h && /* @__PURE__ */ a(jt, {
+						className: `${X} ${Bt}`,
+						onResize: T
+					}),
+					v.w && /* @__PURE__ */ a(jt, {
+						className: `${X} ${zt}`,
 						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, ht.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, Ct.default)(e, i)), Jt = (e) => e, Yt = 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);
+	let { stateHook: i = Jt } = 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(${o}px, ${s}px)`,
 			zIndex: d
 		},
-		children: /* @__PURE__ */ a(Bt, {
+		children: /* @__PURE__ */ a(qt, {
 			...r,
 			showResizeHandle: r.isSelected && r.showResizeHandle,
 			state: u
 		})
 	});
-}), Ut = () => {
-	let { updateItem: e } = H(), [t, n] = L((e) => [e.itemIds, e.items]), [r, i, o] = R((e) => [
+}), Xt = () => {
+	let { updateItem: e } = V(), [t, n] = R((e) => [e.itemIds, e.items]), [r, i, o] = z((e) => [
 		e.config.showResizeHandle,
 		e.config.itemTemplates,
 		e.selection
-	]), [s] = U((e) => [e.getUser]), c = K({
+	]), [s] = H((e) => [e.getUser]), c = G({
 		position: "absolute",
 		top: 0,
 		left: 0,
@@ -1776,7 +1819,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		display: "inline-block",
 		lineHeight: 0
 	});
-	return t.map((t) => /* @__PURE__ */ a(Ht, {
+	return t.map((t) => /* @__PURE__ */ a(Yt, {
 		state: n[t],
 		setState: e,
 		isSelected: o.includes(t),
@@ -1785,28 +1828,28 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		showResizeHandle: r,
 		className: c
 	}, t));
-}, Wt = K({
+}, Zt = G({
 	zIndex: 210,
 	position: "absolute",
 	backgroundColor: "hsla(0, 40%, 50%, 10%)",
 	border: "2px solid hsl(0, 55%, 40%)"
-}), Gt = (e, t, n = !1) => {
+}), Qt = (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[F(t)];
-		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] = R((e) => [
+		let r = e[I(t)];
+		return !r || !n && r.locked ? !1 : he(t, i);
+	}).map((e) => I(e));
+}, $t = ({ children: t, moveFirst: n }) => {
+	let [r, i, s, c, l, u] = z((e) => [
 		e.getSelection,
 		e.clear,
 		e.setSelection,
 		e.select,
 		e.getConfiguration,
 		e.updateBoardState
-	]), { 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 });
+	]), { findElementUnderPointer: d } = V(), [p] = R((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) => {
@@ -1815,7 +1858,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		i();
 	}), [i]), e.useEffect(() => {
 		if (b.current.moving) {
-			let e = p(), { boardWrapper: t } = l(), n = Gt(e, t, _);
+			let e = p(), { boardWrapper: t } = l(), n = Qt(e, t, _);
 			g(() => {
 				s(n);
 			});
@@ -1826,7 +1869,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 		m,
 		s,
 		_
-	]), /* @__PURE__ */ a(Y, {
+	]), /* @__PURE__ */ a(J, {
 		fill: !0,
 		onDragStart: async (e) => {
 			await d(e) || (b.current.moving = !0, g(() => {
@@ -1851,7 +1894,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			let { ctrlKey: t, metaKey: n } = e, a = d(e);
 			if (!a) i();
 			else {
-				let e = F(a);
+				let e = I(a);
 				if (!e) {
 					i();
 					return;
@@ -1861,9 +1904,9 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			}
 		},
 		onLongTap: ({ target: e }) => {
-			let t = j(e, "item");
+			let t = N(e, "item");
 			if (t) {
-				let e = F(t);
+				let e = I(t);
 				s([e]);
 			}
 		},
@@ -1880,81 +1923,72 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 					height: `${m.height}px`,
 					width: `${m.width}px`
 				},
-				className: `selector ${Wt}`
+				className: `selector ${Zt}`
 			}), t]
 		})
 	});
-}, qt = ({ children: t }) => {
-	let { moveItems: n, placeItems: r, findElementUnderPointer: i } = H(), { vectorFromWrapperToBoard: o } = B(), [s, c, l, u, d] = R((e) => [
+}, en = ({ children: t }) => {
+	let { moveItems: n, placeItems: r, findElementUnderPointer: i } = V(), { vectorFromWrapperToBoard: o } = B(), [s, c, l, u, d] = z((e) => [
 		e.select,
 		e.setSelection,
 		e.getSelection,
 		e.getBoardState,
 		e.updateBoardState
-	]), [p] = L((e) => [e.getBoardConfig]), m = e.useRef({}), h = e.useRef({ items: [] });
+	]), p = e.useRef({}), m = e.useRef({ items: [] });
 	return f(document, "keydown", (e) => {
 		if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return;
 		let t = l();
 		if (t.length) {
-			let { gridSize: i = 1 } = p(), a = 0, s = 0;
+			let i = 0, a = 0;
 			switch (e.key) {
 				case "ArrowLeft":
-					a = -10;
+					i = -10;
 					break;
 				case "ArrowRight":
-					a = 10;
+					i = 10;
 					break;
 				case "ArrowUp":
-					s = -10;
+					a = -10;
 					break;
-				case "ArrowDown": s = 10;
+				case "ArrowDown": a = 10;
 			}
-			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);
+			if (i || a) {
+				e.shiftKey && (i *= 5, a *= 5), (e.ctrlKey || e.altKey || e.metaKey) && (i /= 10, a /= 10);
+				let [s, c] = o(i, a);
 				n(t, {
-					x: c,
-					y: l
-				}, !0), r(t, {
-					type: "grid",
-					size: i || 1
-				}), e.preventDefault();
+					x: s,
+					y: c
+				}, !0), r(t), e.preventDefault();
 			}
 		}
-	}), /* @__PURE__ */ a(Y, {
+	}), /* @__PURE__ */ a(J, {
 		fill: !0,
 		onDragStart: (e) => {
 			let { ctrlKey: t, metaKey: n, event: r } = e, a = i(e);
 			if (a) {
 				r.stopPropagation();
 				let e = l();
-				h.current.items = e;
-				let i = F(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 });
+				m.current.items = e;
+				let i = I(a);
+				e.includes(i) || (t || n ? (m.current.items = [...e, i], s([i])) : (m.current.items = [i], c([i]))), Object.assign(p.current, { moving: !0 });
 			}
 		},
 		onDrag: ({ deltaX: e, deltaY: t, event: r }) => {
-			if (m.current.moving) {
+			if (p.current.moving) {
 				r.stopPropagation();
 				let { movingItems: i } = u(), [a, s] = o(e, t);
-				n(h.current.items, {
+				n(m.current.items, {
 					x: a,
 					y: s
 				}, !0), i || d({ movingItems: !0 });
 			}
 		},
 		onDragEnd: () => {
-			if (m.current.moving) {
-				let { gridSize: e = 1 } = p(), t = e || 1;
-				m.current = { moving: !1 }, r(h.current.items, {
-					type: "grid",
-					size: t
-				}), d({ movingItems: !1 });
-			}
+			p.current.moving && (p.current = { moving: !1 }, r(m.current.items), d({ movingItems: !1 }));
 		},
 		children: t
 	});
-}, Jt = (t) => {
+}, tn = (t) => {
 	let n = e.useRef({
 		hover: !1,
 		x: 0,
@@ -1968,16 +2002,16 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	}), f(t, "mouseleave", () => {
 		n.current.hover = !1;
 	}), e.useCallback(() => n.current, []);
-}, Yt = [...[
+}, nn = [...[
 	,
 	,
 	,
 	,
 	,
-].keys()].map((e) => `Digit${e + 1}`), Xt = () => {
-	let [t, n] = e.useState({}), [r, i] = R((e) => [e.getBoardState, e.updateBoardState]);
+].keys()].map((e) => `Digit${e + 1}`), rn = () => {
+	let [t, n] = e.useState({}), [r, i] = z((e) => [e.getBoardState, e.updateBoardState]);
 	return f(document, "keydown", (e) => {
-		if (!["INPUT", "TEXTAREA"].includes(e.target.tagName) && Yt.includes(e.code)) {
+		if (!["INPUT", "TEXTAREA"].includes(e.target.tagName) && nn.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,
@@ -1989,14 +2023,14 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			})) : t[a] && i(t[a]), e.preventDefault();
 		}
 	}), null;
-}, Zt = ({ children: t, moveFirst: n = !1 }) => {
-	let r = e.useRef(null), [i, o, s, c] = R((e) => [
+}, an = ({ children: t, moveFirst: n = !1 }) => {
+	let r = e.useRef(null), [i, o, s, c] = z((e) => [
 		e.config.itemExtent,
 		e.getConfiguration,
 		e.updateBoardState,
 		e.getSelection
-	]), { zoomToCenter: l, zoomToExtent: u, moveBoard: d } = B(), [p, m] = e.useState(!1), h = e.useRef({}), g = Jt(r);
-	Xt();
+	]), { zoomToCenter: l, zoomToExtent: u, moveBoard: d } = B(), [p, m] = e.useState(!1), h = e.useRef({}), g = tn(r);
+	rn();
 	let _ = e.useCallback(() => {
 		let { itemExtent: e } = o();
 		u(e);
@@ -2045,11 +2079,11 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			factor: 1 / 3,
 			to: g()
 		});
-	}), /* @__PURE__ */ a(Y, {
+	}), /* @__PURE__ */ a(J, {
 		fill: !0,
 		onPan: ({ deltaX: e, deltaY: t, target: n }) => {
-			let r = j(n, "item");
-			r && A(r, "selected") || (d(({ translateX: n, translateY: r }) => ({
+			let r = N(n, "item");
+			r && M(r, "selected") || (d(({ translateX: n, translateY: r }) => ({
 				translateX: n + e,
 				translateY: r + t
 			})), clearTimeout(h.current.pan), h.current.pan = setTimeout(() => {
@@ -2082,7 +2116,7 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			children: t
 		})
 	});
-}, Qt = K({
+}, on = G({
 	position: "absolute",
 	top: 0,
 	left: 0,
@@ -2090,8 +2124,8 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 	backgroundColor: "hsla(0, 40%, 50%, 0%)",
 	border: "2px dashed hsl(20, 55%, 40%)",
 	pointerEvents: "none"
-}), $t = () => {
-	let [t, n, r, i, o, { translateX: s, translateY: c, scale: l }] = R((e) => [
+}), sn = () => {
+	let [t, n, r, i, o, { translateX: s, translateY: c, scale: l }] = z((e) => [
 		e.selection,
 		e.getSelection,
 		e.selectionBox,
@@ -2102,13 +2136,13 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			translateY: e.boardState.translateY,
 			scale: e.boardState.scale
 		}
-	]), [d] = L((e) => [e.items]), f = e.useCallback(() => {
+	]), [d] = R((e) => [e.items]), f = e.useCallback(() => {
 		let e = n(), { boardWrapperRect: t, uid: r } = o();
 		if (e.length === 0) {
 			i(null);
 			return;
 		}
-		let a = le(e, r);
+		let a = ge(e, r);
 		if (!a) {
 			i(null);
 			return;
@@ -2141,15 +2175,15 @@ var ht = /* @__PURE__ */ S((/* @__PURE__ */ b(((e, t) => {
 			height: `${r.height}px`,
 			width: `${r.width}px`
 		},
-		className: `selection ${Qt}`
+		className: `selection ${on}`
 	});
-}, en = () => {
-	let [e] = R((e) => [e.boardState.movingItems]);
-	return e ? null : /* @__PURE__ */ a($t, {});
+}, cn = () => {
+	let [e] = z((e) => [e.boardState.movingItems]);
+	return e ? null : /* @__PURE__ */ a(sn, {});
 };
 //#endregion
 //#region node_modules/color2k/dist/index.exports.import.es.mjs
-function tn(e, t, n) {
+function ln(e, t, n) {
 	return Math.min(Math.max(e, n), t);
 }
 var Z = class extends Error {
@@ -2157,7 +2191,7 @@ var Z = class extends Error {
 		super(`Failed to parse color: "${e}"`);
 	}
 };
-function nn(e) {
+function un(e) {
 	if (typeof e != "string") throw new Z(e);
 	if (e.trim().toLowerCase() === "transparent") return [
 		0,
@@ -2166,52 +2200,52 @@ function nn(e) {
 		0
 	];
 	let t = e.trim();
-	t = fn.test(e) ? sn(e) : e;
-	let n = cn.exec(t);
+	t = yn.test(e) ? mn(e) : e;
+	let n = hn.exec(t);
 	if (n) {
 		let e = Array.from(n).slice(1);
 		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);
+	let r = gn.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 = un.exec(t);
+	let i = _n.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 = dn.exec(t);
+	let a = vn.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 Z(e);
-		return [...mn(t, n, r), Number.isNaN(i) ? 1 : i];
+		if (ln(0, 100, n) !== n || ln(0, 100, r) !== r) throw new Z(e);
+		return [...xn(t, n, r), Number.isNaN(i) ? 1 : i];
 	}
 	throw new Z(e);
 }
-function rn(e) {
+function dn(e) {
 	let t = 5381, n = e.length;
 	for (; n;) t = t * 33 ^ e.charCodeAt(--n);
 	return (t >>> 0) % 2341;
 }
-var an = (e) => parseInt(e.replace(/_/g, ""), 36), on = "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 = an(t.substring(0, 3)), r = an(t.substring(3)).toString(16), i = "";
+var fn = (e) => parseInt(e.replace(/_/g, ""), 36), pn = "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 = fn(t.substring(0, 3)), r = fn(t.substring(3)).toString(16), i = "";
 	for (let e = 0; e < 6 - r.length; e++) i += "0";
 	return e[n] = `${i}${r}`, e;
 }, {});
-function sn(e) {
-	let t = on[rn(e.toLowerCase().trim())];
+function mn(e) {
+	let t = pn[dn(e.toLowerCase().trim())];
 	if (!t) throw new Z(e);
 	return `#${t}`;
 }
-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) => {
+var Q = (e, t) => Array.from(Array(t)).map(() => e).join(""), hn = RegExp(`^#${Q("([a-f0-9])", 3)}([a-f0-9])?$`, "i"), gn = RegExp(`^#${Q("([a-f0-9]{2})", 3)}([a-f0-9]{2})?$`, "i"), _n = RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Q(",\\s*(\\d+)\\s*", 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, "i"), vn = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i, yn = /^[a-z]+$/i, bn = (e) => Math.round(e * 255), xn = (e, t, n) => {
 	let r = n / 100;
 	if (t === 0) return [
 		r,
 		r,
 		r
-	].map(pn);
+	].map(bn);
 	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;
@@ -2219,29 +2253,29 @@ var Q = (e, t) => Array.from(Array(t)).map(() => e).join(""), cn = RegExp(`^#${Q
 		s + u,
 		c + u,
 		l + u
-	].map(pn);
+	].map(bn);
 };
-function hn(e) {
+function Sn(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] = nn(e);
+	let [n, r, i] = un(e);
 	return .2126 * t(n) + .7152 * t(r) + .0722 * t(i);
 }
-function gn(e) {
-	return hn(e) > .179;
+function Cn(e) {
+	return Sn(e) > .179;
 }
 //#endregion
 //#region src/lib/board/Cursors/Cursor.jsx
-var _n = K({
+var wn = G({
 	display: "flex",
 	flexDirection: "row",
 	alignItems: "center",
 	zIndex: 210,
 	pointerEvents: "none"
-}), vn = K({
+}), Tn = G({
 	fontWeight: "bold",
 	padding: "0 0.5em",
 	borderRadius: "2px",
@@ -2252,10 +2286,10 @@ var _n = K({
 	marginTop: "1.7em",
 	whitespace: "nowrap",
 	pointerEvents: "none"
-}), yn = e.memo(({ color: e = "#666", size: t = 40, text: n }) => {
-	let r = gn(e) ? "#222" : "#EEE";
+}), En = e.memo(({ color: e = "#666", size: t = 40, text: n }) => {
+	let r = Cn(e) ? "#222" : "#EEE";
 	return /* @__PURE__ */ o("div", {
-		className: _n,
+		className: wn,
 		children: [/* @__PURE__ */ o("svg", {
 			version: "1.1",
 			xmlns: "http://www.w3.org/2000/svg",
@@ -2278,27 +2312,27 @@ var _n = K({
 				color: r,
 				backgroundColor: e
 			},
-			className: vn,
+			className: Tn,
 			children: n
 		})]
 	});
-}), bn = K({
+}), Dn = G({
 	top: 0,
 	left: 0,
 	zIndex: 210,
 	position: "fixed",
 	pointerEvents: "none"
-}), xn = ({ pos: e, ...t }) => /* @__PURE__ */ a("div", {
-	className: bn,
+}), On = ({ pos: e, ...t }) => /* @__PURE__ */ a("div", {
+	className: Dn,
 	style: { transform: `translate(${e.x - 6}px, ${e.y - 15}px)` },
-	children: /* @__PURE__ */ a(yn, { ...t })
-}), Sn = ({ children: e }) => {
-	let [t] = R((e) => [e.getConfiguration, e.boardState.scale]), { fromWrapperToBoard: n, fromBoardToWrapper: r } = B(), [i, s, c, l] = U((e) => [
+	children: /* @__PURE__ */ a(En, { ...t })
+}), kn = ({ children: e }) => {
+	let [t] = z((e) => [e.getConfiguration, e.boardState.scale]), { fromWrapperToBoard: n, fromBoardToWrapper: r } = B(), [i, s, c, l] = H((e) => [
 		e.getUser(),
 		e.getLocalUsers(),
 		e.cursors,
 		e.users
-	]), [u, d] = U((e) => [e.moveCursor, e.removeCursor]), { boardWrapperRect: f } = t(), p = ({ clientX: e, clientY: t }) => {
+	]), [u, d] = H((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,
@@ -2315,15 +2349,15 @@ var _n = K({
 				x: n + f.left,
 				y: i + f.top
 			};
-			return N(o, f) ? /* @__PURE__ */ a(xn, {
+			return pe(o, f) ? /* @__PURE__ */ a(On, {
 				pos: o,
 				text: l[e].name,
 				color: l[e].color
 			}, e) : null;
 		})]
 	});
-}, Cn = /[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:px|%)/gi;
-function wn(e, t = ",") {
+}, An = /[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:px|%)/gi;
+function jn(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;
@@ -2337,10 +2371,10 @@ function wn(e, t = ",") {
 	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);
+	return [...e.replace(/\s/g, "").matchAll(An)].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;
+function Mn(e, t, n, r) {
+	let [i, a = "auto"] = jn(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);
@@ -2349,13 +2383,13 @@ function Tn(e, t, n, r) {
 	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) {
+function Nn(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);
+	].map((e) => fe(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] = P([o, s], n);
 	return {
 		left: o,
 		top: s,
@@ -2365,9 +2399,9 @@ function En(e, t, n) {
 		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);
+var Pn = (e, t, n) => ((e - t) % n + n) % n;
+function Fn(e, t, n, r) {
+	let i = Nn(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] = P([u, d], n);
 	return {
 		tiles: Array.from({ length: l - c + 1 }, (e, t) => {
 			let n = c + t;
@@ -2389,18 +2423,18 @@ function On(e, t, n, r) {
 }
 //#endregion
 //#region src/lib/board/WorldBackground.jsx
-var kn = {
+var In = {
 	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({
+function Ln({ style: t, tileSizeOverride: n }) {
+	let [r, i] = z((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");
+		let e = getComputedStyle(l.current), t = (t) => jn(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) => ({
@@ -2434,19 +2468,19 @@ function An({ style: t, tileSizeOverride: n }) {
 			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);
+	let m = Fn(s, c, r, n), h = u.layers.map((e) => {
+		let [t, n] = Mn(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`
+			position: (e, s) => `${r && t ? Pn(a, e, t) : a - e}px ${i && n ? Pn(o, s, n) : o - s}px`
 		};
 	});
 	return /* @__PURE__ */ o("div", {
 		className: "world-background",
 		"aria-hidden": "true",
 		style: {
-			...kn,
+			...In,
 			overflow: "hidden",
 			backgroundColor: u.color
 		},
@@ -2489,12 +2523,12 @@ function An({ style: t, tileSizeOverride: n }) {
 }
 //#endregion
 //#region src/lib/board/Board.jsx
-var jn = ({ children: e }) => e, Mn = {}, Nn = {
+var Rn = ({ children: e }) => e, zn = {}, Bn = {
 	overflow: "hidden",
 	position: "absolute",
 	inset: 0
-}, 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) => [
+}, Vn = ({ moveFirst: t = !0, style: n, wrapperStyle: r, itemTemplates: i = zn, boardSize: s = Ae, backgroundTileSize: c, children: l, showResizeHandle: u = !1, Wrapper: d = Rn }) => {
+	let f = e.useRef(null), [m, h] = z((e) => [e.config.uid, e.updateConfiguration]), [g, _, v, y] = z((e) => [
 		e.boardState.translateX,
 		e.boardState.translateY,
 		e.boardState.scale,
@@ -2536,8 +2570,8 @@ var jn = ({ children: e }) => e, Mn = {}, Nn = {
 	}, [h, b]), p(f, () => {
 		f.current && h({ boardWrapperRect: f.current.getBoundingClientRect() });
 	});
-	let S = K({
-		...Nn,
+	let S = G({
+		...Bn,
 		...r
 	});
 	return /* @__PURE__ */ o("div", {
@@ -2545,15 +2579,15 @@ var jn = ({ children: e }) => e, Mn = {}, Nn = {
 		id: m,
 		className: `sync-board ${S}`,
 		children: [
-			/* @__PURE__ */ a(An, {
+			/* @__PURE__ */ a(Ln, {
 				style: n,
 				tileSizeOverride: c
 			}),
-			/* @__PURE__ */ a(Sn, { children: /* @__PURE__ */ a(Kt, {
+			/* @__PURE__ */ a(kn, { children: /* @__PURE__ */ a($t, {
 				moveFirst: t,
-				children: /* @__PURE__ */ a(Zt, {
+				children: /* @__PURE__ */ a(an, {
 					moveFirst: t,
-					children: /* @__PURE__ */ a(qt, {
+					children: /* @__PURE__ */ a(en, {
 						moveFirst: t,
 						children: /* @__PURE__ */ a(d, { children: /* @__PURE__ */ o("div", {
 							onContextMenu: (e) => {
@@ -2561,7 +2595,7 @@ var jn = ({ children: e }) => e, Mn = {}, Nn = {
 							},
 							style: x,
 							className: `board-pane${v < .5 ? " board-pane__far" : ""}`,
-							children: [/* @__PURE__ */ a(Ut, {}), /* @__PURE__ */ a("div", {
+							children: [/* @__PURE__ */ a(Xt, {}), /* @__PURE__ */ a("div", {
 								style: { pointerEvents: "auto" },
 								children: l
 							})]
@@ -2569,14 +2603,79 @@ var jn = ({ children: e }) => e, Mn = {}, Nn = {
 					})
 				})
 			}) }),
-			/* @__PURE__ */ a(en, {})
+			/* @__PURE__ */ a(cn, {})
 		]
 	});
+}, Hn = ({ grid: t, item: n, uid: r }) => {
+	let i = e.useId(), s = F(r, n.id), [c, l] = e.useState(null);
+	if (e.useLayoutEffect(() => {
+		if (!s) return;
+		let e = () => l(se(s));
+		e();
+		let t = new ResizeObserver(e);
+		return t.observe(s), () => t.disconnect();
+	}, [s]), !c) return null;
+	let { type: u, size: d, offset: f, color: p, opacity: m } = t, { width: h, height: g, centers: _ } = ce(t), v = Math.max(360, Math.min(d * 12, 960)), y = n.x + c.width / 2 - v / 2, b = n.y + c.height / 2 - v / 2, x = [];
+	if (u !== "grid") {
+		let e = u === "hexH" ? Math.PI / 6 : 0;
+		for (let t = -1; t <= 1; t++) for (let n = -1; n <= 1; n++) _.forEach(([r, i], o) => {
+			let s = Array.from({ length: 6 }, (a, o) => {
+				let s = e + o * Math.PI / 3;
+				return `${n * h + r + d * Math.cos(s)},${t * g + i + d * Math.sin(s)}`;
+			}).join(" ");
+			x.push(/* @__PURE__ */ a("polygon", { points: s }, `${t}:${n}:${o}`));
+		});
+	}
+	return /* @__PURE__ */ o("svg", {
+		"data-grid-item": n.id,
+		"data-grid-type": u,
+		width: v,
+		height: v,
+		style: {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			transform: `translate3d(${y}px, ${b}px, 0)`,
+			willChange: "transform",
+			pointerEvents: "none",
+			zIndex: n.moving ? ((n.layer ?? 0) + 4) * 10 + 101 : 90,
+			opacity: m,
+			maskImage: "radial-gradient(circle, #000 35%, transparent 72%)"
+		},
+		children: [/* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a("pattern", {
+			id: i,
+			patternUnits: "userSpaceOnUse",
+			width: h,
+			height: g,
+			x: f.x - y,
+			y: f.y - b,
+			children: /* @__PURE__ */ a("g", {
+				fill: "none",
+				stroke: p,
+				strokeWidth: "1",
+				children: u === "grid" ? /* @__PURE__ */ a("path", { d: `M0 ${g}V0H${h}` }) : x
+			})
+		}) }), /* @__PURE__ */ a("rect", {
+			width: "100%",
+			height: "100%",
+			fill: `url(#${i})`
+		})]
+	});
+}, Un = ({ preview: e = !1, enabled: t = !0 }) => {
+	let n = Oe(), r = Le(), [i] = tt(), { movingItems: o } = nt(), s = z((e) => e.config.uid), c = o || n.some((e) => e.moving);
+	return !t || !e && !c ? null : n.filter((e) => r.includes(e.id)).map((t) => {
+		let n = j(t.grid), r = oe(i.grid, t.grid);
+		return !r || !(e && n) && (!c || !r.show) ? null : /* @__PURE__ */ a(Hn, {
+			grid: r,
+			item: t,
+			uid: s
+		}, t.id);
+	});
 };
 //#endregion
 //#region src/lib/index.js
-mt(e.createElement);
+St(e.createElement);
 //#endregion
-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 };
+export { Vn as Board, Un as BoardGridOverlay, ft as BoardWrapper, pt as RoomWrapper, Ke as useAvailableActions, tt as useBoardConfig, B as useBoardPosition, nt as useBoardState, ke as useDebouncedItems, Re as useGetSelectedItems, V as useItemActions, He as useItemInteraction, Oe as useItems, ut as useMessage, Le as useSelectedItems, qe as useSelectionBox, rt as useSessionInfo, et as useUsers, k as useWire };
 
 //# sourceMappingURL=react-sync-board.js.map