@sensiblestats/widget-react 0.72.2 → 0.73.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.73.1
+
+### Patch Changes
+
+- Goal dashboard rows are compact cards: 60px tall with 8px corners, and a tile's badge shows as a price column on the right instead of a pill under the subtitle.
+
+## 0.73.0
+
+### Minor Changes
+
+- Set the numbers: each row is now one sentence with its numbers, a "3 ready" or "ready at 4.97" line, and a round send button. The picks and combo legs no longer show inside the tool; they appear in the chat after the send. A fourth row offers a second combo that starts high ("Total 50.0 with 6 matches"). The English combo row reads "Combo of 3 paying 5.0".
+
 ## 0.72.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -167,7 +167,10 @@ var STRINGS = {
       dialName: "Set the numbers and Build a combo",
       maxPriceRow: "{count} picks, max {price}",
       minPriceRow: "Picks from {price} up",
-      comboRow: "A combo of {legs} matches priced at about {total}",
+      comboRow: "Combo of {legs} paying {total}",
+      bigComboRow: "Total {total} with {legs} matches",
+      readyCount: (n) => `${n} ready`,
+      readyAt: (total) => `ready at ${total.toFixed(2)}`,
       maxPriceDisplay: (count, price) => `${count} picks, max ${price.toFixed(2)}`,
       maxPriceMessage: (count, price) => `Show me ${count} picks priced at ${price.toFixed(2)} or less.`,
       minPriceDisplay: (count, price) => `${count} picks from ${price.toFixed(2)} up`,
@@ -499,6 +502,9 @@ var STRINGS = {
       maxPriceRow: "{count} se\xE7im, en fazla {price}",
       minPriceRow: "{price} ve \xFCzeri se\xE7imler",
       comboRow: "Yakla\u015F\u0131k {total} oranl\u0131 {legs} ma\xE7l\u0131k kombin",
+      bigComboRow: "{legs} ma\xE7la toplam {total}",
+      readyCount: (n) => `${n} haz\u0131r`,
+      readyAt: (total) => `${total.toFixed(2)} ile haz\u0131r`,
       maxPriceDisplay: (count, price) => `${count} se\xE7im, en fazla ${price.toFixed(2)}`,
       maxPriceMessage: (count, price) => `${price.toFixed(2)} veya alt\u0131 oranl\u0131 ${count} se\xE7im g\xF6ster.`,
       minPriceDisplay: (count, price) => `${count} se\xE7im, ${price.toFixed(2)} ve \xFCzeri`,
@@ -4194,11 +4200,13 @@ function HeroTile({ tile, onTap, oddsLabel }) {
     ] })
   ] });
 }
-function DashboardTile({ tile, onTap, oddsLabel = "Odds" }) {
+function DashboardTile({ tile, onTap, oddsLabel = "Odds", badgePlacement = "meta" }) {
   if (tile.emphasis === "hero") return /* @__PURE__ */ (0, import_jsx_runtime20.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 hasMeta = Boolean(tile.badgeText) || crests.length > 0;
+  const endBadge = badgePlacement === "end" && tile.badgeText ? tile.badgeText : null;
+  const metaBadge = endBadge ? null : tile.badgeText;
+  const hasMeta = Boolean(metaBadge) || crests.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { type: "button", className: `ss-w-dash-tile ${spanClass}`, onClick: onTap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-icon", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DashboardIcon, { name: tile.icon }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ss-w-dash-tile-body", children: [
@@ -4209,12 +4217,12 @@ function DashboardTile({ tile, onTap, oddsLabel = "Odds" }) {
         // 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_runtime20.jsxs)("span", { className: "ss-w-dash-tile-meta", children: [
-          tile.badgeText ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-badge", children: tile.badgeText }) : null,
+          metaBadge ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-badge", children: metaBadge }) : null,
           crests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-crests", children: crests.map((url, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-crest", style: { backgroundImage: `url(${url})` }, "aria-hidden": "true" }, `${url}-${i}`)) }) : null
         ] })
       ) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronIcon, {}) })
+    endBadge ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-value", children: endBadge }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-dash-tile-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronIcon, {}) })
   ] });
 }
 
