@sensiblestats/widget-react 0.28.0 → 0.29.1

package/dist/index.cjs

@@ -36,7 +36,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
-var import_react13 = require("react");
+var import_react17 = require("react");
 var import_widget_sdk5 = require("@sensiblestats/widget-sdk");
 
 // src/kickoff.ts
@@ -608,7 +608,14 @@ function reducer(state, action) {
       return {
         ...state,
         messages: state.messages.map(
-          (m) => m.role === "assistant" && m.id === action.messageId && m.clubFanDashboard ? { ...m, clubFanDashboard: { ...m.clubFanDashboard, cards: action.cards } } : m
+          (m) => m.role === "assistant" && m.id === action.messageId && m.clubFanDashboard ? { ...m, clubFanDashboard: { ...m.clubFanDashboard, cards: action.cards, greeting: action.greeting ?? m.clubFanDashboard.greeting } } : m
+        )
+      };
+    case "LIVE_TRANSITION":
+      return {
+        ...state,
+        messages: state.messages.map(
+          (m) => m.role === "assistant" && m.id === action.messageId && m.clubFanDashboard ? { ...m, clubFanDashboard: action.dashboard } : m
         )
       };
   }
@@ -617,26 +624,74 @@ function reducer(state, action) {
 // src/useLiveDashboardPoll.ts
 var import_react = require("react");
 var POLL_INTERVAL_MS = 6e4;
-function findLiveMessageId(messages) {
+var LEAD_MS = 12e4;
+var GIVE_UP_MS = 30 * 6e4;
+function extractKickoffMs(dashboard) {
+  const countdown = dashboard.cards.find((c) => c.cardType === "countdown");
+  if (countdown) return countdown.data.kickoffUnix * 1e3;
+  for (const c of dashboard.cards) {
+    const d = c.data;
+    if (typeof d?.kickoffUnix === "number") return d.kickoffUnix * 1e3;
+  }
+  return null;
+}
+function findAnchor(messages) {
+  const now = Date.now();
   for (const m of messages.slice().reverse()) {
-    if (m.role === "assistant" && m.clubFanDashboard?.phase === "live") return m.id;
+    if (m.role !== "assistant" || !m.clubFanDashboard) continue;
+    const { phase } = m.clubFanDashboard;
+    if (phase === "live") return { messageId: m.id, kind: "live" };
+    if (phase === "preMatch") {
+      const kickoffMs = extractKickoffMs(m.clubFanDashboard);
+      if (kickoffMs === null) continue;
+      if (now >= kickoffMs - LEAD_MS && now <= kickoffMs + GIVE_UP_MS) {
+        return { messageId: m.id, kind: "preMatch", kickoffMs };
+      }
+    }
   }
   return null;
 }
+function findEarliestWakeupMs(messages) {
+  const now = Date.now();
+  let earliest = null;
+  for (const m of messages) {
+    if (m.role !== "assistant" || m.clubFanDashboard?.phase !== "preMatch") continue;
+    const kickoffMs = extractKickoffMs(m.clubFanDashboard);
+    if (kickoffMs === null) continue;
+    const wakeAt = kickoffMs - LEAD_MS;
+    if (wakeAt > now && (earliest === null || wakeAt < earliest)) earliest = wakeAt;
+  }
+  return earliest;
+}
 function useLiveDashboardPoll({ messages, dispatch, getLiveDashboard }) {
-  const messageId = findLiveMessageId(messages);
+  const [, forceUpdate] = (0, import_react.useReducer)((x) => x + 1, 0);
+  const anchor = findAnchor(messages);
+  const anchorRef = (0, import_react.useRef)(anchor);
+  anchorRef.current = anchor;
   const inFlightRef = (0, import_react.useRef)(false);
+  const anchorKey = anchor ? `${anchor.messageId}:${anchor.kind}` : null;
   (0, import_react.useEffect)(() => {
-    if (!messageId) return;
+    if (!anchorKey || !anchorRef.current) return;
     const tick = async () => {
       if (inFlightRef.current) return;
       inFlightRef.current = true;
       try {
         const payload = await getLiveDashboard();
-        if (payload && payload.phase === "live") {
-          dispatch({ kind: "LIVE_REFRESH", messageId, cards: payload.cards });
+        const current = anchorRef.current;
+        if (!current) return;
+        if (payload?.phase === "live") {
+          if (current.kind === "preMatch") {
+            dispatch({ kind: "LIVE_TRANSITION", messageId: current.messageId, dashboard: payload });
+            window.clearInterval(id);
+          } else {
+            dispatch({ kind: "LIVE_REFRESH", messageId: current.messageId, cards: payload.cards, greeting: payload.greeting });
+          }
         } else {
-          window.clearInterval(id);
+          if (current.kind === "live") {
+            window.clearInterval(id);
+          } else if (Date.now() > current.kickoffMs + GIVE_UP_MS) {
+            window.clearInterval(id);
+          }
         }
       } catch {
       } finally {
@@ -647,7 +702,16 @@ function useLiveDashboardPoll({ messages, dispatch, getLiveDashboard }) {
       void tick();
     }, POLL_INTERVAL_MS);
     return () => window.clearInterval(id);
-  }, [messageId, dispatch, getLiveDashboard]);
+  }, [anchorKey, dispatch, getLiveDashboard]);
+  (0, import_react.useEffect)(() => {
+    if (anchorKey !== null) return;
+    const wakeAt = findEarliestWakeupMs(messages);
+    if (wakeAt === null) return;
+    const delay = wakeAt - Date.now();
+    if (delay <= 0) return;
+    const id = window.setTimeout(forceUpdate, delay);
+    return () => window.clearTimeout(id);
+  }, [anchorKey, messages, forceUpdate]);
 }
 
 // src/useChatStream.ts
@@ -812,7 +876,7 @@ function ChatFab({ label, greeting, popupText, onOpen, onDismissPopup, dismissLa
 }
 
 // src/components/ChatPanel.tsx
-var import_react12 = require("react");
+var import_react16 = require("react");
 
 // src/components/ChatHeader.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -825,7 +889,7 @@ function ChatHeader({ onClose, closeLabel = "Close chat" }) {
 }
 
 // src/components/MessageList.tsx
-var import_react10 = require("react");
+var import_react14 = require("react");
 
 // src/components/Markdown.tsx
 var import_react_markdown = __toESM(require("react-markdown"), 1);
@@ -1755,139 +1819,352 @@ function RestingFormCard({ card }) {
   ] });
 }
 
+// src/components/dashboard/LiveScoreCard.tsx
+var import_react11 = require("react");
+
+// src/useLiveClock.ts
+var import_react10 = require("react");
+var TICK_MS = 6e4;
+var MAX_LIVE_TICK_MINUTES = 15;
+function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
+  if (!clockRunning) return minute;
+  const elapsedMinutes = Math.floor((Date.now() - receivedAtMs) / TICK_MS);
+  return minute + Math.min(Math.max(0, elapsedMinutes), MAX_LIVE_TICK_MINUTES);
+}
+function useLiveClock(minute, clockRunning, receivedAtMs) {
+  const [displayMinute, setDisplayMinute] = (0, import_react10.useState)(
+    () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
+  );
+  (0, import_react10.useEffect)(() => {
+    setDisplayMinute(computeDisplayMinute(minute, clockRunning, receivedAtMs));
+    if (!clockRunning) return;
+    const id = window.setInterval(() => {
+      setDisplayMinute(computeDisplayMinute(minute, clockRunning, receivedAtMs));
+    }, TICK_MS);
+    return () => window.clearInterval(id);
+  }, [minute, clockRunning, receivedAtMs]);
+  return displayMinute;
+}
+
 // src/components/dashboard/LiveScoreCard.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-function LiveScoreCard({ card }) {
+function initials3(name) {
+  return name.trim().slice(0, 3).toUpperCase();
+}
+function LiveCrest({ url, name, side }) {
+  const [failed, setFailed] = (0, import_react11.useState)(false);
+  const cls = `ss-w-fandash-live-crest ss-w-fandash-live-crest--${side}`;
+  if (url && !failed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: cls, src: url, alt: "", "aria-hidden": "true", onError: () => setFailed(true) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: `${cls} ss-w-fandash-live-crest--fallback`, "aria-hidden": "true", children: initials3(name) });
+}
+function scorersLine(goalEvents) {
+  if (!goalEvents || goalEvents.length === 0) return null;
+  const named = goalEvents.filter((e) => e.type === "goal" && e.player);
+  if (named.length === 0) return null;
+  return named.slice().sort((a, b) => a.minute - b.minute).map((e) => `${e.player} ${e.minuteLabel}`).join(", ");
+}
+function LiveScoreCard({
+  card,
+  goalEvents
+}) {
   const { data } = card;
+  const seedKey = `${data.minute}:${data.homeScore}:${data.awayScore}`;
+  const seedRef = (0, import_react11.useRef)(null);
+  if (!seedRef.current || seedRef.current.key !== seedKey) {
+    seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
+  }
+  const displayMinute = useLiveClock(data.minute, data.clockRunning, seedRef.current.receivedAtMs);
+  const minuteSuffix = data.minuteLabel.replace(/^\d+/, "");
+  const scorers = scorersLine(goalEvents);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-live-score", children: [
     card.title ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-postmatch-scoreboard", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-postmatch-team", children: data.homeName }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-postmatch-score", children: data.homeScore }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-postmatch-sep", children: "\u2013" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-postmatch-score", children: data.awayScore }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-postmatch-team ss-w-fandash-postmatch-team--away", children: data.awayName })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-live-meta", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-minute", children: data.minuteLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-status", children: data.statusLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-live-top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "ss-w-fandash-live-pill", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-dot", "aria-hidden": "true" }),
+        data.statusLabel
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-minute", children: `${displayMinute}${minuteSuffix}` }),
       data.competition ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-competition", children: data.competition }) : null
-    ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-live-main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-live-side ss-w-fandash-live-side--home", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LiveCrest, { url: data.homeCrestUrl, name: data.homeName, side: "home" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-team-name", children: data.homeName })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-live-score-main", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-score-value", children: data.homeScore }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-score-sep", children: "\u2013" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-score-value", children: data.awayScore })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-live-side ss-w-fandash-live-side--away", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LiveCrest, { url: data.awayCrestUrl, name: data.awayName, side: "away" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-team-name", children: data.awayName })
+      ] })
+    ] }),
+    scorers ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ss-w-fandash-live-scorers", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ss-w-fandash-live-scorers-icon", "aria-hidden": "true", children: "\u26BD" }),
+      scorers
+    ] }) : null
   ] });
 }
 
 // src/components/dashboard/LiveTimelineCard.tsx
+var import_react12 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-function LiveTimelineCard({ card }) {
+var SHOWN = 3;
+function EventIcon({ type }) {
+  if (type === "goal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-ico ss-w-fandash-live-tl-ico--goal", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-ball" }) });
+  }
+  if (type === "yellow" || type === "red") {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-ico", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `ss-w-fandash-live-tl-card ss-w-fandash-live-tl-card--${type}` }) });
+  }
+  if (type === "sub") {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-ico", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-subarrows", children: "\u21C5" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-ico", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-dot" }) });
+}
+function EventLabel({ e }) {
+  if (e.type === "sub") {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ss-w-fandash-live-tl-who", children: [
+      e.player ?? e.text,
+      e.playerOff ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ss-w-fandash-live-tl-off", children: [
+        " for ",
+        e.playerOff
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-who", children: e.player ?? e.text });
+}
+function EventRow({ e }) {
+  const cls = [
+    "ss-w-fandash-live-tl-ev",
+    e.side === "home" ? "ss-w-fandash-live-tl-ev--home" : "ss-w-fandash-live-tl-ev--away",
+    e.type === "goal" ? "ss-w-fandash-live-tl-ev--goal" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cls, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ss-w-fandash-live-tl-txt", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(EventLabel, { e }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(EventIcon, { type: e.type })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-badge", children: e.minuteLabel })
+  ] });
+}
+function LiveTimelineCard({ card, ui }) {
+  const [expanded, setExpanded] = (0, import_react12.useState)(false);
+  const events = card.data.events;
+  if (!events || events.length === 0) return null;
+  const sorted = [...events].sort((a, b) => b.minute - a.minute);
+  const rest = sorted.length - SHOWN;
+  const shown = expanded ? sorted : sorted.slice(0, SHOWN);
+  const showMore = ui?.showMore ?? ((n) => `Show ${n} more`);
+  const showLess = ui?.showLess ?? "Show less";
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-live-timeline", children: [
     card.title ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "ss-w-fandash-live-event-list", children: card.data.events.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: e.scoredByClub ? "ss-w-fandash-live-event ss-w-fandash-live-event--club" : "ss-w-fandash-live-event", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-event-minute", children: e.minuteLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-event-text", children: e.text })
-    ] }, `${e.minuteLabel}-${i}`)) })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ss-w-fandash-live-tl", children: shown.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(EventRow, { e }, `${e.minute}-${e.side}-${e.type}-${i}`)) }),
+    rest > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-fandash-live-tl-more",
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((v) => !v),
+        children: expanded ? showLess : showMore(rest)
+      }
+    ) : null
   ] });
 }
 
-// src/components/dashboard/LiveStatsCard.tsx
+// src/components/dashboard/MomentumWave.tsx
+var import_react13 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
+var WIDTH = 270;
+var HEIGHT = 56;
+var BASELINE = HEIGHT / 2;
+var SCALE = 0.26;
+function buildPaths(points) {
+  const lastIndex = points.length - 1;
+  const px = (i) => lastIndex === 0 ? 0 : i / lastIndex * WIDTH;
+  const py = (v) => BASELINE - v * SCALE;
+  const linePts = points.map((p, i) => `${px(i).toFixed(1)},${py(p.value).toFixed(1)}`);
+  const area = `M0,${BASELINE} L${linePts.join(" L")} L${WIDTH},${BASELINE} Z`;
+  const line = `M${linePts.join(" L")}`;
+  const lastValue = points[lastIndex]?.value ?? 0;
+  return { area, line, lastX: px(lastIndex).toFixed(1), lastY: py(lastValue).toFixed(1) };
+}
+function MomentumWave({
+  points,
+  caption,
+  clubIsHome
+}) {
+  if (points.length === 0) return null;
+  const { area, line, lastX, lastY } = buildPaths(points);
+  const clipId = (0, import_react13.useId)();
+  const topClipId = `${clipId}-top`;
+  const bottomClipId = `${clipId}-bottom`;
+  const topClass = clubIsHome ? "ss-w-fandash-live-mom-home" : "ss-w-fandash-live-mom-away";
+  const bottomClass = clubIsHome ? "ss-w-fandash-live-mom-away" : "ss-w-fandash-live-mom-home";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ss-w-fandash-live-mom", children: [
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-mom-caption", children: caption }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      "svg",
+      {
+        className: "ss-w-fandash-live-mom-svg",
+        viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+        preserveAspectRatio: "none",
+        role: "img",
+        "aria-label": caption ?? "Momentum",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("clipPath", { id: topClipId, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("rect", { x: 0, y: 0, width: WIDTH, height: BASELINE }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("clipPath", { id: bottomClipId, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("rect", { x: 0, y: BASELINE, width: WIDTH, height: HEIGHT - BASELINE }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: area, className: topClass, clipPath: `url(#${topClipId})` }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: area, className: bottomClass, clipPath: `url(#${bottomClipId})` }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: 0, y1: BASELINE, x2: WIDTH, y2: BASELINE, className: "ss-w-fandash-live-mom-base" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: line, className: "ss-w-fandash-live-mom-line", vectorEffect: "non-scaling-stroke" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: lastX, cy: lastY, r: 3.2, className: "ss-w-fandash-live-mom-now", vectorEffect: "non-scaling-stroke" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/dashboard/LiveStatsCard.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function splitWidths(homeNum, awayNum) {
+  const total = homeNum + awayNum;
+  if (total <= 0) return { home: "50%", away: "50%" };
+  const homePct = Math.round(homeNum / total * 1e3) / 10;
+  return { home: `${homePct}%`, away: `${Math.round((100 - homePct) * 10) / 10}%` };
+}
 function LiveStatsCard({ card }) {
   const { data } = card;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-live-stats", children: [
-    card.title ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ss-w-fandash-live-stat-rows", children: data.rows.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ss-w-fandash-live-stat-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-stat-value", children: r.clubValue }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-stat-label", children: r.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-stat-value", children: r.oppValue })
-    ] }, `${r.label}-${i}`)) }),
-    data.momentumLabel ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-momentum", children: data.momentumLabel }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-live-stats", children: [
+    card.title ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ss-w-fandash-live-stat-rows", children: data.rows.map((r, i) => {
+      const homeValue = data.clubIsHome ? r.clubValue : r.oppValue;
+      const awayValue = data.clubIsHome ? r.oppValue : r.clubValue;
+      const homeNum = data.clubIsHome ? r.clubNum : r.oppNum;
+      const awayNum = data.clubIsHome ? r.oppNum : r.clubNum;
+      const { home, away } = splitWidths(homeNum, awayNum);
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-live-stat", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-live-stat-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-live-stat-value ss-w-fandash-live-stat-value--home", children: homeValue }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-live-stat-label", children: r.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-live-stat-value ss-w-fandash-live-stat-value--away", children: awayValue })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-live-bar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-live-bar-home", style: { width: home } }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-live-bar-away", style: { width: away } })
+        ] })
+      ] }, `${r.label}-${i}`);
+    }) }),
+    data.momentum.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MomentumWave, { points: data.momentum, caption: data.momentumLabel, clubIsHome: data.clubIsHome }) : data.momentumLabel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-live-momentum", children: data.momentumLabel }) : null,
+    data.rows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-live-legend", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "ss-w-fandash-live-legend-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { className: "ss-w-fandash-live-legend-swatch ss-w-fandash-live-legend-swatch--home" }),
+        data.homeName
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "ss-w-fandash-live-legend-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { className: "ss-w-fandash-live-legend-swatch ss-w-fandash-live-legend-swatch--away" }),
+        data.awayName
+      ] })
+    ] }) : null
   ] });
 }
 
 // src/components/dashboard/ClubFanDashboard.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function ClubFanDashboard({ dashboard, onTap, ui }) {
   const orderedCards = [
     ...dashboard.cards.filter((c) => c.cardType === "countdown"),
     ...dashboard.cards.filter((c) => c.cardType !== "countdown")
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash", children: [
-    dashboard.greeting ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-greeting", children: dashboard.greeting }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ss-w-fandash-cards", children: orderedCards.map((card, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FanDashboardCard, { card, onTap, ui }, `${card.cardType}-${i}`)) })
+  const timelineCard = dashboard.cards.find(
+    (c) => c.cardType === "liveTimeline"
+  );
+  const goalEvents = timelineCard?.data.events.filter((e) => e.type === "goal");
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ss-w-fandash", children: [
+    dashboard.greeting ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ss-w-fandash-greeting", children: dashboard.greeting }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ss-w-fandash-cards", children: orderedCards.map((card, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FanDashboardCard, { card, onTap, ui, goalEvents }, `${card.cardType}-${i}`)) })
   ] });
 }
-function FanDashboardCard({ card, onTap, ui }) {
+function FanDashboardCard({ card, onTap, ui, goalEvents }) {
   switch (card.cardType) {
     case "fixture":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FixtureCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FixtureCard, { card, onTap });
     case "countdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CountdownCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CountdownCard, { card });
     case "injuries":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(InjuriesCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(InjuriesCard, { card });
     case "reasonToBet":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ReasonToBetCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ReasonToBetCard, { card });
     case "whereToWatch":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(WhereToWatchCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(WhereToWatchCard, { card });
     case "congestedWeek":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CongestedWeekCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CongestedWeekCard, { card, onTap });
     case "transfers":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TransfersCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TransfersCard, { card });
     case "links":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LinksCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LinksCard, { card });
     case "postMatchResult":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PostMatchResultCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PostMatchResultCard, { card });
     case "postMatchGoals":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PostMatchGoalsCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PostMatchGoalsCard, { card, onTap });
     case "postMatchStats":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PostMatchStatsCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PostMatchStatsCard, { card, onTap });
     case "postMatchTopPerformer":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PostMatchTopPerformerCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PostMatchTopPerformerCard, { card, onTap });
     case "postMatchNext":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PostMatchNextCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PostMatchNextCard, { card });
     case "restingNext":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RestingNextCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RestingNextCard, { card, onTap });
     case "restingStandings":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RestingStandingsCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RestingStandingsCard, { card, onTap });
     case "restingSeason":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RestingSeasonCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RestingSeasonCard, { card, onTap });
     case "restingForm":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RestingFormCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RestingFormCard, { card });
     case "liveScore":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LiveScoreCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LiveScoreCard, { card, goalEvents });
     case "liveTimeline":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LiveTimelineCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LiveTimelineCard, { card, ui });
     case "liveStats":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LiveStatsCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LiveStatsCard, { card });
     default:
       return null;
   }
 }
 
 // src/components/ChatMessage.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function ChatMessage({ message, disabled, onAct, onTap, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ss-w-msg ss-w-user", "data-msg-id": message.id, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "ss-w-msg ss-w-user", "data-msg-id": message.id, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
   }
   const onFanDashboardTap = (card) => {
     onAct({ message: card.actionLabel, actionRef: card.actionRef, label: card.actionLabel || card.title || "" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ss-w-msg ss-w-bot", "data-msg-id": message.id, children: [
-    message.text && !message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Markdown, { text: message.text }) : null,
-    message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(GreetingDashboard, { dashboard: message.greetingDashboard, onTap }) : null,
-    message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ClubFanDashboard, { dashboard: message.clubFanDashboard, onTap: onFanDashboardTap, ui }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ss-w-msg ss-w-bot", "data-msg-id": message.id, children: [
+    message.text && !message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Markdown, { text: message.text }) : null,
+    message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GreetingDashboard, { dashboard: message.greetingDashboard, onTap }) : null,
+    message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ClubFanDashboard, { dashboard: message.clubFanDashboard, onTap: onFanDashboardTap, ui }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
 
 // src/components/IntentChips.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
 // src/scroll.ts
@@ -1897,7 +2174,7 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function turnAnchor(messages) {
   const last = messages[messages.length - 1];
   if (!last || last.role !== "assistant") return null;
@@ -1906,11 +2183,11 @@ function turnAnchor(messages) {
 }
 function MessageList({ controller, ui, slip, onDashboardTap }) {
   const { state, send } = controller;
-  const listRef = (0, import_react10.useRef)(null);
-  const endRef = (0, import_react10.useRef)(null);
-  const pinnedRef = (0, import_react10.useRef)(true);
-  const anchoredTurnRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const listRef = (0, import_react14.useRef)(null);
+  const endRef = (0, import_react14.useRef)(null);
+  const pinnedRef = (0, import_react14.useRef)(true);
+  const anchoredTurnRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
     const anchor = turnAnchor(state.messages);
     const list = listRef.current;
     if (anchor && anchor.turnId !== anchoredTurnRef.current) {
@@ -1925,7 +2202,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
   }, [state.messages, state.status, state.isStreaming]);
   const hasUserMessage = state.messages.some((m) => m.role === "user");
   const hasDashboard = state.messages.some((m) => m.role === "assistant" && (m.greetingDashboard || m.clubFanDashboard));
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       className: "ss-w-list",
@@ -1935,7 +2212,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           ChatMessage,
           {
             message: m,
@@ -1950,25 +2227,25 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        state.status ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
-        !hasUserMessage && !hasDashboard ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref: endRef, className: "ss-w-turn-spacer", "aria-hidden": "true" })
+        !hasUserMessage && !hasDashboard ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref: endRef, className: "ss-w-turn-spacer", "aria-hidden": "true" })
       ]
     }
   );
 }
 
 // src/components/ChatInput.tsx
