@sensiblestats/widget-react 0.61.2 → 0.62.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/StatsWidget.tsx
-import { useCallback as useCallback9, useEffect as useEffect18, useMemo as useMemo3, useRef as useRef14, useState as useState38 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo3, useRef as useRef15, useState as useState38 } from "react";
 import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
 
 // src/kickoff.ts
@@ -614,6 +614,10 @@ var STRINGS = {
 function resolveLocaleStrings(locale) {
   return STRINGS[locale] ?? STRINGS.en;
 }
+function isEnglishLocale(locale) {
+  const lang = (locale ?? "").trim().toLowerCase().split(/[-_]/)[0] ?? "";
+  return lang === "en" || !Object.prototype.hasOwnProperty.call(STRINGS, lang);
+}
 
 // src/config.ts
 function normalizeUi(cfg) {
@@ -623,6 +627,7 @@ function normalizeUi(cfg) {
     accent: cfg.accent,
     logoUrl: cfg.logoUrl,
     headerTitle: cfg.headerTitle,
+    rawBettingLabels: isEnglishLocale(cfg.locale),
     cta: cfg.cta,
     surface: cfg.surface,
     ink: cfg.ink,
@@ -738,6 +743,18 @@ function toUserContext(cfg) {
 
 // src/slip.ts
 var ADD_TO_SLIP_TIMEOUT_MS = 1e4;
+var MAX_SELECTION = 64;
+var MAX_LINE = 32;
+var MAX_ODDS = 1e4;
+function slipPickFields(selection, label, line) {
+  const fields = {};
+  if (Number.isSafeInteger(selection.matchId) && selection.matchId > 0) fields.matchId = selection.matchId;
+  if (label && label.trim() && label.length <= MAX_SELECTION) fields.selection = label;
+  if (line && line.trim() && line.length <= MAX_LINE) fields.line = line;
+  const odds = selection.oddsDecimal;
+  if (Number.isFinite(odds) && odds > 1 && odds <= MAX_ODDS) fields.odds = odds;
+  return fields;
+}
 function wasAdded(result) {
   if (!result) return true;
   if (result.status === "price_changed") return result.accepted;
@@ -1024,6 +1041,8 @@ function toMarketOddsVM(card) {
     return {
       key: `${selection}:${str(r.line) ?? ""}:${i}`,
       selection,
+      selectionLabel: str(r.selectionLabel),
+      line: str(r.line),
       odds: price !== void 0 ? price.toFixed(2) : "",
       oddsDecimal: price,
       matchOddsId: typeof r.matchOddsId === "number" ? r.matchOddsId : void 0,
@@ -1777,6 +1796,7 @@ function useLiveMonitor(opts) {
   const inFlightRef = useRef3(false);
   const timerRef = useRef3(void 0);
   const disabledRef = useRef3(false);
+  const mountedRef = useRef3(false);
   const getLiveMonitorRef = useRef3(opts.getLiveMonitor);
   getLiveMonitorRef.current = opts.getLiveMonitor;
   const tick = useCallback2(async () => {
@@ -1784,6 +1804,7 @@ function useLiveMonitor(opts) {
     inFlightRef.current = true;
     try {
       const snap = await getLiveMonitorRef.current(pinsRef.current);
+      if (!mountedRef.current) return;
       if (snap === null) {
         disabledRef.current = true;
         applySnapshot(null);
@@ -1805,10 +1826,16 @@ function useLiveMonitor(opts) {
   });
   scheduleRef.current = () => {
     window.clearTimeout(timerRef.current);
-    if (disabledRef.current || pinsRef.current.length === 0 || document.visibilityState === "hidden") return;
+    if (!mountedRef.current || disabledRef.current || pinsRef.current.length === 0 || document.visibilityState === "hidden") return;
     const hinted = (snapshotRef.current?.nextPollSeconds ?? DEFAULT_POLL_MS / 1e3) * 1e3;
     timerRef.current = window.setTimeout(() => void tick(), Math.max(MIN_POLL_MS, hinted));
   };
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
   const prevPinsLengthRef = useRef3(0);
   useEffect3(() => {
     const wasEmpty = prevPinsLengthRef.current === 0;
@@ -2203,8 +2230,31 @@ function useEventLog() {
   return useContext(EventLogContext);
 }
 
+// src/popupTelemetry.ts
+import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7 } from "react";
+function usePopupTelemetry(log, isOpen, popupText, dismissPopup) {
+  const shownRef = useRef7(/* @__PURE__ */ new Set());
+  const closedTextRef = useRef7(null);
+  useEffect7(() => {
+    if (isOpen) {
+      if (closedTextRef.current) log?.log({ name: "popup_opened" });
+      closedTextRef.current = null;
+      return;
+    }
+    closedTextRef.current = popupText;
+    if (popupText && !shownRef.current.has(popupText)) {
+      shownRef.current.add(popupText);
+      log?.log({ name: "popup_shown" });
+    }
+  }, [log, isOpen, popupText]);
+  return useCallback6(() => {
+    log?.log({ name: "popup_dismissed" });
+    dismissPopup();
+  }, [log, dismissPopup]);
+}
+
 // src/components/ChatFab.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef8, useState as useState7 } from "react";
 
 // src/components/BrandMark.tsx
 import { useState as useState6 } from "react";
@@ -2282,8 +2332,8 @@ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup, dismissLabel = "Dismiss", introAllowed = false, onIntroStart }) {
   const bubble = popupText ?? greeting;
   const [intro, setIntro] = useState7(false);
-  const armedRef = useRef7(introAllowed);
-  useEffect7(() => {
+  const armedRef = useRef8(introAllowed);
+  useEffect8(() => {
     if (armedRef.current && bubble) {
       armedRef.current = false;
       setIntro(true);
@@ -2297,10 +2347,10 @@ function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup,
 }
 
 // src/components/ChatPanel.tsx
-import { useEffect as useEffect17, useState as useState37 } from "react";
+import { useEffect as useEffect18, useState as useState37 } from "react";
 
 // src/components/ChatHeader.tsx
-import { useEffect as useEffect8, useRef as useRef8, useState as useState8 } from "react";
+import { useEffect as useEffect9, useRef as useRef9, useState as useState8 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function ChatHeader({
   onClose,
@@ -2313,14 +2363,14 @@ function ChatHeader({
   moreOptionsLabel = "More options"
 }) {
   const [menuOpen, setMenuOpen] = useState8(false);
-  const wrapRef = useRef8(null);
-  const kebabRef = useRef8(null);
-  const firstItemRef = useRef8(null);
+  const wrapRef = useRef9(null);
+  const kebabRef = useRef9(null);
+  const firstItemRef = useRef9(null);
   const hasMenu = !!(canReset && onNewConversation);
-  useEffect8(() => {
+  useEffect9(() => {
     if (menuOpen) firstItemRef.current?.focus();
   }, [menuOpen]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!menuOpen) return;
     const onPointer = (e) => {
       if (!wrapRef.current?.contains(e.target)) setMenuOpen(false);
@@ -2376,7 +2426,7 @@ function ChatHeader({
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect12, useRef as useRef10 } from "react";
+import { useEffect as useEffect13, useRef as useRef11 } from "react";
 
 // src/components/Markdown.tsx
 import ReactMarkdown from "react-markdown";
@@ -2506,15 +2556,15 @@ function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMore
 import { useState as useState13 } from "react";
 
 // src/components/AddToSlipButton.tsx
-import { useCallback as useCallback6, useState as useState10 } from "react";
+import { useCallback as useCallback7, useState as useState10 } from "react";
 import { isAddToSlipResult } from "@sensiblestats/widget-sdk";
 
 // src/components/Toast.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var DISMISS_MS = 4e3;
 function Toast({ toast, onDismiss }) {
-  useEffect9(() => {
+  useEffect10(() => {
     if (!toast) return;
     const timer = setTimeout(onDismiss, DISMISS_MS);
     return () => clearTimeout(timer);
@@ -2531,18 +2581,19 @@ function withTimeout(value) {
     new Promise((_, reject) => setTimeout(() => reject(new Error("add-to-slip timed out")), ADD_TO_SLIP_TIMEOUT_MS))
   ]);
 }
-function SlipButton({ selection, shownOdds, marketName, marketDeveloperName, slip, ui }) {
+function SlipButton({ selection, shownOdds, marketDeveloperName, selectionLabel, line, slip, ui }) {
   const [pending, setPending] = useState10(false);
   const [settled, setSettled] = useState10(false);
   const [toast, setToast] = useState10(null);
-  const dismiss = useCallback6(() => setToast(null), []);
+  const dismiss = useCallback7(() => setToast(null), []);
   const log = useEventLog();
   const handler = slip.onAddToSlip;
   if (!ui || !handler || !selection) return null;
   const onClick = async () => {
     setPending(true);
+    const pick = slipPickFields(selection, ui.rawBettingLabels ? selectionLabel : void 0, line);
     if (marketDeveloperName !== void 0) {
-      log?.log({ name: "slip_click", entityType: "market", marketDeveloperName, entityId: marketDeveloperName });
+      log?.log({ name: "slip_click", entityType: "market", marketDeveloperName, entityId: marketDeveloperName, ...pick });
     }
     try {
       const raw = await withTimeout(Promise.resolve(handler(selection)));
@@ -2554,20 +2605,15 @@ function SlipButton({ selection, shownOdds, marketName, marketDeveloperName, sli
           entityType: "market",
           marketDeveloperName,
           entityId: marketDeveloperName,
-          outcome: slipOutcome(result)
+          outcome: slipOutcome(result),
+          ...pick
         });
       }
       setToast(resultToToast(result, shownOdds || selection.oddsDecimal.toFixed(2), ui));
       setSettled(isTerminal(result));
-      if (wasAdded(result) && slip.onMarketClicked) {
-        try {
-          slip.onMarketClicked(marketName);
-        } catch {
-        }
-      }
     } catch {
       if (marketDeveloperName !== void 0) {
-        log?.log({ name: "slip_result", entityType: "market", marketDeveloperName, entityId: marketDeveloperName, outcome: "timeout" });
+        log?.log({ name: "slip_result", entityType: "market", marketDeveloperName, entityId: marketDeveloperName, outcome: "timeout", ...pick });
       }
       setToast({ kind: "error", text: ui.slipFailed });
     } finally {
@@ -2595,8 +2641,9 @@ function AddToSlipButton({ it, slip, ui }) {
     {
       selection,
       shownOdds: it.odds ?? "",
-      marketName: it.market,
       marketDeveloperName: it.marketDeveloperName,
+      selectionLabel: it.selectionLabel,
+      line: it.line,
       slip,
       ui
     }
@@ -2640,7 +2687,7 @@ function Crest2({ url, name, kind }) {
 }
 
 // src/components/PinToggle.tsx
-import { useCallback as useCallback7, useState as useState12 } from "react";
+import { useCallback as useCallback8, useState as useState12 } from "react";
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var PIN_GLYPHS = {
   pin: { viewBox: "0 0 24 24", strokeWidth: 1.4, transform: "scale(1.5)", d: "M9.5 1.5 14.5 6.5 13 8l-.5-.5-3 3 .3 2.2-1.4 1.4L5.6 11.3l-3.3 3.3-1-1 3.3-3.3L1.9 7.5l1.4-1.4 2.2.3 3-3L8 2.9z" },
@@ -2649,7 +2696,7 @@ var PIN_GLYPHS = {
 };
 function PinToggle({ pin, monitor, ui }) {
   const [toast, setToast] = useState12(null);
-  const dismiss = useCallback7(() => setToast(null), []);
+  const dismiss = useCallback8(() => setToast(null), []);
   const log = useEventLog();
   if (!monitor || !monitor.enabled) return null;
   const key = pinKey(pin);
@@ -2853,7 +2900,7 @@ function OddsRow({ vm, row, ui, slip, inSlipIds }) {
       "\u2713 ",
       ui.inSlipLabel
     ] }) : null,
-    /* @__PURE__ */ jsx14(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, marketDeveloperName: vm.marketDeveloperName, slip, ui })
+    /* @__PURE__ */ jsx14(SlipButton, { selection, shownOdds: row.odds, marketDeveloperName: vm.marketDeveloperName, selectionLabel: row.selectionLabel, line: row.line, slip, ui })
   ] });
 }
 function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }) {
@@ -3025,7 +3072,37 @@ function ActionButtons({ actions, loading, disabled, onAct }) {
 // src/components/dashboard/DashboardTile.tsx
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var MAX_CRESTS = 3;
-function DashboardTile({ tile, onTap }) {
+var ODDS_TAIL = /\s*·\s*@(\d+(?:\.\d+)?)\s*$/;
+function splitOdds(subtitle) {
+  const m = ODDS_TAIL.exec(subtitle);
+  return m ? { text: subtitle.slice(0, m.index), odds: m[1] } : { text: subtitle };
+}
+function HeroTile({ tile, onTap, oddsLabel }) {
+  const crests = (tile.imageUrls ?? []).filter(Boolean).slice(0, 2);
+  const sub = tile.subtitle ? splitOdds(tile.subtitle) : null;
+  return /* @__PURE__ */ jsxs13("button", { type: "button", className: "ss-w-dash-tile ss-w-dash-tile--full ss-w-dash-hero", onClick: onTap, children: [
+    /* @__PURE__ */ jsxs13("span", { className: "ss-w-dash-hero-top", children: [
+      tile.badgeText ? /* @__PURE__ */ jsx17("span", { className: "ss-w-dash-hero-badge", children: tile.badgeText }) : null,
+      sub?.odds ? /* @__PURE__ */ jsxs13("span", { className: "ss-w-dash-hero-price", children: [
+        /* @__PURE__ */ jsxs13("span", { className: "ss-g-sr", children: [
+          oddsLabel,
+          " "
+        ] }),
+        sub.odds
+      ] }) : null,
+      /* @__PURE__ */ jsx17("span", { className: "ss-w-dash-hero-chevron", children: /* @__PURE__ */ jsx17(ChevronIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs13("span", { className: "ss-w-dash-hero-main", children: [
+      /* @__PURE__ */ jsx17("span", { className: "ss-w-dash-hero-visual", "aria-hidden": "true", children: crests.length > 0 ? crests.map((url, i) => /* @__PURE__ */ jsx17("span", { className: "ss-w-dash-hero-crest", style: { backgroundImage: `url(${url})` } }, `${url}-${i}`)) : /* @__PURE__ */ jsx17("span", { className: "ss-w-dash-hero-icon", children: /* @__PURE__ */ jsx17(DashboardIcon, { name: tile.icon }) }) }),
+      /* @__PURE__ */ jsxs13("span", { className: "ss-w-dash-hero-body", children: [
+        /* @__PURE__ */ jsx17("span", { className: "ss-w-dash-hero-title", children: tile.title }),
+        sub?.text ? /* @__PURE__ */ jsx17("span", { className: "ss-w-dash-hero-subtitle", children: sub.text }) : null
+      ] })
+    ] })
+  ] });
+}
+function DashboardTile({ tile, onTap, oddsLabel = "Odds" }) {
+  if (tile.emphasis === "hero") return /* @__PURE__ */ jsx17(HeroTile, { tile, onTap, oddsLabel });
   const spanClass = tile.span === "full" ? "ss-w-dash-tile--full" : "ss-w-dash-tile--half";
   const crests = (tile.imageUrls ?? []).slice(0, MAX_CRESTS);
   const hasMeta = Boolean(tile.badgeText) || crests.length > 0;
@@ -3058,13 +3135,13 @@ var LAYOUT_CLASSES = {
 function layoutClass(layout) {
   return Object.prototype.hasOwnProperty.call(LAYOUT_CLASSES, layout) ? LAYOUT_CLASSES[layout] : LAYOUT_CLASSES.goal;
 }
-function GreetingDashboard({ dashboard, onTap }) {
+function GreetingDashboard({ dashboard, onTap, oddsLabel }) {
   return /* @__PURE__ */ jsxs14("div", { className: `ss-w-dash ${layoutClass(dashboard.layout)}`, children: [
     /* @__PURE__ */ jsxs14("div", { className: "ss-w-dash-head", children: [
       /* @__PURE__ */ jsx18("span", { className: "ss-w-dash-title", children: dashboard.title }),
       dashboard.subtitle ? /* @__PURE__ */ jsx18("span", { className: "ss-w-dash-subtitle", children: dashboard.subtitle }) : null
     ] }),
-    /* @__PURE__ */ jsx18("div", { className: "ss-w-dash-grid", children: dashboard.tiles.map((t, i) => /* @__PURE__ */ jsx18(DashboardTile, { tile: t, onTap: () => onTap(t, i) }, `${t.title}-${i}`)) }),
+    /* @__PURE__ */ jsx18("div", { className: "ss-w-dash-grid", children: dashboard.tiles.map((t, i) => /* @__PURE__ */ jsx18(DashboardTile, { tile: t, onTap: () => onTap(t, i), oddsLabel }, `${t.title}-${i}`)) }),
     dashboard.footerTip ? /* @__PURE__ */ jsx18("span", { className: "ss-w-dash-foot", children: dashboard.footerTip }) : null
   ] });
 }
@@ -3160,7 +3237,7 @@ function FixtureCard({ card }) {
 }
 
 // src/components/dashboard/CountdownCard.tsx
-import { Fragment as Fragment6, useEffect as useEffect10, useState as useState15 } from "react";
+import { Fragment as Fragment6, useEffect as useEffect11, useState as useState15 } from "react";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var DAY_MS = 864e5;
 function remainingSegments(kickoffUnix, nowMs, withSeconds) {
@@ -3184,7 +3261,7 @@ function CountdownCard({ card }) {
     () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
   );
   const withinDay = data.kickoffUnix * 1e3 - nowMs < DAY_MS;
-  useEffect10(() => {
+  useEffect11(() => {
     if (reduced) return;
     const id = window.setInterval(() => setNowMs(Date.now()), withinDay ? 1e3 : 6e4);
     return () => window.clearInterval(id);
@@ -3541,10 +3618,10 @@ function RestingFormCard({ card }) {
 }
 
 // src/components/dashboard/LiveScoreCard.tsx
-import { useRef as useRef9, useState as useState19 } from "react";
+import { useRef as useRef10, useState as useState19 } from "react";
 
 // src/useLiveClock.ts
-import { useEffect as useEffect11, useState as useState18 } from "react";
+import { useEffect as useEffect12, useState as useState18 } from "react";
 var TICK_MS = 6e4;
 var MAX_LIVE_TICK_MINUTES = 15;
 function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
@@ -3556,7 +3633,7 @@ function useLiveClock(minute, clockRunning, receivedAtMs) {
   const [displayMinute, setDisplayMinute] = useState18(
     () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
   );
-  useEffect11(() => {
+  useEffect12(() => {
     setDisplayMinute(computeDisplayMinute(minute, clockRunning, receivedAtMs));
     if (!clockRunning) return;
     const id = window.setInterval(() => {
@@ -3592,7 +3669,7 @@ function LiveScoreCard({
 }) {
   const { data } = card;
   const seedKey = `${data.minute}:${data.homeScore}:${data.awayScore}`;
-  const seedRef = useRef9(null);
+  const seedRef = useRef10(null);
   if (!seedRef.current || seedRef.current.key !== seedKey) {
     seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
   }
@@ -3881,7 +3958,7 @@ function ChatMessage({ message, disabled, onAct, onTap, ui, slip, monitor }) {
   };
   return /* @__PURE__ */ jsxs37("div", { className: "ss-w-msg ss-w-bot", "data-msg-id": message.id, children: [
     message.text && !message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ jsx41(Markdown, { text: message.text }) : null,
-    message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ jsx41(GreetingDashboard, { dashboard: message.greetingDashboard, onTap }) : null,
+    message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ jsx41(GreetingDashboard, { dashboard: message.greetingDashboard, onTap, oddsLabel: ui?.oddsLabel }) : null,
     message.clubFanDashboard ? /* @__PURE__ */ jsx41(ClubFanDashboard, { dashboard: message.clubFanDashboard, onTap: onFanDashboardTap, ui }) : null,
     /* @__PURE__ */ jsx41(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
     /* @__PURE__ */ jsx41(BettingInsightList, { insights: message.insights, ui, slip, monitor }),
@@ -3914,11 +3991,11 @@ function turnAnchor(messages) {
 }
 function MessageList({ controller, ui, slip, onDashboardTap, monitor }) {
   const { state, send } = controller;
-  const listRef = useRef10(null);
-  const endRef = useRef10(null);
-  const pinnedRef = useRef10(true);
-  const anchoredTurnRef = useRef10(null);
-  useEffect12(() => {
+  const listRef = useRef11(null);
+  const endRef = useRef11(null);
+  const pinnedRef = useRef11(true);
+  const anchoredTurnRef = useRef11(null);
+  useEffect13(() => {
     const anchor = turnAnchor(state.messages);
     const list = listRef.current;
     if (anchor && anchor.turnId !== anchoredTurnRef.current) {
@@ -4207,8 +4284,8 @@ function MonitorMatchCard({ match, promotedPins, monitor, ui, slip }) {
               {
                 selection,
                 shownOdds: typeof row.market.price === "number" ? row.market.price.toFixed(2) : "",
-                marketName: row.market.marketLabel,
                 marketDeveloperName: row.market.marketDeveloperName,
+                selectionLabel: row.market.selectionLabel,
                 slip,
                 ui
               }
@@ -4400,7 +4477,7 @@ function TodayPanel({ discovery, ui, monitor }) {
 }
 
 // src/components/GamesPanel.tsx
-import { useEffect as useEffect16, useState as useState35 } from "react";
+import { useEffect as useEffect17, useState as useState35 } from "react";
 
 // src/components/GamesLoginWall.tsx
 import { jsx as jsx52 } from "react/jsx-runtime";
@@ -4409,7 +4486,7 @@ function GamesLoginWall({ ui }) {
 }
 
 // src/components/GamesHub.tsx
-import { useEffect as useEffect13, useState as useState22 } from "react";
+import { useEffect as useEffect14, useState as useState22 } from "react";
 
 // src/components/games/ui/gameMeta.ts
 function prettifyGameId(gameId) {
@@ -4595,7 +4672,7 @@ function pickHeroGame(games) {
 var tileKey = (g) => `${g.gameId}-${g.gameDay}-${g.fixtureId}`;
 function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
   const [, setTick] = useState22(0);
-  useEffect13(() => {
+  useEffect14(() => {
     const id = setInterval(() => setTick((t) => t + 1), 6e4);
     return () => clearInterval(id);
   }, []);
@@ -4655,10 +4732,10 @@ function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
 }
 
 // src/components/GameScreenHost.tsx
-import { useEffect as useEffect15, useRef as useRef13, useState as useState34 } from "react";
+import { useEffect as useEffect16, useRef as useRef14, useState as useState34 } from "react";
 
 // src/useGamePlay.ts
-import { useCallback as useCallback8, useRef as useRef11, useState as useState23 } from "react";
+import { useCallback as useCallback9, useRef as useRef12, useState as useState23 } from "react";
 function toSubmitResult(payload) {
   return {
     // 'pending' means the play is recorded but awaiting resolution (fixture games)
@@ -4673,14 +4750,14 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
   const [result, setResult] = useState23(null);
   const [submitting, setSubmitting] = useState23(false);
   const [rawStatus, setRawStatus] = useState23(null);
-  const inFlightRef = useRef11(false);
-  const convRef = useRef11(conversation);
+  const inFlightRef = useRef12(false);
+  const convRef = useRef12(conversation);
   convRef.current = conversation;
-  const optsRef = useRef11({ gameId, gameDay, fixtureId, locale, refresh });
+  const optsRef = useRef12({ gameId, gameDay, fixtureId, locale, refresh });
   optsRef.current = { gameId, gameDay, fixtureId, locale, refresh };
-  const resultRef = useRef11(null);
+  const resultRef = useRef12(null);
   resultRef.current = result;
-  const refetch = useCallback8(async () => {
+  const refetch = useCallback9(async () => {
     const conv = convRef.current;
     if (!conv) return;
     const opts = optsRef.current;
@@ -4696,7 +4773,7 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
     } catch {
     }
   }, []);
-  const submit = useCallback8(async (answerJson) => {
+  const submit = useCallback9(async (answerJson) => {
     const conv = convRef.current;
     if (!conv || inFlightRef.current) return;
     inFlightRef.current = true;
@@ -4723,7 +4800,7 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
       setSubmitting(false);
     }
   }, [refetch]);
-  const hydrate = useCallback8(() => {
+  const hydrate = useCallback9(() => {
     void refetch();
   }, [refetch]);
   return { result, submitting, submit, hydrate, rawStatus };
@@ -5524,7 +5601,7 @@ function CareerPathGame({
     /* @__PURE__ */ jsx70(GameHeader, { title, eyebrow: s.eyebrow, right, onBack, backLabel: ui.back }),
     /* @__PURE__ */ jsxs58("div", { className: "ss-g-body", children: [
       /* @__PURE__ */ jsxs58("div", { className: "ss-g-cp-card", children: [
-        /* @__PURE__ */ jsx70(Silhouette, { size: 64, variant: isOver ? "default" : "mystery" }),
+        isOver && clientState?.revealedPlayerName ? /* @__PURE__ */ jsx70(PlayerAvatar, { className: "ss-g-cp-photo", name: clientState.revealedPlayerName, imagePath: clientState.revealedPlayerImagePath }) : /* @__PURE__ */ jsx70(Silhouette, { size: 64, variant: isOver ? "default" : "mystery" }),
         /* @__PURE__ */ jsxs58("div", { className: "ss-g-cp-card-text", children: [
           /* @__PURE__ */ jsx70("span", { className: "ss-g-cp-card-title", children: isOver && clientState?.revealedPlayerName ? clientState.revealedPlayerName : s.mysteryPlayer }),
           clientState?.hintLine ? /* @__PURE__ */ jsx70("span", { className: "ss-g-cp-hint", children: clientState.hintLine }) : !isOver ? /* @__PURE__ */ jsxs58("span", { className: "ss-g-cp-locks", children: [
@@ -5608,7 +5685,7 @@ function CareerPathGame({
 }
 
 // src/components/games/BeatTheGridGame.tsx
-import React, { useEffect as useEffect14, useId as useId4, useRef as useRef12, useState as useState28 } from "react";
+import React, { useEffect as useEffect15, useId as useId4, useRef as useRef13, useState as useState28 } from "react";
 import { Fragment as Fragment14, jsx as jsx71, jsxs as jsxs59 } from "react/jsx-runtime";
 function criterionIconKind(label, key) {
   const l = (key ?? label).toLowerCase();
@@ -5691,8 +5768,8 @@ function SearchSheet({
   const s = ui.games.beatTheGrid;
   const [query, setQuery] = useState28("");
   const inputId = useId4();
-  const inputRef = useRef12(null);
-  useEffect14(() => {
+  const inputRef = useRef13(null);
+  useEffect15(() => {
     inputRef.current?.focus();
   }, [row, col]);
   const filtered = playerPool.filter(
@@ -5940,7 +6017,8 @@ function toRows(positions) {
     bucket.push(p);
     byRow.set(rowKey, bucket);
   });
-  return [...byRow.keys()].sort((a, b) => b - a).map((k) => byRow.get(k));
+  const col = (p) => Number(p.slot?.split(":")[1]) || 0;
+  return [...byRow.keys()].sort((a, b) => b - a).map((k) => [...byRow.get(k)].sort((a, b) => col(b) - col(a)));
 }
 function formationLabel(rowsAttackFirst) {
   if (rowsAttackFirst.length < 2) return "";
@@ -6993,7 +7071,7 @@ function GameScreenHost({
 }) {
   const { gameId, fixtureId, gameDay = "", lockAtUtc = null } = selected;
   const [configJson, setConfigJson] = useState34(null);
-  useEffect15(() => {
+  useEffect16(() => {
     setConfigJson(null);
     if (!conversation) return;
     let cancelled = false;
@@ -7016,12 +7094,12 @@ function GameScreenHost({
     fixtureId: fixtureId || void 0,
     locale: ui.games.lang
   });
-  useEffect15(() => {
+  useEffect16(() => {
     if (conversation) hydrate();
   }, [conversation, gameId]);
-  const hydrateRef = useRef13(hydrate);
+  const hydrateRef = useRef14(hydrate);
   hydrateRef.current = hydrate;
-  useEffect15(() => {
+  useEffect16(() => {
     if (!FIXTURE_GAME_IDS.has(gameId)) return;
     if (rawStatus !== "pending") return;
     const timerId = setInterval(() => {
@@ -7157,7 +7235,7 @@ function GamesPanel({
   refreshHub
 }) {
   const [selected, setSelected] = useState35(null);
-  useEffect16(() => {
+  useEffect17(() => {
     ensureGamesFonts();
   }, []);
   if (!loggedIn) return /* @__PURE__ */ jsx80(GamesLoginWall, { ui });
@@ -7357,7 +7435,7 @@ import { jsx as jsx85, jsxs as jsxs70 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
   const [modal, setModal] = useState37(false);
-  useEffect17(() => {
+  useEffect18(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -7370,7 +7448,7 @@ function useIsModal() {
 function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, gamesResult, leaderboardResult, loggedIn, conversation }) {
   const { state, close, stop, send, reset } = controller;
   const isModal = useIsModal();
-  useEffect17(() => {
+  useEffect18(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -7381,7 +7459,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     monitor?.setActiveTab("chat");
     send(text);
   };
-  useEffect17(() => {
+  useEffect18(() => {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
   return /* @__PURE__ */ jsxs70("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
@@ -7992,6 +8070,59 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: color-mix(in srgb, #3a82f6 10%, var(--ss-w-panel)); }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: color-mix(in srgb, #f5a623 10%, var(--ss-w-panel)); }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: color-mix(in srgb, #a855f7 10%, var(--ss-w-panel)); }
+/* A hero tile would take the first tint position; count only regular tiles where \`of S\` parses. */
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #34c759 10%, var(--ss-w-panel)); }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #3a82f6 10%, var(--ss-w-panel)); }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #f5a623 10%, var(--ss-w-panel)); }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #a855f7 10%, var(--ss-w-panel)); }
+
+/* Hero: the personalized lead tile. Declared after the layout rules and at three-class
+   specificity so it keeps one look in every layout -- no market rail, no goal pill, no
+   discovery tint or stacking. Colours derive from accent/panel/ink so an operator surface
+   and dark mode both work without their own rules. */
+.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero {
+  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
+  padding: 12px 14px 14px; border-radius: 16px;
+  border: 1px solid color-mix(in srgb, var(--ss-w-accent) 38%, var(--ss-w-line));
+  background:
+    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ss-w-accent) 18%, transparent) 0%, transparent 60%),
+    var(--ss-w-panel);
+  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ss-w-accent) 80%, transparent);
+}
+.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero:hover { border-color: var(--ss-w-accent); }
+.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
+.ss-w-dash-hero-top { display: flex; align-items: center; gap: 8px; min-height: 20px; }
+.ss-w-dash-hero-badge {
+  font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
+  color: var(--ss-w-panel); background: color-mix(in srgb, var(--ss-w-accent) 45%, var(--ss-w-ink)); border-radius: 999px; padding: 3px 10px;
+  white-space: nowrap;
+}
+.ss-w-dash-hero-chevron { flex: none; width: 14px; height: 14px; color: var(--ss-w-faint); }
+.ss-w-dash-hero-badge { margin-right: auto; }
+.ss-w-dash-hero-chevron:only-child { margin-left: auto; }
+.ss-w-dash-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.ss-w-dash-hero-visual { flex: none; display: flex; align-items: center; }
+.ss-w-dash-hero-crest {
+  width: 40px; height: 40px; border-radius: 50%;
+  background-color: color-mix(in srgb, var(--ss-w-ink) 4%, var(--ss-w-panel));
+  background-size: 72%; background-position: center; background-repeat: no-repeat;
+  box-shadow: 0 0 0 2px var(--ss-w-panel), 0 0 0 3px color-mix(in srgb, var(--ss-w-ink) 10%, var(--ss-w-panel));
+}
+.ss-w-dash-hero-crest + .ss-w-dash-hero-crest { margin-left: -8px; }
+.ss-w-dash-hero-icon {
+  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 22px;
+  background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel));
+}
+.ss-w-dash-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: anywhere; }
+.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-dash-hero-price {
+  flex: none; margin-left: auto;
+  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 750; line-height: 1;
+  color: color-mix(in srgb, var(--ss-w-accent) 45%, var(--ss-w-ink)); padding: 5px 9px; border-radius: 8px;
+  background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel));
+  border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-panel));
+}
 
 /* club fan pre-match dashboard */
 .ss-w-fandash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
@@ -8496,6 +8627,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-mt-portrait .ss-g-sil { font-size: 46px; }
 .ss-g-mt-photo { width: 132px; height: 132px; margin-bottom: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 40px var(--ss-g-font-display); }
 .ss-g-mt-photo img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-cp-photo { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 22px var(--ss-g-font-display); }
+.ss-g-cp-photo img { width: 100%; height: 100%; object-fit: cover; }
 .ss-g-mt-reveal-name { position: absolute; bottom: 6px; left: 12px; right: 12px; text-align: center; font: 800 20px var(--ss-g-font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-mt-known { display: grid; gap: 6px; padding: 12px; }
 .ss-g-mt-known-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
@@ -8897,9 +9030,9 @@ function StatsWidget(props) {
     [built?.client]
   );
   const ui = useMemo3(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = useRef14(null);
-  const introDoneRef = useRef14(false);
-  const markIntroDone = useCallback9(() => {
+  const rootRef = useRef15(null);
+  const introDoneRef = useRef15(false);
+  const markIntroDone = useCallback10(() => {
     introDoneRef.current = true;
   }, []);
   const convStorageKey = `ss-w-conv:${cfg?.operatorId ?? ""}:${cfg?.userContext?.operatorUserId ?? "anon"}`;
@@ -8912,11 +9045,11 @@ function StatsWidget(props) {
     isOpen: controller.state.isOpen,
     hasToday
   });
-  const getSchedule = useCallback9(
+  const getSchedule = useCallback10(
     (localDate, utcOffsetMinutes) => built ? built.conversation.getSchedule(localDate, utcOffsetMinutes) : Promise.resolve(null),
     [built]
   );
-  const getStates = useCallback9(
+  const getStates = useCallback10(
     (matchIds) => built ? built.conversation.getStates(matchIds) : Promise.resolve(null),
     [built]
   );
@@ -8932,14 +9065,14 @@ function StatsWidget(props) {
     pinnedMatchIds
   });
   const todayHasContent = visibleGroupsOf(discovery.groups, discovery.states).length > 0;
-  useEffect18(() => {
+  useEffect19(() => {
     setHasToday(todayHasContent);
   }, [todayHasContent]);
   const gamesResult = useGames(built?.conversation ?? null, { activeTab: monitor.activeTab });
   const leaderboardResult = useLeaderboard(built?.conversation ?? null, { activeTab: monitor.activeTab });
   const markTodayActivity = monitor.markTodayActivity;
-  const prevLiveCountRef = useRef14(0);
-  useEffect18(() => {
+  const prevLiveCountRef = useRef15(0);
+  useEffect19(() => {
     const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
     prevLiveCountRef.current = discovery.liveCount;
     if (rose) markTodayActivity();
@@ -8956,29 +9089,24 @@ function StatsWidget(props) {
           if (wasAdded(result)) monitor.markInSlip(sel.matchOddsId);
           return result;
         }),
-        conversationId: controller.state.conversationId ?? void 0,
-        onMarketClicked: (marketName) => {
-          try {
-            void built?.conversation.sendSignal({ signalType: "InsightMarketClicked", entityType: "Market", entityName: marketName }).catch(() => void 0);
-          } catch {
-          }
-        }
+        conversationId: controller.state.conversationId ?? void 0
       };
     },
-    [props.config?.onAddToSlip, controller.state.conversationId, built, monitor.markInSlip]
+    [props.config?.onAddToSlip, controller.state.conversationId, monitor.markInSlip]
   );
   const onDashboardTap = useMemo3(
     () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input), logger) : void 0,
     [built, logger]
   );
+  const dismissPopup = usePopupTelemetry(logger, controller.state.isOpen, controller.state.popupText, controller.dismissPopup);
   const operatorUserId = cfg?.userContext?.operatorUserId;
   const anonymousUserId = cfg?.userContext?.anonymousUserId;
   const conversationId = controller.state.conversationId ?? void 0;
-  useEffect18(() => {
+  useEffect19(() => {
     if (!logger) return;
     logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
   }, [logger, operatorUserId, anonymousUserId, conversationId]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!logger) return;
     const onHide = () => {
       logger.flushOnHide();
@@ -8995,7 +9123,7 @@ function StatsWidget(props) {
       logger.dispose();
     };
   }, [logger]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);
@@ -9024,7 +9152,7 @@ function StatsWidget(props) {
       popupText: controller.state.popupText,
       logoUrl: ui.logoUrl,
       onOpen: controller.open,
-      onDismissPopup: controller.dismissPopup,
+      onDismissPopup: dismissPopup,
       dismissLabel: ui.dismissGreeting,
       introAllowed: !introDoneRef.current,
       onIntroStart: markIntroDone