@graineai/inapp-react-native 0.33.4 → 0.33.6

package/dist/client.js

@@ -238,6 +238,9 @@ export class GraineInAppClient {
             case "widget":
                 this.emit("widget", msg.widget);
                 break;
+            case "widget_pending":
+                this.emit("widget_pending", msg.widget || {});
+                break;
             case "app_action":
                 void this.runAction(msg.action);
                 break;

package/dist/index.d.ts

@@ -2,7 +2,16 @@ export type { ActionHandler, AppActionRequest, AppActionResult, AppEvent, Screen
 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 { LOADER_KINDS, LOADER_SIZES, LOADER_SPEEDS, LOADER_MOMENTS, DEFAULT_LOADER_KIND, DEFAULT_LOADER_TEXT, LOADER_TEXT_MAX, normaliseLoaderStyle, resolveLoader, } from "./protocol.js";
+export type { LoaderKind, LoaderSize, LoaderSpeed, LoaderMoment, LoaderText, LoaderStyle, LoaderLook } from "./protocol.js";
+export { normaliseSelectAction, fillSelectArgs, fillSelectTemplate, selectCall, NAVIGATE_ACTION, SELECT_ARG_MAX, SELECT_VALUE_MAX } from "./protocol.js";
+export { WIDGET_SELECTS, MAX_SELECT_DEFAULT, manySummary } from "./protocol.js";
+export type { WidgetSelect } from "./protocol.js";
+export type { WidgetSelectAction } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
+export { GraineLoader, useGraineLoader } from "./react-native/loader.js";
+export type { GraineLoaderProps } from "./react-native/loader.js";
+export { PENDING_WIDGET_MS, AWAITING_REPLY_MS, MIN_LOADER_MS } from "./react-native/index.js";
 export type { GraineWidgetProps, GraineWidgetTheme } from "./react-native/widget.js";
 export { GraineInAppClient, type GraineInAppOptions, type SessionConfig, type ActionDiagnosis, } from "./client.js";
 export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, type FrictionConfig, type FrictionScreenRules, type FrictionNudge, type FrictionSignal, type FrictionKind, } from "./friction.js";

package/dist/index.js

@@ -1,6 +1,11 @@
 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 { LOADER_KINDS, LOADER_SIZES, LOADER_SPEEDS, LOADER_MOMENTS, DEFAULT_LOADER_KIND, DEFAULT_LOADER_TEXT, LOADER_TEXT_MAX, normaliseLoaderStyle, resolveLoader, } from "./protocol.js";
+export { normaliseSelectAction, fillSelectArgs, fillSelectTemplate, selectCall, NAVIGATE_ACTION, SELECT_ARG_MAX, SELECT_VALUE_MAX } from "./protocol.js";
+export { WIDGET_SELECTS, MAX_SELECT_DEFAULT, manySummary } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
+export { GraineLoader, useGraineLoader } from "./react-native/loader.js";
+export { PENDING_WIDGET_MS, AWAITING_REPLY_MS, MIN_LOADER_MS } from "./react-native/index.js";
 export { GraineInAppClient, } from "./client.js";
 export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, } from "./friction.js";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice.js";

package/dist/protocol.d.ts

@@ -33,6 +33,8 @@ export interface AppEvent {
     detail?: string;
     cooldown_seconds?: number;
     max_per_session?: number;
+    quiet?: boolean;
+    data?: Record<string, unknown>;
 }
 export interface AppEventFrame {
     type: "app_event";
@@ -68,6 +70,7 @@ 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 WidgetSelect = "one" | "many";
 export type WidgetPlatform = "auto" | "ios" | "material" | "oneui";
 export interface WidgetStyle {
     preset?: WidgetPreset;
@@ -80,6 +83,8 @@ export interface WidgetStyle {
     radius?: number;
     accent?: string;
     platform?: WidgetPlatform;
+    select?: WidgetSelect;
+    maxSelect?: number;
 }
 export declare const WIDGET_PRESETS: ReadonlyArray<WidgetPreset>;
 export declare const WIDGET_IMAGE_SIZES: ReadonlyArray<WidgetImageSize>;
@@ -87,6 +92,8 @@ 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 WIDGET_SELECTS: ReadonlyArray<WidgetSelect>;
+export declare const MAX_SELECT_DEFAULT = 3;
 export declare const DEFAULT_WIDGET_PRESET: WidgetPreset;
 export declare function normaliseWidgetStyle(raw: unknown): WidgetStyle;
 export interface WidgetLook {
@@ -100,8 +107,11 @@ export interface WidgetLook {
     radius?: number;
     accent?: string;
     platform: WidgetPlatform;
+    select: WidgetSelect;
+    maxSelect: number;
 }
 export declare function resolveWidgetLook(style: WidgetStyle | null | undefined, kind: string | null | undefined): WidgetLook;
+export declare function manySummary(titles: string[], verb?: string): string;
 export interface PlatformGrammar {
     radius: number;
     chipRadius: number;
@@ -118,3 +128,54 @@ export interface PlatformGrammar {
 }
 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">;
+export type LoaderKind = "dots" | "pulse" | "ring" | "bars" | "mark";
+export type LoaderSize = "small" | "medium" | "large";
+export type LoaderSpeed = "calm" | "normal" | "quick";
+export type LoaderMoment = "connecting" | "reconnecting" | "thinking" | "component";
+export interface LoaderText {
+    connecting?: string;
+    reconnecting?: string;
+    thinking?: string;
+    component?: string;
+}
+export interface LoaderStyle {
+    kind?: LoaderKind;
+    color?: string;
+    size?: LoaderSize;
+    speed?: LoaderSpeed;
+    text?: LoaderText;
+    skeleton?: boolean;
+}
+export declare const LOADER_KINDS: ReadonlyArray<LoaderKind>;
+export declare const LOADER_SIZES: ReadonlyArray<LoaderSize>;
+export declare const LOADER_SPEEDS: ReadonlyArray<LoaderSpeed>;
+export declare const LOADER_MOMENTS: ReadonlyArray<LoaderMoment>;
+export declare const DEFAULT_LOADER_KIND: LoaderKind;
+export declare const DEFAULT_LOADER_TEXT: Required<LoaderText>;
+export declare const LOADER_TEXT_MAX = 40;
+export declare function normaliseLoaderStyle(raw: unknown): LoaderStyle;
+export interface LoaderLook {
+    kind: LoaderKind;
+    color: string | null;
+    px: number;
+    periodMs: number;
+    text: Required<LoaderText>;
+    skeleton: boolean;
+}
+export declare function resolveLoader(style: LoaderStyle | null | undefined): LoaderLook;
+export interface WidgetSelectAction {
+    path?: string;
+    action?: string;
+    args?: Record<string, string>;
+    say?: string;
+}
+export declare const NAVIGATE_ACTION = "open_screen";
+export declare const SELECT_ARG_MAX = 10;
+export declare const SELECT_VALUE_MAX = 200;
+export declare function normaliseSelectAction(raw: unknown): WidgetSelectAction;
+export declare function fillSelectTemplate(template: string, item: Record<string, unknown>): string;
+export declare function selectCall(onSelect: WidgetSelectAction | undefined | null, item: Record<string, unknown>): {
+    name: string;
+    args: Record<string, string>;
+} | null;
+export declare function fillSelectArgs(args: Record<string, string> | undefined, item: Record<string, unknown>): Record<string, string>;

package/dist/protocol.js

@@ -47,6 +47,8 @@ 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 WIDGET_SELECTS = ["one", "many"];
+export const MAX_SELECT_DEFAULT = 3;
 export const DEFAULT_WIDGET_PRESET = "cards";
 export function normaliseWidgetStyle(raw) {
     if (!raw || typeof raw !== "object" || Array.isArray(raw))
@@ -85,6 +87,12 @@ export function normaliseWidgetStyle(raw) {
     const platform = pick(r.platform, WIDGET_PLATFORMS);
     if (platform)
         out.platform = platform;
+    const select = pick(r.select, WIDGET_SELECTS);
+    if (select)
+        out.select = select;
+    if (typeof r.maxSelect === "number" && Number.isFinite(r.maxSelect)) {
+        out.maxSelect = Math.max(2, Math.min(8, Math.round(r.maxSelect)));
+    }
     return out;
 }
 const PRESET_DEFAULTS = {
@@ -110,8 +118,18 @@ export function resolveWidgetLook(style, kind) {
         ...(s.radius !== undefined ? { radius: s.radius } : {}),
         ...(s.accent ? { accent: s.accent } : {}),
         platform: s.platform ?? "auto",
+        select: s.select ?? "one",
+        maxSelect: s.maxSelect ?? MAX_SELECT_DEFAULT,
     };
 }
+export function manySummary(titles, verb = "compare") {
+    const names = titles.map((t) => String(t).trim()).filter(Boolean);
+    if (!names.length)
+        return "";
+    const list = names.length === 1 ? names[0]
+        : `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
+    return `Let's ${verb} ${list}.`;
+}
 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 },
@@ -124,3 +142,122 @@ export function resolvePlatform(platform, os, manufacturer) {
         return /samsung/i.test(String(manufacturer ?? "")) ? "oneui" : "material";
     return "ios";
 }
+export const LOADER_KINDS = ["dots", "pulse", "ring", "bars", "mark"];
+export const LOADER_SIZES = ["small", "medium", "large"];
+export const LOADER_SPEEDS = ["calm", "normal", "quick"];
+export const LOADER_MOMENTS = ["connecting", "reconnecting", "thinking", "component"];
+export const DEFAULT_LOADER_KIND = "dots";
+export const DEFAULT_LOADER_TEXT = {
+    connecting: "Connecting…",
+    reconnecting: "Reconnecting…",
+    thinking: "Thinking…",
+    component: "Loading…",
+};
+export const LOADER_TEXT_MAX = 40;
+export function normaliseLoaderStyle(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 kind = pick(r.kind, LOADER_KINDS);
+    if (kind)
+        out.kind = kind;
+    const size = pick(r.size, LOADER_SIZES);
+    if (size)
+        out.size = size;
+    const speed = pick(r.speed, LOADER_SPEEDS);
+    if (speed)
+        out.speed = speed;
+    if (typeof r.color === "string") {
+        const c = r.color.trim();
+        if (c.toLowerCase() === "accent")
+            out.color = "accent";
+        else if (/^#[0-9a-f]{6}$/i.test(c))
+            out.color = c.toUpperCase();
+    }
+    if (typeof r.skeleton === "boolean")
+        out.skeleton = r.skeleton;
+    if (r.text && typeof r.text === "object" && !Array.isArray(r.text)) {
+        const t = r.text;
+        const text = {};
+        for (const m of LOADER_MOMENTS) {
+            const v = typeof t[m] === "string" ? t[m].trim().slice(0, LOADER_TEXT_MAX) : "";
+            if (v)
+                text[m] = v;
+        }
+        if (Object.keys(text).length)
+            out.text = text;
+    }
+    return out;
+}
+const LOADER_PX = { small: 14, medium: 20, large: 28 };
+const LOADER_PERIOD = { calm: 1600, normal: 1100, quick: 700 };
+export function resolveLoader(style) {
+    const s = normaliseLoaderStyle(style);
+    return {
+        kind: s.kind ?? DEFAULT_LOADER_KIND,
+        color: s.color && s.color !== "accent" ? s.color : null,
+        px: LOADER_PX[s.size ?? "medium"],
+        periodMs: LOADER_PERIOD[s.speed ?? "normal"],
+        text: { ...DEFAULT_LOADER_TEXT, ...(s.text ?? {}) },
+        skeleton: s.skeleton ?? false,
+    };
+}
+const ACTION_NAME = /^[a-z][a-z0-9_]{0,63}$/;
+export const NAVIGATE_ACTION = "open_screen";
+export const SELECT_ARG_MAX = 10;
+export const SELECT_VALUE_MAX = 200;
+export function normaliseSelectAction(raw) {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return {};
+    const r = raw;
+    const out = {};
+    const name = String(r.action ?? "").trim().toLowerCase();
+    if (ACTION_NAME.test(name))
+        out.action = name;
+    const path = typeof r.path === "string" ? r.path.trim().slice(0, SELECT_VALUE_MAX) : "";
+    if (path)
+        out.path = path;
+    if (r.args && typeof r.args === "object" && !Array.isArray(r.args)) {
+        const args = {};
+        for (const [k, v] of Object.entries(r.args)) {
+            const key = String(k).trim();
+            if (!key || Object.keys(args).length >= SELECT_ARG_MAX)
+                continue;
+            if (v === null || v === undefined || typeof v === "object")
+                continue;
+            args[key] = String(v).slice(0, SELECT_VALUE_MAX);
+        }
+        if (Object.keys(args).length)
+            out.args = args;
+    }
+    const say = typeof r.say === "string" ? r.say.trim().slice(0, SELECT_VALUE_MAX) : "";
+    if (say)
+        out.say = say;
+    return out.action || out.path ? out : {};
+}
+export function fillSelectTemplate(template, item) {
+    return String(template).replace(/\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g, (_, key) => {
+        const v = item[key];
+        return v === null || v === undefined ? "" : String(v);
+    });
+}
+export function selectCall(onSelect, item) {
+    const s = onSelect ?? {};
+    if (!s.action && !s.path)
+        return null;
+    const args = fillSelectArgs(s.args, item);
+    if (s.path)
+        args.path = fillSelectTemplate(s.path, item);
+    return { name: s.action || NAVIGATE_ACTION, args };
+}
+export function fillSelectArgs(args, item) {
+    const out = {};
+    for (const [k, v] of Object.entries(args ?? {}))
+        out[k] = fillSelectTemplate(v, item);
+    return out;
+}

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

@@ -2,7 +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";
+import { type WidgetStyle, type WidgetSelectAction } from "../protocol.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 export type { GraineFabProps, GraineTouchCaptureProps } from "./fab.js";
 export { widgetSurface } from "../protocol.js";
@@ -69,12 +69,16 @@ export type GraineEvent = {
     screen: string;
     detail: string;
 };
+export declare const PENDING_WIDGET_MS = 12000;
+export declare const AWAITING_REPLY_MS = 12000;
+export declare const MIN_LOADER_MS = 450;
 export interface GraineWidget {
     id: string;
     kind: string;
     data: Record<string, unknown>;
     fallbackText: string;
     style?: WidgetStyle;
+    onSelect?: WidgetSelectAction;
 }
 export interface Caption {
     role: "agent" | "customer";
@@ -132,6 +136,13 @@ export declare function useGraineWidget(): {
         data: Record<string, unknown>;
         summary: string;
     } | null;
+    loading: {
+        id: string;
+        kind: string;
+    } | null;
+    awaitingReply: boolean;
+    closed: GraineWidget | null;
+    reopen: () => void;
     submit: (data: Record<string, unknown>, summary: string) => void;
     dismiss: () => void;
 };

package/dist/react-native/index.js

@@ -3,11 +3,14 @@ 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, normaliseWidgetStyle } from "../protocol.js";
+import { resolveWidgetImages, normaliseWidgetStyle, normaliseSelectAction, selectCall, fillSelectTemplate } from "../protocol.js";
 import { GraineFab, GraineTouchCapture } from "./fab.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 export { widgetSurface } from "../protocol.js";
 import { LauncherVisibilityTracker, activeRouteName, } from "./navigation.js";
+export const PENDING_WIDGET_MS = 12000;
+export const AWAITING_REPLY_MS = 12000;
+export const MIN_LOADER_MS = 450;
 export const Ctx = createContext(null);
 let defaultClient = null;
 export function setDefaultClient(client) {
@@ -126,6 +129,12 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
     openRef.current = open;
     useEffect(() => {
         const offs = [
+            client.on("call_state", (s) => {
+                if (client.isConnected)
+                    return;
+                setConnected(!!s?.connected);
+                setConnecting(!!s?.connecting);
+            }),
             client.on("open", () => {
                 setConnected(true);
                 setConnecting(false);
@@ -397,36 +406,146 @@ export function useGraineWidget() {
             data: resolveWidgetImages((w.data || {}), client.opts.baseUrl),
             fallbackText: String(w.fallback_text || ""),
             style: normaliseWidgetStyle(w.style),
+            onSelect: normaliseSelectAction(w.on_select ?? w.onSelect),
         }
         : null, [client]);
     const [widget, setWidget] = useState(() => adopt(client.pendingWidget));
     const [answered, setAnswered] = useState(null);
+    const [loading, setLoading] = useState(null);
+    const loadingTimer = useRef(null);
+    const shownAt = useRef(null);
+    const minTimer = useRef(null);
+    const [awaitingReply, setAwaitingReply] = useState(false);
+    const [closed, setClosed] = useState(null);
+    const awaitingTimer = useRef(null);
+    useEffect(() => () => {
+        if (loadingTimer.current)
+            clearTimeout(loadingTimer.current);
+        if (awaitingTimer.current)
+            clearTimeout(awaitingTimer.current);
+        if (minTimer.current)
+            clearTimeout(minTimer.current);
+    }, []);
+    useEffect(() => {
+        const done = () => {
+            if (awaitingTimer.current) {
+                clearTimeout(awaitingTimer.current);
+                awaitingTimer.current = null;
+            }
+            setAwaitingReply(false);
+        };
+        const offs = [
+            client.on("agent_speaking", (speaking) => { if (speaking !== false)
+                done(); }),
+            client.on("chunk", done),
+            client.on("caption", (c) => { if (c?.role === "agent")
+                done(); }),
+            client.on("widget", done),
+        ];
+        return () => { for (const off of offs)
+            off(); };
+    }, [client]);
     useEffect(() => {
         const pending = adopt(client.pendingWidget);
         if (pending)
             setWidget((cur) => (cur && cur.id === pending.id ? cur : pending));
-        return client.on("widget", (w) => {
+        const offPending = client.on("widget_pending", (hint) => {
+            shownAt.current = Date.now();
+            setLoading({ id: String(hint?.widget_id ?? ""), kind: String(hint?.kind ?? "") });
+            if (loadingTimer.current)
+                clearTimeout(loadingTimer.current);
+            loadingTimer.current = setTimeout(() => setLoading(null), PENDING_WIDGET_MS);
+        });
+        const offWidget = client.on("widget", (w) => {
             const next = adopt(w);
             if (!next)
                 return;
-            setWidget(next);
-            setAnswered(null);
+            if (loadingTimer.current) {
+                clearTimeout(loadingTimer.current);
+                loadingTimer.current = null;
+            }
+            const show = () => {
+                shownAt.current = null;
+                setLoading(null);
+                setClosed(null);
+                setWidget(next);
+                setAnswered(null);
+            };
+            const seen = shownAt.current === null ? MIN_LOADER_MS : Date.now() - shownAt.current;
+            if (seen >= MIN_LOADER_MS)
+                show();
+            else {
+                if (minTimer.current)
+                    clearTimeout(minTimer.current);
+                minTimer.current = setTimeout(show, MIN_LOADER_MS - seen);
+            }
         });
+        return () => { offPending(); offWidget(); };
     }, [client, adopt]);
     const submit = useCallback((data, summary) => {
         if (!widget)
             return;
+        const onSelect = widget.onSelect;
+        const item = { ...data, summary };
+        const call = selectCall(onSelect, item);
+        if (call) {
+            void client
+                .executeAction(call.name, call.args)
+                .then((res) => {
+                if (res?.status && res.status !== "ok") {
+                    client.reportEvent({
+                        name: "in_app_action_failed",
+                        detail: `"${call.name}" did not run: ${res?.message || res.status}. Do not describe a screen the customer cannot see.`,
+                    });
+                }
+            })
+                .catch(() => { });
+            if (onSelect?.say)
+                summary = fillSelectTemplate(onSelect.say, item);
+        }
         client.submitWidget(widget.id, data, summary);
         client.clearPendingWidget();
         setWidget(null);
         setAnswered({ widget, data, summary });
+        setAwaitingReply(true);
+        if (awaitingTimer.current)
+            clearTimeout(awaitingTimer.current);
+        awaitingTimer.current = setTimeout(() => setAwaitingReply(false), AWAITING_REPLY_MS);
     }, [client, widget]);
     const dismiss = useCallback(() => {
+        if (minTimer.current) {
+            clearTimeout(minTimer.current);
+            minTimer.current = null;
+        }
+        shownAt.current = null;
+        if (widget) {
+            client.reportEvent({
+                name: "component_dismissed",
+                detail: "The customer closed the component without choosing. Do not refer to options they cannot see; offer to show it again if they want it.",
+                quiet: true,
+                data: {
+                    tool_name: widget.id.split(":")[0] || "",
+                    kind: widget.kind,
+                    title: String(widget.data?.title ?? ""),
+                    answered: false,
+                },
+            });
+        }
+        setClosed(widget);
         client.clearPendingWidget();
         setWidget(null);
         setAnswered(null);
-    }, [client]);
-    return { widget, answered, submit, dismiss };
+        setLoading(null);
+        setAwaitingReply(false);
+    }, [client, widget]);
+    const reopen = useCallback(() => {
+        if (!closed)
+            return;
+        setWidget(closed);
+        setClosed(null);
+        setAnswered(null);
+    }, [closed]);
+    return { widget, answered, loading, awaitingReply, closed, reopen, submit, dismiss };
 }
 export function useGraineAction(name, handler) {
     const client = useGraineClient();

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { type LoaderKind, type LoaderLook, type LoaderMoment } from "../protocol.js";
+export interface GraineLoaderProps {
+    moment?: LoaderMoment;
+    label?: string;
+    kind?: LoaderKind;
+    color?: string;
+    size?: number;
+    stacked?: boolean;
+}
+export declare function useGraineLoader(): LoaderLook & {
+    accent: string;
+};
+export declare function GraineLoader(props: GraineLoaderProps): React.JSX.Element;

package/dist/react-native/loader.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import { Animated, Easing, Text, View, useColorScheme } from "react-native";
+import { Ctx } from "./index.js";
+import { resolveNativeAppearance, resolveWidgetPalette } from "./appearance.js";
+import { resolveLoader } from "../protocol.js";
+export function useGraineLoader() {
+    const appearance = useContext(Ctx)?.appearance ?? null;
+    const look = resolveLoader(appearance?.loader);
+    const dash = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "" });
+    return { ...look, accent: look.color ?? dash.accent };
+}
+function useLoop(periodMs) {
+    const v = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        const loop = Animated.loop(Animated.timing(v, { toValue: 1, duration: periodMs, easing: Easing.linear, useNativeDriver: true }));
+        loop.start();
+        return () => loop.stop();
+    }, [v, periodMs]);
+    return v;
+}
+function Dots({ px, color, t }) {
+    const d = Math.max(4, Math.round(px * 0.32));
+    return (_jsx(View, { style: { flexDirection: "row", alignItems: "center", gap: Math.round(d * 0.7), height: px }, children: [0, 1, 2].map((i) => (_jsx(Animated.View, { style: {
+                width: d, height: d, borderRadius: 999, backgroundColor: color,
+                opacity: t.interpolate({ inputRange: [0, 0.33, 0.66, 1], outputRange: [i === 0 ? 1 : 0.3, i === 1 ? 1 : 0.3, i === 2 ? 1 : 0.3, i === 0 ? 1 : 0.3] }),
+            } }, i))) }));
+}
+function Pulse({ px, color, t }) {
+    return (_jsxs(View, { style: { width: px, height: px, alignItems: "center", justifyContent: "center" }, children: [_jsx(Animated.View, { style: {
+                    position: "absolute", width: px, height: px, borderRadius: 999, backgroundColor: color,
+                    opacity: t.interpolate({ inputRange: [0, 1], outputRange: [0.35, 0] }),
+                    transform: [{ scale: t.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1.4] }) }],
+                } }), _jsx(View, { style: { width: Math.round(px * 0.5), height: Math.round(px * 0.5), borderRadius: 999, backgroundColor: color } })] }));
+}
+function Ring({ px, color, t, track }) {
+    const w = Math.max(2, Math.round(px * 0.14));
+    return (_jsx(Animated.View, { style: {
+            width: px, height: px, borderRadius: 999, borderWidth: w,
+            borderColor: track, borderTopColor: color,
+            transform: [{ rotate: t.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }],
+        } }));
+}
+function Bars({ px, color, t }) {
+    const w = Math.max(3, Math.round(px * 0.18));
+    return (_jsx(View, { style: { flexDirection: "row", alignItems: "center", gap: Math.round(w * 0.8), height: px }, children: [0, 1, 2].map((i) => (_jsx(Animated.View, { style: {
+                width: w, borderRadius: 999, backgroundColor: color, height: px,
+                transform: [{ scaleY: t.interpolate({ inputRange: [0, 0.5, 1], outputRange: [i === 1 ? 0.4 : 1, i === 1 ? 1 : 0.4, i === 1 ? 0.4 : 1] }) }],
+            } }, i))) }));
+}
+function Mark({ px, color, t, logoUrl }) {
+    if (!logoUrl)
+        return _jsx(Pulse, { px: px, color: color, t: t });
+    return (_jsx(Animated.Image, { source: { uri: logoUrl }, accessibilityIgnoresInvertColors: true, resizeMode: "contain", style: { width: px, height: px, opacity: t.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, 0.45, 1] }) } }));
+}
+export function GraineLoader(props) {
+    const appearance = useContext(Ctx)?.appearance ?? null;
+    const scheme = useColorScheme();
+    const look = resolveLoader(appearance?.loader);
+    const dash = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "" });
+    const color = props.color ?? look.color ?? dash.accent;
+    const px = props.size ?? look.px;
+    const kind = props.kind ?? look.kind;
+    const palette = resolveWidgetPalette(appearance, { scheme, accent: color });
+    const t = useLoop(look.periodMs);
+    const label = props.label ?? (props.moment ? look.text[props.moment] : "");
+    const mark = kind === "pulse" ? _jsx(Pulse, { px: px, color: color, t: t }) :
+        kind === "ring" ? _jsx(Ring, { px: px, color: color, t: t, track: palette.border }) :
+            kind === "bars" ? _jsx(Bars, { px: px, color: color, t: t }) :
+                kind === "mark" ? _jsx(Mark, { px: px, color: color, t: t, logoUrl: dash.logoUrl ?? "" }) :
+                    _jsx(Dots, { px: px, color: color, t: t });
+    return (_jsxs(View, { accessibilityRole: "progressbar", accessibilityLabel: label || "Loading", style: { flexDirection: props.stacked ? "column" : "row", alignItems: "center", gap: props.stacked ? 8 : 10 }, children: [mark, label ? (_jsx(Text, { style: { color: palette.muted, fontSize: Math.max(12, Math.round(px * 0.65)), fontWeight: "600" }, children: label })) : null] }));
+}

