@burdenoff/fe-libs 2026.1016.2 → 2026.1016.3

package/dist/shared/assistant/avatar/live/AvatarFace.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+export interface AvatarFaceProps {
+    /** The face's display name: the initials, and the frame picture's `alt`. */
+    readonly name: string;
+    /** The picture's URL, already sanitised (`sanitizeAvatarImages`); absent: the initials (pill) or nothing (frame). */
+    readonly src?: string | null;
+    readonly size: 'pill' | 'frame';
+    /** The pill is the selected one: drawn on the filled pill's colours. */
+    readonly selected?: boolean;
+    /** The picture failed to load, once per `src`. */
+    readonly onError?: (src: string) => void;
+}
+export declare const AvatarFace: FC<AvatarFaceProps>;

package/dist/shared/assistant/avatar/live/AvatarFace.js

@@ -0,0 +1,46 @@
+import { faceInitials as e } from "./avatarFaces.js";
+import { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/shared/assistant/avatar/live/AvatarFace.tsx
+var r = "relative inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full", i = ({ name: i, src: a, size: o, selected: s = !1, onError: c }) => {
+	let [l, u] = t(null), d = typeof a == "string" && a.length > 0 && l !== a ? a : null, f = (e) => {
+		u(e), c?.(e);
+	};
+	return o === "frame" ? d === null ? null : /* @__PURE__ */ n("img", {
+		src: d,
+		alt: i,
+		width: 320,
+		height: 320,
+		loading: "lazy",
+		decoding: "async",
+		draggable: !1,
+		referrerPolicy: "no-referrer",
+		onError: () => f(d),
+		className: "absolute inset-0 size-full object-cover",
+		"data-testid": "assistant-avatar-face-frame"
+	}) : d === null ? /* @__PURE__ */ n("span", {
+		"aria-hidden": "true",
+		className: `${r} border text-sm font-medium ${s ? "border-transparent bg-action-primary-text text-action-primary-bg" : "border-border-subtle bg-bg-sunken text-text-secondary"}`,
+		"data-testid": "assistant-avatar-face",
+		"data-face": "initials",
+		children: e(i)
+	}) : /* @__PURE__ */ n("span", {
+		className: `${r} ring-1 ${s ? "ring-action-primary-text/40" : "ring-border-subtle"}`,
+		"data-testid": "assistant-avatar-face",
+		"data-face": "picture",
+		children: /* @__PURE__ */ n("img", {
+			src: d,
+			alt: "",
+			width: 32,
+			height: 32,
+			loading: "lazy",
+			decoding: "async",
+			draggable: !1,
+			referrerPolicy: "no-referrer",
+			onError: () => f(d),
+			className: "size-full object-cover"
+		})
+	});
+};
+//#endregion
+export { i as AvatarFace };

package/dist/shared/assistant/avatar/live/LiveAvatarTabView.d.ts

@@ -16,6 +16,8 @@ export interface LiveAvatarTabViewProps extends LiveAvatarTabProps {
     readonly controller: LiveAvatarController;
     /** Display names for the avatar ids the server offers; without one the chooser numbers them. */
     readonly avatarNames?: Readonly<Record<string, string>>;
+    /** BOFF-9362: a picture per avatar id, already sanitised (`sanitizeAvatarImages`); a face without one shows its initials. */
+    readonly avatarImages?: ReadonlyMap<string, string>;
     /** The host's speaker per avatar ("Default for this avatar"). */
     readonly avatarVoices: LiveAvatarVoices;
     readonly defaultAvatarVoiceMode?: AvatarVoiceDefault;

package/dist/shared/assistant/avatar/live/LiveAvatarTabView.js

@@ -4,270 +4,297 @@ import { useAssistantSpeech as ee } from "../../ui/AssistantSpeechProvider.js";
 import { resolveAvatarVoiceMode as te } from "../avatarPreferences.js";
 import "./liveAvatarController.js";
 import { liveAvatarStatusText as ne } from "./liveAvatarStatus.js";
-import { hostedAvatarVoice as r } from "./avatarVoice.js";
-import { useCallback as re, useEffect as i, useId as a, useLayoutEffect as ie, useRef as o, useState as s, useSyncExternalStore as c } from "react";
-import { Volume2 as l } from "lucide-react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { AvatarFace as r } from "./AvatarFace.js";
+import { hostedAvatarVoice as i } from "./avatarVoice.js";
+import { useCallback as a, useEffect as o, useId as s, useLayoutEffect as re, useRef as c, useState as l, useSyncExternalStore as u } from "react";
+import { Volume2 as ie } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/shared/assistant/avatar/live/LiveAvatarTabView.tsx
-var f = "mine", p = "paired", m = "speaker:", h = /-Chirp3-HD-([A-Za-z]+)$/;
-function g(e) {
-	let n = h.exec(e)?.[1];
+var p = "mine", m = "paired", h = "speaker:", g = /-Chirp3-HD-([A-Za-z]+)$/;
+function _(e) {
+	let n = g.exec(e)?.[1];
 	return n !== void 0 && t(n) ? n : e;
 }
-function _(e, t) {
+function v(e, t) {
 	let n = t.find((e) => e.source === "hosted")?.lang;
-	return n === void 0 ? null : r(e, n, t);
+	return n === void 0 ? null : i(e, n, t);
 }
-var v = "text-xs font-medium text-text-secondary", y = "text-xs text-text-muted", b = "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong", x = `inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-xl border border-border-default bg-bg-elevated px-4 text-sm font-medium text-text-primary transition-colors hover:bg-bg-raised aria-disabled:cursor-default aria-disabled:opacity-60 aria-disabled:hover:bg-bg-elevated ${b}`, ae = `inline-flex min-h-11 w-full items-center justify-center rounded-xl bg-action-primary-bg px-4 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg-hover aria-disabled:cursor-default aria-disabled:opacity-60 aria-disabled:hover:bg-action-primary-bg ${b}`, oe = "relative inline-flex min-h-11 min-w-0 max-w-full cursor-pointer items-center rounded-full border px-4 text-sm font-medium transition-colors focus-within:ring-2 focus-within:ring-border-strong", se = "absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-full opacity-0", S = ({ controller: r, shown: h, voice: S, handsFreeOff: C, leaveHintId: ce, startVoiceRef: w, avatarNames: le, avatarVoices: ue, defaultAvatarVoiceMode: de, voiceStore: T, now: E = Date.now }) => {
-	let D = n(), O = ee(), k = a(), A = a(), j = a(), M = a(), N = a(), P = o(null), F = c(r.subscribe, r.getSnapshot, r.getSnapshot), I = c(T.subscribe, T.getState, T.getState);
-	i(() => {
-		if (h) return r.setStageMounted(!0), () => r.setStageMounted(!1);
-	}, [r, h]), i(() => {
-		let e = r.getSnapshot();
-		e.phase === "off" && e.avatars.length === 0 && r.requestOn({ start: !1 });
-	}, [r]);
-	let { phase: L } = F, R = L === "starting" || L === "connecting" || L === "ready" || L === "ending", [z, B] = s(!1);
-	z && (L === "off" || L === "choosing" || L === "ready" || L === "ending") && B(!1);
-	let V = E(), fe = F.retryAt !== null && F.retryAt > V, H = ne(F, D, V), U = F.selectedAvatarId, W = (e) => {
-		let t = F.avatars.indexOf(e);
-		return le?.[e] ?? (t === -1 ? D.chooserNone : `${D.chooserLabel} ${t + 1}`);
-	}, G = L === "ready" ? { kind: "turn-off" } : L === "ending" ? { kind: "ending" } : z || L === "starting" || L === "connecting" ? { kind: "starting" } : F.offered ? {
+var y = "text-xs font-medium text-text-secondary", b = "text-xs text-text-muted", x = "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong", S = `inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-xl border border-border-default bg-bg-elevated px-4 text-sm font-medium text-text-primary transition-colors hover:bg-bg-raised aria-disabled:cursor-default aria-disabled:opacity-60 aria-disabled:hover:bg-bg-elevated ${x}`, ae = `inline-flex min-h-11 w-full items-center justify-center rounded-xl bg-action-primary-bg px-4 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg-hover aria-disabled:cursor-default aria-disabled:opacity-60 aria-disabled:hover:bg-action-primary-bg ${x}`, oe = "relative inline-flex min-h-11 min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-full border ps-1.5 pe-4 text-sm font-medium transition-colors focus-within:ring-2 focus-within:ring-border-strong", se = "absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-full opacity-0", C = ({ controller: i, shown: g, voice: C, handsFreeOff: ce, leaveHintId: le, startVoiceRef: ue, askLine: w, avatarNames: de, avatarImages: fe, avatarVoices: pe, defaultAvatarVoiceMode: me, voiceStore: T, now: E = Date.now }) => {
+	let D = n(), O = ee(), k = s(), he = s(), A = s(), j = s(), M = s(), N = c(null), P = u(i.subscribe, i.getSnapshot, i.getSnapshot), F = u(T.subscribe, T.getState, T.getState);
+	o(() => {
+		if (g) return i.setStageMounted(!0), () => i.setStageMounted(!1);
+	}, [i, g]), o(() => {
+		let e = i.getSnapshot();
+		e.phase === "off" && e.avatars.length === 0 && i.requestOn({ start: !1 });
+	}, [i]);
+	let { phase: I } = P, L = I === "starting" || I === "connecting" || I === "ready" || I === "ending", [R, z] = l(!1);
+	R && (I === "off" || I === "choosing" || I === "ready" || I === "ending") && z(!1);
+	let B = E(), ge = P.retryAt !== null && P.retryAt > B, V = ne(P, D, B), H = P.selectedAvatarId, U = (e) => {
+		let t = P.avatars.indexOf(e);
+		return de?.[e] ?? (t === -1 ? D.chooserNone : `${D.chooserLabel} ${t + 1}`);
+	}, W = I === "ready" ? { kind: "turn-off" } : I === "ending" ? { kind: "ending" } : R || I === "starting" || I === "connecting" ? { kind: "starting" } : P.offered ? {
 		kind: "turn-on",
-		ready: !fe && U !== null && (L === "choosing" || L === "off" && F.avatars.includes(U))
-	} : null, K = o(null), q = G?.kind === "turn-off";
-	ie(() => {
-		K.current = q ? E() : null;
-	}, [q, E]);
-	let pe = re((e) => {
+		ready: !ge && H !== null && (I === "choosing" || I === "off" && P.avatars.includes(H))
+	} : null, G = c(null), K = W?.kind === "turn-off";
+	re(() => {
+		G.current = K ? E() : null;
+	}, [K, E]);
+	let _e = a((e) => {
 		if (e !== null) return () => {
-			e.ownerDocument.activeElement === e && P.current?.focus();
+			e.ownerDocument.activeElement === e && N.current?.focus();
 		};
-	}, []), me = () => {
-		if (G !== null) switch (G.kind) {
+	}, []), ve = () => {
+		if (W !== null) switch (W.kind) {
 			case "turn-on":
-				if (!G.ready || U === null) return;
-				B(!0), L === "choosing" ? r.confirm() : r.requestOn({
+				if (!W.ready || H === null) return;
+				z(!0), I === "choosing" ? i.confirm() : i.requestOn({
 					start: !0,
-					avatarId: U
+					avatarId: H
 				});
 				return;
 			case "turn-off": {
-				let e = K.current;
+				let e = G.current;
 				if (e !== null && E() - e < 1e3) return;
-				r.switchOff();
+				i.switchOff();
 				return;
 			}
 			case "starting":
 			case "ending": return;
 		}
-	}, J = te(I, de), Y = U === null ? null : ue.get(U) ?? null, X = J === "speaker" && I.avatarSpeaker !== null ? `${m}${I.avatarSpeaker}` : J === "paired" && Y !== null ? p : f, Z = X === p ? Y : X.startsWith(m) ? I.avatarSpeaker : null, Q = X === f ? O.activeVoiceName : Z === null ? null : _(Z, O.voiceChoices)?.name ?? null, he = O.speakingMessageId !== null || O.spokenChunks !== null, $ = Q !== null && !S.live && !he, ge = O.activeVoiceName ? D.voiceModeMineNamed(g(O.activeVoiceName)) : D.voiceModeMine, _e = (e) => {
-		if (e === f || e === p) {
+	}, q = te(F, me), J = H === null ? null : pe.get(H) ?? null, Y = q === "speaker" && F.avatarSpeaker !== null ? `${h}${F.avatarSpeaker}` : q === "paired" && J !== null ? m : p, ye = Y === m ? J : Y.startsWith(h) ? F.avatarSpeaker : null, X = Y === p ? O.activeVoiceName : ye === null ? null : v(ye, O.voiceChoices)?.name ?? null, be = O.speakingMessageId !== null || O.spokenChunks !== null, xe = X !== null && !C.live && !be, Se = O.activeVoiceName ? D.voiceModeMineNamed(_(O.activeVoiceName)) : D.voiceModeMine, Ce = (e) => {
+		if (e === p || e === m) {
 			T.setVoiceMode(e);
 			return;
 		}
 		let n = e.slice(8);
-		e.startsWith(m) && t(n) && T.setAvatarSpeaker(n);
-	}, ve = L === "ending" ? D.stateEnding : L === "connecting" || L === "ready" ? D.stageWaiting : L === "starting" ? D.stateStarting : D.stateOff, ye = L === "off" && F.avatars.length === 0 && F.problem !== null && F.offered;
-	return /* @__PURE__ */ d("div", {
-		ref: P,
+		e.startsWith(h) && t(n) && T.setAvatarSpeaker(n);
+	}, we = I === "ending" ? D.stateEnding : I === "connecting" || I === "ready" ? D.stageWaiting : I === "starting" ? D.stateStarting : D.stateOff, [Te, Ee] = l(() => /* @__PURE__ */ new Set()), De = a((e) => {
+		Ee((t) => t.has(e) ? t : new Set(t).add(e));
+	}, []), Z = (e) => {
+		let t = fe?.get(e);
+		return t === void 0 || Te.has(t) ? null : t;
+	}, Q = !L && H !== null ? Z(H) : null, $ = L ? null : w === void 0 ? C.impossible ? D.askNeedsVoice : null : w === "by-typing" ? D.askByTyping : w === "needs-voice" ? D.askNeedsVoice : w === "nothing" ? D.askNothing : null, Oe = I === "off" && P.avatars.length === 0 && P.problem !== null && P.offered;
+	return /* @__PURE__ */ f("div", {
+		ref: N,
 		tabIndex: -1,
 		className: "flex min-h-full shrink-0 flex-col gap-3 focus:outline-none",
 		"data-testid": "assistant-avatar-tab-view",
 		children: [
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex max-h-80 min-h-[7.5rem] grow basis-30 justify-center",
-				children: /* @__PURE__ */ d("div", {
+				children: /* @__PURE__ */ f("div", {
 					className: "relative aspect-square h-full max-w-full overflow-hidden rounded-2xl border border-border-subtle bg-bg-sunken",
 					"data-testid": "assistant-avatar-tab-frame",
-					"data-phase": L,
+					"data-phase": I,
 					children: [
-						R ? /* @__PURE__ */ u("video", {
-							ref: r.attachVideo,
-							className: `size-full object-cover ${F.videoReady ? "" : "invisible"}`,
+						L ? /* @__PURE__ */ d("video", {
+							ref: i.attachVideo,
+							className: `size-full object-cover ${P.videoReady ? "" : "invisible"}`,
 							"aria-label": D.stageLabel,
 							autoPlay: !0,
 							muted: !0,
 							playsInline: !0,
 							"data-testid": "assistant-avatar-tab-video"
 						}) : null,
-						R && F.videoReady ? null : /* @__PURE__ */ u("p", {
-							className: "absolute inset-0 flex items-center justify-center p-3 text-center text-sm text-text-muted",
-							children: ve
+						Q !== null && H !== null ? /* @__PURE__ */ d(r, {
+							size: "frame",
+							name: U(H),
+							src: Q,
+							onError: De
+						}) : null,
+						L && P.videoReady ? null : /* @__PURE__ */ d("p", {
+							className: Q === null ? "absolute inset-0 flex items-center justify-center p-3 text-center text-sm text-text-secondary" : "absolute inset-x-0 bottom-0 bg-bg-elevated/90 px-3 py-1.5 text-center text-xs text-text-secondary",
+							"data-testid": "assistant-avatar-tab-frame-text",
+							children: we
 						}),
-						F.audioBlocked ? /* @__PURE__ */ d("button", {
+						P.audioBlocked ? /* @__PURE__ */ f("button", {
 							type: "button",
-							onClick: () => r.resumeAudio(),
-							className: `absolute inset-x-2 bottom-2 inline-flex min-h-11 items-center justify-center gap-1.5 rounded-xl bg-bg-elevated px-3 text-xs font-medium text-text-primary ${b}`,
+							onClick: () => i.resumeAudio(),
+							className: `absolute inset-x-2 bottom-2 inline-flex min-h-11 items-center justify-center gap-1.5 rounded-xl bg-bg-elevated px-3 text-xs font-medium text-text-primary ${x}`,
 							"data-testid": "assistant-avatar-tab-sound",
-							children: [/* @__PURE__ */ u(l, {
+							children: [/* @__PURE__ */ d(ie, {
 								className: "size-4 shrink-0",
 								"aria-hidden": "true"
-							}), /* @__PURE__ */ u("span", { children: D.problem("playback-blocked") })]
+							}), /* @__PURE__ */ d("span", { children: D.problem("playback-blocked") })]
 						}) : null
 					]
 				})
 			}),
-			/* @__PURE__ */ u("p", {
-				className: H === null ? "sr-only" : "text-center text-sm text-text-secondary",
+			/* @__PURE__ */ d("p", {
+				className: V === null ? "sr-only" : "text-center text-sm text-text-secondary",
 				role: "status",
 				"data-testid": "assistant-avatar-tab-status",
-				children: H ?? ""
+				children: V ?? ""
 			}),
-			F.avatars.length > 1 && !R ? /* @__PURE__ */ d("fieldset", {
+			P.avatars.length > 1 && !L ? /* @__PURE__ */ f("fieldset", {
 				className: "flex min-w-0 flex-col gap-1.5",
 				"data-testid": "assistant-avatar-tab-chooser",
-				children: [/* @__PURE__ */ u("legend", {
-					className: v,
+				children: [/* @__PURE__ */ d("legend", {
+					className: y,
 					children: D.chooserTitle
-				}), /* @__PURE__ */ u("div", {
+				}), /* @__PURE__ */ d("div", {
 					className: "flex flex-wrap gap-2",
-					children: F.avatars.map((e) => {
-						let t = e === U, n = W(e);
-						return /* @__PURE__ */ d("label", {
+					children: P.avatars.map((e) => {
+						let t = e === H, n = U(e);
+						return /* @__PURE__ */ f("label", {
 							className: `${oe} ${t ? "border-transparent bg-action-primary-bg text-action-primary-text" : "border-border-default bg-bg-elevated text-text-secondary hover:bg-bg-raised hover:text-text-primary"}`,
 							title: t ? D.chooserSelected(n) : D.chooserOption(n),
-							children: [/* @__PURE__ */ u("input", {
-								type: "radio",
-								name: A,
-								value: e,
-								checked: t,
-								onChange: () => r.selectAvatar(e),
-								className: se,
-								"data-avatar-id": e
-							}), /* @__PURE__ */ u("span", {
-								className: "truncate",
-								children: n
-							})]
+							children: [
+								/* @__PURE__ */ d("input", {
+									type: "radio",
+									name: he,
+									value: e,
+									checked: t,
+									onChange: () => i.selectAvatar(e),
+									className: se,
+									"data-avatar-id": e
+								}),
+								/* @__PURE__ */ d(r, {
+									size: "pill",
+									name: n,
+									src: Z(e),
+									selected: t,
+									onError: De
+								}),
+								/* @__PURE__ */ d("span", {
+									className: "truncate",
+									children: n
+								})
+							]
 						}, e);
 					})
 				})]
-			}) : F.avatars.length > 0 && U !== null ? /* @__PURE__ */ d("div", {
+			}) : P.avatars.length > 0 && H !== null ? /* @__PURE__ */ f("div", {
 				className: "flex flex-col gap-0.5",
 				"data-testid": "assistant-avatar-tab-chosen",
-				children: [/* @__PURE__ */ d("p", {
+				children: [/* @__PURE__ */ f("p", {
 					className: "flex min-w-0 items-baseline gap-2 text-sm",
-					children: [/* @__PURE__ */ u("span", {
-						className: v,
+					children: [/* @__PURE__ */ d("span", {
+						className: y,
 						children: D.chooserLabel
-					}), /* @__PURE__ */ u("span", {
+					}), /* @__PURE__ */ d("span", {
 						className: "truncate text-text-primary",
-						children: W(U)
+						children: U(H)
 					})]
-				}), R && F.avatars.length > 1 ? /* @__PURE__ */ u("p", {
-					className: y,
+				}), L && P.avatars.length > 1 ? /* @__PURE__ */ d("p", {
+					className: b,
 					children: D.chooserLocked
 				}) : null]
-			}) : L === "choosing" ? /* @__PURE__ */ u("p", {
-				className: y,
+			}) : I === "choosing" ? /* @__PURE__ */ d("p", {
+				className: b,
 				"data-testid": "assistant-avatar-tab-empty",
 				children: D.chooserEmpty
 			}) : null,
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "flex flex-col gap-1",
 				children: [
-					/* @__PURE__ */ u("label", {
-						htmlFor: j,
-						className: v,
+					/* @__PURE__ */ d("label", {
+						htmlFor: A,
+						className: y,
 						children: D.voiceModeLabel
 					}),
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ f("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ d("select", {
-							id: j,
-							value: X,
-							onChange: (e) => _e(e.target.value),
-							"aria-describedby": M,
-							className: `min-h-11 min-w-0 flex-1 rounded-xl border border-border-default bg-bg-elevated px-3 text-sm text-text-primary scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary ${b}`,
+						children: [/* @__PURE__ */ f("select", {
+							id: A,
+							value: Y,
+							onChange: (e) => Ce(e.target.value),
+							"aria-describedby": j,
+							className: `min-h-11 min-w-0 flex-1 rounded-xl border border-border-default bg-bg-elevated px-3 text-sm text-text-primary scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary ${x}`,
 							"data-testid": "assistant-avatar-tab-voice",
 							children: [
-								/* @__PURE__ */ u("option", {
-									value: f,
-									children: ge
-								}),
-								Y === null ? null : /* @__PURE__ */ u("option", {
+								/* @__PURE__ */ d("option", {
 									value: p,
-									children: D.voiceModeDefaultNamed(Y)
+									children: Se
 								}),
-								e.map((e) => /* @__PURE__ */ u("option", {
-									value: `${m}${e}`,
+								J === null ? null : /* @__PURE__ */ d("option", {
+									value: m,
+									children: D.voiceModeDefaultNamed(J)
+								}),
+								e.map((e) => /* @__PURE__ */ d("option", {
+									value: `${h}${e}`,
 									children: e
 								}, e))
 							]
-						}), /* @__PURE__ */ u("button", {
+						}), /* @__PURE__ */ d("button", {
 							type: "button",
 							onClick: () => {
-								$ && Q !== null && O.previewVoice(Q);
+								xe && X !== null && O.previewVoice(X);
 							},
-							"aria-disabled": !$,
+							"aria-disabled": !xe,
 							"aria-label": D.hearVoice,
 							title: D.hearVoice,
-							className: `inline-flex size-11 shrink-0 items-center justify-center rounded-xl border border-border-default bg-bg-elevated text-text-secondary transition-colors hover:bg-bg-raised hover:text-text-primary aria-disabled:cursor-default aria-disabled:opacity-60 ${b}`,
+							className: `inline-flex size-11 shrink-0 items-center justify-center rounded-xl border border-border-default bg-bg-elevated text-text-secondary transition-colors hover:bg-bg-raised hover:text-text-primary aria-disabled:cursor-default aria-disabled:opacity-60 ${x}`,
 							"data-testid": "assistant-avatar-tab-hear",
-							children: /* @__PURE__ */ u(l, {
+							children: /* @__PURE__ */ d(ie, {
 								className: "size-5",
 								"aria-hidden": "true"
 							})
 						})]
 					}),
-					/* @__PURE__ */ u("p", {
-						id: M,
-						className: y,
+					/* @__PURE__ */ d("p", {
+						id: j,
+						className: b,
 						children: D.voiceModeHint
 					})
 				]
 			}),
-			R ? null : /* @__PURE__ */ u("p", {
+			L ? null : /* @__PURE__ */ d("p", {
 				id: k,
 				className: "text-xs text-text-secondary",
 				"data-testid": "assistant-avatar-tab-disclosure",
 				children: D.consent
 			}),
-			G === null ? null : /* @__PURE__ */ u("button", {
-				ref: pe,
+			W === null ? null : /* @__PURE__ */ d("button", {
+				ref: _e,
 				type: "button",
-				onClick: me,
-				"aria-disabled": G.kind === "turn-on" ? !G.ready : G.kind !== "turn-off",
-				"aria-describedby": G.kind === "turn-on" ? k : void 0,
-				className: G.kind === "turn-off" ? x : ae,
+				onClick: ve,
+				"aria-disabled": W.kind === "turn-on" ? !W.ready : W.kind !== "turn-off",
+				"aria-describedby": W.kind === "turn-on" ? k : void 0,
+				className: W.kind === "turn-off" ? S : ae,
 				"data-testid": "assistant-avatar-tab-switch",
-				"data-slot": G.kind,
-				children: G.kind === "turn-off" ? D.stop : G.kind === "starting" ? D.turnOnStarting : G.kind === "ending" ? D.stateEnding : D.consentConfirm
+				"data-slot": W.kind,
+				children: W.kind === "turn-off" ? D.stop : W.kind === "starting" ? D.turnOnStarting : W.kind === "ending" ? D.stateEnding : D.consentConfirm
 			}),
-			ye ? /* @__PURE__ */ u("button", {
+			Oe ? /* @__PURE__ */ d("button", {
 				type: "button",
-				onClick: () => r.requestOn({ start: !1 }),
-				className: x,
+				onClick: () => i.requestOn({ start: !1 }),
+				className: S,
 				"data-testid": "assistant-avatar-tab-retry",
 				children: D.chooserRetry
 			}) : null,
-			S.live ? null : /* @__PURE__ */ d("div", {
+			C.live ? null : /* @__PURE__ */ f("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ u("button", {
-					ref: w,
+				children: [/* @__PURE__ */ d("button", {
+					ref: ue,
 					type: "button",
 					onClick: () => {
-						S.blocked === null && S.start();
+						C.blocked === null && C.start();
 					},
-					"aria-disabled": S.blocked !== null,
-					"aria-describedby": S.blocked === null ? void 0 : N,
-					className: x,
+					"aria-disabled": C.blocked !== null,
+					"aria-describedby": C.blocked === null ? void 0 : M,
+					className: S,
 					"data-testid": "assistant-avatar-tab-start-voice",
 					children: D.startVoice
-				}), S.blocked === null ? null : /* @__PURE__ */ u("p", {
-					id: N,
-					className: y,
+				}), C.blocked === null ? $ === null ? null : /* @__PURE__ */ d("p", {
+					className: b,
+					"data-testid": "assistant-avatar-tab-ask-note",
+					children: $
+				}) : /* @__PURE__ */ d("p", {
+					id: M,
+					className: b,
 					"data-testid": "assistant-avatar-tab-voice-blocked",
-					children: S.impossible && !R ? `${S.blocked} ${D.askNeedsVoice}` : S.blocked
+					children: $ === null ? C.blocked : `${C.blocked} ${$}`
 				})]
 			}),
-			C && !F.voiceLive ? /* @__PURE__ */ u("p", {
-				className: y,
+			ce && !P.voiceLive ? /* @__PURE__ */ d("p", {
+				className: b,
 				"data-testid": "assistant-avatar-tab-hands-free",
 				children: D.handsFreeOff
 			}) : null,
-			R && !F.heldByVoice ? /* @__PURE__ */ u("p", {
-				id: ce,
-				className: y,
+			L && !P.heldByVoice ? /* @__PURE__ */ d("p", {
+				id: le,
+				className: b,
 				"data-testid": "assistant-avatar-tab-leave-hint",
 				children: D.tabLeaveHint
 			}) : null
@@ -275,4 +302,4 @@ var v = "text-xs font-medium text-text-secondary", y = "text-xs text-text-muted"
 	});
 };
 //#endregion
-export { S as LiveAvatarTabView, _ as avatarPreviewVoice, g as avatarVoiceDisplayName };
+export { C as LiveAvatarTabView, v as avatarPreviewVoice, _ as avatarVoiceDisplayName };

package/dist/shared/assistant/avatar/live/avatarFaces.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The face pictures of the Avatar tab's chooser and frame (BOFF-9362): the host's pictures, sanitised once, and the
+ * initials shown for a face without one. Pure, no React.
+ *
+ * ★★ NO PICTURE SHIPS IN FE-LIBS. The package is public on npm, and the rights to stills of the provider's faces are
+ * the operator's question. Each host imports its own pictures as hashed assets (`avatarImages`, next to its
+ * `avatarNames`); a host that gives none shows initials.
+ *
+ * ★★ A picture is a URL the page fetches, so only two shapes pass: a root-relative path (a hashed asset the app
+ * imported, `/assets/...`) or an `https://` URL, and only for an image: its path (the query and hash aside) ends in
+ * `.webp`, `.avif`, `.png`, `.jpg`, `.jpeg`, `.gif` or `.svg`. Everything else is dropped silently: `javascript:`,
+ * `http:`, a protocol-relative `//host`, `data:`, `blob:`, a page or an endpoint (`/api/logout`), an empty or
+ * non-string value, and an id that is not an avatar id. It is only ever an `<img>` source (an SVG there runs no
+ * script); the extension keeps a host's typo from making every chooser fetch a page.
+ *
+ * ★ A host trap: Vite inlines an imported asset under its `assetsInlineLimit` (4 KB by default) as a `data:` URL,
+ * which this drops, so a very small face file shows initials. The recommended 320 px WebP is well above it.
+ */
+/** Is `value` a picture URL the chooser may load? */
+export declare function isAvatarImageUrl(value: unknown): value is string;
+/**
+ * The host's `avatarImages`, as the view reads it: copied once (a host that changes its object later changes nothing
+ * here), with every entry that is not an avatar id mapped to a picture URL dropped. Never throws.
+ */
+export declare function sanitizeAvatarImages(raw: unknown): ReadonlyMap<string, string>;
+/**
+ * The initials of a face's name, for the placeholder: the first grapheme of the first word and, when there is more
+ * than one, of the LAST word ("Mary Ann Lee" gives "ML"), upper-cased in the reader's locale. Whole graphemes, so a
+ * Tamil, Hindi or Arabic name and a combined character are never cut. An empty name gives "?".
+ */
+export declare function faceInitials(name: string): string;

package/dist/shared/assistant/avatar/live/avatarFaces.js

@@ -0,0 +1,33 @@
+import { resolveStoredAvatarId as e } from "../avatarPreferences.js";
+//#region src/shared/assistant/avatar/live/avatarFaces.ts
+var t = /^\/(?![/\\])[^\\\s]*$/, n = /^https:\/\/[^/\\\s]+(?:[/?#][^\\\s]*)?$/i, r = /^https:\/\/[^/?#]*/i, i = /\.(?:webp|avif|png|jpe?g|gif|svg)$/i;
+function a(e) {
+	let t = e.replace(r, ""), n = t.search(/[?#]/);
+	return n === -1 ? t : t.slice(0, n);
+}
+function o(e) {
+	return typeof e != "string" || e.length === 0 || e.length > 2048 || !t.test(e) && !n.test(e) ? !1 : i.test(a(e));
+}
+function s(t) {
+	let n = /* @__PURE__ */ new Map();
+	if (typeof t != "object" || !t || Array.isArray(t)) return n;
+	for (let [r, i] of Object.entries(t)) e(r) === r && o(i) && n.set(r, i);
+	return n;
+}
+var c;
+function l() {
+	return c === void 0 && (c = typeof Intl < "u" && typeof Intl.Segmenter == "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null), c;
+}
+function u(e) {
+	let t = l();
+	if (t !== null) for (let { segment: n } of t.segment(e)) return n;
+	return Array.from(e)[0] ?? "";
+}
+function d(e) {
+	let t = e.trim().split(/\s+/u).filter((e) => e.length > 0), n = t[0];
+	if (n === void 0) return "?";
+	let r = t.length > 1 ? t[t.length - 1] : void 0;
+	return (u(n) + (r === void 0 ? "" : u(r))).toLocaleUpperCase();
+}
+//#endregion
+export { d as faceInitials, o as isAvatarImageUrl, s as sanitizeAvatarImages };

package/dist/shared/assistant/avatar/live/createLiveAvatarSeam.d.ts

@@ -10,6 +10,18 @@ import { LiveAvatarController, LiveAvatarControllerDeps, LiveAvatarLogEvent, Liv
 export interface LiveAvatarSeamOptions {
     /** Display names for the avatar ids the server offers (it sends ids only); without one the chooser numbers them. */
     readonly avatarNames?: Readonly<Record<string, string>>;
+    /**
+     * BOFF-9362: a picture per avatar id, shown in the Avatar tab's chooser and, while the avatar is off, in its frame. Host config,
+     * like `avatarNames` (the server sends ids only): a root-relative path (a hashed asset the app imported) or an `https://` URL, whose
+     * path ends in an image extension (`.webp`, `.avif`, `.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`). An id with no entry, or a value of
+     * any other shape (`data:`, `blob:`, `http:`, `//host`, `javascript:`, a page), shows the face's initials. Copied once, here: a host
+     * that changes its object later changes nothing. ★ fe-libs ships no picture (it is a public package).
+     *
+     * ★ Vite inlines an imported asset under `build.assetsInlineLimit` (4 KB by default) as a `data:` URL, which is dropped here: a
+     * very small face file shows initials with no warning. Keep each face file above the limit (the recommended 320 px WebP is), or
+     * exclude the faces folder from inlining.
+     */
+    readonly avatarImages?: Readonly<Record<string, string>>;
     /**
      * The speaker each avatar id speaks with as "Default for this avatar" (BOFF-9341): host config, never inferred. An id without one has
      * no Default, and a value that is not a hosted speaker is ignored.