opendesk-react-native 0.0.0-stage → 0.1.2

package/lib/react.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenDeskProvider = OpenDeskProvider;
+exports.useOpenDesk = useOpenDesk;
+exports.useOpenDeskState = useOpenDeskState;
+exports.useUnreadCount = useUnreadCount;
+exports.useConversations = useConversations;
+exports.useConversation = useConversation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OpenDeskContext = (0, react_1.createContext)(null);
+function OpenDeskProvider({ client, identity, autoBoot = true, children }) {
+    const identityKey = identity ? JSON.stringify(identity) : identity;
+    const previousKey = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(() => {
+        if (identityKey === previousKey.current) {
+            return;
+        }
+        const hadIdentity = typeof previousKey.current === 'string';
+        previousKey.current = identityKey;
+        if (identity === null && hadIdentity) {
+            void client.shutdown();
+        }
+        else if (identity) {
+            void client.identify(identity).catch(() => undefined);
+        }
+    }, [client, identity, identityKey]);
+    (0, react_1.useEffect)(() => {
+        if (autoBoot) {
+            client.boot().catch(() => undefined);
+        }
+    }, [client, autoBoot]);
+    return (0, jsx_runtime_1.jsx)(OpenDeskContext.Provider, { value: client, children: children });
+}
+function useOpenDesk() {
+    const client = (0, react_1.useContext)(OpenDeskContext);
+    if (!client) {
+        throw new Error('useOpenDesk must be used inside <OpenDeskProvider>');
+    }
+    return client;
+}
+function useOpenDeskState(selector) {
+    const client = useOpenDesk();
+    return (0, react_1.useSyncExternalStore)(client.subscribe, () => selector(client.getState()));
+}
+function useUnreadCount() {
+    return useOpenDeskState((state) => Object.values(state.unread).reduce((total, count) => total + count, 0));
+}
+function useConversations() {
+    const conversations = useOpenDeskState((state) => state.conversations);
+    const status = useOpenDeskState((state) => state.status);
+    const error = useOpenDeskState((state) => state.error);
+    return { conversations, ready: status === 'ready', error };
+}
+const noMessages = [];
+/** Opens a conversation while mounted: loads its messages, keeps it read, and closes it on unmount. */
+function useConversation(conversationId) {
+    const client = useOpenDesk();
+    const messages = useOpenDeskState((state) => (conversationId ? state.messages[conversationId] : undefined) ?? noMessages);
+    const replies = useOpenDeskState((state) => state.aiReplies);
+    const typing = useOpenDeskState((state) => (conversationId ? state.typing[conversationId] : undefined) ?? null);
+    const conversation = useOpenDeskState((state) => state.conversations.find((c) => c.id === conversationId) ?? null);
+    (0, react_1.useEffect)(() => {
+        if (!conversationId) {
+            return;
+        }
+        client.openConversation(conversationId).catch(() => undefined);
+        return () => client.closeConversation();
+    }, [client, conversationId]);
+    const aiReplies = (0, react_1.useMemo)(() => Object.values(replies).filter((reply) => reply.conversationId === conversationId), [replies, conversationId]);
+    return { messages, aiReplies, typing, conversation };
+}

package/lib/realtime.d.ts

