@sensiblestats/widget-react 0.66.0 → 0.66.1

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/StatsWidget.tsx
-import { useCallback as useCallback12, useEffect as useEffect20, useMemo as useMemo4, useRef as useRef16, useState as useState41 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect21, useMemo as useMemo4, useRef as useRef17, useState as useState41 } from "react";
 import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
 
 // src/kickoff.ts
@@ -809,10 +809,10 @@ function resultToToast(result, shownOdds, ui) {
 }
 
 // src/useHostEvents.ts
-import { useCallback as useCallback5, useEffect as useEffect11, useMemo, useRef as useRef7, useState as useState34 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useMemo, useRef as useRef8, useState as useState34 } from "react";
 
 // src/components/ChatPanel.tsx
-import { useEffect as useEffect10, useState as useState33 } from "react";
+import { useEffect as useEffect11, useState as useState33 } from "react";
 
 // src/components/ChatHeader.tsx
 import { useEffect, useRef, useState as useState2 } from "react";
@@ -946,7 +946,7 @@ function ChatHeader({
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
 
 // src/components/Markdown.tsx
 import ReactMarkdown from "react-markdown";
@@ -1442,8 +1442,9 @@ function SlipButton({ selection, shownOdds, marketDeveloperName, selectionLabel,
         disabled: pending || settled,
         onClick,
         children: [
+          settled ? /* @__PURE__ */ jsx7("span", { className: "ss-w-mol-tick", "aria-hidden": "true", children: "\u2713" }) : null,
           price.label ? /* @__PURE__ */ jsx7("span", { className: "ss-w-mol-lab", children: price.label }) : null,
-          shownOdds
+          /* @__PURE__ */ jsx7("span", { children: shownOdds })
         ]
       }
     ) : /* @__PURE__ */ jsx7(
@@ -1913,7 +1914,7 @@ function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }
         vm.market ? /* @__PURE__ */ jsx14("div", { className: "ss-w-mo-market-row", children: /* @__PURE__ */ jsx14("span", { className: "ss-w-mo-market", children: vm.market }) }) : null
       ] }) : null
     ] }),
