@sensiblestats/widget-react 0.97.0 → 0.99.0

package/dist/styles.css

@@ -734,7 +734,7 @@
 }
 
 /* greeting dashboard */
-.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
+.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; container-type: inline-size; }
 .ss-w-dash-head { display: flex; flex-direction: column; }
 .ss-w-dash-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
 .ss-w-dash-subtitle { font-size: 13px; color: var(--ss-w-faint); margin-top: 4px; }
@@ -755,8 +755,8 @@
 .ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }
 .ss-w-dash-emoji { line-height: 1; }
 .ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
-.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
-.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: break-word; hyphens: manual; }
+.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: break-word; hyphens: manual; }
 .ss-w-dash-tile-chevron { flex: none; margin-left: auto; width: 14px; height: 14px; color: var(--ss-w-faint); }
 
 /* Badge + crests share their own row, below the title -- NOT the icon/chevron row. A
@@ -778,6 +778,18 @@
    families (.ss-w-binsight, .ss-w-mocard, .ss-w-omcard) so a market tile reads as
    part of that visual language rather than a plain unstyled button. */
 .ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }
+/* Market's two columns need the text column to fit a word: a half tile spends ~91px on border, padding,
+   icon and chevron, and a Turkish word such as "karşılaşma" is ~80px at 14px bold. Measured against the
+   dashboard's own width (a container query, not the viewport, since the panel is min(460px, 100vw - 40px)
+   and a host can embed it narrower still). Below 306px the half tiles are a single full-width column;
+   up to 349px the decorative chevron is dropped, as Discovery already does, to give the words ~24px back.
+   Words never break inside a tile (overflow-wrap: break-word), so the column count is what protects them. */
+@container (max-width: 305px) {
+  .ss-w-dash--market .ss-w-dash-grid { grid-template-columns: minmax(0, 1fr); }
+}
+@container (min-width: 306px) and (max-width: 349px) {
+  .ss-w-dash--market .ss-w-dash-tile--half .ss-w-dash-tile-chevron { display: none; }
+}
 
 /* Goal: one column of compact cards, 60px tall with the badge as a price column on the right.
    The value ink is accent mixed toward ink (as on the hero price): plain light accent on the
@@ -798,7 +810,8 @@
 /* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets
    the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow
    column was wrapping "Most interesting angles" onto three lines. The chevron is dropped (the
-   whole card is the tap target) and the badge + crest row is forced onto one line. */
+   whole card is the tap target). The badge + crest row wraps (the base .ss-w-dash-tile-meta rule): an
+   "8 matches" pill plus three crests is wider than a half tile at a 320px viewport. */
 .ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }
 .ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }
 .ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }
@@ -806,7 +819,6 @@
    (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */
 .ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }
 .ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }
-.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }
 .ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }
 /* Tints mix a hue into the live panel rather than hardcoding a light pastel, so a dark
    operator surface (e.g. --ss-w-panel set from a navy `surface` brand color) yields a
@@ -859,8 +871,8 @@
   background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel));
 }
 .ss-w-dash-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: anywhere; }
-.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: break-word; hyphens: manual; }
+.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: break-word; hyphens: manual; }
 .ss-w-dash-hero-price {
   flex: none; margin-left: auto;
   font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 750; line-height: 1;
@@ -869,6 +881,34 @@
   border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-panel));
 }
 
+/* Page-grounded additions (u591). Both only exist when the server sends `meta` / `imageCodes`, so an
+   older payload never reaches these rules. */
+/* Hero meta ("Tip-off 02:30 · in 6 h", "Başlama 02:30 · 40 dk sonra"): takes the price's seat in the top
+   row. It is the one flexible item there -- the badge and chevron keep their width -- and it wraps
+   rather than truncates: at the narrowest panel the Turkish line (27 characters) has ~120px beside
+   the badge, and the minutes-to-tip are the part a cut-off "40..." would lose. The component keeps
+   each short " · "-separated part whole, so a wrap falls at the dot instead of inside "40 dk sonra". */
+.ss-w-dash__keep { white-space: nowrap; }
+.ss-w-dash__meta {
+  flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: break-word; hyphens: manual;
+  font-size: 11.5px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums;
+  color: var(--ss-w-faint);
+}
+/* Text marks stand in for crests until the server has images: 22px circle / 7.5px in a tile, 40px /
+   12px in the hero (u592 D23). Ring and tint follow the crests they replace; unlike crests they do not
+   overlap, because the letters are the content and an overlap would clip the first one. */
+.ss-w-dash__mark {
+  flex: none; display: grid; place-items: center; box-sizing: border-box;
+  width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
+  font-size: 7.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap;
+  color: var(--ss-w-ink);
+  background-color: color-mix(in srgb, var(--ss-w-ink) 6%, var(--ss-w-panel));
+  box-shadow: 0 0 0 2px var(--ss-w-panel), 0 0 0 3px color-mix(in srgb, var(--ss-w-ink) 10%, var(--ss-w-panel));
+}
+.ss-w-dash__mark + .ss-w-dash__mark { margin-left: 3px; }
+.ss-w-dash-hero-visual .ss-w-dash__mark { width: 40px; height: 40px; font-size: 12px; }
+.ss-w-dash-hero-visual .ss-w-dash__mark + .ss-w-dash__mark { margin-left: 6px; }
+
 /* 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); }
@@ -1199,6 +1239,18 @@
 .ss-w-mon-pill { display: inline-flex; flex: none; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 3px 8px; }
 .ss-w-mon-min { flex: none; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
 .ss-w-mon-comp { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Placeholder shapes for a pin with no data yet. Sizes match the real card's rows (24px crest,
+   26px score line, the 22px pin that sets the top row) so the card does not jump when data lands. */
+.ss-w-mon-skel { cursor: progress; }
+.ss-w-skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--ss-w-bubble), var(--ss-w-line), var(--ss-w-bubble)); background-size: 200% 100%; animation: ss-w-shimmer 1.2s infinite; }
+.ss-w-skel-pill { width: 64px; height: 18px; margin-right: auto; }
+.ss-w-skel-crest { flex: none; width: 24px; height: 24px; border-radius: 50%; }
+.ss-w-skel-name { flex: 1; height: 13px; }
+.ss-w-skel-score { width: 44px; height: 26px; }
+.ss-w-acc-load { height: 100px; border-radius: 8px; }
+@media (prefers-reduced-motion: reduce) {
+  .ss-w-skel { animation: none; background: var(--ss-w-line); }
+}
 .ss-w-mon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
 .ss-w-mon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .ss-w-mon-side--away { flex-direction: row-reverse; text-align: right; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.97.0",
+  "version": "0.99.0",
   "description": "Embeddable SensibleStats chat widget for React.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -38,7 +38,7 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@sensiblestats/widget-sdk": "^0.65.0",
+    "@sensiblestats/widget-sdk": "^0.66.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },