@fiestaboard/ui 2.2.5 → 3.0.0

package/dist/components/board/board-display.js

@@ -2,48 +2,48 @@
 import { resolveColorCode as e } from "../../lib/board-colors.js";
 import { BOARD_CHARS as t, EXTRA_CHARS as n, getCharFromToken as r, getCharIndex as i, isColorTile as a, messageToGrid as o, messageToText as s, tokensEqual as c } from "../../lib/board-characters.js";
 import { isNoteArray as l, resolveDimensions as u } from "../../lib/board-dimensions.js";
-import { gapClasses as d, paddingClasses as f, radiusClasses as p, sizeClasses as m, textSizeClasses as h } from "../../lib/board-metrics.js";
-import { SEAM_CLASS as g, charLeafBoxShadow as _, seamStyle as v } from "./board-surfaces.js";
-import { reducedMotionQuery as y, useReducedMotion as b } from "./reduced-motion.js";
-import { memo as x, useCallback as S, useEffect as C, useMemo as w, useRef as T, useState as E } from "react";
-import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { gapClasses as d, paddingClasses as f, radiusClasses as p, sizeClasses as ee, textSizeClasses as m } from "../../lib/board-metrics.js";
+import { SEAM_CLASS as h, charLeafBoxShadow as te, seamStyle as g } from "./board-surfaces.js";
+import { reducedMotionQuery as _, useReducedMotion as v } from "./reduced-motion.js";
+import { memo as y, useCallback as b, useEffect as x, useMemo as S, useRef as C, useState as w } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/components/board/board-display.tsx
-var A = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }\n    @keyframes flapUp { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }\n    @keyframes flapShadow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }\n  ", j = {
+var O = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }\n    @keyframes flapUp { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }\n    @keyframes flapShadow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }\n  ", k = {
 	white: "\n      0 2px 4px rgba(0,0,0,0.2),\n      inset 0 1px 2px rgba(0,0,0,0.1),\n      inset 0 -1px 2px rgba(255,255,255,0.5),\n      inset 1px 0 1px rgba(0,0,0,0.08),\n      inset -1px 0 1px rgba(255,255,255,0.4)\n    ",
 	black: "\n      0 2px 4px rgba(0,0,0,0.5),\n      inset 0 1px 2px rgba(0,0,0,0.8),\n      inset 0 -1px 1px rgba(255,255,255,0.08),\n      inset 1px 0 1px rgba(0,0,0,0.5),\n      inset -1px 0 1px rgba(255,255,255,0.05)\n    "
-}, M = {
+}, A = {
 	black: {
 		backgroundColor: "var(--color-board-surface-dark)",
-		boxShadow: j.black,
+		boxShadow: k.black,
 		contain: "layout style paint"
 	},
 	white: {
 		backgroundColor: "var(--color-board-surface-light)",
-		boxShadow: j.white,
+		boxShadow: k.white,
 		contain: "layout style paint"
 	}
-}, N = {
+}, j = {
 	black: {
-		...M.black,
+		...A.black,
 		perspective: "800px",
 		isolation: "isolate"
 	},
 	white: {
-		...M.white,
+		...A.white,
 		perspective: "800px",
 		isolation: "isolate"
 	}
-}, P = "\n      0 2px 4px rgba(0,0,0,0.3),\n      inset 0 1px 1px rgba(255,255,255,0.15),\n      inset 0 -1px 1px rgba(0,0,0,0.25),\n      inset 1px 0 1px rgba(255,255,255,0.1),\n      inset -1px 0 1px rgba(0,0,0,0.2)\n    ", F = {
+}, M = "\n      0 2px 4px rgba(0,0,0,0.3),\n      inset 0 1px 1px rgba(255,255,255,0.15),\n      inset 0 -1px 1px rgba(0,0,0,0.25),\n      inset 1px 0 1px rgba(255,255,255,0.1),\n      inset -1px 0 1px rgba(0,0,0,0.2)\n    ", N = {
 	hardware: 16,
 	quick: 48,
 	standard: 80,
 	relaxed: 130
-}, I = 8, L = 2e3;
-function R(e) {
-	let t = typeof e == "string" ? F[e] : e.durationMs;
-	return Number.isFinite(t) ? Math.min(L, Math.max(I, Math.round(t))) : F.standard;
+}, P = 8, F = 2e3;
+function I(e) {
+	let t = typeof e == "string" ? N[e] : e.durationMs;
+	return Number.isFinite(t) ? Math.min(F, Math.max(P, Math.round(t))) : N.standard;
 }
