@helpway/react 0.15.2 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@helpway/react",
-	"version": "0.15.2",
+	"version": "0.16.0",
 	"description": "Official React SDK for Helpway — drop-in AI chat support widget with headless hooks for custom UIs.",
 	"keywords": [
 		"helpway",
@@ -40,6 +40,7 @@
 	"scripts": {
 		"build": "tsup",
 		"typecheck": "tsc --noEmit",
+		"test": "bun test",
 		"sync:icons": "bun scripts/sync-icons.ts",
 		"prepublishOnly": "bun run build",
 		"prepack": "bun run build && bun scripts/apply-publish-config.ts",
@@ -51,9 +52,10 @@
 		"zustand": "^5.0.11"
 	},
 	"devDependencies": {
+		"@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.213",
+		"@happy-dom/global-registrator": "^20.14.0",
 		"@types/react": "^19.1.6",
 		"@types/react-dom": "^19.1.6",
-		"@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.213",
 		"react-dom": "^19.1.6",
 		"tsup": "^8.3.5",
 		"typescript": "~5.9.3"

package/src/themed/styles.css

@@ -2903,6 +2903,62 @@
 	margin-top: 0;
 }
 
+/* ── Awaiting-reply marker ───────────────────────────────
+   A state, not an alert. It sits on a row next to product chrome and must not
+   compete with the primary action, so: muted ink, no accent colour, no pill.
+   Labelled rather than counted — a bare number in a coloured badge reads as
+   "unread" and says nothing about what it counts, while these three words say
+   the thing that decides whether the visitor comes back. */
+.hw-awaiting {
+	margin-top: 2px;
+	padding-left: 44px;
+	font-size: 11px;
+	line-height: 1.4;
+	color: var(--hw-text-3, var(--hw-text-muted));
+}
+
+/* ── Closed-state dock ───────────────────────────────────
+   One owner for the strip above the launcher.
+
+   The incoming-reply card and the announcement stack were two independent
+   absolute pins on the same anchor — both `bottom: calc(100% + 12px); right: 0`
+   — so whenever a visitor had an unread reply AND unseen announced content,
+   the two cards drew on top of each other. Neither was readable and the one
+   underneath was unclickable. Nothing in either component could detect the
+   other, which is the tell: the bug is that the region had no owner, not that
+   one of the cards was positioned wrong.
+
+   The dock pins once; its children lay out in flow. Order in the markup is the
+   priority order and it is deliberate — an actual reply from a person sits
+   nearest the launcher, where the thumb already is, and announcements stack
+   above it. Right-aligned rather than stretched because the two cards are
+   different widths (300px vs 340px) and a shared left edge would read as one
+   ragged surface instead of two cards. */
+.hw-preview-dock {
+	position: absolute;
+	bottom: calc(100% + 12px);
+	right: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 8px;
+	/* Empty dock must not sit over the page. With no children it has zero size,
+	   but the gaps between cards are dead space either way — the cards take
+	   their own events back below. */
+	pointer-events: none;
+}
+
+/* Docked children give up their own pin — two classes, so this wins over the
+   single-class `.hw-preview` / `.hw-preview-stack` rules whatever the source
+   order. */
+.hw-preview-dock > .hw-preview,
+.hw-preview-dock > .hw-preview-stack {
+	position: relative;
+	bottom: auto;
+	right: auto;
+	pointer-events: auto;
+}
+
 /* ── Preview closing animation ──────────────────────────── */
 .hw-preview--closing {
 	animation: hw-preview-out 0.2s ease-in forwards;
@@ -2936,6 +2992,30 @@
 	width: 100%;
 }
 
+/* ── Overflow row ────────────────────────────────────────
+   What is left when the announcement stack is clipped. Deliberately not a
+   card: a fourth bordered box would be the volume problem it exists to
+   solve. A single quiet line, right-aligned with the cards above it, that
+   opens the next unread update. */
+.hw-preview-more {
+	align-self: flex-end;
+	padding: 4px 10px;
+	border: 0;
+	border-radius: 999px;
+	background: var(--hw-bg);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--hw-border);
+	color: var(--hw-text-2);
+	font: inherit;
+	font-size: 12px;
+	line-height: 1.4;
+	cursor: pointer;
+	transition: background 0.12s, color 0.12s;
+}
+.hw-preview-more:hover {
+	background: var(--hw-bg-hover);
+	color: var(--hw-text);
+}
+
 /* ── Announcement preview modifier ─────────────────────── */
 .hw-preview--announcement {
 	width: 340px;