@fiestaboard/ui 3.3.0 → 4.0.0

package/dist/components/board/board-backdrop.d.ts

@@ -0,0 +1,60 @@
+export interface BoardBackdropProps {
+    /**
+     * Short board phrases to draw from — the kind of line this product actually
+     * displays. They are packed edge to edge to build each row, so give it more
+     * than you need: variety across the field comes from the size of this pool.
+     */
+    phrases: string[];
+    /** Number of rows to build. */
+    rowCount?: number;
+    /** Tiles per row before the field is scaled up to cover. */
+    tiles?: number;
+    /** Rows past this index are `display:none` below `sm`. */
+    mobileRows?: number;
+    /** Changes the arrangement. Same seed always yields the same field. */
+    seed?: number;
+    /**
+     * Pin to the viewport instead of the nearest positioned ancestor.
+     *
+     * Use this inside a full-screen scrolling shell. Positioned `absolute` there,
+     * the field is only as tall as the scroll container's first screen, so it
+     * scrolls away and the array visibly ends — which is the one thing a
+     * "continues past every edge" background must never do.
+     */
+    fixed?: boolean;
+    className?: string;
+}
+/**
+ * A field of split-flap rows, used as a page backdrop.
+ *
+ * This replaces the WebGL `Aurora` that used to sit behind the setup wizard.
+ * The aurora was a generic gradient that could have been behind any product;
+ * this is the actual object the user just bought, showing the kind of line it
+ * is about to display.
+ *
+ * THE PERFORMANCE STORY IS THE WHOLE DESIGN, because a first-run screen is
+ * disproportionately likely to be opened on a phone:
+ *
+ *   * `BoardTeaser` is static — `memo` + `useMemo`, no effects, no rAF. Once
+ *     painted, a row costs nothing. The aurora it replaces held a WebGL
+ *     context open and ran a shader every frame for as long as the screen was
+ *     up, which is the single most expensive thing a background can do.
+ *   * The reveal is ONE-SHOT. Rows settle in on mount and then stop; there is
+ *     no loop to keep the compositor awake. "Splashy" is an entrance here, not
+ *     an ambient state.
+ *   * It animates `transform` and `opacity` only, so the settle stays on the
+ *     compositor and never triggers layout or paint.
+ *   * Rows past `mobileRows` are `display:none` below `sm`. To be precise
+ *     about what that does and does not buy: React still builds those tiles,
+ *     so it saves layout, paint and compositing, not reconciliation. Skipping
+ *     the render outright would need a viewport hook, which is JS on the
+ *     critical path of a first-run screen — a worse trade than the DOM it
+ *     would save.
+ *   * `prefers-reduced-motion` renders the field already settled, with no
+ *     animation declared.
+ *
+ * The mask is what keeps it a backdrop rather than a picture: the field fades
+ * out toward the centre so foreground content always sits on flat surface, and
+ * the rows read as something happening behind the app.
+ */
+export declare function BoardBackdrop({ phrases, rowCount, tiles, mobileRows, seed, fixed, className, }: BoardBackdropProps): import("react").JSX.Element;

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

