@fiestaboard/ui 2.1.0 → 2.1.1

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

@@ -2,36 +2,57 @@
 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, sizeClasses as f, textSizeClasses as p } from "../../lib/board-metrics.js";
-import { memo as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+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, 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 S = "\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  ", C = {
+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    "
-}, w = {
+}, A = {
 	black: {
 		backgroundColor: "var(--color-board-surface-dark)",
-		boxShadow: C.black,
+		boxShadow: k.black,
 		contain: "layout style paint"
 	},
 	white: {
 		backgroundColor: "var(--color-board-surface-light)",
-		boxShadow: C.white,
+		boxShadow: k.white,
 		contain: "layout style paint"
 	}
-}, T = {
+}, j = {
 	black: {
-		...w.black,
+		...A.black,
 		perspective: "800px",
 		isolation: "isolate"
 	},
 	white: {
-		...w.white,
+		...A.white,
 		perspective: "800px",
 		isolation: "isolate"
 	}
-}, E = "\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    ", D = 80, O = Math.round(D * .55), k = Math.round(D * .35), A = Math.round(D * .55), j = {
+}, 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
+}, 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 L(e) {
+	let t = Math.round(e / 2);
+	return {
+		stepMs: e,
+		topMs: t,
+		bottomMs: e - t,
+		bottomDelayMs: t
+	};
+}
+var R = {
 	position: "absolute",
 	top: 0,
 	left: 0,
@@ -39,7 +60,7 @@ var S = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { tra
 	height: "50%",
 	overflow: "hidden",
 	zIndex: 1
-}, M = {
+}, z = {
 	position: "absolute",
 	top: "50%",
 	left: 0,
@@ -47,19 +68,7 @@ var S = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { tra
 	height: "50%",
 	overflow: "hidden",
 	zIndex: 1
-}, N = {
-	position: "absolute",
-	top: 0,
-	left: 0,
-	right: 0,
-	height: "50%",
-	overflow: "hidden",
-	zIndex: 3,
-	transformOrigin: "bottom center",
-	backfaceVisibility: "hidden",
-	willChange: "transform",
-	animation: `flapDown ${O}ms ease-in forwards`
-}, P = {
+}, B = {
 	position: "absolute",
 	bottom: 0,
 	left: 0,
@@ -67,20 +76,7 @@ var S = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { tra
 	height: "30%",
 	background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.12))",
 	pointerEvents: "none"
-}, F = {
-	position: "absolute",
-	top: "50%",
-	left: 0,
-	right: 0,
-	height: "50%",
-	overflow: "hidden",
-	zIndex: 2,
-	transformOrigin: "top center",
-	backfaceVisibility: "hidden",
-	willChange: "transform",
-	transform: "rotateX(90deg)",
-	animation: `flapUp ${A}ms cubic-bezier(0.33, 0, 0.15, 1) ${k}ms forwards`
-}, I = {
+}, V = {
 	white: {
 		position: "absolute",
 		top: 0,
@@ -99,69 +95,115 @@ var S = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { tra
 		background: "linear-gradient(to bottom, rgba(0,0,0,0.15), transparent)",
 		pointerEvents: "none"
 	}
-}, L = {
-	white: {
-		position: "absolute",
-		top: "50%",
-		left: 0,
-		right: 0,
-		height: "50%",
-		background: "linear-gradient(to bottom, rgba(0,0,0,0.06), transparent)",
-		zIndex: 4,
-		pointerEvents: "none",
-		opacity: 0,
-		animation: `flapShadow ${D}ms ease-in-out forwards`
-	},
-	black: {
-		position: "absolute",
-		top: "50%",
-		left: 0,
-		right: 0,
-		height: "50%",
-		background: "linear-gradient(to bottom, rgba(0,0,0,0.3), transparent)",
-		zIndex: 4,
-		pointerEvents: "none",
-		opacity: 0,
-		animation: `flapShadow ${D}ms ease-in-out forwards`
-	}
-}, R = {
+}, H = {
+	white: "linear-gradient(to bottom, rgba(0,0,0,0.06), transparent)",
+	black: "linear-gradient(to bottom, rgba(0,0,0,0.3), transparent)"
+}, U = /* @__PURE__ */ new Map();
+function W(e) {
+	let t = U.get(e);
+	if (t) return t;
+	let n = L(e), r = {
+		topFlap: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			right: 0,
+			height: "50%",
+			overflow: "hidden",
+			zIndex: 3,
+			transformOrigin: "bottom center",
+			backfaceVisibility: "hidden",
+			willChange: "transform",
+			animation: `flapDown ${n.topMs}ms ease-in forwards`
+		},
+		bottomFlap: {
+			position: "absolute",
+			top: "50%",
+			left: 0,
+			right: 0,
+			height: "50%",
+			overflow: "hidden",
+			zIndex: 2,
+			transformOrigin: "top center",
+			backfaceVisibility: "hidden",
+			willChange: "transform",
+			transform: "rotateX(90deg)",
+			animation: `flapUp ${n.bottomMs}ms cubic-bezier(0.33, 0, 0.15, 1) ${n.bottomDelayMs}ms forwards`
+		},
+		castShadow: {
+			white: {
+				position: "absolute",
+				top: "50%",
+				left: 0,
+				right: 0,
+				height: "50%",
+				background: H.white,
+				zIndex: 4,
+				pointerEvents: "none",
+				opacity: 0,
+				animation: `flapShadow ${n.stepMs}ms ease-in-out forwards`
+			},
+			black: {
+				position: "absolute",
+				top: "50%",
+				left: 0,
+				right: 0,
+				height: "50%",
+				background: H.black,
+				zIndex: 4,
+				pointerEvents: "none",
+				opacity: 0,
+				animation: `flapShadow ${n.stepMs}ms ease-in-out forwards`
+			}
+		}
+	};
+	return U.set(e, r), r;
+}
+var G = {
 	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    "
-}, z = m(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 = a === "sm" ? "w-[14px] h-[18px]" : a === "md" ? "w-[14px] h-[20px] sm:w-[20px] sm:h-[28px] md:w-[24px] md:h-[34px] lg:w-[28px] lg:h-[40px]" : "w-[18px] h-[26px] sm:w-[24px] sm:h-[34px] md:w-[28px] md:h-[40px] lg:w-[32px] lg:h-[46px]", d = a === "sm" ? "text-[7px]" : a === "md" ? "text-[7px] sm:text-[10px] md:text-[13px] lg:text-[16px]" : "text-[10px] sm:text-[13px] md:text-[16px] lg:text-[20px]", f = /* @__PURE__ */ b("div", { className: `absolute top-1/2 left-0 right-0 h-[1px] ${s ? "bg-black/10" : "bg-black/30"}` });
+}, K = 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__ */ E("div", {
+		className: h,
+		style: _[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__ */ x("div", {
-			className: `${u} relative rounded-[3px] overflow-hidden`,
+		return /* @__PURE__ */ D("div", {
+			className: `${u} relative ${v} overflow-hidden`,
 			style: { backgroundColor: c },
-			children: [/* @__PURE__ */ b("div", {
-				className: "absolute rounded-[2px]",
+			children: [/* @__PURE__ */ E("div", {
+				className: `absolute ${v}`,
 				style: {
 					inset: n,
-					backgroundColor: t
+					backgroundColor: t,
+					boxShadow: M
 				}
-			}), f]
+			}), y]
 		});
 	}
-	let p = n[r.value] ? r.value : t[i(r.value)], m = p === " ";
-	return /* @__PURE__ */ x("div", {
-		className: `${u} relative rounded-[3px] overflow-hidden flex items-center justify-center`,
-		style: { backgroundColor: c },
-		children: [!m && /* @__PURE__ */ b("span", {
+	let b = n[r.value] ? r.value : t[i(r.value)], x = b === " ";
+	return /* @__PURE__ */ D("div", {
+		className: `${u} relative ${v} overflow-hidden flex items-center justify-center`,
+		style: {
+			backgroundColor: c,
+			boxShadow: g[o]
+		},
+		children: [!x && /* @__PURE__ */ E("span", {
 			className: `${d} font-mono font-semibold select-none leading-none`,
 			style: { color: r.value === "♥" ? "#eb4034" : l },
-			children: p
-		}), f]
+			children: b
+		}), y]
 	});
-}), B = m(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__ */ b("div", {
+}), q = 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__ */ 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__ */ b("div", {
+			return /* @__PURE__ */ E("div", {
 				"data-note-tile": "",
 				...l ? {
 					"data-row": t,
@@ -170,7 +212,7 @@ var S = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { tra
 				} : {},
 				...s ? { "data-note-col-seam": "true" } : {},
 				style: s ? { marginLeft: c } : void 0,
-				children: /* @__PURE__ */ b(z, {
+				children: /* @__PURE__ */ E(K, {
 					token: e,
 					size: n,
 					boardType: a
@@ -178,28 +220,29 @@ var S = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { tra
 			}, `col-${t}-${i}`);
 		})
 	});
-}), V = m(function({ row: e, rowIdx: t, size: n, gapClass: r, boardType: i = "black", isAnimating: a = !1, animationsEnabled: o = !0, showSeams: s = !1, isRowSeam: c = !1, seamGap: l = "6px", emitCellMetadata: u = !1 }) {
-	return /* @__PURE__ */ b("div", {
+}), J = 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__ */ E("div", {
 		"data-note-row": "",
-		...c ? { "data-note-row-seam": "true" } : {},
+		...l ? { "data-note-row-seam": "true" } : {},
 		className: `flex ${r} justify-center`,
-		style: c ? { marginTop: l } : void 0,
+		style: l ? { marginTop: u } : void 0,
 		children: e.map((e, r) => {
-			let c = s && r > 0 && r % 15 == 0;
-			return /* @__PURE__ */ b("div", {
+			let l = c && r > 0 && r % 15 == 0;
+			return /* @__PURE__ */ E("div", {
 				"data-note-tile": "",
-				...u ? {
+				...d ? {
 					"data-row": t,
 					"data-col": r
 				} : {},
-				...c ? { "data-note-col-seam": "true" } : {},
-				style: c ? { marginLeft: l } : void 0,
-				children: /* @__PURE__ */ b(Y, {
+				...l ? { "data-note-col-seam": "true" } : {},
+				style: l ? { marginLeft: u } : void 0,
+				children: /* @__PURE__ */ E($, {
 					token: e,
 					size: n,
 					boardType: i,
 					isAnimating: a,
 					animationsEnabled: o,
+					flapStepMs: s,
 					rowIdx: t,
 					colIdx: r
 				})
@@ -207,133 +250,139 @@ var S = "\n    @keyframes flapDown { from { transform: rotateX(0deg); } to { tra
 		})
 	});
 }, (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.showSeams !== t.showSeams || e.isRowSeam !== t.isRowSeam || e.seamGap !== t.seamGap || e.emitCellMetadata !== t.emitCellMetadata) return !1;
+	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;
 	return !0;
-}), H = 80, U = /* @__PURE__ */ new Set(), W = null, G = typeof window > "u" ? null : window.matchMedia("(prefers-reduced-motion: reduce)");
-function K() {
-	W === null && (W = setInterval(() => {
-		for (let e of [...U]) e();
-	}, H));
+}), Y = /* @__PURE__ */ new Map();
+function X(e, t) {
+	t.intervalId === null && (t.intervalId = setInterval(() => {
+		for (let e of [...t.subscribers]) e();
+	}, e));
 }
-function q() {
-	W !== null && (clearInterval(W), W = null);
+function Z(e) {
+	e.intervalId !== null && (clearInterval(e.intervalId), e.intervalId = null);
 }
-G?.addEventListener("change", () => {
-	G.matches ? q() : U.size > 0 && K();
+v?.addEventListener("change", (e) => {
+	for (let [t, n] of Y) e.matches ? Z(n) : n.subscribers.size > 0 && X(t, n);
 });
-function J(e) {
-	return U.add(e), G?.matches || K(), () => {
-		U.delete(e), U.size === 0 && q();
+function Q(e, t) {
+	let n = Y.get(e);
+	n || (n = {
+		subscribers: /* @__PURE__ */ new Set(),
+		intervalId: null
+	}, Y.set(e, n));
+	let r = n;
+	return r.subscribers.add(t), v?.matches || X(e, r), () => {
+		r.subscribers.delete(t), r.subscribers.size === 0 && (Z(r), Y.delete(e));
 	};
 }
-var Y = m(function({ token: o, size: s = "md", boardType: c = "black", isAnimating: l = !1, animationsEnabled: u = !0, rowIdx: d = 0, colIdx: m = 0 }) {
-	let g = u && l, S = c === "white", C = S ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", O = S ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", k = r(o), A = i(k), R = D, [z, B] = v(() => A), [V, H] = v(!1), U = _(null), W = _(A), G = _(g), K = _(z), q = _(!1);
-	h(() => {
-		K.current = z;
-	}, [z]), h(() => {
-		let e = G.current;
-		if (G.current = g, !u) {
-			U.current &&= (clearInterval(U.current), null), H(!1), B(A), W.current = A, q.current = !1;
+var $ = 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", S = b ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", O = b ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", k = r(o), N = i(k), P = d, F = W(P), [I, L] = w(() => N), [H, U] = w(!1), G = C(null), K = C(N), q = C(y), J = C(I), Y = C(!1);
+	x(() => {
+		J.current = I;
+	}, [I]), x(() => {
+		let e = q.current;
+		if (q.current = y, !u) {
+			G.current &&= (clearInterval(G.current), null), U(!1), L(N), K.current = N, Y.current = !1;
 			return;
 		}
-		if (g) {
-			H(!1), U.current &&= (clearInterval(U.current), null), e || B(A);
-			let n = J(() => {
-				B((e) => (e + 1) % t.length);
+		if (y) {
+			U(!1), G.current &&= (clearInterval(G.current), null), e || L(N);
+			let n = Q(P, () => {
+				L((e) => (e + 1) % t.length);
 			});
 			return () => {
 				n();
 			};
 		}
 		if (e) {
-			q.current = !0, U.current &&= (clearInterval(U.current), null);
-			let e = W.current, n = A, r = e !== n;
-			if (W.current = n, K.current === n) {
-				K.current = n, H(!1), B((e) => e === n ? e : n), q.current = !1;
+			Y.current = !0, G.current &&= (clearInterval(G.current), null);
+			let e = K.current, n = N, r = e !== n;
+			if (K.current = n, J.current === n) {
+				J.current = n, U(!1), L((e) => e === n ? e : n), Y.current = !1;
 				return;
 			}
 			if (!r) {
-				K.current = n, B((e) => e === n ? e : n), H(!1), q.current = !1;
+				J.current = n, L((e) => e === n ? e : n), U(!1), Y.current = !1;
 				return;
 			}
-			H(!0);
+			U(!0);
 			let i = () => {
-				B((e) => {
-					let n = W.current;
-					if (e === n) return H(!1), q.current = !1, U.current &&= (clearInterval(U.current), null), e;
+				L((e) => {
+					let n = K.current;
+					if (e === n) return U(!1), Y.current = !1, G.current &&= (clearInterval(G.current), null), e;
 					let r = (e + 1) % t.length;
-					return r === n ? (H(!1), q.current = !1, U.current &&= (clearInterval(U.current), null), r) : r;
+					return r === n ? (U(!1), Y.current = !1, G.current &&= (clearInterval(G.current), null), r) : r;
 				});
 			};
-			return i(), U.current = setInterval(i, R), () => {
-				U.current &&= (clearInterval(U.current), null), q.current = !1;
+			return i(), G.current = setInterval(i, P), () => {
+				G.current &&= (clearInterval(G.current), null), Y.current = !1;
 			};
 		}
-		U.current &&= (clearInterval(U.current), null), H(!1), B((e) => e === A ? e : A);
+		G.current &&= (clearInterval(G.current), null), U(!1), L((e) => e === N ? e : N);
 	}, [
-		g,
-		A,
-		R,
+		y,
+		N,
+		P,
 		u
-	]), h(() => {
+	]), x(() => {
 		if (!u) {
-			W.current = A, U.current &&= (clearInterval(U.current), null), H(!1), B(A);
+			K.current = N, G.current &&= (clearInterval(G.current), null), U(!1), L(N);
 			return;
 		}
-		if (q.current) {
-			W.current = A;
+		if (Y.current) {
+			K.current = N;
 			return;
 		}
-		if (g || V) {
-			W.current = A;
+		if (y || H) {
+			K.current = N;
 			return;
 		}
-		let e = W.current, n = A;
+		let e = K.current, n = N;
 		if (e !== n) {
-			if (W.current = n, K.current === n) {
-				H(!1), U.current &&= (clearInterval(U.current), null), B(n);
+			if (K.current = n, J.current === n) {
+				U(!1), G.current &&= (clearInterval(G.current), null), L(n);
 				return;
 			}
-			H(!0), U.current &&= (clearInterval(U.current), null);
+			U(!0), G.current &&= (clearInterval(G.current), null);
 			let e = () => {
-				B((e) => {
-					let n = W.current;
-					if (e === n) return H(!1), U.current &&= (clearInterval(U.current), null), e;
+				L((e) => {
+					let n = K.current;
+					if (e === n) return U(!1), G.current &&= (clearInterval(G.current), null), e;
 					let r = (e + 1) % t.length;
-					return r === n ? (H(!1), U.current &&= (clearInterval(U.current), null), r) : r;
+					return r === n ? (U(!1), G.current &&= (clearInterval(G.current), null), r) : r;
 				});
 			};
-			return e(), U.current = setInterval(e, R), () => {
-				U.current &&= (clearInterval(U.current), null);
+			return e(), G.current = setInterval(e, P), () => {
+				G.current &&= (clearInterval(G.current), null);
 			};
 		}
-		K.current !== n && B(n), H(!1), U.current &&= (clearInterval(U.current), null);
+		J.current !== n && L(n), U(!1), G.current &&= (clearInterval(G.current), null);
 	}, [
-		A,
-		g,
-		V,
-		R,
+		N,
+		y,
+		H,
+		P,
 		u
 	]);
-	let Y = t[z], X = (z - 1 + t.length) % t.length, Z = t[X];
-	return /* @__PURE__ */ b(y, { children: /* @__PURE__ */ x("div", {
-		className: `relative ${f[s]} rounded-[3px] overflow-hidden`,
-		"data-testid": `char-tile-${d}-${m}`,
-		"data-current-char": Y,
+	let X = t[I], Z = (I - 1 + t.length) % t.length, $ = t[Z];
+	return /* @__PURE__ */ E(T, { children: /* @__PURE__ */ D("div", {
+		className: `relative ${p[s]} ${f[s]} overflow-hidden`,
+		"data-testid": `char-tile-${h}-${v}`,
+		"data-current-char": X,
 		"data-target-char": k,
-		"data-is-animating": g,
-		"data-is-transitioning": V,
-		style: g || V ? T[c] : w[c],
+		"data-is-animating": y,
+		"data-is-transitioning": H,
+		style: y || H ? j[c] : A[c],
 		children: [
-			!g && !V && (() => {
+			!y && !H && (() => {
 				if (o.type === "color") {
-					let t = e(o.code, S);
-					return /* @__PURE__ */ b("div", {
+					let t = e(o.code, b);
+					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__ */ b("div", {
-							className: "relative rounded-[3px] overflow-hidden",
+						children: /* @__PURE__ */ E("div", {
+							className: `relative ${f[s]} overflow-hidden`,
 							style: {
 								marginTop: "var(--color-margin-top)",
 								marginBottom: "var(--color-margin-bottom)",
@@ -342,29 +391,29 @@ var Y = m(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: E
-							},
-							children: /* @__PURE__ */ b("div", { className: "absolute top-1/2 left-0 right-0 h-[1px] bg-black/10" })
+								boxShadow: M
+							}
 						})
 					}, `static-color-${o.code}`);
 				}
-				let i = r(o), c = n[i] ? i : t[A], l = a(c), u = l ? e(c, S) : C, d = c === "♥" ? "#eb4034" : O;
-				return /* @__PURE__ */ x("div", {
+				let i = r(o), l = n[i] ? i : t[N], u = a(l), d = u ? e(l, b) : S, p = l === "♥" ? "#eb4034" : O;
+				return /* @__PURE__ */ D("div", {
 					className: "absolute inset-0 flex items-center justify-center overflow-hidden",
 					style: {
 						zIndex: 2,
-						backgroundColor: u,
-						marginLeft: l ? "-4px" : 0,
-						marginRight: l ? "-4px" : 0
+						backgroundColor: d,
+						marginLeft: u ? "-4px" : 0,
+						marginRight: u ? "-4px" : 0,
+						boxShadow: u ? void 0 : g[c]
 					},
 					children: [
-						!l && c !== " " && /* @__PURE__ */ b("span", {
-							className: `${p[s]} font-mono font-semibold select-none leading-none relative z-10`,
-							style: { color: d },
-							children: c
+						!u && l !== " " && /* @__PURE__ */ E("span", {
+							className: `${m[s]} font-mono font-semibold select-none leading-none relative z-10`,
+							style: { color: p },
+							children: l
 						}),
-						!l && c === " " && /* @__PURE__ */ b("span", {
-							className: `${p[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: O,
 								visibility: "hidden"
@@ -372,20 +421,20 @@ var Y = m(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 							"aria-hidden": "true",
 							children: " "
 						}),
-						l && /* @__PURE__ */ b("div", {
-							className: "absolute inset-0 rounded-[3px]",
+						u && /* @__PURE__ */ E("div", {
+							className: `absolute inset-0 ${f[s]}`,
 							style: {
-								backgroundColor: u,
-								boxShadow: E
+								backgroundColor: d,
+								boxShadow: M
 							}
 						})
 					]
-				}, `static-char-${A}`);
+				}, `static-char-${N}`);
 			})(),
-			(g || V) && (() => {
-				let t = Y, n = (t, n) => {
-					let r = a(t), i = r ? e(t, S) : C, o = t === "♥";
-					return /* @__PURE__ */ b("div", {
+			(y || H) && (() => {
+				let t = X, n = (t, n) => {
+					let r = a(t), i = r ? e(t, b) : S, o = t === "♥";
+					return /* @__PURE__ */ E("div", {
 						style: {
 							position: "absolute",
 							...n ? { top: 0 } : { bottom: 0 },
@@ -397,109 +446,110 @@ var Y = m(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 							justifyContent: "center",
 							backgroundColor: i
 						},
-						children: !r && t !== " " && /* @__PURE__ */ b("span", {
-							className: `${p[s]} font-mono font-semibold select-none leading-none`,
+						children: !r && t !== " " && /* @__PURE__ */ E("span", {
+							className: `${m[s]} font-mono font-semibold select-none leading-none`,
 							style: { color: o ? "#eb4034" : O },
 							children: t
 						})
 					});
 				};
-				return /* @__PURE__ */ x(y, { children: [
-					/* @__PURE__ */ b("div", {
-						style: j,
+				return /* @__PURE__ */ D(T, { children: [
+					/* @__PURE__ */ E("div", {
+						style: R,
 						children: n(t, !0)
 					}),
-					/* @__PURE__ */ b("div", {
-						style: M,
-						children: n(Z, !1)
+					/* @__PURE__ */ E("div", {
+						style: z,
+						children: n($, !1)
 					}),
-					/* @__PURE__ */ x("div", {
-						style: N,
-						children: [n(Z, !0), /* @__PURE__ */ b("div", { style: P })]
-					}, `ft-${z}`),
-					/* @__PURE__ */ x("div", {
-						style: F,
-						children: [n(t, !1), /* @__PURE__ */ b("div", { style: I[c] })]
-					}, `fb-${z}`),
-					/* @__PURE__ */ b("div", { style: L[c] }, `fs-${z}`),
-					/* @__PURE__ */ b("div", {
-						className: `absolute top-1/2 left-0 right-0 h-[1px] ${S ? "bg-black/10" : "bg-black/30"}`,
-						style: { zIndex: 5 }
+					/* @__PURE__ */ D("div", {
+						style: F.topFlap,
+						children: [n($, !0), /* @__PURE__ */ E("div", { style: B })]
+					}, `ft-${I}`),
+					/* @__PURE__ */ D("div", {
+						style: F.bottomFlap,
+						children: [n(t, !1), /* @__PURE__ */ E("div", { style: V[c] })]
+					}, `fb-${I}`),
+					/* @__PURE__ */ E("div", { style: F.castShadow[c] }, `fs-${I}`),
+					/* @__PURE__ */ E("div", {
+						className: "absolute top-1/2 left-0 right-0 h-[2px] pointer-events-none",
+						style: _[c]
 					})
 				] });
 			})(),
-			!g && !V && z === A && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
-				className: `absolute top-1/2 left-0 right-0 h-[1px] ${S ? "bg-black/10" : "bg-black/30"}`,
-				style: { zIndex: 3 }
-			}), /* @__PURE__ */ b("div", {
+			!y && !H && I === N && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("div", {
+				className: "absolute top-1/2 left-0 right-0 h-[2px] pointer-events-none",
+				style: _[c]
+			}), /* @__PURE__ */ E("div", {
 				className: "absolute inset-0 pointer-events-none",
 				style: {
 					zIndex: 1,
-					background: S ? "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: 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%)"
 				}
 			})] })
 		]
 	}) });
-}, (e, t) => s(e.token, t.token) && e.size === t.size && e.boardType === t.boardType && e.isAnimating === t.isAnimating && e.animationsEnabled === t.animationsEnabled), X = (e) => `Board display: ${e}`, Z = m(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, loadingLabel: _ = "Loading board display", emptyLabel: v = "Empty board display", messageLabel: y = X }) {
-	let C = l(a, f, p), w = c(a), T = n === "sm" ? "6px" : n === "md" ? "8px" : "10px", E = g(() => o(e ?? "", C.rows, C.cols, a), [
+}, (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), ee = (e) => `Board display: ${e}`, te = 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 = ee }) {
+	let x = y(), C = h && !x, w = I(g), T = l(a, f, p), k = c(a), A = n === "sm" ? "6px" : n === "md" ? "8px" : "10px", j = S(() => o(e ?? "", T.rows, T.cols, a), [
 		e,
-		C.rows,
-		C.cols,
+		T.rows,
+		T.cols,
 		a
-	]), D = i === "white", O = D ? "var(--color-board-bezel-light)" : "var(--color-board-bezel-dark)", k = D ? "var(--color-board-bezel-border-light)" : "var(--color-board-bezel-border-dark)", A = R[i], j = n === "sm" ? "rounded-lg border-[3px]" : "rounded-lg sm:rounded-xl border-[3px] sm:border-[4px] lg:border-[5px]", M = g(() => t ? _ : e ? y(e.replace(/\{[^}]*\}/g, "").replace(/\n/g, " ").trim()) : v, [
+	]), 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 = G[i], L = n === "sm" ? "rounded-lg border-[3px]" : "rounded-lg sm:rounded-xl border-[3px] sm:border-[4px] lg:border-[5px]", R = S(() => t ? _ : e ? b(e.replace(/\{[^}]*\}/g, "").replace(/\n/g, " ").trim()) : v, [
 		e,
 		t,
 		_,
 		v,
-		y
+		b
 	]);
-	return /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ D("div", {
 		className: "w-full flex justify-center",
-		children: [!s && /* @__PURE__ */ b("style", {
+		children: [!s && /* @__PURE__ */ E("style", {
 			href: "board-flap-keyframes",
 			precedence: "default",
-			children: S
-		}), /* @__PURE__ */ b("div", {
+			children: O
+		}), /* @__PURE__ */ E("div", {
 			role: "img",
-			"aria-label": M,
+			"aria-label": R,
 			"data-slot": "board-display",
 			"data-board-preview": "",
-			className: `${j} ${r} max-w-full`,
+			className: `${L} ${r} max-w-full`,
 			style: {
-				backgroundColor: O,
-				borderColor: k,
-				boxShadow: A,
+				backgroundColor: N,
+				borderColor: P,
+				boxShadow: F,
 				width: "fit-content"
 			},
-			children: /* @__PURE__ */ b("div", {
+			children: /* @__PURE__ */ E("div", {
 				className: `${d[n]} relative`,
 				"aria-hidden": "true",
-				style: { background: D ? "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__ */ b("div", {
+				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__ */ E("div", {
 					className: `flex flex-col ${u[n]}`,
-					children: E.map((e, r) => {
-						let a = w && r > 0 && r % 3 == 0;
-						return s ? /* @__PURE__ */ b(B, {
+					children: j.map((e, r) => {
+						let a = k && r > 0 && r % 3 == 0;
+						return s ? /* @__PURE__ */ E(q, {
 							row: e,
 							rowIdx: r,
 							size: n,
 							gapClass: u[n],
 							boardType: i,
-							showSeams: w,
+							showSeams: k,
 							isRowSeam: a,
-							seamGap: T,
+							seamGap: A,
 							emitCellMetadata: m
-						}, `row-${r}`) : /* @__PURE__ */ b(V, {
+						}, `row-${r}`) : /* @__PURE__ */ E(J, {
 							row: e,
 							rowIdx: r,
 							size: n,
 							gapClass: u[n],
 							boardType: i,
 							isAnimating: t,
-							animationsEnabled: h,
-							showSeams: w,
+							animationsEnabled: C,
+							flapStepMs: w,
+							showSeams: k,
 							isRowSeam: a,
-							seamGap: T,
+							seamGap: A,
 							emitCellMetadata: m
 						}, `row-${r}`);
 					})
@@ -507,8 +557,8 @@ var Y = m(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 			})
 		})]
 	});
-}, (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 && 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);
 //#endregion
-export { Z as BoardDisplay };
+export { te as BoardDisplay, N as FLAP_SPEED_PRESETS, L as deriveFlapTiming, I as resolveFlapSpeed };
 
 //# sourceMappingURL=board-display.js.map