@appsupportkit/support-sdk 0.1.2 → 0.2.0

package/lib/typescript/components/screens/HomeScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomeScreen.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/HomeScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AA+ErD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,YAAY,EACZ,OAAO,GACR,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,+BAwIA"}
+{"version":3,"file":"HomeScreen.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/HomeScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AA+IrD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,SAAS,EACT,SAAS,EACT,YAAY,EACZ,OAAO,GACR,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,+BAyHA"}

package/lib/typescript/components/screens/ThreadScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadScreen.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/ThreadScreen.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAY1C,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,gEAAgE;IAChE,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACrD,+BAiMA"}
+{"version":3,"file":"ThreadScreen.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/ThreadScreen.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,aAAa,CAAC;AA2KzD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,gEAAgE;IAChE,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACrD,+BA4MA"}

package/lib/typescript/index.d.ts

@@ -2,6 +2,6 @@ export { SupportButton } from './components/SupportButton';
 export { supportDarkTheme, supportLightTheme, resolveTheme, type SupportTheme, } from './theme';
 export { SupportApiError } from './api';
 export { isPushAvailable } from './push';
-export type { MessageSender, PushPermissionStatus, QueryStatus, QueryType, SupportButtonProps, SupportUser, Thread, ThreadMessage, ThreadsResponse, ThemeName, } from './types';
+export type { LauncherVariant, MessageSender, PushPermissionStatus, QueryStatus, QueryType, SupportButtonProps, SupportUser, Thread, ThreadMessage, ThreadsResponse, ThemeName, } from './types';
 export { QUERY_TYPE_LABEL, USER_MESSAGE_MAX, USER_MESSAGE_MIN, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,aAAa,EACb,eAAe,EACf,SAAS,GACV,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EACV,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,aAAa,EACb,eAAe,EACf,SAAS,GACV,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,SAAS,CAAC"}

package/lib/typescript/theme.d.ts

@@ -1,13 +1,54 @@
-import { motion, radii, spacing, type ThemeColors } from '@appsupportkit/design-tokens';
+import { motion, spacing, type ThemeColors } from '@appsupportkit/design-tokens';
+import type { ViewStyle } from 'react-native';
 import type { ThemeName } from './types';
+/** Rounder than the dashboard: touch targets read better with more radius. */
+export declare const supportRadii: {
+    readonly control: 10;
+    readonly card: 14;
+    readonly cardLg: 18;
+    /** Message bubbles. */
+    readonly bubble: 18;
+    /** The tight corner on a bubble's sender side. */
+    readonly bubbleTail: 6;
+    readonly sheet: 24;
+    readonly pill: 999;
+    readonly full: 9999;
+};
+export interface SupportShadows {
+    /** Floating launcher button. */
+    launcher: ViewStyle;
+    /** The bottom sheet itself. */
+    sheet: ViewStyle;
+    /** Unread badge, so it lifts off the button. */
+    badge: ViewStyle;
+}
+/**
+ * The launcher sits on the host app's own background rather than on an SDK
+ * surface, so the two themes need different treatment: on near-black a
+ * solid fill needs a hairline to separate from the background and a black
+ * shadow, while on white the accent-tinted shadow does that work and a
+ * borderless mark has to be darkened to stay legible.
+ */
+export interface LauncherPalette {
+    /** Hairline drawn over the solid fill. */
+    solidRing: string;
+    /** Mark color for the borderless (minimal) variant. */
+    minimalMark: string;
+}
 export interface SupportTheme {
     name: ThemeName;
     colors: ThemeColors;
     spacing: typeof spacing;
-    radii: typeof radii;
+    radii: typeof supportRadii;
     motion: typeof motion;
+    shadows: SupportShadows;
+    launcher: LauncherPalette;
 }
 export declare const supportDarkTheme: SupportTheme;
 export declare const supportLightTheme: SupportTheme;
-export declare function resolveTheme(name: ThemeName | undefined): SupportTheme;
+/**
+ * @param name  "light" | "dark" (default dark).
+ * @param accentColor Optional brand color (hex) replacing the default accent.
+ */
+export declare function resolveTheme(name: ThemeName | undefined, accentColor?: string): SupportTheme;
 //# sourceMappingURL=theme.d.ts.map

package/lib/typescript/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,YAM9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,YAM/B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,YAAY,CAEtE"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,MAAM,EAEN,OAAO,EACP,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,8EAA8E;AAC9E,eAAO,MAAM,YAAY;;;;IAKvB,uBAAuB;;IAEvB,kDAAkD;;;;;CAI1C,CAAC;AAEX,MAAM,WAAW,cAAc;IAC7B,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,cAAc,CAAC;IACxB,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAmFD,eAAO,MAAM,gBAAgB,EAAE,YAA6C,CAAC;AAC7E,eAAO,MAAM,iBAAiB,EAAE,YAA+C,CAAC;AA+BhF;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,SAAS,GAAG,SAAS,EAC3B,WAAW,CAAC,EAAE,MAAM,GACnB,YAAY,CAGd"}

