@graineai/inapp-react-native 0.36.0 → 0.38.0

package/dist/react-native/index.js

@@ -12,6 +12,10 @@ export { clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX } from "./placement-
 export { widgetSurface } from "../protocol.js";
 export { resolveSurface } from "../protocol.js";
 import { resolveSurface } from "../protocol.js";
+import { sessionDesign } from "../design.js";
+import { fontFamilyFor, sameValue } from "./design-math.js";
+import { facesForDesign, faceKey } from "./fonts.js";
+export { useGraineTheme } from "./use-design.js";
 import { LauncherVisibilityTracker, activeRouteName, } from "./navigation.js";
 export const PENDING_WIDGET_MS = 12000;
 export const AWAITING_REPLY_MS = 12000;
@@ -29,7 +33,7 @@ export function useGraineClient() {
     }
     return client;
 }
-export function GraineProvider({ children, autoConnect = true, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground = true, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs = 0, visibility, client: providedClient, ...options }) {
+export function GraineProvider({ children, autoConnect = true, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground = true, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs = 0, visibility, fonts: fontsProp, loadFont, svg: svgProp, client: providedClient, ...options }) {
     const clientRef = useRef(null);
     if (!clientRef.current) {
         clientRef.current =
@@ -61,6 +65,41 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
         return () => { listenersRef.current.delete(fn); };
     }, []);
     const [appearance, setAppearance] = useState(null);
+    const [design, setDesign] = useState(() => sessionDesign(client.config));
+    const adoptDesign = useCallback((cfg) => {
+        if (!cfg)
+            return;
+        const next = sessionDesign(cfg);
+        setDesign((cur) => (sameValue(cur, next) ? cur : next));
+    }, []);
+    const fontsKey = fontsProp ? JSON.stringify(fontsProp) : "";
+    const fonts = useMemo(() => (fontsKey ? JSON.parse(fontsKey) : null), [fontsKey]);
+    const [faces, setFaces] = useState({});
+    const svgKit = useMemo(() => (svgProp?.Svg && svgProp?.Path ? { Svg: svgProp.Svg, Path: svgProp.Path } : null), [svgProp?.Svg, svgProp?.Path]);
+    const askedRef = useRef(new Set());
+    const loadFontRef = useRef(loadFont);
+    loadFontRef.current = loadFont;
+    const hasLoader = typeof loadFont === "function";
+    useEffect(() => {
+        const load = loadFontRef.current;
+        if (typeof load !== "function")
+            return;
+        let live = true;
+        for (const face of facesForDesign(design, client.opts.baseUrl)) {
+            const key = faceKey(face.family, face.weight);
+            if (fontFamilyFor(face.family, fonts))
+                continue;
+            if (askedRef.current.has(key))
+                continue;
+            askedRef.current.add(key);
+            Promise.resolve()
+                .then(() => load({ [face.name]: face.url }))
+                .then(() => { if (live)
+                setFaces((cur) => (cur[key] === face.name ? cur : { ...cur, [key]: face.name })); })
+                .catch(() => { });
+        }
+        return () => { live = false; askedRef.current.clear(); };
+    }, [client, design, fonts, hasLoader]);
     const [sessionReady, setSessionReady] = useState(false);
     const [connectionQuality, setConnectionQuality] = useState("unknown");
     const [network, setNetwork] = useState("unknown");
@@ -170,6 +209,7 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
                 setError(null);
                 if (client.config?.appearance)
                     setAppearance(client.config.appearance);
+                adoptDesign(client.config);
                 emitEvent({ type: "conversation_started" });
             }),
             client.on("close", (info) => {
@@ -231,6 +271,7 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
                 const cfg = client.config ?? (await client.session());
                 if (cfg?.appearance)
                     setAppearance(cfg.appearance);
+                adoptDesign(cfg);
                 setSessionReady(true);
             }
             catch {
@@ -334,6 +375,10 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
         launcherInset,
         currentScreen,
         appearance,
+        design,
+        fonts,
+        faces,
+        svg: svgKit,
         sessionReady,
         onEvent,
         track: (name, data) => client.track(name, data),
@@ -346,7 +391,7 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
         network,
         setVariables: (vars) => client.setVariables(vars),
     }), [client, connected, connecting, error, open, messages, widgets, muted, agentSpeaking, caption,
-        launcherVisible, launcherInset, currentScreen, onEvent, appearance, sessionReady,
+        launcherVisible, launcherInset, currentScreen, onEvent, appearance, design, fonts, faces, svgKit, sessionReady,
         surface, surfacePolicy, setSurface, connectionQuality, network]);
     const wantsCapture = captureTaps ?? !!fab;
     const body = fab || wantsCapture ? (_jsxs(GraineTouchCapture, { enabled: wantsCapture, children: [children, fab ? _jsx(GraineFab, { ...fab }) : null] })) : children;