package/dist/react-native/ui.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
+import { Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
 import { useGraineAgent } from "./index.js";
+import { GraineLoader } from "./loader.js";
 import { resolveNativeAppearance } from "./appearance.js";
 const DARK = {
     surface: "#17161A",
@@ -40,6 +41,8 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
     const [draft, setDraft] = useState("");
     const scrollRef = useRef(null);
     const last = messages[messages.length - 1];
+    const waiting = connecting;
+    const waitingMoment = "connecting";
     const status = error
         ? "unavailable"
         : connecting ? "connecting…"
@@ -74,7 +77,7 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
         ], children: [expanded && (_jsxs(View, { style: styles.panel, children: [_jsxs(ScrollView, { ref: scrollRef, style: styles.transcript, contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: "I can see what you're working on \u2014 ask me anything, or I'll step in if you get stuck." })), messages.map((m, i) => (_jsx(View, { style: [
                                     styles.bubble,
                                     m.role === "agent" ? styles.agentBubble : [styles.customerBubble, { backgroundColor: accent }],
-                                ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, children: _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { style: styles.input, value: draft, onChangeText: setDraft, placeholder: "Type a message", placeholderTextColor: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && caption?.text ? (_jsx(View, { style: styles.captionWrap, children: _jsx(Text, { numberOfLines: 3, style: [styles.caption, caption.live && styles.captionLive], children: caption.text }) })) : null, _jsxs(View, { style: styles.bar, children: [avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.avatarImage, accessibilityIgnoresInvertColors: true })) : (_jsx(View, { style: [styles.avatar, { backgroundColor: accent }], children: _jsx(Text, { style: styles.avatarGlyph, children: "\u2726" }) })), _jsxs(Pressable, { onPress: () => setExpanded((v) => !v), style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), _jsx(Text, { style: styles.status, children: status })] }), connecting ? _jsx(ActivityIndicator, { size: "small", color: accent }) : null, _jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, muted && styles.glyphOnAccent], children: muted ? "🔇" : "🎙" }) }), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] })] }));
+                                ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, children: _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { style: styles.input, value: draft, onChangeText: setDraft, placeholder: "Type a message", placeholderTextColor: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && caption?.text ? (_jsx(View, { style: styles.captionWrap, children: _jsx(Text, { numberOfLines: 3, style: [styles.caption, caption.live && styles.captionLive], children: caption.text }) })) : null, _jsxs(View, { style: styles.bar, children: [avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.avatarImage, accessibilityIgnoresInvertColors: true })) : (_jsx(View, { style: [styles.avatar, { backgroundColor: accent }], children: _jsx(Text, { style: styles.avatarGlyph, children: "\u2726" }) })), _jsxs(Pressable, { onPress: () => setExpanded((v) => !v), style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), waiting ? null : (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, muted && styles.glyphOnAccent], children: muted ? "🔇" : "🎙" }) }), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] }))] })] }));
 }
 export const GraineLauncher = GraineAgentBar;
 const makeStyles = (t) => StyleSheet.create({

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

@@ -35,7 +35,9 @@ export interface GraineConnectivity {
     attempt: number;
     reason?: string;
 }
+export type GrainePhase = "idle" | "connecting" | "reconnecting" | "thinking" | "speaking" | "listening";
 export interface GraineVoiceApi {
+    phase: GrainePhase;
     connectivity: GraineConnectivity;
     retry: () => void;
     connected: boolean;

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

@@ -17,6 +17,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const [muted, setMutedState] = useState(false);
     const [ready, setReady] = useState(false);
     const [captions, setCaptions] = useState([]);
+    const [awaitingAgent, setAwaitingAgent] = useState(false);
     const [captionsOn, setCaptionsOn] = useState(true);
     const foldCaption = useCallback((next) => {
         setCaptions((prev) => {
@@ -235,6 +236,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     endedNotifiedRef.current = false;
                 setConnected(!!msg.connected);
                 setConnecting(!!msg.connecting);
+                client.emit?.("call_state", { connected: !!msg.connected, connecting: !!msg.connecting });
                 if (!msg.connected && !msg.connecting)
                     startedRef.current = false;
                 onCallState?.({ connected: !!msg.connected, connecting: !!msg.connecting });
@@ -248,8 +250,19 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     text: String(msg.text ?? ""),
                     live: !!msg.live,
                 };
+                if (line.role === "customer" && !line.live)
+                    setAwaitingAgent(true);
+                if (line.role === "agent")
+                    setAwaitingAgent(false);
                 foldCaption(line);
                 onCaption?.(line);
+                client.emit?.("caption", line);
+                if (line.role === "agent")
+                    client.emit?.("agent_speaking", true);
+                return;
+            }
+            case "graine:widget-pending": {
+                client.emit?.("widget_pending", msg.widget || {});
                 return;
             }
             case "graine:ended":
@@ -285,7 +298,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 lastCaption = captions.length ? captions[captions.length - 1] : null;
+    const phase = connectivity.state === "failed" || connectivity.state === "retrying" ? "reconnecting"
+        : connecting || (!ready && !!voiceAgentId) ? "connecting"
+            : !connected ? "idle"
+                : lastCaption?.role === "agent" && lastCaption.live ? "speaking"
+                    : awaitingAgent ? "thinking"
+                        : "listening";
     const api = {
+        phase,
         connected,
         connecting,
         muted,
@@ -298,6 +319,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         start: useCallback(() => {
             setConnecting(true);
             setCaptions([]);
+            setAwaitingAgent(false);
             client.clearPendingWidget();
             if (!ready) {
                 pendingStartRef.current = true;

package/dist/react-native/widget.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useContext, useState } from "react";
 import { Image, Modal, Platform, Pressable, ScrollView, Text, View, useColorScheme } from "react-native";
 import { Ctx, useGraineWidget } from "./index.js";
+import { GraineLoader } from "./loader.js";
 import { resolveNativeAppearance, resolveWidgetPalette } from "./appearance.js";
-import { PLATFORM_GRAMMAR, resolvePlatform, resolveWidgetLook } from "../protocol.js";
+import { PLATFORM_GRAMMAR, manySummary, resolveLoader, resolvePlatform, resolveWidgetLook, widgetSurface } from "../protocol.js";
 function tint(hex, alpha) {
     const m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim());
     if (!m)
@@ -14,12 +15,13 @@ function tint(hex, alpha) {
 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, }) {
+function WidgetRow({ row, variant, look, grammar, theme, accent, radius, picked, onPick, }) {
+    const many = picked !== null;
     const r = Math.max(10, radius - 6);
     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 rowIsButton = many || look.button === "row";
     const outline = look.button === "outline";
     const label = row.unavailable ? "Unavailable" : row.selectLabel;
     const a11y = `${row.selectLabel}: ${row.title}`;
@@ -38,6 +40,11 @@ function WidgetRow({ row, variant, look, grammar, theme, accent, radius, onPick,
                 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 tick = (_jsx(View, { style: {
+            width: 22, height: 22, borderRadius: 999, alignItems: "center", justifyContent: "center",
+            backgroundColor: picked ? accent : "transparent",
+            borderWidth: picked ? 0 : 1.5, borderColor: theme.border,
+        }, children: picked ? _jsx(Text, { style: { color: theme.onAccent, fontSize: 12, fontWeight: "800" }, children: "\u2713" }) : 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,
@@ -52,14 +59,14 @@ function WidgetRow({ row, variant, look, grammar, theme, accent, radius, onPick,
     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,
+        return wrap(_jsxs(_Fragment, { children: [image({ width: "100%", height: HERO_HEIGHT[look.imageSize] }), _jsxs(View, { style: { gap: 3 }, children: [badge, titleLine(true), facts, many ? null : rowIsButton ? null : button(true)] }), many ? _jsx(View, { style: { position: "absolute", top: pad + 6, right: pad + 6 }, children: tick }) : null] }), {
+            borderRadius: r, borderWidth: picked ? 2 : 1, borderColor: picked ? accent : 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)] }), {
+        return wrap(_jsxs(_Fragment, { children: [image({ width: t, height: t }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 2 }, children: [titleLine(false), facts] }), many ? tick : 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,
@@ -67,21 +74,23 @@ function WidgetRow({ row, variant, look, grammar, theme, accent, radius, onPick,
         });
     }
     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,
+        return wrap(_jsxs(_Fragment, { children: [_jsxs(View, { style: { flex: 1, minWidth: 0, gap: 2 }, children: [badge, titleLine(false), facts] }), many ? tick : rowIsButton ? null : button(false)] }), {
+            borderRadius: r, borderWidth: picked ? 2 : 1, borderColor: picked ? accent : theme.border,
             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,
+    return wrap(_jsxs(_Fragment, { children: [image({ width: t, height: t }), _jsxs(View, { style: { flex: 1, minWidth: 0, gap: 3 }, children: [badge, titleLine(false), facts] }), many ? tick : rowIsButton ? null : button(false)] }), {
+        borderRadius: r, borderWidth: picked ? 2 : 1, borderColor: picked ? accent : theme.border, padding: pad,
         opacity: row.unavailable ? 0.55 : 1, flexDirection: "row", gap, alignItems: "center",
     });
 }
-function AnsweredLine({ answered, theme, accent, radius, onClear }) {
+function AnsweredLine({ answered, theme, accent, radius, awaiting, onClear }) {
     const d = (answered.data || {});
+    const appearance = useContext(Ctx)?.appearance ?? null;
+    const loaderText = resolveLoader(appearance?.loader).text.thinking;
     const title = String(d.name || d.title || d.label || d.slot || "").trim();
     const detail = [String(d.price || ""), String(d.day || "")].filter(Boolean).join(" · ");
     if (!title && !detail)
@@ -93,14 +102,15 @@ function AnsweredLine({ answered, theme, accent, radius, onClear }) {
         }, children: [_jsx(View, { style: {
                     width: 26, height: 26, borderRadius: 999, backgroundColor: tint(accent, 0.18),
                     alignItems: "center", justifyContent: "center",
-                }, children: _jsx(Text, { style: { color: accent, fontSize: 14, fontWeight: "800" }, children: "✓" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: 13.5, fontWeight: "700" }, children: title || detail }), title && detail ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: 11.5, fontWeight: "600" }, children: detail })) : null] }), _jsx(Pressable, { onPress: onClear, accessibilityRole: "button", accessibilityLabel: "Clear what I chose", hitSlop: 10, style: { minHeight: 44, justifyContent: "center", paddingHorizontal: 4 }, children: _jsx(Text, { style: { color: theme.muted, fontSize: 12, fontWeight: "700" }, children: "Clear" }) })] }));
+                }, children: awaiting ? _jsx(GraineLoader, { size: 14 }) : (_jsx(Text, { style: { color: accent, fontSize: 14, fontWeight: "800" }, children: "✓" })) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: 13.5, fontWeight: "700" }, children: title || detail }), awaiting ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: 11.5, fontWeight: "600" }, children: loaderText })) : title && detail ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: 11.5, fontWeight: "600" }, children: detail })) : null] }), awaiting ? null : (_jsx(Pressable, { onPress: onClear, accessibilityRole: "button", accessibilityLabel: "Clear what I chose", hitSlop: 10, style: { minHeight: 44, justifyContent: "center", paddingHorizontal: 4 }, children: _jsx(Text, { style: { color: theme.muted, fontSize: 12, fontWeight: "700" }, children: "Clear" }) }))] }));
 }
 export function GraineWidget(props) {
-    const { widget, answered, submit, dismiss } = useGraineWidget();
+    const { widget, answered, loading, awaitingReply, submit, dismiss } = useGraineWidget();
     const appearance = useContext(Ctx)?.appearance ?? null;
     const scheme = useColorScheme();
     const [pagerWidth, setPagerWidth] = useState(0);
     const [page, setPage] = useState(0);
+    const [ticked, setTicked] = useState([]);
     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: "" });
