@graineai/inapp-react-native 0.31.0 → 0.33.0

package/dist/index.d.ts

@@ -1,4 +1,7 @@
-export type { ActionHandler, AppActionRequest, AppActionResult, AppEvent, ScreenContext, ScreenField, } from "./protocol.js";
+export type { ActionHandler, AppActionRequest, AppActionResult, AppEvent, ScreenContext, ScreenField, WidgetSurface, } from "./protocol.js";
+export { widgetSurface } from "./protocol.js";
+export { GraineWidget } from "./react-native/widget.js";
+export type { GraineWidgetProps, GraineWidgetTheme } from "./react-native/widget.js";
 export { GraineInAppClient, type GraineInAppOptions, type SessionConfig, type ActionDiagnosis, } from "./client.js";
 export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, type FrictionConfig, type FrictionScreenRules, type FrictionNudge, type FrictionSignal, type FrictionKind, } from "./friction.js";
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, type AudioAdapter, type VoiceSessionOptions, } from "./voice.js";
@@ -8,7 +11,7 @@ export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGr
 export { requestMicrophonePermission } from "./react-native/permissions.js";
 export { GraineFab, GraineTouchCapture, TAP_MAX_MOVE_PX, TAP_MAX_MS, type GraineFabProps, type GraineTouchCaptureProps, } from "./react-native/fab.js";
 export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";
-export { resolveNativeAppearance, type NativeAppearance, type NativeAppearanceFallback, } from "./react-native/appearance.js";
+export { resolveNativeAppearance, type NativeAppearance, type NativeAppearanceFallback, resolveWidgetPalette, type WidgetPalette, type WidgetMode, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, type RtcVoiceState, type RtcVoiceErrorCode, type RtcVoiceSession, type RtcVoiceOptions, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, type GraineAgentBarProps, type GraineLauncherProps, type GraineBarTheme, } from "./react-native/ui.js";
 export { GraineVoiceLauncher, CAPTION_HISTORY, type GraineVoiceLauncherProps, type GraineVoiceApi, } from "./react-native/voice-launcher.js";

package/dist/index.js

@@ -1,3 +1,5 @@
+export { widgetSurface } from "./protocol.js";
+export { GraineWidget } from "./react-native/widget.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";
@@ -7,7 +9,7 @@ export { GraineProvider, useGraineAgent, useGraineScreen, useGraineAction, useGr
 export { requestMicrophonePermission } from "./react-native/permissions.js";
 export { GraineFab, GraineTouchCapture, TAP_MAX_MOVE_PX, TAP_MAX_MS, } from "./react-native/fab.js";
 export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";
-export { resolveNativeAppearance, } from "./react-native/appearance.js";
+export { resolveNativeAppearance, resolveWidgetPalette, } from "./react-native/appearance.js";
 export { RtcVoiceSessionController, RtcVoiceError, } from "./react-native/voice-rtc.js";
 export { GraineAgentBar, GraineLauncher, } from "./react-native/ui.js";
 export { GraineVoiceLauncher, CAPTION_HISTORY, } from "./react-native/voice-launcher.js";

package/dist/protocol.d.ts

@@ -62,3 +62,5 @@ export declare const ACTION_DEADLINE_MS = 6000;
 export declare const CONTEXT_THROTTLE_MS = 400;
 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;

package/dist/protocol.js

@@ -29,3 +29,15 @@ export function resolveWidgetImages(data, baseUrl) {
     }
     return out;
 }
+const SURFACE = {
+    product_list: "screen",
+    products: "screen",
+    plan_comparison: "sheet",
+    choices: "sheet",
+    quick_actions: "sheet",
+    calendar_slots: "sheet",
+    info_card: "card",
+};
+export function widgetSurface(kind) {
+    return SURFACE[String(kind ?? "").trim().toLowerCase()] ?? "card";
+}

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

@@ -12,3 +12,16 @@ export interface NativeAppearanceFallback {
     origin?: string;
 }
 export declare function resolveNativeAppearance(appearance: Record<string, any> | null | undefined, fallback: NativeAppearanceFallback): NativeAppearance;
+export type WidgetMode = "light" | "dark";
+export interface WidgetPalette {
+    surface: string;
+    border: string;
+    text: string;
+    muted: string;
+    onAccent: string;
+    mode: WidgetMode;
+}
+export declare function resolveWidgetPalette(appearance: Record<string, any> | null | undefined, opts?: {
+    scheme?: "light" | "dark" | null;
+    accent?: string;
+}): WidgetPalette;

package/dist/react-native/appearance.js

@@ -27,3 +27,25 @@ export function resolveNativeAppearance(appearance, fallback) {
     const radius = clamp(numeric(a.radius) ?? numeric(fallback.radius) ?? 18, max);
     return { accent, heading, logoUrl, radius };
 }
+const LIGHT = { surface: "#FFFFFF", border: "#E5E4E0", text: "#101318", muted: "#5F6672" };
+const DARK = { surface: "#17181B", border: "#2C2E33", text: "#F5F5F4", muted: "#A0A5AE" };
+function luminance(hex) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim());
+    if (!m)
+        return 0;
+    const n = parseInt(m[1], 16);
+    const channel = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * channel((n >> 16) & 255) + 0.7152 * channel((n >> 8) & 255) + 0.0722 * channel(n & 255);
+}
+export function resolveWidgetPalette(appearance, opts) {
+    const want = String((appearance || {}).theme ?? "auto").trim().toLowerCase();
+    const mode = want === "dark" ? "dark"
+        : want === "light" ? "light"
+            : opts?.scheme === "dark" ? "dark" : "light";
+    const set = mode === "dark" ? DARK : LIGHT;
+    const onAccent = luminance(opts?.accent ?? "") > 0.45 ? "#101318" : "#FFFFFF";
+    return { ...set, onAccent, mode };
+}

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

@@ -4,6 +4,8 @@ import { type AudioAdapter, type VoiceSessionOptions } from "../voice.js";
 import type { ActionHandler, ScreenContext, ScreenField } from "../protocol.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 export type { GraineFabProps, GraineTouchCaptureProps } from "./fab.js";
+export { widgetSurface } from "../protocol.js";
+export type { WidgetSurface } from "../protocol.js";
 import type { FrictionConfig } from "../friction.js";
 import { type LauncherInset, type LauncherVisibility } from "./navigation.js";
 interface GraineContextValue {
@@ -123,6 +125,11 @@ export declare function useGraineHighlight(name: string): {
 };
 export declare function useGraineWidget(): {
     widget: GraineWidget | null;
+    answered: {
+        widget: GraineWidget;
+        data: Record<string, unknown>;
+        summary: string;
+    } | null;
     submit: (data: Record<string, unknown>, summary: string) => void;
     dismiss: () => void;
 };

package/dist/react-native/index.js

@@ -6,6 +6,7 @@ import { VoiceSession } from "../voice.js";
 import { resolveWidgetImages } 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 Ctx = createContext(null);
 let defaultClient = null;
@@ -398,14 +399,17 @@ export function useGraineWidget() {
         }
         : null, [client]);
     const [widget, setWidget] = useState(() => adopt(client.pendingWidget));