package/dist/react-native/loader.js

@@ -3,20 +3,26 @@ 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 { useDesign } from "./use-design.js";
 import { resolveLoader } from "../protocol.js";
 export function useGraineLoader() {
     const appearance = useContext(Ctx)?.appearance ?? null;
+    const design = useDesign();
     const look = resolveLoader(appearance?.loader);
     const dash = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "" });
-    return { ...look, accent: look.color ?? dash.accent };
+    return { ...look, accent: look.color ?? (design.classic ? dash.accent : design.tokens.colors.accent) };
 }
-function useLoop(periodMs) {
+function useLoop(periodMs, running = true) {
     const v = useRef(new Animated.Value(0)).current;
     useEffect(() => {
+        if (!running) {
+            v.setValue(0);
+            return;
+        }
         const loop = Animated.loop(Animated.timing(v, { toValue: 1, duration: periodMs, easing: Easing.linear, useNativeDriver: true }));
         loop.start();
         return () => loop.stop();
-    }, [v, periodMs]);
+    }, [v, periodMs, running]);
     return v;
 }
 function Dots({ px, color, t }) {
@@ -56,18 +62,28 @@ function Mark({ px, color, t, logoUrl }) {
 export function GraineLoader(props) {
     const appearance = useContext(Ctx)?.appearance ?? null;
     const scheme = useColorScheme();
+    const design = useDesign();
     const look = resolveLoader(appearance?.loader);
     const dash = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "" });
-    const color = props.color ?? look.color ?? dash.accent;
+    const color = props.color ?? look.color ?? (design.classic ? dash.accent : design.tokens.colors.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 palette = design.classic
+        ? resolveWidgetPalette(appearance, { scheme, accent: color })
+        : { border: design.tokens.colors.border, muted: design.tokens.colors.textMuted };
+    const t = useLoop(look.periodMs, design.classic || !design.reduceMotion);
     const label = props.label ?? (props.moment ? look.text[props.moment] : "");
+    const labelType = design.classic
+        ? { fontSize: Math.max(12, Math.round(px * 0.65)), fontWeight: "600" }
+        : {
+            fontSize: Math.max(design.tokens.font.scale.caption, Math.round(px * 0.65)),
+            fontWeight: String(design.tokens.font.weights.strong),
+            fontFamily: design.font(design.tokens.font.body),
+        };
     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] }));
+    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, ...labelType }, children: label })) : null] }));
 }

package/dist/react-native/ui.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Image, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
+import { Animated, Image, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
 import { useKeyboardLift } from "./keyboard.js";
 import { useDraggablePlacement } from "./placement.js";
 import { useGraineAgent } from "./index.js";
 import { GraineLoader } from "./loader.js";
 import { resolveNativeAppearance } from "./appearance.js";
+import { useDesign } from "./use-design.js";
+import { letterSpacing, lineHeight, onAccentFor, shadowStyle, softFor, surfaceFill } from "./design-math.js";
+import { normaliseHex, readableOn } from "../theme.js";
 const DARK = {
     surface: "#17161A",
     border: "rgba(255,255,255,0.09)",
@@ -31,14 +34,17 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
         accent: "#318CE7",
         heading: "Assistant",
     });
