@graineai/inapp-react-native 0.33.2 → 0.33.4

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export type { ActionHandler, AppActionRequest, AppActionResult, AppEvent, ScreenContext, ScreenField, WidgetSurface, } from "./protocol.js";
 export { widgetSurface } from "./protocol.js";
+export { WIDGET_PRESETS, WIDGET_IMAGE_SIZES, WIDGET_DENSITIES, WIDGET_BUTTONS, WIDGET_SURFACE_CHOICES, DEFAULT_WIDGET_PRESET, WIDGET_PLATFORMS, PLATFORM_GRAMMAR, normaliseWidgetStyle, resolveWidgetLook, resolvePlatform, } from "./protocol.js";
+export type { WidgetStyle, WidgetLook, WidgetPreset, WidgetImageSize, WidgetDensity, WidgetButton, WidgetPlatform, PlatformGrammar } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
 export type { GraineWidgetProps, GraineWidgetTheme } from "./react-native/widget.js";
 export { GraineInAppClient, type GraineInAppOptions, type SessionConfig, type ActionDiagnosis, } from "./client.js";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { widgetSurface } from "./protocol.js";
+export { WIDGET_PRESETS, WIDGET_IMAGE_SIZES, WIDGET_DENSITIES, WIDGET_BUTTONS, WIDGET_SURFACE_CHOICES, DEFAULT_WIDGET_PRESET, WIDGET_PLATFORMS, PLATFORM_GRAMMAR, normaliseWidgetStyle, resolveWidgetLook, resolvePlatform, } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
 export { GraineInAppClient, } from "./client.js";
 export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, } from "./friction.js";

package/dist/protocol.d.ts

@@ -64,3 +64,57 @@ export declare const UNNAMED_TAP = "tap:screen";
 export declare function resolveWidgetImages(data: Record<string, unknown>, baseUrl: string): Record<string, unknown>;
 export type WidgetSurface = "screen" | "sheet" | "card";
 export declare function widgetSurface(kind: string | null | undefined): WidgetSurface;
+export type WidgetPreset = "gallery" | "cards" | "list" | "spotlight" | "compact";
+export type WidgetImageSize = "small" | "medium" | "large";
+export type WidgetDensity = "comfortable" | "compact";
+export type WidgetButton = "filled" | "outline" | "row";
+export type WidgetPlatform = "auto" | "ios" | "material" | "oneui";
+export interface WidgetStyle {
+    preset?: WidgetPreset;
+    imageSize?: WidgetImageSize;
+    density?: WidgetDensity;
+    button?: WidgetButton;
+    facts?: boolean;
+    columns?: 1 | 2;
+    surface?: "auto" | WidgetSurface;
+    radius?: number;
+    accent?: string;
+    platform?: WidgetPlatform;
+}
+export declare const WIDGET_PRESETS: ReadonlyArray<WidgetPreset>;
+export declare const WIDGET_IMAGE_SIZES: ReadonlyArray<WidgetImageSize>;
+export declare const WIDGET_DENSITIES: ReadonlyArray<WidgetDensity>;
+export declare const WIDGET_BUTTONS: ReadonlyArray<WidgetButton>;
+export declare const WIDGET_SURFACE_CHOICES: ReadonlyArray<"auto" | WidgetSurface>;
+export declare const WIDGET_PLATFORMS: ReadonlyArray<WidgetPlatform>;
+export declare const DEFAULT_WIDGET_PRESET: WidgetPreset;
+export declare function normaliseWidgetStyle(raw: unknown): WidgetStyle;
+export interface WidgetLook {
+    preset: WidgetPreset;
+    imageSize: WidgetImageSize;
+    density: WidgetDensity;
+    button: WidgetButton;
+    facts: boolean;
+    columns: 1 | 2;
+    surface: WidgetSurface;
+    radius?: number;
+    accent?: string;
+    platform: WidgetPlatform;
+}
+export declare function resolveWidgetLook(style: WidgetStyle | null | undefined, kind: string | null | undefined): WidgetLook;
+export interface PlatformGrammar {
+    radius: number;
+    chipRadius: number;
+    buttonRadius: number;
+    pillButtons: boolean;
+    separatorInset: number;
+    grabber: {
+        width: number;
+        height: number;
+    };
+    titleWeight: "600" | "700" | "500";
+    padBoost: number;
+    chipOutlined: boolean;
+}
+export declare const PLATFORM_GRAMMAR: Record<Exclude<WidgetPlatform, "auto">, PlatformGrammar>;
+export declare function resolvePlatform(platform: WidgetPlatform | undefined, os: string | undefined, manufacturer?: string | null): Exclude<WidgetPlatform, "auto">;

package/dist/protocol.js

@@ -41,3 +41,86 @@ const SURFACE = {
 export function widgetSurface(kind) {
     return SURFACE[String(kind ?? "").trim().toLowerCase()] ?? "card";
 }
+export const WIDGET_PRESETS = ["gallery", "cards", "list", "spotlight", "compact"];
+export const WIDGET_IMAGE_SIZES = ["small", "medium", "large"];
+export const WIDGET_DENSITIES = ["comfortable", "compact"];
+export const WIDGET_BUTTONS = ["filled", "outline", "row"];
+export const WIDGET_SURFACE_CHOICES = ["auto", "screen", "sheet", "card"];
+export const WIDGET_PLATFORMS = ["auto", "ios", "material", "oneui"];
+export const DEFAULT_WIDGET_PRESET = "cards";
+export function normaliseWidgetStyle(raw) {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return {};
+    const r = raw;
+    const out = {};
+    const pick = (v, allowed) => {
+        const s = String(v ?? "").trim().toLowerCase();
+        return allowed.includes(s) ? s : undefined;
+    };
+    const preset = pick(r.preset, WIDGET_PRESETS);
+    if (preset)
+        out.preset = preset;
+    const imageSize = pick(r.imageSize, WIDGET_IMAGE_SIZES);
+    if (imageSize)
+        out.imageSize = imageSize;
+    const density = pick(r.density, WIDGET_DENSITIES);
+    if (density)
+        out.density = density;
+    const button = pick(r.button, WIDGET_BUTTONS);
+    if (button)
+        out.button = button;
+    if (typeof r.facts === "boolean")
+        out.facts = r.facts;
+    if (r.columns === 2 || r.columns === "2")
+        out.columns = 2;
+    else if (r.columns === 1 || r.columns === "1")
+        out.columns = 1;
+    const surface = pick(r.surface, WIDGET_SURFACE_CHOICES);
+    if (surface)
+        out.surface = surface;
+    if (typeof r.radius === "number" && Number.isFinite(r.radius))
+        out.radius = Math.max(0, Math.min(24, Math.round(r.radius)));
+    if (typeof r.accent === "string" && /^#[0-9a-f]{6}$/i.test(r.accent.trim()))
+        out.accent = r.accent.trim().toUpperCase();
+    const platform = pick(r.platform, WIDGET_PLATFORMS);
+    if (platform)
+        out.platform = platform;
+    return out;
+}
+const PRESET_DEFAULTS = {
+    gallery: { imageSize: "large", button: "filled" },
+    cards: { imageSize: "medium", button: "filled" },
+    list: { imageSize: "small", button: "row" },
+    spotlight: { imageSize: "large", button: "filled" },
+    compact: { imageSize: "small", button: "outline" },
+};
+export function resolveWidgetLook(style, kind) {
+    const s = normaliseWidgetStyle(style);
+    const preset = s.preset ?? DEFAULT_WIDGET_PRESET;
+    const d = PRESET_DEFAULTS[preset];
+    const surface = s.surface && s.surface !== "auto" ? s.surface : widgetSurface(kind);
+    return {
+        preset,
+        imageSize: s.imageSize ?? d.imageSize,
+        density: s.density ?? "comfortable",
+        button: s.button ?? d.button,
+        facts: s.facts ?? true,
+        columns: (preset === "gallery" || preset === "cards") && s.columns === 2 ? 2 : 1,
+        surface,
+        ...(s.radius !== undefined ? { radius: s.radius } : {}),
+        ...(s.accent ? { accent: s.accent } : {}),
+        platform: s.platform ?? "auto",
+    };
+}
+export const PLATFORM_GRAMMAR = {
+    ios: { radius: 12, chipRadius: 8, buttonRadius: 12, pillButtons: false, separatorInset: 16, grabber: { width: 36, height: 5 }, titleWeight: "600", padBoost: 0, chipOutlined: false },
+    material: { radius: 16, chipRadius: 8, buttonRadius: 20, pillButtons: true, separatorInset: 0, grabber: { width: 32, height: 4 }, titleWeight: "500", padBoost: 0, chipOutlined: true },
+    oneui: { radius: 26, chipRadius: 999, buttonRadius: 999, pillButtons: true, separatorInset: 0, grabber: { width: 40, height: 4 }, titleWeight: "700", padBoost: 2, chipOutlined: false },
+};
+export function resolvePlatform(platform, os, manufacturer) {
+    if (platform && platform !== "auto")
+        return platform;
+    if (os === "android")
+        return /samsung/i.test(String(manufacturer ?? "")) ? "oneui" : "material";
+    return "ios";
+}

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

@@ -2,6 +2,7 @@ import React from "react";
 import { GraineInAppClient, type GraineInAppOptions } from "../client.js";
 import { type AudioAdapter, type VoiceSessionOptions } from "../voice.js";
 import type { ActionHandler, ScreenContext, ScreenField } from "../protocol.js";
+import { type WidgetStyle } from "../protocol.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 export type { GraineFabProps, GraineTouchCaptureProps } from "./fab.js";
 export { widgetSurface } from "../protocol.js";
@@ -73,6 +74,7 @@ export interface GraineWidget {
     kind: string;
     data: Record<string, unknown>;
     fallbackText: string;
+    style?: WidgetStyle;
 }
 export interface Caption {
     role: "agent" | "customer";

package/dist/react-native/index.js

@@ -3,7 +3,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { AppState } from "react-native";
 import { GraineInAppClient } from "../client.js";
 import { VoiceSession } from "../voice.js";
-import { resolveWidgetImages } from "../protocol.js";
+import { resolveWidgetImages, normaliseWidgetStyle } from "../protocol.js";
 import { GraineFab, GraineTouchCapture } from "./fab.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 export { widgetSurface } from "../protocol.js";
@@ -396,6 +396,7 @@ export function useGraineWidget() {
             kind: String(w.kind || ""),
             data: resolveWidgetImages((w.data || {}), client.opts.baseUrl),
             fallbackText: String(w.fallback_text || ""),
+            style: normaliseWidgetStyle(w.style),
         }
         : null, [client]);
     const [widget, setWidget] = useState(() => adopt(client.pendingWidget));

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

@@ -23,9 +23,21 @@ export interface GraineVoiceLauncherProps {
     onEnded?: () => void;
     onMicDenied?: (reason: string) => void;
     onError?: (message: string) => void;
+    timing?: {
+        readyTimeoutMs?: number;
+        retryDelaysMs?: number[];
+        endWatchdogMs?: number;
+    };
     children?: (api: GraineVoiceApi) => React.ReactNode;
 }
+export interface GraineConnectivity {
+    state: "loading" | "ready" | "retrying" | "failed";
+    attempt: number;
+    reason?: string;
+}
 export interface GraineVoiceApi {
+    connectivity: GraineConnectivity;
+    retry: () => void;
     connected: boolean;
     connecting: boolean;
     muted: boolean;
@@ -40,4 +52,4 @@ export interface GraineVoiceApi {
     clearCaptions: () => void;
 }
 export declare const CAPTION_HISTORY = 12;
-export declare function GraineVoiceLauncher({ webView: WebView, autoStart, active, transport, onTransport, onCaption, onCallState, onMicDenied, onError, onEnded, children, }: GraineVoiceLauncherProps): React.JSX.Element;
+export declare function GraineVoiceLauncher({ webView: WebView, autoStart, active, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }: GraineVoiceLauncherProps): React.JSX.Element;

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

@@ -4,13 +4,14 @@ import { AppState, View } from "react-native";
 import { useGraineAgent } from "./index.js";
 import { requestMicrophonePermission } from "./permissions.js";
 export const CAPTION_HISTORY = 12;
-export function GraineVoiceLauncher({ webView: WebView, autoStart = false, active = true, transport, onTransport, onCaption, onCallState, onMicDenied, onError, onEnded, children, }) {
+export function GraineVoiceLauncher({ webView: WebView, autoStart = false, active = true, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }) {
     const { client, appearance } = useGraineAgent();
     const ref = useRef(null);
     const startedRef = useRef(false);
     const activeRef = useRef(active);
     activeRef.current = active;
     const mountedIdleRef = useRef(!active);
+    const mountStampRef = useRef(Date.now());
     const [connected, setConnected] = useState(false);
     const [connecting, setConnecting] = useState(false);
     const [muted, setMutedState] = useState(false);
@@ -37,6 +38,88 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const [voiceAgentId, setVoiceAgentId] = useState(client.config ? client.config.webcallAgentId || client.config.agentId : null);
     const onErrorRef = useRef(onError);
     onErrorRef.current = onError;
+    const READY_TIMEOUT_MS = timing?.readyTimeoutMs ?? 15000;
+    const RETRY_DELAYS_MS = timing?.retryDelaysMs ?? [1000, 2000, 4000, 8000, 15000, 15000];
+    const END_WATCHDOG_MS = timing?.endWatchdogMs ?? 4000;
+    const [connectivity, setConnectivity] = useState({ state: "loading", attempt: 0 });
+    const attemptRef = useRef(0);
+    const retryTimerRef = useRef(null);
+    const readyTimerRef = useRef(null);
+    const endWatchdogRef = useRef(null);
+    const connectedRef = useRef(false);
+    useEffect(() => { connectedRef.current = connected; }, [connected]);
+    const endedNotifiedRef = useRef(true);
+    const onEndedRef = useRef(onEnded);
+    onEndedRef.current = onEnded;
+    const clearTimer = (r) => {
+        if (r.current) {
+            clearTimeout(r.current);
+            r.current = null;
+        }
+    };
+    const scheduleRetry = useCallback((reason) => {
+        clearTimer(readyTimerRef);
+        if (connectedRef.current)
+            return;
+        const attempt = attemptRef.current;
+        if (attempt >= RETRY_DELAYS_MS.length) {
+            setConnectivity({ state: "failed", attempt, reason });
+            setConnecting(false);
+            pendingStartRef.current = false;
+            onErrorRef.current?.("The assistant could not load. Check your connection and try again.");
+            return;
+        }
+        const base = RETRY_DELAYS_MS[attempt];
+        const delay = Math.round(base * (0.75 + Math.random() * 0.5));
+        attemptRef.current = attempt + 1;
+        setConnectivity({ state: "retrying", attempt: attempt + 1, reason });
+        setReady(false);
+        clearTimer(retryTimerRef);
+        retryTimerRef.current = setTimeout(() => {
+            retryTimerRef.current = null;
+            try {
+                ref.current?.reload();
+            }
+            catch { }
+        }, delay);
+    }, []);
+    const armReadyTimer = useCallback(() => {
+        clearTimer(readyTimerRef);
+        readyTimerRef.current = setTimeout(() => {
+            readyTimerRef.current = null;
+            scheduleRetry("ready-timeout");
+        }, READY_TIMEOUT_MS);
+    }, [scheduleRetry]);
+    const restartLoad = useCallback(() => {
+        clearTimer(retryTimerRef);
+        attemptRef.current = 0;
+        setConnectivity({ state: "loading", attempt: 0 });
+        setReady(false);
+        try {
+            ref.current?.reload();
+        }
+        catch { }
+        armReadyTimer();
+    }, [armReadyTimer]);
+    const forceEnd = useCallback((why) => {
+        clearTimer(endWatchdogRef);
+        setConnected(false);
+        setConnecting(false);
+        connectedRef.current = false;
+        if (!endedNotifiedRef.current) {
+            endedNotifiedRef.current = true;
+            console.warn(`[graine] the page did not confirm the call ended (${why}); ending it locally`);
+            onEndedRef.current?.();
+        }
+        restartLoad();
+    }, [restartLoad]);
+    const armEndWatchdog = useCallback(() => {
+        clearTimer(endWatchdogRef);
+        if (!connectedRef.current)
+            return;
+        endWatchdogRef.current = setTimeout(() => forceEnd("watchdog"), END_WATCHDOG_MS);
+    }, [forceEnd]);
+    useEffect(() => () => { clearTimer(retryTimerRef); clearTimer(readyTimerRef); clearTimer(endWatchdogRef); }, []);
     useEffect(() => {
         if (voiceAgentId)
             return;
@@ -74,6 +157,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         return client.on("screen", () => pushContext());
     }, [client, ready, pushContext]);
     const beginCall = useCallback(async () => {
+        endedNotifiedRef.current = false;
         if (client.isConnected) {
             console.warn("[graine] The provider has its own connection open while GraineVoiceLauncher " +
                 "is starting a call. Pass autoConnect={false} to <GraineProvider> — otherwise " +
@@ -131,6 +215,10 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 }
                 return;
             case "graine:ready":
+                clearTimer(readyTimerRef);
+                clearTimer(retryTimerRef);
+                attemptRef.current = 0;
+                setConnectivity({ state: "ready", attempt: 0 });
                 setReady(true);
                 pushContext();
                 if ((autoStart || pendingStartRef.current) && !startedRef.current && activeRef.current) {
@@ -143,6 +231,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 }
                 return;
             case "graine:call":
+                if (msg.connected)
+                    endedNotifiedRef.current = false;
                 setConnected(!!msg.connected);
                 setConnecting(!!msg.connecting);
                 if (!msg.connected && !msg.connecting)
@@ -163,9 +253,14 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 return;
             }
             case "graine:ended":
+                clearTimer(endWatchdogRef);
                 setConnected(false);
                 setConnecting(false);
-                onEnded?.();
+                connectedRef.current = false;
+                if (!endedNotifiedRef.current) {
+                    endedNotifiedRef.current = true;
+                    onEnded?.();
+                }
                 return;
             case "graine:mic-denied":
                 client.emit("mic_denied", { reason: String(msg.reason || "NotAllowedError") });
@@ -210,7 +305,9 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
             }
             void beginCall();
         }, [beginCall, ready]),
-        end: useCallback(() => post({ type: "graine:end-call" }), [post]),
+        end: useCallback(() => { post({ type: "graine:end-call" }); armEndWatchdog(); }, [post, armEndWatchdog]),
+        connectivity,
+        retry: restartLoad,
         setMuted: useCallback((m) => {
             setMutedState(m);
             post({ type: "graine:set-muted", muted: m });
@@ -222,6 +319,9 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         const first = activeSeenRef.current === null;
         activeSeenRef.current = active;
         if (active) {
+            if (attemptRef.current >= RETRY_DELAYS_MS.length) {
+                restartLoad();
+            }
             if (autoStart) {
                 if (startedRef.current)
                     return;
@@ -242,6 +342,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         if (first)
             return;
         post({ type: "graine:end-call" });
+        armEndWatchdog();
         startedRef.current = false;
         pendingStartRef.current = false;
         setConnected(false);
@@ -278,7 +379,6 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     }, [post]);
     if (!voiceAgentId)
         return _jsx(_Fragment, { children: children?.(api) });
-    const mountStampRef = useRef(Date.now());
     const effectiveTransport = transport ?? (appearance?.audioTransport === "rtc" ? "rtc" : "ws");
     const src = `${client.opts.baseUrl.replace(/\/$/, "")}/embed/${voiceAgentId}` +
         `?mode=voice&branding=0&embed=1&transport=${effectiveTransport}` +
@@ -286,5 +386,5 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         (mountedIdleRef.current ? "&idle=1" : "") +
         `&pk=${encodeURIComponent(client.opts.publishableKey)}` +
         (appearance?.accent ? `&accent=${encodeURIComponent(String(appearance.accent).replace("#", ""))}` : "");
-    return (_jsxs(_Fragment, { children: [_jsx(View, { style: { position: "absolute", width: 1, height: 1, opacity: 0, bottom: 0, left: 0 }, pointerEvents: "none", children: _jsx(WebView, { ref: ref, source: { uri: src }, originWhitelist: ["*"], javaScriptEnabled: true, domStorageEnabled: true, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, mediaCapturePermissionGrantType: "grant", onMessage: onMessage, style: { width: 1, height: 1, backgroundColor: "transparent" } }) }), children?.(api)] }));
+    return (_jsxs(_Fragment, { children: [_jsx(View, { style: { position: "absolute", width: 1, height: 1, opacity: 0, bottom: 0, left: 0 }, pointerEvents: "none", children: _jsx(WebView, { ref: ref, source: { uri: src }, originWhitelist: ["*"], javaScriptEnabled: true, domStorageEnabled: true, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, mediaCapturePermissionGrantType: "grant", onMessage: onMessage, onLoadStart: armReadyTimer, onError: (e) => scheduleRetry(`load-error:${e?.nativeEvent?.code ?? ""}`), onHttpError: (e) => scheduleRetry(`http-${e?.nativeEvent?.statusCode ?? ""}`), onRenderProcessGone: () => scheduleRetry("render-process-gone"), style: { width: 1, height: 1, backgroundColor: "transparent" } }) }), children?.(api)] }));
 }

package/dist/react-native/widget.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext } from "react";
-import { Image, Modal, Pressable, ScrollView, Text, View, useColorScheme } from "react-native";
+import { useContext, useState } from "react";
+import { Image, Modal, Platform, Pressable, ScrollView, Text, View, useColorScheme } from "react-native";
 import { Ctx, useGraineWidget } from "./index.js";
 import { resolveNativeAppearance, resolveWidgetPalette } from "./appearance.js";
-import { widgetSurface } from "../protocol.js";
+import { PLATFORM_GRAMMAR, resolvePlatform, resolveWidgetLook } from "../protocol.js";
 function tint(hex, alpha) {
     const m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim());
     if (!m)
@@ -11,35 +11,74 @@ function tint(hex, alpha) {
     const n = parseInt(m[1], 16);
     return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
 }
-function WidgetRow({ row, hero, theme, accent, radius, onPick, }) {
+const HERO_HEIGHT = { small: 100, medium: 140, large: 180 };
+const THUMB = { small: 56, medium: 72, large: 96 };
+const LIST_THUMB = { small: 36, medium: 44, large: 56 };
+function WidgetRow({ row, variant, look, grammar, theme, accent, radius, onPick, }) {
     const r = Math.max(10, radius - 6);
-    return (_jsxs(View, { style: {
+    const tight = look.density === "compact";
+    const pad = (variant === "list" ? (tight ? 6 : 9) : (tight ? 7 : 10)) + grammar.padBoost;
+    const gap = tight ? 6 : 10;
+    const rowIsButton = look.button === "row";
+    const outline = look.button === "outline";
+    const label = row.unavailable ? "Unavailable" : row.selectLabel;
+    const a11y = `${row.selectLabel}: ${row.title}`;
+    const badge = row.subtitle ? (_jsx(View, { style: { flexDirection: "row" }, children: _jsx(Text, { style: {
+                color: accent, fontSize: 10.5, fontWeight: "800", letterSpacing: 0.4,
+                textTransform: "uppercase", backgroundColor: tint(accent, 0.15),
+                borderRadius: 999, paddingHorizontal: 8, paddingVertical: 3, overflow: "hidden",
+            }, children: row.subtitle }) })) : null;
+    const titleLine = (big) => (_jsxs(View, { style: { flexDirection: "row", alignItems: "baseline", gap: 8 }, children: [_jsx(Text, { numberOfLines: 2, style: { color: theme.text, fontSize: big ? 16.5 : (variant === "list" ? 13.5 : 14.5), fontWeight: grammar.titleWeight, flex: 1 }, children: row.title }), row.price ? (_jsx(Text, { style: {
+                    color: theme.text, fontSize: big ? 17 : (variant === "list" ? 13.5 : 14.5), fontWeight: "800",
+                    fontVariant: ["tabular-nums"],
+                }, children: row.price })) : null] }));
+    const facts = look.facts && row.facts.length ? (_jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 6, marginTop: 2 }, children: (variant === "list" ? row.facts.slice(0, 2) : row.facts).map((f, i) => (_jsx(Text, { style: {
+                color: theme.muted, fontSize: variant === "list" ? 10.5 : 11.5, fontWeight: "600",
+                backgroundColor: grammar.chipOutlined ? "transparent" : tint(theme.border, 0.35),
+                borderWidth: grammar.chipOutlined ? 1 : 0, borderColor: theme.border,
+                borderRadius: grammar.chipRadius, paddingHorizontal: variant === "list" ? 6 : 8, paddingVertical: variant === "list" ? 2 : 4, overflow: "hidden",
+            }, children: f }, `${f}-${i}`))) })) : null;
+    const button = (wide) => (_jsx(Pressable, { disabled: row.unavailable, onPress: onPick, accessibilityRole: "button", accessibilityLabel: a11y, hitSlop: wide ? undefined : 8, style: {
+            minHeight: 44, justifyContent: "center", alignItems: "center",
+            borderRadius: wide ? grammar.buttonRadius : (grammar.pillButtons ? 999 : grammar.buttonRadius), paddingHorizontal: wide ? 12 : 14,
+            marginTop: wide ? 8 : 0,
+            backgroundColor: row.unavailable || outline ? "transparent" : accent,
+            borderWidth: row.unavailable || outline ? 1.5 : 0,
+            borderColor: row.unavailable ? theme.border : accent,
+        }, children: _jsx(Text, { style: {
+                color: row.unavailable ? theme.muted : (outline ? accent : theme.onAccent),
+                fontSize: wide ? 14 : 12.5, fontWeight: "700",
+            }, children: label }) }));
+    const image = (style) => row.image ? (_jsx(Image, { source: { uri: row.image }, accessibilityIgnoresInvertColors: true, resizeMode: "cover", style: { borderRadius: Math.max(8, radius - 8), backgroundColor: theme.border, ...style } })) : null;
+    const wrap = (children, style) => rowIsButton ? (_jsx(Pressable, { disabled: row.unavailable, onPress: onPick, accessibilityRole: "button", accessibilityLabel: a11y, style: style, children: children })) : (_jsx(View, { style: style, children: children }));
+    if (variant === "hero") {
+        return wrap(_jsxs(_Fragment, { children: [image({ width: "100%", height: HERO_HEIGHT[look.imageSize] }), _jsxs(View, { style: { gap: 3 }, children: [badge, titleLine(true), facts, rowIsButton ? null : button(true)] })] }), {
+            borderRadius: r, borderWidth: 1, borderColor: theme.border, padding: pad,
+            opacity: row.unavailable ? 0.55 : 1, gap, flexDirection: "column",
+        });
+    }
+    if (variant === "list") {
+        const t = LIST_THUMB[look.imageSize];
+        return wrap(_jsxs(_Fragment, { children: [image({ width: t, height: t }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 2 }, children: [titleLine(false), facts] }), rowIsButton ? (_jsx(Text, { style: { color: theme.muted, fontSize: 22, fontWeight: "600", paddingLeft: 4 }, children: "›" })) : button(false)] }), {
+            flexDirection: "row", alignItems: "center", gap,
+            paddingVertical: pad, paddingHorizontal: 2, minHeight: 44,
+            borderBottomWidth: 1, borderBottomColor: theme.border, marginLeft: grammar.separatorInset,
+            opacity: row.unavailable ? 0.55 : 1,
+        });
+    }
+    if (variant === "compact") {
+        return wrap(_jsxs(_Fragment, { children: [_jsxs(View, { style: { flex: 1, minWidth: 0, gap: 2 }, children: [badge, titleLine(false), facts] }), rowIsButton ? null : button(false)] }), {
             borderRadius: r, borderWidth: 1, borderColor: theme.border,
-            padding: 10, opacity: row.unavailable ? 0.55 : 1,
-            flexDirection: hero ? "column" : "row", gap: 10, alignItems: hero ? "stretch" : "center",
-        }, children: [row.image ? (_jsx(Image, { source: { uri: row.image }, accessibilityIgnoresInvertColors: true, style: hero
-                    ? { width: "100%", height: 140, borderRadius: Math.max(8, radius - 8), backgroundColor: theme.border }
-                    : { width: 72, height: 72, borderRadius: Math.max(8, radius - 8), backgroundColor: theme.border }, resizeMode: "cover" })) : null, _jsxs(View, { style: { flex: hero ? undefined : 1, minWidth: 0, gap: 3 }, children: [row.subtitle ? (_jsx(View, { style: { flexDirection: "row" }, children: _jsx(Text, { style: {
-                                color: accent, fontSize: 10.5, fontWeight: "800", letterSpacing: 0.4,
-                                textTransform: "uppercase", backgroundColor: tint(accent, 0.15),
-                                borderRadius: 999, paddingHorizontal: 8, paddingVertical: 3, overflow: "hidden",
-                            }, children: row.subtitle }) })) : null, _jsxs(View, { style: { flexDirection: "row", alignItems: "baseline", gap: 8 }, children: [_jsx(Text, { numberOfLines: 2, style: { color: theme.text, fontSize: hero ? 16.5 : 14.5, fontWeight: "700", flex: 1 }, children: row.title }), row.price ? (_jsx(Text, { style: {
-                                    color: theme.text, fontSize: hero ? 17 : 14.5, fontWeight: "800",
-                                    fontVariant: ["tabular-nums"],
-                                }, children: row.price })) : null] }), row.facts.length ? (_jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 6, marginTop: 2 }, children: row.facts.map((f, i) => (_jsx(Text, { style: {
-                                color: theme.muted, fontSize: 11.5, fontWeight: "600",
-                                backgroundColor: tint(theme.border, 0.35),
-                                borderRadius: 8, paddingHorizontal: 8, paddingVertical: 4, overflow: "hidden",
-                            }, children: f }, `${f}-${i}`))) })) : null, hero ? (_jsx(Pressable, { disabled: row.unavailable, onPress: onPick, accessibilityRole: "button", accessibilityLabel: `${row.selectLabel}: ${row.title}`, style: {
-                            marginTop: 8, height: 44, borderRadius: 11, alignItems: "center", justifyContent: "center",
-                            backgroundColor: row.unavailable ? "transparent" : accent,
-                            borderWidth: row.unavailable ? 1 : 0, borderColor: theme.border,
-                        }, children: _jsx(Text, { style: { color: row.unavailable ? theme.muted : theme.onAccent, fontSize: 14, fontWeight: "700" }, children: row.unavailable ? "Unavailable" : row.selectLabel }) })) : null] }), hero ? null : (_jsx(Pressable, { disabled: row.unavailable, onPress: onPick, accessibilityRole: "button", accessibilityLabel: `${row.selectLabel}: ${row.title}`, hitSlop: 8, style: {
-                    minHeight: 44, justifyContent: "center",
-                    backgroundColor: row.unavailable ? "transparent" : accent,
-                    borderWidth: row.unavailable ? 1 : 0, borderColor: theme.border,
-                    borderRadius: 999, paddingHorizontal: 14,
-                }, children: _jsx(Text, { style: { color: row.unavailable ? theme.muted : theme.onAccent, fontSize: 12.5, fontWeight: "700" }, children: row.unavailable ? "Unavailable" : row.selectLabel }) }))] }));
+            paddingVertical: pad, paddingHorizontal: pad + 2,
+            flexDirection: "row", alignItems: "center", gap,
+            opacity: row.unavailable ? 0.55 : 1, minHeight: 44,
+        });
+    }
+    const t = THUMB[look.imageSize];
+    return wrap(_jsxs(_Fragment, { children: [image({ width: t, height: t }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 3 }, children: [badge, titleLine(false), facts] }), rowIsButton ? null : button(false)] }), {
+        borderRadius: r, borderWidth: 1, borderColor: theme.border, padding: pad,
+        opacity: row.unavailable ? 0.55 : 1, flexDirection: "row", gap, alignItems: "center",
+    });
 }
 function AnsweredLine({ answered, theme, accent, radius, onClear }) {
     const d = (answered.data || {});
@@ -60,9 +99,13 @@ export function GraineWidget(props) {
     const { widget, answered, submit, dismiss } = useGraineWidget();
     const appearance = useContext(Ctx)?.appearance ?? null;
     const scheme = useColorScheme();
+    const [pagerWidth, setPagerWidth] = useState(0);
+    const [page, setPage] = useState(0);
+    const look = resolveWidgetLook(widget?.style, widget?.kind);
+    const grammar = PLATFORM_GRAMMAR[resolvePlatform(look.platform, Platform.OS, Platform.constants?.Manufacturer ?? Platform.constants?.Brand)];
     const dash = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "" });
-    const accent = props.accent ?? dash.accent;
-    const radius = props.radius ?? dash.radius;
+    const accent = props.accent ?? look.accent ?? dash.accent;
+    const radius = props.radius ?? look.radius ?? (look.platform !== "auto" ? grammar.radius : dash.radius);
     const theme = {
         ...resolveWidgetPalette(appearance, { scheme, accent }),
         ...(props.theme ?? {}),
@@ -132,7 +175,7 @@ export function GraineWidget(props) {
     const isChips = (widget.kind === "choices" || isQuickActions) && options.length > 0;
     const isCalendar = widget.kind === "calendar_slots" && Array.isArray(data?.days) && data.days.length > 0;
     const drawable = isProducts || isChips || isCalendar;
-    const surface = drawable ? widgetSurface(widget.kind) : "card";
+    const surface = drawable ? look.surface : "card";
     const pick = (it) => submit(normalised.toSubmit(it), normalised.toSay(it));
     const body = (_jsx(_Fragment, { children: isCalendar ? (_jsxs(View, { style: { gap: 12 }, children: [data.note ? (_jsx(Text, { style: { color: theme.muted, fontSize: 12.5, lineHeight: 18 }, children: String(data.note) })) : null, data.days.slice(0, 4).map((d, di) => {
                     const dayLabel = String(d?.label ?? d?.id ?? `Day ${di + 1}`);
@@ -144,7 +187,31 @@ export function GraineWidget(props) {
                                         borderWidth: 1, borderColor: theme.border, borderRadius: 11,
                                         paddingHorizontal: 14,
                                     }, children: _jsx(Text, { style: { color: theme.text, fontSize: 13.5, fontWeight: "600" }, children: slot }) }, `${slot}-${si}`))) })] }, `${dayLabel}-${di}`));
-                })] })) : isProducts ? (_jsx(View, { style: { gap: 10 }, children: rows.map((row, i) => (_jsx(WidgetRow, { row: row, hero: surface === "screen" && i === 0 && !!row.image, theme: theme, accent: accent, radius: radius, onPick: () => pick({ ...normalised.items[i], id: row.id, title: row.title, price: row.price }) }, `${row.id}-${i}`))) })) : isChips ? (_jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 }, children: options.map((o, i) => {
+                })] })) : isProducts ? ((() => {
+            const draw = (row, i, variant) => (_jsx(WidgetRow, { row: row, variant: variant, look: look, grammar: grammar, theme: theme, accent: accent, radius: radius, onPick: () => pick({ ...normalised.items[i], id: row.id, title: row.title, price: row.price }) }, `${row.id}-${i}`));
+            const gap = look.density === "compact" ? 6 : 10;
+            if (look.preset === "spotlight") {
+                const cardW = pagerWidth ? Math.round(pagerWidth * 0.86) : 300;
+                const step = cardW + gap;
+                return (_jsxs(View, { onLayout: (e) => setPagerWidth(e?.nativeEvent?.layout?.width ?? 0), children: [_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, snapToInterval: step, decelerationRate: "fast", onMomentumScrollEnd: (e) => setPage(Math.round((e?.nativeEvent?.contentOffset?.x ?? 0) / step)), contentContainerStyle: { gap, paddingRight: 24 }, children: rows.map((row, i) => (_jsx(View, { style: { width: cardW }, children: draw(row, i, "hero") }, `${row.id}-${i}`))) }), rows.length > 1 ? (_jsx(View, { style: { flexDirection: "row", justifyContent: "center", gap: 5, paddingTop: 10 }, accessibilityLabel: `${Math.min(page + 1, rows.length)} of ${rows.length}`, children: rows.map((row, i) => (_jsx(View, { style: {
+                                    height: 5, borderRadius: 999, width: i === page ? 14 : 5,
+                                    backgroundColor: i === page ? accent : theme.border,
+                                } }, `dot-${row.id}-${i}`))) })) : null] }));
+            }
+            if (look.columns === 2) {
+                return (_jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap, justifyContent: "space-between" }, children: rows.map((row, i) => (_jsx(View, { style: { width: "48%" }, children: draw(row, i, "hero") }, `${row.id}-${i}`))) }));
+            }
+            if (look.preset === "gallery") {
+                return _jsx(View, { style: { gap }, children: rows.map((row, i) => draw(row, i, "hero")) });
+            }
+            if (look.preset === "list") {
+                return _jsx(View, { children: rows.map((row, i) => draw(row, i, "list")) });
+            }
+            if (look.preset === "compact") {
+                return _jsx(View, { style: { gap }, children: rows.map((row, i) => draw(row, i, "compact")) });
+            }
+            return _jsx(View, { style: { gap }, children: rows.map((row, i) => draw(row, i, "row")) });
+        })()) : isChips ? (_jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 }, children: options.map((o, i) => {
                 const label = String(o?.label ?? o?.title ?? o ?? "");
                 const id = String(o?.id ?? label);
                 return (_jsx(Pressable, { onPress: () => submit(isQuickActions ? { id, label } : { chosen: id, label }, `I'll go with ${label}.`), accessibilityRole: "button", accessibilityLabel: label, style: {
@@ -155,7 +222,7 @@ export function GraineWidget(props) {
     const title = data?.title ? String(data.title) : "";
     const prompt = data?.prompt ? String(data.prompt) : "";
     if (surface === "screen") {
-        return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "slide", onRequestClose: dismiss, transparent: false, children: _jsxs(View, { style: { flex: 1, backgroundColor: theme.surface }, children: [_jsxs(View, { style: {
+        return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "slide", onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsxs(View, { style: { flex: 1, backgroundColor: theme.surface }, children: [_jsxs(View, { style: {
                                     paddingTop: 52, paddingHorizontal: 18, paddingBottom: 12,
                                     flexDirection: "row", alignItems: "center", gap: 12,
                                 }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close and keep talking", hitSlop: 10, style: {
@@ -167,11 +234,11 @@ export function GraineWidget(props) {
                                 }, children: [_jsx(Text, { style: { color: theme.muted, fontSize: 10.5, fontWeight: "800", letterSpacing: 0.4, textTransform: "uppercase" }, children: "Still listening" }), _jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: 13.5, marginTop: 2 }, children: prompt || "Tap one, or just say it." })] })] }) })] }));
     }
     if (surface === "sheet") {
-        return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "slide", transparent: true, onRequestClose: dismiss, children: _jsxs(View, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "flex-end" }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close", style: { flex: 1 } }), _jsxs(View, { style: {
+        return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "slide", transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, onRequestClose: dismiss, children: _jsxs(View, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "flex-end" }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close", style: { flex: 1 } }), _jsxs(View, { style: {
                                     backgroundColor: theme.surface,
                                     borderTopLeftRadius: Math.max(20, radius), borderTopRightRadius: Math.max(20, radius),
                                     paddingHorizontal: 18, paddingTop: 10, paddingBottom: 28, gap: 14,
-                                }, children: [_jsx(View, { style: { alignItems: "center" }, children: _jsx(View, { style: { width: 38, height: 4, borderRadius: 999, backgroundColor: theme.border } }) }), title ? (_jsx(Text, { style: { color: theme.text, fontSize: 18, fontWeight: "800" }, children: title })) : null, prompt ? (_jsx(Text, { style: { color: theme.muted, fontSize: 13, lineHeight: 18, marginTop: -8 }, children: prompt })) : null, _jsx(ScrollView, { style: { maxHeight: 420 }, contentContainerStyle: { paddingBottom: 4 }, keyboardShouldPersistTaps: "handled", children: body }), _jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "None of these", style: {
+                                }, children: [_jsx(View, { style: { alignItems: "center" }, children: _jsx(View, { style: { width: grammar.grabber.width, height: grammar.grabber.height, borderRadius: 999, backgroundColor: theme.border } }) }), title ? (_jsx(Text, { style: { color: theme.text, fontSize: 18, fontWeight: "800" }, children: title })) : null, prompt ? (_jsx(Text, { style: { color: theme.muted, fontSize: 13, lineHeight: 18, marginTop: -8 }, children: prompt })) : null, _jsx(ScrollView, { style: { maxHeight: 420 }, contentContainerStyle: { paddingBottom: 4 }, keyboardShouldPersistTaps: "handled", children: body }), _jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "None of these", style: {
                                             alignSelf: "flex-start", minHeight: 44, justifyContent: "center",
                                             paddingHorizontal: 16, borderRadius: 999, backgroundColor: tint(theme.border, 0.4),
                                         }, children: _jsx(Text, { style: { color: theme.text, fontSize: 13.5, fontWeight: "700" }, children: "None of these" }) })] })] }) })] }));

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.33.2",
+  "version": "0.33.4",
   "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.",
+  "description": "Graine in-app agent for React Native \u2014 an agent that sees the screen your customer is on and can act on it.",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -32,18 +32,20 @@
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
     "typecheck": "tsc -p tsconfig.build.json --noEmit",
-    "test": "npm run build && node --test test/*.test.mjs",
-    "prepublishOnly": "npm test && node scripts/verify-package-clean.mjs"
+    "test": "npm run build && node --test test/*.test.mjs && npm run test:render",
+    "prepublishOnly": "npm test && node scripts/verify-package-clean.mjs",
+    "test:render": "node --import ./test/harness/register.mjs --test test/render/*.test.mjs"
   },
   "peerDependencies": {
+    "@jambonz/client-sdk-react-native": "^0.1.4",
     "react": ">=17",
-    "react-native": ">=0.68",
-    "@jambonz/client-sdk-react-native": "^0.1.4"
+    "react-native": ">=0.68"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "react": "^18.2.0",
     "react-native": "^0.74.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.4.0"
   },
   "keywords": [