@sensiblestats/widget-react 0.73.0 → 0.74.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.74.0
+
+### Minor Changes
+
+- Set the numbers: a fifth row, "BTTS picks today", with a market dropdown (BTTS, Over 2.5, Under 2.5, Double chance, Match winner), an "N ready" pill and the round send. It shows only when the server's preset grid has a `markets` section.
+
+## 0.73.1
+
+### Patch Changes
+
+- Goal dashboard rows are compact cards: 60px tall with 8px corners, and a tile's badge shows as a price column on the right instead of a pill under the subtitle.
+
 ## 0.73.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -187,7 +187,11 @@ var STRINGS = {
       maxPriceName: "Max price",
       minPriceName: "Lowest price",
       notToday: " \xB7 not today",
-      changeCombo: "Change total or matches"
+      changeCombo: "Change total or matches",
+      marketRow: "{market} picks today",
+      marketName: "Market",
+      marketShort: (dev, market, sel) => ({ BOTH_TEAMS_TO_SCORE: "BTTS", DOUBLE_CHANCE: "Double chance", FULLTIME_RESULT: "Match winner" })[dev] ?? (dev === "GOALS_OVER_UNDER" && sel ? sel : sel ? `${market} ${sel}` : market),
+      marketMessage: (market, sel, count) => `Show me ${count} ${sel ? `${market} \u2013 ${sel}` : market} picks.`
     },
     games: {
       lang: "en",
@@ -521,7 +525,11 @@ var STRINGS = {
       maxPriceName: "En y\xFCksek oran",
       minPriceName: "En d\xFC\u015F\xFCk oran",
       notToday: " \xB7 bug\xFCn yok",
-      changeCombo: "Toplam\u0131 veya ma\xE7lar\u0131 de\u011Fi\u015Ftir"
+      changeCombo: "Toplam\u0131 veya ma\xE7lar\u0131 de\u011Fi\u015Ftir",
+      marketRow: "Bug\xFCnk\xFC {market} se\xE7imleri",
+      marketName: "Bahis t\xFCr\xFC",
+      marketShort: (dev, market, sel) => ({ BOTH_TEAMS_TO_SCORE: "KG Var", DOUBLE_CHANCE: "\xC7ifte \u015Fans", FULLTIME_RESULT: "Ma\xE7 sonucu" })[dev] ?? (dev === "GOALS_OVER_UNDER" && sel ? sel : sel ? `${market} ${sel}` : market),
+      marketMessage: (market, sel, count) => `${count} ${sel ? `${market} \u2013 ${sel}` : market} se\xE7imi g\xF6ster.`
     },
     games: {
       lang: "tr",
@@ -2977,6 +2985,16 @@ function comboAsk(cell, s) {
     preset: { kind: "combo", total: cell.total, legs: cell.legs, ...idsOf(cell.combo.legs) }
   };
 }
+function marketAsk(cell, s) {
+  return {
+    message: s.marketMessage(cell.marketLabel, cell.selectionLabel ?? null, cell.count),
+    displayText: marketDisplay(cell, s),
+    preset: { kind: "market", marketDeveloperName: cell.marketDeveloperName, ...idsOf(cell.picks) }
+  };
+}
+function marketDisplay(cell, s) {
+  return s.marketRow.replace("{market}", s.marketShort(cell.marketDeveloperName, cell.marketLabel, cell.selectionLabel ?? null));
+}
 
 // src/usePresetGrid.ts
 var GRID_MAX_AGE_MS = 6e5;
@@ -3024,7 +3042,7 @@ function usePresetGrid({ getPricePresets, isOpen, locale, now = Date.now }) {
   return grid;
 }
 function hasAnyCell(grid) {
-  return grid.singles.length > 0 || grid.singlesFrom.length > 0 || grid.combos.length > 0;
+  return grid.singles.length > 0 || grid.singlesFrom.length > 0 || grid.combos.length > 0 || grid.markets !== void 0 && grid.markets.length > 0;
 }
 
 // src/liveClock.ts
@@ -4200,11 +4218,13 @@ function HeroTile({ tile, onTap, oddsLabel }) {
     ] })
   ] });
 }