+    const [answered, setAnswered] = useState(null);
     useEffect(() => {
         const pending = adopt(client.pendingWidget);
         if (pending)
             setWidget((cur) => (cur && cur.id === pending.id ? cur : pending));
         return client.on("widget", (w) => {
             const next = adopt(w);
-            if (next)
-                setWidget(next);
+            if (!next)
+                return;
+            setWidget(next);
+            setAnswered(null);
         });
     }, [client, adopt]);
     const submit = useCallback((data, summary) => {
@@ -414,12 +418,14 @@ export function useGraineWidget() {
         client.submitWidget(widget.id, data, summary);
         client.clearPendingWidget();
         setWidget(null);
+        setAnswered({ widget, data, summary });
     }, [client, widget]);
     const dismiss = useCallback(() => {
         client.clearPendingWidget();
         setWidget(null);
+        setAnswered(null);
     }, [client]);
-    return { widget, submit, dismiss };
+    return { widget, answered, submit, dismiss };
 }
 export function useGraineAction(name, handler) {
     const client = useGraineClient();

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

@@ -0,0 +1,14 @@
+import React from "react";
+export interface GraineWidgetTheme {
+    surface: string;
+    border: string;
+    text: string;
+    muted: string;
+    onAccent: string;
+}
+export interface GraineWidgetProps {
+    theme?: Partial<GraineWidgetTheme>;
+    accent?: string;
+    radius?: number;
+}
+export declare function GraineWidget(props: GraineWidgetProps): React.JSX.Element | null;

package/dist/react-native/widget.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image, Modal, Pressable, ScrollView, Text, View, useColorScheme } from "react-native";
+import { useGraineAgent, useGraineWidget } from "./index.js";
+import { resolveNativeAppearance, resolveWidgetPalette } from "./appearance.js";
+import { widgetSurface } from "../protocol.js";
+function tint(hex, alpha) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim());
+    if (!m)
+        return `rgba(120,140,170,${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 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 }) }))] }));
+}
+function AnsweredLine({ answered, theme, accent, radius, onClear }) {
+    const d = (answered.data || {});
+    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)
+        return null;
+    return (_jsxs(View, { style: {
+            backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border,
+            paddingHorizontal: 12, paddingVertical: 10, marginBottom: 8,
+            flexDirection: "row", alignItems: "center", gap: 10,
+        }, 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" }) })] }));
+}
+export function GraineWidget(props) {
+    const { widget, answered, submit, dismiss } = useGraineWidget();
+    const { appearance } = useGraineAgent();
+    const scheme = useColorScheme();
+    const dash = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "" });
+    const accent = props.accent ?? dash.accent;
+    const radius = props.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;
+    if (!widget)
+        return chosen;
+    const data = (widget.data ?? {});
+    const options = Array.isArray(data?.options)
+        ? data.options
+        : widget.kind === "quick_actions" && Array.isArray(data?.actions)
+            ? data.actions
+            : [];
+    const isQuickActions = widget.kind === "quick_actions" && options.length > 0;
+    const normalised = (() => {
+        if (widget.kind === "plan_comparison" && Array.isArray(data?.plans)) {
+            return {
+                items: data.plans.map((pl) => ({
+                    id: pl?.id, title: pl?.name, subtitle: pl?.badge,
+                    price: pl?.price ? `${pl.price}${pl.priceSuffix ?? ""}` : "",
+                    facts: Array.isArray(pl?.facts)
+                        ? pl.facts.map((f) => (f?.label ? `${f.label} ${f.value}` : String(f?.value ?? "")))
+                        : [],
+                    selectLabel: pl?.selectLabel,
+                })),
+                selectLabel: "Select",
+                toSubmit: (it) => ({ id: it.id, name: it.title, price: it.price }),
+                toSay: (it) => `I'll take ${it.title}${it.price ? ` at ${it.price}` : ""}.`,
+            };
+        }
+        if (widget.kind === "info_card" && (data?.title || data?.summary)) {
+            return {
+                items: [{
+                        id: "card", title: data.title, subtitle: data.category, imageUrl: data.imageUrl,
+                        facts: [
+                            data.summary,
+                            ...(Array.isArray(data?.facts)
+                                ? data.facts.map((f) => (f?.label ? `${f.label} ${f.value}` : String(f?.value ?? "")))
+                                : []),
+                        ].filter(Boolean),
+                    }],
+                selectLabel: String(data?.actionLabel || "Tell me more"),
+                toSubmit: () => ({ action: String(data?.actionLabel || "Tell me more") }),
+                toSay: () => String(data?.actionLabel || "Tell me more about this."),
+            };
+        }
+        const items = Array.isArray(data?.items) ? data.items : [];
+        return {
+            items,
+            selectLabel: String(data?.selectLabel || "Choose"),
+            toSubmit: (it) => ({ id: it.id, title: it.title, price: it.price }),
+            toSay: (it) => `I'll take a look at ${it.title}${it.price ? ` at ${it.price}` : ""}.`,
+        };
+    })();
+    const rows = normalised.items.slice(0, 8).map((it, i) => ({
+        id: String(it?.id ?? it?.title ?? i),
+        title: String(it?.title ?? it?.id ?? i),
+        subtitle: it?.subtitle ? String(it.subtitle) : "",
+        price: it?.price ? String(it.price) : "",
+        facts: Array.isArray(it?.facts) ? it.facts.map(String).slice(0, 3) : [],
+        image: it?.imageUrl ? String(it.imageUrl) : "",
+        unavailable: it?.unavailable === true,
+        selectLabel: String(it?.selectLabel || normalised.selectLabel),
+    }));
+    const isProducts = rows.length > 0 && (widget.kind === "product_list" || widget.kind === "products" ||
+        widget.kind === "plan_comparison" || widget.kind === "info_card" || !options.length);
+    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 pick = (it) => submit(normalised.toSubmit(it), normalised.toSay(it));
+    const body = (_jsx(_Fragment, { children: isCalendar ? (_jsxs(View, { style: { gap: 12 }, children: [data.note ? (_jsx(Text, { style: { color: theme.muted, fontSize: 12.5, lineHeight: 18 }, children: String(data.note) })) : null, data.days.slice(0, 4).map((d, di) => {
+                    const dayLabel = String(d?.label ?? d?.id ?? `Day ${di + 1}`);
+                    const slots = Array.isArray(d?.slots) ? d.slots.map(String) : [];
+                    if (!slots.length)
+                        return null;
+                    return (_jsxs(View, { style: { gap: 7 }, children: [_jsx(Text, { style: { color: theme.text, fontSize: 13, fontWeight: "700" }, children: dayLabel }), _jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8 }, children: slots.slice(0, 8).map((slot, si) => (_jsx(Pressable, { onPress: () => submit({ day: dayLabel, slot }, `${dayLabel} at ${slot}, please.`), accessibilityRole: "button", accessibilityLabel: `${dayLabel} at ${slot}`, style: {
+                                        minHeight: 44, justifyContent: "center",
+                                        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) => {
+                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: {
+                        backgroundColor: accent, borderRadius: 999,
+                        minHeight: 44, justifyContent: "center", paddingHorizontal: 16,
+                    }, children: _jsx(Text, { style: { color: theme.onAccent, fontSize: 13.5, fontWeight: "700" }, children: label }) }, `${id}-${i}`));
+            }) })) : (_jsx(Text, { style: { color: theme.text, fontSize: 14, lineHeight: 20 }, children: widget.fallbackText || "The assistant has something to show you." })) }));
+    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: {
+                                    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: {
+                                            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: "×" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [title ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontSize: 18, fontWeight: "800" }, children: title })) : null, prompt ? (_jsx(Text, { numberOfLines: 1, style: { color: theme.muted, fontSize: 12.5, fontWeight: "600", marginTop: 1 }, children: prompt })) : null] })] }), _jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingHorizontal: 18, paddingBottom: 24 }, keyboardShouldPersistTaps: "handled", children: body }), _jsxs(View, { style: {
+                                    paddingHorizontal: 18, paddingTop: 12, paddingBottom: 28,
+                                    borderTopWidth: 1, borderTopColor: theme.border,
+                                }, 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: {
+                                    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: {
+                                            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" }) })] })] }) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [chosen, _jsxs(View, { style: {
+                    backgroundColor: theme.surface, borderRadius: radius, borderWidth: 1, borderColor: theme.border,
+                    paddingHorizontal: 14, paddingVertical: 12, marginBottom: 8,
+                    shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 12, shadowOffset: { width: 0, height: 4 }, elevation: 6,
+                }, children: [title ? (_jsx(Text, { style: { color: theme.text, fontSize: 14.5, fontWeight: "800", marginBottom: 2 }, children: title })) : null, prompt ? (_jsx(Text, { style: { color: theme.muted, fontSize: 12.5, lineHeight: 17, marginBottom: 8 }, children: prompt })) : _jsx(View, { style: { height: 6 } }), body, _jsx(Pressable, { onPress: dismiss, accessibilityRole: "button", accessibilityLabel: "Dismiss", hitSlop: 8, style: { alignSelf: "flex-end", marginTop: 10, minHeight: 44, justifyContent: "center" }, children: _jsx(Text, { style: { color: theme.muted, fontSize: 12.5, fontWeight: "600" }, children: "Dismiss" }) })] })] }));
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "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.",
+  "description": "Graine in-app agent for React Native — an agent that sees the screen your customer is on and can act on it.",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",