@@ -4229,12 +4237,14 @@ function layoutClass(layout) {
   return Object.prototype.hasOwnProperty.call(LAYOUT_CLASSES, layout) ? LAYOUT_CLASSES[layout] : LAYOUT_CLASSES.goal;
 }
 function GreetingDashboard({ dashboard, onTap, oddsLabel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `ss-w-dash ${layoutClass(dashboard.layout)}`, children: [
+  const layout = layoutClass(dashboard.layout);
+  const badgePlacement = layout === LAYOUT_CLASSES.goal ? "end" : "meta";
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `ss-w-dash ${layout}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ss-w-dash-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-dash-title", children: dashboard.title }),
       dashboard.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-dash-subtitle", children: dashboard.subtitle }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ss-w-dash-grid", children: dashboard.tiles.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DashboardTile, { tile: t, onTap: () => onTap(t, i), oddsLabel }, `${t.title}-${i}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ss-w-dash-grid", children: dashboard.tiles.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DashboardTile, { tile: t, onTap: () => onTap(t, i), oddsLabel, badgePlacement }, `${t.title}-${i}`)) }),
     dashboard.footerTip ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-dash-foot", children: dashboard.footerTip }) : null
   ] });
 }
@@ -8753,7 +8763,21 @@ function ComboPreview({ cell, formatKickoff }) {
 function Unavailable({ text }) {
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-tool-unavailable", children: text });
 }
-function SetNumbersTool({ grid, strings, streaming, formatKickoff, onSend, onClose }) {
+function AskRow({ icon, ask, ready, send }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: "ss-w-tool-row ss-w-tool-row--ask", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "ss-w-tool-icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "ss-w-tool-main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-tool-ask", children: ask }),
+      ready ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "ss-w-tool-ready", children: ready }) : null
+    ] }),
+    send
+  ] });
+}
+function RoundSend({ label, display, disabled, onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", className: "ss-w-tool-go", "aria-label": `${label}: ${display}`, disabled, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SendIcon, {}) });
+}
+var BIG_COMBO = { total: 50, legs: 6 };
+function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
   const limits = singlesLimits(grid);
   const floors = singlesFloors(grid);
   const totals = comboTotals(grid);
@@ -8764,10 +8788,14 @@ function SetNumbersTool({ grid, strings, streaming, formatKickoff, onSend, onClo
   const [start] = (0, import_react51.useState)(() => startCombo(grid, totals, legChoices, START.comboTotal, START.comboLegs));
   const [total, setTotal] = (0, import_react51.useState)(start.total);
   const [legs, setLegs] = (0, import_react51.useState)(start.legs);
+  const [bigStart] = (0, import_react51.useState)(() => startCombo(grid, totals, legChoices, BIG_COMBO.total, BIG_COMBO.legs));
+  const [bigTotal, setBigTotal] = (0, import_react51.useState)(bigStart.total);
+  const [bigLegs, setBigLegs] = (0, import_react51.useState)(bigStart.legs);
   const [announcement, setAnnouncement] = (0, import_react51.useState)("");
   const maxCell = findSingles(grid.singles, maxPrice, count);
   const minCell = findSingles(grid.singlesFrom, minPrice, count);
   const comboCell = findCombo(grid, total, legs);
+  const bigCell = findCombo(grid, bigTotal, bigLegs);
   const announce = (display, available) => setAnnouncement(available ? display : `${display}. ${strings.unavailable}`);
   const chooseMax = (v) => {
     setMaxPrice(v);
@@ -8787,41 +8815,79 @@ function SetNumbersTool({ grid, strings, streaming, formatKickoff, onSend, onClo
     setLegs(l);
     announce(strings.comboDisplay(l, v), !!findCombo(grid, v, l));
   };
+  const chooseBigLegs = (v) => {
+    setBigLegs(v);
+    announce(strings.comboDisplay(v, bigTotal), !!findCombo(grid, bigTotal, v));
+  };
+  const chooseBigTotal = (v) => {
+    const l = legsForTotal(grid, v, bigLegs);
+    setBigTotal(v);
+    setBigLegs(l);
+    announce(strings.comboDisplay(l, v), !!findCombo(grid, v, l));
+  };
   const maxChoices = limits.map((v) => ({ value: v, text: v.toFixed(2), available: !!findSingles(grid.singles, v, count) }));
   const minChoices = floors.map((v) => ({ value: v, text: v.toFixed(2), available: !!findSingles(grid.singlesFrom, v, count) }));
   const totalChoices = totals.map((v) => ({ value: v, text: v.toFixed(1), available: legChoices.some((n) => !!findCombo(grid, v, n)) }));
-  const legChoicesList = legChoices.map((n) => ({ value: n, text: String(n), available: !!findCombo(grid, total, n) }));
+  const legChoicesFor = (t) => legChoices.map((n) => ({ value: n, text: String(n), available: !!findCombo(grid, t, n) }));
+  const singlesReady = (cell) => cell ? strings.readyCount(cell.picks.length) : strings.unavailable;
+  const comboReady = (cell) => cell ? strings.readyAt(cell.combo.total) : strings.unavailable;
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(PresetToolModal, { title: strings.setNumbers, closeLabel: strings.close, onClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: "ss-w-tool-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-tool-ask", children: fillTemplate(strings.maxPriceRow, {
-        count: String(count),
-        price: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: maxPrice.toFixed(2), choices: maxChoices, label: strings.maxPriceName, notToday: strings.notToday, onChoose: chooseMax })
-      }) }),
-      maxCell ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PickList, { picks: maxCell.picks, formatKickoff }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Unavailable, { text: strings.unavailable }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SendButton, { label: strings.send, display: strings.maxPriceDisplay(count, maxPrice), disabled: !maxCell || streaming, onClick: () => {
-        if (maxCell) onSend(maxPriceAsk(maxCell, strings));
-      } })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: "ss-w-tool-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-tool-ask", children: fillTemplate(strings.minPriceRow, {
-        count: String(count),
-        price: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: minPrice.toFixed(2), choices: minChoices, label: strings.minPriceName, notToday: strings.notToday, onChoose: chooseMin })
-      }) }),
-      minCell ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PickList, { picks: minCell.picks, formatKickoff }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Unavailable, { text: strings.unavailable }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SendButton, { label: strings.send, display: strings.minPriceDisplay(count, minPrice), disabled: !minCell || streaming, onClick: () => {
-        if (minCell) onSend(minPriceAsk(minCell, strings));
-      } })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: "ss-w-tool-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-tool-ask", children: fillTemplate(strings.comboRow, {
-        legs: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: String(legs), choices: legChoicesList, label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseLegs }),
-        total: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: total.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseTotal })
-      }) }),
-      comboCell ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ComboPreview, { cell: comboCell, formatKickoff }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Unavailable, { text: strings.unavailable }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SendButton, { label: strings.send, display: strings.comboDisplay(legs, total), disabled: !comboCell || streaming, onClick: () => {
-        if (comboCell) onSend(comboAsk(comboCell, strings));
-      } })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      AskRow,
+      {
+        icon: "\u{1F3AF}",
+        ask: fillTemplate(strings.maxPriceRow, {
+          count: String(count),
+          price: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: maxPrice.toFixed(2), choices: maxChoices, label: strings.maxPriceName, notToday: strings.notToday, onChoose: chooseMax })
+        }),
+        ready: singlesReady(maxCell),
+        send: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RoundSend, { label: strings.send, display: strings.maxPriceDisplay(count, maxPrice), disabled: !maxCell || streaming, onClick: () => {
+          if (maxCell) onSend(maxPriceAsk(maxCell, strings));
+        } })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      AskRow,
+      {
+        icon: "\u{1F4C8}",
+        ask: fillTemplate(strings.minPriceRow, {
+          count: String(count),
+          price: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: minPrice.toFixed(2), choices: minChoices, label: strings.minPriceName, notToday: strings.notToday, onChoose: chooseMin })
+        }),
+        ready: singlesReady(minCell),
+        send: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RoundSend, { label: strings.send, display: strings.minPriceDisplay(count, minPrice), disabled: !minCell || streaming, onClick: () => {
+          if (minCell) onSend(minPriceAsk(minCell, strings));
+        } })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      AskRow,
+      {
+        icon: "\u2728",
+        ask: fillTemplate(strings.comboRow, {
+          legs: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: String(legs), choices: legChoicesFor(total), label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseLegs }),
+          total: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: total.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseTotal })
+        }),
+        ready: comboReady(comboCell),
+        send: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RoundSend, { label: strings.send, display: strings.comboDisplay(legs, total), disabled: !comboCell || streaming, onClick: () => {
+          if (comboCell) onSend(comboAsk(comboCell, strings));
+        } })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      AskRow,
+      {
+        icon: "\u{1F3C6}",
+        ask: fillTemplate(strings.bigComboRow, {
+          legs: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: String(bigLegs), choices: legChoicesFor(bigTotal), label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseBigLegs }),
+          total: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: bigTotal.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseBigTotal })
+        }),
+        ready: comboReady(bigCell),
+        send: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RoundSend, { label: strings.send, display: strings.comboDisplay(bigLegs, bigTotal), disabled: !bigCell || streaming, onClick: () => {
+          if (bigCell) onSend(comboAsk(bigCell, strings));
+        } })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-vh", "aria-live": "polite", children: announcement })
   ] });
 }