-function DashboardTile({ tile, onTap, oddsLabel = "Odds" }) {
+function DashboardTile({ tile, onTap, oddsLabel = "Odds", badgePlacement = "meta" }) {
   if (tile.emphasis === "hero") return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HeroTile, { tile, onTap, oddsLabel });
   const spanClass = tile.span === "full" ? "ss-w-dash-tile--full" : "ss-w-dash-tile--half";
   const crests = (tile.imageUrls ?? []).slice(0, MAX_CRESTS);
-  const hasMeta = Boolean(tile.badgeText) || crests.length > 0;
+  const endBadge = badgePlacement === "end" && tile.badgeText ? tile.badgeText : null;
+  const metaBadge = endBadge ? null : tile.badgeText;
+  const hasMeta = Boolean(metaBadge) || crests.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { type: "button", className: `ss-w-dash-tile ${spanClass}`, onClick: onTap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-icon", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DashboardIcon, { name: tile.icon }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ss-w-dash-tile-body", children: [
@@ -4215,12 +4235,12 @@ function DashboardTile({ tile, onTap, oddsLabel = "Odds" }) {
         // icon/chevron row -- at the half-span tile's ~180px width a nowrap badge alone
         // (~70px) left the title column at ~22px and forced character-by-character wrapping.
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ss-w-dash-tile-meta", children: [
-          tile.badgeText ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-badge", children: tile.badgeText }) : null,
+          metaBadge ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-badge", children: metaBadge }) : null,
           crests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-crests", children: crests.map((url, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-crest", style: { backgroundImage: `url(${url})` }, "aria-hidden": "true" }, `${url}-${i}`)) }) : null
         ] })
       ) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronIcon, {}) })
+    endBadge ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-value", children: endBadge }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronIcon, {}) })
   ] });
 }
 
@@ -4235,12 +4255,14 @@ function layoutClass(layout) {
   return Object.prototype.hasOwnProperty.call(LAYOUT_CLASSES, layout) ? LAYOUT_CLASSES[layout] : LAYOUT_CLASSES.goal;
 }
 function GreetingDashboard({ dashboard, onTap, oddsLabel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `ss-w-dash ${layoutClass(dashboard.layout)}`, children: [
+  const layout = layoutClass(dashboard.layout);
+  const badgePlacement = layout === LAYOUT_CLASSES.goal ? "end" : "meta";
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `ss-w-dash ${layout}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ss-w-dash-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-dash-title", children: dashboard.title }),
       dashboard.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-dash-subtitle", children: dashboard.subtitle }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ss-w-dash-grid", children: dashboard.tiles.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DashboardTile, { tile: t, onTap: () => onTap(t, i), oddsLabel }, `${t.title}-${i}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ss-w-dash-grid", children: dashboard.tiles.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DashboardTile, { tile: t, onTap: () => onTap(t, i), oddsLabel, badgePlacement }, `${t.title}-${i}`)) }),
     dashboard.footerTip ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-dash-foot", children: dashboard.footerTip }) : null
   ] });
 }
@@ -8730,6 +8752,13 @@ function NumberSelect({ current, choices: choices2, label, notToday, lockEmpty =
     }, children: choices2.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("option", { value: String(i), disabled: lockEmpty && !c.available && i !== selected, children: c.available ? c.text : `${c.text}${notToday}` }, i)) })
   ] });
 }
