@graineai/inapp-react-native 0.37.0 → 0.38.0

package/INTEGRATION.md

@@ -560,8 +560,12 @@ your funnel.
 
 ## Captions and hanging up
 
-`GraineVoiceLauncher`'s render prop gives you the whole transcript and the CC
-switch, so a caption box is a `map` and nothing else. **0.28.0.**
+`GraineVoiceBar` draws the caption, the microphone and the hang-up in the
+brand's design — mount it in the render prop and you are done (**0.38.0**):
+`{(api) => <GraineVoiceBar api={api} onClose={close} />}`.
+
+Drawing your own instead: the render prop gives you the whole transcript and
+the CC switch, so a caption box is a `map` and nothing else. **0.28.0.**
 
 ```tsx
 <GraineVoiceLauncher webView={WebView} active={open} autoStart>
@@ -707,14 +711,20 @@ part. Everything else is unchanged.
 
 ## Making the bar yours
 
-Three levels, and most apps stop at the first.
+Most apps stop at the first level — and since 0.38.0 the first level is the
+whole design.
 
-**1. The dashboard.** Accent, title and logo come from Appearance on the agent
-and reach every surface without an app release. Set the colour in Graine and it
-changes here. This is the level a brand team should be working at.
+**1. The dashboard.** The brand chooses a design in Appearance — one of fifteen
+philosophies, tuned for colour, corners, typeface, launcher, icons, motion and
+bubbles — and the SDK draws it on every surface with no app release:
+`GraineVoiceBar` for the call, `GraineAgentBar` for the chat, the launcher and
+every component. Give the provider `loadFont={Font.loadAsync}` and
+`svg={{ Svg, Path }}` once and the SDK loads the design's typeface and draws its
+icons itself. This is the level a brand team should be working at.
 
-**2. Props, when the dashboard cannot express it.** Any prop passed wins over
-the dashboard, so an app that needs something per-build still can.
+**2. Props, when the dashboard cannot express it.** On `GraineAgentBar`, any
+prop passed wins over the dashboard, so an app that needs something per-build
+still can.
 
 ```tsx
 <GraineAgentBar
@@ -749,15 +759,16 @@ import type { GraineBarTheme } from "@graineai/inapp-react-native";
 | `onAccent` | Text and glyphs sitting on the accent, and on `danger` |
 | `danger` | Muted — the one state worth its own colour |
 
-**4. Or draw your own.** Everything the bar does is built on the public hooks,
-so an app with a design system should ignore the component entirely:
+**4. Or draw your own.** Everything the bar does is built on the public hooks —
+but the design chosen in the dashboard then stops reaching that part of your
+app, so match it with `useGraineTheme()`, which returns the design's tokens:
 
 ```tsx
 const { connected, muted, setMuted, messages, send, caption } = useGraineAgent();
+const theme = useGraineTheme();   // colours, type, corners, spacing, shadows
 ```
 
-That is the expected path for anyone with a brand team, and nothing else in the
-SDK depends on this component.
+Nothing else in the SDK depends on these components.
 
 ---
 
@@ -1096,6 +1107,9 @@ told to ignore).
 | `endOnBackground` | `boolean` | Default `true`. You want it on. |
 | `appVersion` | `string` | Which build the conversation happened in. Lands on the call record. |
 | `friction` | `FrictionConfig` | This app's friction rules, layered over the dashboard's. See *Friction detection*. |
+| `loadFont` | `(fonts) => Promise` | expo-font's `Font.loadAsync`. The SDK loads the design's typeface itself — only the faces it uses, from Graine. **0.38.0** |
+| `svg` | `{ Svg, Path }` | react-native-svg's components, so the SDK draws its icons in the design's style. **0.38.0** |
+| `fonts` | `Record<string, string>` | Families your app already bundles (dashboard name → your `fontFamily`); they win over a download. |
 
 ### `GraineInAppClient`
 

package/README.md

@@ -119,13 +119,17 @@ over the air.
 
 ```tsx
 import { WebView } from "react-native-webview";
-import { GraineProvider, GraineVoiceLauncher, GraineAgentBar } from "@graineai/inapp-react-native";
+import * as Font from "expo-font";
+import Svg, { Path } from "react-native-svg";
+import { GraineProvider, GraineVoiceLauncher, GraineVoiceBar } from "@graineai/inapp-react-native";
 
 <GraineProvider
   baseUrl="…"
   publishableKey="pk_live_…"
   navigationRef={navigationRef}
   autoConnect={false}          // the launcher owns the connection
+  loadFont={Font.loadAsync}    // the SDK loads the design's typeface itself
+  svg={{ Svg, Path }}          // …and draws its icons in the design's style
 >
   <RootNavigator />
   <GraineVoiceLauncher
@@ -133,7 +137,7 @@ import { GraineProvider, GraineVoiceLauncher, GraineAgentBar } from "@graineai/i
     autoStart
     onError={(m) => console.warn("[graine]", m)}
   >
-    {() => <GraineAgentBar />}
+    {(api) => <GraineVoiceBar api={api} />}
   </GraineVoiceLauncher>
 </GraineProvider>
 ```
@@ -225,6 +229,7 @@ requests a permission on your behalf.
 | `useGraineIdentify()` | Who the customer is — it reaches the greeting and the call record. |
 | `useGraineHighlight()` / `useGraineWidget()` | Let the agent point at things and draw components. |
 | `GraineVoiceLauncher` | The voice engine: WebView, microphone, WebRTC or WebSocket. |
