@sensiblestats/widget-react 0.81.0 → 0.81.1

package/dist/index.cjs

@@ -37,7 +37,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_widget_sdk6 = require("@sensiblestats/widget-sdk");
 
 // src/kickoff.ts
@@ -158,6 +158,7 @@ var STRINGS = {
     allLeagues: "All leagues",
     searchLeaguesPlaceholder: "Search leagues or teams",
     noLeagueResults: "No league or team matches that search.",
+    clearSearchLabel: "Clear search",
     starOnLabel: "Add to Your leagues",
     starOffLabel: "Remove from Your leagues",
     starredToast: "Added to Your leagues.",
@@ -523,6 +524,7 @@ var STRINGS = {
     allLeagues: "T\xFCm ligler",
     searchLeaguesPlaceholder: "Lig veya tak\u0131m ara",
     noLeagueResults: "Aramana uyan lig veya tak\u0131m yok.",
+    clearSearchLabel: "Aramay\u0131 temizle",
     starOnLabel: "Liglerine ekle",
     starOffLabel: "Liglerinden \xE7\u0131kar",
     starredToast: "Liglerin b\xF6l\xFCm\xFCne eklendi.",
@@ -885,6 +887,7 @@ function normalizeUi(cfg) {
     allLeagues: strings.allLeagues,
     searchLeaguesPlaceholder: strings.searchLeaguesPlaceholder,
     noLeagueResults: strings.noLeagueResults,
+    clearSearchLabel: strings.clearSearchLabel,
     starOnLabel: strings.starOnLabel,
     starOffLabel: strings.starOffLabel,
     starredToast: strings.starredToast,
@@ -3449,7 +3452,7 @@ function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup,
 }
 
 // src/components/ChatPanel.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/ChatHeader.tsx
 var import_react15 = require("react");
@@ -3854,7 +3857,8 @@ function PinToggle({ pin, monitor, ui, market }) {
   const key = pinKey(pin);
   const pinned = monitor.isPinned(key);
   const labels = pin.kind === "match" ? { pin: ui.matchPinLabel, unpin: ui.matchUnpinLabel } : { pin: ui.pinLabel, unpin: ui.unpinLabel };
-  const onClick = () => {
+  const onClick = (e) => {
+    e.stopPropagation();
     if (pin.kind === "match" && !monitor.isPinned(key)) {
       if (monitor.pinMatch({ matchId: pin.matchId, marketDeveloperName: market }) === "added") {
         log?.log({ name: "pin_add", entityType: "match", entityId: String(pin.matchId), marketDeveloperName: pin.marketDeveloperName });
@@ -5958,7 +5962,7 @@ function OddsPanel({ monitor, ui, slip }) {
 }
 
 // src/components/TodayPanel.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/placement.ts
 function placeLeagues(visible, pinnedMatchIds) {
@@ -6186,6 +6190,9 @@ function LeagueDetail({ group, position, states, stale, ui, monitor, starTap, on
   ] });
 }
 
+// src/components/games/ui/SearchField.tsx
+var import_react40 = require("react");
+
 // src/components/games/ui/icons.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var svg = (size, children, fill = false) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -6222,7 +6229,13 @@ var IconFlame = ({ size = 16 }) => svg(size, /* @__PURE__ */ (0, import_jsx_runt
 
 // src/components/games/ui/SearchField.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
-function SearchField({ id, label, labelHidden = false, placeholder, value, onChange, disabled, inputRef, onKeyDown }) {
+function SearchField({ id, label, labelHidden = false, placeholder, value, onChange, disabled, inputRef, onKeyDown, clearLabel }) {
+  const localRef = (0, import_react40.useRef)(null);
+  const setInputRef = (0, import_react40.useCallback)((node) => {
+    localRef.current = node;
+    if (typeof inputRef === "function") inputRef(node);
+    else if (inputRef) inputRef.current = node;
+  }, [inputRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-g-search", children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("label", { htmlFor: id, className: labelHidden ? "ss-g-sr" : "ss-g-search-label", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-g-search-box", children: [
@@ -6231,7 +6244,7 @@ function SearchField({ id, label, labelHidden = false, placeholder, value, onCha
         "input",
         {
           id,
-          ref: inputRef,
+          ref: setInputRef,
           type: "text",
           autoComplete: "off",
           placeholder,
@@ -6240,7 +6253,20 @@ function SearchField({ id, label, labelHidden = false, placeholder, value, onCha
           onKeyDown,
           onChange: (e) => onChange(e.target.value)
         }
-      )
+      ),
+      clearLabel && value.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ss-g-search-clear",
+          "aria-label": clearLabel,
+          onClick: () => {
+            onChange("");
+            localRef.current?.focus();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconClose, { size: 11 })
+        }
+      ) : null
     ] })
   ] });
 }
@@ -6249,23 +6275,23 @@ function SearchField({ id, label, labelHidden = false, placeholder, value, onCha
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function TodayPanel({ discovery, ui, monitor }) {
   const { groups, states, stale, starLeague } = discovery;
-  const searchId = (0, import_react40.useId)();
-  const [query, setQuery] = (0, import_react40.useState)("");
-  const [selectedCompetitionId, setSelectedCompetitionId] = (0, import_react40.useState)(null);
-  const [toast, setToast] = (0, import_react40.useState)(null);
-  (0, import_react40.useEffect)(() => {
+  const searchId = (0, import_react41.useId)();
+  const [query, setQuery] = (0, import_react41.useState)("");
+  const [selectedCompetitionId, setSelectedCompetitionId] = (0, import_react41.useState)(null);
+  const [toast, setToast] = (0, import_react41.useState)(null);
+  (0, import_react41.useEffect)(() => {
     if (toast === null) return;
     const id = setTimeout(() => setToast(null), 4e3);
     return () => clearTimeout(id);
   }, [toast]);
   const visibleGroups = visibleGroupsOf(groups, states);
-  const pinnedMatchIds = (0, import_react40.useMemo)(
+  const pinnedMatchIds = (0, import_react41.useMemo)(
     () => monitor.pins.filter((p) => p.kind === "match").map((p) => p.matchId),
     [monitor.pins]
   );
-  const placement = (0, import_react40.useMemo)(() => placeLeagues(visibleGroups, pinnedMatchIds), [visibleGroups, pinnedMatchIds]);
+  const placement = (0, import_react41.useMemo)(() => placeLeagues(visibleGroups, pinnedMatchIds), [visibleGroups, pinnedMatchIds]);
   const starTap = useStarTap(starLeague);
-  const gridStarTap = (0, import_react40.useMemo)(() => ({
+  const gridStarTap = (0, import_react41.useMemo)(() => ({
     pendingId: starTap.pendingId,
     tap: async (competitionId, next) => {
       const ok = await starTap.tap(competitionId, next);
@@ -6279,7 +6305,7 @@ function TodayPanel({ discovery, ui, monitor }) {
   }, {});
   const openIndex = selectedCompetitionId === null ? -1 : placement.order.findIndex((g) => g.competitionId === selectedCompetitionId);
   const openGroup = openIndex === -1 ? void 0 : placement.order[openIndex];
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (selectedCompetitionId !== null && openGroup === void 0) setSelectedCompetitionId(null);
   }, [selectedCompetitionId, openGroup]);
   const liveRows = stale ? [] : visibleGroups.flatMap((group) => group.matches.filter((m) => isTreatedLive(states[m.matchId], stale)).map((match) => ({ match, rank: group.rank }))).sort((a, b) => a.rank - b.rank);
@@ -6324,7 +6350,7 @@ function TodayPanel({ discovery, ui, monitor }) {
     ] }) });
   }
   const searching = query.trim().length > 0;
-  const searchResults = searching ? visibleGroups.filter((g) => matchesQuery(g, query)) : [];
+  const searchResults = searching ? placement.order.filter((g) => matchesQuery(g, query)) : [];
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-today-root", children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-mon-list", children: [
       stale && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-stale", children: ui.staleStates }),
@@ -6337,21 +6363,41 @@ function TodayPanel({ discovery, ui, monitor }) {
           labelHidden: true,
           placeholder: ui.searchLeaguesPlaceholder,
           value: query,
-          onChange: setQuery
+          onChange: setQuery,
+          clearLabel: ui.clearSearchLabel
         }
       ),
-      searching ? searchResults.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-today-empty", children: ui.noLeagueResults }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-today-tiles", children: searchResults.map((group) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-        LeagueTile,
-        {
-          group,
-          starClickable: starClickable(group, placement.pinnedCompetitionId),
-          disambiguate: (nameCounts[group.competitionName] ?? 0) > 1,
-          onOpen: () => setSelectedCompetitionId(group.competitionId),
-          starTap: gridStarTap,
-          ui
-        },
-        group.competitionId
-      )) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+      searching ? searchResults.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-today-empty", children: ui.noLeagueResults }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: searchResults.map((group) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-today-search-block", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-today-search-group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Crest2, { url: group.competitionImagePath ?? void 0, name: group.competitionName, kind: "comp" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "ss-w-today-search-group-name", children: [
+            group.competitionName,
+            (nameCounts[group.competitionName] ?? 0) > 1 && group.competitionCountry ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "ss-w-today-tile-country", children: [
+              " (",
+              group.competitionCountry,
+              ")"
+            ] }) : null
+          ] })
+        ] }),
+        group.matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: "ss-w-today-search-row",
+            onClick: () => setSelectedCompetitionId(group.competitionId),
+            onKeyDown: (e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setSelectedCompetitionId(group.competitionId);
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FixtureRow, { match, state: states[match.matchId], stale, ui, monitor })
+          },
+          match.matchId
+        ))
+      ] }, group.competitionId)) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-today-sec", children: [
           placement.personal ? ui.yourLeagues : ui.topLeagues,
           !placement.personal && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ss-w-today-sec-sub", children: ui.topLeaguesSub })
@@ -6388,7 +6434,7 @@ function TodayPanel({ discovery, ui, monitor }) {
 }
 
 // src/components/GamesPanel.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/components/GamesLoginWall.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
@@ -6397,7 +6443,7 @@ function GamesLoginWall({ ui }) {
 }
 
 // src/components/GamesHub.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/games/ui/gameMeta.ts
 function prettifyGameId(gameId) {
@@ -6548,8 +6594,8 @@ function pickHeroGame(games) {
 }
 var tileKey = (g) => `${g.gameId}-${g.gameDay}-${g.fixtureId}`;
 function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
-  const [, setTick] = (0, import_react41.useState)(0);
-  (0, import_react41.useEffect)(() => {
+  const [, setTick] = (0, import_react42.useState)(0);
+  (0, import_react42.useEffect)(() => {
     const id = setInterval(() => setTick((t) => t + 1), 6e4);
     return () => clearInterval(id);
   }, []);
@@ -6609,10 +6655,10 @@ function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
 }
 
 // src/components/GameScreenHost.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/useGamePlay.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 function toSubmitResult(payload) {
   return {
     // 'pending' means the play is recorded but awaiting resolution (fixture games)
@@ -6624,17 +6670,17 @@ function toSubmitResult(payload) {
   };
 }
 function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh }) {
-  const [result, setResult] = (0, import_react42.useState)(null);
-  const [submitting, setSubmitting] = (0, import_react42.useState)(false);
-  const [rawStatus, setRawStatus] = (0, import_react42.useState)(null);
-  const inFlightRef = (0, import_react42.useRef)(false);
-  const convRef = (0, import_react42.useRef)(conversation);
+  const [result, setResult] = (0, import_react43.useState)(null);
+  const [submitting, setSubmitting] = (0, import_react43.useState)(false);
+  const [rawStatus, setRawStatus] = (0, import_react43.useState)(null);
+  const inFlightRef = (0, import_react43.useRef)(false);
+  const convRef = (0, import_react43.useRef)(conversation);
   convRef.current = conversation;
-  const optsRef = (0, import_react42.useRef)({ gameId, gameDay, fixtureId, locale, refresh });
+  const optsRef = (0, import_react43.useRef)({ gameId, gameDay, fixtureId, locale, refresh });
   optsRef.current = { gameId, gameDay, fixtureId, locale, refresh };
-  const resultRef = (0, import_react42.useRef)(null);
+  const resultRef = (0, import_react43.useRef)(null);
   resultRef.current = result;
-  const refetch = (0, import_react42.useCallback)(async () => {
+  const refetch = (0, import_react43.useCallback)(async () => {
     const conv = convRef.current;
     if (!conv) return;
     const opts = optsRef.current;
@@ -6650,7 +6696,7 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
     } catch {
     }
   }, []);
-  const submit = (0, import_react42.useCallback)(async (answerJson) => {
+  const submit = (0, import_react43.useCallback)(async (answerJson) => {
     const conv = convRef.current;
     if (!conv || inFlightRef.current) return;
     inFlightRef.current = true;
@@ -6677,14 +6723,14 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
       setSubmitting(false);
     }
   }, [refetch]);
-  const hydrate = (0, import_react42.useCallback)(() => {
+  const hydrate = (0, import_react43.useCallback)(() => {
     void refetch();
   }, [refetch]);
   return { result, submitting, submit, hydrate, rawStatus };
 }
 
 // src/components/games/MysteryTigerGame.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/components/games/nationFlags.ts
 var FLAGS = {
@@ -6895,7 +6941,7 @@ function isNationCode(flag) {
 }
 
 // src/components/games/PlayerAvatar.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function initialsOf(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
@@ -6913,7 +6959,7 @@ function PlayerAvatar({
   imagePath,
   className
 }) {
-  const [failed, setFailed] = (0, import_react43.useState)(false);
+  const [failed, setFailed] = (0, import_react44.useState)(false);
   const showImage = Boolean(imagePath) && !isPlaceholderImage(imagePath) && !failed;
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className, "aria-hidden": "true", children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("img", { src: imagePath, alt: "", loading: "lazy", onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ss-w-av-initials", children: initialsOf(name) }) });
 }
@@ -7154,8 +7200,8 @@ function MysteryTigerGame({
   onBack
 }) {
   const t = ui.games.mysteryTiger;
-  const [query, setQuery] = (0, import_react44.useState)("");
-  const inputId = (0, import_react44.useId)();
+  const [query, setQuery] = (0, import_react45.useState)("");
+  const inputId = (0, import_react45.useId)();
   const clientState = parseClientState(result?.clientStateJson);
   const guessResults = clientState?.guessResults ?? [];
   const alreadyGuessedIds = new Set(guessResults.map((g) => g.playerId));
@@ -7416,13 +7462,13 @@ function HigherOrLowerGame({
 }
 
 // src/components/games/CareerPathGame.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/components/games/ui/CrestShield.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 function CrestShield({ src, name, size = 28 }) {
-  const [failed, setFailed] = (0, import_react45.useState)(false);
+  const [failed, setFailed] = (0, import_react46.useState)(false);
   if (src && !isPlaceholderImage(src) && !failed) {
     return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("img", { className: "ss-g-crest", src, alt: name, width: size, height: size, loading: "lazy", onError: () => setFailed(true) });
   }
@@ -7454,8 +7500,8 @@ function CareerPathGame({
 }) {
   const s = ui.games.careerPath;
   const title = gameTitle({ gameId: "career-path" }, ui.games.titles);
-  const [query, setQuery] = (0, import_react46.useState)("");
-  const inputId = (0, import_react46.useId)();
+  const [query, setQuery] = (0, import_react47.useState)("");
+  const inputId = (0, import_react47.useId)();
   const clientState = parseClientState3(result?.clientStateJson);
   const alreadyGuessedIds = new Set(clientState?.guessResults.map((g) => g.playerId) ?? []);
   const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
@@ -7561,7 +7607,7 @@ function CareerPathGame({
 }
 
 // src/components/games/BeatTheGridGame.tsx
-var import_react47 = __toESM(require("react"), 1);
+var import_react48 = __toESM(require("react"), 1);
 
 // src/components/games/ui/OptionList.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
@@ -7650,10 +7696,10 @@ function SearchSheet({
   ui
 }) {
   const s = ui.games.beatTheGrid;
-  const [query, setQuery] = (0, import_react47.useState)("");
-  const inputId = (0, import_react47.useId)();
-  const inputRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useEffect)(() => {
+  const [query, setQuery] = (0, import_react48.useState)("");
+  const inputId = (0, import_react48.useId)();
+  const inputRef = (0, import_react48.useRef)(null);
+  (0, import_react48.useEffect)(() => {
     inputRef.current?.focus();
   }, [row, col]);
   const filtered = playerPool.filter(
@@ -7718,7 +7764,7 @@ function BeatTheGridGame({
 }) {
   const s = ui.games.beatTheGrid;
   const title = gameTitle({ gameId: "beat-the-grid" }, ui.games.titles);
-  const [activeCell, setActiveCell] = (0, import_react47.useState)(null);
+  const [activeCell, setActiveCell] = (0, import_react48.useState)(null);
   const clientState = parseClientState4(result?.clientStateJson);
   const filledCells = clientState?.cells ?? [];
   const isLocked2 = result?.alreadyPlayed === true || clientState?.isComplete === true;
@@ -7792,7 +7838,7 @@ function BeatTheGridGame({
                 /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { "aria-hidden": "true", children: abbr }),
                 /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ss-g-sr", children: rowLabel })
               ] });
-              return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_react47.default.Fragment, { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_react48.default.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "ss-g-btg-rowhdr", "data-meta": rowMeta ? "true" : void 0, children: rowHeaderContent }),
                 cols.map((colLabel, colIdx) => {
                   const filled = findCellResult(filledCells, rowIdx, colIdx);
@@ -7873,7 +7919,7 @@ function BeatTheGridGame({
 }
 
 // src/components/games/GuessTheXiGame.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/games/ui/PitchSvg.tsx
 var import_jsx_runtime81 = require("react/jsx-runtime");
@@ -7962,8 +8008,8 @@ function GuessTheXiGame({
   onBack
 }) {
   const t = ui.games.guessTheXi;
-  const [query, setQuery] = (0, import_react48.useState)("");
-  const inputId = (0, import_react48.useId)();
+  const [query, setQuery] = (0, import_react49.useState)("");
+  const inputId = (0, import_react49.useId)();
   const clientState = parseClientState5(result?.clientStateJson);
   const isOver = result?.alreadyPlayed === true || clientState?.status === "solved" || clientState?.status === "failed";
   const solved = clientState?.status === "solved";
@@ -8105,7 +8151,7 @@ function GuessTheXiGame({
 }
 
 // src/components/games/DailyQuizGame.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime83 = require("react/jsx-runtime");
 function parseClientState6(json) {
   if (!json) return null;
@@ -8146,8 +8192,8 @@ function DailyQuizGame({
 }) {
   const s = ui.games.dailyQuiz;
   const title = gameTitle({ gameId: "daily-quiz" }, ui.games.titles);
-  const [selections, setSelections] = (0, import_react49.useState)(/* @__PURE__ */ new Map());
-  const [page, setPage] = (0, import_react49.useState)(0);
+  const [selections, setSelections] = (0, import_react50.useState)(/* @__PURE__ */ new Map());
+  const [page, setPage] = (0, import_react50.useState)(0);
   const clientState = parseClientState6(result?.clientStateJson);
   const results = clientState?.results ?? [];
   const isRevealed = results.length > 0 || result?.alreadyPlayed === true;
@@ -8257,7 +8303,7 @@ function DailyQuizGame({
 }
 
 // src/components/games/MatchdayPredictorGame.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var SCORER_SEARCH_THRESHOLD = 9;
 function parseClientState7(json) {
@@ -8353,12 +8399,12 @@ function MatchdayPredictorGame({
   onBack
 }) {
   const t = ui.games.predictor;
-  const [homeScore, setHomeScore] = (0, import_react50.useState)(0);
-  const [awayScore, setAwayScore] = (0, import_react50.useState)(0);
-  const [firstScorerPlayerId, setFirstScorerPlayerId] = (0, import_react50.useState)(null);
-  const [lastEdited, setLastEdited] = (0, import_react50.useState)("home");
-  const [query, setQuery] = (0, import_react50.useState)("");
-  const searchId = (0, import_react50.useId)();
+  const [homeScore, setHomeScore] = (0, import_react51.useState)(0);
+  const [awayScore, setAwayScore] = (0, import_react51.useState)(0);
+  const [firstScorerPlayerId, setFirstScorerPlayerId] = (0, import_react51.useState)(null);
+  const [lastEdited, setLastEdited] = (0, import_react51.useState)("home");
+  const [query, setQuery] = (0, import_react51.useState)("");
+  const searchId = (0, import_react51.useId)();
   const clientState = parseClientState7(result?.clientStateJson);
   const alreadyPlayed = result?.alreadyPlayed === true;
   const header = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
@@ -8525,7 +8571,7 @@ function MatchdayPredictorGame({
 }
 
 // src/components/games/StartingXiGame.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var POINTS_PER_STARTER = 8;
 var XI_SIZE = 11;
@@ -8569,10 +8615,10 @@ function StartingXiGame({
   lockAtUtc
 }) {
   const t = ui.games.startingXi;
-  const [slotPlayers, setSlotPlayers] = (0, import_react51.useState)(() => Array(XI_SIZE).fill(null));
-  const [active, setActive] = (0, import_react51.useState)(0);
-  const [query, setQuery] = (0, import_react51.useState)("");
-  const searchId = (0, import_react51.useId)();
+  const [slotPlayers, setSlotPlayers] = (0, import_react52.useState)(() => Array(XI_SIZE).fill(null));
+  const [active, setActive] = (0, import_react52.useState)(0);
+  const [query, setQuery] = (0, import_react52.useState)("");
+  const searchId = (0, import_react52.useId)();
   const clientState = parseClientState8(result?.clientStateJson);
   const alreadyPlayed = result?.alreadyPlayed === true;
   const header = /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
@@ -8711,7 +8757,7 @@ function StartingXiGame({
 }
 
 // src/components/games/StatLadderGame.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 function ladderClue(ladder) {
   const mystery = ladder.find((r) => r.rank === 2);
@@ -8748,9 +8794,9 @@ function StatLadderGame({
   onBack
 }) {
   const t = ui.games.statLadder;
-  const [query, setQuery] = (0, import_react52.useState)("");
-  const [selectedId, setSelectedId] = (0, import_react52.useState)(null);
-  const searchId = (0, import_react52.useId)();
+  const [query, setQuery] = (0, import_react53.useState)("");
+  const [selectedId, setSelectedId] = (0, import_react53.useState)(null);
+  const searchId = (0, import_react53.useId)();
   const clientState = parseClientState9(result?.clientStateJson);
   const revealed = clientState != null;
   const header = /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(GameHeader, { title: gameTitle({ gameId: "stat-ladder" }, ui.games.titles), eyebrow: t.eyebrow, onBack, backLabel: ui.back });
@@ -8956,8 +9002,8 @@ function GameScreenHost({
   ui
 }) {
   const { gameId, fixtureId, gameDay = "", lockAtUtc = null } = selected;
-  const [configJson, setConfigJson] = (0, import_react53.useState)(null);
-  (0, import_react53.useEffect)(() => {
+  const [configJson, setConfigJson] = (0, import_react54.useState)(null);
+  (0, import_react54.useEffect)(() => {
     setConfigJson(null);
     if (!conversation) return;
     let cancelled = false;
@@ -8980,12 +9026,12 @@ function GameScreenHost({
     fixtureId: fixtureId || void 0,
     locale: ui.games.lang
   });
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (conversation) hydrate();
   }, [conversation, gameId]);
-  const hydrateRef = (0, import_react53.useRef)(hydrate);
+  const hydrateRef = (0, import_react54.useRef)(hydrate);
   hydrateRef.current = hydrate;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!FIXTURE_GAME_IDS.has(gameId)) return;
     if (rawStatus !== "pending") return;
     const timerId = setInterval(() => {
@@ -9120,8 +9166,8 @@ function GamesPanel({
   leaderboard,
   refreshHub
 }) {
-  const [selected, setSelected] = (0, import_react54.useState)(null);
-  (0, import_react54.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react55.useState)(null);
+  (0, import_react55.useEffect)(() => {
     ensureGamesFonts();
   }, []);
   if (!loggedIn) return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(GamesLoginWall, { ui });
@@ -9152,7 +9198,7 @@ function GamesPanel({
 }
 
 // src/components/Leaderboard.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/components/LeaderboardRow.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
@@ -9237,7 +9283,7 @@ function Leaderboard({
   ui,
   onPlay
 }) {
-  const [segment, setSegment] = (0, import_react55.useState)("weekly");
+  const [segment, setSegment] = (0, import_react56.useState)("weekly");
   const myRow = segment === "weekly" ? data.myWeeklyRow : data.myAllTimeRow;
   const offBoard = myRow !== null && myRow !== void 0 && myRow.rank === -1;
   const isEmpty = segment === "weekly" ? data.weeklyTop.length === 0 : data.allTimeTop.length === 0;
@@ -9317,10 +9363,10 @@ function LeaderboardPanel({ loggedIn, data, loading, onPlay, ui }) {
 }
 
 // src/components/PresetSpeedDial.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 function PresetSpeedDial({ expanded, showDot, strings, onToggle, onOpen, rootRef, buttonRef }) {
-  const pillsId = (0, import_react56.useId)();
+  const pillsId = (0, import_react57.useId)();
   const tabIndex = expanded ? 0 : -1;
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { ref: rootRef, className: "ss-w-dial", children: [
     /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
@@ -9354,16 +9400,16 @@ function PresetSpeedDial({ expanded, showDot, strings, onToggle, onOpen, rootRef
 }
 
 // src/components/PresetTools.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function PresetToolModal({ title, closeLabel, onClose, children, footer }) {
-  const dialogRef = (0, import_react57.useRef)(null);
-  const titleId = (0, import_react57.useId)();
-  (0, import_react57.useEffect)(() => {
+  const dialogRef = (0, import_react58.useRef)(null);
+  const titleId = (0, import_react58.useId)();
+  (0, import_react58.useEffect)(() => {
     dialogRef.current?.focus();
   }, []);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const onKey = (e) => {
       if (e.key !== "Escape") return;
       e.stopPropagation();
@@ -9405,7 +9451,7 @@ function PresetToolModal({ title, closeLabel, onClose, children, footer }) {
 function fillTemplate(template, slots) {
   return template.split(/(\{[a-z]+\})/).filter((part) => part !== "").map((part, i) => {
     const key = /^\{([a-z]+)\}$/.exec(part)?.[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react57.Fragment, { children: key !== void 0 && key in slots ? slots[key] : part }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react58.Fragment, { children: key !== void 0 && key in slots ? slots[key] : part }, i);
   });
 }
 function NumberSelect({ current, choices: choices2, label, notToday, lockEmpty = true, onChoose }) {
@@ -9474,15 +9520,15 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
   const totals = comboTotals(grid);
   const legChoices = comboLegChoices(grid);
   const count = FIXED_SINGLES_COUNT;
-  const [maxPrice, setMaxPrice] = (0, import_react57.useState)(() => startSingles(grid.singles, limits, START.maxPrice, count));
-  const [minPrice, setMinPrice] = (0, import_react57.useState)(() => startSingles(grid.singlesFrom, floors, START.minPrice, count));
-  const [start] = (0, import_react57.useState)(() => startCombo(grid, totals, legChoices, START.comboTotal, START.comboLegs));
-  const [total, setTotal] = (0, import_react57.useState)(start.total);
-  const [legs, setLegs] = (0, import_react57.useState)(start.legs);
-  const [bigStart] = (0, import_react57.useState)(() => startCombo(grid, totals, legChoices, BIG_COMBO.total, BIG_COMBO.legs));
-  const [bigTotal, setBigTotal] = (0, import_react57.useState)(bigStart.total);
-  const [bigLegs, setBigLegs] = (0, import_react57.useState)(bigStart.legs);
-  const [announcement, setAnnouncement] = (0, import_react57.useState)("");
+  const [maxPrice, setMaxPrice] = (0, import_react58.useState)(() => startSingles(grid.singles, limits, START.maxPrice, count));
+  const [minPrice, setMinPrice] = (0, import_react58.useState)(() => startSingles(grid.singlesFrom, floors, START.minPrice, count));
+  const [start] = (0, import_react58.useState)(() => startCombo(grid, totals, legChoices, START.comboTotal, START.comboLegs));
+  const [total, setTotal] = (0, import_react58.useState)(start.total);
+  const [legs, setLegs] = (0, import_react58.useState)(start.legs);
+  const [bigStart] = (0, import_react58.useState)(() => startCombo(grid, totals, legChoices, BIG_COMBO.total, BIG_COMBO.legs));
+  const [bigTotal, setBigTotal] = (0, import_react58.useState)(bigStart.total);
+  const [bigLegs, setBigLegs] = (0, import_react58.useState)(bigStart.legs);
+  const [announcement, setAnnouncement] = (0, import_react58.useState)("");
   const maxCell = findSingles(grid.singles, maxPrice, count);
   const minCell = findSingles(grid.singlesFrom, minPrice, count);
   const comboCell = findCombo(grid, total, legs);
@@ -9526,7 +9572,7 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
   const totalChoices = totals.map((v) => ({ value: v, text: v.toFixed(1), available: legChoices.some((n) => !!findCombo(grid, v, n)) }));
   const legChoicesFor = (t) => legChoices.map((n) => ({ value: n, text: String(n), available: !!findCombo(grid, t, n) }));
   const markets = grid.markets ?? [];
-  const [marketIdx, setMarketIdx] = (0, import_react57.useState)(0);
+  const [marketIdx, setMarketIdx] = (0, import_react58.useState)(0);
   const marketCell = markets[marketIdx] ?? null;
   const marketLabels = markets.map((c) => strings.marketShort(c.marketDeveloperName, c.marketLabel, c.selectionLabel ?? null));
   const singlesReady = (cell) => cell ? strings.readyCount(cell.picks.length) : strings.unavailable;
@@ -9607,14 +9653,14 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
 function BuildComboTool({ grid, strings, streaming, formatKickoff, initialTotal, initialLegs, onSend, onClose }) {
   const totals = comboTotals(grid);
   const legChoices = comboLegChoices(grid);
-  const [start] = (0, import_react57.useState)(() => initialTotal === void 0 ? startCombo(grid, totals, legChoices, START.comboTotal, START.comboLegs) : null);
-  const [total, setTotal] = (0, import_react57.useState)(() => initialTotal !== void 0 ? nearest(totals, initialTotal) : start.total);
-  const [legs, setLegs] = (0, import_react57.useState)(() => {
+  const [start] = (0, import_react58.useState)(() => initialTotal === void 0 ? startCombo(grid, totals, legChoices, START.comboTotal, START.comboLegs) : null);
+  const [total, setTotal] = (0, import_react58.useState)(() => initialTotal !== void 0 ? nearest(totals, initialTotal) : start.total);
+  const [legs, setLegs] = (0, import_react58.useState)(() => {
     if (initialTotal === void 0) return initialLegs !== void 0 ? clampLegs(legChoices, initialLegs) : start.legs;
     const from = initialLegs !== void 0 ? clampLegs(legChoices, initialLegs) : startValue(legChoices, START.comboLegs);
     return legsForTotal(grid, nearest(totals, initialTotal), from);
   });
-  const [announcement, setAnnouncement] = (0, import_react57.useState)("");
+  const [announcement, setAnnouncement] = (0, import_react58.useState)("");
   const cell = findCombo(grid, total, legs);
   const minLegs = legChoices[0] ?? legs;
   const maxLegs = legChoices[legChoices.length - 1] ?? legs;
@@ -9647,7 +9693,7 @@ function BuildComboTool({ grid, strings, streaming, formatKickoff, initialTotal,
 }
 
 // src/usePresetDial.ts
-var import_react58 = require("react");
+var import_react59 = require("react");
 function sendInFlight(messages, isStreaming) {
   const last = messages[messages.length - 1];
   return isStreaming && !!last && last.role === "assistant" && !last.done && !last.isGreeting;
@@ -9661,25 +9707,25 @@ function lastUserId(messages) {
 }
 var SCROLL_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
 function usePresetDial({ layerRef, dialRef, dialButtonRef, messages, isStreaming, activeTab }) {
-  const [expanded, setExpanded] = (0, import_react58.useState)(() => !sendInFlight(messages, isStreaming));
-  const fold = (0, import_react58.useCallback)(() => setExpanded(false), []);
-  const toggle = (0, import_react58.useCallback)(() => setExpanded((e) => !e), []);
+  const [expanded, setExpanded] = (0, import_react59.useState)(() => !sendInFlight(messages, isStreaming));
+  const fold = (0, import_react59.useCallback)(() => setExpanded(false), []);
+  const toggle = (0, import_react59.useCallback)(() => setExpanded((e) => !e), []);
   const currentUserId = lastUserId(messages);
-  const userIdRef = (0, import_react58.useRef)(currentUserId);
-  (0, import_react58.useEffect)(() => {
+  const userIdRef = (0, import_react59.useRef)(currentUserId);
+  (0, import_react59.useEffect)(() => {
     if (currentUserId === userIdRef.current) return;
     userIdRef.current = currentUserId;
     setExpanded(false);
   }, [currentUserId]);
-  const tabRef = (0, import_react58.useRef)(activeTab);
-  (0, import_react58.useEffect)(() => {
+  const tabRef = (0, import_react59.useRef)(activeTab);
+  (0, import_react59.useEffect)(() => {
     if (activeTab === tabRef.current) return;
     tabRef.current = activeTab;
     setExpanded(false);
   }, [activeTab]);
-  const expandedRef = (0, import_react58.useRef)(expanded);
+  const expandedRef = (0, import_react59.useRef)(expanded);
   expandedRef.current = expanded;
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     const onEscape = (e) => {
       const dial = dialRef.current;
       if (e.key !== "Escape" || !dial || !e.composedPath().includes(dial)) return;
@@ -9692,7 +9738,7 @@ function usePresetDial({ layerRef, dialRef, dialButtonRef, messages, isStreaming
     window.addEventListener("keydown", onEscape, true);
     return () => window.removeEventListener("keydown", onEscape, true);
   }, [dialRef, dialButtonRef]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!expanded) return;
     const layer = layerRef.current;
     const inDial = (e) => {
@@ -9747,8 +9793,8 @@ function markToolSeen() {
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = (0, import_react59.useState)(false);
-  (0, import_react59.useEffect)(() => {
+  const [modal, setModal] = (0, import_react60.useState)(false);
+  (0, import_react60.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -9762,7 +9808,7 @@ var HIDDEN_LAYER_STYLE = { position: "absolute", inset: 0, visibility: "hidden",
 function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, gamesResult, leaderboardResult, loggedIn, conversation, presetGrid }) {
   const { state, close, stop, send, reset } = controller;
   const isModal = useIsModal();
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -9778,19 +9824,19 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     monitor?.setActiveTab("chat");
     send(text, { grounding });
   };
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
   const onChatTab = !monitor || monitor.activeTab === "chat";
-  const layerRef = (0, import_react59.useRef)(null);
-  const dialRef = (0, import_react59.useRef)(null);
-  const dialButtonRef = (0, import_react59.useRef)(null);
-  const inputRef = (0, import_react59.useRef)(null);
-  const limitRef = (0, import_react59.useRef)(null);
-  const typedSendRef = (0, import_react59.useRef)(false);
-  const focusAfterCloseRef = (0, import_react59.useRef)(null);
-  const [tool, setTool] = (0, import_react59.useState)(null);
-  const [toolSeen, setToolSeen] = (0, import_react59.useState)(readToolSeen);
+  const layerRef = (0, import_react60.useRef)(null);
+  const dialRef = (0, import_react60.useRef)(null);
+  const dialButtonRef = (0, import_react60.useRef)(null);
+  const inputRef = (0, import_react60.useRef)(null);
+  const limitRef = (0, import_react60.useRef)(null);
+  const typedSendRef = (0, import_react60.useRef)(false);
+  const focusAfterCloseRef = (0, import_react60.useRef)(null);
+  const [tool, setTool] = (0, import_react60.useState)(null);
+  const [toolSeen, setToolSeen] = (0, import_react60.useState)(readToolSeen);
   const dial = usePresetDial({
     layerRef,
     dialRef,
@@ -9802,47 +9848,47 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
   const { fold } = dial;
   const paused = isPaused(state.limit);
   const showDial = !!presetGrid && onChatTab && !tool && !paused;
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (paused) setTool(null);
   }, [paused]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (!paused) return;
     if (typedSendRef.current) limitRef.current?.focus();
     typedSendRef.current = false;
   }, [paused]);
-  const openTool = (0, import_react59.useCallback)((next) => {
+  const openTool = (0, import_react60.useCallback)((next) => {
     fold();
     markToolSeen();
     setToolSeen(true);
     setTool(next);
   }, [fold]);
-  const onPill = (0, import_react59.useCallback)((kind) => openTool(kind === "numbers" ? { kind: "numbers" } : { kind: "combo" }), [openTool]);
-  const toolsValue = (0, import_react59.useMemo)(
+  const onPill = (0, import_react60.useCallback)((kind) => openTool(kind === "numbers" ? { kind: "numbers" } : { kind: "combo" }), [openTool]);
+  const toolsValue = (0, import_react60.useMemo)(
     () => presetGrid && !paused ? { openBuilder: (total, legs) => openTool({ kind: "combo", total, legs }), changeLabel: ui.presets.changeCombo } : null,
     [presetGrid, paused, openTool, ui.presets.changeCombo]
   );
-  const closeTool = (0, import_react59.useCallback)(() => {
+  const closeTool = (0, import_react60.useCallback)(() => {
     focusAfterCloseRef.current = "dial";
     setTool(null);
   }, []);
-  const sendAsk = (0, import_react59.useCallback)((ask) => {
+  const sendAsk = (0, import_react60.useCallback)((ask) => {
     focusAfterCloseRef.current = "composer";
     setTool(null);
     monitor?.setActiveTab("chat");
     send(ask.message, { displayText: ask.displayText, preset: ask.preset });
   }, [monitor, send]);
-  const formatKickoff = (0, import_react59.useCallback)((kickoffUtc) => {
+  const formatKickoff = (0, import_react60.useCallback)((kickoffUtc) => {
     const k = ui.bettingKickoff(kickoffUtc);
     return `${k.dayLabel} ${k.time}`;
   }, [ui]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (tool) return;
     const target = focusAfterCloseRef.current;
     focusAfterCloseRef.current = null;
     if (target === "dial") dialButtonRef.current?.focus();
     else if (target === "composer") inputRef.current?.focus();
   }, [tool]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (!tool || onChatTab && presetGrid) return;
     focusAfterCloseRef.current = "composer";
     setTool(null);
@@ -10061,6 +10107,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-search-box { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--ss-g-surface); border: 1.5px solid var(--ss-g-line); color: var(--ss-g-muted); }
 .ss-g-search-box:focus-within { border-color: var(--ss-w-accent); }
 .ss-g-search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ss-g-ink); font: 500 15px var(--ss-g-font-body); }
+.ss-g-search-clear { flex: none; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: var(--ss-g-line); color: var(--ss-g-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.ss-g-search-clear:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
 .ss-g-footer { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--ss-g-line); display: flex; flex-direction: column; gap: 10px; background: var(--ss-g-ground); }
 .ss-g-sil { position: relative; flex: none; display: inline-flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--ss-g-raised); color: var(--ss-g-strong-line); }
 .ss-g-sil--selected { background: var(--ss-g-accent-tint); color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-g-raised)); }
@@ -11150,6 +11198,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-today-sec-sub { text-transform: none; letter-spacing: normal; font-weight: 600; }
 .ss-w-today-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .ss-w-today-empty { font-size: 12px; color: var(--ss-w-faint); padding: 10px 2px; }
+.ss-w-today-search-block { display: flex; flex-direction: column; }
+.ss-w-today-search-group { display: flex; align-items: center; gap: 7px; padding: 2px 2px 6px; }
+.ss-w-today-search-group::after { content: ""; flex: 1; height: 1px; background: var(--ss-w-line); }
+.ss-w-today-search-group .ss-w-bi-comp-logo { width: 16px; height: 16px; }
+.ss-w-today-search-group-name { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-today-search-row { cursor: pointer; border-radius: 10px; }
+.ss-w-today-search-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
 
 /* League tile (Task 5): a flat row (crest + name as the open target, star as a separate sibling
    button) rather than a disclosure header -- opening is Task 6's LeagueDetail, not an inline
@@ -11696,24 +11751,24 @@ function injectStyles(root) {
 function StatsWidget(props) {
   const injectedClient = "client" in props ? props.client : void 0;
   const cfg = props.config;
-  const built = (0, import_react60.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
-  const logger = (0, import_react60.useMemo)(
+  const built = (0, import_react61.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
+  const logger = (0, import_react61.useMemo)(
     () => built ? built.client.createEventLogger({
       operatorUserId: cfg?.userContext?.operatorUserId,
       anonymousUserId: cfg?.userContext?.anonymousUserId
     }) : null,
     [built?.client]
   );
-  const ui = (0, import_react60.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = (0, import_react60.useRef)(null);
-  const introDoneRef = (0, import_react60.useRef)(false);
-  const markIntroDone = (0, import_react60.useCallback)(() => {
+  const ui = (0, import_react61.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
+  const rootRef = (0, import_react61.useRef)(null);
+  const introDoneRef = (0, import_react61.useRef)(false);
+  const markIntroDone = (0, import_react61.useCallback)(() => {
     introDoneRef.current = true;
   }, []);
   const convStorageKey = `ss-w-conv:${cfg?.operatorId ?? ""}:${cfg?.userContext?.operatorUserId ?? "anon"}`;
   const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0, convStorageKey);
-  const [hasToday, setHasToday] = (0, import_react60.useState)(false);
-  const liveCardWatches = (0, import_react60.useMemo)(() => {
+  const [hasToday, setHasToday] = (0, import_react61.useState)(false);
+  const liveCardWatches = (0, import_react61.useMemo)(() => {
     const seen = /* @__PURE__ */ new Set();
     const out = [];
     for (const msg of controller.state.messages) {
@@ -11737,19 +11792,19 @@ function StatsWidget(props) {
   });
   const operatorUserId = cfg?.userContext?.operatorUserId;
   const anonymousUserId = cfg?.userContext?.anonymousUserId;
-  const getSchedule = (0, import_react60.useCallback)(
+  const getSchedule = (0, import_react61.useCallback)(
     (localDate, utcOffsetMinutes) => built ? built.conversation.getSchedule(localDate, utcOffsetMinutes, operatorUserId, anonymousUserId) : Promise.resolve(null),
     [built, operatorUserId, anonymousUserId]
   );
-  const postLeagueStar = (0, import_react60.useCallback)(
+  const postLeagueStar = (0, import_react61.useCallback)(
     (competitionId, starred) => built ? built.conversation.starLeague(competitionId, starred, operatorUserId, anonymousUserId) : Promise.resolve(null),
     [built, operatorUserId, anonymousUserId]
   );
-  const getStates = (0, import_react60.useCallback)(
+  const getStates = (0, import_react61.useCallback)(
     (matchIds) => built ? built.conversation.getStates(matchIds) : Promise.resolve(null),
     [built]
   );
-  const pinnedMatchIds = (0, import_react60.useMemo)(
+  const pinnedMatchIds = (0, import_react61.useMemo)(
     () => monitor.pins.filter((p) => p.kind === "match").map((p) => p.matchId),
     [monitor.pins]
   );
@@ -11764,11 +11819,11 @@ function StatsWidget(props) {
     pinnedMatchIds
   });
   const todayHasContent = visibleGroupsOf(discovery.groups, discovery.states).length > 0;
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     setHasToday(todayHasContent);
   }, [todayHasContent]);
-  const prevLiveSnapshotRef = (0, import_react60.useRef)(monitor.snapshot);
-  (0, import_react60.useEffect)(() => {
+  const prevLiveSnapshotRef = (0, import_react61.useRef)(monitor.snapshot);
+  (0, import_react61.useEffect)(() => {
     const snap = monitor.snapshot;
     if (!snap || snap === prevLiveSnapshotRef.current) return;
     prevLiveSnapshotRef.current = snap;
@@ -11804,14 +11859,14 @@ function StatsWidget(props) {
   }, [monitor.snapshot]);
   const gamesResult = useGames(built?.conversation ?? null, { activeTab: monitor.activeTab });
   const leaderboardResult = useLeaderboard(built?.conversation ?? null, { activeTab: monitor.activeTab });
-  const getPricePresets = (0, import_react60.useCallback)(
+  const getPricePresets = (0, import_react61.useCallback)(
     (locale2) => built ? built.conversation.getPricePresets(locale2, { pool: "open" }) : Promise.resolve(null),
     [built]
   );
   const presetGrid = usePresetGrid({ getPricePresets, isOpen: controller.state.isOpen, locale: ui.presets.lang });
   const markTodayActivity = monitor.markTodayActivity;
-  const prevLiveCountRef = (0, import_react60.useRef)(0);
-  (0, import_react60.useEffect)(() => {
+  const prevLiveCountRef = (0, import_react61.useRef)(0);
+  (0, import_react61.useEffect)(() => {
     const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
     prevLiveCountRef.current = discovery.liveCount;
     if (rose) markTodayActivity();
@@ -11825,7 +11880,7 @@ function StatsWidget(props) {
     closePanel: controller.close
   });
   const markAdded = hostEvents.markAdded;
-  const slip = (0, import_react60.useMemo)(
+  const slip = (0, import_react61.useMemo)(
     () => {
       const handler = props.config?.onAddToSlip;
       return {
@@ -11844,7 +11899,7 @@ function StatsWidget(props) {
     },
     [props.config?.onAddToSlip, controller.state.conversationId, markAdded]
   );
-  const onDashboardTap = (0, import_react60.useMemo)(
+  const onDashboardTap = (0, import_react61.useMemo)(
     () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input), logger) : void 0,
     [built, logger]
   );
@@ -11861,11 +11916,11 @@ function StatsWidget(props) {
     })
   }));
   const conversationId = controller.state.conversationId ?? void 0;
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (!logger) return;
     logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
   }, [logger, operatorUserId, anonymousUserId, conversationId]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (!logger) return;
     logger.resume();
     const onHide = () => {
@@ -11883,7 +11938,7 @@ function StatsWidget(props) {
       logger.dispose();
     };
   }, [logger]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);