@sensiblestats/widget-react 0.31.0 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sensiblestats/widget-react
 
+## 0.32.0
+
+### Minor Changes
+
+- Crest images on market-odds cards and restructured Odds-tab context line with pre-match kickoff pill layout.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.28.0
+
+## 0.31.1
+
+### Patch Changes
+
+- Live monitor fixes from oleycom live testing: hide the score on not-started matches (Odds-tab context line phase guard), wrap long club names to two lines on the match card instead of truncating, and keep the context-line score/badges from wrapping on narrow screens.
+
 ## 0.31.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -118,7 +118,8 @@ var STRINGS = {
     graceNote: "Unpins on next open \xB7 or in 4 h",
     suspendedLabel: "Suspended",
     fullTimeLabel: "Full time",
-    inSlipLabel: "In slip"
+    inSlipLabel: "In slip",
+    oddsUnavailable: "Odds unavailable right now"
   },
   tr: {
     launcherLabel: "SensibleStats ile sohbet et",
@@ -185,7 +186,8 @@ var STRINGS = {
     graceNote: "Bir sonraki a\xE7\u0131l\u0131\u015Fta kald\u0131r\u0131l\u0131r \xB7 en ge\xE7 4 saat",
     suspendedLabel: "Ask\u0131da",
     fullTimeLabel: "Ma\xE7 sonu",
-    inSlipLabel: "Kuponda"
+    inSlipLabel: "Kuponda",
+    oddsUnavailable: "Oranlar \u015Fu anda kullan\u0131lam\u0131yor"
   }
 };
 function resolveLocaleStrings(locale) {
@@ -265,7 +267,8 @@ function normalizeUi(cfg) {
     graceNote: strings.graceNote,
     suspendedLabel: strings.suspendedLabel,
     fullTimeLabel: strings.fullTimeLabel,
-    inSlipLabel: strings.inSlipLabel
+    inSlipLabel: strings.inSlipLabel,
+    oddsUnavailable: strings.oddsUnavailable
   };
 }
 function toClientOptions(cfg) {
@@ -448,7 +451,9 @@ function chipFromText(text) {
 }
 function toInsightVM(insight) {
   const market = str(insight.marketLabel) ?? str(insight.marketDeveloperName) ?? "";
-  const selection = [str(insight.selectionLabel), str(insight.line)].filter(Boolean).join(" ") || void 0;
+  const selectionLabel = str(insight.selectionLabel);
+  const selectionLine = str(insight.line);
+  const selection = (selectionLabel && selectionLine && selectionLabel.includes(selectionLine) ? selectionLabel : [selectionLabel, selectionLine].filter(Boolean).join(" ")) || void 0;
   const value = insight.odds?.value;
   const odds = typeof value === "number" && Number.isFinite(value) ? value.toFixed(2) : void 0;
   const oddsValue = insight.odds?.value;
@@ -2917,18 +2922,24 @@ function MonitorMatchCard({ match, promotedPins, monitor, ui, slip }) {
 // src/components/MonitorTabs.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function ContextLine({ m, monitor, ui }) {
+  const kick = m.kickoffUtc ? ui.bettingKickoff(m.kickoffUtc) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ss-w-mk-ctx", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Crest2, { kind: "team", name: m.homeTeamName ?? void 0 }),
-    typeof m.homeScore === "number" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("b", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "ss-w-mk-ctx-side", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Crest2, { kind: "team", url: m.homeCrestUrl ?? void 0, name: m.homeTeamName ?? void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-mon-name", children: m.homeTeamName })
+    ] }),
+    m.phase === "preMatch" ? kick && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "ss-w-mon-pill", children: [
+      kick.dayLabel,
+      " ",
+      kick.time
+    ] }) : typeof m.homeScore === "number" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("b", { children: [
       m.homeScore,
       "\u2013",
       m.awayScore
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Crest2, { kind: "team", name: m.awayTeamName ?? void 0 }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "ss-w-mon-name", children: [
-      m.homeTeamName,
-      " v ",
-      m.awayTeamName
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "ss-w-mk-ctx-side", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-mon-name", children: m.awayTeamName }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Crest2, { kind: "team", url: m.awayCrestUrl ?? void 0, name: m.awayTeamName ?? void 0 })
     ] }),
     m.minuteLabel && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-mon-min", children: m.minuteLabel }),
     /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "ss-w-mk-ctx-right", children: [
@@ -2981,7 +2992,8 @@ function OddsPanel({ monitor, ui, slip }) {
         inSlipIds: monitor.inSlip
       }
     ),
-    m.history && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(OddsMovementCardList, { cards: [toOddsMovementVM(m.history)], ui })
+    m.history && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(OddsMovementCardList, { cards: [toOddsMovementVM(m.history)], ui }),
+    !m.card && !m.history && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "ss-w-mon-empty-card", children: ui.oddsUnavailable })
   ] }, m.key)) });
 }
 
@@ -3735,7 +3747,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
 .ss-w-mon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .ss-w-mon-side--away { flex-direction: row-reverse; text-align: right; }
-.ss-w-mon-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: var(--ss-w-ink); }
+/* long club names (Wolverhampton Wanderers) wrap to two lines instead of truncating mid-word */
+.ss-w-mon-name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
 .ss-w-mon-vs { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; }
 .ss-w-mon-score { display: flex; align-items: baseline; justify-content: center; font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }
 .ss-w-mon-score i { font-style: normal; color: var(--ss-w-faint); font-weight: 500; margin: 0 4px; }
@@ -3764,9 +3777,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
    and the per-market-pin wrapper card (struck price on settlement is a pure CSS hook off its
    [data-settled] attribute -- no separate class on the price element itself). */
 .ss-w-mk-ctx { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ss-w-line); }
-.ss-w-mk-ctx-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
+/* the score and the trailing badges/pin never shrink or wrap -- only the fixture name truncates */
+.ss-w-mk-ctx b { flex: none; white-space: nowrap; }
+/* the context line's fixture name stays single-line (the two-line clamp is for the match card) */
+.ss-w-mk-ctx .ss-w-mon-name { display: block; white-space: nowrap; text-overflow: ellipsis; }
+.ss-w-mk-ctx-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.ss-w-mk-ctx-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
 /* flex:1 keeps the composer pinned to the panel bottom when a tab is empty */
 .ss-w-mon-empty { flex: 1; padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }
+/* Per-pin unavailable state: the pin's context line still rendered above (score, name, unpin), but
+   the pin has neither a card nor history (compose-time rescue failed) -- a small inline note beats
+   a bare context line with nothing under it. */
+.ss-w-mon-empty-card { padding: 8px 0 2px; font-size: 12px; color: var(--ss-w-faint); }
 .ss-w-mon-inslip { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-pos); }
 .ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ss-w-line); border-radius: 12px; background: var(--ss-w-panel); }
 .ss-w-mon-oddspin[data-settled] .ss-w-mo-price,