@graineai/inapp-react-native 0.38.0 → 0.40.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, LOGO_PLATES, LOGO_PLATE_WHITE, normaliseLogoPlate, logoBox, logoPlateLook, 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 LogoPlate, 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, LOGO_PLATES, LOGO_PLATE_WHITE, normaliseLogoPlate, logoBox, logoPlateLook, designPreset, normaliseDesignConfig, designFromAppearance, resolveTokens, resolveDesign, pickTokens, contrastRatio, readableOn, glyphUrl, } from "./theme.js";
 export { sessionDesign } from "./design.js";

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

@@ -1,7 +1,9 @@
+import { type LogoPlate } from "../theme.js";
 export interface NativeAppearance {
     accent: string;
     heading: string;
     logoUrl: string | null;
+    logoPlate: LogoPlate;
     radius: number;
 }
 export interface NativeAppearanceFallback {

package/dist/react-native/appearance.js

@@ -1,3 +1,4 @@
+import { normaliseLogoPlate } from "../theme.js";
 const HEX = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const RADIUS_CEILING = 48;
 const DEFAULT_ORIGIN = "https://www.graine.ai";
@@ -25,7 +26,7 @@ export function resolveNativeAppearance(appearance, fallback) {
     const origin = String(fallback.origin || DEFAULT_ORIGIN).replace(/\/+$/, "");
     const logoUrl = logoKey ? `${origin}/api/embed/logo?k=${encodeURIComponent(logoKey)}` : null;
     const radius = clamp(numeric(a.radius) ?? numeric(fallback.radius) ?? 18, max);
-    return { accent, heading, logoUrl, radius };
+    return { accent, heading, logoUrl, logoPlate: normaliseLogoPlate(a.logoPlate), radius };
 }
 const LIGHT = { surface: "#FFFFFF", border: "#E5E4E0", text: "#101318", muted: "#5F6672" };
 const DARK = { surface: "#17181B", border: "#2C2E33", text: "#F5F5F4", muted: "#A0A5AE" };

package/dist/react-native/fab.js

@@ -7,7 +7,7 @@ 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 { glyphUrl, LOGO_PLATE_WHITE, logoBox, logoPlateLook, readableOn } from "../theme.js";
 import { UNNAMED_TAP } from "../protocol.js";
 function AboveNativeScreens({ overlay: Overlay, children, }) {
     if (!Overlay)
@@ -69,15 +69,18 @@ export function GraineFab({ webView, position = "bottom-right", size = 56, accen
             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(DesignedLauncher, { look: look, size: size, accent: accentProp ?? look.tokens.colors.accent, name: name, label: label ?? `Talk to ${name}`, logoUrl: dashboard.logoUrl, logoPlate: dashboard.logoPlate, 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,
+                width: size, height: size, borderRadius: size / 2,
+                ...(dashboard.logoUrl && dashboard.logoPlate === "white"
+                    ? { backgroundColor: LOGO_PLATE_WHITE, borderWidth: 1, borderColor: "#E5E7EB" }
+                    : { backgroundColor: dashboardAccent }),
                 alignItems: "center", justifyContent: "center",
                 opacity: pressed ? 0.85 : 1,
                 elevation: 6, shadowColor: "#000", shadowOpacity: 0.25, shadowRadius: 8, shadowOffset: { width: 0, height: 4 },
-            }), children: dashboard.logoUrl ? (_jsx(Image, { source: { uri: dashboard.logoUrl }, style: { width: size * 0.6, height: size * 0.6, borderRadius: size * 0.3 } })) : (_jsx(Text, { style: { color: "#fff", fontSize: size * 0.4, fontWeight: "700" }, children: name.trim().charAt(0).toUpperCase() || "•" })) }));
+            }), children: dashboard.logoUrl ? (_jsx(Image, { source: { uri: dashboard.logoUrl }, resizeMode: "contain", style: { width: logoBox("circle", size), height: logoBox("circle", size) }, accessibilityIgnoresInvertColors: true })) : (_jsx(Text, { style: { color: "#fff", fontSize: size * 0.4, fontWeight: "700" }, children: name.trim().charAt(0).toUpperCase() || "•" })) }));
     };
     if (!prewarm && !open)
         return _jsx(AboveNativeScreens, { overlay: overlay, children: button({ start: () => { } }) });
