@graineai/inapp-react-native 0.36.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/client.d.ts

@@ -1,5 +1,6 @@
 import { type ConnectionQuality, type QualitySample, type ActionHandler, type AppActionResult, type AppEvent, type ScreenContext, type ScreenField, type AgentSurface } from "./protocol.js";
 import { type FrictionConfig } from "./friction.js";
+import type { ResolvedDesign } from "./theme.js";
 export declare const SUBPROTOCOL = "graine.embed.v1";
 export interface GraineInAppOptions {
     baseUrl: string;
@@ -17,6 +18,7 @@ export interface SessionConfig {
     webcallAgentId?: string;
     wsHost?: string;
     appearance?: Record<string, any>;
+    design?: ResolvedDesign;
     variables?: Record<string, string>;
     components?: any[];
     appActions?: Array<{

package/dist/design.d.ts

@@ -0,0 +1,5 @@
+import { type ResolvedDesign } from "./theme.js";
+export declare function sessionDesign(session: {
+    design?: unknown;
+    appearance?: unknown;
+} | null | undefined): ResolvedDesign;

package/dist/design.js

@@ -0,0 +1,50 @@
+import { designFromAppearance, normaliseHex, resolveDesign } from "./theme.js";
+const isObject = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+const NULLABLE = {
+    "elevation.card": { y: 0, blur: 0, spread: 0, opacity: 0, color: "#000000" },
+    "elevation.floating": { y: 0, blur: 0, spread: 0, opacity: 0, color: "#000000" },
+    "elevation.hardOffset": { x: 0, y: 0 },
+    "icons.launcher": { id: "", path: "", stroke: true },
+    glass: { blur: 0, surfaceOpacity: 1 },
+};
+function fill(fallback, given, path) {
+    const template = NULLABLE[path];
+    if (template) {
+        if (given === null)
+            return null;
+        if (!isObject(given))
+            return fallback;
+        return fillObject(isObject(fallback) ? fallback : template, given, path);
+    }
+    if (isObject(fallback))
+        return isObject(given) ? fillObject(fallback, given, path) : fallback;
+    if (typeof fallback === "number")
+        return typeof given === "number" && Number.isFinite(given) ? given : fallback;
+    if (typeof fallback === "boolean")
+        return typeof given === "boolean" ? given : fallback;
+    if (typeof fallback === "string") {
+        if (typeof given !== "string" || !given)
+            return fallback;
+        if (/^#[0-9a-f]{6}$/i.test(fallback))
+            return normaliseHex(given) ?? fallback;
+        return given;
+    }
+    return fallback;
+}
+function fillObject(fallback, given, path) {
+    const out = {};
+    for (const key of Object.keys(fallback))
+        out[key] = fill(fallback[key], given[key], path ? `${path}.${key}` : key);
+    return out;
+}
+export function sessionDesign(session) {
+    const raw = session?.design;
+    if (!isObject(raw) || !isObject(raw.config))
+        return resolveDesign(designFromAppearance(session?.appearance));
+    const local = resolveDesign(raw.config);
+    return {
+        config: local.config,
+        light: fill(local.light, raw.light, ""),
+        dark: fill(local.dark, raw.dark, ""),
+    };
+}

package/dist/index.d.ts

@@ -23,12 +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, 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, 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

@@ -14,12 +14,17 @@ export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, } from "
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, } 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, } 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, } from "./react-native/index.js";
 export { requestMicrophonePermission } from "./react-native/permissions.js";
 export { GraineFab, GraineTouchCapture, TAP_MAX_MOVE_PX, TAP_MAX_MS, } from "./react-native/fab.js";
 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, SDK_ICONS, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
+export { sessionDesign } from "./design.js";

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

@@ -0,0 +1,13 @@
+import { type ResolvedDesign, type ThemeShadow, type ThemeTokens } from "../theme.js";
+export declare function sameValue(a: unknown, b: unknown): boolean;
+export declare function isClassicLook(design: ResolvedDesign): boolean;
+export declare function fontFamilyFor(family: string | null | undefined, fonts: Record<string, string> | null | undefined): string | undefined;
+export declare function alpha(hex: string, a: number): string;
+export declare function shadowStyle(s: ThemeShadow | null | undefined): Record<string, unknown>;
+export declare function launcherRadius(shape: string, height: number, tokens: ThemeTokens): number;
+export declare function glyphPixels(size: number, pixelRatio: number): number;
+export declare function onAccentFor(accent: string, tokens: ThemeTokens): string;
+export declare function softFor(accent: string, tokens: ThemeTokens): string;
+export declare function surfaceFill(color: string, tokens: ThemeTokens): string;
+export declare function letterSpacing(size: number, em: number): number | undefined;
+export declare function lineHeight(size: number, multiplier: number): number;

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

@@ -0,0 +1,85 @@
+import { DEFAULT_DESIGN_PRESET, mixHex, normaliseHex, readableOn, resolveDesign, } from "../theme.js";
+export function sameValue(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || typeof a !== "object" || typeof b !== "object")
+        return false;
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    const ka = Object.keys(a), kb = Object.keys(b);
+    if (ka.length !== kb.length)
+        return false;
+    return ka.every((k) => sameValue(a[k], b[k]));
+}
+export function isClassicLook(design) {
+    const c = design.config;
+    if (c.launcherIcon !== undefined)
+        return false;
+    const legacy = { preset: DEFAULT_DESIGN_PRESET };
+    if (c.accent !== undefined)
+        legacy.accent = c.accent;
+    if (c.scheme !== undefined)
+        legacy.scheme = c.scheme;
+    if (c.roundness !== undefined)
+        legacy.roundness = c.roundness;
+    const classic = resolveDesign(legacy);
+    return sameValue(design.light, classic.light) && sameValue(design.dark, classic.dark);
+}
+export function fontFamilyFor(family, fonts) {
+    const want = String(family ?? "").trim();
+    if (!want || want.toLowerCase() === "system" || !fonts)
+        return undefined;
+    const hit = Object.prototype.hasOwnProperty.call(fonts, want)
+        ? fonts[want]
+        : Object.entries(fonts).find(([k]) => k.toLowerCase() === want.toLowerCase())?.[1];
+    return typeof hit === "string" && hit.trim() ? hit : undefined;
+}
+export function alpha(hex, a) {
+    const n = parseInt((normaliseHex(hex) ?? "#000000").slice(1), 16);
+    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${Math.round(a * 1000) / 1000})`;
+}
+export function shadowStyle(s) {
+    if (!s)
+        return {};
+    return {
+        shadowColor: s.color,
+        shadowOpacity: s.opacity,
+        shadowRadius: Math.round((s.blur / 2) * 10) / 10,
+        shadowOffset: { width: 0, height: s.y },
+        elevation: Math.max(1, Math.round((s.y + s.blur / 2) / 2)),
+    };
+}
+export function launcherRadius(shape, height, tokens) {
+    if (shape === "squircle")
+        return Math.round(height * 0.3);
+    if (shape === "rounded-square")
+        return tokens.shape.radius.lg;
+    if (shape === "square")
+        return tokens.shape.radius.sm;
+    return height / 2;
+}
+export function glyphPixels(size, pixelRatio) {
+    return Math.round(size * 0.46 * (pixelRatio > 0 ? pixelRatio : 1));
+}
+export function onAccentFor(accent, tokens) {
+    const a = normaliseHex(accent);
+    if (!a || a === normaliseHex(tokens.colors.accent))
+        return tokens.colors.onAccent;
+    return readableOn(a, [tokens.colors.onAccent, "#FFFFFF", "#101318"]);
+}
+export function softFor(accent, tokens) {
+    const a = normaliseHex(accent);
+    if (!a || a === normaliseHex(tokens.colors.accent))
+        return tokens.colors.accentSoft;
+    return mixHex(tokens.colors.surface, a, tokens.scheme === "light" ? 0.12 : 0.22);
+}
+export function surfaceFill(color, tokens) {
+    return tokens.glass ? alpha(color, tokens.glass.surfaceOpacity) : color;
+}
+export function letterSpacing(size, em) {
+    const v = Math.round(size * em * 100) / 100;
+    return v ? v : undefined;
+}
+export function lineHeight(size, multiplier) {
+    return Math.round(size * multiplier * 10) / 10;
+}

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

@@ -1,10 +1,13 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useRef, useState } from "react";
-import { Image, Pressable, Text, View } from "react-native";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Animated, Image, PixelRatio, Platform, Pressable, Text, View } from "react-native";
 import { Ctx, useGraineAgent, useGraineClient } from "./index.js";
 import { GraineVoiceLauncher } from "./voice-launcher.js";
 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 { UNNAMED_TAP } from "../protocol.js";
 function AboveNativeScreens({ overlay: Overlay, children, }) {
     if (!Overlay)
@@ -54,8 +57,9 @@ export function GraineTouchCapture({ children, enabled = true, style }) {
     return (_jsx(View, { style: [{ flex: 1 }, style], onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, children: children }));
 }
 export function GraineFab({ webView, position = "bottom-right", size = 56, accent: accentProp, label, overlay, prewarm = true, onOpen, onClose }) {
-    const { launcherVisible, launcherInset, appearance, error } = useGraineAgent();
+    const { launcherVisible, launcherInset, appearance, error, client } = useGraineAgent();
     const [open, setOpen] = useState(false);
+    const look = useDesign();
     const dashboard = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "Assistant", radius: 18 });
     const accent = accentProp ?? dashboard.accent;
     const name = dashboard.heading;
@@ -64,6 +68,9 @@ export function GraineFab({ webView, position = "bottom-right", size = 56, accen
         if (error || !launcherVisible)
             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(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,
@@ -74,5 +81,56 @@ export function GraineFab({ webView, position = "bottom-right", size = 56, accen
     };
     if (!prewarm && !open)
         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: dashboardAccent, name: name }) : button(api) })) }));
+    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([]);
+    const fail = (uri) => setFailed((cur) => (cur.includes(uri) ? cur : [...cur, uri]));
+    const shown = useRef(new Animated.Value(look.durationMs > 0 ? 0 : 1)).current;
+    useEffect(() => {
+        if (look.durationMs <= 0) {
+            shown.setValue(1);
+            return;
+        }
+        const a = Animated.timing(shown, { toValue: 1, duration: look.durationMs, easing: look.easing, useNativeDriver: true });
+        a.start();
+        return () => a.stop();
+    }, []);
+    const onAccent = onAccentFor(accent, t);
+    const pill = t.shape.launcher === "pill";
+    const radius = launcherRadius(t.shape.launcher, size, t);
+    const g = Math.round(size * 0.46 * 10) / 10;
+    const glyphUri = t.icons.launcher
+        ? glyphUrl(origin, t.icons.launcher.id, onAccent, glyphPixels(size, PixelRatio.get()), t.icons.stroke)
+        : null;
+    const glyph = glyphUri && !failed.includes(glyphUri) ? glyphUri : null;
+    const logo = logoUrl && !failed.includes(logoUrl) ? logoUrl : null;
+    const hard = t.elevation.hardOffset;
+    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: {
+            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" }));
+    return (_jsxs(Animated.View, { pointerEvents: "box-none", style: [place, { opacity: shown, transform: [{ scale: shown.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }] }], children: [hard ? (_jsx(View, { pointerEvents: "none", style: { ...corners, position: "absolute", top: hard.y, left: hard.x, right: -hard.x, bottom: -hard.y, backgroundColor: t.colors.text } })) : null, _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: onPress, style: ({ pressed }) => ({
+                    ...corners,
+                    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,
+                    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),
+                            fontFamily: look.font(t.font.body),
+                        }, children: name })) : null] })] }));
 }

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

@@ -17,6 +17,9 @@ export type { AgentSurface, SurfacePolicy } from "../protocol.js";
 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 {
     client: GraineInAppClient;
@@ -36,6 +39,10 @@ interface GraineContextValue {
     launcherInset: LauncherInset;
     currentScreen: string | null;
     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;
@@ -138,8 +145,15 @@ export interface GraineProviderProps extends Partial<GraineInAppOptions> {
     includeScreens?: string[];
     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, 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;