@sensiblestats/widget-react 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sensiblestats/widget-react
 
+## 0.14.1
+
+### Patch Changes
+
+- 5dce658: Greeting dashboard UX refinements from design review: tile icons are now
+  emoji (matching the betting mockup) rendered at a larger size instead of the
+  small monochrome line glyphs; the greeting bubble text is suppressed when a
+  dashboard is present so the question shows once (as the dashboard title)
+  rather than twice; and the discovery full-span trends tile aligns its icon
+  and title on a single row.
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -655,88 +655,27 @@ function SendIcon() {
 function CloseIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2" }) });
 }
-function FootballIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M12 7l3.5 2.5-1.3 4.1H9.8L8.5 9.5z" })
-  ] });
-}
-function GoalNetIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "5", width: "18", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "1", d: "M3 9h18M3 13h18M8 5v12M16 5v12" })
-  ] });
-}
-function BttsIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "12", r: "4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "16", cy: "12", r: "4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6" })
-  ] });
-}
-function CardIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "3", width: "12", height: "18", rx: "1.5", fill: "currentColor" }) });
-}
-function CornerFlagIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "1.6", d: "M6 21V4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M6 4l11 3.5L6 11z" })
-  ] });
-}
-function PlayerIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "7", r: "3.2", fill: "currentColor" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M5 20c0-4 3-6.5 7-6.5s7 2.5 7 6.5z" })
-  ] });
-}
-function TargetIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "8.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1.4", fill: "currentColor" })
-  ] });
-}
-function TrophyIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M7 3h10v4a5 5 0 0 1-5 5 5 5 0 0 1-5-5zM9 15h6v3H9zM7 19h10v2H7z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "1.4", d: "M7 5H4v2a3 3 0 0 0 3 3M17 5h3v2a3 3 0 0 1-3 3" })
-  ] });
-}
-function ChartLineIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 17l5-6 4 3 7-9" }) });
-}
-function ChartBarIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M5 12h3v8H5zM10.5 7h3v13h-3zM16 15h3v5h-3z" }) });
-}
-function ChatIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "1.6", d: "M4 5h16v11H9l-4 4z" }) });
-}
-function FireIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M12 2c1 3-2 4-2 7a3 3 0 0 0 6 0c1 1 2 2.5 2 4.5A6 6 0 0 1 6 14c0-4 3-5 3-9 1 1 1.5 2 1.5 3C11.5 6 11 4 12 2z" }) });
-}
-function SparkleIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M12 2l1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6z" }) });
-}
 function ChevronIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
-var DASHBOARD_ICONS = {
-  football: FootballIcon,
-  "goal-net": GoalNetIcon,
-  btts: BttsIcon,
-  card: CardIcon,
-  "corner-flag": CornerFlagIcon,
-  player: PlayerIcon,
-  target: TargetIcon,
-  trophy: TrophyIcon,
-  "chart-line": ChartLineIcon,
-  "chart-bar": ChartBarIcon,
-  chat: ChatIcon,
-  fire: FireIcon,
-  sparkle: SparkleIcon
+var DASHBOARD_EMOJI = {
+  football: "\u26BD",
+  "goal-net": "\u{1F945}",
+  btts: "\u{1F91D}",
+  card: "\u{1F7E8}",
+  "corner-flag": "\u{1F6A9}",
+  player: "\u{1F464}",
+  target: "\u{1F3AF}",
+  trophy: "\u{1F3C6}",
+  "chart-line": "\u{1F4C8}",
+  "chart-bar": "\u{1F4CA}",
+  chat: "\u{1F4AC}",
+  fire: "\u{1F525}",
+  sparkle: "\u2728"
 };
 function DashboardIcon({ name }) {
-  const Glyph = DASHBOARD_ICONS[name] ?? TargetIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, {});
+  const glyph = Object.prototype.hasOwnProperty.call(DASHBOARD_EMOJI, name) ? DASHBOARD_EMOJI[name] : DASHBOARD_EMOJI.target;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ss-w-dash-emoji", "aria-hidden": "true", children: glyph });
 }
 
 // src/components/GreetingBubble.tsx
@@ -1263,7 +1202,7 @@ function ChatMessage({ message, disabled, onAct, onTap, ui, slip }) {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Markdown, { text: message.text }) : null,
+    message.text && !message.greetingDashboard ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Markdown, { text: message.text }) : null,
     message.greetingDashboard ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GreetingDashboard, { dashboard: message.greetingDashboard, onTap }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
@@ -1665,7 +1604,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
   min-width: 0;                      /* the panel is min(400px, 100vw - 40px): without this,
                                         a long Turkish title blows the column out */
 }
-.ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ss-w-accent); font-size: 18px; }
+.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; }
@@ -1695,7 +1635,19 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }
 .ss-w-dash--goal .ss-w-dash-tile { border-radius: 999px; padding: 10px 14px; }
 
-/* Discovery: tinted bento cards. */
+/* 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. */
+.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; }
+/* The full-span trends tile has the whole panel width, so its icon and title sit on one row
+   (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; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(1) { background: #eef8f1; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: #eef3fb; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: #fdf6ec; }