@@ -110,7 +120,23 @@ export function GraineWidget(props) {
         ...resolveWidgetPalette(appearance, { scheme, accent }),
         ...(props.theme ?? {}),
     };
-    const chosen = answered ? (_jsx(AnsweredLine, { answered: answered, theme: theme, accent: accent, radius: radius, onClear: dismiss })) : null;
+    const chosen = answered ? (_jsx(AnsweredLine, { answered: answered, theme: theme, accent: accent, radius: radius, awaiting: awaitingReply, onClear: dismiss })) : null;
+    if (!widget && loading) {
+        const loader = resolveLoader(appearance?.loader);
+        const kindSurface = widgetSurface(loading.kind);
+        const pendingSurface = kindSurface;
+        const big = pendingSurface === "screen" ? 34 : pendingSurface === "sheet" ? 26 : undefined;
+        const mark = (_jsx(View, { style: { alignItems: "center", gap: 10 }, children: _jsx(GraineLoader, { moment: "component", size: big, stacked: true }) }));
+        const bone = (w, h) => (_jsx(View, { style: { width: w, height: h, borderRadius: 8, backgroundColor: tint(theme.border, 0.6) } }));
+        const bones = (rows) => (_jsx(View, { style: { gap: 10, opacity: 0.55 }, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: Array.from({ length: rows }, (_, i) => (_jsxs(View, { style: { borderRadius: Math.max(10, radius - 6), borderWidth: 1, borderColor: theme.border, padding: 10, flexDirection: "row", gap: 10, alignItems: "center" }, children: [bone(72, 72), _jsxs(View, { style: { flex: 1, gap: 8 }, children: [bone("70%", 12), bone("40%", 12), bone("55%", 10)] })] }, i))) }));
+        if (pendingSurface === "screen") {
+            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsxs(View, { style: { flex: 1, backgroundColor: theme.surface, paddingTop: 56, paddingHorizontal: 18 }, children: [_jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Close and keep talking", hitSlop: 10, style: { width: 44, height: 44, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: tint(theme.border, 0.4) }, children: _jsx(Text, { style: { color: theme.text, fontSize: 20, fontWeight: "600" }, children: "\u00D7" }) }), _jsx(View, { style: { flex: 1, justifyContent: "center", paddingBottom: loader.skeleton ? 24 : 72 }, children: mark }), loader.skeleton ? bones(3) : null] }) })] }));
+        }
+        if (pendingSurface === "sheet") {
+            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", 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: 18 }, children: [_jsx(View, { style: { alignItems: "center" }, children: _jsx(View, { style: { width: grammar.grabber.width, height: grammar.grabber.height, borderRadius: 999, backgroundColor: theme.border } }) }), _jsx(View, { style: { paddingVertical: loader.skeleton ? 10 : 34 }, children: mark }), loader.skeleton ? bones(2) : null] })] }) })] }));
+        }
+        return (_jsxs(_Fragment, { children: [chosen, _jsx(View, { style: { backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border, paddingHorizontal: 14, paddingVertical: 14, marginBottom: 8, alignItems: "center" }, children: _jsx(GraineLoader, { moment: "component" }) })] }));
+    }
     if (!widget)
         return chosen;
     const data = (widget.data ?? {});
@@ -177,6 +203,17 @@ export function GraineWidget(props) {
     const drawable = isProducts || isChips || isCalendar;
     const surface = drawable ? look.surface : "card";
     const pick = (it) => submit(normalised.toSubmit(it), normalised.toSay(it));
+    const many = look.select === "many" && drawable;
+    const submitMany = (items) => {
+        const titles = items.map((it) => String(it.title ?? it.name ?? "")).filter(Boolean);
+        submit({
+            items: items.map((it) => normalised.toSubmit(it)),
+            ids: items.map((it) => String(it.id ?? "")).join(","),
+            titles: titles.join(", "),
+            count: items.length,
+        }, manySummary(titles, normalised.selectLabel.toLowerCase()));
+        setTicked([]);
+    };
     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}`);
                     const slots = Array.isArray(d?.slots) ? d.slots.map(String) : [];
@@ -188,7 +225,12 @@ export function GraineWidget(props) {
                                         paddingHorizontal: 14,
                                     }, children: _jsx(Text, { style: { color: theme.text, fontSize: 13.5, fontWeight: "600" }, children: slot }) }, `${slot}-${si}`))) })] }, `${dayLabel}-${di}`));
                 })] })) : 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 toggle = (id) => setTicked((cur) => cur.includes(id) ? cur.filter((x) => x !== id)
+                : cur.length >= look.maxSelect ? [...cur.slice(1), id]
+                    : [...cur, id]);
+            const draw = (row, i, variant) => (_jsx(WidgetRow, { row: row, variant: variant, look: look, grammar: grammar, theme: theme, accent: accent, radius: radius, picked: many ? ticked.includes(row.id) : null, onPick: () => many
+                    ? toggle(row.id)
+                    : 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;
@@ -201,16 +243,32 @@ export function GraineWidget(props) {
             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")) });
+            const body = look.preset === "gallery" ? _jsx(View, { style: { gap }, children: rows.map((row, i) => draw(row, i, "hero")) })
+                : look.preset === "list" ? _jsx(View, { children: rows.map((row, i) => draw(row, i, "list")) })
+                    : look.preset === "compact" ? _jsx(View, { style: { gap }, children: rows.map((row, i) => draw(row, i, "compact")) })
+                        : _jsx(View, { style: { gap }, children: rows.map((row, i) => draw(row, i, "row")) });
+            if (!many)
+                return body;
+            const chosenRows = ticked
+                .map((id) => ({ row: rows.find((r) => r.id === id), i: rows.findIndex((r) => r.id === id) }))
+                .filter((x) => !!x.row);
+            return (_jsxs(_Fragment, { children: [body, _jsx(Pressable, { disabled: chosenRows.length < 2, onPress: () => {
+                            const items = chosenRows.map(({ row, i }) => ({
+                                ...normalised.items[i], id: row.id, title: row.title, price: row.price,
+                            }));
+                            submitMany(items);
+                        }, accessibilityRole: "button", accessibilityLabel: chosenRows.length < 2
+                            ? `Pick ${2 - chosenRows.length} more to ${normalised.selectLabel.toLowerCase()}`
+                            : `${normalised.selectLabel} ${chosenRows.length}`, style: {
+                            marginTop: 12, minHeight: 48, borderRadius: grammar.pillButtons ? 999 : grammar.buttonRadius,
+                            alignItems: "center", justifyContent: "center",
+                            backgroundColor: chosenRows.length < 2 ? tint(theme.border, 0.5) : accent,
+                        }, children: _jsx(Text, { style: {
+                                color: chosenRows.length < 2 ? theme.muted : theme.onAccent,
+                                fontSize: 14.5, fontWeight: "700",
+                            }, children: chosenRows.length < 2
+                                ? `Pick ${2 - chosenRows.length} more to ${normalised.selectLabel.toLowerCase()}`
+                                : `${normalised.selectLabel} ${chosenRows.length}` }) })] }));
         })()) : 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.33.4",
+  "version": "0.33.6",
   "type": "module",
   "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",