@sensiblestats/widget-react 0.61.3 → 0.63.0

package/dist/styles.css

@@ -541,6 +541,59 @@
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: color-mix(in srgb, #3a82f6 10%, var(--ss-w-panel)); }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: color-mix(in srgb, #f5a623 10%, var(--ss-w-panel)); }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: color-mix(in srgb, #a855f7 10%, var(--ss-w-panel)); }
+/* A hero tile would take the first tint position; count only regular tiles where `of S` parses. */
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #34c759 10%, var(--ss-w-panel)); }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #3a82f6 10%, var(--ss-w-panel)); }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #f5a623 10%, var(--ss-w-panel)); }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #a855f7 10%, var(--ss-w-panel)); }
+
+/* Hero: the personalized lead tile. Declared after the layout rules and at three-class
+   specificity so it keeps one look in every layout -- no market rail, no goal pill, no
+   discovery tint or stacking. Colours derive from accent/panel/ink so an operator surface
+   and dark mode both work without their own rules. */
+.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero {
+  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
+  padding: 12px 14px 14px; border-radius: 16px;
+  border: 1px solid color-mix(in srgb, var(--ss-w-accent) 38%, var(--ss-w-line));
+  background:
+    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ss-w-accent) 18%, transparent) 0%, transparent 60%),
+    var(--ss-w-panel);
+  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ss-w-accent) 80%, transparent);
+}
+.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero:hover { border-color: var(--ss-w-accent); }
+.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
+.ss-w-dash-hero-top { display: flex; align-items: center; gap: 8px; min-height: 20px; }
+.ss-w-dash-hero-badge {
+  font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
+  color: var(--ss-w-panel); background: color-mix(in srgb, var(--ss-w-accent) 45%, var(--ss-w-ink)); border-radius: 999px; padding: 3px 10px;
+  white-space: nowrap;
+}
+.ss-w-dash-hero-chevron { flex: none; width: 14px; height: 14px; color: var(--ss-w-faint); }
+.ss-w-dash-hero-badge { margin-right: auto; }
+.ss-w-dash-hero-chevron:only-child { margin-left: auto; }
+.ss-w-dash-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.ss-w-dash-hero-visual { flex: none; display: flex; align-items: center; }
+.ss-w-dash-hero-crest {
+  width: 40px; height: 40px; border-radius: 50%;
+  background-color: color-mix(in srgb, var(--ss-w-ink) 4%, var(--ss-w-panel));
+  background-size: 72%; background-position: center; background-repeat: no-repeat;
+  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-hero-crest + .ss-w-dash-hero-crest { margin-left: -8px; }
+.ss-w-dash-hero-icon {
+  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 22px;
+  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-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;
+  color: color-mix(in srgb, var(--ss-w-accent) 45%, var(--ss-w-ink)); padding: 5px 9px; border-radius: 8px;
+  background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel));
+  border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-panel));
+}
 
 /* club fan pre-match dashboard */
 .ss-w-fandash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
@@ -881,6 +934,21 @@
 .ss-w-mon-scorers-home { text-align: right; }
 .ss-w-mon-scorers-away { text-align: left; }
 .ss-w-mon-scorers-ball { flex: none; align-self: start; line-height: 1.35; }
+.ss-w-fact { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, transparent); }
+.ss-w-fact-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-accent); }
+.ss-w-fact-min { color: var(--ss-w-ink); letter-spacing: 0; }
+.ss-w-fact-subj { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 650; color: var(--ss-w-faint); }
+.ss-w-fact-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ss-w-ink); }
+.ss-w-fact-basis { font-size: 10.5px; color: var(--ss-w-faint); }
+.ss-w-fact-mkt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 6px 8px; }
+.ss-w-fact-foot { display: flex; align-items: center; gap: 14px; }
+.ss-w-fact-link { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); background: none; border: none; padding: 4px 0; min-height: 32px; cursor: pointer; }
+.ss-w-fact-link--muted { color: var(--ss-w-faint); margin-left: auto; }
+.ss-w-fact-hist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ss-w-line); }
+.ss-w-fact-hist li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-fact-hist li:last-child { border-bottom: none; }
+.ss-w-fact-hmin { font-size: 11px; font-weight: 800; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }
+.ss-w-fact-htext { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ss-w-ink); }
 .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); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.61.3",
+  "version": "0.63.0",
   "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.36.0",
+    "@sensiblestats/widget-sdk": "^0.38.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },