@graineai/inapp-react-native 0.39.0 → 0.40.1

package/dist/react-native/appearance.js

@@ -1,3 +1,4 @@
+import { normaliseLogoPlate } from "../theme.js";
 const HEX = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const RADIUS_CEILING = 48;
 const DEFAULT_ORIGIN = "https://www.graine.ai";
@@ -25,7 +26,7 @@ export function resolveNativeAppearance(appearance, fallback) {
     const origin = String(fallback.origin || DEFAULT_ORIGIN).replace(/\/+$/, "");
     const logoUrl = logoKey ? `${origin}/api/embed/logo?k=${encodeURIComponent(logoKey)}` : null;
     const radius = clamp(numeric(a.radius) ?? numeric(fallback.radius) ?? 18, max);
-    return { accent, heading, logoUrl, radius };
+    return { accent, heading, logoUrl, logoPlate: normaliseLogoPlate(a.logoPlate), radius };
 }
 const LIGHT = { surface: "#FFFFFF", border: "#E5E4E0", text: "#101318", muted: "#5F6672" };
 const DARK = { surface: "#17181B", border: "#2C2E33", text: "#F5F5F4", muted: "#A0A5AE" };

package/dist/react-native/fab.js

@@ -7,7 +7,7 @@ import { GraineAgentBar } from "./ui.js";
 import { resolveNativeAppearance } from "./appearance.js";
 import { useDesign } from "./use-design.js";
 import { glyphPixels, launcherRadius, onAccentFor, shadowStyle } from "./design-math.js";
-import { glyphUrl } from "../theme.js";
+import { glyphUrl, LOGO_PLATE_WHITE, logoBox, logoPlateLook, readableOn } from "../theme.js";
 import { UNNAMED_TAP } from "../protocol.js";
 function AboveNativeScreens({ overlay: Overlay, children, }) {
     if (!Overlay)
@@ -69,15 +69,18 @@ export function GraineFab({ webView, position = "bottom-right", size = 56, accen
             return null;
         const side = position === "bottom-left" ? { left: launcherInset.right } : { right: launcherInset.right };
         if (!look.classic) {
-            return (_jsx(DesignedLauncher, { look: look, size: size, accent: accentProp ?? look.tokens.colors.accent, name: name, label: label ?? `Talk to ${name}`, logoUrl: dashboard.logoUrl, origin: client.opts.baseUrl, place: { position: "absolute", bottom: launcherInset.bottom, ...side }, onPress: () => { setOpen(true); api.start(); onOpen?.(); } }));
+            return (_jsx(DesignedLauncher, { look: look, size: size, accent: accentProp ?? look.tokens.colors.accent, name: name, label: label ?? `Talk to ${name}`, logoUrl: dashboard.logoUrl, logoPlate: dashboard.logoPlate, origin: client.opts.baseUrl, place: { position: "absolute", bottom: launcherInset.bottom, ...side }, onPress: () => { setOpen(true); api.start(); onOpen?.(); } }));
         }
         return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label ?? `Talk to ${name}`, onPress: () => { setOpen(true); api.start(); onOpen?.(); }, style: ({ pressed }) => ({
                 position: "absolute", bottom: launcherInset.bottom, ...side,
-                width: size, height: size, borderRadius: size / 2, backgroundColor: dashboardAccent,
+                width: size, height: size, borderRadius: size / 2,
+                ...(dashboard.logoUrl && dashboard.logoPlate === "white"
+                    ? { backgroundColor: LOGO_PLATE_WHITE, borderWidth: 1, borderColor: "#E5E7EB" }
+                    : { backgroundColor: dashboardAccent }),
                 alignItems: "center", justifyContent: "center",
                 opacity: pressed ? 0.85 : 1,
                 elevation: 6, shadowColor: "#000", shadowOpacity: 0.25, shadowRadius: 8, shadowOffset: { width: 0, height: 4 },
-            }), children: dashboard.logoUrl ? (_jsx(Image, { source: { uri: dashboard.logoUrl }, style: { width: size * 0.6, height: size * 0.6, borderRadius: size * 0.3 } })) : (_jsx(Text, { style: { color: "#fff", fontSize: size * 0.4, fontWeight: "700" }, children: name.trim().charAt(0).toUpperCase() || "•" })) }));
+            }), children: dashboard.logoUrl ? (_jsx(Image, { source: { uri: dashboard.logoUrl }, resizeMode: "contain", style: { width: logoBox("circle", size), height: logoBox("circle", size) }, accessibilityIgnoresInvertColors: true })) : (_jsx(Text, { style: { color: "#fff", fontSize: size * 0.4, fontWeight: "700" }, children: name.trim().charAt(0).toUpperCase() || "•" })) }));
     };
     if (!prewarm && !open)
         return _jsx(AboveNativeScreens, { overlay: overlay, children: button({ start: () => { } }) });