@@ -0,0 +1,51 @@
+import type { LiveEvent, RealtimeEvent, TypingEvent } from './types';
+/** The parts of a Phoenix socket and channel the SDK uses, so tests can swap them. */
+export interface RealtimeChannel {
+    on(event: string, callback: (payload: any) => void): unknown;
+    join(): unknown;
+    leave(): unknown;
+    push(event: string, payload: object): unknown;
+}
+export interface RealtimeSocket {
+    onOpen(callback: () => void): unknown;
+    onClose(callback: () => void): unknown;
+    onError(callback: () => void): unknown;
+    connect(): void;
+    disconnect(): void;
+    channel(topic: string, params?: object): RealtimeChannel;
+}
+export type SocketFactory = (url: string, params: () => {
+    token: string;
+}) => RealtimeSocket;
+export declare const phoenixSocketFactory: SocketFactory;
+export interface RealtimeHandlers {
+    onEvent(event: RealtimeEvent): void;
+    onLive(event: LiveEvent): void;
+    onTyping(event: TypingEvent): void;
+    onStatus(connected: boolean): void;
+    /** Fired when the socket comes back after a drop, so missed events can be fetched over REST. */
+    onReconnect(): void;
+}
+/**
+ * Joins `contact:<wid>:<contact_id>` on the widget gateway. The `ws_token` lasts five minutes
+ * and is checked only on connect, so every drop fetches a fresh one before the next attempt.
+ */
+export declare class OpenDeskRealtime {
+    private readonly factory;
+    private readonly gatewayUrl;
+    private token;
+    private readonly contactId;
+    private readonly refreshToken;
+    private readonly handlers;
+    private socket;
+    private channel;
+    private refreshing;
+    private lastTypingAt;
+    constructor(factory: SocketFactory, gatewayUrl: string, token: string, contactId: string, refreshToken: () => Promise<string>, handlers: RealtimeHandlers);
+    start(): void;
+    /** Tells agents the visitor is typing in a conversation; throttled to one push per 3s. */
+    typing(conversationId: string): void;
+    typingDone(): void;
+    stop(): void;
+}
+export declare function jwtClaim(token: string, claim: string): string | null;

package/lib/realtime.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenDeskRealtime = exports.phoenixSocketFactory = void 0;
+exports.jwtClaim = jwtClaim;
+const phoenix_1 = require("phoenix");
+const phoenixSocketFactory = (url, params) => new phoenix_1.Socket(url, { params, reconnectAfterMs: (tries) => [1000, 2000, 5000, 10000][tries - 1] ?? 15000 });
+exports.phoenixSocketFactory = phoenixSocketFactory;
+const TYPING_THROTTLE_MS = 3000;
+/**
+ * Joins `contact:<wid>:<contact_id>` on the widget gateway. The `ws_token` lasts five minutes
+ * and is checked only on connect, so every drop fetches a fresh one before the next attempt.
+ */
+class OpenDeskRealtime {
+    constructor(factory, gatewayUrl, token, contactId, refreshToken, handlers) {
+        this.factory = factory;
+        this.gatewayUrl = gatewayUrl;
+        this.token = token;
+        this.contactId = contactId;
+        this.refreshToken = refreshToken;
+        this.handlers = handlers;
+        this.socket = null;
+        this.channel = null;
+        this.refreshing = false;
+        this.lastTypingAt = 0;
+    }
+    start() {
+        const workspaceId = jwtClaim(this.token, 'wid');
+        if (!workspaceId || !this.gatewayUrl) {
+            return;
+        }
+        const socket = this.factory(this.gatewayUrl, () => ({ token: this.token }));
+        let dropped = false;
+        socket.onOpen(() => {
+            this.handlers.onStatus(true);
+            if (dropped) {
+                this.handlers.onReconnect();
+            }
+            dropped = false;
+        });
+        const onDrop = () => {
+            dropped = true;
+            this.handlers.onStatus(false);
+            if (this.refreshing) {
+                return;
+            }
+            this.refreshing = true;
+            this.refreshToken()
+                .then((token) => {
+                this.token = token;
+            })
+                .catch(() => undefined)
+                .finally(() => {
+                this.refreshing = false;
+            });
+        };
+        socket.onError(onDrop);
+        socket.onClose(onDrop);
+        socket.connect();
+        const channel = socket.channel(`contact:${workspaceId}:${this.contactId}`, {});
+        channel.on('event', (payload) => this.handlers.onEvent(payload));
+        channel.on('typing', (payload) => this.handlers.onTyping(payload));
+        channel.on('live', (payload) => {
+            if (payload && typeof payload.type === 'string' && payload.data) {
+                this.handlers.onLive(payload);
+            }
+        });
+        channel.join();
+        this.socket = socket;
+        this.channel = channel;
+    }
+    /** Tells agents the visitor is typing in a conversation; throttled to one push per 3s. */
+    typing(conversationId) {
+        const now = Date.now();
+        if (!this.channel || now - this.lastTypingAt < TYPING_THROTTLE_MS) {
+            return;
+        }
+        this.lastTypingAt = now;
+        this.channel.push('typing', { ticket_id: conversationId });
+    }
+    typingDone() {
+        this.lastTypingAt = 0;
+    }
+    stop() {
+        this.channel?.leave();
+        this.socket?.disconnect();
+        this.channel = null;
+        this.socket = null;
+    }
+}
+exports.OpenDeskRealtime = OpenDeskRealtime;
+function jwtClaim(token, claim) {
+    try {
+        const segment = token.split('.')[1];
+        if (!segment) {
+            return null;
+        }
+        const value = JSON.parse(decodeBase64Url(segment))[claim];
+        return typeof value === 'string' ? value : null;
+    }
+    catch {
+        return null;
+    }
+}
+const BASE64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+/** Decodes base64url to a UTF-8 string without relying on `atob`, which older Hermes lacks. */
+function decodeBase64Url(input) {
+    const clean = input.replace(/-/g, '+').replace(/_/g, '/').replace(/=+$/, '');
+    const bytes = [];
+    let buffer = 0;
+    let bits = 0;
+    for (const char of clean) {
+        const index = BASE64.indexOf(char);
+        if (index < 0) {
+            throw new Error('Invalid base64');
+        }
+        buffer = (buffer << 6) | index;
+        bits += 6;
+        if (bits >= 8) {
+            bits -= 8;
+            bytes.push((buffer >> bits) & 0xff);
+        }
+    }
+    return decodeURIComponent(bytes.map((byte) => `%${byte.toString(16).padStart(2, '0')}`).join(''));
+}

