@sensiblestats/widget-react 0.11.0 → 0.13.0

package/dist/styles.css

@@ -182,13 +182,40 @@
 .ss-w-mo-price { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--ss-w-accent); }
 /* Movement: BOTH directions share --ss-w-faint on purpose. Green-good/red-bad would frame a
    shortening price as a discount, which inverts what it actually means for the bettor. */
-.ss-w-mo-move { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }
-.ss-w-mo-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }
-.ss-w-mo-arrow { font-size: 9px; line-height: 1; }
-.ss-w-mo-move + .ss-w-mo-price { margin-left: 0; }
+.ss-w-move { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }
+.ss-w-move-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }
+.ss-w-move-arrow { font-size: 9px; line-height: 1; }
+/* margin-left:auto is row layout, not badge styling -- it belongs to the market-odds row, which is
+   a flex row, and must NOT follow the badge into the insight card's odds column. */
+.ss-w-mo-row .ss-w-move { margin-left: auto; }
+.ss-w-mo-row .ss-w-move + .ss-w-mo-price { margin-left: 0; }
 .ss-w-mo-row .ss-w-slip { margin: 0; }
 .ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }
 
+/* odds movement card */
+.ss-w-omcards { display: flex; flex-direction: column; gap: 7px; }
+.ss-w-omcard { 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; }
+.ss-w-om-head { display: flex; align-items: center; gap: 8px; }
+.ss-w-om-market { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-om-tag { margin-left: auto; flex: none; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 2px 7px; }
+.ss-w-om-fixture { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }
+.ss-w-om-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-om-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-om-chart { display: block; width: 100%; height: auto; }
+/* Single neutral accent in BOTH directions, deliberately. Colouring a shortening price green
+   frames it as a discount, which inverts what it means for the bettor -- the same reason
+   .ss-w-move keeps both directions on --ss-w-faint. */
+.ss-w-om-line { stroke: var(--ss-w-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.ss-w-om-dot { fill: var(--ss-w-accent); }
+.ss-w-om-grid { stroke: var(--ss-w-line); stroke-width: 1; }
+.ss-w-om-ylab, .ss-w-om-xlab { fill: var(--ss-w-faint); font-size: 9px; font-family: ui-monospace, monospace; }
+.ss-w-om-empty { font-size: 11.5px; color: var(--ss-w-faint); padding: 6px 0; }
+.ss-w-om-foot { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--ss-w-faint); }
+.ss-w-om-foot b { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ss-w-ink); }
+.ss-w-om-excl { font-size: 10.5px; color: var(--ss-w-faint); }
+.ss-w-om-susp { font-size: 11px; font-weight: 600; color: #c0392b; }
+.ss-w-om-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }
+
 /* action buttons */
 .ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
 .ss-w-abtn { font-size: 12px; font-weight: 560; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; padding: 6px 12px; cursor: pointer; }

package/package.json

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