+function ChoiceSelect({ currentIdx, sizeLabels, optionLabels, label, onChoose }) {
+  const sizeText = sizeLabels[currentIdx] ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: "ss-w-tool-num", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "ss-w-tool-num-size", "aria-hidden": "true", children: sizeText }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("select", { className: "ss-w-tool-num-select", "aria-label": label, value: String(currentIdx), onChange: (e) => onChoose(Number(e.target.value)), children: optionLabels.map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("option", { value: String(i), children: opt }, i)) })
+  ] });
+}
 function SendButton({ label, display, disabled, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", className: "ss-w-tool-send", "aria-label": `${label}: ${display}`, disabled, onClick, children: label });
 }
@@ -8793,6 +8822,11 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
   const comboCell = findCombo(grid, total, legs);
   const bigCell = findCombo(grid, bigTotal, bigLegs);
   const announce = (display, available) => setAnnouncement(available ? display : `${display}. ${strings.unavailable}`);
+  const chooseMarket = (idx) => {
+    setMarketIdx(idx);
+    const cell = markets[idx];
+    if (cell) announce(marketDisplay(cell, strings), cell.count > 0);
+  };
   const chooseMax = (v) => {
     setMaxPrice(v);
     announce(strings.maxPriceDisplay(count, v), !!findSingles(grid.singles, v, count));
@@ -8825,6 +8859,10 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
   const minChoices = floors.map((v) => ({ value: v, text: v.toFixed(2), available: !!findSingles(grid.singlesFrom, v, count) }));
   const totalChoices = totals.map((v) => ({ value: v, text: v.toFixed(1), available: legChoices.some((n) => !!findCombo(grid, v, n)) }));
   const legChoicesFor = (t) => legChoices.map((n) => ({ value: n, text: String(n), available: !!findCombo(grid, t, n) }));
+  const markets = grid.markets ?? [];
+  const [marketIdx, setMarketIdx] = (0, import_react51.useState)(0);
+  const marketCell = markets[marketIdx] ?? null;
+  const marketLabels = markets.map((c) => strings.marketShort(c.marketDeveloperName, c.marketLabel, c.selectionLabel ?? null));
   const singlesReady = (cell) => cell ? strings.readyCount(cell.picks.length) : strings.unavailable;
   const comboReady = (cell) => cell ? strings.readyAt(cell.combo.total) : strings.unavailable;
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(PresetToolModal, { title: strings.setNumbers, closeLabel: strings.close, onClose, children: [
@@ -8884,6 +8922,19 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
         } })
       }
     ),
+    markets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      AskRow,
+      {
+        icon: "\u26BD",
+        ask: fillTemplate(strings.marketRow, {
+          market: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ChoiceSelect, { currentIdx: marketIdx, sizeLabels: marketLabels, optionLabels: marketLabels, label: strings.marketName, onChoose: chooseMarket })
+        }),
+        ready: marketCell ? strings.readyCount(marketCell.count) : null,
+        send: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RoundSend, { label: strings.send, display: marketCell ? marketDisplay(marketCell, strings) : "", disabled: !marketCell || streaming, onClick: () => {
+          if (marketCell) onSend(marketAsk(marketCell, strings));
+        } })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-vh", "aria-live": "polite", children: announcement })
   ] });
 }
@@ -9873,9 +9924,21 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
    part of that visual language rather than a plain unstyled button. */
 .ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }
 
-/* Goal: one column of pill rows. */
+/* Goal: one column of compact cards, 60px tall with the badge as a price column on the right.
+   The value ink is accent mixed toward ink (as on the hero price): plain light accent on the
+   panel is 3.9:1, under the 4.5:1 small text needs. */
 .ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }
-.ss-w-dash--goal .ss-w-dash-tile { border-radius: 999px; padding: 10px 14px; }
+.ss-w-dash--goal .ss-w-dash-tile { gap: 12px; min-height: 60px; padding: 8px 12px 8px 14px; border-radius: 8px; }
+.ss-w-dash--goal .ss-w-dash-tile:hover { background: var(--ss-w-bubble); }
+.ss-w-dash--goal .ss-w-dash-tile-icon { width: 24px; height: 24px; font-size: 20px; }
+.ss-w-dash--goal .ss-w-dash-tile-body { gap: 1px; }
+.ss-w-dash--goal .ss-w-dash-tile-title { font-size: 15px; line-height: 1.25; }
+.ss-w-dash--goal .ss-w-dash-tile-subtitle { font-size: 13px; line-height: 1.3; overflow-wrap: break-word; }
+.ss-w-dash-tile-value {
+  flex: none; margin-left: auto; max-width: 40%; text-align: right;
+  font-size: 16px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
+  color: color-mix(in srgb, var(--ss-w-accent) 70%, var(--ss-w-ink));
+}
 
 /* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets
    the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow