@graineai/inapp-react-native 0.39.0 → 0.40.0

package/dist/index.d.ts

@@ -35,5 +35,5 @@ export { GraineLauncherButton, type GraineLauncherButtonProps } from "./react-na
 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, DESIGN_CHROMES, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, type DesignConfig, type DesignPreset, type ThemeTokens, type ThemeColors, type ThemeShadow, type ResolvedDesign, type DesignBubbles, type DesignChrome, type LauncherShape, type MotionEasing, type IconStyle, type SdkIconName, } from "./theme.js";
+export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, SDK_ICONS, DESIGN_CHROMES, LOGO_PLATES, LOGO_PLATE_WHITE, normaliseLogoPlate, logoBox, logoPlateLook, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, type DesignConfig, type DesignPreset, type ThemeTokens, type ThemeColors, type ThemeShadow, type ResolvedDesign, type DesignBubbles, type DesignChrome, type LogoPlate, type LauncherShape, type MotionEasing, type IconStyle, type SdkIconName, } from "./theme.js";
 export { sessionDesign } from "./design.js";

package/dist/index.js

@@ -26,5 +26,5 @@ 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, DESIGN_CHROMES, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
+export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, SDK_ICONS, DESIGN_CHROMES, LOGO_PLATES, LOGO_PLATE_WHITE, normaliseLogoPlate, logoBox, logoPlateLook, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
 export { sessionDesign } from "./design.js";

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

@@ -1,7 +1,9 @@
+import { type LogoPlate } from "../theme.js";
 export interface NativeAppearance {
     accent: string;
     heading: string;
     logoUrl: string | null;
+    logoPlate: LogoPlate;
     radius: number;
 }
 export interface NativeAppearanceFallback {

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

@@ -4,6 +4,7 @@ import { AppState, View } from "react-native";
 import { 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 active = activeProp && surface !== "chat";
@@ -22,6 +23,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 +295,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 +305,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 +394,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 +425,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 +444,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 +496,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]);

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;

package/dist/theme.js

@@ -7,6 +7,20 @@ export const DESIGN_BUBBLES = ["filled", "outline", "minimal"];
 export const LAUNCHER_SHAPES = ["circle", "squircle", "rounded-square", "square", "pill"];
 export const ICON_STYLES = ["outline", "filled", "duotone", "sharp"];
 export const DESIGN_CHROMES = ["none", "window"];
+export const LOGO_PLATES = ["accent", "white"];
+export const LOGO_PLATE_WHITE = "#FFFFFF";
+export function normaliseLogoPlate(value) {
+    return value === "white" ? "white" : "accent";
+}
+export function logoBox(shape, size) {
+    const k = shape === "rounded-square" || shape === "square" ? 0.8 : 0.7;
+    return Math.max(1, Math.floor(size * k));
+}
+export function logoPlateLook(plate, colors, borderWidth = 1) {
+    return plate === "white"
+        ? { fill: LOGO_PLATE_WHITE, outline: { width: Math.max(1, borderWidth), color: colors.border } }
+        : { fill: colors.accent, outline: null };
+}
 const HEX6 = /^#?([0-9a-f]{6})$/i;
 const HEX3 = /^#?([0-9a-f]{3})$/i;
 export function normaliseHex(value) {
@@ -79,6 +93,8 @@ export const LAUNCHER_ICONS = [
     { id: "buddy", label: "Buddy", stroke: true, path: "M12 3c4.97 0 8 3.03 8 8.5S16.97 21 12 21 4 17.97 4 11.5 7.03 3 12 3z M9.25 10.25v1.75 M14.75 10.25v1.75 M9.5 15.1c1.4 1.15 3.6 1.15 5 0" },
     { 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" },
+    { id: "grain", label: "Grain", stroke: true, path: "M7.34 5.5H16.66M4.69 8.75H19.31M4 12H20M4.69 15.25H19.31M7.34 18.5H16.66" },
+    { id: "grain-voice", label: "Grain voice", stroke: true, path: "M8.5 5.5H15.5M5 8.75H19M7 12H17M3.5 15.25H20.5M8 18.5H16" },
 ];
 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" },
@@ -1878,10 +1894,735 @@ const P_HIGH_CONTRAST = {
         }
     }
 };
-export const DESIGN_PRESETS = [GRAINE_CLASSIC, P_CHAT_NEUTRAL, P_MATERIAL_3, P_IOS_NATIVE, P_MINIMAL_MONO, P_FLUENT_2, P_CARBON, P_LIQUID_GLASS, P_SOFT_PLAYFUL, P_DESKTOP_BUDDY, P_NEO_BRUTALISM, P_EDITORIAL, P_LUXURY, P_RETRO_TERMINAL, P_WARM_EARTHY, P_HIGH_CONTRAST];
+const P_SIGNATURE = {
+    id: "signature",
+    name: "Signature",
+    tagline: "Graine's own look — quiet greys, a slate-and-indigo voice, the grain.",
+    family: "graine",
+    inspiredBy: [
+        "Graine's design system, after Sarvam's (sarvam.ai/brand) — neutral surfaces #FCFCFC / #E6E6E6, ink #1F1F1F, slate #2A2C33, indigo #4250D5, a 0 0 40px ambient shadow, ease cubic-bezier(0.2,0,0,1) 350ms; the grain motif is Graine's own",
+    ],
+    font: {
+        body: "DM Sans",
+        heading: "Newsreader",
+        scale: { caption: 12, body: 15, title: 19, display: 30 },
+        weights: { body: 400, strong: 500, title: 400 },
+        letterSpacing: { body: 0, title: -0.015 },
+        lineHeight: { body: 1.5, title: 1.2 },
+    },
+    shape: { radius: { sm: 10, md: 16, lg: 24, xl: 32 }, borderWidth: 1, launcher: "circle" },
+    spacing: { unit: 4, cardPadding: 16, gap: 10 },
+    elevation: {
+        card: { y: 0, blur: 40, spread: 0, opacity: 0.06, color: "#000000" },
+        floating: { y: 12, blur: 40, spread: -8, opacity: 0.18, color: "#000000" },
+        hardOffset: null,
+    },
+    motion: { durationMs: 350, easing: "emphasized", bounce: 0 },
+    icons: { style: "outline", stroke: 1.75, launcher: "grain" },
+    glass: null,
+    bubbles: "filled",
+    colors: {
+        light: {
+            background: "#FCFCFC", surface: "#FFFFFF", surfaceRaised: "#F5F5F5", text: "#1F1F1F", textMuted: "#666666",
+            border: "#E6E6E6", accent: "#4250D5", onAccent: "#FFFFFF", success: "#496D21", warning: "#8F6418", danger: "#C43D2B",
+            userBubble: "#2A2C33", userBubbleText: "#FFFFFF", agentBubble: "#F0F0F0", agentBubbleText: "#1F1F1F", scrim: "#000000",
+        },
+        dark: {
+            background: "#141414", surface: "#1C1C1C", surfaceRaised: "#262626", text: "#F5F5F5", textMuted: "#A3A3A3",
+            border: "#333333", accent: "#81A0E9", onAccent: "#11115B", success: "#90C85B", warning: "#FFB94A", danger: "#EBA18F",
+            userBubble: "#E8EFFC", userBubbleText: "#11115B", agentBubble: "#262626", agentBubbleText: "#F5F5F5", scrim: "#000000",
+        },
+    },
+};
+const P_SWISS_GRID = {
+    "id": "swiss-grid",
+    "name": "Swiss Grid",
+    "tagline": "Black type on white, square corners and hairline rules, with Swiss red for the customer's own messages.",
+    "family": "modern",
+    "inspiredBy": [
+        "International Typographic Style (Swiss Style, 1950s)",
+        "Josef Müller-Brockmann, Grid Systems in Graphic Design (1981)",
+        "Swiss red, Pantone 485 C (#DA291C)"
+    ],
+    "font": {
+        "body": "Inter",
+        "heading": "Inter",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 21,
+            "display": 34
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 700
+        },
+        "letterSpacing": {
+            "body": -0.006,
+            "title": -0.022
+        },
+        "lineHeight": {
+            "body": 1.42,
+            "title": 1.12
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 0,
+            "md": 0,
+            "lg": 0,
+            "xl": 0
+        },
+        "borderWidth": 1,
+        "launcher": "square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 8
+    },
+    "elevation": {
+        "card": null,
+        "floating": null,
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 160,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "sharp",
+        "stroke": 1.75,
+        "launcher": "audio-lines"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#F3F3F3",
+            "text": "#111111",
+            "textMuted": "#545454",
+            "border": "#1A1A1A",
+            "accent": "#111111",
+            "onAccent": "#FFFFFF",
+            "success": "#1C7C3A",
+            "warning": "#9E5200",
+            "danger": "#DA291C",
+            "userBubble": "#DA291C",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#F3F3F3",
+            "agentBubbleText": "#111111",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#0A0A0A",
+            "surface": "#111111",
+            "surfaceRaised": "#1C1C1C",
+            "text": "#F5F5F5",
+            "textMuted": "#A8A8A8",
+            "border": "#D4D4D4",
+            "accent": "#F5F5F5",
+            "onAccent": "#0A0A0A",
+            "success": "#3DBA68",
+            "warning": "#F0A23B",
+            "danger": "#DA291C",
+            "userBubble": "#DA291C",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#1C1C1C",
+            "agentBubbleText": "#F5F5F5",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_BAUHAUS = {
+    "id": "bauhaus",
+    "name": "Bauhaus",
+    "tagline": "Circles and squares in the three primaries, set in geometric type on warm paper.",
+    "family": "expressive",
+    "inspiredBy": [
+        "Bauhaus school, Weimar and Dessau (1919–1933)",
+        "Kandinsky's 1923 colour–form questionnaire (yellow triangle, red square, blue circle)",
+        "Herbert Bayer's universal alphabet (1925), a geometric sans"
+    ],
+    "font": {
+        "body": "DM Sans",
+        "heading": "Poppins",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 22,
+            "display": 32
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 700
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": -0.01
+        },
+        "lineHeight": {
+            "body": 1.45,
+            "title": 1.15
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 0,
+            "md": 24,
+            "lg": 0,
+            "xl": 30
+        },
+        "borderWidth": 0,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 10
+    },
+    "elevation": {
+        "card": {
+            "y": 2,
+            "blur": 6,
+            "spread": 0,
+            "opacity": 0.1,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 10,
+            "blur": 28,
+            "spread": -6,
+            "opacity": 0.2,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 200,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "filled",
+        "stroke": 2,
+        "launcher": "graphic-eq"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#F4EFE6",
+            "surface": "#FBF8F2",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#141414",
+            "textMuted": "#55514A",
+            "border": "#D8D0C1",
+            "accent": "#21409A",
+            "onAccent": "#FFFFFF",
+            "success": "#2B7A3D",
+            "warning": "#985A00",
+            "danger": "#C62A1F",
+            "userBubble": "#F2C230",
+            "userBubbleText": "#141414",
+            "agentBubble": "#ECE5D8",
+            "agentBubbleText": "#141414",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#121212",
+            "surface": "#1B1B1B",
+            "surfaceRaised": "#252525",
+            "text": "#F4EFE6",
+            "textMuted": "#B2ABA0",
+            "border": "#3A3733",
+            "accent": "#F2C230",
+            "onAccent": "#141414",
+            "success": "#5DBE6D",
+            "warning": "#E8A33A",
+            "danger": "#D0332A",
+            "userBubble": "#2F4FB8",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#252525",
+            "agentBubbleText": "#F4EFE6",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_PRECISION = {
+    "id": "precision",
+    "name": "Precision",
+    "tagline": "Dark-first and dense: near-black neutrals, hairline borders and a single indigo accent.",
+    "family": "modern",
+    "inspiredBy": [
+        "Linear, How we redesigned the Linear UI (2024)",
+        "Inter and Inter Display by Rasmus Andersson"
+    ],
+    "font": {
+        "body": "Inter",
+        "heading": "Inter",
+        "scale": {
+            "caption": 12,
+            "body": 14,
+            "title": 17,
+            "display": 24
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": -0.005,
+            "title": -0.014
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.3
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 4,
+            "md": 6,
+            "lg": 8,
+            "xl": 12
+        },
+        "borderWidth": 1,
+        "launcher": "rounded-square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 12,
+        "gap": 8
+    },
+    "elevation": {
+        "card": {
+            "y": 1,
+            "blur": 2,
+            "spread": 0,
+            "opacity": 0.12,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 12,
+            "blur": 32,
+            "spread": -8,
+            "opacity": 0.28,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 140,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.5,
+        "launcher": "sparkles"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#F7F8F8",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#0F1011",
+            "textMuted": "#5C616A",
+            "border": "#E2E4E7",
+            "accent": "#5E6AD2",
+            "onAccent": "#FFFFFF",
+            "success": "#2E8A57",
+            "warning": "#B0560B",
+            "danger": "#CF3B41",
+            "userBubble": "#5E6AD2",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#EFF0F2",
+            "agentBubbleText": "#0F1011",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#08090A",
+            "surface": "#111214",
+            "surfaceRaised": "#191A1D",
+            "text": "#F7F8F8",
+            "textMuted": "#8E939C",
+            "border": "#26282C",
+            "accent": "#5E6AD2",
+            "onAccent": "#FFFFFF",
+            "success": "#4CB782",
+            "warning": "#F2994A",
+            "danger": "#D5434A",
+            "userBubble": "#5E6AD2",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#1A1B1E",
+            "agentBubbleText": "#F7F8F8",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_JAPANDI_CALM = {
+    "id": "japandi-calm",
+    "name": "Japandi Calm",
+    "tagline": "Warm stone, muted sage and soft serif titles, with slow, quiet motion that stays out of the way.",
+    "family": "modern",
+    "inspiredBy": [
+        "Leonard Koren, Wabi-Sabi for Artists, Designers, Poets & Philosophers (1994)",
+        "Mark Weiser & John Seely Brown, Designing Calm Technology (Xerox PARC, 1995)",
+        "Amber Case, Principles of Calm Technology"
+    ],
+    "font": {
+        "body": "Noto Sans",
+        "heading": "Noto Serif Devanagari",
+        "scale": {
+            "caption": 12,
+            "body": 16,
+            "title": 20,
+            "display": 28
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 400
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.6,
+            "title": 1.35
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 6,
+            "md": 10,
+            "lg": 14,
+            "xl": 22
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 18,
+        "gap": 14
+    },
+    "elevation": {
+        "card": null,
+        "floating": {
+            "y": 8,
+            "blur": 28,
+            "spread": -8,
+            "opacity": 0.12,
+            "color": "#3B342B"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 360,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.25,
+        "launcher": "waveform"
+    },
+    "glass": null,
+    "bubbles": "minimal",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#F5F1EA",
+            "surface": "#FBF8F3",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#2B2824",
+            "textMuted": "#625C54",
+            "border": "#E2DBD0",
+            "accent": "#56654D",
+            "onAccent": "#FBF8F3",
+            "success": "#4A7646",
+            "warning": "#94661C",
+            "danger": "#A5422D",
+            "userBubble": "#E2E7DA",
+            "userBubbleText": "#2B2824",
+            "agentBubble": "#EEE9E0",
+            "agentBubbleText": "#2B2824",
+            "scrim": "#1A1814"
+        },
+        "dark": {
+            "background": "#1A1917",
+            "surface": "#22201D",
+            "surfaceRaised": "#2B2925",
+            "text": "#EEE8DF",
+            "textMuted": "#ADA59A",
+            "border": "#3A3631",
+            "accent": "#A6B596",
+            "onAccent": "#1A1917",
+            "success": "#8DB487",
+            "warning": "#D9A55B",
+            "danger": "#B9503A",
+            "userBubble": "#3A4234",
+            "userBubbleText": "#EEE8DF",
+            "agentBubble": "#2B2925",
+            "agentBubbleText": "#EEE8DF",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_GAMIFIED = {
+    "id": "gamified",
+    "name": "Gamified",
+    "tagline": "Chunky and bright, with thick outlines, pressable bottom edges and bold rounded type.",
+    "family": "expressive",
+    "inspiredBy": [
+        "Duolingo brand guidelines, colour (Feather Green #58CC02, Eel, Swan, Polar)",
+        "Yu-kai Chou, Octalysis gamification framework",
+        "Nunito, a rounded sans by Vernon Adams"
+    ],
+    "font": {
+        "body": "Nunito",
+        "heading": "Nunito",
+        "scale": {
+            "caption": 13,
+            "body": 16,
+            "title": 20,
+            "display": 30
+        },
+        "weights": {
+            "body": 500,
+            "strong": 700,
+            "title": 800
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.45,
+            "title": 1.2
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 8,
+            "md": 14,
+            "lg": 16,
+            "xl": 20
+        },
+        "borderWidth": 2,
+        "launcher": "rounded-square"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 10
+    },
+    "elevation": {
+        "card": {
+            "y": 4,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0.14,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 5,
+            "blur": 0,
+            "spread": 0,
+            "opacity": 0.18,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 280,
+        "easing": "spring",
+        "bounce": 0.4
+    },
+    "icons": {
+        "style": "filled",
+        "stroke": 2.5,
+        "launcher": "star"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#FFFFFF",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#F7F7F7",
+            "text": "#3C3C3C",
+            "textMuted": "#646464",
+            "border": "#E5E5E5",
+            "accent": "#3A8400",
+            "onAccent": "#FFFFFF",
+            "success": "#3A8400",
+            "warning": "#A86F00",
+            "danger": "#D83434",
+            "userBubble": "#58CC02",
+            "userBubbleText": "#102B00",
+            "agentBubble": "#F1F1F1",
+            "agentBubbleText": "#3C3C3C",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#131F24",
+            "surface": "#1A2A31",
+            "surfaceRaised": "#22343C",
+            "text": "#F1F7FB",
+            "textMuted": "#A5B5BD",
+            "border": "#37464F",
+            "accent": "#58CC02",
+            "onAccent": "#102B00",
+            "success": "#79D634",
+            "warning": "#FFC800",
+            "danger": "#D83434",
+            "userBubble": "#58CC02",
+            "userBubbleText": "#102B00",
+            "agentBubble": "#22343C",
+            "agentBubbleText": "#F1F7FB",
+            "scrim": "#000000"
+        }
+    }
+};
+const P_FINTECH_CLEAR = {
+    "id": "fintech-clear",
+    "name": "Fintech Clear",
+    "tagline": "Navy ink, a steady teal accent and soft layered shadows, for screens about money.",
+    "family": "enterprise",
+    "inspiredBy": [
+        "Stripe, Designing accessible color systems (2019)",
+        "Stripe Elements Appearance API: themes and variables",
+        "IBM Plex Sans Devanagari (bilingual Latin + Devanagari)"
+    ],
+    "font": {
+        "body": "IBM Plex Sans Devanagari",
+        "heading": "IBM Plex Sans Devanagari",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 18,
+            "display": 26
+        },
+        "weights": {
+            "body": 400,
+            "strong": 500,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": 0
+        },
+        "lineHeight": {
+            "body": 1.55,
+            "title": 1.3
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 4,
+            "md": 6,
+            "lg": 10,
+            "xl": 14
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 12
+    },
+    "elevation": {
+        "card": {
+            "y": 2,
+            "blur": 5,
+            "spread": -1,
+            "opacity": 0.25,
+            "color": "#32325D"
+        },
+        "floating": {
+            "y": 13,
+            "blur": 27,
+            "spread": -5,
+            "opacity": 0.25,
+            "color": "#32325D"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 200,
+        "easing": "standard",
+        "bounce": 0
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 1.75,
+        "launcher": "headset"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "none",
+    "colors": {
+        "light": {
+            "background": "#F6F9FC",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#FFFFFF",
+            "text": "#0A2540",
+            "textMuted": "#425466",
+            "border": "#E3E8EE",
+            "accent": "#0B7A75",
+            "onAccent": "#FFFFFF",
+            "success": "#16794A",
+            "warning": "#A65400",
+            "danger": "#DF1B41",
+            "userBubble": "#0A2540",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#EEF2F6",
+            "agentBubbleText": "#0A2540",
+            "scrim": "#0A2540"
+        },
+        "dark": {
+            "background": "#081624",
+            "surface": "#0E2032",
+            "surfaceRaised": "#15293D",
+            "text": "#F3F6FA",
+            "textMuted": "#A3B3C4",
+            "border": "#22384F",
+            "accent": "#3CC2B8",
+            "onAccent": "#04211F",
+            "success": "#3DCB86",
+            "warning": "#F5A623",
+            "danger": "#D7304A",
+            "userBubble": "#24507A",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#15293D",
+            "agentBubbleText": "#F3F6FA",
+            "scrim": "#000000"
+        }
+    }
+};
+export const DESIGN_PRESETS = [GRAINE_CLASSIC, P_SIGNATURE, P_CHAT_NEUTRAL, P_MATERIAL_3, P_IOS_NATIVE, P_MINIMAL_MONO, P_FLUENT_2, P_CARBON, P_FINTECH_CLEAR, P_LIQUID_GLASS, P_SOFT_PLAYFUL, P_DESKTOP_BUDDY, P_SWISS_GRID, P_PRECISION, P_JAPANDI_CALM, P_NEO_BRUTALISM, P_EDITORIAL, P_LUXURY, P_RETRO_TERMINAL, P_WARM_EARTHY, P_BAUHAUS, P_GAMIFIED, P_HIGH_CONTRAST];
 export const DEFAULT_DESIGN_PRESET = "graine-classic";
+const PRESET_ALIASES = { gateway: "signature" };
 export function designPreset(id) {
-    const want = String(id ?? "").trim().toLowerCase();
+    const raw = String(id ?? "").trim().toLowerCase();
+    const want = PRESET_ALIASES[raw] ?? raw;
     return DESIGN_PRESETS.find((p) => p.id === want) ?? DESIGN_PRESETS[0];
 }
 function pick(v, allowed) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.39.0",
+  "version": "0.40.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",