-    const accent = accentProp ?? dashboard.accent;
+    const look = useDesign(scheme);
+    const accent = accentProp ?? (look.classic ? dashboard.accent : look.tokens.colors.accent);
     const name = nameProp ?? dashboard.heading;
     const avatarUrl = avatarProp ?? dashboard.logoUrl ?? undefined;
     const deviceScheme = useColorScheme();
     const styles = useMemo(() => {
+        if (!look.classic)
+            return makeDesignStyles(look, accent, themeProp);
         const base = (scheme === "auto" ? deviceScheme === "light" : scheme === "light") ? LIGHT : DARK;
         return makeStyles(themeProp ? { ...base, ...themeProp } : base);
-    }, [scheme, deviceScheme, themeProp]);
+    }, [scheme, deviceScheme, themeProp, look, accent]);
     const [expanded, setExpanded] = useState(surface === "chat");
     const keyboardLift = useKeyboardLift();
     const baseBottom = launcherInset.bottom ?? bottomInset;
@@ -51,6 +57,21 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
     const [captions, setCaptions] = useState(captionsOn);
     const [draft, setDraft] = useState("");
     const scrollRef = useRef(null);
+    const panelIn = useRef(new Animated.Value(1)).current;
+    const lookRef = useRef(look);
+    lookRef.current = look;
+    const still = look.classic || look.durationMs <= 0;
+    useEffect(() => {
+        if (!expanded || still) {
+            panelIn.setValue(1);
+            return;
+        }
+        panelIn.setValue(0);
+        const { durationMs, easing } = lookRef.current;
+        const a = Animated.timing(panelIn, { toValue: 1, duration: durationMs, easing, useNativeDriver: true });
+        a.start();
+        return () => a.stop();
+    }, [expanded, still, panelIn]);
     const last = messages[messages.length - 1];
     const waiting = connecting;
     const waitingMoment = "connecting";
@@ -89,13 +110,16 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
                 right: launcherInset.right ?? 12,
                 left: launcherInset.left ?? 12,
             },
