@sensiblestats/widget-react 0.8.0 → 0.10.0

package/dist/styles.css

@@ -5,6 +5,7 @@
   --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
   --ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;
   --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
+  --ss-w-pos: #1aa563; --ss-w-neg: #e0524b;
   --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);
@@ -14,12 +15,14 @@
     --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;
     --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
     --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
+    --ss-w-pos: #37c891; --ss-w-neg: #f0655d;
   }
 }
 .ss-w-root[data-ss-w-theme="dark"] {
   --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;
   --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
   --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
+  --ss-w-pos: #37c891; --ss-w-neg: #f0655d;
 }
 .ss-w-root[data-ss-w-theme="light"] {
   --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
@@ -80,18 +83,47 @@
 .ss-w-md-code { background: var(--ss-w-bubble); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }
 
 /* entity cards */
-.ss-w-cards { display: flex; flex-direction: column; gap: 7px; }
-.ss-w-ecard { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 11px; text-align: left; }
-.ss-w-thumb { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; }
-.ss-w-thumb.ss-w-team { border-radius: 10px; }
+.ss-w-cards { display: flex; flex-direction: column; gap: 8px; }
+
+/* Identity Hero: crest-led identity block | tabbed stats panel */
+.ss-w-ecard { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }
+
+.ss-w-ecard-id { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 13px 10px; border-right: 1px solid var(--ss-w-line); background: linear-gradient(158deg, var(--ss-w-bubble), color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-bubble))); }
+.ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
+.ss-w-thumb { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
+.ss-w-thumb.ss-w-team { border-radius: 12px; }
 .ss-w-ecard[data-kind="player"] .ss-w-thumb { background-color: var(--ss-w-accent); }
-.ss-w-meta { display: flex; flex-direction: column; min-width: 0; }
-.ss-w-kind { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); line-height: 1.3; }
-.ss-w-nm { font-weight: 660; }
-.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); }
-.ss-w-stat { margin-left: auto; text-align: center; }
-.ss-w-stat b { display: block; font-variant-numeric: tabular-nums; }
-.ss-w-stat span { font-size: 9px; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-nm { font-weight: 680; line-height: 1.15; overflow-wrap: anywhere; }
+.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+
+/* bare card (no stat scopes): simple avatar + name row */
+.ss-w-ecard-bare { display: flex; align-items: center; }
+.ss-w-ecard-bare .ss-w-ecard-id { flex-direction: row; text-align: left; gap: 11px; background: none; border-right: none; padding: 10px 12px; }
+.ss-w-ecard-bare .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
+.ss-w-ecard-bare .ss-w-thumb.ss-w-team { border-radius: 10px; }
+
+.ss-w-ecard-body { min-width: 0; padding: 9px 12px 12px; display: flex; flex-direction: column; }
+
+/* tab strip seated on the stats panel's top edge; active tab underlined in accent */
+.ss-w-ecard-tabs { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--ss-w-line); margin-bottom: 9px; flex-wrap: wrap; }
+.ss-w-ecard-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 5px 8px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
+.ss-w-ecard-tab[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
+.ss-w-ecard-tabs-static { align-items: center; }
+.ss-w-ecard-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--ss-w-ink); padding: 4px 2px 8px; min-width: 0; }
+.ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }
+.ss-w-ecard-season { margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
+.ss-w-ecard-tabs-static .ss-w-ecard-season { margin-bottom: 4px; }
+
+.ss-w-ecard-stats { display: flex; flex-direction: column; gap: 4px; }
+.ss-w-ecard-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
+.ss-w-ecard-rlabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .045em; color: var(--ss-w-faint); font-weight: 600; }
+.ss-w-ecard-rval { justify-self: end; font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+.ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }
+.ss-w-form span { display: block; border-radius: 2px; }
+.ss-w-form-w { background: var(--ss-w-pos); }
+.ss-w-form-d { background: var(--ss-w-faint); }
+.ss-w-form-l { background: var(--ss-w-neg); }
+
 .ss-w-cards-more { align-self: flex-start; font-size: 11.5px; font-weight: 560; color: var(--ss-w-accent); background: none; border: none; cursor: pointer; padding: 3px 2px; }
 .ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }
 .ss-w-cards-more:disabled { opacity: .5; cursor: default; }
@@ -108,7 +140,12 @@
 .ss-w-bi-mkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .ss-w-bi-market { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
 .ss-w-bi-sel { font-size: 12px; line-height: 1.3; color: var(--ss-w-faint); }
-.ss-w-bi-odds { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; 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-line)); border-radius: 10px; padding: 4px 11px; min-width: 62px; }
+.ss-w-bi-match { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-top: 5px; }
+.ss-w-bi-action { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
+.ss-w-bi-action .ss-w-slip > button { flex: 1; text-align: center; }
+/* The action column is narrow; let its toast size to its own text and anchor to the card's right edge instead of being clipped to the button width. */
+.ss-w-bi-action .ss-w-toast { left: auto; right: 0; width: max-content; max-width: 210px; white-space: normal; }
+.ss-w-bi-odds { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; 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-line)); border-radius: 10px; padding: 4px 11px; min-width: 62px; }
 .ss-w-bi-odds-cap { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
 .ss-w-bi-odds b { font-size: 19px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.1; }
 .ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }

package/package.json

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