-var import_react11 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
-  const [value, setValue] = (0, import_react11.useState)("");
+  const [value, setValue] = (0, import_react15.useState)("");
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -1981,18 +2258,18 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SendIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ss-w-input", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
+    streaming ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SendIcon, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  const [modal, setModal] = (0, import_react16.useState)(false);
+  (0, import_react16.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -2005,17 +2282,17 @@ function useIsModal() {
 function ChatPanel({ controller, ui, slip, onDashboardTap }) {
   const { state, close, stop, send } = controller;
   const isModal = useIsModal();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MessageList, { controller, ui, slip, onDashboardTap }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MessageList, { controller, ui, slip, onDashboardTap }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -2028,6 +2305,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
   --ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;
   --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
   --ss-w-pos: #1aa563; --ss-w-neg: #e0524b;
+  --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;
   --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);
@@ -2038,6 +2316,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
     --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
     --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
     --ss-w-pos: #37c891; --ss-w-neg: #f0655d;
+    --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;
   }
 }
 .ss-w-root[data-ss-w-theme="dark"] {
@@ -2045,11 +2324,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
   --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
   --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
   --ss-w-pos: #37c891; --ss-w-neg: #f0655d;
+  --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;
 }
 .ss-w-root[data-ss-w-theme="light"] {
   --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
   --ss-w-ink: #14181d; --ss-w-faint: #6b7580;
   --ss-w-line: #e4e8ec; --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
+  --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;
 }
 
 /* launcher */
@@ -2538,34 +2819,90 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* resting form: reuses the fixture last-five pill classes (ss-w-fandash-form / -form-pill) */
 .ss-w-fandash-resting-form .ss-w-fandash-form { margin-top: 2px; }
 