@@ -9096,7 +9162,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
           buttonRef: dialButtonRef
         }
       ) : null,
-      tool && presetGrid && onChatTab ? tool.kind === "numbers" ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(SetNumbersTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, formatKickoff, onSend: sendAsk, onClose: closeTool }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(BuildComboTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, formatKickoff, initialTotal: tool.total, initialLegs: tool.legs, onSend: sendAsk, onClose: closeTool }) : null
+      tool && presetGrid && onChatTab ? tool.kind === "numbers" ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(SetNumbersTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, onSend: sendAsk, onClose: closeTool }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(BuildComboTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, formatKickoff, initialTotal: tool.total, initialLegs: tool.legs, onSend: sendAsk, onClose: closeTool }) : null
     ] }),
     monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TodayPanel, { discovery, ui, monitor }),
     monitor && monitor.activeTab === "following" && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(MatchesPanel, { monitor, ui, slip, onAsk: handleAsk }),
@@ -9602,6 +9668,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-tool-pick-price { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; color: var(--ss-w-accent); }
 .ss-w-tool-math { padding: 6px 8px; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; text-align: right; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; overflow-wrap: anywhere; }
 .ss-w-tool-unavailable { padding: 6px 8px; font-size: 12px; color: var(--ss-w-faint); border: 1px dashed var(--ss-w-line); border-radius: 8px; }