@@ -87,9 +90,9 @@ export function GraineLauncherButton({ onPress, style, label, size = 56 }) {
     const { appearance, client } = useGraineAgent();
     const look = useDesign();
     const dashboard = resolveNativeAppearance(appearance, { accent: look.tokens.colors.accent, heading: "Assistant" });
-    return (_jsx(DesignedLauncher, { look: look, size: size, accent: look.tokens.colors.accent, name: dashboard.heading, label: label ?? `Talk to ${dashboard.heading}`, logoUrl: dashboard.logoUrl, origin: client.opts.baseUrl, place: style ?? {}, onPress: onPress }));
+    return (_jsx(DesignedLauncher, { look: look, size: size, accent: look.tokens.colors.accent, name: dashboard.heading, label: label ?? `Talk to ${dashboard.heading}`, logoUrl: dashboard.logoUrl, logoPlate: dashboard.logoPlate, origin: client.opts.baseUrl, place: style ?? {}, onPress: onPress }));
 }
-function DesignedLauncher({ look, size, accent, name, label, logoUrl, origin, place, onPress, }) {
+function DesignedLauncher({ look, size, accent, name, label, logoUrl, logoPlate = "accent", origin, place, onPress, }) {
     const t = look.tokens;
     const [failed, setFailed] = useState([]);
     const fail = (uri) => setFailed((cur) => (cur.includes(uri) ? cur : [...cur, uri]));
@@ -113,11 +116,12 @@ function DesignedLauncher({ look, size, accent, name, label, logoUrl, origin, pl
     const glyph = glyphUri && !failed.includes(glyphUri) ? glyphUri : null;
     const logo = logoUrl && !failed.includes(logoUrl) ? logoUrl : null;
     const hard = t.elevation.hardOffset;
+    const plate = logoPlateLook(!glyph && logo ? logoPlate : "accent", { ...t.colors, accent }, t.shape.borderWidth);
     const corners = {
         borderRadius: radius,
         ...(t.shape.launcher === "squircle" && Platform.OS === "ios" ? { borderCurve: "continuous" } : null),
     };
-    const mark = glyph ? (_jsx(Image, { source: { uri: glyph }, style: { width: g, height: g }, onError: () => fail(glyph), accessibilityIgnoresInvertColors: true }, glyph)) : logo ? (_jsx(Image, { source: { uri: logo }, resizeMode: "contain", style: { width: g, height: g }, onError: () => fail(logo), accessibilityIgnoresInvertColors: true }, logo)) : (_jsx(Text, { style: {
+    const mark = glyph ? (_jsx(Image, { source: { uri: glyph }, style: { width: g, height: g }, onError: () => fail(glyph), accessibilityIgnoresInvertColors: true }, glyph)) : logo ? (_jsx(Image, { source: { uri: logo }, resizeMode: "contain", style: { width: logoBox(pill ? "circle" : t.shape.launcher, size), height: logoBox(pill ? "circle" : t.shape.launcher, size) }, onError: () => fail(logo), accessibilityIgnoresInvertColors: true }, logo)) : (_jsx(Text, { style: {
             color: onAccent, fontSize: Math.round(size * 0.46), fontWeight: String(t.font.weights.title),
             fontFamily: look.font(t.font.heading),
         }, children: name.trim().charAt(0).toUpperCase() || "\u2022" }));
@@ -126,11 +130,12 @@ function DesignedLauncher({ look, size, accent, name, label, logoUrl, origin, pl
                     height: size, minWidth: size, width: pill ? undefined : size,
                     flexDirection: "row", alignItems: "center", justifyContent: "center",
                     gap: pill ? 8 : 0, paddingHorizontal: pill ? Math.round(size * 0.32) : 0,
-                    backgroundColor: accent,
+                    backgroundColor: plate.fill,
+                    ...(plate.outline && !hard ? { borderWidth: plate.outline.width, borderColor: plate.outline.color } : null),
                     opacity: pressed ? 0.85 : 1,
                     ...(hard ? { borderWidth: t.shape.borderWidth, borderColor: t.colors.text } : shadowStyle(t.elevation.floating)),
                 }), children: [mark, pill ? (_jsx(Text, { numberOfLines: 1, style: {
-                            color: onAccent, fontSize: t.font.scale.body, fontWeight: String(t.font.weights.strong),
+                            color: plate.outline ? readableOn(LOGO_PLATE_WHITE) : onAccent, fontSize: t.font.scale.body, fontWeight: String(t.font.weights.strong),
                             fontFamily: look.font(t.font.body),
                         }, children: name })) : null] })] }));
 }

package/dist/react-native/index.d.ts

@@ -43,6 +43,7 @@ interface GraineContextValue {
     fonts: Record<string, string> | null;
     faces: LoadedFaces;
     svg: SvgKit | null;
+    endOnBackground: boolean;
     sessionReady: boolean;
     onEvent: (fn: (e: GraineEvent) => void) => () => void;
     track: (name: string, data?: Record<string, unknown>) => void;

package/dist/react-native/index.js

@@ -390,9 +390,10 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
         connectionQuality,
         network,
         setVariables: (vars) => client.setVariables(vars),
+        endOnBackground,
     }), [client, connected, connecting, error, open, messages, widgets, muted, agentSpeaking, caption,
         launcherVisible, launcherInset, currentScreen, onEvent, appearance, design, fonts, faces, svgKit, sessionReady,
-        surface, surfacePolicy, setSurface, connectionQuality, network]);
+        surface, surfacePolicy, setSurface, connectionQuality, network, endOnBackground]);
     const wantsCapture = captureTaps ?? !!fab;
     const body = fab || wantsCapture ? (_jsxs(GraineTouchCapture, { enabled: wantsCapture, children: [children, fab ? _jsx(GraineFab, { ...fab }) : null] })) : children;
     return _jsx(Ctx.Provider, { value: value, children: body });