@@ -87,9 +90,9 @@ export function GraineLauncherButton({ onPress, style, label, size = 56 }) {
     const { appearance, client } = useGraineAgent();
     const look = useDesign();
     const dashboard = resolveNativeAppearance(appearance, { accent: look.tokens.colors.accent, heading: "Assistant" });
-    return (_jsx(DesignedLauncher, { look: look, size: size, accent: look.tokens.colors.accent, name: dashboard.heading, label: label ?? `Talk to ${dashboard.heading}`, logoUrl: dashboard.logoUrl, origin: client.opts.baseUrl, place: style ?? {}, onPress: onPress }));
+    return (_jsx(DesignedLauncher, { look: look, size: size, accent: look.tokens.colors.accent, name: dashboard.heading, label: label ?? `Talk to ${dashboard.heading}`, logoUrl: dashboard.logoUrl, logoPlate: dashboard.logoPlate, origin: client.opts.baseUrl, place: style ?? {}, onPress: onPress }));
 }
-function DesignedLauncher({ look, size, accent, name, label, logoUrl, origin, place, onPress, }) {
+function DesignedLauncher({ look, size, accent, name, label, logoUrl, logoPlate = "accent", origin, place, onPress, }) {
     const t = look.tokens;
     const [failed, setFailed] = useState([]);
     const fail = (uri) => setFailed((cur) => (cur.includes(uri) ? cur : [...cur, uri]));
@@ -113,11 +116,12 @@ function DesignedLauncher({ look, size, accent, name, label, logoUrl, origin, pl
     const glyph = glyphUri && !failed.includes(glyphUri) ? glyphUri : null;
     const logo = logoUrl && !failed.includes(logoUrl) ? logoUrl : null;
     const hard = t.elevation.hardOffset;
+    const plate = logoPlateLook(!glyph && logo ? logoPlate : "accent", { ...t.colors, accent }, t.shape.borderWidth);
     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: {
+    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: logoBox(pill ? "circle" : t.shape.launcher, size), height: logoBox(pill ? "circle" : t.shape.launcher, size) }, 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" }));
@@ -126,11 +130,12 @@ function DesignedLauncher({ look, size, accent, name, label, logoUrl, origin, pl
                     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,
+                    backgroundColor: plate.fill,
+                    ...(plate.outline && !hard ? { borderWidth: plate.outline.width, borderColor: plate.outline.color } : null),
                     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),
+                            color: plate.outline ? readableOn(LOGO_PLATE_WHITE) : 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/voice-bar.js

@@ -2,18 +2,29 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Animated, Easing, Image, PixelRatio, Platform, Pressable, ScrollView, Text, TextInput, View } from "react-native";
 import { Ctx, useGraineAgent } from "./index.js";
-import { GraineLoader } from "./loader.js";
+import { GraineLoader, useGraineLoader } from "./loader.js";
 import { GraineWidget } from "./widget.js";
 import { resolveNativeAppearance } from "./appearance.js";
 import { useDesign } from "./use-design.js";
 import { glyphPixels, launcherRadius, letterSpacing, lineHeight, shadowStyle, surfaceFill } from "./design-math.js";
 import { useKeyboardLift } from "./keyboard.js";
 import { useDraggablePlacement } from "./placement.js";
-import { glyphUrl, SDK_ICONS } from "../theme.js";
+import { glyphUrl, logoBox, logoPlateLook, SDK_ICONS } from "../theme.js";
+import { DEFAULT_LOADER_TEXT } from "../protocol.js";
+import { TitleBar, windowed } from "./window-chrome.js";
 const BAR_HEIGHT = 60;
 const BUTTON = 38;
 const METER = [0.55, 1, 0.7, 0.4];
-function statusOf(api, isChat, chatConnected) {
+function connectingLook(api, connectingText) {
+    if (api.connectStage === "retrying" || api.connectStage === "switching") {
+        return { text: "Reconnecting…", waiting: "reconnecting" };
+    }
+    if (api.slowConnect && connectingText === DEFAULT_LOADER_TEXT.connecting) {
+        return { text: "Still connecting…", waiting: "connecting", label: "Still connecting…" };
+    }
+    return { text: connectingText, waiting: "connecting" };
+}
+function statusOf(api, isChat, chatConnected, connectingText = DEFAULT_LOADER_TEXT.connecting) {
     const conn = api.connectivity?.state;
     const say = (text) => ({ text, waiting: null, meter: false });
     if (api.error)
@@ -28,8 +39,10 @@ function statusOf(api, isChat, chatConnected) {
         return say("Needs microphone");
     if (conn === "failed")
         return say("Couldn’t load · tap to retry");
+    if (api.callFailed)
+        return say("Couldn’t connect · tap to retry");
     if (!api.ready || api.connecting)
-        return { text: "Connecting…", waiting: "connecting", meter: false };
+        return { ...connectingLook(api, connectingText), meter: false };
     if (api.muted)
         return say("Muted");
     if (api.connected && api.phase === "thinking")
@@ -62,7 +75,8 @@ export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, pl
         initialOffset: placement?.bottomOffset,
         onChange: (bottomOffset) => onPlacementChange?.({ bottomOffset }),
     });
-    const status = statusOf(api, isChat, chatConnected);
+    const loader = useGraineLoader();
+    const status = statusOf(api, isChat, chatConnected, loader.text.connecting);
     const conn = api.connectivity?.state;
     const micBlocked = !!api.error || api.micDenied || api.connecting || (!api.ready && conn !== "failed");
     const caption = !isChat && api.captionsOn && api.caption?.text ? api.caption : null;
@@ -78,11 +92,11 @@ export function GraineVoiceBar({ api, onClose, bottomInset, draggable = true, pl
     return (_jsxs(View, { pointerEvents: "box-none", ...drag.panHandlers, onLayout: drag.onLayout, style: {
             position: "absolute", zIndex: 900, gap: 8, left: 12, right: 12,
             bottom: baseBottom + drag.offset + keyboardLift,
-        }, children: [_jsx(WidgetGuard, { children: _jsx(GraineWidget, {}) }), isChat ? (_jsx(ChatWindow, { look: look, kit: kit, origin: origin, heading: heading, logoUrl: dash.logoUrl ?? undefined, messages: messages, send: send, online: chatConnected, lifted: keyboardLift > 0, onCollapse: () => (canSwitch ? setSurface("voice") : endCall()) })) : caption ? (_jsx(CaptionCard, { look: look, role: caption.role, text: caption.text, live: !!caption.live })) : null, _jsx(Raised, { t: t, level: "floating", radius: t.shape.radius.xl, children: _jsxs(View, { style: {
+        }, children: [_jsx(WidgetGuard, { children: _jsx(GraineWidget, {}) }), isChat ? (_jsx(ChatWindow, { look: look, kit: kit, origin: origin, heading: heading, logoUrl: dash.logoUrl ?? undefined, logoPlate: dash.logoPlate, messages: messages, send: send, online: chatConnected, lifted: keyboardLift > 0, onCollapse: () => (canSwitch ? setSurface("voice") : endCall()) })) : caption ? (_jsx(CaptionCard, { look: look, role: caption.role, text: caption.text, live: !!caption.live })) : null, _jsx(Raised, { t: t, level: "floating", radius: t.shape.radius.xl, children: _jsxs(View, { style: {
                         height: BAR_HEIGHT, paddingHorizontal: 9, flexDirection: "row", alignItems: "center", gap: 10,
                         backgroundColor: surfaceFill(c.surface, t), borderWidth: t.shape.borderWidth, borderColor: c.border,
                         borderRadius: t.shape.radius.xl, ...softShadow(t, "floating"),
-                    }, children: [_jsx(View, { style: { width: BUTTON, height: BUTTON, borderRadius: BUTTON / 2, backgroundColor: c.accent, alignItems: "center", justifyContent: "center", overflow: "hidden" }, children: _jsx(Mark, { t: t, size: BUTTON, glyph: 18, kit: kit, origin: origin, logoUrl: dash.logoUrl ?? undefined, initial: heading.charAt(0).toUpperCase() || "A", cover: true }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...body(14, t.font.weights.strong), color: c.text, lineHeight: 17.5 }, children: heading }), _jsx(View, { style: { flexDirection: "row", alignItems: "center", gap: 6, marginTop: 1 }, children: status.waiting ? (_jsx(GraineLoader, { moment: status.waiting, size: 14 })) : (_jsxs(_Fragment, { children: [status.meter ? _jsx(Meter, { look: look, color: c.accent }) : null, _jsx(Text, { numberOfLines: 1, style: { ...body(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.3) }, children: status.text })] })) })] }), canSwitch ? (_jsx(RoundButton, { label: isChat ? "Switch to a call" : "Switch to chat", fill: c.accentSoft, onPress: () => setSurface(isChat ? "voice" : "chat"), children: _jsx(Icon, { name: isChat ? "call" : "chat", t: t, color: c.text, kit: kit }) })) : null, isChat ? null : (_jsx(RoundButton, { label: !api.connected ? `Start talking to ${spoken}` : api.muted ? "Unmute" : "Mute", fill: api.muted ? c.danger : c.accent, disabled: micBlocked, onPress: () => {
+                    }, children: [_jsx(View, { style: { width: BUTTON, height: BUTTON, borderRadius: BUTTON / 2, ...markFill(t, dash.logoPlate, !t.icons.launcher && !!dash.logoUrl), alignItems: "center", justifyContent: "center", overflow: "hidden" }, children: _jsx(Mark, { t: t, size: BUTTON, glyph: 18, kit: kit, origin: origin, logoUrl: dash.logoUrl ?? undefined, initial: heading.charAt(0).toUpperCase() || "A" }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { numberOfLines: 1, style: { ...body(14, t.font.weights.strong), color: c.text, lineHeight: 17.5 }, children: heading }), _jsx(View, { style: { flexDirection: "row", alignItems: "center", gap: 6, marginTop: 1 }, children: status.waiting ? (_jsx(GraineLoader, { moment: status.waiting, label: status.label, size: 14 })) : (_jsxs(_Fragment, { children: [status.meter ? _jsx(Meter, { look: look, color: c.accent }) : null, _jsx(Text, { numberOfLines: 1, style: { ...body(t.font.scale.caption, t.font.weights.body), color: c.textMuted, lineHeight: lineHeight(t.font.scale.caption, 1.3) }, children: status.text })] })) })] }), canSwitch ? (_jsx(RoundButton, { label: isChat ? "Switch to a call" : "Switch to chat", fill: c.accentSoft, onPress: () => setSurface(isChat ? "voice" : "chat"), children: _jsx(Icon, { name: isChat ? "call" : "chat", t: t, color: c.text, kit: kit }) })) : null, isChat ? null : (_jsx(RoundButton, { label: !api.connected ? `Start talking to ${spoken}` : api.muted ? "Unmute" : "Mute", fill: api.muted ? c.danger : c.accent, disabled: micBlocked, onPress: () => {
                                 if (conn === "failed") {
                                     api.retry();
                                     return;
@@ -124,7 +138,13 @@ function Icon({ name, t, color, size = 18, kit, rotate }) {
     const common = { stroke: color, strokeLinecap: sharp ? "square" : "round", strokeLinejoin: sharp ? "miter" : "round" };
     return (_jsx(View, { style: rotate ? { transform: [{ rotate: "180deg" }] } : undefined, children: _jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", children: [icon.body ? (_jsx(Path, { d: icon.body, ...common, fill: filled || style === "duotone" ? color : "none", fillOpacity: style === "duotone" ? 0.28 : 1, strokeWidth: filled ? Math.max(1, stroke * 0.75) : stroke })) : null, icon.lines ? _jsx(Path, { d: icon.lines, ...common, fill: "none", strokeWidth: stroke }) : null] }) }));
 }
-function Mark({ t, size, glyph, kit, origin, logoUrl, initial, cover = false, }) {
+function markFill(t, plate, showsLogo) {
+    const look = logoPlateLook(showsLogo ? plate : "accent", t.colors, t.shape.borderWidth);
+    return look.outline
+        ? { backgroundColor: look.fill, borderWidth: look.outline.width, borderColor: look.outline.color }
+        : { backgroundColor: look.fill };
+}
+function Mark({ t, size, glyph, kit, origin, logoUrl, initial, shape = "circle", }) {
     const on = t.colors.onAccent;
     const g = t.icons.launcher;
     if (g) {
@@ -135,7 +155,8 @@ function Mark({ t, size, glyph, kit, origin, logoUrl, initial, cover = false, })
         return (_jsx(Image, { source: { uri: glyphUrl(origin, g.id, on, glyphPixels(size, PixelRatio.get()), t.icons.stroke) }, style: { width: glyph, height: glyph }, accessibilityIgnoresInvertColors: true }));
     }
     if (logoUrl) {
-        return _jsx(Image, { source: { uri: logoUrl }, style: cover ? { width: size, height: size } : { width: glyph, height: glyph }, resizeMode: cover ? "cover" : "contain", accessibilityIgnoresInvertColors: true });
+        const box = logoBox(shape, size);
+        return _jsx(Image, { source: { uri: logoUrl }, style: { width: box, height: box }, resizeMode: "contain", accessibilityIgnoresInvertColors: true });
     }
     return _jsx(Text, { style: { color: on, fontSize: Math.round(size * 0.4), fontWeight: "700" }, children: initial });
 }
@@ -184,12 +205,13 @@ 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, }) {
+function ChatWindow({ look, kit, origin, heading, logoUrl, logoPlate = "accent", messages, send, online, lifted, onCollapse, }) {
     const t = look.tokens;
     const c = t.colors;
     const r = t.shape.radius;
@@ -215,7 +237,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), ...markFill(t, logoPlate, !t.icons.launcher && !!logoUrl), 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", shape: markShape }) }), _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/voice-launcher.d.ts

@@ -31,6 +31,7 @@ export interface GraineVoiceLauncherProps {
         bootMs?: number;
         hardCapMs?: number;
         endWatchdogMs?: number;
+        slowConnectMs?: number;
     };
     children?: (api: GraineVoiceApi) => React.ReactNode;
 }
@@ -61,6 +62,10 @@ export interface GraineVoiceApi {
     reconnecting: boolean;
     error: string | null;
     micDenied: boolean;
+    connectStage: "registering" | "dialling" | "retrying" | "switching" | null;
+    slowConnect: boolean;
+    callFailed: boolean;
 }
 export declare const CAPTION_HISTORY = 12;
+export declare const SLOW_CONNECT_MS = 4000;
 export declare function GraineVoiceLauncher({ webView: WebView, autoStart, active: activeProp, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }: GraineVoiceLauncherProps): React.JSX.Element;

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

@@ -4,6 +4,7 @@ import { AppState, View } from "react-native";
 import { useGraineAgent } from "./index.js";
 import { requestMicrophonePermission } from "./permissions.js";
 export const CAPTION_HISTORY = 12;
+export const SLOW_CONNECT_MS = 4000;
 export function GraineVoiceLauncher({ webView: WebView, autoStart = false, active: activeProp = true, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }) {
     const { client, appearance, surface, surfaces } = useGraineAgent();
     const active = activeProp && surface !== "chat";
@@ -22,6 +23,9 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const [muted, setMutedState] = useState(false);
     const [fault, setFault] = useState(null);
     const [micDenied, setMicDenied] = useState(false);
+    const [connectStage, setConnectStage] = useState(null);
+    const [slowConnect, setSlowConnect] = useState(false);
+    const [callFailed, setCallFailed] = useState(false);
     const [ready, setReady] = useState(false);
     const readyRef = useRef(false);
     readyRef.current = ready;
@@ -291,6 +295,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 if (msg.connected) {
                     endedNotifiedRef.current = false;
                     setReconnecting(false);
+                    setConnectStage(null);
+                    setCallFailed(false);
                 }
                 setConnected(!!msg.connected);
                 setConnecting(!!msg.connecting);
@@ -299,6 +305,22 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     startedRef.current = false;
                 onCallState?.({ connected: !!msg.connected, connecting: !!msg.connecting });
                 return;
+            case "graine:progress": {
+                const stage = String(msg.stage || "");
+                if (stage === "failed") {
+                    setConnectStage(null);
+                    setConnecting(false);
+                    setCallFailed(true);
+                    startedRef.current = false;
+                    pendingStartRef.current = false;
+                    onCallState?.({ connected: false, connecting: false });
+                    return;
+                }
+                if (stage === "registering" || stage === "dialling" || stage === "retrying" || stage === "switching") {
+                    setConnectStage(stage);
+                }
+                return;
+            }
             case "graine:muted":
                 setMutedState(!!msg.muted);
                 return;
@@ -372,6 +394,15 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         }
     }, [autoStart, beginCall, client, onCaption, onCallState, onMicDenied, onTransport, onError, onEnded, post, pushContext, foldCaption]);
     const pendingStartRef = useRef(false);
+    const waitingOnConnect = active && !connected && !callFailed && (connecting || !ready);
+    useEffect(() => {
+        if (!waitingOnConnect) {
+            setSlowConnect(false);
+            return;
+        }
+        const t = setTimeout(() => setSlowConnect(true), timing?.slowConnectMs ?? SLOW_CONNECT_MS);
+        return () => clearTimeout(t);
+    }, [waitingOnConnect]);
     const lastCaption = captions.length ? captions[captions.length - 1] : null;
     const phase = reconnecting || connectivity.state === "failed" || connectivity.state === "retrying" ? "reconnecting"
         : connecting || (!ready && !!voiceAgentId) ? "connecting"
@@ -394,6 +425,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
             setConnecting(true);
             setMicDenied(false);
             setFault(null);
+            setCallFailed(false);
+            setConnectStage(null);
             setCaptions([]);
             setAwaitingAgent(false);
             client.clearPendingWidget();
@@ -411,6 +444,9 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         reconnecting,
         error: fault,
         micDenied,
+        connectStage,
+        slowConnect,
+        callFailed,
         setMuted: useCallback((m) => {
             setMutedState(m);
             post({ type: "graine:set-muted", muted: m });
@@ -460,6 +496,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         setCaptions([]);
         setMicDenied(false);
         setFault(null);
+        setCallFailed(false);
+        setConnectStage(null);
         client.clearPendingWidget();
         onCallState?.({ connected: false, connecting: false });
     }, [active]);

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,19 @@ 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 type LogoPlate = "accent" | "white";
+export declare const LOGO_PLATES: ReadonlyArray<LogoPlate>;
+export declare const LOGO_PLATE_WHITE = "#FFFFFF";
+export declare function normaliseLogoPlate(value: unknown): LogoPlate;
+export declare function logoBox(shape: string, size: number): number;
+export declare function logoPlateLook(plate: LogoPlate, colors: Pick<ThemeColors, "accent" | "border">, borderWidth?: number): {
+    fill: string;
+    outline: {
+        width: number;
+        color: string;
+    } | null;
+};
 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;