package/lib/storage.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Where the visitor token is kept between launches. The token is a bearer credential for the
+ * visitor's conversations, so prefer `secureStoreStorage` or `keychainStorage`, which keep it in
+ * the iOS Keychain / Android Keystore. Without a storage the session lasts until the app quits.
+ */
+export interface TokenStorage {
+    getItem(key: string): Promise<string | null>;
+    setItem(key: string, value: string): Promise<void>;
+    removeItem(key: string): Promise<void>;
+}
+export declare function memoryStorage(): TokenStorage;
+/** The parts of `expo-secure-store` the adapter uses; pass the module itself. */
+export interface ExpoSecureStoreModule {
+    getItemAsync(key: string, options?: object): Promise<string | null>;
+    setItemAsync(key: string, value: string, options?: object): Promise<void>;
+    deleteItemAsync(key: string, options?: object): Promise<void>;
+    AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY?: unknown;
+}
+/**
+ * Keeps the token in `expo-secure-store`. Takes the module as an argument, so the SDK has no
+ * dependency on Expo:
+ *
+ *     import * as SecureStore from 'expo-secure-store';
+ *     new OpenDesk({ …, storage: secureStoreStorage(SecureStore) });
+ *
+ * On iOS the item is readable after the first unlock and never leaves the device in backups.
+ */
+export declare function secureStoreStorage(SecureStore: ExpoSecureStoreModule): TokenStorage;
+/** The parts of `react-native-keychain` the adapter uses; pass the module itself. */
+export interface KeychainModule {
+    getGenericPassword(options?: object): Promise<false | {
+        username: string;
+        password: string;
+    }>;
+    setGenericPassword(username: string, password: string, options?: object): Promise<unknown>;
+    resetGenericPassword(options?: object): Promise<unknown>;
+    ACCESSIBLE?: {
+        AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY?: unknown;
+    };
+}
+/**
+ * Keeps the token in `react-native-keychain`, one Keychain/Keystore entry per key (the key is
+ * the entry's `service`). Takes the module as an argument, so the SDK has no native dependency:
+ *
+ *     import * as Keychain from 'react-native-keychain';
+ *     new OpenDesk({ …, storage: keychainStorage(Keychain) });
+ */
+export declare function keychainStorage(Keychain: KeychainModule): TokenStorage;

package/lib/storage.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.memoryStorage = memoryStorage;
+exports.secureStoreStorage = secureStoreStorage;
+exports.keychainStorage = keychainStorage;
+function memoryStorage() {
+    const items = new Map();
+    return {
+        getItem: async (key) => items.get(key) ?? null,
+        setItem: async (key, value) => {
+            items.set(key, value);
+        },
+        removeItem: async (key) => {
+            items.delete(key);
+        },
+    };
+}
+/**
+ * Keeps the token in `expo-secure-store`. Takes the module as an argument, so the SDK has no
+ * dependency on Expo:
+ *
+ *     import * as SecureStore from 'expo-secure-store';
+ *     new OpenDesk({ …, storage: secureStoreStorage(SecureStore) });
+ *
+ * On iOS the item is readable after the first unlock and never leaves the device in backups.
+ */
+function secureStoreStorage(SecureStore) {
+    const options = SecureStore.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY === undefined
+        ? undefined
+        : { keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY };
+    return {
+        getItem: (key) => SecureStore.getItemAsync(secureStoreKey(key), options),
+        setItem: (key, value) => SecureStore.setItemAsync(secureStoreKey(key), value, options),
+        removeItem: (key) => SecureStore.deleteItemAsync(secureStoreKey(key), options),
+    };
+}
+/**
+ * Keeps the token in `react-native-keychain`, one Keychain/Keystore entry per key (the key is
+ * the entry's `service`). Takes the module as an argument, so the SDK has no native dependency:
+ *
+ *     import * as Keychain from 'react-native-keychain';
+ *     new OpenDesk({ …, storage: keychainStorage(Keychain) });
+ */
+function keychainStorage(Keychain) {
+    const accessible = Keychain.ACCESSIBLE?.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY;
+    const options = (key) => ({ service: key, ...(accessible === undefined ? {} : { accessible }) });
+    return {
+        getItem: async (key) => {
+            const entry = await Keychain.getGenericPassword({ service: key });
+            return entry ? entry.password : null;
+        },
+        setItem: async (key, value) => {
+            await Keychain.setGenericPassword('opendesk', value, options(key));
+        },
+        removeItem: async (key) => {
+            await Keychain.resetGenericPassword({ service: key });
+        },
+    };
+}
+/** SecureStore keys may only hold letters, digits, `.`, `-` and `_`. */
+function secureStoreKey(key) {
+    return key.replace(/[^A-Za-z0-9._-]/g, '_');
+}

package/lib/types.d.ts

