@sensiblestats/widget-react 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sensiblestats/widget-react
 
+## 0.14.0
+
+### Minor Changes
+
+- Render the greeting dashboard carried on `turn_complete`: tile grid, CSS, and tap handling that turns a tile into a follow-up chat message. Older servers that never send `dashboard` render nothing new. `widget-embed` also now generates and persists a first-party anonymous visitor id (localStorage, falls back to in-memory) so greeting dashboards can be tiered for anonymous visitors.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.12.0
+
+## 0.13.1
+
+### Patch Changes
+
+- Odds movement chart: drop the direction clause from the chart's `aria-label` when the price is flat. It used to read "…currently 1.44, ." — a screen reader announced the dangling punctuation on exactly the no-movement case.
+
 ## 0.13.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
 var import_react10 = require("react");
-var import_widget_sdk4 = require("@sensiblestats/widget-sdk");
+var import_widget_sdk5 = require("@sensiblestats/widget-sdk");
 
 // src/i18n.ts
 var STRINGS = {
@@ -76,7 +76,8 @@ var STRINGS = {
     chartTimeLabel: (ms) => new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }).format(new Date(ms)),
     chartAria: (opening, current, direction, hours) => {
       const span = hours % 24 === 0 ? `${hours / 24} day${hours / 24 === 1 ? "" : "s"}` : `${hours} hour${hours === 1 ? "" : "s"}`;
-      return `Price movement over the last ${span}: opened at ${opening}, currently ${current}, ${direction}.`;
+      const drift = direction ? `, ${direction}` : "";
+      return `Price movement over the last ${span}: opened at ${opening}, currently ${current}${drift}.`;
     },
     inSlip: "In slip",
     slipAdded: (n) => n === void 0 ? "Added to slip" : `Added to slip (${n} selection${n === 1 ? "" : "s"})`,
@@ -122,7 +123,8 @@ var STRINGS = {
     chartTimeLabel: (ms) => new Intl.DateTimeFormat("tr-TR", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }).format(new Date(ms)),
     chartAria: (opening, current, direction, hours) => {
       const span = hours % 24 === 0 ? `${hours / 24} g\xFCn` : `${hours} saat`;
-      return `Son ${span} i\xE7indeki oran hareketi: ${opening} ile a\xE7\u0131ld\u0131, \u015Fu anda ${current}, ${direction}.`;
+      const drift = direction ? `, ${direction}` : "";
+      return `Son ${span} i\xE7indeki oran hareketi: ${opening} ile a\xE7\u0131ld\u0131, \u015Fu anda ${current}${drift}.`;
     },
     inSlip: "Kuponda",
     slipAdded: (n) => n === void 0 ? "Kupona eklendi" : `Kupona eklendi (${n} se\xE7im)`,
@@ -203,6 +205,27 @@ function toUserContext(cfg) {
   return cfg.userContext && Object.keys(cfg.userContext).length > 0 ? cfg.userContext : void 0;
 }
 
+// src/dashboardTap.ts
+var import_widget_sdk = require("@sensiblestats/widget-sdk");
+function isSignalEntityType(value) {
+  return Object.prototype.hasOwnProperty.call(import_widget_sdk.ENTITY_TYPE_CODES, value);
+}
+function createDashboardTapSignal(sendSignal) {
+  return (tile, index, layout) => {
+    if (!isSignalEntityType(tile.signal.entityType)) return;
+    try {
+      void sendSignal({
+        signalType: "MarketView",
+        entityType: tile.signal.entityType,
+        entityId: tile.signal.entityId,
+        dashboardLayout: layout,
+        tileIndex: index
+      }).catch(() => void 0);
+    } catch {
+    }
+  };
+}
+
 // src/theme.ts
 function themeAttrs(ui) {
   const style = {
@@ -216,10 +239,10 @@ function themeAttrs(ui) {
 
 // src/useChatStream.ts
 var import_react = require("react");
-var import_widget_sdk2 = require("@sensiblestats/widget-sdk");
+var import_widget_sdk3 = require("@sensiblestats/widget-sdk");
 
 // src/reducer.ts
-var import_widget_sdk = require("@sensiblestats/widget-sdk");
+var import_widget_sdk2 = require("@sensiblestats/widget-sdk");
 
 // src/chart.ts
 var CHART_VIEW_W = 320;
@@ -505,7 +528,11 @@ function applyEvent(state, event) {
         actionsLoading: false,
         popupText,
         conversationId: event.data.conversationId ?? state.conversationId,
-        messages: mapActive(state, (t) => ({ ...t, done: true }))
+        messages: mapActive(state, (t) => ({
+          ...t,
+          done: true,
+          greetingDashboard: event.data.dashboard ?? void 0
+        }))
       };
     }
     case "error": {
@@ -557,7 +584,7 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
       try {
         for await (const event of handle) dispatch({ kind: "EVENT", event });
       } catch (err) {
-        if (err instanceof import_widget_sdk2.WidgetSdkError) onError(err);
+        if (err instanceof import_widget_sdk3.WidgetSdkError) onError(err);
         else if (err?.name === "AbortError") {
         } else throw err;
       } finally {
@@ -628,6 +655,89 @@ 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
+};
+function DashboardIcon({ name }) {
+  const Glyph = DASHBOARD_ICONS[name] ?? TargetIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Glyph, {});
+}
 
 // src/components/GreetingBubble.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -786,7 +896,7 @@ var import_react5 = require("react");
 
 // src/components/AddToSlipButton.tsx
 var import_react4 = require("react");
-var import_widget_sdk3 = require("@sensiblestats/widget-sdk");
+var import_widget_sdk4 = require("@sensiblestats/widget-sdk");
 
 // src/slip.ts
 var ADD_TO_SLIP_TIMEOUT_MS = 1e4;
@@ -849,7 +959,7 @@ function SlipButton({ selection, shownOdds, marketName, slip, ui }) {
     setPending(true);
     try {
       const raw = await withTimeout(Promise.resolve(handler(selection)));
-      if (raw != null && !(0, import_widget_sdk3.isAddToSlipResult)(raw)) throw new Error("malformed add-to-slip result");
+      if (raw != null && !(0, import_widget_sdk4.isAddToSlipResult)(raw)) throw new Error("malformed add-to-slip result");
       const result = raw ?? void 0;
       setToast(resultToToast(result, shownOdds || selection.oddsDecimal.toFixed(2), ui));
       setSettled(isTerminal(result));
@@ -1027,7 +1137,9 @@ function directionWord(vm, ui) {
   return "";
 }
 function OddsMovementCard({ vm, ui }) {
-  const aria = ui?.chartAria ? ui.chartAria(vm.opening, vm.current, directionWord(vm, ui), vm.windowHours) : `Price movement over the last ${vm.windowHours} hours: opened at ${vm.opening}, currently ${vm.current}, ${directionWord(vm, ui)}.`;
+  const word = directionWord(vm, ui);
+  const drift = word ? `, ${word}` : "";
+  const aria = ui?.chartAria ? ui.chartAria(vm.opening, vm.current, word, vm.windowHours) : `Price movement over the last ${vm.windowHours} hours: opened at ${vm.opening}, currently ${vm.current}${drift}.`;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-omcard", children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-om-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ss-w-om-market", children: vm.market }),
@@ -1097,27 +1209,75 @@ function ActionButtons({ actions, loading, disabled, onAct }) {
   ] });
 }
 
