@graineai/inapp-react-native 0.38.0 → 0.39.0

package/dist/index.d.ts

@@ -35,5 +35,5 @@ export { GraineLauncherButton, type GraineLauncherButtonProps } from "./react-na
 export { faceFor, facesForDesign, fontUrl, FONT_ASSET_VERSION, type FontLoader, type FontFace } from "./react-native/fonts.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, SDK_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, type SdkIconName, } from "./theme.js";
+export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, SDK_ICONS, DESIGN_CHROMES, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, type DesignConfig, type DesignPreset, type ThemeTokens, type ThemeColors, type ThemeShadow, type ResolvedDesign, type DesignBubbles, type DesignChrome, type LauncherShape, type MotionEasing, type IconStyle, type SdkIconName, } from "./theme.js";
 export { sessionDesign } from "./design.js";

package/dist/index.js

@@ -26,5 +26,5 @@ export { GraineLauncherButton } from "./react-native/fab.js";
 export { faceFor, facesForDesign, fontUrl, FONT_ASSET_VERSION } from "./react-native/fonts.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, SDK_ICONS, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
+export { DESIGN_PRESETS, DEFAULT_DESIGN_PRESET, DESIGN_FONTS, LAUNCHER_ICONS, SDK_ICONS, DESIGN_CHROMES, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
 export { sessionDesign } from "./design.js";

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

@@ -10,6 +10,7 @@ import { glyphPixels, launcherRadius, letterSpacing, lineHeight, shadowStyle, su
 import { useKeyboardLift } from "./keyboard.js";
 import { useDraggablePlacement } from "./placement.js";
 import { glyphUrl, SDK_ICONS } from "../theme.js";
+import { TitleBar, windowed } from "./window-chrome.js";
 const BAR_HEIGHT = 60;
 const BUTTON = 38;
 const METER = [0.55, 1, 0.7, 0.4];
@@ -184,10 +185,11 @@ function CaptionCard({ look, role, text, live }) {
     const t = look.tokens;
     const c = t.colors;
     const rise = useRise(look);
+    const win = windowed(t);
     return (_jsx(Animated.View, { style: rise, children: _jsx(Raised, { t: t, level: "card", radius: t.shape.radius.lg, children: _jsxs(View, { style: {
                     backgroundColor: surfaceFill(c.surface, t), borderWidth: t.shape.borderWidth, borderColor: c.border,
                     borderRadius: t.shape.radius.lg, paddingHorizontal: 12, paddingVertical: 8, ...softShadow(t, "card"),
-                }, children: [role === "customer" ? (_jsx(Text, { style: { ...look.face(t.font.body, t.font.weights.strong), color: c.accent, fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", marginBottom: 2 }, children: "You" })) : null, _jsx(Text, { numberOfLines: 2, style: { ...look.face(t.font.body, t.font.weights.strong), color: c.text, fontSize: 13, lineHeight: 17.5, opacity: live ? 0.75 : 1 }, children: text })] }) }) }));
+                }, children: [win ? (_jsx(View, { style: { marginBottom: 6 }, children: _jsx(TitleBar, { t: t, title: "captions", size: "caption", radius: t.shape.radius.lg, bleed: { horizontal: 12, top: 8 } }) })) : null, role === "customer" ? (_jsx(Text, { style: { ...look.face(t.font.body, t.font.weights.strong), color: c.accent, fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", marginBottom: 2 }, children: "You" })) : null, _jsx(Text, { numberOfLines: 2, style: { ...look.face(t.font.body, t.font.weights.strong), color: c.text, fontSize: 13, lineHeight: 17.5, opacity: live ? 0.75 : 1 }, children: text })] }) }) }));
 }
 function ChatWindow({ look, kit, origin, heading, logoUrl, messages, send, online, lifted, onCollapse, }) {
     const t = look.tokens;
@@ -215,7 +217,7 @@ function ChatWindow({ look, kit, origin, heading, logoUrl, messages, send, onlin
         letterSpacing: letterSpacing(size, t.font.letterSpacing.body),
     });
     const titleSize = Math.min(t.font.scale.title, 16);
-    return (_jsx(Animated.View, { style: rise, children: _jsx(Raised, { t: t, level: "floating", radius: r.xl, children: _jsx(View, { style: { backgroundColor: c.background, borderWidth: bw, borderColor: c.border, borderRadius: r.xl, ...softShadow(t, "floating") }, children: _jsxs(View, { style: { borderRadius: Math.max(0, r.xl - bw), overflow: "hidden" }, children: [_jsxs(View, { style: { height: 50, flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 12, backgroundColor: surfaceFill(c.surface, t), borderBottomWidth: bw, borderBottomColor: c.border }, children: [_jsx(View, { style: { width: 30, height: 30, borderRadius: launcherRadius(markShape, 30, t), backgroundColor: c.accent, alignItems: "center", justifyContent: "center", overflow: "hidden", ...(Platform.OS === "ios" && markShape === "squircle" ? { borderCurve: "continuous" } : null) }, children: _jsx(Mark, { t: t, size: 30, glyph: 14, kit: kit, origin: origin, logoUrl: logoUrl, initial: heading.charAt(0).toUpperCase() || "A" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...look.face(t.font.heading, t.font.weights.title), color: c.text, fontSize: titleSize, lineHeight: lineHeight(titleSize, t.font.lineHeight.title), letterSpacing: letterSpacing(titleSize, t.font.letterSpacing.title) }, children: heading }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [online ? _jsx(View, { style: { width: 6, height: 6, borderRadius: 3, backgroundColor: c.success } }) : null, _jsx(Text, { style: { ...text(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.2) }, children: online ? "Online" : "Connecting…" })] })] }), _jsx(Pressable, { onPress: onCollapse, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Collapse", children: _jsx(Icon, { name: "chevron", t: t, color: c.textMuted, kit: kit, rotate: true }) })] }), _jsxs(ScrollView, { ref: scroll, style: { maxHeight: lifted ? 150 : 260 }, contentContainerStyle: { padding: 12, gap: t.spacing.gap }, keyboardShouldPersistTaps: "handled", children: [messages.length === 0 ? (_jsx(Text, { style: { ...text(t.font.scale.body, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.body, t.font.lineHeight.body) }, children: online ? `${heading} can see what you’re looking at — ask it anything.` : "Connecting…" })) : null, messages.map((m, i) => {
+    return (_jsx(Animated.View, { style: rise, children: _jsx(Raised, { t: t, level: "floating", radius: r.xl, children: _jsx(View, { style: { backgroundColor: c.background, borderWidth: bw, borderColor: c.border, borderRadius: r.xl, ...softShadow(t, "floating") }, children: _jsxs(View, { style: { borderRadius: Math.max(0, r.xl - bw), overflow: "hidden" }, children: [windowed(t) ? (_jsx(TitleBar, { t: t, title: heading, online: online, radius: r.xl, right: _jsx(Pressable, { onPress: onCollapse, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Collapse", children: _jsx(Icon, { name: "chevron", t: t, color: c.textMuted, kit: kit, size: 16, rotate: true }) }) })) : (_jsxs(View, { style: { height: 50, flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 12, backgroundColor: surfaceFill(c.surface, t), borderBottomWidth: bw, borderBottomColor: c.border }, children: [_jsx(View, { style: { width: 30, height: 30, borderRadius: launcherRadius(markShape, 30, t), backgroundColor: c.accent, alignItems: "center", justifyContent: "center", overflow: "hidden", ...(Platform.OS === "ios" && markShape === "squircle" ? { borderCurve: "continuous" } : null) }, children: _jsx(Mark, { t: t, size: 30, glyph: 14, kit: kit, origin: origin, logoUrl: logoUrl, initial: heading.charAt(0).toUpperCase() || "A" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...look.face(t.font.heading, t.font.weights.title), color: c.text, fontSize: titleSize, lineHeight: lineHeight(titleSize, t.font.lineHeight.title), letterSpacing: letterSpacing(titleSize, t.font.letterSpacing.title) }, children: heading }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [online ? _jsx(View, { style: { width: 6, height: 6, borderRadius: 3, backgroundColor: c.success } }) : null, _jsx(Text, { style: { ...text(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.2) }, children: online ? "Online" : "Connecting…" })] })] }), _jsx(Pressable, { onPress: onCollapse, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Collapse", children: _jsx(Icon, { name: "chevron", t: t, color: c.textMuted, kit: kit, rotate: true }) })] })), _jsxs(ScrollView, { ref: scroll, style: { maxHeight: lifted ? 150 : 260 }, contentContainerStyle: { padding: 12, gap: t.spacing.gap }, keyboardShouldPersistTaps: "handled", children: [messages.length === 0 ? (_jsx(Text, { style: { ...text(t.font.scale.body, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.body, t.font.lineHeight.body) }, children: online ? `${heading} can see what you’re looking at — ask it anything.` : "Connecting…" })) : null, messages.map((m, i) => {
                                     const b = bubble(t, m.role !== "agent");
                                     return (_jsx(View, { style: [{ maxWidth: "84%" }, b.box], children: _jsx(Text, { style: { ...text(t.font.scale.body, t.font.weights.body), color: b.color, lineHeight: lineHeight(t.font.scale.body, t.font.lineHeight.body), opacity: m.live ? 0.75 : 1 }, children: m.text }) }, i));
                                 })] }), _jsxs(View, { style: { height: 58, flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 10, backgroundColor: c.background }, children: [_jsx(TextInput, { value: draft, onChangeText: setDraft, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false, placeholder: "Message\u2026", placeholderTextColor: c.textMuted, style: {

package/dist/react-native/widget.js

@@ -7,6 +7,7 @@ import { resolveNativeAppearance, resolveWidgetPalette } from "./appearance.js";
 import { useDesign } from "./use-design.js";
 import { alpha, letterSpacing, lineHeight, onAccentFor, shadowStyle, softFor } from "./design-math.js";
 import { DEFAULT_DESIGN_PRESET, designPreset } from "../theme.js";
+import { TitleBar, windowed } from "./window-chrome.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());
@@ -19,6 +20,7 @@ const CLASSIC_SCALE = designPreset(DEFAULT_DESIGN_PRESET).font.scale;
 function classicSkin(theme, accent, radius) {
     return {
         classic: true,
+        window: null,
         size: (today) => today,
         weight: (today) => today,
         family: () => undefined,
@@ -50,6 +52,7 @@ function designSkin(look, theme, accent, radius, ownRadius, surfaceOverride) {
     const density = t.spacing.cardPadding / 14;
     return {
         classic: false,
+        window: windowed(t) ? t : null,
         size: (today, role, exact) => (exact ? f.scale[role] : Math.round(((today * f.scale[role]) / CLASSIC_SCALE[role]) * 10) / 10),
         weight: (_today, which) => String(f.weights[which]),
         family: (heading) => look.font(heading ? f.heading : f.body),
@@ -411,9 +414,11 @@ export function GraineWidget(props) {
                                             paddingHorizontal: 16, borderRadius: 999, backgroundColor: tint(theme.border, 0.4),
                                         }, children: _jsx(Text, { style: { color: theme.text, fontSize: k.size(13.5, "body"), fontWeight: k.weight("700", "strong"), fontFamily: k.family() }, children: "None of these" }) })] })] }) })] }));
     }
+    const cardPad = k.pad(14, 12);
+    const cardFill = k.window && !props.theme?.surface ? k.window.colors.surface : theme.surface;
     return (_jsxs(_Fragment, { children: [chosen, _jsxs(Raised, { k: k, style: {
-                    backgroundColor: theme.surface, borderRadius: radius, borderWidth: k.borderWidth, borderColor: theme.border,
-                    ...k.pad(14, 12), marginBottom: 8,
+                    backgroundColor: cardFill, borderRadius: radius, borderWidth: k.borderWidth, borderColor: theme.border,
+                    ...cardPad, marginBottom: 8,
                     ...(k.classic ? k.depth.shadow : null),
-                }, children: [title ? (_jsx(Text, { style: { color: theme.text, ...titleType(14.5), marginBottom: 2 }, children: title })) : null, prompt ? (_jsx(Text, { style: { color: theme.muted, fontSize: k.size(12.5, "caption", true), lineHeight: k.line(17, k.size(12.5, "caption", true)), fontFamily: k.family(), 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: k.size(12.5, "caption", true), fontWeight: k.weight("600", "body"), fontFamily: k.family() }, children: "Dismiss" }) })] })] }));
+                }, children: [k.window ? (_jsx(View, { style: { marginBottom: 10 }, children: _jsx(TitleBar, { t: k.window, title: title, radius: radius, bleed: { horizontal: cardPad.paddingHorizontal, top: cardPad.paddingVertical } }) })) : title ? (_jsx(Text, { style: { color: theme.text, ...titleType(14.5), marginBottom: 2 }, children: title })) : null, prompt ? (_jsx(Text, { style: { color: theme.muted, fontSize: k.size(12.5, "caption", true), lineHeight: k.line(17, k.size(12.5, "caption", true)), fontFamily: k.family(), 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: k.size(12.5, "caption", true), fontWeight: k.weight("600", "body"), fontFamily: k.family() }, children: "Dismiss" }) })] })] }));
 }

package/dist/react-native/window-chrome.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import type { ThemeTokens } from "../theme.js";
+export declare const WINDOW_CHROME: {
+    readonly height: {
+        readonly window: 32;
+        readonly caption: 24;
+    };
+    readonly dot: {
+        readonly window: 10;
+        readonly caption: 8;
+    };
+    readonly gap: 6;
+    readonly inset: 12;
+    readonly lights: readonly ["#FF5F57", "#FEBC2E", "#28C840"];
+    readonly online: 6;
+};
+export declare const windowed: (t: ThemeTokens) => boolean;
+export declare const MONO: string;
+export declare function TitleBar({ t, title, size, online, right, radius, bleed, }: {
+    t: ThemeTokens;
+    title: string;
+    size?: "window" | "caption";
+    online?: boolean;
+    right?: React.ReactNode;
+    radius?: number;
+    bleed?: {
+        horizontal: number;
+        top: number;
+    };
+}): React.JSX.Element;

package/dist/react-native/window-chrome.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform, Text, View } from "react-native";
+export const WINDOW_CHROME = {
+    height: { window: 32, caption: 24 },
+    dot: { window: 10, caption: 8 },
+    gap: 6,
+    inset: 12,
+    lights: ["#FF5F57", "#FEBC2E", "#28C840"],
+    online: 6,
+};
+export const windowed = (t) => t.chrome === "window";
+export const MONO = Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
+export function TitleBar({ t, title, size = "window", online = false, right, radius = 0, bleed, }) {
+    const c = t.colors;
+    const h = WINDOW_CHROME.height[size];
+    const d = WINDOW_CHROME.dot[size];
+    const inner = Math.max(0, radius - t.shape.borderWidth);
+    return (_jsxs(View, { accessibilityRole: "header", style: {
+            height: h,
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: WINDOW_CHROME.inset,
+            backgroundColor: c.surfaceRaised,
+            borderBottomWidth: t.shape.borderWidth,
+            borderBottomColor: c.border,
+            borderTopLeftRadius: inner,
+            borderTopRightRadius: inner,
+            ...(bleed ? { marginHorizontal: -bleed.horizontal, marginTop: -bleed.top } : null),
+        }, children: [_jsx(View, { style: { flexDirection: "row", gap: WINDOW_CHROME.gap }, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: WINDOW_CHROME.lights.map((color) => (_jsx(View, { style: { width: d, height: d, borderRadius: d / 2, backgroundColor: color } }, color))) }), _jsxs(View, { pointerEvents: "none", style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, flexDirection: "row", alignItems: "center", justifyContent: "center", paddingHorizontal: 64 }, children: [online ? (_jsx(View, { style: { width: WINDOW_CHROME.online, height: WINDOW_CHROME.online, borderRadius: WINDOW_CHROME.online / 2, backgroundColor: c.success, marginRight: 6 } })) : null, _jsx(Text, { numberOfLines: 1, style: { fontFamily: MONO, fontSize: t.font.scale.caption, color: c.textMuted }, children: title.toLowerCase() })] }), right ? _jsx(View, { style: { marginLeft: "auto" }, children: right }) : null] }));
+}

package/dist/theme.d.ts

@@ -8,6 +8,7 @@ export type LauncherShape = "circle" | "squircle" | "rounded-square" | "square"
 export type IconStyle = "outline" | "filled" | "duotone" | "sharp";
 export type MotionEasing = "standard" | "emphasized" | "spring" | "linear" | "none";
 export type DesignFamily = "graine" | "native" | "modern" | "enterprise" | "expressive";
+export type DesignChrome = "none" | "window";
 export interface DesignConfig {
     preset: string;
     accent?: string;
@@ -24,6 +25,7 @@ export interface DesignConfig {
     launcherIcon?: string;
     launcherShape?: LauncherShape;
     iconStyle?: IconStyle;
+    chrome?: DesignChrome;
 }
 export interface ThemeColors {
     background: string;
@@ -121,6 +123,7 @@ export interface ThemeTokens {
         surfaceOpacity: number;
     } | null;
     bubbles: DesignBubbles;
+    chrome: DesignChrome;
 }
 export interface ResolvedDesign {
     config: DesignConfig;
@@ -145,6 +148,7 @@ export interface DesignPreset {
     };
     glass: ThemeTokens["glass"];
     bubbles: DesignBubbles;
+    chrome?: DesignChrome;
     colors: {
         light: Omit<ThemeColors, "accentSoft">;
         dark: Omit<ThemeColors, "accentSoft">;
@@ -158,6 +162,7 @@ export declare const DESIGN_NEUTRALS: ReadonlyArray<DesignNeutral>;
 export declare const DESIGN_BUBBLES: ReadonlyArray<DesignBubbles>;
 export declare const LAUNCHER_SHAPES: ReadonlyArray<LauncherShape>;
 export declare const ICON_STYLES: ReadonlyArray<IconStyle>;
+export declare const DESIGN_CHROMES: ReadonlyArray<DesignChrome>;
 export declare function normaliseHex(value: unknown): string | null;
 export declare function mixHex(a: string, b: string, t: number): string;
 export declare function luminanceOf(hex: string): number;

package/dist/theme.js

@@ -6,6 +6,7 @@ export const DESIGN_NEUTRALS = ["preset", "cool", "neutral", "warm"];
 export const DESIGN_BUBBLES = ["filled", "outline", "minimal"];
 export const LAUNCHER_SHAPES = ["circle", "squircle", "rounded-square", "square", "pill"];
 export const ICON_STYLES = ["outline", "filled", "duotone", "sharp"];
+export const DESIGN_CHROMES = ["none", "window"];
 const HEX6 = /^#?([0-9a-f]{6})$/i;
 const HEX3 = /^#?([0-9a-f]{3})$/i;
 export function normaliseHex(value) {
@@ -75,6 +76,7 @@ export const LAUNCHER_ICONS = [
     { id: "star", label: "Star", stroke: true, path: "M11.525 2.295a0.53 0.53 0 0 1 0.95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166 0.756a0.53 0.53 0 0 1 0.294 0.904l-3.736 3.638a2.123 2.123 0 0 0 -0.611 1.878l0.882 5.14a0.53 0.53 0 0 1 -0.771 0.56l-4.618 -2.428a2.122 2.122 0 0 0 -1.973 0L6.396 21.01a0.53 0.53 0 0 1 -0.77 -0.56l0.881 -5.139a2.122 2.122 0 0 0 -0.611 -1.879L2.16 9.795a0.53 0.53 0 0 1 0.294 -0.906l5.165 -0.755a2.122 2.122 0 0 0 1.597 -1.16z" },
     { id: "orbit", label: "Orbit", stroke: true, path: "M20.341 6.484A10 10 0 0 1 10.266 21.85M3.659 17.516A10 10 0 0 1 13.74 2.152M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0zM17 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0zM3 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0z" },
     { id: "sparkle-filled", label: "Sparkle (filled)", stroke: false, path: "M19.5 13.5a1.479 1.479 0 0 1 -0.977 1.401L13.688 16.688l-1.781 4.839a1.492 1.492 0 0 1 -2.801 0L7.312 16.688l-4.839 -1.781a1.492 1.492 0 0 1 0 -2.801L7.312 10.312l1.781 -4.839a1.492 1.492 0 0 1 2.801 0L13.688 10.312l4.839 1.781A1.479 1.479 0 0 1 19.5 13.5ZM14.25 4.5h1.5V6a0.75 0.75 0 0 0 1.5 0V4.5h1.5a0.75 0.75 0 0 0 0 -1.5H17.25V1.5a0.75 0.75 0 0 0 -1.5 0V3H14.25a0.75 0.75 0 0 0 0 1.5Zm8.25 3h-0.75V6.75a0.75 0.75 0 0 0 -1.5 0v0.75h-0.75a0.75 0.75 0 0 0 0 1.5h0.75v0.75a0.75 0.75 0 0 0 1.5 0V9h0.75a0.75 0.75 0 0 0 0 -1.5Z" },
+    { id: "buddy", label: "Buddy", stroke: true, path: "M12 3c4.97 0 8 3.03 8 8.5S16.97 21 12 21 4 17.97 4 11.5 7.03 3 12 3z M9.25 10.25v1.75 M14.75 10.25v1.75 M9.5 15.1c1.4 1.15 3.6 1.15 5 0" },
     { id: "chat-dots-filled", label: "Chat dots (filled)", stroke: false, path: "M12 2.25A9.75 9.75 0 0 0 3.392 16.582L2.328 19.775a1.5 1.5 0 0 0 1.897 1.897l3.192 -1.064A9.75 9.75 0 1 0 12 2.25ZM7.875 13.125a1.125 1.125 0 1 1 1.125 -1.125A1.125 1.125 0 0 1 7.875 13.125Zm4.125 0a1.125 1.125 0 1 1 1.125 -1.125A1.125 1.125 0 0 1 12 13.125Zm4.125 0a1.125 1.125 0 1 1 1.125 -1.125A1.125 1.125 0 0 1 16.125 13.125Z" },
     { id: "graphic-eq", label: "Voice equalizer (filled)", stroke: false, path: "M7 17v-10q0 -0.425 0.288 -0.713T8 6q0.425 0 0.713 0.288T9 7v10q0 0.425 -0.288 0.713T8 18q-0.425 0 -0.713 -0.288T7 17Zm4 4v-18q0 -0.425 0.288 -0.713T12 2q0.425 0 0.713 0.288T13 3v18q0 0.425 -0.288 0.713T12 22q-0.425 0 -0.713 -0.288T11 21ZM3 13v-2q0 -0.425 0.288 -0.713T4 10q0.425 0 0.713 0.288T5 11v2q0 0.425 -0.288 0.713T4 14q-0.425 0 -0.713 -0.288T3 13Zm12 4v-10q0 -0.425 0.288 -0.713T16 6q0.425 0 0.713 0.288T17 7v10q0 0.425 -0.288 0.713T16 18q-0.425 0 -0.713 -0.288T15 17Zm4 -4v-2q0 -0.425 0.288 -0.713T20 10q0.425 0 0.713 0.288T21 11v2q0 0.425 -0.288 0.713T20 14q-0.425 0 -0.713 -0.288T19 13Z" },
 ];
@@ -1071,6 +1073,121 @@ const P_SOFT_PLAYFUL = {
         }
     }
 };
+const P_DESKTOP_BUDDY = {
+    "id": "desktop-buddy",
+    "name": "Desktop Buddy",
+    "tagline": "A friendly little computer — clean white windows, a blue pointer and a bit of bounce.",
+    "family": "modern",
+    "inspiredBy": [
+        "heyclicky.com — the playful desktop landing: Inter, glossy pills, a soft 0 10px 24px shadow, #0f7fff"
+    ],
+    "font": {
+        "body": "Inter",
+        "heading": "Inter",
+        "scale": {
+            "caption": 12,
+            "body": 15,
+            "title": 18,
+            "display": 28
+        },
+        "weights": {
+            "body": 400,
+            "strong": 600,
+            "title": 600
+        },
+        "letterSpacing": {
+            "body": 0,
+            "title": -0.01
+        },
+        "lineHeight": {
+            "body": 1.5,
+            "title": 1.25
+        }
+    },
+    "shape": {
+        "radius": {
+            "sm": 8,
+            "md": 12,
+            "lg": 16,
+            "xl": 24
+        },
+        "borderWidth": 1,
+        "launcher": "circle"
+    },
+    "spacing": {
+        "unit": 4,
+        "cardPadding": 16,
+        "gap": 10
+    },
+    "elevation": {
+        "card": {
+            "y": 10,
+            "blur": 24,
+            "spread": 0,
+            "opacity": 0.12,
+            "color": "#000000"
+        },
+        "floating": {
+            "y": 14,
+            "blur": 32,
+            "spread": 0,
+            "opacity": 0.16,
+            "color": "#000000"
+        },
+        "hardOffset": null
+    },
+    "motion": {
+        "durationMs": 320,
+        "easing": "spring",
+        "bounce": 0.25
+    },
+    "icons": {
+        "style": "outline",
+        "stroke": 2,
+        "launcher": "buddy"
+    },
+    "glass": null,
+    "bubbles": "filled",
+    "chrome": "window",
+    "colors": {
+        "light": {
+            "background": "#FBFBFB",
+            "surface": "#FFFFFF",
+            "surfaceRaised": "#F5F5F5",
+            "text": "#0A0A0A",
+            "textMuted": "#626262",
+            "border": "#E7E7E7",
+            "accent": "#0F7FFF",
+            "onAccent": "#FFFFFF",
+            "success": "#1F9D55",
+            "warning": "#FF7800",
+            "danger": "#ED1B26",
+            "userBubble": "#0F7FFF",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#F0F0F0",
+            "agentBubbleText": "#0A0A0A",
+            "scrim": "#000000"
+        },
+        "dark": {
+            "background": "#0B0B0C",
+            "surface": "#161618",
+            "surfaceRaised": "#1F1F22",
+            "text": "#F5F5F5",
+            "textMuted": "#A1A1A6",
+            "border": "#2C2C30",
+            "accent": "#3D8BFF",
+            "onAccent": "#FFFFFF",
+            "success": "#34C759",
+            "warning": "#FF9F0A",
+            "danger": "#FF453A",
+            "userBubble": "#3D8BFF",
+            "userBubbleText": "#FFFFFF",
+            "agentBubble": "#1F1F22",
+            "agentBubbleText": "#F5F5F5",
+            "scrim": "#000000"
+        }
+    }
+};
 const P_NEO_BRUTALISM = {
     "id": "neo-brutalism",
     "name": "Neo-Brutalist",
@@ -1761,7 +1878,7 @@ const P_HIGH_CONTRAST = {
         }
     }
 };
-export const DESIGN_PRESETS = [GRAINE_CLASSIC, P_CHAT_NEUTRAL, P_MATERIAL_3, P_IOS_NATIVE, P_MINIMAL_MONO, P_FLUENT_2, P_CARBON, P_LIQUID_GLASS, P_SOFT_PLAYFUL, P_NEO_BRUTALISM, P_EDITORIAL, P_LUXURY, P_RETRO_TERMINAL, P_WARM_EARTHY, P_HIGH_CONTRAST];
+export const DESIGN_PRESETS = [GRAINE_CLASSIC, P_CHAT_NEUTRAL, P_MATERIAL_3, P_IOS_NATIVE, P_MINIMAL_MONO, P_FLUENT_2, P_CARBON, P_LIQUID_GLASS, P_SOFT_PLAYFUL, P_DESKTOP_BUDDY, P_NEO_BRUTALISM, P_EDITORIAL, P_LUXURY, P_RETRO_TERMINAL, P_WARM_EARTHY, P_HIGH_CONTRAST];
 export const DEFAULT_DESIGN_PRESET = "graine-classic";
 export function designPreset(id) {
     const want = String(id ?? "").trim().toLowerCase();
@@ -1822,6 +1939,9 @@ export function normaliseDesignConfig(raw) {
     const iconStyle = pick(r.iconStyle, ICON_STYLES);
     if (iconStyle)
         out.iconStyle = iconStyle;
+    const chrome = pick(r.chrome, DESIGN_CHROMES);
+    if (chrome)
+        out.chrome = chrome;
     return out;
 }
 export function designFromAppearance(appearance) {
@@ -1959,6 +2079,7 @@ export function resolveTokens(configInput, scheme) {
         },
         glass,
         bubbles,
+        chrome: config.chrome ?? p.chrome ?? "none",
     };
 }
 export function resolveDesign(configInput) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "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.",
   "license": "MIT",