+.ss-w-tool-row--ask { flex-direction: row; align-items: center; gap: 10px; border-left-width: 1px; }
+.ss-w-tool-icon { flex: none; font-size: 20px; line-height: 1; }
+.ss-w-tool-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
+.ss-w-tool-ready { padding: 2px 8px; font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, transparent); border-radius: 10px; }
+.ss-w-tool-go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--ss-w-accent); border: none; border-radius: 50%; cursor: pointer; }
+.ss-w-tool-go:disabled { color: var(--ss-w-faint); background: var(--ss-w-bubble); cursor: not-allowed; }
+.ss-w-tool-go:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
 .ss-w-tool-send { align-self: flex-end; min-height: 40px; padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--ss-w-accent); border: none; border-radius: 20px; cursor: pointer; }
 .ss-w-tool-send:disabled { color: var(--ss-w-faint); background: var(--ss-w-bubble); cursor: not-allowed; }
 .ss-w-tool-foot .ss-w-tool-send { width: 100%; }
@@ -9804,9 +9877,21 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
    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. */
+/* 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
+   panel is 3.9:1, under the 4.5:1 small text needs. */
 .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; }
+.ss-w-dash--goal .ss-w-dash-tile { gap: 12px; min-height: 60px; padding: 8px 12px 8px 14px; border-radius: 8px; }
+.ss-w-dash--goal .ss-w-dash-tile:hover { background: var(--ss-w-bubble); }
+.ss-w-dash--goal .ss-w-dash-tile-icon { width: 24px; height: 24px; font-size: 20px; }
+.ss-w-dash--goal .ss-w-dash-tile-body { gap: 1px; }
+.ss-w-dash--goal .ss-w-dash-tile-title { font-size: 15px; line-height: 1.25; }
+.ss-w-dash--goal .ss-w-dash-tile-subtitle { font-size: 13px; line-height: 1.3; overflow-wrap: break-word; }
+.ss-w-dash-tile-value {
+  flex: none; margin-left: auto; max-width: 40%; text-align: right;
+  font-size: 16px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
+  color: color-mix(in srgb, var(--ss-w-accent) 70%, var(--ss-w-ink));
+}
 
 /* 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