-// src/components/ChatMessage.tsx
+// src/components/dashboard/DashboardTile.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function ChatMessage({ message, disabled, onAct, ui, slip }) {
+var MAX_CRESTS = 3;
+function DashboardTile({ tile, onTap }) {
+  const spanClass = tile.span === "full" ? "ss-w-dash-tile--full" : "ss-w-dash-tile--half";
+  const crests = (tile.imageUrls ?? []).slice(0, MAX_CRESTS);
+  const hasMeta = Boolean(tile.badgeText) || crests.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { type: "button", className: `ss-w-dash-tile ${spanClass}`, onClick: onTap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-icon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DashboardIcon, { name: tile.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "ss-w-dash-tile-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-title", children: tile.title }),
+      tile.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-subtitle", children: 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_runtime14.jsxs)("span", { className: "ss-w-dash-tile-meta", children: [
+          tile.badgeText ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-badge", children: tile.badgeText }) : null,
+          crests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-crests", children: crests.map((url, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-crest", style: { backgroundImage: `url(${url})` }, "aria-hidden": "true" }, `${url}-${i}`)) }) : null
+        ] })
+      ) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronIcon, {}) })
+  ] });
+}
+
+// src/components/dashboard/GreetingDashboard.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LAYOUT_CLASSES = {
+  market: "ss-w-dash--market",
+  goal: "ss-w-dash--goal",
+  discovery: "ss-w-dash--discovery"
+};
+function layoutClass(layout) {
+  return Object.prototype.hasOwnProperty.call(LAYOUT_CLASSES, layout) ? LAYOUT_CLASSES[layout] : LAYOUT_CLASSES.goal;
+}
+function GreetingDashboard({ dashboard, onTap }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `ss-w-dash ${layoutClass(dashboard.layout)}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-dash-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-dash-title", children: dashboard.title }),
+      dashboard.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-dash-subtitle", children: dashboard.subtitle }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ss-w-dash-grid", children: dashboard.tiles.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DashboardTile, { tile: t, onTap: () => onTap(t, i) }, `${t.title}-${i}`)) }),
+    dashboard.footerTip ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-dash-foot", children: dashboard.footerTip }) : null
+  ] });
+}
+
+// src/components/ChatMessage.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ChatMessage({ message, disabled, onAct, onTap, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
+    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_runtime14.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  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.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 }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
 
 // src/components/IntentChips.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
 // src/scroll.ts
@@ -1127,8 +1287,8 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function MessageList({ controller, ui, slip }) {
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function MessageList({ controller, ui, slip, onDashboardTap }) {
   const { state, send } = controller;
   const listRef = (0, import_react7.useRef)(null);
   const endRef = (0, import_react7.useRef)(null);
@@ -1136,8 +1296,9 @@ function MessageList({ controller, ui, slip }) {
   (0, import_react7.useEffect)(() => {
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
   }, [state.messages, state.status]);
-  const empty = state.messages.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  const hasUserMessage = state.messages.some((m) => m.role === "user");
+  const hasDashboard = state.messages.some((m) => m.role === "assistant" && m.greetingDashboard);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       className: "ss-w-list",
@@ -1147,26 +1308,30 @@ function MessageList({ controller, ui, slip }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           ChatMessage,
           {
             message: m,
             disabled: state.isStreaming,
             onAct: (a) => send(a.message, { actionId: a.actionId, displayText: a.label }),
+            onTap: (tile, index) => {
+              send(tile.actionValue, { displayText: tile.title });
+              if (m.role === "assistant" && m.greetingDashboard) onDashboardTap?.(tile, index, m.greetingDashboard.layout);
+            },
             ui,
             slip
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        state.status ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
-        empty ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: endRef })
+        !hasUserMessage && !hasDashboard ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: endRef })
       ]
     }
   );
@@ -1174,7 +1339,7 @@ function MessageList({ controller, ui, slip }) {
 
 // src/components/ChatInput.tsx
 var import_react8 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
   const [value, setValue] = (0, import_react8.useState)("");
   const submit = () => {
@@ -1189,14 +1354,14 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SendIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-input", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
+    streaming ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SendIcon, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
   const [modal, setModal] = (0, import_react9.useState)(false);
@@ -1210,7 +1375,7 @@ function useIsModal() {
   }, []);
   return modal;
 }
-function ChatPanel({ controller, ui, slip }) {
+function ChatPanel({ controller, ui, slip, onDashboardTap }) {
   const { state, close, stop, send } = controller;
   const isModal = useIsModal();
   (0, import_react9.useEffect)(() => {
@@ -1220,10 +1385,10 @@ function ChatPanel({ controller, ui, slip }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageList, { controller, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageList, { controller, ui, slip, onDashboardTap }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -1480,17 +1645,72 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 @media (prefers-reduced-motion: reduce) {
   .ss-w-abtn-shimmer { animation: none; }
 }
+
+/* greeting dashboard */
+.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
+.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; }
+.ss-w-dash-foot { font-size: 11px; color: var(--ss-w-faint); margin-top: 2px; }
+
+.ss-w-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.ss-w-dash-tile--half { grid-column: span 1; }
+.ss-w-dash-tile--full { grid-column: 1 / -1; }
+
+.ss-w-dash-tile {
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);
+  background: var(--ss-w-panel); text-align: left; cursor: pointer; width: 100%;
+  color: inherit; font: inherit;
+  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-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-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
+   nowrap badge (~70px) sitting beside icon+chevron in a ~180px half-span tile left the
+   title column at ~22px wide, wrapping every title character-by-character. Here the row
+   gets the body's full width, so a badge this size is comfortably inside it. */
+.ss-w-dash-tile-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
+.ss-w-dash-tile-badge { flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
+
+.ss-w-dash-tile-crests { flex: none; display: flex; align-items: center; }
+.ss-w-dash-tile-crest {
+  width: 18px; height: 18px; border-radius: 50%;
+  background-size: cover; background-position: center; background-color: var(--ss-w-bubble);
+  margin-left: -6px; border: 2px solid var(--ss-w-panel);    /* overlapping stack, capped at 3 in DashboardTile */
+}
+.ss-w-dash-tile-crest:first-child { margin-left: 0; }
+
+/* Market: default 2-column grid, tiles get the same accent rail as the other card
+   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); }
+
+/* Goal: one column of pill rows. */
+.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. */
+.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; }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: #f5eefb; }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
       return { client: props.client, conversation: props.client.conversation() };
     }
     const cfg = props.config;
-    const client = new import_widget_sdk4.StatsWidgetClient(toClientOptions(cfg));
+    const client = new import_widget_sdk5.StatsWidgetClient(toClientOptions(cfg));
     return { client, conversation: client.conversation(toUserContext(cfg)) };
   } catch (err) {
     console.error("[StatsWidget] failed to initialize:", err instanceof Error ? err.message : err);
@@ -1525,6 +1745,10 @@ function StatsWidget(props) {
     }),
     [props.config?.onAddToSlip, controller.state.conversationId, built]
   );
+  const onDashboardTap = (0, import_react10.useMemo)(
+    () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input)) : void 0,
+    [built]
+  );
   (0, import_react10.useEffect)(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
@@ -1532,7 +1756,7 @@ function StatsWidget(props) {
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChatPanel, { controller, ui, slip, onDashboardTap }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ChatFab,
     {
       label: ui.launcherLabel,