+| `GraineVoiceBar` | The voice bar in the brand's design, as the dashboard previews it. Mount inside `GraineVoiceLauncher`. |
 | `fab={{ webView }}` on the provider / `GraineFab` | The floating button, mounted for you; opens the conversation, folds back on end. |
 | `captureTaps` / `GraineTouchCapture` | Every tap tracked automatically — no per-button wrapping. |
 | `useGraineInit()` | `{ isInitialized, error }`. |

package/dist/index.d.ts

@@ -23,14 +23,17 @@ export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, type Fri
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, type AudioAdapter, type VoiceSessionOptions, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, type AudioFormat, type DecodedAudio, } from "./audio.js";
 export { addMaskRule, maskDeep, maskString } from "./mask.js";
-export { GraineProvider, useGraineAgent, useGraineSurface, useGraineConnection, useGraineVariables, useKeyboardLift, liftFor, useDraggablePlacement, clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, useGraineTheme, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index.js";
+export { GraineProvider, useGraineAgent, useGraineSurface, useGraineConnection, useGraineVariables, useKeyboardLift, liftFor, useDraggablePlacement, clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, useGraineTheme, type GraineEvent, type GraineProviderProps, type SvgKit, type Turn, type Caption, } from "./react-native/index.js";
 export { requestMicrophonePermission } from "./react-native/permissions.js";
 export { GraineFab, GraineTouchCapture, TAP_MAX_MOVE_PX, TAP_MAX_MS, type GraineFabProps, type GraineTouchCaptureProps, } from "./react-native/fab.js";
 export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";
 export { resolveNativeAppearance, type NativeAppearance, type NativeAppearanceFallback, resolveWidgetPalette, type WidgetPalette, type WidgetMode, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, type RtcVoiceState, type RtcVoiceErrorCode, type RtcVoiceSession, type RtcVoiceOptions, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps, type GraineBarTheme, } from "./react-native/ui.js";
+export { GraineVoiceBar, type GraineVoiceBarProps } from "./react-native/voice-bar.js";
+export { GraineLauncherButton, type GraineLauncherButtonProps } from "./react-native/fab.js";
+export { faceFor, facesForDesign, fontUrl, FONT_ASSET_VERSION, type FontLoader, type FontFace } from "./react-native/fonts.js";
 export { GraineVoiceLauncher, CAPTION_HISTORY, type GraineVoiceLauncherProps, type GraineVoiceApi, } from "./react-native/voice-launcher.js";
 export { LauncherVisibilityTracker, activeRouteName, type LauncherInset, type LauncherContinuity, type LauncherDelayPolicy, type LauncherGroup, type LauncherVisibility, type VisibilityDecision, } from "./react-native/navigation.js";
-export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, type DesignConfig, type DesignPreset, type ThemeTokens, type ThemeColors, type ThemeShadow, type ResolvedDesign, type DesignBubbles, type LauncherShape, type MotionEasing, type IconStyle, } from "./theme.js";
+export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, SDK_ICONS, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, type DesignConfig, type DesignPreset, type ThemeTokens, type ThemeColors, type ThemeShadow, type ResolvedDesign, type DesignBubbles, type LauncherShape, type MotionEasing, type IconStyle, type SdkIconName, } from "./theme.js";
 export { sessionDesign } from "./design.js";

package/dist/index.js

@@ -21,7 +21,10 @@ export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";
 export { resolveNativeAppearance, resolveWidgetPalette, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, } from "./react-native/ui.js";
+export { GraineVoiceBar } from "./react-native/voice-bar.js";
+export { GraineLauncherButton } from "./react-native/fab.js";
+export { faceFor, facesForDesign, fontUrl, FONT_ASSET_VERSION } from "./react-native/fonts.js";
 export { GraineVoiceLauncher, CAPTION_HISTORY, } from "./react-native/voice-launcher.js";
 export { LauncherVisibilityTracker, activeRouteName, } from "./react-native/navigation.js";
-export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
+export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, SDK_ICONS, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
 export { sessionDesign } from "./design.js";

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

@@ -22,3 +22,10 @@ export interface GraineFabProps {
     prewarm?: boolean;
 }
 export declare function GraineFab({ webView, position, size, accent: accentProp, label, overlay, prewarm, onOpen, onClose }: GraineFabProps): React.JSX.Element;
+export interface GraineLauncherButtonProps {
+    onPress: () => void;
+    style?: ViewStyle;
+    label?: string;
+    size?: number;
+}
+export declare function GraineLauncherButton({ onPress, style, label, size }: GraineLauncherButtonProps): React.JSX.Element;

package/dist/react-native/fab.js

