@harmonics/lattice-ui 0.5.0 → 0.6.0

package/dist/board.js

@@ -0,0 +1,685 @@
+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 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 = 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);
+		return e.calm() ? {
+			...i,
+			x: n,
+			y: r
+		} : i;
+	}), x = g(() => {
+		let e = l(), t = b();
+		return e && t ? G(e.from, t.step) : void 0;
+	}), S = g(() => 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(() => {
+		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(() => {
+		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(() => {
+		clearTimeout(N), clearTimeout(F);
+	});
+	let I = (e, r) => {
+		let i = _(e);
+		if (!i || n().has(e)) return;
+		let a = A(i, r), c = l();
+		if (c?.id === e) u({
+			...c,
+			from: A(c.from, r)
+		}), 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);
+	}, L = (e) => {
+		let r = _(e);
+		if (!r || n().has(e)) return;
+		let { piece: i, absorbed: a } = re(r, 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);
+			return;
+		}
+		let a = ae(i, e.id), s = a[0];
+		y(o(), v(r, a), "break", r) && (m(s.id), t.focus?.(s.id));
+	}, V = (e) => {
+		!n().has(e) && _(e) && y(o(), v(e, []), "remove", e) && m(void 0);
+	}, H = (e, t, n, r) => {
+		let i = r ?? o();
+		u({
+			id: e.id,
+			start: t,
+			now: t,
+			from: e,
+			held: {
+				i: 0,
+				j: 0
+			},
+			restore: r,
+			before: i,
+			action: n
+		}), m(void 0);
+	};
+	return {
+		pieces: o,
+		setPieces: s,
+		handled: c,
+		pieceById: _,
+		carried: l,
+		magnet: b,
+		target: x,
+		overTray: C,
+		blocked: w,
+		lands: D,
+		drawn: k,
+		glueSides: M,
+		refused: d,
+		touched: p,
+		touch: m,
+		lift: (t, r, i) => {
+			let a = _(t);
+			if (!(!a || n().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");
+			}
+		},
+		fromTray: (t, n) => {
+			if (l()) return;
+			let r = o(), i = j(t, n.x, n.y, a(), e.id());
+			s([...r, i]), H(i, n, "add", r);
+		},
+		placeFromTray: (n) => {
+			let r = e.tray?.()?.[0];
+			if (!r) return;
+			let i = a();
+			for (let a = r.r - 1; a >= 0; a--) for (let s = 0; s < 12; s++) {
+				let c = R({
+					q: r.q + s + Math.floor((r.r - a) / 2),
+					r: a
+				}), 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);
+					return;
+				}
+			}
+		},
+		follow: (e) => {
+			let n = l();
+			if (!n) return;
+			let { held: r } = W(n.from, e.x - n.start.x, e.y - n.start.y, n.held);
+			r && (!n.held || r.i !== n.held.i || r.j !== n.held.j) && t.caught?.(n.id), u({
+				...n,
+				now: e,
+				held: r
+			});
+		},
+		drop: () => {
+			let n = l();
+			if (!n) return;
+			let r = x(), i = C(), a = D(), c = b(), d = c ? {
+				x: c.x,
+				y: c.y
+			} : {
+				x: n.now.x - n.start.x,
+				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);
+				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);
+				let e = B({
+					i: p.pivot.i - n.from.pivot.i,
+					j: p.pivot.j - n.from.pivot.j
+				});
+				t.landed?.(n.id, {
+					x: d.x - e.x,
+					y: d.y - e.y
+				}, "drop");
+				return;
+			}
+			if (n.restore) {
+				s(n.restore);
+				return;
+			}
+			s(v(n.id, [n.from]));
+			let h = t.slid?.(n.id, d) ?? 0;
+			F = setTimeout(() => P(n.id), h);
+		},
+		key: (e, r) => {
+			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 (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);
+			let u = B(s);
+			return t.landed?.(e, {
+				x: -u.x,
+				y: -u.y
+			}, "step"), t.focus?.(e), !0;
+		},
+		carryKey: (e) => {
+			let t = l();
+			return !t || e.key !== "r" && e.key !== "R" ? !1 : (I(t.id, e.shiftKey ? -1 : 1), !0);
+		},
+		turn: I,
+		glue: L,
+		breakApart: z,
+		throwAway: V
+	};
+}
+function me(e, t) {
+	if (typeof window > "u") return;
+	let n = (n) => e.follow(t(n.clientX, n.clientY)), r = () => e.drop(), o = (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);
+		}));
+	});
+}
+//#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;
+function we() {
+	return [
+		(() => {
+			var e = he();
+			return T(e, "d", `M 0 66 L ${Z} 88 L ${Z} 64 L 0 42 Z`), e;
+		})(),
+		(() => {
+			var e = ge();
+			return T(e, "d", `M ${Z} 88 L ${X} 66 L ${X} 42 L ${Z} 64 Z`), e;
+		})(),
+		(() => {
+			var e = q();
+			return T(e, "d", P), e;
+		})()
+	];
+}
+function Te(t) {
+	let n = z(t.tri).map(U), r = n[2], i = n[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;
+		}, {
+			e: void 0,
+			t: void 0
+		}), n;
+	})(), (() => {
+		var t = q();
+		return e(() => T(t, "d", m(n))), t;
+	})()];
+}
+function Ee(t) {
+	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;
+			} });
+		})()), 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;
+		}, {
+			e: void 0,
+			t: void 0
+		}), r;
+	})();
+}
+function De(e) {
+	let t = (e) => Math.max(...N(e).flatMap((e) => z(e).map((e) => U(e).y))), n = (e) => Math.min(...N(e).flatMap((e) => z(e).map((e) => U(e).x)));
+	return e.parts.map((e, t) => ({
+		part: e,
+		index: t
+	})).sort((e, r) => t(e.part) - t(r.part) || n(e.part) - n(r.part));
+}
+function Q(t) {
+	return (() => {
+		var r = J();
+		return c(r, n(o, {
+			get each() {
+				return t.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;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0
+				}), r;
+			})()
+		})), e(() => T(r, "class", t.class)), r;
+	})();
+}
+function Oe(e, t) {
+	let n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), i = !1;
+	return {
+		elements: n,
+		turners: r,
+		keyed(e) {
+			i = t();
+			try {
+				e();
+			} finally {
+				i = !1;
+			}
+		},
+		focus(e) {
+			i && queueMicrotask(() => n.get(e)?.focus({ preventScroll: !0 }));
+		},
+		landed(t, r, i) {
+			let a = n.get(t);
+			if (!a || e()) return;
+			let o = Math.hypot(r.x, r.y), s = o < 1 ? {
+				x: 0,
+				y: -3
+			} : r, c = o < 1 ? .5 : i === "drop" ? .12 : .06, l = Math.round(Math.min(420, Math.max(200, 200 + o * .35)));
+			a.animate(V(s, c), { duration: l });
+		},
+		slid(t, r) {
+			let i = Math.hypot(r.x, r.y), a = n.get(t);
+			if (!a || e() || i < 1) return 0;
+			let o = Math.round(Math.min(400, Math.max(120, 120 + i * .35)));
+			return a.animate([{ transform: `translate(${r.x}px, ${r.y}px)` }, { transform: "translate(0px, 0px)" }], {
+				duration: o,
+				easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
+			}), o;
+		},
+		turned(t, n) {
+			e() || r.get(t)?.animate([{ transform: `rotate(${-60 * n}deg)` }, { transform: "rotate(0deg)" }], {
+				duration: 180,
+				easing: "ease-out"
+			});
+		}
+	};
+}
+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);
+	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}`);
+			});
+		}, 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, {
+			get each() {
+				return De(i());
+			},
+			children: ({ part: e, index: t }) => n(Ee, {
+				part: e,
+				index: t
+			})
+		}), null), c(d, n(Q, {
+			get sides() {
+				return k(i());
+			},
+			class: "seams"
+		}), null), c(d, n(Q, {
+			get sides() {
+				return le(i());
+			},
+			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;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		}), s;
+	})();
+}
+function je(t) {
+	let r = t.board;
+	return n(s, {
+		get when() {
+			return C(() => !!r.target())() && !r.overTray();
+		},
+		get children() {
+			var t = xe();
+			return w((e) => a(() => e.style.setProperty("--pull", `${r.magnet()?.pull ?? 0}`)), t), c(t, n(o, {
+				get each() {
+					return r.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;
+						}, {
+							e: void 0,
+							t: void 0
+						}), n;
+					})() : (() => {
+						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;
+						}, {
+							e: void 0,
+							t: void 0
+						}), n;
+					})();
+				}
+			})), e(() => t.classList.toggle("held", r.magnet()?.held !== void 0)), t;
+		}
+	});
+}
+function Me(e) {
+	return n(s, {
+		get when() {
+			return e.board.glueSides().length > 0;
+		},
+		get children() {
+			return n(Q, {
+				get sides() {
+					return e.board.glueSides();
+				},
+				class: "glue-sides"
+			});
+		}
+	});
+}
+function Ne(r) {
+	return (() => {
+		var i = Se();
+		return c(i, n(t, {
+			get each() {
+				return r.cells;
+			},
+			children: (t, i) => {
+				let a = () => R(t()), s = i === 0 ? "cell" : "tri", l = () => j(s, a().x + Z, a().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, {
+						get each() {
+							return l().parts;
+						},
+						children: (e) => n(Ee, {
+							part: e,
+							index: 0
+						})
+					})), e(() => T(i, "transform", `translate(${a().x} ${a().y})`)), t;
+				})();
+			}
+		})), e(() => i.classList.toggle("discard", !!r.board.overTray())), i;
+	})();
+}
+//#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;
+function $(e, t) {
+	let n = e;
+	if (typeof n == "string") try {
+		n = JSON.parse(n);
+	} catch {
+		return [];
+	}
+	return Array.isArray(n) ? n.flatMap((e) => {
+		if (typeof e != "object" || !e) return [];
+		let { id: n, parts: r } = e, i = y(r, 0);
+		return i.length === 0 ? [] : [F(typeof n == "string" && n !== "" ? n : t(), i)];
+	}) : [];
+}
+var He = class t extends _ {
+	static observedAttributes = [
+		"pieces",
+		"tray",
+		"scale",
+		"label"
+	];
+	inputs = [...t.observedAttributes, "fixed"];
+	givenSignal = h();
+	fixedSignal = h();
+	traySignal = h(!1);
+	scaleSignal = h(1);
+	labelSignal = h("");
+	live;
+	made = 0;
+	madeId = () => `piece-${++this.made}`;
+	get pieces() {
+		return this.live?.() ?? $(this.givenSignal[0](), this.madeId);
+	}
+	set pieces(e) {
+		this.givenSignal[1](() => e);
+	}
+	get fixed() {
+		return $(this.fixedSignal[0](), this.madeId);
+	}
+	set fixed(e) {
+		this.fixedSignal[1](() => e);
+	}
+	get tray() {
+		return this.traySignal[0]();
+	}
+	set tray(e) {
+		this.traySignal[1](d(e));
+	}
+	get scale() {
+		return this.scaleSignal[0]();
+	}
+	set scale(e) {
+		let t = f(e, 1);
+		this.scaleSignal[1](t > 0 ? t : 1);
+	}
+	get label() {
+		return this.labelSignal[0]();
+	}
+	set label(e) {
+		this.labelSignal[1](String(e ?? ""));
+	}
+	attributeChangedCallback(e, t, n) {
+		e === "tray" ? this.tray = n : Reflect.set(this, e, n ?? "");
+	}
+	sheet() {
+		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)
+		});
+		if (typeof ResizeObserver < "u") {
+			let e = new ResizeObserver((e) => {
+				let t = e.at(-1)?.contentRect;
+				t && t.width > 0 && u({
+					width: t.width,
+					height: t.height
+				});
+			});
+			e.observe(this), i(() => e.disconnect());
+		}
+		let d = g(() => I(l().width / this.scale, l().height / this.scale)), p = g(() => {
+			if (!this.tray) return;
+			let e = Math.max(0, Math.floor((d().bottom - 88) / 66)), t = Math.ceil(-e / 2);
+			return [{
+				q: t,
+				r: e
+			}, {
+				q: t + 1,
+				r: e
+			}];
+		}), m = g(() => $(this.fixedSignal[0](), this.madeId)), _ = g(() => new Set(m().map((e) => e.id))), y = (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, () => {
+			let e = this.shadowRoot?.activeElement;
+			return !!e && !!x?.contains(e);
+		}), E = pe({
+			initial: [],
+			area: d,
+			clear: () => p() ?? [],
+			tray: p,
+			fixed: _,
+			calm: b,
+			id: () => {
+				let e = this.madeId();
+				for (; E.pieceById(e);) e = this.madeId();
+				return e;
+			},
+			hooks: {
+				change: (e, t, n) => this.tell("change", {
+					pieces: e,
+					action: t,
+					id: n
+				}, !0),
+				caught: (e) => this.tell("catch", { id: e }),
+				landed: S.landed,
+				slid: S.slid,
+				turned: S.turned,
+				focus: S.focus
+			}
+		});
+		me(E, y), this.live = () => E.pieces().filter((e) => !_().has(e.id)), i(() => {
+			this.live = void 0;
+		}), a(r([() => this.givenSignal[0](), m], ([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.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;
+		return (() => {
+			var t = Ie(), r = x;
+			return typeof r == "function" ? w(r, t) : x = t, c(t, n(o, {
+				get each() {
+					return m();
+				},
+				children: (t) => {
+					let r = H(t, Ve);
+					return (() => {
+						var t = Le(), i = t.firstChild;
+						return c(t, n(o, {
+							get each() {
+								return r.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;
+								}, {
+									e: void 0,
+									t: void 0,
+									a: void 0
+								}), n;
+							})()
+						}), i), e(() => T(i, "d", r.seams)), t;
+					})();
+				}
+			}), null), c(t, n(s, {
+				get when() {
+					return p();
+				},
+				children: (e) => n(Ne, {
+					board: E,
+					get cells() {
+						return e();
+					},
+					motion: S,
+					toWorld: y
+				})
+			}), null), c(t, n(je, { board: E }), null), c(t, n(o, {
+				get each() {
+					return E.drawn();
+				},
+				children: (e) => n(s, {
+					get when() {
+						return C(() => !!E.pieceById(e))() && !_().has(e);
+					},
+					get children() {
+						return n(Ae, {
+							board: E,
+							id: e,
+							motion: S,
+							calm: b,
+							toWorld: y
+						});
+					}
+				})
+			}), null), c(t, n(Me, { board: E }), null), e((e) => {
+				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;
+			}, {
+				e: void 0,
+				t: void 0
+			}), t;
+		})();
+	}
+}, Ue = (e) => S(ze, He, e);
+//#endregion
+export { ze as BOARD_TAG, He as LatticeBoard, Ue as defineLatticeBoard };

package/dist/define.js

@@ -1,4 +1,4 @@
-import { t as e } from "./elements-Czlt91Ar.js";
+import { t as e } from "./elements-GhyUSrb9.js";
 //#region src/elements/define.ts
 e();
 //#endregion