@fiestaboard/ui 2.2.4 → 2.2.5

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

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