@sensiblestats/widget-react 0.37.1 → 0.37.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.37.3
+
+### Patch Changes
+
+- Odds tab: show a single market-odds card per pin instead of a card-inside-a-card. The fixture/date is no longer duplicated — each pinned market renders one betting card (competition, fixture, market, odds) with the unpin in its own header, plus a slim live strip (score, minute, suspended/settled) shown only for in-play markets and hidden for pre-match. The unpin threads the exact stored pin key so it always removes the right pin.
+
+## 0.37.2
+
+### Patch Changes
+
+- Match odds accordion: add a per-row market pin. Each accordion market row now shows the PinToggle on the right of its header (visible collapsed or expanded); tapping pins that market ({kind:'market', matchId, marketDeveloperName}) to the Odds tab, mirroring the pin on chat betting cards. The row header splits into an expand button + the pin button so the two actions stay independent.
+
 ## 0.37.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -1801,7 +1801,7 @@ function OddsRow({ vm, row, ui, slip, inSlipIds }) {
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, slip, ui })
   ] });
 }
-function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader }) {
+function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }) {
   const [open, setOpen] = (0, import_react12.useState)(false);
   const kickoff = vm.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(vm.kickoffUtc) : void 0;
   const hasNamedTeams = !!vm.homeTeamName && !!vm.awayTeamName;
@@ -1829,7 +1829,7 @@ function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader }) {
             {
               ui,
               monitor,
-              pin: { kind: "market", matchId: vm.matchId, marketDeveloperName: vm.marketDeveloperName, line: vm.mainLine }
+              pin: pinRef ?? { kind: "market", matchId: vm.matchId, marketDeveloperName: vm.marketDeveloperName, line: vm.mainLine }
             }
           ) : null
         ] })
@@ -1857,9 +1857,9 @@ function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader }) {
     vm.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "ss-w-bi-disc", children: vm.disclaimer }) : null
   ] });
 }
-function MarketOddsCardList({ cards, ui, slip, monitor, inSlipIds, hideHeader }) {
+function MarketOddsCardList({ cards, ui, slip, monitor, inSlipIds, hideHeader, pinRef }) {
   if (!cards || cards.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mocards", children: cards.map((vm) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarketOddsCard, { vm, ui, slip, monitor, inSlipIds, hideHeader }, vm.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mocards", children: cards.map((vm) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarketOddsCard, { vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }, vm.id)) });
 }
 
 // src/components/OddsMovementCard.tsx
@@ -2980,20 +2980,31 @@ function MarketAccordion({ match, monitor, ui, slip }) {
     const key = `${match.matchId}:${m.marketDeveloperName}`;
     const entry = monitor.marketOdds[key];
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: isOpen ? "ss-w-acc-row ss-w-acc-row-open" : "ss-w-acc-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: "ss-w-acc-head",
-          onClick: () => monitor.toggleMarket(match.matchId, m.marketDeveloperName),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-chevron", children: isOpen ? "\u25BE" : "\u25B8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-label", children: m.marketLabel }),
-            m.hasInsight && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-badge", children: "\u2605" }),
-            m.suspended && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-susp", children: ui.accordionSuspended })
-          ]
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ss-w-acc-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "ss-w-acc-toggle",
+            "aria-expanded": isOpen,
+            onClick: () => monitor.toggleMarket(match.matchId, m.marketDeveloperName),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-chevron", children: isOpen ? "\u25BE" : "\u25B8" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-label", children: m.marketLabel }),
+              m.hasInsight && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-badge", children: "\u2605" }),
+              m.suspended && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-susp", children: ui.accordionSuspended })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          PinToggle,
+          {
+            ui,
+            monitor,
+            pin: { kind: "market", matchId: match.matchId, marketDeveloperName: m.marketDeveloperName }
+          }
+        )
+      ] }),
       isOpen && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ss-w-acc-panel", children: [
         entry?.error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
