@graineai/inapp-react-native 0.36.0 → 0.37.0

package/dist/client.d.ts

@@ -1,5 +1,6 @@
 import { type ConnectionQuality, type QualitySample, type ActionHandler, type AppActionResult, type AppEvent, type ScreenContext, type ScreenField, type AgentSurface } from "./protocol.js";
 import { type FrictionConfig } from "./friction.js";
+import type { ResolvedDesign } from "./theme.js";
 export declare const SUBPROTOCOL = "graine.embed.v1";
 export interface GraineInAppOptions {
     baseUrl: string;
@@ -17,6 +18,7 @@ export interface SessionConfig {
     webcallAgentId?: string;
     wsHost?: string;
     appearance?: Record<string, any>;
+    design?: ResolvedDesign;
     variables?: Record<string, string>;
     components?: any[];
     appActions?: Array<{

package/dist/design.d.ts

@@ -0,0 +1,5 @@
+import { type ResolvedDesign } from "./theme.js";
+export declare function sessionDesign(session: {
+    design?: unknown;
+    appearance?: unknown;
+} | null | undefined): ResolvedDesign;

package/dist/design.js

@@ -0,0 +1,50 @@
+import { designFromAppearance, normaliseHex, resolveDesign } from "./theme.js";
+const isObject = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+const NULLABLE = {
+    "elevation.card": { y: 0, blur: 0, spread: 0, opacity: 0, color: "#000000" },
+    "elevation.floating": { y: 0, blur: 0, spread: 0, opacity: 0, color: "#000000" },
+    "elevation.hardOffset": { x: 0, y: 0 },
+    "icons.launcher": { id: "", path: "", stroke: true },
+    glass: { blur: 0, surfaceOpacity: 1 },
+};
+function fill(fallback, given, path) {
+    const template = NULLABLE[path];
+    if (template) {
+        if (given === null)
+            return null;
+        if (!isObject(given))
+            return fallback;
+        return fillObject(isObject(fallback) ? fallback : template, given, path);
+    }
+    if (isObject(fallback))
+        return isObject(given) ? fillObject(fallback, given, path) : fallback;
+    if (typeof fallback === "number")
+        return typeof given === "number" && Number.isFinite(given) ? given : fallback;
+    if (typeof fallback === "boolean")
+        return typeof given === "boolean" ? given : fallback;
+    if (typeof fallback === "string") {
+        if (typeof given !== "string" || !given)
+            return fallback;
+        if (/^#[0-9a-f]{6}$/i.test(fallback))
+            return normaliseHex(given) ?? fallback;
+        return given;
+    }
+    return fallback;
+}
+function fillObject(fallback, given, path) {
+    const out = {};
+    for (const key of Object.keys(fallback))
+        out[key] = fill(fallback[key], given[key], path ? `${path}.${key}` : key);
+    return out;
+}
+export function sessionDesign(session) {
+    const raw = session?.design;
+    if (!isObject(raw) || !isObject(raw.config))
+        return resolveDesign(designFromAppearance(session?.appearance));
+    const local = resolveDesign(raw.config);
+    return {
+        config: local.config,
+        light: fill(local.light, raw.light, ""),
+        dark: fill(local.dark, raw.dark, ""),
+    };
+}

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, type Fri
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, type AudioAdapter, type VoiceSessionOptions, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, type AudioFormat, type DecodedAudio, } from "./audio.js";
 export { addMaskRule, maskDeep, maskString } from "./mask.js";
-export { GraineProvider, useGraineAgent, useGraineSurface, useGraineConnection, useGraineVariables, useKeyboardLift, liftFor, useDraggablePlacement, clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index.js";
+export { GraineProvider, useGraineAgent, useGraineSurface, useGraineConnection, useGraineVariables, useKeyboardLift, liftFor, useDraggablePlacement, clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, useGraineTheme, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index.js";
 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";
@@ -32,3 +32,5 @@ export { RtcVoiceSessionController, RtcVoiceError, type RtcVoiceState, type RtcV
 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";
 export { LauncherVisibilityTracker, activeRouteName, type LauncherInset, type LauncherContinuity, type LauncherDelayPolicy, type LauncherGroup, type LauncherVisibility, type VisibilityDecision, } from "./react-native/navigation.js";
+export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, type DesignConfig, type DesignPreset, type ThemeTokens, type ThemeColors, type ThemeShadow, type ResolvedDesign, type DesignBubbles, type LauncherShape, type MotionEasing, type IconStyle, } from "./theme.js";
+export { sessionDesign } from "./design.js";

package/dist/index.js

@@ -14,7 +14,7 @@ export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, } from "
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, } from "./audio.js";
 export { addMaskRule, maskDeep, maskString } from "./mask.js";
-export { GraineProvider, useGraineAgent, useGraineSurface, useGraineConnection, useGraineVariables, useKeyboardLift, liftFor, useDraggablePlacement, clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, } from "./react-native/index.js";
+export { GraineProvider, useGraineAgent, useGraineSurface, useGraineConnection, useGraineVariables, useKeyboardLift, liftFor, useDraggablePlacement, clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, useGraineTheme, } from "./react-native/index.js";
 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";
@@ -23,3 +23,5 @@ export { RtcVoiceSessionController, RtcVoiceError, } from "./react-native/voice-
 export { GraineAgentBar, GraineLauncher, } from "./react-native/ui.js";
 export { GraineVoiceLauncher, CAPTION_HISTORY, } from "./react-native/voice-launcher.js";
 export { LauncherVisibilityTracker, activeRouteName, } from "./react-native/navigation.js";
+export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
+export { sessionDesign } from "./design.js";

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

@@ -0,0 +1,13 @@
+import { type ResolvedDesign, type ThemeShadow, type ThemeTokens } from "../theme.js";
+export declare function sameValue(a: unknown, b: unknown): boolean;
+export declare function isClassicLook(design: ResolvedDesign): boolean;
+export declare function fontFamilyFor(family: string | null | undefined, fonts: Record<string, string> | null | undefined): string | undefined;
+export declare function alpha(hex: string, a: number): string;
+export declare function shadowStyle(s: ThemeShadow | null | undefined): Record<string, unknown>;
+export declare function launcherRadius(shape: string, height: number, tokens: ThemeTokens): number;
+export declare function glyphPixels(size: number, pixelRatio: number): number;
+export declare function onAccentFor(accent: string, tokens: ThemeTokens): string;
+export declare function softFor(accent: string, tokens: ThemeTokens): string;
+export declare function surfaceFill(color: string, tokens: ThemeTokens): string;
+export declare function letterSpacing(size: number, em: number): number | undefined;
+export declare function lineHeight(size: number, multiplier: number): number;

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

@@ -0,0 +1,85 @@
+import { DEFAULT_DESIGN_PRESET, mixHex, normaliseHex, readableOn, resolveDesign, } from "../theme.js";
+export function sameValue(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || typeof a !== "object" || typeof b !== "object")
+        return false;
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    const ka = Object.keys(a), kb = Object.keys(b);
+    if (ka.length !== kb.length)
+        return false;
+    return ka.every((k) => sameValue(a[k], b[k]));
+}
+export function isClassicLook(design) {
+    const c = design.config;
+    if (c.launcherIcon !== undefined)
+        return false;
+    const legacy = { preset: DEFAULT_DESIGN_PRESET };
+    if (c.accent !== undefined)
+        legacy.accent = c.accent;
+    if (c.scheme !== undefined)
+        legacy.scheme = c.scheme;
+    if (c.roundness !== undefined)
+        legacy.roundness = c.roundness;
+    const classic = resolveDesign(legacy);
+    return sameValue(design.light, classic.light) && sameValue(design.dark, classic.dark);
+}
+export function fontFamilyFor(family, fonts) {
+    const want = String(family ?? "").trim();
+    if (!want || want.toLowerCase() === "system" || !fonts)
+        return undefined;
+    const hit = Object.prototype.hasOwnProperty.call(fonts, want)
+        ? fonts[want]
+        : Object.entries(fonts).find(([k]) => k.toLowerCase() === want.toLowerCase())?.[1];
+    return typeof hit === "string" && hit.trim() ? hit : undefined;
+}
+export function alpha(hex, a) {
+    const n = parseInt((normaliseHex(hex) ?? "#000000").slice(1), 16);
+    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${Math.round(a * 1000) / 1000})`;
+}
+export function shadowStyle(s) {
+    if (!s)
+        return {};
+    return {
+        shadowColor: s.color,
+        shadowOpacity: s.opacity,
+        shadowRadius: Math.round((s.blur / 2) * 10) / 10,
+        shadowOffset: { width: 0, height: s.y },
+        elevation: Math.max(1, Math.round((s.y + s.blur / 2) / 2)),
+    };
+}
+export function launcherRadius(shape, height, tokens) {
+    if (shape === "squircle")
+        return Math.round(height * 0.3);
+    if (shape === "rounded-square")
+        return tokens.shape.radius.lg;
+    if (shape === "square")
+        return tokens.shape.radius.sm;
+    return height / 2;
+}
+export function glyphPixels(size, pixelRatio) {
+    return Math.round(size * 0.46 * (pixelRatio > 0 ? pixelRatio : 1));
+}
+export function onAccentFor(accent, tokens) {
+    const a = normaliseHex(accent);
+    if (!a || a === normaliseHex(tokens.colors.accent))
+        return tokens.colors.onAccent;
+    return readableOn(a, [tokens.colors.onAccent, "#FFFFFF", "#101318"]);
+}
+export function softFor(accent, tokens) {
+    const a = normaliseHex(accent);
+    if (!a || a === normaliseHex(tokens.colors.accent))
+        return tokens.colors.accentSoft;
+    return mixHex(tokens.colors.surface, a, tokens.scheme === "light" ? 0.12 : 0.22);
+}
+export function surfaceFill(color, tokens) {
+    return tokens.glass ? alpha(color, tokens.glass.surfaceOpacity) : color;
+}
+export function letterSpacing(size, em) {
+    const v = Math.round(size * em * 100) / 100;
+    return v ? v : undefined;
+}
+export function lineHeight(size, multiplier) {
+    return Math.round(size * multiplier * 10) / 10;
+}

package/dist/react-native/fab.js

@@ -1,10 +1,13 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useRef, useState } from "react";
-import { Image, Pressable, Text, View } from "react-native";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Animated, Image, PixelRatio, Platform, Pressable, Text, View } from "react-native";
 import { Ctx, useGraineAgent, useGraineClient } from "./index.js";
 import { GraineVoiceLauncher } from "./voice-launcher.js";
 import { GraineAgentBar } from "./ui.js";
 import { resolveNativeAppearance } from "./appearance.js";
+import { useDesign } from "./use-design.js";
+import { glyphPixels, launcherRadius, onAccentFor, shadowStyle } from "./design-math.js";
+import { glyphUrl } from "../theme.js";
 import { UNNAMED_TAP } from "../protocol.js";
 function AboveNativeScreens({ overlay: Overlay, children, }) {
     if (!Overlay)
@@ -54,8 +57,9 @@ export function GraineTouchCapture({ children, enabled = true, style }) {
     return (_jsx(View, { style: [{ flex: 1 }, style], onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, children: children }));
 }
 export function GraineFab({ webView, position = "bottom-right", size = 56, accent: accentProp, label, overlay, prewarm = true, onOpen, onClose }) {
-    const { launcherVisible, launcherInset, appearance, error } = useGraineAgent();
+    const { launcherVisible, launcherInset, appearance, error, client } = useGraineAgent();
     const [open, setOpen] = useState(false);
+    const look = useDesign();
     const dashboard = resolveNativeAppearance(appearance, { accent: "#318CE7", heading: "Assistant", radius: 18 });
     const accent = accentProp ?? dashboard.accent;
     const name = dashboard.heading;
@@ -64,6 +68,9 @@ export function GraineFab({ webView, position = "bottom-right", size = 56, accen
         if (error || !launcherVisible)
             return null;
         const side = position === "bottom-left" ? { left: launcherInset.right } : { right: launcherInset.right };
+        if (!look.classic) {
+            return (_jsx(DesignedLauncher, { look: look, size: size, accent: accentProp ?? look.tokens.colors.accent, name: name, label: label ?? `Talk to ${name}`, logoUrl: dashboard.logoUrl, origin: client.opts.baseUrl, place: { position: "absolute", bottom: launcherInset.bottom, ...side }, onPress: () => { setOpen(true); api.start(); onOpen?.(); } }));
+        }
         return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label ?? `Talk to ${name}`, onPress: () => { setOpen(true); api.start(); onOpen?.(); }, style: ({ pressed }) => ({
                 position: "absolute", bottom: launcherInset.bottom, ...side,
                 width: size, height: size, borderRadius: size / 2, backgroundColor: dashboardAccent,
@@ -74,5 +81,50 @@ export function GraineFab({ webView, position = "bottom-right", size = 56, accen
     };
     if (!prewarm && !open)
         return _jsx(AboveNativeScreens, { overlay: overlay, children: button({ start: () => { } }) });
-    return (_jsx(GraineVoiceLauncher, { webView: webView, onEnded: () => { setOpen(false); onClose?.(); }, children: (api) => (_jsx(AboveNativeScreens, { overlay: overlay, children: open ? _jsx(GraineAgentBar, { accent: dashboardAccent, name: name }) : button(api) })) }));
+    return (_jsx(GraineVoiceLauncher, { webView: webView, onEnded: () => { setOpen(false); onClose?.(); }, children: (api) => (_jsx(AboveNativeScreens, { overlay: overlay, children: open ? _jsx(GraineAgentBar, { accent: look.classic ? dashboardAccent : accentProp, name: name }) : button(api) })) }));
+}
+function DesignedLauncher({ look, size, accent, name, label, logoUrl, origin, place, onPress, }) {
+    const t = look.tokens;
+    const [failed, setFailed] = useState([]);
+    const fail = (uri) => setFailed((cur) => (cur.includes(uri) ? cur : [...cur, uri]));
+    const shown = useRef(new Animated.Value(look.durationMs > 0 ? 0 : 1)).current;
+    useEffect(() => {
+        if (look.durationMs <= 0) {
+            shown.setValue(1);
+            return;
+        }
+        const a = Animated.timing(shown, { toValue: 1, duration: look.durationMs, easing: look.easing, useNativeDriver: true });
+        a.start();
+        return () => a.stop();
+    }, []);
+    const onAccent = onAccentFor(accent, t);
+    const pill = t.shape.launcher === "pill";
+    const radius = launcherRadius(t.shape.launcher, size, t);
+    const g = Math.round(size * 0.46 * 10) / 10;
+    const glyphUri = t.icons.launcher
+        ? glyphUrl(origin, t.icons.launcher.id, onAccent, glyphPixels(size, PixelRatio.get()), t.icons.stroke)
+        : null;
+    const glyph = glyphUri && !failed.includes(glyphUri) ? glyphUri : null;
+    const logo = logoUrl && !failed.includes(logoUrl) ? logoUrl : null;
+    const hard = t.elevation.hardOffset;
+    const corners = {
+        borderRadius: radius,
+        ...(t.shape.launcher === "squircle" && Platform.OS === "ios" ? { borderCurve: "continuous" } : null),
+    };
+    const mark = glyph ? (_jsx(Image, { source: { uri: glyph }, style: { width: g, height: g }, onError: () => fail(glyph), accessibilityIgnoresInvertColors: true }, glyph)) : logo ? (_jsx(Image, { source: { uri: logo }, resizeMode: "contain", style: { width: g, height: g }, onError: () => fail(logo), accessibilityIgnoresInvertColors: true }, logo)) : (_jsx(Text, { style: {
+            color: onAccent, fontSize: Math.round(size * 0.46), fontWeight: String(t.font.weights.title),
+            fontFamily: look.font(t.font.heading),
+        }, children: name.trim().charAt(0).toUpperCase() || "\u2022" }));
+    return (_jsxs(Animated.View, { pointerEvents: "box-none", style: [place, { opacity: shown, transform: [{ scale: shown.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }] }], children: [hard ? (_jsx(View, { pointerEvents: "none", style: { ...corners, position: "absolute", top: hard.y, left: hard.x, right: -hard.x, bottom: -hard.y, backgroundColor: t.colors.text } })) : null, _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: onPress, style: ({ pressed }) => ({
+                    ...corners,
+                    height: size, minWidth: size, width: pill ? undefined : size,
+                    flexDirection: "row", alignItems: "center", justifyContent: "center",
+                    gap: pill ? 8 : 0, paddingHorizontal: pill ? Math.round(size * 0.32) : 0,
+                    backgroundColor: accent,
+                    opacity: pressed ? 0.85 : 1,
+                    ...(hard ? { borderWidth: t.shape.borderWidth, borderColor: t.colors.text } : shadowStyle(t.elevation.floating)),
+                }), children: [mark, pill ? (_jsx(Text, { numberOfLines: 1, style: {
+                            color: onAccent, fontSize: t.font.scale.body, fontWeight: String(t.font.weights.strong),
+                            fontFamily: look.font(t.font.body),
+                        }, children: name })) : null] })] }));
 }

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

@@ -17,6 +17,8 @@ export type { AgentSurface, SurfacePolicy } from "../protocol.js";
 import { type AgentSurface, type ConnectionQuality } from "../protocol.js";
 export type { ConnectionQuality, QualitySample } from "../protocol.js";
 import type { FrictionConfig } from "../friction.js";
+import type { ResolvedDesign } from "../theme.js";
+export { useGraineTheme } from "./use-design.js";
 import { type LauncherInset, type LauncherVisibility } from "./navigation.js";
 interface GraineContextValue {
     client: GraineInAppClient;
@@ -36,6 +38,8 @@ interface GraineContextValue {
     launcherInset: LauncherInset;
     currentScreen: string | null;
     appearance: Record<string, any> | null;
+    design: ResolvedDesign;
+    fonts: Record<string, string> | null;
     sessionReady: boolean;
     onEvent: (fn: (e: GraineEvent) => void) => () => void;
     track: (name: string, data?: Record<string, unknown>) => void;
@@ -138,8 +142,9 @@ export interface GraineProviderProps extends Partial<GraineInAppOptions> {
     includeScreens?: string[];
     launcherDelayMs?: number;
     visibility?: LauncherVisibility;
+    fonts?: Record<string, string>;
 }
-export declare function GraineProvider({ children, autoConnect, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs, visibility, client: providedClient, ...options }: GraineProviderProps): React.JSX.Element;
+export declare function GraineProvider({ children, autoConnect, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs, visibility, fonts: fontsProp, client: providedClient, ...options }: GraineProviderProps): React.JSX.Element;
 export declare function useGraineAgent(): GraineContextValue;
 export declare function useGraineSurface(): {
     surface: AgentSurface;

package/dist/react-native/index.js

@@ -12,6 +12,9 @@ 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 { sameValue } from "./design-math.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 +32,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, client: providedClient, ...options }) {
     const clientRef = useRef(null);
     if (!clientRef.current) {
         clientRef.current =
@@ -61,6 +64,15 @@ 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 [sessionReady, setSessionReady] = useState(false);
     const [connectionQuality, setConnectionQuality] = useState("unknown");
     const [network, setNetwork] = useState("unknown");
@@ -170,6 +182,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 +244,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 +348,8 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
         launcherInset,
         currentScreen,
         appearance,
+        design,
+        fonts,
         sessionReady,
         onEvent,
         track: (name, data) => client.track(name, data),
@@ -346,7 +362,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, 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] }));
 }