package/lib/typescript/types.d.ts

@@ -1,8 +1,16 @@
+import type { StyleProp, ViewStyle } from 'react-native';
 export type QueryType = 'feedback' | 'feature_request' | 'bug_report';
 export type QueryStatus = 'open' | 'resolved';
 export type MessageSender = 'user' | 'admin';
 export type ThemeName = 'dark' | 'light';
 export type PushPermissionStatus = 'undetermined' | 'granted' | 'denied';
+/**
+ * How the launcher renders:
+ *   solid   — accent fill, elevated. The floating action button.
+ *   soft    — app surface + hairline border. Sits in a header or toolbar.
+ *   minimal — bare mark, no fill or border. Sits in a nav bar.
+ */
+export type LauncherVariant = 'solid' | 'soft' | 'minimal';
 export interface SupportUser {
     /** Display name shown to the support team. */
     name: string;
@@ -28,6 +36,20 @@ export interface SupportButtonProps {
     supabaseUrl: string;
     /** Visual theme. Matches the admin dashboard tokens. Default "dark". */
     theme?: ThemeName;
+    /**
+     * Brand color (hex, e.g. "#FF5A1F") replacing the default accent across
+     * the launcher, buttons, and the user's own message bubbles. The pressed
+     * shade, the 12% wash, and a legible foreground are derived from it.
+     */
+    accentColor?: string;
+    /** Launcher style. Default "solid" — the floating action button. */
+    variant?: LauncherVariant;
+    /** Launcher diameter in px (height when `label` is set). Default 52. */
+    size?: number;
+    /** Renders the launcher as a pill with this text beside the mark. */
+    label?: string;
+    /** Style applied to the launcher — position it, add margins, etc. */
+    style?: StyleProp<ViewStyle>;
     /**
      * Idle poll interval (ms) — how often the unread badge is refreshed while
      * the sheet is CLOSED, using a lightweight count-only endpoint. Default

package/lib/typescript/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,iBAAiB,GAAG,YAAY,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AACzC,MAAM,MAAM,oBAAoB,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEzE,MAAM,WAAW,WAAW;IAC1B,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,EAAE,WAAW,CAAC;IAClB;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,aAAa,CAAC;QACtB,UAAU,EAAE,MAAM,CAAC;KACpB,GAAG,IAAI,CAAC;IACT,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItD,CAAC;AAEF,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,gBAAgB,MAAM,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,iBAAiB,GAAG,YAAY,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AACzC,MAAM,MAAM,oBAAoB,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE3D,MAAM,WAAW,WAAW;IAC1B,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,EAAE,WAAW,CAAC;IAClB;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,aAAa,CAAC;QACtB,UAAU,EAAE,MAAM,CAAC;KACpB,GAAG,IAAI,CAAC;IACT,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItD,CAAC;AAEF,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,gBAAgB,MAAM,CAAC"}

package/lib/typescript/unread.d.ts

@@ -0,0 +1,22 @@
+import type { Thread } from './types';
+/** Watermark map: thread id → `created_at` (ms) of the newest seen reply. */
+export type ReadWatermarks = Map<string, number>;
+/** `created_at` (ms) of the newest admin message, or 0 if there are none. */
+export declare function latestAdminMessageAt(thread: Thread): number;
+/** Admin messages in `thread` newer than `watermark`. */
+export declare function unreadSince(thread: Thread, watermark: number): number;
+/**
+ * Returns `thread` with `unread_count` narrowed by what this device knows
+ * the user has read. Identity is preserved when nothing changes so lists
+ * stay referentially stable between polls.
+ */
+export declare function reconcileThread(thread: Thread, watermarks: ReadWatermarks): Thread;
+export declare function reconcileThreads(threads: Thread[], watermarks: ReadWatermarks): Thread[];
+export declare function sumUnread(threads: Thread[]): number;
+/**
+ * Drops watermarks the server has caught up on (its own count is already 0)
+ * and ones for threads that no longer exist, so the map can't grow without
+ * bound over a long session.
+ */
+export declare function pruneWatermarks(watermarks: ReadWatermarks, serverThreads: Thread[]): ReadWatermarks;
+//# sourceMappingURL=unread.d.ts.map

package/lib/typescript/unread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unread.d.ts","sourceRoot":"","sources":["../../src/unread.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,6EAA6E;AAC7E,MAAM,MAAM,cAAc,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjD,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAQ3D;AAED,yDAAyD;AACzD,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAQrE;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,cAAc,GACzB,MAAM,CAKR;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,EAAE,EACjB,UAAU,EAAE,cAAc,GACzB,MAAM,EAAE,CAEV;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAEnD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,MAAM,EAAE,GACtB,cAAc,CAShB"}

package/lib/typescript/useSupportThreads.d.ts

@@ -0,0 +1,28 @@
+import { type ApiConfig } from './api';
+import type { Thread } from './types';
+export declare const IDLE_POLL_MS = 60000;
+export interface SupportThreadsState {
+    /** Server threads with unread counts narrowed by local reads. */
+    threads: Thread[] | null;
+    totalUnread: number;
+    /** First load only — there is nothing cached to show yet. */
+    loading: boolean;
+    /** User-pulled refresh with content already on screen. */
+    refreshing: boolean;
+    /** Set only when there is nothing cached; background failures stay quiet. */
+    error: string | null;
+    /** User-initiated refresh (pull-to-refresh, retry button). */
+    refresh: () => void;
+    /** Awaited by send/submit handlers so the list reflects the write. */
+    reload: () => Promise<void>;
+}
+export declare function useSupportThreads({ config, revenuecatId, enabled, sheetOpen, activeThreadId, idlePollMs, }: {
+    config: ApiConfig;
+    revenuecatId: string;
+    /** False when props failed validation — no requests are made. */
+    enabled: boolean;
+    sheetOpen: boolean;
+    activeThreadId: string | null;
+    idlePollMs: number;
+}): SupportThreadsState;
+//# sourceMappingURL=useSupportThreads.d.ts.map

package/lib/typescript/useSupportThreads.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSupportThreads.d.ts","sourceRoot":"","sources":["../../src/useSupportThreads.ts"],"names":[],"mappings":"AAgBA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAetC,eAAO,MAAM,YAAY,QAAS,CAAC;AA0CnC,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAC;IACjB,0DAA0D;IAC1D,UAAU,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sEAAsE;IACtE,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,YAAY,EACZ,OAAO,EACP,SAAS,EACT,cAAc,EACd,UAAU,GACX,EAAE;IACD,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,mBAAmB,CAoQtB"}

package/lib/typescript/utils.d.ts

@@ -1,6 +1,11 @@
 /** "2h ago" relative time — mirrors the web dashboard's formatting. */
 export declare function relativeTime(iso: string): string;
 export declare function formatDate(iso: string): string;
+/** "14:32" in the device's locale — shown under a group of messages. */
+export declare function formatTime(iso: string): string;
+export declare function isSameDay(a: string, b: string): boolean;
+/** Date separator label: Today / Yesterday / "Mon, 5 Jan". */
+export declare function dayLabel(iso: string): string;
 /** Dev-mode prop validation with actionable messages. */
 export declare function validateProps(props: {
     appName?: unknown;

package/lib/typescript/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAehD;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM9C;AAED,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,MAAM,GAAG,IAAI,CA8BhB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAehD;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM9C;AAED,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK9C;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAQvD;AAED,8DAA8D;AAC9D,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAY5C;AAED,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,MAAM,GAAG,IAAI,CA8BhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appsupportkit/support-sdk",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "In-app customer support for React Native: feedback, feature requests, and bug reports with two-way threads.",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
@@ -19,7 +19,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@appsupportkit/design-tokens": "^0.1.0"
+    "@appsupportkit/design-tokens": "^0.2.0"
   },
   "peerDependencies": {
     "expo-notifications": ">=0.27.0",

package/src/components/BottomSheet.tsx

@@ -1,10 +1,15 @@
 // Bottom sheet built on the built-in Modal + Animated APIs.
 //
 // Why no sheet library: the SDK needs exactly one detent, a drag handle, a
-// backdrop fade, and a 180ms ease-out slide — all achievable with core APIs.
+// backdrop fade, and a short ease-out slide — all achievable with core APIs.
 // Skipping reanimated/gesture-handler keeps the package free of native
 // dependencies and install friction for consumers.
-import { useCallback, useEffect, useRef, type ReactNode } from 'react';
+//
+// `visible` drives a single animation path: the sheet stays mounted until
+// its exit finishes, so closing from the header button, the backdrop, the
+// hardware back button, or a drag all animate identically — and a reopen
+// always starts from off-screen instead of appearing already in place.
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   Animated,
   Easing,
@@ -17,7 +22,8 @@ import {
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import type { SupportTheme } from '../theme';
 
-const SLIDE_MS = 180; // motion.slow — ease-out, no springs, no bounce.
+const SLIDE_MS = 260;
+const FADE_MS = 200;
 
 export function BottomSheet({
   visible,
@@ -31,57 +37,67 @@ export function BottomSheet({
   children: ReactNode;
 }) {
   const { height: windowHeight } = useWindowDimensions();
-  const sheetHeight = Math.min(windowHeight * 0.82, 640);
+  const sheetHeight = Math.min(windowHeight * 0.88, 720);
 
+  const [rendered, setRendered] = useState(false);
   const translateY = useRef(new Animated.Value(sheetHeight)).current;
   const backdrop = useRef(new Animated.Value(0)).current;
+  /** Whether the entrance has already played for the current open. */
+  const shown = useRef(false);
 
-  const animateIn = useCallback(() => {
-    Animated.parallel([
-      Animated.timing(translateY, {
-        toValue: 0,
-        duration: SLIDE_MS,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-      Animated.timing(backdrop, {
-        toValue: 1,
-        duration: SLIDE_MS,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, [translateY, backdrop]);
+  useEffect(() => {
+    if (visible) setRendered(true);
+  }, [visible]);
 
-  const animateOut = useCallback(
-    (done: () => void) => {
+  useEffect(() => {
+    if (!rendered) return;
+
+    if (visible && !shown.current) {
+      shown.current = true;
+      translateY.setValue(sheetHeight);
       Animated.parallel([
         Animated.timing(translateY, {
-          toValue: sheetHeight,
+          toValue: 0,
           duration: SLIDE_MS,
+          easing: Easing.bezier(0.16, 1, 0.3, 1),
+          useNativeDriver: true,
+        }),
+        Animated.timing(backdrop, {
+          toValue: 1,
+          duration: FADE_MS,
           easing: Easing.out(Easing.cubic),
           useNativeDriver: true,
         }),
+      ]).start();
+      return;
+    }
+
+    if (!visible && shown.current) {
+      shown.current = false;
+      // Starts from wherever the sheet is now, so a drag that crosses the
+      // dismiss threshold continues rather than jumping.
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: sheetHeight,
+          duration: theme.motion.slow,
+          easing: Easing.in(Easing.cubic),
+          useNativeDriver: true,
+        }),
         Animated.timing(backdrop, {
           toValue: 0,
-          duration: SLIDE_MS,
-          easing: Easing.out(Easing.cubic),
+          duration: theme.motion.slow,
+          easing: Easing.in(Easing.cubic),
           useNativeDriver: true,
         }),
       ]).start(({ finished }) => {
-        if (finished) done();
+        if (finished) setRendered(false);
       });
-    },
-    [translateY, backdrop, sheetHeight],
-  );
-
-  useEffect(() => {
-    if (visible) animateIn();
-  }, [visible, animateIn]);
+    }
+  }, [rendered, visible, sheetHeight, translateY, backdrop, theme.motion.slow]);
 
   const requestClose = useCallback(() => {
-    animateOut(onClose);
-  }, [animateOut, onClose]);
+    onClose();
+  }, [onClose]);
 
   // Drag handle: follow the finger downward; past 25% (or a flick), dismiss.
   const panResponder = useRef(
@@ -97,7 +113,7 @@ export function BottomSheet({
         } else {
           Animated.timing(translateY, {
             toValue: 0,
-            duration: SLIDE_MS,
+            duration: theme.motion.slow,
             easing: Easing.out(Easing.cubic),
             useNativeDriver: true,
           }).start();
@@ -106,7 +122,7 @@ export function BottomSheet({
     }),
   ).current;
 
-  if (!visible) return null;
+  if (!rendered) return null;
 
   return (
     <Modal
@@ -125,7 +141,7 @@ export function BottomSheet({
               right: 0,
               bottom: 0,
               left: 0,
-              backgroundColor: 'rgba(0,0,0,0.5)',
+              backgroundColor: 'rgba(0,0,0,0.55)',
               opacity: backdrop,
             }}
           >
@@ -139,25 +155,27 @@ export function BottomSheet({
           <Animated.View
             style={{
               height: sheetHeight,
-              backgroundColor: theme.colors.overlay,
+              backgroundColor: theme.colors.bg,
               borderTopLeftRadius: theme.radii.sheet,
               borderTopRightRadius: theme.radii.sheet,
               borderWidth: 1,
               borderBottomWidth: 0,
               borderColor: theme.colors.border,
+              overflow: 'hidden',
               transform: [{ translateY }],
+              ...theme.shadows.sheet,
             }}
           >
             {/* Drag handle */}
             <View
               {...panResponder.panHandlers}
-              style={{ alignItems: 'center', paddingVertical: 10 }}
+              style={{ alignItems: 'center', paddingTop: 10, paddingBottom: 6 }}
             >
               <View
                 style={{
-                  width: 32,
-                  height: 4,
-                  borderRadius: 2,
+                  width: 40,
+                  height: 5,
+                  borderRadius: 3,
                   backgroundColor: theme.colors.borderStrong,
                 }}
               />

package/src/components/LauncherButton.tsx

@@ -0,0 +1,217 @@
+// The launcher: the one piece of the SDK that lives inside the host app's
+// own UI, so it has to look intentional next to anything. Three variants
+// cover the placements that actually occur — a floating action button, a
+// bordered button in a header, and a bare icon in a toolbar.
+import { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type { SupportTheme } from '../theme';
+import type { LauncherVariant } from '../types';
+import { ChatBubbleMark } from './icons';
+
+const PRESS_SCALE = 0.93;
+
+/** Counts stay legible: three digits in a pill is not a design. */
+function badgeLabel(unread: number): string {
+  return unread > 99 ? '99+' : String(unread);
+}
+
+export function LauncherButton({
+  theme,
+  unread,
+  variant = 'solid',
+  size = 52,
+  label,
+  style,
+  onPress,
+}: {
+  theme: SupportTheme;
+  unread: number;
+  variant?: LauncherVariant;
+  size?: number;
+  /** Renders a pill with text next to the mark instead of a circle. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  onPress: () => void;
+}) {
+  const scale = useRef(new Animated.Value(1)).current;
+  const pulse = useRef(new Animated.Value(0)).current;
+  const previousUnread = useRef(unread);
+
+  // A new reply pulses the halo twice, then stops. Enough to catch the eye
+  // on the way past; not a permanently animating element in someone's app.
+  useEffect(() => {
+    if (unread > previousUnread.current) {
+      pulse.setValue(0);
+      const animation = Animated.loop(
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 1600,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        { iterations: 2 },
+      );
+      animation.start(() => pulse.setValue(0));
+      previousUnread.current = unread;
+      return () => animation.stop();
+    }
+    previousUnread.current = unread;
+    return undefined;
+  }, [unread, pulse]);
+
+  const press = (to: number) =>
+    Animated.timing(scale, {
+      toValue: to,
+      duration: to === 1 ? theme.motion.base : theme.motion.fast,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+
+  const solid = variant === 'solid';
+  const soft = variant === 'soft';
+  const fill = solid
+    ? theme.colors.accent
+    : soft
+      ? theme.colors.surface
+      : 'transparent';
+  const markColor = solid
+    ? theme.colors.accentForeground
+    : soft
+      ? theme.colors.accent
+      : theme.launcher.minimalMark;
+  // Dots are punched out of the bubble in whatever sits behind the mark —
+  // the button's own fill, or the app background when there isn't one.
+  const markHoleColor = solid
+    ? theme.colors.accent
+    : soft
+      ? theme.colors.surface
+      : theme.colors.bg;
+  // Dark: a hairline separates the fill from a near-black app background.
+  // Light: the accent-tinted shadow already does that, so the ring only has
+  // to keep the edge from looking soft.
+  const border = solid
+    ? { borderWidth: 1, borderColor: theme.launcher.solidRing }
+    : soft
+      ? { borderWidth: 1, borderColor: theme.colors.border }
+      : { borderWidth: 0, borderColor: 'transparent' };
+  const badgeBg = solid ? theme.colors.accentForeground : theme.colors.accent;
+  const badgeFg = solid ? theme.colors.accent : theme.colors.accentForeground;
+
+  const height = label ? Math.max(44, size * 0.84) : size;
+  const markSize = Math.round(size * (label ? 0.36 : 0.42));
+
+  return (
+    <Animated.View
+      style={[{ transform: [{ scale }] }, style]}
+      // The halo and badge sit outside the button's bounds.
+      pointerEvents="box-none"
+    >
+      {unread > 0 && (
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: label ? undefined : size,
+            right: label ? 0 : undefined,
+            height,
+            borderRadius: theme.radii.pill,
+            backgroundColor: theme.colors.accent,
+            opacity: pulse.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0.28, 0],
+            }),
+            transform: [
+              {
+                scale: pulse.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [1, 1.5],
+                }),
+              },
+            ],
+          }}
+        />
+      )}
+
+      <Pressable
+        onPress={onPress}
+        onPressIn={() => press(PRESS_SCALE)}
+        onPressOut={() => press(1)}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel={
+          unread > 0
+            ? `Support, ${unread} unread ${unread === 1 ? 'reply' : 'replies'}`
+            : 'Support'
+        }
+        style={{
+          height,
+          width: label ? undefined : size,
+          paddingHorizontal: label ? 18 : 0,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 9,
+          borderRadius: theme.radii.pill,
+          backgroundColor: fill,
+          ...border,
+          ...(variant === 'minimal' ? null : theme.shadows.launcher),
+        }}
+      >
+        <ChatBubbleMark color={markColor} dotColor={markHoleColor} size={markSize} />
+        {label !== undefined && (
+          <Text
+            style={{
+              fontSize: 15,
+              fontWeight: '600',
+              letterSpacing: -0.1,
+              color: solid ? theme.colors.accentForeground : theme.colors.textPrimary,
+            }}
+          >
+            {label}
+          </Text>
+        )}
+      </Pressable>
+
+      {unread > 0 && (
+        <View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: -5,
+            right: -5,
+            minWidth: 19,
+            height: 19,
+            borderRadius: theme.radii.pill,
+            paddingHorizontal: 5,
+            backgroundColor: badgeBg,
+            alignItems: 'center',
+            justifyContent: 'center',
+            ...theme.shadows.badge,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 11,
+              lineHeight: 14,
+              fontWeight: '700',
+              color: badgeFg,
+              fontVariant: ['tabular-nums'],
+            }}
+          >
+            {badgeLabel(unread)}
+          </Text>
+        </View>
+      )}
+    </Animated.View>
+  );
+}