-function z(e) {
+function L(e) {
 	let t = Math.round(e / 2);
 	return {
 		stepMs: e,
@@ -52,7 +52,7 @@ function z(e) {
 		bottomDelayMs: t
 	};
 }
-var ee = {
+var ne = {
 	position: "absolute",
 	top: 0,
 	left: 0,
@@ -60,7 +60,7 @@ var ee = {
 	height: "50%",
 	overflow: "hidden",
 	zIndex: 1
-}, te = {
+}, R = {
 	position: "absolute",
 	top: "50%",
 	left: 0,
@@ -68,7 +68,7 @@ var ee = {
 	height: "50%",
 	overflow: "hidden",
 	zIndex: 1
-}, ne = {
+}, z = {
 	position: "absolute",
 	bottom: 0,
 	left: 0,
@@ -76,7 +76,7 @@ var ee = {
 	height: "30%",
 	background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.12))",
 	pointerEvents: "none"
-}, re = {
+}, B = {
 	white: {
 		position: "absolute",
 		top: 0,
@@ -95,14 +95,14 @@ var ee = {
 		background: "linear-gradient(to bottom, rgba(0,0,0,0.15), transparent)",
 		pointerEvents: "none"
 	}
-}, B = {
+}, V = {
 	white: "linear-gradient(to bottom, rgba(0,0,0,0.06), transparent)",
 	black: "linear-gradient(to bottom, rgba(0,0,0,0.3), transparent)"
-}, V = /* @__PURE__ */ new Map();
-function ie(e) {
-	let t = V.get(e);
+}, H = /* @__PURE__ */ new Map();
+function re(e) {
+	let t = H.get(e);
 	if (t) return t;
-	let n = z(e), r = {
+	let n = L(e), r = {
 		topFlap: {
 			position: "absolute",
 			top: 0,
@@ -137,7 +137,7 @@ function ie(e) {
 				left: 0,
 				right: 0,
 				height: "50%",
-				background: B.white,
+				background: V.white,
 				zIndex: 4,
 				pointerEvents: "none",
 				opacity: 0,
@@ -149,7 +149,7 @@ function ie(e) {
 				left: 0,
 				right: 0,
 				height: "50%",
-				background: B.black,
+				background: V.black,
 				zIndex: 4,
 				pointerEvents: "none",
 				opacity: 0,
@@ -157,53 +157,53 @@ function ie(e) {
 			}
 		}
 	};
-	return V.set(e, r), r;
+	return H.set(e, r), r;
 }
-var H = {
+var U = {
 	white: "\n      0 8px 32px rgba(0,0,0,0.12),\n      0 4px 16px rgba(0,0,0,0.08),\n      inset 0 1px 2px rgba(255,255,255,0.9),\n      inset 0 0 0 1px rgba(255,255,255,0.5)\n    ",
 	black: "\n      0 8px 32px rgba(0,0,0,0.6),\n      0 4px 16px rgba(0,0,0,0.4),\n      inset 0 1px 1px rgba(255,255,255,0.08),\n      inset 0 0 0 1px rgba(255,255,255,0.03)\n    "
-}, U = x(function({ token: r, size: a, boardType: o }) {
-	let s = o === "white", c = s ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", l = s ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", u = m[a], d = h[a], f = p[a], y = /* @__PURE__ */ O("div", {
-		className: g,
-		style: v[o]
+}, W = y(function({ token: r, size: a, boardType: o }) {
+	let s = o === "white", c = s ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", l = s ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", u = ee[a], d = m[a], f = p[a], _ = /* @__PURE__ */ E("div", {
+		className: h,
+		style: g[o]
 	});
 	if (r.type === "color") {
 		let t = e(r.code, s), n = a === "sm" ? "3px 1px 4px" : a === "md" ? "4px 2px 5px" : "5px 2px 6px";
-		return /* @__PURE__ */ k("div", {
+		return /* @__PURE__ */ D("div", {
 			className: `${u} relative ${f} overflow-hidden`,
 			style: { backgroundColor: c },
-			children: [/* @__PURE__ */ O("div", {
+			children: [/* @__PURE__ */ E("div", {
 				className: `absolute ${f}`,
 				style: {
 					inset: n,
 					backgroundColor: t,
-					boxShadow: P
+					boxShadow: M
 				}
-			}), y]
+			}), _]
 		});
 	}
-	let b = n[r.value] ? r.value : t[i(r.value)], x = b === " ";
-	return /* @__PURE__ */ k("div", {
+	let v = n[r.value] ? r.value : t[i(r.value)], y = v === " ";
+	return /* @__PURE__ */ D("div", {
 		className: `${u} relative ${f} overflow-hidden flex items-center justify-center`,
 		style: {
 			backgroundColor: c,
-			boxShadow: _[o]
+			boxShadow: te[o]
 		},
-		children: [!x && /* @__PURE__ */ O("span", {
+		children: [!y && /* @__PURE__ */ E("span", {
 			className: `${d} font-mono font-semibold select-none leading-none`,
 			style: { color: r.value === "♥" ? "#eb4034" : l },
-			children: b
-		}), y]
+			children: v
+		}), _]
 	});
-}), W = x(function({ row: e, rowIdx: t, size: n, gapClass: i, boardType: a, showSeams: o = !1, isRowSeam: s = !1, seamGap: c = "6px", emitCellMetadata: l = !1 }) {
-	return /* @__PURE__ */ O("div", {
+}), G = y(function({ row: e, rowIdx: t, size: n, gapClass: i, boardType: a, showSeams: o = !1, isRowSeam: s = !1, seamGap: c = "6px", emitCellMetadata: l = !1 }) {
+	return /* @__PURE__ */ E("div", {
 		"data-note-row": "",
 		...s ? { "data-note-row-seam": "true" } : {},
 		className: `flex ${i} justify-center`,
 		style: s ? { marginTop: c } : void 0,
 		children: e.map((e, i) => {
 			let s = o && i > 0 && i % 15 == 0;
-			return /* @__PURE__ */ O("div", {
+			return /* @__PURE__ */ E("div", {
 				"data-note-tile": "",
 				...l ? {
 					"data-row": t,
@@ -212,7 +212,7 @@ var H = {
 				} : {},
 				...s ? { "data-note-col-seam": "true" } : {},
 				style: s ? { marginLeft: c } : void 0,
-				children: /* @__PURE__ */ O(U, {
+				children: /* @__PURE__ */ E(W, {
 					token: e,
 					size: n,
 					boardType: a
@@ -220,15 +220,15 @@ var H = {
 			}, `col-${t}-${i}`);
 		})
 	});
-}), G = x(function({ row: e, rowIdx: t, size: n, gapClass: r, boardType: i = "black", isAnimating: a = !1, animationsEnabled: o = !0, flapStepMs: s, showSeams: c = !1, isRowSeam: l = !1, seamGap: u = "6px", emitCellMetadata: d = !1 }) {
-	return /* @__PURE__ */ O("div", {
+}), K = y(function({ row: e, rowIdx: t, size: n, gapClass: r, boardType: i = "black", isAnimating: a = !1, animationsEnabled: o = !0, flapStepMs: s, showSeams: c = !1, isRowSeam: l = !1, seamGap: u = "6px", emitCellMetadata: d = !1 }) {
+	return /* @__PURE__ */ E("div", {
 		"data-note-row": "",
 		...l ? { "data-note-row-seam": "true" } : {},
 		className: `flex ${r} justify-center`,
 		style: l ? { marginTop: u } : void 0,
 		children: e.map((e, r) => {
 			let l = c && r > 0 && r % 15 == 0;
-			return /* @__PURE__ */ O("div", {
+			return /* @__PURE__ */ E("div", {
 				"data-note-tile": "",
 				...d ? {
 					"data-row": t,
@@ -236,7 +236,7 @@ var H = {
 				} : {},
 				...l ? { "data-note-col-seam": "true" } : {},
 				style: l ? { marginLeft: u } : void 0,
-				children: /* @__PURE__ */ O(Y, {
+				children: /* @__PURE__ */ E(X, {
 					token: e,
 					size: n,
 					boardType: i,
@@ -253,141 +253,141 @@ var H = {
 	if (e.row.length !== t.row.length || e.size !== t.size || e.gapClass !== t.gapClass || e.boardType !== t.boardType || e.isAnimating !== t.isAnimating || e.animationsEnabled !== t.animationsEnabled || e.flapStepMs !== t.flapStepMs || e.showSeams !== t.showSeams || e.isRowSeam !== t.isRowSeam || e.seamGap !== t.seamGap || e.emitCellMetadata !== t.emitCellMetadata) return !1;
 	for (let n = 0; n < e.row.length; n++) if (!c(e.row[n], t.row[n])) return !1;
 	return !0;
-}), K = /* @__PURE__ */ new Map();
-function q(e, t) {
+}), q = /* @__PURE__ */ new Map();
+function J(e, t) {
 	t.intervalId === null && (t.intervalId = setInterval(() => {
 		for (let e of [...t.subscribers]) e();
 	}, e));
 }
-function J(e) {
+function Y(e) {
 	e.intervalId !== null && (clearInterval(e.intervalId), e.intervalId = null);
 }
-y?.addEventListener("change", (e) => {
-	for (let [t, n] of K) e.matches ? J(n) : n.subscribers.size > 0 && q(t, n);
+_?.addEventListener("change", (e) => {
+	for (let [t, n] of q) e.matches ? Y(n) : n.subscribers.size > 0 && J(t, n);
 });
-function ae(e, t) {
-	let n = K.get(e);
+function ie(e, t) {
+	let n = q.get(e);
 	n || (n = {
 		subscribers: /* @__PURE__ */ new Set(),
 		intervalId: null
-	}, K.set(e, n));
+	}, q.set(e, n));
 	let r = n;
-	return r.subscribers.add(t), y?.matches || q(e, r), () => {
-		r.subscribers.delete(t), r.subscribers.size === 0 && (J(r), K.delete(e));
+	return r.subscribers.add(t), _?.matches || J(e, r), () => {
+		r.subscribers.delete(t), r.subscribers.size === 0 && (Y(r), q.delete(e));
 	};
 }
-var Y = x(function({ token: o, size: s = "md", boardType: c = "black", isAnimating: l = !1, animationsEnabled: u = !0, flapStepMs: d, rowIdx: f = 0, colIdx: g = 0 }) {
-	let y = u && l, b = c === "white", x = b ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", w = b ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", A = r(o), j = i(A), F = d, I = ie(F), [L, R] = E(() => j), [z, B] = E(!1), V = T(L), H = T(!1), U = T(j), W = T(y), G = T(!1), K = T(j);
-	C(() => {
-		K.current = j;
-	}, [j]);
-	let q = S((e) => {
-		V.current = e, R(e);
-	}, []), J = S((e) => {
-		H.current = e, B(e);
-	}, []), Y = T(null), X = T(0), Z = S(() => {
-		Y.current !== null && (clearInterval(Y.current), Y.current = null);
-	}, []), Q = S(() => {
-		let e = U.current, n = V.current, r = () => {
-			Z(), J(!1), G.current = !1;
+var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimating: l = !1, animationsEnabled: u = !0, flapStepMs: d, rowIdx: f = 0, colIdx: h = 0 }) {
+	let _ = u && l, v = c === "white", y = v ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", S = v ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", O = r(o), k = i(O), N = d, P = re(N), [F, I] = w(() => k), [L, V] = w(!1), H = C(F), U = C(!1), W = C(k), G = C(_), K = C(!1), q = C(k);
+	x(() => {
+		q.current = k;
+	}, [k]);
+	let J = b((e) => {
+		H.current = e, I(e);
+	}, []), Y = b((e) => {
+		U.current = e, V(e);
+	}, []), X = C(null), ae = C(0), Z = b(() => {
+		X.current !== null && (clearInterval(X.current), X.current = null);
+	}, []), Q = b(() => {
+		let e = W.current, n = H.current, r = () => {
+			Z(), Y(!1), K.current = !1;
 		};
 		if (n === e) {
 			r();
 			return;
 		}
 		let i = (n + 1) % t.length;
-		q(i), i === e && r();
+		J(i), i === e && r();
 	}, [
-		q,
 		J,
+		Y,
 		Z
-	]), $ = S((e) => {
-		(Y.current === null || X.current !== e) && (Z(), X.current = e, Y.current = setInterval(Q, e));
+	]), $ = b((e) => {
+		(X.current === null || ae.current !== e) && (Z(), ae.current = e, X.current = setInterval(Q, e));
 	}, [Q, Z]);
-	C(() => Z, [Z]), C(() => {
-		let e = W.current;
-		W.current = y;
-		let n = K.current;
+	x(() => Z, [Z]), x(() => {
+		let e = G.current;
+		G.current = _;
+		let n = q.current;
 		if (!u) {
-			Z(), J(!1), q(n), U.current = n, G.current = !1;
+			Z(), Y(!1), J(n), W.current = n, K.current = !1;
 			return;
 		}
-		if (y) {
-			J(!1), Z(), e || q(n);
-			let r = ae(F, () => {
-				q((V.current + 1) % t.length);
+		if (_) {
+			Y(!1), Z(), e || J(n);
+			let r = ie(N, () => {
+				J((H.current + 1) % t.length);
 			});
 			return () => {
 				r();
 			};
 		}
 		if (e) {
-			G.current = !0, Z();
-			let e = U.current;
-			if (U.current = n, V.current === n || e === n) {
-				J(!1), q(n), G.current = !1;
+			K.current = !0, Z();
+			let e = W.current;
+			if (W.current = n, H.current === n || e === n) {
+				Y(!1), J(n), K.current = !1;
 				return;
 			}
-			J(!0), Q(), H.current && $(F);
+			Y(!0), Q(), U.current && $(N);
 			return;
 		}
-		H.current || (Z(), V.current !== n && q(n));
+		U.current || (Z(), H.current !== n && J(n));
 	}, [
-		y,
-		F,
+		_,
+		N,
 		u,
-		q,
 		J,
+		Y,
 		$,
 		Q,
 		Z
-	]), C(() => {
+	]), x(() => {
 		if (!u) {
-			U.current = j, Z(), J(!1), q(j);
+			W.current = k, Z(), Y(!1), J(k);
 			return;
 		}
-		if (y || G.current) {
-			U.current = j;
+		if (_ || K.current) {
+			W.current = k;
 			return;
 		}
-		if (H.current) {
-			U.current = j, $(F);
+		if (U.current) {
+			W.current = k, $(N);
 			return;
 		}
-		let e = U.current;
-		if (U.current = j, e === j || V.current === j) {
-			Z(), J(!1), V.current !== j && q(j);
+		let e = W.current;
+		if (W.current = k, e === k || H.current === k) {
+			Z(), Y(!1), H.current !== k && J(k);
 			return;
 		}
-		J(!0), Q(), H.current && $(F);
+		Y(!0), Q(), U.current && $(N);
 	}, [
-		j,
-		y,
-		F,
+		k,
+		_,
+		N,
 		u,
-		q,
 		J,
+		Y,
 		$,
 		Q,
 		Z
 	]);
-	let oe = t[L], se = (L - 1 + t.length) % t.length, ce = t[se];
-	return /* @__PURE__ */ O(D, { children: /* @__PURE__ */ k("div", {
-		className: `relative ${m[s]} ${p[s]} overflow-hidden`,
-		"data-testid": `char-tile-${f}-${g}`,
+	let oe = t[F], se = (F - 1 + t.length) % t.length, ce = t[se];
+	return /* @__PURE__ */ E(T, { children: /* @__PURE__ */ D("div", {
+		className: `relative ${ee[s]} ${p[s]} overflow-hidden`,
+		"data-testid": `char-tile-${f}-${h}`,
 		"data-current-char": oe,
-		"data-target-char": A,
-		"data-is-animating": y,
-		"data-is-transitioning": z,
-		style: y || z ? N[c] : M[c],
+		"data-target-char": O,
+		"data-is-animating": _,
+		"data-is-transitioning": L,
+		style: _ || L ? j[c] : A[c],
 		children: [
-			!y && !z && (() => {
+			!_ && !L && (() => {
 				if (o.type === "color") {
-					let t = e(o.code, b);
-					return /* @__PURE__ */ O("div", {
+					let t = e(o.code, v);
+					return /* @__PURE__ */ E("div", {
 						className: `absolute inset-0 ${s === "sm" ? "[--color-margin-top:3px] [--color-margin-bottom:4px] [--color-margin-h:1px]" : s === "md" ? "[--color-margin-top:3px] sm:[--color-margin-top:4px] md:[--color-margin-top:5px] lg:[--color-margin-top:6px] [--color-margin-bottom:4px] sm:[--color-margin-bottom:6px] md:[--color-margin-bottom:7px] lg:[--color-margin-bottom:8px] [--color-margin-h:1px] sm:[--color-margin-h:2px]" : "[--color-margin-top:4px] sm:[--color-margin-top:5px] md:[--color-margin-top:6px] lg:[--color-margin-top:8px] [--color-margin-bottom:5px] sm:[--color-margin-bottom:7px] md:[--color-margin-bottom:8px] lg:[--color-margin-bottom:10px] [--color-margin-h:2px] md:[--color-margin-h:3px]"} flex items-center justify-center`,
 						style: { zIndex: 2 },
-						children: /* @__PURE__ */ O("div", {
+						children: /* @__PURE__ */ E("div", {
 							className: `relative ${p[s]} overflow-hidden`,
 							style: {
 								marginTop: "var(--color-margin-top)",
@@ -397,50 +397,50 @@ var Y = x(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 								width: "calc(100% - (var(--color-margin-h) * 2))",
 								height: "calc(100% - (var(--color-margin-top) + var(--color-margin-bottom)))",
 								backgroundColor: t,
-								boxShadow: P
+								boxShadow: M
 							}
 						})
 					}, `static-color-${o.code}`);
 				}
-				let i = r(o), l = n[i] ? i : t[j], u = a(l), d = u ? e(l, b) : x, f = l === "♥" ? "#eb4034" : w;
-				return /* @__PURE__ */ k("div", {
+				let i = r(o), l = n[i] ? i : t[k], u = a(l), d = u ? e(l, v) : y, f = l === "♥" ? "#eb4034" : S;
+				return /* @__PURE__ */ D("div", {
 					className: "absolute inset-0 flex items-center justify-center overflow-hidden",
 					style: {
 						zIndex: 2,
 						backgroundColor: d,
 						marginLeft: u ? "-4px" : 0,
 						marginRight: u ? "-4px" : 0,
-						boxShadow: u ? void 0 : _[c]
+						boxShadow: u ? void 0 : te[c]
 					},
 					children: [
-						!u && l !== " " && /* @__PURE__ */ O("span", {
-							className: `${h[s]} font-mono font-semibold select-none leading-none relative z-10`,
+						!u && l !== " " && /* @__PURE__ */ E("span", {
+							className: `${m[s]} font-mono font-semibold select-none leading-none relative z-10`,
 							style: { color: f },
 							children: l
 						}),
-						!u && l === " " && /* @__PURE__ */ O("span", {
-							className: `${h[s]} font-mono font-semibold select-none leading-none relative z-10`,
+						!u && l === " " && /* @__PURE__ */ E("span", {
+							className: `${m[s]} font-mono font-semibold select-none leading-none relative z-10`,
 							style: {
-								color: w,
+								color: S,
 								visibility: "hidden"
 							},
 							"aria-hidden": "true",
 							children: " "
 						}),
-						u && /* @__PURE__ */ O("div", {
+						u && /* @__PURE__ */ E("div", {
 							className: `absolute inset-0 ${p[s]}`,
 							style: {
 								backgroundColor: d,
-								boxShadow: P
+								boxShadow: M
 							}
 						})
 					]
-				}, `static-char-${j}`);
+				}, `static-char-${k}`);
 			})(),
-			(y || z) && (() => {
+			(_ || L) && (() => {
 				let t = oe, n = (t, n) => {
-					let r = a(t), i = r ? e(t, b) : x, o = t === "♥";
-					return /* @__PURE__ */ O("div", {
+					let r = a(t), i = r ? e(t, v) : y, o = t === "♥";
+					return /* @__PURE__ */ E("div", {
 						style: {
 							position: "absolute",
 							...n ? { top: 0 } : { bottom: 0 },
@@ -452,125 +452,147 @@ var Y = x(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 							justifyContent: "center",
 							backgroundColor: i
 						},
-						children: !r && t !== " " && /* @__PURE__ */ O("span", {
-							className: `${h[s]} font-mono font-semibold select-none leading-none`,
-							style: { color: o ? "#eb4034" : w },
+						children: !r && t !== " " && /* @__PURE__ */ E("span", {
+							className: `${m[s]} font-mono font-semibold select-none leading-none`,
+							style: { color: o ? "#eb4034" : S },
 							children: t
 						})
 					});
 				};
-				return /* @__PURE__ */ k(D, { children: [
-					/* @__PURE__ */ O("div", {
-						style: ee,
+				return /* @__PURE__ */ D(T, { children: [
+					/* @__PURE__ */ E("div", {
+						style: ne,
 						children: n(t, !0)
 					}),
-					/* @__PURE__ */ O("div", {
-						style: te,
+					/* @__PURE__ */ E("div", {
+						style: R,
 						children: n(ce, !1)
 					}),
-					/* @__PURE__ */ k("div", {
-						style: I.topFlap,
-						children: [n(ce, !0), /* @__PURE__ */ O("div", { style: ne })]
-					}, `ft-${L}`),
-					/* @__PURE__ */ k("div", {
-						style: I.bottomFlap,
-						children: [n(t, !1), /* @__PURE__ */ O("div", { style: re[c] })]
-					}, `fb-${L}`),
-					/* @__PURE__ */ O("div", { style: I.castShadow[c] }, `fs-${L}`),
-					/* @__PURE__ */ O("div", {
+					/* @__PURE__ */ D("div", {
+						style: P.topFlap,
+						children: [n(ce, !0), /* @__PURE__ */ E("div", { style: z })]
+					}, `ft-${F}`),
+					/* @__PURE__ */ D("div", {
+						style: P.bottomFlap,
+						children: [n(t, !1), /* @__PURE__ */ E("div", { style: B[c] })]
+					}, `fb-${F}`),
+					/* @__PURE__ */ E("div", { style: P.castShadow[c] }, `fs-${F}`),
+					/* @__PURE__ */ E("div", {
 						className: "absolute top-1/2 left-0 right-0 h-[2px] pointer-events-none",
-						style: v[c]
+						style: g[c]
 					})
 				] });
 			})(),
-			!y && !z && L === j && /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("div", {
+			!_ && !L && F === k && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("div", {
 				className: "absolute top-1/2 left-0 right-0 h-[2px] pointer-events-none",
-				style: v[c]
-			}), /* @__PURE__ */ O("div", {
+				style: g[c]
+			}), /* @__PURE__ */ E("div", {
 				className: "absolute inset-0 pointer-events-none",
 				style: {
 					zIndex: 1,
-					background: b ? "linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(0,0,0,0.05) 100%)" : "linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(0,0,0,0.2) 100%)"
+					background: v ? "linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(0,0,0,0.05) 100%)" : "linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(0,0,0,0.2) 100%)"
 				}
 			})] })
 		]
 	}) });
-}, (e, t) => c(e.token, t.token) && e.size === t.size && e.boardType === t.boardType && e.isAnimating === t.isAnimating && e.animationsEnabled === t.animationsEnabled && e.flapStepMs === t.flapStepMs), X = (e) => `Board display: ${e}`, Z = "Board display", Q = x(function({ message: e, isLoading: t = !1, size: n = "md", className: r = "", boardType: i = "black", deviceType: a = "flagship", isStatic: c = !1, notesWide: p = 1, notesTall: m = 1, emitCellMetadata: h = !1, animationsEnabled: g = !0, flapSpeed: _ = "standard", loadingLabel: v = "Loading board display", emptyLabel: y = "Empty board display", messageLabel: x = X }) {
-	let S = b(), C = g && !S, T = R(_), E = u(a, p, m), D = l(a), j = n === "sm" ? "6px" : n === "md" ? "8px" : "10px", M = w(() => o(e ?? "", E.rows, E.cols, a), [
+}, (e, t) => c(e.token, t.token) && e.size === t.size && e.boardType === t.boardType && e.isAnimating === t.isAnimating && e.animationsEnabled === t.animationsEnabled && e.flapStepMs === t.flapStepMs), ae = (e) => `Board display: ${e}`, Z = "Board display", Q = y(function({ message: e, isLoading: t = !1, size: n = "md", className: r = "", boardType: i = "black", deviceType: a = "flagship", isStatic: c = !1, notesWide: p = 1, notesTall: ee = 1, emitCellMetadata: m = !1, animationsEnabled: h = !0, flapSpeed: te = "standard", loadingLabel: g = "Loading board display", emptyLabel: _ = "Empty board display", messageLabel: y = ae, announceUpdates: b = !1 }) {
+	let x = v(), C = h && !x, T = I(te), k = u(a, p, ee), A = l(a), j = n === "sm" ? "6px" : n === "md" ? "8px" : "10px", M = S(() => o(e ?? "", k.rows, k.cols, a), [
 		e,
-		E.rows,
-		E.cols,
+		k.rows,
+		k.cols,
 		a
-	]), N = i === "white", P = N ? "var(--color-board-bezel-light)" : "var(--color-board-bezel-dark)", F = N ? "var(--color-board-bezel-border-light)" : "var(--color-board-bezel-border-dark)", I = H[i], L = n === "sm" ? "rounded-lg border-[3px]" : "rounded-lg sm:rounded-xl border-[3px] sm:border-[4px] lg:border-[5px]", z = w(() => {
-		if (t) return v;
-		if (!e) return y;
+	]), N = i === "white", P = N ? "var(--color-board-bezel-light)" : "var(--color-board-bezel-dark)", F = N ? "var(--color-board-bezel-border-light)" : "var(--color-board-bezel-border-dark)", L = U[i], ne = n === "sm" ? "rounded-lg border-[3px]" : "rounded-lg sm:rounded-xl border-[3px] sm:border-[4px] lg:border-[5px]", R = S(() => {
+		if (t) return g;
+		if (!e) return _;
 		let n = s(e, a);
-		return n ? x(n) : Z;
+		return n ? y(n) : Z;
 	}, [
 		e,
 		a,
 		t,
-		v,
-		y,
-		x
-	]);
-	return /* @__PURE__ */ k("div", {
+		g,
+		_,
+		y
+	]), [z, B] = w(() => ({
+		text: "",
+		of: R,
+		armed: b
+	}));
+	return b && !z.armed ? B({
+		text: "",
+		of: R,
+		armed: !0
+	}) : b && !t && z.of !== R && B({
+		text: R,
+		of: R,
+		armed: !0
+	}), /* @__PURE__ */ D("div", {
 		className: "w-full flex justify-center",
-		children: [!c && /* @__PURE__ */ O("style", {
-			href: "board-flap-keyframes",
-			precedence: "default",
-			children: A
-		}), /* @__PURE__ */ O("div", {
-			role: "img",
-			"aria-label": z,
-			"data-slot": "board-display",
-			"data-board-preview": "",
-			className: `${L} ${r}`,
-			style: {
-				backgroundColor: P,
-				borderColor: F,
-				boxShadow: I,
-				width: "fit-content"
-			},
-			children: /* @__PURE__ */ O("div", {
-				className: `${f[n]} relative`,
-				"aria-hidden": "true",
-				style: { background: N ? "linear-gradient(135deg, var(--color-board-surface-light) 0%, var(--color-board-bezel-border-light) 100%)" : "linear-gradient(135deg, var(--color-board-surface-dark) 0%, var(--color-board-black) 100%)" },
-				children: /* @__PURE__ */ O("div", {
-					className: `flex flex-col ${d[n]}`,
-					children: M.map((e, r) => {
-						let a = D && r > 0 && r % 3 == 0;
-						return c ? /* @__PURE__ */ O(W, {
-							row: e,
-							rowIdx: r,
-							size: n,
-							gapClass: d[n],
-							boardType: i,
-							showSeams: D,
-							isRowSeam: a,
-							seamGap: j,
-							emitCellMetadata: h
-						}, `row-${r}`) : /* @__PURE__ */ O(G, {
-							row: e,
-							rowIdx: r,
-							size: n,
-							gapClass: d[n],
-							boardType: i,
-							isAnimating: t,
-							animationsEnabled: C,
-							flapStepMs: T,
-							showSeams: D,
-							isRowSeam: a,
-							seamGap: j,
-							emitCellMetadata: h
-						}, `row-${r}`);
+		children: [
+			!c && /* @__PURE__ */ E("style", {
+				href: "board-flap-keyframes",
+				precedence: "default",
+				children: O
+			}),
+			b && /* @__PURE__ */ E("div", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"data-slot": "board-display-announcer",
+				children: z.text
+			}),
+			/* @__PURE__ */ E("div", {
+				role: "img",
+				"aria-label": R,
+				"data-slot": "board-display",
+				"data-board-preview": "",
+				className: `${ne} ${r}`,
+				style: {
+					backgroundColor: P,
+					borderColor: F,
+					boxShadow: L,
+					width: "fit-content"
+				},
+				children: /* @__PURE__ */ E("div", {
+					className: `${f[n]} relative`,
+					"aria-hidden": "true",
+					style: { background: N ? "linear-gradient(135deg, var(--color-board-surface-light) 0%, var(--color-board-bezel-border-light) 100%)" : "linear-gradient(135deg, var(--color-board-surface-dark) 0%, var(--color-board-black) 100%)" },
+					children: /* @__PURE__ */ E("div", {
+						className: `flex flex-col ${d[n]}`,
+						children: M.map((e, r) => {
+							let a = A && r > 0 && r % 3 == 0;
+							return c ? /* @__PURE__ */ E(G, {
+								row: e,
+								rowIdx: r,
+								size: n,
+								gapClass: d[n],
+								boardType: i,
+								showSeams: A,
+								isRowSeam: a,
+								seamGap: j,
+								emitCellMetadata: m
+							}, `row-${r}`) : /* @__PURE__ */ E(K, {
+								row: e,
+								rowIdx: r,
+								size: n,
+								gapClass: d[n],
+								boardType: i,
+								isAnimating: t,
+								animationsEnabled: C,
+								flapStepMs: T,
+								showSeams: A,
+								isRowSeam: a,
+								seamGap: j,
+								emitCellMetadata: m
+							}, `row-${r}`);
+						})
 					})
 				})
 			})
-		})]
+		]
 	});
-}, (e, t) => e.message === t.message && e.isLoading === t.isLoading && e.size === t.size && e.className === t.className && e.boardType === t.boardType && e.deviceType === t.deviceType && e.notesWide === t.notesWide && e.notesTall === t.notesTall && e.isStatic === t.isStatic && e.emitCellMetadata === t.emitCellMetadata && e.animationsEnabled === t.animationsEnabled && R(e.flapSpeed ?? "standard") === R(t.flapSpeed ?? "standard") && e.loadingLabel === t.loadingLabel && e.emptyLabel === t.emptyLabel && e.messageLabel === t.messageLabel);
+}, (e, t) => e.message === t.message && e.isLoading === t.isLoading && e.size === t.size && e.className === t.className && e.boardType === t.boardType && e.deviceType === t.deviceType && e.notesWide === t.notesWide && e.notesTall === t.notesTall && e.isStatic === t.isStatic && e.emitCellMetadata === t.emitCellMetadata && e.animationsEnabled === t.animationsEnabled && I(e.flapSpeed ?? "standard") === I(t.flapSpeed ?? "standard") && e.loadingLabel === t.loadingLabel && e.emptyLabel === t.emptyLabel && e.messageLabel === t.messageLabel && e.announceUpdates === t.announceUpdates);
 //#endregion
-export { Q as BoardDisplay, F as FLAP_SPEED_PRESETS, z as deriveFlapTiming, R as resolveFlapSpeed };
+export { Q as BoardDisplay, N as FLAP_SPEED_PRESETS, L as deriveFlapTiming, I as resolveFlapSpeed };
 
 //# sourceMappingURL=board-display.js.map