@sensiblestats/widget-react 0.98.0 → 0.99.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sensiblestats/widget-react
 
+## 0.99.0
+
+### Minor Changes
+
+- 5d0450f: Add `config.page`. The greeting request carries the page the widget sits on, and a page change while mounted re-greets until the visitor has typed or tapped. Greeting tiles show `meta` in the hero's top row and draw `imageCodes` as text marks when there are no images.
+
+### Patch Changes
+
+- Updated dependencies [5d0450f]
+  - @sensiblestats/widget-sdk@0.66.0
+
 ## 0.98.0
 
 ### Minor Changes

package/README.md

@@ -38,6 +38,17 @@ Common `config` fields:
   and personalization to your signed-in user.
 - White-label branding — `logoUrl`, `headerTitle`, `accent`, `cta`, `surface`,
   `ink`. Absent → the default SensibleStats look.
+- `page` — the page the widget sits on, `{ sport, kind?, matchId?, competitionId? }`, so the
+  first greeting can lead with it. Football ids are bare (`'4820113'`); NBA ids are
+  `'nba:game:{id}'` or digits. `sport` is `'football'` or `'nba'`; the server answers any other
+  value with `unsupported_sport` and the visitor sees today's greeting, so check your spelling
+  rather than expecting a client-side error. The page rides on greeting requests only, never on a
+  typed or tapped turn. Omit it and the request is unchanged.
+
+  If `page` changes while the widget is mounted, it re-greets with the new page (after 300 ms,
+  so quick changes collapse), but only while the visitor has not typed or tapped anything. Once
+  the visitor has sent a message, a page change does nothing. The re-greet reads and writes no
+  stored conversation.
 
 ## Hooks: the slip and the match page
 

package/dist/index.cjs

@@ -1137,7 +1137,7 @@ function isEnglishLocale(locale) {
 }
 
 // src/version.generated.ts
-var WIDGET_REACT_VERSION = "0.98.0";
+var WIDGET_REACT_VERSION = "0.99.0";
 
 // src/config.ts
 function normalizeUi(cfg) {
@@ -2772,7 +2772,9 @@ function seedIdCounter(messages) {
   }
   return max + 1;
 }
-function useChatStream(conversation, starterTexts, greetingMessage, storageKey) {
+var pageKey = (p) => p ? `${p.sport}|${p.kind ?? "section"}|${p.matchId ?? p.competitionId ?? ""}` : "";
+var REGREET_DEBOUNCE_MS = 300;
+function useChatStream(conversation, starterTexts, greetingMessage, storageKey, page) {
   const boot = (0, import_react3.useMemo)(() => {
     const payload = storageKey ? readConversation(storageKey, Date.now()) : null;
     const restored = payload != null && payload !== "expired" && payload !== "corrupt";
@@ -2790,6 +2792,10 @@ function useChatStream(conversation, starterTexts, greetingMessage, storageKey)
   stateRef.current = state;
   const greetedRef = (0, import_react3.useRef)(boot.restored);
   const hydratedRef = (0, import_react3.useRef)(false);
+  const pageRef = (0, import_react3.useRef)(page);
+  pageRef.current = page;
+  const greetedKeyRef = (0, import_react3.useRef)(null);
+  const greetingCancelledRef = (0, import_react3.useRef)(false);
   const restoreSeededRef = (0, import_react3.useRef)(false);
   if (!restoreSeededRef.current) {
     restoreSeededRef.current = true;
@@ -2865,7 +2871,13 @@ function useChatStream(conversation, starterTexts, greetingMessage, storageKey)
       handleRef.current?.cancel();
       clearFallbackTimer();
       dispatch({ kind: "GREETING_SENT", assistantId: nextId() });
-      const handle = conversation.send({ message, clientCapabilities: [...CLIENT_CAPABILITIES] });
+      greetedKeyRef.current = pageKey(pageRef.current);
+      greetingCancelledRef.current = false;
+      const handle = conversation.send({
+        message,
+        clientCapabilities: [...CLIENT_CAPABILITIES],
+        ...pageRef.current ? { page: pageRef.current } : {}
+      });
       handleRef.current = handle;
       armFallbackTimer(() => dispatch({ kind: "STOP" }));
       consume(handle, () => dispatch({ kind: "STOP" }));
@@ -2878,6 +2890,24 @@ function useChatStream(conversation, starterTexts, greetingMessage, storageKey)
     greetedRef.current = true;
     fireGreeting();
   }, [fireGreeting]);
+  const key = pageKey(page);
+  (0, import_react3.useEffect)(() => {
+    if (greetedKeyRef.current === null) return;
+    if (key === greetedKeyRef.current && !greetingCancelledRef.current) return;
+    if (stateRef.current.messages.some((m) => m.role === "user")) return;
+    if (key !== greetedKeyRef.current && handleRef.current) {
+      handleRef.current.cancel();
+      greetingCancelledRef.current = true;
+    }
+    const timer = setTimeout(() => {
+      if (stateRef.current.messages.some((m) => m.role === "user")) return;
+      idRef.current = 0;
+      conversation.conversationId = void 0;
+      dispatch({ kind: "RESET" });
+      fireGreeting();
+    }, REGREET_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [key, conversation, fireGreeting]);
   (0, import_react3.useEffect)(() => {
     if (!state.limit) return;
     const delay = limitDelayMs(state.limit, Date.now());
@@ -6009,8 +6039,27 @@ function splitOdds(subtitle) {
   const m = ODDS_TAIL.exec(subtitle);
   return m ? { text: subtitle.slice(0, m.index), odds: m[1] } : { text: subtitle };
 }
+function codesOf(tile) {
+  return (tile.imageCodes ?? []).filter(Boolean);
+}
+function Marks({ codes }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: codes.map((code, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash__mark", children: code }, `${code}-${i}`)) });
+}
+var KEEP_MAX = 16;
+function DotSeparated({ text }) {
+  const parts = text.split(" \xB7 ");
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: parts.map((part, i) => {
+    const piece = i < parts.length - 1 ? `${part} \xB7` : part;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { children: [
+      i > 0 ? " " : null,
+      part.length <= KEEP_MAX ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash__keep", children: piece }) : piece
+    ] }, i);
+  }) });
+}
+var keepDashWithHome = (title) => title.replace(/ - /g, "\xA0- ");
 function HeroTile({ tile, onTap, oddsLabel }) {
   const crests = (tile.imageUrls ?? []).filter(Boolean).slice(0, 2);
+  const codes = crests.length === 0 ? codesOf(tile).slice(0, 2) : [];
   const sub = tile.subtitle ? splitOdds(tile.subtitle) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { type: "button", className: "ss-w-dash-tile ss-w-dash-tile--full ss-w-dash-hero", onClick: onTap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "ss-w-dash-hero-top", children: [
@@ -6022,36 +6071,40 @@ function HeroTile({ tile, onTap, oddsLabel }) {
         ] }),
         sub.odds
       ] }) : null,
+      !sub?.odds && tile.meta ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash__meta", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DotSeparated, { text: tile.meta }) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronIcon, {}) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "ss-w-dash-hero-main", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-visual", "aria-hidden": "true", children: crests.length > 0 ? crests.map((url, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-crest", style: { backgroundImage: `url(${url})` } }, `${url}-${i}`)) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-icon", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DashboardIcon, { name: tile.icon }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-visual", "aria-hidden": "true", children: crests.length > 0 ? crests.map((url, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-crest", style: { backgroundImage: `url(${url})` } }, `${url}-${i}`)) : codes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Marks, { codes }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-icon", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DashboardIcon, { name: tile.icon }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "ss-w-dash-hero-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-title", children: tile.title }),
-        sub?.text ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-subtitle", children: sub.text }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-title", children: keepDashWithHome(tile.title) }),
+        sub?.text ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-hero-subtitle", children: sub.text.includes(" \xB7 ") ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DotSeparated, { text: sub.text }) : sub.text }) : null
       ] })
     ] })
   ] });
 }
