@burdenoff/fe-libs 2026.1024.2 → 2026.1024.4

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

@@ -1,145 +1,167 @@
 import { useAvatarCopy as e } from "../useAvatarCopy.js";
-import { liveAvatarStatusText as t } from "./liveAvatarStatus.js";
-import { useCallback as n, useEffect as r, useId as i, useRef as a, useSyncExternalStore as o } from "react";
-import { Video as s, VideoOff as c, Volume2 as l } from "lucide-react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { liveAvatarMinutesBlockStart as t, liveAvatarMinutesView as n } from "./liveAvatarMinutesView.js";
+import { liveAvatarStatusText as r } from "./liveAvatarStatus.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s, useSyncExternalStore as c } from "react";
+import { Video as l, VideoOff as u, Volume2 as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/shared/assistant/avatar/live/LiveAvatarStage.tsx
-var f = "inline-flex h-8 items-center gap-1.5 rounded-full border border-border-default bg-bg-elevated px-3 text-xs font-medium text-text-secondary transition-colors hover:bg-bg-raised hover:text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong aria-disabled:cursor-default aria-disabled:opacity-60", p = "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-medium transition-colors focus-within:ring-2 focus-within:ring-border-strong", m = "inline-flex h-8 items-center rounded-full bg-action-primary-bg px-3 text-xs font-medium text-action-primary-text transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong aria-disabled:cursor-default aria-disabled:opacity-60", h = ({ controller: h, expanded: g, fallback: _, avatarNames: v }) => {
-	let y = e(), b = i(), x = i(), S = i(), C = a(null), w = a(null), T = n((e) => {
+var m = "inline-flex h-8 items-center gap-1.5 rounded-full border border-border-default bg-bg-elevated px-3 text-xs font-medium text-text-secondary transition-colors hover:bg-bg-raised hover:text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong aria-disabled:cursor-default aria-disabled:opacity-60", h = "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-medium transition-colors focus-within:ring-2 focus-within:ring-border-strong", g = "inline-flex h-8 items-center rounded-full bg-action-primary-bg px-3 text-xs font-medium text-action-primary-text transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong aria-disabled:cursor-default aria-disabled:opacity-60", _ = ({ controller: _, expanded: v, fallback: y, avatarNames: b }) => {
+	let x = e(), S = o(), C = o(), w = o(), T = o(), E = s(null), D = s(null), O = i((e) => {
 		e?.focus();
-	}, []), E = n((e) => (w.current = e, () => {
-		w.current = null, document.activeElement === e && C.current?.focus();
-	}), []), D = o(h.subscribe, h.getSnapshot, h.getSnapshot);
-	r(() => (h.setStageMounted(!0), () => h.setStageMounted(!1)), [h]);
-	let { phase: O } = D, k = O === "starting" || O === "connecting" || O === "ready" || O === "ending", A = O === "checking" || O === "ending", j = Date.now(), M = D.retryAt !== null && D.retryAt > j, N = t(D, y, j), P = (e, t) => v?.[e] ?? `${y.chooserLabel} ${t + 1}`;
-	return /* @__PURE__ */ d("div", {
-		ref: C,
+	}, []), k = i((e) => (D.current = e, () => {
+		D.current = null, document.activeElement === e && E.current?.focus();
+	}), []), A = c(_.subscribe, _.getSnapshot, _.getSnapshot);
+	a(() => (_.setStageMounted(!0), () => _.setStageMounted(!1)), [_]);
+	let { phase: j } = A, M = j === "starting" || j === "connecting" || j === "ready" || j === "ending", N = j === "checking" || j === "ending", P = Date.now(), F = A.retryAt !== null && A.retryAt > P, I = r(A, x, P), L = n({
+		snapshot: A,
+		access: { status: "absent" },
+		now: P
+	}, x)?.stageLines ?? [], R = t(A, P), z = F || R, B = F ? `${S} ${C}` : R ? [
+		S,
+		I === null ? null : C,
+		L.length > 0 ? T : null
+	].filter((e) => e !== null).join(" ") : S, V = (e, t) => b?.[e] ?? `${x.chooserLabel} ${t + 1}`;
+	return /* @__PURE__ */ p("div", {
+		ref: E,
 		tabIndex: -1,
 		className: "flex flex-col items-center gap-2 focus:outline-none",
 		"data-testid": "assistant-live-avatar",
 		children: [
-			k ? /* @__PURE__ */ d("div", {
-				className: `relative overflow-hidden rounded-2xl border border-border-subtle bg-bg-sunken ${g ? "size-64" : "size-40"}`,
+			M ? /* @__PURE__ */ p("div", {
+				className: `relative overflow-hidden rounded-2xl border border-border-subtle bg-bg-sunken ${v ? "size-64" : "size-40"}`,
 				"data-testid": "assistant-live-avatar-frame",
-				"data-phase": O,
+				"data-phase": j,
 				children: [
-					/* @__PURE__ */ u("video", {
-						ref: h.attachVideo,
-						className: `size-full object-cover ${D.videoReady ? "" : "invisible"}`,
-						"aria-label": y.stageLabel,
+					/* @__PURE__ */ f("video", {
+						ref: _.attachVideo,
+						className: `size-full object-cover ${A.videoReady ? "" : "invisible"}`,
+						"aria-label": x.stageLabel,
 						autoPlay: !0,
 						muted: !0,
 						playsInline: !0,
 						"data-testid": "assistant-live-avatar-video"
 					}),
-					D.videoReady ? null : /* @__PURE__ */ u("p", {
+					A.videoReady ? null : /* @__PURE__ */ f("p", {
 						className: "absolute inset-0 flex items-center justify-center p-3 text-center text-xs text-text-muted",
-						children: O === "ending" ? y.stateEnding : O === "connecting" ? y.stageWaiting : y.stateStarting
+						children: j === "ending" ? x.stateEnding : j === "connecting" ? x.stageWaiting : x.stateStarting
 					}),
-					D.audioBlocked ? /* @__PURE__ */ d("button", {
+					A.audioBlocked ? /* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: () => h.resumeAudio(),
+						onClick: () => _.resumeAudio(),
 						className: "absolute inset-x-2 bottom-2 inline-flex items-center justify-center gap-1.5 rounded-xl bg-bg-elevated px-2 py-1.5 text-xs font-medium text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
 						"data-testid": "assistant-live-avatar-sound",
-						children: [/* @__PURE__ */ u(l, {
+						children: [/* @__PURE__ */ f(d, {
 							className: "size-4 shrink-0",
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ u("span", { children: y.problem("playback-blocked") })]
+						}), /* @__PURE__ */ f("span", { children: x.problem("playback-blocked") })]
 					}) : null
 				]
-			}) : _,
-			D.offered || k ? /* @__PURE__ */ d("button", {
-				ref: E,
+			}) : y,
+			A.offered || M ? /* @__PURE__ */ p("button", {
+				ref: k,
 				type: "button",
 				onClick: () => {
-					A || (k ? h.switchOff() : O === "choosing" ? h.cancelChoice() : h.requestOn());
+					N || (M ? _.switchOff() : j === "choosing" ? _.cancelChoice() : _.requestOn());
 				},
-				className: f,
-				"aria-pressed": k,
-				title: y.toggleHint,
-				"aria-disabled": A,
+				className: m,
+				"aria-pressed": M,
+				title: x.toggleHint,
+				"aria-disabled": N,
 				"data-testid": "assistant-live-avatar-toggle",
-				children: [u(k ? c : s, {
+				children: [f(M ? u : l, {
 					className: "size-4",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ u("span", { children: y.toggle })]
+				}), /* @__PURE__ */ f("span", { children: x.toggle })]
 			}) : null,
-			O === "choosing" ? /* @__PURE__ */ d("fieldset", {
+			j === "choosing" ? /* @__PURE__ */ p("fieldset", {
 				className: "flex max-w-xs flex-col gap-2 rounded-xl border border-border-default bg-bg-elevated p-3 text-start",
 				"data-testid": "assistant-live-avatar-consent",
 				children: [
-					/* @__PURE__ */ u("legend", {
+					/* @__PURE__ */ f("legend", {
 						className: "sr-only",
-						children: y.toggle
+						children: x.toggle
 					}),
-					D.avatars.length > 1 ? /* @__PURE__ */ d("fieldset", {
+					A.avatars.length > 1 ? /* @__PURE__ */ p("fieldset", {
 						className: "flex flex-wrap gap-1.5",
 						"data-testid": "assistant-live-avatar-chooser",
-						children: [/* @__PURE__ */ u("legend", {
+						children: [/* @__PURE__ */ f("legend", {
 							className: "sr-only",
-							children: y.chooserTitle
-						}), D.avatars.map((e, t) => {
-							let n = e === D.selectedAvatarId, r = P(e, t);
-							return /* @__PURE__ */ d("label", {
-								className: `${p} ${n ? "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: n ? y.chooserSelected(r) : y.chooserOption(r),
-								children: [/* @__PURE__ */ u("input", {
+							children: x.chooserTitle
+						}), A.avatars.map((e, t) => {
+							let n = e === A.selectedAvatarId, r = V(e, t);
+							return /* @__PURE__ */ p("label", {
+								className: `${h} ${n ? "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: n ? x.chooserSelected(r) : x.chooserOption(r),
+								children: [/* @__PURE__ */ f("input", {
 									type: "radio",
-									name: S,
+									name: w,
 									value: e,
 									checked: n,
-									onChange: () => h.selectAvatar(e),
+									onChange: () => _.selectAvatar(e),
 									className: "sr-only",
 									"data-avatar-id": e
 								}), r]
 							}, e);
 						})]
 					}) : null,
-					/* @__PURE__ */ u("p", {
-						ref: T,
-						id: b,
+					/* @__PURE__ */ f("p", {
+						ref: O,
+						id: S,
 						tabIndex: -1,
 						className: "text-xs text-text-secondary focus:outline-none",
 						"data-testid": "assistant-live-avatar-disclosure",
-						children: y.consent
+						children: x.consent
 					}),
-					/* @__PURE__ */ d("div", {
+					L.length > 0 ? /* @__PURE__ */ f("div", {
+						id: T,
+						className: "flex flex-col gap-0.5 text-xs text-text-secondary",
+						"data-testid": "assistant-live-avatar-minutes",
+						children: L.map((e) => /* @__PURE__ */ f("p", {
+							"data-testid": "assistant-live-avatar-minutes-line",
+							children: e
+						}, e))
+					}) : null,
+					/* @__PURE__ */ p("div", {
 						className: "flex justify-end gap-2",
-						children: [/* @__PURE__ */ u("button", {
+						children: [/* @__PURE__ */ f("button", {
 							type: "button",
 							onClick: () => {
-								w.current?.focus(), h.cancelChoice();
+								D.current?.focus(), _.cancelChoice();
 							},
-							className: f,
-							children: y.consentCancel
-						}), /* @__PURE__ */ u("button", {
+							className: m,
+							children: x.consentCancel
+						}), /* @__PURE__ */ f("button", {
 							type: "button",
 							onClick: () => {
-								if (M) {
-									h.recheckRetry();
+								if (F) {
+									_.recheckRetry();
 									return;
 								}
-								w.current?.focus(), h.confirm();
+								if (R) {
+									A.retryAt !== null && _.recheckRetry();
+									return;
+								}
+								D.current?.focus(), _.confirm();
 							},
-							"aria-describedby": M ? `${b} ${x}` : b,
-							"aria-disabled": M,
-							className: m,
-							disabled: D.selectedAvatarId === null,
+							"aria-describedby": B,
+							"aria-disabled": z,
+							className: g,
+							disabled: A.selectedAvatarId === null,
 							"data-testid": "assistant-live-avatar-confirm",
-							children: y.consentConfirm
+							children: x.consentConfirm
 						})]
 					})
 				]
 			}) : null,
-			/* @__PURE__ */ u("p", {
-				id: x,
-				className: N === null ? "sr-only" : "max-w-xs text-center text-xs text-text-muted",
+			/* @__PURE__ */ f("p", {
+				id: C,
+				className: I === null ? "sr-only" : "max-w-xs text-center text-xs text-text-muted",
 				role: "status",
 				"data-testid": "assistant-live-avatar-status",
-				children: N ?? ""
+				children: I ?? ""
 			})
 		]
 	});
 };
 //#endregion
-export { h as LiveAvatarStageView };
+export { _ as LiveAvatarStageView };

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

@@ -5,6 +5,7 @@ import { LiveAvatarTabProps } from '../../ui/assistantLiveAvatarSeam';
 import { AvatarVoiceDefault, AvatarVoicePreference } from '../avatarPreferences';
 import { LiveAvatarVoices } from './avatarVoice';
 import { LiveAvatarController } from './liveAvatarController';
+import { LiveAvatarMinutesPurchase } from './liveAvatarMinutesView';
 /** The person's avatar voice choice: read by the engine decorator per reply, written by the tab's select. STABLE. */
 export interface LiveAvatarVoiceStore {
     getState(): AvatarVoicePreference;
@@ -24,6 +25,11 @@ export interface LiveAvatarTabViewProps extends LiveAvatarTabProps {
     readonly voiceStore: LiveAvatarVoiceStore;
     /** Wall-clock milliseconds: the retry time and the Turn off guard. Tests pass their own. */
     readonly now?: () => number;
+    /**
+     * ★ BOFF-9446: the host's purchase access (`LiveAvatarSeamOptions.minutesPurchase`, copied once by the seam). Absent: nobody is
+     * offered "See plans" here.
+     */
+    readonly minutesPurchase?: LiveAvatarMinutesPurchase;
 }
 /** A voice name as the person reads it: a hosted voice by its speaker ("Kore"), any other by its own name. */
 export declare function avatarVoiceDisplayName(name: string): string;