@sensiblestats/widget-react 0.98.0 → 0.100.0

package/dist/styles.css

@@ -334,6 +334,7 @@
 .ss-w-bi-comp-logo { width: 16px; height: 16px; flex: none; display: block; border-radius: 50%; object-fit: contain; }
 .ss-w-bi-crest { width: 24px; height: 24px; flex: none; display: block; border-radius: 50%; object-fit: contain; }
 .ss-w-bi-crest-mono { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }
+.ss-w-bi-crest--abbr { width: auto; min-width: 26px; padding: 0 3px; border-radius: 4px; font-size: 8px; font-weight: 800; letter-spacing: .02em; box-sizing: border-box; }
 
 /* fixture atoms -- crest-flanked team pair; shared by the insight fixture line and MarketOddsCardList */
 .ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -342,6 +343,7 @@
 /* shared crest-flanked team row (MarketOddsCardList); matches .ss-w-bi-fixture-line's hero weight
    so the fixture reads the same on both card types (u350) */
 .ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-bi-fixture:has(.ss-w-bi-crest--abbr) .ss-w-bi-team { white-space: normal; overflow-wrap: anywhere; }
 
 /* row 2, two-tier: the market label owns a full-width line above the pick row (selection grows
    left, odds + slip + pin sit right), so neither the market name nor the fixture clips (u350) */
@@ -469,6 +471,80 @@
 .ss-w-nba-more, .ss-w-nba-sr-sum { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ss-w-faint); }
 .ss-w-nba-sr-sum { font-weight: 600; color: var(--ss-w-ink); }
 
+/* NFL insight cards (u582 P3). Read-only prices, no slip, no pin, no animation: the NBA card shell with team-abbreviation badges. */
+.ss-w-nfl-cards { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-nfl-card { border: 1px solid var(--ss-w-line); border-radius: 16px; background: var(--ss-w-panel); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
+.ss-w-nfl-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.ss-w-nfl-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 11px; color: var(--ss-w-faint); line-height: 1.3; }
+.ss-w-nfl-side { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
+.ss-w-nfl-sep { color: var(--ss-w-faint); }
+.ss-w-nfl-kick { margin-left: auto; white-space: nowrap; }
+.ss-w-nfl-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); overflow-wrap: anywhere; }
+.ss-w-nfl-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 16px; padding: 0 3px; border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: .02em; line-height: 1; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); box-sizing: border-box; }
+.ss-w-nfl-who { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-weight: 600; font-size: 13px; color: var(--ss-w-ink); overflow-wrap: anywhere; }
+.ss-w-nfl-pos { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 0 6px; }
+.ss-w-nfl-n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); text-align: right; white-space: nowrap; }
+.ss-w-nfl-n--faint { color: var(--ss-w-faint); }
+.ss-w-nfl-pcell { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
+.ss-w-nfl-price { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 5px 8px; white-space: nowrap; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-nfl-price-lab { color: var(--ss-w-faint); font-weight: 600; }
+.ss-w-nfl-games { display: flex; gap: 4px; }
+.ss-w-nfl-game { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
+.ss-w-nfl-gv { font-size: 11.5px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-nfl-track { position: relative; width: 100%; height: 56px; }
+.ss-w-nfl-bar { position: absolute; bottom: 0; left: 22%; right: 22%; box-sizing: border-box; border: 1.5px solid var(--ss-w-accent); border-radius: 3px 3px 0 0; background: transparent; }
+.ss-w-nfl-bar[data-result="hit"] { background: var(--ss-w-accent); }
+.ss-w-nfl-mark { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--ss-w-faint); }
+.ss-w-nfl-gd { font-size: 10px; color: var(--ss-w-faint); white-space: nowrap; }
+.ss-w-nfl-go { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; }
+.ss-w-nfl-figs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+.ss-w-nfl-fig { display: flex; flex-direction: column; gap: 1px; }
+.ss-w-nfl-fig b { font-size: 16px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-nfl-figl { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-nfl-figs > .ss-w-nfl-pcell { margin-left: auto; }
+.ss-w-nfl-ladder { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-nfl-rung { display: grid; grid-template-columns: 52px minmax(0,1fr) auto auto; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
+.ss-w-nfl-at { font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-nfl-meter { height: 6px; border-radius: 3px; background: var(--ss-w-bubble); overflow: hidden; }
+.ss-w-nfl-meter > span { display: block; height: 100%; border-radius: 3px; background: var(--ss-w-accent); }
+.ss-w-nfl-inj { display: flex; flex-direction: column; gap: 6px; }
+.ss-w-nfl-inj-row { display: grid; grid-template-columns: minmax(0,1fr) 28px 92px; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
+.ss-w-nfl-inj-row + .ss-w-nfl-inj-row { border-top: 1px solid var(--ss-w-line); }
+.ss-w-nfl-inj-nm { min-width: 0; color: var(--ss-w-ink); overflow-wrap: anywhere; }
+.ss-w-nfl-inj-pos { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-nfl-inj-st { justify-self: end; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
+.ss-w-nfl-inj-st[data-status="out"], .ss-w-nfl-inj-st[data-status="doubtful"] { color: var(--ss-w-warn); border-color: var(--ss-w-warn); }
+.ss-w-nfl-note { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ss-w-faint); }
+.ss-w-nfl-lm { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 8px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
+.ss-w-nfl-lane { display: contents; }
+.ss-w-nfl-hd { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; }
+.ss-w-nfl-hd--r { text-align: right; }
+.ss-w-nfl-record { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
+.ss-w-nfl-rec-team { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-nfl-rec { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-nfl-rec-basis { font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-nfl-card[data-kind="ats_record"] .ss-w-nfl-games { flex-direction: column; gap: 0; }
+.ss-w-nfl-card[data-kind="ats_record"] .ss-w-nfl-game { flex-direction: row; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 12.5px; }
+.ss-w-nfl-card[data-kind="ats_record"] .ss-w-nfl-game + .ss-w-nfl-game { border-top: 1px solid var(--ss-w-line); }
+.ss-w-nfl-card[data-kind="ats_record"] .ss-w-nfl-gd { flex: 1; text-align: left; }
+.ss-w-nfl-sl { min-width: 44px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
+.ss-w-nfl-res { min-width: 22px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 6px; }
+.ss-w-nfl-res[data-result="win"] { color: var(--ss-w-accent); border-color: var(--ss-w-accent); }
+.ss-w-nfl-res[data-result="loss"] { color: var(--ss-w-warn); border-color: var(--ss-w-warn); }
+.ss-w-nfl-res[data-result="push"] { color: var(--ss-w-faint); }
+.ss-w-nfl-mu { display: flex; flex-direction: column; gap: 10px; }
+.ss-w-nfl-settle { display: flex; flex-direction: column; gap: 10px; }
+.ss-w-nfl-score { display: flex; align-items: baseline; gap: 8px; }
+.ss-w-nfl-score b { font-size: 20px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-nfl-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ss-w-faint); }
+.ss-w-nfl-sumc b { color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-nfl-pl { display: flex; flex-direction: column; gap: 4px; }
+.ss-w-nfl-ln { display: grid; grid-template-columns: minmax(0,1fr) 44px auto; align-items: center; gap: 8px; font-size: 13px; }
+.ss-w-nfl-ln-what { min-width: 0; color: var(--ss-w-faint); font-size: 12px; overflow-wrap: anywhere; }
+.ss-w-nfl-lres { justify-self: end; min-width: 48px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
+.ss-w-nfl-lres[data-result="push"], .ss-w-nfl-lres[data-result="void"] { color: var(--ss-w-faint); }
+.ss-w-nfl-foot { font-size: 11px; color: var(--ss-w-faint); line-height: 1.4; border-top: 1px solid var(--ss-w-line); padding-top: 10px; }
+
 /* market odds card */
 .ss-w-mocards { display: flex; flex-direction: column; gap: 7px; }
 .ss-w-mocard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }
@@ -734,7 +810,7 @@
 }
 
 /* greeting dashboard */
-.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
+.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; container-type: inline-size; }
 .ss-w-dash-head { display: flex; flex-direction: column; }
 .ss-w-dash-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
 .ss-w-dash-subtitle { font-size: 13px; color: var(--ss-w-faint); margin-top: 4px; }
@@ -755,8 +831,8 @@
 .ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }
 .ss-w-dash-emoji { line-height: 1; }
 .ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
-.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
-.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: break-word; hyphens: manual; }
+.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: break-word; hyphens: manual; }
 .ss-w-dash-tile-chevron { flex: none; margin-left: auto; width: 14px; height: 14px; color: var(--ss-w-faint); }
 
 /* Badge + crests share their own row, below the title -- NOT the icon/chevron row. A
@@ -778,6 +854,18 @@
    families (.ss-w-binsight, .ss-w-mocard, .ss-w-omcard) so a market tile reads as
    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); }
+/* Market's two columns need the text column to fit a word: a half tile spends ~91px on border, padding,
+   icon and chevron, and a Turkish word such as "karşılaşma" is ~80px at 14px bold. Measured against the
+   dashboard's own width (a container query, not the viewport, since the panel is min(460px, 100vw - 40px)
+   and a host can embed it narrower still). Below 306px the half tiles are a single full-width column;
+   up to 349px the decorative chevron is dropped, as Discovery already does, to give the words ~24px back.
+   Words never break inside a tile (overflow-wrap: break-word), so the column count is what protects them. */
+@container (max-width: 305px) {
+  .ss-w-dash--market .ss-w-dash-grid { grid-template-columns: minmax(0, 1fr); }
+}
+@container (min-width: 306px) and (max-width: 349px) {
+  .ss-w-dash--market .ss-w-dash-tile--half .ss-w-dash-tile-chevron { display: none; }
+}
 
 /* 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
@@ -798,7 +886,8 @@
 /* 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
    column was wrapping "Most interesting angles" onto three lines. The chevron is dropped (the
-   whole card is the tap target) and the badge + crest row is forced onto one line. */
+   whole card is the tap target). The badge + crest row wraps (the base .ss-w-dash-tile-meta rule): an
+   "8 matches" pill plus three crests is wider than a half tile at a 320px viewport. */
 .ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }
 .ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }
 .ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }
@@ -806,7 +895,6 @@
    (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */
 .ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }
 .ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }
-.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }
 .ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }
 /* Tints mix a hue into the live panel rather than hardcoding a light pastel, so a dark
    operator surface (e.g. --ss-w-panel set from a navy `surface` brand color) yields a
@@ -859,8 +947,8 @@
   background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel));
 }
 .ss-w-dash-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: anywhere; }
-.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: break-word; hyphens: manual; }
+.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: break-word; hyphens: manual; }
 .ss-w-dash-hero-price {
   flex: none; margin-left: auto;
   font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 750; line-height: 1;
@@ -869,6 +957,34 @@
   border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-panel));
 }
 
+/* Page-grounded additions (u591). Both only exist when the server sends `meta` / `imageCodes`, so an
+   older payload never reaches these rules. */
+/* Hero meta ("Tip-off 02:30 · in 6 h", "Başlama 02:30 · 40 dk sonra"): takes the price's seat in the top
+   row. It is the one flexible item there -- the badge and chevron keep their width -- and it wraps
+   rather than truncates: at the narrowest panel the Turkish line (27 characters) has ~120px beside
+   the badge, and the minutes-to-tip are the part a cut-off "40..." would lose. The component keeps
+   each short " · "-separated part whole, so a wrap falls at the dot instead of inside "40 dk sonra". */
+.ss-w-dash__keep { white-space: nowrap; }
+.ss-w-dash__meta {
+  flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: break-word; hyphens: manual;
+  font-size: 11.5px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums;
+  color: var(--ss-w-faint);
+}
+/* Text marks stand in for crests until the server has images: 22px circle / 7.5px in a tile, 40px /
+   12px in the hero (u592 D23). Ring and tint follow the crests they replace; unlike crests they do not
+   overlap, because the letters are the content and an overlap would clip the first one. */
+.ss-w-dash__mark {
+  flex: none; display: grid; place-items: center; box-sizing: border-box;
+  width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
+  font-size: 7.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap;
+  color: var(--ss-w-ink);
+  background-color: color-mix(in srgb, var(--ss-w-ink) 6%, var(--ss-w-panel));
+  box-shadow: 0 0 0 2px var(--ss-w-panel), 0 0 0 3px color-mix(in srgb, var(--ss-w-ink) 10%, var(--ss-w-panel));
+}
+.ss-w-dash__mark + .ss-w-dash__mark { margin-left: 3px; }
+.ss-w-dash-hero-visual .ss-w-dash__mark { width: 40px; height: 40px; font-size: 12px; }
+.ss-w-dash-hero-visual .ss-w-dash__mark + .ss-w-dash__mark { margin-left: 6px; }
+
 /* club fan pre-match dashboard */
 .ss-w-fandash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
 .ss-w-fandash-greeting { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); }

package/package.json

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