@@ -0,0 +1,203 @@
+/**
+ * Wire types for openDesk's visitor-facing widget API (`/v1/widget/*`), taken from
+ * openDesk's OpenAPI document. Only the fields a chat client needs are listed.
+ */
+export type ConversationStatus = 'open' | 'pending' | 'on_hold' | 'solved' | 'closed';
+export interface WidgetConfig {
+    workspace_name: string;
+    title: string;
+    subtitle: string;
+    greeting: string;
+    intro: string;
+    offline_message: string;
+    brand_color: string;
+    brand: {
+        name: string;
+        color: string;
+    };
+    theme: 'auto' | 'light' | 'dark';
+    radius: 'square' | 'soft' | 'round';
+    locale: string;
+    language: string;
+    open: boolean;
+    require_email: boolean;
+    chat_welcome: boolean;
+    help_center_url: string;
+    avatar_url: string | null;
+    attachments: boolean;
+    attachment_extensions: string[] | null;
+    voice_messages: boolean;
+    voice_max_seconds: number;
+    ai_answers: boolean;
+    suggestions: string[] | null;
+    topics: {
+        id: string;
+        label: string;
+    }[] | null;
+    team: {
+        name: string;
+        avatar_url: string | null;
+    }[] | null;
+    bot: {
+        id: string;
+        name: string;
+        role: string;
+        avatar_url: string;
+        greeting: string;
+        look?: BotLook | null;
+    } | null;
+}
+export interface ContactRef {
+    id: string;
+    name: string;
+    email: string | null;
+    avatar_url: string | null;
+}
+export interface UserRef {
+    id: string;
+    name: string;
+    email: string;
+    avatar_url: string | null;
+}
+export interface BotRef {
+    id: string;
+    name: string;
+    avatar_url: string;
+    look?: BotLook | null;
+}
+/** How the widget draws a bot that has no uploaded image. */
+export interface BotLook {
+    kind?: 'built' | 'emoji' | 'image';
+    shape?: 'blob' | 'circle' | 'rounded' | 'squircle' | 'hexagon' | 'cloud';
+    fill?: {
+        type?: 'solid' | 'gradient';
+        color?: string;
+        to?: string;
+    };
+    eyes?: string;
+    mouth?: string;
+    emoji?: string;
+}
+export interface WidgetSession {
+    visitor_token: string;
+    contact: ContactRef;
+    ws_token: string;
+    gateway_url: string;
+}
+/**
+ * A verified identity: `user_hash` is hex(HMAC-SHA256(widget_secret, user_id)) and must be
+ * computed on your server, never in the app.
+ */
+export interface Identity {
+    user_id?: string;
+    user_hash?: string;
+    email?: string;
+    name?: string;
+    avatar_url?: string;
+}
+export interface Conversation {
+    id: string;
+    subject: string;
+    status: ConversationStatus;
+    last_message_at: string;
+    last_message_preview: string;
+    ai_handoff: boolean;
+}
+export interface Attachment {
+    id: string;
+    filename: string;
+    content_type: string;
+    size_bytes: number;
+    inline: boolean;
+    url: string;
+}
+export interface AIAction {
+    id: string;
+    status: 'pending' | 'confirmed' | 'declined' | 'expired' | 'failed';
+    title: string;
+    summary: string;
+    tool: string;
+}
+export interface Message {
+    id: string;
+    ticket_id: string;
+    kind: 'reply' | 'note';
+    direction: 'inbound' | 'outbound';
+    author: {
+        type: 'contact' | 'user' | 'system' | 'api';
+        contact?: ContactRef | null;
+        user?: UserRef | null;
+        bot?: BotRef | null;
+    };
+    body_text: string;
+    body_html: string;
+    attachments: Attachment[] | null;
+    created_at: string;
+    edited_at?: string | null;
+    deleted_at?: string | null;
+    ai?: boolean;
+    ai_action?: AIAction | null;
+    ai_rating?: 'up' | 'down' | '';
+    /**
+     * Set by the SDK, not openDesk: a render key that stays the same when the optimistic copy
+     * or the streaming AI answer is replaced by the stored message. Use `client_id ?? id` as a key.
+     */
+    client_id?: string;
+}
+/** A file picked on the device, in the shape React Native's FormData expects. */
+export interface LocalFile {
+    uri: string;
+    name: string;
+    type: string;
+    /** Bytes, when the picker reports it; shown before the upload finishes. */
+    size?: number;
+}
+/** What `upload` accepts: a picked file on iOS/Android, or a `File`/`Blob` on the web. */
+export type UploadFile = LocalFile | Blob;
+export interface StartConversationInput {
+    body?: string;
+    attachment_ids?: string[];
+    topic_id?: string;
+    page_url?: string;
+}
+export interface SendMessageInput {
+    body?: string;
+    attachment_ids?: string[];
+    page_url?: string;
+}
+/** The envelope the gateway pushes as `event` on `contact:<wid>:<contact_id>`. */
+export interface RealtimeEvent {
+    id: string;
+    seq: number;
+    type: string;
+    visibility?: string;
+    occurred_at: string;
+    data: {
+        ticket_id?: string;
+        message_id?: string;
+        message?: Message;
+        [key: string]: unknown;
+    };
+}
+/** Ephemeral AI streaming frames pushed as `live`. */
+export interface LiveEvent {
+    type: 'ai.reply.started' | 'ai.reply.delta' | 'ai.reply.tool' | 'ai.reply.ended' | string;
+    data: {
+        reply_id?: string;
+        ticket_id?: string;
+        text?: string;
+        tool?: string;
+        status?: string;
+        message_id?: string;
+        handoff?: boolean;
+        action_id?: string;
+        bot?: BotRef;
+        [key: string]: unknown;
+    };
+}
+export interface TypingEvent {
+    ticket_id: string;
+    user?: {
+        name?: string;
+    } | null;
+}