-    vm.statText && !hideHeader ? /* @__PURE__ */ jsx14("div", { className: "ss-w-mo-stat", children: vm.statText }) : null,
+    vm.statText && !hideHeader && !pinRef ? /* @__PURE__ */ jsx14("div", { className: "ss-w-mo-stat", children: vm.statText }) : null,
     /* @__PURE__ */ jsxs9("div", { className: "ss-w-mo-rows", children: [
       vm.mainRows.map((row) => /* @__PURE__ */ jsx14(OddsRow, { vm, row, ui, slip, inSlipIds, history }, row.key)),
       open ? vm.moreRows.map((row) => /* @__PURE__ */ jsx14(OddsRow, { vm, row, ui, slip, inSlipIds, history }, row.key)) : null
@@ -1932,7 +1933,7 @@ function MarketOddsCardList({ cards, ui, slip, monitor, inSlipIds, hideHeader, p
 }
 
 // src/components/CompactOddsList.tsx
-import { useState as useState9 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState9 } from "react";
 
 // src/compactList.ts
 var COMPACT_MIN_CARDS = 3;
@@ -1994,6 +1995,7 @@ import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function Cell({ row, cell, ui, slip }) {
   const vm = row.card;
   const selection = vm.addToSlipEnabled ? marketOddsRowToSlipSelection(vm, cell.row, slip.conversationId) : null;
+  const name = `${vm.homeTeamName ?? ""} ${vm.awayTeamName ?? ""}, ${cell.row.selection} ${cell.row.odds}`;
   const button = /* @__PURE__ */ jsx15(
     SlipButton,
     {
@@ -2004,7 +2006,7 @@ function Cell({ row, cell, ui, slip }) {
       line: cell.row.line,
       slip,
       ui,
-      price: { label: cell.label, ariaLabel: `${vm.homeTeamName ?? ""} ${vm.awayTeamName ?? ""}, ${cell.row.selection} ${cell.row.odds}` }
+      price: { label: cell.label, ariaLabel: name }
     }
   );
   return (
@@ -2012,18 +2014,19 @@ function Cell({ row, cell, ui, slip }) {
     // and 101.00 two.
     /* @__PURE__ */ jsxs10("span", { className: ["ss-w-mol-cell", cell.row.odds.length >= 5 && "ss-w-mol-cell--wide", cell.row.odds.length >= 6 && "ss-w-mol-cell--wider"].filter(Boolean).join(" "), children: [
       selection && slip.onAddToSlip && ui ? button : /* @__PURE__ */ jsxs10("span", { className: "ss-w-mol-price", children: [
-        cell.label ? /* @__PURE__ */ jsx15("span", { className: "ss-w-mol-lab", children: cell.label }) : null,
-        cell.row.odds
+        cell.label ? /* @__PURE__ */ jsx15("span", { className: "ss-w-mol-lab", "aria-hidden": "true", children: cell.label }) : null,
+        /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: cell.row.odds }),
+        /* @__PURE__ */ jsx15("span", { className: "ss-w-vh", children: name })
       ] }),
       /* @__PURE__ */ jsx15(OddsMovementBadge, { previous: cell.row.previousOdds, current: cell.row.odds, direction: cell.row.movementDirection, ui })
     ] })
   );
 }
-function Row({ row, columns, ui, slip, monitor }) {
+function Row({ row, columns, ui, slip, monitor, rowRef }) {
   const vm = row.card;
   const kickoffFallback = vm.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(vm.kickoffUtc) : void 0;
   const when = vm.isLive ? ui?.liveLabel ?? "Live" : vm.kickoffLabel ?? (kickoffFallback ? `${kickoffFallback.dayLabel} ${kickoffFallback.time}` : void 0);
-  return /* @__PURE__ */ jsxs10("div", { className: "ss-w-mol-row", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "ss-w-mol-row", ref: rowRef, tabIndex: rowRef ? -1 : void 0, children: [
     /* @__PURE__ */ jsxs10(MatchLink, { as: "div", matchId: vm.matchId, home: vm.homeTeamName, away: vm.awayTeamName, className: "ss-w-mol-fx", children: [
       /* @__PURE__ */ jsxs10("span", { className: "ss-w-mol-team", children: [
         /* @__PURE__ */ jsx15(Crest2, { kind: "team", url: vm.homeCrest, name: vm.homeTeamName ?? "" }),
@@ -2045,11 +2048,17 @@ function Row({ row, columns, ui, slip, monitor }) {
 function CompactOddsList({ list, ui, slip, monitor }) {
   const [shown, setShown] = useState9(COMPACT_PAGE);
   const hidden = list.rowCount - shown;
+  const [focusIndex, setFocusIndex] = useState9(null);
+  const focusRef = useRef2(null);
+  useEffect3(() => {
+    if (focusIndex !== null) focusRef.current?.focus();
+  }, [focusIndex]);
   let left = shown;
+  let index = 0;
   return /* @__PURE__ */ jsxs10("div", { className: "ss-w-mol", children: [
     /* @__PURE__ */ jsxs10("div", { className: "ss-w-mol-head", children: [
       /* @__PURE__ */ jsx15("span", { className: "ss-w-mol-market", children: list.market }),
-      /* @__PURE__ */ jsx15("span", { className: "ss-w-mol-cols", style: { gridTemplateColumns: `repeat(${list.columns.length}, minmax(0, 1fr))` }, children: list.columns.map((c, i) => /* @__PURE__ */ jsx15("span", { className: "ss-w-mol-col", children: c }, `${c}:${i}`)) }),
+      /* @__PURE__ */ jsx15("span", { className: "ss-w-mol-cols", "aria-hidden": "true", style: { gridTemplateColumns: `repeat(${list.columns.length}, minmax(0, 1fr))` }, children: list.columns.map((c, i) => /* @__PURE__ */ jsx15("span", { className: "ss-w-mol-col", children: c }, `${c}:${i}`)) }),
       /* @__PURE__ */ jsx15("span", { className: "ss-w-mol-side", "aria-hidden": "true" })
     ] }),
     list.groups.map((group, gi) => {
@@ -2061,10 +2070,16 @@ function CompactOddsList({ list, ui, slip, monitor }) {
           /* @__PURE__ */ jsx15(Crest2, { kind: "comp", url: group.competitionCrest, name: group.competition }),
           /* @__PURE__ */ jsx15("span", { children: group.competition })
         ] }) : null,
-        rows.map((row) => /* @__PURE__ */ jsx15(Row, { row, columns: list.columns.length, ui, slip, monitor }, row.card.id))
+        rows.map((row) => {
+          const at = index++;
+          return /* @__PURE__ */ jsx15(Row, { row, columns: list.columns.length, ui, slip, monitor, rowRef: at === focusIndex ? focusRef : void 0 }, row.card.id);
+        })
       ] }, `${group.competition ?? ""}:${gi}`);
     }),
-    hidden > 0 ? /* @__PURE__ */ jsxs10("button", { type: "button", className: "ss-w-mo-more", onClick: () => setShown((n) => n + COMPACT_PAGE), children: [
+    hidden > 0 ? /* @__PURE__ */ jsxs10("button", { type: "button", className: "ss-w-mo-more", onClick: () => {
+      setFocusIndex(shown);
+      setShown((n) => n + COMPACT_PAGE);
+    }, children: [
       /* @__PURE__ */ jsx15("span", { children: ui?.showMore ? ui.showMore(Math.min(COMPACT_PAGE, hidden)) : `Show ${Math.min(COMPACT_PAGE, hidden)} more` }),
       /* @__PURE__ */ jsx15("span", { className: "ss-w-mo-more-chev", "aria-hidden": "true" })
     ] }) : null,
@@ -2336,7 +2351,7 @@ function FixtureCard({ card }) {
 }
 
 // src/components/dashboard/CountdownCard.tsx
-import { Fragment as Fragment6, useEffect as useEffect3, useState as useState10 } from "react";
+import { Fragment as Fragment6, useEffect as useEffect4, useState as useState10 } from "react";
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var DAY_MS = 864e5;
 function remainingSegments(kickoffUnix, nowMs, withSeconds) {
@@ -2360,7 +2375,7 @@ function CountdownCard({ card }) {
     () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
   );
   const withinDay = data.kickoffUnix * 1e3 - nowMs < DAY_MS;
-  useEffect3(() => {
+  useEffect4(() => {
     if (reduced) return;
     const id = window.setInterval(() => setNowMs(Date.now()), withinDay ? 1e3 : 6e4);
     return () => window.clearInterval(id);
@@ -2717,10 +2732,10 @@ function RestingFormCard({ card }) {
 }
 
 // src/components/dashboard/LiveScoreCard.tsx
-import { useRef as useRef2, useState as useState14 } from "react";
+import { useRef as useRef3, useState as useState14 } from "react";
 
 // src/useLiveClock.ts
-import { useEffect as useEffect4, useState as useState13 } from "react";
+import { useEffect as useEffect5, useState as useState13 } from "react";
 var TICK_MS = 6e4;
 var MAX_LIVE_TICK_MINUTES = 15;
 function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
@@ -2732,7 +2747,7 @@ function useLiveClock(minute, clockRunning, receivedAtMs) {
   const [displayMinute, setDisplayMinute] = useState13(
     () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
   );
-  useEffect4(() => {
+  useEffect5(() => {
     setDisplayMinute(computeDisplayMinute(minute, clockRunning, receivedAtMs));
     if (!clockRunning) return;
     const id = window.setInterval(() => {
@@ -2768,7 +2783,7 @@ function LiveScoreCard({
 }) {
   const { data } = card;
   const seedKey = `${data.minute}:${data.homeScore}:${data.awayScore}`;
-  const seedRef = useRef2(null);
+  const seedRef = useRef3(null);
   if (!seedRef.current || seedRef.current.key !== seedKey) {
     seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
   }
@@ -3091,11 +3106,11 @@ function turnAnchor(messages) {
 }
 function MessageList({ controller, ui, slip, onDashboardTap, monitor }) {
   const { state, send } = controller;
-  const listRef = useRef3(null);
-  const endRef = useRef3(null);
-  const pinnedRef = useRef3(true);
-  const anchoredTurnRef = useRef3(null);
-  useEffect5(() => {
+  const listRef = useRef4(null);
+  const endRef = useRef4(null);
+  const pinnedRef = useRef4(true);
+  const anchoredTurnRef = useRef4(null);
+  useEffect6(() => {
     const anchor = turnAnchor(state.messages);
     const list = listRef.current;
     if (anchor && anchor.turnId !== anchoredTurnRef.current) {
@@ -3654,7 +3669,7 @@ function TodayPanel({ discovery, ui, monitor }) {
 }
 
 // src/components/GamesPanel.tsx
-import { useEffect as useEffect9, useState as useState31 } from "react";
+import { useEffect as useEffect10, useState as useState31 } from "react";
 
 // src/components/GamesLoginWall.tsx
 import { jsx as jsx54 } from "react/jsx-runtime";
@@ -3663,7 +3678,7 @@ function GamesLoginWall({ ui }) {
 }
 
 // src/components/GamesHub.tsx
-import { useEffect as useEffect6, useState as useState18 } from "react";
+import { useEffect as useEffect7, useState as useState18 } from "react";
 
 // src/components/games/ui/gameMeta.ts
 function prettifyGameId(gameId) {
@@ -3849,7 +3864,7 @@ function pickHeroGame(games) {
 var tileKey = (g) => `${g.gameId}-${g.gameDay}-${g.fixtureId}`;
 function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
   const [, setTick] = useState18(0);
-  useEffect6(() => {
+  useEffect7(() => {
     const id = setInterval(() => setTick((t) => t + 1), 6e4);
     return () => clearInterval(id);
   }, []);
@@ -3909,10 +3924,10 @@ function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
 }
 
 // src/components/GameScreenHost.tsx
-import { useEffect as useEffect8, useRef as useRef6, useState as useState30 } from "react";
+import { useEffect as useEffect9, useRef as useRef7, useState as useState30 } from "react";
 
 // src/useGamePlay.ts
-import { useCallback as useCallback4, useRef as useRef4, useState as useState19 } from "react";
+import { useCallback as useCallback4, useRef as useRef5, useState as useState19 } from "react";
 function toSubmitResult(payload) {
   return {
     // 'pending' means the play is recorded but awaiting resolution (fixture games)
@@ -3927,12 +3942,12 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
   const [result, setResult] = useState19(null);
   const [submitting, setSubmitting] = useState19(false);
   const [rawStatus, setRawStatus] = useState19(null);
-  const inFlightRef = useRef4(false);
-  const convRef = useRef4(conversation);
+  const inFlightRef = useRef5(false);
+  const convRef = useRef5(conversation);
   convRef.current = conversation;
-  const optsRef = useRef4({ gameId, gameDay, fixtureId, locale, refresh });
+  const optsRef = useRef5({ gameId, gameDay, fixtureId, locale, refresh });
   optsRef.current = { gameId, gameDay, fixtureId, locale, refresh };
-  const resultRef = useRef4(null);
+  const resultRef = useRef5(null);
   resultRef.current = result;
   const refetch = useCallback4(async () => {
     const conv = convRef.current;
@@ -4862,7 +4877,7 @@ function CareerPathGame({
 }
 
 // src/components/games/BeatTheGridGame.tsx
-import React, { useEffect as useEffect7, useId as useId4, useRef as useRef5, useState as useState24 } from "react";
+import React, { useEffect as useEffect8, useId as useId4, useRef as useRef6, useState as useState24 } from "react";
 import { Fragment as Fragment14, jsx as jsx73, jsxs as jsxs60 } from "react/jsx-runtime";
 function criterionIconKind(label, key) {
   const l = (key ?? label).toLowerCase();
@@ -4945,8 +4960,8 @@ function SearchSheet({
   const s = ui.games.beatTheGrid;
   const [query, setQuery] = useState24("");
   const inputId = useId4();
-  const inputRef = useRef5(null);
-  useEffect7(() => {
+  const inputRef = useRef6(null);
+  useEffect8(() => {
     inputRef.current?.focus();
   }, [row, col]);
   const filtered = playerPool.filter(
@@ -6248,7 +6263,7 @@ function GameScreenHost({
 }) {
   const { gameId, fixtureId, gameDay = "", lockAtUtc = null } = selected;
   const [configJson, setConfigJson] = useState30(null);
-  useEffect8(() => {
+  useEffect9(() => {
     setConfigJson(null);
     if (!conversation) return;
     let cancelled = false;
@@ -6271,12 +6286,12 @@ function GameScreenHost({
     fixtureId: fixtureId || void 0,
     locale: ui.games.lang
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (conversation) hydrate();
   }, [conversation, gameId]);
-  const hydrateRef = useRef6(hydrate);
+  const hydrateRef = useRef7(hydrate);
   hydrateRef.current = hydrate;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!FIXTURE_GAME_IDS.has(gameId)) return;
     if (rawStatus !== "pending") return;
     const timerId = setInterval(() => {
@@ -6412,7 +6427,7 @@ function GamesPanel({
   refreshHub
 }) {
   const [selected, setSelected] = useState31(null);
-  useEffect9(() => {
+  useEffect10(() => {
     ensureGamesFonts();
   }, []);
   if (!loggedIn) return /* @__PURE__ */ jsx82(GamesLoginWall, { ui });
@@ -6612,7 +6627,7 @@ import { jsx as jsx87, jsxs as jsxs71 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
   const [modal, setModal] = useState33(false);
-  useEffect10(() => {
+  useEffect11(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -6625,7 +6640,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();
-  useEffect10(() => {
+  useEffect11(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -6640,7 +6655,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     monitor?.setActiveTab("chat");
     send(text, { grounding });
   };
-  useEffect10(() => {
+  useEffect11(() => {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
   return /* @__PURE__ */ jsxs71("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
@@ -6935,7 +6950,7 @@ function useHostEvents(opts) {
     () => hasHost ? createSlipLedger(`ss-w-slip:${operatorId}`) : null,
     [hasHost, operatorId]
   );
-  const currentUserRef = useRef7(currentUser);
+  const currentUserRef = useRef8(currentUser);
   currentUserRef.current = currentUser;
   const recordAdd = useCallback5((add) => {
     ledger?.record({ id: add.selection.matchOddsId, market: add.market, ...add.pick, user: currentUserRef.current });
@@ -6950,7 +6965,7 @@ function useHostEvents(opts) {
     () => tracksViews ? createMatchViews(`ss-w-views:${operatorId}`, { user: currentUser }) : null,
     [tracksViews, operatorId, currentUser]
   );
-  const sinkRef = useRef7(() => {
+  const sinkRef = useRef8(() => {
   });
   sinkRef.current = (command) => {
     if (command.kind === "matchOpened") {
@@ -6971,11 +6986,11 @@ function useHostEvents(opts) {
       logger?.log(toSlipEvent(name, entry));
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (!host) return;
     return attachHost(host, (command) => sinkRef.current(command));
   }, [host]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isOpen || !views) return;
     const held = views.markOpened();
     if (held.length === 0) return;
@@ -6984,7 +6999,7 @@ function useHostEvents(opts) {
     }
     void logger?.flushNow();
   }, [isOpen, views, logger]);
-  const openMatchRef = useRef7(() => {
+  const openMatchRef = useRef8(() => {
   });
   openMatchRef.current = (matchId) => {
     if (views?.view(matchId) === "log") {
@@ -7066,7 +7081,7 @@ function themeAttrs(ui) {
 }
 
 // src/useChatStream.ts
-import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo2, useReducer as useReducer2, useRef as useRef9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo2, useReducer as useReducer2, useRef as useRef10 } from "react";
 import { WidgetSdkError as WidgetSdkError2 } from "@sensiblestats/widget-sdk";
 
 // src/reducer.ts
@@ -7190,7 +7205,7 @@ function reducer(state, action) {
 }
 
 // src/useLiveDashboardPoll.ts
-import { useEffect as useEffect12, useReducer, useRef as useRef8 } from "react";
+import { useEffect as useEffect13, useReducer, useRef as useRef9 } from "react";
 var POLL_INTERVAL_MS = 6e4;
 var LEAD_MS = 12e4;
 var GIVE_UP_MS = 30 * 6e4;
@@ -7234,11 +7249,11 @@ function findEarliestWakeupMs(messages) {
 function useLiveDashboardPoll({ messages, dispatch, getLiveDashboard }) {
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   const anchor = findAnchor(messages);
-  const anchorRef = useRef8(anchor);
+  const anchorRef = useRef9(anchor);
   anchorRef.current = anchor;
-  const inFlightRef = useRef8(false);
+  const inFlightRef = useRef9(false);
   const anchorKey = anchor ? `${anchor.messageId}:${anchor.kind}` : null;
-  useEffect12(() => {
+  useEffect13(() => {
     if (!anchorKey || !anchorRef.current) return;
     const tick = async () => {
       if (inFlightRef.current) return;
@@ -7274,7 +7289,7 @@ function useLiveDashboardPoll({ messages, dispatch, getLiveDashboard }) {
     }, POLL_INTERVAL_MS);
     return () => window.clearInterval(id);
   }, [anchorKey, dispatch, getLiveDashboard]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (anchorKey !== null) return;
     const wakeAt = findEarliestWakeupMs(messages);
     if (wakeAt === null) return;
@@ -7349,14 +7364,14 @@ function useChatStream(conversation, starterTexts, greetingMessage, storageKey)
     return { state: base, restored: false, stale: payload === "expired" || payload === "corrupt" };
   }, []);
   const [state, dispatch] = useReducer2(reducer, boot.state);
-  const idRef = useRef9(seedIdCounter(boot.state.messages));
-  const handleRef = useRef9(null);
-  const fallbackTimerRef = useRef9(null);
-  const stateRef = useRef9(state);
+  const idRef = useRef10(seedIdCounter(boot.state.messages));
+  const handleRef = useRef10(null);
+  const fallbackTimerRef = useRef10(null);
+  const stateRef = useRef10(state);
   stateRef.current = state;
-  const greetedRef = useRef9(boot.restored);
-  const hydratedRef = useRef9(false);
-  const restoreSeededRef = useRef9(false);
+  const greetedRef = useRef10(boot.restored);
+  const hydratedRef = useRef10(false);
+  const restoreSeededRef = useRef10(false);
   if (!restoreSeededRef.current) {
     restoreSeededRef.current = true;
     if (boot.restored && boot.state.conversationId) conversation.conversationId = boot.state.conversationId;
@@ -7431,15 +7446,15 @@ function useChatStream(conversation, starterTexts, greetingMessage, storageKey)
       dispatch({ kind: "STOP" });
     }
   }, [greetingMessage, conversation, consume, clearFallbackTimer, armFallbackTimer]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (greetedRef.current) return;
     greetedRef.current = true;
     fireGreeting();
   }, [fireGreeting]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (boot.stale && storageKey) clearConversation(storageKey);
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!storageKey || state.isStreaming) return;
     if (hydratedRef.current) {
       hydratedRef.current = false;
@@ -7456,7 +7471,7 @@ function useChatStream(conversation, starterTexts, greetingMessage, storageKey)
     if (persistable.length === 0) return;
     writeConversation(storageKey, state.conversationId, persistable, Date.now());
   }, [storageKey, state.isStreaming, state.messages, state.conversationId]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!storageKey) return;
     const onStorage = (e) => {
       if (e.key !== storageKey || e.storageArea !== window.localStorage) return;
@@ -7515,7 +7530,7 @@ function useChatStream(conversation, starterTexts, greetingMessage, storageKey)
 }
 
 // src/useLiveMonitor.ts
-import { useCallback as useCallback7, useEffect as useEffect14, useRef as useRef10, useState as useState36 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect15, useRef as useRef11, useState as useState36 } from "react";
 
 // src/useTabs.ts
 import { useState as useState35 } from "react";
@@ -7544,7 +7559,7 @@ function phaseForPin(snapshot, pin) {
   return snapshot.markets.find((mk) => mk.key === pin.key)?.phase;
 }
 function useLiveMonitor(opts) {
-  const sessionIdRef = useRef10(crypto.randomUUID());
+  const sessionIdRef = useRef11(crypto.randomUUID());
   const [pins, setPins] = useState36([]);
   const [store] = useState36(() => createPinStore(opts.storageKey, sessionIdRef.current, setPins));
   const [enabled, setEnabled] = useState36(true);
@@ -7557,21 +7572,21 @@ function useLiveMonitor(opts) {
   const [lastViewedPrices, setLastViewedPrices] = useState36({});
   const [openMarket, setOpenMarket] = useState36({});
   const [marketOdds, setMarketOdds] = useState36({});
-  const pinsRef = useRef10(pins);
+  const pinsRef = useRef11(pins);
   pinsRef.current = pins;
-  const activeTabRef = useRef10(activeTab);
+  const activeTabRef = useRef11(activeTab);
   activeTabRef.current = activeTab;
-  const snapshotRef = useRef10(snapshot);
+  const snapshotRef = useRef11(snapshot);
   snapshotRef.current = snapshot;
-  const lastViewedPricesRef = useRef10(lastViewedPrices);
+  const lastViewedPricesRef = useRef11(lastViewedPrices);
   lastViewedPricesRef.current = lastViewedPrices;
-  const openMarketRef = useRef10(openMarket);
+  const openMarketRef = useRef11(openMarket);
   openMarketRef.current = openMarket;
-  const marketOddsRef = useRef10(marketOdds);
+  const marketOddsRef = useRef11(marketOdds);
   marketOddsRef.current = marketOdds;
   const hasToday = opts.hasToday ?? false;
   const marketKey = (matchId, dev) => `${matchId}:${dev}`;
-  const getMarketOddsRef = useRef10(opts.getMarketOdds);
+  const getMarketOddsRef = useRef11(opts.getMarketOdds);
   getMarketOddsRef.current = opts.getMarketOdds;
   const fetchMarket = useCallback7((matchId, dev) => {
     const key = marketKey(matchId, dev);
@@ -7669,11 +7684,11 @@ function useLiveMonitor(opts) {
     snapshotRef.current = next;
     setSnapshotState(next);
   }, [store]);
-  const inFlightRef = useRef10(false);
-  const timerRef = useRef10(void 0);
-  const disabledRef = useRef10(false);
-  const mountedRef = useRef10(false);
-  const getLiveMonitorRef = useRef10(opts.getLiveMonitor);
+  const inFlightRef = useRef11(false);
+  const timerRef = useRef11(void 0);
+  const disabledRef = useRef11(false);
+  const mountedRef = useRef11(false);
+  const getLiveMonitorRef = useRef11(opts.getLiveMonitor);
   getLiveMonitorRef.current = opts.getLiveMonitor;
   const tick = useCallback7(async () => {
     if (inFlightRef.current || disabledRef.current || pinsRef.current.length === 0) return;
@@ -7698,7 +7713,7 @@ function useLiveMonitor(opts) {
       scheduleRef.current();
     }
   }, [applySnapshot, fetchMarket]);
-  const scheduleRef = useRef10(() => {
+  const scheduleRef = useRef11(() => {
   });
   scheduleRef.current = () => {
     window.clearTimeout(timerRef.current);
@@ -7706,14 +7721,14 @@ function useLiveMonitor(opts) {
     const hinted = (snapshotRef.current?.nextPollSeconds ?? DEFAULT_POLL_MS / 1e3) * 1e3;
     timerRef.current = window.setTimeout(() => void tick(), Math.max(MIN_POLL_MS, hinted));
   };
-  useEffect14(() => {
+  useEffect15(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
     };
   }, []);
-  const prevPinsLengthRef = useRef10(0);
-  useEffect14(() => {
+  const prevPinsLengthRef = useRef11(0);
+  useEffect15(() => {
     const wasEmpty = prevPinsLengthRef.current === 0;
     prevPinsLengthRef.current = pins.length;
     if (pins.length === 0) {
@@ -7722,20 +7737,20 @@ function useLiveMonitor(opts) {
     }
     if (wasEmpty) void tick();
   }, [pins.length, tick]);
-  useEffect14(() => {
+  useEffect15(() => {
     const matchPins = pins.filter((p) => p.kind === "match").length;
     const marketPins = pins.length - matchPins;
     if (activeTab === "following" && matchPins === 0) setActiveTabState(hasToday ? "today" : "chat");
     if (activeTab === "odds" && marketPins === 0) setActiveTabState(hasToday ? "today" : "chat");
     if (activeTab === "today" && !hasToday) setActiveTabState("chat");
   }, [pins, activeTab, hasToday]);
-  const prevIsOpenRef = useRef10(false);
-  useEffect14(() => {
+  const prevIsOpenRef = useRef11(false);
+  useEffect15(() => {
     const wasClosed = !prevIsOpenRef.current;
     prevIsOpenRef.current = opts.isOpen;
     if (wasClosed && opts.isOpen) void tick();
   }, [opts.isOpen, tick]);
-  useEffect14(() => {
+  useEffect15(() => {
     const onVisibility = () => {
       if (document.visibilityState === "hidden") window.clearTimeout(timerRef.current);
       else void tick();
@@ -7801,7 +7816,7 @@ function useLiveMonitor(opts) {
 }
 
 // src/useMatchDiscovery.ts
-import { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo3, useRef as useRef11, useState as useState37 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect16, useMemo as useMemo3, useRef as useRef12, useState as useState37 } from "react";
 
 // src/scheduleCache.ts
 var PREFIX = "ss-w-schedule:";
@@ -7894,22 +7909,22 @@ function useMatchDiscovery(opts) {
   const [failures, setFailures] = useState37(0);
   const [expanded, setExpanded] = useState37({});
   const [touched, setTouched] = useState37({});
-  const groupsRef = useRef11(groups);
+  const groupsRef = useRef12(groups);
   groupsRef.current = groups;
-  const statesRef = useRef11(states);
+  const statesRef = useRef12(states);
   statesRef.current = states;
-  const getStatesRef = useRef11(opts.getStates);
+  const getStatesRef = useRef12(opts.getStates);
   getStatesRef.current = opts.getStates;
   const pinnedKey = opts.pinnedMatchIds.join(",");
   const [localDate, setLocalDate] = useState37(() => localDateOf(/* @__PURE__ */ new Date()));
-  useEffect15(() => {
+  useEffect16(() => {
     const id = setInterval(() => {
       const next = localDateOf(/* @__PURE__ */ new Date());
       setLocalDate((prev) => prev === next ? prev : next);
     }, ROLLOVER_CHECK_MS);
     return () => clearInterval(id);
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     let cancelled = false;
     const utcOffsetMinutes = -(/* @__PURE__ */ new Date()).getTimezoneOffset();
     const cached = readSchedule(opts.operatorId, localDate, Date.now());
@@ -7934,7 +7949,7 @@ function useMatchDiscovery(opts) {
       cancelled = true;
     };
   }, [opts.operatorId, localDate]);
-  useEffect15(() => {
+  useEffect16(() => {
     setExpanded((prev) => {
       const next = {};
       for (const group of groups) {
@@ -7961,7 +7976,7 @@ function useMatchDiscovery(opts) {
       setFailures((n) => n + 1);
     }
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!opts.isOpen) return;
     void tick();
     const id = setInterval(() => {
@@ -7982,7 +7997,7 @@ function useMatchDiscovery(opts) {
 }
 
 // src/useGames.ts
-import { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef12, useState as useState38 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect17, useRef as useRef13, useState as useState38 } from "react";
 var GAMES_POLL_MS = 6e4;
 var DEFAULT_TZ = "Europe/London";
 function computeGameDay(timezone) {
@@ -7993,14 +8008,14 @@ function useGames(conversation, { activeTab, operatorTimezone }) {
   const [games, setGames] = useState38([]);
   const [loading, setLoading] = useState38(false);
   const [refreshCount, setRefreshCount] = useState38(0);
-  const inFlightRef = useRef12(false);
-  const hardOffRef = useRef12(false);
-  const conversationRef = useRef12(conversation);
+  const inFlightRef = useRef13(false);
+  const hardOffRef = useRef13(false);
+  const conversationRef = useRef13(conversation);
   conversationRef.current = conversation;
-  const tzRef = useRef12(operatorTimezone ?? DEFAULT_TZ);
+  const tzRef = useRef13(operatorTimezone ?? DEFAULT_TZ);
   tzRef.current = operatorTimezone ?? DEFAULT_TZ;
   const ready = conversation != null;
-  useEffect16(() => {
+  useEffect17(() => {
     if (hardOffRef.current) return;
     let active = true;
     const doFetch = async () => {
@@ -8050,15 +8065,15 @@ function useGames(conversation, { activeTab, operatorTimezone }) {
 }
 
 // src/useLeaderboard.ts
-import { useCallback as useCallback10, useEffect as useEffect17, useRef as useRef13, useState as useState39 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect18, useRef as useRef14, useState as useState39 } from "react";
 function useLeaderboard(conversation, { activeTab }) {
   const [data, setData] = useState39(null);
   const [loading, setLoading] = useState39(false);
   const [refreshCount, setRefreshCount] = useState39(0);
-  const inFlightRef = useRef13(false);
-  const conversationRef = useRef13(conversation);
+  const inFlightRef = useRef14(false);
+  const conversationRef = useRef14(conversation);
   conversationRef.current = conversation;
-  useEffect17(() => {
+  useEffect18(() => {
     if (activeTab !== "leaderboard" && activeTab !== "games") return;
     let active = true;
     const doFetch = async () => {
@@ -8088,11 +8103,11 @@ function useLeaderboard(conversation, { activeTab }) {
 }
 
 // src/popupTelemetry.ts
-import { useCallback as useCallback11, useEffect as useEffect18, useRef as useRef14 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect19, useRef as useRef15 } from "react";
 function usePopupTelemetry(log, isOpen, popupText, dismissPopup) {
-  const shownRef = useRef14(/* @__PURE__ */ new Set());
-  const closedTextRef = useRef14(null);
-  useEffect18(() => {
+  const shownRef = useRef15(/* @__PURE__ */ new Set());
+  const closedTextRef = useRef15(null);
+  useEffect19(() => {
     if (isOpen) {
       if (closedTextRef.current) log?.log({ name: "popup_opened" });
       closedTextRef.current = null;
@@ -8111,7 +8126,7 @@ function usePopupTelemetry(log, isOpen, popupText, dismissPopup) {
 }
 
 // src/components/ChatFab.tsx
-import { useEffect as useEffect19, useRef as useRef15, useState as useState40 } from "react";
+import { useEffect as useEffect20, useRef as useRef16, useState as useState40 } from "react";
 
 // src/components/GreetingBubble.tsx
 import { jsx as jsx88, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -8134,8 +8149,8 @@ import { jsx as jsx89, jsxs as jsxs73 } from "react/jsx-runtime";
 function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup, dismissLabel = "Dismiss", introAllowed = false, onIntroStart }) {
   const bubble = popupText ?? greeting;
   const [intro, setIntro] = useState40(false);
-  const armedRef = useRef15(introAllowed);
-  useEffect19(() => {
+  const armedRef = useRef16(introAllowed);
+  useEffect20(() => {
     if (armedRef.current && bubble) {
       armedRef.current = false;
       setIntro(true);
@@ -8563,6 +8578,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mol-col { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); text-align: center; overflow-wrap: break-word; min-width: 0; }
 .ss-w-mol-comp { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding-top: 4px; }
 .ss-w-mol-row { padding: 6px 0; border-bottom: 1px dashed var(--ss-w-line); min-height: 48px; box-sizing: border-box; }
+.ss-w-mol-row:focus { outline: none; }
+.ss-w-mol-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; border-radius: 6px; }
+.ss-w-mol-tick { font-family: inherit; font-size: 9.5px; font-weight: 700; line-height: 1.1; }
+.ss-w-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 .ss-w-mol-group .ss-w-mol-row:last-child { border-bottom: none; }
 .ss-w-mol-fx { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: none; border: none; padding: 0; text-align: left; font: inherit; color: inherit; }
 .ss-w-mol-team { display: flex; align-items: center; gap: 5px; min-width: 0; }
@@ -9708,8 +9727,8 @@ function StatsWidget(props) {
     [built?.client]
   );
   const ui = useMemo4(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = useRef16(null);
-  const introDoneRef = useRef16(false);
+  const rootRef = useRef17(null);
+  const introDoneRef = useRef17(false);
   const markIntroDone = useCallback12(() => {
     introDoneRef.current = true;
   }, []);
@@ -9743,14 +9762,14 @@ function StatsWidget(props) {
     pinnedMatchIds
   });
   const todayHasContent = visibleGroupsOf(discovery.groups, discovery.states).length > 0;
-  useEffect20(() => {
+  useEffect21(() => {
     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 = useRef16(0);
-  useEffect20(() => {
+  const prevLiveCountRef = useRef17(0);
+  useEffect21(() => {
     const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
     prevLiveCountRef.current = discovery.liveCount;
     if (rose) markTodayActivity();
@@ -9793,11 +9812,11 @@ function StatsWidget(props) {
   const operatorUserId = cfg?.userContext?.operatorUserId;
   const anonymousUserId = cfg?.userContext?.anonymousUserId;
   const conversationId = controller.state.conversationId ?? void 0;
-  useEffect20(() => {
+  useEffect21(() => {
     if (!logger) return;
     logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
   }, [logger, operatorUserId, anonymousUserId, conversationId]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!logger) return;
     logger.resume();
     const onHide = () => {
@@ -9815,7 +9834,7 @@ function StatsWidget(props) {
       logger.dispose();
     };
   }, [logger]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);