@sensiblestats/widget-react 0.35.0 → 0.37.0

package/dist/styles.css

@@ -41,8 +41,40 @@
 .ss-w-fab { width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--ss-w-nav); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
 .ss-w-fab-mark { width: 30px; height: 30px; display: block; object-fit: contain; }
 .ss-w-greeting { max-width: 240px; display: flex; align-items: flex-start; background: var(--ss-w-panel); color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
-.ss-w-greeting-body { 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-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; }
+/* 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; }
+.ss-w-greeting-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-faint); display: block; }
+/* One-shot launcher attention intro: FAB nudges, then the greeting types in.
+   Gated behind no-preference so reduce-motion users get the greeting shown
+   statically (text visible, no nudge, no typing). ChatFab adds .ss-w-intro once
+   per page load; every animation runs a single time and settles at rest. */
+@media (prefers-reduced-motion: no-preference) {
+  .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-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; }
+  .ss-w-intro .ss-w-greeting-dots i:nth-child(3) { animation-delay: 1.15s; }
+}
+@keyframes ss-w-nudge {
+  0%, 100% { transform: none; }
+  22% { transform: translateY(-9px) rotate(-9deg); }
+  44% { transform: translateY(0) rotate(7deg); }
+  64% { transform: translateY(-4px) rotate(-4deg); }
+  82% { transform: rotate(2deg); }
+}
+@keyframes ss-w-greet-in {
+  from { opacity: 0; transform: translateY(8px) scale(.92); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes ss-w-greet-textin { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ss-w-greet-dots { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
+@keyframes ss-w-greet-dotbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
 
 /* panel */
 .ss-w-panel { position: fixed; bottom: calc(var(--ss-w-offset-y) + 72px); z-index: 2147483000; display: flex; flex-direction: column; width: min(460px, calc(100vw - 40px)); height: min(640px, calc(100vh - 120px)); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: var(--ss-w-radius); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.24); }
@@ -746,3 +778,16 @@
 .ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ss-w-line); border-radius: 12px; background: var(--ss-w-panel); }
 .ss-w-mon-oddspin[data-settled] .ss-w-mo-price,
 .ss-w-mon-oddspin[data-settled] .ss-w-mon-price { text-decoration: line-through; color: var(--ss-w-faint); }
+
+/* market accordion (Task 9): one collapsed row per available market, expanding into a reused
+   MarketOddsCardList ladder (hideHeader -- the row header already carries the market label). */
+.ss-w-acc { display: flex; flex-direction: column; gap: 6px; }
+.ss-w-acc-row { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); overflow: hidden; }
+.ss-w-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); }
+.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; }
+.ss-w-acc-label { font-size: 12.5px; font-weight: 600; }
+.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); }
+.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); }
+.ss-w-acc-panel { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 8px; }
+.ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }
+.ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }

package/package.json

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