package/lib/types.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Wire types for openDesk's visitor-facing widget API (`/v1/widget/*`), taken from
+ * openDesk's OpenAPI document. Only the fields a chat client needs are listed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/BotFace.d.ts

@@ -0,0 +1,13 @@
+import type { BotLook } from '../types';
+/** The widget's default bot when none is configured: a violet blob with pill eyes. */
+export declare const defaultBotLook: BotLook;
+/**
+ * The bot avatar the web widget draws from its `look` settings: an uploaded image, an emoji,
+ * or a built face. The face is laid out on the widget's 64-unit grid (body from 7 to 57) with
+ * plain Views, so it needs no SVG library.
+ */
+export declare function BotFace({ size, look, avatarUrl }: {
+    size: number;
+    look?: BotLook | null;
+    avatarUrl?: string | null;
+}): import("react").JSX.Element;

package/lib/ui/BotFace.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultBotLook = void 0;
+exports.BotFace = BotFace;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+/** The widget's default bot when none is configured: a violet blob with pill eyes. */
+exports.defaultBotLook = {
+    kind: 'built',
+    shape: 'blob',
+    fill: { type: 'gradient', color: '#c9bcff', to: '#4a2bc4' },
+    eyes: 'pills',
+    mouth: 'none',
+};
+/**
+ * The bot avatar the web widget draws from its `look` settings: an uploaded image, an emoji,
+ * or a built face. The face is laid out on the widget's 64-unit grid (body from 7 to 57) with
+ * plain Views, so it needs no SVG library.
+ */
+function BotFace({ size, look, avatarUrl }) {
+    const resolved = look ?? exports.defaultBotLook;
+    const u = size / 64;
+    if (avatarUrl && (resolved.kind === 'image' || !look)) {
+        return (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: avatarUrl }, style: { width: size, height: size, borderRadius: size / 2 } });
+    }
+    const body = 50 * u;
+    const radius = { circle: body / 2, blob: body / 2, cloud: body * 0.42, squircle: body * 0.38, rounded: body * 0.28, hexagon: body * 0.3 }[resolved.shape ?? 'blob'] ?? body / 2;
+    const top = resolved.fill?.color ?? '#c9bcff';
+    const bottom = resolved.fill?.type === 'gradient' ? (resolved.fill.to ?? top) : top;
+    if (resolved.kind === 'emoji' && resolved.emoji) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: size, height: size, alignItems: 'center', justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: size * 0.72, lineHeight: size }, children: resolved.emoji }) }));
+    }
+    const at = (x, y, w, h) => ({
+        position: 'absolute',
+        left: x * u,
+        top: y * u,
+        width: w * u,
+        height: h * u,
+    });
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { width: size, height: size }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [at(7, 7, 50, 50), { borderRadius: radius, overflow: 'hidden', backgroundColor: bottom }], children: top === bottom
+                    ? null
+                    : BANDS.map((index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            top: `${(index * 100) / BANDS.length}%`,
+                            height: `${100 / BANDS.length + 1}%`,
+                            backgroundColor: mixHex(top, bottom, index / (BANDS.length - 1)),
+                        } }, index))) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [at(15.5, 12.8, 13, 7), { borderRadius: 4 * u, backgroundColor: '#ffffff', opacity: 0.38, transform: [{ rotate: '-24deg' }] }] }), (0, jsx_runtime_1.jsx)(Eyes, { kind: resolved.eyes ?? 'pills', at: at, u: u }), (0, jsx_runtime_1.jsx)(Mouth, { kind: resolved.mouth ?? 'none', at: at, u: u })] }));
+}
+/** Enough horizontal bands that a two-stop gradient reads smooth at avatar sizes, without an SVG library. */
+const BANDS = Array.from({ length: 24 }, (_, index) => index);
+/** Interpolates two hex colours; `amount` 0 is `from`, 1 is `to`. */
+function mixHex(from, to, amount) {
+    const parse = (hex) => {
+        const h = hex.replace('#', '');
+        const full = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
+        const n = parseInt(full, 16);
+        return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+    };
+    const a = parse(from);
+    const b = parse(to);
+    return `#${a.map((channel, i) => Math.round(channel + (b[i] - channel) * amount).toString(16).padStart(2, '0')).join('')}`;
+}
+function Eyes({ kind, at, u }) {
+    const eye = (style) => (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [style, { backgroundColor: '#ffffff' }] });
+    switch (kind) {
+        case 'dots':
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [eye({ ...at(20.6, 26.6, 6.8, 6.8), borderRadius: 3.4 * u }), eye({ ...at(36.6, 26.6, 6.8, 6.8), borderRadius: 3.4 * u })] }));
+        case 'ovals':
+        case 'glasses':
+        case 'sparkle':
+        case 'star':
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [eye({ ...at(21.3, 25.9, 5.4, 8.2), borderRadius: 2.7 * u }), eye({ ...at(37.3, 25.9, 5.4, 8.2), borderRadius: 2.7 * u })] }));
+        case 'happy':
+        case 'sleepy':
+        case 'wink':
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [eye({ ...at(19.5, 27, 9, 5), borderTopLeftRadius: 4.5 * u, borderTopRightRadius: 4.5 * u }), eye({ ...at(35.5, 27, 9, 5), borderTopLeftRadius: 4.5 * u, borderTopRightRadius: 4.5 * u })] }));
+        default:
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [eye({ ...at(24.4, 28.35, 4.4, 7.3), borderRadius: 2.2 * u }), eye({ ...at(35.2, 28.35, 4.4, 7.3), borderRadius: 2.2 * u })] }));
+    }
+}
+function Mouth({ kind, at, u }) {
+    switch (kind) {
+        case 'smile':
+        case 'cat':
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    at(26.4, 37.6, 11.2, 6.2),
+                    { borderBottomWidth: 1.6 * u, borderColor: '#ffffff', borderBottomLeftRadius: 6 * u, borderBottomRightRadius: 6 * u },
+                ] }));
+        case 'grin':
+        case 'tongue':
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [at(25.4, 38.4, 13.2, 8.2), { backgroundColor: '#ffffff', borderBottomLeftRadius: 6.6 * u, borderBottomRightRadius: 6.6 * u }] }));
+        case 'open':
+            return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [at(28.7, 38.1, 6.6, 7.8), { backgroundColor: '#ffffff', borderRadius: 3.3 * u }] });
+        case 'flat':
+        case 'tiny':
+        case 'smirk':
+            return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [at(28, 41, 8, 1.6), { backgroundColor: '#ffffff', borderRadius: 0.8 * u }] });
+        default:
+            return null;
+    }
+}