@@ -83,6 +83,12 @@ export function GraineFab({ webView, position = "bottom-right", size = 56, accen
         return _jsx(AboveNativeScreens, { overlay: overlay, children: button({ start: () => { } }) });
     return (_jsx(GraineVoiceLauncher, { webView: webView, onEnded: () => { setOpen(false); onClose?.(); }, children: (api) => (_jsx(AboveNativeScreens, { overlay: overlay, children: open ? _jsx(GraineAgentBar, { accent: look.classic ? dashboardAccent : accentProp, name: name }) : button(api) })) }));
 }
+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 }));
+}
 function DesignedLauncher({ look, size, accent, name, label, logoUrl, origin, place, onPress, }) {
     const t = look.tokens;
     const [failed, setFailed] = useState([]);

package/dist/react-native/font-weights.d.ts

@@ -0,0 +1 @@
+export declare const FONT_WEIGHTS: Record<string, number[]>;

package/dist/react-native/font-weights.js

@@ -0,0 +1,26 @@
+export const FONT_WEIGHTS = {
+    "Inter": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Roboto": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Geist": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "IBM Plex Sans": [100, 200, 300, 400, 500, 600, 700],
+    "IBM Plex Sans Devanagari": [100, 200, 300, 400, 500, 600, 700],
+    "DM Sans": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Noto Sans": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Noto Sans Devanagari": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Noto Sans Tamil": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Mukta": [200, 300, 400, 500, 600, 700, 800],
+    "Hind": [300, 400, 500, 600, 700],
+    "Anek Devanagari": [100, 200, 300, 400, 500, 600, 700, 800],
+    "Poppins": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Baloo 2": [400, 500, 600, 700, 800],
+    "Nunito": [200, 300, 400, 500, 600, 700, 800, 900],
+    "Atkinson Hyperlegible Next": [200, 300, 400, 500, 600, 700, 800],
+    "Source Serif 4": [200, 300, 400, 500, 600, 700, 800, 900],
+    "Newsreader": [200, 300, 400, 500, 600, 700, 800],
+    "Fraunces": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Playfair Display": [400, 500, 600, 700, 800, 900],
+    "Tiro Devanagari Hindi": [400],
+    "Noto Serif Devanagari": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Martel": [200, 300, 400, 600, 700, 800, 900],
+    "JetBrains Mono": [100, 200, 300, 400, 500, 600, 700, 800],
+};

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

@@ -0,0 +1,20 @@
+import type { ResolvedDesign, ThemeTokens } from "../theme.js";
+export type FontLoader = (fonts: Record<string, string>) => Promise<unknown>;
+export interface FontFace {
+    family: string;
+    weight: number;
+    name: string;
+    url: string;
+}
+export type LoadedFaces = Record<string, string>;
+export declare const faceKey: (family: string, weight: number) => string;
+export declare function nearestWeight(available: number[], want: number): number | null;
+export declare const FONT_ASSET_VERSION = 1;
+export declare function fontUrl(origin: string, family: string, weight: number): string;
+export declare function faceFor(family: string | null | undefined, weight: number, origin?: string): FontFace | null;
+export declare function facesFor(t: ThemeTokens, origin?: string): FontFace[];
+export declare function facesForDesign(design: ResolvedDesign, origin?: string): FontFace[];
+export declare function textFace(family: string | null | undefined, weight: number, hostFonts: Record<string, string> | null | undefined, loaded: LoadedFaces | null | undefined, hostLookup: (family: string | null | undefined, fonts: Record<string, string> | null | undefined) => string | undefined): {
+    fontFamily?: string;
+    fontWeight: any;
+};

package/dist/react-native/fonts.js

@@ -0,0 +1,69 @@
+import { FONT_WEIGHTS } from "./font-weights.js";
+export const faceKey = (family, weight) => `${family}|${weight}`;
+export function nearestWeight(available, want) {
+    if (!available.length)
+        return null;
+    let best = available[0];
+    for (const w of available) {
+        const d = Math.abs(w - want);
+        const bd = Math.abs(best - want);
+        if (d < bd || (d === bd && w > best))
+            best = w;
+    }
+    return best;
+}
+export const FONT_ASSET_VERSION = 1;
+export function fontUrl(origin, family, weight) {
+    const base = String(origin || "https://www.graine.ai").replace(/\/+$/, "");
+    return `${base}/api/embed/font?f=${encodeURIComponent(family)}&w=${weight}&v=${FONT_ASSET_VERSION}`;
+}
+export function faceFor(family, weight, origin = "https://www.graine.ai") {
+    const want = String(family ?? "").trim();
+    if (!want || want.toLowerCase() === "system")
+        return null;
+    const canonical = Object.prototype.hasOwnProperty.call(FONT_WEIGHTS, want)
+        ? want
+        : Object.keys(FONT_WEIGHTS).find((k) => k.toLowerCase() === want.toLowerCase());
+    if (!canonical)
+        return null;
+    const w = nearestWeight(FONT_WEIGHTS[canonical], weight);
+    if (w == null)
+        return null;
+    return {
+        family: canonical,
+        weight: w,
+        name: `Graine-${canonical.replace(/[^A-Za-z0-9]/g, "")}-${w}`,
+        url: fontUrl(origin, canonical, w),
+    };
+}
+export function facesFor(t, origin) {
+    const out = new Map();
+    const add = (family, weight) => {
+        const f = faceFor(family, weight, origin);
+        if (f)
+            out.set(faceKey(f.family, f.weight), f);
+    };
+    add(t.font.body, t.font.weights.body);
+    add(t.font.body, t.font.weights.strong);
+    add(t.font.heading, t.font.weights.title);
+    add(t.font.heading, t.font.weights.strong);
+    return [...out.values()];
+}
+export function facesForDesign(design, origin) {
+    const out = new Map();
+    for (const t of [design.light, design.dark]) {
+        for (const f of facesFor(t, origin))
+            out.set(faceKey(f.family, f.weight), f);
+    }
+    return [...out.values()];
+}
+export function textFace(family, weight, hostFonts, loaded, hostLookup) {
+    const host = hostLookup(family, hostFonts);
+    if (host)
+        return { fontFamily: host, fontWeight: String(weight) };
+    const face = faceFor(family, weight);
+    const name = face && loaded ? loaded[faceKey(face.family, face.weight)] : undefined;
+    if (name)
+        return { fontFamily: name, fontWeight: "normal" };
+    return { fontWeight: String(weight) };
+}

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

@@ -18,6 +18,7 @@ import { type AgentSurface, type ConnectionQuality } from "../protocol.js";
 export type { ConnectionQuality, QualitySample } from "../protocol.js";
 import type { FrictionConfig } from "../friction.js";
 import type { ResolvedDesign } from "../theme.js";
+import { type FontLoader, type LoadedFaces } from "./fonts.js";
 export { useGraineTheme } from "./use-design.js";
 import { type LauncherInset, type LauncherVisibility } from "./navigation.js";
 interface GraineContextValue {
@@ -40,6 +41,8 @@ interface GraineContextValue {
     appearance: Record<string, any> | null;
     design: ResolvedDesign;
     fonts: Record<string, string> | null;
+    faces: LoadedFaces;
+    svg: SvgKit | null;
     sessionReady: boolean;
     onEvent: (fn: (e: GraineEvent) => void) => () => void;
     track: (name: string, data?: Record<string, unknown>) => void;
@@ -143,8 +146,14 @@ export interface GraineProviderProps extends Partial<GraineInAppOptions> {
     launcherDelayMs?: number;
     visibility?: LauncherVisibility;
     fonts?: Record<string, string>;
+    loadFont?: FontLoader;
+    svg?: SvgKit;
 }
-export declare function GraineProvider({ children, autoConnect, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs, visibility, fonts: fontsProp, client: providedClient, ...options }: GraineProviderProps): React.JSX.Element;
+export interface SvgKit {
+    Svg: React.ComponentType<any>;
+    Path: React.ComponentType<any>;
+}
+export declare function GraineProvider({ children, autoConnect, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs, visibility, fonts: fontsProp, loadFont, svg: svgProp, client: providedClient, ...options }: GraineProviderProps): React.JSX.Element;
 export declare function useGraineAgent(): GraineContextValue;
 export declare function useGraineSurface(): {
     surface: AgentSurface;

package/dist/react-native/index.js

@@ -13,7 +13,8 @@ export { widgetSurface } from "../protocol.js";
 export { resolveSurface } from "../protocol.js";
 import { resolveSurface } from "../protocol.js";
 import { sessionDesign } from "../design.js";
-import { sameValue } from "./design-math.js";
+import { fontFamilyFor, sameValue } from "./design-math.js";
+import { facesForDesign, faceKey } from "./fonts.js";
 export { useGraineTheme } from "./use-design.js";
 import { LauncherVisibilityTracker, activeRouteName, } from "./navigation.js";
 export const PENDING_WIDGET_MS = 12000;
@@ -32,7 +33,7 @@ export function useGraineClient() {
     }
     return client;
 }
-export function GraineProvider({ children, autoConnect = true, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground = true, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs = 0, visibility, fonts: fontsProp, client: providedClient, ...options }) {
+export function GraineProvider({ children, autoConnect = true, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground = true, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs = 0, visibility, fonts: fontsProp, loadFont, svg: svgProp, client: providedClient, ...options }) {
     const clientRef = useRef(null);
     if (!clientRef.current) {
         clientRef.current =
@@ -73,6 +74,32 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
     }, []);
     const fontsKey = fontsProp ? JSON.stringify(fontsProp) : "";
     const fonts = useMemo(() => (fontsKey ? JSON.parse(fontsKey) : null), [fontsKey]);
+    const [faces, setFaces] = useState({});
+    const svgKit = useMemo(() => (svgProp?.Svg && svgProp?.Path ? { Svg: svgProp.Svg, Path: svgProp.Path } : null), [svgProp?.Svg, svgProp?.Path]);
+    const askedRef = useRef(new Set());
+    const loadFontRef = useRef(loadFont);
+    loadFontRef.current = loadFont;
+    const hasLoader = typeof loadFont === "function";
+    useEffect(() => {
+        const load = loadFontRef.current;
+        if (typeof load !== "function")
+            return;
+        let live = true;
+        for (const face of facesForDesign(design, client.opts.baseUrl)) {
+            const key = faceKey(face.family, face.weight);
+            if (fontFamilyFor(face.family, fonts))
+                continue;
+            if (askedRef.current.has(key))
+                continue;
+            askedRef.current.add(key);
+            Promise.resolve()
+                .then(() => load({ [face.name]: face.url }))
+                .then(() => { if (live)
+                setFaces((cur) => (cur[key] === face.name ? cur : { ...cur, [key]: face.name })); })
+                .catch(() => { });
+        }
+        return () => { live = false; askedRef.current.clear(); };
+    }, [client, design, fonts, hasLoader]);
     const [sessionReady, setSessionReady] = useState(false);
     const [connectionQuality, setConnectionQuality] = useState("unknown");
     const [network, setNetwork] = useState("unknown");
@@ -350,6 +377,8 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
         appearance,
         design,
         fonts,
+        faces,
+        svg: svgKit,
         sessionReady,
         onEvent,
         track: (name, data) => client.track(name, data),
@@ -362,7 +391,7 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
         network,
         setVariables: (vars) => client.setVariables(vars),
     }), [client, connected, connecting, error, open, messages, widgets, muted, agentSpeaking, caption,
-        launcherVisible, launcherInset, currentScreen, onEvent, appearance, design, fonts, sessionReady,
+        launcherVisible, launcherInset, currentScreen, onEvent, appearance, design, fonts, faces, svgKit, sessionReady,
         surface, surfacePolicy, setSurface, connectionQuality, network]);
     const wantsCapture = captureTaps ?? !!fab;
     const body = fab || wantsCapture ? (_jsxs(GraineTouchCapture, { enabled: wantsCapture, children: [children, fab ? _jsx(GraineFab, { ...fab }) : null] })) : children;

package/dist/react-native/use-design.d.ts

@@ -6,6 +6,10 @@ export interface DesignLook {
     tokens: ThemeTokens;
     classic: boolean;
     font: (family: string) => string | undefined;
+    face: (family: string, weight: number) => {
+        fontFamily?: string;
+        fontWeight: any;
+    };
     durationMs: number;
     reduceMotion: boolean;
     easing: (t: number) => number;

package/dist/react-native/use-design.js

@@ -4,7 +4,9 @@ import { Ctx } from "./index.js";
 import { sessionDesign } from "../design.js";
 import { pickTokens } from "../theme.js";
 import { fontFamilyFor, isClassicLook } from "./design-math.js";
+import { faceFor, faceKey, textFace } from "./fonts.js";
 const DEFAULT_DESIGN = sessionDesign(null);
+const NO_FACES = {};
 const classicSeen = new WeakMap();
 function classic(design) {
     let v = classicSeen.get(design);
@@ -53,6 +55,7 @@ export function useDesign(scheme) {
     const reduce = useReduceMotion();
     const design = ctx?.design ?? DEFAULT_DESIGN;
     const fonts = ctx?.fonts ?? null;
+    const faces = ctx?.faces ?? NO_FACES;
     return useMemo(() => {
         const tokens = scheme === "light" ? design.light : scheme === "dark" ? design.dark : pickTokens(design, device);
         const durationMs = reduce || tokens.motion.easing === "none" ? 0 : Math.max(0, tokens.motion.durationMs);
@@ -60,12 +63,21 @@ export function useDesign(scheme) {
             design,
             tokens,
             classic: classic(design),
-            font: (family) => fontFamilyFor(family, fonts),
+            font: (family) => {
+                const own = fontFamilyFor(family, fonts);
+                if (own)
+                    return own;
+                const weight = family === tokens.font.heading && family !== tokens.font.body
+                    ? tokens.font.weights.title : tokens.font.weights.body;
+                const f = faceFor(family, weight);
+                return f ? faces[faceKey(f.family, f.weight)] : undefined;
+            },
+            face: (family, weight) => textFace(family, weight, fonts, faces, fontFamilyFor),
             durationMs,
             reduceMotion: reduce,
             easing: easingOf(tokens.motion.easing, tokens.motion.bounce),
         };
-    }, [design, fonts, device, reduce, scheme]);
+    }, [design, fonts, faces, device, reduce, scheme]);
 }
 export function useGraineTheme() {
     return useDesign().tokens;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import type { GraineVoiceApi } from "./voice-launcher.js";
+export interface GraineVoiceBarProps {
+    api: GraineVoiceApi;
+    onClose?: () => void;
+    bottomInset?: number;
+    draggable?: boolean;
+    placement?: {
+        bottomOffset?: number;
+    } | null;
+    onPlacementChange?: (placement: {
+        bottomOffset: number;
+    }) => void;
+    name?: string;
+}
+export declare function GraineVoiceBar({ api, onClose, bottomInset, draggable, placement, onPlacementChange, name: nameProp, }: GraineVoiceBarProps): React.JSX.Element;

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

@@ -0,0 +1,255 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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";
+const BAR_HEIGHT = 60;
+const BUTTON = 38;
+const METER = [0.55, 1, 0.7, 0.4];
+function statusOf(api, isChat, chatConnected) {
+    const conn = api.connectivity?.state;
+    const say = (text) => ({ text, waiting: null, meter: false });
+    if (api.error)
+        return say("Unavailable");
+    if (isChat)
+        return chatConnected ? say("Online") : { text: "Connecting…", waiting: "connecting", meter: false };
+    if (api.network === "offline")
+        return say("No connection");
+    if (api.reconnecting || conn === "retrying")
+        return { text: "Reconnecting…", waiting: "reconnecting", meter: false };
+    if (api.micDenied)
+        return say("Needs microphone");
+    if (conn === "failed")
+        return say("Couldn’t load · tap to retry");
+    if (!api.ready || api.connecting)
+        return { text: "Connecting…", waiting: "connecting", meter: false };
+    if (api.muted)
+        return say("Muted");
+    if (api.connected && api.phase === "thinking")
+        return { text: "Thinking…", waiting: "thinking", meter: false };
+    if (api.connected && api.caption?.role === "agent" && api.caption.live)
+        return { text: "Speaking", waiting: null, meter: true };
+    if (api.connected && api.quality === "poor")
+        return say("Weak connection");
+    if (api.connected)
+        return { text: "Listening", waiting: null, meter: true };
+    return say("Tap to talk");
+}
+export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, placement, onPlacementChange, name: nameProp, }) {
+    const ctx = useContext(Ctx);
+    const { messages, send, connected: chatConnected, appearance, surface, canSwitch, setSurface, launcherInset } = useGraineAgent();
+    const look = useDesign();
+    const t = look.tokens;
+    const c = t.colors;
+    const kit = ctx?.svg ?? null;
+    const origin = ctx?.client?.opts?.baseUrl || "https://www.graine.ai";
+    const dash = resolveNativeAppearance(appearance, { accent: c.accent, heading: "Assistant" });
+    const heading = dash.heading;
+    const spoken = nameProp || heading;
+    const isChat = surface === "chat";
+    const keyboardLift = useKeyboardLift();
+    const baseBottom = bottomInset ?? launcherInset?.bottom ?? 96;
+    const drag = useDraggablePlacement({
+        baseBottom,
+        enabled: draggable,
+        initialOffset: placement?.bottomOffset,
+        onChange: (bottomOffset) => onPlacementChange?.({ bottomOffset }),
+    });
+    const status = statusOf(api, isChat, chatConnected);
+    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;
+    const body = (size, weight) => ({
+        ...look.face(t.font.body, weight),
+        fontSize: size,
+        letterSpacing: letterSpacing(size, t.font.letterSpacing.body),
+    });
+    const endCall = () => {
+        api.end();
+        setTimeout(() => onClose?.(), 400);
+    };
+    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: {
+                        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: () => {
+                                if (conn === "failed") {
+                                    api.retry();
+                                    return;
+                                }
+                                if (api.connected)
+                                    api.setMuted(!api.muted);
+                                else
+                                    api.start();
+                            }, children: _jsx(Icon, { name: api.muted ? "micOff" : "mic", t: t, color: api.muted ? "#FFFFFF" : c.onAccent, kit: kit }) })), _jsx(RoundButton, { label: api.connected ? "End call" : "Close", fill: api.connected ? c.danger : c.accentSoft, onPress: endCall, children: _jsx(Icon, { name: api.connected ? "end" : "close", t: t, color: api.connected ? "#FFFFFF" : c.textMuted, kit: kit }) })] }) })] }));
+}
+function softShadow(t, level) {
+    return t.elevation.hardOffset ? {} : shadowStyle(t.elevation[level]);
+}
+function Raised({ t, radius, children }) {
+    const hard = t.elevation.hardOffset;
+    if (!hard)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs(View, { children: [_jsx(View, { pointerEvents: "none", style: { position: "absolute", left: hard.x, top: hard.y, right: -hard.x, bottom: -hard.y, borderRadius: radius, backgroundColor: t.colors.text } }), children] }));
+}
+function RoundButton({ label, fill, disabled = false, onPress, children, }) {
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: label, style: {
+            width: BUTTON, height: BUTTON, borderRadius: BUTTON / 2, alignItems: "center", justifyContent: "center",
+            backgroundColor: fill, opacity: disabled ? 0.4 : 1,
+        }, children: children }));
+}
+const FALLBACK = {
+    mic: "🎙", micOff: "🔇", end: "✕", send: "↑", chat: "💬", call: "📞", chevron: "⌄", close: "✕",
+};
+function Icon({ name, t, color, size = 18, kit, rotate }) {
+    if (!kit) {
+        return _jsx(Text, { style: { color, fontSize: Math.round(size * 0.8), lineHeight: size, textAlign: "center" }, children: FALLBACK[name] });
+    }
+    const { Svg, Path } = kit;
+    const icon = SDK_ICONS[name];
+    const style = t.icons.style;
+    const sharp = style === "sharp";
+    const filled = style === "filled";
+    const stroke = t.icons.stroke;
+    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, }) {
+    const on = t.colors.onAccent;
+    const g = t.icons.launcher;
+    if (g) {
+        if (kit) {
+            const { Svg, Path } = kit;
+            return (_jsx(Svg, { width: glyph, height: glyph, viewBox: "0 0 24 24", children: _jsx(Path, { d: g.path, fill: g.stroke ? "none" : on, stroke: g.stroke ? on : "none", strokeWidth: g.stroke ? t.icons.stroke : 0, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        }
+        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 });
+    }
+    return _jsx(Text, { style: { color: on, fontSize: Math.round(size * 0.4), fontWeight: "700" }, children: initial });
+}
+function Meter({ look, color }) {
+    const still = look.durationMs <= 0;
+    const bars = useRef(METER.map(() => new Animated.Value(1))).current;
+    useEffect(() => {
+        if (still) {
+            bars.forEach((b) => b.setValue(1));
+            return;
+        }
+        const period = Math.max(420, look.durationMs * 3.2);
+        const ease = Easing.inOut(Easing.ease);
+        const runs = bars.map((b, i) => {
+            b.setValue(0.35);
+            return Animated.sequence([
+                Animated.delay(i * 90),
+                Animated.loop(Animated.sequence([
+                    Animated.timing(b, { toValue: 1, duration: period, easing: ease, useNativeDriver: true }),
+                    Animated.timing(b, { toValue: 0.35, duration: period, easing: ease, useNativeDriver: true }),
+                ])),
+            ]);
+        });
+        runs.forEach((r) => r.start());
+        return () => runs.forEach((r) => r.stop());
+    }, [still, look.durationMs, bars]);
+    return (_jsx(View, { style: { flexDirection: "row", alignItems: "flex-end", height: 12, gap: 2 }, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: METER.map((h, i) => (_jsx(Animated.View, { style: {
+                width: 2.5, height: Math.round(12 * h * 10) / 10, borderRadius: 1.25, backgroundColor: color,
+                transform: [{ scaleY: bars[i] }], transformOrigin: "bottom",
+            } }, i))) }));
+}
+function useRise(look) {
+    const v = useRef(new Animated.Value(look.durationMs > 0 ? 0 : 1)).current;
+    useEffect(() => {
+        if (look.durationMs <= 0) {
+            v.setValue(1);
+            return;
+        }
+        const a = Animated.timing(v, { toValue: 1, duration: look.durationMs, easing: look.easing, useNativeDriver: true });
+        a.start();
+        return () => a.stop();
+    }, []);
+    return { opacity: v, transform: [{ translateY: v.interpolate({ inputRange: [0, 1], outputRange: [8, 0] }) }] };
+}
+function CaptionCard({ look, role, text, live }) {
+    const t = look.tokens;
+    const c = t.colors;
+    const rise = useRise(look);
+    return (_jsx(Animated.View, { style: rise, children: _jsx(Raised, { t: t, level: "card", radius: t.shape.radius.lg, children: _jsxs(View, { style: {
+                    backgroundColor: surfaceFill(c.surface, t), borderWidth: t.shape.borderWidth, borderColor: c.border,
+                    borderRadius: t.shape.radius.lg, paddingHorizontal: 12, paddingVertical: 8, ...softShadow(t, "card"),
+                }, children: [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, }) {
+    const t = look.tokens;
+    const c = t.colors;
+    const r = t.shape.radius;
+    const bw = t.shape.borderWidth;
+    const pad = t.spacing.cardPadding;
+    const rise = useRise(look);
+    const [draft, setDraft] = useState("");
+    const scroll = useRef(null);
+    useEffect(() => {
+        const id = setTimeout(() => scroll.current?.scrollToEnd?.({ animated: true }), 40);
+        return () => clearTimeout(id);
+    }, [messages.length]);
+    const submit = () => {
+        const text = draft.trim();
+        if (!text)
+            return;
+        setDraft("");
+        send(text);
+    };
+    const markShape = t.shape.launcher === "pill" ? "circle" : t.shape.launcher;
+    const text = (size, weight) => ({
+        ...look.face(t.font.body, weight), fontSize: size,
+        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: [_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) => {
+                                    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: {
+                                        flex: 1, height: 40, paddingHorizontal: 14, backgroundColor: c.surfaceRaised, borderWidth: bw, borderColor: c.border,
+                                        borderRadius: r.xl, color: c.text, ...look.face(t.font.body, t.font.weights.body), fontSize: t.font.scale.body - 1,
+                                    } }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityRole: "button", accessibilityLabel: "Send", style: { width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", backgroundColor: c.accent, opacity: draft.trim() ? 1 : 0.4 }, children: _jsx(Icon, { name: "send", t: t, color: c.onAccent, kit: kit }) })] })] }) }) }) }));
+}
+function bubble(t, user) {
+    const c = t.colors;
+    const r = t.shape.radius;
+    const pad = t.spacing.cardPadding;
+    const shape = {
+        alignSelf: user ? "flex-end" : "flex-start",
+        paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.75), borderRadius: r.lg,
+        ...(user ? { borderBottomRightRadius: r.sm } : { borderBottomLeftRadius: r.sm }),
+    };
+    if (t.bubbles === "outline") {
+        return { box: { ...shape, backgroundColor: "transparent", borderWidth: t.shape.borderWidth, borderColor: user ? c.accent : c.border }, color: c.text };
+    }
+    if (t.bubbles === "minimal") {
+        return user
+            ? { box: { ...shape, backgroundColor: c.accentSoft }, color: c.text }
+            : { box: { alignSelf: "flex-start", paddingHorizontal: 2, paddingVertical: 2, backgroundColor: "transparent" }, color: c.text };
+    }
+    return user
+        ? { box: { ...shape, backgroundColor: c.userBubble }, color: c.userBubbleText }
+        : { box: { ...shape, backgroundColor: c.agentBubble }, color: c.agentBubbleText };
+}
+class WidgetGuard extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { failed: false };
+    }
+    static getDerivedStateFromError() { return { failed: true }; }
+    componentDidCatch(error) { console.error("[graine] the agent's component failed to render", error); }
+    render() { return this.state.failed ? null : this.props.children; }
+}

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

@@ -59,6 +59,8 @@ export interface GraineVoiceApi {
     quality: ConnectionQuality;
     network: "online" | "offline" | "unknown";
     reconnecting: boolean;
+    error: string | null;
+    micDenied: boolean;
 }
 export declare const CAPTION_HISTORY = 12;
 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

@@ -20,6 +20,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const [connected, setConnected] = useState(false);
     const [connecting, setConnecting] = useState(false);
     const [muted, setMutedState] = useState(false);
+    const [fault, setFault] = useState(null);
+    const [micDenied, setMicDenied] = useState(false);
     const [ready, setReady] = useState(false);
     const readyRef = useRef(false);
     readyRef.current = ready;
@@ -214,6 +216,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         }
         if (!(await ensureMic())) {
             setConnecting(false);
+            setMicDenied(true);
             onMicDenied?.("NotAllowedError");
             client.emit("mic_denied", { reason: "NotAllowedError" });
             return;
@@ -260,6 +263,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     message: msg.message,
                 });
                 if (msg.reason === "not_configured" && msg.message) {
+                    setFault(String(msg.message));
                     onError?.(String(msg.message));
                 }
                 return;
@@ -346,6 +350,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 return;
             case "graine:mic-denied":
                 client.emit("mic_denied", { reason: String(msg.reason || "NotAllowedError") });
+                setMicDenied(true);
                 onMicDenied?.(String(msg.reason || "denied"));
                 return;
             case "graine:widget": {
@@ -387,6 +392,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         clearCaptions: useCallback(() => setCaptions([]), []),
         start: useCallback(() => {
             setConnecting(true);
+            setMicDenied(false);
+            setFault(null);
             setCaptions([]);
             setAwaitingAgent(false);
             client.clearPendingWidget();
@@ -402,6 +409,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         quality,
         network,
         reconnecting,
+        error: fault,
+        micDenied,
         setMuted: useCallback((m) => {
             setMutedState(m);
             post({ type: "graine:set-muted", muted: m });
@@ -449,6 +458,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         setConnected(false);
         setConnecting(false);
         setCaptions([]);
+        setMicDenied(false);
+        setFault(null);
         client.clearPendingWidget();
         onCallState?.({ connected: false, connecting: false });
     }, [active]);

package/dist/theme.d.ts

@@ -170,6 +170,11 @@ export declare const LAUNCHER_ICONS: ReadonlyArray<{
     path: string;
     stroke: boolean;
 }>;
+export type SdkIconName = "mic" | "micOff" | "end" | "send" | "chat" | "call" | "chevron" | "close";
+export declare const SDK_ICONS: Readonly<Record<SdkIconName, {
+    body?: string;
+    lines?: string;
+}>>;
 export declare const DESIGN_FONTS: ReadonlyArray<{
     family: string;
     category: "sans" | "serif" | "mono" | "display";

package/dist/theme.js

@@ -78,6 +78,16 @@ export const LAUNCHER_ICONS = [
     { id: "chat-dots-filled", label: "Chat dots (filled)", stroke: false, path: "M12 2.25A9.75 9.75 0 0 0 3.392 16.582L2.328 19.775a1.5 1.5 0 0 0 1.897 1.897l3.192 -1.064A9.75 9.75 0 1 0 12 2.25ZM7.875 13.125a1.125 1.125 0 1 1 1.125 -1.125A1.125 1.125 0 0 1 7.875 13.125Zm4.125 0a1.125 1.125 0 1 1 1.125 -1.125A1.125 1.125 0 0 1 12 13.125Zm4.125 0a1.125 1.125 0 1 1 1.125 -1.125A1.125 1.125 0 0 1 16.125 13.125Z" },
     { id: "graphic-eq", label: "Voice equalizer (filled)", stroke: false, path: "M7 17v-10q0 -0.425 0.288 -0.713T8 6q0.425 0 0.713 0.288T9 7v10q0 0.425 -0.288 0.713T8 18q-0.425 0 -0.713 -0.288T7 17Zm4 4v-18q0 -0.425 0.288 -0.713T12 2q0.425 0 0.713 0.288T13 3v18q0 0.425 -0.288 0.713T12 22q-0.425 0 -0.713 -0.288T11 21ZM3 13v-2q0 -0.425 0.288 -0.713T4 10q0.425 0 0.713 0.288T5 11v2q0 0.425 -0.288 0.713T4 14q-0.425 0 -0.713 -0.288T3 13Zm12 4v-10q0 -0.425 0.288 -0.713T16 6q0.425 0 0.713 0.288T17 7v10q0 0.425 -0.288 0.713T16 18q-0.425 0 -0.713 -0.288T15 17Zm4 -4v-2q0 -0.425 0.288 -0.713T20 10q0.425 0 0.713 0.288T21 11v2q0 0.425 -0.288 0.713T20 14q-0.425 0 -0.713 -0.288T19 13Z" },
 ];
+export const SDK_ICONS = {
+    mic: { body: "M12 2.5a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 7 0V6A3.5 3.5 0 0 0 12 2.5z", lines: "M18.5 11.5a6.5 6.5 0 0 1-13 0M12 18v3.5" },
+    micOff: { body: "M12 2.5a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 7 0V6A3.5 3.5 0 0 0 12 2.5z", lines: "M18.5 11.5a6.5 6.5 0 0 1-13 0M12 18v3.5M4 4l16 16" },
+    end: { body: "M4.2 14.6c4.6-4.1 11-4.1 15.6 0 .6.5.6 1.4.1 2l-1.3 1.4c-.4.5-1.1.6-1.7.3l-2.2-1.2c-.5-.3-.8-.8-.7-1.4l.2-1.3a11 11 0 0 0-4.4 0l.2 1.3c.1.6-.2 1.1-.7 1.4l-2.2 1.2c-.6.3-1.3.2-1.7-.3L4.1 16.6c-.5-.6-.5-1.5.1-2z" },
+    send: { body: "M4 12 20 4l-4 16-4.5-6.5L4 12z", lines: "M11.5 13.5 20 4" },
+    chat: { body: "M20 12a8 8 0 0 1-11.6 7.1L4 20l1-4.2A8 8 0 1 1 20 12z" },
+    call: { lines: "M13.832 16.568a1 1 0 0 0 1.213 -0.303l0.355 -0.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2A18 18 0 0 1 2 4a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v3a2 2 0 0 1 -0.8 1.6l-0.468 0.351a1 1 0 0 0 -0.292 1.233a14 14 0 0 0 6.392 6.384" },
+    chevron: { lines: "M6 15l6-6 6 6" },
+    close: { lines: "M6 6l12 12M18 6 6 18" },
+};
 export const DESIGN_FONTS = [
     { family: "system", category: "sans", scripts: ["latin", "devanagari", "bengali", "tamil", "telugu", "kannada", "malayalam", "gujarati", "gurmukhi", "oriya"] },
     { family: "Inter", category: "sans", scripts: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "greek", "greek-ext", "vietnamese"] },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "type": "module",
   "description": "Graine in-app agent for React Native — an agent that sees the screen your customer is on and can act on it.",
   "license": "MIT",