+var PRICE_BADGE = /^\d+(?:[.,]\d+)?$/;
 function DashboardTile({ tile, onTap, oddsLabel = "Odds", badgePlacement = "meta" }) {
   if (tile.emphasis === "hero") return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HeroTile, { tile, onTap, oddsLabel });
   const spanClass = tile.span === "full" ? "ss-w-dash-tile--full" : "ss-w-dash-tile--half";
   const crests = (tile.imageUrls ?? []).slice(0, MAX_CRESTS);
-  const endBadge = badgePlacement === "end" && tile.badgeText ? tile.badgeText : null;
+  const endBadge = badgePlacement === "end" && tile.badgeText && PRICE_BADGE.test(tile.badgeText.trim()) ? tile.badgeText : null;
   const metaBadge = endBadge ? null : tile.badgeText;
-  const hasMeta = Boolean(metaBadge) || crests.length > 0;
+  const codes = crests.length === 0 ? codesOf(tile).slice(0, MAX_CRESTS) : [];
+  const hasMeta = Boolean(metaBadge) || crests.length > 0 || codes.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { type: "button", className: `ss-w-dash-tile ${spanClass}`, onClick: onTap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-icon", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DashboardIcon, { name: tile.icon }) }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "ss-w-dash-tile-body", children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-title", children: tile.title }),
-      tile.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-subtitle", children: tile.subtitle }) : null,
+      tile.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-subtitle", children: tile.subtitle.includes(" \xB7 ") ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DotSeparated, { text: tile.subtitle }) : tile.subtitle }) : null,
       hasMeta ? (
         // Badge + crests sit on their own row, below the title, instead of sharing the
         // icon/chevron row -- at the half-span tile's ~180px width a nowrap badge alone
         // (~70px) left the title column at ~22px and forced character-by-character wrapping.
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "ss-w-dash-tile-meta", children: [
           metaBadge ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-badge", children: metaBadge }) : null,
-          crests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-crests", children: crests.map((url, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-crest", style: { backgroundImage: `url(${url})` }, "aria-hidden": "true" }, `${url}-${i}`)) }) : null
+          crests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-crests", children: crests.map((url, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-crest", style: { backgroundImage: `url(${url})` }, "aria-hidden": "true" }, `${url}-${i}`)) }) : null,
+          codes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-dash-tile-crests", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Marks, { codes }) }) : null
         ] })
       ) : null
     ] }),
@@ -13513,7 +13566,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 }
 
 /* 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; }
@@ -13534,8 +13587,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .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
@@ -13557,6 +13610,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
    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\u015F\u0131la\u015Fma" 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
@@ -13577,7 +13642,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* 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; }
@@ -13585,7 +13651,6 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
    (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
@@ -13638,8 +13703,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
   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;
@@ -13648,6 +13713,34 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
   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 \xB7 in 6 h", "Ba\u015Flama 02:30 \xB7 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 " \xB7 "-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); }
@@ -14919,7 +15012,7 @@ function StatsWidget(props) {
     introDoneRef.current = true;
   }, []);
   const convStorageKey = `ss-w-conv:${cfg?.operatorId ?? ""}:${cfg?.userContext?.operatorUserId ?? "anon"}`;
-  const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0, convStorageKey);
+  const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0, convStorageKey, cfg?.page);
   const [hasToday, setHasToday] = (0, import_react74.useState)(false);
   const liveCardWatches = (0, import_react74.useMemo)(() => {
     const seen = /* @__PURE__ */ new Set();