@@ -3133,36 +3144,24 @@ function MonitorMatchCard({ match, promotedPins, monitor, ui, slip }) {
 
 // src/components/MonitorTabs.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-function ContextLine({ m, monitor, ui }) {
-  const kick = m.kickoffUtc ? ui.bettingKickoff(m.kickoffUtc) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ss-w-mk-ctx", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "ss-w-mk-ctx-side", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Crest2, { kind: "team", url: m.homeCrestUrl ?? void 0, name: m.homeTeamName ?? void 0 }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-name", children: m.homeTeamName })
-    ] }),
-    m.phase === "preMatch" ? kick && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "ss-w-mon-pill", children: [
-      kick.dayLabel,
+function OddsLiveStrip({ m, ui }) {
+  const showScore = m.phase !== "preMatch" && typeof m.homeScore === "number";
+  const stale = m.status === "stale";
+  if (!showScore && !m.minuteLabel && !(m.isSuspended && !m.isSettled) && !m.isSettled && !stale) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ss-w-mk-live", children: [
+    showScore && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("b", { className: "ss-w-mk-live-score", children: [
+      m.homeTeamName,
       " ",
-      kick.time
-    ] }) : typeof m.homeScore === "number" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("b", { children: [
       m.homeScore,
       "\u2013",
-      m.awayScore
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "ss-w-mk-ctx-side", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-name", children: m.awayTeamName }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Crest2, { kind: "team", url: m.awayCrestUrl ?? void 0, name: m.awayTeamName ?? void 0 })
+      m.awayScore,
+      " ",
+      m.awayTeamName
     ] }),
     m.minuteLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-min", children: m.minuteLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "ss-w-mk-ctx-right", children: [
-      m.isSuspended && !m.isSettled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-susp", children: ui.suspendedLabel }),
-      m.isSettled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-pill", children: ui.fullTimeLabel }),
-      m.status === "stale" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-asof", children: ui.asOf(new Date(m.asOfUtc).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })) }),
-      (() => {
-        const pin = monitor.pins.find((p) => p.key === m.key);
-        return pin ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PinToggle, { ui, monitor, pin }) : null;
-      })()
-    ] })
+    m.isSuspended && !m.isSettled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-susp", children: ui.suspendedLabel }),
+    m.isSettled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-pill", children: ui.fullTimeLabel }),
+    stale && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-asof", children: ui.asOf(new Date(m.asOfUtc).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })) })
   ] });
 }
 function MatchesPanel({ monitor, ui, slip }) {
@@ -3195,20 +3194,25 @@ function withSinceViewMovement(vm, prev) {
 function OddsPanel({ monitor, ui, slip }) {
   const markets = (monitor.snapshot?.markets ?? []).filter((m) => monitor.pins.some((p) => p.key === m.key));
   if (markets.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-empty", children: ui.emptyOddsTab });
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-list", children: markets.map((m) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ss-w-mon-oddspin", "data-settled": m.isSettled || void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ContextLine, { m, monitor, ui }),
-    m.card && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      MarketOddsCardList,
-      {
-        cards: [withSinceViewMovement(toMarketOddsVM(m.card), monitor.lastViewedPrices[m.key])],
-        ui,
-        slip,
-        inSlipIds: monitor.inSlip
-      }
-    ),
-    m.history && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OddsMovementCardList, { cards: [toOddsMovementVM(m.history)], ui }),
-    !m.card && !m.history && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-empty-card", children: ui.oddsUnavailable })
-  ] }, m.key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-list", children: markets.map((m) => {
+    const pin = monitor.pins.find((p) => p.key === m.key);
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ss-w-mon-oddspin", "data-settled": m.isSettled || void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OddsLiveStrip, { m, ui }),
+      m.card && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        MarketOddsCardList,
+        {
+          cards: [withSinceViewMovement(toMarketOddsVM(m.card), monitor.lastViewedPrices[m.key])],
+          ui,
+          slip,
+          monitor,
+          pinRef: pin ?? void 0,
+          inSlipIds: monitor.inSlip
+        }
+      ),
+      m.history && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OddsMovementCardList, { cards: [toOddsMovementVM(m.history)], ui }),
+      !m.card && !m.history && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-empty-card", children: ui.oddsUnavailable })
+    ] }, m.key);
+  }) });
 }
 
 // src/components/ChatPanel.tsx
@@ -4048,7 +4052,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
    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); }
+/* Odds-tab item is bare: the visible card is the market-odds card itself (no outer wrapper card),
+   with an optional slim live strip above it. */
+.ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-mk-live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 2px; font-size: 11.5px; color: var(--ss-w-faint); }
+.ss-w-mk-live-score { color: var(--ss-w-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
 .ss-w-mon-oddspin[data-settled] .ss-w-mo-price,
 .ss-w-mon-oddspin[data-settled] .ss-w-mon-price { text-decoration: line-through; color: var(--ss-w-faint); }
 
@@ -4058,11 +4066,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mon-item { display: flex; flex-direction: column; gap: 10px; }
 .ss-w-acc { display: flex; flex-direction: column; gap: 6px; }
 .ss-w-acc-row { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); overflow: hidden; }
-.ss-w-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); }
-.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; }
-.ss-w-acc-label { font-size: 12.5px; font-weight: 600; }
-.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); }
-.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); }
+/* Row header: expand toggle (flex:1) + the market PinToggle as a sibling (no nested buttons). */
+.ss-w-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 11px; }
+.ss-w-acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); padding: 5px 0; }
+.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; flex: none; }
+.ss-w-acc-label { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); flex: none; }
+.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); flex: none; }
 .ss-w-acc-panel { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 8px; }
 .ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }
 .ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }