@sensiblestats/widget-react 0.13.1 → 0.14.1

package/dist/styles.css

@@ -250,3 +250,71 @@
 @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: 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-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. 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; }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: #f5eefb; }

package/package.json

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