@sensiblestats/widget-react 0.61.2 → 0.62.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; }
@@ -1045,6 +1098,8 @@
 .ss-g-mt-portrait .ss-g-sil { font-size: 46px; }
 .ss-g-mt-photo { width: 132px; height: 132px; margin-bottom: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 40px var(--ss-g-font-display); }
 .ss-g-mt-photo img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-cp-photo { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 22px var(--ss-g-font-display); }
+.ss-g-cp-photo img { width: 100%; height: 100%; object-fit: cover; }
 .ss-g-mt-reveal-name { position: absolute; bottom: 6px; left: 12px; right: 12px; text-align: center; font: 800 20px var(--ss-g-font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-mt-known { display: grid; gap: 6px; padding: 12px; }
 .ss-g-mt-known-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.61.2",
+  "version": "0.62.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.37.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },