@harmonics/lattice-ui 0.6.0 → 0.7.0

package/dist/board.js

@@ -1,9 +1,9 @@
-import { A as e, C as t, D as n, M as r, N as i, O as a, S as o, T as s, _ as c, b as l, c as u, d, f, g as p, h as m, j as h, k as g, l as _, m as v, o as y, p as b, t as x, u as S, v as C, x as w, y as T } from "./woods-FI5aDpfQ.js";
+import { A as e, C as t, D as n, E as r, O as i, S as a, T as o, _ as s, b as c, c as l, d as u, f as d, g as f, h as p, j as m, k as h, l as g, m as _, o as v, p as y, t as b, u as x, v as S, w as C, x as w, y as T } from "./woods-C8W11GkD.js";
 import { A as E, C as D, D as O, E as k, F as A, I as j, L as M, M as ee, P as N, R as P, S as F, T as I, _ as L, a as R, b as te, c as z, g as ne, h as re, i as ie, j as B, k as V, m as H, n as ae, p as oe, r as se, s as U, v as W, w as ce, x as le, y as G } from "./hexes-DwdbCYSF.js";
 //#region src/board.ts
 var { half: ue } = M, de = 5, K = (e) => `${e.q},${e.r}`, fe = /* @__PURE__ */ new Set();
 function pe(e) {
-	let t = e.hooks ?? {}, n = () => e.fixed?.() ?? fe, r = 4, a = () => (r = (r + 1) % de, r), [o, s] = h(e.initial), c = () => o().filter((e) => !n().has(e.id)), [l, u] = h(), [d, f] = h(), [p, m] = h(), _ = (e) => o().find((t) => t.id === e), v = (e, t) => o().flatMap((n) => n.id === e ? t : [n]), y = (e, r, i, a) => (s(r), t.change?.(r.filter((e) => !n().has(e.id)), i, a) !== !1 || (s(e), !1)), b = g(() => {
+	let t = e.hooks ?? {}, r = () => e.fixed?.() ?? fe, i = 4, a = () => (i = (i + 1) % de, i), [o, s] = h(e.initial), c = () => o().filter((e) => !r().has(e.id)), [l, u] = h(), [d, f] = h(), [p, g] = h(), _ = (e) => o().find((t) => t.id === e), v = (e, t) => o().flatMap((n) => n.id === e ? t : [n]), y = (e, n, i, a) => (s(n), t.change?.(n.filter((e) => !r().has(e.id)), i, a) !== !1 || (s(e), !1)), b = n(() => {
 		let t = l();
 		if (!t) return;
 		let n = t.now.x - t.start.x, r = t.now.y - t.start.y, i = W(t.from, n, r, t.held);
@@ -12,60 +12,60 @@ function pe(e) {
 			x: n,
 			y: r
 		} : i;
-	}), x = g(() => {
+	}), x = n(() => {
 		let e = l(), t = b();
 		return e && t ? G(e.from, t.step) : void 0;
-	}), S = g(() => new Set((e.tray?.() ?? []).map(K))), C = () => {
+	}), S = n(() => new Set((e.tray?.() ?? []).map(K))), C = () => {
 		let e = l();
 		return e ? S().has(K(ne(e.now.x, e.now.y))) : !1;
-	}, w = g(() => {
+	}, w = n(() => {
 		let t = x();
 		return t ? se(t, o(), e.area(), e.clear()) : /* @__PURE__ */ new Set();
 	}), T = (t) => oe(t, o(), e.area(), e.clear()), D = () => {
 		let e = x();
 		return e ? T(e) : !1;
-	}, k = g(() => [...o()].sort((e, t) => e.id === l()?.id ? 1 : t.id === l()?.id ? -1 : ie(e) - ie(t)).map((e) => e.id)), M = g(() => {
+	}, k = n(() => [...o()].sort((e, t) => e.id === l()?.id ? 1 : t.id === l()?.id ? -1 : ie(e) - ie(t)).map((e) => e.id)), M = n(() => {
 		let e = p(), t = e && !l() ? _(e) : void 0;
 		return t ? c().filter((e) => e.id !== t.id && ee(t, e)).flatMap((e) => O(t, e)) : [];
 	}), N, P = (e) => {
 		f(e), clearTimeout(N), N = setTimeout(() => f(void 0), 300);
 	}, F;
-	i(() => {
+	m(() => {
 		clearTimeout(N), clearTimeout(F);
 	});
-	let I = (e, r) => {
+	let I = (e, n) => {
 		let i = _(e);
-		if (!i || n().has(e)) return;
-		let a = A(i, r), c = l();
+		if (!i || r().has(e)) return;
+		let a = A(i, n), c = l();
 		if (c?.id === e) u({
 			...c,
-			from: A(c.from, r)
+			from: A(c.from, n)
 		}), s(v(e, [a]));
 		else if (!T(a)) {
 			P(e);
 			return;
 		} else if (!y(o(), v(e, [a]), "turn", e)) return;
-		t.turned?.(e, r);
+		t.turned?.(e, n);
 	}, L = (e) => {
-		let r = _(e);
-		if (!r || n().has(e)) return;
-		let { piece: i, absorbed: a } = re(r, c());
+		let n = _(e);
+		if (!n || r().has(e)) return;
+		let { piece: i, absorbed: a } = re(n, c());
 		if (a.length === 0) {
 			P(e);
 			return;
 		}
 		let s = o().filter((e) => !a.includes(e.id)).map((t) => t.id === e ? i : t);
-		y(o(), s, "glue", e) && (m(e), t.focus?.(e));
-	}, z = (r) => {
-		let i = _(r);
-		if (!i || n().has(r) || i.parts.length < 2) {
-			P(r);
+		y(o(), s, "glue", e) && (g(e), t.focus?.(e));
+	}, z = (n) => {
+		let i = _(n);
+		if (!i || r().has(n) || i.parts.length < 2) {
+			P(n);
 			return;
 		}
 		let a = ae(i, e.id), s = a[0];
-		y(o(), v(r, a), "break", r) && (m(s.id), t.focus?.(s.id));
+		y(o(), v(n, a), "break", n) && (g(s.id), t.focus?.(s.id));
 	}, V = (e) => {
-		!n().has(e) && _(e) && y(o(), v(e, []), "remove", e) && m(void 0);
+		!r().has(e) && _(e) && y(o(), v(e, []), "remove", e) && g(void 0);
 	}, H = (e, t, n, r) => {
 		let i = r ?? o();
 		u({
@@ -80,7 +80,7 @@ function pe(e) {
 			restore: r,
 			before: i,
 			action: n
-		}), m(void 0);
+		}), g(void 0);
 	};
 	return {
 		pieces: o,
@@ -97,14 +97,14 @@ function pe(e) {
 		glueSides: M,
 		refused: d,
 		touched: p,
-		touch: m,
-		lift: (t, r, i) => {
+		touch: g,
+		lift: (t, n, i) => {
 			let a = _(t);
-			if (!(!a || n().has(t) || l())) {
+			if (!(!a || r().has(t) || l())) {
 				if (i !== void 0 && a.parts.length > 1) {
-					let n = o(), [c, ...l] = ce(a, i, e.id);
-					s(v(t, [c, ...l])), H(c, r, "pull", n);
-				} else H(a, r, "move");
+					let r = o(), [c, ...l] = ce(a, i, e.id);
+					s(v(t, [c, ...l])), H(c, n, "pull", r);
+				} else H(a, n, "move");
 			}
 		},
 		fromTray: (t, n) => {
@@ -123,7 +123,7 @@ function pe(e) {
 				}), l = j(n, c.x + ue, c.y + 44, i, e.id());
 				if (T(l)) {
 					if (!y(o(), [...o(), l], "add", l.id)) return;
-					m(l.id), t.focus?.(l.id);
+					g(l.id), t.focus?.(l.id);
 					return;
 				}
 			}
@@ -149,13 +149,13 @@ function pe(e) {
 				y: n.now.y - n.start.y
 			}, f = n.before;
 			if (u(void 0), i) {
-				n.action === "add" && n.restore ? s(n.restore) : y(f, v(n.id, []), "remove", n.id) && m(void 0);
+				n.action === "add" && n.restore ? s(n.restore) : y(f, v(n.id, []), "remove", n.id) && g(void 0);
 				return;
 			}
 			let p = r && (a ? r : te(r, o(), e.area(), e.clear()));
 			if (p) {
 				if (!y(f, v(n.id, [p]), n.action, n.id)) return;
-				m(n.id);
+				g(n.id);
 				let e = B({
 					i: p.pivot.i - n.from.pivot.i,
 					j: p.pivot.j - n.from.pivot.j
@@ -171,22 +171,22 @@ function pe(e) {
 				return;
 			}
 			s(v(n.id, [n.from]));
-			let h = t.slid?.(n.id, d) ?? 0;
-			F = setTimeout(() => P(n.id), h);
+			let m = t.slid?.(n.id, d) ?? 0;
+			F = setTimeout(() => P(n.id), m);
 		},
-		key: (e, r) => {
+		key: (e, n) => {
 			let i = _(e);
-			if (!i || n().has(e)) return !1;
-			let a = r.key;
-			if (a === "r" || a === "R") return l()?.id !== e && (I(e, r.shiftKey ? -1 : 1), t.focus?.(e)), !0;
-			if (a === "g" || a === "G") return r.shiftKey ? z(e) : L(e), !0;
+			if (!i || r().has(e)) return !1;
+			let a = n.key;
+			if (a === "r" || a === "R") return l()?.id !== e && (I(e, n.shiftKey ? -1 : 1), t.focus?.(e)), !0;
+			if (a === "g" || a === "G") return n.shiftKey ? z(e) : L(e), !0;
 			if (a === "Delete" || a === "Backspace") return V(e), !0;
 			let s = E(i, a);
 			if (!s) return !1;
 			let c = G(i, s);
 			if (!T(c)) return P(e), !0;
 			if (!y(o(), v(e, [c]), "move", e)) return !0;
-			m(e);
+			g(e);
 			let u = B(s);
 			return t.landed?.(e, {
 				x: -u.x,
@@ -205,18 +205,18 @@ function pe(e) {
 }
 function me(e, t) {
 	if (typeof window > "u") return;
-	let n = (n) => e.follow(t(n.clientX, n.clientY)), r = () => e.drop(), o = (t) => {
+	let n = (n) => e.follow(t(n.clientX, n.clientY)), i = () => e.drop(), a = (t) => {
 		e.carryKey(t) && t.preventDefault();
 	};
-	a(() => {
-		e.carried() && (window.addEventListener("pointermove", n), window.addEventListener("pointerup", r), window.addEventListener("pointercancel", r), window.addEventListener("keydown", o), i(() => {
-			window.removeEventListener("pointermove", n), window.removeEventListener("pointerup", r), window.removeEventListener("pointercancel", r), window.removeEventListener("keydown", o);
+	r(() => {
+		e.carried() && (window.addEventListener("pointermove", n), window.addEventListener("pointerup", i), window.addEventListener("pointercancel", i), window.addEventListener("keydown", a), m(() => {
+			window.removeEventListener("pointermove", n), window.removeEventListener("pointerup", i), window.removeEventListener("pointercancel", i), window.removeEventListener("keydown", a);
 		}));
 	});
 }
 //#endregion
 //#region src/pieceDrawing.tsx
-var he = /*#__PURE__*/ l("<svg><path class=shade></svg>", !1, !0, !1), ge = /*#__PURE__*/ l("<svg><path class=shadow></svg>", !1, !0, !1), q = /*#__PURE__*/ l("<svg><path class=top></svg>", !1, !0, !1), _e = /*#__PURE__*/ l("<svg><g><rect width=1 height=1></svg>", !1, !0, !1), ve = /*#__PURE__*/ l("<svg><g class=part></svg>", !1, !0, !1), J = /*#__PURE__*/ l("<svg><g></svg>", !1, !0, !1), ye = /*#__PURE__*/ l("<svg><line></svg>", !1, !0, !1), be = /*#__PURE__*/ l("<svg><g class=piece role=button tabindex=0><g><g><g></svg>", !1, !0, !1), xe = /*#__PURE__*/ l("<svg><g class=landing></svg>", !1, !0, !1), Y = /*#__PURE__*/ l("<svg><path></svg>", !1, !0, !1), Se = /*#__PURE__*/ l("<svg><g class=tray></svg>", !1, !0, !1), Ce = /*#__PURE__*/ l("<svg><g class=source role=button tabindex=0><g class=tray-cell></g><g class=tray-unit></svg>", !1, !0, !1), { width: X, half: Z } = M;
+var he = /*#__PURE__*/ c("<svg><path class=shade></svg>", !1, !0, !1), ge = /*#__PURE__*/ c("<svg><path class=shadow></svg>", !1, !0, !1), q = /*#__PURE__*/ c("<svg><path class=top></svg>", !1, !0, !1), _e = /*#__PURE__*/ c("<svg><g><rect width=1 height=1></svg>", !1, !0, !1), ve = /*#__PURE__*/ c("<svg><g class=part></svg>", !1, !0, !1), J = /*#__PURE__*/ c("<svg><g></svg>", !1, !0, !1), ye = /*#__PURE__*/ c("<svg><line></svg>", !1, !0, !1), be = /*#__PURE__*/ c("<svg><g class=piece role=button tabindex=0><g><g><g></svg>", !1, !0, !1), xe = /*#__PURE__*/ c("<svg><g class=landing></svg>", !1, !0, !1), Y = /*#__PURE__*/ c("<svg><path></svg>", !1, !0, !1), Se = /*#__PURE__*/ c("<svg><g class=tray></svg>", !1, !0, !1), Ce = /*#__PURE__*/ c("<svg><g class=source role=button tabindex=0><g class=tray-cell></g><g class=tray-unit></svg>", !1, !0, !1), { width: X, half: Z } = M;
 function we() {
 	return [
 		(() => {
@@ -233,40 +233,40 @@ function we() {
 		})()
 	];
 }
-function Te(t) {
-	let n = z(t.tri).map(U), r = n[2], i = n[1];
+function Te(e) {
+	let t = z(e.tri).map(U), n = t[2], r = t[1];
 	return [(() => {
-		var n = _e(), a = n.firstChild;
-		return e((e) => {
-			var o = `matrix(${i.x - r.x} ${i.y - r.y} 0 -1 ${r.x} ${r.y})`, s = `side ${t.tri.k === 0 ? "shadow" : "shade"}`;
-			return o !== e.e && T(n, "transform", e.e = o), s !== e.t && T(a, "class", e.t = s), e;
+		var t = _e(), a = t.firstChild;
+		return i((i) => {
+			var o = `matrix(${r.x - n.x} ${r.y - n.y} 0 -1 ${n.x} ${n.y})`, s = `side ${e.tri.k === 0 ? "shadow" : "shade"}`;
+			return o !== i.e && T(t, "transform", i.e = o), s !== i.t && T(a, "class", i.t = s), i;
 		}, {
 			e: void 0,
 			t: void 0
-		}), n;
+		}), t;
 	})(), (() => {
-		var t = q();
-		return e(() => T(t, "d", m(n))), t;
+		var e = q();
+		return i(() => T(e, "d", p(t))), e;
 	})()];
 }
-function Ee(t) {
+function Ee(e) {
 	return (() => {
-		var r = ve();
-		return c(r, (() => {
-			var r = C(() => t.part.kind === "cell");
-			return () => r() ? (() => {
-				var r = J();
-				return c(r, n(we, {})), e(() => T(r, "transform", `translate(${R(t.part.at).x} ${R(t.part.at).y})`)), r;
-			})() : n(Te, { get tri() {
-				return t.part.at;
+		var t = ve();
+		return s(t, (() => {
+			var t = S(() => e.part.kind === "cell");
+			return () => t() ? (() => {
+				var t = J();
+				return s(t, o(we, {})), i(() => T(t, "transform", `translate(${R(e.part.at).x} ${R(e.part.at).y})`)), t;
+			})() : o(Te, { get tri() {
+				return e.part.at;
 			} });
-		})()), e((e) => {
-			var n = t.part.tone, i = t.index;
-			return n !== e.e && T(r, "data-tone", e.e = n), i !== e.t && T(r, "data-part", e.t = i), e;
+		})()), i((n) => {
+			var r = e.part.tone, i = e.index;
+			return r !== n.e && T(t, "data-tone", n.e = r), i !== n.t && T(t, "data-part", n.t = i), n;
 		}, {
 			e: void 0,
 			t: void 0
-		}), r;
+		}), t;
 	})();
 }
 function De(e) {
@@ -276,26 +276,26 @@ function De(e) {
 		index: t
 	})).sort((e, r) => t(e.part) - t(r.part) || n(e.part) - n(r.part));
 }
-function Q(t) {
+function Q(e) {
 	return (() => {
-		var r = J();
-		return c(r, n(o, {
+		var t = J();
+		return s(t, o(a, {
 			get each() {
-				return t.sides;
+				return e.sides;
 			},
-			children: ([t, n]) => (() => {
-				var r = ye();
-				return e((e) => {
-					var i = t.x, a = t.y, o = n.x, s = n.y;
-					return i !== e.e && T(r, "x1", e.e = i), a !== e.t && T(r, "y1", e.t = a), o !== e.a && T(r, "x2", e.a = o), s !== e.o && T(r, "y2", e.o = s), e;
+			children: ([e, t]) => (() => {
+				var n = ye();
+				return i((r) => {
+					var i = e.x, a = e.y, o = t.x, s = t.y;
+					return i !== r.e && T(n, "x1", r.e = i), a !== r.t && T(n, "y1", r.t = a), o !== r.a && T(n, "x2", r.a = o), s !== r.o && T(n, "y2", r.o = s), r;
 				}, {
 					e: void 0,
 					t: void 0,
 					a: void 0,
 					o: void 0
-				}), r;
+				}), n;
 			})()
-		})), e(() => T(r, "class", t.class)), r;
+		})), i(() => T(t, "class", e.class)), t;
 	})();
 }
 function Oe(e, t) {
@@ -341,99 +341,99 @@ function Oe(e, t) {
 	};
 }
 var ke = (e) => `A piece of ${e.parts.length} ${e.parts.length === 1 ? "part" : "parts"}. Drag it or use the arrow keys to move it; R turns it, G glues it to what it touches, Shift+G breaks it apart, Delete throws it away.`;
-function Ae(t) {
-	let r = t.board, i = () => r.pieceById(t.id);
+function Ae(e) {
+	let t = e.board, n = () => t.pieceById(e.id);
 	return (() => {
-		var s = be(), l = s.firstChild, u = l.firstChild, d = u.firstChild;
-		return p(s, "keydown", (e) => t.motion.keyed(() => {
-			r.key(t.id, e) && e.preventDefault();
-		})), p(s, "focus", () => r.touch(t.id)), p(s, "dblclick", () => r.turn(t.id, 1)), p(s, "pointerleave", () => t.onPointerLeave?.()), p(s, "pointerenter", () => t.onPointerEnter?.()), p(s, "pointerdown", (e) => {
-			if (e.button !== 0) return;
-			e.preventDefault();
-			let n = e.target.closest("[data-part]"), i = e.altKey && n ? Number(n.getAttribute("data-part")) : void 0;
-			r.lift(t.id, t.toWorld(e.clientX, e.clientY), i);
-		}), w((e) => {
-			t.motion.elements.set(t.id, e), a(() => {
-				let n = r.carried()?.id === t.id ? r.magnet() : void 0;
-				e.style.setProperty("--tx", `${n?.x ?? 0}px`), e.style.setProperty("--ty", `${n?.y ?? 0}px`), e.style.setProperty("--pull", `${t.calm() ? 0 : n?.pull ?? 0}`);
+		var c = be(), l = c.firstChild, u = l.firstChild, d = u.firstChild;
+		return f(c, "keydown", (n) => e.motion.keyed(() => {
+			t.key(e.id, n) && n.preventDefault();
+		})), f(c, "focus", () => t.touch(e.id)), f(c, "dblclick", () => t.turn(e.id, 1)), f(c, "pointerleave", () => e.onPointerLeave?.()), f(c, "pointerenter", () => e.onPointerEnter?.()), f(c, "pointerdown", (n) => {
+			if (n.button !== 0) return;
+			n.preventDefault();
+			let r = n.target.closest("[data-part]"), i = n.altKey && r ? Number(r.getAttribute("data-part")) : void 0;
+			t.lift(e.id, e.toWorld(n.clientX, n.clientY), i);
+		}), w((n) => {
+			e.motion.elements.set(e.id, n), r(() => {
+				let r = t.carried()?.id === e.id ? t.magnet() : void 0;
+				n.style.setProperty("--tx", `${r?.x ?? 0}px`), n.style.setProperty("--ty", `${r?.y ?? 0}px`), n.style.setProperty("--pull", `${e.calm() ? 0 : r?.pull ?? 0}`);
 			});
-		}, s), w((e) => {
-			e.style.transformOrigin = "0 0", e.style.transformBox = "view-box", t.motion.turners.set(t.id, e);
-		}, u), c(d, n(o, {
+		}, c), w((t) => {
+			t.style.transformOrigin = "0 0", t.style.transformBox = "view-box", e.motion.turners.set(e.id, t);
+		}, u), s(d, o(a, {
 			get each() {
-				return De(i());
+				return De(n());
 			},
-			children: ({ part: e, index: t }) => n(Ee, {
+			children: ({ part: e, index: t }) => o(Ee, {
 				part: e,
 				index: t
 			})
-		}), null), c(d, n(Q, {
+		}), null), s(d, o(Q, {
 			get sides() {
-				return k(i());
+				return k(n());
 			},
 			class: "seams"
-		}), null), c(d, n(Q, {
+		}), null), s(d, o(Q, {
 			get sides() {
-				return le(i());
+				return le(n());
 			},
 			class: "outline"
-		}), null), e((e) => {
-			var n = r.carried()?.id === t.id, a = r.refused() === t.id, o = ke(i()), c = `translate(${D(i()).x} ${D(i()).y})`, u = `translate(${-D(i()).x} ${-D(i()).y})`;
-			return n !== e.e && s.classList.toggle("carried", e.e = n), a !== e.t && s.classList.toggle("refused", e.t = a), o !== e.a && T(s, "aria-label", e.a = o), c !== e.o && T(l, "transform", e.o = c), u !== e.i && T(d, "transform", e.i = u), e;
+		}), null), i((r) => {
+			var i = t.carried()?.id === e.id, a = t.refused() === e.id, o = ke(n()), s = `translate(${D(n()).x} ${D(n()).y})`, u = `translate(${-D(n()).x} ${-D(n()).y})`;
+			return i !== r.e && c.classList.toggle("carried", r.e = i), a !== r.t && c.classList.toggle("refused", r.t = a), o !== r.a && T(c, "aria-label", r.a = o), s !== r.o && T(l, "transform", r.o = s), u !== r.i && T(d, "transform", r.i = u), r;
 		}, {
 			e: void 0,
 			t: void 0,
 			a: void 0,
 			o: void 0,
 			i: void 0
-		}), s;
+		}), c;
 	})();
 }
-function je(t) {
-	let r = t.board;
-	return n(s, {
+function je(e) {
+	let t = e.board;
+	return o(C, {
 		get when() {
-			return C(() => !!r.target())() && !r.overTray();
+			return S(() => !!t.target())() && !t.overTray();
 		},
 		get children() {
-			var t = xe();
-			return w((e) => a(() => e.style.setProperty("--pull", `${r.magnet()?.pull ?? 0}`)), t), c(t, n(o, {
+			var e = xe();
+			return w((e) => r(() => e.style.setProperty("--pull", `${t.magnet()?.pull ?? 0}`)), e), s(e, o(a, {
 				get each() {
-					return r.target()?.parts ?? [];
+					return t.target()?.parts ?? [];
 				},
-				children: (t, n) => {
-					let i = () => r.blocked().has(n());
-					return t.kind === "cell" ? (() => {
-						var n = Y();
-						return T(n, "d", P), e((e) => {
-							var r = !!i(), a = `translate(${R(t.at).x} ${R(t.at).y})`;
-							return r !== e.e && n.classList.toggle("blocked", e.e = r), a !== e.t && T(n, "transform", e.t = a), e;
+				children: (e, n) => {
+					let r = () => t.blocked().has(n());
+					return e.kind === "cell" ? (() => {
+						var t = Y();
+						return T(t, "d", P), i((n) => {
+							var i = !!r(), a = `translate(${R(e.at).x} ${R(e.at).y})`;
+							return i !== n.e && t.classList.toggle("blocked", n.e = i), a !== n.t && T(t, "transform", n.t = a), n;
 						}, {
 							e: void 0,
 							t: void 0
-						}), n;
+						}), t;
 					})() : (() => {
-						var n = Y();
-						return e((e) => {
-							var r = !!i(), a = m(z(t.at).map(U));
-							return r !== e.e && n.classList.toggle("blocked", e.e = r), a !== e.t && T(n, "d", e.t = a), e;
+						var t = Y();
+						return i((n) => {
+							var i = !!r(), a = p(z(e.at).map(U));
+							return i !== n.e && t.classList.toggle("blocked", n.e = i), a !== n.t && T(t, "d", n.t = a), n;
 						}, {
 							e: void 0,
 							t: void 0
-						}), n;
+						}), t;
 					})();
 				}
-			})), e(() => t.classList.toggle("held", r.magnet()?.held !== void 0)), t;
+			})), i(() => e.classList.toggle("held", t.magnet()?.held !== void 0)), e;
 		}
 	});
 }
 function Me(e) {
-	return n(s, {
+	return o(C, {
 		get when() {
 			return e.board.glueSides().length > 0;
 		},
 		get children() {
-			return n(Q, {
+			return o(Q, {
 				get sides() {
 					return e.board.glueSides();
 				},
@@ -442,38 +442,38 @@ function Me(e) {
 		}
 	});
 }
-function Ne(r) {
+function Ne(e) {
 	return (() => {
-		var i = Se();
-		return c(i, n(t, {
+		var n = Se();
+		return s(n, o(t, {
 			get each() {
-				return r.cells;
+				return e.cells;
 			},
-			children: (t, i) => {
-				let a = () => R(t()), s = i === 0 ? "cell" : "tri", l = () => j(s, a().x + Z, a().y + 44, 4, "");
+			children: (t, n) => {
+				let r = () => R(t()), c = n === 0 ? "cell" : "tri", l = () => j(c, r().x + Z, r().y + 44, 4, "");
 				return (() => {
-					var t = Ce(), i = t.firstChild, u = i.nextSibling;
-					return p(t, "keydown", (e) => {
-						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r.motion.keyed(() => r.board.placeFromTray(s)));
-					}), p(t, "pointerdown", (e) => {
-						e.button === 0 && (e.preventDefault(), r.board.fromTray(s, r.toWorld(e.clientX, e.clientY)));
-					}), T(t, "aria-label", s === "cell" ? "A new cell" : "A new triangle"), c(i, n(we, {})), T(u, "transform", s === "tri" ? `translate(${-Z / 2} 22)` : void 0), c(u, n(o, {
+					var t = Ce(), n = t.firstChild, u = n.nextSibling;
+					return f(t, "keydown", (t) => {
+						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), e.motion.keyed(() => e.board.placeFromTray(c)));
+					}), f(t, "pointerdown", (t) => {
+						t.button === 0 && (t.preventDefault(), e.board.fromTray(c, e.toWorld(t.clientX, t.clientY)));
+					}), T(t, "aria-label", c === "cell" ? "A new cell" : "A new triangle"), s(n, o(we, {})), T(u, "transform", c === "tri" ? `translate(${-Z / 2} 22)` : void 0), s(u, o(a, {
 						get each() {
 							return l().parts;
 						},
-						children: (e) => n(Ee, {
+						children: (e) => o(Ee, {
 							part: e,
 							index: 0
 						})
-					})), e(() => T(i, "transform", `translate(${a().x} ${a().y})`)), t;
+					})), i(() => T(n, "transform", `translate(${r().x} ${r().y})`)), t;
 				})();
 			}
-		})), e(() => i.classList.toggle("discard", !!r.board.overTray())), i;
+		})), i(() => n.classList.toggle("discard", !!e.board.overTray())), n;
 	})();
 }
 //#endregion
 //#region src/elements/board.css?inline
-var Pe = ":host{min-height:var(--space-tree-4);display:block;position:relative}.board{width:100%;height:100%}.board .fixed{pointer-events:none}", Fe = ".pieces .piece{--lift:var(--space-tree-2);--lift-n:8;transform:translate(var(--tx), var(--ty));cursor:grab;touch-action:none}.pieces .piece .top{fill:color-mix(in srgb, var(--wood) 28%, var(--sky));stroke:color-mix(in srgb, var(--wood) 55%, var(--sky));stroke-width:var(--tree-rule-width);transform:translateY(calc(-1 * var(--lift)));transition:transform .16s ease-out}.pieces .piece .side{transform:scaleY(var(--lift-n));transform-box:fill-box;transform-origin:0 0;transition:transform .16s ease-out}.pieces .piece .shade{fill:color-mix(in srgb, var(--wood) 70%, var(--sky))}.pieces .piece .shadow{fill:var(--wood)}.pieces .piece:hover{--lift:var(--space-tree-3);--lift-n:12}.pieces .piece.carried{--lift:calc(var(--space-tree-5) * (1 - var(--pull,0) / 2));--lift-n:calc(24 * (1 - var(--pull,0) / 2));cursor:grabbing;transition:none}.pieces .piece:focus-visible{outline:none}.pieces .piece.refused .top{animation:.3s ease-in-out refuse}@keyframes refuse{25%{translate:calc(-1 * var(--space-tree-1)) 0}75%{translate:var(--space-tree-1) 0}}.pieces .seams line,.pieces .glue-sides line{transform:translateY(calc(-1 * var(--lift)))}.pieces .seams line{stroke:color-mix(in srgb, var(--color-tree-ink) 18%, transparent);stroke-width:var(--tree-rule-width);stroke-linecap:round}.pieces .glue-sides{--lift:var(--space-tree-2)}.pieces .glue-sides line{stroke:var(--color-tree-alert);stroke-width:var(--tree-rule-thick-width);stroke-linecap:round;pointer-events:none}.pieces .piece .outline line{visibility:hidden;stroke:var(--color-tree-ink);stroke-width:var(--tree-rule-thick-width);stroke-linecap:round;transform:translateY(calc(-1 * var(--lift)));transition:transform .16s ease-out}.pieces .piece:focus-visible .outline line{visibility:visible}.pieces .tray .tray-cell .top{fill:color-mix(in srgb, var(--color-tree-ink) 5%, var(--sky));stroke:color-mix(in srgb, var(--color-tree-ink) 18%, var(--sky));stroke-width:var(--tree-rule-width);transform:translateY(calc(-1 * var(--space-tree-2)))}.pieces .tray .tray-cell .shade{fill:color-mix(in srgb, var(--color-tree-earth) 16%, var(--sky))}.pieces .tray .tray-cell .shadow{fill:color-mix(in srgb, var(--color-tree-earth) 30%, var(--sky))}.pieces .tray .tray-unit .top{fill:color-mix(in srgb, var(--wood) 28%, var(--sky));stroke:color-mix(in srgb, var(--wood) 55%, var(--sky));stroke-width:var(--tree-rule-width);transform:scale(.55) translateY(calc(-1 * var(--space-tree-3)));transform-box:fill-box;transform-origin:50%}.pieces .tray .tray-unit .shade,.pieces .tray .tray-unit .shadow{display:none}.pieces .tray .source{cursor:grab}.pieces .tray .source:hover .tray-cell .top{fill:color-mix(in srgb, var(--color-tree-ink) 10%, var(--sky))}.pieces .tray .source:focus-visible{outline:none}.pieces .tray .source:focus-visible .tray-cell .top{stroke:var(--color-tree-ink);stroke-width:var(--tree-rule-thick-width)}.pieces .tray.discard .source .tray-cell .top{fill:color-mix(in srgb, var(--color-tree-alert) 18%, var(--sky));stroke:var(--color-tree-alert)}.pieces .landing path{fill:color-mix(in srgb, var(--color-tree-ink) 6%, var(--sky));stroke:color-mix(in srgb, var(--color-tree-ink) 35%, var(--sky));stroke-width:var(--tree-rule-width);stroke-dasharray:4 3}.pieces .landing path:not(.blocked){fill:color-mix(in srgb, var(--color-tree-leaf) calc(var(--pull,0) * 30%), var(--sky));stroke:color-mix(in srgb, var(--color-tree-leaf) calc(var(--pull,0) * 70%), color-mix(in srgb, var(--color-tree-ink) 35%, var(--sky)));stroke-width:calc(var(--tree-rule-width) + var(--pull,0) * var(--space-tree-1) * 2);stroke-linejoin:miter}.pieces .landing.held path:not(.blocked){stroke-dasharray:none}.pieces .landing path.blocked{fill:color-mix(in srgb, var(--color-tree-alert) 10%, var(--sky));stroke:var(--color-tree-alert)}.pieces .piece .part:is([data-tone=\"5\"],[data-tone=\"6\"]) .top{fill:var(--wood)}.pieces .piece .part[data-tone=\"7\"] .top{fill:var(--color-tree-raised)}@media (prefers-reduced-motion:reduce){.pieces .piece,.pieces .piece .top,.pieces .piece .side,.pieces .piece .outline line{transition:none}.pieces .piece.refused .top{animation:none}}", Ie = /*#__PURE__*/ l("<svg class=\"board pieces woods\"part=board role=group>"), Le = /*#__PURE__*/ l("<svg><g class=\"shape fixed\"><path class=seams></svg>", !1, !0, !1), Re = /*#__PURE__*/ l("<svg><path></svg>", !1, !0, !1), ze = "lattice-board", Be = b(`${x}\n${u}\n${Fe}\n${Pe}`), Ve = 8;
+var Pe = ":host{min-height:var(--space-tree-4);display:block;position:relative}.board{width:100%;height:100%}.board .fixed{pointer-events:none}", Fe = ".pieces .piece{--lift:var(--space-tree-2);--lift-n:8;transform:translate(var(--tx), var(--ty));cursor:grab;touch-action:none}.pieces .piece .top{fill:color-mix(in srgb, var(--wood) 28%, var(--sky));stroke:color-mix(in srgb, var(--wood) 55%, var(--sky));stroke-width:var(--tree-rule-width);transform:translateY(calc(-1 * var(--lift)));transition:transform .16s ease-out}.pieces .piece .side{transform:scaleY(var(--lift-n));transform-box:fill-box;transform-origin:0 0;transition:transform .16s ease-out}.pieces .piece .shade{fill:color-mix(in srgb, var(--wood) 70%, var(--sky))}.pieces .piece .shadow{fill:var(--wood)}.pieces .piece:hover{--lift:var(--space-tree-3);--lift-n:12}.pieces .piece.carried{--lift:calc(var(--space-tree-5) * (1 - var(--pull,0) / 2));--lift-n:calc(24 * (1 - var(--pull,0) / 2));cursor:grabbing;transition:none}.pieces .piece:focus-visible{outline:none}.pieces .piece.refused .top{animation:.3s ease-in-out refuse}@keyframes refuse{25%{translate:calc(-1 * var(--space-tree-1)) 0}75%{translate:var(--space-tree-1) 0}}.pieces .seams line,.pieces .glue-sides line{transform:translateY(calc(-1 * var(--lift)))}.pieces .seams line{stroke:color-mix(in srgb, var(--color-tree-ink) 18%, transparent);stroke-width:var(--tree-rule-width);stroke-linecap:round}.pieces .glue-sides{--lift:var(--space-tree-2)}.pieces .glue-sides line{stroke:var(--color-tree-alert);stroke-width:var(--tree-rule-thick-width);stroke-linecap:round;pointer-events:none}.pieces .piece .outline line{visibility:hidden;stroke:var(--color-tree-ink);stroke-width:var(--tree-rule-thick-width);stroke-linecap:round;transform:translateY(calc(-1 * var(--lift)));transition:transform .16s ease-out}.pieces .piece:focus-visible .outline line{visibility:visible}.pieces .tray .tray-cell .top{fill:color-mix(in srgb, var(--color-tree-ink) 5%, var(--sky));stroke:color-mix(in srgb, var(--color-tree-ink) 18%, var(--sky));stroke-width:var(--tree-rule-width);transform:translateY(calc(-1 * var(--space-tree-2)))}.pieces .tray .tray-cell .shade{fill:color-mix(in srgb, var(--color-tree-earth) 16%, var(--sky))}.pieces .tray .tray-cell .shadow{fill:color-mix(in srgb, var(--color-tree-earth) 30%, var(--sky))}.pieces .tray .tray-unit .top{fill:color-mix(in srgb, var(--wood) 28%, var(--sky));stroke:color-mix(in srgb, var(--wood) 55%, var(--sky));stroke-width:var(--tree-rule-width);transform:scale(.55) translateY(calc(-1 * var(--space-tree-3)));transform-box:fill-box;transform-origin:50%}.pieces .tray .tray-unit .shade,.pieces .tray .tray-unit .shadow{display:none}.pieces .tray .source{cursor:grab}.pieces .tray .source:hover .tray-cell .top{fill:color-mix(in srgb, var(--color-tree-ink) 10%, var(--sky))}.pieces .tray .source:focus-visible{outline:none}.pieces .tray .source:focus-visible .tray-cell .top{stroke:var(--color-tree-ink);stroke-width:var(--tree-rule-thick-width)}.pieces .tray.discard .source .tray-cell .top{fill:color-mix(in srgb, var(--color-tree-alert) 18%, var(--sky));stroke:var(--color-tree-alert)}.pieces .landing path{fill:color-mix(in srgb, var(--color-tree-ink) 6%, var(--sky));stroke:color-mix(in srgb, var(--color-tree-ink) 35%, var(--sky));stroke-width:var(--tree-rule-width);stroke-dasharray:4 3}.pieces .landing path:not(.blocked){fill:color-mix(in srgb, var(--color-tree-leaf) calc(var(--pull,0) * 30%), var(--sky));stroke:color-mix(in srgb, var(--color-tree-leaf) calc(var(--pull,0) * 70%), color-mix(in srgb, var(--color-tree-ink) 35%, var(--sky)));stroke-width:calc(var(--tree-rule-width) + var(--pull,0) * var(--space-tree-1) * 2);stroke-linejoin:miter}.pieces .landing.held path:not(.blocked){stroke-dasharray:none}.pieces .landing path.blocked{fill:color-mix(in srgb, var(--color-tree-alert) 10%, var(--sky));stroke:var(--color-tree-alert)}.pieces .piece .part:is([data-tone=\"5\"],[data-tone=\"6\"]) .top{fill:var(--wood)}.pieces .piece .part[data-tone=\"7\"] .top{fill:var(--color-tree-raised)}@media (prefers-reduced-motion:reduce){.pieces .piece,.pieces .piece .top,.pieces .piece .side,.pieces .piece .outline line{transition:none}.pieces .piece.refused .top{animation:none}}", Ie = /*#__PURE__*/ c("<svg class=\"board pieces woods\"part=board role=group>"), Le = /*#__PURE__*/ c("<svg><g class=\"shape fixed\"><path class=seams></svg>", !1, !0, !1), Re = /*#__PURE__*/ c("<svg><path></svg>", !1, !0, !1), ze = "lattice-board", Be = y(`${b}\n${l}\n${Fe}\n${Pe}`), Ve = 8;
 function $(e, t) {
 	let n = e;
 	if (typeof n == "string") try {
@@ -483,11 +483,11 @@ function $(e, t) {
 	}
 	return Array.isArray(n) ? n.flatMap((e) => {
 		if (typeof e != "object" || !e) return [];
-		let { id: n, parts: r } = e, i = y(r, 0);
+		let { id: n, parts: r } = e, i = v(r, 0);
 		return i.length === 0 ? [] : [F(typeof n == "string" && n !== "" ? n : t(), i)];
 	}) : [];
 }
-var He = class t extends _ {
+var He = class t extends g {
 	static observedAttributes = [
 		"pieces",
 		"tray",
@@ -519,13 +519,13 @@ var He = class t extends _ {
 		return this.traySignal[0]();
 	}
 	set tray(e) {
-		this.traySignal[1](d(e));
+		this.traySignal[1](u(e));
 	}
 	get scale() {
 		return this.scaleSignal[0]();
 	}
 	set scale(e) {
-		let t = f(e, 1);
+		let t = d(e, 1);
 		this.scaleSignal[1](t > 0 ? t : 1);
 	}
 	get label() {
@@ -541,23 +541,23 @@ var He = class t extends _ {
 		return Be();
 	}
 	draw() {
-		let t = this.getBoundingClientRect(), [l, u] = h({
-			width: t.width || f(this.style.width, 0),
-			height: t.height || f(this.style.height, 0)
+		let t = this.getBoundingClientRect(), [c, l] = h({
+			width: t.width || d(this.style.width, 0),
+			height: t.height || d(this.style.height, 0)
 		});
 		if (typeof ResizeObserver < "u") {
 			let e = new ResizeObserver((e) => {
 				let t = e.at(-1)?.contentRect;
-				t && t.width > 0 && u({
+				t && t.width > 0 && l({
 					width: t.width,
 					height: t.height
 				});
 			});
-			e.observe(this), i(() => e.disconnect());
+			e.observe(this), m(() => e.disconnect());
 		}
-		let d = g(() => I(l().width / this.scale, l().height / this.scale)), p = g(() => {
+		let u = n(() => I(c().width / this.scale, c().height / this.scale)), f = n(() => {
 			if (!this.tray) return;
-			let e = Math.max(0, Math.floor((d().bottom - 88) / 66)), t = Math.ceil(-e / 2);
+			let e = Math.max(0, Math.floor((u().bottom - 88) / 66)), t = Math.ceil(-e / 2);
 			return [{
 				q: t,
 				r: e
@@ -565,22 +565,22 @@ var He = class t extends _ {
 				q: t + 1,
 				r: e
 			}];
-		}), m = g(() => $(this.fixedSignal[0](), this.madeId)), _ = g(() => new Set(m().map((e) => e.id))), y = (e, t) => {
+		}), p = n(() => $(this.fixedSignal[0](), this.madeId)), g = n(() => new Set(p().map((e) => e.id))), v = (e, t) => {
 			let n = this.getBoundingClientRect();
 			return {
 				x: (e - n.left) / this.scale,
 				y: (t - n.top) / this.scale
 			};
-		}, b = v(), x, S = Oe(b, () => {
+		}, y = _(), b, x = Oe(y, () => {
 			let e = this.shadowRoot?.activeElement;
-			return !!e && !!x?.contains(e);
+			return !!e && !!b?.contains(e);
 		}), E = pe({
 			initial: [],
-			area: d,
-			clear: () => p() ?? [],
-			tray: p,
-			fixed: _,
-			calm: b,
+			area: u,
+			clear: () => f() ?? [],
+			tray: f,
+			fixed: g,
+			calm: y,
 			id: () => {
 				let e = this.madeId();
 				for (; E.pieceById(e);) e = this.madeId();
@@ -593,93 +593,93 @@ var He = class t extends _ {
 					id: n
 				}, !0),
 				caught: (e) => this.tell("catch", { id: e }),
-				landed: S.landed,
-				slid: S.slid,
-				turned: S.turned,
-				focus: S.focus
+				landed: x.landed,
+				slid: x.slid,
+				turned: x.turned,
+				focus: x.focus
 			}
 		});
-		me(E, y), this.live = () => E.pieces().filter((e) => !_().has(e.id)), i(() => {
+		me(E, v), this.live = () => E.pieces().filter((e) => !g().has(e.id)), m(() => {
 			this.live = void 0;
-		}), a(r([() => this.givenSignal[0](), m], ([e, t]) => {
+		}), r(e([() => this.givenSignal[0](), p], ([e, t]) => {
 			E.setPieces([...t, ...$(e, this.madeId)]);
-		})), a(r([d, p], () => {
-			if (d().right <= 0 || d().bottom <= 0) return;
-			let e = E.pieces(), t = e.filter((e) => _().has(e.id)), n = e.filter((e) => !_().has(e.id)), r = L(n, d(), p() ?? [], t);
+		})), r(e([u, f], () => {
+			if (u().right <= 0 || u().bottom <= 0) return;
+			let e = E.pieces(), t = e.filter((e) => g().has(e.id)), n = e.filter((e) => !g().has(e.id)), r = L(n, u(), f() ?? [], t);
 			r.every((e, t) => e === n[t]) || (E.setPieces([...t, ...r]), this.tell("change", {
 				pieces: r,
 				action: "move",
 				id: ""
 			}));
 		}));
-		let D = () => `0 0 ${d().right} ${d().bottom}`, O = this;
+		let D = () => `0 0 ${u().right} ${u().bottom}`, O = this;
 		return (() => {
-			var t = Ie(), r = x;
-			return typeof r == "function" ? w(r, t) : x = t, c(t, n(o, {
+			var e = Ie(), t = b;
+			return typeof t == "function" ? w(t, e) : b = e, s(e, o(a, {
 				get each() {
-					return m();
+					return p();
 				},
-				children: (t) => {
-					let r = H(t, Ve);
+				children: (e) => {
+					let t = H(e, Ve);
 					return (() => {
-						var t = Le(), i = t.firstChild;
-						return c(t, n(o, {
+						var e = Le(), n = e.firstChild;
+						return s(e, o(a, {
 							get each() {
-								return r.faces;
+								return t.faces;
 							},
-							children: (t) => (() => {
-								var n = Re();
-								return e((e) => {
-									var r = `flat-${t.kind}`, i = t.tone, a = t.d;
-									return r !== e.e && T(n, "class", e.e = r), i !== e.t && T(n, "data-tone", e.t = i), a !== e.a && T(n, "d", e.a = a), e;
+							children: (e) => (() => {
+								var t = Re();
+								return i((n) => {
+									var r = `flat-${e.kind}`, i = e.tone, a = e.d;
+									return r !== n.e && T(t, "class", n.e = r), i !== n.t && T(t, "data-tone", n.t = i), a !== n.a && T(t, "d", n.a = a), n;
 								}, {
 									e: void 0,
 									t: void 0,
 									a: void 0
-								}), n;
+								}), t;
 							})()
-						}), i), e(() => T(i, "d", r.seams)), t;
+						}), n), i(() => T(n, "d", t.seams)), e;
 					})();
 				}
-			}), null), c(t, n(s, {
+			}), null), s(e, o(C, {
 				get when() {
-					return p();
+					return f();
 				},
-				children: (e) => n(Ne, {
+				children: (e) => o(Ne, {
 					board: E,
 					get cells() {
 						return e();
 					},
-					motion: S,
-					toWorld: y
+					motion: x,
+					toWorld: v
 				})
-			}), null), c(t, n(je, { board: E }), null), c(t, n(o, {
+			}), null), s(e, o(je, { board: E }), null), s(e, o(a, {
 				get each() {
 					return E.drawn();
 				},
-				children: (e) => n(s, {
+				children: (e) => o(C, {
 					get when() {
-						return C(() => !!E.pieceById(e))() && !_().has(e);
+						return S(() => !!E.pieceById(e))() && !g().has(e);
 					},
 					get children() {
-						return n(Ae, {
+						return o(Ae, {
 							board: E,
 							id: e,
-							motion: S,
-							calm: b,
-							toWorld: y
+							motion: x,
+							calm: y,
+							toWorld: v
 						});
 					}
 				})
-			}), null), c(t, n(Me, { board: E }), null), e((e) => {
+			}), null), s(e, o(Me, { board: E }), null), i((t) => {
 				var n = D(), r = O.label || "A board of lattice pieces";
-				return n !== e.e && T(t, "viewBox", e.e = n), r !== e.t && T(t, "aria-label", e.t = r), e;
+				return n !== t.e && T(e, "viewBox", t.e = n), r !== t.t && T(e, "aria-label", t.t = r), t;
 			}, {
 				e: void 0,
 				t: void 0
-			}), t;
+			}), e;
 		})();
 	}
-}, Ue = (e) => S(ze, He, e);
+}, Ue = (e) => x(ze, He, e);
 //#endregion
 export { ze as BOARD_TAG, He as LatticeBoard, Ue as defineLatticeBoard };