@graineai/inapp-react-native 0.33.3 → 0.33.5

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

@@ -1,6 +1,17 @@
 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 { 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 } 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,5 +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 } 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";
@@ -64,3 +66,116 @@ 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 WidgetSelect = "one" | "many";
+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;
+    select?: WidgetSelect;
+    maxSelect?: number;
+}
+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 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 {
+    preset: WidgetPreset;
+    imageSize: WidgetImageSize;
+    density: WidgetDensity;
+    button: WidgetButton;
+    facts: boolean;
+    columns: 1 | 2;
+    surface: WidgetSurface;
+    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;
+    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">;
+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

@@ -41,3 +41,223 @@ 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 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))
+        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;
+    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 = {
+    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",
+        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 },
+    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";
+}
+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 ?? true,
+    };
+}
+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,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, type WidgetSelectAction } from "../protocol.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 export type { GraineFabProps, GraineTouchCaptureProps } from "./fab.js";
 export { widgetSurface } from "../protocol.js";
@@ -68,11 +69,15 @@ export type GraineEvent = {
     screen: string;
     detail: string;
 };
+export declare const PENDING_WIDGET_MS = 12000;
+export declare const AWAITING_REPLY_MS = 12000;
 export interface GraineWidget {
     id: string;
     kind: string;
     data: Record<string, unknown>;
     fallbackText: string;
+    style?: WidgetStyle;
+    onSelect?: WidgetSelectAction;
 }
 export interface Caption {
     role: "agent" | "customer";
@@ -130,6 +135,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,13 @@ 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, 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 Ctx = createContext(null);
 let defaultClient = null;
 export function setDefaultClient(client) {
@@ -396,36 +398,126 @@ export function useGraineWidget() {
             kind: String(w.kind || ""),
             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 [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);
+    }, []);
+    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) => {
+            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;
+            if (loadingTimer.current) {
+                clearTimeout(loadingTimer.current);
+                loadingTimer.current = null;
+            }
+            setLoading(null);
+            setClosed(null);
             setWidget(next);
             setAnswered(null);
         });
+        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 (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/voice-launcher.d.ts

@@ -23,9 +23,23 @@ 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 type GrainePhase = "idle" | "connecting" | "reconnecting" | "thinking" | "speaking" | "listening";
 export interface GraineVoiceApi {
+    phase: GrainePhase;
+    connectivity: GraineConnectivity;
+    retry: () => void;
     connected: boolean;
     connecting: boolean;
     muted: boolean;
@@ -40,4 +54,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,7 +4,7 @@ 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);
@@ -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) => {
@@ -38,6 +39,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;
@@ -75,6 +158,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 " +
@@ -132,6 +216,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) {
@@ -144,6 +232,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)
@@ -159,14 +249,30 @@ 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":
+                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") });
@@ -191,7 +297,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,
@@ -204,6 +318,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         start: useCallback(() => {
             setConnecting(true);
             setCaptions([]);
+            setAwaitingAgent(false);
             client.clearPendingWidget();
             if (!ready) {
                 pendingStartRef.current = true;
@@ -211,7 +326,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 });
@@ -223,6 +340,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;
@@ -243,6 +363,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);
@@ -286,5 +407,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,10 @@
 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 { GraineLoader } from "./loader.js";
 import { resolveNativeAppearance, resolveWidgetPalette } from "./appearance.js";
-import { widgetSurface } 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)
@@ -11,38 +12,85 @@ 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, picked, onPick, }) {
+    const many = picked !== null;
     const r = Math.max(10, radius - 6);
-    return (_jsxs(View, { style: {
-            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 }) }))] }));
+    const tight = look.density === "compact";
+    const pad = (variant === "list" ? (tight ? 6 : 9) : (tight ? 7 : 10)) + grammar.padBoost;
+    const gap = tight ? 6 : 10;
+    const rowIsButton = many || 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 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,
+            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, 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] }), 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,
+            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] }), 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] }), 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)
@@ -54,20 +102,38 @@ 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: "" });
-    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 ?? {}),
     };
-    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 pendingSurface = loader.skeleton ? widgetSurface(loading.kind) : "card";
+        const bone = (w, h, extra = {}) => (_jsx(View, { style: { width: w, height: h, borderRadius: 8, backgroundColor: tint(theme.border, 0.6), ...extra } }));
+        const bones = (_jsxs(View, { style: { gap: 10 }, accessibilityLabel: loader.text.component, children: [[0, 1, 2].map((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))), _jsx(View, { style: { alignItems: "center", paddingTop: 6 }, children: _jsx(GraineLoader, { moment: "component" }) })] }));
+        if (pendingSurface === "screen") {
+            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", onRequestClose: dismiss, transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, children: _jsx(View, { style: { flex: 1, backgroundColor: theme.surface, paddingTop: 64, paddingHorizontal: 18 }, children: bones }) })] }));
+        }
+        if (pendingSurface === "sheet") {
+            return (_jsxs(_Fragment, { children: [chosen, _jsx(Modal, { visible: true, animationType: "fade", transparent: true, presentationStyle: "overFullScreen", statusBarTranslucent: true, onRequestClose: dismiss, children: _jsx(View, { style: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "flex-end" }, children: _jsx(View, { style: { backgroundColor: theme.surface, borderTopLeftRadius: Math.max(20, radius), borderTopRightRadius: Math.max(20, radius), padding: 18, paddingBottom: 28 }, children: bones }) }) })] }));
+        }
+        return (_jsxs(_Fragment, { children: [chosen, _jsx(View, { style: { backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border, paddingHorizontal: 14, paddingVertical: 12, marginBottom: 8 }, children: _jsx(GraineLoader, { moment: "component" }) })] }));
+    }
     if (!widget)
         return chosen;
     const data = (widget.data ?? {});
@@ -132,8 +198,19 @@ 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 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) : [];
@@ -144,7 +221,52 @@ 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 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;
+                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}`))) }));
+            }
+            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);
                 return (_jsx(Pressable, { onPress: () => submit(isQuickActions ? { id, label } : { chosen: id, label }, `I'll go with ${label}.`), accessibilityRole: "button", accessibilityLabel: label, style: {
@@ -155,7 +277,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 +289,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.3",
+  "version": "0.33.5",
   "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",
@@ -34,7 +34,7 @@
     "typecheck": "tsc -p tsconfig.build.json --noEmit",
     "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/render.test.mjs"
+    "test:render": "node --import ./test/harness/register.mjs --test test/render/*.test.mjs"
   },
   "peerDependencies": {
     "@jambonz/client-sdk-react-native": "^0.1.4",