@sensiblestats/widget-react 0.21.0 → 0.23.0

package/dist/styles.css

@@ -347,58 +347,114 @@
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: #fdf6ec; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: #f5eefb; }
 
-/* club match-day dashboard */
-.ss-w-cdash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
-.ss-w-cdash-block { display: flex; flex-direction: column; }
-
-.ss-w-cdash-greeting { display: flex; flex-direction: column; gap: 2px; }
-.ss-w-cdash-greeting-title { font-weight: 700; font-size: 14px; color: var(--ss-w-ink); }
-.ss-w-cdash-greeting-subtitle { font-size: 11.5px; color: var(--ss-w-faint); }
-
-.ss-w-cdash-fixture { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 12px; text-align: center; }
-.ss-w-cdash-tie { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
-.ss-w-cdash-team { font-weight: 650; font-size: 13px; color: var(--ss-w-ink); min-width: 0; overflow-wrap: anywhere; }
-.ss-w-cdash-vs { font-size: 11px; color: var(--ss-w-faint); font-weight: 600; }
-.ss-w-cdash-crest { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--ss-w-bubble); }
-.ss-w-cdash-crest--fallback { display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }
-.ss-w-cdash-fixture-meta { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--ss-w-faint); }
-.ss-w-cdash-kickoff { font-weight: 700; color: var(--ss-w-ink); }
-.ss-w-cdash-cta { font: inherit; font-weight: 700; font-size: 12px; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: none; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
-
-.ss-w-cdash-form { display: flex; flex-direction: column; gap: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 12px; }
-.ss-w-cdash-form-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-.ss-w-cdash-form-name { font-size: 12px; font-weight: 600; color: var(--ss-w-ink); min-width: 0; overflow-wrap: anywhere; }
-.ss-w-cdash-form-pills { flex: none; display: flex; align-items: center; gap: 3px; }
-.ss-w-cdash-pill { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 9.5px; font-weight: 700; color: #fff; }
-.ss-w-cdash-pill--w { background: color-mix(in srgb, var(--ss-w-pos) 88%, black); }
-.ss-w-cdash-pill--d { background: var(--ss-w-faint); }
-.ss-w-cdash-pill--l { background: color-mix(in srgb, var(--ss-w-neg) 88%, black); }
-
-.ss-w-cdash-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; padding: 10px 12px; }
-.ss-w-cdash-lines-heading { font-size: 12px; font-weight: 700; color: var(--ss-w-accent); }
-.ss-w-cdash-lines p { font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); margin: 0; }
-.ss-w-cdash-fact { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); background: none; border: none; padding: 0; cursor: pointer; }
-.ss-w-cdash-fact:hover, .ss-w-cdash-fact:focus-visible { color: var(--ss-w-accent); text-decoration: underline; }
-.ss-w-cdash-fact-label { font-size: 11px; font-weight: 700; color: var(--ss-w-accent); }
-
-.ss-w-cdash-cd { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 12px; text-align: center; }
-.ss-w-cdash-cd-clock { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; font-size: 18px; color: var(--ss-w-ink); }
-.ss-w-cdash-cd-h, .ss-w-cdash-cd-m, .ss-w-cdash-cd-s { color: var(--ss-w-accent); }
-.ss-w-cdash-cd-label { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
-
-.ss-w-cdash-preview { display: flex; flex-direction: column; gap: 8px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 12px; }
-.ss-w-cdash-preview-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 6px; }
-.ss-w-cdash-preview-header .ss-w-cdash-team:first-child { justify-self: start; text-align: left; }
-.ss-w-cdash-preview-header .ss-w-cdash-team:last-child { justify-self: end; text-align: right; }
-.ss-w-cdash-preview-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
-.ss-w-cdash-preview-label { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); text-align: center; text-transform: uppercase; letter-spacing: 0.03em; }
-.ss-w-cdash-preview-value { font-size: 12px; font-weight: 700; color: var(--ss-w-ink); text-align: center; }
-.ss-w-cdash-preview-pills { display: flex; align-items: center; justify-content: center; gap: 3px; }
-.ss-w-cdash-preview-row:first-of-type .ss-w-cdash-preview-value { justify-self: start; }
-.ss-w-cdash-preview-row:first-of-type .ss-w-cdash-preview-value:last-child { justify-self: end; }
-.ss-w-cdash-preview-row:last-of-type .ss-w-cdash-preview-pills:first-child { justify-self: start; }
-.ss-w-cdash-preview-row:last-of-type .ss-w-cdash-preview-pills:last-child { justify-self: end; }
-.ss-w-cdash-preview-edge { display: flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 1.4; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 10%, transparent); border-radius: 8px; padding: 6px 8px; }
-.ss-w-cdash-preview-edge strong { color: var(--ss-w-ink); }
-.ss-w-cdash-preview-h2h { display: flex; flex-direction: column; gap: 2px; }
-.ss-w-cdash-preview-h2h p { font-size: 11.5px; line-height: 1.4; color: var(--ss-w-faint); margin: 0; }
+/* 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); }
+.ss-w-fandash-cards { display: flex; flex-direction: column; gap: 8px; }
+
+/* Shared card chrome -- a plain <div> for [data] cards, a <button> for [prefill] cards. Both
+   share the same box so the two families read as one system, not two ad hoc layouts. */
+.ss-w-fandash-card {
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);
+  background: var(--ss-w-panel); text-align: left;
+  color: inherit; font: inherit; width: 100%; min-width: 0;
+}
+.ss-w-fandash-card--tap { cursor: pointer; border-left: 3px solid var(--ss-w-accent); }
+.ss-w-fandash-card--tap:hover { background: var(--ss-w-bubble); }
+.ss-w-fandash-card-cta { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); }
+
+/* Shared alignment primitives: a small letterspaced section eyebrow, and a 3-column value/label
+   split reused by the fixture head-to-head (and any future stat-row card). */
+.ss-w-fandash-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
+.ss-w-fandash-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+.ss-w-fandash-split-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
+.ss-w-fandash-split-value { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); line-height: 1; }
+.ss-w-fandash-split-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+
+/* fixture card */
+.ss-w-fandash-fixture-teams { display: flex; align-items: center; gap: 10px; }
+.ss-w-fandash-fixture-team { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
+.ss-w-fandash-fixture-team--away { justify-content: flex-end; }
+.ss-w-fandash-fixture-team .ss-w-bi-crest { width: 30px; height: 30px; }
+.ss-w-fandash-fixture-team .ss-w-bi-crest-mono { font-size: 12px; }
+.ss-w-fandash-fixture-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
+.ss-w-fandash-fixture-team--away .ss-w-fandash-fixture-name { text-align: right; }
+.ss-w-fandash-fixture-vs { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }
+/* date + venue as labelled rows, so a long stadium name gets its own line to ellipsis in */
+.ss-w-fandash-fixture-meta { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--ss-w-line); padding-top: 8px; }
+.ss-w-fandash-fixture-metarow { display: flex; align-items: baseline; gap: 9px; }
+.ss-w-fandash-fixture-metakey { flex: none; width: 44px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
+.ss-w-fandash-fixture-metaval { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-fandash-fact { font-size: 12px; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 8px; }
+/* each head-to-head figure sits on its own shaded tile, so the grid gap separates wins/draws/losses */
+.ss-w-fandash-h2h .ss-w-fandash-split-cell { background: var(--ss-w-bubble); border-radius: 10px; padding: 12px 6px; }
+/* extra breathing room between the tally row and the fact beyond the card's own gap */
+.ss-w-fandash-h2h .ss-w-fandash-fact { margin-top: 4px; }
+
+/* last-five: one row per side, team name left, form pills right */
+.ss-w-fandash-fixture-form { display: flex; flex-direction: column; gap: 5px; }
+.ss-w-fandash-formrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.ss-w-fandash-formrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
+.ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }
+.ss-w-fandash-form-pill {
+  display: inline-grid; place-items: center; width: 16px; height: 16px;
+  border-radius: 4px; font-size: 9.5px; font-weight: 700; color: #fff;
+}
+.ss-w-fandash-form-pill--win { background: var(--ss-w-pos); }
+.ss-w-fandash-form-pill--loss { background: var(--ss-w-neg); }
+.ss-w-fandash-form-pill--draw { background: var(--ss-w-faint); }
+
+/* countdown card: a compact top card -- section eyebrow left, colon-separated clock right. Each
+   segment stacks its figure over a small unit label (d/h/m/s). The exact kickoff date is not
+   repeated here; the fixture card below carries it. */
+.ss-w-fandash-countdown-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.ss-w-fandash-countdown-clock { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ss-w-accent); }
+.ss-w-fandash-countdown-seg { display: inline-flex; flex-direction: column; align-items: center; }
+.ss-w-fandash-countdown-value { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }
+.ss-w-fandash-countdown-unit { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); margin-top: 3px; }
+.ss-w-fandash-countdown-colon { font-size: 22px; font-weight: 750; line-height: 1; color: var(--ss-w-faint); }
+
+/* injuries + transfers: two-column ours/theirs, in/out */
+.ss-w-fandash-transfers-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+/* injuries: a 1px divider column sits between the two team sections, each headed by crest + name */
+.ss-w-fandash-injuries-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 12px; }
+.ss-w-fandash-injuries-divider { background: var(--ss-w-line); }
+.ss-w-fandash-injuries-col, .ss-w-fandash-transfers-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.ss-w-fandash-transfers-col-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }
+.ss-w-fandash-injuries-col-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-fandash-injuries-col-head .ss-w-bi-crest { width: 18px; height: 18px; }
+.ss-w-fandash-injuries-col-head .ss-w-bi-crest-mono { font-size: 9px; }
+.ss-w-fandash-injuries-col-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-fandash-injuries-empty, .ss-w-fandash-transfers-empty { font-size: 11.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-injury-list, .ss-w-fandash-transfer-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
+.ss-w-fandash-injury-row, .ss-w-fandash-transfer-row { display: flex; flex-direction: column; gap: 1px; }
+.ss-w-fandash-injury-name, .ss-w-fandash-transfer-name { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
+.ss-w-fandash-injury-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-injury-status { font-weight: 700; color: var(--ss-w-neg); }
+.ss-w-fandash-transfer-club { font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-fandash-transfer-type { align-self: flex-start; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 1px 7px; margin-top: 2px; }
+
+/* reason-to-bet */
+.ss-w-fandash-reason-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.ss-w-fandash-reason-item { font-size: 12.5px; padding-left: 14px; position: relative; }
+.ss-w-fandash-reason-item::before { content: "•"; position: absolute; left: 0; color: var(--ss-w-accent); font-weight: 700; }
+
+/* where-to-watch */
+.ss-w-fandash-stations { display: flex; flex-wrap: wrap; gap: 6px; }
+.ss-w-fandash-station-chip { font-size: 11.5px; font-weight: 600; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 999px; padding: 4px 10px; }
+
+/* congested week: a fixed 3-column grid of upcoming fixtures (day / opponent / comp / time) */
+.ss-w-fandash-congested-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+.ss-w-fandash-congested-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border-radius: 10px; background: var(--ss-w-bubble); }
+.ss-w-fandash-congested-day { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }
+.ss-w-fandash-congested-opponent { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
+.ss-w-fandash-congested-comp { font-size: 10px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-fandash-congested-time { font-size: 10.5px; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }
+
+/* links: 2-column grid of tappable tiles */
+.ss-w-fandash-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.ss-w-fandash-link-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); }
+.ss-w-fandash-link-tile:hover { background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }
+.ss-w-fandash-link-label { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
+.ss-w-fandash-link-chevron { flex: none; width: 12px; height: 12px; color: var(--ss-w-accent); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.21.0",
+  "version": "0.23.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.18.0",
+    "@sensiblestats/widget-sdk": "^0.20.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },