@sensiblestats/widget-react 0.81.0 → 0.81.1

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/StatsWidget.tsx
-import { useCallback as useCallback17, useEffect as useEffect29, useMemo as useMemo6, useRef as useRef24, useState as useState48 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect29, useMemo as useMemo6, useRef as useRef25, useState as useState48 } from "react";
 import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
 
 // src/kickoff.ts
@@ -120,6 +120,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.",
@@ -485,6 +486,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.",
@@ -847,6 +849,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,
@@ -3411,7 +3414,7 @@ function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup,
 }
 
 // src/components/ChatPanel.tsx
-import { useCallback as useCallback16, useEffect as useEffect28, useMemo as useMemo5, useRef as useRef23, useState as useState47 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect28, useMemo as useMemo5, useRef as useRef24, useState as useState47 } from "react";
 
 // src/components/ChatHeader.tsx
 import { useEffect as useEffect12, useRef as useRef12, useState as useState10 } from "react";
@@ -3816,7 +3819,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 });
@@ -6148,6 +6152,9 @@ function LeagueDetail({ group, position, states, stale, ui, monitor, starTap, on
   ] });
 }
 
+// src/components/games/ui/SearchField.tsx
+import { useCallback as useCallback14, useRef as useRef18 } from "react";
+
 // src/components/games/ui/icons.tsx
 import { jsx as jsx58 } from "react/jsx-runtime";
 var svg = (size, children, fill = false) => /* @__PURE__ */ jsx58(
@@ -6184,7 +6191,13 @@ var IconFlame = ({ size = 16 }) => svg(size, /* @__PURE__ */ jsx58("path", { d:
 
 // src/components/games/ui/SearchField.tsx
 import { jsx as jsx59, jsxs as jsxs53 } from "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 = useRef18(null);
+  const setInputRef = useCallback14((node) => {
+    localRef.current = node;
+    if (typeof inputRef === "function") inputRef(node);
+    else if (inputRef) inputRef.current = node;
+  }, [inputRef]);
   return /* @__PURE__ */ jsxs53("div", { className: "ss-g-search", children: [
     /* @__PURE__ */ jsx59("label", { htmlFor: id, className: labelHidden ? "ss-g-sr" : "ss-g-search-label", children: label }),
     /* @__PURE__ */ jsxs53("div", { className: "ss-g-search-box", children: [
@@ -6193,7 +6206,7 @@ function SearchField({ id, label, labelHidden = false, placeholder, value, onCha
         "input",
         {
           id,
-          ref: inputRef,
+          ref: setInputRef,
           type: "text",
           autoComplete: "off",
           placeholder,
@@ -6202,7 +6215,20 @@ function SearchField({ id, label, labelHidden = false, placeholder, value, onCha
           onKeyDown,
           onChange: (e) => onChange(e.target.value)
         }
-      )
+      ),
+      clearLabel && value.length > 0 ? /* @__PURE__ */ jsx59(
+        "button",
+        {
+          type: "button",
+          className: "ss-g-search-clear",
+          "aria-label": clearLabel,
+          onClick: () => {
+            onChange("");
+            localRef.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx59(IconClose, { size: 11 })
+        }
+      ) : null
     ] })
   ] });
 }
@@ -6286,7 +6312,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__ */ jsxs54("div", { className: "ss-w-today-root", children: [
     /* @__PURE__ */ jsxs54("div", { className: "ss-w-mon-list", children: [
       stale && /* @__PURE__ */ jsx60("div", { className: "ss-w-stale", children: ui.staleStates }),
@@ -6299,21 +6325,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__ */ jsx60("div", { className: "ss-w-today-empty", children: ui.noLeagueResults }) : /* @__PURE__ */ jsx60("div", { className: "ss-w-today-tiles", children: searchResults.map((group) => /* @__PURE__ */ jsx60(
-        LeagueTile,
-        {
-          group,
-          starClickable: starClickable(group, placement.pinnedCompetitionId),
-          disambiguate: (nameCounts[group.competitionName] ?? 0) > 1,
-          onOpen: () => setSelectedCompetitionId(group.competitionId),
-          starTap: gridStarTap,
-          ui
-        },
-        group.competitionId
-      )) }) : /* @__PURE__ */ jsxs54(Fragment7, { children: [
+      searching ? searchResults.length === 0 ? /* @__PURE__ */ jsx60("div", { className: "ss-w-today-empty", children: ui.noLeagueResults }) : /* @__PURE__ */ jsx60(Fragment7, { children: searchResults.map((group) => /* @__PURE__ */ jsxs54("div", { className: "ss-w-today-search-block", children: [
+        /* @__PURE__ */ jsxs54("div", { className: "ss-w-today-search-group", children: [
+          /* @__PURE__ */ jsx60(Crest2, { url: group.competitionImagePath ?? void 0, name: group.competitionName, kind: "comp" }),
+          /* @__PURE__ */ jsxs54("span", { className: "ss-w-today-search-group-name", children: [
+            group.competitionName,
+            (nameCounts[group.competitionName] ?? 0) > 1 && group.competitionCountry ? /* @__PURE__ */ jsxs54("span", { className: "ss-w-today-tile-country", children: [
+              " (",
+              group.competitionCountry,
+              ")"
+            ] }) : null
+          ] })
+        ] }),
+        group.matches.map((match) => /* @__PURE__ */ jsx60(
+          "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__ */ jsx60(FixtureRow, { match, state: states[match.matchId], stale, ui, monitor })
+          },
+          match.matchId
+        ))
+      ] }, group.competitionId)) }) : /* @__PURE__ */ jsxs54(Fragment7, { children: [
         /* @__PURE__ */ jsxs54("div", { className: "ss-w-today-sec", children: [
           placement.personal ? ui.yourLeagues : ui.topLeagues,
           !placement.personal && /* @__PURE__ */ jsx60("span", { className: "ss-w-today-sec-sub", children: ui.topLeaguesSub })
@@ -6571,10 +6617,10 @@ function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
 }
 
 // src/components/GameScreenHost.tsx
-import { useEffect as useEffect24, useRef as useRef20, useState as useState42 } from "react";
+import { useEffect as useEffect24, useRef as useRef21, useState as useState42 } from "react";
 
 // src/useGamePlay.ts
-import { useCallback as useCallback14, useRef as useRef18, useState as useState31 } from "react";
+import { useCallback as useCallback15, useRef as useRef19, useState as useState31 } from "react";
 function toSubmitResult(payload) {
   return {
     // 'pending' means the play is recorded but awaiting resolution (fixture games)
@@ -6589,14 +6635,14 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
   const [result, setResult] = useState31(null);
   const [submitting, setSubmitting] = useState31(false);
   const [rawStatus, setRawStatus] = useState31(null);
-  const inFlightRef = useRef18(false);
-  const convRef = useRef18(conversation);
+  const inFlightRef = useRef19(false);
+  const convRef = useRef19(conversation);
   convRef.current = conversation;
-  const optsRef = useRef18({ gameId, gameDay, fixtureId, locale, refresh });
+  const optsRef = useRef19({ gameId, gameDay, fixtureId, locale, refresh });
   optsRef.current = { gameId, gameDay, fixtureId, locale, refresh };
-  const resultRef = useRef18(null);
+  const resultRef = useRef19(null);
   resultRef.current = result;
-  const refetch = useCallback14(async () => {
+  const refetch = useCallback15(async () => {
     const conv = convRef.current;
     if (!conv) return;
     const opts = optsRef.current;
@@ -6612,7 +6658,7 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
     } catch {
     }
   }, []);
-  const submit = useCallback14(async (answerJson) => {
+  const submit = useCallback15(async (answerJson) => {
     const conv = convRef.current;
     if (!conv || inFlightRef.current) return;
     inFlightRef.current = true;
@@ -6639,7 +6685,7 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
       setSubmitting(false);
     }
   }, [refetch]);
-  const hydrate = useCallback14(() => {
+  const hydrate = useCallback15(() => {
     void refetch();
   }, [refetch]);
   return { result, submitting, submit, hydrate, rawStatus };
@@ -7523,7 +7569,7 @@ function CareerPathGame({
 }
 
 // src/components/games/BeatTheGridGame.tsx
-import React, { useEffect as useEffect23, useId as useId5, useRef as useRef19, useState as useState36 } from "react";
+import React, { useEffect as useEffect23, useId as useId5, useRef as useRef20, useState as useState36 } from "react";
 
 // src/components/games/ui/OptionList.tsx
 import { jsx as jsx79 } from "react/jsx-runtime";
@@ -7614,7 +7660,7 @@ function SearchSheet({
   const s = ui.games.beatTheGrid;
   const [query, setQuery] = useState36("");
   const inputId = useId5();
-  const inputRef = useRef19(null);
+  const inputRef = useRef20(null);
   useEffect23(() => {
     inputRef.current?.focus();
   }, [row, col]);
@@ -8945,7 +8991,7 @@ function GameScreenHost({
   useEffect24(() => {
     if (conversation) hydrate();
   }, [conversation, gameId]);
-  const hydrateRef = useRef20(hydrate);
+  const hydrateRef = useRef21(hydrate);
   hydrateRef.current = hydrate;
   useEffect24(() => {
     if (!FIXTURE_GAME_IDS.has(gameId)) return;
@@ -9316,11 +9362,11 @@ function PresetSpeedDial({ expanded, showDot, strings, onToggle, onOpen, rootRef
 }
 
 // src/components/PresetTools.tsx
-import { Fragment as Fragment21, useEffect as useEffect26, useId as useId11, useRef as useRef21, useState as useState45 } from "react";
+import { Fragment as Fragment21, useEffect as useEffect26, useId as useId11, useRef as useRef22, useState as useState45 } from "react";
 import { Fragment as Fragment22, jsx as jsx95, jsxs as jsxs80 } from "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 = useRef21(null);
+  const dialogRef = useRef22(null);
   const titleId = useId11();
   useEffect26(() => {
     dialogRef.current?.focus();
@@ -9609,7 +9655,7 @@ function BuildComboTool({ grid, strings, streaming, formatKickoff, initialTotal,
 }
 
 // src/usePresetDial.ts
-import { useCallback as useCallback15, useEffect as useEffect27, useRef as useRef22, useState as useState46 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect27, useRef as useRef23, useState as useState46 } from "react";
 function sendInFlight(messages, isStreaming) {
   const last = messages[messages.length - 1];
   return isStreaming && !!last && last.role === "assistant" && !last.done && !last.isGreeting;
@@ -9624,22 +9670,22 @@ 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] = useState46(() => !sendInFlight(messages, isStreaming));
-  const fold = useCallback15(() => setExpanded(false), []);
-  const toggle = useCallback15(() => setExpanded((e) => !e), []);
+  const fold = useCallback16(() => setExpanded(false), []);
+  const toggle = useCallback16(() => setExpanded((e) => !e), []);
   const currentUserId = lastUserId(messages);
-  const userIdRef = useRef22(currentUserId);
+  const userIdRef = useRef23(currentUserId);
   useEffect27(() => {
     if (currentUserId === userIdRef.current) return;
     userIdRef.current = currentUserId;
     setExpanded(false);
   }, [currentUserId]);
-  const tabRef = useRef22(activeTab);
+  const tabRef = useRef23(activeTab);
   useEffect27(() => {
     if (activeTab === tabRef.current) return;
     tabRef.current = activeTab;
     setExpanded(false);
   }, [activeTab]);
-  const expandedRef = useRef22(expanded);
+  const expandedRef = useRef23(expanded);
   expandedRef.current = expanded;
   useEffect27(() => {
     const onEscape = (e) => {
@@ -9744,13 +9790,13 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
   const onChatTab = !monitor || monitor.activeTab === "chat";
-  const layerRef = useRef23(null);
-  const dialRef = useRef23(null);
-  const dialButtonRef = useRef23(null);
-  const inputRef = useRef23(null);
-  const limitRef = useRef23(null);
-  const typedSendRef = useRef23(false);
-  const focusAfterCloseRef = useRef23(null);
+  const layerRef = useRef24(null);
+  const dialRef = useRef24(null);
+  const dialButtonRef = useRef24(null);
+  const inputRef = useRef24(null);
+  const limitRef = useRef24(null);
+  const typedSendRef = useRef24(false);
+  const focusAfterCloseRef = useRef24(null);
   const [tool, setTool] = useState47(null);
   const [toolSeen, setToolSeen] = useState47(readToolSeen);
   const dial = usePresetDial({
@@ -9772,28 +9818,28 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     if (typedSendRef.current) limitRef.current?.focus();
     typedSendRef.current = false;
   }, [paused]);
-  const openTool = useCallback16((next) => {
+  const openTool = useCallback17((next) => {
     fold();
     markToolSeen();
     setToolSeen(true);
     setTool(next);
   }, [fold]);
-  const onPill = useCallback16((kind) => openTool(kind === "numbers" ? { kind: "numbers" } : { kind: "combo" }), [openTool]);
+  const onPill = useCallback17((kind) => openTool(kind === "numbers" ? { kind: "numbers" } : { kind: "combo" }), [openTool]);
   const toolsValue = useMemo5(
     () => presetGrid && !paused ? { openBuilder: (total, legs) => openTool({ kind: "combo", total, legs }), changeLabel: ui.presets.changeCombo } : null,
     [presetGrid, paused, openTool, ui.presets.changeCombo]
   );
-  const closeTool = useCallback16(() => {
+  const closeTool = useCallback17(() => {
     focusAfterCloseRef.current = "dial";
     setTool(null);
   }, []);
-  const sendAsk = useCallback16((ask) => {
+  const sendAsk = useCallback17((ask) => {
     focusAfterCloseRef.current = "composer";
     setTool(null);
     monitor?.setActiveTab("chat");
     send(ask.message, { displayText: ask.displayText, preset: ask.preset });
   }, [monitor, send]);
-  const formatKickoff = useCallback16((kickoffUtc) => {
+  const formatKickoff = useCallback17((kickoffUtc) => {
     const k = ui.bettingKickoff(kickoffUtc);
     return `${k.dayLabel} ${k.time}`;
   }, [ui]);
@@ -10023,6 +10069,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)); }
@@ -11112,6 +11160,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
@@ -11667,9 +11722,9 @@ function StatsWidget(props) {
     [built?.client]
   );
   const ui = useMemo6(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = useRef24(null);
-  const introDoneRef = useRef24(false);
-  const markIntroDone = useCallback17(() => {
+  const rootRef = useRef25(null);
+  const introDoneRef = useRef25(false);
+  const markIntroDone = useCallback18(() => {
     introDoneRef.current = true;
   }, []);
   const convStorageKey = `ss-w-conv:${cfg?.operatorId ?? ""}:${cfg?.userContext?.operatorUserId ?? "anon"}`;
@@ -11699,15 +11754,15 @@ function StatsWidget(props) {
   });
   const operatorUserId = cfg?.userContext?.operatorUserId;
   const anonymousUserId = cfg?.userContext?.anonymousUserId;
-  const getSchedule = useCallback17(
+  const getSchedule = useCallback18(
     (localDate, utcOffsetMinutes) => built ? built.conversation.getSchedule(localDate, utcOffsetMinutes, operatorUserId, anonymousUserId) : Promise.resolve(null),
     [built, operatorUserId, anonymousUserId]
   );
-  const postLeagueStar = useCallback17(
+  const postLeagueStar = useCallback18(
     (competitionId, starred) => built ? built.conversation.starLeague(competitionId, starred, operatorUserId, anonymousUserId) : Promise.resolve(null),
     [built, operatorUserId, anonymousUserId]
   );
-  const getStates = useCallback17(
+  const getStates = useCallback18(
     (matchIds) => built ? built.conversation.getStates(matchIds) : Promise.resolve(null),
     [built]
   );
@@ -11729,7 +11784,7 @@ function StatsWidget(props) {
   useEffect29(() => {
     setHasToday(todayHasContent);
   }, [todayHasContent]);
-  const prevLiveSnapshotRef = useRef24(monitor.snapshot);
+  const prevLiveSnapshotRef = useRef25(monitor.snapshot);
   useEffect29(() => {
     const snap = monitor.snapshot;
     if (!snap || snap === prevLiveSnapshotRef.current) return;
@@ -11766,13 +11821,13 @@ 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 = useCallback17(
+  const getPricePresets = useCallback18(
     (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 = useRef24(0);
+  const prevLiveCountRef = useRef25(0);
   useEffect29(() => {
     const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
     prevLiveCountRef.current = discovery.liveCount;