@harmonics/lattice-ui 0.5.1 → 0.7.0

package/dist/board.js

@@ -0,0 +1,685 @@
+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 ?? {}, 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);
+		return e.calm() ? {
+			...i,
+			x: n,
+			y: r
+		} : i;
+	}), x = n(() => {
+		let e = l(), t = b();
+		return e && t ? G(e.from, t.step) : void 0;
+	}), 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 = 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 = 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;
+	m(() => {
+		clearTimeout(N), clearTimeout(F);
+	});
+	let I = (e, n) => {
+		let i = _(e);
+		if (!i || r().has(e)) return;
+		let a = A(i, n), c = l();
+		if (c?.id === e) u({
+			...c,
+			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, n);
+	}, L = (e) => {
+		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) && (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(n, a), "break", n) && (g(s.id), t.focus?.(s.id));
+	}, V = (e) => {
+		!r().has(e) && _(e) && y(o(), v(e, []), "remove", e) && g(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
+		}), g(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: g,
+		lift: (t, n, i) => {
+			let a = _(t);
+			if (!(!a || r().has(t) || l())) {
+				if (i !== void 0 && a.parts.length > 1) {
+					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) => {
+			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;
+					g(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) && 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;
+				g(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 m = t.slid?.(n.id, d) ?? 0;
+			F = setTimeout(() => P(n.id), m);
+		},
+		key: (e, n) => {
+			let i = _(e);
+			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;
+			g(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)), i = () => e.drop(), a = (t) => {
+		e.carryKey(t) && t.preventDefault();
+	};
+	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__*/ 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 [
+		(() => {
+			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(e) {
+	let t = z(e.tri).map(U), n = t[2], r = t[1];
+	return [(() => {
+		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
+		}), t;
+	})(), (() => {
+		var e = q();
+		return i(() => T(e, "d", p(t))), e;
+	})()];
+}
+function Ee(e) {
+	return (() => {
+		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;
+			} });
+		})()), 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
+		}), t;
+	})();
+}
+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(e) {
+	return (() => {
+		var t = J();
+		return s(t, o(a, {
+			get each() {
+				return e.sides;
+			},
+			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
+				}), n;
+			})()
+		})), i(() => T(t, "class", e.class)), t;
+	})();
+}
+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(e) {
+	let t = e.board, n = () => t.pieceById(e.id);
+	return (() => {
+		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}`);
+			});
+		}, 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(n());
+			},
+			children: ({ part: e, index: t }) => o(Ee, {
+				part: e,
+				index: t
+			})
+		}), null), s(d, o(Q, {
+			get sides() {
+				return k(n());
+			},
+			class: "seams"
+		}), null), s(d, o(Q, {
+			get sides() {
+				return le(n());
+			},
+			class: "outline"
+		}), 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
+		}), c;
+	})();
+}
+function je(e) {
+	let t = e.board;
+	return o(C, {
+		get when() {
+			return S(() => !!t.target())() && !t.overTray();
+		},
+		get children() {
+			var e = xe();
+			return w((e) => r(() => e.style.setProperty("--pull", `${t.magnet()?.pull ?? 0}`)), e), s(e, o(a, {
+				get each() {
+					return t.target()?.parts ?? [];
+				},
+				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
+						}), t;
+					})() : (() => {
+						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
+						}), t;
+					})();
+				}
+			})), i(() => e.classList.toggle("held", t.magnet()?.held !== void 0)), e;
+		}
+	});
+}
+function Me(e) {
+	return o(C, {
+		get when() {
+			return e.board.glueSides().length > 0;
+		},
+		get children() {
+			return o(Q, {
+				get sides() {
+					return e.board.glueSides();
+				},
+				class: "glue-sides"
+			});
+		}
+	});
+}
+function Ne(e) {
+	return (() => {
+		var n = Se();
+		return s(n, o(t, {
+			get each() {
+				return e.cells;
+			},
+			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(), 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) => o(Ee, {
+							part: e,
+							index: 0
+						})
+					})), i(() => T(n, "transform", `translate(${r().x} ${r().y})`)), t;
+				})();
+			}
+		})), 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__*/ 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 {
+		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 = v(r, 0);
+		return i.length === 0 ? [] : [F(typeof n == "string" && n !== "" ? n : t(), i)];
+	}) : [];
+}
+var He = class t extends g {
+	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](u(e));
+	}
+	get scale() {
+		return this.scaleSignal[0]();
+	}
+	set scale(e) {
+		let t = d(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(), [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 && l({
+					width: t.width,
+					height: t.height
+				});
+			});
+			e.observe(this), m(() => e.disconnect());
+		}
+		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((u().bottom - 88) / 66)), t = Math.ceil(-e / 2);
+			return [{
+				q: t,
+				r: e
+			}, {
+				q: t + 1,
+				r: e
+			}];
+		}), 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
+			};
+		}, y = _(), b, x = Oe(y, () => {
+			let e = this.shadowRoot?.activeElement;
+			return !!e && !!b?.contains(e);
+		}), E = pe({
+			initial: [],
+			area: u,
+			clear: () => f() ?? [],
+			tray: f,
+			fixed: g,
+			calm: y,
+			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: x.landed,
+				slid: x.slid,
+				turned: x.turned,
+				focus: x.focus
+			}
+		});
+		me(E, v), this.live = () => E.pieces().filter((e) => !g().has(e.id)), m(() => {
+			this.live = void 0;
+		}), r(e([() => this.givenSignal[0](), p], ([e, t]) => {
+			E.setPieces([...t, ...$(e, this.madeId)]);
+		})), 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 ${u().right} ${u().bottom}`, O = this;
+		return (() => {
+			var e = Ie(), t = b;
+			return typeof t == "function" ? w(t, e) : b = e, s(e, o(a, {
+				get each() {
+					return p();
+				},
+				children: (e) => {
+					let t = H(e, Ve);
+					return (() => {
+						var e = Le(), n = e.firstChild;
+						return s(e, o(a, {
+							get each() {
+								return t.faces;
+							},
+							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
+								}), t;
+							})()
+						}), n), i(() => T(n, "d", t.seams)), e;
+					})();
+				}
+			}), null), s(e, o(C, {
+				get when() {
+					return f();
+				},
+				children: (e) => o(Ne, {
+					board: E,
+					get cells() {
+						return e();
+					},
+					motion: x,
+					toWorld: v
+				})
+			}), null), s(e, o(je, { board: E }), null), s(e, o(a, {
+				get each() {
+					return E.drawn();
+				},
+				children: (e) => o(C, {
+					get when() {
+						return S(() => !!E.pieceById(e))() && !g().has(e);
+					},
+					get children() {
+						return o(Ae, {
+							board: E,
+							id: e,
+							motion: x,
+							calm: y,
+							toWorld: v
+						});
+					}
+				})
+			}), null), s(e, o(Me, { board: E }), null), i((t) => {
+				var n = D(), r = O.label || "A board of lattice pieces";
+				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
+			}), e;
+		})();
+	}
+}, Ue = (e) => x(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-Ka2LbDpP.js";
+import { t as e } from "./elements-DdyLdkzr.js";
 //#region src/elements/define.ts
 e();
 //#endregion