@sensiblestats/widget-react 0.29.3 → 0.29.5

package/dist/index.js

@@ -839,7 +839,7 @@ function ChatFab({ label, greeting, popupText, onOpen, onDismissPopup, dismissLa
 }
 
 // src/components/ChatPanel.tsx
-import { useEffect as useEffect7, useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState13 } from "react";
 
 // src/components/ChatHeader.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1432,17 +1432,20 @@ function resultClass(result) {
 function FormStrip({ form }) {
   return /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-form", children: form.map((r, i) => /* @__PURE__ */ jsx17("span", { className: `ss-w-fandash-form-pill ${resultClass(r)}`, children: r }, `${r}-${i}`)) });
 }
-function FormRow({ name, form }) {
+function FormRow({ name, form, crestUrl }) {
   return /* @__PURE__ */ jsxs13("div", { className: "ss-w-fandash-formrow", children: [
-    /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-formrow-name", children: name }),
+    /* @__PURE__ */ jsxs13("span", { className: "ss-w-fandash-formrow-team", children: [
+      /* @__PURE__ */ jsx17(Crest2, { url: crestUrl ?? void 0, name, kind: "team" }),
+      /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-formrow-name", children: name })
+    ] }),
     /* @__PURE__ */ jsx17(FormStrip, { form })
   ] });
 }
-function FixtureCard({ card, onTap }) {
+function FixtureCard({ card }) {
   const { data } = card;
   const h2h = data.h2H;
   return /* @__PURE__ */ jsxs13(Fragment5, { children: [
-    /* @__PURE__ */ jsxs13("button", { type: "button", className: "ss-w-fandash-card ss-w-fandash-card--tap ss-w-fandash-fixture", onClick: () => onTap(card), children: [
+    /* @__PURE__ */ jsxs13("div", { className: "ss-w-fandash-card ss-w-fandash-fixture", children: [
       /* @__PURE__ */ jsxs13("span", { className: "ss-w-fandash-eyebrow", children: [
         card.title,
         " \xB7 ",
@@ -1460,22 +1463,18 @@ function FixtureCard({ card, onTap }) {
         ] })
       ] }),
       /* @__PURE__ */ jsxs13("div", { className: "ss-w-fandash-fixture-meta", children: [
-        /* @__PURE__ */ jsxs13("div", { className: "ss-w-fandash-fixture-metarow", children: [
-          /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-fixture-metakey", children: data.dateLabel }),
-          /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-fixture-metaval", children: data.kickoffLabel })
-        ] }),
-        data.venue ? /* @__PURE__ */ jsxs13("div", { className: "ss-w-fandash-fixture-metarow", children: [
-          /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-fixture-metakey", children: data.venueLabel }),
-          /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-fixture-metaval", children: data.venue })
+        /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-fixture-kickoff", children: data.kickoffLabel }),
+        data.venue ? /* @__PURE__ */ jsxs13("span", { className: "ss-w-fandash-fixture-venue", children: [
+          " \xB7 ",
+          data.venue
         ] }) : null
-      ] }),
-      /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-card-cta", children: card.actionLabel })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs13("div", { className: "ss-w-fandash-card ss-w-fandash-lastfive", children: [
       /* @__PURE__ */ jsx17("span", { className: "ss-w-fandash-eyebrow", children: data.formLabel }),
       /* @__PURE__ */ jsxs13("div", { className: "ss-w-fandash-fixture-form", children: [
-        /* @__PURE__ */ jsx17(FormRow, { name: data.homeName, form: data.homeForm }),
-        /* @__PURE__ */ jsx17(FormRow, { name: data.awayName, form: data.awayForm })
+        /* @__PURE__ */ jsx17(FormRow, { name: data.homeName, form: data.homeForm, crestUrl: data.homeCrestUrl }),
+        /* @__PURE__ */ jsx17(FormRow, { name: data.awayName, form: data.awayForm, crestUrl: data.awayCrestUrl })
       ] })
     ] }),
     h2h || data.fact ? /* @__PURE__ */ jsxs13("div", { className: "ss-w-fandash-card ss-w-fandash-h2h", children: [
@@ -1545,16 +1544,19 @@ function CountdownCard({ card }) {
 }
 
 // src/components/dashboard/InjuriesCard.tsx
+import { useState as useState7 } from "react";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var SHOWN = 3;
 function ColHead({ name, crestUrl }) {
   return /* @__PURE__ */ jsxs15("span", { className: "ss-w-fandash-injuries-col-head", children: [
     /* @__PURE__ */ jsx19(Crest2, { url: crestUrl ?? void 0, name, kind: "team" }),
     /* @__PURE__ */ jsx19("span", { className: "ss-w-fandash-injuries-col-head-name", children: name })
   ] });
 }
-function InjuryList({ rows, emptyLabel }) {
+function InjuryList({ rows, emptyLabel, limit }) {
   if (rows.length === 0) return /* @__PURE__ */ jsx19("span", { className: "ss-w-fandash-injuries-empty", children: emptyLabel });
-  return /* @__PURE__ */ jsx19("ul", { className: "ss-w-fandash-injury-list", children: rows.map((r, i) => /* @__PURE__ */ jsxs15("li", { className: "ss-w-fandash-injury-row", children: [
+  const shown = limit === void 0 ? rows : rows.slice(0, limit);
+  return /* @__PURE__ */ jsx19("ul", { className: "ss-w-fandash-injury-list", children: shown.map((r, i) => /* @__PURE__ */ jsxs15("li", { className: "ss-w-fandash-injury-row", children: [
     /* @__PURE__ */ jsx19("span", { className: "ss-w-fandash-injury-name", children: r.playerName }),
     /* @__PURE__ */ jsxs15("span", { className: "ss-w-fandash-injury-meta", children: [
       /* @__PURE__ */ jsx19("span", { className: "ss-w-fandash-injury-status", children: r.status }),
@@ -1563,21 +1565,36 @@ function InjuryList({ rows, emptyLabel }) {
     ] })
   ] }, `${r.playerName}-${i}`)) });
 }
-function InjuriesCard({ card }) {
+function InjuriesCard({ card, ui }) {
   const { data } = card;
+  const [expanded, setExpanded] = useState7(false);
+  const hidden = Math.max(0, data.ours.length - SHOWN) + Math.max(0, data.theirs.length - SHOWN);
+  const limit = expanded ? void 0 : SHOWN;
+  const showMore = ui?.showMore ?? ((n) => `Show ${n} more`);
+  const showLess = ui?.showLess ?? "Show less";
   return /* @__PURE__ */ jsxs15("div", { className: "ss-w-fandash-card ss-w-fandash-injuries", children: [
     card.title ? /* @__PURE__ */ jsx19("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
     /* @__PURE__ */ jsxs15("div", { className: "ss-w-fandash-injuries-cols", children: [
       /* @__PURE__ */ jsxs15("div", { className: "ss-w-fandash-injuries-col", children: [
         /* @__PURE__ */ jsx19(ColHead, { name: data.oursName, crestUrl: data.oursCrestUrl }),
-        /* @__PURE__ */ jsx19(InjuryList, { rows: data.ours, emptyLabel: data.emptyLabel })
+        /* @__PURE__ */ jsx19(InjuryList, { rows: data.ours, emptyLabel: data.emptyLabel, limit })
       ] }),
       /* @__PURE__ */ jsx19("div", { className: "ss-w-fandash-injuries-divider" }),
       /* @__PURE__ */ jsxs15("div", { className: "ss-w-fandash-injuries-col", children: [
         /* @__PURE__ */ jsx19(ColHead, { name: data.theirsName, crestUrl: data.theirsCrestUrl }),
-        /* @__PURE__ */ jsx19(InjuryList, { rows: data.theirs, emptyLabel: data.emptyLabel })
+        /* @__PURE__ */ jsx19(InjuryList, { rows: data.theirs, emptyLabel: data.emptyLabel, limit })
       ] })
-    ] })
+    ] }),
+    hidden > 0 ? /* @__PURE__ */ jsx19(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-fandash-injuries-more",
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((v) => !v),
+        children: expanded ? showLess : showMore(hidden)
+      }
+    ) : null
   ] });
 }
 
@@ -1654,7 +1671,7 @@ function LinksCard({ card }) {
 }
 
 // src/components/dashboard/PostMatchResultCard.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function initials3(name) {
   return name.trim().slice(0, 3).toUpperCase();
@@ -1664,7 +1681,7 @@ function PostMatchCrest({
   name,
   side
 }) {
-  const [failed, setFailed] = useState7(false);
+  const [failed, setFailed] = useState8(false);
   const cls = `ss-w-fandash-postmatch-crest ss-w-fandash-postmatch-crest--${side}`;
   if (url && !failed) {
     return /* @__PURE__ */ jsx25("img", { className: cls, src: url, alt: "", "aria-hidden": "true", onError: () => setFailed(true) });
@@ -1863,10 +1880,10 @@ function RestingFormCard({ card }) {
 }
 
 // src/components/dashboard/LiveScoreCard.tsx
-import { useRef as useRef3, useState as useState9 } from "react";
+import { useRef as useRef3, useState as useState10 } from "react";
 
 // src/useLiveClock.ts
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect5, useState as useState9 } from "react";
 var TICK_MS = 6e4;
 var MAX_LIVE_TICK_MINUTES = 15;
 function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
@@ -1875,7 +1892,7 @@ function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
   return minute + Math.min(Math.max(0, elapsedMinutes), MAX_LIVE_TICK_MINUTES);
 }
 function useLiveClock(minute, clockRunning, receivedAtMs) {
-  const [displayMinute, setDisplayMinute] = useState8(
+  const [displayMinute, setDisplayMinute] = useState9(
     () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
   );
   useEffect5(() => {
@@ -1895,7 +1912,7 @@ function initials5(name) {
   return name.trim().slice(0, 3).toUpperCase();
 }
 function LiveCrest({ url, name, side }) {
-  const [failed, setFailed] = useState9(false);
+  const [failed, setFailed] = useState10(false);
   const cls = `ss-w-fandash-live-crest ss-w-fandash-live-crest--${side}`;
   if (url && !failed) {
     return /* @__PURE__ */ jsx34("img", { className: cls, src: url, alt: "", "aria-hidden": "true", onError: () => setFailed(true) });
@@ -1954,9 +1971,9 @@ function LiveScoreCard({
 }
 
 // src/components/dashboard/LiveTimelineCard.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
-var SHOWN = 3;
+var SHOWN2 = 3;
 function EventIcon({ type }) {
   if (type === "goal") {
     return /* @__PURE__ */ jsx35("span", { className: "ss-w-fandash-live-tl-ico ss-w-fandash-live-tl-ico--goal", "aria-hidden": "true", children: /* @__PURE__ */ jsx35("span", { className: "ss-w-fandash-live-tl-ball" }) });
@@ -1996,12 +2013,12 @@ function EventRow({ e }) {
   ] });
 }
 function LiveTimelineCard({ card, ui }) {
-  const [expanded, setExpanded] = useState10(false);
+  const [expanded, setExpanded] = useState11(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 rest = sorted.length - SHOWN2;
+  const shown = expanded ? sorted : sorted.slice(0, SHOWN2);
   const showMore = ui?.showMore ?? ((n) => `Show ${n} more`);
   const showLess = ui?.showLess ?? "Show less";
   return /* @__PURE__ */ jsxs31("div", { className: "ss-w-fandash-card ss-w-fandash-live-timeline", children: [
@@ -2138,11 +2155,11 @@ function ClubFanDashboard({ dashboard, onTap, ui }) {
 function FanDashboardCard({ card, onTap, ui, goalEvents }) {
   switch (card.cardType) {
     case "fixture":
-      return /* @__PURE__ */ jsx38(FixtureCard, { card, onTap });
+      return /* @__PURE__ */ jsx38(FixtureCard, { card });
     case "countdown":
       return /* @__PURE__ */ jsx38(CountdownCard, { card });
     case "injuries":
-      return /* @__PURE__ */ jsx38(InjuriesCard, { card });
+      return /* @__PURE__ */ jsx38(InjuriesCard, { card, ui });
     case "reasonToBet":
       return /* @__PURE__ */ jsx38(ReasonToBetCard, { card });
     case "whereToWatch":
@@ -2285,10 +2302,10 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
 }
 
 // src/components/ChatInput.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
-  const [value, setValue] = useState11("");
+  const [value, setValue] = useState12("");
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -2311,7 +2328,7 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
 import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = useState12(false);
+  const [modal, setModal] = useState13(false);
   useEffect7(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
@@ -2738,10 +2755,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-fandash-fixture-team--away .ss-w-fandash-fixture-name { text-align: right; }
 .ss-w-fandash-fixture-vs { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }
 /* date + venue as labelled rows, so a long stadium name gets its own line to ellipsis in */
-.ss-w-fandash-fixture-meta { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--ss-w-line); padding-top: 8px; }
-.ss-w-fandash-fixture-metarow { display: flex; align-items: baseline; gap: 9px; }
-.ss-w-fandash-fixture-metakey { flex: none; width: 44px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
-.ss-w-fandash-fixture-metaval { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-fandash-fixture-meta { border-top: 1px solid var(--ss-w-line); padding-top: 10px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-fixture-kickoff { font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-fandash-fixture-venue { font-weight: 600; }
 .ss-w-fandash-fact { font-size: 12px; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 8px; }
 /* each head-to-head figure sits on its own shaded tile, so the grid gap separates wins/draws/losses */
 .ss-w-fandash-h2h .ss-w-fandash-split-cell { background: var(--ss-w-bubble); border-radius: 10px; padding: 12px 6px; }
@@ -2751,7 +2767,12 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* last-five: one row per side, team name left, form pills right */
 .ss-w-fandash-fixture-form { display: flex; flex-direction: column; gap: 5px; }
 .ss-w-fandash-formrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.ss-w-fandash-formrow-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ss-w-fandash-formrow-team .ss-w-bi-crest { width: 20px; height: 20px; }
+.ss-w-fandash-formrow-team .ss-w-bi-crest-mono { font-size: 9px; }
 .ss-w-fandash-formrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
+.ss-w-fandash-injuries-more { margin-top: 10px; 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-injuries-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
 .ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }
 .ss-w-fandash-form-pill {
   display: inline-grid; place-items: center; width: 16px; height: 16px;