package/dist/react-native/voice-bar.js

@@ -2,19 +2,29 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Animated, Easing, Image, PixelRatio, Platform, Pressable, ScrollView, Text, TextInput, View } from "react-native";
 import { Ctx, useGraineAgent } from "./index.js";
-import { GraineLoader } from "./loader.js";
+import { GraineLoader, useGraineLoader } from "./loader.js";
 import { GraineWidget } from "./widget.js";
 import { resolveNativeAppearance } from "./appearance.js";
 import { useDesign } from "./use-design.js";
 import { glyphPixels, launcherRadius, letterSpacing, lineHeight, shadowStyle, surfaceFill } from "./design-math.js";
 import { useKeyboardLift } from "./keyboard.js";
 import { useDraggablePlacement } from "./placement.js";
-import { glyphUrl, SDK_ICONS } from "../theme.js";
+import { glyphUrl, logoBox, logoPlateLook, SDK_ICONS } from "../theme.js";
+import { DEFAULT_LOADER_TEXT } from "../protocol.js";
 import { TitleBar, windowed } from "./window-chrome.js";
 const BAR_HEIGHT = 60;
 const BUTTON = 38;
 const METER = [0.55, 1, 0.7, 0.4];
-function statusOf(api, isChat, chatConnected) {
+function connectingLook(api, connectingText) {
+    if (api.connectStage === "retrying" || api.connectStage === "switching") {
+        return { text: "Reconnecting…", waiting: "reconnecting" };
+    }
+    if (api.slowConnect && connectingText === DEFAULT_LOADER_TEXT.connecting) {
+        return { text: "Still connecting…", waiting: "connecting", label: "Still connecting…" };
+    }
+    return { text: connectingText, waiting: "connecting" };
+}
+function statusOf(api, isChat, chatConnected, connectingText = DEFAULT_LOADER_TEXT.connecting) {
     const conn = api.connectivity?.state;
     const say = (text) => ({ text, waiting: null, meter: false });
     if (api.error)
@@ -29,8 +39,10 @@ function statusOf(api, isChat, chatConnected) {
         return say("Needs microphone");
     if (conn === "failed")
         return say("Couldn’t load · tap to retry");
+    if (api.callFailed)
+        return say("Couldn’t connect · tap to retry");
     if (!api.ready || api.connecting)
-        return { text: "Connecting…", waiting: "connecting", meter: false };
+        return { ...connectingLook(api, connectingText), meter: false };
     if (api.muted)
         return say("Muted");
     if (api.connected && api.phase === "thinking")
@@ -63,7 +75,8 @@ export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, pl
         initialOffset: placement?.bottomOffset,
         onChange: (bottomOffset) => onPlacementChange?.({ bottomOffset }),
     });
-    const status = statusOf(api, isChat, chatConnected);
+    const loader = useGraineLoader();
+    const status = statusOf(api, isChat, chatConnected, loader.text.connecting);
     const conn = api.connectivity?.state;
     const micBlocked = !!api.error || api.micDenied || api.connecting || (!api.ready && conn !== "failed");
     const caption = !isChat && api.captionsOn && api.caption?.text ? api.caption : null;
@@ -79,11 +92,11 @@ export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, pl
     return (_jsxs(View, { pointerEvents: "box-none", ...drag.panHandlers, onLayout: drag.onLayout, style: {
             position: "absolute", zIndex: 900, gap: 8, left: 12, right: 12,
             bottom: baseBottom + drag.offset + keyboardLift,
-        }, children: [_jsx(WidgetGuard, { children: _jsx(GraineWidget, {}) }), isChat ? (_jsx(ChatWindow, { look: look, kit: kit, origin: origin, heading: heading, logoUrl: dash.logoUrl ?? undefined, messages: messages, send: send, online: chatConnected, lifted: keyboardLift > 0, onCollapse: () => (canSwitch ? setSurface("voice") : endCall()) })) : caption ? (_jsx(CaptionCard, { look: look, role: caption.role, text: caption.text, live: !!caption.live })) : null, _jsx(Raised, { t: t, level: "floating", radius: t.shape.radius.xl, children: _jsxs(View, { style: {
+        }, children: [_jsx(WidgetGuard, { children: _jsx(GraineWidget, {}) }), isChat ? (_jsx(ChatWindow, { look: look, kit: kit, origin: origin, heading: heading, logoUrl: dash.logoUrl ?? undefined, logoPlate: dash.logoPlate, messages: messages, send: send, online: chatConnected, lifted: keyboardLift > 0, onCollapse: () => (canSwitch ? setSurface("voice") : endCall()) })) : caption ? (_jsx(CaptionCard, { look: look, role: caption.role, text: caption.text, live: !!caption.live })) : null, _jsx(Raised, { t: t, level: "floating", radius: t.shape.radius.xl, children: _jsxs(View, { style: {
                         height: BAR_HEIGHT, paddingHorizontal: 9, flexDirection: "row", alignItems: "center", gap: 10,
                         backgroundColor: surfaceFill(c.surface, t), borderWidth: t.shape.borderWidth, borderColor: c.border,
                         borderRadius: t.shape.radius.xl, ...softShadow(t, "floating"),
-                    }, children: [_jsx(View, { style: { width: BUTTON, height: BUTTON, borderRadius: BUTTON / 2, backgroundColor: c.accent, alignItems: "center", justifyContent: "center", overflow: "hidden" }, children: _jsx(Mark, { t: t, size: BUTTON, glyph: 18, kit: kit, origin: origin, logoUrl: dash.logoUrl ?? undefined, initial: heading.charAt(0).toUpperCase() || "A", cover: true }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...body(14, t.font.weights.strong), color: c.text, lineHeight: 17.5 }, children: heading }), _jsx(View, { style: { flexDirection: "row", alignItems: "center", gap: 6, marginTop: 1 }, children: status.waiting ? (_jsx(GraineLoader, { moment: status.waiting, size: 14 })) : (_jsxs(_Fragment, { children: [status.meter ? _jsx(Meter, { look: look, color: c.accent }) : null, _jsx(Text, { numberOfLines: 1, style: { ...body(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.3) }, children: status.text })] })) })] }), canSwitch ? (_jsx(RoundButton, { label: isChat ? "Switch to a call" : "Switch to chat", fill: c.accentSoft, onPress: () => setSurface(isChat ? "voice" : "chat"), children: _jsx(Icon, { name: isChat ? "call" : "chat", t: t, color: c.text, kit: kit }) })) : null, isChat ? null : (_jsx(RoundButton, { label: !api.connected ? `Start talking to ${spoken}` : api.muted ? "Unmute" : "Mute", fill: api.muted ? c.danger : c.accent, disabled: micBlocked, onPress: () => {
+                    }, children: [_jsx(View, { style: { width: BUTTON, height: BUTTON, borderRadius: BUTTON / 2, ...markFill(t, dash.logoPlate, !t.icons.launcher && !!dash.logoUrl), alignItems: "center", justifyContent: "center", overflow: "hidden" }, children: _jsx(Mark, { t: t, size: BUTTON, glyph: 18, kit: kit, origin: origin, logoUrl: dash.logoUrl ?? undefined, initial: heading.charAt(0).toUpperCase() || "A" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...body(14, t.font.weights.strong), color: c.text, lineHeight: 17.5 }, children: heading }), _jsx(View, { style: { flexDirection: "row", alignItems: "center", gap: 6, marginTop: 1 }, children: status.waiting ? (_jsx(GraineLoader, { moment: status.waiting, label: status.label, size: 14 })) : (_jsxs(_Fragment, { children: [status.meter ? _jsx(Meter, { look: look, color: c.accent }) : null, _jsx(Text, { numberOfLines: 1, style: { ...body(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.3) }, children: status.text })] })) })] }), canSwitch ? (_jsx(RoundButton, { label: isChat ? "Switch to a call" : "Switch to chat", fill: c.accentSoft, onPress: () => setSurface(isChat ? "voice" : "chat"), children: _jsx(Icon, { name: isChat ? "call" : "chat", t: t, color: c.text, kit: kit }) })) : null, isChat ? null : (_jsx(RoundButton, { label: !api.connected ? `Start talking to ${spoken}` : api.muted ? "Unmute" : "Mute", fill: api.muted ? c.danger : c.accent, disabled: micBlocked, onPress: () => {
                                 if (conn === "failed") {
                                     api.retry();
                                     return;
@@ -125,7 +138,13 @@ function Icon({ name, t, color, size = 18, kit, rotate }) {
     const common = { stroke: color, strokeLinecap: sharp ? "square" : "round", strokeLinejoin: sharp ? "miter" : "round" };
     return (_jsx(View, { style: rotate ? { transform: [{ rotate: "180deg" }] } : undefined, children: _jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", children: [icon.body ? (_jsx(Path, { d: icon.body, ...common, fill: filled || style === "duotone" ? color : "none", fillOpacity: style === "duotone" ? 0.28 : 1, strokeWidth: filled ? Math.max(1, stroke * 0.75) : stroke })) : null, icon.lines ? _jsx(Path, { d: icon.lines, ...common, fill: "none", strokeWidth: stroke }) : null] }) }));
 }
-function Mark({ t, size, glyph, kit, origin, logoUrl, initial, cover = false, }) {
+function markFill(t, plate, showsLogo) {
+    const look = logoPlateLook(showsLogo ? plate : "accent", t.colors, t.shape.borderWidth);
+    return look.outline
+        ? { backgroundColor: look.fill, borderWidth: look.outline.width, borderColor: look.outline.color }
+        : { backgroundColor: look.fill };
+}
+function Mark({ t, size, glyph, kit, origin, logoUrl, initial, shape = "circle", }) {
     const on = t.colors.onAccent;
     const g = t.icons.launcher;
     if (g) {
@@ -136,7 +155,8 @@ function Mark({ t, size, glyph, kit, origin, logoUrl, initial, cover = false, })
         return (_jsx(Image, { source: { uri: glyphUrl(origin, g.id, on, glyphPixels(size, PixelRatio.get()), t.icons.stroke) }, style: { width: glyph, height: glyph }, accessibilityIgnoresInvertColors: true }));
     }
     if (logoUrl) {
-        return _jsx(Image, { source: { uri: logoUrl }, style: cover ? { width: size, height: size } : { width: glyph, height: glyph }, resizeMode: cover ? "cover" : "contain", accessibilityIgnoresInvertColors: true });
+        const box = logoBox(shape, size);
+        return _jsx(Image, { source: { uri: logoUrl }, style: { width: box, height: box }, resizeMode: "contain", accessibilityIgnoresInvertColors: true });
     }
     return _jsx(Text, { style: { color: on, fontSize: Math.round(size * 0.4), fontWeight: "700" }, children: initial });
 }
@@ -191,7 +211,7 @@ function CaptionCard({ look, role, text, live }) {
                     borderRadius: t.shape.radius.lg, paddingHorizontal: 12, paddingVertical: 8, ...softShadow(t, "card"),
                 }, children: [win ? (_jsx(View, { style: { marginBottom: 6 }, children: _jsx(TitleBar, { t: t, title: "captions", size: "caption", radius: t.shape.radius.lg, bleed: { horizontal: 12, top: 8 } }) })) : null, role === "customer" ? (_jsx(Text, { style: { ...look.face(t.font.body, t.font.weights.strong), color: c.accent, fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", marginBottom: 2 }, children: "You" })) : null, _jsx(Text, { numberOfLines: 2, style: { ...look.face(t.font.body, t.font.weights.strong), color: c.text, fontSize: 13, lineHeight: 17.5, opacity: live ? 0.75 : 1 }, children: text })] }) }) }));
 }
-function ChatWindow({ look, kit, origin, heading, logoUrl, messages, send, online, lifted, onCollapse, }) {
+function ChatWindow({ look, kit, origin, heading, logoUrl, logoPlate = "accent", messages, send, online, lifted, onCollapse, }) {
     const t = look.tokens;
     const c = t.colors;
     const r = t.shape.radius;
@@ -217,7 +237,7 @@ function ChatWindow({ look, kit, origin, heading, logoUrl, messages, send, onlin
         letterSpacing: letterSpacing(size, t.font.letterSpacing.body),
     });
     const titleSize = Math.min(t.font.scale.title, 16);
-    return (_jsx(Animated.View, { style: rise, children: _jsx(Raised, { t: t, level: "floating", radius: r.xl, children: _jsx(View, { style: { backgroundColor: c.background, borderWidth: bw, borderColor: c.border, borderRadius: r.xl, ...softShadow(t, "floating") }, children: _jsxs(View, { style: { borderRadius: Math.max(0, r.xl - bw), overflow: "hidden" }, children: [windowed(t) ? (_jsx(TitleBar, { t: t, title: heading, online: online, radius: r.xl, right: _jsx(Pressable, { onPress: onCollapse, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Collapse", children: _jsx(Icon, { name: "chevron", t: t, color: c.textMuted, kit: kit, size: 16, rotate: true }) }) })) : (_jsxs(View, { style: { height: 50, flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 12, backgroundColor: surfaceFill(c.surface, t), borderBottomWidth: bw, borderBottomColor: c.border }, children: [_jsx(View, { style: { width: 30, height: 30, borderRadius: launcherRadius(markShape, 30, t), backgroundColor: c.accent, alignItems: "center", justifyContent: "center", overflow: "hidden", ...(Platform.OS === "ios" && markShape === "squircle" ? { borderCurve: "continuous" } : null) }, children: _jsx(Mark, { t: t, size: 30, glyph: 14, kit: kit, origin: origin, logoUrl: logoUrl, initial: heading.charAt(0).toUpperCase() || "A" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...look.face(t.font.heading, t.font.weights.title), color: c.text, fontSize: titleSize, lineHeight: lineHeight(titleSize, t.font.lineHeight.title), letterSpacing: letterSpacing(titleSize, t.font.letterSpacing.title) }, children: heading }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [online ? _jsx(View, { style: { width: 6, height: 6, borderRadius: 3, backgroundColor: c.success } }) : null, _jsx(Text, { style: { ...text(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.2) }, children: online ? "Online" : "Connecting…" })] })] }), _jsx(Pressable, { onPress: onCollapse, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Collapse", children: _jsx(Icon, { name: "chevron", t: t, color: c.textMuted, kit: kit, rotate: true }) })] })), _jsxs(ScrollView, { ref: scroll, style: { maxHeight: lifted ? 150 : 260 }, contentContainerStyle: { padding: 12, gap: t.spacing.gap }, keyboardShouldPersistTaps: "handled", children: [messages.length === 0 ? (_jsx(Text, { style: { ...text(t.font.scale.body, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.body, t.font.lineHeight.body) }, children: online ? `${heading} can see what you’re looking at — ask it anything.` : "Connecting…" })) : null, messages.map((m, i) => {
+    return (_jsx(Animated.View, { style: rise, children: _jsx(Raised, { t: t, level: "floating", radius: r.xl, children: _jsx(View, { style: { backgroundColor: c.background, borderWidth: bw, borderColor: c.border, borderRadius: r.xl, ...softShadow(t, "floating") }, children: _jsxs(View, { style: { borderRadius: Math.max(0, r.xl - bw), overflow: "hidden" }, children: [windowed(t) ? (_jsx(TitleBar, { t: t, title: heading, online: online, radius: r.xl, right: _jsx(Pressable, { onPress: onCollapse, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Collapse", children: _jsx(Icon, { name: "chevron", t: t, color: c.textMuted, kit: kit, size: 16, rotate: true }) }) })) : (_jsxs(View, { style: { height: 50, flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 12, backgroundColor: surfaceFill(c.surface, t), borderBottomWidth: bw, borderBottomColor: c.border }, children: [_jsx(View, { style: { width: 30, height: 30, borderRadius: launcherRadius(markShape, 30, t), ...markFill(t, logoPlate, !t.icons.launcher && !!logoUrl), alignItems: "center", justifyContent: "center", overflow: "hidden", ...(Platform.OS === "ios" && markShape === "squircle" ? { borderCurve: "continuous" } : null) }, children: _jsx(Mark, { t: t, size: 30, glyph: 14, kit: kit, origin: origin, logoUrl: logoUrl, initial: heading.charAt(0).toUpperCase() || "A", shape: markShape }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...look.face(t.font.heading, t.font.weights.title), color: c.text, fontSize: titleSize, lineHeight: lineHeight(titleSize, t.font.lineHeight.title), letterSpacing: letterSpacing(titleSize, t.font.letterSpacing.title) }, children: heading }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [online ? _jsx(View, { style: { width: 6, height: 6, borderRadius: 3, backgroundColor: c.success } }) : null, _jsx(Text, { style: { ...text(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.2) }, children: online ? "Online" : "Connecting…" })] })] }), _jsx(Pressable, { onPress: onCollapse, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Collapse", children: _jsx(Icon, { name: "chevron", t: t, color: c.textMuted, kit: kit, rotate: true }) })] })), _jsxs(ScrollView, { ref: scroll, style: { maxHeight: lifted ? 150 : 260 }, contentContainerStyle: { padding: 12, gap: t.spacing.gap }, keyboardShouldPersistTaps: "handled", children: [messages.length === 0 ? (_jsx(Text, { style: { ...text(t.font.scale.body, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.body, t.font.lineHeight.body) }, children: online ? `${heading} can see what you’re looking at — ask it anything.` : "Connecting…" })) : null, messages.map((m, i) => {
                                     const b = bubble(t, m.role !== "agent");
                                     return (_jsx(View, { style: [{ maxWidth: "84%" }, b.box], children: _jsx(Text, { style: { ...text(t.font.scale.body, t.font.weights.body), color: b.color, lineHeight: lineHeight(t.font.scale.body, t.font.lineHeight.body), opacity: m.live ? 0.75 : 1 }, children: m.text }) }, i));
                                 })] }), _jsxs(View, { style: { height: 58, flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 10, backgroundColor: c.background }, children: [_jsx(TextInput, { value: draft, onChangeText: setDraft, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false, placeholder: "Message\u2026", placeholderTextColor: c.textMuted, style: {

package/dist/react-native/voice-launcher.d.ts

@@ -31,6 +31,7 @@ export interface GraineVoiceLauncherProps {
         bootMs?: number;
         hardCapMs?: number;
         endWatchdogMs?: number;
+        slowConnectMs?: number;
     };
     children?: (api: GraineVoiceApi) => React.ReactNode;
 }
@@ -61,6 +62,10 @@ export interface GraineVoiceApi {
     reconnecting: boolean;
     error: string | null;
     micDenied: boolean;
+    connectStage: "registering" | "dialling" | "retrying" | "switching" | null;
+    slowConnect: boolean;
+    callFailed: boolean;
 }
 export declare const CAPTION_HISTORY = 12;
+export declare const SLOW_CONNECT_MS = 4000;
 export declare function GraineVoiceLauncher({ webView: WebView, autoStart, active: activeProp, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }: GraineVoiceLauncherProps): React.JSX.Element;

package/dist/react-native/voice-launcher.js

@@ -1,11 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { AppState, View } from "react-native";
-import { useGraineAgent } from "./index.js";
+import { Ctx, useGraineAgent } from "./index.js";
 import { requestMicrophonePermission } from "./permissions.js";
 export const CAPTION_HISTORY = 12;
+export const SLOW_CONNECT_MS = 4000;
 export function GraineVoiceLauncher({ webView: WebView, autoStart = false, active: activeProp = true, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }) {
     const { client, appearance, surface, surfaces } = useGraineAgent();
+    const endOnBackground = useContext(Ctx)?.endOnBackground ?? true;
+    const endOnBackgroundRef = useRef(endOnBackground);
+    endOnBackgroundRef.current = endOnBackground;
     const active = activeProp && surface !== "chat";
     const ref = useRef(null);
     useEffect(() => {
@@ -22,6 +26,9 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const [muted, setMutedState] = useState(false);
     const [fault, setFault] = useState(null);
     const [micDenied, setMicDenied] = useState(false);
+    const [connectStage, setConnectStage] = useState(null);
+    const [slowConnect, setSlowConnect] = useState(false);
+    const [callFailed, setCallFailed] = useState(false);
     const [ready, setReady] = useState(false);
     const readyRef = useRef(false);
     readyRef.current = ready;
@@ -291,6 +298,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 if (msg.connected) {
                     endedNotifiedRef.current = false;
                     setReconnecting(false);
+                    setConnectStage(null);
+                    setCallFailed(false);
                 }
                 setConnected(!!msg.connected);
                 setConnecting(!!msg.connecting);
@@ -299,6 +308,22 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     startedRef.current = false;
                 onCallState?.({ connected: !!msg.connected, connecting: !!msg.connecting });
                 return;
+            case "graine:progress": {
+                const stage = String(msg.stage || "");
+                if (stage === "failed") {
+                    setConnectStage(null);
+                    setConnecting(false);
+                    setCallFailed(true);
+                    startedRef.current = false;
+                    pendingStartRef.current = false;
+                    onCallState?.({ connected: false, connecting: false });
+                    return;
+                }
+                if (stage === "registering" || stage === "dialling" || stage === "retrying" || stage === "switching") {
+                    setConnectStage(stage);
+                }
+                return;
+            }
             case "graine:muted":
                 setMutedState(!!msg.muted);
                 return;
@@ -372,6 +397,15 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         }
     }, [autoStart, beginCall, client, onCaption, onCallState, onMicDenied, onTransport, onError, onEnded, post, pushContext, foldCaption]);
     const pendingStartRef = useRef(false);
+    const waitingOnConnect = active && !connected && !callFailed && (connecting || !ready);
+    useEffect(() => {
+        if (!waitingOnConnect) {
+            setSlowConnect(false);
+            return;
+        }
+        const t = setTimeout(() => setSlowConnect(true), timing?.slowConnectMs ?? SLOW_CONNECT_MS);
+        return () => clearTimeout(t);
+    }, [waitingOnConnect]);
     const lastCaption = captions.length ? captions[captions.length - 1] : null;
     const phase = reconnecting || connectivity.state === "failed" || connectivity.state === "retrying" ? "reconnecting"
         : connecting || (!ready && !!voiceAgentId) ? "connecting"
@@ -394,6 +428,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
             setConnecting(true);
             setMicDenied(false);
             setFault(null);
+            setCallFailed(false);
+            setConnectStage(null);
             setCaptions([]);
             setAwaitingAgent(false);
             client.clearPendingWidget();
@@ -411,6 +447,9 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         reconnecting,
         error: fault,
         micDenied,
+        connectStage,
+        slowConnect,
+        callFailed,
         setMuted: useCallback((m) => {
             setMutedState(m);
             post({ type: "graine:set-muted", muted: m });
@@ -460,6 +499,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         setCaptions([]);
         setMicDenied(false);
         setFault(null);
+        setCallFailed(false);
+        setConnectStage(null);
         client.clearPendingWidget();
         onCallState?.({ connected: false, connecting: false });
     }, [active]);
@@ -480,7 +521,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     post({ type: "graine:warm" });
                 return;
             }
-            if (next === "background" && wasActive && !pending) {
+            if (next === "background" && wasActive && !pending && endOnBackgroundRef.current) {
                 pending = setTimeout(() => {
                     pending = null;
                     if (AppState.currentState !== "active")

package/dist/theme.d.ts

@@ -163,6 +163,18 @@ export declare const DESIGN_BUBBLES: ReadonlyArray<DesignBubbles>;
 export declare const LAUNCHER_SHAPES: ReadonlyArray<LauncherShape>;
 export declare const ICON_STYLES: ReadonlyArray<IconStyle>;
 export declare const DESIGN_CHROMES: ReadonlyArray<DesignChrome>;
+export type LogoPlate = "accent" | "white";
+export declare const LOGO_PLATES: ReadonlyArray<LogoPlate>;
+export declare const LOGO_PLATE_WHITE = "#FFFFFF";
+export declare function normaliseLogoPlate(value: unknown): LogoPlate;
+export declare function logoBox(shape: string, size: number): number;
+export declare function logoPlateLook(plate: LogoPlate, colors: Pick<ThemeColors, "accent" | "border">, borderWidth?: number): {
+    fill: string;
+    outline: {
+        width: number;
+        color: string;
+    } | null;
+};
 export declare function normaliseHex(value: unknown): string | null;
 export declare function mixHex(a: string, b: string, t: number): string;
 export declare function luminanceOf(hex: string): number;