@sensiblestats/widget-react 0.35.0 → 0.36.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/StatsWidget.tsx
-import { useEffect as useEffect9, useMemo as useMemo2, useRef as useRef6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo2, useRef as useRef7 } from "react";
 import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
 
 // src/kickoff.ts
@@ -170,6 +170,7 @@ function normalizeUi(cfg) {
     cta: cfg.cta,
     surface: cfg.surface,
     ink: cfg.ink,
+    pinIcon: cfg.pinIcon ?? "pin",
     position: cfg.position ?? "right",
     offset: { x: cfg.offset?.x ?? 20, y: cfg.offset?.y ?? 20 },
     radius: cfg.radius ?? 16,
@@ -1157,6 +1158,9 @@ function useLiveMonitor(opts) {
   };
 }
 
+// src/components/ChatFab.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+
 // src/components/BrandMark.tsx
 import { useState as useState2 } from "react";
 
@@ -1209,23 +1213,39 @@ function BrandMark({ logoUrl, className }) {
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function GreetingBubble({ text, onOpen, onDismiss, dismissLabel = "Dismiss" }) {
   return /* @__PURE__ */ jsxs("div", { className: "ss-w-greeting", role: "note", children: [
-    /* @__PURE__ */ jsx3("button", { type: "button", className: "ss-w-greeting-body", onClick: onOpen, children: text }),
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "ss-w-greeting-body", onClick: onOpen, children: [
+      /* @__PURE__ */ jsxs("span", { className: "ss-w-greeting-dots", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsx3("i", {})
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: "ss-w-greeting-text", children: text })
+    ] }),
     onDismiss ? /* @__PURE__ */ jsx3("button", { type: "button", className: "ss-w-greeting-x", "aria-label": dismissLabel, onClick: onDismiss, children: "\xD7" }) : null
   ] });
 }
 
 // src/components/ChatFab.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup, dismissLabel = "Dismiss" }) {
+function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup, dismissLabel = "Dismiss", introAllowed = false, onIntroStart }) {
   const bubble = popupText ?? greeting;
-  return /* @__PURE__ */ jsxs2("div", { className: "ss-w-fab-wrap", children: [
+  const [intro, setIntro] = useState3(false);
+  const armedRef = useRef4(introAllowed);
+  useEffect4(() => {
+    if (armedRef.current && bubble) {
+      armedRef.current = false;
+      setIntro(true);
+      onIntroStart?.();
+    }
+  }, [bubble, onIntroStart]);
+  return /* @__PURE__ */ jsxs2("div", { className: intro ? "ss-w-fab-wrap ss-w-intro" : "ss-w-fab-wrap", children: [
     bubble ? /* @__PURE__ */ jsx4(GreetingBubble, { text: bubble, onOpen, onDismiss: popupText ? onDismissPopup : void 0, dismissLabel }) : null,
     /* @__PURE__ */ jsx4("button", { type: "button", className: "ss-w-fab", "aria-label": label, onClick: onOpen, children: /* @__PURE__ */ jsx4(BrandMark, { logoUrl, className: "ss-w-fab-mark" }) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-import { useEffect as useEffect8, useState as useState16 } from "react";
+import { useEffect as useEffect9, useState as useState17 } from "react";
 
 // src/components/ChatHeader.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1238,7 +1258,7 @@ function ChatHeader({ onClose, closeLabel = "Close chat", logoUrl, headerTitle }
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect7, useRef as useRef5 } from "react";
+import { useEffect as useEffect8, useRef as useRef6 } from "react";
 
 // src/components/Markdown.tsx
 import ReactMarkdown from "react-markdown";
@@ -1256,7 +1276,7 @@ function Markdown({ text }) {
 }
 
 // src/components/EntityCardList.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var MAX_VISIBLE = 3;
 var RECORD_RE = /^(\d+)-(\d+)-(\d+)$/;
@@ -1340,7 +1360,7 @@ function ScopeTabs({ scopes, active, onSelect }) {
   )) });
 }
 function EntityCardItem({ c }) {
-  const [active, setActive] = useState3(0);
+  const [active, setActive] = useState4(0);
   const hasBody = c.scopes.length > 0;
   if (!hasBody) {
     return /* @__PURE__ */ jsx7("div", { className: "ss-w-ecard ss-w-ecard-bare", "data-kind": c.kind, children: /* @__PURE__ */ jsx7(CardHeader, { c, showScopeCrest: false }) });
@@ -1354,7 +1374,7 @@ function EntityCardItem({ c }) {
   ] });
 }
 function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
-  const [expanded, setExpanded] = useState3(false);
+  const [expanded, setExpanded] = useState4(false);
   if (cards.length === 0) return null;
   const visible = expanded ? cards : cards.slice(0, MAX_VISIBLE);
   const overflow = cards.length - MAX_VISIBLE;
@@ -1365,18 +1385,18 @@ function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMore
 }
 
 // src/components/BettingInsightList.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // src/components/AddToSlipButton.tsx
-import { useCallback as useCallback3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useState as useState5 } from "react";
 import { isAddToSlipResult } from "@sensiblestats/widget-sdk";
 
 // src/components/Toast.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var DISMISS_MS = 4e3;
 function Toast({ toast, onDismiss }) {
-  useEffect4(() => {
+  useEffect5(() => {
     if (!toast) return;
     const timer = setTimeout(onDismiss, DISMISS_MS);
     return () => clearTimeout(timer);
@@ -1394,9 +1414,9 @@ function withTimeout(value) {
   ]);
 }
 function SlipButton({ selection, shownOdds, marketName, slip, ui }) {
-  const [pending, setPending] = useState4(false);
-  const [settled, setSettled] = useState4(false);
-  const [toast, setToast] = useState4(null);
+  const [pending, setPending] = useState5(false);
+  const [settled, setSettled] = useState5(false);
+  const [toast, setToast] = useState5(null);
   const dismiss = useCallback3(() => setToast(null), []);
   const handler = slip.onAddToSlip;
   if (!ui || !handler || !selection) return null;
@@ -1461,14 +1481,14 @@ function OddsMovementBadge({
 }
 
 // src/components/Crest.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function initials2(name) {
   return (name ?? "").trim().slice(0, 1).toUpperCase() || "?";
 }
 function Crest2({ url, name, kind }) {
   const cls = kind === "comp" ? "ss-w-bi-comp-logo" : "ss-w-bi-crest";
-  const [failed, setFailed] = useState5(false);
+  const [failed, setFailed] = useState6(false);
   if (url && !failed) {
     return /* @__PURE__ */ jsx11("img", { className: cls, src: url, alt: "", "aria-hidden": "true", onError: () => setFailed(true) });
   }
@@ -1476,10 +1496,15 @@ function Crest2({ url, name, kind }) {
 }
 
 // src/components/PinToggle.tsx
-import { useCallback as useCallback4, useState as useState6 } from "react";
+import { useCallback as useCallback4, useState as useState7 } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var PIN_GLYPHS = {
+  pin: { viewBox: "0 0 24 24", strokeWidth: 1.4, transform: "scale(1.5)", d: "M9.5 1.5 14.5 6.5 13 8l-.5-.5-3 3 .3 2.2-1.4 1.4L5.6 11.3l-3.3 3.3-1-1 3.3-3.3L1.9 7.5l1.4-1.4 2.2.3 3-3L8 2.9z" },
+  star: { viewBox: "0 0 24 24", strokeWidth: 2, d: "M12 2.5l2.9 5.9 6.5.95-4.7 4.58 1.1 6.47L12 17.35 6.1 20.4l1.1-6.47L2.5 9.35l6.5-.95z" },
+  bookmark: { viewBox: "0 0 24 24", strokeWidth: 2, d: "M7 3h10a1.5 1.5 0 0 1 1.5 1.5V21l-6.5-3.6L5.5 21V4.5A1.5 1.5 0 0 1 7 3z" }
+};
 function PinToggle({ pin, monitor, ui }) {
-  const [toast, setToast] = useState6(null);
+  const [toast, setToast] = useState7(null);
   const dismiss = useCallback4(() => setToast(null), []);
   if (!monitor || !monitor.enabled) return null;
   const key = pinKey(pin);
@@ -1493,6 +1518,7 @@ function PinToggle({ pin, monitor, ui }) {
       setToast({ kind: "error", text: ui.marketLimitToast });
     }
   };
+  const glyph = PIN_GLYPHS[ui.pinIcon];
   return /* @__PURE__ */ jsxs7("div", { className: "ss-w-pin-wrap", children: [
     /* @__PURE__ */ jsx12(
       "button",
@@ -1500,10 +1526,22 @@ function PinToggle({ pin, monitor, ui }) {
         type: "button",
         className: "ss-w-pin",
         "data-on": pinned || void 0,
+        "data-icon": ui.pinIcon,
         "aria-pressed": pinned,
         "aria-label": pinned ? labels.unpin : labels.pin,
         onClick,
-        children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("path", { fill: "currentColor", d: "M9.5 1.5 14.5 6.5 13 8l-.5-.5-3 3 .3 2.2-1.4 1.4L5.6 11.3l-3.3 3.3-1-1 3.3-3.3L1.9 7.5l1.4-1.4 2.2.3 3-3L8 2.9z" }) })
+        children: /* @__PURE__ */ jsx12("svg", { viewBox: glyph.viewBox, "aria-hidden": "true", children: /* @__PURE__ */ jsx12(
+          "path",
+          {
+            transform: glyph.transform,
+            d: glyph.d,
+            fill: pinned ? "currentColor" : "none",
+            stroke: pinned ? "none" : "currentColor",
+            strokeWidth: glyph.strokeWidth,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ) })
       }
     ),
     /* @__PURE__ */ jsx12(Toast, { toast, onDismiss: dismiss })
@@ -1519,7 +1557,7 @@ function StatRows({ stats }) {
   ] }, `${s.label}:${s.value}`)) });
 }
 function ScopedStats({ scopes }) {
-  const [active, setActive] = useState7(0);
+  const [active, setActive] = useState8(0);
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
   return /* @__PURE__ */ jsxs8("div", { className: "ss-w-bi-scoped", children: [
     /* @__PURE__ */ jsx13("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ jsx13("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
@@ -1530,7 +1568,7 @@ function hasStatsContent(it) {
   return !!it.scopes && it.scopes.length >= 2 || it.stats.length > 0;
 }
 function ReasonStrip({ it, ui }) {
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState8(false);
   const hasScopes = !!it.scopes && it.scopes.length >= 2;
   const hasStats = hasStatsContent(it);
   const hasText = !!it.text;
@@ -1640,7 +1678,7 @@ function BettingInsightList({ insights, ui, slip, monitor }) {
 }
 
 // src/components/MarketOddsCardList.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function OddsRow({ vm, row, ui, slip, inSlipIds }) {
   const selection = vm.addToSlipEnabled ? marketOddsRowToSlipSelection(vm, row, slip.conversationId) : null;
@@ -1657,7 +1695,7 @@ function OddsRow({ vm, row, ui, slip, inSlipIds }) {
   ] });
 }
 function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds }) {
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState9(false);
   const kickoff = vm.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(vm.kickoffUtc) : void 0;
   const hasNamedTeams = !!vm.homeTeamName && !!vm.awayTeamName;
   const showPin = !!monitor && vm.pinEnabled;
@@ -1950,7 +1988,7 @@ function FixtureCard({ card }) {
 }
 
 // src/components/dashboard/CountdownCard.tsx
-import { Fragment as Fragment6, useEffect as useEffect5, useState as useState9 } from "react";
+import { Fragment as Fragment6, useEffect as useEffect6, useState as useState10 } from "react";
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var DAY_MS = 864e5;
 function remainingSegments(kickoffUnix, nowMs, withSeconds) {
@@ -1969,12 +2007,12 @@ function remainingSegments(kickoffUnix, nowMs, withSeconds) {
 function CountdownCard({ card }) {
   const { data } = card;
   const unitLabel = { d: data.daysUnit, h: data.hoursUnit, m: data.minutesUnit, s: data.secondsUnit };
-  const [nowMs, setNowMs] = useState9(() => Date.now());
-  const [reduced] = useState9(
+  const [nowMs, setNowMs] = useState10(() => Date.now());
+  const [reduced] = useState10(
     () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
   );
   const withinDay = data.kickoffUnix * 1e3 - nowMs < DAY_MS;
-  useEffect5(() => {
+  useEffect6(() => {
     if (reduced) return;
     const id = window.setInterval(() => setNowMs(Date.now()), withinDay ? 1e3 : 6e4);
     return () => window.clearInterval(id);
@@ -1993,7 +2031,7 @@ function CountdownCard({ card }) {
 }
 
 // src/components/dashboard/InjuriesCard.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var SHOWN = 3;
 function ColHead({ name, crestUrl }) {
@@ -2016,7 +2054,7 @@ function InjuryList({ rows, emptyLabel, limit }) {
 }
 function InjuriesCard({ card, ui }) {
   const { data } = card;
-  const [expanded, setExpanded] = useState10(false);
+  const [expanded, setExpanded] = useState11(false);
   const hidden = Math.max(0, data.ours.length - SHOWN) + Math.max(0, data.theirs.length - SHOWN);
   const limit = expanded ? void 0 : SHOWN;
   const showMore = ui?.showMore ?? ((n) => `Show ${n} more`);
@@ -2120,7 +2158,7 @@ function LinksCard({ card }) {
 }
 
 // src/components/dashboard/PostMatchResultCard.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function initials3(name) {
   return name.trim().slice(0, 3).toUpperCase();
@@ -2130,7 +2168,7 @@ function PostMatchCrest({
   name,
   side
 }) {
-  const [failed, setFailed] = useState11(false);
+  const [failed, setFailed] = useState12(false);
   const cls = `ss-w-fandash-postmatch-crest ss-w-fandash-postmatch-crest--${side}`;
   if (url && !failed) {
     return /* @__PURE__ */ jsx27("img", { className: cls, src: url, alt: "", "aria-hidden": "true", onError: () => setFailed(true) });
@@ -2329,10 +2367,10 @@ function RestingFormCard({ card }) {
 }
 
 // src/components/dashboard/LiveScoreCard.tsx
-import { useRef as useRef4, useState as useState13 } from "react";
+import { useRef as useRef5, useState as useState14 } from "react";
 
 // src/useLiveClock.ts
-import { useEffect as useEffect6, useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState13 } from "react";
 var TICK_MS = 6e4;
 var MAX_LIVE_TICK_MINUTES = 15;
 function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
@@ -2341,10 +2379,10 @@ function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
   return minute + Math.min(Math.max(0, elapsedMinutes), MAX_LIVE_TICK_MINUTES);
 }
 function useLiveClock(minute, clockRunning, receivedAtMs) {
-  const [displayMinute, setDisplayMinute] = useState12(
+  const [displayMinute, setDisplayMinute] = useState13(
     () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
   );
-  useEffect6(() => {
+  useEffect7(() => {
     setDisplayMinute(computeDisplayMinute(minute, clockRunning, receivedAtMs));
     if (!clockRunning) return;
     const id = window.setInterval(() => {
@@ -2361,7 +2399,7 @@ function initials5(name) {
   return name.trim().slice(0, 3).toUpperCase();
 }
 function LiveCrest({ url, name, side }) {
-  const [failed, setFailed] = useState13(false);
+  const [failed, setFailed] = useState14(false);
   const cls = `ss-w-fandash-live-crest ss-w-fandash-live-crest--${side}`;
   if (url && !failed) {
     return /* @__PURE__ */ jsx36("img", { className: cls, src: url, alt: "", "aria-hidden": "true", onError: () => setFailed(true) });
@@ -2380,7 +2418,7 @@ function LiveScoreCard({
 }) {
   const { data } = card;
   const seedKey = `${data.minute}:${data.homeScore}:${data.awayScore}`;
-  const seedRef = useRef4(null);
+  const seedRef = useRef5(null);
   if (!seedRef.current || seedRef.current.key !== seedKey) {
     seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
   }
@@ -2420,7 +2458,7 @@ function LiveScoreCard({
 }
 
 // src/components/dashboard/LiveTimelineCard.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var SHOWN2 = 3;
 function EventIcon({ type }) {
@@ -2462,7 +2500,7 @@ function EventRow({ e }) {
   ] });
 }
 function LiveTimelineCard({ card, ui }) {
-  const [expanded, setExpanded] = useState14(false);
+  const [expanded, setExpanded] = useState15(false);
   const events = card.data.events;
   if (!events || events.length === 0) return null;
   const sorted = [...events].sort((a, b) => b.minute - a.minute);
@@ -2702,11 +2740,11 @@ function turnAnchor(messages) {
 }
 function MessageList({ controller, ui, slip, onDashboardTap, monitor }) {
   const { state, send } = controller;
-  const listRef = useRef5(null);
-  const endRef = useRef5(null);
-  const pinnedRef = useRef5(true);
-  const anchoredTurnRef = useRef5(null);
-  useEffect7(() => {
+  const listRef = useRef6(null);
+  const endRef = useRef6(null);
+  const pinnedRef = useRef6(true);
+  const anchoredTurnRef = useRef6(null);
+  useEffect8(() => {
     const anchor = turnAnchor(state.messages);
     const list = listRef.current;
     if (anchor && anchor.turnId !== anchoredTurnRef.current) {
@@ -2762,10 +2800,10 @@ function MessageList({ controller, ui, slip, onDashboardTap, monitor }) {
 }
 
 // src/components/ChatInput.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
-  const [value, setValue] = useState15("");
+  const [value, setValue] = useState16("");
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -3012,8 +3050,8 @@ function OddsPanel({ monitor, ui, slip }) {
 import { jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = useState16(false);
-  useEffect8(() => {
+  const [modal, setModal] = useState17(false);
+  useEffect9(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -3026,7 +3064,7 @@ function useIsModal() {
 function ChatPanel({ controller, ui, slip, onDashboardTap, monitor }) {
   const { state, close, stop, send } = controller;
   const isModal = useIsModal();
-  useEffect8(() => {
+  useEffect9(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -3037,7 +3075,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor }) {
     monitor?.setActiveTab("chat");
     send(text);
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
   return /* @__PURE__ */ jsxs42("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
@@ -3108,8 +3146,40 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-fab { width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--ss-w-nav); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
 .ss-w-fab-mark { width: 30px; height: 30px; display: block; object-fit: contain; }
 .ss-w-greeting { max-width: 240px; display: flex; align-items: flex-start; background: var(--ss-w-panel); color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
-.ss-w-greeting-body { flex: 1; min-width: 0; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 9px 4px 9px 12px; }
+.ss-w-greeting-body { position: relative; flex: 1; min-width: 0; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 9px 4px 9px 12px; }
 .ss-w-greeting-x { flex: none; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 7px 9px 0 2px; }
+.ss-w-greeting-text { display: block; }
+/* Typing indicator: overlays the text area so bubble height stays put; hidden at
+   rest, revealed only during the one-shot intro (see prefers-reduced-motion block). */
+.ss-w-greeting-dots { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; gap: 4px; opacity: 0; pointer-events: none; }
+.ss-w-greeting-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-faint); display: block; }
+/* One-shot launcher attention intro: FAB nudges, then the greeting types in.
+   Gated behind no-preference so reduce-motion users get the greeting shown
+   statically (text visible, no nudge, no typing). ChatFab adds .ss-w-intro once
+   per page load; every animation runs a single time and settles at rest. */
+@media (prefers-reduced-motion: no-preference) {
+  .ss-w-intro .ss-w-fab { animation: ss-w-nudge .8s ease both; }
+  .ss-w-intro .ss-w-greeting { animation: ss-w-greet-in .45s cubic-bezier(.2,.8,.3,1.15) .8s both; }
+  .ss-w-intro .ss-w-greeting-text { animation: ss-w-greet-textin .4s ease 1.65s both; }
+  .ss-w-intro .ss-w-greeting-dots { animation: ss-w-greet-dots .95s ease .85s both; }
+  .ss-w-intro .ss-w-greeting-dots i { animation: ss-w-greet-dotbounce .5s ease .85s 2; }
+  .ss-w-intro .ss-w-greeting-dots i:nth-child(2) { animation-delay: 1s; }
+  .ss-w-intro .ss-w-greeting-dots i:nth-child(3) { animation-delay: 1.15s; }
+}
+@keyframes ss-w-nudge {
+  0%, 100% { transform: none; }
+  22% { transform: translateY(-9px) rotate(-9deg); }
+  44% { transform: translateY(0) rotate(7deg); }
+  64% { transform: translateY(-4px) rotate(-4deg); }
+  82% { transform: rotate(2deg); }
+}
+@keyframes ss-w-greet-in {
+  from { opacity: 0; transform: translateY(8px) scale(.92); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes ss-w-greet-textin { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ss-w-greet-dots { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
+@keyframes ss-w-greet-dotbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
 
 /* panel */
 .ss-w-panel { position: fixed; bottom: calc(var(--ss-w-offset-y) + 72px); z-index: 2147483000; display: flex; flex-direction: column; width: min(460px, calc(100vw - 40px)); height: min(640px, calc(100vh - 120px)); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: var(--ss-w-radius); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.24); }
@@ -3843,7 +3913,11 @@ function StatsWidget(props) {
   const cfg = props.config;
   const built = useMemo2(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
   const ui = useMemo2(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = useRef6(null);
+  const rootRef = useRef7(null);
+  const introDoneRef = useRef7(false);
+  const markIntroDone = useCallback5(() => {
+    introDoneRef.current = true;
+  }, []);
   const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0);
   const monitor = useLiveMonitor({
     getLiveMonitor: (pins) => built ? built.conversation.getLiveMonitor(pins) : Promise.resolve(null),
@@ -3877,7 +3951,7 @@ function StatsWidget(props) {
     () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input)) : void 0,
     [built]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);
@@ -3893,7 +3967,9 @@ function StatsWidget(props) {
       logoUrl: ui.logoUrl,
       onOpen: controller.open,
       onDismissPopup: controller.dismissPopup,
-      dismissLabel: ui.dismissGreeting
+      dismissLabel: ui.dismissGreeting,
+      introAllowed: !introDoneRef.current,
+      onIntroStart: markIntroDone
     }
   ) });
 }