@appsupportkit/support-sdk 0.1.2 → 0.3.0

package/lib/typescript/types.d.ts

@@ -1,8 +1,17 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Language } from './i18n/languages';
 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 +37,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
@@ -45,21 +68,43 @@ export interface SupportButtonProps {
      * installed — it is an optional peer dependency.
      */
     expoProjectId?: string;
+    /**
+     * Pre-selects a language in the picker the first time a user opens support.
+     * Pass it when the host app already knows what the user reads — an in-app
+     * language setting beats the device locale, which is what the SDK falls
+     * back to. It is a default, not an override: the user still chooses, and a
+     * choice they have already made always wins.
+     */
+    defaultLanguage?: Language;
 }
 export interface ThreadMessage {
     id: string;
     sender: MessageSender;
+    /**
+     * Already in the user's language: their own messages as they wrote them,
+     * support replies translated. The server does the choosing — see the
+     * get-threads function.
+     */
     body: string;
     created_at: string;
-    admin_name: string | null;
+    /**
+     * A support reply whose translation hasn't landed yet. `body` currently
+     * holds the English original; it will change under the reader shortly, so
+     * the UI says so rather than letting it flicker.
+     */
+    translation_pending: boolean;
 }
+/**
+ * Note the absence of any admin identity: end users see one support team,
+ * not the people staffing it, so the names never leave the server. The
+ * dashboard still shows who wrote and who resolved what.
+ */
 export interface Thread {
     id: string;
     type: QueryType;
     status: QueryStatus;
     created_at: string;
     resolved_at: string | null;
-    resolved_by_name: string | null;
     app_version: string;
     unread_count: number;
     last_message: {
@@ -72,7 +117,14 @@ export interface Thread {
 export interface ThreadsResponse {
     threads: Thread[];
     total_unread: number;
+    /** Null when this user has never picked one — the SDK then asks. */
+    language: string | null;
 }
+/**
+ * English labels, kept for host apps that render their own entry points.
+ * Inside the sheet the labels come from the string table instead, so they
+ * follow the user's language.
+ */
 export declare const QUERY_TYPE_LABEL: Record<QueryType, string>;
 export declare const USER_MESSAGE_MIN = 10;
 export declare const USER_MESSAGE_MAX = 300;

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":"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"}

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,38 @@
+import { type ApiConfig } from './api';
+import type { StringKey } from './i18n';
+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. */
+    errorKey: StringKey | null;
+    /** The language this user picked, or null if they never have. */
+    serverLanguage: string | null;
+    /**
+     * False until the first successful load. `serverLanguage === null` only
+     * means "never picked" once this is true — before that it means "don't
+     * know yet", and showing the picker on a guess would nag a user who
+     * answered on another device.
+     */
+    languageLoaded: boolean;
+    /** 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,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAetC,eAAO,MAAM,YAAY,QAAS,CAAC;AA8CnC,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,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,iEAAiE;IACjE,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;;OAKG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,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,CA0QtB"}

package/lib/typescript/utils.d.ts

@@ -1,6 +1,12 @@
+import type { Translator } from './i18n';
 /** "2h ago" relative time — mirrors the web dashboard's formatting. */
-export declare function relativeTime(iso: string): string;
-export declare function formatDate(iso: string): string;
+export declare function relativeTime(iso: string, strings: Translator): string;
+export declare function formatDate(iso: string, strings: Translator): string;
+/** "14:32" in the user's locale — shown under a group of messages. */
+export declare function formatTime(iso: string, strings: Translator): string;
+export declare function isSameDay(a: string, b: string): boolean;
+/** Date separator label: Today / Yesterday / "Mon, 5 Jan". */
+export declare function dayLabel(iso: string, strings: Translator): 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,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAKzC,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CAerE;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CAMnE;AAED,sEAAsE;AACtE,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CAKnE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAQvD;AAED,8DAA8D;AAC9D,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CAYjE;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,7 +1,7 @@
 {
   "name": "@appsupportkit/support-sdk",
-  "version": "0.1.2",
-  "description": "In-app customer support for React Native: feedback, feature requests, and bug reports with two-way threads.",
+  "version": "0.3.0",
+  "description": "In-app customer support for React Native: feedback, feature requests, and bug reports with two-way threads, in the user's own language.",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
   "types": "./lib/typescript/index.d.ts",
@@ -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/api.ts

@@ -112,6 +112,20 @@ export function registerPush(
   });
 }
 
+/** Records the language the user reads and writes support messages in. */
+export function setLanguage(
+  config: ApiConfig,
+  input: { revenuecatId: string; language: string },
+): Promise<{ language: string }> {
+  return request(config, 'set-language', {
+    method: 'POST',
+    body: JSON.stringify({
+      revenuecat_id: input.revenuecatId,
+      language: input.language,
+    }),
+  });
+}
+
 export function submitQuery(
   config: ApiConfig,
   input: {
@@ -121,6 +135,7 @@ export function submitQuery(
     isPaid: boolean;
     revenuecatId: string;
     appVersion: string;
+    language: string;
   },
 ): Promise<{ query_id: string }> {
   return request(config, 'submit-query', {
@@ -133,13 +148,20 @@ export function submitQuery(
       is_paid: input.isPaid,
       revenuecat_id: input.revenuecatId,
       app_version: input.appVersion,
+      // Sent on every write so a lost set-language call self-heals.
+      language: input.language,
     }),
   });
 }
 
 export function postMessage(
   config: ApiConfig,
-  input: { queryId: string; revenuecatId: string; message: string },
+  input: {
+    queryId: string;
+    revenuecatId: string;
+    message: string;
+    language: string;
+  },
 ): Promise<{ message_id: string }> {
   return request(config, 'post-message', {
     method: 'POST',
@@ -147,6 +169,7 @@ export function postMessage(
       query_id: input.queryId,
       revenuecat_id: input.revenuecatId,
       message: input.message,
+      language: input.language,
     }),
   });
 }

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,
                 }}
               />