-        ], children: [expanded && (_jsxs(View, { style: styles.panel, children: [_jsxs(ScrollView, { ref: scrollRef, style: [styles.transcript, keyboardLift ? styles.transcriptLifted : null], contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: isChat
+        ], children: [expanded && (_jsxs(PanelFrame, { animated: !look.classic, style: look.classic ? styles.panel : [styles.panel, {
+                        opacity: panelIn,
+                        transform: [{ translateY: panelIn.interpolate({ inputRange: [0, 1], outputRange: [8, 0] }) }],
+                    }], children: [look.classic ? null : (_jsx(View, { style: styles.header, children: _jsx(Text, { numberOfLines: 1, style: styles.headerTitle, children: name }) })), _jsxs(ScrollView, { ref: scrollRef, style: [styles.transcript, keyboardLift ? styles.transcriptLifted : null], contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: isChat
                                     ? "I can see what you\u2019re working on \u2014 type a question, or I\u2019ll step in if you get stuck."
                                     : "I can see what you\u2019re working on \u2014 ask me anything, or I\u2019ll step in if you get stuck." })), messages.map((m, i) => (_jsx(View, { style: [
                                     styles.bubble,
-                                    m.role === "agent" ? styles.agentBubble : [styles.customerBubble, { backgroundColor: accent }],
+                                    m.role === "agent" ? styles.agentBubble : [styles.customerBubble, look.classic ? { backgroundColor: accent } : null],
                                 ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(View, { children: _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { style: styles.input, value: draft, onChangeText: setDraft, placeholder: "Type a message", placeholderTextColor: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && !isChat && caption?.text ? (_jsx(View, { style: styles.captionWrap, children: _jsx(Text, { numberOfLines: 3, style: [styles.caption, caption.live && styles.captionLive], children: caption.text }) })) : null, _jsxs(View, { style: styles.bar, children: [avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.avatarImage, accessibilityIgnoresInvertColors: true })) : (_jsx(View, { style: [styles.avatar, { backgroundColor: accent }], children: _jsx(Text, { style: styles.avatarGlyph, children: "\u2726" }) })), _jsxs(Pressable, { onPress: () => { if (!drag.dragging)
-                            setExpanded((v) => !v); }, style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), canSwitch ? (_jsx(Pressable, { onPress: () => setSurface(isChat ? "voice" : "chat"), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: isChat ? "Switch to a call" : "Switch to chat", style: styles.round, children: _jsx(Text, { style: styles.glyph, children: isChat ? "📞" : "💬" }) })) : null, waiting ? null : (_jsxs(_Fragment, { children: [isChat ? null : (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, muted && styles.glyphOnAccent], children: muted ? "🔇" : "🎙" }) })] })), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] }))] })] }));
+                            setExpanded((v) => !v); }, style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), canSwitch ? (_jsx(Pressable, { onPress: () => setSurface(isChat ? "voice" : "chat"), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: isChat ? "Switch to a call" : "Switch to chat", style: styles.round, children: _jsx(Text, { style: styles.glyph, children: isChat ? "📞" : "💬" }) })) : null, waiting ? null : (_jsxs(_Fragment, { children: [isChat ? null : (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, !look.classic && styles.mic, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, !look.classic && styles.glyphOnAccent, muted && (look.classic ? styles.glyphOnAccent : styles.glyphOnDanger)], children: muted ? "🔇" : "🎙" }) })] })), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] }))] })] }));
 }
 export const GraineLauncher = GraineAgentBar;
 const makeStyles = (t) => StyleSheet.create({
@@ -148,3 +172,112 @@ const makeStyles = (t) => StyleSheet.create({
     },
     chevron: { color: t.text, fontSize: 16, lineHeight: 18 },
 });
+function PanelFrame({ animated, style, children }) {
+    return animated ? _jsx(Animated.View, { style: style, children: children }) : _jsx(View, { style: style, children: children });
+}
+function makeDesignStyles(look, accent, over) {
+    const t = look.tokens;
+    const c = t.colors;
+    const f = t.font;
+    const r = t.shape.radius;
+    const bw = t.shape.borderWidth;
+    const pad = t.spacing.cardPadding;
+    const surface = over?.surface ?? surfaceFill(c.surface, t);
+    const border = over?.border ?? c.border;
+    const text = over?.text ?? c.text;
+    const sub = over?.sub ?? c.textMuted;
+    const chip = over?.chip ?? softFor(accent, t);
+    const onAccent = over?.onAccent ?? onAccentFor(accent, t);
+    const danger = over?.danger ?? c.danger;
+    const bodyFont = look.font(f.body);
+    const headingFont = look.font(f.heading);
+    const body = {
+        fontSize: f.scale.body,
+        lineHeight: lineHeight(f.scale.body, f.lineHeight.body),
+        fontWeight: String(f.weights.body),
+        letterSpacing: letterSpacing(f.scale.body, f.letterSpacing.body),
+        fontFamily: bodyFont,
+    };
+    const mode = t.bubbles === "outline" || t.bubbles === "minimal" ? t.bubbles : "filled";
+    const followsAccent = normaliseHex(c.userBubble) === normaliseHex(c.accent);
+    const ownAccent = normaliseHex(accent) === normaliseHex(c.accent);
+    const userBubble = followsAccent ? accent : c.userBubble;
+    const userText = followsAccent
+        ? (over?.onAccent ?? (ownAccent ? c.userBubbleText : readableOn(accent, [c.userBubbleText, "#FFFFFF", "#101318"])))
+        : c.userBubbleText;
+    const agentBubble = mode === "filled" ? { backgroundColor: over?.chip ?? c.agentBubble }
+        : mode === "outline" ? { backgroundColor: "transparent", borderWidth: bw, borderColor: border }
+            : { backgroundColor: "transparent", paddingHorizontal: 0, paddingVertical: 2, borderRadius: 0 };
+    const customerBubble = mode === "filled" ? { backgroundColor: userBubble }
+        : mode === "outline" ? { backgroundColor: "transparent", borderWidth: bw, borderColor: accent }
+            : { backgroundColor: softFor(accent, t) };
+    return StyleSheet.create({
+        root: { position: "absolute", left: 12, right: 12, zIndex: 900 },
+        panel: {
+            backgroundColor: c.background, borderRadius: r.xl, borderWidth: bw, borderColor: border,
+            marginBottom: 8, overflow: "hidden",
+        },
+        header: {
+            backgroundColor: surface, paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.75),
+            borderBottomWidth: bw, borderBottomColor: border,
+        },
+        headerTitle: {
+            color: text, fontFamily: headingFont, fontSize: f.scale.title, fontWeight: String(f.weights.title),
+            letterSpacing: letterSpacing(f.scale.title, f.letterSpacing.title), lineHeight: lineHeight(f.scale.title, f.lineHeight.title),
+        },
+        transcript: { maxHeight: 240 },
+        transcriptLifted: { maxHeight: 150 },
+        transcriptInner: { padding: pad, gap: Math.max(4, Math.round(t.spacing.gap * 0.8)) },
+        empty: { color: sub, ...body },
+        bubble: {
+            maxWidth: "88%", paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.75), borderRadius: r.lg,
+        },
+        agentBubble: { alignSelf: "flex-start", borderBottomLeftRadius: r.sm, ...agentBubble },
+        customerBubble: { alignSelf: "flex-end", borderBottomRightRadius: r.sm, ...customerBubble },
+        agentText: { color: mode === "filled" ? (over?.text ?? c.agentBubbleText) : text, ...body },
+        customerText: { color: mode === "filled" ? userText : text, ...body },
+        composer: {
+            flexDirection: "row", alignItems: "center", gap: 8,
+            paddingHorizontal: Math.round((pad * 6) / 7), paddingBottom: Math.round((pad * 6) / 7),
+        },
+        input: {
+            flex: 1, backgroundColor: c.surfaceRaised, borderWidth: bw, borderColor: border, borderRadius: r.xl,
+            paddingHorizontal: 14, paddingVertical: Platform.OS === "ios" ? 10 : 7, color: text,
+            fontSize: f.scale.body, fontFamily: bodyFont,
+        },
+        send: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
+        sendLabel: { color: onAccent, fontSize: 17, lineHeight: 20 },
+        bar: {
+            flexDirection: "row", alignItems: "center", gap: 11,
+            backgroundColor: surface, borderRadius: r.xl, borderWidth: bw, borderColor: border,
+            paddingHorizontal: 8, paddingVertical: 8,
+            ...shadowStyle(t.elevation.floating),
+        },
+        avatar: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
+        avatarImage: { width: 38, height: 38, borderRadius: 19, backgroundColor: chip },
+        captionWrap: {
+            backgroundColor: surface, borderRadius: r.lg, borderWidth: bw, borderColor: border,
+            paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.8), marginBottom: 8,
+            ...shadowStyle(t.elevation.card),
+        },
+        caption: { color: text, ...body, fontWeight: String(f.weights.strong) },
+        captionLive: { opacity: 0.8 },
+        glyph: { color: text, fontSize: f.scale.caption + 1, fontWeight: String(f.weights.strong) },
+        glyphOnAccent: { color: onAccent },
+        glyphOnDanger: { color: "#FFFFFF" },
+        placeholder: { color: sub },
+        mic: { backgroundColor: accent },
+        muted: { backgroundColor: danger },
+        avatarGlyph: { color: onAccent, fontSize: 17, lineHeight: 20 },
+        name: {
+            color: text, fontSize: f.scale.body, fontWeight: String(f.weights.title), fontFamily: headingFont,
+            letterSpacing: letterSpacing(f.scale.body, f.letterSpacing.title),
+        },
+        status: { color: sub, fontSize: f.scale.caption, marginTop: 1, fontFamily: bodyFont },
+        round: {
+            width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center",
+            backgroundColor: chip,
+        },
+        chevron: { color: text, fontSize: 16, lineHeight: 18 },
+    });
+}

package/dist/react-native/use-design.d.ts

@@ -0,0 +1,18 @@
+import { type MotionEasing, type ResolvedDesign, type ThemeTokens } from "../theme.js";
+export declare function useReduceMotion(): boolean;
+export declare function easingOf(easing: MotionEasing | string, bounce: number): (t: number) => number;
+export interface DesignLook {
+    design: ResolvedDesign;
+    tokens: ThemeTokens;
+    classic: boolean;
+    font: (family: string) => string | undefined;
+    face: (family: string, weight: number) => {
+        fontFamily?: string;
+        fontWeight: any;
+    };
+    durationMs: number;
+    reduceMotion: boolean;
+    easing: (t: number) => number;
+}
+export declare function useDesign(scheme?: "light" | "dark" | "auto"): DesignLook;
+export declare function useGraineTheme(): ThemeTokens;

package/dist/react-native/use-design.js

@@ -0,0 +1,84 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import { AccessibilityInfo, Easing, useColorScheme } from "react-native";
+import { Ctx } from "./index.js";
+import { sessionDesign } from "../design.js";
+import { pickTokens } from "../theme.js";
+import { fontFamilyFor, isClassicLook } from "./design-math.js";
+import { faceFor, faceKey, textFace } from "./fonts.js";
+const DEFAULT_DESIGN = sessionDesign(null);
+const NO_FACES = {};
+const classicSeen = new WeakMap();
+function classic(design) {
+    let v = classicSeen.get(design);
+    if (v === undefined) {
+        v = isClassicLook(design);
+        classicSeen.set(design, v);
+    }
+    return v;
+}
+export function useReduceMotion() {
+    const [reduce, setReduce] = useState(false);
+    useEffect(() => {
+        let live = true;
+        const info = AccessibilityInfo;
+        try {
+            info?.isReduceMotionEnabled?.()?.then?.((v) => { if (live)
+                setReduce(!!v); }, () => { });
+        }
+        catch { }
+        let sub = null;
+        try {
+            sub = info?.addEventListener?.("reduceMotionChanged", (v) => setReduce(!!v));
+        }
+        catch {
+            sub = null;
+        }
+        return () => { live = false; try {
+            sub?.remove?.();
+        }
+        catch { } };
+    }, []);
+    return reduce;
+}
+export function easingOf(easing, bounce) {
+    if (easing === "linear" || easing === "none")
+        return Easing.linear;
+    if (easing === "emphasized")
+        return Easing.bezier(0.05, 0.7, 0.1, 1);
+    if (easing === "spring")
+        return Easing.out(Easing.back(Math.max(0.5, bounce * 4)));
+    return Easing.bezier(0.2, 0, 0, 1);
+}
+export function useDesign(scheme) {
+    const ctx = useContext(Ctx);
+    const device = useColorScheme();
+    const reduce = useReduceMotion();
+    const design = ctx?.design ?? DEFAULT_DESIGN;
+    const fonts = ctx?.fonts ?? null;
+    const faces = ctx?.faces ?? NO_FACES;
+    return useMemo(() => {
+        const tokens = scheme === "light" ? design.light : scheme === "dark" ? design.dark : pickTokens(design, device);
+        const durationMs = reduce || tokens.motion.easing === "none" ? 0 : Math.max(0, tokens.motion.durationMs);
+        return {
+            design,
+            tokens,
+            classic: classic(design),
+            font: (family) => {
+                const own = fontFamilyFor(family, fonts);
+                if (own)
+                    return own;
+                const weight = family === tokens.font.heading && family !== tokens.font.body
+                    ? tokens.font.weights.title : tokens.font.weights.body;
+                const f = faceFor(family, weight);
+                return f ? faces[faceKey(f.family, f.weight)] : undefined;
+            },
+            face: (family, weight) => textFace(family, weight, fonts, faces, fontFamilyFor),
+            durationMs,
+            reduceMotion: reduce,
+            easing: easingOf(tokens.motion.easing, tokens.motion.bounce),
+        };
+    }, [design, fonts, faces, device, reduce, scheme]);
+}
+export function useGraineTheme() {
+    return useDesign().tokens;
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import type { GraineVoiceApi } from "./voice-launcher.js";
+export interface GraineVoiceBarProps {
+    api: GraineVoiceApi;
+    onClose?: () => void;
+    bottomInset?: number;
+    draggable?: boolean;
+    placement?: {
+        bottomOffset?: number;
+    } | null;
+    onPlacementChange?: (placement: {
+        bottomOffset: number;
+    }) => void;
+    name?: string;
+}
+export declare function GraineVoiceBar({ api, onClose, bottomInset, draggable, placement, onPlacementChange, name: nameProp, }: GraineVoiceBarProps): React.JSX.Element;