-/* live score: reuses the post-match scoreboard classes for the team/score row, with its own
-   meta row -- minute called out in the accent color, status and competition beside it */
-.ss-w-fandash-live-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--ss-w-faint); }
-.ss-w-fandash-live-minute { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); }
-.ss-w-fandash-live-status { font-weight: 650; color: var(--ss-w-ink); }
-.ss-w-fandash-live-competition { color: var(--ss-w-faint); }
-
-/* live timeline: a plain event list, the club's own events picked out in the accent color --
-   same mechanism as the post-match goal list, plus a minute column */
-.ss-w-fandash-live-event-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
-.ss-w-fandash-live-event { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--ss-w-faint); }
-.ss-w-fandash-live-event--club { color: var(--ss-w-ink); font-weight: 650; }
-.ss-w-fandash-live-event-minute { flex: none; font-variant-numeric: tabular-nums; color: var(--ss-w-faint); }
-.ss-w-fandash-live-event--club .ss-w-fandash-live-event-minute { color: var(--ss-w-accent); }
-.ss-w-fandash-live-event-text { min-width: 0; }
-
-/* live stats: club value / stat label / opponent value, same 3-column layout as post-match
-   stats, plus an optional momentum line underneath */
-.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 5px; }
-.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
-.ss-w-fandash-live-stat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
-.ss-w-fandash-live-stat-row .ss-w-fandash-live-stat-value:last-child { text-align: right; }
-.ss-w-fandash-live-stat-label { font-size: 10.5px; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }
+/* live score: pulsing Live pill, crests (real image or a coloured initials fallback), a big
+   tabular score, and an optional scorers line. Also where the shared home/away venue-colour
+   tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats
+   cards reuse them. */
+.ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }
+.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ss-w-neg); border-radius: 6px; padding: 3px 8px; }
+.ss-w-fandash-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ss-w-fandash-live-pulse 1.3s ease-in-out infinite; }
+@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
+@media (prefers-reduced-motion: reduce) {
+  .ss-w-fandash-live-dot { animation: none; }
+}
+.ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
+.ss-w-fandash-live-competition { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
+.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }
+.ss-w-fandash-live-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
+.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }
+.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }
+.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }
+.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }
+.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
+.ss-w-fandash-live-scorers { margin-top: 12px; display: flex; justify-content: flex-end; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }
+
+/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on
+   its own side (home left, away right), most-recent 3 shown with a "See more" toggle for the
+   rest. A 3-column grid (txt | badge | txt) per row; the spine itself is a ::before on the list. */
+.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }
+.ss-w-fandash-live-tl::before { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; background: var(--ss-w-line); transform: translateX(-1px); }
+.ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }
+.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
+.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }
+.ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }
+.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }
+.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }
+.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width: 29px; height: 19px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-variant-numeric: tabular-nums; z-index: 1; }
+.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }
+.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }
+.ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }
+.ss-w-fandash-live-tl-ball { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }
+.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }
+.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }
+.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }
+.ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }
+.ss-w-fandash-live-tl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ss-w-faint); }
+.ss-w-fandash-live-tl-more { margin-top: 4px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }
+.ss-w-fandash-live-tl-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
+
+/* live stats: club value / stat label / opponent value, each row backed by a home/away split
+   bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.
+   No side signal reaches this card, so the club is always the home token and the opponent is
+   always the away token -- see LiveStatsCard.tsx. */
+.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }
+.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }
+.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
+.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
+.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }
+.ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }
+.ss-w-fandash-live-stat-label { font-size: 10.5px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
+.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
+.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }
+.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
+
 .ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }
+.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }
+.ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }
+.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }
+.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }
+.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }
+.ss-w-fandash-live-mom-base { stroke: var(--ss-w-line); stroke-width: 1; stroke-dasharray: 3 3; }
+.ss-w-fandash-live-mom-now { fill: var(--ss-w-panel); stroke: var(--ss-w-ink); stroke-width: 1.5; }
+
+.ss-w-fandash-live-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-fandash-live-legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.ss-w-fandash-live-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
+.ss-w-fandash-live-legend-swatch--home { background: var(--ss-w-home); }
+.ss-w-fandash-live-legend-swatch--away { background: var(--ss-w-away); }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -2590,11 +2927,11 @@ function injectStyles(root) {
 function StatsWidget(props) {
   const injectedClient = "client" in props ? props.client : void 0;
   const cfg = props.config;
-  const built = (0, import_react13.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
-  const ui = (0, import_react13.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = (0, import_react13.useRef)(null);
+  const built = (0, import_react17.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
+  const ui = (0, import_react17.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
+  const rootRef = (0, import_react17.useRef)(null);
   const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0);
-  const slip = (0, import_react13.useMemo)(
+  const slip = (0, import_react17.useMemo)(
     () => ({
       onAddToSlip: props.config?.onAddToSlip,
       conversationId: controller.state.conversationId ?? void 0,
@@ -2607,18 +2944,18 @@ function StatsWidget(props) {
     }),
     [props.config?.onAddToSlip, controller.state.conversationId, built]
   );
-  const onDashboardTap = (0, import_react13.useMemo)(
+  const onDashboardTap = (0, import_react17.useMemo)(
     () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input)) : void 0,
     [built]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChatPanel, { controller, ui, slip, onDashboardTap }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChatPanel, { controller, ui, slip, onDashboardTap }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     ChatFab,
     {
       label: ui.launcherLabel,