@@ -0,0 +1,71 @@
+import { cn as e } from "../../lib/utils.js";
+import { BoardTeaser as t } from "./board-teaser.js";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/board/board-backdrop.tsx
+var i = [
+	"{63}",
+	"{64}",
+	"{65}",
+	"{66}",
+	"{67}",
+	"{68}"
+];
+function a(e) {
+	let t = e | 0;
+	return () => {
+		t = t + 1831565813 | 0;
+		let e = Math.imul(t ^ t >>> 15, 1 | t);
+		return e = e + Math.imul(e ^ e >>> 7, 61 | e) ^ e, ((e ^ e >>> 14) >>> 0) / 4294967296;
+	};
+}
+function o(e) {
+	return e.replace(/\{\d+\}/g, "#").length;
+}
+function s(e, t, n, r) {
+	let s = a(r), c = [];
+	for (let r = 0; r < t; r++) {
+		let t = "", r = 0;
+		for (; o(t) < n && r++ < 40;) s() < .22 ? t += i[Math.floor(s() * i.length)] : t += e[Math.floor(s() * e.length)], t += " ".repeat(1 + Math.floor(s() * 3));
+		let a = "";
+		for (let e of t.match(/\{\d+\}|./g) ?? []) {
+			if (o(a + e) > n) break;
+			a += e;
+		}
+		c.push(a);
+	}
+	return c;
+}
+function c({ phrases: i, rowCount: a = 16, tiles: o = 30, mobileRows: c = 14, seed: l = 7, fixed: u = !1, className: d }) {
+	let f = n(() => s(i, a, o, l), [
+		i,
+		a,
+		o,
+		l
+	]);
+	return /* @__PURE__ */ r("div", {
+		"aria-hidden": "true",
+		"data-slot": "board-backdrop",
+		className: e("pointer-events-none inset-0 overflow-hidden select-none", u ? "fixed" : "absolute", "[mask-image:radial-gradient(78%_62%_at_50%_45%,transparent_8%,rgba(0,0,0,0.6)_46%,#000_82%)]", "[-webkit-mask-image:radial-gradient(78%_62%_at_50%_45%,transparent_8%,rgba(0,0,0,0.6)_46%,#000_82%)]", d),
+		children: /* @__PURE__ */ r("div", {
+			className: "absolute inset-0 flex origin-center scale-[1.7] items-center justify-center sm:scale-[1.9]",
+			children: /* @__PURE__ */ r("div", {
+				className: "flex flex-col gap-[3px] sm:gap-[4px] md:gap-[5px] lg:gap-[6px]",
+				children: f.map((n, i) => /* @__PURE__ */ r("div", {
+					className: e("board-backdrop-row", i >= c && "hidden sm:block"),
+					style: { animationDelay: `${50 + i * 55}ms` },
+					children: /* @__PURE__ */ r(t, {
+						teaser: n,
+						tiles: o,
+						size: "md",
+						boardType: "black"
+					})
+				}, `${i}-${n}`))
+			})
+		})
+	});
+}
+//#endregion
+export { c as BoardBackdrop };
+
+//# sourceMappingURL=board-backdrop.js.map

package/dist/components/board/board-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-backdrop.js","names":[],"sources":["../../../src/components/board/board-backdrop.tsx"],"mappings":";;;;;AAiCA,IAAM,IAAc;CAAC;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;AAAM;AAUnE,SAAS,EAAI,GAAc;CACzB,IAAI,IAAI,IAAO;CACf,aAAa;EACX,IAAK,IAAI,aAAc;EACvB,IAAI,IAAI,KAAK,KAAK,IAAK,MAAM,IAAK,IAAI,CAAC;EAEvC,OADA,IAAK,IAAI,KAAK,KAAK,IAAK,MAAM,GAAI,KAAK,CAAC,IAAK,KACpC,IAAK,MAAM,QAAS,KAAK;CACpC;AACF;AAGA,SAAS,EAAU,GAAW;CAC5B,OAAO,EAAE,QAAQ,YAAY,GAAG,CAAC,CAAC;AACpC;AASA,SAAS,EAAU,GAAmB,GAAkB,GAAe,GAAwB;CAC7F,IAAM,IAAO,EAAI,CAAI,GACf,IAAgB,CAAC;CACvB,KAAK,IAAI,IAAI,GAAG,IAAI,GAAU,KAAK;EACjC,IAAI,IAAM,IAGN,IAAQ;EACZ,OAAO,EAAU,CAAG,IAAI,KAAS,MAAU,KAGzC,AAFI,EAAK,IAAI,MAAM,KAAO,EAAY,KAAK,MAAM,EAAK,IAAI,EAAY,MAAM,KACvE,KAAO,EAAQ,KAAK,MAAM,EAAK,IAAI,EAAQ,MAAM,IACtD,KAAO,IAAI,OAAO,IAAI,KAAK,MAAM,EAAK,IAAI,CAAC,CAAC;EAG9C,IAAI,IAAM;EACV,KAAK,IAAM,KAAS,EAAI,MAAM,YAAY,KAAK,CAAC,GAAG;GACjD,IAAI,EAAU,IAAM,CAAK,IAAI,GAAO;GACpC,KAAO;EACT;EACA,EAAI,KAAK,CAAG;CACd;CACA,OAAO;AACT;AAmCA,SAAgB,EAAc,EAC5B,YACA,cAAW,IACX,WAAQ,IACR,gBAAa,IACb,UAAO,GACP,WAAQ,IACR,gBACqB;CACrB,IAAM,IAAO,QAAc,EAAU,GAAS,GAAU,GAAO,CAAI,GAAG;EAAC;EAAS;EAAU;EAAO;CAAI,CAAC;CACtG,OACE,kBAAC,OAAD;EACE,eAAY;EACZ,aAAU;EACV,WAAW,EACT,2DACA,IAAQ,UAAU,YAMlB,gGACA,wGACA,CACF;EAOA,UAAA,kBAAC,OAAD;GAAK,WAAU;GAIb,UAAA,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,EAAK,KAAK,GAAK,MACd,kBAAC,OAAD;KAEE,WAAW,EAAG,sBAAsB,KAAK,KAAc,iBAAiB;KACxE,OAAO,EAAE,gBAAgB,GAAG,KAAK,IAAI,GAAG,IAAI;KAE5C,UAAA,kBAAC,GAAD;MAAa,QAAQ;MAAY;MAAO,MAAK;MAAK,WAAU;KAAS,CAAA;IAClE,GALE,GAAG,EAAE,GAAG,GAKV,CACN;GACE,CAAA;EACF,CAAA;CACF,CAAA;AAET"}

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

@@ -1,14 +1,14 @@
 "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, 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 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";
+import { gapClasses as l, paddingClasses as u, radiusClasses as d, sizeClasses as f, textSizeClasses as p } from "../../lib/board-metrics.js";
+import { SEAM_CLASS as m, charLeafBoxShadow as ee, seamStyle as h } from "./board-surfaces.js";
+import { isNoteArray as g, resolveDimensions as _ } from "../../lib/board-dimensions.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";
 //#region src/components/board/board-display.tsx
-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 = {
+var te = "\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    "
 }, A = {
@@ -162,48 +162,48 @@ function re(e) {
 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    "
-}, 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]
+}, W = 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 = f[a], g = p[a], _ = d[a], v = /* @__PURE__ */ D("div", {
+		className: m,
+		style: h[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__ */ D("div", {
-			className: `${u} relative ${f} overflow-hidden`,
+		return /* @__PURE__ */ O("div", {
+			className: `${u} relative ${_} overflow-hidden`,
 			style: { backgroundColor: c },
-			children: [/* @__PURE__ */ E("div", {
-				className: `absolute ${f}`,
+			children: [/* @__PURE__ */ D("div", {
+				className: `absolute ${_}`,
 				style: {
 					inset: n,
 					backgroundColor: t,
 					boxShadow: M
 				}
-			}), _]
+			}), v]
 		});
 	}
-	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`,
+	let y = n[r.value] ? r.value : t[i(r.value)], b = y === " ";
+	return /* @__PURE__ */ O("div", {
+		className: `${u} relative ${_} overflow-hidden flex items-center justify-center`,
 		style: {
 			backgroundColor: c,
-			boxShadow: te[o]
+			boxShadow: ee[o]
 		},
-		children: [!y && /* @__PURE__ */ E("span", {
-			className: `${d} font-mono font-semibold select-none leading-none`,
+		children: [!b && /* @__PURE__ */ D("span", {
+			className: `${g} font-mono font-semibold select-none leading-none`,
 			style: { color: r.value === "♥" ? "#eb4034" : l },
-			children: v
-		}), _]
+			children: y
+		}), v]
 	});
-}), 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", {
+}), G = 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", {
 		"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__ */ E("div", {
+			return /* @__PURE__ */ D("div", {
 				"data-note-tile": "",
 				...l ? {
 					"data-row": t,
@@ -212,7 +212,7 @@ var U = {
 				} : {},
 				...s ? { "data-note-col-seam": "true" } : {},
 				style: s ? { marginLeft: c } : void 0,
-				children: /* @__PURE__ */ E(W, {
+				children: /* @__PURE__ */ D(W, {
 					token: e,
 					size: n,
 					boardType: a
@@ -220,15 +220,15 @@ var U = {
 			}, `col-${t}-${i}`);
 		})
 	});
-}), 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", {
+}), K = 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", {
 		"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__ */ E("div", {
+			return /* @__PURE__ */ D("div", {
 				"data-note-tile": "",
 				...d ? {
 					"data-row": t,
@@ -236,7 +236,7 @@ var U = {
 				} : {},
 				...l ? { "data-note-col-seam": "true" } : {},
 				style: l ? { marginLeft: u } : void 0,
-				children: /* @__PURE__ */ E(X, {
+				children: /* @__PURE__ */ D(X, {
 					token: e,
 					size: n,
 					boardType: i,
@@ -262,7 +262,7 @@ function J(e, t) {
 function Y(e) {
 	e.intervalId !== null && (clearInterval(e.intervalId), e.intervalId = null);
 }
-_?.addEventListener("change", (e) => {
+v?.addEventListener("change", (e) => {
 	for (let [t, n] of q) e.matches ? Y(n) : n.subscribers.size > 0 && J(t, n);
 });
 function ie(e, t) {
@@ -272,22 +272,22 @@ function ie(e, t) {
 		intervalId: null
 	}, q.set(e, n));
 	let r = n;
-	return r.subscribers.add(t), _?.matches || J(e, r), () => {
+	return r.subscribers.add(t), v?.matches || J(e, r), () => {
 		r.subscribers.delete(t), r.subscribers.size === 0 && (Y(r), q.delete(e));
 	};
 }
-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(() => {
+var X = b(function({ token: o, size: s = "md", boardType: c = "black", isAnimating: l = !1, animationsEnabled: u = !0, flapStepMs: m, rowIdx: g = 0, colIdx: _ = 0 }) {
+	let v = u && l, y = c === "white", b = y ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", C = y ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", te = r(o), k = i(te), N = m, P = re(N), [F, I] = T(() => k), [L, V] = T(!1), H = w(F), U = w(!1), W = w(k), G = w(v), K = w(!1), q = w(k);
+	S(() => {
 		q.current = k;
 	}, [k]);
-	let J = b((e) => {
+	let J = x((e) => {
 		H.current = e, I(e);
-	}, []), Y = b((e) => {
+	}, []), Y = x((e) => {
 		U.current = e, V(e);
-	}, []), X = C(null), ae = C(0), Z = b(() => {
+	}, []), X = w(null), ae = w(0), Z = x(() => {
 		X.current !== null && (clearInterval(X.current), X.current = null);
-	}, []), Q = b(() => {
+	}, []), Q = x(() => {
 		let e = W.current, n = H.current, r = () => {
 			Z(), Y(!1), K.current = !1;
 		};
@@ -301,18 +301,18 @@ var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 		J,
 		Y,
 		Z
-	]), $ = b((e) => {
+	]), $ = x((e) => {
 		(X.current === null || ae.current !== e) && (Z(), ae.current = e, X.current = setInterval(Q, e));
 	}, [Q, Z]);
-	x(() => Z, [Z]), x(() => {
+	S(() => Z, [Z]), S(() => {
 		let e = G.current;
-		G.current = _;
+		G.current = v;
 		let n = q.current;
 		if (!u) {
 			Z(), Y(!1), J(n), W.current = n, K.current = !1;
 			return;
 		}
-		if (_) {
+		if (v) {
 			Y(!1), Z(), e || J(n);
 			let r = ie(N, () => {
 				J((H.current + 1) % t.length);
@@ -333,7 +333,7 @@ var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 		}
 		U.current || (Z(), H.current !== n && J(n));
 	}, [
-		_,
+		v,
 		N,
 		u,
 		J,
@@ -341,12 +341,12 @@ var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 		$,
 		Q,
 		Z
-	]), x(() => {
+	]), S(() => {
 		if (!u) {
 			W.current = k, Z(), Y(!1), J(k);
 			return;
 		}
-		if (_ || K.current) {
+		if (v || K.current) {
 			W.current = k;
 			return;
 		}
@@ -362,7 +362,7 @@ var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 		Y(!0), Q(), U.current && $(N);
 	}, [
 		k,
-		_,
+		v,
 		N,
 		u,
 		J,
@@ -372,23 +372,23 @@ var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 		Z
 	]);
 	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}`,
+	return /* @__PURE__ */ D(E, { children: /* @__PURE__ */ O("div", {
+		className: `relative ${f[s]} ${d[s]} overflow-hidden`,
+		"data-testid": `char-tile-${g}-${_}`,
 		"data-current-char": oe,
-		"data-target-char": O,
-		"data-is-animating": _,
+		"data-target-char": te,
+		"data-is-animating": v,
 		"data-is-transitioning": L,
-		style: _ || L ? j[c] : A[c],
+		style: v || L ? j[c] : A[c],
 		children: [
-			!_ && !L && (() => {
+			!v && !L && (() => {
 				if (o.type === "color") {
-					let t = e(o.code, v);
-					return /* @__PURE__ */ E("div", {
+					let t = e(o.code, y);
+					return /* @__PURE__ */ D("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__ */ E("div", {
-							className: `relative ${p[s]} overflow-hidden`,
+						children: /* @__PURE__ */ D("div", {
+							className: `relative ${d[s]} overflow-hidden`,
 							style: {
 								marginTop: "var(--color-margin-top)",
 								marginBottom: "var(--color-margin-bottom)",
@@ -402,45 +402,45 @@ var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 						})
 					}, `static-color-${o.code}`);
 				}
-				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", {
+				let i = r(o), l = n[i] ? i : t[k], u = a(l), f = u ? e(l, y) : b, m = l === "♥" ? "#eb4034" : C;
+				return /* @__PURE__ */ O("div", {
 					className: "absolute inset-0 flex items-center justify-center overflow-hidden",
 					style: {
 						zIndex: 2,
-						backgroundColor: d,
+						backgroundColor: f,
 						marginLeft: u ? "-4px" : 0,
 						marginRight: u ? "-4px" : 0,
-						boxShadow: u ? void 0 : te[c]
+						boxShadow: u ? void 0 : ee[c]
 					},
 					children: [
-						!u && l !== " " && /* @__PURE__ */ E("span", {
-							className: `${m[s]} font-mono font-semibold select-none leading-none relative z-10`,
-							style: { color: f },
+						!u && l !== " " && /* @__PURE__ */ D("span", {
+							className: `${p[s]} font-mono font-semibold select-none leading-none relative z-10`,
+							style: { color: m },
 							children: l
 						}),
-						!u && l === " " && /* @__PURE__ */ E("span", {
-							className: `${m[s]} font-mono font-semibold select-none leading-none relative z-10`,
+						!u && l === " " && /* @__PURE__ */ D("span", {
+							className: `${p[s]} font-mono font-semibold select-none leading-none relative z-10`,
 							style: {
-								color: S,
+								color: C,
 								visibility: "hidden"
 							},
 							"aria-hidden": "true",
 							children: " "
 						}),
-						u && /* @__PURE__ */ E("div", {
-							className: `absolute inset-0 ${p[s]}`,
+						u && /* @__PURE__ */ D("div", {
+							className: `absolute inset-0 ${d[s]}`,
 							style: {
-								backgroundColor: d,
+								backgroundColor: f,
 								boxShadow: M
 							}
 						})
 					]
 				}, `static-char-${k}`);
 			})(),
-			(_ || L) && (() => {
+			(v || L) && (() => {
 				let t = oe, n = (t, n) => {
-					let r = a(t), i = r ? e(t, v) : y, o = t === "♥";
-					return /* @__PURE__ */ E("div", {
+					let r = a(t), i = r ? e(t, y) : b, o = t === "♥";
+					return /* @__PURE__ */ D("div", {
 						style: {
 							position: "absolute",
 							...n ? { top: 0 } : { bottom: 0 },
@@ -452,96 +452,96 @@ var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 							justifyContent: "center",
 							backgroundColor: i
 						},
-						children: !r && t !== " " && /* @__PURE__ */ E("span", {
-							className: `${m[s]} font-mono font-semibold select-none leading-none`,
-							style: { color: o ? "#eb4034" : S },
+						children: !r && t !== " " && /* @__PURE__ */ D("span", {
+							className: `${p[s]} font-mono font-semibold select-none leading-none`,
+							style: { color: o ? "#eb4034" : C },
 							children: t
 						})
 					});
 				};
-				return /* @__PURE__ */ D(T, { children: [
-					/* @__PURE__ */ E("div", {
+				return /* @__PURE__ */ O(E, { children: [
+					/* @__PURE__ */ D("div", {
 						style: ne,
 						children: n(t, !0)
 					}),
-					/* @__PURE__ */ E("div", {
+					/* @__PURE__ */ D("div", {
 						style: R,
 						children: n(ce, !1)
 					}),
-					/* @__PURE__ */ D("div", {
+					/* @__PURE__ */ O("div", {
 						style: P.topFlap,
-						children: [n(ce, !0), /* @__PURE__ */ E("div", { style: z })]
+						children: [n(ce, !0), /* @__PURE__ */ D("div", { style: z })]
 					}, `ft-${F}`),
-					/* @__PURE__ */ D("div", {
+					/* @__PURE__ */ O("div", {
 						style: P.bottomFlap,
-						children: [n(t, !1), /* @__PURE__ */ E("div", { style: B[c] })]
+						children: [n(t, !1), /* @__PURE__ */ D("div", { style: B[c] })]
 					}, `fb-${F}`),
-					/* @__PURE__ */ E("div", { style: P.castShadow[c] }, `fs-${F}`),
-					/* @__PURE__ */ E("div", {
+					/* @__PURE__ */ D("div", { style: P.castShadow[c] }, `fs-${F}`),
+					/* @__PURE__ */ D("div", {
 						className: "absolute top-1/2 left-0 right-0 h-[2px] pointer-events-none",
-						style: g[c]
+						style: h[c]
 					})
 				] });
 			})(),
-			!_ && !L && F === k && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("div", {
+			!v && !L && F === k && /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("div", {
 				className: "absolute top-1/2 left-0 right-0 h-[2px] pointer-events-none",
-				style: g[c]
-			}), /* @__PURE__ */ E("div", {
+				style: h[c]
+			}), /* @__PURE__ */ D("div", {
 				className: "absolute inset-0 pointer-events-none",
 				style: {
 					zIndex: 1,
-					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%)"
+					background: y ? "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), 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, 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 = b(function({ message: e, isLoading: t = !1, size: n = "md", className: r = "", boardType: i = "black", deviceType: a = "flagship", isStatic: c = !1, notesWide: d = 1, notesTall: f = 1, emitCellMetadata: p = !1, animationsEnabled: m = !0, flapSpeed: ee = "standard", loadingLabel: h = "Loading board display", emptyLabel: v = "Empty board display", messageLabel: b = ae, announceUpdates: x = !1 }) {
+	let S = y(), w = m && !S, E = I(ee), k = _(a, d, f), A = g(a), j = n === "sm" ? "6px" : n === "md" ? "8px" : "10px", M = C(() => o(e ?? "", k.rows, k.cols, a), [
 		e,
 		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)", 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 _;
+	]), 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 = C(() => {
+		if (t) return h;
+		if (!e) return v;
 		let n = s(e, a);
-		return n ? y(n) : Z;
+		return n ? b(n) : Z;
 	}, [
 		e,
 		a,
 		t,
-		g,
-		_,
-		y
-	]), [z, B] = w(() => ({
+		h,
+		v,
+		b
+	]), [z, B] = T(() => ({
 		text: "",
 		of: R,
-		armed: b
+		armed: x
 	}));
-	return b && !z.armed ? B({
+	return x && !z.armed ? B({
 		text: "",
 		of: R,
 		armed: !0
-	}) : b && !t && z.of !== R && B({
+	}) : x && !t && z.of !== R && B({
 		text: R,
 		of: R,
 		armed: !0
-	}), /* @__PURE__ */ D("div", {
+	}), /* @__PURE__ */ O("div", {
 		className: "w-full flex justify-center",
 		children: [
-			!c && /* @__PURE__ */ E("style", {
+			!c && /* @__PURE__ */ D("style", {
 				href: "board-flap-keyframes",
 				precedence: "default",
-				children: O
+				children: te
 			}),
-			b && /* @__PURE__ */ E("div", {
+			x && /* @__PURE__ */ D("div", {
 				className: "sr-only",
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				"data-slot": "board-display-announcer",
 				children: z.text
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				role: "img",
 				"aria-label": R,
 				"data-slot": "board-display",
@@ -553,37 +553,37 @@ var X = y(function({ token: o, size: s = "md", boardType: c = "black", isAnimati
 					boxShadow: L,
 					width: "fit-content"
 				},
-				children: /* @__PURE__ */ E("div", {
-					className: `${f[n]} relative`,
+				children: /* @__PURE__ */ D("div", {
+					className: `${u[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: /* @__PURE__ */ D("div", {
+						className: `flex flex-col ${l[n]}`,
 						children: M.map((e, r) => {
 							let a = A && r > 0 && r % 3 == 0;
-							return c ? /* @__PURE__ */ E(G, {
+							return c ? /* @__PURE__ */ D(G, {
 								row: e,
 								rowIdx: r,
 								size: n,
-								gapClass: d[n],
+								gapClass: l[n],
 								boardType: i,
 								showSeams: A,
 								isRowSeam: a,
 								seamGap: j,
-								emitCellMetadata: m
-							}, `row-${r}`) : /* @__PURE__ */ E(K, {
+								emitCellMetadata: p
+							}, `row-${r}`) : /* @__PURE__ */ D(K, {
 								row: e,
 								rowIdx: r,
 								size: n,
-								gapClass: d[n],
+								gapClass: l[n],
 								boardType: i,
 								isAnimating: t,
-								animationsEnabled: C,
-								flapStepMs: T,
+								animationsEnabled: w,
+								flapStepMs: E,
 								showSeams: A,
 								isRowSeam: a,
 								seamGap: j,
-								emitCellMetadata: m
+								emitCellMetadata: p
 							}, `row-${r}`);
 						})
 					})