@sensiblestats/widget-react 0.30.0 → 0.31.1

package/dist/styles.css

@@ -61,7 +61,10 @@
 .ss-w-close { margin-left: auto; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
 
 /* messages */
-.ss-w-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }
+/* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --
+   same visual rhythm as the chat message list -- but gets its own class so it isn't the same DOM
+   landmark as the chat list when both exist in the panel at once (Task 16 fix round, M4). */
+.ss-w-list, .ss-w-mon-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }
 /* Transient bottom spacer: reserves a viewport of room below a new turn so its
    top can be scrolled into view while the reply is still streaming in. Height is
    set imperatively and flex must not shrink it away. */
@@ -177,8 +180,6 @@
 .ss-w-bi-odds b { font-size: 20px; font-family: ui-monospace, monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.05; }
 .ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }
 .ss-w-bi-action-row .ss-w-slip { flex: none; }
-/* let the slip toast size to its own text and anchor to the card's right edge, not the button width */
-.ss-w-bi-action-row .ss-w-toast { left: auto; right: 0; width: max-content; max-width: 210px; white-space: normal; }
 
 /* row 3: bar-chart glyph + reasoning prose + stats-expander chevron, in a subtle strip */
 .ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }
@@ -285,10 +286,21 @@
 .ss-w-slip { position: relative; display: flex; }
 .ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: 1px solid var(--ss-w-cta); border-radius: 14px; padding: 5px 12px; cursor: pointer; }
 .ss-w-slip-btn:disabled { opacity: .6; cursor: default; background: var(--ss-w-bubble); color: var(--ss-w-faint); border-color: var(--ss-w-line); }
-.ss-w-toast { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1; max-width: 100%; font-size: 11px; font-weight: 560; border-radius: 10px; padding: 5px 10px; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
+/* Anchored to the RIGHT of its (narrow) button wrapper and sized by content, growing leftward
+   into the card -- inheriting the wrapper's width squeezes the text to one character per line.
+   Every toast site (slip buttons, pin toggles) sits at the right edge of its row. */
+.ss-w-toast { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1; width: max-content; max-width: 210px; font-size: 11px; font-weight: 560; border-radius: 10px; padding: 5px 10px; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
 .ss-w-toast-success { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
 .ss-w-toast-error { color: #c0392b; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
 
+/* pin affordance */
+.ss-w-pin-wrap { position: relative; display: inline-flex; flex: none; }
+.ss-w-pin { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: none; border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); cursor: pointer; }
+.ss-w-pin svg { width: 12px; height: 12px; }
+.ss-w-pin:hover { color: var(--ss-w-ink); border-color: var(--ss-w-faint); }
+.ss-w-pin[data-on] { background: var(--ss-w-accent); border-color: var(--ss-w-accent); color: #fff; }
+.ss-w-pin[data-on]:hover { background: var(--ss-w-accent); color: #fff; }
+
 @media (prefers-reduced-motion: reduce) {
   .ss-w-abtn-shimmer { animation: none; }
 }
@@ -657,3 +669,66 @@
 .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); }
+
+/* live monitor tab bar: underline pattern mirrors .ss-w-ecard-scope; the unread dot uses --ss-w-neg */
+.ss-w-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
+.ss-w-tab[data-on] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
+.ss-w-tab-count { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 999px; padding: 1px 6px; }
+.ss-w-tab[data-on] .ss-w-tab-count { color: var(--ss-w-accent); }
+.ss-w-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }
+
+/* Matches tab match card (MonitorMatchCard): pill row, crest/score main row, per-stat split
+   bars (venue-oriented -- home always left/blue, away always right/red, never club-oriented,
+   the u316 bug class), a promoted-market strip for the user's pinned stat chips, and a grace
+   note once the match has gone full time. Reuses the --ss-w-home/--ss-w-away/--ss-w-track venue
+   tokens and .ss-w-fandash-live-pill for the Live pill so all live surfaces share one look. */
+.ss-w-mon { 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-top { display: flex; align-items: center; gap: 8px; }
+.ss-w-mon-pill { display: inline-flex; flex: none; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 3px 8px; }
+.ss-w-mon-min { flex: none; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
+.ss-w-mon-comp { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.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; }
+/* 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; }
+.ss-w-mon-scorers { font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-mon-stats { display: flex; flex-direction: column; gap: 10px; }
+.ss-w-mon-stat { display: flex; flex-direction: column; gap: 5px; }
+.ss-w-mon-pstrip { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ss-w-accent) 8%, transparent); }
+.ss-w-mon-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
+.ss-w-mon-stat-v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
+.ss-w-mon-stat-v--home { color: var(--ss-w-home); }
+.ss-w-mon-stat-v--away { color: var(--ss-w-away); text-align: right; }
+.ss-w-mon-stat-l { font-size: 10px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }
+.ss-w-mon-bar { position: relative; height: 6px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
+.ss-w-mon-bar-home { height: 100%; background: var(--ss-w-home); }
+.ss-w-mon-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
+.ss-w-mon-stat-mkt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ss-w-faint); }
+.ss-w-mon-mkt { background: color-mix(in srgb, var(--ss-w-accent) 10%, transparent); border-radius: 6px; padding: 3px 6px; color: var(--ss-w-ink); }
+.ss-w-mon-stat-mkt-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
+.ss-w-mon-price { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ss-w-accent); }
+.ss-w-mon-susp { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 2px 6px; }
+.ss-w-mon-asof { display: block; font-size: 10.5px; font-weight: 600; color: var(--ss-w-cta); }
+.ss-w-mon-grace { font-size: 11px; color: var(--ss-w-faint); border-top: 1px solid var(--ss-w-line); padding-top: 8px; }
+
+/* Matches/Odds tab panels (MonitorTabs): the shared per-market-pin context line, the empty
+   state shown when the snapshot carries no matches/markets yet, the persistent D5 in-slip badge,
+   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); }
+/* 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-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); }
+.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,
+.ss-w-mon-oddspin[data-settled] .ss-w-mon-price { text-decoration: line-through; color: var(--ss-w-faint); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.30.0",
+  "version": "0.31.1",
   "description": "Embeddable SensibleStats chat widget for React.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -37,7 +37,7 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@sensiblestats/widget-sdk": "^0.26.0",
+    "@sensiblestats/widget-sdk": "^0.27.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },