@fiestaboard/ui 5.6.0 → 5.7.0

package/dist/components/editor/color-picker-content.d.ts

@@ -1,3 +1,4 @@
+import { type Code62Glyph } from "../../lib/board-characters";
 import { type BoardColorName } from "../../lib/board-colors";
 import type { DeviceType } from "../../lib/board-dimensions";
 export interface ColorPickerLabels {
@@ -11,15 +12,38 @@ export interface ColorPickerLabels {
     colorNames: Record<BoardColorName, string>;
     /** Accessible name for one swatch, given its display name. */
     colorOptionLabel: (colorName: string) => string;
+    /**
+     * The code-62 button's wording, per glyph. Which of the two is used is
+     * decided by {@link resolveCode62Glyph}, not by the caller picking a
+     * string — a board that draws ♥ must never be offered a button captioned
+     * "degree", which is half of the bug FiestaBoard#1657 fixed.
+     */
     heartCharacterAriaLabel: string;
     heartLabel: string;
     insertHeartTooltip: string;
+    degreeCharacterAriaLabel: string;
+    degreeLabel: string;
+    insertDegreeTooltip: string;
 }
 export declare const DEFAULT_COLOR_PICKER_LABELS: ColorPickerLabels;
 export interface ColorPickerContentProps {
     /** Receives a template color token, e.g. `{{red}}` — or `°` for the Note heart. */
     onInsert: (colorValue: string) => void;
     deviceType?: DeviceType;
+    /**
+     * Which glyph the target board's character-code-62 flap draws.
+     *
+     * Resolved with {@link resolveCode62Glyph}: Note hardware only ever
+     * shipped the heart flap so this is ignored there, and an unset Flagship
+     * resolves to `"degree"` — the glyph every Flagship carried before the
+     * 2026 hardware change. A caller that has not been taught about the new
+     * flap therefore keeps rendering exactly as it did.
+     *
+     * This cannot be derived from `deviceType`. Since 2026 some Flagships ship
+     * a heart flap in that slot, so the glyph is a property of the individual
+     * board and only its owner knows (FiestaBoard#1657, #1664).
+     */
+    code62Glyph?: Code62Glyph;
     labels?: Partial<ColorPickerLabels>;
 }
-export declare function ColorPickerContent({ onInsert, deviceType, labels }: ColorPickerContentProps): import("react").JSX.Element;
+export declare function ColorPickerContent({ onInsert, deviceType, code62Glyph, labels }: ColorPickerContentProps): import("react").JSX.Element;

package/dist/components/editor/color-picker-content.js

@@ -5,11 +5,12 @@ import { Grid as n } from "../layout/grid.js";
 import { Text as r } from "../typography/text.js";
 import { Tooltip as i, TooltipContent as a, TooltipProvider as o, TooltipTrigger as s } from "../overlays/tooltip.js";
 import { AVAILABLE_COLORS as c, COLOR_DISPLAY as l } from "../../lib/board-colors.js";
-import { Heart as u } from "lucide-react";
-import { useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { resolveCode62Glyph as u } from "../../lib/board-characters.js";
+import { Heart as d, Thermometer as f } from "lucide-react";
+import { useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/editor/color-picker-content.tsx
-var h = {
+var _ = {
 	colorPickerAriaLabel: "Color picker",
 	colorNames: {
 		red: "Red",
@@ -24,95 +25,101 @@ var h = {
 	colorOptionLabel: (e) => `${e} color`,
 	heartCharacterAriaLabel: "Heart character",
 	heartLabel: "heart",
-	insertHeartTooltip: "Insert heart character (Note only)"
-}, g = c, _ = { red: "text-black" }, v = 4;
-function y({ onInsert: c, deviceType: y, labels: b }) {
-	let x = {
-		...h,
-		...b
-	}, S = y === "note", [C, w] = f(-1), T = d([]), E = (e) => {
-		let t = (e % g.length + g.length) % g.length;
-		w(t);
-		let n = T.current[t];
+	insertHeartTooltip: "Insert heart character",
+	degreeCharacterAriaLabel: "Degree character",
+	degreeLabel: "degree",
+	insertDegreeTooltip: "Insert degree character"
+}, v = c, y = { red: "text-black" }, b = 4;
+function x({ onInsert: c, deviceType: x, code62Glyph: S, labels: C }) {
+	let w = {
+		..._,
+		...C
+	}, T = u(x ?? "flagship", S) === "heart", [E, D] = m(-1), O = p([]), k = (e) => {
+		let t = (e % v.length + v.length) % v.length;
+		D(t);
+		let n = O.current[t];
 		n?.scrollIntoView({
 			block: "nearest",
 			behavior: "smooth"
 		}), n?.focus();
 	};
-	return /* @__PURE__ */ p(o, { children: /* @__PURE__ */ m(t, {
-		className: e("p-2", !S && "pb-1"),
+	return /* @__PURE__ */ h(o, { children: /* @__PURE__ */ g(t, {
+		className: e("p-2"),
 		tabIndex: 0,
 		role: "listbox",
-		"aria-label": x.colorPickerAriaLabel,
+		"aria-label": w.colorPickerAriaLabel,
 		onKeyDown: (e) => {
 			switch (e.key) {
 				case "ArrowRight":
-					e.preventDefault(), E(C + 1);
+					e.preventDefault(), k(E + 1);
 					break;
 				case "ArrowLeft":
-					e.preventDefault(), E(C - 1);
+					e.preventDefault(), k(E - 1);
 					break;
 				case "ArrowDown":
-					e.preventDefault(), E(C + v);
+					e.preventDefault(), k(E + b);
 					break;
 				case "ArrowUp":
-					e.preventDefault(), E(C - v);
+					e.preventDefault(), k(E - b);
 					break;
 				case "Enter":
-				case " ": e.preventDefault(), c(`{{${g[C] ?? g[0]}}}`);
+				case " ": e.preventDefault(), c(`{{${v[E] ?? v[0]}}}`);
 			}
 		},
 		onFocus: (e) => {
-			e.target === e.currentTarget && C === -1 && E(0);
+			e.target === e.currentTarget && E === -1 && k(0);
 		},
-		children: [/* @__PURE__ */ p(n, {
+		children: [/* @__PURE__ */ h(n, {
 			cols: "4",
 			gap: "2",
 			className: "w-64",
 			role: "presentation",
-			children: g.map((t, n) => {
-				let o = C === n;
-				return /* @__PURE__ */ m(i, { children: [/* @__PURE__ */ p(s, {
+			children: v.map((t, n) => {
+				let o = E === n;
+				return /* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(s, {
 					asChild: !0,
-					children: /* @__PURE__ */ p("button", {
+					children: /* @__PURE__ */ h("button", {
 						ref: (e) => {
-							T.current[n] = e;
+							O.current[n] = e;
 						},
 						type: "button",
 						onClick: () => c(`{{${t}}}`),
-						onFocus: () => w(n),
-						className: e("h-10 rounded-md text-xs font-medium transition-all hover:scale-105 hover:shadow-md", "flex items-center justify-center focus:outline-none", o && "ring-2 ring-offset-2 ring-primary scale-105 shadow-md", l[t].bg, _[t] ?? l[t].text),
-						"aria-label": x.colorOptionLabel(x.colorNames[t]),
+						onFocus: () => D(n),
+						className: e("h-10 rounded-md text-xs font-medium transition-all hover:scale-105 hover:shadow-md", "flex items-center justify-center focus:outline-none", o && "ring-2 ring-offset-2 ring-primary scale-105 shadow-md", l[t].bg, y[t] ?? l[t].text),
+						"aria-label": w.colorOptionLabel(w.colorNames[t]),
 						role: "option",
 						"aria-selected": o,
-						children: x.colorNames[t]
+						children: w.colorNames[t]
 					})
-				}), /* @__PURE__ */ p(a, { children: /* @__PURE__ */ p(r, { children: x.colorNames[t] }) })] }, t);
+				}), /* @__PURE__ */ h(a, { children: /* @__PURE__ */ h(r, { children: w.colorNames[t] }) })] }, t);
 			})
-		}), S && /* @__PURE__ */ p(t, {
+		}), /* @__PURE__ */ h(t, {
 			className: "mt-2 pt-2 border-t border-border",
 			role: "presentation",
-			children: /* @__PURE__ */ m(i, { children: [/* @__PURE__ */ p(s, {
+			children: /* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(s, {
 				asChild: !0,
-				children: /* @__PURE__ */ m("button", {
+				children: /* @__PURE__ */ g("button", {
 					type: "button",
 					onClick: () => c("°"),
-					className: e("w-full h-10 rounded-md text-sm font-medium transition-all hover:scale-[1.02] hover:shadow-md", "flex items-center justify-center gap-1.5 focus:outline-none", "bg-board-red/10 text-board-red border border-board-red/20 hover:bg-board-red/20"),
-					"aria-label": x.heartCharacterAriaLabel,
+					className: e("w-full h-10 rounded-md text-sm font-medium transition-all hover:scale-[1.02] hover:shadow-md", "flex items-center justify-center gap-1.5 focus:outline-none", T ? "bg-board-red/10 text-board-red border border-board-red/20 hover:bg-board-red/20" : "bg-muted text-foreground border border-input hover:bg-accent"),
+					"aria-label": T ? w.heartCharacterAriaLabel : w.degreeCharacterAriaLabel,
 					role: "option",
 					"aria-selected": !1,
-					children: [/* @__PURE__ */ p(u, { className: "w-4 h-4 fill-current" }), /* @__PURE__ */ p(r, {
+					children: [T ? /* @__PURE__ */ h(d, { className: "w-4 h-4 fill-current" }) : /* @__PURE__ */ h(f, {
+						className: "w-4 h-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ h(r, {
 						as: "span",
 						weight: "medium",
-						className: "text-board-red",
-						children: x.heartLabel
+						className: T ? "text-board-red" : void 0,
+						children: T ? w.heartLabel : w.degreeLabel
 					})]
 				})
-			}), /* @__PURE__ */ p(a, { children: /* @__PURE__ */ p(r, { children: x.insertHeartTooltip }) })] })
+			}), /* @__PURE__ */ h(a, { children: /* @__PURE__ */ h(r, { children: T ? w.insertHeartTooltip : w.insertDegreeTooltip }) })] })
 		})]
 	}) });
 }
 //#endregion
-export { y as ColorPickerContent, h as DEFAULT_COLOR_PICKER_LABELS };
+export { x as ColorPickerContent, _ as DEFAULT_COLOR_PICKER_LABELS };
 
 //# sourceMappingURL=color-picker-content.js.map

package/dist/components/editor/color-picker-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-content.js","names":[],"sources":["../../../src/components/editor/color-picker-content.tsx"],"mappings":"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"}
+{"version":3,"file":"color-picker-content.js","names":[],"sources":["../../../src/components/editor/color-picker-content.tsx"],"mappings":"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"}

package/dist/components/editor/draw-char-picker-content.d.ts

@@ -1,11 +1,12 @@
+import { type Code62Glyph } from "../../lib/board-characters";
 import type { DeviceType } from "../../lib/board-dimensions";
 import type { DrawBrush } from "./utils/draw-mode";
 export interface DrawCharPickerLabels {
     /** Accessible name for the character grid. */
     characters: string;
-    /** Accessible name for the code-62 button on Flagship hardware. */
+    /** Accessible name for the code-62 button when the flap draws a degree sign. */
     degree: string;
-    /** Accessible name for the code-62 button on a Note, where it draws a heart. */
+    /** Accessible name for the code-62 button when the flap draws a heart. */
     heart: string;
 }
 export declare const DEFAULT_DRAW_CHAR_PICKER_LABELS: DrawCharPickerLabels;
@@ -17,6 +18,15 @@ export interface DrawCharPickerContentProps {
      * the inserted character is the degree symbol either way.
      */
     deviceType?: DeviceType;
+    /**
+     * Which glyph the target board's code-62 flap draws. Same contract as
+     * {@link ColorPickerContent}: resolved with {@link resolveCode62Glyph},
+     * and unset means today's behaviour. Without it a 2026 heart-flap Flagship
+     * draws ° here while its board shows ♥, and announces "Degree" for a key
+     * that paints a heart — WCAG 1.1.1, and the same mismatch FiestaBoard#1657
+     * fixed in the colour picker.
+     */
+    code62Glyph?: Code62Glyph;
     labels?: Partial<DrawCharPickerLabels>;
 }
-export declare function DrawCharPickerContent({ current, onSelect, deviceType, labels }: DrawCharPickerContentProps): import("react").JSX.Element;
+export declare function DrawCharPickerContent({ current, onSelect, deviceType, code62Glyph, labels, }: DrawCharPickerContentProps): import("react").JSX.Element;

package/dist/components/editor/draw-char-picker-content.js

@@ -2,71 +2,72 @@
 import { cn as e } from "../../lib/utils.js";
 import { Box as t } from "../layout/box.js";
 import { Grid as n } from "../layout/grid.js";
-import { DRAW_CHARS as r } from "./utils/draw-mode.js";
-import { useRef as i, useState as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { resolveCode62Glyph as r } from "../../lib/board-characters.js";
+import { DRAW_CHARS as i } from "./utils/draw-mode.js";
+import { useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/components/editor/draw-char-picker-content.tsx
-var s = "°", c = "♥", l = {
+var c = "°", l = "♥", u = {
 	characters: "Characters",
 	degree: "Degree",
 	heart: "Heart"
-}, u = 8;
-function d({ current: d, onSelect: f, deviceType: p, labels: m }) {
-	let h = {
-		...l,
-		...m
-	}, g = p === "note", _ = d.kind === "char" ? d.char : null, v = i([]), [y, b] = a(() => {
-		let e = _ ? r.indexOf(_) : -1;
+}, d = 8;
+function f({ current: f, onSelect: p, deviceType: m, code62Glyph: h, labels: g }) {
+	let _ = {
+		...u,
+		...g
+	}, v = r(m ?? "flagship", h) === "heart", y = f.kind === "char" ? f.char : null, b = a([]), [x, S] = o(() => {
+		let e = y ? i.indexOf(y) : -1;
 		return e >= 0 ? e : 0;
-	}), x = (e) => {
-		let t = (e % r.length + r.length) % r.length;
-		b(t), v.current[t]?.focus();
-	}, S = (e, t) => {
+	}), C = (e) => {
+		let t = (e % i.length + i.length) % i.length;
+		S(t), b.current[t]?.focus();
+	}, w = (e, t) => {
 		switch (e.key) {
 			case "ArrowRight":
-				e.preventDefault(), x(t + 1);
+				e.preventDefault(), C(t + 1);
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), x(t - 1);
+				e.preventDefault(), C(t - 1);
 				break;
 			case "ArrowDown":
-				e.preventDefault(), x(t + u);
+				e.preventDefault(), C(t + d);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), x(t - u);
+				e.preventDefault(), C(t - d);
 				break;
 			case "Home":
-				e.preventDefault(), x(0);
+				e.preventDefault(), C(0);
 				break;
-			case "End": e.preventDefault(), x(r.length - 1);
+			case "End": e.preventDefault(), C(i.length - 1);
 		}
 	};
-	return /* @__PURE__ */ o(t, {
+	return /* @__PURE__ */ s(t, {
 		className: "w-64 p-2",
 		"data-testid": "draw-char-picker",
 		role: "group",
-		"aria-label": h.characters,
-		children: /* @__PURE__ */ o(n, {
+		"aria-label": _.characters,
+		children: /* @__PURE__ */ s(n, {
 			cols: "8",
 			gap: "1",
-			children: r.map((t, n) => {
-				let r = t === s, i = r && g ? c : t;
-				return /* @__PURE__ */ o("button", {
+			children: i.map((t, n) => {
+				let r = t === c, i = r && v ? l : t;
+				return /* @__PURE__ */ s("button", {
 					ref: (e) => {
-						v.current[n] = e;
+						b.current[n] = e;
 					},
 					type: "button",
 					"data-draw-char": t,
-					tabIndex: n === y ? 0 : -1,
-					"aria-pressed": _ === t,
-					"aria-label": r ? g ? h.heart : h.degree : t,
-					onClick: () => f({
+					tabIndex: n === x ? 0 : -1,
+					"aria-pressed": y === t,
+					"aria-label": r ? v ? _.heart : _.degree : t,
+					onClick: () => p({
 						kind: "char",
 						char: t
 					}),
-					onFocus: () => b(n),
-					onKeyDown: (e) => S(e, n),
-					className: e("flex h-7 w-7 items-center justify-center rounded-md border font-mono text-sm transition-shadow", _ === t ? "ring-2 ring-primary ring-offset-1" : "hover:bg-muted/50"),
+					onFocus: () => S(n),
+					onKeyDown: (e) => w(e, n),
+					className: e("flex h-7 w-7 items-center justify-center rounded-md border font-mono text-sm transition-shadow", y === t ? "ring-2 ring-primary ring-offset-1" : "hover:bg-muted/50"),
 					children: i
 				}, t);
 			})
@@ -74,6 +75,6 @@ function d({ current: d, onSelect: f, deviceType: p, labels: m }) {
 	});
 }
 //#endregion
-export { l as DEFAULT_DRAW_CHAR_PICKER_LABELS, d as DrawCharPickerContent };
+export { u as DEFAULT_DRAW_CHAR_PICKER_LABELS, f as DrawCharPickerContent };
 
 //# sourceMappingURL=draw-char-picker-content.js.map

package/dist/components/editor/draw-char-picker-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"draw-char-picker-content.js","names":[],"sources":["../../../src/components/editor/draw-char-picker-content.tsx"],"mappings":";;;;;;;;AA0BA,IAAM,IAAc,KAEd,IAAkB,KAWX,IAAwD;CACnE,YAAY;CACZ,QAAQ;CACR,OAAO;AACT,GAaM,IAAY;AAElB,SAAgB,EAAsB,EAAE,YAAS,aAAU,eAAY,aAAsC;CAC3G,IAAM,IAAI;EAAE,GAAG;EAAiC,GAAG;CAAO,GAIpD,IAAS,MAAe,QACxB,IAAe,EAAQ,SAAS,SAAS,EAAQ,OAAO,MACxD,IAAa,EAAqC,CAAC,CAAC,GAGpD,CAAC,GAAc,KAAmB,QAAe;EACrD,IAAM,IAAgB,IAAe,EAAW,QAAQ,CAAY,IAAI;EACxE,OAAO,KAAiB,IAAI,IAAgB;CAC9C,CAAC,GAEK,KAAa,MAAkB;EACnC,IAAM,KAAY,IAAQ,EAAW,SAAU,EAAW,UAAU,EAAW;EAE/E,AADA,EAAgB,CAAO,GACvB,EAAW,QAAQ,EAAQ,EAAE,MAAM;CACrC,GAEM,KAAiB,GAA+C,MAAkB;EACtF,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAC;IACnB;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAC;IACnB;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAS;IAC3B;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAS;IAC3B;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,CAAC;IACX;GACF,KAAK,OAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAW,SAAS,CAAC;EAEnC;CACF;CAEA,OAKE,kBAAC,GAAD;EAAK,WAAU;EAAW,eAAY;EAAmB,MAAK;EAAQ,cAAY,EAAE;EAClF,UAAA,kBAAC,GAAD;GAAM,MAAK;GAAI,KAAI;GAChB,UAAA,EAAW,KAAK,GAAM,MAAU;IAG/B,IAAM,IAAW,MAAS,GACpB,IAAQ,KAAY,IAAS,IAAkB;IAErD,OACE,kBAAC,UAAD;KAEE,MAAM,MAAO;MACX,EAAW,QAAQ,KAAS;KAC9B;KACA,MAAK;KACL,kBAAgB;KAChB,UAAU,MAAU,IAAe,IAAI;KACvC,gBAAc,MAAiB;KAC/B,cAAY,IAAY,IAAS,EAAE,QAAQ,EAAE,SAAU;KACvD,eAAe,EAAS;MAAE,MAAM;MAAQ;KAAK,CAAC;KAC9C,eAAe,EAAgB,CAAK;KACpC,YAAY,MAAU,EAAc,GAAO,CAAK;KAChD,WAAW,EACT,kGACA,MAAiB,IAAO,sCAAsC,mBAChE;KAEC,UAAA;IACK,GAlBD,CAkBC;GAEZ,CAAC;EACG,CAAA;CACH,CAAA;AAET"}
+{"version":3,"file":"draw-char-picker-content.js","names":[],"sources":["../../../src/components/editor/draw-char-picker-content.tsx"],"mappings":";;;;;;;;;AA2BA,IAAM,IAAc,KAEd,IAAkB,KAWX,IAAwD;CACnE,YAAY;CACZ,QAAQ;CACR,OAAO;AACT,GAsBM,IAAY;AAElB,SAAgB,EAAsB,EACpC,YACA,aACA,eACA,gBACA,aAC6B;CAC7B,IAAM,IAAI;EAAE,GAAG;EAAiC,GAAG;CAAO,GAMpD,IAAU,EAAmB,KAAc,YAAY,CAAW,MAAM,SACxE,IAAe,EAAQ,SAAS,SAAS,EAAQ,OAAO,MACxD,IAAa,EAAqC,CAAC,CAAC,GAGpD,CAAC,GAAc,KAAmB,QAAe;EACrD,IAAM,IAAgB,IAAe,EAAW,QAAQ,CAAY,IAAI;EACxE,OAAO,KAAiB,IAAI,IAAgB;CAC9C,CAAC,GAEK,KAAa,MAAkB;EACnC,IAAM,KAAY,IAAQ,EAAW,SAAU,EAAW,UAAU,EAAW;EAE/E,AADA,EAAgB,CAAO,GACvB,EAAW,QAAQ,EAAQ,EAAE,MAAM;CACrC,GAEM,KAAiB,GAA+C,MAAkB;EACtF,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAC;IACnB;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAC;IACnB;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAS;IAC3B;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAS;IAC3B;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,CAAC;IACX;GACF,KAAK,OAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAW,SAAS,CAAC;EAEnC;CACF;CAEA,OAKE,kBAAC,GAAD;EAAK,WAAU;EAAW,eAAY;EAAmB,MAAK;EAAQ,cAAY,EAAE;EAClF,UAAA,kBAAC,GAAD;GAAM,MAAK;GAAI,KAAI;GAChB,UAAA,EAAW,KAAK,GAAM,MAAU;IAG/B,IAAM,IAAW,MAAS,GACpB,IAAQ,KAAY,IAAU,IAAkB;IAEtD,OACE,kBAAC,UAAD;KAEE,MAAM,MAAO;MACX,EAAW,QAAQ,KAAS;KAC9B;KACA,MAAK;KACL,kBAAgB;KAChB,UAAU,MAAU,IAAe,IAAI;KACvC,gBAAc,MAAiB;KAC/B,cAAY,IAAY,IAAU,EAAE,QAAQ,EAAE,SAAU;KACxD,eAAe,EAAS;MAAE,MAAM;MAAQ;KAAK,CAAC;KAC9C,eAAe,EAAgB,CAAK;KACpC,YAAY,MAAU,EAAc,GAAO,CAAK;KAChD,WAAW,EACT,kGACA,MAAiB,IAAO,sCAAsC,mBAChE;KAEC,UAAA;IACK,GAlBD,CAkBC;GAEZ,CAAC;EACG,CAAA;CACH,CAAA;AAET"}

package/dist/components/editor/formatting-picker-content.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { Badge as t } from "../feedback/badge.js";
-import { Button as n } from "../forms/button.js";
+import { Button as t } from "../forms/button.js";
+import { Badge as n } from "../feedback/badge.js";
 import { Input as r } from "../forms/input.js";
 import { Box as i } from "../layout/box.js";
 import { Flex as a } from "../layout/flex.js";
@@ -106,7 +106,7 @@ function S({ formatting: S = {}, onInsert: C, labels: w }) {
 						maxLength: 10,
 						"aria-labelledby": A,
 						className: "flex-1 font-mono"
-					}), /* @__PURE__ */ y(n, {
+					}), /* @__PURE__ */ y(t, {
 						type: "submit",
 						size: "sm",
 						disabled: !O,
@@ -119,13 +119,13 @@ function S({ formatting: S = {}, onInsert: C, labels: w }) {
 		className: "p-1.5 min-w-[240px] max-w-[280px]",
 		children: /* @__PURE__ */ y(c, {
 			gap: "0.5",
-			children: j.map((n) => {
-				let r = n.syntax.includes(h);
+			children: j.map((t) => {
+				let r = t.syntax.includes(h);
 				return /* @__PURE__ */ b(l, { children: [/* @__PURE__ */ y(f, {
 					asChild: !0,
 					children: /* @__PURE__ */ b("button", {
 						type: "button",
-						onClick: () => M(n),
+						onClick: () => M(t),
 						className: e("w-full text-left px-2.5 py-1.5 rounded-md text-sm", "hover:bg-accent hover:text-accent-foreground transition-colors", "flex items-center justify-between gap-2 group"),
 						children: [/* @__PURE__ */ b(a, {
 							align: "center",
@@ -135,15 +135,15 @@ function S({ formatting: S = {}, onInsert: C, labels: w }) {
 								as: "span",
 								weight: "medium",
 								className: "capitalize truncate group-hover:text-accent-foreground",
-								children: n.name
+								children: t.name
 							})]
-						}), r ? /* @__PURE__ */ y(g, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }) : /* @__PURE__ */ y(t, {
+						}), r ? /* @__PURE__ */ y(g, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }) : /* @__PURE__ */ y(n, {
 							variant: "secondary",
 							className: "font-mono text-[10px] px-1.5 py-0 flex-shrink-0",
-							children: n.syntax
+							children: t.syntax
 						})]
 					})
-				}), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(s, { children: n.description ?? n.name }) })] }, n.syntax);
+				}), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(s, { children: t.description ?? t.name }) })] }, t.syntax);
 			})
 		})
 	}) });

package/dist/components/editor/template-editor-toolbar.d.ts

@@ -1,8 +1,10 @@
 import type { Editor } from "@tiptap/react";
 import { type ComponentProps, type ReactNode } from "react";
+import type { Code62Glyph } from "../../lib/board-characters";
 import { type BoardColorName } from "../../lib/board-colors";
 import { type ColorPickerLabels } from "./color-picker-content";
 import type { DeviceType } from "./constants";
+import { type DrawCharPickerLabels } from "./draw-char-picker-content";
 import { type FormattingPickerLabels } from "./formatting-picker-content";
 import type { LineAlignment } from "./template-editor";
 import type { DrawBrush } from "./utils/draw-mode";
@@ -108,6 +110,13 @@ export interface TemplateEditorToolbarProps {
     onWrapToggle?: () => void;
     className?: string;
     deviceType?: DeviceType;
+    /**
+     * Which glyph the target board's code-62 flap draws. Forwarded to the
+     * colour picker and the draw-character picker; see
+     * {@link ColorPickerContent} for why it cannot be derived from
+     * `deviceType`.
+     */
+    code62Glyph?: Code62Glyph;
     onSyncFromBoard?: () => void;
     syncFromBoardPending?: boolean;
     drawMode?: boolean;
@@ -165,7 +174,14 @@ export interface TemplateEditorToolbarProps {
     variablePickerLabels?: Partial<VariablePickerLabels>;
     colorPickerLabels?: Partial<ColorPickerLabels>;
     formattingPickerLabels?: Partial<FormattingPickerLabels>;
+    /**
+     * Strings for the draw-character picker. Without this the toolbar rendered
+     * DrawCharPickerContent's three labels in English only, which is why
+     * FiestaBoard still renders that picker itself instead of adopting the
+     * toolbar's (#265).
+     */
+    drawCharPickerLabels?: Partial<DrawCharPickerLabels>;
 }
-declare function TemplateEditorToolbarImpl({ editor, currentAlignment, currentWrapEnabled, onAlignmentChange, onWrapToggle, className, deviceType, onSyncFromBoard, syncFromBoardPending, drawMode, onDrawModeToggle, drawBrush, onDrawBrushChange, templateVariables, isLoadingVariables, renderVariablePicker, pluginManifests, isLoadingManifests, pluginDisplayData, resolveIcon, entityPickerSlot, labels, variablePickerLabels, colorPickerLabels, formattingPickerLabels, }: TemplateEditorToolbarProps): import("react").JSX.Element;
+declare function TemplateEditorToolbarImpl({ editor, currentAlignment, currentWrapEnabled, onAlignmentChange, onWrapToggle, className, deviceType, code62Glyph, onSyncFromBoard, syncFromBoardPending, drawMode, onDrawModeToggle, drawBrush, onDrawBrushChange, templateVariables, isLoadingVariables, renderVariablePicker, pluginManifests, isLoadingManifests, pluginDisplayData, resolveIcon, entityPickerSlot, labels, variablePickerLabels, colorPickerLabels, formattingPickerLabels, drawCharPickerLabels, }: TemplateEditorToolbarProps): import("react").JSX.Element;
 export declare const TemplateEditorToolbar: import("react").MemoExoticComponent<typeof TemplateEditorToolbarImpl>;
 export {};