@sensiblestats/widget-react 0.66.1 → 0.68.0

package/dist/styles.css

@@ -164,6 +164,15 @@
 .ss-w-greeting-body { position: relative; flex: 1; min-width: 0; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 9px 4px 9px 12px; }
 .ss-w-greeting-x { flex: none; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 7px 9px 0 2px; }
 .ss-w-greeting-text { display: block; }
+/* Bubble asks (onboarding presets, spec C6): the line stays one button, the asks stack under it as
+   sibling buttons. 240 px bubble: 196 px of text room per ask; widest contract ask 167 px (EN),
+   153 px (TR) at 12px/600, measured 2026-10-04. A longer label wraps, never an ellipsis. */
+.ss-w-greeting--asks { flex-direction: column; align-items: stretch; }
+.ss-w-greeting-top { display: flex; align-items: flex-start; }
+.ss-w-greeting-asks { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
+.ss-w-greeting-ask { min-height: 44px; width: 100%; text-align: left; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 35%, var(--ss-w-line)); border-radius: 10px; padding: 6px 10px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
+.ss-w-greeting-ask:hover { border-color: var(--ss-w-accent); }
+.ss-w-greeting-ask:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
 /* Typing indicator: overlays the text area so bubble height stays put; hidden at
    rest, revealed only during the one-shot intro (see prefers-reduced-motion block). */
 .ss-w-greeting-dots { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; gap: 4px; opacity: 0; pointer-events: none; }
@@ -176,6 +185,7 @@
   .ss-w-intro .ss-w-fab { animation: ss-w-nudge .8s ease both; }
   .ss-w-intro .ss-w-greeting { animation: ss-w-greet-in .45s cubic-bezier(.2,.8,.3,1.15) .8s both; }
   .ss-w-intro .ss-w-greeting-text { animation: ss-w-greet-textin .4s ease 1.65s both; }
+  .ss-w-intro .ss-w-greeting-asks { animation: ss-w-greet-textin .4s ease 1.65s both; }
   .ss-w-intro .ss-w-greeting-dots { animation: ss-w-greet-dots .95s ease .85s both; }
   .ss-w-intro .ss-w-greeting-dots i { animation: ss-w-greet-dotbounce .5s ease .85s 2; }
   .ss-w-intro .ss-w-greeting-dots i:nth-child(2) { animation-delay: 1s; }
@@ -374,6 +384,7 @@
 .ss-w-mo-teams { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ss-w-mo-market-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
 .ss-w-mo-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-mo-tag { flex: none; font-size: 10.5px; font-weight: 700; line-height: 1.4; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, transparent); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
 .ss-w-mo-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }
 .ss-w-mo-more:hover { text-decoration: underline; }
 .ss-w-mo-more-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
@@ -397,6 +408,24 @@
 .ss-w-mo-row .ss-w-slip { margin: 0; flex: none; }
 .ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }
 
+/* combo card (onboarding presets, spec C5): legs in kickoff order, then the server's
+   multiplication line. Same card family as .ss-w-mocard / .ss-w-binsight. */
+.ss-w-combos { display: flex; flex-direction: column; gap: 7px; }
+.ss-w-combo { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 4px 11px 10px; display: flex; flex-direction: column; gap: 8px; }
+.ss-w-combo-legs { list-style: none; display: flex; flex-direction: column; }
+.ss-w-combo-leg { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-bottom: 1px dashed var(--ss-w-line); }
+.ss-w-combo-leg:last-child { border-bottom: none; padding-bottom: 2px; }
+.ss-w-combo-leg-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
+.ss-w-combo-leg-pick { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.ss-w-combo-leg-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.ss-w-combo-leg-market { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-combo-leg-sel { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); overflow-wrap: anywhere; }
+.ss-w-combo-leg-price { flex: none; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; line-height: 1.05; color: var(--ss-w-accent); }
+.ss-w-combo-leg-pick .ss-w-slip { flex: none; }
+.ss-w-combo-leg-stat { font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 9px; }
+.ss-w-combo-math { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ss-w-ink); text-align: right; background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
+.ss-w-combo-note { font-size: 11px; line-height: 1.4; color: var(--ss-w-faint); }
+
 /* Compact price list (D16): three or more cards of one turn, one row per fixture. Team names wrap
    to a second line and are never cut; the time sits above the match pin, with no column of its own. */
 .ss-w-mol { 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; }

package/package.json

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